ブログパーツで画像の切り替え

投稿日: 2010/11/04 作成者: masuda

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

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

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

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

 

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

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

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

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

■bijo.js の中身

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
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の場合

20101104_03.jpg

Firefox の場合

20101104_04.jpg

Chromeの場合

20101104_05.jpg

な感じです。

どうやら、

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

っぽいですね。

この対処をしますか。

カテゴリー: 開発, ブログパーツ パーマリンク