内容紹介
はじめてでも大丈夫！ アプリを作る楽しさがこの1冊だけで体験できます本書はプログラミングがまったくはじめての人でも、HTML5＋CSS3＋JavaScriptを使って簡単なサンプルを作りながら、Android／iPhoneの両方に対応したWebアプリの作成を楽しく体験できる入門書です。
全9章を順番に読み進めることで、HTML5アプリの基礎知識、アプリ作成に必要な準備、コードの書き方などが理解できます。章ごとに短いトピックで区切られているので、自分のペースで学べます。PCスクールなどの教材としても適しています。
本書は2012年6月発行の『アプリを作ろう！ HTML5入門』を、最新情報に合わせて大幅に改訂したものです。今回の改訂ではコードエディターとして、無償配布されている「Visual Studio Code」を使用し、エディターの使い方の基礎も学べる内容になっています。
●本書で作るサンプルアプリ
本書では、Android／iPhoneの両方に対応したWebアプリ「アルバムマップ」を作成します。このアプリは、現在位置を地図上に表示して、その地点のメモを手書きのイラストとともに記録していきます。
記録したメモは、トップ画面に一覧表示され、リスト項目をタップするとメモを記録した位置に地図が移動して、地図上のマーカーをタップすることでメモの詳細が確認できます。
「アルバムマップ」を作りながら、HTML、CSS、JavaScriptの基礎知識や画面のデザイン、コードの書き方などを学んでいきます。
●本書の特長
・必要な手順をもれなく、ていねいに説明！
・手順どおりに進めるだけでアプリが完成！
・学習用ファイルがダウンロードできます！
第1章 HTML5の基本を理解しよう
1.1 HTML5とは？
1.2 HTML5アプリ開発で必要な知識
1.3 HTML5とスマートフォン
1.4 本書で学ぶこと
第2章 HTML5開発の環境を整えよう
2.1 HTML5によるスマホアプリ開発に必要なもの
2.2 Google Chromeをインストールしよう
2.3 Firebaseを準備しよう
2.4 Visual Studio Codeを準備しよう
コラム サンプルファイルの使い方
第3章 アルバムマップのトップ画面を作成しよう
この章で学ぶこと
3.1 アルバムマップの動きを理解しておこう
3.2 HTML5ページの基本を理解しよう
3.3 スタイルシートでページをデザインしよう
第4章 アルバムマップの見た目を完成させよう
この章で学ぶこと
4.1 メモ登録画面を作成しよう
コラム 正規表現
4.2 JavaScriptの簡単なコードを実行しよう
4.3 JavaScriptのイベント処理を理解しよう
第5章 現在位置を表す地図を作成しよう
この章で学ぶこと
5.1 現在位置の情報を取得しよう
コラム テンプレート文字列以前は
5.2 Geolocation APIのエラー処理や動作オプションを理解しよう
5.3 変化する位置情報を定期的に取得しよう
5.4 現在位置を地図上に表示しよう
コラムVSCodeのエディター分割
第6章 アルバムマップにメモ情報を保存しよう
この章で学ぶこと
6.1 現在位置を一時的に保存しよう
6.2 メモ情報の登録画面を作成しよう
6.3 メモ情報の登録画面を改良しよう
第7章 アルバムマップのメモ情報を表示しよう
この章で学ぶこと
7.1 共通機能を実装しよう
コラム JavaScriptでの正規表現
7.2 メモ情報を一覧表示しよう
7.3 地図上にメモをピン立てしよう
7.4 情報ウィンドウの表示機能を改良しよう
7.5 既存のメモ情報を削除しよう
第8章 CSS3でページをよりリッチにデザインしよう
この章で学ぶこと
8.1 CSS3の基礎知識
8.2 ページの背景をグラデーションにしよう
8.3 メニューリンクに影を付けてみよう
コラム 文字に影を付けるには
8.4 ボックス領域の角を丸めてみよう
8.5 より便利になったCSS3のセレクターを活用しよう
第9章 アルバムマップを手書き対応しよう
この章で学ぶこと
9.1 キャンバスに基本的な図形を描画してみよう
9.2 Canvas APIを利用してさまざまな図形を描画しよう
9.3 タッチ操作でキャンバスに落書きしよう
9.4 キャンバスに描いた画像を保存／表示しよう