20120316 designerworkshoppublished

1,313 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,313
On SlideShare
0
From Embeds
0
Number of Embeds
125
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

20120316 designerworkshoppublished

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

×