Más contenido relacionado
La actualidad más candente (19)
Similar a 20120316 designerworkshoppublished (20)
Más de Yoichiro Sakurai (19)
20120316 designerworkshoppublished
- 2. 自己紹介
• 名前
• 朔 洋一郎
•Twitter: @saku2saku Facebook: facebook.com/saku2saku
• 趣味
• プログラミング
• 漫画読むこと
• 読書
• 料理
• 趣味創り
- 3. 製作
• iPhoneアプリ
• 世界夜景旅行 for iPhone
• MusicPlayerSleepTimer
• MusicPlayerSleepTimerFree
• iPadアプリ
• 世界夜景旅行
• 工場夜景探検
• Web
• こみったー http://comitter.com/
• さくさく日記 http://iphonework.biz/
• iPhone Developer Workshop
http://workshop.iphonework.biz/
- 5. 背景
• 現在スマフォの利用率が急激に上昇している
• キャリアから出る端末も半分以上がスマフォ
• 2011年9月の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デザ
イナはどうリーチしていくべきか?
1.Webアプリケーションを作り
スマフォのWebブラウザで対応する
2.Webデザイナの技術領域で
スマフォアプリを作る
- 7. 必要とされる
Webデザイナの技術領域
• 基本知識
• HTML5
• JavaScript
• CSS3
• フレームワーク
• JQuery Mobile
• ツール
• DreamWeaver CS5.5
• XCode(アプリの場合)
• Eclipse(アプリの場合)
• etc...
- 8. 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
- 9. JQuery Mobileの学習
• 書籍で勉強
• jQuery Mobile スマートフォンサイト デザイン入門
• 動画で勉強
• ドットインストール http://dotinstall.com/
• JQuery Mobileの基礎
• http://dotinstall.com/lessons/basic_jquery_mobile
- 10. 余談:ドットインストール
• 最近学習をテーマにしたサイトがいくつかオープンしています
• その中でもドットインストールはハンズオンで説明される動画
を見ながら学習ができて便利!
• 1回分の動画も3分程度になっていて気軽にスタートできる
• 最近の講座
• iOSプログラミングの基礎
• PHPの基礎
• MySQLの基礎
• Twitter Bootstrap
• etc...
- 11. 2. Webデザイナの技術領域で
スマフォアプリを作る
• ネイティブのスマフォアプリを作るのに必要な技術
• iOS では Objective-C の知識が必要
• Android では Java の知識が必要
Webデザイナが取り組むには
ハードルが高かった
- 12. 近年のアプリ製作
• HTML5, CSS3, Javascript の技術を使ってネイティブア
プリを作成できるフレームワークが登場してきた
• Titanium Mobile
• http://www.appcelerator.com/
• PhoneGap(Cordova)
• http://phonegap.com/
• GameSalad
• http://gamesalad.com/
- 13. Titanium Mobile
• Apache Licence Version 2.0 のため商用利用も可能
• Javascriptで開発、ネイティブコードに変換してビル
ドしてアプリを作成
• カメラや加速度センサ、GPSなどの機能も利用可能
• Titanium Moibleベースで作られているアプリ
• MogSnap
• Alerm Everyone
• Liblis
- 14. PhoneGap(Cordova)
• Apache Licence Version 2.0 のため商用利用も可能
• HTML5, CSS3, Javascript で開発、各プラットフォーム
の開発ツールでそのままビルドしてアプリを作成
• 実際にはスマフォのブラウザを起動して、その上
でアプリを動作させている
• ブラウザの上で動くといっても、ブラウザからネ
イティブのAPIをたたくため、カメラや加速度セン
サなんかも使えます
- 16. PhoneGap(Cordova)
• PhoneGap(Cordova)はJQuery Mobileをベースに作るこ
とも可能
• つまり・・・
• JQuery MobileでWebページを作りつつ
• iPhoneアプリやAndroidアプリも製作可能!
• まだPhoneGap(Cordova)関連の書籍は少ないけれど、
近いうちPhoneGap(Cordova)とJQuery Mobileの組み合
わせ開発の書籍も出るみたいです
- 17. GameSalad
• HTML5, CSS3, Javascript で
開発
• ライセンスはFreeと、
Pro($499/年)の2つ
• GUIベースでゲームを
作っていける
- 18. GameSalad
• 日本語での書籍や情報はまだあまり無い様子
• ただ、日本でも勉強会やセミナーなどもある
• Game salad Meetup
• 株式会社 Hatchup 主催の勉強会
• http://www.socialtoprunners.jp/app-school/
gamesalad/
• iPhoneゲームアプリコース
• Rainbow Apps主催のアプリスクール(有料)
• http://school.rainbowapps.com/game
- 19. 余談:Unity
• iOSアプリやAndroidアプリだけ
でなく、PS3 やら Wii やらにも出
力可能
• 開発言語は C# や、Javascript
• ライセンスはフリーのものから
Proアカウントでは$1,500するも
のもある
• 3Dゲームを作るのに適した開発
フレームワーク
- 20. ミートアップイベント
• Webアプリやスマフォアプリなどのアプリ製作コン
テストやイベントがあります
• MashupAward
• ソーシャルアプリコンテスト
• 最近ではコンテストだけではなく、様々な能力(プ
ログラミング、デザイン、企画、etc)を持った人材
をミートアップするようなイベントもある
• Mashup Meetup
• Startup Weekend Tokyo