Hatena::Groupsubtech

ういはるかぜの化学

Tuesday, December 03, 2013

Internet Explorer 6への開発対応で便利なツール 04:57 Internet Explorer 6への開発対応で便利なツール - ういはるかぜの化学 を含むブックマーク はてなブックマーク - Internet Explorer 6への開発対応で便利なツール - ういはるかぜの化学

このエントリーはInternet Explorer Advent Calendar 2013の3日目です。

最近は随分と減ってきてはいますがいわゆるIE6対応という10年前のInternet Explorerに対応する羽目になることがWeb開発者の方であればあったりします。今のバージョンが11なので5世代も前のバージョンです。利用できる技術の差やバグなど色々と大変です。

そんなIE6対応がなかなか厳しい理由として、今ではなくてはならないF12開発者ツールのようなものがついていないためデバッグに手間取るというところがあります。そこでIE6で利用できる便利なツールを紹介します。

Firebug Lite

Firebug Liteはあの一世を風靡したFirebugの簡易バージョンです。

no title

もしかしたら今ではFirebugの存在を知らない人もいるかも…。Firebugについて簡単に説明するとFirefoxWeb開発用のアドインで、Google ChromeのデベロッパーツールやInternet ExplorerのF12開発者ツールのご先祖様というかそれらはFirebugがあるから生まれたといっても過言ではないといった存在です。

昔はページをマークアップする際にFirebugを使うと捗るのでFirefoxを立ち上げるとかよく聞いたものです。

f:id:mayuki:20131204044947p:image:w640

※スクリーンショットはInternet Explorer 7です

それはそれとしてFirebug LiteはおおざっぱにいえばFirebugのインスペクタ部分だけ切り出してブックマークレットで起動できるようにしたものという感じのツールです。そして何よりFirefox以外で動きます。具体的にはIE6+, Firefox, Opera, Safari and ChromeということでなんとIE6で動きます。便利!

レイアウト上の問題解決の手助けになることがまれにありますので覚えておいて損はないかと思います。

使い方はStable channelbookmarkletがブックマークレットになっているのでお気に入りに入れておき、対象のページで発動すればおっけーです。

Microsoft Script Debugger

HTMLというかスタイルの問題解決にはFirebug Liteが使えるのでよかったよかったという話ですがFirebug LiteにはスクリプトデバッガはついていませんのでJavaScriptのデバッグはまるで捗りません。そこでMicrosoft Script Debuggerです。

Error 404 - Not Found

Script DebuggerはActive Scriptをホストしているアプリのスクリプトをデバッグするツールです。要するにJScriptとかVBScriptをデバッグするためのツールです。これを使ってIEにアタッチできます。

正直使い勝手は最悪ですがとりあえずステップ実行できるのでまあないよりはマシではないでしょうか。可能であればScript EditorとかVisual Studioを使ったほうがよいと思います。

使い方

まずダウンロードセンターからscd10jp.exeというセットアップファイルをダウンロードします。そしてダウンロードしたら実行してインストールします。

インストール後、Script Debuggerを起動する前にInternet Explorerのオプションから「詳細設定」タブの「スクリプトのデバッグを使用しない (Internet Explorer)」のチェックを外しておきます。

チェックが外れた状態になったら一度Internet Explorerを開きなおしてScript Debuggerを起動します。起動する方法ですがショートカットなどは作られないのでインストールされたフォルダ(インストール時に聞かれますが既定ではProgram FilesのMicrosoft Script Debugger)にあるmsscrdbg.exeを直接実行します。

f:id:mayuki:20131204044948p:image

するとどうすればいいのかわからないMicrosoft Script Debuggerというウィンドウが開きます。と、ここで一度Internet Explorerに戻ってデバッグしたいページを開いておきます。

ページを開いたらMicrosoft Script Debuggerというウィンドウの「表示」から「実行中のドキュメント」という項目を選択します。そうすると「実行中のドキュメント」というウィンドウが開きます。

f:id:mayuki:20131204044949p:image

で、デバッグしたいスクリプトに以下のようなdebuggerステートメントを埋め込みます。

debugger;

あるいは次のステートメントで中断というボタンをクリックします。

その状態でリロードするとドキュメントが開かれて停止しますので後は「実行中のドキュメント」からファイルを開いてブレークポイントを設置したりステップ実行したりすればよいでしょう。ちなみにリロードするとブレークポイントは吹き飛びますので最悪です。

f:id:mayuki:20131204044950p:image

これでデバッグがはかどる…かもしれません。

しかしウォッチウィンドウとかもないのでやっぱりできればScript EditorとかVisual Studioを使ったほうがよいと思いますね…あれ…もしかしてこれ別に便利じゃない…?

まとめ

このように開発ツールも全然ないのでInternet Explorer 9以下ははやく捨てましょう。

トラックバック - http://subtech.g.hatena.ne.jp/mayuki/20131203

Monday, December 02, 2013

デスクトップと新しいUIInternet Explorerで行き来する 01:42 デスクトップと新しいUIのInternet Explorerで行き来する - ういはるかぜの化学 を含むブックマーク はてなブックマーク - デスクトップと新しいUIのInternet Explorerで行き来する - ういはるかぜの化学

このエントリーはInternet Explorer Advent Calendar 2013の2日目です。

今日もちょっとしたTipsです。Windows 8/8.1のInternet Explorerにはご存じの通り2つのモードが存在しています。一つは従来のデスクトップで開かれるもの、もう一つは新しいUIで開かれるものです。

普段使っているとそんなに必要はないのですが「新しいUIのブラウザで見ていたけどこれからデスクトップを使う作業するのでデスクトップで見たい」「デスクトップで見ていたけどタブレットとして持ち運ぶので新しいUIで見たい」といった感じで切り替えたくなることがありますよね。ということで切り替え方をご紹介します。

新しいUIとデスクトップのブラウザの呼び方

と、その前。2つのモードがあるわけですがそれぞれの呼び方は以下のように呼ばれていたりします。

基本的にデスクトップのInternet Explorerは「デスクトップの」とつけて呼んで、何もつけない場合には自動的に新しいUIのほうを指す、ということにしたいようです。

ついでに新しいUIのほうにImmersive Browserという呼び方があります。Immersiveというのは没入型のことでいわゆるMetro styleや新しいUI(Windows Store apps)は内部的にずっと以前からImmersive なんとかと呼ばれていてちらほら残っていたりします。たとえばno titleとか。

まあImmersiveなんとかは基本的に出てこない言葉なのですがあとで突然出てきます。要するにImmersive なんとかは新しいUI(Windows Store apps)のことだと覚えておけばよいです。

新しいUIで見ているページをデスクトップで開く

新しいUIで見ているページをデスクトップで開くにはアプリバーのページツール(スパナアイコン)から「デスクトップで表示」を選択するだけです。これでデスクトップ側で開かれます。

f:id:mayuki:20131203013609p:image

デスクトップで見ているページを新しいUIで開く

反対にデスクトップで見ているページを新しいUI側で開くということもWindows 8.1というかInternet Explorer 11からできるようになりました。逆を言えば10の頃はできませんでした。具体的に開くにはどうすればいいのかというと2つの方法があります。

一つ目はタブのコンテキストメニューから「Immersive ブラウザーで開く」を選択することです。これを選択するとそのタブで表示しているページをImmersiveブラウザー、つまり新しいUIInternet Explorerで開くことができます。ちなみに日本語版でも本当に「Immersive ブラウザーで開く」と書いてあります。

f:id:mayuki:20131203013610p:image

もう一つはファイルメニューに「Immersive ブラウザーで開く」があるのでそちらを選択する方法もあります。機能はタブのコンテキストメニューのものと同じです。

f:id:mayuki:20131203013611p:image

新しいUIとデスクトップでのCookieの共有

新しいUIとデスクトップでのCookieの共有に関しては若干の条件があります。

まずセッションCookieに関しては特に問題なく共有されます。

もう一つ永続的なCookieに関しては「新しいUIとデスクトップでセキュリティコンテキストまたはEPM(拡張保護モード)の有効状態が同じであれば共有」されるという微妙な制限があります。

Windows 8(!=8.1)、つまりInternet Explorer 10のころですと「新しいUIはEPM(拡張保護モード)が有効で、デスクトップは既定でEPM無効」がデフォルトのため共有状態がいまいちでしたが、8.1のInternet Explorer 11から「デスクトップもEPMが既定で有効」となり、8(IE10)よりシームレスに共有されるようになりました。

まとめ

タブレットと卓上でちょこちょこ行ったり来たりに便利なのでぜひ覚えておくといざというときに役立つと思います。

トラックバック - http://subtech.g.hatena.ne.jp/mayuki/20131202

Sunday, December 01, 2013

Internet Explorer 11のタブとウィンドウをつかう 11:25 Internet Explorer 11のタブとウィンドウをつかう - ういはるかぜの化学 を含むブックマーク はてなブックマーク - Internet Explorer 11のタブとウィンドウをつかう - ういはるかぜの化学

このエントリーはInternet Explorer Advent Calendar 2013の1日目です。

最初のあたりは簡単なTipsがいいかなということでInternet Explorer 11の新しいUIのほうでタブとウィンドウの使いこなしをちょっとご紹介します。

タブ(とアドレスバー)を常に表示する

特に何も設定していない新しいUIInternet Explorerではページの読み込みが終わるとタブとアドレスバーが隠れるようになっています。そのためタブを操作するにはアプリバーの呼び出しジェスチャーや右クリックをして再表示してあげる必要があります。

そのような操作がわずらわしく感じるであるとか常にタブの一覧やアドレスバーを表示しておきたい、といった場合には設定のオプションから「常にアドレスバーとタブを表示します」というオプションを有効にすることでタブが常に表示されるようになります。

f:id:mayuki:20131201040040p:image

f:id:mayuki:20131201040041p:image

ちなみにタブの並び替えには対応していないようです。ざんねん。

タブはウィンドウあたり100個まで開くことができることになっています。そのうち利用されていないタブは自動的にアンロードされる(iOSAndroidのブラウザと同じですね)のでメモリを使いすぎることはないでしょう。

Grouping together the navigation and tabs provides better control, with support for up to 100 open tabs per window.

What's New in Internet Explorer 11

ウィンドウを開く

Internet Explorer 11からタブとは別に新しいウィンドウを開くことができるようになりました。ウィンドウを開くどういうことができるのかというと画面分割で複数のページを並べることができます。捗りますね。

f:id:mayuki:20131201040042p:image:w640

ページを新しいウィンドウで開くには下記の方法があります。

  • タブを右クリックまたは長押しして新しいウィンドウとして開きなおす
  • リンクを右クリックまたは長押しして新しいウィンドウで開く
  • Shiftを押しながらリンクをクリックして新しいウィンドウで開く

ちなみに解像度とスケーリングモードによっては3つのウィンドウを並べることもできます。便利ですね。

f:id:mayuki:20131201040043p:image:w640

デスクトップ版のはなし

ちなみにInternet Explorer 9のころからですが、タブやメニューアイコンのあたりを右クリックするとタブをアドレスバーと同列ではなく一段下に並べるということができるようになっています。

f:id:mayuki:20131201114215p:image

f:id:mayuki:20131201114216p:image

トラックバック - http://subtech.g.hatena.ne.jp/mayuki/20131201

Wednesday, November 20, 2013

IISのステータスコードは小数点つきという話 07:52 IISのステータスコードは小数点つきという話 - ういはるかぜの化学 を含むブックマーク はてなブックマーク - IISのステータスコードは小数点つきという話 - ういはるかぜの化学

IISのステータスコードには小数点があるという話が話題になっていました。IIS 7.0、IIS 7.5、および IIS 8.0 の HTTP 状態コードというKBが元で広がってるのですけど、まあこれはKBの書き方が悪くて誤解されている感じです。

IISHTTPのステータスコードに加え診断用にサブステータスコードというのを内部的に持っています。たとえば「403だけどなんで403なの?(IP拒否?ディレクトリリスティング拒否?)」とかを解決しやすくするために定義されています。当然それは内部サブステータスコードなので表に出てくることは基本的にありません。

ただし次の場所を見たときにはサブステータスコードを目にすることがあります。

  • IISが返す詳細なエラーページ
  • エラートレース
  • ログファイル

繰り返しますが HTTP 403.1 Forbidden みたいなレスポンスが返るわけではありません。

例の小数点なのは詳細なエラーページに表示したりする際の形式として[ステータスコード].[サブステータスコード]と小数点となっているということです。

f:id:mayuki:20131120074700p:image:w640

なお、この詳細なエラーページというのもローカルからのアクセスのような場合のみ表示されるだけで通常はサブステータスコードは見えません。

ログファイルにおいても別なカラムになっているので小数点にみえるってことはなかったりします。

#Software: Microsoft Internet Information Services 8.5
#Version: 1.0
#Date: 2013-11-19 22:23:44
#Fields: date time s-ip cs-method cs-uri-stem cs-uri-query s-port cs-username c-ip cs(User-Agent) cs(Referer) sc-status sc-substatus sc-win32-status time-taken
2013-11-19 22:23:44 ::1 GET /Web.config - 80 - ::1 Mozilla/5.0+(Windows+NT+6.3;+WOW64;+Trident/7.0;+rv:11.0)+like+Gecko - 404 8 0 1587

これは404.8ですね。cs-substatusという別カラムになっています。

まさかサブステータスコードをつけた小数点で返すと思ってる人が出るとは思いませんでしたという話でした。まあKBの書き方だとちょっとアレだなという気はします。

トラックバック - http://subtech.g.hatena.ne.jp/mayuki/20131120

Sunday, June 30, 2013

Internet Explorer 11の新機能その2 23:17 Internet Explorer 11の新機能その2 - ういはるかぜの化学 を含むブックマーク はてなブックマーク - Internet Explorer 11の新機能その2 - ういはるかぜの化学

今回はUI周りについて変わったところをいくつか紹介します。特にいわゆる新しいUI側がほとんどですね。

タブがナビゲーションバー(上部のアプリバー)から下のアプリバーに統合

以前は画面下部がアドレスバー、画面上部がタブでしたが下のアドレスバーの領域に合体しました。

タブの複製/他のタブで開く/別ウィンドウで開く機能の追加

別ウィンドウで開くというのは前回のエントリで紹介した通り、新しいUIIEを複数立ち上げるような形にすることです。

f:id:mayuki:20130630230751p:image

常にアドレスバーとタブを表示する設定の追加

通常ページの読み込みが終わると非表示になるアドレスバーですが、アドレスバーを常に表示し続けるオプションが追加されました。コンパクトなタブが表示されます。

f:id:mayuki:20130630230752p:image

タブの同期

ほかのコンピュータで開いていたタブを表示できる機能です。Chromeとかにありますね。

f:id:mayuki:20130630230753p:image

もちろんデスクトップ版のIEでも使えます。

f:id:mayuki:20130630230754p:image

電話番号をリンクにする機能の追加

ピンまたはお気に入り

アドレスバーのピンするボタンがタブ一覧またはお気に入り一覧ボタンに変更
追加するときに画像を選べるように
お気に入りにフォルダを作って分類できる機能の追加

前よりもにぎやかに、そして一応分類してお気に入りを保存しておくことができるようになりました。画像を選択してピンすると当然そのタイルが張り付きます。

f:id:mayuki:20130630230755p:image f:id:mayuki:20130630230756p:image

ダウンロードしたファイルの一覧を表示する機能の追加

ダウンロードしたファイルの一覧を表示して、開いたり削除したりする機能が新しいUIのほうにつきました。

f:id:mayuki:20130630230757p:image:w640

記憶しているアカウントの一覧を表示する機能の追加

パスワードを記憶しているページとユーザー名の一覧を表示する機能が追加されました。設定チャームのAccountsメニューやオプションの中から開けます。なおパスワードを表示する機能はありません(削除はできます)。

ちなみにデスクトップ版にはないのですがコントロールパネルにある資格情報マネージャから確認できます。

f:id:mayuki:20130630230758p:image:w640

Performance Dashboard (ページのパフォーマンス表示)機能の追加

簡単にいえばタスクマネージャーのグラフのWebページ版です。

f:id:mayuki:20130630230759p:image

描画にかかっている時間、フレームレート、メモリ使用量、CPU使用率を表示できます。

f:id:mayuki:20130630230800p:image f:id:mayuki:20130630230801p:image f:id:mayuki:20130630230802p:image

起動はCtrl+Shift+Uかデスクトップ版であればツールメニューから起動できます。

f:id:mayuki:20130630230803p:image

トラックバック - http://subtech.g.hatena.ne.jp/mayuki/20130630