> ## Documentation Index > Fetch the complete documentation index at: https://domoinc-openapi-sync-dataflows.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Beast Modeを使用してグラフィック、リンク、画像を表カードに追加する export const InlineImage = ({src, alt = '', height = '1.6em'}) => { return {alt}

; }; ## はじめに表カードはDomoで最も広く使用されるカードで、毎月1,000万件以上のインタラクションがあります。これを使用すると、DataSetの列を好きなように使用したり並べたりできます。表の作成の詳細については、「 [表グラフ](https://domo-support.domo.com/s/article/360043429573?language=en_US) 」を参照してください。表は信頼性がありますが、必ずしもインサイトをすばやく得られるわけではありません。次の最初の例は、比較的単純な表を示しています。2番目の例は、リンク、色、画像を含む、より情報量が多い表を示しています。

**注記：** Beast Modeを使用してグラフィック、リンク、画像を表カードに追加するときは、次のことに注意してください。 * Mega表では、HTMLタグやHTMLのスタイル属性がサポートされていません。サポートされているのは画像とリンクのみです。 * HTML表では、HTMLタグおよびstyle="background-color"などのスタイル属性がサポートされています。 * HTML表では、Beast Mode計算を使用してコンテンツをセルに追加する際のフィルター処理はサポートされていません。詳細については、「 [フィルタービューを使用してページレベルのフィルターを適用する](https://domo-support.domo.com/s/article/360042923914) 」を参照してください。

* iFrameがサポートされていないため、カードを表カードのセル内にエンベッドすることはできません。サポートされているタグのリストについては、下の「 [HTML表タグ](#HTMLTableTags) 」セクションを参照してください。この記事では、リンク、色、画像を使用して、表からすばやくインサイトを得られるようにする方法について次のカテゴリーで説明します。 * [表にリンクとアンカータグを追加する](#AddingLinksandAnchorTagstoTables) * [表の値に色を追加する](#AddingColorToTableValues) * [表に画像を追加する](#AddingImagesToTables) * [HTML表タグ](#HTMLTableTags) ## 表にリンクとアンカータグを追加するリンクやアンカータグを使用すると、ソースシステムからIDを取得し、表からそのソースに戻るリンクを設定できます。知っている必要があるのは、一部のHTMLと、Beast Modeでconcat()関数を使用する方法のみです。表にリンクまたはアンカータグを追加するには、次の手順を実行します。 1. カードの右上の **［設定］** > **［Analyzerで編集］** を選択します。 2. Analyzerの上部にあるツールバーから **［Beast Mode］** を選択します。 3. **［計算フィールド名］** フィールドにBeast Modeスクリプトの名前を入力します。 4. 表リンクやアンカーのHTML文字列を作成するには、concat()関数を使用します。次は、JIRAソースシステムへのサンプルリンクです。 ``` CONCAT('

',`Sales Rep`,'

') ``` 5. `https://onjira.domo.com/browse.com` は、使用するリンクに置き換えます。 6. `` `Sales Rep` `` は、表に表示するリンクのテキストに置き換えます。 **注記：** * "target=\_blank"は、リンクを強制的にブラウザーの新しいタブで開きます。これの追加はオプションです。 * 列を参照する代わりに独自のテキストを入力する場合は、構文エラーを回避するために、テキストを単一引用符で囲みます。例： ``` CONCAT('

','Link Text','

') ``` 7. 右上の **［計算フィールドを作成］** を選択し、スクリプトエディターを終了します。 8. この新しい計算フィールドをAnalyzerの **列** 領域にドラッグします。これで、すばやくソースシステムのデータを確認できるリンクが追加されました。 ## 表の値に色を追加する表内の値に色を追加する方法は、リンクやアンカータグを追加する場合と同じです。 1. カードの右上の **［設定］** > **［Analyzerで編集］** を選択します。 2. Analyzerの上部にあるツールバーから **［Beast Mode］** を選択します。 3. **［計算フィールド名］** フィールドにBeast Modeスクリプトの名前を入力します。 4. concat()関数を使用して、色のHTML文字列を作成します。構文は、 `div` コマンド内の「style」です。次は、色を赤に設定する例です。 ``` concat('

',`Sales`,'

') ``` 次は、値が負のときにテキストの色を赤に設定する例です。 ``` concat('

',`Sales`,'

') else concat(`Sales`,'') end ``` ## 表に画像を追加する HTMLで\コマンドを使用すると、表に画像が追加されます。画像を含む表の例を次に示します。

### 表に単一の画像を追加する 1. カードの右上の **［設定］** > **［Analyzerで編集］** を選択します。 2. Analyzerの上部にあるツールバーから **［Beast Mode］** を選択します。 3. **［計算フィールド名］** フィールドにBeast Modeスクリプトの名前を入力します。 4. concat()関数を使用して、画像のHTML文字列を作成します。構文は、 `` コマンドです。次は、シンプルな下向き矢印の画像を追加する例です。 ``` CONCAT('

','

';) ``` 5. `https://www.irasutoya.com/2013/01/blog-post_7794.html` は、 `表示する画像のURLに置き換えます。` **注記：** 次のステップはオプションです。 6. `style="text-align:center"` は、画像に適用するカスタムのスタイルに置き換えることができます。この例では、画像は表セルの中央に配置されています。使用可能なスタイルタグについては、下の「 [HTML表タグ](#HTMLTableTags) 」セクションを参照してください。 7. `alt="DOWN"` は、ユーザーが何らかの理由で画像を表示できない場合に、代替情報を提供します。次の例では、下向き矢印の画像の代わりに「DOWN」という単語が表示されます。 8. 画像の元の高さを使用する場合は、 `height="20px"` をすべて削除します。また、 `20px` を画像に適用する高さ（ピクセル単位）に置き換えることもできます。 ### 表の1つの列に複数の画像を追加する 1つの列に複数の画像を追加するには、Beast Modeを使用してCASEステートメント条件を作成します。次の例では、利益が増減している場合、対応する上向き矢印または下向き矢印が表示されます。 ``` CASE WHEN `Profit` < 0 THEN CONCAT('

','

';) ELSE CONCAT('

','

';) END ``` \タグ内のソースを動的に更新するためのBeast Mode計算を作成することもできます。次のコードは、これを行う1つの方法を示しています。 ``` CASE WHEN `[your column` >=0 THEN CONCAT('

','

') ELSE CONCAT('

','

') END ``` ## HTML表タグセキュリティ上の理由から、Domoの表に使用できるのは特定のHTMLタグのみです。次の表は、許可されているすべてのタグのリストです。

タグ	属性
`\`	`href=" http\://..." "` （下の注記1を参照）
`\`
`\`	`style` （下の注記2を参照） `align` `width` `title`
`\`	`style` （下の注記2を参照） `color` `size`
`\`	`style` （下の注記2を参照） `alt` `align` `border` `class` `height` `title` `width`
`\`	`style` （下の注記2を参照）
`\`	`style` （下の注記2を参照）
`\`	`style` （下の注記2を参照）
`\`	`style` （下の注記2を参照）
`\`	`style` （下の注記2を参照）
`\`	`style` （下の注記2を参照）

**注記1：** URLは、http、https、mailtoのいずれかで始める *必要があります* 。部分パスや相対パスは使用できません。その他のhrefは削除されます。 **注記2：** 使用できる `style` 属性には、次のものがあります。 * background-color * border * color * float * font-color * font-size * font-weight * height * left * margin * margin-left * margin-right * max-height * max-width * padding * position * text-align * top * vertical-align * white-space * width * word-wrap * z-index 日本語