Movable Type 備忘録
ブログを上手に運用する４
- Next Page: AjaxによるCAPTCHA認証をやってみる
- Prev Page: タグ検索をAjaxで表示する
オラオラさんのところで、緊急のメッセージを短時間で挿入するという記事が紹介されてました。
必要最小限の変更でお知らせなどを表示する方法が紹介されてます。
わたしの場合にはブログをPHP化しているので、外部ファイル(info.php)を作成しておいて、各テンプレート内に以下のようなコードを埋め込んでおくことで、似たようなことを実現していました。
<?php include('<$MTBlogURL$>info.php'); ?>
青い字の部分を各自の環境に合わせて変更します。
外部ファイル(info.php)の中味は以下のようなかんじで、ヒアドキュメントを使って出力するようにしています。
<?php
print <<<MESSAGE
<div id="message-box"><p>
何か伝えたいメッセージをここに入力します。<br />
何行でもOKです。
</p></div>
MESSAGE;
?>
あとは、必要に応じて上記青い字の部分をコメント、または、CSSで<div id="message-box">タグを表示／非表示したり、デザインを変更したりなどやってました。
テンプレートの再構築など必要なく、サーバにアップロードするだけなのでお手軽だし、動的にメッセージ内容を替えることができます。
では、オラオラさんのところで紹介している方法はというと、JSを使用します。
上記のようなPHPによる方法だと、ブログをPHP化していることが必須となりますが、JSなのでそんな制約はありません。
その代わりJSが有効になっていることが必須となります。
また、テンプレート内にメッセージ内容が埋め込まれないところがいいかんじ、です
具体的には、スクリプト(info.js)を以下のようなかんじで作成しておきます。
var info = '何か伝えたいメッセージをここに入力します。<br />何行でもOKです。';
document.getElementById("message-box").innerHTML = info;
document.getElementById("message-box").style.display = "block";
そして、各テンプレート内にメッセージ表示したい場所に以下のXHTMLを埋め込んでおきます。
<div id="message-box" style="display:none;"></div>
もう1つ、スクリプト(info.js)を読み込むためのコードも追加しておきます。 これに限っては追加する場所が決められていて、必ず上記<div id="message-box">タグよりも下の方に追加する必要があります。 たとえば、</body>タグの終わりあたりに追加するなどです。
そうしないと、スクリプト(info.js)が読み込まれたときに<div id="message-box">タグが見つからないことで、エラーしてしまいます。
追加するコードは以下の通り。
<script type="text/javascript" src="<$MTBlogURL$>info.js"></script>
青い字の部分を各自の環境に合わせて変更します。
以上で、<div id="message-box">タグ上にメッセージ内容が表示されるようです。
あとは、必要に応じてスクリプト(info.js)内の以下の部分で表示／非表示を行って、サーバにアップロードするだけです。
お手軽ですね
表示しない場合
document.getElementById("message-box").style.display = "none";
表示する場合
document.getElementById("message-box").style.display = "block";
どちらの方法を使うかは人それぞれだと思いますが、必要時のみ表示したい場合にはどちらも有効な方法だと思います。
JSによる方法についてのもっと詳しいことは、こちらの緊急のメッセージを短時間で挿入するを参照してください。
では、SEE YOU
Trackback Pings(0)
No trackbacks found.
Comments(2)
- #2: Posted by bzbell [RES]
>>1 oscar さん
こんにちわ^^
レス遅れてすいません。
> スクリプトがメッセージの特定の文字でエラーにならないようにって事ですね。
あっ!! ごめんなさい!!
テスト的に作ったAjaxのコードをそのままコピペしてました。普通にテキスト表示するだけだからいりませんね(;￣∇￣A
ありがとうございます♪
なるほど、decodeURIがポイントですね。
デコードって事は、エンコードしたのを記述する訳か。
スクリプトがメッセージの特定の文字でエラーにならないようにって事ですね。