HDML入門 / HDML beginner

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. インターネット老人会 #3 1999年12月19日（日） #インターネット老人会LT
   デッキとカードの説明
   9
   
   
   Hello EZaccess!
   
   続き
   
   
   
   恐怖の大魔王！
   
   続き
   
   
   
   来なかったね！
   
   戻る
   
   
   
   ● 全体がデッキです。
   ● DISPLAYタグに囲まれたのがカード
   です。
   ● この例では3枚のカードがあります。
   ● 上から順番に表示されます。
   ● 1のカードが表示され、続きのリンク
   をクリックすると、2のカードが表示
   されます。
   ①
   ②
   ③
   

   View Slide

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

    View 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 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

18. インターネット老人会 #3 1999年12月19日（日） #インターネット老人会LT
    変数の使い方
    18
    
    
    task=go dest=#2>
    好きな文字を入力してね
    
    
    あなたが入力した文字は
    
    $moji です！
    
    
    
    ● ENTRYタグのkeyに変数名を指定しま
    す。
    ● 入力モードで表示されます。
    ● 文字入力後、画面遷移すると、次画
    面の変数名に、入力した文字が表示
    されます。
    

    View Slide

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

    View Slide

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

    View 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 Slide

22. インターネット老人会 #3 1999年12月19日（日） #インターネット老人会LT
    JavaScript不要だね？！
    22
    

    View Slide

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

    View Slide

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

    View Slide