motogp fan

motogp ファンによる、雑ブログ、ガジェットネタも

はてなブログでjQueryを学ぼう7 外部ライブラリーを作成できるのか?

jQueryで色々な動作を、はてなブログ内で実験中。
 

前回のまとめ

 

前回Xデーカウンターの基礎を実験しました。
まとめると下記のコードで動きます。

<p id="motegiday">日本グランプリ開幕まで・・・日</p>
$(function() {
 $(window).ready(function(){
  var vxdt = new Date('2015/10/09'); // ←Xデー
  var vsdt = new Date(); // ←ここに当日をセット
  var vsec = vxdt.getTime()-vsdt.getTime();
  var vday = Math.floor( vsec / (1000*60*60*24) );
  $('#motegiday').text('日本グランプリ開幕まであと' + vday + ' 日');
 });
});

 動いているページはこちら

検証用ページ - motogp fun

 

1度作ったプログラムは使いまわしたい 

カウントダウン表示は、Xデーが到達するまで、いろんなページに表示したいですよね。
毎回毎回上記コードをコピペすれば目的は達成できます。でも、面倒。
しかもプログラムに修正が入った時、使った場所分だけ修正が必要。
そんなことしたくない。たぶんしない。
そんな訳で、プログラムの共通化(外部ライブラリー化)できるか検証。
 
注意、ここで縛りを再確認。
はてなブログだけで完結したプログラム動作を目指しているので、何処かのファイル共有サーバーは使用禁止。
jQuery等のメジャーなライブラリーはこのルールの対象外です。
 

 ajaxでhtmlを読み込んでみた

 前の回で実験した外部ページの読み込み機能を使ってみます。
 <p id="xdays">ここに表示</p>
  $(window).load(function(){
 $.ajax({
  url: "http://motagp.hatenablog.com/entry/test-data01",
  dataType: "html",
  success:function( data ) {
   $("#xdays").html($('#motegiday', data).html());
  },
  error: function(){
   $('#xdays').text('読み込みエラー');
  }
 });
});
結果-----------------------------

ここに表示

----------------------------------- 

カウントダウン日付が・・・のままです。
参照先で動くプログラムは動作しないようです。 

それならiframeタグで丸ごと表示してしまえ

 

外部ページをインラインフレームで表示する機能を試します。
<iframe src="http://motagp.hatenablog.com/entry/test-data01" width="400" height="100">

 

ここにiframeで表示

結果は何も表示されない。

 Refused to display 'http://motagp.hatenablog.com/entry/test-data01' in a frame because it set 'X-Frame-Options' to 'DENY'.

 エラーでました、ifreme参照は禁止してます表示。

流石はてなブログ、当たり前か。

 

それならブログの1ページを外部ライブラリーとして利用してみます

ブログ1ページに下記コードを記載、参照できるか試します。
http://motagp.hatenablog.com/entry/js

<p>
<script type="text/javascript">// <![CDATA[
  function naninani() {
  alert('motamota');
 }
// ]]></script>
</p>

 

このブログでは下記を追加して、動いたらアラートが表示されます。 

 $(window).load(function(){
 msgtest();
});

 

 結果は何も起きませんでした。

 エラーは下記、参照したライブラリーのMIME形式が違うって怒られてます。

Refused to execute script from 'http://motagp.hatenablog.com/entry/js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

 Uncaught ReferenceError: msgtest is not defined

 

 ライブラリーの script type="text/javascript" ってheadタグに記載しなさいってルールあるらしく、今のままだとjavascriptファイルと認識してくれません。
headファイルっていじれないよね。

 

まとめ

私の今の技術力では、外部ファイル化は実現できませんでした。
何かいい方法ないですかね~

 

 

 

寂しく終わり