FIrebugを使いこなそう

ホームページ作成で、JavaScriptの動作検証するのに使用する開発ツールについて学習します。
今回は、Firefoxでの開発ツールである、Firebugについて調べて、試してみました。

■Firebugのインストール
FirebugはFirefoxのアドオンとして提供されています。
使うには、Firefoxのメニューの［ツール］→［アドオン］でアドオンマネージャを起動し、「アドオンを入手」アイコンを選択します。
アドオンの検索画面にFirebugを入力すれば、Firebugアドオンが表示されるので選択してインストールします

■Firebugの起動
　Firefoxを再起動してインストールが完了したら、デバッグしたいWebページ/Webサイトを表示して、［ツール］→［Web開発］→［Firebug］→［Firebugを開く］を選択します。

■コンソール
　［コンソール］を利用すると、HTMLやJavaScriptのエラーを確認できます。
　［コンソール］タブの右の三角をクリックして、［有効］と［コマンドエディタを表示］と、表示したいエラーメッセージにチェックを入れます

　すると、［コンソール］が表示されます。［コンソール］には、エラーメッセージやコマンドエディタ上で実行したJavaScriptの実行結果などが表示されます。

 （例）コマンドエディタでconsole.logコマンド入力して、コンソールに結果が表示

　また、［プロファイル］ボタンをクリックすると、JavaScriptのプロファイリングができ、実行に時間がかかっているメソッドを簡単に特定できます。

■HTMLのデバッグ
　左のHTMLタブを選択して、ツリーからタグを選択、もしくは、Webブラウザ上の調査したい文字を選択し、右クリックから［要素を調査］を選択すると、選択したタグのスタイルシートが右のペインに表示されます。 
　また、HTMLタグの内容やスタイルシートを編集すると、上のWebブラウザ画面に変更内容が反映されるので、表示結果を確認しながらデバッグができます。 
右ペインの［レイアウト］タブを押下すると、マージンやパディングなどの情報が表示されます。レイアウト上の各数字をクリックすると、値を変更することもできます。

1)　DOM選択
Firebugを表示した後、「カーソルアイコン」をオンにすると、画面上からマウスで要素を指定することが可能となります。指定中の要素は「HTML」パネル内でカーソルがあたった状態になります。

例えばa要素などでマウスオーバー時の状態を調べたい時は、上記で対象となるa要素などをロック状態にしておき、右のパネルの部分の「スタイル」から「:hover」を選択します。
すると、対象要素からマウスを離してもマウスオーバー時の状態（スタイル）が適用されたままになります。

「HTML」パネル内にて要素を選択した後、右クリックで表示するメニューから「属性変更時にブレーク」にチェックを入れると、その属性が変更された時に「スクリプト」パネルが開き、この処理を実行している箇所に自動的にブレークポイントが設定されます。
例えば他人が書いたソースなど、どこで処理を行っているかが把握しにくい場合に、手っ取り早く調査するのに非常に便利です。

■CSSのデバッグ
［CSS］タブのデバッグでは、HTMLファイルよりインクルードされたスタイルファイルの編集や、スタイルの無効化ができます。編集したいCSSファイルを選択すると編集することができ、スタイルの左側をクリックすれば、無効化も可能です。

 ■JavaScriptのデバッグ
 　［スクリプト］タブを選択すると、JavaScriptのデバッグができます。デバッグしたいJavaScriptファイルを選択してブレークポイントを設定すると、変数の内容やスタックトレースの確認ができます。

■アクセス時間の統計情報

　［接続］タブをクリックすると、各ファイルのWebサーバへ対するアクセス時間を計測できます。レスポンス待ち時間、データ転送時間、Webブラウザへのロード時間などを計測できます。

※Firebugを有効に利用するためのアドオン
【1】Cookieの内容を表示する「FireCookie」
【2】HTMLのインラインを可視化する「Inline Code Finder」
【3】JavaScriptをハイライティング「FireRainbow」
【4】HTMLタグのヘルプ機能を追加する「CodeBurner」
【5】jQueryのデバッギング機能を追加「FireQuery」
【6】XPathにマッチするタグを表示「FireFinder」
【7】Webサイトの表示速度を計測「YSlow」    
 
【参考URL】
http://www.atmarkit.co.jp/ait/articles/0912/03/news093.html
http://blog.bluearrowslab.com/firefox/804/
http://web8bungi.sakura.ne.jp/first/htmlcss/firebug.html

JavaScriptのデバッグ方法

JavaScriptでの開発で、デバッグ方法について、調べたので、まとめてみました。

１、alert
alertは、printfデバッグのJavaScript版。　どのWebブラウザでも利用可能となっている。
alert(hoge);　でhoge変数の中身を確認する

 ２、console.log
chrome、Safari、IE(8以上)、FireFox(Firebug使用)　のコンソール出力する。
もともとのFirefoxのアドオンであるFirebugで実装されていた機能で、Safari、Chromeなどで標準搭載するようになっった。

同じようなものに、console.log()、console.debug()、console.error()、console.warn()、console.info()等がある

※JavaScriptのデバッグ使える関数で以下のものがあります
1) console.dir()　　オブジェクトの内容を確認する
2) console.trace()　関数がどこから呼ばれたか調べる
3) console.time()　レスポンス（パフォーマンス）速度を計測する
4) console.assert()　アサーションを使う

３、デバッグツールを使用
1) IE
以下のツールがあります。
JavaScriptのエラーが発生した際にVisual StudioのデバッガでJavaScriptのデバッグを行うことが可能です。
・IETester
・開発者ツール（F１２を押すと画面がでてくる）
・Internet Explorer Collection

（Internet Explorer Collection）
ダウンロードサイト：
http://finalbuilds.com/iecollection.htm

詳細は、
「Internet Explorer 8 の開発者ツールの概要」や「開発者ツール : スクリプト デバッグの概要」，「開発者ツールを使用したスクリプトのプロファイリング」
を参照してください。

2) Firefox
FirebugはHTML／CSSの解析・リアルタイム編集，コンソールでのJavaScriptの実行やステップ実行，変数やオブジェクトの中身の解 析，ネットワークのログ取得にヘッダの解析，JavaScriptの実行をプロファイリング，といったことが可能な非常に高機能なデバッグ専用拡張です。
 http://gihyo.jp/dev/feature/01/firebug

3) Chrome(Safari)
「Web Inspector」という開発ツールがあります。

http://gihyo.jp/dev/serial/01/chrome-extensions/0006

4) Opera
「Dragonfly」という開発ツールがあります。

４、その他
consoleイベントの実装は以下の通りとなっているので、ツールごとに、デバッグ情報の出し方を考える必要があります。
// 共通
console.log
console.warn
console.error
console.info
// Dragonfly以外
console.assert
// Web InspectorとDragonfly以外
console.clear
// FirebugとWeb Inspector
console.count
console.debug
console.dir
console.dirxml
console.group
console.groupEnd
console.markTimeline
console.profile
console.profileEnd
console.time
console.timeEnd
console.trace
// Firebugのみ
console.exception
console.groupCollapsed

動的に追加するスクリプトなどではブレークポイントの設置が難しいケースがあります。
そんなときは，debugger;という行を追加しておくとその場所でブレークすることができます。

なお，debuggerはECMAScript第3版（JavaScriptのベースとなる仕様）では予約語であり，ECMAScript第5版ではキー ワードとなっているので，非対応ブラウザでもシンタックスエラーになることはなく，実行時に例外を投げることになります。

デバッガ（IEのスクリプトエ ディタやVisual Studioなど）によっては，debuggerステートメントには対応していないが，例外が起こることによってブレークさせることもできます。

■プロファイリング
OperaのDragonfly以外のブラウザはJavaScriptのプロファイリング機能を搭載しています。
プロファイリングでは細かい単位でパフォーマンスをチェックすることができるので，是非試行錯誤してエンジンの傾向を探ってみてください。
一見些細なことに思えるような部分でも調整してみると驚くほどにパフォーマンスが上がることもあります。

開発ツールは一つ覚えればいいと思うので、Firebugを使いこなせるようにしようと思っています。



【参考URL】
http://kazefuku.net/archives/1244
http://gihyo.jp/dev/feature/01/devtools/0001
http://www.atmarkit.co.jp/ait/articles/1407/11/news031_2.html
http://www.atmarkit.co.jp/ait/articles/1304/01/news016.html
https://app.codegrid.net/entry/breakpoint-1
https://msdn.microsoft.com/ja-jp/library/gg699336(v=vs.85).aspx 
https://developer.mozilla.org/ja/docs/Tools/Debugger
http://shim0mura.hatenadiary.jp/entry/20111231/1325357395
https://netbeans.org/kb/docs/webclient/html5-js-support_ja.html
http://so-zou.jp/web-app/tech/browser/firefox/developer-tools/javascript-debugger/
http://gihyo.jp/dev/serial/01/crossbrowser-javascript/0002

HTML5(日付の表示方法）

HTML5アプリ開発で、日付の表示方法について説明します。

今日の日付は、JavaScriptでnew Date()で取得します。
toLocaleDateString、toISOString関数を使って文字列表現します。

実際にサンプルを使って、試してみます。
最初に"MM.DD.YY"の固定形式で日付表示して、次の行に日付変換してISO形式で表示します。

1) id="today"要素dateEｌのテキスト部分に今日(today)をtoLocaleDateStringをつかって、[2015年2月2日]の形式で日付を設定します。

2) toISOStringを使って、ISO日付形式(YYYY-MM-DDTHH:mm:ss.sssZ)で文字列変換しますします
3) setAttributeを使ってdatetime属性に日付を設定して、
4) HTML側でtimeタグ内でdatetime属性を使用して、日付表示します

【サンプル】
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="UTF-8" />
 <title>Using the HTML5 Time Element</title>
 <script>
function assignDate() {
  var dateEl = document.getElementById("today");
  var today = new Date();
  dateEl.textContent = today.toLocaleDateString();
  dateEl.setAttribute("datetime", today.toISOString());
}
window.addEventListener("load", assignDate);
 </script>
</head>
<body>
 <h1>HTML5 Time Element</h1>
 <p>HTML 2.0 was published on
    <time datetime="2015-02-05">02.02.2015</time>.</p>
 <p>Today is <time id="today" datetime=""></time>.</p>
</body>
</html>

【結果】
尚、ブラウザごとに表示結果が異なるので、日付の扱いは注意が必要です。

(IE11)
ISO日付形式ができていない

（Firefox)

(Chrome)

 【その他】
ロケート変換はいろいろできますので、覚えておきましょう
var date = new Date();
var options = {
    weekday: "long", year: "numeric", month: "short",
    day: "numeric", hour: "2-digit", minute: "2-digit"
};
date.toLocaleDateString("en-US")　　　-> 2/2/2015
date.toLocaleTimeString("en-us", options) -> MondayFeb,2,2015, 09:40 AM
date.toLocaleDateString("ja-JP") ->2015年2月2日
date.toLocaleTimeString("ja-JP", options)　->　2015年2月2日金曜日 09：40

【参考URL】
http://www.codeproject.com/Articles/870950/Expressing-Date-Time-Information-with-the-time-Ele

HTML内のJavaScript記述場所

HTMLファイル作成時に、Javascriptを<head>と<body>どちらに書くか悩んだことありませんか？。
コピペで、作成ばかりしていると、このようなちょっとした疑問に気づきませんでした。

今、ホームページの作り替えで、今更なのですが、疑問になったので調べてみました。

<head>に入力すると<body>より先に実行され、<body>に入力すると入力された位置で実行されることになります。
<head>に書くと、要素読み込まれないと実行できない場合がある（ロードに時間がかかるので）ので、関数などは、<body>前及び<body>内で定義すると、正常動作するといった現象が発生します。

一般的に、<head>には関数を定義するのに使います。
（JavaScriptは関数の呼び出しより先に関数を定義する必要があるため、body要素の中で実行する関数やライブラリなどはhead要素の中で読み込む）

<body>内のタグの中にイベントを組み込んで、そこに直接JavaScriptを記入もできます。

外部ファイルに、複数のWebページ内で同じ処理を行いたい場合は、 外部ファイルにスクリプトを書いて、それを各ページが読み込むようにします。
注意すべきは、取得が終わるまで先に進めなくなるため、応答の遅いサーバに置かれたスクリプトや実行に時間がかかるスクリプトは画面の描画をブロックする原因になりますので、可能であれば、<body>要素を閉じる直前に配置することが望ましいです。


下の参考URLの２番目を読むと、HTMLとJavaScriptとの関係がよくわかります。


【参考URL】
http://js.k-sakabe.com/js00.html
http://www.atmarkit.co.jp/fwcr/design/benkyo/htmltuning02/02.html

だめなしごと、って記事よんで

「仕事を成功させるための思考術」という記事がありました。
それによると、失敗をもたらす10のダメ仕事 は次のように書かれています。

(1)目的が曖昧で作業手順がいい加減な仕事
(2)情報が不足し鮮度も悪い仕事
(3)他人を蔑ろにする仕事
(4)素人の浅知恵で判断する仕事
(5)発想が貧困でつまらない仕事
(6)自分の考えに酔いしれる仕事
(7)社内調整が甘い仕事
(8)資料が非論理的で分からない仕事
(9)説明の辻褄があってない仕事
(10)思想も志も見えてこない仕事

確かに、失敗する仕事って、
「曖昧（ごまかす）」「いい加減」が原因であることが多いですね。

プログラムの仕事でいえば、不具合を生まないように、構造的に作成することで、仕事の善し悪しがだいぶ決まるように思います。
人のソースをみると、「なんでこんなことするんだろう」って作りが多いものはダメな作りと思います。
まさに、「素人の浅知恵で判断する仕事」に当たるのかもしれません。

別個に、この記事に書かれていたことで、気になってことがありました。
「顧客は店舗に行って商品を見て、じっくり店員から情報を聞き出すと、最後に「検討する」と言って店舗を出る。そのあと、帰りの電車で「スマホ」を使って最安値を検索し、「通販サイト」から注文する流れになっていることが分かったのだ」

誰（弟？、S氏？）から聞いた話と同じ行動をしているが、これが世間の流れで、これからの世の中は、店舗は工夫しないとやっていけない世の中になるのだろう、と思った。

「そのような行為は酷い。店をなんだと思っているのだ」と愚痴っているだけだと、世の中に遅れていくのだろう。

ちなみに、この対策は以下記載してありました。
1) 顧客のリアル店舗→スマートフォンでの価格情報収集、購入の流れは止められないので、受け入れて考える。こうした行為が普通になる可能性があり、長期的には増加していくことを考える
2) 店舗での接客を好む客層には、接客の充実をする。さらに、店舗でしか買えないオリジナル商品の種類を増やす。
3) オリジナルでない商品は、店舗と通販サイトの競争になるので、通販部門・会社を立ち上げて、Webサイトを作る
4) オリジナルでない商品は、あえて積極的にスマートフォンを顧客に使わせて、3)で作るサイトに誘導する

自分が店舗をもっていたら、やはりWEBでマーケティングするだろう。

【参考URL】
http://itpro.nikkeibp.co.jp/atcl/watcher/14/230681/121900010/?s2p

痛っ！ 寝ていて足がつった

昨日寝ている時に、足がつって歩けない状態になりました。
今後のために、「足がつる原因・対策」について調べてみました。
足がつることを「こむら（ふらはぎ）返り」ともいうそうです。

１、原因
  特に以下の原因が関係しているといわれています。
・筋肉の疲労
・運動不足
・水分不足及び体液中の電解質の異常

こむら返りの原因は、 
 ふくらはぎの筋肉（腓腹筋）が急激に収縮することによって足がつった状態になったことで、、激しい痛みが発生しています。
 高齢化とともに起こりやすくなり、就寝中に起こるものは、一度起こると繰り返し起こりやすくなり傾向があります。
 病気との関係はほとんどないと言われています。
（肝硬変などの肝臓病や、腎不全などお持ちの場合は、可能性があります）


寝ている時というのは足が完全に伸び切っている状態で、常に足がつる状態にあります。
今回私は、寝ている時に発生しました。
あまりに痛かったので、肉離れになってのでしょう。
ほっとけば自然に肉はくっつくそうです。

２、予防
足を使ったと実感した場合はストレッチなどを意識的に行い、そしてスポーツドリンクなどで水分と共に塩分やミネラルの摂取を取れば、大分寝ている時のこむら返りを防ぐことができます。

足がつる原因のひとつとしてよく話題に上がるのがミネラル不足です。
有名なところだとカルシウム、鉄、ナトリウム、マグネシウム、亜鉛などがあります。
カルシウムとマグネシウム不足だと言われているので、足がつる症状が頻繁に現れる方はこれらの栄養素を積極的に摂取しカルシウム・マグネシウム不足を補いましょう。
他にも、ビタミンＢ群の摂取も必要になってきます。

筋肉の疲労がこむら返りを引き起こしているとも言われています。
運動をする前にはしっかりと準備運動をし、身体を動かしたり長時間歩いた後はクールダウンを行うことでこむら返りを予防することができます。
その際にはしっかりと水分を摂取することも忘れずに行いましょう。

 こむら返り対策でストレッチをする場合は、ふくらはぎ、そしてそれと繋がっている筋肉である太ももの筋肉をしっかりと伸ばしましょう。
コツとしては勢いよく伸ばすのではなく、ゆっくりと負荷をかけ、その負荷がかかった状態で一定時間（１０秒程）保つということを繰り返します。
 
３、対策
膝を伸ばして足のつま先をゆっくり顔の方へ曲げるようにして、ゆっくりとふくらはぎの筋肉を伸ばします。
近くに壁がある場合は、壁に足の裏を押し付けてふくらはぎを伸ばします。

立っている時は、つっていない方の足を前に出し重心を前に移します。両手は前に出した足の太ももの上に置き、つった足のかかとは床につけたままにして筋肉を伸ばします。つまり、アキレス腱を伸ばすようにすれば良いのです。
そしてこむら返りが治まったら、蒸しタオルなどで暖めてやると、筋肉の回復が早まるだけでなく、こむら返りの再発を予防できることにもなります。

寝るときは、膝を立てて寝れば痛みは和らぎます。
また、足を伸ばさないように膝裏にクッションを置いて寝るのも一つの手段となります。
 
 【薬】
 こむら返りに効く漢方で代表的なものは「芍薬甘草湯」です。
足がつっている状態は筋肉が緊張し、異常収縮している状態です。「芍薬甘草湯」はこの筋肉の緊張を解き、また筋肉の異常収縮によって生じたふくらはぎの痛みを抑制してくれる働きがあると言われています。
予防に使えるのにはもちろん、こむら返りの症状の緩和にも使えるという即効性を持っています。

私は、今後のため、「サントリー　カルシウムマグネシウム」を買うことにしました。
1日３４円だそうです。
http://www.suntory-kenko.com/contents/ad/40/lst/clmg/id_b_2/?key=7035&waad=Qbf8afcO&gclid=CPSLoYXCqcMCFU0GvAod1KwAMQ#order


 【参考URL】
https://www.eiyosyokuhin.com/oyakudati/columun/13.html
http://www.itaikomura.com/

HTMLとCSSの勉強(3)

HTML５で使えるTipsをまとめてみました。

１、階層化構造
1) HTML5 で加わったセクション要素
<nav> … ナビゲーションを示すセクション要素
<article> … ブログの記事みたいに、独立しても意味が通るような部分を示すセクション要素<section> … 基本的に見出しを伴う文章のひと塊、段落とか章を示すセクション要素
<aside> … あまり重要でない部分を示すセクション要素

2) <section>を使って階層化する
<article>
<h1>ココに記事のタイトル</h1>
<p>ここにテキスト</p>

  <section>
  <h2>これは中見出し</h2>
  <p>ここにテキスト</p>
    <section>
    <h3>さらに中見出し</h3>
    <p>ここにテキスト</p>
    </section>
  </section>
 
  <section>
  <h2>中見出し</h2> 
  <p>ここにテキスト</p>
  </section>

<p>ここにテキスト２</p>
</article>

※<p>ここにテキスト２</p> という部分は、記事見出しの<h1>直下のセクションになります

3) <aside>要素
<aside> や <section> はセクション要素なので、入れ子にすればアウトラインが変化します。
階層下げを行いたくない場合は、、<div> を使います。
※<div>要素は文章的には意味を持っていないただのボックスで、アウトラインには影響を与えません

２、input要素
1) 「typeの値」を書き換えて、入力した値の書式をチェック
例： メールアドレスかチェック
　<input name="email" type="email">

タイプ要素は、「 date/datetime/datetime-local/month/week/time/number/range/search/tel/url/email/color」となります。
例：タイプ要素をdateにした場合
date:<input type="date" name="date"><br>

右矢印のボタンクリックでカレンダーが表示できるようになっています。
(HTML5以前はjavascriptで実装しなければなりませんでしたが、HTML5は簡単なコードとなっています）

2) 入力項目を必須にする
text要素に入力必須にする
<input name="text" type="text" require>

3) 非フォーカス時にinputに文字を表示させる
ｔextタイプにplaceholder属性が追加されています。

<input type="text" placeholder="お名前" name="name"><br>
<input type="email" placeholder="メールアドレス" name="email"><br>
<input type="url" placeholder="ホームページ、ブログのURL" name="homeUrl"><br>

【参考URL】
http://webdesignrecipes.com/semantic-html5-with-outline/
http://techblog.yahoo.co.jp/html5/html5/
https://w3g.jp/blog/html5report