埋め込み型匿名フォーム&いいねボタンを実装したメモ

少し前にサイトトップの#CONTACT部分を色々いじりました。

プウライドテト
トヤマ96の趣味の絵やログのまとめHP

 

以前は『匿名用お題箱へのリンク+メールフォーム』という形にしていたんですが

外部リンクではなく埋め込みできる匿名フォームが使いたかったのでこんな感じに変更。
そしてコメントなしでもポチれる、いいね(のような何か)ボタンも設置しました。

do | 創作・同人サイト制作支援サイト
令和の創作・同人サイト制作に役立つ情報を発信。レスポンシブ対応HTMLテンプレート、PHPプログラム配布。

プログラムは同人サイト制作支援として様々なテンプレートやプログラムを配布してくださっているdo様から!ありがたすぎる!!マジでこういう方々に個人サイト文化が支えられていると思う

 

以下雑感やメモなど

 

このタイミングでの変更について

前々から埋め込みフォームにしたいな~とか、いいね系ボタンつけるかどうか~~っていうのはずっと考えたり悩んだりしてたんですが、やっと行動に移せました。そう、同人誌を出したからですね~!

俺屍プレイ記にしても同人誌にしても、それなりに頑張って完結させたものを出す時は積極的に感想欲しい姿勢を示すことにしているので、その玄関口整備するなら今しかないでしょ!!!!とね!

ちなみに本の奥付につけてるリンクは特定のツールURLではなくトップページ内の#CONTACTに繋げるようにしているので、このアンカーさえ維持していれば後からいくらでも整備できる形です。かしこい!

ちなみにCONTACT整備に乗り切ったのは本が届き始める直前でした。どうしてあんなに時間があったのにギリギリなんですかね…?

 

匿名用フォーム

こちらはお題箱の代替。doさんの配布プログラム『コイブミ』を利用しています。

個人サイト向けひとことフォーム コイブミ | do - 創作・同人サイト制作支援サイト
個人で作っているHTMLベタ打ちサイトにも、カンタンに導入できる一言フォーム。専用管理画面にログインし、メッセージを管理できます。メッセージのお気に入りや削除、NGワードなどの機能も。

こちらのデモページから管理画面なども閲覧できる

設置が簡単な上に、お礼文言設定・文字数上限変更・同一IPからの送信数制限変更・お気に入り・削除・NG・メール通知など必要な機能が一通り揃っているという。すごい~~ 管理画面のUIも見やすくて使いやすいです。

ちなみに以前お題箱で貰った分のメッセージもこっちでまとめて見返せるようにしたかったので手動で流し込みました笑 これでいつでも見れるねえ

 

これはプログラム側ではなく私のCSS側の問題なんですが、送信ボタンの文字がスマホ表示だとちょっとズレて表示されるのをどうにかしたいんだけど全然直せなくて放置してます。いつか、いつか直すから…

 

なんでもボタン

いいねや拍手ボタン設置している個人サイトさんけっこう多いのでつけるかどうか悩んでたんですが、満を持して意を決して実装しました。

個人サイト向けいいねボタン・改 配布ページ | do - 創作・同人サイト制作支援サイト

プログラムはdoさんの『いいねボタン改』です!こちらも色々機能揃ってる上にシンプルで最高!

 

どうしていいね拍手つけてなかったかっていうと、なんかこう反応ツールつけるとサイト内で何か発信する度に反応あるかどうか気にしちゃいそうだな……って思ってたからですね。個人サイトをやる時はもっとこう……自由で…独りで静かで豊かで…という思想があり……要はSNSと差別化したかったというか。

ただ、本の奥付にリンクつけたし、感想打たなくても気軽に読んだよできるボタンあった方が絶対良いよな~~~~!!って思ったのでつけることにしました。

 

20220114141726-admin.gif

そして生まれたのがこちらです。光ってますねえ なんですかこれは
私の考えた究極のいいねボタンです

どんな気持ちで押してもらっても良いやつ

私は古きツイッタラーなので『いいね』っていうのがあんまり好きじゃないんですよね。なんかこう、いいねって言葉もハートの記号もすごく限定的なニュアンスなのがあんまり好みじゃなくて……

※『いいねされるのが好きじゃない』という意味ではなく、機能として『いいね』という名称なのがあんまり好きじゃない、って意味です。いいねのあるSNSでいいねしてもらえるのは嬉しいです

『いいね』って『いいね』じゃないですか、『良いねそれ』って“相手に伝える”ニュアンスになるじゃないですか。例えばだけど何かトラブルに遭った人や不幸話や愚痴に対する反応も『いいね』になるの、なんか気持ち悪…気持ち悪くね!?
一番アレなのだと訃報につく大量のいいねって怖くない!?!?誰もその報にいいねなんて思ってないのに!?!?!?ってなったり……いいねって言葉な~~~~柔軟性に乏しいんだよな~~~~~~!!!

 

あとフォロイーがちょっと面白い語り口で不運話してたりするとマーキングしたくなるんだけど、「これは“いいね”して良いのか…?」って一瞬怯んじゃったり……。『トヤマさんがいいねしています』って表示されるんだぞ いや良くはねえだろって(?)
まあするんだけど でも私本当はふぁぼがしたいんだよ

かつてのTwitterにあった『ふぁぼ(いいねの前身)』って言葉がめっちゃ好きだったんですよ。なんか意味がふんわりしていて曖昧だから
語源はFavorite(お気に入り・一番好き・有力、本命)だけど、短い言葉にされることでこの辺のニュアンスもフワっとしてめっちゃ丁度良かったんだよなあ。アイコンも★型だったしね。

あと、どちらかというと『自分がお気に入りとしてマーキングしておきたい』というニュアンスも強かったように思います。『いいね』の場合は『相手に好意を伝える』というニュアンスがかなり強くなってくるイメージ。多分後者の方が今のSNS向きなんだろうなあとは思うけれども

 

…という、ニュアンスニュアンス煩いタイプのオタクなので……自分でこういうボタンを設置するならもうちょっと広いニュアンスで使えるものにしたいなあと。

拍手 / ふぁぼ / いいね / 見たよ / 読んだよ / おめでとう / おつかれ / ボタン見たらとりあえず押したくなったよ……など、適当なニュアンスで押してもらえると嬉しいボタンです。

その結果がこの無駄に長い説明文です。ダハハ 文章なげえな。でも本当に雑に押せる形にしたかったんですよ
サーチサイトから来て、ジャンルなんもわからんけどなんかボタンあったから押したったわ!とかでも

(戦闘破壊学園ダンゲロス4巻より)

ボタンは人間の本能レベルで揺さぶるらしいので(ソースはダンゲロス)

 

『良い旅を』はグノーシア開始設定画面から(グノーシア以外でも幅広く使われる言葉だけど)。これも意味合い広くて好きな言葉です。色々反復横跳びで二次創作してるタイプだから合ってる気がするし、なんか爽やかで良くないですか?

 

あと連打も死ぬほどできるように設定しました。1日100連打できるバカのボタンです。自分でそう設定してる以上大量に連打されても怖がったりしないので、その時の気分でやりたいようにやってください〜!

あっあと数字のカウントは自分にしか見えないようにしています。これもカスタマイズで設定できる

なんかこう、やっぱり個人サイトの強みってこういうものを自分向きに最適化できるところだなあと思いますね。SNSの場合は多くの人が使っている中で平均化された機能に合わせるしか無いわけですが、個人サイトならいくらでも『自分が一番良いと思う形』にできる。そしてそれができるプログラムを配布してくれている神がいる すごい!

 

実装時の不具合などメモ

マニュアル内にも記載されているんですが

利用環境によっては、data-iinenameの値を日本語名にすると、管理画面でいいねボタンのデータが閲覧できなくなる場合があります。いいねボタンは正常に動作するけど管理画面に反映されないという場合は、data-iinenameの値を半角英数字に設定しなおしてください。この問題は今後のアップデートでの修正を検討しています。

これが原因で最初動かなくて色々いじったりしましたね。修正検討中らしいのでそのうちアップデートされるかも?

 

doさんのいいねボタンには、違う名前を付けたボタンを別カウントできる機能があります。(私は一種しか使ってないけど)
ここの名前設定を日本語にするとデータが閲覧できなくなる不具合があるみたいで、私も最初これに引っ掛かってました。多分

ボタンの名前を半角英数に変更、管理画面で『このファイルがおかしいやで!!!』って英語の注意表記が出てたファイルをなんとかしたらどうにかなりました。解決がふわっとしすぎている(雰囲気でサイトメンテをやっているため…)

初期設定でプログラムを置いてあるファイルパスを指定するんだけど、ここを正しく指定しているのに延々パスが無いとポップアップが出たり…とかもあったんですがこれは別の不具合なのかな…?FAQ見る感じローカルで出るだけだから関係ないか

 

ゲーミングボタンにする時に参考したのはこの記事

CSSで色んなものを虹色に光らせる|中央コンピューターサービス株式会社(CCS)
技術開発推進部の加藤です。↓↘→+HKで必殺技3が出ます。(空中可)GAMINGHEISYAゲーミングキーボードって虹色に光るのが、マリオカートでスター使ったときみたいでカッコいいですよね。あなたもWeb上で何かを虹色に光らせたいときがあるはずです。今回はそんなときに便利な方法を紹介したいと思います。まずはこちらを御覧...

@keyframes使ったこと無かったから最初意味わかんなかったんだけどなんか適当にコピペしてたらいけた

あなたもWeb上で何かを虹色に光らせたいときがあるはずです。

あまりにもピンポイントに今私が一番必要としてる記事すぎて笑った

 


 

だいたいこんな感じかな?

メールつきフォームは外部ツールの埋め込みなんだけど、まあサイト内に埋め込み出来てるしバナーリンクも慎ましやかだし今はこれでいいかなー。

 

いろいろ屁理屈をこねちゃうタイプだから『いいねのニュアンスはさあ・・・・・・・』とかややこしいことをのたまってますが、あくまで私が勝手にそういう風に言葉を感じているってだけなので、なんかコイツ個人の思考なんだなあくらいに思って笑ってください(?)

早速こちらから良い旅をボタンやメッセージ送ってもらえてて嬉しいです!!とってもありがたい~~~!!!感謝!!