CookBook

IM-BloomMaker 「外部リソース埋め込みコンテナ」エレメントを使用してパブリックストレージ上のファイルを閲覧する画面を作成する方法

投稿日:

このCookBookでは、2021 Spring でリリースした「外部リソース埋め込みコンテナ」エレメントの利用方法について説明していきます。
「外部リソース埋め込みコンテナ」エレメントはファイルのドラッグ&ドロップでファイルを表示したり、「外部リソース埋め込み」エレメントの data プロパティにパスを指定することで、ファイルを表示することができます。
ここではパブリックストレージ上のファイルを閲覧する画面を作成することができるサンプルを紹介します。

完成イメージ

完成サンプル

IM-BloomMaker インポートファイル: cookbook_195904_im_bloommaker-data.zip
IM-LogicDesigner インポートファイル: cookbook_195904_im_logicdesigner-data.zip

IM-BloomMaker インポートファイルには、以下の定義が含まれています。

コンテンツ定義 im_cookbook_195904
ルーティング定義 im_cookbook_195904

IM-BloomMaker のインポート機能を利用してインポートしてください。
インポート後、インポートしたルーティング定義の認可 URI の設定を行ってください。

IM-LogicDesigner インポートファイルには、以下の定義が含まれています。

フロー定義 im_cookbook_195904_pdf_reader
ルーティング定義 im_cookbook/195904_pdf_reader

IM-LogicDesigner のインポート機能を利用してインポートしてください。
インポート後、インポートしたルーティング定義の認可 URI の設定を行ってください。

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

レシピ

  1. IM-LogicDesigner でパブリックストレージの pdf を読み取るサーバロジックを作成
  2. IM-BloomMaker で pdf を表示する画面を作成

1. IM-LogicDesigner でパブリックストレージの pdf を読み取るサーバロジックを作成

「サイトマップ」→「LogicDesigner」→「フロー定義一覧」をクリックして、「ロジックフロー定義一覧」画面を開きます。
任意のカテゴリを作成後、「ロジックフロー新規作成」をクリックして、「ロジックフロー定義編集」画面を開きます。

次のようなフローを作成します。

開始 → 終了

入出力設定の出力値を以下のように設定します。

定数設定を以下のように設定します。

定数ID 定数値
Content-Type application/pdf
PDF im_cookbook_195904.pdf

PDF の定数値はファイルの配置場所によってパスが変わります。
ここではパブリックストレージ直下のファイルを指定しています。

終了のマッピング設定を以下のように設定します。

上記のように設定することで、Constant の PDF を Output の body にマッピングしたときに文字列を相対パスとみなして PublicStorage に変換されます。
こちらも併せてご確認ください。
IM-LogicDesigner データ型変換 仕様書
https://document.intra-mart.jp/library/iap/public/im_logic/im_logic_rule_of_data_conversion/_downloads/im_logic_rule_of_conversion.xlsx

また、Constant の PDF を Output の body にマッピングして、PublicStorage を取得していますが、「ストレージ操作」-「パブリックストレージ取得」タスクを利用しても同じことはできます。

次に、作成したロジックフロー定義を IM-BloomMaker から呼び出せるようにするため、ルーティング定義を作成します。
「サイトマップ」→「LogicDesigner」→「ルーティング定義一覧」をクリックして、「ロジックフロールーティング定義一覧」画面を開きます。
「新規作成」をクリックして、以下のルーティング定義を作成します。

フロー定義ID im_cookbook_195904_pdf_reader
ルーティング /imart/logic/api/im_cookbook/195904_pdf_reader
メソッド GET
認証方法 IMAuthentication
認可URI im-logic-rest://im_cookbook/195904_pdf_reader
セキュアトークンを利用する オフ
レスポンス種別 任意のContent-Typeで返却

それぞれ認可を設定します。
今回は動作テストのため、「テナント管理者」認可を設定します。
API パス指定を知ってしまうと意図しないユーザに pdf が見られる可能性があるので、権限周りには注意してください。

最後にパブリックストレージに表示したい pdf ファイル(ここでは im_cookbook_195904.pdf)をパブリックストレージの直下に配置してください。
以上で、サーバロジックの作成は完了です。

2. IM-BloomMaker で pdf を表示する画面を作成

「サイトマップ」→「BloomMaker」→「コンテンツ一覧」をクリックして、「IM-BloomMaker コンテンツ一覧」画面を開きます。
「コンテンツ新規作成」をクリックして、以下の情報を入力し「登録」ボタンをクリックします。

カテゴリID im_cookbook
コンテンツID im_cookbook_195904
コンテンツ種別 Bulma
コンテンツ名 im_cookbook_195904

コンテンツ定義を登録後、「デザイン編集」ボタンをクリックしてデザイナ画面を開きます。

パレットから「外部リソース埋め込みコンテナ」エレメントを配置します。

「外部リソース埋め込み」エレメントを選択し、data プロパティに /imart/logic/api/im_cookbook/195904_pdf_reader を設定します。

以上で、デザイン編集は完了です。
プレビューを確認してみましょう。

pdf が表示されて問題なければ、デザイナの「上書き保存」アイコンをクリックして保存します。

次に、作成したコンテンツを呼び出せるようにするため、ルーティング定義を作成します。
「サイトマップ」→「BloomMaker」→「ルーティング定義一覧」をクリックして、「IM-BloomMaker ルーティング定義一覧」画面を開きます。
「ルーティング新規作成」をクリックして、以下の情報を入力し「登録」ボタンをクリックします。

カテゴリID im_cookbook
ルーティングID im_cookbook_195904
コンテンツ im_cookbook_195904
コンテンツバージョン 最新バージョンを利用する
メソッド GET
URL /imart/im_cookbook/bloommaker/195904
ルーティング名 im_cookbook_195904

登録後、認可を設定します。
今回は動作テストのため、「テナント管理者」に認可を設定します。

最後に、以下の URL にアクセスして画面を表示してください。
http://localhost:8080/imart/im_cookbook/bloommaker/195904

以上で、完了です。
完成サンプルでは、見た目の調整などを行っていますが、当該 CookBook の本旨とはずれるため、割愛します。

-CookBook
-

執筆者:


comment

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

関連記事

no image

AWS 上に Accel Platform を構築する方法

  この CookBook では、AWS の仮想マシン機能(Amazon EC2)を用いて、スタンドアローンで intra-mart Accel Platform を構築する方法について紹介 …

no image

承認ノードの画面アイテムに任意の初期値を設定する方法

このCookBookでは、BISワークフローにおいて、承認ノードの画面アイテムに任意の初期値を設定する方法を紹介します。 画面アイテムに任意の初期値を設定する方法としては、画面アイテムプロパティである …

no image

未完了案件・完了案件を全て削除する方法

このCookBookでは、LogicDesignerを利用してワークフローの未完了案件・完了案件を一括削除する方法を紹介します。 開発環境のお掃除に役立つTipsです。 削除した案件は復元することがで …

no image

ワークスペースとToDo機能との連携

このCookBookでは、「intra-mart Accel Collaboration」の機能の1つであるワークスペースと「intra-mart Accel Collaboration」のToDo機 …

no image

OAuth2.0 の アクセストークンを Google から取得する方法

このクックブックでは、OAuth2.0 の アクセストークンを Google から取得する方法を説明します。 intra-mart Accel Platformでは、OAuth2.0 の アクセストー …