文字列 - テキストエリア

最終更新日: 2023年1月16日
R8 | R9

テキストエリア

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

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

定義方法

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

テキストエリアの指定

行数と文字数を指定する

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

行数を指定した例

定義方法

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

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

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

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

一括設定

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

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

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

テキストエリア(リッチ)

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

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

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

テキストエリア(リッチ)(登録後)

ワンポイント

修飾はHTMLタグによって行われます。

定義方法

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

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

高さと幅を指定する

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

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

スクロールバー

リッチテキストエリアの「高さ」を設定したとき、入力内容が設定した高さ以上になると自動でスクロールバーが表示されます。

単位を指定する

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

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

画像を埋め込む

リッチテキストエリアのプラグイン設定で「画像」を有効にすると、画像の埋め込みが行えるようになります。

プラグイン「画像」を有効にする

図のボタンをクリックすると画像を埋め込むことができます。対象となる画像はURL形式で指定します。

画像をURLで指定する

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

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

HTMLソースを確認する

リッチテキストエリアのプラグイン設定で「ソース表示」を有効にすると、入力内容をHTMLソースで表示します。

プラグイン「ソース表示」を有効にする

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

HTMLソースを確認する

ワンポイント

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

プラグインを選択する

6種類のプラグインのうち、利用するものを選択することができます。
標準では太字のものが有効になっています。

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

一覧更新画面での利用9.1.0

「入力制御>リッチテキストエリア」の「サイズ」設定は適用されません。代わって「出力制御>一覧画面>スタイルの「値の高さ」設定が反映されます。

使用上の注意点

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

  • 詳細画面および登録/更新画面で有効です。検索画面における条件入力時および一覧更新画面には適用されません。
  • 「行数」と「1行の文字数」は反映されません。入力欄の大きさは固定です。
  • 入力フィルタは適用されません。9.2.0
  • これまでのテキストエリアを、テキストエリア(リッチ)に変更することは推奨していません。テキストエリア内の改行は、テキストエリア(リッチ)ではすべて無視されます。
  • 同じく、テキストエリア(リッチ)をテキストエリアに変更することも推奨していません。テキストエリア(リッチ)では HTML のタグを用いて文字修飾を行います。テキストエリアに変更すると、これまでのデータは HTML タグ付きの文字列となって表示されるようになります。
  • テキストエリア(リッチ)の項目をメール送信に適用する場合、REMOVEHTMLTAG関数を適用してください。送信するメールに HTML タグが付与されるためです。具体的には隠し項目で上記関数を適用した文字列を保持させ、これをメールテンプレートで使用するようにしてください。
  • 最大文字数の設定は反映されません。代替案として「文字数チェック」をご利用ください。
  • テキストエリア(リッチ)では、文字列中に "<" と ">" を含めることができません。(この文字は除かれます。) この制約は R9.2.0 で解消されました。

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

画面例

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

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

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

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

重要

  • この設定は「テキストエリア(リッチ)」では利用できません。リッチテキストエリアで保存したデータにはHTMLタグが含まれてるため、ラベル表示を行うことはできません。
  • この設定は「HTMLテーブル」のみ有効です。「CSS layout(標準)」の場合は設定しても無視されます。

定義方法

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

詳細画面の設定
一覧画面の設定

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

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

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

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

ゲージの色が変化する

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

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

重要

この設定は「テキストエリア(リッチ)」では利用できません。

定義方法

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

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

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

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

仕様・制約

入力欄の大きさを変更する

テキストエリアは、幅と高さを変更することができます。下図は登録画面の幅を360px、高さを120pxとした例です。

テキストエリアのサイズを変更した例

一覧更新画面のテキストエリアもサイズが変更できます。
下図は子モデルの同時更新を適用し、子モデルの「備考」項目の幅と高さをそれぞれ360px、120pxとした例です。

(一覧更新画面)テキストエリアのサイズを変更した例

設定方法

「入力制御 > リッチテキストエリア > 通常」で幅と高さを指定します。

幅と高さの設定

一覧更新画面

一覧更新画面の場合は「入力制御 > リッチテキストエリア > 一覧更新」で値を指定します。

幅と高さの設定

一覧更新画面の場合

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

データベースとの関係

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

ブラウザとの関係

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

リサイズ

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

GoogleChromeではリサイズが行える
InternetExplorerではリサイズが行えない

内部で利用する改行コード

リッチではない方のテキストエリアは、改行文字を "LF" (\n) で保持します。 テキストエリア(リッチ)は改行をHTML要素 <br/> として扱います。