HDML Language

入力フォームいろいろ

HDMLで表現する入力フォームは、HTMLに慣れ親しんだ方々にはちょっとわかりにくいようです。
変数を使うことが出来るので、HTMLではCGIプログラムの力を借りなくては出来なかったことも
HDMLでは可能です。例えば、入力確認画面の出力をHDMLファイル内で記述できます。
変数に関する詳細は、「変数について」をご覧ください。

入力フォーム作成にあたっては、以下のことを常に念頭に置いてください。

  • ENTRYカードでは、SOFT1キーは文字種選択キーとして占有されるので、ACTIONを
    指定できない。指定しても無視される。ACCEPTキーは通常通り使用できる。
  • ENTRYカード・CHOICEカード共に、変数指定(KEY)には日本語を使用できない。
  • 入力フォームにジャンプしてくる時は、必ず「TASK=GOSUB」で来ること。
    そうしないと、以前に見ていたページで同じ変数名を使っていた場合、その値が変数に
    代入されてしまう(最初にNODISPLAYカードで変数を初期化する方法もある)。
    また、「TASK=GO」で入力フォームにジャンプしてきた場合、ユーザーが途中まで入力して、
    「PREV」キーで前画面に戻り入力フォームから抜けたとすると、入力フォーム内の変数を
    持っていってしまうことになる。
  • CGIなどの外部アプリケーションにユーザーが入力したデータを渡す時は、なるべく
    「METHOD=POST」 を使用する。GET メソッドにより、URLリクエストにユーザーが入力した
    データが含まれるのはセキュリティ上好ましくない。
    (このページでは、「METHOD=POST」 を前提とした説明しかしません。)
    (GETメソッドによる入力データの渡し方は、「変数について(他のアプリケーションに変数を渡す」をご覧下さい。)
  • ENTRYカードを多用しない。5枚も6枚も携帯電話からENTRYカードに入力するのは、
    骨が折れます。
  1. 入力フォームの基本
  2. 複数のカードによる入力フォーム
  3. 入力確認画面を追加する
  4. 最初に入力確認画面を表示する
  5. 入力した内容をリセットできるようにする
  6. リセット確認・送信実行確認画面を追加する
  7. 外部アプリケーション処理終了後の戻り画面を追加する
  8. 「FORMAT=」 による入力文字種の指定
  9. <応用編>HDMLの機能を生かし、ユーザービリティをUPさせる
1.入力フォームの基本
<HDML VERSION=3.0>
<ENTRY KEY=msg FORMAT=MM*M>
<ACTION TYPE=ACCEPT TASK=GOSUB DEST="msg.cgi"
LABEL=送信 METHOD=POST POSTDATA=Msg=$(msg)
>
メッセージをどうぞ

</ENTRY>
</HDML>
メッセージをどうぞ:
きむら_


文字        送信
ENTRYカード1枚だけの、入力フォームです。
まず、「KEY=msg」と指定することで、この入力フォームでユーザーが入力した「値」を格納する変数を指定します。「$msg」または、「$(msg)」で、その「値」を参照(代入)することができます。

「FORMAT=MM*M」は、全角1文字(半角2文字)以上の文字入力を必須にする指定です。
これにより、空文字列の送信を防止しています。
FORMAT指定については、「FORMAT=による文字種の指定」をご覧下さい。

「POSTDATA=Msg=$(msg)」で、外部アプリケーションに渡すデータを指定しています。
これは、「POSTDATA=変数名=値」の形になっており、「値」は、この入力フォームの冒頭で指定した
「KEY=msg」により、「$msg」となります。

「変数名」については、ここで初めて登場します。
HTMLの入力フォームで言う「name="・・・"」の、"・・・"の部分を直接指定しています。
上例では、「Msg」となっていますが、英数字ならば何でもよいのです。
例えば、以下のように指定してもOKです。

  • msg=$(msg)
  • comment=$(msg)

HDMLでは、このように変数名と値をセットにして、明示的に外部アプリケーションに渡さなければなりません。

Go to Top

2.複数のカードによる入力フォーム
<HDML VERSION=3.0>
<ENTRY KEY=name FORMAT=MM*M>
<ACTION TYPE=ACCEPT TASK=GO DEST=#second
LABEL=次へ
>
お名前

</ENTRY>
<CHOICE NAME=second KEY=siki>
<ACTION TYPE=ACCEPT TASK=GO DEST=#third
LABEL=選択
>
<ACTION TYPE=SOFT1 TASK=PREV LABEL=戻る>
好きな季節:
<CE VALUE=春>春
<CE VALUE=夏>夏
<CE VALUE=秋>秋
<CE VALUE=冬>冬
</CHOICE>
<ENTRY NAME=third KEY=msg EMPTYOK=TRUE>
<ACTION TYPE=ACCEPT TASK=GOSUB DEST="msg.cgi"
LABEL=送信 METHOD=POST
POSTDATA=Name=$(name)&Season=$(siki)&Msg=$(msg)
>
メッセージをどうぞ

</ENTRY>
</HDML>
お名前:
きむら_


文字        次へ
好きな季節:
1
2
3

4

戻る        選択
メッセージをどうぞ:



文字        送信
入力フォーム内のカードが3つあります。
3つのカードそれぞれに重複しない変数を設定します。
最初のENTRYカードで、ユーザーが入力した「お名前」が「$name」に格納されます。

次のCHOICEカードでは、選択肢それぞれに「VALUE=」を指定します。
ユーザーが選んだ項目の「値(VALUE)」が変数「$siki」に格納されます。

3つ目のENTRYカードでは、「EMPTYOK=TRUE」としました。これは、空文字列の送信を許可する
オプションです。
そして、「POSTDATA=Name=$(name)&Season=$(siki)&Msg=$(msg)」で、外部アプリケーションに渡す変数名と値のセットを3つ定義しています。
これは、「POSTDATA=変数名1=値1&変数名2=値2&変数名3=値3」の形になっています。
データが複数の時は、"&" でつなぎます。順番は関係ありません。

Go to Top

3.入力確認画面を追加する
<HDML VERSION=3.0>
<ENTRY NAME=first KEY=name FORMAT=MM*M>
<ACTION TYPE=ACCEPT TASK=GO DEST=#second
LABEL=次へ
>
お名前

</ENTRY>
<CHOICE NAME=second KEY=siki>
<ACTION TYPE=ACCEPT TASK=GO DEST=#third
LABEL=選択
>
<ACTION TYPE=SOFT1 TASK=PREV LABEL=戻る>
好きな季節:
<CE VALUE=春>春
<CE VALUE=夏>夏
<CE VALUE=秋>秋
<CE VALUE=冬>冬
</CHOICE>
<ENTRY NAME=third KEY=msg EMPTYOK=TRUE>
<ACTION TYPE=ACCEPT TASK=GO DEST=#check
LABEL=次へ>

メッセージをどうぞ

</ENTRY>
<DISPLAY NAME=check>
<ACTION TYPE=ACCEPT TASK=GOSUB DEST="msg.cgi"
LABEL=送信 METHOD=POST
POSTDATA=Name=$(name)&Season=$(siki)&Msg=$(msg)
>
<ACTION TYPE=SOFT1 TASK=GO DEST=#first
LABEL=修正
>
入力確認
<LINE>お名前:$name
<BR>好きな季節:$siki
<WRAP>メッセージ:$msg
</DISPLAY>
</HDML>
お名前:
きむら_


文字        次へ
好きな季節:
1
2
3

4

戻る        選択
メッセージをどうぞ:
とても面白いページ
ですね_


文字        次へ
入力確認
お名前:きむら
好きな季節:春
メッセージ:とても面白
いページですね
修正        送信
送信する前にユーザーが入力した内容を表示し、確認してから送信実行することができます。

3つ目のENTRYカードまでは、「2.複数のカードによる入力フォーム」と同じです。

4つ目のDISPLAYカードが入力確認画面となります。
「送信(ACCEPTキー)」を押すと「DEST=」で指定した外部アプリケーションに「POSTDATA=」で指定したデータを送信します。
「修正(SOFT1キー)」を押すと、入力内容を保持したまま最初のENTRYカードに戻ります。

    お名前:
    きむら_


    文字        次へ
    スタックされている変数:
    $(name)
    $(siki) 
    $(msg) 

    Go to Top

    4.最初に入力確認画面を表示する
    <HDML VERSION=3.0>
    <CHOICE NAME=check>
    <ACTION TYPE=ACCEPT LABEL=編集
    >
    <ACTION TYPE=SOFT1 TASK=GOSUB DEST="msg.cgi" LABEL=送信 METHOD=POST
    POSTDATA=Name=$(name)&Season=$(siki)&Msg=$(msg)
    >
    メッセージ作成
    <CE TASK=GO DEST=#first> お名前:$name
    <CE TASK=GO DEST=#second>好きな季節
    :$siki
    <CE TASK=GO DEST=#third>メッセージ
    :$msg
    </CHOICE>
    <ENTRY NAME=first KEY=name FORMAT=MM*M>
    お名前
    </ENTRY>
    <CHOICE NAME=second KEY=siki>
    好きな季節:
    <CE VALUE=春>春
    <CE VALUE=夏>夏
    <CE VALUE=秋>秋
    <CE VALUE=冬>冬
    </CHOICE>
    <ENTRY NAME=third KEY=msg EMPTYOK=TRUE>
    メッセージをどうぞ
    </ENTRY>
    </HDML>
    メッセージ作成
    1お名前:
    2
    好きな季節:
    3
    メッセージ:

    送信       編集
    お名前:
    きむら_



    OK
    メッセージ作成
    1お名前:きむら
    2
    好きな季節:
    3
    メッセージ:

    送信       編集
    1を選択 OK
    2を選択
    メッセージをどうぞ:
    とても面白いページ
    ですね_


    OK
    メッセージ作成
    1お名前:きむら
    2
    好きな季節:春
    3
    メッセージ:

    送信       編集
    好きな季節:
    1
    2
    3

    4

    OK
    3を選択
    OK
    メッセージ作成
    1お名前:きむら
    2
    好きな季節:春
    送信       編集
    3.入力確認画面を追加する」の順序を逆にして最初に入力確認画面を表示します。
    CHOICEカードで入力項目を選択の上、各ENTRYカードで入力という手順です。

    最初のCHOICEカードで、入力する項目の内容が一覧できるので、ユーザーは、好きな項目から入力することができます。

    ジャンプ先のそれぞれのENTRYカードで入力後、OKを押すと、ACCEPTキーの
    デフォルト動作が働き、入力データを反映した上で、前カードがリロードされます。

    この方法は、携帯電話内部のメールソフトでも採用されています。
    (実際にはアクティビティを利用してもっと複雑になっていますが)

    ただし、この方法では、外部アプリケーション側で空送信を禁止するようにしないと、ユーザーが最初のカードで直接「送信(ACCEPTキー)」を押した時、内容が空のまま送信してしまいます。

    Go to Top

    5.入力した内容をリセットできるようにする
    <HDML VERSION=3.0>
    <!--元のアクティビティ-->
    <DISPLAY>
    <ACTION TYPE=ACCEPT TASK=GOSUB DEST=#first
    LABEL=入力
    >
    入力よろしくね。
    </DISPLAY>
    <!--サブアクティビティ-->
    <ENTRY NAME=first KEY=name FORMAT=MM*M>
    <ACTION TYPE=ACCEPT TASK=GO DEST=#second
    LABEL=次へ
    >
    お名前

    </ENTRY>
    <CHOICE NAME=second KEY=siki>
    <ACTION TYPE=ACCEPT TASK=GO DEST=#third
    LABEL=選択
    >
    <ACTION TYPE=SOFT1 TASK=PREV LABEL=戻る>
    好きな季節:
    <CE VALUE=春>春
    <CE VALUE=夏>夏
    <CE VALUE=秋>秋
    <CE VALUE=冬>冬
    </CHOICE>
    <ENTRY NAME=third KEY=msg EMPTYOK=TRUE>
    <ACTION TYPE=ACCEPT TASK=GO DEST=#check
    LABEL=次へ>

    メッセージをどうぞ

    </ENTRY>
    <DISPLAY NAME=check>
    <ACTION TYPE=SOFT1 TASK=CANCEL
    LABEL=Reset
    >
    <ACTION TYPE=ACCEPT TASK=GOSUB DEST="msg.cgi"
    LABEL=送信 METHOD=POST
    POSTDATA=Name=$(name)&Season=$(siki)&Msg=$(msg)
    >
    入力確認
    <LINE>お名前:$name
    <BR>好きな季節:$siki
    <WRAP>メッセージ:$msg
    </DISPLAY>
    </HDML>
    入力よろしくね。



    入力
    お名前:
    きむら_


    文字        次へ
    好きな季節:
    1
    2
    3

    4

    戻る        選択
    メッセージをどうぞ:
    とても面白いページ
    ですね_


    文字        次へ
    入力確認
    お名前:きむら
    好きな季節:春
    メッセージ:とても面白
    いページですね
    Reset        送信
    これは、「3.入力確認画面を追加する」をリセット可能にしたものです。アクティビティを利用しており、まず、最初のDISPLAYカードで「TASK=GOSUB」でENTRYカード(#first)にジャンプします。

    この操作で、サブアクティビティが起動したことになります。
    PC用のブラウザで新しいウィンドウが開いたと思ってください。

    3枚のENTRYカードは、上で説明したとおりです。

    最後の入力確認画面で、「Reset(SOFT1キー)」を押すと「TASK=CANCEL」が働き、元のアクティビティである最初のDISPLAYカードに戻ります。
    その際、現サブアクティビティの入力内容は破棄されます。
    PCで例えると、先ほど開いた新しいウィンドウが閉じて元のウィンドウが表示されたと言うことになります。

    ただし、この例だと「リセット前の確認」画面がないので、ユーザーが誤操作で「Reset(SOFT1キー)」を押してしまった場合、せっかく入力した内容が失われてしまい、ガックリということになります。

      入力よろしくね。



      入力
      スタックされている変数:
      (なし)

      Go to Top

      6.リセット確認・送信実行確認画面を追加する
      <HDML VERSION=3.0>
      <!--元のアクティビティ-->
      <DISPLAY>
      <ACTION TYPE=ACCEPT TASK=GOSUB DEST=#check LABEL=入力
      >
      入力よろしくね。
      </DISPLAY>
      <!--サブアクティビティ-->
      <CHOICE NAME=check>
      <ACTION TYPE=ACCEPT LABEL=編集
      >
      <ACTION TYPE=SOFT1 TASK=GO DEST=#confirm LABEL=送信
      >
      メッセージ作成
      <CE TASK=GO DEST=#first>お名前:$(name)
      <CE TASK=GO DEST=#second>好きな季節
      :$(siki)
      <CE TASK=GO DEST=#third>メッセージ
      :$(msg)
      <CE TASK=GO DEST=#reset LABEL=reset>リセットする
      </CHOICE>
      <ENTRY NAME=first KEY=name FORMAT=MM*M>

      お名前
      </ENTRY>
      <CHOICE NAME=second KEY=siki>

      好きな季節:
      <CE VALUE=春>春
      <CE VALUE=夏>夏
      <CE VALUE=秋>秋
      <CE VALUE=冬>冬
      </CHOICE>
      <ENTRY NAME=third KEY=msg EMPTYOK=TRUE>

      メッセージをどうぞ
      </ENTRY>
      <DISPLAY NAME=reset>
      <ACTION TYPE=ACCEPT TASK=PREV LABEL=No>
      <ACTION TYPE=SOFT1 TASK=CANCEL LABEL=Yes>
      入力内容を破棄しますか?
      </DISPLAY>
      <DISPLAY NAME=confirm>
      <ACTION TYPE=ACCEPT TASK=GOSUB DEST="msg.cgi" LABEL=Yes
      METHOD=POST POSTDATA=Name=$(name)&Season=$(siki)&Msg=$(msg)>
      <ACTION TYPE=SOFT1 TASK=PREV LABEL=No>
      送信します。<BR>
      よろしいですか?
      </DISPLAY>
      </HDML>
      入力よろしくね。




      入力
      メッセージ作成
      1お名前:
      2好きな季節:
      3メッセージ:
      4リセットする
      送信       編集
      お名前:
      きむら_



      OK
      メッセージ作成
      1お名前:きむら
      2
      好きな季節:
      3
      メッセージ:
      4リセットする
      送信       編集
      1を選択 OK
      2を選択
      メッセージをどうぞ:
      とても面白いページ
      ですね_


      OK
      メッセージ作成
      1お名前:きむら
      2好きな季節:春
      3メッセージ:
      4リセットする
      送信       編集
      好きな季節:
      1
      2
      3

      4

      OK
      3を選択
      OK
      OK
      メッセージ作成
      1お名前:きむら
      2好きな季節:

      4リセットする
      送信       Reset
      入力内容を破棄しま
      すか?



      Yes         No
      メッセージ作成
      1お名前:きむら
      2好きな季節:

      4リセットする
      送信       Reset
      No
      (破棄しない)
      Reset
      Yes
      (破棄する)
      送信します
      よろしいですか?



      No         Yes
      入力よろしくね。




      入力
      4.最初に入力確認画面を表示する」をリセット可能にし、さらにリセット確認・送信実行確認画面を追加しました。

      最初のCHOICEカードと、それぞれのENTRYカードとの対応は、上で説明したとおりです。

      違うのは、リセット・送信の前にワンクッション置いていることです。
      ユーザーの誤操作を防止できます。

      「リセット確認画面」で、「Yes」を選択すると、「TASK=CANCEL」が働き、入力内容を破棄して元のアクティビティである最初のDISPLAYカードに戻ります。「No」を選択すると、「TASK=PREV」で前画面に戻ります。入力内容は保持されます。

      「送信確認画面」で、「Yes」を選択すると、外部アプリケーションの「msg.cgi」にPOSTDATAで指定した変数と値のセットを送信します。「No」なら前画面です。

      ただし、上でも説明しましたが、この方法では、外部アプリケーション側で空送信を禁止するようにしないと、ユーザーが最初のカードで直接「送信(ACCEPTキー)」を押し、さらに送信確認画面でも「Yes」を選択すると内容が空のまま送信してしまいます。

      Go to Top

      7.外部アプリケーション処理終了後の戻り画面を追加する
      <HDML VERSION=3.0>
      <!--元のアクティビティ-->
      <DISPLAY>
      <ACTION TYPE=ACCEPT TASK=GOSUB DEST=#first
      LABEL=入力
      >
      入力よろしくね。
      </DISPLAY>
      <!--サブアクティビティ-->
      <ENTRY NAME=first KEY=name FORMAT=MM*M>
      <ACTION TYPE=ACCEPT TASK=GO DEST=#second
      LABEL=次へ
      >
      お名前

      </ENTRY>
      <CHOICE NAME=second KEY=siki>
      <ACTION TYPE=ACCEPT TASK=GO DEST=#third
      LABEL=選択
      >
      <ACTION TYPE=SOFT1 TASK=PREV LABEL=戻る>
      好きな季節:
      <CE VALUE=春>春
      <CE VALUE=夏>夏
      <CE VALUE=秋>秋
      <CE VALUE=冬>冬
      </CHOICE>
      <ENTRY NAME=third KEY=msg EMPTYOK=TRUE>
      <ACTION TYPE=ACCEPT TASK=GO DEST=#check
      LABEL=次へ>

      メッセージをどうぞ

      </ENTRY>
      <DISPLAY NAME=check>
      <ACTION TYPE=SOFT1 TASK=CANCEL
      LABEL=Reset
      >
      <ACTION TYPE=ACCEPT TASK=GOSUB DEST="msg.cgi"
      LABEL=送信 NEXT=#thanks METHOD=POST
      POSTDATA=Name=$(name)&Season=$(siki)&Msg=$(msg)
      >
      入力確認
      <LINE>お名前:$name
      <BR>好きな季節:$siki
      <WRAP>メッセージ:$msg
      </DISPLAY>
      <DISPLAY NAME=thanks>
      メッセージの送信<BR>
      ありがとうございました
      </DISPLAY>
      </HDML>
      入力よろしくね。



      入力
      お名前:
      きむら_


      文字        次へ
      好きな季節:
      1
      2
      3

      4

      戻る        選択
      メッセージをどうぞ:
      とても面白いページ
      ですね_


      文字        次へ
      入力確認
      お名前:きむら
      好きな季節:春
      メッセージ:とても面白
      いページですね
      Reset        送信
      これは、「5.入力した内容をリセットできるようにする」に、外部アプリケーション処理終了後の画面を追加したものです。

      入力確認画面のACTIONタグ内で「TASK=GOSUB」と「NEXT=#thanks」を指定しておきます。

      「NEXT=#thanks」は、この先のサブアクティビティで「TASK=RETURN」があったらここに戻って「#thanks」を表示しなさいという意味です。

      HDMLでは、サブアクティビティを起動した元のアクティビティを記憶しておき、「TASK=RETURN」,「TASK=CANCEL」があると自動的に元のアクティビティに戻ってくる仕組みになっています。
      そして、さらに「TASK=RETURN」には「NEXT=」、「TASK=CANCEL」には「CANCEL=」を対応させることにより、元アクティビティのカードをスキップして指定したカードまたはデッキにジャンプさせることが出来ます。

      この例では、元アクティビティである入力確認画面(#check)をスキップして、#thanksカードにジャンプする訳です。
      「CANCEL=」は未指定ですので、単に入力内容を破棄して元アクティビティを表示するようになっています。

      ここで忘れてはいけないのは、外部アプリケーション側で、処理終了後にNODISPLAYカードを出力し、「TASK=RETURN」を指定してやらなければならないことです。

      例えば、Perlスクリプトなら、

      (msg.cgi)
       ・・・・・・
       (入力データの処理)
       ・・・・・・
       print "Content-type:text/x-hdml;charset=Shift_JIS\n\n";
       print "<HDML>\n";
       print "<NODISPLAY>\n";
       print "<ACTION TYPE=ACCEPT TASK=RETURN>\n";
       print "</NODISPLAY>\n";
       print "</HDML>\n";
       exit;

      となります。
      (2001/11/20 この色の部分を追加。失礼しました)

      外部アプリケーション
      msg.cgiによる処理

      NODISPLAYカード出力
      メッセージの送信
      ありがとうございました


      OK

      Go to Top

      8.「FORMAT=」による入力文字種の指定
      ENTRYカードでは、ユーザーが入力する文字種を指定することが出来ます。
      ただし、これは1バイト文字の入力を前提とした文字種指定なので、日本語(全角文字/半角カナ等)の文字種指定をすることは出来ません。

      ENTRYカードは、デフォルトでは「EMPTYOK=FALSE」(空文字不可)となっています。
      しかし、この「FORMAT=*M」(すべての文字種入力可&桁数無指定)がデフォルトなので、何も指定しないと空文字入力許可となります。

      入力フォームでは、外部アプリケーション側で空文字チェックをしないのであれば、1項目以上必ずこの「FORMAT=」指定をするべきです。

      文字種 説明
      A 文字のみ(数字不可)
      a 文字のみ(数字不可)
      N 数字(「*」「#」以外の記号不可)
      X 数字,記号,英文字
      x 数字,記号,英文字
      M すべての文字
      ほとんどの機種で、最初は、
        漢字モードとなる(変更可)
      m すべての文字
      ほとんどの機種で、最初は、
        英
      文字モードとなる(変更可)
      特殊文字 説明 制限
      数字 直後の文字種の桁数を指定する 文字種指定の最後の1文字種にしか指定できない
      * 直後の文字種の桁を無制限にする 文字種指定の最後の1文字種にしか指定できない
      \ 直後の1文字をそのまま表示する 特になし
      桁数指定の注意
      桁数を指定すると、その桁数になるまで、次のカードに進めなくなります。
      例えば、「FORMAT=4N」と指定した場合、4桁の数字を入力しない限り、次画面に進めません。

      (2001/11/29 訂正)
      *A、5a、2N」などのように「* または数字+文字種」のみで指定した場合、
      ”0個以上”の入力を認めることになりますので、上記の記述は誤りです。
      お詫びして訂正します。4桁の数字を入力しない限り、次画面に進めないようにFORMAT指定
      するには、「FORMAT=NNNN」が正しい指定方法です。

      例8-1
      全角1文字以上入力するようにする文字種指定
      <ENTRY KEY=msg FORMAT=MM*M>
      メッセージ:
      </ENTRY>
      例8-2
      クレジットカード番号の文字種指定
      クレジットカードの種類によってはこれではダメな場合もある。
      <ENTRY KEY=credit FORMAT=NNNN\-NNNN\-NNNN\-4N>
      クレジットカードNo.:
      </ENTRY>
      例8-3
      郵便番号の文字種指定
      <ENTRY KEY=post FORMAT=\〒NNN\-4N>
      郵便番号:
      </ENTRY>
      例8-4
      URLの文字種指定
      <ENTRY KEY=url FORMAT=\h\t\t\p\:\/\/*m>
      URL:
      </ENTRY>
      例8-5
      4桁の暗証番号(数字)の文字種指定
      「NOECHO=TRUE」は、入力内容を「*」で表示するオプション設定です。
      <ENTRY KEY=pass FORMAT=NNNN NOECHO=TRUE>
      暗証番号:
      </ENTRY>
      !注意
      「NORCHO=TRUE」を指定するのは、数字入力に限るようにしましょう。
      携帯電話での入力では、例えアルファベットでも「*」で表示されてしまうと、
      ユーザーは自分で考えている文字がきちんと入力されているのかとても不安になりますし、
      誤入力を誘うことにもつながります。

      Go to Top

      9.<応用編>HDMLの機能を生かし、ユーザービリティをUPさせる
      ここまでの例では、理解しやすいように比較的単純にHDMLでの入力フォームのサンプルを挙げてきました。

      しかし、実際には、もっと変数を利用してHDML独自の機能を生かし、ユーザーがより直感的に操作できるような入力フォームが望ましいのです。

      少しわかりにくいですが、私なりに考えた入力フォームを2つ挙げておきます。




      最初がCHOICEカードの入力フォーム

      <HDML VERSION=3.0>
      <!--元のアクティビティ-->
      <CHOICE NAME=check IKEY=ik>
      <ACTION TYPE=ACCEPT LABEL=編集>
      <ACTION TYPE=SOFT1 TASK=GO DEST=#confirm LABEL=送信>
      <ACTION TYPE=PREV TASK=GOSUB DEST=#reset FRIEND=TRUE RECEIVE=ik VARS="ik=1">
      メッセージ作成
      <CE TASK=GOSUB DEST=#first RECEIVE="name;ik" VARS="val=$(name)&ik=2">
      お名前:$(name)
      <CE TASK=GOSUB DEST=#second RECEIVE="siki;ik" VARS="val=$(siki)&ik=3">
      好きな季節:$(siki)
      <CE TASK=GOSUB DEST=#third RECEIVE="msg;ik" VARS="val=$(msg)&ik=4">
      メッセージ:$(msg)
      </CHOICE>
      <!--サブアクティビティ(お名前入力)-->
      <ENTRY NAME=first KEY=val FORMAT=MM*M>
      <ACTION TYPE=ACCEPT TASK=RETURN RETVALS="$(val);$ik">
      お名前:
      </ENTRY>
      <!--サブアクティビティ(季節入力)-->
      <CHOICE NAME=second KEY=val>
      <ACTION TYPE=ACCEPT TASK=RETURN RETVALS="$(val);$ik">
      好きな季節:
      <CE VALUE=春>春
      <CE VALUE=夏>夏
      <CE VALUE=秋>秋
      <CE VALUE=冬>冬
      </CHOICE>
      <!--サブアクティビティ(メッセージ入力)-->
      <ENTRY NAME=third KEY=val EMPTYOK=TRUE>
      <ACTION TYPE=ACCEPT TASK=RETURN RETVALS="$(val);$ik">
      メッセージをどうぞ:
      </ENTRY>
      <!--サブアクティビティ(リセット)-->
      <DISPLAY NAME=reset>
      <ACTION TYPE=ACCEPT TASK=PREV LABEL=No>
      <ACTION TYPE=SOFT1 TASK=RETURN LABEL=Yes CLEAR=TRUE RETVALS=$ik>
      入力内容を破棄しますか?
      </DISPLAY>
      <!--ここは元のアクティビティ内-->
      <DISPLAY NAME=confirm>
      <ACTION TYPE=ACCEPT TASK=GOSUB DEST="msg.cgi" LABEL=Yes
      METHOD=POST POSTDATA=Name=$(name)&Season=$(siki)&Message=$(msg)
      NEXT=#thanks CANCEL=#check>
      <ACTION TYPE=SOFT1 TASK=PREV LABEL=No>
      送信します。<BR>
      よろしいですか?
      </DISPLAY>
      <!--msg.cgiからの戻り先-->
      <DISPLAY NAME=thanks>
      メッセージの送信<BR>
      ありがとうございました
      </DISPLAY>
      </HDML>
      メッセージ作成
      1お名前:
      2好きな季節:
      3メッセージ:

      送信       編集
      お名前:
      きむら_



      OK
      メッセージ作成
      1お名前:きむら
      2
      好きな季節:
      3
      メッセージ:

      送信       編集
      1を選択 OK
      2を選択
      メッセージをどうぞ:
      とても面白いページ
      ですね_


      OK
      メッセージ作成
      1お名前:きむら
      2好きな季節:春
      3メッセージ:

      送信       編集
      好きな季節:
      1
      2
      3

      4

      OK
      3を選択
      OK
      OK
      メッセージ作成
      1お名前:きむら
      2好きな季節:春


      送信       編集
      入力内容を破棄しま
      すか?



      Yes         No
      メッセージ作成
      1
      お名前:
      2好きな季節:
      3メッセージ:

      送信       編集
      Yes
      (破棄する)
      PREVキー
         No
      (破棄しない)
      送信
      送信します。
      よろしいですか?



      No         Yes
      メッセージの送信
      ありがとうございました


      OK
      外部アプリケーション
      msg.cgiによる処理

      NODISPLAYカード出力
      Yes
      No
      メッセージ作成
      1
      お名前:きむら
      2好きな季節:春


      送信       編集
      どうでしょう。ソースを見ただけでどんな動きをするのかわかりますか?

      アクティビティの概念と、変数を駆使した入力フォームです。
      ひとつひとつ説明すると、大変長くなりますので、ポイントだけ挙げておきます。

      • CHOICEカードからENTRYカードにジャンプし、入力後、「OK」を押すと、元のCHOICEカードに戻る。その際、自動的に次の選択肢が選択された状態になる。
      • 最初のCHOICEカードで「PREVキー(クリアキー)」を押した時のみ、リセット確認画面が表示される。ただし、この場合、「NEXT=」でリセットした後に表示する画面(デッキ又はカード)を指定しておかないとなりません。
      • リセット実行には、アクティビティ間の変数クリアを可能にするため「FRIEND=TRUE」&「CLEAR=TRUE」を使用している。
      • 外部アプリケーションで何らかのエラーが生じた場合、エラー処理としてHDMLを出力するように
        して、ACTIONタグ内で「TASK=CANCEL」を指定すれば、自動的に最初のCHOICEカードに戻る仕組みになっている。
      • 空送信を防止するには、外部アプリケーション側で対処すること。



      最初がENTRYカードの入カフォーム

      <HDML VERSION=3.0>
      <!--元のアクティビティ(お名前入力)-->
      <ENTRY NAME=first KEY=name FORMAT=MM*M>
      <ACTION TYPE=ACCEPT TASK=GOSUB VARS=name=$(name)&siki=$(siki)&msg=$(msg)
      RECEIVE=siki;msg NEXT=#confirm DEST=#second LABEL=次へ>
      <ACTION TYPE=PREV TASK=GOSUB DEST=#reset FRIEND=TRUE>
      お名前:
      </ENTRY>
      <!--サブアクティビティ(送信実行画面)-->
      <DISPLAY NAME=confirm>
      <ACTION TYPE=ACCEPT TASK=GOSUB DEST="msg.cgi" CANCEL=#first LABEL=Yes
      METHOD=POST POSTDATA=Name=$(name)&Season=$(siki)&Massagee=$(msg)>
      <ACTION TYPE=SOFT1 TASK=PREV LABEL=No>
      送信します 。<BR>
      よろしいですか?
      </DISPLAY>
      <!--サブアクティビティ(季節入力)-->
      <CHOICE NAME=second KEY=siki>
      <ACTION TYPE=ACCEPT TASK=GO DEST=#third LABEL=選択>
      <ACTION TYPE=SOFT1 TASK=PREV LABEL=戻る>
      $(name)さんの
      <BR>好きな季節は?:
      <CE VALUE=春>春
      <CE VALUE=夏>夏
      <CE VALUE=秋>秋
      <CE VALUE=冬>冬
      </CHOICE>
      <!--サブアクティビティ(メッセージ入力)-->
      <ENTRY NAME=third KEY=msg EMPTYOK=TRUE>
      <ACTION TYPE=ACCEPT TASK=GO DEST=#check LABEL=次へ>
      <ACTION TYPE=PREV TASK=GO DEST=#second>
      <LINE> $(siki)が好きな$(name)さん
      <WRAP>メッセージをどうぞ:
      </ENTRY>
      <!--サブアクティビティ内(入力内容確認画面)-->
      <DISPLAY NAME=check>
      <ACTION TYPE=ACCEPT TASK=RETURN RETVALS=$siki;$msg LABEL=送信>
      <ACTION TYPE=SOFT1 TASK=PREV LABEL=戻る>
      入力内容確認
      <BR>お名前:$name
      <BR>好きな季節:$siki
      <WRAP>メッセージ:$msg
      </DISPLAY>
      <!--サブアクティビティ内(リセット確認画面)-->
      <DISPLAY NAME=reset>
      <ACTION TYPE=ACCEPT TASK=PREV LABEL=No>
      <ACTION TYPE=SOFT1 TASK=RETURN LABEL=Yes CLEAR=TRUE>
      入力内容を破棄しますか?
      </DISPLAY>
      <!--msg.cgiからの戻り画面-->
      <DISPLAY NAME=thanks>
      メッセージの送信<BR>
      ありがとうございました
      </DISPLAY>
      </HDML>
      お名前:
      きむら_



      文字        次へ
      きむらさんの
      好きな季節は?:
      1
      2
      3
      4
      戻る        選択
      春が好きなきむらさん
      メッセージをどうぞ:
      とても面白いページ
      ですね_

      文字        次へ
      次へ 選択
      次へ
      PREVキー
      No
      戻る
      入力内容を破棄しま
      すか?



      Yes         No
      入力内容確認
      お名前:きむら
      好きな季節:春
      メッセージ:とても面白
      いページですね
      戻る        送信
      送信
      Yes
      送信します。
      よろしいですか?



      No         Yes
      No
      お名前:



      文字        次へ
      外部アプリケーション
      msg.cgiによる処理

      NODISPLAYカード出力
      メッセージの送信
      ありがとうございました


      OK
      どちらかというと、こちらの入力フォームの方がわかりやすいかもしれません。

      ポイントだけ説明します。

      • 「お名前入力カード」→「季節入力カード」→「メッセージ入力カード」と、それぞれの入力データを渡しながら移動する。
      • 「入力確認画面」から、最初のENTRYカード(お名前入力)に「TASK=RETURN」で戻る際、
        サブアクティビティ内で入力した「季節」と「メッセージ」を「RETVALS=$siki;$msg」で渡す。
        変数を受け取ると、「NEXT=#confirm」が働いて、「送信実行画面」へジャンプする。
      • リセット実行には、アクティビティ間の変数クリアを可能にするため「FRIEND=TRUE」&「CLEAR=TRUE」を使用している。
      • 最初のCHOICEカードで「PREVキー(クリアキー)」を押した時のみ、リセット確認画面が表示
        される。ただし、この場合、「NEXT=」でリセットした後に表示する画面(デッキ又はカード)を指定しておかないとなりません。
      • 外部アプリケーションで何らかのエラーが生じた場合、エラー処理としてHDMLを出力するように
        して、ACTIONタグ内で「TASK=CANCEL」を指定すれば、自動的に最初のENTRYカードに戻る仕組みになっている。
      Go to Top

      Home Pageに戻る


      最終更新日:2005年7月30日