iPhone用ビューをリリースしました

スマートフォン対応（iPhone用）のビューをリリースしました。PC版URLにアクセスを行うと自動的にリダイレクト処理が行われ、スマートフォンに最適化されたページが表示されるようになりました。






ページ下部のリンクから、PC版のビューに切り替えることも可能です。PC版へ切り替えるにはページ下部にある次の画像の「PC版」をクリック！



PC版ビューではログイン、ログアウト、会員情報の編集など、すべての機能が利用いただけます。

---

サイトのデータは逐次整理して確認しています。2週間ほど前にデータを確認したところ、実に驚くべきことが判りました。

元々MyBike.JPはTwitterとの結びつきが強いのですが、なんと全体のアクセスの半分が解像度320 x 480という解像度となっており、これはつまり、iPhoneからのアクセスがわたしたちの予想以上に多いと判断することが出来ました。

今月半ばに開催したMyBike Studyの際にスマートフォン対応にとりかかっていましたが、一部機能を整理してようやくリリースすることが出来ました。これでTwitterからのアクセスも快適です。

ログイン、ログアウト、会員登録など一部機能はまだ対応していません。また、Androidについても同様の対応を行う予定なので、アップデートを楽しみにお待ちください。

Enjoy!

nginxのGridFSブリッヂ

ここ数日サイトが非常に重たい状態となっておりご迷惑をおかけしております。エラーレポートが（メールで）送られてくるので問題は把握していたのですが、解決までに時間がかかってしまっています。

アプリケーション的、システム構成的、両面からのアプローチを検討し、2つの対策を行いました。

• アプリケーションの見直し


• システム構成変更による改善

アプリケーションの見直しは、モバイル対応を行った際に変更した部分が関係すると考え、その点を中心に見直しを行いました。いくつか問題点があったため変更を行いリリースしています。

もう一点、システム構成を変更して、保存された写真の提供方法を改善しました。

写真の提供方式について少し掘り下げて解説したいと思います。

旧方式ではnginxからFastCGIによりdjangoへ接続し、そこからMongoDB GridFSのファイルを取得していました。pythonで処理が行えるためプログラミング的にデバッグがやりやすい、加工等の処理が行い易いというメリットがありますが、反面、一度画像データをバッファリングする必要があり、メモリを圧迫する状況となっていました。



GridFSへのアクセスパスを効率的なものに変更できないか探したところ、nginxからMongoDB GridFSへブリッヂできるnginx-gridfsというライブラリを見つけました。

これはAPL / GPLで提供されるnginxの拡張モジュールで、nginxがHTTP経由で受け取ったリクエストに応じ、GridFS内のファイルを取得し、レスポンスすることができます。nginx内でも画像データのバッファリングは行っていると考えられますが、少なくともpythonプロセスでメモリを浪費することはなくなります。



パフォーマンス障害は深刻な問題だったため早急に対応を行う必要があり、構成変更前後でのベンチマークは取得していませんが、体感値ではずいぶんと高速化した印象です。

機能強化ももちろん必要ですが、ユーザが快適に利用出来ることも同じように重要です。時間は限られており様々な要望にすぐ答えることは難しいのですが、ユーザの体験を大事にして、便利で使いやすいサイトを目指して今後も改善を続けたいと思います。

MyBikeのタグ設計

MyBikeでのソーシャルタグの設計、採用しているフレームワークであるDjangoの特性について、BeProudさんの勉強会で話してきました。発表資料をslideshareで公開したので興味のある方は御覧ください。

Tagging architecture on MyBike.JP

View more presentations from Mitsukuni Sato.

日本語の名寄せなど課題は残っていますが、少しずつ改善していきたいと思います。

携帯電話用ビューをリリースしました

PC用サービスとして提供を続けていたMyBike.JPに携帯電話用のビューを追加しました。フィーチャーフォン、いわゆるガラパゴス携帯＝ガラケー用の画面で、主要国内3キャリアの携帯電話に対応しています。



新着、自転車の詳細ページ、オーナページなど一部機能のみの対応ですが、これで出先でも自転車を紹介できますね。http://mybike.jp/m/ もしくは以下のQRコードからアクセスすることが出来ます。



お楽しみください！

退会方法についてのご案内

サービス再開後のMyBike(mybikenote.com)はメールアドレスをもとにしたユーザアカウントの照会が行えないため、Facebookページからメッセージでお問い合わせください。

現在、MyBike.JPにはアカウントの退会を行う機能がありません。退会を希望される方は、MyBike.JPに登録しているメールアドレスから、info@mybike.jp宛に「退会希望」と添えてご連絡ください。数日中にアカウントの退会処理を行い、折り返しご連絡いたします。

なお、登録外のメールアドレスの場合、退会処理を行うことが出来ません（アカウントの検索が出来ません）のであらかじめご了承ください。

タグ機能をリリースしました

自転車へのタグ機能をリリースしました！

MyBike.JPには自転車のカテゴリがありません。これは、システム的にカテゴリを作成することで自転車を強制的に分類することになり、様々な種類の受け入れる方針と相容れないと考えているからです。しかし、やはり自転車を分類したいという要望が多く、最適な（最大公約数的な）解決策を考えていました。

写真サイトのFlickrや、ユーザ参加型動画サイトのニコニコ動画には「タグ職人」と呼ばれる方々が活躍していて、コンテンツにタグ付けを行っています。

これらにならい、MyBike.JPでもログイン済みのユーザは他のユーザのコンテンツにタグ付けを行うことが出来ます。

タグ付けは自転車の詳細画面、右下のフォームから行います。



以下のフォームに任意のタグを入力し、保存をクリックするとコンテンツにタグ付けが行われます。複数入力する場合には半角のカンマ（,）で区切ってください。



タグそのものをクリックすると、タグつながりの自転車を一覧ページへ遷移します。また、タグの右にある赤いアイコンをクリックすることで、不要なタグを削除することが出来ます。



ユーザによりつけられたタグは今後の統計解析に利用します。

メーカつながり、タグつながりなど、ユーザ入力データによる一覧ではなく、ショッピングサイトのAmazonで提供されているおすすめ商品のように、似かよった自転車や人に出会えるような仕組みを提供する予定です。

お楽しみに！

Happy riding!

MyBike Studyを開催しました

去る1/16に、BeProudさんのオフィスをお借りして、MyBike.JPのデベロッパミーティング「MyBike Study」を開催しました。今回は主にWebアプリケーションデベロッパの集まりで、MyBike.JPの内部構造、開発やバグ修正のフローなどの共有が目的です。

（後ほど資料を入れるかも）

システム構成の紹介を済ませた後は、環境構築、開発のハンズオン。

開発環境はほぼ全員Macを使っているのですが、構築者はずの環境構で画像ファイルのバリデーションエラーが発生したり、非同期タスクがクラッシュしたりとトラブルが続きました。しかし結局、PIL=Python Imaging LibraryのJpeg supportが無効になっていた（コンパイル後にはsupportedと表示されるのに！）ことが原因とわかり、開発に進むことが出来ました。

作業内容はチケット（作業内容や課題が書いてあります）の中から興味のあるものを自由に選びます。

Pythonに不慣れなエンジニアもいたのですが、つまずくところをフォローしながら進めると数時間後にはiPhone / Android用のビュー、国内モバイル3キャリア用のビューのプロトタイプが動くようになりました！

この成果は二月の上旬リリースを目標に作業を進めています。お楽しみに！

Enjoy coding!

プロフィールページをリリースしました

ユーザプロフィールページをリリースしました！

以前より「ユーザ別に自転車を見たい」、「この自転車のオーナは、他にも持っているのかな？」という意見、要望をいただいていました。ユーザプロフィールページをリリースしたことにより、そのユーザが所有している自転車の一覧表示が出来るようになりました。



ユーザプロフィールページは http://mybike.jp/people/usernameでアクセスすることが出来ます。私のアカウント名はkey3なので次のようになります。

http://mybike.jp/people/key3

また、自転車の個別ページから、オーナ欄をクリックすることでプロフィールページへ遷移することが出来ます。



素敵な自転車仲間が見つかると良いですね。

Happy Riding!

製造者別フレーム登録数

製造者別に自転車（フレーム）の登録数はきっと重要な統計情報なので、毎日バッチで取得しています。運用開始から一週間ほど経った現在、登録数はどうなっているでしょうか？上位15件を公開します。

             name              | count 
-------------------------------+-------
 Cannondale                    |    35
 LOOK                          |    27
 GIANT                         |    27
 Specialized                   |    27
 TREK                          |    27
 ANCHOR                        |    20
 Colnago                       |    18
 TIME                          |    16
 Panasonic                     |    15
 Cervélo                       |    14
 Pinarello                     |    14
 RIDLEY                        |    11
 Ravanello                     |    11
 Bianchi                       |    11
 ORBEA                         |    11

Cannondaleはダントツトップ。その他に、Specialized, TREKも上位にランクインしており、アメリカ勢が強いと言えそうです。台湾GIANTは孤軍奮闘ながら3位に位置しているのは世界最大の自転車メーカとしての意地（？）でしょうか。

日本やイタリア、フランスなど、その他の国も上位につけており、個人的には意外と散らばったなという印象です。

フレームナンバーはどこにあるの？

ほとんどの場合、ボトムブラケットシェルの裏側に打刻されています（部品に打ち込まれています）。次の写真は、自転車を左後ろから撮影したもので、赤くて丸い部品がボトムブラケットで、ねじ込まれている部分がボトムブラケットシェルです。



自転車を裏返すと、ボトムブラケットシェルにこのように刻印されています（全体像と拡大像の車両が異なっていてすいません）。



TREKは何故か3行もあるのですが、WTUから始まる文字がフレームナンバーのようです。

防犯登録番号やその他のシリアルナンバも入力したいという意見をいただいているので、こちらの制限は順次緩和する予定です。

---

フレームナンバーは自転車に固有の情報ですが、個人との直接的な結びつきはありません（MyBike.JPではメールアドレス以外の個人情報を取得していません）。

MyBikeは現在、自転車ギャラリーとして機能していますが、あらかじめフレームナンバーを登録しておくことで、盗難抑止、万が一盗難された際に、オークションサイトなどでの発見が比較的容易といったメリットがあります。

実は、自転車の写真を持っていない方が多く、「そういえば車台番号知らなかった…」という方もいらっしゃるなど、自分の自転車について意外とよく知らないことがあるものです。掃除ついでに確認してみてはいかがでしょうか？

Happy riding!

よくある質問とその回答

毎日のようにTwitterのハッシュタグ #mybike を検索して確認しています。よくいただく質問がまとまったので、こちらに掲載します。

Q. フレームナンバーってなんですか？

A. フレームそのものに振られた「車台番号」のことです。フレーム毎に固有のため、メーカは車台番号から製造ロットや場所などを検索できます。

Q. フレームナンバーはどこに書いてありますか？

A. ボトムブラケットの下に刻印されています。え、見たことない？一度確認してみてはいかがでしょうか。このQAの最後に写真を掲載します。

Q. 写真がアップロード出来ないのですが

A. iPhone / iPadは添付ファイル付きのフォームに対応していないため、写真をアップロードすることが出来ません。アプリの提供を予定しているので今しばらくお待ち下さい。それ以外の問題がある場合には次の項目をお読みください。

Q. どのような画像ファイルに対応していますか？

A. 2MBまでのJPEG画像に対応しています。この値が十分なものかどうかは、今後運営していく中で改めて検討します（おそらく拡大することになるでしょう）。

機能の追加、変更など

以下が変更となりました。

• 新規登録時に写真を登録できるようになりました


• 自転車詳細ページのURLをリンクするようにしました


• 自転車編集時にTwitterにつぶやくか選択できるようにしました


• その他あちこちバグの修正

大きな変更はありませんが、少しずつ改善しています。

機能の追加、変更など

• 最近登録された自転車、最近盗難に遭った自転車のページを新設しました


• 自転車詳細ページのHTML Descriptionを追加しました


• 横幅が540px未満の写真をアップロードした際の画質を改善しました


• Twitter連携が解除できるようになりました


• Twitter連携を行っているアカウントで、編集時につぶやいていたのを停止しました


• 縦横比の同じ画像（Instagramなど）をアップロードした際にサムネイルが生成されない不具合を修正

パブリックベータになりました

すでに一昨日の出来事でTwitter界隈には伝わっていると思いますが、MyBike.JPをパブリックベータとして公開しました。つい一昨日まではクローズテストステータスで、招待した方しかサービスを利用することが出来なかったのですが、メールアドレスをお持ちの方であればどなたでも登録することが出来ます。

以下のURLからメールアドレスを入力することで登録できます。

サインアップ - MyBike.JP

パブリックベータに変更したとたんに大量の問題が噴出し、せっせと修正を行っていたためこちらでの告知が遅れてしまい申し訳ございません。

現在のステータスですが、ユーザ数は270人超、自転車は（1度に1台しか乗れないのに）350台登録されています。登録されたみなさま、本当にどうもありがとうございます！

MyBike.JPへの機能要望は、ハッシュタグ #mybike や私（@key3）へのmentionでTwitterにつぶやいていただくか、こちらのブログへのコメントで受け付けています。

これからもよろしくお願いします。

製造者の入力欄にサジェスト（提案）を追加しました

製造者（メーカ）入力欄は自由に記入することができます。システム側では入力内容で既存データとのマッチングを行い、存在すれば既存データと紐付け、そうでなければ新規に登録するという処理を行っています。

これはユーザの自由度の高い方法といえますが、システム的には入力内容の細かい差によってデータが異なってしまいます。データが異なると「◯◯つながり」など、検索が行えないため問題です。

具体的には、例えばサドルメーカのセラ・イタリアという会社があります。「SELLE ITALIA」や「Selle ITALIA」、「SELLA ITALIA」と入力することが出来ますが、これらはすべて別のメーカとみなされます。セラ・イタリア本家のウェブサイトを見る限り、「selle ITALIA」というつづりが正しいようです。

テストに協力いただいている方々のデータを確認していると、大文字、小文字、カタカナ、漢字など、複数の文字がまぜこぜに利用されていることが判りました。次のような具合ですね。



人間は入力を間違ったり、勘違いして覚えていることが多々あるので、入力ミスをユーザのせいには出来ません。システム的に、入力・編集時に候補を挙げることで、入力ミスを減らすことが出来ると考えました。

アシアルさんの「jQuery用プラグイン「Autocomplete」を使って入力補完機能を実装してみる」を参考にjQuery Autocompleteを導入し、製造者名の入力欄にサジェスト機能を追加しました。



入力ミスが減り、データが綺麗になり、より多くのフレーム・パーツなどが発見できると、きっと素敵だろうと思います。

Twitter投稿機能をリリースしました

Twitter投稿機能をリリースしました！連携は次の手順で行ってください。

ページ上部の「アカウント」を開いてSIGN IN WITH TWITTERをクリックします。



Twitter.comのMyBike.JPアプリケーションの許可画面に切り替わります。内容文をよく読んで許可をクリックしてください（同意しない場合はTwitter投稿機能は利用できません）。



再度MyBike.JPのページに切り替わるのでアカウントページを確認します。「Twitterと連携しています（スクリーンネーム）」と表示されていれば連携完了です！



この機能を利用すると、自転車の登録時、編集時、削除時、（考えたくはないですが）盗難時にTwitterへ自動的に投稿が行われます。ハッシュタグ #mybike で検索することで、MyBike.JPに登録している他のユーザのアクティビティを見ることが出来るでしょう。

現在のところ簡単な内容文ですが、将来的に「盗難されました」、「売出中となりました」「処分されました」など、自転車のステータス変更に応じた文面に変更する予定です。この機能を利用することで、迅速に情報を伝播することができるようになり、盗難車両の早期発見、売出中自転車の里親募集などに活用できることでしょう。

oauth-python-twitterのパッチ

MyBike.JPではTwitterの連携にoauth-python-twitterを使っています。このライブラリを使うと容易にTwitter OAuth連携が作ることが出来ます。

しかし、開発環境などで別のドメインを使っている場合に、コールバック先URLを変更できない問題がありました（ちなみに、MyBike.JPでは商用環境がhttp://mybike.jp, 開発環境は主にhttp://localhost:8000で行っています）。

リクエストトークン取得部分に以下のようなパッチを当てて、コールバックURLを直接指定することで任意のURLへリダイレクトしています。

--- __init__.py-orig 2011-01-02 01:01:08.000000000 +0900
+++ __init__.py 2011-01-02 01:01:24.000000000 +0900
@@ -192,13 +192,14 @@
         token = self._FetchUrl(url, no_cache=True)
         return oauth.OAuthToken.from_string(token) 
 
-    def getRequestToken(self, url=REQUEST_TOKEN_URL):
+    def getRequestToken(self, url=REQUEST_TOKEN_URL, oauth_callback_url=None):
         '''Get a Request Token from Twitter
         
         Returns:
           A OAuthToken object containing a request token
         '''
-        resp = self._FetchUrl(url, no_cache=True)
+        parameters={'oauth_callback':oauth_callback_url}
+        resp = self._FetchUrl(url, no_cache=True, parameters=parameters)
         token = oauth.OAuthToken.from_string(resp)
         return token

Twitter OAuthのコールバックの挙動は、Application Type, Callback URLの指定内容により異なるようです。[OAuth]【宿題】twitterのcallback URLのあたりについてはっきりさせたい！のエントリを参考に確認と実装を行いました。

トップページの画像表示を変更

トップページの画像表示方法を変更し、マウスポインタを載せると車種名、年式などがオーバーレイされるようになりました。一見して何の車両だかわからない場合はマウスを載せてみてください。また、画像をクリックすることで詳細ページへ移動することが出来るようになりました。



今思いましたけど、これ、タッチデバイス（iPhone / iPad）では有効ではないですね。こうしたデバイスへの対応は将来的に行なっていく予定です。

ちなみに、オーバーレイはjQueryというJavaScriptのライブラリとプラグインの組み合わせで動いています。

最初はjquery.imageoverlayというライブラリ（公式サイト、ダウンロードサイト）で開発を行っていたのですが、処理のタイミングにより画像が表示されたり、表示されなかったりすることがありました。問題がわからずjquery.imageoverlay 1.3.2のソースコードまで追いかけたところ、環境によっては既知の問題のようでTODOの記載がありました。

imageoverlayの使用を諦め、別のオーバーレイ用ライブラリを探し、現在はcaptifyというjQuery用のライブラリを採用しています（公式サイト）。こちらは大変シンプルなライブラリで、10行くらいの導入部とスタイルシートを記述するだけでオーバーレイを実現することが出来ました。

ここ数日、少しずつ見た目の変更を行っているのですが、いかがでしょうか？開発環境がMacのため、実はApple Safari, Google Chrome, Firefoxのみでしか確認を行っていません。もしMicrosoft Internet Explorerでおかしな表示などを見かけましたらご連絡いただけますと助かります。