こんにちは、中尾です。
Zen-Coding、みなさん試されましたか？画期的なコーディング補助ツールとして近頃話題になっています。未体験の方は是非オススメです。インストールせずともオンラインでZen-Codingできます。

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

div#header+div#contents>(div.section>h3)+div#footer

と入力すると・・・以下のコードがドンと表示されます。

<div id="header"></div>
<div id="contents">
<div>
<h3></h3>
</div>
<div id="footer"></div>
</div>

私もDreamWeaverや秀丸マクロで早速試してみましたが、コードがどばっと表示され爽快です。CSSを書くような気持ちで簡単に記述できます。今後定番となりそうですね。

以前CSS Zen Gardenというサイトがありましたが、HTML/CSSは禅にも通ずるということなのでしょうか？
（※Zen-Cartというのもありましたね）

以下の記事を参考にしました。

Zen-Codingでできるあんなことこんなこと  |  gaspanik weblog

Zen-Codingで楽々コーディング! + コツ1つ

ご無沙汰しております。
先日、家チーズフォンデュを初めて行った中尾です。具材の量に対してチーズが足らず、牛乳で伸ばしてダマシダマシ食べました。

さて、先日Movable Type Developers & Designers Conference Tokyoが行われました。残念ながら私は参加できなかったのですが、フォローアップ資料を見ているだけでも非常に勉強になります。スライドや参加レポなどを読み、ようやくMT5の新機能の魅力に気がつきはじめています。MT5すごい！

今回は制作に使うために覚えておきたい「ウェブサイト」と「テーマ」を紹介したいと思います。

「ウェブサイト」

• ウェブサイトとブログの設計 | Movable Type 5 ドキュメント

弊社の案件では「更新情報」や「新着情報」などといった特定の箇所、管理運用を行いたいというケースが多くありました。その場合、サイト全てではなく、特定のディレクトリにMTを導入しております。

例：下記のページをMT化

• http://www.hoge.com/index.html（ホーム）
  →最新の「更新情報」記事タイトル3件を表示
• http://www.hoge.com/news/index.html（更新情報 カテゴリーインデックス）
  →全ての「更新情報」記事タイトルを表示
• http://www.hoge.com/news/post0217.html（更新情報 詳細記事）
  →個別の「更新情報」記事を表示

このケースの場合「更新情報」しか運用していないのに「更新情報」カテゴリを都度指定するという編集の際の手間を無くし、より投稿しやすくするため、MTのサイトURLを http://www.hoge.com/news/ としています。

そしてメインページにあたる http://www.hoge.com/index.html はインデックステンプレート内で一階層上の出力ファイル設定を行って管理していました。（ただしMTBlogURL、MTBlogRelativeURLはあまり使えなくなりますが…）。

今回新機能として追加された「ウェブサイト」は、メインページ（ホーム）と子要素のブログ（更新情報）を明確に切り分けることで、規模に関わらず細やかな運用に対応させることができます。

上記の例の場合、記事の編集者は「ウェブサイト」ではなく「ブログ」の管理画面にて、記事を投稿します。「更新情報」の他に「ニュースリリース」もMT化となった際は、同じウェブサイト配下に新規でブログ立ち上げ運用します。

機能・概念と同様に管理画面上でもサイト構造を理解しやすくなっています。

「テーマ」

• テーマのインストールと適用 | Movable Type 5 ドキュメント

テストサイトから本番サイトへの移行など、カスタマイズしたMTを移行する場合はテンプレートをコピペするか、テンプレートセットを作成してプラグインとして読み込むことで対応しておりました。

これが難儀でございまして、テンプレート以外は全て手作業での入力というケースも珍しくはない状況でした。

新機能「テーマ」を使えばこのようなケースにも対応でき、サイト構築を更に効率化できそうです。

「テーマ」では下記のインポート・エクスポートが可能です。

• テンプレート
• デザインで利用する、画像などのファイル
• カテゴリー
• フォルダ
• カスタムフィールドの設定

カスタムフィールドやカテゴリーといった細かな移行がスムーズにできれば、実際の移行作業はかなり楽になりそうな予感です。活用しない手はありません。

明けましておめでとうございます。ここのところ所持品が色々と故障している中尾です。
遅くなりましたが本年もWeb&Peaceをよろしくお願いします。

新年早々JQueryが1.4にバージョンアップしました！更にスピードアップとのこと。改善されたパフォーマンスをここまで視覚的に訴えられると、試したくて仕方がありません。特設サイトも展開しているようですね。近頃は書籍などからも軽量化・高速化の波を肌で感じております。早速導入です。

さて、本日は要素の高さを揃えるいろいろの話です。要素を横並びにfloatさせた場合に高さを揃えるため四苦八苦しています。高さを揃える手段は多岐に渡り存在しており、そのどれもが一長一短というところ。今回はここ最近で使用している方法を中心にご紹介いたします。

CSSのみで揃える場合：

横並びにする段組を一つの要素で囲み、囲んだ要素に背景画像を表示させることで表示では高さを揃えているように見せるテクニックを使います。

• 段組レイアウトのお約束：段組ボックスの底辺を揃える（揃っているように見せる） « Like@Lunatic Blog

この場合、clearfixを使うなどして、親要素の高さを表示させる必要があります。また、うまくマークアップをしないと不要な要素をHTML側に加えることとなります。「要素の高さ」という文書と関係のないHTMLをどこまで許容するか・・日々精進です。

Javascriptで揃える場合：

便利なJavascriptを使用します。これらのスクリプトにはいつもお世話になっており、大変助かっています。

• ブロックレベル要素の高さを揃えるheightLine.js[to-R]
• jQueryでブロック要素の高さを揃えてみる – 徒書（jquery.flatheights.js）

heightLine.jsの場合は要素にクラスの指定をする必要があるため、近頃はjquery.flatheights.jsを使わせてもらっています。このスクリプトを使えば要素指定をJS側で指定するため、HTML側を触る必要はありません。

ただし、Javascriptが無効の環境では当然のことながら動作しませんので、最低限ガタガタにならぬようCSSでmin-heightを当てます。しかしmin-heightはIE6に効果がありませんので、堂々巡りを避けるため下記のようなハックを当てることでIE6とは一応の和解としています。

• 2行追加するだけで、簡単にIE6でもmin-heightを実現する方法 | CSS-EBLOG

他にもinline-blockを使用する方法やpaddingとmarginを極端当てる方法など、
色々とありますが、状況に応じて使い分けたいところです。

はい、どうも。政です。

気がつくと2010年も既に半月経ちまして、「明けまして！」という気分はとっくのとうに過ぎ去っているかと。

というワケで、皆様、本年もよろしくお願いいたします！

さて、Webサイトの制作など（特にコーディング）をしている方にとっては、日々悩まされつつも、むしろ逆にいとおしく感じちゃってるかもしれない「ブラウザ」さん達。
そんなブラウザに関するアイシェアさんの意識調査がリリースされてました。

「Web ブラウザの利用に関する意識調査」

詳細についてはリンク先でご確認いただくとして、なによりも気になった点はIE使ってる人でも不満に思っている人の割合って約16%くらいしかいないんですね。
公私共にどっぷりブラウザにお世話、というか依存しているワタシにとってはちょっと考えられない！くらいなのですが、世間の認識との相違ってものを痛感しております。なんでも自分を基準に考えてしまうのは要注意ってコトで！

ちなみにワタシの現在のデフォルトブラウザは「Google Chrome」。
それまで使用していた「Firefox」は重くなって来たので乗り換えてみました。重くなったといってもワタシが拡張機能入れすぎただけなんですけどね。「Firefox」さんは決して悪くないんですよ！
そんなこんなで、なんだか最近はあらゆるモノがGoogleに依存している気がして（IMEとか）便利なんだけどソレはソレで恐ろしい気もしつつ、でもやっぱり止められない止まらない。

あぁ、Android端末も気になる、気になる。。。

皆さんご無沙汰しています。中尾です。
「ジメジメとした天気が続き・・」で始めた前回のエントリーから５ヶ月・・
すっかりと更新できず・・フト気がつけば、ワケあった弊社政がエントリーしています。
今後は私もくじけずにエントリーしたいと思います。

さて、先日MT5が発表になり、MT5関連の話題が多く挙がっていますね。私もここ数カ月MT（MT4）の構築が多かったため、MT5でどう変わったのか若干乗り遅れ気味に追いかけています。

MTでの構築においては、よりよいCMSとして運用させることを目的に、実際操作する投稿画面、管理画面をお客様向けにカスタマイズしています。今回は投稿画面、管理画面系のオススメのプラグインをご紹介します。

UploadDir

MTでのファイルのアップロードは任意でフォルダを設定する必要があり、一手間です。場合によっては間違いも起こりうるので、拡張子ごとに保存先のディレクトリを振り分けてくれるこのプラグインが便利です。PDFはpdfディレクトリへ、画像はimgsディレクトリへといった設定を予め行うことが可能。また、既定のディレクトリも指定できます。

CustomDefaultFields

投稿画面のラベル「タイトル」、「本文」、「続き」などをお客様の仕様に合わせたいときがあります。カスタムフィールドと違い、「タイトル」、「本文」、「続き」自由に操作することができません。このプラグインを使えば、ラベルを自由に書き換えたり、項目自体を非表示にしたりすることが可能です。使わないけどそこにある「続き」ボタン・・・これで非表示に！

MultiBlogExt

お客様側での再構築の手間を軽減したい、むしろ再構築自体を無くしたい。MT4.2移行はMultiBlogの機能で関連付けたブログのインデックステンプレートを自動で再構築しているのですが、削除の場合は再構築されないという問題があります。このプラグインはインストールするだけその問題を解決してくれます。

CMSContext

プラグインではなく直接管理画面に手を入れる場合、MTのデフォルトでは/alt-tmpl/ディレクトリに代替テンプレートを入れて表示させることが可能ですが、すべてのブログに適用されてしまいます。このプラグインをインストールすれば各ブログの代替テンプレートの指定することができるため、ブログごとに管理画面のカスタマイズが可能です。

これらのプラグインには大変お世話になりました。開発者さまには本当に感謝しています。

更なる使いやすさを求め、最後にCMSContextの制作者の野田さんの身に染みるエントリーを自分に向けて・・。

• どのCMSがいいとか言う前にお前らやることあるやろ!?

はい、どうも。政です。

弊社のWebサービス、睡眠時間を記録する「ねむログ」。皆さま、楽しんでお使いいただいていますでしょうか？

毎日記録するのって面倒そうですが、ちょっと頑張って続けてみると何気に楽しいデスヨ！

そんなワケで、ワタシの11月分の睡眠時間グラフを公開。

寝不足だと思っていたのに、意外と寝てるなぁってコトが判明。我ながら比較的規則正しい生活を送っているコトを実感。ま、結婚するまではとんでもなく不規則な生活を送っていてとても皆様にお見せできるようなグラフではなかったんデスけどね！

週末のお昼寝は、今年生まれた赤子とのお昼寝タイムだったりして、グラフを見ただけでとてもとてもシアワセを感じつつニヤニヤが止まりません。

宣伝っちゃ宣伝になってますが、ホントに良いサービスだと思ってますので、皆様もぜひ「ねむログ」を活用して、快適睡眠ライフを！

はい、どうも。政です。

本日ネットを駆け巡っている、Googleの日本語入力システムを早速導入してみました。

Google Japan Blog: 思いどおりの日本語入力 – Google 日本語入力

これまでは普通にMS-IMEを使用。たまにイライラする程度で特に不便に感じたコトもありませんでしたが、モノは試しにいざ導入。入れたばかりなので、まだなんとも言えないですが、とても小気味よく動いております！サジェスト機能がとてもイイ感じ！

このサクサク感で、ブログの更新頻度は果たしてアップするのでしょうか！？

と、自分で自分にプレッシャーをかけてみる雨の日の12月。

このブログでははじめまして。政（マサ）と申します。

ワケあって、このブログにエントリー。

ちょっと面白いプロモーションコンテンツがありました。

全日本バーベイタム選手権

三菱化学メディアさんのDVDなどの記録メディアのブランドプロモーションコンテンツ。クイズに答えてロボットを生成。戦わせたりするコトが出来ます。クイズの最終設問では、ちゃんとブランド名を回答させるコトで認知度を上げていこうとしています。さりげなくて良いですね。

正直ワタシもこれまでブランド名を知らなかったので、少なくとも１人には効果アリ！です。

とはいえ、残念なコトにとてつもなく重い！ローディングでひたすら待たされてしまうのがツライ！ワタシのようなWeb絡みの者は試しでやっているので待てるのですが、一般のユーザーがこの長い長いローディング時間を待てるかどうかは疑問です。現在はアクセスが集中しているから重いのか、はたまた根本的に重いのか。なんだかもったいないなぁ。

ちなみにワタシが生成したMONSTER。かっこよさげですが、対戦で負けました。トホホ。

皆さんご無沙汰しています。中尾です。

ジメジメとした天気が続き、早くもバテそうな今日この頃。日刊とうたいながらもすっかり間が開いてしまった当ブログですが、気を取り直して渋谷南平台からお送りいたします！

7/1よりFirefox3.5が正式リリースされました！3.1でも4.0でもなく、3.5とは不思議なバージョンアップですが、早速3.5にアップデートしてみました。起動・ブラウジングどちらも体感としてはサクサクと軽い動きです。UIにも若干の変更があり、これから使い倒そうと思ってましたが、アドオンのほとんどが未対応のものばかりに。

すぐさまダウングレード！アドオンがもはや欠かせない存在になっていることを再認識しました。そんな私が制作に役立てているアドオンをご紹介いたします。今回は確認・チェック関係に絞っています。

・Web Developer
これはいわずもがなの開発ツールで日本語版もでており、重宝しております。挙げていくとキリがありませんが、CSSはDreamweaverではなくコレで編集しています。JavaScriptやCoockieの無効化、ブロック要素に枠を色づけしたり無限の魅力を持っています。

・Html Validator
キャッシュしたHTMLをバリデートしてくれます。当然ではありますが、ミスを怠らないように全ページでチェックします。

・Link Checker
リンクが正しいかどうかを色で知らせてくれます。

・JSView
外部JavaScriptとCSSを右クリックで一発呼び出しできます。

・Popup ALT Attribure
Firefoxで表示されないAlt属性値をIEなどのようにオンマウスで表示します。

Webサイトは立ち上げた後のサービス運用が、今後の成功の鍵を握っています。他面的なチェックで、正確なコーディングを目指します。

みなさまこんにちは、加賀田です。表題に挙げた“GENOウイルス”。Web上でその脅威が騒がれ始めてもう2か月になろうとしています。

いまからここで話題として取り上げるのは少々遅きに失した感もありますね。ですがつい先日社内で話題に上がったり、今朝もITmediaで関連ニュースが報道されたりもしているので、改めて取り上げてみたいと思います。

とはいえ、ウイルスの挙動や被害状況については、すでにお詳しい方々がまとめサイト等を開設していらっしゃるようです。ありがたいことです。

なので当ブログでは、感染予防に欠かせないFlash PlayerとAdobe Readerのバージョン情報を確認する手順、そして旧バージョンを使用している場合は最新版に更新する方法についてまとめておきます。両プラグインを最新のバージョンに更新しておくことが、GENOウイルス感染に対する現状最も有力な予防策のようです。まだの方はこの機会にぜひご確認を。

まずはFlash Playerから。これについてはAdobeからバージョン確認ページが提供されています。Flash Playerを有効化した状態で確認ページを開くと、バージョン情報が表示されます。

本記事を執筆している2009年5月22日現在では、上記画像のとおり10,0,22,87が最新バージョンとなっています。旧バージョンをご利用の場合は、最新版のFlash Playerをダウンロード・インストールしておきましょう。

続いてAdobe Readerのバージョン確認について。これに関してはgtk042さんが詳細にまとめてくださっています。現在のところ最新バージョンは9.1.1ですので、9.1.0や9.0台をお使いの場合は最新版に更新する必要があります。Adobe Reader 9.1.0をダウンロード・インストールした上で、さらにReaderを起動し、メニュー「ヘルプ」→「アップデートの有無をチェック」で9.1.1にアップデートします。最新のバージョン9.1.1が直接ダウンロードできないのはちょっと面倒ですが、ここまでやっておきましょう。