会社のブログに記事を書きました。「FirefoxとChromeとでフォントレンダリングの処理が違うんじゃないか？」という疑問から、IEとSafariも含めた簡単なフォントレンダリングの比較をしてます。

briccolog » FirefoxとChrome（とIEとSafari）でのフォントレンダリングの違い

Safariは問題外として、Chromeだけスムージングが甘いのが個人的には残念なんですよねえ…。

briccolog » Chrome + Gmailで今度は改行が増えるようになりました…

[2012.01.23 追記]

GoogleグループのChromeフォーラムで、以下のアナウンスがありました。

チームがすでに問題を把握しているようです。
ご協力をお願いさせていただければと思います。

Chrome 17のリリース版の公開と共に解消されることを祈りましょう。

会社のブログに記事を書きました。かなりの今更ですが、ブラウザ別のキャッシュのクリア方法についての記事です。IE、Firefox、Chromeは共通で「Ctrl + Shift + Delete（Macの場合はShift + Command + Delete）」で済むので、どうせならSafariもそうしてくれればいいんだけど・・・。

※ちなみにSafariはCtrl + Alt + E（MacはShift + Option + E）でクリアできるみたいです。

briccolog » WEBブラウザのキャッシュをクリアする方法

会社のブログに記事を書きました。Microsoftが提供しているIEの互換性検証用の仮想マシンイメージの導入についての記事です。いや、苦労しました・・・（汗）。

briccolog » IE互換性検証用仮想マシンを試してみました

会社のブログに記事を書きました。本日リリースされたGoogle Chrome 16の目玉機能（？）である、マルチユーザー機能について試した記事です。

briccolog » Google Chrome 16のマルチユーザーを試してみた

ご迷惑をおかけしております。
現在は問題の修正は完了しており、Google Chrome 17 から問題がなくなる予定です。

Issue 104620: loss of \n after paste in gmail

・・・というわけで、既に開発側では問題の修正を完了していて、Chrome17から解消される模様です。よかったよかった。

それにしても、暫定版の対応を発見する過程でChromeの拡張機能の作り方もわかったので、そういう点では非常に勉強になったんですが、それを大々的にブログ記事にまでしてしまった直後このアナウンスメント。バグの解消は喜ばしいことですが、ちょっと恥ずかしいような・・・（汗）。

[2012.01.10 追記]

Google Chrome 17の登場を待たずして、改行が消える不具合は解消（？）されましたが、代わりに改行が増える不具合が出てきました…。

briccolog » Chrome + Gmailで今度は改行が増えるようになりました…

• FlashDevelop3.1.0 RTM – FlashDevelop.jp
• 馬鹿全 – FlashDevelop 3.1.0 RTM リリース

まずは旧バージョンをsettingファイルも含めて完全にアンインストール。その上で新バージョンをインストールして起動。馬鹿全さんの記事を参考にTools → Program Setings → FlashDevelop → Selected Locale を en_US から ja_JP に変更して FlashDevelop を再起動。これで晴れて日本語版に！

次はフォントを自分好みに変更。まずはツール→環境設定→FlashDevelopの中からフォント指定部分を下記のように設定。

「10pt」や「8pt」で設定しても、何故か上記のように中途半端な数字になっちゃうんですよね。まあいいや。

次にコード表示のフォントを変更。ツール→シンタックスカラーリングの変更、で、それぞれの言語のdefaultのフォントスタイルを下記に設定。

これでOK！

今回のアップデートではHTML編集でZen-Codingが使えるようになってます。ちょっとした編集なら、わざわざAptanaを同時起動しなくても良さそう（ちなみにFlashDevelop上でのZen-CodingのショートカットはCtrl+B）。FlashDevelop万歳！

追記

ClockMakerさんのブログに今回のバージョンアップについてのまとめ記事がありました。

待望の日本語化も! FlashDevelop 3.1.0 RTMが登場 | ClockMaker Blog

変数のリネームができるリファクタ機能っての、便利そうですね！あとデバッガー機能も。ただ、デバッガー機能の方は「プラグインとして提供されている」らしいんですが、具体的にどのような方法で導入するのか、あとでちょっと調べてみようと思います。

さらに追記

どうやら下記スレッドでPhilippe氏が返信してる「Re: FlashDevelop 3.1.0 RTM released」の内容がデバッガー機能についての説明かな？

FlashDevelop.org – View topic – FlashDevelop 3.1.0 RTM released

ええ、仰るとおり、まさに"very easy to crash"でしたよ（涙）。上記のスクリーンショットのように、Undocumented Trace Log Settings欄のチェックを全て外したら、クラッシュせずに動くようになりました。

で、原因究明の過程でFirebugのオフィシャルページ（Flashbug – An extension for Firebug | Course Vector）の文章について簡単に翻訳してみた（してしまった）ので、備忘録をかねて参考までにアップしておきます。

更新情報

• SharedObjectを発見するバグの修正
• Mac OSXのmm.cfgファイルの場所についてのバグの修正。今回は本当に直ってるはず。

説明

このプラグインは、Firefoxの中または外で稼働中のあらゆる.swfファイルのtrace内容を表示します。全てのtraceはFirebugのFlash Consoleに表示されます。Firebugの検索ボックスを使って文字列を検索すると、マッチする語がハイライト表示されます。他に追加された機能はエラー、警告、情報のtraceに対してのハイライトとアイコン表示です。最後に、trace内容に表示されるあらゆるURLについて、右クリックして新規のタブで開く事が出来るようになりました。

FlashTraceと同様、Flash Player Debuggerがインストールされていないとtrace内容は表示されません。Flashbugはお使いのPCに入っているFlashPlayerのバージョンを検知して表示します。Debug版のPlayerが入っていない時には、ダウンロード用のリンクが表示されます。

FlashTraceと異なり、flashlog.txtやmm.cfgファイルを設定する必要はありません。こういう作業はFlashbugがバックグラウンドで行いますから、皆さんはすぐに機能を利用することができます。

trace内容またはポリシーログのどちらかをFlashbugから直接開く事もできます。これで、traceされた生の内容をそのままエクスポートしたりコピーすることもできます。

他の新機能はShared Objectインスペクタです。これは表示されているページにロードされているswf全てを監視します。そして、ドメインに基づいてPCに保存されているShared Objectをチェックし、該当するものがあればパネルにリストアップします。

見つかったShared Objectは各行に表示され、階層を開く事でそこに含まれるデータを閲覧することができます。エディターがインストールされているならば、右クリックして直接ファイルを開く事もできます。パスをファイルにコピーしたり、保存されているフォルダーを開く事も出来ます。

最後ですが、FirebugのNetパネルに、AMFでコーディングが追加されました。この機能はFirebug1.4以上のみで有効です。データ転送をリモーティングに依存しているサイトを訪れると、サーバーに送信されるAMFリクエストの内容を見る事ができます。具体的には、Netパネルの中からAMFリクエストの行を発見し、その行を広げてみてください。すると、AMFタブが表示され、これをクリックする事でAMFメッセージが表示されます。

特徴

• Firebugのビルトイン検索機能の利用- ログ内容を検索すると、リアルタイムにハイライト表示されます。
• traceログの表示- 全てのブラウザで実行されているFlashインスタンスから送出される全てのtrace内容を表示します。
• ポリシーログの表示- FlashPlayerから送出される全てのポリシーログ出力を表示します。クロスドメインポリシーを使っていたり、異なるドメインからファイルなどを読み込む場合などにこの出力が発生します。
• デバッグプレイヤーのログ保存場所自動設定- FlashTracerではログファイルの場所などをマニュアルで設定する必要がありました。これらの設定はFlashbug側で自動的に行います。
• デバッグプレイヤーの設定編集- FlashPlayer自体が、traceする内容を変更することができるようになっています。FirebugのPreferencesウィンドウでこのオプションを設定できます。
• traceフィルタ- trace内容を様々なフォーマットで表示するためのビルトインフィルタが少しだけ用意されています。エラーについては赤字でエラーアイコン付きで表示するとか、XMLについては色つきの可読性の高いフォーマットで表示するなどです。現在Flashbugに含まれているのは下記のキーワードのみですが、将来的にはユーザー側でカスタマイズできるようにするつもりです。
  • @@XML@@ :XML形式で色つきで表示。
  • @@HTML@@ :XMLの場合と同じ。
  • @@INFO@@ :左側に青い情報アイコンを表示。
  • @@WARNING@@ :背景色が暗くなり、左側に警告アイコンを表示。
  • @@ERROR@@ :背景色が赤くなり、左側にエラーアイコンを表示。
• ビルトインリンク- trace内容に含まれるURLには下線が表示され、右クリックすることで別タブで開いたりクリップボードにコピーすることができます。
• Shared Object読み込み- 表示中のページに関連するあらゆるShared Objectを読み込む事が出来、Firebugのobjectと同じように閲覧することができます。
• （Firebug 1.4以上）AMF / リモーティングリクエスト / レスポンスデータの読み込み- ページとサーバーとの間で送受信されるAMFデータを閲覧することができます。

むむ、これ以前もあったなと思って、以下の方法で再設定して解決しました。

1. ブラウザのアドレス欄にabout:configと入力してEnter。下記のように表示されたら「細心の注意を払って使用する」をクリック。
   
2. 「フィルタ」欄にbrowser.tabs.closeWindowWithLastTabと入力。
   
3. 下部に表示された行をダブルクリックする。値がtrueとなり、行全体が太字で表示されたらブラウザを閉じる。
   

これでOK！元の挙動に戻りました。

前回の記事の末尾で「つまりAptanaのプラグインとして何かしらのパッケージをインストールする、ということではなくて、各プロジェクト毎にZen-Coding用のスクリプトを配置していくんですね。」と書きましたが、どうやら別に各プロジェクト毎に設定する必要はないようです。

Aptanaでは、複数のプロジェクト（サイト）を同時に開いて作業を行うことができるようなので、Zen-Coding用のプロジェクトを予め作っておいて、常にそれを開いた状態にしておけば、他のプロジェクトのHTMLファイルを編集している時にもZen-Codingが使えるようです。

今回は、AptanaにZen-Codingを導入する方法について見てみます。

Zen-Codingのダウンロード

まずはZen-Codingのダウンロード。Zen-Codingのオフィシャルサイトのダウンロードページから、「Zen Coding for Aptana vX.X.X.X（本記事執筆時点での最新版はv0.6.0.1）」をダウンロードします。

Downloads – zen-coding – Project Hosting on Google Code

ちなみに3つほど上にDreamweaver用のZen-Codingが見えますが、これはDreamweaver CS4向けのようです。試しに自分のマシンに入ってるDreamweaver CS3に導入してみましたが、なんもできませんでした。

Zen-Coding用プロジェクトの生成

Aptanaを起動し、「ファイル＞新規＞プロジェクト」を選択します。

「新規プロジェクト」ウィンドウが開いたら、「一般」の「プロジェクト」をクリックして「次へ」。

プロジェクト名はわかりやすいように「Zen-Coding」としてみました。ロケーションについては、特定のプロジェクトのみで使うわけじゃないので、デフォルトロケーションのままにしています。

Zen-Codingスクリプトの保存

先ほどの「Zen-Coding」プロジェクトの直下に「scripts」というフォルダを生成します。

そして、そのフォルダの中に先ほどダウンロードした「Zen.Coding-Aptana.v0.6.0.1.zip」の内容を展開します。この際、_MACOSXというフォルダは展開しなくても大丈夫です（展開しちゃっても構いませんが）。

ショートカットキーの設定（アンバインド）

Zen-Codingではコーディングの際に独自のショートカットキーを使用します。しかし、中にはAptanaの方に既に割り当てられてしまっているショートカットキーも結構あります。そこで、Zen-Coding用のショートカットキーとかぶってしまっているAptanaのショートカットキーの設定を削除（アンバインド）します。

「ウィンドウ＞設定＞一般＞キー」を開きます。

「フィルター入力」の欄に「Ctrl+E」など、Zen-Codingで使うショートカットキーを入力します。もしまるっきりかぶってるコマンドがリストに表示されたら、それを選択して「コマンドのアンバインド」をクリックします。Zen-Codingで使うショートカットキーについては下記記事などを参照。

Zen-Codingのショートカットをまとめてみました – EC studio デザインブログ

ちなみに私は下記のショートカットキーをアンバインドしました。

• Ctrl+E
• Ctrl+Shift+D
• Ctrl+D
• Ctrl+L
• Ctrl+I
• Ctrl+Shift+I

デフォルト言語設定の変更

Zen-Codingの初期設定では、作成するHTMLページの言語が英語（US）に設定されています。それを日本語に変更しましょう。

先ほどのscriptsフォルダーにあるzen_settings.jsをエディタで開きます。

先頭の方にある言語設定系の記述を、下記のように変更しておけばOK。

	'variables': {
		'lang': 'ja',
		'locale': 'ja-JP',
		'charset': 'UTF-8',
		'profile': 'xhtml',

		/** Inner element indentation */
		'indentation': '\t'     // TODO take from Aptana settings
	},

タブの設定

Aptanaではコーディングのインデントにデフォルトで半角スペースが使われます。個人的にはタブインデントが好みなので、その点を設定します。

「ウィンドウ＞設定＞Aptana＞エディター＞HTML＞フォーマット」を開きます。

「デフォルト規約[ビルトイン]」の横の「編集」ボタンをクリックし、プロファイルの編集画面にします。

「制御ステートメント」の「一般設定」、「タブ・ポリシー」を「タブのみ」に変更し、プロファイル名を任意のものに変更（今回は「デフォルト規約[タブインデント]」としました）します。

これでタブインデントが使えるようになりました。

Aptanaの再起動

ここまでやったら念のためにAptanaを再起動します。「プロジェクト」ビューに「Zen-Coding」というフォルダが表示され、その中身がこのようになっていたら導入完了です。

もしこのように表示されていなかった場合、「プロジェクト」ビューで「Zen-Coding」フォルダを選択した状態でF5キーを押し、画面をリフレッシュすれば出てくるはずです。

Zen-Coding開始

これで準備は完了です！ためしにZen-Codingフォルダの下にtest.htmlというファイルを作り、編集してみましょう。

「html:5」と入力して、Ctrl+Eをクリックすると・・・

HTML5のテンプレートが展開されました！やったー。