ホームページ・ビルダーを使わないと笑いどころのフォントを大きくできなかったテキストサイト運営者が、22年後、突然、古びたマイナーCMSを用いて神サイト作成に挑んだ 前編

Markdownで書くと若者ぶれる感じがしていいね。

＞挨拶

ヨシ……

あ、これ違う人の枕だった。

私のような非エンジニア、非プログラマーの中高年ド素人が天下のQiitaに堂々とゴミを書いていいのか迷いましたが、後述のサイトを作る上で、

「**あなたは最近よくQiitaを見ていますね！　よかったらユーザーになりませんか？**」

みたいな情報ウインドウを何度死んだ目で閉じたかわからないというほどお世話になり、思い入れがあったので意を決して投稿することにしました。お目汚しになりますが、このページを運悪く見てしまったのもなにかの縁としばらくお付き合いいただけたらうれしいです。

自己紹介させていただきます。工藤と申します。1997年、雑誌[^1]の付録だったホームページ・ビルダー2.0体験版で『工藤圭のなかなか楽しいと思うページ(その後、テキスト王に改名[^2])』というサイトを作り、しばらくDTIのファイル公開スペース[^3]上(5MB)で運営を頑張っていました。
![mysite_top.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566071/f353966c-b209-38ae-2413-e193f90f4649.jpeg)
ただ、頑張っていたと申しましてもQiitaのユーザーのように保守性を高めるだとか、そういった正しく意識の高い方向には一切の興味もなければ知識もなく、あくまでも"文章を書くことだけに"であったのは、下記のHTMLをご覧いただければすぐにおわかりでしょう。

```

<h1 align="center"><strong><font size="+4"><samp><font color="#0000ff"><b>テキスト王</b></font></samp></font>
</strong></h1>
```
今見ると、h1→strong→font→samp(ってなに？)、そしてまたfontがきて最後にbと、まるで先発→中継ぎ→遠山→葛西、また遠山とつないで福原辺りで締めた昔の阪神の継投のようですが、当時の私はホームページ・ビルダー上で文字を書いたり消したりして不要なタグが残っても一切気づかず、普通に見えたらOKって感じでした[^4]。

テキスト王といってもQiitaのユーザーは「なにそれ？」ってなもんでしょうが、文章主体のコンテンツに、(筆者が思う)笑いどころでフォントを大きくするという特徴を併せ持っていた典型的なテキストサイト[^5]で、全盛期にはそれなりに支持を集めていたと思っています。
![zero.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566071/f469a666-3e72-8ced-eedc-d1fbddf442e2.jpeg)
しかしながら、ご多分に漏れず更新頻度が低下して急速に没落。しばらくは更新がないことに対する励ましや怒り、脅しのメールが届きましたが、やがてそれらもすっかりなくなり、今ではどれだけニッチな場でもテキスト王の話をする人は一人もいないと確信しているほど話題になりません。

時給850円のフリーターが築いた栄光はわずか数年で輝きを失い、それよりも遙かに長い"終わってしまった人の日々"を寂しく過ごしていた2019年のある日のこと。突然、**高校演劇**に関するサイトを作ろうと思い立ち、二つの目標を立てました。

一つ目は、**過去(高校演劇のことを調べ始めた当時)の自分にとっての神サイトを作る**こと。

高校演劇は高等学校の演劇部が行う公演全般を指し、「一般人でも興味があるなら見に来てもいいですよ」というスタンスです。
しかし、高校演劇を認識したばかりで「高校の演劇部ってなにやってんだろう？」と思っている人に対してのアプローチがなくて、知識が体系的にまとまっているサイトも存在しません。
![taikai.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566071/f469a5bf-33ee-2a71-a390-39b95c27dff8.jpeg)
高校野球であれば甲子園大会ならわりとすぐイメージできて、見に行く方法もすぐ検索できるし、野球のルールや球場の雰囲気などもテレビで試合を見ればわかりますが、高校演劇の大会と聞いてもイメージのしようがないんですよね。たとえば、高校演劇の大会で『ロミオとジュリエット』は(まず)やりません。でも、そんなことは知られていない(むしろやっていると思われていそうだ)し、検索してもどこにも書かれていない。

いつ頃、どんな内容の舞台が、どこで、どういう形で行われているのか。数年前の私は散々探したものの断片的にしか拾えず、不安を抱えたまま、"高校演劇の大会が行われるらしい"会場へ行きました。不安より興味の方が勝ったからですが、普通、そんなよくわからない状態で行く人はいないでしょう。現代のネットサービス、スクリプト、そして微力ながら私の文章を組み込んだサイトを作ることで、この状況をどうにかしたい。

あのときの私が見たら、「このサイト、知りたいこと全部書いてあるよ、まじ最高かよ！」と歓声を上げるようなものを作ってやろうと。

二つ目は、**半年以内に"高校演劇"という単一キーワードで検索されたとき、トップに表示させる**こと。

広告を貼る気はありません。お金ではなく、運営者としては既に終わっているとはいえ過去に隆盛を誇っていた人間が重い腰を上げて再びサイトを作るからには、ある程度の人に見てもらえないと二段目の底に落ちて死にたくなるかもしれず(比喩)、それは避けたいなとの思いからです。

Googleの検索結果トップに鎮座しているのは[全国高等学校演劇協議会のウェブサイト](http://koenkyo.org/)。高校演劇に興味のない人が見ればよくあるWordPressで作られたページですが、高い権威性を誇る学校および教職員運営のサイトからリンクを張られまくっており、SEO的には天空に浮かぶ要塞です。

二位、三位は"スモールワード界、不動の2トップ"、WikipediaとTwitter(#高校演劇)。ぽっと出の個人サイトがこの二つを押しのけるのも想像がつきません。

――果たしてどうなることか。

2019年3月、特に宣言する相手もいないので、私の挑戦は静かに始まりました。

## 海外サーバからの脱出
まず、サイト作成に先立ち、廃墟のテキスト王を放置させてもらっているレンタルサーバをやめ、新たなサーバを探すことにしました。

個人的な見解として、ずっと放置されていたサイトが突然運営者によって意図的に削除されるのは、サーバの契約更新時の支払いを不意にもったいなく感じたからだと思っています。私はテキスト王にそこそこ思い入れがあり、できれば消したくない。であれば月額100円未満のサーバがマスト。それぐらいの支払いならうっかりであってももったいと思うことはないはず。その条件に合う海外サーバを必死に探して長らく利用していたのですが、このサーバ、過疎化した放置サイトを置くには最適でも一から作成するのにはまったく適していないのです。
![server.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566071/6bfc2531-488d-51f3-0409-22c8db36d454.jpeg)
月額料金は2018年の時点で約70円。海外サーバの場合、月1ドルを切るような低価格プランは必ず「三年以上の長期契約の場合」とか「データベースは一個だけ」などの制約がつきますが、ここは一カ月の契約でもお値段変わらずでデータベースの作成数は無制限(PostgreSQLも対象なのがまた珍しい)と、おそらく世界最高クラスのコストパフォーマンスを誇ります。

ただ、それはあくまでも"表面上のスペックからいったら"の話で、一つ、致命的な問題がありました。
### 放置サイトの墓場
DDos攻撃だと判断する基準が低すぎるのか、はたまたリソースの利用に対する制限が厳しすぎるのか、CMS上の記事やテンプレートを続けて何度か編集しようとするだけでアカウントを凍結されてしまうのです。具体的にいうと、一分間に三回以上の更新、これを二度続けるとほぼアウトで要復活手続き。初めて見るCSSのプロパティの値をちょこちょこいじってデザインを修正するなんてほぼ不可能です。

あまりにも弱いものを示すジャーゴンに「スペランカー」があります。主人公がちょっとした段差から落ちただけですぐ死ぬ同名のゲームからきていますが、ちょっと触っただけで死ぬという点では、このサーバもスペランカーみたいだといえるでしょう。ですが、私からすると、弱いというより放置サイトの墓場としての役割をまっとうしているように思えます。死者がよみがえってゾンビ化したらろくなことないですから。
## WordPressは今更過ぎる、からの
レンサバを探しつつ、さて、どんなシステムでサイトを作ろうか。最初に思い浮かんだのはWordPressです。しかし、ありふれていてどうも面白くない。ファミコンではなくセガ・マークIII、ファミマガ[^6]ではなくBeep[^7]、AKB48ではなくアイドリング!!!という選択をしてきたタイプなので、ちょっと違うものがいいなあと考えていたところ、はてなブックマークで"静的サイトジェネレーター"の存在を知りました。

すぐ、「これ、いいじゃん」と思ったものの、種類が多すぎて選ぶのが大変そうで、稼働させられるまで時間がかかるだろうなと断念。この時点で、質問と回答を私自身が行うFAQサイトにしようというイメージができあがっていて、すぐにでも執筆に取りかかりたかったのです。
###枯れている相棒
その後、やっぱりデータベースを使うCMSがいい。Q&Aサイト用のシステムならありそうだから、それをベースにすれば見栄え的にいいんじゃないかということで直感で選んだのがこれ。
![q2a.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566071/3fbd1d90-3cfc-2d18-00d7-518e1106121e.jpeg)
**[Question2Answer](https://www.question2answer.org/)**。

Qiitaにも記事があります。

- [【３度目の正直】 Stack Overflowのクローン、 Question2Answer を CentOSにインストール](https://qiita.com/ironsand/items/333ea0206e4328ed34c4)
- [MacにQuestion2Answerをインストールしてみた](https://qiita.com/kamatash/items/8fe525de06a8bf4600f4)

**2本だけですが**。

改めて調べてみると日本では2010年から2011年にかけて記事になっていたCMSのようで、正直、世界的に見ても完全に枯れてます。デフォルトのデザインからして2019年って感じじゃない。少なくとも国内においては誰からも見向きもされていないところは今の私と重なります。その辺で波長は合いそうですからなんだかんだで一緒にいいサイトを築けるかも？

こうして、22年前、ホームページ・ビルダーを使わないと笑いどころのフォントを大きくできなかった私は、FAQの執筆と平行して、ネット全体を見ても日本語の情報がほとんどないジジィCMSをバディとし、新しいサイトを作っていくことになりました。
## 18年前のサイト運営トラブル、そしてHello world
さて、ここまで読み進めてモヤモヤ感を抑えきれなくなってきた人も出始めているかもしれません。

:man_tone3:
「サーバの話辺りから、ちょいちょい、俺は多少はわかってるみたいなワード出してるけど、**ホームページ・ビルダーがないとサイトの更新ができないと違うんか？**」

はい、そうでした。でも、今は違います。22年前の知識のまま、現代のCMSに取り組んだわけではありません。HTMLもCSSも少しはわかります。

:man_tone3:
「そうか。ハイ、解散」

となる前に、せめてこの章の最後まで読んでみてください。なぜ、あんなひどいHTMLに一切気づかなかったような人間がその辺の知識を身につけるに至ったのかだけでもどうかひとつ。
### 炎上
確か2002年のことです。**テキスト王が地味に炎上しました**。個人ニュースサイトが爆発的に増えた時期で、テキストサイト界隈のご意見番として、みたいなキモい体で、

```
○月○日
何時間もかけて書かれた記事にリンクを張り、一行ほど言及し、
俺らよりずっと多くのアクセスを稼いでいるのを見ると空しい
```
と、ニュースサイトへの不満を日記に書いたためです。当然、ニュースサイトが反応し、最終的に当時絶大な支持を集めていた『俺ニュース[^8]』が話題を取り上げて、一気に拡散しました。

ニュースサイトというと、今の人は『痛いニュース』などのまとめサイトを思い浮かべるかもしれません。でも、当時の個人ニュースサイトは運営者の公開ブックマークでした。

```
・テキスト王 ○月○日の日記
　うーん。空しいのかあ。
```
こんな感じの一言感想がずらっと並ぶわけです。

今振り返ると、私の不満はアクセス数至上主義に毒された人の典型思考であり、

「やっていることが違うわけで、アクセス数を基準にして比べるのがおかしいよ。世界陸上に出ている日本選手が、『**俺らは大変なトレーニングを積んでいるのに司会の織田さんほど注目されず、納得できない**』って真顔で批判するようなもんでしょ」

って感じなんですが、まあ、若くて承認欲求が強かったから「俺よりあいつらの方が注目されて悔しい！」と単純に思って書いちゃったんでしょう。
###2000年頃のネット炎上
昔の炎上がどんな感じだったか知りたい人もいるかもしれないので、2000年前後の炎上を簡単に解説しておきます。
最初は掲示板荒らし[^9]と連動していたと思うんですよね。サイト運営者がまずいことを書くと、掲示板やゲストブックに同じ文章(あああああとかの羅列)やグロ画像が短時間で連続投稿される。掲示板がteacup.[^10]だとすべての文字の大きさを最大にされた挙げ句、点滅させられる。2ちゃんねるができると、特定の場で"当事者の評判だけ"をみんなで燃やして楽しむという、ある種、秘密集会的なものになった。発火から鎮火まで、自分の発言が批判にさらされていることに一切気づかなかった人も結構いたはずです。個人が気軽に導入できるアクセス解析ツールって、多分そんなになかったし。
![net_enjou_business.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566071/0ea9ef71-53e6-4b42-dcb3-d8a08606ba5a.jpeg)
ただ、大抵は『ときめきメモリアル』の早乙女くん[^11]的な伝令役がいて、炎上当事者のサイトに設置されている掲示板やゲストブックに、

```
某所で話題になっているので来てみました。
```
と書き込んでいったり、「某所で噂になってますよ」とメールを送ってくるので、どうもなにかよからぬことに巻き込まれているらしいと気づきます。しかし、"某所"がどこなのか、"噂"ってなんなのか、まったくわからないので手出しも弁解もできず、膨れ上がっていく不安とともに時間だけが経過していく……。

私の場合はどうだったかというと、やはりしばらくは炎上していることに気づきませんでした。むしろ、受け入れられたと思ったぐらいです。テキストサイト関連で揉め事が起きたら必ず動きがある2ちゃんねるの『テキストサイトはここで語れ[^12]』ではスルーだったし、私の"不満日記"を取り上げた個人ニュースサイトでは、

-  言及の仕方には気をつけよう
-  言及先にはリスペクトが必要ですね

なんて一言感想が書かれていて、むしろ理解を示してくれていましたから。

しかし、俺ニュースがあるサイトにリンクを張ったことで、あの日記が批判の対象になっていることを認識しました。
### 「おまえがWebのルールを決めるな！」と激怒する人々
そのサイトの運営者は、私が書いた、

```
何時間もかけて書かれた記事にリンクを張り、一行ほど言及し、
俺らよりずっと多くのアクセスを稼いでいるのを見ると空しい
```

を、

```
(勝手に)記事にリンクを張り、俺らよりずっと多くのアクセスを稼いでいるのを見ると空しい
```

と読み取ったらしく、

**おまえがWebのルール(記事にリンクを張るな)を決めてんじゃねえ！**

と激怒していました。
「いや、『記事にリンクを張り』の部分はどうでもいいんだけど」と思いつつ、彼のサイトにあったリンク集を辿っていくと、リンク先でも示し合わせたかのように、

**Webのルールを勝手に決めるな！**
**決めていいのはティム・バーナーズ＝リーだけだ！**

と怒っている。私がしばらく炎上に気づかなかったのも無理はありません。リンクでつながった特定のコミュニティ内だけで強烈に燃えていたのです。こちらの掲示板に乗り込まれて攻撃される恐れはまったくなさそうでしたが、誤解されたままだと嫌なので彼らの中から話ができそうな人を探し、記事の真意を説明するメールを送りました。
### あなたの卑怯な振る舞いが許せない
返事はすぐにきて、「リンクの件はよくわかりました」の一文にほっとしたのもつかの間、

:bust_in_silhouette:

```
しかし、私はそのことに怒っているのではありません。あなたの卑怯な振る舞いが許せないのです。
```
と続いたことで、話がこじれる予感がしました。

:man_tone1:

```
卑怯な振る舞いとはなんのことですか？
```
:bust_in_silhouette:

```
あなたは批判を避けるため、日記の日付を改ざんしましたよね。
```

しばらく、改ざんがなにを指しているのかわかりませんでしたが、やがて、

**あ……。**

と気づきました。
![essay.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566071/dd8045fa-a4e1-b47d-9248-4e4ea07214ec.jpeg)
上のキャプチャは2003年時のテキスト王です。相変わらずホームページ・ビルダー(2.0体験版→6.5製品版)で作成していました。フレーム右に表示されているのが日記ですが、ちょっと変な書き方をしていたんです。

1.まず、ホームページ・ビルダーのビジュアルエディタ[^13]を使い、直近の日記を日付から全文コピーし、それを一番上にペーストします。
![n1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566071/0906b8e4-5499-a665-658c-376a0544ba45.jpeg)
2.同じ日付、同じ内容の日記が縦に二つ並びます。
![n2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566071/759a0fbf-e24d-274b-4194-009e30cdfffd.jpeg)
3.ペースト分の日付を書き換え、本文を削除し、新たな日記を書き入れてアップします。
![n3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566071/17f20cbc-90a8-6107-dc04-d989459dd991.jpeg)
なぜ、こんなまどろっこしいことをしていたかというと、日記をtableタグで囲ってセンタリングしており、センタリングされている部分とされていない部分の境目がビジュアルエディタではよくわからなかったためです。
![n4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566071/21a3810e-5262-6efd-6ceb-93f497618171.jpeg)
ビジュアルエディタで普通に書くとtableタグの上にカーソルがきていたせいで文字がセンタリングされず、「あ゛ーーーー」となることがあり、それが嫌だったんですよね。

日記の日付が変わったのは、ペースト分の日付を書き換えるのを忘れて新しい日記を書き入れ、アップしてしまい、その後、同じ日付の日記が二つあることに気づいて修正したのが原因でした。彼はこの修正を「テキスト王にある○月○日の日記はおかしい」との批判を受け、それを交わすために私が行ったと思い、憤慨していたのです。

上記を説明すると、彼からシンプルな質問が届きました。

:bust_in_silhouette:

```
Blogを使わないのはなぜですか？
```

Movable TypeやtDiaryが公開されて間もない頃でしたから、私は以下の返答が可能だったと思います。

:man_tone1:

1. DTIのファイル公開スペースでは自作のCGIが使えないから
2. Blogってなに？
3. ホームページ・ビルダー丸出しのデザインを見てなぜ使える知識があると思った？
4. 初対面の人と待ち合わせして、その人が歩いてきたら、「車で来なかったのはなぜですか？」って聞くの？

穏便に1を選択すると、後の私の人生をある意味変えた"お願い"が送られてきたのです。
### 男子、三日会わざれば
:bust_in_silhouette:

```
私はエンジニアなんですが、こちらが意図した製品の使い方を完全に無視し、おかしな扱いをして
壊したり、クレームをつけてきたりするユーザーがいて本当に困っています。

あなたとメールのやりとりをしていて、こうしたユーザーとあなたがすごく似ていると思いました。
Blogという便利なシステムがあるのにそれを使わず、あえて使いづらいソフトウェアを利用してミ
スを犯している辺りがです。

それでお願いなんですが、ユーザーを理解するの役立つかもしれないのであなたの思考プロセスを
くわしく教えてもらえませんか？
```

:man_tone1:
「」

彼には彼の理があり、私には私の理がある。それがかみ合わなかった。上記のやりとりでわかるのはただそれだけ。

一応、「ネットを介した異文化コミュニケーションの知見をこのやりとりで得られたのに、一方的にお世話になったという理由でQiitaにこんなゴミを調子に乗って書いている自分を客観視したら震えてきた」心情も添えておきつつ、感慨深いなと思うのは、かみ合わないやりとりが私の感情を大きく動かし、時間の使い方を変える原動力となったことです。
ホームページ・ビルダーの利用をやめ、CGIが使えるサーバと契約し、独学でHTMLを標準化していきCSSを導入、nicky!から始まり、Movable Type、WordPress、tDiary、Wiki、XOOPSといったスクリプトに触れ、見よう見まねでそれらのコードをカスタマイズし、サーバを立てようとしたりVPSを使い始めたり……。

いろいろ手を出したけど、結局、まあまあわかるようになったといえるのは今でもHTMLとCSSだけで、PHPは外国人観光客の日本語程度。あとはさっぱり。だけど、彼との邂逅により私の表現世界が信じられないほど広がった。面白いですね。二度とやりとりしないであろう相手との出会いで、こんなことになるなんて。

自分にとって"最高の人"と出会わなければ、出会えなければ、人生が劇的に変わることはない、いやいや、そんな単純ではないのかもしれません。
## 幕が上がる
2019年3月某日、Question2Answer(以下、Q2A)をダウンロード、サーバにインストールしました。最後にサイトを作ったのは2010年ですから、およそ9年ぶりのサイト作成スタートです。
この時点でまだ新たな海外サーバを見つけるか、国内サーバに戻るか決めかねていたので、放置サイトの墓場だなんだと散々ディスっておいてあれですが、今まで利用していたサーバにしばらくの間、もうひと頑張りしてもらうことにしました。

ChromeでQ2Aの管理画面にログインし、あれこれ設定しようとするとXSS関連の警告をされるのでまずは.htaccessに下記を入れておきます。

```
<ifModule mod_headers.c>
Header always set X-XSS-Protection "0"
</ifModule>
```

そして、サイト名やらなんやらどんどん決めていく。私が実際に気づいたのはもう少し後でしたが、ユーザー登録画面でreCAPTCHA(v2)を使えるアドオンが最初から入っています。デフォルトのアドオン(機能)はほかに、

- キャッシュシステム
- メールフォーム
- タグクラウド生成
- 関連質問リンク生成
- サイトマップ生成

などがあり、キャッシュディレクトリの設定をサーバに合わせ、使えそうものをオンに。

```php:qa-config.php
define('QA_CACHE_DIRECTORY', '/path/to/qa_cache/');
```
マイナーCMSだけど日本語の言語ファイルが存在するので、管理画面で戸惑わずに済んだのは助かりました。

リアルではこのタイミングではありませんでしたが、回答の文字数上限設定。デフォルトだと12000byteしか確保されておらず、UTF-8で換算すると全角4000文字。Q&Aサイトなら十分かもしれませんが運営者の暑苦しい魂がほとばしるFAQサイトだと心許なく、実際、足りない場面がありました。```qa-include/db/maxima.php```にある数値を12000から20000に変更して対処します。

```php:maxima.php
'QA_DB_MAX_CONTENT_LENGTH' => 20000,
```

私の場合、これでも足りなかったのでデータベースに手を入れてVARCHARをMEDIUMTEXTに。

URLの形式も決められますが、質問のタイトルを含めない方がいいでしょうね。日本語だとめちゃくちゃ長くなってしまいますから。

さて、高校演劇のサイトですから女子高生がアクセスしてくるかもしれません。となると、デフォルトデザインはどうもひっかかる。**おっさんから見て、晩秋の中高年っぽい配色が**。
![q2a.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566071/3fbd1d90-3cfc-2d18-00d7-518e1106121e.jpeg)
幸い、涼しげな青を基調としたテンプレート([Donut Theme](https://github.com/amiyasahu/Donut))がすぐに見つかったのでこれを適用し、次に不要部分の削除に取りかかりました。
![q2a2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566071/833e5323-0951-38e6-b728-a5af9437802c.jpeg)
上は質問と回答ページのキャプチャですが、赤で囲ったところが不要だなと思った部分です。私が一人で質問と回答を書くFAQサイトなので、ログインとログアウトのリンク、回答数が多い質問へのリンク、回答者のプロフィールなどはいりません。投票ボタンは残してもいいですが、どうせずっと0です。個人的な実感として、閲覧者参加型の機能はUU数が一日辺り最低4桁近くないとまともに使われません。
回答ボタンについては私が押せなくなるのは困るので[Q2Aの関数](https://docs.question2answer.org/code/functions/)を使ってログインユーザー以上に表示とし(管理者/ログインユーザー/ゲスト の区分けで表示コントロールが可能)、ほかはテンプレートファイルの編集を行って消しました。
### アドオンも終わっていた
続いてアドオンのインストール。質については判断できませんが、使えそうなものの数はWordPressのそれと比較すると惨憺たる有様です。しかも、軒並み4、5年前を最後にメンテナンスされていない……。この一点で駄目と判断する人はたくさんいるでしょうけど、「**わかるよ！　俺の連載小説も全部エタってる[^14]から！　むしろ余計に親近感が湧いてきた！**」と構わず進みます。

入れたのは以下のアドオン。

1. [Breadcrumbs](https://github.com/amiyasahu/q2a-breadcrumbs)(パンくず)
2. [simple-social-sharing](https://www.question2answer.org/qa/31585/plugin-simple-sharing-lightweight-javascript-iframes-updated)(OGP)
3. [SEO Links](https://github.com/q2a-projects/Q2A-SEO-Links)
4. [Next Previous Question](http://q2amarket.com/plugins/next-previous-question-link/)(前後の質問へのリンク表示)
5. [Embed](https://github.com/gurjyot/q2a-embed)

先述したように必須といえるアドオン(reCAPTCHAとか)は最初からQ2Aに含まれていて、上記の中には一つもありません。検索結果第一位を目指すんだから、SEOに効果がありそうなのはとりあえず入れておくかという感じ。
3のアドオンは、回答内でリンクを張ると、自サイトのURLも含めて必ず"nofollow"が付与される仕様を回避するもの。Q2Aには関連質問を表示できるウイジェットがデフォルトであって、ここのリンクには"nofollow"はつかないんですが、回答内で「こっちの回答も参考にしてね」とリンクを張ると"nofollow"がついてしまうんです。

5は回答にYouTubeの動画を貼るためのもの。タグがエスケープされてしまうので、YouTubeから提供される共有コードをそのままペーストできず、アドオンを使います。演劇部の動画を始め、回答で使えるものが結構あるんじゃないかなと思って入れました。
"回答にHTMLを直接書けない問題"は後々、大きな壁となって立ち塞がるわけですが、この辺の話は後編で。一応、```q2a-embed/qa-embed-layer.php```に以下のコードを加えて、アニメの公式動画が多く、なんかの形で引用できるかもとニコ動も貼れるようにしました(~~けど、決して露骨なガイドライン対策ではありません~~)。

```php:qa-embed-layer.php
'niconico'=>array(
 array(
  'https{0,1}:\/\/w{0,3}\.nicovideo\.jp\/watch\/([A-Za-z0-9_-]+)[^< ]*',
  '<div class="videoWrapper"><script defer src="https://embed.nicovideo.jp/watch/$1/script?w=640&h=360"></script></div>'
	),
 ),
```

### クラス名はどこ？
次にダミーの質問と回答を流し込んで見た目のバランスをチェックし、場合によっては修正することにしました。外国製のCMSはアルファベットで文章が表示されることを前提にしていて、日本語だとバランスがおかしくなることが多いのです。
どうも文字の大きさが小さすぎるということで、CSSを確認してみます。

馴染みのないスクリプトのHTMLに手を入れる場合、どのファイルに基本のテンプレートが記されているのかわからないため、[Devas](http://gimite.net/pukiwiki/?Devas)[^15]という全文検索(置換)ソフトを使います。どれだけファイル数が多くても簡単に絞り込めるので楽です。
![devas.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566071/f92eba0e-f490-8605-71c0-b0c24e2084fb.jpeg)
ブラウザでソースを見てこのdivかなと見当をつけ、Q2Aの全ファイルを対象にしてDevasにクラス名を入力し、検索ボタンをぽちっと押すと……。

**ない。**

……あれ？
老眼だからよく見えないんじゃなくて、"ない"。
クラス名がついているのに、それがcssファイルにないってどういうこと？　じゃあ、どこでどうやってデザイン指定してんの？　っていうか、俺が今見ているこのクラス名はどうやって出力されてんの？

全ファイルを検索対象にしているわけですから、必ず一つは引っかかるはず。どのファイルにも存在しないクラス名が表示されている？　頭の中に大量のクエスチョンマークを浮かべつつ、データベースだけにテンプレートが書き込まれていて管理画面から編集をする、なんてことなのかなあと思ってログインしてみましたが、新規にcssを書けるエリアはあったものの、既存のテンプレートを編集できるようにはなっていません。もう理解不能です。

苦難の道はここからでした。

『神サイト作成』と『半年以内に単一キーワードでの検索結果第一位』。

分不相応な目標を掲げた10年前の知識しかない時代に取り残された素人による、悪戦苦闘劇の幕が上がったのです。

【ガイドライン違反で削除、もしくは限定公開にされなかったら後編に続く】
##あとがき
```
これ、会話文に使ってすみません。目を瞑っていただけたらありがたいです……。
```
- Qiitaとユーザーの皆さんに許容してもらえるのかわかりませんが、自分なりに真摯な気持ちで書きました。
- ガイドラインを何度か読みましたが、本文が違反の対象なのか自分では判断がつきませんでした。「技術的な内容が主目的かどうか」、そういう話を書いていくつもりですが、前編はそれ以外の話が多すぎると指摘されたら「そうですね」となってしまう……。違反になったらそのときはそのときで考えます。
- メールのやりとりは18年前の記憶を元に「こんな感じだったかなあ」と一部を再現したものです。
- 文中、二つの時間が流れており(2019年と2020年)、視点によって何年前の話と振り返るときの起点が違います。

##後編予告
- 二人羽織
- 俺はトレンドを知っている
- 理解への突破口、開く
- 22年前に辿った道
- YouTube APIを巡る咆哮
- アクセスしてるの誰？
- 古い常識と新しい非常識
- 目隠しをされている子どもたち
- 神サイト

後編はもう少し「技術的な内容が主目的」です。
[^1]: 編集部のおすすめみたいな形でウェブサイトの内容をキャプチャ付きで紹介するなにかだったと思う。当時はこうした形式の本がたくさん出版されており、本に記載されているURLをキーボードから入力して人気サイトを閲覧していた。
[^2]: アクセス向上100の方法の書籍版(著・橋本大也)に「タイトルは自信ありげなものがよい」といったことが書かれていたため。
[^3]: プロバイダ提供による公開スペースは今でも大抵そうだが、CGIが使えなかった。 
[^4]: 当時、私のような考え方をする人は多く、それに対する反発からかHTMLの構文チェックを行うAnother HTML-lintを利用し、「このサイトはlintでマイナス1038点です。どうしようもないですね」みたいな感じで、内容ではなくあくまでもHTMLでサイトの優劣を判断していた人も結構いた。
[^5]: 当時はフォントいじり系という呼び方もあった。
[^6]: ファミリーコンピュータMagazine。いや、こちらも好きで買っていたんですけど。
[^7]: ファミコンやスーファミをメインに取り上げるゲーム雑誌ばかりだった頃、なぜかセガのハードとソフトを前面に押し出していた雑誌。
[^8]: てくるという方が運営していたサイト。書き文字風のロゴなどセンスが図抜けていた印象。閉鎖するサイトと最後の挨拶文をずいぶんと見てきたが、彼が書き残した『貴方が心動かされた事を貴方の言葉で記し　貴方の手で次の世代に残しなさい　遥かなネットワークの地平に次の百年を夢見て』っていうのは一番かっこいいと思ったかも。
[^9]: 当時は個々の記事にコメントをつけられる仕組みはほぼなく、サイトごとに一つの掲示板(ゲストブック)という形だったため、掲示板を連続投稿で埋め尽くすことによって機能不全にし、運営者と読者のコミュニケーションを完全に絶つことができた(もちろんメールのやりとりはできるが)。
[^10]: 1990年代後半から2000年代前半にかけて、おそらくシェアナンバーワンだったレンタル掲示板サービス。初期バージョンは脆弱性があったらしく、なにかにつけて文字巨大化+点滅させられていた。
[^11]: どうでもいい女の子と浅く、本命とは深く付き合わなければならないときメモににおいて、浅くの方を失敗すると「○○さんがおまえに傷つけられたらしいという噂が学校で流れている」みたいな情報を電話で教えてくれるキャラ。
[^12]: テキスレという略称で呼ばれていた。こことあそこの運営者が揉めているとか、なんかそんな話が多かった気がする。
[^13]: ホームページ・ビルダーにはHTMLがレンダリングされた状態で編集できるビジュアルエディタと、HTMLを直接編集できるエディタがある(今も？)。
[^14]: 完結できずに放置の意。
[^15]: Windows専用。