お手軽にWeb廃墟を作成するためのTips

どうもこんにちは、

某会津大学で意味不明なものを作成しているB3 [飛ばすはとバス](https://twitter.com/flying_hato_bus)と申します。

いつもはArduinoやESP series, Rasoberry piなどを利用して、頭の悪い工作をしています。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ELECTRICAL COMMUNICATION<br><br>引き裂かれてる IMAGINATION<br><br>誰にも 邪魔させない<br><br>Sparkしてる ROCK ACTION<br><br>打ち砕け MEDITATION<br><br>狂った現実(いま)を焼き捨てたい <a href="https://t.co/qriS4L4seB">pic.twitter.com/qriS4L4seB</a></p>&mdash; 飛ばすはとバス (@flying_hato_bus) <a href="https://twitter.com/flying_hato_bus/status/904251114886795265?ref_src=twsrc%5Etfw">2017年9月3日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

こんなものを作ったり

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">藁にもすがるような思いでアンキパンを印刷してる <a href="https://t.co/X67jABnPsk">pic.twitter.com/X67jABnPsk</a></p>&mdash; 飛ばすはとバス (@flying_hato_bus) <a href="https://twitter.com/flying_hato_bus/status/893022522743992320?ref_src=twsrc%5Etfw">2017年8月3日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

こんなものを作ったりしています。

今回は、懐かしいものを作成したので、ここに公開させていただきます。

# 懐かしのホームページを作成してみた

みなさんはgithub、使ってますか？

github、めちゃくちゃ便利ですよね。 ファイルをバックアップしたり、みんなで開発に使ったり、バージョン管理したり...

エンジニアの方であれば、アカウントを持ってない人はいないくらいだと思います。

githubには、github.ioというものがあります。

- 自分のgithubアカウントにおけるwebページ
- githubのプロジェクトにおけるwebページ

この２つを自由に公開できるものです。

githubというのは up to date なsomethingが群雄割拠している場所...

例えば ...

- いろいろな会社の方々が業務で新しいものを作るのに使用している
- フロントエンドエンジニアが新しいフレームワークを作成している
- OSSに国を超え年齢を超え開発に参加している

このように素晴らしいことが行われているのがgithubです。

その、言うなれば「ニューヨークの摩天楼に燦然と輝く超高層ビル」というところには、流石にこのような底辺大学生がかなうはずがありません。

そもそも、ホームページとは何でしょうか。

最新の技術を使い、自分の力を誇示するために作るのでしょうか？

それとも、他人に言われるがまま、自分が本当に作りたいものを抑圧され、他の人が満足するようにデザインを殺していくものでしょうか？

インターネットの原点であるホームページは、自分が好きなものを、自分が好きなように発信できるものです。

そこには余計なしがらみや外部からの抑圧は存在しなかったはずです。

インターネットの原点に帰るには、web1.0のHTMLで作られたホームページが最高なんじゃないでしょうか？

### 底辺大学生にお似合いの荒野
そのような大学生は都会にビルを持つことができません、せいぜいネバダの荒野でそこら辺に落ちている廃材を利用して、廃墟を作るくらいが関の山です。

というわけで、群雄割拠のgithubに突如として砂漠の廃屋が建ちました。

![haikyo.jpg](https://qiita-image-store.s3.amazonaws.com/0/183574/dff2271b-785a-eb6a-0312-77f786f0fbe5.jpeg)


## 廃材を集める
廃材の集め方はこちらを参考にさせていただきました。

[Web廃墟を作るときに心がけるべき7箇条 - Qiita](https://qiita.com/ssdkfk/items/4d62455a15feafc745c6)

#### 使ったもの
- [忍者ツールズ] (http://www.ninja.co.jp/)
- Ｓｏｒｒｙ，　Ｔｈｉｓ　ＨｏｍｅＰａｇｅ　Ｉｓ　Ｊａｐａｎｅｓｅ　Ｏｎｌｙ
- 工事中です。（頭を下げる工事の人のGIFを添えると尚可）
- CSSでレイアウトしない
- JSはコピペする

この５つほどを参考にさせていただきました。これだとまだまだって感じはしますが、これでも外見は立派な廃墟です。

「ナニコレ珍百景に出てた家が友達の家だった」というくらいの廃墟さ加減なので、すこし微妙です。

最初に貼っておきますと。[こちら](https://hatobus.github.io)になります

いい感じのダサさを演出できることができました。

それぞれのポイントを少し書いていきます。

## web廃墟におけるHTMLソース

### 文字コード
文字コードは `EUC-JP` 、これ以外には考えられません。UTF-8? Shift-JIS? いやいや、懐かしいサイトはUTF-8が採用されていましたか？

#### そんなはずはないです

当時あったものを、今になって使うんです。

廃墟を建てるのに、電動ドリルなんかいらないんです、なんならそのへんにある石ころで釘を打てばいいんです。

さぁ、早く`META`タグに `charset=EUC-JP`を書き込むんだ。

### 右クリックを禁止させる
自分が苦心して作ったHTMLファイル、他の人にパクられたくありませんよね？

そんなときは**右クリックを禁止**させましょう。

右クリックをしたらポップアップを出させて、相手をいらつかせることができたらなおグッドです。

```html
<body oncontextmenu="alert('右クリックはできませんよ！やめてください！');return false">
```

### 工事中です

HTML直打ちで書いていくということは、時間がかかります。きりがいいところまで進んだら、工事中の画像を出して更新を終えましょう。

フリー素材で、それっぽい絵を探してきます。

![kouzi.gif](https://qiita-image-store.s3.amazonaws.com/0/183574/70cfe594-36d4-580e-7ff0-a28bd67d831c.gif)

立派な工事中の画像を見つけられましたね。さっそく貼りましょう。

改行は入れてもいいですが、改行を忘れた体で。文字列のすぐ後に貼り付けるというのも趣があってよろしいでしょう。

### CSSでレイアウトしない　

鉄則です。きらびやかに飾り付けるのもいいですが、廃墟です、ボロボロのあばら家です。廃墟には廃墟なりの美学があります。

- CSSは使わない
- 色はすべて原色を使用する
- バックグラウンドの画像も自前で用意（クソダサい）
- 動きをつけたい？ -> marqueeタグで動かせ！

### CSSは使わない、色はすべて原色を使用する

CSSなんてご法度です。すべてHTMLの上だけで表現させます。

カラーピッカー？みんながわかる色を使いましょう。

```
color="red"
```
とか

```
color="blue'
```
これで十分なはずです。

### marqueeタグで文字を動かせ！

webで動きをつけるにはまず出てくるのが `JavaScript`

けど、文字を動かしたい時に使えるHTMLタグは存在します。

**marquee**タグです。

文字や画像を縦横無尽に動かすことのできるタグです。

[ここ](http://www.tohoho-web.com/html/marquee.htm)に詳細が載っています。

初心者が、文字や画像が動いたことに感動して、至るところにmarqueeタグを使うように画面中の文字や画像を動かしまくりましょう。

## JSはコピペする

**「俺はwebフロントマンだ、当時の技術だけを使ったって○○の実装はできる！」**

こう意気込む人もいるでしょう。

#### 甘いです

専門的な知識を有していない個人がそんなことできるでしょうか？

いや、できるわけがない。

というわけでJSはすべてコピペします。

コピペの仕方にも少し工夫を持たせてみるのもいいでしょう。

[動くJavaScript](http://oekakirenn.webcrow.jp/index.html)

このサイト様が一番しっくり来ました。

webダサイズムを継承しています。

私のページで使用しているJavascriptはすべてここから持ってきています。

[マウスストーカー](http://oekakirenn.webcrow.jp/mouse/mouse_e1.html)

これはハトの画像に入れ替えているだけです。

ちなみに、コピペをする際に

```html
<!--★コピーここから-->
....................
<!--★コピーここまで-->
```

のような部分までコピーをすると、とてもweb初心者が書いたようになるのでとてもいいです。

## 忍者ツールズ

webサイト上で一斉を風靡した[忍者ツールズ](http://www.ninja.co.jp)さんですが、未だにアクセス解析とアクセスカウンターは使うことができます。

私のサイトでは、アクセスカウンターだけを設置していて、サイトの一番下に設置されています。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/183574/314e43f3-05c2-458c-8aeb-a0360b8a93c5.png)

伝統を感じる手裏剣です。

ちなみに、注意が必要なのは、忍者ツールズさんのアクセスカウンターは https 対応版でないと動きませんでした。

これは余談なのですが、これを設置して、twitterに投稿したのが2018年4月19日の午前11時ごろでした。このときアクセスカウンターは40~50を指していたのですが。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">キリ番踏み逃げはやめてください！を実装した<a href="https://t.co/2GeNr1fDv9">https://t.co/2GeNr1fDv9</a> <a href="https://t.co/2jxpOTi2p9">pic.twitter.com/2jxpOTi2p9</a></p>&mdash; 飛ばすはとバス (@flying_hato_bus) <a href="https://twitter.com/flying_hato_bus/status/986784846063157248?ref_src=twsrc%5Etfw">2018年4月19日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

一時間と少しくらいで、こうなりました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/183574/04b26a54-a9b0-782e-8db5-96ac1b10d076.png)

はい、軽く引きました。

一時間ちょっとでアクセスカウンターは1000を超えました。

キリ番を踏んだ方はきちんと報告もしてくれまして。とても懐かしいインターネッツを体験できました。

# Web廃墟のすすめ

このようにweb廃墟を作るというのは、それなりにコンテンツにもなります。

自分でHTMLを書くのはしんどいですが、面白みもあります。

ぜひ私のホームページを訪問し、懐かしんでいただけたらなと思います。

キリ番を踏んだ方はtwitterにて報告待っていますので、よろしくお願いします。

リンクフリーです、バナーも近々作ろうと思っているので、よろしくお願いします。

この記事のいいねのキリ番報告もコメ欄でお待ちしております。

私のサイトはこちらです。みなさんの訪問待ってま〜す！！！

https://hatobus.github.io