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フォームを使ってみた。


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

こんにちは。yasaiです。

前回に引き続き、「ログインなしで誰でも投稿できる!Tumblrのゲスト投稿を使ったサイトを作ってみた。」の後編、今回は制作編です。
概要編はこちら

 

12241745_1661604864098440_1419330459294015468_n

 

今回作ったサイト

前回のおさらいです。

151116_02

上記の様な構成で作りました。

151116_01
クリックすると拡大します

制作にあたっては次のことをしました、

  • ゲスト投稿の有効化
  • テンプレートの修正(出力部分) タグの有効化とメニューへの追加
  • タグリストの設定
  • 削除依頼ページの作成(Googleフォームを利用)
  • その他のページ制作

になります。ここまでが前回のおさらいです。

 

実際の作業について

それでは、ここから僕が実際にやったことのお話です。

1.Tumblrのゲスト投稿を有効にする。

----- - Tumblr.clipular

Tumblrの自分のブログのダッシュボードから、「外観を編集」します。

そうすると、「ゲスト投稿」を有効にするかどうかのスイッチがあるので、「On」にします。

----- - Tumblr.clipular (1)

  • ゲスト投稿できるように設定すると、このような項目が決められます。
  • ゲスト投稿用のタイトル
  • ゲスト投稿のガイドライン。(注意事項や使い方の説明に)
  • ゲストが使用できるタグ。カンマ区切りで複数設定できます。
  • ゲスト投稿で使う投稿タイプ

以上を設定したらこの画面ですることはおしまいです。
※この画面は自動保存されます。

2.テンプレートの修正(出力部分) タグの有効化とメニューへの追加

今回使用させていただいたテーマ「Simplig-folio」では、グローバルメニューにゲスト投稿の有無があらかじめ書かれていました。(ありがとうございます)

赤字の部分ですね。ソースを見ると「Ask」のもの入ってますね!(Ask機能をOnにすると表示されます。)

{block:SubmissionsEnabled} content  {/block:SubmissionsEnabled}でゲスト投稿が有効な時に、contentが表示されるので、これでグローバルメニューに{SubmitLabel}が表示されます。{SubmitLabel}には「ゲスト投稿ページのタイトル」に入力した文字列が表示されます。

次に投稿フォームが表示されるページです。

151116_03
クリックすると拡大表示します

ダッシュボードで入力した情報は上記のように表示されます。画像をD&Dでアップロードできるのが初めからついているのとかってステキです。

投稿する際には、非Tumblrユーザーは名前とメールアドレスを入力しないと投稿できません。
また、ガイドラインにはHTMLを書くこともできたので、プライバシーポリシーなど長めのものになる場合は、別ページにリンクしてもいいですね。(フォームページはサクサク進んで欲しいですから)

3.タグリストの設定

ここで述べるタグは、2.で使ったTumblrの独自タグやHTMLタグではなくて、カテゴリーを表す意味でのタグになります。

Tumblrではちょっぴり残念なことに他のブログのようなカテゴリーが設定できません。その代わりにタグを利用します。

Simplig-folio」ではあらかじめタグクラウドを表示するようにプラグインが設定され「Taglist」に表示されるようになっていましたが、今回はタグを固定してしまったので、ダッシュボードの「テーマの編集」から変更できるように<header>内に以下のカスタムテキストを入れました。

こうすると、ダッシュボードからカスタムテキスト「Tag List」が編集できるので、jQruey使って「Tag List」にリンクのリストを生成しました。

この時、タグに日本語を設定した関係上、カスタムテキストの各項目は‘ ‘(クオーテーション)で囲む必要があります。カスタムテキストはゲスト投稿で指定したタグと、もう1つ「お知らせ」タグを設定しました。

4.削除依頼ページの作成(Googleフォームを利用)

誰かに投稿してもらえるサイトを作りたかったので、投稿してもらったものの削除以来ができないと困るなぁということで。お問い合わせページを作り、お問い合わせフォームをつけました。

どこまでも無料で作りたいのでお問い合わせフォームはGoogleフォームを初めて使ってみました。(Googleフォームを使った感想はまた今度)
Googleフォームの設定をポチポチして埋め込みます。

実はこの部分、初めはTumblrの質問(Ask)機能で実装するつもりだったんです。

なぜ断念せざるをえなかったかというと、Ask機能ではTumblrユーザー同士ならば非公開でやり取りできるようなのですが、非Tumblrユーザーとは公開状態でしか、やり取りできないみたいなのです。(おそらくやり取りを出力する場所がないから?)
個人的に好きなTumblrですがユーザーの割合を考えると、ちょっとそれはなぁ、ということで断念せざるを得ませんでした。

5.その他のページ制作

これで、TopPage、Tagpage、SubmitPage、ContactPageができたので、残りのサイトの趣旨を説明するAboutPageと、これは守ってねという内容のPolicyPageを「ページの追加」からサクッと作ります。

これでサイトの体裁が整ったので、ここまで非公開で作っていたので公開してしまいます。

 

Tumblrのゲスト投稿のいまひとつなところ

さてここまで作ってみて、今ひとつというか、もうちょっとこれができたら良かったな、という所をまとめます。

  • 非Tumblrユーザーの場合、投稿者の名前を出力できない。
  • 承認制なのでリアルタイムに更新しない。
  • 管理者へのメッセージは公開すると「消えてしまう」。
  • Tumblr人口がまだまだ日本だと少ない。

特に「非Tumblrユーザーの場合、投稿者の名前を出力できない」点は大きかったです。せっかく投稿してもらっても、投稿者様の名前を表示できないので。

Tumblrユーザーの場合は

といった形で名前とリンク先が表示できるのですが、非Tumblrユーザーの場合は{Submitter}は「匿名」と表示されます。これがとても残念なとこですよね。
しかたないから今回は、お名前の表示を希望される方はキャプション(画像投稿のみなので)にコピーライトとして名前を入れてもらうことにしました。とても苦肉の策です。

ちなみに、その投稿が、ゲスト投稿によるものかどうかは、ゲスト投稿の場合はタグに「#submission」が表示されるので、それで判断できます。

そういった部分でも、Tumblrユーザーがもっと増えたらいいのになぁと思います。

 

まとめ

2回に渡ってまとめてきましたが、いかがだったでしょうか?
なかなかアカウントもログインもなく、デザインを自由に投稿できるようにできるのって、あまり選択肢がないように思いますので、制作する際の1つの選択肢になれば嬉しいです。

なにか質問や、もっといい方法あるぞ、っていうのを教えてもらえたら嬉しいのでコメントくださいね。Tumblrもチャット機能をリリースする話もありますし、まだまだ目が離せないですね。

せっかく作ったので、Nagamelもどうぞよろしくお願いします。ぼぉっと空眺める時間、欲しいじゃないですか(笑)

 

 

今回作ったサイト
空を投稿するサイト Nagamel

12241745_1661604864098440_1419330459294015468_n



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

こんにちは。yasaiです。

めっきり寒くなって、冬もう間近ですね。みなさんは冬が待ち遠しいですか?
昨日は鶏肉とネギ焼いて食べました。串に通さない焼きとりです。
きっと冬には冬の楽しみ方があるんですよね。僕は布団にもぐって読書です。(こたつならなお良し)

さて、先日ユーザーから写真を投稿してもらうようなものを作りたいというお話を聞く機会がありまして。気軽に写真投稿するのって、写真に限らず文章でもなんでもそうですが、ちょっと難しいんだな、と思ったのです。

※SNSでいいじゃん、っていう話はさておき。こういうことが手軽にできるようなってるのも、SNSのすごさの1つですよね。

 

それでタイトルにしたように「ログインなしで誰でも投稿できる!Tumblrのゲスト投稿を使ったサイトを作ってみた。」ってことをしてみたので、その際のお話です。

12241745_1661604864098440_1419330459294015468_n

 

投稿できるいろいろな方法

誰でも投稿できるサイトの様なものの実現手段について考えてみましょう。
深く考察していませんが、パッと思いつく所はこんなものでしょうか?

  1. SNSのハッシュタグで集める
  2. 会員制のサイトを作る
  3. WPのプラグイン使う
  4. フォームで投稿してもらいかき集めて静的HTMLで表示

それぞれの問題点

「1.SNSのハッシュタグで集める」の場合

基本的に承認制ではないのでどうのような投稿も拾ってしまう。
SNSのアカウントが必要になる。

「2.会員制のサイトを作る」

ログインしないと投稿できない。

「3.WPのプラグイン使う」

サーバなどの初期コストがかかる。

「4.フォームで投稿してもらいかき集めて静的HTMLで表示」

1件1件HTML追加するのは大変。自動追加したりするのにプログラムが必要になるかも。

 

こうなってくると、それぞれに一長一短ありますね。
今回やってみたいことの要件は、

  • 誰でも投稿できる
  • アカウントやログインはしたくない
  • 主旨に反するような投稿は掲載したくない

ということにで考えます。

Tumblrのゲスト投稿について

そこで今回はTumblrのゲスト投稿を使ってみます。

そもそもTumblrってなんだという方はこちら。

Tumblrとは、アメリカのDavidville.incが運営する、世界中で注目のメディアミックス・ウェブログサービスです。「リブログ」というWeb上の画像、動画、記事を自身のブログにて引用・転載する機能があり、「ネット上のスクラップブック」として非常に人気が高いんです。またCMSとしての機能も備えていて、注目をあびています。

Tumblr(タンブラー)の使い方まとめ!【カスタマイズサイト例つき】
LIG 様のブログ より

IMG_3752
iPhoneアプリからの投稿画面

Tumblrのいいところはデザインのカスタマイズができて、サーバーが不要。
僕も簡易的なCMSとして使えると思うのです。また設定でFacebookやTwitterと簡単に連携できるのも嬉しいですね。

あとはWordpressなどに比べるとスマホアプリからの投稿が容易だと思います。(投稿への心理的な障壁が低い)
するっとボタンが出てきたりして、使っててちょっぴり楽しくなります!!

 

Tumblrのゲスト投稿について

  • Tumblrアカウントがなくても利用できる。
  • デザインの変更が比較的容易。
  • 管理者の承認で公開される。
  • 投稿の種類を選択できる。(テキスト・画像・引用・リンク・動画)
  • 使用するタグを指定できる。
  • TwitterやFacebookにそのまま流せる。

これで今回の要件は満たすことができそうですね♪

今回作ったサイト

今回作りたかったのは「誰でも投稿できる『空』の写真を集めたサイト」です。
※単純に写真集めるだけだとつまらないので、「空」シバリです。写真って書きましたけど、写真じゃなくてもOK。イラストでも加工したものでも。
※できたら素材集サイトみたいにできたらいいなぁって思いました。投稿者様の許可必須ですかね。

コンセプトは何となくぼぉっと「空」を見上げられるサイト、です。
(ぼけっと空を眺めている気分になれたら良いなぁ)

151116_02

上記の様な構成で作ります。そのために今回やったのは、

  • ゲスト投稿の有効化
  • テンプレートの修正(出力部分) タグの有効化とメニューへの追加
  • 削除依頼ページの作成(Googleフォームを利用)
  • その他のページ制作

になります。

まずやったことの前に、ゲスト投稿が公開されるまでの流れを説明します。

151116_01
クリックすると拡大します

 

  1. 上記の図のように、投稿するためのページが用意されます。(Tumblrのもともとのオプションで!! 作らなくていいんです!)
  2. そのページから投稿があると、ブログの管理者へメッセージが届きます。
  3. 管理者がメッセージから「公開」すると、投稿が公開されます。(もちろん承認しないことも、日付を指定して投稿することもできます)
    ※ここで注意点。実際に公開される時に投稿者は管理者となります。(後述)

 

 

一気に書き上げようと思いましたけど、ちょっと長いですね(汗)
続きは次回。なるべくすぐ書きますね。

 

今回作ったサイト
空を投稿するサイト Nagamel

今回はTumblrテーマSimplig-folioを使わせていただきました!!ありがとうございます!

12241745_1661604864098440_1419330459294015468_n



ウェブマスターツールの「検索クエリ」が新しくなり「検索アナリティクス」に!

21
今回は「検索アナリティクス(ベータ版)」の使い方を説明したいと思います。

ウェブマスターツールの検索トラフィックにある「検索クエリ」が新しくなり、
「検索アナリティクス(ベータ版)」がリリースされました。

1

 

検索アナリティクスって何が出来るの?

 

サイトがどれくらいの頻度でGoogleの検索結果に表示されたかがわかります。
4種類のデータを6種類のカテゴリでレポート表示できます。

 

検索アナリティクスの使い方

 

4種類のデータをグラフと表で表示できる。

赤枠部分の項目を追加してグラフに表示させることができます。

2

3
◾クリック数:Google検索結果ページに表示されたあなたのサイトをクリックして移動した回数
◾表示回数:あなたのサイトがGoogleの検索結果に表示された数
◾CTR(クリック率):Googleの検索結果においてサイトのコンテンツがクリックされた割合、クリック数÷表示回数
◾平均掲載順位:Googleの検索結果におけるサイトの「最上位」の平均掲載順位

 

6種類のカテゴリを表で表示できる。

赤枠部分のカテゴリごとに表示させることができます。

22

・クエリ:検索されたキーワードごとのカテゴリ
・ページ:あなたのサイトのページごとのカテゴリ
・国:検索された国ごとのカテゴリ
・デバイス:PC、モバイル、タブレットごとのカテゴリ
・検索タイプ:ウェブ、画像、動画ごとのカテゴリ
・日付:指定した日付ごとのカテゴリ

 

クエリ
Googleで検索されたキーワードごとのデータを表示します。
あなたのサイトがどのようなキーワドで検索されているかわかります。
4

 

ページ
あなたのサイトのページ別のデータを表示します。
ページごとのパフォーマンスを比較できます。
5

 


検索された国ごとのデータを表示します。
特定の国のみでの検索パフォーマンスを確認できます。
6

 

デバイス
PC、モバイル、タブレットごとのデータを表示します。
デバイスごとの検索パフォーマンスを確認できます。
7

 

検索タイプ
ウェブ、画像、動画ごとのデータを表示します。
基本ウェブの検索ですが画像や動画でもあなたのサイトを検索しているかを確認できます。
8

 

日付
指定した範囲の一日ごとのデータを表示します。
日付単位で検索パフォーマンスを確認できます。
9

 

フィルタ機能
各カテゴリでフィルタ機能が使えます。
フィルタを使うことで見たい情報だけに絞り込むことができます。

10

 

・クエリ:キーワードで絞り込みが行えます。

11

 

・ページ:URLの文字で絞り込みが行えます。

12

 

・国:検索された国を選んで絞り込みが行えます。

13

 

・デバイス:PC、モバイル、タブレットで絞り込みが行えます。

14

 

・検索タイプ:ウェブ、画像、動画で絞り込みが行えます。

15

 

・日付:指定した日付絞り込みが行えます。

16

 

比較機能
今回、追加された機能としてデータの比較をすることができるようになりました。

例として掲載順位のデータだけでデバイスの「PC」と「モバイル」を比較します。
23

「PC」と「モバイル」を選択

17

グラフ上に「PC」と「モバイル」順位の変動が同じグラフで見ることができます。
19

 

補足

画像のグラフ上にある「更新」ですが、2015/4/21に行われた
モバイルフレンドリーアップデートの日です。
20
「更新」の日を境にモバイルの検索順位の推移も調べることができます。
SEO対策の効果測定や改善のためには、検索アナリティクスはかなり実用的なツールになります。
Googleアナリティクスでは得られない貴重な情報がありますので、
工夫すれば様々な使い方ができます。

是非、使ってみてください。