石輪っぷり!

複数のブロックレベル要素の高さを揃える to-R さん開発の JavaScript ライブラリ「heightLine.js」。CSS の float プロパティで横に並べたブロックレベル要素の高さを揃えたり、段組みレイアウトの高さを揃えたりする場合に利用させていただいています。

先日、偶然にもこの heightLine.js を適用することによって、Internet Explorer 6 が対応していない隣接兄弟セレクタを使った CSS の一つの表現が実現できることを発見しました。

それは、写真を左に配置してその右側にテキストブロックを一定の幅で配置、ただし写真が無い場合はテキストブロックを左に詰めるというもので、写真の有無によって HTML に class を与えるなどのコントロールは出来ず、CSS だけで実装するものです。

続きを読む: 「heightLine.js」の意外な効果 »

Webページのページ内リンク。通常はパッとリンク先に飛んでしまい、一瞬ページが変わったのかどうか分からないし、ページ内に飛んだことは分かっても、ページのどの辺りの位置に飛んだのか分かりません。

そこで、ページ内リンクをスルスルッと滑らかにスクロールする“Smooth Scroll”と呼ばれる JavaScript を使うとこれらの問題が解消されます。賛否両論ありますが、私はユーザービリティが向上すると考え、手がけるWebサイトでは基本的にこの“Smooth Scroll”を導入しています。

しかし、この“Smooth Scroll”（名称は様々ありますが、ここでは総括して“Smooth Scroll”とします）。多くの JavaScript が公開されていますが、よく検証しないとアクセシビリティを損なう場合がありますので注意が必要です。

続きを読む: Smooth Scroll とアクセシビリティ »

この度このWillさんいんサイトをリニューアルしましたが、iPad、iPhone で表示した際に、2つの気になる不具合がありました。

1つは、右下に固定配置している「△このページの先頭へ」のリンクが、iPad、iPhone ではスクロールに合わせて上に移動してしまうこと。
これは、iOS が CSS の position:fixed に対応していないという仕様の問題でした。この秋にリリース予定の iOS5 で対応されるらしいですが、それまではこの問題が残ります。

2つ目は、メインコンテンツエリアの幅が狭くなり、トップページのイメージ画像の右側が切れてしまうこと。
今回はページの横幅を最大 980ピクセルで、ウィンドウ幅の 90% で変化するリキッドレイアウトで組んでいます。iPad、iPhone は擬似的に横幅 980ピクセル表示するのですが、ウィンドウ幅の 90% としているので、左右に 5% ずつ余白が発生し、その分コンテンツの横幅が小さくなるのでした。

このために、要素の固定をやめたり、横幅を変更するのは避けたいもの。そこで、iPad、iPhone 向けに CSS を追加し、これらを修正することにしました。

続きを読む: iPad, iPhone 向けに CSS を振り分け »

Movable Type 5 から、ブログ記事あるいはウェブページ作成／編集画面のタイトルフィールドにラベルが表示されなくなっています。

MT をカスタマイズして構築するとき、タイトルフィールドを"企業名"や"書籍名"といった別の用途として使うことがありますが、タイトルフィールドのラベルが表示されていなければ、これを書き替えることもできません。これまで、都度更新マニュアルに明記していましたが、やはり更新マニュアルだけではわかりにくいと思い、ラベルを表示する方法を探してみました。

MTAppjQuery プラグインを利用する方法がありますがここまで高機能な必要は無く、他に見つからなかったので、管理画面のテンプレートファイルを書き替えることにしました。

MT をインストールしたディレクトリ以下の /tmpl/cms/edit_entry.tmpl をコピーし、/alt_tmpl/cms/ の下に置き、これの 1128 行目を以下のように編集します。

元の状態　： label_class="no-header"

書き替え後： label_class="top-label"

これで、タイトルフィールドに"タイトル"とラベルが表示され、RenameLabel などのプラグインでこのラベルを変更して表示させることが可能になります。

Movable Type で構築するサイトで、携帯から投稿できるようにする必要がある案件のとき、以前は mobile.uva.ne.jp（サービス終了?）、MTmail（サービス終了）、モブログくんといった外部サービスを利用していましたが、昨年 Web サーバを変更してからは、mail2entry.pl という MT プラグインを使用していました。
既に配布は終了しているようですが、これは Web サイトのドメインに独自の投稿用メールアドレスを設定し、このメールアドレスへの投稿をこのプラグインに転送する仕組みのもので、外部のサーバに投稿する必要がなく、画像のリサイズ、画像配置のテンプレート、カテゴリや投稿者の設定など、細かな設定が可能です。

今回、初めて MT5 でこのプラグインを使用しようとしたのですが、なぜか件名だけが文字化けするのです。再構築すると正常に表示されるのですが、先の外部サービスも含め、投稿を MT に Push するタイプのものはエントリーと同時の再構築がなされないのですね。

そこで、解決策を探してググってたら、偶然 KetaiPost というプラグインを見つけました。
MT5 用で mail2entry.pl 以上の機能を持ち、そして何よりうれしいのは、個人法人問わず無料で利用できるということ。外部サービスか有料（高額）のプラグインを使用するしかないのかと思っていたところ、"万年β（α？）テスト状態"（笑）ということですが、作者さんに感謝です。

この KetaiPost を導入するにあたり、テンプレートのカスタマイズなどをしましたので、その覚え書きです。

続きを読む: KetaiPost で携帯から MT に投稿 »

ドロップダウンメニューは、ページ数が多い Web サイトなどでカテゴリ毎にナビゲーションをまとめてスッキリと見せることができ、サブメニューを開くことによって深い階層のページにダイレクトにアクセスすることができるなど、便利なナビゲーションの手段です。

CSS だけで実装する方法、JavaScript で実装する方法などいくつかの方法がありますが、その多くがマウスオーバーでサブメニューが開くもので、全盲の方、マウス操作が困難な方などマウスが使えない環境、つまりキーボードで操作される場合はサブメニューを開くことができません。

代替手段として、サブメニュー一覧ページを用意し、メインメニューにこのページへのリンクを設定するなどの配慮がなければ、キーボード操作ではサブメニューのページに辿り着くことが困難なばかりか、そのページの存在自体に気がつかない場合もあります。

そこで、jQuery でキーボード操作に対応したドロップダウンメニューを作ってみました。

続きを読む: jQuery でキーボードフォーカスに対応したドロップダウンメニュー »

外部のサイトへのリンク、PDF などのファイルへのリンク、そして新しいウィンドウで開くなどに、アイコンを表示させるとき、Movable Type ではテンプレートで条件分岐などを使って表示してました。ただ、予めテンプレートで指定できる箇所に限るので、本文内に挿入されたリンクには対応できません。

あと、以下のように CSS でリンクの href 属性の値から、before 疑似要素、after 疑似要素で表示させる方法も使っていましたが、これも before 疑似要素などに未対応の IE 6/7 では表示させることができません。

今回 CMS を使わない、Dreamweaver と Contribute を使用するサイトの構築案件があり、jQuery でリンクアイコンを表示する方法を考えてみました。

続きを読む: jQuery でリンクの種類アイコンを表示 »

今年も既に4分の1以上が、疾風の如く過ぎ去りました。1月後半から年度末に向けて様々な案件が動きだし、日々かなりテンパってました。

この間、午前様はもちろん、休日の仕事もしばしば。そして、それに輪をかけて色々なことがスムーズに行かず、ちょっとしたことに腹が立ち、日々イライラが溜まり、食欲もなくなり、どんどん悪い方向へ落ちていきました。

そんな状態から脱することができたのは、実は3月11日の大震災がきっかけだったりします。
島根県松江市のビルの8階でも揺れを感じるほどの大地震だったわけですが、その後のメディアによる報道や twitter などのネット上で流れる様々な声や情報を目にし、仕事に悩んでいる自分がとてもちっぽけな存在に思えたのです。

そして、今生きていることに感謝し、与えられてる仕事、日々の生活を前向きに、今まで以上に頑張ろうという思いを抱くようになりました。
そう思うようになってから、徐々に仕事がスムーズに回り出し、いくつかの案件が片付いたこともあって、現在は決して平穏ではないものの、意欲的に仕事ができています。

気持ちって大切ですね。本業以外でも地区の役員を複数やってて、その内のひとつは仕方なく受けた農地・水の保全関係の会長職でいろいろ大変なのですが、これらも前向きにこなしていこうと思います。

たまたま昨日、購読している RSS から目にした記事で、「仕事のやる気が出ない時は、自分がワクワクすることを想像してみる」という内容のものがありました。
「脳にちょっとでもご褒美を想像させられれば、仕事のやる気が変わってくる」とのこと。そのためには、「計画を立てる時は最終的なゴールを決めるだけでなく、どのような気持ちになるかも想像する」ということなんだと。
たしかに、気が乗らないことも、それを達成したときの気持ちを想像したら前向きに取り組める気がします。

そんなこんなでこのブログ、今年に入って初めての更新です。いくつか技術ネタが溜まってるので、覚え書きとして近いうちに書こうと思います。

現在私は、会社の iMac、自宅使用兼持ち歩きの MacBook Pro、iPhone、そしてたまに Windows を使用しています。このように複数の端末を使用する場合、どの端末からでも目的のファイルにアクセスしたり、メモやウェブページなどのクリップにアクセスできる環境が便利です。

そこで私の場合、PC 内にはファイルをほとんど保存していません。オンラインストレージ上に保存することによって、どの端末からも常に最新の状態のファイルを閲覧したり編集したりすることができます。（ただし、重要なファイルは会社のファイルサーバに保存して、社外からは VPN アクセスしています。）

様々なオンラインストレージサービスがありますが、以前から私が利用しているのは、Mobile Me と Dropbox です。

Mobile Me は Apple から提供されているサービスで、年間 9,800円の費用が発生しますが、20GB のオンラインストレージのほか、連絡先（アドレス帳）やカレンダー、Safari のブックマークを複数の Mac、Windows、iPhone や iPad で自動的に同期したり、万が一なくした iPhone や　iPad　を探し出したり、リモートでロックやデータの消去が行えます。

一方、Dropbox は、詳しくは 2年前のブログ記事に書いていますが、まるで PC の中に保存されているファイルを扱っているかのような感覚で、複数の端末で常に最新の状態を扱うことができる優れもの。2GB までは無料で利用できます。

メモに関しては、今や大人気の Evernote を愛用しています。テキスト、写真、音声、ウェブページ、PDF など、あらゆるものを簡単に保存することができます。保存したメモには複数のタグを付けたり、URL や位置情報を関連付けしたりして、整理したり見つけやすくすることも可能です。
そして何より便利なのが、画像の文字認識機能。例えば、名刺をカメラで撮影して Evernote に放り込んでおくだけで、会社名や氏名などによる名刺画像の検索がかなりの精度で可能になります。

Dropbox も Evernote も様々な Windows、Mac ソフト、iPhone や iPad、Android アプリが連携しています。
Mobile Me も含めて、私にとっては必須アイテム。クラウドにデータがあると、Mac や　Windows をリカバリする時も復旧が簡単におこなえます。

十数年前、シリアルケーブルで2台のPC を接続し、Windows アクセサリの"ブリーフケース"を使ってファイルを同期していたのがはるか昔のことのように思えます。

私が普段利用しているブラウザは、Firefox と Safari です。ウェブサイトを制作するとき、検証するときは主に Firefox、普通にネットサーフィン（死後？）するときは主に Safari を利用します。
あ、制作したウェブサイトを検証するときは最終的に Firefox、Safari、Chrome、Opera の各最新版と、Internet Explorer の 6、7、8、9 beta も使います。

Safari は Mac の標準ブラウザなので何気に普段使っているのですが、やはり標準ブラウザってことで iTunes や Mobile Me などとの連携がしやすいのかなと思います。

一方、Firefox は Internet Explorer に次いで2番目のシェアを有するブラウザで、数多くのアドオン（拡張機能）が公開されており、これを導入することによっていろいろ便利に使うことができます。ただ、やはり起動が遅いのがネックです。次期 Firefox 4 で改善されるのかな？

ちなみに、Google Chrome も数々のエクステンション（拡張機能）があり、徐々にそのシェアを拡大しています。（参考： Browser Market Share）

ここで、現在私が Firefox で主に利用しているアドオンをまとめてみたいと思います。

続きを読む: Firefox とアドオンで快適に！ »