たすくスケジュール: iphoneアプリ開発の実例

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

Upload: yasuhiro-inami

Post on 20-Nov-2014

4.497 views

Category:

Education


0 download

DESCRIPTION

2010/12/04 横浜ストリームアドバンスト講座 【F】Androidアプリ開発講座 http://yokohamastream.jp/news793.html のiPhone開発事例のプレゼン資料。

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アプリ開発の実例

もくじStart up

DevelopmentDesignMarkup

User’s voice

Page 5: たすくスケジュール: iPhoneアプリ開発の実例

たすくスケジュール?

Demo

Page 6: たすくスケジュール: iPhoneアプリ開発の実例

たすくスケジュール?

Start up

Page 7: たすくスケジュール: iPhoneアプリ開発の実例

アプリ開発の経緯

• 2008年創業

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

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

Page 8: たすくスケジュール: iPhoneアプリ開発の実例

発達障がいについて

Page 9: たすくスケジュール: iPhoneアプリ開発の実例

これまでの療育ツール

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

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

withスケジュール帳絵カードを携帯して、手軽に持ち運びができる

アプリ化決定

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

Page 10: たすくスケジュール: iPhoneアプリ開発の実例

戦略1. リソース 

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

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

2. ターゲット 

• ◯子ども ◎保護者 (子どもは最初使えない)

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

3. ゴール 

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

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

Page 11: たすくスケジュール: iPhoneアプリ開発の実例

たすくスケジュール?

Development

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アプリ開発の実例

サイト制作≠アプリ制作

view

model

controllerプログラマー担当

(´・ω・`)

デザイナー担当(・∀・)

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

把握。

デザイナー(・∀・)

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

サイト制作では・・・

Page 17: たすくスケジュール: iPhoneアプリ開発の実例

サイト制作≠アプリ制作

model

view-controller(UI, animation)

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

デザイナー担当(・∀・)

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

・・・

デザイナー(・∀・;)

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

アプリ開発では・・・

view

Page 18: たすくスケジュール: iPhoneアプリ開発の実例

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

UI超大事!!!

UIがプログラマーの仕事になることも。センスが無くても泣かない。

壁その1:Objective-C

壁その2:開発の流れ

Page 19: たすくスケジュール: iPhoneアプリ開発の実例

たすくスケジュール?

Design

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アプリ開発の実例

たすくスケジュール?

Markup

Page 26: たすくスケジュール: iPhoneアプリ開発の実例

TabScrollView

オブジェクト図(抜粋)

CardPageView

CardScrollView

TableView

ScheduleCardView

TabView

CardView

GalleryController

ScheduleControllerTasucController

TableViewCell

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アプリ開発の実例

たすくスケジュール?

User’s voice

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アプリ開発の実例

たすくスケジュール?

Summary

Page 37: たすくスケジュール: iPhoneアプリ開発の実例

"Life can be wonderful, if you're not afraid of it. All it needs is courage, imagination, and a

little dough." -- Charlie Chaplin

人生は恐れなければ、とても素晴らしいものだよ。 人生に必要なもの、それは勇気と想像力、

そしてほんの少しのお金だ。

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アプリ開発の実例

Thank you for listening.