HDML入門 / HDML beginner

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