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

サブブラウザをFirefoxからFirefox Developer Editionに乗り換えた

Phoenixから使ってきたMozillaのブラウザをFirefoxからFirefox Developer Editionに乗り換えました。

現在はSafariをメインのブラウザとして使っており、あまり出番がなく、ダウンロード先のフォルダを指定したい場合やFirebugが必要な時のみ使用していました。

Firebugとも、サヨナラしました...

Firefox

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

おなじみ素敵な日本語フォントを公開している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も必要なのだが、これは以下のサイトで変換して作成する。

.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;を指定すれば、あらキレイ！

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とか最新情報

早速、Firefoxの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・画像など最適化し、アドバイスも表示される。最適化されたものはダウンロードして実際に利用出来る。

早速、トップページを最適化してみた。予め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が使えるようになったみたいです。

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

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

概要とショートカットを入れ、URLを選択しURL欄には以下を記述する。

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

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

&showimagereport=yes

Movable Type 4 ベータ 7のStyleCatcher

Movable Type 4 ベータ 7を公開

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

Movable Type 4 ベータ 7を公開

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 のインポート・エクスポートも可能なので重宝するのだが、長文の場合に段組では読みにくい。

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

読みやすい！

参考になるリソース

Sage - Mozilla Firefox まとめサイト

CSS
Firefox

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以外の方にはご覧いただけるんですが...

参考になるリソース

Firefox
IE

StyleCatcher

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

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

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

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

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

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

@Style