« ^ »
[WIP]

NoteのようなSNS共有機能UIを用いてブログの間違いを指摘できるようにする

所要時間: 約 4分

Noteというブログサービスには素晴らしいSNS共有機能がある。文章をマウスで選択すると、それについてのSNS共有ボタンが表示される。記事について言及する時、どこの部分について言及しているのか分かりやすくなる。はてなブログ、Zenn、dev.toなどのサービスにもSNS共有機能は実装されているが、僕はNoteのSNS共有機能が操作性の観点から、最も優れていると考えている。

https://res.cloudinary.com/symdon/image/upload/v1671185312/blog.symdon.info/1604761350/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2022-12-16_19.07.33_vpkuuc.png
NoteのSNS共有機能

常々このUIは真似したいと考えていたが、共有機能を設置するモチベーションを失ってしまっていたため、今までその機会を作ることはなかった。元々はこのブログにもHugoのテンプレートが提供している備え付けのSNS共有機能を設置していた。このブログをSNSの共有してくれること自体はもちろん嬉しい。ただ、それを用いてSNSに共有してもらうことは殆どなかった。

ブログをなぜ書いているのかということについて考える機会があった。1つの理由は、僕は顔も名前も知らない誰かの文章を読んで、参考になったり、元気付けられたりしたことがある。だから、僕もそういう文章が書ければ良いなと思って書いている気がする。また、2つ目の理由は自分用の備忘録的な役割も大きい。1つ目の理由の対象読者は実は未来の自分なのかもなぁとも思う。SNSで広まらなくても、誰も見なくても、きっと自分は関係なく好きなことを書くんだろうなと思った。そしてSNSから少し離れてみて、ブログを書く理由というのを考えた時に、SNSの共有ボタンは読み手としては不要な要素だなと感じた。だからSNS共有ボタンは削除した。

個人でこういった記事を書いていると、どうしても間違いは混入してしまう。力を入れて質の良い、間違いのない文章にしたいが、見直し、チェックの時間、コストを払える訳ではない。間違いはいろんな種類がある。誤字脱字から、扱っているバージョンが古くなって参考にならなくなったもの、私自身が勘違いをしていて嘘を書いてしまっていることもある。それらも含めて自分自身の至らぬ実力ではある。残念ながら僕はその程度の実力だ。

そういった間違いを指摘してくれる方がたまにいる。TwitterにURLを貼り間違いを指摘するという方法で、間違いを指摘してくれる。本人は指摘しているというより、間違いを晒すという感覚のほうが近いのかもしれないが、まあそれはどちらも同じ意味だし、間違いは晒されて修正された方が良い。自分では気が付かないことが多いから、こういった指摘は貴重だ。だからこういった指摘を頂けるのであれば、内容を確認し必要に応じて修正をしたいと思った。そういった間違いの箇所の指摘するインターフェースとして、あのNoteのSNS共有機能のようなUIを使いたいと思った。

今回、それを実装する時間を得た(得てないかもしれないけれど…)ので、それを実装した。使い方は、間違っている文章をマウスで選択する。すると間違い指摘用のUIが表示される。間違いの内容を記載し「Twitterで共有」ボタンを押すと、Twitterの共有URLのタブが開き、間違いの指摘をツイートすることができる。ツイートには私へのメンションが含まれているため、私は投稿されたことに気付くことができるという寸法だ。

https://res.cloudinary.com/symdon/image/upload/v1671182810/blog.symdon.info/1671172977/Untitled_rnm8ay.gif

JavaScriptで実装したため、JavaScriptが動作しない環境では使えないが、もし間違いを見付けて教えてあげてもいいかなと思ったら、ぜひ使っていただきたい。

不具合

どうやら古い端末などで上手く動作しないことがあるようだ。同じ端末、WebブラウザでNoteを確認してみたところ、そちらは適切に動作していた。どうやら、私が実装したものにはバグがあるようだ。修正する時間がなかなか取れないが、時間を見付けて改善していきたい。

UIの見た目

Noteのものはすっきりしていて良くできているが、私が実装したものビジュアルデザインはあまり良くない。ボタンもデフォルトの状態そのままのものを使用しているし、文字入力領域もそのままだ。説明文も常に表示されていてごちゃついている。また色見も良くない。これについても時間を見付けて改善していきたい。