SimpleIsm

舞台裏は乱雑に、見えるところはシンプルに。

カテゴリー: Coding

Hamlで半角スペースが無視される件

Posted on by Yoruaki

最近Hamlにハマっていて、ある程度覚えて使っていたのだけどつまづいた。以下の例を見てほしい。

<p>I eat well Milky Way recently.</p>

こんな感じで、要素を1行で吐き出したい時ってあると思うんだけど、これをHamlで書くと以下のようになる。

%p I eat well Milky Way recently.
%p<
  I eat well Milky Way recently.

文章中にリンクが張ってあるのはよくある話で、「Milky Way」というテキストにリンクを張ってみる。

<p>I eat well <a href="http://www.milkywaybar.com/">Milky Way</a> recently.</p>

上記が出力される理想形。Hamlでやってみる。

%p<
  I eat well
  %a(href="http://www.milkywaybar.com/")> Milky Way
  recently.

これで出力すると以下のようになる。

<p>I eat well<a href="http://www.milkywaybar.com/">Milky Way</a>recently.</p>

ない！「well」と「recently」の間にスペースがない！じゃあスペース入れてみようと思い、やってみた以下の書き方はすべてダメ。

- space = " "
%p<
  I eat well#{space}
  %a(href="http://www.milkywaybar.com/")> Milky Way
  #{space}recently.
- space = "¥s"
%p<
  I eat well#{space}
  %a(href="http://www.milkywaybar.com/")> Milky Way
  #{space}recently.
%p<
  I eat well
  = " "
  %a(href="http://www.milkywaybar.com/")> Milky Way
  = " "
  recently.
%p<
  I eat well
  = "¥s"
  %a(href="http://www.milkywaybar.com/")> Milky Way
  = "¥s"
  recently.

行頭と行末の半角スペースは無視されるようだ。正規表現もダメとは…。

というわけで、表示は変えずに「ソース上では1行で出力する」という要件を満たすためには、以下のようにやるしか方法が見つからなかった。

- space = "&nbsp;"
%p<
  I eat well#{space}
  %a(href="http://www.milkywaybar.com/")> Milky Way
  #{space}recently.
%p<
  I eat well
  = "&nbsp;"
  %a(href="http://www.milkywaybar.com/")> Milky Way
  = "&nbsp;"
  recently.
%p<
  I eat well&nbsp;
  %a(href="http://www.milkywaybar.com/")> Milky Way
  &nbsp;recently.

こうすると以下のように出力されて、意図した表示になり、1行で出力される。

<p>I eat well&nbsp;<a href="http://www.milkywaybar.com/">Milky Way</a>&nbsp;recently.</p>

もうね、全然直感的じゃないし、「軽量マークアップ言語」とはなんだったのでしょう…。Markdownは直感的でメモ書きとかには超便利だと思うけど、要素の細かな指定は普通のHTMLと変わらないし、ならHTML書くときは普通にHTMLでいんじゃないかなぁと思った。

HamlはSassも中で書けるから、1つのファイルで全部1行で出力したらなんかいいなぁ（キャンペーンサイトとか1枚ペラのページ限定だけど）と思ったんだけど、compressedで吐き出す方法分からないし、とりあえず保留しておく。

あ、ちなみに例文の私が最近ミルキーウェイというお菓子に超ハマっているというのはマジです。

追記

か、神様…！

ちょっとlink_toについてはよく分からなかったのだけど(Ruby on Railsかな)、surroundを使うことで解決できた。Module: Haml::Helpersを参考にした。

%p<
  = surround "I eat well ", " recently." do
  %a(href="http://www.milkywaybar.com/")> Milky Way

これで意図した表示になります。@Kyoさんありがとうございました。

Webってこういうのがいいんだよなぁと改めて思った次第です。

CSS Lintの警告文を訳してみた

Posted on by Yoruaki

CSS Lintの日本語訳。普通に書いたCSSだと問答無用で警告文が出る。やってられるか！

でもどういった理由でエラーが出るのかは知っておいて損はないと思うので、いくつか訳してみた。多分結構多くの人が遭遇する警告だと思う。何せ自分が遭遇した警告だしね！

原文 日本語訳
Disallow universal selector
The universal selector (*) is known to be slow.
ユニバーサルセレクタは禁止です
ユニバーサルセレクタ (*) は遅くなることが知られています。
Headings should only be defined once
Heading (h1, h2, h3, h4, h5, h6) has already been defined.
見出しは一度だけ定義されるべきです
見出し (h1, h2, h3, h4, h5, h6)はすでに定義されています。
Disallow qualified headings
Heading (h1, h2, h3, h4, h5, h6) should not be qualified.
見出しの修飾は禁止です
見出し (h1, h2, h3, h4, h5, h6) は修飾されるべきではありません。
Require fallback colors
Fallback color (hex or RGB) should precede RGBA color.
代替色の指定が必要です
RGBA指定の前に、代替の色指定 (16進数またはRGB) をした方が良いです。
Disallow IDs in selectors
Don’t use IDs in selectors.
セレクタにIDは禁止です
セレクタにIDを使用しないでください。
Disallow overqualified elements
Element is overqualified, just use #test without element name.
必要以上の要素名付加は禁止です
必要以上に要素名があります。要素名は付けず、IDのみもしくはCLASS名のみで使用してください。
ex.)div#hoge => #hoge
Disallow !important
Use of !important
!importantは禁止です
!importantが使用されています。
Parsing Errors
Expected RBRACE at line 123, col 456
パースエラー
Require use of known properties
Unknown property ‘hoge’.
きちんと定義されたプロパティが必要です
‘hoge’ というプロパティは定義されていません。

HTML 4.01最(再)小化

Posted on by Yoruaki

以前終了タグが省略可能な要素という記事を書いたことがあるのだけど(5年前…)、もっと省略した書き方を当時教えてもらったのだけど忘れてしまったので、もう一度調べながら書いてみた。

確かSGML宣言をすることでもっと省略できるとかだったので、上記を参考に調べてみると、HTML4におけるSGML宣言ではOMITTAGとSHORTTAGが両方YESなので、タグと属性名の省略が可能で、タグそのものを圧縮して書くこともできる。(…で合ってる？)

ということで以下のHTMLを省略してみた。

元のHTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>HTML 4.01 Omissible & Minimized Elements Example</title>
    </head>
    <body>
        <h1>HTML 4.01 Omissible & Minimized Elements Example</h1>
        <p>Sample text 1</p>
        <p>Sample text 2</p>
        <p>Sample text 3</p>
        <ul>
            <li>Sample list 1</li>
            <li>Sample list 2</li>
            <li>Sample list 3</li>
        </ul>
        <table>
            <tr>
                <td>Sample table 1</td>
                <td>Sample table 2</td>
                <td>Sample table 3</td>
            </tr>
            <tr>
                <td>Sample table 4</td>
                <td>Sample table 5</td>
                <td>Sample table 6</td>
            </tr>
        </table>
        <p><a href="http://validator.w3.org/check/referer">Validator</a></p>
    </body>
</html>

省略したHTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<meta http-equiv=content-type content="text/html;charset=utf-8"
<title/HTML 4.01 Omissible & Minimized Elements Example/
<h1/HTML 4.01 Omissible & Minimized Elements Example/
<p>Sample text 1
<>Sample text 2
<>Sample text 3
<ul/
    <li>Sample list 1
    <>Sample list 2
    <>Sample list 3
/
<table/
    <tr
        <td>Sample table 1
        <>Sample table 2
        <>Sample table 3
    <tr
        <td>Sample table 4
        <>Sample table 5
        <>Sample table 6
/
<p><a href=http://validator.w3.org/check/referer>Validator

View Demo: HTML 4.01 Omissible & Minimized Elements Example

警告出まくりだけど、ちゃんとValid HTMLとなる。まともに表示されないけど。実はあまり理解できなくてちょこちょこ修正しながらValidatorかけてたのは内緒。

タグの省略について

SGML宣言して省略して遊んでたときに見つけた記事(これ見つけたから今回の記事書こうと思った)。html要素とかbody要素は省略して書くべきとのこと。パフォーマンスのために省略すべきということなら、正直Googleぐらいでかいサイトならいざ知らず、個人サイトとか中規模程度の企業サイトなら「そこじゃなくね？」とか思う。もっと他にできることあるだろうと。

IE6とかJSとかそこそこ弊害もあるし、「すべき」としてしまうのはちょっと強引かなぁと思ったのだけど、それについてはコメントで結構突っ込まれてた。

あ、でも何か一貫したポリシーの元で行う(社内のコーディングガイドラインに従うとか)ならアリだと思う。

追記

@yoruaki 「HTML 4.01最(再)小化」の記事拝見しました。最後のa要素ですが、文法的には問題ありませんがこういう風に解釈されないでしょうか? <a href=”http:”></a>http://validator.w3.org/check/referer >Validator

Twitter / SaekiTominaga: @yoruaki 「HTML …

拝見＆ご指摘ありがとうございます。その部分について、Validatorの警告を見てみます。

<p><a href=http://validator.w3.org/check/referer>Validator

For the current document, the validator interprets strings like <FOO /> according to legacy rules that break the expectations of most authors and thus cause confusing warnings and error messages from the validator. This interpretation is triggered by HTML 4 documents or other SGML-based HTML documents. To avoid the messages, simply remove the “/” character in such contexts. NB: If you expect <FOO /> to be interpreted as an XML-compatible “self-closing” tag, then you need to use XHTML or HTML5.

This warning and related errors may also be caused by an unquoted attribute value containing one or more “/”. Example: <a href=http://w3c.org>W3C</a>. In such cases, the solution is to put quotation marks around the value.

[Valid] Markup Validation of http://simpleism.net/misc/test/004.html – W3C Markup Validator

「このドキュメントでは、バリデータは従来のルールに従うと、<FOO />のように解釈し、紛らわしい警告やエラーメッセージを引き起こし、著者の期待を裏切ります。この解釈はHTML4や他のSGMLベースのHTML文書によって起こされます。このメッセージを回避するには、単純に”/”を削除すればOKです。ただし(“NB:” = “Nota Bane / 注意せよ”)、<FOO />を空要素タグとして解釈させたい場合は、XHTMLやHTML5を使用する必要があります。

この警告及び関連するエラーは、引用符で囲まれていない1つ、もしくは複数の”/”を含む属性値によって引き起こされます。 例: <a href=http://w3c.org<W3C</a> 解決策としては、値を引用符で囲むことです。」

こんなところですかね。もう警告文が複雑でいざ訳して文章にすると大変ですね…。

というわけで、上記の警告のように<a href />と解釈されるならば、仰るとおり<a href="http:"</a>http://validator.w3.org/check/referer>Validatorという風に解釈されると思います。

まぁそう解釈される可能性もあるよ、という警告なので(他にも16個も警告が…ｗ)、ネタとして見ていただければと思います。省略して書くために、調べたりなどの工数が3倍ぐらいかかるというなんとも非効率な書き方です…。