2012.07.30

【正誤情報】『基本から学ぶHTML5+JavaScript』

基本から学ぶHTML5+JavaScript

 本書の内容に下記のような誤りがありました。お詫びの上、訂正させていただきます。
 また、補足・更新情報も記載いたします。


◆p.vi、「本書の表記」、【補足】

 対応ブラウザに書いてある「Android標準ブラウザ」は、一般的に「ブラウザ」という名前や地球アイコンで標準インストールされています。Google検索ウィジェット等ではたとえばSDカードの閲覧で動作が異なる可能性があります。


◆p.18、「②DropboxなどのWeb共有機能を利用する方法」、【補足】

 Dropboxの仕様変更によって、2012年8月以降に作成する新規アカウントでは「Public」フォルダが作成されなくなる予定と発表されています。この仕様変更によって「パブリックリンクのコピー」が利用できなくなった場合には、③のFTPを利用してWebサーバーにHTMLを転送する方法などを利用すると同様にテストできます。
https://www.dropbox.com/help/16/en

<!–


◆p.35、画面「iPadでエラー表示を確認したところ」、【補足】

 紙面の都合で、画面中央を省略しています。

–>


◆p.64、上から2行目

◇誤
英語圏では同じ文字が¥と表示されるのでバックスラッシュとも呼びます

◇正
欧文フォントでは同じ文字が¥と表示されるのでバックスラッシュとも呼びます


◆p.103、1番上の行のコード

 for文の ( に対応する ) が欠けていたので、下記のように訂正いたします。

◇誤
for(var i = 0 ; i < array.length ; i++{

◇正
for(var i = 0 ; i < array.length ; i++){


◆p.105、ページ下側のリストのタイトル

 ファイル名を下記のように訂正いたします。

◇誤
◎funcobj-test.html ― 関数オブジェクトのサンプル

◇正
◎funcobj.html ― 関数オブジェクトのサンプル


◆p.186、下側のリストの内容

 手順①の位置を訂正いたします。ダウンロードファイルも更新しています。

◇誤
◎jsonp-client.html ― JSONP の呼び出し側ページ

(リスト冒頭)

<html>
<head>
<title>JSONP sample</title>

<!– JSONPの読み込み。Ajax通信ではなく<script>タグで読み込む –> ―――― ①
<script type=”text/javascript” src=”jsonp.js”></script>

◇正
◎jsonp-client.html ― JSONP の呼び出し側ページ

<body>
<h1>JSONPサンプル処理</h1>
<dl id=”list” />

<!– JSONPの読み込み。Ajax通信ではなく<script>タグで読み込む –> ―――― ①
<script type=”text/javascript” src=”jsonp.js”></script>

</body>
</html>

(リスト末尾)


◆p.187、上から2段落目と3段落目の間

 上から2段落目「JavaScriptの関数で読み込むことができるのです。」と3段落目(「ここまで説明しても、」~)の間に、下記のメモを追加します。

◇正

メモ:<script>タグの記述(手順①)は、呼び出されるjsonFeed関数の定義(手順②)よりも後に置く必要があります。<script>タグを関数定義より手前に置くと、「jsonFeed関数が未定義」というエラーが発生する場合があります。


◆p.232、上から2番目のリストのタイトル

◇誤
◎index.html ― 外部CSS ファイルへリンクするHTTMLファイルの例

◇正
◎index.html ― 外部CSS ファイルへリンクするHTMLファイルの例


◆p.261、ページ下側のリストのタイトル

◇誤
◎web-storage-2.html ― 次の画面での動作確認

◇正
◎web-storage-02.html ― 次の画面での動作確認


◆p.310、ページ上側のリストのタイトルを追加

 リストのタイトルが欠けていたので、下記のように追加します。

◇正
◎window-onoff.html(抜粋) ― オンライン/オフラインイベントの処理


◆p.337、「端末の向きが切り替わったタイミングを知ろう」

 Android 2.3以降の一部機種で異なる動作をすることがわかりましたので、下記のようにAndroidでも2.2以降利用可能になったwindow.onorientationchangeイベントを利用するように訂正します。

◇誤:リスト前の段落
—————————————-
 ところが、端末が回転したことを知る方法がAndroidとiOSで異なるので、ちょっと工夫が必要
です。iPhone/iPadなどiOSではwindow.onorientationchangeイベントを利用し、Androidでは
window.onresizeイベントを利用します。つまり、AndroidとiOSで分岐処理を記述して、端末を
傾けたタイミングを知る必要があります。
 以下は、Android/iOSの端末の判別と、画面の向きを表示するプログラムです。端末の向きを変え
た場合も、それに追随して縦横が表示されます。
—————————————-

◇正:リスト前の段落
—————————————-
 ところが、端末が回転したことを知る方法がAndroidの古いバージョン(2.1以前)で異なるので、ちょっと工夫が必要
です。iPhone/iPadなどiOSやAndroid 2.2以降ではwindow.onorientationchangeイベントを利用し、このイベントを持たないAndroid 2.1以前では
window.onresizeイベントを利用します。つまり、端末に応じて分岐処理を記述して、端末を
傾けたタイミングを知る必要があります。
 以下は、Android/iOSの端末の判別と、画面の向きを表示するプログラムです。端末の向きを変え
た場合も、それに追随して縦横が表示されます。
—————————————-

◇正:リスト◎sen-orientation-event.html ― イベント処理で画面の向きに追随
—————————————-

<!DOCTYPE html><html><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head><body>
  <p id="dev">端末</p>
  <h1 id="ori">向き</h1>
<script type="text/javascript">
  // OSを判定する                                                   ...①
  var ua = navigator.userAgent.toLowerCase();
  var android = (ua.indexOf("android") != -1);
  var iphone = (ua.indexOf("iphone") != -1);
  var ipad = (ua.indexOf("ipad") != -1);
  var ipod = (ua.indexOf("ipod") != -1);
  if (android) { // Android端末のとき                               ...②
    $("dev").innerHTML = "Android";

    if ( window.onorientationchange ) { // オブジェクトの存在を判定 ...③
      window.onorientationchange = resizeHandler;
      resizeHandler();
    } else {
      window.onresize = resizeHandler;
      resizeHandler();
    }

  } else if (iphone||ipad||ipod) { // iOS端末のとき                 ...④
    $("dev").innerHTML = "iPhone";
    window.onorientationchange = resizeHandler;
    resizeHandler();
  } else { // その他の端末のとき
    $("dev").innerHTML = "unknown";
  }

  function resizeHandler() { // 端末の向きを画面に表示
    var ori = window.orientation;
    if (Math.abs(ori) == 90) {
      $("ori").innerHTML = "横向き";
    } else {
      $("ori").innerHTML = "縦向き";
    }
  }
  function $(id) { return document.getElementById(id); }
</script></body></html>

—————————————-

◇誤:リストと画面後の段落
—————————————-
 プログラムでポイントとなるのは、はじめにOSの判定を行い(手順①)、OSごとに端末の向きが変
わったイベント(onresizeとonorientationchange)を設定している部分です(手順②と③)。OSの判定
にはnavigator.userAgentを参照します
—————————————-

◇正:リストと画面後の段落
—————————————-
 プログラムでポイントとなるのは、はじめにOSの判定を行い(手順①)、端末の向きが変
わったイベントを設定している部分です(手順②~④)。OSの判定
にはnavigator.userAgentを参照し(手順②と④)、onorientationchangeイベントオブジェクトが利用できるかどうかはオブジェクトが存在するかどうかで判定しています(手順③)
—————————————-