HDRiな生活

HDR（ハイダイナミックレンジ）写真の連載。ストックフォトでカメラ機材代の捻出を目論む。

ヘッダのJavaScript読み込みをincludeっぽくスッキリさせる方法☆

ヘッダのJavaScript読み込みをincludeっぽくスッキリさせる方法☆

カメラ:D700、 レンズ:SIGMA 20mm F1.8 EX DG、ISO:200、絞り優先、ブラケット:-2〜+2、ホワイトバランス:オート

関連写真

  • 2014年12月ストックフォトの売り上げ報告
  • デザインの、話をしよう
  • Google リーダーと iGoogle 廃止に伴い代替サービスを探し辿り着いた先 netvibes
  • 2013年2月ストックフォトの売り上げ
  • ロードバイクで平均時速 30km を超えた日（五色桜大橋 〜 南砂町水位観測所の往復@荒川）
  • wiggle のお買い物を 20% ディスカウントするクーポンコード（2012/8/20まで！）

【追記】ロード順が保証されておらず、依存関係にあるjsを読み込むと不具合の可能性があります。指摘いただきました。

PrototypeやjQueryなどのjsライブラリを複数使用すると、ヘッダ内にjs読み込み文が並んでしまって、見栄えが悪くなる、保守性は低くなるわで、クローラフレンドリーも期待できなくなります。多分。
そういった時に、jsをスッキリ一文にまとめてしまう方法です。

【Before】

<head> <script type="text/javascript" src="/path/to/hoge1.js"></script> <script type="text/javascript" src="/path/to/hoge2.js"></script> <script type="text/javascript" src="/path/to/hoge3.js"></script> <script type="text/javascript" src="/path/to/hoge4.js"></script> <script type="text/javascript" src="/path/to/hoge5.js"></script> <script type="text/javascript" src="/path/to/hoge6.js"></script> </head>

【After】

<head> <script type="text/javascript" src="/path/to/pack.js"></script> </head>

【pack.jsの中身】

(function() { document.open(); var l = arguments.length; for(i = 0; i < l; i++) document.write('<script type="text/javascript" src="' + arguments[i] + '"></script>'); document.close(); })( "/path/to/hoge1.js", "/path/to/hoge2.js", "/path/to/hoge3.js", "/path/to/hoge4.js", "/path/to/hoge5.js", "/path/to/hoge6.js", );

外部JavaScriptを使用する場合は絶対パスで指定してください。ちなみにPrototypeやjQueryはgoogleが公開してますので、先生のリソースにあやかりましょう。

はい、まんま星海社の仕組みを頂きました。ガハァと衝撃を受けたサイトの作り、なんとも小憎らしいスマートな作り。コメントアウトからすると外注してるぽいけどどこなんでしょう。ご存知でしたら教えてください。iPhoneアプリや電子書籍だなんだと世が騒ぎ始めてますが、htmlサイトもまだまだ伸びしろがあるという可能性を感じます。

じゃぁHDRやらずに単写真で可能性探れよと言われそうでビクンビクンでごはざいますが。今年9月にオープンするという"最前線"、講談社に期待大。

撮影環境・雑多品

GT0540

D700の重さに耐えつつ、最軽量クラスのGT0540。Gitzoが40%引きの信じられない店、楽天のナニワ。他にも破格の品が定期的に入れ替わっています。

関連記事

コメント： 4

名無し　

本文の方法で、PrototypeやjQueryなどのjsライブラリを読み込むのは、おすすめできません。

scriptタグは、書いた順に生成されますが、スクリプトのロードの完了の順序は、保証されません。
jQuery 等に依存するスクリプトのロードが先に完了してしまった場合、その時点では、jsライブラリが存在しないのでエラーが発生してしまいます。

詳しくは、
「JavaScript 動的 ロード」でググると見つかります。

↓例えば、以下のエントリーが参考になります。
・外部JavaScriptの動的ロード
http://d.hatena.ne.jp/os0x/20080827/1219815828
・動的なscriptタグの読み込みを同期的に行う
http://blog.37to.net/2008/08/script/

Toshiro　

>No Nameさん
ご指摘ありがとうございます。勉強不足でした。
ということは、依存していないjsなら大丈夫ということですね（そもそもひとつのファイルにまとめてしまえという話でもありますが）。

エントリーに追記しました。重ねてありがとうございます。

shockatz　

ごぶさたしています
最近ぜんぜん撮れてなくてこっちの話題ばっかり反応してしまって。。
なるほど。。自分はサーバサイドヘルパで生成するため、クライアント側の動的ロードは考えてなかったんですが、そういう問題があるのですね。すごい勉強になりました。
Toshiroさん、No Nameさんに感謝です。

Toshiro　

>shockatzさん
いえいえ、本家のコーダーからすれば児戯なんでしょうけど。ヘッダ内のゴチャゴチャを解消するのは性格的に嬉しいのです。