Webデザイナにも作れる!スマフォアプリ基礎知識       2012/03/16   朔 洋一郎(@saku2saku)
自己紹介•   名前    •   朔 洋一郎    •Twitter: @saku2saku Facebook: facebook.com/saku2saku•   趣味    •   プログラミング    •   漫画読むこと    •  ...
製作•   iPhoneアプリ    •   世界夜景旅行 for iPhone    •  MusicPlayerSleepTimer    •  MusicPlayerSleepTimerFree•   iPadアプリ    •   世界夜...
Webデザイナにも作れる!スマフォアプリ基礎知識
背景•   現在スマフォの利用率が急激に上昇している    •   キャリアから出る端末も半分以上がスマフォ•   2011年9月のsankeibiz.jpの記事によれば2010年の国内アプリ市場規    模は全体で約68億円あるとのこと   ...
アプリ市場に対する     Webデザイナの戦略•   これらの市場に対してプログラマではなくWebデザ    イナはどうリーチしていくべきか?    1.Webアプリケーションを作り    スマフォのWebブラウザで対応する    2.Web...
必要とされる    Webデザイナの技術領域•   基本知識    •   HTML5    •   JavaScript    •   CSS3•   フレームワーク    •   JQuery Mobile•   ツール    •   Dr...
1. Webアプリケーションを作りスマフォのWebブラウザで対応する•   JQuery Mobileなどのクロスプラットフォームフレーム    ワークを活用する    •   http://jquerymobile.com/•   JQuer...
JQuery Mobileの学習•   書籍で勉強    •   jQuery Mobile スマートフォンサイト デザイン入門•   動画で勉強    •   ドットインストール http://dotinstall.com/    •   J...
余談:ドットインストール•   最近学習をテーマにしたサイトがいくつかオープンしています•   その中でもドットインストールはハンズオンで説明される動画    を見ながら学習ができて便利!    •   1回分の動画も3分程度になっていて気軽に...
2. Webデザイナの技術領域で        スマフォアプリを作る•   ネイティブのスマフォアプリを作るのに必要な技術    •   iOS では Objective-C の知識が必要    •   Android では Java の知識が...
近年のアプリ製作•   HTML5, CSS3, Javascript の技術を使ってネイティブア    プリを作成できるフレームワークが登場してきた    • Titanium Mobile      • http://www.appcele...
Titanium Mobile•   Apache Licence Version 2.0 のため商用利用も可能•   Javascriptで開発、ネイティブコードに変換してビル    ドしてアプリを作成•   カメラや加速度センサ、GPSなど...
PhoneGap(Cordova)•   Apache Licence Version 2.0 のため商用利用も可能•   HTML5, CSS3, Javascript で開発、各プラットフォーム    の開発ツールでそのままビルドしてアプリ...
PhoneGap(Cordova)  http://phonegap.com/about/features
PhoneGap(Cordova)•   PhoneGap(Cordova)はJQuery Mobileをベースに作るこ    とも可能•   つまり・・・    •   JQuery MobileでWebページを作りつつ    •   iPh...
GameSalad•   HTML5, CSS3, Javascript で    開発•   ライセンスはFreeと、    Pro($499/年)の2つ•   GUIベースでゲームを    作っていける
GameSalad•   日本語での書籍や情報はまだあまり無い様子•   ただ、日本でも勉強会やセミナーなどもある    •   Game salad Meetup        • 株式会社 Hatchup 主催の勉強会        •  ...
余談:Unity•   iOSアプリやAndroidアプリだけ    でなく、PS3 やら Wii やらにも出    力可能•   開発言語は C# や、Javascript•   ライセンスはフリーのものから    Proアカウントでは$1,...
ミートアップイベント•   Webアプリやスマフォアプリなどのアプリ製作コン    テストやイベントがあります    •   MashupAward    •   ソーシャルアプリコンテスト•   最近ではコンテストだけではなく、様々な能力(プ...
Upcoming SlideShare
Loading in...5
×

20120316 designerworkshoppublished

1,106

Published on

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

No Downloads
Views
Total Views
1,106
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
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
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×