Ellinikonblue.net Devlosxom

　本業での開発が一段落したので、最近、パワーを入れられなかった サイト運営の方にもちょっと力を戻せそう。
　と言うことで、まずはお気軽な JavaScript な話からいってみようと思います。

　ちょっと前に見つけた RedLine Magazine さんちの以下の記事を見て 感化されました。

RedLine Magazine
「 jQuery のスルスルスクロールを指定 1 つでバシバシ使う」
「 jQueryでリストを開閉させたい」

　上記の記事を読んで一時、 jQuery への乗換を本気で考えたのですが、 プラグインとかの作り替えが面倒だったのでやめました f^^;
# またのちのち気が変わるかもしれませんが…

そこで、下記の記事を見つけて、 ひとまず script.aculo.us で やってみることにしました。

ユージック 「 prototype.js を利用したスムーズなページスクロール」

　ちょっと前に始めた フレーバー いじりも引き続き行っていくつもりで、あわせて近々導入予定。

　最後に jQuery への乗換を考えた一瞬で調べた サイトもメモっておきます。

• jQuery: The Write Less, Do More, JavaScript Library
• jQuery lightBox plugin
• jQuery 日本語リファレンス

　OOCSS(Object Oriented CSS) と言う思想に 感化されて 、 ちょっと フレーバー を 見直しました。
　まだとりあえず作ったと言う段階なんですが、 以前はこういう構造でした。 　これを今回は、以下のようにしました。 　それなりに意識はしたのですが、どうもまだきれいとは言い難く、 まだまだこれからな感じです。
　こうご期待と言うことで、ちょっと時間をかけて熟成していきたいと思っています。
　ついでと言ってはなんですが、 見栄えについてもプログレッシブエンハンスメント (Progressive Enhancement) に振ってみました。
　Firefox や Safari だと シンプルでもそれなりに見えるはずですが、 Internet Explorer だと シンプルを通り越して残念な感じに見えます。
# いや元々残念というのは言いこなしで (^^;

　まぁなんにしてもこれからと言うことで。

IDEA*IDEA 「 Google が出してきた Font API のすごさを体感したいなら…『 Font Previewer 』」

　ウェブフォントは、以前から試してみたいと思っていましたが、 この Google Font API を 使えば気軽に扱えそうです。

　ただそもそもにして英字だけならベクトルフォントでも容量的にも知れてますが、 それでもページ一枚表示するために何種類ものフォントをダウンロードしなければならないとなると、 少々ナンセンスなページになると思いますし、ましてや日本語のフォントとなると一つで膨大な容量になりますし。。。 使い方が難しいところ。。。
# Google Font API には 日本語のフォントもありませんし。

　ちょっと久々にフレーバーいじりもしているのでちょっと実験的に使ってみようかなと思っています。

• Google Font API - Google Code

　久々に思い立って blosxom のプラグインを いじってみた。 bsnap_asin プラグイン を延々と使っていると、 キャッシュファイルが一つのディレクトのしたにどんどんできるので、 あまりたくさんのファイルが一つのディレクトリ下にできるとファイルの検索効率が落ちると思い、 サブディレクトリを切ってキャッシュファイルをができるように改良。
　思ったより簡単に出来ました。

　現状、ASIN コードの下一桁をとってきて最大 36 ディレクトリができるようになっていますが、 原理的には、以下の三か所

：（略）
  $cache_dir = $asin_dir.'/'.substr( $1, 9, 1 );
：（略）
  my $cache      = "$asin_dir/".substr( $asinCode, 9, 1 )."/$asinCode.html";
：（略）
  my $tmp_file = "$asin_dir/".substr( $asinCode, 9, 1 )."/$asinCode.tmp";
：（略）

の substr の第二引数を 8 に、第三引数を 2 に設定すれば、 さらにたくさんのサブディレクトリを切るようになります（おそらく）。

　問題なさそうなので近々、 Weblog の方にも導入予定。 その後、Ellinikonblue.com PukiWiki で ドキュメント整理＆公開予定。。。

　超久々に Web Designing の 「実践・ CSS コーディングの新常識」と言うタイトルに惹かれて購入しました。
　で、感化されました。えぇ簡単な人です (_ _;>
　何に感化されたかというと…

プログレッシブエンハンスメント (Progressive Enhancement)

　要は古い IE に引っ張られないで、積極的に新しい技術（ CSS3 とか HTML5 ）を 使っていこうねという技術思想。
　まぁそもそもうちは IE6 とかで検証なんて厳密にはしてませんけどね (^^;

OOCSS(Object Oriented CSS)

　昔っから CSS ファイルを分割して管理するようにしていますが、 これを方法論として見いだせていないのが現状。
　OOCSS はある程度のスタイルの塊を「クラス」としてまとめてマークアップしていくと言うもの。 これは方法論として非常に分かりやすい。採用 (^^)b

文字デザインから CSS を組む

　文字周りのデザインルールをあらかじめ決定しておいてからレイアウトに入る方法論があり、 個人的には絵心がないので整然としてみせる手法として有用かと。試してみる価値あり。

　さぁて感化されて何をするかというと、 今年こそ Photolog か Weblog の方、模様替えするぞと。
　えぇ毎年同じこと言ってます orz

百式 「 CSS 適用前のIEのスタイル情報をまとめた『 IE CSS 』」

　CSS は基本、リセットして使いますが、 リセットしたあとが大変で、さぁデフォルトはどうだったんだと さんざん悩むことが多いので、これは参考になるドキュメントかと。

• IE CSS

　Brunch の マルチアプリケーション（ Thunderbird / SeaMonkey ）対応を時間を見て調べつつ、 ちょこちょこ手をつけていますが、思いの外手こずっています。
　少なくとも .xpi ファイルの中の install.rdf をいじるだけで対応などと言う 甘い代物ではなかったです orz

　まずは chrome.manifest 。
　おおざっぱに言うと、 Firefox の ユーザインターフェイスは XUL(XML User Interface Language) で記述されていて、 Firefox の カスタマイズはこれを上書きすることで実現されます。 この chrome.manifest には、どの XUL でどの XUL を上書きするかなどを記述することができます。

　たとえば Brunch (v0.12) の場合、

content	brunch	jar:chrome/brunch.jar!/content/
overlay	chrome://browser/content/browser.xul chrome://brunch/content/brunchOverlay.xul
locale	brunch	en-US	jar:chrome/brunch.jar!/locale/en-US/
locale	brunch	en-US	jar:chrome/brunch.jar!/locale/ja-JP/

と言う風に記載されていて、 overlay 行が上書きを指定している記述です。

　しかし、これは Firefox の インターフェイスを書き換えるときの記述で、 SeaMonkey の場合は

overlay	chrome://navigator/content/navigator.xul	chrome://brunch/content/brunchOverlay.xul

とすればよいのではないかと思うのですが、 Thunderbird は どの XUL を上書きすればいいか、ちょっと調べたくらいではわかりませんでした。
# SeaMonkey でも install.rdf と chorome.manifest を書き換えただけでは動きませんでしたし…

　どうもマルチアプリケーション対応はそんなに甘っちょろいものではないようです。
　ドキュメントまとめも含めて、ちょっと本腰入れてやらなければ…それには時間が… う～んジレンマ orz

　どこかによいドキュメントはないものか…

　今頃になって、自分が Brunch を 作ったときに、 ほとんどドキュメントを残していないことに気がつきました。
　直らない悪い癖ですが、自分で使っていて Brunch が 意外に便利なので、これが Thunderbird でも 使えればなお便利、 ついでに SeaMonkey でも使えるようにしてしまおうと 思っていて、誰にせかされるわけではないので、この機会に Brunch の ドキュメントというか、Mozilla プロダクトの開発メモを ここ に残していこうと思う次第。
# 次のメジャーバージョンで拡張機能の作りが変わるという話は置いといて。。。

　まずは install.rdf に記述する UUID の話。

　Firefox に 代表される Mozilla プロダクト群 （こういう呼称がよいかどうかは不明）の拡張機能は .xpi と言う拡張子を持つファイルで配布されますが、 これは規定のフォルダ構造を持つファイルの集まりを ZIP で圧縮したもの。
# 個人的に最後の圧縮作業は Explzh を 利用させてもらってます。

　この .xpi ファイルの中には install.rdf というファイルがあって、 ここに拡張機能のインストールに必要な情報がまとめて記載されています。
　その記載の中に、この拡張機能がどのアプリケーションをターゲットにしているか （つまりどのアプリケーション向けの拡張機能か）を記載している部分があります。 　そこには Firefox とかいう文字列がもろに記載されているのではなく、UUID というアプリケーションを 示す識別子で記載します。 　たとえば Brunch ならこんな感じになっています

<?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:em="http://www.mozilla.org/2004/em-rdf#">

  <Description about="urn:mozilla:install-manifest">

    <em:id>brunch@ellinikonblue.com</em:id>
    <em:type>2</em:type>
    <em:name>Brunch</em:name>
    <em:version>0.12</em:version>
    <em:description>Browser Luncher Extention.</em:description>
    <em:creator>Kazuhiro KAWANISHI@ellinikonblue.com</em:creator>
    <em:developer>Kazuhiro KAWANISHI</em:developer>
    <em:homepageURL>http://www.ellinikonblue.net/devlosxom/</em:homepageURL>
    <em:optionsURL>chrome://brunch/content/brunchOption.xul</em:optionsURL>

    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
        <em:minVersion>2.0</em:minVersion>
        <em:maxVersion>3.6.*</em:maxVersion>
      </Description>
    </em:targetApplication>

  </Description>
</RDF>

タグ em:targetApplication の中にあるタグ Description が この拡張機能が Firefox 向けで 対象バージョンが 2.0 ～ 3.6.x までという意味の記載になります。

　ひとまず Thunderbird （ 2.0 ～ 3.0 ）の場合は、

<em:targetApplication>
  <Description>
    <em:id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em:id>
    <em:minVersion>2.0.0</em:minVersion>
    <em:maxVersion>3.0.*</em:maxVersion>
  </Description>
</em:targetApplication>

SeaMonkey なら

<em:targetApplication>
  <Description>
    <em:id>{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}</em:id>
    <em:minVersion>2.0</em:minVersion>
    <em:maxVersion>2.0.*</em:maxVersion>
  </Description>
</em:targetApplication>

と言うことのようなんですが、はてさてこの UUID っていったいなんじゃらほい？ というのはよく知らず。
　この記述をどういう風に加えればいいかをよく調べてから、一度、 Thunderbird で 試してみるのかな？
# SeaMonkey は今のままでもすぐ動きそうですし。。。

　超凡ミス。話すのが恥ずかしくなるような。。。 orz

　コメントが表示されない問題解決しました。 問題の根は深くも何ともなく、 ここ を構築するとき、 プラグインをアップロードするときにどうも古いコードをアップしたらしく、 これには純粋にバグがありました。
　構築時にちゃんと試験をやっていなかったことも、これで確定 orz

　アプリケーション系の SE で飯食っていてまったくお恥ずかしい話です o...rz
　皆さん、コード管理と受入試験はしっかりと。。。 m(_ _)m

　現在、このブログ では いただいたコメントを表示できないことに、先週気づきました。
　先週末ちょっと原因を調べたのですが、すぐに解決できなくてこのエントリーです。

　いただいたコメントの内容に関しては読んでおります。
　が、コメント返しができません。 ここ は 実験ブログとはいえ、これは失礼な話なのでできるだけ早く対処したいと思います。
# Brunch 関連に 関しては、 こちら に 以前のやりとりがあります。

　問題の根が深そうなので、解決までしばしお待ちください。 解決したときはまた報告させていただきます m(_ _)m

　Firefox 3.6 が リリースされました ので、 一応、Portable Editon に組み込んでテストしてみた結果、 特に不具合は見受けられなかったので、リリースします。
　install.rdf を修正しただけです。

• Brunch v0.12

　よろしかったら、お使いください。

更新履歴

• v0.12
  • Firefox 3.6 対応
• v0.11
  • Firefox 3.5 対応
• v0.1
  • コンテキストメニュー呼び出し本格対応版
• v0.0.1
  • Firefox 3 対応初版
  • コンテキストメニューから機能呼び出し可能に
• v0.0
  • 初版公開

「 テーマ機能“ペルソナ”を統合、動作速度にも磨きをかけた『 Firefox 3.6 』正式版」
「 PortableApps.com 、 USB メモリで持ち運べる『 Firefox 3.6 』のポータブル版を公開」
（以上、 窓の杜 より）

　XREA.COM のサーバーに MODx を 設置する場合、PHP がセーフモードで動作しているため、 MODx の メディアマネージャで、ファイルのアップロード等ができません。
　MODx 日本公式サイト にも、 これに関して manager/media/ に以下のような内容の .htaccess ファイルを作成するように記述されています。

<FilesMatch "^\.php$>
AddHandler application/x-httpd-phpcgi .php
</FilesMatch>

　しかし、これでは使えなかったんです。
　理由の一つは簡単。manager/media/ に .htaccess を置けば、 当然このディレクトリ以下でしか使えないのは当たり前。
　トップディレクトリに置けば、全ディレクトリでメディアマネージャの機能が使え…ません (^^;>
　これに加えて、メディアマネージャーからの書き込みを許可するディレクトリには、 757 の権限を設定する必要があります。ちょっとこれは危険なにおいがするので、 トップディレクトリに .htaccess ファイルを置いて、 必要なディレクトリだけファイルパーミッションを与えることにしています。

　もともと MODx を 導入した理由の一つは、このメディアマネージャがあれば、 blosxom への 記事のアップも FTP クライアントなしでできると思ったから。
　これで目的一つ達成？これはその実験エントリもかねて。