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

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

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

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分程度でしょう。

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

ビジュアルリッチエディタが表示されない!

ビジュアルリッチエディタが表示されない。
ちなみにビジュアルリッチエディタというのは、 管理画面の本文を入力するエリアの「ビジュアルタブ」がONになっている状態のことを指します。

 

【ビジュアルリッチエディタの正常な状態 ↓ 】

ビジュアルリッチエディタ

これがなぜか表示されず、「HTMLタブ」だけだったり、

【HTMLタブだけ ↓ 】

HTMLタブしか表示されない状態

「ビジュアルタブ」も「HTMLタブ」もおかしかったり、

【両方おかしい ↓ 】

不具合が起きることは、わりとあります。 私が出会った事例と解決策を書いてみたいと思います。

HTMLタブだけ の場合

これは不具合ではなく設定の可能性が大です。 管理画面の「ユーザー」→「あなたのプロフィール」の設定画面に「ビジュアルリッチエディターを使用しない」というチェック項目があるのです…。

あなたのプロフィール設定画面

なんですかこれは…。ビジュアルリッチエディターがないほうが良いシチュエーションもあるのでしょうか。あまり使わないような気が(個人的に)。

これ、気づかずに30分くらい悩みました。 知らないって怖いですね。

両方おかしい場合

「ビジュアルタブ」も「HTMLタブ」も表示がおかしい。各種ボタンが表示されない。編集エリア内に文字を打ち込めているのかどうか見えない…。

かなりあせる状態です。

結論からいうと、「wp-includes」ディレクトリ内の「js」ディレクトリ内にある「tinymce」あたりが原因です。cdWordPressの本家サイトから新たにダウンロードし直して、この「tinymce」フォルダだけまるごと入れ替えてしまいましょう。

この不具合は、別の場所で一度構築したWordPressを使った場合に頻発します。 別環境で一度構築したものを本番で流用した、あるいはサーバ間の移行をした場合など。

 

時間がない時に不具合で足止めされるなんて、なんとしても避けたいところです。

 

人気記事

the_time()

現在の投稿の公開時刻を表示します。

位置

ループ内

引数

様々な様式で、時刻だけでなく西暦、年、月、日を表示させることができます。
詳しくは、Codex「日付けと時間の書式」へどうぞ。

コード記述例

基本の記述

<?php the_time(); ?>  →  12:09 AM
<?php the_time('Y年n月j日 l'); ?>  →  2008年4月1日 火曜日
<?php the_time('Y.m.d'); ?>  →  2015.03.09

query_posts()

WordPress ループ で表示される投稿を変更するために使います。
私の場合、一番お世話になっているタグです。グローバル変数$wp_queryを書き換えてしまうので、ループの最後でリセットするのを忘れずに。
リセットをしないと、あとに続くループの挙動がおかしくなります。

※query_posts() 関数はメインの WordPress ループだけを変更するためのものです。新たなループを作るためのものではありません。メインループの他にループが必要な場合は、get_posts() を使ってください。

意外な感じがするのですが(私だけかも?)、query_posts()で固定ページもひっぱれます

位置

ループの前

引数

普段あまり使わないけれど便利なものだけピックアップします!

  • post_status…ステータス・公開状態で引っ張れます。
    例)post_status=private
    …非公開記事

その他はCodexへどうぞ。

コード記述例

基本の記述

<?php query_posts('引数'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
//ここに表示したい内容を入れる
<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>

 

 

投稿のカテゴリースラッグがaaaの記事を表示する

<?php query_posts('category_name=aaa'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
//ここに表示したい内容を入れる
<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>

 

 

投稿のカテゴリースラッグがaaaまたはbbbまたはcccのとき、999個まで記事を表示する

<?php query_posts($query_string . "cat=" .(get_category_by_slug('aaa')->term_id .",".get_category_by_slug('bbb')->term_id .",".get_category_by_slug('ccc')->term_id) . "&showposts=999"); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
//ここに表示したい内容を入れる
<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>

 

 

固定ページをだす

<?php query_posts('post_type=page'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
//ここに表示したい内容を入れる
<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>

 

 

固定ページでページング

<ul>
<?php
global $paged;
query_posts('category_name=example&showposts=3&paged=' . $paged); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; endif; ?>
<?php posts_nav_link(' | ','前の記事','次の記事'); ?>
<?php wp_reset_query(); ?>
</ul>

 

 

カスタム投稿タイプ「aaa」または「bbb」でカスタムフィールドのKeyが「xyz」の記事を表示

<?php
$args = array(
'post_type' =&gt; array('aaa','bbb'),
'meta_key' =&gt; 'xyz',
);
query_posts($args); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
//ここに表示したい内容を入れる
<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>