JavaScript と SSI についての自分用メモ@さくらインターネット
うちのサイトの「About」というコーナーは、左カラムにナビゲーション、というよくあるブログ風構成だが、このナビゲーション(目次)が長い。その長い目次を、いちいち各ページに書いていた。そのせいで、新規ページを作る場合の更新が面倒くさい。そんなん複数ファイルの一括置換で一発やん、と思えるときも確かにあるけど、置換の、その、何、アルゴリズム(?)を考えるのも面倒くさい。正規表現のフォーマットを保存しとけばいいやん、とも思うが、正規表現というのは自分で書いても翌日見返すともうすでに、何をやってるのかわからない。だから結局そのつどゼロから考える羽目になる。じゃあナビゲーションは素直にフレーム使えばいいやん、とも思うが、なんとなく偏見でフレームは避けている。

で、本日よりSSI を導入した。いきさつを自分用に書いておく。

其之1:JavaScript 立志篇

ある日、こういうページを見かけた。ソースを覗いてこりゃびっくり。ソースの中に左カラムの記述がない。代わりにこういうファイルを読み込むことになっている。拡張子「.js」。なんだこれ。JavaScript? 後半の「MIIHTwYJKoZIhvcNAQcEoIIHQDCCBzwCAQExggEwMIIBLA」とかいう文字列は僕には意味不明だが、それ以外はいちおう理解できる、真似してやってみた結果が、これ。意外にあっさりできた。拡張子「.js」のファイルに
function writeMenu(){
document.write("◆◇※★");
}
と書き、htmlファイルのヘッダに
<script type="text/javascript" src="honyarara.js"></script>
と書き、◆◇※★を挿入したい箇所に
<script type="text/javascript">
writeMenu();
</script>
と書く。それだけ。ただし「◆◇※★」の中に改行があると動作しない。ダブルクォーテーション「"」が含まれていても動作しない。すべてシングルクォーテーション「'」に置換すれば大丈夫。より念入りにやるにはこう↓。
<script type="text/javascript">
<!--
writeMenu();
// -->
</script>
<noscript>
JavaScriptをオンにしてください。
</noscript>

其之2:SSI 彷徨篇

できたにはできたけど、JavaScriptというのはオフにしてる人も多い。いや多くはないのか。Yahoo! の調査によると1%だそうだ。しかしなんとなくJavaScriptというものは嫌われてる気配があって、ナビゲーションのような重要なパートを任せるのは気が進まない。無意味な偏見なのかも知れないが。それに改行ナシの状態ではとてもじゃないが理解できないので、改行アリのバージョンも更新用にとっておく必要がある。そして更新したら、別名で保存して、改行を全削除。ちょっと面倒。

で、調べてるうちに SSI というものの存在を知った。Server Side Include。ただ、JavaScriptよりはるかに敷居が高そうで、ちょっと僕の脳味噌では無理っぽい、と、なんとなく思ったけど、意外なことに、できた。やったことは、ええと、

まず、「.htaccess」という名前のテキストファイルを作る。拡張子はナシ。あるいはむしろ名前全体が拡張子なのか。OS X では「.(ピリオド)」で始まるファイル名をつけることができないので、とりあえず「htaccess」としておく。内容は以下の4行。通常、SSI を利用するWEBページの拡張子は「.shtml」である必要があるが、この4行により、「.html」と「.htm」も対象となる(前者だけでよければ上の2行だけにする)。そうするとSSI 無関係なページまでいちいちチェックするため、軽微といえどもサーバーに負荷がかかるらしい。ただ、うちの場合は「about」内のほぼ全ファイルを対象にしたいわけなので、「about」に「.htaccess」をアップすれば問題なかろう(「.htaccess」は、置いたディレクトリ以下のファイルにのみ効く)。
AddType text/x-server-parsed-html .html
AddType text/x-server-parsed-html .html/
AddType text/x-server-parsed-html .htm
AddType text/x-server-parsed-html .htm/
他のサーバーではどうなのか知らないが、さくらインターネットではこれでOK。これを Cyberduck でアップロードして、アップロードしてから Cyberduck でリネームする。リネームするとCyberduck 上でも見えなくなるが、メニューバーの「表示」→「不可視ファイルを表示」で表示される。

後は・・・何すればいいんだ? パーミッションとやらをいじるのか? さくらインターネットのオンラインマニュアルには
SSIから呼び出されるプログラムについては、プログラム配布元が公開している仕様にしたがって設定してください。
設置にかかわる具体的な方法(ファイルの転送、設定項目など)や、デバッグ、プログラムの改変・改造はサポートいたしかねます。配布元または作成者にご相談ください。
プログラム中の各パラメータに関するご質問にはお答えできません。配布元または作成者にご相談ください。
SSIから各種プログラムを呼び出す際の注意事項、および制限事項は「ご利用上の注意・制限事項」に準じます。
以下はほんの一例です。詳しいパラメータや利用法に付いては、 ウェブサーバやホームページの専門書籍を参照してください。
みたいなことが書いてある。とほほのSSI入門には
SSI を置けるフォルダが決まっている、自分で .htaccess の設定を行わなければならないなどいろいろあります。詳細はプロバイダにお問い合わせください。
とある。「SSI を置く」必要があるらしい。どこに。この場合の「SSI」って何よ。テキストファイルか何かか? ああ、むずかしそうで気が遠くなる。絶望感がたまらない。



・・・とかなんとか悩んだけど、驚いたことに、やることはもう何もなかった。htmlファイルの、ナビゲーションを挿入したい場所に
「<!--#include file="honyarara.html" -->」と書く。
「honyarara.html」の方に、挿入したいナビゲーションを書く。
両者をアップロードする。それだけ。
ヘッダに何か呪文を書く必要すらない。ちょっとびっくり。拍子抜け。欠点は、ローカルで確認できないこと。
SSIとはServer Side Include(サーバ・サイド・インクルード)の略です。たいていのサーバが準拠しているNCSA httpdの持つ機能で、HTMLファイルの中に以下のような組み込みコマンドを書くことによって、ブラウザがそのファイルを要求したときにサーバがあらかじめ組み込まれたコマンドを実行する仕組みになっています。

例)
<!–#exec cmd=”/bin/ls”–>
SSIに関する詳細仕様(英語)は以下のURLを参照してください。
http://hoohoo.ncsa.uiuc.edu/docs/tutorials/includes.html

SSIを使用することにより、たとえば次のようなことができます。
HTMLで何度も繰り返して使うような、コピーライトとかをすべてのファイルに同じに表示する事が簡単になる。
ファイルの最終更新時刻やサイズを自動的に表示できるようになる。
外部コマンドの実行結果をページ中に表示できるようになる。
SSIを利用したアクセス統計、カウンターも作れる。
etc…
よくわからんけど、「たいていのサーバ」はSSI の機能を最初から持ってる、ってことなのか?
[PR]
by nobiox | 2010-10-30 16:04 | ├Mac OS X |
<< 自分用備忘録・南青山・アイネク... | Leopard のテキストエデ... >>