Atrasi-2079-Vox

フリーランスウェブデザイナーArata-Atrasi-Takamiのブログ。服・靴・育児ときどき開発。

Category Archives: HTML

GoogleマップがAPI必須になってACFをごにょるの巻

  • 投稿日:2016/08/29

クッソ久しぶりに開発話です。
先日とある法人様のサイト制作を担当したのですが、その時の話を備忘録も兼ねて投稿です。

 

 

今回もWordPressを使ったサイト構築ということで、WordPressサイト制作の強い味方であるプラグイン「Advanced Custom Fields(以下ACF)」を使っておりました。投稿タイプ毎に好きな入力項目を設定できるので、対クライアント様用に分かりやすい入力フォームを作れます。とっても便利。甘えちゃう。ちなみに私が使っているのはデベロッパ向けのPRO版です。

ACF – Advanced Custom Fields

Advanced Custom Fieldsの使い方 / KoToRi Blog

 

このACFの中には簡単にGoogle Mapsを設定できる入力項目を作る機能があります。しかし最近はGoogle Mapsを使う様な案件が無かったこともあって、恥ずかしながらこの機能について半分くらい忘れておりました。今回の法人様の案件で久しぶりにGoogle Mapsを使う場面があったので、設定を進めていたら…。

 

なんすかこれ

gmaperror

 

これは何が起きたのかな…?と思って調べたら、そうでしたそうでした。ちょっと前にこの話してました。今年の6月22日以降に新たに制作されたサイトでGoogle Mapsを利用する場合は、APIキーが必須になったのでした。

Google Mapsを利用する場合はAPIキーが必須になったもようです / ねんでぶろぐ

 

Google Maps API v2からv3に変わるときに不要となったAPIキーが復活し、v3でもキーの取得が必要になりました。APIキーの取得自体は簡単で「Google Maps APIs for Web」にアクセスしてウンタラカンタラするともらえます。

Google Maps の APIキー を簡単に取得する / ねんでぶろぐ

 

 

使用する時は従来のAPI読み込み用のタグに「?key=XXXXXX」という風にして取得したキーをコピペするだけです(XXXXXXの部分にキーを入れます。)。

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

もし「?sensor=false」とかオプションの値を渡している場合は、「&」を使って繋げてあげればOKです。

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&key=XXXXXX"></script>

 

 

 

さて、これでユーザにお見せする方のGoogleマップは正常に表示されるようになりました。

 

が!

 

WordPressの管理画面で、ACFで設定したGoogle Maps設定項目を見ると…

 

HUUuuuuuuuu!!!!

gmapaerror_admin

 

そうですよな。そりゃそうですよな。だってACFにGoogle Maps APIキーを設定するようなとこないもん…。でもプラグインのコアファイルいじって直すのめんどくせーっす。プラグインのアプデの度に書き換わったら超めんどいっす。

 

でもGoogle Mapsの仕様変更から約2ヶ月位経ってる訳ですし、ACF開発元でも何かあるはず!と思って見たら、ちゃんと書いてました。

Google Map / ACF

 

functions.phpに下記のコードを追加して、取得したAPIキーを突っ込みます。

function my_acf_google_map_api( $api ){
  $api['key'] = 'XXXXXX';
  return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

PRO版の場合はこっち。

function my_acf_init() {
  acf_update_setting('google_api_key', 'XXXXXX');
}
add_action('acf/init', 'my_acf_init');

 

いずれも「XXXXXX」の箇所に取得したAPIキーをコピペします。

 

 

これでちゃんと表示できる様になりました。クライアント様も安心です。

googlemap_admin

 

 

 

 

 

 


Google Map経路探索へのリンク

  • 投稿日:2015/08/11

 

 

2013年の頭に「Google Mapにリンクを張る際のパラメータ」という記事を書いたことがあったんですが、あれからずいぶんと時間が経ってGoogle Mapもだいぶ様変わりしました。あの時のパラメータが今でも有効なのかどうか、ちゃんと見返してないんで正直微妙なんですが、まあ気が向いたら検証して記事直しておきます。

 

久しぶりの開発ネタ…ってほどでもないですし今更感あるんですが、ちと紹介。
Google Mapの「経路探索」機能を使ったリンク方法です。

 

以前の記事でも書いた通り、Google MapはURLに様々なパラメータを記述してあげることで、色んな機能を使う事ができます。

 

例えば座標。
https://maps.google.co.jp/maps?ll=35.669029,139.705421
上記の場合は緯度35.669029・経度139.705421の座標を指定した場合です。座標を指定すると、指定された座標を中心としたマップが表示されるわけですね。
指定する場合は上記の様に「ll=緯度,経度」という風に書きます。

 

 

これと同じように「出発地」「目的地」を指定することも出来ます。
出発地は「saddr」、目的地は「daddr」を使います。

 

例えば、出発地を緯度35.669029・経度139.705421のラフォーレ原宿にし、目的地を緯度35.667245・経度139.708796の表参道ヒルズにしてみます。するとURLは
http://maps.google.co.jp/maps?saddr=35.669029,139.705421&daddr=35.667245,139.708796
となります。saddr・daddrそれぞれにll〜の時と同じ要領で座標を記述しています。

 

更に、経路タイプやズーム倍率を指定したりすることも出来ます。
http://maps.google.co.jp/maps?saddr=35.669029,139.705421&daddr=35.667245,139.708796&dirflg=d&z=16
経路タイプは「dirflg」で「t(電車 デフォルト)」「w(徒歩)」「d(車)」が選べます。
ズーム倍率は「z」で0〜約20の数値で指定します(例外もあります)。

 

 

座標の取得は以前の記事でご紹介したサイトが閉鎖されていたようなので、こちらを。
http://www.gis-tool.com/mapview/maptocoordinates.html

 

 

最寄り駅からイベント会場の経路や、最寄りのコインパーキングから店舗への経路を教える時など、何かと使い道がありそうです。

 

 


Coda2のクリップ機能が便利っす

  • 投稿日:2013/03/09
By: Collin Allen

たまには開発ネタを。以前にエディタをDreamweaverからCoda2に変えたという記事を書きました。

もう散々他のデベロッパーズブログで書かれたネタなんですが、そのCoda2の機能の一つに「クリップ」というものがあります。いわゆる、よく使うコード等を予め登録しておいて簡単に挿入できる「コードスニペット」ってやつなんですが、これをある程度入れておくと結構便利です。

 

 

クリップを作成してみる

まずはエディタ画面を立ちあげます。するとサイドバーに色々と表示されていると思いますので、その中からクリップを選びます。

もしサイドバーを表示されていない場合は「表示」メニューの中から「サイドバー」→「クリップ」で表示することができます。

2
新規クリップを作成する場合は、サイドバーの上で右クリックし「クリップを追加」を押すか、サイドバー下の「+」ボタンをクリックすることで作成出来ます。


クリップを作成すると下記のような画面が出現しますので、よく使うコードをここに書き込みます。

4
上記画像ではCSSを打ち込んでいますが、コードの内容はHTMLでもJavaScriptでもjQueryでもPHPでも何でもOKです。

名前も好きなものをつけることができます。
名前をつけたら右下の「保存」をクリックして終了です。

 

 

任意で「TABトリガー」というものを設定できます。下記のように「TABトリガー」欄に任意の文字列を打ち込みます。すると、その文字列を入力した直後にキーボードのTABキーを押すと、登録したコードが打ち込まれます。

6

設定したTABトリガーは登録クリップの右上に下記の画像のように出ます。また登録クリップをダブルクリックすることでも打ち込むことができます。


また、アンカータグの用に挿入ポイントが有る場合は、左下のプレースホルダーメニューから「挿入ポイント」を加えてあげれば、クリップを打ち込んだ際に挿入ポイントの箇所が空欄で打ち込まれ、マウスカーソルが挿入ポイントに自動的に移動されます(挿入ポイントが複数ある場合は最初の挿入ポイントに移動)。

8

10

他にもキーを設定することも出来るようです(使ってないけど)。

 

 

クリップを整理

作成したクリップは必ずしもHTMLだけ・CSSだけ…というわけではありませんので、グループ分けして整理することもできます。サイドバー上で右クリックし「グループを追加」でグループを作成します。
作成したグループにクリップをドラッグ・アンド・ドロップすることで追加したり整理できます。


一度作成したクリップは、同じく右クリックで削除したり編集し内容を変更することもできますし、書きだして外部ファイルにバックアップしたり、同じCoda2ユーザ間で受け渡すこともできます。

 

 

クリップを同期

Coda2はiCloudに対応しています。iCloudを経由することで、自宅のマシン・職場のマシンなど、複数のマシン間で作成したクリップや設定を同期することができます。
私はなるべく制作環境を同じ環境にしておきたい派なので、こういった機能は結構助かります。

まずiCloud側の設定です。
「システム環境設定」→「iCloud」で「書類とデータ」の項目のチェックをONにします。

11
iCloudの設定ができたら、次はCoda2の環境設定で「一般」を開き、iCloudの「サイト設定とクリップを同期する」にチェックを入れます。同期したい同じiCloudアカウントを設定した各マシンで、同様の設定を行えば自動的にクリップの設定が同期されます。

12

 

使い慣れてくると、作業効率を向上できる良いツールになり得ますね。