【参照URL】

Transcription

1 2007 年度高等学校教員対象 IT 講習会 G コース : Google Maps API でタウンマップ作成 -WEB2.0 技術 2007 年 8 月 2 3 日 Web 総合技術科

2 GoogleMapsAPI によるオリジナルマップの作成 GoogleMapsAPI でタウンマップ作成 Google の地図を使って 自分だけのオリジナルポインティング付きのマップをつくることができます ここでは 最も簡単な方法だけを説明します 詳細な解説を知りたい人は 他の資料 ( 本や Web サイト等 ) で調べてください サンプルファイルの URL は文末にあります ダウンロードしていただいて結構ですので御利用ください なおこの仕組みは XHTML 文書構造 JavaScript の知識があると理解の助けになることを注記しておきます 各種ソフトの入手と作成作業の流れ 個人メールアドレスの確保 ブラウザで確認 ホームページエリアの確保 サーバへの転送 GoogleMAPs キーの入手 マップコンテンツの制作 開発用ソフトの入手 LHACA 解凍ツール FFFTP アップロード TeraPad エディタ 1

3 事前準備編 個人用パソコンメールアドレスホームページエリアを取得する際には ほとんどの場合個人のメールアドレスが必要になります 本人確認という意味でも必要になると考えたほうが良いでしょう フリーメールアドレスメールアドレスは 学校などの職場で発行されるメールアドレスでも個人用のものでも構いません 最近ではメールボックス ( メールの受診箱 ) の容量が大きなものも出てきていますので それらを利用するのも一つの方法です また フリーメールの場合 Web メール 機能を備えているものが多く 外出先からでもメール送受信 ( メーラー ) ソフトを設定することなく ブラウザ上でメールのやり取りが出来るのも大きな特徴です また スパムメール ( いわゆる迷惑メール ) を遮断する機能がついているものなども増えてきています 業務用のメールアドレスとプライベートのメールアドレスを使い分けることも一つの方法です フリーメールアドレスを取得する際に 既得のメールアドレスを申告しなければならないケースもありますので確認が必要になります いろいろ意見もあるかもしれませんが Google が提供する GMail はメールボックス容量 7.5GB で Web メール機能を備え 迷惑メール対策を備えており アドレス取得時に既存メールアドレスの申告が要らないという意味においてはオススメかもしれません ホームページエリアフリーホームページリンク集 : 2

4 LHACA の使用法 LHACA は村山富男氏が作成したファイル圧縮 解凍のソフトウェアでフリーソフトとして公開されています DLL などのライブラリソフトを必要とせず 単独で使えるのが大きなポイントです ダウンロード先 からダウンロードできます インストール ローカルディスクの適当な場所にフォルダを作り 上記のページからダウンロードしてきて保存します 自己解凍 (.exe 形式 ) ですので ダブルクリックすればそのままインストールが始まります デフォルトで c:\program Files\Lhaca というフォルダを作りますので 特に問題のない場合はこのままにします インストールが終わるとデスクトップ上に右のアイコンが表示されます カスタマイズ デスクトップ上のアイコンをダブルクリックして開きます 設定画面が表示されます デフォルトでは デスクトップに解凍先 / 圧縮先が指定されていますので 変更して ファイルと同じ場所に指定します その他の設定もありますが 一般的にはこのままで OK です 使用方法 解凍 ( または圧縮 ) したいファイル ( またはフォルダ ) をドラッグ & ドロップすれば解凍 ( または圧縮 ) されます 3

5 FFFTP の使用法 FFFTP とは FFFTP は曽田純氏が作成した FTP クライアントソフト ( フリーソフト ) で Vector などから無料ダウンロード可能です GUI を利用し ウィンドウの左半分にクライアント, 右半分にサーバの内容を表示するなどわかりやすい配置になっています また 漢字のコード変換などもおこなってくれます ダウンロードとインストール からインストール用のファイルがダウンロー ド可能です Lhaca などの解凍ソフトを使って解凍すれば OK です FFFTP の起動 デスクトップ上のアイコンをクリックすれば FFFTP が起動します 初回起動時の設定項目 Anonymous FTP を利用する際に使 うメールアドレスを入力します FFFTP の接続 FFFTP を起動します 1) 一覧に登録してある接続先が表示されますので 接続 をクリックします 接続したいホストがない場合 次節の接続先設定をしてから接続します ホスト一覧が表示されていないと きは をクリックします 4

6 2) 下記のような画面が表示され接続されるようになります GoogleMapsAPI でタウンマップ作成 のアイコンをクリックして アップロードするファイルが保存されているフォルダを表示します 同様に サーバー側のフォルダも指定します 接続先設定 1) 接続先を登録します 新規ホスト をクリックしてく ださい ホスト一覧が表示されていない ときは をクリックします 2) 各項目を設定します ホストの設定名上のウィンドウ ( ホスト一覧 ) に表示される名前です 自分がわかりやすいようにつけます ホスト名ホストサイトから指定されたホスト ( サーバ ) の名前またはIPアドレスユーザ名ホストサイトから指定されたユーザ名パスワードホストサイトから指定されたパスワード 5

7 最後にアクセスしたフォルダを次回の初期フォルダとする にチェックを入れます こうすると2 回目以降起動したとき ローカル側のフォルダをいちいち設定しなくても 前回作業した最終段階でのフォルダが初期値として表示され 作業が楽になります 設定が完了したらば OK ボタンをクリックします GoogleMapsAPI でタウンマップ作成 FFFTP フィヤーウオール設定 FireWall などで護られている企業内 LAN などの場合 外部のインターネットに対して直接接続し FTPを利用できないように制限してある場合があり ( ほとんどです ) ます このような場合には FireWall の設定をしなければなりません 1) プロファイル側設定ホスト一覧で接続するホストを選び 設定変更 をクリックします 接続先設定でホスト名などの設定をしたウィンドウが表示されます 拡張 のタブをクリックします 下記の画面になります FireWallを使う にチェックを入れます 設定が完了したらば OK ボタンをクリックします 6

8 2) オプション側の設定 FTP 画面のメニューバーからオプション - 環境設定を選びます オプションのウィンドウが表示されますので FirwWall タブをクリックします FireWallのタイプ を選びます いくつかのタイプがありますので 選択メニューの中から選んでください FireWallホストに FireWall の名前を入れます ネットワークにより個別に設定されています FireWall やプロクシサーバなどの名称を入れますこの項目はネットワーク管理者に確認して入力してください 設定が完了したらば OK ボタンをクリックします 7

9 パーミッション設定 ( 各種設定 ) GoogleMapsAPI でタウンマップ作成 インターネットでファイルをサーバにアップロードした後から ファイルに対していろいろな変更などをする必要が発生することがあります 特に cgiプログラムを利用する場合 プログラム本体やデータに対してパーミッション設定をし 保護しなくてはなりません そのほかにも クライアントからサーバ内のファイルなどに対して直接操作をすることができます 方法 - 基本操作操作したいファイル ( フォルダ ) をマウス右クリックします 操作可能なメニューが表示されますので対象となるメニューをクリックします パーミッション設定変更の実際例 上記のメニューから 属性変更 を選びます 下記のウィンドウが表示されますので 該当する項目のラジオボックスのチェックを On/Off します パーミッション数値が現在の属性のフィールドに表示されます このフィールドに直接数値を入力することも可能です 設定が完了したらば OK ボタンをクリックします 8

10 TeraPad の使用法 寺尾進氏の作成したテキストエディタソフトです からダウンロードできます LACHA などの解凍ツールで解凍し使用します 初期画面 インストール後起動すると下記の画面が表示されます このままですと メモ帳などと変わりませんので 使いやすいようにセットアップします マウスでメニューバーの表示をクリックしサブメニューからオプションを選んでください 基本項目設定 タブ文字数 1 行の文字数 行折返しなどの基本項目の設定をおこないます タブ文字数はホームページコンテンツを作成する場合には2 文字くらいが適当なようです 1 行あたりの文字数は80 文字に設定し 折返すのが一般的です 9

11 表示オプション設定 スペースなどの文字表示の方法を設定します タブや全角空白などを表示する設定にしておくとコンテンツ開発等の場合に便利です GoogleMapsAPI でタウンマップ作成 行番号 / ルーラー設定 行番号の表示 / 非表示を設定します ルーラーは行の中の文字数がカウントできるものです 行番号は文字通り行数を表示します ここで論理行とありますが 1 行の文字数が80 桁を超える場合 画面上では 2 行に表示されますが これを1 行としてカウントするのが論理行です 改行コードを区切りとして行数をカウントする方法です 10

12 ウィンドウ / 漢字コード TeraPad 起動時のウィンドウサイズと改行コードを設定します ウィンドウサイズは マウス操作で使いやすいサイズに設定した後 このウィンドウを開いて現在のサイズ 現在の位置をクリックすれば簡単です GoogleMapsAPI でタウンマップ作成 漢字コードは一般的には SHIFT_JIS コードが利用されていますが ホームページによっては UTF-8 が利用条件となっていることもあります そのような場合にはここで設定をおこないます 印刷 メニューバーファイル - 印刷をクリックすると右のウィンドウが表示されます プリンタの設定でプリンタを選択します フォントの設定でフォント種類とサイズを設定します 行番号の にチェックを入れると行番号も印刷されます 印刷をクリックすると印刷が開始されます 11

13 GoogleMapsAPI の準備 GoogleMaps キーの取得 GoogleMaps を利用するためには Google のサイトから API キーの発行を受けなくてはなりません その API キーを HTML ファイルに記述することにより利用が可能になりますので 必須項目となります 1) のページを開く 2)Sign up for a Google Maps API key をクリック 3)Google Maps API Terms of Use をよく読み I have read and agree with the terms and conditions (printable version) の にチェックを入れる 4)My web site URL: に掲載するページのURLを入力パスを設定する場合にはパスまで指定すること 5)Generate API Key をクリック 6)Your key is: 以下にキーが表示されるのでコピー メモ等の方法で保存 This key is good for all URLs in this directory: 以下に掲載 URL が記載されるので確認 7)Here is an example web page to get you started on your way to mapping glory: にサンプルコードが表記されるので サーバにアップして確認 保存文字コードはUTF-8 GoogleMapsAPI を利用する際の文字コードは UTF-8のみ利用可能です Shift_JIS など UTF-8 以外の文字コードですと 地図自体が表示されなくなります エディタソフトで 記述した XML 文書を保存する際に UTF-8 コードであるか確認してください TeraPad0.88 の場合ツールバー [ 表示 ]-オプションを選び文字コードのタブを開きます 12

14 サンプルファイルの解説 GoogleMapsAPI でタウンマップ作成 基本構造 <script src=" key=abqiaaaail49afghki9zftjimfutgxtlvghrbp44xtufjfxdessintjgrhtxdywsmewgp ssw3j5sazwq6kadeg" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> function createmarker(point, icon, html) { 文字コードは utf-8 Google キーの入力 } function load() { 2 var marker1 = createmarker(new GLatLng( , ), icon, "<div align='center'><a href=' target='_blank'> 安田学園高等学校 </a><br /><img src='bronz.jpg' /><br /> 安田善次郎翁銅像 </div>"); map.addoverlay(marker1); } </script> 1 </head> <body onload="load()" onunload="gunload()" bgcolor="khaki" background="mapbg.jpg" width="99%"> <div id="map" style="width: 700px; height: 500px"></div> </body> 参考画像編集ソフトホームページを作り始めると写真などの画像ファイルを貼りつけたくなります 文字だけで説明するよりも写真や図があったほうが分かりやすいホームページになります 最近は簡単に取り扱うことができるデジタルカメラも比較的安く入手することもできますし 携帯電話のカメラを使ってきれいな写真をとることもできます でも これらの写真などをホームエージに貼り付けるには注意が必要です そのままの大きさではブラウザの表示部分からはみ出してしまいます タグの属性でサイズを小さくしても送信される画像データの容量は元のままですからネットワークに負荷をかけるだけで無駄なものになってしまいます これらを解決するためには画像編集ソフトを利用する必要があります Adobe 社の PhotoShop がデファクトスタンダードで多くのプロに利用されているものです フリーソフトとしては GIMP( などから入手可 ) の利用者が増えています 使い方も などのページで解説されています いろいろとチャレンジしてみてください 13

15 html ファイル解説 : のソース GoogleMapsAPI でタウンマップ作成 Script 部分設定 14 行目 GoogleMapKey 指定 アイコン形状設定 行目アイコン1 形状設定 ( アイコンの形状等は任意設定 ) 参照 行 addcontrol メソッド GMapTypeControl() 地図 / 航空写真切り替えスイッチ表示 GLargeMapControl() スライドバー表示 GSmallMapControl() 左右移動キーまで表示 GSmallZoomControl() 拡大縮小ボタンだけ表示 50 地図中心位置の設定 ( 北緯, 東経 ), ズームレベル 行 各ポイントの情報 ( 北緯, 東経 ), アイコン形状, メッセージ (XHTML 形式 ) var marker1 = createmarker( new GLatLng( , ), 緯度 経度情報 記述内容 (XTML) 形式 icon, アイコン形状 " <div align='center'><a href=' target='_blank'> 安田学園高等学校 </a><br /><img src='bronz.jpg' /><br /> 安田善次郎翁銅像 </div>" ); Map.addOverlay(marker1); body 部設定 61 行 body の属性で 1) ページが開いたときに起動するスクリプトを指定 2) 背景画指定 62 行表示エリア内タイトル ( 表示部分 ) 設定 63 行サイズ指定地図の大きさをピクセルで指定 14

16 ポイント情報の作り方 1. ポイントにしたい場所の名前 ( 店名等 ) を決めます 2. 詳細情報を調査します 3. 緯度経度を調べます Geocoding で調べることができます 住所を入力します 日本語で入力可能です 住所の数字は半角で入力したほうが精度が上がるようです 結果が表示されます GoogleMaps 上に吹き出しで表示されます 北緯, 東経の順に表示されるのでコピー & ペーストでの利用が可能です 住所で入力 学校名で入力 ( 会社などの場合でないこともある ) ズームアップして拡大表示 地図の中心に表示させたい場所をダブルクリック 地図の中心が したい位置に変わる 中心位置の緯度経度が表示される 15

17 4. アイコンの形状を選びます GoogleMAPS で使えるアイコンは などのページで探すことができます スクリプト以下の部分で指定をします var icon = new GIcon(); icon.image = " icon.shadow = " icon.iconsize = new GSize(12, 20); icon.shadowsize = new GSize(22, 20); icon.iconanchor = new GPoint(6, 20); icon.infowindowanchor = new GPoint(5, 1); icon の変数名を変えて 数種類のアイコンを同じ地図の中に表示させることもできます また 自分で作ったオリジナルのアイコンを表示させることもできます 5. 文章を作成します XHTML 形式で記述することができますので リンクボタンを設定したり 写真を貼り付けたりすることも可能です 6. スクリプトに記述していきます 16

18 XHTML 文書の作り方 XHTML はホームページを作成するために使われるマークアップ言語です 従来は HTML が主流でしたが DOM などのプログラムから操作できるように XML の文法に従って記述する XHTML でホームページを作成するサイトが増えてきています マークアップ言語はタグ ( < と > で囲まれた命令 : マーク ) で操作を指示する方法です 基本文法 -1 開始タグ & 終了タグ [ 例 ] 文字フォントを大きくし 色を赤にする命令 <font size= +2 color= #ff0000 > 高校教員対象セミナー </font> [ 例 ] 日本電子専門学校という文字をクリックすると そのページに飛びます <a href= target= _blank > 日本電子専門学校 </a> 基本文法 -2 空タグ [ 例 ] 写真 ( イメージ ) ファイルを貼りつけます <img src= img/photo001.jpg width= 300 hight= 160 alt= test /> [ 例 ] 改行する <br /> 解説基本は開始タグと終了タグの組み合わせで < ここから >~< ここまで > という形で指定し 間の~ の部分をいろいろな命令で飾り付けていくという方法です ただし 行を変えるときは < ここで > という意味になりますし 写真を貼り付けるときには < ここに > という意味になりますので終了タグの意味自体が曖昧なものになってしまいます <br></br> という記述方法もあるのですが 終了タグの意味がほとんどありません そのため 開始タグの最後に / を記述して終了タグを兼ねるというのが空タグの考え方です 解説 HTML 文書ではタグは大文字 小文字のどちらでも使用可能でした size などの属性を指定する際も = の右辺を で括らなくても OK でした 言い方は悪いですが いい加減 に作ってもブラウザが何とか解釈して表示していただけなのです しかし ホームページがプログラムなどと連動するようになると厳密性が要求されるようになります XML の文法はこのあたりを厳密に記述することを要求しています タグの命令である要素や属性は小文字で記述することや属性値の指定である=の右辺は必ず で括ります 空タグの記述もしっかりしてください 17

19 練習 1. 自分の家をマーカー表示してください 2. 自分の家の最寄り駅をマーカー表示してください 3. 自分の学校 ( 職場 ) をマーカー表示してください サンプルファイル 参照 URL GoogleMapsAPI を使用するに当たり 以下のページを参考にしてください 経度 緯度を調べるためのページ 利用方法をよく読んでくださいまた 関連する書籍も出版されていますので参考にされると良いでしょう 参考文献 Google Mapss APIv2 活用リファレンス アイティティ 技術評論社 GOOGLE MAPSS HACKS Rich Gibson 他オライリー 注 現在市販されている GoogleMaps 関連書籍の中には 以前の Ver1.* を対象としたものがあり ます 最新のバージョンは Ver2.* ですので Ver1.* の文法では動作しないものが殆んどです 購入に際しては対応するバージョンをチェックしてから御購入ください 18