Archive for 2月, 2009

カノニカルリンク

金曜日, 2月 27th, 2009

皆さん、こんにちは。加藤です。
本日は、雪が降るかもしれないそうです。
寒暖の差が激しいですね。ついこの間は春のように暖かかったのに…。

さて、昨日こんな記事を目にしました。

唯一の正しいURL、カノニカルリンク?

Google、Yahoo!、Microsoftの検索3大手がCanonical Link要素(正規リンク)の導入で一致した。Canonical Linkは正規化された唯一のURLを情報として提供するというもので、あるコンテンツに対して複数のURLが存在する「重複ページ」に対するひとつの回答となるものだ。

たとえばhttp://www.bostudio.co.jpとhttp://bostudio.co.jpでアクセス可能なページがあったとして、どちらを正規のURLかを設定するということです。
これはECサイトなどで重要になってくるようです。
関連リンクを集めてみました。ご興味があればご覧下さい。

サイトによってはなくても実害はないかもしれないですが、HTMLソース1行追加するだけですからテンプレートに追加したいと思います。

Safari4BETAをさわってみた

木曜日, 2月 26th, 2009

皆さん、こんにちは。加藤です。
CL再開しましたね。アーセナルは1-0で勝利したようですが、もっと点が取れた試合内容だったようです。
セカンドレグはローマのホームです。アウェイゴールを与えなかったとはいえ、ベスト8進出は微妙な情勢です。

さてさて、遅ればせながら、Safari4BETAをさわってみました!
Safari3の4倍早いらしいです。実際、早い早い。
ただ、今回個人的に気に入ったのは、速さではなく見た目。
とにかくクールです。

p_safari01

↑iTunes風のCoverFlowでお気に入りからサイトを選択できます。

p_safari02

↑TopSitesからも画像のようなカンジでサイトを選択可能。

p_safari03

↑弊社サイトはこんなカンジ。いつもより輝いて見えます。

ということで、個人的には早さなどの性能面よりデザイン面が気に入りました。
本リリースがいつになるかは分かりませんが、なかなか使えそうなブラウザになりそうです。

ページ内リンクにアニメーションをつける

火曜日, 2月 24th, 2009

皆さん、こんにちは。加藤です。
ここ1年でイヤフォンを2回ほど買い換えています。
なんで、あんなに壊れやすいのか…私の使い方が荒いのでしょうか?
そんなにひっぱったり手荒な扱いはしていないのですが…。

それでは、本日の本題に移ります。
弊社では医療HPパッケージという医院向けのパッケージ商品を提供しているのですが、この度サイトを改修いたしました。
このサイトを構築していてちょっと工夫したのが、よくある「ページ内リンク」。
リンクをクリックするとページ内の指定した場所に移動するものですが、一瞬で移動してしまうと、どこにいるのか分からなくなりますよね。
それを解消するのが、特段珍しい方法ではないのですが、JavaScript(jQuery使用)でアニメーションを付けてゆっくりと移動する方法。
実際に導入したページはこちら。(「ホームページを100%活用するには」などのローカルメニューをクリックすると、ページ内の指定した場所に移動します。)
ちょっとした工夫で、迷子を減らせる方法だと思うので、社内のテンプレートセットへの組み込みを提案してみようと思います。
以下が今回使用したソースです。もっと効率的に書けるかも?

$(function(){
PageTopSet();
});
function PageTopSet(){
PageTop(“クリックするリンクid・class(例:#hoge)”,”移動先のid(例:#test01)”);
}
function PageTop(target,target2){
$(function () {
$target = $(target);
$target2 = $(target2);
$($target).click(function () {
$(this).blur();
var targetOffset = $(target2).offset().top;
$(‘html,body’).animate({ scrollTop: targetOffset }, ’slow(ここをいじればスピードを調節可能です)’);
return false;
});
});
}

※動作にはjQueryが必要です。動作確認には、バージョン1.2.3を使用しています。

WordPressの自動アップデート機能

金曜日, 2月 20th, 2009

みなさまこんにちは、加賀田です。ある日、当ブログの管理画面に次のような表示が出るようになりました。

WordPress 2.7.1 is available! Please update now.

待ってました!というのも、2.7から実装された「自動アップデート機能」がここで初めてそのベールを脱ぐことになるからですね。2.7アップグレード時からこの日を待っていました。

ということで、さっそく上図のリンク”Please update now”をクリック。

データベースとファイルのバックアップをとってから、”version 2.7.1-ja”の”Upgrade Automatically”ボタンをクリック。”version 2.7.1″英語版の選択肢もあるので、間違えないよう注意。

続いてサーバへのログイン情報を入力。おお、SSLにも対応していますね。おもむろに「開始」ボタンをクリックして…

WordPress upgraded successfully

静かに完了。

ということで、平穏無事にアップデート作業は完了しました。2.8や3.0といったメジャーバージョンアップもこんなにスマートにできるんでしょうか?楽しみですね。

しばらくぶりのPerl学習第11歩

木曜日, 2月 19th, 2009

皆さん、こんにちは。加藤です。
どうやら、今年こそ花粉症デビューしてしまったようです。
「今年こそ」というのは、去年同じぐらいの時期に、鼻水が止まらなくなったことがあり花粉症か?と思っていたのですが、しばらくして症状が悪化。
はい。普通の風邪でした。
その点今年は違います。今年の諸症状としては、目のかゆみです。これは、風邪ではないでしょう!
ちなみにWikipediaでの花粉症の項目では、以下のように説明があります。

花粉症(かふんしょう、hay fever / pollen allergy / pollen disease, 医 pollinosis または pollenosis )とはI型アレルギー(いちがた-)に分類される疾患の一つ。植物花粉が、などの粘膜に接触することによって引き起こされ、発作性反復性のくしゃみ鼻水、鼻詰まり、目のかゆみなどの一連の症状が特徴的な症候群のことである。枯草熱(こそうねつ)とも言われる。

現在の日本ではスギ花粉によるものが大多数であるが、ここでは花粉症の一般記事を記載しスギ花粉症の固有の問題でまとめられるものは該当記事にまとめることにした。参照のこと。

くしゃみ、鼻水、鼻づまりなどはアレルギー性鼻炎(鼻アレルギー)の症状であり、花粉の飛散期に一致して症状がおこるため、季節性アレルギー性鼻炎(対:通年性アレルギー性鼻炎)に分類され、その代表的なものとなっている。目の痒みや流などはアレルギー性結膜炎の症状であり、鼻炎同様に季節性アレルギー性結膜炎に分類される。広義には花粉によるアレルギー症状全てを指すこともあるが、一般的には上記のように鼻および目症状を主訴とするものを一般的に呼ぶことがある。また、狭義には鼻症状のみを指し、目症状は結膜花粉症(または花粉性結膜炎)、皮膚症状は花粉症皮膚炎または花粉皮膚炎)、喘息の症状は花粉喘息、喉の不快感などの症状はアレルギー性咽喉頭炎などと別に呼ぶことがある。

この記事では、hay fever = 枯草熱、pollinosis = 花粉症というように、古語・現代語、一般名・疾病名、の観点で呼び分けることもある。枯草熱も医薬品等の効能に表記されるれっきとした医学(医療)用語で あるが、ここでは花粉症で統一する。なお、pollen allergy は花粉アレルギー、pollen disease は花粉病(花粉による疾患)の意である。

さて、それでは本題に入りましょう。
本日は、久々のPerl学習第11歩です。お題は、配列についてです。

配列自体の説明はgoogle大先生におまかせします。
Perlでの配列は、以下のようになります。

my @hoge = (0,1,2);

$でなく@というところがポイントです。

また、qwというものを使うと半角スペースで要素を区切ることができます。

my @hoge = qw(one two three);

以下がサンプルソースです。

p_perl11_01

表示画面

p_perl11_02

本日はここまでです。
次回はforeachについて学びたいと思います。

MTでレコメンド

金曜日, 2月 13th, 2009

皆さん、こんにちは。加藤です。

やはりというかなんというか、ドラゴンクエスト9が3月28日から7月11日に延期されました
私は、まだ予約していませんでしたが、弊社でもすでに予約している人もいて、皆一様に落胆していました。
延期の理由は、重大なバグが見つかったとの事。
この重大なバグを一番最初に発見した方、心中お察しします。
ところでスクエニの和田社長の会見記事によると、

「実装を終えてからまとめてデバッグするのではなく、実装段階でデバッグする体制を研究していきたい」

とおっしゃっていましたが、これをコーディングに置き換えると1ページコーディングしたら、「全てのブラウザをチェックする」というふうに置き換えられます。
私は今のところ最後にまとめてブラウザチェックを基本としているのですが、稀にサイト全体で修正しなければならないバグに遭遇することがあります。

サイト全体に影響するバグというのは大抵の場合、1箇所を修正すれば全体を直せるので大きな問題には今のところ陥っていませんが、もはや修正不可能のものだと仮定すると…。
想像するに恐ろしいです。
人の振り見て我が振り直せではありませんが、コーディングのやり方を見直したいと思いました。

さて、ドラクエ話が長くなってしまいましたが、表題のMTでレコメンドです。

代表的なところではAmazonなどのショッピングサイトでよく見かける「この商品を見ている人はこんな商品も見ています」を実現するのが以下のプラグインです。

RecommendedEntry

昔、バンジージャンプをどうしても飛べない人にどう言えば飛ぶか?という話を聞いたことがあるのですが、どうやら日本人には「他の人は皆飛んでますよ」と言うと飛ぶらしいのです。
確かに日本人には、というか私自身にもそういった傾向があることは否定できません。実際、何か物を買うときもまず口コミを調べるという方も多いのではないでしょうか?
というとで、わき道に逸れましたが何が言いたいかというと、MTでサイト構築する際、サイト内循環を高めたい時に、このプラグインを導入を検討してみてはいかがでしょうか。

ターゲットブラウザ考

木曜日, 2月 12th, 2009

みなさまこんにちは、加賀田です。先日、ターゲットブラウザについて改めて考えることがあったのでそのことについて。

いま現在、BOstudioが一般の制作物に対して適用するターゲットブラウザ、すなわち「制作物のテストに使用するブラウジング環境」は次のようになっています。

  • Microsoft Internet Explorer 6
  • Windows Internet Explorer 7
  • Mozilla Firefox 3 (Windows/Mac)
  • Safari 3.2 (Mac)

IE、Firefox、Safariの最新バージョンというのが基本的な方針。そしてIEについては前バージョンの6がまだまだ根強いのでこれを例外的に加えているという状況です。まったく嘆かわしいことです(?)

で、基本的には上記の方針に則ってプロジェクトを進めるわけですが、新しいプロジェクトが始まるたびに最新の動向は改めてチェックする必要があります。そういうわけで、いろいろ見て回ったまとめが下記。

  • アクセス解析結果等を見る限り、まだまだIE6は優勢で無視できません。Yahoo! UI Libraryにおいても、いまだIE6がA-Gradeとされています。
  • IEといえば、先月とうとうRCが出たIE8が気になります。Windows 7といっしょに旧バージョンを駆逐していくことになるのか否か。とはいえ、正式リリースまではターゲットブラウザには含めません。
  • 具体的な動きということではないですが、先月WIREDで紹介されていたブラウザ戦争史のイラストが印象的。戦場に倒れるNetscapeたちが哀愁を誘います。Netscape9に至っては戦場に立つことすらできなかったと…。
  • また、Wikipediaに『推奨ブラウザ』という項目があるのを発見。古いブラウザのサポート終了状況など、よくまとまっていて参考になります。

今後気になるのは、やはり何といってもIE8の正式リリースですね。さて吉と出るか、凶と出るか。

jQueryでcookieを扱う

月曜日, 2月 9th, 2009

皆さん、こんにちは。加藤です。
ちょっと、週末ショックな出来事がありまして、へこみ中です。
デニムのサイズがまたしても…
最近、体重が少し落ちたので、以前購入したサイズと同じで大丈夫だと思ったのですが、細身のものとはいえ…へこみます。

はい。ここから切り替えます。
本日は、「jQueryでcookieを扱う」です。

先日、ちょっとしたリクエストがありまして実験してみました。
そのとき使ったのが、jquery.cookie.jsというプラグインです。
これがなかなか便利です。
すごく簡単にcookieを扱うことが出来ます。

$.cookie(‘クッキー名’,'保存したい値’,{expires: 保存したい日数,path:’cookieが有効なパス’});

こんなカンジでcookieを扱うことが出来ます。
私は、これを使ってクラス名をcookieに保存してみました。
他にも文字サイズ変更スクリプトとか、色々と使用する機会は結構あると思いますので、cookieを取り扱うときの選択肢の一つとして、頭の片隅に置いておいてはいかがでしょか。

いわゆるclearfixをスマートに実装するCSS設計

木曜日, 2月 5th, 2009

みなさまこんにちは、加賀田です。本日はいい話を聞いたのでそのことについてご報告申し上げます。

CSSでfloatを利用したレイアウトを行う際に、必ず問題になるのが「回り込み解除」をどこでかけるかということ。特にボックスの終わりでclearプロパティを設定しようにも適当な要素がないとき、重宝するのがいわゆるclearfixです。

同じclearfixといっても、ターゲットブラウザやその他もろもろの観点から様々なコードが提案されています。BOstudio社内で共通して使っているのはこちら。

http://www.bostudio.co.jp/css/universal.css

.clearfix:after{
clear:both;
display:block;
height:0px;
visibility:hidden;
content:".";
}
.clearfix{
display:inline-block;
}
* html .clearfix{
height:1%;
}
.clearfix{
display:block;
}

終端で回り込みを解除したいボックスにclearfixクラスを指定する形で使用します。

私がこういう手法を知ったのはたしか2006年ごろ、弊社に入社する前に読んだWeb Creators誌の記事でした。で、入社直後からこういう手法でclearfixを使ってきたので、かれこれ2年になりますか。これまで非常に重宝してきました。

しかし悩みもありました。ここでclearfixクラスは対象とする要素の意味ではなく単にスタイルを指示するものですから、class=”clearfix”なんてHTMLソースコード中に書くのはHTML中に表示制御のコードが混在しているも同然です。<body style=”color:red”>とか<p align=”center”>などと本質的には変わらないわけです。かといってclearfix関連の長大な声明を必要なセレクタすべてに対してコピペするというのも、保守性に問題が出そうです。

そんなところへ、本日ある人からいい解決策を教えてもらいました。clearfix専用のスタイルシートを設けるという方法。具体的には次のような感じらしいです。

http://www.top-coffee.co.jp/wp/wp-content/themes/top-coffee/fix.css

こうしておけば、clearfixなスタイルを指定したいセレクタをこのスタイルシートにひたすら並べればいいということになりますね。これはいい。ぜひ弊社でも取り入れましょう>加藤さん

プラグインに頼りすぎてる?

水曜日, 2月 4th, 2009

皆さん、こんにちは。加藤です。
先ごろサイバーエージェントとIBMがブログ読者の興味を分析する技術を開発したそうです。

ブログ読者の興味を分析する技術、サイバーエージェントとIBMが開発

アクセスログ解析を勝手にやってくれると言えなくもないこの技術。
このままいくと近い将来、自動アクセスログ解析システムとかいうものが出てきそうですね。

さて、タイトルにもなっているネタですが、
常に頭は柔らかくしておかなければな~と感じた記事がありましたので、それをご紹介します。

まずは以下の記事をご覧下さい。

Movable Type のカテゴリーリストで特定のカテゴリーを非表示にする

書いてある通り、MovableTypeの構築に関する記事で、表示したくないタイトルを非表示に出来るわけですが、私はこういうことをするときは、以下のプラグインを使っていました。

FilterCategoriesプラグイン

初めて特定のカテゴリを表示しない処理をしたときに、このプラグインを使ったのですが、よく考えてみればプラグインを使わなくても出来てしまうではないですか!
結果的には、同じ効果があるので効果は変わりませんが、効率的にはプラグインを使わないほうがいいに決まってます。

現時点で一番効率の良い処理も、やがて非効率になる。そんなことを感じた記事でした。