
デザインを行って、書き出し、コーディングを行った後確認を行った時に、どうもブラウザによって色が合わない場合があります。というよりありました。

結論を最初にお伝えしておくと、ICCプロファイルが埋め込まれているとこのような現象が起こってしまう事があります。

Webに掲載する画像を想定していますので、印刷物の場合は解決方法などの工程などで異なる場合がございます。


## ICCプロファイルとは

ICCプロファイルについて説明をしていこうとすると、長々となってしまいそうなことと、自分もそこまで理解しているわけではないので、[Wikipediaから引用](http://ja.wikipedia.org/wiki/ICC%E3%83%97%E3%83%AD%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB)。

> ICCプロファイルとは、カラーマネジメントにおいて、インターナショナル・カラー・コンソーシアム (ICC) の公表した標準に従い、色に関わる入出力機器や色空間を特徴付ける一連のデータである。プロファイルは特定機器の色特性や見た目の要求仕様を記述したもので、デバイスの入力と出力の色空間のマッピングや「プロファイル接続空間 (PCS)」で定義される。PCSとしてはCIELAB (L*a*b*) やCIEXYZがある。マッピングは表形式で示され、表にない値には内挿を行うか、変換のための一連のパラメータを用意する。

…こんな感じらしいです。イマイチ分かりませんが、要は色の入出力を行う際の指標、という感じでしょうか？


## 色が変わってしまう例

まずは色が変わってしまう例を載せておきます。  
 ブラウザによってはどちらも同じ色で見えるかと思いますが、IEやChromeでは右側が色褪せて見えるかと思います。

![](/content/images/2016/04/srgb.jpg) ![](/content/images/2016/04/adobergb-1.jpg)

左の画像にはICCプロファイルを埋め込まず、右の画像には「Adobe RGB」というICCプロファイルを埋め込んでいます。

これを見るだけでは、ICCプロファイルを埋め込んだ方が色褪せてしまっているように感じてしまいますが、実は違います。


## 原因

ディスプレイやプロジェクタで扱うRGB系の代表的なICCプロファイルには、下記の2つがありますが、それぞれに表現できる色の範囲が定まっています。

<dl><dt>sRGB</dt><dd>国際標準規格で定まっているため、多くのデバイスで準拠されている。そのため、入力・出力の差異を少なくしやすい。</dd><dt>Adobe RGB</dt><dd>Adobe Systemsによって提唱されたモノで、sRGBに比べて表現できる色の幅が広い。印刷等のDTP分野で使われている事が多い。</dd></dl>の様に、本来であれば、Adobe RGBに則ったデータの方が正確な色を表現できるはずですが、対応していないディスプレイやブラウザで表示を行おうとすると色がくすんでしまいます。


## 解決方法

ICCプロファイルが埋め込まれてしまっている画像、特にAdobe RGBが利用されている画像の場合、まずはsRGBに変換すると大分差異が無くなります。

Photoshopを持っている場合は、「編集」>「プロファイル変換」で変換することが可能です。  
 また、CS4は分かりませんが、CS5では「Webおよびデバイス用に保存」の中の設定で「sRGBに変換」という項目があります。  
 この際に「カラープロファイルの埋め込み」のチェックは入れない様にしてください。

試していませんが、「[縮小革命](http://www.vector.co.jp/soft/winnt/art/se488245.html)」というでも変換することが可能の様ですね。  
 （[前回の記事](/201204/smartphone-photo/)のExif情報の削除も出来るみたいです）


## 参考サイト

- [色空間 – Wikipedia](http://ja.wikipedia.org/wiki/%E8%89%B2%E7%A9%BA%E9%96%93)
- [縮小革命の詳細情報 : Vector ソフトを探す！](http://www.vector.co.jp/soft/winnt/art/se488245.html)

ブラウザやPCによって画像の色が合わない！って時の対処


スマートフォンのカメラで撮影した画像をPCで表示する時に、上手く表示されないことがありますが、その画像をPCで編集を行うと、今度はスマートフォンで上手く表示されなくなることがあります。

条件が重なった時に生じる現象ですが、割と簡単に起きる内容だったので、忘れないように残しておきます。


## 原因

![比較画像](/content/images/2016/04/hikaku.jpg)

原因については写真を撮った時に、画像データ以外に一緒に保存される「Exif情報」と呼ばれるモノが影響した結果となります。

詳しい理由については[こちらの記事](http://hatomugi.sakura.ne.jp/forum/topic.php?id=84)や、[こちらの記事](http://zeromk.sakura.ne.jp/wp/?p=972)で紹介されていますので、今回の記事では割愛しておきます。

また、編集ソフトによっては「Exif情報」を書き換えることをしないので、PCとスマホの向きがチグハグのまま回転をしてしまうため、今度はスマートフォン側で上手く表示されなくなってしまいます。

その状態になったデータを置いておきます。[こちらからどうぞ](http://demo.sus-happy.net/sp/image/)。画像のようにPCとスマートフォンで見た目が違うと思います。


## 解消法

原因でお伝えしたとおり、「Exif情報」が問題となっているので、そちらを削除してしまうか、書き換えてしまえば問題ありません。

Windowsの場合は、非商用の場合のみ「[XnView](http://www.forest.impress.co.jp/lib/pic/piccam/picviewer/xnview.html)」と言うソフトで、書き換えることが出来、「[ExifEraser](http://gouka3.blog35.fc2.com/blog-entry-291.html)」で削除することが出来ます。

Macの場合はiPhotoで回転させて書き出すことで一緒に書き換えてくれるようです。


## 参考サイト

- [iPhoneやiPod touch、Android携帯などで撮った写真の方向がおかしい « できるWEBサイトにする為に何が出来るのか](http://hatomugi.sakura.ne.jp/forum/topic.php?id=84)
- [［iPhone］撮影した写真をPCで見ると左右に回転して表示されてしまう理由（”画像方向”について） – 実験場所](http://zeromk.sakura.ne.jp/wp/?p=972)
- [iPhoneカメラのバグ？Exifに関して。](http://thatstwice.blog19.fc2.com/blog-entry-35.html)
- [窓の杜 – XnView](http://www.forest.impress.co.jp/lib/pic/piccam/picviewer/xnview.html)
- [画像をドラックするだけで自動でExif情報を削除するソフト「ExifEraser」 Flame of Heavens](http://gouka3.blog35.fc2.com/blog-entry-291.html)

スマートフォンで撮った写真がPCで上手く表示されない？


折角ブログの見た目を変更したので、RSSもいじってみようと思い、CSSでのデザイン変更を行ってみました。

CSSを書いて、読み込ませるだけ･･･ではあったのですが、RSS用のテンプレートの適用方法が若干特殊だったので残しておきます。


## RSSのテンプレートを変更する

WordPressにはRSS用のテンプレートは用意されていないため、ソースファイルを触るしかないのかな？なんて思っていましたが、アップデートする度に元に戻ってしまうのがイヤなので、調べてみるとこんな方法で[各種フィード用のテンプレートを実現できる](http://dogmap.jp/2009/04/30/switching-feed-template/)ようです。

上記記事は”functions.php”を書き換える方法ですが、[プラグインも作成されている](http://dogmap.jp/2011/06/28/feed-template-customize/)ようなので、そちらを使ってみても良いかもしれません。


## RSSにCSSを読み込ませる

RSSのテンプレートが作成できるようになったら、CSSを読み込ませるように書き換えます。

HTMLとは少しだけ記述が違い、こんな感じになります。

```xml
<?xml-stylesheet href="rss.css" type="text/css" media="screen"?>
```

WordPressのテーマ用に書くとこんな感じでしょうか。

```php
<?php echo '<?xml-stylesheet href="'.get_bloginfo("template_directory").'/rss.css" type="text/css" media="screen"?>'; ?>
```


## RSS向けのCSSを書く

最後にRSS向けのCSSを書きます。

HTMLと同様にXMLが基礎となっているので、階層で指定してやれば問題ありませんが、全てインライン要素扱いになっているので、必要なものには`display:block`を指定すると良さそうです。

また、通常のHTMLでは存在しない、`<dc:creator>`のようなタグは、セミコロンの後ろ、今回で言う所の`creator`として認識されるようです。


## 他の方法

他にXSLTを利用すると、XML内のデータをHTMLに変換することが出来るので、もっと自由にレイアウトや、リンクを貼ったりすることも出来るので、面白そうですね。

またこちらの方法も試してみたいと思います。


## 参考

- [各種フィード用テンプレートの変更 : dogmap.jp](http://dogmap.jp/2009/04/30/switching-feed-template/)
- [Feed Template Customize : dogmap.jp](http://dogmap.jp/2011/06/28/feed-template-customize/)
- [RSSにもCSSを ～CSSテクニック～](http://www.stylish-style.com/csstec/hi-level/rsscss.html)
- [RSS を XSLT で html に変換して見栄え良く表示する](http://sonic64.com/2005-03-16.html)

WordPressのRSSの見た目をCSSで変更してみる


WordPressの使い方が分かってきたので、テーマ作りを一からやってみようと思い、見た目を変更してみました。

カテゴリーやタグ周りがまだ貧弱ですが･･･<del>元のテーマを壊してしまった</del>公開できるレベルになったで変更しました。


## やってみたこと

### トップページだけ別デザイン

front-page.phpでサクッと行けるかと思ったのですが、ページ送りしても違うデザインにしたかったので、

```php
if( ! is_paged() )
```

を使って、トップページ且つ最初のページ、を判断してます。

### 最初の投稿だけ別デザイン

最初の投稿だけ別デザインで、アイキャッチが設定されていたらその画像も表示するようにしてみました。

最初の投稿をifで判別するのは何だかイヤだったので、

```php
<?php if( have_posts() ): the_post(); ?>
最初の投稿
<?php while ( have_posts() ) : the_post(); ?>
それ以降の投稿
<?php endwhile; endif; ?>
```

と言う感じにしています。  
 ちなみにアイキャッチ画像の表示方法はこんな感じ。

```php
echo get_the_post_thumbnail( get_the_ID(), 'post-thumbnail' );
```


## その他

Twenty Elevenや最近たまに見かける、引用や画像が本文から飛び出してるのとかも、使い道考えてませんが取り入れてみました。  
 現状そこまで特別なことはしていないので、またいつの間にか変わっているかもしれません。

気づいた事、気になった事、試してみた事、作った事など、自分のためのものではありますが、今後も色々と残していこうと思います。

ブログの見た目を変更してみました


社内向けにGoogle拡張機能を使ってツールを作ってみようかと思い立って調べてみたところ、簡単なモノであればサクッと作れそうなので、テストも兼ねて自分用にパスワード自動生成の拡張機能を作ってみました。


## Google拡張機能の作り方

[APIリファレンス](http://code.google.com/chrome/extensions/docs.html)はこちらですが、英語は読めないので、[意訳されているページ](http://dev.screw-axis.com/doc/chrome_extensions/)を参考にさせていただきました。

その中の[Getting Started](http://code.google.com/chrome/extensions/getstarted.html)（[意訳](http://dev.screw-axis.com/doc/chrome_extensions/tutorials/getting_started/)）で、ある程度の作りが分かるかと思います。

早期リリースバージョンが必要、と書かれていますが、現状では拡張機能画面の右上、”デベロッパーモード”のチェックを入れるだけで大丈夫です。

“manifest.json”で、各ファイルの関連付けを行って、HTMLファイルとJavaScriptファイルで動作させるみたいですね。  
 そういえばMovableTypeのバックアップデータもJSON形式のファイルで関連付けを行っていたような気がします。


## パスワード自動生成拡張

![](/content/images/2016/04/image.jpg)

先程のチュートリアルのデータをちょいちょいいじって、こんな感じのものを作りました。

完全に私用です。パスワードを考えるのが面倒な時に使っていたJavaScriptのプログラムをサーバに置いて使っていたのですが、そちらをChrome拡張にしてみました。

パッケージ化をしてみたのですが、自分のPCでは上手くインストールできませんでした。他PCでも同様かもしれませんが、一応置いておきます。

[ダウンロード](http://demo.sus-happy.net/chrome/makepass.crx)


## 参考サイト

- [Chrome Extensions API リファレンス](http://dev.screw-axis.com/doc/chrome_extensions/)
- [Hello There! – Google Chrome Extensions – Google Code](http://code.google.com/chrome/extensions/docs.html)


## 追記 12/03/23

やっぱり”パッケージが無効です。詳細: Could not unzip extension.”とか出てインストールできないですね。

うーん…。もう少し調べてみます。


Google拡張機能の作り方を調べるついでにパスワードを自動生成する拡張機能を作ってみた


MySQLのクエリを組み立てている時に、やりたかった事を実現するために、ユーザ定義変数を利用したので、また使うときに忘れていても良いようにメモしておきます。


## ユーザ定義変数の記述方法

ユーザ定義変数の記述方法は、こんな感じ。

```sql
SET @foo:="bar";
# SETの時は @foo="bar"; でもOK
```

一度定義しておくと、その接続の間利用することが出来ます。

```sql
SELECT * FROM `hoge` WHERE `fuga` = @foo;
```


## ユーザ定義変数を使って行番号を追加する

簡単な例として、変数を使って行番号のカラムを追加してみます。

```sql
SET @row:=0;
SELECT
  *,
  ( @row:=@row+1 ) AS `row`
FROM
  `hoge`
WHERE
  `foo` = 'bar';
```

ただ、この書き方だと、クエリが2つになってしまうのが少し気になりますね。


## SELECT文内でユーザ定義変数を定義する

やはりクエリを1つにしたかったので、調べてみたところ[こんな方法](http://m97087yh.seesaa.net/article/109049904.html)がありました。

上記の例で参考サイトの方法を利用すると、こんな感じ。

```sql
SELECT
  *,
  ( @row:=@row+1 ) AS `row`
FROM
  ( SELECT @row:=0 ) AS `dummy`,
  `hoge`
WHERE
  `foo` = 'bar';
```

これなら一回の呼び出しで行けるのでスッキリしますね。  
 ただし、参考サイトにも書かれているように、ユーザ定義変数をorder byする場合に意図した結果にならない可能性があるので注意してください。


## やりたかったこと

最後に応用例として、自分がやりたかった事をメモしておきます。

<table><thead><tr><th>カラム名</th><th>データ型</th><th>備考</th></tr></thead><tbody><tr><td>entry_id</td><td>int</td><td>auto_increment</td></tr><tr><td>date</td><td>datetime</td><td></td></tr><tr><td>flag</td><td>tinyint</td><td>0 or 1</td></tr><tr><td colspan="3">その他色々</td></tr></tbody></table>こんな感じのテーブルがあった時に、下記条件で引っ張り出そうとしました。

- 日付降順
- 5件取得
- flagが0
- flagが1の場合、最新のモノから3件分は除外

上3つは問題ありませんが、最後の一つを実現するためにユーザ定義変数を使っています。  
 実装したクエリ文はこんな感じ。

```sql
SELECT
  *
FROM
  `entry` AS `a`
    INNER JOIN (
      SELECT
        `entry_id`,
        CASE `flag`
          WHEN 1 THEN @flag_num:=@flag_num+1
          ELSE -1
        END `flag_num`
      FROM
        ( SELECT @flag_num:=0 ) AS `dummy`,
        `entry`
      ORDER BY
        `date` DESC
    ) AS `unite` USING( `entry_id` )
WHERE
  `flag_num` > 3 AND `flag_num` < 0
ORDER BY
  `date` DESC
LIMIT
  0,5
```

サブクエリ上でflagが0の時は-1、flagが1の時は該当した行数のカラムを追加し、Where句で判別しています。

このくらいだったら単純に8件取得して、PHP側で取捨選択してもよかったかもしれませんね…。


## 参考サイト

- [MySQLで行番号: Ma note](http://m97087yh.seesaa.net/article/109049904.html)

MySQLのユーザ定義変数を使って色々やってみた


今後様々なデバイスが発表されて、様々な解像度のディスプレイで表示されることを考えると、ビットマップ画像での対応に限界があると感じたので、[SVG](http://www.w3.org/Graphics/SVG/)もちょっと調べてみました。

ついでにこのブログのロゴをSVGで描いてみました。SVGが対応しているブラウザであれば、SVGで表示しているはずです。


## SVGの表示の仕方

SVGの表示のさせ方には幾つか方法があります。

1. objectタグ内のparamタグで指定する
2. objectタグのdata属性で指定する
3. imgタグで表示する
4. HTML内に直接記述する
5. CSSで背景画像に指定する

の辺りでしょうか？  
 これら＋[JavaScriptで生成するライブラリ](http://raphaeljs.com/)もあるようですが、今回はリンクのみの紹介としておきます。

このサイトで採用しているのは、振り分けが楽そうだったのでCSSで背景画像にして指定しています。  
 とはいってもあんまり表示確認していません。（Chrome17、Firefox10、IE9は確認できてます。


## .htaccessの設定

実は先程の方法だけではクライアント側が対応していても、サーバ側がSVGを認識していないことがあると表示されません。

そこで、拡張子が「svg」「svgz」の場合はSVGである事を認識させるため、.htaccessか、Apacheの設定で以下の記述をします。

```
AddType image/svg+xml .svg
AddType image/svg+xml .svgz
```


## SVGのコード

そんなに長いコードにならなかったので、ロゴのコードを全文貼っておきます。

```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="110px" height="20px" viewBox="0 0 110 20">
	<polygon points="0,15 10,15 10,0 25,0 25,5 15,5 15,20 0,20" stroke="none" fill="black" />
	<polygon points="20,6 25,6 25,15 30,15 30,0 35,0 35,20 20,20" stroke="none" fill="black" />
	<polygon points="36,15 40,15 40,0 55,0 55,5 45,5 45,20 36,20" stroke="none" fill="black" />
	<polygon points="50,6 55,6 55,10 60,10 60,0 65,0 65,20 60,20 60,15 55,15 55,20 50,20" stroke="none" fill="black" />
	<rect x="66" y="0" width="4" height="5" style="fill:black;" />
	<rect x="66" y="10" width="4" height="10" style="fill:black;" />
	<rect x="75" y="0" width="5" height="9" style="fill:black;" />
	<rect x="71" y="10" width="9" height="5" style="fill:black;" />
	<polygon points="75,16 81,16 81,15 90,15 90,20 75,20" stroke="none" fill="black" />
	<polygon points="85,0 100,0 100,20 91,20 91,15 95,15 95,5 90,5 90,14 85,14" stroke="none" fill="black" />
	<rect x="101" y="0" width="9" height="5" style="fill:black;" />
	<polygon points="101,15 105,15 105,10 110,10 110,20 101,20" stroke="none" fill="black" />
</svg>
```


## 参考サイト

- [object 要素 + param 要素による SVG の埋め込み (1)](http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/bouhoumen_svg/object_param_1.html)
- [特集：スタートアップ SVG｜gihyo.jp … 技術評論社](http://gihyo.jp/dev/feature/01/svg)
- [SVG + VMLのJavaScriptグラフィックスライブラリ「Raphaël」 – MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ](http://www.moongift.jp/2009/09/raphael/)

ベクター形式でWebページ上に表示できるSVGでロゴを描いてみた


モリサワのWebフォントのサービス[TypeSquare](http://typesquare.com/)がお試しキャンペーンを開始した、との事だったので、試してみました。

タイトルや見出しが「黎ミンY40」になっているはずです。


## サービスの登録

TypeSquareのサイトの右上のボタンから、ご利用申込みを行い、必要情報を入力します。

登録が完了しましたらログインを行い、「サイト登録・PV数レポート」から読み込みたいサイトを登録します。


## サイト側の設定

マイページ内の「導入方法」にスクリプトのタグが用意されているので、そちらをheadタグ内にコピペします。

後はフォントを反映させたい箇所にCSSで指定します。

今回このブログで指定した内容はこんな感じ。

```css
.hoge {
	font-family: "黎ミンY40 B";
}
```

この辺りは[Google Font API](http://blog.sus-happy.net/google-font-api/)の使い方と殆ど変わりませんね。


## その他

こういった和文のWebフォントのサービスが幾つか始まっていますが、まだまだ気になる所はあります。

例えばページ表示直後は通常のフォントで、一瞬消えてからWebフォントに切り替わる状態だったりとか、OSによって見え方がまだまだ違っていたり。

サイト全体を適用させる、というのはもうちょっと先の話かもしれないですね。


## 参考サイト

- [モリサワ新サービスType Squareを試してみました！ | ウェブ制作会社　株式会社フルブライト |Froubright Inc](http://www.froubright.co.jp/2012/02/22/%E3%83%A2%E3%83%AA%E3%82%B5%E3%83%AF%E6%96%B0%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9type-square%E3%82%92%E8%A9%A6%E3%81%97%E3%81%A6%E3%81%BF%E3%81%BE%E3%81%97%E3%81%9F%EF%BC%81/)
- [モリサワTypeSquareを比較してみる](http://wakufactory.jp/densho/TypeSquare/hikaku.html)


モリサワのTypeSquareを試してみた


Ajaxを利用しつつ、戻る・進むリンクが効くような作りで、Twitterと同じようにHashchangeイベントを使ったことがあったのですが、HTML5ならpushstateを覚えなくては―と思っていた頃に[この記事](http://d.hatena.ne.jp/punitan/20110404/1301895279)を読んでjquery-pjaxの存在を知りました。

また、ちょっとしたコードをメモして置く場所が欲しかったので、WordPressと組み合わせてスニペット集を作ってみました。

こんな感じです » ~~Snippets | SUSH-i LOG~~

まだまだ分類分けが中途半端だったり、導線が不十分だったり、ブラウザの進む・戻るを使った時に少し不具合がありますが、何とか形になったかな？と思っています。


## クライアントサイド

ソースファイルは、[defunkt/jquery-pjax – GitHub](https://github.com/defunkt/jquery-pjax)からダウンロードできます。

クライアントサイドの記述方法は参考リンク先でもご紹介されていますが、こんな感じ。

```javascript
$('.pjax-cont').pjax('#wrap', { complete: function() {
	prettyPrint();
	gapi.plusone.go();
	FB.init({appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true});
} });
```

で書いていたのですが、`pjax:end`にbindすると、ブラウザの進む・戻るの際にも読み込み完了時にフックされるので以下の書き方の方が良いかと思います。

```javascript
$('.pjax-cont').pjax('#wrap');
$("#wrap").bind("pjax:end", function() {
	prettyPrint();
	gapi.plusone.go();
	FB.init({appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true});
} );
```

また、今回スニペット集を作る時に、ソーシャルボタンや、google-code-prettifyを使っていたので、読み込み完了時に各初期化関数を呼んでいます。


## サーバサイド

今度はWordPressのテーマファイルに追記していきます。

jquery-pjaxで呼ばれると、HTTPヘッダに`X-PJAX: true`が追加されるので、そちらを利用します。

```javascript
$header = getallheaders();
if(! $header["X-PJAX"] )
	get_header("snippets");
```

こんな感じで、HTTPヘッダにX-PJAXが存在しない時だけヘッダやフッタを呼び出しているようにしています。

ただし、このままだと`wp_head`や`wp_footer`が呼ばれないような作りのテンプレートが通常だと思うので、必要とあらば適宜呼び出すようにしてください。

pushstateが使えないブラウザでは通常のリンクとして、使うことのできるモダンブラウザはAjaxを利用するように自動的に判別してくれるのも嬉しいですね。


## 参考

- [pjax こそが pushState + Ajax の本命 – punitan (a.k.a. punytan) のメモ](http://d.hatena.ne.jp/punitan/20110404/1301895279)


## 追記 12/02/21

jquery-pjaxの扱い方が微妙だったので修正しました。

`complete`を利用するより、`pjax:end`を使った方がブラウザの進む・戻るにも対応しているのでそちらの追記をしています。

その代わりに今度はTweetボタンとはてブボタンがおかしくなってしまいました･･･。調査します･･･。


jquery-pjax + WordPressでスニペット集を作ってみた


[前回の設定](http://blog.sus-happy.net/nginx-php/)ではPATH_INFOが取得できず、404になってしまっていたので、修正を行いました。

その他、`DOCUMENT_ROOT`の値も変だったりしたので色々と見直しをしています。

正規表現を使って、「`hoge.php/fuga`」の様なURLが呼び出されたとき、スラッシュの前と後とを切り分けて、`SCRIPT_NAME`と、`PATH_INFO`それぞれの値に割り当てています。

```
location ~ \.php($|/) {
	set $script $uri;
	set $path_info "";
	if ($uri ~ "^(.+\.php)(/.+)") {
		set $script $1;
		set $path_info $2;
	}
	fastcgi_pass    127.0.0.1:9000;
	include         fastcgi_params;
	fastcgi_index   index.php;
	fastcgi_param   SCRIPT_FILENAME    /path/to/documentroot$fastcgi_script_name;
	fastcgi_param   DOCUMENT_ROOT   /path/to/documentroot;
	fastcgi_param   PATH_INFO       $path_info;
	fastcgi_param   SCRIPT_NAME     $script;
	fastcgi_intercept_errors on;
}
```

`DOCUMENT_ROOT`や`SCRIPT_NAME`を指定しても中々上手く設定されない！、と思っていたら、「`include fastcgi_params`」を「`fastcgi_param～`」より下に記述していたので上書きされている事に気づきました。
 （このことに気づくのに地味に時間をかけてしまった･･･。


nginx+php-fpmでPATH_INFOを取得してみた


最近何度となく名前を見かけるnginxが気になったので、CentOS+nginx+PHPの環境を作ってみました。

ほぼ[参考サイト](http://www.1x1.jp/blog/2011/05/yum_install_nginx_php-fpm.html)の環境そのままですが、WordPressとCakePHPと振り分けているわけではないので、そこだけ単純な設定にしています。

具体的な相違点については、以下の通りです。


## /etc/nginx/nginx.conf

Cake PHPを使っているわけではないので、SCRIPT_FILENAMEの指定や、WordPressとの振り分けは行わないので、location /blogの類がありません。

```
location ~ \.php$ {
    fastcgi_pass    127.0.0.1:9000;
    fastcgi_index   index.php;
    fastcgi_param   SCRIPT_FILENAME    /path/to/documentroot/$fastcgi_script_name;
    fastcgi_intercept_errors on;
    include         fastcgi_params;
}
```

何となくApacheに比べて設定ファイルがすっきりしているので見やすい気がします。

この環境でPHPのフレームワークを組んでみようかと思っているのですが、軌道に乗れば何かしら作ってみたいなーなんて思っています。


## 参考

- [nginx+php-fpmをyumでインストールして、WordPress/CakePHPを動かす設定 – Shin x blog](http://www.1x1.jp/blog/2011/05/yum_install_nginx_php-fpm.html)

CentOS+nginx+PHPの環境をたててみた


バラバラのJavaScriptいっぱい読み込むときに、最近のモダンブラウザは「async」属性を使えばバックグラウンドで読んでくれるそうなのですが、そうでない環境では非同期通信を使って読むと早くなる、とかいう記事を見かけたことがあったので作ってみました。


## デモ

まずは、通常の呼び出し、defer属性、async属性、非同期ローダーを使った呼び出しのそれぞれのデモを置いておきます。
 初めにjqueryと、ダミーのテキストをコメントアウトして無理やりファイルサイズを大きくした10個のJSファイルを呼び出しています。

※同じJavaScriptを呼び出しているので、キャッシュを削除してから次のデモを見ると比較しやすいと思います。

- [デモ（何もなしなHTML記述）](http://demo.sus-happy.net/javascript/prloader/normal.html)
- [デモ（deferなHTML記述）](http://demo.sus-happy.net/javascript/prloader/defer.html)
- [デモ（asyncなHTML記述）](http://demo.sus-happy.net/javascript/prloader/async.html)
- [デモ（非同期ローダーを利用）](http://demo.sus-happy.net/javascript/prloader/)

それぞれ特徴があって面白い動きをしますね。

async属性を利用した場合は、順番が読み込まれた順になるのが気に食わないのですが、JavaScriptの作り自体の問題な気がします…精進します。

続きで実装方法と、詰まったところをだらだらと流しておきます。


## 非同期通信

XMLHttpRequestを利用して非同期通信をしています。そのためローカル環境での実行が出来ないのがデメリットです。


## 実行処理

[こちらのページ](http://fdays.blogspot.com/2010/05/javascript-script.html)を参考に読み込み完了後、実行する際はinnerHTMLで実行しようとしたのですが、Mac Safari4でエラーが発生しました。
 失敗したときのコードはこんな感じ。

```javascript
var s = document.createElement('script');
s.type = 'text/javascript';
s.charset = 'utf-8';
s.innerHTML = scr;
s.setAttribute('defer', 'defer');
var cs = document.getElementsByTagName('script')[0];
cs.parentNode.insertBefore(s, cs);
```

原因は恐らくJS内の不等号や、HTMLの記述で、HTMLデータと誤認識したのかな？と思っています。

そこで、HTMLデータと認識させない様にcreateTextNodeを使ってscriptタグに挿入しています。
 成功したときのコードはこんな感じ。

```javascript
var s = document.createElement('script');
s.type = 'text/javascript';
s.charset = 'utf-8';
s.appendChild(document.createTextNode(scr));
s.setAttribute('defer', 'defer');
var cs = document.getElementsByTagName('script')[0];
cs.parentNode.insertBefore(s, cs);
```


## IEの場合

IE6～8では上記の読み込み方法では実行されず、IE9では順番がバラバラになってしまいましたので、[こちらの方法](http://d.hatena.ne.jp/shogo4405/20061207/1165479339)を参考に下記の通りに読み込んでいます。

```javascript
var s = document.createElement("span");
s.innerHTML = "&nbsp;<script defer='defer' type='text/javascript'>"+scr+"</script>";
document.body.appendChild(s);
```

ただし、 を頭に配置しているので、空白が表示されてしまいます。


## IEの判別

IE以外は最初の方法で実行させたいので、IEの判別をIEのみ実装されている「document.uniqueID」で振り分けています。

```javascript
if( document.uniqueID ) {
	/* IE */
} else {
	/* IE以外 */
}
```


## ソースコード

GitHubにアップしましたので、下記リンクよりダウンロード出来ます。

[ダウンロード（GitHub）](https://github.com/sushat4692/parallel-loader.js)

ただ、あまり検証はしていないので業務に利用するのはお勧めしません。


## 参考

- [floatingdays: JavaScriptによって動的に script要素を追加する場合のブラウザごとの挙動の違い](http://fdays.blogspot.com/2010/05/javascript-script.html)
- [innerHTMLでscriptする – Thousand Years](http://d.hatena.ne.jp/shogo4405/20061207/1165479339)


## 追記 2012/01/30

「実行処理」内のソースで記述を間違えておりました。申し訳ありません。
 “currentscript” -> “is”

また、「is」という変数名もなんだか怪しい気がする（予約語になりそう）ので、「cs」に変更しました。


JavaScript非同期ローダーを試しに作ってみた


たまに投稿してから何日経ちました、と表示してもらえるブログを見かけることがあったので、作ってみました。

↑のタイトルの下に出ている表示がそうです。

[ダウンロード（GitHub）](https://github.com/sushat4692/Elapsed-Days)

いつもの如くとりあえずダウンロード先だけ･･･ちなみに表示のさせ方は、表示させたい箇所に、

```php
<?php the_elapsedDays() ?>
```

を記述します。投稿IDを利用しているのでループ中のみの表示です。


## 追記 2012年1月23日

何だか上手く動いていないですね･･･。修正してきます。


## さらに追記 2012年1月23日

WordPressの仕様でdate()とtime()が強制的にUTCになってしまうのが原因でした。

参考：[WordPress利用のphpでdateのTimezoneが強制UTCになっちゃう件 | public class Everyday extends Image](http://emylo0.com/wordpress%E5%88%A9%E7%94%A8%E3%81%AEphp%E3%81%A7date%E3%81%AEtimezone%E3%81%8C%E5%BC%B7%E5%88%B6utc%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%A1%E3%82%83%E3%81%86%E4%BB%B6/)

date_i18n()を利用すればよいとの事なので、修正してアップしてあります。

投稿してから何日経ったのか表示するWordPressプラグイン


Facebookページを作成する際に、新規タブページを作る場合、アプリケーションを作成してページに読み込む操作を行うのですが、少し前からページに読み込む際に利用していた「アプリのプロフィールページ」が表示されなくなってしまいました。

調べてみると、[別の方法でタブページを追加する方法](http://dollsent.jp/wordpress/?p=10225)は分かったのですが、毎回URLとAppIDをコピペするのが面倒臭い、という事でブックマークレットを作成しました。

百聞は一見に如かず、という事で最初にブックマークレットを置いておきます。

<a href="javascript:(function(){function e(a,b){return a.getElementsByTagName(b)}function d(a,b){for(i=0;i<a.length;i++){var c=a[i].className.split(' ');for(var d=0;d<c.length;d++){if(c[d]==b){return a[i]}}}return false}var a=document.getElementById('developerAppDashboardContainer');var b=d(e(a,'td'),'contentPane');var c=d(e(b,'div'),'fcb');window.open('http://www.facebook.com/add.php?api_key='+c.innerHTML+'&pages=1')})()">このリンクをブックマーク</a>


## 使い方

Facebook Developersのアプリ一覧ページを開き、Facebookページに登録したいアプリをクリックし、右カラムに詳細情報が表示されている状態にします。

その状態でブックマークレットをクリックすると、新しいタブかウィンドウが表示されますので、アプリケーションの追加先を該当のFacebookページを選択、「追加する」ボタンをクリックすると完了です。


## 動作確認環境

- Google Chrome 16
- Firefox 3.6、8、9
- Internet Explorer 9
- Opera 11
- Win Safari 5

WindowsのSafariやChromeが動いているので多分MacSafariも動くんじゃないのかな？と思います。

ただ、現状プロフィールページが無くなってしまっただけで、別の方法が生まれたり、DOMの構造が変わったりしてしまうとこのブックマークレットも使えなくなってしまうので、一時的な利用になりそうな気がします。


## 参考サイト

- [Facebookページ作成中に「アプリのプロフィールページを見る」が表示されない時の対処法 – バス釣りブログ バス釣りとWordPress](http://dollsent.jp/wordpress/?p=10225)

Facebookページのタブ追加ブックマークレット



スマートフォン、特にiPhoneでGoogleマップにリンクを貼ると、アプリが立ち上がってしまうため、ブラウザに戻ってこさせる一手間がかかってしまいます。

そこで、同ページでGoogleマップを表示させるためのライブラリを組んでみました。


## 特徴

Googleマップ側の仕様？なのか、マップをページ上部に表示しないと拡大時の中心点がずれてしまうので、自動的にページ上部へ移動し、Googleマップを下からニュッとアニメーションする動きを加えています。


## 動作確認

- iOS 5.0.1
- Android 2.3.3

純正ブラウザで取っています。Androidの場合はほかのブラウザの動作確認も取った方が良いのかな？


## 詳細説明・デモ

[ダウンロード（GitHub）](https://github.com/sushat4692/jquery.SPGMaps.js)




スマホ用の下からニュッとGoogleマップを表示するjQueryライブラリ


スマートフォン用のサイトを作る場合は、[jQuery Mobile](http://jquerymobile.com/)やら、[jQTouch](http://jqtouch.com/)やら、[Sencha Touch](http://www.sencha.com/products/touch/)やら色々ありますが、ちょっとそこまで必要ないときに、スマートフォン特有のイベントをjQueryを使って扱えないか触ってみました。


## スマホ特有のイベント

スマホ特有のイベントは幾つかありますが、今回は特に使われるであろうタッチ、スライド、ピンチイン、ピンチアウトに重点を置いて調べてみました。

上記操作に必要なイベントは以下の通りです。

- touchstart
- touchmove
- touchend
- touchcancel
- gesturestart
- gesturechange
- gestureend

「touch\*\*\*」というイベントが画面に指でタッチした、している時のイベント、「gesture\*\*\*」というイベントが「二本指以上」の操作（ピンチイン、ピンチアウト、回転等）を行っている時のイベント、と考えていただければ良いかと思います。

また、「touch\*\*\*」は一本指だけでなく、二本指以上の操作でも実行されるため、今何本の指が画面上にタッチされているかを確認しながら動作する必要があります。


## イベントの実行される流れ

### 一本指での操作の場合

一本指だけのイベント進行は単純で以下のように進行していきます。

<dl><dt>1.touchstart</dt><dd>指が画面をタッチした時に実行</dd><dt>2.touchmove</dt><dd>タッチした指を画面上で動かした時に実行</dd><dt>3.touchend</dt><dd>画面上から指を離した時に実行</dd></dl>マウスイベントとほとんど変わらないと思います。

### 二本指での操作の場合

二本指が画面上にタッチされた時は少し特殊で、以下のような順番でイベントが進行します。

<dl><dt>1.touchstart</dt><dd>一本目の指が画面をタッチした時に実行</dd><dt>2.gesturestart</dt><dd>二本目の指が画面をタッチした時に実行</dd><dt>3.touchstart</dt><dd>gesturestartの後に実行</dd><dt>4.gesturechange</dt><dd>タッチした指を画面上で動かした時に実行</dd><dt>5.touchmove</dt><dd>gesturechangeの後に実行</dd><dt>6.gestureend</dt><dd>指を一本画面から離した時に実行</dd><dt>7.touchend</dt><dd>gestureendの後に実行</dd><dt>8.touchend</dt><dd>もう一本の指を画面から離した時に実行</dd></dl>何れかの指が画面にタッチした時、離した時に毎回touchイベントが実行されます。  
 また、二本タッチされている時は同時にgestureイベントも実行されるのですが、その際はgestureイベントが優先される様です。


## イベント実行時に得られる値

イベント実行時に得られる値も、「`touch***`」と「`gesture***`」で異なります。

### touchイベント

主に画面を触っている指の数や、位置を取得することが可能です。

```javascript
function touchHandler( event ) {
	// 画面を触っている指の本数だけ配列で渡されます
	var touches = event.touches;
	// 一本目の指の位置取得
	alert( "x = " + touches[0].pageX + " / y = " + touches[0].pageY );
}
```

### gestureイベント

主にピンチインなどの動作によって変化した値を取得することが可能です。

```javascript
function gestureHandler( event ) {
	// ピンチインによる拡大率
	var scale = event.scale;
	// 回転角度
	var rotate = event.rotation;
	alert( "scale = " + scale + " / rotetion = " + rotate );
}
```


## jQueryで利用する際の注意点

jQueryのbindを持ちいてイベントを実行した場合、上記値の読み方が若干変わります。

addEventListenerを用いた方法では以下のように記述しますが。

```javascript
document.getElementsById("touch").addEventListener("touchstart", touchHandler, false);
function touchHandler( event ) {
	alert( event.touches[0].pageX );
}
```

jQueryを用いた場合は、引数にtouchesが与えられておらず、さらに「originalEvent」内から取得する必要があります。  
 上のコードをjQueryで記述すると以下のようになります。

```javascript
$("#touch").bind("touchstart", touchHandler);
function touchHandler( event ) {
	alert( event.originalEvent.touches[0].pageX );
}
```

詳しくは調べていませんが、引数のeventはjQuery内で生成した変数、originalEventがaddEventListenerで渡されている値と同等なのかな？と思っています。

また、touchイベントはiPhone、Andoroidで動作確認できましたが、gestureイベントはAndroidで動作しません。  
 その他動作環境については、[こちらのページにまとめられている](http://www.lukew.com/ff/entry.asp?1071)ようなので、参考にしようかと思います。


## 参考サイト

- [GestureEvent Class Reference](http://developer.apple.com/library/safari/#documentation/UserExperience/Reference/GestureEventClassReference/GestureEvent/GestureEvent.html#//apple_ref/javascript/cl/GestureEvent)
- [iPhone/SafariでjQueryを使ったイベントのバインドにおける注意点 : nogunogu](http://dev.worksap.co.jp/Members/nogunogu/2010/08/17/iphonesafari%E3%81%A7jquery%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%AE%E3%83%90%E3%82%A4%E3%83%B3%E3%83%89%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B%E6%B3%A8%E6%84%8F/)
- [LukeW | Touch Gesture Reference Guide](http://www.lukew.com/ff/entry.asp?1071)

jQueryを使ってスマートフォン用のイベントを扱ってみた



少し前からこのブログの背景画像に写真を使っていたのですが、どうせFlickr使っているのなら自分のブログの背景画像に利用させてもらおうとFlickr APIを使ってみました。

そしてついでに、WordPressを利用しているのならとプラグインにしてみました。

[詳しい内容はGitHubをご参照ください。](https://github.com/sushat4692/Flickr-Random-Get)




Flickr APIを利用してランダムに一枚画像を表示するプラグインを作ってみた


とある案件で円グラフを表示する必要があったので、今の流行からするとHTML5かもしれませんが、Flashで作ることにしました。

と、思ったのですが、矩形や直線・曲線、円は描画したことあったんですが、扇形は経験がなかったのと、計算する手間も惜しかったので調べてみました。


## 早速実装

調べてみると正に求めているクラスが公開されていたのでそちらを利用させていただきました。  
[参考サイト：扇形を描く](http://www.d-project.com/flex/001_DrawPie/)

ただ、参考サイトのデモでは単純な扇形の書き方が無かったので、逆にそれを残しておきます。

```actionscript
var x:uint = 100; var y:uint = 100; var r:uint = 100;
var shape = new Shape();
var g:Graphics = shape.graphics;
g.moveTo(x, y);
g.beginFill(0xff0000, 1);
// GraphicsLib.drawPie(Graphics,X座標,Y座標,半径,開始(rad),終了(rad),中心から描画の有無)
GraphicsLib.drawPie(g, x, y, r, 0, Math.PI, true);
g.endFill();
```

上記のコードで、(100, 100)を中心に半径100pxで下弦の半円が出来るはずです。

適宜、ShapeはSpriteやMovieClipに変更していただき、stage等にaddChildをしてください。

ActionScript3で扇形を描画してみた


javascriptをページ毎に違う変数を渡したいと思ったときに、読み込むscriptタグの前に、グローバル変数で定義する方法が一般的だと思いますが、もうちょっとスマートな方法が無いか探していました。

そこで、Google+1の埋め込みタグを見ていると、以下のようになっているのに気づきました。

```html
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">{lang: 'ja'}</script>
```

ファイルを読み込むscriptタグ内に言語を特定する変数を直接記入しているようで、この方法が良さそうだと思い、同じ方法か分かりませんが自分でも試してみました。


## 自身のscript要素を取得する

最初に、HTMLタグ内に記入したところで、JavaScript上のどの変数にも渡されている訳ではない様なので、自分自身のscriptタグを取得する方法を探しました。

ファイル名をJSファイル内に埋め込んでgetElementsByTagNameで取得したscriptタグ一つ一つと照合していましたが、[とてもシンプルに自分自身が属する script 要素を取得 – IT戦記](http://d.hatena.ne.jp/amachang/20061201/1164986067)という記事を発見したので、こちらを参考にさせていただきました。


## HTMLに記述された情報をJavaScript内で利用できるようにする

そして、scriptタグ内のテキストはinnerHTMLで取得できますので、このデータをevalで取得します。

Google+1の様なJSON形式の場合は、eval内でも括弧で括った方が良いみたいです。


## サンプルコード

まず、以上を踏まえて出来上がったJavaScriptファイルはこんな感じ。

```javascript
var currentScript = (function (e) { if(e.nodeName.toLowerCase() == 'script') return e; return arguments.callee(e.lastChild) })(document);
var data = eval("("+currentScript.innerHTML+")");
```

そして、HTML側で上記JSファイル（get.js）を以下の様に読み込みます。

```html
<script type="text/javascript" src="get.js">{foo:'var'}</script>
```

すると、JavaScript内の変数「data」にfoo:varという値が代入されるはずです。

ページ毎に少しずつ与える値を変える場合や、Google+1のようにAPI的に使う場合に使えそうな気がします。

Google+1風にJavaScriptに渡す変数をページ毎に変更する


jQueryで制作を行っている時に、classやIDを要素に追加する事があるのですが、毎度addClass(“hoge”)や、attr(“id”, “fuga”)の様に指定するのがちょっと面倒だったので、「.hoge」や「#fuga」で自動的に判別して指定するプラグインを作ってみました。

前述したとおり、追加したい要素に「.」や「#」を含む文字列を渡した時に、自動判別して追加します。
 指定方法はこんな感じ。

```javascript
$("foo").addIC(".var");
```

[ダウンロード（Github）](https://github.com/sushat4692/jquery.addIC.js)

しかしこのプラグインの需要なんてあるのだろうか。


Page 4