TELOG. Powered by Blogger.
🔖アニメ感想リスト |🔖ゲーム記事リスト

2019年8月28日水曜日


旬な深夜アニメ感想
ゲーム攻略日記
ユーチューバーについて思うことを 綴った趣味ブログ

【Blogger】各投稿記事にView数を表示(カウント)するには?モバイル版とPC版【Firebase】

【Blogger】各投稿にView数を表示(カウント)するには?モバイル版とPC版【Firebase】


Googleが提供している無料ブログサービス「Blogger」で各投稿記事のview数設定の実装方法ついてあまり知られてないようなので書いてみました。

よくありますよね、ブログやサイトをみると「8364view」とか「7645閲覧」とかね。

あれをBloggerで実装しようとすると、もともと備わっているウェジェットだけでは表現できません。

そこでGoogleが信頼をおいている「Firebase」というAnalystツールを使用します。



FirebaseにGoogleアカウントでログイン

https://firebase.google.com





プロジェクト作成の流れ

Firebaseにログインするとこんな感じの画面に移り変わります。
【Blogger】各投稿にView数を表示(カウント)するには?モバイル版とPC版【Firebase】


プロジェクトを作成をクリックして、プロジェクト名などを入力します。
【Blogger】各投稿にView数を表示(カウント)するには?モバイル版とPC版【Firebase】


view設置目的であれば「自分のブログorサイト名view」と解りやすくなっていれば問題ありません。

規約に同意して続行します。

Google アナリティクス(Firebase プロジェクト向け)と連携しますか?という画面に移動します。
【Blogger】各投稿にView数を表示(カウント)するには?モバイル版とPC版【Firebase】


連携は自由です。ログインに使用したGoogleアカウント内でGoogleAnalystを作成しているようでしたら連携すればいいし、作成してないのに連携するのは面倒くさい気もしますが、まあどちらでも構いません。

GoogleAnalystと連携するとFirebaseの新たなプロパティが作成されます。

「今は設定しない」を選択して続行するとそのまま新しいプロジェクトが作成されます。
【Blogger】各投稿にView数を表示(カウント)するには?モバイル版とPC版【Firebase】






【Blogger】各投稿にView数を表示(カウント)するには?モバイル版とPC版【Firebase】


開発 > データ・ベースに移動してRealtime Databaseを作成

【Blogger】各投稿にView数を表示(カウント)するには?モバイル版とPC版【Firebase】


Cloud Firestore
クエリと自動スケーリング機能を備えた次世代のRealtime Databaseから【データベースの作成】をクリックします。
【Blogger】各投稿にView数を表示(カウント)するには?モバイル版とPC版【Firebase】


するとデーターベースの青い作成画面が出てくるので、何もいじらずに「次へ」→「完了」をします。
【Blogger】各投稿にView数を表示(カウント)するには?モバイル版とPC版【Firebase】
【Blogger】各投稿にView数を表示(カウント)するには?モバイル版とPC版【Firebase】
【Blogger】各投稿にView数を表示(カウント)するには?モバイル版とPC版【Firebase】


Cloud Firestoreをプロビジョニングしています…の読み込み画面が終了するとこのような管理画面に変わります。
【Blogger】各投稿にView数を表示(カウント)するには?モバイル版とPC版【Firebase】
青い領域にあるblogger-viewの下にあるDatabaseの右隣がCloud Firestoreとなってるので、クリックしてCloud FirestoreからRealtime Databaseに切り替えてください。

青い領域に【データ】【ルール】【バックアップ】【使用状況】が確認できると思います。そこを【ルール】タブに切り替えます。
【Blogger】各投稿にView数を表示(カウント)するには?モバイル版とPC版【Firebase】


ここを直接いじります。【".read":false,】と【".write":false】の【false】を【true】に書き換えてください。
【Blogger】各投稿にView数を表示(カウント)するには?モバイル版とPC版【Firebase】
書き換えたら「公開」をクリックします。

プロジェクトID保管計画

ProjectOverviewの歯車ボタンからプロジェクトの設定へ移動します。
【Blogger】各投稿にView数を表示(カウント)するには?モバイル版とPC版【Firebase】


プロジェクトIDをコピーして一時的に保管してください。
【Blogger】各投稿にView数を表示(カウント)するには?モバイル版とPC版【Firebase】


最初の段階でFirebaseでやることはここで終わりです。





view数を表示させる

いよいよ最終段階です。直接テンプレートをいじくるのでバックアップなりしておいてください。

</body>の前にこのコードを貼り付けてください
コード内にある【YOUR-PROPERTY-ID】を先ほど一時的に保管した自分のプロジェクトIDに書き換えてください。例:blogger-view-3d87f







次に下記のコードを<data:post.body/>か、自分が表示させたい場所に貼り付けます。
基本的には<data:post.body/>を探して、その前に貼り付けるんですがここのブログの場合だとそれでは全ての投稿ページが共通のview数になってしまい、各自のview数を表示させることが出来なかったので、F12を押してデベロッパーツールを見ながら、自分が表示させたい箇所に貼り付けて表示しています。

PC版view数を設置する

自分のブログ・サイトをF12デベロッパーツールから開いて解剖していきます。

といっても、投稿時間・ラベルタグを設置している場所の近くに②テキストコードを貼り付けているだけなので簡単です。
【Blogger】各投稿にView数を表示(カウント)するには?モバイル版とPC版【Firebase】


モバイル版view数を設置する

次にめんどくさいのはモバイル版です。ウェジェットの扱いではないのでmobile='yes'を入力してモバイルにも表示するという手が使えません。

こちらもF12デベロッパーツールから地道に記事タイトルに隙間を探す方法になります。

自分のブログ・サイトを開いた状態でF12を押して「Ctrl+Shift+M」を押してF5更新するとモバイルバージョンのテンプレートになります。

タイトル下の隙間を探してください。
【Blogger】各投稿にView数を表示(カウント)するには?モバイル版とPC版【Firebase】


このブログのモバイル版はh1タグが終了したすぐ後ろに②テキストコードを貼り付けています。

テンプレート内のコードだとこのようになっています。
【Blogger】各投稿にView数を表示(カウント)するには?モバイル版とPC版【Firebase】


以上です。

Firebaseが上手く実装しても実装した瞬間からのカウントしかviewに反映されないので、それまでの注目を集めた記事は手動で入力する必要があります((´^ω^))


この記事を書いたりまとめた人
ʑ̸̀੭ੇㄝ゛੭ੇ

アドブロ推奨してます♪ アドブロ推奨してる管理人のTwitterアカウント
いつも多くの方々に訪問していただきありがとうございます( ◜◒◝ )更新の励みになってます((´^ω^)) 当サイトへのご意見やお問い合わせ・ネタ投稿などは《こちら》からご連絡いただけます。

関連記事
五十音順アニメ感想リスト

うずらインフォ 引用リンク

ARCHIVE

日本のネットスラングは正しく翻訳されません。:(


黒い砂漠:©Pearl Abyss Corp. All Rights Reserved. ©GameOn Co., Ltd. All Rights Reserved.