株式会社グルコム
Web関連

面白・便利ツール Viewport Resizerの紹介


Viewport Resizerという面白いツールをご紹介します。コレは何かと言いますと、大雑把に言って「仮想的にブラウザのウィンドウサイズを変化させる」というツールです。ま、見てみた方が早いですから、早速Webサイトを見てみましょう。

140111view01

サ イトを表示すると中央付近に「CLICK OR BOOKMARK」と書かれたボタンが見えます。このボタンをクリックすると、Viewport Resizerが起動します。では早速クリック…の前に注意事項がありまして、こちらのツールは「Internet Explorerは対象外」なのです。

140111view02

Windows XPのIE 8で確認しましたが、やっぱり動作しません。最新のIE 11とかなら動くのかもしれませんが、ちょっと検証しきれませんでした。ここは指示の通りに対応ブラウザで見る事にします。

さて、対応ブラウザ(この記事ではMac版Firefox 25にて動作させています)にてボタンをクリックすると、ページ上部に何やら黒いツールバーが追加されました。

140111view03

この部分が「仮想的にブラウザのウィンドウサイズを変化させる」為のものでして、ざっくりと説明すると左から

●ウィンドウサイズ変更
●現在のウィンドウサイズと比率
●その他

となります。

140111view04

おそらく一番重要な部分である「ウィンドウサイズ変更」ですが、アイコンが並んでいますね。これも左から説明すると、

●サイズ自動設定(ブラウザウィンドウのサイズになる)
●モバイル(iPhoneなど)
●iPhone 5(iPhone 5は高さが異なりますので)
●小さめのタブレット
●普通のタブレット
●ワイドスクリーンのパソコン画面
●フルHDのパソコン画面

との事ですので、いろいろクリックして試してみてください。Viewport ResizerのWebサイトはレスポンシブデザインで作られているようなので、サイズが変わるとちょっとだけ変化します。

140111view05

また、アイコンをもう一度クリックすると、縦向き横向きを変更できます。

140111view06

「Customize」のところの数字を書き換えれば、好みのスクリーンサイズで見てみる事もできます。

140111view07

こ うして見てみると、左上のアイコンは厳密な区分というよりは、よくあるサイズを予め用意しているだけのようですね。例えば(ちょっと古めの)パソ コンなら「普通のタブレット」を横向きにするとちょうど良く(1024×768)なります。右上の「X」ボタンをクリックすれば元のページに戻りますの で、安心していじっちゃってください。

さて、Viewport ResizerのWebサイトだけ見ていてもあまり役に立たないですね。他のサイトでも遊ぶ・・・失礼、実験してみるにはどうすれば良いのでしょうか? いや、まぁ、単純な話でして、「CLICK OR BOOKMARK」のボタンをブラウザのブックマークバーにグググッとドラッグ&ドロップしてしまえば良いのです。このブックマークをクリックすると JavaScriptが動作(このような仕組みを指してブックマークレットと言います)して、“今”表示しているWebサイト上でViewport Resizerが動作します。

厳密な意味では、このツールだけで検証するのは不適切ではあると思いますが、サッとチェックしたりする際にはこの手軽さが嬉しいですね。

株式会社グルコムについて

私たちは、ウェブ制作・ウェブマーケティングサービスを提供して、12年以上の実績がある会社です。 これまでの経験を活かし、ウェブ制作・運用・集客・SEO対策や、セミナー・ウェブ担当者向け教育サービスなどをお客様にご提供しています。