Archive for 1月, 2009

プラグイン開発者感謝の日

金曜日, 1月 30th, 2009

みなさまこんにちは、加賀田です。話題にするにはちょっと遅くなってしまいましたが、おととい1月28日は”Thank a Plugin Developer Day”すなわち「勤労感謝の日」ならぬ「プラグイン開発者感謝の日」だったそうです。というか、そういうことについおととい決まったとのことです。

「プラグイン開発者感謝の日」制定のいきさつについては、WordPress.org公式ブログに記事が出ています

Today we just passed 4,000 plugins available in our plugin directory.

WordPressプラグイン、4,000件突破。おめでとうございます。

WordPressに限らず、MovableTypeでもなんでも、いまやそこそこ名の売れたツールであればひとさまの公開したプラグインでかなりなんでもできる時代になりました。これはこれで非常に良いことですが、物を作る人間であることはわれわれもプラグイン作者様も同じであるはずで、作者様のおこぼればかり追いかけてる場合じゃないな、自分もなにがしか貢献したいものやなと改めて思います。いやはや。

MTブラグイン紹介

火曜日, 1月 27th, 2009

皆さん、こんにちは。加藤です。
某巨大掲示板にのっていた情報によると、なんと!アーセナルとゼニト両クラブ間でアルシャービンの移籍について合意したそうです!
ゼニトの公式サイトに載っていたそうなので間違いないかと!あとは選手との契約がこじれなければ…
とにかく、このままスムーズに合意してくれれば、2月以降の週末が楽しくなりそうです!

さてさて、本日はMTプラグインの紹介をしたいと思います。
本日ご紹介するプラグインはこちら!

静的ページ用ページ分割プラグイン:PageBute

このプラグインは、

PageButeプラグインは、Movable Typeで生成するhtmlをページ分割してくれるプラグインです。静的ページを生成しますのでPHP処理なども考えなくてもよいので、かなり便利なプラグインです。Movable Type4でも動作を確認しました。

ということが出来ます。

例えば、記事がたくさんあるカテゴリなどで使用すると幸せになれると思います。
上記の例のようなケースは多々あるので重宝しています。

ruby関連マークアップとその使われ方

月曜日, 1月 26th, 2009

みなさまこんにちは、加賀田です。本日取り上げるのはYOMIURI ONLINEさんから「今年の中学受験「サンデーショック」…親も学校も手探り」という記事。といっても、ニュースの内容について書き始めると当ブログの趣旨から外れてしまいますので、こちらの記事のHTMLマークアップについて取り上げたいと思います。

この記事にいくつか登場する「ふりがな」。Firefoxで閲覧すると、下図のように表示されます(赤枠は筆者)。

OperaやSafari、Google Chromeなどでも同様の表示となります。

ところが。これをIEで閲覧すると、次のように表示されます。

ふりがながちゃんと行の上にレンダリングされています。

ふりがなは、XHTMLモジュールとして定義されておりXHTML1.1以降で利用できるrubyなどの要素(プログラム言語rubyとは無関係)を使ってマークアップすることができます。上図のふりがなのHTMLソースは次のとおり。

<ruby><rb>雙葉</rb><rp>(</rp><rt>ふたば</rt><rp>)</rp></ruby>

このようにふりがなをマークアップすることで、ruby関連要素に対応しているIEはこれをきれいにレンダリングできます。そして、デフォルトで非対応のその他ブラウザではそれらのマークアップが無視され、通常のテキストとして表示されるわけです。

ただし、YOMIURI ONLINEの文書型宣言は次のようになっています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Transitionalですね。XHTML 1.o Transitionalではruby関連の要素が定義されていません。ruby関連のマークアップをするなら、文書型宣言もXHTML 1.1であるべきです。

さらに。同じ記事がgooニュースにも掲載されています。ruby関連のマークアップも、そのまま転載されています。そしてgooニュースの文書型宣言はHTML 4.01 Transitional。もちろんHTML 4.01においてもruby関連要素は定義されていません。これをFirefoxはどのように表示するかというと…

p_200901263

rb、rp、rt各要素の前後に半角空白が表示されます。これまた、IE以外の多くのブラウザが同様の表示となります。そしてIEは柔軟にふりがな表示してくれます(いいのか悪いのかはともかく)。

日本の大学サイト

金曜日, 1月 23rd, 2009

エ・エアコンがあぁぁぁぁぁぁ!

皆さん、こんにちは。
自宅のエアコンが故障し、ウンともスンともいいません。
現在、我が家は極寒です。ホント寒いです。大事なことなので2回言いました。
コタツがあるので、家にいるときはコタツに入りっぱなしです。
でも、コタツに入ると暖かくて動きたくなくなるんですよね。
このままだと休日コタツから動けなくなりそうなので、明日業者に連絡して早めに来てもらうことにします。

さて、本日のエントリーは大学のサイトについてのお話。

弊社では、Webサイト制作の際に「スケルトン手法」という制作方法を推奨しています。
そのスケルトンを作る際のデザイン参考になるサイトを探していたときに日本の大学サイト一覧というページにたどり着きました。

私はこれまで大学のサイトを見たことがなかったのですが(見ているかもしれませんが印象に残っていません)、イメージとしては区や市のWebサイトと同じような最低限のサイト、という印象でした。
確かにそういうサイトもありましたが、多くのサイトはFlashを使ったりして綺麗なものばかりでした。
今日は、私が見た中でのオススメサイトをご紹介したいと思います。

  • 千歳科学技術大学
    トップにFlashがあります。在校生の顔が流れてくるのですが、これはどんな人間がいるのかイメージが湧くので面白いです。
  • 東京芸術大学
    さすが芸術大学。私はデザイナーじゃないので良く分かりませんが、色の使い方が普通とは違う気がします。
  • 学習院大学
    シンプルな作りで分かりやすいです。

大学サイトを色々見ていて感じたのは、Flash率の高さです。
私個人としては、Flashじゃなくても…と思ったりもしますが、見た目の印象は良く感じます。
Flashを入れれば当然、通常の作成費より高くなります。近年は少子化により大学全入時代になり、大学によっては定員割れも出てきているようなので、各大学もWebサイトに力を入れてきているようですね。

最後になりましたがセミナー情報です。
右のサイドバーにもバナーが貼ってありますが、弊社取締役がスケルトン手法について語るセミナーが来月の3日に渋谷で開催されます。
ご興味のある方は、お気軽にご参加ください!

IEとlist-style:none

木曜日, 1月 22nd, 2009

みなさまこんにちは、加賀田です。本日は最近気づいたIEの不具合についてご紹介いたします。

例えば、次のようなHTML。

<ul>
<li>ほげ</li>
<li>ふが</li>
</ul>
<ul class="none">
<li>ほげ</li>
<li>ふが</li>
</ul>

これに、次のCSSを適用します。

ul{list-style-image:url(bullet.gif)}
ul.none{list-style:none}

すると、次のような表示が期待されます。

p_200901221

実際、Windows版Firefox3/Opera9.6/Safari3.2/Google Chrome1およびMac版Firefox1.5/Opera9/Safari3.2で上記の表示が確認できます。

ところが、IEの場合は…

p_200901222

2つめのリストからマーカ画像が消えません。どうやら、IEではlist-style-imageプロパティをlist-style:noneで上書きできないようです。上書きのためにはlist-style-image:noneを指定する必要があります。

ちなみに、list-style-typeプロパティはlist-style:noneで上書きできます。また、同じlist-styleプロパティによる上書きでも、none以外の値(画像のパスを指定しなおすなど)でなら上書きが有効です。

このあたりの仕様についてW3CのCSS2仕様書に当たったところ、次のような記述がありました。

A value of ‘none’ for the ‘list-style’ property sets both ‘list-style-type’ and ‘list-style-image’ to ‘none’:

やはり上書きされるのが仕様のようですね。

ユーザーがお気に入りの動画広告をつくる

水曜日, 1月 21st, 2009

私が銀魂という漫画及びアニメに出会ったのは去年の10月
以降、漫画を全巻収集するなどいい歳こいて少年漫画にハマってしまいました。
そして先週末…。
昼頃からニコニコ動画で銀魂関連の動画を観ていて、気づいたら夕方になっていました。
あの「オススメ」のせいです。ついクリックしてしまいます。作り手の思惑にまんまと乗せられてますね。いわゆる導線設計というやつでしょうか?
そんなニコニコ動画ですが、なにやらまた新たなサービスを発表したようです。

ニコ動お気に入り動画をユーザーが宣伝 「ニコニ広告」23日スタート(ITmedia News)

ユーザーが広告ですか。
これは、今まで以上にニコニコ動画での滞在時間が増えてしまいそうです。
平日の夜は、ニコニコ動画を自重するよう努力します。寝不足になってしまいそうなので…。

「コーダー」とは?

火曜日, 1月 20th, 2009

みなさまこんにちは、加賀田です。どうやら年明けあたりから自分の肩書きがひっそり「ディレクター」になっていたらしいことを本日知りました。どきどきです。

元来、わたしは無銘のいち「プロダクション事業部」メンバーでした。また入社時にまでさかのぼると、そもそもは「HTMLコーダー」募集に飛びついて入社したわけですから、「お仕事は?」と訊かれれば(名刺にはそう書いてないけど)「HTMLコーダーです」とは答えていました。

で、そこに今回「ディレクター」の銘がついた、と。今後「お仕事は?」と訊かれたら「Webディレクターです」って答えたらいいんでしょうかね。

これを受けて、社内では「“コーダー”より“ディレクター”のほうが社外/業界外の人に分かってもらえる」とか「いや“ディレクター”も説明が必要でしょう」などといった話をしていました。「ディレクター」については未検証ですが、少なくとも「コーダー」という職業が認知されにくいというのは常々感じていました。知人に説明するのも大変だし、親族などなおさら。

そんなことを考えていたところ、Wikipediaに「HTMLコーダー」の解説があるのを発見。こちらではこんなふうに説明されています。

HTMLコーダーとは、分業化されたウェブサイトの制作過程において、HTMLを使用してウェブページを作成する作業を行なう者の呼称である。

まあ、そう説明するしかないか…。たぶん、「コーダー」について説明するのに「分業化されたウェブサイトの制作過程」から説明しないといけないからいつも困ってたんだなと自己分析。

2000年頃までのインターネット普及期においては、デザイナーがHTMLコーディングも兼任するケースが多かったが、サイトの大規模化・複雑化に伴って コーディングの作業量が増大し、必要なスキルも高度になってきたため、デザイン作業との分業化が進んだ。ただし現在でも、とくに中小規模のシンプルなウェ ブサイト制作ではデザイナーが兼任することも少なくない。

弊社では、基本的にデザイナーがコーディングを兼任することはないですね。コーディングを兼任するのは「ディレクター」です。つまりわたしは今後もHTMLコーディングをするということです。

さらに、「使用するソフトウェア・ツール」というセクションがありますね。

オーサリングソフト
Adobe Dreamweaver

これはもちろん。

画像編集ソフト
Adobe Fireworks、Adobe Photoshopなど

Yukariも重宝してます。

高機能テキストエディタ
秀丸エディタ、EmEditorなど

わたしはサクラエディタCrescent Eveです。

FTPクライアントソフト
FFFTP、NextFTPなど

SFTPに乗り換えました。クライアントはFileZillaとかWinSCPとか。

文法チェッカー
The W3C Markup Validation Service、Another HTML-lintなど

Dreamweaverのバリデーションをメインで使っています。前者はあまり使ってません。後者は営利目的の利用は有料とのことで、使用料を収めていないので仕事では使ってません(個人利用では重宝してます。非常に勉強になります)。

ともあれ、名刺にのる肩書きが変わったところで仕事の内容は同じ。引き続き粛々と業務にいそしみます。今後ともよろしくお願いいたします。

Perl学習第10歩

月曜日, 1月 19th, 2009

皆さん、こんにちは。加藤です。
今日の東京は、16℃まで気温が上がるらしいです。
昨日比+8℃…皆さんも体調管理、気をつけましょう!

さて、本日も引き続きPerl学習を続けたいと思います。

本日のお題は「unless文」です。

unlessとは、「もし~でなかったら」を実現するためのものです。要するにif文の逆です。
MTでも同じようなタグがあるのでMTユーザーの方は違和感なく覚えられるかと。。。

また、if文でもunlessと同じことが出来ます。

if(not 条件式){
処理
}

上記のようにすれば、もし~でなかったらをif文で再現できます。
以下、サンプルです。

ソース

p_perl10_01

表示画面

p_perl10_02

今回は、以上になります。
次回は「配列」を学びたいと思います。

CookieSafe:Cookieの受け入れ設定をするFirefoxアドオン

金曜日, 1月 16th, 2009

みなさまこんにちは、加賀田です。本日は前回のcookiemanager.jsのご紹介に絡んで、Cookieの取扱いが便利になるFirefoxアドオンをご紹介いたします。それが表題のCookieSafe

CookieSafeアドオンをインストールすると、ステータスバーになんともアメリカンなテイストのクッキーアイコンが追加されます。サイトを開いてCookieのやり取りが発生すると、このクッキーがぱくぱく動くアニメーションが見られます。かわいらしい。

そして、このクッキーアイコンをクリックすると次のようなメニューが表示されます。

p200901161

このメニューから、現在表示しているサイトのCookieを受け入れるか否かを手軽に設定できるわけです。

さらに、クッキーアイコンを右クリックすると出てくるメニューが下図。

p200901162

これまでに設定したサイトごとのCookie受け入れ設定を、ここから編集することができます。

以上のとおり、Cookie受け入れの設定をサイトごとに細かく設定することで、セキュリティ上の脅威から自分の身を守ることができるようになるわけですね。

あと、Web制作のツールとしては「Cookieを編集」「Cookieを削除」などのメニューが意外に役立ちます。Cookieを読み書きするようなスクリプトをテストする際には、CookieをクリアしたりCookieの中身を確認したりする作業が頻繁に発生しますからね。Firefox本体の「オプション」メニューからもだいたいのことはできますが、こちらのほうが機敏に使えて便利です。

Perl学習第9歩

木曜日, 1月 15th, 2009

皆さん、こんにちは。加藤です。
昨日こんなニュースをみました。
テクモ、大ヒットドラマのオリジナルストーリーが楽しめる「相棒DS」
杉下右京・亀山薫が全編実写で動きまくるアドベンチャーゲーム

か、買うわけな…いや、やっぱなんだかんだで買っちゃいます。
すごく地雷なヨカンがしますが、相棒ファンとしては踏まなくてはいけないものです!
発売は3月5日。ドラクエが予定通りいけば3月末なので、それまで通勤の暇つぶしは「相棒DS」をやりたいと思います。

さてさて、今回で9回目のPerl学習企画です。
本日のお題はこちら!

「演算子orとand」です。

if文の条件式のところで使用します。
orは「または」、andは「かつ」という意味を表現します。
例えば、12時または18時の場合は

$hour == 12 or $hour == 18

となります。
以下がサンプルコードと表示画面です。

ソース

p_perl09_01

表示画面

p_perl09_02