スポンサーサイト

--年--月--日 --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

DWA: Internet Explorer Toolbar のDOM インスペクタ機能を使う

2008年12月17日 00:50

WEBアプリの開発者で、DWA の設計に興味を持って、自力でFormsX.nsf を(Xの部分はバージョンによって違います)を開いて設計解析をしようとして挫折された方は多いのではないのでしょうか?

 僕自身調査時に設計を見ることはありますが、見ていて結構つらいな、て思うことも多いです。
で、問題毎にどこを調査の糸口にするか?ですが、やはり該当タグのID名やCSS用のクラス名などを調べることを調査のとっかかりにしたい、という方は多いのではないでしょうか。

今日紹介するには以下のツールです。名前のとおりInternet Explorerのプラグインなので、マイクロソフト社様から提供されているものです。このようなDOM インスペクタを使うと、表示された画面から構造解析を行うのでJSファイルなどが複数に分割されているサイトやJavaScriptなどを使ってダイナミックに表示しているページが多数ある場合にはかなり効率がよくなります。

Internet Explorer Developer Toolbar

ツールバーをインストールするとツールバーに矢印アイコンが現れるようになると思いますが、このツールバーアイコンをクリックして解析を行います。 (IE7で確認していますが、IE6.x などでアイコンが違ったらすみません。。)

実際僕が主に使う機能は二つだけで、「Elementの検索と表示」(DOM Inspector)と「選択部分のHTMLソースの表示」だけです。使い方も簡単なので、ここでも紹介してみます。
(スクリーンショットはサムネイル表示にしているので、クリックすると拡大します。)

1. エレメントの選択
 はじめに、興味のあるエレメントを選択する必要があります。
キーワード検索なども出来るのですが、ここではマウスでクリックしてエレメントを選択するために「Select Element By Click」を選択し、該当のエレメントをクリックしてください。
 このとき、コンテンツにカーソルが移動するとエレメントを移動するたびに青枠のようなものが表示されるのが分かると思います。
以下の画面ショットも参考にしてください。
エレメントの選択

2. エレメント情報の表示
 選択すれば、以下の画面ショットのようにエレメント情報が表示されるようになります。
赤太枠が選択されたコンテンツ、左下にある青太枠がDOMの構造情報、緑枠が選択エレメントの属性に関する情報です。属性は編集可能なので簡単なデバッグも出来ます。

詳細情報の表示

3. 選択HTMLソースの表示
 次にこの部分のHTMLソースを表示してみましょう。以下のように[View]-[Source]-[DOM (Element + Styles) ]を選択します。(エレメントは上のステップですでに選択済みであるとします。)

選択要素のHTMLソース表示


4. 表示されたHTMLソース
 ブラウザの機能でHTMLソースを見ると、CSSの情報とか見つけづらいですが、ここでは一緒に表示されるので便利です。
こんな感じ。
表示されたHTMLソース

DWA以外のコンテンツでも役に立つと思うので使ってみてください。
あと、ひとつだけ注意点ですが、どうもこのプラグインが原因でブラウザがハングアップするケースがあったので、開発用のマシン以外にはむやみに入れないほうがいいんじゃないかな、て思います。
(プラグインの問題についてもここ何回かかけて記事にしていこうと思っています。)


関連記事:
MS、無償のWeb制作者向けIEプラグイン「Internet Explorer Developer Toolbar」正式版公開
スポンサーサイト

ブラウザプラグインの問題を調査する(IE7のプラグインなし起動)

2008年12月18日 00:32

DWAを使用しているとよく分からないところでハングアップする、と言うので色々調べてみたらブラウザプラグインの問題だった、と言うことが増えてきました。

ブラウザのツールバーとかを制限している会社でもデフォルトで入っているものも多いので、それだけで結構な数のプラグインが導入されています。 「1つ1つ無効にしていってください」と言ってもなかなか思うように調査も進まず、困ってしまう事が多く、プラグインが特定されないと再現性も得られないので非常に厄介な問題の一つです。

プラグインの問題切り分けについては後日また触れたいと思うのですが、このような問題調査のためにIE7から「アドオン無しのIE起動」が出来るようになりました。これは切り分けのFirst Stepとしてかなり有効なのではないかと思います。

スタートメニューから[すべてのプログラム]-[システムツール]-[Internet Plorer(アドオンなし)]を選択するとアドオン無しで起動します。

これが面倒な人は、スタートメニューから「iexplore.exe -extoff」 を指定しても実行できます。
是非利用してみてください。

DWA と UTF-8

2009年01月30日 01:44

 DWAはUTF-8で使うほうが相性がいい、と言うのは Lotus Domino 7.x くらいからサポート内でも言われるようになってきたのですが、この度開発などからも多言語の利用を前提に考えた際にUTF-8 でないとブラウザなどのバグなどもあるために正しく動かない可能性がある、と言う主旨の言質も得られたため、以下のような文書を発行することになりました。

Lotus Domino Web Access における Web サーバーの文字セットの指定について (文書番号 #732292)

日本のお客様はやはりWeb サーバーの文字セットはShift-JISまたは EUCであるべきだ、と言う方も多く、デフォルトではUTF-8が無効になることもあってこの内容には抵抗があるのではないか、と言う事もあり、わざわざ言う必要は無いのでは?と言う意見もあったのですが、やはり以下の点を考慮してはっきりお伝えしておく必要があるだろう、という結論になりました。

・ UTF-8 を有効にしていればヒットしないダブルバイト関連の問題の増加
・ UTF-8 を有効にしないとブラウザのバグなどにもヒットしてしまうため修正出来ない問題の発生
・ コンテンツを発行する側になる通常のWebサーバーと違い、他のシステムからデータを受け取ることが前提のメールシステムで「日本語文字しか絶対に扱わない」とすることの難しさ


特にこれからDWAを利用する予定がある、と言う方は可能な限り計画の段階でUTF-8の設定で利用することを考慮したほうがよいのではないかと思います。

DWA の Obfuscation について

2009年02月16日 00:29

よくDWAのFormsX.nsf は「設計を読めなくしている」と言われる事があります。少なくとも、Lotus Domino 7.x 以降についてはこの表現は適切ではありません。
デザイナーで開くと、確かに改行も無くJavaScriptのコードが並んでいて読みにくいのですが、これは改行をなくしたり、関数や変数名を短くすることによってコードサイズを小さくする「Obfuscation」と言われるJavaScriptの最適化を行っているためです。パフォーマンス向上のために行った措置によって結果として読みにくくなっただけで、コード自体を読めなくするような措置をしているわけではありません。
 よくObfuscationの事を日本語で「難読化」と表現している人も見かけますが、これもObfuscation があたかもコードを読みづらくするための技術であるかのような誤解を与える表現のような気がします。

6.5.x以前のFormsでは、確かに一部読めない部分がありました。
これは、たとえば Forms6.nsf を見てみると、Base64エンコードされた文字列が並び、実際にデコードしてみても意味のある文字列が現れず、解釈不能な部分がありました。これは、@関数をコンパイルした形式で格納していたためで、Obfuscationとは全く異なる理由で読めなくなっていたのです。

 通常Obfuscationは機械的に行うのが普通で機械的に行った場合、元の関数名(変数名) → 短くした名前のテーブルを生成します。
 このObfuscation List は Lotus Domino 7.x 以降はFormsX.nsfのファイルリソースにObfuscationList.txt と言う名前で同梱されているので興味ある方は一度見てみてください。

このあたりの詳細は以下のRedbookの3.1.1あたりにも詳細が記載されているので是非ごらんになってみてください。
Domino Web Access 7 Customization


 このRedbook は本当にDWAを勉強する上で参考になるので、またいつかここから記事を書こうと思います。

Lotus iNotes ウルトラライトモード (iPhone用)のデモページ

2009年02月17日 00:01

Ultralite のデモは何度か見た事があるのですが、フリック(指で払うような操作の事です)とかiPhone らしい操作まで含めて見た事は無かったので面白かったです。

8.5 からは iPhone 3G や別名をサポートしたので利用も増えるかもしれません。
2009/03/12 Updated : Ultaralite は別名をサポートしない事が分かりました。私の方もライト・モードの別名サポートと混同していました。大変申し訳ありません。





それと製品のデモなどがこのようにYouTubeなどで見れるのはいいですね。
このデモ自体が製品の簡単な使い方説明になっているので、技術者の人が見ても面白いのではないかと思います。

余談ですが、USではこういうマルチメディアを使用した技術情報などが増えてきています。
日本ではそれほどスピーカーで音を出しながら技術情報を見るってないのではないかなあ・・・と思ってしまうのですが、この辺は少し動向を見守っていこうと思っています。

DWA: すべては h_PageUI から

2009年02月19日 00:20

 DWA は、8.5 でだいぶPage Architetcure が変わりました。
他にも色々と改善されていて興味深いのですが、メールテンプレート、サーバーサイドモジュール、Forms Databaseが相互に補完しながらページを生成するDWAのPage Architecture は 8.x以前のものをよく知っておくのは重要だと思います。

R5.0.8 でDWAが出たときにはブラックボックスとなっていた部分が多く、Notesの思想から外れている、と言う批判も度々受けていたDWAですが、他のアプリケーションと同様に見える、とは言えませんが最近ではだいぶ色々な情報が出てきています。

※ サポートの観点からコメントしておくと、DWAのカスタマイズはリスクが大きいだけでなく、バージョンによってカスタマイズ内容なども大きく変わる可能性も大きく、バージョンアップごとに大幅な改修が強いられ、バージョンアップなどの大幅な工数増加につながることも多くあります。結果として対応や調査などが遅れる可能性もあるなどしますし、通常のメールテンプレート以上にカスタマイズをしない事を強く推奨しています。
 この辺の話はあくまで、Architectureに対する理解を深めるためのトピックとご理解ください。

さて、ページ生成の話は、先日紹介したRedbookが一番体系的にまとまっていると思うので、そこでもいいのですが、今日はSandboxから拾ってきた、Lotusphere 2007のプレゼンファイルから紹介します。

せっかくNotesから開く方法を昨日紹介したので、Notes URLで紹介しましょう。

Lotusphere 2007: AD304 - IBM Lotus Domino Web Access Customization
ブラウザからのURLは以下の通りです。
Lotusphere 2007: AD304 - IBM Lotus Domino Web Access Customization

さて、ここで見て欲しいのはPDFの26ページから始まる「h_PageUI Form synopsis」のトピックです。DWA のページは、ビューもフォームもすべてh_PageUI と言われる1つのページから生成されます。

DWA Page Architecture (8.x 以前)

ここから種々のビューやフォームを生成しています。
上の黄緑色の部分がSceneといわれるもので、Notesのフォームで言うFormフィールドのようなものなのですが、コンテキストに合わせて色々なページを生成していきます。

詳しく話すと切りが無いのですが、Formsを眺めてみるときに、この辺が分かっているだけでだいぶ理解しやすくなるのではないかな、と思います。
以前紹介したDOM Inspectorなどを使っても、一番上位にあるFORMタグが、h_PageUI になっているのが分かると思います。

DWA 警告/iNotes 警告 の変遷

2009年03月02日 00:15

今日はこのTechnoteから。

「Domino Web Access 警告:現在リクエストを処理できません」 が出力された場合のトラブルシューティングガイド (文書番号 730940)

DWA では、JavaScriptのランタイムエラーが出ると、DWA 警告(iNotes 警告)と呼ばれるダイアログが出て何らかのエラーが発生した事を通知します。
これは製品版のJavaコードでException発生時にスタックトレースを出力しないのと同じで、あまりデバッグ情報をエンドユーザーに見せないようにするための措置だったのですが、調査の際にはときどき困難な状況が発生する事も少なくありません。

このため、DWA警告の問題調査を行う際には、7.x以前の環境の場合、iNotes_WA_Debug=1 を設定して詳細情報を取得していました。Technoteで書かれているのもそのような情報採取の話です。

この設定は8.x以降は不要になり、8.5や、8.0.xのライト・モードではiNotes コンソールと言うのが用意され、ユーザーにダイアログ形式でランタイムエラーを通知する事はなくなりました。これは、iNotes 8.5 では大きな改善と言えるのではないかと思います。

 表示に影響が無い程度の問題であればユーザーオペレーションを妨げない表示になりますし、一つの問題で複数回ダイアログが表示されてしまう問題なども一つのエラー通知ですみます。
 更に、コンソール形式で出力されるので DWAでは難しかったトレース情報も得られるようになりました。

これによって何か新しい事が出来るようになるようなものではないですが、これもすばらしい改善なのではないかと思います。

iNotes Lite Framework - Frameset

2009年03月05日 01:33

 これから何回かに分けて以下のWiki で紹介された、Lotus iNotes Lite Framework の話を取り上げてみようと思います。

バックナンバー
1. iNotes Lite Framework - Frameset
2. iNotes Lite Framework - iNotes Lite Widgets
3. iNotes Lite Framework - Lazy loading code
4. iNotes Lite Framework - Basic Layout
5. iNotes Lite Framework - Common Property

すでに書かれている事をブログに取り上げるのは野暮に思えるかもしれないのですが、このエントリは8.5 以降(8.0.x系のライト・モード含む)のLotus iNotes を理解するためにもじっくり読む価値があるのではないかと思います。

iNotes Lite framework (Notes/Domino Wiki)

一応このブログでは「1つのエントリで話が終わらない記事」は出来るだけ書かないようにしているのですが、ここの話はChapter毎に話が切れているので何回かに分けてもそれほど違和感無いのではないかと思います。


今日はIntroductionの後の初めに書かれている、「Container for application-specific data and architecture 」と言う章について簡単に紹介したいと思います。

始めに、従来のiNotes はこの記事でも紹介したとおり、ビューもフォームも全て、1つのフォームからページを次々に重ねて表示するような仕組みを使っていました。

iNotes Lite framework ではより非同期にコードを読み込み、不要なロードを減らすためにFrameset ベースのアーキテクチャに変わっています。
各フレームセットには以下のようにしてアクセスする事が出来ます。


AAA.ESb : UI 用のフレーム
AAA.EcK : 文書情報を格納するためのフレーム
AAA.DSq  : JavaScript Code を格納するためのフレーム

AAA と言うのは何だかでたらめな文字列に見えますが、別に適当な変数名としてあげたのではありません。
これはこの記事でも紹介したとおり、DWA 内での Obfuscation されたオブジェクト名です。
 このWikiの記事ではオリジナルの名前を [ ]で表示しているのですが、AAA の場合ですと、AAA [com_ibm_dwa_globals] と言うのが元々の名前です。

その他のフレームについてもオリジナルの名前を見てみましょう。

ESb [oMainWin]
EcK [oMainDoc]
DSq [oScript]

iNotes Liteではページ構造からもスクリプト部分とUI 部分が独立している事が分かるのではないかと思います。

明日以降はこのWiki の記事のキモになる、iNote Lite Widget と言う概念について紹介していきたいと思います。

iNotes Lite Framework - Lazy loading code

2009年03月10日 00:50

今日は iNotes LiteのLazy loadingについてです。必要なときにだけコードを読み込むようなことが出来るようになったために iNotes Liteでは読み込むコード量を最小化することが出来るようになった、とよく言いますが、この技術によるところも大きいのではないかと思います。
今日はそんな話です。

バックナンバー
1. iNotes Lite Framework - Frameset
2. iNotes Lite Framework - iNotes Lite Widgets
3. iNotes Lite Framework - Lazy loading code
4. iNotes Lite Framework - Basic Layout
5. iNotes Lite Framework - Common Property

(このエントリは以下の記事を参考に書かれています)
iNotes Lite framework (Notes/Domino Wiki)

iNotes Lite Widget では、コードの読み込みを実際に必要になるまで先延ばしにする事が出来ます。これは、"lazy loading"と呼ばれています。
Lazy Load を実装するには、始めにEKc.prototype.EQj に対してエントリを追加する必要があります。EKc.prototype.EQj はiNotes Lite Widget クラス名を "code chunk symbols" のリストと関連付けているテーブルです。
これは「Lazy Loading Table」と呼ばれます。Lazy Loading Table に追加するには、Custom_JS_Lite サブフォームにあるScene_PostLoad_Lite() で行うのが一番よいのではないかと思います。
var asClass = (s_SceneName || '').split(':');
if (asClass[1] == 'EVy')
EKc.prototype.EQj['com_ibm_dwa_ui_hello'] = ['Hello'];}

Scene_PostLoad_Lite() はWidgetが初期化を終える度に実行されます。Root Element ID Widget の名前が組み合わさった形で、s_SceneNameに格納されています。なので、asClass[1] はWidgetの名前が入っています。
EVy[com_ibm_dwa_ui_panelManager] はiNotesの初期化の非常に早い段階で実行されるため、これを利用します。
この後に、以下のタグを l_StdPageOperations, l_StdPageOperations_Gecko, l_StdPageOperations_Safari などのフォームの適切な場所に挿入します。
<NotesVar name=s_GetHelloScript type=number initialvalue={0}>}

更に以下のタグも入れます。
<InsertNotesSubForm name=@{@If(s_GetHelloScript != 0; "l_Hello"; "")}>}

最後に以下のような設計要素を持つ、l_Hello Notes サブフォームを作成します。
function com_ibm_dwa_ui_hello(sId){
var oElem = AAA.EcK.getElementById(sId);
oElem.innerHTML = 'Hello world';
}}

// Specify the symbol in all non-capital letters here
EKc.prototype.FKd['hello'] = true;}

EKc.prototype.FKd [com_ibm_dwa_io_widgetListener.prototype.oLoaded] オブジェクトはロードされたモジュールを管理しています。また、複数のコードをlazy loading tabuleのエントリに指定する事も出来ます。

一度、Lazy loading table とlazy loading に必要なその他のものを指定すれば、iNotes Lite framework はどのコードがロードされていないかが分かるので、自動的にロードし始める必要があるかどうかを決定する事が出来るようになります。
ロードが必要になった場合には、iNotes Lite framework は自動的にロードされていないコードを収集し、一つのHTTPリクエストの間に、ブラウザの種類に応じて、 l_StdPageOperations, l_StdPageOperations_Gecko, l_StdPageOperations_Safari などのフォームを使用して読み込みを開始します。このようにしているのは、HTTPリクエストの増加はクライアントの応答時間に大きく影響するためです。

注:  iNotes Lite frameworkはl_StdPageOperations, l_StdPageOperations_Gecko, l_StdPageOperations_Safari などのフォームを読み込むときに自動的に、s_Getと言う接頭辞や、Script と言う接尾辞をcode chunk symbols につけます。この問題は、8.5.1 に修正される予定です。

iNotes Lite Framework - Basic Layout

2009年03月11日 00:05

今日のトピックは iNotes Liteでのレイアウトテクニックです。
 CSSの具体例に目を奪われがちですが、Table を入れ子にした場合にブラウザパフォーマンスが落ちる事を避けるために積極的に今回のようなDIV 要素を利用した配置を採用する事によって、iNotes Liteではブラウザのレンダリングスピードを向上させています。

バックナンバー
1. iNotes Lite Framework - Frameset
2. iNotes Lite Framework - iNotes Lite Widgets
3. iNotes Lite Framework - Lazy loading code
4. iNotes Lite Framework - Basic Layout
5. iNotes Lite Framework - Common Property

(このエントリは以下の記事を参考に書かれています)
iNotes Lite framework (Notes/Domino Wiki)


iNotes Lite のコードでは、タグを入れ子にして使う事を避けています。入れ子にされたtableタグはブラウザのパフォーマンスに大きく影響する事がわかったからです。
いくつかのAJAXフレームワークは入れ子にした入れ子にされたtableタグの代わりになるようなJavaScriptベースのレイアウトをしますが、iNotes Lite ではコードサイズの増加を避けるためにその利用も避けています。

注: DOM Inspector ツール(IE Developer Toolbar, Firebug etc)もレイアウトテクニックを理解する助けになると思います。
.

iNotes Lite では、 広範囲にわたって CSS をレイアウト目的で使用しています。 いくつかのキーになるCSSクラスをここで示します。







Class Description
s-basicpanel 全体の要素の余白全体を占める要素となります。この次の要素はこの要素の配下になります。
全体の要素の余白を指定した要素で埋めたいときや、複数の要素を一つの領域に重ねたくないときなどに便利です。
s-stack 含まれる要素の全体を占める要素となります。次の要素はこの要素と同じ位置に来ます。
複数の要素を一つの領域に積み重ねたいときに便利です。
s-toppanel この要素は、含まれる要素の全幅を占めた状態で上部に配置されます。
全体の要素内の上部に配置したい要素があるときに便利です。
s-rightpanel この要素は、全体の要素の全高さを占めた状態で、右側に配置されます。
全体の要素内の右側に配置したい要素があるときに便利です。
s-bottompanel この要素は、含まれる要素の全幅を占めた状態で下部に配置されます。
全体の要素内の下部に配置したい要素があるときに便利です。
s-leftpanel この要素は、全体の要素の全高さを占めた状態で、左側に配置されます。
全体の要素内の左側に配置したい要素があるときに便利です。


上のクラスを利用した例を以下に示します。 青いエリアは、5em分(注:1em=1文字分)だけ上部を占めており、赤いエリアが残りを使うようにしています。s-basicpanelが先に定義されていますが、s-toppanelが計算された後に余白を占めているのが分かるのではないかと思います。

<div class="s-stack" style="padding-top:5em;">
<div class="s-basicpanel" style="border:solid red 1px;background-color:#FF8080">
</div>
</div>

<div class="s-toppanel" style="height:5em;border:solid blue 1px;background-color:#8080FF">
</div>


Basic Layout

次の例は、青いエリアが上部5em分を占め、赤紫色部分が左、緑部分が残りを占める場合の例です。上の例と同様に、下部のs-basicpanelが黄色枠(少し見にくいですが)で示されており、その中に二分割された右側に緑枠のs-basicpanelが位置しているのが分かります。

<div class="s-stack" style="padding-top:5em;">
<div class="s-basicpanel" style="border:solid yellow 1px;">
<div class="s-stack" style="padding-left:5em;">
<div class="s-basicpanel” style="border:solid green 1px;background-color:#80FF80">
</div>
</div>
<div class="s-leftpanel" style="width:5em;border:solid magenta 1px;background-color:#FF80FF">
</div>
</div>
</div>
<div class="s-toppanel" style="height:5em;border:solid blue 1px;background-color:#8080FF">
</div>


Basic Layout (2)

先に指定した要素が上に来ないことに気が付くと思いますが、これはs-stack CSSクラスが position:absolute スタイルを使用しているためですが、iNotes のレイアウトでもよく利用されます。





最新記事


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。