喜びます

あまりこういうちょっとした話題に乗るほうではないですが。

印刷物の素材を流用したウェブページ作り（10ページ程度。Googleのサイト内検索付き）

で50万かぁ。

この半分でも結構がんばっちゃいますよ。まじで。

FlashとThickBox

FlashからThickBoxを呼び出す方法。

以下、AS3の場合

// いろいろと省略してますよ。
package {
    import flash.external.ExternalInterface;

    public class viewThickBoxBtn extends MovieClip {
        public function viewThickBoxBtn() {
            addEventListener(MouseEvent.CLICK, clickBtnEvent);
        }
        private function clickBtnEvent(e:Event) {
            ExternalInterface.call("tb_show", thickBoxTitle, thickBoxUrl);
        }
    }
}

とExternalInterface.callでtb_showを指定します。
引数にタイトル、URL（画像やらHTMLや）と指定します。
URLの部分はHTMLでThickBox用のリンクを記述するときと同じものです。

tb_showには3つ目の引数もあるのですが、
こいつはたぶん、画像のグループ化です。
でも、SWFObjectなどを使って裏でHTMLのコードでThickBox用のリンクを記述しておかないと
動作しないんじゃないかなと思います。たぶん。試してないけど。

グループ化以外は普通にASに記述するだけで使えます。

また、Flashの上にHTMLレイヤーが置かれることになるのでwmodeの指定をしないとだめかと思われます。
wmodeを利用することの弊害も考える必要があるかと思います。

久しぶりにそれなりの内容のエントリでした。

MT4.01とThickBox

こちらの4.01版です。

画像に意味はありません。

913SHのカメラはひどい性能だ。

ダウンロードは下記。

MT4.01とThickBox の続きを読む

Movable Type 4とThickBox

MT4リリース時から軽くテストしていまして、テンプレートの構成が全然違うから移行面倒だなぁと思っていたんですが、ためしに、3.35の環境からアップデートしたら、あっさりいっちゃったのでここでもMT4に移行しました。

で、前にも制作していましたが、今回も画像ポップアップを選択したときにThickBoxのタグを書き出すように該当部分を書き換えました。

ほしいひとは持っていってください。

Movable Type 4とThickBox の続きを読む

SWFObjectとThickBox

先日からこのサイトでも利用し始めたSWFObjectと前々から利用していたThickBoxですが、
同時に使用するとThickBoxが機能しなくなるという問題が発生しました。

どうも必ず発生するというわけではなさそうで、どのような条件で発生するのかわかりませんが、
症状が出るHTML（ページ）では必ず問題が出ます。

一応、"逃げ"の解決策ですが、SWFObjectのso.writeとか記述するJavaScript部をページ内のすべてのThickBoxリンクの後に記述することで問題が出ないようです。

ただ、この方法だとSWFObjectの実行が遅くなってしまうので、一瞬JavaScript書き換え前のHTMLが表示されてしまいます。

あー、ThickBoxとJQueryのどちらが問題なのかはわかりません。

もっと根本的な修正をしたい。（どっかのすごい人まかせ）

Safari 3 Beta on Vista

発表されたばかりのSafari 3 Betaです。

WindowsとMac両方にリリースされます。

Mac版とまったく同じ描画をしてくれるなら、フォントとかの違いがありますが、CSSレイアウトに関しては今後Macで表示を確認しなくてもよくなりますね。

ということはMacに移行する理由もなくなったということになりますが。

んー、うれしいのか悲しいのか。

UAは以下。
Mozilla/5.0 (Windows; U; Windows NT 6.0; ja) AppleWebKit/522.11.3 (KHTML, like Gecko) Version/3.0 Safari/522.11.3

なんかフォントにアンチエイリアスかかってます。

日本語フォントが表示されてません・・・

Movable Type 4 Beta

Movable Type 4、UI一新でサイト全構築の動きへ

んー、ちょっと試してみましたが、見た目は大幅に変化。
ちなみに下のSSはBLOGのデフォルトデザイン。

テンプレートが結構変わってそうですね。
かなり細かく別けられている感じ。

Bubble Tooltipsをちょっと改造

このBLOGではコメントとトラックバックのアイコンの箇所で利用しています。
これの仕様はidを指定しない限りtitle属性のある箇所でツールチップが表示されるようで、そのままでは問題があるのでちょっと改造しました。
今回はそれをかる～く紹介。

まずはto-R様のエントリーがかなり参考になります。

改造の仕様としてはclassに"BubbleTooltips"と指定されている箇所のみ表示されるように改造しました。

function enableTooltips(id){
    var links,i,h;
    if(!document.getElementById || !document.getElementsByTagName) return;

    AddCss();
    h=document.createElement("span");
    h.id="btc";
    h.setAttribute("id","btc");
    h.style.position="absolute";
    document.getElementsByTagName("body")[0].appendChild(h);
    if(id==null) links=document.getElementsByTagName("a");
    else links=document.getElementById(id).getElementsByTagName("a");
    for(i=0;i<links.length;i++){
        var cls = links[i].getAttribute('class') || links[i].getAttribute('className');
        if(cls != null) {
            if(cls.match("BubbleTooltips")) {
                Prepare(links[i]);
            }
        }
    }
}

上記以外に、表示される位置の修正はスクリプトの下部。
デザインはCSSなので、難しくはないと思います。

本当はjQueryを利用して判定させたかったんですが、改造を始める時点で上記の方法が浮かんでいたため10分ほどでやめました。
気が向けばそのうち。

Silverlight

MS、Flashキラーの新技術「Silverlight」発表

Microsoft Silverlight

詳しい機能とかはわかりませんが、AdobeとMicrosoftの競争が激しくなってきましたね。

今後どうなっていくんでしょうか。

FeedBurnerに移行

フィードの配信をMTのRSSからFeedBurnerへ移行しました。

参考にしたのは、

Ogawa::Memorandaさま
Feedburner Infomation

サイドバーのアイコンもFeedBurnerデザインに変更しました。

現在、購読者数０！！！
笑える

既存のRSSをリーダーに登録されている方は変更をお願いします。

HTML

今回のリニューアルではHTML構造にも気をつけました。
リニューアル前のサイトでは一応CSSレイアウトにはなっていたものの、初めてのCSSレイアウト&勉強のためという状態だったので、とにかく「div！」みたいな状況になっていました。

とゆーことで、今回はタグの意味とか使い方にそれなりに気をつけて組みました。
「pタグ内にはインライン要素しか入れられない」とか正直いままでまったく意識していませんでした。
ブラウザさんはそういうの関係なしに表示してくれる良い子です。
（ある意味困った子です。）

ここ見ながら制作しました。

アルファチャンネルPNGとカラー

アルファチャンネルPNGを利用しようとして気付いた。

上がIE7で下がFirefox2で表示させたところ。

画像右側がPNGです。
Firefox2の色がこちらの求めるカラーなのですが、色が全然違う。

シャドウがかかってるところもPNGなので、わかりにくいですがIE7のほうが若干色が濃いです。

どーしてよ。

PNG画像をそのままIEで開くとちゃんとしたカラーになるんですが、HTMLにいれちゃうと画像のように変化しちゃう。

SafariだとIE7のように表示されます。
あー、原因がわからない。
困ったなぁ・・・

追記：

このあたりが参考になりそう

CSS Nite in Nagoya 2007

CSS Nite in Nagoya 2007
完全に忘れてた。

自分のWEB関連の知識は完全に本とWEB。
学校で習ったわけでもなく、誰かに教えてもらったわけでもない。

CSSやASに自分よりも詳しいプロフェッショナルな人も周りにいないので、自分で調べるなりして解決するしかないのですが、ちょっとこうゆう関連の講習会とかどんな感じなんだろうと思っていたところ丁度名古屋で開催されるとのことだったので、参加してみようかなと思っていたんですが、久しぶりにサイトを見たら終わってる・・・

名古屋ってこーゆーイベントが少ない気がするんですよね。
んむー、貴重な機会を逃してしまった。

で、その内容をまとめてくださっているのがVERSION510さまです。
「ハックしないCSS」とか「名古屋流Webディレクションの光と影」とか是非聞いてみたかった。
読みやすくまとめられていますので是非。

ちなみに、このサイトではfont-familyの指定にメイリオ,とヒラギノ角ゴ Pro W3使ってます。
（あと、tahoma）
MSゴシックは指定していないので、OfficeがインストされているMac環境は気にしなくてよかったりします。（偶然）

ThickBoxとFlash Uploader

ずっと前にブラウザのタブ機能どうこうの理由でこのBLOGでHIghslide JSを導入というのはエントリーで報告しておりますが、本サイトのほうでもSampleの表示などにタブ機能に影響されない見せ方をしようとThickBoxを導入しています。

こいつもデザインのためにHTML出力の箇所をかなり弄っています。

お気づきの方も多いのかもしれませんが、Flash Uploaderのファイル一覧表示のサンプル動作がおかしくなっていてThickBox（または自分が弄った）が原因だと思っていたのですが、
昨日、ふと思い出したことが。

サイトとサンプルのページのドメインが違うじゃん！！

解決策は簡単でCookieのP3Pの問題でブラウザに認証情報が保存されていなかっただけでした。

イージーミスには気をつけましょうというエントリーです。
あぁ...

Movable Type 3.34にアップ

Movable Type 3.34がリリースされました。

このBLOGもアップデートしておきました。

ただ、Highslide JSの導入時にmt/lib/MT/AppのCMS.pmをカスタマイズしていたので
3.4のCMS.pmも修正。
といっても、CMS.pmはプログラム部の修正はされていないみたいです。

Highslide JSの紹介のエントリーの際にはCMS.pmの修正内容に関して細かくお知らせしていなかったので、今回紹介しておきます。

CMP.pmの4686行目にsub _process_post_uploadというサブルーチンがあります。
ここから4815行目の"}"までを下記のテキストファイルの内容に書き換えてください。

これで画像アップロードの設定画面でポップアップを選択すればHighslide JS用のHTMLが出力されます。

process_post_upload.txt

Highslide JS 導入

IE7のリリースでメジャーなブラウザのすべてがタブ機能を持つことになりました。
使用者の設定次第ですが、これによりサイズ指定でオープンされるポップアップウィンドウのサイズが無視されることが出てきます。
演出のためにポップアップウィンドウを利用している場合は致命的ですね。

ということで、BLOGでHighslide JSを導入しました。
設置方法などはgoogle先生に教えてもらってください。
またはこちら

こいつは、select要素やiframe要素が前面に出てきてしまう問題にも対応していて拡大後のサイズに重なる部分に上記要素がある場合はそれを一時的に非表示にしています。
ただし、ちょいと詰めが甘く、拡大後のレイヤーの移動時に再描画されなかったりするのでそのあたり自分で修正。

また、上記2つの要素と同様にFlashも前面に出てしまいます。
こいつの対処方法は2つ。
ひとつは、wmodeをtransparentに設定する。
これでIE、Firefox、Safari（ちょっと微妙に変だけど）で正常に表示されます。
ただし、この指定は問題もあって、Flashにテキスト入力エリアがある場合に日本語入力ができなくなる問題がWinで発生します。
ここのBLOGなんかの場合だと、上のメニューなんかはこの指定で簡単解決ですが、
検索機能を持つサイドバーのAmashに問題が出ます。

そこで2つ目の対処方法。
まず、Amashの場合<div id="amash"></div>でFlashを囲います。
次にhighslide.jsにselect表示を切り替えている箇所が3箇所あります。
このあたりに