1. Webデザイナにも作れる！
スマフォアプリ基礎知識
2012/04/13
朔 洋一郎（@saku2saku）

2. 自己紹介
• 名前
• 朔 洋一郎
•Twitter: @saku2saku Facebook: facebook.com/saku2saku
• 趣味
• プログラミング
• 漫画読むこと
• 読書
• 料理
• 趣味創り

3. 製作
• iPhoneアプリ
• 世界夜景旅行 for iPhone
• MusicPlayerSleepTimer
• MusicPlayerSleepTimerFree
• iPadアプリ
• 世界夜景旅行
• 工場夜景探検
• Web
• さくさく日記 http://iphonework.biz/
• iPhone Developer Workshop
http://workshop.iphonework.biz/

4. Webデザイナにも作れる！
スマフォアプリ基礎知識

5. 背景
• 現在スマフォの利用率が急激に上昇している
• キャリアから出る端末も半分以上がスマフォ
• 2011年９月のsankeibiz.jpの記事によれば2010年の国内アプリ市場規
模は全体で約68億円あるとのこと
• その中でもiOSがダントツのシェア
• また世界でみると、2010年の
アプリ市場規模は約5400億円
（約68億ドル）にのぼる
• MarketsandMarkets によると2015年
には約2兆円（約250億ドル）に成長する
との予測
http://www.sankeibiz.jp/macro/photos/110907/mca1109070503002-p1.htm

6. アプリ市場に対する
Webデザイナの戦略
• これらの市場に対してプログラマではなくWebデザ
イナはどうリーチしていくべきか？

7. アプリ市場に対する
Webデザイナの戦略
• これらの市場に対してプログラマではなくWebデザ
イナはどうリーチしていくべきか？
1.Webアプリケーションを作り
スマフォのWebブラウザで対応する

8. アプリ市場に対する
Webデザイナの戦略
• これらの市場に対してプログラマではなくWebデザ
イナはどうリーチしていくべきか？
1.Webアプリケーションを作り
スマフォのWebブラウザで対応する
2.Webデザイナの技術領域で
スマフォアプリを作る

9. 必要とされる
Webデザイナの技術領域
• 基本知識
• HTML5
• JavaScript
• CSS3
• フレームワーク
• JQuery Mobile
• ツール
• DreamWeaver CS5.5
• XCode（アプリの場合）
• Eclipse（アプリの場合）
• etc...

10. 1. Webアプリケーションを作り
スマフォのWebブラウザで対応する
• JQuery Mobileなどのクロスプラットフォームフレーム
ワークを活用する
• http://jquerymobile.com/
• JQuery Mobileとは？
• iOS や Android のブラウザで同一に表示される
サイトを作成するためのフレームワーク
• DreamWeaver CS5.5 はJQuery Mobileでの開発をサポート
• http://www.adobe.com/jp/products/dreamweaver.html

11. JQuery Mobileの学習
• 書籍で勉強
• jQuery Mobile スマートフォンサイト デザイン入門
• 動画で勉強
• ドットインストール http://dotinstall.com/
• JQuery Mobileの基礎
• http://dotinstall.com/lessons/basic_jquery_mobile

12. 余談：ドットインストール
• 最近学習をテーマにしたサイトがいくつかオープンしています
• その中でもドットインストールはハンズオンで説明される動画
を見ながら学習ができて便利！
• １回分の動画も３分程度になっていて気軽にスタートできる
• 最近の講座
• iOSプログラミングの基礎
• PHPの基礎
• MySQLの基礎
• Twitter Bootstrap
• etc...

13. 2. Webデザイナの技術領域で
スマフォアプリを作る
• ネイティブのスマフォアプリを作るのに必要な技術
• iOS では Objective-C の知識が必要
• Android では Java の知識が必要

14. 2. Webデザイナの技術領域で
スマフォアプリを作る
• ネイティブのスマフォアプリを作るのに必要な技術
• iOS では Objective-C の知識が必要
• Android では Java の知識が必要
Webデザイナが取り組むには
ハードルが高かった

15. 近年のアプリ製作
• HTML5, CSS3, Javascript の技術を使ってネイティブア
プリを作成できるフレームワークが登場してきた
• Titanium Mobile
• http://www.appcelerator.com/
• PhoneGap(Cordova)
• http://phonegap.com/
• GameSalad
• http://gamesalad.com/

16. Titanium Mobile
• Apache Licence Version 2.0 のため商用利用も可能
• Javascriptで開発、ネイティブコードに変換してビル
ドしてアプリを作成
• カメラや加速度センサ、GPSなどの機能も利用可能
• Titanium Moibleベースで作られているアプリ
• MogSnap
• Alerm Everyone
• Liblis

17. PhoneGap(Cordova)
• Apache Licence Version 2.0 のため商用利用も可能
• HTML5, CSS3, Javascript で開発、各プラットフォーム
の開発ツールでそのままビルドしてアプリを作成
• 実際にはスマフォのブラウザを起動して、その上
でアプリを動作させている
• ブラウザの上で動くといっても、ブラウザからネ
イティブのAPIをたたくため、カメラや加速度セン
サなんかも使えます

18. PhoneGap(Cordova)
http://phonegap.com/about/features

19. PhoneGap(Cordova)
• PhoneGap(Cordova)はJQuery Mobileをベースに作るこ
とも可能
• つまり・・・
• JQuery MobileでWebページを作りつつ
• iPhoneアプリやAndroidアプリも製作可能！
• まだPhoneGap(Cordova)関連の書籍は少ないけれど、
近いうちPhoneGap(Cordova)とJQuery Mobileの組み合
わせ開発の書籍も出るみたいです

20. GameSalad
• HTML5, CSS3, Javascript で
開発
• ライセンスはFreeと、
Pro（$499/年）の２つ
• GUIベースでゲームを
作っていける

21. GameSalad
• 日本語での書籍や情報はまだあまり無い様子
• ただ、日本でも勉強会やセミナーなどもある
• Game salad Meetup
• 株式会社 Hatchup 主催の勉強会
• http://www.socialtoprunners.jp/app-school/
gamesalad/
• iPhoneゲームアプリコース
• Rainbow Apps主催のアプリスクール（有料）
• http://school.rainbowapps.com/game

22. 余談：Unity
• iOSアプリやAndroidアプリだけ
でなく、PS3 やら Wii やらにも出
力可能
• 開発言語は C# や、Javascript
• ライセンスはフリーのものから
Proアカウントでは$1,500するも
のもある
• 3Dゲームを作るのに適した開発
フレームワーク

23. ミートアップイベント
• Webアプリやスマフォアプリなどのアプリ製作コン
テストやイベントがあります
• MashupAward
• ソーシャルアプリコンテスト
• 最近ではコンテストだけではなく、様々な能力（プ
ログラミング、デザイン、企画、etc）を持った人材
をミートアップするようなイベントもある
• Mashup Meetup
• Startup Weekend Tokyo

24. PhoneGap(Cordova)の
サンプルコード
• 今回は簡単なサンプルとして、Hello Cordovaアプリを作成する
コードを作ってみます
• ページ遷移をします
• Helloボタンを押すと「Hello Cordova」とAlertダイアログ
が表示されます
• サンプルコードは以下からダウンロードできます
• http://iphonework.biz/wp-content/uploads/2012/04/
HelloCordova.zip
• 実行にはXCodeが必要になります
• ソースコードの内容を見る場合はwwwフォルダ以下の
ファイルの内容を参照してください