とある案件で作る必要があったので、それをカスタマイズしてjQueryプラグインの形にしてみたのが今回作成したdragreplace.jsです。
できることはシンプルで、ドラッグ&ドロップで要素を入れ替えられるようにしました。ただ、主にスマホ(WebKit)で使うことを想定して作っています。
そのため動作はWebKitだけになっています。（transitionやtransformを使って操作しているため）
pluginについてはgithubでも公開しています。
jsdo.itでデモを公開しています。それを貼りつけたのがこちら↓
(WebKit系のみ対応しているので、WebKit系ブラウザでご覧ください)
dragreplace.js demo - jsdo.it - share JavaScript, HTML5 and CSS
動作は単純です。右側にある部分をドラッグすることで、該当の要素と入れ替えることができます。
jQueryのpluginの形になっているので以下のように指定するだけで簡単にdrag&dropで入れ替えができます。
jQueryのセレクターで指定した要素でグルーピングされるので、グループ外の要素とは置換されなくなります。
要素の置換にはtransitionを利用してアニメーションされるようにしているので、どことどこが入れ替わったのかが視覚的にわかりやすくなっています。
draggerオプションをfalse（デフォルトはture）にすることで、要素全体をドラッグ対象にすることができます。
trueの場合は指定した要素の右側にドラッグするための要素が自動で追加され、そこをドラッグすることで要素の移動ができるようになります。
dragreplace.jsでは、置換完了時にカスタムイベントreplacedを発火しています。
置換完了時になにか処理したい場合にこのイベントをlistenしてください。
また、イベント発火時にはそれぞれ置換された要素の参照が渡されます。(fromとtoをプロパティに持つオブジェクト）
dragreplace.jsは、ドラッグ中や置換対象などの見た目をCSSで制御しています。その際に使用しているクラスは以下の通りです。
| クラス名 | 利用説明 |
|---|---|
| replaceable | replaceableを実行すると、対象となる要素に自動で付与されます。見た目の変更はありません。 |
| dragging | ドラッグ中に、ドラッグ元の要素に付与されます。ドラッグされていることを明示的にする目的で使用されます。 |
| dragTarget | ドラッグ中に、マウスや指に追従する要素に付与されます。要素自体はドラッグ元の要素の複製になります。 |
| hit | ドラッグしている要素が置換対象にヒットしているかどうかの当たり判定です。当たり判定がtureの場合にhitクラスが付与されます。 |
| replaceItemMove | 置換実行時、相互に要素が移動しているときに付与されるクラスです。要素自体はそれぞれの要素の複製になります。 |
ゲーム自体は以前作ったものをそのまま使いました。
以前作ったものをカスタマイズして、弾を打つ部分と自機を移動する部分を、関連付けたスマホから操作できるようにしてみたものです。
これはあくまでアイデア、ってことで快適にプレイできるまでは作りこんでいません(; ´Д`)
ただ、特にプラグインなどを使わずともここまでできる、というのは非常に面白いなと思いました。
今回、WebSocket部分はNode.jsを使って実装しました。
最近Node.jsにハマりすぎてプライベートではNode.jsしか触ってませんｗ
やはりサーバサイドとクライアントサイドが同じ言語、というのはとても実装しやすいですね。Node.jsおすすめです。
ちなみに最近、Node.js関連については別ブログで記事を書いてます。まだ全然記事数が少ないですが、興味がある方はぜひ。→ EBLOG Branch
簡単に機能を説明すると、Node.jsのSocket.IOモジュールを使ってWebSocketを使えるようにします。
その後、Socket.IOのversion0.7? から追加されたnamespaceを使ってPCで見ている画面とスマホ画面を結びつけます。
最初にPCでアクセスするとスマホでアクセスするためのID入力が求められるので適当なアルファベットでIDを入力します。
するとそのIDを元にスマホでアクセスするURLが表示されるので、そのURLにスマホでアクセスします。
すると画面には「tab to shoot!」という文字しか出ませんが、タップで弾を発射、加速度センサーで自機の移動ができるようになります。
横向きに持ち、左右に傾けることで自機を動かすことができるようになっています。
若干タイムラグが発生しますが、ゲーム画面のコントローラとしてスマホを使うのは面白なーと思って作ってみました。
※まだ全然調整していないので、Androidでは動いてません。現状はiOSオンリーです。
久々にJavaScriptライブラリを作ってみました。その名も「frick-image.js」。
まずは下のデモを見てもらうと、どんなものか分かると思います。ちなみに、アニメーションを実装しているのはFirefoxとWebKit系（iOS、Android含む）のブラウザのみになります。それ以外は、ドラッグ可能なことと、あふれた要素を強制的に定位置に戻す機能のみとなります。
iOSのフォトビューワのような動きを実装する - jsdo.it - share JavaScript, HTML5 and CSS
使い方は簡単です。写真を内包するコンテナになる要素(*A)と、その中に写真を含むボックスのふたつの要素(*B)を用意し、以下のようにスクリプトを実行すればOKです。指定するのは、コンテナではなく、Bの方の要素のID（やクラス）を渡します。指定方法はjQueryで指定できる方法で指定することができます。
最近あまりに忙殺されているえどです。こんにちわ。
いやほんと、平日なにもする時間がありません。なので、手短に書きたいと思いますｗ
普段制作をしていると、その場でさっと CSS をとりあえず追加してみて、動きがどうなるか見てみたいな、と思うことはありませんか？
それが IE6 ならなおさら。しかも保存した CSS がサーバに反映されるまで多少のタイムラグがあった日には反映されたのを見るまでなにもできません。（もちろん、ローカルのファイルを参照させて開発する、なんてこともできますが、とにかくちょっと今ここで！ っていうのってなにげにあるんですよね）
んで、新しい PC になって特にそう思うことがよくあったので、それならいっそ、とブックマークレットを作ってみました。
作りが違うんで、IE 用とそれ以外のブラウザ用で分けてます。
そして下のやつがその作ってみたブックマークレットです。
CSSを手軽に追加するブックマークレット(IE6対応) - jsdo.it - share JavaScript, HTML5 and CSS
使い方は簡単です。
コーディングをしているときなどに、ちょっとこのスタイルを追加したい、というときに実行します。
すると右上に入力ボックスが出てくるので、あとはそこに普段通りに CSS を書くだけです。
table td {...}みたいに継承関係も含めて記述可能です。もちろん複数のセレクタやプロパティを書いても大丈夫です。
Firebug では、その要素自体にスタイルを追加する、みたいなことはできますが、継承関係を持ったスタイルを追加したり、class 自体にスタイルが割り当てられてない場合に、class そのものにスタイルを追加できない、という物足りなさがありました。
そういう不便さもあったので作ったものです。よかったら使ってみてください。
最近では JavaScript によってクリックされたときなどに、サブ情報などがポップアップするものをよく見かけます。間違えてクリックしてしまったり、やっぱりやめたい、といったとき、そのポップアップされた要素には通常「閉じるボタン」があると思います。
しかし、Windows などの OS では、その要素外をクリックすることで表示されたメニューなどをキャンセルする、というのはよくありますよね。
これを、サイト上でも実装できればユーザの直感的な操作でキャンセルさせることができ、とても便利です。
しかし、それをいざ実装しようとすると色々と処理をしないといけません。
そこで、この "キャンセルだけ" を行うスクリプトを作ってみました。n動作としては簡単で、画面いっぱいに透明の div 要素を追加し、そこへキャンセル用のアクションを設定します。
下のデモを見てもらうと分かりやすいと思いますが、ポップアップしたメニュー外をクリックすることでポップアップしたレイヤーを消す、という処理をさせています。
キャンセル用のレイヤーを呼び出すには、上記の JS ファイルを読み込ませた後、以下のようにします。
ここで渡されているのは、キャンセル時に実行させたい関数です。これはキャンセルレイヤーがクリックされたときに動作させたい関数を設定してください。
追加されたレイヤー用の div をクリックすると、自分自身を消す処理のほかに、上で渡された関数を実行します。
またこのスクリプトには追加された div を消すための関数も用意されています。
実行には以下のようにします。
上記の関数を実行すると、キャンセル用のレイヤーのみを消去します。
なにかのアクションを実行させたあと、このレイヤーが残り続けるのを防ぐために使用してください。
今回は便利な JavaScript ライブラリの紹介です。その名も「 curvyCorners 」n
このライブラリ、IE6 なんかでも動作するので、簡単な角丸ボックスを実装したい場合は便利です。JS がオフの場合でも、角丸にならないだけでレイアウトが崩れないのもいい感じです。n
指定方法も簡単で、ボーダーや背景色・画像は普通通り CSS で指定し、角丸にしたい要素を JavaScript で指定するだけで動作します。n
導入は簡単です。 curvyCorners からダウンロードできるファイルを解凍すると出てくるcurvycorners.js を読み込み、以下のように指定するだけです。n
イベント登録用の関数も定義されているので、addEventでクロスブラウザにイベントの登録ができるようになっています。n
また、指定する要素には CSS セレクタのように指定します。（ただし、+ や などの複雑なセレクタには対応していないようです）
子孫セレクタは対応しているようで、#test pのような指定にも対応していますが、一階層までの対応のようで、#test div pなどは対応していないようです。n
複数の要素に対して設定したい場合は、カンマ区切りで指定することで指定できるようです。（ex. #test1, #test2）n
これは、以前に公開していたスクリプトの改善版です。
以前の記事：画像のロールオーバーを自動化するJavascript では、実行するために body 要素に onload で関数を指定する必要がありましたが、こちらは読み込ませるだけで実行されます。
以前から、自分で作ったくせに いちいち body 要素に onload を指定するのがめんどくさいなーと思っていたので、それを作りなおしました。
人によってはロールオーバー用の画像のファイル名に_on以外をつけている人もいると思いますので（たとえばimg_over.gifみたいな）、URL 引数にパラメータを渡すことでロールオーバー用画像のタイプを設定できるようにしました。
読み込み時に以下のようにすることで、どんなファイルを読み込むかを指定できます。
上記の?type=_overの部分がパラメータです。
こうすることで、たとえば通常時の画像のファイル名がimg.gifだったとすると、ロールオーバー時にimg_over.gifが読み込まれることになります。
デフォルトの設定では_onがついた画像を表示します。
もしロールオーバー用の画像のファイル名を_on以外で使っている場合は、上記のようにパラメータを設定してください。
HTML 側の指定は、ロールオーバーを実装させたい img 要素に対してclass="rollover"とクラスを指定するだけです。
クラスを指定した画像のロールオーバー（マウスオーバー）時に、画像の URL を読み取り、JS 読み込み時に設定したパラメータ（もしくは初期値）を利用してロールオーバー用の画像と差し替えます。
さて、またしても JavaScript の記事です・・。
今回、このライブラリを作成した理由として、マウスーバー時の画像と、通常時の画像の 2 種類を用意することに手間を感じたためです。n
ちょっとしたバナー等だとわざわざマウスオーバー時に画像を入れ替えるほどのモノでもないし、でもリンクしているって分かってもらうために何かしらのエフェクトを入れたい・・・というような場合に使えるライブラリとなっています。n
使い方は簡単です。まず、以下の JS ファイルを読み込ませ、ロールオーバーエフェクトを実装したい img 要素のクラス名にsimplerolloverを指定するだけです。n
指定できる値は CSS で指定するものと同じものが使えます。（例：#f00など）
border への指定は 整数値のみ指定が可能です。n
動作確認：IE6, IE7, Firefox2, Firefox3, Safari, Opera
合わせて読むと役に立つかもなエントリー
今回はサイト製作に便利な JavaScript ライブラリの紹介です。
IE6 では透過 PNG（PNG-24 PNG-32 の間違いでした；）を使えません。
いちおう画像を表示することはできますが、透過部分が反映されません。
しかし、代替処理として「AlphaImageLoader」という CSS の filter を使うことで使うことが可能です。
ですがこれ、ActiveXの問題なのか、指定している透過PNG画像のドメインが違うとうまく反映されませんでした。
しかし今回紹介するJavascriptライブラリは、VMLという技術を使ってPNG画像の透過を実現します。
そのため、ドメインなどの問題もなく、しかも指定も楽でimg要素、CSSともに使用できるためとても便利です。
しかしながら、やはりこちらも使用には何点か注意点があります。
CSSの背景にPNG画像を指定した場合は問題ありませんが、img要素に（つまり通常の画像として）指定した場合、いくつかのライブラリで実装する、フェードアウトやフェードインの視覚的効果が実行されません。
推測では、filter 機能が使えないために透明度が変更できないのだと思います。
なので、もしこのライブラリを使う場合は CSS の背景として使うのが無難です。
簡単にデモを作ってみたので見てみてください。
スクリプトファイルを読み込んだあと、「DD_belatedPNG.fix('.png_bg');」で透過 PNG を使用している要素を指定します。
指定の仕方は簡単で、CSS セレクタと同じように指定ができます。
複数指定する場合は、やはり CSS と同じようにカンマ区切りで列挙します。
合わせて読むと役に立つかもなエントリー
カテゴリー
最近のエントリー
©2009-2011 CSS-EBLOG All Rights Reserved
