-スマートフォン向けJavaScriptフレームワーク/ライブラリを使うと、スマートフォンアプリっぽい見た目のページデザイン、UI(ユーザーインターフェイス)パーツやページ遷移アニメーションを簡単に実装できます。多くは、おのおののフレームワークのルールにのっとったHTMLを書くことで、それらの機能を実現します。Mobileを筆頭として、いくつか発表されているスマートフォンサイト向けJavaScriptフレームワークを紹介します。PCサイト向けJavaScriptフレームワークについてPCサイト向けJavaScriptフレームワークとしては、jQueryやprototype.jsなどが有名です。これらのフレームワークは、UIの見た目を決めるというのではなく、主にUIの動きを操作しやすくする役割を担っています。それぞれのフレームワークに対応したプラグインを使用することで、見た目も変えることはできますが、フレームワークそのものの機能ではありません。ビジュアルは開発者にお任せで、それをどのように生かすかをフレームワークが担っていると考えられます。PCサイト向けJavaScriptフレームワークとの違い上記で触れたように、PCサイト向けとスマートフォンサイト向けのJavaScriptフレームワークの大きな違いは、前者が動きを制御することにあり、後者が見た目を整えることになると考えられます。前者では、特に決まったHTMLテンプレートは存在しません(プラグインを使う場合は別です)が、後者を扱う際には決まったHTMLの記述が存在します。特定の属性を追加することでフレームワークが機能するようになります。標準Webブラウザが決まっているスマートフォンでは、HTML5やCSS3を利用可能なので、HTML5の恩恵にあずかることができます。スマホ向けWebコーディングに必要な知識スマートフォン向けにHTMLを記述する場合は、HTML5およびCSS3を使った方が拡張性が高まるので、できればHTML5+CSS3でコードを記述することをオススメします。4の後継となるHTML仕様として、現在注目を浴びています。2014年までの正式勧告を目指して策定が行われている途中なので、まだWebブラウザによっては実装が異なっています。今までとの大きな違いとしては、「動画や音声などの利用が簡単」「位置情報やローカルストレージを利用できる」「要素や属性の見直し」「文章構造の強化(タグの追加)」が主な改良点として挙げられます。CSS3について現在広く使われているCSSのバージョンは、2.1です。CSS3を使うことで、JavaScriptを使用しなくても、アニメーションやトランジションができるようになります。その他、背景画像の複数指定、背景色のグラデーション、ボックスの角丸化などに対応しています。touch)/Android端末において、HTML5の新規追加タグは問題なく認識します。CSS3に関しても、わざわざWebKitを拡張しなくても、背景画像の複数指定、グラデーション、ボックスの角丸なども問題なく使えます。Explorerでは対応していないことも多いので、ユーザーエージェントなどによる切り分けを行うなど、注意して記述する必要があります。今回、サンプルを交えて紹介するJavaScriptフレームワークは以下の3つです(下記リストはインデックスになっています)。本稿では、それぞれのフレームワークの利用方法と、何ができるかということを紹介していきますが、それぞれ特徴があるので、構築しようとしているサイトに合ったものを使用するといいでしょう。以下が、今回作るサンプルアプリの機能です。メインページヘッダタイトルデモページへのリンクボタンリストボックスカラーチェッカー(入力式)へのリンクカラーチェッカー(スライダー式)へのリンクカラーチェッカー(入力式)ヘッダタイトルカラーチェッカーカラー表示用ボックスRGB入力ボックスカラー変更ボタンカラーチェッカー(スライダー式)ヘッダタイトルカラーチェッカーカラー表示用ボックスRGB入力スライダーカラー変更ボタンUIデザインに関しては、フレームワークの中で使った方がいいものがあれば、それを積極的に使っていきます。独自のCSSは一部を除いて使用しません。使用する場合は、style属性を使って直接HTMLタグ内に記述しています。id="btn2">カラー変更</a></p></form>「range」はHTML5から拡張された属性なので、スマートフォンの場合、Webブラウザにより実装が済んでいない場合もあります。その場合、「type="number"」で代替されたり、表示されないこともあるようです。詳細は、以下の記事をご覧ください。(2017/7/24)子ども向け電子工作&プログラミング用マイコンボード「chibi:bit」の基本的な使い方を紹介する企画。(2017/7/20)子ども向け電子工作&プログラミング用マイコンボード「chibi:bit」の基本的な使い方を紹介する。