Suche senden
Hochladen
ABC2012Spring 20120324
•
2 gefällt mir
•
1,179 views
Tak Inamori
Folgen
Technologie
Melden
Teilen
Melden
Teilen
1 von 60
Empfohlen
Android UIデザイン入門
Android UIデザイン入門
OESF Education
Unityのオンラインゲームをhtmlに移植してわかったこと
Unityのオンラインゲームをhtmlに移植してわかったこと
Kouji Hosoda
デブサミ2013 【15-B-2】iOS/Android向け開発をビジュアルに!
デブサミ2013 【15-B-2】iOS/Android向け開発をビジュアルに!
hmimura_embarcadero
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
Keisuke Todoroki
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
Nobuya Sato
ゲームエンジンの文法【UE4】No.002 Ue4 Epic Games Launcherについて
ゲームエンジンの文法【UE4】No.002 Ue4 Epic Games Launcherについて
Tatsuya Iwama
Android向けUnity製ゲーム最適化のためのCI/CDと連携した自動プロファイリングシステム
Android向けUnity製ゲーム最適化のためのCI/CDと連携した自動プロファイリングシステム
KLab Inc. / Tech
ゲームエンジンの文法【UE4 練習 】No.005 Gameplay Frameworkの理解
ゲームエンジンの文法【UE4 練習 】No.005 Gameplay Frameworkの理解
Tatsuya Iwama
Empfohlen
Android UIデザイン入門
Android UIデザイン入門
OESF Education
Unityのオンラインゲームをhtmlに移植してわかったこと
Unityのオンラインゲームをhtmlに移植してわかったこと
Kouji Hosoda
デブサミ2013 【15-B-2】iOS/Android向け開発をビジュアルに!
デブサミ2013 【15-B-2】iOS/Android向け開発をビジュアルに!
hmimura_embarcadero
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
Keisuke Todoroki
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
Nobuya Sato
ゲームエンジンの文法【UE4】No.002 Ue4 Epic Games Launcherについて
ゲームエンジンの文法【UE4】No.002 Ue4 Epic Games Launcherについて
Tatsuya Iwama
Android向けUnity製ゲーム最適化のためのCI/CDと連携した自動プロファイリングシステム
Android向けUnity製ゲーム最適化のためのCI/CDと連携した自動プロファイリングシステム
KLab Inc. / Tech
ゲームエンジンの文法【UE4 練習 】No.005 Gameplay Frameworkの理解
ゲームエンジンの文法【UE4 練習 】No.005 Gameplay Frameworkの理解
Tatsuya Iwama
20111031 MobileWeb at TDC
20111031 MobileWeb at TDC
Nobuhiro Sue
はじめようMixed Reality Immersive編
はじめようMixed Reality Immersive編
Shinya Tachihara
Adobe Primetime & Adobe Marketing Cloud: オールスクリーン対応のプレミアム動画事業収益化ソリューション
Adobe Primetime & Adobe Marketing Cloud: オールスクリーン対応のプレミアム動画事業収益化ソリューション
Teiichi Ota
MRTK-Unreal(UX Tools) を利用した HoloLens 2 アプリ開発 | UNREAL FEST EXTREME 2020 WINTER
MRTK-Unreal(UX Tools) を利用した HoloLens 2 アプリ開発 | UNREAL FEST EXTREME 2020 WINTER
エピック・ゲームズ・ジャパン Epic Games Japan
Androidプログラミング入門
Androidプログラミング入門
OESF Education
Css nite(2010.09.23)
Css nite(2010.09.23)
Yoshiki Ushida
HoloLensとWindows Mixed Reality が実現する新しい世界
HoloLensとWindows Mixed Reality が実現する新しい世界
Kaoru NAKAMURA
デスクトップアプリ開発者が押さえておくべきWindows 8 時代の変革
デスクトップアプリ開発者が押さえておくべきWindows 8 時代の変革
Yuya Yamaki
Android カスタムROMの作り方
Android カスタムROMの作り方
Masahiro Hidaka
見よう見まねでやってみる2D流体シミュレーション
見よう見まねでやってみる2D流体シミュレーション
KLab Inc. / Tech
「宴」実装時に得られたUnityプログラムノウハウ
「宴」実装時に得られたUnityプログラムノウハウ
Ryohei Tokimura
HTML5/JavaScriptで作るAndroidアプリ開発seminar
HTML5/JavaScriptで作るAndroidアプリ開発seminar
kujirahand kujira
市場動向並びに弊社製品の今後の展望について
市場動向並びに弊社製品の今後の展望について
Ken Azuma
新次元ゲーム開発セミナー キーノート (Oct-18, 2012)
新次元ゲーム開発セミナー キーノート (Oct-18, 2012)
Daniel-Hiroyuki Haga
「もののけ大戦“陣”」製作事例
「もののけ大戦“陣”」製作事例
Ryohei Tokimura
UnityとBlenderハンズオン第8章
UnityとBlenderハンズオン第8章
yaju88
はじめてのAndroid開発
はじめてのAndroid開発
Katsumi Honda
GREE TechTalk グリーのクライアント技術戦略
GREE TechTalk グリーのクライアント技術戦略
Daniel-Hiroyuki Haga
UnityによるHoloLensアプリケーション入門
UnityによるHoloLensアプリケーション入門
Yuichi Ishii
カスタムROM開発者の視点から見たAndroid
カスタムROM開発者の視点から見たAndroid
android sola
PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化
Takashi Okamoto
これからのNOTESモバイルアプリはこう作れ
これからのNOTESモバイルアプリはこう作れ
Mitsuru Katoh
Weitere ähnliche Inhalte
Was ist angesagt?
20111031 MobileWeb at TDC
20111031 MobileWeb at TDC
Nobuhiro Sue
はじめようMixed Reality Immersive編
はじめようMixed Reality Immersive編
Shinya Tachihara
Adobe Primetime & Adobe Marketing Cloud: オールスクリーン対応のプレミアム動画事業収益化ソリューション
Adobe Primetime & Adobe Marketing Cloud: オールスクリーン対応のプレミアム動画事業収益化ソリューション
Teiichi Ota
MRTK-Unreal(UX Tools) を利用した HoloLens 2 アプリ開発 | UNREAL FEST EXTREME 2020 WINTER
MRTK-Unreal(UX Tools) を利用した HoloLens 2 アプリ開発 | UNREAL FEST EXTREME 2020 WINTER
エピック・ゲームズ・ジャパン Epic Games Japan
Androidプログラミング入門
Androidプログラミング入門
OESF Education
Css nite(2010.09.23)
Css nite(2010.09.23)
Yoshiki Ushida
HoloLensとWindows Mixed Reality が実現する新しい世界
HoloLensとWindows Mixed Reality が実現する新しい世界
Kaoru NAKAMURA
デスクトップアプリ開発者が押さえておくべきWindows 8 時代の変革
デスクトップアプリ開発者が押さえておくべきWindows 8 時代の変革
Yuya Yamaki
Android カスタムROMの作り方
Android カスタムROMの作り方
Masahiro Hidaka
見よう見まねでやってみる2D流体シミュレーション
見よう見まねでやってみる2D流体シミュレーション
KLab Inc. / Tech
「宴」実装時に得られたUnityプログラムノウハウ
「宴」実装時に得られたUnityプログラムノウハウ
Ryohei Tokimura
HTML5/JavaScriptで作るAndroidアプリ開発seminar
HTML5/JavaScriptで作るAndroidアプリ開発seminar
kujirahand kujira
市場動向並びに弊社製品の今後の展望について
市場動向並びに弊社製品の今後の展望について
Ken Azuma
新次元ゲーム開発セミナー キーノート (Oct-18, 2012)
新次元ゲーム開発セミナー キーノート (Oct-18, 2012)
Daniel-Hiroyuki Haga
「もののけ大戦“陣”」製作事例
「もののけ大戦“陣”」製作事例
Ryohei Tokimura
UnityとBlenderハンズオン第8章
UnityとBlenderハンズオン第8章
yaju88
はじめてのAndroid開発
はじめてのAndroid開発
Katsumi Honda
GREE TechTalk グリーのクライアント技術戦略
GREE TechTalk グリーのクライアント技術戦略
Daniel-Hiroyuki Haga
UnityによるHoloLensアプリケーション入門
UnityによるHoloLensアプリケーション入門
Yuichi Ishii
カスタムROM開発者の視点から見たAndroid
カスタムROM開発者の視点から見たAndroid
android sola
Was ist angesagt?
(20)
20111031 MobileWeb at TDC
20111031 MobileWeb at TDC
はじめようMixed Reality Immersive編
はじめようMixed Reality Immersive編
Adobe Primetime & Adobe Marketing Cloud: オールスクリーン対応のプレミアム動画事業収益化ソリューション
Adobe Primetime & Adobe Marketing Cloud: オールスクリーン対応のプレミアム動画事業収益化ソリューション
MRTK-Unreal(UX Tools) を利用した HoloLens 2 アプリ開発 | UNREAL FEST EXTREME 2020 WINTER
MRTK-Unreal(UX Tools) を利用した HoloLens 2 アプリ開発 | UNREAL FEST EXTREME 2020 WINTER
Androidプログラミング入門
Androidプログラミング入門
Css nite(2010.09.23)
Css nite(2010.09.23)
HoloLensとWindows Mixed Reality が実現する新しい世界
HoloLensとWindows Mixed Reality が実現する新しい世界
デスクトップアプリ開発者が押さえておくべきWindows 8 時代の変革
デスクトップアプリ開発者が押さえておくべきWindows 8 時代の変革
Android カスタムROMの作り方
Android カスタムROMの作り方
見よう見まねでやってみる2D流体シミュレーション
見よう見まねでやってみる2D流体シミュレーション
「宴」実装時に得られたUnityプログラムノウハウ
「宴」実装時に得られたUnityプログラムノウハウ
HTML5/JavaScriptで作るAndroidアプリ開発seminar
HTML5/JavaScriptで作るAndroidアプリ開発seminar
市場動向並びに弊社製品の今後の展望について
市場動向並びに弊社製品の今後の展望について
新次元ゲーム開発セミナー キーノート (Oct-18, 2012)
新次元ゲーム開発セミナー キーノート (Oct-18, 2012)
「もののけ大戦“陣”」製作事例
「もののけ大戦“陣”」製作事例
UnityとBlenderハンズオン第8章
UnityとBlenderハンズオン第8章
はじめてのAndroid開発
はじめてのAndroid開発
GREE TechTalk グリーのクライアント技術戦略
GREE TechTalk グリーのクライアント技術戦略
UnityによるHoloLensアプリケーション入門
UnityによるHoloLensアプリケーション入門
カスタムROM開発者の視点から見たAndroid
カスタムROM開発者の視点から見たAndroid
Ähnlich wie ABC2012Spring 20120324
PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化
Takashi Okamoto
これからのNOTESモバイルアプリはこう作れ
これからのNOTESモバイルアプリはこう作れ
Mitsuru Katoh
アプリリリース後に後悔しないための20のこと
アプリリリース後に後悔しないための20のこと
leverages_event
20120413 nestakabaneworkshop
20120413 nestakabaneworkshop
Yoichiro Sakurai
HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋
HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋
Staffnet_Inc
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Tsutomu Ogasawara
Webエンジニアによるスマートフォンアプリ開発
Webエンジニアによるスマートフォンアプリ開発
takeuchi-tk
Jqm20120804 publish
Jqm20120804 publish
Takashi Okamoto
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
Takashi Okamoto
20120316 designerworkshoppublished
20120316 designerworkshoppublished
Yoichiro Sakurai
もっと良くなるHTMLアプリケーション設計と実装
もっと良くなるHTMLアプリケーション設計と実装
Mitsue-Links
Ignite UI 2012 最新情報 jQuery Mobile 編
Ignite UI 2012 最新情報 jQuery Mobile 編
インフラジスティックス・ジャパン株式会社
第2回ビジネスモバイル研究会
第2回ビジネスモバイル研究会
Shuichi Yukimoto
Intalio japan special cloud workshop
Intalio japan special cloud workshop
Daisuke Sugai
HTML5でできるカメラアプリを実際に体験しよう
HTML5でできるカメラアプリを実際に体験しよう
Hideki Akiba
スタートアップ向け!1人日でできるサービスの高速化方法と成果
スタートアップ向け!1人日でできるサービスの高速化方法と成果
Koichiro Sumi
[Jagys]android41+開発ツール紹介
[Jagys]android41+開発ツール紹介
Kenichi Kambara
Phone gap+javascriptスマホアプリ開発(入門編)
Phone gap+javascriptスマホアプリ開発(入門編)
Monaca
Windows 8 Developers カンファレンス
Windows 8 Developers カンファレンス
Kaoru NAKAMURA
PhoneGapユーザー会@大阪 講演資料
PhoneGapユーザー会@大阪 講演資料
Monaca
Ähnlich wie ABC2012Spring 20120324
(20)
PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化
これからのNOTESモバイルアプリはこう作れ
これからのNOTESモバイルアプリはこう作れ
アプリリリース後に後悔しないための20のこと
アプリリリース後に後悔しないための20のこと
20120413 nestakabaneworkshop
20120413 nestakabaneworkshop
HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋
HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Webエンジニアによるスマートフォンアプリ開発
Webエンジニアによるスマートフォンアプリ開発
Jqm20120804 publish
Jqm20120804 publish
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
20120316 designerworkshoppublished
20120316 designerworkshoppublished
もっと良くなるHTMLアプリケーション設計と実装
もっと良くなるHTMLアプリケーション設計と実装
Ignite UI 2012 最新情報 jQuery Mobile 編
Ignite UI 2012 最新情報 jQuery Mobile 編
第2回ビジネスモバイル研究会
第2回ビジネスモバイル研究会
Intalio japan special cloud workshop
Intalio japan special cloud workshop
HTML5でできるカメラアプリを実際に体験しよう
HTML5でできるカメラアプリを実際に体験しよう
スタートアップ向け!1人日でできるサービスの高速化方法と成果
スタートアップ向け!1人日でできるサービスの高速化方法と成果
[Jagys]android41+開発ツール紹介
[Jagys]android41+開発ツール紹介
Phone gap+javascriptスマホアプリ開発(入門編)
Phone gap+javascriptスマホアプリ開発(入門編)
Windows 8 Developers カンファレンス
Windows 8 Developers カンファレンス
PhoneGapユーザー会@大阪 講演資料
PhoneGapユーザー会@大阪 講演資料
Mehr von Tak Inamori
お名前.comリニューアルの舞台裏(炎上編)
お名前.comリニューアルの舞台裏(炎上編)
Tak Inamori
今年は高田純次UXDが流行る -適当の美学-
今年は高田純次UXDが流行る -適当の美学-
Tak Inamori
Apple Watch vs Android Wear
Apple Watch vs Android Wear
Tak Inamori
GTB2015Spring_Webサービスとインターネットの歴史
GTB2015Spring_Webサービスとインターネットの歴史
Tak Inamori
スマートフォンUIおさらい スマホUI勉強会 -iPhone6で変わるUI、変わらないUI-
スマートフォンUIおさらい スマホUI勉強会 -iPhone6で変わるUI、変わらないUI-
Tak Inamori
20140825_spapps
20140825_spapps
Tak Inamori
HTML5 browser Apps [ Hoolegan ]
HTML5 browser Apps [ Hoolegan ]
Tak Inamori
Mehr von Tak Inamori
(7)
お名前.comリニューアルの舞台裏(炎上編)
お名前.comリニューアルの舞台裏(炎上編)
今年は高田純次UXDが流行る -適当の美学-
今年は高田純次UXDが流行る -適当の美学-
Apple Watch vs Android Wear
Apple Watch vs Android Wear
GTB2015Spring_Webサービスとインターネットの歴史
GTB2015Spring_Webサービスとインターネットの歴史
スマートフォンUIおさらい スマホUI勉強会 -iPhone6で変わるUI、変わらないUI-
スマートフォンUIおさらい スマホUI勉強会 -iPhone6で変わるUI、変わらないUI-
20140825_spapps
20140825_spapps
HTML5 browser Apps [ Hoolegan ]
HTML5 browser Apps [ Hoolegan ]
Kürzlich hochgeladen
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
Kürzlich hochgeladen
(9)
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
ABC2012Spring 20120324
1.
Webデザイナーが PhoneGap/jQueryMobile で生み出す 「AndroidアプリのUX」
2012年3月24日 GMOインターネット株式会社 稲守 貴久 1
2.
今日のテーマ 1. PhoneGap
と jQuery Mobile とは 2. 基本的な導入・開発方法 3. デモ 4. 開発導入して気付いたメリット・デメリット 5. スマホWebサービスの質を上げるTips 2
3.
自己紹介
稲守 貴久(takahisa-inamori@gmo.jp) GMOインターネット株式会社 次世代システム研究室 所属 GMOでやってる(やってた)事 yaplog! GMOクリック証券 Gゲー、ソーシャルアプリ、その他色々←いまここ 個人的な事 Twitter @inamoly Facebook facebook.com/inamoly 3
4.
Gゲー byGMO
Androidに特化したゲームアプリマーケットを展開中 gmo-game.com または GooglePlayで「Gゲー」と検索 4
5.
今日のテーマ 1. PhoneGap
と jQuery Mobile とは 2. 基本的な導入・開発方法 3. デモ 4. 開発導入して気付いたメリット・デメリット 5. スマホWebサービスの質を上げるTips 5
6.
PhoneGap とは PhoneGapとは
6
7.
PhoneGap とは PhoneGapとは
HTML5、CSS、JavascriptのみのWeb言語で ネイティブアプリを作れる ・2011年8月1日に正式版がリリース Ver1.5が今月6日にリリースされた ・多くのスマートフォンOSに対応 ・2011年10月にadobeが買収、 Dreamweaver CS5.5でPhoneGapが使える ・PhoneGap:Buildという名称で、Web上で アプリ変換するサービスがある 7
8.
PhoneGap とは 言語はHTML5、CSS3、JavaScript
8
9.
PhoneGap とは Dreamweaverでアプリ開発できる
CS5.5にてスマートフォンのアプリ制作が可能に。 -HTML,CSS,javascriptをベースWebビュー感覚でアプリ制作が可能 クリックエフェクトはもちろんムービーなども挿入できる。 -jQuery Mobileも標準で利用可能。 オーサリング画面。スマホWeb制作と同じ感覚で作れる 9
10.
jQuery Mobileとは jQuery Mobileとは
10
11.
jQuery Mobileとは jQuery Mobileとは
スマートホンに最適なモバイルフレームワーク ・2011年11月18日に正式版がリリースされた 注目の技術 ・スライドなどのエフェクトが複数用意されて いる ・ThemeRollerで簡単にデザインが作れる http://jquerymobile.com/themeroller/ 11
12.
jQuery Mobileとは ワンソースで複数のデバイスに対応できる
ワンソースで複数のデバイスに対応できる。 -メディアクエリなどもテンプレートに実装済。実際に画面をご覧ください。 12
13.
今日のテーマ 1. PhoneGap
と jQuery Mobile とは 2. 基本的な導入・開発方法 3. デモ 4. 開発導入して気付いたメリット・デメリット 5. スマホWebサービスの質を上げるTips 13
14.
基本的な導入・開発方法 jQuery Mobileの導入方法 ソースをダウンロード
1. jQueryMobileのサイトからテンプレートソースをダウンロード 2. 要素の追加などテンプレートソースに修正を加える 3. 必要に応じてテーマローラーでカスタムテーマを作成 http://jquerymobile.com/themeroller/ http://jquerymobile.com/ 14
15.
基本的な導入・開発方法 PhoneGapの導入方法 様々な環境で開発ができる eclipse、xcodeといったエンジニア向け開発環境のほか、
多くのWebデザイナーが利用するDreamwaeverでも可能。 今回はeclipseとDreamweaverについてご紹介 15
16.
基本的な導入・開発方法 PhoneGapの導入方法 –eclipse- 1.
eclipseとAndroidの開発環境を用意 2. PhoneGapをダウンロード 3. “phonegap.js”を” /assets/www”へコピー 4. “phonegap.jar”を” /libs”へコピー 5. “Activity”の”extends Activity”を”extends DroidGap”へ変更 6. “AndroidManifest.xml”にパーミッション等の記述を追記 16
17.
基本的な導入・開発方法 PhoneGapの導入方法 –Dreamweaver-
DreamweaverCS5.5を用意するだけ 17
18.
今日のテーマ 1. PhoneGap
と jQuery Mobile とは 2. 基本的な導入・開発方法 3. デモ 4. 開発導入して気付いたメリット・デメリット 5. スマホWebサービスの質を上げるTips 18
19.
デモ jQuery Mobile
jQuery MobileでワンソースでPC/スマホをカバーする 画面(Webサイト)を作ってみる 19
20.
デモ DreamweaverでPhoneGap Adobe DreamweaverでPhoneGapを利用する
20
21.
デモ DreamweaverでPhoneGap
21
22.
今日のテーマ 1. PhoneGap
と jQuery Mobile とは 2. 基本的な導入・開発方法 3. デモ 4. 開発導入して気付いたメリット・デメリット 5. スマホWebサービスの質を上げるTips 22
23.
開発事例のご紹介
23
24.
導入事例 GMOとくとくショップ
24
25.
導入事例 GMOとくとくショップ
GMOのショッピングカートを利用している ECサイトの商品を一覧検索できる ・ ショップ数:14,958 / 商品数:8,752,580 ・ 2012年1月にリリース ・ APIから商品情報のJSONを取得し、HTMLを描 画する。 25
26.
導入事例 GMOとくとくショップ
26
27.
気付いたメリット・デメリット 開発工数 結論:1)開発工数を抑えられる
2)スモールスタート向け PhoneGap/jQueryMobileで開発開始 ・エンジニア2名で1ヶ月検証、1ヶ月開発。 ・デザイナー1名で2週間デザイン&コーディング 2週間修正。 27
28.
気付いたメリット・デメリット PhoneGapで感じたデメリット バージョンアップが早いため、仕様変更に 迫られる可能性。
・昨年末1.0で開発したが現在は1.5で使えないコ ンポーネントがある ・現状、英語圏のリファレンス中心で日本語コミ ュニティが不在。 28
29.
気付いたメリット・デメリット 開発ウラ話
開発している時に こんなやりとりが 29
30.
気付いたメリット・デメリット 開発ウラ話
実はリリースしたばかりの jQueryMobileに苦労しました 30
31.
気付いたメリット・デメリット jQueryMobileに苦戦した話 昨年末の話
jQueryMobileで 開発がんばります! 31
32.
気付いたメリット・デメリット jQueryMobileに苦戦した話
成果物 32
33.
気付いたメリット・デメリット jQueryMobileに苦戦した話
成果物 デザイン崩れ続発で jQuery Mobile 諦めました。。。 33
34.
気付いたメリット・デメリット jQueryMobileに苦戦した話
申し訳ありません 34
35.
気付いたメリット・デメリット jQueryMobileに苦戦した理由
なぜこうなったのか 35
36.
気付いたメリット・デメリット jQueryMobileに苦戦した理由
理由を列挙 ※あくまで ver1.0 の頃の話です 36
37.
気付いたメリット・デメリット jQueryMobileに苦戦した理由 共有するhtmlタグにcssがガチガチ -
リセット系cssとは別にh2などのタイトル、liなどのリスト系にもmargin0、 floatなどの指定が多く、独自のレイアウトを組み合わせようとするとぶつ かることが多い 思い切って組み込まれてたcssを外すと - スライドなどのエフェクトが全く効かなくなり、ひどい場合はエラー表示な どが出たりも。。。 ひとつずつ細かくCSSを見直してていけば - 現状、組み込まれてるcss (小さい方)だけで500強のクラス指定あり。 37
38.
気付いたメリット・デメリット しかし条件を選べば使い勝手が良い 様々な端末で表示崩れがない -
iPhone、android、ガラケー問わず、表示が崩れない。 (特にAndroidは2.1系と2.2系でかなりブラウザ表示に差が出る) 画像点数が少ないのにリッチなUI、読み込み速度も早い - HTMLとCSSのみでリッチな表示を実現しており、旧来のimgを利用しない 構成が可能。3G回線に向いてる 遷移エフェクトはアプリと遜色ないUIで強み - ブラウザ上でアプリのようなエフェクトが簡単に出来る(一部のAndroidで は効かないエフェクトありました(フェード・フリップ) 38
39.
今日のテーマ 1. PhoneGap
と jQuery Mobile とは 2. 基本的な導入・開発方法 3. デモ 4. 開発導入して気付いたメリット・デメリット 5. スマホWebサービスの質を上げるTips 39
40.
質をあげるTips ローカルストレージ
Tips1 ローカルストレージ 40
41.
質をあげるTips ローカルストレージ ・当社は検索処理の速度アップの為に導入
・jsonObjectをString形式で保存(キャッシュ)して利用 通常検索 API String 端末 json String json String ローカル ストレージ String 端末 使用 String String json String ・保存時刻を別に登録し、取得情報の有効期限を管理 41
42.
質をあげるTips ローカルストレージ
API使用時 ローカルストレージ使用時 START END 処理時間 START END 処理時間 1.32454E+12 1.32454E+12 1671 1.32454E+12 1.32454E+12 87 1.32454E+12 1.32454E+12 1624 1.32454E+12 1.32454E+12 91 1.32454E+12 1.32454E+12 3410 1.32454E+12 1.32454E+12 61 1.32454E+12 1.32454E+12 1571 1.32454E+12 1.32454E+12 92 1.32454E+12 1.32454E+12 3115 1.32454E+12 1.32454E+12 74 2278. 平均(ms) 2 平均(ms) 81 42
43.
質をあげるTips タッチイベント
Tips2 タッチイベント 43
44.
質をあげるTips タッチイベント スマートフォンでは
クリックとタッチが異なる。 touchstart touchmove touchend click 44
45.
質をあげるTips タッチイベント Androidの場合
クリックイベントは0.5秒経過しないと開始しない。 タッチは0.1秒以内で開始される。 < 12-27 13:29:15.283: I/Web Console(5877): touchstart 12-27 13:29:15.366: I/Web Console(5877): touchend 12-27 13:29:15.815: I/Web Console(5877): click ・ 0.5秒の差 ・ ・ 45
46.
質をあげるTips タッチイベント
Tips3 サーバー設定で表示速度向上 46
47.
質をあげるTips Apacheの設定でwebの表示速度向上 Apacheにmod_pagespeed
を追加することで AndroidでのWeb表示速度の向上が認められました。 mod_pagespeedとは -google純正のWeb最適化モジュール -各画像ファイルなどを最適化し、転送速度を向上してくれる。 -オープンソース URL http://code.google.com/intl/ja/speed/page-speed/docs/module.html 47
48.
質をあげるTips タッチイベント
Tips4 devicePixelRatio 48
49.
質をあげるTips devicePixelRatio Androidは様々な端末で整合性のとれた表示を目指すため
マルチスクリーンの概念を採用している。 -devicePixelRatio(画面密度) 端末によって、表示サイズの倍の大きさの画像が必要。 Device devicePixelRatio IS03 2.0 Xperia 1.5 Galaxy S 1.5 DELL Streak 1.0 iPhone4 2.0 100px×50pxをキレイに表示したい場合は200px×100pxの画像を用意する 必要がある。(※もちろん width×height は 100×50 で記述) 49
50.
質をあげるTips devicePixelRatio
50
51.
質をあげるTips devicePixelRatio metaでdevicePixelRatio毎のcssを設定できる。
<meta name="viewport" content="width=device-width, user- scalable=no, initial-scale=1, maximum-scale=1" /> <link rel="stylesheet" href="/GameJacketBar/css/reset_sp.css" /> <link rel="stylesheet" href="/GameJacketBar/css/style10.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.0), only screen and (min-device-pixel-ratio : 1.0)"> <link rel="stylesheet" href="/GameJacketBar/css/style15.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)"> <link rel="stylesheet" href="/GameJacketBar/css/style20.css" media="only screen and (-webkit-min-device-pixel-ratio : 2.0), only screen and (min-device-pixel-ratio : 2.0)"> 51
52.
まとめ
52
53.
まとめ まとめ 問題点は少なくない -
実際に端末で動作させると動かない(処理が遅い)エフェクトがある。 デザインまわりでの制約 今後のバージョンアップに期待できる - 問題点もあるが直近のバージョンアップでは問題点が解消されつつある。 デザイナーが開発できる環境ってあまり無かった。 jQueryMobile1.1.0 意外といい感じ。 スモールスタートやモックを作るのにとても向いてる - 実際に動く画面を作ることはプロダクト制作でとても大事。 完成度向上にも寄与するので、おすすめかと。 53
54.
まとめ まとめ UI仕様書は見ておきましょう -
Android Design - iOS Human Interface Guidelines(日本語版はPDF) 54
55.
少しでも皆様のお役に立てれば
55
56.
最後にちょっと宣伝を。
56
57.
GMOでは一緒にインターネットを 楽しく便利にする仲間を募集中です。
57
58.
当社の事業領域
58
59.
開発者向け採用ページもあります。 良かったらご覧ください。
59
60.
ご清聴ありがとうございました。
Webデザイナーが PhoneGap/jQueryMobile で生み出す 「AndroidアプリのUX」 60