本文へスキップ

Kwik App Design Book: Kwikの作業の流れ


必要な知識

Kwik は、アドビフォトショップ CS5、CS6、CC用に用意されたプラグインです。ユーザタッチに反応するインタラクティブなボタンを持った絵本アプリをiOSやアンドロイドのデバイスであるスマホやタブレット向けに作成するためのツールです。PSDファイルのレイヤー情報と連携するアニメーション、ボタン、ビデオ、音声などの情報を追加し、アプリとして動作させます。基本的な語句について簡単に解説しておきます。

アドビフォトショップ

アドビ社の写真を編集・加工するソフト

インタラクティブ

ユーザ操作に反応するボタンやサウンド再生などの機能を持つこと

iOS

アップル社が提供する iPhoneやiPadのOS(オペレーションシステム)

アンドロイド

Google社が提供するスマートフォンのOS(オペレーションシステム)

デバイス

スマートフォンやタブレット

PSDファイル

アドビフォトショップのファイル形式

Kwikの仕組みと作業の流れ

Kwikの作業の流れは、Kwikのサイトで観ることができる下記のYoutubeのビデオをご覧ください。


http://www.youtube.com/watch?v=jVq3fiwP2tQ

ビデオの内容は、下記の流れとなっています。(このビデオのKwikのパネルの表記は英語ですが、Kwikは現在日本語表記のものが利用可能です)

  1. Kwikのパネルから新規プロジェクトを作成。作成するページのサイズを指定するために、デバイスとして、iPad、iPhone、iPad3(Retina)、アンドロイドのタブレットのどれかを選択します。
  2. Kwikで新規ページ作成を行う。普通のフォトショップのページが作成されます。
  3. フォトショップのページにレイヤーを追加して、画像を配置。
  4. レイヤーを選択して、Kwikのパネルで機能付与
  5. 配置した画像のレイヤーを選択することで、そのレイヤーにアプリとしての機能を付与・関連付けしていきます。

 

 例 ボタンの画像が配置されているレイヤーを選択。
Kwikのパネルから、インタラクティブのツールボックスから、ボタンのツールを選択 ボタン設定のダイアログで設定を行う。
例 ボタンを押すとページ遷移する

  1. 4の作業を繰り返して、アプリとしての機能をレイヤーに付与していく。
  2. Kwikのパネルからエクスポート(パブリッシュ)を行い、プログラムコードと画像などの素材を出力する
  3. 出力されたプログラムコードと画像は、Corona シミュレータで、プログラムコードのmain.luaファイルを開き、動作を確認する。
  4. Corona シミュレータから、デバイスで動作するアプリケーションのビルドを行う。
  5. ビルドされたアプリをデバイスにインストールして動作確認を行う。

新規プロジェクト

フォトショップで画像を配置

Kwikのパネルで機能を付与 アニメーション

Kwikのパネルで機能を付与 ページの移動

Corona SDKでスマホのアプリにする

スマホにインストールする。

ビルド

デバイスで動作するアプリケーションは、プログラムコードと画像ファイルなどの素材を含み、デバイスのコンピュータで処理できるバイナリデータのファイル形式である必要があります。このバイナリのファイルを作成する処理がアプリケーションのビルドです。


Corona SDK Simulator (シミュレータ)

スマートフォンで動作するアプリケーションを開発するときに、パソコン上でそのアプリを動作(シミュレート)させるプログラム


フォトショップのレイヤー

フォトショップ上で各画像を部品として配置するために階層としてのレイヤーを利用します


アプリとしてパブリッシュ

フォトショップ上でKwikで作業した内容をスマートフォンのアプリのプログラムを書き出すことをエクスポートまたはパブリッシュと呼びます。Photoshopで作業した内容は、Photoshopのファイル形式の .PSDファイルと.Kwkのファイルに保存されます。パブリッシュすると、build/フォルダにプログラムコードとプログラムで使用される画像ファイルが出力されます。


build/フォルダに出力されたプログラムコード

Kwikアプリの画面遷移

PSDファイル1、PSFファイル2、PSDファイル3にボタンやアニメーションを配置して、どうリンクしているかについて、簡単な例を用いて解説します。


各PSDファイルの”タイトル”, “ボタン”, “アニメーション”は、フォトショップのレイヤーの画像となっています。レイヤーの画像を指定して、Kwikのツールボックス・ダイアログのパネルから、動作を指定します。画面がどのように遷移していくか、ボタンが押されたときに何をさせるかといった関連性を複数のページから構成されるアプリを作成する場合には考慮してください。画面繊維の設計です。