当ブログに掲載しているサンプルは、すべて利用者の自己責任という形でお願いします。
ただし、明らかな不具合がある場合、ご連絡いただければ、訂正記事を出します。
また、こちらのサンプルは、別のサイト等への公開、転載は一切禁止しています。
どうしてもと言う場合は、筆者にあらかじめご連絡ください。
記事そのもののリンクについてはご自由に行っていただいてよいです。

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

2018年5月20日日曜日

XPagesで色を選択してみよう その2

皆さん、こんにちは。
・・・気が付いたら5月も半分終ろうかという日付です。
どういうことでしょう!?

このままいくと、次に気が付くときは来年になっているかもしれません・・・
そんなことのないように気を引き締めていきましょう。

さて、今日もXPagesのお話です。

以前、XPagesで色を選択してみようという記事で、XPagesで色フィールドを取り扱ってみよう!という事を書きました。
この時、IEでは動かないですね・・・という残念な結論で終わりました。

FirefoxやChromeでやればいいよ!というのも一つの回答だとは思いますが、それでも企業によってはIEでないとダメだ!というのはあり得る話なので、「できない」という回答一択ではいかんでしょう。

ということで、今回はIEでもXPagesで色フィールドを利用できるようにする!というのがテーマです。

といっても、IEではtype="color"のHTMLタグが使えないことは、以下のサイトでも書いてあるように分かり切っています。
https://caniuse.com/#search=color

そこで、探したところ・・・ありました!
IEでも使える色選択ツール!
GitHub - bgrins/spectrum: The No Hassle JavaScript Colorpicker

これをXPagesに組み込んでみましょう。

まずは、こちらからプロジェクトをダウンロードしてきて、
"spectrum.js"と"spectrum.css"を入手します。
この2つのファイルをXPagesアプリにインポートします。
CSSファイルは普通にリソースの「スタイルシート」でインポートしましょう。
JSファイルはリソースの「ファイル」で[ファイルリソースのインポート]でインポートしてください。

このライブラリですが、jQueryプラグインです。そのため、XPagesにjQueryを導入する必要があります。
今回は9.0.1 FP10(FP8以降)を使いますので、 アプリケーションのテーマに「bootstrap3」を選択して、jQueryを使えるようにします。
アプリケーションのテーマにbootstrap3を選択

次にXPageを作成して、カラーピッカーを設置します。
カラーピッカーはinputタグを配置して行います。
HTMLでは

のように書けばよいのですが、ここはXPagesの編集ボックスコントロールを使ってやってみましょう。




大事なのは、"colorpicker"というところです。
HTMLでは、idにセットしていますが、XPagesではstyleClassにセットしています。
XPagesとjQueryは組み合わせて使うには少しばかり癖があるので、styleClassにしておいた方が良いのです。
なお、"colorpicker"という値は任意ですので、適当につけてもOKです。

さて、今度はこのinputタグに対して、カラーピッカーを設定します。
これは専用のjavascriptを記述することで実現できます。
XPagesの場合、「出力スクリプト」コントロールを利用します。
そのvalueプロパティに以下のjavascriptを記述します。

$( '.colorpicker' ).spectrum({
    flat: false,
    showInput: true,
    showPalette: true,
    showInitial: true,
    preferredFormat: "hex",
    hideAfterPaletteSelect: true,
});


最初の「$('.colorpicker')」というところが、jQueryで、クラスに"colorpicker"という値が設定されているタグを検索するというものです。

これで完成です。
実際の画面がこちらになります。
IEでのカラーピッカー

HTML5で実現したカラーピッカーとは少し異なった画面になっていますが、きちんと色が選択できるのが分かっていただければOKです。

選択した値は、上記の設定では16進数(RGB形式)で返されます。
返ってきた値はそのままでは利用できませんが、
上のjavascriptの中にchange:function({関数}) を追記することで、他のフィールドにセットさせて、Notesの文書として保存させることが可能です。

この辺りは是非チャレンジしてみてください。

これでXPagesでもブラウザを気にせずに、色の選択が自由に行えるようになったと思います。

色をどのように使うかは、皆さんで色々考えてみてくださいね。




それでは今日はこの辺で・・・


Notes/Dominoで困ったことがあれば、弊社にお問い合わせください。
IBM Championの私が承ります!
お問い合わせはこちらから→Lotus Notes/Domino カスタマイズとセキュリティ強化 - 株式会社エフ

0 件のコメント: