ウェブサイト運営

2020-09-23, 2020-05-31

流行りのWordPressを使わず原始的な手打ちで「髭犬のサイト」を管理している時代遅れの髭犬が、どのようにサイトを運営しているか、その運営方針や設定等を紹介します。

サイト運営方針

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

静的サイトで高速表示

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

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

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

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

カノニカルAMPへの対応

AMP(Accelerated Mobile Pages)というGoogleが中心となって策定した、モバイルでのウェブサイト閲覧の高速化を可能にする仕組みがあります。これは、ウェブページの機能に制限を設けてページ表示を高速化し、さらにページをキャッシュ化させて各地のクラウドサーバーに展開し、モバイルの検索エンジンに最も近いサーバーのページに誘導させる技術です。モバイルChromeなどの検索結果で、稲妻形状のAMPマーク(⚡)が表示されているものが、AMP対応ページです。体験した方は分かると思いますが、とても表示が速いです。

このAMPをモバイルだけでなくPC用ページでも利用するスタイルが、カノニカルAMP(Canonical AMP)またはネイティブAMP(Native AMP)です。AMPは、モバイルの表示速度向上のために開発されたものですが、PC用ページでも利用できます。PCの場合はキャッシュ化されたページに誘導されることはなく、検索エンジンでの検索結果にAMPのマークが表示されることもありません。ただ、キャッシュ化されないとはいえ、AMP対応ページは制約の多い設計指針からページ表示が高速化されます。

この髭犬のサイトもカノニカルAMPです。モバイルでもPCでも、AMPページが表示されます。モバイル検索結果でキャッシュ化されたページをご覧になっている方は、完全にストレスフリーだと思います。そうでなくても、比較的ページ表示は速いはずなので、快適に閲覧いただけているのではないでしょうか。

ところで、実はカノニカルAMPでの運営はとても楽です。カノニカルAMPと聞くとややこしそうだと思うかもしれません。しかし、モバイルページでもPCページでも同一のHTMLファイルで運用するだけなので、むしろとても運用しやすいです。

サイトの簡素化

できるだけ軽いウェブサイトにするために、シンプルな構成のウェブサイトにしています。AMPに対応すると必然的にシンプルなサイト構成になるのですが、そこからさらにスリム化させています。具体的には、サイトから過度な装飾や不要な機能を排除しています。他のサイトと比べて、味気ないかもしれませんが、高速化のためです。

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

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

アクセス解析、広告の排除

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

ダークモードへの対応

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

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

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

サイト開発環境

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

HTMLエディタ: Brackets

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

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

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

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

画像処理: Irfanview, Inkspace

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

ベクター画像処理には、Inkspaceを用いています。SVG画像のちょっとした修正や、単純なイラストのSVG化などで利用しています。

サイト構成環境

独自ドメイン: さくらインターネット

独自ドメインは、さくらインターネットに管理をお任せしています。有料で少々高いと感じているので、将来的にはGoogle Domain等に移管したいと考えています。

メールサーバー: さくらインターネット

独自ドメインメールのために、さくらインターネットにメールサーバーを借りています。ほとんど利用していないので、Gmail等に変更して、サーバー契約を解約しようかと考えています。

レポジトリ: GitHub

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

当サイトのレポジトリは、GitHubに置いています。GitHubのサーバー上にファイルがあるため、ネットさえあればレポジトリにアクセスできます。なお、GitHub Desktopで管理しているので、Gitコマンドは使ったことがありません。各種処理は、すべてマウス操作で行っています。

ホスティング: Netlify

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

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

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