【アクセス解析 Lunalys 特設サイト】
約3年4ヶ月ぶりのメジャーアップデート。
ついにiPhoneの機種名を解像度とデバイスピクセル比から
候補で表示するよう変更しました。最初からやっとけという話ですがw
表示が長くなるので「Pro Max」は「Max」に「Plus」は「+」に省略してます。
Androidの機種名と同様、新機種が登場しだい随時アップデート予定です。
拡大モードの値は要調査な感じ。実際に取れた値を検証（計算）して
恐らく正しいだろう機種のみ設定してます。倍率が複数あるのが難しい。
調べた感じ微妙に間違っている情報を掲載しているサイトばっかりだったので。
iPadは拡張モードで外部ディスプレイを使えるので
解像度から判別出来ませんでした。残念。
ちなみにiPhoneでも外部ディスプレイは可能のようですが、
単純なミラーリングなので取得する値は多分変わらない。
そしていまさらですがiPadOSにも対応。iOS13から独立（フォーク）
したのは知ってたのですが、組み込むの後回しにしてたら完全に忘れてました。
iPadは判定が複雑なんですがブラウザを片っ端からインストールして試しました。
あと最近のAndroidはChrome等でUA削減が進み、Android 10 固定
になってたので、UA-CHからOSバージョンを取るようにしました。
セキュリティの強化もガッツリしました。
データ取得時のパラメータに不正な値を無理やり設定して
バグらせようとする手法を確認しましたので、
全てブロックするよう対策を強化。
あの手この手で攻めてくるので個人的にはちょっと楽しい。
こんなやり方をよく思いつくものだと感心しますねw
君たちのおかげでまた一段高みへと登ってしまったよ……
アクセス制限機能の要望がありましたが今回は見送り。
正直需要は少なそうだし、それはアクセス解析の仕事では
ないと思うからです。要望を送って頂いた方には申し訳ない。
見解の相違というやつです。主な変更点は以下の通り。
- iPhoneの機種名を候補で表示するよう変更
- AndroidもUA-CHからOSを取得するよう変更
- 詳細ログのブラウザ表示領域を実数に変更（月間統計は四捨五入した値を使用）
- 月間統計の「検索キーワード」を廃止（2025年現在ほとんど取れなくなったため）
- OS判定を強化（iPadOS を追加：いまさら！）
- UA判定を強化（DuckDuckGo を追加）
- リンク元判定を強化（Pinterest を追加）
- スマホの愛称表記を最新版に対応
- ロボット判定を大幅に強化
- データ取得時の不正対策を強化（不正ログ作成防止、PHPエラー出力防止）
- 棒グラフを廃止し折れ線グラフのみに変更
- 月間統計の接続元ドメインのデフォルトを.jp のみに変更（v6connect.netは例外）
- 接続元ドメインの unknown 表記を廃止し月間統計に保存しないよう変更
- データ取得時に端末が横向きの時に表示領域を縦横逆にするよう変更
- フィーチャーフォン等古い端末の判定を廃止
- WebView の時はUAを上書きしないよう変更
- 月間統計で全件表示後に割合、推移に遷移した時に正常に表示されないバグを修正
- スマホ向けの月間統計にUA-CHを追加
- 日間統計にUA-CHを追加
- 月間統計のUA-CHに統合フィルターを追加
- 月間統計のUA-CHを見やすくするよう変更
PHPスクリプト
アクセス解析
Lunalys
【アクセス解析 Lunalys 特設サイト】
色々と思うところがあり『Lunalys』のバージョン表記を以下の通りに変更します。
再始動した時にメジャーバージョンを上げるべきでした。
2.3から2.4は内部的に滅茶苦茶書き直してて
ログのフォーマットも変更してリセットしてたのに
何でマイナーバージョンしか上げなかったのか。
正直自分でもよく分からないw 適当に付けたのを反省してます。
そして次のバージョンは「3.3.0」か「4.0.0」どっちにしようか迷い中です！ よしなに！
追記：次期バージョンは「4.0.0」になります！
- 2.4.x → 3.0.x
- 2.5.x → 3.1.x
- 2.6.x → 3.2.x
PHPスクリプト
アクセス解析
Lunalys
今までサイトのレイアウトはPCをベースに
各種サイズをpxで指定してたのですが、
フォントサイズを基準にしたemで設定し直しました。
スマホとかタブレットは年々表示サイズが大きくなってるのに
今さら気が付いたので、基準となるフォントサイズを
計算で出して最小値と最大値もついでに設定。
CSSも進化しましたね。
clamp(1.4rem, 100vw / 25, 2.0rem)
具体的には上記のように。横390pxだと15.6pxになります。
タブレットだと大きくなりすぎるので上限を設定。
ヘッダーのボタンとイラストのサイズも
スマホとタブレットで別々に設定。
AIイラストやリベサガプレイ日記のページもなるべく
画像が大きく表示されるように調整。
ここもPCベースのサイズからようやく改善！
Webサイト作成
私はいわゆる個人サイトを2000年から作って公開してます。
サイト名やらドメインやらサーバーやらコンテンツは
色々と変わってますけど。
まだやってたの という友人からの心無い言葉にもめげず、
なんだかんだ四半世紀もやってる。
続けてこれたのは多分、自作のブログツールがあったから。
これは改良しつつ今も使ってます。
サイト更新HTML手打ちは面倒だな……
そうだ 京都、行こう ブログツールを作ろう。
いやいや そうはならんやろ……なっとるやろがい！！
私なら作れちゃうからね。仕方ないね。
当時WordPressはメジャーではなかった気がする。
数年後にWordPressへの移行を考えた時期がありましたが、
オブジェクト指向で書かれてなかったのでやめました。
オブジェクト指向大好きだからね。仕方ないね。
これから個人サイト、ブログ的なのを始めたい人は今だと
note
とか
Wix
とか
Tumblr
とか
Studio
とか
Jimdo
とか色々サービスがあるからこういうのが手っ取り早いし、
デザインのテンプレートも用意されている。
デザインに凝りたいんだったら自分で作るしかない。
私の場合は面倒さより楽しさが勝ってる。それだけ！
Webサイト作成
先日スマホ向けのサイトデザインを変更しましたが
詳細を備忘録として残しておきます。
帯状のヘッダーを廃止
デザイン的に古いと判断。
無難なデザインだったがやや圧迫感があった。
丸ボタンでナビを表示
丸ボタンのリンクを3つのみ表示するようにした。
必要なナビゲーションはこれだけと判断。
戻るリンクを廃止
ブラウザのフリック移動が標準で搭載されるようになったから。
OSの機能かもしれない。
ブログのリンクをHOMEのみに移動
恐らく需要が低い上に見て欲しい度も低いから。
HOMEの表示とも繋がるので。
ヘッダーに大きくイラストを表示
絵描きを目指す者として結局見て欲しいのは絵。
初見時のインパクトを出したかった。
フッターにCopyrightを表示
さりげなく名前をアピール。
セルフブランディングの一環。
文字のフォントを変更した
現行のiOSで「ヒラギノ丸ゴ ProN」という
いい感じの標準フォントがあったから。
Androidは知らん。サイズも少し大きくした。
CSSをスマホとPCで分離した
レスポンシブに対応してから肥大化していたので
メディアクエリーで完全に分離させた上、
セレクターをなるべく減らしてダイエットした。
Webサイト作成
FOUCとは何ぞやというと
Flash of Unstyled Content
の略でWebページを表示する際にCSSが適用される前の
素のHTMLが一瞬表示される現象。チラついて見えます。
経験上、Firefoxで発生しやすい気がする。
先日のリニューアルで当サイトも発生してしまうようになりました。
PC版のFirefox限定ですけどね。
3日かけて調べて色々試した結果、
何とか解決したので備忘録として残しておきます。
Firefoxのページ右クリック→調査のコンソールで以下の文章が出たり出なかったり。
ページの読み込みが完了する前にレイアウトの開始が強制されました。
スタイルシートがまだ読み込まれていない場合、
スタイル付けされていないコンテンツがちらつく原因となる可能性があります。
要するにCSSのパースが終わってないのに
レンダリングが始まっちゃうってこと。
どう直せばいいのかも教えてよ。
通常はhead要素内で外部CSSを読み込むとレンダリングが
ブロックされるはずなんですが、されない。
なんでやねーん……
結局原因は何だったかというとスマホ向けのポリフィル（JavaScript）でした。
これが60KBもあるので悪さしてるっぽい。
script要素にもmedia属性が付けられたら
良かったんですが残念ながら無理です。
で、どうしたかというと
ポリフィル＋アニメーション設定
の部分を別の.jsファイルに分離して
スマホのみページ読み込みの最後で呼び出すようにしました。
「load」イベントだと戻る、進むの時に発火しないので
「pageshow」イベントを設定。
createElementでscript要素を作成してbody要素の最後に追加で完了。
あー疲れたー！！
Webサイト作成
