PB-100の宇宙の中の人
PBロッキーの日記

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つのスタイルがひと纏まりになっています。

  1. pbList, pbList エディタ
  2. pbFont
  3. pbLCD, pbLCD メーカー
  4. pbChr, コード一覧
  5. pbKey

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 シリーズのフォントセットにあるものでは次の記号が該当します。

文字文字実態参照と数値文字参照
<&lt;
>&gt;
¥&yen;
\&#x5c;バックスラッシュ
ₑ₋&#8337;&#8331;
&#8337;
&spades;
&hearts;
&diams;
&clubs;
&#9619;市松模様

1. BASICリストを正確に美しく公開したい
pbList.css

pbList.css

pbList.css は pbPrinter.css の後継ライブラリです。Web フォントとリガチャ(合字)をサポートする環境では美しい PB-100 フォントで BASIC リストを表示することができます。その上 Javascript が有効な環境では、コードのハイライトをします。

また Web フォントが使えない環境では JavaScript で画像置換してフォールバックします。リガチャ非対応の環境でも Javascript でフォールバックします。CSS や JavaScript が使えない環境でも HTML として正しく、情報の欠落が無いように細心の注意を払ってデザインされています。

pbListエディタ

pbList エディタ

pbList による HTML の作成には pbList エディタを使用します。PB-100 と同じ解釈でスペースを挿入して pbList のお約束に沿った HTML を生成します。ツールで生成した HTML には改行等の変更を一切加えずにコピーペーストしましょう。

pbList エディタは開発中です。デスクトップ用ブラウザで動作を確認しています。

2. PB-100フォントを文章の中で使いたい
pbFont.css

pbFont.css

pbFont.css はコード片や変数、印字結果などの出力を PB-100 のルックにします。対象に応じて <code>, <var>, <samp> を使い分けます。

  1. 変数には <var>
  2. BASIC コマンドやプログラム片には <code>
  3. 画面やプリンターへの出力結果には <samp>

マークアップ

表示サンプルコード
1 名前はX$に入っています。
<var class="pbFont">X$</var>
2 GOTO 10で次の面に進みます
<code class="pbFont">GOTO 10</code>
3 ゲーム終了でCLEAR!!と表示されます。
<samp class="pbFont">CLEAR!!</samp>

3. 画面の様子を伝えたい・説明したい
pbLCD.css

pbLCD.css

pbLCD.css によって HTML で画面イメージを記述することができます。pbDisplay.css の後継ライブラリで表現力とアクセシビリティが向上しています。

ごく一部の CSS のサポートが不十分なブラウザに対しては JavaScript で表現を補います。また画像と CSS が使えない環境でも情報の欠落が無いように細心の注意を払って設計されています。

RUN DEG
A 1 24      

機能

  1. キャラクターを透過したり、投下したキャラクターにキャラクターを重ねて、ゲームのスピード感を表現する
  2. キャラクターの上下に、任意の色の吹き出しを付ける
  3. 1つ以上のキャラクターに任意の色の下線を付ける

pbLCDメーカー

pbLCD によるマークアップはお約束がたくさんあるため人力で書くのは困難です。このためのツール pbLCD メーカーで HTML を作成します。ツールで生成した HTML には改行等の変更を一切加えずにコピーペーストしましょう。

pbLCD メーカーは開発中です!

4. LCDキャラクタを表示したい
pbChr.css

pbChr.css

pbChr.css によって PB-100 の LCD キャラクタを文書中に登場させることができます。pbChr.css によるマークアップを書く際は便利なチートシートを使用しましょう。

  1. キャラクタを文字通りの意図で使っている場合は <samp> でマークアップしています。
  2. キャラクタに特別な役割がある場合は <dfn> を使用します。併せて title 属性に役割を書いておくのが良いでしょう。
表示サンプルコード
1 に重なるとライフが回復します。
&thinsp;<samp class="pbChr69">&hearts;</samp>に重なるとライフが回復します。
2 プレイヤーは騎士(Ω)となってモンスターと戦います。
プレイヤーは騎士(<dfn class="pbChr6D" title="騎士">Ω</dfn>)となってモンスターと戦います。

IE7 以下で行頭に pbChr.css を書くとテキストフローが乱れる問題の対策

また行頭に書く場合 &thinsp;(幅がとても薄いスペース) を前方に挿入します。これは IE7 以下のバグ対策です。この対策は未確定です。IE5 と Nintendo 3DS 用ブラウザでも &thinsp; が豆腐になるため、条件付きコメントとゼロ幅の空白等を組み合わせる、<!--[if IE 5]>&nbsp;<![endif]--><!--[if (IE 6)|(IE 7)]>&#8203;<![endif]--> を検討しています。

5. キー操作を分かりやすく伝えたい
pbKey.css

pbkey.css

pbKey でプログラムの実行の手順や、実行中の操作を分かりやすく示すことができます。

例1 pbChr.cssと組み合わせる
キャラクターの説明とキー操作

shift0でゲームを開始します。

プレイヤーは騎士(Ω)となって魔城を探索し、幽閉されたお姫様()を奪還します。 46で騎士を左右に動かしてZで剣を振ります。

<p><kbd class="pbKeyS">shift</kbd><kbd class="pbKeyBlk">0</kbd>でゲームを開始します。
<p>プレイヤーは騎士(<dfn class="pbChr6D" title="騎士">Ω</dfn>)となって魔城を探索し、幽閉されたお姫様(<dfn class="pbChr69" title="お姫様">&hearts;</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>

マークアップ

アクセシビリティに配慮して、EXE, DEL, AC, SPC, ANS には title 属性で正式名称を書いた方がいいでしょう。 また shift キーは赤字に S と略し過ぎと考えます。shift と表記することを推奨します。

表示サンプルコード
AZ
<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>
09, .
<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">&gt;</dfn>
<dfn class="pbChr0B">≧</dfn>
=
<dfn class="pbChr0C">=</dfn>
<dfn class="pbChr0D">≦</dfn>
<
<dfn class="pbChr0E">&lt;</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">&#8337;&#8331;</dfn>
<dfn class="pbChr1F">&#8337;</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">&spades;</dfn>
<dfn class="pbChr68">←</dfn>
<dfn class="pbChr69">&hearts;</dfn>
<dfn class="pbChr6A">&diams;</dfn>
<dfn class="pbChr6B">&clubs;</dfn>
μ
<dfn class="pbChr6C">μ</dfn>
Ω
<dfn class="pbChr6D">Ω</dfn>
<dfn class="pbChr6E">↓</dfn>
<dfn class="pbChr6F">→</dfn>
%
<dfn class="pbChr70">%</dfn>
¥
<dfn class="pbChr71">&yen;</dfn>
<dfn class="pbChr72">□</dfn>
[
<dfn class="pbChr73">[</dfn>
&
<dfn class="pbChr74">&amp;</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">&#x5c;</dfn>
<dfn class="pbChr7B">&#9619;</dfn>
_
<dfn class="pbChrCS"><blink>_</blink></dfn>
PB-120 用の異字
表示コード表示コード
S
<dfn class="pbChr32a">S</dfn>
<dfn class="pbChr67a">&spades;</dfn>
<dfn class="pbChr69a">&hearts;</dfn>
<dfn class="pbChr6Aa">&diams;</dfn>
<dfn class="pbChr6Ba">&clubs;</dfn>