Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
HDML入門 / HDML beginner
sapi_kawahara
December 19, 2019
Education
1
200
HDML入門 / HDML beginner
sapi_kawahara
December 19, 2019
Tweet
Share
More Decks by sapi_kawahara
See All by sapi_kawahara
sapi_kawahara
0
52
sapi_kawahara
0
200
sapi_kawahara
1
130
sapi_kawahara
2
410
sapi_kawahara
0
130
sapi_kawahara
0
690
sapi_kawahara
1
140
sapi_kawahara
1
110
sapi_kawahara
3
220
Other Decks in Education
See All in Education
learnenergy
0
100
ttak0422
0
390
elenareimeryte
0
280
kaityo256
164
220k
unsoluble_sugar
0
140
himajin315
1
270
shoin
0
190
expertlanguage
0
200
signer
0
330
mooc
0
15k
matleenalaakso
0
4.1k
learnenergy
0
240
Featured
See All Featured
imathis
478
150k
dotmariusz
94
5.1k
thoeni
4
550
chriscoyier
499
130k
edds
56
9.3k
aarron
258
36k
nonsquared
81
3.3k
philhawksworth
190
17k
tammielis
237
23k
hannesfritz
27
930
eitanlees
111
9.9k
bryan
100
11k
Transcript
インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT HDML入門 さっぴー川原 @sapi_kawahara 1
インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT 自己紹介 • 名前:川原 英明 • Twitter:@sapi_kawahara
• 業務:五反田の企業でEM&フルスタックエンジニア • スキル:コンシューマーゲームプログラマー、最近IT業 界にジョブチェンジしました! • マンモス本を片手に、PostgreSQLを理解しつつ、Perlの フレームワークを自作しながら仕事してます。 2
インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT iモード使っていますか? • 画面が小さいから流行らない!? • モノクロだから流行らない!? •
使えば使うほど料金かかるのが痛い!? • 公式メニューは月額料金が別にかかるのが痛い!? • そもそも、Webを家の外で見ないよね!? • 知ってました?メールサービスを使うついでに、使って いる人が多いんですよ!! 3
インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT でも、俺の携帯電話は 織田裕二が使っている IDOなんだよね 4
インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT IDO公式メニューサイトを作りましょう 5
インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT その名も EZaccess !! 6
インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT そのためにはHDMLの知識が必要です! 7
インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT What’s HDML? 8 • Handheld Device
Markup Languageの略です。 • <HDML>から始まります。(デッキと呼びます) • 1つのデッキには複数のカードがあります。 • DISPLAY、CHOICE、ENTRY、NODISPLAYカードがあり ます。 • 変数があります。 • それではHDMLを書いてみましょう!
インターネット老人会 #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のカードが表示 されます。 ① ② ③
インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT これでサーバーにアップしましょう! 10
インターネット老人会 #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
インターネット老人会 #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
インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT インストーラー Openwave_SDK_62Kを起動 13
インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT 基本「Next」でいけます 14
インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT インストール完了! • 起動したら、ファ イアウォールで 「アクセスを許可 する」をクリック
する。 • 閲覧したいURLや ファイルを指定し ます。 15
インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT これで上手く表示されたはず! 16
インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT 次は変数を使いましょう! 17
インターネット老人会 #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に変数名を指定しま す。 • 入力モードで表示されます。 • 文字入力後、画面遷移すると、次画 面の変数名に、入力した文字が表示 されます。
インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT フロントだけで インタラクティブな画面が作れる 次世代仕様! 19
インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT 最後に入力フォームを作ろう! 20
インターネット老人会 #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で カレントアクティビティの変数 をクリアできます。
インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT JavaScript不要だね?! 22
インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT Tips! 23 • タグの名前は間違えない! • シングルタグに/は付けないで!<BR/>はダメ!
• 対になるタグは、ちゃんと閉じる! • 引用符も、ちゃんと閉じる! • 上記を守らないと、コンパイルエラーが出てWebには一 切でない! • エラーの行番号も出ません。 • .htaccessの設定を忘れずに!
インターネット老人会 #3 1999年12月19日(日) #インターネット老人会LT まとめ • HDMLは次世代のHTMLだ! • カード単位で画面遷移が楽々! •
変数が使える! • サブアクティビティ最強! • みんなもHDMLを使ってIDOの公式メニュー に登録されよう! 24