noteにスタンプ機能が欲しいから勝手に実装してみた💮

noteにこんな機能が欲しい第3弾✌

前回はnoteだからできる機能ということで、みんなのフォトギャラリーカメラを実装しましたが、今回は他のSNSにあってnoteにも絶対にあった方がいい機能を実装してみた😋

スタンプ機能

コメントにスタンプ機能が欲しい🥺

文章でコメントを入力するとどうしても書くのに躊躇する時とかあるけど、スタンプだと気楽にできるし、ユーザーのコミュニケーションが盛んになると思うんですよねー

こんな機能が欲しいと言うだけは簡単なので、今回も実装してみたよ😋
前回作ったオレオレnoteアプリに機能追加した感じです(自分用アプリなので公開しているわけではないです🙇)

noteのコメントは画像が埋め込めないから、絵文字を入力する感じで実装しました。

アプリ側の修正は簡単なので、コメントに画像を埋め込めるようにすればすぐに対応できそうですね。

noteには絶対にあった方がいい機能だと思っているので、noteエンジニアのみなさん頑張ってー

あと、noteクリエイターが作ったスタンプとか使いたいので、みんなのスタンプギャラリーも欲しいです😈

チャット風レイアウト

エッセイや小説などは文章が羅列しているのもいいけど、今の時代はチャット型のエッセイや小説があってもいいと思う💬

表現の幅も広がるし、硬くなく読みやすい記事になると思うので。

チャット風レイアウトは、引用の仕様を流用すれば簡単に追加できると思うので、今回はブラウザ版の引用をコメント風にしてみた。

ブラウザ版のデザイン変更は、ユーザースタイルシートと言って勝手にCSSを変更できる手法があるのでそれを使って変更しました。

デザインにこだわるなら吹き出しは画像背景にした方がいいと思うけど、今回はCSSのみで実装。吹き出しの向きは奇数と偶数で切り替わるようにしています。

CodePenにコードは載せておくので、気になる人はこちらで確認してみてね。(CSSを書いたことがない人がみてもよくわからないと思います。)

最後まで読んでくれてありがとうございます。よかったら「スキ」も押してくれると嬉しいです🐾