XPagesでIEの互換表示ではなくIE８に強制表示する方法

ie日頃から”IEはこの世界から消えてなくなれ” と考えている私ですが、仕事ではやはりIEでのサポートが必須である場合がほとんどで、時に開発者として「IEさえなければ、IEさえなければ・・・」などとブツクサいいながらIEの下位バーションでテストを行っていたりします。

そんなIEですが、IE8ぐらいになってくるとかなりJavascriptやCSSのサポートが幾分マシになってきます。 しかしIE8から次に厄介な問題としてIEの互換表示という機能があります。

IE8で動作するように開発したページなのに、クライアントから「なんかレイアウトが崩れているんですけど・・・」なんて電話が、、、よくよく調べてみるとIE8互換表示モード（IE７）でブラウジングしていたのが原因だった、なんてケースです。 （消えてなくなれIE! ）

IE8が出た当時は下位互換への救済措置だったりしたわけですが、IE11の今のご時世では混乱を招くもとになっているばかり。

前置きが長くなりましたが、今回の本題、

XPagesでIE８互換表示ではなくIE８に強制表示する方法

まず、状況の整理をすると、IE8で表示できるように開発したページであってもIE8互換表示で表示されることがあります。

[list_marked]

  • IISから指定されている
  • イントラのグループポリシーで設定されている

    • [/list_marked]

    というような場合です。 また嵌りやすいのがIE8はデフォルトで、”互換表示でイントラネットサイトを表示する”にチェックが入っているという点です。

     こういった場合、一般的にWEB開発者は

    [list_marked]

  • DOCTYPE宣言で指定
  • metaタグで指定
  • web.configなどのHTTPレスポンスヘッダーで指定

    • [/list_marked]

    という方法でIE８互換表示ではなくIE８に強制表示させるようです。

    ここではXPagesをつかってHTTPレスポンスヘッダ-を直接操作する方法を書いてみます。

    以下のコードをXPageのbeforeRenderResponse イベントに記載します。

    var exContext = facesContext.getExternalContext();
var resp = exContext.getResponse();
resp.setHeader("X-UA-Compatible", "IE=8");

    こうすることで描画をIE8で強制的に表示することが可能になります。

    xpagesのbeforeRenderResponse画面

    また、特定のIEのバージョンに限って制御を行いたい場合、以下のように context.getUserAgent() を使って制御文を書くことが出来ます。

    if (context.getUserAgent().isIE(8, 8)) {
  var exContext = facesContext.getExternalContext();
  var resp = exContext.getResponse();
  resp.setHeader("X-UA-Compatible", "IE=8");
}

    ここでは、「IE8の場合からなず互換表示ではないIE8で動作させる」としています。

    なお、IE8でどのモードで描画しているのか確かめるためにはF12を押して開発者ツールを立ち上げて確認できます。

    IE8互換モードの切り替え画面

    IE互換表示の対応で苦戦している人は是非上のコードを試してみてください。

    by ktatsuki

    XPagesでJSONをパースしよう、 fromJson関数の使い方

    今更聞けないJSONって何？

    JSON（ジェイソン、JavaScript Object Notation）は軽量なデータ記述言語の1つである。構文はJavaScriptにおけるオブジェクトの表記法をベースとしているが、JSONはJavaScript専用のデータ形式では決してなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しに使えるよう設計されている。

    引用：Wikipedia

    論より証拠。 JSONってこんな形式です。

    [
    {
        "勇者": [
            "隼の剣",
            "光の鎧"
        ]
    },
    {
        "格闘家": [
            "鉄の爪"
        ]
    },
    {
        "魔法使い": [
            "いかづちの杖",
            "水の羽衣"
        ]
    }
]

     Javascriptのオブジェクトの表記法と配列を組み合わせてとってもシンプルにデータ格納してしまおうということですね。正直、開発者にとってはXMLよりJSONのほうが好きな人のほうがおおいんじゃないでしょうか。

    さて、ここから本題です。

    XPagesのサーバーサイドJavascriptでJSONをパースするには

    SSJSってサーバーで動くJavascriptだよね、だったらJSONもJavascriptのフォーマットだし扱い得意だよね、と当然思う方も多いと思います。

    実際、XPagesではJSONをパースさせるのに幾つか方法があるようです。

    1. eval() 関数を使う。 XPagesの標準関数であるeval()を使ってお手軽にパースすることができます。こちらの例ではビューのカラムに表示させるコンテンツを文書毎にもつJSONのフィールドから一度パースして表示させています。 中々軽量でいいと思います。
    2. XPagesに標準で実装されているランタイムライブラリ、com.ibm.commons.util.io.json を使う。これはほぼJavaよりのソリューションになりますが、JsonJavaFactory、JsonParser、Iterator 等を使いパースしていきます。 より高度なJSONデータを扱う必要がある場合には適していると思います。例はこちら
    3. fromJson() 関数を使う。なんとXPagesには標準でfromJson() 関数なるものが存在していました。 これを使えば簡単にSSJSでJSONをあつかえるようになります。

    今回は(3)のfromJson() 関数の扱い方について書いてみます。

    Domino Designerのヘルプに乗ってない ！？

    まずこの関数ですが、Domino Designer （バージョン9時点）のヘルプに載ってません。 もう一つJson形式のObjectを文字列に変えるtoJson() 関数も用意されていますが、どちらも載っていません。

    Domino DesignerのSSJSの補完機能を見る限り、

    fromJson(str:string) any

     となり、 strのパラメーターにJSONフォーマットに則した文字列を渡してやると、Javascript Object形式で値が帰ってきます。

    Objectから以下のように値を参照できます。

    var strJsonSimple:String = '{"name":"apple","color":"red","num":"10"}';
var jsonObjSimple = fromJson(strJsonSimple);
return jsonObjSimple.name;

    しかし、この場合（青文字の部分）はObjectに"name"という変数（属性？）があるということを前提にプログラミングされています。

    実際は、JSON文字列がObjectになった後、変数もその値もわからないこともあると思います。

    その場合、Javascriptでfor-in文による繰り返しで回してやれば値の取得が可能になります。

    例として、冒頭で上げたJSONをXPagesでパースして表示しているサンプルを掲載します。 Objectに配列を持つという組み合わされた構造のJSONを以下のようにパースしています。

    var strRet:String = "";
var strJson:String = '[{"勇者": ["隼の剣","光の鎧"]},{"格闘家": ["鉄の爪"]},{"魔法使い": ["いかづちの杖","水の羽衣"]}]';
var jsonObj = fromJson(strJson);

for(var char_num in jsonObj){

	var charEntry = jsonObj[char_num];
	for(var char_name in charEntry){
		strRet += "キャラクター"+char_num+": "+ char_name +"
";

	    var charEquipment = charEntry[char_name];
	    var equipments = @Explode(charEquipment, ",");
		for (var k = 0; k < equipments.length; k++){
			strRet += "  装備"+(k+1)+" = "+equipments[k]+"
";
		}

	}
}
return strRet;

    計算結果フィールドに入れた結果はこんな感じです。

     fromJson

    by ktatsuki