「Fiddler ユーザーの集い」フォローアップ(おまけ)

6 月 30 日(2013) に開催されました「Fiddler ユーザーの集い」で登壇させていただきました「今日から使う Fiddler」のフォローアップ記事の 3 回目です。 「Fiddler ってなに?」、「どう使うの?」って人はどうぞ以下の前回と前々回の記事をご覧くださいませ。 「Fiddler ユーザーの集い」フォローアップ (1/2) 「Fiddler ユーザーの集い」フォローアップ (2/2)   また、以下はセッションで使用したスライドです。 今日から使う Fiddler from Osamu Monoe   今回は、前回の記事で紹介しきれなかった、Firefox Web ブラウザーのネットワークトラフィックを取得する方法についてです。     Fiddler を使用して Firefox のネットワークトラフィックをキャプチャする方法   Fiddler は 自身を Windows のデフォルト プロキシとして登録するため、この設定を使用するアプリケーションのネットワークトラフィックをキャプチャすることができます。 しかし、Firefox はWindows のデフォルト プロキシの設定を使用しないため、Fiddler だけでは Firefox のネットワークトラフィックをキャプチャすることはできません。 そのため Firefox については、そのネットワークトラフィックをキャプチャするためのアドオンが用意されています。   FireHook FireHook は、Fiddler…


「Fiddler ユーザーの集い」フォローアップ (2/2)

6 月 30 日 (2013) に「Fiddler ユーザーの集い」 で 登壇させていただきました「今日から使う Fiddler」というセッションのフォローアップの第二回目記事です。 Fiddler とはなにか? 入手先などについては、前回のこちらの記事の内容をご参照ください。 当日使用したスライドは以下になります。 今日から使う Fiddler from Osamu Monoe   今回は Web セッションの内容を調べるためのタブ付きビューの各タブについて紹介していきます。     トラフィックの確認 Fiddler でキャプチャした Web セッションの内容を確認するには、目的に合わせタブ付きビューの各タブを使用します。 タブ付きビューに既定で表示される各タブの内訳は以下のとおりです。 以降は各タブの役割について紹介していききます。     Statistics タブ Statistics タブは Web セッションの基本情報を表示します。 クライアントの接続数であるとかバイト数であるとか、接続に関する情報が一覧となって表示されます。   画面下の Show Chart をクリックすると、選択されている Web セッションの容量を占めるヘッダーと本体の割合が円グラフで表示されます。     Filters タブ Filters キャプチャした Web…


「Fiddler ユーザーの集い」フォローアップ (1/2)

先月、日本オライリーさんの 「実践 Fiddler」 という書籍の監訳のお手伝いをさせていただきました関係で、6 月 30 日 (2013) に「Fiddler ユーザーの集い」 で 「今日から使う Fiddler」というタイトルで、セッションを持たせていただきました。 内容は、初学者が Fiddler を使い始めるめの基本的なものとなっており、エキスパートな方々には少々物足りなかったかもしれません。 さて、スライドをシェアしたものの、ほとんどがデモで構成されたセッションなので、きっとスライドを見てもわけわからんだろうということで、フォローアップの記事を書いておきます。(長いので 2 回にわけます) 今日から使う Fiddler from Osamu Monoe   今日から使う Fiddler この記事ではセッションの内容の抜粋を紹介していきます。   Fiddler とは 無償の HTTP 専門のネットワークキャプチャツールで、Web をプロトコルレベルでデバッグする際に使用します。 もうちょっとわかりやすく説明すると、通常我々が見ている Web というものは、HTTP、HTTPS というプロトコル (通信規約) によってデータのやり取りがなされています。 これら HTTP で Web サーバーから送られた情報は Web を見るための道具である Web ブラウザーによって人間が理解しやすいように Web ページとして表現されます。 しかし、このやりとりされるデータに問題があると、Web ブラウザーで正しく Web…


さぶみっと!オフ会 ~JavaScript で作れるWindows 8 対応アプリの夕べ~フォローアップ

昨日 (2013/06/13) の 「さぶみっと!オフ会 ~JavaScript で作れるWindows 8 対応アプリの夕べ~ 」にご参加くださいました皆様、ありがとうございました。 私のセッションで使用したスライドと、紹介したドキュメントのリンクを掲載させていただきます。   Windows 8 が拓く新しいアプリ市場 from Osamu Monoe   JavaScript + HTML5 で作る Windows 8 アプリ from Osamu Monoe 以下はセッションで紹介したドキュメントのリンク集です。   Windows ストア関連 Windows デベロッパーセンター – Windows ストア アプリ http://msdn.microsoft.com/ja-jp/windows/apps/ Visual Studio Express 2012 for Windows 8 のダウンロード http://msdn.microsoft.com/ja-JP/windows/apps/br229516 Windows ストア登録/サイン イン https://appdev.microsoft.com/StorePortals/ja-jp/Account/signup/start Windows ストア開発者アカウントへのサインアップ http://msdn.microsoft.com/library/windows/apps/jj193592…


Windows ストア アプリにて js ライブラリ使用時に WACK で UTF-8 エラーになる場合の対処方法

HTML + JavaScript で作成する Windows ストア アプリでは、Windows Library for JavaScript (WinJS) が提供する JS ライブラリだけでなく、jQuery のように一般的に公開されている JavaScript のライブラリも使用することができます。 しかし、これらライブラリを使用して作成したアプリのパッケージを WACK (Windows App Cert Kit) にかけると、JS ファイルに対して Fail が返り UTF-8 でエンコードを行うよう促される場合があります。 このエラーは、使用されている JS ファイルのテキストエンコード方式が Windows 8 のバイトコード キャッシュが処理できない方式であるために発生します。 このエラーを解決するには、Fail と判断された JS ファイルを Visual Studio 2012 でオープンし、文字エンコードを 「Unicode(UTF-8 シグネチャ付き) – コードページ 65001」を指定して保存しなおします。 具体的な手順は以下の通りです。 Visual Studio 2012 で問題の発生している JS…


『HTML5で作るWindows 8アプリ』 資料

この記事は cssnite × Microsoft HTML5 + CSS3 Web Camp 2013 で私が担当するセッション 『HTML5 で作る Windows 8 アプリ』 で紹介する資料をまとめたものです。   今現在、まだお席に若干余裕がありますので、ご興味のある方はぜひお早目に参加登録をお願いいたします。 さて、CSS Nite  をご存じない方のためにちょっとだけ。 CSS Nite とは CSS Nite(シーエスエス・ナイト)は、Web制作に関わる方のためのセミナーイベントです。   これまでに 300 回を越える関連イベントを通して、のべ 40,000 名を超える方が参加しており(2012年12月現在)、Web制作業界のセミナーとしてはモンスター級のイベントです。 地方版は現地の有志により主催・運営されており、名古屋、大阪、青森、福岡、沖縄、札幌、福井、仙台、福島、広島、新潟、京都、高松、静岡、宮崎、岡山、松山、山梨、長野、また、韓国でも開催されております。 マークアップ系にとどまらず、WebディレクターやSEO/SEM、プログラマー系、経営者など、Web制作に関わる方の交流の機会となっています。   『HTML5で作るWindows 8アプリ』 資料(というかリンク集) ここに掲載される資料は、これから行われるセッションで紹介される予定の資料であり、セッション実施後に変更される可能性があります。 なお、セッションで使用するスライドは、有料イベントにつき参加者にのみ公開となりますのでご了承ください。   Windows ストア アプリ Windows ストア アプリの紹介 http://msdn.microsoft.com/ja-JP/windows/apps/hh974576 Internet Explorer 10 開発者向けガイド http://msdn.microsoft.com/library/ie/hh673549.aspx Hands On…


『モテる JavaScript』フォローアップ – その 3 「使われているとなんかカッコ良い JavaScript の機能」

4 月 27 日(2013) に開催されました、第4回「ブラウザー勉強会」に『モテる JavaScript』というセッションのフォローアップ第三回目です。 前々回より以下のアジェンダでセッションの内容を紹介しています。   はじめに 知っておきたい JavaScript の 慣例的な記述方法とマナー 使われているとなんかカッコ良い JavaScript の機能   なお、当日使用したスライドは以下になります。   今回は 『使われているとなんかカッコ良い JavaScript の機能』 についてです。   使われているとなんかカッコ良い JavaScript の機能 なんてぇタイトルをつけておきながら、「カッコ良い」というのは甚だ各個人の主観に因るところが大きく、条件から尺度まで全国津々浦々各市町村老若男女人それぞれで、おそらく「格好良い」に正解はないと思いますので、ここでは、私が他人様のコードを見ていくうえで、効率的かつ簡潔、理にかなっており、なにより「カッコィィ…♥」と思った JavaScript の機能とコードを紹介させていただきます。   あいまいな評価の利用 JavaScript の構文の曖昧さは、他のプログラミング言語を学んだ人達から不評をかう 1 つですが、逆に言えばこの曖昧さを意のままに使いこなしてこそ真の JavaScript プログラマーと言えると思います。 たとえば、以下の値はすべて false と判断されます。 false null undefined "" ( 空文字 ) 0 NaN (not a number) 実行するまでもないですが、以下のコードを実行するとすべての結果に…

1

『モテる JavaScript』フォローアップ – その 2 「JavaScript の 慣例的な記述方法とマナー」

4 月 27 日(2013) に開催されました、第4回「ブラウザー勉強会」に『モテる JavaScript』というセッションのフォローアップ第二回目です。 前回より以下のアジェンダでセッションの内容を紹介しています。 アジェンダ はじめに 知っておきたい JavaScript の 慣例的な記述方法とマナー 使われているとなんかカッコ良い JavaScript の機能 なお、当日使用したスライドは以下になります。   今回は 『知っておきたい JavaScript の 慣例的な記述方法とマナー』 についてです。   知っておきたい JavaScript の 慣例的な記述方法とマナー JavaScript には、言語の仕様/機能とは直接関係ない慣例的つまり、JavaScript プログラマーの間では知っていて当然、知らないとちょっと恥ずかしい、ほぼ常識と化した記述方法あります。ここではそれについてのおさらいをしていきます。   変数/関数の命名規則 コーディングルールとしてまず抑えておきたいのは、変数と関数の命名規則でしょう。 これらの命名規則については、企業や開発チームなどで独自の細かい規定がある場合がありますが、一般的な JavaScript コードの記述においては、以下のようなものがあります。   キャメルケース 変数名/関数名を小文字ではじめ、二番目の単語の最初のアルファベットを大文字で記述する方法です。 名前中の大文字がラクダのコブのように膨らんでみえることからキャメルケースと呼ばれます。 コンストラクタ 関数 関数名の基本はキャメルケースですが、そのまま関数として使用するものなのか、new で呼び出されてインスタンスを生成して使用するものなのか区別するために、コンストラクタ関数の名前の先頭は大文字とします。 this オブジェクト自身のインスタンスを指す this を保持する変数名は慣例的に that 、self、me といった変数名が使用されますが、最近の JavaScript 本では…

2

第4回「ブラウザー勉強会」-『モテる JavaScript』フォローアップ – その 1

4 月 27 日(2013) に開催されました、第4回「ブラウザー勉強会」に『モテる JavaScript』というセッションで登壇させていただきました。 今回のセッションは、外部のイベントの登壇であり、自社の製品のセッションでもないことから、おそらく私がこのネタでセッションをすることは未来永劫ないでしょう。 しかしながら、結構な時間をかけて資料をまとめたので、セッションで紹介しきれなかった部分も含め、ここで内容を紹介していきたいと思います。 と、その前に   ブラウザー勉強会とは? 東京近辺で開催される Web ブラウザーの勉強会です。Web 関連のエキスパートな方々や、我々のような Web ブラウザのベンダーの人間などが登壇させていただいております。土曜日の開催が多く、セッションの数も多いので、各回のテーマについてみっちりと学んで帰りたいという人にはお薦めと思います。 詳しくは以下のページをご覧ください。、 Browser Workshop – ブラウザー勉強会 http://bws.hebikuzure.com/   私のセッションで使用したスライドは以下になります。SlideShare に上げるとフォントやレイアウトが違ってしまいますが、内容的には問題ないかと。 モテる Java script from Osamu Monoe 今回の記事では上記スライドの内容に沿ってセッションの内容、補足などを行っていきたいと思います。     『モテる JavaScript』   このセッションの目的 JavaScript はインタプリタで動作するスクリプト言語です。多く数多(あまた) の Web ページで使用されていますが、スクリプト言語のため、その気になれば誰でもソースコードを見ることができます。 どうせ見られるのであれば、見られても恥ずかしくないコードを書き、できればツウを唸らす恰好良いコードを書き、あわよくばモテようというのがこのセッションの目的です。 つまりは以下の 2 点に集約されます。 他人に見られて恥ずかしくないコードを書く 格好良い JavaScript コードを書いてモテる   恥ずかしくないコードとは? そして、それを書くことの必要性…


エクステンションによる VisualStudio 2012 入力支援機能の強化

Windows ストア アプリの開発は HTML + JavaScript でも行えるため、これまで Visual Studio を使ったことがない、という開発者の方も多いでしょう。 そういった方々のために Visual Studio の機能概要についてしばらく紹介していきます。 ここまでの記事は以下になりますので、これから Visual Studio を使ってみようか、という方はぜひ以下の記事もご覧ください。 Visual Sudio 2012 の基本的な HTML + JavaScript の入力支援機能 Visual Sudio 2012 の Windows ストア アプリと Web コンテンツの基本的なデバッグ機能 Visual Studio 2012 から新しく追加された HTML + JavaScript 入力支援機能   前回は、Visual Studio 2012 から新しく追加された HTML + JavaScript の入力支援機能について紹介しました。 今回は、Visual Studio 2012…