2012 05-19第44回cocoa勉強会発表資料

1,178 views
1,083 views

Published on

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,178
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
6
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

2012 05-19第44回cocoa勉強会発表資料

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

×