読者です 読者をやめる 読者になる 読者になる

#daiizメモ

フレンチフライ トリュフ塩仕立て

技術ネタはてブ数が多いごはん情報

スポンサーリンク

<griddles-ui-card> を公開しました

自作のカードUIテンプレート「griddlesJS」をこのブログで初めて紹介させて頂いてから、もうすぐ半年が経とうとしています。

初版を公開した後も(自分なりに)力を入れてアップデートを重ねてきました。その過程はこちらのページでご覧いただけます。今回は過去一番大きなアップデートです。

griddles-ui-card として新たにスタートします

これまでこのプロジェクトは「griddlesJS」として続けてきましたが、今後は「 griddles-ui-card」として開発が進められます。*1
本日プレビュー版をGitHubで公開しました。本体のソースコードと後述するデモのソースコードを入手できます。

<griddles-ui-card> について

Web Component

「griddles-ui-card」は web component の技術を用いたカスタムエレメントです。従って、これまでの「griddlesJS」よりも簡単にウェブページに埋め込むことが可能になります。例えば、griddles-ui-cardをインポートしたうえで、HTMLに以下のような一行を加えればカードの表示領域を用意することができます:

<griddles-ui-card wrappedBy="document"></griddles-ui-card>

このgriddles-ui-card要素に対して、次のようなJavaScriptを追加することで、デフォルトで用意されているサンプルカードを表示させることができます:

function griddlesAppInit() {
   var griddle = document.querySelector("griddles-ui-card");
   griddle.query = "sample";
}

Material Design

カードを表示する際のアニメーション、ウィンドウ縮小時にカードが縮む動作など、より自然な動きになるようにデザインを改良しました。特に、ウィンドウ変形の際の挙動の改良により、無駄な読み込みを減らすことに成功しました。*2

<griddles-ui-card> のデモ

Chromeでお試しください。なお、デモ3については開発中のため一部動作しないメニューがあります。

デモ1

こちらはLive Demoですので、ページ中で各種パラメータを変更しながら試すことができます。このデモは、GitHubからダウンロードしたプロジェクトフォルダの/griddles-ui-card/demos/に入っているdemo_document.htmlです。このデモを開く

f:id:daiiz:20140910154701p:plain

デモ2

こちらもLive Demoですので、ページ中で各種パラメータを変更しながら試すことができます。このデモは、GitHubからダウンロードしたプロジェクトフォルダの/griddles-ui-card/demos/に入っているdemo_div.htmlです。このデモを開く

f:id:daiiz:20140910154826p:plain

デモ3 (Yummy)

こちらは Polymer のcoreエレメントのcore-scroll-header-panelとともに使用したデモです。右上の「虫めがね」アイコンからキーワードを選択する度に表示される写真が変更されます。*3 このデモを開く

f:id:daiiz:20140910154940p:plain

リンク

ソースコード・デモを入手する

griddlesのデモ一覧を見る

フィードバックをお待ちしています

<griddles-ui-card>のデモを試用されたご感想・機能追加/改善のご意見などを、この記事へのコメントとして、または、GitHubIssuesへの書き込みなどでお聞かせ頂けると嬉しいです。よろしくお願いします。

*1:GitHubの「griddlesJS」のリポジトリはそのまま残ります。

*2:これについては今後記事で紹介したいと思います。

*3:このデモの挙動については今後記事で紹介したいと思います。