【Safari Web Extensions】 MarkdownやHTML形式でURLリンクをコピーするSafari機能拡張作りました

ruwatana

Safari機能拡張をリリースしました

@ruwatana です。エンジニアしてます。
本記事がnote初投稿となります。よろしくお願いします🙇‍♂️

Safariで表示中のページのURLリンクを、右クリックにてMarkdownやHTMLなど様々な形式でクリップボードにコピーできる機能拡張「Copy Link to Pasteboard」を開発し、Mac App Storeにリリースしました。

開発に至った経緯などを覚えているうちに書き残しておこうかと思い、筆を走らせております。

無料ですので、ぜひ下記よりインストールしてお試しいただければと思います🙏

SafariをMacのデフォルトブラウザーとして使う

iPhoneではどのブラウザーアプリを利用していますでしょうか。
ほとんどの方がプリインの純正AppのSafariを使っているのではないでしょうか。

では、Macではどうでしょうか・・・？🤔

こちらは結構別れるのかなと思っており、Chromeなどサードパーティ製のアプリを使っている方もかなり多いのではないでしょうか。
Chromeには拡張機能が豊富という大きなメリットがありますからね。

しかし、iPhoneでSafariを利用している場合、モバイル連携（ブックマークや履歴、表示中のタブの情報などの連携）という点で大きくSafariに軍配が上がります。

Chromeで最も重宝していたリンクコピー拡張

自分が非常に便利だなと思った拡張は、URLリンクのコピー系の拡張でした。

普段、GitHubやSlackなどを利用することが多いのですが、長ったらしいURLを共有したい時にリンクをそのまま貼ると、テキスト領域を圧迫してしまったり、どのようなページかわからなかったりして無駄に開いたりしまうといったことがありました。

自分でリンクの説明用にタイトルをソースから取ってきたり、Markdownを組み立てたり、ハイパーリンクの設定を追加したりするのは非常にめんどくさいわけです。

そんな時、ChromeストアにURLリンクのコピー系の拡張があることを知りました。
いざ導入してみると、右クリックで簡単にMarkdownやHTMLなどの様々な形式をシチュエーションに応じて指定でき、ペーストするだけでタイトルとURLからなるリンクが生成・コピペされ、ドキュメントや投稿文生成の効率を大きく向上することができました。

この拡張がないと作業にストレスすら感じるようになるほどでした（笑）

そのため、PC (Mac) ではChromeをメインに使っていました。
ただ、やはりiPhoneとのブラウジングデータ連携による恩恵を受けたい！Safariをデフォルト利用したい！と日に日に思うようになっておりました。

Safariにも機能拡張はあるけど・・・

じゃあ、Safariの同じような拡張を入れたらいいだけじゃんと。

しかし、Safariにはこうした複数形式指定が可能なリンクコピー系の拡張はなんと存在しなかったのです（Markdownのみサポートしている拡張は存在した）。

Chromeには何個もあるというのに・・・

なければ作ってしまおう

これができるのがエンジニアの特権ですね😎
発案から約1週間でApp Store申請・リリースを行うことができました！
（平日はもちろん働いているため、実際の着手時間は10~20時間ぐらいです）

幸い、iOS界隈や簡単なJavaScriptの開発スキルを保有していたため、Safariの機能拡張を作るためのAppleの情報収集の仕方や実際の実装には特に困りませんでした。
ですが、Safari機能拡張の開発はもちろん初めてでしたし、Safari 14から利用可能になった新しいSafari Web Extensionsを使って実装したため、機会があれば別で記事にしてみようかと思います。

ちょこっとだけTechなお話ですが、今まではSafari App ExtensionsというSafari独自の拡張のためのAPIのみ提供されていましたが、Safari Web Extensionsの出現によってChromeやFirefoxの機能拡張に互換性のあるWebExtensions APIをそのままSafariにも利用できるようになりました。

SafariでもMarkdownやHTML形式でコピーができるように

この拡張をリリースしたことで、下記のように右クリックで様々な形式（現在は6種のリンク形式に対応）を指定してリンクをコピーすることができるようになりました。

画像1

GitHubにペーストするならMarkdown、Slackなどハイパーリンクの貼り付けに対応しているならRTF形式のHyperLink（またはHTML）、タイトルとURLの両方を表示したい場合はTitle and URLといったように様々なシチュエーションに対応できます。

単純ですが、本当に便利です！
（Chrome拡張を最初に作った開発者の方のアイデアに感謝ですね）

さいごに

こうして、Macでも晴れてSafariをデフォルトアプリに設定しモバイル連携の機能を享受することができるようになりました！

もし不具合やこんな機能が欲しいといった要望がありましたら、Twitterまでご連絡いただけますと幸いです🙇‍♂️（ぜひフォローもお願いします）
https://twitter.com/ruwatana


この記事が気に入ったらサポートをしてみませんか？