hamura.cssで始めるCASIO PB-100のためのHTML制作入門
CSS ライブラリ『hamura.css』や Blogger テンプレート『4bit-city』を使って PB-100 に関する Web ドキュメントを書いていくための入門記事です。
HTML 文書への hamura.css のインポートについては、Readme を参照ください。
注意
4bit-city は開発中で、まだ公開出来ていません！入門記事としながらも、開発中の内容、検討中の内容が含まれます。すみません。
はじめに
hamura.css は HTML で PB-100 シリーズ用の BASIC リストと操作法等を公開するための CSS ライブラリです。次の5つのスタイルがひと纏まりになっています。
Blogger用テンプレート、4bit-cityについて
4bit-city は hamura.css を組み込んだ Blogger 用テンプレートです。PB-100 に関するブログを直ちに開設することができます。
hamura.css をはじめとするいわゆる CSS ライブラリを副作用無しにホームページやブログに導入することは Web 技術者でないと難しいことです。Web 技術に不案内な方は Google のブログサービス Blogger にブログを開設し、ブログテンプレートに 4bit-city を設定しましょう。このブログも 4bit-city をベースにしたものを使用しています。テキストが読みやすく、ページの読み込みも圧倒的に高速です。
共通の注意事項
日本語 Web ページでバックスラッシュを表示するためには lang=en を適宜に使用します。この指定を行っても一部の日本語フォントで ¥ が表示されるケースがあります。
<span lang="en">\</span>また一部の記号は文字参照を使って記述します。PB-100 シリーズのフォントセットにあるものでは次の記号が該当します。
| 文字 | 文字実態参照と数値文字参照 | |
|---|---|---|
| < | < | |
| > | > | |
| ¥ | ¥ | |
| \ | \ | バックスラッシュ |
| ₑ₋ | ₑ₋ | |
| ₑ | ₑ | |
| ♠ | ♠ | |
| ♥ | ♥ | |
| ♦ | ♦ | |
| ♣ | ♣ | |
| ▓ | ▓ | 市松模様 |
1. BASICリストを正確に美しく公開したい
pbList.css
pbList.css は pbPrinter.css の後継ライブラリです。Web フォントとリガチャ(合字)をサポートする環境では美しい PB-100 フォントで BASIC リストを表示することができます。その上 Javascript が有効な環境では、コードのハイライトをします。
また Web フォントが使えない環境では JavaScript で画像置換してフォールバックします。リガチャ非対応の環境でも Javascript でフォールバックします。CSS や JavaScript が使えない環境でも HTML として正しく、情報の欠落が無いように細心の注意を払ってデザインされています。
pbListエディタ
pbList による HTML の作成には pbList エディタを使用します。PB-100 と同じ解釈でスペースを挿入して pbList のお約束に沿った HTML を生成します。ツールで生成した HTML には改行等の変更を一切加えずにコピーペーストしましょう。
pbList エディタは開発中です。デスクトップ用ブラウザで動作を確認しています。
2. PB-100フォントを文章の中で使いたい
pbFont.css
pbFont.css はコード片や変数、印字結果などの出力を PB-100 のルックにします。対象に応じて <code>, <var>, <samp> を使い分けます。
- 変数には
<var> - BASIC コマンドやプログラム片には
<code> - 画面やプリンターへの出力結果には
<samp>
マークアップ
| 表示サンプル | コード | |
|---|---|---|
| 1 | 名前はX$に入っています。 | |
| 2 | GOTO 10で次の面に進みます
| |
| 3 | ゲーム終了でCLEAR!!と表示されます。 | |
3. 画面の様子を伝えたい・説明したい
pbLCD.css
pbLCD.css によって HTML で画面イメージを記述することができます。pbDisplay.css の後継ライブラリで表現力とアクセシビリティが向上しています。
ごく一部の CSS のサポートが不十分なブラウザに対しては JavaScript で表現を補います。また画像と CSS が使えない環境でも情報の欠落が無いように細心の注意を払って設計されています。
RUN DEG A 1 24
機能
- キャラクターを透過したり、投下したキャラクターにキャラクターを重ねて、ゲームのスピード感を表現する
- キャラクターの上下に、任意の色の吹き出しを付ける
- 1つ以上のキャラクターに任意の色の下線を付ける
pbLCDメーカー
pbLCD によるマークアップはお約束がたくさんあるため人力で書くのは困難です。 pbLCD メーカーは開発中です！
pbChr.css によって PB-100 の LCD キャラクタを文書中に登場させることができます。pbChr.css によるマークアップを書く際は便利なチートシートを使用しましょう。
pbKey でプログラムの実行の手順や、実行中の操作を分かりやすく示すことができます。
shift0でゲームを開始します。
プレイヤーは騎士(Ω)となって魔城を探索し、幽閉されたお姫様(♥)を奪還します。
46で騎士を左右に動かしてZで剣を振ります。
アクセシビリティに配慮して、EXE, DEL, AC, SPC, ANS には このためのツール pbLCD メーカーで HTML を作成します。ツールで生成した HTML には改行等の変更を一切加えずにコピーペーストしましょう。
4. LCDキャラクタを表示したい
pbChr.css
<samp> でマークアップしています。
<dfn> を使用します。併せて title 属性に役割を書いておくのが良いでしょう。
表示サンプル コード
1
♥に重なるとライフが回復します。
 <samp class="pbChr69">♥</samp>に重なるとライフが回復します。
2
プレイヤーは騎士(Ω)となってモンスターと戦います。
プレイヤーは騎士(<dfn class="pbChr6D" title="騎士">Ω</dfn>)となってモンスターと戦います。
IE7 以下で行頭に pbChr.css を書くとテキストフローが乱れる問題の対策
また行頭に書く場合 この対策は未確定です。IE5 と Nintendo 3DS 用ブラウザでも  (幅がとても薄いスペース) を前方に挿入します。これは IE7 以下のバグ対策です。  が豆腐になるため、条件付きコメントとゼロ幅の空白等を組み合わせる、<!--[if IE 5]> <![endif]--><!--[if (IE 6)|(IE 7)]>​<![endif]--> を検討しています。
5. キー操作を分かりやすく伝えたい
pbKey.css
例1 pbChr.cssと組み合わせる
キャラクターの説明とキー操作<p><kbd class="pbKeyS">shift</kbd><kbd class="pbKeyBlk">0</kbd>でゲームを開始します。
<p>プレイヤーは騎士(<dfn class="pbChr6D" title="騎士">Ω</dfn>)となって魔城を探索し、幽閉されたお姫様(<dfn class="pbChr69" title="お姫様">♥</dfn>)を奪還します。
<kbd class="pbKeyBlk">4</kbd><kbd class="pbKeyBlk">6</kbd>で騎士を左右に動かして<kbd class="pbKey">Z</kbd>で剣を振ります。
例2 pbFont.cssと組み合わせる
コマンドとキー操作RUN モードで
DEFM 10EXE変数領域の確保
shift1初期化
shift0ゲーム開始
<pre>RUN モードで
<code class="pbFont">DEFM 10</code><kbd class="pbKeyBlk" title="execute">EXE</kbd>変数領域の確保
<kbd class="pbKeyS">shift</kbd><kbd class="pbKeyBlk">1</kbd>初期化
<kbd class="pbKeyS">shift</kbd><kbd class="pbKeyBlk">0</kbd>ゲーム開始
</pre>
マークアップ
title 属性で正式名称を書いた方がいいでしょう。
また shift キーは赤字に S と略し過ぎと考えます。shift と表記することを推奨します。
表示サンプル コード
A～Z
<kbd class="pbKey">A</kbd>
SPC, ANS
<kbd class="pbKey" title="space">SPC</kbd>, <kbd class="pbKey" title="answer">ANS</kbd>
E
<kbd class="pbKey"><sub>E</sub></kbd>
0～9, .
<kbd class="pbKeyBlk">0</kbd>
shift
<kbd class="pbKeyS">shift</kbd>
DEL, AC
<kbd class="pbKeyRed" title="delete">DEL</kbd>, <kbd class="pbKeyRed" title="all clear">AC</kbd>
EXE
<kbd class="pbKeyBlk" title="execute">EXE</kbd>
pbChrのコード一覧
表示 コード 表示 コード
<dfn class="pbChr00"> </dfn>+ <dfn class="pbChr01">+</dfn>- <dfn class="pbChr02">-</dfn>* <dfn class="pbChr03">*</dfn>/ <dfn class="pbChr04">/</dfn>↑ <dfn class="pbChr05">↑</dfn>! <dfn class="pbChr06">!</dfn>" <dfn class="pbChr07">"</dfn># <dfn class="pbChr08">#</dfn>$ <dfn class="pbChr09">$</dfn>> <dfn class="pbChr0A">></dfn>≧ <dfn class="pbChr0B">≧</dfn>= <dfn class="pbChr0C">=</dfn>≦ <dfn class="pbChr0D">≦</dfn>< <dfn class="pbChr0E"><</dfn>≠ <dfn class="pbChr0F">≠</dfn>0 <dfn class="pbChr10">0</dfn>1 <dfn class="pbChr11">1</dfn>2 <dfn class="pbChr12">2</dfn>3 <dfn class="pbChr13">3</dfn>4 <dfn class="pbChr14">4</dfn>5 <dfn class="pbChr15">5</dfn>6 <dfn class="pbChr16">6</dfn>7 <dfn class="pbChr17">7</dfn>8 <dfn class="pbChr18">8</dfn>9 <dfn class="pbChr19">9</dfn>. <dfn class="pbChr1A">.</dfn>π <dfn class="pbChr1B">π</dfn>) <dfn class="pbChr1C">)</dfn>( <dfn class="pbChr1D">(</dfn>ₑ₋ <dfn class="pbChr1E">ₑ₋</dfn>ₑ <dfn class="pbChr1F">ₑ</dfn>A <dfn class="pbChr20">A</dfn>B <dfn class="pbChr21">B</dfn>C <dfn class="pbChr22">C</dfn>D <dfn class="pbChr23">D</dfn>E <dfn class="pbChr24">E</dfn>F <dfn class="pbChr25">F</dfn>G <dfn class="pbChr26">G</dfn>H <dfn class="pbChr27">H</dfn>I <dfn class="pbChr28">I</dfn>J <dfn class="pbChr29">J</dfn>K <dfn class="pbChr2A">K</dfn>L <dfn class="pbChr2B">L</dfn>M <dfn class="pbChr2C">M</dfn>N <dfn class="pbChr2D">N</dfn>O <dfn class="pbChr2E">O</dfn>P <dfn class="pbChr2F">P</dfn>Q <dfn class="pbChr30">Q</dfn>R <dfn class="pbChr31">R</dfn>S <dfn class="pbChr32">S</dfn>T <dfn class="pbChr33">T</dfn>U <dfn class="pbChr34">U</dfn>V <dfn class="pbChr35">V</dfn>W <dfn class="pbChr36">W</dfn>X <dfn class="pbChr37">X</dfn>Y <dfn class="pbChr38">Y</dfn>Z <dfn class="pbChr39">Z</dfn>a <dfn class="pbChr40">a</dfn>b <dfn class="pbChr41">b</dfn>c <dfn class="pbChr42">c</dfn>d <dfn class="pbChr43">d</dfn>e <dfn class="pbChr44">e</dfn>f <dfn class="pbChr45">f</dfn>g <dfn class="pbChr46">g</dfn>h <dfn class="pbChr47">h</dfn>i <dfn class="pbChr48">i</dfn>j <dfn class="pbChr49">j</dfn>k <dfn class="pbChr4A">k</dfn>l <dfn class="pbChr4B">l</dfn>m <dfn class="pbChr4C">m</dfn>n <dfn class="pbChr4D">n</dfn>o <dfn class="pbChr4E">o</dfn>p <dfn class="pbChr4F">p</dfn>q <dfn class="pbChr50">q</dfn>r <dfn class="pbChr51">r</dfn>s <dfn class="pbChr52">s</dfn>t <dfn class="pbChr53">t</dfn>u <dfn class="pbChr54">u</dfn>v <dfn class="pbChr55">v</dfn>w <dfn class="pbChr56">w</dfn>x <dfn class="pbChr57">x</dfn>y <dfn class="pbChr58">y</dfn>z <dfn class="pbChr59">z</dfn>? <dfn class="pbChr5C">?</dfn>, <dfn class="pbChr5D">,</dfn>; <dfn class="pbChr5E">;</dfn>: <dfn class="pbChr5F">:</dfn>○ <dfn class="pbChr60">○</dfn>∑ <dfn class="pbChr61">∑</dfn>° <dfn class="pbChr62">°</dfn>△ <dfn class="pbChr63">△</dfn>@ <dfn class="pbChr64">@</dfn>× <dfn class="pbChr65">×</dfn>÷ <dfn class="pbChr66">÷</dfn>♠ <dfn class="pbChr67">♠</dfn>← <dfn class="pbChr68">←</dfn>♥ <dfn class="pbChr69">♥</dfn>♦ <dfn class="pbChr6A">♦</dfn>♣ <dfn class="pbChr6B">♣</dfn>μ <dfn class="pbChr6C">μ</dfn>Ω <dfn class="pbChr6D">Ω</dfn>↓ <dfn class="pbChr6E">↓</dfn>→ <dfn class="pbChr6F">→</dfn>% <dfn class="pbChr70">%</dfn>¥ <dfn class="pbChr71">¥</dfn>□ <dfn class="pbChr72">□</dfn>[ <dfn class="pbChr73">[</dfn>& <dfn class="pbChr74">&</dfn>_ <dfn class="pbChr75">_</dfn>' <dfn class="pbChr76">'</dfn>･ <dfn class="pbChr77">･</dfn>] <dfn class="pbChr78">]</dfn>■ <dfn class="pbChr79">■</dfn>\ <dfn class="pbChr7A" lang="en">\</dfn>▓ <dfn class="pbChr7B">▓</dfn><dfn class="pbChrCS"><blink>_</blink></dfn>
表示 コード 表示 コード
S <dfn class="pbChr32a">S</dfn>
♠ <dfn class="pbChr67a">♠</dfn>♥ <dfn class="pbChr69a">♥</dfn>
♦ <dfn class="pbChr6Aa">♦</dfn>♣ <dfn class="pbChr6Ba">♣</dfn>