ちまちまと、半日ぐらい HTML と Javascript を弄って、これくらいできました。
詳しいソースは後で載せるとして、動かしたい貴重な方は、
から、「さんすう」→「かずあて」 で辿ってください。
ブラウザでも普通に動きます（…面白くありませんが）。
一応、Opera をダウンロードして動作確認をしてみました。
作成するときのポイントを軽く列記しておくと。
あと、onload 時に、
window.scrollTo(0,176);
な感じで、スクロールさせると、上画面ぴっちりになります。
え～、しばらく放置していた、子供ツイッター http://kidtwi.jp/ ですが、再起動します。
と、言いますか、２方面の路線を上に乗せてしまおうかなと。
な学習方面です。
モバツイの真似っこ画面を HTML で組んでいたんですが、どうも上下スクロールってのは、DSi には似合わないんですよね。できるならば、
のような感じで、普通のゲーム感覚にしたい。
で、どこまで、CSS が組めるのか、Javascript が動くのか？と調べてみると、
開発/入門 – ニンテンドーDSブラウザーWiki
http://hammerspace.squares.net/DS/wiki.cgi?page=%B3%AB%C8%AF%2F%C6%FE%CC%E7
「携帯ゲーム機用Webページ」の作り方（2/4）：CodeZine
http://codezine.jp/article/detail/5223?p=2
DSiブラウザで”DS”らしいアプリケーションが作れるかも知れない – ここのことはなかったことにするかも
http://d.hatena.ne.jp/yellow_73/20090407/p1
なところを調べてみると、
media を指定することで、縦長表示で CSS を使えるようになる。
<style type=”text/css” media=”handheld”>
</style>
縦長表示を強制的に使うには次の meta タグを指定する。
<meta name=”viewport” content=”width=device-width” />
なところまで分かりました。
試してみると、position あたりは癖がある（必ず左上が基点になるらしい）のですが、文字や画像の重ね合わせもできるし、jQuery の位置指定も動いているので大丈夫そう。
製作中の tips は少しずつアップしていきます。
美女Linuxブログパーツ作成企画
Google を良く使う人ならば、iGoogleのほうが便利、というか、gmail ぐらいしかまともに表示させていないのですが。。。
な風に、美女Linux ブログパーツが表示できます。
作り方は簡単で、元々 javascript で作ってあるので、
<?xml version=”1.0″ encoding=”UTF-8″ ?>
<Module>
<ModulePrefs title=”美女Linux beta6″ height=”262″ width=”212″ />
<Content type=”html”><![CDATA[
<script src=”http://moonmile.net/js/bijo6.js” type=”text/javascript”></script>
]]></Content>
</Module>
のような xml ファイルを http://moonmile.net/js/bijo6.xml として保存しておきます。
このURLを「ガジェットの追加」のところで指定するだけです。
一度、指定すれば、ガジェット自身の「このガジェットを共有」のところで、リンクを作ってくれるので、これで共有ができます。
美女Linux ブログパーツを追加
http://www.google.com/ig/adde?moduleurl=http://moonmile.net/js/bijo6.xml&source=imag
このあたりの詳しい話は後ほど。
美女Linuxブログパーツ作成企画
Siverlight 4 でブログパーツを作るとこんな感じ。
＜サンプル＞
移植はすんなりできそうです。
＜コード＞
namespace BijoLinuxSiverlight
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
int count = 10000;
int bcount = 0;
private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
{
System.Windows.Threading.DispatcherTimer myDispatcherTimer = new System.Windows.Threading.DispatcherTimer();
myDispatcherTimer.Interval = new TimeSpan(0, 0, 0,1, 0);
myDispatcherTimer.Tick += new EventHandler(Each_Tick);
myDispatcherTimer.Start();
}
public void Each_Tick(object o, EventArgs sender)
{
count++;
if (count > 15)
{
count = 0;
bcount++;
if (bcount > 5)
{
bcount = 0;
}
Uri uri = new Uri("http://moonmile.net/images/photo00"+bcount+".png",
UriKind.RelativeOrAbsolute);
ImageSource source = new BitmapImage(uri);
bimage.Source = source;
}
settime();
}
public void settime()
{
DateTime now = DateTime.Now;
string year = now.ToString("yyyy");
string[] months = new string[] { "Jan", "Fev", "Mar", "Apl", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };
string mon = months[ now.Month-1];
string day = now.ToString("dd");
string time = now.ToString("HH:mm:ss");
bdateyear.Content = year;
bdatemon.Content = mon;
bdateday.Content = day;
bdatetime.Content = time;
}
}
}
コード的には、これが一番すっきり…というか得意分野だけなんですが。
美女Linuxブログパーツ作成企画
Adobe Flash Pro CS5 体験版をダウンロードして作成してみる。
いやぁ、マジに初めてなもので、全く使い方が分かりません。。。が、ひとまず、こんな感じまで出来ました。
＜サンプル＞
画像の切り替えまでは分かったけど、外部読み込みは断念。これはまた後日。
なんか、ActionScript 3.0 から文法が変わったらしく、検索で引っ掛かる ActionScript 2.0 のものでは動かない（というか、クラスがないとか言われるし）、結構苦労しています。
ので、雑なソースですが、一応晒しておきます。
# 画像の切り替えのときに、元の「loading…」の画像が出るので、loader のところで切り替えが必要なのかなと。
import flash.display.Loader;
import flash.net.URLRequest;
bcopyright.addEventListener(MouseEvent.CLICK, fl_ClickToGoToWebPage);
function fl_ClickToGoToWebPage(event:MouseEvent):void
{
navigateToURL(new URLRequest("http://bijo-linux.com"), "_blank");
}
var loader:Loader = new Loader();
bimage.addChild( loader );
now();
var count = 1000;
var bcount = 0;
var tId=setInterval(now,1000);
function now() {
var myDate = new Date();
var h = myDate.getHours();
var min = myDate.getMinutes();
var s = myDate.getSeconds();
var year = myDate.getFullYear();
var mon = myDate.getMonth();
var day = myDate.getDate();
hyoji(year,mon,day, h,min,s);
count++;
if ( count > 15 ) {
count = 0;
bcount++;
if ( bcount > 5 ) {
bcount = 0;
}
var url = new URLRequest( "http://moonmile.net/images/photo00"+bcount+".png");
loader.load( url );
}
}
function hyoji(y,m,d,h,min,s){
if (h<10) {
h = "0"+h;
}
if (min<10) {
min = "0"+min;
}
if (s<10) {
s = "0"+s;
}
var hour = h+":"+min+":"+s;
var months = ["Jan","Fev","Mar","Apl","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec" ];
bdatetime.text = hour;
bdateyear.text = y;
bdatemon.text = months[m];
bdateday.text = d;
}
Flash 作るのに、これを買わないと駄目なんですかね？ちょっと、10万円近いのが難点…10万円の仕事があれば、受けてソフト代にする、ってのもあるけど、とか。
美女Linuxブログパーツ作成企画
一応、Javascript オンリーで動かすときのメリットは、iPad や iPhone で動くことです。
持ち合わせに iPhone が無いので、iPad で（…iPad だけ、持っているパターンは珍しいのだがｗ）。
iPad だと ブラウザが safari になるのと、フォントが windows 系ではないので、フォントイメージが異なりますが、まずまずな感じ。
このパーツだと、横 160 ピクセル、縦 262 ピクセルなので、iPad ( 132 dpi )で見たときには、小さ目に映りますね。このあたりは、iPad 用に大き目に作るか（ javascript 内でブラウザを判別？）、まぁ、このままのサイズでも、といったところです。
美女Linuxブログパーツ作成企画
Javascript オンリーでブログパーツを作る場合、簡単な画像の切り替えだけならば、手打ちで CSS を使ってもいいのですが、ちょっと凝ったデザインだと途端にお手上げになってしまいます。
（いえ、方眼紙に地道に書けばいいんですけど、、、）
という訳で、適当な WEB サイト作成ツールを使えば良い、ということに気づいて、
Microsoft Expression Web 4 を使ってみました。
この手のツールが、ブログパーツ作りを想定しているかどうかは不明ですが、まぁ、CSS で position を付ける分には便利。
細々としたドットピッチを、テキストで打ち込むよりは、div タグを選択した後にカチカチとカーソルキーで動かしたほうが早いです。
良く見れば、左上のツールボックスには ASP.NET コントロールが並んでいたりして、一応、ASP.NET アプリも作れる模様。
さて、こんなデザイナを使って、美女Linux のブログパーツを作ったのがこれです。
＜サンプル＞
（複数並べた場合、古い関数を呼び出してしまっているので、単独の記事で、見てください）
ほらッ!!! 一気に垢抜けた（死語）感じになったでしょッ!!! と言いますか、フレームを切り替えれば、結構きれいになります。あとは、カレンダーとかコマンド名とかの配置に「センス」を持たせないと駄目、という訳です。
左上についているクリスマスリースが、季節らしい雰囲気を醸し出し、、、と言いますか、もう少しマシなのを探したいなぁと。
美女Linuxブログパーツ作成企画
ブログパーツを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 を使わなくて良いし、結構便利。
詳しい手順なんかは、技術評論社のページを参考にして欲しいのですが、簡単にメモしておくと、
ってな感じで処理が流れます。
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("<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 の試用版で試してみますか。
