やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

HTML文書をつくる5 コンピュータ文脈(code, var, samp, kbd)

 ソースコード、変数、出力値、入力値を示す。

要素一覧

要素 概要
code ソースコードである
var 変数である
samp 出力値である
kbd 入力値である

code

 codeは、コンピュータ言語で書かれたソースコードであることを示す。またはコンピュータが認識する文字列。

HTMLの<code>code</code>要素はソースコードを表す。

 よく<pre>と一緒に使用する。

<pre>
<code>
console.log('Hello World !!');
alert('Hello World !!');
</code>
</pre>

var

 varソースコードの変数や定数を示す。

上記ソースコードの変数<var>name</var>には任意の名前を入力します。

 ところで、変数ってコンピュータが認識する文字列だよね? でもコンピュータが認識する文字列は<code>マークアップするんじゃなかったの? なんか曖昧なんだよなぁ。

 それとも、<code>内で<var>を使うのだろうか? 以下のように。

<pre>
<code>
let <var>name</var> = '山田';
</code>
</pre>

 そのマークアップに何の意味があるの?

 一応、以下のような説明があるけど、数式まで含んでいるらしい。値だけではないのか。よくみたらプログラミングコンテキストってある。それってプログラミング言語

数式やプログラミングコンテキスト、定数を表す識別子、物理量を識別する記号、関数パラメーター、または単に文のプレースホルダーとして使用される用語で、実際に変数であるかもしれない。

 たぶん、<var><code>内ではなく自然言語で書いた<p>内で使うのだろう。でも私だったら<code>との使い分けに迷うから、<code>で統一する。<var>は使わない。

<pre>
<code>
let name = '山田';
</code>
</pre>

<p>変数<code>name</code>の値は任意テキスト値を与えてください。</p>

 うん、<var>は使わず<code>で書けばいいんじゃね?

samp

 sampはプログラムなどコンピュータから出力された内容であることを示す。

 たとえば端末を起動したとき、以下のような出力がされることを示す。

<samp>pi@raspberrypi:/home/pi $ </samp>

 ソースコードと、その実行結果を示す。

<pre>
<code class="javascript">console.log(1+2)</code>
<samp>3</samp>
</pre>

 <kbd>を内包すれば、システムエコーであることを示す。

<pre>
<code class="python">
print('What your name?')
name = input()
print(f"Your name is {name}.")
</code>

<samp>What your name?</samp>
<kbd>山田</kbd>
<samp>Your name is <kbd>山田</kbd>.</samp>
</pre>

 端末の出力をHTMLで表示してほしいことがある。ANSI Escape Codeを再現してHTML変換してほしいことがある。でもそんな機能は標準には存在しない。<samp>とかがそんな機能を備えていてくれたら使う価値があったのに。残念。

 もしかしたらJSライブラリの中に存在するかも知れない。だが今回の範囲外であるため探さない。

kbd

 kbdはユーザの入力を示す。要素のネスト関係によって用途が異なる。

要素 用途
<kbd> ユーザの入力。ふつうはキーボード入力。
<kbd><kbd> キーの同時押しや順次押しなど、それでひとつのコマンドを表す部分。
<kbd><samp> メニュー項目などシステムが提示した部分でありながら、ユーザが入力する部分。
<samp><kbd> システムエコー(ユーザ入力がそのまま返された部分)

キーボード入力

単一

<kbd>Enter</kbd>キーを押してください。

複数

<kbd><kbd>Ctrl</kbd>+<kbd>P</kbd></kbd>キーで貼り付けてください。

 必ずしもネストさせなくていい。

<kbd>Ctrl</kbd>+<kbd>P</kbd>キーで貼り付けてください。

 そういう選択肢があること自体が混乱の元なんだよなぁ。

メニュー入力

単一

メニューの<kbd><samp>ファイル</samp></kbd>をクリックしてください。

複数

メニューの<kbd><kbd><samp>ファイル</samp></kbd><kbd><samp>名前を付けて保存</samp></kbd></kbd>をクリックしてください。

 以下で十分らしい。上記のような精密さは必要ないとか。

メニューの<kbd>ファイル→名前を付けて保存</kbd>をクリックしてください。

 じゃあなんで書いたんだよ。だいたい、そんなこといったら<kbd><samp>マークアップ自体必要ないと思うのだが。このマークアップに何の意味があるの? 適当すぎない?

ユーザ入力値

 kbdはユーザの入力をあらわす。それはキーボードに限定されないため、幅広い意味をもつ。そのわりに、適切に表示できるマークアップ方法が提示されていない。なので事実上、キーボード入力くらいにしか使えない。

要素 概要
<kbd> ユーザが入力する内容であることを示す

複雑なキー入力を表現できない

 kbdはおもにキーボードのキーをあらわす。だがキーの入力方法だけでも複雑で、すべてのケースを表現しきれない。たとえば同時押しはCtrl+Zのように表現するが、これは正確には同時ではなく、まずCtrlを押して、その状態を保ったままZを押すものである。しかしゲームなどにおいては本当に同時(同じタイミングで押す)ことを意味したいときもある。長押しという概念もあり、指定した時間だけ押し続けるとイベントが発火するような場合もある。また、vimのように、2ストロークで1コマンドをあらわすときもある。たとえばyを押したあとにもう一度yを押すことでヤンク(文字列コピー)するなど。これらの微妙な差異を表現する規格、仕様は私が知るかぎり存在しない。

キーボード以外のHID入力を表現できない

 そもそも、ユーザの入力装置はキーボードだけではない。マウスやタッチパネル、トラックボールジョイスティック、ゲームパッドモーションキャプチャ音声認識OCRなど、じつに様々なものがある。それらをすべて表現することもできない。あまりに貧弱な表現力しかない。<kbd>要素だけでユーザの入力を表現しきれないため、使用をためらってしまう。

 せめてマウスの左ボタンとか、ダブルクリックだとか、一般的な操作をマシンリーダブルに表現できる方法があったらよかったのに。

 なんにせよ、上記の問題を解決するのはかなり難しい。

所感

 ルールが適当だし機能が貧弱すぎる。存在意義すらわからない。とにかくこういうものだと思うしかない。

 たぶんCSSでそれとわかるような視覚効果をつくらないと、このマークアップには何の意味も価値もないと思う。すごく大変だよ。ライブラリやCSSを探して導入するのが楽なのだろう。

対象環境

$ uname -a
Linux raspberrypi 5.10.63-v7l+ #1496 SMP Wed Dec 1 15:58:56 GMT 2021 armv7l GNU/Linux