1〜2 ヶ月に一度のペースで東京や各地で開催している Mozilla 勉強会ですが、次回はWeb に関わるお仕事や活動をしている人が福岡で集まり HTML5やその周辺技術について学ぶ HTML5+α ＠福岡 との合同開催となりました！

[これは Mozilla Add-ons Blog の記事 Sandboxed add-ons to be disabled next week の翻訳です]

1 か月ほど前、新しい開発者ツールと審査プロセス が AMO に実装されたことが発表されました。この新しい審査プロセスについては さらに詳しい説明 を投稿していますので、まだご覧になっていない方はぜひ目を通してください。

(さらに…)

[これは Mozilla Add-ons Blog の記事 Toolbar buttons in Firefox 4 – revisited の翻訳です]

更新: 当初これらの変更が Beta 11 で行われたと書きましたが、Beta 12 の間違いでした。この新仕様は最新のナイトリービルドで試せます。あるいは近日公開予定の Beta 12 をお待ちください。文中のサンプルは Beta 11 でも動作しますが、ひとつだけバグがあります。Linux でツールバーが「大きいアイコン」モードになっているとき、大きいアイコンが使われますが、実際の表示は縮小されてしまい、Windows で常に小さいアイコンが使われるような状態になってしまいます。

数か月前、筆者 [Jorge Villalobos] は Firefox 4 のツールバーボタンとアイコン に関する記事を書き、3 プラットフォームすべてにアドオンを対応させるのに必要な CSS と画像の例を説明しました。この記事には「なぜこれほど複雑なのか」「いつになったら本当にシンプルな仕様になるのか」といった趣旨の質問が多く寄せられました。そのため、バグが立って仕様が再検討され、その結果、多くの問題がようやく解決されました。

(さらに…)

[これは Mozilla Add-ons Blog の記事 An Overview of the AMO Review Process の翻訳です。Mozilla Japan が運営する日本のユーザ向けアドオン紹介サイト AMJ (addons.mozilla.jp) でアドオンを公開したい場合も、AMO に登録し審査を受ける必要があります。AMO の事前審査もしくは本審査を通った日本語化済みのアドオンは、AMJ にも半自動的に掲載されます]

約 1 年前、筆者 [Jorge Villalobos] は アドオンの審査過程について詳しく説明した長文記事 を投稿しました。先日新しい開発者ツールを公開してから数週間が経過し、新しい審査過程がどのような流れになっているか説明する新たな記事が必要となりました。今回は短めに解説しようと思います。

なお、Personas については審査手順が異なるため、この記事では扱いません。

(さらに…)

• 原文: People of HTML5 – Bruce Lawson (Chris Heilmann著)

今後のHTML5の普及にあたり、主導的に普及を進める人々の存在は必要不可欠である。今回私達Mozillaでは、現在この役回りを演じる人々をインタビューと短いビデオにより紹介する。インタビューの形式は、我々が予め用意した10の質問に対する文字ベースの回答と、彼らの自己紹介及び回答に対する詳細を含むビデオによって構成される。

我々が最初に紹介するのは、Opera所属、Introducing HTML5共著者であり、HTML5 Doctorの監督者であるBruce Lawson(@brucel)である。

ビデオインタビュー

ビデオインタビューはYoutube、もしくはArchive.orgより以下の形式にて閲覧可能である。WebM (45MB)、OGG (70 MB)、MP4 (70 MB)。

Bruce Lawsonへの10の質問

1) あなたの考えるHTML５は何か、また今後のWeb開発を考えたときのHTML5の持つ意味合いは？

HTM5はwebアプリケーション開発用の言語であり、アプリケーションをより堅牢かつ互換性のあるものにする、また、webブラウザの可能性を最大限に発揮することにより、webをよりネイティブなアプリケーショに近づける可能性を持っている。

2) HTML5の世界と関わることになったきっかけ、及びHTML５への貢献を行う際のモチベーションは？

私の背景はアクセシビリティとマークアップ言語の記述にある。よって、webにおける新しい言語の開発作業へは嬉々として参加した。また、現在働くOperaがHTML5の立ち上がりに大きく関わっていたため、（仕事の時間を使った）HTML5への開発従事を私のボスは喜んで承認してくれた（笑）

3) 最もエキサイティングだと考える最新技術は？

もちろんHTML5！また、DAP (Device APIs and Policy Working Group)に対しても最近は大きな関心を持っている。DAPはGeolocationがブラウザ経由で嬉々のGPS情報を取得することが可能であるように、カメラや手帳、カレンダーといった実世界におけるデバイスをWeb上で利用する為のAPIの策定を行っている。HTML5のように、DAPでは既存の優れたAPIを包括し、DAP促進の為にデバイスの生産者等によるサポートも受け付けている。

4) HTML5に関する書籍(Introducing HTML5)を執筆するにあたり、最も困難だと感じたことは？そもそも現段階ではHTML5の定義はまだ曖昧なのでは？

時代遅れな出版プロセス（全ての文章はMicrosoft Wordにて執筆されなければいけない！）以外は、執筆作業と同時進行でHTML5の仕様が動的に更新されたことが困難だと感じた。例えば、ビデオに関する章の構成と目次付が行われたのと同時に、webMのフォーマットが発表され、我々は再執筆を余儀なくされた。とはいえ、我々の本で対象とした多くの根本的な事柄に関しては読んですぐに実用可能であると思う。

5) HTML5に対する新しい名称として”NEWT”を提唱されているが、そもそもの言葉の意味合いと、HTML5でいけない理由は？

クライアントやジャーナリストは、CSS3、iなんとか上で視聴可能な動画、地理情報を使用可能なアプリケーション、をHTML5と称するだろう。確かにこれは新しいWeb2.0だが、CSS記述のセマンティックスが存在しないように、HTML5では画像のトランジションは存在しない。

DAP、CSS 3、HTML5、Geolocation, SVG, WebGLを総称するネーミングが必要ならば、Open Web Stack と命名するべきだ。しかし、人々は往々にしてシンプルかつキャッチーなネーミングを好むため、私はこれに対する皮肉も込めてNEWT(New Exciting Web Technologies)と命名した。

6)  HTML5普及に伴う最大の弊害は？

開発者の勉強不足が大きな弊害だと感じる。”完成されてない規格だから使えない”、”IE6のサポートをする必要があるから使えない”等が主な言い訳としてあげられる。この内私は前者の言い訳が最も嫌いだ。完成されていないから使えないのであれば、人々は英語という未完成の言語を使うのを辞めて、1799に完成したと思われるフランス語を使えば良い。

IE6サポートの問題に関しては、javascriptが使用可能な環境であれば、HTML5のエレメントをIE6上で実現することは容易である。そもそもjavascript無しで現在のWebをサーフィングすること自体、ユーザ体験を劇的に低下させかねないため、これは言い訳として不適切である。

7) 古いブラウザへのHTML5の普及に関する修正が盛んに行われているが、サポートに伴う余分なコードやファイルが多数存在する。これは、本当に必要なことなのだろうか？あなたの”polyfills (アドオンによる非互換性の穴埋め)”に関するスタンスは？

RemyのHTML5 Shimを用いれば、大体の古いブラウザへのHTML５の互換性は確保することが可能である。プロジェクトによって個別のpolifillを用いることは確かに面倒ではあるが、同機能のコードをスクラッチから書くことに比べたら随分楽である。

Polifillは古いブラウザのみを対象としており、HTML5互換の新規のブラウザに関してはそもそもpolifillの存在すら知られていない。polifillはエレガントなものではないが、ユーザの締め出しやブラウザのスニッフィングを防ぐためにも必要なものであると考えている。

8)  HTML5の推奨デザインパターンのうち、望ましくないと考えるものは何か？

Canvasへのアクセシビリティに関して、開発初期の段階でより細かい規定がされていれば良かったと思っている。現在多くの人々が独自の手法に基づいてユーザインタフェースの構築の際にCanvasを用いており、使用法に関して一貫性がない。今後の普及に伴い、一つの大きな問題になるのではないかと考えている。また、人名の周りにCITEを使用することが出来ないのは、馬鹿げだ仕様だと考えている。

9) HTML5に関して学ぶ場合、最適なスターティングポイントはどこか？

HTML5の入門に関して素晴らしい書籍はたくさん存在する。Mark Pigrimのオンライン書籍は導入として素晴らしい。私が共著したHTML5 Doctorは初級者を対象とした単発の記事が多数含まれている。

10) HTML5はHTML4.01やXHTMLに比べてマークアップの記述により寛容である。例えば、大文字と小文字タグの組み合わせや、アトリビュート周りのクォートを省略することが可能である。コードの品質を考えたときに、これは望ましくないのでは？

一言で言えば、そんなことはない。XHTML1やHTML4からHTML5へ移行することは容易であるし、そもそもブラウザの歴史上コードシンタックスに関してはあまり重要視されていない。プログラマーは自分にとって馴染むスタイルでコードを記述できるべきであるし、スタイルの統一に最してはHTML Lint等を用い、プロジェクトで使用するスタイルを決定することが可能である。

ボーナス：今後のWeb、及びWeb開発をより良いものとするための大きな課題は何か？

より分かりやすいCSSレイアウトのメカニズム、canvasやwebGLへのアクセシビリティの向上、そしてnude Open Standards evangilistsのより精力的な活動が必要不可欠である。

Firefox 4 では Gecko プラットフォームがメジャーバージョンアップし、再起動不要 (Bootstrapped) アドオンの仕組みが導入されたり、モバイル版で先行する Chrome/Content プロセス分離や高速化のため API やキャッシュやパッケージ方法が変更されたり、拡張機能開発者が知っておかなければならない変更点が多数あります。

このぺーじでは Firefox 4 で拡張機能開発が変化する点や、Firefox 4 時代に向けての開発情報をまとめてリンクしています。

プレゼンテーション

• Firefox 4 に向けて
  • スライド & 動画 – Mozilla 勉強会＠東京 5th
• Add-ons Builder を使った Jetpack 開発の手引き
  • アカツカ資料 & Gomita 資料 (動画はイベントページ参照)
• Jetpack に乗っかれないロートルのための、再起動いらずなアドオンの作り方 ～ Bootstrapped Add-on 詳説 ～
  • 資料 (動画はイベントページ参照)
• Jetpack Library 事始め
  • スライド & 動画 – Mozilla 勉強会＠東京 5th

その他イベントページからリンクしている勉強会などの資料をご参照ください。

ドキュメント

• Firefox 4 for developers & 原文
  • 開発者に影響する変更点の要約
• Add-on Builder チュートリアル
  • Web 上で簡単に拡張機能開発をする Add-on Builder の入門
• Add-on SDK ドキュメント
  • 本格的に Jetpack 開発するためのチュートリアルやAPI ドキュメント
• more and more…

Firefox 4 対応や仕様変更に関する投稿

• nsIPrefはFirefox 3.7以降では利用できません
• FUEL の仕様変更予定 (Application.getExtensions)
• Firefox 3.7 でのナビゲーションツールバーのアイコン画像サイズ
• Firefox 3.7でのjs-ctypes
• Firefox 4 にて拡張機能インストール後のフォルダ構成が変更されます
• アドオンの Firefox 4 対応に関する最新情報
• Firefox 4 のツールバーボタンとアイコン
• アドオンの Firefox 4 対応のお願い
• Firefox 4 最新情報：アドオンのためのスレッドとワーカー
• Firefox 4 のツールバーボタンの仕様がシンプルになりました

Tips や 注意点など

• How many hacks does it take to make your extension install without a restart?
  • 再起動アドオンを作る上で注意すべきことを Adblock 作者が解説した記事

役立つと思うページなどがあればどんどん追加していってください。

こんにちは、学生マーケティングメンバーの浦山です。

ご要望にお応えして、期間延長もした「firefox⇔学生　キャンペーン」応募が締め切りになりました！

ホントに様々な方からご応募いただきありがとうございますm(__)m

”えっこんなところから！”という応募もあって、このキャンペーンでFirefoxを知っていただいた人もいました！！

学生Firefoxユーザーが着々と増えてきているようです。

我らがふぉくすけ君による厳正なる抽選も行いました！（ｗ）

正式な結果発表まではもう少々お待ちください！

先週日曜日に行われた Mozilla 勉強会@東京 5th 全セッションの動画を公開しました。勉強会のページにリンクを追加してありますので、発表資料と合わせてご覧ください。

次回の勉強会はまた日程・場所が決まり次第お知らせします。

日曜日の勉強会 で LT をさせていただきましたが、先週 AMO で新しい開発者ツールが公開され、レビュープロセスが変更されました。ここで Mozilla Add-ons Blog の記事 の内容も含めて概要を説明したいと思います。

(さらに…)

• 原文: Firefox 4: OpenType Font Feature Support (John Daggett著)

Firefox 3.5への@font-faceサポートの導入は、webサイト上におけるフォントの表現手法をより豊かなものとすることを可能にしました。これに加えて、近年のメジャーなブラウザのWOFFフォントの対応やフォントベンダーの多様化に伴い、現在の開発者は二年程前と比べると比べものにならない量のフォントを取り扱うことが可能です。

OpenTypeのフォーマットは、長い間フォントデザイナーがデザインしたフォントに対して、合字、ゆらぎ、小キャップ、タブ図など、多様なバリエーションを施すことを可能にしてきました。一方、OpenTypeの規定はこれらのデザインバリエーションを実現するためにこれらのデザイン一つ一つに対して一意なタグを用意していますが、Adobe InDesign等専用のソフトウェア上のみで使用可能でした。これらのデザインが文字列に対して適用され、レンダリング可能な状態になる際にはデザインのセレクション及び配置位置の情報が適用されます。Firefoxは現在フォントのデフォルトの値を用いてレンダリングを行いますが、フォントのデザインをCSSを用いて変更することが可能になれば、より幅広い表現手法が可能となります。

これを実現するために、Firefox4ではCSSによるOpenTypeフォントの操作が可能です。-moz-font-feature-settingのCSSプロパティを用いることにより、フォントのカーニング、合字、反転、小キャップ、stylisticセットに代表される様々な装飾が可能になりました。

CSS3によるフォントの規定では、フォントの種類に関する様々なサブプロパティを含みます。これらは開発と共に、webページ製作者によるフォントの操作を可能にすることを目的としていますが、現状のFirefox4においてはより低レベルの -moz-font-feature-settingsのCSSプロパティのみがサポートされています。これを用いることにより、ページ製作者は直接OpenTypeのフォントのページ内における有効/無効を切り替えることが可能です。

.altstyles {
  /* format: feature-tag=[0,1] with 0 to disable, 1 to enable */
  /* dlig = discretionary ligatures, ss01 = stylistic set 1 */
  -moz-font-feature-settings: "dlig=1,ss01=1";
}

参考として、このリンクより利用可能な全てのOpenType装飾が参照可能です。FontFontではOpenTypeフォントの装飾をビジュアルと共に分かりやすく提示しています。

合字と代用文字

フォントデザイナーは往々にして簡単な合字やカーニングデータをフォントに埋め込みますが、更なるデザインの向上のためにより複雑な合字表現や代用文字がフォントセットに用意されている場合もあります。以下の図には，Underwareによる多数の合字表現を含むブラシ調のデザインであるBello Pro script fontによるデザインが使用されています。

上記の図では、”and”と”by”に対して合字表現が使用されており、見出しには小キャップが使用されています。唯一のフォントのスタイリングは”Smooching”における文字の連結を行うために使用されています。画像のリンク先にて、これらのフォントは全て選択及びコピー可能であることが確認できます。

数字表記

以下の図は、Typekitより入手可能なAdobeのMinion Proを用い、数字を用いたモノスペースの表組みを表現した例を示しています。プロポーショナルフォントを用いた数字表記を行う場合、同じ桁数でも数字によってサイズが異なります。これを防ぐために、本来ならばモノスペースのフォントを用いることが必要ですが、OpenTypeフォントの場合文字間隔のフォーマッティングは自動で行われます。

デフォルトの設定として、フォントは等間隔、あるいはプロポーショナルであるかの指定を行うことが可能ですが、これらの設定を動的に変更することが可能なため、インラインテキストにはプロポーショナルフォントを、表組みには等間隔フォントをといった使い分けが可能です。

分数表記の自動化

料理のレシピにおいて材料の使用量を分数で表したい場合等、OpenTypeの自動分数表記を用いることにより自動的な分数表記が可能です。

上記のそれぞれの分数表記は、通常のテキストフォーマットで記述されており (例: 2 1/2)、特別なユニコードポイントは使用されていません。自動分数表記をサポートするフォントに関しては、OpenTypeのレイアウトエンジンが自動的にスラッシュ(/)で分割された分数表記を生成します。一方、これらの表現は比較的単純な分数のみを対象としており、複雑な数学表現を分数で表現する際にはMathML等の専用ライブラリを用いることが推奨されます。

言語依存の表記

多くの言語には、他の言語と同様なようで異なる文字表現が含まれます。例えば、セルビア語、マケドニア語、ブルガリア語における表現は、キリル文字をベースとしたそれぞれ異なる表現手法が用いられています。OpenTypeのフォントは、言語依存の表現を用いる場合、ベースとなる言語フォント（例ではキリル文字）に対して言語別の装飾オプションを指定することにより、対象とする言語のレンダリングを行うことが可能です。

オリジナルな装飾の作成

OpenTypeはプリミティブな装飾タイプを用いて、上位レイヤの様々な装飾を実現します。フォントデザイナーはこれらのプリミティブなタイプを用い、独自の装飾を生成することが可能です。-moz-font-feature-settingsを設定することにより、これらの装飾はCSS経由で変更することが可能です。

下記の例では、LettErrorの著者であるErik van Bloklandによるプリミティブな装飾タイプを用いたフォントのアニメーションエフェクトを示しています。

OpenTypeの形状変換エンジン、HARFBUZZ

これまでフォントに対する装飾の選択や位置の決定は、Uniscribe (Windows)やCoreText(OSX)などのプラットフォーム依存のライブラリによって行われてきました。Firefox4ではオープンソースのHarfBuzz OpenType shaping engineを用い、全てのプラットフォームにおいてこれらの操作を可能にしました。これにより、これまで複雑さのためサポートを受けることが難しかったインド語の記述や西南アジアの言語をサポートすることを今後の展望として目指します。

TYPEKIT使用に関する注意点

Typekitのウェブフォントサービスより入手可能なAdobeの全てのフォントにおいて上記で説明したOpenTypeの装飾が可能ですが、これらの機能を使用するためにはキットエディタの”言語サポート”カテゴリ以下の”全てのキャラクタ”オプションを有効にすることが必要です。

その他の例

(一年前のブログポストより更新分):

• 代用文字及び装飾に関する例
• 材料レシピの例
• 表組みの例
• トルコ語のレンダリング
• 歴史文字のレンダリング