2009年5月のアーカイブ

おいおいおいおいおいおいおい！！！！という感じ。
もうすぐ期間が終わるしiPhone代がタダなら入ろうと思い、ソフトバンクに魂を売ったわけですが、まさか期間延長するとは。予期できないことはなかったけどまさか本当にやってくるとは…
もちろん、新型のiPhoneの発売は9月30日以降ということですよね。
ソフトバンクが6月に新しいのでますと言っていたわけではないけど、これでは詐欺のような売り方。そもそもiPhone for everybodyの月月割自体が詐欺みたいな広告表示だったからなあ。

もしも期間中に新しいのが出たら改めて自分の買い物下手が証明される。そうなったら悔しくて仕方がないな。本体をボコボコに破壊したいくらいの気分だ。iPhoneじゃなくてiPod touchで充分だったし買うんじゃなかった。もうソフトバンクには関わりたくない。

昨日はWebスクールで出会った仲間と一緒に作っているblogの今後の方針を話し合うために京都に行ってきました。
本当は12時集合だったけど、寝坊をしてしまい1時間半も遅れてしまいました…しかも今回はわけあって集まった全員で話し合える時間は4時間くらいしか無い中で1時間半も遅刻してしまったのです。

13時半に京阪の祇園四条駅に到着し、高島屋の近くのマクドナルドで落ち合いました。そこでお昼（ダブルクウォーターパウンダーチーズセット。さすがに最近食べすぎで飽きてきた）を食べながら方針について語り合ったのですが、話が結構色々なところにそれていきました。
デザインについて話あってたのですが、結局決まったのは

• シンプルで上質なデザイン
• ロゴを作る
• 制作の役割分担

でした。
とりあえず全員でデザインカンプを作成し、コンペみたいなことをして良いやつを選んでそこからコーディングするということになりかけたのですが、デザインを頑なに拒んで自分はテンプレートコーディングの役割を担うことになりました。一応来月にまた集まる予定で、そのとき（デザイン15日、コーディング15日）に新デザインのお披露目会みたいなことをするつもりです。

一人の方がその話し合いが終わって帰ってしまったので、そこからは大とらに行くまでの時間つぶしタイム。
自分は昨日大阪のヨドバシでマウスを買ったのですが、ケーブルの長さが足りなかったので延長コードを買うために近場のソフマップに行きました。そこで友人にMacBookのトラックパッドがいかに素晴らしいかを知ってもらおうと思ったのですが、データが何も入ってなくてスクロールすることもなかったので素晴らしさを十分伝えることができませんでした。
結局延長コードもピンと来るものがなかったので歩いてビックカメラに行くことにしました。
その道中、大とらが今日はやってるか確認してからいこうということになり、ちょっと遠回りしていくことになりました。
そこに行く前にジュンク堂書店によってWebの本を見てたのですが、オライリーがカラーの本を出してることに驚きました。ナビゲーション系のことだったのでちょっと興味はあったのですがね…

結局何も買わずその場を後にし、烏丸通→松原通→油小路通→五条通→堀川通というルートでビックカメラに行きました。大とらは五条堀川と言う交差点のところにあります。夕方に一旦閉めて夜に再開店するので、チェックに行ったときはしまっていました。店主のおばあちゃんが入院したと聞いていたのでもしかしてやってないのでは…との懸念はありました。そのときは五条大宮にある横綱ラーメンに行こうと思っていました。

確認は不十分に終わりましたが、延長コードとMacを見に行かないといけないので京都駅前のビックカメラへ。堀川通を南に進んでいき、世界遺産である西本願寺にやたらと旗が立っているのでパシャリ。何かのイベントが行われてるようでした。

ビックカメラに着いてノートパソコンを見ました。まず、MacBookの素晴らしさを体感してもらい、彼もなかなか気に入っていたようです。ただ重いのがネックだと。彼は勝間和代信者になりかけているので、パナソニックのレッツノートを見ようと言っていたのでそれをみました。ただMacBookを触った後だとレッツノートのトラックパッド部分が酷くダサく思えて彼もその部分が気に入らなかったようです。
他にもいろいろ見ましたが、なかなか希望に合致するものがなく、値段さえ安ければMacBook Airが一番良いという結論に至りました。
USB延長ケーブルも買って目的は果たせました。

まだ大とらに行くには時間が早かったので京都駅前のカフェで時間つぶしました。
そこでWebの話や会社の愚痴などを語らい19時半ごろに店を後にして大とらに向かいました。

大とらとは京都の堀川五条の交差点の近くにある鉄板焼きのお店です。鉄板焼きの他にラーメンやから揚げ、おでん等ありどれも水準以上のクオリティです。元々旦那さんと一緒にやっていたのですが、亡くなられて今はおばあちゃん一人で店をやっています。昔は店の前に車が止められて、さらにオフィスもいっぱいあって会社帰りやお昼によくお客さんが来てたみたいなのですが、最近は時代が変わり閑古鳥が鳴いてるそうです…基本は鉄板焼き屋と思っていますが、ラーメン、から揚げ、おでんなど全て水準以上のおいしさです。昔の繁盛してた頃の名残で20~10年前の芸能人のサイン色紙が店中に貼られています。

結構歩いてかなり疲れましたが、20分くらいで大とらに着きました。遠くから見ると店先のちょうちんに明りがついてたのでやってる！！と興奮しました。相変わらず入りにくい店。ただ、自分が初めて行ったときと比べると明らかに店やってる感はありました。意を決して店内に突入！相変わらず入店しても気付かない！！こんばんは～と言いながらカバンを椅子に置いたらようやく認識してくれました。友人は初大とらだったのでちょっと困惑しているようでしたが、とりあえず自分のおススメのから揚げ（1100円）と何かを頼むことにしました。結局友人はキムチラーメン、自分はラーメンを注文しました。注文してから15分後くらいにお待ちかねのから揚げが出てきてパシャリ。その日の夜は自分たちが初めてのお客だったようでゆで卵をサービスしてくれました。こういうサービスが結構あるのも大とらの良いところ。ラーメンもなんとなく麺が変わってたような気がするけど550円であのラーメンなら満足。タレつきからあげも絶品でしたしラーメンもおいしかったし大満足です。

実はこの大とらの近くに1年ほど前に住んでいて、実家に帰るときにまた来るねと言っていたのに全く行っていなかったのでそれが気がかりでした。もうおばあちゃんは自分のことを忘れていたかもしれませんが、元気な姿を見れて良かったです。また、京都に行った際は寄りたいと思います。
自分の記憶なので定かではないですが、おばあちゃんの体調次第ですけど年中無休で11時開店で15時に一旦閉めて19時から翌3時までやっているはずです。おすすめはから揚げで1100円もしますが、量も多いしおいしいしそんなにそこまで高くは感じないです。
おばあちゃんは仕込みに夢中でお客さんに気付かない場合があるので、入店した際はこちらから声をかけてあげてください。今日、自分も全然気付いてなかったんですけど5分くらい待って結局注文せずに帰ってしまったお客もいました。最近お客さんが少ないと嘆いてましたが、そんな感じでお客さんを逃がしていることもあったかもしれません。

そんなわけでぐだぐだ書きましたがメインは大とらの話。
この記事を読んだ方で京都に住んでいる方、京都に行く予定がある方は是非大とらに行ってあげてください！店内は古くてボロいですが、いいおばあちゃんがおいしい料理でもてなしてくれます。から揚げとずりの鉄板焼きが特におススメです。
大とらの場所を地図で確認する
このブログにはGoogleマップを直接貼れないので場所が気になる方はリンクをクリックしてください！
是非是非行ってあげてください。感想などここで聞けたら自分も嬉しいです。

本日、案件で横並びのグローバルナビゲーションをどうCSSで装飾するか悩みました。
少し前なら背景置換でやってたのですが、今は普通にimgタグで書きましょうという風潮なので自分もそれに乗っかっています。背景置換はSEO的に白に近いグレーらしいですけどメンテナンス性があまり良くないですし、あまりいないと思いますが、CSSオフで画像も非表示の環境下で何も表示されず印刷するときもデフォルトでは表示されないと色々欠点があります。

それで、一応隙間を埋める方法は知っていたのですが、CSSでできなかったっけと思い、Googleで検索してみましたが上位は「liを1行で書く」とか「コメントを入れてコメント部分を改行する」とか「liの閉じタグ部分で改行する」というようなHTMLに手を加える解決法しか載っていませんでした。

本当はサンプルとか作って載せたいんですが、その気力がないので今回はCSSだけですみません。どなたかサンプル用のグローバルナビゲーション画像を作ってください…

ul#gnav  {
	margin-left: 3px;
}

ul#gnav li {
	display: inline;
	margin-left: -3px;
}

難しいことは何もありません。単に余白をネガティブマージンで詰めて消し、一番左側にある画像も左に3px詰まってしまうのでulを3px右にずらしてもとの位置に戻しています。
試してませんがもしくは

ul#gnav li {
	display: inline;
	margin-left: -3px;
}

ul#gnav li:first-child {
	margin-left: 0;
}

という方法（ただIE6には非対応…）や、一番左側にくるliにclassをつけて

ul#gnav li {
	display: inline;
	margin-left: -3px;
}
ul#gnav li.first-child {
	margin-left: 0;
}

としてもいいかもしれません。ただ、classをつけて対応するのはスマートなやり方ではないと思うのであまり推奨しません。

画像提供者が現れて、時間もあればサンプルページも作りたいと思います。
今回はとりあえずこれで…

シンプルで爆速ブラウザのGoogle Chromeの2.0正式版がリリースされました。
http://www.google.co.jp/intl/ja/landing/chrome/index.html#brand=CHMV&utm_source=ja-wh

自分は2.0のベータ版をずーっと使っていたのでだんだん変わっていってることは気づいていましたが、1.0からどこまで変わったのかわかりません。
とりあえずJavaScriptの実行速度がさらに30%高速化されたそうですね。WordPressの管理画面はJavaScriptを多用しているのですが、Firefox3.0.10と比べてもキビキビさが全然違います。

ChromeのいいところはJavaScriptを含めて全てが爆速であること。起動もかなり早いので軽くWeb閲覧をするだけの人には向いてるブラウザだと思います。
ただ、軽い代わりに今のところエクステンション機能もあまりないし、拡張性はまだまだ乏しいです。また、2.0からオートコンプリート可能になりましたが、フォームへの入力に関しては不自由なことが多いと感じています。
なので、Web制作をしたりソーシャルブックマークサービスとかそういうのを重用したり、掲示板によく書き込んだりする方はFirefoxやその他を使うのが良いかと思います。

そして、この1ヶ月間のこのブログにアクセスした方のブラウザの合計でChromeは10％もの人に使われているようです。思ったより多くて驚いています。このブログでChromeは良いといったのも利きましたかね。それはないか。

なんにせよ、Firefoxは3.0からいきなり3.5になってかなり機能がアップするようですし、今のようなWeb技術を正しく理解し、表示を早く早くという方向性は基本的に歓迎です。このブログの閲覧者のブラウザ1位はFirefox3.0でしたがIE6もまだまだ多いのが現状です。ただ、会社で関わっているサイトも合わせてサンプル数は少ないですが、総計を出してみるとIE6を使っている方は実に15.5%しかいなかったのも驚きでした。やはりWebネタも結構多いブログだからIE6人気があまりないのでしょうか。

IE6を使っている人でたまにWeb閲覧をする方でブラウザって何という方はとりあえずChromeをインストールして使うことをおススメします。Web閲覧がぐーーんと便利になると思いますよ。

たいそうなタイトルですが、単に自分はこれを入れていておススメですよというFirefoxのアドオンです。会社のFirefoxを一旦ユーザープロファイルを含め完全に削除してから再インストールしたらかなりサクサクになって気分がいいのでこんなの書いちゃいます。（家のは最近インストールしたばかりなのに起動がかなり遅い…）
まあ、このようなブログ記事は何度も目にしていますので目新しさはないでしょうが…

おススメアドオン

• Firebug
• Web Developer
• HTML Validator
• YSlow
• Operator
• Pearl Crescent Page Saver Basic
• Shearaholic

Firebug

いわずと知れた有名アドオン。
HTMLの構造が把握しやすく、調査ボタンを押すと知りたい要素のHTMLとCSSがどのように記述されているか一発でわかります。また、ライブでCSSを変更して確認できる点が素晴らしい。Firefoxでチェックしながら作っている場合は絶対に入れておきたいアドオンですし、恐らくほとんどの人が使っているでしょう。ただ、最近Firefoxがよく落ちるのですが、このアドオンが原因という可能性もあるようです。

様々な拡張アドオンがあるのも魅力。

Web Developer

こちらも必須ツールです。
ワンクリックで全ての画像のalt属性を確認したり、画像を非表示にするなどWeb制作時の確認作業時にかなりの力を発揮してくれます。今まで日本語が使えてましたが、最近英語版をインストールしたようで日本語が使えない…どなたか日本語の仕方をおしえてくださ～～い…

HTML Validator

表示しているページのHTMLの文法チェックをしてくれます。
これを入れておけばいちいちW3Cのサイトなどにアクセスしなくて済むのでかなり作業効率があがりますし、常に結果が見えているのでValidなHTMLを書けるようになります。ただ、Validなら何でもいいという訳ではなく、テキストの要素を適切なタグでマークアップすることが大切なことだというのを忘れてはなりません。

YSlow

これはFirebugの拡張アドオンです。
このアドオンではそのページの表示速度を計測できます。Yahoo!社でフロントエンドのパフォーマンス改善に尽力した人が作ったアドオンで、ハイパフォーマンスWebサイトという書籍を合わせて読むことをおススメします。
ブログなど何も考えずに作ってたら大概グレードCくらいなのですが（Small Site or Blogのオプションで計測した場合）、本を参考にグレードAまで改善すると表示スピードが0.6秒強から0.4秒弱に改善されました。
ちなみにこのブログはプラグインをいくつか入れているのでグレードがBになっています。

Operator

これはまだあまり知られていないかもしれません。
ページ内のmicroformatsで記述された部分を理解し、表示してくれます。
WordPressはmicroformatsがふんだんに盛り込まれているので興味があるかたはこれを使ってみましょう。
例えばhCalenderというmicroformatsがWebサイトに記述されていればそれを理解し、ワンクリックでGoogle Calenderなど他のアプリケーションに登録してくれる優れもの。日本ではまだ誰もが知ってるというものでもないですが、すでに4年ほど前から使われていて大きなサイトでも積極的に利用されています。microformatsに興味がある開発者の方はさらにmicroformatsに興味を持つアドオンではないかと思います。

同じくmicroformatsアドオンのTails Exportも合わせてどうぞ。

Pearl Crescent Page Saver Basic

このアドオンはブラウザに表示されているもののキャプチャをとるためのプラグインです。これを知るまではWebページのキャプチャはSleipnirでとっていたので大変ありがたいプラグインです。
画像のキャプチャの仕方（表示されている部分だけかページ全体か）、画像形式（jpegかpng）を選択できます。

Shareaholic

これはソーシャルサービスにワンタッチで登録するためのアドオンです。
サービス数が充実していて使い勝手がいいです。これを使えばいちいち登録したいサービスの管理画面を開いく手間が省けていいです。最もソーシャルブックマークやRSSを多用している人には有用ですが、使っていない人には無用なアドオンではあります。
上記以外にTumblrなども登録できます。

その他

入れておいてもいいんじゃないかナーという感じのアドオンを

SenSEO

これは実験的なアドオンでそれをわかった上でインストールしないといけません。SEOに関するFirebug拡張のようですが、使ったことが無いので詳細は不明です。ちょっと明日にでも会社のFirefoxに入れてみようと思います。

ColorZilla

Webページの色を抽出できるアドオン。デザイナーは重宝するアドオンでしょうか。このアドオンを入れたら、インストールの仕方も悪くて起動する毎に作者ページが開いたのでちょっと嫌いになっちゃいました。

MeasureIt

選択した部分の大きさを測るアドオンです。これも1pxのずれも許せないマークアップエンジニアが好きそうなアドオンですが、今のPCには入れていません。僕は正直精度に疑問を持っていますが、あれば便利なアドオンではあります。

Firefoxはあまりアドオンを入れすぎると重くなってしまいますが、カスタマイズ性に優れた素晴らしいブラウザです。特にWeb開発者にとっては重宝するブラウザだと思います。
もしもブラウザが重くなってきたらユーザープロファイルも含めた完全なアンインストールを実行してから差インストールをしましょう。その際はお気に入りの保存（エクスポート）も忘れずに。見違えるように軽くなります。それでみなさん快適なブラウジングとWeb制作を。