insertyahoomap (Yahoo!Japan地図挿入)

初出日: 2009年4月25日 | 最終更新日: 2009年6月3日
投稿者: たかひろ | パーマリンク

概要

insertyahoomap は、 WordPress の投稿時にYahoo!Japanの地図を挿入するプラグインです。地図の場所選択からカテゴリーの追加、アイコンの追加が可能となっています。挿入はWordPressのショートコードとして埋め込みを行います、すべての情報を投稿記事に埋め込む方法とほとんどの情報をカスタムフィールドとして追加する事も可能です。

入手方法/ダウンロード

insertyahoomap151.zip

対応環境/テスト環境

WordPressについて

WordPress 2.7.1 にて動作確認を行っています。2.7.x であれば使用出来ると思われますが 2.6 以前では確認を取っていませんので使用出来るか分かりません。自己責任にてご利用をお願いします。

PHPについて

PHP 5.2.9 にて動作確認を行っています。5.2.x であれば使用出来ると思われますが 5.1 以前では確認を取っていませんので使用出来るか分かりません。自己責任にてご利用をお願いします。

ブラウザについて

FireFox にて動作確認を行っています。その他のブラウザも表示の確認程度は行っていますがブラウザによっては動作しない恐れもあります。見た目が崩れている等ついては各 css ファイルの微調整をお願いします。

・FireFox 3.0.9 css は /css/insertyahoomapFirefox.css を使用
・InternetExplorer 7 css は /css/insertyahoomapMSIE.css を使用
・Opera 9.64 css は /css/insertyahoomapOpera.css を使用
・Safari 3.2.2 css は /css/insertyahoomapOpera.css を使用

上記バージョンについては開発当初のバージョンとなります

既知の問題について

・共通 :地図選択時に世界測地系(WGS84)使用時かつポリラインが表示される場合に各座標が若干ずれて表示される。
・共通 :地図選択時にアイコンの噴出しの背景が綺麗に表示されない。
・InternetExplorer:絵文字ボタン押下時にフレーム表示まで若干時間が掛かる。
・InternetExplorer:地図選択時に入力域の幅以上の入力を行うとレイアウトが崩れる。
・InternetExplorer:地図作成ボタン押下時に記事が修正中の場合「このまま・・・」のメッセージが表示される。

設置方法

1.プラグインをダウンロードして展開し、insertyahoomap フォルダごと WordPress のプラグインディレクトリー (wp-content/plugins/) に転送します。
2.insertyahoomap プラグインを有効にします。

設定方法

最低限アプリケーションIDの設定が必要となります、Yahoo!Japanデベロッパーネットワークにて取得して頂いて設定ください。・アプリケーションID(必須)について

Yahoo!Japanデベロッパーネットワークにて取得したアプリケーションIDを設定します。 ※詳しくはリンク先を確認してください。

選択マップ幅について

・Yahoo!地図を挿入する際に選択画面に表示される地図の横幅を設定します。(単位:px) ※単位は入力しないでください。
・省略時は 640px となります。

選択マップ高さについて

・Yahoo!地図を挿入する際に選択画面に表示される地図の縦幅を設定します。(単位:px) ※単位は入力しないでください。
・省略時は 450px となります。

初期表示マップ幅について

・地図選択画面の地図横幅に初期表示される横幅を設定します。(単位:px) ※単位は入力しないでください。
・省略時は 400px となります。
・実際には投稿記事を見るときに表示されるYahoo!地図の横幅となります。
・地図選択時にも変更が可能です。
・選択マップ幅の方が狭い場合は選択マップ幅が使用されます。

初期表示マップ高さについて

・地図選択画面の地図縦幅に初期表示される縦幅を設定します。(単位:px) ※単位は入力しないでください。
・実際には投稿記事を見るときに表示されるYahoo!地図の縦幅となります。
・省略時は 300px となります。
・地図選択時にも変更が可能です。
・選択マップ高さの方が狭い場合は選択マップ高さが使用されます。

初期表示マップ緯度経度について

・地図選択画面の初期表示される地図の緯度経度を設定します。 ※設定方法は下記の赤字参照
・省略時は六本木ヒルズ [35.67832667,139.77044378] となります。※表示座標は日本測地系(TOKYO97)、世界測地系(WGS84)の場合は若干位置がずれます

初期表示マップ縮尺階層について

・地図選択画面の初期表示される地図の縮尺階層を設定します。 ※設定方法は下記の赤字参照
・省略時は [3] となります。 ※設定可能範囲はYahoo!Japanデベロッパーネットワークを参照

測地系について

・地図選択画面の測地系を設定します。
・省略時は [日本測地系(TOKYO97)] となります。

初期表示カテゴリについて

・地図選択画面の初期表示されるカテゴリを設定します。※通常は下記の手順で設定してください
1.設定画面ボタンを押下する。
2.使用方法のカテゴリー情報を参照して設定をする。
3.決定ボタンを押下する。※変更を取消す場合は取消ボタンを押下してください
※データは「カテゴリID」「画像url」「画像スタイル幅」「画像スタイル高さ」「画像スタイル基準横」「画像スタイル基準縦」の順でescapeされたデータがカンマ区切り設定されています、カテゴリを複数登録している場合は続けて設定されています
※設定画面で決定しただけでは保存されません必ず全体設定画面に戻って保存してください

使用方法

投稿編集時、ページ編集時のメディアボタンに insertyahoomapボタン が表示されますのでマウスでクリックする事により地図の選択ウィンドウが表示されますので挿入したい場所を挿入して下さい。画面の説明

・地図:内容の説明&操作方法等は Yahoo!Japanデベロッパーネットワーク を参照してください。・基本情報

・表示/非表示ボタン:情報を一時的に非表示または非表示にした情報を表示させる。
・地図横幅:実際の投稿記事を見るときに表示される地図の横幅となります。

・変更する場合は数値を直接変更してください。
・選択のために表示されている地図の横幅を超えることは出来ません、超えた設定をした場合は地図の横幅が使用されます。
・省略すると 400px が使用されます。

・地図縦幅:実際の投稿記事を見るときに表示される地図の縦幅となります。

・変更する場合は数値を直接変更してください。
・選択のために表示されている地図の縦幅を超えることは出来ません、超えた設定をした場合は地図の縦幅が使用されます。
・省略すると 300px が使用されます。

・地図横幅縦幅-変更ボタン:地図範囲確認用の枠を設定された横幅、縦幅に変更します。
・地図横幅縦幅-表示ボタン:選択地図上に範囲確認用の枠を表示します、表示中は枠内で地図の操作が出来なくなります。
・地図横幅縦幅-非表示ボタン:表示されている範囲確認用の枠を消します。
・現在緯度:表示されている地図の中心点の緯度を表示します、地図の表示位置を変更すると自動的に変わります。
・現在経度:表示されている地図の中心点の経度を表示します、地図の表示位置を変更すると自動的に変わります。
・初期緯度:ホーム位置の緯度を設定します。

・ホーム位置とは投稿記事を表示した時の初期表示位置またはホームボタンを押下した時に表示される位置です。
・初期緯度または初期経度の入力域にフォーカスがある状態で地図をクリックするとクリックした位置が設定されます。
・省略すると 35.67832667 が使用されます。

・初期経度:ホーム位置の経度を設定します。

・省略すると 139.77044378 が使用されます。

・初期緯度経度-取得ボタン:現在表示されている地図の中心緯度と中心経度が初期緯度と初期経度に設定されます。
・初期緯度経度-表示ボタン:現在設定されている初期緯度と初期経度の場所に地図が移動します。
・表示緯度:投稿記事の表示時に初期表示する位置を初期緯度から変更したい時に設定します。

・初期緯度経度との違いはホームボタンの表示位置と違う位置を初期表示したい場合に設定する事です。
・表示緯度または表示経度の入力域にフォーカスがある状態で地図をクリックするとクリックした位置が設定されます。
・表示経度とセットで設定された場合に使用されます。
・省略可能です。

・表示経度:投稿記事の表示時に初期表示する位置を初期経度から変更したい時に設定します。

・省略可能です。

・表示緯度経度-取得ボタン:現在表示されている地図の中心緯度と中心経度が表示緯度と表示経度に設定されます。
・表示緯度経度-表示ボタン:現在設定されている表示緯度と表示経度の場所に地図が移動します。
・縮尺ボタン:地図に表示されるスライダーバーのタイプを設定します、押下により「スライダーバー」「縮尺切り替えボタン」を切り替えます。
・中心点ボタン:地図に表示される中心点表示ボタンの表示/非表示を切り替えます。

・中心点表示ボタンと中心点の両方を非表示にしたい場合は先に地図上の中心点表示ボタンにより中心点を非表示にしてください。

・投稿に挿入ボタン:設定した地図を投稿記事に挿入します。挿入はショートコード[insertyahoomap]として設定されます。

※設定した地図情報が全て記事に挿入されるので非常に長いショートコードが挿入される場合があります。

・カスタムフィールドに追加ボタン:設定した地図を投稿記事に挿入します。挿入はショートコード[insertyahoomap]とカスタムフィールドが設定されます。

※記事に挿入される情報を少なくしたい場合に使用してください。
※ショートコード[insertyahoomap id=”1234567890″]が記事に挿入され残りの情報は”insertyahoomap1234567890″を名前としてカスタムフィールドに設定されます。
※id又はカスタムフィールドの数字部はランダムな数字となります。

カテゴリー情報

・表示/非表示ボタン:情報を一時的に非表示または非表示にした情報を表示させる。
・追加ボタン:新規にカテゴリーを追加する場合に押下します。
・適用:設定したカテゴリーを使用する場合にチェックします。

・カテゴリーとは地図上に表示するアイコンを独自のアイコンに変更したい場合に追加します。
・カテゴリーを追加しなくてもアイコンは追加できます、また必須項目でもありません。
※チェックしないとアイコンのカテゴリIDとして選択できません、またショートコード情報にも追加されません。
※チェックすると内容変更と削除が出来なくなります、変更や削除を行う場合は一度チェックを外して下さい。

・カテゴリID:カテゴリーの名前を設定します、ここで設定した名前がアイコン追加時のカテゴリIDの一覧で選択できるようになります。

・追加時に自動的に “category1” 等のcategory+連番が初期表示されます、必要に応じ変更してください。
※必須項目となります、また同一地図内での重複は不可となります。

・画像-url:使用するイメージの場所をフルパスで設定します。

※必須項目となります。

・画像-画:画像-urlで設定したイメージを 14px × 14px に縮小して表示します。
・画像スタイル-幅:画像の幅をピクセル単位で設定します。

・省略時は画像の幅が自動的に設定されます。(適用チェック時)

・画像スタイル-高さ:画像の高さをピクセル単位で設定します。

・省略時は画像の高さが自動的に設定されます。(適用チェック時)

・画像スタイル-基準横:画像のX方向の移動量をピクセル単位で設定します。

・省略時は “0” が自動的に設定されます。(適用チェック時)

・画像スタイル-基準縦:画像のY方向の移動量をピクセル単位で設定します。

・省略時は “0” が自動的に設定されます。(適用チェック時)

・削除ボタン:追加したカテゴリーを削除する場合に押下します。

※表示されていない場合は先に、適用のチェックを外して下さい。

・絵文字ボタン:絵文字の一覧を表示し選択することが出来ます。

・選択すると画像-urlにアドレスが設定されます。
※このボタンは私が公開しているemojiプラグインをインストールしている場合に表示されます。(Version:1.3.0以降)

アイコン情報

・表示/非表示ボタン:情報を一時的に非表示または非表示にした情報を表示させる。
・追加ボタン:新規にアイコンを追加する場合に押下します。
・適用:設定したアイコンを使用する場合にチェックします。

・アイコンとは地図上にアイコンを表示したい場合に追加します。
・必須項目ではありません。
※チェックしないとアイコンが地図に表示されません、またショートコード情報にも追加されません。
※チェックすると内容変更と削除が出来なくなります、変更や削除を行う場合は一度チェックを外して下さい。
※チェックしたアイコンでカテゴリーで追加したカテゴリIDを使用している場合はもカテゴリーの適用も変更できなくなります。

・アイコンID:アイコンの名前を設定します。

・追加時に自動的に “icon1” 等のicon+連番が初期表示されます、必要に応じ変更してください。
※必須項目となります、また同一地図内での重複は不可となります。

・緯度:アイコンを表示する緯度を設定します。

・緯度または経度の入力域にフォーカスがある状態で地図をクリックするとクリックした位置が設定されます。
※必須項目となります。

・経度:アイコンを表示する経度を設定します。

※必須項目となります。

・カテゴリID:初期設定されている”L1″から”L5″、”S1″から”S5″またはカテゴリーで追加したカテゴリIDを選択します。
・吹き出し:アイコンをマウスオーバーした時に表示される吹き出しを設定します。

・吹き出しにはhtmlのタグが使用できます。
・省略時は吹き出しが表示されません。

・ラベル:アイコンの横に表示されるラベルを設定します。

・省略時はラベルが表示されません。

・削除ボタン:追加したアイコンを削除する場合に押下します。

※表示されていない場合は先に、適用のチェックを外して下さい。

・取得ボタン:現在表示されている地図の中心緯度と中心経度が緯度と経度に設定されます。
・表示ボタン:現在設定されている緯度と経度の場所に地図が移動します。

ポリライン情報

・表示/非表示ボタン:情報を一時的に非表示または非表示にした情報を表示させる。
・追加ボタン:新規にポリラインを追加する場合に押下します。
・適用:設定したポリラインを使用する場合にチェックします。

・ポリラインとは地図上に折れ線を表示したい場合に追加します。
・必須項目ではありません。
※チェックしないとショートコード情報に追加されません。
※チェックすると内容変更と削除が出来なくなります、変更や削除を行う場合は一度チェックを外して下さい。

・オブジェクトID:ポリラインの名前を設定します。

・追加時に自動的に “polyline1” 等のpolyline+連番が初期表示されます、必要に応じ変更してください。
※必須項目となります、また同一地図内での重複(ポリゴンも含む)は不可となります。

・吹き出し:折れ線をマウスオーバーした時に表示される吹き出しを設定します。

・吹き出しにはhtmlのタグが使用できます。
・省略時は吹き出しが表示されません。

・線スタイル-太さ:線の太さをピクセル単位で設定します。

・省略時は “3” が自動的に設定されます。(適用チェック時)

・線スタイル-色:線の色を設定します。

・省略時は “00ff00” が自動的に設定されます。(適用チェック時)

・線スタイル-透明度:線の透明度を設定します。

・省略時は “1” が自動的に設定されます。(適用チェック時)

・一括設定ボタン:座標をテキストエリアに一括で入力設定するウィンドウを表示します。
・削除ボタン:追加したポリラインを削除する場合に押下します。

※表示されていない場合は先に、適用のチェックを外して下さい。

・座標追加ボタン:新たに緯度経度を追加する場合に押下します。
・緯度:折れ線を表示する緯度を設定します。

・緯度または経度の入力域にフォーカスがある状態で地図をクリックするとクリックした位置が設定されます。
※必須項目となります。

・経度:折れ線を表示する経度を設定します。

※必須項目となります。

・緯度経度-削除ボタン:緯度経度を削除する場合に押下します。
・緯度経度-取得ボタン:現在表示されている地図の中心緯度と中心経度が緯度と経度に設定されます。
・緯度経度-表示ボタン:現在設定されている緯度と経度の場所に地図が移動します。

・一括設定ボタンについて

一括設定ウィンドウが表示されますので座標を入力してください。
※既にポリライン情報にて緯度経度を設定している場合は初期表示されます。

・座標入力域:緯度経度をカンマで区切ったセットを複数行指定してください。
・決定ボタン:入力された座標情報を元にポリライン情報の緯度経度を置き換えてウィンドウを閉じます。
・取消ボタン:ポリライン情報の緯度経度を変更せずにウィンドウを閉じます。
・作成ボタン:ポリラインの座標情報を視覚的に指定出来るウィンドウを表示します。

・ポリライン作成について

新規ウィンドウが表示されマウスクリックによりポリラインを作成することが出来ます。
※既に一括設定にて座標情報を設定している場合は初期表示されます。
※地図設定画面にて適用状態のアイコンを一覧で表示します。

・地図:地図をマウスクリックすると新たにポリラインの座標を新規追加します、追加された座標にはアイコン「point.gif」が表示されます、座標が複数存在する場合は追加した順番で折れ線が引かれます。
・「point.gif」:表示されている座標アイコンをマウスクリックすると該当座標を削除します。
・決定ボタン:作成された座標情報を元に一括設定の座標情報を置き換えてウィンドウを閉じます。
・取消ボタン:一括設定の座標情報を変更せずにウィンドウを閉じます。
・アイコン表示:チェック又は非チェックすると地図上にアイコンを表示/非表示します。

ポリゴン情報

・表示/非表示ボタン:情報を一時的に非表示または非表示にした情報を表示させる。
・追加ボタン:新規にポリゴンを追加する場合に押下します。
・適用:設定したポリゴンを使用する場合にチェックします。

・ポリゴンとは地図上に多角形を表示したい場合に追加します。
・必須項目ではありません。
※チェックしないとショートコード情報に追加されません。
※チェックすると内容変更と削除が出来なくなります、変更や削除を行う場合は一度チェックを外して下さい。

・オブジェクトID:ポリゴンの名前を設定します。

・追加時に自動的に “polygon1” 等のpolygon+連番が初期表示されます、必要に応じ変更してください。
※必須項目となります、また同一地図内での重複(ポリラインも含む)は不可となります。

・吹き出し:多角形をマウスオーバーした時に表示される吹き出しを設定します。

・吹き出しにはhtmlのタグが使用できます。
・省略時は吹き出しが表示されません。

・スタイル-線-太さ:線の太さをピクセル単位で設定します。

・省略時は “3” が自動的に設定されます。(適用チェック時)

・スタイル-線-色:線の色を設定します。

・省略時は “00ff00” が自動的に設定されます。(適用チェック時)

・スタイル-線-透明度:線の透明度を設定します。

・省略時は “1” が自動的に設定されます。(適用チェック時)

・スタイル-塗りつぶし-色:塗りつぶしの色を設定します。

・省略時は “0000ff” が自動的に設定されます。(適用チェック時)

・スタイル-塗りつぶし-透明度:塗りつぶしの透明度を設定します。

・省略時は “0.5” が自動的に設定されます。(適用チェック時)

・一括設定ボタン:座標をテキストエリアに一括で入力設定するウィンドウを表示します。
・削除ボタン:追加したポリゴンを削除する場合に押下します。

※表示されていない場合は先に、適用のチェックを外して下さい。

・座標追加ボタン:新たに緯度経度を追加する場合に押下します。
・緯度:多角形を表示する緯度を設定します。

・緯度または経度の入力域にフォーカスがある状態で地図をクリックするとクリックした位置が設定されます。
※必須項目となります。

・経度:多角形を表示する経度を設定します。

※必須項目となります。

・緯度経度-削除ボタン:緯度経度を削除する場合に押下します。
・緯度経度-取得ボタン:現在表示されている地図の中心緯度と中心経度が緯度と経度に設定されます。
・緯度経度-表示ボタン:現在設定されている緯度と経度の場所に地図が移動します。

・一括設定ボタンについて

一括設定ウィンドウが表示されますので座標を入力してください。
※既にポリゴン情報にて緯度経度を設定している場合は初期表示されます。

・座標入力域:緯度経度をカンマで区切ったセットを複数行指定してください。
・決定ボタン:入力された座標情報を元にポリゴン情報の緯度経度を置き換えてウィンドウを閉じます。
・取消ボタン:ポリゴン情報の緯度経度を変更せずにウィンドウを閉じます。
・作成ボタン:ポリゴンの座標情報を視覚的に指定出来るウィンドウを表示します。

・ポリゴン作成について

新規ウィンドウが表示されマウスクリックによりポリゴンを作成することが出来ます。
※既に一括設定にて座標情報を設定している場合は初期表示されます。
※地図設定画面にて適用状態のアイコンを一覧で表示します。

・地図:地図をマウスクリックすると新たにポリゴンの座標を新規追加します、追加された座標にはアイコン「point.gif」が表示されます、座標が複数存在する場合は追加した順番で多角形が描画されます。
・「point.gif」:表示されている座標アイコンをマウスクリックすると該当座標を削除します。
・決定ボタン:作成された座標情報を元に一括設定の座標情報を置き換えてウィンドウを閉じます。
・取消ボタン:一括設定の座標情報を変更せずにウィンドウを閉じます。
・アイコン表示:チェック又は非チェックすると地図上にアイコンを表示/非表示します。

操作の説明

1.挿入したい地図のサイズを地図横幅、地図縦幅を設定します。

・必要に応じて表示ボタンにて挿入範囲の確認をしてください。

2.地図を表示したい位置に移動させます。

・必要に応じて縮尺や各種ボタンの設定を行います。

3.初期緯度経度-取得ボタンを押下し地図位置を取得します。

・必要に応じて表示緯度経度を設定してください。

4.カテゴリーの追加ボタンを押下します。(必要時)
5.画像-urlを設定または絵文字ボタンより選択してください。
6.カテゴリー適用にチェックを入れてください。
7.アイコンの追加ボタンを押下します。(必要時)
8.緯度又は経度にフォーカスを置きアイコンを表示したい場所をマウスでクリックしてください。
9.カテゴリーで追加したカテゴリIDを選択してください。
10.吹き出しを入力してください。
11.ラベルを入力してください
12.アイコン適用にチェックを入れてください。
13.ポリラインの追加ボタンを押下します。(必要時)
14.緯度又は経度にフォーカスを置きポリラインを表示したい場所をマウスでクリックしてください。
15.必要に応じ緯度経度情報を追加してください。
16.ポリライン適用にチェックを入れてください。
17.ポリゴンの追加ボタンを押下します。(必要時)
18.緯度又は経度にフォーカスを置きポリゴンを表示したい場所をマウスでクリックしてください。
19.必要に応じ緯度経度情報を追加してください。
20.ポリゴン適用にチェックを入れてください。
21.投稿に挿入ボタンまたはカスタムフィールドに追加ボタンを押下してください。

改版履歴

ver 1.5.1 (2009-6-3)

・httpsを使用している時にウィンドウ表示したurlがhttpとなってしまう点を修正。

ver 1.5.0 (2009-5-23)

・既知の問題を解決するためフレーム表示をウィンドウ表示に変更。
・FireFox使用時の地図選択時にポリラインを適用しても表示されない点を修正。
・FireFox使用時の地図選択時にポリゴンを適用しても表示されない点を修正。
・InternetExplorer使用時の地図選択時にバージョン8を使用すると地図が正しく表示されない点を修正。
・InternetExplorer使用時の地図選択時にカテゴリーを適用/非適用を繰り返すとアイコン情報のカテゴリIDの幅が縮まる点を修正。
・Opera使用時の地図選択時に地図をクリックする事により緯度経度を取得する機能が使えない点を修正。
・Safari使用時の地図選択時に地図をクリックする事により緯度経度を取得する機能が使えない点を修正。

ver 1.4.0 (2009-5-20)

・地図選択時にポリゴンの設定を出来るように機能を追加。
・ポリライン作成時にアイコンの表示ボタンが使用出来ない点を修正。

ver 1.3.0 (2009-5-19)

・ポリラインの座標一括設定時に視覚的に座標を編集出来る機能を追加。

ver 1.2.0 (2009-5-8)

・地図の測地系を設定画面で選択できる機能を追加。
・地図選択時にポリラインの設定を出来るように機能を追加。
・地図選択時に基本情報、カテゴリ、アイコン、ポリラインの設定を表示/非表示を切り替え出来るように機能を追加。

ver 1.1.0 (2009-4-30)

・地図選択時にデフォルト表示するカテゴリを設定画面にて登録できる機能を追加。

ver 1.0.2 (2009-4-30)

・投稿記事表示時にカスタムフィールドを使用した挿入が複数ある場合に正しく地図が表示されない点を修正。

ver 1.0.1 (2009-4-27)

・地図選択時にカテゴリーの画像スタイル基準横又は画像スタイル基準縦にマイナス数値を設定して使用するとアイコンが左端又は上端又は左上端に表示される点を修正。

ver 1.0.0 (2009-4-25)

・新規リリース。