in between days

表参道で働くシニアのブログ

入力支援ツールのリニューアルが中途半端な件について

はてなダイアリー日記 - 入力支援ツールをリニューアルしました

  • 太字を span タグで指定するように変更しました。
  • カラーピッカーを追加しました。簡単に文字色を変更していただけます
  • フォントサイズを変更できるようになりました

厳密には「spanタグで指定」じゃなくて、spanタグの「style属性」で、この3つともが実現されてみたいだね。

ちょっと見た感じで気になったことは

  • うーん、インラインstyle属性かあ
  • なんでボールドだけなんだろう? イタリックはem要素のままなんだけど
  • はてダでstyle属性って使えたっけ?

って感じで、今ひとつ中途半端だなああという感想。

実験してみた。

試しにやってみたら、それぞれこんなになりました。

ボールドにしてみよう
イタリックですよ
今月は赤字です
でっかくなっちゃった!

挿入されるタグはこんな感じ。

<span style="font-weight:bold;">ボールド</span>にしてみよう
<em>イタリック</em>ですよ
今月は<span style="color:#FF0000;">赤字</span>です
<span style="font-size:xx-large;">でっかく</span>なっちゃった!

いろいろ試してみて気が付いたこと

  • イタリックはfont-styleにしなかったのはなんでだろう?
  • スタイルを取り消すってボタンがあってもいいかも
  • 変換箇所を選択したままで、B→I→Bって続けて押したときの挙動ってこれでいいの?
    • I→B→I→B→B って順番だとさらに期待と違った感じになるなあ。

イタリックをコレ↓にしておけば、統一取れた気もするんだけど。なんで??

<span style="font-style:italic;">イタリック</span>にならない?

ちなみに上のHTMLを生で書いても、はてダではイタリックにならない。

支援入力ツールが生成するコードに限定して、style属性を許可してるって感じかな。

style属性を使わない案

とはいえ、style属性によるインラインスタイル指定を使わないで、全部スタイルシートでやっちゃったほうが、Web 2.0時代っぽいw んじゃないかなあ、と思った。

こんな感じのコードを吐くようにするとか。

<span class="hatena-bold">ボールド</span>にします

そんで、ユーザーCSSの先頭にこういうのを追加してHTMLを生成する。

span.hatena-bold {
  font-weight: bold;
}

ここでユーザーCSSってのは、デザインの詳細設定の「スタイルシート」欄に書き込んだ部分が、はてダのHTMLソースの「<style type="text/css">」ではじまる部分にそのまま埋め込まれているやつだけど、いまでも「ソースを見る」で確認すると、この先頭に

h1 a {
  text-decoration: none;
}
h1 img {
  border: 0;
}

の2つ、スタイルシートの最後に下の1つが追加されてる。

div.body {
	clear: both;
}

ここに、ボールドとかイタリックのスタイル指定も入れてやればいいんじゃないかな。

カラーピッカーに対応するのは難しいけど(つかそれだけは無理か)。

ボールド記法ほしい!(これが結論)

というか「入力支援ツール」ってものがそもそも「はてな」っぽくないよな。

やっぱ、はてダは「××記法」で全部書きたいじゃない。

ここは[b:ボールド]

と書くと、パブリッシュしたときに

ここは<span class="hatena-bold">ボールド</span>

って展開されるとかさ!!

はてダにはそういうのを期待したいと思った!