お知らせ

現在サイトのリニューアル作業中のため、全体的にページの表示が乱れています。

adiaryという和製CMSがある。昔どこかで見たような懐かしい見た目のCMSだ。

書き口ははてなブログが近い。あちらは、はてな文法とMarkdownが使えるように、こちらはさつき文法とMarkdownが使える。

お試しで簡単に作ってみて、こちらのブログの記事をある程度移植してみたのだが、使い勝手もいい。

試しに作ってみたもの

まずサイドバーのタグツリーだ。WordPressではこんなものは作れないし、ツリーのタグをクリックすると記事の一覧が取れて更にそこからフィルタをかけることができる。

サイドバーのタグツリーからタグを選ぶと、更に絞り込みをかけることができる

正直言ってこれはかなり魅力的だと思う。WordPressの検索プラグインは使い勝手が悪いものばかりで、ここまで本格的なものは私は知らない。これはブログをログ代わりに使っている私にとって非常に魅力的な機能だ。

しかも表示速度も速い。以下は測定サイトで比較した結果だが、adiaryの速さは明らかだ。というか普通に操作していても全然違う。

WordPress adiary
WordPressの表示速度1
adiaryの表示速度1
WordPressの表示速度2
adiaryの表示速度2

この圧倒的な速度差を見るとadiaryに惹かれてしまう。ぶっちゃけ今すぐにでも乗り換えたいぐらいだ。

しかし、個人的にはいくつか物足りない部分がある。それはadiaryがGitHub Flavor Markdownをそんなにサポートしていないことや、A11yやレスポンシブデザインへの対応状況が今一つなところだ。この辺りはリポジトリをフォークしたので時間があるときに自分好みにカスタマイズしていきたいと思う。

とはいえ、WordPressもそれはそれで捨てがたいところがあり、悩むところである…。あとあちらはプレビュー機能がないので書きづらい(WordPressのエディタと違ってチープなのでスマホで書くときは便利そうだが

しかしMarkdownさえ快適に書ければ今にでも乗り換えたいので、やはり乗り換えたい気がする。というか乗り換えないと一生手出ししない気もするしなぁ…。とはいえ表示バグってるしなぁ…(記事として一部読めないのがある

投稿日:
ジャンル::サイト運営

今回はトップページのCSSやHTMLの構造の見直しを行った。

以下は整理前と整理後での行差分の比較だが、削除行が多いことがよくわかる。

行差分の比較画像。大幅に行が減っている事が伺える

以下は現在のトップページだが、実は左右のカラムと上下のコンテンツの各4セクションで使っているCSSが全く別物だった。これはHTMLの階層構造に対してCSSを当てていくという大罪をしていたからでもあるが、HTMLにCSSのクラスを書きたくなかったのもある。ただそれだとメンテがしづらいのと、やはり共通化しておきたいなということでAboutやSNSのような部分をlevel2_indent、その下にあるテーブルやBlog, Developmentのような部分をlevel3_indentとして、全体を共通化した。

トップページ

要するに、タイトル行からその下をインデントさせているので、このインデントという単位に抽象化したのだ。

またフッター部分もSponsoredとRootsは元々左揃えの縦並びにしていたのだが、力技でレスポンシブ対応していたのもあり、ズレることがあった。これも妙な拘りを捨てて横並びにした。

結果として見通しは良くなったと思うし、全部のUIがある種の部品化したので、今後のメンテはしやすくなったと思う。この思想を維持したままであれば、CSSのすり替えで見た目を変えるといったことも多分やりやすくはなると思う。やるかどうかは謎だが…。

しかしまぁ、トップページもだいぶ完成形に近づいてきたと思う。何が完成なのかは全く考えてないのであれだが…。

投稿日:
ジャンル::サイト運営

最近ちょいちょい気になっていたのですが、WordPressでGAのURLがURLエンコードされずに生の文字列で出るようになってきています。どうもある時期から切り替わっているようで、URLエンコードされた結果は徐々に減っていて、生の文字列の結果が増えてきています。何故だろう?GAの仕様がある日を境に変わったのかなぁ?

GAのURLがURLエンコードされずに生の文字列で出るようになってきている

投稿日:
ジャンル::サイト運営

タイトル通りトップページのレイアウトを変えてみました。

誰が見に来てるのか解らない部分なので変えたところでアレですが…w(トップページはアクセス計測してないので。。。)

PCビュー

変更前は縦長のレイアウトだったのですが、もうちょっと余白を活かした方がいいかなと思い、横にもレイアウトしてみました。デザインセンスが皆無なのでなんか余計に微妙になった気もしますが…。

他にも表組だった場所を段落にしたり、Sponsoredのバナーを縦置きにしたり細々と変えてます。

変更前 変更後
変更前、縦長
変更後、情報を一画面で見やすくした

SPビュー

経験技術のところは見やすさがマシになったと思います。余白が詰まって少し息苦しくなった気もします。

PCビューが縦長だったのはレスポンシブ対応をサボる為というのもあったので、今回はそこそこ真面目にやりました。結果、まぁまぁちゃんとレスポンシブになっているとは思います。まぁ、一応本業なので…。ブレークポイント周りの挙動は怪しい気もしてますが…(

変更前 変更後
PCビューとほぼ変わらないがSkillの部分が見づらい。元々レスポンシブ対応が面倒で縦長にしていた。
横に展開された部分が縦に折りたたまれるようにレスポンシブになっている。

あとがき

半ば何のためにあるかわからないトップページですが、素のHTMLを書く機会が少ないので、それを書くためだけにある節があります。それもあってJSは入れず、HTMLとCSSだけで書いてます。

一応自分なりにセマンティクスには拘って書いているつもりですが、概ね自己満足レベルな気はしています。Lighthouseの数値は悪くない気がするので、無難なところかなという気はしていますが…。

Lighthouseの結果は取り合えずぼちぼちな気はする。

Lighthouseの結果

まぁまた気が向いたときにいじろうと思います。この新レイアウトも8月頭に着想して原型を作って、中途半端な状態で今日まで放置してたのを直して何とか形にしたくらいなので…。

こんなんでもやってるとMedia Queries Level 4という新機能を知れたり、HTMLやCSSを書く能力が多少は鍛えられるので悪くないです。

MDNによるとMedia Queries Level 4の対応状況は「それなり」ということですが、今回使用したMedia Queries: Range Syntaxは、どのブラウザも対応してくれてそうで良かったです。MDNでも全てのブラウザがFull supportとあるので安心です。

投稿日:
ジャンル::サイト運営

気がついたら今のブログが200投稿に達していたのでその思いを書いてみます。この記事は201記事目です。

まずこのブログというか、サイトの成り立ちから書いていこうと思います。当サイトは2002-07-03 23:21に開設された、まぁまぁ運営期間の長いサイトですが紆余曲折あり当時のコンテンツはカウンターの数値くらいしか残っていません。カウンターの数値だけはずっと継承しています。

コンテンツとしては雑記や日記がメインで、取り留めもない思ったことをつらつらと書いていますが、最近は情報技術関係の記事が多めです。かつてはMMORPGの記事が多かった時代もありました。

サイト全体の系譜図としてはこんな感じで、結構URL変更やホスティングサービスの移動、サイトの統廃合なども行っています。lycolia.info以前のURLは黒歴史なので書いていませんが記録はしています。

当サイトの系譜図

というわけで、なんやかんやあり2022-06-21に現在の場所に移転してきました。移転前の記事数は120記事だったということで、移転してから80記事書いたということになります。参考までにこの集計は次のクエリで行いました。

SELECT
    COUNT(*)
FROM
    wp_posts
WHERE
    post_date < '2022-06-21'
AND post_status = 'publish'
AND post_type = 'post';

移転してきたばかりの頃は検索エンジンにインデックスされずアクセスが低迷していましたが、二年ほど経った今はだいぶ安定してきました。移転前ははてなブログを使っており、その前はWordPressを使っていて、今もWordPressなので、WordPress→はてなブログ→WordPressという感じで移転してきているのですが、ドメインの変更やURL構造の破壊的変更、リダイレクトが効かないなど様々な障害があり、サイト移転に完全に失敗しています。また、はてなブログに移転するときや、はてなブログからの移転で記事の移行が上手く行かず、結構な数な記事をロストしています。

はてなブログに移転した理由はMarkdownで執筆できるモダンな環境で、結構流行っていたからというところがあるのですが、実際に使ってみるとエディタは使いづらく、記事のタグも自分のサイト内だけを検索できる機能ではなく、何よりSEOが非常に悪く、まともに検索に引っかからないという、なんのためにやってるのかよくわからない状態だったのもあります。

あとはカスタマイズ機能がCSSとJSで魔改造する前提で、まともなセマンティクスやアクセシビリティの提供が極めて困難だったので、これがはてなブログを離れた理由でもあります。因みにはてなブログ時代はPVが多くて5/daysくらいという、サイトの歴史全体を通してみても致命的にアクセスがなかった時代でした。正直Pro契約で安くない料金を払っているのにこれはないなというので引き払いを決意し、WordPress向けのMarkdown執筆環境の構築に腐心し、今はWordPress上にそれなりの環境を作れています。

取り敢えずはてなブログから移転してきて80記事くらい書いたところでMAX 5PV/daysがAvrage 50PV/daysになったのは大分良くなったなという感じでした。はてなブログに行く前は1000PV位ありましたが、ラグマスブームの頃にヒット記事を書いてた影響なので過去を見ても仕方がないです。

過去のサイトも含めて書いてきた記事数は不明ですが、多分累計で4桁は書いてるんじゃないかなとは思います。特にROやってた時はクソほど書いてたので。最近はMMOも廃れそこまで日々熱意を持って取り組めることもないので、その時ほどは難しいですが、これからもぼちぼち書いていければなと思っています。技術記事以外の雑記とか、その辺りも増やして行って、SNSから離れて古くゆかしきインターネットに帰っていきたい思いもあります。

しかしまぁ、昔と違って常連さん的なのを作るのは難しいだろうなぁ…wなにせ特定の事柄を書かなくなってしまったのもあり、定期購読する価値が薄いサイトになってしまったというところが割とある気はしていますので…w