第5回スタートアップiOS勉強会 http://www.zusaar.com/event/14487010 の発表資料です。 デジタルサーカスで運営しているiOSアプリ開発サービス「アプリビルダー」の紹介と、それに使用している技術のご紹介です。

1. iOSアプリ制作ツール
アプリビルダーを⽀支える技術
デジタルサーカス（株）⻑⾧長⾕谷川智希

2. ⾃自⼰己紹介
・ ⻑⾧長⾕谷川智希
・ デジタルサーカス（株） 副団⻑⾧長CTO
・ 趣味: iOSアプリ開発, Web開発
・ その他趣味: レンタルカート, 電⼦子⼯工作(mbed), …
と も き
@tomzoh TOMZOH

3. 著書
iOS
執筆中

4. デジタルサーカス（株）
・ Webサイト受託開発（PHP, CakePHP, Drupal）
・ スマホアプリ受託開発（iOS, Android)
・ ⾃自社サービス （http://appbuilder.jp）
2000 Samui 2001 Cebu 2002 Phuket 2004 Ishigaki 2005 Vietnam 2006 Hǎinán Dǎo
2007 Bali 2008 Taiwan 2010 Seoul 2011 Macau 2012 Guam 2013 Phuket
社員旅⾏行行 いろいろ⾏行行ってます

5. 本⽇日⽤用デモ
・ デモアカウントを作っています。
・ AppStoreからAppBuilder Viewerをダウンロード。
・ メール: demo@appbuilder.jp パスワード: digitalcircus

6. アプリビルダーのご紹介

7. iPhoneアプリを作るWebサービス
・ ネイティブアプリを作る。
・ AppStoreで公開される。
・ 現在約50アプリを公開中。

8. 実現したいこと
・ 発信する⼈人も読む⼈人もPC系の⼈人
・ HTMLを⼿手で書いてサーバにアップ
!
・ コンテンツの多様化。読む⼈人はふつうの⼈人
・ 作成ソフトの普及。HTMLの技術が不不要に。
!
・ 発信する⼈人もふつうの⼈人。Webは⾃自⼰己表現の場に。
・ サービスの普及。Blog, pixiv, ニコ動。
Webの歴史 アプリ
←いまここ
←これを実現
= アプリで⾃自⼰己表現するための場

9. アプリビルダーでのアプリ制作
・ ユーザはサインアップしてWebブラウザ上でアプリを作成する。
・ アイコン画像、スプラッシュ画像、AppStore申請情報
・ TabBarに⼊入れる機能の選択、設定
・ データ⼊入⼒力力
・ AppBuilder Viewer（iPhoneアプリ）でプレビュー
・ アプリビルダーのID/パスワードでログインする
・ アイコン、スプラッシュ以外の設定項⽬目がすぐ反映される

10. アプリの機能
・ カタログ 製品やサービスを⼀一覧・詳細表⽰示。
・ マップ 位置情報を持ったスポットを地図・⼀一覧・詳細表⽰示。
・ イメージ 画像を⼀一覧・詳細表⽰示。詳細表⽰示のみの利利⽤用も。
・ カメラ フレーム、スタンプ、ペンを持ったカメラ。
・ ショー 画像をベースにしたプログラマブルな動作。
・ その他 （お知らせ、予約、クーポン、お問合せ、ページ、リンク、Twitter）

11. デモ

12. 申請
・ ユーザはWebブラウザ上で申請処理理をする。
・ 審査⽤用、申請⽤用アプリがビルドされる。
・ 運営スタッフが申請⽤用アプリを審査。
・ 審査OKならAppStoreに登録。

13. アプリビルダーを⽀支える技術

14. インフラ / アーキテクチャ
Web / DB
アプリ作成・申請
ビルド
ユーザ 運営スタッフ
アプリ審査
審査待ちアプリ情報
ビルドされたパッケージ
LAMP CakePHP OSX PHP
Viewer 個別アプリ

15. アプリ設計
・ 2つのアプリ
・ AppBuilder Viewer
・ AppStoreで公開されているプレビュー⽤用アプリ。
・ 個別アプリ
・ ユーザの申請の結果AppStoreで公開されるアプリ。
・ ソースコードは同じ
・ 違いはソースコード内部に個別アプリIDを持つか持たないかだけ。
・ アプリ全体のコンフィグレーションを起動時に取得。

16. ビルドサーバでの処理理
・ 個別アプリ⽤用コンフィグレーション
・ バイナリビルド
・ 審査⽤用（AdHoc / Enterprise）
・ 申請⽤用（AppStore）
・ Webサーバへの登録、運営スタッフへの通知
・ OTA配布

17. 個別アプリ⽤用コンフィグレーション
・ アプリID アプリビルダーサーバのAPIキー
・ Info.plist アプリ名、Bundle ID等個別アプリ特有の設定
・ バイナリ形式 (binary1) → JSON形式 (json) → バイナリ形式
・ plutil -convert [type] Info.plist
・ アイコン・スプラッシュ
・ 初期データSQLite
ビルドサーバ

18. バイナリビルド - 審査⽤用
・ 審査⽤用（AdHoc / Enterprise） .ipa
・ xcodebuildでコンパイル
・ xcrunでmobileprovisionを埋め込んでパッケージ
cd /path/to/project; xcodebuild -sdk iphoneos7.1 -configuration Enterprise
CODE_SIGN_IDENTIFY= iOS Distribution: Digital Circus, Inc. clean build
!
xcrun -sdk iphoneos7.1 PackageApplication
/path/to/project/build/Enterprise-iphoneos/AppBuilder.app
-o /path/to/ipa/name.ipa --embed /path/to/mobileprovision
ビルドサーバ

19. バイナリビルド - 申請⽤用
・ 申請⽤用（AppStore） .app
・ xcodebuildでコンパイル
・ 出来た.appをzip圧縮 → Application Loader
cd /path/to/project; xcodebuild -sdk iphoneos7.1 -configuration Release
CODE_SIGN_IDENTIFY= iOS Distribution: Digital Circus, Inc. clean build
!
cd /path/top/project/build/Release-iphoneos; zip -r /path/to/app/name.zip
AppBuilder.app
ビルドサーバ

20. Build Configuration

21. これからの⽅方向性
・ 現在のアプリビルダーアプリの機能の最⼩小単位は（UITabBar
の）タブ。これからはこの単位を細かくしていく。
・ 画⾯面設計、データソース、オブジェクトとデータのマッピング
→ 画⾯面を描画・動作
・ 画⾯面単位でコンフィグレーション可能な様にしたメジャーアッ
プデート版を開発中。
・ してたらSwiftが…

22. JSON形式での画⾯面設計
画⾯面名: 画⾯面遷移の際にこの名前で指定
コントローラ: 「詳細画⾯面」
データソース設定
データへのパス
コントロールタイプ。
ここではIImageViewをベースにした
ABImageView
UIImageViewが持
つプロパティはその
まま透過して設定
する。

23. すべての⼈人がアプリで
⾃自⼰己表現できる様にしたい

24. 告知

25. アプリビルダーステッカー

26. パートナー / 団員募集
・ フリーランスの⽅方（常駐、持ち帰り）募集中！
・ @表参道 （Apple表参道から徒歩5分）
・ iOS, Android, PHP (CakePHP, Drupal)
・ 時間は割と⾃自由になります。
・ メモリ16GB、SSD、ディスプレイ2枚保障。
（CTOが効率率率厨なので…）

28. ありがとうございました。
@tomzoh