タグ「Firefox」が付けられているもの

M+ FONTSをWebフォントで使う

おなじみ素敵な日本語フォントを公開しているM+ FONTS

M+ FONTS

ライセンスも「フリー」と謳われており、Webフォントとしても利用できる。

These fonts are free software.
Unlimited permission is granted to use, copy, and distribute them, with or without modification, either commercially or noncommercially.
THESE FONTS ARE PROVIDED "AS IS" WITHOUT WARRANTY.

これらのフォントはフリー(自由な)ソフトウエアです。
あらゆる改変の有無に関わらず、また商業的な利用であっても、自由にご利用、複製、再配布することができますが、全て無保証とさせていただきます。

ということなので、早速使ってみた。

http://mplus-fonts.sourceforge.jp/webfonts/からお好みのフォントをダウンロード。今回はフラットデザインでの利用なので細めのmplus-1p-light.ttfを選んでみた。

インターネットエクスプローラー用に.eotも必要なのだが、これは以下のサイトで変換して作成する。

ttf2eot

.ttfファイルを選択して【Convert to .eot】ボタンをクリックするだけで完了する。

後は、フォントを適当なディレクトリに放り込みCSSに以下を追加記述する。(パスは適宜変更)

/*IE*/
@font-face {
font-family: mplus-1p-light;
src: url("mplus-1p-light.eot");
}
/* Firefox, Opera, Safari */
@font-face {
font-family:mplus-1p-light;
src:url("mplus-1p-light.ttf") format("truetype")
}

注意:Firefoxなどで適用できないこともあるので、必ずIE用の.eotを先に記述します。

使いたいところでfont-family: 'mplus-1p-light' , sans-serif;を指定すれば、あらキレイ!

Webフォントで表示

W3C Nu Markup Validation ServiceをWeb Developerに登録

- W3Cが「W3C Nu Markup Validation Service」を発表
http://validator.w3.org/nu/
以前から http://validator.nu/
として公開されていたサービスと同じバックエンドを用いており、DTDを利用せずに検証を行うサービスです(HTML5にはDTDがありません)。
Microdataのみならず、RDFa CoreやRDFa Liteも検証できるそうです。

CSSで変数を使えるようになる!? - 本日のHTML5とか最新情報

W3C Nu Markup Validation Service

早速、FirefoxのWeb Developerに登録

Web Developerに登録

http://validator.w3.org/nu/?showsource=yes&doc=

Page Speedを利用してページのパフォーマンスを改善

最近サイトの構造を変更したので検索エンジン用のsitemap.xmlも登録し直した。インデックスの具合を知るためにGoogle ウェブマスターツールをよく確認するのだが、面白いツールがあったので試してみた。

Page Speed はオープンソースの Firefox/Firebug アドオンです。ウェブマスターと Web デベロッパーは Page Speed を使用して Web ページのパフォーマンスを評価し、改善方法のヒントを得ることができます。

Page Speed

使い方は簡単。FirefoxのアドオンにインストールするとFirebugに機能が追加される。

CSS・JS・画像など最適化し、アドバイスも表示される。最適化されたものはダウンロードして実際に利用出来る。

Page Speed

早速、トップページを最適化してみた。予めCSSとJSはYUI Compressorで圧縮していたので、画像だけPage Speedで最適化。htmlファイルは手作業で空行と改行を削除した。

トップページの合計ファイルサイズ61.7KBとかなり容量が減らすことができた。

お試しあれ...

Web DeveloperにValidator.nu (X)HTML5 Validatorを追加

先週からMarkup Validation ServiceでHTML5を検証してみるとExternal Checker not availableとなり上手く検証出来ないのでValidator.nuを使っている。

4月20日追記:Markup Validation Serviceが使えるようになったみたいです。

Validator.nu

いちいちページを開いてURLコピーするのが面倒なのでWeb Developerの「ツール」に登録した。

「ツールを編集する」を開き、「追加」をクリック。

概要とショートカットを入れ、URLを選択しURL欄には以下を記述する。
http://html5.validator.nu/?showsource=yes&doc=

Web Developer

イメージレポートも必要であれば以下のパラメーターを追加する

&showimagereport=yes

Movable Type 4 ベータ 7のStyleCatcher

Movable Type 4 ベータ 7を公開[外部へのリンク]

Movable Type 4 ベータ 7 よりデフォルトテーマとして Vox のテーマがいくつか同梱されており、スタイルメニューからテーマを選択することがでるようになりました。正式版ではこれらのテーマ全てが製品に同梱されるというわけではなく、別の方法での提供になる可能性があります。

Movable Type 4 ベータ 7を公開[外部へのリンク]

スタイル選択画面

Voxでお馴染みのスタイルが同梱されていた。

Voxでお馴染みのデザイン

レイアウトも【3カラム、大・小・小】と【3カラム、小・大・小】が選択できる。しかし、 【2カラム、大・小】と【2カラム、小・大】は稼動しない。

<body class="<MTIf name="body_class"><$MTGetVar name="body_class"$> </MTIf><$MTGetVar name="page_layout" default="layout-wtt"$>"<MTIf name="body_onload"> onload="<$MTGetVar name="body_onload"$>"</MTIf>>

この部分で制御している。

つまりはlayout-wttが【3カラム、大・小・小】

フッターを見ると一目瞭然

                        </div>
                    </div>
<MTIf name="sidebar">
    <MTIf name="page_layout" eq="layout-tw"$>
                    <$MTInclude module="サイドバー (2カラム)"$>
        <MTElse>
            <MTIf name="page_layout" eq="layout-wt"$>
                    <$MTInclude module="サイドバー (2カラム)"$>
                <MTElse>
                    <MTIf name="page_layout" eq="layout-twt"$>
                    <$MTInclude module="サイドバー (3カラム)"$>
                        <MTElse>
                    <$MTInclude module="サイドバー (3カラム)"$>
                        </MTElse>
                    </MTIf>
                </MTElse>
            </MTIf>
layout-tw
サイドバー (2カラム)【2カラム、小・大】
layout-wt
サイドバー (2カラム)【2カラム、大・小】
layout-twt
サイドバー (3カラム)【3カラム、小・大・小】
layout-wtt
サイドバー (3カラム)【3カラム、大・小・小】

レイアウトの変更がより容易になったようだ。

SageのCSS

RSSリーダーを使わずFirefoxの拡張機能であるSage 1.3.10を利用してフィードを読んでいる。OPML のインポート・エクスポートも可能なので重宝するのだが、長文の場合に段組では読みにくい。

以前からスタイルシートをカスタマイズして文字を大きくしていたのだが、今日は中途半端に時間が余ったので、ちょこっといじってみた。今日のカスタマイズはblockquotepre

sage

読みやすい!

参考になるリソース

Firefox 2.0.0.1

とうとうメインブラウザをFirefox 2.0.0.1にアップグレードした。

動作がなんだかもっさりしている。レンダリングに時間がかかり、タブを閉じる際に一瞬動作が止まる。

こんなはずじゃない…

オプション等をいじってみたのですが効果なし。思い余って、アドオン(拡張機能)を無効にしてみる。About This Siteを外した途端、きびきび動く。Firefox 2.0.0.1との相性はあまり良くない様です。心配していたXSLTもFeed with Stylesheetを利用して、サイトの制作者に敬意を払ってみる。

それにしても、Internet Explorerはいつアップグレードするか…

RSSフィード

IE7もFirefox2もRSSを特別扱い(The Web KANZAKI ちょっとしたメモ)

IE7がRSSフィードのXSLTを無視することは以前も書いたが、Firefox 2.0までやってくれるとは。RSSの普及に対応し、特別なスタイル指定がなくてもフィードを読めるようにするという趣旨は分からんでもないが、HTML のブラウザが作者スタイルシートがあればそちらを優先するように、文書のスタイル指定は尊重するほうが望ましいのではないか。

IE7もFirefox2もRSSを特別扱い(The Web KANZAKI ちょっとしたメモ)

Firefox 2.0のほうは、フィードリーダに何を使うかが選択できるだけで、XSLTを有効にするオプションは見あたらない。しかも、デフォルトのフィードリーダでは、RSSの名前空間の要素のみが表示されて、dc:dateなども無視されるというお粗末さ(と思ったら、RSS2.0やAtomでも日付情報などは表示されない。

IE7もFirefox2もRSSを特別扱い(The Web KANZAKI ちょっとしたメモ)

XHTMLで制作されたページをブラウザの特定のスタイルで読むとなれば、制作者は悩むことは無い。しかし、ブラウザが制作者によるスタイルシートを優先して表示してくれるので、「こう見せたい」「こっちが解かりやすいぞ」等と使いやすく伝わりやすいサイトを目指しているのです。

同様にXSLT・XSLもできれば制作者の表現を尊重して表示していただきたい。

このサイトのRSSやブログのRSS(RDF)にはスタイルシートを使っています。IE7やFirefox2.0以外の方にはご覧いただけるんですが...

参考になるリソース

StyleCatcher

@StyleでもStyleCatcher用のスタイルシートを公開していますが、StyleCatcher自体に期待しうる点はあまり無い。 ただスタイルシートをインポートするだけ。
9月20日公開のロフトワークの「スタイル・ライブラリ」を見ても然りである。

気分転換でVoxのデザインを変えて遊んでいるようなものだと思う。

mixiでのある方の日記でも、「ビジネスを意識したテンプレっていうのを見たけど使えないレベル」と書かれていた。

MovableTypeをCMSツールとして利用したい場合には、スタイルシートの編集(変更)だけではどうしようもできない。テンプレートの編集が必要となるのだが、WordPressのテーマやNucleusスキンの様に(FTPを利用しても)テンプレート自体を直感的に変更できる手段が無い。

Template Backup and Refreshの様な方法を使い、全てのテンプレートを一括初期化するなど簡単な手段を提供して欲しい...

【10月20日一部編集いたしました】

SageでGmail

ITmedia Biz.ID:Gmailの新着メールをRSSリーダーでチェックする

Gmailには新着メールをAtomフィードで出力する機能がある。これを使えば、Gmailの新着メールをRSSリーダーで高速にチェックできるようになる。

ITmedia Biz.ID:Gmailの新着メールをRSSリーダーでチェックする

ただし、GmailのAtomフィードを読むためには、RSSリーダーがAtom 0.3、SSL、HTTP 認証に対応している必要がある。Googleでは推奨のRSSリーダーをサイト上で公開しているが、その中には国産の著名なRSSリーダーは含まれていない。実際にいくつかのRSSリーダーを試したところ、登録が可能だったのは上記のHeadline-Readerなど一部のRSSリーダーのみだった。

ITmedia Biz.ID:Gmailの新着メールをRSSリーダーでチェックする

早速、Firefoxの拡張機能【Sage】で試してみることにした。

https://ユーザー名:パスワード@mail.google.com/mail/feed/atom
とSageに登録。テストメールを送信した後にSageの更新チェックを行えば見事に新着メールを取得することが出来た。

Gmail Manager入れてるし、空いた時間しかSageの更新チェックはしないしね...

ベータ

今日は仕事以外で忙しい。
ノートパソコン(FMV BIBLO MG)にIE7ベータ3をインストールが終わったと思ったら、Firefox2.0ベータ1リリースのニュース。

正式にリリースではないようですが、ダウンロード。こちらもノートパソコンにインストール!

1.5.0.4と同居しています。

それから、MovableType 3.31のリリース。2つ動かしているのでどちらもアップグレード。
その際エントリータグを削除。再構築がずいぶん早い…

Movable Type 3.3 ベータ3

Movable Type 3.3 ベータ3を公開

Movable Type 3.3 ベータ3

セミナーで質問した際に平田さんの話ではベータ2以降はバグフィックスだそうなので、ベータの内に14のテンプレートを作ってみた。即、製品版に移行出来るようにライセンスを一つ追加して、準備万端。公開・販売用のページやStyleCatcherも対応済み

この2週間がんばりすぎました...

Spread Firefox Japan

サイトSpreadFirefoxの日本版,5月上旬にも開始

「SpreadFirefox日本版を,ゴールデンウイーク明けにもオープンします」---Mozilla Japan理事の瀧田佐登子氏は4月30日,Mozilla Party JP 7.0(関連記事)の講演で,マーケティング・サイトSpreadFirefoxの日本版を開設することを明らかにした。

サイトSpreadFirefoxの日本版,5月上旬にも開始

Welcome to Spread Firefox Japan group.

So in other words, this is an area for Japanese and Japanese speaking people to talk in their own language, it is not an area for English speaking people to talk about spreading Firefox in Japan, we hope members respect this intention.

Welcome to Spread Firefox Japan group.

おっ!サイトの表示が日本語となっている。早速エントリーしている方もいる。

WindowsユーザーはIE7を待つまでも無く、MacユーザーはIE5を捨てて(SafariはOK?)、Web標準サポート率が高いFireFoxを

(-moz-border-radiusを使ってみたい...)

IE以外のアクセスを排除するのか

かつての悪しき日々は今もなお | Web標準Blog

プロのWeb開発者のほとんどが、なぜブラウザ判別が良くないアイデアなのかを理解しており、以来長きにわたり、期待されたほど有能でないユーザーエージェントであってもサイトがうまく機能するよう試みるオブジェクトまたはプロパティのような、より強固なテクニックに移行してきました。しかし明らかに、Yahoo! Musicはそのような流れを理解していません。そのサイトは今なおブラウザ判別を行っており、Windows版のFirefoxを使ってミュージックビデオにアクセスしたユーザに対し、Netscape 7.1もしくはそれ以上に「アップグレード(明らかにそれはダウングレードです、なぜならNetscape 7.1はFirefox 1.xの備えるよりも古いバージョンのGeckoレンダリングエンジンを搭載しているのですから)」するよう促すのです。MacでYahoo! Musicにアクセスしてみてください、事態は一層不愉快なもの......つまり表示される文言は「Yahoo! Musicは閲覧にNetscape Communicator 4.7を必要とします」となります。

かつての悪しき日々は今もなお | Web標準Blog

昨日、YahooアバターがTシャツのままだったのを思い出して着せ替えをしようとしたら、「ライト版は、2006年春に提供を終了する予定」とアナウンスされていた。アバターライトを使用しているわけではなく、ブラウザ判断でIE以外ではアバターライトで表示されるのです。

Yahoo!アバターのライト版はノーマル版とは異なり、JavaScirptやダイナミックHTMLを使用していません。ライト版は、Netscapeなどのブラウザに対応し、さまざまな事情によりInternet Explorer 5.0以上をご利用いただけないユーザーの皆様でも、アバターをお楽しみいただけます。

DELLのページの一部もIEでしか閲覧できない。ECサイトがアクセスを排除していることが理解できない。

弊社オンラインストアは、Internet Explorer4.0以上、Netscape4.6以上でのみご使用いただけます。

今更、IEを使用する理由はなく、新マシンの導入も完了した、Yahooはほとんど利用しない、アバターを見ることもない。

Nucleus CMS Skin Contest

Nucleus CMS Skin Contest

Nucleus CMS is proud to present its first ever Skin Design Contest!

Wouter "karma" Demuynck, founder and primary developer of the Nucleus CMS has generously offered $600 USD in total prizes for the first ever Nucleus CMS Skin Design Contest!

Nucleus CMS Skin Contest

Nucleusのスキンコンテストが始まります。賞金は40ドルから140ドルとあまり多くないのですが、応募してみる価値あり?

This division is for designers familiar with or would like to learn Nucleus' skins and templates system. Entrants must submit a fully working skin in a single .zip file that can be downloaded and imported by users.

Nucleus CMS Skin Contest

NucleusやWordPressではスキン・テンプレートのコンテストが行われ、その後テンプレートはユーザーがダウンロードして利用できます。

MovableTypeのStyleCatcherは簡単にスタイルシートを適用できるのですが、StyleCatcher自体がプラグインとなっており、その設置もパスなどの設定があり不慣れな方にとっては容易ではありません。
スタイルシートやテンプレートの適用がもう少し簡単だったら、こういうのも可能かもしれませんね。

配布する側もそちらの方がやりやすいのですが・・・

クリエイティブ・コモンズのメタデータ

Movable Type テンプレートのダウンロードページには、商用利用不可を明記するために、クリエイティブ・コモンズを利用しております。XHTML内にコメントとしてC.C.メタデータを埋め込んでおり、XHTMLのコメント内では、<や>が使用できないので改善の必要がありました。

The Web KANZAKI クリエイティブ・コモンズのメタデータ

CCのサイトの説明では、RDFをHTMLに結びつける手段として、(1)外部ファイルとして保存し、link要素で参照する、(2)head要素内に直接記述する、(3)body要素内に直接記述する、(4)HTML内にコメントとして(<!-- -->で囲んで)記述する、という4つの方法をあげ、その中で(4)のコメント方法を推奨しています。しかし(4)の方法は、「マシンが理解できるようにRDFとしてライセンスを提供する」という考え方と矛盾しており(コメントはHTML作者などの人間が読むためのものです)、適切とは言えません。

早速、link・meta要素を利用して書き換えてみました。

<link rel="schema.CC" href="http://web.resource.org/cc/" />
<meta name="CC.license" content="http://creativecommons.org/licenses/by-nc-sa/2.1/jp/" />

mozCCでもうまく判別されています。

まずはFirefox

CSSの勉強にCSS Creatoをよく見に行く。

そのサイドバーに本日のブラウザ統計が表示されている。

Firefoxが好調とはいえ、IEの倍近く。
IEが90%以上のシェアを誇っているのに、この数字があらわすものは・・・

CSSでテンプレートを作る場合には、まずFirefoxで確認し、IEでちゃんと表示できるように修正。一時期のネットスケープとは逆転した状態です。

バグだらけのIEは使い物になりません。