IIS7で拡張子.htmlのままPHPを実行する方法

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

自分はローカルサーバー環境ではXAMPPではなく、IIS7を利用しています。IIS7を利用している理由は二つ。一つ目は、業務でクラシックASPを使っていることもあってASPが標準で利用できること(ちょっと設定変更が必要ですが)、二つ目はWeb PI(Microsoft Web Platform Installer)を利用すればかなり簡単にウェブプラットフォーム等がインストール利用できること。以上、二点からIIS7を利用しています。

まあそんなことはともかく、わけあって拡張子.htmlのままPHPを動かしてみたいと思ったのでいろいろ調べてみました。なお、IISで動くPHPのインストールや設定方法については、下記のサイトを参考にしてください。
[MEMO] IIS 環境に PHP をインストールする – WebMatrix の歩き方 by 武田正樹 – Site Home – MSDN Blogs
Windows 8/7/Vista に PHP をインストール

そんな中、IIS7で拡張子が.htmlのままPHPを実行したいと思ったのですが、.htaccessでの方法は多く見つかるものの、IISでの設定は見つからず。
.htaccessで拡張子.htmlのままPHP実行可能にする:ねこすけのPHP
.htaccessで、拡張子.htmlのままPHPを実行する方法 | 海外SEO情報ブログ

というわけで、いろいろ試行錯誤して分かったのでここに書いておきます。今回はIISで『amyu』という名前のサイトを作成し、そのサイトにアクセスした場合には拡張子が.htmlのファイルでもPHPとして実行するようにしたいと思います。IISでの複数サイトの追加は下記のサイトを参考にしてください。
IIS で Web サイトの追加

『amyu』の物理パスは『C:\inetpub\wwwroot\amyu』、ホスト名は『amyu.localhost』としました。
Webサイトの追加
試しに下記のようなソースコードを書いた拡張子.htmlを作成し、開いてみます。

もし、PHPが実行される環境であれば、このファイルのページを開いた時にはPHPの設定情報が表示されるはずです。アクセスしてみると下記のようになりました(シークレットウィンドウで開いてますが特に意味はありません。通常のウィンドウだと拡張機能のボタンが多すぎてウィンドウサイズをあまり小さくすることができず、見栄えが悪いんです・・・)。
htmltophp2
何も表示されていません。試しにソースコードを表示してみると、下記のように元々のソースコードがそのまま表示されている状態になっています。
htmltophp3

ではいよいよ、拡張子.htmlでPHPを実行する方法の説明です。IISの画面に戻って、『ハンドラーマッピング』のアイコンをダブルクリックします。
htmltophp4
『ハンドラーマッピング』という画面になるので、そこからパスが『*.php』となっている項目を探してダブルクリックします。
htmltophp7
すると下記のような画面が表示されるはずです。この項目を覚えておいてください(もしかしたら環境によっては下記と同じではないかもしれません)。
htmltophp6
上記画面を閉じてハンドラーマッピング画面に戻り、どこか適当な場所で右クリックし、『モジュールマップの追加』をクリックします(あるか分かりませんが、もし先ほどの画面が『モジュールマップの編集』という画面ではなく、『スクリプトマップの編集』という画面だったならば、『スクリプトマップの追加』をクリックします。なお、ASPを.htmlで実行したい場合は『スクリプトマップの追加』をすることになります)。
htmltophp7
すると、先ほどの*.phpをダブルクリックした時と似たような画面が表示されるので、要求パスに『*.html』、モジュールと実行ファイルを先ほどの*.phpで開いた画面と同じ項目を入力します。なお、実行可能ファイルのパスはダブルクォーテーションで囲まないといけないようです。名前は適当で分かりやすい名前にしましょう。ここでは『HTMLtoPHP』としました。
htmltophp8
OKボタンをクリックすると、下記のようなメッセージボックスが表示されると思うのでOKをクリック。
htmltophp9
すると、ハンドラーマッピングに『HTMLtoPHP』が追加されました。
htmltophp10

以上で、拡張子が.htmlでもPHPとして動くはずです。以下が動作結果。
htmltophp11
ちゃんと動いたようです。

ところで、以上の動作を行った所、ディレクトリに下記のようなweb.configファイルが作成されました。

どうやらこれが、web.configでの書き方になるようです。
試しに、Default Web Site(http://localhost/)のサブディレクトリにこのweb.configとPHPコードを書いたHTMLファイルをいれてブラウザで見てみるとPHPが実行されました。
htmltophp12
もちろん、web.configを削除すると、PHPが実行されなくなります。

Twitter Bootstrap3のレスポンシブ対応について調べてみた

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

趣味で運営しているサイト(現在は、レスポンシブ対応をせずにTwitter Bootstrap2を利用している)をレスポンシブ対応したいと思い、Twitter Bootstrap3のレスポンシブ箇所について調べてみた。

カラムについて

おおまかに4種類のサイズに分かれるらしく、

  • モバイルサイズ:768px未満
  • タブレットサイズ:768px以上、991px以下
  • デスクトップサイズ:992px以上、1199px以下
  • 大画面サイズ:1200px以上

という具合で考えたらいいらしい。

それぞれモバイルサイズが『xs』、タブレットサイズが『sm』、デスクトップサイズが『md』、大画面サイズが『lg』という文字であらわすらしく、例えばカラムの指定は『col-○○-*』であらわし、タブレットサイズの2カラムならば『col-sm-2』と書くよう(カラムについては、特定のサイズ以上という認識のほうがよさそう)。なお、*部分の数値は1~12まで指定可能。
オフセットも同様に『col-○○-offset-*』というように記述。この記述をすると、左側に空白ができる(margin-leftの指定用)。オフセットの場合は0~12の数値が指定できるらしい。0(margin-left:0)と12(margin-left:100%)の使い道がいまいちよく分からないのだけど。

カラムの順番変更

『col-○○-push-*』や『col-○○-pull-*』といったクラスを使うことによって順序が変更可能。
タブレットサイズとデスクトップサイズで順番が変わるようなサンプルを書こうと思い”col-xs-6 col-sm-pull-6 col-md-push-6″というクラスをもったdivタグを作ると、予想外の動作になってしまった。慣れるのにちょっと時間がかかりそう。これも数値の指定は0~12。

それぞれのサイズでの表示・非表示設定

『visible-○○』で指定のサイズのみ表示、『hidden-○○』で指定のサイズのみ非表示ということができるよう。

レスポンシブウェブデザイン対応での基本は上記のようになりそう。雑だけどサンプルは以下。
Twitter Bootstrap3の勉強

他にもBootstrapには便利そうな部品などがいろいろあるのでもうちょっと勉強していきたい。

JavaScriptのswitch文の条件は厳密か?

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

JavaScriptでの等価演算子は『==』と『===』の二種類があります。どう違うかというと、単純に説明すると『==』が自動的に型変換して比較してくれる等値演算子で、『===』は型も考慮して比較する同値演算子となります(参考:JavaScriptの等値演算子 (==) と同値演算子 (===) の比較)。
例えば以下の様な感じ。

上記のボタンは、クリックするとそれぞれの比較演算子の結果をアラートで表示するようにしたものです。『1==’1’』は『true』と表示され、『1===’1’』のほうは『false』と表示されます。
参考までに上記のボタンのソースコードは以下のようになっています。

なお、『===』のほうを厳密な比較ということがあるようです。

ところで、条件文というとJavaScriptにはswtich文というものがあります。これは、switchで指定した式と一致するcaseのラベルの文を実行するという文ですが、はたしてこの時の比較は厳密かそうでないか。
では、下記のようなコードを書いて試してみます。

JavaScript

HTML

これで、ボタンをクリックすると、switch文が同値演算子と同じ動きであれば、”同値”と表示し、そうでないならば”厳密”と表示するアラートが表示されるはずです
以下が上記のコードで書いたボタンです。

クリックすると『厳密』と表示されました。よって、switch文の条件は厳密だということが分かりました。

最後に数値が書かれた文字列を数値型に変換するほうほうを説明します。
parseIntという関数を使って『parseInt(‘1′)』と書くのがある意味、基本なのですが、その他にも、『’1’-0』という方法があります。文字列は引き算できないので、自動的に引き算ができる数値に型変換されるわけです(参考:JavaScriptにおける数値⇔文字列の型変換あれこれ – console.lealog();)。
余談ですが、昔見た怖いコードの話。数値を引数としてとる関数がありました。仮にその引数をnumとしましょう。ですがそのコードを書いた人は、引数に文字列型が入ってしまう場合も考えたのでしょう。関数の最初の行は、下記のようになっていました。
『num = num + 0;』
思わず「うひゃっ」と声がでそうになりました。
これの何が怖いの? と思う人は、ブラウザの開発者ツールを開いて(大抵、F12キーを押すと開く)、コンソールモードにし、『num=’123′;num+0』と入力してエンターキーを押してみてください。
幸い、その引数に入るのは数値型の数値しかなかったのですが、すぐにコードを書いた人に伝えました。
まあ、自分も演算子を逆にしてしまうというバカな行動は日常茶飯事なので、人のことを言えた義理ではないのですが・・・。勘違いしやすいので気をつけましょう。

サイドバーに最近読んだ本(ブクログに追加した本)のアソシエイトリンクを追加

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

昨年の11月より、ブクログの無料ユーザーは、アマゾンのアソシエイトIDを設定できなくなりました(参考:ブクログ、無料ユーザーは「AmazonアソシエイトID設定」が利用不能に(2013年11月6日15:00より) | Synthetic LOG)。
とはいっても、自分にはほとんど関係ない話で、アマゾンの紹介料レポートをみても、ブクログ経由でクリックされたものはなさそうです。

ところで、今までサイドバーにて使っていたブクログのブログパーツ(ミニ本棚)。最近読んだ本(というより、最近登録した本)を一覧で表示してくれるのはいいのだけれども、リンク先がブクログのURL。当たり前だろと言われそうですが、個人的にはアマゾンに直接とんでくれるほうがうれしい。
というわけで、自分でやってみることにしました。

利用したデータはブクログで配信されているRSS(http://booklog.jp/users/amano225/feed)。ブクログでは非公式APIとしてjsonも配信しているようですし(参考:ブクログのAPI(非公式)を使って本の情報をjQueryで取得してみた :: backyard.weblog)、そちらのほうが多分簡単に実装できるとは思うのですが、今回はRSSのほうを利用することに。
また、今回のやり方では『PHP Code Widget』というプラグインを使っています。PHP Codeのウィジェットをサイドバーにいれて、下記のように入力。

今回困ったことに、simplexml_load_fileを使って直接RSSのXMLをパースできなませんでした。ブクログのRSSでの表示は、HTTPリクエストヘッダにユーザーエージェントが必要なようです(7~12行目で設定)。ユーザーエージェントは空文字でもいいようなのですが、とりあえず”am-yu.net”と設定しておきました。HTTPリクエストヘッダをつけてsimplexml_load_fileで取得する方法はあるのだろうか。調べてみても分かりませんでした。

23行目ではアマゾンへリンクできる本かどうか、25行目ではレビューがあるかどうかを見て、26行目で両方そうであればリンクを作成するようにしています。これは、自分がhontoの電子書籍を購入してブクログに登録することがあるため。やろうと思えばhontoのアフィリエイトリンクも作れるとは思うのですが、hontoのアフィリエイトIDを持ってないのでやってません。レビューがあるかないかは別に見る必要はないかもしれませんが、あまり触れてほしくない本はレビューをしてないのでレビューしてるかどうかで表示するか判断することに。
また、掲載する本は最大5冊にしています。

amazonへのURLについては下記のページを参考にしました。
AmazonのURL短縮|最新版
“ref=nosim/”はつけたほうがいいのかな? とずっと思ってたけど、今は別に関係ないようです。

関数にしてるのは、PHP Codeの動きがよく分かっていないため、変数名の衝突する可能性もあるのではないかと思ってそうしました。PHPはあまり詳しくないのでこうしましたが、もっと良い方法があるかもしれません。

ところで、最後に一つだけ言っておくと、自分のブクログのレビューは、たまに日記や雑記みたいなことを書いてしまっています。

コードハイライト用のプラグインを『Crayon Syntax Highlighter』に変更してみました

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

前からコードハイライト用のプラグインには『WP-Sysntax』を使っていたのですが、自分が最近よく書く『R』には対応していないため、Rに対応しているプラグインを探して変更することにしました。
そこで見つけたのが、『Crayon Syntax Highlighter』(参考:[Å]【WP】ソースを紹介するプラグイン「Crayon Syntax Highlighter」に変更したので設定メモ | あかめ女子のwebメモ)

使い方はいろいろあるようだけど、どうやら下記のように、preタグの中にclassを書き、その中に言語の設定をするらしい。

ちなみに、WP-Syntaxでは、

と、lang属性内の中に言語を指定していました。

これぐらいなら変更も簡単にできそうだと思い、一括置換プラグインを探して見つけたのが、『Search Regex』というプラグイン(参考:【WordPress】全記事から検索して一括置換出来るプラグイン「Search Regex」が素晴らしい | nori510.com)
で、早速過去記事も含めてやってしまおうか。と思ったのですが・・・。

なんと、よくよく過去記事を見なおしてみると、全部『Crayon Syntax Highlighter』のコードハイライトになっていました。どうやら、lang属性内に書いても適用されるようです。
せっかく『変更するためにやったこと』を書こうと思ったのに、何もしなくてすんだようです。

と思ったのですが、どうやらpreタグで囲んだだけで『Crayon Syntax Highlighter』のコードハイライトが自動で適用されてしまっているよう。以下は、”<pre>あいうえおかきくけこ</pre>”と書いた結果。

うーん。preタグなんて多分使わないだそうし、まあいっか。

もうちょっと試してみようと、”<pre lang=”html”>あいうえおかきくけこ</pre>”と書いたら以下のような結果に。

ツールバーに”XHTML”という表示が加わりました。どうやら、lang属性内で書いた言語を認識してはくれているようです。