ガジェットの杜


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

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

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

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

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



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


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

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

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

効率の良い開発とは編

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

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

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

同じNetFrontがベースなので「ソフトバンクのをウィルコムに流用する」ことも、「ウィルコムのをソフトバンクに流用する」ことも可能です。

今回はどっちが効率いいの?ということと、その具体的な方法をつらつら書いて行きたいと思います。
その方法が技術的に高度なの?とか、設計思想的にそもそも正しいの?とかそんなツッコミはご容赦。
もうわけわからないよ。
動けばいいんですよ、動けば。

で、開発の効率性から言えば、「ソフトバンクのをウィルコムに流用する」のが良いかと思います。
理由は、マーケットの大きいソフトバンクを先に押さえて、その後にそのリソースをウィルコムに流用する、というのが王道かなと。
もうひとつの理由は開発環境ですかね。
やはりソフトバンクのほうが充実してます。ツールとかエミュレーターとか細かい部分で。
ネット上の情報をパク・・・ゲフンゴフン参考にするにしても、ソフトバンクのほうが情報が多いですし。

という訳で先日、まずは一気に4つほどソフトバンク向け「モバイルウィジェット」をデッチ上げました。

今回はこのリソースをどうやってウィルコムに流用するか、ということを試したいと思います。

まず、そもそもウィルコムのエミュレーターがどうなっているのかというところからおさらい。
こんなヤツです。
1
なんかあれですね、スーパーマリオ3の太陽ですね。
怖かったですよね。
トラウマですね。

それはともかく。

こうやってエミュレーター自身が、一種のガジェットとしてPCの画面上に鎮座します。

作ったガジェットは、この太陽の上にドロップします。
すると急降下、じゃなかった作ったガジェットが立ち上がります。


めんどくさいので、まずソフトバンク向けに作ったガジェットを一切手を加えず太陽に乗せてみます。
ぱらチューブと黒板ニュースリーダーでレッツドロップ。
2

ぱらチューブの場合
3
最大化・出力バッファって・・・なんか変なことになっています(汗

黒板ニュースリーダーの場合
4

おお、立ち上がりました!
では最大化してみます。
5
ウィルコムとしての画面サイズが取得できないのでこんなことになってますが、つまり正しく動作しているということです。

ちなみにソフトバンクのエミュレーターの場合、仮想画面が立ち上がってその中で動作します。
(それが普通なのですが・・・)
ウィルコムの場合はこのようにPCの画面に乗ってしまうのですが、これはこれで「PC用ガジェットとして使える」という考え方もできます。レッツポジティブ。


ではこんどはちゃんとウィルコム向けパッケージングツールにかけて、ガジェットを作ってみます。
先に書いたように、ソフトバンク向けのリソース(config.xmlとかhtmlとか画像とかの集合フォルダ)をそのまま放り込むと、config.xmlが間違っているというエラーが出ます。
なのでウィルコム向けconfig.xmlに書き直す必要があります。

ちなみにこう書くと、まるでソフトバンクとウィルコムのconfig.xmlが全然違うように聞こえますが、これはそれぞれのキャリアについてれさくがそれぞれパクってきたからです。
ちゃんとNetFrontのガジェットを理解してXMLを書けば、どっちのキャリアでも使えるようになる・・・・のかもしれません。

さて具体的に何をどうするか。

まずこれがウィルコムのパッケージングツールを通った実績のあるconfig.xml


これがソフトバンク向けのconfig.xml


まずは怪しい
<widget width="150" height="88" xmlns="http://www.w3.org/ns/widgets" id="ggt_w_pt_1" version="1.0"> を
<widget xmlns="http://www.w3.org/ns/widgets" id="ggt_w_pt_1" version="1.0" width="200" height="80" start="index.html"> に書き換えてみたのがこれ。


結果はNG。
よく見ると「index.html」と書いた箇所が2つになってます。
よし、後ろにある
<content src="index.html" type="text/html" />
を消してみよう。

こうなります。


ウィルコム向けパッケージングツールを通りました。
ばんざーい。

んで、できたのがこれ。
6

太陽に落としてみます。

7
起動しました。ばんざーい。

最大表示しました。
8
でっかくなりました。ばんざーい。

しかしOnClickや単純なAタグが一切利きません。
エミュレーターの仕様?
まだ何か書き方がおかしい?
ガジェットの関数をちゃんとウィルコム用に最適化してないから?(汗

ホントはクリックすると通信してパラパラするのですが。

そういえばガジェットの左上に必ずマウスのカーソルがありますね。
これもガジェットの作り方がおかしいのか、それともエミュのバグなのか・・・・

とか思いながらそのカーソルを、本当のマウスカーソルに当てたりしてたら、ふとキーボードの上下キーに指が触れました・・・
9
こ、こいつ動くぞ!!

そうです、このカーソルは、エミュレーターとしてのカーソルだったのですね。
まぎらわ・・・・いやたぶん取説にちゃんと載ってたんだと思います(汗

クリックしたい場所の上でエンターキー。
10 パラパラが始まりました♪

拡大再生もできます♪
11

ちなみにウィルコムガジェットのエミュレーターにも仮想画面はあります。
12
こうやって複数アプリの起動を試すこともできるみたいです。
ただ、例のカーソルは仮想画面の中を飛び回ることはできません。
ひとつひとつのガジェットの中でのみ表示されて動作しています。

という訳で、ソフトバンク向け4作品をウィルコム向けに変換してみました。
ぱらチューブと妄想の監獄はそのままで行けそうなのでケータイ向けガジェットの杜にアップしました。

黒板はガジェット側でウィルコム用の画面サイズ取得を組み込む必要があるので保留(汗

残量自動車道も動作しませんでした。でもこれはエミュレーターだからだと思います。
エミュレーターに電池残量とか電波強度を擬似的に設定する項目が無いからです。
このあたりはソフトバンクのがしっかりしてるかも。
なので残量自動車道もアップしました。

ちなみに何が起きても自己責任でお願いします。
そもそも実機の検証もしていません。うは。
聞いた話だと、公式のガジェットであっても、使いまくっていたら端末が不安定になることもあるとか・・・

アドバイス等ありましたら、電波の杜ブログのガジェットへお願いします。m(u_u)m

(C)電波の杜