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

この 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

レシピ

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

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

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

<?xml version="1.0" encoding="UTF-8"?>
<imbox-message-config
    xmlns="http://www.intra-mart.jp/imbox/imbox-message-config"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.intra-mart.jp/imbox/imbox-message-config ../../schema/imbox-message-config.xsd">

  <public-message>
     <message-config
       display_flag="true"
       enabled_flag="true"
       sort_no="4"
       message_type_name="CAP.Z.IWP.COOKBOOK152112.MESSAGE.TYPE.NAME"
       post_type_path="im_cookbook_152112/message_type/views/type_iframe"
       display_path="im_cookbook_152112/message_type/views/iframe_timeline"
       message_type_cd="MESSAGE_TYPE_IFRAME"/>
  </public-message>
</imbox-message-config>

<?xml version="1.0" encoding="UTF-8"?>

<imbox-message-config

xmlns="http://www.intra-mart.jp/imbox/imbox-message-config"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://www.intra-mart.jp/imbox/imbox-message-config ../../schema/imbox-message-config.xsd">

<public-message>

<message-config

display_flag="true"

enabled_flag="true"

sort_no="4"

message_type_name="CAP.Z.IWP.COOKBOOK152112.MESSAGE.TYPE.NAME"

post_type_path="im_cookbook_152112/message_type/views/type_iframe"

display_path="im_cookbook_152112/message_type/views/iframe_timeline"

message_type_cd="MESSAGE_TYPE_IFRAME"/>

</public-message>

</imbox-message-config>

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

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

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

var $imbox = {};

function init(request) {
}

var $imbox = {};

function init(request) {

}

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

<style type="text/css">
#imui-container #imbox-message-type textarea.imbox-textarea{
   width: 98%;
   height: 45px;
   resize: none;
   overflow: hidden;
}
#imui-container #imbox-message-type  input.imbox-text {
   width: 96%;
}
#imui-container #imbox-message-type div.imbox-button{
  padding-top: 10px;
  text-align: right;
}
</style>
<div>
  <form id="iframe_form">
    <ul class= "mt-10">
      <li class= "mt-10"><imart type="imuiTextbox" id="iframe-url" class="imbox-text" name="iframe-url-name" placeholder="URL" /></li>
    </ul>
    <div class="mt-10">
      <textarea id="iframe-detail" class="imbox-textarea" name="iframe-detail-name" placeholder="詳細"></textarea>
    </div>
  </form>
</div>
<form id="imbox_timeline_send_form" action="ui/filer/upload" method="POST" enctype="multipart/form-data">
  <imart type="include" page="imbox/views/timeline/item/add_options" />
</form>
<div id="iframe_button" class="imbox-button mt-20 align-R">
  <button type="button" id="iframe_send_button" class="imui-medium-button"><imart type="message" id="CAP.Z.IWP.IMBOX.CONTRIB.POLL.POST" /></button>
</div>
<script type="text/javascript">
(function($) {
  $('#iframe_send_button').click(function() {
    var button = $(this);
    var attributes = {
      url: $('#iframe-url').val(),
      iframeDetail : $('#iframe-detail').val()
    };
    var messageTypeCd = $('.imbox-timeline-sendtype-list').children(':selected').val();
    var boxCd = ($imbox.timeline.clientType === $imbox.constants.CLIENT_TYPE_LIST['COMPONENTS']) ? $imbox.timeline.boxCd: $('.imbox-timeline-grouptype-list').children(':selected').val();
    var url = 'imbox/send/' + encodeURIComponent(boxCd);
    var attachFlag = '0';
    var files = [];
    var tagNames = [];
    $('.imbox-timeline-send-tag-list-hidden').each(function() {
      tagNames.push($(this).val());
    });

    if (tagNames.length){
      attachFlag = '1';
    }

    for (var i = 0, length = $imbox.fileName.length; i < length; i++) {
      if ($imbox.fileName[i].key === 'imbox_timeline_send_form') {
        files.push($imbox.fileName[i].name);
      }
    }

    var data = {
      'send_message': attributes.iframeDetail,
      'messageTypeCd': messageTypeCd,
      'displayId': $imbox.timeline.displayId,
      'timelineType': $imbox.timeline.timelineType,
      'clientType': $imbox.timeline.clientType,
      'attributes': ImJson.toJSONString(attributes, false),
      'attachName[]': files,
      'attachPath': $('#imbox_timeline_send_attach_file_name').data('store_to'),
      'attachFlag': attachFlag,
      'tag_name': tagNames
    };

    if (!imuiValidate('#imbox_timeline_send_form', imboxTimelineSendRules, imboxTimelineSendMessage, '')) {
      return false;
    }
    var success = $imbox.ajax.send('POST', url, data, $imbox.timeline.sendCallback, button);

    if (success) {
      $('#iframe-url').val('');
      $('#iframe-detail').val('');
      imuiResetForm('#imbox_timeline_send_form');
    }
  });
}(jQuery));
</script>

#imui-container #imbox-message-type textarea.imbox-textarea{

width: 98%;

height: 45px;

resize: none;

overflow: hidden;

}

#imui-container #imbox-message-type input.imbox-text {

width: 96%;

}

#imui-container #imbox-message-type div.imbox-button{

padding-top: 10px;

text-align: right;

}

</style>

<div>

</ul>

</div>

</form>

</div>

</form>

</div>

(function($) {

$('#iframe_send_button').click(function() {

var button = $(this);

var attributes = {

url: $('#iframe-url').val(),

iframeDetail : $('#iframe-detail').val()

};

var messageTypeCd = $('.imbox-timeline-sendtype-list').children(':selected').val();

var boxCd = ($imbox.timeline.clientType === $imbox.constants.CLIENT_TYPE_LIST['COMPONENTS']) ? $imbox.timeline.boxCd: $('.imbox-timeline-grouptype-list').children(':selected').val();

var url = 'imbox/send/' + encodeURIComponent(boxCd);

var attachFlag = '0';

var files = [];

var tagNames = [];

$('.imbox-timeline-send-tag-list-hidden').each(function() {

tagNames.push($(this).val());

});

if (tagNames.length){

attachFlag = '1';

}

for (var i = 0, length = $imbox.fileName.length; i < length; i++) {

if ($imbox.fileName[i].key === 'imbox_timeline_send_form') {

files.push($imbox.fileName[i].name);

}

var data = {

'send_message': attributes.iframeDetail,

'messageTypeCd': messageTypeCd,

'displayId': $imbox.timeline.displayId,

'timelineType': $imbox.timeline.timelineType,

'clientType': $imbox.timeline.clientType,

'attributes': ImJson.toJSONString(attributes, false),

'attachName[]': files,

'attachPath': $('#imbox_timeline_send_attach_file_name').data('store_to'),

'attachFlag': attachFlag,

'tag_name': tagNames

};

if (!imuiValidate('#imbox_timeline_send_form', imboxTimelineSendRules, imboxTimelineSendMessage, '')) {

return false;

}

var success = $imbox.ajax.send('POST', url, data, $imbox.timeline.sendCallback, button);

if (success) {

$('#iframe-url').val('');

$('#iframe-detail').val('');

imuiResetForm('#imbox_timeline_send_form');

}

});

}(jQuery));

</script>

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

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

`src/im_cookbook_152112/message_type/views/iframe_timeline.js`

var $imbox = {};

/**
 * iframe用タイムライン画面初期処理
 * @param  {Object} request リクエストパラメータ
 */
function init(request) {
  let message = request.message;
  let attributes = request.message.attributes;

  $imbox.url = attributes.url;
  $imbox.iframeDetail = attributes.iframeDetail;
  $imbox.message = message;

  let identifier = Identifier.get();
  
  $imbox.identifier_iframe = identifier + '-iframe';
  $imbox.identifier_anchor = identifier + '-anchor';
  $imbox.identifier_dialog = identifier + '-dialog';
}

var $imbox = {};

/**

* iframe用タイムライン画面初期処理

* @param {Object} request リクエストパラメータ

function init(request) {

let message = request.message;

let attributes = request.message.attributes;

$imbox.url = attributes.url;

$imbox.iframeDetail = attributes.iframeDetail;

$imbox.message = message;

let identifier = Identifier.get();

$imbox.identifier_iframe = identifier + '-iframe';

$imbox.identifier_anchor = identifier + '-anchor';

$imbox.identifier_dialog = identifier + '-dialog';

}

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

`src/im_cookbook_152112/message_type/views/iframe_timeline.html`

<div class="imbox-timeline-thread-post-right-body">
  <p>
    <a href="imbox/usermessage/<imart type="string" value=$imbox.message.encodePostUserCd escapeXml="true" escapeJs="false" />" class="imbox-timeline-thread-post-user-name">
      <imart type="string" value=$imbox.message.postUserName escapeXml="true" escapeJs="false" />
    </a>
    <span class="imbox-timeline-thread-from-to-icon imbox-icon-common-16-arrow"></span>
    <imart type="string" value=$imbox.message.postTypeInfo.postToName escapeXml="true" escapeJs="false" />
  </p>
  <div class="imbox-timeline-thread-post-right-body">
    <div class="imbox-timeline-thread-message">
      <div class="imbox-timeline-thread-message-area">
        <div class="imbox-timeline-thread-message-text">
          <div class="cf">
            <imart type="tag" tagname="iframe" escapeXml="true" escapeJs="false" id=$imbox.identifier_iframe width="100%" height="300" src=$imbox.url frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen" allowfullscreen></imart>
            <imart type="tag" tagname="a" id=$imbox.identifier_anchor style="display: none;">最大化</imart>
            <imart type="imuiDialog" id=$imbox.identifier_dialog autoOpen="false" modal="true" autoHeight="100" autoWidth="100" style="overflow-y: hidden;">
              <imart type="tag" tagname="iframe" escapeXml="true" escapeJs="false" width="100%" height="100%" src=$imbox.url frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen" allowfullscreen></imart>
            </imart>
            <script>
              (function($) {
                $('#<imart type="string" value=$imbox.identifier_iframe escapeXml="false" escapeJs="true" />').on('load', function() {
                  $('#<imart type="string" value=$imbox.identifier_anchor escapeXml="false" escapeJs="true" />').show();
                });
                $('#<imart type="string" value=$imbox.identifier_anchor escapeXml="false" escapeJs="true" />').on('click', function() {
                  $('#<imart type="string" value=$imbox.identifier_dialog escapeXml="false" escapeJs="true" />').imuiDialog('open');
                });
              })(jQuery);
            </script>
            <span style="padding-top: 10px;" class="imbox-timeline-thread-message-text-string"><imart type="string" value=$imbox.message.messageText /></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<p>

<a href="imbox/usermessage/<imart type="string" value=$imbox.message.encodePostUserCd escapeXml="true" escapeJs="false" />" class="imbox-timeline-thread-post-user-name">

</a>

</p>

</imart>

(function($) {

$('#<imart type="string" value=$imbox.identifier_iframe escapeXml="false" escapeJs="true" />').on('load', function() {

$('#<imart type="string" value=$imbox.identifier_anchor escapeXml="false" escapeJs="true" />').show();

});

$('#<imart type="string" value=$imbox.identifier_anchor escapeXml="false" escapeJs="true" />').on('click', function() {

$('#<imart type="string" value=$imbox.identifier_dialog escapeXml="false" escapeJs="true" />').imuiDialog('open');

});

})(jQuery);

</script>

</div>

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

まとめ

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