New 24th Embarcadero Developer Camp · 2018. 6. 7. · 1 17Th Developer Camp...
Transcript of New 24th Embarcadero Developer Camp · 2018. 6. 7. · 1 17Th Developer Camp...
![Page 1: New 24th Embarcadero Developer Camp · 2018. 6. 7. · 1 17Th Developer Camp 「HTML5によるモバイル/タブ レットアプリケーション開発」 エンバカデロ・テクノロジーズ.](https://reader030.fdocument.pub/reader030/viewer/2022011923/6054007c128f7314f43d3009/html5/thumbnails/1.jpg)
1
17Th Developer Camp
「HTML5によるモバイル/タブレットアプリケーション開発」
エンバカデロ・テクノロジーズ エヴァンジェリスト 高橋智宏
【A1】HTML5チュートリアルセッション
![Page 2: New 24th Embarcadero Developer Camp · 2018. 6. 7. · 1 17Th Developer Camp 「HTML5によるモバイル/タブ レットアプリケーション開発」 エンバカデロ・テクノロジーズ.](https://reader030.fdocument.pub/reader030/viewer/2022011923/6054007c128f7314f43d3009/html5/thumbnails/2.jpg)
2
モバイル開発の需要
• モバイル/タブレット開発の需要が増えている
• 例えば… – 既存のWebシステムをタブ
レット端末向けにしたい – 新規でモバイル/タブレット用
の業務アプリ開発の依頼が増えている
– さまざまなデバイスに対応しなければいけない
など
出典:(株) MM総研 [ 東京・港 ]
モバイル開発にも対応可能なHTML5に期待が集まっている。
![Page 3: New 24th Embarcadero Developer Camp · 2018. 6. 7. · 1 17Th Developer Camp 「HTML5によるモバイル/タブ レットアプリケーション開発」 エンバカデロ・テクノロジーズ.](https://reader030.fdocument.pub/reader030/viewer/2022011923/6054007c128f7314f43d3009/html5/thumbnails/3.jpg)
3
HTML5なら…
• PC向けのWebアプリをそのまま利用
操作性に難 • ネイティブ開発の場合
デバイスごとに別の開発環境で開発 工数の増大 再利用が困難
従来のモバイル開発 HTML5を採用した場合
• CSS3/JavaScriptが使える • デスクトップに匹敵する
アプリが作れる • モバイル向けに最適化 • UIを統一できる • ネイティブ化にも対応
![Page 4: New 24th Embarcadero Developer Camp · 2018. 6. 7. · 1 17Th Developer Camp 「HTML5によるモバイル/タブ レットアプリケーション開発」 エンバカデロ・テクノロジーズ.](https://reader030.fdocument.pub/reader030/viewer/2022011923/6054007c128f7314f43d3009/html5/thumbnails/4.jpg)
4
HTML5入門
• HTML5 = HTML5 + CSS3 + JavaScript • <!DOCTYPE html> • <meta charset="UTF-8"> • フィールドの型&検証
– <input type="text" required> – <input type="text" pattern="..."> – <input type="email"> – <input type="date">
• Canvas(2D), Audio, Video, WebGL(3D), AppCache • ブラウザのサポートレベルを判定してくれるWebサイト
– http://html5test.com/index.html
![Page 5: New 24th Embarcadero Developer Camp · 2018. 6. 7. · 1 17Th Developer Camp 「HTML5によるモバイル/タブ レットアプリケーション開発」 エンバカデロ・テクノロジーズ.](https://reader030.fdocument.pub/reader030/viewer/2022011923/6054007c128f7314f43d3009/html5/thumbnails/5.jpg)
5
HTML5によるモバイル開発
• たいてい必要なもの – エディタ – Google Chrome
• WebKitベース – http://www.webkit.org/
– シミュレータ/エミュレータ – 各種実機 – 各種ライブラリ・フレームワーク
• jQuery/jQuery Mobile • ThemeRoller for jQuery Mobile • PhoneGap(オプショナル)
– Webサーバー • PHPエンジン(オプショナル)
![Page 6: New 24th Embarcadero Developer Camp · 2018. 6. 7. · 1 17Th Developer Camp 「HTML5によるモバイル/タブ レットアプリケーション開発」 エンバカデロ・テクノロジーズ.](https://reader030.fdocument.pub/reader030/viewer/2022011923/6054007c128f7314f43d3009/html5/thumbnails/6.jpg)
6
ひとつの解決策: HTML5 Builder
• オールインワン – HTML5、CSS3、JavaScriptの開発をサポート – サーバーサイドのPHP開発も可能 – Webサーバー、Webブラウザを統合 – モバイル向け開発フレームワークも統合済 – エディタ、デバッガ、プロファイラも統合
• ビジュアル – モバイル向けのビジュアルデザイナでドラッグ&ドロップ開発
– コンポーネントによりカプセル化 • プロパティ & イベントハンドラ
HTML5 Builder
![Page 7: New 24th Embarcadero Developer Camp · 2018. 6. 7. · 1 17Th Developer Camp 「HTML5によるモバイル/タブ レットアプリケーション開発」 エンバカデロ・テクノロジーズ.](https://reader030.fdocument.pub/reader030/viewer/2022011923/6054007c128f7314f43d3009/html5/thumbnails/7.jpg)
7
17Th Developer Camp
HTML5 Builder
![Page 8: New 24th Embarcadero Developer Camp · 2018. 6. 7. · 1 17Th Developer Camp 「HTML5によるモバイル/タブ レットアプリケーション開発」 エンバカデロ・テクノロジーズ.](https://reader030.fdocument.pub/reader030/viewer/2022011923/6054007c128f7314f43d3009/html5/thumbnails/8.jpg)
8
HTML+CSS+JavaScript+エディタ+プレビュー etc. • [新規作成] | [HTML5 Builderプロジェクト] | [クライアント モバイル アプリケーション]
![Page 9: New 24th Embarcadero Developer Camp · 2018. 6. 7. · 1 17Th Developer Camp 「HTML5によるモバイル/タブ レットアプリケーション開発」 エンバカデロ・テクノロジーズ.](https://reader030.fdocument.pub/reader030/viewer/2022011923/6054007c128f7314f43d3009/html5/thumbnails/9.jpg)
9
実際に作ってみよう(その1)
![Page 10: New 24th Embarcadero Developer Camp · 2018. 6. 7. · 1 17Th Developer Camp 「HTML5によるモバイル/タブ レットアプリケーション開発」 エンバカデロ・テクノロジーズ.](https://reader030.fdocument.pub/reader030/viewer/2022011923/6054007c128f7314f43d3009/html5/thumbnails/10.jpg)
10
実際に作ってみよう(その2)
![Page 13: New 24th Embarcadero Developer Camp · 2018. 6. 7. · 1 17Th Developer Camp 「HTML5によるモバイル/タブ レットアプリケーション開発」 エンバカデロ・テクノロジーズ.](https://reader030.fdocument.pub/reader030/viewer/2022011923/6054007c128f7314f43d3009/html5/thumbnails/13.jpg)
13
17Th Developer Camp
Q & A