Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HDML入門 / HDML beginner

sapi_kawahara
December 19, 2019

HDML入門 / HDML beginner

sapi_kawahara

December 19, 2019
Tweet

More Decks by sapi_kawahara

Other Decks in Education

Transcript

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

    View full-size slide

  2. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT
    自己紹介
    ● 名前:川原 英明
    ● Twitter:@sapi_kawahara
    ● 業務:五反田の企業でEM&フルスタックエンジニア
    ● スキル:コンシューマーゲームプログラマー、最近IT業
    界にジョブチェンジしました!
    ● マンモス本を片手に、PostgreSQLを理解しつつ、Perlの
    フレームワークを自作しながら仕事してます。
    2

    View full-size slide

  3. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT
    iモード使っていますか?
    ● 画面が小さいから流行らない!?
    ● モノクロだから流行らない!?
    ● 使えば使うほど料金かかるのが痛い!?
    ● 公式メニューは月額料金が別にかかるのが痛い!?
    ● そもそも、Webを家の外で見ないよね!?
    ● 知ってました?メールサービスを使うついでに、使って
    いる人が多いんですよ!!
    3

    View full-size slide

  4. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT
    でも、俺の携帯電話は
    織田裕二が使っている
    IDOなんだよね
    4

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT
    What’s HDML?
    8
    ● Handheld Device Markup Languageの略です。
    ● から始まります。(デッキと呼びます)
    ● 1つのデッキには複数のカードがあります。
    ● DISPLAY、CHOICE、ENTRY、NODISPLAYカードがあり
    ます。
    ● 変数があります。
    ● それではHDMLを書いてみましょう!

    View full-size slide

  9. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT
    デッキとカードの説明
    9


    Hello EZaccess!

    続き



    恐怖の大魔王!

    続き



    来なかったね!

    戻る



    ● 全体がデッキです。
    ● DISPLAYタグに囲まれたのがカード
    です。
    ● この例では3枚のカードがあります。
    ● 上から順番に表示されます。
    ● 1のカードが表示され、続きのリンク
    をクリックすると、2のカードが表示
    されます。



    View full-size slide

  10. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT
    これでサーバーにアップしましょう!
    10

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  13. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT
    インストーラー Openwave_SDK_62Kを起動
    13

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT
    これで上手く表示されたはず!
    16

    View full-size slide

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

    View full-size slide

  18. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT
    変数の使い方
    18


    task=go dest=#2>
    好きな文字を入力してね


    あなたが入力した文字は

    $moji です!



    ● ENTRYタグのkeyに変数名を指定しま
    す。
    ● 入力モードで表示されます。
    ● 文字入力後、画面遷移すると、次画
    面の変数名に、入力した文字が表示
    されます。

    View full-size slide

  19. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT
    フロントだけで
    インタラクティブな画面が作れる
    次世代仕様!
    19

    View full-size slide

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

    View full-size slide

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



    receive="name">
    名前:$(name)

    email: $(email)

    リセット



    $(title):





    ● CHOICEで3つの入力を受け付け
    て、上二つは1というカードに移
    動してます。
    ● gosubとreturnで移動し、変数
    はreceiveで受け取りretvalsで
    返す。
    ● varsをサブアクティビティに渡
    す変数を設定します。
    ● resetサブアクティビティでは
    friend=trueに指定されたカー
    ドになっていて、clear=trueで
    カレントアクティビティの変数
    をクリアできます。

    View full-size slide

  22. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT
    JavaScript不要だね?!
    22

    View full-size slide

  23. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT
    Tips!
    23
    ● タグの名前は間違えない!
    ● シングルタグに/は付けないで!
    はダメ!
    ● 対になるタグは、ちゃんと閉じる!
    ● 引用符も、ちゃんと閉じる!
    ● 上記を守らないと、コンパイルエラーが出てWebには一
    切でない!
    ● エラーの行番号も出ません。
    ● .htaccessの設定を忘れずに!

    View full-size slide

  24. インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT
    まとめ
    ● HDMLは次世代のHTMLだ!
    ● カード単位で画面遷移が楽々!
    ● 変数が使える!
    ● サブアクティビティ最強!
    ● みんなもHDMLを使ってIDOの公式メニュー
    に登録されよう!
    24

    View full-size slide