WP-ImaGeoMap 開発日誌 3

November 23, 2009

開発

HTML/CSS, JavaScript, PHP, WordPress, WP-ImaGeoMap, プラグイン

作成中の WordPress 用プラグイン WP-ImaGeoMap の開発日誌。今日は以下の実装を行った。進捗率的には 90% といったところか。

記事のマップ表示を「マップ + 画像情報」にした
記事とエディタの JavaScript の冗長な部分を共通化した
サムネイル画像に縁と影を付けた
JavaScript からの HTML 操作を最適化

最新版のスクリーンショットは以下。

エディタ画面

以下のページを参考に、エディタのサムネイル画像に縁と影を付けてみた。

CSSで画像に影をつける（ドロップシャドウ）: 小粋空間

紹介されている方法では img タグを影となる span や div で包み、img を影の分だけネガティブマージンでずらしている。しかしこの方法だと img をずらした分だけ左上に飛び出し、隣接する要素に覆い被さる。WP-ImaGeoMap の場合、エディタと記事のどちらも img は table に配置している。そのため img を包む td の padding でずれを吸収する事にした。

記事中の表示

エディタを作り込んでいる時、記事中のマップ表示もエディタと同様にマップとマーカーを表示し、選択されたマーカーの画像情報をマップ下に表示するのがよいと思った。この方式の場合、エディタの見た目と記事中のマップ表示が近いので、編集中に完成図を想像し易い。また、表示する画像は常に一つとなるのでレイアウトも単純化される。

表示項目についてはかなり迷ったが、とりあえず画像、タイトル、コメントをメインとして詳細情報は画像のツールチップで表示する事にした。

スクリーンショットのツールチップは OS 標準のものだが、最終的には jQuery プラグインを利用してリッチ化する予定である。

ちなみに img タグのマウスオーバーでツールチップ表示を期待する場合、alt ではなく title 属性にテキストを設定するのが正しいらしい。

img要素でalt属性の内容がポップアップしない | Web標準普及プロジェクト

確かに alt ではブラウザによってはツールチップが表示されない。title 属性なら IE、Firefox、Chrome で表示されることを確認できた。思想としては alt が画像の代替で title が補助的な役割となるそうだけど名前からすると逆な気がして混乱する。

とりあえず大半の実装が完了したので後は仕上げてリリースに向かいたい。以下、今日の実装メモ。

JavaScript へパラメータを渡す

残念ながら JavaScript には、スクリプトそのものに渡されたパラメータを取得する方法は用意されていない。例えば http://***/test.js?param1=hoge;param2=hoge&...etc というようにパラメータを渡してもスクリプト側は「何それおいしいの？」状態である。パラメータなしに動作すべきという意見もあるだろうが、やはり指定できると便利である。というわけで既に誰かがパラメータ解析を実現しているのでは？と思って調べたら、以下のページを見つけた。

外部Javascriptのsrc属性で、URL引数を取得する | CSS-EBLOG

紹介されている方法は JavaScript 側が読み込み元の script タグから自身を検索し、そこからパラメータ解析を行うというもの。ただしスクリプト名のバッティングについては自分で対策しなければならない。

例えば http://hoge/map.js と http://hoge/hige/map.js が読み込まれていると map.js による検索は常に前者がヒットしてしまう。そこで hoge/map.js や hige/map.js のようにディレクトリも含めることで、より正確な検索が行える。

WordPress プラグインのスクリプトから利用する場合、大抵はプラグイン名のディレクトリ以下に格納されているはず。なので、その部分から検索名を指定すると良いと思われる。

WordPress 付属の jQuery を利用する

WordPress には jQuery が付属している。そのためテーマやプラグインが jQuery を使用するなら、自前ではなく WordPress のものを利用する方が好ましい。これをを利用する方法として以下の記事が参考になった。

wp enqueue script｜WordPressでjQueryを使う « きんくまデザイン

記事でも触れているが WordPress の jQuery を使用する場合、略名 $ は公開されていない。例えば $(document).ready() は、jQuery(document).ready() とフルネームで記述する必要がある。$ でもエラーにならないため、これを意識しておかないと思わぬ落とし穴となる。実際、私もこれまで使用していたスクリプトが突然動かなくなり原因調査に手間取った。

WordPress の jQuery をテーマから使用するならテーマの function.php のどこかで以下のような処理を行う。

<?php
if( !is_admin() )
{
	function trimScript( $src )
	{
		return preg_replace( "/(\?|\&|\&(amp|#038);)ver=.*$/i", "", $src );
	}

	function sriptSrcCleanup( $src )
	{
		if( strstr( $src, get_bloginfo('template_url') . '/js/base.js' ) ||
			strstr( $src, get_bloginfo('template_url') . '/js/menu.js' ) )
		{
			return trimScript( $src );
		}

		return $src;
	}

	function addScript()
	{
		wp_enqueue_script( "jquery" );
		wp_enqueue_script( "akabeko_base",       get_bloginfo('template_url') . '/js/base.js', "", false );
		wp_enqueue_script( "akabeko_menu",       get_bloginfo('template_url') . '/js/menu.js', "", false );
		wp_enqueue_script( "akabeko_packed",     get_bloginfo('template_url') . '/js/jquery.curvycorners.packed.js', array( "jquery" ), "1.3.2" );
		wp_enqueue_script( "akabeko_balloon.js", get_bloginfo('template_url') . '/js/balloon.js', array( "jquery" ), "1.3.2" );

		add_filter( "script_loader_src", "sriptSrcCleanup" );
	}

	add_action("wp_print_scripts", "addScript");
}
?>

このスクリプトはこのブログのテーマの function.php から抜粋している。is_admin を判定する事により管理画面を除外して、それ以外の画面のみ処理されるようにしている。

30 行目で WordPress がスクリプトを読み込む時のハンドラを登録。このハンドラで wp_enqueue_script を呼び出す事で、記事中のヘッダ部分にスクリプトが読み込まれる。この関数の第一引数は読み込むスクリプトの識別子となる。

wp_enqueue_script を呼び出す前に wp_register_script で識別子を登録しておくと、それを指定するだけで読み込める。jQuery は WordPress 本体が jquery という名の識別子を登録してくれるので、これを指定すれば良い。

ただしこの方法でスクリプトを登録すると、スクリプトの URL の末尾に ?ver=1.3.2 のような jQuery のバージョンを示すパラメータが追加される。これは今回の記事で紹介した解析処理や Google Maps のような外部サービスのスクリプトを利用するうえで悪影響が出る可能性がある。

そこで 27 行目のようにスクリプト出力時にフィルターを仕掛け、余計な文字列を除去するようにしている。このフィルターはスクリプト毎に呼び出されるので、パラメータを除去したいスクリプトの時だけ処理を行う必要がある。

なにを行っているかが自明でパラメータによる影響のないが確実なら除去しなくてもよい。今回の例で除去しているスクリプトは本ブログのテーマのベースとなった iNove に付属していたもので、中身を解析する気はないから念のために除去対象とした。

アカベコマイリ

HEAR NOTHING SEE NOTHING SAY NOTHING

WP-ImaGeoMap 開発日誌 3

JavaScript へパラメータを渡す

WordPress 付属の jQuery を利用する