CookBook

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

投稿日:

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

この CookBook では、投稿したメッセージを textile として解釈し HTML に変換し表示する投稿種別を追加します。
textile の解析には以下のライブラリを用います。
borgar/textile-js
textile の解析結果から script タグ等をサニタイズ際には以下のライブラリを用います。
cure53/DOMPurify

完成イメージ


1. 投稿種別に「メッセージ(textile)」を選択します。
2. メッセージを入力します。
3. 投稿します。

完成サンプル

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

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

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

レシピ

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

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

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

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

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

src/main/jssp/src/im_cookbook_128115/message_type/views/type_textile.js

src/main/jssp/src/im_cookbook_128115/message_type/views/type_textile.html

行数 説明
32 メッセージを取得します。
55 メッセージをアトリビュートで受け取るため本属性は使用しません。そのためダミーのデータを設定します。
60 アトリビュートを JSON に変換します。

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

src/im_cookbook_128115/message_type/views/textile_timeline.js

行数 説明
11 送信されたメッセージを取得します。
src/im_cookbook_128115/message_type/views/textile_timeline.html

行数 説明
19 メッセージを取得します。
20~29 メッセージをパースし html に変換します。その際、いくつかのクラスにスタイルを追加するために文字列の置換を行います。
30 変換後の html をサニタイズします。
32 変換後の html を表示します。

4. textile-js を配置します。

以下から textile-js をダウンロードし、textile-js-master/lib/textile.min.js を Web サーバの %CONTEXT_PATH%/csjs/libs/textile-js/lib/textile.min.js に配置します。
borgar/textile-js

5. DOMPurify を配置します。

以下から DOMPurify をダウンロードし、DOMPurify-master/dist/purify.min.js を Web サーバの %CONTEXT_PATH%/csjs/libs/DOMPurify/dist/purify.min.js に配置します。
cure53/DOMPurify

まとめ

この CookBook では、textile を入力できるメッセージ種別を追加する方法を紹介しました。

使用するライブラリを変更するだけで Markdown に対応することも可能です。
お客様の用途にあわせて是非ご活用ください。

-CookBook

執筆者:


  1. […] Markdown ではなく textile の投稿種別については以下を参照してください。 IMBox に投稿種別を追加する方法(textile) […]

IMBox に投稿種別を追加する方法(Markdown) – intra-mart Developer Site へ返信する コメントをキャンセル

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

関連記事

no image

後処理プログラムで画面アイテム「ファイルアップロード」にバリデーションを実行する方法

このCookbookでは、画面アイテム「ファイルアップロード」に添付されたファイルをバリデーションする方法を紹介します。 後処理プログラムを使用してバリデーションを実行することで、画面に表示するエラー …

スプレッドシートを実行画面でExcelファイルとしてエクスポートする方法

このCookBookでは、スプレッドシートを実行画面でExcelファイルとしてエクスポートする方法について紹介しています。 IM-FormaDesignerの実行画面から直接、画面アイテム「スプレッド …

no image

IM-Workflowの一覧を業務別に使い分けるには

この記事では、”もっと効率的に” IM-Workflowを利用した業務ができるように、一覧画面に表示するフローや案件を絞り込んで表示するための手順をご紹介します。 「フローグループ」機能を利用し、一覧 …

no image

ジョブを作成して定期実行する

このCookBookでは、以下の開発モデルでジョブを作成する方法と、作成したジョブを指定した時刻に定期実行する方法を紹介します。 ・スクリプト開発モデル ・JavaEE開発モデル いずれのモデルでもジ …

no image

申請画面で設定した特定の期日までは承認が行えないフローの作成方法

このCookbookでは、申請画面で設定した特定の期日までは承認が行えないフローの作成方法を紹介します。 アクション設定の表示モード変換を使用し、承認可能日の前後で承認ボタンの表示有無が切り替わる画面 …

RSSRSSRSSRSS