参院選2019が行われるとタクシーが暇になる?

選挙期間中はタクシーがヒマになる…。

聞いたことありますか?

私は今日初めて知ったのですが。。。

  

訪問先へと急ぎながら、タクシー乗り場へダッシュしていたときのこと。

ここの乗り場は何度も利用しているけれど、

いるときは何台もいるし、

いないときは一台もいない。

  

…そんな乗り場でした。

  

運良く今日はタクシーの行列が!

さっそく、一番先頭に乗り込みました。

  

目的地に向かいながら運転手の方にきいてみました。

「一台もいないときもありますけど、今日は行列で助かりました!」

すると、

  

選挙のときはヒマな時期だからねぇ〜

  

…との返答。

  

何がどう影響するの!?

と思って更に聞いてみると、

公務員の方が、飲みに行ったり外出するのを控えるのだとか。。。

不祥事を起こさないよう、細心の注意を払うのだそうです。(あくまでタクシーの運転手さん一個人による感想です)

  

こういう法則、面白いですね〜

なにがどう、どこに影響するかわからないものです。

  

あ、

あと、

タクシーが少なくなるのにはもうひとつ法則が。

  

早番と遅番が交代の時間帯も、少なくなるそうですよ。

当たり前といえば当たり前。。

  

ちなみに、14:30〜16:00 らしいですよ(ローカル情報です)。

  

デザインとコーディングでWebフォントの太さを一致させる(Noto Sans JP編)

デザインで指定した文字の太さが、コーディングでは微妙に違う状態で上がってくること、ありますよね。

PhotoshopやIllustratorとコーディングでの文字の太さの指定方法が違うため、せっかくWebフォントを使っても仕上がりが一致しないということがおこります。

コーディングの指示で、font-weightまで指定するつもりでの自分用メモ。
Photoshopから書き出した画像とデバイスフォントを比較するため併記します。パソコンで閲覧専用です。

Noto Sans JP Thin = 100

▼Photoshop

Photoshop → Noto Sans JP Thin/フォントサイズ 16pt/行送り 32pt

▼Coding

Coding → font-family: ‘Noto Sans JP’; font-size: 16px; line-height: 2em; font-weight: 100;

ではみなさんは、そういうふうに川だと云われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。Lorem ipsum dolor sit amet, MENU consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Noto Sans JP Light = 300

▼Photoshop

Noto Sans JP Light/フォントサイズ 16pt/行送り 32pt

▼Coding

font-family: ‘Noto Sans JP’; font-size: 16px; line-height: 2em; font-weight: 300;

ではみなさんは、そういうふうに川だと云われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。Lorem ipsum dolor sit amet, MENU consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Noto Sans JP Regular = 400

▼Photoshop

Noto Sans JP Regular/フォントサイズ 16pt/行送り 32pt

▼Coding

font-family: ‘Noto Sans JP’; font-size: 16px; line-height: 2em; font-weight: 400;

ではみなさんは、そういうふうに川だと云われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。Lorem ipsum dolor sit amet, MENU consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Noto Sans JP Medium = 500

▼Photoshop

Noto Sans JP Medium/フォントサイズ 16pt/行送り 32pt

▼Coding

font-family: ‘Noto Sans JP’; font-size: 16px; line-height: 2em; font-weight: 500;

ではみなさんは、そういうふうに川だと云われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。Lorem ipsum dolor sit amet, MENU consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Noto Sans JP Bold = 700

▼Photoshop

Noto Sans JP Bold/フォントサイズ 16pt/行送り 32pt

▼Coding

font-family: ‘Noto Sans JP’; font-size: 16px; line-height: 2em; font-weight: 700;

ではみなさんは、そういうふうに川だと云われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。Lorem ipsum dolor sit amet, MENU consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore

Noto Sans JP Black = 900

▼Photoshop

Noto Sans JP Black/フォントサイズ 16pt/行送り 32pt

▼Coding

font-family: ‘Noto Sans JP’; font-size: 16px; line-height: 2em; font-weight: 900;

ではみなさんは、そういうふうに川だと云われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。Lorem ipsum dolor sit amet, MENU consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore

 

指示用コピペテキスト

■ Noto Sans JP のfont-weight指定数値
 Thin = 100
 Light = 300
 Regular = 400
 Medium = 500
 Bold = 700
 Black = 900

 

 

Noto Sans JP に限って言えば、公式サイトの一覧状態でプルダウンをクリックしたときだけFont-weightとの対比が数値で確認できるのですが、ちょっとつかいづらいかな。クリックしてるときしか見られないからね…。

せっかくの美しいフォント、デザイナーさんの感覚、大切にするためにディレクターは文字の太さもしっかりあわせましょう!!

 

▼Google Fonts 「Noto Sans JP 」はこちらから!https://fonts.google.com/specimen/Noto+Sans+JP

 

インスタグラムのIDとアクセストークンを取得する

たとえば、Webサイトにインスタグラムの写真を自動で読み込みたいとき。Sandbox ModeでInstagramのAPIを使うのが手軽です。
しかし、そのAPIを使用するための手順は全然手軽ではありません…。
ひとつずつ手順をみていきましょう。

★Sandbox Modeとは
誰でも無料で使用できる開発者モードのようなものですが、制限があります。

  • 10ユーザー(client)まで
  • 各ユーザーにつき、最新20件の投稿画像が取得可能
  • APIの呼び出しに制限あり。説明文中のリンクが壊れており明確な記載はない。(が、どうやら1時間に200回までらしい。)

Sandbox ModeでInstagramのAPI、具体的には「Client ID」と「アクセストークン」の入手を自分用メモも兼ねてまとめます。

【 手順:1 】Instagramの開発者ページを開く

ブラウザでInstagramを開きます。
インスタグラムにログインした状態で、開発者ページ「Instagram Developer Documentation」にアクセスします。

▼Instagram開発者ページ

【手順:2】開発者登録をする

画面上部の「Manage Clients」をクリックすると、開発者の登録を求められます。
未登録の場合は登録をしていきます▼

「ウェブサイト」「PhoneNumber」「What do you want to build with the API?」 の項目を入力し、ガイドラインへの同意をチェックしたら、「Sign up」をクリックします。
電話番号を入力していますが、今のところ特に電話はかかってきていません。。

【手順:3】クライアントIDを取得

次に、「Manage Clients」で「Register a New Client」をクリックします▼

「Details」タブを選択した状態で、必須項目である「Application Name」「Description」「Website URL」「Valid redirect URIs」を入力していきます▼

「Valid redirect URIs」には少し注意が必要です。
入力後にEnterをクリックする必要があります。
Enterをクリックし、入力したURLがボタン状に変化したらOKです。
※「Valid redirect URIs」はあとで使うので覚えておきましょう
「Resister」はまだクリックしません!

続いて「Security」タブを選択した状態で、「Disable implicit OAuth」のチェックを外し、「Resister」をクリックします。▼

これで、Client ID が取得できました。▼
※ぼかしてますが、32桁の英数の文字列です。

【手順:4】アクセストークンを取得

【手順:3】で取得した Client ID を使って、今度はアクセストークンを取得します。

下記のauthenticationURLを使います。

https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token

「client_id」には「Client ID」、「redirect_uri」には「Valid redirect URIs」をいれてください。

つまりこういう感じです。。

https://api.instagram.com/oauth/authorize/?client_id=【ここに「Client ID」をいれる】&redirect_uri=【ここに「Valid redirect URIs」をいれる】&response_type=token

これをブラウザのURL欄に直接入れ、Enterで移動します。
いま作業しているインスタグラムの管理画面とは別に、新たなブラウザ画面(タブ)を開いて実行しましょう。

うまくいけば、下記のような画面になります。Authorize を clickしましょう。あと一歩でアクセストークンが入手できます。▼

画面が遷移し、「Valid redirect URIs」で指定したWebサイトが表示されたら、URL欄を確認します。「?token=」の後ろにある文字列が、アクセストークンですよ。▼

これで、PHPやjsなどを用いて、自分のInstagramの写真をWebサイトに自動連携したりなど、いろいろと活用ができますね!

CSSピクセルとデバイスピクセル(ディスプレイ解像度覚え書き)

レスポンシブサイトを作っていると、ブレイクポイントをどこにするかでものすごく悩みます。

スマホのディスプレイサイズに依存しないブレイクポイントにしよう、と思っても、やはりひととおり知っていないと始まらない、スマホのディスプレイサイズ。
ブレイクポイントを決めるための覚え書きです。

デバイス CSS
ピクセル
( points )
デバイス
ピクセル
デバイス
ピクセル比
ppi インチ
iPhone 3G 320 ✕ 480 320 ✕ 480 1 3.5
iPhone 3Gs 320 ✕ 480 320 ✕ 480 1 3.5
iPhone 4 320 ✕ 480 640 ✕ 960 2 3.5
iPhone 4s 320 ✕ 480 640 ✕ 960 2 3.5
iPhone 5/5s/SE 320 ✕ 568 640 ✕ 1136 2 4
iPhone 6/6s/7/8 375 ✕ 667 750 ✕ 1334 2 326 4.7
iPhone 8Plus 414 ✕ 736 1080 ✕ 1920 3 401  5.5
iPhone X  375 ✕ 812 1125 ✕ 2436 3 458 5.8

ちなみに、ブレイクポイントで指定する数値は、CSSピクセルを対象とするものですよ。

MacのExcel(エクセル)2011 文字入力が遅い。。

MacでExcel2011をいまだに使っていますが、有名なバグがあり、文字入力が異様に遅く、大変困っていました。
文字(日本語)を打つ時の「文字を打つ→変換→Enter」の一連の流れが、「文字を打つ」の段階でまず数秒待たされます。
たとえば「しゅんかしゅうとう」と打って「春夏秋冬」に変換したいとして…。
「しゅんかしゅうとう」とキーボードを打つと…、

しゅん

しゅんか

しゅんかし



画面にすべて表示されるまで数秒。スローモーションな画面の動きをじっと見守ります。
表示されたら、そこから変換…。
はっきり言って仕事になりません。

以前からこのバグはWeb上にも情報が多く、解消法とされるものを試してみたことはあるのですが私の場合そのときは解消されず、あきらめていました。

先日、久しぶりに試してみたらうまくいったので、現在は快適です。
大変ありがたかったので、やり方をここに記録しておこうと思います。

【手順】
1)Excelを終了
2)フォントの重複を解消
3)環境設定ファイルの削除
4)キャッシュファイルの削除
5)Macを再起動

1)Excelを終了

Excelを(使っていた場合は)終了させます。

2)フォントの重複を解消

フォントの重複を解消するため、アプリケーション「Font Book」を立ち上げます。

「Font Book」が立ち上がりました。

立ち上がったら左側の列にある「全てのフォント」をクリックし、真ん中列が全て選択された状態にします。

この状態でマウスを右クリックし、「フォントを検証」を選択します。

フォントの検証が終わるのを待ちます。
終わったら、「フォントを検証」ウィンドウ左上のプルダウンメニューから「警告およびエラー」を選択。

「警告およびエラー」の内容を確認します。この時点でフォントの重複は解消されているので、「フォントを検証」ウィンドウの左上のバツボタンをクリックして閉じます。

このように、重複しているものがあれば「切」となっています。
フォントの重複はこれで解消されました。

3)環境設定ファイルの削除

Finderの状態(デスクトップのどこかをクリックすればOK)で「⌘ + Shift + G」でウィンドウが出たら「~/Library/Preferences/」と入力・移動します。

移動したら、次の2つのファイルを探し、削除します。

com.microsoft.Excel.plist
com.microsoft.office.plist

※ファイルが壊れている場合 ~.plistの後ろに英語8文字ついた0byteのファイルがあるのでそちらも削除
例) com.microsoft.Excel.plistEGB987SF

参考サイト様より

これで環境設定ファイルの削除は完了です。

4)キャッシュファイルの削除

3)と同じ要領で、Finderの状態(デスクトップのどこかをクリックすればOK)で「⌘ + Shift + G」でウィンドウが出たら「~/Library/Caches/」と入力・移動します。

Microsoftフォルダを削除します。

これでキャッシュファイルの削除は完了です。

5)Macを再起動

Macを再起動して全ての作業完了です。
Macが立ち上がったら、Excelを立ち上げてさっそく文字を打ってみましょう!

 

▼参考サイト様「Excel2011で日本語入力のスピードが極端に遅い | 公式 Apple サポートコミュニティ」
https://discussionsjapan.apple.com/thread/10153975?start=0&tstart=0

 

IE対応はどこまでするべき?

IE(Internet Explorer)は、2017年現在、どこまでブラウザ対応しておけば良いのでしょう?

正解は、IE11のみ

です。

実際には2016年1月の段階で「IE11のみ」でOKではあったのですが、
IE9・10を本当に切ってよいものか、判断に迷う場面もちらほらありました。
クライアントによってはIE9・10の比率が高かったり、社内で特定のIEブラウザを使っている例もあり、「IE11のみ」にはなかなか出来なかった印象です。

今では「IE11のみ」で制作進行することも多く、Google Analyticsでブラウザを解析すると、IEの約95%がIE11。※自分調べ
過去は確かに去ったのだと安堵の思いです。

アウトプットする機会もなかったので、勉強のため、お客様への説明のためにまとめておきたいと思います。

なぜ、古いブラウザを使ってはいけないか

Windows PC のデフォルトブラウザであるIEは、Microsoftのサポート終了とともに無償セキュリティパッチが提供されなくなるため、上位ブラウザへのアップデートが必要(Windows PC 自体を買い換える必要がある場合も)だからです。

Microsoft の発表では、

2016 年 1 月 12 日以降、

サポートされるオペレーティング システムで利用できる最新バージョンの Internet Explorer のみがテクニカル サポートとセキュリティ更新プログラムを提供されるようになります。

…ということですから、常に最新に保っておかないと危ないんですね。

 

パソコン、ブラウザにもライフサイクルがある

ここ数年の概念ではないでしょうか。
パソコンは高価だから、買ったらずっと大切に使い続ける…というわけにはいかなくなってしまったのですね。
安全に使い続けるために、常に最新のサポートが受けられる製品を追い続けなければなりません。

■参考サイト

▼サポート ライフサイクル ポリシーに関する FAQ – Internet Explorer
https://support.microsoft.com/ja-jp/help/17454/lifecycle-faq-internet-explorer

▼IE10に関する ライフサイクル ポリシー
https://support.microsoft.com/ja-jp/lifecycle/search?alpha=Windows%20Internet%20Explorer%2010

 

永遠に居座るかと思われたIE6がいつのまにか消え(会社的にIE6対応をやめることになったあの日は今でも忘れられません)、IE7、IE8も消え…。(一部には生存し続けていますが)
IE9以降は新しいブラウザ…のような意識でいたけれど、気づけばそれすらもレガシーブラウザに。

常にアップデートしていかなければならないのですね。

 

■参考サイト

▼WebブラウザシェアランキングTOP10(日本国内・世界)
https://webrage.jp/techblog/pc_browser_share/

▼[@IT様]一目で分かる、各Windows OSでのInternet Explorerのサポート終了時期
http://www.atmarkit.co.jp/ait/articles/1503/11/news134.html

 

アクセシビリティに配慮したWebサイトをつくるために〜JIS X 8341-3〜

障がい者の方、高齢者の方にも、Webサイトをより良い状態で閲覧してもらうために…。
WebサイトにもJIS規格があるのをご存知でしょうか?

 

JIS規格「JIS X 8341-3」

「JIS X 8341-3(高齢者・障害者等配慮設計指針-情報通信における機器,ソフトウェア及びサービス-第3部:ウェブコンテンツ)」
…というJIS規格が存在します。

一体いつから!?

2004年6月に初めて制定され、最新版は2016年3月に改正されています。

  • 2004年06月 → JIS X 8341-3:2004
  • 2010年08月 → JIS X 8341-3:2010
  • 2016年03月 → JIS X 8341-3:2016

※誤って2004年を2014年と記載していました…大変失礼いたしました(2017年3月7日記)

JIS X 8341-3 とは、どんな規格?

「高齢者・障害者等配慮設計指針」とうたわれているとおり、高齢者や障がい者の方でも不便なくWebサイトを閲覧し、情報を得られるようアクセシビリティに配慮するための指針です。

日本工業標準調査会:データベース-JIS詳細表示「JIS X 8341-3(閲覧のみ)」
閲覧できる環境が限られているようです

具体的にどういった項目を障がいとして定めているかについては、
「全盲、弱視、色覚障害、聴覚障害、肢体不自由、高齢者」
がそれにあたります。

どんなサイトで準拠されているの?

国及び地方公共団体等の公的機関のホームページ等が、高齢者や障害者を含む誰もが利用しやすいものとなるよう、

総務省が音頭を取り、JIS X 8341-3への準拠を進めています。

準拠されたWebサイト例

札幌市:札幌市公式ホームページのウェブアクセシビリティ方針
旭川市:ウェブアクセシビリティ方針について
稚内市:アクセシビリティの方針について

アクセシビリティとは?

例えば、パソコンでWebサイトを閲覧するとき。
多くの人は、マウスでカーソルを操作しながら画面を見る…といったスタンスを想像されるのではないでしょうか。
しかし、

  • マウスの操作が困難で、操作はキーボードのみ、という人がいます。
  • 色覚障害があり、多くの人が読める文字が読みづらい人がいます。
  • 視覚ではなく、聴覚で文字を「聴きながら」Webサイトを利用している人がいます。

…こういった状況で閲覧をされている方がいることは、身近な方や知り合いにでもいない限り、なかなか想像しづらいのではないでしょうか。
そして、もし前述の方が閲覧しようとしているWebサイトが、

  • キーボードだけで操作できる配慮がされていないWebサイトだったら
  • 文字の色が薄すぎたり、背景色と混同するような文字色が使われていたら
  • 文字が画像化されて読み上げ可能な文字自体が使われていなかったら

情報にアクセスする事自体が困難となってしまいます。
しかし、

  • tabボタンで適切に進めるよう配慮されていれば
  • 文字色と背景色に適切なコントラストが保たれていれば
  • Web上の文法にのっとった文章で、画像にもaltを適切に設定していれば

情報にアクセスすることが可能になります。
こういった情報へのアクセスのしやすさの事を「アクセシビリティ」と呼ばれます。

配慮される具体的な内容は?

例えば、色覚障害の方や高齢者(白内障など)への配慮として、背景色と文字色のコントラストに基準が設けられています。最低限レベルのコントラスト比として、次のように定められています。

1.4.3 コントラスト(最低限レベル)の達成基準

テキスト及び文字画像の視覚的提示には,少なくとも4.5:1 のコントラスト比がある。

4.5:1 …と数字で聞いても、まったくイメージがわきません。それに、コントラスト比は、どうやって調べれば良いのでしょうか?

コントラスト比を調べるツールがあります。

▼カラーコントラストアナライザー
Colour Contrast Analyser

Windows、Mac、ともに対応されており使いやすくおすすめです。
このツールを使ってしらべてみると…。

例えば文字色が白(#ffffff)の場合で、背景色をグレー(#333333)から段々と薄くしていくとすると…。

背景色#333、文字色#fff、コントラスト比 12.6:1

↑コントラスト比が12.6:1と十分ですね。

 

背景色#666、文字色#fff、コントラスト比 5.7:1

↑背景がぐっと薄くなりましたが、まだまだ可読性は高いです。コントラスト比 は、5.7:1。

 

背景色#777、文字色#fff、コントラスト比 4.5:1

↑ ストップ!!ここでコントラスト比4.5:1です。

大きな文字でない場合はここが限度ということです。ちなみに、大きな文字とはどの程度なのでしょう?

a) 大きな文字 サイズの大きなテキスト及びサイズの大きな文字画像には,少なくとも3:1 のコントラスト比がある。

「JIS X 8341-3:2016」の注釈によると大きな文字サイズとは、

少なくとも18 ポイント,又は14 ポイントの太字の(テキスト)。全角文字のフォントは,それと同等の文字サイズ。

と定義されています。

背景色#969696、文字色#fff、コントラスト比【3.0:1】
18 ポイントの文字
16ポイントの文字
14 ポイントの文字(太字)

こんな感じですね。
上記のサンプルでは16ポイントだとアウト、18ポイントと、14ポイントの太字はセーフとなります。

文字と背景色ひとつとっても、このように細かく基準が設けられているのです。

ますます重要となるアクセシビリティと障害者差別解消法

平成28年4月1日から施行された「障害を理由とする差別の解消の推進に関する法律」をご存知でしょうか。

障害者差別解消法ポスター▶︎内閣府:障害者差別解消法

国連の「障害者の権利に関する条約」の締結に向けた国内法制度の整備の一環として、全ての国民が、障害の有無によって分け隔てられることなく、相互に人格と個性を尊重し合いながら共生する社会の実現に向け、障害を理由とする差別の解消を推進することを目的として制定されたものです。

つまり、障がいによりWebサイトにアクセスできず困っている方がいて指摘があれば、対応する必要がでてくる場合があるということになります。

まとめ

もはや、インフラのひとつと化したWeb。日常生活に無くてはならないものとなりました。公的機関のWebサイトでなくとも、こういった規格などは適宜取り入れていきたいですね。
障がい者、高齢者にとってアクセシビリティが高いということは、みんなにとっても読みやすいサイトであるということ。アクセシビリティの高いWebサイト制作ができるよう、意識を高めていきたいです。

 

Google Maps スクロールに関するカスタマイズ

スワイプ時に、Google Mapsを意図せず操作してしまってページのスクロールが先へ進まずに困る…。
これが解消されたのは、まだ記憶に新しいところ。

スマホ閲覧時のGoogle Mapsが使いやすくなった!

スワイプ中の指がGoogle Mapsに触れると、「地図を移動させるには指2本で操作します」と地図上に表示され、地図が意図しない挙動(地図がスクロールするなど)をしないようになりました。

20170116_img

2016年11月25日 Google Cloud Japan 公式ブログで、Google Maps APIの仕様変更に関する記事が紹介されています。

米国時間 11 月 15 日、Google はマップを埋め込んでいるサイト向けに、直感的なスクロール操作が行える機能を導入し、モバイル デバイス上でフルスクリーン コントロールをデフォルトで表示するようにしました。これにより、ユーザーはモバイル ブラウザ上でのマップ操作をより直感的に行え、フラストレーションを感じることも少なくなるはずです。

【参考】
▼Google Maps API 新機能:スマートなスクロール機能をモバイル ウェブ マップに導入
https://cloud-ja.googleblog.com/2016/11/google-maps-api_25.html

 

この嬉しい仕様変更は、Google Maps JavaScript API に「gestureHandling」というオプションが新たに追加されたことによるもの。

今まで大問題ではないけれど、少しやりづらかった部分が解消されましたね。
個人的にもスマホで閲覧中、Google Mapsがでてくると無意識に画面の端をスワイプする癖がついてました。

ここまではいいのですが、じゃあ、

パソコン閲覧時のGoogle Mapsは?

と、思いました。

パソコンで見るGoogle Mapsはどうなの?

パソコンで見るGoogle Mapsも、スクロール中にGoogle Mapsにさしかかると意図せず地図が拡大され、とても煩わしいですよね。
解決方法は既にいくつかあり、

  • Google Maps API を使う(このサイト内の関連ページへ
    var myOptionsの項目で
    scrollwheel: false /*ページスクロール中のマウスに反応させない*/を追記すればOK
  • iframeの場合は、style="pointer-events:none;" を使う
    ※これは地図がそもそも動かなくなるのでNG
  • iframeの場合、一度クリックすれば地図が操作できるようにjQueryでカスタマイズ

といった選択肢があります。
パソコン閲覧時の場合、スマホ閲覧時ほどの困り感はないですが、
かゆい所に手が届くカスタマイズではないでしょうか。

 

【参考サイト様】
http://itstudio.co/2016/05/31/5802/
http://blog.ddwnet.com/archives/1213.html

 

おすすめ記事

 

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