HTML文書内にJavaScriptで使う「見えないデータ」を入れる

Kuwataさんとリポジトリ共有のためにBitbucket（http://bitbucket.org）を使っているんですが、そのヘルプのHTMLソースを見たら、表示と関係ない要素がいろいろ入ってました。

JavaScriptを使うことを前提に、JavaScriptプログラムから使うデータをHTML文書内に埋め込んでいるんですね。もちろん、これらのデータは見えてはいけないので、隠すように細工されています。

meta要素を使う

head要素内のmeta要素は何も細工しなくても隠れています。ここにプログラム用データを入れられます。「メタ情報である」というセマンティクスに沿ったデータなら、metaに入れるのも理にかなっているでしょう。

<meta name="ajs-build-number"
      content="2032" />
<meta id="atlassian-token" name="atlassian-token" 
      content="36b28b0880d81dd94a53df36c0dc425b6f854f75" />
<meta id="confluence-space-key" name="confluence-space-key" 
      content="BITBUCKET" />
<meta name="wikilink" 
      content="[BITBUCKET:Using your Bitbucket Repository]" />

input要素を使う

プログラムで使うパラメータ（名前・値ペア）セットは、input要素で表現して、まとまりをつけるためにfieldsetタグで囲っています。

<fieldset class="hidden parameters">
    <input type="hidden" id="statusDialogHeading" 
           value="What are you working on?" />
    <input type="hidden" id="statusDialogAccessibilityLabel"
           value="Enter your status (140 character limit)" />
    <input type="hidden" id="statusDialogLatestLabel"
           value="Last update:" />
    <input type="hidden" id="statusDialogUpdateButtonLabel"
           value="Update" />
    <input type="hidden" id="statusDialogCancelButtonLabel"
           value="Cancel" />
</fieldset>

hiddenクラスのCSS指定は次のようですね。

.hidden {
  display:none !important;
  visibility:hidden;
}

script要素を使う

HTMLコンテンツをクライアント側で動的に生成するために、JavaScriptで書かれたテンプレートエンジンを使っているようです。もとになるテンプレートテキストは、scriptタグ内に入れてます。textareaに入れてhidden指定してもいいでしょうが、scriptなら確かに見えないですね。テンプレートテキストをある種の“言語”のソースコードとみなせば、type="text/x-template" という指定も納得できます。

<script type="text/x-template" title="movePageDialog"><![CDATA[
 <div class="row information">
        <div class="inner">
            <div class="element">
                Specify the new parent page for this page and its children by space and title.
            </div>
        </div>
 </div>

 <!-- 省略 -->

]]></script>

idやclassを目安にして要素を見つけ、content属性値、value属性値、title属性値、要素内容テキストをデータとして使う、ということになります。