Web制作会社が スマホアプリ開発を依頼されたら 地方における開発事情からデザイナー向け開発手法まで 大月 茂樹

2

8

4

3

大月 茂樹

Web制作会社が

スマホアプリ開発を依頼されたら？

App Store / Android Marketでアプリを

販売している？orしたことがある？

本セッションにおける アプリ の定義

•

App Store/Android Marketから

購入・ダウンロード・インストール

•

Objective-C/Javaで開発

スマホアプリ

•

Webブラウザを介して

Webサーバへアクセス

•

HTML5/CSS3/JavaScript

さらにPHPなどで開発

Webアプリ

（HTML5アプリ）

✦ 地方におけるスマホアプリ開発事情

✦ Web制作会社が直面する問題

✦ デザイナーでもできる！

スマホアプリ開発手法

✦ App Storeでの

スマホアプリ公開フロー

✦ まとめ

セッションの

流れ

✦ 地方におけるスマホアプリ開発事情

✦ Web制作会社が直面する問題

✦ デザイナーでもできる！

スマホアプリ開発手法

✦ App Storeでの

スマホアプリ公開フロー

✦ まとめ

セッションの

流れ

特に、iPadが発売された頃から

案件として増加

iPhoneアプリって、簡単に作れるの？

こんな感じの、作りたいのだけど？

社内利用型

（利便性重視）

ユーザ利用型

（話題性重視）

•

_業務管理

•

_見積もり

•

_メニュー

•

_{病院の問診}

•

_学習教材

•

_{デジタルカタログ}

•

_{デジタルサイネージ}

•

_電子書籍

•

_ゲーム

コンシ

ュー

マの

認知レ

ベル

Android = AU

コンシ

ュー

マの

認知レ

ベル

スマホアプリ = スマホアプリ

コンシ

ュー

マの

認知レ

ベル

Webアプリでどこまで可能か？が曖昧

クライアントへの説明も曖昧に…

スマホアプリ？

Webアプリ？

✦ カメラ/センサー

（近接・加速度・NFCなど）

/

マイクなど、ハードウェアへのアクセスを

伴うアプリ

✦ アドレス帳やフォトアルバムなど、

システムリソースへのアクセスを伴うアプリ

✦ 他のアプリとの連携を伴うアプリ

✦ バックグラウンド動作も求められるアプリ

✦ 動作の高速性が求められるアプリ

スマホアプリ化

指針

•

App Store/Android Marketから

購入・ダウンロード・インストール

•

Objective-C/Javaで開発

スマホアプリ

要求仕様をまとめてみると…

•

Webブラウザを介して

Webサーバへアクセス

•

HTML5/CSS3/JavaScript

さらにPHPなどで開発

Webアプリ

（HTML5アプリ）

Webアプリで事足りる

ことがほとんど

✦ 地方におけるスマホアプリ開発事情

✦ Web制作会社が直面する問題

✦ デザイナーでもできる！

スマホアプリ開発手法

✦ App Storeでの

スマホアプリ公開フロー

✦ まとめ

セッションの

流れ

うちには

Objective-C/Javaが

できるスタッフは

•

ネイティブ系プログラミング言語を書ける

エンジニアをリソースとして抱えていない

JavaScript/Perl/PHP/Ruby/Pythonなど、Webスクリプト系言語を

書けるリソース確保は当然だが、Objective-C/Java/C#などを書ける

リソース（エンジニア）は、Web制作会社では抱え辛い。

•

外部委託するにしても…

SIerであれば100万円∼、フリーランスのエンジニアであっても50万円∼

程度で請けなければ、採算が取れない。

アプリの要求仕様をキチンとまとめられるスキルも必要。

リソー

スの

問題

ちなみに予算は

おいくらですか？

•

クライアントにおける

スマホアプリ開発費用の認識が甘い

アプリ開発がコンシューマにまで身近になったこと、

無料アプリ・サービスが飽和し、それが当然とまで考えられていることの弊害。

•

開発費用をペイできる要素がない

地元密着型のアプリなどは、現状収益性ゼロ。

話題性・収益性を求めるアプリは、スキームを相当に練る必要がある。

予算の問題

リソースと予算の問題を

越えられる方法は！？

✦ 地方におけるスマホアプリ開発事情

✦ Web制作会社が直面する問題

✦ デザイナーでもできる！

スマホアプリ開発手法

✦ App Storeでの

スマホアプリ公開フロー

✦ まとめ

セッションの

流れ

PhoneGap

•

ウェブ標準技術のみで開発可能

•

デバイスやシステムリソースへはJavaScriptでアクセス

•

Dreamweaver CS5.5では、

jQuery Mobile + PhoneGapを連携させた開発が可能

•

Xcodeへは、プロジェクトテンプレートが追加される

Titanium Mobile

•

専用開発環境 TitaniumStudio上で

JavaScript/Titanium Mobile APIのみで開発

var btnLaunchCamera = Titanium.UI.createButton({

title:"カメラ起動",

width:200,

height:50

});

btnLaunchCamera.addEventListener('click', function(){

Titanium.Media.showCamera({

success:function(event)

{

// 撮影に成功した場合の処理

},

cancel:function()

{

// 撮影をキャンセルした場合の処理

},

error:function(error)

{

// エラー処理

},

saveToPhotoGallery:true,

allowEditing:false,

mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO]

});

});

var btnLaunchCamera = Titanium.UI.createButton({

title:"カメラ起動",

width:200,

height:50

});

btnLaunchCamera.addEventListener('click', function(){

Titanium.Media.showCamera({

success:function(event)

{

// 撮影に成功した場合の処理

},

cancel:function()

{

// 撮影をキャンセルした場合の処理

},

error:function(error)

{

// エラー処理

},

saveToPhotoGallery:true,

allowEditing:false,

mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO]

});

});

var btnLaunchCamera = Titanium.UI.createButton({

title:"カメラ起動",

width:200,

height:50

});

btnLaunchCamera.addEventListener('click', function(){

Titanium.Media.showCamera({

success:function(event)

{

// 撮影に成功した場合の処理

},

cancel:function()

{

// 撮影をキャンセルした場合の処理

},

error:function(error)

{

// エラー処理

},

saveToPhotoGallery:true,

allowEditing:false,

mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO]

});

});

var btnLaunchCamera = Titanium.UI.createButton({

title:"カメラ起動",

width:200,

height:50

});

btnLaunchCamera.addEventListener('click', function(){

Titanium.Media.showCamera({

success:function(event)

{

// 撮影に成功した場合の処理

},

cancel:function()

{

// 撮影をキャンセルした場合の処理

},

error:function(error)

{

// エラー処理

},

saveToPhotoGallery:true,

allowEditing:false,

mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO]

});

});

var btnLaunchCamera = Titanium.UI.createButton({

title:"カメラ起動",

width:200,

height:50

});

btnLaunchCamera.addEventListener('click', function(){

Titanium.Media.showCamera({

success:function(event)

{

// 撮影に成功した場合の処理

},

cancel:function()

{

// 撮影をキャンセルした場合の処理

},

error:function(error)

{

// エラー処理

},

saveToPhotoGallery:true,

allowEditing:false,

mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO]

});

});

var btnLaunchCamera = Titanium.UI.createButton({

title:"カメラ起動",

width:200,

height:50

});

btnLaunchCamera.addEventListener('click', function(){

Titanium.Media.showCamera({

success:function(event)

{

// 撮影に成功した場合の処理

},

cancel:function()

{

// 撮影をキャンセルした場合の処理

},

error:function(error)

{

// エラー処理

},

saveToPhotoGallery:true,

allowEditing:false,

mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO]

});

});

var btnLaunchCamera = Titanium.UI.createButton({

title:"カメラ起動",

width:200,

height:50

});

btnLaunchCamera.addEventListener('click', function(){

Titanium.Media.showCamera({

success:function(event)

{

// 撮影に成功した場合の処理

},

cancel:function()

{

// 撮影をキャンセルした場合の処理

},

error:function(error)

{

// エラー処理

},

saveToPhotoGallery:true,

allowEditing:false,

mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO]

});

});

Corona

Air for iOS/Android

http://www.adobe.com/devent/devices/ios.html

http://www.adobe.com/devnet/devices/android.html

Unity

Titanium Mobile

HTML5+CSS3+JavaScriptで作成された

WebアプリをwrapしてUIWebView/WebView

で表示。jQueryとの親和性が高く、

取っ付きやすい。

JavaScriptで作成されたコードを

バイナリコードへ変換、処理が高速。

ネイティブUIをサポート

既存資産を活かしつつ

Liteなスマホアプリ開発

システムリソースを十分に活かす

Heavyなスマホアプリ開発

Titanium Mobile

HTML5+CSS3+JavaScriptで作成された

WebアプリをwrapしてUIWebView/WebView

で表示。jQueryとの親和性が高く、

取っ付きやすい。

JavaScriptで作成されたコードを

バイナリコードへ変換、処理が高速。

ネイティブUIをサポート

既存資産を活かしつつ

Liteなスマホアプリ開発

システムリソースを十分に活かす

Heavyなスマホアプリ開発

•

PhoneGapを利用する場合は、

端末毎のWebKitのバージョンに注意

PhoneGapは既存資産を活かせる上に、開発難易度も低い。

しかし、UIWebView/WebViewに依存する以上は、

端末毎のWebKitのバージョンの相違により、動作に差異が生じる可能性がある。

※特にAndroid Browser

注意

•

開発者登録

（個人/企業・グループ）

iOS Developer Programへの参加（購入）が必要。8,400円/年。

App StoreでXcodeを600円で購入することでも可能。

•

登録/審査

アプリの登録/更新毎に審査。

•

販売手数料

有料アプリの場合は30%の販売手数料が差し引かれる。

注意

✦ 地方におけるスマホアプリ開発事情

✦ Web制作会社が直面する問題

✦ デザイナーでもできる！

スマホアプリ開発手法

✦ App Storeでの

スマホアプリ公開フロー

✦ まとめ

セッションの

流れ

Apple IDの作成

開発用証明書署名要求の発行・申請と証明書取得

アプリ開発

iOS Developer Programへの参加（購入）

開発端末登録

アプリ登録

開発用プロビジョニングプロファイルの申請と取得

開発用プロビジョニングプロファイルを開発端末へ登録

開発端末登録

アプリ登録

開発用プロビジョニングプロファイルの申請と取得

開発用プロビジョニングプロファイルを開発端末へ登録

配布用証明書署名要求の発行・申請と証明書取得

配布用プロビジョニングプロファイルの申請と取得

配布用ビルドの作成

アプリのスクリーンショット、アイコン、サポートサイトの作成

スプラッシュイメージ

（起動時画像）

App Store用アイコン

配布用証明書署名要求の発行・申請と証明書取得

配布用プロビジョニングプロファイルの申請と取得

配布用ビルドの作成

アプリのスクリーンショット、アイコン、サポートサイトの作成

App Storeへ配布用ビルドのアップロード

App Storeによる審査

審査通過、App Storeでの公開

App Storeへ配布用ビルドのアップロード

App Storeによる審査

審査通過、App Storeでの公開

•

審査に要する日数に注意

審査を通過するか？はもちろん、審査・再審査の日時は

App Store任せなので、余裕を持って登録。

プレスリリースなどする場合は、特に注意。

•

審査基準に注意

ガイドラインは予め熟読。

reject対策まとめサイトなども参考に。

一旦審査通過したアプリが突然rejectされる

こともある。審査基準の曖昧さは有名。

注意

•

iOS SDKの規約変更に注意

Package for iPhoneが一時闇に葬られた事件のようなことが、

また起こらないとは言えない。

•

メモリ管理に注意

Titanium Mobileは自動でメモリ管理を行ってくれるが、

明示的に細かな解放はできない。

ゲームのようにリアルタイム性が求められるものなど、

重い上に高速処理が求められるアプリには向かない。

注意

•

ユーザレビューに注意

不具合が生じた際の対応には最大限の配慮が必要。

ネガティブ評価は簡単についてしまう。

好き放題なレビューに、心折れない強い精神力も必要！？

✦ 地方におけるスマホアプリ開発事情

✦ Web制作会社が直面する問題

✦ デザイナーでもできる！

スマホアプリ開発手法

✦ App Storeでの

スマホアプリ公開フロー

✦ まとめ

セッションの

流れ

•

スマートフォン向けアプリ開発案件は、

要件の見極めが肝心

※無理矢理スマホアプリにする必要はない

•

スマホアプリ開発が必要な場合も、

PhoneGapやTitanium Mobileなど代替手段を

検討してみる

※PhoneGapでは、スマートフォン向けサイト制作ノウハウや

 jQuery Mobileなどのスキルを資産として活用できる！

•

スマホアプリの登録/公開は余裕を持って

まとめ

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<video autoplay width="100%" height="100%"></video>

<script type="text/javascript">

var video = document.getElementsByTagName('video')[0];

if (navigator.getUserMedia)

{

navigator.getUserMedia('video', successCallback,

errorCallback);

function successCallback(stream)

{

video.src = stream;

}

function errorCallback(error){;}

}

</script>

</body>

</html>

Opera Mobileの開発版では、WHATWGで策定中の

Stream APIを実装しており、カメラで撮影される

•

将来的にブラウザ経由で

カメラやセンサー、システムリソースへ

アクセスできるようになる！？

WHATWGやDAPが様々なAPIを策定中。セキュリティの問題もあり、

どこまで実現できるかは不明だが、将来的には、Webアプリから

デバイスはもちろん、アドレス帳やカレンダーの操作も可能になるかもしれない。

※1 … Web Hypertext Application Technology Working Group（

http://whatwg.org

/）

※2 … Device APIs Working Group（

http://w3c.org/2009/dap/

）

今後の

展望

•

つまり、スマホアプリ = Webアプリ！？

必要に応じてPhoneGapやTitanium Mobileなどを利用しつつ、

Webアプリ（HTML5アプリ）時代への対応も視野に入れて

おくべき。

今後の

展望

Thank you for your attention.

ohtsuki2843

ohtsuki2843