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

2012/03/16朔　洋一郎（@saku2saku）

自己紹介• 名前

• 朔　洋一郎• Twitter: @saku2saku Facebook: facebook.com/saku2saku

• 趣味• プログラミング• 漫画読むこと• 読書• 料理• 趣味創り

製作• iPhoneアプリ

• 世界夜景旅行 for iPhone

• MusicPlayerSleepTimer• MusicPlayerSleepTimerFree

• iPadアプリ• 世界夜景旅行• 工場夜景探検

• Web• こみったー http://comitter.com/

• さくさく日記　http://iphonework.biz/

• iPhone Developer Workshophttp://workshop.iphonework.biz/

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

背景• 現在スマフォの利用率が急激に上昇している

• キャリアから出る端末も半分以上がスマフォ• 2011年９月のsankeibiz.jpの記事によれば2010年の国内アプリ市場規模は全体で約68億円あるとのこと• その中でもiOSがダントツのシェア

• また世界でみると、2010年のアプリ市場規模は約5400億円（約68億ドル）にのぼる• MarketsandMarkets によると2015年には約2兆円（約250億ドル）に成長するとの予測

http://www.sankeibiz.jp/macro/photos/110907/mca1109070503002-p1.htm

アプリ市場に対するWebデザイナの戦略

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

1.Webアプリケーションを作りスマフォのWebブラウザで対応する

2.Webデザイナの技術領域でスマフォアプリを作る

必要とされるWebデザイナの技術領域

• 基本知識• HTML5• JavaScript• CSS3

• フレームワーク• JQuery Mobile

• ツール• DreamWeaver CS5.5• XCode（アプリの場合）• Eclipse（アプリの場合）• etc...

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

JQuery Mobileの学習• 書籍で勉強

• jQuery Mobile スマートフォンサイト デザイン入門

• 動画で勉強• ドットインストール http://dotinstall.com/

• JQuery Mobileの基礎• http://dotinstall.com/lessons/basic_jquery_mobile

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

• 最近の講座• iOSプログラミングの基礎• PHPの基礎• MySQLの基礎• Twitter Bootstrap• etc...

2. Webデザイナの技術領域でスマフォアプリを作る

• ネイティブのスマフォアプリを作るのに必要な技術• iOS では Objective-C の知識が必要• Android では Java の知識が必要

Webデザイナが取り組むにはハードルが高かった

近年のアプリ製作• HTML5, CSS3, Javascript の技術を使ってネイティブアプリを作成できるフレームワークが登場してきた• Titanium Mobile

• http://www.appcelerator.com/• PhoneGap(Cordova)

• http://phonegap.com/• GameSalad

• http://gamesalad.com/

Titanium Mobile• Apache Licence Version 2.0 のため商用利用も可能• Javascriptで開発、ネイティブコードに変換してビルドしてアプリを作成

• カメラや加速度センサ、GPSなどの機能も利用可能• Titanium Moibleベースで作られているアプリ

• MogSnap• Alerm Everyone• Liblis

PhoneGap(Cordova)• Apache Licence Version 2.0 のため商用利用も可能

• HTML5, CSS3, Javascript で開発、各プラットフォームの開発ツールでそのままビルドしてアプリを作成• 実際にはスマフォのブラウザを起動して、その上でアプリを動作させている

• ブラウザの上で動くといっても、ブラウザからネイティブのAPIをたたくため、カメラや加速度センサなんかも使えます

PhoneGap(Cordova)

http://phonegap.com/about/features

PhoneGap(Cordova)• PhoneGap(Cordova)はJQuery Mobileをベースに作ることも可能

• つまり・・・• JQuery MobileでWebページを作りつつ• iPhoneアプリやAndroidアプリも製作可能！

• まだPhoneGap(Cordova)関連の書籍は少ないけれど、近いうちPhoneGap(Cordova)とJQuery Mobileの組み合わせ開発の書籍も出るみたいです

GameSalad• HTML5, CSS3, Javascript で開発

• ライセンスはFreeと、Pro（$499/年）の２つ

• GUIベースでゲームを作っていける

GameSalad• 日本語での書籍や情報はまだあまり無い様子• ただ、日本でも勉強会やセミナーなどもある

• Game salad Meetup• 株式会社 Hatchup 主催の勉強会• http://www.socialtoprunners.jp/app-school/

gamesalad/• iPhoneゲームアプリコース

• Rainbow Apps主催のアプリスクール（有料）• http://school.rainbowapps.com/game

余談：Unity• iOSアプリやAndroidアプリだけでなく、PS3 やら Wii やらにも出力可能

• 開発言語は C# や、Javascript

• ライセンスはフリーのものからProアカウントでは$1,500するものもある

• 3Dゲームを作るのに適した開発フレームワーク

ミートアップイベント• Webアプリやスマフォアプリなどのアプリ製作コンテストやイベントがあります• MashupAward• ソーシャルアプリコンテスト

• 最近ではコンテストだけではなく、様々な能力（プログラミング、デザイン、企画、etc）を持った人材をミートアップするようなイベントもある• Mashup Meetup• Startup Weekend Tokyo