Google Maps API で地図をカスタマイズしてみる 2016 → 2017

Webサイト制作では必ずと言ってよいほどお世話になっている「Google Maps」。
ディレクションにまわるようになってからは直接コードを触る機会も少なく、カスタマイズも未経験のままだったので、ここでひとつ勉強のためにやってみようと思い立ちました。
2016年6月と10月に仕様変更がされているため、Web上の情報には古い(仕様変更前の情報)ものが多く悩みながらの実装となりました。

古い情報で実装して一旦失敗、その後新しい手法で実装成功、の流れで記載していきますのでお急ぎの方は「APIキーが必要」からご覧ください!

Google Maps API で地図をオリジナルにカスタマイズ!

【1】Google Maps APIをhead内で読み込む

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

…と書くだけです。
※後ほどのべますが、これだと地図が表示されず困ることになります。

【2】bodyタグにonloadを記述

<body onload="initialize();">

【3】地図を埋めたい場所に指定のコードを記述

※jsは適宜外部ファイル化してください

<script>
function initialize() {
  var latlng = new google.maps.LatLng(43.0685834,141.348829);/*表示したい場所の経度、緯度*/
  var myOptions = {
    zoom: 15, /*拡大比率*/
    center: latlng, /*表示枠内の中心点*/
    mapTypeId: google.maps.MapTypeId.ROADMAP/*表示タイプの指定*/
  };
  var map = new google.maps.Map(document.getElementById('gmap_ct'), myOptions);
/*スタイルのカスタマイズ*/
 var styleOptions =
[
 {
 "featureType": "landscape.natural",
 "stylers": [
 { "color": "#90c892" }
 ]
 },{
 "featureType": "road",
 "stylers": [
 { "gamma": 2.61 },
 { "color": "#ffffff" }
 ]
 },{
 "featureType": "transit.line",
 "stylers": [
 { "invert_lightness": true },
 { "visibility": "simplified" },
 { "color": "#ffbe00" }
 ]
 },{
 "elementType": "labels.icon",
 "stylers": [
 { "visibility": "off" }
 ]
 },{
 "featureType": "landscape.man_made",
 "elementType": "geometry",
 "stylers": [
 { "visibility": "simplified" },
 { "color": "#ffce5f" }
 ]
 },{
 "featureType": "poi",
 "elementType": "geometry",
 "stylers": [
 { "color": "#ffde5b" }
 ]
 },{
 "featureType": "water",
 "stylers": [
 { "color": "#dfe8ff" }
 ]
 },{
 "featureType": "transit.station",
 "elementType": "geometry",
 "stylers": [
 { "color": "#fab022" }
 ]
 }
];
 
 var styledMapOptions = { name: 'あーと・とー' }
 var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
 map.mapTypes.set('sample', sampleType);
 map.setMapTypeId('sample');
 
/*オリジナルアイコンの取得*/
var icon = new google.maps.MarkerImage('/xxxxxx.png',/*アイコンの場所*/
 new google.maps.Size(44,44),/*アイコンのサイズ*/
 new google.maps.Point(0,0)/*アイコンの位置*/
);
 
/*マーカーの設置*/
var markerOptions = {
 position: latlng,/*表示場所と同じ位置に設置*/
 map: map,
 icon: icon,
 title: 'ここです'/*マーカーのtitle*/
};
var marker = new google.maps.Marker(markerOptions);
 
}
</script>
<div id="gmap_ct" style="width:100%;height:640px;"></div>

※ソースコードは参考サイト様より
※色に関するカスタマイズは奥が深いので、今回は解説省略です。
スタイル化されたマップ |Google Maps JavaScript APIをご参照ください。

…さて、これでまずは地図が表示されるはず、だったのですが。。。

スクリーンショット 2017-01-15 1.39.13

エラーが発生してしまいましたね。

APIキーが必要

2016年6月22日から新規サイトでGoogle Mapsを使用する場合はAPIキーが必須になりました。
参考サイト様

APIキーが必要…といわれても、特に取得せずとも表示されているサイトもあるよ?
と思っていたら、2016年の6月22日から仕様が変更された模様。
それ以前のものは、APIキーなしで表示されているという事のようです。

では早速、APIキーを取得していきましょう。

1)ウェブ向け Google Maps API へアクセス。

スクリーンショット 2017-01-15 2.01.382)画面右上のキーを取得ボタンをクリック。Google Maps ウェブ API をアクティベートする、のウィンドウが出たら、右下の「続ける」をクリックします。

3)Google APIs に移動しました。画面の指示に従い進みます。
スクリーンショット 2017-01-15 2.08.564)Keyに任意の名称をつけて、進みます。
スクリーンショット 2017-01-15 2.12.502017-01-15-2.16.535)取得した「キー」をhead内で読み込みます。

<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxx"></script>

6)「エラーが発生しました」と表示されていた場所に、無事GoogleMapが表示されました!
スクリーンショット 2017-01-15 2.26.16

Google Maps API 無償版には制限がある

Google Maps API 無償版のポリシー変更により2016年10月12日より地図が表示されない場合があります。

1.APIの使用が25,000回/日を超えた場合、以後エラーとなり地図が表示されない。

2.Google Maps APIが古いバージョンの場合、エラーとなり地図が表示されない。

参考サイト様より

…ということで、今まで使っていたものが使えなくなる場合があるのですね。
こちらの仕様についても要注意です。

おすすめ記事

 

Webサイトで使えるフォント〜font-family〜

個人的なメモ。
標準搭載フォントを並べて見た目で比較してみたくなりました。

標準搭載 ゴシック系フォント(日本語)

fonts01

Windows 8.1、OS X Mavericks(10.9)からは、游ゴシック体が標準搭載され、WinとMac両方で表示が可能となりました。

日本語フォント(Webフォントおすすめ)

fonts02

ご存知、Googleフォントの日本語フォントです。癖のない、美しい書体。これが無料というのが本当にありがたい。

欧文フォント(Webフォントおすすめ)

fonts03

どちらもGoogleフォントです。欧文もNoto Sansがきれいなのですが、個人的にはLatoの方が好きだったりします。数字の詰めや数字の形が好みです。

Webフォントは、2016年は個人的に少しずつ使うようになってきましたが、既に普通にフォントを選べる時代。デザインの自由度が高まりますね。

ただ、Webフォントを使用していると環境によっては若干表示が重かったりもするので注意。それほど気にはなりませんが、表示軽量化のために標準搭載フォントだけで仕上げるのも一興かなとも思います。

イラレで小文字が打てない…?スモールキャップス機能について

イラレで大文字しか打てない。小文字が大文字の形になる。。

Illustrator(イラストレーター/略称:イラレ)で作業中に、文字が思い通りに打てずに困ったことになりました。

アルファベットの小文字が、大文字の形になってしまうんです…。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-15-21-01-28 %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-15-21-01-34

フォントの問題か?と思い、フォントを変えてみましたが全て同じ。
イラレを再起動したけれど、だめ。
パソコン画面右上にある入力選択肢を操作するも、解決せず。

しばらくGoogle検索と格闘し、やっと原因がわかりました。

スモールキャップスにチェックが入っていたせいでした!

…はじめてきいた名称でした(^^;)

そして当然、そんなところにチェックした記憶もなく。
ちなみにスモールキャップスはここにあります。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-15-21-06-16

スモールキャップス、そしてオールキャップスという機能があります。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-15-21-01-40 %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-15-21-01-46 こんな機能があったとは…。
使いこなせれば、色々と便利になるんだろうなと思いつつ、スモールキャップスのチェックをはずして一件落着でした。参考サイト様に感謝。

▼参考サイト様
Illustrator(イラストレーター)でオールキャップス・スモールキャップス

HTMLエディタによる自動整形の影響 2016年版(デフォルト編)

管理画面の本文エリアで、HTMLエディタ(テキストタブ)でコーディングをしたとき。
保存したとたんにタグがとんだりして困ったことはありませんか?

honbun_area

2012年頃は、自動整形の影響でタグが消えたりid属性が消えてしまい調整に苦心しましたが、あれから4年たった今、自動整形事情はどうなっているのでしょう。

調整して自動整形の影響を消す前に、そもそもWordPressのデフォルトとしてはどうなっているのか?をまず確認してみました。

検証環境

  • WordPress:ver.4.6.1(テーマ:Twenty Sixteen)
  • OS:Mac OSX 10.9.5
  • 使用ブラウザ:FireFox 48.0.1
  1. HTMLエディタに検証コードを流し込む
  2. ビジュアルエディタに切り替えて更新
  3. プレビューし、ソースを表示させたものを検証

検証項目

  1. 全プラグイン停止(これをデフォルトとする)
  2. functions.php への書き込みなど一切なし

※上記に関して「管理者」「編集者」「投稿者」それぞれで検証手順にそって検証コードを編集しソースを取得。

検証コード

<h1>自動整形検証コード</h1>

<h2>pタグ</h2>
<p>pタグが消えないかどうか</p>

<h2>行頭一字空け</h2>
<p> 行頭一字空けを全角アキで確保できるか</p>

<h2>改行タグ</h2>
<p>XHTMLの改行タグ<br />が消えないかどうか</p>
<p>HTML5の改行タグ<br>が消えないかどうか</p>

<h2>連続改行</h2>
<p>XHTMLの改行タグによる<br /><br /><br />3連続改行</p>

<h2>空タグ</h2>
<p id="test_id02"></p>
<div id="test_id01"></div>

<h2>id属性とclass属性</h2>
<p id="test_id">id属性が消えないかどうか</p>
<p class="test_class">class属性が消えないかどうか</p>

<h2>rel属性</h2>
<img src="example.jp" rel="example" alt="example" />

<h2>clear属性</h2>
<br clear="all">

<h2>ul中にclear属性</h2>
<ul>
<li>あいうえお</li>
<li>かきくけこ</li>
<br clear="all">
</ul>

<h2>スタイル直書き</h2>
<p style="margin-top:30px;padding-bottom:20px;">直書きしたスタイル属性が消えないかどうか</p>

<h2>コメントアウト</h2>
<p>段落中の<!--コメントアウト-->が消えないかどうか</p>
<!--段落外のコメントアウトが消えないかどうか-->

<h2>テーブル</h2>
<table>
<tr>
<th style="width: 120px;" scope="row">テキスト</th>
<td>テキストテキスト</td>
</tr>
</table>

<h2>imgタグ</h2>
<img src="example.jp" alt="example" />

<h2>iframe</h2>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/maps?f=q&amp;amp;source=s_q&amp;amp;hl=ja&amp;amp;geocode=&amp;amp;q=%E6%9C%AD%E5%B9%8C%E9%A7%85&amp;amp;aq=&amp;amp;sll=43.437574,142.851354&amp;amp;sspn=4.155917,7.734375&amp;amp;brcurrent=3,0x5f0b29a33b13e82f:0xb96643d25f25d813,0&amp;amp;ie=UTF8&amp;amp;hq=&amp;amp;hnear=%E6%9C%AD%E5%B9%8C%E9%A7%85%EF%BC%88%E5%8C%97%E6%B5%B7%E9%81%93%EF%BC%89&amp;amp;t=m&amp;amp;z=14&amp;amp;ll=43.068625,141.350801&amp;amp;output=embed">インラインフレーム非対応ブラウザへのメッセージ</iframe><br /><small><a href="http://maps.google.co.jp/maps?f=q&amp;amp;source=embed&amp;amp;hl=ja&amp;amp;geocode=&amp;amp;q=%E6%9C%AD%E5%B9%8C%E9%A7%85&amp;amp;aq=&amp;amp;sll=43.437574,142.851354&amp;amp;sspn=4.155917,7.734375&amp;amp;brcurrent=3,0x5f0b29a33b13e82f:0xb96643d25f25d813,0&amp;amp;ie=UTF8&amp;amp;hq=&amp;amp;hnear=%E6%9C%AD%E5%B9%8C%E9%A7%85%EF%BC%88%E5%8C%97%E6%B5%B7%E9%81%93%EF%BC%89&amp;amp;t=m&amp;amp;z=14&amp;amp;ll=43.068625,141.350801" style="color:#0000FF;text-align:left">大きな地図で見る</a></small>

<h2>HTML5のタグ</h2>
<section>セクション</section>
<nav>ナビゲーション</nav>
<article>アーティクル</article>
<aside>アサイド</aside>
<header>ヘッダー</header>
<footer>フッター</footer>
<address>アドレス</address>

 

[検証結果]

WordPress ver.3.4.2と比べ、基本は変わっていない状態。

■管理者

ver.4.6.1 ver.3.4.2  er.4.6.1についての備考
pタグ 消えない 消えない ※管理画面内では非表示だが、htmlソース上には存在する。
行頭一字空け 不可 不可  ※全角スペースが消失
改行タグ  消えない 消えない ※管理画面内では非表示だが、htmlソース上には存在する。
※XHTML用の改行タグに置き換わる
連続改行  不可 不可  ※連続して改行タグを入れても1つ分しか有効にならない
空タグ(p)  消失 消失
空タグ(div)  消えない 消えない
id属性  消えない 消えない
class属性  消えない 消えない
rel属性  消失 消失
clear属性  消失 消失 brタグはpタグに代わり、&nbsp;をはさんだ状態
clear属性(ul内)  消失ほか 消失ほか brタグは消失、ulタグがさらにulタグで囲まれ、最下行にp空タグ出現
スタイル直書き  消えない 消えない
スタイル直書き
(th内)
 消えない 消えない
コメントアウト
(タグ外)
 見える 見える ※pタグで囲まれるため、コメントアウトが表示されてしまう
コメントアウト
(タグ内)
 OK OK
テーブル  消えない 消えない ※<tbody>を強制的に入れられる
iframeタグ  消えない 消えない ※pタグで囲まれる※widthやstyleなどの属性値の位置が変わる
HTML5タグ  消えない 消えない
imgタグ  消えない 消えない ※消えないが<p>タグに囲まれてしまう

■編集者

管理者との差分なし。
※ver 3.4.2では「id属性」「スタイル直書き (th内)」「iframe」が消失していた

■投稿者

管理者との差分のみ記載。

ver.4.6.1 ver.3.4.2 ver.4.6.1についての備考
id属性 消えない 消失
スタイル直書き
(th内)
消えない 消失  ※スタイル記述中、不要な末尾の「;」が消失
iframe 消失 消失 ※iframeタグが消失

 

【まとめ】

権限の違いによる自動整形の影響については、編集者が格上げ(?)されて管理者と同じ挙動となりました。が、投稿者ではまだ消失するものがありますし、全権限ではコメントアウトが消失します。

  • コメントアウトは消失するので注意
  • iframeタグは、投稿者権限では消失するので注意

しかし、編集者、投稿者でもid属性が消えなくなったのは大きな進歩です!
これで、
制作会社が「管理者」権限で制作 →  納品後、お客様が「投稿者」権限で更新しようとして管理画面をひらき編集  →  idが消失して表示崩れ……の悪夢のパターンがなくなりました。
(納品前に投稿者権限で検証しなかったのも問題ではありますが)

本文エリアでコーディングをするのは個人的には反対なのですが、お客様の要望として
「少しくらいの修正なら自分たちでやれればいいな…」
というのは心情としてもよくわかります。

できること・できなことをよく把握して、無理のない範囲で要望に応えていけるのが良いのかなと思っています。

 

GoogleAnalyticsアドオンで一瞬でアクセス解析レポートをつくる方法【初心者向け】

 

毎月のアクセス解析。大変ですよね…。
GoogleAnalyticsから、あれこれとデータを引っ張り出し、csv形式でダウンロード。
さらにそれをExcelに貼付けて…。

ExcelでA4サイズ3枚程度のレポートを作るのに、軽く30分はかかっていました。
それが一瞬で出来る方法があります。
それは、GoogleAnalyticsアドオンを使い、Googleスプレッドシート上へ好みの形で書き出す方法です。

やり方は実はとても簡単です。
日々の業務の時間短縮のために!ぜひマスターしておきましょう。
(内容は初心者向けです)

以下に、「先月の・セッション数とページビュー数を・日別で」取得する方法をご説明します。
ここまでわかれば、Excelの得意な方ならレポートが出来たも同然です。
(レポートの形式にするのは一応次回以降でやる予定)

用意するもの

  • Googleアカウント(解析したいGoogleAnalyticsアカウントとひもづいているもの)
  • Googleスプレッドシート

作業の流れ

  1. アドオンのインストール
  2. 解析の設定シート作成
  3. 解析データの出力

STEP1「アドオンのインストール」

【1】Googleスプレッドシートを開きます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-16-0-26-29

 

【2】画面上部のメニューから「アドオン」を選び、プルダウンメニューから「アドオンを取得」を選びます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-16-0-27-34

 

【3】候補の中から「GoogleAnalytics」を探します。(候補になければ右上の検索窓から検索)カーソルを載せると「+無料」というボタンが現れるので、クリックするとインストールされます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-16-0-28-05

 

【4】ここまででGoogleAnalyticsアドオンのインストールは完了です。

 

 

STEP2「解析の設定シート作成」

【5】画面上部のメニューから「アドオン」を選択すると、プルダウンメニューに「GoogleAnalytics」という項目が増えています。
さらに選択し、「Create new report」をクリックします。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-16-0-28-34

 

【6】画面右側に設定のためのエリアが出現しました。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-16-0-35-18

 

【7】1)「Name」 には任意の名称を、2)「Account」「Property」「View」は、解析するGoogleAnalyticsアカウントよりそれぞれ選びます。
※「Name」はデータが吐き出されるシートのタブ名称になります。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-16-0-35-18

 

【8】3)は解析したい項目です。まずは「セッション」を指定していきます。「Metrics」の入力エリアに「sessions」と入力してみましょう。候補が現れるので、「Sessions」を選択します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-16-0-37-14

 

【9】続いて「ページビュー」を指定していきます。先程の「Sessions」が表示されている右隣に「pageviews」と入力します。候補に「Pageviews」が現れるので選択します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-16-0-37-38

 

【10】「Dimentions」では、「Metrics」で指定した項目のデータを何でひっぱるか?を指定します。ここでは「日別」のデータをひっぱるために、「date」を入力し、候補から「Date」を選択します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-16-0-38-02

 

【11】下図のように指定できたら、「Create Report」ボタンをクリックします。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-16-0-38-13

 

【12】これで、解析の設定シート「Report Configuration」ができましたが、もう少し調整していきます。
赤枠で囲んだところ、「Last N Days 7」となっています。過去7日間のデータを取得する、という意味で、どうやらデフォルトのようです。
ここでは先月のデータを取得したいので、「7」は消してしまいましょう。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-16-0-39-47

 

【13】「7」を消したら、「Start Date」「End Date」に、それぞれ解析期間の開始日・終了日を入れて行きます。
今が9月だとしたら8月1日と8月31日をいれれば良い訳です。が、普通に入れず、関数で自動取得できるようにしてしまいましょう。
せっかくスプレッドシート使っているのですし。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-16-0-42-54

 

【14】こういう小細工が明暗を分けて行くのです。しっかり楽しましょう。
「Start Date」に、「先月の最初の日」を取得する数式を入れました。

=DATE(YEAR(TODAY()),MONTH(TODAY())-1,1)

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-16-0-43-09

 

【15】「Last Date」には、「先月の最後の日」を取得する数式を入れます。

=DATE(YEAR(TODAY()),MONTH(TODAY()),0)

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-16-0-44-05

 

【16】ここまでで、「解析の設定シート」は完成です。

 

STEP3「解析データの出力」

【17】いよいよ解析データを出力する段階まできました。おそらく一番楽しい瞬間です。「GoogleAnalytics」から「Run reports」でプログラムを走らせます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-16-0-44-27

 

【18】レポートが正しく出力されました。エラーがある時は赤文字で表示されます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-16-0-51-59

 

【19】このような状態になります。設定をしたシートとは別タブにデータが吐き出されます。タブの名前は、【7】1)「Name」 で指定した任意の名称です。
これをもとに、グラフや表組に加工すれば、お好みのアクセス解析レポートが完成です!

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-16-0-52-35

 

【20】ここまでで「解析データの出力」が完了です。

 

 

入門編として、流れを説明してみました。
目標とするレポートの形式が複雑であれば、タブを複数作り、
グラフや表組を生成するタブも別に用意し…と、どんどん複雑化していくのですが、一度作ってしまえば、毎月やることは

・Run reports をクリックするだけ

です。
あとはPDFでダウンロードし、複数ページがあるようならPDFを一冊にまとめ…、と事後の作業は発生しますが、それでもクリックから完成まで5分程度でしょう。

まだやったことのない方は、ぜひチャレンジしてみてください。
きっと、思ったよりもずっと簡単ですよ。