サポート > リポジトリ > モデル項目 > 文字列 - テキストエリア

テキストエリアを指定すると、長い文章を入力できます。

図1は「備考」項目をテキストエリアとして指定した例です。標準では3行の入力欄が用意されます。

図1 テキストエリア項目の入力欄

定義方法

「備考」項目は文字列型とします。
モデル項目詳細定義ダイアログを開きます。「入力制御>入力項目の種類」で "テキストエリア" を指定します。

図2 テキストエリアの指定

図3はテキストエリアの行数を10行, (1行あたりの文字数を)70文字と指定した例です。

図3 行数を指定した例

定義方法

入力制御タブ内にある「テキストエリア>通常」の「行数」と「1行の文字数」をそれぞれ指定します。

図4 行数と1行の文字数を指定する

入力欄の幅を直接、指定する

1行に入力できる文字数ではなく、入力欄の幅を直接、指定することもできます。
例えば 70 文字分の入力欄の幅を表示したい場合は、"スタイル > 全画面" に "width:70em", "入力欄のみ" を指定してください。"em" は文字サイズを意味する単位です。

一括設定

項目ルールでもスタイルの設定を行なうことができます。例えば次のようにします。

カテゴリリポジトリキー設定値
入力制御 presentation/displayitem/@style_inputall:全画面 width:70em
入力制御 presentation/displayitem/@style_inputall_2: 入力欄のみ

このルールをテキストエリア項目に適用することができます。項目ルールを使うと、のちの仕様変更が発生した場合でも "70em" を別の値に変更することで、一斉に変更できるメリットがあります。

テキストエリア(リッチ)を指定すると、文字の修飾やレイアウトを指定することができます。(図5,図6)

図5 テキストエリア(リッチ) (1)
図6 テキストエリア(リッチ) (2)

保存後の詳細表示画面でも、修飾された状態となります。(図7)

図7 テキストエリア(リッチ) (2)
修飾はHTMLタグによって行われます。

定義方法

モデル項目詳細定義ダイアログを開きます。「入力制御>入力項目の種類」で "テキストエリア(リッチ)" を指定します。

図8 テキストエリア(リッチ)の指定

高さと幅を指定する

リッチテキストエリアの「高さ」と「幅」を設定できます。

図9 テキストエリア(リッチ)の高さと幅の設定

単位を指定する

幅の設定では、単位に px、em、% を設定できます。高さの設定は、親要素に対する相対値が設定できないため、px、em のみ設定できます。

数値のみを設定した場合の単位は「px」となります。

画像を埋め込む

画像を埋め込むことができます。対象となる画像は URL で指定できる必要があります。

図10 画像を URL で指定する

画像ファイルに Wagby の img フォルダ下のファイルを指定することもできます。URL に "./img/画像ファイル名" と指定してください。

図11 URL に img フォルダ内の画像を指定する
  • "./img" を指定しない場合、"http://" が先頭に付与されます。
  • 説明欄に入力した文言は、画像にマウスをのせることで表示されます。
  • 画像ファイルを更新する場合は、アイコンをダブルクリックしてください。ダイアログが開きます。

HTMLソースを確認する

入力画面で、HTMLソースを直接、確認することができます。

図12 HTMLソースを確認する
HTMLの知識のある方は、タグを直接、編集することもできます。(セキュリティを考慮し、編集可能なタグはこのリッチテキストエリアが表現できるものに限定されています。任意のタグを記述できるようにはなっていません。)

プラグインを選択する

6種類のプラグインのうち、利用するものを選択することができます。標準では「スタイル」「フォントサイズ」「カラー」「リスト」「インデント」「レイアウト」が選択されています。

  • スタイル
  • フォントサイズ
  • カラー(背景色と文字色の設定)
  • リスト(中黒、数字の設定)
  • インデント
  • レイアウト(右寄せ、左寄せの設定)
  • 画像
  • HTMLソース表示
図13 テキストエリア(リッチ)のプラグインの選択
消しゴムアイコンと1文字消去アイコン(バツ印のアイコン)は常に表示されます。

使用上の注意点

テキストエリア(リッチ)を用いる場合は、次の点にご注意ください。

  • テキストエリア(リッチ)は詳細画面および登録/更新画面で有効です。検索画面における条件入力時および一覧更新画面には適用されません。
  • テキストエリア(リッチ)の場合、「行数」と「1行の文字数」は反映されません。入力欄の大きさは固定です。
  • これまでのテキストエリアを、テキストエリア(リッチ)に変更することは推奨していません。テキストエリア内の改行は、テキストエリア(リッチ)ではすべて無視されます。
  • 同じく、テキストエリア(リッチ)をテキストエリアに変更することも推奨していません。テキストエリア(リッチ)では HTML のタグを用いて文字修飾を行います。テキストエリアに変更すると、これまでのデータは HTML タグ付きの文字列となって表示されるようになります。
  • テキストエリア(リッチ)の項目をメール送信に適用する場合、REMOVEHTMLTAG関数を適用してください。送信するメールに HTML タグが付与されるためです。

画面例

詳細表示画面では、テキストエリア項目は「読み込み専用」として表示されます。(図14)

図14 テキストエリア項目の詳細表示画面での例

テキストエリアをラベルで表示するを設定すると、テキストエリアの枠を消去することができます。(図15)

図15 テキストエリアをラベルで表示する

定義方法

モデル項目詳細定義ダイアログの「出力制御」タブを開きます。「テキストエリア>ラベルで表示する」を有効にします。

図16 詳細画面の設定
図17 一覧画面の設定
この設定は「リッチテキストエリア」では利用できません。リッチテキストエリアで保存したデータにはHTMLタグが含まれてるため、ラベル表示を行うことはできません。

テキストエリアの入力可能な残り文字数をリアルタイムに表示することができます。図18にあるように、入力欄の右隅にゲージが表示されます。

図18 入力可能文字数を表現するゲージ

ゲージは残り入力可能文字数によって色が赤に変わります。

図19 ゲージの色が変化する

残り入力可能文字数がゼロになると、これ以上の文字の入力は行えません。

図20 入力可能文字がゼロとなったとき

定義方法

モデル項目詳細定義ダイアログの「入力制御」タブを開きます。「最大入力文字数」を指定します。また、入力項目の種類は「テキストエリア」とします。

図21 最大入力文字数と、入力項目の種類の設定

テキストエリア > 入力可能文字数を表示する設定を有効にします。

図22 入力可能文字数を表示する

一覧更新画面でのテキストエリア行数は別途、指定できます。 詳細は"画面>一覧更新>テキストエリアの行数・文字数"をお読みください。

テキストエリアに格納できる文字数は利用するデータベースによって変わります。詳細...

利用するWebブラウザによって、テキストエリアの動作が変わります。

リサイズ

テキストエリアのリサイズ機能は、Webブラウザによっては利用できません。図18は Windows 7 で Google Chrome を使ったとき、図19 は Internet Explorer 11 を使ったときの例です。

図23 Google Chrome ではリサイズが行える
図24 Internet Explorer 11 ではリサイズが行えない

リッチではない方のテキストエリアは、改行文字を "LF" (\n) で保持します。

Wagby Developer Day 2018