maepon.blog

直近Google Meetで困ってます。日本語変換して確定の時に押すEnterキーでチャットが送信されてしまうという現象に。ちょいちょいありますよねこういうの。英語圏の人が開発してて、リファクタリングとかしていると落ちちゃうんでしょうね。

Google MeetはClassiのミーティングでは常用しているので、この状態はなかなか辛いです。多分フィードバックはされているでしょうから、しばらくすると修正されると思います。とはいえすぐに自分たちで調整できれば助かるので調べました。

基本的な対応方針

ドキュメントレベルでエンターキーの押下を監視して、IMEで変換中なら以降、伝播させないという立て付け。ソースは下記です。

document.addEventListener('keydown', function(event) {
    if (event.key === 'Enter' && event.isComposing) {
        // IMEがアクティブな状態でエンターが押された場合、イベントをキャンセル
        event.preventDefault();
        event.stopPropagation();
    }
},true);

実装方法

DevToolsのコンソール

画面が表示された後に、DevToolsのコンソールで上記ソースを入力すると、以降は改善されます。

ブックマークレット

毎度コンソールに入力は面倒なので、ブックマークレットを準備していくと、起動後は改善されます。

javascript:document.addEventListener('keydown'%2C%20function(event)%20%7B%0A%20%20%20%20if%20(event.key%20%3D%3D%3D%20'Enter'%20%26%26%20event.isComposing)%20%7B%0A%20%20%20%20%20%20%20%20%2F%2F%20IME%E3%81%8C%E3%82%A2%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96%E3%81%AA%E7%8A%B6%E6%85%8B%E3%81%A7%E3%82%A8%E3%83%B3%E3%82%BF%E3%83%BC%E3%81%8C%E6%8A%BC%E3%81%95%E3%82%8C%E3%81%9F%E5%A0%B4%E5%90%88%E3%80%81%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%82%92%E3%82%AD%E3%83%A3%E3%83%B3%E3%82%BB%E3%83%AB%0A%20%20%20%20%20%20%20%20event.preventDefault()%3B%0A%20%20%20%20%20%20%20%20event.stopPropagation()%3B%0A%20%20%20%20%7D%0A%7D%2Ctrue)%3B

コードは Bookmarklet.linkで作成しました。

[Google Meetに限定]対応したChrome拡張を使う

私が作成した、Google Meet Chat to Clipboardという拡張に上記の対応を組み込んでおきました。この拡張を入れておけば、以降は特にアクションする必要はありません。

最後は手前味噌ですが、困っている人もいると思うので記録として残しておきます！

どこかに書いた気がするけど、ブラウザやプロファイルが新しくなる度に探すので貼っておく。これは便利で愛用してる。

javascript:(function(){prompt('Copy to Clipboard','['+document.title.replace(/([\[\]])/g,'\\$1')+']'+'('+location.href+')');})();

タイトルとURLだけ出せばいいと言うパターン用にこちら。Firefoxではクリップボードに改行が反映されない問題あります。Chronium系では問題なし。

javascript:(function(){prompt('Copy to Clipboard',document.title+'\n'+location.href);})();

仕事しているとメインで対象としているシステム以外にも「これがあると便利ですよね？」的なツールを作成することもあります。

その場合、Chromeの拡張で作成することもありますが、対象がクローズドなシステムだった場合、ストアで公開するわけにも行かないし、組織内配布の仕組みを利用しても「パートーナーさんにどう配布する？→結局zipで」という形になります。その場合、Chrome（Edge）を開発者モードにしてもらうなどの必要がでてきます。

となると、もうちょっと敷居低くやりたいとなるので、それで行けるのであれば「ブックマークレットでいいじゃん！！」となりました。「ブックマークのURLにjavascriptリンクコピペするだけだし！」と鼻息荒く作成して社内のSlackで共有したら見事にスベるという自体に。なんでや！

理由としては以下

• ブックマークレット？ってなった（開発チームの人でも若い世代にはおなじみではなかった）。
• 「ブックマークのURLにjavascriptリンクコピペする」がだけととらえられるのは開発者ぐらいのものという私の想像力の欠如

前者は知ってもらえばいいんですが、後者にどう対応するかが悩みどころでした。

で、至ったのは、リンクをブックマークツールバーにドラッグドロップでした。これであれば、コピペもいらない、URL編集しなくてもよい。

が、ありとあらゆる文書共有ツール、javascriptリンクを置くことを許してくれません。Confluenceダメ、GoogleDocumentダメ、esaもダメ。気持ちはわかるけども、も。ちなみに例として置こうとして見たんですが、このWordPressでもダメでした。つらい

最終的にはHTMLファイルを作成してダウンロードしてもらい、そのHTMLを開いてドラッグドロップしてもらうという形で対応しました。もうちょっとスマートな配布方法を模索したい！

大都会岡山 Advent Calendar 2020 – Adventar の記事です。

最近はテクテクライフで黙々と地図を埋めている日々なので、岡山県で街区が集中しているところを紹介します。