JavaScriptをWebコンテンツを見ながらデバッグする [Intenet Explorer] [firefox]

How to debug the JavaScript sources with watching the web contents
ホームページを作ったり、Webアプリケーションを開発しているとJavaScriptを使うことがあるかと思います。
JavaScriptを動かしながらじっくり検証したいことこともあるかと思います。
そんなときはInternet Explorer10・11やFirefoxの開発ツールを使うと簡単にデバッグすることが出来ます。

Inernet Explorer 11の場合

F12キーを押します。またはAltキーを押してメニューの
ツール - F12 開発ツール
をクリックします。

画面の下に開発ツールの画面が表示されるので一番左側の「デバッガー」(虫のイラストのような記号)というボタンをクリックします。

フォルダーのアイコンをクリックすると読み込まれているファイルが表示されます。デバッグしたいJavaScriptが書かれたHTMLファイルかJavaScriptファイルを選択します。

ソースが表示されるので、JavaScriptのステートメントの左側をクリックするとブレークポイントを置けます。

JavaScriptを実行させてブレークポイントで一時停止させてみました。変数にマウスポインターを重ねると内容が表示されます。ウォッチ式にもされます。
一時停止から再開するときは右向き三角ボタンかF5キー、ステップごとに実行するにはステップインボタンかF11キーで操作します。
console.logを実行すればコンソールに文字列を出力することもできます。

開発ツールを終了するにるにはF12キーを押すか、開発ツール画面右上の×ボタンをクリックします。

Inernet Explorer 10の場合

F12キーを押します。またはAltキーを押してメニューの
ツール - F12 開発ツール
をクリックします。

画面の下に開発ツールの画面が表示されるので「スクリプト」というタブをクリックします。

フォルダーのアイコンをクリックすると読み込まれているファイルが表示されます。デバッグしたいJavaScriptが書かれたHTMLファイルかJavaScriptファイルを選択します。

ソースが表示されるので、JavaScriptのステートメントの左側をクリックするとブレークポイントを置けます。

ブレークポイントで停止させるには「デバッグ開始」ボタンをクリックします。
「デバッグ開始」ボタンはクリックするたびに「デバッグ停止」ボタンに変化します。

JavaScriptを実行させてブレークポイントで一時停止させてみました。変数にマウスポインターを重ねると内容が表示されます。ウォッチ式にもされます。
一時停止から再開するときは右向き三角ボタンかF5キー、ステップごとに実行するにはステップインボタンかF11キーで操作します。
console.logを実行すればコンソールに文字列を出力することもできます。

開発ツールを終了するには「デバッグ停止」ボタンをクリックし、F12キーを押すか、開発ツール画面右上の×ボタンをクリックします。

Firefox 29の場合

F12キーを押します。またはAltキーを押してメニューの
ツール - Web開発 - 開発ツールを表示
をクリックします。

画面の下に開発ツールの画面が表示されるので「スクリプト」というデバッガをクリックします。

開発ツール左側のソースの欄に読み込まれているファイルが表示されます。デバッグしたいJavaScriptが書かれたHTMLファイルかJavaScriptファイルを選択します。

ソースが表示されるので、JavaScriptのステートメントの左側をクリックするとブレークポイントを置けます。

JavaScriptを実行させてブレークポイントで一時停止させてみました。変数にマウスポインターを重ねると内容が表示されます。ウォッチ式にもされます。
一時停止から再開するときは開発ツール画面の左上にある右向き三角ボタンかF8キー、ステップごとに実行するにはステップインボタンかF11キーで操作します。

開発ツールを終了するにるにはF12キーを押すか、開発ツール画面右上の×ボタンをクリックします。

まとめ

異なるブラザーでもほぼ同じことが出来ました。
方法を知っておくと開発が楽になりそうです。

関連ブログ

HTMLソースのミスやエラーを素早くチェックする
[Windows] FirefoxでFlashがクラッシュ
[Firefox] 消えてしまったブログのHTMLソースを復元するには
[インターネット] Googleストリートビューにプライバシー情報が公開されてしまったら
[セキュリティ] bitly.com にスパムサイトと誤認されたら
[セキュリティ] Twitterに「スパム、または安全でない」と誤認されたら

以上、参考になれば幸いです。

[Application] ザ・数唱 v1.02を公開しました

Androidアプリケーション ザ・数唱 / Digit span PLAY / 數字跨度 / 수반복 をバージョンアップしました。

V1.02での変更内容は次の通りです。
・結月ゆかりのドイツ語を追加
・SeeUの発音を一部修正

結月ゆかりとは

結月ゆかりは2011年にボーカロイド及びボイスロイドとして日本で発売された合成音声ソフトです。
2013年5月にドイツでボーカロイドの結月ゆかりが販売されました。
結月ゆかりの音声は日本語のみですが、ドイツでの発売一周年を記念してザ・数唱にドイツ語ナビゲーターとして追加しました。

アプリの内容紹介

ザ・数唱は短期記憶力が勝負の数字記憶ゲームです。

記憶力に自身がありますか？
メモをとらなくても聴いた内容を覚えられますか？
ザ・数唱の読み上げられた数字を記憶して答えるゲームです。
ワーキングメモリーと呼ばれる短期記憶の能力が高い人ほど沢山の数字を覚えられます。
メモをとらず記憶力だけでチャレンジしてください。
ナビゲーターは初音ミク(日本語、英語)、洛天依(中国語)、SeeU(韓国語)です。

Android2.3以上対応、HVGA以上の解像度推奨、縦画面専用
価格は無料

ザ・数唱 / Digit span PLAY はGoogle Playから無料でダウンロードできます。
※ダウンロード前に エンドユーザーライセンス契約(EULA) と プライバシーポリシー を必ずお読みください。
https://play.google.com/store/apps/details?id=jjp.fujiu.digitspan

ザ・数唱 / Digit span PLAY の詳細はこちらからご覧いただけます。
http://www.fujiu.jp/AndroidApp/app010_digitspan.shtml

Digit span PLAY is the game.
You should input the numbers that the navigator read out.
Make your working memory excel.
Don't make memos.
Navigators :
HATSUNE MIKU (English, Japanese)
LUO TIANYI (Chinese)
SeeU (Korean)
YUDUKI YUKARI (German)

數字跨度 (Digit span PLAY) 是游戏。
你应该输入的数字，导航器读出。
别拿备忘录。
向导 :
洛天依 (中文)
初音未来 (日语、英语)
SeeU (韩语)
YUDUKI YUKARI(德语)

수반복 (Digit span PLAY) 은 게임이다
당신은 네비게이터가 읽어 해당 입력 번호를해야합니다
메모를 작성하지 마십시오
안내인 :
시유 (한국어)
하츠네 미쿠 (일본어, 영어)
루오 티엔 (중국어)
유즈키 유카리(독일어)

使用したMMDモデル
Lat式 初音ミク、Tda式 初音ミク、ままま式 SeeU、ケミリア式 洛天依、キオ式結月ゆかり
Copyright (C) CRYPTON FUTURE MEDIA, INC. All Rights Reserved.
Copyrignt (C) SBSARTECH. All rights reserved.
Copyright (C) 上海禾念信息科技有限公司 All rights reserved.
Copyright (C) AHS Co. Ltd. All rights reserved.

HTMLのソースをWebコンテンツを見ながら素早く見つける [Internet Explorer][Firefox]

How to debug the HTML sources with watching the web contents
ホームページを作ったり、Webアプリケーションを開発するうえでHTMLは必ず扱うことにあると思います。
ブラウザーからHTMLソースを表示すればWebコンテンツのHTMLソースを確認することができますが、すべてのソースの中から目的の部分だけを見つけるのは骨の折れる作業だと思います。
そんなときはInternet Explorer10・11やFirefoxの開発ツールを使うと簡単に見つけることが出来ます。

次の環境で検証してその方法をまとめてみました。
・Internet Explorer 11 (Windows7)
・Internet Explorer 10 (Windows8)
・Firefox 29 (Windows8)

Inernet Explorer 11の場合

F12キーを押します。またはAltキーを押してメニューの
ツール - F12 開発ツール
をクリックします。

画面の下に開発ツールの画面が表示されるので一番左側の「DOMエクスプローラー」(<>記号が矢印記号を囲ったようなアイコン)というボタンをクリックします。
開発画面上部にある「要素の選択」(□に矢印が刺さったようなアイコン)というボタンをクリックします。

Webコンテンツ内のHTMLソースを表示したい部分にマウスポインターを重ねてクリックします。

開発ツール画面に目的のHTMLソースが表示されました。右側には定義されているCSS(カスケードスタイルシート)が表示されます。

開発ツールを終了するにるにはF12キーを押すか、開発ツール画面右上の×ボタンをクリックします。

Inernet Explorer 10の場合

F12キーを押します。またはAltキーを押してメニューの
ツール - F12 開発ツール
をクリックします。

画面の下に開発ツールの画面が表示されるので左上にある「HTML」タブをクリックします。
そのすぐ下にある矢印ボタンをクリックします。

Webコンテンツ内のHTMLソースを表示したい部分にマウスポインターを重ねてクリックします。

開発ツール画面に目的のHTMLソースが表示されました。右側には定義されているCSS(カスケードスタイルシート)が表示されます。

開発ツールを終了するにるにはF12キーを押すか、開発ツール画面右上の×ボタンをクリックします。

Firefox 29の場合

F12キーを押します。またはAltキーを押してメニューの
ツール - Web開発 - 開発ツールを表示
をクリックします。

画面の下に開発ツールの画面が表示されるので「インスペクター」というボタンをクリックします。
その右の方にある「ページから要素を選択します」(□に矢印が刺さったようなアイコン)ボタンをクリックします。

Webコンテンツ内のHTMLソースを表示したい部分にマウスポインターを重ねてクリックします。

開発ツール画面に目的のHTMLソースが表示されました。右側には定義されているCSS(カスケードスタイルシート)が表示されます。

開発ツールを終了するにるにはF12キーを押すか、開発ツール画面右上の×ボタンをクリックします。

まとめ

どのブラウザーもほぼ同じ操作で同じようなことが出来ました。
開発ツール画面のHTMLやCSSを変更すると即座に画面表示に反映されます。
確認からデバッグまで出来るので覚えておくととても便利です。

関連ブログ

HTMLソースのミスやエラーを素早くチェックする
[Windows] FirefoxでFlashがクラッシュ
[Firefox] 消えてしまったブログのHTMLソースを復元するには
[インターネット] Googleストリートビューにプライバシー情報が公開されてしまったら
[セキュリティ] bitly.com にスパムサイトと誤認されたら
[セキュリティ] Twitterに「スパム、または安全でない」と誤認されたら

以上、参考になれば幸いです。

HTMLソースのミスやエラーを素早くチェックする

How to parse HTML sources quickly

インターネットを利用する上で、HTMLのソースを入力する機会はあると思います。
Webアプリの開発者ならもちろん、ブログや掲示板への書き込みなどHTMLタグを使うことがあると思います。
書き込みをした後にHTMLタグにミスがあったこととに気がついた、なんて経験をお持ちの方は多いではないでしょうか。
HTMLタグをチェックするには The W3C Markup Validation Service というサイトが便利です。
※はじめにAbout The W3C Markup Validation Service(英語のみ) http://validator.w3.org/about.html をお読みください。

1.

http://validator.w3.org/
を開きます。

2.

Validate by Direct Inputをクリックします。

3.

テキストエリアにチェックしたいHTMLソースを入力して Check をクリックします。
※個人情報や機密方法を含むHTMLソースは入力しないでください。該当する文字を別の文字に置き換えるなど、別の方法でチェックしてください。

4.

エラーがあるとエラーの数が表示されます。

下の方にスクロールするとエラーの詳細が表示されます。

エラー内容はともかく「Line 1」とあるので1行目に問題があることが分かります。

5.

エラーがなければPassedと表示されます。

最近はHTMLソースを自動生成するサービスを利用する機会が増えたため手打ちする機会は少なくなりました。
ですが、万が一HTMLソースにミスがあるのを見落とすと検索エンジン最適化(SEO)に悪影響が出る可能性もあります。
Webコンテンツを管理している方ならチェックすることをお勧めします。
ちなみに最初の画面でURIを入力すると公開されているWebコンテンツのHTMLソースを丸ごとチェックできます。

関連ブログ

[Windows] FirefoxでFlashがクラッシュ
[Firefox] 消えてしまったブログのHTMLソースを復元するには
[インターネット] Googleストリートビューにプライバシー情報が公開されてしまったら
[セキュリティ] bitly.com にスパムサイトと誤認されたら
[セキュリティ] Twitterに「スパム、または安全でない」と誤認されたら

以上、参考になれば幸いです。

[エンスー] ガソリンエンジンのオイル交換

How to change the gasoline engine oil
前回 のブログでは点火プラグの寿命によりカーボン(燃えかす)があまりにも多くたまっていることが分かりました。
ところでエンジン内を循環するオイルはカーボンを洗浄する働きもするようです。
オイルにもカーボンが混ざってそうなので交換することにしました。オイルを濾過して不純物を取り除く役目のオイルフィルターも交換します。

今回用意した消耗品

・ガソリンエンジン用オイル
・オイルフィルター
・ドレインプラグ用パッキン
・廃油を燃えるゴミとして捨てられる廃油パック

エンジンオイルは車種ごとに適応する規格があり、今回オイル交換する自動車は「10W-30または5W-40」とされていました。ですが10W-30も5W-40も売ってなかったので安売りしていた10W-50に交換します。

また、ドレインプラグ用パッキンはオイル交換ごとに新品に取り替える必要があります。古いパッキンを使い回すとオイル漏れを起こします。
ですが最近はカー用品店やホームセンターで販売されてないことが多くなった気がします。
確実に手に入れるならディーラーに買いに行くといいと思います。

今回使用した工具

・17ミリのレンチ
・オイルフィルター用レンチ
レンチを買うなら複数のサイズがセットになっているものの方がいざというとき役立ちます。

1.

エンジンを暖気したら停止させておきます。
車体下に潜るスペースを確保します。ジャッキはめんどくさいので自動車用のスロープを使いました。

2.

オイルは温めると柔らかくなるので暖気したエンジンの上に新しいオイルを置いてみましたが、全然暖まりませんでした。

3.

抜いたオイルを受け止められるように車体下に廃油パックを起きます。
車体下に潜ってオイルパンのドレインプラグを外します。
この車種は17ミリでした。

4.

オイルフィルターを外します。この車は上からの方が作業しやすいです。
緩めたとたんオイルが垂れるので下に廃油パックを奥のを忘れずに

5.

新しいオイルフィルターを取り付ける前に、取り付け面のゴムの部品にオイルを塗りたぐります。
この作業を忘れると取り付けの際にゴムが変形してオイル漏れの原因になるとか。

6.

オイルが抜けたらドレインプラグ用のパッキンを新品に交換しドレインプラグを締めます。
オイルの給油口から新しいオイルを4リットル入れておしまいです。
オイルを入れるときはジョウゴを使って少しずつ入れないとあふれてしまいます。

関連ブログ

自動車の点火プラグ交換


以上、参考になれば幸いです。

[エンスー] 自動車の点火プラグ交換

古い自動車のエンジンがノッキング･息継ぎ(息つき)するので点火プラグの交換を記録してみました。

点火プラグの新調

点火プラグはエンジンに合せて様々な種類があります。メーカーのホームページなどで対象の自動車に適合する型番を選びましょう。今回は適切と思われ得る4本の点火プラグを新調しました。

4気筒エンジンでも8本の点火プラグを使うエンジンもあるので、買う前によく確かめましょう。

エンジンのヘッドカバーを外す

ボンネットを開けます。
最近のエンジンは塗装してあったりカバーしてあったり整備性が悪いです。
六角レンチでエンジンカバーの4本のボルトを外します。

点火コイルを引き抜く

10ミリのボルトを外します。点火コイルを引っ張って、配線がたわんだらコネクターも外します。

点火プラグを外す

今回の点火プラグは16ミリの六角レンチで脱着します。
点火コイルを外したプラグホールにレンチを挿入して点火プラグを緩めれば外せます。このエンジンはプラグホールが深いのでエクステンションバーが必要でした。

左が古い方、右が新しい方です。
光の加減で分かりにくいものの、古い方はカーボン(燃えかすの炭)で真っ黒です。

元に戻す

新しい点火プラグを装着して元に戻します。
点火プラグの締め付けが弱いと、点火した瞬間ミサイルのように飛び出します。
かといって強く締め付けるとプラグがちぎれてエンジンヘッドの交換という高額な修理費が必要になります。
力加減に要注意です。

今回使った工具

・10ミリのソケットレンチ
・16ミリの点火プラグ用ソケットレンチ
・エクステンションバー
・ラチェット
・六角レンチ
ソケットレンチを買うなら複数のサイズがセットになってるもののほうがいざというとき役立ちます。

エンジン不調の原因はアーシング

バッテリーのマイナス端子に導線を増設し、電装パーツのマイナス端子にでつないでやる改造をアーシングと言います。
20年くらい前の自動車はエンジンのヘッドやブロックにアーシングするとと低回転のノッキングが改善することがありました。
そんなにわか知識からこの自動車にもアーシングをしてみたのですが、逆に悪化してしまいました。
ウィキペディア http://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%BC%E3%82%B7%E3%83%B3%E3%82%B0 では「ダイレクトイグニッションエンジンを採用する車体へのアーシングは (略) 性能低下を引き起こす」と主張されています。
測定装置がないので推測ですが、アーシングによって点火コイルのインピーダンスが変化してしまうのでしょうか。

アーシングの導線を外したら多少改善したものの点火プラグに蓄積されたカーボンはどうにも出来ず交換するに羽目になりました。

アーシング撤去と点火プラグ交換の効果は抜群

プラグを交換したら、かつてのエンジンの性能を取り戻すことが出来ました。
現在宣伝されているエコカーに買い換えるのもいいですが、古い車を捨てずに大事に乗り続けるのもエコの一つだと思います。

以上、参考になれば幸いです。