人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

google mapでうまく表示されない。見れるようにしたいです。
前回、
Google Mapでの住所表示、周辺スポット表示を、同一サイトでページ毎に行いたい
http://q.hatena.ne.jp/1470778105
で質問しまして、サイトにgoogle mapの地図を搭載することができたのですが。

何という名称なのでしょうか、例えば、
%CA%BC%B8%CB%B8%A9%BF%C0%B8%CD%BB%D4%CA%BC%B8%CB%B6%E8%C4%CD%CB%DC%C4%CC%A3%B4%C3%FA%CC%DC%A3
という文字列があります。これは、
http://n7.com/japanese/
のサイトでデコードすると「兵庫県神戸市兵庫区塚本通4丁目」という文字列を示すのですが。
そして、デコード前の長い半角英数の文字列の方で地図を表示させたいのですが、
http://iphonestation.info/map?address=%CA%BC%B8%CB%B8%A9%BF%C0%B8%CD%BB%D4%CA%BC%B8%CB%B6%E8%C4%CD%CB%DC%C4%CC%A3%B4%C3%FA%CC%DC%A3&zoom=15
と入れても、うまく表示できないのです。
日本語だとうまく表示されるのですが…半角英数の方でも表示できるようにする方法がありましたらお教えいただきたいです。よろしくお願いいたします。

●質問者: sherlockhomeless
●カテゴリ:ウェブ制作 学習・教育
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● a-kuma3
●1800ポイント ベストアンサー

何という名称なのでしょうか

文字列を、URI エンコードという処理を施した結果になります。

「兵庫県神戸市兵庫区塚本通4丁目」という文字列を示すのですが

確かにそうなのですが、文字コードが EUC-JP になってます。
UTF-8 の文字コードを URI エンコードした結果を使ってください。

例えば、↓のようにです。
http://iphonestation.info/map?address=%E5%85%B5%E5%BA%AB%E7%9C%8C%E7%A5%9E%E6%88%B8%E5%B8%82%E5%85%B5%E5%BA%AB%E5%8C%BA%E5%A1%9A%E6%9C%AC%E9%80%9A%EF%BC%94%E4%B8%81%E7%9B%AE&zoom=15



追記です。

前回の質問では UTF-8 前提で問題がなかったので、実は混在しているとか、JUGEMブログからインポートした後に何か作業をして、今更インポートからやり直すのがめんどくさいとか、あるかもしれないので、プログラムでどうにかする方法も考えて見ました。

外部のライブラリを使います。
ecl.js というライブラリがあります。
↓から手に入れて、ご自分のサイトのどこかに配置してください。
http://www.vector.co.jp/soft/other/java/se342855.html

そのライブラリを script タグで読み込みます。
適当な位置で構わないのですが、head 要素の最後とかに。

<script src="...../ecl.js"></script>

コードを書き換えます。
以下のコードを、

 if (param['address']) {
 address = decodeURIComponent(param['address']);
 }

次のように書き換えてください。

 if (param['address']) {
 try {
 address = decodeURIComponent(param['address']);
 } catch (e) {
 address = UnescapeEUCJP(param['address']);
 }
 }

address パラメータが UTF-8 が URI エンコードされたものではなかったときに、EUC-JP でチャレンジするように変更しました。

コメントに書いたように、質問文に書かれた URI エンコードした文字列は、末尾に %A3 が余っているので残ります。
これは、元の文字コードが EUC-JP であることとは関係なくて、何かの作業ミスのような気がします。


sherlockhomelessさんのコメント
a-kuma3さん、ありがとうございます。 EUC-JPでも、google maoに対応させて、表示させることはできないでしょうか? というのも、実はJUGEMブログで記事をMovable type形式でインポートしますと。 インポートする時のファイルには、 http://iphonestation.info/map?address=兵庫県神戸市兵庫区塚本通4丁目&zoom=15 と記載しているのですが。 インポートされると、なぜか http://iphonestation.info/map?address=%CA%BC%B8%CB%B8%A9%BF%C0%B8%CD%BB%D4%CA%BC%B8%CB%B6%E8%C4%CD%CB%DC%C4%CC%A3%B4%C3%FA%CC%DC%A3&zoom=15 に、変換されてしまうのです。そしてリンクをクリックすると、地図が表示されない…という事態に。 JUGEMはEUC?JPで固定 http://webspace.jugem.jp/?eid=786 みたいなので、JUGEM側の文字コードをUTF-8に変えるのは難しそうです。 ですので、もしWprdoress側の設定や文字コードの一部を変更することで、EUC?JPに対応できるようでしたら、お教えいただけますでしょうか。 よろしくお願い致します。

a-kuma3さんのコメント
JUGEM ブログからエクスポートした段階では URI エンコードされていないようなので、 + JUGEM ブログからエクスポートする + エクスポートしたファイルを、文字コード変換できるテキストエディタなどで UTF-8 に変換する + Wordpress にインポートする という手順を踏めば良いのではないかと思います。

a-kuma3さんのコメント
エクスポート → インポートの間、もしくは、インポートした後に何かやってないですか? 質問にある文字列だと、最後についてる %A3 が余ります。

a-kuma3さんのコメント
サイトの javascript で対応する方法について、回答に追記しました。

sherlockhomelessさんのコメント
ありがとうございいます。 さっそくa-kuma3さんに紹介いただいた「ecl.js」をWordpressに搭載しようと思ったのですが。 ファイルを解凍すると、eclというjavascriptファイル、readme、TranceEscapeというHTMLファイルの3つが出てきまして。 ここからのなのですが、"サイトに配置する"ということで、header.phpのhead要素の最後に<script src="...../ecl.js"></script>を加えるまでは理解できるのですが。 そこから…書き換えなければならないというif (param['address']) { address = decodeURIComponent(param['address']); }は、一体どこにありますでしょうか? 度々お手数おかけいたします、お教えいただきますと助かります<m(__)m>

a-kuma3さんのコメント
>> そこから…書き換えなければならないというif (param['address']) { address = decodeURIComponent(param['address']); }は、一体どこにありますでしょうか? << [http://q.hatena.ne.jp/1470778105#a1258377:title=この質問の回答]の内容の一部になります。 質問に質問返しで恐縮ですけれど、どこに書きました?

sherlockhomelessさんのコメント
ありがとうございます、わかりました! ただ、試してみたのですが・・・やはりEUC-JPでは表示が難しいのでしょうか。 ドメイン直下、 http://iphonestation.info/ecl.js に「ecl.js」はアップしまして。 header.phpファイルの、</head>直前に「<script src="...../ecl.js"></script>」を加えまして。 http://iphonestation.info/map 及び http://iphonestation.info/map2 の固定記事に記載の、 if (param['address']) { address = decodeURIComponent(param['address']); } を、 if (param['address']) { try { address = decodeURIComponent(param['address']); } catch (e) { address = UnescapeEUCJP(param['address']); } } に、書き換えてみたのですが… http://iphonestation.info/map?address=%CA%BC%B8%CB%B8%A9%BF%C0%B8%CD%BB%D4%CA%BC%B8%CB%B6%E8%C4%CD%CB%DC%C4%CC%A3%B4%C3%FA%CC%DC&zoom=15 は、表示されないようでして…。 なんとか対応できる方法がありましたら、ご回答いただけますと幸いです。 よろしくお願い致します<m(__)m>

a-kuma3さんのコメント
>> http://iphonestation.info/ecl.js に「ecl.js」はアップしまして。 << 正しくアップできてないですね。 上記のリンクをクリックしても、Not Found のページに飛ばされます。 >> header.phpファイルの、</head>直前に「<script src="...../ecl.js"></script>」を加えまして。 << こちらは、ぼくの書き方が良くなかった。 もし、[]http://iphonestation.info/ecl.js[] でアクセスできるようにアップできたのであれば、以下のように書いてください。 >|html| <script src="/ecl.js"></script> ||< >> やはりEUC-JPでは表示が難しいのでしょうか。 << ライブラリがきちんと読み込めてないだけなので、正しく読み込めれば動きますよ。 ローカルでの ecl.js の動作確認はできてます。 だからこそ、「質問にある文字列だと、最後についてる %A3 が余ります」に気がついたわけで。

sherlockhomelessさんのコメント
ありがとうございます、うまくできました!

sherlockhomelessさんのコメント
a-kuma3さんすみません。 確かにさきほどはうまくいったのですが、他のサイトで同じように搭載しても、どうも表示されない不具合に見舞われまして…。サーバーなのかファイルのパーミッションなのか、いろいろ調べてみましたところ。 どうやらwordpressのテーマによって、うまくいく場合といかない場合があるようなのですが。 「STINGERPLUS」というテーマを使うと、さっきうまく表示されたのですが。 「Twenty Sixteen」というテーマに変えて、環境を同じにして試しましたところ。 http://iphonestation.info/map?address=%CA%BC%B8%CB%B8%A9%BF%C0%B8%CD%BB%D4%CA%BC%B8%CB%B6%E8%C4%CD%CB%DC%C4%CC%A3%B4%C3%FA%CC%DC%A3&zoom=15 にありますように、表示されなくなったのです。 もしかすると、ecl.jsが動くにはメタタグかどこかに何らかの記述が必要といいますか、だからこそSTINGERPLUS出は動いて、TwentySixteenでは動かなかったのではないのかと考えるものの、何が違うのか全然わからなくなってきております。 もしよろしければ、ecl.jsが動く条件といいますか、お教えいただけますと幸いです。 よろしくお願い致します。

a-kuma3さんのコメント
見ました。 ecl.js は関係なくて、javascript のコードに UnescapeEUCJP を仕込むところでミスってます。 >|html| <p><script> window.addEventListener("DOMContentLoaded", function() { // パラメータの切り出し var param = {} location.search.substring(1).split("&").forEach(function(s) { var a = s.split('='); param[a[0]] = a[1]; });</p> <p> var zoom = parseInt(param['zoom']), address = '', keyword = '';</p> <p> if (param['address']) { try { address = decodeURIComponent(param['address']); } catch (e) { address = UnescapeEUCJP(param['address']); } }</p> <p> display_map("map", zoom, address, keyword); }); </script></p> ||< script タグの中に、余計な p タグが入ってます。 これが原因でスクリプトのエラーになってます。

a-kuma3さんのコメント
ちょっと、分かりにくいか。 余計な p タグは、↓です。 <pre> &lt;p&gt;&lt;script&gt; window.addEventListener(&quot;DOMContentLoaded&quot;, function() { // パラメータの切り出し var param = {} location.search.substring(1).split(&quot;&amp;&quot;).forEach(function(s) { var a = s.split(&#039;=&#039;); param[a[0]] = a[1]; });<span style="color:red;">&lt;/p&gt;</span> <span style="color:red;">&lt;p&gt;</span> var zoom = parseInt(param[&#039;zoom&#039;]), address = &#039;&#039;, keyword = &#039;&#039;;<span style="color:red;">&lt;/p&gt;</span> <span style="color:red;">&lt;p&gt;</span> if (param[&#039;address&#039;]) { try { address = decodeURIComponent(param[&#039;address&#039;]); } catch (e) { address = UnescapeEUCJP(param[&#039;address&#039;]); } }<span style="color:red;">&lt;/p&gt;</span> <span style="color:red;">&lt;p&gt;</span> display_map(&quot;map&quot;, zoom, address, keyword); }); &lt;/script&gt;&lt;/p&gt; </pre>

sherlockhomelessさんのコメント
ありがとうございます、直りました! ただすみません、別のサイトにも搭載しようとしたのですが…なぜかうまく地図が表示されませんでして。 詳細は http://q.hatena.ne.jp/1512213511 に記載しましたので、またa-kuma3さんお手隙の時にご教授いただけますと幸いです<m(__)m>

2 ● kaoato
●50ポイント

1.JUGEM-XML形式で書き出し (UTF-8)
2.MovableType4形式に変換
http://hmgx.net/jugem2mt/
3.Wordpresにインポート

この手順を踏んでみたらどうでしょう?


sherlockhomelessさんのコメント
ありがとうございます。 それは試してみたのですが、ダメでした。 実は逆で、ワードプレスからJUGEMに移行しようとして、うまくいかなかったのです。 ワードプレスの投稿の一部をエクスポート、それを小物置き場などのサイトでMT形式に変換し、 インポートまではうまくいくんです。 しかし…インポートした地図リンクのURLに記載の日本語「兵庫県神戸市兵庫区塚本通4丁目」などが、必ずEUC-JPになり、リンク先であるサイト(Wordpressのサイト)で、google mapが表示されないのに悩んでおります。

kaoatoさんのコメント
Wordpressの記事の時点で、URLエンコードをしておけば、変換されない気がするのですが、どうでしょうか?

sherlockhomelessさんのコメント
ご回答ありがとうございます。なぜか変換されてしまいまして…。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ