OCテックノート

Google Map API 有料化

Web開発者にとっては、悩ましい事態になりました。
今まで無料で利用できていたGoogle APIが2012年の早いうちから有料化されるということです。
いつの間にか、FAQにしれっと書いてありましたので、参考までに要約しておきます。

制限回数

一日当たり、25,000 回以上のMAP表示（通常のGoogle Map）
一日当たり、2,500回以上のMAP表示（Styled Mapsを利用している場合）

いきなり課金が始まるのか？

90日以上、連続して上記の回数を超えていない限り、課金の対象ではありません。

対象となるAPI

    Google Maps JavaScript API v2
    Google Maps JavaScript API v3
    Google Maps API for Flash
    Google Maps Image APIs

除外される団体

非営利目的のMAP利用などは、課金されないそうです。（災害マップなど）なお、非営利かどうかはGoogleが判断するそうです。

Google Earth Outreachに登録してあると、非営利だと認められやすいようなことが書いてあります。
http://earth.google.com/outreach/index.html

いくらなのか？

下記に記載があります。
https://developers.google.com/maps/faq?hl=ja#usage_pricing

超過分は1000ページビューにつき、1ドルということです。そこまで心配するような金額じゃありませんね。

課金体系は、ほかにMaps API for Businessというライセンス体系もあるようなので、上記では割にあわないサービスの場合は、Googleの販売に問い合わせたほうがよさそうです。
http://www.google.com/enterprise/earthmaps/maps.html

正確な情報が知りたい方は、下記のGoogle FAQを参考にしてください。
http://code.google.com/intl/ja/apis/maps/faq.html#usage_pricing

無料で使えるGoogle Map API使って趣味のHPを作っても、訪問者が多いと課金されるんですか？ — 教えて！ {2015-06-25 (木) 16:11:27}
こんにちは、すみませんがこちらではわからないので、Googleへ問い合わせてみてください。 — 中の人 {2015-07-01 (水) 14:45:30}

2018年6月22日

Google Map 2点間で線を引く

Ajax

Google Map APIを利用して、Google Map上で2点間で線を引く

Google Maps Javascript API V3

難しい話ではないのですが、ネット上にある話はちょっと古いものが多かったので、書いておきます。
2点だけでなくても、いくつでも複数の点の間を線が引けます。
とっても簡単です。

公式ページ　Polyline
http://code.google.com/intl/ja/apis/maps/documentation/javascript/overlays.html#PolylineOptions

から抜粋

 //Google Mapの初期化
 function initialize() {
  var myLatLng = new google.maps.LatLng(0, -180);
  var myOptions = {
    zoom: 3,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
 
 //Mapの作成
  var map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);
 
 //線を引きたい地点を、flightPlanCoordinatesという配列に、
 //google.maps.LatLngを作って格納します。
  var flightPlanCoordinates = [
    new google.maps.LatLng(37.772323, -122.214897),
    new google.maps.LatLng(21.291982, -157.821856),
    new google.maps.LatLng(-18.142599, 178.431),
    new google.maps.LatLng(-27.46758, 153.027892)
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });
  
  //ポリラインをMapにセットします。
  flightPath.setMap(map);
 }

2018年6月22日

Google Docs更新されたらメールをする

Googleツール

Google Docs更新されたらメールをする

共有でドキュメントを更新したり、保存できるGoogle Docsは便利なツールですよね。
何人かで共有することもできますが、たとえばだれかが更新した場合、更新があるかどうか見に行ったり、「更新したよ」と連絡するのは面倒です。

次の方法で、更新された場合に連絡がきます。

右上の「共有」ボタンの右横にある下三角のボタンをクリック
「通知ルールの設定」をクリック

後は、パネルに沿って好きな方法で設定してください。

2018年6月22日

Google Data APIサンプル　カレンダーの情報を取得するJavascript

Javascript

Googleカレンダーの情報を、自サイトに取り込むサンプル

Google Data APIを利用して、最新の予定の一覧だけ取得するサンプルです。
これはjavascriptを利用するものです。

元ネタ：Sample using the Google data JavaScript client library

http://gdata-javascript-client.googlecode.com/svn/trunk/samples/calendar/simple_sample/simple_sample.html

上記のURLにあるコードをちゃちゃっと使うため、解説を加えて説明します。

Googleカレンダーのアカウントを作り、公開をする設定にしておきます。ここでの話は、カレンダーが公開されることが前提です。公開したくない情報がある時はやめておきましょう！
カレンダー IDを控えておきます。***@group.calendar.google.com　というものです。
上記の元ネタサイトにて、①Retrieve a calendar by calendar address:というフォームに、自分のカレンダーのIDを入れて、Retrieveをクリックしてみましょう。予定が下に表示されましたか？
③Copy and Paste to your site:にあるコードを若干手直ししながら自分のサイトに貼り付けます。

 1行目　<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_KEY_HERE"></script>
 の?key=YOUR_KEY_HEREを消去
 
 18行目　loadCalendarByAddress('developer-calendar@google.com');
 の、developer-calendar@google.comを自分のカレンダーのIDに変更します。

 最後から2行目
 loadCalendar('http://www.google.com/calendar/feeds/developer-calendar@google.com/public/full');
 のdeveloper-calendar@google.comが、自分のカレンダーのIDになっているか確認します。

以上で終了です。
できましたか？

なお、表示される予定のフォントやカラーを変えたい場合は、上記のスクリプト中の

 <div id="calendarTitle"></div>
 <div id="events"></div>

のスタイルを変更してみましょう。

カレンダーをサイトに張り付けることはできますが、予定が多くなければ、見出しだけで十分！という場合、これを利用するとよいかと思います。

その他参考リンク

2018年6月22日

Google Analyticsを使う　9 各コンテンツの分析

Webサイト作成 TIPS

Google Analyticsを使う　3　上位のコンテンツを見るで見るように、たとえば、特定のページで閲覧が多い場合、どうしてそのページにユーザーが来ているのか、またどういうユーザーがよく訪問しているのか、分析したい場合があると思います。

その場合は、
すべてのレポート→コンテンツの最適化→コンテンツのパフォーマンス→上位のコンテンツ

と進みます。

すると、それぞれのコンテンツの項目の左に赤紫の丸に矢印が二つ上に向いているような、そんなアイコンがあると思います。

それをクリックすると、「分析オプション」という項目が表示されます。
下の方へ移動すると、「セグメント間のパフォーマンス」という項目が表示されます。
たとえば、そこで「キーワード」などを選択すると、その特定のページへ来るユーザーが検索しているキーワードがわかります。