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>
行数 | 説明 |
---|---|
12 | メッセージ種別名称を設定します。 |
13 | 投稿欄表示用のファイルパスを設定します。 |
14 | タイムライン表示用のファイルパスを設定します。 |
2. 投稿処理を作成します。
src/main/jssp/src/im_cookbook_152112/message_type/views/type_iframe.js
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>
行数 | 説明 |
---|---|
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';
}
行数 | 説明 |
---|---|
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>
行数 | 説明 |
---|---|
14 | iframe を表示します。 |
15 | 最大化リンクを表示します。クリックすると、iframe を画面の最大サイズのダイアログ内に表示します。 |
16 | 最大化リンククリック時に表示するダイアログです。 |
21 | iframe の読み込み完了時に、最大化リンクを表示する処理です。 |
24 | 最大化リンククリック時に、ダイアログを表示する処理です。 |
まとめ
この CookBook では、iframe を表示できるメッセージ種別を追加する方法を紹介しました。
是非ご活用ください。