5/17の土曜日に、はじめてのハッカソン Vol.3に行ってきました。
みまさんにお誘いいただいていたのですが、前回・前々回は都合がつかずに不参加。で、今回は都合がついたので、参加しようと。

勉強とか後回しにしがちなので、こういうきっかけをいただけるのはありがたいことです。ほんとに。

チーム

• Makoto Ogata さん （マークアップ、UI）
• Toro_Unit （バックエンドとかシステムもろもろ）

デザイナーがいなかったので、ロゴはみまさんに助けていただきました。かわいい。

作ったもの

んでとりあえず、こんなものをつくりました。

http://nekoneko.torounit.com/

レポジトリはこちら https://github.com/torounit/catsearch

概要

HTML5 Geolocation api を使って現在地の緯度経度を取得し、その近くで撮影された（であろう）猫の写真をひたすら表示します。

あと、検索窓に適当なスポット名（「東京タワー」とか）入れるとそこの近くの猫の写真を表示します。

という非常に単純なサービスです。

実装

API等で取得した緯度経度と、検索文字列「instagram.com%20猫%20OR%20ねこ」をTwitterの「search/tweets」に投げます。そして、帰ってきたTweetからURLを取り出しそれをinstagramのAPIに投げて、画像の情報を取得するという流れです。

instagramのEmbedding EndpointsというAPIにURLを投げ、帰ってきた情報から画像IDと取り出し、もう一度別のAPIに投げるという非効率な実装をしているので、めちゃめちゃ重いです。そんなわけで一度取った情報はサーバーにキャッシュするようにしています。

いまブログ書きながら、ドキュメント見てたらこの部分無くても良さそうな感じですね。。。。せつない。。。

検索機能の実装は、Google Map APIで、住所から緯度経度を取得し投げているだけです。Google Map APIすごい。

実装の経緯

最初はinstagramの/media/searchを叩いて近所の写真をとってこれるし、余裕でしょ！とかテキトーなことを考えてたのですが、いざやってみると全然猫の写真ないし、paginationはこのAPIに無さそうだし、開始1時間くらいは「詰んだ？」とかずーっと思ってました。

そしてその後、TwitterAPIを使う方向に切り替えたんですけど、TwitterだとBotは多いし、名前も検索対象だったりするので、精度的にお話にならなかったんですが、”instagram.com”を含むツイートのみに絞ると案外、そこそこ目的のものに近い結果が取得できたので、何とかなりました。追い詰められると人間なかなかがんばれるもんですね。

そんなわけで、instagramの写真をTwitterで探すという、謎な実装になってます。

感想

とりあえず、最初のアイデア出しのときに、ただひたすら猫への愛情だけを語り、実装をろくに考えずにやったのはまずったなぁと。そんな私におつきあいいただいたOgataさんには、大変な感謝です。はい。

また、仕様的にはめちゃめちゃシンプルでコードの量もかなり少ない方だと思いますが、それでも結構ぎりぎりまで作業する羽目になってました。2時間くらい時間余らせて、そこで機能追加したいなぁとか最初は思っていたんですけどね・・・・。

自分がアイデアを出してというのも初めてだったんですが、最初の段階で、ディレクトリ構造やら、ファイルの受け渡し方法だとか、ちゃんと決めておけばよかったなぁとも。2人のチームでもファイルのマージやらで苦労しました。3人とかだったら崩壊してるかもですね・・・。

日々の制作のやり方などを改めて考えさせられます。
とにかく技術面以外の部分で考えさせられることが多かった気がします。

まぁ反省材料も多かったのですが、それでも14時過ぎから19時半という短い時間の中、実際に動作するものが作れたのはよかったのかなと。懇親会のビールがとても美味しかったです。

なかなか普段得られない気づきがあって、ものすごい勉強になった1日でした。
スタッフの皆様ありがとうございました！

「別にテーブルレイアウトでもいいんじゃないの？」

こんな問題提起をされまして、ちょっと僕なりの見解というか技術との向き合い方みたいなものをまとめてみようかなと思います。
まぁ、高品質なものをアウトプットしていきたいのはそりゃそーなんですけど、それって具体的にどういうことかとかちょっと突っ込んで考えてみようと思います。

友人に、「ポートフォリオないの？」って言われたのをこのあいだ思い出して、とりあえず、hashChangeとかjQuery,JavaScript周りの練習にちょうど良いネタだなと思いとりあえず、作ってみました。手段のために目的を探している感が強いですが・・・

https://torounit.com/portfolio/

中身も頑張って増やしていきます！

最近、Dropbox以外にもオンラインストレージサービスが増えてきましたよね。スマートフォンのおかげで、仕事だけでなくプライベートでも便利に使えそうです。

そんなわけでちょっとまとめてみました。

調べてみると結構たくさんありますよね。ここに載せてないのでも最近Windowsに対応したUbuntu One等、たくさんあるので、上手に活用して便利にパソコン、スマホライフを満喫しましょー！

2012年、あけましておめでとうございます。

去年はWordCampに参加したり、プラグインをリリースしたり、Toro_Unit的WordPress元年になりました。いろんな人とお話することもできました。その過程でたくさんの人にもお世話になりました。

今年も積極的にそういう場に出ていったり、アウトプットをしていける1年にしたいと思います。

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

このサイトでは、jetpackを導入しているのですが、そのおかげか、WordPress.comからこのサイトの年間まとめレポートが届きました。
http://jetpack.me/annual-report/21660178/2011/

今年の人気記事TOP5はこんな感じだったようです。

1. jQuery.uploadでアップロード画像のサムネイルの作成
2. ie9.jsを使うと出来ること、出来なくなること。
3. jQuery hashchange event を使ってみた。
4. カスタム分類のパーマリンクを”/カスタム投稿名/カスタム分類名/項目”にする。
5. カスタム投稿のカスタマイズ

今年も、誰かの役に立つようなエントリーがたくさん書けるように、日々精進ですね。

細々と作っています、ねこつい （http://neko.torounit.com/）ですが、アップデートしました。

ユーザーのサムネイルをクリックすると、そのユーザーの写真一覧が出るようにしました。

スクリプトも要望があれば配布するかもしれません。

皆様の癒しになれば幸いです・・・・

ブログを書くまでがWordCampということで、このままだといつまでもWordCampが終わらないので、ブログ書きます。

まず、品川シーサイドに着くまでは良かったのですが、駅をでてから20分近く駅前をさまよいます。そんな中、半ば絶望の中Twitterを見ていたら

というTweetを発見し、何とか無事に到着。2コマ目のセッションからなんとか参加できました。

2コマ目 WordPress プラグインを作って世界と交流しようぜ！はプラグイン作者に片足を突っ込んだばかりの自分には、ためになる話でした。
とりあえず公式ディレクトリにあげたほうが、メンテナンスも楽だし、フォーラムとかでツッコミが入っていいよ。的なことがメインテーマだった気がします。みんなが怖がる英語も、ユーザーにはネイティブは少ないから、案外大丈夫とのこと。

3コマはたけさんのセッション。
別にword pressのプラグインとかでゴリゴリカスタマイズするような話ではなく、アイデアや発想で、こんなふうにもあんなふうにも使えるんだという話。
とっけんの裏側はちょっとした衝撃。自分もまだ、WordPress＝ブログとしてしか使えてないなぁ。

4コマ目 WordPress の現在とこれから
2.7から始めた僕としては0.71とかホントになんじゃこりゃ。
自分のブログを書くツールの開発が、こんなプロジェクトになるってのはある種のアメリカンドリームみたいですね。

5コマ目 本当にあった WordPress テーマにまつわる怖い話
いや、Google八分は怖い。((((；゜Д゜)))
プラグインとかテーマを信用しすぎるなっていうこと。WordPressにもいくつかセキュリティ関係のプラグイン有るけれど、普通のセキュリティソフトと一緒で、必ずしも100％ではない。

6コマ目 実践！オリジナルテーマで作る、スマホサイト＆マルチスクリーンサイト – たにぐち　まこと

モバイルファーストって実は初耳でした。確かに。思うことは結構ありました。
しかしモバイルの現場は相変わらず厳しいですね。やっぱりモバイルは画面いっぱいで見せるのか基本だから画面のサイズとかだけても考慮すべきことはたくさんあります。
とりあえずieは消えろ。と切に願う今日この頃です。

7コマ目 クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフレームワーク思考
MVCの考え方をテーマにも導入しようという話。
MVCって概念は知っているけど、実際にどうすればいいかよくわからない自分にとっては有り難い話。
WordPressのテーマを例に話をしていたけれど、他の開発でも活用できる話です。

8コマ目 WordCamp Tokyo 2011 公式サイトが出来るまで
CSS一枚で良くぞ・・・・・。苦労が忍ばれます。

最後はライトニングトーク
WordPressと棒ブログサービスの違いを合コンにたとえてみたり、勢いでWordPressの良さを叫んでいたり、笑わせて頂きました。

まぁその後は懇親会です。

相変わらず、人見知り全開でしたが、主にTwitter等で絡みがある人数人とお話させて頂く事ができました。いや、お酒がないとしんどいですね。もう少しアクティブになれると良いですね。勉強会とかもっと参加とかもしたいです。

まあそんなこんなで色々楽しい一日でした。
改めてスタッフの皆さんありがとうございました。

僕の本業は、HTML、CSS、JavaScriptと言ったフロントエンドのコーディング・プログラミング、そしてCMSカスタマイズ、たまにバックエンドとかやったりと、自らデザインという部分に関わることってのはそこまで多くもないのですが、そんな立場から『WEBデザイン』というものについて考えていることをつらつらと。

そんな訳で、デザインというものも大事なんだと、思う今日この頃です。こういう目線ってやっぱり、直接デザインにかかわらない人でも必要だとは思うし、僕みたいなHTML・CSSコーダー上がりのフロントエンドな人はjQueryだとか、HTML5だとかで、そういうデザイン的な素養を問われる場面も増えている様な気もしますしね。

リニューアルしました。まだ変更とか有るとは思いますが、随時変更していこうと思います。
ついでにWordPressをマルチサイトにしました。

新しいToro-Unitをよろしくお願いします。