こんにちは、開発者の久保田です。

Monacaではプロジェクトのひな形が一新されて、新しいHelloWorldプロジェクトが用意されました。 そのプロジェクトの中には、異なる解像度の端末でも同じように画面を設定するためのmonaca.viewport.jsが含まれるようになりました。この記事ではmonaca.viewport.jsについて説明します。

なぜviewportを指定するライブラリが必要なのか?

monacaでは、HTML5でモバイル用のアプリケーションを作成する必要があります。モバイルデバイスやタブレットには、それぞれ違った解像度を持つiPhone、iPadなどのiOS端末や様々なAndroid端末が存在します。アプリケーションの開発者は、違った解像度を持ったデバイスに対応しなければなりません。そのために、アプリケーションにviewportを設定します。

viewportとは?

viewportは、アプリケーションに設定する仮想的な画面幅であり、これを設定しておくと開発者はこの仮想的な画面の幅に合わせて画面を記述できます。端末で実行した場合には、端末の実際のサイズに合わせて自動的に画面の幅がズームされて表示されます。以下のようなHTMLのmetaタグで記述することで、個別のデバイスごとに対応するようなコードを書かなくても済むわけです。

<meta name="viewport" content="width=640" />

この例では、viewportの幅を640pxに指定しています。画面の横幅を640pxとして画面を作成すれば、その後端末で動作させた時にそのデバイスの解像度に従って自動的に拡大縮小されて表示されます。

ただし、このviewportの設定には、iOSではブラウザの機能として実装されていますが、android端末やPCではそうではありません。

monaca.viewport.jsは、iOS、android、PCどの端末に対してもviewportを統一的に指定することができるJavaScriptライブラリです。

どのように動くのか?

monaca.viewport.jsは、動作させる端末によって動きを変えます。

iOS端末では、monaca.viewport.jsは単にmetaタグでviewportを指定します。android端末とPCでは、monaca.viewport.jsはviewportの動作をJavaScriptでエミュレーションします。

終わりに

このmonaca.viewport.jsはgithub.com/monaca/monaca.jsにて公開されています。monacaに限らずHTML5のモバイル・アプリケーション開発に利用することができるのでどうぞお試しください。