1年前に自分用に考えたのですが、かなり役立っているのでシェアします。自分のパソコンの環境下において、以下のJavascriptを埋め込むだけで、ルートパスで指定されたファイルを読むこむように補完します。
スクリプト
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript">
$(document).ready( function(){
if(!location.protocol.match("http")){
var ref = "file:///C:/Documents and Settings/username/デスクトップ/project/html/";
if( ref.match(/\/$/) ){
ref = ref.replace(/\/$/, "");
}
$("[src^='/']","html").each(function(){
result = ref + $(this).attr("src");
$(this).attr("src", result);
});
$("[href^='/']","html").each(function(){
result = ref + $(this).attr("href");
$(this).attr("href", result);
});
}
});
</script>
使い方
- 上記スクリプトを確認したいページの<head>もしくは<body>内に貼り付け
- 上記スクリプトの6行目、ref = “”; のなかに補完するサイトルートパスを記述。ルートパスとして扱うローカルのフォルダ名を入力してください。確認したいファイルをFirefoxやOperaで開いたときのパスを入力いただくと確実です。
- Windowsの場合の例
var ref = "file:///C:/Documents and Settings/username/デスクトップ/project/html/";
- Macの場合の例
var ref = "file://localhost/Users/username/Desktop/project/html/";
- 共通ファイルがサーバ上にある場合の例
var ref = "http://yahoo.co.jp/";
共通ファイル（画像、CSS、Javascriptなど）をルートパスで読み込んでいるサイトを開発する際、困るのがブラウザ上で制作物を確認できないこと。サイト定義していたらDreamweaver上では見れますがクロスブラウザチェックができません。そこでJavascriptでDreamweaverのサイト定義と同様のことを実現させました。ルートパスをJavaScript実行時に指定のパスに置換します。
OS X Leopard以降ではApache2が標準でバンドルされていますし、WindowsでもApacheやXAMPPを入れられれば、ローカルでサーバを立てるのも難しくないのですが、ネットワーク上で共同開発をしていると難しかったり、事情があって環境を用意できなかったり、そこまでエネルギーをかけるほどでもない… かといってテスト環境に都度アップするのも面倒です。
そういうときこのJavascriptを使えばちょっとだけ制作が楽になるかもしれません。簡単なスクリプトですが、僕はサイトやページ作成時にはほぼ必ず使用していますので、アイデアとしてブログで発信してみます。
１年ほど開発中でした反社会的Javascript、パンくずリストを外部化するJavascriptをバージョンアップしました。ホントは5月くらいにできていて検証も済んでいたんですけどいろいろとドタバタしていて公開のタイミングを失っておりました。さきほど別のエントリーをアップしたので勢いに乗って公開です。
HTMLでの変更が面倒なパンくずナビゲーション（トピックパス）を、現在開いているURLを読み込み、Javascriptで自動的に生成します。
個人的に編集するのを忘れがちなパンくずリストなんですが、ナビゲーションとしての重要度はそんなに高くないのでは？ ので外部化して作業負荷が低減されるのであれば外部化してしまってもいいのでは？という提案の意味を込めて作りました。
実際、グローバルナビなどサイト共通のナビゲーションをJavascriptで外部化したサイトが最近増えてきましたが、それだったらパンくずリストも外部化してページの上下にでも印刷ボタンと同等に機能の一部として提供したらいいんじゃって思ってます。
■breadCrumb.js
http://tshinobu.com/lab/breadCrumbJs/
ただ、以下記事のようにテンプレート設計を運用性を重視してちゃんと行えば、外部化しなくてもじゅうぶん管理できるじゃんって作った後になって気がつきましたが…
■サッポロビールにおけるテンプレート活用事例 | デベロッパーセンター
http://www.adobe.com/jp/devnet/dreamweaver/articles/dw10seminar_sapporobeer.html
とりあえず考えの一つとしてWeb上に発信してみます。興味がわきましたら触ってみていただけると嬉しいです。
久しぶりに実験作品を公開です。外部Javascriptファイルを読み込むJavascriptファイルを作りました。CSSのimport.cssのようなもので、HTMLからはrequire.jsを読み込むだけで複数のJavascriptをインポートすることができます。読み込むパスはHTMLから判別して自動的に補完するのでローカルでも、相対パスでも、ルートパスでも動作します。すでにいくつか同じようなものが出ていましたがもっと安全にシンプルにできるのでは、と思ってこっそり作ってみました。
詳しくはこちら
http://tshinobu.com/lab/javascript/require/
今まで個人的にはdocument.writeでルートパスの読み込み記述を並べて書く方法を採用してたんですけど、共有SSI環境とかになると分岐の処理を書かなくてはならない問題に直面しました。サイトによっては相対パスでないと都合が悪いこともしばしば… あとやはりローカル環境で制作しながら確認できないのは不便でした。すでにあるこういったJSは別の問題をはらんでいたり、使い方が分からなかったり、大規模すぎて不安だったりと使うのをためらっていたので、持っている環境で動作検証している限り、個人的にはいいものができんじゃと思います。
責任は取れませんが個人利用/商用利用問わず使ってもらっていいので、自由に持っていって、自由に改変してください。どこかで紹介して頂けると嬉しいです。他の作品のサポートとか更新とかいろいろ告知などマメにできてなくてすみません。。
(2009/11/26 2:50追記)
@aulta さんにご指摘いただき1行削りました！
Javascriptのdocument.writeを使ってたくさんの内容を出力したいことってあると思います。複数行出力するときはいろいろな書き方ができます。
以下のように都度記述する方法もあれば…
document.write('<div id="exampleBlock">');
document.write('<h2>example</h2>');
document.write('<p>foo bar</p>');
document.write('</div>');
以下のようにwith文を使って親オブジェクトの名前を省略して記述する方法もあります。
with(document){
write('<div id="exampleBlock">');
write('<h2>example</h2>');
write('<p>foo bar</p>');
write('</div>');
}
実にさまざまなフォーマットで記述可能なのですが、僕はこんな書き方を好んでよく使っています。
document.write(
'<div id="exampleBlock">',
'<h2>example</h2>',
'<p>foo bar</p>',
'</div>'
);
document.write関数のなかに改行区切りで複数指定してあげると、かなりスマートに記述できるのではと思います。3〜4行の少量でしたら上記二つの方法でも十分ですが、大量でかつ頻繁に更新するとなると、こうしたほうが圧倒的に楽であります。最後の行だけカンマを入れないように注意が必要です。
複数行の文字列の代入もこれを応用して、以下が楽だと個人的に感じてます。
data =
'<div id="exampleBlock">' +
'<h2>example</h2>' +
'<p>foo bar</p>' +
'</div>';
ほかに面白い記述の仕方があれば教えてください！
（2009/8/20追記）コメント欄にて面白い記述方法を教えていただきました！
\マークを使用すると改行しても1文として解釈するとのことです！（Windowsでは「へ」の右のキー、Macではoptionキーを押しながら「へ」の右のキーを押して出します）ダブルクォーテーションで囲んでも、エスケープシーケンスを使用しても、問題なく出力されました。１文字だけなのでミスも少なくなりそうです。これはぜひ使ってみたいです！
document.write('\
<div id="exampleBlock">\
<h2>example</h2>\
<p>foo bar</p>\
</div>\
');
http://tshinobu.com/lab/jQuery.simpleTab/
タブ機能が仕事で必要になりそうだったのですが、ライブラリを探すのも手間なので、10分くらいで作ってみました。
僕がこだわった点というか、こいつのウリは、タブナビゲーションをタブの数だけ配置するところです。
タブナビゲーション
タブ内容
タブナビゲーション
タブ内容
タブナビゲーション
タブ内容…
こういう感じで動くように実装しています。
スタイルシート切ってみていただければお分かりいただけるかと！
ほかのほとんどのタブ実装系ライブラリって、１ページにタブエリアがひとつだけしかないと思うんです。
タブ画像のアクティブ表示や、タブ画像の文言変更などは、画像やCSSで制御しなくちゃならない。
あとタブエリアの下にすぐコンテンツが入るようなビジュアルだと、
JS切ったときにタブが各セクションごとに無いとすごくぶさいく。
この点ケアしたライブラリはあるのかもしれないけど、僕が見つけられなくてこういう不満があって、じゃあ作っちゃえって思って作ってみました。また外部ファイル化とかしますがとりあえず公開してみます。誰かのハートに響くと嬉しいなあ。
