2014年11月19日水曜日

XPagesDay2014 B-2 POI4XPages を使ったWord・Excelへの簡単エクスポート!

みなさん!XPages開発してますか?!

2014年11月18日-19日にわたって開催された、XPagesDay2014、みなさん参加されましたか?

私も1セッションを講師として担当させていただきました。上の表題のやつですね。

スライドの資料がほしい、という方もいらっしゃると思うんで、Slideshareにアップしておきました。

是非ご参考になさってください。

また、内容に関してご質問がある場合、ここにコメントを改訂tだければ出来る範囲でお答えします。

2014年7月30日水曜日

Domino Designer で Less to CSS!

みなさん!XPages開発していますか!?

はい、お久しぶりです。しばらくサボってました。すみません。

OpenNTFで非常に便利そうなものを見つけたので紹介します。

LESS CSS Builder for Domino Designer

OpenNTFでLESS  CSS  Builder  for  Domino  Designer  のプラグインが公開されています!

Domino Designerでは、これまでlessのエディタがなく、編集できませんでしたし、当然コンパイルもできませんでした。

このプラグインを入れると、Lessの編集ができ保存時に自動的にCSSの生成を行ってくれます。

いままでは、私はオンディスクプロジェクトで出力したファイルをSublimeTextを使ってLessファイルを編集していたのですが、そんな必要も無くなりそうです。

そもそも Less ってなに?

という人もいると思うので、ちょっと解説。

CSSをメンテンナンスしていると、ローカルルールに従ってセレクタの親子関係を綺麗に整えたりしようとするのですが、複数人で編集したりCSSが長大になると把握が非常に難しくなって、結局非常に煩雑なり、とても人様にお見せできないものが出来上がってしまうことがよくあります。

また、たとえば色調を統一したいのですが、あらゆるところに色コードを書かざる得ないので、一括の変更などが難しいです。

そんなCSS格闘家の救いとなるのがLessなのです!

Lessの特徴

  • セレクタを階層構造で記述できる!
  • ミックスインで、複数のスタイル指定を定義できる!
  • 変数が利用できる!
  • コンパイラが構文エラーを教えてくれる!
  • 複数のファイルに分割して編集->1つのCSSにコンパイルできる!

どうです?これ聞いただけでもよだれ出てきません?私は出てきました。じゅるるん♪

でも一から勉強するのも大変・・・ということはありません。LessはCSSの仕様を拡張している、つまりCSSとしても書けるので、CSSを知っていればLessをマスターするのも容易いです。

ちなみに、同様なCSS生成(コンパイラ)ツールにSassというのもあり、どちらかと言えばSassの方が主流かな?と思いますが、Lessでも十分な効果を実感できると思いますよ!

Domino Designer にプラグインを導入しよう

Lessの使い方はあとに回して、まずはプラグインを導入しましょう。

Eclipseのプラグインとして配布しているので、まずDesignerのプリファレンスで「Eclipseプラグインのインストールを有効にする」にチェックを入れておきましょう。

イメージ

こちらから"xspless-r1.zip"ファイルをダウンロードして、適当なところに展開します。

Designerのメニュー[ファイル]-[アプリケーション]-[インストール]をクリックします

イメージ

「インストール/更新」のダイアログでは、"インストールする新しフィーチャーの検索"を選択して[次へ]を押します。

イメージ

「アプリケーションのロケーション」のダイアログでは、[フォルダー・ロケーションの追加]をクリックして、上で展開したフォルダの中の"org.openntf.xsp.less.builder.update"のフォルダを選択します。

イメージ

「ローカルサイトの編集」ダイアログでは、そのまま次へを押します。

イメージ

「更新」のダイアログでは、すべてのチェックボックスにチェックを入れて[次へ]を押します。

イメージ

「インストール」のダイアログでは、ライセスの内容をヨクヨンデ(棒)"使用条件の条項に同意します"を選択して[次へ]を押します。

イメージ

ライセンスは Apache License v2.0のようですね。

「インストール」のダイアログで[終了]を押すと、インストールが実施されます。

イメージ

途中このようなダイアログが出てきたら、自己責任で"このプラグインをインストールする"を選択してください。

インストール処理が完了し、Domino Designerを再起動したら完了です。

Domino DesignerでのLessの使い方

Designerでアプリケーションを開いて、[リソース]->[スタイルシート]にファイルを追加します。ファイル名の最後には必ず".less"をつけます。ここでは"style.less"とします。

"style.less.css"のように勝手に".css"がつきましたが気にしないでください。

アプリケーションのタイトルのところで右クリック->[Add/Remove LESS CSS Nature]をクリックします。すると"style.css"というのができたと思います。

イメージ

これで準備OK!早速 Less の機能を試してみましょう。

Lessを書いてみる

ここではLessの機能について簡単に説明します。詳しくは、本家サイトで確認してくださいね。(^^;

セレクタをネスト化できる

下のコードを"style.less.css"に書いて保存します。そして"style.css"を開くとCSSのコードが書かれているはずです。

less:


div.header{

    font-size: 16pt;

    h3{

        color:red;

    }

}

CSS:


div.header {

    font-size: 16pt

}

div.header h3 {

    color: #f00

}

どうです?簡単でしょ。セレクタが階層構造で記述できるので、整理が非常にしやすくなりました。

実際にはCSSは、ミニマイズされ1行になっていると思います。ミニマイズが嫌な場合は生成されたCSSを[ctrl+shift+F]で整形してくださいね。

変数と計算が使用できる

Less:


@ThemeColor: red;

@HeaderColor: @ThemeColor + #055;

@TableBorderWidth: 3px;

div.header{

    background-color: @HeaderColor;

    font-size: 16pt;

    border-bottom: @TableBorderWidth;

    h3{

        color: @ThemeColor;

    }

}

div.sideBar{

    background-color: @ThemeColor + #099;

}

CSS:


div.header {

    background-color: #f55;

    font-size: 16pt;

    border-bottom: 3px

}

div.header h3 {

    color: #f00

}

div.sideBar {

    background-color: #f99

}

色やサイズを変数で定義できます。また、数値はもちろん、色の計算もできちゃいます。

テーマカラーを変数で定義しておいて、それを元に演算で各エレメントの色を決めておくと、イメージカラーの変更がすごく容易になります。

色変換に関してはビルドインの関数が多数あるので、本家サイトで確認してください。

ミックスインで同じ定義を使いまわす

Less:


.button-temp(@bgaddcolor){

    background-color: @ThemeColor + @bgaddcolor;

    border: 1px solid #999;

    font-size: 10pt;

    font-weight: bold;

}

button,a.button{

    .button-temp(#ccc);

}

button:hover,a.button:hover{

    .button-temp(#999);

}

CSS:


button,a.button {

    background-color: #fcc;

    border: 1px solid #999;

    font-size: 10pt;

    font-weight: bold

}

button:hover,a.button:hover {

    background-color: #f99;

    border: 1px solid #999;

    font-size: 10pt;

    font-weight: bold

}

あたかも関数のような振る舞いが実現できます。

Lessがものすごく強力なのがお分かりいただけましたか?

最後に

ここで紹介したLessの機能はごく一部です。本家サイトで確認して、いろいろな機能を試してみてください。

2014年2月27日木曜日

連載:ちょっとディープなXPages LotusScript vs JavaScript 演算子

赤字で補足・修正しています。

みなさん!XPages開発していますか!?

前回JavaScriptは一旦やめて~みたいなこと行っておきながら、やっぱりJavaScriptです。

とはいえ、これまではJavaScriptのちょっと高度な使い方だったんですが、今回からはこれまでNotes/Domino開発を行ってきた人向けに、これまでとXPagesとの違いを比較しながら進めていきたいと思います。

これまでのNotes開発では、@式やLotusScriptでコーディングしてきました。XPagesになってほぼJavaScriptオンリーになって、戸惑う方も多いでしょう。フォームWebでもクライアントJavaScript書きますけど、ガッツリ書くことはあまりなかったでしょうし。

そこでまずは、LotsuScript VS JavaScript と題してこれらの比較を何回かに渡って説明していきたいと思います。

VS といっても優劣を比べるわけではないので、あしからず。

演算子

四則演算子

  LotsuScript JavaScript
加算 + +
減算 - -
乗算 * *
除算 / /
剰余 mod %
整数除算 \ (なし)

乗除について、何も変わらないですね。(文字連結については違いが有ります。後述しています。)

剰余については、"mod" が "%" になります。

整数除算については、JavaScriptにはありません。LotusScriptの整数除算は式を処理する前に両方の数値と、結果が少数切り捨てで整数に丸められるので、JavaScriptではMath.floor()関数を使用して変換する必要があります。


//整数除算の例

var a = 2.5,

    b = 9.2,

    c = Math.floor(Math.floor(b) / Math.floor(a));

print(c); // 4

インクリメント・デクリメント演算子

これは数値に1を加算または除算するためのものです。これはLotusScriptには無いですね。

  LotsuScript JavaScript
1を加算 (なし) a++
++a
1を減算 (なし) a--
--a

++や--が前につくのと後に着く物がありますが、どちらもaに1を加減するのには変わりないですが、計算されるタイミングが異なるので、注意が必要です。

演算子が前についた時は、その行を処理する前に加減され、演算子が後につくとその行が処理された後に加減されます。


var a = 0;

var b = ++a;

print(a); // 1

print(b); // 1

a = 0;

var c = a++;

print(a); // 1

print(c); // 0 <--注意!

べき乗

LotusScriptには、"^"があるんですが、JavaScriptにはありません。JavaScriptでは累乗を Math.pow() の関数があるので、それを利用します。

  LotsuScript JavaScript
べき乗 ^ (なし。ビルドイン関数"Math.pow(基数, 指数)"を使う。)

文字列結合

  LotsuScript JavaScript
文字列結合 & +

LotusScriptでは、"&"を使って結合しますが、JavaScriptでは数値の加算と同じ"+"を使用します。

演算子の左右の方が、数値,文字のように異なっている場合は、文字に変換されるので注意が必要です。


var a = 1,

    b = "1",

    c = a + b,

    d = b + a;

print(c); // "11"

print(d); // "11"

// 演算子の右左に関係なく文字に変換される

比較演算子

  LotsuScript JavaScript
等価 = ==, === (厳密)
不等価 <> !=, !== (厳密)
未満・より大きい <
>
<
>
以下・以上 <=,=<
>=,=>
<=
>=

JavaScriptでは、等価・不等価は"==","===","!=","!=="を使用します。うっかり"="を使用すると「代入」の意味になり、比較結果として"true"になってしまいますので、注意が必要です。

また、"=="と"===", "!="と"!=="の違いは、左右の値の方が違う場合、"==","!="は自動的に数値に変換して比較しますが、"===","!=="は型変換せずに比較します。


print( 1 == "1"); // true

print( 1 === "1"); // false

print( 1 != "1"); // false

print( 1 !== "1"); // true

「以上」「以下」はJavaScript LotusScript では"<=","=<"(">=","=>")どちらでもOKでしたが、JavaScriptでは"<="(">=")しか使用できません。

代入演算子の短縮表記

これもJavaScriptにしか無いものですね。変数自身に値を代入することができます。

数値のみではなく、文字列結合にも使えます。


var a = 1;

a += 2; // a = a + 2 と等価

print(a); // 3

a -= 4; // a = a - 3 と等価

print(a); // -1

a *= 3; // a = a * 3 と等価

print(a); // -3

a /= -3; // a = a / -3 と等価

print(a); // 1

var b = "hoge";

b += "hoga"; // b = b + "hoga" と等価

print(b); // hogehoga

条件演算子

これもJavaScriptにしか無いものです。

if の条件文と同様な意味がありますが、値を返す式になります。

(条件式) ? (trueの場合の値) : (falseの場合の値) という形になります。


var a = 1,

    b;

b = a === 1 ? "hoge" : "hoga";

print(b); // "hoge"

論理演算子

  LotsuScript JavaScript
論理And And &&
論理OR Or ||
否定 Not !

JavaScriptで"&&","||"を"&","|"としてしまうと、ビット演算子になるので注意です。

最後に

JavaScriptの演算子はまだ他にありますが、今回はよく使う演算子のみに絞って紹介しました。

次回は、文字列に関する関数についてLotusScriptと比較をしてみます。

海老原 賢次(EBIHARA Kenji)

リコーITソリューションズ株式会社(RICOH IT SOLUTIONS CO.,LTD.)

鹿児島ソリューション部(Kagoshima Department)

 

2014年2月11日火曜日

連載:ちょっとディープなXPages 第2-10回~JavaScriptをもっと知ろう

みなさん!XPages開発していますか!?
今回は、JavaScriptの継承として利用される、メソッド拝借と、その際に必要となるクロージャについて説明します。

メソッド拝借

メソッド拝借とは、コンストラクタ関数やオブジェクトを定義するときや、既存オブジェクトの処理のために、他のオブジェクトの関数を使ってしまおう、ということです。
あるオブジェクトのメンバーをまるまる継承する場合には、以前に説明したprototypeミックインを行えばいいのですが、1,2個の関数だけを使いたい、または、一時的に関数を利用したい場合には、すべての継承するのは少々大げさですよね。
Javascriptでの関数は、オブジェクトの依存度が低く、変数のように持ち運べる手軽さが有ります。メソッド拝借ではこれを利用します。

オブジェクト定義によるメソッド拝借

まずは、オブジェクト定義のときに拝借するパターンを見てみましょう。
//貸す側
var a = {
    name : 'A',
    getName : function(keisho){
        return this.name + ' ' + keisho;
    }
};
//借りる側
var b = {
    name : 'B',
    getName : a.getName //メソッド拝借
};
//結果
print(a.getName('さん')); // "A さん"
print(b.getName('さん')); // "B さん"
実装方法は、bオブジェクトで、aの関数を = で渡すだけ。非常に簡単です。
ここで注目すべきは、a.getName 関数内の this です。一見するとこの this は、a オブジェクト内で宣言されているので、this.name は常に'A'を返すように思われます。
しかし、this は実行時に評価され、何のオブジェクトの中で呼ばれたかによって動的に変わります。
この例ではこの this の特性を活かして有効に利用していますが、この特性を理解せずに無差別に this を利用していると、痛い目にあうことが多いので注意しましょう。

コンストラクタ関数でのメソッド拝借

コンストラクタ関数でのメソッド拝借も、オブジェクト定義の場合と同じです。
//貸す側
var a = function(){
    this.name = 'A';
    this.getName = function(keisho){
        return this.name + ' ' + keisho;
    };
};
var _a = new a();
//借りる側
var b = function(){
    this.name = 'B';
    this.getName = _a.getName; //メソッド拝借
};
var _b = new b();
//結果
print(_a.getName('さん')); // "A さん"
print(_b.getName('さん')); // "B さん"
注意すべき点としては、この場合お a はコンストラクタ関数なので、それ自身に getName 関数は持っていません。そのため、それから生成したオブジェクト(_a)から継承する必要があります。
また、この例ではクロージャを意識する場合があります。
//貸す側
var a = function(){
    var name = 'A';
    this.getName = function(keisho){
        return name + ' ' + keisho;
    };
};
var _a = new a();
//借りる側
var b = function(){
    var name = 'B';
    this.getName = _a.getName; //メソッド拝借(できてない)
};
var _b = new b();
//結果
print(_a.getName('さん')); // "A さん"
print(_b.getName('さん')); // "A さん" <--注意!!!
この例では、name をプロパティではなく、内部変数にしています。そうすると、_b から _a.getName を呼び出しても、その関数の内部の name は _a のものを参照します。
name が宣言されるのはコンストラクタ関数で、ここを通るのは new a() した時だけです。一見すると name のスコープはコンストラクタ関数内なので new a() の処理が終わった段階で name は無くなりそうです。
しかし、name が getName 内で使用されているために、コンストラクタ関数が終わった後も name 変数は生き残ります。
これが、Javascriptにおけるクロージャの仕様です。
こういった間違いをなくしたり、a の定義から継承したければ、a の宣言で prototype を利用するとよいでしょう。
//貸す側
var a = function(){
    this.name = 'A';
};
a.prototype = {
    getName : function(keisho){
        return this.name + ' ' + keisho;
    }
}
//借りる側
var b = function(){
    this.name = 'B';
    this.getName = a.prototype.getName; //メソッド拝借
};
var _a = new a();
var _b = new b();
//結果
print(_a.getName('さん')); // "A さん"
print(_b.getName('さん')); // "B さん"
prototypeはメンバを持つオブジェクトであり、これではクロージャの入る余地はありません。また、b の宣言に、a から new したオブジェクトが必要ないので、間違いがありません。

既存オブジェクトでのメソッド拝借

つぎは宣言ではなく、実行時に拝借するパターンを見てみましょう。
//貸す側
var a = {
    name : 'A',
    getName : function(keisho){
        return this.name + ' ' + keisho;
    }
};
//借りる側
var b = {
    name : 'B'
};
//結果
print(a.getName('さん')); // "A さん"
print(a.getName.call(b,'さん')); // "B さん" <--メソッド拝借
bオブジェクトは、getName 関数を持ちません。そこで、call関数を利用します。
call関数は、すべての「関数」が暗黙的にメンバーとして持つ「関数」です。
関数が関数を持つのは違和感があるかもしれません。
Javascriptでは、関数もオブジェクトで、functionで関数を定義すると、内部ではJavascriptのビルドインオブジェクト Function を継承して関数オブジェクトが生成されます。そのFunction が call 関数を持っているため、すべての関数が call 関数を持つわけです。
call関数は、その関数を実行する機能を持ちますが、 第1引数には、その関数を実行するときの this となるオブジェクトを指定ます。第2引数以降はその関数の引数を続けます。
よって上の例では、「 this を bとして、a.getName を実行しなさい」という命令になります。

次回以降は

Javascriptについては、一旦ここで締めます。なんか、JavascriptばっかりでXPagesの話してないので。
色々と考えたんですが、これからは中級者向けというより、これまでのNotes技術者のための解説をしていこうかなと思ってます。
LotusScript vs Javascript とか、NotesフォームとXPagesの違い、と言った観点ですかね。
近頃記事の更新間隔が開いているので、次回はもっと早く書きますスマイル
海老原 賢次(EBIHARA Kenji)
リコーITソリューションズ株式会社(RICOH IT SOLUTIONS CO.,LTD.)
鹿児島ソリューション部(Kagoshima Department)

2014年1月22日水曜日

XPages開発におけるGit/GitHubの利用

先日九州Notesパートナー会で行った勉強会の資料を公開します。

Gitクライアントとして、TortoiseGit を利用した場合の解説です。

Let's バージョン管理!