Embed Size (px)
DESCRIPTION
「iOSアプリ 高速プロトタイピングのための CMS構築」
Citation preview
iOS アプリ 高速プロトタイピングのためのCMS 構築
@ponpoko1968第 44 回 Cocoa 勉強会関西
自己紹介• 越智 修司 (id:ponpoko1968)• KLab 株式会社 開発部 プロトタイピンググループ所属• アプリ・サービスのプロトタイピング• 有名アーティスト・アイドルのファンクラブアプリ開発• 最近はデータ解析• python,R など
@ponpoko1968
ソーシャルゲームの会社 ....
ごめんなさい今日はソーシャルゲームの話じゃ無いです
作ったもの（１）「クリップリーダー」 電子書籍リーダー
• 自炊 PDF に特化• evernote 連携• 段組書籍
「勤怠くん」勤怠メールを素早く送信
iPhone 版( 明日発売予定 )
iPad 版
作ったもの（２）
アーティストファンクラブアプリ アイドルファンクラブアプリ
要件
–エンタメ系アプリ•デザイン重視•頻繁な手戻り
–プロトタイピング•スピード重視•説得力あるビジネスプラン
–そこそこ動くもの
画面構成下図のような構成が一般的
リスト表示タップすると詳細画面へ遷移
タブ選択で画面切り替え
多くの他社製アーティストアプリも画面構成が類似
アーティストアプリに限らず、情報閲覧系のアプリは、下部タブで画面切り替え＋リスト表示
というスタイルが定着している
madonna(mobile roadie)
Jonny’sWeb(HTML5 ベース )
UVERWORLD(sony)
割と面倒• やりたいことは似たり寄ったりだが .....
–とくに UITableView•データソースの定義•デリゲート•背景イメージ•UItableViewCell のデザイン ..
• フレームワーク化したい–アーティストアプリや、情報閲覧ツールとしての色彩
が強い一部のソーシャルアプリに特化すれば実現できるのでは無いか。
GUI ・デザイナ対応
プログラマが対応する部分
画面 A デザイン 画面 B デザイン 画面 C デザイン
メニュー画面・画面遷移ロジック
ビジネス・ゲームロジック通信など
静的なデータが多く、顧客からの変更要望が頻繁に発
生しがち
各案件で比較的共通に使え
る
一般的な iOS アプリの作り (iOS4.x 当時 )
そこで• ありがちだがコードとデザインを分離しよう• フレームワーク化する
–Java の DI コンテナのような考え方–XML 定義からビューコントローラ階層を動的生成
フレームワークの実現方法多くのアプリの画面遷移は、タブ選択を「根」としたツリー構造であるため、再帰的にデータを記述できるフォーマットとして、 XML を採用。
→ ガラケの着せ替えサービスと類似
＊メニュー画面の遷移先がサブメニューになっているなど。
図：弊社アプリの画面構成図 ( 一部抜粋 )角丸の四角形が 1つの画面をあらわす
Why XML?• plist,json,yaml,messagePack...• XPath 式が使える (個人的に便利 )• 要件的にサーバサイドから受け取る情報が XML が多い
–RSS–独自プロトコル
• nxml-mode.el があるから閲覧・編集は個人的に問題ない
システム構成• OSS ライブラリ
–GDataXML•baseURL を認識させるため若干改造した
–ASIHttpRequest
• 独自クラス–In App Purchase–RSS リーダー機能–会員認証・課金システム–写真・動画ギャラリー
<?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>
設定例
画面の種類を指定（例はメニュー画面）
各メニュー項目の設定
背景画像指定
初期化コード-(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];...}
CMS 化出来そう• 企画サイドで画面モックまで作ってもらえるとうれしい
–モック・プロトタイピングフェーズでは標準 UI 部品で足りないところは UIWebView で補う
CMS システム構成
企画者・デザイナー
サーバー
<XML>
<XML>
.zip画像
完成したらパッケージ化してバイナリ提出
実機・シミュレータで挙動確認
実機・シミュレータで挙動確認
CMS 管理画面
• Cappuccino/Objective-J を試してみました
http://cappuccino.org/
Cappuccino って？• Objective-J で書かれた Cocoa風 Javascript ライブラリ• 画面デザインに Nib ファイルが使える
nib cibnib2cib
frameworks
Obj-j スクリプト
XCode
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
Why Objective-J？• ゲテモノ好きｗ• Cocoa の知識で手っ取り早く構築してみたかった
ちなみに。。。• Objective- ナントカ ファミリー
–Objective-Lua–Objective-Modula-2–Objective-Perl–Objective-Caml
• 既存の言語に最小限の構文拡張＋ OO ランタイムで OOPを導入するという考え方はそんなに悪いアイデアでは無いと思う
←これは違うみたいです
反省点• フレームワーク
– storyboard出ちゃったよ。。–動的更新には使っていけるかな。。
• Cappuccino による設定ツール–Nib からの再現性は今一歩
• Atlas （ GUI 構築のための MacOSX ネイティブアプリ）–一般公開されていないよう（開発が止まっている？）
–CSS 使えない–HTML5 Canvas ベースで UI 作った方が良いのか
な ...
最後に宣伝大阪ソーシャルゲーム開発勉強会6/16(土 )http://atnd.org/events/29188
