KMC活動ブログ

京大マイコンクラブの活動の様子を紹介します!!

エイプリルフールで用いた知見・技術・隠し機能を発表します!!!!!!

エイプリルフールで大幅なリニューアルを遂げたKMCのウェブサイトでしたが、これを作るのにたくさんの知見が得られたので紹介します!!

f:id:kmc-log:20150406235518p:plain

ちなみにエイプリルフールのサイトは下のリンクで見ることができます。(音がなります)

http://www.kmc.gr.jp/2015April

GitHubリポジトリはこちらです!

github.com

知見

タグのネストは100個程度に抑える

divタグを256個囲うことによって、中央揃えを実現しようとしてこの制限を発見しました。

hitkey.nekokan.dyndns.info

blinkタグはもう動作しない

marqueeは動作します。これからはCSSAnimationをつかいましょう。

marqueeを置き過ぎるとfirefoxで落ちる

chromeでは快適です。marqueeを眺めるならchromeがオススメ!

ブラウザ落ちたという報告もfirefoxばかりでした。

古いIE以外はmidiの再生にQuickTime等別途プラグインが必要

64bitのMacOS上のChromeでは、QuickTimeもなく対応プラグインがないので再生できません。

support.google.com

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には存在しない文字コードを用いているため認識できるというもので、同じ例に<!--入口-->などがあります。

www.dixe.net

美乳コメント by nna774 · Pull Request #113 · kmc-jp/2015AprilFool · GitHub

虹色のページ

虹色のページは、jQueryですべての文字をspanで区切って、そこにランダムでcolor属性を追加して作られています。

🍣🍣イケメンにした🍣🍣 by nonylene · Pull Request #88 · kmc-jp/2015AprilFool · GitHub

gyazo.com

ガラケー対応

実はあのページはガラケーの番号キーで簡単にリンク移動することができます!

ガラケー対応 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

gyazo.com

  • 画像の変化

ようこそに生命を by tyage · Pull Request #15 · kmc-jp/2015AprilFool · GitHub

gyazo.com

(●`ε´●) (close #76) by tyage · Pull Request #77 · kmc-jp/2015AprilFool · GitHub

gyazo.com

  • blink

更新履歴 by tyage · Pull Request #16 · kmc-jp/2015AprilFool · GitHub

Links by nna774 · Pull Request #85 · kmc-jp/2015AprilFool · GitHub

gyazo.com

reactjsを使用している場所

Webclap by tyage · Pull Request #9 · kmc-jp/2015AprilFool · GitHub

gyazo.com

隠し機能

コナミコマンド

あのtwitterも実装していたコナミコマンドを、私たちも実装しました。コナミコマンドが発動するとマウスストーカーが点滅します。

コナミコマンドで点滅させる by pastak · Pull Request #37 · kmc-jp/2015AprilFool · GitHub

gyazo.com

隠しページ

どこかに隠しページが潜んでいます。探してみてください!

ヒント: スクロール

ウェルカムログ

コンソールを開くと"Welcome to KMC" と表示されます。

gyazo.com

右クリック禁止

もちろん右クリックは禁止です!!!!!!

gyazo.com

この他にも、自己紹介のページやKMC度診断のページも文章にこだわって作っていました!

アクセス解析

最後に、googleアナリティクスで面白かったところです。埋め込んだのは昼だったのでカウンターと数値が異なります。

リピーターの多さ

なんと200回以上リピートしている人もいました。キリ番ゲッターの方々かもしれませんね!

gyazo.com

ページ/セッションが3.68

framesetを使用しているおかげで異様に高い数値になりました。

gyazo.com

FreeBSDからのアクセス

gyazo.com

NetScapeからのアクセス

NetScapeで実際に確認している方はtwitterでもおられました!

gyazo.com

以上です。エイプリルフール、たくさん閲覧していただきありがとうございました!