シンクグラフィカ札幌

WebsiteToolKit.js

WebsiteToolKit.js

レスポンシブWebデザインな感じでスマートフォン対応Webサイトを簡単に効率よく制作するためのJavascriptフレームワーク『WebsiteToolKit.js』です。スマートフォンサイトにお馴染みのスライダーナビゲーションなどが簡単に実装できます。

『WebsiteToolKit.js』は効率的にスマートフォンに対応したレスポンシブWebデザインのサイトを作成するためのJavascriptフレームワークです。厳密なレスポンシブWebデザインではなく、ユーザエージェントによる判定を行っていますが、それゆえにシンプルなコーディングでスマートフォン対応を実現。

また、スマートフォンでの表示時は帯域負荷を軽減し、高速表示を実現するためのギミックが数多く盛り込まれています。表示領域が限られているスマートフォンデバイスでの閲覧にフォーカスした「モバイルファースト」な機能の数々をぜひご覧ください。

Youtube Movie

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

WebsiteToolKit.jsの機能

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だと自動的にそれが実装されちゃうんです!しかもフリック操作にも対応しているゾ!

WebsiteToolKit.jsのデモ

WebsiteToolKit.jsのサンプル
まぁ見てみてください。思う存分見るといい。そして楽しむといい。少し休んでから、また見るといい。

WebsiteToolKit.jsの更新履歴

2014-02-11mhideが発動しないバグを修正したバージョン。
2014-01-28iOS版Chromeに対応したバージョンを公開。
2014-01-15微調整をしたバージョンです。
2013-11-11WebsiteToolKit.js満を持しての公開第1段。

WebsiteToolKit.jsのダウンロード

WebsiteToolKit.jsのダウンロード

WebsiteToolKit.jsの過去のバージョン

Release Version Download
2014-02-11 1.3.6 Download
2014-01-28 1.3.5 Download
2014-01-15 1.3.4 Download
2013-11-11 1.3.2 Download

WebsiteToolKit.jsのユーザレビュー

必須お名前
必須メールアドレス
必須確認のためもう一度
必須評価
必須レビュー内容
必須掲載確認