Pointer Pointerの仕組み

Jonathan Puckeyが作ったPointer Pointerというサイトがある。話題になったので見た人も多いと思うが、マウスを置くとそこを指差した写真が表示される作品だ。何となく彼のGithubを見ていたら、voronoi-gridというリポジトリがあり、そこにexampleとしてあのサイトの仕組みがわかるコードがあった。

マウスを置くとそこを指で差す写真が表示される、というのは一見単純でくだらないアイディアのようでいて、どう作るかを考えると途方に暮れてしまう。まず思いつくのは画面を等間隔のグリッドで分割し、それぞれに当てはまる写真を撮影する方法だ。しかし、あの質感も含め、無作為に選ばれたような雰囲気は、なかなか意図して出せないだろう。次に考えるのが検索だが、座標に合った位置を指差している写真を探すのはかなり難しい。クラウドソースでひとつひとつお願いして集めるのは可能かも知れないが、これも労力がかかる。

彼の賢さは、これを写真から出発して作り上げたところにある。直接聞いた訳ではないので推測にしかならないが、ソースコードを読み、フォルダ構成を見ればその思考の流れが分かる。

1. まず人が指を差している写真を集め、全てのサイズを合わせる。
2. Photoshopなどでカーソルを指の位置に合わせて座標を特定し、ファイル名の末尾に付け加える。
3. 次に、それを頼りにX座標、Y座標、画像ファイル名をまとめたJavaScriptオブジェクトの配列としてpoints.jsに記録する。
4. points.jsからデータを読み出し、X座標とY座標の集合からボロノイ分割を作る。ボロノイ分割は、ある点と点の距離が等しくなる線で領域を分割するアルゴリズムだ。これで「写真の指が差している座標で」分割された領域を作ることができる。
5. あとはマウスの位置が分割されたどの領域上にあるかを特定し、その母点の座標を元に該当のファイルを読み出して表示する。

さらに素晴らしいのは、点の増減が簡単にできることだ。新たな写真を追加し、座標を特定してファイル名をつけ、points.jsにオブジェクトを書き込むだけ。指がどこを差していようが関係なく、プログラムを変更することもなく、どんどん追加できる。削除する場合は、points.jsからオブジェクトを消せば良い。ある点が削除されたとしても、アルゴリズムによって再度領域が分割され、別の写真が割り当てられるので、マウスを合わせた時の自然さは保たれる。

これが最初に考えたような等間隔のグリッドだとどうだろう？1枚だけ追加するとか、1枚だけ削除することはできず、分割した行や列単位で増減させないといけない。プログラムの修正も必要になる。

アイディア自体の面白さだけでなく、仕組みもエレガントで、本当にすごい。

※ exampleのコードではpoints.jsは使ってなくて、おそらくgetPoints()の内部にコピー&ペーストしているが、保守性を考えるとpoints.jsを使うのが望ましい。

Photoshopのテキストを全てシェイプに変換するスクリプト

Photoshopで作成して納品したデザインデータを、「こちらで調整ができるように文字をシェイプにして渡して欲しい」と言われ、本来であれば小さな変更でもこちらを通してやってもらいたくかつその分の作業費も受け取りたいところではあるが、先方にも色々事情があることはわかるし世の中は綺麗事だけでは進まない(完璧を目指すよりまず終わらせろ)。

Illustratorだと文字を選択してアウトライン化するのは比較的楽なんだけど、Photoshopの場合はレイヤーパネルとかから一つ一つ選択して変換しなければならない(と思う)。修正したり何かする度に沢山のレイヤーから漏れなくテキストをシェイプ化して納品用データを作り直すのが地味に大変。ということで書いた。

text2shape.jsx

Sketchで作ったデータをPhotoshopに移動させる

Sketchを使っているのが自分だけで、他の人が開けないのでPhotoshopに移動させたい。編集できる必要はなくて、各オブジェクトのサイズや位置などが分かるリッチなビューアとして使ってもらう。

Sketch側のレイヤー構成はこんな感じで、パーツ単位でスライスを指定しておく。

SketchToolをインストール(install.shを実行するかパスを通せば良い)し、

sketchtool export slices design.sketch

とするとスライスが書き出される。「-o パス」で書き出し先を指定できるはずだがエラーでうまく動かず「1」というフォルダが作られてしまう。同じ名前のスライスがあると上書きされてしまうので注意する。

sketchtool list slices design.sketch > export.json

などとするとスライスの情報がJSON形式で出力される。

スライスされた各パーツのサイズや位置が記録されているので、あとはこのJSONを元にPhotoshopで再現してあげればよい。PSD.rbも使ってみたかったが、PhotoshopのJavaScriptでやってみた。JSONのパースは信頼のCrockford先生によるJSON2を使用。書き出したスライスデータは「export」というフォルダ名にして、同じ階層に置いてある。Photoshopを起動して「File>Scripts>Browse...(英語環境にしてるので)」を選択して、sketch2psd.jsxと名付けた下のファイルを選択する。

sketch2psd.jsx

#include "json2.js";

var currentDir = new File($.fileName).parent;
var file = new File(currentDir + "/export.json");
file.open();
var jsonString = file.read();
var layoutJson = JSON.parse(jsonString);
var slices = layoutJson.pages[0].slices;
var bounds = layoutJson.pages[0].bounds.split(",");
var offsetX = -parseInt(bounds[0], 10);
var offsetY = -parseInt(bounds[1], 10);
var width = parseInt(bounds[2], 10);
var height = parseInt(bounds[3], 10);
var doc = documents.add(width, height, 72, "psd", NewDocumentMode.RGB);

for(var i=0; i<slices.length; i++) {
  var imgFile = new File(currentDir + "/export/" + slices[i].name + ".png");
  var openedDoc = open(imgFile);
  var partsName = slices[i].name;
  openedDoc.name = partsName;
  openedDoc.selection.selectAll();
  openedDoc.selection.copy();
  openedDoc.close();
  activeDocument = doc;
  doc.paste();
  
  var currentLayer = activeDocument.activeLayer;
  currentLayer.name = partsName;
  currentLayer.translate(-currentLayer.bounds[0], -currentLayer.bounds[1]);
  currentLayer.translate(slices[i].rect.x + offsetX, slices[i].rect.y + offsetY);
}

処理内容としては、先ほどexportしたpngを開いて全選択し、ひたすらコピペしている。PhotoshopのJavaScriptでのファイルの扱い方はJAVASCRIPT TOOLS GUIDEというドキュメントに書かれているのだけど、2014版がないし、公式でも探せなくて泣ける。それ以外はここにある。

Alignなどの問題か、文字のレイヤーなどパーツによってずれが出たり、Sketch上で位置を修正してもJSONで書き出した際にboundsが更新されてなかったり(offsetX, offsetYで対応してある箇所)、おかしなところが結構あって、仕事で使うには厳しいといった印象。それでも手でひとつひとつ並べるよりかは楽。

stonewall開発日記14

自分でレイアウトのスタイルを定義して差し替えられる仕組みを追加してタグv1.0.0つけた。レイアウトのスタイルと言っても普通にJavaScriptで関数を書く必要がある。

Stonewallのインスタンス生成時に渡す設定オブジェクトに少し変更を加えて、layoutStyle:'レイアウトスタイル名'でスタイルを指定するようにした。自分で定義したスタイルを使うには、layoutStyleにレイアウト名を設定して、StonewallのインスタンスオブジェクトのメソッドregisterLayout('レイアウト名', 定義した関数)を実行すると、calculatePositionメソッド内で定義した関数が使われるようになる。Stonewallのインスタンスオブジェクトのコンテキストで関数を実行するためにbindを使ったのだけど、古いブラウザに対応するにはapplyとかで地道に対応した方が良かったかも知れない。

使えるのかどうか不明だけど、ある程度位置が揃いつつ微妙に散らかるレイアウトのサンプルを作った。そのままだと次のページ読み込んだ時とかリサイズした際に位置が変わるのでごちゃごちゃするけどそれもエフェクトの一部としてみたり。少し変えればこれに近いのとか作れると思う。

飽きそうだけどドキュメントとか充実させるフェーズに入る。

stonewall開発日記13

前回作ったaddとremoveメソッドをpushとpopに名前を変えて、新たにaddとremoveを実装し直した。

addは配列の任意の位置にオブジェクトを追加でき、removeは配列の任意の位置からオブジェクトを削除できる。その後resetGridを呼んで、buildを呼ぶと新しい要素でレイアウトが行われる。

これでversion 1にしようと思っていたが、レイアウトの仕方をプラグイン的な仕組みで差し替えられるような機能を追加してからにしようと思う。

stonewall開発日記12

前回の投稿を踏まえて、大きくリファクタリングした。変更点としては、

1. レイアウト対象の要素を配列からオブジェクトにし、位置やサイズを持たせるようにした。
2. 位置とサイズの計算だけをするcalculatePositionを作り、build内で呼ぶようにした。
3. レイアウト対象の要素をcellからstoneという名前に変更した。

calculatePositionはDOMに対して操作をしないように心がけて、元のサイズを測る時にcloneNodeを使ってみたのだけど、テキストの場合にうまくいかなかった。苦し紛れに元のサイズを保持しておき、計算してから戻すということをしている。さらにコールバック関数を受け取って引数にレイアウト対象オブジェクトの配列を返すようにしてあるので、jQueryとかと組み合わせるとエフェクトをつけやすい。

Tumblr with jQuery

あとは追加や削除した際に効率的にレイアウトする機能をつけてversion 1としたい。

stonewall開発日記11

exampleを改修してLoadNextボタンを押すと継ぎ足しできるようにした。今のexampleの処理の流れは

LoadNextをクリックする

Tumblrから次の20件を取ってくる

受け取ったデータを#containerに追加

Stonewallで#container内の要素を全て並び替え直す

となっている。「全て並び替え直す」というところはStonewallのインスタンスを作り直しているからなのだけど、既に並んでいるものをもう一度並べ直すのは無駄だし、数が増えるごとにその無駄が増えるので、追加した要素だけを並べるようにしたい。
ということでadd()とremove()をつけることにした。並べる要素はDOM Elementのコレクションになっているので、いったん配列に変換して扱うようにしてある。まだ実装していないけど、任意の要素を削除したり、任意の位置に追加できるようにしたい。
ただ、現状のaddやremoveは「Stonewallの管理下に入れる」「Stonewallの管理下から外す」ということでしかない。なのでaddしただけでは表示されないし、removeしただけでは表示が残ったままになる。単純に位置の計算だけを行うようにして、DOM操作を行わないようにするか、要素を追加したり削除することも含めて色々面倒を見るようにするか、考え直す必要がある。

CSS3のbackground-sizeプロパティを試す

CSS3で追加されたbackground-sizeプロパティに、contentかcoverを指定すると画像をウィンドウいっぱいに表示してくれるので、写真をでかく見せたい場合に使えそう。

Perfect Full Page Background Image

JavaScriptで切り替えられるようにしてみた。Chrome推奨です。
動作サンプル
https://gist.github.com/3473035

addEventlistenerのとこ、以前だったら何も考えずimg要素それぞれにイベントリスナーを登録してしまっていたけど、バブリングを利用するようにした。
How JavaScript Event Delegation Works

ステートフルJavaScriptで出てきた。

現状だと画像をそのまま引き延ばすので元データの解像度が低いと荒れてしまう。最大表示する際に画像を差し替えるなど工夫が必要。シンプルに使えるようにライブラリ化しておきたいところ。

stonewall開発日記10

リサイズイベントによって再度グリッドの引き直しをするためにコンストラクタから処理を分離した。で例によってTumblrから画像を引っ張ってくるサンプルをアップデートしたんだけど、これCSS3のMulti-Columnでよいのでは…と思って(このサンプルを思い出して)やってみたらやっぱそれでよかった(IEは10からじゃないと駄目だけど)。stonewallは左から右に要素を置いていくのに対し、Multi-Columnだと上から下なので全く同じという訳ではないが、タイル状に敷き詰めたいだけとか、上から下にレイアウトしていきたい場合にはCSSの方が良いだろうな。リサイズイベントを拾わなくても追従してくれるし。

前にも書いてたけど、やはりJavaScriptでしかできないレイアウトを実現するか、ベンダープレフィックスとかつけなきゃいけない現状のCSSよりは簡単で導入もしやすく古いブラウザの問題も解消する方向を検討したい。

グリッドデザインは単にグリッド状に並んでるだけじゃなくて垂直方向の間隔も揃ってないといけないんだけど、その辺までちゃんとやろうとするとすごく大変。
Preserving vertical rhythm with CSS and jQuery

レイアウトに関しては今回のMulti-ColumnやFlexible Boxとか色々遊べそうなので追っていきたい。

TumblrのAPIから画像を取得して表示するサンプルをアップデート

stonewallのexampleとしてTumblrからJSONPで画像URLを取得して表示するコードをgithubにアップしたけど、実際に動いているものもアップした。投稿順ではなく高さをなるべく揃えるように低いところに足していくモード。
http://hysysk.org/work/tumblr

今回のAPI KEYは別に見られても構わないのだけど、複数人でコードを共有する場合などでは望ましいことではないので、バージョン管理下に置くファイルと、動作確認用のファイルを分けている。

こんな感じのpythonスクリプトでtemp.htmlを作ってgitignoreに追加しておくと、いちいちAPI KEYを手で置き換えなくて良いし、間違ってキーが入った状態でコミットしたりしない。通常業務でやると大変です。

import re
input = open('index.html', 'r')
output = open('temp.html', 'w')
for line in input:
    output.write(line.replace("YOUR API KEY","PURkZinJvrZVtis5m8TxmEcAbM4dcgjlfvecnWJyEAIf5BpZVe"))
input.close()
output.close()

一応UglifyJSでミニファイしてサーバに置いてあるんだけど、「API KEYを置き換える→JSをミニファイする→サーバにアップ」まで自動化したいしするべき。

あと、基本的なことだけどAPIを叩いてパースしたり表示を確認するのは、レスポンスデータを保存したデータかAPIドキュメントを元に作成したダミーのデータで試すのがよい(実はTumblrのAPIドキュメントにはフルサイズの画像を取得するoriginal_sizeというキーが抜けていたりする)。

それにしても実際に動いているものを触っていると色々と対応したいことがでてくる。ウィンドウサイズの変化に追従するとか、オートページングとか。クリックでオリジナル画像が表示されるとか。

ちなみに以前の画像が1枚しか読まれない問題は読み込み時のコードに不具合があったからでした。この話題についてはまた別の投稿で掘り下げたい。

stonewall開発日記7 Tumblr APIからJSONPを取得して画像を並べるサンプル

一通りできたので動作確認用にサンプルを作った。こういうグリッドで並べるようなレイアウトはtumblrやってる人ならだいたい好きだと思うからtumblrのAPIを使ってみた。動作確認していく上で細かなバグも見つかり、足りていないテストを追加したりした。JSONPのコールバック関数実行を待ってからレイアウト処理を実行しているからというのもあるけど、実際に使うと割とまだ面倒な感じで、今後どう改善するかを検討したい。

以下はTumblr APIをクライアント側のJavaScriptから利用する方法

Tumblrにアプリケーションを登録してOAuthキーを取得

ここでアプリケーションを登録。Application nameとApplication descriptionは何でもよい(後で変更もできます)。今回はローカルで試すのと、投稿を取得するだけなのでOAuthのConsumer Keyのみを使うのでApplication websiteもDefault callback URLも空でよいです。

TumblrのAPIからJSONPを取得

XMLHttpRequestを使いたいところだけど、異なるドメイン間での通信ができないので、JSONPを使う。JSONPを取得するには、

http://api.tumblr.com/v2/blog/{Tumblrアドレス}/posts[/投稿タイプ]?api_key={OAuth Comsumer Key}&jsonp=[コールバック関数名]

として、動的にスクリプトタグを生成してリクエストを飛ばす。今回は画像のみなので投稿タイプはphotoにする。

JSONPをパースして表示

コールバック関数の仮引数にJSONが入っているので、画像のURLを取り出しImageオブジェクトを生成してDOMに追加。要素の高さを取得するため全てがロードされるのを待ってbuildメソッドを実行している。読み込み部分が悪いのかも知れないけど、たまに全件表示されないのと、表示までに意識しなければならないことが多過ぎるのが課題。

通常のTumblrに組み込む方法はまた別の投稿で書こうと思う。

stonewall開発日記6

縦方向の並びもテスト書いて通した。element.style.heightで要素の高さを取得しようとしていたのが間違いで、element.offsetHeightが欲しかったのだった。

コミットログ

ひとまずこれでNNNNYのサイトでやっているような並べ方の基本の部分はできた。exampleで実際に動きを確かめてみたいのだけど、いい方法を考えている。

stonewall開発日記5

コンストラクタ関数を使ってStonewallオブジェクトとして利用できるように変更。設定をbuildに渡してるけどこれもコンストラクタの引数に移動するつもり。

#qunit-fixtureのスタイルはposition:absoluteでマイナス位置を指定している(display:noneにしていない)ので、子要素の幅や高さは指定できるはずなんだけど、どうも高さがうまく設定できない。試しに#qunit-fixtureのtopとleftを0にしてみたりして見た目を確認してみたのだけど、幅も変わっていない。しかしテストは通っているので、テストの正当性も含めて調査することにします。何となくCSSが怪しい気はしている。

ダミーのデータを作るのにFilleratiとPlacehold.itを使った。

Viewのテストは難しい。

コミットログ

stonewall開発日記4

buildという関数にレイアウト用のオブジェクトを渡すようにした。DOM操作が必要となるので、テストにダミーのHTMLが必要になるのだけど、QUnitではテストを実行するHTMLに#qunit-fixtureというdivが用意されているので、そこに書く。

地味に関数名を変えたりしたのだけど、そういう時もテストがあると修正漏れとか見つけやすくてよい。

stonewall開発日記3

もたもたしているうちにVanilla MesonryというjQuery非依存のライブラリが出来てしまっていた。僕のは最終的なイメージがまだ固まっていないのだけど同じようなものにはしないつもり。

単純に要素がブロックになっていればよいという訳ではなく、行間や文字サイズが違っていてもベースラインを揃えたいだとか、そもそもグリッドは内容に合わせて引くものなので、テーマのように先にレイアウトがあってそこにコンテンツが流し込まれるのではなく、コンテンツに応じてレイアウトの方が決まっていくようなものにできればと思う。できるのかどうかはわからないけど。

グリッドレイアウトしたい要素の幅とコラムの幅からその隙間のマージンを計算する関数を追加。ここが割り切れない値になる可能性もあるのだけど、ひとまずは切り捨てる方向で考える。

コミットログはこちら

Responsiveな流れからすると単位を%にするのが良いのかもしれない。

Rolling Your Own Grid Layouts on the Fly Without a Framework | Design Shack

stonewall.js開発日記2

まず、どういう風に使いたいかというのを考えたのだけど、jQuery Masonryを参考にしてみる。

$('#container').masonry({
    itemSelector: '.box'
});

という感じで、グリッド表示したい要素に対して、Optionを設定したオブジェクトをmasonryメソッドで渡している。 columnWidthを指定しない場合は最初の要素の幅が適用される。 目標としてはひとまず、

• jQueryへの依存をなくす
• アニメーションなどのコードをなくしてレイアウトに焦点を当てる
• jQuery Masonryでできないことをする

といったところ。 まずContainerとなる要素の幅をColumnの幅で割るgetColumnsという関数を書いてみる。 コンテナの幅が960で、コラムの幅が300だとしたら、3が返ってくればよい。 testsディレクトリ以下にstonewall_test.jsというファイルを作成。

test("calculate number of columns", function() {
    var containerWidth = 960
        , columnWidth = 300
        , columnLength;
        columnLength = getColumns(containerWidth, columnWidth);
        equals(columnLength, 3);
});

レッド

これでtest以下のindex.htmlにstonewall.jsとstonewall_test.jsを追加しブラウザで開くとテストが実行されるはず。 結果は

    Died on test #1: getColumns is not defined - {}

というメッセージが出てテストが失敗する。 stonewall.jsにはまだ何も書いておらず、getColumns関数も無いのでこれは当然。 落ちるテストを書くことで、テスト自体が間違っていないことを確かめる。 いったんコミット。

グリーン

次にstonewall.jsの方にテストが通るように実装を書く。 3が返ってくる最も簡単な実装は、

var getColumns = function(containerWidth, columnWidth) {
    return 3;
};

となる。テストを実行すると無事通る。 コミットする。

リファクタリング

さすがにどんな値を渡しても常に3が返るようでは使い物にならないので、

     return Math.floor(containerWidth/columnWidth);

として、テストを実行し通ることを確認してコミット。 この「レッド、グリーン、リファクタリング」の繰り返しで、開発を進める。 例えばcolumnWidthが0だったら…とか文字列が渡されたら…というテストケースを追加し、 それらをパスするようにして品質を高めていく。 原則として「テストコードを書いている時はテスト対象のコードを変えない。テスト対象のコードを書いている時はテストコードを変えない」。 テスト書いておくと助かるのは後で設計を変えた時とかにどこを直せばよいかがわかりやすいところですね。とにかく赤になって落ちているところを直してグリーンにしていけばよい。

GIF STREAM

kkosugeさんのサイトがすごく面白かったので、node.jsがちょっと追っていない間にバージョンが上がりまくってたのと、WebSocketに対する興味からこんなの作ってみた。

GIF STREAM

サーバから4秒おきにGIFアニメのURLがimg要素のsrcにセットされるというだけ。なんだけど同期が取られているので複数タブや複数ウィンドウでも同じ画像が表示されるはず。

やってみて思ったのは、多分GIFアニメじゃなくても同期のタイミングさえ合っていればそれなりに楽しめそうということと、特定のコネクションから操作を受け付けるようにすればVJ的に画面の制御もできそうということ。

stonewall.js開発日記1

唐突ですが何かしら継続して勉強していけるものを作ろうと思ったので、高さの違う要素を敷き詰めて並べてくれるJavaScriptのライブラリを作ろうと思います。そういうことができるものは既に世の中にあるのだけど、開発手法や設計の勉強が主目的。名前はstonewall.jsとしました。 テスト駆動で作ろうと思うので、まずQUnitをダウンロード。使い方は使いながら覚える。 ディレクトリ構成はこんな感じ。example以下に実際に表示されるサンプル用のhtmlを置く。test以下のindex.htmlは、ブラウザで開くとQUnitのテスト結果を表示する。テストコードはtests以下に追加していく。

stonewall/
├── example
│   └── index.html
├── src
│   └── stonewall.js
└── test
    ├── index.html
    ├── lib
    │   └── qunit
    │       ├── qunit.css
    │       └── qunit.js
    └── tests

プロジェクトをgitのバージョン管理下に置く。QUnitは管理から外したいので.gitignoreを書いておく。 .gitignore

test/lib/

初期化。

git init

カレントディレクトリ以下をadd。

git add .

コミット。

git commit -m "Initial commit"

基本的にmasterはmergeするだけにしてbranchを切りまくるのがおすすめと聞いたので、そうします。

git branch temp
git checkout temp

これでtempブランチで作業を進めていける。 今日はここまで。

JavaScriptでSine Waveを鳴らす

連休中に色々と調べものしてて、dsp.jsというライブラリを見つけたので使ってみた。Chrome14でしか動作確認してない。Git覚えたくてgithubに上げたけど、これくらいならgistでよかったと思った。
SoundCheck

Audioletも面白そう。
最近node.jsも触ってみてるので、audiolib.jsも入れてみた。

node.jsはHomebrewからとかソースをビルドとか試してみたけど、nvm使って複数のバージョンを入れて動かすのが良さそう。

BEAM

BEAM
CGIとかJavaScriptの勉強しつつ触っている間に何かアイディアが出ないかなと思って自分用の画像スクラップを作った。FFFFound!やTumblrみたいにBookmarkletから画像のURLをPOSTで書き込み用のCGIに送って、テキストファイルに保存。表示用のCGIからURLを読み出してHTMLとJavaScriptを出力。
加えて不定期にローカルのPythonスクリプトからそのテキストファイルを読みに行って画像をダウンロードし、iPhoneの写真と同期させてる。

visual dropboxとあるように一時的に貼っておいて、適当に消す、気分で替える壁紙みたいなもの。BookmarkletなのでiPhoneからでも会社のコンピュータからでも自分のMacBookからでも投稿できる。涸れた感じの技術だけど個人的に楽しむ分には割と便利。広く使ってもらうためにはブラウザのプラグインとかにすればいいのかな。