髭犬のサイト

ウェブサイト運営

2020-11-15, 2020-05-31

アイキャッチ画像

HTML手打ちで「髭犬のサイト」を管理している時代遅れの髭犬が、どのようにサイトを運営しているか、その運営方針や設定等を紹介します。

サイト運営方針

自分の家を作る

髭犬は、当サイトをできるだけ簡素にして高速表示させたいと考えました。自分が最もよく訪れるサイトになるので、できるだけ快適に閲覧したかったためです。そのような望ましいサイト閲覧実現のために、以下の方針でサイトを運営しています。

静的サイトで高速表示

当サイトは、静的サイトで運用して、ページ表示の高速化を図っています。

ウェブサイトには動的サイトと静的サイトがあります。動的サイトでは、サイトにアクセスがあるたびに、サーバーのデーターベースから必要な情報が抽出されてHTMLファイル等が動的に構築され、ブラウザに送られて表示されます。広く普及しているWordPressなどで作られるサイトは、この動的サイトです。一方、静的サイトでは、構築済みのHTMLファイル等が既にサーバーに配置されてあり、アクセスがあれば直ちにブラウザに送られて表示されます。

静的サイトは、動的サイトよりも圧倒的にページの表示が速いです。上記の性質からサーバー側の負荷が動的サイトに比べて非常に小さく、HTMLファイル等が瞬時にブラウザに送られて、ページ表示が高速に行われます。

静的サイトは、維持コストを低減できるというメリットもあります。サーバーへの負荷が小さいことから、後述する無料のホスティングサービスを利用することができます。

サイトの簡素化(手打ちHTML)

ウェブサイトをシンプルな構成にして、できるだけ軽くしています。具体的には、一般的に多くのサイトで見受けられる過度な装飾(CSS)や不要な機能(Javascript)を排除しています。他のサイトと比べて、味気ないかもしれませんが、高速化のためです。

インターネット上には、凝ったデザインのサイトも沢山あります。しかし、そのようなデザイン重視の姿勢はサイト作成者の自己満足だ、と髭犬は思います。閲覧側の主目的は、サイトにある情報を得たいのであって、デザインを楽しみたいわけではないはずです。

なお、髭犬は当サイトのHTMLやCSSコードを手打ちしています。自分で手打ちすれば、無用なコードを使うことはなく、コードが最小化されます。

アクセス解析、ディスプレイ広告の排除

本サイトでは、訪問者に対するトラッキングを行っていません。またディスプレイ広告も使用していません。それらは、閲覧者に不快感を与えるだけでなく、ページ表示速度を低下させるからです。そもそも、アクセス数の少ない髭犬のサイトに対して、アクセス解析や広告表示をしても意味はありません。

ダークモードへの対応

ダークモードとは、ウェブサイトやアプリの黒基調デザインを指します。各種OSやブラウザが既にダークモード表示に対応しており(プラグインで対応する場合もあります)、従来のライトモードと新しいダークモードを選択する自由がユーザーにはあります。

ダークモードのメリットは、2つです。ディスプレイの周りが暗くても目が疲れにくくなることと、OLED(有機EL)ディスプレイのバッテリーが長持ちすることです。どちらも快適に閲覧するために必要な事です。

そこで、当サイトでも、ライトモードだけでなくダークモードにも対応できるように、それぞれ配色を設定しています。ちなみに、トップページのヘッダーロゴ画像の文字が灰色なのは、どちらのモードでも同じ画像を利用したいからです。

サイト開発環境

ウェブサイト作成ツールは、すべて無料のソフトウェアを利用しています。

HTMLエディタ: Brackets

Bracketsロゴ

HTML手打ちに適したエディタとしてBracketsを利用しています。多くのHTMLエディタと同様に、HTMLコード中のタグ、変数、値などが色分けされるので、コードが把握しやすいです。また、ライブプレビュー機能が標準で付属しているので、コードの確認作業が捗ります。嬉しい機能としては、複数フォルダ内のファイルを横断した置換機能があります。

このBracketsは、プラグインで機能を拡張できます。髭犬は、Emmet(省略記法)とBeautify(自動整形)を利用して、コード入力を効率化させています。

静的サイトジェネレーター: Python

Pythonロゴ

静的サイトジェネレーターをPythonで自作して利用しています。HTMLは各ページに同じ要素(ヘッダー、メニュー、フッターなど)があり、素直にHTML手打ちするとコピペが多くなります。そこで、何かしらのプログラミングの支援が必要になります。静的サイトの場合は、そのようなプログラムは、静的サイトジェネレーターとしていくつか存在しています。ただ、髭犬はそれらを構成するプログラミング言語を新しく覚えるのが億劫だったので、自身が理解しているPythonで自作しました。

ラスター画像処理: Irfanview

Irfanviewロゴ

ラスター画像処理には、Irfanviewを用いています。写真等は画像処理により大きさ、容量を調整する必要がありますが、髭犬は軽快な動作が特徴のIrfanviewを利用しています。ある程度ショートカットキーを覚えると、サクサク処理できます。

ベクター画像処理: Inkscape

Inkspaceロゴ

ベクター画像処理には、Inkscapeを用いています。SVG画像のちょっとした修正や、単純なイラストのSVG化などで利用しています。なお、SVGファイルは、SVGOMOで容量を削減しています。

サイト構成環境

独自ドメイン: スタードメイン

スタードメインロゴ

独自ドメインは、スタードメインに管理をお任せしています。1年毎の更新費用は、1,298円(税込)で、次年度割引に使える259ポイントが貯まります。そのため、実質年間維持費は1,039円です。.comドメイン維持費としては、最安レベルです。

なお、髭犬の労力を除いた当サイトの維持費は、このドメイン代のみです。

レポジトリ: GitHub

GitHub Desktopロゴ

レポジトリとは保管庫という意味で、この場合はHTMLファイル等が保管されている場所を指します。このレポジトリは、PCなどのローカル環境ではなく、クラウドサーバー上でも管理できます。

当サイトのレポジトリは、GitHubに置いています。GitHubのサーバー上にファイルがあるため、ネットさえあればレポジトリにアクセスできます。なお、GitHub Desktopで管理しているので、サイト更新時であってもGitHubのサイトを訪れることはありません。

ホスティング: Netlify

Netlifyロゴ

ホスティングとは、実際にサイトを表示させる役割を担ったサービスのことです。

使い勝手が良い無料のホスティングサービスとして、Netlifyを選択しています。当サイトのように小規模な静的サイトでは、有料でレンタルサーバーを借りるよりも、無料のホスティングサービスを利用する方が良い選択になっているようです。GitHub PagesやNetlify, Vercelなど幾つかの選択肢がありますが、使いやすさで良い評価を受けており商用利用も可能なNetlifyを当サイトは利用しています。

個人的には、静的サイトでもフォーム機能(お問い合わせフォームに使用)を簡単に導入できるNetlify Formsが、大変素晴らしいと感じています。

なお、当サイトで表示されているHTMLや画像ファイルは、GitHubのレポジトリから取り出されて、Netlifyのサーバー上にあります。同様のスキームは、多くのホスティングサービスで使われています。