「iOSアプリ 高速プロトタイピングのためのCMS構築」

1. iOSアプリ高速プロトタイピングのための
CMS構築
@ponpoko1968
第44回Cocoa勉強会関西

2. 自己紹介
•越智修司(id:ponpoko1968)
•KLab株式会社開発部
プロトタイピンググループ所属
• アプリ・サービスのプロトタイピング
• 有名アーティスト・アイドルのファンクラブアプリ開発
• 最近はデータ解析
• python,Rなど
@ponpoko1968

3. ソーシャルゲームの会社....

4. ごめんなさい
今日はソーシャルゲームの話じゃ無いです

5. 作ったもの（１）
「クリップリーダー」
電子書籍リーダー
iPad版
• 自炊PDFに特化
• evernote連携
• 段組書籍
iPhone版
(明日発売予定)
「勤怠くん」
勤怠メールを素早く送信

6. 作ったもの（２）
アーティストファンクラブアプリ アイドルファンクラブアプリ

7. 要件
–エンタメ系アプリ
• デザイン重視
• 頻繁な手戻り
–プロトタイピング
• スピード重視
• 説得力あるビジネスプラン
–そこそこ動くもの

8. 画面構成
下図のような構成が一般的
リスト表示
タップすると詳細画面へ遷移
タブ選択で画面切り替え

9. 多くの他社製アーティストアプリも画面構成が類似
UVERWORLD Jonny’sWeb madonna
(sony) (HTML5ベース) (mobile roadie)
アーティストアプリに限らず、情報閲覧系のアプリは、
下部タブで画面切り替え＋リスト表示
というスタイルが定着している

10. 割と面倒
• やりたいことは似たり寄ったりだが.....
–とくにUITableView
• データソースの定義
• デリゲート
• 背景イメージ
• UItableViewCellのデザイン..
• フレームワーク化したい
–アーティストアプリや、情報閲覧ツールとしての色彩が
強い一部のソーシャルアプリに特化すれば実現できるの
では無いか。

11. 一般的なiOSアプリの作り(iOS4.x当時)
GUI・デザイナ対応
画面Aデザイン 画面Bデザイン 画面Cデザイン
プログラマが
対応する部分 静的なデータが
メニュー画面・画面遷移ロジック 多く、顧客から
の変更要望が頻
繁に発生しがち
ビジネス・ゲームロジック
通信など
各案件で比較的
共通に使える

12. そこで
• ありがちだがコードとデザインを分離しよう
• フレームワーク化する
–JavaのDIコンテナのような考え方
–XML定義からビューコントローラ階層を動的生成

13. フレームワークの実現方法
多くのアプリの画面遷移
は、タブ選択を「根」と
したツリー構造であるた
め、再帰的にデータを記
述できるフォーマットと
して、XMLを採用。
→ガラケの着せ替えサー
図：弊社アプリの画面構成図(一部抜粋) ビスと類似
角丸の四角形が1つの画面をあらわす
＊メニュー画面の遷移先がサブメニューになって
いるなど。

14. Why XML?
• plist,json,yaml,messagePack...
• XPath式が使える(個人的に便利)
• 要件的にサーバサイドから受け取る情報がXMLが多い
–RSS
–独自プロトコル
• nxml-mode.elがあるから閲覧・編集は個人的に問題ない

15. システム構成
• OSSライブラリ
–GDataXML
• baseURLを認識させるため若干改造した
–ASIHttpRequest
• 独自クラス
–In App Purchase
–RSSリーダー機能
–会員認証・課金システム
–写真・動画ギャラリー

16. 設定例
<?xml version="1.0" encoding='UTF-8'?>
<viewController>
<!--<class>FCMenuViewController</class>-->
<class>FCHeaderedMenuViewController</class>
<classInfo> 画面の種類を指定
<title>News</title> （例はメニュー画面）
<icon>tab_icon_info.png</icon>
<header>
...
</header>
<background>
<color def="FFFFFFFF" /> 背景画像指定
<image>bg_contents.png</image>
</background>
<table>
<separator>
&tableSeparatorColor;
</separator>
<tableViewStyle>1</tableViewStyle>
<tableViewShadow>1</tableViewShadow>
</table>
<navigationBar>
...
</navigationBar>
<sections>
...
<cell>
<class>FCStandardTableCell</class>
<classInfo> 各メニュー項目の設定
...
<textLabel>
<text>News</text>
<textColor>…</textColor>
<backgroundColor>…</backgroundColor>
</textLabel>
<imageView>
<image>***.png</image>
</imageView>

17. 初期化コード
-(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary
*)launchOptions {
....
// 文字列からXMLDocumentを生成
document_ = [[GDataXMLDocument alloc] initWithXMLString:responseString
options:0
baseURL:[[[NSBundle mainBundle] bundleURL]
absoluteString]
error:&error];
rootNode_ = [document_ rootElement];
[rootNode_ retain];
// ルートとなるビューコントローラーを生成
viewControllerInfo_ = [rootNode_ nodesForXPath:@"//screenTree/viewController" error:&error];
self.tabBarController = (FCTabBarController*) [FCObjectFactory objectWithXMLNode:
[viewControllerInfo_ objectAtIndex:0]];
self.tabBarController.delegate = self;
// ウインドウにアタッチ
[self.window insertSubview:self.tabBarController.view atIndex:0];
...
}

18. CMS化出来そう
• 企画サイドで画面モックまで作ってもらえるとうれしい
–モック・プロトタイピングフェーズでは標準UI部品で足
りないところはUIWebViewで補う

19. CMSシステム構成
サーバー
<XML>
.zip
画像
<XML> 完成したらパッケージ化
してバイナリ提出
実機・シミュレータで挙
動確認
実機・シミュレータで挙
動確認
企画者・デザイナー

20. CMS 管理画面
• Cappuccino/Objective-Jを試してみました
http://cappuccino.org/

21. Cappuccinoって？
• Objective-Jで書かれたCocoa風Javascriptライブラリ
• 画面デザインにNibファイルが使える
XCode
Obj-jスクリプト
nib2cib
nib cib
framework

22. Objective-Jって？
• JavaScriptにObjective-C/Smalltalkライクな構文を追加
• JSのプリプロセッサ・トランスレータとして実装
• AppKit/FoundationKit類似のクラスライブラリが構築され
ている
// ヘッダとソースに分かれてないので、@interfaceは無い
@implementation AppController : CPObject
{
CPWindow theWindow; //this "outlet" is connected automatically by the Cib
...
}
- (void)applicationDidFinishLaunching:(CPNotification)aNotification
{
[self.splitView setPosition:200. ofDividerAtIndex:0];
[self.splitView setDelegate:self];
....
}
@end

23. Why Objective-J？
• ゲテモノ好きｗ
• Cocoaの知識で手っ取り早く構築してみたかった

24. ちなみに。。。
• Objective-ナントカファミリー
–Objective-Lua
–Objective-Modula-2
–Objective-Perl
–Objective-Caml ←これは違うみたいです
• 既存の言語に最小限の構文拡張＋OOランタイムでOOPを
導入するという考え方はそんなに悪いアイデアでは無い
と思う

25. 反省点
• フレームワーク
– storyboard出ちゃったよ。。
–動的更新には使っていけるかな。。
• Cappuccinoによる設定ツール
–Nibからの再現性は今一歩
• Atlas（GUI構築のためのMacOSXネイティブアプリ）
–一般公開されていないよう（開発が止まってい
る？）
–CSS使えない
–HTML5 CanvasベースでUI作った方が良いのか
な...

26. 最後に宣伝
大阪ソーシャルゲーム開発勉強会
6/16(土)
http://atnd.org/events/29188