blog home
- 「mootools」のタグキーワードで表示しています
- これ以上前のページはありません
- これ以上次のページはありません
- ブログメニュー
- カテゴリー+タグ一覧へScroll
- コメント&トラックバック一覧へScroll
DSN wants more
及川です。今日はjavascriptとwordpressを使ったマルチカラムのサンプルをご紹介したいと思います。
オフィシャルサイトはひとつのアイデアを元につくられたコンセプトモデルであり、また会社の顔ということで使い勝手や構築なども考慮しながら、あれやこれやとトライ＆エラーの繰り返しでノウハウやデータが取れる貴重な役割を持った場となっています。Flashはとりあえず使わない！というのもひとつのテーマとしてあがっていますが、今回はその中でも、もうひとつのアイデアを元に作成したコンセプトモデルの紹介です。
LINK: マルチカラム DSN version
※推奨環境はsafariでの閲覧です（IEでは構築が遅いです
※マウススクロールで切り替わります
個人的にはこれからの注目はマルチカラムじゃないのかなと思っています。一覧性を保ちつつ、設計によっては紙媒体並みの表現力と画面幅に依存しないで使える(いまはワイド画面も多いため)という期待を込めての考えです。すでにFireFoxやSafariではCSS3のモジュールを使った機能は実装されていますが、あまり見かけない現状もあって今回実験的に作成してみました。このあまり見かけないという原因は、画面サイズと文章量によって高さなどが不特定になり、場合によっては左カラムの終わりまでスクロールしたあと、右カラム、つまり画面上まで戻って見る必要があるということがひとつの原因となっています。これを自動的に画面サイズから高さを割り出し、均一に割り振るのが今回のサンプルです。
またProgressive Enhancementという考えも出てきていますが個人的にはjavascriptを使うことによって、各ブラウザでも対応した形を取ることもできるんじゃないかと考えています。もちろん同じ見た目を維持する必要があった場合の処置ですが、この辺の考えを「デザインする人」ことcouldの長谷川さんのところでアンケートを取っている模様です。結果が気になるところでもありますし、皆さんもアンケートにお応えしてみてはいかがでしょうか。
いまのボクの周りには秦さんやしげさんを中心に貴重な意見をもらえる環境がそろってきていますが、やはりユーザーの声はもっと聞きたいですし、またここから発展したものがでてきたらうれしい限りです。今後こういったサンプルはスクリプトの軽い解説を含めてまとめたものをコラムなどにして公開できたらと思っています。honeyee.comやnuan+で採用されないかなぁ。
link: http://www.thedesignium.com/blog/design-art/1480
autor: oikawa comment: 0件
tags: javascript, mootools, Webデザイン, WordPress
みんなが大好きjQuery
2009.03.02 - スキル
ということで今回はjavascriptの話しです。タイトルの通りjQueryはGoogleを含む大手企業やWordpressなどにも組み込まれており、探してみれば割とすぐサンプルなどを見つけることが出来ると思います。ですので、僕のところではjQueryではなく、mootoolsというライブラリを使ったサンプルなどを紹介していく予定です。
ちなみにjQueryにはnoConflictという他のライブラリとの共存を前提とした特別な関数があります。今後mootoolsを使って紹介していくサンプルもjQueryに限っては同時に使えるようになっているかもしれません。また他のライブラリを使用している場合でも、コードの書き方が若干変わることになりますが、mootoolsでのサンプルとほぼ同様なことができると思います。では、長くなりましたがそろそろ本題に。
今回紹介するのはjavascriptの実行タイミングを制御するスクリプトです。これはどんなものかというと、例えばですが、「ページトップに戻る」などのボタンに、クリックで画面上部までスクロールする効果を設定したいとします。このとき、実行命令を促すためのイベント（クリックやマウスオーバーなど）をボタンに設定しておきたいのですが、このイベントはボタンが準備できた段階（要素としてアクセスができる段階）にならないと設定することができません。ここでこれを回避するためにonloadやaddEventなどを使って、各要素へアクセスできる段階にしてからイベントを設定していく形を取っていきます。
しかし通常、HTML要素が全て読み込まれていない段階でもブラウザでは随時レンダリングが行われていき、表示がされるようになっています。先ほどの「ページトップに戻る」のボタンも表示されていくわけですが、ここでページ全体の量が多く、読み込みが長かった場合、ボタンへのイベントが設置されていない状態（クリックしても動作しない状態）で表示する形になってしまいます。ユーザーにはボタンとして見えているのに、クリックしても動作しないというのは紛らわしい問題ですので、この実行タイミングを見計らってからユーザーが操作できるようにするのが今回のサンプルです。
▼Javascriptの実行タイミング制御サンプル
» http://www.thedesignium.com/sample/cover/
このサンプルは「読み込み中」などの文字を添えて、788kbの”brgr.png”画像を含む全てのHTMLがレンダリングされるまでページ全体を要素”cover”で覆っておく形になっています。
▼javascriptの流れ
01. windowにイベントを設定
head内でライブラリを含むjsファイルを読み込み、イベントとして”domready”,”load”,”mousewheel”,”resize”の４つを設定していきます。各イベントの実行タイミングは以下の通りです。
• domready
HTML要素が準備されたとき関数”Dsn.dominit()”を実行
• load
HTML要素が読み込まれた後、関数”Dsn.init()”を実行
• mousewheel
マウスホイール時に関数”Dsn.resize()”を呼び出して要素”cover”のサイズを変更
• resize
ブラウザのリサイズ時に関数”Dsn.resize()”を呼び出して要素”cover”のサイズを変更
※イベント”domready”と”load”の違い
“domready”は画像を含まない全てのHTML要素が準備されたとき（操作できる段階になったとき）に実行され、”load”の場合は画像を含む全てのHTML要素がレンダリングされた後に実行されます。
02. 新しい要素”cover”を作成
body内にjavascriptを書いて要素”cover”を作成します。このとき各プロパティ（id名、スタイル、不透明度など）も設定し、全体を覆う形でbody内に設置します。
03. 各イベントを実行
01で設定したイベントを実行していきます。”Dsn.dominit()”では読み込んだ画像”brgr.png”にリンクをつけ、また”Dsn.init()”では”Dsn.coverFunc()”を呼び出し、要素”cover”を不透明度０にしてから要素ごとbody内から取り除いています。
Link: 今回のサンプルデータ.zip
link: http://www.thedesignium.com/blog/skill/1054
autor: oikawa comment: 0件
tags: javascript, mootools, Tips
-
01:
-
02:
-
03:
-
04:
-
05:
-
06:
-
07:
-
08:
-
09:
-
tg:wevy(38) wevyムービー(22) イベント(21) 待ち受けFlash(16) Flash(15) 地域(12) Tips(11) ミズタニキリンのクレイジーセンサー(7) SNS(6) javascript(6) 会津大学(5) wevy待ち受け特集(5) mixiアプリ(5) WordPress(5) wevy週間ランキング(5) Webデザイン(5) アート(4) 社内教育(4) phidgets(4) センサー講座(4) 会津しこん(4) HTML/CSS(3) actionscript(3) レイアウト(3) webアプリ(3) WEBユーザビリティ(3) 地域、会津(3) GAINER(2) CSR(2) wiimote(2) mootools(2) DSN(F)シリーズ(2) Wii(2) 会津漆器(2) マルチタッチディスプレイ(2) 取材(2) 福島県(1) OpenSocial(1) ハッカソン(1) 音楽(1) 会津若松(1) Movable Type(1) UI(1) AR(1) Processing(1) Joomla(1) Google App Engine(1) ドット絵(1) GAE(1) 会津 データ(1) DROP BURGER(1) 地域性(1) ワークライフバランス(1) 夢(1) API(1) concept(1) AIR(1) 映画(1) 新人研修(1) DSN Player(1)
- 2010.1.20:
- 2009.11.26:mixiアプリモバイル作成前に見ておくべき10のまとめLink
ミズタニキリン：
下記(A)、(B)より80～90%の機種はFlash lite 2.0に対応しているという結果になり「mixiのユーザー層にFlash lite... - 2009.11.24:
- 2009.10.10:
- 2009.10.6:
- 2009.12.10:センサー講座 Spe.001 Wiimote WhiteboardLink
お金と知識のない学生が努力と根性で作ったもの
from アナリハ
この前の１０月・１１月に定期的にプレゼンをする事になった。... - 2009.10.27:
- 2009.9.4:越後妻有アートトリエンナーレ 大地の芸術祭2009（前編）Link
ブログ | The Designium - デザイニウム
from 越後妻有アートトリエンナーレ 大地の芸術祭2009（後編）
越後妻有アートトリエンナーレ... - 2009.9.4:越後妻有アートトリエンナーレ 大地の芸術祭2009（後編）Link
ブログ | The Designium - デザイニウム
from 越後妻有アートトリエンナーレ 大地の芸術祭2009（前編）
越後妻有アートトリエンナーレ... - 2009.6.25:若手向けの勉強会企画してみました。Link
[勉強会]みちのくIT会議ってのが福島であったようだ。
from 笑う角でずっこける。
まぁ、タイトルでまとまってしまったけど…。 初めて聞く名前だったので情報を集めてみた。...