HTMLを固定にするか。それともJSやサーバサイド言語により動的にHTMLをつくるか。
トレードオフ
静的／動的のどちらにすべきか。その選択は自由度とコスト・リスク・パフォーマンスのトレードオフに同じ。
静／動
- 静的（HTML内容は固定である）
- 動的（HTML内容は変動する）
現代
静的HTMLだけのサイトなど現代では絶滅危惧種であろう。動的HTMLなのが当然だ。たとえば記事にはコメント欄がついている。これはHTMLだけでは実現できない。どこかのサーバにデータベースがあり、JavaScriptでHTMLを動的に生成している。WebMentionならば外部サービスを使ってコメントを取得し、静的HTMLを作成できるらしい。それでもJavaScriptで動的にHTML生成が必要である。
動的サイトはSSRかCSRのどちらかにするかで実装方法がかわる。それによって使用するフレームワークが決まる。
たとえばNuxt.jsなどのフレームワークを使い、Jamstackに構築するのが現代風だと思われる。SSRかCSRのどちらにするかは実装による。Github Actionなどの外部サービスを使ってCIを実装・実行し、サイトをビルド＆デプロイする。デプロイ先のHTTPSサーバはGitHub PagesやNetlify。さらにCIでWebSubやTweetなどの外部通知もする。また、Web-hookによりWebMensionを受けたらコメント表示HTMLを動的生成し、その都度ビルド＆デプロイする。
静的
サーバ、クライアントともに負荷が最小である。パフォーマンス的には、できるだけ静的な部分を増やしたほうがいい。ただ、より便利なアプリ風の動的サイトを求める傾向にある。単なる文書だけでよかった昔のような静的HTMLでは、要件に応えられなくなりつつある。
CSSを使えば、JSでHTMLを動的に変更せずとも、ある程度は動的にすることができる。たとえばメディアクエリを使ってデバイスの画面サイズに応じたCSSを適用するなど。ただし、HTMLは静的である。
動的（SSR）
HTMLをサーバサイド言語（PHP, Perl, Node.js等）によって動的生成する。クローラがHTMLを解析しやすいため、SEO的に有利である。
HTTPSサーバに加え、サーバサイド言語とそのコード、そしてDBが必要である。それを提供できるサーバは限られており、有料であることがほとんど。そのため利用できる人は限られる。
動的（CSR）
HTMLをクライアントサイド言語（JavaScript）によって動的生成する。クローラがHTMLを解析するためにはJavaScriptを実行する必要があるため解析できない場合があり、SEO的に不利である。
HTTPSサーバさえあればいいため、サーバ側は静的HTMLサイトの構築と同じである。そのため実現しやすい。たとえばGitHub Pagesなどがあり、無料でHTTPSホスティングしてくれる。もしこれからWEBサイトを作るなら、この方法が最もコストが少なく、堅牢で、かつ自由度が高い方法だろう。
ブログ投稿サービス
最も簡単にブログをはじめることができる。その代わり自由度は低い。広告があったり、重かったりする。コメント欄があり動的サイトになるが、自作できる部分は限られる。
エンジニア用ブログは以下。
ちょっと違うけど、以下のようなサービスもある。
ググってみると宣伝文句は以下だった。
- はてなブログは、無料でしっかり書けるブログサービスです。日々の生活から感じたこと、考えたことを書き残しましょう。
- WordPress.com に登録すれば、無料のサイトやブログを簡単に作成できます。カスタマイズ可能な何十ものモバイル対応デザインやテーマをすべて無料で利用できます。
- Zennはエンジニアが技術・開発についての知見をシェアする場所です。ウェブ上での本の販売や、読者からのサポートにより対価を受け取ることができます。
- Qiitaは、エンジニアに関する知識を記録・共有するためのサービスです。 プログラミングに関するTips、ノウハウ、メモを簡単に記録 & 公開することができます。
- note: クリエイターが文章やマンガ、写真、音声を投稿することができ、ユーザーはそのコンテンツを楽しんで応援できるメディアプラットフォームです。だれもが創作を楽し
▶我らがはてなブログはアピールが弱いと思う
そこでもっとキャッチーなはてなブログの宣伝文句を考えてみた。79文字以内で。
「はてなブログは無料でブログを作れます。お題やスターなどの機能で皆とゆるくつながる楽しい日記をはじめませんか？」
「はてなブログで日常をゆるくシェアしませんか？」
「はてなブログはスターやコメントをつけて日常をゆるくシェアできるブログです。趣味や勉強など自由に書いて刺激しあいましょう」
「はてなブログは毎月300MBまで無制限に書ける無料ブログです。安心して長く書き続けられます。スターやコメントをつけて日常をゆるくシェアできます。」
機能がしょぼいのであまりアピールできるところがなかった。なのでその中途半端さを良さげに見せかける書き方にした。ぶっちゃけスターやコメントをつけられるなんて、競合他社でも当然のように持っている機能である。マークダウンで書けるのも当然だし。SSGがあるのでカスタム性をアピールしても微妙。皆とつながるソーシャルさをアピールしてもTwitterなどのSNSにはかなわない。ぐぬぬ。好き勝手に書ける自由さをアピールすべきだろうが、ターゲットの焦点がブレブレになる。
容量の多さはウリになる。たぶんこれがはてなブログのもつ競合他社への最強アドバンテージだろう。長く続けたい人にとってはね。すごい地味だけど大事。でも、いつサービス終了するかわからないので、うかつに「人生の記録を残してみませんか？」みたいなキャッチーなことは書けない。ウソになりかねないからね。
はてな全体では色々なサービスがあるが、中途半端だ。はてなキーワードとかいうWikipediaっぽいものがあるが、ユーザが編集はできないし、勝手にリンクされてしまうだけのシロモノ。はてなブックマークやハイクなどもあるが、ブログとは別サービスだし。はてな匿名ダイアリーは匿名で書けるブログっぽい掲示板的なもの。良さげだけど、私は使ったことがない。
なんか中途半端なんだよな。バランスとれているともいえるけど。なので、そのへんを有耶無耶にして、なんかいい感じに書いてみたのが先述の文。とくに「ゆるくつながる」がアピールポイント。密につながったら息苦しくなるツイッターとは違うし、ぼっちで書く日記とも違う。同調したがるも自分勝手でいたがる日本人に訴求する文章にしたつもり。
ZennやQiitaはターゲット層が明確なのでわかりやすい。特にZennはマネタイズできる点が差別化できるポイントとしてアピールできている。
WordPressもいいね。無料でブログを簡単に作れるという要約がわかりやすい。簡単という部分が曖昧だが、後述の「カスタマイズ可能なデザインやテーマ」というところで補われている。しかもそれらがすべて無料で使えるということが無料の強いアピールにもなっている。
それに比べて、はてなブログのアピールときたら残念すぎる。「無料で」はアピールとして弱い。無料で書けるサービスなんてほかに沢山ある。というか無料であることが前提である。しかもはてなブログは有料プランもあるので無料を一番にアピールするのは違うのではないか？ 無料でどこまでできるのかも書いていない。WordPressは書いていたのに。
一番クソなのは「しっかり書ける」という所。なんだよ「しっかり」って。曖昧すぎて意味不明。何をアピールしたいんだよ。というか当たり前だろ。しっかり書けなかったら困るわ。それとも、どこかにしっかり書けないサービスがあって、暗にそれをディスっているのか？ たぶんそうじゃない。アピールポイントがないか、それを書けていないだけ。中身のない政治家と同じキーワードだよ。
しかも「日々の生活から感じたこと、考えたことを書き残しましょう」って、とんでもない退屈感がただよっている。「無料で、しっかり、日々を書き残せる」って、だれに向けて何をアピールしているの？ さっぱり伝わってこない。地雷臭しかない。
「しっかり」はシステムの堅牢さをウリにしている、ということだろうか？ 聞いたことがない。実感もない。ポリシーでは色々な人が自由に書ける場でありたいとか、多様性を受け入れるプラットフォーマーでありたい的なことを書いてあった気がするのだが。どうしてそういう良さやウケを狙わないの？ もったいない。でも「マジメか！」とか思われたくないのかもな。たとえば「はてなブログは無料です。できるだけ多様な思想を受け入れつつ皆が安心できる場をめざします。」とか言われても困るし、だれに何のアピールしてるのかわからん。
ちなみに競合他社はつぎのように「しっかり」アピールしている。
- アメブロでブログを書こう！ 16000人以上の芸能人・有名人ブログを読めるのはAmebaだけ。子育て・ファッション・ペット・旅行・マンガなどのカテゴリも展開。
- FC2ブログは、無料で簡単、カスタマイズ自由、あなたにぴったりの使い方が見つかるブログサービスです。写真投稿も安心の容量10GB。アフィリエイトの利用も可能です。
- ライブドアブログは簡単に開設できるブログサービスです。豊富なデザインが全て無料で利用でき、自由にドメインを設定できます。読者のLINEにブログを発信したり、いい ...
アメブロは芸能人ブログの多さをウリにしている。FC2ブログは自由度の高さと容量の多さを。ライブドアは簡単・無料・自由さを。とくにアメブロとF2Cの宣伝はうまいと思う。ちゃんと79字以内におさめているし、強みを絞って明記しているからわかりやすい。
所感
結論、動的サイトにすべき。Github PagesでHTTPSサーバを借用し、SSGを使って静的HTMLを作成する。そしてクローラで解析されなくても構わない部分をCSRで動的生成する。それが最も自由度が高く、かつサーバ負担が少ない方法だと思う。
WEBサイトはアプリ化しつつある。つまりほぼJS。ならば静的HTML部分になんのタグとテキストを書くかだけに集中したほうがいいのだろう。アプリの種類によってだいぶ変わりそう。<title>や<meta>を静的HTMLとして書くべきなのだろう。
