このエントリーは tech.kayac.com Advent Calendar 2014 の7日目のエントリーです。
うーん。 Titanium の話がいいかなー。 konashi の話がいいかなー。それとも YouTubeAPI の話がいいかなー。
どうしたんですか？ @ki_230 さん。
あ。技術部の @hilotter くん。
実はアドベントカレンダーになにを書こうか悩んでるんだ。
なにを書けばいいのか全く思いつかないよ。
なるほど。
@ki_230 さん。 アドベントカレンダーだからって気取らなくていいんですよ。
ありのままでいいんです。
（ありの...まま...？）
ありのままの姿を見せればいいんですよ。
！
なるほど！わかったよ！
流行りに捕らわれることなく、ありのままを見せるよ！
（うんうん。 @ki_230 さん。 成長しましたね。）
そんな会話の果てに出来上がったのがこちら！
ありのまま！※ Google Chrome でお楽しみください。
そう。ありのまま！ボタンです。
ありのまま！ボタンとは
説明しよう。「ありのまま！ボタン」とはウェブページ上のスタイルを取り除き、ありのままのHTMLを見るためのボタンである。
一応ブックマークレットになっているので、ブックマークバーにドラック＆ドロップすることによって、あらゆるサイトのありのままのHTMLを確認することが可能となる画期的なボタンなのだ。
昨今CSS3の普及により、過剰なスタイルを施すウェブページが増えてきた。
しかし、その一方でSafariのリーダーボタン等、HTMLのみを評価する機能を搭載するブラウザもうまれてきており、CSSがOFFになった状態でも意味が成り立つことが再度重要になってきているのである。
そんなとき、「ありのまま！ボタン」をブックマークレットに登録しておけば、ブラウザの設定を変更することなく、CSSがOFFになった状態、すなわち、ありのままのHTMLを確認することができるのだ。
ありのままボタン動作原理
JavaScriptは1度評価されたあとにscriptタグを取り除いても効果が生き続けるのに対し、CSSはlinkタグ、styleタグを取り除くことによってスタイルを無効にすることができます。
そこで「ありのまま！ボタン」では、
- linkタグ読み込まれた外部スタイルの削除
- styleタグの削除
- style属性の上書き
の3つの手段によってスタイルを消し去る方針を取りました。
ソースコード
(function(win, doc) {
"use strict";
var stylesheet = doc.querySelectorAll("[rel='stylesheet']"),
styleTag = doc.querySelectorAll("style"),
styleAttr = doc.querySelectorAll("[style]"),
i, length;
// 外部スタイルシートの削除
for (i = 0, length = stylesheet.length; i < length; ++i) {
stylesheet[i].parentNode.removeChild(stylesheet[i]);
}
// スタイルタグの削除
for (i = 0, length = styleTag.length; i < length; ++i) {
styleTag[i].parentNode.removeChild(styleTag[i]);
}
// スタイル属性の上書き
for (i = 0, length = styleAttr.length; i < length; ++i) {
styleAttr[i].style.cssText = "";
}
})(this, document);
こんな感じですね。
いかがでしたでしょうか。
滑っているような気もしなくもないですが、不思議と少しも寒くありません。
明日は社内一危険な漢と噂の @m0t0k1ch1 くんがレジェンドばりのエントリーを書いてくれることでしょう。
ひきつづきウォッチしてみてください。ごきげんよう。
以上、HTMLファイ部 @ki_230 がお送りしました。
