検索条件

から
検索タグ ジャンル::サイト運営
タグで絞り込み サービス(2) サービス::Value-Domain(1) サービス::さくらのレンタルサーバー(1) ソフトウェア(7) ソフトウェア::CMS(7) ソフトウェア::CMS::WordPress(3) ソフトウェア::CMS::adiary(6) 技術(1) 技術::DNS(1) 言語(1) 言語::Markdown(1)
日付で絞り込み 2020年(1) 2022年(2) 2023年(4) 2024年(9)
全16件 (3/4ページ) 一覧表示に切り替え

お知らせ

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

トップページのレイアウトを大幅に変えてみた

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

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

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

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とあるので安心です。

コメント（0件）

現ブログ200投稿記念

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

気がついたら今のブログが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から離れて古くゆかしきインターネットに帰っていきたい思いもあります。

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

コメント（0件）

重い腰を上げてBioサイトを作った

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

ここ何年かの間、自分のSNSとかのリンクを集約したり、経歴を書き連ねたりするWebページが増えてきていると思います。例えばHugoを使ったものはモダンで、学生や若い人とかに人気だと思います。流行から結構経っているので、もう廃れてるかもしれませんが…ｗ（Hugoメンテするのだるいと思うし…ｗ

こういう系のサービスは最近だとLinktreeをよく見ますし、リッチでモダンなサービスとしてBentoなんてのも見かけますね。Hugoはセルフホストタイプですが、これらのサービスはホスティングのノウハウや環境構築が不要なのはメリットでしょう。

Bentoは一応私も使ったことがあるのですが、感触がイマイチと言うか、当時はまだプレリリース段階で見た目がモダンなリンク集を作るので精一杯な感じがあったのと、独自ドメインの割当がだるかったので継続利用には至りませんでした。（サービス機能してはなかったのでCNAME当ててCDNなどのリバースプロキシから当ててやる必要があったと思います

かつて私もHugoのAcademicを利用してサイトを作っていたのですが、レイアウトのカスタマイズが面倒なのと、コンテンツをYAMLで書く必要があって書きづらかったり、極めつけはHugoに破壊的変更があった時の対応が果てしなく面倒でメンテが億劫になり、手放した記憶があります。

そしてしばらくはlycolia.infoは使わずにblog.lycolia.infoだけを使っていました。これもさくらのレンタルサーバーからはてなブログに移ったり、note.lycolia.infoとか言うのをGitHub Pagesに生やしたり、消したり、またblog.lycolia.infoをさくらのレンタルサーバーに戻したりと、紆余曲折ありました。

そして月日が経ち、そろそろlycolia.infoも活かしたいなということで今回は頑張らないBioサイトとして作ろうと思い立ちました。まずは重い腰を上げられるように小さく始めて、気が向いたら肉付けしてリッチにしていこうという方針で始めることにしました。どのくらい頑張らないサイトにしたかというと、以下の画像くらい頑張りませんでした。驚くほどシンプル。数分で作れます。何一つ頑張りませんでした。

初期の驚くほどシンプルなサイト

当時のコードがこれですが、わずか24行しかありません。JSもCSSもなく、純粋にプレーンな静的HTMLファイルです。流石にここまでシンプルなのは今時中々ないと思いますね。

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>lycolia.info</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
  <h1>lycolia.info</h1>
  <ul>
    <li><a rel="me" href="https://blog.lycolia.info">Blog</a></li>
    <li><a rel="me" href="https://github.com/Lycolia">GitHub</a></li>
    <li><a rel="me" href="https://gist.github.com/Lycolia">Gist</a></li>
    <li><a rel="me" href="https://www.last.fm/user/Lycolia">last.fm</a></li>
    <li><a rel="me" href="https://mstdn.hyogo.jp/@lycolia">兵庫丼</a></li>
    <li><a rel="me" href="https://misskey.systems/@Lycolia">みすてむ</a></li>
    <li><a rel="me" href="https://www.npmjs.com/~lycolia">npm</a></li>
    <li><a rel="me" href="https://twitter.com/Lycolia">Twitter</a></li>
    <li><a rel="me" href="https://www.tumblr.com/bonbolium">Tumblr</a></li>
  </ul>
  <p>© 2002 - 2023 Lycolia Rizzim All rights reserved.</p>
</body>
</html>

しかし余りにもシンプルすぎるのでもう少しリッチにしようと18時間後にはこうなりました。最初と比べる結構リッチな感じになったと思います。コードも157行に達し丁度6倍まで膨らみました。長すぎるのでもうここにコードは書けないですｗ 表示内容は依然としてプレーンな静的HTMLファイルのままではありますが、SSRとかではないので表示は早いと思います。JSはないですが、CSSは入るようになりました。また、懐かしのアクセスカウンターも導入しました。カウント値は過去に設置していたときのものを継承しています。

最初と比べると結構リッチになったサイト、比較で考えるとかなりリッチかもしれない

このサイトはOGを設置したり、A11yに配慮したり、Font Awesome入れたり、Font Awesomeにないブランドロゴはライセンスに配慮しつつ導入したり、そこそこ良い作りになるように意識しています。一旦記憶にある限りの自分のアカウントはリンクしたので、ソーシャルリンクとしては機能するようになったと思います。気が向いたらBiography的なやつも書いていきたいですね。このブログの自己紹介欄すらまともに書けてませんが（

実際に作ってみると色々感じることがありました。例えばそのうちの一つは、かつてはこうやってHTMLを手打ちしてWebページ、いやホームページを作っていたなという懐かしさです。このサイトは初代サイトから移転数を基準で考えると8代目になるのですが、随分遠くに来たものだと思いました。今やHTMLを手打ちするような機会はほぼないです。本業はWeb制作（フロントエンドエンジニア）ですが、仕事でもTSXしか書いてないですし、それすら書かない日のことが多いです。他にもWebArchiveで歴代のサイトを眺めていて、こんな時代があったなとか、昔の自分はこんなちゃんとした文章を書けていたんだなとか、かつてはホームページ運営を通じてこれほどまでにネッ友がいたんだなとか。本当に色々な思いがこみ上げてきました。またあの時代が戻ってきたらいいなとか思うのですが、過ぎ去った時代が戻って来ることはないので、そのあたりは諦めるしかないでしょうね。ただまぁ、こういうので感傷に浸るのも偶には悪くないものです。こないだも浸ってた気がしますが…ｗ

何年も前からHTMLの手打ちは非効率で面倒だとCMSを好んで使っていましたが、偶にはこうやって手でHTMLを書くのもいいものだなとしみじみしました。

また、カウンターを設置する際に久々にPerlのCGIを導入したのですが、久々すぎて意外なところでハマりました。CGIそのものは往年のKENT-WEBさんのものを利用させて頂いているのですが、こちらのPerlコードは改行コードがCRLFなんですね。CRLFで動くのか？と思いながら設置したら謎の500エラーが頻発、パーミッションに原因があるのかと直してみるも収まらず、結果としてレンタルサーバーのエラーログに以下のエラーがあり、改行コードの問題であることが解り、事なきを得ました。

AH01215: suexec policy violation: see suexec log for more details

さくらのレンタルサーバーのエラーログ閲覧画面、管理画面からでなくともSSHからログファイルを見ることもできる

これは昔だとFFFTPとかが勝手にLFに変換していてくれたので起きていなかったようなのですが、今時そんな事する人も多くないと思うのでSSHでアップロードしたり、wgetしたものを直接編集したりしてしまい、発覚が難しいかなと思います。もしまた引っかかることが無いようにGitHubに改行コードをLFにして、ついでに文字コードもSJISからUTF8に変えて更にねこみみカウンターを載せたものを置いておいたので、興味がある人は持っていってください。本家の使用許諾を読む限り多分ライセンス的にはセーフなはず…。

https://github.com/Lycolia/Magick-Nekomimi-Counter/tree/main

しかしカウンタープログラムのソースコードをまともに読むのは今回が初めてでしたが、とてつもなくシンプルな実装で驚きました。まぁ考えてみればCGI叩かれたらカウントアップするだけですもんね…。とは言え、画像を埋め込みHTMLの中に吐き出すのは知識がないと難しいですし、当時としては大変だったと思います。ImageMagickの神がかり的な使いやすさにも驚きました。GDだったらこんなものじゃ済まなかった気がします…ｗ なんか画像の矩形サイズ指定や透過色指定が必要で、汎用的に作ろうとすると面倒だった記憶が…（随分前のことなので記憶があやふやですが…

という訳で長々と語ってしまいましたが、最後に今回作ったBioサイトを紹介して終わりにしたいと思います。サイトというかLPなのでページですが…ｗ

https://lycolia.info/

しかし、フッターにある開設日時の表記が感慨深いです。このブログにも日までは書いてあるのですが、過去に時分まで書いていたことを思い出しWebArchiveからサルベージしてきました。開設当初の記載なので限りなく正確な情報です。秒までは記録がなかったので0秒としておきました。

This site since from 2002-07-03T23:21:00+09:00.
コメント（0件）

SANGOでWordPressの記事コードブロックが破綻する問題の解決

投稿日：
ジャンル::サイト運営ソフトウェア::CMS::WordPress

ログイン時と非ログイン時でコードブロックの改行が変化し、見た目が破綻する問題に気がついたので解決法

問題の事象

ログイン状態だと正常に表示されるが、非ログイン状態だとスーパーリロードなどをすると表示が壊れる

ログイン時 非ログイン時
正常表示
破綻した表示

問題の原因と解決策

非ログイン時にHTML上から改行コードが消えるのが問題でした

解決策としてはダッシュボードからSANGO設定 → 高速化 → HTMLを圧縮してキャッシュするのチェックを外せば解消します

解決したときの設定画面

コメント（0件）

Markdownで快適にブログを書く方法を考える

投稿日：
ジャンル::サイト運営言語::Markdown

Markdownを使って快適にブログを書きたくない？書きたいですよね？そう、書きたい！
ではどうすればいいか？というのをこれから書いていきます。
JAMStackを使ってGitHub PagesとNext.js SSGでMarkdownブログを作ろう！みたいな人はブラウザバックをオススメします。

技術選定

  • JAMStack
  • はてなブログ
  • WordPress

JAMStack

まずJAMStackは真っ先に除外します。ブログを書きたいのであってブログを作りたいわけではないからです。

またSSGだとクライアントサイドのレンダリングコストが重く、リッチなブログにしようとすると負荷がしんどい気がしています。恐らくSEO対策的にもCSRを妥協して極限までSSGしていないと厳しいのではないでしょうか？

はてなブログ

カスタマイズがすんごくだるい上に、真面目にやろうとするとクライアントサイドでHTMLをゴリゴリ書き換えたり、orderなどのハックに近いCSSを多用して擬似的に要素を移動させたりする必要があり、レイアウトを組むのが非常に面倒です。

エディタもしょぼいしカテゴリはないし（はてブロのカテゴリは実質的にタグなので）年会費が高い割に出来ることの制限が強い…。あんまSEOも強くなかったし、試しに使ってみたものの流入が激減…正直個人的にこれはですね。

WordPress

多分こいつが一番現実的な選択肢です。WP Githuber MDを使うことで不自由なくMarkdownを扱うことが出来ると思います。但し内蔵のPrism.jsはなんかいい感じに動いてくれないケースがあり、その場合はカスタマイズが必要です。

カスタマイズについてもプラグインやテーマが豊富にあり、改造も容易なのでローコストでリッチなものが実現しやすいと思います。またセルフホストなのでデータの取り回しの自由が効きやすいのも大きなポイントですね。

CMSは色々使ってきましたが、なんだかんだブログはWordPressが一番だなって思います。SEO対策もGoogle謹製のやつがあるし、特に何もしなくてもある程度なんとかなるのは強みだと思います。

カスタマイズ法

CSS

使っているテーマと整合性が取れるようにいい感じにします。私は Dracula for Prism.js を改造して使いました。

JS

私の場合は次のコードをヘッダタグの中に足して対処しました。特に内容の説明はしませんが、行番号とコピーボタンが出るようにしています。

<script src="https://unpkg.com/prismjs@1.28.0/components/prism-core.min.js"></script>
<script src="https://unpkg.com/prismjs@1.28.0/plugins/autoloader/prism-autoloader.min.js"></script>
<script src="https://unpkg.com/prismjs@1.28.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
<script src="https://unpkg.com/prismjs@1.28.0/plugins/toolbar/prism-toolbar.min.js"></script>
<script src="https://unpkg.com/prismjs@1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('pre > code').forEach((codeEl) => {
      codeEl.className = codeEl.className === '' ? 'language-none' : codeEl.className;
      codeEl.className = codeEl.className.replace(/^sh$/, 'shell');
      codeEl.parentNode.className = 'line-numbers';
    });

    window.Prism.highlightAll();
  });
</script>
コメント（0件）