XPages Extension Library で Bootstrap と Responsive Web Design を実装 (2)

今回は、前回紹介した XPages Extension Library で Bootstrap と Responsive Web Design を実装の続きです。
Bootstrap のベースに加えて追加されているリソースがあります。Glyphicons というアイコン集が利用できるようになっています。簡単に言うと、アイコンイメージを画像ではなく、JavaScript と CSS を使ってアイコンを表現しているものです。この Extension Library では現時点で 200 のアイコンが搭載されています。XPages の標準コントロールにもすでの対応がされているので、心配ありませんが、自分でこの Glyphicons を使用したい場合の HTML サンプルを見ると次のようなコードになります





上でわかるように class="glyphicon アイコン名 をコントールの属性に追加すればよいので、XPage の中でアイコンを表示したい場合には

というように記述します。
しかし、この Glyphicons を使用する際には現在のところちょっとした問題があります。たとえば、前回からみている Demo Application のデータベースでは下図のようにアイコンらしきものが正しく表示されていないのがわかります。
 これを解決するには、Xspプロパティの「実行時最適化 JavaScript と CSS リソースの使用」のチェックを外す必要があります。このオプションはサードパーティの JavaScript/CSS のフレームワークを使用する際にはたびたび問題になっているオプションです。jQuery を使用して何かする場合は(この Extension Library には jQuery v2.1.1 が実装されています。Bootstrap は jQuery が前提)、JavaScirpt が圧縮されてどこかにコンフリクトが発生してうまく動作しないのが原因です。
またどこかのタイミングで今回実装された jQuery について詳しく説明するとして、今回はアプリケーションのレイアウトにフォーカスして話しを進めます。


 すると、Glyphicon が正常に表示されます。

 ここで、話が一区切り突いたので、続きは次のポストで。次回は新しく追加されてシンプルResponsive アプリケーションレイアウトについて説明したいと思います。

ノーツコンソーシアムの理事を拝命しました

私ごとですが、先週金曜日に行われたノーツコンソーシアム通常総会でノーツコンソーシアムの理事のひとりとして正式に拝命を賜りました。若い理事として紹介されましたが、決して若くないので会場から苦笑が。

ノーツコンソーシアムは今年20周年を迎え、Notes/Domino を利用するベンダーとユーザー企業から構成されており、コンソーシアムに参加する団体は100を超えています。しかし、会員数も年々減少傾向にあるようです。
IBM の全体的な戦略の中での Notes/Domino の露出が徐々に端へ端へと追いやられる一方で、いまだ Notes/Domino を企業の中核プラットフォームとして使用している企業も多く、これからも Notes を使い続けたいと Notes にコミットする企業も多く製品、コミュニティともに盤石です。しかし、コミュニティにおいては 1990 年代のような、だれもが注目するグループウェアとしての求心力は失いつつあるのは事実です。近年、だれもが Notes はレガシーなのかと問われ明確に解を提示できないといった Notes に関して情報「難民」となってしまっているエンドユーザー企業も多いを肌で感じます。

私をよく知る人はご存じだと思いますが、かねてから私はノーツコンソーシアムのありかたには懐疑的、いやむしろ否定的でした。現状においてもまだ否定的な部分が多くを占めています。昨年一度打診がありましたが、最初はお断りさせていただきました。そんな私が理事を引き受けた理由にはいくつかあります。もっとも大きな理由のひとつは、IBM 自体が Lotus/ICS/ESS の単独のイベントを行わないことで、協業してきたビジネスパートナーや Notes を運用しているユーザー企業に必要な情報が伝わらない危機感がますます募ってきたからです。この話は日本だけではありません。グローバルでみても、Lotusphere/Connect のイベントは来年以降行われないかもしれないという話も聞こえてきます。ただ、欧米には 各国 に LUG といわれるユーザーグループがあり(正式名称はさまざま)LUG は LUG が中心となって主催するイベントでより詳細な技術情報や動向を自国で知ることができるという大きな役割を担っています。この LUG の活動がノーツコンソーシアムでできるかどうかで Notes/Domino の運命がかかっているといっても過言ではありません。そういう使命をもつユーザーグループとしてのノーツコンソーシアムに期待し、これまで停滞していたノーツコンソーシアムの活動の再活性化に繋げればと思ったからです。

とはいえ、理事の間でもノーツコンソーシアムのあり方を変えなければ、違う方向性を見いださなければといったことは重々承知しているようです。理事の総数は現在 19 名。理事の人数が多い上に足並みそろえてひとつの方向に向かっていくことが難しく主体性が欠如しています。迅速に決断して実行していく、そんな意識の改革がまず求められる組織になっています。私とて周りの協力なくしてなにも実行できないのが現状ですので、是非いっしょにノーツコンソーシアムと Notes/Domino を盛り上げるためにご協力いただければと思います。

XPages Extension Library で Bootstrap と Responsive Web Design を実装

IBM Notes/Domino 9.01 に実装できる最新版の OpenNTF Extension Library では、Web ページのテーマに OneUI だけでなく、Bootstrap のテーマが使用できるようになりました。
Bootstrap は Responsive Web Design に対応するフレームワークなので、デスクトップブラウザ、スマートフォン、タブレットの様々なデバイスに対応したXPagesアプリをひとつのソースコードで作成できます。
これを使えば、ディスクトップ用とモバイル用でそれぞれ XPage を作成する手間が大幅に削減されるはずです。

また、今年後半にリリースされると予想される Notes/Domino 9.0.2 に標準で実装されるものと考えられています。 先端技術を先取りして試してみる良い機会ではないでしょうか?

まずは、Extension Library の入手ですが、extlib.openntf.org の「Download/Releases」タブから最新版をダウンロードします。
執筆時点では、2014/12/19 リリースの 901v00_11.20141217-1000 (第 11 版)を使用しています。2014/11/10 の第 10 版リリースで初めてこの Bootstrap が Extension Library に組み込まれたので、それ以前のものでは実装されていませんので注意してください。
もうひとつ。執筆時点で Notes/Domino v9.01 には FP3 がリリースされています。何かの不具合で v9.01 FP3 ではプラグインが更新サイト(updatesite.nsf)に取り込めないという不具合が報告されています。使用する際には、v9.01 FP2 までの v9.01 バージョンで使用するか v9.01 FP3 に IF1 をあててください。

Extension Library の導入は次の Wiki (OpenNTF XPages Extension Library のインストール方法)を参考にしてください。

さて、この Extension Library でアプリケーションを Bootstrap の見た目で表示するためには、特に Bootstrap 用のコーディングを追加するようなことはないようです。アプリケーションで使用する「テーマ」を Bootstrap 用に変更するだけで、コアコントロールや拡張コントロールも Bootstrap のルック・アンド・フィールに変わります。

指定するテーマは「Bootstrap3.2.0」または「Bootstrap3.2.0_flat」。選択肢の中に出てくるわけではないので、手入力で指定します。
Theme

ブラウザ上でスタイルが変わらない場合は、アプリケーションのクリーンとビルド、そしてブラウザのキャッシュをクリアしてください。(私の検証では特に必要ありませんでした)

特にテストできるアプリケーションをお持ちでない場合は、標準コンポーネント/拡張コンポーネントが一度に確認できる OpenNTF の Demonstration Application for XPages の v2.01 (9.0.1 用) をダウンロードして実際に動かしてみてはどうでしょうか?
このデモアプリではデフォルトで OneUI V3.0.2 のテーマが使用されています(下図)。
OneUI302

テーマを Bootstrap に変更するだけで、ご覧のような Bootstrap のルック・アンド・フィールに瞬時に変わります。
Bootstrap

この Bootstrap のテーマは Responsive Web Design に対応していますので、スマートフォンから見るような小さな画面サイズにも整形しているのが確認できます。
Mobile

続きは、それぞれの UI コンポーネントについて見ていきます。お楽しみに。

IBM ConnectED クロージングセッション YouTube で公開

先日基調講演に続いて、クロージングセッションも公開されました。
会場の様子もVTR放映されており、どんな雰囲気だったのかを味わうこともできます。
日本人の顔もちらほら見受けられます。

IBM ConnectED セッションの資料

イベントの翌週ということもあってそろそろセッション資料の公開が始まっています。現在はビジネスパートナーによる BP セッションを中心に公開されています。多くは Slideshare で公開されています。一部は当人のブログなどからダウンロードできるようになっていますのでまとめてみました。現時点ではまだすべてが揃っているわけではありませんので追ってご紹介していくことにします。

MAS103 XPages Performance and Scalability 

MAS202: Customizing IBM Connections

AD302 - Responsive Application Development for XPages

BP102: Practical IBM Notes and Domino Internet Security / Track 4: Best Practices
リンク 


BP104: IBM Notes Traveler Daily Business – Administration, Monitoring and Support


BP106 From XPages Hero To OSGi Guru: Taking The Scary Out Of Building Extension Libraries 



BP108: Be Open - Use Web Services and REST in XPages Applications 
リンク


BP109: Sametime Voice and Video in the Real World



BP110: Mastering Your Logs, Everything You Should Know about Logging in IBM Domino


BP201 Creating Your Own Connections Confection - Getting The Flavour Right 



Connections Directory Integration: A Tour Through Best Practices for Directory and Security Integration With IBM Connections



BP204: Customizing the Connections Mobile App
Customizing the Mobile Connections App from Prolifics


BP205: There’s an API for that! Why and how to build on the IBM Connections PLATFORM



BTE101: Yes! You CAN Use Those Cool New Frameworks in Your Mobile Domino Apps!
リンク


BTE102: The Future of Web Development Write Once, Run Everywhere with AngularJS and Domino



BTE201: Working With External Users in IBM Connections 





HCL Software メールマガジンとブログの開設

IBM Collaboration News として配信されていたメールマガジンが、この度 HCL より新たなメールマガジン配信が行われるようです。 現在このメールマガジンへの登録の案内がホームページに掲載されています。 https://www.hcljapan.co.jp...