Soumettre la recherche
Mettre en ligne
Html5/JSモバイルアプリ最前線
•
2 j'aime
•
2,090 vues
アシアル株式会社
Suivre
2016/9/3 HTML5 Conferenceの講演資料です。
Lire moins
Lire la suite
Ingénierie
Signaler
Partager
Signaler
Partager
1 sur 42
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
Cordovaの特徴と開発手法概要
Cordovaの特徴と開発手法概要
アシアル株式会社
モバイル用Webフレームワーク最前線
モバイル用Webフレームワーク最前線
アシアル株式会社
Web標準技術でiOS、Android両対応アプリを開発
Web標準技術でiOS、Android両対応アプリを開発
アシアル株式会社
HTML5ハイブリッドアプリ開発で拓くビジネスチャンス
HTML5ハイブリッドアプリ開発で拓くビジネスチャンス
アシアル株式会社
Monaca事例から学ぶHTML5モバイルアプリの活用ポイント
Monaca事例から学ぶHTML5モバイルアプリの活用ポイント
アシアル株式会社
はやわかりHTML5ハイブリッドアプリ開発事情
はやわかりHTML5ハイブリッドアプリ開発事情
Monaca
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
アシアル株式会社
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
アシアル株式会社
Recommandé
Cordovaの特徴と開発手法概要
Cordovaの特徴と開発手法概要
アシアル株式会社
モバイル用Webフレームワーク最前線
モバイル用Webフレームワーク最前線
アシアル株式会社
Web標準技術でiOS、Android両対応アプリを開発
Web標準技術でiOS、Android両対応アプリを開発
アシアル株式会社
HTML5ハイブリッドアプリ開発で拓くビジネスチャンス
HTML5ハイブリッドアプリ開発で拓くビジネスチャンス
アシアル株式会社
Monaca事例から学ぶHTML5モバイルアプリの活用ポイント
Monaca事例から学ぶHTML5モバイルアプリの活用ポイント
アシアル株式会社
はやわかりHTML5ハイブリッドアプリ開発事情
はやわかりHTML5ハイブリッドアプリ開発事情
Monaca
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
アシアル株式会社
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
アシアル株式会社
エンタープライズ要件に対応する高品質なCordovaアプリ開発のポイント
エンタープライズ要件に対応する高品質なCordovaアプリ開発のポイント
アシアル株式会社
HTML5ハイブリッドアプリの活用ポイント
HTML5ハイブリッドアプリの活用ポイント
アシアル株式会社
Onsen UIが目指すもの
Onsen UIが目指すもの
アシアル株式会社
20160308seminar2
20160308seminar2
アシアル株式会社
【デブサミ関西2014】Web技術で作るエンタープライズアプリ
【デブサミ関西2014】Web技術で作るエンタープライズアプリ
アシアル株式会社
Gartner summit 2016
Gartner summit 2016
アシアル株式会社
CordovaでAngularJSアプリ開発
CordovaでAngularJSアプリ開発
アシアル株式会社
Cordova×業務システム:失敗しないモバイル開発の秘訣
Cordova×業務システム:失敗しないモバイル開発の秘訣
アシアル株式会社
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
Monaca
Onsen UI 2.0とUIライブラリの未来
Onsen UI 2.0とUIライブラリの未来
アシアル株式会社
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
Monaca
Nifty cloud mbaas
Nifty cloud mbaas
アシアル株式会社
HTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティス
アシアル株式会社
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
Kazuaki Hidaka
エンタープライズ・モバイルアプリにおける ハイブリッドアプリ開発
エンタープライズ・モバイルアプリにおける ハイブリッドアプリ開発
日本Cordovaユーザー会
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Shin Ogata
Monacaソリューションセミナー20160621
Monacaソリューションセミナー20160621
アシアル株式会社
事例で解説するハイブリッドアプリ開発のポイント
事例で解説するハイブリッドアプリ開発のポイント
Monaca
iOS App Storeの話
iOS App Storeの話
アシアル株式会社
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
アシアル株式会社
PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化
Takashi Okamoto
ICT ERA+ABC 2012東北講演
ICT ERA+ABC 2012東北講演
Monaca
Contenu connexe
Tendances
エンタープライズ要件に対応する高品質なCordovaアプリ開発のポイント
エンタープライズ要件に対応する高品質なCordovaアプリ開発のポイント
アシアル株式会社
HTML5ハイブリッドアプリの活用ポイント
HTML5ハイブリッドアプリの活用ポイント
アシアル株式会社
Onsen UIが目指すもの
Onsen UIが目指すもの
アシアル株式会社
20160308seminar2
20160308seminar2
アシアル株式会社
【デブサミ関西2014】Web技術で作るエンタープライズアプリ
【デブサミ関西2014】Web技術で作るエンタープライズアプリ
アシアル株式会社
Gartner summit 2016
Gartner summit 2016
アシアル株式会社
CordovaでAngularJSアプリ開発
CordovaでAngularJSアプリ開発
アシアル株式会社
Cordova×業務システム:失敗しないモバイル開発の秘訣
Cordova×業務システム:失敗しないモバイル開発の秘訣
アシアル株式会社
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
Monaca
Onsen UI 2.0とUIライブラリの未来
Onsen UI 2.0とUIライブラリの未来
アシアル株式会社
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
Monaca
Nifty cloud mbaas
Nifty cloud mbaas
アシアル株式会社
HTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティス
アシアル株式会社
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
Kazuaki Hidaka
エンタープライズ・モバイルアプリにおける ハイブリッドアプリ開発
エンタープライズ・モバイルアプリにおける ハイブリッドアプリ開発
日本Cordovaユーザー会
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Shin Ogata
Monacaソリューションセミナー20160621
Monacaソリューションセミナー20160621
アシアル株式会社
事例で解説するハイブリッドアプリ開発のポイント
事例で解説するハイブリッドアプリ開発のポイント
Monaca
iOS App Storeの話
iOS App Storeの話
アシアル株式会社
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
アシアル株式会社
Tendances
(20)
エンタープライズ要件に対応する高品質なCordovaアプリ開発のポイント
エンタープライズ要件に対応する高品質なCordovaアプリ開発のポイント
HTML5ハイブリッドアプリの活用ポイント
HTML5ハイブリッドアプリの活用ポイント
Onsen UIが目指すもの
Onsen UIが目指すもの
20160308seminar2
20160308seminar2
【デブサミ関西2014】Web技術で作るエンタープライズアプリ
【デブサミ関西2014】Web技術で作るエンタープライズアプリ
Gartner summit 2016
Gartner summit 2016
CordovaでAngularJSアプリ開発
CordovaでAngularJSアプリ開発
Cordova×業務システム:失敗しないモバイル開発の秘訣
Cordova×業務システム:失敗しないモバイル開発の秘訣
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
Onsen UI 2.0とUIライブラリの未来
Onsen UI 2.0とUIライブラリの未来
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
Nifty cloud mbaas
Nifty cloud mbaas
HTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティス
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
エンタープライズ・モバイルアプリにおける ハイブリッドアプリ開発
エンタープライズ・モバイルアプリにおける ハイブリッドアプリ開発
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Monacaソリューションセミナー20160621
Monacaソリューションセミナー20160621
事例で解説するハイブリッドアプリ開発のポイント
事例で解説するハイブリッドアプリ開発のポイント
iOS App Storeの話
iOS App Storeの話
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
Similaire à Html5/JSモバイルアプリ最前線
PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化
Takashi Okamoto
ICT ERA+ABC 2012東北講演
ICT ERA+ABC 2012東北講演
Monaca
PhoneGapユーザー会@大阪 講演資料
PhoneGapユーザー会@大阪 講演資料
Monaca
Phone gap+javascriptスマホアプリ開発(入門編)
Phone gap+javascriptスマホアプリ開発(入門編)
Monaca
Android webブラウザのhtml5対応状況
Android webブラウザのhtml5対応状況
Masakazu Muraoka
HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解
Monaca
企画者が押さえておきたいHtml5アプリ開発の要点
企画者が押さえておきたいHtml5アプリ開発の要点
Monaca
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Tsutomu Ogasawara
Monacaでつくるハイブリッドアプリ
Monacaでつくるハイブリッドアプリ
Monaca
Webエンジニアによるスマートフォンアプリ開発
Webエンジニアによるスマートフォンアプリ開発
takeuchi-tk
プロ文.com 勉強会 Phase 1
プロ文.com 勉強会 Phase 1
Hiroki Toyokawa
iQONの開発手法 at iQONエンジニアセミナー
iQONの開発手法 at iQONエンジニアセミナー
Imamura Masayuki
Phone gap + monaca
Phone gap + monaca
akimichi Yamada
20120413 nestakabaneworkshop
20120413 nestakabaneworkshop
Yoichiro Sakurai
C#でのクロスプラットフォーム モバイル開発環境 Xamarin のご紹介
C#でのクロスプラットフォーム モバイル開発環境 Xamarin のご紹介
Yoshito Tabuchi
みなさんがHtml5をやらなくていい3つの理由
みなさんがHtml5をやらなくていい3つの理由
Masakazu Muraoka
Osc html5-monaca
Osc html5-monaca
Hikaru Ito
ABC 2012 spring
ABC 2012 spring
Takeaki Tada
クリスマス直前!HTML5 で作る♥はじめての iOS & Android アプリ開発
クリスマス直前!HTML5 で作る♥はじめての iOS & Android アプリ開発
Osamu Monoe
HTML5でできるカメラアプリを実際に体験しよう
HTML5でできるカメラアプリを実際に体験しよう
Hideki Akiba
Similaire à Html5/JSモバイルアプリ最前線
(20)
PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化
ICT ERA+ABC 2012東北講演
ICT ERA+ABC 2012東北講演
PhoneGapユーザー会@大阪 講演資料
PhoneGapユーザー会@大阪 講演資料
Phone gap+javascriptスマホアプリ開発(入門編)
Phone gap+javascriptスマホアプリ開発(入門編)
Android webブラウザのhtml5対応状況
Android webブラウザのhtml5対応状況
HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解
企画者が押さえておきたいHtml5アプリ開発の要点
企画者が押さえておきたいHtml5アプリ開発の要点
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Monacaでつくるハイブリッドアプリ
Monacaでつくるハイブリッドアプリ
Webエンジニアによるスマートフォンアプリ開発
Webエンジニアによるスマートフォンアプリ開発
プロ文.com 勉強会 Phase 1
プロ文.com 勉強会 Phase 1
iQONの開発手法 at iQONエンジニアセミナー
iQONの開発手法 at iQONエンジニアセミナー
Phone gap + monaca
Phone gap + monaca
20120413 nestakabaneworkshop
20120413 nestakabaneworkshop
C#でのクロスプラットフォーム モバイル開発環境 Xamarin のご紹介
C#でのクロスプラットフォーム モバイル開発環境 Xamarin のご紹介
みなさんがHtml5をやらなくていい3つの理由
みなさんがHtml5をやらなくていい3つの理由
Osc html5-monaca
Osc html5-monaca
ABC 2012 spring
ABC 2012 spring
クリスマス直前!HTML5 で作る♥はじめての iOS & Android アプリ開発
クリスマス直前!HTML5 で作る♥はじめての iOS & Android アプリ開発
HTML5でできるカメラアプリを実際に体験しよう
HTML5でできるカメラアプリを実際に体験しよう
Plus de アシアル株式会社
MonacaとEducation活動の紹介
MonacaとEducation活動の紹介
アシアル株式会社
PWA 4 Business
PWA 4 Business
アシアル株式会社
Monacaによるモバイルアプリ開発ことはじめ
Monacaによるモバイルアプリ開発ことはじめ
アシアル株式会社
kintone 連携スマホアプリの開発・配布体験
kintone 連携スマホアプリの開発・配布体験
アシアル株式会社
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
アシアル株式会社
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
アシアル株式会社
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)
アシアル株式会社
Onsen UI 2 開発における JS フレームワーク衝突事例集
Onsen UI 2 開発における JS フレームワーク衝突事例集
アシアル株式会社
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)
アシアル株式会社
Onsen UI の最近とこれから 〜 国内サポートはじめました
Onsen UI の最近とこれから 〜 国内サポートはじめました
アシアル株式会社
最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法
最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法
アシアル株式会社
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ
アシアル株式会社
HTML5×Monacaプログラミング教育事例セミナー・ワークショップ資料
HTML5×Monacaプログラミング教育事例セミナー・ワークショップ資料
アシアル株式会社
HTML5プロフェッショナル認定試験対策講座
HTML5プロフェッショナル認定試験対策講座
アシアル株式会社
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
アシアル株式会社
Plus de アシアル株式会社
(15)
MonacaとEducation活動の紹介
MonacaとEducation活動の紹介
PWA 4 Business
PWA 4 Business
Monacaによるモバイルアプリ開発ことはじめ
Monacaによるモバイルアプリ開発ことはじめ
kintone 連携スマホアプリの開発・配布体験
kintone 連携スマホアプリの開発・配布体験
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)
Onsen UI 2 開発における JS フレームワーク衝突事例集
Onsen UI 2 開発における JS フレームワーク衝突事例集
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)
Onsen UI の最近とこれから 〜 国内サポートはじめました
Onsen UI の最近とこれから 〜 国内サポートはじめました
最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法
最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ
HTML5×Monacaプログラミング教育事例セミナー・ワークショップ資料
HTML5×Monacaプログラミング教育事例セミナー・ワークショップ資料
HTML5プロフェッショナル認定試験対策講座
HTML5プロフェッショナル認定試験対策講座
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
Html5/JSモバイルアプリ最前線
1.
HTML5/JSモバイルアプリ 最前線 田中正裕 @massie HTML5カンファレンス2016 2016.09.03
2.
React Nativeの場でCordovaを発表したり MonacaとかOnsen UIを作っています 田中正裕 アシアル株式会社
代表取締役
3.
今日のテーマ “HTML5/JSモバイルアプリ” やるなら今でしょ!
4.
iPhone販売から8年 PhoneGap発表から7年が経過し… モバイル開発の世界では、依然として JSは遠い存在。
5.
Why? どうしてモバイルだけポピュラーじゃない??
6.
色々なソリューションは出てますが… React Native
7.
Why? どうして、こんなにややこしい!!
8.
簡単に歴史から 2011年:Titanium vs. PhoneGap Titanium:
masuidriveさん、id:naoya、JustSystem浮川さん、事例にいとまが無い PhoneGap: 認知度も事例も微妙。ユーザーも伸び悩み。Monaca登場。 2012年:AdobeがPhoneGapを作っていたNitobiを買収し、Cordovaが誕生。Apacheに。 2013年:IonicやOnsen UIが登場。じわじわCordovaが広がっていく。 2014年:Electronの前進であるAtom Shellが登場。デスクトップ向け。 2015年:React Native登場。すぐに熱狂的なファンが集まり、一躍メジャープレイヤーに。 今年:Angular 2に対応したNativeScriptも徐々に注目され、より選択肢が増えていく... ※ 非JSのXamarinや、プロダクトではない「Progressive Web Apps」は除いています
9.
Cordovaについて
10.
Cordovaとは? ● Web技術とネイティブ技術の合わせ技。 ● WebViewを用いてUIを表現する。 ●
様々なモバイルOS※ に向けて完全なクロスプラッ トフォームアプリを作れる。 ※: Android, iOS, Windows, Blackberry, Ubuntu, Firefox OS, Web OS, FireOS
11.
Cordova開発チーム
12.
Cordovaコミッターの会合@マイクロソフト
13.
Cordovaの特徴 ● WebViewなのでWebの開発そのもの ● 完全なクロスプラットフォーム開発 ●
多くのソリューションで採用
14.
15.
課題 パフォーマンス
16.
主な理由 ■ WebViewのレンダリングが遅い ■ フレームワークが遅い ■
アプリが60fpsに最適化されていない
17.
WKWebView、Crosswalkへの切り替え $ # iOSでWKWebViewエンジンを用いる $
cordova plugin add cordova-plugin-wkwebview-engine $ # AndroidでBlinkエンジンを用いる $ cordova plugin add cordova-plugin-crosswalk-webview
18.
cordova-plugin-service-worker iOSでもService Workerが使えるように
19.
Project ACE http://microsoft.github.io/ace/
20.
ただし、結局はJSフレームワーク自体がボトルネック気味 ・jQuery Mobileは反応も動きも余り良くない。 ・AngularJSもオーバーヘッドが大きい。 ~ようこそ、Virtual DOMの世界へ~
21.
Angular 2とReact ● フルスタックフレームワーク ●
TypeScriptがほぼ必須 ● UI用のライブラリ ● ReduxやMobxなどと組み合わせる ● Virtual DOM ● CSSのカプセル化 ● モダンな実装 ● Universal JavaScript
22.
ReactとReact Native
23.
Reactとは Facebookが開発するVirtual DOMフレームワーク React Nativeアプリの例 イベントダッシュボード ReactとReact
Native ● ReactJSはJavaScriptライブラリ。フロントエンドと サーバーサイドレンダリングの両方に対応。 ● React NativeはReactJSを用いてモバイルアプリを 開発するためのフレームワーク。
24.
Virtual DOMで画面を組み立てる var HelloWorld
= React.createClass({ getInitialState: function() { return { message: 'Hello World' }; }, onClick: function() { var messages = ['Hello World!', 'Hello HTML5 Conference', 'Hello React!']; var message = messages[Math.floor(Math.random() * 3)]; this.setState({ message: message }); }, render: function() { return ( <div> <p>{ this.state.message } /> <p><input type="button" onClick={ this.onClick } value="ようこそ、Reactの世界へ!"/></p> </div> ); } }); JavaScript(JSX)で 表現されたDOM
25.
ReactDOMとReact Native React ReactDOM React Native Reactのレンダラーとして、 ブラウザー(DOM)を使うかReact
Nativeを使うかの違い
26.
React Nativeの特徴 ● Learn
once, write anywhere. ● ネイティブUIをiOS/Android/Win別に実装 ● React.js開発に慣れていれば簡単
27.
React Nativeのコンポーネント ● <p>も<div>も<button>もすべてネイティブUI。 ●
CSSもパースされネイティブウィジェットで描画。 ● 開発者は自分でコンポーネントを開発できるほか、多くの コンポーネントがレジストリに掲載されている。 コンポーネント検索 https://JS.coach
28.
急速に発展するコミュニティ Angular React Google Trendsより(Worldwide)
29.
Reactクローンも多い Weex Framework ● React
Nativeをフォークしたフレームワーク、Alibaba開発 ● Vue 2.0ではネイティブレンダリングとしてサポートされるようです Riot.js ● Reactライクなライブラリで、Reactと比べてコードがシンプルに ● ES6で記述できるので取っつきやすい
30.
課題 パフォーマンス
31.
JavaScriptスレッドの問題 ● UIスレッドは60fpsでスムーズに動作 ● JSスレッドの処理を16msに抑える WebView上で動作させるより遙かに高速。 ただ現状、JSはマルチコアを生かし切れない。
32.
ReactDOM+Cordova ● WebView(HTML+CSS)を使用した、自由なUI実装 ● ほかのWebライブラリを組み合わせることができる http://touchstonejs.io/
https://onsen.io/react/
33.
Progressive Web Apps
34.
Progressive Web Appsの特徴 ●
Service Workersをネイティブ層として使用 ● ブラウザ自体をネイティブアプリに近づける ● iOSに未対応(Under Consideration) ● 考え方はハイブリッドアプリに近い PhoneGap is cease to exist, but not yet?
35.
3者の比較
36.
Cordova React Native
Progressive Web Apps 開発チーム Apacheコミュニティ MS、Adobeが中心 Facebook Google Chrome & Polymer UIの記述 HTML、CSS React Component HTML、CSS JSフレームワーク 制限なし React 制限なし パフォーマンス △ ○ △ デバイス機能 ○ ○ △ 配布手段 アプリストア アプリストア Webサイト 対応端末 iOS、Android、Win Univ. iOS、Android、Win Univ. Android 共通:どれもツールは充実しており、無料で手軽に始められる。
37.
所感 ● Cordova: すでに太いレールが敷かれているが、新しさはない ●
React Native: 皆がバラバラにレールを敷いているが、刺激的で活発 ● Progressive Apps: 難しさがないため広がりに期待 実際に試すことで、 メリット・デメリットが見えてくると思います
38.
時間があればデモ
39.
Cordovaことはじめ $ npm -g
install cordova $ cordova create helloworld $ cd helloworld $ cordova add platform ios $ cordova add platform android $ cordova serve # HTTPサーバー経由で配信 $ cordova build # アプリをビルド
40.
Cordova上でUIフレームワークを使用する Monaca CLIを通じてOnsen UIを使った例: $
npm install -g monaca $ monaca create helloworld ? Choose a category: (Use arrow keys: ↑ ↓ →) > Onsen UI and Angular 2 Onsen UI and React Ionic Sample Apps $ monaca preview # HTTPサーバーで表示 $ monaca debug # 実機デバッグ $ monaca remote build ios # リモートビルド ホットリロードに対応
41.
React Native編 $ npm
install -g react-native-cli $ react-native init helloworld # iOSアプリを実行する $ react-native run-ios # Androidアプリを実行する $ react-native run-android
42.
ありがとうございました
Télécharger maintenant