Kwik勉強会
㉜知育アプリを作ろう！
Kwikで作るデジタル絵本

自分の書いたイラストで
デジタル絵本が作りたい！
でも、なんだか大変そう・・・

ここがたいへん！
• アプリの作り方がわからない！どうやってつく
ればいいの？
• 開発環境にお金がかかりそう！
• そもそも、プログラムわからない＞＜
↓
でも、Photoshopくらいは使える！
（だって、デザイナーだし・・・）

なんとかなるよ！
• Photoshopだけで、デジタル絵本が作れる！
• プログラムできなくても使える！（できたらさら
に夢が広がる）
• しかも、対応環境が多い！
• 無料で始められる！
• MacでもWindowsでも開発できる！（Macのほ
うが有利）

kwik
• KWIK2
– http://www.kwiksher.com/

Kwikについて
• プログラム不要！デザイナーさんでも安心！
• 無料で商用利用可能（機能制限あり）
• デジタル絵本に特化
• Photoshop用プラグイン
• Coronaのエンジンを利用
• 物理エンジン搭載（Coronaだし！）
• 効果音やBGMの再生も可能（Coronaだし！）
• iOSやAndroidに対応したアプリが作れる！
（Coronaだし！）

デメリット
• PhotoshopCS5以上が必要＞＜
• 端末固有の機能やUIが使えないので、本格
的なアプリ作成とはちょっと違う
• 日本語ローカライズされていない。
• レイヤーの命名規則など若干めんどくさい
• 無料だと機能制限あり（６ページまでしか作れ
ない）

こまったときは？
• こまったときは、ホームページを見よう！
– Learn
Kwik
2
• http://www.kwiksher.com/learn-kwik2/
– Tutorials
• http://www.kwiksher.com/tutorials-kwik/

インストールしてみよう！
kwikを使ってみよう
※Macの場合を解説します。Windowsは自分でがんばってください・・・。

Photoshop①
• KwikはPhotoshopのプラグ
インなので、Photoshopが必
要！
• バージョンは、CS5以降が
必要（エレメンツは不可）
• 体験版があるので持ってな
い人はダウンロードしてみよ
う！
• AdobeIDの作成（無料）が必
要なので、持ってない人は
登録しよう！
h(ps://crea/ve.adobe.com/products/photoshop

Photoshop②
• KwikはPhotoshopのプラ
グインなので、
ExtensionManagerも必
要！
• PhotoshopCCを使ってい
る人は、一緒にダウン
ロードしよう！
h(ps://crea/ve.adobe.com/products/extension-­‐
manager

CoronaSDK①
• Coronaのホームペー
ジからダウンロード
• 無料会員登録が必要
なので、登録しよう！
http://www.coronalabs.com/

CoronaSDK②
• Macの場合は、Downloadを押
すとdmgファイルがダウン
ロード出来る！

CoronaSDK③
• dmgをダブルクリックすると、
規約が表示されるので納
得したらAgreeをおそう！
• オレンジ色のフォルダを、
青いフォルダにドラッグしよ
う！

Kwik①
• kwiksherのホームページ
を開こう！
• FREE TRIALを押してみよ
う！
• 名前とメールアドレスを入
力すると、ダウンロード
ページにいける！
• インストーラーをダウン
ロードしよう！
http://www.kwiksher.com/

Kwik②
• zipを展開するとzxpが出て
くるのでダブルクリック！
• ExtensionManagerが起動
するので、プラグインをイ
ンストールしよう！

Kwik③
• Photoshopを起動しよう！
• メニューのウィンドウ→エ
クステンションにKwik2が
増えてる！
• Kwik2を選ぶとスプラッ
シュが表示される！
• まずは、FlashのSetupを
おそう！

Kwik④
• ブラウザに設定マネー
ジャが表示されるので、グ
ローバルセキュリティー設
定を右の図を参考にして
設定しよう！
• 編集→追加する→フォル
ダーの参照を選ぼう！
• これをやらないと、コード
とかが保存されない時が
あるから注意！

Kwik⑤
• Kwikのスプラッシュを閉じ
て、左下の設定アイコンを
おそう！
• 右の図を参考に、Corona
のパスを設定しよう！

インストールまとめ
• Photoshop
– CS５以降をインストールする
– ExtensionManagerもインストールする
• Corona
– インストールする
• Kiwik
– インストールした後、flashとCoronaを設定する

デジタルブックをつくろう！
kwikを使ってみよう
※Macの場合を解説します。Windowsは自分でがんばってください・・・。

プロジェクトを作ろう！①
• いちばん左のボタンを押
して、New Projectを作ろ
う！
• Nameにプロジェクト名を
入れよう！（英語でスペー
スとか変なの使わない）
• New iPad、横を選ぼう

プロジェクトを作ろう！②
• 新しいファイルが開かれ
る！（Page1.psd）
• プロジェクトは、書類
→kwik→プロジェクト名の
フォルダに保存される！
• 作業を中断したいときは、
psdを保存してPhotoshop
を閉じよう！

再開するには…？
• まんなかのボタンを押して、
プロジェクトを読み込も
う！
• プロジェクトのフォルダの
中に、.kwkという拡張子の
ファイルがあるからそれを
選ぼう！

パネルの説明
• プロジェクトを作成するとパ
ネルにいろんな機能が表示
される！
• 一番上の段は、タブになっ
ている！青い点が選択中の
しるし！
• 真ん中がプロジェクトで、
PUBLISHを押すと書き出し
ができる！
• 一番下のアイコンはオプショ
ンになってる！青がONで灰
色がOFF

ページを作ろう
kwikを使ってみよう
※Macの場合を解説します。Windowsは自分でがんばってください・・・。

背景を作ろう①
• 一番下のレイヤーが背景
レイヤーになります。
• ページめくりの当たり判定
は、背景レイヤーにつきま
す。
• レイヤー名は、半角英語
で、スペースや日本語は
禁止。数字は使えるけど、
数字から始まる名前は禁
止。記号とかも使えませ
ん。

背景を作ろう②
• とりあえず、レイヤー名を
BGにして、背景を書いて
みましょう！

タイトルを作ろう
• タイトルロゴを作りましょ
う！
• レイヤーを新規作成して、
TITLEという名前にします。
• テキストでタイトルを作り
ましょう。

なまえをかこう
• おなじように名前のレイ
ヤーを作りましょう！
• NAMEというレイヤー名に
します。
• テキストで自分の名前を
入れます。

次のページを作ろう
• TOOLSETの一番左のを選
ぼう！
• Add new pageのアイコンを
押してページを作ろう！
• ダイアログにはページのファ
イル名をいれよう！今回は
Page2にしよう！
• チェックボックスをつけてお
くと今のページの状態がコ
ピーされるのでつけておこ
う！

ページの情報
• 左側の書類みたいのを押
すと、プロジェクトの中の
ページ一覧がでる！
• ページをクリックするとそ
のページのPDFを編集で
きます。

いらないのをけそう
• とりあえず、TITLEとNAME
はいらないのでレイヤー
ごと削除しよう！

キャラを追加しよう①
• 素材を開いて、コピーしよ
う！

キャラを追加しよう②
• レイヤーの名前は、
Animal1にしよう！

レイヤーの名前
• レイヤー名は、半角英語で、スペースや日本
語は禁止。数字は使えるけど、数字から始ま
る名前は禁止。記号とかも使えません。
• ページの中に、同じ名前のレイヤーがあって
はいけません。
• レイヤーの名前は、最終的にプログラムの変
数名になります。

シミュレーターで動かそう
kwikを使ってみよう
※Macの場合を解説します。Windowsは自分でがんばってください・・・。

Publishしよう
• 真ん中のPUBLISHをおそ
う！
• 一番下の真ん中のやつが
青くなってることを確認し
よう！（青くなってないと、
画像が書き出しされない
＞＜）
• ダイアログが出たら成
功！

失敗したら・・・
• レイヤーの名前が日本語
だったりすると失敗する！
• Closeをおしてやりなおそ
う！

時間短縮！
• ちなみに、下のほうのま
んなかのやつをOFFにす
ると、画像の書き出しをし
なくなるので、はやく
PUBLISHできる！
• なので、場所だけ直した
いとかの時は、OFFにしよ
う！（逆に、うまくいかな
かったらONでやりなおそ
う！）

Coronaを起動しよう
• PUBLISHがうまくいくと、
CoronaSDKが起動する！
• 左から二番目の再生ボタ
ンをおそう！
• ファイル選択画面になる
ので、プロジェクトの保存
先のbuildフォルダの、
main.luaをえらぼう！
• 下の方の端末はiPadにし
よう！

できた！
• うまくいけば、シミュレー
ターが起動する！！！
• フリックの動きで、次の
ページに移動する！
• やった完成！

ほかにも・・・
kwikを使ってみよう
※機能だけなんとなくしょうかいします

アニメーション！
• 開始と終了の位置を指定
したアニメーションなどが
できます！

おとがでたりする！
• ボタンを設定したり、音を
鳴らせます！

物理エンジン！
• ボタンを設定したり、音を
鳴らせます！

ほかにも
• ほかにもいろいろできる
みたい！
• チュートリアルで挑戦して
みよう！
Tutorials
http://www.kwiksher.com/tutorials-kwik/

まとめ
• Kwikたのしい！かんたんに絵本が作れる！
• カッコイイのが出来たら、実機転送してみよ
う！Coronaの書籍とかを参考にやってみよ
う！
• 極めるといろんなことができるから挑戦しよ
う！プログラムとかもかけるみたい！

とのさまラボ！
• 勉強会に参加した人どうしのコミニュティがほしい！
勉強会の開催日時の告知がほしい！
という意見をみなさまからいただいたので、
コミニュティを作成しました！
• 毎週木曜日は、もくもく勉強会も
開催しています！
ぜひ「いいね！」をお願いします！
h(ps://www.facebook.com/TonosamaLabo

「もくもく」勉強会
• 毎週木曜日に、「もくもく」勉強会やってます！
• 場所は新宿！facebookページからお申し込みください！
h(ps://www.facebook.com/TonosamaLabo

おわり（？）
主催（共同開催）：
株式会社 gooya
http://www.gooya.co.jp/
メドレー株式会社
http://www.medley.co.jp/
講師：西田 寛輔 (Tonosamart)
http://www.facebook.com/tonosamart

緊急告知
キンキュウコクチ

今年の夏休みは何してますか？

絵本作るしかないでしょ！

第1回!トレモ郎の
カジュアルゲーム＆
デジタル絵本コンテスト
2013年7月1日∼8月31日
締め切りまでに、アプリの提出が必要です。
募集期間（予定）

アプリの所有権を有しているチーム及び個人
※応募書類および問い合わせなどの対応が日本語で行えること
応募資格（予定）
スマートフォンで動作するカジュアルゲームまたはデジタル絵本で
2013年6月1日時点で未発表のもの
過去に作成したアプリの改造、続編、過去に発表した絵本のデジタル版などの応募は可能です。
応募条件（予定）

まずはエントリーしよう！

コンテストの詳細などをお伝えします！
http://cts.sc/to
まずはエントリーをお願いします！
※スポンサー企業募集しています！お問い合わせ下さい！