slack

テクてく Lotus 技術者 Slack に参加しよう!

2009/12/17

Blueprint CSS フレームワークの XPages への実装

今回は OneUI とは違う CSS フレームワークのお話しをしたいと思います。

どうして私がこのように CSS フレームワークにこだわるかというと、私自身が典型的なノーツクライアントベースの開発者で、あまり Web 技術に明るくないことがひとつ。そして、IBM が(特に日本で) XPages の紹介でいう、たとえば「10 分でWeb2.0! XPagesによる既存NotesアプリのWeb化」などを参考に自分の手元にある既存アプリケーションを XPages で表示させてみてまず思ったことが
「これのどこが Web 2.0 アプリなの?」
「もっと見栄えが良くないとユーザーからやっぱりNotes/Dominoはこんな程度かと思われてしまう」
と残念に思ったことでした。

ユーザーインターフェースはとても重要。といっても自分には CSS の知識がない。そういうときに OneUI や CSS フレームワークの存在を知り、それを取り込むことで開発のベストプラクティスである一貫性や再利用性を実現してくれるものだと知ったからです。これを是非うまく利用して皆さんも開発してほしいと思います。

今回は Blueprint CSS フレームワークの概要をと XPages への応用の2本立てです。

まずは Blueprint CSS の本家のサイトからです。http://blueprintcss.org/
言うまでなくこのサイトも Blueprint の CSS フレームワークを使用しています。
トップページにはこのフレームワークのダウンロードもできるようになっていますので、まずは必要な css ファイルをダウンロードしておきましょう。
実際のものとして提供されるのは
  • screen.css
  • print.css
  • ie.css
の3つだけです。とてもシンプル。

このフレームワークの特徴はグリッド型のフレームワークでページを縦に 24 個のカラムで区切りレイアウトを構成できることです。比較的シンプルなページを作成したいときにとても有効です。

バナー、タイトル、ナビゲーション、コンテンツなどのパーツをどこにどうやって配置するかをこの 24 個のカラムを使って表現します。

下の動画はたまたま見つけたもので、英語ではありますが画面を見てるだけでもこのフレームワークを使ったページのレイアウト方法が面白いほどよくわかります。



次にご紹介するのは David Leedy さんの Notes In 9 です。Apple の podcast でも公開していますので iTunes Store から検索してください。
今回ご紹介するのは episode - 006 の A Blueprint to XPages です。YouTube で公開しているバージョンでご覧いただこうと思います。



どうでしたか?
ビデオの中でも出てきましたが、例の Elguji Software の IQJam (日本でいうところのドミノ懇談室)もこの Blueprint CSS が利用されています。

こういったフレームワークやレイアウトの配置などを考えると、10 分でWeb2.0! XPagesによる既存NotesアプリのWeb化で見るような XPage に直接コアコントロールをバンバン貼付けて作っていくことは Bad Practise であることが分かります。たとえば皆さんの CRM アプリケーションが 10分で XPages で完全に Web 化できるわけがないので、あくまでもマーケティングの一環としての XPages 紹介と割り切ってみていただいたほうが無難だと思います。

ページ上のレイアウトをパーツパーツに分解して、そのパーツをカスタムコントロールとして作成。XPage にはそのカスタムコントロールを貼付けていくだけといった手法が Best Practise です。事実、海外のこのようなチュートリアルやガイダンスには必ず、

レイアウト>カスタムコントロール>最後に XPage

の順番で紹介されています。{Link}

是非この点は間違えないでください。XPages  アプリケーションの後々の再利用性やメンテナンス性を考えると非常に大きな違いになってきます。

0 件のコメント:

コメントを投稿