ひさびさ投稿

前回の記事書いてから一週間ほど風邪を引き、とくに理由はないのだけど、そのまま投稿休んでた。
まあ毎日投稿は難しいなということは分かった( ´∀｀)

Webフォントの配信サービスとか、ぼちぼち作成再開しようかなと思ってます。はい。

今帰ってきた

東京は遠いところだった。もっと近かったらいろいろなイベントに参加するのに。往復するだけで5時間・4000円はきついなー。

あと、田舎者丸出しで恥ずかしかったぜ。

参加自体はいろんな意味で経験になったからよかった。

Mashup Lightning Talksに参加することにした

また自己満足です。はい。

わざわざ東京くんだりまでよく行くよ。自分のことながら、理解できんね。まったく。

ノートPCできたら持参ということなんだが、持ってない。家族の型落ちのやつがあるから、それ持って行けるかなと思っていたが、ログインパスワード分からんから困る。どうしよう。早朝電話で聞くか。

発表に使うパワポの資料はなんとかできたんだが(GoogleDocさん便利)、眠れない。まあなんとかなるか。

Mashup Award 6に応募した

Mashup Award 6にTextar DBをエントリーした。スレにも書いたけど、完全に自己満足です。はい。

11月入ってからこんな賞があるって知ったのだけど、本当にタイミングよかった。期限切れで応募できないとか残念なことになってたら、目も当てられなかったよ……

別にこの賞に合わせてサイト作ってたわけじゃないけど、応募できただけで、妙な達成感がある。

毎年こんな感じでWebサービス作って公開していけたらいいなあ。

経過報告、そしてウェブフォントを動的に生成するというアイデア

Textar DBのキーワード検索の仕様変更とウェブフォントの対応終了した。ウェブフォント用に書いたJavascriptがうまく動作しなくてあせったけど、イージーミスだったので何とか修正できた。

キーワード検索が予想よりかなりサクサク動くので満足。これだったらAND検索も実装できるかも。


あと、昨日読んだこの記事が、現在の自分の関心領域的に非常に気になっている。必要最低限のグリフのみを含んだウェブフォントを、好きなときに自由に生成できたら最強だよなあ。

実際動的に生成するとして、どのくらいの時間がかかるのだろう？　Google app engineの30秒制限以内にできたらいいのだけど。

この記事参考に自分でもちょっと試してみようかな。

書くことないなあ

Textar DBのキーワード検索の仕様を変更するために、新しくタグデータをまとめたエンティティを作成中。deferred libraryのおかげでこういう大量更新はお手軽にできて助かる。

CPU時間は無料分をすでに消費。全部完了するまでにだいたい300円ぐらい飛ぶ予定。

ウェブフォント対応と新しいキーワード検索、明日ぐらいになんとかできそう。

Bulletproofな@font-face記述だと、Androidでウェブフォントを適用できない

安全な@font-faceの書き方(抄訳)を参考に

@font-face {
    font-family: Textar;
    src: url('/media/fonts/textar-min.eot');
    src: local(Textar),
         url("/media/fonts/textar-min.woff") format("woff"),
         url("/media/fonts/textar-min.ttf") format("truetype"),
         url("/media/fonts/textar-min.svg#Textar") format("svg");
}

というCSSを書いて、GoogleのWebFont Loaderでウェブフォントを適用するというテストページを作ったのだが、Xperiaだとうまく適用されないという報告をいただいた。

「なんで？」と思って、AndroidSDKでXperiaをエミュレートして検証してみたところ、Androidの標準ブラウザでは、local()を指定した@font-faceのsrc属性は無視されることが分かった。この挙動は最新のAndroid2.2でも変わらない¹。

AndroidのUserAgentを持つ端末に以下のようなCSSを与えると、ウェブフォントはきちんと適用された。

@font-face {
    font-family: Textar;
    src: url("/media/fonts/textar-min.ttf") format("truetype");
}

この検証が終わった後、ウェブを見ると、@font-face gotchasに以下のようなコメントがあるのを見つけた。

Be advised that the bulletproof and bulletproof smiley methods you propose here do not work on Android phones! My User-Agent is "Mozilla/5.0 (Linux; U; Android 1.6; en-us; T-Mobile myTouch 3G Build/DMD64) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1".
Android does support @font-face and the double declaration method works fine. It appears to be choking on the local() line, ignoring everything after local.

これに早く気づいていたらなあ。

---

1. ちなみにAndroid2.0および2.1ではウェブフォントがなぜか使用できなくなっている(参照)。2.2からまた使用可能。
   

指定したフォントが存在するかどうか検出するJavascriptの関数

function detectFontsAvailable(fontFamilies) {
      var parentElem = document.getElementsByTagName("html")[0];
      var elem = document.createElement("span");
      elem.style.visibility = "hidden";
      elem.style.position = "absolute";
      elem.style.top = "-10000px";
      elem.style.left = "-10000px";
      elem.style.fontFamily = "__FAKEFONT__";
      elem.style.fontSize = "32px";
      elem.innerHTML = "abcdefghijklmnopqrstuvwxyz";
      parentElem.appendChild(elem);
      var defaultWidth = elem.offsetWidth;
      var defaultHeight = elem.offsetHeight;
      var result = false;

      for (i = 0; i < fontFamilies.length; i++) {
          elem.style.fontFamily = fontFamilies[i];
          result |= (elem.offsetWidth != defaultWidth || elem.offsetHeight != defaultHeight)
      }

      parentElem.removeChild(elem)
      return result;
}

JavaScript/CSS Font DetectorとJquery Font Available を参考に書いたもの。

親要素にbodyではなくhtml要素を使うことによって、body要素のonload前でもフォントの検出が可能になった。

たとえば以下のようにすると、MSPゴシックとIPAモナーフォントとモナーフォントがデバイスにインストールされているかどうかチェックできる。

detectFontsAvailable(["MS PGothic", "IPAMonaPGothic", "Mona"])

要はフォント適用後の要素のサイズが変化しているかどうかで存在チェックをかけているだけなので、たぶん等角フォントにはうまく効かない。試していないけど。



追記：
OSがXPだったりブラウザがIEだったりすると、この関数うまく働かないです。
注意。

Google font directory が配信しているフォントのレスポンスヘッダ

HTTP/1.1 200 OK
Content-Type font/ttf
Content-Encoding gzip
Expires Thu, 04 Nov 2010 10:04:39 GMT
Date Wed, 03 Nov 2010 10:04:39 GMT
Cache-Control public, max-age=86400
Access-Control-Allow-Origin *
Last-Modified Mon, 01 Nov 2010 22:14:04 GMT
Content-Length 3151
Content-Disposition attachment; filename="Vollkorn-Regular.ttf"
X-Content-Type-Options nosniff
X-Frame-Options SAMEORIGIN
X-XSS-Protection 1; mode=block
Server GSE

メモ。

重要なのは、Access-Control-Allow-Origin。

接頭辞がXのヘッダはどうなんだろう。軽くググって解説サイト見たけど、入れたほうがよいのかも。

AA表示対応 Web Font の配信サービス3

ウェブフォント使ったテストページを作ってみたのだけれど、どうもスマートフォンだと表示が崩れるらしい。

報告してくださった方によると、特にXperiaがひどいらしい。iPhoneならともかくAndroidでそこまで崩れるとは予想外だった。Google Chromeで動くんだからAndroidでも大丈夫だろうとか甘く考えていたのがいけなかった。

ってことで、どうしようかなと思っていたのだけど、どうやらXperiaはAndroidSDKでエミュレートが可能らしいので、それを使ってこれからどこが悪いのか検証してみることにする。個人的には、Bulletproofな@font-face記述が悪さをしてるのじゃないかなと思うのだけど、どうだろう。

AA表示対応 Web Font の配信サービス2

Textarフォントを更新した。

内容的にはen-spaceとem-space、thin-spaceのグリフを追加しただけなんだけど、今回から配布ファイルにEOTフォントも含めるようにした。IE9でWOFFに対応にすると聞いていたので、EOTフォントは別になくても問題ないかなと思って外していたのだけど、気が変わった。


で、ウェブフォント配信サービスの開発状況だが、Web font loaderを使ったフォントの読み込み用のJavascriptは書けたので、あとはGoogle app engineでサイトを作るだけ。

簡単なしくみのサイトなので、フレームワークはwebappを使おうかなと思っているのだけど、ひさびさに触ったせいか使い方をさっぱり忘れていた。

記憶力ないからドキュメント読みなおしてばっかだなー。

AA表示対応 Web Font の配信サービス

先々週ぐらいからTextar DBというAAサイトを運営している。

ありがたいことにいろいろ感想いただいているのだけれど、そのなかに「スマートフォンでAAを閲覧できて便利」という意見があって、自分が思っていた以上にスマートフォンでAAを閲覧するという需要は大きいのだなと感じた。

Textar DBではAAのサムネイル画像を一覧に表示しているので、スマートフォンでもAAの確認をするぶんにはなんの問題もないのだけれど、テキストを表示するとやはりズレる。

このズレを解消するために、新たに、AA表示用に使える Web Font の配信サービスをGoogle App Engineを使って作ろうと考えている。Textar DBだけじゃなくて、他のサイトでもJavascriptを読み込むだけで、簡単に Web Font を適用できるようなのを。

努力義務的決意表明

今日から毎日ポストしていきたいと思います。
なるべく。
書くことがなくても。