実践テクニック HTML5 スマートフォンWebアプリ制作

概 要

HTML5+JavaScriptでここまでできる! AndroidおよびiOS対応のスマートフォン向けWebアプリ開発の入門書です。本書ではこれからHTML5を勉強したい人、スマートフォン向けWebアプリを制作してみたい人を対象に「習うより慣れろ」のコンセプトで実践的なアプリ開発のノウハウを解説しました。コードやスクリプトの書式ばかり読んでいても学習効果は薄いため、Webアプリ開発に必要なHTML5とスマートフォンの最低限の知識を解説したうえで、HTML5の要素技術ごとにテーマを絞ってアプリ開発の作り方を紹介しています。Javascriptの初心者でもつまづかずに読めるよう、プログラミングを書くうえでのちょっとしたコツや考え方もアドバイスしています。

著者 谷中志織
価格 本体2900円(税別)
ISBN 978-4-7980-3189-7
発売日 2011/12/21
判型 B5変
色数 4色
ページ数 400
CD/DVD
対象読者 初級
シリーズ
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

※リンク先によっては、販売ページが用意されていないことがあります。あらかじめご了承ください。

新しいウィンドウで開く 書籍購入のご案内

サポート

サポート情報は以下からご参照下さい。

サポート情報へのリンク

目次

Part 1 基礎編

Chapter 01 HTML5とCSS3

01-1 HTML5

HTML5の誕生

HTML5の8つの特徴

■グラフィック

■コネクティビティ

■デバイスアクセス

■マルチメディア

■オフラインストレージ

■パフォーマンス

■セマンティクス

■スタイリング

HTML4との違い

01-2 CSS3

CSS3

01-3 HTML5の対応状況

ブラウザのHTML5への対応

Chapter 02 スマートフォンサイト作成の基本

02-1 スマートフォンの画面サイズ

画面サイズと文字

02-2 スマートフォンサイト制作の考え方

画面サイズがバラバラな端末。さぁ困った……?

スマートフォンとPCとの振分け

スマートフォンサイトで考慮すべき点

■3G回線は遅い

■デフォルトブラウザ以外のことも考慮にいれる

■フォームでのテキスト入力時にはその属性を指定してやる

■OSのバージョンによる違いを考慮にいれる

02-3 スマートフォンサイト制作のデバッグ環境

iOSシミュレーター

Androidシミュレーター

JavaScriptデバッグ環境

■Safari

■Firefox + Firebug

Chapter 03 スマートフォンサイトの作り方

03-1 スマートフォンサイトのデザイン

UIボタン? 画像かCSSか

ソリッドデザインとリキッドデザイン

画像によるリンク

フォントのボールド(太字)表現

フォーム要素

WebClipアイコン

魔法の数字44

03-2 スマートフォン向けUIライブラリJQuery Mobile

JQuery Mobile

03-3 スマートフォン対応サイトの例

リスティングメニュータイプ

ボックスメニュータイプ

Chapter 04 HTML5の要素技術

04-1 Canvas

Canvasとは

Canvasの利用方法

Canvasで図形を描画する

画像をCanvasに取り込む

04-2 Audio/Video

Audio

Audioの利用方法

Audioでオーディオファイルを再生する

Video

Videoの利用方法

Videoで動画ファイルを再生する

04-3 ローカルストレージ

Web Storage

Web Storageの利用方法

Web Storageを使ってみる

Web SQL Database

Web SQL Databaseの利用方法

Web SQL Databaseを使ってみる

インデックスデータベース(参考)

04-4 Geolocation

Geolocation

Geolocationの利用方法

Geolocationを使ったサンプル

04-5 WebSocket

WebSocket

WebSocketの利用方法

04-6 アプリケーションキャッシュ

アプリケーションキャッシュ

アプリケーションキャッシュの利用方法

アプリケーションキャッシュのサンプル

Part 2 グラフィックス実践テクニック編

Chapter 05 お絵描きアプリ

05-1 自由にお絵描き

Canvasで線を引く

■HTML部

■JavaScript部

05-2 描いた絵を消去する

90度回転させて絵を消去する

■JavaScript部

05-3 線の太さと色を指定する

線の幅と色の指定

■HTML部

■JavaScript部

Chapter 06 写真アルバムアプリ

06-1 写真をタイマーで自動で切り替える

サーバ上に画像ファイルの一覧を用意する

■写真ファイルリスト

■HTML部

■JavaScript部

06-2 写真をスワイプで切り替える

スワイプ動作に対応する

■JavaScript部

06-3 写真切り替え時にスライドインする

スライドインの動きをつける

■JavaScript部

Part 3 マルチメディア実践テクニック編

Chapter 07 オーディオプレイヤーアプリ

07-1 オーディオプレイヤー

JavaScriptからオーディオファイルを操作する

■HTML部

■CSS部

■JavaScript部

07-2 オーディオプレイヤーに停止ボタンをつける

停止ボタンを追加する

■HTML部

■JavaScript部

07-3 曲リストをサーバから取得し、再生プログレスバーを表示する

再生プログレスバーの表示

■曲リストファイル

■HTML部

■JavaScript部

Chapter 08 ビデオプレイヤーアプリ

08-1 簡易ビデオプレイヤー

扱う動画ファイルを決める

■HTML部

08-2 ビデオプレイヤーをJavaScriptで制御する

再生・ポーズ(一時停止)・停止機能の作成

■HTML部

■JavaScript部

08-3 再生中のビデオに字幕タイトルをつける

テキストを重ね合わせする機能の作成

■字幕テキスト

■HTML部

■CSS部

■JavaScript部

Part 4 ローカルストレージ実践テクニック編

Chapter 09 シンプルメモ帳アプリ

09-1 シンプルメモ帳アプリ

保存機能の作成

■HTML部

■CSS部

■JavaScript部

09-2 削除機能の追加

削除機能の作成

■HTML部

■JavaScript部

09-3 複数メモへの対応

複数メモへの対応

■HTML部

■JavaScript部

Chapter 10 家計簿アプリ

10-1 家計簿アプリ

Web SQL Databaseを使えるようにする

■HTML部

■CSS部

■JavaScript部

10-2 サマリー表示への対応

画面構成を考える

■HTML部(index.html)

■HTML部(regist.html)

■CSS部

■JavaScript部

Part 5 位置情報実践テクニック編

Chapter 11 マップマーカーアプリ

11-1 現在地表示マップアプリ

現在地を取得する

■HTML部

■JavaScript部

11-2 マップマーカー機能

マーカーの複数登録と表示機能の作成

■HTML部

■JavaScript部

11-3 マップの追随と自身マーカーの回転

自分の位置を常に地図の中心にする

■HTML部

■CSS部

■JavaScript部

Chapter 12 待合わせMAPアプリ

12-1 待合わせMAPアプリの画面設計と基本コンポーネント

スマートフォンらしいデザイン

■画面設計

■HTML部

■CSS部

■JavaScript部

12-2 待合わせMAPアプリの完成

相手との距離のリアルタイム表示

■JavaScript部

■PHP部(regist.php)

■PHP部(search.php)

Part 6 WebSocket実践テクニック編

Chapter 13 インスタントメッセンジャーアプリ

13-1 WebSocketとインスタントメッセンジャーアプリ

WebSocketでサーバプッシュを実現する

■WebSocketサーバ

■HTML部

■CSS部

■JavaScript部

13-2 オンライン/オフライン機能の実装

オンラインリストの表示

■HTML部

■CSS部

■JavaScript部

■PHP部(server.phpの改造)

■PHP部

Chapter 14 対戦リバーシアプリとNode.js

14-1 Node.jsとNode WebSocket Server

Node.jsとは

■Node.js

■Node.jsとNode WebSocket Serverのインストール

14-2 対戦リバーシアプリの画面作成

ボード盤上のマス目を把握する

■画面設計

■ボード盤配列

■HTML部

■CSS部

■JavaScript部

14-3 対戦リバーシアプリのコーディング

ゲームのロジックとデータ管理

■JSON形式

■データフォーマット

■HTML部

■クライアントサイドJavaScript部

■サーバサイドJavaScript部

Part 7 応用テクニック編

Chapter 15 PhoneGapでネイティブアプリケーション

15-1 PhoneGap

PhoneGapとは

PhoneGapを利用するには

15-2 iOSでネイティブアプリ

PhoneGapのインストール

iOS向けPhoneGapの利用方法

実機にアプリを転送する

15-3 Androidでネイティブアプリ

PhoneGapのインストール

Eclipseのインストール

15-4 PhoneGapでドライブレコーダー(もどき)アプリ

ドライブレコーダー(もどき)アプリ

■HTML部

■JavaScript部

資料

資料A Canvasのメソッド・プロパティ

資料B Audio/Videoのメソッド・プロパティ

資料C ローカルストレージのメソッド・プロパティ

資料D Geolocationのメソッド・プロパティ

資料E WebSocketのメソッド・プロパティ

資料F アプリケーションキャッシュのメソッド・プロパティ

資料G PhoneGapAPIのメソッド・プロパティ

PR

秀和システム