スポンサーリンク
ファンブログ専用スクリプト
絵文字の配布元エモジバさんから許可をいただいたので正式に公開します。
今朝の記事「ファンブログで他の絵文字を使える貼るだけのスクリプト」の改訂版です。
劇的に速くなりました。同じように1行貼り付けるだけで下の絵文字が使えます。
携帯未対応です。携帯で見ると絵文字の場所に{e:100}のようなコードが表示されます。
それでも構わない方のみご使用ください。
バージョン１は使用者がいないはずなので削除しました。
需要があるのかどうかを知りたいので、バージョン２を使う方はコメント欄に使う旨だけ書き残してください。
この記事を見てどうしてもわからない方は「スキンに1行追加するだけで絵文字が増える-コメント絵文字スクリプト2のカンタン設置方法-」を見てください。それでもわからなければ設置は無理です。あきらめましょう。
注意事項
スクリプトは私が作ったものなので、自由にお使いいただいて構いません。
ただし絵文字は下のサイトのものを使用しています。
著作権などの問題がありますので、絵文字の2次配布は出来ません。
なのでスクリプトは私のサーバーに置いてある絵文字にリンクしています。
このスクリプトの使用条件として、必ず下記サイトに登録してください。
ファンブログでしか動かないのでアダルトサイトなどで使われることはありえません。
登録は無料で、グーグルのgmailやYahooメールだけで登録できます。
いやらしい話なのですが、隠しておくのもズルいので書いておきますと、
下のバナーから入会されると私に１００円報酬が入ります。ご了承ください。
もし入会せずに使用して、著作権等法的な問題が発生しても当サイトは一切関知しません。
絵文字の配布元に確認しましたところ、以下のお返事をいただきました。
回答メールを転載してもよいということなので掲載します。
件名：（エモジバ）お問い合わせありがとうございます。
2012年08月21日 19:35
ご連絡ありがとうございます。
エモジバ運営局です。
いつもエモジバをご利用下さり、誠にありがとうございます。
さっそくご連絡いただいたブログツールに関してのお話になります。
弊社としましてはこのような場合、二次利用的な部分がありますので通常禁止し
ておりますが、今回に限り絵文字の利用の方を承諾したいと思います。
理由としましては、きちんとご連絡を下さったことと、独自にスクリプトを書い
ていただき、ファンブログにて弊社絵文字を使えるようにしていただこ とをう
れしく思うことの２点です。
アフィリエイトに関しても特に問題ございません。
ただ１点お願いがあるのですが、エモジバは投稿サイトになりますので、
著作権の侵害になる恐れのある絵文字が上がってしまうことがあります。
こちらに関しては、監視及び削除対応のほうを随時行っておりますが、そのよう
な絵文字を「エモジバの絵文字」として紹介されますと少し問題があり ますの
で、明らかに何かのキャラクターの絵文字であるといったものはサイトにアップ
ロードしないようにお願いできればと思います。
こちらの文章をサイト内に転載することも問題ございません。
--
エモジバ http://emjb.jp
エモジバさんに感謝しつつスクリプトを公開したいと思います。
設置方法
劇的に速くなった半面、設置方法は前回よりも複雑です。扱いやすさと速さはトレードオフ。
前回は扱いやすさを優先しましたが、今回は速さを優先しています。
まず、ファンブログの管理画面左の「スタイルの編集」をクリック。
画面が変わったら「フリースキンの編集」と言う項目から「1記事」を選択。
「フリースキンの編集」は画面左にあり、次の一覧になっています。
- スタイルシート
- メイン
- ポータル
- アーカイブ
- １記事
- プロフィール
今回編集するのは「1記事」だけです。他は変更の必要はありません。
「1記事」の画面になったら画面右のタイトルが「１記事テンプレートの編集」になります。
この右側の枠の中を編集します。
あとで困らないように、バックアップをとります。枠の中でCtrlキーとAキーを一緒に押して色が変わったら、今度はCtrlキーとCキーを一緒に押します。これで枠の中が全部コピーされたので、メモ帳を開いて作業終了まで貼り付けておいてください。もし失敗した時はメモ帳に貼り付けたバックアップで元に戻せます。
ソースコードを見ていくと真ん中くらいに次の表示箇所があると思います。
<div class="comments">
<h3 id="commentPosts">この記事へのコメント</h3>
<div class="text">
<BlogComments>
<div class="comment_layer"><a id="{$BlogCommentID$}"></a>{$BlogCommentBody$}</div>
<div class="posted2">{$BlogCommentAuthorLink type="Url"$}｜{$BlogCommentDate format="%Y年%m月%d日(%a) %H:%M" language="jp"$}</div>
</BlogComments>
</div><!-- text -->
</div><!-- comments -->
</div><!-- commentForm -->
この </div><!– comments –> と</div><!– commentForm –> の間に下のソースを張り付けます。
前回はfanblog_add_emoji.jsでしたが、今回はfanblog_add_emoji2.js
と2がつきます。2がつかない前回のバージョンを使うと速くなりませんので気をつけてください。
結果的に下の通りになればOK。保存して終了です。間違えずに設置できていれば絵文字が使えるようになっています。
</div><!-- comments --> <script type="text/javascript" src="http://api.dwm.me/fanblog/fanblog_add_emoji2.js"></script> </div><!-- commentForm -->
上の貼り付け場所がわからない場合
上の貼り付け場所が見付けられない場合は次のようにしてください。
１記事テンプレートの編集で一番最後から数行以内に
</body>
と書いてある行があるので、その直前に張り付けてください。
つまりこうなります。
<script type="text/javascript" src="http://api.dwm.me/fanblog/fanblog_add_emoji2.js"></script> </body>
これで動きます。最初の貼り付け場所より遅くなりますが、気づかない程度です。
スキンを編集するのが怖い場合
もし、どうしても自信が無い場合は、別記事「モジュールの設置方法」を見ながら追加するコードをサイドバーに貼り付けてください。それでも前回のバージョンより速くなります。
ただし、使っているスキンによってはサイドバーに貼り付けても動かない事があります。その場合はスキンを編集する以外にありません。その時は、「上の貼り付け場所がわからない場合」のやり方でやってください。
よくある質問
- 質問 設置方法がわかりません
- 答え あきらめてください
- 質問 私のブログで動きません
- 答え あきらめてください
追記
これをつけて新しい絵文字を使ってコメントしたものは、スクリプトを剥がすと{e:100}のような記号のまま残ってしまいます。（剥がさなければ問題ありません）
スクリプトの使用をやめる場合、すでに入力した部分だけ{e:100}のような記号でなく、絵文字を表示させるには上の1行の代わりに下の物を同じ場所に貼ってください。
これで絵文字の入力は出来なくなりますが、すでに入力済みの部分のみ、同じ絵文字が表示され続けます。
なぜ速くなったのか？
実は遅くなるのはわかっていて前回のバージョンを作りました。理由は以下の通りです。
設置方法を簡単にしないと初心者にはわからない。
そのため、headの終了タグという判別しやすい場所に設置する方法を選びました。
それでもheadタグすらわからない人にはまったく意味が無かったかもしれません。
headタグというのは表示されない情報が収められている部分です。事前にその情報を知った上でHTMlを読み込んでいきます。
しかしheadタグで読み込んだソースには、こんな命令が書いてありました。「コメント欄を見つけて命令どおりに処理しなさい」
命令されたスクリプトは即座にコメント欄を探します。
でも、headタグの中にはまだ、コメント欄は出てきていません。コメント欄はずっと後に出てきます。
だから、放っておけばスクリプトはコメント欄を見つけられずにエラーを出します。
そうならないためには、全部のHTMLを読み終わるまでスクリプトを開始させないようにします。
つまり、前回、バージョン１の命令はこうなっていました。「HTMLを全部読み終わるのを待ってから、コメント欄を見つけて命令どおりに処理しなさい」
全部のHTMLを読み終わるのを待ってから、{e100}などと書かれた場所を探し始め、それを画像表示に切り替えていきます。だから、待っている間おかしなタグが表示されたままでした。
今回はコメント欄が終わったすぐ後に、スクリプトタグを貼り付けました。だから2のソースからは、HTMLを全部読み終わるのを待ってからという処理命令を省いています。
今回はすぐにコメント欄を見つけて処理を行なうので変換が速くなったのでした。
詳しい説明はJavaScript(上級)カテゴリーの記事にあります。興味のある方は、下の参考記事を読んでください。
このスクリプトはどなたでもご自由にお使いいただいて構いませんが、使用の際は上記注意事項をお守りください。入会だけして動かなかったら悔しいので、動作確認をしてから入会してください。
また、使われる際は下のコメント欄に使う旨、書き残してください。
関連コンテンツ
スポンサーリンク
ちょっとテスト失礼します。
ファンブログの絵文字も今までどおりOK
でしょ？
うん。今までの併用できるのもいい。
問題はスクリプトを剥がすとソースが表示されてしまうこと。
これはファンブログではどうしようもない。
はがした時用に、書き込み処理を省いた変換だけのスクリプトも作るけどね。
ちょっとだけただいま
。
ファンブログのコメントは後から編集できないけど、書き込んだ後の英数字、
{Em:数字.gif}みたいなのって、はがすと残るよね？
これを消すスクリプトなんて、作れるの？
しかも、利用者がいる限り、絵文字を置いてるTomサーバを
安定させるちょっとした責任、みたいなのも生じるけど、いいの？
井戸端と同じサーバに置いてる？からいいのかな。
それもあるけど、版権のことを念のため公開元メールで照会中
なるほど。著作権は大事。
あとね、さっき携帯から見てたんだけど、ファンブログのオリジナル絵文字って
携帯に表示対応してるんだよね。
追加絵文字は、やっぱりソースが見えちゃう。
さくら＆Seesaaの絵文字は、携帯から見ると、やっぱりソースなんだけど
[EM1]とかだから、あんまり気にならないんだよね。
井戸端のWordPress絵文字は、PNGじゃなければ見えるのにね。
スマホだとどうなんだろう。
こんにちは～。
私は普段絵文字を使わないんですけど、
こう見比べると、今までの絵文字は地味でしたね～。
下のほうのコメント、女子高生のやりとりみたい・・・。
正式公開おめでとう！しんちゃんはいいの？
素敵なメールをいただいたね。筋は通すものだねぇ。
なんかね～、ちょっと恥ずかしいんだよ、絵文字使うの・・・。
白黒のカタカナ文字しか出ない時代から、携帯使ってるからかな・・・？
少し前に気づいたんだけど、絵文字のソース短く変えたんだね。
携帯で見て、絵文字じゃなくて記号が見えてても
すっきりしてていいね
TKB14にてテスト中
画像認証も外しておいたから、好きにしていいよ。
はずすときのスクリプトも後で試すから、
入力に満足したらお知らせくださいな。
これ、すごく一行貼るだけで設置簡単なのに
記事が長いから、難しく見えるね
ありがとう。テスト終了しました。
外すスクリプトに書き替えました
外すスクリプトも外しましたー
どうもありがとう。ちゃんと動いてた。
どういたしまして
Tomさん！ありがとうございます～！！ばんざーい
動きました
おめでとうございます
。。。すみません 興奮して。。
Tomさん作成の可愛い絵文字。変更した方は 以下で簡単に変更できます
あくまでも Tomさんの好意。またファンブログの方のみ使用可能です。
なぜ？詳細については 上に書かれたTomさんの記事を 必ずよくお読みください！！
『１記事テンプレートの編集で一番最後から数行以内に
</body>
と書いてある行があるので、その直前に
<script type=”text/javascript” src=”http://api.dwm.me/fanblog/fanblog_add_emoji2.js”></script>
と張り付けてください。
つまりこうします。
<script type=”text/javascript” src=”http://api.dwm.me/fanblog/fanblog_add_emoji2.js”></script>
</body>
これで動きます。』 ☆★Tomさんありがとうございました
こんにちは
昨日はほんとうにありがとうございました。
大満足です。前日、悩みまくったあの時間はなんだったのか
拍子抜けするくらい 簡単であっという間でした。
でもここでいいとわかっても ドキドキがすごかったです。
たぶん ほかの方も。。。 これからもよろしくお願いいたします
初心者向け設置方法を別の記事にまとめました。
スキンに1行追加するだけで絵文字が増える-コメント絵文字スクリプト2のカンタン設定方法-
こんばんわ。
。
蓮見さんで見てコメントに使ってみました。
面白いですね
設置したいと思います。
サイトへ登録に行って来ます
使わせていただきました。
スクリプトの公開、ありがとうございます
まだ慣れていませんが、これからは絵文字を使うことにします
ちょっと使い方が変？
使っていただいてありがとうございます。
ただ、無理してたくさん使うことはないかと
使ってもらってうれしいです。ありがとうございます。