デブサミ2012【16-D-7】「iOS, Android, Windows...

UIデザインが完成

http://www.flickr.com/photos/mfhiatt/6609228299/



画面構成スプラッシュ

タイムライン

公式アカウント

ハッシュタグ設定

Web情報

ツイートメンション

ログイン

9画面

iOSの画面仕様

スプラッシュ画面

iOSのローディング画面を利用

iOSの画面仕様

ログイン画面

iOSの画面仕様

タイムライン画面

iOSの画面仕様セグメントUIで切り替え更新ボタン

ハッシュタグ自分のタイムラインデブサミ公式

iOSの画面仕様

タブバーで切り替え

タイムラインメンション設定 Webページ

iOSの画面仕様

ツイートボタン

ツイート画面

Androidの画面仕様


Androidではスプラッシュを自分で用意する必要がある


ログイン画面

ブラウザを起動




更新ボタン


ツイート画面

送信ボタン


mention画面デブサミハッシュタグデブサミ公式


WebViewで直接開く

Webページ画面

Androidの画面仕様設定画面

Windows Phoneの画面仕様


Windows Phoneではスプラッシュ画面はデフォルトで起動


ログイン画面




更新ボタン


設定メニュー

アプリケーションバーは上にスワイプするとメニューが表示される


左右へフリックする事で画面切り替え

タイムラインメンションデブサミ公式ハッシュタグ Webページ

Windows Phoneの画面仕様ツイート画面

送信ボタン

画像取得ボタン

画面仕様iOS Android Windows Phone

まったく異なる

さぁ作るかー

まてーい

そ、その声は…

確認すべき事がまだあるやろ

T中さん！！

リソースhttp://www.flickr.com/photos/abielskas/147290816/

http://www.flickr.com/photos/abielskas/147290816/

http://www.flickr.com/photos/abielskas/147290816/

スマホアプリの開発において用意する必要のある6つのリソース


1.アイコン2.スプラッシュ画像3.文字列リソース4.画像部品5.メディアリソース6.マーケット用のリソース

アイコンiOS Android Windows

Phone

形式 PNG形式 PNG形式 PNG形式

サイズ57*57(3G,3GS)114*114(Ratina)

72*72(iPad)

36*36(ldpi)48*48(mdpi)72*72(hdpi)96*96(xhdpi)

62*62

スプラッシュ画像iOS Android Windows

Phone

形式 PNG形式指定なし PNG形式JPG形式

サイズ 320*480640*960 - 800*480

その他画像iOS Android Windows

Phone

対象 - - ライブタイル

形式 - - PNG形式

サイズ - - 173*173

その他画像iOS Android Windows

Phone

対象 - - ライブタイル

形式 - - PNG形式

サイズ - - 173*173これ

文字列リソースiOS Android Windows

Phone

形式 Key-Value形式 XML形式 Key-Value形式

数サポートする言語の数だけ用意するサポートする言語の数だけ用意するサポートする言語の数だけ用意する

画像部品iOS Android Windows

Phone

形式PNG形式JPG形式GIF形式

PNG形式JPG形式GIF形式

PNG形式JPG形式AI形式PSD形式

サイズ従来とRetinaの2種類ずつ

画面密度に合わせて４種類+画面縦横等

1種類のみ

メディアリソースiOS Android Windows

Phone

メディア動画、画像、音楽、etc...動画、画像、音楽、etc...動画、画像、音楽、etc...

サイズ制限なしアプリ自体が50MBまで

アプリ自体が225MBまで

マーケット用リソースその1iOS Android Windows Phone

マーケットの一覧表示用アイコン - - PNG形式

99×99

マーケットの詳細表示用アイコン

PNG,JPG,TIFF形式512×512 - PNG形式

173×173

PC版マーケット用のアイコン - PNG,JPG形式

512×512PNG形式200×200

アプリのスクリーンショット

PNG,JPG,TIFF形式640×920640×960960×600960×6405つまで

PNG,JPG形式320×480480×800480×8542枚以上

PNG形式800×4808枚まで可能言語別が可能


プロモーション用画像

- PNG,JPG形式180×120 -

プロモーション用動画

アプリの詳細説明内にリンクを含め

る事で可能YouTubeのリンク

アプリの詳細説明内にリンクを含める事で可

能

宣伝用画像 - PNG,JPG形式1024×500

PNG形式1000×800


アプリケーション名 255文字 30文字ある

アプリケーションの解説 4000文字 4000文字ある

最新の変更規定なし 500文字 -

プロモーションテキスト - 80文字 -

なるほど！

おさらい

http://www.flickr.com/photos/ores2k/394359583/



スマホアプリの開発において要件定義の段階で聞いておきたい8つの事

1.OSバージョン2.端末の種類3.言語4.タブレット5.テスト端末の確保6.公開予定日7.暗号化の有無8.納品

スマホアプリのUIデザインにおいて意識したい4つの事

1.UI部品の違い2.ハードキーによる操作の違い3.画面遷移の違い4.画面解像度

さぁ作るかー

実装開始！

開発環境

http://www.flickr.com/photos/rmlowe/3281353786/



開発環境の違い

開発機プラットフォーム開発機 Ver

iOS Mac OS XSnow Leopard

(10.6以上)

Lion(10.7以上)

AndroidWindowsLinux

Mac OS X-

Windows Phone Windows Windows Vista

以上

コーディングプラットフォーム開発環境 Ver 開発言語

iOS XCode 4.x以上 Objective-CC++、C

Android eclipse + ADT 3.6以上 Java

Windows Phone

Visual Studio

Visual Studio 2010以上

C#、VB

UI作成プラットフォーム開発環境開発言語

iOS Interface BuilderStory Board -

Android eclipse + ADT XML

Windows Phone Blend XAML

iOSのUI作成

Interface Builder Story Board

iOS4,5対応 → Interface BuilderiOS5対応 → Story Board

InterfaceBuilder

アプリの１画面毎に作成を行う

Story Board

アプリの全画面作成を行う

Story Board

UI部品へ遷移先を設定できる

AndroidのUI作成

Eclipse+ADT

Graphical Layoutエディタ

AndroidのUI作成

ひたすら記述

AndroidのUI作成

ドラッグ&ドロップ

Windows PhoneのUI作成

Windows PhoneのUI作成

TextBoxを画面上に

ドラッグ&ドロップ

Windows PhoneのUI作成選択中のUI部品の

テキストや背景色変更

レイアウト位置調整

実装

http://www.flickr.com/photos/foolswisdom/44619131/



Twitterライブラリ

Twitterライブラリプラットフォームライブラリ

iOSOAuthConsumerJSON Framework

Android Twitter4j

Windows Phone Tweetsharp

開発Tips

.MegLynn. , USA

http://www.igosso.net/se.cgi?mode=user_id&q=49105234@N05

http://www.igosso.net/se.cgi?mode=user_id&q=49105234@N05

リストへの反映

iOSのリスト反映

•UITableViewCellの派生クラス作成•セルのレイアウト作成•リストのレイアウト作成•セルのインスタンス作成

iOSのリスト反映

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

セルを取得するデリゲートメソッド

セルのレイアウトを作成

Androidのリスト反映

行を表すレイアウトXML

データを表示する為のアダプター

Windows Phoneのリスト反映

Twitterデータ自体をドラッグ&ドロップするとUI部品ごとデータ追加される

画像キャッシュShared

TransfersShellContentMedia

Root

iOSの画像キャッシュ

•アプリ内領域•カメラロールiOSの内部ストレージ

iOSの画像キャッシュ•NSData dataWithContentsOfURLAPIでアイコンをURL指定でダウンロードします

•NSData writeToFileAPIで画像を保存します

•NSSearchPathForDirectoriesInDomainsAPIでファイルを検索します

iOSのアプリ内領域フォルダ名説明

tmp 再起動、またはシステム側から不要と判断された時消される。一時保存場所向け。

Library データファイルでは無いファイル(画像等)を保存するためのトップディレクトリ。サブディレクトリも作成可能。iTunesにバックアップされる。

Library/Preferencesアプリケーション設定情報ファイルを保存するディレクトリ。NSUserDefaultsで使われるので操作することは無い。iTunesにバックアップされる。

Library/Caches 一時的に残しておきたい。バックアップしたくないが残しておきたい設定などを保存するディレクトリ。iTunesにバックアップされない。

Documents ドキュメントやアプリケーションデータを保存するディレクトリ。iTunes、iCloudバックアップ対象ディレクトリ。

Androidの画像キャッシュ内部ストレージ

外部ストレージ

ファイルキャッシュ

ファイルキャッシュ

他アプリも扱える

他アプリは扱えない内部ストレージ


Androidの画像キャッシュ

Contextクラス


getDir() getCacheDir() getExternalCacheDir() getExternalFilesDir (String type)

Environmentクラス


getExternalStorageState()getExternalStorageDirectory()getDownloadCacheDirectory()

これらは端末別に保存先が異なるケースを吸収するために存在している

Windows Phoneの画像キャッシュ

内部ストレージ



Pictureハブ

アプリ内

他アプリも扱える

他アプリは扱えない

Windows Phoneの画像キャッシュ内部ストレージ -アプリ内

SharedTransfersShellContentMedia

Root

Windows Phoneの画像キャッシュ内部ストレージ

SharedTransfersShellContentMedia

Root

Cash フォルダ作成


•WebClient APIを利用してTwietterのアイコン画像URLから画像ダウンロードします

•IsolatedStorageFile APIを利用してアプリ内に保存します

プログレス

iOSのプログレス

•networkActivityIndicatorVisible•UIActivityIndicatorView•UIProgressBar

networkActivityIndicatorVisible

•UIApplicationのプロパティです。•YES,NOで表示、非表示を行います。


UIActivityIndicatorView•くるくる回ります•別スレッドにしないとアニメーションし始めません


UIProgressBar•進捗を表すことができます

Androidのプログレス

回転する

他にも

進捗を表す

Windows Phoneのプログレス

「Loading...」表記と丸い玉が左から右へ流れるアニメーションが行われます

Windows Phoneの通信中アナウンス

他にも進捗を表すプログレスバーもあります！

画像の取得

iOSの画像の扱いUIImagePickerControllerでカメラロールまたはカメラを起動する

選択または撮影した画像はNSData(バイナリ)形式で取得

Androidの画像の扱い

画像を選択

Intentで画像を取得できるアプリ

を起動

結果を取得

Windows Phoneの画像の扱い

Pictureハブ起動

起動時のオプションでカメラ撮影の可否を設定

非同期処理

iOSの非同期処理

•NSOperationクラス

•NSThreadクラス

•通信はNSURLConnectionクラスのconnectionWithRequestメソッド

Androidの非同期処理応答なし

強制終了

アンインストール

星一つ ★☆☆☆☆

Androidの非同期処理

AsyncTask

Thread+Hadler

AsyncTaskLoader

便利

これからはコレらしい

Windows Phoneの非同期処理

WebClient APIのダウンロード完了した時などに呼ばれる処理は非同期なので、開発者は意識する必要が無いです

テストhttp://www.flickr.com/photos/leeander/4132537169/

http://www.flickr.com/photos/leeander/4132537169/

http://www.flickr.com/photos/leeander/4132537169/

テストで気にする事

OSバージョン端末の種類

ユニットテスト負荷試験

互換性

実際どうテストするかは

http://www.flickr.com/photos/travelourplanet/6301870056/

マーケット配信




•アカウント取得•アカウント費用と期間•アカウント取得にかかる時間•アプリ公開の為の審査、審査期間•アプリのリジェクト•アプリケーションのファイル容量

アカウント取得プラットフォームアカウント

iOS Apple ID

Android GoogleアカウントWindows Phone App Hubアカウント

アカウント取得と期間プラットフォーム価格期間

iOS 8400円 1年間

Android US$25 無期限

Windows Phone 9800円 1年間

アカウントの取得にかかる時間プラットフォーム時間

iOS 1週間程度

AndroidGoogle Checkoutでの決済が完了次第

1日程度

Windows Phone

個人はすぐ法人は一週間程度

アプリ公開の為の審査、審査期間プラットフォーム審査の有無審査期間

iOS あり約5営業日

Android なし -

Windows Phone あり約3営業日

アプリのリジェクト-iOS

アプリ審査のガイドライン(公式)https://developer.apple.com/appstore/resources/approval/guidelines.html

Reject Database(有志)http://iphone-rejectdb.appspot.com/

https://developer.apple.com/appstore/resources/approval/guidelines.html

https://developer.apple.com/appstore/resources/approval/guidelines.html

http://iphone-rejectdb.appspot.com/

http://iphone-rejectdb.appspot.com/

アプリのリジェクト-Android審査が無いので公開前のリジェクトはない

アダルトマルウェア

著作権違反

海賊版

審査が無いので公開前のリジェクトはない

後からリジェクトあり

アプリのリジェクト-Android

アプリのリジェクト-Windows Phone

•年齢制限による引っかかりやすいコンテンツ•翻訳漏れ•アプリ挙動がおかしい•GPS利用許諾

アプリのリジェクト-Windows Phone

Reject database for Windows Phone Marketplacehttp://rejectdb.pin2wp.jp/

http://msdn.microsoft.com/ja-jp/library/hh184843(v=vs.92).aspx

MSDN アプリケーション認定の要件

http://rejectdb.pin2wp.jp/






アプリケーションのファイル容量プラットフォーム容量備考

iOS - 20MB以上でWi-FiオンリーでのDLとなる

Android 40MB 25MB以上でWi-Fi推奨になる

Windows Phone 225MB -

無事完成

http://www.flickr.com/photos/tomashallenberg/2827955927/



アプリをお客様に見せにいきましょう！！

動画デモhttp://www.youtube.com/watch?

v=pMkKdET0eho&context=C324b5b3ADOEgsToPDskLAI_kgUmQ02O8qvRsA6F22

http://www.youtube.com/watch?v=pMkKdET0eho&context=C324b5b3ADOEgsToPDskLAI_kgUmQ02O8qvRsA6F22




発注元からのコメント

S戸氏


お、ツイートできてるやん！

※個人の感想です


プラットフォーム毎に見た目も動きも特徴合ってええな


そうそう、こういうのが

欲しかったんだよ！


ごくろう

無事リリース！http://www.flickr.com/photos/reinoutvanrees/481980827/

http://www.flickr.com/photos/reinoutvanrees/481980827/

http://www.flickr.com/photos/reinoutvanrees/481980827/

fin...

後日...

超やばい案件が遂に終わったチーム鰤太郎。次の案件はちょっと余裕を持ってやりたいよね、と話していた矢先、

営業のF田さんより「おいしい案件」の話が舞い込んで来ました。

後日...このチーム

楽したいわー

超やばい案件が遂に終わったチーム鰤太郎。次の案件はちょっと余裕を持ってやりたいよね、と話していた矢先、

営業のF田さんより「おいしい案件」の話が舞い込んで来ました。

後日...この人

このチーム

チョロい仕事がありますよー

「いいねー」

æææææææææ›æææ∩─éÇ æææ;;;; ææææææææææ ›‹æ●æÇ] À– ææ;;;;;; æææææææææææ- ›&æ●æ ● zつ æææææææææææzææ V]入]]ノ æ ミææææææææææææææ Çæ&œ‹æææノæ-⌒j æææææææææææ -›œœœノºœ-æ -ææ;;;;; æææææææææ æ Ôææææææææ œ]ノææ;;;; æææææææææææ ›æ›œææææ› æææææææææææææ›œ]]Ëæææææ›æææ;;;;;;æææ&´⌒ ææææææææææææææææ›ææ œœ] ›œœææ&´⌒99&´⌒99 æææææææææææææææææ ›œœœËœœœË&´99⌒æ &´⌒99ææズザザザ

コミュニティ

活動-iOS-

•情報：Apple DevCenterStack Overflow

•コミュニティ：すまべん、 iPhoneアプリ開発者グループ、iPhone Dev Sapporo

　　iPhone Dev Tohoku、南東京iPhone開発者勉強会

　　西東京iPhone開発者勉強会、

　　これから始める人のためのiPhone,iPadアプリ開発勉強会

活動-Android-

•情報：Tech Booster弊社のAndroidブログとか...

•コミュニティ：日本Androidの会

活動-Windows Phone-

•情報：MSDNTwitter #wp7dev_jp ハッシュタグAppHubフォーラム弊社のWindows Phoneブログとか...

•コミュニティ：Arch, すまべん, WP7もくもく会

お知らせ

本の紹介

•iOS/Android/Windows Phoneの比較本を執筆中です

•青葉実る季節頃に出版予定

ご清聴ありがとうございました。

デブサミ2012【16-D-7】「iOS, Android, Windows...

Technology

Transcript of デブサミ2012【16-D-7】「iOS, Android, Windows...