londoner25.net

デュアルブートのUbuntuを9.04にアップグレード失敗して以来何度か復旧を試みるも失敗。仕方なく8.10にダウングレードすることに。久しぶりのCDからのインストールだったのでパーティションの設定にビクビクしながらも最後は「えいや！」とインストールボタンをポチッ。
ダウングレード自体は成功して今まで8GBほど使っていたのが2GB程度になっているのは確認。ただ、ブートローダの設定がうまくいっておらず、8.10にアクセスできない。

というわけで昨晩にWindowsで起動して少し新しいテーマを作ろうとAptanaで作っていました.その時は別段問題なく快適に操作できていました。そして今日はチャンピオンズリーグのアーセナル対ユナイテッドがあったので、そこまで興味はないけどどのような試合でどちらが上がるか見ようと思い4時前に起きました。白熱した試合を期待していましたが15分までに2点差がついてしまい勝負あり。
後半からはテーマを作りながら試合を見ようと思ってPCを起動しました。するとWindows XPの「ようこそ」画面で静止してしまい強制終了。後から考えるとこれがまずかったか…再起動してみると再び同じ画面で静止→試合を見ながら放置しておいたらブルースクリーンに…
なんとなくUbuntuを起動してみるとCドライブがマウントできず。DとUbuntuを入れたパーティションにはアクセスできるのに…そして、再起動してXPを起動させようとしたら必要ファイルが破損しているので起動不可と表示。仕方ないと思い再インストールCDを用意するも修復できず。やはりCは死んでいるのか…VIOSで確認してみると認識はしているようだ。しかしUbuntuや再びCDを挿入して今度は再インストールを試みるも失敗。まさか再インストールもできないとは思っていなかったのでこれは非常にショックです。

近々MacBookを買う予定ではいましたが、Early2009を買う予定でした。（今はもうMid2009ですか…）ちょっとこのタイミングでは買えません。ついでにさすがにこのデスクトップもそろそろヤバいので買い換えようとは思っていました。ただ、こちらもWindows 7が出てからと考えていたのでタイミング的に良くないです。UbuntuのCDからハードディスクドライブをフォーマットできたらXPと本日でたWindows 7とUbuntuのトリプルブートで遊びたいです。もしも、ハードディスクがお釈迦になっていたら…考えたくもないですね。

以前もOS再インストールをするハメになったことがあって、その時バックアップは大切と肝に銘じてはいたんですが、本当に失いたくなかった写真は残せましたが、今になってアレがなくなるのは惜しいと思うファイルはだいたいCに入っていました…これからはやはりバックアップ用のHDDを購入してしっかりバックアップしないといけませんね。そうなるとさらに出費がかさむ…

今後しっかりバックアップをとるもの

• 写真
• 音楽
• Webデータ
• フォント
• サッカーゲームのデータ

寝て起きたら直っていることを祈ってそろそろ再び眠りにつくとしますか…
そんなことないよなあ…

連休残り2日でこのブログのテーマ（テンプレート）を自作しようと思っていました。今日はデザインをして明日でテーマのコードを書いて…と。しかし、デザインセンスがない自分は画像作成ソフトを使ってのデザインができないので頭に思い浮かべたものを紙に書いてマークアップしながら試行錯誤することにしました。
このVicunaのVegaというスタイルは結構気に入ってるのでこれベースに自分好みの書き方などちょこちょこと変更していきたいと思っています。

それで…今、悩んでいるのはサイドバーのマークアップ方法についてです。
自分はちゃんとしたWeb制作のきっかけがこのWordPressで初めて自分でテーマを作ったときに参考にしたテーマのマークアップ方法を使ってきました。
その方法とは

<div id=”sidebar”>
<ul class=”sidebar”>
<li><h2>最新の記事</h2>
<ul>
<li>記事</li>
<ul>
</li>
<li><h2>最新のコメント</h2>
<ul>
<li>コメント</li>
</ul>
</li>
<li><h2>アーカイブ</h2>
<ul>
<li>2009年5月</li>
<ul>
</li>
</ul>
</div>

インデントしてないので見づらいですが、
divの中に順不同リストを入れ込んで、各セクションの見出しはliにh2タグ、各コンテンツも順不同リスト（でマークアップという感じです。

ただ、このVicunaテーマでは定義リストでマークアップされていてセクションの見出しはdt要素、コンテンツはdd要素でさらにその中に順不同リストを入れています。

さらに他のサイトを見ればサイドバー全体をdivでマークアップし、見出しをdiv直下にh要素でマークアップし、コンテンツを順不同リストでマークアップしているサイトもあります。

サイトによって多種多様なマークアップ方法があります。マークアップとはその要素を意味づけするものですから、制作者の感性で様々なマークアップの仕方があるのはしょうがないのかも。

ただ、Web標準がどうのこうの言うのならそこら辺も厳密に統一してほしいところです。
多分自分が今までやってきたやりかたはVicunaのやりかたに慣れている人にとっては修正しにくいやり方だと思いますし。そうなってくると要素が増えるHTML5に期待でしょうかね。ただ、ちらっと仕様とかを見ましたが、結構とっつきにくい感じで不安も感じていますが。
どこかでマークアップ標準化の会みたいなのが起こってこれをマークアップする場合はこうマークアップすると決まれば制作側は色々気を回さなくても良いので楽になるのですが。
ただ、そのノウハウみたいなものが流出するとただでさえ難易度が低いHTMLとCSSの敷居がもっと下がって自分のようなマークアップエンジニアが食べていけなくなる可能性がさらに高まるのですが。
やはり、この要素はこうマークアップするというのは社内やグループ内で定めるに留めておくべきなのでしょうか。
逆に色々なやり方があるほうが柔軟な思考ができていい気もしますし…

こういうWeb議論一度してみたいです。
なんか下手なことを言って論破されそうですけど。
とりあえず、自分は新テーマのサイドバーはdivなしのulにid=”sidebar”をつけてマークアップしていこうと思います。
何かいい案があれば意見をお聞かせ願いたいです。会社にこういう議論ができる先輩もしくは後輩と時間があれば良いのに…

さあミッドウィークは大決戦ですよ！ゴールデンウィーク明けで生放送で見るのは辛いし結果によっては仕事を休むことになるかも…締め切りの案件があるので行かざるを得ませんが、何とかいい結果で終わってほしいです。

チェルシーはロンドンダービー、しかも一番近場にあるフルアムとのダービーとのことでメンバーをほとんど落とさず試合に臨みました。バルサ戦からの変更は左サイドバックにAコールが復帰、右サイドバックにボシングワが戻り、バラックの変わりにアネルカが入りバラックの位置にエシアンが下がった程度でした。

チェルシーは試合開始直後にアネルカ、マルダ、ドログバのコンビネーションで得点。なんと開始50秒でのゴールでした。素晴らしい連携からのゴールでとてもよかったです。けれども、4分にすぐ失点してしまいました。アレックスがラインコントロールをミスしネブラントに決められ同点。アレックスの脆さが出ました。
しかし、10分には好調マルダが決めて突き放しました。ゆりかごパフォーマンスをしていたのでどうもお子さんが産まれたようです。おめでとう！

前半はチャンスも作りましたがピンチも何度かありました。内容があまりよくなかったのと休ませる意図もあったのでしょうが、後半からはアレックスに代わりイヴァノヴィッチ、エシアンに代わりバラックが入りました。イヴァノヴィッチのセンターバック起用は嬉しいのですが、ヒディンクのエシアンへの評価が低いような気がしてならない…
後半にもチャンスを作り、カウンターでアネルカのパスに抜け出したドログバがキーパーのタイミングを外して巧みにゴール。これで勝負ありという感じでした。ドログバは意図的ではないものの危険なプレーでヒヤッとする場面もありましたが、83分まで出場し、ディ・サントと交代しました。

バルサ戦に課題は残ったものの、このようなプレーをバルサ相手にできれば痛快です。あちらさんはマルケス不在な上にプジョールまで出場停止で出られません。マルダ、アネルカ、ドログバがあのようなコンビネーションを見せられると付け入るすきはあると思います。

対するバルサはクラシコでした。勝ち点4差で負ければ肉薄されるということでバルサはチェルシー戦と同じメンバーで試合に臨みました。マドリーはロッベンが怪我から復帰で楽しみです。

そのロッベンは開始からキレッキレでバルサDFを切り裂いていました。こんな選手がいればチェルシーの戦い方も変わったでしょう。マルダも最近良いんですけどね。そしてロッベンのドリブルから何度かチャンスがうまれ、ついにイグアインが決めてマドリーが先制。これでおもしろくなると思ったのもつかの間。その後はバルサがマドリーをボッコボコにして終わってみれば2-6でアウェイのバルサが歴史的な勝利を収めました。4失点目以降マドリーの選手は涙目になりながらプレーしている感じでした。それくらいレベルの差が激しかった。

この試合を見たらチェルシー勝ち目がないのではと思ってしまいますが、チェルシーはあそこまで蹂躙されないでしょう。特に先ほども書きましたが、バルサは守備が不安でチェルシーは攻撃がいい感じに機能しましたし面白い試合になりそうです。

ただ、過去のチェルシー対バルサとヒディンクのジンクスを総合するとスコアレスドローでPKの末にチェルシーが勝ち抜けという可能性が高いです。あくまでジンクスで結果を考えるとですが。
現在、チェルシーは4勝5敗なので次の試合で5分に持っていってほしいですね。期待しています！

自分のコメントアイコンに画像が設定されています。
これはGravatorというWebサービスにメールアドレスを登録すると表示できるようになります。アップロードするなり登録したアドレスに画像を設定しWordPressのような対応しているツールでメールアドレスを入力するとアイコンが表示されるようになります。

さあ！みなさん！興味があるならGravatorに画像を登録しましょう！

Gravator

先日ハイパフォーマンスWebサイトという書籍を購入しました。
きっかけは自分のサイトが自宅から見たら結構重くて多少ストレスが溜まることに起因します。

昨日、MODxを用いベースが同じテンプレートで作ったシンプルなサイト2つで比較してみました。両サイト共に1秒もかからず表示できているので体感的にはほとんど変わりませんでしたが目に見えて効果は出ました。
前述の書籍の著者がFirefoxのFirebugの拡張アドオンのYSlowというアドオンの作者なのですが、このアドオンを用いてテストしてみるとわかりやすいです。
今回は小規模なサイトなのでSmall site or Blogのオプションで実験しました。
何も施策しなかったサイトはグレードCでスコアは79でした。本とYSlowを参考に施策したサイトはグレードAのスコアは96に大幅に改善されました。もともとベースは同じものを使っているので施策したサイトも施策する前はグレードCでした。
ちなみに表示速度は無施策サイトが0.67秒、施策サイトが0.41秒という結果でした。

スコアが17も改善されているなんて何か大掛かりなことをしたかと思うかもしれませんが、実は本当に簡単にサイトの表示速度は改善できます。今回施したことは大きく分けて2つだけです。

• 外部ファイルをひとつにまとめる
• 外部ファイルのサイズを減らす

たったこれだけで結構なパフォーマンス改善ができます。
実はサイトの表示速度にかかわってくる一番大きな要因はHTTPリクエストなのです。
外部のCSS、スクリプト、画像の数が多ければ多いほどHTTPリクエストが送信されるので時間がかかるんです。そのほかにも様々な要因があり、表示の遅延が発生するのですが、小規模なサイトでパフォーマンス改善をしようと思うならこれだけ押さえておけば十分だと思います。（詳しくはハイパフォーマンスWebサイト参照。大規模サイトのパフォーマンスをフロントエンドの技術でいかにあげるかが書かれています）

具体的に何をしたかというと、複数あったCSSを1つのファイルにまとめて圧縮をかけ、JSにも同じことをしました。また画像は背景画像として使っている場合はCSSスプライトを用いてひとつの画像にまとめて使います。今回のサイトでは背景画像がほとんど使われていませんでしたのでCSSスプライトは使っていません。
こんな簡単なことでパフォーマンスがあがるのです。

そして、本日はこのブログでも高速化に取り組みました。
このブログは素晴らしいテンプレートのVicunaを使っています。ただ、言い方は悪いですが作りが少し時代遅れになってきているような気はします。というのもVicunaはCSSをコンポーネント化して編集しやすく設計されているのですが、それが仇となり、ファイルサイズが大きくなり、CSSの数も多くなってしまっていました。

まず、このブログのCSSを一まとめにする前にHead Cleanerという素晴らしいプラグインがあるのでそちらを使ってみました。このプラグインはhtmlのhead要素の中身をきれいに掃除してくれるプラグインです。しかも！ハイパフォーマンスWebサイトに記載されている施策を自動で行ってくれるオプションまでついています。
このブログにHead Cleanerを入れる前はこんな感じでした。

表示にかかるスピードは3.5秒でした。
それがプラグインを導入するだけでこんにもかわりました。

なんとスコアはかわらないのに1秒以上表示が速くなりました。
ただ、その他オプションをいじってより高速化を図りましたが、外部プラグインが干渉しているのかCSSやJSを一まとめにするオプションは機能せず逆にちょっと遅くなりました…

そして、何気なくVicunaのサイトに行ってみると新しい構造のテーマを作ったと書いてあったのでさっそく入れてみることにしました。残念なことに今まで使っていたスキンはまだ新しくなっていないようなのでデザイン変更をしました。Vicunaの作者wuたん（さん）によるとCSSが3個に減量、しかもファイルサイズは50％オフとのこと。これはかなり早くなるんじゃないかと期待に胸膨らませてハイパフォーマンスWebサイトに記述されていた施策を主導で行い新テーマに移行しました。

構造が変わっていることもあり、グレードはB評価でスコアも85になっています。おそらく無駄なプラグインをアンインストールしたら90は超えるでしょう。そして気になる表示速度は…1.38秒程度に改善されています。読み込みファイルのサイズも大幅に減っていて282kbになっています。

小規模サイトでCSSをひとつだけで管理している方には関係ない話ですが、複数のCSSに分けて管理している人は制作時は複数、Webにアップロードする場合はひとつにまとめたものを使うというやり方にしたら気持ちいいくらいパフォーマンスが上がると思います。

自分もこうすれば早くなるということが実体験でわかったので仕事でも極力使っていきたいと思います。

追記：
Head Cleaner適用時に画像のポップアップエフェクトがかからなくなっているので一旦外しました。外すと0.2秒くらい遅くなりましたがこれくらいは許容範囲内ですかね…エフェクトは制作者の自己満足の可能性もあるので、しばらく様子を見てからどちらを取るか選択します。