追記：2022/08/09　作成：2020/12/12

追記：2022/08/09
作成：2020/12/12

風仙洞

Google サービスで歴史研究

  1. Google Chrome を利用する
  2. Google Map の基本
  3. Google アカウントを取得してログイン
  4. Google Earth を利用する
  5. Google Map をＷｅｂページで利用する
  6. Google Maps API を利用する

Google Chrome を利用する

Google Chrome は、インターネット検索サービスや Google マップ、メール・サービスである Gmail でも有名なＩＴ企業 Google が開発しているブラウザ、つまりインターネット閲覧ソフトです。

ある調査会社の先月（2020/11）の調査によると、Chrome 系（ＰＣ用＆スマホ・タブレット用合計）シェアは、約 64% に達するそうです。ちなみに Safari 系が約 7.2%、Firefox が約 5.1%、Edge 系が約 5.7%、Internet Explorer 11 が約 1.7% です。日本国内では世界よりもシェアは低いのですが、それでも約 46.8% ですから、事実上の標準と言えます。

もし、未だに Internet Explorer を使っているのでしたら、早く Chrome、或いはマイクロソフト製の Chrome の双子兄弟 Edge に乗り換えるべきです。業務システム利用でどうしてもＩＥが必要な場合以外はデメリットしかありません。使えるＷｅｂサービスも２０２１年以降どんどん少なくなるでしょう。

Chrome をインストールするには、他のブラウザで Google の検索ポータル・サイトである

https://www.google.co.jp/

に行くのが最も簡単でしょう。自動的に Chrome のインストールを勧められます。もちろん、

https://www.google.com/chrome/

でもダウンロードできます。

Chrome を利用するだけでも、

などのメリットがあります。

Google Map の基本

Chrome でマップを起動 Chrome を使っていなかった人でも、地図サービスとして Google Map を道路地図として使っていた人は多いでしょう。ネット検索すれば簡単に見つかりますが、Chrome を使っていれば、Google 検索ページで右上の９分割アイコンをクリックし、表示されたアイコン群の中から Google Map をクリックすると起動出来ます。

Google Map のハンバーガー・メニュー・アイコン Google Map には表示モードが３つあります。選択は左上のハンバーガー・メニュー・アイコン（３本線のアイコン）をクリックすると現れるメニューから選べます。

Google Map のメニュー（モード選択部分）

道路地図モード
道路地図モード

航空写真モード
航空写真モード

地形モード
地形モード

道路地図モードは、特定の住所への行き方を調べるのに適しています。大抵の人はこのモードしか利用していないのではないかと思われます。

航空写真モードは、その場所の利用状況を調べるのに適しています。海底地形も描写されます。

地形モードは、自然地形を確認するのに適しています。1000 年以上昔の状況を調べるには、基本的にはこのモードが適しているでしょう。

いずれにしても、河道の移動、埋め立て、海岸での土砂の堆積・流失、地殻変動による隆起・沈降もあり得ることを頭に入れておく必要があります。更に数千年単位の過去を調べる場合は、海水面の変動も考慮する必要があります。例えば約 18000 年前をピークとするヴュルム氷期の海水面低下は、130 m にも達していました。

Google アカウントを取得して Chrome でログイン

Chrome を Google アカウントと連携させることにより、更にインターネット環境が便利になります。

新規に Google アカウントを取得するには、いくつかやり方がありますが、取りあえず次のやり方を紹介します。

  1. ブラウザ Chrome を起動し、検索画面を表示する。
  2. 右上にある３×３の枡目アイコンをクリック。 Google 検索画面
  3. 「アカウント」のアイコンをクリック。 「アカウント」アイコンをクリック
  4. 上部の「アカウントを作成する」の部分をクリック。 「アカウントを作成する」を選択
  5. 次の「Google アカウントの作成」画面では、
    • 新規に Gmail アドレスを取得して Google アカウントとして使う
    • 既に持っている Google 以外のメールアドレスを Google アカウントとして使う
    の２つが選択可能。 Google アカウントを作成

    パスワードがわからなくなるとログインできないので、きちんと記録しておいて下さい。ブラウザのパスワード記憶機能に頼りっきりになるのは危険です。

  6. この画面で入力を終えたら、「次へ」ボタンをクリック。

その後は画面の指示に従って個人情報を入力すると目出度く Googe アカウントができます。

Gmail や G ドライブ を選択

できたアカウントにログインするには、Chrome の検索画面で右上のログイン・ボタンをクリックして行います。ログインするアカウントの候補が表示されるので、パスワードを入力して下さい。

Chrome にログインした上でアプリ・メニュー・ボタンをクリックし、Gmail や G ドライブを利用します。

Ｗｅｂ版 Gmail
Ｗｅｂ版 Gmail

Google ドライブ
Google ドライブ

Google Earth を利用する

スマホ・アプリ版 Google Earth による東シナ海

Google Earth は「地球情報ソフト」です。Google Map の「写真（航空写真）」モードと比較して、

という特徴があります。

一口に「Google Earth」と言っても、実は３つあります。

この中で最も Google Earth らしいのが、当然ながらＰＣ版、やや性格が異なるのがＷｅｂ版です。

Google Earth Pro による極東地図＋「定規」の作画例

上の画像は Google Earth Pro の「ツール」→「定規」機能を利用した例ですが（画像をクリックすると拡大表示）、

を重ねてみました。

次はＷｅｂ版 Google Earth です（実は私が夢想するさいたま市のＬＲＴ路線案。Chrome のタブ、URL 欄、ブックマーク・バーは省略）。

さいたま市のＬＲＴ路線案

Ｗｅｂ版 Google Earth を起動してさいたま市を表示した上で、

KML ファイルをインポート

  1. 左端のツールアイコンの中の「プロジェクト」アイコンをクリック
  2. 「新しいプロジェクト」ボタンをクリック
  3. Google ドライブかＰＣ内から私が作成した KML ファイルをインポート

するとこの画面になります。

KML ファイルを作成するには、左下のギザギザのアイコンをクリックして線の描画を開始し、描画が終わったら保存です（他の方法もあります。色や太さは選択可能）。陸路や航路の描画に利用できます。

Google Earth Pro で作成した KML ファイルをブラウザ版 Google Earth にインポートすることもできます。

地図１：アフリカから東アジアへ powered by Google Earth

Google Earth Pro では折れ線だけでなく、円や多角形も描画できますが、作図した結果を「お気に入り」として KML ファイルで保存します。Windows系 PC でのファイル名は、

C:\Users\(アカウント名)\AppData\LocalLow\
Google\GoogleEarth\myplaces.kml

です。このファイルを別のフォルダにコピーし（必要ならばリネームして）、Ｗｅｂ版 Google Earth にインポートすると、折れ線の追加・編集（色・太さ）が可能になります。

Google Map をＷｅｂページで利用する

Google は、Google Map の地図データをＷｅｂページの中で利用する方法をいくつか提供しています。

  1. URL として利用する。
  2. <iframe> 要素としてＷｅｂページに埋め込む。
  3. Google Maps API を利用する。

1. の例は、
https://www.google.co.jp/maps/@34.5698331,135.7466361,11z/data=!5m1!1e4
です。「34.5698331,135.7466361」は緯度と経度、「11z」はズーム率（最大 21z）、「data=!5m1!1e4」は地形モードの指定です。Chrome の URL 欄をコピーすれば得られます。道路地図モードは、「data=～」の部分がありません。航空写真モードの場合は、ズーム率の代わりに撮影高度「44890m」があり、「data」の値は「!3m1!1e3」です。また、取得方法の説明を省略しますが、短縮 URL を得ることもできます。
短縮 URL の例：https://goo.gl/maps/ZjwdFebMsMU2tYcB6

Google Map を共有

URL をシェア地図を埋め込む

2. の例は、下の埋め込み地図です。

Google 提供の元々の HTML ソースは、
<iframe src="https://www.google.com/maps/embed?
pb=!1m18!1m12!1m3!1d6572.676780634516!2d135.84068043916247
!3d34.54498665534343!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!
4f13.1!3m3!1m2!1s0x60013491d1859de9%3A0xcfefb763bb06ac5d!
2z57qS5ZCR6YG66Leh!5e0!3m2!1sja!2sjp!4v1607615808839!5m2!
1sja!2sjp" width="400" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
です。互換性確保のためか、旧バージョンの HTML に準拠しています。

マーカーを表示しない場合は、目標を中央に表示した上で、Chrome のハンバーガー・メニューから「地図を共有または埋め込む」を選び、「地図を埋め込む」タブを選んだ上で、「HTML をコピー」をクリックします。更に作成中の HTML ファイルにクリップボードのデータを貼り付けてやれば出来上がりです。

Google Maps API を利用する

Google の地図データは、Google Maps API によりカスタマイズしてＷｅｂページの中で利用することも出来ます。下の地図は、 Google Maps Static API で中国内モンゴル自治区包頭市の１２の有名地点にマーカーを表示したものです。

Google Maps Static API による包頭市中心部の地図
  1. 包頭市政府
  2. 青山区人民政府
  3. 九原区人民政府
  4. 東河区人民政府
  5. 包頭駅
  6. 包頭東駅
  7. 包頭机場（空港）
  8. 包百大楼（デパート）
  9. 包百青山超市（デパート）
  10. 建設路・鋼鉄大街・労働路交差点（跳ね回る鹿３頭の銅像がある）
  11. 阿尓丁植物園
  12. 内蒙古科技大学

上の例では、役所を黒（black）、鉄道駅を白（white）、デパートをオレンジ色（orange）のマーカーで表示しています。残念ながら、まだ私の勉強が不十分で、動的操作（拡大・縮小・移動）が出来ませんし、直線や図形の描画も実現していませんが、遺跡などの種類を色で、名称との対応をラベル（数字やアルファベット）で表現すれば、歴史書のモノクロの地図よりは見やすくなると思います。

さて、上の地図は、マーカーの数が多いので、マーカーの少ない地図で説明しますが、事前準備として Google Cloud Platform で登録（メールアドレス、名前、住所、クレジットカード）し、API Key を発行してもらうことが必要です（英語ページ）。Android スマホを利用していれば、既に恐らく GooglePlay で登録している情報です。API の利用は有料ですが、初回１年間または一定表示回数まで利用できる $300 分のクーポンがあり、その後も毎月一定表示回数までは課金されません。

Google Maps Static API による地図

HTML のソースを表示すると、次のようになります。

● HTML
  • <p class="center">
  • <img src="https://maps.googleapis.com/maps/api/staticmap?
    center=33.307984,130.364586
    &zoom=10&size=400x300&maptype=hybrid
    &markers=color:blue%7Clabel:A%7C33.329293,130.384198
    &markers=color:green%7Clabel:1%7C33.423424,130.598615
    &markers=color:red%7Clabel:Z%7C33.286241,130.116352
    &key=YOUR_API_KEY" alt="Google Maps Static API による地図">
  • </p>

※上の HTML の説明では見やすいように区切りの良いところで改行していますが、実際には任意のところで改行すると指定通りになりません。

上記 HTML ソースのように、img 要素の src 属性に記述しますが、解説すると、

注目するべきは、「&markers=」で始まる行が繰り返されることです。表計算ソフトを使い慣れた人ならば、この部分はセルのデータと固定文字列を連結すれば作成できると閃くでしょう。私はデータベース・ソフトの『桐 for Windows』（管理工学研究所）でデータを入力する予定です。

遺跡等の名称や種類（形式、年代）は書籍やインターネット上のＷｅｂサイトから得ることになりますが、緯度・経度の情報をどうやって入手するかに難点がありました。従来の手法の弱点はここにあり、地図と緯度・経度データをなかなか入手できなかったのです。しかし、実は上手い方法があって、Google Map から入手できます。

やり方は単純です。

緯度・経度情報をクリップボードにコピー

  1. ＰＣで Google Map を起動する（ブラウザは Chrome に限らず、Edge でもＯＫ）。
  2. 緯度・経度情報を取得したい地点を右クリックする（するともうウィンドウの上部に緯度・経度が表示されている！）。
  3. 緯度・経度が表示された部分をクリックする（マウスカーソルをホバーさせる時に、背景色が薄い灰色に変化する）→ データがクリップボードにコピーされる。
  4. データ蓄積用に使う表計算ソフトやデータベースソフトで、ペーストする。
  5. ペーストされたデータの小数点以下の桁数が多すぎるので（６桁で十分）、計算式を仕組んでおく。

これだけです。数ヶ月前までは少し下の「この場所について」をクリックし、表示されたウィンドウの中の小さい文字で書かれた緯度・経度情報をコピーすることが必要で、手際よくコピーするにはコツがありましたが、ずいぶん楽になりました。

なお、『桐』の場合、空白を含んだ項目 [緯度・経度] のデータ（例えば「33.54235180079895, 130.2286291325467」）から小数点６位までの緯度、経度を取り出す計算式は、

● 緯度
#str(#四捨五入(#num(#対応文字列(#trim([緯度・経度],4),1)),6),-6)
● 経度
#str(#四捨五入(#num(#対応文字列(#trim([緯度・経度],4),2)),6),-6)

です。考え方は、

  1. #trim 関数により、[緯度・経度] のデータから余計な空白文字を削除する。引数「4」は「全て（位置に関係なく、半角・全角どちらであろうと）」。日本限定ならば #sstr 関数で何番目から何番目の文字を取り出すか指定できますが、汎用性を持たせました。
  2. #対応文字列 関数により、カンマ「,」で区切られた何番目のデータかを指定する。
  3. #num 関数により一旦数値データに変換した上で、#四捨五入 関数により小数第７桁を四捨五入して小数第６桁までのデータにする。
  4. #str 関数によりデータを文字列化する（数値データのままでは文字列と連結できない）。引数の「-6」は、小数点以下の桁数を６桁に揃えるため。

連結データを作成する計算式は、

"&markers="+#cond([大きさ]="normal","",1,"size:"+[大きさ]+"%7C")+"color:"+[色]+"%7Clabel:"+#uc2([ラベル])+"%7C"+[緯度]+","+[経度]

となります（#uc2 は、半角英小文字を大文字にする関数）。無事連結データ
「&markers=size:mid%7Ccolor:red%7Clabel:B%7C33.542352,
130.228629」
を取得できました。ちなみに「size:～」「color:～」「label:～」は位置を入れ替えても大丈夫なようです。

Google Maps Static API による地図

border-radius を設定し、更に斜めに傾けて作成した楕円を地図に重ねてみました。グラデーションは、linear-gradient での角度の指定が transform: rotate に影響されるかどうかの確認のためです。

Google MAP Static API による地図

任意の経度・緯度を直線で結び、囲まれた内側を透明度指定で塗りつぶすことも可能です。

Google Maps Static API による多久～吉野ヶ里～甘木
Google Maps Static API による多久～吉野ヶ里～甘木
  • A：朝倉市甘木
  • Y：神埼市吉野ヶ里
  • T：多久市

前述のように、私の勉強が不十分なので、上記の例しか示せませんが、Google Maps API で出来ることは他にも色々あります。大学卒業程度の英語力があれば、下の各ページをご覧下さい（総合案内は「Google Translate」での日本語に切り替えることも出来ますが、それだけ日本語でも中途半端）。