和田憲幸のブログ

ちょっと自画自賛していっすか。いっすか。これは中々よくできた支援スクリプトなんじゃないかなって自分でも思っています。ゼロから作ったわけではなくWeb制作を請け負った時にコツコツと歩みを進めていたものなんですが、ようやく多くの人に利用いただける段階に近づいたのではないかなと。

まずはこちらをご覧ください

通常表示
モバイル表示
プレーン表示

HTMLは美しい

私はHTMLの構造が美しくて好きなんです。しかしWeb業界でHTMLは軽視されがち。Webの本質たるHTMLが軽視され、画像やCSS・Javascriptが重要視されるというのが現状じゃないでしょうか。でも私はそんな現状が納得出来ないんです。だってそうでしょう。HTMLがあるからインターネットがあるのに。

私から言わせればCSSや画像、Javascriptなんて度が過ぎた厚化粧のようなもの。厚化粧によって本質たる素顔を覆い隠してしまっては何が何やらわからないではないか。Webの本質は着飾ることでも体面を気にする事でもなく、情報の本質に触れてもらう事だと私は思うの。だからこそ、その本質たるHTMLが好きなんです。

で、WebsiteToolKit.jsとは

IR.jsというスクリプトを公開しているのですが、基本的にはそれの延長線上にあるものです。レスポンシブWebを前提としてスマートフォンからのアクセス時はPlain＋CSSで、PCからのアクセス時はIRで見た目の互換性を保ちます。自分で書いてても「あ、これ伝わらねぇな」と思ってます。伝えるのスゴく難しい。

ようはレスポンシブWeb前提でRetina画面にも対応しつつ、マークアップやコーディングにかかる労力を削減しつつ、帯域削減をし高速レスポンスを実現しつつ、ユーザビリティを高めつつ、表示互換性を保つための支援スクリプトと言うことですね。

では各表示モードの解説を。

通常表示

PCまたはタブレットからアクセスすると通常表示になります（スマホでは見れません）。見出しのhタグは規則性のあるIDを指定することで「自動的に見出し画像へ置き換えられます」。見出し画像への置き換えはJavascriptで行なうためCSSを別途書く必要はありません。

モバイル表示

スマートフォンからアクセスした場合の表示ですね。上記リンクのようにクエリを付ける事でPCでもシミュレートすることができます。これ便利じゃね？モバイル表示の場合は前述の見出し画像置き換えなどは実行されず、帯域を使わないように設計されています。

プレーン表示

これはオマケですがCSS、JavascriptがOFFの時に見える状態をシミュレートしています。「プレーン表示でちゃんと見えなきゃHTMLとして失格だよね」という和田ポリシーを多くの人に理解してもらいたいなっていう発想から付けてみました。実際「検索エンジンからはこう見えてる」と捉える事もできます。

第三世代iPadで表示すると

Nexus7で表示すると

PS VITAで表示すると

と、まぁこんな感じでWebサイト制作をより効率的に、そしてHTMLソースをより美しくするための手段のひとつになればいいなって。過去何度も書いてますがHTMLタグにはタグひとつひとつに意味や役割があって、タグたちも本来の意味で使われる事を願ってると思うんです。

より多くの人がHTMLソースの意味や本質に目を向けてくれるといいなって思ってるんですよ。ちなみにまだ未完成なので公開はまだですが、近い将来公開できたらいいなって思ってます。しかし、ホントあたしってよくできた子ですよね。いやいや、よくやった俺。