日曜日, 12月 08, 2013

2013年振り返り1

年始のKPTを思い出してみよう。
new new new new year

Keep

デザインとかファッションに興味を持ち続ける

これはできてる。より興味が強くなっていると言っていい。Opening Ceremonyの移転オープンとか、spoken words projectのコレクションとか行った。あとファッションブランドの案件を少し手伝った。

HTML, CSS, JavaScript, ActionScript3, Objective-C

HTML, CSS, JavaScriptは書けたけど、ActionScript3は仕事のプロトタイプで少し書いただけ、Objective-Cは全く書いていない。つらい。

Ruby, Python, PHP

Rubyは日々の業務を楽にするスクリプトを沢山書いた。必要なファイルがちゃんとあるかとか、自動処理を行う前段階でデータを整形するためとか。Pythonは趣味のスクレイピングと、Udacityのコンピュータサイエンスの授業で少し書いた。PHPも趣味だけど人生では一番書いた気がする。今っぽくないレンタルサーバとかでちょっとしたものを作るのに役立った。

データベースの勉強

MySQLに関しては少し進んだ。MongoDBはほんの少し。

次の仕事探し

は実際にしたし、転職もできた。

Problem

インターネット見過ぎ

見なくなった。まず仕事中は一切ソーシャルメディアを見ていないし、フィードも読んでいない。あと睡眠の質を上げるために就寝前はモニタを見ないようにしている。

プログラムの設計

あまり設計が必要な程規模の大きいものを書かなかったけど、前よりは変更に強かったり再利用しやすいコードが書けてると思う。

スケジュールの見積もり

高い精度の見積もりが要求される案件がなかった。

部屋の片付け

できてない。まず物を減らすことが必要。

ごみの捨て忘れ

前日に捨てるか、会社が変わってからは早起きするようになったのでほぼなし。解決。

近しいはずの人ほど適当に扱いがち

改善したつもり。

自動化足りてない

業務でかなりのデザイン作業を自動化した。日常生活にはあまり取り入れられていない。

Try

関数型言語で何か作る

できてない。

技術だけでなくマネジメントも勉強する

してない。

データドリブンなグラフィックデザイン

してない。

ゲームを作る

仕事で作ってるんだけど、役割が細分化され過ぎててTryしようとしていたこと(仕組みを考え、画を作り、実装する)はできてない。

音楽を作る

作った。

お金を稼ぐ

去年よりは稼いでる。

まとめ

今年の夏に入籍したり、衝撃的な出会いがあったり、新しい会社での仕事がつらいせいでかなり考え方が変わった。年始には全く予期していなかったことだ。今年は技術的に進歩した手応えがなく、今まで目を背けていたことや、他の人が普通にやってのけている(ようにみえる)ことをちゃんとやろうとしてうまくいかなかった年だったように思う。

とはいえそれらの出来事がこの先どうやって生きて行くかを考えるきっかけになり、興味関心が変わり、情報の収集源も変わってきたので、新鮮に日々を楽しめているし、何かが起こりそうな予感もしています。その辺は次の投稿で。

火曜日, 8月 27, 2013

Weighted Voronoi Stippling


何となくいい感じに点を散らす方法を探していて、Evil Mad Scientistの人が作っていたやつを思い出した。 StippleGen: Weighted Voronoi stippling and TSP paths in Processing | Evil Mad Scientist Laboratories

元のソースはこれ。 Weighted Voronoi Stippling
論文もあって、他にも面白そうな研究が沢山。

仕組みとしては適当に点を置いた後、ボロノイ領域に分け、その領域を正方形に近づくよう変形したものの中心に点を移動させて描画している。

中身を整理して必要なところだけ抜き出した。Processingの2.0.2で、toxiclibと適当な画像を用意して下さい(コードと同階層にdataフォルダを作り、img.jpgで保存)。
stipple.pde

VoronoiができるということはDelaunayもすぐできるだろうと思ってJonathan PuckeyのDelaunay Raster的なことをやってみた。
weighted_delaunay.pde


が、あんまり面白くない


できていく過程だったり


点の結び方を変える(vertexをコメントアウトしてわざと三角形にしない)とか


整然としているのであれば線の方がまだ何かに使えるかも知れない

点の打ち方と、色の塗り方をどうするかが大事なんだと思った。

Evil Mad Scientistのやつは巡回セールスマン問題のアルゴリズムを使って、点を打つ機械が最短の動きで描画できるようにもしてある。実行時間を縮めるにはああいう処理が必要になってくるんですね。かつ視覚的にも面白い。

月曜日, 7月 15, 2013

stonewall開発日記14

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

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

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

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

月曜日, 4月 08, 2013

stonewall開発日記13

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

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

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

日曜日, 4月 07, 2013

HACKDESIGN Lesson 10

Lesson 10はラピッドプロトタイピングについて。

Design Better And Faster With Rapid Prototyping

プロトタイプのFIDELITY(忠実性)には3つの側面がある。
システムの複雑さや要求によって使い分けが必要。経験上クライアントワークだと作り込み過ぎだったり、自社サービスだとぬるくなりがちだったりする。早い段階でグラフィックを作り込み過ぎると後で融通が利かなくなってしまったり、本来は機能に漏れがないかチェックするためのプロトタイプなのにグラフィックの善し悪しを議論してしまったりするので、段階に応じて適切なものを選ばなければならない。

The Aardvark Theory of Product: Fake It Till You Make It

Ardvarkのプロダクトは最初の9ヶ月間を人力で運用して、その間に自動化するための人員を雇ったとのこと。キーボードしか無かった時代にマウスのデモをした時、実際には手の動きに合わせて人がカーソルを動かしていた話を思い出す。ユーザーの反応を見ることでサービスなりプロダクトが本当に作る価値があるのかどうかを判断するにはとてもいい試みだと思う。自動化までのロードマップが設定されているのも大事。

Creating Interactive Prototypes With Keynote

KeynoteでiPhoneアプリケーションのプロトタイプを21分で作るデモ映像がある。

Fake It. Trash It. Build It.

UI/UXデザイナーがまずやりたいことを盛り込んだプロトタイプを作り、それをエンジニアが構築したい方法やフレームワークの上で作り直し、最終調整をする。デザインは可能性のビジョンを示すものだから、アイディアを捨てることになっても時間の無駄ではない。それらのアイディアはたいていまたどこかで使えるようになる。

Rapid Prototyping Tools

プロトタイピングツールの紹介。WebZap良さそう。

木曜日, 3月 21, 2013

HACKDESIGN Lesson9

HACKDESIGNという興味深いサイトがあって、最初はタイポグラフィとかデザインの基礎的な話題が中心だったんだけど、Month 3がUser Experience、Month 4はUser Interfaceということで、感想などをまとめてみる。冒頭でUXデザイナーの平均給与が高いとあるけど、これは限られた人しか就けず、母数が少ないポストだからなんじゃないかと思う。

Review: The Design of Everyday Things

日本では「誰のためのデザイン?」というタイトルで売ってる本のレビューで、いくつかの印象的な話が紹介されてる。もともとは1988年に"The Psychology of Everyday Things"というタイトルで出版されていたのだけど、その後PsychologyからDesignに変わったらしい。

課題は「よりよいユーザー体験よりも、デザイナーが楽をするために安易な選択をした事例を探そう」で、ヒントとして家電やリモコンを見てみようとある。

僕がいつもイライラするのはモバイルルータ。ボタンを長押しすると接続設定をマニュアルかオートに切り替えられるんだけど、マニュアル時は同じボタンを短く押すことでネットワーク接続を開始する。なのでなかなか反応がない場合に、よく誤って長く押してしまって意図せずオートに切り替わってしまう。元に戻すのにまた長押しして、今度は切り替わらないように気をつかって短く押すんだけど、未だにちょうどいい具合の押し方がわからない。

First Principles of Interaction Design

良くまとまっていると思った。Efficiency of the Userの項で、電子レンジで水を温める場合、1分10秒を指定する(1、1、0とボタンを押す)より1分11秒の方が速いというのはちょっと面白かった。0を探すのに1秒以上かかると、1分11秒間温めるのを待つよりも遅くなるという話。

Researching User Experience

ユーザー体験を調査する際にどの手法をいつ使うかという話。The Attitudinal vs. Behavioral Dimensionが面白くて、僕もよくTwitterやAppstoreなどでサービスについて言われていることを読んだりするし実際に意見を取り入れたりもするんだけど、正直「騒いでいるのは少数派」だなと感じることも少なくない。色々悪く言われてるように感じたとしても、定量データと照らし合わせることが必要。

Sketching User Experience

これくらい綺麗なワイヤーフレームを作ったり見たりしたいものだと思う。

Measuring User Experience

少ないサンプル数のユーザーの振る舞いから全体を予測する方法。意思決定に統計的な手法を取り入れる場面は今後も増えていくと思うし、そうしていきたい。

火曜日, 3月 12, 2013

stonewall開発日記12

前回の投稿を踏まえて、大きくリファクタリングした。変更点としては、
  1. レイアウト対象の要素を配列からオブジェクトにし、位置やサイズを持たせるようにした。
  2. 位置とサイズの計算だけをするcalculatePositionを作り、build内で呼ぶようにした。
  3. レイアウト対象の要素をcellからstoneという名前に変更した。

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

Tumblr with jQuery

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

日曜日, 3月 10, 2013

stonewall開発日記11

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

  1. LoadNextをクリックする

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

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

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


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

    火曜日, 1月 01, 2013

    new new new new year

    http://nnnny.jp/

    をすごく微妙にアップデートした。元々つなぎで作ったサイトで、jsonファイルに画像のパスとかタイトルだけ書いたら、グリッド状にレイアウトしてくれるみたいなフレームワークを作ってたんだけど、画像数も増えてきたので一定数のエントリで区切って必要に応じて継ぎ足すようにした。

    画像をクリックすると元画像にリンクしてたんだけど(グラフィックの詳細が見れていいと思う)、ついでにlightbox系のビューアもつけた。以前はFancyBoxとか使ってたんだけど、新しいバージョンにしようと思ったらライセンスがCC BY-NC 3.0になってたので自作した。ポモドーロテクニックを使って、画像だけなら見積もり通り5ポモドーロでできた。完成後に見つかったバグ修正やYouTube貼付け機能の追加は入れてないので実際はもう少しかかってる。テストないしWindowsで確認してないのでバグがあるかも知れない。ひどいと思うけど、今のところ「こんなことやってましてね」って対面で見せるために作ってるので…。これがバージョン2で、データベースを使ったバージョン3を開発中。

    まだまだ整理されてないところもあるけど、それなりに去年身につけたことを反映できたのではないかと思う。今までは割と変数名やメソッド名が適当で、メソッド名が示すことの以上のことを平気でやってしまったりしていたのだけど、そういうところを意識して設計や命名を適宜修正するよう心がけた。

    ビューア、レイアウト、ページ継ぎ足しを組み合わせたシンプルなギャラリーフレームワークがようやくできそうな雰囲気が掴めた。もうちょっと色気のある見せ方をしたいのと、ちゃんとテストも書いて、ファイルの最適化もしたい。Yeomanとか使うと良さそう。クロスブラウザ対策もSauceとか使ってみたい。

    という訳で去年と今年のKPT

    Keep

    • デザインとかファッションに興味を持ち続ける
    • HTML, CSS, JavaScript, ActionScript3, Objective-C
    • Ruby, Python, PHP
    • データベースの勉強
    • 次の仕事探し

    Problem

    • インターネット見過ぎ
    • プログラムの設計
    • スケジュールの見積もり
    • 部屋の片付け
    • ごみ捨て忘れ
    • 近しいはずの人ほど適当に扱いがち
    • 自動化足りてない

    Try

    • 関数型言語で何か作る
    • 技術だけでなくマネジメントも勉強する
    • データドリブンなグラフィックデザイン
    • ゲームを作る
    • 音楽を作る
    • お金を稼ぐ

    どうせこんなことを書いていても今日の夕方には忘れるし見返したりもしないので、折に触れてリマインドする仕組みが必要ですね。「問題を根性で解決するな、エンジニアリングで解決しろ」ということです。

    今年もよろしくお願いします。