誰でもAndroid 5.0のMaterial DesginをWebに持ち込めるPolymerHTML5アプリ作ろうぜ!(13)(1/4 ページ)

Material DesginでWeb ComponentsでオープンソースでレスポンシブなJavaScriptフレームワーク「Polymer」をWeb上で活用するためのチュートリアル記事です。Bootstrapライクなレイアウトを実現するサンプルを交えてインストール方法や使い方を紹介します。

» 2014年10月20日 18時00分 公開
[山崎大助inop/デジタルハリウッド大学院 教員]

 最近はやりのHTML5、JavaScriptライブラリ、CSS3、API、またそれらを組み合わせたサンプルアプリを解説していく本連載「HTML5アプリ作ろうぜ!」。今回紹介するライブラリは「Polymer」です。

Material DesginでWeb ComponentsでOSSでレスポンシブな「Polymer」とは

 2014年6月のGoogle I/Oで発表があった「Material Design」は、Androidプラットフォームの新しいUI思想として提唱されました。先日、正式発表があったAndroid 5.0向けアプリ開発でも「Material Design」は重要になってくることでしょう。

Google Developperのアカウントで公開しているMaterial Designのサンプル

 Polymerは、このMaterial DesignをWebで実現するためのJavaScriptフレームワークです。

PolymerはWeb Componentsを全ブラウザーで試せる

 Polymerは登場した当時は、「Web Components」に対応していないブラウザーでもWeb Componentsを利用したWebアプリを動かすためのものでしたが、「Material Design」の発表により、さらに注目を浴びるようになりました。

 「Web Components」はまだ全てのブラウザーでは使えませんが、近未来の技術として理解しておいた方が良いこともたくさんあります。そこで、「Material Design」だけではなく、今から「Web Components」を使いたい方にもオススメなのが、このPolymerです。Web ComponentsはブラウザーのAPIとして開発が進んでいますが、PolymerはUIフレームワーク/UI Kitと呼ぶのが合っていると思います。

Polymerはオープンソース。GitHub上で開発

 Polymerはオープンソース(BSDライセンス)で開発が進められていて、GitHubでソースコードが公開されています

PolymerはレスポンシブWebデザインにも対応

 対象ブラウザーは、Microsoft Internet Explorer 10以降、Google Chrome、Mozilla Firefox、Apple Safari、Opera、iOSのブラウザー、Androidのブラウザーです(ブラウザーによって表示パフォーマンスはまちまちです)。スマートフォンにも対応しているように、PolymerのコンポーネントはレスポンシブWebデザインにも対応して作られていて、モバイルとPCの両方で動くのが特徴の一つです。

モバイルの場合(core-toolbar/demo.htmlの表示)

PCの場合(core-toolbar/demo.htmlの表示)

Polymerをすぐにデモサイトで体験しよう!

 先にデモサイトで体験しましょう。下記URLをブラウザーで開くと左側にはさまざまなElementのメニューがあるので、選択して触ってみてください。

       1|2|3|4 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

スポンサーからのお知らせPR

注目のテーマ

AI for エンジニアリング
「サプライチェーン攻撃」対策
1P情シスのための脆弱性管理/対策の現実解
OSSのサプライチェーン管理、取るべきアクションとは
Microsoft & Windows最前線2024
システム開発ノウハウ 【発注ナビ】PR
あなたにおすすめの記事PR

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。