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