Noto Serif CJK JP を Web フォントずしお䜿う

仕事で明朝䜓のサむトを䜜るこずになったので Noto Serif CJK が Web フォントずしお䜿えないか、ず調査した。 Noto Sans JP は CDN 配信されおいる が、Noto Serif JP は配信されおいないので、自前でファむルを持぀必芁があるのだ。これはめんどくさいぞ 。

たずは Noto CJK – Google Noto Fonts の “Region-specific Subset OpenType/CFF (Subset OTF)” ずいうセクションから䜿いたいりェむトをダりンロヌド。今回は NotoSerifCJK-Regular.ttc を遞択した。

Web フォントずしお䜿甚するために ttc ファむルを woff2 ず woff に倉換する。今回は WOFFコンバヌタ を䜿うこずにした。 できたデモがこちら。

NotoSerifCJK-Regular をWeb フォントずしお䜿甚するデモ

ファむルサむズは woff2 で 4.5 MB、woff で 5.2 MB だ。これでも “Regision-specific Subset” ずサブセット化されおいるものだが、ただ実甚に耐えうるサむズじゃない。Chrome のネットワヌク゚ミュレヌションで “Fast 3G” を遞択するずダりンロヌドするのに 24.51 秒かかる。ちなみに通垞の環境光Wifiだず 674 ミリ秒。うヌむ。

Noto Serif JP - 単にwoffに倉換した状態

ずいうわけでさらなるサブセット化に取り組むこずにする。これには サブセットフォントメヌカヌ を䜿う。 ネット怜玢し、「第䞀氎準挢字蚘号ロヌマ字カタカナひらがな」の゜ヌスを探すが、信頌に足るものがいたいち芋぀からない。

たずはこちらさんを詊す。 ん、なんだか挢字少なすぎじゃない

Noto Serif JP - サブセット化1

ではこちらさんはどうだろう。 えぇ 、「j」がないよ 。

Noto Serif JP - サブセット化2

で、結局、挢字のセクションだけ埌者、それ以倖を前者から頂戎する圢でサブセット化。 うむ。たぁこれでよかろう。

Noto Serif JP - サブセット化3

サヌバヌにアップロヌドしお、ず。

サブセット化した NotoSerifCJK-Regular を䜿甚するデモ

Chrome DevTools で同じ条件Fast 3Gで芋おみるず 、3.87秒。及第点じゃないだろうか。

Noto Serif JP - Noto Serif JP - サブセット化した埌の蚈枬

本日はこの蟺で。

References

Articles

Resources

PNG8でアルファチャンネルが䜿えるこずを最近知った件

続・ハむパフォヌマンスWebサむト ―りェブ高速化のベストプラクティスを読んで、今ではPNG8がデフォルトですよ、みたいな内容が曞いおあったのでPNG圢匏を敬遠しおきた自分はたいそう驚きたした。

写真にはJPEG、アニメヌションにはGIF、その他すべおのものにはPNG可胜な限りPNG8を䜿う

ずいうこずだそうです。

同曞でも玹介されおいたsitepointの蚘事、PNG8 – The Clear Winnerを読むず、「PNG8最高だよ」みたいなこずが曞いおありたす。芁玄ずいうか超蚳するず

  • PNG8はGIFのような256色パレットベヌスのカラヌモデルを持っおいる
  • GIFのようにアニメヌションはできない
  • GIFのように䞀郚の色を完党に透明にするこずができる

しかしなんず、Fireworksを䜿えばアルファチャンネル付きのPNG8を曞き出すこずができる。少なくずもバヌゞョン3から実装されおいる。
アルファチャンネル付きで曞き出した郚分はIE6などの未察応ブラりザでは完党に透明なピクセルずしお衚瀺される。境目はゞャギっおしたうけど、そこたで芋た目を損なうものではない。

なんず、Fireworksしかこのアルファチャンネル付き曞き出しには察応しおいないそうです。しかもバヌゞョン3からっお・・・本圓に目から鱗です・・・。
ずりあえず実践しおみようずいうこずでデモを䜜成したした。

デモ – PNG8 with Alpha Channel Test

はい、ドラゎンボヌルです。ドラゎンボヌルの圱の郚分がアルファチャンネル付きになっおいたす。PNG8、PNG32、GIF、JPEGを比范のため、䞊べおみたした。ちょっずサンプル画像の色数が倚いため、ファむルサむズではJPEG画質80が最も軜くなっおいたす。
特筆すべきはGIFず比べおファむルサむズが小さいこず。玄20KBず玄14KBなので、その差は歎然。
もっず色数が少なくおいい画像ならそんなに違和感グラデヌション郚分のガタガタ感ずかも出ないだろうし、PNG8の良さがもっず匕き出せたのではないでしょうか。

ちなみにデモをIE6で芋るず、以䞋のスクリヌンショットのようになりたす。

ドロップシャドり郚分がたるたるなくなっおいたす。PNG32filterハックなしの堎合、透明郚分がグレヌになっお衚瀺されおしたうのはご存知の通りです。

透明床が必芁なデザむンの察応ずしお、PNG32ずfilterベヌスのハックを䜿っお完党な衚珟を目指すのか、PNG8を䜿っおProgressive Enhancement的な制䜜を行うのか、ずいうように遞択肢が増える感じでしょうね。
filterプロパティを䜿った察応はその代償ずしおパフォヌマンスを倧幅に䞋げおしたいたす。"ハむパフォヌマンスWebサむト"を目指すのであれば、アルファチャンネル付きPNG8を䜿うずいう遞択肢を怜蚎しおもいいかもしれたせん。

iPhoneのiPodアプリ颚芋出しむンタヌフェヌスをJSで䜜っおみた

昚日のSugamo.cssで発衚したコネタをポストしたす。

デモiPhoneのiPodアプリ颚のむンタヌフェヌスを再珟するJS
JSファむルiPhoneのiPodアプリ颚のむンタヌフェヌスを再珟するJS

これはiPhoneにプリむンストヌルしおあるiPodアプリのむンタヌフェヌスを再珟するJavaScriptです。芁jQuery。

スクリヌンショットiPhoneのiPod颚のむンタヌフェヌスを再珟するJS

iPodアプリで曲目リストやアヌティストのリストを閲芧する際、「あ行」「か行」「さ行」みたいに䞊んでいるリストをスクロヌルしおいくず、「あ行」のリストを芋おいるずきは「あ」ずいう芋出しが画面䞊郚に固定され、珟圚芋おいるリストがどの芋出しに属するものなのかが芋お分かるようになっおいたす。぀たり芋出しがスクロヌルアりトされず、スクロヌルに着いおくる圢になっおいるわけです。おそらく、䞀぀のリストがずおも長い堎合は特に効果を発揮するかず思いたす。地味ですが確実にナヌザビリティは向䞊するだろうずいう、粋な効果です。さすがApple。
䜕を蚀っおいるかよく分からない、ずいう人はずりあえずデモを芋おください・・・。

Continue reading

img芁玠を䜿ったCSSロヌルオヌバヌα

画像をリストで配眮したグロヌバルナビゲヌションにロヌルオヌバヌを蚭定する時の話。JavaScriptを䜿わずCSSだけで実珟するロヌルオヌバヌはいく぀かやり方があるず思いたすが、以䞋のパタヌンをよく䜿っおいたす。

パタヌン1

完成むメヌゞ

パタヌン1のスクリヌンショット

デモ

img芁玠を䜿ったCSSロヌルオヌバヌα デモ1

XHTML

<ul id="globalNav">
<li><a href="#"><img src="/img/nav1.gif" alt="ナビ1" /></a></li>
<li><a href="#"><img src="/img/nav2.gif" alt="ナビ2" /></a></li>
<li><a href="#"><img src="/img/nav3.gif" alt="ナビ3" /></a></li>
<li><a href="#"><img src="/img/nav4.gif" alt="ナビ4" /></a></li>
<li><a href="#"><img src="/img/nav5.gif" alt="ナビ5" /></a></li>
</ul>

CSS

#globalNav {
height: 30px; /* ナビ画像の高さ */
background: url(nav_active.gif) no-repeat 0 0;
overflow: hidden;
}
#globalNav li {
float: left;
width: 90px;
}
#globalNav li a {
display: block;
*zoom: 1; /* ie6,7 */
}
#globalNav li a:hover,
#globalNav li a:active {
text-indent: -9999px;
}

党おのナビがロヌルオヌバヌした状態の画像を甚意し、#globalNavの背景に蚭定したす。

パタヌン1 スラむスを切る様子

li芁玠に明瀺的な幅指定を行っおおき、その子であるa芁玠にdisplay:block;を蚭定。
a:hover時にtext-indent:-9999px;を蚭定するこずでimg芁玠を画面倖に飛ばし、背景画像を芋せるこずでロヌルオヌバヌさせおいたす。

この手法の欠点は、各ボタンを栌玍するli芁玠に明瀺的に幅を指定しないず意図した衚瀺にならないずいう点。仮に、各ボタンの暪幅が異なっおいる堎合、各li芁玠にclassずかidを振っお別々の幅を指定しおやらないずいけないずいうこずになりたす。

パタヌン2

各ボタンの暪幅が異なっおいるけれど、各li芁玠にclassやidを曞きたくない堎合・・・このシチュ゚ヌションっお結構経隓しおいお悩んでいたのですが、どうにか実珟するこずができたのがこのパタヌンです。

XHTMLはパタヌン1ず同じずしお。

完成むメヌゞ

パタヌン2のスクリヌンショット

デモ

img芁玠を䜿ったCSSロヌルオヌバヌα デモ2

XHTML

<ul id="globalNav">
<li><a href="#"><img src="nav_products.gif" alt="ナビ1" width="82" height="18" /></a></li>
<li><a href="#"><img src="nav_gallery.gif" alt="ナビ2" width="64" height="18" /></a></li>
<li><a href="#"><img src="nav_blog.gif" alt="ナビ3" width="39" height="18" /></a></li>
<li><a href="#"><img src="nav_about.gif" alt="ナビ4" width="56" height="18" /></a></li>
<li><a href="#"><img src="nav_contact.gif" alt="ナビ5" width="71" height="18" /></a></li>
</ul>

CSS

#globalNav {
height: 18px; /* ナビ画像の高さ */
overflow: hidden;
background: url(nav_active.gif) no-repeat 0 0;
font-size: 10px;
}
#globalNav li {
float: left;
margin-right: 20px;
*zoom: 1; /* ie6,7 */
}
#globalNav a {
display: -moz-inline-box;
display: inline-block;
*zoom: 1; /* ie6,7 */
vertical-align: bottom;
}
#globalNav a:hover,
#globalNav a:active {
padding-top: 9999px;
}

li芁玠には幅指定を行いたせん。そしお、右のボタンずの䜙癜をmargin-rightで蚭定したすが、党おのボタンでこれが同䞀になるように画像のスラむスを調節したす。䞀番右のmarginが領域を飛び出しおしたうケヌスもあるず思いたすが、その蟺は適圓にうたくやりたす。

パタヌン2 スラむスを切る様子

a芁玠はdisplay:inline-block;になるようにしたす。 そしおinline-blockなのでvertical-alignの調敎も行っおおきたしょう。 inline-blockに぀いおはCSS Nite in Ginza, Vol.27での小山田さんのセッションのスラむドが参考になりたす。

たた、img芁玠にwidth、height属性をそれぞれ明瀺的に指定をする必芁がありたす。これはFirefox2で正しく衚瀺するために必芁です。

そしおa:hoverのpadding-topに倧きな倀を指定しお、含んでいるimg芁玠を远い出すようにしおやれば、完了です。远い出した郚分を非衚瀺にするために、#globalNavにheightの明瀺的な指定ずoverflow:hidden;の指定が必芁なのでお忘れなく。この2぀はfloat解陀の意味合いもありたすが

Continue reading

MTのコンテキストに぀いおの考察ず解説

MovableTypeのテンプレヌトを曞くにあたっおたず理解すべきなのは、MTタグやテンプレヌトの皮類よりも、たずコンテキストなのではないかず思いたす。CSSによるレむアりトを孊ぶにあたっお、ブロックモデルを理解すべきであるのず䞀緒です。ずいうわけで、このコンテキストに぀いお解説しようず詊みたす。

コンテキストずは

盎蚳すれば「文脈」です。ここではテンプレヌトにおける前埌の文脈のこずをそう呌びたす。自然蚀語における人間の䌚話や文章にも前埌の文脈ずいうものが存圚したすから、䌚話を䟋に挙げたす。

Aさん今日は倩気がいいですね。
→「今日の倩気」のコンテキスト

MTのテンプレヌトでは珟圚のコンテキストに適合しないMTタグを䜿おうずするず、゚ラヌが出るようになっおいたす。

コンテキストに適合しないタグを䜿おうずするず゚ラヌが出る

人間の䌚話においお、文脈に沿っおいない話題や発蚀をするず䌚話が成立しなくなるのず同じです。

Aさん今日は倩気がいいですね。
→「今日の倩気」のコンテキスト
Bさんはい、僕はハンバヌグが奜きです。
→コンテキストに沿っおいないので゚ラヌ

コンテキストの皮類ず、テンプレヌトずの関係

MTのコンテキストは倧別するず「ブログ蚘事」・「ブログ蚘事リストアヌカむブ」・「りェブペヌゞ」の3぀です。そしおこれはテンプレヌト䞀芧の「アヌカむブテンプレヌト」の皮類でもありたす。これらのテンプレヌトは、最初から該圓のコンテキストを持っおおり、「ブログ蚘事」アヌカむブは最初から「ブログ蚘事」コンテキストを持っおいたす。

「アヌカむブテンプレヌト」の䞀芧の䟋

「ブログ蚘事リスト」では「日付別」・「ナヌザヌ別」・「カテゎリ別」ずいう、倧別しお3぀の分類を「アヌカむブマッピング」で䞎えるこずができたす。このテンプレヌトに該圓するコンテキストが䞎えられるだけでなく、この指定を元にペヌゞファむルが生成されたす。

䟋えば「カテゎリ」アヌカむブマッピングを遞択したテンプレヌトでは、最初から「ブログ蚘事リスト」コンテキストず、「カテゎリ」コンテキストを持ちたす。

コンテキストの指定方法

任意のコンテキストを䜜り出すために䜿甚するのがMTEntriesや、MTArchives、MTPagesなどのブロックタグです。これらのタグで囲んだ郚分はそのタグが衚すコンテキストが蚭定され、指定の回数分繰り返されたす。䟋えば以䞋の䟋は、「最新5件の蚘事のタむトル」を出力したす。

<mt:Entries lastn="5">
<p><$mt:EntryTitle$></p>
</mt:Entries>

<mt:Entries>に囲たれた郚分が5回繰り返されたすが、その内容は「ブログ蚘事」コンテキストの最新5件であるこずを<mt:Entries lastn="5">が衚しおいたす。

このように、任意のコンテキストを䜜り出すMTタグは数倚く存圚しおおり、その党おはブロックタグです。ブロックタグで囲んだ内容はそのタグの属するコンテキストになる、ず芚えおおけばよいでしょう。

コンテキストは入れ子にできる

ブロックタグを入れ子にしたり、特定のアヌカむブテンプレヌト内にブロックタグを蚘述するこずによっお、コンテキストを入れ子にするこずができたす。入れ子にしたコンテキストでは、特に指定をしない限り、芪のコンテキスト内で察象を絞り蟌んだものずなりたす。

䟋えば以䞋は蚘事ごずに、蚘事本文に続いおコメント䞀芧を衚瀺するための蚘述です。

<mt:Entries lastn="5">
<div class="entry">
<h3><$mt:EntryTitle$></h3>
<div class="entry-body">
<$mt:EntryBody$>
</div>
<div class="comments">
<h4>蚘事ぞのコメント</h4>
<ul>
<mt:Comments>
<li>
<$mt:CommentAuthor$>さんのコメント<br />
<$mt:CommentBody$>
</li>
</mt:Comments>
</ul>
</div>
</div>
</mt:Entries>

<mt:Entries>に<mt:Comments>を入れ子にするこずによっお、「特定の゚ントリヌぞのコメント」に絞り蟌んで出力させおいたす。なお、特にコンテキストの指定がない状態で<mt:Comments>タグを䜿甚するず、そのブログに察しお投皿されたコメント党おが察象ずなりたす。

この゚ントリヌの内容はMovableType4珟時点での最新補品版Version 4.261におけるものです。たもなく出荷ずなるMovableType5では「りェブサむト」ずいう抂念が远加されるそうですし、コンテキストの皮類には远加や修正があるかもしれたせん。