Moonmile Solutions Blog

これが、flash で作るとブラウザ依存の悩みが減るのでしょうが…ま、ここは javascript オンリーで。

■テキストのフォントを揃える。

ブラウザで見るならば、font-size で pt 単位を使うのでしょうが、パーツ上の固定位置になるので px 単位でも良いかなと思っています。このあたりはデザインを見ながら調節ですね。

■テキストの位置を指定する。

画像に対して相対座標にするために、

position: relative;

で指定した後で、top、left で位置決めをします。

この時、画像→時計の文字→コピーライト文字、の順になるので、top がマイナス値（画像の下辺からの相対位置）になるのが、ミソですね。

あと、テキストの高さを計算にいれてしまうと、位置決めが面倒なのであらかじめ、

line-height: 0px;

にしてしまって、テキストの高さを計算に入れないようにすると便利です。

という訳で、このあたりの対処を入れたのが↓です。

■firefox の innerText/innerContent 対策

どうやら、firefox だけ、innerText が無くて、innerContent を使うそうなので、

function tag$(tagID)
{
 var tagObj = document.getElementById(tagID);
 tagObj.setText = function (srcText) {
  if (navigator.userAgent.indexOf("Firefox") > -1) {
   tagObj.textContent = srcText;
  }else{
   tagObj.innerText = srcText;
  }
 }
 return tagObj;
}

を使います。参照先は↓に。

第五章　クライアントサイドの技術：HTMLへのアクセス方法 – div –

http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter05/004/index.html

ただし、jQuery のスクリプトが読み込まれていることが多いので、$ 関数を使わず tag$ という名前に変えています。

まあ、既存の関数名（クラス名）にダブらなければなんでも。

こうしておくと、

tag$(“bijo-clock”).setText( status );

のように呼び出せます。

これで、晴れて IE8 と Firefox で動きましたね（Chromeも）

デスクトップガジェットと同じように、定期的に画像の切り替えが出来たので確認。

■ユーザーがパーツを貼る

貼るところのコードは、こんな感じ。

<script src="http://moonmile.net/js/bijo.js"></script>

普通に、指定された javascript を読み込むだけです。

パラメータを指定する場合は、

• 外部変数を用意するか、
• 指定用の関数を用意するか、
• タグに何か書き込むか、

というところですが、どのパターンでも「パーツを貼りつけるためのフォーム」は必要そうです。上のような１行だけならば、script 部分をコピー＆ペーストでもいいんでしょうけど、それ以上を使う側にさせると間違える確率が増えるので、苦情もろもろが多くなるかな、と。

■bijo.js の中身

function bijo()
{
 var style = "<style> #bijolinux {  width: 200px;  height: 250px;  overflow: hidden; } #bijo-clock {  position: relative;  top: -50px;  left: 100px;  font-size: x-small;  color: red; } #bijo-copyright { position: relative;  top: -50px;  left: 80px;  font-size: x-small; } a#bijo-link { color: white; text-decoration:none; outline: none; } a:hover#bijo-link { color: red; } </style>";
 document.write( style );
 document.write("<div id='bijolinux'><div><img id='bijo-image' width='200' height='250' src='http://moonmile.net/images/photo1.png'></div><div id='bijo-clock'>00:00:00</div><div id='bijo-copyright'><a id='bijo-link' target='_blank' href='http://bijo-linux.com'>bijo-linux.com</a></div></div>");
 init();
}

var bijo_sec   = 0;
var bijo_count = 0;

function start_timer()
{
 setInterval( "interval()", 1000 );
}
function interval()
{
 bijo_sec++;
 if ( bijo_sec >= 30 ) {
  bijo_sec = 0;
  bijo_count ++;
  if ( bijo_count >= 4 ) bijo_count = 0;
        var img = document.getElementById("bijo-image");
        img.src = "http://moonmile.net/images/photo"+bijo_count+".png";
 }
 var dd = new Date();
 var hour = dd.getHours();
 var min  = dd.getMinutes();
 var sec  = dd.getSeconds();
 var status = ("00"+hour).slice(-2,4) + ":"
  + ("00"+min).slice(-2,4)+":"+("00"+sec).slice(-2,4);
    var clock = document.getElementById("bijo-clock");
 clock.innerText = status;
}
function init()
{
 var img = document.getElementById("bijo-image");
    img.src = "http://moonmile.net/images/photo0.png";
 interval();
 start_timer();
}
// start
bijo();

何やら、ややこしい感じになっていますが、先頭で、スタイルと必要なタグを document.write で書き込む関数を作っておいて、最後に bijo function を呼び出す、という方式です。

スタイルとタグが、1行になっていますが、製作時には普通に HTML で書いて、後から1行に直しています。なので、ちょっとデザインを変えようと思っても、なかなか大変そうですね…この方法だと。

外部変数は、他のスクリプトとダブる可能性があるので、できるだけ使いたくない…のですが、２か所だけカウンタ用に[bijo_sec」と「bijo_count」を使います。こんな風に長めにしておけば、他とダブりません。もっと正確にするならば、javascript 自体を php で生成して、変数名をタイムスタンプなどからユニークにする、って技があるのですが、まぁ、大抵は大丈夫でしょう。

そんな訳で、実際に貼りつけてみたのが、これです↓

■他のブラウザで確認

ブログパーツですから、IE8以外もチェックしないと、という訳で。

IE8の場合

Firefox の場合

Chromeの場合

な感じです。

どうやら、

• x-small でのフォントのポイント数がまちまちなので、見え方が駄目。
• firefox は、時計が駄目なところをみると、innerText が駄目。

っぽいですね。

この対処をしますか。

そんな訳で、引き続き、美女Linuxのパーツ作り。

デスクトップの飾り物は、Windows のサイドバーガジェットで十分そうなので、お次はブログパーツな訳。

ブログに貼りつけるタイプで考えられるのは、

• Flash で作る。
• Silverlight で作る。
• Javascript で作る。
• HTML5 を駆使して作る。

の4パターンがあります。一般的なのは Flash で、先駆的なのは HTML5 のパターンなのですが、欠点もあって、

• Flash の場合は、iPhone/iPad で動かない。
• HTML5 の場合は、IE8以下で動かない。

という制約があります。あと、Siverlight にすると、

• そもそも、Silverlight を入れていない。

という障壁もあったりして。

現在のところ、美女Linux のブログパーツのユーザー、マニアックではない一般ユーザー（なのかな？）なので、他とのコラボレーションなどを考えると、パーツの貼り付け時に障壁の高いものはパスしたほうが良いかなと。

そんな訳で、候補としては、

• Flash でのブログパーツ

が、一番の候補なんですが…ああ、手元に Adobe Flash Pro CS5 なんて代物はないのでして（そのうち、体験版で試してみるとして）、画像切り替えぐらいな処理なので、ここでは Javascript オンリーで作りましょう。

# ブログによっては、script タグを貼りつけられないところも多いので、Flash も用意しておくべきだよなぁ、と。

さて、ここから本題ですが、デスクトップで作ったサイドバーガジェットと似たもの作ります。

サイドバーガジェットを作る（準備） | Moonmile Solutions Blog
http://www.moonmile.net/blog/archives/1485

なので、機能はざっくりとこれだけ。

• 画像を表示させる。
• 特定の URL へジャンプ（ブラウザを開くで十分か）。
• 一定間隔で、画像をダウンロードして表示？
• コマンド検索ができると良いかなと。

これに加えて、

• 画像自体は、他サイトから持ってくる。
• 画像リストや、コマンド検索ができるように、リストを取得する。

のが必要。

このリストの部分は、よく考えたら「xmlhttprequest のクロスドメイン」の問題があって、Javascript オンリーで作る場合は、ひと工夫は必要ですね。

XMLHttpRequest のクロスドメインの制約についてまとめたφ（．．）メモメモ – 猫(=・ω・=)顔 1.0β
http://d.hatena.ne.jp/nyagao/20070529/1180452264

を見ていくと、

<script src=”…”> を動的に生成して持ってきちゃう
この場合 src はどこでももってこれちゃう。でも、引っ張ってくるデータは JSONP のように「JavaSciprt のコード」じゃないとダメ、という制約がつく。

ってのが良さそうなので、リストの取得にはこれを使ってみます。

Javascript 埋め込み型のパーツの作り方は、↓を参照にして。

第1回 ブログパーツの基礎知識 | Think IT
http://thinkit.co.jp/article/823/1

という訳で、作り始め。