【WordPress】閲覧数・ランキング・評価数のプラグインを作りたかった話

サムネイル:Youtubeの閲覧数と評価デザイン

このブログがスタートしたのは2017年の夏ですが、ブログで発信したいという気持ちは2012年からありました。

そのときに既に考えていたのは、「記事の閲覧数を表示したい」ということです。
だから、どうやって作ればいいのか、取り組んでいた時期がありました。
完璧主義の悪影響で、結局コードを書くことなく、紙の上で、仕様や必要な処理を考える程度でおわってしまいましたが。

その資料も2017年6月に書き上げていて、去年の時点で記事にできたものでした。

今回、記事にできずに「このままではいけない」と重い腰を上げ、考察した過程を書き残すことにしました。
まずは動機、次に目標とした機能面、そしてアルゴリズムの考察に至ります。(最後に挫折した原因・理由)

いつも通り、誰かの役に立てば幸いです。

プラグインを作りたかった3つの理由

理由1) 記事を見分ける指標にしたかった

そもそものきっかけは、コンピュータ・プログラミングの記事を多く読む必要があったことです。
2012年の私は、WordPressに興味を持ち、VirtualBoxで仮想環境で動かしていました。
右も左もわからない状態で、「とにかくググる」ばかりでした。

Web上の、個人のブログ・解説記事というのは、質がピンキリです。
無償で読める一方で、情報の質や正確性が担保されにくいというデメリットがあります。
また、読みやすさやクオリティは、筆者の性格や文章量に左右されます。

例として挙げるなら、Webデザイナーは図説が多めでわかりやすく、プログラマー気質(?)の方は、図説もなく、膨大な文字数で読みづらい印象です。
(私は論理的ですが、読みやすさを気にしているので図を載せますし、論文のようにキャプションと番号を付けています。
折り返しなしで5行までにまとめるのは、単純な読みやすさとビジネス文書のルールを混ぜたもの。
メンタルヘルスに関するページでは、1行の文に対して2行の空白をよく見かける。)

本人は「丁寧に書いているつもり」なんだろうけれど、「自称:大人の発達障害」の私からすると、4,5行の長方形な「文字の塊」は読めません。
集中して、反転させながら読むくらいの工夫が必要です。

(携帯電話会社のパンフレットの欄外とかこんな感じ。)
(小説でも数行読み飛ばしてしまうことがある。音読すれば防げる。)
(国語の授業の影響で「段落さえしっかりしとけばいいだろ」と思っているのかも。)

知りたいことを探してスクロール……とっかかりもつかめず、そして記事の終わりへ。
そういうページは滅多に読み返しません。帰ります。
閲覧数を表示する必要性を意識し始めたのは、そういった質の低いページを見分けたいからです。
(「チラシの裏」的な扱いでも、Web上に載せてる時点で「読んで欲しい」という気持ちはあるハズ。)

とにかく技術関係でググっているときは、調べものやトラブルに対処しているため、「早く解決したい」んです。
(冒頭で、「どんな問題に」「どのように対処するか」を簡単な流れを書くこと。)

……

記事の先頭にYoutubeのような閲覧数と、GoodとBad(高評価と低評価)ボタンがあれば……。(Fig1)
それが技術系ブログのスタンダードになれば、役に立ちそうな記事を素早く見分けることを助け、評価されるために記事の質を向上させることができるのでは、と考えました。

Fig1.2013年のYoutubeのスクリーンショット
Fig1.2013年のYoutubeのスクリーンショット

 

理由2) 既存のプラグインの管理が不安だった

正直、必要としている機能をもったプラグインなんてものは、既に存在しています。
WordPressの場合、プラグインの検索機能も持っていましたし、(2012年当時は)WordPressのおすすめプラグインを紹介する記事も活発でした。

閲覧数の表示をするプラグインも、投票機能も、ランキング機能も……。
ハッキリ言って、これらのプラグインを組み合わせれば、やりたいことは実現できていました。

ところが、プラグインの導入には、「仕様や不具合に対処しなければならない」という不安がありました。

借り物のプラグインは、仕様を把握することが難しいです。
「導入してもいいけど重い」とか、「突然のバグに見舞われても、情報がない」とか。
日本語の情報を探す手間だってかかります。
(去年の話ですが、ランキング機能のプラグイン「WordPress Popular Posts」の動作状況にXserverの運営がアナウンスしたことがあります。)
【関連記事】今更ながらWordPress Popular Postsをインストールしました – 内向型人間の知恵ブログ

根拠のない自信(23の自分は若かった)から、「自作した方がいいじゃん」となって、開発の道へ進むことになりました。 

理由3) 評価されたかった

「動けない完璧主義」の自分が行動できたのは、「価値のあるプラグインになる」と自信があったと思う。
あわよくば、作ったものがデファクトスタンダードとなって認知されたかった。
自分に自信がないからこそ、認められるためにとった行動だった。 

作りたかった3つの機能と外見

機能1) 閲覧数の表示

00年代のホームページでは、入り口のページにアクセスカウンターがありました。
動画、イラスト、小説、音楽など、創作の類はSNSの機能として閲覧数(再生数)が記録されています。

ブログでは、閲覧数はあまり重要とされていないように思います。
集計後のランキングは多くのサイトで見かけますが、記事ごとに個別に閲覧数が表示されているのは、ほとんど見かけません。

私はブログを書く側だったので、「どのくらい読まれたか」が知りたかったんだと思います。

(考えてみれば、「閲覧数が少ないと最後まで読んでもらえない」可能性があります。
後述する外見の都合で、高評価・低評価の表示もセットになりました) 

機能2) 高評価・低評価の投票

記事の質を見分けるために一番重要なのが、「役にたった・立たなかった」を数字にすることでした。
(基本的に)「役に立った」と感じた人が多ければ、それは他の人にも役に立つ可能性は高いです。

この数字が記事の先頭にあれば、記事をスクロールせずに「良い記事かどうか」を測ることができ、毎回ページを全力で読まずに済むと思いました。 

機能3) ランキング(人気の記事)

ランキングは、どのブログサイトでも見かける機能です。
集計して上位の5〜10の記事をピックアップできるのは、閲覧数や評価数よりもシンプルです。
(「1番読まれている記事」「2番めの記事」「3番目……」)

せっかく自前で集計するので、足を伸ばしてランキングの表示まで組み込みたいところ。

また、上の二つの機能と比べて、表示する場所が異なります。
(主にサイドバー) 

Youtubeから影響を受けた外見

書く順番を迷いましたが、ほしい機能と外見が決まったのは、ほぼ同時です。
Youtubeの再生数と評価数の見た目が好きで、プラグインを作るのであれば真似をしたいと思っていました。

プラグインの名前は、「あなたが評価を決める」とYoutubeをかけて、「YouChooseにしよう」なんて妄想をしてました。 

作りたくてやったこと

ググる

開発のために何をしたかといえば、まず最初はググることでした。
まずはプラグインの作り方。
これがなかなか見つからない。

とりあえず、ウィジェットでテキストを挿入するような初歩的なプラグインの制作は、ここから外す。
データベースと連携して、プラグインを削除したときの挙動までをカバーする仕組みにしたかった。
(完璧主義で、必要なことを追求してハードルを上げた結果、自分自身が乗り越えられないのはよくある愚行。)

ただ、作るにあたって「データベースを壊したらどうしよう」と不安になり、「壊したときの対処方」も確立できなかったので行き詰まった。
(単純に仮想マシン上で作って再起動すればいいのでは……)

【プラグインの作成とデータベースに関して読んだページ】
WordPressでデータベースを使ったプラグインを作成する _ 高橋文樹.com

WordPressのプラグインでデータベースを作成・削除・アップデートする方法 _ OXY NOTES 

閲覧数を保存・更新・表示するコードの収穫

ソフトウェアのようなプログラムの塊について、ドンピシャな作り方が紹介されていることは、まずありません。
これは、2年前の2010年頃にエディタを作りたくて挫折したときに経験していました。
(プログラミングとは、入門書の頃は練習問題を解くには書籍の中のパーツを集めればよかった。
その先は荒野で、作りたいものを作ろうとしたとき、この方法は上手く行かずに挫折にしかならなかった。)

その中でも、閲覧数に関しては実装できるコードが見つかりました。
役に立つと評価されたのか、このコードは複数のサイトで紹介されています。 

▼閲覧数の表示を実現するコードが掲載されているサイト
Track post views without a plugin using post meta – IsItWP

[WordPress]プラグイン無しで記事のアクセス数をカウントする関数と、アクセスランキングの表示を行うスニペット

[wordpress]プラグインを使わずにアクセスランキングを作る方法 – MEGE’s Factory

記事のアクセス数をプラグインなしで計測しWordPressの管理画面に表示する _ Plusers

『プラグインなし』で人気記事一覧を出力する方法【WordPress】 

ただ、個人的に「コードをコピペすればOKですよ」ってのは苦手
(WordPressに関する記事はこういうものが多い。)
HTML/CSSなら(厳密にはマークアップ言語だから)処理の流れがないし、理解できればその場で完結するからまぁ平気。

でも、プログラミング言語だと、「そこで何が起きてるのか」がわかっていないと、他の部分を自作したときに干渉する可能性がある。
動機の項でも語りましたが、
「仕様や不具合に対処しなければならない」という状況は、「干渉を解決するための手間」につながります。

プロ並の方なら、音楽家が楽譜だけで理解できるのと同じように、コードを読むだけで済むんでしょう。
私はそうではないし、作り方を解説するのであれば、フローチャートもしくは自然言語で補足することが望ましいと、ずっと思ってきました。 

コードを読み解く

広まっているコードを読んでて思ったのが、この二つの関数は「似ている」ということ。(Fig2)
ほぼ同じ処理をしています。
(チュートリアルで広まったコードの著作権はどうなるのか疑問ではある)

Fig2.広まっているコードで気づいた類似点

このコードをフローチャートに起こしたものがこちら。(Fig3)

Fig3.コードをフローチャートに起こした画像
Fig3.コードをフローチャートに起こした画像

そこで湧いてきたのが、「効率化したい」という願望。
素人の自分が思いついたのが、「共通部分を関数にして呼び出す」と「二つの関数を一つの処理の流れにまとめる」ということ。
「閲覧数を表示する」という目的に向けて、一連の流れとして組み込めると思います。(Fig4)

Fig4.処理を一つにまとめた場合のおおまかなフローチャート
Fig4.処理を一つにまとめた場合のおおまかなフローチャート

……

それができればよかったんですが。
結局は、同時並行的にプラグインの設計を進めたものだから、手が回らなくなって挫折。
2014年の頃には諦めていたから、記事にしようとブログの開設まで3年、文章を書くのにさらに1年放置されている。
閲覧数は諦め、ランキング機能も有名なプラグインで済ませてしまった。 

NOTE:よくよく見ると、このコード……去年の自分でも気づかなかった点がある。
・閲覧数ゼロの表示はあり得ない(管理者モードをカウントしないならあり得る)
・カウントアップされた閲覧数を返していない

 

「何が必要か」を考える

閲覧数のコードもあって、「求めている機能」に対して、「内部的にどんな処理が必要か」はだいぶ埋めることができました。

当時のメモはこんな感じなんですが(Fig5)、写真だと読みづらいので、項目別に書き起こしたものと、清書代わりの画像も作って載せておきます。
(※A~Dの項目は書き起こすにあたって分類・加筆したものです)

参考にしたページも古くなっているし、今はもっといい方法があるかもしれない。

Fig5.去年書いた設計のメモ
Fig5.去年書いた設計のメモ

書き直したものがコチラ(Fig6)。

Fig6.自作のメモを書き直したもの
Fig6.自作のメモを書き直したもの

【A】閲覧数の表示に関する機能

▼期待する動作
・閲覧数を表示
・閲覧数を変数に格納

▼どんな処理をするか
・カスタムフィールドの使用(すべての記事にカスタムフィールドをセット)
・カスタムフィールド値の呼び出し
・初期値(0)
・増加
(カスタムフィールドが用意されてないと操作できない)
・コンマ(カンマ)で3桁区切りをする( number_fomat 関数を使う)

▼何の関数を使うか(内部処理)
・アクセス数の取得(読み込み)
get_post_meta()

・アクセス数の上書き(更新・保存)
update_post_meta()
add_post_meta()
delete_post_meta()

・カスタムフィールドの値を文字列から数値に変換(posts_orderby フィルタ)数値で評価する
orderby に meta_value_numを指定する

【閲覧数の表示に関して読んだページ】
WordPressでプラグインを使わずに閲覧数の多い人気記事を取得し、管理画面に閲覧数を表示する – OTTAN.XYZ 

【B】閲覧数をカウントする条件

▼期待する動作
・閲覧数をカウントする条件
・管理者、Botは除く
・数時間は同じ人をカウントしない
・連打(F5)対策
(ログインを伴うサイトではないため、Youtubeと異なりアカウントと紐付けて管理することができない)

▼どんな処理をするか
・案1:session を is_set で判別
・案2:ログイン時のみ自分を省く
is_user_logged_in()

▼何の関数を使うか(内部処理)
空欄。
(実際はBotを除く処理を作ろうとしたが、ググっても全然情報がなかった。
除外すべきBotの一覧も見つけたが、根拠がないために取り込む算段もつかなかった。)

【閲覧数のカウントに関して読んだページ】
WordPress、記事のアクセス数を取得する方法 _ 今日のプリン言 _ イラストレーターみやびの漫画館 作品集 – 月の高いところ

ニコニコ動画の再生回数カウンターが増える仕組みQ&A 

【C】人気ランキングの表示【sidebar.php】

▼期待する動作
・人気ランキングの実装
・記事(single.php)でのみ集計
・期間を指定できる(日曜から始まるカレンダー上の1週間
・サイドバーに表示

▼どんな処理をするか
・直接 sidebar.php に書いても可
(ウィジェットの場合、Textウィジェットでも可)
・functions.php に書いて関数を呼び出す方法も。

・date_queryがカギ
foreachで書かれているが、if (while)ループじゃダメなのか?

・1週間なのは投稿日ではなくアクセス数
(=1週間以内に投稿された記事の表示ではなく、1週間以内のアクセス数の集計に基づくランキング)

▼何の関数を使うか(内部処理)
・クエリを作成してサブループ
・書き方はたいして変わらない

・1週間のアクセス数の条件
・クエリの作成に使うプロパティの1つ
arrayの中に時間を指定するarrayを書く。
・「今日の週初め」の日を取得し、そこから1週間を範囲とする?
「今日から7日前」のアクセス数の方がいいか?

【ランキングの表示に関して読んだページ】
プラグインなしで画像付きの人気記事をWordPressのウィジェットに追加する _ Plusers

【期間の指定に関して読んだページ】
WordPressのdate_queryパラメータを使って、複雑な期間指定の投稿を取得する | Tips Note by TAM 

【D】人気ランキングの機能【functions.php】

▼期待する動作
・管理画面の投稿一覧に閲覧数を表示
・閲覧数で記事の一覧をソートできる

▼どんな処理をするか
・functions.phpにフィルタを追加
・カラムに閲覧数を追加
・閲覧数をカスタムフィールドから取得
・アクセス数を数値としてソートする

▼何の関数を使うか(内部処理)
空欄。
(難しさから見通しが立たなくなり、頓挫した模様。)

【管理画面上で閲覧数・サムネイルの表示に関して読んだページ】
記事のアクセス数をプラグインなしで計測しWordPressの管理画面に表示する _ Plusers 

挫折した理由

染み付いた完璧主義が足を引っ張ったのは言うまでもないです。
修正と実行を繰り返すのが当たり前のプログラミングで(この修正は別にいい)、中途半端なコードでデータベースに変更を加えることが怖かったのです。
(Pythonの入門でターミナルに表示する程度なら、すぐに破棄して書き直せるのですが)

この辺りは、詳しい人が身近にいればよかったのですが、当時はもうそんな人はいませんでした。
(ネット環境もなく、母校の大学のフリーWifiを利用するために通っていた状態で、孤独で、孤立していました。) 

おわりに

もっと有益な情報を残したかったのですが、全然作れなかった結果、メモ程度に。
「これはかなりの情報だろう」と意気込んでいたのですが、いざ記事を書き始めると「あんまり大したことないな……」と不安になっていきました。
それでも、記録は事実だし、アウトプットすれば財産になるので1ヶ月かけて完成させました。

2012年当時はプログラミングに希望を持っていましたが……抱えているものが多すぎて、手放すことにしました。
詳しい人に会えたら、プラグインを作るにはどうしたらいいのかとか聞いてみたい。
それでまた情熱を感じたら、素晴らしいことだと思う。

– – –
情報の裏付けをとっていたところ、
閲覧数の集計、投稿一覧にカラムを追加・ソートを解説している記事も見つけました。
ここで示したコードとはまた違うので、開発をしたい人にはプラスな情報だと思う。

[Wordpress] プラグインなしで記事の閲覧数をカウント・初期化するカスタマイズ方法 – WordPress自前主義