griddlesJS:: できることが増えました

本日、カードUIを簡単に実現できるJavaScriptテンプレート「griddlesJS」の最新版*1を公開しました。 今回のバージョンアップにより、以下の機能が使えるようになります。

• サイド・ナビゲーション

  画面最上部のアプリケーションバーの左端に表示されている三本線もしくはアプリアイコンをクリックすると、画面左からサイドメニューが登場します。同じ場所または表示されたメニュー項目のうちいずれかをクリックすると、サイドメニューは再び引っ込みます。

  

  もちろん、この機能を使用しないという選択も可能です(^^)

• 横長のアプリアイコン

  これまでは、アプリアイコンとして指定された画像は正方形に縮小して表示されていました。これからは、横長の画像を指定した場合でも縦横の比率を保ったまま縮小されるため、アプリロゴなどを表示することも可能です。

• フローティングカード

  ウィンドウの上部からの高さを指定することで、好きな位置にポップアップのようなカードを表示できるようになりました。

• カスタムデザイン

  これまでのアプリの画面デザインを指定する方法は少々複雑でした。新たに導入したCSSファイルではアプリバーやサイドバーが登場する際のマスクカラーなどを簡単に編集できます。さらに、マニフェストファイルを編集することで、アプリバーやその下のメニューバーの「表示／非表示」・「可動／固定」を指定することも可能になりました。

griddlesJS を入手する

ソースコードはGitHubで公開しています。以下のページからダウンロードした後、梱包されている基本パッケージv0.2.392フォルダをコピーしてご利用ください。

https://github.com/daiz713/griddles

griddlesJSは、様々なモダンブラウザで動作しますが、現時点では Google Chrome でのご利用をおすすめしています。
なお、デモページも更新しましたのでどうぞご覧ください。

http://griddles-card.appspot.com/

*1:ver0.2.392; nileblue