HTML5手習い

Google Chromeの開発者ツール

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Google Chromeのデベロッパーツールの基本的な使用方法について学びます。ネットワーク通信の内容を見る、要素の検証でHTMLをライブ編集する、Java Scriptデバッガの使用、そしてJava Scriptコンソールの使用方法について説明します。
講師:
06:17

字幕

このレッスンでは HTML 5 アプリケーションの 開発に利用すると便利な Google Chrome の デベロッパーツールの利用方法を説明します HTML 5 アプリケーションの実行自体は もちろん Google Chrome 以外のブラウザ ― Firefox や Safari Internet Explorer などでも可能です しかしながら Google Chrome であれば インストール時の状態で 充実した開発者の支援機能を 利用することができます 本コースでは HTML 5 アプリケーションの実行に Google Chrome を使用します デベロッパーツールを使うには メニューから― 「表示」の「開発 / 管理」 「デベロッパーツール」を選択します すると ブラウザ下部に このようなエリアが開きます もう一度 選択すれば閉じます また Mac 環境をお使いの方であれば Command + Option + I を 使うことで ショートカットで開くこともできます もう一度押せば閉じます Windows 環境の方は このショートカットは― Ctrl + Shift + I になります それでは Command + Option + I または Ctrl + Shift + I で 開発者ツールを開きましょう タブがいくつかあります 一番左側の Elements を 選択してみましょう ここでは HTML タグが 実際に表示されている部分の どこに対応するのかを確認したり― あるいはタグのプロパティを直接いじって 表示を変更したりすることもできます 例えば この表示されている画像の サイズを大きくしてみましょう img タグを選択して 右側の Style のエリアを選択します ここに直接 CSS のプロパティを 入力することができます width を 100% にしてみましょう するとこのように写真が 大きく表示されました このように実際の表示を確認しながら HTML を修正することができるため 開発効率が非常に向上します また Network タブでは― このようにページ上にある リソースのロードされる順番や ロードするために どの程度の時間が かかったのかといったことを 確認することができます この機能はページのロードパフォーマンスを 向上させる上で 非常に重要です また Source タブでは プログラムの ステップ実行などを行うことができます Source タブを選択して fizzbuzz.html を選択してみてください このようにソースコードが表示されます ここで例えば 15 行目を選択して 行数が表示されている数字の部分を クリックしてください すると このように色が変わります この状態で再度ページを ロードしてみましょう このようにページの実行途中で プログラムが停止しました この状態での Global 変数や Local 変数といったものの中身を 確認することができます これはプログラムのデバッグをする上で 非常に重要な機能となります またその他にも Timeline Profile といった デバッグやパフォーマンス向上の上で 役に立つ機能が搭載されています それでは 一番右端の Console タブを開きましょう ここには Console.log 関数で実行した log の出力結果が表示されます また 非常に重要な機能として ロードされているページの環境で JavaScript を実行することができます 例えば ここに JavaScript の コードを打ち込んでみます Console.log ('test'); すると コードが実行されて 「 test 」という文字列が出力されました またソースコードに記述されている こちらの「 i 」という変数の中身は どうなっているのか確認してみましょう Console タブに戻って 変数の名前 i を入力して Enter を押してみます すると i の中身は 今 15 であると表示されました これは先ほどブレイクポイントを この部分で表示して 最初にヒットしたところで止まった状態が i = 15 であったため こちらで i の中身を表示すると 15 と表示されたのです このように Google Chrome の デベロッパーツールを利用すれば ソースコードの中身が どのようになっているのかを 直感的に把握しながら 開発やデバッグを 進めていくことが可能となります これはプログラムに対する理解を 飛躍的に高めてくれますので 皆さんもデベロッパーツールを使って このコースを聞きながら 実際に API が どのような挙動をするのかを こまめに確認しながら学習しましょう このコースでは HTML 5 アプリケーションの開発に非常に便利な Google Chrome の デベロッパーツールの 使用方法について説明しました

HTML5手習い

このコースではHTML5 APIを中心に、HTML5でのプログラミングについて学びます。HTTPや文字コード、バイナリデータやアニメーションの原理など実際のアプリケーション開発で必要となる基本的な知識を学びます。HTML5 Canvasを中心として、Web APIとの通信やWebフォントなどWebプログラミングで必要な技術を習得します。

6時間01分 (44 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年04月22日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。