skpn @maepon

カテゴリー: ツール

  • Pick And Link：ID・コードからリンクを生成！ Chrome拡張機能を作った理由と活用法

    Pick And Link：ID・コードからリンクを生成！ Chrome拡張機能を作った理由と活用法

    はじめに

    仕事では複数のシステムやSaaSを利用し、それぞれのコンテンツをIDやコードで管理しています。 それらの情報を参照して別のシステムを見るという定型作業が多く、他のシステムへのリンクがあれば楽なのにという場面があります。

    しかしSaaSのカスタマイズには限界があり、自由にリンクを作ることが難しかったため、自社内でのIDやコードからリンクを生成する拡張機能を作成していました。

    ただしそれは社内情報を含んでいたため、公開ストアでの配布は無理。非公開グループでの共有はパートナーさんには提供できない。となると「開発者モードにしてインストールして使用してください」と案内する必要があります。

    これは、利用するためのハードルを高める結果となり、特に非エンジニア層にとっては利用の障壁が高くなっていました。

    そこで、拡張の本体に社内情報を含めず、別途設定ファイル（YAML）をインポートして利用する形にしたのがPick And Linkです。

    ISBN番号で各ストアへのリンクが表示されている例。

    開発の苦労

    設定ファイルにはYAMLを採用しました。

    • コメント込みでユーザーが分かりやすく
    • 修正も簡単

    ただしYAMLのエンコード・デコードにおいて、設定された式表現が変わってしまう現象に苦労しました。

    この開発は、GitHub Copilot Agentを活用し、コードを第一行から自分で手打ちするのではなく，「設計」→「指示」→「生成」→「調整」の流れを追う形で進めました。
    結果的に、ベースとなるロジックやストラクチャーを快速に作り、部分では手修正をかける、という作業スタイルでコードを立ち上げています。

    使ってみて分かった便利さ

    Pick And Linkを使ってみて、複数のシステムやサイトをまたいでIDやコードを検索窓に入力するという定型作業が大幅に効率化されると実感しました。
    これまでは、対象となるIDやコードをコピーし、システムごとに手動で検索窓に貼り付けて検索を繰り返す必要がありましたが、拡張機能を利用することで、リンクを一発で生成できるようになりました。
    これにより、作業時間の短縮だけでなく、手作業による貼り付けミスや検索ミスも防げるようになり、特にルーチンワークでのストレスが大幅に軽減されたと感じています。

    関連リンクのご案内

    Pick And Linkは以下からインストール・利用できます。

    設定ルールは以下で公開しています。必要に応じてインポートしてご利用ください。

    また、拡張機能の紹介ページもご用意していますので、詳しくはこちらをご覧ください。

    今後の方向

    同じような必要を持つ人たちに役立てばうれしいと思っています。
    また、クローズな環境だけでなく、公開環境で使えるルールも共有していきたいと考えています。

    おわりに

      Pick And Linkは「小さな不便を解決する」ために作られた拡張機能です。

      大きな問題を解決するものではありませんが、日々の小さな効率化を積み重ねていくことは大切です。

      同じような必要を持つ人たちのお役にたてば、とてもうれしいです。

    1. 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という拡張に上記の対応を組み込んでおきました。この拡張を入れておけば、以降は特にアクションする必要はありません。

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

    2. 見ているページのマークダウンリンクをプロンプトに出すブックマークレット

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

      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);})();

    3. ブックマークレットの配布って難しい

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

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

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

      理由としては以下

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

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

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

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

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

    4. 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」と書かれている
    5. 「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さまさまです。

    6. Catchpointによる表示速度検査を受けました

      遅くなって申し訳ありませんでした。Webパフォーマンス Advent Calendar 2019 – Qiitaの記事です

      AdventCarendarに参加するということで、Catchpointでの計測を行って頂きました。

      計測して頂くのはどのページにしようかと考えたんですが、弊社内で、アプリの紹介ページが重いという意見があり、せっかくの機会なのでそのページをということになりました。

      で、竹洞さんに連絡したら、「そのページまでの動線で計測したほうが良い」と言って頂き、動線の中で一番ボリュームが多い、ログイン→マイページ→アプリ紹介ページという動線で計測して頂きました。この導線で見るというのが、当初とは別の課題の発見につながったので、なるほど、流石だと感動しました。

      Catchpointのありがたいところ

      定時のチェックを行うのはPSIのスコアレベルなら行えますが（弊社は、定期的にPSIのAPIを利用してスコアを取得しています）この精度で見ることができないのでとてもありがたいです。

      下は、First Contentful Paintの統計。実際の回線（今回はDoCoMo）やエミュレートした回線（ノイズが少ない）でのデータが見れています。

      このようなウォーターフォールも15分ごとに見ることができます。

      制作時にDevToolsでも確認できることはありますが、このように定期的に取れるのはこういうサービスでこそということですね。

      竹洞さんにいろいろ指摘をいただく

      ありがたいことに、ご意見頂きました。ざっとまとめると。

      • DNS
        • Route53を利用することで出てくるレイテンシ
        • その場合のレイテンシは最低で約100ms以上
      • サーバー返答時間（TTFB）
        • 改善の必要あり
        • プログラムのチューニングが主になる
      • HTTP/2
        • 利用している
        • いわゆる「つまり」は確認できた
      • サードパーティー
        • Googleタグマネージャー
        • Karte
        • 改善の要求をすべき

      Catchpointでわかったこと

      冒頭に書いたようにページに到達する導線で計測してもらって気づけた課題があります。

      それは、ログイン→マイページの動線でのサーバー待機時間についてでした。

      1. ログインの判定
      2. リダイレクト
      3. マイページのサーバー待機

      という流れが1.5秒近くかかっていました。

      言われてみれば確かにという問題ではあるんですが、改善ポイントとしてピックアップすべき事象ですね。

      これからの改善ポイント

      • サーバー返答時間
        • 現状、ページにより1000ms近く、またはそれ以上になっているので改善ポイントを探して対応していく
      • サードパーティー
        • 改善の依頼を継続して行う
        • 使い方を確認していく
      • フロントエンド
        • 効率的なHTML/CSS/JavaScriptの記述
        • 画像などのコンテンツの読み込み順を考えていく
      • DNS/CDNなど
        • AWS以外の選択肢（Cloudflareなど）も「あと100ms」ぐらいになった段階で検討していく
        • CDNは静的ファイルだけでなく、コンテンツキャッシュでも利用しているので、そのあたりも含めた検討が必要
      • スピード監視
        • 本気で検討したい
        • 社内の議論に改めて上げていく

      最後に

      普段から竹洞さんの情報を見ている立場ですが、このような形でやりとりさせて頂きありがとうございました。これからも参考にさせていただいて、少しずつでもサービスの改善に努めていきます。

    7. Twitter Cardsのキャッシュ更新の方法を整理

      Twitter Cardsのキャッシュ更新の方法を整理

      ちょっとオミカレの仕事でやったのでメモとしてまとめておきます。

      Twitter Cards使うこと多いと思います。こんなやつですね。

      いわゆるLP的な単発の場合、手でソースを書いたりするんですが、ちょいちょい間違えたりするじゃないですか、人類って（主語でかい）。

      CDN使ってて間違えてそっち書いたりとか（Twitter Cardsに入れる画像はリンク先と同じドメインじゃないとダメというのを忘れがち）。あと純粋にURL間違えたりとか。

      そこでTwitter Cardsに関連したmetaを直して、さて更新となるんですが、TwitterでCardの情報がキャッシュされているので、まあ、反映されない。

      https://cards-dev.twitter.com/validator

      Card Validator通すとキャッシュクリアされるってよく言われていますが、まあ、されない。「それでしばらく待ちましょう」ってことなの？と思いつつも本家のドキュメント見ると書いてました。ちゃんと明記してました。

      https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/troubleshooting-cards#refreshing

      要は、bit.lyで対象のURLのショートURLを作成して、そのbit.lyで生成したURLをTweetすると、元URLのキャッシュも書き換えられるということなんですね。

      実際にサクッとTwitter Cardsの内容が更新されたので今後はこれでサクサク行けそうです。やはり頼るべきは公式のドキュメントですね！

    8. Facebookのリンクに付いてくるfbclidをカットするアドオン（Google Chrome / Firefox）

      Facebookのリンクに付いてくるfbclidをカットするアドオン（Google Chrome / Firefox）

      Facebookでシェアされているリンクにfbclid=*****がついてくるようになりましたが、何かと不便なので、カットするアドオン作りました。

      (さらに…)

    9. オミカレにおけるエンジニアと非エンジニアの接点としてのBacklog

      Backlog Advent Calendar 2018のエントリーです。少し遅くなりました。すいません。

      まずは「オミカレ」とは？ですが、婚活パーティや出会いイベントなどのポータルサービスを行っている会社の名前です。

      婚活パーティー、お見合いパーティーをまとめて検索 – オミカレ

      今回は、このオミカレ内でのBacklogの位置づけについて紹介します。

      (さらに…)