https://www.facebook.com/TonosamaLabo

1. Kwik勉強会
㉝知育アプリを作ろう！
Kwikで作るデジタル絵本その２

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

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

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

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

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

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

8. こまったときは？
• こまったときは、ホームページを見よう！
– Learn
Kwik
2
• http://www.kwiksher.com/learn-kwik2/
– Tutorials
• http://www.kwiksher.com/tutorials-kwik/
– 日本語チュートリアル
• http://mobilemedia.daynight.jp/kwik

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

31. 動きをつけてみよう
kwikを使ってみよう

32. キャラを追加しよう
• Animal1をコピーして
Animal5までつくろう

33. 回転させよう！
• Animal1のレイヤーを選択
した状態で、Rotation
Widgetをおそう！
• ウィンドウが出てくるので
Createをおそう！

34. ドキドキさせよう！
• Animal2のレイヤーを選択
した状態で、Pulse Widget
をおそう！
• ウィンドウが出てくるので
foreverをえらんだ後に、
Createをおそう！

35. バウンスさせよう！
• Animal3のレイヤーを選択
した状態で、Pulse Widget
をおそう！
• ウィンドウが出てくるので
foreverをえらんだ後に、
Createをおそう！

36. パチパチさせよう！
• Animal4のレイヤーを選択
した状態で、Blink Widget
をおそう！
• ウィンドウが出てくるので
foreverをえらんだ後に、
Createをおそう！

37. シェィクさせよう！
• Animal5のレイヤーを選択
した状態で、Shake Widget
をおそう！
• ウィンドウが出てくるので
foreverをえらんだ後に、
Createをおそう！

38. まちがえたら・・・？
• コンポーネントを選択して
ダブルクリックすると再編
集できる！（名前は変えら
れないので注意＞＜）
• いらなくなったら、ゴミ箱を
押したら消せる！

39. うごかしてみよう
• いろいろ動く！
• ウィンドウの値を変えてみ
よう！

40. 動きに反応させよう
kwikを使ってみよう

41. いどうできるようにしよう
• Animal1のレイヤーを選択
した状態で、Drag Object
をおそう！
• ウィンドウが出てくるので
Createをおそう！

42. ボタンにしてみよう
• Animal5のレイヤーを選択
した状態で、Add Buttonを
おそう！
• ウィンドウが出てくるので
CommonのReload Pageを
選んで、Createをおそう！

43. うごかしてみよう
• 左上のを自由に動かせ
る！
• 右下のを押すとリセットす
る！

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

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

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

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

48. ほかにも
• ほかにもいろいろできる
みたい！
• チュートリアルで挑戦して
みよう！
日本語チュートリアル
http://mobilemedia.daynight.jp/kwik

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

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

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

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