javascriptブログ | The Designium

blog home

「javascript」のタグキーワードで表示しています
これ以上前のページはありません
これ以上次のページはありません

「javascript」タグのエントリー一覧
Javascriptパウワァ&ドラッグ機能の改善ついてScroll
DSN wants moreScroll
Webページで角丸のボックスを作る方法あれこれScroll
WebアプリのセキュリティScroll
AJAX Libraries APIScroll
みんなが大好きjQueryScroll

ブログメニュー
カテゴリー+タグ一覧へScroll
コメント&トラックバック一覧へScroll

Javascriptパウワァ&ドラッグ機能の改善ついて

2010.02.16 - スキル

及川です。今日2個目の投稿になりますが、ここ最近まったくJavascriptの話題を挙げていませんでしたので、ひとつ投稿してみたいと思います。

LINK: Chrome Experiments - Not your mother’s JavaScript

GoogleからショーケースとしてJavascriptを使ったデモが公開されています。見てみた感じChromeやSafariでのパフォーマンスはとてもすごいですね。物理シュミレータをつかってもこれだけ快適に動くなら今後もっとおもしろいものが出てきそうです。また最近はHTML5の話題もあり、jQueryとcanvasタグを使った画像の空白に対するテキストの回り込みなど、個人的に胸が熱くなるようなネタも所々に出てきています。

以前社内の会議にて自分はFlashよりJavascriptをやっていきたいということを伝えたときは、「いまどき珍しいねぇｗ」と社長に軽く笑わたりとしたわけですが、まあ何が言いたいかというとFlashもいいけどJavascriptも何気にすごいんじゃね？ということを伝えたかったわけです。

とりあえずどうでもいい話は置いておいて、少し手を加えたドラッグ機能について話してみたいと思います。

主な改善点として、リンクをクリックしながらドラッグしたときの判別処理を追加したことと、ドラッグ機能をつけたことでテキストが括れないという訳がわからない点を修正したものが下記サンプルです。

SAMPLE: DSN | Drag.Function

最初の点ではドラッグの際、移動したいのかリンク先を開きたいのか、iPhoneっぽく距離から判別するようにしました。例ではリンクを押して半径30pixel以上の移動であればクリック解除、それ以内であればクリックでアラート、という感じになっています。

またテキストが括れる括れないについてはその都度ドラッグ機能を解除することで括れるようにしました。ちゃんとつくればPhotoShopの手のひらツールのようにスペースを押していた場合にはドラッグ、なんてことも可能だと思います。

なんでいまさらドラッグ機能？と思うかもしれませんが、話題の対象にiPadがあったので、あの操作性の一部でも通常のブラウザでも試せたらいいなぁ、という感じでつくってみた限りです。

link: http://www.thedesignium.com/blog/skill/2219
autor: oikawa comment: 0件
tags: javascript, UI

DSN wants more

2009.05.27 - スキル, デザイン/アート

及川です。今日は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

Webページで角丸のボックスを作る方法あれこれ

2009.04.16 - スキル

角丸ボックスはWebデザイン、特にブログのデザインなどで良く使われる手法です。デザインの「デフォルト臭さ」を軽減する方法としては非常に効果的で、デザインに柔らかさを出したい時は、とりあえずボックスを角丸にしてみると上手くいく事が多いです。

角丸ボックスを実現するには、通常のコーディングに一手間加える必要があるので、やり方が分からないとちょっと手を出しづらいところがあります。この記事は、角丸ボックスの実現方法を解説することで、角丸導入の敷居を少し下げようという趣旨で書いています。

角丸ブロックを実現する方法としては、画像とCSSを組み合わせる方法、Javascriptのライブラリを使う方法、CSSの拡張要素を使う方法の3種類があります。下記でそれぞれの手法の解説をしていきたいと思います。

画像とCSSで角丸を実現

これは最も古典的な手法です。CSSがメジャーでなかった頃は、テーブルを3×3マスで切って、四隅に角丸画像を配置する、という方法が良く採られましたが、それをそのままCSSで再現するような方針です。つまり、ブロックの角にそれぞれ角丸の画像を配置するようにマークアップ＆CSSコーディングを行います。

CSSで同様の表現をするには、以下のようなマークアップをします。

<div class=”block”>
　 <div class=”block_head”>
　　 <span></span>
　 </div>
　 <div class=”block_body”>
　　ここに本文が入ります。
　 </div>
　 <div class=”block_foot”>
　　 <span></span>
　 </div>
</div>

このマークアップをビジュアルで表すと以下の通りになります。block_head、block_footにはマークアップのみで文字などは入りません。
block_head内を拡大したものが右側ですが、この場合左上の角をblock_head要素の背景画像、右上の角をspan（divでも可）の背景画像として指定します。

CSSファイルの内容は以下のようになります。

.block {
background-color: #背景色;
}
.block_head {
height: 角の大きさ.px;
background: url(’┏.gif’) no-repeat top left;
}
.block_head span {
display: block;
height: 角の大きさ.px;
background: url(’┓.gif’) no-repeat top right;
}
.block_body {
color: #文字色;
}
.block_foot {
height: 角の大きさ.px;
background: url(’┗.gif’) no-repeat bottom left;
}
.block_foot span {
display: block;
height: 角の大きさ.px;
background: url(’┛.gif’) no-repeat bottom right;
}

Javascriptライブラリを使って角丸を実現

前述の画像を用いる角丸ボックスでは、HTMLにイレギュラーなマークアップを施さなければならない欠点があります。コードを汚さずに角丸を実現したい、という方には、Javascriptライブラリを用いた実現法をオススメします。

この方法では、HTMLのマークアップを崩さずとも、ライブラリを読み込んで少しJavascriptを書き加えることで、Webページの望んだ箇所に角丸コーナーを設置することが可能です。こういったライブラリはすでに数多く作られており、検索するといろいろなライブラリが見つかると思いますが、個人的にオススメなのがNifty Corners Cubeというライブラリです。

Link： Nifty Corners Cube

自分もこの手のライブラリはいろいろ試しましたが、このNifty Cornersが一番自由度が高く、且つコードを汚さない角丸ライブラリと思います。このライブラリの特徴は、画像を別途用意せずとも角丸を適用でき、しかも適用箇所を細かく指定できるという事です（左上隅だけ丸める、ということが可能）。
適用箇所・オプションを指定したJavascriptを書く必要がありますが、そのスクリプトを読み込ませることで、HTMLに細工をせずとも自動的に指定のブロックに角丸を適用してくれます。

リンク先にもありますが、具体的には以下のように記述します。これは「id=”box”」を指定したブロックに大きめの角丸を指定する場合の記述です。

<script type=”text/javascript”>
window.onload=function() { Nifty(”div#box”,”big”); }
<script>

これをページのヘッダ内、もしくは外部jsファイルに記述し読み込ませます。
スクリプトのオプションを追加する場合は、オプションを半角スペースで区切ります。以下の例は上記のボックスの上辺（左上と右上）だけに角丸を適用します。

<script type=”text/javascript”>
window.onload=function() { Nifty(”div#box”,”big top”); }
<script>

ブラウザごとのCSSの拡張要素を使って実現

この方法はここで述べている手法の中でも一番簡単で、且つValid（W3C規格に則っている）なのですが、Firefox・Sarafi・Chrome以外のブラウザでは使えないという大きな欠点があるため、なかなか採りづらい方法です。
ただし、厳密に全てのブラウザでの表示の整合性を取る必要が無いケース（個人ブログなど）では、導入が簡単という事もあるので試してみる価値はあると思います。

ブロック要素に拡張CSSを使った角丸指定をする場合、以下のCSSを記述します。

Firefoxの場合：
-moz-border-radius: 角の大きさpx;

Safari（Google Chrome）の場合：
-webkit-border-radius: 角の大きさpx;

両方記述しておけば、Firefox・Safari両方に適用されます。またかなり特殊な手法になりますが、IE系ブラウザでも同様にCSSのみで角丸を指定する方法があるようです。かなり力技なので、個人的にはこれを使うよりは前述のJavascriptを使う方をお勧めしたいです。

このborder-radius要素は次期のCSSの規格であるCSS3では正式に盛り込まれる予定であり（現在はCSS2.1が主流）、CSS3が策定完了し本格的に出回るようになれば、将来的にはIE系ブラウザでもサポートされるようになるでしょう。具体的にはこんなことが出来るようになる予定です。

link: http://www.thedesignium.com/blog/skill/1301
autor: sakuma comment: 0件
tags: javascript, Tips

Webアプリのセキュリティ

2009.04.14 - CMS, スキル, デザイン/アート

初めまして横山です。来年度入社予定です。

さて、今回はWebアプリケーションにおけるセキュリティの話です。コミュニケーションツールとしては掲示板・Blog・SNSなどがありますが、不特定多数のユーザーが書き込み可能という点においてはどれも共通しています。ユーザーのメールアドレスが登録されている場合も安心ではありません。セキュリティ対策を行わなかった場合、「他のユーザーになりすまして書き込み」、「データベースに保存されているデータを消去」、「認証すりぬけ」などの被害が予想されます。

一から開発する場合、セキュリティ対策はかなり時間のかかるものとなってしまいます。フレームワークを利用すればよいのかもしれませんが、独自仕様を習得する必要があります。そこで利用したいのがオープンソースです。Blogの場WordPressやMovable Type、SNSの場合OpenPNEが代表されます。ソースが公開されているので、セキュリティ対策がしてあります。必ずしも完璧ではありませんが、問題があった場合に開発側が対策パッチをリリースしてくれます。後はパスワード管理、フォルダのパーミッションくらいに気をつけるくらいでしょうか。サーバーを独自で持っている場合は、それのセキュリティ対策も重要ですが。

OpenPNEは、どの攻撃方法に対応しているのか公開しています。>>OpenPNEセキュリティ対策攻撃方法自体はこれだけではありませんが、この対策をしていれば残りの方法でも攻撃できません。ただしユーザーの利用に制限が出てしまいます。現在も日記を書く際にHTMLタグでの装飾はできません。これの対策としてBBコードを採用し、簡単な装飾が可能になっています。BBコードはもちろん安全ですが、WYSIWYGエディタは採用されていないようですので、結果を想像しながら装飾しなければなりません。(一応FCK Editorに変更すればBBコードの一部でWYSIWYG編集ができ、プラグインで対応するコードを増やす事もできるようです。)「セキュリティ」と「ユーザーの自由度」のバランスは難しいものですね。

link: http://www.thedesignium.com/blog/design-art/1294
autor: yoko comment: 0件
tags: javascript, SNS, webアプリ, WordPress

AJAX Libraries API

2009.04.03 - スキル

最近は80kidzな日々の及川です。五月病先取りで更新が滞っていましたが、この辺でまたJavascriptの話題をひとつお届けしたいと思います。

Googleから提供されているAJAX Libraries APIの紹介です。
Link: AJAX Libraries API
Link: Developer’s Guide - AJAX Libraries API

これは簡単に言うとjQueryやPrototype、MooToolsなどのJSライブラリをホスティングしてくれるサービスです（versionの指定まで出来るとのこと）。ドキュメントに目を通してもらうのが一番いいのですが、リクエストを送る形で呼び出していますので、ひとつのライブラリの使用のみなら特に使う必要がないかもしれません。また最初のライブラリをロードした後、次のライブラリをロードする形になっていますので、かなり多数のライブラリを読み込むときにはdocument.writeによるJSファイルの並列読込みを試してみるのも面白いかもです。

一応どちらも非同期ですので、コールバック関数など書き方には注意が必要だと思いますが、Google Mapsや検索などとのマッシュアップを考えた場合にはとてもいいのではないでしょうか。

link: http://www.thedesignium.com/blog/skill/1168
autor: oikawa comment: 0件
tags: API, javascript

みんなが大好き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

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
:
mixiアプリモバイル作成前に見ておくべき10のまとめLink
suzukimilanpaak：
お返事が遅くなってしまい大変申し訳ございません。ご丁寧な回答...
2009.11.26
:
mixiアプリモバイル作成前に見ておくべき10のまとめLink
ミズタニキリン：
下記(A)、(B)より80～90%の機種はFlash lite 2.0に対応しているという結果になり「mixiのユーザー層にFlash lite...
2009.11.24
:
mixiアプリモバイル作成前に見ておくべき10のまとめLink
suzukimilanpaak：
(2)FlashLite2.0での開発がオススメについて質問させてください。mixi�...
2009.10.10
:
ミズタニキリンのよくある質問Link
ミズタニキリン：
ごめんなさい。ゴーキのミズタニではないです。ゴーキってゴーキ美術研究所のことですよね？はちゃめちゃな妹は確かゴーキに行...
2009.10.6
:
ミズタニキリンのよくある質問Link
キョン：
ひょっとしてひょっとするとゴーキのミズタニさんですか？間違ってたらごめんなさい。

2009.12.10
:
センサー講座 Spe.001 Wiimote WhiteboardLink
お金と知識のない学生が努力と根性で作ったもの
from アナリハ
この前の１０月・１１月に定期的にプレゼンをする事になった。...
2009.10.27
:
11/7 CSS Nite in 新潟開催!Link
ブログで紹介いただきました。
from CSS Nite in NIIGATA
デザイニウムブログ
2009.9.4
:
越後妻有アートトリエンナーレ大地の芸術祭2009（前編）Link
ブログ | The Designium - デザイニウム
from 越後妻有アートトリエンナーレ大地の芸術祭2009（後編）
越後妻有アートトリエンナーレ...
2009.9.4
:
越後妻有アートトリエンナーレ大地の芸術祭2009（後編）Link
ブログ | The Designium - デザイニウム
from 越後妻有アートトリエンナーレ大地の芸術祭2009（前編）
越後妻有アートトリエンナーレ...
2009.6.25
:
若手向けの勉強会企画してみました。Link
[勉強会]みちのくIT会議ってのが福島であったようだ。
from 笑う角でずっこける。
まぁ、タイトルでまとまってしまったけど…。初めて聞く名前だったので情報を集めてみた。...

TheDesignium