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

テクてく 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 カスタマイズとセキュリティ強化 - 株式会社エフ

2018年5月18日金曜日

10進数と16進数の相互変換を考えてみよう

久しぶりの投稿です。
今日は簡単なtipsです。できないと困ることだったので備忘録的に載せておきます。

10進数から16進数への変換やその逆を行いたいということがあります。
当ブログでもいくつか記事を載せています。
16進数を10進数に変換する関数を自作してみた
x進数を10進数に変換する関数
数値をx進数に変換してみる

ただ、今回はこれらを「XPages」(というかjavascript)で行いたいと思ったんです!そういう時ってありますよね?・・・あるんです。



そこで調べたところ、あっという間にわかってしまいました・・・
そのまま載せてしまっても芸がないので、
SSJSでもできるのかどうかの検証を行いつつ、その結果を載せることにしましょう。

まずは、10進数から16進数への変換について。
こちらに掲載されています。
Number.prototype.toString()

Number([数値]).toString(16);

[数値]は入力した値で、toString()の引数の"16"がx進数のことを表しています。

次に、16進数から10進数への変換について。
こちらも掲載されていますね。
parseInt()

parseInt( [数値], 16 );

[数値]は入力した値で、16は入力された値は16進数であることを意味しています。


あとは検証です。
こんな画面を作ってみました。
XPagesの検証画面

入力用は、「inputData1」というIDの編集ボックス
出力用は、「outputData1」「outputData2」というIDの計算結果フィールド(小数点を出したくなかったので、文字列と数値(整数)の2つを用意しています)
を配置してあります。

「10進数から16進数への変換」のボタンの式は
var dtInput  = getComponent( "inputData1" ).getValue();
var dtOutput = Number(dtInput).toString(16);
getComponent( "outputData1" ).setValue( dtOutput );


「16進数から10進数への変換」のボタンの式は
var dtInput  = getComponent( "inputData1" ).getValue();
var dtOutput = parseInt( dtInput, 16 );
getComponent( "outputData2" ).setValue( dtOutput );


としてあります。

実行結果はこちら。
16進数の「C0」を10進数に変換

はい。こんな感じで、変換できました。
JavaScriptですが、SSJSでも動くことが分かっていただければ幸いです。


何に使うかは・・・どうぞ想像してみてください。
色々ありますよね。







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


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