griddles.js の新機能（予告）

JavaScript製のカードUIフレームワークgriddles.jsの次期バージョンで、新たにできるようになることを紹介します。

すでにできること

• 画面の横幅に応じてカードを綺麗に整列表示
• 写真などの事前に縦幅がわからないカードの表示
• カードがクリックされた時の挙動の設定
• Chrome, Firefox, Safari, Opera, IE10 での表示
• PC, スマートフォン, タブレット での表示
• XMLHttpRequestでの画像の読み込み（Chromeアプリで使用）

できるようになること

• load_limit 1回あたりのカード読み込みの制限

  • これまでは、一度ですべてのカードを表示していました。これではカードの枚数が多くなると、読み込みの完了まで大変時間がかかります。そこで、この機能を用いると、ブラウザの縦幅に応じたカードの読み込みを制御することができます。たとえば、制限として整数 2 を指定すると、一度に読み込むカードの縦幅の合計値がブラウザの縦幅の 2 倍程度に制限されます。最下部までスクロールされると、自動で読み込みが再開されます。以降の読み込みにおいてもこの制限は有効です。この機能により、後から次々にカードを追加していくことが出来るため、途切れること無くスクロールが可能なページを設計することもできるようになります。

• max_streams_limit ストリーム本数の上限値の設定

  • これまでは、使用する画面の幅の長さによって自動でストリームの本数が決められていました。本数の上限値を指定可能にすることで画面の大きさを心配することなくページをデザインできるようになります。この機能を無効にして、今までどおり画面いっぱいにカードを表示することもできます。

• wider_width カードの幅を広くする指定

  • カードの横幅を、複数のストリームに跨って長くする機能です。たとえば、ストリーム本数の上限値を 2 と設定していた場合、この機能を有効にしてるカードの横幅は通常よりも長いストリーム2本分になります。この機能はカード毎に指定することが可能です。またこの機能は、ストリーム本数の上限値が設定されている場合のみ使用できます。

などなど。

今後は、少しずつドキュメント（使い方の説明書）も用意していこうと思います。

サンプル・ソースコード

• 以上の新機能を盛り込んだサンプルページ： サンプルページ *1

*1:Google ドライブに置いているのですが、読み込みが少し遅くなってしまうようです。