kintoneプラグイン > 機能拡張スタンダードAll-In > PDF出力レイアウト・タグリファレンス > img
img
画像を出力するインライン要素です。
属性
| 属性名 | 機能 | フォーマット |
|---|---|---|
| name | プラグイン設定で登録した画像IDを指定する | 画像ID（文字列） |
| field | レコードのファイル添付フィールドを指定する | フィールドコード（文字列） |
| width | 出力する画像の表示幅（※1） | 数値 |
| height | 出力する画像の表示高さ（※1） | 数値 |
| fit | 出力する画像を表示する矩形サイズ（※2） | 半角スペースを区切り文字とした数値の列挙 |
※1
widthとheightを両方指定した場合、画像は指定したサイズに合わせて縦横比も変更されます。
※2
縦横比を維持したまま指定した矩形サイズに収まるよう、表示されます。
使用例
1. 画像IDを指定した出力方法
|
1 2 3 4 5 |
<contents> <img name="画像ID"> </contents> |
2. レコードに保存されている「ファイル添付」フィールドを指定した出力方法
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<contents> フィールドコードのみを指定すると、保存されているすべての画像を改行しながら出力します <img field="フィールドコード"> フィールドコードの末尾に添字を付加すると、ファイル添付フィールドに保存されているデータの一部を出力します。 添字とは [ ] でインデックス数値を囲ったものです。添字は 0 が最小値です。 この例では [0] と指定しているので、保存されたファイルの0番目（最初）を出力します。 画像ファイル以外のデータだった場合は出力は行われません。 <img field="フィールドコード[0]"> </contents> |
3. 表示サイズの指定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<contents> 画像の表示幅を40ポイントに指定して出力する。縦横比は維持される。 <img name="フィールドコード" width="40"> 画像の表示高さを80ポイントに指定して出力する。縦横比は維持される。 <img name="画像ID" height="80"> 画像を幅40ポイント、高さ80ポイントの矩形に収まるよう出力する。縦横比は維持される。 <img field="フィールドコード" fit="40 80"> 画像を幅40ポイント、高さ80ポイントにして出力する。。縦横比は維持されない。 <img name="画像ID" width="40" height="80"> </contents> |
4. テーブルに含まれるファイル添付フィールドの出力方法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<contents> 簡易的な記述方法によるテーブル出力でも、ファイル添付フィールドに保存された画像は出力できます <table field="テーブル名"></table> 詳細な記述方法では、thead下のtdブロックに、ファイル添付フィールドを指定します。 これは通常のテーブル出力と同じ記述方法です。 <table field="テーブル名"> <thead> <tr> テーブル内のファイル添付フィールドコードを指定する <td field="フィールドコード"></td> </tr> </thead> </table> </contents> |
5. テーブルに含まれるファイル添付フィールドの画像出力でサイズを指定する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<contents> <table field="テーブル名"> <thead> <tr> テーブル要素での画像サイズの指定は imgsize 属性を使用します。 ・画像の width を指定する <td field="フィールドコード" imgsize="40"></td> ・画像の height を指定する（数値を半角スペースで区切り、ひとつめの数値を数値以外の文字にします） <td field="フィールドコード" imgsize="* 80"></td> ・画像の fit を指定する（数値を半角スペースで区切ります） <td field="フィールドコード" imgsize="40 80"></td> ・画像の width と height を指定する（数値をカンマで区切ります） <td field="フィールドコード" imgsize="40,80"></td> </tr> </thead> </table> </contents> |