jsライブラリで実装する効率的なWeb制作(Web標準の日々)

このエントリーをはてなブックマークに追加

7/15に東京で行われたWeb標準の日々で公演を行いました。

公演した内容は

jsライブラリで実装する効率的なWeb制作

空前絶後のJavaScriptブーム!『jsライブラリ』に焦点を絞りお話しました。

音声データ、スライドデータはCSS Nite公式ブログより公開されるので少々お待ちください。

事前にデザイナーさん数人に「JavaScriptで何を聞きたい?」と聞いたところ『DOM』と『jsライブラリ』という声が多かったです。

JavaScriptブームを語る上で欠かせない2つのキーワードのようですね。

『DOM』に関しては中村享介さん羽田野太巳さんがお話されるだろと思い、私は『jsライブラリ』をチョイス。

あまりJavaScriptの難しい話ではなく、JavaScriptを覚えなくても、これだけWebサイトをインタラクティブにできるよ、効率的なWebサイトが作成できるよ、という感じの内容です。

最後のグループディスカッションは、『どのようなライブラリがあれば、あなたの仕事は効率的になりますか?』とのテーマで、各グループから色々なアイデアを出してもらいました。

グループディスカッションで出たライブラリは、以下にまとめてあります。(たにぐちさん、ありがとうございます。)

悩みを共有、明確化にするだけでも普段の業務に影響を及ぼすのでないでしょうか?

意外と皆さん同じようなことで悩んでいるんですね。

ライブラリは、できるものから少しづつ作成していきますので。
(一緒に作っていただける方は大歓迎です♪)

効率よく伝えれる仕組みを構築しておりますので少々お待ちください。

来場いただいた皆様、改めてありがとうございました。

PS:プレゼン中、Spry frameworkのことを『スプレイ』と叫んでいましたが『スプライ』の間違いです。アドビシステム林岳里さんよりご指摘いただきました。スミマセン

関連エントリー

CSS Nite in Osaka Vol.4(感想)
Web標準の日々
CSS Nite in Osaka Vol.3(感想)
CSS Nite in Osaka Vol.3 & premium
CSS Niteをtwitterで楽しむスクリプト
CSS Nite in Osaka 2007 春の陣(感想)
CSS Nite in Osaka 2007 春の陣 前夜祭(感想)
CSS Nite in Osaka 2007 春の陣 前夜祭
CSS Nite in Osaka 2007 春の陣
CSS Nite in Osaka Dreamweaverの作業効率を高める小技30発 by 鷹野雅弘
CSS Nite in Osaka エコなWebデザイナーになろう by 長谷川恭久
CSS Nite in Osaka ザ・ルールズ・オブ・スタイルシート by 益子貴寛
CSS Nite in Osaka 前夜祭 in Apple Store 心斎橋
CSS Nite in Osaka
Web標準の日

スポンサードリンク

«ページ内リンクをスマートにするsmoothScroll.js | メイン | CSSでロールオーバーもどき»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/1255
トラックバック内容
» Web標準の日々 J3 jsライブラリで実装する効率的なWeb制作 from ProjectDD Blog
jsライブラリで実装する効率的なWeb制作 西畑 一馬さん JavaScrip...
コメント

Web標準の日々おつかれさまでしたー。
これらのウォンツをすべて押さえられたらすごいですね笑

個人的になんですけど、先日のスクロールのライブラリとかだと
他の同種のライブラリと比べて「どう違うのか」っていうのがわかると
「西畑さんの使おう!」っていう感じになるかもしれないです。

あとは~把握している限りで、対応しているブラウザとかも分かると
実務で使っちゃうかもしれないです笑

投稿者:hiloki | 2007年7月18日 00:03

はじめまして。Web標準の日々で西畑さんのセッションを受講しました。
私はデザイナーなのですが、javascriptをよく理解できないままに、今までjsライブラリを使ってみて、うまくいかなかった経験があります。今回のセッションでは「あーあの時はこういう原因でうまくいかなかったのねー」と思い当たることが色々。今後使用するときの注意点もよく分かりました。西畑さんにはほんと、「多謝!!!!!」です。

投稿者:sakai | 2007年7月24日 20:32

>hilokiさん

コメントありがとうございます。

スクロールのライブラリは調べて出てきたライブラリが商用不可だったので作ってみたんですよ。
(正確には会社の後輩が作ったのをボク流にアレンジしたのですが)

ボクのライブラリの特徴としては『設置が簡単』に注力してるのが多いと思います。

その分、スクロールスピードをいじるとかの他のライブラリができる機能の拡張は、かなりそぎ落とされてますw

投稿者:西畑 | 2007年7月26日 01:45

>sakaiさん

セッションご参加&コメントありがとうございます。

デザイナー視点のセッションになるよう、心がけたのでそういっていただけいるとうれしいです。

いままでデザイナーさんより受けた質問などが、セッションの内容にかなり含まれてますので、疑問・質問などあったらお気軽にしてくださいね。

それでは、よろしくおねがいします。

投稿者:西畑 | 2007年7月26日 01:50

こんにちは。

最近エラスティックレイアウト(widthをem指定でズームっぽくするレイアウト)を研究していたのですが、気になる点がありました。

メインとサイドをフロートしているとします(どちらのブロックもエラスティック採用)。

サイドに画像を配したいとき、文字サイズを小さくすると、サイド全体の横幅が狭まるので、画像を表示しきれずにサイドブロックが落下します。実際にはあまり小さくするケースはないと思いますが、ちょっと気になります。

このとき、画像の最大widthなどを取得して、サイドのwidthを上書きして、サイドの落下を防げないでしょうか。もしくは、適当なmin-widthを設定できないでしょうか。

私が以前入手したIEでmin-width、max-widthを実装する簡単なスクリプトを、pxからemに変えて適用してみたのですが、もうその修正自体でmin, maxが効かなくなってしまい、自力では解決法がわかりませんでした。

そんなスクリプトがあったら、重宝すると思いましたので、ご相談してみました。

よろしくお願いいたします。

投稿者:非JS使い | 2007年9月29日 17:27

>非JS使いさん

以下のライブラリがemでのmax-widthやmin-widthに対応しております。
minmax.js

ただ、個人的にはエラスティックレイアウトの際には画像に対しても%かemでwidthを指定するのがよいのではないかなと思ったりもします。

投稿者:西畑一馬 | 2007年10月 4日 22:31

西畑様

「minmax.js」の情報ありがとうございます。
さっそくJSをさしかえました。

画像にem指定というのは思いつきませんでした。
さすが、、、というか、発想力の柔軟性に感嘆しています。
emといったらテキストの文字数制御、という固定観念しかなく。

ところで、西畑様作成のJSは、いくつかお気に入りができています。
でも、すべてをヘッダに書くと記述量が増えてしまうという問題がでてきました。
最終的に「nishihata.js」みたいなライブラリ集が出てくれることを希望しています。

投稿者:非JS使い | 2007年10月 9日 19:26
コメントを投稿