Kwikを使ってプログラムレスで絵本アプリを作る
PhotoShopを持っていればkwikを使うことで絵本アプリがプログラムレスで作れるとのことで、ハイパーメディアクリエイターの西田さんが講師を務める勉強会に参加してきた。
http://atnd.org/events/40608
不覚にも事前にPhotosShopCCをダウンロードして来なかったので、勉強会中は実際に動かしながら試すことは出来なかった。。
環境構築について
まずは、PhotoShop5以上がインストールされてて、ExtensionManagerもインストールされていること。
もし持っていなければ体験版でも試せるので、ダウンロードしてみて下さい。
http://www.adobe.com/jp/downloads/
Corona SDK をインストール
Kwik をインストール
http://www.kwiksher.com/download-kwik2/
ダウンロードされたファイルを展開して、その中にあるKwik2.zxpをダブルクリックするとExtension Managerが起動してインストールされる。
PhooShopを起動して、Exstentionの中からKwik2を選択する。
Kwikのスプラッシュが表示されるので、そこからFlashの設定をします。
→Flash はブラウザにインストールされているFlash Playerのこと。Global Security Settings panelでKwikプラグインを常に許可するに設定する。
→ただし、これはやらなくても大丈夫かも。やらないと保存に失敗することがあるから設定するとか。
・Kwikのスプラッシュを閉じたら、左下の設定アイコンをクリックするとCorona SDKのパスを設定する画面が表示されるので、Corona
Simulator.appのパスをLocationに指定します。
以上で、環境が整います。
ここで、ハイパーに電話がかかってきて、勉強会中に電話にでるという自由なノリですｗｗ
実際にプロジェクトを作成します。
まずは、1ページ目を作りましょう。
PhotoShopなので、複数レイヤーが追加できますが、Kwikが背景レイヤーでページめくりのスワイプなどのイベントを判定するので、背景レイヤーをBGと言う名前で作ります。
判定に使われるレイヤーなので、ここには色んな画像とか置かずに、背景だけにとどめておくといいみたいです。
次に、タイトル用のレイヤーを追加してTITLEと言う名前をつけます。
タイトルレイヤーにはなんか適当に絵本のタイトルを書きます。
ここまでレイヤー名は英字で作って来ましたが、日本語だたり、数字で始まると後でコンパイルエラーになってしまうので、そこは注意しながら名前をつけます。
→要はこのレイヤー名が変数名になるので、そう言った制約があるってことです。
次は2ページ目
Kwikのパネルから、ページ追加のアイコンをクリックして追加することができます。
この時に、チェックボックスにチェックをつけると今開いているページをコピーして新しいページを作ります。
ここで適当な2ページ目を作ってみて、次は試しにパブリッシュに進みます。
Wkikのパネルでパブリッシュをクリックしますが、この時に画像の書き出しをするかしないかを選ぶことができます。
画像の変更があると画像を含めてパブリッシュした方がいいですが、そうではない場合は、画像のパブリッシュをしないでようにすると、パブリッシュが早く終わります。
作業によってこれを選んで効率よく進めましょう。
これで、スワイプでページめくりできる絵本のアプリが簡単に完成します。
これ以外にKwikには色々な機能があり、
・開始位置と終了位置を指定してアニメーションが出来る
・音を鳴らすことが出来る
・物理エンジンの設定 ←これがすごい！！
結構簡単に色々な事ができそうなので、子供にアプリを作るのもありかもな〜と
