SlideShare a Scribd company logo
1 of 26
Download to read offline
1URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved.
Androidでもサクサク動く
HTML5ハイブリッドアプリの作り⽅方
アシアル株式会社
⽣生形  可奈奈⼦子
2URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved.
アシアル株式会社について
「エンジニアリングでインターネットの成⻑⾧長を牽引する」
という事業コンセプトのもと、HTML5モバイルアプリを
中⼼心としたソフトウェアの受託開発を⾏行行っています。
3URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved.
Monacaの紹介
•  クラウドベースのハイブリッドアプリ開発環境
•  iOS、Android、Chrome  Apps、ほか複数OS対応
•  無料料〜~
https://ja.monaca.io/
4URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved.
Monacaによるアプリ開発
ブラウザだけで開発〜~テスト〜~アプリの⽣生成までのす
べての⼯工程を⾏行行うことができます。
①ブラウザで開発 ②実機で動作確認 ③ブラウザでビルド
5URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved.
ハイブリッドアプリとは
2つのアプリの特徴をいいとこどりしたアプリ
  ・  Webアプリ(クロスプラットフォーム性)
  ・  ネイティブアプリ(デバイスの機能を使える)
6URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved.
パフォーマンスを向上する3つの⽅方法
7URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved.
①  コーディングテクニック
8URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved.
aタグやclickイベントを使わない
•  aタグによる遷移やclickイベ
ントは、発⽕火するまでに遅延
時間が発⽣生します
•  タップ処理理を扱うモバイル向
けのライブラリを使いましょ
う
9URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved.
レイアウト再計算のコストを減らす
•  要素の表⽰示・⾮非表⽰示の切切り替
え、移動やサイズの変更更など
によって、要素のレイアウト
が再計算されます
•  要素サイズを固定値で指定し
たり、絶対配置にすることで
周囲の要素への影響を極⼒力力減
らしましょう
10URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved.
DOMツリーへの変更更を抑える
•  DOMツリーに要素の追加な
どの変更更処理理を加えると、
DOMの再構築&再描画の処
理理が都度度発⽣生します
•  複数の要素をDOMに加える
ときはDocumentFragment
を利利⽤用して、複数の要素をま
とめてから⼀一気にツリーに追
加しましょう
11URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved.
アニメーションはCSSで
CSS3
JavaScript
jQueryのanimate()メソッドなどはもたつきが起こる
ので、アニメーションするときはCSSのtransitionや
animationを使いましょう。
12URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved.
絶賛発売中です
アシアル株式会社
久保⽥田  光則  著
[iOS/Android対応]  
HTML5  ハイブリッドアプリ
開発[実践]⼊入⾨門
技術評論論社  刊
13URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved.
②  優れたUIフレームワークの選定
14URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved.
今どきのUIフレームワーク
15URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved.
Onsen  UI
・モバイルアプリライクな
  フラットデザイン
・CSSによる、ネイティブと
  遜⾊色ないアニメーション
・OSSとしてGitHubで公開
HTMLの独⾃自タグを記述することで、モバイル⽤用UIを
簡単に構築することができるフレームワークです。
16URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved.
Onsen  UIがやっていること
Onsen  UIでは、アニメーションの発⽣生時に
よりパフォーマンスを向上させるための細やかな⼯工夫
がなされています。
(例例)
•  CSSクラスを変更更するのではなく、style属性に対し
てCSSプロパティを付与する
•  leftやtopなどのプロパティは変更更せず、transform
を使って位置を移動させる
17URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved.
③  WebViewを内包する
18URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved.
ハイブリッドアプリの仕組み
HTMLで作られたソースコードをネイティブコードで
パッケージングしています。HTMLはWebView上に表
⽰示されます。
Androidアプリ
ネイティブ層
Androidアプリ
19URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved.
通常のハイブリッドアプリ
通常のハイブリッドアプリでは、OSに付属している
WebViewを呼び出してHTMLを表⽰示しています。
Androidアプリ
OS付属の
WebView
20URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved.
WebView内包アプリの登場
IntelのCrosswalkというWebViewをアプリに内包し
てビルドすることで、レンダリングエンジンがOSに依
存しなくなります。
Androidアプリ
21URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved.
Crosswalkのメリット・デメリット
メリット デメリット
•  Blinkという⾼高速なレンダ
リングエンジンが搭載さ
れている
•  OSごとの動作差異異が発⽣生
しなくなる
•  最新のAPIを利利⽤用できる
•  USBデバッグを⾏行行うこと
ができる
•  アプリのバイナリサイズ
が⼤大きくなる
•  4系以降降でないと利利⽤用で
きない
•  4.4以降降では、OS標準
WebViewのほうがわずか
に早い場合がある
22URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved.
Android各バージョンのシェア
0.50% 9.10%
7.80%
21.30%
20.40%7.00%
33.90%
2.2
2.3.x
4.0.x
4.1.x
4.2.x
4.3
4.4
23URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved.
2系は1割以下
0.50% 9.10%
7.80%
21.30%
20.40%7.00%
33.90%
2.2
2.3.x
4.0.x
4.1.x
4.2.x
4.3
4.4
24URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved.
4.0〜~4.3が多い
0.50% 9.10%
7.80%
21.30%
20.40%7.00%
33.90%
2.2
2.3.x
4.0.x
4.1.x
4.2.x
4.3
4.4
25URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved.
KitKatが数を伸ばしている
0.50% 9.10%
7.80%
21.30%
20.40%7.00%
33.90%
2.2
2.3.x
4.0.x
4.1.x
4.2.x
4.3
4.4
26URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved.
ありがとうございました

More Related Content

What's hot

iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発アシアル株式会社
 
Web標準技術で iOS、Android両対応アプリを開発
Web標準技術でiOS、Android両対応アプリを開発Web標準技術でiOS、Android両対応アプリを開発
Web標準技術で iOS、Android両対応アプリを開発 アシアル株式会社
 
Cordova×業務システム:失敗しないモバイル開発の秘訣
Cordova×業務システム:失敗しないモバイル開発の秘訣Cordova×業務システム:失敗しないモバイル開発の秘訣
Cordova×業務システム:失敗しないモバイル開発の秘訣アシアル株式会社
 
エンタープライズ・モバイルアプリにおける ハイブリッドアプリ開発
エンタープライズ・モバイルアプリにおける ハイブリッドアプリ開発エンタープライズ・モバイルアプリにおける ハイブリッドアプリ開発
エンタープライズ・モバイルアプリにおける ハイブリッドアプリ開発日本Cordovaユーザー会
 
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンスHTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンスアシアル株式会社
 
Cordova (PhoneGap) で始める、スマホアプリ開発
Cordova (PhoneGap) で始める、スマホアプリ開発Cordova (PhoneGap) で始める、スマホアプリ開発
Cordova (PhoneGap) で始める、スマホアプリ開発Kenichi Inoue
 
事例で解説するハイブリッドアプリ開発のポイント
事例で解説するハイブリッドアプリ開発のポイント 事例で解説するハイブリッドアプリ開発のポイント
事例で解説するハイブリッドアプリ開発のポイント Monaca
 
モバイル用Webフレームワーク最前線
モバイル用Webフレームワーク最前線モバイル用Webフレームワーク最前線
モバイル用Webフレームワーク最前線アシアル株式会社
 
Monaca事例から学ぶHTML5モバイルアプリの活用ポイント
Monaca事例から学ぶHTML5モバイルアプリの活用ポイントMonaca事例から学ぶHTML5モバイルアプリの活用ポイント
Monaca事例から学ぶHTML5モバイルアプリの活用ポイントアシアル株式会社
 
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみたCordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみたShin Ogata
 
HTML5ハイブリッドアプリ開発 で拓くビジネスチャンス
HTML5ハイブリッドアプリ開発で拓くビジネスチャンスHTML5ハイブリッドアプリ開発で拓くビジネスチャンス
HTML5ハイブリッドアプリ開発 で拓くビジネスチャンス アシアル株式会社
 
HTML5ハイブリッドアプリ の活用ポイント
HTML5ハイブリッドアプリの活用ポイント HTML5ハイブリッドアプリの活用ポイント
HTML5ハイブリッドアプリ の活用ポイント アシアル株式会社
 
~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-
~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-
~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-Shinichiro Yoshida
 
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜Monaca
 
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについてネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについてKazuaki Hidaka
 
モバイルアプリ開発の現状
モバイルアプリ開発の現状モバイルアプリ開発の現状
モバイルアプリ開発の現状Koji Suzuki
 
HTML5×Monacaプログラミング教育事例セミナー・ワークショップ資料
HTML5×Monacaプログラミング教育事例セミナー・ワークショップ資料HTML5×Monacaプログラミング教育事例セミナー・ワークショップ資料
HTML5×Monacaプログラミング教育事例セミナー・ワークショップ資料アシアル株式会社
 
Cordovaの最近ホットな話題と地雷をまとめて紹介
Cordovaの最近ホットな話題と地雷をまとめて紹介Cordovaの最近ホットな話題と地雷をまとめて紹介
Cordovaの最近ホットな話題と地雷をまとめて紹介アシアル株式会社
 

What's hot (20)

iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
 
Onsen UI 2.0とUIライブラリの未来
Onsen UI 2.0とUIライブラリの未来Onsen UI 2.0とUIライブラリの未来
Onsen UI 2.0とUIライブラリの未来
 
Web標準技術で iOS、Android両対応アプリを開発
Web標準技術でiOS、Android両対応アプリを開発Web標準技術でiOS、Android両対応アプリを開発
Web標準技術で iOS、Android両対応アプリを開発
 
Cordova×業務システム:失敗しないモバイル開発の秘訣
Cordova×業務システム:失敗しないモバイル開発の秘訣Cordova×業務システム:失敗しないモバイル開発の秘訣
Cordova×業務システム:失敗しないモバイル開発の秘訣
 
エンタープライズ・モバイルアプリにおける ハイブリッドアプリ開発
エンタープライズ・モバイルアプリにおける ハイブリッドアプリ開発エンタープライズ・モバイルアプリにおける ハイブリッドアプリ開発
エンタープライズ・モバイルアプリにおける ハイブリッドアプリ開発
 
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンスHTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
 
Onsen UIが目指すもの
Onsen UIが目指すものOnsen UIが目指すもの
Onsen UIが目指すもの
 
Cordova (PhoneGap) で始める、スマホアプリ開発
Cordova (PhoneGap) で始める、スマホアプリ開発Cordova (PhoneGap) で始める、スマホアプリ開発
Cordova (PhoneGap) で始める、スマホアプリ開発
 
事例で解説するハイブリッドアプリ開発のポイント
事例で解説するハイブリッドアプリ開発のポイント 事例で解説するハイブリッドアプリ開発のポイント
事例で解説するハイブリッドアプリ開発のポイント
 
モバイル用Webフレームワーク最前線
モバイル用Webフレームワーク最前線モバイル用Webフレームワーク最前線
モバイル用Webフレームワーク最前線
 
Monaca事例から学ぶHTML5モバイルアプリの活用ポイント
Monaca事例から学ぶHTML5モバイルアプリの活用ポイントMonaca事例から学ぶHTML5モバイルアプリの活用ポイント
Monaca事例から学ぶHTML5モバイルアプリの活用ポイント
 
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみたCordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
 
HTML5ハイブリッドアプリ開発 で拓くビジネスチャンス
HTML5ハイブリッドアプリ開発で拓くビジネスチャンスHTML5ハイブリッドアプリ開発で拓くビジネスチャンス
HTML5ハイブリッドアプリ開発 で拓くビジネスチャンス
 
HTML5ハイブリッドアプリ の活用ポイント
HTML5ハイブリッドアプリの活用ポイント HTML5ハイブリッドアプリの活用ポイント
HTML5ハイブリッドアプリ の活用ポイント
 
~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-
~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-
~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-
 
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
 
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについてネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
 
モバイルアプリ開発の現状
モバイルアプリ開発の現状モバイルアプリ開発の現状
モバイルアプリ開発の現状
 
HTML5×Monacaプログラミング教育事例セミナー・ワークショップ資料
HTML5×Monacaプログラミング教育事例セミナー・ワークショップ資料HTML5×Monacaプログラミング教育事例セミナー・ワークショップ資料
HTML5×Monacaプログラミング教育事例セミナー・ワークショップ資料
 
Cordovaの最近ホットな話題と地雷をまとめて紹介
Cordovaの最近ホットな話題と地雷をまとめて紹介Cordovaの最近ホットな話題と地雷をまとめて紹介
Cordovaの最近ホットな話題と地雷をまとめて紹介
 

Similar to Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅

HTML5ハイブリッド アプリ開発実践編
HTML5ハイブリッド アプリ開発実践編HTML5ハイブリッド アプリ開発実践編
HTML5ハイブリッド アプリ開発実践編Monaca
 
Five Steps to Culture Change を日本語で解説する 2020/11/06
Five Steps to Culture Change を日本語で解説する 2020/11/06Five Steps to Culture Change を日本語で解説する 2020/11/06
Five Steps to Culture Change を日本語で解説する 2020/11/06Issei Hiraoka
 
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向Tsutomu Ogasawara
 
JavaScript祭りLTでmonacaを紹介
JavaScript祭りLTでmonacaを紹介JavaScript祭りLTでmonacaを紹介
JavaScript祭りLTでmonacaを紹介Yuki Okamoto
 
kintone 連携スマホアプリの開発・配布体験
kintone 連携スマホアプリの開発・配布体験kintone 連携スマホアプリの開発・配布体験
kintone 連携スマホアプリの開発・配布体験アシアル株式会社
 
最新UIフレームワーク Onsen UI2で カッコイイWordPress連携アプリを作る方法
最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法
最新UIフレームワーク Onsen UI2で カッコイイWordPress連携アプリを作る方法アシアル株式会社
 
Monacaで簡単スマートフォンアプリ開発体験講座
Monacaで簡単スマートフォンアプリ開発体験講座Monacaで簡単スマートフォンアプリ開発体験講座
Monacaで簡単スマートフォンアプリ開発体験講座Monaca
 
ICT ERA+ABC 2012東北講演
ICT ERA+ABC 2012東北講演ICT ERA+ABC 2012東北講演
ICT ERA+ABC 2012東北講演Monaca
 
クロスプラットフォーム開発を可能にするMonaca
クロスプラットフォーム開発を可能にするMonacaクロスプラットフォーム開発を可能にするMonaca
クロスプラットフォーム開発を可能にするMonacaMonaca
 
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」xyz corporation
 
高いUXをハイブリッド開発で実現するためのポイント
高いUXをハイブリッド開発で実現するためのポイント高いUXをハイブリッド開発で実現するためのポイント
高いUXをハイブリッド開発で実現するためのポイントMonaca
 
HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解Monaca
 
Monacaによるモバイルアプリ開発ことはじめ
Monacaによるモバイルアプリ開発ことはじめMonacaによるモバイルアプリ開発ことはじめ
Monacaによるモバイルアプリ開発ことはじめアシアル株式会社
 
PhoneGapユーザー会@大阪 講演資料
PhoneGapユーザー会@大阪 講演資料PhoneGapユーザー会@大阪 講演資料
PhoneGapユーザー会@大阪 講演資料Monaca
 
みなさんがHtml5をやらなくていい3つの理由
みなさんがHtml5をやらなくていい3つの理由みなさんがHtml5をやらなくていい3つの理由
みなさんがHtml5をやらなくていい3つの理由Masakazu Muraoka
 
いまさら聞けない!HTML5超入門
いまさら聞けない!HTML5超入門いまさら聞けない!HTML5超入門
いまさら聞けない!HTML5超入門Monaca
 
企画者が押さえておきたいHtml5アプリ開発の要点
企画者が押さえておきたいHtml5アプリ開発の要点企画者が押さえておきたいHtml5アプリ開発の要点
企画者が押さえておきたいHtml5アプリ開発の要点Monaca
 
20120413 nestakabaneworkshop
20120413 nestakabaneworkshop20120413 nestakabaneworkshop
20120413 nestakabaneworkshopYoichiro Sakurai
 
Going Serverless, Building Applications with No Servers
Going Serverless, Building Applications with No ServersGoing Serverless, Building Applications with No Servers
Going Serverless, Building Applications with No ServersKeisuke Nishitani
 
C#でのクロスプラットフォーム モバイル開発環境 Xamarin のご紹介
C#でのクロスプラットフォーム モバイル開発環境 Xamarin のご紹介C#でのクロスプラットフォーム モバイル開発環境 Xamarin のご紹介
C#でのクロスプラットフォーム モバイル開発環境 Xamarin のご紹介Yoshito Tabuchi
 

Similar to Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅ (20)

HTML5ハイブリッド アプリ開発実践編
HTML5ハイブリッド アプリ開発実践編HTML5ハイブリッド アプリ開発実践編
HTML5ハイブリッド アプリ開発実践編
 
Five Steps to Culture Change を日本語で解説する 2020/11/06
Five Steps to Culture Change を日本語で解説する 2020/11/06Five Steps to Culture Change を日本語で解説する 2020/11/06
Five Steps to Culture Change を日本語で解説する 2020/11/06
 
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
 
JavaScript祭りLTでmonacaを紹介
JavaScript祭りLTでmonacaを紹介JavaScript祭りLTでmonacaを紹介
JavaScript祭りLTでmonacaを紹介
 
kintone 連携スマホアプリの開発・配布体験
kintone 連携スマホアプリの開発・配布体験kintone 連携スマホアプリの開発・配布体験
kintone 連携スマホアプリの開発・配布体験
 
最新UIフレームワーク Onsen UI2で カッコイイWordPress連携アプリを作る方法
最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法
最新UIフレームワーク Onsen UI2で カッコイイWordPress連携アプリを作る方法
 
Monacaで簡単スマートフォンアプリ開発体験講座
Monacaで簡単スマートフォンアプリ開発体験講座Monacaで簡単スマートフォンアプリ開発体験講座
Monacaで簡単スマートフォンアプリ開発体験講座
 
ICT ERA+ABC 2012東北講演
ICT ERA+ABC 2012東北講演ICT ERA+ABC 2012東北講演
ICT ERA+ABC 2012東北講演
 
クロスプラットフォーム開発を可能にするMonaca
クロスプラットフォーム開発を可能にするMonacaクロスプラットフォーム開発を可能にするMonaca
クロスプラットフォーム開発を可能にするMonaca
 
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
 
高いUXをハイブリッド開発で実現するためのポイント
高いUXをハイブリッド開発で実現するためのポイント高いUXをハイブリッド開発で実現するためのポイント
高いUXをハイブリッド開発で実現するためのポイント
 
HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解
 
Monacaによるモバイルアプリ開発ことはじめ
Monacaによるモバイルアプリ開発ことはじめMonacaによるモバイルアプリ開発ことはじめ
Monacaによるモバイルアプリ開発ことはじめ
 
PhoneGapユーザー会@大阪 講演資料
PhoneGapユーザー会@大阪 講演資料PhoneGapユーザー会@大阪 講演資料
PhoneGapユーザー会@大阪 講演資料
 
みなさんがHtml5をやらなくていい3つの理由
みなさんがHtml5をやらなくていい3つの理由みなさんがHtml5をやらなくていい3つの理由
みなさんがHtml5をやらなくていい3つの理由
 
いまさら聞けない!HTML5超入門
いまさら聞けない!HTML5超入門いまさら聞けない!HTML5超入門
いまさら聞けない!HTML5超入門
 
企画者が押さえておきたいHtml5アプリ開発の要点
企画者が押さえておきたいHtml5アプリ開発の要点企画者が押さえておきたいHtml5アプリ開発の要点
企画者が押さえておきたいHtml5アプリ開発の要点
 
20120413 nestakabaneworkshop
20120413 nestakabaneworkshop20120413 nestakabaneworkshop
20120413 nestakabaneworkshop
 
Going Serverless, Building Applications with No Servers
Going Serverless, Building Applications with No ServersGoing Serverless, Building Applications with No Servers
Going Serverless, Building Applications with No Servers
 
C#でのクロスプラットフォーム モバイル開発環境 Xamarin のご紹介
C#でのクロスプラットフォーム モバイル開発環境 Xamarin のご紹介C#でのクロスプラットフォーム モバイル開発環境 Xamarin のご紹介
C#でのクロスプラットフォーム モバイル開発環境 Xamarin のご紹介
 

More from アシアル株式会社

JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)アシアル株式会社
 
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)アシアル株式会社
 
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)アシアル株式会社
 
Onsen UI 2 開発における JS フレームワーク衝突事例集
Onsen UI 2 開発における JS フレームワーク衝突事例集Onsen UI 2 開発における JS フレームワーク衝突事例集
Onsen UI 2 開発における JS フレームワーク衝突事例集アシアル株式会社
 
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)アシアル株式会社
 
Onsen UI の最近とこれから 〜 国内サポートはじめました
Onsen UI の最近とこれから 〜 国内サポートはじめましたOnsen UI の最近とこれから 〜 国内サポートはじめました
Onsen UI の最近とこれから 〜 国内サポートはじめましたアシアル株式会社
 
Monacaソリューションセミナー20160621
Monacaソリューションセミナー20160621Monacaソリューションセミナー20160621
Monacaソリューションセミナー20160621アシアル株式会社
 
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀアシアル株式会社
 
HTML5プロフェッショナル認定試験対策講座
HTML5プロフェッショナル認定試験対策講座HTML5プロフェッショナル認定試験対策講座
HTML5プロフェッショナル認定試験対策講座アシアル株式会社
 

More from アシアル株式会社 (14)

MonacaとEducation活動の紹介
MonacaとEducation活動の紹介MonacaとEducation活動の紹介
MonacaとEducation活動の紹介
 
PWA 4 Business
PWA 4 BusinessPWA 4 Business
PWA 4 Business
 
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
 
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
 
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)
 
Onsen UI 2 開発における JS フレームワーク衝突事例集
Onsen UI 2 開発における JS フレームワーク衝突事例集Onsen UI 2 開発における JS フレームワーク衝突事例集
Onsen UI 2 開発における JS フレームワーク衝突事例集
 
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)
 
Onsen UI の最近とこれから 〜 国内サポートはじめました
Onsen UI の最近とこれから 〜 国内サポートはじめましたOnsen UI の最近とこれから 〜 国内サポートはじめました
Onsen UI の最近とこれから 〜 国内サポートはじめました
 
Gartner summit 2016
Gartner summit 2016Gartner summit 2016
Gartner summit 2016
 
Monacaソリューションセミナー20160621
Monacaソリューションセミナー20160621Monacaソリューションセミナー20160621
Monacaソリューションセミナー20160621
 
20160308seminar2
20160308seminar220160308seminar2
20160308seminar2
 
Nifty cloud mbaas
Nifty cloud mbaasNifty cloud mbaas
Nifty cloud mbaas
 
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ
 
HTML5プロフェッショナル認定試験対策講座
HTML5プロフェッショナル認定試験対策講座HTML5プロフェッショナル認定試験対策講座
HTML5プロフェッショナル認定試験対策講座
 

Recently uploaded

IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxAtomu Hidaka
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000Shota Ito
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Danieldanielhu54
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directoryosamut
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムsugiuralab
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略Ryo Sasaki
 
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdfUPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdffurutsuka
 
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 

Recently uploaded (9)

IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
 
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdfUPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdf
 
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
 

Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅

  • 1. 1URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved. Androidでもサクサク動く HTML5ハイブリッドアプリの作り⽅方 アシアル株式会社 ⽣生形  可奈奈⼦子
  • 2. 2URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved. アシアル株式会社について 「エンジニアリングでインターネットの成⻑⾧長を牽引する」 という事業コンセプトのもと、HTML5モバイルアプリを 中⼼心としたソフトウェアの受託開発を⾏行行っています。
  • 3. 3URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved. Monacaの紹介 •  クラウドベースのハイブリッドアプリ開発環境 •  iOS、Android、Chrome  Apps、ほか複数OS対応 •  無料料〜~ https://ja.monaca.io/
  • 4. 4URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved. Monacaによるアプリ開発 ブラウザだけで開発〜~テスト〜~アプリの⽣生成までのす べての⼯工程を⾏行行うことができます。 ①ブラウザで開発 ②実機で動作確認 ③ブラウザでビルド
  • 5. 5URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved. ハイブリッドアプリとは 2つのアプリの特徴をいいとこどりしたアプリ  ・  Webアプリ(クロスプラットフォーム性)  ・  ネイティブアプリ(デバイスの機能を使える)
  • 6. 6URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved. パフォーマンスを向上する3つの⽅方法
  • 7. 7URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved. ①  コーディングテクニック
  • 8. 8URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved. aタグやclickイベントを使わない •  aタグによる遷移やclickイベ ントは、発⽕火するまでに遅延 時間が発⽣生します •  タップ処理理を扱うモバイル向 けのライブラリを使いましょ う
  • 9. 9URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved. レイアウト再計算のコストを減らす •  要素の表⽰示・⾮非表⽰示の切切り替 え、移動やサイズの変更更など によって、要素のレイアウト が再計算されます •  要素サイズを固定値で指定し たり、絶対配置にすることで 周囲の要素への影響を極⼒力力減 らしましょう
  • 10. 10URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved. DOMツリーへの変更更を抑える •  DOMツリーに要素の追加な どの変更更処理理を加えると、 DOMの再構築&再描画の処 理理が都度度発⽣生します •  複数の要素をDOMに加える ときはDocumentFragment を利利⽤用して、複数の要素をま とめてから⼀一気にツリーに追 加しましょう
  • 11. 11URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved. アニメーションはCSSで CSS3 JavaScript jQueryのanimate()メソッドなどはもたつきが起こる ので、アニメーションするときはCSSのtransitionや animationを使いましょう。
  • 12. 12URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved. 絶賛発売中です アシアル株式会社 久保⽥田  光則  著 [iOS/Android対応]   HTML5  ハイブリッドアプリ 開発[実践]⼊入⾨門 技術評論論社  刊
  • 13. 13URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved. ②  優れたUIフレームワークの選定
  • 14. 14URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved. 今どきのUIフレームワーク
  • 15. 15URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved. Onsen  UI ・モバイルアプリライクな   フラットデザイン ・CSSによる、ネイティブと   遜⾊色ないアニメーション ・OSSとしてGitHubで公開 HTMLの独⾃自タグを記述することで、モバイル⽤用UIを 簡単に構築することができるフレームワークです。
  • 16. 16URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved. Onsen  UIがやっていること Onsen  UIでは、アニメーションの発⽣生時に よりパフォーマンスを向上させるための細やかな⼯工夫 がなされています。 (例例) •  CSSクラスを変更更するのではなく、style属性に対し てCSSプロパティを付与する •  leftやtopなどのプロパティは変更更せず、transform を使って位置を移動させる
  • 17. 17URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved. ③  WebViewを内包する
  • 18. 18URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved. ハイブリッドアプリの仕組み HTMLで作られたソースコードをネイティブコードで パッケージングしています。HTMLはWebView上に表 ⽰示されます。 Androidアプリ ネイティブ層 Androidアプリ
  • 19. 19URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved. 通常のハイブリッドアプリ 通常のハイブリッドアプリでは、OSに付属している WebViewを呼び出してHTMLを表⽰示しています。 Androidアプリ OS付属の WebView
  • 20. 20URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved. WebView内包アプリの登場 IntelのCrosswalkというWebViewをアプリに内包し てビルドすることで、レンダリングエンジンがOSに依 存しなくなります。 Androidアプリ
  • 21. 21URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved. Crosswalkのメリット・デメリット メリット デメリット •  Blinkという⾼高速なレンダ リングエンジンが搭載さ れている •  OSごとの動作差異異が発⽣生 しなくなる •  最新のAPIを利利⽤用できる •  USBデバッグを⾏行行うこと ができる •  アプリのバイナリサイズ が⼤大きくなる •  4系以降降でないと利利⽤用で きない •  4.4以降降では、OS標準 WebViewのほうがわずか に早い場合がある
  • 22. 22URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved. Android各バージョンのシェア 0.50% 9.10% 7.80% 21.30% 20.40%7.00% 33.90% 2.2 2.3.x 4.0.x 4.1.x 4.2.x 4.3 4.4
  • 23. 23URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved. 2系は1割以下 0.50% 9.10% 7.80% 21.30% 20.40%7.00% 33.90% 2.2 2.3.x 4.0.x 4.1.x 4.2.x 4.3 4.4
  • 24. 24URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved. 4.0〜~4.3が多い 0.50% 9.10% 7.80% 21.30% 20.40%7.00% 33.90% 2.2 2.3.x 4.0.x 4.1.x 4.2.x 4.3 4.4
  • 25. 25URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved. KitKatが数を伸ばしている 0.50% 9.10% 7.80% 21.30% 20.40%7.00% 33.90% 2.2 2.3.x 4.0.x 4.1.x 4.2.x 4.3 4.4
  • 26. 26URL  :  https://ja.monaca.io/              Copyright  ©  Asial  Corporation.  All  Right  Reserved. ありがとうございました