GoogleMaps:APIキーが必須になってたのね…

kaz_161027_top

どうも、Kazです。
GoogleMaps、使ってますか?

GoogleMapsから共有で作成されたiframeからなるコードを使って埋め込んでいる場合は良いのですが、APIを利用して表示を行おうとしたらこんなエラーが出たりしていませんか?

「エラーが発生しました。このページでは Google マップが正しく読み込まれませんでした。JavaScript コンソールで技術情報をご確認ください。」

ブラウザのコンソールの方では

「Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error」
「Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys」

のエラーが出ていると思います。

既にご存知の方も多いかと思いますが
GoogleMaps v3へ移行した当初、APIキー不要でイロイロとできたのですが
2016年6月22日から新規サイトでAPIを利用してGoogleMapを表示する際にはAPIキーが必要になりました。

※2016年6月22日前にWeb上にアップされている物に関しては、『今の所』APIキー不要で使用することができるようです。

続きを読む GoogleMaps:APIキーが必須になってたのね…


痒い所に手が届く!? Chrome機能拡張

20160930kaz_top

どもっ。Kazです。
メインのウェブブラウザは何を使っていますでしょうか?
私の場合は、safariからFierfoxを経てChromeで落ち着いています。
そしてWebの制作をしていくと、アレコレと機能拡張を入れては止め、入れては捨てを繰り返すのですが
その中で、意外と使える機能拡張を紹介していきます。

ユーザーエージェントの切り替えをサクッと行える
User-Agent Switcher for Chrome

アクセスするブラウザや端末の違いで表示がどう変わるか、サクッとチェックするにはもってこいの機能拡張です。
初期のプリセットも十分ですが、ユーザーエージェントの追加もできるので入れておくと便利です。

Cookieの管理が簡単
EditThisCookie

とにかく「サクっ」とブラウザのクッキーアイコンを押せば現在のCookieの状態を確認する事ができます。
Cookieの値も簡単に変更できるし追加や検索などなど機能も豊富ですので、Cookieを使ったサイト制作には必需品になると思います。

今見ているページを上から下まで画像にしたい!!
Open Screenshot

長いランディングページや各Webページの全体を把握したい。修正指示のためにページ全体の画像が欲しいなど
ブラウザのカメラアイコンをクリックすれば「ページ全てをスクリーンショット」するのか「見たままをスクリーンショット」するのかなど選べてサクッと画像にしてくれます。
プリントアウトする時にレイアウトが変わってしまったりする時もサクッと画像にしてプリントすれば崩れる事なく出力できます。

アナリィクスのチェックも簡単。
Page Analytics (by Google)

自身でチェック可能なアナリティクスを埋め込んであるサイトにアクセスした時、解析表示がONになっているとページ上部にアナリティクスの数値とグラフをそれぞれに表示してくれます。もちろん項目は変更できるので気になる項目を簡単にチェックできます。
また「今見ているページからドコへのアクセスが多いのか?」色分けやパーセント表示でチェックする事も可能です。
アナリティクスのチェックが多い方には本当に便利な機能拡張です。

よく探してみると、困っている事を解決してくれる機能拡張があったりするので、イロイロと試してみて使いやすいツールに仕上げてみましょう。

オススメがある方は、ぜひコメント欄に!!


Google Analyticsで時間毎のアクセス数を見る。

先日、弊社管理サイトのサーバーを変更することになり、移転タイミングを決めるため、なるべく訪問者数を少ない時間を調べることになりました。
たしか、Google Analyticsでは標準で、時間別のアクセス数をグラフで見られたはず、と思っていたのですが、無いです。バージョンアップの際に消えたらしいです。しかも結構昔に。

単純にユーザーサマリーで「時間別」を選ぶと↓のようになります。

20160515ga00

今回は「何時のアクセスが1番少ないか?」を知りたいので、これでは用を為しません。
(CSVを落として、集計すればわかりますが、もっと手っ取り早く知りたい。)
そこで、時間別の数字を見るには、カスタムレポートを使います。20160515ga01
上部メニューから「カスタム」のリンク→「新しいカスタムレポート」のボタンを押す。

20160515ga02
各項目を埋めていきます。
・タイトル … 任意です。適当に分かりやすい名前を。
・レポートタブ名前 … 任意です。ここも分かりやすい名前を。
・指標グループ … 「ページ別訪問数」を選択。
・ディメンションの詳細 … 「時」を選択。
・ビュー … 複数のビューを設定している場合には、目的の物を選択。

「保存」を押して、実際にレポートを見てみましょう。

20160515ga03無事0時~24時の時間毎の訪問者数が「ぱっと見で」わかるようになりました。
例では、午前4時が最も少なくなる時間帯で、何かやるに箱の前後が好都合、と言うことになります。

何らかの理由で、閲覧者の多いサイトを一時的にでも止めなくてはならない時や、逆にアクセスが多い時を狙って新規コンテンツをアップするなどの判断に使える基本的なデータになります。


Googleスプレッドシートと連携!Googleフォームを使ってみた。

yasaiです。師走ですね。師じゃなくて下端なので当然はしりますよ。
今回はGoogleフォームを使ったときのお話です。GoogleフォームのメリットはGoogleスプレッドシートと手軽に連携ができることですね!

151219blog

※goolge→google(goolge様ごめんなさい)

相変わらず前置きが長いので、飛ばして読みたい方はこちらからどうぞ。

 

前回まで「ログインなしで誰でも投稿できる!Tumblrのゲスト投稿を使ったサイトを作ってみた。」の時のことをお話しましたが、今回はその続編です。

ログインなしで誰でも投稿できる!
Tumblrのゲスト投稿を使ったサイトを作ってみた。

【概要編】【制作編】

 

Tumblrのゲスト投稿機能を使って、写真をログイン無しで投稿してもらえるように作ったNagamelでしたが、複数の人に投稿してもらえることを考えると、自分の投稿を削除したいことや、投稿そのものが何かの違反ですよってお知らせできる機能が必要かな、と思いました。
無論メールでお知らせしてもらうようにしても良かったのですが、メールってクリックしてメーラーが立ち上がって、空白の画面に文字を入れていくのが、少し気分的に障壁があるように感じるですね。やっぱりフォームの方がいいな、と。

NagamelはTumblr使っているので、FTPでフォームのPHPをアップして、ということができません。別サーバにフォーム用のページおいてもいいんですが、気軽にサクッと作りたかったという今回の趣旨に反するので、これは却下。
DISQUSでコメント欄を作るのもありかなと思ったのですが、今回はGoogleフォームを使って作ってみました。下は実際のフォームのスクリーンショットです。

Nagamelのフォームページ
Nagamelのフォームページ

続きを読む Googleスプレッドシートと連携!Googleフォームを使ってみた。