A Study in HTML5

no extension

というわけでサイトのリニューアルを始めます

いやほら,いい加減 HTML5 についてそろそろちゃんと勉強しておかなくっちゃ,と思うわけですよ。 私はロジックを組むほうが得意なので見た目のデザインとかはからっきしダメダメなのですが,不得手だからといっていつまでも放置するわけにもいかないし。

それでもただ本を読んで漫然と勉強するってのは性に合わないので,実践として,このサイトのリニューアルを行うことにします。 まぁゆっくりとね。

Web Fonts の導入

で,いきなりなんだけど, Web Fonts を導入した。 主に私の勉強用。 これで表示が遅くなってしまったのはホンマすんません(気にする人がいるほど見られてはないと思うが orz)。 試行錯誤の様子はこちらを見てもらうとして,フォントファイルは

の2種類を用意した。

まず Google Fonts は Droid Serif, Open Sans, Inconsolata の 3 type を選択した。

<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic|Open+Sans:400,400italic,600,600italic|Inconsolata:400,700&subset=latin,latin-ext'>

いずれも Popularity でソートして最初に来るものだ。

IPAex フォントは TTF ファイルしか提供されていないので武蔵システムさんの WOFF コンバータを利用して変換している。 サポート対象外とはいえ,こういうツールをフリーソフトで提供するとは太っ腹である。 感謝。

文字集合とフォント

そういえば Google と Adobe が CJK 向けのフォントをオープンソース・ライセンス(Apache License, Version 2.0)で発表したらしい。

「このパートナーシップにあたり、Google は全体のディレクション、要求仕様の策定、各国でのテストリソースや専門家によるアドバイスの提供などを行いました。 アドビは、デザインおよびフォント関連の技術、各国用書体を含む定評ある書体デザインの経験、そして大規模な工程の管理とオートメーション技術をもってプロジェクトを推進しました。 さらに、プロジェクトの規模によるリソースと各国の書体の専門知識の必要性から、Changzhou SinoType Technology、イワタ、そして Sandoll Communication の 3 社のトップ書体メーカーの協力を得ています。」
(「オープンソースの美しい Noto フォントファミリーに日本語、中国語、韓国語が加わりました」より)

とあるが,外側から見る限り,全体の取りまとめは Adobe 側がやっていて, Google は単に結果だけを取り入れているようにみえる。 とはいえ Noto Fonts のアドバンテージは,全世界の文字を余すとこなく統一的な書体(type-face)で利用できる点にあると思う。 Unicode が登場したのは随分昔だが,ようやくこれで諸々の道具立てが揃ってきた感じである。 こういう圧倒的な物量を力技でなく進めることができるのは,やはり Google ならではというところだろう。

個人的には CJK の Sans Serif (日本でいうところの明朝体)がサポートされた時点で導入を考えてみたい。 というわけで,とりあえず adobe-fonts/source-han-sans を watch してみたのだが,流量が多すぎて give up してしまった。 盛況なのは結構なことだけど,なんか揉め方に既視感があるんですけど。

(全く余談だが,「文字集合」と「文字符号化方式」,あるいは「字体」と「字形」と「書体」の区別ができない人が多すぎる。 そういう区別ができないでみんな「文字化け」で思考停止してしまうのだから始末に悪い。 中身を知らない一般の人はともかく,ソフトウェア・エンジニアでも同様の反応を示すため,業を煮やした私が社内向けにドキュメントを書いたのは昔の話である。 少なくとも「字体」と「字形」の違いがわからないと「異体字」等に関する議論の土台にすら乗れないと思うのだが...)

Tumblr テーマの自作

これまた HTML5 の練習用に Tumblr テーマを自作してみた。 Trunk で使っている。

一応 CC-BY 4.0 でライセンスしてるけど, fork はご自由にどうぞ。

(これは別の機会に書く予定だが,ここのサイトの主なコンテンツのライセンス(CC-BY)に追加条項を加えようと思っている。 それは「2次利用に関してオリジナルのクレジットを明記しなくともよい」だ。 これは RDFa では “morePermissions” で指定できる,筈。 なぜこんなことをするかというと,自ら release (解放)したコンテンツを fork した先まで管理するのは馬鹿らしいからだ)

それにしても Tumblr は本当によく出来ている。 犯罪者の「釣り堀」と化している WordPress や,時代から取り残され黄昏期に突入している Movable Type やアメブロやはてななんか使うくらいなら Tumblr を使うほうがはるかにマシだと思うぞ。 日本のユーザには reblog-monkey が多いので(まぁ私もそのひとりだが),国内の評判が「わろし」なのは承知してるけど, Tumblr はちゃんと使えば「使える」道具なのだ。

以下に Tumblr の秀逸な使用例を挙げておく。

  • デロリアンEV化計画

    広島の方。この方の EV デロリアンは見せていただいたことがあるが,かっこ良すぎ!

  • Change.org 公式Tumblr

    キャンペーン発信サイト Change.org。 Tumblr でここまでできるのかってくらい良い出来です。企業・組織が(日本国内だけじゃなく世界規模で)情報拡散目的でブログを開設するなら Tumblr はうってつけ。

  • Twitter Status

    知ってる人は知っている。日本版は更新をやめちゃったみたいだけど(まぁ本家のをただ翻訳してるだけだったしね),本家はちゃんと機能している。障害が起きたときは Twitter からは連絡できないもんね。

  • 結城浩のタンブラー

    結城浩さんは Twitter がメインな印象があるけど, Tumblr は agenda の書き出し用に使ってるみたい。このくらいシンプルな利用でもOK。

DISQUS の導入

とりあえずフィードバック用にトップページの下に設置している。 ブログ記事に対応するかどうかはもうちょっと考えてから。 コメントの管理は相当うざいので,最小限にするつもり。

Study in HTML5

という感じで,ボチボチやっている。

まぁ,まださわりの部分だけど, HTML5 を学ぶには以下の要素技術について学ぶ必要があるようだ。

  • DOM5
  • CSS3
  • Microdata または RDFa

面白いのは HTML5 では構文上の厳密さよりも HTML5 によって構成される意味(semantics)を重視するように shift している点だろう。 これは HTML5 が DTD を捨てたことからも伺える。

この辺はおいおい...

まったく別件だけど Keybase.io の招待状あります

Trunk 等では既に告知したけど, Keybase.io の招待状があります。 興味のある方は登録する e-mail アドレスを知らせていただければ招待状をお送りします。

サービスに秘密鍵を預けるのはアレだけど(なので普段使いの鍵は登録しないほうがいいよ),暗号技術がもっと手軽に且つ安全に利用できればいいな,と思ってます。 あわよくば Keybase.io が PKI として機能し始めると面白いと思うんだけど,まだそこまではないかなぁ...

photo
tumblrデザインカスタマイズガイド
ジャムハウス編集部
ジャムハウス 2012-06-08
評価

Designing Tumblr デザイニング・タンブラー 週刊アスキーBOOKS Vol.13 tumblrの使い方 次世代SNSでネットの話題を丸々ゲット! Pinterestビジネス講座 GIF BOOK -コンテンツ制作者のためのGIFガイド よくわかるHTML5+CSS3の教科書

by G-Tools , 2014/07/20

そういえば, Web デザインのデザインパターンってないよな。 誰か書かないかな。
そういえば,このタイトルってコナン・ドイルの有名な作品からのパクリだって ...分かるわけないか(笑)