« Panasonic「LUMIX DMC-TZ3」買いました!(その3:マクロ撮影にチャレンジ) | トップページ | Nintendo DS「えいご漬け」でようやくSランク取得 »

2007年5月18日 (金)

JavaScriptでHTMLを出力するときの小技(ヘッダメニューの続き)

HTML Source image

以前の記事で、ココログのヘッダ部分にメニューを設置した話を書きました。メニュー作成のHTMLを全部JavaScriptで記述し、外部ファイルに追い出してしまうことで、内容が変わっても「ブログへの反映」が必要なくなるというアイディアです。
ただ、このやりかただとJavaScriptが「document.write()」の嵐になってしまいますので、多少エレガントな方法を考えてみました。
# タイトル画像は特に記事に関係あるわけじゃないです(^-^;)。

基礎知識
JavaScriptファイルの中で行末に「\」を書くと、そのあとの改行が抑制され、「次の行もつながってるんだよ」という意味になります。
前回の例ではHTMLを1行書くたびに「document.write()」を使ってましたが、「\」を使うともう少し簡単に書けるみたいです。

具体例
今までの例と改善後の例を見てみます。

(1)今までの例

document.write('<hr>');
document.write('<a href="xxxx.html"><br>');
document.write('<img alt="test" src="xxxx.jpg">');
document.write('<hr>');

(2)改善例

document.write(' \
<hr> \
<a href="xxxx.html"><br> \
<img alt="test" src="xxxx.jpg"> \
<hr> \
');

必ず行末に「\」をつけなきゃならないですが、それでもこっちのほうが幾分スマートですよね。
ご参考になれば。

まとめ
本当はJavaScriptにもPerlなどのような「ヒアドキュメント」があればよいのですが、現状は実装されていませんので、上記のようなやりかたになるのかな~という感じ。
中にはJavaScriptの関数で擬似的にヒアドキュメントを実装しちゃったような方もいますが、今回の話はそこまでやるほどのことじゃないですしね。
もっと大量のHTMLをJavaScript上から吐き出す必要がでてきたら、擬似ヒアドキュメントライブラリも使ってみたいと思います。

関連サイト
JavaScript用ヒアドキュメントライブラリを試作 (風柳亭 - 別館:書庫のある庵様)
出力するHTMLが増えたらこれですね。
ブログパーツなど、結構な量のHTMLを吐き出す必要があるときに使えそう。

2007夏モデルFMV新登場

|

« Panasonic「LUMIX DMC-TZ3」買いました!(その3:マクロ撮影にチャレンジ) | トップページ | Nintendo DS「えいご漬け」でようやくSランク取得 »

プログラム(Perl・HTML・JavaScript)」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/153129/15113760

この記事へのトラックバック一覧です: JavaScriptでHTMLを出力するときの小技(ヘッダメニューの続き):

» HTMLはアフィリエイトの必修項目 [HTMLはアフィリエイトの必修項目]
HTMLとは、「Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)」の略で、ウェブページを作成するためのマークアップ言語です。 [続きを読む]

受信: 2007年6月23日 (土) 20:39

» ロボット [HPを作ろう]
こんにちは。ガジェットWatch、興味深く読ませていただきました。勉強になりました。また読ませていただきたいと思います。javascript、殆どのサイトが使っていますけどまだ「危険だからオフに」としたほうがいいんでしょうか。... [続きを読む]

受信: 2007年12月26日 (水) 13:12

» BIGLOBEページにウィジットを追加 [Nakamura's Weblog]
BIGLOBEのページのサイドバーにウィジットを追加しました。Adsenseと同... [続きを読む]

受信: 2009年1月21日 (水) 23:27

» jQuery流プログラミング入門(1) [ラボブログ]
スパイスラボ神部です。 opensocial-jquery の勉強のために、いろいろと jQuery の表現を勉強していますが、やっと何となく慣れてきました。O... [続きを読む]

受信: 2009年5月 5日 (火) 17:34

« Panasonic「LUMIX DMC-TZ3」買いました!(その3:マクロ撮影にチャレンジ) | トップページ | Nintendo DS「えいご漬け」でようやくSランク取得 »