エイプリルフールで大幅なリニューアルを遂げたKMCのウェブサイトでしたが、これを作るのにたくさんの知見が得られたので紹介します!!
ちなみにエイプリルフールのサイトは下のリンクで見ることができます。(音がなります)
http://www.kmc.gr.jp/2015April
知見
タグのネストは100個程度に抑える
divタグを256個囲うことによって、中央揃えを実現しようとしてこの制限を発見しました。
blinkタグはもう動作しない
marqueeは動作します。これからはCSSAnimationをつかいましょう。
marqueeを置き過ぎるとfirefoxで落ちる
chromeでは快適です。marqueeを眺めるならchromeがオススメ!
ブラウザ落ちたという報告もfirefoxばかりでした。
古いIE以外はmidiの再生にQuickTime等別途プラグインが必要
64bitのMacOS上のChromeでは、QuickTimeもなく対応プラグインがないので再生できません。
Gitのブランチ名はかなり自由にできる
"ハンカク"や"🍣"など可能です。残念ながら":sushi:"は無理でした。
nkfコマンドで半角カナを維持する方法
nkfコマンドは非常に便利なコマンドですが、utf8からeuc-jpに変換する段階でnkf -e
するとせっかく書いた半角カナが全角になってしまいます。それを防ぐためには -x
をつけるとよいです。
また、-Z4
で全角カナを半角カナに変換できるのですが、これは英字も半角にしてしまうので使いませんでした。
nkf -xeLw --overwrite * by hatsusato · Pull Request #118 · kmc-jp/2015AprilFool · GitHub
reactjsでeuc-jpでも文字化けを防ぐ
出力を実体参照にしてがんばります。
web拍手のボタンの文字化けを修正 by hatsusato · Pull Request #126 · kmc-jp/2015AprilFool · GitHub
技術
<!--美乳-->
これはブラウザにeuc-jpと認識させるためのおまじないです。どちらもSJISには存在しない文字コードを用いているため認識できるというもので、同じ例に<!--入口-->などがあります。
美乳コメント by nna774 · Pull Request #113 · kmc-jp/2015AprilFool · GitHub
虹色のページ
虹色のページは、jQueryですべての文字をspanで区切って、そこにランダムでcolor属性を追加して作られています。
🍣🍣イケメンにした🍣🍣 by nonylene · Pull Request #88 · kmc-jp/2015AprilFool · GitHub
ガラケー対応
実はあのページはガラケーの番号キーで簡単にリンク移動することができます!
ガラケー対応 by nna774 · Pull Request #80 · kmc-jp/2015AprilFool · GitHub
CSSアニメーションを使用している場所
- 背景
背景をいい感じに。かっこいい! by tyage · Pull Request #26 · kmc-jp/2015AprilFool · GitHub
背景をよくした by tyage · Pull Request #13 · kmc-jp/2015AprilFool · GitHub
- 画像の変化
ようこそに生命を by tyage · Pull Request #15 · kmc-jp/2015AprilFool · GitHub
(●`ε´●) (close #76) by tyage · Pull Request #77 · kmc-jp/2015AprilFool · GitHub
- blink
更新履歴 by tyage · Pull Request #16 · kmc-jp/2015AprilFool · GitHub
Links by nna774 · Pull Request #85 · kmc-jp/2015AprilFool · GitHub
reactjsを使用している場所
Webclap by tyage · Pull Request #9 · kmc-jp/2015AprilFool · GitHub
隠し機能
コナミコマンド
あのtwitterも実装していたコナミコマンドを、私たちも実装しました。コナミコマンドが発動するとマウスストーカーが点滅します。
コナミコマンドで点滅させる by pastak · Pull Request #37 · kmc-jp/2015AprilFool · GitHub
隠しページ
どこかに隠しページが潜んでいます。探してみてください!
ヒント: スクロール
ウェルカムログ
コンソールを開くと"Welcome to KMC" と表示されます。
右クリック禁止
もちろん右クリックは禁止です!!!!!!
この他にも、自己紹介のページやKMC度診断のページも文章にこだわって作っていました!
アクセス解析
最後に、googleアナリティクスで面白かったところです。埋め込んだのは昼だったのでカウンターと数値が異なります。
リピーターの多さ
なんと200回以上リピートしている人もいました。キリ番ゲッターの方々かもしれませんね!
ページ/セッションが3.68
framesetを使用しているおかげで異様に高い数値になりました。
FreeBSDからのアクセス
NetScapeからのアクセス
NetScapeで実際に確認している方はtwitterでもおられました!
以上です。エイプリルフール、たくさん閲覧していただきありがとうございました!