BLOGブログ

携帯サイトでGoogleMapを表示

最近、携帯サイトのご依頼が多くなってきました。
そこで悩んだのが、地図の埋め込み。

結論から言えば、唯一無料で商用利用ができるGoogle Mapを利用しています。

携帯サイトで地図を見る…といえば、

イラストレータで独自に作った地図を埋め込む
Google Mapp、YahooのAPIを使って表示する
MapFan、NaviTimeへリンクを貼って連動させる

…等、様々な方法があります。

ただ、

Illustratorで地図を作るには予算（時間）がない
Yahooは商用利用不可
MapFan、NaviTimeは、利用者さんが有料サービスに入ってないと意味がない

という理由から、消去法でGoogle Mapになったのです（笑）

Google Mapを選んだ理由

商用で無料利用できる
静的画像が出力されるので見る人にパケ代の心配をさせないで済む
Googleはサービス対応が早いので、今後の便利を考えて。

これが大きな理由です。

デメリットとしては、一日に読み込むことができるのは1000ユニーク画像という制限があることですが、医療機関で、携帯サイトに１日1000人以上の方が地図を見ることはありえないので、実質的には全く問題なし。

手軽にGoogle Mapを作成できるサービス

Google Static Maps API

Google Static Maps API では、Google マップの画像を自分の Web ページに埋め込むことができます。JavaScript や動的なページの読み込みは必要ありません。

ということで、パケ放題のようなサービスに入っていない携帯ユーザーさんにも安心できる地図を選択しました。
http://gmaps-samples.googlecode.com/svn/trunk/simplewizard/makestaticmap.html

住所などから位置を特定して、サイズ・色味などを細かく指定。
その後は、出力されているリンクの最後にある
APIキーの入力と、sensorパラメータの変更をすればOK！

ちなみに、sensorパラメータとは、
GPSなどを利用して地図画像を取得したいときに利用されるものです。
通常は「sensor=false」（オフにしておく）で問題ないでしょう。

Google MAPS APIキーを取得する

APIキーの取得についてはコチラ。
http://code.google.com/intl/ja/apis/maps/signup.html

おまけ：QRコードの自動生成

タイトルも入れられますし、色も変えられて便利なので、
私はよく↓のサイトを利用させていただいています。
QRのススメ　http://qr.quel.jp/try.php

日本の携帯は、docomo、au、softbankにウィルコム、イー・モバイルと５キャリアある上に、キャリア毎に細かく対応できる基準が異なります。
さらにiPhoneやAndroid携帯などスマートフォンも多くなっていますので、
作成するのに本当に神経を使いますね…。

2010.04.28

1Q84 BOOK 3

大学生の頃、村上春樹さんの本にハマった。
留学時代に、唯一持っていった日本語の本は「ねじまき鳥クロニクル」
さらに、中国語に翻訳された村上春樹作品を読みまくるくらい好きだった。

青春時代を過ぎてからはすっかりご無沙汰でしたが、
1Q84で久しぶりに村上さんの文章に触れました。

個人的には、1Q84の１・２よりも３の方がおもしろい！と感じました。
１・２の時は、それで完結だと思ったので「消化不良～！」という想いが強かったのがあるからかもしれません。

このラストだったら、きっと４もあるでしょうね。
来年くらいに出るのでしょうか…。楽しみです。

2010.04.14

Google AJAX Feed APIで、外部サイトをホームページに表示

ホームページとブログを両方運用している時、
トップページにブログの更新情報が自動掲載されたら良いと思いませんか？

以前は表示されるまでに数時間～数日のタイムラグがあったgoogleのRSS表示ですが、最近は本当にすぐに掲載されるようになりました。

導入の詳しい方法は、色々なサイトで詳しく述べられているので、
ここでは、表示方法のカスタマイズについてメモ的に掲載します。

私は新着情報の更新などは、下記のように作ることが多いので、
それに合わせて、ブログも日付＆タイトルのデータを取得したい
<dl>
<dt>2009年12月11日</dt>
<dd>内容を記載します</dd>
</dl>

—————————————————–

google.load(“feeds”, “1”);
function initialize() {
//読み込むフィードのURLを指定
var feed = new google.feeds.Feed(“読み込むフィードのURLを指定”);

//読み込むフィードの数を指定
feed.setNumEntries(5);

feed.load(function(result) {
if (!result.error) {
var container = document.getElementById(“feed”);

for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var date = new Date(entry.publishedDate); //各HTML要素を生成 var div = document.createElement("div"); var dl = document.createElement("dl"); var dt = document.createElement("dt"); var dd = document.createElement("dd"); var a = document.createElement("a"); //記事のタイトルを取得 var entryTitle = entry.title; //記事のパーマリンクの値を取得 var entryLink = entry.link; //[2009年12月11日]の形式で日付を取得 var entryDay = date.toLocaleDateString(); //dt要素内に、content要素をHTMLコードとして挿入 dt.innerHTML=entryDay; dd.appendChild(a); dd.getElementsByTagName("a")[0].setAttribute("target","_blank"); //a要素に対して、link要素の文字列をhref属性の値として設定 dd.getElementsByTagName("a")[0].setAttribute("href",entryLink); //a要素の子要素として、title要素をテキストノードに変換して挿入 dd.getElementsByTagName("a")[0].appendChild(document.createTextNode(entryTitle)); dl.appendChild(dt); dl.appendChild(dd); container.appendChild(dl); } } }); } google.setOnLoadCallback(initialize); ----------------------------------------------------- ※今回、上記コードを作成するにあたりこちらのサイトを参考にさせていただきました。 http://www.ficc.jp/labs/archives/suzuki/google_ajax_feed_api/

2010.02.13