Hiratake Web ロゴ

SNS のシェアボタンを設置しました

投稿した日
更新した日
書いたひと
icon
ひらたけ

Hiratake Web の各ページの下の方に、 SNS のシェアボタンを設置しました 🛠
一般的なシェアボタンにだいたい入っているであろう 「Twitter」「Facebook」 、それから最近移住するひとが増えている 「Mastodon」「Misskey」 のボタンを設置しています。

Mastodon や Misskey は分散型の SNS なので、 ひとによって利用しているインスタンスのドメインが異なります （ mstdn.jp とか misskey.io とか）。なので、それらのシェアボタンを押した場合には インスタンスのドメインを入力するテキストフィールドを表示する ことで対応しています。

技術的な話をすると、このシェアボタンは Vue.js のコンポーネントとして実装をしています。
最近たまに利用している Headless UI を参考に、 コンポーネント自体にはスタイルを当てず機能だけを提供する ようにしています。

実装するに当たって、Headless UI のコード を読むとか、Vue.js の Provide/Inject 機能について調べたりとかしてました。とりあえず動くものを作ることはできましたが、まだあんまりよくわかっていないです。もっと勉強しないとですね…。

いずれは、勉強も兼ねて誰でもコンポーネントを利用できるように npm のパッケージとして公開したいな、と考えています。 使うひとは自分以外いないとは思いますが… 。
自分のウェブサイトなどでもう少し使ってみて、改善できるところは改善してからいろいろやってみようかなという感じです。

もしよろしければ、試しに押してみて、 ついでに私のブログを SNS でシェアしていただけるとうれしいです！ ブログ継続のモチベーションに繋がりますので…🙏
あと、動かないなどの不具合があれば、ご連絡いただけますと助かります。