札幌Web制作のシンクグラフィカ

WebsiteToolKit.jsの概要

『WebsiteToolKit.js』は効率的にスマートフォンに対応したレスポンシブWebデザインのサイトを作成するためのJavascriptフレームワークです。厳密なレスポンシブWebデザインではなく、ユーザエージェントによる判定を行っていますが、それゆえにシンプルなコーディングでスマートフォン対応を実現。 また、スマートフォンでの表示時は帯域負荷を軽減し、高速表示を実現するためのギミックが数多く盛り込まれています。表示領域が限られているスマートフォンデバイスでの閲覧にフォーカスした「モバイルファースト」な機能の数々をぜひご覧ください。

このような感じのアレです。

WebsiteToolKit.jsの機能

レスポンシブWebに対応

CSS3のメディアクエリ（Media Queries）を使ったレスポンシブWebデザインに対応。より高い最適化のために完全にMedia Queriesに依存しているわけではなく、ユーザエージェントでの分岐処理してますけどね。

Retinaディスプレイに対応

iPadやMacBookなどのdevicePixelRatioが1.1以上のデバイスで見た際にも画像が美しく表示されるような仕様になっております。単純に高解像度画像と標準解像度画像をスイッチングしているだけですけどね。

IR機能

WebフォントやCSS3が台頭してきたとは言え、まだまだCSSのみでWebサイトを美しく彩るには互換などの限界があります。そのためImageReplaceなどで各ブラウザで整合性のとれた見出し画像などは使わざるを得ません。

リストをストライプ

tableやliなどのタグに自動的に規定色のストライプを付与する機能です。ほら、しましまにするじゃん表とかさ。1つ置きにclassとか使うのめんどうじゃん？自動でやってくれたらありがたいじゃん？

スマートフォンブラウザプレビュー機能

スマートフォンでいちいち動作確認するのめんどくさいじゃん！ということでスマートフォンではこうやって見えるんじゃないか？みたいな簡易プレビュー機能がついています。URLのお尻に?MobileViewを付けるだけ。

プレーンテキストプレビュー

HTMLからCSSやscriptを取り除いたプレーンテキスト状態のHTMLをプレビューすることができます。この機能により、真の意味でのHTMLの表示がどうなっているかを確認することができるんだっ！

文字数を調整

文字数を調整するための機能です。ちょっと文字数を割愛したい・・・。でもPHPなどのサーバサイドでそれをやっちゃうのは美しくない！そんなあなたのためにJavascriptで指定class名をつけているspanタグ内の文字数を勝手に調整します。

スマートフォン表示時に画像を縮小表示

いや、CSSでできるじゃん！ってのはわかりますけど、CSSでやらないことに意味があるんじゃまいか！ということでPCで表示している時の○％で表示させたい！というあなたの願いを叶えるための機能がここに！

スマートフォンでスライドするナビゲーターが自動実装

スマートフォンアプリなんかによくあるボタン押したら左からグイッとスライドしてくるナビゲーションメニュー。なんとWebsiteToolKit.jsだと自動的にそれが実装されちゃうんです！しかもフリック操作にも対応しているゾ！

デモサイト

https://lab.synck.com/WebsiteToolKit.js/about.script.html

WebsiteToolKit.jsの更新履歴