1. Storyboard API
［Corona SDK］
CoronaSDK 勉強会 in 渋谷
2012.02.01
@keygx

2. 自己紹介
鍵山 征彦（かぎやま ゆきひこ）
・デザイナ兼エンジニア
・スマートフォン・アプリ開発歴 2年弱
・Corona SDK歴 約10ヶ月
Twitter: @keygx
blog: http://keygx.blogspot.com
apps: http://keygx-app.appspot.com

3. keygx apps
「iPhone」 Corona SDK
…
「Android」
…

4. はじめに
Storyboardは
Corona SDKのイチAPIですが
わりかしCorona SDKでの
アプリ開発の大枠に
関係するお話かも

5. Storyboardって何？
iOS 5 SDKの「Storyboard」ではありません
Corona SDKの「Storyboard」です
http://developer.anscamobile.com/content/storyboard

6. Storyboardとは？
Director Classが担っていた
画面（scene）を管理するAPI
※Director Classというのはそういう名前のライブラリです
※画面遷移のあるアプリでは必須（＝全てのアプリに必須）
以前「Director Class 入門 [Corona SDK]」というブログを書きました
http://keygx.blogspot.com/2011/09/director-class-corona-sdk.html

7. まぁぶっちゃけアレですね
これまでサードパーティのライブラリに
頼っていた機能が標準で組み込まれたので
これからは「Storyboard」使ってね
ということらしい
※Corona Simulatorの「New Project」で作成される
サンプルコードもStoryboard使っていますね
※Director Classもまだまだ使えるので、選択肢が増えた程度に
思っていますが…

8. 何ができるのか？
・画面遷移のコントロール
※エフェクト付
・画面のライフサイクルに
合わせた処理の記述
※Director Classにあった画面間の値の受け渡しはないっぽい

9. メソッド
・storyboard.getPrevious()
・storyboard.getScene()
・storyboard.gotoScene()
・storyboard.newScene()
・storyboard.purgeAll()
・storyboard.purgeScene()
・storyboard.removeAll()
・storyboard.removeScene()

10. エフェクト
・storyboard.gotoScene(sceneName [, effect, effectTime])
fade zoomInOutFadeRotate
zoomOutIn fromRight (over original scene)
zoomOutInFade fromLeft (over original scene)
zoomInOut fromTop (over original scene)
zoomInOutFade fromBottom (over original scene)
flip slideLeft (pushes original scene)
flipFadeOutIn slideRight (pushes original scene)
zoomOutInRotate slideDown (pushes original scene)
zoomOutInFadeRotate slideUp (pushes original scene)
zoomInOutRotate crossFade

11. サンプルファイル
サンプルを見てみよう！
ansca / Storyboard-Sample
https://github.com/ansca/
Storyboard-Sample

12. サンプルファイル 構成
Storyboard-Sampleのluaファイル

13. サンプルファイル 概要
・main.lua
scene1.luaを読み込んでいるだけ
※タブUIがありますが、見せかけだけです(使い回し？)
・scene1.lua scene4.lua
基本的に同梱されている「scenetemplate.lua」に沿って
記述されています
以下ポイントとなる部分のみご紹介します

14. サンプルコード 注目点①
・main.lua
--[[一部抜粋--]]
local storyboard = require "storyboard"
storyboard.gotoScene("scene1")
mainでは最初の画面を指定しているのみ

15. サンプルコード 注目点②
・scene1.lua scene4.lua
--[[一部抜粋--]]
function scene:createScene(event)
function scene:enterScene(event)
function scene:exitScene(event)
function scene:destroyScene(event)
シーンのライフサイクル

16. サンプルコード 注目点③
・scene1.lua scene4.lua
--[[一部抜粋--]]
function scene:createScene( event )
local screenGroup = self.view
image = display.newImage( "bg.jpg" )
screenGroup:insert( image )
end
ディスプレイ・オブジェクトをグループ化

17. サンプルコード 注目点④
・scene1.lua scene4.lua
--[[一部抜粋--]]
function scene:enterScene( event )
storyboard.purgeScene( "scene4" )
end
前の画面をパージ

18. LTなんで、かなりざっくりですが…
main.luaは最初に表示したい画面を指定
アプリとしてのメインの画面はサンプルでいう
scene1.lua
実際のアプリでは、
メイン画面、設定画面、About画面などを
ゲームなら複数のシーン等を
遷移できるようにしていきます

19. でも
こんな説明だけじゃ解らないですよね。
サンプルもイマイチだし…

20. というわけで
サンプルを公開します
以前勉強会でつくった「Pac-Pac Droid」というアプリを
Storyboard APIを使ったものにしました
https://github.com/keygx/PacPacDroid
他にも
・Physics
・collision
・movieclip
とか

21. まとめ①
"Hello World"の次は
Storyboard API
（もしくはDirector Class）
を勉強するのが
おすすめです！

22. まとめ②
なんとなくでも
Corona SDKでのアプリ開発の
イメージがわいてきた！
と思っていただけたなら
幸いです (^^)/

23. 参照情報
◆APIリファレンス
http://developer.anscamobile.com/content/storyboard
◆ansca / Storyboard-Sample
https://github.com/ansca/Storyboard-Sample
◆Common Storyboard API Questions
http://blog.anscamobile.com/2011/11/common-storyboard-
api-questions/
◆Introducing the Storyboard API
http://blog.anscamobile.com/2011/11/introducing-the-
storyboard-api/

24. 質問は日本コロナの会へw
◆メーリングリスト
http://groups.google.co.jp/group/coronaja/subscribe
◆Twitter
http://twitter.com/JapanCoronaGrp
情報共有のためにも
どんどん質問しちゃえば
いいと思うよ！

25. ご静聴ありがとうございました