Monthly Archives: 4月 2015

PV（閲覧数）数をどうやって測っているの？

サイトを開設されている方であれば、どれくらい自分のページが見られているのかは気になりますよね。武蔵浦和なびでも、たまに総括としてPV数を公表していました。ちなみにPV数とはページビューの略で簡単にはページを閲覧した回数のことを指します。

さて、このPV数ですが、武蔵浦和なびではどうやって測っているのかというと。。。ごく一般的な手段です。
Googleアナリティクスを利用しています。
http://www.google.com/intl/ja_jp/analytics/

Googleアナリティクスはサイトのページないに特定のコードを書くことによって、PV数などを計測してくれるものです。

開設当初の状態ですが参考までに。これはサマリーです。期間を指定してみたり、どのページがよく見られているか、どこからよく訪問されているかなどなど、有用な情報がいっぱいです。

Googleアナリティクス

さらに面白いところとして、現在の訪問状況がリアルタイムに見ることもできます。

リアルタイム計測

※最初に記載しますが、レンタルブログ等、環境によっては利用できない可能性がありますのでご注意ください。

さて、このアナリティクスの利用ですが、基本的にGoogleアカウントがあれば誰でも登録できます。
まずはhttp://www.google.com/intl/ja_jp/analytics/ページにて、「アカウントを作成」を選びます。するとGoogleへのログインを施されるので、ログインします。次に申し込み画面が出てくるので、「お申し込み」を選択。ちなみに無料で利用できます。

申込画面

次の画面でGoogleアナリティクスのアカウントを作成します。アカウント名にはそのサイトを識別できるコードを、ウェブサイト名にはサイトの名前を、そして、サイトのURL、業種、タイムゾーンを選びます。データ共有設定は必要に応じてチェックを入れてください。そして、トラッキングIDを取得を選ぶとIDが取得できます。このトラッキングIDを規定のコードとして利用することで計測が可能になります。

アカウント作成

例えば、サイトに直接埋め込む場合は、Googleアナリティクスにログイン後、「アナリティクス設定」→「トラッキング情報」→「トラッキングコード」から埋め込むコードを取得できるのでこれをページに書き足します。

トラッキングコード

武蔵浦和なびの場合はサイト自体をWordpressで作成しているので、Wordpressのプラグインである「Google Analytics by Yoast」にて埋め込んでいます。使い方はシンプルで、プラグインをインストール後、設定メニューにてトラッキングIDを入力するだけです。

Google Analytics by Yoast

実はWordpressには「Google Analytics for WordPress」という同様のことができる良いプラグインがあったのですが、武蔵浦和なびでは、別のプラグインと衝突してしまい、ウィジェットが編集できなくなるという事態が。っということで、別のプラグインにて対応しています。

今回はPVの計測方法を書いてみました！サイトのPVを計測することで、「どの記事が人気なのかな？」「どの時間帯がアクセスが多いのかな？」とか色々とわかり、サイトの制作に役立てることができます。皆さんもぜひ利用してみてくださいね。

この上部のボタンを押したりドラッグすると動く一覧？は、カルーセルと呼ばれるものです。本来は自動で動くようにするのですが、武蔵浦和なびでは自動で動かないような設定にしています。カルーセル（carousel）はメリーゴーランドや回転木馬などのくるくる回転するもののことを指しており、WEBの世界では自動で項目が横にスライドしているパーツのことを指します。
複数の見せたい項目があるけど、スペース的に。。。っというときに、自動でスライドさせることで省スペースで多数のコンテンツを見せることができます。ただし、「動き」があることでそちらが気になり、メインで見せたいものから目が離れてしまったり、ユーザが見ているときに見せたいものが見えていないことなど欠点もありますね。

さて、このカルーセルですが、武蔵浦和なびではJQueryのOwl Carouselを使用しています。使い方は比較的簡単で、Owl Carouselのページよりファイルをダウンロード。ダウンロードしたファイルの中のowl-carouselフォルダの中にある「owl.carousel.min.js」と「owl.carousel.css」と「owl.theme.css」を使います。※自分でスタイルを作る場合は「owl.theme.css」は不要です。

この３つのファイルとJQueryをページ内でインクルードします。

<link rel="stylesheet" href="/common/css/owl.theme.css">
<link rel="stylesheet" href="/common/css/owl.carousel.css">
<script type="text/javascript" src="/common/js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="/common/js/owl.carousel.min.js"></script>

そして、カルーセルの設定はこのような感じです。私はフッター部分で宣言しています。

$('.owl-carousel').owlCarousel({
 slideSpeed  : 2000,
 autoPlay : false,
 scrollPerPage : true,
});

簡単に説明します。
slideSpeed：自動でスライドさせるときの時間間隔
autoPlay：自動スライドさせるかどうかのフラグ
scrollPerPage：falseにするとスライドの動きが１つずつになります。

ちなみに、他にも以下のようなパラメータがあります。
items：並べる個数
rewindSpeed：アイテムが最初にもどるスピード
responsive：レスポンシブにする

この辺りはマニュアルを読んだ方が良いですね。また検索すると日本語の解説ページもあるのでその辺をみると良いと思います。
そして、実際のデータ部分は以下のようになります。

<div class="owl-carousel">
	<div class="item">
		/* カルーセルの各項目の内容 */
	</div>
	<div class="item">
		/* カルーセルの各項目の内容 */
	</div>
	　・
	　・
	　・
</div>

先のカルーセルの設定で使ったclass名と同じクラス名のDivタブを用意し、その中に「item」というクラスのDivを項目分用意する感じですね。武蔵浦和なびの場合は、この部分にPHPによるデータ取得処理・ループ処理を持ってきてプログラムで生成させています。

これで準備は完了。あとはスタイルの調整等を行えばカルーセルの出来上がりです！

武蔵浦和なびはどのように作られているの？

武蔵浦和なびの開発についてちょっと書いてみようと思います。

武蔵浦和なびはWordPressというオープンソースのブログ／CMS プラットフォームで作成しています。これを利用することにより、投稿やタグ・カテゴリ付けが楽になり、また多数の優秀なプラグインがあるのでそれを利用して、会員機能やスパム対策などなどを行っています。武蔵浦和なびにログインすると分かりますが、スポット・イベント・写真・記事は全て「投稿」という扱いになっています。これを使うことで権限管理も簡単になるのですよね。ただ、武蔵浦和なびの場合は、イレギュラーなことも多数行っているので、直接モジュールを製作したり、WordPressに対して特殊な処理を追加したりしています。

WordPressの利用という意味では、「武蔵浦和なびの開発話」の方が純粋な利用方法をしていると思います（特にソース修正とかはしていないので）。「武蔵浦和なびの開発話」のような利用方法であれば、モジュールやプログラムに関する知識は必要ないので、割と手軽に導入できるかもしれませんね。
（実際、このサイト自体はWordPress・テーマ導入・テーマ修正・プラグイン導入程度なので、１時間くらいで作っていますし。）

イベントカレンダーを導入してみよう！

今回は、武蔵浦和なびのトップページにあるイベントカレンダーの導入方法についての解説です。武蔵浦和なびではイベントを「Wordpressのカスタム投稿」として管理しているので、そこのデータを表示できるようにする必要があります。ちょっとこれはWordpressのプラグインでは難しいので、JQueryのFullCalendarを利用して、カレンダーを作成し、FullCalendarのイベントにWordpressのデータを自作モジュールで取得するようにしました。

FullCalendar自体はJQueryで動作します。私は「fullcalendar-2.3.1」を使用しました。ダウンロードすると中に色々ファイルがありますが、必要なものは以下のとおり。

fullcalendar.min.css
fullcalendar.print.css
fullcalendar.min.js
lang-all.js
lib/moment.min.js
lib/jquery.min.js
lib/jquery-ui.custom.min.js

これらを使用したいページに宣言を追加します。なお、武蔵浦和なびではすでにJQueryは別のバージョンを読み込んでいるので、そちらをそのまま使用（互換性があったみたい）。

<link rel="stylesheet" href="/common/css/fullcalendar.min.css">
<link rel="stylesheet" href="/common/css/fullcalendar.print.css">
<script type="text/javascript" src="/common/js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="/common/js/jquery-ui.custom.min.js"></script>
<script type="text/javascript" src="/common/js/moment.min.js"></script>
<script type="text/javascript" src="/common/js/fullcalendar.min.js"></script>
<script type="text/javascript" src="/common/js/lang-all.js"></script>

さて、ここからカレンダーの導入です。挿入したいところに以下のタグを書きます。

<div id="calendar"></div>

そして、カレンダーのJQueryソースを書き足します。

$(document).ready(function () {
 $('#calendar').fullCalendar({
  lang: 'ja',
  header: {
   left: 'prev',
   center: 'title',
   right: 'today next'
  },
  defaultView: 'agendaWeek',
  height: 700,
  firstDay: 1,
  contentHeight: 600,
  columnFormat: {
   week: "M/D[(]ddd[)]",
  },
  events: 'イベント情報を生成するURL',
  eventRender: function(event, $element) {
   $element.href=event.url;
  }
 });
});

少し解説します。
「lang: ‘ja’」は、言語に日本語を使うことを宣言しています。
「header:」はヘッダー部分の表示方法を指定しています。この例では左に「前へボタン」中央に「タイトル」右に「本日ボタン、次へボタン」を表示することを指しています。
「defaultView: ‘agendaWeek’」はデフォルト表示を週カレンダーにしています。武蔵浦和なびの場合は、ヘッダーに月・日カレンダーの切り替えボタンを表示していないので、週カレンダー固定になります。
「columnFormat:」は週カレンダーの日付表示フォーマットです。この場合は「月/日(曜日)」と表示されます。
「events:’イベント情報を生成するURL’」はイベント情報を取得するURLを指定します。私の場合はPHPファイルになります。PHPファイルの方では以下のようなことをしています。

<?php
function GetTargetData($start,$end){
 //取得処理
}

// カレンダー開始日
$start = $_GET['start'];
// カレンダー終了日
$end = $_GET['end'];
//イベントデータ取得
$eventData = GetTargetData($start,$end);

//eventDataは以下のようなデータが入っています。
// $eventData[n]['title']：イベントタイトル
// $eventData[n]['url']：イベントページのURL
// $eventData[n]['start']：イベント開始日
// $eventData[n]['end']：イベント終了日
echo json_encode($jsonData);
?>

少しシンプルにしてありますが、$_GETパラメータの「start」「end」にカレンダーの表示期間が入ってくるので、それをもとにイベント情報を取得して、返却値としてjsonを返しています。

「eventRender: function(event, $element) {$element.href=event.url;}」は、重要なところでここでイベント情報のURLをリンクのhrefに設定するようにしています。こうすることで表示されたイベントがリンクになり、該当ページに飛ばすことができるようになります。

そのほか、少しCSSでスタイル加工しています。
変更用スタイル

これでこういう感じになりました！

イベントカレンダー