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

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

2014年9月17日水曜日

XPagesで添付したイメージを画面に表示させる

最近、ブログの投稿がされてない!と怒られました。はっはっは・・・
でもね・・・記事を書かせたい(私のモチベーションを上げる)と思うのであれば、コメントくださいね。
役に立ったのか立ってないかだけで構いませんので、 書いてください。匿名でいいんです。
このブログはNotes/Dominoを使っていただいている皆様のために書いています。

ですが、有益な情報なのか、そうでないのかを決めるのは読んでいただいている皆様です。
ぜひ、他の利用者へのフィードバックとしてコメントをください。


想いを吐露したので、少しすっきりしました。ということで?今日もブログを更新しましょう。





XPagesについて質問があったので、それを解決する方法について書いてみます。
NotesアプリケーションをWeb化したことがある人からすると、「なんだよ、こんなの知ってるよ」という内容かもしれませんがお付き合いください。


質問内容は・・・
XPagesアプリケーションで文書に画像ファイルを添付した。
文書を開いた時にその画像ファイルをイメージとして表示させるにはどうすれば良いか?
このイメージは文書のタイトルと同等の扱いとしたい。なので、画像は文書内の目立つ場所に独立して表示させたい。
というものでした。
ノーツクライアントのアプリケーションの場合、クリップボード経由で画像ファイルを貼り付けられたので簡単に実現できますが、XPagesやWebアプリの場合はどうなんでしょう?(下図はノーツクライアントで画像ファイルを貼り付けてみたところ)
ノーツクライアントなら画像を貼り付けられる

考えてみた
Webアプリケーションの場合も考えると大変なので(めんどくさい・・・)、XPagesで実現する方法を考えてみました。
リッチテキストがあるならば、XPagesからもイメージの貼り付けはできますが、これだとその場所にしか表示できません。となると「目立つ場所に独立して表示させたい。」という要件を満たしません。
となると、やはり添付ファイルで実現するのが良いでしょう。


やってみよう
まずは添付ファイルをアップロードできるようにします。
こちらについてはXPagesで添付ファイルの処理をする(アップロード) に記事を書いていますので、そちらを参照願います。
それでは、実際に表示する方法についてみていきましょう。
画像ファイルをイメージとして表示するので、「イメージコントロール」を利用します。
イメージコントロールをドラッグ&ドロップする時に、イメージのリソースをどうするのか選択する画面になりますが、「イメージプレースホルダーの使用」を選択して[OK]をクリックしてください。
「イメージプレースホルダーの使用」を選択

プロパティの中に「イメージソース」という項目があるので、そこの◇をクリックしてスクリプトエディタを開きます。
ここに
document1.getDocument().getUniversalID() + "/$FILE/" + @AttachmentNames()
という式を記述します。
この式でWebアプリケーション上で添付ファイルを指し示すURLを生成しているのです。
「document1」はデータソースの名前なので、ご自身の環境に合わせてください。
document1.getDocument().getUniversalID()は、開いている文書の文書UNIDを指します。
添付ファイルは「$FILE」に格納されているので、 それを定義しています。
@AttachmentNames()は文書内にある添付ファイルの名前を取得してくる関数ですね。

これだけで終わりなのですが、添付する画像ファイルの縦横の長さがまちまちだとそのままのサイズで表示されるので文書ごとに統一感がなくなります。
そこで「高さ」と「幅」に固定値を設定しておきます。ここでは両方とも150ピクセルとしました。
イメージコントロールのプロパティ

実行してみた
実際にXPagesからファイルを添付して開きなおした状態がこちらです。
XPagesで添付ファイルを表示してみた

これの優れているところは、添付されているファイルが画像ファイルであればノーツクライアントから添付しても正しく表示されるという事です(画像を直接貼り付けている場合は不可です)。



注意事項
ここで実現している方法は、文書中に添付ファイルが一つしかないこと、添付ファイルは画像ファイルである事ということが注意点としてあります。
添付するファイルの数を限定する方法については、XPagesで文書保存時に添付ファイルの数を限定させるには で書いていますので、そちらを参照願います。



このようにちょっとした工夫でできますので、色々と試してみてください。
では今日はこの辺で・・・

2 件のコメント:

萩原@広瀬化学 さんのコメント...

リッチテキストフィールドのまま、見た目が悪い状態だったのですが、この記事のお陰できれいにレイアウトすることができました。
ありがとうございます!!

Masahiko Miyo さんのコメント...

萩原@広瀬化学 さん、コメントありがとうございます。
お役にたてて何よりです。

ちょっとした工夫で従来のアプリケーションがきれいに表現できるようになりますので、
XPagesをうまく活用してくださいね。