プログラム解析やコーディング作業中に独り言が多くなるのが気になるお年頃になりました、網干です。
集中力が途切れてようやく独り言を発している事に気づきます…悪い癖です。

そんな私が独り言をフルに発揮して、コツコツ作ってきたクラウドアプリ、以前からちょくちょく情報を小出ししていた「SimpleOrder」の大幅アップデートを行いました！
以前は順番待ち特化のシステムでしたが、いくつかの機能追加とデザインの変更で、カスタマイズ次第ではミニホームページが完成するシステムになりました！
「SimpleOrder」は0円から使えますので、ぜひお試しください！
無料で使えるシンプルな順番待ち・受付管理アプリ simple order

さて、今回のブログ内容ですが。
前回に引き続き、HTMLのformタグで指定するinput要素で、HTML5で追加されたtype属性のブラウザごとの動きの違いを記載します。
前回は”email”、”url”、”search”、”tel”、”number”、”date”の六つの機能を各ブラウザで見て比較しました。
前回の記事はこちら：

今回は”datetime”、”datetime-local”、”month”、”week”、”time”、”range”、”color”の7つの機能を各ブラウザで見て比較します。

確認を行うブラウザの一覧

今回確認を行うブラウザは下記の4種類になります。
1. Google Chrome バージョン 53.0.2785.101 m (64-bit)
2. Microsoft Edge バージョン 25.10586.0.0
3. Firefox バージョン 48.0.2
4. Safari バージョン 5.1.7 (7534.57.2)

HTML5から追加されたtype属性一覧

今回は、HTML5から追加された下記のtype属性の確認を行います。

それでは早速、ブラウザごとに機能の違いを見ていきましょう！

type属性に”datetime”を指定した際の機能比較

1. GoogleChromeの場合

どんな入力でも送信可能

2. Microsoft Edgeの場合

どんな入力でも送信可能

3. Firefoxの場合

・どんな入力でも送信可能

4. Safariの場合

・テキストボックスの増減ボタンで年、月、日、時、分が自動入力される
・どんな入力でも送信可能

type属性に”datetime-local”を指定した際の機能比較

1. GoogleChromeの場合

・テキスト内には数値以外は入力不可
・増減ボタンで入力数値の増減が可能
・テキスト内のクリアボタンで入力をクリアできる
・年、月、日、時、分の入力が一つでも欠けている場合は送信押下時にエラーが表示される。
・カレンダーを表示して年、月、日を設定することが可能
※入力が空白の場合は送信可能

2. Microsoft Edgeの場合

・テキスト内の日付部分をクリックすると年、月、日を設定するウインドウが表示される
・テキスト内の時間部分をクリックすると時、分を設定するウインドウが表示される
・どちらか片方が空白でも送信可能
※入力が空白の場合は送信可能

3. Firefoxの場合

・どんな入力でも送信可能

4. Safariの場合

・テキストボックスの増減ボタンで年、月、日、時、分が自動入力される
・どんな入力でも送信可能

type属性に”month”を指定した際の機能比較

1. GoogleChromeの場合

・テキスト内には数値以外は入力不可
・増減ボタンで入力数値の増減が可能
・テキスト内のクリアボタンで入力をクリアできる
・年、月の入力が一つでも欠けている場合は送信押下時にエラーが表示される。
・カレンダーを表示して年、月を設定することが可能
※入力が空白の場合は送信可能

2. Microsoft Edgeの場合

・テキスト内の日付部分をクリックすると年、月を設定するウインドウが表示される
※入力が空白の場合は送信可能

3. Firefoxの場合

・どんな入力でも送信可能

4. Safariの場合

・テキストボックスの増減ボタンで年、月が自動入力される
・どんな入力でも送信可能

type属性に”week”を指定した際の機能比較

1. GoogleChromeの場合

・テキスト内には数値以外は入力不可
・増減ボタンで入力数値の増減が可能
・テキスト内のクリアボタンで入力をクリアできる
・年、週の入力が一つでも欠けている場合は送信押下時にエラーが表示される。
・カレンダーを表示して年、週を設定することが可能
※入力が空白の場合は送信可能

2. Microsoft Edgeの場合

・テキスト内の日付部分をクリックすると年、週を設定するウインドウが表示される
※入力が空白の場合は送信可能

3. Firefoxの場合

・どんな入力でも送信可能

4. Safariの場合

・テキストボックスの増減ボタンで年、週が自動入力される
・どんな入力でも送信可能

type属性に”time”を指定した際の機能比較

1. GoogleChromeの場合

・テキスト内には数値以外は入力不可
・増減ボタンで入力数値の増減が可能
・テキスト内のクリアボタンで入力をクリアできる
・時、分の入力が一つでも欠けている場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能

2. Microsoft Edgeの場合

・テキスト内の時間部分をクリックすると時、分を設定するウインドウが表示される
※入力が空白の場合は送信可能

3. Firefoxの場合

・どんな入力でも送信可能

4. Safariの場合

・テキストボックスの増減ボタンで時、分が自動入力される
・どんな入力でも送信可能

type属性に”range”を指定した際の機能比較

1. GoogleChromeの場合

・レンジバーが表示され、左右に調整することで数値を増減させる

2. Microsoft Edgeの場合

・レンジバーが表示され、左右に調整することで数値を増減させる
・レンジバーの移動中は数値が表示される

3. Firefoxの場合

・レンジバーが表示され、左右に調整することで数値を増減させる

4. Safariの場合

・レンジバーが表示され、左右に調整することで数値を増減させる

type属性に”color”を指定した際の機能比較

1. GoogleChromeの場合

・カラー選択の入力欄が表示され、クリックすると別ウインドウで色の設定が可能

2. Microsoft Edgeの場合

・カラー選択の入力欄が表示され、クリックすると別ウインドウで色の設定が可能

3. Firefoxの場合

・カラー選択の入力欄が表示され、クリックすると別ウインドウで色の設定が可能

4. Safariの場合

・どんな入力でも送信可能

以上で、HTML5から追加されたtype属性の各ブラウザでの比較は終了です。

最後に

いかがでしたか？

Part.1の記事も通して見ていただければわかりますが、ブラウザごとに見た目も機能も大きく異なっています。
そのため、どれか一つだけをカバーするだけではお客様が使うシステムとしては不十分になってしまいます。
ブラウザ上で表示するシステムを開発する際には注意しなければなりませんね。

今回は、SimpleOrderの作成途中でtype属性の”color”で問題が発覚したため、今回のような調査を行うキッカケを得ることができました。
私が作成したシステムで、私の知らないところで不十分な機能あるかもしれないのは非常に恐ろしいですね…。
ですが、失敗は非常に貴重な経験となりますので、しっかりと理解して次に活かしていきましょう！

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

月曜担当に戻ってまいりました、網干です。

今回は、HTMLのformタグで指定するinput要素で、HTML5で追加されたtype属性のブラウザごとの動きの違いを記載します。
今までは「ブラウザごとに違いがあるといっても、そんなに大きな違いはないのでは？」と思っていましたが、大間違いでした…。

フォームの部品は、あらかじめスタイルが決まっていたり、入力制限をしてくれたりと、便利で頼れる機能ではあるのですが、
全ブラウザが対応してるわけではないので、エンジニアの想定とは異なる動きをしてしまう場合があります。
従って、様々なブラウザで見られるようにするには注意が必要です。

[2016.9.19更新]
第2弾は”datetime”、”datetime-local”、”month”、”week”、”time”、”range”、”color”の7つの機能を各ブラウザで比較しました。

確認を行うブラウザの一覧

今回確認を行うブラウザは下記の4種類になります。
1. Google Chrome バージョン 53.0.2785.101 m (64-bit)
2. Microsoft Edge バージョン 25.10586.0.0
3. Firefox バージョン 48.0.2
4. Safari バージョン 5.1.7 (7534.57.2)

HTML5から追加されたtype属性一覧

今回は、HTML5から追加された下記のtype属性の確認を行います。

ブラウザごとに各type属性の表示を確認してみる

本当にブラウザごとに表示が違うのか…？
早速確認してみましょう！
(以下、実験用サイトにて表示確認をした画像になります)

・Google Chromeで表示すると…

・Microsoft Edgeで表示すると…

・Firefoxで表示すると…

・Safariで表示すると…

このように、同じtype属性を使っているにも関わらず、見た目が違うものが多くあります。
特に type=”range” に関しては見事に全てのブラウザでスタイルが一致していません。

アプリやソフトウェアの開発をしていると、説明書等のドキュメントを作成する際に、画面のスクリーンショットを張り付けて説明をすることが多いです。
上記のように、ブラウザで表示するサービスを開発した際に、ブラウザごとに見た目が異なってしまうと、PCを日常的に使わない、または、そもそもコンピュータになかなか触れないユーザーさんは画面の違いに戸惑ってしまいます。

なので、こういった部分はできる限り統一した作りにするように、注意しなければなりません。

…と、自分への戒めの言葉はここまでにして。

見た目に違いがあるのはわかったので、機能にはどのような違いがあるのか、見ていきましょう。

今回は”email”、”url”、”search”、”tel”、”number”、”date”の六つの機能を各ブラウザで見て比較します。
（後半の七つの機能は来週のブログに載せる予定です。）

type属性に”email”を指定した際の機能比較

1. GoogleChromeの場合

・テキスト内の入力が’文字列’ + ‘@’ + ‘文字列’の形式でない場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能

2. Microsoft Edgeの場合

・テキスト内の入力が’文字列’ + ‘@’ + ‘文字列’の形式でない場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能

3. Firefoxの場合

・テキスト内の入力が’文字列’ + ‘@’ + ‘文字列’の形式でない場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能

4. Safariの場合

・どんな入力でも送信可能

type属性に”url”を指定した際の機能比較

1. GoogleChromeの場合

・テキスト内の入力が’http:’ + ‘文字列’の形式でない場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能

2. Microsoft Edgeの場合

・テキスト内の入力が’http:’から始まる文字列でない場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能

3. Firefoxの場合

・テキスト内の入力が’http:’から始まる文字列でない場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能

4. Safariの場合

・どんな入力でも送信可能

type属性に”search”を指定した際の機能比較

GoogleChrome、Microsoft Edge、Firefox、Safariの場合

・どのような入力でも送信可能（※画像はGoogleChromeになります）

type属性に”tel”を指定した際の機能比較

GoogleChrome、Microsoft Edge、Firefox、Safariの場合

・どのような入力でも送信可能（※画像はGoogleChromeになります）

type属性に”number”を指定した際の機能比較

1. GoogleChromeの場合

・テキスト内には数値以外は入力不可
・増減ボタンで入力数値の増減が可能
※入力が空白の場合は送信可能

2. Microsoft Edgeの場合

・テキスト内には数値以外も入力可能
・テキスト内のクリアボタンで入力をクリアできる
・数値以外の入力がある場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能

3. Firefoxの場合

・テキスト内には数値以外も入力可能
・増減ボタンで入力数値の増減が可能
・数値以外の入力がある場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能

4. Safariの場合

・テキスト内には数値以外も入力可能
・数値以外を入力した場合は、マウスカーソルのフォーカスが移動した際にテキストボックスがクリアされる
・増減ボタンで入力数値の増減が可能
※入力が空白の場合は送信可能

type属性に”date”を指定した際の機能比較

1. GoogleChromeの場合

・テキスト内には数値以外は入力不可
・増減ボタンで入力数値の増減が可能
・テキスト内のクリアボタンで入力をクリアできる
・年、月、日の入力が一つでも欠けている場合は送信押下時にエラーが表示される。
・カレンダーを表示して年月日を設定することが可能
※入力が空白の場合は送信可能

2. Microsoft Edgeの場合

・テキスト内をクリックすると年月日を設定するウインドウが表示される
※入力が空白の場合は送信可能

3. Firefoxの場合

・どのような入力でも送信可能

4. Safariの場合

・どのような入力でも送信可能
・増減ボタンをクリックすると年月日が入力されて値が増減する

今回はここまでになります。

最後に

いかがでしたか？

まだ六つしか紹介していませんが、ブラウザの違いで機能が大幅に違うものもありましたね！
入力の形式が変わってしまうと、フォームのデータを受信する側も、データの受け取り方を考えなければなりません。
また、データベースを使用する場合は、記録する際にデータの形式を統一する必要もありますね。

今回の続きは来週のブログで書きますので、またよろしくお願い致します。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

季節外れの風邪を引いてしまった網干です、皆さんも体調管理には気を付けましょう。

今回は、先週に引き続きGoogle Chromeのデベロッパーツールを使って、JavaScriptのデバッグを行う方法を記載します。

先週は「ブレークポイントを張る」と「プログラムの途中で変数の値を変更する」という内容の記事を書かせていただきました。
前回の内容は本記事では説明を省きますので、詳細が気になる方は下記リンクをクリックしてください。

さて、今回は前回で説明しきれなかった下記の項目について書かせていただきます。
①実行開始/停止
②ステップオーバー
③ステップイン
④ステップアウト
※なお、Google Chromeのバージョンは「51.0.2704.106 m」を使用します。

それではさっそく、各機能の説明をしていきます。

実行開始/停止

前回と同じように、ストップウォッチのようなスクリプトを使いながら説明を行います。

まず初めに、ストップウォッチのスタートボタンを押します。
カウンタが動いている状態で、右上の一時停止ボタンを押します。

すると…

ブレークポイントで止まっている状態と同じ画面になりました。
これは、プログラムがcount関数に入る直前で止まっている状態になります。
このように、一時停止ボタンはプログラムを一時的に止めることができます。

では次に、一時停止したプログラムを再度動かしてみましょう。

右上のアイコンを確認すると、一時停止ボタンが再生ボタンに変化しています。
再生ボタンを押してみましょう。

ストップウォッチがまた動き始めましたね！
これがプログラムの「実行開始」と「実行停止」になります。

ステップオーバー

「ステップオーバー」は関数内の処理を一行ずつ行う機能になります。
関数の動きが正しいかどうか確認を行う際に使用することが多いです。

使用例としては…

関数内にブレークポイントを張ります。

ストップウォッチをスタートさせます。
すると、ブレークポイントで処理が止まります。

sec++の行に入ってきたので、次の処理でsec変数は1になるはずです。
では、右上のステップオーバーボタンを押してみましょう。

期待通り、sec変数は1になりました。
また、プログラムは再開せずに、次の行で止まっています。
ここで、ステップオーバーボタンをもう一度押して、別関数の実行直前で止めてみます。

この状態でステップオーバーボタンを押すと、関数を実行してから次の行で止まります。

このように、ステップオーバーは関数内の処理のみに注目して確認を行う機能になります。

ステップイン

「ステップイン」は別関数の処理も含めて一行ずつ処理を行う機能になります。
一連の処理が正しいかどうか確認を行う際に使用することが多いです。

使用例としては…

関数内にブレークポイントを張ります。

ストップウォッチをスタートさせます。
すると、ブレークポイントで処理が止まります。

sec++の行に入ってきたので、次の処理でsec変数は1になるはずです。
では、右上のステップインを押してみましょう。

期待通り、sec変数は1になりました。
また、プログラムは再開せずに、次の行で止まっています。
ここで、ステップインをもう一度押して、別関数の実行直前で止めてみます。

この状態でステップインを押すと、関数の中に入って処理が止まります。

このように、ステップインは別関数の処理も含めて一行ずつ処理を行う機能になります。

ステップアウト

「ステップアウト」は関数内の処理を終わらせて、関数を抜けた後にプログラムを停止させる機能になります。

使用例としては…

関数内にブレークポイントを張ります。

ストップウォッチをスタートさせます。
すると、ブレークポイントで処理が止まります。

count関数の確認は済んだので、この関数は確認しません。
そのため、右上のステップアウトボタンを押します。

すると、プログラムが関数を終わらせて、関数を抜けた後にプログラムを停止させます。
（関数が実行されたのでsec変数が”1″になっています）

このように、ステップアウトは関数を抜けた後にプログラムを停止させる機能になります。

最後に

いかがでしたか？
今回はプログラムの開始/停止に関する内容を書かせていただきました。
前回と今回の内容で、スムーズにjavascriptのデバッグができるハズです。
私はまだここまでの知識しかありませんが、更にデバッグの知識が増えた際には、
続きの記事を書かせていただきます！

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

ぼーっとしていたら三連休が終わってしまいました…、悲しい気持ちの網干です。
今回は、Google Chromeのデベロッパーツールを使って、JavaScriptのデバッグを行う方法を記載します。

おおまかな内容としては…
①ブレークポイントを張る
②プログラムの途中で変数の値を変更する
上記に関して記載します。
※Google Chromeのバージョンは「51.0.2704.106 m」を使用します。

先週(7月14日)に吉見さんがデベロッパーツールに関しての記事を書かれていたので、
ネタを取られる前にデベロッパーツールの理解をより深めるために、関連した記事を書きます！
関連記事：【WEBサイトの色（カラーコード）が知りたい！】えっ！？拡張アプリは使わないの？

デバッグとは

“デバッグ”とはプログラムのバグを取り除く作業のことです。
デバッグを行うには、プログラムがどのように動いているのか確認をしなければなりません。
プログラムの動作を確認するには、下記のような方法があります。
①コンソール画面にログを出力する
②ログファイルを出力する

ですが、上記の方法はプログラムを動かして動作が完了するまで待機しなければなりません。
そのため、プログラムが複雑であったり、長い時間動かすことを想定したプログラムの場合は、デバッグ作業に大幅な時間を使うことになります。
また、非常に特殊な条件でしか発生しない分岐がある場合は、動作確認が不可能になってしまう場合もあります。

しかし、上記のようなデバッグで発生する問題を解決してしまう機能がデベロッパーツールには備わっています！
無料のツールなのに、どこまで素晴らしい機能を備えているのか…。
Google Chromeさんは非常に恐ろしいです。

ということで、早速デベロッパーツールを使ってデバッグをしてみましょう！

デバッグの準備を行う

まずはじめに、Google Chromeを起動してデバッグを行うページを開いてください。
ページ内にカーソルを合わせて”F12″キーを押すと、横（または下）にデベロッパーツールのウインドウが表示されます。

今回は吉見さんの時とは違って「Elements」タブではなく「Sources」タブを表示します。
「Sources」の画面でスクリプトを記載したファイルを選択してソースコードを表示させます。

もし「Sources」にファイルが存在しない場合は、右側の「…」→「Go to file…」を選択してください。

ファイルやらなにやらの一覧が表示されるので、その中からスクリプトを記載したファイルを選択してください。

これで準備は完了しました。
では次に、デバッグで重要なブレークポイントを張っていきましょう。

デベロッパーツールでブレークポイントを張る

ブレークポイントとは、実行中のプログラムを停止させるポイントになります。
…たった1行でブレークポイントの説明をしたので、湧き上がる感動が一切ありませんでしたが…。
Google Chromeのデベロッパーツールで、

実行中のプログラムを停止させるポイントが設定できるのです！

そう！これがデベロッパーツールの凄いところなんです！
基本的に、デバッグはプログラムが動いた結果を見て動作を確認しなければならないのですが、
プログラムが動いている最中に確認ができてしまうのです！

さて、ではどうやってブレークポイントを張るのかというと…。

ソースコードが表示されている画面で、プログラムを止めたい行にマウスカーソルを合わせて左クリックします。

クリックした行数が青色になって、右のウインドウの「Breakpoints」に行の内容が表示されます。
はい、ブレークポイントの設置は以上で完了です。
本当に使いやすいUIですね。何か悔しい。

では、ブレークポイントを張った状態でプログラムを動作させてみましょう。
今回はストップウォッチのようなプログラムを組んで動作させました。
以下、ソースコードになります。

・xxx.html

<form name="TimeForm">
	<input type="button" value="スタート" onClick="timer1 = setInterval('count()', 1000)">
	<input type="button" value="ストップ" onClick="TimerStop()"><br>
	経過時間：<input type="text" name="text1" size="8" value="00:00:00">
</form>

・xxx.js

hour = 0;
min = 0;
sec = 0;
startFlg = false;

function count(){
	sec++;
	startFlg = true;
	// 60秒に到達？
	if( sec == 60){
		min++;
		sec = 0;
		// 60分に到達？
		if( min == 60){
			hour++;
			min = 0;
		}
	}
	h = hour;
	m = min;
	s = sec;
	// 数値が1桁の場合は先頭に0を付けて"00"の形で統一
	if( h < 10 ){
		h = '0' + h;
	}
	if( m < 10 ){
		m = '0' + m;
	}
	if( s < 10 ){
		s = '0' + s;
	}
	// テキストエリアに時間を表示
	document.TimeForm.text1.value = h + ':' + m + ':' + s;
}

function TimerStop(){
	if(startFlg == true){
		// タイマーを止める
		clearInterval(timer1);
	}
}

ストップウォッチの設置が完了したのでスタートボタンを押してみましょう。すると…

ストップウォッチが止まり、画面に「Paused in debugger」と書かれたメニューが表示されたり、
ブレークポイントを張った行が青色で囲われたりしています。
これは、プログラムがブレークポイントの位置に達したため、停止している状態になります。

今回ブレークポイントを張った位置は「sec変数が60になったら処理を行う」という条件で入ってくる部分になります。
※sec変数は秒数を格納しています。
では、本当にsec変数は60になっているのか、確認してみましょう。

デベロッパーツールの「Watch」タブの「+」を押します。

sec変数がどうなっているか確認したいので、「sec」を入力してEnterキーを押します。すると…

sec変数の現在の値が表示されました！
期待通り、sec変数が60になってから条件の中に入っていますね！

ちなみに、変数の確認方法はもう一つあります。
プログラムの停止中に、変数にマウスカーソルを当てると変数の値が表示されます。

1つ1つ確認するのは面倒なので、確認したい変数を全てWatchに登録しましょう！

登録した変数の内容が全て表示されましたね！
※ブレークポイントの位置でプログラムが停止しているため、min++が実行されていないことにも注目してください。

これで知りたい情報を全て知ることが可能になりました。

デバッグ作業を行う

ブレークポイントを張ることで、プログラムを停止させて変数の値を確認することができるようになりました。
しかし、ブレークポイントを張って変数の値を確認するだけでは、
デバッグの方法としてはコンソールの表示やログの出力と大差ありません。

今回の参考プログラムを見ると、次に確認したい条件はif(min == 60)となっているため、
60分間待ってから確認をしなければなりません。
この無駄な時間を解消してくれる凄い機能が、デベロッパーツールに備わっています！

では、何をするのかというと…。

ブレークポイントでプログラムが止まっている状態で、変数の値を変更しちゃいます。
今回の例では、minの値を60にして条件に入ることを確認しちゃいます。

では、実際にやってみましょう。
ブレークポイントを張ってプログラムを止めたら、
右のウインドウの「Scope」タブから「Local」→「this: Window」をクリックします。

リストに項目が大量に並んでいますが、下の方へスクロールしてmin変数を探します。

min変数の値をダブルクリックします。

min変数に59を入力します。
※min++の実行がまだなので、min変数に59を入力すると次の行で60になります。

if(min ==60)の条件式にブレークポイントを張ってから、
右上の矢印ボタンを押して再度プログラムを動かします。

min変数が60になっていますね！
ということは、if(min ==60)の条件式の中に入るはず…。
右上の湾曲した矢印のアイコンをクリックして、プログラムを1行だけ実行させます。

条件式の中に入りましたね！
無事にmin変数を60に変更することができました。

このように、プログラムの途中で変数の値を変更させることで、
無駄な時間を省いてデバッグができるようになります！

最後に

いかがでしたか？
今回はブレークポイントと変数の代入に関して記事を書かせていただきました。
最低限のデバッグは今回の記事で可能ですが、デベロッパーツールにはもっと便利な機能があります。
今回は「ステップオーバー」「ステップイン」「ステップアウト」等のデバッグに欠かせない機能の
説明を省いているので、どこかのタイミングでブログに書こうと思います。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

Googleが提供している無料ブラウザのChromeはパソコン版、モバイル版（スマホ、タブレット）などに対応する最新の技術が詰め込まれたブラウザです。

最近は利用者も増えてきましたが、やはりChromeはまだまだIT技術に詳しい人の利用がメインユーザーのようです。

WEB開発するなら手放せないデベロッパーツール

このChromeブラウザに搭載されている機能の中で、WEBサイトやWEBアプリを制作する時に非常に活躍するのが右クリックするとコンテキストメニューの中にある「要素の検証」（デベロッパーツール）です。

WEB系の開発者なら誰もがお世話になる便利すぎるツールです。

このツールはF12を押すか、右クリックしてコンテキストメニューから表示することができます。

※下段に表示されているのがデベロッパーツールです。

デベロッパーツールを右側に表示するためには「長押し」が必要

このツールは標準では下側に表示されるのですが、最近のフルHDのディスプレイのような横長サイズだと右側に表示したほうが個人的には使いやすいと思います。

右側に表示するためには、下の赤枠の位置にあるアイコンを

長押し

すると、赤枠で囲んだデベロッパーツールを右側に表示するためのアイコンが表示されます。

このアイコンを選択するとデベロッパーツールが右側に表示されます。

この「長押し」をいつも忘れてしまうんですよね。。。

他のアイコンの意味

右側表示以外にも、標準の下側表示（上のアイコン）、また別ウインドウ表示（下のアイコン）もあります。

環境に応じて使い分けるとさらに便利にデベロッパーツールを活用することができると思います。

デベロッパーツールの使い方についてはまた次の機会にでも紹介したいと思います。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。