Moonmile Solutions Blog

美女Linuxブログパーツ作成企画

• ブログパーツを作る（準備）
• ブログパーツで画像の切り替え
• ブログパーツのフォントを揃える
• ブログパーツをjavascriptだけで作る場合の懸念点
• ブログパーツに画像を重ね合わせてフレームを付ける
• ブログパーツから動的にパーツデータを取得する
• Microsoft Expression Web 4 を利用してブログパーツを作る
• 美女LinuxブログパーツはiPadでも動くよ ← いまここ

一応、Javascript オンリーで動かすときのメリットは、iPad や iPhone で動くことです。

持ち合わせに iPhone が無いので、iPad で（…iPad だけ、持っているパターンは珍しいのだがｗ）。

iPad だと ブラウザが safari になるのと、フォントが windows 系ではないので、フォントイメージが異なりますが、まずまずな感じ。

このパーツだと、横 160 ピクセル、縦 262 ピクセルなので、iPad ( 132 dpi )で見たときには、小さ目に映りますね。このあたりは、iPad 用に大き目に作るか（ javascript 内でブラウザを判別？）、まぁ、このままのサイズでも、といったところです。

美女Linuxブログパーツ作成企画

• ブログパーツを作る（準備）
• ブログパーツで画像の切り替え
• ブログパーツのフォントを揃える
• ブログパーツをjavascriptだけで作る場合の懸念点
• ブログパーツに画像を重ね合わせてフレームを付ける
• ブログパーツから動的にパーツデータを取得する
• Microsoft Expression Web 4 を利用してブログパーツを作る ← いまここ

Javascript オンリーでブログパーツを作る場合、簡単な画像の切り替えだけならば、手打ちで CSS を使ってもいいのですが、ちょっと凝ったデザインだと途端にお手上げになってしまいます。

（いえ、方眼紙に地道に書けばいいんですけど、、、）

という訳で、適当な WEB サイト作成ツールを使えば良い、ということに気づいて、

Microsoft Expression Web 4 を使ってみました。

この手のツールが、ブログパーツ作りを想定しているかどうかは不明ですが、まぁ、CSS で position を付ける分には便利。

細々としたドットピッチを、テキストで打ち込むよりは、div タグを選択した後にカチカチとカーソルキーで動かしたほうが早いです。

良く見れば、左上のツールボックスには ASP.NET コントロールが並んでいたりして、一応、ASP.NET アプリも作れる模様。

さて、こんなデザイナを使って、美女Linux のブログパーツを作ったのがこれです。

＜サンプル＞

（複数並べた場合、古い関数を呼び出してしまっているので、単独の記事で、見てください）

ほらッ!!! 一気に垢抜けた（死語）感じになったでしょッ!!! と言いますか、フレームを切り替えれば、結構きれいになります。あとは、カレンダーとかコマンド名とかの配置に「センス」を持たせないと駄目、という訳です。

左上についているクリスマスリースが、季節らしい雰囲気を醸し出し、、、と言いますか、もう少しマシなのを探したいなぁと。

美女Linuxブログパーツ作成企画

• ブログパーツを作る（準備）
• ブログパーツで画像の切り替え
• ブログパーツのフォントを揃える
• ブログパーツをjavascriptだけで作る場合の懸念点
• ブログパーツに画像を重ね合わせてフレームを付ける
• ブログパーツから動的にパーツデータを取得する　←　いまここ

ブログパーツをjavascriptだけで作る場合の懸念点 | Moonmile Solutions Blog

http://www.moonmile.net/blog/archives/1530

のところで、クロスサイトスクリプトの問題がなぁ、う～ん、と思っていたのですが、なんじゃ JSONP を使えば簡単にクリア。

これでできる！ クロスブラウザJavaScript入門：第11回　JSONP入門｜gihyo.jp … 技術評論社

http://gihyo.jp/dev/serial/01/crossbrowser-javascript/0011

要するに、JSON でデータを拾えればいいので、callback 関数を用意してやれば良い、という抜け道ですね。最近の javascript の定番です。これを使うと、XMLHttpRequest を使わなくて良いし、結構便利。

詳しい手順なんかは、技術評論社のページを参考にして欲しいのですが、簡単にメモしておくと、

1. コールバックされる関数を書いておく。
2. document.write 等で、コールバック呼出しを書き出す PHP をコール。
3. PHPが、コールバック関数を書き出す。
4. コールバック関数が呼び出される。
5. コールバック関数内の処理が行われる。

ってな感じで処理が流れます。

callback.php に

callback(
[
 { name: "su",
   desc: "管理者モードになる",
   url: "photo000.png"
 },
 { name: "arp",
   desc: "proxy apr テーブルを表示する",
   url: "photo001.png"
 },
 { name: "route",
   desc: "ルーティングテーブルを表示する",
   url: "photo002.png"
 },
 { name: "shutdown",
   desc: "システムをシャットダウンする",
   url: "photo003.png"
 },
 { name: "sudo",
   desc: "管理者モードで実行する",
   url: "photo004.png"
 },
 { name: "unzip",
   desc: "zipファイルを解凍する",
   url: "photo005.png"
 },
]
);

なるデータを用意しておく。

# このあたりは、実際は、MySQLからデータを引っ張って来て構成ですね。

これを呼出し側の javascriptで

document.write(&quot;<script src='callback.php'></script>);

と書いておいて、

function callback ( items )
{
 for ( var i in items ) {
  items[i] で、それぞれの要素を処理する
 }
}

という訳です。なるほど、こうすると非同期的に動くので後処理なんかは callback 関数内に書けばよいので便利。

これを実装したのが下の例です。

＜サンプル＞

試しに右上に該当するコマンド名を表示させています。

ブログパーツのフォントを揃える | Moonmile Solutions Blog
http://www.moonmile.net/blog/archives/1525

の続き（あとで、目次風にまとめておく予定）。

文字の重ね合わせの時に、相対座標だけを使って、「position: relative」を使っていたのですが、

画像を使わずにCSSだけで角を丸くする方法 – [ホームページ作成] All About
http://allabout.co.jp/gm/gc/24004/

を見ると、親タグで「relative」を指定しておいて、子タグに「absolute」を指定すると、座標指定が楽ですね。

そんな訳で、フレーム画像を重ね合わせるときには、

<div id=”bijo-linux” style=”position: relative;“>

  <div id=”bijo-image” style=”position: absolute; top: 0px; left: 0px;”><img src=”画像” /></div>

  <div id=”bijo-frame” style=”position: absolute; top: 0px; left: 0px;”><img src=”フレーム画像” /></div>

  <div id=”bijo-clock” style=”position: absolute; top: 60px; left: 0px;”>00:00:00</div>

  <div id=”bijo-copylight” style=”position: absolute; top: 100px; left: 0px;”>00:00:00</div>

</div>

のような形で、親からの相対座標を付ければOKと。

フレームには透過PNGを使えば、こんな風にフレームをつけることができます。

＜サンプル＞

# 右下の白い部分は、透過されているのではなく、白になっています。
# これは、内枠を透過させて下の画像（女性の画像）を表示させるためで、、、このあたり、フレームの形には、ちょっと限界があるけど、まあ、Javascript オンリーで、簡易的なものであればこれまで出来るということで。

所詮、画像の呼び出しは、サーバーに逐一問い合わせをしているので、PHP呼出しにして加工した画像を返す、という技にすれば、フレームの問題は解決できそうです。

あるいは、Flash で作るとか。

ひとまず、これで簡単だけどデスクトップガジェットレベルまではOK。

で、拡張する場合の懸念点として、

■文字コードの問題

日本語を受け渡しするときに、文字コードの問題があって、UTF-8 にするか、EUC にするか、JISコードにするか、という問題がある。

昔から作っているページは、JIS が標準なんだけど、最近のブログは英語圏発祥なので UTF-8 が主流だったり。

Linux 関係であれば、そのまま EUC を使ったり、表示時に判断しないといけない。

一番いいのは、

日本語を使わない。

のが良いのだけど、、、ん～、このあたりの懸念から Flash の方が作り易いんですかねぇ？

■クロスサイトスクリプトの問題

そもそもデータをどうやって受け取るのか、の問題があって、XMLHttpRequest を使う場合のパターンを決めておかないと、うまく受け取れない。

先の <srcript src=”…”></script> による JSONデータの埋め込みは、自前のページだと良いのだが、ブログパーツのような場合、

<script src=”＜データ用のURL＞”></script>

<script src=”＜本体のJS＞”></script>

のように、２行になってしまってシンプルさに欠ける。

かといって、本体Javascriptから、データ用のJavascriptを呼び出せないし（と思う）、ん～、ここは悩みどころ。

後日、確かめるとしますか。

■フォントの問題

何のフォントに合わせるのか、によるけど（これは、Flashの場合も同じなのか？）、Windows で見た時と、Mac で見た時と、Linux で見た時は、同じような形にしたい。

できるだけシンプルにして画像だけしか使わない（今回の場合は、美女Linuxだから、画像が主なんだけど）ようにすれば、このあたりの違いは回避できる。

多少、見た目が違っていても比較しなければ問題ないし。

■関数名の問題

jQuery 周りの関数とバッティングしてしまうと問題が多い。

逆に、jQuery を使うと色々なことができるのだが、ブログのプラグインによっては jQuery を読み込ませると他がうまく動かない、という問題がある。

できるだけ、「さっくりと配置」させたいので、このあたりは地味に関数名を長くする、という手段を取ればよかろう。

jQuery に対しては、必要になれば jQuery 相当の動きを作るってことになる。このあたりの手間が多くなれば、Flash のほうが便利だなぁ、ということになる。

～

私の作りとしては、Silverlight でさっくりと、なんだけど、現在のところユーザーは Flash で配置するほうが「さっくりと感」が強いからなぁ、、、ひとまず、flash の試用版で試してみますか。

これが、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=&quot;http://moonmile.net/js/bijo.js&quot;></script>

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

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

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

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

■bijo.js の中身

function bijo()
{
 var style = &quot;<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>&quot;;
 document.write( style );
 document.write(&quot;<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>&quot;);
 init();
}

var bijo_sec   = 0;
var bijo_count = 0;

function start_timer()
{
 setInterval( &quot;interval()&quot;, 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(&quot;bijo-image&quot;);
        img.src = &quot;http://moonmile.net/images/photo&quot;+bijo_count+&quot;.png&quot;;
 }
 var dd = new Date();
 var hour = dd.getHours();
 var min  = dd.getMinutes();
 var sec  = dd.getSeconds();
 var status = (&quot;00&quot;+hour).slice(-2,4) + &quot;:&quot;
  + (&quot;00&quot;+min).slice(-2,4)+&quot;:&quot;+(&quot;00&quot;+sec).slice(-2,4);
    var clock = document.getElementById(&quot;bijo-clock&quot;);
 clock.innerText = status;
}
function init()
{
 var img = document.getElementById(&quot;bijo-image&quot;);
    img.src = &quot;http://moonmile.net/images/photo0.png&quot;;
 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

という訳で、作り始め。