カテゴリー:スマートフォン関連

リスト表示へ

ドラッグ&ドロップで要素を入れ替えるスマホ向けjQuery pluginを作った

2011年12月31日 09:10

dragreplace.js

とある案件で作る必要があったので、それをカスタマイズして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を利用してアニメーションされるようにしているので、どことどこが入れ替わったのかが視覚的にわかりやすくなっています。

Config - 設定オプション

draggerオプションをfalse(デフォルトはture)にすることで、要素全体をドラッグ対象にすることができます。
trueの場合は指定した要素の右側にドラッグするための要素が自動で追加され、そこをドラッグすることで要素の移動ができるようになります。

イベントについて

dragreplace.jsでは、置換完了時にカスタムイベントreplacedを発火しています。
置換完了時になにか処理したい場合にこのイベントをlistenしてください。

また、イベント発火時にはそれぞれ置換された要素の参照が渡されます。(fromとtoをプロパティに持つオブジェクト)

CSSについて

dragreplace.jsは、ドラッグ中や置換対象などの見た目をCSSで制御しています。その際に使用しているクラスは以下の通りです。

クラス名 利用説明
replaceable replaceableを実行すると、対象となる要素に自動で付与されます。見た目の変更はありません。
dragging ドラッグ中に、ドラッグ元の要素に付与されます。ドラッグされていることを明示的にする目的で使用されます。
dragTarget ドラッグ中に、マウスや指に追従する要素に付与されます。要素自体はドラッグ元の要素の複製になります。
hit ドラッグしている要素が置換対象にヒットしているかどうかの当たり判定です。当たり判定がtureの場合にhitクラスが付与されます。
replaceItemMove 置換実行時、相互に要素が移動しているときに付与されるクラスです。要素自体はそれぞれの要素の複製になります。

HTML5でスマホをコントローラにするゲームを作ってみた

2011年10月27日 09:00

Canvasゲームをカスタマイズ

ゲーム自体は以前作ったものをそのまま使いました。

今回作ったスマホコントローラ版

http://edo-m18.me:9000/

以前作ったものをカスタマイズして、弾を打つ部分と自機を移動する部分を、関連付けたスマホから操作できるようにしてみたものです。
これはあくまでアイデア、ってことで快適にプレイできるまでは作りこんでいません(; ´Д`)
ただ、特にプラグインなどを使わずともここまでできる、というのは非常に面白いなと思いました。

Node.jsを使って実装

今回、WebSocket部分はNode.jsを使って実装しました。
最近Node.jsにハマりすぎてプライベートではNode.jsしか触ってませんw
やはりサーバサイドとクライアントサイドが同じ言語、というのはとても実装しやすいですね。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オンリーです。

Adobe - ADC MEETUP ROUND01で、jQuery Mobileについて話してきました

2011年6月21日 09:19

イベントの主題は「モバイルを攻略せよ」

6/11(土)に、Adobeが主催する、ADC MEETUP ROUND01に登壇してきました。

今回自分が話した内容は、「ネイティブアプリに変わる、新しいアプリ開発スタイル」というタイトルです。
今まので(モバイルの)アプリ開発(言語)から、HTML5+JavaScriptを使った開発へのシフトする可能性、それらを実現するフレームワークや注意すべき点などを発表させて頂きました。

プレゼン資料公開

土曜日のセッションで使用した資料は、jsdo.it上ですでに公開されています。よかったら見てみてください。(※WebKitに最適化されています。また、最近のVersionUpでGoogle Chromeでの閲覧がなんだかおかしなことになってるので、Safariで見てもらえると幸せになれます)

「ADC MEETUP ROUND01 - ネイティブアプリに変わる、新しいアプリ開発スタイル」の資料はこちら

jQuery Mobileに触ってみよう

さて、資料をみていただくと分かりますがその中身の大半は「jQuery Mobile」の話です。
Dreamweaver CS5.5がサポートしたことによって、そのシェアはかなりのものになると予想しています。

もともとjQuery自体のシェア率がとても高いので親和性が高いことも上げられます。また、jQueryの使いやすさと同じように、jQuery Mobileもとても使いやすいものとなっています。

極端に言えば、jQuery Mobileとその関連ファイルを読み込み、あとは(jQuery Mobileの)作法に則ってマークアップするだけで、まるでアプリのような外観と機能を持ったサイトが作れてしまいます。

jQuery Mobileの日本語のリファレンスを作っている方がいるので、そちらを参考にするといいかも)

そんなお手軽なjQuery Mobileを手軽に触れるイベントが、jsdo.it上で開催中です。その名も「jQuery Mobileを触りながら覚えよう!」です。

ちなみに実際に作ってみたデモは↓こんな感じ。

jQuery Mobileデモ1 - jsdo.it - share JavaScript, HTML5 and CSS

jsdo.itは手軽にJavaScriptとHTML、CSSを使ってコードが書けるサイトです。その場で確認したり、他の人に共有したり、ということができるサービスです。↑のようにブログに貼りつけてサンプルのように使うこともできるので、とても助かってます。

jQuery Mobileはまだα版

これだけ話しておいてなんですが、実はまだjQuery Mobileはアルファ版です。
なので、メイン業務に使うには注意が必要。
これを書いたあとに気づいたんですが、すでにjQuery Mobileはβ版になっていました(; ´Д`) とはいえ、それでもまだβなので注意が必要なのには変わりありません。
とはいえ、現時点でも完成度は高く、またちょっとしたモックなどはjQuery Mobileでさくっと作ると説得力が増すのかなーと思っています。

1