どうもこんにちは、
某会津大学で意味不明なものを作成しているB3 飛ばすはとバスと申します。
いつもはArduinoやESP series, Rasoberry piなどを利用して、頭の悪い工作をしています。
ELECTRICAL COMMUNICATION
— 飛ばすはとバス (@flying_hato_bus) 2017年9月3日
引き裂かれてる IMAGINATION
誰にも 邪魔させない
Sparkしてる ROCK ACTION
打ち砕け MEDITATION
狂った現実(いま)を焼き捨てたい pic.twitter.com/qriS4L4seB
こんなものを作ったり
藁にもすがるような思いでアンキパンを印刷してる pic.twitter.com/X67jABnPsk
— 飛ばすはとバス (@flying_hato_bus) 2017年8月3日
こんなものを作ったりしています。
今回は、懐かしいものを作成したので、ここに公開させていただきます。
懐かしのホームページを作成してみた
みなさんはgithub、使ってますか？
github、めちゃくちゃ便利ですよね。 ファイルをバックアップしたり、みんなで開発に使ったり、バージョン管理したり...
エンジニアの方であれば、アカウントを持ってない人はいないくらいだと思います。
githubには、github.ioというものがあります。
- 自分のgithubアカウントにおけるwebページ
- githubのプロジェクトにおけるwebページ
この２つを自由に公開できるものです。
githubというのは up to date なsomethingが群雄割拠している場所...
例えば ...
- いろいろな会社の方々が業務で新しいものを作るのに使用している
- フロントエンドエンジニアが新しいフレームワークを作成している
- OSSに国を超え年齢を超え開発に参加している
このように素晴らしいことが行われているのがgithubです。
その、言うなれば「ニューヨークの摩天楼に燦然と輝く超高層ビル」というところには、流石にこのような底辺大学生がかなうはずがありません。
そもそも、ホームページとは何でしょうか。
最新の技術を使い、自分の力を誇示するために作るのでしょうか？
それとも、他人に言われるがまま、自分が本当に作りたいものを抑圧され、他の人が満足するようにデザインを殺していくものでしょうか？
インターネットの原点であるホームページは、自分が好きなものを、自分が好きなように発信できるものです。
そこには余計なしがらみや外部からの抑圧は存在しなかったはずです。
インターネットの原点に帰るには、web1.0のHTMLで作られたホームページが最高なんじゃないでしょうか？
底辺大学生にお似合いの荒野
そのような大学生は都会にビルを持つことができません、せいぜいネバダの荒野でそこら辺に落ちている廃材を利用して、廃墟を作るくらいが関の山です。
というわけで、群雄割拠のgithubに突如として砂漠の廃屋が建ちました。
廃材を集める
廃材の集め方はこちらを参考にさせていただきました。
使ったもの
- 忍者ツールズ
- Ｓｏｒｒｙ， Ｔｈｉｓ ＨｏｍｅＰａｇｅ Ｉｓ Ｊａｐａｎｅｓｅ Ｏｎｌｙ
- 工事中です。（頭を下げる工事の人のGIFを添えると尚可）
- CSSでレイアウトしない
- JSはコピペする
この５つほどを参考にさせていただきました。これだとまだまだって感じはしますが、これでも外見は立派な廃墟です。
「ナニコレ珍百景に出てた家が友達の家だった」というくらいの廃墟さ加減なので、すこし微妙です。
最初に貼っておきますと。こちらになります
いい感じのダサさを演出できることができました。
それぞれのポイントを少し書いていきます。
web廃墟におけるHTMLソース
文字コード
文字コードは EUC-JP 、これ以外には考えられません。UTF-8? Shift-JIS? いやいや、懐かしいサイトはUTF-8が採用されていましたか？
そんなはずはないです
当時あったものを、今になって使うんです。
廃墟を建てるのに、電動ドリルなんかいらないんです、なんならそのへんにある石ころで釘を打てばいいんです。
さぁ、早くMETAタグに charset=EUC-JPを書き込むんだ。
右クリックを禁止させる
自分が苦心して作ったHTMLファイル、他の人にパクられたくありませんよね？
そんなときは右クリックを禁止させましょう。
右クリックをしたらポップアップを出させて、相手をいらつかせることができたらなおグッドです。
<body oncontextmenu="alert('右クリックはできませんよ！やめてください！');return false">
工事中です
HTML直打ちで書いていくということは、時間がかかります。きりがいいところまで進んだら、工事中の画像を出して更新を終えましょう。
フリー素材で、それっぽい絵を探してきます。
立派な工事中の画像を見つけられましたね。さっそく貼りましょう。
改行は入れてもいいですが、改行を忘れた体で。文字列のすぐ後に貼り付けるというのも趣があってよろしいでしょう。
CSSでレイアウトしない
鉄則です。きらびやかに飾り付けるのもいいですが、廃墟です、ボロボロのあばら家です。廃墟には廃墟なりの美学があります。
- CSSは使わない
- 色はすべて原色を使用する
- バックグラウンドの画像も自前で用意（クソダサい）
- 動きをつけたい？ -> marqueeタグで動かせ！
CSSは使わない、色はすべて原色を使用する
CSSなんてご法度です。すべてHTMLの上だけで表現させます。
カラーピッカー？みんながわかる色を使いましょう。
color="red"
とか
color="blue'
これで十分なはずです。
marqueeタグで文字を動かせ！
webで動きをつけるにはまず出てくるのが JavaScript
けど、文字を動かしたい時に使えるHTMLタグは存在します。
marqueeタグです。
文字や画像を縦横無尽に動かすことのできるタグです。
ここに詳細が載っています。
初心者が、文字や画像が動いたことに感動して、至るところにmarqueeタグを使うように画面中の文字や画像を動かしまくりましょう。
JSはコピペする
「俺はwebフロントマンだ、当時の技術だけを使ったって○○の実装はできる！」
こう意気込む人もいるでしょう。
甘いです
専門的な知識を有していない個人がそんなことできるでしょうか？
いや、できるわけがない。
というわけでJSはすべてコピペします。
コピペの仕方にも少し工夫を持たせてみるのもいいでしょう。
このサイト様が一番しっくり来ました。
webダサイズムを継承しています。
私のページで使用しているJavascriptはすべてここから持ってきています。
これはハトの画像に入れ替えているだけです。
ちなみに、コピペをする際に
<!--★コピーここから-->
....................
<!--★コピーここまで-->
のような部分までコピーをすると、とてもweb初心者が書いたようになるのでとてもいいです。
忍者ツールズ
webサイト上で一斉を風靡した忍者ツールズさんですが、未だにアクセス解析とアクセスカウンターは使うことができます。
私のサイトでは、アクセスカウンターだけを設置していて、サイトの一番下に設置されています。
伝統を感じる手裏剣です。
ちなみに、注意が必要なのは、忍者ツールズさんのアクセスカウンターは https 対応版でないと動きませんでした。
これは余談なのですが、これを設置して、twitterに投稿したのが2018年4月19日の午前11時ごろでした。このときアクセスカウンターは40~50を指していたのですが。
キリ番踏み逃げはやめてください！を実装したhttps://t.co/2GeNr1fDv9 pic.twitter.com/2jxpOTi2p9
— 飛ばすはとバス (@flying_hato_bus) 2018年4月19日
一時間と少しくらいで、こうなりました。
はい、軽く引きました。
一時間ちょっとでアクセスカウンターは1000を超えました。
キリ番を踏んだ方はきちんと報告もしてくれまして。とても懐かしいインターネッツを体験できました。
Web廃墟のすすめ
このようにweb廃墟を作るというのは、それなりにコンテンツにもなります。
自分でHTMLを書くのはしんどいですが、面白みもあります。
ぜひ私のホームページを訪問し、懐かしんでいただけたらなと思います。
キリ番を踏んだ方はtwitterにて報告待っていますので、よろしくお願いします。
リンクフリーです、バナーも近々作ろうと思っているので、よろしくお願いします。
この記事のいいねのキリ番報告もコメ欄でお待ちしております。
私のサイトはこちらです。みなさんの訪問待ってま〜す！！！