Aug 27, 2004
Aug 23, 2004
CSS Anchor
恒久リンクアンカー画像をCSSで表現
なかなかキリのいいところが見つからなくてナイトリーαバージョンも8月に入ってから一度もリリース出来ていないP_BLOGですが、水面化では相変わらずブラウザを切り替えつつ実験を繰り返しながら色々と格闘中。
今取り組んでいるのは、記事タイトル部にある恒久リンク(Perma link)アンカーや、「FILES」のコーナーのダウンロードリンクの頭につけている矢印画像など、これまで画像を直接埋め込んでいたのを全てCSSで制御しよう、というもの。これまではこの部分はユーザーがPHPファイルのコードを編集してカスタマイズしていたのですが、このへんも全てCSS制御にすると装飾に使っている画像部分もCSSスイッチで切り替える事が出来るのでXHTML+CSSでコンテンツとプレゼンテーションの分離をより向上させる事が出来るだろう、というのが理由です。
..で、とりあえず出来上がった恒久リンクボタンをテスト的に当サイトに実装してみました。↓
[CSS=On/Off比較]
CSSで制御するとこのようにマウスオーバーが使えるのも利点。ただ、最初の画像のロードが一瞬(ホント、ほんの一瞬なんですが)待たされるのが欠点といえば欠点。テキストにはナンバーを表す「#」を当ててますが、CSS適用時にはそれを見えないようにして右パディングを広めにとり、背景にボタンの画像を表示する、という方法を使っています。今のところ私の環境のSafari、Mozilla、WinIE6などでは上手くいっています。
ついでに各記事のトラックバック、コメント欄のタイトル部につけているアイコンもCSS制御に。これでこのアイコンが必要ない人はいちいちPHPファイルをいじらなくてもCSS部だけで好みに装飾出来るようになると思います。
Aug 21, 2004
JAM LOG XHTML更新。
JAM LOG with New XHTML
ここのところ取りかかりっきりだったP_BLOGの新しいXHTML+CSS構造改革バージョン1、ということで、早速当サイトに試験的に導入してみました。新しいCSSが適用されず乱れて表示されている場合は、ブラウザをスーパーリロード (Mac の場合はshift+リロード、Windows/Linuxの場合はctrl+リロード) してみて下さい。
今回の改訂のメインは「コンテンツファースト、メニューネクスト」ということで、w3mなどのテキストブラウザでブラウズしてもこのように先にコンテンツがロードされるので読みやすくになったと思います。↓
ついでに当サイトのCSSも少々更新し、メニューを右側にしてみました。このスタイルだとMozillaやWinIEの「ブックマーク／お気に入りバー」を表示させてもコンテンツが真ん中にくるんですよね。あと、次のバージョンのP_BLOGに添付する新しくしたCSS(「Rich Green」「Alminum」は更新、「Silk」は新規追加 )もテスト導入してますので試しにメニューの「CSS選択」フォームで切り替えてみて下さい。表示チェックはとりあえず現在のところ、
- Mac OS X (解像度：1440×900)
- Safari 1.2.3 / Shiira / OmniWeb
- Mozilla 1.7 (Firefox 0.9.1)
- Opera 7.54
- IE 5.2.3
- w3m 0.4.1
- Windows XP (解像度：1024×768)
- WinIE 6
- Mozilla 1.7 (Firefox 0.9.1)
- Opera 7.53
- Linux (YDL / 解像度：1024×768)
- Mozilla
- Konquarer
...という環境で行っています。あと、検索フォームもメニューに内包して見出しを追加。他の細かい部分としては、フッタ部のValidatorバッジを画像をやめてテキストを使ったリンクにして(ちょっと存在を薄くして?)みました。
Aug 18, 2004
Web Designing誌2004/9号でP_BLOG紹介
WD誌2004年9月号の「WD Reviews」(P165)
Web Designing誌の2004年9月号の「WD Reviews」のコーナー(P165)にて、P_BLOGが紹介されています。(おっ、今気がついたのですが、表紙にも小さく「P_BLOG」と書かれてます。 
) WD誌9月号は「blog、セカンドステージ」という特集がありますが、その特集内ではなく、ソフトウェアのレビューのページのほうです。本屋で見かけたら見てやって下さい。
オリンピック観戦＋XHTML構造改革中
ここのところ、夜中のオリンピックにハマりつつ、P_BLOGのXHTML構造改革中です。(実は私、昔っからオリンピック観戦、かなり好きなのです)
いや〜、しかし、北島を筆頭とする水泳陣、あまり事前に話題に上らなかった体操陣、そしてなんといっても柔道、みんな素晴らし過ぎです。谷選手も凄かったですけど、野村柔道も凄かった。なんか彼の柔道は「いつの間にか勝っちゃっている」という感じでホント、「柔よく剛を制す」を体現している気がします。あと、個人的に横沢の準決勝が大ヒットでした。最後の10秒での逆転の一本は鳥肌立ちまくり。谷本も気合い入りまくり柔道でカッコ良かった。
開会式とか、色んな競技を見ていていつも思うのは、一カ所に地球上の各国の代表選手が一堂に会して競技を行う、ということの素晴らしさです。開会式でイラク選手にスタジアムから大きな拍手が送られた時はなぜか「おぉ〜」っという感覚になりました。なんというか、「人類の祭典」ですね、これは。
これからの種目も楽しみですね。陸上で個人的に注目は為末と末続。末続は雑誌「Tarzan」の最新号 (8/25号 )を読んでから観戦すべし。その中で「スプリンターの科学」という特集が組まれていますが、高野コーチの理論とか、なかなか面白い記事が掲載されています。
...とまぁ、そんな感じで横目でオリンピック観戦しながらちょこちょことコーディングしてます。
このサイトでご指摘を頂いた検索フォームまわりなどの細かい部分のほか、メニューボックスとコンテンツボックスの入れ替えといった作業はようやく終了。メニュー周りなどは処理があちこちに散らばっていたので結局PHP側から大幅に整理しないと位置を動かせないので関数を統廃合し一元化。ついでに検索フォームやページャー周りもログ、ファイル、フォーラムで使う部品を共有化し、関数も統廃合、という感じです。結構すっきりしました。コンテンツ部とメニュー部の入れ替えが一番難儀な作業だったのですがこの「コンテンツ先、メニュー後」構造は長い目で見てもベストな構造だと思うので今後は大きな構造変更は無くなると思います。
XHTML構造改訂に伴いサンプルCSSも修正中。これは今のものをシンプル化する作業と、もし上手く完成したら新しいスタイルを追加する予定。
Aug 15, 2004
Pickup ソフトウェア
SafariStand 1.0b10
重宝しているSafari Standがバージョンアップしていたのでダウンロード。Action MenuにHTTPヘッダ表示やクッキー管理などが出来るようになってます。また便利に、着実に進化していますね。↓
GPLなCocoaエディタ「Smultron」
最近知ったのですがこういうフリーのCocoaエディタがあったんですね。まだ使う時間がなくてあまり使い込んでないですがちょっと使ってみた感触はなかなか良いです。ソースも公開されてますね。↓
関連URI
Aug 14, 2004
死者が出なけりゃ良いのかな
OKINAWA CALLINGさん経由
久々にMacやWeb関連以外のネタを。
こんな大事件にもかかわらず、その日の夜のニュース、報道番組は一斉に「巨人軍の渡辺オーナー辞任」のニュースがトップであった。何か順番が間違っていないであろうか？街のど真ん中に米軍ヘリが落ちたのである。しかもその破片が、周りの民家へ飛び散っているのである。赤ん坊を抱いて逃げて、危機一髪助かった親子もいるのです。それなのに、一老人が野球チームのオーナーを辞めた事の方が、この国では大事件なのです。
ホント、頷く事しきり。私は個人的に日本、大リーグを含む「プロ野球」をチーム単位で応援したりしない人間なんで巨人のオーナーがなんぼのものかは分からないですが、(他のプロスポーツとプロ野球、あるいは一般的な「野球と他のスポーツ」の扱い方の温度差みたいなものにも嫌悪感を持ったりしてます。) マスコミ的には墜落事故は「またか」というような感じで麻痺したネタで、死者も出てないのでトップにはならないのでしょうか。
ちなみに事故を起こしたCH53は
CH53Dは70年代後半製造の耐用年数をこえ、老朽化したもので、事故率は全海兵隊ヘリ5機種の中で最高。
ということらしいです。そんなのが在日米軍基地を渡って日本中の上空を飛んでいるのです。過去にも
- 1985 CH53種子島南西40kmの東支那海に墜落。
- 1988 愛媛県伊方原発から2kmの山中に岩国から普天間に帰還中の大型ヘリCH53墜落
というような事故を起こしてるみたいですね。愛媛の事件なんかも原発の近くに落ちたりしてかなりアブナいと思うのですが。その愛媛の事件に関してこういう意見もありました。
まとまらないですが、取りあえず関連記事をクリップ。
関連URI
Aug 12, 2004
レイアウトサンプル
XHTML1.0 Strict + CSSレイアウトサンプル
ここのところP_BLOGの次期バージョンでのXHTMLの構造改革を検討中。主な理由はSEO対策とw3mなどのようなテキストブラウザなどメインストリームブラウザ以外のUA対策で、こちらの記事↓
Day 10: Presenting your main content first - Dive Into Accessibility
を参照しながら「コンテンツが先、メニューは後」構造にしようというプランです。
構造的にはメニューボックスをコンテンツボックスの下に持っていくだけですが、現行のP_BLOGの構造からの移行にはフッタ部分の改良が必要。で、サンプルとなるものをまず作成して練ってみようと思い、以下のレイアウトサンプルを作成してみました。↓
レイアウトサンプル0〜3
最初の「サンプル0」は、CSSを適用していない素のままのXHTMLです。「サンプル1」から「サンプル3」までが同じXTHMLにCSSを適用したものです。差し当たってこのように「右メニュー」「左メニュー」「ハコ入り」というメジャーな3レイアウトがXHTMLを全く弄らずにメジャーなブラウザで成せればOKかと考え中。
今のところMac OS X上のSafari、Firefox、IE5、OperaなどのブラウザではレイアウトOK。今手元にWin機が無いのでWindows上の各ブラウザではどうなるかちょっと心配ですが...。CSSレイアウトの鬼門であるWinIEでOKならGoサインを出そうかと思ってます。(もし他のブラウザでチェック出来る方がおりましたらご意見頂けると嬉しいです。これらのレイアウトサンプルに関しての他のご意見も歓迎。)
いつもは吐き出されるXHTMLとCSSでのレイアウトを想像しつつPHPを書きながら同時進行で構造を練っていくのですが、このようにXHTMLとCSSを別に練ってから既に出来上がっているものに被せて調整していくのは初めてのアプローチ。XHTML+CSSまわりは結構時間を食う作業なのでどうなることやら...。
CSS実験再び
先日の記事、「JAM LOG : CSS Anchor」で恒久URI(Permalink)のアンカーボタンをCSSで装飾する、というのを書きましたが、それに対して色々コメントを頂きました。
で、前回の記事ではアンカー要素を背景画像で装飾してボタンに見せる、というのを実現するためにパーマネントURIは記事の見出しのほうに記号をアンカーにして目立たないように仕込んでいたのですが、今度はフッタのほうに持ってきてみました。
ただ、そのままリンクを並べるだけでは面白くないので、前回のマウスオーバーやクリック時にボタンの色が変化するインターフェイスのアイディアを生かし、さらにコメントやトラックバックを受けたら赤いマークがついて目立つようにしてみました。ついでに、リンクのタイトル属性も日本語で説明をポップアップするようにしてみました。↓
前回のアンカーの画像装飾では最初のマウスオーバー時に一瞬画像がロードされるためウェイトがかかる問題がありましたが、今回のこのアンカーリンクの装飾ではhttp://hail2u.net/blog/のkyoさんからご紹介頂いたこちらのサイトの素晴らしいCSS テクニックを応用してみました。
[ws] Fast Rollovers Without Preload
タイトル通り、「プレロード無しに高速ロールオーバーさせる」という、この色の変化を実現するのに一つの画像しか使わないテクニックで、横長の画像をその動作に合わせて移動させる、というものです。確かにこれだとウエイトが全くかからず、高速に動作する感じでこれはなかなか使えます。
私の場合、このように4つのボタンを600×20ピクセルのサイズに150pxごとに並べた画像を作成し、それをスライドさせるようにしました。
anchor_bg.png 600x20 pixels
横幅を150pxと広めにとったのは、ある程度ブラウザで「Permalink」「Trackbacks」「Post Comments」などのテキスト部分のフォントを大きくしたりしても十分足りる横幅を確保するためです。とりあえず今の所Safari、Mozilla、WinIE6などで動作チェックしています。
これらの改変のためにこれまで見出しの頭にあったパーマネントリンク用のアンカーや、「Trackbacks」「Post Comments」などのリンクを区切るために使っていた「-(ハイフン)」なども取っ払ったため、XHTML構造的には前より奇麗になったと思います。
今の段階ではPermalinkページでは記事のフッタに「Permalink」のリンクが表示されますが、これはそのままにしようかどうしようかと考え中。