はてなブログでjavaScriptを学ぼう８ 共通ライブラリーを作る
前回のまとめ
1度書いたプログラムを再利用する為、外部ライブラリーを作る方法を模索。
色々試したが残念な結果となりました。
頭を冷やしてグーグル先生にしつこく聞いてみた
はてなブログ ＋ 外部ライブラリー や javaScrpt などグーグル検索を実施、いろんな事例を探したが発見できず。
そんな中サイドバーにjavaScriptを書いている人発見！
おや？、もしかして、サイドバーって全てのページで表示されるよね。
試してみました。
サイドバーにプログラムを書く
[デザイン] [サイドバー] [モジュールの追加] [HTML]を開き、
タイトル入力（何でもいい）
モードHTMLで下記入力。
<script type="text/javascript">// <![CDATA[
ここにjavaScrptを書く
// ]]></script>
試しにメッセ時を表示できるかalert('OK');を記載し実行。
motogp funページのどれでもokメッセージが出るようになりました。
ヤッター目的達成！！。
とは言え変なサイドバー項目が一つ増える。
気持ち悪いので、もうちょと考えます。
ヘッダーにHTMLを記述できる
ヘッダーの存在忘れてました。
多分最初に読込まれる場所、ここに共通プログラムを書けば、共通ライブラリー化できそう。
はてなブログの中の人、この使い方合ってますか？
それでは手順。
プログのデザインを選択。
ヘッダー。
タイトル下にjavaScript（共通関数）を記述。
Xデーカウンター設置
そもそもの目的は、モテギGP開幕までの日数を表示したかった。
ヘッダーはその意味でも好都合でした。
プログラムの説明
<script type="text/javascript">// <![CDATA[
//ヘッダー表示
CountDounMotegi();
// ↑この関数が毎回ヘッダーで実行されます
//共通関数
// ここにいろんなページで使える関数を書く 共通ライブラリー
// これはモテギGPまでのカウントダウン関数
function CountDounMotegi() {
var vxdt = new Date('2015/10/09');
var vsdt = new Date();
var vsec = vxdt.getTime()-vsdt.getTime();
var vday = Math.floor( vsec / (1000*60*60*24) );
document.write('日本グランプリ開幕まであと ' + vday + ' 日');
}
// ]]></script>
記述が終了したら保存しましょう。
さあ、動作結果は？
バーンできました。
まとめ
解ってしまえば簡単でした。
ヘッダーのHTMLエディターも行番号やコードの縦位置ガイドが表示され、こんな使い方を想定しているのかも。（勝手な意見）
jQuery等の外部ライブラリー読込もここに書けます。
ただ、jQuery使わないページが殆どなので止めた方が良いですね。
以上
