新着記事
2009年03月28日

ホームページ・ビルダー13の地図連携機能は簡単便利か?

ホームページ・ビルダー最新版「ホームページ・ビルダー13」には Google Maps や Yahoo!地図との連携機能が装備されて、サイトに簡単に貼り付けできるそうですが、実際はどうなのか、使ってみたレビューです。

IBM ホームページ・ビルダー13 製品紹介
人気Webサービス各種と簡単連携 「らくらくWebサービス」
1. Google Maps、Yahoo!地図 連携 :人気の地図を自由自在な形でページに表示させることができます。
機能紹介ページには
【新】Yahoo!地図による地図の埋め込み/【新】Google マップによる地図の埋め込み/【新】地図の種類や 縮尺の選択/【新】検索ワードによる位置の決定/【新】地図上のアイコンや吹き出しの作成
とあります。

あらかじめweb上の紹介記事を読んだり製品のオンラインユーザーズガイドを見ると、“簡単に”と謳っているこの機能が実は、Google Maps APIキーや Yahoo! JAPAN Web API のアプリケーション IDを取得・設定して利用するものだということがわかりました。APIでの地図コンテンツ作成は、全くの初心者にはマニュアルを参照しながらでも相当難しいと思います。私自身でも、やってやれないこともなさそうですが手間と苦労をしてまでやる必要があるのかと思い、簡単に使えて作れる「Google マイマップ」などを利用したりこのブログで紹介している訳です。

ただし Yahoo!地図には「Google マイマップ」のようなサービスがないので、ホームページ・ビルダー13で楽ちんにできるのならバージョンアップ版を買っても良いかと思いました。

ちなみに→参照:Yahoo!デベロッパーネットワーク JavaScript版地図APIマニュアル ←チャレンジする気が萎えますよね(笑)

で、web制作初心者のユーザーが多いホームページ・ビルダーで、API のアプリケーションをどこまで簡単に使えるのか、またどの程度までの地図が作れるのかを、体験版をダウンロードして試用してみました。
ホームページ・ビルダー13 体験版 ダウンロード

インストール手順やホームページ・ビルダー13の仕様変更の印象などは省いて、マップ挿入機能について早速説明します。

(1)ページの編集画面でツールバーの〔挿入〕→〔マップ〕とクリックし、「Google マップ」か「Yahoo!地図」を選択してクリック。すると「Google マップ API キー設定」または「Yahoo!地図 アプリケーション ID 設定」のダイアログが出る。

◎Yahoo!地図選択の場合の画像
「Yahoo!地図 アプリケーション ID 設定」のダイアログ(2)[登録ページをブラウザで開く]ボタンを押すと、Yahoo!地図 アプリケーションID の登録ページ(→Yahoo!デベロッパーネットワーク アプリケーションIDの登録ページ)がブラウザで開く。

Yahoo! JAPAN ID(Google マップの場合はGoogle アカウント)を持っていない場合は、まずYahoo! JAPAN ID(Google マップの場合はGoogle アカウント)を取得する必要があるが、いずれにしても登録は簡単。利用規約に同意しアプリケーションID(Google マップ API の場合は「キー」)を取得。そのID(Google マップ API の場合は「キー」)をコピーしてホームページ・ビルダーの設定ダイアログの入力欄に貼り付ける。

(3)アプリケーションIDを入力すると地図の挿入ダイアログが立ち上がり、そこで表示したい地図を編集する。編集は直感的にできる。わからなければホームページ・ビルダーのヘルプを参照。

(4)[詳細設定]ボタンを押すと、地図上に表示するアイコン(マーカー)を指定したり、吹き出しのなかの編集が行える画面が立ち上がる。

◎地図の挿入ダイアログ・詳細設定(Yahoo!地図)
地図の挿入ダイアログ・詳細設定

◎地図の挿入ダイアログ・詳細設定(Google マップ)
Google マップの場合は、詳細設定でマウスでのドラッグを禁止したり、地図の概要の表示/非表示などもできる。
地図の挿入ダイアログ・

(5)吹き出しのなかの編集は、「アイコン」(Google マップの場合は「マーカー」)編集リストから選択して[編集]ボタンを押す。テキスト(文字列)あるいはHTML入力が可能。[参照]ボタンで選択できるのはテキストファイルとHTMLファイルのみ。吹き出しの中に画像を表示させたい場合は、わざわざ吹き出し用のHTMLファイルを作成しなくても、入力欄に直にIMGタグでのリンク(HTMLタグ)を書いてもOKだった。これは多少のHTMLの知識は必要。

09.03.27_04.gif(6)[OK]ボタンで完成。編集画面では以下のように表示される。転送前のプレビューも可能で、もちろん再編集も可能。

HTMLページを「保存」するときに自動生成された「hpbmapscript××.js」というJava Script ファイルを一緒に保存する。


--- 本当に簡単なのか? ---

既にホームページ・ビルダーのユーザーで、普段からオンライン地図サービスを触って使い慣れている人なら、迷うような箇所もなくこれだけ簡単にAPIでの地図ができるのは有難いです。初心者は吹き出しの中に画像を表示させる場合のHTMLタグ入力ができなくても、単純なテキスト入力なら問題ありません。

【作成例】
アプリケーションIDは掲載するサイト別に登録して発行されるので、ホームページとブログ、それぞれのアプリケーションIDを取得。またホームページ・ビルダー13の地図貼り付け機能では、1ページにひとつの地図の挿入しかできません。

Google Maps API によるカスタマイズ地図例(外部サイト/管理人ホームページ)
Yahoo! JAPAN Web API によるカスタマイズ地図例(外部サイト/管理人ホームページ)
【追記】ホームページ・ビルダー13のYahoo!地図作成機能において、複数アイコンを配置する場合に最後のアイコンの吹き出しが動作しないという現象があります。これはバグなのかどうかはわかりませんが、必ず発生するので要注意です。

ホームページ・ビルダー13で作成した地図はホームページ・ビルダー13仕様のコードなので、そのままブログの編集画面に貼り付けることはできません。その上ホームページ・ビルダー13のブログ編集機能(ブログエディター)では、マップ挿入機能は使えませんでした。つまりブログで利用するには向いていないようです。


--- どの程度までの地図が作れるのか? ---

試用してみてわかったのは、ホームページ・ビルダー13の地図挿入機能で可能なのは、任意の位置へのアイコン設置と「吹き出し」だけだったことです。まあ、機能紹介ページにも書いてあるのですが(^^;
明言すると、折れ線(ポリライン)や多角形(ポリゴン)は描けません。折れ線(ポリライン)や多角形(ポリゴン)やイベントを発生させるような地図を作成することは、ホームページ・ビルダー13では不可能でした。

Yahoo!地図に仮に折れ線を描いた地図を作成したいなら、Yahoo!デベロッパーネットワーク JavaScript版地図APIマニュアルを参考にして作ることにおなります。挿入されたHTMLソースを見ると、Yahoo!地図APIでのコードそのものではなく、ホームページ・ビルダー独自のコードが生成されているため、このソースを基に改造するのも無理があります。

ただし、Google マイマップなら線やシェイプ(Yahoo!地図APIでのポリゴン)も簡単に作成・挿入できます。
Google マップでコメントや画像付きのマイマップを作ってみませんか。(Google マイマップ)
マイマップの作り方/ビデオによる解説あり(Google マイマップ EXPO)

結論
情報を付け加えた地図をサイトに貼りたい場合
◎Googleマップで良いのなら、ホームページ・ビルダー13の機能に頼らずGoogle マイマップを利用すれば良い。むしろ、Google マイマップのほうが出来ることが多い。
◎どうしてもYahoo!地図を使った地図を貼りたいのなら、ホームページ・ビルダー13の地図の埋め込み機能は今のところ中途半端だけどそれなりに簡単便利。



拍手してくださるとうれしいです→ 拍手する

このエントリーをはてなブックマークに追加
posted by Masako at 09:58 | Comment(2) | TrackBack(0) | サイトに地図を貼る | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
拍手のコメントに出てくるイラストが、とっても可愛いですね。
よ〜くMasakoさんの特徴をとらえてて可愛いです。
特別に作成してくれた作者は?いるんですか?

おっとと…
本筋です。ここまで調べてくださってありがとうございます。
読者の一人としてうれしく思います(^_^)
Posted by 睦月 at 2009年03月28日 20:51
睦月さん
HPビルダーは、そういうことでした(笑)
私的には他の面でメリットがあるのですが、たぶん今回は購入を見送ります。

拍手のお礼ページでのイラストは、4パターンとも
フリー素材サイトからお借りしました。
似ているような似ていないような…ビミョーなところが気に入っています(笑)
Posted by Masako at 2009年03月28日 22:27
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
最近のトラックバック

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。