maepon.blog

  • IME変換の確定のエンターキーで困るときの解決法案

    直近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を開いてドラッグドロップしてもらうという形で対応しました。もうちょっとスマートな配布方法を模索したい!

  • Twenty Twenty-Four テーマだとコーポレートサイトみたいなっちゃう!からのブログっぽくするための設定変更メモ

    Twenty Twenty-Four テーマだとコーポレートサイトみたいなっちゃう!からのブログっぽくするための設定変更メモ

    このブログはWordPressです。

    ベタにシンプルなブログなので、バージョンアップはなんの躊躇もなく実行しています。テーマもデフォルトテーマが新しくなると脊髄反射でそれに変更しています。

    「なんで変えるの?」と聞かれると特に理由はないのですが、まあ、新しいのはうれしいとかそういう感じです。

    で、今回もTwenty Twenty-Fourが出たのでサクッとテーマ変更したのですが…

    サンプルテキスト、サンプル画像で構成されたファーストビュー
    スクロールするとサンプルのコンテンツが展開されている
    ブログのエントリーは「おしらせ」的な扱い

    「コーポレートサイトじゃん!」とびっくり。

    「そうか、もうWordPressはそういう方向性なのね、ブログ書くプロダクトではなくなったのね」と持ち前の受け入れ(無批判にあきらめる)力を発揮しそうになったのですが、mimiさんに教えていただきちょっと設定をいじりました。

    その方法はテーマのドキュメントにあります。そこにある動画を見れば一発でわかるので是非。

    一応、私作成の手順です。

    外観→エディター
    固定ページ
    ブログホーム
    鉛筆?アイコン(編集)
    右上の「設定」(「設定」って感じのアイコンではないけども)
    縦三点アイコンの「操作」
    テンプレートを置換
    テンプレートが選択できます
    変わった!あとは保存して終了。

    ということで、無事にこのブログもコーポレートサイト状態から設定変更できました。そこからサイトエディターでちょこちょこ修正して完了。すごい、プレーンWordPress&デフォルトテーマでノーコード。

    というかひとつのテーマでサイトのタイプに応じたパターンを持っているってなにげにすごいですね。汎用性高い。

    なんかWordPressってテーマ変えてなんぼ感ありますが、デフォルトテーマのポテンシャルというかかけられているコストって結構すごいんじゃないかと思いますので「個人のブログぐらいはデフォルトテーマでいいじゃん!!」な考え方もスタイルとしていいんじゃないかと。

    個性とかオリジナリティー的な方向性もあるかも知れませんけど、結局みなさんnoteに書いたりしているところを見ると、個性はオリジナリティーはルックアンドフィールよりはコンテンツの中身ってことなんでしょうし。

  • esaをちょびっと便利に使う拡張機能を作りました

    esaをちょびっと便利に使う拡張機能を作りました

    esa.ioは、チームでの知識共有を目的としたドキュメント作成・管理ツールです。Markdown形式での編集や、タグを使った分類、記事のバージョン管理など、シンプルながらも強力な機能を提供しています。クリーンなインターフェースと直感的な操作性で、多くの開発者やビジネスチームに支持されています。esa.ioを用いることで、情報の共有やドキュメンテーションの効率が大幅に向上します。(ChatGPTによる紹介)

    私自身も、前職からesa.ioを知り、さまざまなドキュメントの保存ツールとして日常的に使ってきました。現職でもesa.ioの利用を継続しており、結構長い付き合いになっています。

    拡張機能の開発背景

    私自身がesa.ioを使う中で、個人の領域へのアクセスがもう少し効率的だと良いと思いました。外部のブックマークやesa.io内でのリンクたどりに頼ることなく、より直接的にマイページ的なものへアクセスできる方法を実現したく、「Esa MyHome Shortcut」の開発を始めました。

    機能の詳細

    「MY HOME」ショートカットは、esa.ioの使用中に個人の領域へのアクセスを簡単にする機能です。この機能を使えば、自分の記事やカテゴリに迅速にアクセスできるようになります。特に、頻繁に記事やメモを作成する私のようなユーザーや、多数のチームが存在する組織のメンバーには非常に便利です。

    esa.ioのメニューに「MY HOME」を追加

    メインのナビゲーション内に「MY HOME」のボタンが表示されているスクリーンショット

    「MY HOME」のリンク先は各記事

    マイページのリンク先に記事を設定するためのプルダウンが表示されているスクリーンショット

    各カテゴリを設定できます。

    マイページのリンク先にカテゴリを設定するためのボタンが表示されているスクリーンショット

    プライバシー保護

    「Esa MyHome Shortcut」拡張機能は、ユーザーのデータは外部サーバーに保存されることなく、LocalStorage上にのみ保管されます。データの送信や収集は一切行いません。

    リンク

    拡張機能を試してみたい方は、こちらのリンクからダウンロードできます。私たちの取り組みに興味を持っていただけたら幸いです。

    https://chrome.google.com/webstore/detail/esa-myhome-shortcut/jdcohgbjabmbgbcejhmligogpfpkjafp

    おまけ

    個人的にこの拡張機能のアイコンは、自分で作っておいて何ですが、いい感じにダサくて好きです。

    拡張機能のアイコンesaのキャラクターのアスキーアート的絵文字の上に「MY」と書かれている
  • 「Google Meet のチャット保存し忘れてた」をちょっとケアするブラウザ拡張作りました

    「Google Meet のチャット保存し忘れてた」をちょっとケアするブラウザ拡張作りました

    6月にClassiに入社してからはや2ヶ月が過ぎようとしています。

    バックエンドはGraphQL/Go、フロントエンドはAngularという、今まで仕事で書いたことがない組み合わせですが、とても頼りになるメンバーに迎えてもらったおかげでUnlearn&Learnの日々を過ごしています。

    Classiでの社内ミーティングはSlackのハドルも利用されてますが、主にGoolge Meetで行われます。で、社内のSlackで度々目にするのが「Google Meetのチャットを保存し忘れた。誰か取っていませんか?」的な投稿です。この問題に対して「これならブラウザの拡張機能で解決できるのでは?」と思いついたので、実際に作ってみることにしました。。

    「Google Meet Chat to Clipboard」という名前でchrome ウェブストアに公開済みです。機能は、Google Meetから退出する際に、チャットの内容を自動的にクリップボードに保存するだけです。

    最初は、LocalStorageにチャット内容を永続的に保存する方向も考えました。しかし、Google Meetのチャットは元々揮発性の思想で作られています。つまり、ミーティングが終了すればチャットの内容も消える仕様になっています。これを永続的に保存することが本当にユーザーのニーズに合っているのだろうかと疑問に思いました。

    それに対し、クリップボードへの保存なら揮発性を保ちつつも、一時的に必要な情報を取っておくことができます。また、クリップボードに保存された情報はユーザーの任意で他の場所に移すことができます。それにより、チャット内容の保存を忘れてしまったときの問題も解消できます。

    ざっとストアを調べたところ、このような機能を提供している拡張機能は見当たりませんでした。もし存在したとしても、提供元の信頼性を調査したり、コードを確認したりといった手間が発生します。特に、Meetのチャットには社内の重要なミーティングの情報も含まれているため、その点も慎重になる必要があります。そのため、自分で作成したこの拡張機能は、信頼性や安心感も含めて、一石二鳥の解決策となりました。これで、「チャットを保存し忘れた!」という問題から解放されればいいなと。

    似たような課題を持っている人がいましたら使ってみてください。

    Google Meet Chat to Clipboard – Chrome ウェブストア

    ちなみにコードのボイラープレートを組むのはChatGPTに、実際に組み上げていくのはGitHub Copilotに、ストア掲載文章などは再びChatGPTにお世話になりました。OpenAIさまさまです。

  • 岡山県で街区が集中しているところ(テクテクライフ)

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

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

    スクリーンショット:岡山県全体
    (さらに…)
  • マンガの話

    どうでもいい話。

    息子と鬼滅の刃の映画がすごいなって話になった。

    彼が言うには息子とそのまわりではあまりブームを感じないらしく、高校生世代にはあまりドンピシャじゃないのかな?となった。

    その後。

    エヴァの映画が決まったなー、もう父さん20年以上の付き合いだなー、もう、よくわからないところとか考えてみようとしなくなったなあ。

    キングダムは多分買い続けるけど、ちょっと辛くなってきたな。

    でもな、結局蒼天航路のほうが好きだわ、父さん。

    などとぐだぐだお話した。

  • 決まってるわけない

    朝、「あれ?このサプリ飲んだっけ?」ってなった。まあ、こういうことはある。

    で、その時に「飲んでた」としてやめておくか、「飲んでなかった」として飲んじゃうか、どうするかな?と、思った時に「この時にどちらを選ぶかでその人となりとか出るのかな?」とか頭をよぎった。「そんなもん、その時々で変わってくるわい」と即時ツッコむ私。

    飲んだ。

  • 『表参道のセレブ犬とカバーニャ要塞の野良犬』(文庫版)を読んでいる

    『表参道のセレブ犬とカバーニャ要塞の野良犬』(文庫版)を読んでいる

    この本について書いた若林氏のnoteでの文章がとても良くて、その勢いで本屋さんに行って買いました。まだ読んでいる途中ですが、キューバ編を読み終わってものすごく良かったので勢いで感想を書いています。

    (さらに…)