HDML入門 / HDML beginner

1784dc14078e1814c6d0c0959b0b7324?s=47 sapi_kawahara
December 19, 2019

HDML入門 / HDML beginner

1784dc14078e1814c6d0c0959b0b7324?s=128

sapi_kawahara

December 19, 2019
Tweet

Transcript

  1. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT HDML入門 さっぴー川原 @sapi_kawahara 1

  2. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT 自己紹介 • 名前:川原 英明 • Twitter:@sapi_kawahara

    • 業務:五反田の企業でEM&フルスタックエンジニア • スキル:コンシューマーゲームプログラマー、最近IT業 界にジョブチェンジしました! • マンモス本を片手に、PostgreSQLを理解しつつ、Perlの フレームワークを自作しながら仕事してます。 2
  3. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT iモード使っていますか? • 画面が小さいから流行らない!? • モノクロだから流行らない!? •

    使えば使うほど料金かかるのが痛い!? • 公式メニューは月額料金が別にかかるのが痛い!? • そもそも、Webを家の外で見ないよね!? • 知ってました?メールサービスを使うついでに、使って いる人が多いんですよ!! 3
  4. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT でも、俺の携帯電話は 織田裕二が使っている IDOなんだよね 4

  5. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT IDO公式メニューサイトを作りましょう 5

  6. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT その名も EZaccess !! 6

  7. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT そのためにはHDMLの知識が必要です! 7

  8. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT What’s HDML? 8 • Handheld Device

    Markup Languageの略です。 • <HDML>から始まります。(デッキと呼びます) • 1つのデッキには複数のカードがあります。 • DISPLAY、CHOICE、ENTRY、NODISPLAYカードがあり ます。 • 変数があります。 • それではHDMLを書いてみましょう!
  9. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT デッキとカードの説明 9 <HDML version="3.0"> <DISPLAY name="1">

    Hello EZaccess! <BR> <A task="go" dest="#2">続き </A> </DISPLAY> <DISPLAY name="2"> 恐怖の大魔王!<BR> <A task="go" dest="#3">続き </A> </DISPLAY> <DISPLAY name="3"> 来なかったね!<BR> <A task="go" dest="#1">戻る </A> </DISPLAY> </HDML> • 全体がデッキです。 • DISPLAYタグに囲まれたのがカード です。 • この例では3枚のカードがあります。 • 上から順番に表示されます。 • 1のカードが表示され、続きのリンク をクリックすると、2のカードが表示 されます。 ① ② ③
  10. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT これでサーバーにアップしましょう! 10

  11. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT ちょっと待った!まずは .htaccessの修正! • 修正しないと .hdml はプレーンテキストと判定されてし

    まいます。 • 画像はBMPなので、その対応をします。 • そのため、公開するサーバーの .htaccess に以下記述を 記載します。 ◦ AddType text/x-hdml;charset=Shift_JIS .hdml ◦ AddType image/bmp .bmp ◦ DirectoryIndex index.hdml • おまけでデフォルトファイルを index.hdml に変えます。 11
  12. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT 確認にはシミュレーターが便利 • シミュレーターをダウンロードします。 ◦ http://web.archive.org/web/20041230214346/http://developer.o penwave.com/ja/tools_and_sdk/openwave_mobile_sdk/SDK62K/Op

    enwave_SDK_62K.exe • Windowsで動きます。 • Mac版欲しいなぁ。 12
  13. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT インストーラー Openwave_SDK_62Kを起動 13

  14. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT 基本「Next」でいけます 14

  15. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT インストール完了! • 起動したら、ファ イアウォールで 「アクセスを許可 する」をクリック

    する。 • 閲覧したいURLや ファイルを指定し ます。 15
  16. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT これで上手く表示されたはず! 16

  17. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT 次は変数を使いましょう! 17

  18. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT 変数の使い方 18 <HDML version=3.0> <ENTRY key=moji>

    <ACTION type=accept task=go dest=#2> 好きな文字を入力してね </ENTRY> <DISPLAY name=2> あなたが入力した文字は<BR> $moji です!<BR> <DISPLAY> </HDML> • ENTRYタグのkeyに変数名を指定しま す。 • 入力モードで表示されます。 • 文字入力後、画面遷移すると、次画 面の変数名に、入力した文字が表示 されます。
  19. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT フロントだけで インタラクティブな画面が作れる 次世代仕様! 19

  20. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT 最後に入力フォームを作ろう! 20

  21. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT サブアクティビティを使います 21 <HDML VERSION=3.0> <CHOICE> <ACTION

    type=accept> <CE task=gosub dest=#1 vars="title=名前&val=$(name)" receive="name"> 名前:$(name) <CE task=gosub dest=#1 vars="title=メールアドレス &val=$(email)" receive="email"> email: $(email) <CE task=gosub dest=#reset friend=true label="Reset"> リセット </CHOICE> <ENTRY key=val name=1> <ACTION type=accept task=return retvals="$(val)"> $(title): </ENTRY> <NODISPLAY name=reset> <action type=accept task=return clear=true> </NODISPLAY> </HDML> • CHOICEで3つの入力を受け付け て、上二つは1というカードに移 動してます。 • gosubとreturnで移動し、変数 はreceiveで受け取りretvalsで 返す。 • varsをサブアクティビティに渡 す変数を設定します。 • resetサブアクティビティでは friend=trueに指定されたカー ドになっていて、clear=trueで カレントアクティビティの変数 をクリアできます。
  22. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT JavaScript不要だね?! 22

  23. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT Tips! 23 • タグの名前は間違えない! • シングルタグに/は付けないで!<BR/>はダメ!

    • 対になるタグは、ちゃんと閉じる! • 引用符も、ちゃんと閉じる! • 上記を守らないと、コンパイルエラーが出てWebには一 切でない! • エラーの行番号も出ません。 • .htaccessの設定を忘れずに!
  24. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT まとめ • HDMLは次世代のHTMLだ! • カード単位で画面遷移が楽々! •

    変数が使える! • サブアクティビティ最強! • みんなもHDMLを使ってIDOの公式メニュー に登録されよう! 24