straw_manテンプレートコメントアバター設定解説記事

2023/03/10 21:57

straw_manテンプレートにおけるコメントアバター機能周りの設定を解説する記事です。

もくじ
・基本的な設定方法
　・推奨アバター数
　・推奨アバター画像サイズ
　・後からアバター名を変更した際の動作について
　・オプション引数一覧
・おまけ1: どういう仕組みでコメントアバターを実現させているか
・おまけ2: fc2_comment_avatar.jsのgithubレポジトリ

※元記事のキャッシュ
インターネットアーカイブ
googleキャッシュ

当記事の権利と経緯について

当記事の文章とコードはリラ様の著作物です

リラ様のサイト『まださなぎ』では、StrawMan Templateとlaymicの実践的な解説を公開していましたが、サイトが消えてしまいました。

このままでは、StrawMan Templateとlaymicの普及と利用に支障が出るためキャッシュよりサルベージし再構築したのが当記事になります。

共同開発者のリラさんに連絡がつかず無断で転載している状態ですが、これが許されるとすれば共同開発者の私以外いないと判断しこのような形での公開となりました（詳細な経緯はこちら）。

もくじに本来のサイトの姿を保存していたキャッシュサイトを併記してありますが、キャッシュの性質上完全な再現とはならずいつ消えてもおかしくないのでリンク切れの際はご容赦ください。

最後に、当サイト『ヤマノス』では、他者の引用がなされたもの以外のすべてをフリー素材として公開しています（当サイトの著作物について）。

ですが、当記事はリラ様の著作物ですのでフリー素材ではありません。
ご注意願います。

文責：秋田LV3

基本的な設定方法

初期状態ではデフォルトアバターが指定されており、それは以下のような記述であるはずです。



var avatarsList = {
  // テンプレート初期状態での利用アイコン権利表記
  // もし全てのアイコンを独自アバター画像に切り替えた場合は、この権利表記は削除しても問題ありません。
  //
  // Creative Tail - 40 Flat Animal Icons
  // https://www.creativetail.com/40-free-flat-animal-icons/
  "__default__": "https://blog-imgs-107.fc2.com/d/e/t/dettalant/icon_cat.png",
  "__admin__": "https://blog-imgs-107.fc2.com/d/e/t/dettalant/icon_fox.png",
  "__secret__": "https://blog-imgs-107.fc2.com/d/e/t/dettalant/icon_dove.png",
  "dog": "https://blog-imgs-107.fc2.com/d/e/t/dettalant/icon_dog.png",
  "sheep": "https://blog-imgs-107.fc2.com/d/e/t/dettalant/icon_sheep.png",
  "coala": "https://blog-imgs-107.fc2.com/d/e/t/dettalant/icon_coala.png",
  "mouse": "https://blog-imgs-107.fc2.com/d/e/t/dettalant/icon_mouse.png",
  "wolf": "https://blog-imgs-107.fc2.com/d/e/t/dettalant/icon_wolf.png",
  "tiger": "https://blog-imgs-107.fc2.com/d/e/t/dettalant/icon_tiger.png",
  "cow": "https://blog-imgs-107.fc2.com/d/e/t/dettalant/icon_cow.png",
};

アバター画像指定はこの部分で完結しているので、ここに指定されている画像urlを書き換えたり、新たに値を指定すれば良いわけになります。

他の動物アイコンを指定するイメージの記述例としてはこう。



var avatarsList = {
  "__default__": "default.png",
  "__admin__": "admin.png",
  "__secret__": "secret.png",
  "alligator": "alligator.png",
  "bat": "bat.png",
  "cobra": "cobra.png",
  "dinosaur": "dinosaur.png",
  "elephant": "elephant.png",
  "fox": "fox.png",
  "goat": "goat.png",
};

要するに"アバター名": "アバター画像url",といった行を増やしていけばいいわけですね。

javascriptにおけるobjectの記法を守る必要があるので、以下部分には注意が必要です。ご留意ください。

全て半角英数で入力すること
行の終わりに,が必要
""か''でアバター画像urlを囲う必要がある
まったく同じアバター名で複数登録すると後に登録したもので上書きされる

推奨アバター数

理論上はいくらでもアバターを増やせますが、あんまり多くあっても使いにくいと思われますので、

4の倍数の個数で
20個以下

この数を推奨アバター数とさせてください。

4の倍数であるのは、straw_man側アバター選択ウィンドウで綺麗に表示される数がこれであるからです。

推奨アバター画像サイズ

straw_man初期状態ではアバター画像が80x80以上の大きさで表示されることはありません。

なので、これ以上の大きさを指定する意味はほぼないです。

また正方形以外画像サイズの場合は、おそらく残念な表示になることでしょう。

というわけで、推奨アバター画像サイズは80x80です。

後からアバター名を変更した際の動作について

例えばdogというアバターが存在していて、そのアバターを使ったコメントが投稿された後にdogアバターを削除した場合。

この場合、過去に投稿されたコメント側のEmail欄内容が無効な値として扱われてデフォルトアバターが表示されるようになります。

なので、「すでに投稿されたコメントのアバターをデフォルトにしたくない」場合は、アバター画像urlのみを上書きすると良いでしょう。

ちなみにアバターを削除してしまった場合は、再度同じ名前のアバターを追加すればそのアバターが表示されるようになります。

オプション引数一覧

※クリックで拡大
こちらのCommentAvatarOptionsに画像の引用元がありますのでコピペを希望の方はどうぞ

※ lazysizesが導入されていない環境でisUseLazysizesをtrueにした場合は画像が表示されなくなるので注意

これ以外にもアバタークラス名などを変更できる引数も用意していますが、straw_manでは初期値のままで問題ないので解説は行いません。

おまけ1: どういう仕組みでコメントアバターを実現させているか

おまけとして、fc2_comment_avatar.jsの技術的な話を。

FC2ブログを使った経験がある人からするとご存知の内容だと思いますが、本来FC2ブログにコメントアバター機能はありません。

件名
投稿者名
Web URL
Emailアドレス
コメント編集用パスワード
非公開コメント用チェックボックス
本文

これらの入力欄しか用意されてないので、まともな方法では無理です。

なのでこのスクリプトでは、Email欄を乗っ取ることでアバターを保存する仕組みを取っています。

強引なやり方ではありますが、「スパム以外がEmail欄使用してるの見たことない」とLV3さんも言ってたので、Email欄くんには犠牲になってもらうことにしました。

そのため、straw_manでは初期状態からEmail欄を非表示（HTML上には存在しているが画面上には表示させていない）としています。

Email欄が乗っ取られてる様子のスクショ画像（※画像紛失）
（FC2コメント投稿確認画面から伺える、Email欄が乗っ取られてる様子）

このスクショ内Email欄に伺える[[sheep]]という文字列こそが、このスクリプトが挿入したコメントアバター指定コード。

１. Email欄内容を一旦HTML側に出力
２.出力内容を読み取った上でスクリプト側アバターコードと突き合わせる
３.一致していたならば当該アバターを表示

このような処理を結果、アバター画像が表示されているわけになります。

おまけ2: fc2_comment_avatar.jsのgithubレポジトリ

「straw_manテンプレートを使用する気はないが、コメントアバター機能は欲しい」人向けにスクリプト全体を以下リンク先で公開してます。

MITライセンスを採用しているので、ライセンス特有のあれそれを守った上でなら、煮るなり焼くなり自作テンプレートに組み込むなりお好きにどうぞ。

FC2ブログ用のスクリプトではありますが、乗っ取り先となる入力欄さえあればどんなサイトでもある程度利用可能なんじゃないかと予想してます。試してないので違ってたらごめんなさい。

あと、やっつけ作成のスパゲッティコードですまんな

関連記事

当記事の文章とコードはリラ様の著作物です