「html5」という開発言語 - ずっと君のターン

現代ビジネスさんが大スクープ！！*1
http://gendai.ismedia.jp/articles/-/31794?page=4

アンドロイドは「html5」という開発言語を用いるインターネットベースのOS

　 ｲ｀ﾍ 
　/: :| ヽ 
/ : :/　　ヽ　＿＿＿　　　_,,,:. .-: :´彡ﾌ 
_ノ＼＿∠: : : : : : : : :｀: :-: :,:_:／彡　/ 
　　　　　 ( : : : : : : : : : : : : : : ｀ゝ　 / 
　　マ　　r::/: /: : | : : : : : : : : ::＼ / 
　　 　 　//: /: : : |: : | |: : |: _: : : :ヽ 
　　ジ　 {/ 7|｀＼/i: /|:|／|´: : : : :|ヽ 
　　　　　〉 ,‐-‐､｀|7　|| |_::|,_|: : :|:::|: | 
　　で　／ r:oヽ`　　 　/.:oヽヽ: :|: | :| 
　　　 　{　{o:::::::}　　 　　{:::::0　}/: :|N 
　　っ　 |　ヾ:::ソ　　　 　ヾ:::ｿ /|: : | 
　！？ ヽ::::ー-..　／ヽ　..ー-::: ヽ::|　r--ッ 
-tヽ／´|｀::::::::::;／　　 `､ ::::::::::: /: i　}　 ＞ 
::∧: : :|: |J　　 ＼　　 ／　　 ／::i: | /＿ゝ 
. ＼ヾ: |::|｀ - ,, ___｀-´_ ,, - ´|: : :|:::| 
　　 ヽ: |::|＼　　　 ￣/ /|　　|: : :|: |

HTML5でOSを開発・・・。言葉の意味はよくわからないが何やらすごい新しい。これは自分でもぜひやってみたい。やるしか！

ということでやりました。まずはHTML5「で」プログラミング。Androidに使用しているプログラミング言語 HTML5はきっとGoogleのトップシークレットだろうからとりあえず想像で。こんな感じかな・・・。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="html5lang.js"></script>
</head>
<body autostart="true">
  <dfn title="greeting">
    <p name="name"></p>
    <code>
      <input name="message" />

      <dl name="name">
        <dt>HTML5</dt>
        <dd><fieldset name="message">Hello, <output name="name" /></fieldset></dd>
        <dt></dt>
        <dd><fieldset name="message">Good-bye, <output name="name" /></fieldset></dd>
      </dl>

      <blockquote cite="alert">
        <p><output name="message" /></p>
      </blockquote>
      <blockquote cite="log">
        <p><output name="message" /></p>
      </blockquote>
    </code>
  </dfn>

  <input name="name" value="HTML" />
  <progress name="counter" value="1" max="5">
    <blockquote cite="greeting">
      <p><output name="name"></output><output name="counter"></output></p>
    </blockquote>
  </progress>
</body>
</html>

文法はだいたいこんなん。

変数宣言	input要素
変数アクセス	output要素
代入	fieldset要素
関数定義	dfn要素、p要素、code要素
関数呼出	blockquote要素、p要素
条件分岐	dl要素、dt要素、dd要素
繰り返し	progress要素

変数宣言はHTML5のinputだから日付とか数値とか電話番号とかいろんな型が使用できる、はず。型チェックは実装してないけど。関数の引数はparam使いたかったなぁ・・・。でも無理っぽいのでpで妥協。あと関数呼び出しもcommandが名前的にはピッタリだったのに、HTML5は制限が厳しい・・・。条件分岐はselectとoptionで、てのも考えたけどoptionが子要素を持てないので挫折。defaultはselected="true"で、って思いついた時は自分は天才だと思ったのに・・・。余裕があればobject要素でクラス定義とかもやりたかったなぁ・・・。

そんな妥協にまみれた仕様だけど、まぁ現状でもなんとなく意味は取れるよね。

仮に、上のプログラミング言語 HTML5のソースコードをJavaScriptに書きなおせばこうなる。

function greeting(name) {
  var message;
  switch (name) {
    case 'HTML5':
      message = 'Hello, ' + name;
      break;
    default:
      message = 'Good-bye, ' + name;
      break;
  }
  window.alert(message);
  console.log(message);
}

var name = 'HTML';
for (var counter = 1; counter <= 5; counter++) {
  greeting(name + counter);
}

では、実行。

画面はこんな感じ。そこはどうでもいいんだけど。

実行結果。

よし動いた。

これでOS作るのか・・・。

そうか・・・。

・・・。

　 ｲ｀ﾍ 
　/: :| ヽ 
/ : :/　　ヽ　＿＿＿　　　_,,,:. .-: :´彡ﾌ 
_ノ＼＿∠: : : : : : : : :｀: :-: :,:_:／彡　/ 
　　　　　 ( : : : : : : : : : : : : : : ｀ゝ　 / 
　　マ　　r::/: /: : | : : : : : : : : ::＼ / 
　　 　 　//: /: : : |: : | |: : |: _: : : :ヽ 
　　ジ　 {/ 7|｀＼/i: /|:|／|´: : : : :|ヽ 
　　　　　〉 ,‐-‐､｀|7　|| |_::|,_|: : :|:::|: | 
　　で　／ r:oヽ`　　 　/.:oヽヽ: :|: | :| 
　　　 　{　{o:::::::}　　 　　{:::::0　}/: :|N 
　　っ　 |　ヾ:::ソ　　　 　ヾ:::ｿ /|: : | 
　！？ ヽ::::ー-..　／ヽ　..ー-::: ヽ::|　r--ッ 
-tヽ／´|｀::::::::::;／　　 `､ ::::::::::: /: i　}　 ＞ 
::∧: : :|: |J　　 ＼　　 ／　　 ／::i: | /＿ゝ 
. ＼ヾ: |::|｀ - ,, ___｀-´_ ,, - ´|: : :|:::| 
　　 ヽ: |::|＼　　　 ￣/ /|　　|: : :|: |

*1:訂正済