血統の森+はてな 旧はてなダイアリーの自動インポートによるアーカイブです。 momdo Hatena::Blog hatenablog://blog/17680117127079409693 はてなブログに移行します hatenablog://entry/17680117127079409809 2014-12-21T00:00:00+09:00 2019-04-26T23:40:16+09:00 はてダがHTML5じゃないので、いつか移行しなきゃとか思ってたんだけど、というかそれくらいしか移行理由ないんですがまあノリで。 水底の血 http://momdo.hatenablog.jp/ 水の底に液体がそのままあるわけないよね、と言うような矛盾に満ちたサイト名にしてみたかった。深い意味はないです。 <p>はてダが<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>じゃないので、いつか移行しなきゃとか思ってたんだけど、というかそれくらいしか移行理由ないんですがまあノリで。</p> <dl> <dt>水底の血</dt> <dd><a href="http://momdo.hatenablog.jp/">http://momdo.hatenablog.jp/</a></dd> </dl><p>水の底に液体がそのままあるわけないよね、と言うような矛盾に満ちたサイト名にしてみたかった。深い意味はないです。</p> momdo Zoteroを調べついでにTwitterカード対応をしてみた hatenablog://entry/17680117127079409968 2014-12-09T00:00:00+09:00 2019-04-26T23:40:17+09:00 Twitterのタイムラインでたまたま流れてきたZoteroの記事(なぜか削除されている)を見て、いろいろと遊んでみたついでに、Twitterカード対応を今更ながらやってみましたというお話。いつかはメタデータをまじめにやらないとなーとか思いつつ、ずっと放置してたという。 Zoteroについて 手っ取り早く言うと、学術論文などでリファレンスを作るときに、引用文献を管理して指定の書式で吐き出してくれるってやつです。Zotero for FirefoxはFirefoxのアドオンとして動作しますので、導入もお手軽です。引用文献はウェブページももちろん対象なので、まかり間違って私のサイトが引用されてもい… <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>のタイムラインでたまたま流れてきた<a class="keyword" href="http://d.hatena.ne.jp/keyword/Zotero">Zotero</a>の記事(なぜか削除されている)を見て、いろいろと遊んでみたついでに、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>カード対応を今更ながらやってみましたというお話。いつかは<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E1%A5%BF%A5%C7%A1%BC%A5%BF">メタデータ</a>をまじめにやらないとなーとか思いつつ、ずっと放置してたという。</p> <div class="section"> <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/Zotero">Zotero</a>について</h4> <p>手っ取り早く言うと、学術論文などでリファレンスを作るときに、引用文献を管理して指定の書式で吐き出してくれるってやつです。<a href="https://www.zotero.org/download/">Zotero for Firefox</a>は<a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a>のアドオンとして動作しますので、導入もお手軽です。引用文献はウェブページももちろん対象なので、まかり間違って私のサイトが引用されてもいいように(?)<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E1%A5%BF%A5%C7%A1%BC%A5%BF">メタデータ</a>としてウェブページ情報をHTMLに仕込んでみようと。要は自己満足です(ぉ</p><p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Zotero">Zotero</a>がどういう<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E1%A5%BF%A5%C7%A1%BC%A5%BF">メタデータ</a>を取得するのか、まずは項目について見てみます。<br /> <span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/momdo/20141209202214" class="hatena-fotolife" itemprop="url"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/momdo/20141209/20141209202214.png" alt="f:id:momdo:20141209202214p:image" title="f:id:momdo:20141209202214p:image" class="hatena-fotolife" itemprop="image"></a></span><br /> とまあこんな感じです。</p><p>ここに可能な限り項目を埋めさせてみるとこうなりました。<br /> <span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/momdo/20141209202215" class="hatena-fotolife" itemprop="url"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/momdo/20141209/20141209202215.png" alt="f:id:momdo:20141209202215p:image" title="f:id:momdo:20141209202215p:image" class="hatena-fotolife" itemprop="image"></a></span></p><p>ということで、何をどうすればいいのかというのを以下簡単に。</p> </div> <div class="section"> <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/Zotero">Zotero</a>が認識すると思われる<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E1%A5%BF%A5%C7%A1%BC%A5%BF">メタデータ</a></h4> <p>なぜかそれとおぼしき公式ドキュメントの英語が死んでいて、フランス語で<a href="http://www.zotero.org/support/fr/compatible_standards_and_software">fr:compatible_standards_and_software [Zotero Documentation]</a>というそれっぽいドキュメントはあるものの、微妙にサイトのHTMLそのものにどう埋め込むかという情報が欠落しているので、私が独自に調べてみました。</p><p>その結果、</p> <ul> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>使用の範囲内での<code>meta</code>要素による記述 <ul> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Dublin%20Core">Dublin Core</a></li> </ul></li> <li>RDFa Lite 1.1による記述 <ul> <li>Open Gragh protocol</li> </ul></li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Microdata">Microdata</a>による記述</li> </ul><p>あたりはいけそうかなーと。で、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>カード対応も鑑みると、次のようになりました。実際のページ例は<a href="http://momdo.s35.xrea.com/web-html-test/CSS3-ja/">CSS3の日本語訳集</a>。次のコード例はローカルでテストしてたときの名残です。</p> <pre class="code lang-html" data-lang="html" data-unlink><span class="synComment">&lt;!DOCTYPE html&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">html</span><span class="synIdentifier"> </span><span class="synType">lang</span><span class="synIdentifier">=</span><span class="synConstant">&quot;ja&quot;</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">head</span><span class="synIdentifier"> prefix=</span><span class="synConstant">&quot;og: http://ogp.me/ns#&quot;</span><span class="synIdentifier">&gt;</span><span class="synComment">&lt;!-- おまじないとしてのprefixを念のため付与。 --&gt;</span> <span class="synPreProc"> </span><span class="synIdentifier">&lt;</span><span class="synStatement">meta</span><span class="synIdentifier"> </span><span class="synType">charset</span><span class="synIdentifier">=</span><span class="synConstant">&quot;utf-8&quot;</span><span class="synIdentifier"> /&gt;</span> <span class="synPreProc"> </span><span class="synIdentifier">&lt;</span><span class="synStatement">title</span><span class="synIdentifier">&gt;</span>メタデータテスト - 血統の森<span class="synIdentifier">&lt;/</span><span class="synStatement">title</span><span class="synIdentifier">&gt;</span><span class="synComment">&lt;!-- 他にメタデータがなければ「題名」として取得 --&gt;</span> <span class="synPreProc"> </span><span class="synComment">&lt;!--meta name=&quot;dc.title&quot; content=&quot;Zetoroとメタデータ&quot; /--&gt;&lt;!-- title要素に優先してZoteroに「題名」として取得される。ogに優先する --&gt;</span> <span class="synPreProc"> </span><span class="synIdentifier">&lt;</span><span class="synStatement">meta</span><span class="synIdentifier"> property=</span><span class="synConstant">&quot;og:title&quot;</span><span class="synIdentifier"> </span><span class="synType">content</span><span class="synIdentifier">=</span><span class="synConstant">&quot;メタデータテスト&quot;</span><span class="synIdentifier"> /--&gt;</span><span class="synComment">&lt;!-- title要素に優先してZoteroに「題名」として取得される。 Twitterカードのためにこちらを使用。 --&gt;</span> <span class="synPreProc"> </span><span class="synIdentifier">&lt;</span><span class="synStatement">meta</span><span class="synIdentifier"> </span><span class="synType">name</span><span class="synIdentifier">=</span><span class="synConstant">&quot;dc.creator&quot;</span><span class="synIdentifier"> </span><span class="synType">content</span><span class="synIdentifier">=</span><span class="synConstant">&quot;Nakamura, Momdo&quot;</span><span class="synIdentifier"> /&gt;</span><span class="synComment">&lt;!-- 「著者名」として収録。Nakamura Momdo とすると姓名が逆になる--&gt;</span> <span class="synPreProc"> </span><span class="synComment">&lt;!--meta name=&quot;DC.creator&quot; content=&quot;なかむら もんど&quot; /--&gt;&lt;!-- &quot;なかむらもんど&quot; だとすべて名字と捉えられる。--&gt;</span> <span class="synPreProc"> </span><span class="synIdentifier">&lt;</span><span class="synStatement">meta</span><span class="synIdentifier"> </span><span class="synType">name</span><span class="synIdentifier">=</span><span class="synConstant">&quot;description&quot;</span><span class="synIdentifier"> </span><span class="synType">content</span><span class="synIdentifier">=</span><span class="synConstant">&quot;Zoteroにメタデータを取得させることを考えつつ、Twitter cardも仕込んだHTMLのテストページです。&quot;</span><span class="synIdentifier"> /&gt;</span><span class="synComment">&lt;!--「抄録」として収録--&gt;</span> <span class="synPreProc"> </span><span class="synIdentifier">&lt;</span><span class="synStatement">meta</span><span class="synIdentifier"> </span><span class="synType">content</span><span class="synIdentifier">=</span><span class="synConstant">&quot;Zoteroにメタデータを取得させることを考えつつ、Twitter cardも仕込んだHTMLのテストページです。&quot;</span><span class="synIdentifier"> property=</span><span class="synConstant">&quot;og:description&quot;</span><span class="synIdentifier">&gt;</span> <span class="synPreProc"> </span><span class="synIdentifier">&lt;</span><span class="synStatement">meta</span><span class="synIdentifier"> </span><span class="synType">content</span><span class="synIdentifier">=</span><span class="synConstant">&quot;血統の森&quot;</span><span class="synIdentifier"> property=</span><span class="synConstant">&quot;og:site_name&quot;</span><span class="synIdentifier">&gt;</span><span class="synComment">&lt;!--「ウェブサイト名」として取得--&gt;</span> <span class="synPreProc"> </span><span class="synComment">&lt;!--meta content=&quot;recipe&quot; name=&quot;DC.Type&quot; /--&gt;&lt;!--「ウェブサイトの種類」として取得もイマイチ何を入れればいいのか。 --&gt;</span> <span class="synPreProc"> </span><span class="synIdentifier">&lt;</span><span class="synStatement">meta</span><span class="synIdentifier"> </span><span class="synType">name</span><span class="synIdentifier">=</span><span class="synConstant">&quot;dc.language&quot;</span><span class="synIdentifier"> </span><span class="synType">content</span><span class="synIdentifier">=</span><span class="synConstant">&quot;ja&quot;</span><span class="synIdentifier"> /&gt;</span><span class="synComment">&lt;!--「言語」として取得--&gt;</span> <span class="synPreProc"> </span><span class="synComment">&lt;!-- Twitterカード対応 --&gt;</span> <span class="synPreProc"> </span><span class="synIdentifier">&lt;</span><span class="synStatement">meta</span><span class="synIdentifier"> </span><span class="synType">content</span><span class="synIdentifier">=</span><span class="synConstant">&quot;@momdo_&quot;</span><span class="synIdentifier"> </span><span class="synType">name</span><span class="synIdentifier">=</span><span class="synConstant">&quot;twitter:creator&quot;</span><span class="synIdentifier">&gt;</span> <span class="synPreProc"> </span><span class="synIdentifier">&lt;</span><span class="synStatement">meta</span><span class="synIdentifier"> </span><span class="synType">name</span><span class="synIdentifier">=</span><span class="synConstant">&quot;twitter:card&quot;</span><span class="synIdentifier"> </span><span class="synType">content</span><span class="synIdentifier">=</span><span class="synConstant">&quot;summary_large_image&quot;</span><span class="synIdentifier">&gt;</span> <span class="synPreProc"> </span><span class="synIdentifier">&lt;</span><span class="synStatement">meta</span><span class="synIdentifier"> property=</span><span class="synConstant">&quot;og:description&quot;</span><span class="synIdentifier"> </span><span class="synType">content</span><span class="synIdentifier">=</span><span class="synConstant">&quot;Zoteroにメタデータを取得させることを考えつつ、Twitter cardも仕込んだHTMLのテストページです。&quot;</span><span class="synIdentifier"> /&gt;</span><span class="synComment">&lt;!-- meta name=&quot;description&quot;と重複 --&gt;</span> <span class="synIdentifier">&lt;/</span><span class="synStatement">head</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">body</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">p</span><span class="synIdentifier">&gt;</span>test </pre> </div> <div class="section"> <h4>参考リソース</h4> <dl> <dt>HTMLの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CC%BE%C1%B0%B6%F5%B4%D6">名前空間</a>(namespace)について掘り下げてみる | girigiribauer.com</dt> <dd><a href="http://girigiribauer.com/archives/860">http://girigiribauer.com/archives/860</a></dd> <dt><a class="keyword" href="http://d.hatena.ne.jp/keyword/Dublin%20Core">Dublin Core</a>(ダブリン・コア)</dt> <dd> ウェブ資源<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E1%A5%BF%A5%C7%A1%BC%A5%BF">メタデータ</a>の共通語彙:<a href="http://www.kanzaki.com/docs/sw/dublin-core.html">http://www.kanzaki.com/docs/sw/dublin-core.html</a></dd> <dt>Hail2u.net</dt> <dd><a href="http://hail2u.net/">http://hail2u.net/</a></dd> <dt>RDFa Lite 1.1</dt> <dd><a href="http://www.asahi-net.or.jp/~ax2s-kmtn/internet/rdf/REC-rdfa-lite-20120607.html">http://www.asahi-net.or.jp/~ax2s-kmtn/internet/rdf/REC-rdfa-lite-20120607.html</a></dd> <dt>The Open Graph protocol</dt> <dd><a href="http://ogp.me/">http://ogp.me/</a></dd> <dt>Summary Card with Large Image | <a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a> Developers</dt> <dd><a href="https://dev.twitter.com/node/295">https://dev.twitter.com/node/295</a></dd> <dt>Cards Markup Tag Reference | <a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a> Developers</dt> <dd><a href="https://dev.twitter.com/node/285">https://dev.twitter.com/node/285</a></dd> </dl> </div> momdo Firefoxだって縦書き表示できるもん! hatenablog://entry/17680117127079410323 2014-12-08T00:00:00+09:00 2019-04-26T23:40:19+09:00 Nightly限定ですが。 [CSS][縦書] CSS研究部Webサイトを立ち上げました | TechRachoを読んでFirefoxが(最初は)ダメな子扱いされていたのと、won't fix: Status of 縦書き on Firefoxで現行のNightlyだと、about:configでlayout.css.vertical-text.enabledをtrueにすれば縦書きを解釈できるようになっていると聞いたので、SVGを用いた縦書きHTML:般若心経をFirefoxでも表示できるように細工したのが上の画像。どうもNightlyでletter-spacing属性が効いていないようで、… <p>Nightly限定ですが。<br /> <span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/momdo/20141206195205" class="hatena-fotolife" itemprop="url"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/momdo/20141206/20141206195205.png" alt="f:id:momdo:20141206195205p:image" title="f:id:momdo:20141206195205p:image" class="hatena-fotolife" itemprop="image"></a></span></p><p><a href="http://techracho.bpsinc.jp/?p=19430">[CSS][縦書] CSS研究部Webサイトを立ち上げました | TechRacho</a>を読んで<a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a>が(最初は)ダメな子扱いされていたのと、<a href="http://wontfix.blogspot.com/2014/11/status-of-on-firefox.html">won't fix: Status of 縦書き on Firefox</a>で現行のNightlyだと、<q><code>about:config</code>で<code>layout.css.vertical-text.enabled</code>を<code>true</code>にすれば</q>縦書きを解釈できるようになっていると聞いたので、<a href="http://momdo.s35.xrea.com/web-html-test/vertical-text/svg-test.html">SVGを用いた縦書きHTML:般若心経</a>を<a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a>でも表示できるように細工したのが上の画像。</p><p>どうもNightlyで<code>letter-spacing</code>属性が効いていないようで、ルビに割り当ててる<code>text</code>要素と親文字に割り当ててるものとのズレが…。まあ、ネタコンテンツだから仕方ない(何)。</p><p>上の例は<a class="keyword" href="http://d.hatena.ne.jp/keyword/SVG">SVG</a>を使ったトリッキーな方法ですが、もちろん素のHTMLに対しても効果は及びます。<br /> <span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/momdo/20141127203918" class="hatena-fotolife" itemprop="url"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/momdo/20141127/20141127203918.png" alt="f:id:momdo:20141127203918p:image" title="f:id:momdo:20141127203918p:image" class="hatena-fotolife" itemprop="image"></a></span></p><p>なお、素材は<a href="http://csslab.bpsinc.jp/">csslab@BPS -- CSS研究部活動記録</a>になります。</p><p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a>遣いとしては、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a>に今後の実装に頑張っていただきたく。</p> momdo ウェブアクセシビリティチェッカー開発者の頭ん中。を見ながら hatenablog://entry/17680117127079410460 2014-12-07T00:00:00+09:00 2019-04-26T23:40:20+09:00 ウェブアクセシビリティチェッカー開発者の頭ん中。 - Junnama Online http://junnama.alfasado.net/online/2014/12/a11y_tool_logic.html 他の人のアドベントカレンダー参加エントリーについて、いろいろと思うところがあったのでつらつらと。リンク先で言及されているモノが有償のチェッカーだったり非公開だったりと直接触ることはできないので、当然のことながら書いてあることからしか推測できない点についてはご容赦いただきたく。実際に使っている企業というのは事例紹介 | PowerCMS - カスタマイズする CMS。とかが掲げられている… <dl> <dt>ウェブ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%AF%A5%BB%A5%B7%A5%D3%A5%EA%A5%C6%A5%A3">アクセシビリティ</a>チェッカー開発者の頭ん中。 - Junnama Online</dt> <dd><a href="http://junnama.alfasado.net/online/2014/12/a11y_tool_logic.html">http://junnama.alfasado.net/online/2014/12/a11y_tool_logic.html</a></dd> </dl><p>他の人の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%C9%A5%D9%A5%F3%A5%C8%A5%AB%A5%EC%A5%F3%A5%C0%A1%BC">アドベントカレンダー</a>参加エントリーについて、いろいろと思うところがあったのでつらつらと。リンク先で言及されているモノが有償のチェッカーだったり非公開だったりと直<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C0%DC%BF%A8">接触</a>ることはできないので、当然のことながら書いてあること<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A4%AB%A4%E9%A4%B7">からし</a>か推測できない点についてはご容赦いただきたく。</p><p>実際に使っている企業というのは<a href="http://www.powercms.jp/case-studies/">事例紹介 | PowerCMS - カスタマイズする CMS。</a>とかが掲げられているので、そこからHTMLを覗いてみることにしましょう。</p> <div class="section"> <h4>まず良質なテンプレートを提供すべきでは</h4> <p>というのがつらつらと事例企業サイトのトップページをいくつか見に行った感想です。HTMLテンプレートについてどこがカスタマイズしているのかは私はよく分かってませんが、ざっくり見た感じで<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>時代にもなってXHTML1の<a class="keyword" href="http://d.hatena.ne.jp/keyword/DTD">DTD</a>で書き始めるのとかもう止めたほうがいいと思いますし、copyright表示を<code>address</code>要素で<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A1%BC%A5%AF%A5%A2%A5%C3%A5%D7">マークアップ</a>するのが散見されますが、これはたぶんテンプレートがそうなっているから、なのかなと。前者のXHTML1の宣言についてはやんごとなき事情があるのかもしれませんが、どうせ<a class="keyword" href="http://d.hatena.ne.jp/keyword/UTF-8">UTF-8</a>で<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%F3%A5%B3%A1%BC%A5%C7%A5%A3%A5%F3%A5%B0">エンコーディング</a>して<code>text/html</code>で送出するのですから<a class="keyword" href="http://d.hatena.ne.jp/keyword/XML">XML</a>宣言は不要でしょう。後者に関しては<code>address</code>要素の誤った使い方であるのは論ずるまでもないわけで、このあたりはもうちょっと工夫があってもいいのかな、という感想です。重箱の隅という感じも否めませんけど。<br /> <br /> </p> </div> <div class="section"> <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>仕様の"バックポート"を。</h4> <p>前述したXHTML1で<a class="keyword" href="http://d.hatena.ne.jp/keyword/XML">XML</a>宣言しないというのは、XHTML1付録Cの互換性<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AC%A5%A4%A5%C9%A5%E9%A5%A4%A5%F3">ガイドライン</a>を発展させたポリグロット・<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A1%BC%A5%AF%A5%A2%A5%C3%A5%D7">マークアップ</a>において、<a class="keyword" href="http://d.hatena.ne.jp/keyword/XML">XML</a>宣言が禁止されていることに由来します。<a href="#f-0817f9e5" name="fn-0817f9e5" title="ポリグロット・マークアップ 4.1 処理命令とXML宣言 http://momdo.s35.xrea.com/web-html-test/spec/CR-html-polyglot-20140717.html#PI-and-xml">*1</a> またcopyright表示については、<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>仕様で<code>small</code>要素を使うことが示唆されています。<a href="#f-e96b5783" name="fn-e96b5783" title="HTML5 4.5.4 small要素 http://momdo.github.io/html5/text-level-semantics.html#the-small-element">*2</a> 前述の話から若干それますが、より<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%AF%A5%BB%A5%B7%A5%D3%A5%EA%A5%C6%A5%A3">アクセシビリティ</a>ー寄りに見てみると、WCAG2.0-TECHでHTML4・XHTML1向けと言及されている<code>table</code>要素の<code>summary</code>属性は<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>で廃止されました。<a href="#f-26a46ec3" name="fn-26a46ec3" title="H73: table要素のsummary属性を用いて、データテーブルの概要を提供する http://waic.jp/docs/WCAG-TECHS/H73.html">*3</a> <a href="#f-a06dd255" name="fn-a06dd255" title="11.2 適合しない機能 http://momdo.github.io/html5/obsolete.html#attr-table-summary">*4</a><br /> バリデーターと<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%AF%A5%BB%A5%B7%A5%D3%A5%EA%A5%C6%A5%A3">アクセシビリティ</a>ー・チェッカーの違い、というのが実はあまりよく分かってないのですが、たとえXHTML1を選択したとしても、より新しい<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>とその関連仕様に基づくとHTMLの記述はこうあるべきだ、というようなメッセージを出してくれるようなHTMLチェッカーというのは、あってもいいんじゃないかなとか。<br /> <br /> </p> </div> <div class="section"> <h4>自然と学習できるようなインターフェース</h4> <p>もちろんチェッカーを使う担当者にその意欲があれば、の話ですが、たとえばリンク先の診断結果の画像で、<q>言語指定は'ja'です。指定が正しいかどうか確認</q>という文言が見えますが、あまりHTMLの知識がない人には何をどう確認したらいいのか不明瞭ではないでしょうか。使用者が日本語話者でウェブコンテンツが日本語であることは十中八九疑いようがないんだけど、「日本語であることを確認してください」ぐらいのほうが親切ではないですかね、とか。あるいは画像の<code>alt</code>属性値の確認にしても、デシジョンツリーなり<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AC%A5%A4%A5%C9%A5%E9%A5%A4%A5%F3">ガイドライン</a>を表示するとかそういうことはできそう。製品の実情を知りませんが。<br /> 今はメンテナンスされていませんが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Another%20HTML-lint">Another HTML-lint</a>ってある意味優秀だったと思うんですよね。雑学的なことがいろいろ書いてあったわけで、そこからメッセージを読むなりリンクを辿るなりして学べたものが大きかった、と。そういうチェッカーがあってもいいんじゃないでしょうか、とかなんとか。</p><br /> <p>なんだかとりとめのない話になってしまいましたが、チェッカーついでに1つ、<a href="http://validator.w3.org/">Markup Validation Service</a>の日本語化を誰かやりませんか。これが日本語化されていればバリデーターを使うということに対するハードルがぐんと下がるような気がするんですけど。あとは、最近の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%AF%A5%BB%A5%B7%A5%D3%A5%EA%A5%C6%A5%A3">アクセシビリティ</a>ー・HTMLチェッカー事情をよく知らないんですけど、日本語で信頼できるフリーなチェッカーって今どういうのがあるんですかね。よいものがあったら是非教えてください。</p> </div><div class="footnote"> <p class="footnote"><a href="#fn-0817f9e5" name="f-0817f9e5" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">ポリグロット・<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A1%BC%A5%AF%A5%A2%A5%C3%A5%D7">マークアップ</a> 4.1 処理命令と<a class="keyword" href="http://d.hatena.ne.jp/keyword/XML">XML</a>宣言 <a href="http://momdo.s35.xrea.com/web-html-test/spec/CR-html-polyglot-20140717.html#PI-and-xml">http://momdo.s35.xrea.com/web-html-test/spec/CR-html-polyglot-20140717.html#PI-and-xml</a></span></p> <p class="footnote"><a href="#fn-e96b5783" name="f-e96b5783" class="footnote-number">*2</a><span class="footnote-delimiter">:</span><span class="footnote-text"><a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a> 4.5.4 small要素 <a href="http://momdo.github.io/html5/text-level-semantics.html#the-small-element">http://momdo.github.io/html5/text-level-semantics.html#the-small-element</a></span></p> <p class="footnote"><a href="#fn-26a46ec3" name="f-26a46ec3" class="footnote-number">*3</a><span class="footnote-delimiter">:</span><span class="footnote-text">H73: table要素のsummary属性を用いて、データテーブルの概要を提供する <a href="http://waic.jp/docs/WCAG-TECHS/H73.html">http://waic.jp/docs/WCAG-TECHS/H73.html</a></span></p> <p class="footnote"><a href="#fn-a06dd255" name="f-a06dd255" class="footnote-number">*4</a><span class="footnote-delimiter">:</span><span class="footnote-text">11.2 適合しない機能 <a href="http://momdo.github.io/html5/obsolete.html#attr-table-summary">http://momdo.github.io/html5/obsolete.html#attr-table-summary</a></span></p> </div> momdo W3C HTML5仕様に見るアクセシビリティーに関する記述 hatenablog://entry/17680117127079410598 2014-12-06T00:00:00+09:00 2019-04-26T23:40:22+09:00 この記事はWeb Accessibility Advent Calendar 2014 - Adventarの6日目のエントリーです。このエントリーのタイトルからは、やれW3Cだやれ仕様だとお堅いイメージがぷんぷん漂いますが、易しいめに書くことを心がけてみました。そのため、ガチ勢には物足りなさを感じるかもしれません。 ウェブ業界の人にとっては周知のことだと思いますが、去る10月28日付けでHTML5仕様(以下単に仕様と書きます)が勧告されました。この仕様の意義はさまざまな切り口で捉えることが考えられますが、アクセシビリティーという観点から1つ前のバージョンのHTMLであるHTML4と比較して、… <p>この記事は<a href="http://www.adventar.org/calendars/333">Web Accessibility Advent Calendar 2014 - Adventar</a>の6日目のエントリーです。このエントリーのタイトルからは、やれ<abbr title="World Wide Web Consortium">W3C</abbr>だやれ仕様だとお堅いイメージがぷんぷん漂いますが、易しいめに書くことを心がけてみました。そのため、ガチ勢には物足りなさを感じるかもしれません。<br /> <br /> </p> <p>ウェブ業界の人にとっては周知のことだと思いますが、去る10月28日付けで<a href="http://www.w3.org/TR/html5/">HTML5仕様</a>(以下単に仕様と書きます)が勧告されました。この仕様の意義はさまざまな切り口で捉えることが考えられますが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%AF%A5%BB%A5%B7%A5%D3%A5%EA%A5%C6%A5%A3">アクセシビリティ</a>ーという観点から1つ前のバージョンの<abbr title="HyperText Markup Language">HTML</abbr>であるHTML4と比較して、この仕様で特に目立って強化されたと思われる点を挙げるとすると、</p> <ol> <li><code>img</code>要素の<code>alt</code>属性が大幅に拡充されている</li> <li>WAI-ARIA1.0を取り込んでいる</li> <li>映像や音声のための要素(<code>video</code>要素、<code>audio</code>要素)にテキストトラックを与えることができる</li> </ol><p>の3つではないかと思います。ほかにも仕様自身がValidatorに言及していたりするといった細かい点を挙げ出すとキリがないですが、今回は前述の3つに絞りつつも、つまみ食いの形で雑多なものをひとくくりにした4つでお送りしたいと思います。<br /> なお、仕様に関しては拙訳<a href="http://momdo.github.io/html5/Overview.html">HTML5日本語訳</a>をそのまま引用しています。</p> <div class="section"> <h4><code>alt</code>属性について</h4> <p><code>img</code>要素の<code>alt</code>属性の値、つまり代替テキストに関して仕様は、<q>代替テキストは、視覚情報をアクセシブルにするための最も重要な方法</q>であって、<q>画像の<code>alt</code>属性は非常に重要な<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%AF%A5%BB%A5%B7%A5%D3%A5%EA%A5%C6%A5%A3">アクセシビリティ</a>属性である。</q>とされています<a href="#f-e85aea2c" name="fn-e85aea2c" title="仕様4.7.1.1 画像に対して代替として動作するテキストを提供に対する要件より">*1</a>。</p><br /> <p>たとえば、次のようなねこ画像を貼ることを考えてみましょう。<br /> <img src="https://pbs.twimg.com/media/B3rveVrCYAAtqeG.jpg" alt="砂利の地面に腹ばいになっている、茶白ののらねこ写真"></p> <pre class="code HTML" data-lang="HTML" data-unlink>&lt;img src=&#34;http://pbs.twimg.com/media/B3rveVrCYAAtqeG.jpg&#34; alt=&#34;ねこ画像&#34; /&gt;</pre><p>というようなHTMLコードを与えればとりあえずは良いわけですが、仕様の<a href="http://momdo.github.io/html5/embedded-content-0.html#images-of-pictures">4.7.1.1.14 写真の画像</a>によれば、代替テキストには簡単な説明を書くよう促しています。つまり上述のコードは、</p> <pre class="code HTML" data-lang="HTML" data-unlink>&lt;img src=&#34;http://pbs.twimg.com/media/B3rveVrCYAAtqeG.jpg&#34; alt=&#34;砂利の地面に腹ばいになっている、茶白ののらねこ写真&#34; /&gt;</pre><p>とした方が代替テキストとしてより好ましい、ということになります(もちろん一例です)。これは、<a href="http://waic.jp/docs/WCAG-TECHS/G100.html">G100: 非テキストコンテンツの一般に認められた名前又は内容が分かる名前を提供する|WCAG 2.0 実装方法集</a>にも合致するでしょう。</p><br /> <p>とはいえ、この例はあくまで写真の場合であり、画像によって適切な代替テキストは当然変化します。では、画像に対する適切な代替テキストを決定するにはどうすればいいのでしょうか。仕様には、</p> <blockquote cite="http://momdo.github.io/html5/embedded-content-0.html#general-guidelines"> <p>適切な代替テキストを判断するには、画像がページに含まれている理由を考えることが重要である。その目的は何か?このように考えることは、読者に意図する画像に関して何が重要かを理解するのに役立つ。すべての画像は、有用な情報を提供する、機能を実行する、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%BF%A5%E9%A5%AF%A5%C6%A5%A3%A5%D6">インタラクティブ</a>な要素を分類する、美意識を高めるまたは純粋に装飾的といったページ上に存在する理由を持つ。したがって、画像が何のために存在するのかを理解することは、適切な代替テキストの記述を容易にする。</p> <cite><a href="http://momdo.github.io/html5/embedded-content-0.html#general-guidelines">4.7.1.1.2 &#x4E00;&#x822C;&#x7684;&#x306A;&#x30AC;&#x30A4;&#x30C9;&#x30E9;&#x30A4;&#x30F3; &#x2015; HTML5 &#x65E5;&#x672C;&#x8A9E;&#x8A33;</a></cite> </blockquote> <p>というように、画像の目的を考えるよう促しています。<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a>のWAIのリソースに<a href="http://www.w3.org/WAI/tutorials/images/decision-tree/">An alt Decision Tree &#8226; Images &#8226; WAI Web Accessibility Tutorials</a>(英語)というようなデシジョンツリーもありますが、個人的には仕様で一番それっぽそうなものを見つけた方が早い気もします。</p><br /> <p>前述したように、画像に対して適切な代替テキストを付与することは人間の価値判断を伴うため、自動で付与するのは現在の技術ではおそらく困難でしょう。また、<a class="keyword" href="http://d.hatena.ne.jp/keyword/CMS">CMS</a>で大量に画像を管理しているものの、これまで適切に代替テキストを付与してこなかった場合にどうするか、といったあたりも課題かもしれません。</p> </div> <div class="section"> <h4>WAI-<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a>について</h4> <p>WAI-<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a>のWAIは、<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a>のWeb Accessibility Initiative(ウェブ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%AF%A5%BB%A5%B7%A5%D3%A5%EA%A5%C6%A5%A3">アクセシビリティ</a>・イニシアチブ)の略称です。<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a>というのは<abbr title="Mozilla Developer Network">MDN</abbr>の説明を引用すると、</p> <blockquote cite="https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA"> <p>Accessible Rich Internet Applications (<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a>) は Web コンテンツや Web アプリケーション (特に <a class="keyword" href="http://d.hatena.ne.jp/keyword/Ajax">Ajax</a> や <a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a> を伴って開発するもの) を、ハンディキャップを持つ人々にとってよりアクセシブルにする方法を定義するものです。例えば、<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a> はナビゲーションの目印、<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A6%A5%A3%A5%B8%A5%A7%A5%C3%A5%C8">ウィジェット</a>、フォームのヒントやエラーメッセージ、動的なコンテンツ更新などをアクセシブルにできるようします。</p> <cite><a href="https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA">ARIA - Accessibility | MDN</a></cite> </blockquote> <p>ということになります。これだとわかりにくいと思いますので、もっと具体的に考えてみましょう。</p><br /> <p>たとえば、前節であげたような画像ならば、<code>img</code>要素で<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A1%BC%A5%AF%A5%A2%A5%C3%A5%D7">マークアップ</a>するのが素直な方法でしょう。<code>img</code>要素は画像を表すわけです。ほかには<code>p</code>要素ならば段落を表す…と言った具合に、要素は意味を持っているわけです。このHTML要素の意味をWAI-<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a>で表したのが、仕様でいうところの「デフォルトの暗黙の<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a>セマンティック」となるわけです。また、WAI-<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a>にあって、仕様にない意味というものも当然存在します(たとえば、ツリー表示を意味する<code>tree</code>ロールといったものなど)。言い換えるならば、WAI-<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a>は仕様(WAI-<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a>から見て、厳密に表現するとホスト言語)の意味を明示化する、あるいは仕様にない意味を補完してくれると言えるでしょう。</p><br /> <p>次のコードは、WAI-<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a>を用いた<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%B9%A5%AD%A1%BC%A5%A2%A1%BC%A5%C8">アスキーアート</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A1%BC%A5%AF%A5%A2%A5%C3%A5%D7">マークアップ</a>している要素の意味をより明確にしている例です。WAI-<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a>を解釈してくれるユーザーエージェントであれば、<code>figure</code>要素を無意味なテキストの羅列ではなく画像と見なし、<code>figcaption</code>要素を<code>figure</code>要素のキャプションとして解釈してくれるでしょう。</p> <blockquote cite="http://momdo.github.io/html5/dom.html#sec-implicit-aria-semantics"> <pre class="code HTML" data-lang="HTML" data-unlink>&lt;figure role=&#34;img&#34; aria-labelledby=&#34;fish-caption&#34;&gt; &lt;pre&gt; o .&#39;`/ &#39; / ( O .-&#39;` ` `&#39;-._ .&#39;) _/ (o) &#39;. .&#39; / ) ))) &gt;&lt; &lt; `\ |_\ _.&#39; &#39;. \ &#39;-._ _ .-&#39; &#39;.) `\__\ &lt;/pre&gt; &lt;figcaption id=&#34;fish-caption&#34;&gt; Joan G. Stark, &#34;&lt;cite&gt;fish&lt;/cite&gt;&#34;. October 1997. ASCII on electrons. 28×8. &lt;/figcaption&gt; &lt;/figure&gt; </pre> <cite><a href="http://momdo.github.io/html5/dom.html#sec-implicit-aria-semantics">3.2.7.4 &#x6697;&#x9ED9;&#x306E;ARIA&#x30BB;&#x30DE;&#x30F3;&#x30C6;&#x30A3;&#x30C3;&#x30AF; &#x2015; HTML5 &#x65E5;&#x672C;&#x8A9E;&#x8A33;</a></cite> </blockquote> <p><br /> WAI-<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a>は意味を付け足すだけでなく、打ち消すこともできます。たとえば、一般に<code>table</code>要素はレイアウトのために使うことを避けた方がよいとされますが、レイアウトに使う場合の記述が仕様にはあります。</p> <blockquote cite="http://momdo.github.io/html5/tabular-data.html#the-table-element"> <p>テーブルをレイアウトに使用する場合、ユーザーエージェントに対して支援技術へテーブルを適切に表現するために、および文書からのテー<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D6%A5%EB%A5%C7%A1%BC">ブルデー</a>タの抽出を 望むツールへ著者の意図を適切に伝えるために、属性role="presentation"でマークしなければならない。</p> <cite><a href="http://momdo.github.io/html5/tabular-data.html#the-table-element">4.9.1 table&#x8981;&#x7D20; &#x2015; HTML5 &#x65E5;&#x672C;&#x8A9E;&#x8A33;</a></cite> </blockquote> <p>「しなければならない」というのはもちろん<abbr title="Request For Comments">RFC</abbr> 2119<a href="#f-e25448da" name="fn-e25448da" title="参考日本語訳:RFC において要請の程度を示すために用いるキーワード https://www.ipa.go.jp/security/rfc/RFC2119JA.html">*2</a>の"must"です。この場合、<code>table</code>要素の持っている意味を打ち消して、単に見た目だけにしか存在しないという意味で上書きします(いわば<code>div</code>要素のようにしてしまう)。</p><br /> <p>そうはいうものの、わざわざ仕様にある意味を打ち消してまで単に見た目だけのために存在するんだ、なんてやたらと宣言するものでもないでしょうから、濫用するのは避けたいものです。</p><br /> <p>以下のリンクは筆者による翻訳物の宣伝です。</p> <dl> <dt></dt> <dd>//momdo.<a class="keyword" href="http://d.hatena.ne.jp/keyword/github">github</a>.io/WCAG20-TECHS_<a class="keyword" href="http://d.hatena.ne.jp/keyword/aria">aria</a>.html"><a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a> Techniques | Techniques for WCAG 2.0 日本語訳</a>:WAICの実装方法集では翻訳されていないセクションの翻訳物です。<a href="#f-45707994" name="fn-45707994" title="さくっとWAICに引き取ってもらいたいんですがどうすればいいのでしょうか">*3</a></dd> <dt></dt> <dd>//momdo.<a class="keyword" href="http://d.hatena.ne.jp/keyword/github">github</a>.io/wai-<a class="keyword" href="http://d.hatena.ne.jp/keyword/aria">aria</a>/">Accessible Rich Internet Applications (WAI-<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a>) 1.0 日本語訳</a>:WAI-<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a> 1.0 勧告の日本語訳で、翻訳進行中です(5.4節の途中まで)。</dd> </dl><p>上記に限らず、筆者の訳した文章に関して、誤訳等のツッコミを歓迎します。</p> </div> <div class="section"> <h4>動画や音声のテキストトラックについて</h4> <p><code>video</code>要素や<code>audio</code>要素(仕様ではメディア要素としてひとくくりにされる)に関しては、<code>track</code>要素を記述することで、テキストトラックを用意することができます。とはいうものの、筆者自身が仕様の訳起こしをやっている割には理解が曖昧ですし、実際に動画や音声を用意して実装の動作を検証したというわけでもないので、ごく簡単な説明にとどめるだけにして、最後に他サイトへの記事への誘導という形にしたいと思います。</p><p>仕様によれば、<code>track</code>要素の取ることのできるテキストトラックの種類(<code>kind</code>属性の値)は次の5つです。以下の説明は筆者が改変しています。<a href="#f-58229aef" name="fn-58229aef" title="仕様は4.7.9 track要素 http://momdo.github.io/html5/embedded-content-0.html#the-track-element">*4</a></p> <dl> <dt><code>subtitles</code></dt> <dd>(日本人話者を前提として)音声情報がたとえば英語である場合の「翻訳」を主に意図します。</dd> <dt><code>captions</code></dt> <dd>(日本人話者を前提として)音声情報が日本語ではあるが、聞き取りにくいか聞き取れないことを前提とした「キャプション」。耳の不自由な人を意図しますが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EF%A5%F3%A5%BB%A5%B0">ワンセグ</a>のキャプションのような利用の仕方もあるでしょう。</dd> <dt><code>descriptions</code></dt> <dd>映像情報が見ることができない(目の不自由な人、あるいは車を運転していて画面を見ることができない)ことを前提とした「音声ガイド」。</dd> <dt><code>chapters</code></dt> <dd>映像や音声の「章のタイトル」。</dd> <dt><code>metadata</code></dt> <dd><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8">スクリプト</a>との連携を意図した「<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E1%A5%BF%A5%C7%A1%BC%A5%BF">メタデータ</a>」。</dd> </dl><p><code>captions</code>や<code>descriptions</code>が身体などに障害を持っている人にも応用できることが示唆されますが、そういった人だけを意図しているわけではないことに十分注意すべきだと個人的には思います。たとえば、音が出せない環境で動画にキャプションがあれば、それはそれで使いどころが見いだせたり、ひらがなのみのキャプションを用意すれば漢字が分からない子どもにも使えるわけで、状況に応じてさまざまな人に恩威があるでしょう。</p><p>と、ざっくばらんな格好になりましたが、最後に<a href="http://website-usability.info/">Website Usability Info</a>の記事をいくつか紹介して、この節の締めに代えたいと思います。</p> <dl> <dt>動画の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AF%A5%ED%A1%BC%A5%BA%A5%C9%A5%AD%A5%E3%A5%D7%A5%B7%A5%E7%A5%F3">クローズドキャプション</a>の作りかた (<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a> の &lt;video&gt; 要素の場合)</dt> <dd><a href="http://website-usability.info/2013/01/entry_130126.html">http://website-usability.info/2013/01/entry_130126.html</a></dd> <dt>動画の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AF%A5%ED%A1%BC%A5%BA%A5%C9%A5%AD%A5%E3%A5%D7%A5%B7%A5%E7%A5%F3">クローズドキャプション</a>の作りかた (<a class="keyword" href="http://d.hatena.ne.jp/keyword/YouTube">YouTube</a> の場合)</dt> <dd><a href="http://website-usability.info/2013/01/entry_130121.html">http://website-usability.info/2013/01/entry_130121.html</a></dd> <dt>動画コンテンツに対する「音声ガイド」</dt> <dd><a href="http://website-usability.info/2014/01/entry_140119.html">http://website-usability.info/2014/01/entry_140119.html</a></dd> <dt>track 要素の基礎 - <a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a> Rocks</dt> <dd><a href="http://www.html5rocks.com/ja/tutorials/track/basics/">http://www.html5rocks.com/ja/tutorials/track/basics/</a></dd> </dl> </div> <div class="section"> <h4>雑多なもの</h4> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%AF%A5%BB%A5%B7%A5%D3%A5%EA%A5%C6%A5%A3">アクセシビリティ</a>ーに関連すると思われる仕様の記述を3つほどつまみ食いしてみました。</p> <div class="section"> <h5>title属性を必要以上に使わない</h5> <blockquote cite="http://momdo.github.io/html5/dom.html#the-title-attribute"> <p>title属性に依存することは、多くのユーザーエージェントがこの仕様で要求されるようなアクセス可能な方法で属性を公開しないため、現在推奨されない(たとえば、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C4%A1%BC%A5%EB%A5%C1%A5%C3%A5%D7">ツールチップ</a>を出現させるマウスなどの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DD%A5%A4%A5%F3%A5%C6%A5%A3%A5%F3%A5%B0%A5%C7%A5%D0%A5%A4%A5%B9">ポインティングデバイス</a>が必要になり、これはモダンな携帯端末や<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BF%A5%D6%A5%EC%A5%C3%A5%C8">タブレット</a>をもつ人のような、キーボードのみのユーザーとタッチのみのユーザーを締め出す)。</p> <cite><a href="http://momdo.github.io/html5/dom.html#the-title-attribute">3.2.5.2 title&#x5C5E;&#x6027; &#x2015; HTML5 &#x65E5;&#x672C;&#x8A9E;&#x8A33;</a></cite> </blockquote> <p>引用に中にあるとおり、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%DE%A1%BC%A5%C8%A5%D5%A5%A9%A5%F3">スマートフォン</a>や<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BF%A5%D6%A5%EC%A5%C3%A5%C8">タブレット</a>のようなデ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%A4%A5%B9">バイス</a>で<code>title</code>属性をマウスで操作するときのように動作させるのはおそらく困難でしょう。</p> </div> <div class="section"> <h5>バリデーターについて</h5> <blockquote cite="http://momdo.github.io/html5/introduction.html#how-to-catch-mistakes-when-writing-html"> <p>著者は、よく目にする誤りを見つける適合性チェッカー(バリデータとも呼ばれる)を利用することが推奨される。<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a>は、<a href="http://validator.w3.org/nu/">Nu Markup Validation Service</a>を含む、多くのオンライン検証サービスを提供する。</p> <cite><a href="http://momdo.github.io/html5/introduction.html#how-to-catch-mistakes-when-writing-html:-validators-and-conformance-checkers">1.9.3 HTML&#x3092;&#x8A18;&#x8FF0;&#x3059;&#x308B;&#x969B;&#x306B;&#x8AA4;&#x308A;&#x3092;&#x898B;&#x3064;&#x3051;&#x308B;&#x65B9;&#x6CD5;&#xFF1A;&#x30D0;&#x30EA;&#x30C7;&#x30FC;&#x30BF;&#x3068;&#x9069;&#x5408;&#x6027;&#x30C1;&#x30A7;&#x30C3;&#x30AB;&#x30FC; &#x2015; HTML5 &#x65E5;&#x672C;&#x8A9E;&#x8A33;</a></cite> </blockquote> <p><a href="http://waic.jp/docs/WCAG-TECHS/G134.html">G134: ウェブページをバリデートする|WCAG 2.0 実装方法集</a>にも挙げられているような、バリデーターの案内が仕様にも記載されている、というお話です。WCAG 2.0を参照するまでもなく文法に沿ったHTMLが求められるわけですから、当然<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B5%A1%B3%A3%C5%AA">機械的</a>なチェックをするべきです。ただし、バリデーターでエラーが検出されないから仕様に適合していると言える、とは限りません。たとえば、最初に挙げた<code>alt</code>属性の値は、文脈によって変化します。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B5%A1%B3%A3%C5%AA">機械的</a>なチェックの限界を頭の片隅におくことが必要でしょう。</p> </div> <div class="section"> <h5>意味を考える</h5> <p>最後に次の仕様の一節を引用したいと思います。</p> <blockquote cite="http://momdo.github.io/html5/dom.html#semantics-0"> <p>HTMLでの要素、属性、および属性値は、ある意味(セマンティック)を持つよう(この仕様によって)定義される。たとえば、<code>ol</code>要素は順序つきリストを表し、<code>lang</code>属性はコンテンツの言語を表す。</p><p>これら定義は、ウェブブラウザや<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B8%A1%BA%F7%A5%A8%A5%F3%A5%B8%A5%F3">検索エンジン</a>などのHTMLプロセッサに、著者が考えてないかもしれないさまざまな文脈で文書およびアプリケーションの提示と使用を許可する。</p><p>著者は、ソフトウェアがページを正しく処理するのを妨げるような、適切な意図されるセマンティック目的以外の要素、属性、または属性値を使用してはならない。</p><p>著者は、将来的に拡張される言語に対して拡張が著しく困難になるため、この仕様または他の適用可能な仕様で許可されない要素、属性、または属性値を使用してはならない。</p> <cite><a href="http://momdo.github.io/html5/dom.html#semantics-0">3.2.1 &#x30BB;&#x30DE;&#x30F3;&#x30C6;&#x30A3;&#x30C3;&#x30AF; &#x2015; HTML5 &#x65E5;&#x672C;&#x8A9E;&#x8A33;</a></cite> </blockquote> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%AF%A5%BB%A5%B7%A5%D3%A5%EA%A5%C6%A5%A3">アクセシビリティ</a>ーという単語が1つも出てきていないにもかかわらず、締めが仕様のセマンティックの節からの引用なのはどういうことなのか、と疑問を持つ方もいるかもしれません。</p><br /> <p>たとえば、見出しに対して<code>h1</code>要素で<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A1%BC%A5%AF%A5%A2%A5%C3%A5%D7">マークアップ</a>すれば、HTMLコードを扱う人は見出しだと認識できますし、種々の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D6%A5%E9%A5%A6%A5%B6%A1%BC">ブラウザー</a>も見出しだと認識できます。しかし、<code>p</code>要素で<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A1%BC%A5%AF%A5%A2%A5%C3%A5%D7">マークアップ</a>した場合はどうでしょうか。<code>p</code>要素に対して見出しのスタイルを当てれば、HTMLを<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D6%A5%E9%A5%A6%A5%B6%A1%BC">ブラウザー</a>で表示する結果は見出しとして人間が認識できるでしょうが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D6%A5%E9%A5%A6%A5%B6%A1%BC">ブラウザー</a>はそのまま段落として認識するでしょう。このような誤った要素(など)の使い方をしてはならない、と仕様は要求しているわけです。たとえバリデーターや<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%AF%A5%BB%A5%B7%A5%D3%A5%EA%A5%C6%A5%A3">アクセシビリティ</a>ー・チェッカーでエラーが検出されなくとも、仕様違反になります。</p><br /> <p>つまるところ、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%AF%A5%BB%A5%B7%A5%D3%A5%EA%A5%C6%A5%A3">アクセシビリティ</a>ーを頑張らなきゃという前に、まず仕様どおりのHTMLを書くように心がけましょう、ということです。そして、このエントリーで示してきたような<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%AF%A5%BB%A5%B7%A5%D3%A5%EA%A5%C6%A5%A3">アクセシビリティ</a>ーに関する記述が仕様にはあります。もちろんそれだけでなく、HTMLを書く上で役立つだろうさまざまな記述もあります。筆者の個人的な意見として、仕様に反しないHTMLを書くことが<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%AF%A5%BB%A5%B7%A5%D3%A5%EA%A5%C6%A5%A3">アクセシビリティ</a>ー向上の大きな一歩につながると思います。仕様を理解する上で<a href="http://momdo.github.io/html5/Overview.html">HTML5日本語訳</a>が役立てば幸いですという<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%C6%A5%DE">ステマ</a>(になってないただの宣伝)でこのエントリーの締めに代えさせていただきたいと思います(酷い)。最後までおつきあいありがとうございました。</p> </div> </div> <div class="section"> <h4>謝辞</h4> <p>ねこ画像は<a href="https://twitter.com/isaji/">@isaji</a>さんから <a href="https://twitter.com/isaji/status/539006410013437952">https://twitter.com/isaji/status/539006410013437952</a> をお借りしました。<br /> <a href="http://website-usability.info/">Website Usability Info</a>のリソースは<a href="https://twitter.com/kzakza/">@kzakza</a>さんに紹介いただきました。<br /> この場を借りてお礼申し上げます。</p> </div><div class="footnote"> <p class="footnote"><a href="#fn-e85aea2c" name="f-e85aea2c" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">仕様<a href="http://momdo.github.io/html5/embedded-content-0.html#the-img-element">4.7.1.1 画像に対して代替として動作するテキストを提供に対する要件</a>より</span></p> <p class="footnote"><a href="#fn-e25448da" name="f-e25448da" class="footnote-number">*2</a><span class="footnote-delimiter">:</span><span class="footnote-text">参考日本語訳:<a class="keyword" href="http://d.hatena.ne.jp/keyword/RFC">RFC</a> において要請の程度を示すために用いるキーワード <a href="https://www.ipa.go.jp/security/rfc/RFC2119JA.html">https://www.ipa.go.jp/security/rfc/RFC2119JA.html</a></span></p> <p class="footnote"><a href="#fn-45707994" name="f-45707994" class="footnote-number">*3</a><span class="footnote-delimiter">:</span><span class="footnote-text">さくっとWAICに引き取ってもらいたいんですがどうすればいいのでしょうか</span></p> <p class="footnote"><a href="#fn-58229aef" name="f-58229aef" class="footnote-number">*4</a><span class="footnote-delimiter">:</span><span class="footnote-text">仕様は4.7.9 track要素 <a href="http://momdo.github.io/html5/embedded-content-0.html#the-track-element">http://momdo.github.io/html5/embedded-content-0.html#the-track-element</a></span></p> </div> momdo 【ゆるーく募集】HTML5日本語訳の間違い探しをしてみませんか? hatenablog://entry/17680117127079410896 2014-11-20T00:00:00+09:00 2019-04-26T23:40:24+09:00 ちなみに、というか当然の如くボランティアです。実際に貢献していただいても何も出ません><*1管理人の翻訳したHTML5日本語訳について、ゆるく間違い探し、もとい校正をしていただける方を募集しております(募集とは書いていますが、別に我こそはと名乗り出てもらわなくても大丈夫です)。 校正?なんだか難しそうです… 「てにをは」の誤りレベルからで大丈夫です!HTML5はあまりにも巨大すぎる仕様ゆえに、私一人でとても面倒を見切れないという事情があります。前述した助詞の誤りの他に、 あるべきところに句読点がない/句読点が重複している 誤字・脱字がある 訳出した単語にブレがある たとえば、あるところで「ユー… <p>ちなみに、というか当然の如くボランティアです。実際に貢献していただいても何も出ません><<a href="#f-a64c183c" name="fn-a64c183c" title="何も出ませんが、Twitterアカウントをお持ちの方はそのアカウント名を、その他の手段で報告していただいた方にはハンドルを記載させていただきます。">*1</a></p><p>管理人の翻訳した<a href="http://momdo.github.io/html5/Overview.html">HTML5日本語訳</a>について、ゆるく間違い探し、もとい校正をしていただける方を募集しております(募集とは書いていますが、別に我こそはと名乗り出てもらわなくても大丈夫です)。</p> <div class="section"> <h4>校正?なんだか難しそうです…</h4> <p>「てにをは」の誤りレベルからで大丈夫です!<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>はあまりにも巨大すぎる仕様ゆえに、私一人でとても面倒を見切れないという事情があります。前述した助詞の誤りの他に、</p> <ul> <li>あるべきところに句読点がない/句読点が重複している</li> <li>誤字・脱字がある</li> <li>訳出した単語にブレがある <ul> <li>たとえば、あるところで「ユーザ<em>ー</em>エージェント」となっているのに、別のところで「ユーザエージェント」となっている</li> <li>ほかには、「祖先」と書かれていたり「先祖」と書かれていたりと、統一されていない、など。</li> </ul></li> <li>日本語と英語の間に不自然なスペースがある <ul> <li>当サイトの訳出において、日本語と英語の間のスペースは原則として取っていません。</li> </ul></li> </ul><p>つまり、<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>仕様を理解していなくても、日本語としてなんか変だ、と感じたら報告してもらえると中の人が喜びます、というお話です。こんなの気付くだろ?とか思う明らかな誤りでも、中の人は気付いていませんので送っていただければ。</p> </div> <div class="section"> <h4>簡単そうなので、もう少し難易度の高いことをしてみたい!</h4> <p><a href="http://www.w3.org/TR/2014/REC-html5-20141028/">W3C HTML5仕様の原文</a>と、日本語訳を見て、比較してみてもよいでしょう。</p> <ul> <li>訳出がおかしい/訳出が抜けて原文のまま <ul> <li>Developer viewの範囲で翻訳すべき箇所はすべて翻訳しているはず…なのですが、抜けている箇所があるかもしれません。</li> </ul></li> <li>日本語が壊れている、何が言いたいのかさっぱりわからない <ul> <li>お前英語分かってないだろ?というご指摘は歓迎します。</li> </ul></li> <li>もっといい訳語がある <ul> <li>他の仕様との兼ね合いもあるので、提案をすべて受け入れるとは限らないことに注意してください。たとえば、authorは制作者でなく著者と訳出しています。</li> </ul></li> <li>もちろん、代替翻訳案も歓迎です。</li> </ul> </div> <div class="section"> <h4>で、どうやって報告すればいいの?</h4> <p>さまざまな報告手段があります。お好みの方法でどうぞ。</p> <ul> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>での報告。<a href="https://twitter.com/momdo_">@momdo_</a>にメンションを飛ばしていただければよいです。</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/GitHub">GitHub</a>経由での報告(ただし中の人が<a class="keyword" href="http://d.hatena.ne.jp/keyword/GitHub">GitHub</a>初心者なので使いこなせていないという…)ちなみに<a href="https://github.com/momdo/momdo.github.io">https://github.com/momdo/momdo.github.io</a>をForkなりすればいいでしょう、たぶん。 <ul> <li>Issueを立てる。</li> <li>pull requestを送る(翻訳メモリを使用する関係で一度に反映しきれない場合があるかもしれません。裏で手動更新しているのでorz)。</li> <li>Gistで指摘する(あんまり連絡手段が分かってないですけど)。</li> </ul></li> <li>メールで送りつける。アドレスはxmomdo@<a class="keyword" href="http://d.hatena.ne.jp/keyword/gmail.com">gmail.com</a>です。</li> <li>この<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A4%CF%A4%C6%A4%CA%A5%C0%A5%A4%A5%A2%A5%EA%A1%BC">はてなダイアリー</a>のコメント欄に書く。</li> </ul><p>指摘事項に気付いたはいいけど、すでに報告されているんじゃ?とか思わずにとりあえずはお気楽に。</p> </div> <div class="section"> <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>仕様以外でおかしなところを見つけたんですけど?</h4> <p>私の翻訳した<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a>仕様の翻訳物(<a href="http://momdo.github.io">http://momdo.github.io</a>で始まるか、<a href="http://momdo.s35.xrea.com">http://momdo.s35.xrea.com</a>で始まるURL)であればどの文書でも歓迎します。</p> </div><div class="footnote"> <p class="footnote"><a href="#fn-a64c183c" name="f-a64c183c" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">何も出ませんが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>アカウントをお持ちの方はそのアカウント名を、その他の手段で報告していただいた方にはハンドルを記載させていただきます。</span></p> </div> momdo WAI-ARIA 1.0 訳出開始しました hatenablog://entry/17680117127079411023 2014-10-21T00:00:00+09:00 2019-04-26T23:40:26+09:00 再開、とも言う。 Accessible Rich Internet Applications (WAI-ARIA) 1.0 日本語訳 http://momdo.github.io/wai-aria/ 某拝了訳を葬り去るべくついに立ち上がった俺たちは(おおげさ)。 今年中はさすがに無理だと思うけど、来年のどこかにはケリをつけたいですね…。 翻訳に関するコメントは(WAI-ARIAに限らず)随時受け付けております。 Twitter、メール、はてダへのコメント等やりやすい方法でどうぞ。 <p>再開、とも言う。</p> <dl> <dt>Accessible Rich Internet Applications (WAI-<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a>) 1.0 日本語訳</dt> <dd><a href="http://momdo.github.io/wai-aria/">http://momdo.github.io/wai-aria/</a></dd> </dl><p>某拝了訳を葬り去るべくついに立ち上がった俺たちは(おおげさ)。<br /> 今年中はさすがに無理だと思うけど、来年のどこかにはケリをつけたいですね…。<br /> 翻訳に関するコメントは(WAI-<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a>に限らず)随時受け付けております。<br /> <a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>、メール、はてダへのコメント等やりやすい方法でどうぞ。</p> momdo ARIA Techniques for WCAG 2.0の訳出をとりあえずした/今後のW3C翻訳仕様の方針とか hatenablog://entry/17680117127079411124 2014-09-20T00:00:00+09:00 2019-04-26T23:40:27+09:00 前から断続的に訳出をしていたARIA Techniques | Techniques for WCAG 2.0 日本語訳が一応訳出を完了。リンクとかおかしなところがあるかもしれない。 window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twi… <p>前から断続的に訳出をしていた<a href="http://momdo.github.io/WCAG20-TECHS_aria.html">ARIA Techniques | Techniques for WCAG 2.0 日本語訳</a>が一応訳出を完了。リンクとかおかしなところがあるかもしれない。</p> <blockquote> <p><script> window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); t._e = []; t.ready = function(f) { t._e.push(f); }; return t; }(document, "script", "twitter-wjs"));</script><script> twttr.ready(function (twttr) { var el = document.getElementsByClassName('twitter-syntax-tweet-id-512774038263836674'); for (var i=0;i<el.length;i++) { if (!!el[i].getAttribute('data-is-tweet-loaded')){ continue; } el[i].setAttribute('data-is-tweet-loaded', '1'); twttr.widgets.createTweet('512774038263836674',el[i],{}); } });</script><div class="twitter-syntax-tweet-id-512774038263836674"></div></p> </blockquote> <p>ということで、どうやらWAICは実装方法集の更新を進めるみたいなんだけど(むしろこのアナウンスがあったから慌てて訳出を済ませた、と言う話もあり)、私の訳をどうすれば取り込んでもらえるんですかねこれ。やっぱりWAIC公式にメールを投げた方がいいのでしょうか。</p> <div class="section"> <h4>今後の<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a>仕様翻訳の方針</h4> <p>基本的に<a class="keyword" href="http://d.hatena.ne.jp/keyword/Github">Github</a>(<a href="https://github.com/momdo">https://github.com/momdo</a>)にアップロードしていく方向で。<a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>でも呟くけど、日々何をやっているか(何をpushしているか)だけを知りたいという人は<a class="keyword" href="http://d.hatena.ne.jp/keyword/RSS">RSS</a>でも購読すればいいと思う。なお、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Ruby">Ruby</a> Extensionは<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>仕様に残留したので削除してリダイレクトをさせた。</p> <dl> <dt><a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>日本語訳</dt> <dd><a href="http://momdo.github.io/html5/Overview.html">http://momdo.github.io/html5/Overview.html</a></dd> </dl><p>勧告になったら(当たり前だけど)訳出を終了して放置。引き続き<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>.1訳を追随していく。<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>.2については…どうしましょうかね。</p> <dl> <dt>CSS2.1 ED</dt> <dd><a href="http://momdo.github.io/css2/cover.html">http://momdo.github.io/css2/cover.html</a></dd> </dl><p>今にしてCSS2.1の訳文を見直すと目も当てられないような状況なので、このエントリーを書いた時点で10章の途中まで改訳した。付録パートを除く18章まで改訳したら一旦寝かせる方針(本当にCSS2.2が発行されるのか、とかここのところミーティングで話題に上っていないようなので)。</p> <dl> <dt><a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a> Differences from HTML4(HTML4からの<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>の差分)</dt> <dd><a href="http://momdo.github.io/html5-diff/">http://momdo.github.io/html5-diff/</a></dd> </dl><p>相変わらず<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>パートが訳せてないけど、Editorも変わって(なぜかSimon Pietersが担当してる)、<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>.1を含めないように変更されたので、とっととNoteになるでしょう、と。優先度は低いんだけど、他のサイトに古い訳が転がったままでもあるので。</p> <dl> <dt><a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>:有用な代替テキストを提供するためのテクニック</dt> <dd><a href="http://momdo.s35.xrea.com/web-html-test/spec/WD-html-alt-techniques-20121025.html">http://momdo.s35.xrea.com/web-html-test/spec/WD-html-alt-techniques-20121025.html</a></dd> </dl><p><a href="http://rawgit.com/w3c/alt-techniques/master/index.html">http://rawgit.com/w3c/alt-techniques/master/index.html</a> を見た感じだと、もうすぐようやくNoteになるみたいなので、Noteとして発行されたら追随して放置。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E6%A1%BC%A5%B9%A5%B1%A1%BC%A5%B9">ユースケース</a>は<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>仕様本体に取り込まれたけど、それ以外の部分は役に立ちそうな記述もあるので。</p><p>ほか、</p> <ul> <li>ポリグロット・<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A1%BC%A5%AF%A5%A2%A5%C3%A5%D7">マークアップ</a></li> <li>CSS3 <a class="keyword" href="http://d.hatena.ne.jp/keyword/Value">Value</a></li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a> Image Values and Replaced Content Module Level 3</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a> Text Decoration Module Level 3</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a> Basic <a class="keyword" href="http://d.hatena.ne.jp/keyword/User%20Interface">User Interface</a> Module Level 3</li> </ul><p>は動きがあれば追随する方向で。<br /> <br /> </p> <dl> <dt>Accessible Rich Internet Applications (WAI-<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a>) 1.0 日本語(部分)訳</dt> <dd><a href="http://momdo.s35.xrea.com/web-html-test/spec/REC-wai-aria-20140320_complete.html">http://momdo.s35.xrea.com/web-html-test/spec/REC-wai-aria-20140320_complete.html</a></dd> </dl><p>訳すつもりで放置していたWAI-<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a>を再始動。</p> <dl> <dt><a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a> Image Description Extension (longdesc)</dt> <dd><a href="http://www.w3.org/TR/html-longdesc/">http://www.w3.org/TR/html-longdesc/</a></dd> </dl><p>訳そうとして手が出てない代物…</p><br /> <p>優先順位としては、基本的にここまで書いてきた順番だけど、</p> <ol> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a> REC(RECに追随して終了。)</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>.1 heartbeat(次の草案が更新されるときに更新。)</li> <li>CSS2.1 ED(18章まで改訳して寝かせる。動きがあれば追随。)</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/html5">html5</a>-diff(Noteになると見越して追随、Noteになれば終了。)</li> <li>alt-techniques(Noteに追随して終了。)</li> <li>その他これまで訳出した翻訳物(動きがあれば随時更新。)</li> <li>WAI-<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a> 1.0(CSS2.1に区切りがついたら再始動。)</li> <li>longdesc(訳出準備だけする)</li> </ol><p>というような感じで。うん、いろいろ溜まりすぎてますね(涙)。何か面白い仕様とかあれば手をつけ…たい…。</p> </div> momdo ウェブの仕様は今どこにあるのか?を分かる範囲で追補 hatenablog://entry/17680117127079411254 2014-09-05T00:00:00+09:00 2019-04-26T23:40:28+09:00 ネタ元: ウェブの仕様は今どこにあるのか? | Web Scratch http://efcl.info/2014/09/02/webspec-here/ これに刺激されてちょっと書いてみた。ネタ元ではGitHubを利用した最近の仕様策定を枕にしているけれども、古典的なものの見方で、W3C HTML5仕様を軸にW3C仕様の現状を分かる範囲でごく簡単に。漏れや指摘があればコメント欄か@momdo_までよろしくどうぞ。この文書のライセンス:© 2014 血統の森. CC BY 4.0. HTML5と5.1の進捗について HTML5 http://www.w3.org/TR/html5/ HTML … <p>ネタ元:</p> <dl> <dt>ウェブの仕様は今どこにあるのか? | Web Scratch</dt> <dd><a href="http://efcl.info/2014/09/02/webspec-here/">http://efcl.info/2014/09/02/webspec-here/</a></dd> </dl><p>これに刺激されてちょっと書いてみた。ネタ元では<a class="keyword" href="http://d.hatena.ne.jp/keyword/GitHub">GitHub</a>を利用した最近の仕様策定を枕にしているけれども、古典的なものの見方で、<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>仕様を軸に<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a>仕様の現状を分かる範囲でごく簡単に。漏れや指摘があればコメント欄か<a href="https://twitter.com/momdo_">@momdo_</a>までよろしくどうぞ。</p><p>この文書のライセンス:&copy; 2014 血統の森. <a href="http://creativecommons.org/licenses/by/4.0/deed.ja">CC BY 4.0</a>.</p> <div class="section"> <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>と5.1の進捗について</h4> <dl> <dt><a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a></dt> <dd><a href="http://www.w3.org/TR/html5/">http://www.w3.org/TR/html5/</a></dd> <dt>HTML 5.1</dt> <dd><a href="http://www.w3.org/TR/html51/">http://www.w3.org/TR/html51/</a></dd> <dt>HTML 5.1 Nightly</dt> <dd><a href="http://www.w3.org/html/wg/drafts/html/master/">http://www.w3.org/html/wg/drafts/html/master/</a></dd> <dt>HTML/Publications - <a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/Wiki">Wiki</a></dt> <dd> <a href="http://www.w3.org/wiki/HTML/Publications">http://www.w3.org/wiki/HTML/Publications</a></dd> </dl><p>もうこれまでのあらすじ的なものを書くのも面倒なのでここでは省くけれども、<a href="http://dev.w3.org/html5/decision-policy/html5-2014-plan.html">Plan 2014</a>からの遅れ/進みだけ把握しておくと、HTML 5.0に関しては、9月16日付けで<abbr title="Proposed Recommendation">PR</abbr>に進む予定<a href="#f-b7c9b4c6" name="fn-b7c9b4c6" title="CfC:Request transition of HTML5 to Proposed Recommendation : http://lists.w3.org/Archives/Public/public-html-admin/2014Sep/0000.html">*1</a>で、Plan 2014よりほんのちょっとだけ早い。最速で10月14日に<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a> <abbr title="Recommendation">REC</abbr>、どんなに遅くても今年中に勧告になる見込みで、Plan 2014の計画通りになる。<br /> HTML 5.1に関してはだいぶ事情が変わって、Plan 2014の予定だと2016年の第4四半期に勧告予定となっているけれども、上記<a class="keyword" href="http://d.hatena.ne.jp/keyword/Wiki">Wiki</a>の記載によれば、2015年の第4四半期に勧告予定となっている(どうやら<a class="keyword" href="http://d.hatena.ne.jp/keyword/typo">typo</a>というわけでもなさそう)。10月末の<a href="http://www.w3.org/2014/11/TPAC/">TPAC 2014</a>に合わせてface-to-faceのミーティングが行われるので、ここで今後の話とかが出てくるかもしれない(いつHTML 5.2のブランチを切るんだ、とか)。</p> </div> <div class="section"> <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>の関連仕様で、HTML <abbr title="Living Standard">LS</abbr>の一部であって、<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a>で分割されたもの</h4> <p><a href="http://www.w3.org/html/wg/">HTML Working Group</a>が中心で策定しているものと、<a href="http://www.w3.org/2008/webapps/">WebApps Working Group</a>が中心で策定<em>された</em>ものがある。もっとも<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>に疎いのでWebApps方面は識者のコメントを求む。</p> <ul> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Canvas">Canvas</a>は、<a href="http://www.w3.org/TR/2014/CR-2dcontext-20140821/">HTML Canvas 2D Context W3C Candidate Recommendation 21 August 2014</a>と<a href="http://www.w3.org/html/wg/drafts/2dcontext/master/">HTML Canvas 2D Context, Level 2 Nightly</a>という感じでいつの間にかブランチが切られてて、CRに到達してた。</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Microdata">Microdata</a>は、<a href="http://www.w3.org/TR/microdata/">HTML Microdata W3C Working Group Note 29 October 2013</a>でノート扱いとなり、<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a>側では開発が終了している。REC Trackに乗せたかったけど無理でした、みたいな流れだったと記憶。</li> <li>Web Socket、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Web%20Workers">Web Workers</a>、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Web%20Storage">Web Storage</a>はそれぞれ以下のような感じ。<a href="http://lists.w3.org/Archives/Public/public-webapps/">public-webapps</a>をウォッチしていないので私には詳しいことは分からない、と言うのが実情。<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a> SpecはいずれもRECには到達しているけれども、devではHTML LSに追随している(?)のか更新がかかっているみたい。 <ul> <li><a href="http://www.w3.org/TR/websockets/">The WebSocket API W3C Candidate Recommendation 20 September 2012</a> / <a href="http://tools.ietf.org/html/rfc6455">RFC 6455 - The WebSocket Protocol</a></li> <li><a href="http://www.w3.org/TR/workers/">Web Workers W3C Candidate Recommendation 01 May 2012</a></li> <li><a href="http://www.w3.org/TR/webstorage/">Web Storage W3C Recommendation 30 July 2013</a></li> </ul></li> </ul> </div> <div class="section"> <h4>MathML</h4> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a>で動く主だった<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D6%A5%E9%A5%A6%A5%B6%A1%BC">ブラウザー</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%CD%A5%A4%A5%C6%A5%A3%A5%F4">ネイティヴ</a>サポート状況は<a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a>だけ、と言うのは周知の通り。</p> <ul> <li><a href="http://status.modern.ie/mathml?term=MathML">status.modern.IE MathML</a></li> <li><a href="http://www.chromestatus.com/feature/5240822173794304">MathML - Chromium Dashboard</a></li> <li><a href="https://wiki.mozilla.org/MathML">MathML:Home Page - MozillaWiki</a></li> </ul><p>仕様は</p> <dl> <dt>Mathematical Markup Language (MathML) Version 3.0 2nd Edition</dt> <dd><a href="http://www.w3.org/TR/MathML3/">http://www.w3.org/TR/MathML3/</a></dd> <dt>Mathematical Markup Language (MathML) Version 3.0 3rd Edition</dt> <dd><a href="http://www.w3.org/Math/draft-spec/">http://www.w3.org/Math/draft-spec/</a></dd> </dl><p>と、3rd Ed.の策定が始まっているらしい。<a href="http://lists.w3.org/Archives/Public/www-math/">www-math</a>とか覗いても、何がどうなっているのかあまりよく分からない。</p> </div> <div class="section"> <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/SVG">SVG</a></h4> <p>だいたいにおいて、<a href="http://www.w3.org/Graphics/SVG/2012/charter">Charter</a>がアテにならないというのは<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a>のWorking Groupの常ではあるんだけど(むしろHTML WGが例外的)、<a href="http://www.w3.org/Graphics/SVG/WG/wiki/Roadmap">Roadmap - SVG</a>はこうだったらいいかな?という感じで、実際にはまったくそんな状況にはなっていない…と(かれこれ2年ぐらい放置されてる)。</p><p>仕様自体は<a href="http://www.w3.org/TR/SVG/">Scalable Vector Graphics (SVG) 1.1 (Second Edition)</a>がStableで、<a href="https://svgwg.org/svg2-draft/">Scalable Vector Graphics (SVG) 2</a>がdevelop。</p><p><a href="http://www.w3.org/Graphics/SVG/WG/wiki/Svgwg.org">Svgwg.org - SVG</a>を見る限りでは、hgメインでバージョン管理をしているっぽい。<a href="https://github.com/w3c/svgwg/">w3c/svgwg</a>はミラーか。</p> </div> <div class="section"> <h4>FXTX</h4> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/SVG">SVG</a>と<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>の合同タスクフォース。<a href="http://www.w3.org/Graphics/fx/wiki/Main_Page">Effects Task Force(Wiki)</a>がよっぽど動いているのはなぜなのか…。ちなみに仕様は<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a> WGからたどれる。</p> </div> <div class="section"> <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a></h4> <p>これを書いている間に気力がなくなってしまったので、<a href="http://momdo.s35.xrea.com/web-html-test/CSS3-ja/">CSS3の日本語訳集</a>参照で。</p> <ul> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a> 2.2という話もあるけど、今のところ進んでいる気配は無い(<a href="http://wiki.csswg.org/spec/css2.2">CSS 2 Revision 2</a>)。</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a> Snapshot 2014(?)とかいう話があった気もするけど(ソース失念)、今のところは気配がない。</li> <li>どうでもいいネタとして、<a href="http://www.w3.org/TR/CSS/">http://www.w3.org/TR/CSS/</a>は<a class="keyword" href="http://d.hatena.ne.jp/keyword/Cascading%20Style%20Sheets">Cascading Style Sheets</a> (<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>) Snapshot 2010(NOTE)を向いている。</li> </ul> </div> <div class="section"> <h4>WAI-<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a></h4> <dl> <dt>Accessible Rich Internet Applications (WAI-<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a>) 1.1</dt> <dd><a href="http://rawgit.com/w3c/aria/master/spec/aria.html">http://rawgit.com/w3c/aria/master/spec/aria.html</a></dd> </dl><p><a class="keyword" href="http://d.hatena.ne.jp/keyword/GitHub">GitHub</a>を使ってるっぽくはある。</p> </div> <div class="section"> <h4>DOM4</h4> <dl> <dt><a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a> DOM4</dt> <dd><a href="http://www.w3.org/TR/dom/">http://www.w3.org/TR/dom/</a></dd> <dt>DOM Standard</dt> <dd><a href="http://dom.spec.whatwg.org/">http://dom.spec.whatwg.org/</a></dd> </dl><p>UpstreamのLSの方がいいのか、<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a>の方がいいのかってのがいまいち分かりませんが<ins datetime="2014-09-05T22:00:22+09:00">(LSを見ておけばいい、と言う意見もあり<a href="#f-9c8af9cc" name="fn-9c8af9cc" title="https://twitter.com/saneyuki_s/status/507875108988260352">*2</a>)</ins>、<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a> DOM4は次のステップとしてPRを伺っているようなので、CRがスキップされるかもしれない。</p><br /> <p>とまあ非常にざっくりとですが、何かの足しになれば。</p> </div><div class="footnote"> <p class="footnote"><a href="#fn-b7c9b4c6" name="f-b7c9b4c6" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">CfC:Request transition of <a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a> to Proposed Recommendation : <a href="http://lists.w3.org/Archives/Public/public-html-admin/2014Sep/0000.html">http://lists.w3.org/Archives/Public/public-html-admin/2014Sep/0000.html</a></span></p> <p class="footnote"><a href="#fn-9c8af9cc" name="f-9c8af9cc" class="footnote-number">*2</a><span class="footnote-delimiter">:</span><span class="footnote-text"><a href="https://twitter.com/saneyuki_s/status/507875108988260352">https://twitter.com/saneyuki_s/status/507875108988260352</a></span></p> </div> momdo Techniques for WCAG 2.0にコメントを送る会にTwitterで参戦した hatenablog://entry/17680117127079411542 2014-08-09T00:00:00+09:00 2019-04-26T23:40:30+09:00 Techniques for WCAG 2.0にコメントを送る会 : ATNDで2人しかいないのかーみたいな呟きをしてたら window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.pare… <p><a href="https://atnd.org/events/54638">Techniques for WCAG 2.0にコメントを送る会 : ATND</a>で2人しかいないのかーみたいな呟きをしてたら</p> <blockquote> <p><script> window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); t._e = []; t.ready = function(f) { t._e.push(f); }; return t; }(document, "script", "twitter-wjs"));</script><script> twttr.ready(function (twttr) { var el = document.getElementsByClassName('twitter-syntax-tweet-id-497963665048354817'); for (var i=0;i<el.length;i++) { if (!!el[i].getAttribute('data-is-tweet-loaded')){ continue; } el[i].setAttribute('data-is-tweet-loaded', '1'); twttr.widgets.createTweet('497963665048354817',el[i],{}); } });</script><div class="twitter-syntax-tweet-id-497963665048354817"></div></p> </blockquote> <p>とリプをいただいたので、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>であることないこと呟きました。</p><p>どんなことを言ってたのかはその全部についてはまとめるのがめんどっちいので、<a href="http://twilog.org/momdo_/date-140809">もんど(@momdo_)/2014年08月09日 - Twilog</a>に任せますが、時間を切って<a href="http://www.w3.org/WAI/GL/WCAG20-TECHS/Overview.html">Techniques for WCAG 2.0(Public Editors' Draft 24 July 2014)</a>に目を通した感想は、<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>仕様との乖離が目立つかなあ、と。もちろん、<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>仕様はまだRecommendationに至っていないのは衆知の通りですが、今年中にRecommendationになる、と言うことになっているのもまた事実な訳で、HTML4ではありだったものの<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>ではなしになるものをもう削除してもいいんじゃないかなとか。たとえば以下のような箇所。</p> <blockquote> <p><script> window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); t._e = []; t.ready = function(f) { t._e.push(f); }; return t; }(document, "script", "twitter-wjs"));</script><script> twttr.ready(function (twttr) { var el = document.getElementsByClassName('twitter-syntax-tweet-id-497981918499975168'); for (var i=0;i<el.length;i++) { if (!!el[i].getAttribute('data-is-tweet-loaded')){ continue; } el[i].setAttribute('data-is-tweet-loaded', '1'); twttr.widgets.createTweet('497981918499975168',el[i],{}); } });</script><div class="twitter-syntax-tweet-id-497981918499975168"></div><script> window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); t._e = []; t.ready = function(f) { t._e.push(f); }; return t; }(document, "script", "twitter-wjs"));</script><script> twttr.ready(function (twttr) { var el = document.getElementsByClassName('twitter-syntax-tweet-id-497986748442361856'); for (var i=0;i<el.length;i++) { if (!!el[i].getAttribute('data-is-tweet-loaded')){ continue; } el[i].setAttribute('data-is-tweet-loaded', '1'); twttr.widgets.createTweet('497986748442361856',el[i],{}); } });</script><div class="twitter-syntax-tweet-id-497986748442361856"></div><script> window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); t._e = []; t.ready = function(f) { t._e.push(f); }; return t; }(document, "script", "twitter-wjs"));</script><script> twttr.ready(function (twttr) { var el = document.getElementsByClassName('twitter-syntax-tweet-id-497966658921590784'); for (var i=0;i<el.length;i++) { if (!!el[i].getAttribute('data-is-tweet-loaded')){ continue; } el[i].setAttribute('data-is-tweet-loaded', '1'); twttr.widgets.createTweet('497966658921590784',el[i],{}); } });</script><div class="twitter-syntax-tweet-id-497966658921590784"></div></p> </blockquote> <p>あと、主にWAIが<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>仕様に盛り込んだはずの成果がなぜかTechniques for WCAG 2.0に大なり小なり反映されていないっぽいもの。</p> <blockquote> <p><script> window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); t._e = []; t.ready = function(f) { t._e.push(f); }; return t; }(document, "script", "twitter-wjs"));</script><script> twttr.ready(function (twttr) { var el = document.getElementsByClassName('twitter-syntax-tweet-id-497978916246523906'); for (var i=0;i<el.length;i++) { if (!!el[i].getAttribute('data-is-tweet-loaded')){ continue; } el[i].setAttribute('data-is-tweet-loaded', '1'); twttr.widgets.createTweet('497978916246523906',el[i],{}); } });</script><div class="twitter-syntax-tweet-id-497978916246523906"></div><script> window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); t._e = []; t.ready = function(f) { t._e.push(f); }; return t; }(document, "script", "twitter-wjs"));</script><script> twttr.ready(function (twttr) { var el = document.getElementsByClassName('twitter-syntax-tweet-id-497980320084291584'); for (var i=0;i<el.length;i++) { if (!!el[i].getAttribute('data-is-tweet-loaded')){ continue; } el[i].setAttribute('data-is-tweet-loaded', '1'); twttr.widgets.createTweet('497980320084291584',el[i],{}); } });</script><div class="twitter-syntax-tweet-id-497980320084291584"></div><script> window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); t._e = []; t.ready = function(f) { t._e.push(f); }; return t; }(document, "script", "twitter-wjs"));</script><script> twttr.ready(function (twttr) { var el = document.getElementsByClassName('twitter-syntax-tweet-id-497982355131203584'); for (var i=0;i<el.length;i++) { if (!!el[i].getAttribute('data-is-tweet-loaded')){ continue; } el[i].setAttribute('data-is-tweet-loaded', '1'); twttr.widgets.createTweet('497982355131203584',el[i],{}); } });</script><div class="twitter-syntax-tweet-id-497982355131203584"></div><script> window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); t._e = []; t.ready = function(f) { t._e.push(f); }; return t; }(document, "script", "twitter-wjs"));</script><script> twttr.ready(function (twttr) { var el = document.getElementsByClassName('twitter-syntax-tweet-id-497985171820273664'); for (var i=0;i<el.length;i++) { if (!!el[i].getAttribute('data-is-tweet-loaded')){ continue; } el[i].setAttribute('data-is-tweet-loaded', '1'); twttr.widgets.createTweet('497985171820273664',el[i],{}); } });</script><div class="twitter-syntax-tweet-id-497985171820273664"></div><script> window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); t._e = []; t.ready = function(f) { t._e.push(f); }; return t; }(document, "script", "twitter-wjs"));</script><script> twttr.ready(function (twttr) { var el = document.getElementsByClassName('twitter-syntax-tweet-id-497985430181015554'); for (var i=0;i<el.length;i++) { if (!!el[i].getAttribute('data-is-tweet-loaded')){ continue; } el[i].setAttribute('data-is-tweet-loaded', '1'); twttr.widgets.createTweet('497985430181015554',el[i],{}); } });</script><div class="twitter-syntax-tweet-id-497985430181015554"></div><script> window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); t._e = []; t.ready = function(f) { t._e.push(f); }; return t; }(document, "script", "twitter-wjs"));</script><script> twttr.ready(function (twttr) { var el = document.getElementsByClassName('twitter-syntax-tweet-id-497990248500973568'); for (var i=0;i<el.length;i++) { if (!!el[i].getAttribute('data-is-tweet-loaded')){ continue; } el[i].setAttribute('data-is-tweet-loaded', '1'); twttr.widgets.createTweet('497990248500973568',el[i],{}); } });</script><div class="twitter-syntax-tweet-id-497990248500973568"></div><script> window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); t._e = []; t.ready = function(f) { t._e.push(f); }; return t; }(document, "script", "twitter-wjs"));</script><script> twttr.ready(function (twttr) { var el = document.getElementsByClassName('twitter-syntax-tweet-id-497993586869161984'); for (var i=0;i<el.length;i++) { if (!!el[i].getAttribute('data-is-tweet-loaded')){ continue; } el[i].setAttribute('data-is-tweet-loaded', '1'); twttr.widgets.createTweet('497993586869161984',el[i],{}); } });</script><div class="twitter-syntax-tweet-id-497993586869161984"></div><script> window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); t._e = []; t.ready = function(f) { t._e.push(f); }; return t; }(document, "script", "twitter-wjs"));</script><script> twttr.ready(function (twttr) { var el = document.getElementsByClassName('twitter-syntax-tweet-id-497994108229521408'); for (var i=0;i<el.length;i++) { if (!!el[i].getAttribute('data-is-tweet-loaded')){ continue; } el[i].setAttribute('data-is-tweet-loaded', '1'); twttr.widgets.createTweet('497994108229521408',el[i],{}); } });</script><div class="twitter-syntax-tweet-id-497994108229521408"></div></p> </blockquote> <p>Techniques for WCAG 2.0にWAIの成果物のステータスを反映し忘れたり。</p> <blockquote> <p><script> window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); t._e = []; t.ready = function(f) { t._e.push(f); }; return t; }(document, "script", "twitter-wjs"));</script><script> twttr.ready(function (twttr) { var el = document.getElementsByClassName('twitter-syntax-tweet-id-497973459389923328'); for (var i=0;i<el.length;i++) { if (!!el[i].getAttribute('data-is-tweet-loaded')){ continue; } el[i].setAttribute('data-is-tweet-loaded', '1'); twttr.widgets.createTweet('497973459389923328',el[i],{}); } });</script><div class="twitter-syntax-tweet-id-497973459389923328"></div><script> window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); t._e = []; t.ready = function(f) { t._e.push(f); }; return t; }(document, "script", "twitter-wjs"));</script><script> twttr.ready(function (twttr) { var el = document.getElementsByClassName('twitter-syntax-tweet-id-497986027328266240'); for (var i=0;i<el.length;i++) { if (!!el[i].getAttribute('data-is-tweet-loaded')){ continue; } el[i].setAttribute('data-is-tweet-loaded', '1'); twttr.widgets.createTweet('497986027328266240',el[i],{}); } });</script><div class="twitter-syntax-tweet-id-497986027328266240"></div></p> </blockquote> <p>とまあ、素人が見ても結構怪しい箇所があるよなーって。上っ面だけしか見てないと言えばそれまでだけど。</p><br /> <p>個人的には、WCAG2.0を意識しなくても、ああこういう風にHTMLを書けばいいのか、という<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A1%BC%A5%AF%A5%A2%A5%C3%A5%D7">マークアップ</a>ガイドみたいな側面がTechniques for WCAG 2.0にはあると思うので、内容が陳腐化していると言うのはもったいないように思うし、こうも穴があると他人に勧めにくくなるという側面もあり。</p><br /> <p>そんなこんなでTechniques for WCAG 2.0に関して呟いてみました。最後にこういう機会を設けてくださった<a href="https://twitter.com/Takenspc">@Takenspc</a>さんと、声を掛けてくださった<a href="https://twitter.com/kazuhito">@kazuhito</a>さんに感謝します。どこまで役に立ったのかは激しく謎ですが、ありがとうございました。</p><br /> <p>追記(<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A4%A2%A4%EF%A4%BB%A4%C6%C6%C9%A4%DF%A4%BF%A4%A4">あわせて読みたい</a>):</p> <ul> <li><a href="http://kidachi.kazuhi.to/blog/archives/038312.html">Techniques for WCAG 2.0にコメントを送る会 | 覚え書き | @kazuhito</a></li> <li><a href="http://takenspc.hatenablog.com/entry/2014/08/10/175949">Techniques for WCAG 2.0にコメントを送る会 - Unreviewed</a></li> </ul> momdo Githubはじめました hatenablog://entry/17680117127079411805 2014-08-07T00:00:00+09:00 2019-04-26T23:40:33+09:00 https://github.com/momdo諸処、まるでわからんちんですね…。あまりにコマンドラインで何もできないので、ブラウザでごにょごにょやっております\(^o^)/ もちろん、プログラミングコードなんて書けませんから、Github Pages主体です。https://momdo.github.io/容量の上限が事実上ないと言うことなので、HTML5仕様を置き放題という話もありますが、XREAとどう使い分けるか?っていうのはまだイメージが固まってないところではあり。まぁ、ぼちぼちやっていこうかなと。 <p><a href="https://github.com/momdo">https://github.com/momdo</a></p><p>諸処、まるでわからんちんですね…。あまりに<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%DE%A5%F3%A5%C9%A5%E9%A5%A4%A5%F3">コマンドライン</a>で何もできないので、ブラウザでごにょごにょやっております\(^o^)/<br /> もちろん、プログラミングコードなんて書けませんから、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Github">Github</a> Pages主体です。</p><p><a href="https://momdo.github.io/">https://momdo.github.io/</a></p><p>容量の上限が事実上ないと言うことなので、<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>仕様を置き放題という話もありますが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/XREA">XREA</a>とどう使い分けるか?っていうのはまだイメージが固まってないところではあり。まぁ、ぼちぼちやっていこうかなと。</p> momdo Firefox 29の見た目を28以前に戻すアドオン「Classic Theme Restorer」を日本語化した hatenablog://entry/17680117127079411918 2014-05-12T00:00:00+09:00 2019-04-26T23:40:34+09:00 してました(先の連休中に)。上が日本語化したアドオン、下がClassic Theme Restorerを使って以前のUIに似せた感じです(上の設定と下のイメージは同一とは限らない…)。注意すべき点として、公式にある扉ページClassic Theme Restorer (Customize Australis) :: Add-ons for Firefoxのバージョンは執筆時点で1.1.8なのですが、このバージョンは日本語化されません。Classic Theme Restorer (Customize Australis) のバージョン履歴から、v1.1.9を入手してください。これより新しいバー… <p>してました(先の連休中に)。上が日本語化したアドオン、下がClassic Theme Restorerを使って以前のUIに似せた感じです(上の設定と下のイメージは同一とは限らない…)。</p><p><span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/momdo/20140501221956" class="hatena-fotolife" itemprop="url"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/momdo/20140501/20140501221956.png" alt="f:id:momdo:20140501221956p:image" title="f:id:momdo:20140501221956p:image" class="hatena-fotolife" itemprop="image"></a></span></p><p><span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/momdo/20140512223748" class="hatena-fotolife" itemprop="url"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/momdo/20140512/20140512223748.png" alt="f:id:momdo:20140512223748p:image" title="f:id:momdo:20140512223748p:image" class="hatena-fotolife" itemprop="image"></a></span></p><p>注意すべき点として、公式にある扉ページ<a href="https://addons.mozilla.org/ja/firefox/addon/classicthemerestorer/">Classic Theme Restorer (Customize Australis) :: Add-ons for Firefox</a>のバージョンは執筆時点で1.1.8なのですが、このバージョンは日本語化されません。<a href="https://addons.mozilla.org/ja/firefox/addon/classicthemerestorer/versions/">Classic Theme Restorer (Customize Australis) のバージョン履歴</a>から、v1.1.9を入手してください。これより新しいバージョンについては、<a href="https://twitter.com/Makoto1987/">@Makoto1987</a>さんが<a href="https://twitter.com/Makoto1987/status/465356403092107265">v1.2.0beta6に追随したものをアップロードしてくれています</a>。何かと私からの無茶ぶりに応えてくださってくれている<a href="https://twitter.com/Makoto1987/">@Makoto1987</a>さんにこの場を借りてお礼申し上げます。</p><p>なお、上記バージョン履歴を見てもらえばわかるとおり、このアドオンはものすごい勢い(beta9とbeta10が同日公開ってどういうことってレベル)で開発されていますが、アドオン開発者とはメールベースでのやりとりになっているので、リアルタイムでの追随を諦めています。</p><p>なお、日本語訳が壊れているんじゃ?という話もありますが(実際訳していてそう思ってたりしますが)、元の英語<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A4%AB%A4%E9%A4%B7">からし</a>て結構ラフなので<em>仕様</em>です。それでも日本語がおかしい、こうしたらいいんじゃというご意見がありましたら、<a href="https://twitter.com/momdo_/">@momdo_</a>までどうぞ。</p> momdo Techniques for WCAG 2.0のARIAパート部分訳 hatenablog://entry/17680117127079412040 2014-04-14T00:00:00+09:00 2019-04-26T23:40:35+09:00 ARIA Techniques | Techniques for WCAG 2.0 日本語部分訳 http://momdo.s35.xrea.com/web-html-test/spec/NOTE-WCAG20-TECHS-20140311_aria.htm 本当はこのページを完訳するつもりだったんですが、時間がないので部分訳で。 校正も何もしてないのでかなりひどい状況だし、リンクはbase要素をむりやりねじ込んで相対リンクをごまかしているという。まあなんだ、いろいろごめんなさいorz <dl> <dt><a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a> Techniques | Techniques for WCAG 2.0 日本語部分訳</dt> <dd><a href="http://momdo.s35.xrea.com/web-html-test/spec/NOTE-WCAG20-TECHS-20140311_aria.htm">http://momdo.s35.xrea.com/web-html-test/spec/NOTE-WCAG20-TECHS-20140311_aria.htm</a></dd> </dl><p>本当はこのページを完訳するつもりだったんですが、時間がないので部分訳で。<br /> 校正も何もしてないのでかなりひどい状況だし、リンクはbase要素をむりやりねじ込んで相対リンクをごまかしているという。</p><p>まあなんだ、いろいろごめんなさいorz</p> momdo Using WAI-ARIA in HTMLの日本語訳が公開された hatenablog://entry/17680117127079412115 2014-04-11T00:00:00+09:00 2019-04-26T23:40:36+09:00 Using WAI-ARIA in HTML の日本語訳を公開しました | IMAGEDRIVE とまあ、私が訳したわけではなく、EPUB 3 仕様書・関連文書の日本語訳を公開されている方の訳ということになります。 訳したものを自分で読んで理解できていない箇所が多数あります。ご利用は計画的にお願いします。 Using WAI-ARIA in HTML の日本語訳を公開しました | IMAGEDRIVE といった感じでフィードバックを微妙に受け付けてない感じなのが個人的にはもったいないなあと思うけど、これはまあ個々人の方針なので私があれこれ口出しする事案でもないでしょう。 加えてマークアップがい… <p><a href="http://blog.imagedrive.jp/web/2014-04-09/using-wai-aria-in-html-ja">Using WAI-ARIA in HTML の日本語訳を公開しました | IMAGEDRIVE</a><br /> とまあ、私が訳したわけではなく、<a href="http://imagedrive.github.io/spec/index.xhtml">EPUB 3 仕様書・関連文書</a>の日本語訳を公開されている方の訳ということになります。</p> <blockquote cite="http://blog.imagedrive.jp/web/2014-04-09/using-wai-aria-in-html-ja"> <p>訳したものを自分で読んで理解できていない箇所が多数あります。ご利用は計画的にお願いします。</p> <cite><a href="http://blog.imagedrive.jp/web/2014-04-09/using-wai-aria-in-html-ja">Using WAI-ARIA in HTML &#x306E;&#x65E5;&#x672C;&#x8A9E;&#x8A33;&#x3092;&#x516C;&#x958B;&#x3057;&#x307E;&#x3057;&#x305F; &#xFF5C; IMAGEDRIVE</a></cite> </blockquote> <p>といった感じでフィードバックを微妙に受け付けてない感じなのが個人的にはもったいないなあと思うけど、これはまあ個々人の方針なので私があれこれ口出しする事案でもないでしょう。</p> <blockquote cite="http://blog.imagedrive.jp/web/2014-04-09/using-wai-aria-in-html-ja"> <p>加えて<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A1%BC%A5%AF%A5%A2%A5%C3%A5%D7">マークアップ</a>がいささか雑で、明らかに値や属性なのにそうしたタグ付けをされていなかったりして、これは値なのか名詞なのか動詞なのか訳す手がかりになる箇所がけっこう欠けており、文脈から理解するにも知識が足りず、それもまた作業の遅れと翻訳精度に影響を及ぼすことになりました。</p> <cite><a href="http://blog.imagedrive.jp/web/2014-04-09/using-wai-aria-in-html-ja">Using WAI-ARIA in HTML &#x306E;&#x65E5;&#x672C;&#x8A9E;&#x8A33;&#x3092;&#x516C;&#x958B;&#x3057;&#x307E;&#x3057;&#x305F; &#xFF5C; IMAGEDRIVE</a></cite> </blockquote> <p>あとまあこのあたりはHTML WG方面非常にラフに書いている感は満載で、関連仕様、拡張仕様にはよくある話なのかなあと。<br /> で、この訳を読んではじめて知ったんですが、</p> <blockquote cite="http://imagedrive.github.io/spec/aria-in-html.xhtml"> <p>このドキュメントはワー<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AD%A5%F3%A5%B0%A5%C9%A5%E9">キングドラ</a>フトとして、HTML Working Group によって発行されました。このドキュメントは、<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a> 勧告になることを目的としています。</p> <cite><a href="http://imagedrive.github.io/spec/aria-in-html.xhtml">Using WAI-ARIA in HTML</a></cite> </blockquote> <p>マジか、Using WAI-<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a> in HTMLはREC Trackに乗るのかっていう。でそれを踏まえた私の今のところの関心事は、</p> <blockquote cite="http://www.w3.org/html/landscape/#differences-between-whatwg-html-ls-and-w3c-html-5.1"> <p>Different <a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a> role constraints in <a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a> HTML (validity)<br /> The HTML WG, in liasion with other <a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a> working groups, has decided this <a class="keyword" href="http://d.hatena.ne.jp/keyword/alternative">alternative</a> is better</p> <cite><a href="http://www.w3.org/html/landscape/#differences-between-whatwg-html-ls-and-w3c-html-5.1">The HTML Landscape</a></cite> </blockquote> <p>と言う風に、HTML LSと<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>.1で<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a> roleで言っていることが微妙に違うらしい、ということ。(個々に照らし合わせてみたわけではないので、具体的に何が違っているのかまでは見ていない。)<br /> 私の記憶が正しければ、<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>.1とUsing WAI-<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a> in HTMLでも微妙に言っていることが異なった記憶があるんですよね…しかも両仕様ともREC trackに乗っかっているとなると、一体どの仕様の言うことを信じればいいのか?という疑念がわくんじゃないかなあと。もちろん、中長期的にはユーザーエージェント側の実装の方も進み、収斂していくことになるんでしょうが、移行期というか過渡期というか、収束するまでが大変なのかなあとか思ったり思わなかったり。</p><p>最後に、</p> <blockquote cite="http://blog.imagedrive.jp/web/2014-04-09/using-wai-aria-in-html-ja"> <p>また翻訳のいくつかは日立の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E6%A5%CB%A5%D0%A1%BC%A5%B5%A5%EB%A5%C7%A5%B6%A5%A4%A5%F3">ユニバーサルデザイン</a>で公開されているAccessible Rich Internet Applications (WAI-<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a>) 1.0の日本語訳から頂戴しました。</p> <cite><a href="http://blog.imagedrive.jp/web/2014-04-09/using-wai-aria-in-html-ja">Using WAI-ARIA in HTML &#x306E;&#x65E5;&#x672C;&#x8A9E;&#x8A33;&#x3092;&#x516C;&#x958B;&#x3057;&#x307E;&#x3057;&#x305F; &#xFF5C; IMAGEDRIVE</a></cite> </blockquote> <p>とあるんだけど、日立訳はかなり古いので(まあコアな部分は変わってないと思うんだけど)、<a href="http://momdo.s35.xrea.com/web-html-test/spec/REC-wai-aria-20140320_complete.html">Accessible Rich Internet Applications (WAI-ARIA) 1.0 日本語(部分)訳</a>の欠損部分、誰か訳しませんか。</p> momdo OmegaT補助ツールとしてのOkapi Rainbow hatenablog://entry/17680117127079412245 2014-04-06T00:00:00+09:00 2019-04-26T23:40:37+09:00 OmegaTのHTMLパーサーってかなりアレだよね、っていつもの如くぼやいていたら@amadlonkayさまから window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNod… <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/OmegaT">OmegaT</a>のHTMLパーサーってかなりアレだよね、っていつもの如くぼやいていたら<a href="https://twitter.com/amadlonkay/">@amadlonkay</a>さまから</p> <blockquote> <p><script> window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); t._e = []; t.ready = function(f) { t._e.push(f); }; return t; }(document, "script", "twitter-wjs"));</script><script> twttr.ready(function (twttr) { var el = document.getElementsByClassName('twitter-syntax-tweet-id-452372606126415872'); for (var i=0;i<el.length;i++) { if (!!el[i].getAttribute('data-is-tweet-loaded')){ continue; } el[i].setAttribute('data-is-tweet-loaded', '1'); twttr.widgets.createTweet('452372606126415872',el[i],{}); } });</script><div class="twitter-syntax-tweet-id-452372606126415872"></div></p> </blockquote> <p>と、Okapi Rainbowを紹介されたので(そしてあまりにも日本語情報が少ないので)、ここに少し詳しい目に自分の頭の整理もかねてメモをしてみるテスト。この記事に誤りがある場合はコメントしてもらえれば幸い。</p> <div class="section"> <h4>Okapi FrameworkとOkapi Rainbow</h4> <p>Okapi Frameworkが何なのかというと、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Wikipedia">Wikipedia</a>の説明を借りてくれば、</p> <blockquote cite="http://ja.wikipedia.org/wiki/Okapi_Framework"> <p>Okapi Framework とは、ソフトウェアの国際化や文書の翻訳に関する各種の作業を統合的に支援するための<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D5%A5%EC%A1%BC%A5%E0%A5%EF%A1%BC%A5%AF">フレームワーク</a>であり、データ交換のための規格、ファイル形式の定義、アプリケーション・ソフトウェア実装などからなる。<a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a> プラットフォームをサポートしている。</p> <cite><a href="http://ja.wikipedia.org/wiki/Okapi_Framework">Okapi Framework - Wikipedia</a></cite> </blockquote> <p>というもので、Okapi Frameworkが備えている様々な機能を<a class="keyword" href="http://d.hatena.ne.jp/keyword/GUI">GUI</a>から使用できるアプリケーションの1つがOkapi Rainbow(以下、単にRainbowとも)という位置づけらしい。</p> </div> <div class="section"> <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/OmegaT">OmegaT</a>のHTMLフィルタとOkapi Rainbowについて</h4> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/OmegaT">OmegaT</a>に一度でも複雑なHTMLを食わせれば、<a class="keyword" href="http://d.hatena.ne.jp/keyword/OmegaT">OmegaT</a>のHTMLフィルタがそこかしこでBuggyな挙動を示すことは、<a href="http://d.hatena.ne.jp/momdo/20130809/p1">OmegaTでHTMLを扱う際に悩まされる数々のバグ - 血統の森+はてな</a>にも過去に書いたとおり、事前にHTMLに細工すればどうにかなるものから、翻訳済みHTMLファイルを手で書き換えないとどうしようもないものまで多岐にわたる。<a href="https://twitter.com/yu_tang_/">@yu_tang_</a>さまもいうように、</p> <blockquote> <p><script> window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); t._e = []; t.ready = function(f) { t._e.push(f); }; return t; }(document, "script", "twitter-wjs"));</script><script> twttr.ready(function (twttr) { var el = document.getElementsByClassName('twitter-syntax-tweet-id-452390320773165057'); for (var i=0;i<el.length;i++) { if (!!el[i].getAttribute('data-is-tweet-loaded')){ continue; } el[i].setAttribute('data-is-tweet-loaded', '1'); twttr.widgets.createTweet('452390320773165057',el[i],{}); } });</script><div class="twitter-syntax-tweet-id-452390320773165057"></div></p> </blockquote> <p>と<a class="keyword" href="http://d.hatena.ne.jp/keyword/OmegaT">OmegaT</a>のHTMLパースはアレと。しかし、Okapi Rainbowに<a class="keyword" href="http://d.hatena.ne.jp/keyword/OmegaT">OmegaT</a>のプロジェクトを作成させることで、<a class="keyword" href="http://d.hatena.ne.jp/keyword/OmegaT">OmegaT</a>に直接HTMLを喰わせるのではなく、RainbowにHTMLをパースさせてXLIFFを吐き出させ、そのXLIFFを<a class="keyword" href="http://d.hatena.ne.jp/keyword/OmegaT">OmegaT</a>上でいつものように翻訳作業を行う、というワークフローとなる。図にするならこういう感じだろうか</p> <pre><a class="keyword" href="http://d.hatena.ne.jp/keyword/OmegaT">OmegaT</a>のみ [翻訳元HTML]->[<a class="keyword" href="http://d.hatena.ne.jp/keyword/OmegaT">OmegaT</a>のHTMLフィルタ]->[<a class="keyword" href="http://d.hatena.ne.jp/keyword/OmegaT">OmegaT</a>で翻訳]->[翻訳済HTML] <a class="keyword" href="http://d.hatena.ne.jp/keyword/OmegaT">OmegaT</a>+Okapi Rainbow [翻訳元HTML]->[Rainbow上で<a class="keyword" href="http://d.hatena.ne.jp/keyword/OmegaT">OmegaT</a>用プロジェクトを生成]->[XLIFFがソースファイルとなる]->[<a class="keyword" href="http://d.hatena.ne.jp/keyword/OmegaT">OmegaT</a>のXLIFFフィルタ]→(下に続く) (下からの続き)→[<a class="keyword" href="http://d.hatena.ne.jp/keyword/OmegaT">OmegaT</a>で翻訳]->[RainbowでXLIFFを元に翻訳済HTMLを生成]->[翻訳済HTML] </pre><p>と、イメージとしては敢えて中間ファイルフォーマットを1段咬ませていく感じ。XLIFFというのは<a class="keyword" href="http://d.hatena.ne.jp/keyword/OASIS">OASIS</a>規格の<a class="keyword" href="http://d.hatena.ne.jp/keyword/XML">XML</a>ベースの国際化のため(つまり翻訳のため)のものであるから、HTMLよりかは遙かにパースするのは簡単(そしてさすがに<a class="keyword" href="http://d.hatena.ne.jp/keyword/OmegaT">OmegaT</a>はきちんとXLIFFをパースできてるっぽい)のと、別に<a class="keyword" href="http://d.hatena.ne.jp/keyword/OmegaT">OmegaT</a>に咬ますためだけにRainbowを使わなくてもいい(言い換えるなら、Rainbowが連携できるソフトは他にもある)と言うことがわかるかな、と。</p><p>ただ、記事タイトルにもあるとおり、<a class="keyword" href="http://d.hatena.ne.jp/keyword/OmegaT">OmegaT</a>補助ツールとしてのRainbowをここでは扱うので、ここではそのことしか書かない(し書けない)。</p> </div> <div class="section"> <h4>Okapi Rainbowのごく簡単な<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C1%A5%E5%A1%BC%A5%C8%A5%EA%A5%A2%A5%EB">チュートリアル</a></h4> <p>ごく簡単に。ところどころハマったので一応。ここでは、Rainbow Version6.0.25 SNAPSHOTをもとに記述している。</p> <div class="section"> <h5>0. ダウンロード</h5> <p>普段は当サイトでこんなこと書かないんですが、私の場合<a class="keyword" href="http://d.hatena.ne.jp/keyword/Win8">Win8</a>.1だとなぜか<strong><em><a class="keyword" href="http://d.hatena.ne.jp/keyword/x86-64">x86-64</a></em>だとなぜか動かなかった</strong>ので、<a class="keyword" href="http://d.hatena.ne.jp/keyword/x86">x86</a>バイナリをダウンロードした方が無難かと思われる。</p><p>stableは <a href="https://bintray.com/okapi/Distribution/Okapi_Applications">https://bintray.com/okapi/Distribution/Okapi_Applications</a> から、snapshotは <a href="http://okapi.opentag.com/snapshots/">http://okapi.opentag.com/snapshots/</a> から入手可能。</p><p>適当な<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%A3%A5%EC%A5%AF%A5%C8">ディレクト</a>リに展開して、rainbow.exeを起動させる。</p> </div> <div class="section"> <h5>1.Rainbowで<a class="keyword" href="http://d.hatena.ne.jp/keyword/OmegaT">OmegaT</a>のプロジェクトを作成する</h5> <p>ここから下は<a href="http://okapi.opentag.com/help/tutorials/tutorial_02/index.html">Tutorial - Using Translation Packages</a>を注意深く読めばわかる話なので、要所だけおさえる感じで。</p><p>rainbow.exeを起動すると、</p><p><span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/momdo/20140406213036" class="hatena-fotolife" itemprop="url"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/momdo/20140406/20140406213036.png" alt="f:id:momdo:20140406213036p:image" title="f:id:momdo:20140406213036p:image" class="hatena-fotolife" itemprop="image"></a></span></p><p>みたいな感じの画面になる。まずタブ[Input List1]で右クリックして<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%C6%A5%AD%A5%B9%A5%C8%A5%E1%A5%CB%A5%E5%A1%BC">コンテキストメニュー</a>から[Add Documents...]を選んでファイルを選択するなり、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C9%A5%E9%A5%C3%A5%B0%A5%A2%A5%F3%A5%C9%A5%C9%A5%ED%A5%C3%A5%D7">ドラッグアンドドロップ</a>をするなりして、翻訳したいファイを追加する。</p><p>次にタブ[Language and Encodings]を選択して、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%F3%A5%B3%A1%BC%A5%C7%A5%A3%A5%F3%A5%B0">エンコーディング</a>を選択する。Rainbowが自動で<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%F3%A5%B3%A1%BC%A5%C7%A5%A3%A5%F3%A5%B0">エンコーディング</a>の検出に失敗するのか、RainbowのHTMLフィルタの設定が悪いのかは定かでないけど、<code>&lt;meta charset="utf-8"&gt;</code>という記述が翻訳元ファイルにあったとしても無視されるみたいなので、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%F3%A5%B3%A1%BC%A5%C7%A5%A3%A5%F3%A5%B0">エンコーディング</a>は入出力とも所望の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%F3%A5%B3%A1%BC%A5%C7%A5%A3%A5%F3%A5%B0">エンコーディング</a>をここで仕込んでおく。</p><p>で前準備が終わったらメニューの[Utilities]→[Translation Kit Creation...]を選択する(下図参照)。</p><p><span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/momdo/20140406215341" class="hatena-fotolife" itemprop="url"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/momdo/20140406/20140406215341.png" alt="f:id:momdo:20140406215341p:image" title="f:id:momdo:20140406215341p:image" class="hatena-fotolife" itemprop="image"></a></span></p><p>基本操作としては、上図の赤で囲った部分([Translation Kit Creation...]と[Translation Kit Post-processing...])のみを使うことになる。(それ以上はこの記事の範囲外)<br /> さて、[Translation Kit Creation...]を選択すると次のようになる。</p><p><span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/momdo/20140406215829" class="hatena-fotolife" itemprop="url"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/momdo/20140406/20140406215829.png" alt="f:id:momdo:20140406215829p:image" title="f:id:momdo:20140406215829p:image" class="hatena-fotolife" itemprop="image"></a></span></p><p>基本的には、この画面で「<a class="keyword" href="http://d.hatena.ne.jp/keyword/OmegaT">OmegaT</a> Project」を選択して[Execute]を押せば、<a class="keyword" href="http://d.hatena.ne.jp/keyword/OmegaT">OmegaT</a>のプロジェクトが出来上がる。もろもろのオプションについては、<a href="http://www.opentag.com/okapi/wiki/index.php?title=Rainbow_TKit_-_OmegaT_Project">Rainbow TKit - OmegaT Project - OkapiWiki</a>を参照のこと。また、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%A3%A5%EC%A5%AF%A5%C8">ディレクト</a>リ構成についてもこのページの「Package Layout」に書かれているので参考になるかと。</p> </div> <div class="section"> <h5>2. <a class="keyword" href="http://d.hatena.ne.jp/keyword/OmegaT">OmegaT</a>でいつものように翻訳する</h5> <p>Rainbowで作った<a class="keyword" href="http://d.hatena.ne.jp/keyword/OmegaT">OmegaT</a>プロジェクトのある<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%A3%A5%EC%A5%AF%A5%C8">ディレクト</a>リを開いて、普段と同じように翻訳を行って、翻訳済みXLIFFファイルを生成する。分節にタグ情報を含んでる場合、HTMLを直接<a class="keyword" href="http://d.hatena.ne.jp/keyword/OmegaT">OmegaT</a>に喰わせたときのtmxがそのまま使えないのが難点かなと。でもあれか、tmxを<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B5%A1%B3%A3%C5%AA">機械的</a>に置換すれば使えるかもしれない(要検証)。もしかしたら、Okapiにそういった機能があるのかもしれないけど、よくわかっていない。</p> </div> <div class="section"> <h5>3. RainbowでHTMLを吐き出させる</h5> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/OmegaT">OmegaT</a>上で翻訳作業を行ったファイルはXLIFFなので、HTMLに戻す作業が必要となるわけだが、実はここで少しハマった。具体的には、最初にHTMLを[Input1]に放り込んだままだと実はダメで、Rainbowを起動しなおして(新規の状態にして)、<a class="keyword" href="http://d.hatena.ne.jp/keyword/OmegaT">OmegaT</a>のプロジェクトに作った<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%A3%A5%EC%A5%AF%A5%C8">ディレクト</a>リにある<code>manifest.rkm</code>をRainbowに読ませたうえで、[Translation Kit Post-processing...]をしないといけない、というのがハマりどころ。うまくいけば<code>done</code><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%A3%A5%EC%A5%AF%A5%C8">ディレクト</a>リにHTMLファイルが出力される。</p><br /> <br /> <p>とまあ、ものすごくざっくりとだけど<a class="keyword" href="http://d.hatena.ne.jp/keyword/OmegaT">OmegaT</a>補助ツールとしてのRainbowをごく簡単な使い方を書いてみた。あとは自動でタグを付与(日本語用に<code>line-height</code>を仕込んだり、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8">スクリプト</a>ファイルを<code>script</code>要素を食わせたり…)できれば言うことないんだけど、これはさすがに別に<a class="keyword" href="http://d.hatena.ne.jp/keyword/powershell">powershell</a><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8">スクリプト</a>なりのお仕事になるんですかね。</p><p>最後に、このエントリーを書くのに<a href="http://e-trans.d2.r-cms.jp/blog_detail/id=55">第8回 翻訳ユーティリティの定番「Okapi Rainbow」 | The Professional Translator (ザ・プロフェッショナル・トランスレーター) − バベル・プレス</a>をちょっとだけ参考にした。そして、公式<a class="keyword" href="http://d.hatena.ne.jp/keyword/Wiki">Wiki</a>である<a href="http://www.opentag.com/okapi/wiki/index.php?title=Main_Page">Main Page - OkapiWiki</a>が一番参考になると思う。当然のごとく英語だけど。</p> </div> </div> momdo authorをどう訳すか?ということについて hatenablog://entry/17680117127079412451 2014-04-03T00:00:00+09:00 2019-04-26T23:40:39+09:00 window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); t._e = []; t.ready = function(f)… <p><script> window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); t._e = []; t.ready = function(f) { t._e.push(f); }; return t; }(document, "script", "twitter-wjs"));</script><script> twttr.ready(function (twttr) { var el = document.getElementsByClassName('twitter-syntax-tweet-id-451202587950600192'); for (var i=0;i<el.length;i++) { if (!!el[i].getAttribute('data-is-tweet-loaded')){ continue; } el[i].setAttribute('data-is-tweet-loaded', '1'); twttr.widgets.createTweet('451202587950600192',el[i],{}); } });</script><div class="twitter-syntax-tweet-id-451202587950600192"></div></p><p>authorという単語について、「著者」と訳出するより、「作成者」と訳出した方がよいのではないか?というご意見。<br /> 現状は「著者」と訳出しているけれども、私自身は「著者」がベストな選択肢だとは思っていない。<a href="https://twitter.com/naofenix/">@naofenix</a>さまの言われるように「作成者」と訳出するのも有力な候補だとは思う。しかしながら、以下の2点から現状の「著者」という訳語を当面は維持することにした。</p> <div class="section"> <h4>1. 単純置換したときの影響が未知数</h4> <p>指摘されているのは<a href="http://momdo.s35.xrea.com/web-html-test/spec/WD-html-polyglot-20140204.html">ポリグロット・マークアップ</a>についてだけれども、ポリグロットにおけるauthorの訳語を変えるならば当然<a href="http://momdo.s35.xrea.com/web-html-test/spec/html5-dev/Overview.html">HTML5.0</a>と<a href="http://momdo.s35.xrea.com/web-html-test/spec/WD-html51-20140204/Overview.html">HTML5.1</a>仕様訳も変えなければならない(そうでなければ仕様間の整合性が保たれなくなる)。そして、(HTMLとも密接に関係する)<a href="http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html">CSS2.1</a>仕様訳(と、私が訳しているCSS3仕様訳)も見直す必要があるだろう。となると、影響範囲は甚大であり、単純置換するだけでも結構な<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B9%A9%BF%F4">工数</a>がかかる。また、他の訳語とのバランス、たとえば<a class="keyword" href="http://d.hatena.ne.jp/keyword/creator">creator</a>やeditorなどのいわゆる"作者"かそれに似た訳出をするだろう単語が仮に仕様書中に出てきた場合、authorを「作成者」としたときにそのような訳語と衝突しないかどうか確認する必要があるだろう。そして、大前提としてauthorを「著者」と訳すことは、間違いとは言えない(何よりも、辞書に書いてあるとおりの訳語である<a href="#f-b8d5e1d5" name="fn-b8d5e1d5" title="http://dictionary.goo.ne.jp/leaf/ej3/5448/m0u/author/">*1</a> <a href="#f-dcf4e176" name="fn-dcf4e176" title="http://ejje.weblio.jp/content/author">*2</a>。)見方を変えれば、費用対効果が悪いとも言えるだろう。</p> </div> <div class="section"> <h4>2. 著者の方が範囲が狭い</h4> <p>作成者というのは辞書に載ってないのでそれぞれ類似の単語を引くと、</p> <blockquote cite="http://dictionary.goo.ne.jp/leaf/jn2/86983/m0u/"> <p>計画や書類、また文章などを作ること。「予算案の―」「報告書を―する」</p> <cite><a href="http://dictionary.goo.ne.jp/leaf/jn2/86983/m0u/">&#x3055;&#x304F;&#x305B;&#x3044;&#x3010;&#x4F5C;&#x6210;&#x3011;&#x306E;&#x610F;&#x5473; - &#x56FD;&#x8A9E;&#x8F9E;&#x66F8; - goo&#x8F9E;&#x66F8;</a></cite> </blockquote> <blockquote cite="http://dictionary.goo.ne.jp/leaf/jn2/7392/m0u/"> <p>書物を書いて出版する。著作する。「社史を―・す」</p> <cite><a href="http://dictionary.goo.ne.jp/leaf/jn2/7392/m0u/">&#x3042;&#x3089;&#x308F;&#x3059;&#x3010;&#x8457;&#x3059;&#x3014;&#x8457;&#x308F;&#x3059;&#x3015;&#x3011;&#x306E;&#x610F;&#x5473; - &#x56FD;&#x8A9E;&#x8F9E;&#x66F8; - goo&#x8F9E;&#x66F8;</a></cite> </blockquote> <p>「作成」だとどちらかというと「ものを作ること」に重点が置かれるのに対し、「著す」とすると「書物を書くこと」に重点が置かれる。言い換えるならば、前者は少し広い意味で「作る」ことを表しているのに対して、後者はより純粋に「書く」ことを表していると言えるだろう。</p><p>私自身は、ウェブページやウェブサイトは「作る」ものであって、HTMLは「書く」ものだと思っている。プログラミングにおいても、プログラムは「作る」ものであって、プログラムを作るための言語は(別に<a class="keyword" href="http://d.hatena.ne.jp/keyword/C%B8%C0%B8%EC">C言語</a>でもいいし、<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>でも何でもいいのだけれど)「書く」と表現するのが広く用いられている感覚だと思う。とするならば、「作成者」とするよりかは「著者」とする方がその意味を的確に表現できるとは言えまいか。</p> </div> <div class="section"> <h4>まとめ</h4> <p>今回検討した限りでは「著者」という訳語は決して間違いではない表現だと思うし、ひいき目に見ればベターな表現だとも思っている。ただし、繰り返しになるけれども、「著者」という訳語がベストだとも思わない。HTMLが「書く」ものだという前提を念頭に置いた上で、今回のauthorに限らずより良い訳語があれば、積極的に取り入れていきたい。</p> </div><div class="footnote"> <p class="footnote"><a href="#fn-b8d5e1d5" name="f-b8d5e1d5" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text"><a href="http://dictionary.goo.ne.jp/leaf/ej3/5448/m0u/author/">http://dictionary.goo.ne.jp/leaf/ej3/5448/m0u/author/</a></span></p> <p class="footnote"><a href="#fn-dcf4e176" name="f-dcf4e176" class="footnote-number">*2</a><span class="footnote-delimiter">:</span><span class="footnote-text"><a href="http://ejje.weblio.jp/content/author">http://ejje.weblio.jp/content/author</a></span></p> </div> momdo ナビゲーションと現在地 hatenablog://entry/17680117127079412575 2014-03-30T00:00:00+09:00 2019-04-26T23:40:41+09:00 アクティブなナビゲーション項目とmark要素 - Weblog - Hail2u.net mark要素が含まれる要素のコンテキストとは別のコンテキストでの関係性をハイライト等で表したい時に使うと解釈してる(同じコンテキストならemやstrong、そしてb要素を使う)。ナビゲーション項目が現在のページへの参照かどうかというのは、その文書がウェブサイトにおいてどういう位置にあるのかというコンテキストから判断されるべきなので、文書そのものとは別のコンテキストを受けての判断。つまりmark要素を使うのが適切なんじゃないかなと。 アクティブなナビゲーション項目とmark要素 - Weblog - Hai… <p><a href="http://hail2u.net/blog/webdesign/active-nav-item-and-mark-element.html">アクティブなナビゲーション項目とmark要素 - Weblog - Hail2u.net</a><br /> </p> <blockquote cite="http://hail2u.net/blog/webdesign/active-nav-item-and-mark-element.html"> <p><code>mark</code>要素が含まれる要素のコンテキストとは別のコンテキストでの関係性をハイライト等で表したい時に使うと解釈してる(同じコンテキストなら<code>em</code>や<code>strong</code>、そして<code>b</code>要素を使う)。ナビゲーション項目が現在のページへの参照かどうかというのは、その文書がウェブサイトにおいてどういう位置にあるのかというコンテキストから判断されるべきなので、文書そのものとは別のコンテキストを受けての判断。つまり<code>mark</code>要素を使うのが適切なんじゃないかなと。</p> <cite><a href="http://hail2u.net/blog/webdesign/active-nav-item-and-mark-element.html">&#x30A2;&#x30AF;&#x30C6;&#x30A3;&#x30D6;&#x306A;&#x30CA;&#x30D3;&#x30B2;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x9805;&#x76EE;&#x3068;mark&#x8981;&#x7D20; - Weblog - Hail2u.net</a></cite> </blockquote> <p>とまあ、<code>mark</code>要素を、ナビゲーションリストで使ったらどうでしょう、と。そういう解釈もありかもしれないけど、個人的には<code>em</code>要素を推してみたい。どうして<code>em</code>要素なのかというと、ナビゲーションを(多少不自然かもしれないけど)住所に置き換えるとすると、</p><p>現在地は、○○県△△市××番地です。</p><p>という一文を考えて、(上位の県やら市をサイト構造に適当に置き換えてもらうとして)今「××番地にいる」と言うことをこの文でまさに<em>強調</em>したいのだから、これは<code>em</code>要素が一番しっくりくるでしょう、という考え方。</p><p>じゃあ<code>mark</code>要素より<code>em</code>要素の方がベターなのかという確証は自分の中でいまいちないけれども、少なくとも仕様は、</p> <blockquote cite="http://momdo.s35.xrea.com/web-html-test/spec/html5-dev/text-level-semantics.html#the-mark-element"> <p><code>mark</code>要素は、別のコンテキストにおいて関連性のために、参照目的でマークまたは強調表示されるある文書内の一連のテキストを表す。引用文または文から参照されるテキストのブロック内で使用される場合、ブロックが元々書かれた際に、元々存在しないが、オリジナルの著者によって重要だと考えられていないかもしれないだろう、テキストの一部に読者の注意を喚起するために追加されたハイライトを示す。</p> <cite><a href="http://momdo.s35.xrea.com/web-html-test/spec/html5-dev/text-level-semantics.html#the-mark-element">4.5 Text-level semantics &#x2015; HTML5 &#x65E5;&#x672C;&#x8A9E;&#x8A33;</a></cite> </blockquote> <p>と言った具合。たとえばある文書から文を引用するときに、引用元の著者の意図とは別に、引用した筆者が重要だと思う箇所に対して、あたかも本を読んでいる読者が蛍光マーカーで色付けするかのように、マークするのが<code>mark</code>要素なのかなあと。とすると、ナビゲーションを書いているのはそのウェブサイトの作者自身であって、別の誰かというわけでもないから、同じコンテキストとするならば、<code>em</code>要素でいいんじゃないかと思うんだけど、どんなもんでしょ。</p> momdo XHTML5がdisられている気がする(新しいW3C仕様訳を公開しました) hatenablog://entry/17680117127079412701 2014-03-23T00:00:00+09:00 2019-04-26T23:40:42+09:00 のは気のせいでしょうか、みなさんこんばんわ。 ポリグロット・マークアップ:HTML5語彙の堅牢なプロファイル http://momdo.s35.xrea.com/web-html-test/spec/WD-html-polyglot-20140204.html ということで訳してみた。どうやら更新される気配のないPolyglot マークアップ: HTML 互換の XHTML 文書の更新版になる。ポリグロットがなんなのかざっくばらんに言えば、HTML5としてもXHTML5としても解析可能なマークアップであるにはどうすればよいかという趣旨のもので、XMLとしても耐えうるマークアップを目指すことは、… <p>のは気のせいでしょうか、みなさんこんばんわ。</p> <dl> <dt>ポリグロット・<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A1%BC%A5%AF%A5%A2%A5%C3%A5%D7">マークアップ</a>:<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>語彙の堅牢なプロファイル</dt> <dd><a href="http://momdo.s35.xrea.com/web-html-test/spec/WD-html-polyglot-20140204.html">http://momdo.s35.xrea.com/web-html-test/spec/WD-html-polyglot-20140204.html</a></dd> </dl><p>ということで訳してみた。どうやら更新される気配のない<a href="http://standards.mitsue.co.jp/resources/w3c/TR/html-polyglot/">Polyglot マークアップ: HTML 互換の XHTML 文書</a>の更新版になる。</p><p>ポリグロットがなんなのかざっくばらんに言えば、<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>としてもXHTML5としても解析可能な<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A1%BC%A5%AF%A5%A2%A5%C3%A5%D7">マークアップ</a>であるにはどうすればよいかという趣旨のもので、<a class="keyword" href="http://d.hatena.ne.jp/keyword/XML">XML</a>としても耐えうる<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A1%BC%A5%AF%A5%A2%A5%C3%A5%D7">マークアップ</a>を目指すことは、WCAG 2.0のいう堅牢性(<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%ED%A5%D0%A5%B9%A5%C8">ロバスト</a>性)<a href="#f-9784e831" name="fn-9784e831" title="http://www.jsa.or.jp/stdz/instac/commitee-acc/W3C-WCAG/WCAG20/#robust">*1</a>の向上にもつながる。見方を変えれば、かなりフリーダムに記述できる<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>において、どう<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A1%BC%A5%AF%A5%A2%A5%C3%A5%D7">マークアップ</a>を記述すべきかの一つの指針になりうる、と。</p><p>言い換えるなら、<a class="keyword" href="http://d.hatena.ne.jp/keyword/XHTML">XHTML</a> 1.0 <a href="http://msugai.fc2web.com/web/W3C/xhtml1SE/guidelines.html#guidelines">C. HTML 互換性ガイドライン</a>の更新版、とも言えるかもしれない、きっと。</p><p>んで、このポリグロット・<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A1%BC%A5%AF%A5%A2%A5%C3%A5%D7">マークアップ</a>のいう通りに記述すべきかとなると微妙な箇所もあるけれども、本当にXHTML5として記述しなければならないEPUB3(.0.1)の基礎的な<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AC%A5%A4%A5%C9%A5%E9%A5%A4%A5%F3">ガイドライン</a>にもなるんじゃないかなぁと(てきとー)</p><p>最後に、訳がところどころおかしいのはLCにも関わらず一部原文がぶっ壊れているせいであって、たぶん訳者のせいじゃない。</p> <div class="footnote"> <p class="footnote"><a href="#fn-9784e831" name="f-9784e831" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text"><a href="http://www.jsa.or.jp/stdz/instac/commitee-acc/W3C-WCAG/WCAG20/#robust">http://www.jsa.or.jp/stdz/instac/commitee-acc/W3C-WCAG/WCAG20/#robust</a></span></p> </div> momdo WAI-ARIA 1.0が勧告になった(誰か訳しませんか) hatenablog://entry/17680117127079412804 2014-03-21T00:00:00+09:00 2019-04-26T23:40:43+09:00 Accessible Rich Internet Applications (WAI-ARIA) 1.0 W3C Recommendation 20 March 2014 PRから息つく暇も無く勧告に。で、WAI-ARIA(日本語訳):日立のユニバーサルデザインで公開されてるWorking Draftが2009年のもので更新される気配も無かったので、ローカルで翻訳できないかねえなんてやってなかったりしたんですが、無理でしたね。と言うことで、激しく書きかけの部分訳を置いておきます。 Accessible Rich Internet Applications (WAI-ARIA) 1.0 日本語(… <p><a href="http://www.w3.org/TR/2014/REC-wai-aria-20140320/">Accessible Rich Internet Applications (WAI-ARIA) 1.0</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a> Recommendation 20 March 2014<br /> PRから息つく暇も無く勧告に。</p><p>で、<a href="http://www.hitachi.co.jp/universaldesign/ria/ajax/wai-aria/index.html">WAI-ARIA(日本語訳):日立のユニバーサルデザイン</a>で公開されてるWorking Draftが2009年のもので更新される気配も無かったので、ローカルで翻訳できないかねえなんてやってなかったりしたんですが、無理でしたね。</p><p>と言うことで、激しく書きかけの部分訳を置いておきます。<br /> <a href="http://momdo.s35.xrea.com/web-html-test/spec/REC-wai-aria-20140320_complete.html">Accessible Rich Internet Applications (WAI-ARIA) 1.0 日本語(部分)訳</a><br /> 二次<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C3%F8%BA%EE%B8%A2">著作権</a>は<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D1%A5%D6%A5%EA%A5%C3%A5%AF%A5%C9%A5%E1%A5%A4%A5%F3">パブリックドメイン</a>扱いにしておくので、誰か続きを訳しておください(ぉぃ</p> momdo HTML5仕様周辺の振り返りとかなんか hatenablog://entry/17680117127079412933 2014-03-11T00:00:00+09:00 2019-04-26T23:40:44+09:00 最新仕様から読み解くHTML5の“いま”と“なぜ”(webcre8.jp)を読んで、ちいと微妙だなと思った箇所があったので、簡単なおさらい。ちなみにスライドからはどんなことをしゃべっていたのかまでは伺い知ることはできないから、口頭で補足があったりするとことまでは拾えない。 HTML5の最新仕様はW3C HTML5.1とWHATWG HTMLであって、HTML5仕様では無い 真の意味で最新仕様というなら、おそらくW3C HTML5.0仕様だけを追いかけてはいけないだろうと。喩えて言うならFirefoxでstableを見るのではなくて、Nightlyを積極的に見に行こうみたいな。なおWHATWGと… <p><a href="http://webcre8.jp/slide/webdesignnewrule/#1">最新仕様から読み解くHTML5の“いま”と“なぜ”</a>(webcre8.jp)を読んで、ちいと微妙だなと思った箇所があったので、簡単なおさらい。ちなみにスライドからはどんなことをしゃべっていたのかまでは伺い知ることはできないから、口頭で補足があったりするとことまでは拾えない。</p> <div class="section"> <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>の最新仕様は<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>.1と<a class="keyword" href="http://d.hatena.ne.jp/keyword/WHATWG">WHATWG</a> HTMLであって、<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>仕様では無い</h4> <p>真の意味で最新仕様というなら、おそらく<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>.0仕様だけを追いかけてはいけないだろうと。喩えて言うなら<a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a>でstableを見るのではなくて、Nightlyを積極的に見に行こうみたいな。</p><p>なお<a class="keyword" href="http://d.hatena.ne.jp/keyword/WHATWG">WHATWG</a>と<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a>の関係は、2年前に<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EC%A5%C3%A5%B5%A1%BC%A5%D1%A5%F3%A5%C0">レッサーパンダ</a>の人が書いた<a href="https://dev.mozilla.jp/2012/07/administrivia-update-on-the-relationship-between-the-whatwg-html-living-standard-and-the-w3c-html5-specification/">運営メモ: WHATWG の HTML Living Standard と W3C の HTML5 仕様との関係についての最新情報 | Mozilla Developer Street (modest)</a>のエントリーの通りなので、ここではいちいち説明しない。</p><p>このエントリーでいう最新仕様に照らし合わせると、<a href="http://webcre8.jp/slide/webdesignnewrule/#22">スライド22</a>で挙げられている「削除された要素」は若干意味が変わってくる。<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-hgroup-element"><code>hgroup</code>要素</a>も<a href="http://momdo.s35.xrea.com/web-html-test/spec/WD-html51-20140204/interactive-elements.html#the-menu-element"><code>menu</code>要素</a>もあるんだよ?</p><p>なお、<a href="http://dev.w3.org/html5/decision-policy/html5-2014-plan.html">Plan 2014</a>によれば、</p> <ul> <li>2014年第3四半期に<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>.0が一度LCに</li> <li>2014年第4四半期に<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>.0がPR、RECの予定。</li> </ul><p>というのが<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>.0のタイムスケジュールだけど、<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>.1に関しては、</p> <ul> <li>2014年第3四半期にHTML<em>5.1</em>がLCに</li> <li>2015年第1四半期に<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>.1が<em>CR</em>に</li> <li><em>2016</em>年<em>第4</em>四半期に<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>.1が<em>REC</em>に</li> </ul><p>ということに(今のところは)なっている。ちなみに2015年に<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>.2草案が登場する(予定)。なお、私が訳している日本語訳がいつまで続いていくのかは不明である。</p><p>足下のFace to Face meetingは今年の4月にあったりする(<a href="https://www.w3.org/wiki/HTML/wg/2014-04-Agenda">HTML/wg/2014-04-Agenda - W3C Wiki</a>参照)ので、そこで何か動きがあるかもしれない。</p> </div> <div class="section"> <h4>拡張仕様について</h4> <p><a href="http://webcre8.jp/slide/webdesignnewrule/#47">スライド47</a>でいう<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a> Extensionが何を指しているのかいまいちピンとこないけれども、公式的な拡張仕様の一覧は<a href="http://www.w3.org/html/wg/wiki/ExtensionSpecifications">ExtensionSpecifications - HTML WG Wiki</a>にあったりする。ちなみに進捗については<a href="http://www.w3.org/wiki/HTML/Publications">HTML/Publications - W3C Wiki</a>あたりにある。その意味で、<a href="http://webcre8.jp/slide/webdesignnewrule/#31">スライド31</a>で挙げられているような<code>picture</code>要素や<code>srcset</code>属性、スライドでは挙げられてないけど<code>longdesc</code>属性なんかを<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>の拡張仕様と呼ぶほうがしっくりはくる。なので、WAI-<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a>を<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a> Extensionと呼ばれると微妙にもにょる(実はUsing WAI-<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a> in HTMLのことを指してるんだよとかいう展開もあり何とも)。ちなみにWAI-<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a>に関して言えば<a href="http://momdo.s35.xrea.com/web-html-test/spec/html5-dev/dom.html#wai-aria">3.2.7 WAI-ARIA ― HTML5</a>にがっつり記述があったりする。<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>仕様には<a href="http://momdo.s35.xrea.com/web-html-test/spec/html5-dev/infrastructure.html#extensibility-0">2.2.3 拡張性</a>あたりにうんたらかんたら書いてある。</p><br /> <p>とまあちょっと気になるところがあったので簡単なメモ書きということで。ちなみに私はまだ件の本を手に取ってないんで本の中身までは知らない。</p> </div> momdo W3Cに翻訳を載せてもらった hatenablog://entry/17680117127079413053 2014-03-04T00:00:00+09:00 2019-04-26T23:40:45+09:00 ねむい、たすけて(何1つは私が訳したCSS2.1仕様について、W3Cからリンクを張ってもらいましたというお話。 Japanese Translations of W3C Documents (W3C 文書の日本語翻訳集) http://www.w3.org/2005/11/Translations/Lists/ListLang-ja.html#CSS2-2-ja もう1つは、私が訳した「言語タグ」についての翻訳を、W3Cに載せて貰ったという話。 HTMLとXMLにおける言語タグ http://www.w3.org/International/articles/language-tags/Ove… <p>ねむい、たすけて(何</p><p>1つは私が訳したCSS2.1仕様について、<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a>からリンクを張ってもらいましたというお話。</p> <dl> <dt>Japanese Translations of <a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a> Documents (<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a> 文書の日本語翻訳集)</dt> <dd><a href="http://www.w3.org/2005/11/Translations/Lists/ListLang-ja.html#CSS2-2-ja">http://www.w3.org/2005/11/Translations/Lists/ListLang-ja.html#CSS2-2-ja</a></dd> </dl><p>もう1つは、私が訳した「言語タグ」についての翻訳を、<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a>に載せて貰ったという話。</p> <dl> <dt>HTMLと<a class="keyword" href="http://d.hatena.ne.jp/keyword/XML">XML</a>における言語タグ</dt> <dd><a href="http://www.w3.org/International/articles/language-tags/Overview.ja.php">http://www.w3.org/International/articles/language-tags/Overview.ja.php</a></dd> </dl><p>CSS2.1は本当にもう今見ると泣きたくなるような訳出をそこかしこでしているので、2.2になるときにはもうちょっとマシにするつもり(希望込み)。<br /> 「言語タグ」については、<a class="keyword" href="http://d.hatena.ne.jp/keyword/BCP">BCP</a> 47をどう組み合わせるかの(訳がアレという話はさておき、)良質な<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C1%A5%E5%A1%BC%A5%C8%A5%EA%A5%A2%A5%EB">チュートリアル</a>なので、<code>lang</code>属性に何を入れたらいいのか、という目的に対するグッドプ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E9%A5%AF">ラク</a>ティスが得られるのではないでしょうか。</p><p>オチはないのよ、ごめんなさいorz</p> momdo サイトマップでGeo Sitemapsをサポートしなくなったっぽい hatenablog://entry/17680117127079413163 2014-03-01T00:00:00+09:00 2019-04-26T23:40:46+09:00 ウェブマスターツールあたり激しく放置していたんですが、久々にサイトマップを見直したら、次のようなKML形式の記述をエラーとして報告した。 <geo:geo> <geo:format>kml</geo:format> </geo:geo> Creating Geo Sitemaps - Webmaster Tools Helpには、 Google no longer supports the Geo extension to the Sitemap protocol. We recommmend that you tell Google about geographically-based UR… <p>ウェブマ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%BF%A1%BC%A5%C4">スターツ</a>ールあたり激しく放置していたんですが、久々に<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B5%A5%A4%A5%C8%A5%DE%A5%C3%A5%D7">サイトマップ</a>を見直したら、次のような<a class="keyword" href="http://d.hatena.ne.jp/keyword/KML">KML</a>形式の記述をエラーとして報告した。</p> <pre class="code lang-xml" data-lang="xml" data-unlink> <span class="synIdentifier">&lt;</span><span class="synSpecial">geo</span><span class="synComment">:</span><span class="synIdentifier">geo&gt;</span> <span class="synIdentifier">&lt;</span><span class="synSpecial">geo</span><span class="synComment">:</span><span class="synIdentifier">format&gt;</span>kml<span class="synIdentifier">&lt;/</span><span class="synSpecial">geo</span><span class="synComment">:</span><span class="synIdentifier">format&gt;</span> <span class="synIdentifier">&lt;/</span><span class="synSpecial">geo</span><span class="synComment">:</span><span class="synIdentifier">geo&gt;</span> </pre><p><a href="https://support.google.com/webmasters/answer/94555?hl=en">Creating Geo Sitemaps - Webmaster Tools Help</a>には、</p> <blockquote cite="https://support.google.com/webmasters/answer/94555?hl=en"> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Google">Google</a> no longer supports the Geo extension to the Sitemap protocol. We recommmend that you tell <a class="keyword" href="http://d.hatena.ne.jp/keyword/Google">Google</a> about geographically-based URLs by including them in a regular Web Sitemap.</p> <cite><a href="https://support.google.com/webmasters/answer/94555?hl=en">Creating Geo Sitemaps - Webmaster Tools Help</a></cite> </blockquote> <p>と言う具合でgeo拡張をいつの間にかサポートしなくなってたみたい。と言うことで<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B5%A5%A4%A5%C8%A5%DE%A5%C3%A5%D7">サイトマップ</a>から削除しておいた。</p> momdo それはひょっとしてギャグで言ってるのか!? hatenablog://entry/17680117127079413288 2014-02-25T00:00:00+09:00 2019-04-26T23:40:47+09:00 新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名] | クロノドライブ これでおまんま食えるのか。 1.半角英数字のみを使用する。 「日本語」、「全角英数字・記号」、「半角カタカナ」は使用することが出来ません。 2.記号は「-」(ハイフン)、「_」(アンダースコア)のみ使用する。 「\」(エンマーク)、「/」(スラッシュ)、「:」(コロン)、「*」(アスタリスク)、「?」(クエスチョン)、「”」(ダブルクォーテーション)、「」(右アングルかっこ)、「|」(パイプ)はWindowsでファイル名に使用することが出来ません。 また、上記に含まれないその他の記号についても、プ… <p><a href="http://html-coding.co.jp/annex/column/11/">新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名] | クロノドライブ</a><br /> これでおまんま食えるのか。</p> <blockquote> <p>1.半角英数字のみを使用する。<br /> 「日本語」、「全角英数字・記号」、「半角カタカナ」は使用することが出来ません。</p><br /> <p>2.記号は「-」(ハイフン)、「_」(アンダースコア)のみ使用する。<br /> 「\」(エンマーク)、「/」(スラッシュ)、「:」(コロン)、「*」(<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%B9%A5%BF%A5%EA%A5%B9%A5%AF">アスタリスク</a>)、「?」(ク<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%B9">エス</a>チョン)、「”」(ダブルクォーテーション)、「<」(左アングルかっこ)、「>」(右アングルかっこ)、「|」(パイプ)は<a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a>でファイル名に使用することが出来ません。 また、上記に含まれないその他の記号についても、プログラム上で誤った処理をしてしまい、エラーを引き起こす原因と成り得るので、使用すべきではありません。</p><br /> <p>3.<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B5%A1%BC%EF%B0%CD%C2%B8%CA%B8%BB%FA">機種依存文字</a>は使用しない。<br /> 記号と同様、エラーを引き起こす原因と成り得るため、使用すべきではありません。</p><br /> <p>4.全角スペース、半角スペース(Space)は使用しない。<br /> ファイル名にスペースを含んだ場合、ファイルを正常に処理出来なくなる可能性があります。<br /> id・class名の場合、スペースを含んでしまうと別なid・classとして認識されてしまいます。</p><br /> <p>5.必ずアルファベットから開始する。(数字から開始しない)<br /> 数字から開始しているid・class名は、認識されません。</p><br /> <p>6.ファイル名は全て小文字で統一する </p> </blockquote> <p>1.のようなルールを持ち込むのは自由、というよりもむしろ推奨されてもよいでしょうが、理由づけが意味不明。なお、<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>としては日本語を含もうが<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AD%A5%EA%A5%EB%CA%B8%BB%FA">キリル文字</a>を含もうが問題ありません。もういちいち突っ込むのも面倒だから以下のHTMLを<a href="http://validator.w3.org/check">W3C Markup Validator</a>に打ち込むなりローカルに保存してブラウザで表示するなりしてお確かめください。関連するかもしれない仕様もあわせて置いておきます。</p> <pre class="code lang-html" data-lang="html" data-unlink><span class="synComment">&lt;!doctype html&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">html</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">head</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">style</span><span class="synIdentifier">&gt;</span> .(」・ω・)」うー! <span class="synIdentifier">{</span><span class="synType">color</span>:<span class="synConstant">red</span>;<span class="synIdentifier">}</span> #(/・ω・)/にゃー <span class="synIdentifier">{</span><span class="synType">color</span>:<span class="synConstant">green</span>;<span class="synIdentifier">}</span> <span class="synIdentifier">&lt;/</span><span class="synStatement">style</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">meta</span><span class="synIdentifier"> </span><span class="synType">charset</span><span class="synIdentifier">=</span><span class="synConstant">utf-8</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">title</span><span class="synIdentifier">&gt;</span>てすと<span class="synIdentifier">&lt;/</span><span class="synStatement">title</span><span class="synIdentifier">&gt;&lt;/</span><span class="synStatement">head</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">body</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">p</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">(」・ω・)」うー!</span><span class="synIdentifier">&gt;</span>(」・ω・)」うー! <span class="synIdentifier">&lt;</span><span class="synStatement">p</span><span class="synIdentifier"> </span><span class="synType">id</span><span class="synIdentifier">=</span><span class="synConstant">(/・ω・)/にゃー</span><span class="synIdentifier">&gt;</span>(/・ω・)/にゃー </pre><p>こちらからは以上です。</p> <div class="section"> <h4>参考ページ</h4> <ul> <li><a href="http://kojika17.com/2013/03/kaomoji_selectors.html">CSSの変態向き - id, classを顔文字でコーディングする方法|Web Design KOJIKA17</a></li> <li><a href="http://momdo.s35.xrea.com/web-html-test/spec/html5-dev/dom.html#the-id-attribute">3.2.5.1 id属性 ― HTML5</a></li> <li><a href="http://momdo.s35.xrea.com/web-html-test/spec/html5-dev/dom.html#classes">3.2.5.7 class属性 ― HTML5</a></li> <li><a href="http://momdo.s35.xrea.com/web-html-test/spec/CSS21/syndata.html#characters">4.1.3 文字と活字ケース - CSS 2.1 spec (ja)</a></li> <li><a href="http://www.hcn.zaq.ne.jp/___/WEB/URL-ja.html">URL Standard (日本語訳)</a></li> <li><a href="http://www.studyinghttp.net/cgi-bin/rfc.cgi?3986">RFC 3986(日本語訳)</a></li> <li><a href="http://support.microsoft.com/kb/100108/ja">FAT、HPFS、NTFS ファイル システムについて</a>(<a class="keyword" href="http://d.hatena.ne.jp/keyword/Microsoft">Microsoft</a>)</li> </ul> </div> momdo 次の一手(何を訳出するかという意味で) hatenablog://entry/17680117127079413491 2014-02-17T00:00:00+09:00 2019-04-26T23:40:49+09:00 HTML5の4章はせめて通しで校正をかけておこうという縛りをかけてたりしますが、皆様いかがお過ごしでしょうか(謎)。まあ、次は何を訳出しようかなあ?という自分の頭の整理。Webアクセシビリティ・ファーストなんていう話もあるし、html5jに投げるならアクセシビリティに絡んだ仕様とかだとアクセシビリティ部からなんかフィードバックもらえるのかしら(?) The picture Element http://picture.responsiveimages.org/ HTML5拡張仕様。あんまり画像方面に興味がわかない… HTML5 Image Description Extension (long… <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>の4章はせめて通しで校正をかけておこうという縛りをかけてたりしますが、皆様いかがお過ごしでしょうか(謎)。</p><p>まあ、次は何を訳出しようかなあ?という自分の頭の整理。<a href="http://web.a11y1st.jp/">Webアクセシビリティ・ファースト</a>なんていう話もあるし、html5jに投げるなら<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%AF%A5%BB%A5%B7%A5%D3%A5%EA%A5%C6%A5%A3">アクセシビリティ</a>に絡んだ仕様とかだと<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%AF%A5%BB%A5%B7%A5%D3%A5%EA%A5%C6%A5%A3">アクセシビリティ</a>部からなんかフィードバックもらえるのかしら(?)</p> <dl> <dt>The picture Element</dt> <dd><a href="http://picture.responsiveimages.org/">http://picture.responsiveimages.org/</a></dd> </dl><p><a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>拡張仕様。あんまり画像方面に興味がわかない…</p> <dl> <dt><a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a> Image Description Extension (longdesc)</dt> <dd><a href="https://dvcs.w3.org/hg/html-proposals/raw-file/default/longdesc1/longdesc.html">https://dvcs.w3.org/hg/html-proposals/raw-file/default/longdesc1/longdesc.html</a></dd> </dl><p>こちらも<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>拡張仕様。<code>picture</code>要素よりかは面白そう。</p> <dl> <dt>Polyglot Markup: A robust profile of the <a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a> vocabulary</dt> <dd><a href="http://dev.w3.org/html5/html-polyglot/html-polyglot.html">http://dev.w3.org/html5/html-polyglot/html-polyglot.html</a></dd> </dl><p>HTMLとしても<a class="keyword" href="http://d.hatena.ne.jp/keyword/XML">XML</a>としても使えるポリグロット<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A1%BC%A5%AF%A5%A2%A5%C3%A5%D7">マークアップ</a>がうんたら。<a href="http://standards.mitsue.co.jp/resources/w3c/TR/html-polyglot/">Polyglot マークアップ: HTML 互換の XHTML 文書</a>の更新は止まっているので意義はあるけど、これEPUB3.0を見越さないと<a class="keyword" href="http://d.hatena.ne.jp/keyword/XHTML">XHTML</a>で書くとかあんまりないしなあ…。</p> <dl> <dt>HTML <a class="keyword" href="http://d.hatena.ne.jp/keyword/Microdata">Microdata</a></dt> <dd><a href="http://www.w3.org/TR/microdata/">http://www.w3.org/TR/microdata/</a></dd> </dl><p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Microdata">Microdata</a>とか誰か使ってるんですか案件。訳出する意味はあると思うけど。</p> <dl> <dt>Techniques for WCAG 2.0</dt> <dd><a href="http://www.w3.org/WAI/GL/2014/WD-WCAG20-TECHS-20140107/">http://www.w3.org/WAI/GL/2014/WD-WCAG20-TECHS-20140107/</a></dd> </dl><p>WAI-<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a>パートとか<a href="http://waic.jp/docs/WCAG-TECHS/Overview.html">WCAG 2.0 実装方法集(Techniques for WCAG 2.0 日本語訳)|WCAG 2.0 実装方法集</a>は訳出していないので、ここをWAI-<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a>理解の足場にするのもありかなとか。でもWAICが更新したらあんまり意味ないよね…。</p> <dl> <dt>Accessible Rich Internet Applications (WAI-<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a>) 1.0</dt> <dd><a href="http://www.w3.org/TR/wai-aria/">http://www.w3.org/TR/wai-aria/</a></dd> </dl><p>本家WAI-<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a>とか手を一瞬付けたけど、読みにくいのよねえこれ…。<a href="http://www.hitachi.co.jp/universaldesign/ria/ajax/wai-aria/wd_20090224/index.html">アクセシブル・リッチ・インターネット・アプリケーション(WAI-ARIA)1.0</a>とか更新されてないしたぶん更新する気がない(というかできなさそう)なので、狙い目ではあると思いますけどね。もうPRまで来ましたし、仕様の大幅変更はないとみて間違いない。</p> <dl> <dt><a class="keyword" href="http://d.hatena.ne.jp/keyword/Website">Website</a> Accessibility Conformance Evaluation Methodology (WCAG-EM) 1.0</dt> <dd><a href="http://www.w3.org/TR/WCAG-EM/">http://www.w3.org/TR/WCAG-EM/</a></dd> </dl><p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%AF%A5%BB%A5%B7%A5%D3%A5%EA%A5%C6%A5%A3">アクセシビリティ</a>の評価方法というのはまあ、興味深くはあり。</p><br /> <p>とまあ、訳すものはいろいろ(というかいくらでも)あったりはする。ま、<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>仕様の4章校正が終わらないことには手の付けようがないですよね…はーorz(オチはありません)。</p> momdo W3Cからいただきものをした hatenablog://entry/17680117127079413613 2014-02-11T00:00:00+09:00 2019-04-26T23:40:50+09:00 たくさんHTML5ステッカーをいただいちゃったんですが、どうしようこれ…(おろおろ)あらすじとしては、2月4日付でHTML5のCR仕様がアップデートされたので、いつものようにhtml5jのメーリングリスト(HTML5仕様の日本語訳を更新しました)に投げたところ、W3Cの中の人の目にとまったようです。HTML5のCRというステータスで、またweb deveploer向けの箇所のみの部分訳という状態にもかかわらず、W3C/KeioからHTML5 CR訳のごほうびとしてプレゼントをいただけるということなので、いただいたと言うのが上記の写真という次第であります。ただ貰うだけというのも悪いですので、Co… <p><span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/momdo/20140211121947" class="hatena-fotolife" itemprop="url"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/momdo/20140211/20140211121947.jpg" alt="f:id:momdo:20140211121947j:image" title="f:id:momdo:20140211121947j:image" class="hatena-fotolife" itemprop="image"></a></span></p><p>たくさん<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>ステッカーをいただいちゃったんですが、どうしようこれ…(おろおろ)</p><p>あらすじとしては、2月4日付で<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>のCR仕様がアップデートされたので、いつものようにhtml5jの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E1%A1%BC%A5%EA%A5%F3%A5%B0%A5%EA%A5%B9%A5%C8">メーリングリスト</a>(<a href="https://groups.google.com/forum/#!topic/html5-developers-jp/Nqf1JTa5WQ4">HTML5仕様の日本語訳を更新しました</a>)に投げたところ、<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a>の中の人の目にとまったようです。</p><p><a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>のCRというステータスで、またweb deveploer向けの箇所のみの部分訳という状態にもかかわらず、<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a>/Keioから<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a> CR訳のごほうびとしてプレゼントをいただけるということなので、いただいたと言うのが上記の写真という次第であります。</p><p>ただ貰うだけというのも悪いですので、<a href="http://lists.w3.org/Archives/Public/w3c-translators/2014JanMar/0027.html">Completed Japanese translation of CSS 2.1 and 'language-tags' from Momdo Nakamura</a>ということで、<a href="http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html">Cascading Style Sheets Level 2 Revision 1 (CSS&#160;2.1) Specification (ja)</a>と<a href="http://momdo.s35.xrea.com/web-html-test/spec/language-tags_2011-05-04.html">HTMLとXMLにおける言語タグ</a>を<a href="http://www.w3.org/Consortium/Translation/">W3C Translations</a>に申請しておきました。また、<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>についてもRECになれば申請します(それまで私が生きていれば…)。そのうち<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a>から日本語訳のリンクなりが張られると思います、たぶん。(この存在をいままで知らなかったと言うことはないのですが、なにせ私自身web業界とは無縁だったりする以上、本名を晒してネットで生きていく旨味もなく、匿名でごにょごにょやっているわけですが、別に<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a>の中の人が匿名でも構わないと言うことなので申請するに至った次第。)</p><p>最後に<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a>の中の人こと、<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a>/Keioの吉澤様、ありがとうございました。この場を借りてお礼申し上げます。</p> momdo XHTML5と文字参照 hatenablog://entry/17680117127079413715 2014-01-18T00:00:00+09:00 2019-04-26T23:40:52+09:00 結論から言うと、XHTML構文で名前文字参照(HTML4で言うところの文字実体参照)は使用を避けた方が良いかもしれない、と言う話。、リテラルに文字を書いたほうがよい(どうしてもというなら、数値実体参照で)、というお話。適当にぐぐって見つけたページ(XHTML5で実体参照を使う方法 - 泥のように)が大体合っていますが、微妙に舌足らずな気もするので一応メモ。もっとも、webでXHTML5を使うことは滅多にないと思うので、もっぱらEPUB3のリーディングシステム(≒WebKit?)でどうなるのか、ぐらいしか思いつきませんが。なお、XMLについてはよくわかっていないので全然あさってなことを書いている… <p>結論から言うと、<a class="keyword" href="http://d.hatena.ne.jp/keyword/XHTML">XHTML</a>構文で名前<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%B8%BB%FA%BB%B2%BE%C8">文字参照</a>(HTML4で言うところの文字<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BC%C2%C2%CE%BB%B2%BE%C8">実体参照</a>)は使用を避け<del datetime="2016-05-05T01:51:56+09:00">た方が良いかもしれない、と言う話。</del><ins datetime="2016-05-05T01:51:56+09:00">、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%C6%A5%E9%A5%EB">リテラル</a>に文字を書いたほうがよい(どうしてもというなら、数値<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BC%C2%C2%CE%BB%B2%BE%C8">実体参照</a>で)、というお話。</ins></p><p>適当にぐぐって見つけたページ(<a href="http://blog.tojiru.net/article/247824770.html">XHTML5で実体参照を使う方法 - 泥のように</a>)が大体合っていますが、微妙に舌足らずな気もするので一応メモ。もっとも、webでXHTML5を使うことは滅多にないと思うので、もっぱらEPUB3のリーディングシステム(≒<a class="keyword" href="http://d.hatena.ne.jp/keyword/WebKit">WebKit</a>?)でどうなるのか、ぐらいしか思いつきませんが。</p><p>なお、<a class="keyword" href="http://d.hatena.ne.jp/keyword/XML">XML</a>についてはよくわかっていないので全然あさってなことを書いているかもしれませんのであしからず。</p><p>本題に入る前にまず<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%B8%BB%FA%BB%B2%BE%C8">文字参照</a>(Character references)のおさらい。HTML4では、</p> <ul> <li>文字<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BC%C2%C2%CE%BB%B2%BE%C8">実体参照</a>(Character entity references)</li> <li>数値<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%B8%BB%FA%BB%B2%BE%C8">文字参照</a>(Numeric character references)</li> </ul><p>と呼ばれていたけれども<a href="#f-20edb2de" name="fn-20edb2de" title="5.3 文字参照 http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/charset.html#entities">*1</a> <a href="#f-d5636a09" name="fn-d5636a09" title="5.3 Character references http://www.w3.org/TR/html401/charset.html#h-5.3">*2</a>、<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>では、</p> <ul> <li>名前<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%B8%BB%FA%BB%B2%BE%C8">文字参照</a>(Named character references)</li> <li>10進数の数値<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%B8%BB%FA%BB%B2%BE%C8">文字参照</a>(Decimal numeric character reference)</li> <li>16進数の数値<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%B8%BB%FA%BB%B2%BE%C8">文字参照</a>(Hexadecimal numeric character reference)</li> </ul><p>と呼ばれている<a href="#f-f8a0f46d" name="fn-f8a0f46d" title="8.1.4 文字参照 http://momdo.github.io/html5/syntax.html#character-references">*3</a> <a href="#f-6a05a100" name="fn-6a05a100" title="8.1.4 Character references https://www.w3.org/TR/html5/syntax.html#character-references">*4</a>。数値<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%B8%BB%FA%BB%B2%BE%C8">文字参照</a>は10進と16進が存在することが明示され、文字<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BC%C2%C2%CE%BB%B2%BE%C8">実体参照</a>は名前<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BC%C2%C2%CE%BB%B2%BE%C8">実体参照</a>という呼び方になった。</p><p>さて、この"名前<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BC%C2%C2%CE%BB%B2%BE%C8">実体参照</a>"ですが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>は<a class="keyword" href="http://d.hatena.ne.jp/keyword/SGML">SGML</a>応用ではないので、<a class="keyword" href="http://d.hatena.ne.jp/keyword/DTD">DTD</a>に定義することなく仕様書そのものに名前<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BC%C2%C2%CE%BB%B2%BE%C8">実体参照</a>を定義すればよいわけです。実際<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>仕様では、<a href="http://momdo.github.io/html5/syntax.html#named-character-references">8.5 名前文字参照</a>にすべて列挙されています。ところが、XHTML5は<strong><a class="keyword" href="http://d.hatena.ne.jp/keyword/DTD">DTD</a>が存在しない</strong>ので、XML1.0仕様で定義されている<code>&amp;lt;</code>、<code>&amp;gt;</code>、<code>&amp;amp;</code>、<code>&amp;apos;</code>、<code>&amp;quot;</code><a href="#f-9448d3b7" name="fn-9448d3b7" title="4.6 定義済み実体 Predefined Entities http://w4ard.eplusx.net/translation/W3C/REC-xml-20081126/#sec-predefined-ent 4.1 文字参照と実体参照 Character and Entity References http://w4ard.eplusx.net/translation/W3C/REC-xml-20081126/#sec-references">*5</a>以外の名前<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BC%C2%C2%CE%BB%B2%BE%C8">実体参照</a>は整形式性制約に違反する(はず<a href="#f-b57f3118" name="fn-b57f3118" title="たぶんそういうことなんだと思うけど、間違っているかもしれない">*6</a>)。なので、少なくとも<a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a>ではエラーとして報告される。</p><p>具体的には、</p> <pre class="code lang-xhtml" data-lang="xhtml" data-unlink><span class="synComment">&lt;!DOCTYPE html&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">html</span><span class="synIdentifier"> xmlns=</span><span class="synConstant">&quot;http://www.w3.org/1999/xhtml&quot;</span><span class="synIdentifier"> xml:</span><span class="synType">lang</span><span class="synIdentifier">=</span><span class="synConstant">&quot;ja&quot;</span><span class="synIdentifier"> </span><span class="synType">lang</span><span class="synIdentifier">=</span><span class="synConstant">&quot;ja&quot;</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">head</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">meta</span><span class="synIdentifier"> </span><span class="synType">charset</span><span class="synIdentifier">=</span><span class="synConstant">&quot;utf-8&quot;</span><span class="synIdentifier"> /&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">title</span><span class="synIdentifier">&gt;</span>文字参照の検証テスト<span class="synIdentifier">&lt;/</span><span class="synStatement">title</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;/</span><span class="synStatement">head</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">body</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">p</span><span class="synIdentifier">&gt;</span>test <span class="synSpecial">&amp;copy;</span><span class="synIdentifier">&lt;/</span><span class="synStatement">p</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;/</span><span class="synStatement">body</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;/</span><span class="synStatement">html</span><span class="synIdentifier">&gt;</span> </pre><p>とでもして、拡張子.<a class="keyword" href="http://d.hatena.ne.jp/keyword/xhtml">xhtml</a>あたりで保存して(<code>application/xhtml+xml</code>になるようにして)<a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a>で見てみると、</p><p><span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/momdo/20140117233120" class="hatena-fotolife" itemprop="url"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/momdo/20140117/20140117233120.png" alt="f:id:momdo:20140117233120p:image" title="f:id:momdo:20140117233120p:image" class="hatena-fotolife" itemprop="image"></a></span></p><p>といった具合で<a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a>では怒られる。ではどうするか?というと</p> <ol> <li>DOCTYPE宣言の中に宣言を直接書く</li> <li>DOCTYPE宣言で<a class="keyword" href="http://d.hatena.ne.jp/keyword/DTD">DTD</a>を読み込ませる</li> </ol><p>あたりが解決方法になるだろう(<a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a><em>では</em>一応問題ない)。なお、<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>仕様は、</p> <blockquote cite="http://momdo.github.io/html5/the-xhtml-syntax.html#the-xhtml-syntax"> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/XML">XML</a>文書は必要に応じて<code>DOCTYPE</code>が含んでもよいが、DOCTYPEはこの仕様に準拠する必要はない。この仕様は、公開またはシステム識別子を定義せず、公式な<a class="keyword" href="http://d.hatena.ne.jp/keyword/DTD">DTD</a>も提供しない。</p> <cite><a href="http://momdo.github.io/html5/the-xhtml-syntax.html#the-xhtml-syntax">9 The XHTML syntax &#x2015; HTML5 &#x65E5;&#x672C;&#x8A9E;&#x8A33;</a></cite> </blockquote> <p>と言っているので、<code>&lt;!DOCTYPE html&gt;</code>に(XML1.0使用の範囲で)自由に付け足ししていいはず。</p> <div class="section"> <h4>DOCTYPE宣言の中に宣言を直接書く</h4> <p>たとえば以下のように宣言してしまう。</p> <pre class="code lang-xml" data-lang="xml" data-unlink><span class="synIdentifier">&lt;!</span><span class="synStatement">DOCTYPE</span> html <span class="synIdentifier">[</span> <span class="synIdentifier">&lt;!</span><span class="synStatement">ENTITY</span> copy <span class="synConstant">&quot;</span><span class="synType">&amp;</span><span class="synStatement">#x000A9</span><span class="synType">;</span><span class="synConstant">&quot;</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">]&gt;</span> </pre><p>これで<a class="keyword" href="http://d.hatena.ne.jp/keyword/XML">XML</a>として正しく<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%B8%BB%FA%BB%B2%BE%C8">文字参照</a>を解決できるけれども、いちいち必要な名前<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%B8%BB%FA%BB%B2%BE%C8">文字参照</a>を列挙しなければならないので面倒、と。</p> </div> <div class="section"> <h4>DOCTYPE宣言で<a class="keyword" href="http://d.hatena.ne.jp/keyword/DTD">DTD</a>を読み込ませる</h4> <p><a href="http://www.w3.org/TR/xhtml-pubid/">Public Identifiers for entity resolution in XHTML</a>(この記事を書いた時点ではWorking Draft。2016年5月に編集時点では放棄されたNoteであることに注意)で示唆されるように、</p> <pre class="code lang-xml" data-lang="xml" data-unlink><span class="synIdentifier">&lt;!</span><span class="synStatement">DOCTYPE</span> html <span class="synStatement">PUBLIC</span> <span class="synConstant">&quot;-//W3C//ENTITIES HTML MathML Set//EN//XML&quot;</span> <span class="synConstant">&quot;http://www.w3.org/2003/entities/2007/htmlmathml-f.ent&quot;</span><span class="synIdentifier">&gt;</span> </pre><p>と、参照の宣言を全部読み込ませてしまう。ただし、IE11やGoogle Chrome32だと文字が出なかったり、エラーが出たりするので実用的ではない…。</p><p><span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/momdo/20140118005739" class="hatena-fotolife" itemprop="url"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/momdo/20140118/20140118005739.png" alt="f:id:momdo:20140118005739p:image" title="f:id:momdo:20140118005739p:image" class="hatena-fotolife" itemprop="image"></a></span><br /> <span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/momdo/20140118005740" class="hatena-fotolife" itemprop="url"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/momdo/20140118/20140118005740.png" alt="f:id:momdo:20140118005740p:image" title="f:id:momdo:20140118005740p:image" class="hatena-fotolife" itemprop="image"></a></span><br /> </p> </div> <div class="section"> <h4>まとめ?</h4> <p>XHTML5において、<a class="keyword" href="http://d.hatena.ne.jp/keyword/XML">XML</a>の文法上正しく処理させようとするのは手間がかかるまたはウェブブラウザの対応が怪しいため、名前<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%B8%BB%FA%BB%B2%BE%C8">文字参照</a>を避けて<ins datetime="2016-05-05T01:51:56+09:00"><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%C6%A5%E9%A5%EB">リテラル</a>に文字を記述するかそれが難しいのであれば</ins>数値<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%B8%BB%FA%BB%B2%BE%C8">文字参照</a>を代わりに使用したほうがよい。<br /> <br /> </p> </div> <div class="section"> <h4>参考文書</h4> <ul> <li><del datetime="2018-10-30T22:43:35+09:00"><a href="http://www3.fctv.ne.jp/~takamu/xml-entity-names-ja/">文字に対するXML実体の定義(XML Entity Definitions for Characters 日本語版)</a></del></li> <li><ins datetime="2018-10-30T22:43:35+09:00"><a href="http://takamu.sakura.ne.jp/xml-entity-names-ja/">文字に対するXML実体の定義(第2版) (XML Entity Definitions for Characters (2nd Edition) 日本語版)</a></ins></li> <li><a href="http://www.atmarkit.co.jp/fxml/rensai/w3cread22/w3cread22_1.html">@IT:やさしく読む「XML 1.0勧告」 第22回 物理構造における「文字参照」と「実体参照」 Page 1</a></li> </ul> </div><div class="footnote"> <p class="footnote"><a href="#fn-20edb2de" name="f-20edb2de" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">5.3 <a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%B8%BB%FA%BB%B2%BE%C8">文字参照</a> <a href="http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/charset.html#entities">http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/charset.html#entities</a></span></p> <p class="footnote"><a href="#fn-d5636a09" name="f-d5636a09" class="footnote-number">*2</a><span class="footnote-delimiter">:</span><span class="footnote-text">5.3 Character references <a href="http://www.w3.org/TR/html401/charset.html#h-5.3">http://www.w3.org/TR/html401/charset.html#h-5.3</a></span></p> <p class="footnote"><a href="#fn-f8a0f46d" name="f-f8a0f46d" class="footnote-number">*3</a><span class="footnote-delimiter">:</span><span class="footnote-text">8.1.4 <a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%B8%BB%FA%BB%B2%BE%C8">文字参照</a> <a href="http://momdo.github.io/html5/syntax.html#character-references">http://momdo.github.io/html5/syntax.html#character-references</a></span></p> <p class="footnote"><a href="#fn-6a05a100" name="f-6a05a100" class="footnote-number">*4</a><span class="footnote-delimiter">:</span><span class="footnote-text">8.1.4 Character references <a href="https://www.w3.org/TR/html5/syntax.html#character-references">https://www.w3.org/TR/html5/syntax.html#character-references</a></span></p> <p class="footnote"><a href="#fn-9448d3b7" name="f-9448d3b7" class="footnote-number">*5</a><span class="footnote-delimiter">:</span><span class="footnote-text">4.6 定義済み実体 Predefined Entities <a href="http://w4ard.eplusx.net/translation/W3C/REC-xml-20081126/#sec-predefined-ent">http://w4ard.eplusx.net/translation/W3C/REC-xml-20081126/#sec-predefined-ent</a> 4.1 <a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%B8%BB%FA%BB%B2%BE%C8">文字参照</a>と<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BC%C2%C2%CE%BB%B2%BE%C8">実体参照</a> Character and Entity References <a href="http://w4ard.eplusx.net/translation/W3C/REC-xml-20081126/#sec-references">http://w4ard.eplusx.net/translation/W3C/REC-xml-20081126/#sec-references</a></span></p> <p class="footnote"><a href="#fn-b57f3118" name="f-b57f3118" class="footnote-number">*6</a><span class="footnote-delimiter">:</span><span class="footnote-text">たぶんそういうことなんだと思うけど、間違っているかもしれない</span></p> </div> momdo developers.whatwg.orgを生成するスクリプトと大乱闘した hatenablog://entry/17680117127079414013 2013-12-31T00:00:00+09:00 2019-04-26T23:40:55+09:00 大晦日だというのに何やってるんですかね(しろめ さて、WHATWGのHTML仕様であるHTML Living Standard(HTMLLS)については今更説明不要だと思いますが、このHTMLLSにはWeb developer edition用意されています(HTML: The Living Standard - Edition for Web Developers)で、このWeb developer editionですが、困ったことに日付が無い。つまり、いつ作ったものなのかいまいちわからない、と。この記事を書いている時点では2013年11月11日に更新されているので、HTMLLSから1ヶ月ほ… <p>大<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B3%A2%C6%FC">晦日</a>だというのに何やってるんですかね(しろめ<br /> さて、<a class="keyword" href="http://d.hatena.ne.jp/keyword/WHATWG">WHATWG</a>のHTML仕様である<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/">HTML Living Standard</a>(HTMLLS)については今更説明不要だと思いますが、このHTMLLSには<a class="keyword" href="http://d.hatena.ne.jp/keyword/Web%20developer">Web developer</a> edition用意されています(<a href="http://developers.whatwg.org/">HTML: The Living Standard - Edition for Web Developers</a>)</p><p>で、この<a class="keyword" href="http://d.hatena.ne.jp/keyword/Web%20developer">Web developer</a> editionですが、困ったことに日付が無い。つまり、いつ作ったものなのかいまいちわからない、と。この記事を書いている時点では2013年11月11日に更新されているので、HTMLLSから1ヶ月ほどズレてると。で、ページの下の方を見ると<a class="keyword" href="http://d.hatena.ne.jp/keyword/GitHub">GitHub</a>でこのページを生成されている<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8">スクリプト</a>が公開されているわけですね(<a href="https://github.com/benschwarz/developers.whatwg.org">benschwarz/developers.whatwg.org &#183; GitHub</a>)。試しに動かしてみようと思ったら、ものすごいハマったのでメモ(あまりにいろいろと格闘したので、本当に再現できるのか怪しいけど。そして、思いつくままに入れたので、本当はもっとスマートに動かせるはず)。</p><p>ちなみに環境は、<a class="keyword" href="http://d.hatena.ne.jp/keyword/VirtualBox">VirtualBox</a>上の<a class="keyword" href="http://d.hatena.ne.jp/keyword/Debian">Debian</a> Stable(<a class="keyword" href="http://d.hatena.ne.jp/keyword/Debian">Debian</a> 7.3 / wheezy)。<br /> <br /> </p> <div class="section"> <h4>0. 最初に「Download ZIP」からダウンロードしておく</h4> <p>gitとかわかんないんです、すみませんすみませんorz<br /> <a href="https://github.com/benschwarz/developers.whatwg.org">benschwarz/developers.whatwg.org &#183; GitHub</a>に<a class="keyword" href="http://d.hatena.ne.jp/keyword/Iceweasel">Iceweasel</a>でアクセス、ダウンロードして<a class="keyword" href="http://d.hatena.ne.jp/keyword/Nautilus">Nautilus</a>で解凍するという非常にぬるい方法ですが石を投げないでください…</p> </div> <div class="section"> <h4>1. まず<a class="keyword" href="http://d.hatena.ne.jp/keyword/ruby">ruby</a>、subverionを入れる</h4> <pre class="code" data-lang="" data-unlink># aptitude install ruby subversion</pre><p>ちなみにpython2.7は最初から入ってた。なお、python3系列はまるで別物という噂を聞いたがそれはまあ置いておく。</p> </div> <div class="section"> <h4>2. pip install -r requirements.txtへの道</h4> <p>はじめて<a class="keyword" href="http://d.hatena.ne.jp/keyword/Python">Python</a>を触ったんでさっぱりわかりませんでしたがまあ<a class="keyword" href="http://d.hatena.ne.jp/keyword/Google%C0%E8%C0%B8">Google先生</a>にお伺いを立てると、<a href="http://www.lifewithpython.com/2012/11/Python-package-setuptools-pip.html">Pythonで一番最初に入れるべきパッケージ setuptools と pip - Life with Python</a>とか、<a href="http://www.freia.jp/taka/docs/pyhack4/setuptools/index.html">setuptools - 清水川Web</a>とか言うことらしい。</p><p><a href="https://pypi.python.org/pypi/distribute/0.7.3">distribute</a>をこれまたブラウザで落としておいて、解凍した後、</p> <pre class="code" data-lang="" data-unlink># python setup.py install</pre><p>をしておく。それから、</p> <pre class="code" data-lang="" data-unlink># easy_install pip # pip install -r requirements.txt</pre><p>と。(まあ、後で振り返るとこれが本当に意味があったのかは謎だという)。</p> </div> <div class="section"> <h4>3. gem、gemをする。</h4> <p>まあ、<a class="keyword" href="http://d.hatena.ne.jp/keyword/ruby">ruby</a>とかもはじめて触ったんでパッケージシステムとかさっぱりわかってないわけですよええ。<br /> もうエラーログを流してしまったので正確なエラーメッセージを失念しましたがこの時点で<code>make</code>すると、<code>bundler</code>がないって怒られるんですよね。まあ、readmeに<code>bundle install</code>って書いてあるのを見落としてたわけですが、<code>gem</code>とはどこにも書いてないわけでして…。てきとーにぐぐって<a href="http://qiita.com/znz/items/5471e5826fde29fa9a80">Ruby - ツールを使いたいだけの人のための bundler 入門 (例: vagrant + veewee) - Qiita [キータ]</a>で、<code>gem</code>の存在を知りました。</p> <pre class="code" data-lang="" data-unlink># gem install bundler</pre><p>これで必要なものすみましたね、さあこんどこそ<code>make</code>通るかなと思ったらこれがなかなか…。</p> <pre class="code" data-lang="" data-unlink># bundle install yui-compressor</pre><p>ここで<code>gem</code>に<code>gem install rake -v '10.0.0'</code>しろとか怒られました。(まあ、<code>bundle install</code>が回り道だったような気がする、今にして思えば。)</p> <pre class="code" data-lang="" data-unlink># gem install rake -v &#39;10.0.0&#39;</pre><p>さらに<a class="keyword" href="http://d.hatena.ne.jp/keyword/ruby">ruby</a><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8">スクリプト</a>が<code>json</code>を要求してきます。</p> <pre class="code" data-lang="" data-unlink># gem install json</pre><p>が、これが通らない…どうやら<a href="http://hashikure.blogspot.com/2013/05/ruby-gem-scrubyt-cannot-load-such-file.html">はしくれ: Ruby Gem scrubyt "cannot load such file -- mkmf (LoadError)"</a>こういうことらしくて、<code>apt</code>のほうで<code>ruby-dev</code>を入れる必要があると。</p> <pre class="code" data-lang="" data-unlink># aptitude install ruby-dev</pre><p>これで<code>json</code>を入れられるのですが、なんと<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8">スクリプト</a>の方でバージョンを決め打ちしているようです…つまり、</p> <pre class="code" data-lang="" data-unlink># gem install json -v &#39;1.4.6&#39;</pre><p>としないと、<a class="keyword" href="http://d.hatena.ne.jp/keyword/ruby">ruby</a><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8">スクリプト</a>が動いてくれないという…。<code>make</code>しながら要求されるものを随時入れていきます。</p> <pre class="code" data-lang="" data-unlink># gem install nokogiri -v &#39;1.5.5&#39;</pre><p><code>gem</code>が通らない…あ、<code>libxml2</code>を入れ忘れ。</p> <pre class="code" data-lang="" data-unlink># aptitude install libxml2-dev</pre><p>さらに<code>libxslt</code>も要求されます。</p> <pre class="code" data-lang="" data-unlink># aptitude install libxslt-dev</pre><p>これで<code>nokogiri</code>がインストールできます。</p> <pre class="code" data-lang="" data-unlink># gem install nokogiri -v &#39;1.5.5&#39;</pre><p>さらに<code>gem</code>でいれていく。(実際にはもっと試行錯誤してる。)</p> <pre class="code" data-lang="" data-unlink># gem install peach -v &#39;0.4&#39; # gem install rack -v &#39;1.2.1&#39; # gem install sass -v &#39;3.1.0.alpha.214&#39; # gem install yui-compressor -v &#39;0.9.1&#39;</pre><p>これで<a class="keyword" href="http://d.hatena.ne.jp/keyword/ruby">ruby</a>は一応通りますっ。</p> </div> <div class="section"> <h4>4. さらにmakeに必要なものを入れておく</h4> <p>まあ、<code>make</code>ファイルを先に確認しておけよって話なんですがね、、。</p> <pre class="code" data-lang="" data-unlink># aptitude install curl</pre><p><code>hg</code>が無いって言われて<code>aptitude search</code>しても引っかかりません(涙目<br /> これは<code>mercurial</code>のことだそうで…(無知丸出し</p> <pre class="code" data-lang="" data-unlink># aptitude install mercurial</pre> </div> <div class="section"> <h4>5. <a class="keyword" href="http://d.hatena.ne.jp/keyword/python">python</a>方面でこける</h4> <p><code>lxml</code>がねーぞゴルァと怒られる…。</p> <pre class="code" data-lang="" data-unlink># easy_install lxml</pre><p>というのは嘘でーすorz</p> <pre class="code" data-lang="" data-unlink># aptitude install python-lxml</pre><p>です、こっちが正解(わかるかボケ<br /> <code>html5lib</code>も要求されます。</p> <pre class="code" data-lang="" data-unlink># aptitude install python-html5lib</pre><p>いやもうね、アホかと。<code>requirements.txt</code>の中身って</p> <pre class="code" data-lang="" data-unlink>html5lib cssselect lxml mercurial</pre><p>とか書いてあるんですが、本当に意味あるのか?とね(まあ私がわかってない可能性大ですが。もしかしたら途中から別<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%A3%A5%EC%A5%AF%A5%C8">ディレクト</a>リで作業したせいかも<br /> これで<a class="keyword" href="http://d.hatena.ne.jp/keyword/python">python</a>も通って\無事に動きます/</p> </div> <div class="section"> <h4>6. publicの中身</h4> <p><code>/public</code>に中身ができあがりますが、生成されたHTMLになぜか<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%BF%A5%A4%A5%EB%A5%B7%A1%BC%A5%C8">スタイルシート</a>が当たらないという盛大な罠が。</p><p>頭抱えていたところ</p> <blockquote> <p><script> window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); t._e = []; t.ready = function(f) { t._e.push(f); }; return t; }(document, "script", "twitter-wjs"));</script><script> twttr.ready(function (twttr) { var el = document.getElementsByClassName('twitter-syntax-tweet-id-417695701053624320'); for (var i=0;i<el.length;i++) { if (!!el[i].getAttribute('data-is-tweet-loaded')){ continue; } el[i].setAttribute('data-is-tweet-loaded', '1'); twttr.widgets.createTweet('417695701053624320',el[i],{}); } });</script><div class="twitter-syntax-tweet-id-417695701053624320"></div>tree</p> </blockquote> <p><a href="https://twitter.com/ERRORJP">@ERRORJP</a>さん、あなたが神か。(この場を借りてお礼申し上げます)<br /> 生成されたHTMLを見ると、</p> <pre class="code lang-html" data-lang="html" data-unlink><span class="synIdentifier">&lt;</span><span class="synStatement">link</span><span class="synIdentifier"> </span><span class="synType">href</span><span class="synIdentifier">=</span><span class="synConstant">&quot;/css/all.css&quot;</span><span class="synIdentifier"> </span><span class="synType">rel</span><span class="synIdentifier">=</span><span class="synConstant">&quot;stylesheet&quot;</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">link</span><span class="synIdentifier"> </span><span class="synType">href</span><span class="synIdentifier">=</span><span class="synConstant">&quot;/css/desktop.css&quot;</span><span class="synIdentifier"> </span><span class="synType">rel</span><span class="synIdentifier">=</span><span class="synConstant">&quot;stylesheet&quot;</span><span class="synIdentifier"> </span><span class="synType">media</span><span class="synIdentifier">=</span><span class="synConstant">&quot;screen and (min-width: 960px)&quot;</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">link</span><span class="synIdentifier"> </span><span class="synType">href</span><span class="synIdentifier">=</span><span class="synConstant">&quot;/css/handheld.css&quot;</span><span class="synIdentifier"> </span><span class="synType">rel</span><span class="synIdentifier">=</span><span class="synConstant">&quot;stylesheet&quot;</span><span class="synIdentifier"> </span><span class="synType">media</span><span class="synIdentifier">=</span><span class="synConstant">&quot;screen and (max-width: 959px)&quot;</span><span class="synIdentifier">&gt;</span> </pre><p>と<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C0%E4%C2%D0%A5%D1%A5%B9">絶対パス</a>指定されているので、そりゃデスヨネー、と。</p> <pre class="code lang-html" data-lang="html" data-unlink><span class="synIdentifier">&lt;</span><span class="synStatement">link</span><span class="synIdentifier"> </span><span class="synType">href</span><span class="synIdentifier">=</span><span class="synConstant">&quot;css/all.css&quot;</span><span class="synIdentifier"> </span><span class="synType">rel</span><span class="synIdentifier">=</span><span class="synConstant">&quot;stylesheet&quot;</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">link</span><span class="synIdentifier"> </span><span class="synType">href</span><span class="synIdentifier">=</span><span class="synConstant">&quot;css/desktop.css&quot;</span><span class="synIdentifier"> </span><span class="synType">rel</span><span class="synIdentifier">=</span><span class="synConstant">&quot;stylesheet&quot;</span><span class="synIdentifier"> </span><span class="synType">media</span><span class="synIdentifier">=</span><span class="synConstant">&quot;screen and (min-width: 960px)&quot;</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">link</span><span class="synIdentifier"> </span><span class="synType">href</span><span class="synIdentifier">=</span><span class="synConstant">&quot;css/handheld.css&quot;</span><span class="synIdentifier"> </span><span class="synType">rel</span><span class="synIdentifier">=</span><span class="synConstant">&quot;stylesheet&quot;</span><span class="synIdentifier"> </span><span class="synType">media</span><span class="synIdentifier">=</span><span class="synConstant">&quot;screen and (max-width: 959px)&quot;</span><span class="synIdentifier">&gt;</span> </pre><p>と<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C1%EA%C2%D0%A5%D1%A5%B9">相対パス</a>にしてめでたしめでたし。</p> </div> <div class="section"> <h4>まとめ(暫定版)</h4> <p>まあ、追試していないのでこれで動くのかどうかわかりませんが、<code>apt</code>で入れておくものは</p> <pre class="code" data-lang="" data-unlink># aptitude install ruby subversion curl mercurial ruby-dev python-lxml python-html5lib libxml2-dev libxslt-dev</pre><p><a class="keyword" href="http://d.hatena.ne.jp/keyword/ruby">ruby</a>の<code>gem</code>で入れておくものは、</p> <pre class="code" data-lang="" data-unlink># gem install bundler # gem install rake -v &#39;10.0.0&#39; # gem install json -v &#39;1.4.6&#39; # gem install nokogiri -v &#39;1.5.5&#39; # gem install peach -v &#39;0.4&#39; # gem install rack -v &#39;1.2.1&#39; # gem install sass -v &#39;3.1.0.alpha.214&#39; # gem install yui-compressor -v &#39;0.9.1&#39;</pre><p>いやしかしなぜかバージョン固定させられたあたりは、何かしら間違っているのかもしれない。ここは<a class="keyword" href="http://d.hatena.ne.jp/keyword/ruby">ruby</a>使いに聞いてみないとわからない…。<br /> あと<a class="keyword" href="http://d.hatena.ne.jp/keyword/python">python</a>側は2.の作業をしておけばいいのでは無いかと(これも<a class="keyword" href="http://d.hatena.ne.jp/keyword/python">python</a>使いに聞いてみたいよなぁ…<code>libxml2-dev</code>とか事前に入れてなかったせい?)。</p> </div> <div class="section"> <h4>で、何がしたかったの?</h4> <p>そりゃあ<a class="keyword" href="http://d.hatena.ne.jp/keyword/WHATWG">WHATWG</a> HTMLLS(ウェブ開発者版)の翻訳に取りかかるってことでしょう?(ぉ?</p><p>ヾ(〃l _ l)ノ゙よいお年を</p> </div> momdo Re2: リンクのすぐそばにアイコンをつけるCSS hatenablog://entry/17680117127079414285 2013-12-30T00:00:00+09:00 2019-04-26T23:40:58+09:00 リンクのすぐそばにアイコンをつけるCSS - 血統の森+はてな Re: リンクのすぐそばにアイコンをつけるCSS | 富永日記帳 3か月遅れのレスポンス。もともとのネタとしては、リンクのすぐそばにつける(たとえばPDFがPDFであるとわかるような)アイコンとして、 /* before */ a[href$=".pdf"] { background: url(image/pdf.gif) no-repeat 100% 50%; /* 背景を一度だけリンクの後ろ側に持ってくる */ padding: 4px 20px 4px 0; /* 余白を上下と左に取る */ } /* after - 疑似要… <ul> <li><a href="http://d.hatena.ne.jp/momdo/20130913/p1">リンクのすぐそばにアイコンをつけるCSS - 血統の森+はてな</a></li> <li><a href="http://w0s.jp/diary/298">Re: リンクのすぐそばにアイコンをつけるCSS | 富永日記帳</a></li> </ul><p>3か月遅れのレスポンス。</p><p>もともとのネタとしては、リンクのすぐそばにつける(たとえばPDFがPDFであるとわかるような)アイコンとして、</p> <pre class="code lang-css" data-lang="css" data-unlink><span class="synComment">/* before */</span> <span class="synStatement">a</span><span class="synSpecial">[</span><span class="synConstant">href</span><span class="synSpecial">$=</span><span class="synConstant">&quot;.pdf&quot;</span><span class="synSpecial">]</span> <span class="synIdentifier">{</span> <span class="synType">background</span>: <span class="synIdentifier">url(</span><span class="synConstant">image/pdf.gif</span><span class="synIdentifier">)</span> <span class="synConstant">no-repeat</span> <span class="synConstant">100%</span> <span class="synConstant">50%</span>; <span class="synComment">/* 背景を一度だけリンクの後ろ側に持ってくる */</span> <span class="synType">padding</span>: <span class="synConstant">4px</span> <span class="synConstant">20px</span> <span class="synConstant">4px</span> <span class="synConstant">0</span>; <span class="synComment">/* 余白を上下と左に取る */</span> <span class="synIdentifier">}</span> <span class="synComment">/* after - 疑似要素で書いてみる */</span> <span class="synStatement">a</span><span class="synSpecial">[</span><span class="synConstant">href</span><span class="synSpecial">$=</span><span class="synConstant">&quot;.pdf&quot;</span><span class="synSpecial">]</span>:<span class="synPreProc">after</span> <span class="synIdentifier">{</span> <span class="synType">content</span>: <span class="synIdentifier">url(</span><span class="synConstant">image/pdf.gif</span><span class="synIdentifier">)</span>; <span class="synType">padding</span>: <span class="synConstant">4px</span> <span class="synConstant">20px</span> <span class="synConstant">4px</span> <span class="synConstant">0</span>; <span class="synIdentifier">}</span> </pre><p>の方がすっきりするよね、というお話。</p> <blockquote cite="http://w0s.jp/diary/298"> <p>プロパティの選択については同意見ですが、私は以下のように考えています。</p> <ul> <li>拡張子で判定するのは望ましくない</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>で表現するよりも、サーバーサイドや <a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a> でimg要素を挿入した方がより良い</li> </ul><p>拡張子の件については、PDFの拡張子が .pdf とは限らないからです。.xls に対する .xlsx のように新しい拡張子が将来出現しないとも限りませんし、サーバーサイドで動的に生成する場合など拡張子がないケースも存在します。そのため、PDFのリンクには type="application/pdf" や class="pdf" を付けるなどPDFであることを明示した方がより良いと思います。<br /> もちろん既存ページに対して<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>改修のみでアイコンを付ける場合など、拡張子で判定せざるを得ないケースはあると思いますが。<br /> また、 background-image にしろ content にしろ、<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>では代替テキストが設定できないという問題があるため、アイコンはimg要素で挿入した方が良いと思います。</p> <cite><a href="http://w0s.jp/diary/298">Re: &#x30EA;&#x30F3;&#x30AF;&#x306E;&#x3059;&#x3050;&#x305D;&#x3070;&#x306B;&#x30A2;&#x30A4;&#x30B3;&#x30F3;&#x3092;&#x3064;&#x3051;&#x308B;CSS | &#x5BCC;&#x6C38;&#x65E5;&#x8A18;&#x5E33;</a></cite> </blockquote> <p>まず1つ目について。確かに指摘のように、拡張子で判定するのが望ましいかというと、決してそうではないでしょう。だからと言って<a class="keyword" href="http://d.hatena.ne.jp/keyword/MIME">MIME</a>タイプで判定できるか?というとそれも微妙です。今回の件とは若干毛色が違うものですが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>.1では<code>input</code>要素の<code>type=file</code>でファイルの種類について次のような記述があります。</p> <blockquote cite="http://momdo.s35.xrea.com/web-html-test/spec/WD-html51-20131029/forms.html#file-upload-state-(type=file)"> <p>拡張子は曖昧になる傾向があり(たとえば、".dat"拡張子を使用する莫大な数のフォーマットが存在しており、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Microsoft">Microsoft</a> Wordの文書でない場合でも、ユーザーは通常、非常に簡単に".doc"という拡張子を持つファイル名に変更できる)、そして<a class="keyword" href="http://d.hatena.ne.jp/keyword/MIME">MIME</a>タイプは信頼性が低くなる傾向がある(たとえば、多くのフォーマットは正式に登録された型を持たず、実際に多くのフォーマットが多数の異なる<a class="keyword" href="http://d.hatena.ne.jp/keyword/MIME">MIME</a>タイプを用いて識別される)。ユーザーが敵対的でなく、ユーザーエージェントが完全にaccept属性の要件に従った場合であっても、それが予期されたフォーマットでないかもしれないので、著者は通常、クライアントから受信したデータが慎重に扱われるべきであることに注意する。</p> <cite><a href="http://momdo.s35.xrea.com/web-html-test/spec/WD-html51-20131029/forms.html#file-upload-state-(type=file)">4.10.7.1.18 File Upload&#x72B6;&#x614B;&#xFF08;type=file&#xFF09; &#x2015; HTML 5.1</a></cite> </blockquote> <p>とまあ、<a class="keyword" href="http://d.hatena.ne.jp/keyword/MIME">MIME</a>タイプが登録されているようなファイルフォーマットであれば、<a class="keyword" href="http://d.hatena.ne.jp/keyword/MIME">MIME</a>タイプで判別しても良いでしょうが、なければ判別できないという事態もありえます。また、<a class="keyword" href="http://d.hatena.ne.jp/keyword/MIME">MIME</a>タイプで判定するにも、たとえば<a href="http://blogs.msdn.com/b/vsofficedeveloper/archive/2008/05/08/office-2007-open-xml-mime-types.aspx">Office 2007 File Format MIME Types for HTTP Content Streaming</a>(blogs.<a class="keyword" href="http://d.hatena.ne.jp/keyword/msdn">msdn</a>.com)あたりを見ればわかりますが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/MS%20Office">MS Office</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/MIME">MIME</a>タイプって糞長ったらしくて、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Excel">Excel</a>のOpenXML形式だと、</p> <pre class="code lang-html" data-lang="html" data-unlink><span class="synIdentifier">&lt;</span><span class="synStatement">style</span><span class="synIdentifier">&gt;</span> <span class="synComment">/* こんなセレクタはいやだ */</span> <span class="synStatement">a</span><span class="synSpecial">[</span><span class="synConstant">type</span><span class="synSpecial">$=</span><span class="synConstant">&quot;openxmlformats-officedocument.spreadsheetml.sheet&quot;</span><span class="synSpecial">]</span>:<span class="synPreProc">after</span> <span class="synIdentifier">{</span> <span class="synType">content</span>: <span class="synIdentifier">url(</span><span class="synConstant">image/excel.gif</span><span class="synIdentifier">)</span>; <span class="synType">padding</span>: <span class="synConstant">4px</span> <span class="synConstant">20px</span> <span class="synConstant">4px</span> <span class="synConstant">0</span>; <span class="synIdentifier">}</span> <span class="synIdentifier">&lt;/</span><span class="synStatement">style</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">a</span><span class="synIdentifier"> </span><span class="synType">href</span><span class="synIdentifier">=</span><span class="synConstant">&quot;example&quot;</span><span class="synIdentifier"> </span><span class="synType">type</span><span class="synIdentifier">=</span><span class="synConstant">&quot;application/vnd.openxmlformats-officedocument.spreadsheetml.sheet&quot;</span><span class="synIdentifier">&gt;</span><span class="synUnderlined">Excelファイルでダウンロード</span><span class="synIdentifier">&lt;/</span><span class="synStatement">a</span><span class="synIdentifier">&gt;</span> <span class="synComment">&lt;!-- 拡張子のないMS Excelファイルとかまず無さそうだけど。 --&gt;</span> </pre><p>とかスマートなHTMLとは思えないし、こんなのを書きたくないなあと(<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BB%A5%EC%A5%AF%A5%BF">セレクタ</a>はもっと短くできるかもですが、<code>type</code>属性は妥当な<a class="keyword" href="http://d.hatena.ne.jp/keyword/MIME">MIME</a>タイプを要求される<a href="#f-f7afa940" name="fn-f7afa940" title="4.12.2 aおよびarea要素によって作成されるリンク http://momdo.s35.xrea.com/web-html-test/spec/WD-html51-20131029/links.html#attr-hyperlink-type">*1</a>以上どうしようもない)。…となるとやはり指摘の通り<code>class</code>属性を付け足すのが現実解になるんでしょうか。</p> <pre class="code lang-html" data-lang="html" data-unlink><span class="synIdentifier">&lt;</span><span class="synStatement">style</span><span class="synIdentifier">&gt;</span> <span class="synComment">/* 無難にマッチング */</span> <span class="synStatement">a</span><span class="synIdentifier">.link-excel</span>:<span class="synPreProc">after</span> <span class="synIdentifier">{</span> <span class="synType">content</span>: <span class="synIdentifier">url(</span><span class="synConstant">image/excel.gif</span><span class="synIdentifier">)</span>; <span class="synType">padding</span>: <span class="synConstant">4px</span> <span class="synConstant">20px</span> <span class="synConstant">4px</span> <span class="synConstant">0</span>; <span class="synIdentifier">}</span> <span class="synIdentifier">&lt;/</span><span class="synStatement">style</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">a</span><span class="synIdentifier"> </span><span class="synType">href</span><span class="synIdentifier">=</span><span class="synConstant">&quot;example.xlsx&quot;</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">&quot;link-excel&quot;</span><span class="synIdentifier">&gt;</span><span class="synUnderlined">Excelファイルでダウンロード</span><span class="synIdentifier">&lt;/</span><span class="synStatement">a</span><span class="synIdentifier">&gt;</span> ... <span class="synIdentifier">&lt;</span><span class="synStatement">a</span><span class="synIdentifier"> </span><span class="synType">href</span><span class="synIdentifier">=</span><span class="synConstant">&quot;example.xls&quot;</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">&quot;link-excel&quot;</span><span class="synIdentifier">&gt;</span><span class="synUnderlined">Excelファイルでダウンロード</span><span class="synIdentifier">&lt;/</span><span class="synStatement">a</span><span class="synIdentifier">&gt;</span> </pre><p>これならば拡張子や<a class="keyword" href="http://d.hatena.ne.jp/keyword/MIME">MIME</a>タイプに頼ることなく確実にアイコンを付与できるでしょう。(<code>class</code>属性を増やすのが個人的にはあまり好きではないので<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C9%D4%CB%DC%B0%D5">不本意</a>だなーという感じはしますが。)結局のところ、サイト外部にしろ内部にしろ、どういうリソースにリンクを張るのか、というのに依存しそうはあります。</p><p><hr></p><p>2つめの代替テキストが指定できない、という指摘について。これは<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>.1仕様にあまたほどある<code>img</code>要素の用例の中で、<a href="file:///E:/My%20document/omegat/HTML5.1/target/WD-html51-20131029/embedded-content-0.html#icon-images">4.8.1.1.17 アイコン画像</a>がもっとも近いですかね。</p> <blockquote cite="http://momdo.s35.xrea.com/web-html-test/spec/WD-html51-20131029/embedded-content-0.html#icon-images"> <p>アイコンは通常、プログラム、アクション、データファイルや概念を表す単純な絵である。アイコンは、視覚ブラウザのユーザーに一目で機能を認識するのを助けることを意図する。<br /> アイコンが同じ意味を伝えるテキストを補足する際に空の<code>alt</code>属性を使用する。<br /> (中略)<br /> アイコンがテキストで使用できない追加情報を伝える場合、代替テキストを提供する。</p> <cite><a href="http://momdo.s35.xrea.com/web-html-test/spec/WD-html51-20131029/embedded-content-0.html#icon-images">4.8.1.1.17 &#x30A2;&#x30A4;&#x30B3;&#x30F3;&#x753B;&#x50CF; &#x2015; HTML 5.1</a></cite> </blockquote> <p>仕様での用例までは長ったらしいので引用しませんでしたが、今回の件では地の文にアイコンが補足情報を与えるわけですから、そもそも代替テキストを含む必要性がないと思います。</p><p>代替テキストを含むべき例が思い浮かばなかったので割愛しますが、仮に私が<code>img</code>要素を使うとするならば、</p> <pre class="code lang-html" data-lang="html" data-unlink><span class="synIdentifier">&lt;</span><span class="synStatement">a</span><span class="synIdentifier"> </span><span class="synType">href</span><span class="synIdentifier">=</span><span class="synConstant">&quot;hoge.pdf&quot;</span><span class="synIdentifier">&gt;</span><span class="synUnderlined">詳しくはこちらのPDFで </span><span class="synIdentifier">&lt;</span><span class="synStatement">img</span><span class="synIdentifier"> </span><span class="synType">src</span><span class="synIdentifier">=</span><span class="synConstant">&quot;image/pdf.gif&quot;</span><span class="synIdentifier"> </span><span class="synType">alt</span><span class="synIdentifier">=</span><span class="synConstant">&quot;&quot;</span><span class="synIdentifier"> /&gt;&lt;/</span><span class="synStatement">a</span><span class="synIdentifier">&gt;</span> </pre><p>たとえばこういうリンクテキストを設定すると思うので、代替テキストが入る余地がちょっと無いんですよね…<code>img</code>要素をサーバサイドで埋め込むのはその分だけHTMLの大きさが増えるわけですし、代替テキストを使用する必要が無いという前提に立てば<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>にできることなのでJSをわざわざ使うことも無いと思います。</p> <div class="footnote"> <p class="footnote"><a href="#fn-f7afa940" name="f-f7afa940" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">4.12.2 aおよびarea要素によって作成されるリンク <a href="http://momdo.s35.xrea.com/web-html-test/spec/WD-html51-20131029/links.html#attr-hyperlink-type">http://momdo.s35.xrea.com/web-html-test/spec/WD-html51-20131029/links.html#attr-hyperlink-type</a></span></p> </div> momdo HTML5翻訳、strong native semanticsの訳語について hatenablog://entry/17680117127079414612 2013-12-29T00:00:00+09:00 2019-04-26T23:41:01+09:00 id:momdo:20131222で話題に挙げた"strong native semantics"(強いネイティヴセマンティック)について、こんな意見が。 window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widge… <p><a href="http://blog.hatena.ne.jp/momdo/">id:momdo</a>:20131222で話題に挙げた"strong native semantics"(強い<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%CD%A5%A4%A5%C6%A5%A3%A5%F4">ネイティヴ</a>セマンティック)について、こんな意見が。</p> <blockquote> <p><script> window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); t._e = []; t.ready = function(f) { t._e.push(f); }; return t; }(document, "script", "twitter-wjs"));</script><script> twttr.ready(function (twttr) { var el = document.getElementsByClassName('twitter-syntax-tweet-id-416939131600531457'); for (var i=0;i<el.length;i++) { if (!!el[i].getAttribute('data-is-tweet-loaded')){ continue; } el[i].setAttribute('data-is-tweet-loaded', '1'); twttr.widgets.createTweet('416939131600531457',el[i],{}); } });</script><div class="twitter-syntax-tweet-id-416939131600531457"></div></p> </blockquote> <p>「強い」だと上書きできないセマンティックだというのがいまいち訳出できてないという指摘。WAI-<a class="keyword" href="http://d.hatena.ne.jp/keyword/ARIA">ARIA</a>を読み込む前に適当に付けたのがここに来て…というところですか。</p><p>「強い」について、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Weblio">Weblio</a><a class="keyword" href="http://d.hatena.ne.jp/keyword/%CE%E0%B8%EC%BC%AD%C5%B5">類語辞典</a>にお伺いを立てていくつか候補を挙げた中で「堅固」がしっくりくるんじゃないか、と。</p> <blockquote cite="http://dictionary.goo.ne.jp/leaf/jn2/69535/m0u/"> <ol> <li>かたくて、こわれにくいこと。転じて、意志がかたく、しっかりしていること。また、そのさま。「―なつくり」「―な決心」</li> <li>守りがしっかりしていて、攻められても容易には破られないこと。また、そのさま。「―な要塞」</li> <li>健康で丈夫なこと。また、そのさま。「―なからだ」</li> </ol> <cite><a href="http://dictionary.goo.ne.jp/leaf/jn2/69535/m0u/">&#x3051;&#x3093;&#x3054;&#x3010;&#x5805;&#x56FA;&#x3011;&#x306E;&#x610F;&#x5473; - &#x56FD;&#x8A9E;&#x8F9E;&#x66F8; - goo&#x8F9E;&#x66F8;</a></cite> </blockquote> <p>こんな感じでいきますか→<a href="http://momdo.s35.xrea.com/web-html-test/spec/WD-html51-20131029/dom.html#sec-strong-native-semantics">堅固なネイティヴセマンティック</a>。<a href="https://twitter.com/hail2u_">@hail2u_</a>さん、ありがとうございました。</p><p>(しかしこれ、2.2.2節に<a href="http://momdo.s35.xrea.com/web-html-test/spec/WD-html51-20131029/infrastructure.html#strong-native-semantics">strong native semantics</a>の定義が出てくるんですが、これやっぱり訳出した方がいいんですかね…。)</p><p>なお、<a href="http://ja.opera-wiki.com/Project:HTML5%E6%97%A5%E6%9C%AC%E8%AA%9E%E5%8C%96">Project:HTML5日本語化</a>に関する(別に<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>に限らず、当方の訳した<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a>文書すべてについて)コメントはいつでも受け付けていますので、<a href="https://twitter.com/momdo_">@momdo_</a>なりこのはてダへのコメント、あるいはメールなどお好きな手段でコメントいただければと思います。</p> momdo JTF日本語標準スタイルガイドを読んでみる(HTML5仕様の翻訳方針について) hatenablog://entry/17680117127079414722 2013-12-28T00:00:00+09:00 2019-04-26T23:41:02+09:00 JTF日本語スタイルチェッカーに機能追加 - IT翻訳者Blog http://blog.nishinos.com/archives/4596338.html JTF日本語スタイルチェッカー http://www.jtf.jp/jp/style_guide/jtfstylechecker.html 最初のリンクからスタイルチェッカーなるものを知ったり。まあこのチェッカーはリンク先のソースを見ればscript要素で直に書いているので大体何をやっているのかわかると思いますが…たぶん一太郎あたりに校正をさせた方が良さそう。ちなみにJTFというのは日本翻訳連盟のこと。 JTF日本語標準スタイルガイド(… <dl> <dt>JTF日本語スタイルチェッカーに機能追加 - IT翻訳者Blog</dt> <dd><a href="http://blog.nishinos.com/archives/4596338.html">http://blog.nishinos.com/archives/4596338.html</a></dd> <dt>JTF日本語スタイルチェッカー</dt> <dd><a href="http://www.jtf.jp/jp/style_guide/jtfstylechecker.html">http://www.jtf.jp/jp/style_guide/jtfstylechecker.html</a></dd> </dl><p>最初のリンクからスタイルチェッカーなるものを知ったり。まあこのチェッカーはリンク先のソースを見れば<code>script</code>要素で直に書いているので大体何をやっているのかわかると思いますが…たぶん<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B0%EC%C2%C0%CF%BA">一太郎</a>あたりに校正をさせた方が良さそう。ちなみにJTFというのは<a href="http://www.jtf.jp/">日本翻訳連盟</a>のこと。</p> <dl> <dt>JTF日本語標準スタイルガイド(翻訳用)</dt> <dd><a href="http://www.jtf.jp/jp/style_guide/pdf/jtf_style_guide.pdf">http://www.jtf.jp/jp/style_guide/pdf/jtf_style_guide.pdf</a></dd> <dt>標準スタイルガイド検討委員会|JTF 日本翻訳連盟</dt> <dd><a href="http://www.jtf.jp/jp/style_guide/styleguide_top.html">http://www.jtf.jp/jp/style_guide/styleguide_top.html</a></dd> </dl><p>スタイルチェッカーからたどれるガイドと検討がなされた委員会のページ。12の原則が掲げられていて、</p> <blockquote cite="http://www.jtf.jp/jp/style_guide/styleguide_top.html"> <ol> <li>本文を、敬体(ですます調)あるいは常体(である調)のどちらかに統一する。</li> <li>句読点は「、」と「。」を使う。</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%BE%EF%CD%D1%B4%C1%BB%FA%C9%BD">常用漢字表</a>にある漢字を主に使用する。</li> <li>動詞の送りがなは本則に従う。</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AB%A5%BF%A5%AB%A5%CA%B8%EC">カタカナ語</a>の語尾の長音は省略しない。</li> <li>長いカタカナ複合語は中黒または半角スペースで区切る。</li> <li>漢字、ひらがな、カタカナは全角で表記する。</li> <li>数字とアルファベットは半角で表記する。</li> <li>原則として記号類は全角で表記する。</li> <li>半角文字と全角文字の間に半角スペースを入れない。</li> <li>ピリオド(.)、カンマ(,)、スペースは半角で表記する。</li> <li>単位の表記を統一する。</li> </ol> <cite><a href="http://www.jtf.jp/jp/style_guide/styleguide_top.html">&#x6A19;&#x6E96;&#x30B9;&#x30BF;&#x30A4;&#x30EB;&#x30AC;&#x30A4;&#x30C9;&#x691C;&#x8A0E;&#x59D4;&#x54E1;&#x4F1A;&#xFF5C;JTF&#x3000;&#x65E5;&#x672C;&#x7FFB;&#x8A33;&#x9023;&#x76DF;</a></cite> </blockquote> <p>普通の文書を翻訳するのであればこの標準スタイルがおおむね適用できるのかなと。ただし、<a href="http://ja.opera-wiki.com/Project:HTML5%E6%97%A5%E6%9C%AC%E8%AA%9E%E5%8C%96">HTML5仕様</a>は技術文書なので、5.の「<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AB%A5%BF%A5%AB%A5%CA%B8%EC">カタカナ語</a>の語尾の長音は省略しない。」には従っていません(これについては後述)。10.の「半角文字と全角文字の間に半角スペースを入れない。」は翻訳に使用している<a href="http://www.omegat.org/ja/omegat.html">OmegaT</a>の制約から意図せず半角スペースが入っているものがあります(削除し忘れもあったりします)。また、見出しについては例外としています(例:4.3.1 script要素)。これが<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C1%C8%C8%C7">組版</a>であれば四分アキなり三分アキになるんでしょうが、現状の<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>ではそこまで表現できないので云々。<br /> <br /> </p> <div class="section"> <h4>なぜ標準スタイルガイドのカタカナ表記に従わないか</h4> <p>標準スタイルガイドは、以下の文書を参照しています。</p> <dl> <dt>外来語(カタカナ)表記<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AC%A5%A4%A5%C9%A5%E9%A5%A4%A5%F3">ガイドライン</a> 第2版 | <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C6%A5%AF%A5%CB%A5%AB%A5%EB%A5%B3%A5%DF%A5%E5%A5%CB%A5%B1%A1%BC%A5%BF%A1%BC%B6%A8%B2%F1">テクニカルコミュニケーター協会</a></dt> <dd><a href="http://www.jtca.org/ai_collaboration/katakana_wg/katakana_guide.pdf">http://www.jtca.org/ai_collaboration/katakana_wg/katakana_guide.pdf</a></dd> </dl> <blockquote cite="http://www.jtca.org/ai_collaboration/katakana_wg/katakana_guide.pdf"> <p>■適用範囲 <br /> 本<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AC%A5%A4%A5%C9%A5%E9%A5%A4%A5%F3">ガイドライン</a>では、次の表示媒体物に適用される。 <br /> 「一般の使用者が直接、見る、聞く商品上に表記される、カタカナで表記される外来語」 <br /> 具体的には、以下のものを指す。 </p> <ul> <li>製品(ハードウェア、ソフトウェア、表示画面を含む) </li> <li>製品カタログ(Web サイト、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E1%A1%BC%A5%EB%A5%DE%A5%AC%A5%B8%A5%F3">メールマガジン</a>など電子情報を含む) </li> <li>ユーザーズマニュアル(印刷物、HTML マニュアル、PDF などの電子情報、ヘルプ、ガイダンスを含む) </li> <li>製品パッケージ </li> </ul> <cite><a href="http://www.jtca.org/ai_collaboration/katakana_wg/katakana_guide.pdf">&#x5916;&#x6765;&#x8A9E;&#xFF08;&#x30AB;&#x30BF;&#x30AB;&#x30CA;&#xFF09;&#x8868;&#x8A18;&#x30AC;&#x30A4;&#x30C9;&#x30E9;&#x30A4;&#x30F3; &#x7B2C;2&#x7248; | &#x30C6;&#x30AF;&#x30CB;&#x30AB;&#x30EB;&#x30B3;&#x30DF;&#x30E5;&#x30CB;&#x30B1;&#x30FC;&#x30BF;&#x30FC;&#x5354;&#x4F1A;</a></cite> </blockquote> <p>と、あくまで一般向けの取扱説明書を念頭にしたものであって技術文書を対象にしたものではないため、この表記に依りません。この表記に依らないですが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>仕様の翻訳内で表記揺れがあってはならないので、見つけ次第全力で叩いていく所存ではあります。(少なくとも<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>仕様では<code>dfn</code>要素で用語はすべて定義されているわけですが、表現の揺れまでチェック仕切れているかというと非常に怪しい…orz)</p><br /> <p>個人的には校正について知りたくて以前に<a href="http://www.amazon.co.jp/dp/4888883033/momdos35xreac-22/ref=nosim">実例校正教室</a>は確保したのですが、いざってときに<a href="http://www.amazon.co.jp/dp/4888883920/momdos35xreac-22/ref=nosim">標準 校正必携</a>は手元にあった方が何かと便利なのでやっぱり買うか…。ちなみに大きな図書館に校正必携はあった記憶があるので、翻訳文書に限らずブログ等での日本語表記を気にするという人は手に取ってみてはいかがでしょうか。</p> </div> momdo