ラベル customize-google の投稿を表示しています。 すべての投稿を表示
ラベル customize-google の投稿を表示しています。 すべての投稿を表示

2011年4月19日火曜日

Google Font APIはどうやってマルチブラウザ対応しているのか

WebFontsを読み込む場合のCSSの書き方はブラウザごとに異なるため、こんなsyntaxを使う必要がある。
しかし、Google Font APIで読み込むCSSをではそんな書き方はしていない。
そこで、試しにTangerineのCSSを各ブラウザで読み込んでみて、Google Font APIがどのようにマルチブラウザ対応をしているのか調べてみた。


IE 8

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RPY6323mHUZFJMgTvxaG2iE');
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw') format('woff');
}
URLはIE専用。
2行目のsrcはIE9用？


Firefox 4
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw') format('woff');
}
URLはChromeと同じ。


Chrome 10
@media screen {
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw') format('woff');
}
}
URLはFirefoxと同じ。
@mediaでscreenだけにしているのはAndroid対策か何かか？


Safari 5 (for Windows)
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RKCWcynf_cDxXwCLxiixG1c') format('truetype');
}
URLはSafari用（Operaと共通）。アンダーバーで区切ってるのはiPhone用（iOS用？）が別にあったりするためか？


Opera 11
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RKCWcynf_cDxXwCLxiixG1c') format('truetype');
}
URLはSafariと同じ。OperaもTrueType組。


まとめ
おそらくUser-Agentで判断して振り分けているだけのようだ。
フォントファイルは大きく分けると下記の3つに分かれるようだ。
  • IE8-
  • IE9+、Firefox、Chrome
  • Safari、Opera


参考：Webフォント (Webfonts)を使う際の最新記述方法 Fontspring Syntax (The New Bulletproof@Font-Face Syntax) - フォントブログ

tags: , , , , , , , , , , 0 コメント

2010年11月16日火曜日

大手サイトがやっている自サイト専用のURL短縮サービス

思いつくものをまとめてみた。
bit.lyによる独自ドメインURL短縮サービスで日本人にあまり馴染みのないもの（NY Timesとか）は除外した。

サイト
短縮URL
備考
Google Maps
FeedBurner
goo.gl
Google Mapsは goo.gl/maps/xxxx
FeedBurnerは goo.gl/fb/xxxx
その他のサイトの場合、 goo.gl/xxxx
YouTube
youtu.be
後ろに動画のIDを付けると、その動画の短縮URLになる。
例： http://youtu.be/4qCbiCxBd2M
Yahoo!
yhoo.it
powered by bit.ly
uk.yahoo.comやfr.yahoo.comは短縮してくれるが、
yahoo.co.jpは対象外。なぜかtw.yahoo.comも対象外。
Flickr
flic.kr

Delicious
icio.us
ドメインハックの先駆者がこんな形で再利用されるとは。
Bing
binged.it
短縮URLは既に機能しているが、
URL生成はまだプライベートBeta。
Amazon
（USのみ）
amzn.com
後ろにASINを付けると、その商品ページの短縮URLになる。
例： http://amzn.com/B002FQJT3Q
Kindleの場合、「amzn.com/k/xxx」のようだ。
アソシエイトはできるのかな？
Amazon
amzn.to
powered by bit.ly
こちらはamazon.co.jpも対象。
Facebook
fb.me

Twitter
t.co

foursquare
4sq.com

MySpace
mysp.ac
powered by bit.ly
Ustream
ustre.am

Dailymotion
dai.ly
powered by bit.ly
Scribd
scr.bi
powered by bit.ly
楽天
r10.to
どこで生成できるか分からなかった
mixi
mixi.at

ニコニコ動画
nico.ms

はてなブックマーク
htn.to
powered by bit.ly （2011/3/21 訂正）
PIXIV
p.tl

日経新聞
s.nikkei.com
powered by bit.ly


日経新聞のサブドメインを使うやり方は好感が持てる。
Bingはよく考えたら自サイト専用じゃないけどまあいいや。
ところでyhoo.itはYahoo! Italia（it.yahoo.com）と間違えそう。


（2011/3/21 追記）
htn.toは、はてなブックマークだけでなく、はてな全般で使われているみたい。（これを書いた後で変わった？）
また、bit.ly proを使ってるわけではないようだ。
（追記終わり）


参考：
Bit.ly、月間47億クリック。Pro版も好調、Yahoo、MySpaceらも採用
bit.ly | Basic | a simple URL shortener
JSTwi


tags: , , , , , , , , 0 コメント

2010年9月22日水曜日

フリーで使えるJavaScriptと CSSの CDNいろいろ

httpsが使えるのはGoogleとMSのみ。
httpsに拘らないならCached Commonsがライブラリ豊富で便利そう。
でも使いたいライブラリがGoogle Libraries APIで間に合うならGoogle Libraries APIでいいんじゃないかな。レスポンス速度が速いし。
（レスポンス速度はminファイルのロード時間を4回計った2～4回目の平均値。状況によって変わってくるだろうから、参考程度に。）


Google Libraries API

  • 主要なJavaScriptライブラリをホスティングしている
  • バージョン指定でメジャーバージョンのみの指定や、マイナーバージョンまでの指定等が可能
  • https可
  • YUIはバージョン2しかない
  • ブラウザキャッシュは1時間 or 1年間（参考：floatingdays: Google AJAX Libraries APIのブラウザキャッシュ期間）
  • レスポンス速度
    • jQuery：0.069秒 
    • YUI 2 YUI Loader：0.066秒


Microsoft Ajax Content Delivery Network - ASP.NET Ajax Library
  • ASP.NET関連以外ではjQuery関連の3つをホスティングしている。Validationプラグインは便利かも？
    • jQuery
    • jQuery UI
    • jQuery Validationプラグイン
  • https可
  • ブラウザキャッシュは1年間（max-ageとExpiresが違う気がする？）
  • レスポンス速度
    • jQuery：0.161秒


YUI
  • httpsは使えない
  • JavaScript、CSSをそれぞれ1つずつにまとめられる（Combine Files）のは便利
  • ブラウザキャッシュは10年間
  • レスポンス速度
    • YUI 2 YUI Loader：0.181秒


Cached Commons


JsLoad: Remote loading API of JavaScript library
  • Google App Engineで作られている
  • 2008年10月から更新されていないようだ


JavaScript Host（←※リンク切れ）
  • 閉鎖しちゃったみたい


(2010/10/19 追加)
jQuery Code Server
  • jQuery自身によるjQueryのホスティング
  • ダウンロード用のファイルをそのままhotlinkしてよいことにしたようだ
  • jQuery UIとかプラグインは提供しないのかな？



参考

tags: , , , , , , , , , , , 0 コメント

2009年5月13日水曜日

Firefoxのアドオン CustomizeGoogleを自分で SearchWikiに対応させる方法

やったことのメモ。
Firefoxは閉じてからやった方がよいと思う。

  1. FirefoxのProfilesフォルダを開く
  2. extensionsフォルダの中からCustomizeGoogleのフォルダを探す
  3. chromeフォルダの中にファイル「customizegoogle.jar」があるので、これのバックアップをとっておく
    （必須ではないが、念のため。）
  4. customizegoogle.jarを解凍ソフトで開く（たぶん拡張子をZIPにすればWindowsの標準機能でも展開できると思う）
  5. contentフォルダの中にあるcustomizegoogleフォルダの中にあるファイル「javascript.js」をテキストエディタで開く
  6. 文字列「/li[@class='g']」を、全て「/li[@class='g' or @class='g w0']」に変換し、ファイルを上書き保存する
  7. contentフォルダ、localeフォルダ、skinフォルダをまとめてZIPにして、ファイル名を「customizegoogle.jar」にする
  8. 作った「customizegoogle.jar」を、3の同名のファイルのところに上書きコピーする


検索結果はli要素として表示されるが、そのclass属性が"g"から"g w0"に変わったことが原因だった。
「検索ツール」を使って再検索した場合など、class属性が昔ながらの"g"になる場合もある。
"w0"の意味は知らないので期待通りに動かないこともありそうだが、とりあえずこれで様子を見る。

tags: , , , , , , , 0 コメント

登録: 投稿 (Atom)

ブログ アーカイブ

tags