Lycolog

Matomoは標準では直帰ユーザーの滞在時間が取れないが、それをできるようにする方法。

実施前	実施後

確認環境

Matomo Version 5.7.1

やり方

トラッキングコードに_paq.push(['enableHeartBeatTimer', 10]);を追加するだけ。

公式ドキュメントを読む限り、これをすることで10秒以上閲覧した場合に滞在時間が取れるようになると思われる。なお、HeartBeatTimerという名前だが、眺めてみた感じ定期的にAPIリクエストを送ったりはしていないようだった。

取り敢えず10秒以下は0と同じでいいと思ったので10にしておくことにした。ビジット継続時間単位のビジットでも11秒以上の敷居があるので、キリもいい。11秒にしたほうがよりノイズが減り、正確かもしれないが、個人的には運用上10秒が取れても害はないので、細かいことは気にしないでおく。

なお、かつては名前の通り指定時間にポーリングしていたようだ。また5秒未満を指定しても機能しないらしい。

コードの追加例

 <!-- Matomo -->
 <script>
   var _paq = window._paq = window._paq || [];
   /* tracker methods like "setCustomDimension" should be called before    "trackPageView" */
   _paq.push(['trackPageView']);
   _paq.push(['enableLinkTracking']);
   (function() {
     var u="https://analytics.example.com/";
     _paq.push(['setTrackerUrl', u+'matomo.php']);
     _paq.push(['setSiteId', '1']);
+    _paq.push(['enableHeartBeatTimer', 10]);
     var d=document, g=d.createElement('script'), s=d.getElementsByTagName ('script') [0];
     g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
   })();
 </script>
 <!-- End Matomo Code -->

あとがき

公式ドキュメントの説明が薄いので、具体的にどう処理されているかはソースコードを読まないとわからないが、取り敢えず直帰ユーザーの滞在時間が見れるようになったので良かった。

一律で0sだと、内容を見ているユーザーと見てないユーザーが区別できないので、ここが分かるのは便利だ。

因みにGoogle Analyticsでも直帰は0秒扱いらしいが、そもそも最近この項目自体が削除されて、別概念に置き換わったらしい。

こういったことを踏まえると、やはり私のような個人サイト運営者にとってはMatomoは非常に便利なツールだ。

常連さんのアクセスを観察するのに標準のMatomoだとダッシュボード→利用状況→訪問数別のビジットである程度は見れるのだが、ビジット回数がベースでビジターがごちゃ混ぜになっていて辛い問題があったので、ビジターとビジットIDを一覧で見れるやつを作った。

コードはMatomo_Plugin_VisitorIdReportに置いてるので、もし使いたい人がいたら持っていって欲しい。

画面イメージはこんな感じ。

苦労したこと

公式の開発リファレンスが更新されてないのか、そのままでは上手くいかなかったり、あまり親切ではなく、どちらかと言えば有料プラグイン買ってねみたいな雰囲気だったので情報がなさ過ぎて苦労した。

ただ昨今はLLMという文明の利器があるので、大まかにはClaude Opus 4.6に書かせて、バグっていたらアタリを見つけて修正させて、どうにもならないところは手で直した。

推移グラフは実装方法が不明だったのでいったん放置しているが、ひとまずビジターID単位のビジット数が見れて、セグメント化ボタンからビジットの履歴を終えるところまでは作れたので満足だ。

他のサーバーを見ていて、ウチでもMastodonに翻訳ボタンを生やして機能させたくなったのでやってみた結果のログ。

内容としてはDeepLのアカウントを作成し、APIキーを取得し、Mastodonの.env.productionに追記して反映するだけなので、5分くらいあればできる。

月50万文字まで翻訳できるので、たまに短文の翻訳に使う程度なら必要十分だろう。

• 確認環境
• やり方
• トラブルシューティング
  • クレカ登録時に「決済手段を認証できませんでした。別の決済手段を選択してやりなおしてください。 (Error Code: OFQUTG)」と言われる
• あとがき
• 参考にしたもの

確認環境

• Mastodon v4.5.4

やり方

1. DeepL ProのAPIタブを開き、無料プランに登録する。クレジットカードが必要だが、意図的にProプランにしなければ課金されないらしいので、恐らく害はないだろう。
   

   

   

2. 適当にDeepLのAPIキーを取得する。xxxxxx-xxxx-xxxx-xxxx-xxxxxxxx:fxみたいな形式のやつ
3. 以下のコマンドで疎通確認

   export API_KEY={APIキー}
   curl -X POST https://api-free.deepl.com/v2/translate \
    --header "Content-Type: application/json" \
    --header "Authorization: DeepL-Auth-Key $API_KEY" \
    --data '{
        "text": ["Hello world!"],
        "target_lang": "JA"
    }'
   

   

4. Mastodonの.env.productionに下記を追記

   DEEPL_PLAN=free
   DEEPL_API_KEY=XXXXXX-XXXX-XXXXX:fx
   

5. リビルド

   RAILS_ENV=production bundle exec rails assets:clobber
   RAILS_ENV=production bundle exec rails assets:precompile
   

6. 再起動

   sudo systemctl restart mastodon-web
   

7. 動作確認して動いていればOK
   

   

   

トラブルシューティング

クレカ登録時に「決済手段を認証できませんでした。別の決済手段を選択してやりなおしてください。 (Error Code: OFQUTG)」と言われる

ブラウザを変えるといける可能性がある。

これはWindows Edgeで試してこう言われ、何度試しても無理だったが、Android Edgeで試したら一発で行けたからだ。原因としては、StripeのSDKが以下のようなエラー吐いてたのが関係していたのではないかと思っている。

Applying inline style violates the following Content Security Policy directive 'style-src 'self''. Either the 'unsafe-inline' keyword, a hash ('sha256-XXXXXXXXXXXXXXXXXX='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present. The action has been blocked.

あとがき

別にEdgeについてるBing翻訳機能でもいいのだが、こっちのほうが操作が楽だし、DeepL翻訳がうまくいかなければ、Bing翻訳という手も使えると思えばアリだろう。

2026-01-30追記

Misskeyをはじめとした互換性のないサーバーからの投稿配信すべてに翻訳ボタンが生えてきて邪魔なので結局取り去ることに…。翻訳ボタンが必要なケースは私のユースケースでは少ないので、この結果は微妙だった…。

参考にしたもの

• Introduction - DeepL Documentation
• tateisu​ :force:​:r_9a:: "(サーバ管理者向け) #Mastodon 4.0 の翻訳機能…" - juggler.jp Mastodon サービス

自分の投稿にあるタグの使用回数を知りたかったのでMastodonの本番DBを見る方法を調べた記録。

確認環境

Mastodon v4.5.4

やり方

postgresになってmastodon_productionを開くと見れる。

sudo su - postgres
psql mastodon_production

テーブル一覧は恐らくhttps://mstdn.example.com/pghero/で見れるものがそれだと思う。

DBスキーマ

有志が公開しているMastodonのER図を参考にさせてもらった。

今回打ったクエリ

自分が投稿しているタグの総数が知りたかったので、こんな感じにしてみた。たぶん自インスタンスのdomainはnullと思われる。適当なので知らんけど。

SELECT
  tags.name
  ,COUNT(*) as post_count
FROM statuses
  INNER JOIN statuses_tags
    ON statuses.id = statuses_tags.status_id
  INNER JOIN tags
    ON statuses_tags.tag_id = tags.id
WHERE
  statuses.account_id = (SELECT id FROM accounts WHERE username = 'Lycolia' AND domain IS NULL)
GROUP BY
  tags.name
ORDER BY
  post_count DESC;

クエリの結果

ゾンビランドサガと三宮に対する言及がめちゃくちゃ多いことがよく分かった。

参考

• MastodonのDBを外出ししてみたメモ
• Liam ERDで綺麗でインタラクティブなER図を自動生成する

重い腰を上げてadiaryのMarkdownパーサーを脚注記法に対応させたでadiary-extendsのロゴを作ったが、SVGの中の文字をtextで書いていたため環境によってフォントが変わり上手く表示できない問題と、あと微妙に中央寄せになっていない問題があったので、それらを解決することにした。

作業にはInkscape 1.3.2 (091e20e, 2023-11-25, custom)を利用した。かなり古いが昔入れてそのままのやつだろう。

やったこと

1. まずはInkscapeでSVGを開く
   

   

2. 次にtextオブジェクトを選択し、メニューから「パス」を開き、「オブジェクトをパスへ」でパスに変換する。この作業でtextはパスに変換され、環境依存が解除される
   

   

3. 次にはみ出ている「x」の右下の先っちょを削除する。
   背景のrectと「x」が入っているtext2を選択した状態でメニューから「パス」を開き、「分割」する
   

   

4. すると、こんな感じに分割される
   

   

5. はみ出ている「x」の右下の先っちょを選択しDeleteキーを押下して削除する。
   

   

6. 削除してきれいにまとまった図
   

   

7. 最後にメインロゴの「a」を上下左右中央寄せするために「整列と配置」から基準を「ページ」に設定する
   

   

8. 赤枠のボタンを押して左右中央寄せにする
   

   

9. 保存する
10. 出力されたSVGに大量のゴミが入っているので消す。
    具体的にはSVGの表示に関係ないメタ情報や、元のSVGにあったフォントスタイル情報などを根こそぎ消す
    

    

    

できたもの

そして微調整後のPNGロゴとSVGコードが出来た。

<svg
   viewBox="0 0 64 64"
   width="64"
   height="64"
   xmlns="http://www.w3.org/2000/svg">
  <path
     d="m 33.767578,47.558594 c -0.618815,0.0061 -1.26569,0.2028 -1.939453,0.591797 -2.291357,1.322915 -2.73401,3.378215 -1.330078,6.164062 l 6.955078,-4.015625 C 36.35768,48.458753 35.128971,47.545259 33.767578,47.558594 Z"
     fill="#899aff" />
  <path
     d="M 12,0 C 5.3520066,0 0,5.3520066 0,12 v 40 c 0,6.647993 5.3520066,12 12,12 h 40 c 6.647993,0 12,-5.352007 12,-12 v -4.310547 l -3.515625,2.03125 -6.660156,-3.064453 -0.728516,7.330078 -4.681641,2.703125 1.478516,-11.28125 -10.445312,-4.435547 4.925781,-2.84375 6.550781,3.001953 0.703125,-7.189453 4.695313,-2.710937 L 54.828125,42.394531 64,46.269531 V 12 C 64,5.3520066 58.647993,0 52,0 Z m 23.636719,43.931641 c 2.516946,0.111435 4.679689,1.732138 6.486328,4.861328 l 0.84375,1.460937 -11.109375,6.414063 c 1.99292,3.035172 4.679592,3.57617 8.0625,1.623047 1.768133,-1.020833 3.176063,-2.687757 4.222656,-5 l 0.148438,-0.08594 2.078125,3.599609 c -1.651207,2.035856 -3.409979,3.593752 -5.277344,4.671875 -2.940875,1.697915 -5.58565,2.292801 -7.935547,1.785157 -2.349897,-0.507645 -4.285809,-2.078733 -5.806641,-4.712891 -1.510415,-2.616116 -1.967927,-5.094297 -1.371093,-7.435547 0.591625,-2.350271 2.17313,-4.267579 4.74414,-5.751953 1.765878,-1.01953 3.403895,-1.496549 4.914063,-1.429687 z"
     fill="#899aff" />
  <path
     d="m 50.067085,46.621735 -9.386449,1.655084 -0.819402,-4.647062 q -3.682702,4.488942 -6.228128,5.889732 -2.509225,1.426138 -5.555974,1.963362 -4.677837,0.824829 -8.287158,-1.648494 -3.614749,-2.504099 -4.455857,-7.274261 -1.063595,-6.031948 2.912289,-9.937943 4.006658,-3.911423 18.489236,-7.258394 L 36.56742,24.409727 q -0.591489,-3.354502 -3.165531,-4.455501 -2.574042,-1.100999 -7.898159,-0.162213 -3.631478,0.640327 -9.913646,4.60393 l -0.338528,0.05969 -1.318641,-7.478384 q 6.835972,-2.982363 12.621718,-4.002546 9.017146,-1.589966 13.533445,0.628236 4.541649,2.182001 5.659509,8.521701 z M 39.150362,39.5982 37.565822,30.61183 q -9.158461,2.408185 -11.209774,4.451688 -2.05674,2.012727 -1.552075,4.874824 0.537224,3.046749 2.379945,3.959379 1.842722,0.91263 5.320324,0.299434 3.662254,-0.645754 6.64612,-4.598955 z"
     fill="#ffffff" />
  <path
     d="m 35.636719,43.931639 c -1.510168,-0.06686 -3.148185,0.410157 -4.914063,1.429687 -2.57101,1.484374 -4.152515,3.401682 -4.74414,5.751954 -0.596834,2.34125 -0.139322,4.819431 1.371093,7.435547 1.520832,2.634159 3.456744,4.205247 5.806641,4.712892 2.349897,0.507644 4.994672,-0.08724 7.935547,-1.785157 1.867365,-1.078123 3.626137,-2.63602 5.277344,-4.671876 l -2.078125,-3.599609 -0.148438,0.08594 c -1.046593,2.312243 -2.454523,3.979167 -4.222656,5 -3.382908,1.953124 -6.06958,1.412126 -8.0625,-1.623047 l 11.109375,-6.414063 -0.84375,-1.460938 c -1.806639,-3.12919 -3.969382,-4.749893 -6.486328,-4.861328 z m -1.869141,3.626953 c 1.361393,-0.01333 2.590102,0.900159 3.685547,2.740235 l -6.955078,4.015625 c -1.403932,-2.785847 -0.961279,-4.841148 1.330078,-6.164063 0.673763,-0.388997 1.320638,-0.585736 1.939453,-0.591797 z"
     fill="#001382" />
  <path
     d="m 64,46.269531 -9.171875,-3.875 1.494141,-11.164062 -4.695313,2.710937 -0.703125,7.189453 -6.550781,-3.001953 -4.925781,2.84375 10.445312,4.435547 -1.478516,11.28125 4.681641,-2.703125 0.728516,-7.330078 6.660156,3.064453 L 64,47.689453 Z"
     fill="#001382" />
</svg>

以前のtextだった時のものと比べるとパスデータになった関係でだいぶコードが増えているが、やむを得ない。以下は以前のSVGコード。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
  <rect x="0" y="0" width="64" height="64" rx="12" ry="12" fill="#899aff"></rect>
  <text x="18" y="52" transform="rotate(-10, 25, 62)" font-family="Meiryo, serif" font-size="64" font-weight="bold" fill="#fff">
    a
  </text>
  <text x="25" y="55" transform="rotate(-30, 50, 50)" font-family="Meiryo, serif" font-size="32" font-weight="bold" fill="#001382">
    ex
  </text>
</svg>