ブログパーツ・mixiアプリのポータルサイト　BlogDeco【ブログデコ】

背景、数字の文字画像を自由に変更できる時計ブログパーツ制作キットです。まずは、キットをダウンロードしてください。
詳細説明については、テクニカルノートをご参考ください。
※制作キットは、広告表示がされるようになっておりますので予めご了承ください。
また、カスタマイズしたブログパーツを掲載してるURLをご一報いただけましたら、審査の上ブログデコでご紹介させていただきます。

 

カスタマイズする
===============

パーツをカスタマイズする際、以下を変更してください:

- パス、時刻画像の設定: JavaScript

JavaScriptの以下のコードを編集して設定することが出来ます:

   Clock.run({
      css : './clock/clock.css', // CSSのパス
      image: {
         path : './clock', // 時刻画像のパス
         ext : '.png', // 画像の拡張子。image.pathと組み合わせて./clock/1.pngといった画像が読み込まれる
         width : 26, // 画像のサイズ
         height: 30
      }
   });

- 背景、時刻の表示位置: CSS

テクニカルノートで解説する要素ノードを参考にして下さい。



テクニカルノート
===============

## 実行の流れ ##
1. パーツ用のCSSをロード
2. パーツをDOMノードに追加
3. 時刻の表示、書き換え

カスタマイズ、メンテナンスしやすいように見た目をCSSに分離しています。


## ブログパーツの読み込み ##
ブログパーツJSが読み込まれるとCSSのロードと同時にscriptタグがある位置にパーツのHTMLを追加します:

<!--script要素の前に追加される -->
<div id="blogdeco_clock">
<div id="blogdeco_clock_main">
<!-- 時計時刻 --></div> <span id="blogdeco_ad">
<!-- 広告 --></div> </div> </script>

※見やすいように改行してあります

スクリプトがロードされた時点のDOMノードでは
document.getElementsByTagName('script')の一番最後が必ずスクリプト自身になるため、そこにinsertBefore()しています。document.write()で追加する場合に比べ、ページのパースが停止しないメリットがあります。

   var div = document.createElement('div');
   ...
   var script = Blogdeco.makeArray(document.getElementsByTagName('script')).pop(); // Blogdeco.makeArray()でArray likeなオブジェクトを配列に変換した後、最後の要素を取り出す
   script.parentNode.insertBefore(div, script); // scriptの前にdivを追加


## 時刻表示 ##
setInterval()を利用した一般的な方法で時刻の書き換えを行っています。ここでは表示上変更がない場合、無駄な書き換えを防ぐようにしています。

   var lasttime = {};
   Clock.timer = setInterval(function() {
      var date = new Date();
      var datetime = { // 先に書式をフォーマットしておく
         m: Clock.str2img(date.getMinutes(), 2), // 文字列からimgタグを作成。10以下の場合は0を追加して桁を揃える処理も同時に行うv          h: Clock.str2img(date.getHours(), 2)
      };

      for (d in datetime) {
         if (datetime[d] == lasttime[d]) break; // 前回と同じ時刻だった場合処理を抜ける
         document.getElementById('blogdeco_clock_' + d).innerHTML = datetime[d]; // 予め用意されている要素に表示
      }
      lasttime = datetime;
   }, 100);