CSS-EBLOG

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

2011-12-31T00:10:00Z

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	置換実行時、相互に要素が移動しているときに付与されるクラスです。要素自体はそれぞれの要素の複製になります。

sassを使ってCSSのめんどくさい繰り返し部分を楽に記述する

2011-12-20T13:45:00Z

この記事はLess & Sass Advent calendar 2011の20日目として書いている記事です。

sassを使った繰り返し処理の基本

sassにはプログラム言語と同じような処理が存在します。
その中でも繰り返し処理をピックアップして、ちょっとめんどくさい処理を簡単にする方法をご紹介します。

単純な繰り返し処理

sassには繰り返し処理に使える文として、@each と @for があります。
JSなどではおなじみですね。
使い方も、他のプログラム言語のものと同じです。
@eachは指定したリストを順番に処理するもの、@forは指定した数値の間で繰り返し処理をするものです。
また繰り返しではありませんが、めんどくさい処理をまとめる、という意味で@functionも紹介したいと思います。

記述方法を見てみる(@each)

実際の記述方法は以下になります。

展開前

展開後

@eachは、いくつかの決まったリストなどを処理することに向いています。
例で書いたように、ベンダープレフィクスなどがいい例だと思います。
こうしてベンダープレフィクスを自動でつける処理を書いておけば、あとはこれを指定すれば自動的にベンダープレフィクスをつけてくれる、というわけです。

記述方法を見てみる(@for)

では続いて@for文を見てみましょう。

展開前

@eachとは違い、連番や決まった回数だけ繰り返すのに向いている処理です。
またプログラムのように、現在何回目の繰り返しかが分かるので（例では変数$i）、それを利用することで、例のように等間隔で配置される要素の位置指定などにも使えます。

実際にこれをCSSに出力すると、以下のようになります。

sassではそれほどの行を書いていなくても、繰り返す回数が増えれば増えるだけどんどんとCSSの中身が増えていきます。
例では10回だけでしたが、それでもこれを実際に手で書くとなるとかなりめんどくさいですよね。
こうした繰り返し処理を簡単にしてくれるのがsassのいいところです。

@functionを使って何度も記述することをまとめる

さて、最後に紹介するのは@function文です。
これも他のプログラムと同様、決まった処理をしてくれるものです。
簡単に例を書いてみます。

今回の例では、事前に作っておいたフォントサイズのリストから、指定したサイズの%を返す関数を書いて見ました。
普段CSSを書いていて、%の相対的なサイズを指定していると、12px相当はいくつだったっけ・・というように、細かい数字が思い出せないことがあります。
しかしこうして関数化しておけば、font-size: fz(10);というように指定するだけで、10px相当の%を自動で設定してくれます。

@if文を使って条件分岐

@if文を@functionの中で使うと、さらに柔軟な対応が可能になります。
上の例でも使っているように、8以下、あるいは40以上の数字が指定されていた場合は、それぞれ数値を丸める処理を入れています。（↓ここの部分）

こうした安全対策や、条件分岐を入れることで汎用的な関数を作ることができるというわけです。

今度の例は渡された引数に応じて出力する値を変化させるものです。
JSなどプログラムに触れたことがある方は見てすぐにどんな処理がされているのか分かると思います。
sassでは、こうした「CSSだとめんどくさい！」と思うことをプログラムを扱うように簡単に記述することができるのが最大のメリットだと思います。

またもうひとつのメリットとして、プログラムが分からなくても使える、という点です。
つまり、sassの基本的な記述法である"入れ子"だけを使い、こうした繰り返し処理を使わなくてもCSSに変換することができることです。

さらに言えば、入れ子すら使わず、ただCSSをそのまま記述するだけでも問題ありません。
これは、sassが分からない人でも問題なく使える、ということを意味しています。

そして、徐々に興味があることやこんなことをやってみたい、と思った処理を導入していくだけで、いずれはsassの書き方が身についていくことでしょう。
プログラムにアレルギーのある人でも、とりあえず一度導入してみてはどうでしょうか。

GUIを使う

余談として、sassを使うにはターミナルなどの、いわゆる「黒い画面」を使わないとできないからなーと思っている人もいるかもしれません。
しかし、Adobe AIR製のGUIでsassファイルのコンパイルができるアプリも登場したようです。
これを使えば、ターミナルなどのCUIが分からない人でも問題なくsassを使うことができると思います。
sassを恐れずに、ぜひ一度試してみてください。

TwtterにすぐつぶやけるWebアプリ「速ツイ」を作ってみた

2011-11-06T00:24:00Z

とにかくつぶやくだけ！

※問題があったのでいったん落としました。

※ログインができない問題を対処しました。

Node.jsとOAuthの勉強ということで、とにかくつぶやくだけのTwitterクライアント「速ツイ [ http://sokutwi.edo-m18.me/ ]」を作ってみました。

Twitterにつぶやきたいときとタイムラインを見たい時はタイミングが違うなーと思ったのがきっかけで作ったものです。

とにかくすぐにつぶやきたい！というときに使えるクライアントです。

なので、タイムラインの閲覧やReply、DirectMessageなどの普通はある機能は一切ありません。なのでページを開くだけなので非常に高速。
またiPhoneの場合は「ホーム画面に追加」で追加するとWebアプリとして機能するように作ってあります。

作った感想や使ったモジュールなどは別ブログでNode.js関係の話を書いているので、そちらで書こうと思ってます。（時間があれば・・・）

ただ、本当に勉強のために作ったのと、もともと自分で使う想定で作ったので、使う場合は自己責任でお願いします・・。

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

2011-10-27T00:00:00Z

Canvasゲームをカスタマイズ

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

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

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

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

Node.jsを使って実装

今回、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オンリーです。

本番環境でテスト？！ Charlesを使った簡単サイト修正

2011-09-12T00:00:00Z

前回の「スマホの開発が超絶楽に！ weinreでスマートフォンをPCでリモートデバッグ！」は大変好評なようでうれしい限りです。自分もこれを知ったときはかなり興奮したのを覚えているので、同じ気持になってもらえたら幸いです。

さて、今回はデバッグツール的なつながりでCharlesというプロキシツールの話をしたいと思います。

プロキシって？

プロキシサーバーとは、e-Wordsでは「単にプロキシと言う場合は、WWW閲覧のためにHTTPによる接続を中継するHTTPプロキシを指す場合が多い。」という説明がされています。

つまりどういうことかと言うと、外部と通信する際に、通信そのものを代理でやり取りしてくれるソフトウェア（サーバ）ということができると思います。

デモ動画

今回もまた、文章では伝わりづらいので実際にその作業をしているデモ動画を作成しました。

※注意：デモでは本来なら手を入れることができないサイトに対しても使える＝本番環境でも問題ない、ということを説明するためにYahoo! Japanのサイトでテストしています。なので、実際には修正を行おうとしているサイトと、修正すべきファイルは手元にあるはずなので適宜それらと置き換えて読み進めてください。

デモ解説

いかがでしたでしょうか。Charlesを使うことで非常に手軽に本番環境でのテストが行えることが分かってもらえたのではないでしょうか。

ただ注意としては、（当然ですが）実際に本番環境をいじっているわけではないのでCharlesを落としてしまえば本当の本番環境に戻ります。なので、最終的にはこうして修正・チェックしたファイルを本番へ上げる必要があります。

ただCharlesを使うことによって、「テストで大丈夫だったものを本番に上げたらおかしくなった」ということを極力減らすことができる、ということです。（なんせ、本番環境でうまく行っていたのだから、それをアップしたら当然テストしたものと同じ結果になる、という理屈）

では、動画でやっていたことをピックアップしながらなにをしていたのかの詳細をしていきたいと思います。

作業手順 - 1

まず、Charlesのサイトからアプリをダウンロードします。（Windows版、Mac版ともにあります）

サイトトップ右側にある「Download a free trial Version **」からダウンロードページへ進みます。

するとページ中程にWindows 32bit版、64bit版、Mac OS X版、Linux / UNIX版のリンクがあるので、そこから該当のファイルをダウンロードし、インストールします。

作業手順 - 2

インストール後、起動したらメニューバーから「Proxy > Mac OS X Proxy(とMozilla Firefox Proxy)」のチェックを入れます。（Macの場合）

Firefoxに限っては、専用のCharlesアドオンをインストールしないとダメなようです。ただ、インストールは簡単で、「Mozilla Firefox Proxy」のチェックを入れるとインストールするかどうかを聞かれるので、そのまま「はい」を選択してインストールすればOKです。

作業手順 - 3

続いて、メニューバーの「Tools > Map Local」を選び、マッピングの設定を行います。

マッピングについては、まずリダイレクトしたいURLを指定し、そのURLへアクセスした場合にどのファイルを参照させるかを指定します。（つまり、参照先のURLを無理やりローカル（手元）にあるファイルにリダイレクトする＝Map Local）

ここまで設定したところで、設定したサイトを見てみると、上で設定したファイルの変更がそのまま反映することが確認できると思います。

まとめ

いかがでしょうか。それほど導入がむずかしくないことが分かるかと思います。

一点注意としては、Trial版は30分経つとCharlesが自動で終了する、という点です。（ただ、もう一度普通に起動し直せば、設定した内容は保存されているので使い続けることはできます）

今回のケースはHTMLでデモをしましたが、もちろんCSSやJSを同じようにローカルファイルを参照させることもできます。（逆に、ある程度の規模の案件だとHTMLはPHPなりのプログラムで書き出している、ということも少なくないと思います。その場合は今回の手法では修正がむずかしいかもしれません）

ちなみに、画像ファイルの場合はとあるディレクトリ以下をすべてローカルのファイルを参照するようにしたい、なんていう要望があるかもしれません。その場合は、URLの指定の箇所で「http://hoge.com/img/*」のようにアスタリスクを入れることで、その下のディレクトリにアクセスがあった場合は、ローカルの指定したディレクトリにリダイレクト、という設定もできるようになっています。

このCharels、知ったときはかなり感動しました。たとえば、アカウントがなくて本番にアクセスできない環境（ファイルを納品だけしている場合など）のときに、でもなんとか原因を調べてくれ、なんていう要望をもらったときでもなんとかできてしまったりします。

もちろん通常の開発時でもとても役に立つので、一度試してみてはいかがでしょうか。

スマホの開発が超絶楽に！ weinreでスマートフォンをPCでリモートデバッグ！

2011-09-05T00:07:00Z

weinreって？

weinreとは、サイトでは次のように書かれています。weinre is Web Inspector Remote.。
この単語の頭2文字ずつをつなげて「we in re」ということのようです。読みは「ワイナリー」とか「ワイナー」みたいな。

つまり、リモートでデバッグができる、ということです。百聞は一見にしかず、ということで、実際に使ってみたものの動画キャプチャをアップしているので、下の動画を見てみてください。きっとその機能に驚くはずです。(ちょっと画面が小さいので、720pにしてフルスクリーンで見るといいかも）

ダウンロード

Githubで公開されているphonegap / weinre - Githubからダウンロードできます。

zipで公開されている2ファイルのうち、今回は「weinre-jar-1.5.0.zip」を使いました。Mac版はアプリになっていて使いやすいのですが、ただ設定をいじるのが大変だったので、jarファイルを直接実行するのがいいでしょう。デモもそれを想定してターミナルから実行しています。

weinreをターミナルから実行する

さて、今回のデモでやっているように、weinreをターミナルから実行してみます。（社内のサーバに設置しておくときにもやりやすいかと思います）

まず、Githubから落としてきたファイルを解凍します。生成されるファイルは2つで、使う方はweinre.jarのほうです。場所はどこでもいいので、あとあと使いやすい場所に保存しておくといいでしょう。

次に、ターミナルを起動します。通常は、アプリケーション > ユーティリティのフォルダの中にアプリケーションがあります。

起動したら、上記で保存したファイルの場所まで移動してください。（操作がよくわからない人は、cd (cdの後ろに半角スペース）と入力後、保存したフォルダをFinderで表示し、そのフォルダをターミナル上にドラッグ&ドロップし、Enterキーを押すと移動できます）

続いて、java -jar weinre.jar --httpPort 8080と入力し、Enterキーを押します。エラーが特になければ、実行成功です。

ブラウザでweinreを表示する

起動が無事完了したら、あとはブラウザで実行すればOKです。Google Chromeを立ち上げ、http://localhost:8080/にアクセスしてください。

デモで見た画面が表示されればOKです。ページが表示されたら、ページ中程にあるbookmarklet url in a preと書かれた箇所にあるJavaScriptのソースをコピー^*1します。

コピーしたら、一番上にあるリンク http://localhost:8080/client/#anonymous をクリックしてデバッグページを表示させます。

続いて、iPhoneエミュレータか、別のGoogle Chromeのウィンドウでリモートデバッグしたいページを開き、*1でコピーしたJavaScriptをロケーションバーに貼りつけて実行^*2してください。

デバッグページの画面にデバッグしたいページのURLが表示されれば接続完了です。あとは、Google Chromeで普段行なっているのと同じようにデバッグすることができます。

Tips

実はファイルを落としてきてやる方法以外に、weinreのAPIがすでに用意されていて、そちらを使うことで手前で準備しなくてもリモートデバッグを体験することができます。

http://debug.phonegap.com/client/#hogeにアクセスし、*2で実行したJavaScriptの、読み込むJS部分をhttp://debug.phonegap.com/target/target-script-min.js#hogeに変更すればOK。

ちなみに、#hogeとなっている箇所（ローカルで実行しているもの、APIどちらも）はIDになっていて、それを任意の文字列に変更し、JSを読み込ませるブックマークレットの部分のIDも同じものにすることで、ひとつのサーバで複数のページのデバッグができるようになります。(※http://localhost:8080/client/#debugtest のように)

APIを利用する場合は、実機でも確認することができるのでさらにそのすごさを実感することができると思います。（ネットワークの設定などをいじれば、同じネットワーク内のものであればローカルで準備したものでも実機での検証ができますが、ちょっと話がそれるので割愛）

今回の記事を書くにあたって、「スマートフォンブラウザのWebInspectorをリモートで実現するweinreが凄い」の記事を参考にさせてもらいました。

これは簡単！ a要素にクラスを追加するだけでiPhone UIボタン

2011-08-29T00:05:00Z

↓実際に動いているデモはこちら(iPhone向けに作っているため、iPhone / WebKitでしか最適化されていません)

これは簡単！ a要素ひとつでiPhone UIボタン - jsdo.it - share JavaScript, HTML5 and CSS

ちなみにiPhone / WebKitで実際に見るとこんな感じに見えます↓

a要素に1クラス追加するだけで実現するのでお手軽

今回のサンプル作成でこだわったのは、1要素に1クラスを指定するだけでiPhoneのようなデザインを実装することです。
つまり、以下のように指定するだけでiPhone風ボタンに早変わりする、というような手軽さを意識しました。

HTMLソース

CSSソース

/* btnType Serise */
a.btnTypeA, a.btnTypeB, a.btnTypeC, a.btnTypeD, a.btnTypeE {
  position: relative;
  margin-bottom: 12px;
  margin-top: 12px;
  padding: 5px 10px;
  display: block;
  color: #000;
  text-decoration: none;
  text-align: center;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
  z-index: 5;
}

.btnTypeA:after, a.btnTypeB:after, a.btnTypeC:after, a.btnTypeD:after, a.btnTypeE:after {
  content: "";
  position: absolute;
  left: -3px;
  top: -3px;
  width: 100%;
  height: 100%;
  padding: 2px;
  border-radius: 10px;
  background-color: #bebebe;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(0.5, rgba(255, 255, 255, 0.3)), color-stop(0.5, rgba(255, 255, 255, 0)));
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 0 rgba(0, 0, 0, 0.2), 1px 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 0 rgba(0, 0, 0, 0.2), 1px 1px 2px rgba(0, 0, 0, 0.3);
  z-index: -1;
}

.btnTypeA:before, a.btnTypeB:before, a.btnTypeC:before, a.btnTypeD:before, a.btnTypeE:before {
  content: "";
  position: absolute;
  left: -6px;
  top: -5px;
  width: 100%;
  height: 100%;
  padding: 5px 5px 4px 5px;
  border-radius: 14px;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #545454), color-stop(1, #9e9e9e));
  z-index: -2;
  -webkit-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.3), 0 1.3px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.3), 0 1.3px 0 rgba(0, 0, 0, 0.2);
}

a.btnTypeB {
  color: #fff;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);
}

a.btnTypeB:after {
  background-color: #475ab0;
}

a.btnTypeC {
  color: #fff;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);
}

a.btnTypeC:after {
  background-color: #333;
}

a.btnTypeD {
  color: #fff;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);
}

a.btnTypeD:after {
  background-color: #f00;
}

a.btnTypeE {
  color: #fff;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);
}

a.btnTypeE:after {
  background-color: #009d0e;
}

実は見出し部分も画像なし

実はタイトル周りもCSSのみで実装しています。
ソースもかなりシンプル。
さらには背景の縞々模様もCSSのみで作っていたりします。

ダウンロード

GitHub - iPhone-button-CSS-template

まとめ

CSS3のポテンシャルは非常に高いです。
こうした比較的シンプルなデザインであればCSSのみで、かつ要素を何重にも入れ子に・・なんてしなくても実現できてしまいます。
（具体的には、:after擬似要素、:before擬似要素を匠に使うことで、無理に思えるデザインも実装できてしまったりします）
[追記] Twitterで指摘をもらいましたが、:after(:before)擬似要素はCSS3からの定義ではありません。ここで言いたかったのは、それらを工夫して使うことでCSS3の力が増し、CSSのみで複雑なデザインが実現できる、ということでした。:after(:before)擬似要素がCSS3だと勘違いされる人がいるかもしれないので追記しておきます。

iPhone4の対応で画像サイズがーという悩みを解消できることを考えると、色々とテンプレートとして作ってみるのも面白いのではないでしょうか。
ぜひぜひみなさんも色々なデザインを、少数構成で実現できるように挑戦してみてください。

ちなみにこのサンプルは、自分で作ったCSS3ジェネレーターでグラデーションを調整しながら作りました。よかったら使ってみてください。

CSS3なら簡単！アニメーションするリングメニューを作る

2011-07-18T22:40:00Z

jsdo.itで公開したら意外と好評だったので、解説などを書いてみたいと思います。

ゲームなどにありそうなリングメニューを、CSSだけを使って実装した例です。下に実際の動くサンプルもあるので、ぜひ触って見てください。

ちなみに右の画像は、中央の「main」にマウスオーバーした際にアニメーションでメニューが出てくる瞬間の画像です。

デモ

まずは下のサンプルをご覧ください。ちなみにアニメーションに対応しているブラウザのみ、アニメーションが実行されます。具体的には、GoogleChrome、Safari、Firefox、Operaです。

リングメニューをCSSで実装してみる - jsdo.it - share JavaScript, HTML5 and CSS

テクニックの肝

今回のテクニックの肝は、transform-originです。このプロパティは、transform系の値を変更する際、どこを基点にするかというものになります。

このtransform-origin、デフォルト値は50% 50%となっています。つまりその要素の縦横中央、ということですね。もしこれを0 0とすれば左上が基点となり、100% 100%とすれば右下が基点となるわけです。そしてこの数値には、pxも指定することができるので、細かく位置を調整することも可能となります。

CSS3でのアニメーションの解説

上で、transform-originにはpxでの指定も可能だと書きました。今回のテクニックは、このpx指定を使って位置を厳密に決めています。

下の画像が、実際に指定している値とそれぞれの指定の意味を解説した図になります。
top, right, bottom, leftそれぞれの左上（transform-origin: 0 0）からどれくらいの位置を基点にしたらいいかを記載しています。図を見てもらうと、なんとなくどれくらいの値を設定すればいいがイメージできるかと思います。

さて、ここまで数値と概念が分かれば、あとはそれぞれCSSで値を設定していくだけです。

HTMLソース

CSSソース

/* 上下左右のメニューへマウスを移動する際に.ringMenuからmouseoutが発生しないようコンテナのサイズを少し大きくする */
.ringMenu:hover {
  padding: 30px 30px;
  margin: -30px -30px;
}
.ringMenu ul {
  position: relative;
}

/* transition時のアニメーションの具合を定義 */
.ringMenu ul li {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.ringMenu ul li a {
  display: block;
  width: 100px;
  height: 100px;
  background: rgba(50,50,50,0.7);
  text-align: center;
  line-height: 100px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
}

/* main以外は通常時はscale(0)で実質非表示 */
.ringMenu ul li:not(.main) {
  -webkit-transform: rotate(-180deg) scale(0);
  -moz-transform: rotate(-180deg) scale(0);
  -o-transform: rotate(-180deg) scale(0);
  transform: rotate(-180deg) scale(0);
  opacity: 0;
}

/* マウスオーバー時に、非表示にしていた各要素をscale(1)にして表示 */
.ringMenu:hover ul li {
  -webkit-transform: rotate(0) scale(1);
  -moz-transform: rotate(0) scale(1);
  -o-transform: rotate(0) scale(1);
  transform: rotate(0) scale(1);
  opacity: 1;
}

/* 以下、top, right, bottom, leftのそれぞれの位置を調整 */
.ringMenu ul li.top {
  -webkit-transform-origin: 50% 152px;
  -moz-transform-origin: 50% 152px;
  -o-transform-origin: 50% 152px;
  transform-origin: 50% 152px;
  position: absolute;
  top: -102px;
  left: 0;
}
.ringMenu ul li.bottom {
  -webkit-transform-origin: 50% -52px;
  -moz-transform-origin: 50% -52px;
  -o-transform-origin: 50% -52px;
  transform-origin: 50% -52px;
  position: absolute;
  bottom: -102px;
  left: 0;
}
.ringMenu ul li.right {
  -webkit-transform-origin: -52px 50%;
  -moz-transform-origin: -52px 50%;
  -o-transform-origin: -52px 50%;
  transform-origin: -52px 50%;
  position: absolute;
  top: 0px;
  right: -102px;
}
.ringMenu ul li.left {
  -webkit-transform-origin: 152px 50%;
  -moz-transform-origin: 152px 50%;
  -o-transform-origin: 152px 50%;
  transform-origin: 152px 50%;
  position: absolute;
  top: 0;
  left: -102px;
}

上記の指定を記述すれば、サンプルのアニメーションを持ったリングメニューの完成です。

いくつかポイントを解説

まず、.ringMenu:hoverで若干、コンテナのサイズを拡張します。これは、マウスオーバーでメニューが表示された際、それぞれのメニューへマウスを移動しようとすると、初期のサイズだと上下左右のメニューの中間にマウスを持って行くとメニューが閉じてしまいます。（実際に拡張している部分を消して試してみると分かると思います）
そのため、スムーズにメニューを選べるようにするために拡張しているわけです。

次にアニメーションをさせる部分ですが、mainのメニュー以外をtransform: scale(0)を使って実質非表示にしておきます。加えて、rotate(-180deg)を同時に指定しておきます。

そして、.ringMenu:hoverの際に、それぞれのscaleを1に、rotateを0に戻します。すると、transform-originで指定した基点を中心にして、回転しながら元のサイズに戻ります。さらにtransitionを指定しているのでその遷移がアニメーションを伴って表示され、結果回転してメニューが出現する「リングメニュー」になる、というわけです。

iOSのフォトビューワのような動きを実装するfrick-image.js

2011-07-11T00:34:00Z

JavaScriptライブラリ作りました

久々にJavaScriptライブラリを作ってみました。その名も「frick-image.js」。

まずは下のデモを見てもらうと、どんなものか分かると思います。ちなみに、アニメーションを実装しているのはFirefoxとWebKit系（iOS、Android含む）のブラウザのみになります。それ以外は、ドラッグ可能なことと、あふれた要素を強制的に定位置に戻す機能のみとなります。

iOSのフォトビューワのような動きを実装する - jsdo.it - share JavaScript, HTML5 and CSS

使い方

使い方は簡単です。写真を内包するコンテナになる要素(*A)と、その中に写真を含むボックスのふたつの要素(*B)を用意し、以下のようにスクリプトを実行すればOKです。指定するのは、コンテナではなく、Bの方の要素のID（やクラス）を渡します。指定方法はjQueryで指定できる方法で指定することができます。

JavaScript

HTML

ダウンロード

frick-image.js - GitHub

手軽にDataURIに変換できるChromeアプリを作ってみた

2011-06-21T23:55:00Z

Google Chromeアプリを作ってみた

ちょっと仕事でChromeアプリについて調べる必要があったので調べていたら、かなり簡単に作れそうだったので試しに作ってみた。

いつも、ちょっとした画像をDataURIに変換するためにブックマークからサイトを開いたり、ということをしていたのだけど、それが以外にめんどくさかったので、Chromeのホームから直に開けるのはいいなぁ、ということで作ってみたアプリ。その名も「Convert to DataURI」。

操作は簡単ドラッグ&ドロップ

操作方法は簡単です。インストールして起動後、DataURIに変換したい画像を、左カラムにある「Drag&Drop image here」と書かれた箇所にドラッグ&ドロップするだけ。

すると右下のボックスに、Base64にエンコードされ、DataURI化された文字列が表示されます。あとはこれをコピペするだけで使用することができます。IE対応などを視野に入れるとなかなか使いどころが難しいですが、jsdo.itやjsfiddleなどの画像がアップできないサービスには重宝すると思います。ぜひ使ってみてください。

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

2011-06-21T00:19:00Z

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

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でさくっと作ると説得力が増すのかなーと思っています。

コーディングを3倍速くする！ Vim入門

2011-05-11T01:00:00Z

CSS Nite Ginza Vol.56で登壇してきました

気づけば3ヶ月も更新していなかったことに気づきました。まぁ、3倍と3ヶ月で3つながり、ということで(謎

さて、そんな訳で先日開催された CSS Nite Ginza Vol.56 で、Vim についての話で登壇してきました。見出しの通り、3倍(以上)速くなることまちがいなしのエディタ「Vim」。その速さを知ってもらうために行ったライブコーディングの様子もあるのでぜひ見てみてください！

Vimのライブコーディング

Vimとは、ざっくりと説明するとCUI時代のエディタ「vi」の機能拡張版。CUIとは、キーボードで操作することを基本としたUIのことです。マウスで操作するのはGUI。なので、コーディングなど、キーボードで作業することがメインの職種（MEやプログラマなど）にはとても親和性の高いエディタとなっています。

タグの中のテキストをさっとコピーしたい！　とか、ダブルクォーテーションの中の文字をざっと削除したい！　なんていう「思ったこと」をそのまま実行してくれるのがVimのいいところ。

と、文字でいくら力説してもなかなか伝わらないので、実際に登壇時に行ったライブコーディングの様子がムービーでアップされているので、ぜひそちらを見てみてください。そして興味を持った方はぜひ、一度Vimに手を出してみてください。多分、一度は挫折しますｗ（かくいう自分も一度挫折した口ですｗ）

ですが、それを乗り越えた先には信じられないくらいコーディングがスピードアップした自分がいることでしょう。そう、まるで宇宙船で100倍の重力に耐えた悟空のように。（ネタが古い）

コーディングを3倍速くする！ Vim入門／比留間和也（カヤック） from CSS Nite on Vimeo.

磨りガラスで見たようなにじんだ文字を表現するtext-shadow

2011-02-07T00:00:00Z

text-shadowを使ってにじんだ文字を表現する

前回と合わせて連続でtext-shadowネタです。今回は、text-shdaow のぼかし部分を利用して、CSS のみでテキストをぼかすテクニックの紹介です。

今回のテクニックは text-shadow に対応しているブラウザであれば、CSS のみで実現可能です。
まずは下の jsdo.it のサンプルを見てください。（下の方にある「Play」ボタンを押すと実行されます）
スタイルをtextareaに設定しているので、ぼかし状態の文字が入力されるのが確認できると思います。

[Demo] Blur text for CSS3 - jsdo.it - share JavaScript, HTML5 and CSS

ちょっとだけ解説

まずポイントとなるプロパティは当然、text-shadowです。
普通はテキストに影をつけるためのプロパティですね。
それを以下のようにすることでぼかし部分だけを表示することができます。

color が大事なポイントです。普通はカラーは色をつけるのが当たり前ですが、今回のテクニックの場合はこれを透明にしてしまいます。
つまり、影の上に乗っているテキストの色を透明にすることで、結果、影だけが表示されぼかし効果が残る、というわけです。

アニメーションを追加してより効果的に

サンプルを WebKit 系ブラウザで見ている人は気づいていると思いますが、実はこのサンプルにはアニメーションを設定しています。
text-shadow のぼかし部分を 0 から 10px などに指定することで、プレゼンツールで表示されるような効果を得ることができます。ぜひ試してみてください。

超立体的！text-shadowの意外な使い方

2011-02-01T00:32:30Z

text-shadowだけで手軽に立体文字を作る

元々は CSS3 Watch の記事じゃないか、というコメントを頂きました。調べたところ、そこでこのCSSに関する記事が見つかったので参考として記載しておきます。

今回は、とあるサイトで見かけた面白い表現を紹介したいと思います。
右にある画像が、その表現を拡大したものです。これはテキストに対してtext-shadowを指定しただけです。

もちろんテキストなのでコピペもできるし、textareaに指定すれば入力した文字がこのような立体的な文字になります。

下にjsdo.it上で作成したデモを載せてあります。下のほうにある「Play」ボタンを押すことでサンプルが実行されます。
サンプルはtextareaなので、自由にテキストを入力してみてください。（対応ブラウザは WebKit 系か、Firefoxです）

※ちなみにアンチエイリアスのかかったフォントじゃないとあんまりきれいに見えませんｗ

デモ

Steric text used 'text-shadow' property. - jsdo.it - share JavaScript, HTML5 and CSS

ちょっとだけ解説

今回のこのテクニックの肝はtext-shadow（というかそれだけ）です。

複数指定できるtext-shadow

この text-shadow、実は影の部分の指定を複数指定することができるのです。
意外と知らない人は知らない気がするこの指定、カンマ区切りで列挙すればひとつの要素に対して様々な影をつけることが可能になります。

さて、ではどんなことをやっているかというと、サンプルを見ていただくと一目瞭然ですがこの「影を複数指定できる」というのを利用して、立体的に見えるようにたくさんの影を指定することで実現しています。

.realTextクラスに指定している text-shadow の値の最初の 5 つが、文字が飛び出しているように見せる部分。そのあとの 7 つが、その盛り上がった文字からできる影を表現しています。

最初の 5 つの指定で、徐々に暗くなるように色を指定しています。（実際のものは同じ色でも光の当たり方によってグラデーションができます。それを表現している、というわけです）

そして次の 7 で、盛り上がった（ように見える）テキストから、さも影が落ちているような演出をしている、というわけです。

IE では・・・？

残念ながら、最初のほうにも書いた通り、対象ブラウザが限定されてしまいます。
しかし、対応していないブラウザでも、立体的に見えないだけでテキストは正常に表示されます。
なので、こうしたリッチ表現ができるブラウザにはリッチな表現を、そうでないブラウザに対しては情報にアクセスできるようにしておく、という対応ができます。いわゆる「プログレッシブ・エンハンスメント」ですね。

Canvasを使ってシューティングゲームを作ってみた

2011-01-09T05:47:00Z

Canvasって面白いね！

なかなか更新できてなくてしょんぼりな近頃ですが、なんでだかゲームプログラミングが最近楽しすぎて色々勉強してますｗ
そして Canvas の使い方が段々分かってきた感じです。

Canvas、めちゃんこ楽しいです。ある程度タイムライン的な動かし方のコツを掴んだらなんでもできそうに錯覚しますね。
ってことで、お正月三が日は jsdo.it 上で色々やってましたｗ

今勉強がてら作ったゲームが↓のものです。（※音が出るので注意）
コードの下のほうにある「play」ボタンを押すと再生されます。

※ローディング部分の作りが甘いので、たまに隕石が破壊できないとか音が鳴らないとかバグがあるので、そうなったら再読込してください・・。

forked from: Meteorite Shooting Games - jsdo.it - share JavaScript, HTML5 and CSS

作ってみて学んだこと

canvas の使い方がなんとなく見えてきた、ということ。
静的な画像であればそれほど問題ないですが、アニメーションの場合は

各オブジェクトの描画
canvasのクリア
各オブジェクトの次のフレーム位置の計算
各オブジェクトの描画
...以下繰り返し

という、かなりめんどくさい処理をする必要があります。
しかし、今回の制作を通して学んだコツとしてはフレームを描画する関数を作り、その中にさらに各オブジェクトを描画する関数を入れて、それぞれのオブジェクトを描画する関数を定義する、ということです。
そして、FPS にしたがって連続的にフレームを描画する関数（サンプルでは updateFrame 関数）を実行することでアニメーションが作成できます。

canvasはスマートフォンにも応用できるし、JS で画像のロールオーバーなんかを実装するのであれば、いっそ canvas でやってしまう、というのも面白いかもしれません。

CSS-EBLOG

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

dragreplace.js

デモ

Config - 設定オプション

イベントについて

CSSについて

sassを使ってCSSのめんどくさい繰り返し部分を楽に記述する

sassを使った繰り返し処理の基本

単純な繰り返し処理

記述方法を見てみる(@each)

記述方法を見てみる(@for)

@functionを使って何度も記述することをまとめる

@if文を使って条件分岐

GUIを使う

TwtterにすぐつぶやけるWebアプリ「速ツイ」を作ってみた

とにかくつぶやくだけ！

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

Canvasゲームをカスタマイズ

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

Node.jsを使って実装

機能説明

本番環境でテスト？！ Charlesを使った簡単サイト修正

プロキシって？

デモ動画

デモ解説

作業手順 - 1

作業手順 - 2

作業手順 - 3

まとめ

スマホの開発が超絶楽に！ weinreでスマートフォンをPCでリモートデバッグ！

weinreって？

ダウンロード

weinreをターミナルから実行する

ブラウザでweinreを表示する

Tips

これは簡単！ a要素にクラスを追加するだけでiPhone UIボタン

a要素に1クラス追加するだけで実現するのでお手軽

HTMLソース

CSSソース

実は見出し部分も画像なし

ダウンロード

まとめ

CSS3なら簡単！ アニメーションするリングメニューを作る

デモ

テクニックの肝

CSS3でのアニメーションの解説

HTMLソース

CSSソース

いくつかポイントを解説

iOSのフォトビューワのような動きを実装するfrick-image.js

JavaScriptライブラリ作りました

使い方

JavaScript

HTML

ダウンロード

手軽にDataURIに変換できるChromeアプリを作ってみた

Google Chromeアプリを作ってみた

操作は簡単ドラッグ&ドロップ

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

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

プレゼン資料公開

jQuery Mobileに触ってみよう

jQuery Mobileはまだα版

コーディングを3倍速くする！ Vim入門

CSS Nite Ginza Vol.56で登壇してきました

Vimのライブコーディング

磨りガラスで見たような にじんだ文字を表現するtext-shadow

text-shadowを使って にじんだ文字を表現する

ちょっとだけ解説

アニメーションを追加してより効果的に

超立体的！text-shadowの意外な使い方

text-shadowだけで手軽に立体文字を作る

デモ

ちょっとだけ解説

複数指定できるtext-shadow

IE では・・・？

Canvasを使ってシューティングゲームを作ってみた

Canvasって面白いね！

作ってみて学んだこと

CSS3なら簡単！アニメーションするリングメニューを作る

磨りガラスで見たようなにじんだ文字を表現するtext-shadow

text-shadowを使ってにじんだ文字を表現する