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

ようやく暖かくなりました。いよいよゴールデンウィークですね。
本日はMTミニ情報3つお届けします。トラブル対策が中心ですが、自分への覚書としても掲載します。

ホリゾンタルバー

ホリゾンタルバーをご存知でしょうか。平たくいえば横棒なのですが、微妙に長さが違うようです。ちょい長めの「―」です。MTで投稿したフィールドの中にこのホリゾンタルバーがあり、保存すると空白になってしまうという事象にぶつかりました。調べても解決策が見つけられず、ハイフン「-」に変えて対応しました。しかし、これだけ多くのダッシュがあるとは知らず、その奥の深さに恐怖を覚えました・・。

MTには波ダッシュ問題というのも存在していますし、記号には要注意ですね。

アイテムを使って柔軟に出力

MTのAssetまわりのタグがとても便利です。カスタムフィールドでPDFを出力させる案件があり、その充実ぶりに感激しました。アイテムに登録後、MTAssetPropertyでファイルサイズを出力させたり、MTAssetFileExtで拡張子を出力させたり、柔軟に表示を変えることができます。画像に関しては幅や高さまで調整可能です。

以下テンプレート例（抜粋）。
<MTpdf_item1Asset><li>
<a href=”<MTAssetURL>” target=”_blank”><mt:If tag=”pdf_text1″><mt:pdf_text1><mt:else><$MTAssetFileName$></mtif>(<$MTAssetFileExt$>:<$MTAssetProperty property=”file_size”$>)</a>
</li></MTpdf_item1Asset>

MT4でファイルアップロードエラーがでる条件

MT4を以下の条件で使用すると、画像のアップロードエラーがでます。

• Perl 5.8.5 以前のバージョンをお使いの環境
• アップロードするファイルのパスに日本語が含まれている
• ブラウザに Internet Explorer を使用

解決策としましては、「マイドキュメント」からファイルをアップロードしていただければ問題なく反映されます。

ファイルアップロードでエラー「不正な要求です。文字コードUTF-8に含まれない文字データを送信しています。」 | Movable Type 4 FAQ

こんにちは、中尾です。

近所にカルディコーヒーができました。輸入物の食料品やお菓子はラベルを見るだけでも楽しいものですね。なによりLoacker社のウェハースが気軽に購入できることが、嬉しいです。

さて、本日は「コーポレートサイトのお知らせのマークアップ」についてです。お知らせ、更新情報、ニュースリリースなどコーポレートサイトに必ずといっていいほど掲載される情報は果たしてどのように実装されているのか？エリア単位でのニッチな情報を個人的興味から調べてみました。

弊社の東証一部上場企業1685社の webサイト全体統計調査ほど細かい調査ではありませんが、正解の無いマークアップから制作者の意図を読み取っていただければおもしろいかと思います。

なお、調査サイトは企業サイトランキング 2009よりベスト20を選出しました。

表の見方

• 見出し・・見出しのラベリング
• 親・・・お知らせを括っているブロック要素
• 日付・・・お知らせの日付を括っているHTMLタグ
• 内容・・・お知らせの内容を括っているHTMLタグ

やはり定義リスト（DL）が多いですね。表組み（TABLE）も根強い人気がありました。一刻は忌み嫌われていたTABLEタグですが、表組みでは当然使用するタグではありますし、「お知らせ表」という考えて使用しているならば間違いは無いのでないかとも思います。

私自身は下記のように定義リストを使用して「お知らせ」を意味付けすることが多いです。

<hx>お知らせ</hx>
<p class=”archive”><a href=”link_to_archive.html”>一覧を見る</a></p>
<dl>
<dt>2010年3月30日</dt>
<dd><a href=”link_to_article.html”>auのスマートフォン「IS01」「IS02」の発売について</a></dd>
</dl>

こんにちは、中尾です。
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を移行する場合はテンプレートをコピペするか、テンプレートセットを作成してプラグインとして読み込むことで対応しておりました。

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

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

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

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

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

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

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

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

UploadDir

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

CustomDefaultFields

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

MultiBlogExt

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

CMSContext

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

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

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

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

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

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

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

皆さんこんにちは。中尾です。

新型インフルエンザが関西で猛威を奮っていますが、対策はされていますでしょうか。手洗い・うがい・マスクなど、新型・季節性どちらのインフルエンザに対しても注意をしていただければと思います。

ネット上では世界各地域の感染マップ（Google Map）というものも出ています。

さて、本日はDreamweaverの拡張機能についてです。入社するまではやっぱり手打ちが一番！という意味不明の理由によりほとんど使っていなかった同ソフト。テンプレートやライブラリ、スニペットなどの各種機能を知った今ではそのすっかり虜になりました・・。（ところで「ドリ」って呼びますか？「ウィーバー」って呼びますか？）

そんなDreamweaverを更に便利にしてくれる拡張機能をご紹介いたします。

1. CSSプロパティーフォーマット
   書いていくうちにどんどんブレが出てくるCSS。数日後何故にこの順序？とカスケーディングの力に甘えた自分を疑ったりしてしまいます。この拡張機能はCSSを予め設定した記述順序に揃えてくれる優れもの。管理面で非常に役立つ機能です。
2. Page List
   サイトにある全てのファイルをHTMLで書き出してくれる拡張機能です。タイトル、相対パス、リンク、最終更新日時やメタタグ（キーワード、ディスクリプション）を書き出してくれます。Tableタグでの表組みで出力されますので、そのままエクセルにインポートして使え、便利です。
3. 全角・半角変換拡張機能
   資料からそのままコピーして使うと、全角の数字や半角カナなどを変換漏れを見付けてしまいます。この拡張機能は膨大な文字列から見つけることの難しいそれらの文字を簡単に確認・置換が行えます。
4. SnippetUtil
   お気に入りのコードが溜まってきたスニペットをバックアップ・復元できる便利な拡張機能です。かなり昔の記事を紹介させていただきましたが、今のところ不具合は出ていません。

現在のところ以上の拡張機能を駆使してDreamweaverの更なる効率化に励んでおります。皆さまのおすすめの拡張機能がございましたら、ぜひお知らせください。

※ご紹介の各種ソフトは自己責任でバックアップを取った上でご使用ください。

皆さんこんにちは。中尾です。

連休最後の土日は地元福井県の同級生の結婚式に参加しました。片道3時間半の道のりを少しでも楽しむために、最新のN700系新幹線に乗ることに決めました。N700系は社内で無線LANが導入されインターネットが楽しめる新幹線として話題になっています。

そして、至るところに「利用者にやさしい配慮」を見つけることができました。本日はそのN700系新幹線で気が付いたウェブサイトのユーザビリティにも活かせそうなポイントについてご紹介いたします。

文字が大きい
座席案内板や電光掲示板、消火器やトイレのアイコンなどほとんどにおいて「ちょっと大きめ」に表記されており、様々なお客様をスムーズに誘導できる配慮がされていました。

かつては自分もよくやってしまいました。座席番号が見つからず、通路を立ち止まり混雑を招く・・そのような光景がこれからは少なくなるのかもしれません。ウェブサイトも様々なお客様が様々な環境で閲覧することを考えると読みやすい文字に越したことはありません。

現在地表示
座席のテーブルの裏の車両案内地図。これは以前からありましたが、今現在乗車している車両が反転で表示されていました。これによりトイレや公衆電話などの場所がわかりやすくなりました。

これはパンくずリストとサイトマップの機能を併せ持つようなものだと思いました。自分が現在地、近くに何があるか、といった地図はサイト閲覧者を迷わせないために必要です。

通路/座席間の境界線に模様
どこからが通路で、どこからが座席か、床に施された淡い模様でやさしく誘導しています。これは最新の新幹線に限らず多くの電車で導入されていますが、深く座ることの多い新幹線でも重要だと感じました。

ウェブサイトにおいてもどこからが本文で、どこからがナビゲーションなのか、ひと目で誘導することでよりスムーズに閲覧が可能になります。

その他にもシートの快適な座り心地はもちろん、天井が高くやわらかい照明や、運転時の振動の少なさなど・・たくさん感動を受けました。まだまだ気が付いていない、あるいは意識すらさせてもらえない見えない配慮があるかもしれません。次回乗車の際の新たな発見を楽しみにしたいと思います。

弊社でも分かりやすくストレスを感じさせないインターフェイス設計に努めてまいりたいと思います。

下記リンク先も参考にさせていただきました。車内の写真もご覧いただけます。

• デビュー！新幹線N700系の「デザイン」と「おもてなし」
• N700に見るユニバーサルデザイン

皆さんこんにちは。中尾です。
ゴールデンウィークは概ね天気が良さそうですね。

POSHという言葉をご存知でしょうか。Plain Old Semantic HTMLの略で、昔ながらの意味的なHTMLを書きましょうという概念です。microformatsのwikiによると下記のような起源で生まれたようです。

POSHという用語は、2007年4月6日にmicroformatsのIRCチャネルにおいて、<kwijibo>によって考案されました。POSHとは、plain-old-semantic-htmlの頭文字を取った略語です。John Allsopp、Tantek Celik、Jeremy Keith、Chris Messinaらが2007年4月18日のWeb 2.0 Expo後に行われたMicroformats Dinnerで交わした議論を通して、microformatsのよりどころでありそれが正しいサブセットともなっているPOSHの発想と、そのより幅広い目標を広めることの重要性があらためて注目されました。詳しくはPOSHの歴史を参照してください。

上記POSHは略語なのですが、Poshという言葉自体の意味も辞書（Yahoo!辞書）で調べてみました。

1. きわめて快適［優雅］な, 豪華な.
2. スマートな, いきな, こぎれいな；((英))上流階級らしい, 気取った

HTMLコーダーにとってはなんとも素晴らしい略称に思えてきました。

シンプルで意味的なHTMLを無理せずに書くということはリソースの負担も少なく、精神衛生上も気持ちの良いものができるはず。弊社でも、そのような無駄の無いコーディングを是非とも目指したいと思います。

さて、同microformats内のPOSHの説明によると、POSHには下記のようなチェックリストがあります。

POSHチェックリスト（編注：項目に番号を付けました。）

1. POSHの最初のルールとして、まずあなたのPOSHを必ず検証しましょう。
2. 次に、単なる表現上の目的で使われているTABLEや、スペーサーGIF画像、いわゆる表現的なHTMLを取り除きましょう。
3. さらに、（BタグやBRタグの濫用を典型とする）その場しのぎ（Bed and BReakfast）のマークアップを修正しましょう。
4. 空っぽアンカー（Anorexic Anchors）を取り除きましょう。
5. よい意味的なクラス名を使いましょう。

スポットを当てたいのはいつも悩まされ続けている5番目のクラス名の箇所です。なるべく無駄、無意味なクラス名は付けたくない・・けれどこれってどういう意味？という悩みが尽きません。その場しのぎという意味では3番目にも通ずる道・・意味のあるクラス名をつけ、健康的なコーディングを心がけたいものです。

W3Cには良きクラス名のページが用意されています。

Good names

warning, important, downloadableImage and submenu are all good names. They describe what a certain element represents, and they are not likely to change. A warning will always remain a warning, no matter how much the look of the page changes.

Bad names

border4px, lighttext and prettybackground are examples of bad names. You might fatten that border to a whopping 5 pixels, or the background may look pretty old after a while, and not pretty at all. An advantage of using CSS is that you won’t have to change much in order to change the looks of your website. If you have to change all light text into dark text, and thus change all classes lighttext to darktext in all your HTML pages, you’re likely to miss a few.

下記も非常に参考にさせていただきました。

• 我的春秋: 論理構造を文脈に読み換えながら class 名を考える
• もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife

醤油造りや蕎麦打ちなど、匠の域にも通ずるPlainでOldでSemanticな職人を目指したい・・そう思った今日この頃でした。

Web&Peaceをご覧の皆様、はじめまして。
先日よりHTMLコーダーとして入社いたしました中尾と申します。
入社して間もない私ですが、投稿する機会をいただきました。

思えば入社前から読んでいた当ブログ。
ついに投稿させてもらえることになり嬉しく思います。
日刊には耐えられるのか、ネタの確保はできるのか、などなど
心配事は数知れず・・・。

未熟な部分もありますが、何卒よろしくお願いします。

新参者といえば、先日正式リリースされたIE8。
その圧倒的なシェアにより一般的なウェブブラウザ
（またはインターネットボタン）としてお馴染みですが、
制作者にはその挙動による足かせで少し有名です。

とはいえ、今度のIE8はズレを修正してくれる「互換表示」機能が
付いており、表示もスムーズ、さらに高速で安定しているそうです。

IE8が正式リリースされ、順調にシェアを伸ばしている中で
日本ではIE6のシェアが増えるという記事。

もちろんブラウザはセキュリティやバグの観点から
最新のバージョンにしていただきたいものですが、未だIE6が増えているのは驚きです。

• IE6を使っている人にやんわりアップグレードを勧める8kbの軽量スクリプト『ie6-upgrade-warning』
  こんなツールまで。
• IE6で閲覧すると。
  「アナログ」マークが表示されます。

アナログ放送のように突如IE6を打ち切るわけにはいかないので、
制作者はIE6と良い関係を築かなくては意図した表示にできません。
CSSのバグなどが多いIE6は、制作者には決して避けて通れない道。
HTMLやCSSハックによる条件分岐は枚挙にいとまがありません。

ここ最近は憎悪を抱いていたIE6ですが、ズレと格闘しているうちに
だんだんIEに愛着が沸いてきたりして・・
ケンカして仲良くなるって、青春ぽいですね。

• SaveIE6（英語）
  IE6を救うための冗談のようなサイト。
  ダウンロードボタンを押して進んでいっても
  設問が多すぎてダウンロードできません。
• サイトのIE6対応を補助してくれる「ie6fixer」
  IE6向けにCSSを自動で補完してくれるサービス。
• IE 6とお付き合いをする5つの方法
  まるで子育ての記事のよう。

今後ともWeb&Peaceをお願いいたします。