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

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

スポンサーリンク

基本的な設定方法

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

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のみを上書きすると良いでしょう。

 

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

オプション引数一覧

名前 意味合い 初期値
isUseLazysizes lazysizesに対応したlazyload処理を行うか否か false
isUseAdminAvatar 管理者が行ったコメントに管理者アバター画像を表示するか否か true
isUseSecretAvatar 非公開コメントに専用アバターを付与するか否か true
isUseCustomDefaultImg 独自のデフォルト画像(__default__として指定した値)を使用するか否か __default__が指定されていればtrue
isCommentAvatarOverwrite 投稿コメントアバター書き換え機能を有効にするか否か true
isAvatarSelect アバター選択ボタン生成機能を有効にするか否か true
isDebug デバッグモードとして各種警告をconsoleに出力するか否か false

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

これ以外にもアバタークラス名などを変更できる引数も用意していますが、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]]という文字列こそが、このスクリプトが挿入したコメントアバター指定コード。

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

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

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

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

dettalant/fc2_comment_avatar

 

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

 

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

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