CookBook

IMBox に投稿種別を追加する方法(iframe)

投稿日:2020-12-01 更新日:

この CookBook では、IMBox に投稿種別を追加する方法について紹介しています。
以下のドキュメントを参照することで、IMBox に投稿種別を追加することができます。
IMBox プログラミングガイド - メッセージ種別追加プログラム

この CookBook では、入力された URL を iframe で表示する投稿種別を追加します。

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。

e builder プロジェクト : im_cookbook_152112.zip
imm ファイル : im_cookbook_152112-1.0.0.imm

ローカル環境で表示させる場合は、以下のURLにアクセスしてください。
http://localhost:8080/imart/imbox
なおベースURLである以下の部分は、環境に合わせて適宜変更してください。
http://localhost:8080/imart

レシピ

  1. imbox-message-config を作成します。
  2. 投稿処理を作成します。
  3. タイムライン表示画面を作成します。

1. imbox-message-config を作成します。

src/main/conf/imbox-message-config/imbox-message-config_im_cookbook_152112.xml

行数 説明
12 メッセージ種別名称を設定します。
13 投稿欄表示用のファイルパスを設定します。
14 タイムライン表示用のファイルパスを設定します。

2. 投稿処理を作成します。

src/main/jssp/src/im_cookbook_152112/message_type/views/type_iframe.js

src/main/jssp/src/im_cookbook_152112/message_type/views/type_iframe.html

行数 説明
19 iframe の URL を入力用コントロールです。
22 本文入力用のコントロールです。
37-38 URL と本文を取得し、アトリビュートとして設定します。

3. タイムライン表示画面を作成します。

src/im_cookbook_152112/message_type/views/iframe_timeline.js

行数 説明
8 送信されたメッセージを取得します。
11 送信された URL を取得します。
17-19 iframe 要素の ID, iframe を最大化して表示するリンク要素の ID, iframe を最大化して表示するダイアログ要素の ID を生成します。
src/im_cookbook_152112/message_type/views/iframe_timeline.html

行数 説明
14 iframe を表示します。
15 最大化リンクを表示します。クリックすると、iframe を画面の最大サイズのダイアログ内に表示します。
16 最大化リンククリック時に表示するダイアログです。
21 iframe の読み込み完了時に、最大化リンクを表示する処理です。
24 最大化リンククリック時に、ダイアログを表示する処理です。

まとめ

この CookBook では、iframe を表示できるメッセージ種別を追加する方法を紹介しました。
是非ご活用ください。

-CookBook

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

Payara の Docker を作成する。

この CookBook では、Payara の Docker の作成手順について紹介しています。 レシピ ベースイメージの作成 Payara の Docker イメージを作成します 実行します 1. …

no image

スクリプト開発でのCSRF対策(formタグ編)

Cross Site Request Forgery(CSRF)とは、閲覧者に不正にHTTPリクエストを送信させ、攻撃者の意図した処理を実行させる攻撃手法です。 このCookBookでは、スクリプト開 …

no image

デバッグサーバ起動時に出力されるコンソールの情報をファイル出力する方法

このCookBookでは、e Builder でデバッグサーバの利用時にコンソールに出力された内容を、別途指定したファイルに出力する方法について紹介しています。 完成イメージ 1. 指定したファイルに …

IM-BloomMaker でリモートワークの報告メールを送信するアプリを作ってみた

はじめに IM-BloomMaker と IM-LogicDesigner で「リモートワークの報告メールを送信するアプリ」を作成したので、公開します。 新型コロナウィルスによる緊急事態宣言を受けて、 …

no image

intra-mart WebPlatform の access.log に X-Forwarded-For を出力する方法。

この CookBook では、intra-mart WebPlatform の access.log に X-Forwarded-For を出力する方法について紹介しています。 フロントに Web サ …