ページを選択

ストブロ

Coffee's Blog.

アプリへのアクセスを解析して利用状況を把握したい!

執筆者 | 2022年11月01日 | Coffee, Kintone, ストブロ

アプリを作ったけど、「果たして本当に使ってもらっているの?」という不安がつきまとう(笑) 逆に言えばアクセスが少ないアプリは、何か改善が必要なのかも…そのアプリの利用状況をログとして保存し、アクセス解析に使用したい!と思いました。そしたら、全然そういうのはないんですね…

何人かの方がコードを公開してくださっていましたが、今回はKentaro1sh11さんのコードを参考に、何とか改造してみました!私プログラムは書けないので、あちこちのコードを切り貼りして…

改造の初期、どうしても訳が分からずKentaro1sh11さんに教えを請いました。「詳しくは分かりませんが」と前置きの上で、ヒントを頂いてその後 twitterで涼雨 零音さんからもアドバイスを頂き、なんとか形になりました。

お二人とも有り難うございました!

 Qiita 1sh11 Kentaroさんのページはこちら←

 twitterアカウント:kentaro1sh11

そして涼雨 零音:Rainy’s ASMR からも教えて頂きました!

 https://rainsuzusame.net/
 twitterアカウント:@RSuzusame

出来上がったアクセスログの記録アプリはこんな感じです。
Kentaro1sh11さんのコードから改良した部分は以下の2点です。

  1. デバイスの表記の追加
  2. カウンター表示の追加

デバイスの評価は物凄くアナログに解決しています(笑)そもそもデスクトップ用とスマホ用のJavaScriptが違うモノなので、文字列で記入するようにしました。

カウンターは以下の条件で動作します。

  • 閲覧者が同一の最新のレコードの情報を取得
  • アプリIDが異なればアクセスログアプリに新しいレコードを追加
  • アプリIDが同一ならカウンターに1を加算

こんな感じです。

実際に出来上がったコードはこの通り(継ぎ接ぎだらけで酷いコードだと思います。誰か直して欲しい…)
パソコン用js

(() => {
	'use strict';

const postAccessLog = async () => {


		//アプリ名の取得
		const paramGet = {
			'id':kintone.app.getId()
		};
		const respGet = await kintone.api(kintone.api.url('/k/v1/app.json', true), 'GET', paramGet);

		//ログインユーザー名取得
		const loginUserName = kintone.getLoginUser()['name'];


		// アクセスログアプリのアプリID
		const app = 221;


		// アクセスログアプリへのレコード登録
		const paramPost = {
			'app': app,
				'record': {
					'appId': {
						'value': kintone.app.getId()
					},
					'accessUrl': {
						'value': location.href
					},
					'device': {
						'value': 'PC'
					},
					'appName': {
						'value': respGet.name
					},
					'counter': {
						'value': 1
					}
,

				}
		};



		//AccessLogアプリから閲覧者が一致する最新レコードを取得
		const getAppInfo = {
			'app': app,
			'query': '閲覧者 in ("' +  kintone.getLoginUser()['code'] + '") limit 1',
			'fields': ['$id','appId','counter','閲覧者'],
		};


		const respAppId = await kintone.api(kintone.api.url('/k/v1/records.json', true), 'GET', getAppInfo);


		const lastAppId = respAppId.records[0].appId.value;


		const nowAppId  = kintone.app.getId();

		if (nowAppId == lastAppId) {

			if (respAppId.records[0].counter.value == "") {

				var counterup = 1;
				console.log(counterup);

			}else{

				var counterup = Number(respAppId.records[0].counter.value) + 1;
				console.log(counterup);

			}



		// アクセスログアプリへのレコード更新
		const paramPut = {
			'app': app,
			'id': respAppId.records[0].$id.value,
			'record': {
					'counter': {
						'value': counterup
					}
				},
		};



			const respPut = await kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', paramPut);

		}else{

			const respPost = await kintone.api(kintone.api.url('/k/v1/record', true), 'POST', paramPost);

		}//if
	}//postAccessLog


//  ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼
//    一覧画面表示時
//  ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲
	kintone.events.on('app.record.index.show', (event) => {
		postAccessLog();
	});

//  ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼
//    詳細画面表示時
//  ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲
	kintone.events.on('app.record.detail.show', (event) => {
		postAccessLog();
	});

//最終行
})();

モバイル用JS


(() => {
	'use strict';


const postAccessLog = async () => {


		//アプリ名の取得
		const paramGet = {
			'id':kintone.mobile.app.getId()
		};
		const respGet = await kintone.api(kintone.api.url('/k/v1/app.json', true), 'GET', paramGet);

		//ログインユーザー名取得
		const loginUserName = kintone.getLoginUser()['name'];

		// アクセスログアプリのアプリID
		const app = 221;


		// アクセスログアプリへのレコード登録
		const paramPost = {
			'app': app,
				'record': {
					'appId': {
						'value': kintone.mobile.app.getId()
					},
					'accessUrl': {
						'value': location.href
					},
					'device': {
						'value': 'スマホ'
					},
					'appName': {
						'value': respGet.name
					},
					'counter': {
						'value': 1
					},

				}
		};



		//AccessLogアプリから閲覧者が一致する最新レコードを取得
		const getAppInfo = {
			'app': app,
			'query': '閲覧者 in ("' +  kintone.getLoginUser()['code'] + '") limit 1',
			'fields': ['$id','appId','counter','閲覧者'],
		};


		const respAppId = await kintone.api(kintone.api.url('/k/v1/records.json', true), 'GET', getAppInfo);


		const lastAppId = respAppId.records[0].appId.value;


		const nowAppId  = kintone.mobile.app.getId();

		if (nowAppId == lastAppId) {

			if (respAppId.records[0].counter.value == "") {

				var counterup = 1;
				console.log(counterup);

			}else{

				var counterup = Number(respAppId.records[0].counter.value) + 1;
				console.log(counterup);

			}


		// アクセスログアプリへのレコード更新
		const paramPut = {
			'app': app,
			'id': respAppId.records[0].$id.value,
			'record': {
					'counter': {
						'value': counterup
					},
				}
		};







			//更新処理はどう書くの?
			const respPut = await kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', paramPut);

		}else{

			const respPost = await kintone.api(kintone.api.url('/k/v1/record', true), 'POST', paramPost);

		}//if


	}//postAccessLog


//  ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼
//    一覧画面表示時
//  ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲
	kintone.events.on('mobile.app.record.index.show', (event) => {
			postAccessLog();
	});


//  ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼
//    詳細画面表示時
//  ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲
	kintone.events.on('mobile.app.record.detail.show', (event) => {
		postAccessLog();
	});


//最終行
})();

このコードで以下の通り記録されます。

まだやれていないこと

やりたいけどまだ出来ていない事もいくつかあります。

  • URLをサブテーブルに記録(追加)していく。
  • 閲覧者の最新レコードが同一アプリIDだった場合でも、10分以上間隔が開いていれば新規レコードで記録する。

色々試して見ましたが、私にはまだ難し。
特にサブテーブルの扱いがちんぷんかんぷんです。

ご存じの方是非教えてください。
書き直してプラグイン化してくれたら最高です(笑)

さくらのレンサバをLet’s Encryptでhttps対応 その3

レンタルサーバーforビギナーズ さくらのレンタルサーバーをLet's Encryptでhttps対応(SSL対応) 「その3 混在コンテンツの解消」 みなさんご機嫌いかがですか、久しぶりのレンタルサーバーforビギナーズです。...

さくらのレンサバをLet’s Encryptでhttps対応 その1

レンタルサーバーforビギナーズ さくらのレンタルサーバーをLet's Encryptでhttps対応(SSL対応) 「その1 SSL証明書の申し込み」 みなさんご機嫌いかがですか、久しぶりのレンタルサーバーforビギナーズです。...

https化の実践

私用しているサーバーのhttps対応を先行させるべきか、社用で使用しているサーバーのhttps対応を先行させるべきか。 非常に悩みましたが、社用の方は構成がすっきりしているのでそちらの対応を先行させる事にしました。...

迷惑メールとの攻防

中々収録できないなぁ。 社内でも迷惑メールの研究を(勝手に)担当しているし、 迷惑メールの手口などには十分注意する様に心ぐうzがけているにも関わらず、先日地雷を踏んでしましました。...

https化への準備

今日から出張です。 自宅にいないので逆に出張先でできる作業は何かと考えました。 そこで、計画していたhttps化への準備を始めることに。 今日は手始めに同一サーバー内で動かしている2つのWordpressの整理。...

メルカリ、カウルを活用する。

backspacefmでメルカリの中澤さんという方がゲスト出演されていました。 ずいぶん昔の話です。 単純に中澤さんの印象が良かったので「じゃあ、メルカリ使ってみようかな」と思い立ち 大変不純なままにメルカリを使い始めました(笑)...

久し振りに更新が出来ている。

「忙しかったから」という訳でもないし「忙しくなくなったから」という訳でもないんだけど 久し振りにブログの更新が出来ています(笑) いま、https対応の為の準備をしています。 これまでWordpress管理画面は個別に共有SSL対応していましたが、...

光配線とPR-500MIとV6オプションと

おはようございます。 集合住宅に住んでいるのですが、これまで各戸へのネットワーク配線はVDSL方式でした。 これではフレッツ光契約でも100Mまでしか出せないんです。 そこで少しでも回線速度を稼ごうと申し込んだ「V6オプション」...

静的ページに外部のWordPressから記事を読み込む方法 解説

php7.1に対応し、mysqli(手続き型)の記述スタイルで 複数のWordpressから記事一覧を取得する為のphpです。 早速部分毎に解説していきます。 1)データベースへの接続 まずPHPの中でデータベースに接続する方法ですが、以下の部分です。...

0コメント


電器屋Walkerの過去配信のBGMで利用させて頂いております。

ポッドキャスト品質向上、整音テクニック 解説Live

開催のお知らせ

詳細はこちら

国際ポッドキャストの日

International Podcast Day Event

ツキイチ - 隣のポッドキャスト

まとめファンサイト