はい、どうも。政です。
iPhoneやiPadの登場で、Web界隈ではこの先FLASHでいくべき かHTML5でいくべきか、といった事が取りざたされております。実際弊社のお客様からも質問があったりする状況。まぁ一般のユーザーさんにとっては、どっちでもイイから閲覧出来れば良し、といったところでしょうか。
そんななか、AppleのWebサイトに、HTML5のShowcaseが掲載されました。Appleのブラウザ、Safariでないと閲覧出来ませんが、一度確認しておくことをお薦めします。
ところで、HTML5。
「エイチティエムエルファイブ」なのか「エイチティエムエルゴ」なのか、皆さんはどちらで発音してますでしょうか？
同様にCSS3は、「シーエスエススリー」なのか「シーエスエスサン」なのか。
モヤモヤしますね。なんだか。
ご無沙汰しています。中尾です。
ようやく暖かくなりました。いよいよゴールデンウィークですね。
本日は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を以下の条件で使用すると、画像のアップロードエラーがでます。
解決策としましては、「マイドキュメント」からファイルをアップロードしていただければ問題なく反映されます。
ファイルアップロードでエラー「不正な要求です。文字コードUTF-8に含まれない文字データを送信しています。」 | Movable Type 4 FAQ
はい、どうも。政です。
企業Webサイトにおいて、コールセンターやカスタマーサポートを説明する箇所には、ヘッドセットマイクをかけたキレイなお姉さんの画像がありますよね。
その中で一番よく見かけるのが下記のお姉さん。（私の記憶調べ）
http://imagenavi.jp/search/detail-i.asp?f=w&id=00008655
デザインポケットさんの素材辞典シリーズに収録されていたりします。
Webの制作会社さんはこういったものを活用しているので、よく見かけるのですね。
ちなみに同様の画像はその他にもたくさんあります。
これだけあるのならば、と
「上場企業Webサイトで最も使用されているお姉さんランキング！」
という統計調査を思いついたのですが、果たして需要はあるのでしょうか。
それでは、また。
はい、どうも。政です。
この業界にいながら、かなり遅めのiPhoneユーザーになって早数カ月。今ではすっかりiPhoneナシでは生活出来ないくらいにとても便利に活用しております。
そんな訳で日本でもスマートフォンがいよいよ普及していくか！？といった様相ですね。OSとしてAndroid搭載の各社の機種は下記。
・NTTドコモさんのXperia
・SoftBankさんのHTC Desire SoftBank X06HT
・auさんのIS01
果たしてこの先どうなっていくのか？結局やっぱりiPhoneなのか？などなど面白くなりそうです。
さて、様々なデバイス・環境の登場によって、Webに関してもPC・i-modeなどの日本の携帯サイトだけではなく、幅広い対応というものが必要になってきます。
そこで、ひとつ紹介したいのが、「iPhoneヒューマンインターフェースガイドライン」
iPhoneアプリを作るうえでのガイドラインなのですが、細かい仕様の話はさておき、インターフェースについての考え方などが書かれていますので、iPhoneアプリを作らない人でも一度読んでおくととても参考になると思います。
こんなの当たり前だ！なんて思ってはいても、なかなか実践できないもの。
自戒を込めつつ、それでは、また。
こんにちは、中尾です。
近所にカルディコーヒーができました。輸入物の食料品やお菓子はラベルを見るだけでも楽しいものですね。なによりLoacker社のウェハースが気軽に購入できることが、嬉しいです。
さて、本日は「コーポレートサイトのお知らせのマークアップ」についてです。お知らせ、更新情報、ニュースリリースなどコーポレートサイトに必ずといっていいほど掲載される情報は果たしてどのように実装されているのか？エリア単位でのニッチな情報を個人的興味から調べてみました。
弊社の東証一部上場企業1685社の webサイト全体統計調査ほど細かい調査ではありませんが、正解の無いマークアップから制作者の意図を読み取っていただければおもしろいかと思います。
なお、調査サイトは企業サイトランキング 2009よりベスト20を選出しました。
| 会社名 | 見出し | 親 | 日付 | 内容 |
|---|---|---|---|---|
| 富士通 | 「富士通からのお知らせ」 | ul li | p | p |
| 佐川急便 | 「ニュースリリース」 | dl | dt | dd |
| 日本郵政 | 「プレスリリース・お知らせ」 | table | th | td |
| JR東海（東海旅客鉄道） | 「ニュースリリース」「更新情報」 | dl | dt | dd |
| KDDI | 「ニュースリリース」 | table | th | td ul li |
| パナソニック | 「プレスリリース」 | dl | dt | dd |
| 郵便事業 | 「おしらせ」 | dl | dd | インライン |
| NTTドコモ | 「ドコモからのお知らせ」「新着情報」 | ul li | span | div |
| ゆうちょ銀行 | 「お知らせ」 | div | p | h3 |
| JAL | 「JALからのお知らせ」 | table | th | td |
| 富士フイルム | 「お知らせ」「ニュースリリース」 | dl | dt | dd |
| JR西日本（西日本旅客鉄道） | 「プレスリリース」 | dl | dt | dd |
| みずほフィナンシャルグループ | 「ニュースリリース」 | ul li | span | span |
| NEC（日本電気） | 「プレスリリース」「重要なお知らせ」 | dl | dt | dd |
| キリンビール | 「新着情報」 | dl | dt | dd |
| みずほコーポレート銀行 | 「みずほコーポレート銀行の最新情報」 | ul li | span | span |
| 富士フイルムホールディングス | 「JALからのお知らせ」 | table | th | td |
| アフラック（アメリカンファミリー生命保険会社） | 「ニュースリリース」 | dl | dt | dd |
| 大塚商会 | 「ニュース・お知らせ」 | dl | dt | dd |
| みずほ銀行 |
「お知らせ」 | ul li | span | span |
やはり定義リスト（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というのもありましたね）
以下の記事を参考にしました。
ご無沙汰しております。
先日、家チーズフォンデュを初めて行った中尾です。具材の量に対してチーズが足らず、牛乳で伸ばしてダマシダマシ食べました。
さて、先日Movable Type Developers & Designers Conference Tokyoが行われました。残念ながら私は参加できなかったのですが、フォローアップ資料を見ているだけでも非常に勉強になります。スライドや参加レポなどを読み、ようやくMT5の新機能の魅力に気がつきはじめています。MT5すごい！
今回は制作に使うために覚えておきたい「ウェブサイト」と「テーマ」を紹介したいと思います。
弊社の案件では「更新情報」や「新着情報」などといった特定の箇所、管理運用を行いたいというケースが多くありました。その場合、サイト全てではなく、特定のディレクトリにMTを導入しております。
例：下記のページをMT化
このケースの場合「更新情報」しか運用していないのに「更新情報」カテゴリを都度指定するという編集の際の手間を無くし、より投稿しやすくするため、MTのサイトURLを http://www.hoge.com/news/ としています。
そしてメインページにあたる http://www.hoge.com/index.html はインデックステンプレート内で一階層上の出力ファイル設定を行って管理していました。（ただしMTBlogURL、MTBlogRelativeURLはあまり使えなくなりますが…）。
今回新機能として追加された「ウェブサイト」は、メインページ（ホーム）と子要素のブログ（更新情報）を明確に切り分けることで、規模に関わらず細やかな運用に対応させることができます。
上記の例の場合、記事の編集者は「ウェブサイト」ではなく「ブログ」の管理画面にて、記事を投稿します。「更新情報」の他に「ニュースリリース」もMT化となった際は、同じウェブサイト配下に新規でブログ立ち上げ運用します。
機能・概念と同様に管理画面上でもサイト構造を理解しやすくなっています。
テストサイトから本番サイトへの移行など、カスタマイズしたMTを移行する場合はテンプレートをコピペするか、テンプレートセットを作成してプラグインとして読み込むことで対応しておりました。
これが難儀でございまして、テンプレート以外は全て手作業での入力というケースも珍しくはない状況でした。
新機能「テーマ」を使えばこのようなケースにも対応でき、サイト構築を更に効率化できそうです。
「テーマ」では下記のインポート・エクスポートが可能です。
カスタムフィールドやカテゴリーといった細かな移行がスムーズにできれば、実際の移行作業はかなり楽になりそうな予感です。活用しない手はありません。
明けましておめでとうございます。ここのところ所持品が色々と故障している中尾です。
遅くなりましたが本年もWeb&Peaceをよろしくお願いします。
新年早々JQueryが1.4にバージョンアップしました！更にスピードアップとのこと。改善されたパフォーマンスをここまで視覚的に訴えられると、試したくて仕方がありません。特設サイトも展開しているようですね。近頃は書籍などからも軽量化・高速化の波を肌で感じております。早速導入です。
さて、本日は要素の高さを揃えるいろいろの話です。要素を横並びにfloatさせた場合に高さを揃えるため四苦八苦しています。高さを揃える手段は多岐に渡り存在しており、そのどれもが一長一短というところ。今回はここ最近で使用している方法を中心にご紹介いたします。
横並びにする段組を一つの要素で囲み、囲んだ要素に背景画像を表示させることで表示では高さを揃えているように見せるテクニックを使います。
この場合、clearfixを使うなどして、親要素の高さを表示させる必要があります。また、うまくマークアップをしないと不要な要素をHTML側に加えることとなります。「要素の高さ」という文書と関係のないHTMLをどこまで許容するか・・日々精進です。
便利なJavascriptを使用します。これらのスクリプトにはいつもお世話になっており、大変助かっています。
heightLine.jsの場合は要素にクラスの指定をする必要があるため、近頃はjquery.flatheights.jsを使わせてもらっています。このスクリプトを使えば要素指定をJS側で指定するため、HTML側を触る必要はありません。
ただし、Javascriptが無効の環境では当然のことながら動作しませんので、最低限ガタガタにならぬようCSSでmin-heightを当てます。しかしmin-heightはIE6に効果がありませんので、堂々巡りを避けるため下記のようなハックを当てることでIE6とは一応の和解としています。
他にもinline-blockを使用する方法やpaddingとmarginを極端当てる方法など、
色々とありますが、状況に応じて使い分けたいところです。
はい、どうも。政です。
気がつくと2010年も既に半月経ちまして、「明けまして！」という気分はとっくのとうに過ぎ去っているかと。
というワケで、皆様、本年もよろしくお願いいたします！
さて、Webサイトの制作など（特にコーディング）をしている方にとっては、日々悩まされつつも、むしろ逆にいとおしく感じちゃってるかもしれない「ブラウザ」さん達。
そんなブラウザに関するアイシェアさんの意識調査がリリースされてました。
詳細についてはリンク先でご確認いただくとして、なによりも気になった点はIE使ってる人でも不満に思っている人の割合って約16%くらいしかいないんですね。
公私共にどっぷりブラウザにお世話、というか依存しているワタシにとってはちょっと考えられない！くらいなのですが、世間の認識との相違ってものを痛感しております。なんでも自分を基準に考えてしまうのは要注意ってコトで！
ちなみにワタシの現在のデフォルトブラウザは「Google Chrome」。
それまで使用していた「Firefox」は重くなって来たので乗り換えてみました。重くなったといってもワタシが拡張機能入れすぎただけなんですけどね。「Firefox」さんは決して悪くないんですよ！
そんなこんなで、なんだか最近はあらゆるモノがGoogleに依存している気がして（IMEとか）便利なんだけどソレはソレで恐ろしい気もしつつ、でもやっぱり止められない止まらない。
あぁ、Android端末も気になる、気になる。。。
皆さんご無沙汰しています。中尾です。
「ジメジメとした天気が続き・・」で始めた前回のエントリーから５ヶ月・・
すっかりと更新できず・・フト気がつけば、ワケあった弊社政がエントリーしています。
今後は私もくじけずにエントリーしたいと思います。
さて、先日MT5が発表になり、MT5関連の話題が多く挙がっていますね。私もここ数カ月MT（MT4）の構築が多かったため、MT5でどう変わったのか若干乗り遅れ気味に追いかけています。
MTでの構築においては、よりよいCMSとして運用させることを目的に、実際操作する投稿画面、管理画面をお客様向けにカスタマイズしています。今回は投稿画面、管理画面系のオススメのプラグインをご紹介します。
MTでのファイルのアップロードは任意でフォルダを設定する必要があり、一手間です。場合によっては間違いも起こりうるので、拡張子ごとに保存先のディレクトリを振り分けてくれるこのプラグインが便利です。PDFはpdfディレクトリへ、画像はimgsディレクトリへといった設定を予め行うことが可能。また、既定のディレクトリも指定できます。
投稿画面のラベル「タイトル」、「本文」、「続き」などをお客様の仕様に合わせたいときがあります。カスタムフィールドと違い、「タイトル」、「本文」、「続き」自由に操作することができません。このプラグインを使えば、ラベルを自由に書き換えたり、項目自体を非表示にしたりすることが可能です。使わないけどそこにある「続き」ボタン・・・これで非表示に！
お客様側での再構築の手間を軽減したい、むしろ再構築自体を無くしたい。MT4.2移行はMultiBlogの機能で関連付けたブログのインデックステンプレートを自動で再構築しているのですが、削除の場合は再構築されないという問題があります。このプラグインはインストールするだけその問題を解決してくれます。
プラグインではなく直接管理画面に手を入れる場合、MTのデフォルトでは/alt-tmpl/ディレクトリに代替テンプレートを入れて表示させることが可能ですが、すべてのブログに適用されてしまいます。このプラグインをインストールすれば各ブログの代替テンプレートの指定することができるため、ブログごとに管理画面のカスタマイズが可能です。
これらのプラグインには大変お世話になりました。開発者さまには本当に感謝しています。
更なる使いやすさを求め、最後にCMSContextの制作者の野田さんの身に染みるエントリーを自分に向けて・・。
