Widget開発のよもやま話です。
HTMLで作成したLightsOutを移植するーしかも言語もHTML&Javascriptということで移植ですらないーということで軽くみていましたが、思った以上に手こずりました。
コンソールでエラーということはわかるのですが、原因が分かりません。
普通のJavascriptにしてみてSafariで実行したらうまくいくし。。。
１時間ぐらい悩んだ結果、ソースに全角スペースがあることがわかりました。
全角スペースを取り除いたら、いままでのエラーがウソの様に動き始めました。
そこで対症療法その１
Javascriptを作成していて訳のわからないエラーに遭遇したら
→全角スペースを疑え
また、基本的にデバッグモードで開発していたのですが、⌘+Rでリロードしても反映しないことがありました。Widgetはシュリンクしてあたかもリフレッシュしたようになるのでちょっと気がつかないかもしれません。
wdgtバンドルを一旦デスクトップなどに置き、ダブルクリックでインストールを試してみると、有効なウィジェットではないのでインストールできないとのメッセージが出てきました。
そこで対症療法その２
⌘+Rが効かなかったたら
→インストールエラーを疑え
xillionの場合haはDefault.pngを変更した際に拡張子が落ちでDefaultとなってしまいWidgetとしてインストールできませんでした。
Widgetではalertが使用できません。正確にはユーザーに対するalertには使えません。
それは alertがコンソールに書かれるからです。
またInputboxよりもWidgetが前面にきてしまうので、これも使用しない方がよいでしょう。
要はインターフィスがHTMLライクではできないと思いましょう。すべてグラフィカルにする必要があります。
もともとのLightsOut3.htmlがjavascriptではじめて作成したゲームということで、あまりグラフィカルではありませんでした。
今回ウィジェットに移植するにあたりもっとも時間がかかったのがGUI化の部分です。
以前のゲームボードはTDエレメントでしたが、今回はTDエレメントの背景画像を設定する要にしています。背景画像といっても単色の3Dっぽいタイルです。
もっと具体的な画像にすると絵合わせパズルみたいになると思いますが、タイトルがLightsOutなのでそこまではしませんでした。
HTMLではボタンは単なるAタグでしたが、今回はボタンにしています。
ボタンは無地としてカーソルを当てると、そのボタンの機能をポップアップさせています。
ボタン表面が狭く文字を載せるのをあきらめた結果なのですが、Widgetは表面に文字入りのボタンをつけるべきではないようです。小さなアイコンが良いでしょう。
HTMLではゲームスタート時にinputboxでシャッフルする回数を入力してもらっていましたが、今回はシャッフル回数をレベルとして固定化させました。
レベルは３種類。Bananaが６回、Albatrossが９回、Wooperlooperが１２回のシャッフルです。そしてこのレベルは裏面で選択が可能です。
とりとめのない名前をつけていますが、実は文字数がシャッフル数となっています。
誰か気づくかな。
HTMLでは解答の表示方法をDivタグにダイナミックに書き込んでいました。
Widgetでも同じ仕掛けですが、書き込むべき場所がありません。
そこでWidgetのexamplesフォルダにあったStreacherを使用して、解答時に表面を引き延ばしてそこに解を示すようにしています。
自分でいうのもヘンですが、なかなかなインタフェイスです。