maepon.blog

  • 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. 岡山を中心に今年飲んだコーヒーを思い出してみる[大都会岡山 Advent Calendar 2024]

      岡山を中心に今年飲んだコーヒーを思い出してみる[大都会岡山 Advent Calendar 2024]

      大都会岡山 Advent Calendar 2024の6日目の記事です。前日はえいのうさんのDenimTech(デニムテック)というイベントで登壇してきた・僕の岡山スキポイントを列挙しますでした。

      私は去年あたりからコーヒーをよく淹れる&飲むようになり。今年は年中淹れて飲んでしていたので、その記録がてら行ってコーヒーを飲んだお店を書いていこうと思います。必然的に岡山が多くなるので、このアドベントカレンダーの趣旨にも合うでしょう。記憶ベースなので抜け漏れ上等、順不同です。

      [2024/12/7 ]1518珈琲を追記

      基本なんでもおいしい人なので「おすすめは?」と聞かれると「どこも良いですよー」って答えると思います。

      UCHIDA COFFEE

      https://www.instagram.com/uchida_coffee

      https://uchida.coffee.okayama.jp

      いわゆる浅煎り、シングルオリジンを楽しめるようになったのはここのエチオピア ベンチマジを飲んでからでした。これ以降コーヒーの酸味を「酸っぱい」って言わなくなりました。スイーツも評判で大繁盛されています。

      something like that

      https://www.instagram.com/somethinglikethat_coffee

      LIGHT UP COFFEEでロースターをされていた方が岡山に移住されて始められています。間借り営業の形でされていますが、近々お店ができるっぽい。

      こちらの豆の定期便を購入しています。

      YIRGA COFFEE ROASTER – 煎ルガ –

      https://www.instagram.com/yirgaandplough

      インスタのおすすめ投稿で出てきて行った。ここは底知れない感じなのでこれからもいろいろ飲んでみたい。ROK抽出大会準優勝ということでエスプレッソも飲みたいし、他にもいろいろあるし。

      アロマコーヒーロースタリー

      https://aroma-coffee.jp

      夏はここの深入りブレンドでアイスカフェオレを毎日のように淹れて飲んでました。豆買って一杯淹れてもらって飲みながら帰るのが良い。

      1518珈琲

      http://www.coffee1518.com

      ブレンドもシングルもホントに丸いあじわいで安心して飲めるコーヒーです。

      オネストコーヒー

      https://honest-coffee.com

      去年はほぼほぼココの豆を淹れて飲んでました。定番の安心感ある喫茶店です。

      [新宿]スワンプ

      https://www.instagram.com/swamp_shinjuku

      事務所が新宿なので、出社したときは開いてる限りは飲んでます。みるみる繁盛していってて外国の方がめっちゃ来てる。ガイドブックとかに載ってるんですかね。ここのルワンダがおいしくてあればほぼルワンダって感じです。

      せとうち児島ホテル イルベール

      https://www.instagram.com/ileverte_by_kulan

      鷲羽山ハイランドの近くにあるホテルの喫茶。「ブレンドで勝負!」って打ち出していて「硬派な」って思ったけど、昨今の流れ考えるとブレンドの打ち出しはアリなんじゃないかって思い始めた。

      Little岡山

      https://littleokayama.com

      https://www.instagram.com/littleokayama

      暮らしと珈琲さんが岡山駅のさんすてに出しているコーヒースタンド。駅に来たら飲んじゃう。

      [徳島]トーコーヒー

      https://www.instagram.com/tocoffeeto

      ここのルワンダもおいしかったなあ。

      コーヒーハウス岡山

      https://www.instagram.com/thecoffeehouse.okayama

      キノシタショウテンさんのお店。家からも近いので、買い物ついでにテイクアウトをのみのみできます。

      大手まんぢゅうカフェ

      https://www.instagram.com/ohtemanjyu_cafe

      基本まんじゅう屋さんですが、暮らしと珈琲さんがやっているのでコーヒーも。

      暮らしと珈琲

      https://www.instagram.com/tostino_coffee

      https://www.tostinocoffee.shop

      YouTubeでおなじみのお店。龍ノ口登るときに。行くと「あー、YouTubeでみてる景色だー」ってなります。

      Little on Little

      https://www.instagram.com/little_on_little

      玉野にあるロースターさん。イルベールのマスターに教えてもらいました。

      珈琲焙煎所豆Lab.

      https://www.instagram.com/mame.lab.coffee

      ここのコーヒー、もっと飲んでみたいんだよなあ。いろいろ幅がありそうで。

      [徳島]SUMIYOSHI 4丁目 COFFEE STAND

      https://www.instagram.com/4c_coffeestandman

      ここのフルーツたくさんのトーストすごかった。

      [東京]SAZA Coffee KITTE

      https://marunouchi.jp-kitte.jp/shop/index.jsp?bf=1&fmt=6&shopid=1020

      「ゲイシャでコーヒーゼリー」というパワーワードを聞いた場所。まあ、ここなら言ってもいいわな。

      [大阪]SOT COFFEE ROASTER

      https://www.instagram.com/sotcoffee.jp

      コロンビア飲んだんですが「コロンビアってくくれないな!」ってなりました。

      [新宿]BLUE BOTTLE COFFEE

      https://store.bluebottlecoffee.jp/pages/shinjuku

      今年初めて行けました。

      スタバ

      そこら中のスタバ行ってる。アプリのスタンプ欲しいので持って無い都道府県行くとまずスタバ探す感じになってる。


      と言うわけで今年行ったコーヒー屋さんリストでした。

      通販で豆を買ったところとかも含めるともうちょっと増えるんですが、もうすでにわちゃわちゃなので行ったお店リストにしておきます。

      最後に家で淹れるコーヒーは最近、カリタのウェーブドリッパーまたはマキネッタです。マキネッタでスタバのクリスマスエスプレッソブレンドを入れて温めた牛乳で割るとうまいです。この冬のおすすめです!

      以上、コーヒーのお話でした!

    2. このブログで使ってるCloudflare CDNについてOkayama WordPress Meetupでお話しします

      このブログで使ってるCloudflare CDNについてOkayama WordPress Meetupでお話しします

      2024年11月09日に私がオーガナイザーを務めているOkayama WordPress Meetupで「Okayama WordPress Meetup #11 | クラウドの力で加速!WordPressとCloudflare CDN連携ワークショップ」というイベントをやります。

      そこで「個人サイトにCloudflareを導入してみた」というセッションをやります。

      タイトルに書いている「個人サイト」ってここです。このブログ、maepon.blogです。ここでCloudflare CDNを利用しているんですね。CDNの料金は払わずに。

      私の場合は、所有しているドメインのレジストラをGoogle DomainsからCloudflare Registrarに変更して管理画面見てみたらCDN使える!となって使い始めました。てっきりCloudflare Registrarを利用したおまけでCDNを使えるんだとばかり思っていたらCDNの無料プランがあることを後から知りました。レジストラ関係なかった。とはいえ、Cloudflare Registrarだと設定はメチャクチャ簡単でした(なはず)。

      なので、このブログの静的ファイル(css/js/画像など)はCloudflare CDNで提供されていて、TTFBは2桁ミリ秒だし1ファイルあたりの転送自体もネットワーク環境に左右されるとはいえ2桁ミリ秒で終了は普通にある感じです。

      実際の導入方法は予定されているワークショップで学べると思うので、だいたいの使用感なんかをお話できればと考えています。まだまだ参加募集中なので、ぜひぜひー。

    3. オープンセミナー2024@岡山の実行委員長、任務完了の辞 #oso2024

      オープンセミナー2024@岡山の実行委員長、任務完了の辞 #oso2024

      2024年10月19日(土)に実行委員長を拝命したオープンセミナー2024@岡山が無事に終了しました。
      「のびしろ」というテーマで6名の講師とスポンサーさんにお話してもらいました。

      その日の模様は下記を見てなんとなく雰囲気を感じてみてください。

      オープンセミナー2024@岡山まとめ #OSO2024

      実行委員長としてのオープンセミナー2024@岡山

      去年の年末の忘年会議の会場で実行委員長の打診
      があり、その場で快諾しました。実行委員長の仕事は「方針を決めて、その方針に関わる判断・決定を行う」という感じでした。まさに「神輿に乗る」というやつでした。

      となると「方針」をどれだけしっかり立てられるかが実行委員長に求められます。自分の考えや気持ちという個人の発露、今現在の状況やその中で共感されると考えた課題感、イベントとして成立するロジックと大義名分、それらを組み合わせて考えまくりました。

      結果、出てきたものは
      「参加した若い人のモチベーションが上がるようなオープンセミナー2024@岡山にしたい」
      という方針でした。

      もう少し解像度を上げると、以下になります。

      • 「若い人」の定義は?→新卒で岡山でIT系の業界で働き始めて数年ぐらいの人(実際に岡山で無くてもいいし、中堅やベテランを排除するということではない)。
      • 「モチベーションが上がる」をどうやって実現するか?→年代の近い人や、少し上の人の働き方・考え方を知ることで、現実味のある指針をイメージしてもらう。
      • 「年代の近い人や、少し上の人」の「少し上」は?→「若い人」は上記の想定から20代中盤から後半になるので社会人「先輩」として現実味のある範囲。だいたい5年、離れても10年は行かないぐらい。

      上記からイベントの骨子を
      「登壇者は35歳以下で、同年代もしくは少し下の世代に向けて話してもらう」
      としました。

      「のびしろ」

      オープンセミナー2024@岡山のテーマは「のびしろ」でした、別案もいくつか出てはいましたが「のびしろ」が降りてきてからは「これで」という感じでした。

      テーマが決まったらあとは進むのみという感じで、講師の方に依頼して皆さんに快諾いただきました。

      ちなみに、講師の方々への登壇依頼の文面です。

      オープンセミナー2024@岡山実行委員長の前川です。

      [中略]

      私たちは○○さんにも登壇していただきたいと考えています。

      あなたのキャリアにおける成長、成功、そして挑戦に関する物語は、参加者の「のびしろ」を刺激する貴重な例となります。たとえば、以下の点に焦点を当ててお話しいただければ幸いですが、これに限定されず、あなたの「のびしろ」に関する見識を自由に共有してください

      • 具体的な課題への取り組みとその過程で見つかった自身の新たな可能性
      • 自己の「のびしろ」を発見したきっかけと伸ばし方
      • 業界内での成長を遂げるために活かした個人の潜在能力
      • 今現在「のびしろ」を感じている技術や分野など

      さらに、あなたの情熱や創造性、そして未来への展望を通じて、参加者に自らのキャリアや人生における未開拓の可能性を探求するインスピレーションを提供してください。あなたの話が、参加者にとって自己実現への具体的な行動を促す契機となることを期待しています。

      登壇者として、あなたが共有する知見と経験は、業界の未来を切り拓く若い世代にとっての貴重なガイダンスとなります。このオープンセミナーで、彼らにとってのロールモデルとして、そして自らの「のびしろ」を最大限に引き出すきっかけを提供することを願っています。一緒に、お互いに学び、成長し合う場を作り上げていきましょう。

      講師の方々は、

      • 会社の規模
      • 居住地
      • 仕事上のロール
      • 働くスタイル

      などさまざまで、「幅」という部分では足りてない部分もありました(反省点)が、聞く人にさまざまなパターンを提示できました。

      セッションの内容も、お願いの文章を真正面から打ち返してくれる方もいれば、「あなたの「のびしろ」に関する見識を自由に共有してください」で違う視点を提供して頂いた方もいて、バラエティ豊かになりました。

      イベント当日

      イベントが始まってしまえば、実行委員長のやることは挨拶とお礼ぐらいのものです。登壇者・参加者・スタッフの皆さんが作り上げる場にただただ感謝でした。

      印象に残っているのは、各セッションの後の質疑応答が活発であったこと、そして質問されていたのが登壇者の方々と同世代もしくはそれよりも若い方であったことでした。その光景にオープンセミナー@岡山の「のびしろ」を見たような気がします。

      最後に

      今回、オープンセミナー2024@岡山の実行委員長として、今回のイベントにあらゆる形で関わって頂いたみなさん、本当にありがとうございました。

    4. ファーストペンギン

      ファーストペンギン

      人間の世界だと「ファーストペンギン」って大きなリターンがあるという前提が行間に入ってるように感じる。私の思い込みかもしれないけど。

      実際の鳥のペンギンのファーストペンギンは実際の狩り場は離れているし、ペンギンの狩りのスタイルから考えると、一番最初に狩り場に着いたからとといっても、5番目10番目に比べてアドバンテージがあるように思えない。リターンはさほど大きくも無いのに「喰われる」リスクだけやたらデカいという感じじゃないかな。

      とか思った。

    5. 第55回 岡山ウェブクリエイターズでお話ししてきました #okaweb

      第55回 岡山ウェブクリエイターズでお話ししてきました #okaweb

      55回ってすごいな。

      お声がけいただいて第55回 岡山WEBクリエイターズ「差をつけるWebコンテンツの作り方」 | 岡山WEBクリエイターズ -okaweb-でお話ししてきました。

      テーマはこのエントリーでも触れたデフォルトテーマ(Twenty Twenty-Four)についてでした。ただ、一生懸命Twenty Twenty-Fourのデモしたり、できること紹介しても「ふーん」で終わってしまいそうだったので、受託制作でのウェブサイト制作を取り巻く状況や、ここ最近のsaasで提供されているウェブ・パブリッシング・システムの状況など踏まえて「WordPress案件のミニマムラインを考え直してみませんか?」という文脈でのデフォルトテーマ(Twenty Twenty-Four)紹介を行いました。

      とかくどスルーされがちなデフォルトテーマに対する考え方をちょっとでもアンラーンできたとすればいいけどなあ。そればかりは今後参加された方々がどういう選択を今後されるかが見えてくるとわかりますかね。

      そういえば久々に鍋坂さんに会いました。写真も撮ってもらってうれしかったです。

    6. 「Okayama WordPress Meetup #10 | WordPressフルサイト編集入門:デフォルトテーマで始めるサイト作り」をやります

      「Okayama WordPress Meetup #10 | WordPressフルサイト編集入門:デフォルトテーマで始めるサイト作り」をやります

      2024/07/27(土) に倉敷物語館 多目的ホール で行います。

      Okayama WordPress Meetup #10 | WordPressフルサイト編集入門:デフォルトテーマで始めるサイト作り, 2024年7月27日(土) 13:30 | Meetup

      「デフォルトテーマで始めるサイト作り」とあります。文字通りデフォルトテーマ「Twenty Twenty-Four」でサイトを作ろうという話です。

      これ、前回の岡山のMeetup中私がにこんなポストしていたりしていて、岡山のMeetupではちょっと関心があったトピックでした。

      そんな中でWordPressの新しい標準レッスン フルサイト編集+ブロックエディター活用講座〈動画解説付き〉 | 池田 嶺, 大串 肇, 清野 奨 |本 | 通販 | Amazonという本が出ることを知り、さらに執筆陣にめがねさんがいる!となりましてお願いする流れになりました。

      なぜTwenty Twenty-Fourなのか?

      単刀直入に言うと「みんなデフォルトテーマを眼中に入れていなさすぎでは?」という懸念というか、違和感です。

      私はClassiに所属するようになりWordPressで仕事をしていません。実質稼働しているのはいくつかのコミュニティサイトとこのブログでWordPressを利用しています。

      で、テーマはここ数年最新のデフォルトテーマを使い続けるというやり方をしています。悩まなくて良いですし、一通りの機能は揃っています。

      さらにTwenty Twenty-Fourについてはドキュメントをみてみると、パターンやカスタマイズの余地も多く、さらにフルサイト編集にも対応という充実ぶりです。全てのユースケースで使えるとは流石に思いませんが、最初から選択肢に入れないのはちょっと合理性欠いてないですか?とWordPressでの制作を仕事にしている人たちを見て思ったりしています(部外者感出し過ぎかも)。

      上記の書籍やAmazon.co.jp: WordPress 6.5.x 対応 Twenty Twenty-Fourでウェブサイトを作ろう eBook : 久野 晃司: Kindleストアという書籍が出たりとあながち見当外れでもないような気がします。

      というわけで、実際にちょっとしたサイトを自分で作ってみたい人はもちろんのこと、あえてWordPressでの制作を仕事にしている人たちも一度デフォルトテーマに向き合ってみるきっかけとして一度めがねさんの話を聞いたりハンズオンして見るのはいかがでしょうか?

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

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

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

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

      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);})();
    9. ブックマークレットの配布って難しい

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

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

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

      理由としては以下

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

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

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

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

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