ガジェットの杜

おもにケータイ向けのガジェットを自作したり勉強したり公開したり教えてもらったり。そんな感じ。
このページと同じURL(http://phs.cside.com/ggt/)にケータイでアクセスすると、作ったガジェットをダウンロードできたりします。今のところソフトバンクが６割、ウィルコムが４割という感じ。一応お約束通り、何が起きても自己責任で(^^;

ぱらチューブウィジェット(SoftBank・WILLCOM)
ぱらチューブのウィジェット版。YouTubeでもっとも盛り上がっている動画をAPIで取得し、ケータイ待受の上でパラパラ再生します。無駄な通信を発生しないように待受上では一度だけ通信して動画タイトルを表示します。再生を押すと通信開始してパラパラ再生。拡大再生もしたりします。YouTubeからの動画の取得は一定時間ごとに行い、かつウィジェットからの通信はコチラのサーバーのキャッシュファイルを使うようにしてます。負荷軽減ッス。さりげなくコメントを画像の中に流し込んで○コ○コ風にしてるのは内緒。

黒板ニュースリーダー(SoftBank)
YahooのAPIでニュースヘッドラインを取得して黒板風に表示します。ケータイ画面いっぱいに表示するので、横向きにするとケータイが黒板になる感じ?

妄想の監獄レーダー(SoftBank・WILLCOM)
妄想の監獄のゲームマップを表示します。アイテムとか看守とかライバルの位置を表示。プレーヤーになると自分の位置も表示されます。なんか内向的なウィジェットだな。

残量自動車道(SoftBank・WILLCOM)
電池残量を道路標識風にしただけのもの。限りなく習作っすね・・・

以下制作に至るまでの云々かんぬん

こんなことを言うのもなんですが、れさくは技術力が低いです！！（きっぱり）
言語はPHPしかまともに使えません。それも基本は何も勉強していません。
「こう書けば→こうなる！」というトライアンドエラーの積み重ね。
「これは難しそうだ→じゃあこれとこれを組み合わせて結果的に同じ効果を出そう」というラクスルプログラミングのカンだけが妙に発達しています。
それだけでよくもまああれだけのツールやサイトを作ったものです。
好奇心って大切ですね。
それはともかく。
ガジェットはJavaScriptの知識が重要になってきますが、れさくはこれまでJavaScriptを使うことはほとんどなく、あったとしても「これをパクれば→こうなる！」の繰り返しでした。今回初めて真面目に向き合ってパクリました。（結局パクってるジャン！ガボーン）

なのでこのコーナーでは、「れさくが何をどうしたか」をくどいくらいに明らかにすることによって、もっと優秀な方々から知識を提供してもらう~~釣り堀~~WEB2.0的な創造の場を目指すことにします。
アドバイス等ありましたら、電波の杜ブログのガジェットへお願いします。m(u_u)m

ウィルコム編
ソフトバンク編
ドコモ編
ＫＤＤＩ編
効率の良い開発とは編

ウィルコム編

ウィルコムホームページより
そもそもガジェットとは？
ガジェット制作

ウィルコムガジェットのベースになっているのはNetFrontのウィジェット。
そのNetFrontのウィジェット開発支援サイト
仕様書や開発ツール、エミュレーターなどが手に入ります。ウィルコムガジェットについての仕様書や開発ツールもここにあります。
TOPページから「開発者向け」ページへ進み、ユーザー登録。無料です。
登録が完了したらログイン。再度「開発者向け」ページへ進み「開発ツールダウンロード」一式をダウンロード。
開発ツール一式はこんな感じ。

contentsというフォルダには、ガジェット制作で使えるサンプルが入っています。
これをベースにしつつも、ネット上からパクってきたソースなどを組み合わせていろいろやってみました。

１．電池残量を表示するガジェットを作る

まず「DENTI1」という空のフォルダを作ります。いや別に「DENCHI1」でもいいのですが。
「DENTI1」の中にindex.htmlを作ります。
そのソースはこんな感じ。

「DENTI1」の中にconfig.xmlを作ります。
そのソースはこんな感じ。

「DENTI1」の中にガジェットで使う画像を作ります。
こんな感じ。

充電中用の画像charging.png

フル充電用の画像full.png

残量2用の画像gage2.png

残量1用の画像gage1.png

残量ゼロ用の画像empty.png

以上が下準備です。「DENTI1」の中はこんな感じ。

そうしたら次に、開発ツールの中からウィルコムガジェット用のパッケージングツールを立ち上げます。下準備で作った素材をガジェットに変換するツールですね。開発ツールの中の場所はここ。「packaging_tool\willcom\WidgetPackaging.exe」立ち上がったツールはこんな感じ。

「参照」で「DENTI1」の場所を指定します。
または「DENTI1」のフォルダをドラックアンドドロップでもOK。
その場合、ツールの上の「パッケージング対象のディレクトリ」あたりにドロップしないとだめ。どこに落としてもいいようにすればいいのに。

するとこーなる。

ここで「パッケージング」を押してもエラーになります。

「ファイル名」に好きな名前を入れます。「ggt_w_denti_1」と入れてみます。
すると「パッケージのURL」にも入力した文字に合わせるように自動で文字が入ります。
ここは気にしなくて良いってことです。

するとこーなる。

「パッケージング」を押します。
プログラムに問題がなければggt_w_denti_1.wdfとggt_w_denti_1.wgtというふたつのファイルが「DENTI1」と同じ階層のディレクトリに作られるはずです。
こいつらがガジェットです。

正確には.wgtがガジェット本体で、.wdfは本体をダウンロードさせるためのファイルです。
この二つをサーバーへアップ。
MIMEタイプを記述した「.htaccess」も忘れずに。
中身はこんな感じ。

ダウンロードさせる記述はフツーにこんな感じ。

ガジェット対応ウィルコム端末で立ち上げるとこんな感じ。

全然違う作品になっちゃってるよー！！（ガビーン！）

ソースコードを一切いじらず画像ファイル名も変えず、画像だけを差し替えるといろいろできるってことです(^^;;;

ちなみにコレは「喜久ﾁｬｰｼﾞ」(非公開^^;;)
ﾏﾂｹﾝによく似た某ｷｬﾘｱの社長｡残量に合わせて顔が険しくなる｡ﾁｬｰｼﾞすると30年前に･･･

２．電波強度を表示するガジェットを作る

まず「DENPA1」という空のフォルダを作ります。
「DENPA1」の中にindex.htmlを作ります。
そのソースはこんな感じ。

「DENPA1」の中にconfig.xmlを作ります。
そのソースはこんな感じ。

あとは電波の強さを示す画像nosignal.png、signal1.png、signal2.png、max.pngを作って、「電池」の時と同じようにパッケージングして完了。

３．位置情報取得したりRSSリーダーっぽいことをやってみたい。
そもそもガジェットなんだから最大化とかちゃんとやらないと。

ソフトバンク編

まずはじめに、ソフトバンクモバイルウィジェットはウィルコムガジェットと基本が同じです。
accessのNetFrontウィジェットの技術がベースになっているからです。

なのでウィルコムの時の「NetFrontのウィジェット開発支援サイト」にはソフトバンクモバイルウィジェットについての記述もあります。

だからこのサイトで技術を理解し、開発ツールを使いこなせば「ソフトバンクモバイルウィジェット」も作れてしまう・・・はずです。

しかしウィルコムガジェットの時はウィルコムガジェット用の独立したツールやドキュメントが用意されていましたが、ソフトバンク用のそれはありません。

だから技術力の無い私は、ここへ行くわけです。↓
MOBILE CREATION

ここはソフトバンクが一般向けに公開している技術サイトです。
端末仕様やWEBの仕様、はてはJAVAアプリ・Flash・おサイフケータイなども公開！
そのひとつにモバイルウィジェットというコーナーがあるのです。

無料のユーザー登録をすれば、エミュレーターや各種仕様書がダウンロードできます。

仕様書を読むのがめんどくさい私のような人は、こんなことをすると良いかも。

「モバイルウィジェットエミュレーター」を立ち上げる

「新規作成」を押す

「リソース所在」に「ウィルコムガジェット」の時に作ったフォルダ（例えば「ggt_w_denti_1」）をドロップ

なんかいろいろ表示されますが気にせず「作成」を押す。
すると・・・

そう、ウィルコムガジェットの時の素材でソフトバンクモバイルウィジェットが作れてしまうのです！

私が目指した「こうすれば→こうなる！」的なキャプチャ盛りだくさんのチュートリアルも用意されています。素晴らしい。
http://creation.mb.softbank.jp/column/index.html

さらにOKwebを利用した開発者コミュニティが用意されています。素晴らしい。
で、ここにRSSリーダーウィジェットを作るためのソース一式を公開している神が降臨していたので、ありがたく頂きました。
取得先RSSを妄想の監獄RSSのURLに書き換えてコンパイルすると動くじゃないですか！

さて。
先ほどはウィルコムガジェットのリソースが、そのままソフトバンクモバイルウィジェットに変換できました。
逆はどうでしょう？
つまり今回のソフトバンク向けRSSリーダーガジェットのリソースを、「ウィルコムガジェット用のパッケージングツール」に叩き込むのです。

結果は・・・config.xmlが間違っているというエラーがでました。
で、config.xmlのみ他のウィルコムガジェットと同じ書式にして再度コンパイルすると、今度は成功しました。

config.xmlだけがキャリアによって若干異なるという感じです。

ドコモ編

iウィジェットって言うんですよね?iアプリのDojaプロファイルの後継ファイルを使うんですよね?要するにJAVAの知識が必要なんですね?よし、今日のところはこれで勘弁してやって下さい。

ＫＤＤＩ編

au oneガジェットって言うんですよね?公式サイトだけが制作・提供できるんですよね?いやあ残念。(どうやらBrewの知識が必要っぽい?良かった、そんなの手に負えないよ)
いや真面目な話、オープンなガジェットの世界でこんなにクローズドな仕様でいいのかなあ？＞ＫＤＤＩ
時計程度のガジェットで３５万円、フルカスタマイズ２００万円以上の世界って一体・・・・

(C)電波の杜