デザイン
machida長らくブログを書かなかったので、右カラムの新着記事の一覧が@komagataさんのアイコンに占領されるという自体に。
ちょっと先月（2010年7月）はバタバタしてたのですが、お盆も終わったことだし、バタバタしてしまった反省もしたし、これからちょくちょくブログを書いていきます。
このバタバタしてたときにとっても役に立ったtodo管理のwebアプリ、todo.ly。
ものすごく使いやすくて、これを知った瞬間からすっかりヘヴィユーザーになりました。
http://todo.ly/
外国の先端のwebサービスって感じのトップページ。
僕はこの手のデザインに弱くて、ついつい使いたくなってしまいます。
sign upしたらメインのページへ。
すごくシンプルなメインページだけど、実はこのサービス、to do管理ツールの部分は下の画像にある1ページのみでページの遷移は一切ありません。
todo.lyにあるもの
左カラム
- Filters（to doの一覧を絞り込む）
- Projects（to doのカテゴリーの一覧を表示させる）
- Recycle Bin（ゴミ箱）
メインカラム
- to doの一覧の表示
- to doの新規追加の為の入力ボックス
これだけ！
このシンプルさは素敵過ぎ。
なんと言ってもtodo.lyはスピーディーに使えるところが使いたくなるポイント。
これはtodo.ly自体がAjaxでサクサク動くっていうのもあるし、UIもサクサクとタスクを登録できるように出来てる。
to do登録の手順
- まずはこれから登録するto doのカテゴリーを左カラムから選んでクリック。
- あとはto doの内容をメインカラムのボックスに入力するだけ。
to doを登録する際に考えることは、「to doのカテゴリー」と「to doの内容の文」だけ。
ページが遷移しないからサクサク動いてto doを登録するのに数秒しかかからない。
だからガンガンto do登録が進みます。
to doに期日（Due Date）も登録することができますが、しなくてもOK。必要なときはto do登録ボックスの下の「more」をクリックをすれば期日登録のボックスが表示されますが、「more」をクリックするまでは期日登録ボックスが目に入らないところもサクサク感を感じるポイントですね。
まぁ、上記の機能も動作も使い方もremember the milkにあるんだけど、Remember The Milkにはもっと機能があって、todo.lyの方はこれだけ。その分画面にある文字の量も情報も少ないので、Remember The Milkに比べてもっと使うのが簡単そうに見えます。
簡単そうだから特にIT系じゃないパソコンを使う人に勧めやすいです。僕が「使いたい」って思ったのも、やっぱり簡単そうだったから。まずは簡単そうに見えること、そして簡単なこと、これが大事ですね。
付箋にto doを書いてパソコンのモニターに貼ったりだとか、テキストエディタにto doリストを書いて終わったら消していく、なんて作業をやっているのを見たときに教えたくなるようなサービスです。
komagataRubyInstallerのロゴが凄いです。
RubyInstallerはプログラミング言語のRubyをWindowsに簡単にインストールできるソフトです。
Windowsロゴ
Rubyロゴ
RubyInstallerロゴ
RubyのロゴとWindowsのロゴをうまい具合に組み合わせてあるので、両方を知ってる人なら見ただけでどういうものか分かりそうです。
そもそもRubyInstallerのロゴはデザインコンテストを行って広く募集した中から投票で1位に選ばれた物です。オープンソースのソフトなどはどうしてもプログラマー寄りの物が多く、デザインは後回しになってしまうことが多いですが、一般の方にも使ってもらうにはデザインはとても重要なので、こうした成果物を見ると、こういったコンテストはとても有効だと思いました。
「プログラミングタスクを共有する」Help me, hackers!というサービスをリリースしました。
一言で言うと「報酬支払いインフラ付き共有・公開バグトラッキングシステム」です。（PayPalを使って支払いも出来ます。もちろん報酬とか無しの単なるタスクもアリです）
プログラマー同士がお互いのタスクを公開・共有しながら、実際の成果物を中心とした建設的なコミュニケーションを促進できればと思い作りました。
普通はTwitter上の知り合いが「仕事で何をやってるのか」「趣味で何を作ろうとしてるのか」などはブログなどに書いてないと分かりません。口に出してみると周りの人から「それだったらこういう解決方法があるよ」とか「あそこにもっといいプラグインがあったよ」などと耳寄り情報が入るときがあります。
だったら普段のBTS／TODOリスト的なものを常に公開しておけばそういったコミュニケーションが活発になり、仕事にも活用できるのではないかと思いました。
僕と@machidaさんは以前いたアクトインディ株式会社でBTSを使って島根県の凄腕Rubyistの方と仕事をさせていただきまいしたが、退社に伴ってそのBTSが使えなくなりました。（当たり前です）
「フィヨルドでもああいうの使いたい！」
「じゃあ作るしか・・・」
「どうせだったら他のみんなも使えるものにしたら便利かも」
という単純な発想から出来ております・・・。
利用にはTwitterアカウント必須ですが、面倒な登録はいりません。タスクも登録後に編集・削除は自由なので「今日やるタスク」とか「個人的に作ろうとしているモノ」などを試しに登録していただけるとありがたいです。
もちろん当初は全てのタスクに僕が全力で解決に挑みます！ｗ
只今思いっきり開発中のサービス、help me,hackers!では、hamlというテンプレート言語でマークアップを書いてます。
階層でブロックを分けるため、閉じタグがいらないの見た目がすっきりしてて実に見易いです（YAMLみたいに書くHTMLでHAML？）。
ERBだとこう書くところが…
ERB
hamlだとこう書きます。
haml
#profile
.left.column
#date= print_date
#address= current_user.address
.right.column
#email= current_user.email
#bio= current_user.bio
今回、僕も初めてhamlLに挑戦ということでhamlの公式サイトを見てみたら、なかなかイカしたサイトだったのでここで報告。
HAML（ハムル）なのでハムが置いてあります。
キャッチコピーは「マークアップ俳句」
先日（2010年4月22日）、pickという、2010年3月からスタートしたネイバージャパン株式会社さんの新サービスのイベント「pick’s PARTY VOL1!」に、普通に申し込んで参加してきました。
「人気WEB編集部と考えよう！毎日を楽しむための情報の集め方」 というテーマのイベントだったので、webメディアに関わってる人やブロガーの為の勉強会なのだと思ってたのですが、全然違っていて、無料酒は出るし、無料飯も出るし、ガチのパーティーでした。
他の人のことを考えずにスモークサーモンを食べまくり！
さてさて、今回のパーティーの主役である「pick」。
みんなが今、見つけた「いいよね。」をピックアップしていくサービスです。
「気になる！」「かわいい！」「かっこいい！」「面白い！」「参考になった！」「誰かに教えたい！」をどんどん共有、どんどんピック！
…というコンセプトのwebサービスで、僕の印象としては、「写真中心のtwitter（マイクロブログ）」、「ユーザー同士のコミュニケーションを重視したtumblr」って感じのサービス。
TLに流れるユーザーが投稿した写真や文章の中でお気に入りがあったら、twitterで言うところのretweet、またtumblrで言うところのreblogをして（pickではこの行為を「pick」と呼びます。）、任意でそれにコメントも付けられます。また、pickはせずにコメントだけすることも出来ます。
twitterやtumblrと同じで任意のユーザーをフォローする機能もあります。フォローをすると、フォローをしたユーザーの投稿、フォローをしたユーザーがpickした投稿が自分のTLに流れます。
気に入ったのは、画像をクリックすると大きくなるっていうアクション。
画像をクリックすると…
文章が消えてその分画像が大きくなる。
デザインも可愛いです。
トレードマークはwebサイトの地図サービスでよく見るバルーンの中にハートが入ったアイコン。
競争が激しいマイクロブログサービス。pickがこれからどんな展開をしていくのか、要注目かもしれません（そういった発表や話は今回のパーティーのプログラムにはありませんでした）。
オモロー不動産という物件紹介サイト。ここの契約済物件の表現が少し変わっています。
物件の価格などの情報を見ようとすると、変なクリーチャーが邪魔で見えません。（会員になる必要があるようです。）
これは、かたつむり？いや、かたつむりに似たよく分からない生物でしょう。秘ってかいてあるしな・・・。
かたつむりと違って雌雄同体ではなく、性別がある気がします。大きいのがオス、小さいのがメス、右のは子供。そう思いませんか？
そんなことはどうでもいいや。
ここの契約済物件がちょっと変わっています。
よく分からないですが、とにかく「この物件はもう買えないのだな」ということは伝わってきます。
先月まで僕と@machidaさんがお世話になっていたアクトインディ株式会社で技術ブログを作った時のお話。
アクトインディではエンジニアのリクルーティングのために求人サイトや派遣会社には1円足りともお金を出さないことにしました。その代わりそのお金（＝時間）を使って技術ブログを作ることにしました。（以前在籍していたウノウで素晴らしい効果を上げているのを目の当たりにしたので真似しました。）
そこで@machidaさんにデザインをお願いするんですが、サイトの「目的」と「イメージ」だけを伝えました。
目的：
- 大勢の人にみてもらいたいわけではなく、１〜２年に１人ぐらいのエンジニアをリクルーティングしたい。
- 極少数のコアなエンジニアに向けて技術情報を発信したい。
イメージ：
- 日立製作所では古くから、職級としてエンジニアのことを「技師」、リーダーのことを「主任技師」というらしい。面白い。
- 欧米から見たら日本も韓国も台湾も中国も区別がつかなくなってる、勘違いされてる日本。チバシティみたいな感じ。
@machidaさんが、「あ、なんかわかったような気がします」といって１時間ぐらいでpsdファイルを作って見せてくれました。
見た瞬間、「これはいけるｗｗｗ（どこにだかわからないが）」と思いました。
翌日chibaさんにこのブログシステムにデザインを反映してもらいました。※１
しかし、アクトインディ株式会社は葬儀相談を筆頭にしっかりとしたリアルなビジネスを展開してきた会社です。果たしてこんなふざけたブログをアクトインディの名で公開してもいいものか・・・。（僕らは至って真剣なんですが・・・）
僕は公開にあたって社長の@lupin13さんにこの技術ブログはリクルーティング活動の一貫であること、小さい名もない会社がピンポイントで優秀な技術者に来てもらうには多少、極端なやり方が必要であることなどを鹿爪らしく語ったあと、ようやくこのサイトを見せました。
@lupin13さん「う”〜〜〜〜〜〜〜〜ん・・・」
・・・あれ？もしかして僕と@machidaさんは社会人生命を揺るがすような大失敗をしてしまったのか？と不安にかられました。
@lupin13さん「僕には理解できないけど、@komagataさんがいうならエンジニアさんにとっては好まれるものになっているんだとおもいます。」
と言っていただけました。
公開後、メンバーみんなでの更新のかいもあってか、エンジニア（のみ）からはとても良い評判を頂いています。一般の方は眉をひそめ、デザイナーは立ち去り、エンジニアには評判が良いという、良くも悪くも当初の狙い通りになったと言えます。
「デザインでユーザーのフィルタリングができる」というパワーにはびっくりしました。
目的の方はどうなったかというと、@quekさんというありえない方が入社してくださったり、@lupin13さんの知り合いのシステム会社の経営者の方からは、その会社の社内でも長年の懸案である「技術の蓄積とアウトプット」という難しいがしっかりとした活動をしていて評価できるとの声をいただいたり、正直ここまで効果があるとは思いませんでした。
※１：
そもそもこのブログのシステム部分はchibaさんによってCommon Lispで作られています。記事を投稿するにはサーバー上のCommon Lisp処理系のプロセスにアタッチし、投稿専用のマクロを実行する必要がありました。（記事はメモリ上にしかないので落ちると消えてしまう）
２週間Common Lispを勉強してようやく投稿ができるようになったばかりの僕のスキルではデザインの反映すらできない状態でした。（その後、@quekさんによって改良が続き、データはDBに永続化され、Web上から投稿もできるようになりました。）
なかなか評判のいいフィヨルドの名刺の自慢です（写真がイマイチ）。
経費削減の為にオンデマンドで注文してイラレのデータで入稿。
でも、角丸加工にちょっとお金をかけてます。
今回はこちらで注文しました。
スピード名刺プリントオンライン
株式会社MEDIX
http://www.speedprint.jp/
紙は、アートポスト200kg-4C/1Cです。
分厚くてお気に入りです。
ちなみにかかった金額は、@komagataさんと僕（@machida）の分で合計2,860円（100枚 × 2人分 ＝ 合計200枚）。
家のプリンターで印刷するよりオンデマンドで注文した方が名刺って手間もかからないし安いのでおすすめ。
今回の名刺の金額の内訳
商品名：名刺-アートポスト200kg-4C/1C（町田哲平様）
数量：1.0箱
単価：1,100
金額：1,100
———————————————————————-
商品名：名刺-アートポスト200kg-4C/1C（駒形真幸様）
数量：1.0箱
単価：1,100
金額：1,100
———————————————————————-
商品名：角丸加工
数量：1件
単価：300
金額：300
———————————————————————-
商品名：クロネコメール便A4-2
数量：1冊
単価：160
金額：160
———————————————————————-
商品名：コンビニ支払票代行会社発行手数料
数量：1件
単価：200
金額：200
———————————————————————-
＜ 合計 ＞ 2,860
見積もりをとってもらったときのメールに、
既にご承知のことと存じますが、
ベタなど塗り潰しプリントではオンデマンド印刷方式の特徴から、
トナー定着の不均一により、ムラ・カスレが発生致します。
機器性能上のムラ・カスレは不良となりませんので、予めご留意下さい。
…という、不安にさせられるメッセージが！
それでもオンデマンド印刷の安さには代えられず、えいやっ！で思い切って注文したところ、結果満足のいく出来のものが届いてほっとしました。
株式会社MEDIXさん、ありがとうございます！
それにしてもwebと違って印刷物はやり直しがきかないので毎回届くまでドキドキして心臓に悪いです。
プログラマー御用達のソーシャル・コーディングサイト、githubのマスコットキャラのこのタコ猫。オクトキャットというそうです。
右唇の端が少し上がってます。
エラーが出てもこの生物自体の正体不明さに怒る気も失せてしまいます。これがゆるキャラってやつでしょうか。
octocatで検索していたらデイビッドさんという方が作ったOCTOCAT ADVENTUREというアニメーションを見つけました。（音量注意です。）
Octocat Adventures (HD) from David OReilly on Vimeo.
音だけ聞くと始めの内はピングーを彷彿とさせますが、その身の狂気は隠しきれません。最後に日本語の歌？が流れるところや、わざわざHD画質で動画をアップしているところも気になります・・・。
