このCookBookでは、IM-BloomMaker のマークダウンエレメントを活用した投稿欄の作成事例を紹介します。
マークダウン形式で入力した内容のプレビューを、タブの切り替えで確認できる投稿欄を作成します。
入力内容の表示
プレビュー表示
完成サンプル
以下の完成サンプルをダウンロードしてご活用ください。 このサンプルは、2024 Autumn 版以降でインポートできます。
IM-BloomMaker インポートデータ：cookbook258052_im_bloommaker.zip
BloomMaker のインポート機能を利用してインポートしてください。
前提条件
この CookBook の手順をお手元の環境で実施する場合は、BloomMaker で以下のコンテンツを作成して使用してください。
- デザイナのタイプ：デベロップモード
- テンプレート：使用しない
- コンテンツ種別：imds
レシピ
1. 変数を作成する
変数タブの「JSON形式で編集」アイコンをクリックし、以下のJSONを張り付けてください。
{
"activeTab": "",
"textContent": ""
}
2. アクションを設定する
投稿欄とプレビューの表示を切り替えるアクションを設定します。
(1) アクションタブの「新規作成」アイコンをクリックしてアクションエディタを開きます。
(2) カスタムスクリプトを実行するアクションに以下の値を設定します。
$variable.activeTab = $im.event.currentTarget.elementId;
このスクリプトにより、クリックされたタブのエレメントIDを $variable.activeTab に代入します。
$im.event.currentTarget.elementId は特殊な変数であり、クリックした直近のエレメントIDが格納されています。
(3) アクション名を switchTab に変更します。
3. レイアウトを作成する
タブの作成
(1) コンテナページ配下に セクション（レイアウト（imds）カテゴリ） を配置します。
(2) セクション配下に フレックスコンテナ（レイアウト） を配置します。
(3) フレックスコンテナの flexDirection プロパティを column に設定します。
(4) フレックスコンテナ内の一番上のフレックスアイテム配下に タブ（コンポーネント（imds）カテゴリ） を配置します。
(5) タブエレメントの bordered プロパティにチェックをつけます。
(6) タブ配下のタブリストの、elementCount プロパティを 2 に設定します。
(7) １つ目（左側）のタブリストアイテムのクリック時イベントに switchTab を設定します。
(8) １つ目（左側）のタブリストアイテム配下のラベルを Text に変更します。
(9) ２つ目（右側）のタブリストアイテムのクリック時イベントに switchTab を設定します。
(10) ２つ目（右側）のタブリストアイテム配下のラベルを Markdown に変更します。
タブ切り替え動作の設定
(1) タブリストアイテム（Text）の active プロパティの変数値に以下の値を指定します。
=$variable.activeTab == '{タブリストアイテム（Text）のエレメントID}'
(2) タブリストアイテム（Markdown）の active プロパティの変数値に以下の値を指定します。
=$variable.activeTab == '{タブリストアイテム（Markdown）のエレメントID}'
(3) 変数タブから activeTab の変数エディタを開き、固定文字列にタブリストアイテム（Text）のエレメントIDを設定します。
タブリストアイテム（Text）がデフォルトで選択されるようになりました。
投稿欄の作成
投稿欄を作成し、タブで「Text」が選択されている時だけ表示されるように設定します。
(1) フレックスコンテナ内の真ん中のフレックスアイテム配下に ボックス（レイアウトカテゴリ） を配置します。
(2) ボックスの 表示/非表示 プロパティの変数値に以下の値を指定します。
=$variable.activeTab == '{タブリストアイテム（Text）のエレメントID}'
(3) ボックス配下にフィールドグループ（フォーム部品（imds）カテゴリ）を配置します。
(4) フィールドグループボディ配下のフィールドの showLabel プロパティのチェックを外します。
(5) フィールド配下のフィールドコンテンツに、テキストエリア（フォーム部品（imds）カテゴリ）を配置します。
(6) テキストエリア配下のテキストエリア要素の value プロパティの変数値に $variable.textContent を指定します。
(7) テキストエリア要素のCSSクラスに border を指定します。
(8) 縦幅 を 165px に設定します。
プレビューの作成
プレビュー表示部分を作成し、タブで「Markdown」が選択されている時だけ表示されるように設定します。
(1) フレックスコンテナ内の一番下のフレックスアイテム配下に ボックス（レイアウトカテゴリ） を配置します。
(2) ボックスの 表示/非表示 プロパティの変数値に以下の値を指定します。
=$variable.activeTab == '{タブリストアイテム（Markdown）のエレメントID}'
(3) ボックスのCSSクラスに scroll を指定します。
(4) ボックスの背景色 を #f2f6fa に設定します。
(5) ボックスの内余白（左）と内余白（右）に 10px を指定します。
(6) ボックス配下にマークダウンエレメントを配置します。
(7) マークダウンエレメントの textContent プロパティの変数値に $variable.textContent を指定します。
(8) マークダウンエレメントの 縦幅 を 165px に設定します。
4. CSS を設定する
「CSS編集」アイコンをクリックし、以下の CSS を張り付けてください。
.border {
border: 1px solid #ccc !important;
border-top: none !important;
border-radius: 0 !important;
}
.scroll {
overflow: auto;
}
border クラスにより、テキストエリアの枠線の色、角の丸みが変更され、上辺の枠線が非表示になりました。
scroll クラスにより、プレビュー欄にコンテンツが収まりきらない場合にはスクロールするようになります。（プレビュー画面でご確認ください）
手順は以上です。プレビューを確認すると完成イメージのような投稿欄が出来ているはずです。
うまくいかない場合は、インポートファイルに含まれているコンテンツを参考にしてみてください。
まとめ
この記事では、マークダウンエレメントを活用した投稿欄の作成事例を紹介しました。
この投稿欄の具体的な活用例として、自社製品の社外ヘルプデスク画面での投稿を、マークダウンで編集・投稿するケースを考えてみます。
標準的なテキストと比較して、マークダウンエレメントを活用することでより洗練された表現が可能となり、顧客にとって理解しやすい情報の提供を実現できます。また、AIを活用した回答サポート機能と併用することで、ヘルプデスク担当者はAIによってマークダウン形式で生成された回答案を編集・投稿することも可能になります。
