ということで、以前のブログ「小窓屋めがね」から引っ越してきました。もろもろあって、スカイラブデザインとしてのドメイン「skyld.org」に変更することに。

ブログの他にも、コンテンツをほぼこっちに移行したんだけど、サーバ移転も2回目ということで今回はあっさり終了、、すると思いきや、MT(MovableType)の移行でつまづいて、ジタバタしながらようやく完了です。

移行に伴いURLが変更になりましたので、古い方のブログで、ブックマークやRSS等をご利用いただいていた方は、お手数ですが下記に変更ください。

これからは、こっちで色々と更新していきますのでよろしくお願いします。

【答え】→そんなときは、公開鍵・暗号鍵を設置しよう!
って話になるんだろうけど、今回は諸事情により設置不可。

リポジトリを見に行くたび、ユーザ名・パスワードを入力させられ、不快指数95%くらいになってたので、下記方法で解決です。

ユーザ名の入力回避

リポジトリからチェックアウトする際、以下のように、ユーザ名をURLに追加しておく。
たったこれだけで、ユーザ名を毎回入力する手間がなくなるとは。今までの苦労はなんだったんだ。。。

こんな感じで指定。

ユーザ名込み

パスワードの入力回避

TortoiseSVN > 設定 > ネットワーク > SSH > SSHクライアント の設定項目として、ユーザ名とパスワードを以下のように指定しておくと毎回の入力が回避できる。
(SSHクライアントとして、TortoiseSVNに付属の TortoisePlink.exe を使用)

こんな感じで指定。

パスワード込み

ただ、SSHを使用するプロジェクトが複数あると、この方法が使えない。そんときはどうすりゃいいんだ。。。

まあ、でもとりあえず、不快生活とはオサラバしたので良しとします!

(参考サイト)
TortoiseSVN で svn+ssh な繋ぎ方(TortoiseSVN)--WEBシステム開発 技術的備忘録(通称 技忘録)
svn+sshにてパスワード入力を省略: Ma note

ということで、「IEさん、頼むよ...」っていう話。

JavaScriptのIE用イベントハンドラ「attachEvent/detachEvent」。これを使って呼び出したイベント内では、thisがwindowと解釈される落とし穴が。

下記のイベントをIEで実行すると、どうなるか、さっそく検証。

HTML

JavaScript

ボタンのラベル「送信する」がalertで返される、かと思いきや、結果は「undefined」。
これが、IEでattachEventした関数内では、「this」がwindowオブジェクトとなってしまうってこと。
つまり、detachEventもできず、はまるので注意。

じゃあ、どう書けばいいのか。

JavaScript(修正版)

thisの代わりに「evt.srcElement」で、イベント発生元を取得すればよい。
と、ここまでがIEの話。

IE以外は、「addEventListener/removeEventListener」でイベントを制御するから、その振り分けをすればよい。クロスブラウザで動作する、最終的なコードは下記。

JavaScript(クロスブラウザ対応版)

今回、ブラウザ依存の問題に結構はまってしまったけど、イベントのバブリングフェーズとかキャプチャフェーズについて勉強できたから、許す。(←何を?)

たまにネイティブのJavaScriptを書くと、ブラウザの差異を意識しなくていい「jQuery」のありがたみが身にしみますね。。。

補足:JavaScript(detachEventできないパターン)

thisを意図通り扱うため、上記のようにcallを使う方法もある。けど、この場合、無名関数でattachするから、detachEventできないので要注意です。

(参考サイト)
JavaScript のイベントハンドラ - daily dayflower
JavaScript メモ / チップス attachEvent() と addEventListener() [ ARTEMIS ]

jQueryプラグイン jQuery cookieTab

前田かおるさんサイトのお手伝いをした際に、タブを実装することになったので、昔つくったJavaScriptを元にjQueryプラグイン化してみた。

タブにしたい要素を指定するだけという、簡単実装。いやあ、jQueryって便利ですね。ってことで、さっそく解説。

jQuery cookieTab

指定した要素をタブ化するjQueryプラグイン。クッキーを利用して、表示するタブを記憶します。

準備

必要なデータを上記よりダウンロード後、CSSとJavaScriptを読み込む。

使い方

JavaScript

タブを適用させたい要素のid(id-of-tabname)を指定し、cookieTabを実行。

HTML(準備用)

上記で指定したタブ内に、タブメニューとタブパネルを配置。
タブメニューには「class="tab-menu"」を、タブパネルには「class="tab-panel"」を付与してください。どちらもオプション設定で変更可能です。

HTML(js実行時)

アクティブなタブメニューに<li class="current">が適用されます。
デフォルト設定では、先頭のパネル(#some-tabA)を表示します。

オプション
オプション項目 デフォルト値 内容
activeTab 0 初期表示しておくタブ
tabMenuElm .tab-menu タブメニューとする要素名(#idや.class等のCSS記法にて指定)
tabPanelElm .tab-panel タブパネルとする要素名(#idや.class等のCSS記法にて指定)
cookie 使用する cookieを使用しない(false)
cookie name jcookieTab jcookieTab-(id-of-tabname) = 0 の形式で書き込み
expires 7 cookieの有効期限 [単位:日]
path (none) cookieの有効範囲:設定したページのみ有効(none), サイト全体で有効(/)etc.
secure (none) セキュアな通信時のみcookieを送信(true)
オプション指定方法
ライセンス

MITライセンスでの配布となります。

jQuery crossFader

パソコンの調子が最近悪うございまして。これを機に買い替えを検討してるんだけど、セットアップのことを考えると、気軽に乗り換えられないというジレンマ。

でも寿命は時間の問題っぽいので、来たるべきその日のために、インストールすべきフリーソフトをまとめておく。単なる自分的まとめだけど、ま、それはいつものことということで。。。

ファイル・フォルダ関連

dropbox
Dropbox
http://www.dropbox.com/
オンラインストレージ。行けるとこまで無料で使う方向で。
lhaca
+Lhaca
http://park8.wakwak.com/~app/Lhaca/
圧縮・解凍用。この辺は好みで。
lhaz
lhaz
http://www.chitora.jp/lhaz.html
圧縮・解凍用 その2。+Lhacaで対応できない、TAR / GZ / TBZ / BZ2 / 7Z / XZ / TXZ 用に。
flexiblerenamer
Flexible Renamer
http://hp.vector.co.jp/authors/VA014830/FlexRena/
ファイル名・フォルダ名の一括変換。助かるんです。
winmerge
WinMerge
http://www.geocities.co.jp/SiliconValley-SanJose/8165/winmerge.html
ファイルやフォルダの差分を取りたい時に。差分をHTMLで出力する機能がすごい。

ブラウザ関連

ietester
IETester
http://www.my-debugbar.com/wiki/IETester/HomePage
旧バージョンのIEチェックには欠かせませんね。
website_exp
Website Explorer
http://www.umechando.com/webex/
サイトのデータを一括DL。FTP情報がないときに。
capture_staff
Capture STAFF
http://www.vector.co.jp/soft/win95/art/se119281.html
画面キャプチャ用。IEでキャプチャ撮りたい時に使ったり。

サーバ関連

フォーマット変換

icon_trans
@icon変換
http://www.towofu.net/soft/aicon.php
favicon作成用。ドラッグ&ドロップで簡単作成。
quickmedia
Quick Media Converter
http://www.cocoonsoftware.com/
動画・音声のファイルフォーマット変換ソフト。たまに失敗するけど、気にしない。
flash_dec
Flash Decompiler Trillix
http://www.flash-decompiler.com/
Flashのデコンパイラ。swfファイルをflaファイルに変換してくれちゃう便利ソフト。

メール・チャット関連

skype
Skype
http://www.skype.com/intl/ja/get-skype/
チャット用。みんな好きなやつ。
thunderbird
Thunderbird
http://mozilla.jp/thunderbird/
Mozillaのメーラー。クライアントサイドではこれが一番使いやすいかな。

ユーティリティ

sakura
サクラエディタ
http://sakura-editor.sourceforge.net/
テキストエディタで無料ならこれかな。
rulerx
ものさしX
http://www.vector.co.jp/soft/win95/util/se013576.html
画面上の寸法を図りたい時に。Firefoxのスクロールバーは横幅15pxですね。
freemind
FreeMind
http://www.freemind-club.com/download.htm
マインドマップ作成用。あれこれ検討するときに。

以上、そんな感じで。
他の人って、どんなソフト使ってるんだろ。
これいいよ!ってソフトがあれば、たれこみプリーズです。

前回の、Movable Type移行篇に続き、WordPressの移行についてまとめ。

サーバ移転先

【移転前】ロリポップ ⇒ 【移転先】エックスサーバ

WordPressの移行手順

こんな感じで移行しました。

  1. アプリケーションのバージョンチェック
  2. WordPressデータベースのバックアップ
  3. MySQLをバージョンアップ(※必要な場合のみ)
  4. WordPressのバージョンアップ
  5. 新サーバにWPをインストール
  6. 新サーバにデータをインポート

1. アプリケーションのバージョンチェック

MTのときにも書いたけど、移行に失敗しないようWordPressのバージョンを揃えるところから。サーバ移転するし、どうせなら最新の環境で動かしたくて、WordPress3系にバージョンアップ。

このとき、移転先のMySQLのバージョンもチェックして、違ってたら合わせる。エックスサーバーはMySQL5が使えるので、ロリポップで事前にバージョンアップすることにした。

まとめると、こんな感じ。

サーバ WordPress PHP MySQL
移転前:ロリポップ WordPress 2.8.4 PHP 5.2.6 MySQL 4.0
移転先:エックスサーバー WordPress 3.0.4 PHP 5.1.6 MySQL 5.0

2. WordPressデータベースのバックアップ

前に、Wordpress2.8へ自動アップグレードしようとして、華麗に失敗した苦い経験があるので、バックアップは入念に行う。MySQLのバージョンアップを行う前に、まずはバックアップ。面倒くさくてもバックアップ。なにはともあれ、バックアップです。

WordPressの管理画面からもバックアップできるけど、プラグインの設定が引き継げないので、「phpMyAdmin」で行う。

実際の作業は下記サイトを参考にさせてもらいました。

(参考)

データベースのバックアップ - WordPress Codex 日本語版
http://wpdocs.sourceforge.jp/データベースのバックアップ
WordPressのサーバー移転メモ:バックアップ編 | コリス
http://coliss.com/articles/blog/wordpress/howto-backup-wordpress-data-for-change-server.html

3. MySQLをバージョンアップ(※必要な場合のみ)

エックスサーバーでMySQL5を使いたかったので、ロリポップ側でも事前にバージョンアップしておく。

ちなみに、WordPress Codexによると、WordPress 3.2からは、PHP 5.2 以上、MySQL 5.0.15 以上がサーバ要件となるみたい。まだ先の話だけどね。。

MySQL5データベースへ移行

作業は下記サイトを参考に進めました。

(参考)

「よろずや工房」のPCよろずカルテ ≫ Blog Archive ≫ ロリポップでのMySQL4からMySQL5への移行
http://www.ntfcorp.jp/yorozuya/?p=4770
MySQL5への移行 / ユーザー専用ページ / マニュアル - ロリポップ!
http://lolipop.jp/manual/user/mysql5-upd/#search_word=mysql

※メモ
「使用されている文字コード」は、「UTF-8」を選択する。元のDBはEUCだったけど、「UTF-8」じゃないと文字化けしました・・・。

wp-config.phpを書換

続いて、データベースの設定情報を変更するため、WordPress設定ディレクトリ内の「wp-config.php」を書換。

ロリポップのマニュアルがよくまとまっていて親切です。

4. WordPressのバージョンアップ

その前に、もう一回バックアップを取っておく。失敗は怖いです。。。

バックアップが完了したら、Wordpressを自動アップグレード!なのだが、バージョンアップの前に、「プラグインをすべて無効化」しておくこと。先人の教えに忠実に従いましょう。

アップグレードが終了したら、プラグインを有効化して、表示を確認。問題なければ、再度バックアップ。これでようやくサーバ移転用データ、ゲットです!

5. 新サーバにWPをインストール

エックスサーバーの自動インストール機能を利用して、楽させてもらいました。ありがとう、中の人!

最初、ログインできなくて焦ったんだけど、「wp-config.php」内にWordpressのインストールディレクトリを明示的に指定して無事解決です。

(参考)

wordpress ブログのアドレス(URL)を変更したらログインできない - ブログ - 教えて!goo
http://oshiete.goo.ne.jp/qa/4755986.html
wp-config.php の編集 - WordPress Codex 日本語版
http://wpdocs.sourceforge.jp/wp-config.php_の編集

6. 新サーバにデータをインポート

さっきバックアップしたデータを「phpMyAdmin」を使用してインポート。
作業は下記サイトを参考に進めました。

(参考)WordPressのサーバー移転メモ:セットアップ編 | コリス
http://coliss.com/articles/blog/wordpress/howto-setup-wordpress-data-for-change-server.html
画像パスの変更

新サーバでインストールディレクトリが変更になる場合、インポート用データの画像パスを変更しないと画像が表示されない。ということで、下記2つのSQL文を発行してやりましょう。

(参考)

WordPressで使える知ってると便利な13のSQL文 | Web活メモ帳
http://blog.verygoodtown.com/2010/02/wordpress-useful-sql-13/
WordPress を別のディレクトリに移動する:トイレのうず/ぼやき
http://www.1010uzu.com/boyaki/200902-09160050.html

最後に

以上で、WordPressの移転が完了。
あとは、プラグインの動作確認とか、もろもろ検証しときましょう。

次回は、メールサーバ変更(GoogleApps)についてまとめる予定です。
がんばれ、オレ。

jQueryプラグイン jQuery crossFader

盆栽教室のサイトを制作した際に、画像ギャラリーを作る必要があったので、せっかくなのでjQueryプラグイン化してみた。

フェードイン・フェードアウトするだけのシンプルな動きなので、さっと設置したい時には便利かも。ということで、さっそく解説。

jQuery crossFader

フェードイン・フェードアウトで画像を表示するjQueryプラグイン。画像をクリックすると次の画像へ遷移します。

更新履歴
  • [2013.09.24] ver0.4 フェードの手動開始オプションを追加
  • [2012.07.04] ver0.3 クリック時の切替処理無効化オプションを追加
  • [2011.03.17] ver0.2 ループ制御用オプションを追加
  • [2011.02.14] ver0.1 リリース
準備

必要なデータを上記よりダウンロード後、CSSとJavaScriptを読み込む。

使い方

JavaScript

ギャラリー部分のid(id-of-crossfader)を指定し、クロスフェードを実行。

HTML(画像のみの場合)

CSSを適用するため、画像の親要素(ここでは<div>)にclass="crossfader"を付与してください。
JavaScriptオフの環境では、class="active"を付与した画像が表示されます。

HTML(リンクを設定する場合)

オプション
オプション項目 デフォルト値 内容
timer 6000 切替までの待機時間 [単位:ミリ秒]
speed 1500 遷移速度(待機時間timer経過時) [単位:ミリ秒]
changeSpd 800 遷移速度(画像クリック時) [単位:ミリ秒]
clickStep true クリック時の切替処理を有効(true) or 無効(false)
autoStart true フェードを自動開始(true) or 手動開始(false)
random false 画像をランダム表示する(true) or しない(false)
loop true 画像をループさせる(true) or させない(false)
オプション指定方法
ライセンス

MITライセンスでの配布となります。

jQuery crossFader

サーバ移転から約2週間。だいぶ落ち着いてきたので、忘れないうちにまとめておこうかと。以下、移転作業についてのメモ。

サーバ移転先

【移転前】ロリポップ ⇒ 【移転先】エックスサーバ

ロリポップからエックスサーバへ

サーバ選びでいろいろ迷ったんだけど、結果的には、ロリポップからエックスサーバーへ移転することに。

データベースが複数個つかえて、マルチドメイン対応で、とか前提条件をいくつか決めてエックスサーバーを選んだんだけど、乗換直後にロリポのチカッパプランが誕生。もう少しタイミングが早ければ、嗚呼・・・。

サーバ移転の手順

全体の流れは、以下のような感じ。

  1. MT(Movable Type)の移行
  2. Wordpressの移行
  3. メールサーバ変更
  4. DNS変更
  5. リダイレクト処理

今回は、「1. MT(Movable Type)の移行」についてまとめます。以下、詳細。

1. MT(Movable Type)の移行

旧サーバでバックアップ取って、新サーバで復元するだけなのだが、移行前にMTのバージョンを揃えておくのがポイント。データ移行は、同じバージョン間じゃないとうまくいかないらしい。

(参考)別のサーバーへ移行したい | Movable Type 4 FAQ
http://www.movabletype.jp/faq/export-blogs.html
バックアップ

ということでまずは、バックアップから。

MT管理画面でのバックアップ

上図の通り、管理画面の「システムメニュー>ツール>バックアップ」画面に移動。zip圧縮を選択の上、「バックアップデータを作成」ボタンをクリック。しばらくたつと、zipファイルがダウンロードされます。
※「ツール>エクスポート」だと、テンプレートデータ等がエクスポートできないので注意!

(参考)

MT4 のバックアップ・復元についてのまとめ | Movable Type 4 | 阿部辰也のブログ――人生はひまつぶし。
http://www.abe-tatsuya.com/web_prog/movabletype4/backup.php
ブログの完全バックアップと、データベースのバックアップ | Movable Type 4 ドキュメント
http://www.movabletype.jp/documentation/start_backup.html
MTのバージョンアップ

続いて、MTを最新版にバージョンアップ。

当然のごとく、MT5へのアップグレードを考えたけど、SQLiteはサポートしてないみたいで、断念。そのうち、MySQLに移行して、MT5にするかな・・・。

結局、以下のバージョンアップを実施。
Movable Type 4.261 ⇒ Movable Type 4.28

MTのバージョンアップ手順
  1. インストールディレクトリ「mt」を「mt--」にリネームし、バックアップ
  2. 「mt--」と同ディレクトリに、インストール用「mt」ディレクトリを新規作成
  3. 「mt」ディレクトリに、MT4.28の全ファイルをアップロード
  4. 「mt--」内のmt-config.cgiをコピーして「mt」ディレクトリにアップロード
  5. ブラウザで「mt/mt.cgi」にアクセスし、アップグレード実施

※メモ
MTファイルをアップロードする際、転送モードは「バイナリ転送モード」を選択する。
mt.cgi等のCGIファイルは、パーミッションを「755」に変更する。

(参考)小粋空間: Movable Type 4.21 から 4.22 へのアップグレード
http://www.koikikukan.com/archives/2008/10/19-003333.php
データの復元

続いて、バックアップデータを復元。

データの復元手順
  1. 「mt」ディレクトリ内に、データ復元用の「import」ディレクトリを作成
  2. 「import」ディレクトリ内に、先ほどのバックアップデータ(zip形式)を解凍の上、アップロード
  3. 管理画面の「システムメニュー>ツール>復元」で、バックアップファイルを何も指定せず、「復元」ボタンをクリックし、データを復元(※下図参照)

MT管理画面での復元

※メモ
sqlitedbファイルを利用して、データ移行する際は、FTPの転送モードに注意。
ダウンロードもアップロードもバイナリモードで行うこと。
アスキーモードのままだと、mtログイン画面にて、下記エラーが発生する。
「DBD::SQLite::db prepare failed: database disk image is malformed(11)」

(参考)

バックアップしたブログの復元 | Movable Type 4 ドキュメント
http://www.movabletype.jp/documentation/start_restore.html
やっちまっただ - 流れ着いたら。。。
http://www.flotsam-fareast.com/2009/04/mt-reset-20090423.html
MT4を別サーバで復元するとき - ウェブデザイン hasegawahiroshi.jp
http://hasegawahiroshi.jp/2008/03/24/mt4/
再度バックアップ

バージョンアップしたMTでデータが復元されていることが確認できたら、再度バックアップを実施。新サーバへの移行に備える。

新サーバへMTをインストール

ここからようやく、新サーバでの作業。

旧サーバと同じバージョンのMTを、新サーバにインストールしていくのだが、手順は、「MTのバージョンアップ」のときとほぼ同じなので割愛。

サブドメインで公開する場合

http://blog.example.com/のように、サブドメインで公開する場合は、mt-config.cgiの「CGIPath」と「StaticWebPath」を、絶対パスで指定する必要がある。

ルート相対のままにしておくと、ディレクトリを読みにいけないため、captchが表示されないなど、不具合が発生する。

(変更前)mt-config.cgiの設定

CGIPath /mt/
StaticWebPath /mt/mt-static/
StaticFilePath ルート相対


(変更後)mt-config.cgiの設定

CGIPath http://www.example.com/mt/
StaticWebPath http://www.example.com/mt/mt-static/
StaticFilePath (変更なし)

(参考)

小粋空間: Movable Type(MT)のインストール
http://www.koikikukan.com/archives/2008/11/01-015555.php
サブドメインでブログを公開したい | Movable Type 4 FAQ
http://www.movabletype.jp/faq/post-36.html
小粋空間: Movable Type でサブドメインを利用する場合の設定
http://www.koikikukan.com/archives/2008/03/06-020202.php
Movable Type 4.2  Can't call method "label" on an undefined value - 徒然雑草
http://veritascreative.org/continuous_connection/2009/09/02_165800.html
xserver で cron | trash-area.com
http://trash-area.com/archives/335
まとめ

ということで、以上でMTの移転完了。

これにプラスして、プラグインの動作確認したり、移行データの検証したり、リダイレクトの設定したり、みんなにお知らせしたりと、やること盛りだくさん。ひとことで言えば大変でした。

でも、参考として挙げている数々のサイトに助けられ、無事移行が完了しました。感謝、感謝。

<結論>
サーバの移転なんて、しないに越したことないね! なんだ、この結論。。。

サーバ移転:Wordpress移行篇に続きます。

ということで、以前のブログ「エアロパス」から引っ越してきました。

これまでは、スカイラブデザインとしてのドメイン「skyld.net」を使用してきたけど、夫婦で別ドメインってのもあれなので、「komadoya.com」(=小窓屋)へ統合することに。

ブログも含め、コンテンツをほぼこっちに移行したんだけど、作業が思った以上に大変で。。。その辺の話は、別でまとめようかな。

移行に伴いURLが変更になりましたので、古い方のブログで、ブックマークやRSS等をご利用いただいていた方は、お手数ですが下記に変更ください。

これからは、こっちで色々と更新していきますのでよろしくお願いします。

福岡で商業施設やオフィスビルの設計施工・工事を行う「近藤金属工業株式会社さま」のWebサイトリニューアルを担当させていただきました。

近藤金属工業 トップページ

社長の近藤さんと親しくさせていただいている縁もあり、今回声をかけていただきましたが、改めて実績を拝見すると、新宿駅前にある繭の形をした「モード学園」のビルや、レベルファイブがオフィスを構える「薬院ビジネスガーデン」を手がけるなど、そうそうたる実績の数々です。すごい!

近藤金属工業 実績紹介ページ

ビジネスに直結するシンプルなサイトを作りたい、という近藤さんの意向をもとに、特に実績紹介ページに力を入れて制作。年度ごとの更新がしやすい仕組みを作ったり、物件写真を多く掲載できるレイアウトにするなど、問い合わせへのつながりと今後の拡張性に意識して取り組みました。

また、お話をうかがうと、「取引先に実績を紹介する際、印刷物を用いることが多い」とのことでしたので、印刷用スタイルシートを準備し、印刷時にそのまま実績集として使用できるよう配慮を行っています。

打ち合わせ時には設計時の苦労話や、現場での裏話が伺え、昔、設計者だった僕にとってはとても楽しい仕事となりました。さらに、「たてものに技術を。まちに風景を。」のコピーまで採用してもらって恐縮です。

普通に生活しているとなかなか縁のない会社だと思いますが、あなたが住むまちの風景をつくっている(・・・かもしれない)近藤金属工業をどうぞよろしくお願いいたします!

近藤金属工業株式会社
http://www.konkin.co.jp/

厚木市の地域情報を紹介するサイト「厚木時間」の制作を担当させていただきましたので、ご紹介。

厚木時間

なぜに福岡在住の僕が、厚木のサイト?という方がいそうなので、説明させてもらうと。最初のきっかけは、小窓屋(旧スカイラブデザイン)の制作実績を見ていただいたところから。

「Wordpressを使って、地域情報サイトを作りたい」と思われていた際、僕が構築した「博多うまいもん.com」を見て、気に入ってくださったとのこと。

「神奈川」と「福岡」という距離の壁に、最初は不安な面もありましたが、デザインの確認や原稿のご提供など、やり取りもスムーズに進み、無事リリースまでたどり着くことができました。(担当のYさん、この場を借りて、お礼いたします)

厚木時間 詳細ページ

お客様自身で更新いただけるよう、CMSとしてWordpressを導入させていただいたので、お店の紹介記事も日に日に充実していってて、サイトを訪問するのが楽しみだったりします。

大手の地域ポータルサイトでは紹介されないような「ちいさなお店」を回り、しっかり取材した上で紹介するという、とても手の込んだ仕事をされてて、その姿勢には頭が下がる思いです。

個人的に気になってるのは、「黒うどん 山長」で提供される、独特のコシと豊かな風味で知られる「黒うどん」。日本で食べられるのは、ここも含め4店しかないみたいなので、お近くの方は是非行かれてみてはいかがでしょうか。

当面の目標は「紹介記事を100件!」とおっしゃっていたので、今後の「厚木時間」の充実ぶりにご期待ください!

厚木市の地域情報サイト「厚木時間」
http://atsugi-time.jp/

どうやらパソコンの寿命が近付いてるらしい。
電源入れても途中で固まったり、ふと気付いたら画面がブルー一色になってたり・・・。前のパソコンが突然死した苦い経験があるので、今回は早めに対策。ということで、iMacを導入してみました。

iMac 21.5inch

iMac到着後、開封の儀式を終え、さあこれから活用するぞ!と喜んだ日の2日後、新型iMacが発売に。ちょ、、appleさん。

ま、それはともかく、そのうち仕事で使う日も来るだろうということで、VMWare Fusionをインストールしてみた。ちなみにVMWare Fusionっていうのは、MacでWindowsを動かすための仮想化ソフトのことで、どうやらBootcampよりも便利らしい。

どう便利かというと・・・

Bootcamp
・MacとWindowsのHDDとメモリを完全に分割する
・OS切替のたびに再起動しないといけない

Fusion
・仮想環境なので、HDDもメモリも共有可能
・アプリケーションを切り替える感じでOSの切替が可能

つまり、Macの中で簡単にWindowsが動かせてしまうという「目からうろこ」なソフトなんです。

早速、VMWareとWindows7をゲットしインストール開始。
そして、一時間後・・・、
インストール完了です!

VMWare Fusionをインストール

取り急ぎ、Windows版Firefoxのインストールにトライしたところ、普通に完了。これは便利。早くadobe関連のソフトを入れて、制作環境を整えたいな。

ちなみにWindows7購入の際は、お得なDSP(=Delivery Service Partner) 版を利用しました。ハードウェアとセット購入することでOSが安く手に入るこのシステム、今回初めて知ったけど、これって常識?PCにプリインストールされているOSと同じ扱いってことなのかな。

桜前線などとっくに過ぎたこのゴールデンウィークに、なぜか桜の話です。恐縮です。

会場となった舞鶴公園

サト研のお花見を舞鶴公園でやる。しかも夜に。ってことで張り切って行ってきたのが4/3。そう、夜桜ってやつを撮ろうと思い、張り切ってカメラを持っていった訳です。

会場の舞鶴公園に着いたのは夕暮れどき。遠くに見える福岡タワーを撮ったりして、この頃はまだまだ余裕があったのだが...。

夕焼けの福岡タワー

あっという間に真っ暗ですよ。
福岡のwebな皆さんとついついワイワイやってしまい、完全に撮影のことを忘れてました。
で、いそいそと撮りに行った桜がコレ↓

舞鶴公園の夜桜

強烈にライトアップされた桜が低い位置にあったおかげでなんとか一枚は確保したものの、他に撮った数十枚は...ああ無情。

レンズをのぞいたときは綺麗な桜も、撮影したものを見ると、薄暗いわ、ピンぼけしてるわで見れたものじゃない。夜の撮影の難しさを、ただただ思い知る結果に終わりました。

少し前に富士フィルムのCMで言ってた「カメラは人間の眼にはかなわない」という言葉、改めて納得です。

あ、肝心の花見ですが、web業界の方々が50人以上も集まったにも関わらず、話してたのはweb以外のことがほとんど、というなんともサト研らしい花見でした。
(つまり、楽しかったということです。)

最後に、場所取りから買い出し・会計・後片付けまで何かとご尽力いただいた幹事のみなさま、どうもありがとうございました!

(サト研お花見2010の詳しいレポートは下記のリンク先でどうぞ)

「ブログを書くまでが勉強会」ってことで、今月のはじめに行った『デッサン勉強会』についてまとめ。

2時間半かけて描いたデッサン

大の大人が密室にこもり、みっちり5時間デッサン三昧。みんな真剣そのもので、集中力が続く続く! 仕事のときもこのくらい...(以下自粛)。ちなみに、上の写真は2時間半かけて描いたもの。右にあるのはお皿ではなくガムテープです...。

人生初のデッサンはリンゴでした

このリンゴが、たぶん人生初デッサンだったんだけど、出来映えはまあこんなものかと。以下、ためになったポイント・気付きを箇条書きしておきます。

デッサンのポイントまとめ

  1. デッサンは観察。光が当たって明るい部分と、その隣にある影の部分をよく見極める。
  2. まずは全部書く。器物同士の大小が狂うと破綻するので、はじめに全体をレイアウトする。
  3. たまに離れて見る。作品を遠くに置いて見るとバランスがよく見えてくる。いわゆる鳥の目。
  4. 部分的に描き込む。リンゴでいうとヘタの部分、お酒でいうとラベルの部分を丁寧に描き込むと、うまく見える。
  5. 後ろに見えてる背景も描く。手前と奥で濃淡の差を付けると立体感がかなり出るので、余裕があれば描くのが吉。
  6. サインを入れるとそれっぽく見えるようになる。日付も入れておくと、後で見返したとき記憶が蘇って楽しい。
  7. 技術を盗む。うまい人が描いてるのを横目でちらっと見て、いいものはどんどん取り入れる。

  8. と、まあざっとこのくらいでしょうか。こうやって見ると「デッサン」と「デザイン」って共通することが多いなあ。と思ったらWikipediaにこんなことが書いてあった。

    デザインの語源はデッサン(dessin)と同じく、"計画を記号に表す"という意味のラテン語designareである。つまりデザインとは、ある問題を解決するために思考・概念の組み立てを行い、それを様々な媒体に応じて表現することと解される。

    うーん、深い。

    最後に。経験豊富なみなさまのおかげで、勉強しながら楽しくデッサンできました。企画してくださった@Yaiveさん他、参加したみなさん、ありがとうございました。第2回があれば、また是非参加したいと思います。


    (おまけ)
    スケッチブックの前をめくっていくと、こんなのがありました。
    うちの奥様、上手だったんですね。

    妙にうまいデッサン

去年の11月にリリースされた「MT5 (Movable Type 5)」。
「管理画面が良くなった」とか、「カスタムフィールドが便利になってる」とか、聞こえてくる噂は肯定的なものばかり。

そんなMT5を使う機会がやっと訪れて、ワクワクしながら使い始めたんだけど、意外にMT4系と同じ感じというか、違和感なく使えるっていうのか。なんかメリットを活かしきれてないような感じで、やや拍子抜け...。しかも、久しぶりすぎて、MTのタグをほぼ忘れているという残念な状態。

まあ、でもせっかく使ってみたことだし、次の機会のために、今回おさらいしたMTタグ(一部、MT5の新規タグ)を自分用にまとめておく。


[ブログ関連]

文字のエンコードを表示 (リファレンス
<$mt:PublishCharset$>
ブログの説明文を表示 (リファレンス
<$mt:BlogDescription$>
ブログの名前を表示 (リファレンス
<$mt:BlogName encode_html="1"$>
ブログのURLを http:// から始まる絶対パスで表示 (リファレンス
<$mt:BlogURL$>
テンプレートモジュールや、外部ファイルを読み込む (リファレンス
<$mt:Include module="モジュール名"$>
ブログ記事の一覧を表示 (リファレンス
<mt:Entries include_blogs="children" lastn="5">
	<$mt:Include module="ブログ記事の概要" display_blog_name="1"$>
</mt:Entries>
この「include_blogs="children"」がMT5的。
記事があれば、ブログ記事の一覧を表示 (リファレンス
<mt:If tag="BlogEntryCount" include_blogs="children">
    <mt:Entries include_blogs="children" lastn="5">
        <mt:EntriesHeader>
        <ul>
        </mt:EntriesHeader>
            <li><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a> - <a href="<$mt:EntryBlogURL$>"><$mt:EntryBlogName$></a></li>
        <mt:EntriesFooter>
        </ul>
        </mt:EntriesFooter>
    </mt:Entries>
</mt:If>
記事一覧ページのタイトル画像を、カテゴリに応じたものに切替
<mt:If name="datebased_archive">
        <h2><$mt:ArchiveTitle$>アーカイブ</h2>
<mt:Else>
        <h2><img src="<$mt:BlogURL$>images/ttl_<$mt:CategoryBasename$>.gif" alt="<$mt:ArchiveTitle$>" /></h2>
</mt:If>
サイドバーの「カテゴリ一覧」でカレントカテゴリにclass="current"を付与
<mt:If name="category_archive">
<mt:SetVarBlock name="thisArchive"><$mt:ArchiveTitle$></mt:SetVarBlock>
</mt:If>
<mt:If name="currentArchive" eq="$thisArchive">
        <mt:If tag="CategoryCount">
            <li class="current"><a href="<$mt:CategoryArchiveLink$>"<mt:If tag="CategoryDescription"> title="<$mt:CategoryDescription remove_html="1" encode_html="1"$>"</mt:If>><$mt:CategoryLabel$></a>
        <mt:Else>
            <li class="current"><span><$mt:CategoryLabel$></span>
        </mt:If>
<mt:Else>
        <mt:If tag="CategoryCount">
            <li><a href="<$mt:CategoryArchiveLink$>"<mt:If tag="CategoryDescription"> title="<$mt:CategoryDescription remove_html="1" encode_html="1"$>"</mt:If>><$mt:CategoryLabel$></a>
        <mt:Else>
            <li><span><$mt:CategoryLabel$></span>
        </mt:If>
</mt:If>

[Webサイト関連] (MT5)

ウェブサイトの名前を表示 (リファレンス
<mt:BlogParentWebsite><$mt:WebsiteName$></mt:BlogParentWebsite>
単体の「<$mt:WebsiteName$>」は、使えないっぽい...
ウェブサイトのURLを http:// から始まる絶対パスで表示 (リファレンス
<mt:BlogParentWebsite><$mt:WebsiteURL$></mt:BlogParentWebsite>
URLも単体じゃ使えない...
ウェブサイトの名前とURLを変数に入れる (リファレンス
<mt:SetVarBlock name="siteName"><mt:BlogParentWebsite><$mt:WebsiteName$></mt:BlogParentWebsite></mt:SetVarBlock>
<mt:SetVarBlock name="siteURL"><mt:BlogParentWebsite><$mt:WebsiteURL$></mt:BlogParentWebsite></mt:SetVarBlock>
ってことで、変数化することに。
ウェブサイトの名前とURLを変数から出力 (リファレンス
<a href="<$mt:Var name="siteURL"$>"><$mt:Var name="siteName"$></a>
ちょっと使いやすくなりました。

ということで、完全に自分用の「MTタグまとめ」でした。
このページ、僕のアクセスが一番多くなるんだろうな。...いいんです、自分用なので。

リキッドレイアウトのコーディングでつまづいたので、今後のためにメモ。
作りたかったのは、下図のようなデザイン。

リキッドレイアウトのイメージ図


まあ、一般的な2カラムなんだけど、サイドバー(#sub)を幅固定にしたリキッドレイアウト。
背景色の色分けは画像使わずに行こうと思ってCSS書いてみた...けど、思ったようにレンダリングされない。

で、ググったり、本読んだり、散々試したあげくできあがったのが、このサンプルページ

HTMLのソースは以下。

<body>
<div id="container">
	<div id="header">#header</div>
	<div id="contents">
		<div id="main">
			<div id="mainInner">#main</div>
		</div>
		<div id="sub">#sub</div>
	</div>
	<div id="footer">#footer</div>
</div>
</body>

このHTMLに対してCSSを当てていくわけだが、考え方は下図参照。

リキッドレイアウトでのコーディング方法概念図

ポイントは、メインエリア(#main)とサブエリア(#sub)の左側に、それぞれネガティブマージンを入れているところ。
左エリアの色分けは、#mainから出したborderと#subのbackground-colorで実現させた。

そんなこんなで、最終的なCSSは以下の通り。

#contents{
	padding-left:240px;
	background-color:#F5F5F5;
	overflow:hidden;
	zoom:1;/*for IE6*/
}

#main{
	float:right;
	width:100%;
	margin-left:-240px;
	border-left:240px solid #EF4;
	background-color:#F5F5F5;
}

#mainInner{
	margin:0 50px;
	padding:50px 0;
}

#sub{
	float:right;
	width:240px;
	margin-left:-240px;
	background-color:#EF4;
}

以上、簡単に作り方をまとめてみた。

これまで固定幅レイアウトを扱うことが多かっただけに、リキッドレイアウトにとまどい、思いのほかコーディングに時間がかかってしまった。少しずつでもいい、引き出しを増やしていくぞ!と誓った1月最後の夜でした。

≫リキッドレイアウトのサンプルダウンロードはこちら

「ナガオカケンメイの考え」(通称:白ケンメイ)を読んで以来、ちょこちょこチェックしてるナガオカケンメイの話が聞けるってことで、九州大学の箱崎千年会議というイベントに行ってきた。

箱崎千年会議のパンフレット

久しぶりに訪れた九大は、かつてのにぎわいが嘘のように閑散としてて、なんだかセンチメンタルな気分に。

空っぽになりつつある九大、そして箱崎地区のことを思いながら、『ロングライフデザイン』を考える、というのが今回のナガオカさんの話のテーマ。ということで、話を聞いて気になった言葉なんかをまとめておく。

ハンバーグの中にニンジンを混ぜて食べさせる、という考え方

先月創刊したばかりの「d design travel」という雑誌の話。

『デザインを感じる旅をしよう』をテーマにして作った、この「d design travel」。実は以前の失敗を踏まえて作りかえたもの。

前身となる雑誌「d long life design」は、僕も実際読んだことがあって、デザインに関する読み物が充実していて、とてもいい雑誌だった。

コンセプトは『いいデザインを考えて生活しよう』。しかし、残念ながら売れなかった。結局、休刊することになったんだけど、そこで諦めないのがナガオカさんのすごいところ。

まず、売れなかった原因を考えた。

ふつうの人は生活しながらデザインのことなんて考えない。だから、みんなが好きな「旅行」をテーマにしよう。そして、その旅行先でデザインに触れてもらう提案をしよう。

これが冒頭の「ハンバーグの中にニンジンを混ぜて食べさせる」という考え方。「ニンジンの嫌いな子供に、ニンジンを無理に食べさせる」のではなく、食べてもらえるような方法を考え実践する。

世間を批判するのでもなく、自分の考えを曲げるのでもなく、その伝え方を工夫していくナガオカさんのスタンス。グチりそうになったとき、時々思い出そうと思います。

いいデザインの10箇条

ナガオカさんの考える、いいデザインの10箇条をまずは箇条書きに。

  1. 修理
    修理をして使い続けられる体制や方法があること
  2. 価格
    作り手の継続していく経済状態を生み続ける適正な価格であること
  3. 販売
    売り場に作り手の思いを伝える強い意志があること
  4. 作る
    作り手に「ものづくり」への愛があること
  5. 機能
    使いやすいこと。機能的であること
  6. 安全
    危険な要素がないこと。安全であること
  7. 環境
    いつの時代の環境にも配慮があること
  8. 計画生産
    あくまで計画された生産数であること。予測ができていること
  9. 使い手
    使う側が、その商品にまつわる商品以外に関係が継続する仕組みがあること
  10. デザイン
    美しいこと

いいデザインの10個目にやっと「美しいこと」という要素が出てくるっていうのもナガオカさんらしくて好きなんだけど、最近まちづくりに興味がある僕にとっては、これを「いい街の10箇条」にそのまま書き換えられることが一番の驚きだった。

最後にその置換えをして締めます。

いい街の10箇条

  1. 修復
    修復して使い続けられる体制や方法があること
  2. 物価
    住民が住み続けるのに適正な物価であること
  3. PR
    行政や住民に街の良さを伝える強い意志があること
  4. 作る
    行政に「まちづくり」への愛があること
  5. 機能
    住みやすいこと。機能的であること
  6. 安全
    危険な要素がないこと。安全であること
  7. 環境
    いつの時代の環境にも配慮があること
  8. 計画整備
    あくまで計画された整備(建設・人口)であること。予測ができていること
  9. 住み手
    住む側が、その住まい以外に関係が継続する仕組みがあること
  10. デザイン
    美しいこと

福岡はこのうち何個を満たしているか、徐々に考えて行こうかな。

あ、そうそうナガオカさんは、来年2010年2月に放送される「ようこそ先輩」に出演予定だとか。高校生にデザインを教える課外授業をしてきたそうなので、忘れずにチェックしようと思います。

最近、福岡にもwebの会社が増えてきたのか、知る機会が増えただけなのか分からないけど、心当たりの制作会社が増えてきたので、再度まとめ。

以前の記事は下記よりご覧ください。


では早速、制作会社一覧をどうぞ。

ペンシル
なにかと有名な福岡のwebコンサル会社。SEOのこと教えてください・・・。
[主な実績] 三好不動産, シノケン
リメディア
須崎公園の近くにある制作会社。本社は東京。美工社がやってる「リ・メディア」といつもゴッチャになるんです・・・。
[主な実績] 三井のリフォーム, バンタンデザイン研究所
フロッグマンオフィス
テレビ西日本系サイトを連発する西公園のふもとの制作会社。少人数なのに制作ペースがすごいんです。
[主な実績] テレビ西日本, 華丸・大吉のなんしようと?
フリーメソッド
まじめに取り組む姿勢が見える制作会社。会社は住吉神社そば。
[主な実績] コモス・スタイル, 天国社
キャッチアップ
システムに強い制作会社。コーポレートサイトに特化したCMS「BaserCMS」がリリース間近らしく、ほんと楽しみ。
[主な実績] おきグル, みえスマ
ヌーラボ
Backlog(バックログ)に続き、オンラインドローツール「Cacoo」をリリース。中洲のオフィスがめちゃキレイ。
[主な実績] バックログ, Cacoo
プロボ
玄人好みの制作会社。CSS効いてない?と思わせる自社サイトが、このご時世、逆に目立ってうらやましい。
[主な実績] アトリエ・トア, 独華陶邑
CGFM
夫婦二人でやってる制作会社。強みは人柄だと思います。
[主な実績] ふくおか生涯学習ひろば, ブルーオーシャンシステムズ株式会社
ブランコ
Movable Typeマスターがいるデザイン事務所。最近、サイトをリニューアル。効果抜群らしいので、穴が開くほど見るつもり。
[主な実績]  ライズ株式スクール, 九州大学出版会
小窓屋
妻とやってるwebデザイン事務所。いわゆる宣伝です。
[主な実績] ダイエットプランナースクール, てのひら盆栽教室 櫻苑

以上、福岡のweb制作会社をまた10個追加してみた。これでシリーズ合わせて30個。だいぶ、まとめらしくなってきて、ちょっぴり悦にひたってます。次回に続く・・・(といいな)。

[追記]
今回のまとめ、裏テーマは「僕とちょっとずつつながってる会社」でした。詳しくは僕まで。

ガイドさんのお話を聞きながら、博多の街をぶらりと巡る「博多情緒めぐり2009」が始まってます。

博多情緒めぐり

ということで、早速行ってみたというか、参加してみたというか、スタッフとしてガイドのサポートなんかしてきました。

博多情緒めぐりには、歩いてお寺を巡るコースとか、ベロタクシーに乗って海沿いを巡るコースとか、全部で7種類のコースがあるんだけど、僕が参加したのは「バスコース」。

文字通り、バスに乗って福岡の街をぐるっと一周するコースなんだけど、敏腕ガイドの話を聞きながら眺める景色は、新発見の連続です。

ぐりーん

「大濠公園」の池は福岡城の外堀の跡だとか、「大名」という町名は、黒田の殿様に仕えていた大名屋敷が集まっていたことに由来するとか。そして、なんと・・・あ、続きはぜひ「博多情緒めぐり」で!

街をめぐったその日から、福岡で暮らすのがもっと楽しくなること請け合いです。

「バスコース」に関係してる僕の個人的なおすすめポイントは、都市高速から眺める博多湾の風景。荒戸大橋を渡るときなんか、ジェットコースター気分でかなり気持ちよかですバイ。

なお、「博多情緒めぐり2009」は11月15日(日)で終了しちゃいますので、ご参加はお早めに。予約は、以下の申込案内ページからどうぞ(電話予約のみ)。

博多情緒めぐり2009(申込案内)

参考リンク:
博多情緒めぐり
ガイドと福岡・博多のまち巡り!「博多情緒めぐり2009」開催中!

サイト運営・管理研究会(仮)、通称「サト研」に参加してきました。
以前から気にはなってたんだけど、なかなか足を運べず、10回目にしてようやくデビューです。

サト研vol10

会場のAIP cafeには初めていったんだけど、繁華街にひっそりと建つ隠れ家的な感覚がかなり気に入りました。薬院の「あづまビル」もそうだけど、古いがゆえに魅力を増している空間。短所を長所に変えるというか、価値の転換というか、なにかと刺激を受ける建物です。


そんなこんなで、サト研Vol.10本編の話も少し。


Web上で同時編集可能なドローツール「Cacoo(カクー)」がまもなくリリース

ヌーラボのはしもとさんから発表のあった「Cacoo」、これがかなり便利そう。早速クローズドベータに申しこんだから、今度ワイヤーフレーム書くときがあったら使ってみようかと画策中。
もし画像もペタペタ貼り付け可能なら、Webサイトの校正指示にも威力を発揮しそうな予感。FAXで指示出しする時代に終焉が来るか?!


企業サイトに特化した福岡産まれのCMS「BaserCMS」、完成間近

キャッチアップのエガシラさんからは、開発中のCMS「BaserCMS」についての紹介。新着情報やお問い合わせフォームなど、企業サイトで最低限必要なものをCMSとして実装したのが、BaserCMS。
僕みたいな、しょぼくれWebデザイナーなら、「そうそう、こんなCMSを待ってたんだ!」と言ってしまうこと間違いなし。中小規模の企業サイト構築の救世主になる予感です。リリースが楽しみ!


詳しいレポートは、この辺とか、この辺とか、この辺でまとめられているので、そちらをご覧ください。

全体的な印象としては、なごやかなムードと、ゆったりとした進行で、とても居心地のいい時間が過ごせました。Webの知識が増えるのはもちろん、参加者のみなさんから刺激をもらえるのが一番うれしかったかな。サト研運営の皆様に感謝です。

あ、最後に僕のとりとめのないカメラ話に付き合ってくださった君色少年さん、ありがとうございました。これが苦悩を生み出す単焦点レンズです。

NikonD40+パンケーキレンズ

(参考サイト)
FWW_サイト運営・管理研究会(仮)

去年もエントリーした、「気に入っているサイト」シリーズの2009年版。今回も張り切って10個のサイトを紹介しようと思う。

2008年版は下記よりご覧ください。


では早速、2009年版をどうぞ。

Pianist Lounge (ピアニスト・ラウンジ) | ヤマハ株式会社
ピアノにまつわる人々をインタビュー形式で紹介する、ヤマハの読み物コンテンツ。
マージンの取り方、背景と文字のコントラスト、写真の配置など、長い文章を読ませるテクニックがふんだんに盛り込まれた、お手本のようなサイト。特に小曽根 真氏へのインタビューの回は秀逸である。
ピアニスト・ラウンジ
SIGMA DP2 : スペシャルコンテンツ
SIGMAのコンパクトデジカメ「DP2」を紹介する特設サイト。
1行の文字数を抑え、読む人の負担をやわらげた「おもてなし感」にあふれるサイト。オープニングムービーに表示される「⇒Skip Our Message」は、とてもじゃないけどクリックできない。
SIGMA DP2
ブルースタジオ:blue studio
建築事務所ブルースタジオが提供する住宅情報サイト。
気分で選べる「Feeling Search」は切り口の良さもさることながら、インターフェースが秀逸。ヒトんちをのぞいている様な感覚は、「渡辺篤史の建もの探訪」に通じるものがあって、たまらなく魅力的である。
ブルースタジオ
Panasonic Design | 松下電器産業株式会社
Panasonicのデザインについて紹介したコンテンツ。
ぐにゃぐにゃ動き回る有機的なグラフィックは文句なしの気持ちよさ。ライティングが素晴らしく、ついつい先が見たくなる「デザイナー特集」も見所のひとつ。「庫内は山中」には参った。
Panasonic Design
ネクタイ 通販 | 「TIE STATION - タイステーション」
ネクタイ専門店「TIE STATION」のECサイト。
柄や色、形や値段など多彩な選び方に対応したナビゲーションが、ユーザーに優しい。サイト制作はFICCだけあって、さすがのクオリティである。
TIE STATION - タイステーション
株式会社ワークスコーポレーション
出版社「ワークスコーポレーション」のオンラインブックストア。
多彩な情報をうまく整理したインターフェースが素晴らしい。カテゴリー分けしたグローバルナビゲーション、書籍情報のタブ表示や、カートボタンの配置など、参考になるレイアウトにあふれている。
ワークスコーポレーション
SKYARC Solanowa(ソラノワ)
情報共有システム「ソラノワ」の製品紹介サイト。
業種的に無機質になりがちなページを、楽しげに見せてるのはデザインのたまもの。親しみやすいイラストと、ビビッドな色使いは、覚えていて損はない。JavaScriptオフ時の対応と、FAQがあれば言うことなしか。
ソラノワ
つくるひと {生産者の想いを届けるコミュニティ}
「つくるひと」と「つかうひと」をつなぐコミュニティサイト。
心があったかくなる優しいデザインはもとより、つくるひとを応援するというスタンスがお気に入り。既存の商品を勝手にリデザインするプロジェクト、勝手ながら応援してます。
つくるひと
JR東海|着くまでも旅。
新幹線の車窓に切り取られた景色を紹介する、JR東海のスペシャルサイト。
つぶさな取材を元に、コピーライター仲畑貴志さんがつむぎ出す言葉の数々が、とにかく素晴らしい。
『あなたの移動をより豊かに。私たちは、旅を感じるきっかけをつくりたいと思いました。』ですか。す・・・素敵すぎます。
着くまでも旅。
IKEA - KOM IN I GARDEROBEN
IKEAのクローゼット用商品を紹介するスペシャルコンテンツ。
遊び心にあふれた映像はUNIQLOCK以上かも。IKEAのことが好きになりました。早く来い来い、福岡へ。
KOM IN I GARDEROBEN

以上、今年も10個のwebサイトを紹介してみた。
相変わらず隣の芝生が青く見えてるけど、来年こそは、このリストに自分が作ったサイトを入れたい今日この頃です。

jQueryプラグイン化した新バージョンを作成しました。

CookieをIEからFirefoxへインポートする際、ドメイン名の解釈の違いでcookieが複数生成されるバグを修正しました。(2010.03.06)

IE6,IE7でJavaScriptが動作しないバグを修正しました。(2009.09.10)

クッキー(cookie)とJavaScriptを使って、いわゆるYahoo!トピックスのタブ表示みたいなのを作ろう!という企画。

タブ表示サンプル

たまに使いたくなるクッキー。でも処理がめんどくさそうなので今まで敬遠してきた。
そんな折、テレビから「START!一歩を踏み出そう」の声が・・・。なんか作らないといけないような強迫観念にさいなまれて、サンプルを作成してみた。

≫サンプルはこちら

以下、HTMLのマークアップ。(簡略化してます)

<ul id="tabhead">
	<li id="head-tab0" class="on"><a id="anchor-tab0" href="#">foo_a</a></li>
	<li id="head-tab1"><a id="anchor-tab1" href="#">foo_b</a></li>
	<li id="head-tab2"><a id="anchor-tab2" href="#">foo_c</a></li>
</ul>
<div id="tabbody">
	<div id="body-tab0" class="current">
		<h2>foo_a</h2>
		<ul>
			<li>hoge</li>
		</ul>
	</div>
	<div id="body-tab1">
		<h2>foo_b</h2>
		<ul>
			<li>hoge</li>
		</ul>
	</div>
	<div id="body-tab2">
		<h2>foo_c</h2>
		<ul>
			<li>hoge</li>
		</ul>
	</div>
</div>

肝心のJavaScript部分は以下↓

//変数設定
var CookieTab = {
	cookieName: 'select', //cookieに書き込むプロパティ名
	cookieExpires: 10, //cookieの有効期限(単位:日)
	tabHeadId: 'tabhead', //タブheadのID名
	tabBodyId: 'tabbody', //タブbodyのID名
	tabHdPrefix: 'head-', //タブheadリストのID接頭語
	tabBdPrefix: 'body-', //タブbodyリストのID接頭語
	tabAnPrefix: 'anchor-' //タブheadアンカーのID接頭語
};

//DOM読込完了後、tab制御開始
dom.event.addEventListener(window,'load',function(){
	CookieTab.setting();
});

//tabの初期制御
CookieTab.setting = function() {
	this.tabValue = this.getCookie(this.cookieName);
	this.domAnalysis();
	if(!this.tabValue || this.tabValue==undefined){
		this.tabValue = 'tab0';
	}
	this.tabControl();
}

//cookie書込用関数
CookieTab.setCookie = function(ckName, ckValue, ckExpires, ckDomain, ckPath, ckSecure) {
	var date = new Date();
	date.setTime(date.getTime() + ckExpires*24*60*60*1000);
	var ckStr = escape(ckName) + '=' + escape(ckValue);//日本語使用時の文字化け対策
	ckStr += '; expires=' + date.toGMTString();//有効期限をGMT値に変換
	if(ckDomain) {
		ckStr += '; domain=' + ckDomain;
	}
	if(ckPath) {
		ckStr += '; path=' + ckPath;
	}
	if(ckSecure) {
		ckStr += '; secure';
	}
	document.cookie = ckStr;
}

//cookie取得用関数
CookieTab.getCookie = function(ckName) {
	var ckMatch = ('; ' + document.cookie + ';').match('; ' + ckName + '=(.*?);');
	var ckValue;
	if(ckMatch){
		ckValue = ckMatch[1];
	} else {
		ckValue = '';
	}
	ckValue = unescape(ckValue);//escapeしたものを元に戻す
	return ckValue;
}

//DOM解析用関数
CookieTab.domAnalysis = function() {
	this.linum = this.ID(this.tabHeadId).getElementsByTagName('li').length;
	this.tabBdDiv = this.ID(this.tabBodyId).getElementsByTagName('div').length;
	if(this.linum != this.tabBdDiv){
		throw new Error('tabHead is not equal to tabBody.');
	}
}

//tabの初期設定
CookieTab.tabControl = function() {
	this.tabDisplay();
	for(var i=0; i<this.linum; i++){
		this.tabAnchor(i);//tabクリック時の動作設定
	}
}

//tabの表示制御
CookieTab.tabDisplay = function() {
	for(var i=0; i<this.linum; i++){
		//互換性維持のためclassの取得・設定にはhoge.className = fooを使用
		this.ID(this.tabHdPrefix + 'tab' + i).className = '';
		this.ID(this.tabBdPrefix + 'tab' + i).className = '';
	}
	this.ID(this.tabHdPrefix + CookieTab.tabValue).className = 'on';
	this.ID(this.tabBdPrefix + CookieTab.tabValue).className = 'current';
}

//tabクリック時の動作制御
CookieTab.tabAnchor = function(tabnum) {
	this.ID(this.tabAnPrefix + 'tab' + tabnum).onclick = function(){
		CookieTab.setCookie(CookieTab.cookieName,'tab' + tabnum,CookieTab.cookieExpires,location.hostname);//Cookieを発行するドメイン名を明示的に指定
		CookieTab.tabValue = CookieTab.getCookie(CookieTab.cookieName);
		CookieTab.tabDisplay();
		return false;
	}
}

//getElementByIdの短縮形を使用
CookieTab.ID = function(id) {
	var myId = document.getElementById(id);
	return myId;
}

解説は時間と紙面の関係上、割愛。スクリプトに少しコメントを入れてるので、そちらを参照ください。

ちょっと前から「オライリーのサイの本」を読んで、ちょこちょこ勉強してるけど、やっぱ手を動かさないとダメ。「名前空間を汚さないようにモジュール化する」ってことの意味が、やっと少し分かった気がする。

今回は「jQuery」を使わず実装したけど、jQueryを使った場合のスクリプトは以下。
jQueryにプラスして、「jquery.cookie.js」も使用するのであしからず。

//DOM読込完了後、tab制御開始
$(document).ready(function(){
	CookieTab.setting();
});

//tabの初期制御
CookieTab.setting = function() {
	this.tabValue = $.cookie(this.cookieName);
	if(!this.tabValue || this.tabValue==undefined){
		this.tabValue = 'tab0';
	}
	this.tabControl();
}

//tabの初期設定
CookieTab.tabControl = function() {
	this.tabDisplay();
	$('#' + this.tabHeadId + ' li a').each(function(value){
		$(this).click(function(){//tabクリック時の動作設定
			value+='';//数値型→文字列型変換
			$.cookie(CookieTab.cookieName, 'tab' + value, { expires: CookieTab.cookieExpires, domain: (location.hostname) });//Cookieを発行するドメイン名を明示的に指定
			CookieTab.tabValue = $.cookie(CookieTab.cookieName);
			CookieTab.tabDisplay();
			return false;
		});
	});
}

//tabの表示制御
CookieTab.tabDisplay = function() {
	$('#' + this.tabHeadId + ' li').each(function(){
		$(this).removeClass('on');
	});
	$('#' + this.tabBodyId + ' div').each(function(){
		$(this).removeClass('current');
	});
	$('#' + this.tabHdPrefix + this.tabValue).addClass('on');
	$('#' + this.tabBdPrefix + this.tabValue).addClass('current');
}

jQueryには、jQueryの難しさがあるし、こっちの方法も結構めんどい。適材適所で使うのがよいかと。

サンプルのダウンロードもできるので、興味がある方はどうぞ。
これを使う機会、いつか来るかな。

≫CookieTab.jsサンプルファイルの一括ダウンロードはこちら


ライセンス:
クリエイティブコモンズライセンス:帰属(Attribution, by)」での公開・配布となります。

・・・なんて大それたタイトルを付けたことを早くも後悔してる僕ですが、続けます。

建築家「坂 茂(ばん しげる)」と、デザイナー「原研哉」が、日本のクルマの独創性についてまとめた本が発売された。名前は「JAPAN CAR 飽和した世界のためのデザイン」。

JAPAN CAR 飽和した世界のためのデザイン

かつて欧米のモノマネに過ぎなかった日本のクルマが、いまや日本独自の価値観や個性を身にまとうようになっている。たとえば、日本のクルマの特徴である「小ささ」は、日本の美意識の原点「簡素・簡潔」という考えがはぐくんだものだ。

原研哉は、この本でそう解説している。

欧米のクルマが優れていることを認め、モノマネした日本を卑下するでもなく、日本らしい「小ささ」さという美点を見つける視点は、さすが原研哉というところ。

まあ「小ささ」の理由は、それだけではなくて、税制優遇のある軽自動車規格や、道路が狭い日本の交通事情とも密接に関係していると思うけど、ここに来て、あえて小さいクルマを選ぶ人が僕の周りでも増えてきた。

それは、80年代くらいまで主流だった「高級車に乗っていることがステータスだ」みたいな考え方から、「小さいクルマに乗る方が合理的でスマートだ」という考え方へ着実にシフトしているからなんだと思う。

これぞまさに「簡素・簡潔」の考え方。
かたや、そんな考え方がまだ浸透していないのが、僕らがいるweb業界。

トップページにはFLASHで動きを付けて!でも予算がないから、お問い合わせフォームは削って・・・。新着情報もシステムで更新できなくていいです・・・。

こんな言葉を聞いて、まだまだweb黎明期だということを思い知る今日この頃。お隣の中国では高級輸入車ブーム、韓国ではwebと言えばフルFLASHサイトがスタンダードなんだとか。

どんなにデザインが良くて、いいエンジンを載せたクルマだって、ブレーキがないと走れないし、ガソリンを入れてあげないとすぐ止まってしまう。

必要な機能・性能をコンパクトなサイズで実現しているJAPAN CAR。かたや余分な機能・要素ばかり詰め込んで、基本機能をなおざりにしている感のあるJAPAN WEB。

このエントリーを書き始めて、日本のwebの特色をあれこれ考えていたものの、どうにも答えが見つからないのは、「見つからないのが答え」だからなのかもしれない。

もっとweb業界が成熟していくと、日本の独自性も徐々に現れてくると思うし、新たな課題も出てくるんだろうなあ。

たとえば、人が死んだ後、その人が持っていたサイトやブログやアカウントはどう処理するのか?なんて問題は、そろそろ業界レベルで取り組んだ方がいい。といっても、なかなか話が進まないだろうから、個人的に考え中だったりする。

WEB_DEBLI

まあ、でもそんな大したことはできないし、自分にできることをできる範囲でやっていけば、そのうち、自分らしさみたいなものが生まれるんじゃないか、と物思う木曜の深夜でした。

(参考サイト)JAPAN CARのWeb版
JAPAN CAR | DESIGNS FOR THE CROWDED GLOBE

ってことで、街中で見つけた広告が、下の画像のそれ。

驚きのコストパフォーマンス0円広告

「え?0円!?」
何回見ても、0円と書いてあるので間違いない。「価格破壊の波がとうとうweb業界にも波及か!」と驚愕したのだが、いろいろと裏があるような気がしてちょっと調べてみた。

・・・どうやら無料なのは初期制作費用で、サイトを制作したあと、月々19,800円の運用費用が発生するのだとか。ふむ、そういうカラクリか。

月々2万として、年間で24万円。そうした固定費用として発生する「サイト運用費」を見えなくしているのが、この0円広告のミソなんだけど、webの現状を考えると、この考え方も悪くない気がする。

何十万円もかけてサイトを作って、完成したらほったらかしっていうパターンを知ってるけど、なんとももったいない。CMSを入れても、更新できる人がいない、更新する時間がないっていうケースもある。

そんなんだったら、この0円プランみたく、「せっかく月々のお金を支払ってるんだから、更新をお願いしようかな?」ってなった方が全然イイ。

いわゆるナナロク世代の僕は感じてるけど、webを取り巻く環境は一昔前と全然違う。でも、案外それに気付いてない人もいる。

美しいwebサイトを持っていることは、もはやアドバンテージではない。webサイトを作ろうとしている人全員にそのことを気付いてもらうために、この「0円広告」はweb業界として歓迎すべきことなのかもしれない。

最後に、次の言葉を紹介して締めます。

天才とは、ただ、努力の継続をできる人のことをいう

エルバート・ハバード (アメリカの教育家)

月々の会費を払ってるにも関わらず、スポーツクラブを休みがちな僕にとっては耳の痛い言葉です・・・。

博多の夏といえば「山笠」。で、今日7月15日は、山笠を締めくくる「追い山」ってことで眠い目をこすりながら行ってきました。

山笠フィナーレの追い山直前

「なんで、こげん早朝からやるとかー」っていつも思うけど、ヤマを見ればそんな気分はどこへやら。山笠に参加する男衆、かっこよすぎます。

櫛田入りを待つ

山笠

「どんたく」と並列の扱いをされたりするけど、祭りとしての格が全然違う感じ。山笠に参加するには、どんたくへの参加が必須条件らしく、しょうがなく、どんたくに参加している人がいるとかいないとか・・・。

追い山スタート

山笠

ヤマの重さは、なんと700kg!少しでも早く廻り止めまでたどり着こうと、かき手はこまめに交代しながら博多の町を練り歩く。

交代の合図は、山の前で「かき縄」を頭上にかざすポーズ。そうした山笠独特のしきたりを知ると、また別の面白さが味わえるかも。ちなみに、ヤマにかけられる「勢い水」はかき手の暑さをやわらげるとともに、かき縄を湿らせヤマにしっかり固定する効果があるらしい。

かき手、交代の合図

山笠があるけん博多たい

追い山終了後、山は解体され、次の年にまた新しい山を作るというのが山笠のルール。この一連の流れが景気対策になっているんだとか。その「山くずし」の現場写真を紹介して、平成21年の山笠日記を締めたいと思います。

山ならし

福岡で暮らしていることが、なんだか誇りに感じた一日でした。来年の7月15日も早起きして行くぞー!

Smashing Magazineの「アクセシビリティに関する記事」を読んで、やってみようと画策中なのがタイトルのそれ 。

SEOというよりは、アクセシビリティに配慮したマークアップをしようよ。ってことなので、タイトルは釣りに近いです。すんません。

早速その方法。Smashing Magazineで紹介されていた例を以下で紹介します。

たとえばロゴなんかをマークアップするとき、画像にalt属性を付けて記述したりする。
だが、これはアクセシブルでないので、テキストを含んだマークアップにしましょうよ、とまあそういうこと。

以下、マークアップ例。(サンプルはこちら

1) アクセシビリティがよくないマークアップ

<h2><img src="logo.gif" alt="エアロパス" /></h2>

2) アクセシブルなマークアップ

<h2><img src="logo.gif" alt="エアロパス" />エアロパス</h2>

3) 2のままだと表示があれなので、ちょっと改良

.alternate{
	position:absolute;
	text-indent:-1000em;
}
<h2><img src="logo.gif" alt="エアロパス" /><span class="alternate">エアロパス</span></h2>

この方法なら、CSSオフ・画像オフの環境でも内容が読み取れるし、スクリーンリーダーもOK。おまけに検索エンジンにも優しいので、試してみる価値はあるかも。

最近、「SEOが...」と言われることが増えて色々とやってるけど、そういう細かい部分より、コンテンツが一番重要だということを忘れないでいたいものだ。

(参考記事):
10 Ways To Make Your Site Accessible Using Web Standards | How-To | Smashing Magazine
ALT属性に記述したテキストとヤフー SEOを研究するブログ
検索結果でウェブページの表示順序を上げるには - インフォセンター - Yahoo!検索
テキストと画像のalt属性でリンクの効果に違いはありますか? | Web担当者Forum

最近、ちょこちょこお世話になってるjQuery
便利なのはいいんだけど、読み込み時間が気になる。ってことで、jQueryの機能が必要ないページで読み込むのを控えてたら、JavaScriptエラーでつまづいたので自分用にメモ。

たとえば、ロード完了時にアラートを出す以下のコード。

このケース、jQueryが読み込まれてないと、「$ってナンデスカ?」っていうエラー「$ is not defined」が発生してしまう。

ってことで、jQueryの読み込みを判別するため、以下のif文を追加した。
サンプルページ1 / サンプルページ2

これでめでたくエラーとはおさらばです。

博多のおいしいものを紹介するグルメサイト「博多うまいもん.com」のリニューアルがやっとこさ終わりました。

博多うまいもん.comのサイトキャプチャ

今回のリニューアルのポイントは以下の3つ。

1) 可読性を高めるため、テキスト中心のデザインに。
前のデザインが前衛的過ぎて、理解されにくい感じだったので、とりあえず分かりやすい感じにした、ということです。
2) メンテナンス性を高めるため、WordPressで再構築。
前のコーディングが、危ういバランスで成り立つトリッキーな感じだったので、web屋っぽい方法を採用してみたとです。
3) キャラクター登場。
イラストを描く練習の一環。ああ、ペンタブレットが欲しい。やっぱWacomがいいのかな?

まあ、そんなわけで、1年前から計画していたリニューアルがなんとか無事完了。

「やっとできた・・・」という安堵感にひたっている今宵ですが、せっかくWordPressで構築したことだし、これからは精力的に更新していきます!(という意気込みです。)

WordPress関連のエントリーも、そのうちまとめます(・・・多分)。

福岡の街並みを歩いて巡る「福岡景観よかとこガイドツアー」なるものに参加してみた。

よかとこガイドツアー集合

このイベント、先月の市政だよりで紹介されていて、軽い気持ちで申し込んだのだが、参加してみてビックリ。ほぼ半日かけて、天神・百道・博多という3エリアの街並みを巡るという、盛りだくさんの内容。

まあ、そんな訳でいろんなとこに行きました。その中でも印象深かった場所をピックアップしてご紹介。

赤レンガ館

まずは、天神の昭和通り沿いにたたずむ「赤煉瓦文化館」。なんかレンガ造りの古い建物があるなあ、という感じで今まで見てたけど、この建物、東京駅の設計で知られる「辰野金吾(たつのきんご)」の作らしい。

そう聞くと、なんだか重厚で荘厳な感じがするから面白い。しかもこの辰野氏は佐賀の唐津出身で、田舎ものなところが僕の心に◎。

福岡市役所

お次は福岡の真ん中に居座る「福岡市役所」。これまた著名な菊竹清訓(きくたけきよのり)の作。

菊竹氏が久留米出身という情報はまあさておき、菊竹さんの弟の彫刻作品がアクロス正面にディスプレイされてるというのが、因果関係も含めなんとも面白いところ。くだんの彫刻は撮影失念・・・ああ。

福岡銀行本店の外観

で、天神エリアの最後は「福岡銀行本店」。何度も前を通ってるけど、通りかかるそのたびに見とれてしまう存在感はさすがの一言。

数年前の東京都知事選に出馬して名が広まった黒川紀章の設計だけど、中庭というか、 広場というか、敷地内に広がる大空間が見ているだけで気持ちよい。

ガイドの先生いわく、これは私的な空間・公的な空間のどちらでもない「中間領域」と呼ばれているらしく、日本古来の縁側などにも通じる考え方なんだと。

ここで黒川紀章本人の言葉を引用してみる。

もし容積率が決まっているのなら、それをフルに使い、それ以上建てられない部分はくり抜いたらいいのではないか、そう考えてつくった「福岡銀行本店」(1975年)です。

「くりぬく」という大胆な発想、それ自体がすごいのはもちろんだけど、それに意味を付けていく作業というか、肉付けしていく力。そんなものを、これから身に付けたいと思った「よかとこガイドツアー」でした。

あ、百道のことも博多のことも書いてないけど、綺麗にまとまったようなので、今回はここで終了。余力があれば第2回レポ書きます・・・

博多の街並み

参考リンク:
【福岡景観よかとこガイドツアー】博多、天神、百道浜を「ぐりーん」で巡ります

福岡のweb制作会社をまとめた以前の記事の第2弾。
制作実績とか調べたいときに、いちいちgoogle先生に頼るのもあれなので、それ用に追加。
早速、制作会社一覧をどうぞ。

paperboy&co.
レンタルサーバ界で有名な「ペーパーボーイ」。本社は東京みたいだけど、ここ福岡発の会社。頑張れ、地元企業!
[主な実績] ロリポップ!, heteml
ユーステーション
最近、いいサイトを連発している模様。オフィスは市役所裏。
[主な実績] 「博多町家」ふるさと館, 北九州港開港120周年
ジャパンイズム
博多駅の全日空ホテル裏。なんか手広くやってる。
[主な実績] ユーコーラッキーグループ, ラブコレ福岡
トランスメディアGP
制作実績が載ってないけど、昔は自社メディア以外もやってた気が。大名の(旧)沼田病院裏。
[主な実績] 懸賞ドリームプライズ, もんじろう - 言葉・方言変換サイト
デザイントランスメディア
大名のトランスメディアといつもごっちゃになる。こちらは百道。サイトは白!
[主な実績] ビューティープロショップ, 株式会社Rcore
利助オフィス
「てっとりばやし」がいい仕事する。那の津にあったはずが、いつの間にか天神の福銀本店そばに移転。
[主な実績] 聖マリア病院, 岩田屋AZ-NET
アドライズ
オレンジ色のサイトが印象的。オフィスは西通りのそば。
[主な実績] 戸上電機製作所, 東野産婦人科
ドットイメージ
福岡サンパレスの近くの制作会社。「福岡 web制作」で検索するといつも上位に表示される。
[主な実績] 格安航空券専門店のリアルチケット, 株式会社ジュバンス
ピクセルプラス
なにかとお世話になったりする野間の制作会社。「大量コーディング受付」バナーはいつまで続く?
[主な実績] RV ウエスタン, KBCメディア 人材派遣
Fusic
地下鉄赤坂駅そば。なんか、知り合いがお偉いさんになってるらしい。
[主な実績] 九州大学芸術工学部

以上、制作会社を10個付けたしてみた。
ここに書いてない会社でも、いいサイトを作ってるとこがたくさんあるはず。
「ここはオススメ!」って制作会社があれば、情報共有のためにも是非ご教授ください。

『福岡のweb制作会社』の第3回まとめがあるかも?

GWだし、なにか作るかってことで、フォームの入力項目を切り替える「switchform」のサンプルをアップ。

たまに実装する機会があるので、使い回せるように作ってみた。
まずは作成したswitchformのサンプルから。  (⇒ダウンロードはこちら

フォームの項目を切り替えるサンプル

使いどころとしては、会員登録フォームで「個人」か「法人」かを選んでもらう時、かな。
「個人」で登録したい人には、「会社名」とか「部署名」の入力欄を表示しない方が、ユーザビリティ的にいいんじゃないかと。

使い方は以下参照。

フォーム部分のHTML

<table id="target-form">
  <thead>
    <tr>
      <th>種別<span>[必須]</span></th>
      <td>
        <ul>
          <li><input type="radio" name="case" id="trigger0" value="0" /><label for="trigger0">ケース0</label></li>
          <li><input type="radio" name="case" id="trigger1" value="1" /><label for="trigger1">ケース1</label></li>
          <li><input type="radio" name="case" id="trigger2" value="2" /><label for="trigger2">ケース2</label></li>
        </ul>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr class="group0">
      <th><label>グループ0</label></th>
      <td><input type="text" /></td>
    </tr>
    <tr class="group1">
      <th><label>グループ1</label></th>
      <td><input type="text" /></td>
    </tr>
    <tr class="group2">
      <th><label>グループ2</label></th>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <th><label>共通の項目</label></th>
      <td><input type="text" /></td>
    </tr>
  </tbody>
</table>

「switchform」の使い方

(1) <table>のIDは、「target-form」とする。(JavaScriptで変更可能)

(2) 種別のラジオボタンには、「trigger」で始まるIDをtrigger0,trigger1のように数字で順に振る。

(3) 入力行の<tr>要素に「group」で始まる対応したclassを振る。
たとえば、ケース0で入力する項目には、「class="group0"」と指定。

(4) 共通で使用する項目の場合、入力行へのclass指定は不要。

(5) ラジオボタンを増やしたい場合は、「trigger**」と「group**」の数字を増やす。


使いまわせるよう工夫したつもりだけど、実はあんまり便利じゃないかも。
まあ、自分用だからいっか。

落款(らっかん)なんぞ作ってみたので、紹介がてらエントリー。

掛け軸とかの隅っこに押されてるハンコのような、サインのようなもの。あの印のことを『落款(らっかん)』と呼ぶ。つまり、「その作品は自分のものだよ」っていう印が落款というわけで、作品なんて作らない僕にとっては無縁のものと思っていた。

が、Wikipediaにこんな記述があるのを見つけて、ちょっと気持ちが変わった。

落款を署するときは、画面で感じの弱いところに記入して全面を引き締めるという効果をねらうこともあり・・・(後略)

デザイン上、なんだか物足りないときに、アクセントとして、英字を添えたりすることがある。落款にも、そういう用途があることを知り、興味が沸いて作った「落款」が下の写真↓。

作ってもらった落款

実際には、作ったのではなく、「作ってもらった」んだけど、凛とした印影ができあがって、これから活用するシーンが増えそう。

僕の苗字をデザインしてもらったこの落款。このデザインをデジタルで作ろうとすると、どうしても冷たくて堅い感じになりそうだけど、この温かさが、「手で彫って作る」ということなんだろうなあ。

ちなみに、この落款は「カフェはじめ」さんで作ってもらいました。お店に併設されたギャラリーで、他の作品も見られるので興味がある方は是非。

「ごはん」と「珈琲」と「落款」の組み合わせは格別です。

「はじめ」のほかほかごはん↓

おいしそうなごはん

ごはんが進むおかず↓

おかずもうまい

今回作った落款は、手始めに名刺に押すことに。

仕事用というか、プライベート用というか、このサイトに合わせた名刺を作ってみたので、手にされた方は是非「落款」にも注目してみてください。

最近、動画を扱う仕事がちょこちょこあるんだけど、そのたびに調べてる気がするので、この機会にまとめ。

動画にもwmv形式とかmov形式とか色々種類があるけど、今回はFLASH内でflvファイルを再生するパターンについて。

まずはデモをご覧ください。 ⇒動画再生のデモはこちら

こんな感じで動画を再生したい時のチュートリアルというか、注意点。
はまってしまう一番のポイントはパスの指定。skinやflvへのパスの通し方を忘れてしまったら下の図を見返すようにしよう。

flvファイルのパス指定を示した図

簡単に解説。

(1)スキンへのパス指定

flash(=flash.swf)からスキン(=skin.swf)を呼び出す際は、flashが配置されるHTMLファイル(=index.html)からのパスを指定すること。(上図の例の場合:swf/skin.swf)

(2)flvファイルへのパス指定

flash(=flash.swf)にflv(=movie.flv)を読み込む際は、flash自体からの相対パスを指定する。(上図の例の場合:../flv/movie.flv)

ここで注意したいのは、flaファイルのプレビュー時とか、ローカルで確認する際に動画やスキンが表示されないこと。サーバにアップすればちゃんと表示されるので慌てるべからず。

ということで、フォルダ構成はこんな感じ。

フォルダ構成

SteelExternalPlaySeekMute.swfって長ったらしく書いてあるのが、デモページで使ってるスキン。flashのデフォルトパターンとして何種類か用意されてるので、好きなのを選べば良い。

自分でスキンをカスタマイズすることもできるけど、なにかとゴニョゴニョする必要があるので、その件はまた別の機会に。

理屈はこのくらいで、あとは実装。flashでの操作を以下で解説。

(A)動画を読み込み

Flashで動画を読み込む

まずは、動画ファイルをflashに読み込ませる。[ファイル>読み込み>ビデオの読み込み]から。wmvとかmovとかでも、flashがflv形式にエンコードしてくれるので安心、安心。

(B)動画の配信方法を指定

動画の配信方法を指定

「Webサーバからのプログレッシブダウンロード」を選んでおこう。ていうか、この方法しか使ったことがないだけなんだけど、何か?

(C)使用するスキンを選択

適用するスキンの選択

プルダウンから好きなスキンを選ぶべし。デフォルトで入ってるスキンはロクなのが・・・もとい、クラシックなものが多いので、やむなくSteelExternalPlaySeekMute.swfの使用頻度が多め。

(D)スキンと動画のパスを指定

スキンと動画のパス指定

動画とスキンの読み込みが終わると、ステージに「FLVPlayback」なるオブジェクトが現れる。FLVPlaybackを選択した状態で「パラメータ」パネルを開くと、「スキン」と「動画」のパスが指定できる。

「contentPath」が動画へのパス、「skin」がスキンへのパスとなるので、最初の方に書いた「パスの指定」の項を参考に設定すべし。

ここまで来れば、あとはパブリッシュするだけ。FlashPlayer8以上でパブリッシュしないと動画が再生できないっぽいので要注意。

とはいっても、FlashPlayer8の普及率は99%近いし、ほぼ問題ないかと。新しいバージョンがでるたびにため息がでるWind○ws Media Playerとは大違いだ。再生できないケースが多すぎませんか?、Micros○ftさん。

デザイン界の大御所、原研哉さんの講演を聴いてきた。

原研哉氏講演「日本のデザインの原像」のパンフレット

原さんが来ることを当日まで疑っていたのだが、本当にいらしてちょっと感動。

肝心の講演内容は「Emptiness(=からっぽ)」について。日本人が感性として持っている「Emptiness」という概念を分かりやすく話してくれた。

その中で印象に残った話をピックアップしてご紹介。

神社は「Emptiness」の考えから生まれた

初詣とかで誰もが行く「神社」。でも、そもそも神社ってなんで作られたの?みたいな話。
結論だけ言うと、『神社という「からっぽ」の空間を用意して、そこに神様をお招きする』という古来の考えが由来らしく、その辺が日本の「Emptiness」の発祥らしい。

何年か前にタイに行ったことがあるんだけど、そのとき訪れた寺院は妙に赤かったり、仏像は金ピカだったりしたなあ。日本の神社とは似ても似つかぬ感じで、神妙な気持ちに全然ならなかったのは、やはり僕が日本人だからなのか。

日の丸は、まさにEmptiness

日の丸を見ると、誰しも日本の国旗だと分かる。でも、その「赤い丸」それ自体には意味なんて全然なくて、それを見た人の中に、意味が生じるのだという話。
日の丸を見て、平和国家の象徴だと感じる人もいるし、軍国主義を想像して憎悪を抱く人もいるし、梅干がのったごはんだと思う人もいる。そうしたいろんな気持ちを受容できるのは「日の丸」がEmptinessであるから、らしいです。

僕が日の丸を目にするときって、入学式とか卒業式とか国民の祝日とかで、見ると言うよりは、なんか見せられるっていう感覚が強い。でも、それは嫌な感じではなく、いま大事なことが起きているんだなという気持ちになる、目印のような存在なのかもしれない。

ある知り合いに聞いたことがあるけど、右翼が日の丸を掲げて街宣活動をしているのは、日の丸、つまり日本という国に嫌悪感を抱かせるための戦略らしい。うーん、日の丸ひとつとっても深いなあ...。

小学校でデザインのことを教えられるくらい、レベルの高い先生になりたい

武蔵野美術大学の教授も務めている原さんだけど、ここ10年でやっと、デザインについて自信を持って話せるようになったらしい。
質疑応答の際に出た意見、「ぜひ子供にもデザインのことを教えてください」に対する回答が行頭に書いた言葉です。

この言葉が実は一番印象に残った。
以前の記事にも書いたことがあるけど、「難しいことを分かりやすく教える」のって一番難しいことだと思う。

学生の頃、家庭教師のバイトをしていたんだけど、その教え子っていうのが勉強嫌いで、特に数学なんかは教えても教えても、全然できるようにならなかった。
数学は得意だったし、分かってるつもりだったけど、それを教えることがどれだけ難しいか・・・。「教える難しさ」を身をもって体感できたのは、(今となっては)いい経験だったかも。

「分かりやすく、しかも興味がわくようにデザインのことを教える」、そんな高い壁を、原さんなら簡単に乗り越えそう。ぜひ小学校で教える姿を見てみたい。そんなことを期待しつつ、今後も原さんの活動に注目して行きたいと思います。

each関数を使って、JavaScriptを簡略化しました。(2009.06.01)

というわけで、僕の旧ポートフォリオサイト「スカイラブデザイン」をプチリニューアルしたときの話。

「スカイラブデザイン」のサイトキャプチャ

上がそのキャプチャで、コンテンツを変えたワケでもないし、基本デザインも変わってないんだけど、jQueryを使って少し動きを付けてみた。

実際にサイトを触ってもらえると分かると思うけど、ラベルをクリックすると、対応するコンテンツが現れたり消えたりするという、いわゆるトグルアクションをjQueryで実装してみただけ。

安易にjQueryに頼りたくないなあと思って、今まで避けてきたけど、使い方くらい知っとこうと思って今回自分のサイトで試してみた。

jQueryのトグルアクションに苦戦。

jQueryを使い慣れてる人なら、30分もかけず、このくらいの動きを実装できると思うけど、jQuery以前にJavaScriptの基本もあやふやな僕は、丸1日くらい悩んでしまった。

悩んで実装した結果を備忘録としてメモ書き。

HTMLのコード

jQueryの前に、まずはHTMLのコードから。(簡略化してます)

<html>
<body>
<div id="container">
	<div id="header">ヘッダー</div>
	<ul id="gnav">
		<li id="gnav01"><a href="#box01">グローバルナビ1</a></li>
		<li id="gnav02"><a href="#box02">グローバルナビ2</a></li>
		<li id="gnav03"><a href="#box03">グローバルナビ3</a></li>
	</ul>
	<div id="contents">
		<div id="contentsMain">
			<div id="box01">コンテンツ1</div>
			<div id="box02">コンテンツ2</div>
			<div id="box03">コンテンツ3</div>
		</div>
	</div>
	<div id="footer">フッター</div>
</div>
</body>
</html>

ヘッダがあってナビがあってフッターがあって、その間にコンテンツがあるという典型的なHTMLソース。ここまでは問題なかったのだが・・・。

jQueryでやったこと(概要)

jQueryでどんな操作をしたのか、コードではなく、まずはフローとして書いてみる。

1) コンテンツエリア(#contents)の表示をオフに。

CSSで非表示にするとSEO的にあれなので、JavaScript側でオフにする。

2) 全体(#container)を上下中央揃えに。

ウインドウの大きさと、コンテンツエリアを除いた全体の高さを算出し、positionを使って上下中央の位置に揃える。

3) グローバルナビ(#gnav)のクリックに応じて、対応するコンテンツを表示(トグルダウン)。

コンテンツエリアをいったん全部表示し、必要ないコンテンツの表示はオフにする。それと同時に、コンテンツの高さを算出しトグルアクションに備える。

4) トグルダウンにスムーズな動きを付ける。

3)で算出したコンテンツの高さを元に、上下中央揃えを保ったままスムーズにトグルダウンさせる。ただし、ウインドウからコンテンツがあふれる場合は、ウインドウの上辺基準に変更する。

5) グローバルナビを再度クリックした際のトグルアップ処理。

トグルアップは上記の3),4)の逆の処理を行う。で算出したコンテンツの高さを元に、上下中央揃えを保ったままスムーズにトグルダウンさせる。

6) ウインドウサイズがリサイズされた際の処理。

ウインドウを拡大・縮小した場合、上下中央揃えの処理を再度行う。

以上1)~6)の処理をjQueryで行うことにした。この辺から既に試行錯誤が始まっていた・・・。

jQueryの実装

下記のコードそのまんま。


$(function(){//$(document).ready()の短縮形

	/****** 初期設定 ******/
	var content = $('#contents');
	var contain = $('#container');
	var contmain = $('#contentsMain');
	var header = $('#header');
	var gnav = $('#gnav');
	var footer = $('#footer');
	content.css('display','none');
	var opPos;
	var clPos = clPositon();
	contain.css('top',clPos);

	/****** トリガー設定用 ******/
	var gnavs = gnav.find('li[id^=gnav]');//id=gnav**が付与されたli要素を抽出
	gnavs.each(function(){//gnavsのすべての要素に対して繰り返し処理実施
		var selector = $(this).find("a").attr('href');//gnavsの各a要素のhref属性#hogeを取得
		var box = $(selector);
		$(this).toggle(
			function(){//open
				contmain.empty();
				contmain.append(box);
				opPos = opPositon();
				toggleDownAction(content,contain,opPos);

			},
			function(){//close
				clPos = clPositon();
				toggleUpAction(content,contain,clPos);
			}
		)
	});

	/****** トグルアクション関数 ******/

	//トグルダウン(open)
	function toggleDownAction(cc,ct,op){
		cc.show();
		ct.animate(
			{top:op}
		)
	}
	//トグルアップ(close)
	function toggleUpAction(cc,ct,cp){
		cc.hide();
		ct.animate(
			{top:cp}
		)
	}

	/****** 位置算出用関数 ******/

	//オープン状態に取る位置を算出
	function opPositon(){
		getSize();
		cMargin = Math.round((docHeight - 60 - hdHeight - gnHeight - ftHeight - ctHeight)/2);
		if(docHeight < ctHeight){cMargin=0;}
		if(cMargin < 0){cMargin=0;}
		return cMargin;
	}

	//クローズ状態に取る位置を算出
	function clPositon(){
		getSize();
		nMargin = Math.round((docHeight - 100 - hdHeight - gnHeight - ftHeight)/2);
		if(nMargin < 0){nMargin=0;}
		return nMargin;
	}

	//各DOM要素のサイズ取得
	function getSize(){
		docHeight = $(window).height();
		hdHeight = header.height();
		gnHeight = gnav.height();
		ftHeight = footer.height();
		ctHeight = content.height();
		cnHeight = contain.height();
	}

	//ウインドウリサイズ時の処理
	$(window).resize(function(){
		if(content.css('display')=='none'){
			currentPos = clPositon();
		} else {
			currentPos = opPositon();
		}
		contain.css('top',currentPos);
	})
})

ということで、とりあえず実装できたんだけど、もう全然ダメ、俺。

jQueryの書き方がどうのこうのよりも、JavaScriptの変数の扱いが途中でよく分からなくなり、勉強不足を身にしみて感じた今回のプチリニューアル。

これを機会にオライリーのサイの本で、基礎から勉強しなおそうと思った冬の日の週末でした。

JavaScript 第5版JavaScript 第5版
村上 列

オライリー・ジャパン 2007-08-14
売り上げランキング : 11884
おすすめ平均

Amazonで詳しく見る
by G-Tools

当初、「ナビゲーションは右にすべきか?左にすべきか?」みたいなことを長文で書いてたけど、Liner Noteさんのエントリーを見て自嘲。

「やっぱモックアップなりなんなり、画を見せないとダメだよなあ」ってことで作ったのが、以下の画像。

Yahoo!の広告を左上に移動させた画像

→ 別ページで表示

おなじみ「Yahoo!」トップの広告を左上に移動したら、ものすごく違和感のあるページができあがったので、この違和感について、あれこれ考えてみた。

1. ナビゲーションはどこに配置すべきか

Yahoo!の各サービスへのリンクを右側に移動させてみたけど、やっぱり左側にないと気持ち悪い。

この「右ナビか、左ナビか」っていう話だけど、たとえば、コーポレートサイトとかECサイトとか、ページ数が多いサイトを作るとき、下階層のローカルナビはたいてい右側に配置する。

それは、「コンテンツが主(メイン)、ナビゲーションは従(サブ)」っていう主従関係があるからで、ユーザ中心のサイト設計をする限り、メインであるコンテンツ部分は「一等地である左側」に配置するのが正しいと思う。

ただまあ、サイトを提供する側からすると、そうも言ってられないのかな?とは思う。

たとえばコーポレートサイトを提供する企業側からすると、「いろんなページを見てもらいたい」という思いがあって、「目に入りにくい右側にナビゲーションを配置するなんて、もってのほかだ!」なんて言いたくなるのかもしれない。

でもユーザへの配慮が不足した、独りよがりのサイトを作っても、その企業のファンは増えないような気がする。

webサイトは、勤勉な営業マンと同じだ。24時間365日、文句も言わずせっせと働いてくれるのだから。

なんて言葉を聞いたことがあるが、営業マンの出来不出来が、売り上げなりイメージなり、その会社の行方を左右するのは言うまでもない。

2. 右ナビを採用しているwebサイトの例

下の画像で分かるように、企業サイトランキング2008で首位を取った富士通のサイトでも、下階層に右ナビを採用している。

右ナビを採用している富士通サイトの下階層

ナビゲーションの位置でサイトの価値が決まるわけではないけど、昨年の企業サイトランキングで首位を取った「出光興産」のサイトでも右ナビを採用してるのは、偶然ではないような気がする。

3. デスクトップアプリケーションの場合

デスクトップアプリケーション(以下、アプリケーション)の例として、Windowsのメールソフト「Outlook Express」(以下、Outlook)を紹介する。下図を見て分かるとおり、メールの受信トレイ・送信トレイなどの、いわゆる「サブメニュー」は左側に配置されている。

Outlook Expressのキャプチャ画像

今までさんざん言ってきた「右ナビ最適説」と違うじゃないか!って言う人がいるかもしれないけど、これは「webサイトとアプリケーションの違い」だと思う。

ここでもし比べるのなら、例えばそれは「富士通webサイトとOutlook」ではなく、「FirefoxとOutlook」でないといけないのかと。

詳しくは、「Webブラウザの領分ーコンテンツとナビゲーションの分離 - Liner Note」とか「Infoperience - ナビゲーションの落とし穴」で言及されているので、簡単な説明だけしておく。

たとえば、「Outlookというアプリケーション」はメールを読み書きするツール、つまり決められたタスクをこなすためのツールであるのに対して、「富士通webサイト」はユーザが必要としている情報を提供するためのコンテンツであるということ。

つまり、Outlookは、webでいうところのブラウザの役割であり、ナビゲーションというものの概念が違うのだ。(と僕は解釈してます。違ってたら指摘してください。)

4. Yahoo!の各サービスへのリンクの位置付け

で、Yahoo!トップページの話に戻って、各サービスへのリンクエリアの話。

下図のように、通常左サイドに配置されているこのリンクエリアは、Yahoo!というアプリケーションのナビという位置付けとしてとらえると、すんなりその配置が解釈できるのではないか。

Yahoo!トップページ

ということで、今のYahoo!のインターフェースは理にかなっているんだと思う。あ、別にYahoo!の回し者ではありません。

(おまけ)もし左上が広告エリアだったら・・・

「ユーザの目線はFの字を描きながら、左上から右下へと移動する」ってーのは、よく知られてるけど、真っ先に目線が行く左上に広告が入ると、それだけで?☆Σ※(・・・自嘲)。

たまに表示される「有名占い師に聞いてみよう!あなたの2009年」とか「おしゃれを諦めない!マタニティウェア♪」とか、興味ありませんって。もっとユーザのセグメンテーションができれば、少しは広告の効果があるかもしれないけど。

もしかして、そういう計画が進行中だったりして。いわゆるLPOの一種か。

新年あけましておめでとうございます。今年もよろしくお願いします。

ということで、2009年が始まってしばらく経ってるワケだけど、しつこい風邪のせいで、苦々しい日々が続いております。 そんな中、今年の抱負なんぞ考えてみたので、自分を追い詰めるためにも書いておく。

2009年の抱負

  1. webサービスを立ち上げる
  2. 自分にキャッチコピーを付ける
  3. 引っ越す

まずひとつ目の「webサービスを立ち上げる」だけど、これはプライベートとしてやるのではなく、是非業務としてやってみたい。

不況のあおりというか、不況のおかげというか、仕事が落ち着いているこの時期を利用して、自社サービスでも立ち上げたい(って勝手に思ってる)。

このご時世、サイト制作を発注する企業も減るわけだし、政府の景気対策に期待してもしょうがないし、自分たちの食いぶちは自分たちでまかなおうぜ。っていうスタンス。

で、その開発を、デザイナー2人+プログラマー1人の3人セットでやる。

そうすると、3人セットが何組かできるから、おのおのモックアップを作って、社内でレビューして、イケそうなやつは実際のサービスとしてリリース。とかできるといいなあ、というひとつ目の抱負。

二つ目の「自分にキャッチコピーを付ける」はこの頃特に感じる、焦りにも似た抱負。

『自分にキャッチコピーをつけてみる』

商品も社員も、「いろいろなことができる」というのは、一見、とても頼られるいいことのように思えるが、「これしかできないが、それについては誰にも負けない」という事柄を持っているほうが、結果としての評価を受けやすい。

ナガオカケンメイ著 「ナガオカケンメイの考え」より

「webやるからにはなんでも出来ないと!」ってそれまでは思ってたけど、この言葉を読んで少し考えが変わった。自分につけるキャッチコピーを、今年は自分で作り出そうと思う。

最後に三つ目の「引っ越す」。これは単純に引っ越したいなーっていう希望。

もうちょっと快適なとこに引っ越して、たまりにたまったweb系の本をまとめて読みたいなあ、なんて思ったりしてます。本棚に本が増え続ける日々から脱却したい!

以上3つの新年の抱負。来年の今頃、何個クリアーできてるか、今から不安です。

ナガオカケンメイの考え
ナガオカケンメイの考えナガオカ ケンメイ

おすすめ平均
stars高い。面白くない。
stars色々考えさせれる一冊
stars共感だらけで怖いぐらい

Amazonで詳しく見る
by G-Tools

web検定合格書の写し


こんな僕もうれしはずかし2級です。

web屋が資格なんか取ってもしょうがない、と思ってたけど、なんか事の流れで取っちゃいました。ひとまず、合格おめでとう、俺。

試験を受けてみて思ったのは、「webデザイナー検定」に合格してもwebサイトは作れないだろうなってこと。

なんか、もっとうまいこと言いたいけど思いつかないので、工藤進英っていうお医者さんの以下の話を引用しておきます。

プロフェッショナルとは・・・

「自分の経験と自分の知識とそれから技術と、それを総動員してかつ、その結果についてすべての責任を負える人間、それがやっぱりプロフェッショナルと思います。」

大腸内視鏡医・工藤進英 「NHK プロフェッショナル 仕事の流儀」より

さすが、プロらしいコメント。僕は果たしてプロフェッショナルなのか、吟味します。


それにしても、いまいちパッとしない2級という響き。
「2流webデザイナーでしょ?」って言われないか、これからが不安です・・・。

日経ネットを見てたら、こんなニュースに出会った。

消費税増税「11年度」明記 3年以内の景気回復前提で自公合意

自民、公明両党は23日未明、税制抜本改革の道筋を示す「中期プログラム」で、消費税率の引き上げ時期を巡る表現修正で基本合意した。3年以内の景気回復を前提条件に、早ければ2011年度からの消費税増税を可能にする内容。24日に両党内の手続きを終え、同日中に政府が閣議決定する方針だ

NIKKEI NET(日経ネット)より

記事によると、麻生首相が消費税の増税を明言したらしい。
ただし、景気が回復すれば...っていう条件付きで。

っていうか、景気悪いんだから、しばらく消費税ゼロにしない?
で、その隙に、車でも家でも、高そうなもの買っちゃおうよ。
ついでに、webサイトのひとつでも発注しようよ。

ダメか?

12月は好きなサイトをさらす月[謎]、ということで、僕が最近気に入っているサイトを10個紹介しようと思う。以下、順不同。

NRI NetCom
野村総合研究所グループのコーポレートサイト。
写真のクオリティ、心が動くコピー、動きの気持ちよさ、すべてがハイレベル。これぞプロの仕事。
NRI NetCom
ありがとう0系新幹線 スペシャルサイト
0系新幹線の特設サイト。
すべてにノスタルジーを感じさせる素晴らしい完成度。特にスペシャルムービー「ありがとう 夢の超特急」は映像と音楽のマッチングが素晴らしくグッと来る。
ありがとう0系新幹線
未来の自分に、手紙を書こう。
日本郵政グループの特設サイト。
「拝啓、未来の俺。」で始まるCMギャラリーはとても心があったかくなる。日本郵政のコンテンツは本当に素晴らしいものが多い。
未来の自分に、手紙を書こう。
村田製作所
村田製作所のコーポレートサイト。
白を基調としたすっきりとしたデザイン、情報のまとめ方は学ぶべきところが多い。
村田製作所
アップル
ご存知、アップルのポータルサイト。
グレーの使い方にはいつも感心させられる。
アップル
CCC カルチュア・コンビニエンス・クラブ
TSUTAYAを展開するカルチュア・コンビニエンス・クラブのコーポレートサイト。
グラデを使わない、区切らないデザインに、引き算の美しさが垣間見える。
CCC カルチュア・コンビニエンス・クラブ
無印良品
言わずと知れた無印良品のコーポレートサイト。
田中一光 ⇒ 原研哉と引き継がれたデザインの力がよく見える。ECサイト制作のベンチマークにはもってこい。
無印良品
TOYOTA DESIGN
トヨタ自動車 デザイン部門のサイト。
写真の美しさを余すところなく活かしたデザインは素晴らしいの一言。ただただ、かっちょいい。
TOYOTA DESIGN
Honda Green Machine
ホンダのクルマづくりに対する姿勢を伝えるスペシャルサイト
ゲームとメッセージを融合させ、「ホンダ」というメーカーらしさが現れた素晴らしいサイト。
Honda Green Machine
DESIGN | ヤマハ株式会社
ヤマハのデザインについて紹介したスペシャルサイト。
クリックレスのインターフェースが極めて気持ちよく、北島康介でなくても「チョー気持ちいい」という言葉が出てしまう代物。
ヤマハデザイン

以上、最近気に入っている10のwebサイトを紹介してみた。
よそのサイトを見て「ウーン!」とか「おーっ!」って言ってるだけじゃなく、そう言ってもらえるサイトを作らんと・・・。

YCAM(山口情報芸術センター)で開催されている「ミニマム インターフェース展」へ行ってきた。最近は、webでもユーザーインターフェースって言葉をよく聞くが、web屋以外の人がインターフェースをどういう風に捉えているのか興味があったので。

山口情報芸術センター外観

手と手をつなぐとき、その皮膚の接している面が「インターフェース」となる。

この説明には目からうろこが落ちた。インターフェースってコンピュータ用語かと思っていたが、こういう風に考えると急に身近なものに思えてくる。難しいことを小難しく説明する自称専門家が最近増えてるけど、難しいことを分かりやすく説明できる人のことを専門家って呼ぶんだと思う。

たとえば、webに詳しくない人から「HTMLってなに?」って聞かれたとき、
「Hyper Text Markup Languegeの略で、W3Cが策定した・・・」って説明する人よりも、
「ホームページが建物だとしたら、HTMLはその骨組みのことだよ」って説明できる人が間違いなく専門家だろう。

と、専門家とはなんぞやの話はさておき、本題の「ミニマム インターフェース展」。感想から言うと、刺激にあふれるものだった。福岡から3時間半かけて行く価値はある。ネタバレになるので、詳しい展示内容については触れないけど、LEADING EDGE DESIGNがデザインした会場ナビゲーションには思わず「すげー!!!」という声が出てしまった。

下の写真で、パンフレットを2枚並べて置いているが、これにも意味があるので是非現地に行って確かめてみてほしい。

ミニマム インターフェース展 パンフレット

今回はYCAMが主催するギャラリーツアーに参加したのだが、時間が許す方には是非とも参加することをお勧めしたい。YCAMの学芸員の方と一緒に、ああだこうだ言いながら展示作品を見て周るこのギャラリーツアー、作品の制作背景を聞けるだけでなく、学芸員さんの話もおもしろいので1時間という制限時間があっという間に過ぎてしまった。

「デザイナーとアーティストの違いは?」という問いに、対する答え

アーティストというのは問題を提起するひと、デザイナーは問題を解決するひとなのだと思う

この言葉、さすが専門家です。

ちなみにこの「ミニマム インターフェース展」、11月に始まり来年の2月8日まで開催されている。年明けからは面白そうなワークショップも開催されるようなので、時間が取れたらまた行ってみたい。なお、入場料はなんと無料! 一体どこから資金が出ているのか、それが一番知りたいかも。

(参考リンク)
ミニマム インターフェース
YCAM 山口情報芸術センター

先週の週末、天神に出たついでに行ってみた。
可士和プロデュースの「フタタ ザ フラッグ」に。

フタタ ザ フラッグ

福岡人にはおなじみ「紳士服のフタタ」がオープンさせたスーツの新業態店がこの「フタタ ザ フラッグ」。

コンセプトは「ジェネラル・スーツブランド」らしいけど、横文字ばっかで正直ピンと来ない。
翻訳すると「スーツ業界のユニクロを目指しました」みたいな感じかな。

スーツのお値段は1万円から。
今風なやつと、定番のやつの2種類から選べる。

フタタ ザ フラッグ

実際に1万円のスーツを見てみたけど、結構かっこよくて、この値段なら買ってもいいかも、と思わせるもの。確かに生地の質感とかは「それなり」な感じがあるけど、物足りないならもっと上質なものが「3万円」「5万円」「10万円」(じゅうまんえん!?)から選べるゆえ、ターゲットも広く取れる。

可士和的には『1000円スーツ』とか、『100万円スーツ』とか奇抜なことをして話題を作りたかったような気がするけど、なんか無難なとこに落ちついてしまった感ありあり。

しかし、しかしである。

今をときめく彼だけあって、新しい仕掛けを用意していた。
オープン記念として店の外に飾られていた花を、道行く人々に配っていたのだ。

フタタ ザ フラッグ

この花に群がるおばさま達がたくさんいたおかげで、店の前は人だかり。
その横を通るアキバ系の人々も興味津々の視線。

この花をうちに持って帰ったおばさまは、
「タダで花もらったバイ、天神で。なんかフタタが新しくなっとったー。」
って旦那、娘、息子に、言いふらすに違いない。

これこそ、バイラル・マーケティング。
うーん、発想がすばらしい。

ちょっと前にできたスーツセレクトではこけてしまった感があるけど、佐藤可士和の今後の仕事にはこれからも注目していきたいものだ。

(参考)
FUTATA THE FLAG
http://www.futata-the-flag.com/

天神に紳士服フタタ新業態旗艦店-佐藤可士和さんプロデュース
http://tenjin.keizai.biz/headline/1787/

紳士服のフタタ
http://www.futata.co.jp/

KONAKA THE FLAG
http://www.konaka-the-flag.com/

「DD_belatedPNG」を使う方法を追記しました。(2011.02.21)

IE6の透過png対策のまとめ。

ちょっと前に、とあるサイトを制作したんだけど、お客様の要望は「遊び心を加えたものを」というもの。
結果、遊んだ感じのデザインにはなったけど、HTML+CSSで組むには苦しくなった。しょうがないので、コーディングで透過pngを多用したけど、ご存知の通りIE6は透過pngに未対応...。この問題に丸一日はまってしまい、完全にIE6が嫌いになりました。

とは言うものの、しばらくはIE6もターゲットブラウザとして残さないといけないだろうから、透過pngの扱いについて今後のためにまとめておく。

IE6で透過pngを適用するには、IE独自拡張のfilterプロパティを使うことになるのだが、次のような方法が知られている。

JavaScriptを使う方法

minmax.jssmoothScroll.jsなどで知られるto-Rさん作成のalphafilter.jsを使う方法。

1)ヘッダでalphafilter.jsを読み込む。

<script type="text/javascript" defer="defer" src="alphafilter.js"></script>

2)png画像にclass="alphafilter"を適用する。

<img src="sample.png" class="alphafilter" />

以上、それだけ。
とは言いつつ、この方法、background-repeatに対応していないため、今回は使用を見送り。

(参考)
アルファ画像を扱うalphafilter.jsライブラリ[to-R]


JavaScriptを使う方法 2 (2011.02.21 追記)

background-repeatにも対応してるJSライブラリ「DD_belatedPNG」が便利。この記事を書いた後にリリースされたみたいで、最近は透過pngならこれを使わせてもらってます。

<!--[if IE 6]>
<script type="text/javascript" src="DD_belatedPNG.js"></script>
<script type="text/javascript">
	DD_belatedPNG.fix('.png-ie6');
</script>
<![endif]-->

使い方は、IE6で読み込むための条件分岐を行った後、透過させたい要素(ここでは、class='png-ie6')を指定するだけ。

詳しい使用方法や注意事項は、ITキヲスクさんのサイトが参考になります。

(参考)
DD_belatedPNG(作者のサイト)
ITキヲスク | IE6用透過png対応策、DD_belatedPNGの使用法と注意点

CSSを使う方法

IE独自拡張であるbehavior:expressionを使い、CSSのみで透過pngの問題を解決する方法。
「見た目を制御するのはCSS」というwebの原則に合っているので、この方法が一番正しいような気がする。 ただし、background-repeat、background-positionに対応してないのが玉にキズ。ということで、これも使用を見送った。
なお、以下のサイトがよくまとまってるので参考にどうぞ。

(参考)
CSS ファイルだけで IE 6 の背景に設定した png のアルファチャンネルを有効にする | ヨモツネット


htcファイルを使う方法

ニュージーランドのweb屋さんが作ったIE PNG Fix v2.0が有名。
DLファイルに含まれている「iepngfix.htc」と「iepngfix_tilebg.js」の組み合わせ技で、background-position・background-repeatの両方に対応!

今回のサイトでは、ペンキで塗った背景の繰り返しなどに、この「IE PNG Fix v2.0」を使わせてもらいました。
以下、使用方法をざっと解説。

1)ヘッダでiepngfix_tilebg.jsを読み込む。
(background-position・background-repeat対策)

<script type="text/javascript" src="iepngfix_tilebg.js"></script>

2)透過pngを適用したい箇所(たとえばclass="pngfix")に、CSSでiepngfix.htcを読み込む一行を記述。

.pngfix{
	background:url(hoge.png) 0 20px repeat-y;
	behavior:url(http://hogehoge.com/iepngfix.htc);
}

3)iepngfix.htcファイル内、20行目にあるblank.gifへのパスを書き換える。

IEPNGFix.blankImg = 'http://hogehoge.com/blank.gif';

これにて実装可能だけど、注意点が2つ。
・スタンドアローン版のIE6(MultipleIEなど)ではうまく透過が表現されないみたいです。
・behaviorでhtcファイルを読み込むときは絶対パスで書く。

この方法にたどりつくまでかなり時間がかかった...。IEヤダ

(参考)
IE PNG Fix - TwinHelix
(ページ中央「Download」内から「Test Area」へ移動、「IEPNGFix v2.0 Alpha」というリンクからDL可能)


【番外編】CSSで透明度を制御する方法

.transparent{
	filter:alpha(opacity=60);
	-moz-opacity:0.6;
	opacity:0.6;
}

1行目がIE用。2行目がFirefox・Netscape用。3行目がOpera・Safari用

手軽にできる透過処理。売り切れの商品だけ画像の透明度を下げたり、とか色々使えるかも?ということで覚え書き。

以上、透過pngのまとめでした。
IE6に苦しむ方のお役に立てれば幸いです。

(IE6の透過png対策 参考記事)
IE6にPNG画像のアルファチャンネルを効かせる方法のまとめ | Blog hamashun.com
IE-winで透過PNGを利用する方法 - Archiva
透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる - DesignWalker
[IE][CSS]IEで透過PNGを扱う為のまとめ - [ま]技術雑記
ユンサンの/융상의/YungSang's: 透過PNG と IE と IE7 まとめ

長年あたためていた、とんこつラーメンレビューサイト「ラーメンを斬る」をリリースした。

「ラーメンを斬る」のサイトキャプチャ

このサイト、元は僕が大学のときにやっていた、「とんこつラーメン食べ歩き」をつづる日記サイトだった。

文章自体は、今見ても割りに読めるものだけど、デザインはかなり残念な感じ。
「さすがに、これはまずいだろう」ということで、今まで公開するのをためらっていた。

それを今回、中身はそのままに表面だけリデザイン。
ま、最近流行りのリノベーションってやつです。

とんこつラーメンの情報だけは充実しているので、暇つぶしに読んでいただければ幸いです。
そのうち本として出版して印税生活を狙います。(←バカ)

「ラーメンを斬る」
http://ramen.komadoya.com/

仕事で、「エアロパス(=商品名)」⇒【検索!】みたいな画を作る機会があったんだけど、マウスが指になった画像を差し込むのに苦労したのでメモ書き。

検索ボックスのイメージ

ライフカードの「続きはwebで」CMとか、富士通FMVの「ウサタクの話(キャンペーン終了)」⇒【検索】とか、最近だと「きこりん品質」みたいな、サイト誘導広告がめっきり増殖中の今日この頃。

僕の元にもそんな仕事がやってきた。のだが、肝心の検索ボックスを作る段になって、クリックするときに現れる「指の形のマウスカーソル」が「PrintScreen」ボタンではキャプチャできないことに気付いて焦った。

指のアイコンを作る時間もなかったので、google画像検索の力を借りて、その場を切り抜けたんだけど、あとで調べたら解決方法が色々あるみたい。

以降、Windows XPの場合を例としてご紹介。

1)フリーソフト「マウスもキャプチャー」を使う。
※「マウスもキャプチャー」は公開が停止になったようです。(2011/01/26追記)
2)コントロールパネル > マウス > ポインタで表示されるアイコンをキャプチャする。
3)C:\WINDOWS\Cursorsに保存されているアイコンを使う。


まずは(1)の「マウスもキャプチャー」を使う方法。

このソフトを使ってキャプチャすれば、マウスカーソルまでキャプチャすることが可能になる。
軽量だし、常駐させるこもできるし、レジストリも汚さないしで非常に便利。
使用方法は、「マウスキャプチャ」を起動した状態で、通常通り「PrintScreenキー」でキャプチャするだけ。作者さま、すばらしいソフトをありがとうございます。


つづいて(2)のコントロールパネルからアイコンにアクセスする方法。

コントロールパネル内のマウスポインタ

どこかにマウスカーソルのアイコンが保存されてるとは思っていたが、コントロールパネルか...。
[ スタート > コントロールパネル > マウス > ポインタ ] にマウス用のアイコンがごそっと。そいつらをキャプチャしたものを下に貼り付けたので、単体でアイコンを使いたいときはこちらをご利用ください。

マウスポインタ画像


で、最後は(3)のWindowsフォルダ。

『.cur』っていう見慣れない拡張子でマウスカーソル用のアイコンが大量に。
[ C:\WINDOWS\Cursors ] フォルダに今すぐアクセス!

マウスカーソルが格納されているフォルダ

ちなみにMacだと、OS標準の「Grab(グラブ)」というキャプチャソフトの設定を変更すれば、マウスカーソルまでキャプチャ可能みたいです。

がんばれWindows...

サーバの移転ではまったので覚え書きとしてメモ(というか半分以上、愚痴)。

ちょっと前から、サイトリニューアルの依頼を受けて個人で制作してた。
で、完成間近になって、さてサーバを移転するか!とDNSの設定をいじってみたがうまくいかん...。

まずは状況のまとめ

・現行サイトは独自ドメインを使用。(仮に、client-domain.com)
・サーバはロリポップを使用。(仮に、old.lolipop.jp)
・リニューアルを機にサーバをロリポップの別サーバに移転。(仮に、new.lolipop.jp)

これまでにサーバの移転を自分でやったことはなかったけど、DNSの設定を変更すりゃいいんだろ?くらいに思っていた。
が、DNSを変更しようとして重大なことに気付く。

ロリポップの場合、DNSの指定は以下のようになる。

プライマリネームサーバー uns01.lolipop.jp (IP 202.222.19.125)
セカンダリネームサーバー uns02.lolipop.jp (IP 202.222.19.126)

そう、ロリポップのレンタルサーバである限り、ネームサーバの指定値は同じなのだ。
ということはつまり、ロリポップからロリポップへのサーバ移行は、内部の設定を変更してもらわないと「無理」と言うこと。

ということで、現行サーバ管理者に早速ドメイン設定の解除を依頼した...のだが、いつまでたっても解除されない。
ロリポップに事情を話して解決方法を相談したが、「現行サーバ管理者に依頼してください」の一点張り。
これではいつまでたっても、新サーバに移行できないので、色々調べた結果、新サーバのIPアドレス当てにDNSの設定を行うこととした。

IPアドレスの調べ方(Windowsの場合)

(1) スタート > すべてのプログラム > アクセサリ > コマンドプロンプトを起動
(2) nslookup new.lolipop.jp(=調べたいサーバ)と入力してEnter
(3) 表示されたAddress: ***.***.194.77という数字がIPアドレス

IPアドレスを調べるだけなら、nslookupっていう便利なサイトがあるから、そちらを使わせてもらうのが吉。

ということで、DNSの設定をIPアドレスに変更してめでたしめでたし、と思いきや、今度はロリポップ側で403エラーが発生。
どうやら、IPアドレスをDNSの設定値にすると、ロリポップ側ではじいてしまうらしい。

しょうがないので最終手段。別サーバを用意してそこに飛ばすことに。

用意したのは、Host Mysite 101.comなる海外の無料サーバ。
無料サーバをたくさん紹介している「無料ホームページ・無料サーバー比較」というサイトから探してきた。

このサーバ、無料にも関わらずPHPにも対応してるし、広告も入らないという優れもの。
とまあ、サーバの紹介はいいとして、旧サーバのデータを「Host Mysite 101」にアップして、DNSを切り替えたところ...見事に接続できた!

画像がまったく表示されないっていうバグがあったものの、画像を別サーバに置いて、それも力ずくで解決。

この一連のサーバ移転トラブルで3日くらい悩んでた。しかも、まだリニューアル完了してないし...
まだまだ修行が足りないようです。(いろんな意味で)

最後に、この一連の作業をワークフローとして図式化しておきます。
それにしても、×多すぎ...

サーバ移転フロー

スムーズに開閉するドロップダウンメニュー

スムーズに開閉するドロップダウンメニューを作ってみた。名付けて「Waterfall Menu」。

ベースにしたのは、この Sliding JavaScript Dropdown Menu
以前、このJavaScriptを仕事で使おうとしたんだけど、メニューの下に1pxの変な余白ができたりしたので、使うのをやめてしまった。

ということで、リベンジしたよという記事。

Waterfall Menu

jsでスムーズに開閉するドロップダウンメニュー。メニューにマウスオーバすると、サブメニューが展開します。

更新履歴
  • [2011.04.29] ver0.3 マウスオーバ時、title属性がツールチップとして表示されないよう修正
  • [2008.12.15] ver0.2 FireFox2.0でドロップダウンメニューが下のレイヤーに入り込むバグを修正
  • [2008.08.21] ver0.1 リリース
使い方

HTMLのソースは以下。

<dl class="dropdown" title="two">
	<dt id="ddheader-two">Dropdown Two</dt>
	<dd id="ddcontent-two">
		<ul>
			<li><a href="#" class="underline">Navigation Item 1</a></li>
			<li><a href="#" class="underline">Navigation Item 2</a></li>
			<li><a href="#" class="underline">Navigation Item 3</a></li>
			<li><a href="#" class="underline">Navigation Item 4</a></li>
			<li><a href="#">Navigation Item 5</a></li>
		</ul>
	</dd>
</dl>

<dl class="accordion">に変更すると、下のコンテンツも連動して移動。(JavaScriptじゃなくて、CSSを変えてるだけ)。
title属性を振ってるのは、どのサブメニューが伸びるのかを指定するため。

<dl class="dropdown"> ⇒ 重なるように移動
<dl class="accordion"> ⇒ 下のコンテンツも連動して移動
<dl title="hoge"> ⇒ hogeというidが付いた<dd>が移動

実装しては見たもののHTMLのソースが全然綺麗じゃない...。
もうちょっとプレーンなソースが書けるよう努力します。


ライセンス:
クリエイティブコモンズライセンス:帰属(Attribution, by)」での公開・配布となります。


参考記事:
[JS]軽量のスムーズに開閉するドロップダウンメニューのスクリプト | コリス
Sliding JavaScript Dropdown Menu - Web Development Blog
JavaScriptでのクロージャの使い方

今さらな感じがするけど、タモリの弔辞に感動した。
特に最後の一文。
ちょっと引用してみる。

(前略)
私はあなたに生前お世話になりながら、一言もお礼を言ったことがありません。
それは肉親以上の関係であるあなたとの間に、お礼を言うときに漂う他人行儀な雰囲気がたまらなかったのです。
あなたも同じ考えだということを、他人を通じて知りました。
しかし、今お礼を言わさせていただきます。
赤塚先生、本当にお世話になりました。ありがとうございました。
私もあなたの数多くの作品の一つです。合掌。

赤塚さんとタモさんがいかに深くつながっていたかを知らされ、グッと来た。

「どう生きていいか分からなくなったときは、どう死にたいか考えなさい」という教訓があるけど、タモさんの弔辞を聞いてその意味が分かったような気がする。

この弔辞を僕はYoutubeサンスポの記事で見た。
なんでもかんでもwebでコトが済んでしまう時代。果たして、これでいいのか。

ドメインを取得した。

苦労してMTをインストールした後だし、ドメインの移行って大変そうだから敬遠していたのだが...。どうやらサーバの移転と違って、ドメインを変えるだけなら簡単にできるらしい。
それならってことで早速ドメインを取得。旧ドメインからの移行が無事終了したので、移行の流れを自分用のまとめとして記事にしておく。

まず、以前の状況のまとめ。
1. 使ってたのはロリポップのサブドメインプラン(hoge.lolipop.jp)。
2. hoge.lolipop.jp/blog フォルダにMovableType4.1をインストール済み
3. hoge.lolipop.jp/piyo フォルダにphpを使ったサイトを構築。

ほんとは「skylovedesign.net」でドメインが取りたかったんだけど、既に埋まっていたので代わりに「skyld.net」を取得。


以下、ドメイン移行手続きの流れ。

(1) ドメイン管理会社のサイトで、欲しいドメインを申請する。
(僕は「ムームードメイン」で取得しました。キャンペーン期間中につき「.net」が年間649円だったので。以下、ムームードメイン+ロリポップという組み合わせでの流れを記述。)

(2) ドメイン申請の決済終了後、ムームードメインのコントロールパネルから「ドメインの取得」を選択し、ドメインを発行する。
(この手続きを行うまで、ドメインは使えない。)

(3) 同じくムームードメインのコントロールパネルから、「ネームサーバ設定変更」を選択。『ロリポップ!のネームーサーバーを使用する』をチェックした上でDNS情報を変更する。

(4) MT管理画面から、ブログのサイト設定を変更する。
(MT管理画面 > ウェブログの設定 > サイトのurlとアーカイブのurlを新しいサブドメインのurlへ書き換え > 再構築をかけ終了)

(5) 旧ドメインにアクセスしにきた人を新ドメインに飛ばすために、.htaccessでリダイレクトの設定を行う。

この(5)ではまってしまった。

googleで調べた方法、『.htaccessに Redirect permanent文を書く』ことで新ドメインにリダイレクトさせようとした。
ソースコードは以下。

.htaccess
Redirect permanent / http://www.skyld.net/

もうお気付きの方も多いと思うが、上のように書くと無限ループに陥っておかしなことになる。
上のコードの意味は、アクセスしてきたものはすべて http://www.skyld.net/ に飛ばしなさいということ。

こう書けば、旧ドメインにアクセスしてきた場合、新ドメインにリダイレクトすること自体は可能だが、新ドメインにたどりついた瞬間、またリダイレクトしようとして。その後も、その後も同じことを繰り返す。そう、つまり無限ループ。

この無限ループを回避するため、最終的には.htaccessにこう書いた。

RewriteEngine on
RewriteCond %{HTTP_HOST} ^(skyld\.net)(:80)?
RewriteRule ^(.*) http://www.skyld.net//$1 [R=301,L]
RewriteCond %{HTTP_HOST} ^(hoge\.lolipop\.jp)(:80)?
RewriteRule ^(.*) http://www.skyld.net/$1 [R=301,L]

2~3行目: wwwなしのskyld.netへのアクセスをwww.skyld.netにリダイレクトする処理
4~5行目: 旧ドメインhoge.lolipop.jpへのアクセスをwww.skyld.netにリダイレクトする処理


これでドメイン移行完了。かかった時間は3時間くらい。はじめに思ってたよりは簡単だったかな。

あ、そうそう、ムームードメインでは引き続き○○○.netの割引キャンペーンをやってるみたい。8/25が締め切りなので、ドメイン取得を検討中の方は使ってみてはいかがでしょ?


あ、なんかアフィリエイトブログみたくなってる。まあ、気にせずに。

参考記事:
サブドメインへ移行しようかと。 - 我楽
dis-CHARGE.net - リダイレクトについて
セカンドノート: 独自ドメインへ移行

ちょっと前に、職場でFLASHのことで相談を受けた。どうやらバナーに連動してFLASHを動かしたいってことらしい。
JavaScriptを絡めればできそうだけど。って答えておいたけど、やったことなかったので試しに作ってみた。以下、備忘録として作り方を記しておく。

【作成したもの】
テキストリンクのマウスオーバに連動してシーンが移動するFLASH。
以下、デモ。

実装方法を簡単にまとめておく。

  1. テキストリンクにマウスオーバしたら、JavaScriptのonmouseoverイベントでFLASHへ渡す関数を呼び出す。
  2. FLASH側でExternalInterfaceクラスを使い、JavaScriptから引数を受け取る。
  3. 受け取った引数(たとえばlabel1)を元に、FLASH側で関数を実行し任意のフレームに移動。
  4. HTML側でテキストリンクからマウスアウトした場合は、(1)と同様にJavaScriptのonmouseoutイベントでFLASHをデフォルトの状態(1フレーム目)に戻す。

HTMLのソース

<div id="flash">
<div id="areaA">
	<object id="myFlash" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="400" height="200" align="middle">
		<param name="movie" value="test.swf" />
		<param name="quality" value="high" />
		<param name="allowScriptAccess" value="always" />
		<embed src="test.swf" name="myFlash" quality="high" allowScriptAccess="always" width="400" height="200" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
	</object>
</div>
<div id="areaB">
	<ul>
		<li><a href="test.html" onmouseover="callExternalInterface('label1');" onmouseout="callExternalInterface('label0');">≫シーン1へのリンク</a></li>	
		<li><a href="test.html" onmouseover="callExternalInterface('label2');" onmouseout="callExternalInterface('label0');">≫シーン2へのリンク</a></li>	
		<li><a href="test.html" onmouseover="callExternalInterface('label3');" onmouseout="callExternalInterface('label0');">≫シーン3へのリンク</a></li>	
	</ul>
</div>
</div>

JavaScriptのソース

function callExternalInterface(label) {
	getMovieName("myFlash").callFlaFunction(label); 
}
function getMovieName(movieName) {
	if(navigator.appName.indexOf("Microsoft") != -1) {
		return window[movieName]
	}else{
		return document[movieName]
	}
}

最後はActionScriptのソース

Flashの画面キャプチャ

1フレーム目
/*label0*/
_root.stop();
import flash.external.*;
var flashFunction:String = "callFlaFunction";
var realFunction:Function = playFunction;
ExternalInterface.addCallback(flashFunction, null, realFunction);
function playFunction(v_label){
	_root.gotoAndPlay(v_label);
	v_text = v_label;
}

以上、作り方をまとめてみた。
頭でなんとなく分かっていても、それを形にするのって難しいなあ。

んで、ここまで作ったけどFLASHをバナーと連動させる話は「なし」になったらしい。ま、いつか使うときがあるか。

参考記事:外部APIを使用したFlashとJavaScript

インターネット上にホームページがたくさんあるように、僕が住んでる福岡にもweb制作会社がたくさんある。
とか言ってみたものの、どんな会社があるか思い出せないので、備忘録として10個だけまとめてみた。

デフィデ
福岡じゃ一番大きい仕事をしてる制作会社。
[主な実績] ぽちっとアスクル, シャープ ブルーレイディスク特設サイト
ディーゼロ
すっきりとしたデザインをする制作会社。舞鶴に居を構える。
[主な実績] アクロス福岡, 福岡コンベンションセンター
九州インターメディア研究所
福岡の真ん中、天神イムズに入ってる制作会社。
[主な実績] イムズ, KBC|九州朝日放送
福博綜合印刷
webもやってる印刷会社。
[主な実績] ピエトロ, イオン九州オンラインショッピング
コマーシャルアーツ
博多駅近くの制作会社。自社サイトが素敵。本社は下関。
[主な実績] 山口銀行, 株式会社原弘産
エーワン
大名の制作会社。ホテルサイトを多く手がけている。
[主な実績] グランド・ハイアット・福岡, ハイアットリージェンシー福岡
イットジャパン
これまた大名の制作会社。なんか黄緑。
[主な実績] 三好不動産
インク
警固にある制作会社。最近、サイトがリニューアルされた。
[主な実績] 太宰府天満宮
ウェブ・ワークス
東京本社の制作会社。最近、会社が住吉に移転したらしい。
[主な実績] 三光マーケティングフーズ 2008年度新卒採用サイト
天神コアラ
天神の制作会社。福岡が見渡せる立地が最高。
[主な実績] 福岡市動物園

以上、とりあえず10の制作会社を列挙してみた。
普通に暮らしている人にとって、webをつくっている会社を意識することなんかないと思うけど、webでメシを食っている僕にとってはかなり気になるところ。
いやあ、改めて見るといろんな会社があるね。気が向いたら第2回も書いてみることにします。

webデザイナーやってます。始めてまだ1年だけど。

前は設計の仕事をしていた。強度計算とか成形性の検討とか、その他もろもろ。
なんてことを話すと「設計ってことは、図面とか書いてたんですか?」なんて聞かれる。

確かに図面も書くけど、それ以外の仕事の方がずっと多い。
感覚でいうと、図面を書く仕事は全体の3割。
じゃあ、それ以外の時間は何をしていたのかというと、ほぼ打ち合わせ。そして、現場。

一度でも『ものづくり』をしたことのある人は分かると思うけど、作る「もの」のことがよーく分かってないと、いいものは作れない。

たとえば、映画の字幕が読みやすいのは、翻訳を担当した人がその映画についてよく理解しているから。
もし、この字幕がエキサイト翻訳あたりの全文翻訳システムで自動的に作られるとしたら...。考えただけでもゾッとする。

話を設計の話に戻そう。
設計に入るとき、まずはその製品について理解するところから始めていた。

・その製品は誰が使うのか?
・その製品をいつ使うのか?
・その製品をどこで使うのか?
・その製品をどうやって使うのか?
・その製品によって、どういう嬉しさがあるのか?

いわゆる「5W1H」。ものを「考える」・「伝える」ときの基本である。

それに加えて、設計の仕事には
・どうやって作るのか?
・作ったものをどうやって運ぶのか?
なんてことも考える必要がある。そう、考え出すとキリがない。

設計の仕事には「打ち合わせ」と「現場」が多いって書いたけど、それは現場に出て製品のことを理解する時間。そして、その考えを共有するために、関係者で打ち合わせをする時間なのだ。
この時間を削ってしまうと、たいていいいものは生まれてこない。

ここでやっと、エントリーの答え。

「僕がwebデザイナーを志した理由」は、この福岡という街で「ものづくり」に携わりたかったから。それがすべての出発点。

工作したり、絵を描いたり、つくることに夢中だった少年時代。学生時代を過ごした大好きな街、福岡。この地で「つくる仕事」に携わるため、この仕事を選んだ。

お世話になった福岡に、デザインを使って恩返しする。その成果を形にできるのは、いつのことになるだろうか。これまでに培った「ものづくり」の経験を活かしながら、少しずつその目標に近づいていきたい。

 1  |  2  |  3  |  4  |  5  |  6  |  7  |  8  |  9  |  10  |  11  | すべての記事