XRAY ブックマークレットでサイト解析

http://westciv.com/xray/
XRAY bookmarklet をツールーバーに入れておくとサイト解析が便利。
起動して画面をクリックするとその DOM 情報を教えてくれる。

サイトを見ていて、どうなってんのかと思ったら XRAY を起動してクリックする。
一種の職業病だけど・・・

XRAY
XRAY

WebKit Nightly Builds, もう一つのSafari

SafariがオープンソースのWebkitをレンダリングエンジンにしていることは良く知られている。
webkit.org が提供する WebKit Nightly Builds を使用するととっても便利になる。

Nightly Builds なのでバグがある可能性が高くサイトによっては見れない可能性もある。
ほぼ毎日新しいbuildが出るのでダウンロードして差替える必要がある。

そんな不便さ差し引いても便利な「開発 -> Web インスペクタ」は使わなきゃ損!
Firefox + Firebug と同じぐらいサイトを解析できる。

Firefox アドオン Ubiquity を使う

Firefox アドオン Ubiquity
Labs/Ubiquity/Ubiquity 0.1.2 User Tutorial

Firefox上にコマンド画面を登場させ、検索・翻訳・地図・メール… などなどをシームレスに実行できるスグレもの。
コマンドを追加し機能を拡張することもできる。

ただコマンドは何でもできるので信用できるサイトからだけ追加するようにとのこと。
「危険」なコマンドもあるかもしれないらしい。

インストールは上記リンクの Starting Ubiquity にインストールリンクがある。
本当に何でもできるのでインストールは慎重に検討してください。

インストール時に最初に起動ショートカットをアドオンの設定画面で設定。
他のユーティリティと重複しない[shift + space]にした。
short cut

Webページの翻訳
1.文章を選択
文章を選択
2. Ubiquityを起動
3.コマンド tra to japan
翻訳

Mac ユーザーはGrowl というシステム拡張機能をインストールしてネ、だってさ。

WordPress プラグイン Event Calendar 3 の言語ファイルを作る

イベントを管理しカレンダーに表示してくれるプラグイン Event Calendar 3 の言語ファイルを作った。

Event Calendar 3 は投稿にイベント日時を追加して管理するプラグイン。
投稿が無ければイベント日時を登録できない。
ウイジェットも付属する。

イベントだけのカレンダーを表示したり iCal ようのファイルがダウンロードできたり・・・
運用を工夫すると休業日の表示ができたりすると思う。

あるサイトの開発に使用した。
クライアントオーダーでプラグインの改造を余儀なくされたが、基本的な機能には多いに助けられた。

日本語化のために言語ファイルを作成した。
作成時点のバージョンは3.1.2、現在の3.1.4でも問題ないようだ。
せっかくなのでダウンロードできるようにしてみた。

作成には Poedit を使用。
圧縮には MacZip4Win を使用。

リンク先からダウンロードし解凍後、フォルダ内のファイルを Event Calendar 3 プラグインフォルダ内 gettext フォルダへアップロード。
ファイル名を ec3-ja.* へ変更。

ダウンロード

CSS, display:inline-block を使う

CSS display : inline-block
ブロック要素だけどインライン要素のように振る舞ってくれる。
width, height…などブロック要素にしか使えないプロパティを設定できて便利。

コリャご機嫌と使っていたら意外な落とし穴・・・
“CSS, display:inline-block を使う” の続きを読む

過去の記事への矢印は、右向き or 左向き?

以前の記事
過去の記事
previous
older
現在表示されているコンテンツから、時系列で過去のコンテンツへのリンクを作るための言葉はたくさんあります。
アイコン、ピクトグラムとして「矢印」のようなグラフィックを用いるときに、向きはどっちにする?
というのが今回の疑問。

私は絶対「左向き
<< previous

ブラウザの戻るボタンも「左向き」なのでこれで絶対と思っていたら・・・
「右向き」サイトもかなりの数になるみたい。

今回使用しているテーマファイル「iNove」も実は右向きだった。
どうしても気持ち悪いので左向きに変更した。

ビデオの「早送り」は「右向き」、「巻き戻し」は「左向き」・・・左向きが優勢だと思うんだけど、そうでもないのかなぁ。

Google Chrome, Mac & Linux は2009年第一四半期登場?

cnet news
2009-01-12 Why the later launches of Chrome for Mac, Linux?

Mac版とLinux版のGoogle製ブラウザChromeは2009年第一四半期に登場する予定だとプロダクトマネジャーが答えている。
プロダクトマネージャーの Brian Rakowski さんは「やるべきことは残っている」と言ってるが、ページのレンダリングは良好らしい。

That (Mac development) team now is able to render most Web pages pretty well. But in terms of the user experience, it’s very basic. We have not spent any time building out features. We’re still iterating on making it stable and getting the architecture right.

新しいブラウザが本格的に普及するかもしれない。
2009年も悩みの多い年になるかも。。。

MySQL SET NAMES でSQLインジェクションに脆弱

セキュリティに関することで参考にしている大垣 靖男さんのブログの少し古いエントリーの紹介です。

2007-08-22 SET NAMESは禁止

MySQLには文字エンコーディングを変更する「SET NAMES」SQL文が用意されています。(PostgreSQLも同様のSQL文、SET CLIENT_ENCODINGがあります)この機能はSQLコンソールからは使ってよい機能ですが、アプリケーションからは使ってはならない機能です。SQLインジェクションに脆弱になる場合があります。

少々衝撃でした。
文字エンコーディング変更に SET NAMES を使うのは良く例示されている解決策だったからです。
今でも EUC 運用の MySQL は数多く存在し UTF-8 でアプリケーションを構築したいことは良くあります。

PHP では

mysql_set_charset('utf8');

が使えるなら使った方が良いことになるのかと、エントリーを見て思いました。

mysql_set_charset は PHP 5.0.7 以降で使用できます。

PHP のドキュメントにもちゃんと注意として書かれていました。
http://jp.php.net/manual/ja/function.mysql-set-charset.php

注意: 文字セットを変更するにはこの方法を使うことを推奨します。 mysql_query() で SET NAMES .. を実行する方法はお勧めできません。

心に刻んでおかなければ、と思った重要な記事の1つです。

WordPress cforms プラグインってイケテルの?

カスタムフォームを作れる cforms が人気のプラグインらしい。

確かにDBへデータを保存したりなかなか高機能。
日本語言語ファイルもあるのでかなり便利。

ただ日本語環境だといくつか問題がある。

メールSubjectはかなりの確率で文字化けを起こす。
コードが日本語Subjectを考慮していないのが原因。

送信者名は “ブログタイトル” になるようにプログラムされているが「ブログタイトル」に日本語を使うと文字化けを起こす。

メール本文は WordPress の charset になるので UTF-8 になる。
今はUTF-8でメールを送信してもほとんどのメーラーは問題なく受信できるので、まっイイカとあきらめる。

メールSubjectの文字化けはコードを修正しなければならない。

// lib_aux.php
function encode_header ($str) {
	$x = preg_match_all('/[\000-\010\013\014\016-\037\177-\377]/', $str, $matches);
 
	if ($x == 0)
		return ($str);
	return mb_encode_mimeheader($str,'ISO-2022-JP');
}

関数 encode_header を修正した。
マルチバイトに対応していない部分を全て削除した。
セキュリティ面にどんな影響が出るのか読めない。

送信者の文字化けは

$frommail = '"'.get_option('blogname').'" <wordpress@' . preg_replace('#^www\.#', '', strtolower($_SERVER['SERVER_NAME'])) . '>';

を下記のように修正した。

$frommail = '"'.mb_encode_mimeheader(get_option('blogname'),'ISO-2022-JP').'" <wordpress@' . preg_replace('#^www\.#', '', strtolower($_SERVER['SERVER_NAME'])) . '>';

ただ、このコードあっちこっちにハードコードされているのでいちいち修正するのが面倒くさい。
せめて関数化してくれていると良かったのに、と思ったりする。

メール本文の文字コード指定もあっちこっちにハードコードされてたりして、イタダケナイと思う。

アップデートも頻繁に行われ、Wordpress のバージョンアップにもいち早く対応しているなど、高機能のプラグインをメンテナンスし続けてくれて感謝!
2バイトな(UTFなのでマルチバイトって言った方がよいのかな?)日本語なんて知らない人が作っているからしょうがないよネな、良くある話。

WordPress the_contentをHookしてwp-hatenaを追加する

wp-hatena は「はてなブックマーク」などに追加するリンクタグを挿入できる。

ただ、テンプレートにタグを打ち込まないといけないのがめんどうだったので functions.php に Hook を作ってみた。

// bookmark icon
function hatena_bookmark_icons(){
	global $wph;
	if(isset($wph)) {
		echo '
 
';
		$wph-&gt;addHatena();
		$wph-&gt;adddelicious();
		$wph-&gt;addLivedoor();
		$wph-&gt;addYahoo();
		$wph-&gt;addFC2();
		$wph-&gt;addNifty();
		$wph-&gt;addPOOKMARK();
		$wph-&gt;addBuzzurl();
		$wph-&gt;addChoix();
		$wph-&gt;addnewsing();
		echo '
 
';
	}
}
add_action('the_content', 'hatena_bookmark');
function hatena_bookmark ($content){
	if ( !is_feed() && function_exists( "hatena_bookmark_icons" ) ) hatena_bookmark_icons();
	return $content;
}

テンプレート the_content(); しているところで投稿データの前に表示される。
Hook って便利だ。

Function Reference/add action

update
Feed にもブックマークアイコンが表示されていたので修正した。