mtl主催i os勉強会中級編in筑波

メディアテクノロジーラボ主催学生向けiPhoneアプリ勉強会（中級編）

2012/2/20

舩見高貴生チーフエンジニア/メディアテクノロジーラボ

筑波大学1988年卒　農林学類生物環境造成学主専攻

　～iOS5 & Xcode4.3でスマートに開発しよう！～

12年2月22日水曜日

～iOS5 & Xcode4.3でスマートに開発しよう！～アジェンダ

• 自己紹介

• MTLの紹介

• iOS5+Xcode4ショーケース+α

• Xcode4.3出ました

• ARC,StoryBoard,iCloud,AutomationTest,AirPlay

• iOS5概要とシェア

• 小話

• みなさんからの共有


自己紹介


フナミタカオ - エンジニア自己紹介

• 1988 入社 - リクルート国際VAN 技術サポート

• 1990 ケイコとマナブ営業

• 1994 エイビーロード制作システム

• 2000 原稿制作フレームワーク

• 2006 たたみラボ

• 2007 MTL - WebAPI、iOS、Android

C

DTP

AppleScript

RB,.Net, Perl

Perl,PHP,Ruby

Perl,ObjC,Java


フナミタカオ - エンジニアブログ＆Twitter&Facebook

• はてな iRSS

• Twitter @iRSS

• Facebook takao.funami

• MTLブログ

• http://mtl.recruit.co.jp/


http://mtl.recruit.co.jp

http://mtl.recruit.co.jp

88年大学卒業筑波出身です

• 筑波大学　第二学群　農林学類

• 生物環境造成学主専攻

• イチゴの植物工場が卒論のテーマ

• 88当時、世の中はバブル黎明期でした

• ご縁あってリクルートに


メールなし、ネットなし、一太郎＆花子全盛期25年前、紙で情報をやり取りする時代

• パソコン通信はあった。

• コピー機もあった。１０円コピー

• 音声の電話回線をつかって、データを送信

• PC9800のパソコンで清書

• 一太郎 - ワープロ

• 花子 - 図表エディタ

コンピュータ博物館

http://museum.ipsj.or.jp/heritage/ichitaro.html

ポリプロピレンのおもちゃ箱http://monopoly.cocolog-nifty.com/blog/

2011/06/post-546f.html




http://monopoly.cocolog-nifty.com/blog/

http://monopoly.cocolog-nifty.com/blog/

パソコン通信の画面


電話線を使うので、音で通信していたモデム、音響カプラ


JAMJAMというミニコミ紙を作っていましたサークル活動

印刷屋さんで写植＆印刷12年2月22日水曜日

一部文字作成にワープロ使用

一行の液晶表示、プリンタ付き、紙は熱転写専用紙。


あれから24年iOSアプリの開発をやっています。


works1

ホットペッパーiPhone&Android APP

2009年秋 2011年春


works2

iPadアプリ-じゃらんシリーズ

2010年5月より、シリーズ５作12年2月22日水曜日

works3

はぴばる

2011年10月31日リリース12年2月22日水曜日

works4

リクルートWebサービス

• 17種類のWebサービス(WebAPI)の開発、運用を約3人で行っています。

• 月間６億リクエスト。リリースは6回/月程度。

• 毎週500行くらい書いてるかも


MTLとはメディアテクノロジーラボのリクルート内での役割


5

新領域学び領域ＨＲ領域住宅領域ＩＭＣ領域狭域領域

ライフステージ領域（人生の節目）

ライフスタイル領域（日常の消費）

情報誌

ＷＥＢ・

モバイル

新モデル

通販イベント

フリーペーパー

事業領域の拡大

プラットフォームの拡大

ＤＢ型サービスソリューション

新ﾋﾞｼﾞﾈｽﾓﾃﾞﾙ新メディア

リアル事業全国展開

情報誌/

フリーペーパー

Web/モバイル

新モデル

HR領域学び領域住宅領域 IMC領域狭域領域新領域

ライフステージ-人生の節目ライフスタイル-日常の生活

社会の変化・ITの発展にそって進化事業領域の拡大

プラットフォームの拡大

MTL


2007-2011

MTLについて

• 2007年4月1設立今年５期目

• 技術調査研究～新規事業開発を行う「実証研究機関（R＆D）」

• テクノロジを源泉としたサービス企画・運営を行い、ネット分野における新しいビジネスモデルを創造する


シードを担うMTLはリクルートのR&D部門

R&D

事業開発カンパニー人材/進学/住宅結婚/自動車ライフスタイルetc.アドオプティマイゼーション推

進室 etc.

メディアテクノロジーラボ(MTL), リクルートインキュベーションパートナーズ（RIP）

etc.12年2月22日水曜日

プランナーとエンジニア強みを活かして協働する

WEB サービスの企画設計・プロデュース、ビジネスプランニングなど。新規事業の企画・戦略立案から、プロジェクトチームの立上げ、課題抽出、日々の P/L 収益管理まで幅広く

システム設計、アーキテクチャ設計、フレームワーク開発、システム開発など。WEB サービスの企画設計から技術視点・クリエイタ視点で参加し、実際にシステム開発・運用までを行う。サービス企画・ディレクション・インフラ管理もあり。

+

プランナー

エンジニア - Webアーキテクト

- Webプロデューサー


最近のMTLのサービス代表的なサービスをいくつか...


開発勉強会支援→決済機能付きイベント開催支援1.ATND →EventATND

Exit


O2Oアプリ - オンライン・ツー・オフライン2.ショプリエ

チェックインしてポイントためることでユーザーと商品のマッチングと来店促進を目指す 2月14日公開


これまで７回開催、今年も実施予定3.Mashup Award 7

MA は、開発者が新技術・新サービスに挑戦する年に１度のお祭りです。今年も、オープンな API やプラットフォーム、デバイスを存分に活用して頂いて、ちょっと先の未来の Web を見せてくれる作品を期待しています！


いまできることに取り組む4.Hack For Japan&復興支援

じゃらん　東北地方太平洋沖地震＜被災者支援プラン＞API

Hack For Japanみんなのわ、げんきのわ（NHK 報道局 × MTL コラボ）


どんなオフィス職場環境は？


MTLのオフィス/カフェコラボが生まれる/開発に集中できる

「MTL カフェ」社内外の勉強会などに使うイベントスペース。

「コンセントレーションスペース」開発者のための集中作業スペース。

電話設置なし。ノートPC用外付モニタ完備。12年2月22日水曜日

伊豆とか、三浦とか。温泉付きでもちろん合宿もします

座敷よりは腰にくるので、最近はテーブルを用意12年2月22日水曜日

iPhone案件たくさん大半はMac,iPhone率100%越え


iOS5+Xcode4ショーケース+α注目の便利機能、iTVの予感


XCode4.32月16日リリース


それほど影響ないですが、とまどうかも4.2と違い

• iOSのバージョンはかわらない

• AppStoreからインストールはこれまでどおり

• /Applications/Xcode.appにインストール

• インストーラなくなった

• /Developerもなくなった×


共存もできる模様古いXCodeの削除はオプションで


CommandLine ToolsやiOS4.3 SimulatorもDashCodeはオプションに

More Developper Tootlsからダウンロード

Preferences>Downloadから取得できるものもある


画面UIはかわらず復習


これでだけは、覚えたいXcode ショートカット

コマンド+数字左枠(ナビゲーター)

コマンド+Opt+数字右上(インスペクタ)

コマンド+Opt+Ctl+数字右下(ライブラリ)

コマンド+Shift+Y 下(デバッグ)

Ctl+数字ジャンプバー


ARC[iOS5 ] Retain,Releaseからの解放


retain or releaseを自動的にやってくれるAutomatic Reference Counting

• retain, release, autoreleaseのことは忘れる

• コンパイラが自動挿入。GCではない

• ただしmalloc/free,CF等は対象外

• 変数の初期化は自動的に行われる

• nilになるので、安全。nilのメソッドを呼んでも落ちないから

• 循環参照には、注意


ARC利用のルール

• retain, release, retainCount, or autoreleaseを呼び出さない。@selector(retain), @selector(release)もNG

• deallocでインスタンス変数の解放は不要。

[super dealloc]はNG

• CFRetain, CFReleaseはARCの対象外

• Cの構造体は使わないで、Objective-Cのクラスに

• NSAutoreleasePool のかわりに@autoreleasepoolを


https://developer.apple.com/library/ios/documentation/Cocoa/Reference/Foundation/Classes/NSAutoreleasePool_Class/Reference/Reference.html#//apple_ref/occ/cl/NSAutoreleasePool

https://developer.apple.com/library/ios/documentation/Cocoa/Reference/Foundation/Classes/NSAutoreleasePool_Class/Reference/Reference.html#//apple_ref/occ/cl/NSAutoreleasePool

すこし心配な事

• 外部ライブラリ(github等）がARCに非対応のものも多い。

• でも大丈夫、混在は可能。

• ビルド設定の、Build Phaseタブの、Compile

Sources 設定でコンパイルオプションに -fno-

objc-arcを入力すれば、ARC非対応のライブラリもARC環境で混在できる


__weak修飾子を使う循環参照をさける

@interface MTLList : NSObject{ MTLItem *_child;}- (void)setChild:(MTLItem *)obj;@end@implementation- (void)setChild:(MTLItem *)obj{ _child = obj;}@end

@interface MTLItem : NSObject{ MTLList *_parent;}

- (void)setParent:(MTLList *)obj;@end@implementation- (void)setChild:(MTLItem *)obj{ _parent = obj;}@end

{ MTLItem *a = [[MTLItem alloc] init]; MTLList *b = [[MTLList alloc] init]; [a setList:b]; [b setParent:a]; }

循環参照になる変数はデフォルトで__strong

MTLList_child

MTLItem_parent


__weak修飾子を使う循環参照をさける

@interface MTLList : NSObject{ MTLItem *_child;}- (void)setChild:(MTLItem *)obj;@end@implementation- (void)setChild:(MTLItem *)obj{ _child = obj;}@end

@interface MTLItem : NSObject{ MTLList __weak *_parent;}

- (void)setParent:(MTLList *)obj;@end@implementation- (void)setChild:(MTLItem *)obj{ _parent = obj;}@end

MTLList_child

MTLItem_parent

{ MTLItem *a = [[MTLItem alloc] init]; MTLList *b = [[MTLList alloc] init]; [a setList:b]; [b setParent:a]; }

循環参照にならない片方は__weakとする


参考書＆リファレンスARC

• Transitioning to ARC Release Notes

• https://developer.apple.com/library/ios/#releasenotes/ObjectiveC/RN-TransitioningToARC/Introduction/Introduction.html

• エキスパートObjective-Cプログラミング ― iOS/OS X

のメモリ管理とマルチスレッド

• 電子書籍：http://tatsu-zine.com/books/objc

• Amazon書籍 : http://amzn.to/xGuL2c


https://developer.apple.com/library/ios/#releasenotes/ObjectiveC/RN-TransitioningToARC/Introduction/Introduction.html






http://tatsu-zine.com/books/objc

http://tatsu-zine.com/books/objc

http://amzn.to/xGuL2c

http://amzn.to/xGuL2c

WWDC2011

ビデオ

詳細はぜひ、ビデオ+スライドで


iCloud[iOS5]OSX10.8ではMacでも本格対応


UIDocument,Key-ValueStore

• UIDocument

•


どんなクラスを使うのか

• UIDocument

• サブクラスを作って、データの読み書きを実装

• NSUbiquitousKeyValueStore（シンプル）NSUbiquitousKeyValueStore *keyStore = [[NSUbiquitousKeyValueStore alloc] init];

//保存[keyStore setString:@”Saved String” forKey:@"MyString"];[keyStore synchronize];

//読み出しNSString *storedString = [keyStore stringForKey:@"MyString"];


Storyboard[iOS5 ] ワイヤーとして流れがつかめるわかりやすさ。


画面の関連を見渡せるようになった。.xibから.storyboardに

• コントロール＋ドラッグで画面をつなぐ

• Segueで関連づけ

• 遷移アニメーションをカスタマイズ可能

• UITableView

• 固定セル作成可能

• UITableViewCellの編集が簡単に


Appearance [iOS5 ]一気に画面をカスタマイズ。「友達を探す」のようなアプリを簡単に実現


Tint color & BackgroundImage &etc

一気に雰囲気を変更できる

[[UINavigationBar appearance] setTintColor:color]

[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"skin_44"] forBarMetrics:UIBarMetricsDefault];


MTLAppearanceソースをつかってDemo


参考

• UIAppearance で色や画像を変える

• http://cocoadays.blogspot.com/2011/10/uiappearance.html

• WWDC Video

• 114_customizing_the_appearance_of_uikit_controls


http://cocoadays.blogspot.com/2011/10/uiappearance.html




iTVの予感[iOS4.3～]AppleTVと組み合わせてできる、iTVもどき


ミラーリングできるApple TV & iOSでバイス


別スクリーンとしても使えるUIScreen

- (void)viewDidLoad...

// 最後のスクリーンが外部ディスプレイ if ([[UIScreen screens] count] > 1) { [self prepareScreen:[[UIScreen screens] lastObject]]; }......}

- (void)prepareScreen:(UIScreen *)connectedScreen{

//外部ディスプレイのサイズでWindowを作る CGRect frame = connectedScreen.bounds; self.window2 = [[UIWindow alloc] initWithFrame:frame]; [self.window2 setScreen:connectedScreen]; self.window2.hidden = NO;......

}12年2月22日水曜日

参考AirPlay

• WWDC Video

• 406_airplay_and_external_displays_in_ios_apps

• サンプルコード

• ExternalDisplay

• https://developer.apple.com/library/ios/#samplecode/ExternalDisplay/Introduction/Intro.html#//apple_ref/doc/uid/DTS40010724


Automation + SenTest[Instruments] 画面操作を自動的に行えるツール


UnitTest はSenTest

UIの自動テストを行う

• SenTestを使った、自動テスト。

• 自動テストだが、UIが絡むとむずかしい

• Automation

• Javascriptで自動実行

• JavaScriptの記録もできるので、テストのひな形にできる


UnitTest

SenTest

Person

firstNamelastName

ageaddress

fullName


Instrumentsに追加Automation


テキスト

• HELP > Instruments New Features User Guide

• New Features in Instruments 4.2


UIPageViewManeger[iOS5]iBookのようなUIができちゃう


iBook風のアプリPage-Based Application


R25APIを利用した例ページめくりアニメーションを実現

サンプルソース：http://dl.dropbox.com/u/27096935/students/mybook.zip

参考：MTL主催　学生向けiPhoneアプリ勉強会（中級編）　～リクルート流アプリの創り方～　http://atnd.org/events/24249


http://dl.dropbox.com/u/27096935/mybook.zip

http://dl.dropbox.com/u/27096935/mybook.zip

http://atnd.org/events/24249




UIPageViewController

UIPageViewController

page view

view view

FNSDataViewController

FNSDataViewController

FNSRootViewController<UIPageViewControllerDele

gate>

spineLocationForInterfaceOrientation

(回転時の挙動)

FNSModelController<UIPageViewControllerDataSour

ce>(改ページ時）

Before ViewAfter View

Page Data(model)Page Data(model)@property pageData

@property dataObject

@property dataObject

UIPageViewControllerがページごとにDataViewControllerを作成、破棄を繰り返

してページを表示している。12年2月22日水曜日

UITwitter[iOS5]Twitterアカウント管理はOS任せにできる


テキスト


ところで、iOS5のシェアは？i0S4の対応はどうしようか？


リクルートWebサービスへのリクエスト数から算出iOS5のシェアは6割強

1%

37%

62%

iPhoneOS3 iOS4 iOS5


公開から4ヶ月でiOS5シェアは6割強(2012/2)

iOSバージョンシェア推移

0%

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

10/5 10/7 10/9 10/11 11/1 11/3 11/5 11/7 11/9 11/11 12/1

iPhoneOS3 iOS4 iOS5

2010/5 ～2012/2のリクルートWebサービスへのリクエスト数から算出iPhoneOS3→iOS4の時は6ヶ月後に1:9になった。4→5は少し鈍い


1ヶ月後でiOS5 5割超えあるコミックアプリのiOSシェア

中村智武のCTO記-http://ameblo.jp/tomotaken/entry-11060841833.html iPhone向けコミック配信サービスのサーバーへのアクセスを元にした独自調べ

iPhone 4S発売及びiOS 5リリースから約一ヶ月後（集計期間11/11～11/17）のシェア内訳


http://ameblo.jp/tomotaken/

http://ameblo.jp/tomotaken/

いつかは、iOS5以上になるけれど...

いつまでiOS4対応すべきか？

• iOS5以上で使える..

• iCloud

• Newsstand

• iTunes U

• 友達を探す

• 通知センター

• Mountain Lion

• ARC

• StoryBoard

• Segue

• Custom Appearance

• TwitterAPI

• Table View Static Content

ARC,StoryBoardは非常に魅力的すぐにでもiOS5にしぼりたい12年2月22日水曜日

My Little Story自分の想いをコードで実現することについて、すこし、自分の体験を話します


2010/5/28 iPad日本公開同時発売iPadじゃらん

地図と記事の２画面12年2月22日水曜日

25years ago


アパート情報の地図


テキスト雲定規＋製図ペン+トレース用紙


地図別冊になりました


Now


5years ago


2006年の想い位置と連動するサービスを...

携帯できる

地図と記事が連動

しかし当時は、手頃なデバイスがなかった12年2月22日水曜日

1years ago


2010/5/28 iPad日本公開同時発売iPadじゃらん

最適なデバイスの登場じゃらんというコンテンツ

+


想いは形になります確認事項

• アイデアや想いはいつか形になるもの


Android,WindowsPhoneも含むiOSデバイスのすごさ

• 持ち運べる

• 常時接続

• プログラム可能


mtl主催i os勉強会中級編in筑波

Technology