読者です 読者をやめる 読者になる 読者になる

motogp fun

motogp ファンによる、モトgp 結果、モトgp日程を報告するブログ、ガジェットネタも

はてなブログでjavaScriptを学ぼう8 共通ライブラリーを作る

ソフト開発
はてなブログ内で完結できるプログラムの作成実験中。
今回から表題をjQueryからjavaScriptに変更しました。
jQuery使わない事もい多いから)
 
 
 

前回のまとめ

 1度書いたプログラムを再利用する為、外部ライブラリーを作る方法を模索。
色々試したが残念な結果となりました。

 

motagp.hatenablog.com

 

 

頭を冷やしてグーグル先生にしつこく聞いてみた

はてなブログ + 外部ライブラリー や javaScrpt などグーグル検索を実施、いろんな事例を探したが発見できず。
そんな中サイドバーにjavaScriptを書いている人発見!

おや?、もしかして、サイドバーって全てのページで表示されるよね。
試してみました。

 

サイドバーにプログラムを書く

 [デザイン] [サイドバー] [モジュールの追加] [HTML]を開き、

タイトル入力(何でもいい)

 モードHTMLで下記入力。 

<script type="text/javascript">// <![CDATA[

 ここにjavaScrptを書く

// ]]></script>

 

試しにメッセ時を表示できるかalert('OK');を記載し実行。
motogp funページのどれでもokメッセージが出るようになりました。
ヤッター目的達成!!。

とは言え変なサイドバー項目が一つ増える。
気持ち悪いので、もうちょと考えます。

 

ヘッダーにHTMLを記述できる

 

ヘッダーの存在忘れてました。
多分最初に読込まれる場所、ここに共通プログラムを書けば、共通ライブラリー化できそう。
はてなブログの中の人、この使い方合ってますか?

それでは手順。

プログのデザインを選択。

f:id:motagp:20150910080251j:plain

 

ヘッダー。

f:id:motagp:20150910080407j:plain

 

タイトル下にjavaScript(共通関数)を記述。

f:id:motagp:20150910080435j:plain

 

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>

 

f:id:motagp:20150910080552j:plain

 

記述が終了したら保存しましょう。

f:id:motagp:20150910080557j:plain

 

さあ、動作結果は?
バーンできました。

f:id:motagp:20150910081540j:plain

 

 

まとめ

解ってしまえば簡単でした。

ヘッダーのHTMLエディターも行番号やコードの縦位置ガイドが表示され、こんな使い方を想定しているのかも。(勝手な意見)

jQuery等の外部ライブラリー読込もここに書けます。
ただ、jQuery使わないページが殆どなので止めた方が良いですね。

 

以上