Sponsored links

WordPress に Polymer プラグインがあるらしい

Plymer「ポリマー」とは、Webアプリの開発を支援する新しいライブラリというものらしい。まだ、正式版のリリースはされていないようですが、2013年にプレビュー版が発表されて、2014年(google I/O2014)でも取り上げられていたことで、少しずつ認知度が上がってきているようです。 polymerLogo 今回は、そのライブラリを WordPress で簡単に導入することができる、プラグインがあったので、導入してみただけの話です。

導入するとどうなるのか

導入すると web 上で Material Design の実装に利用できるようになる。Material Design とはGoogle が提唱しているもので、 「フラットデザインに規則性のある自然な影や動きを入れて一貫性を持たせたもの」とのこと、わかりやすく言いますと 現在の Android OS Lollipop で動作している動きや、デザイン、見た目、操作方法、などが それにあたる 。つまり、Polymer を導入することにより、スマートフォンのような 一貫性のあるデザイン/動き/操作方法と同様な Material Design を採用した Web アプリを作成することができるようになる。

例えば下のようなタグでHTMLを記述すると簡単にトグルボタンが導入できる。

    <paper-button toggle>button</paper-button>

    <paper-button toggle raised noink>noink</paper-button>

    <paper-button toggle active class="colored">active</paper-button>

    <paper-button toggle raised active class="colored">active</paper-button>
buttonnoinkactive
詳しくは Polymer デモ

導入環境

今回私はWrodpressのプラグインを導入しただけですが、基本的にこの、Polymerは下記の条件で動作します。
  • Polymer は webサーバー上で動作するので、同webサーバー環境が必要です
  • Polymerが動作するブラウザは「Chrome」「Opera」のみ

スポンサーリンク

導入手順

Polymerの導入手順は、同Polymerサイトに英語で記述があるので、その手順に沿って行えばできるはずです。こちらから。 試しに導入手順通りにやってみたが、大変面倒で、、Wordpressに簡単に導入できないか探してみるとプラグインを探してみると「Polymer for WordPress」なるプラグインが開発されていました、開発者様に感謝申し上げます。

WordPress polymer プラグイン

Wordpress おなじみのプラグインですが、今回利用したプラグインも他のプラグインと同様に、インストールするとすぐにその機能が使えるようになっています。楽々ですね。同プラグインのサイトは”Polymer for WordPress“ になります。 早速記述してみた
A green button

paper-tab

ITEM ONEITEM TWOITEM THREE

paper-toggle-button

Wi-Fi
Bluetooth
Custom Colors
Disabled

paper-radio-button


paper-button raised/paper-toast

Discard DraftGet MessagesSend Message
Retry

paper-fab icon

Regular

paper-fab mini icon

Mini

paper-slider

R
G
B

paper-slider pin

Brightness

core-pages

One
Two
Three
Four
Five
logo2

とまぁ楽しい動きをしてくれます。

Pocket
LINEで送る

Sponsored links

Leave a Comment