iphone アプリ開発の実例

40
[F講座2日目] Android アプリ開発事例 iPhone アプリ開発の実例~ http://apps.tasuc.com 稲見 泰宏(インフォ・ラウンジ合同会社) 2010/12/04

Upload: tokyo-city-university-ueno-lab

Post on 26-Jan-2015

1.615 views

Category:

Documents


2 download

DESCRIPTION

12月4日(土) 横浜ストリームアドバンスト講座 【F】Androidアプリ開発講座 2日目 - 4/4

TRANSCRIPT

Page 1: iPhone アプリ開発の実例

[F講座2日目]

Android アプリ開発事例~iPhone アプリ開発の実例~

http://apps.tasuc.com稲見 泰宏(インフォ・ラウンジ合同会社)

2010/12/04

Page 2: iPhone アプリ開発の実例

あ…ありのまま 今 起こった事を話すぜ!

『おれは今までAndroid講座を受けていたと思ったらいつのまにかiPhone講座になっていた』

な… 何を言ってるのか わからねーと思うがおれも何をされたのかわからなかった…

頭がどうにかなりそうだった…

iPhone4のバンパーだとかIS01のバージョンだとかそんなチャチな仕様じゃあ 断じてねえ

もっと恐ろしいものの片鱗を味わったぜ…

Page 3: iPhone アプリ開発の実例

自己紹介

• 名前:稲見 泰宏 (Twitter: @inamiy)

• 所属:インフォ・ラウンジ合同会社

• 趣味:Twitter、iPhone/iPadアプリいじり

• Apple歴:1年半

Page 4: iPhone アプリ開発の実例

もくじ

Page 5: iPhone アプリ開発の実例

たすくスケジュール?

Page 6: iPhone アプリ開発の実例

たすくスケジュール?

Page 7: iPhone アプリ開発の実例

アプリ開発の経緯

• 2008年創業

• 自閉症などの発達障がいのある子どもたちとその家族に向けた療育・サポートを行う専門家チーム

たすく株式会社 (TASUC Inc.)

Page 8: iPhone アプリ開発の実例

発達障がいについて

Page 9: iPhone アプリ開発の実例

これまでの療育ツール

• 長所・・・直感的、質感がある

• 短所・・・絵カード管理が大変

アプリ化決定

デジタルであれば、持ち運びが簡単。好きなだけ絵カードを作成・検索・整理できる。

Page 10: iPhone アプリ開発の実例

戦略1. リソース 

• 金なし、コネなし、スキルなし

• 開発期間=3ヶ月(最終的に4ヶ月半かかった)

2. ターゲット • ◯子ども ◎保護者 (子どもは最初使えない)

• ニッチな市場なので、世界展開を視野に入れる

3. ゴール • 親と子どもがアプリを通して学習&コミュニケーションを楽しむ

• 最終的には、子ども自らがアプリで自己表現できるようになる

Page 11: iPhone アプリ開発の実例

たすくスケジュール?

Page 12: iPhone アプリ開発の実例

で、実際に作り始めたものの…

壁その1:Objective-C

Page 13: iPhone アプリ開発の実例

Javascriptと比較してみる(その1)Javascript:

s = x + y;

Objective-C:

s = [x stringByAppendingString:y];

Page 14: iPhone アプリ開発の実例

Javascriptと比較してみる(その2)Javascript:

me = {name:‘inamiy’, age:18}

Objective-C:me = [NSDictionary dictionaryWithObjectsAndKeys: @"inamiy",@"name",[NSNumber numberWithInt:18],@"age",nil];

Page 15: iPhone アプリ開発の実例

で、実際に作り始めたものの…

壁その1:Objective-C マゾすぎ壁その2:開発の流れ

Page 16: iPhone アプリ開発の実例

サイト制作 アプリ制作

プログラマー担当(´・ ・`)

デザイナー担当(・ ・)

ここ押したら、こう飛んでね。

把握。

デザイナー(・ ・)

プログラマー(´・ ・`)

サイト制作では・・・

Page 17: iPhone アプリ開発の実例

サイト制作 アプリ制作

プログラマー担当(´・ ・`)

デザイナー担当(・ ・)

えーと、ここを押したらこう動いて・・・

・・・

デザイナー(・ ・;)

プログラマー(´・ ・`)

アプリ開発では・・・

Page 18: iPhone アプリ開発の実例

で、実際に作り始めたものの…

UI超大事!!!UIがプログラマーの仕事になることも。

センスが無くても泣かない。

壁その1:Objective-C

壁その2:開発の流れ

Page 19: iPhone アプリ開発の実例

たすくスケジュール?

Page 20: iPhone アプリ開発の実例

当初のデザイン

Page 21: iPhone アプリ開発の実例

完成品(ver 1.0.0)のデザイン

Page 22: iPhone アプリ開発の実例

大きな変更点• 背景を緑から青に(認知しやすい)

• 複雑な機能・操作を削除 シンプルに

• 視覚の妨げになるTab Bar & Navigation Barを外し、狭いスクリーンを広く使う

• 絵カードのドラッグを右から左に(指 マウスポインタ) 慣習との差異

Page 23: iPhone アプリ開発の実例

そして完成・・・• 2010/7/28 ver 1.0.0リリース

• 価格:1,800円

• 掲載メディア:App Store(JP)トップ、

Appbank 、Applie、港北経済新聞、産経ニュース、毎日新聞、etc(順不同)

(写真はiPad 2倍表示)

Page 24: iPhone アプリ開発の実例

掲載メディア

毎日新聞 2010/11/12 神奈川版

Appbank 2010/09/04

Page 25: iPhone アプリ開発の実例

たすくスケジュール?

Page 26: iPhone アプリ開発の実例

オブジェクト図(抜粋)

Page 27: iPhone アプリ開発の実例

CardViewDelegate//------------------------------------------------------------// CardViewDelegate//------------------------------------------------------------@protocol CardViewDelegate <NSObject>

@optional- (void)cardViewTouchBegan:(CardView*)cardView;- (void)cardViewTouchEnded:(CardView*)cardView;- (void)cardViewTouchCancelled:(CardView*)cardView;

- (void)cardViewDragWillBegin:(CardView*)cardView;- (void)cardViewDragDidBegin:(CardView*)cardView;- (void)cardViewDragging:(CardView*)cardView touchLocation:(CGPoint)touchLocation;- (void)cardViewDragWillEnd:(CardView*)cardView;- (void)cardViewDragDidEnd:(CardView*)cardView;

- (void)cardViewMovedHome:(CardView*)cardView;

- (void)cardViewSingleTapped:(CardView*)cardView touchLocation:(CGPoint)touchLocation;

@end

Page 28: iPhone アプリ開発の実例

たすくスケジュール?

Page 29: iPhone アプリ開発の実例

アプリを使った療育

Page 30: iPhone アプリ開発の実例

ユーザーの声・使用例

#Tasucスケジュールは非常に良い更新をしています!ローカルプッシュで一日でまた多くの構造!私は聞いたことがある。ありがとう。

(Googleオランダ語翻訳)

Page 31: iPhone アプリ開発の実例

オフラインの活動12010/07/31

第6回 J☆sKep研究会

Page 32: iPhone アプリ開発の実例

オフラインの活動2

2010/11/15 保護者を招いた学習会

Page 33: iPhone アプリ開発の実例

バージョンヒストリー• 2010.11.19 ver1.1.0 

• 拡大表示機能(lightbox)

• 動画カードの作成

• retina display対応(iPhone4以降)

• アラーム機能(ローカル通知)

• スケジュール複数保存・コピー機能

• タイムライン上の操作(タップ移動・ピンチズーム)

• 絵カード読み込み・スクロール高速化

• 2010.11.28 ver1.1.1 • スケジューラーのスクロール・

挿入・削除の高速化

• 2010.07.28 ver1.0.0 1st リリース

• 2010.07.30 ver1.0.1 iPad対応

• 2010.09.13 ver1.0.2 bug fix

• 2010.09.24 ver1.0.3 

• 英語対応(表示、カードデータ)

• サウンドエフェクト追加(ON/OFF)

• カード名表記(ON/OFF)

• 完了マーク

• 現在時刻ハイライト

• 2010.09.30 ver1.0.4 bug fix

Page 34: iPhone アプリ開発の実例

今日、ver 1.1.2出ました!(日付は向こうの現地時間)

最新バージョン

Page 35: iPhone アプリ開発の実例

今後の予定• ユーザーの声を反映した機能の追加(ただし、複雑にしすぎない)

• Android版の開発• iPad版の開発• マーケティング(特に海外展開)

Page 36: iPhone アプリ開発の実例

たすくスケジュール?

Page 37: iPhone アプリ開発の実例
Page 38: iPhone アプリ開発の実例

まとめ1. Courage (好奇心 時間=情熱 技術力)

• プログラミングが難しくても諦めず続けてみる• 既存のリソースを活用(Dwarfs standing on the shoulders of giants)

2. Imagination (ユーザー視点)• User Experience = おもてなし。アプリは使いやすいか?感動はあるか?

• 新製品の価値というのは、突き詰めると二つしかない。「今までより楽しい」か、「今までより楽」か。

3. A little dough (サムマネー)• 価格以上の価値を感じてもらう。技術への感謝の形。• 信者と書いて「儲ける」。信じる者(ユーザー)を増やす。

Page 39: iPhone アプリ開発の実例

参考文献• Apple Developer Center

• iOS Reference Library (sample+document)

• Apple WWDC 2010 Session videos • iPhone開発本• iPhone開発ブログ• オープンソースのコード• Twitter(@iphone_dev_jp など)• ユーザーの声

Page 40: iPhone アプリ開発の実例