9月 26

amazonのリニューアル後のカテゴリメニューが素晴らしい


どうも、kuwaです。

amazonさんがリニューアルされました。パッと見でもかなりスッキリとした印象ですね。

2012/09/26 13:09追記:現時点では全ユーザーに対してリニューアル版がリリースされているわけでは無い模様です。

新amazonメニュー

今回はその見た目ではなくメニューの細かい制御についての話です。左の画像にある、カテゴリ選択メニューの細やかな制御が素晴らしくて感動しました。

一番上の「本・漫画・雑誌」から下方向にマウスカーソルを垂直に移動させると選択カテゴリが速やかに切り替わります。これは当たり前ですね。

問題は、ここからサブジャンルを選択する際です。例えば、「DVD・ミュージック・ゲーム」を選んだ後、右側に表示されるサブカテゴリから、「TVゲーム」を選ぼうとサブカテゴリを選ぶケースです。この場合「DVD・ミュージック・ゲーム」の上にあるマウスカーソルを「TVゲーム」まで持っていくために、右下に向かって斜めに移動さると思います。この時、マウスカーソルは「DVD・ミュージック・ゲーム」の下にある「家電・カメラ・AV機器」の上を通過するにも関わらず、右側のサブカテゴリは「DVD・ミュージック・ゲーム」のサブカテゴリのまま維持されるのです。

なにが凄いの?と感じられるかもしれませんが、これは当たり前にできる事ではありません。

Continue reading

7月 10

絞込み項目(タグ)の折り畳みを実装しました。


coneco.netでは、ユーザーの皆様が、求める商品を見つけやすくするべく、各カテゴリを担当するショッピングナビゲーター(募集中です!)が日々商品情報を整理し続けています。

左端に各項目へのショートカットを配置していた牛肉カテゴリ」を例に挙げても、ブランド、料理・用途、部位、タイプ・特徴、産地、イベント、etc.と、様々な項目(我々はタグと呼んでいます)から、絞り込む事ができます。

とは言え、整理した項目を並べれば訪問者の方に使って貰えるというわけではありません。絞込み項目が多岐に渡るため、ただ並べただけでは、大きくスクロールさせなければ選択肢を把握することができず、本当に必要な物が埋もれてしまいます。これを解決するため、これまでは画面左端に、各絞込み項目へのショートカットを配置していました(右画像)。

この機能は、理解している人にとっては便利でしたが、多くの人にとって馴染みのある物ではなかったため、「左端に何かある。」という状態でした。

 

折りたたんだ状態そこで今回、タグの折り畳みを実装しました。

タグの折り畳み自体は現在多くのサイトで採用されているため、わかりづらいという事は無いと思います。では何故coneco.netでこれまで折り畳みを採用しなかったのか。その理由には、クリックして開けば求める物があったとしても、折り畳む事で選択肢が隠れてしまうため、一つ一つ開いて探す手間が増えたり、そもそも目に入らなければ開くに至らないのではないか。という懸念がありました。

この問題を解決するため、タグを折り畳んだ状態で、選択肢の一部を抜粋して表示しておき、クリックすると選択肢を開きつつ抜粋部分を消す。というインターフェースを実装しました。これにより、タグを開いた中にはどういう選択肢があるのかがパッと見でわかり、かつ、全てのタグを把握しやすくなったのではないかと思います。

coneco.netは今後も、皆様にとってより使いやすいサイトになるよう、改善を続けていきます。

どうぞご利用ください。

5月 21

第2回 ほんとーに移転しなきゃいけないの??


2012年5月21日、朝から金環日食祭りでした。

DREAMS COME TRUEの「WONDER 3」という
3枚目のアルバムに「時間旅行」という曲がありました。(私もこのCD持ってます)
この中に 、
「指輪をちょうだい、2012年の金環食の時。
それまで待つわ。『太陽のリング』だからよろしくね」
みたいなニュアンスの内容です。
発表は1990年なので、20年後のその時も一緒にいようね的な
想いが込められているんでしょう。

歌詞の内容はさておき、ドリカムと一緒に
金環食を見ようみたいなイベントを開催して、ビジネスにしてるところがイイですね。
我々も数年先を見越して、システムを構築しないとダメなんでしょうね。

さて、前回の話では、我々のITインフラは拡張性に乏しいことが判明しました。
ある程度の拡張性を確保できるITインフラに変えるべく、いよいよ本格的に準備を始めました。
しかし、問題は山積みです・・・

我々が抱えている課題をまとめると次のようになります。

  1. 2拠点のデータセンターを運用している(A拠点とB拠点)
  2. 2拠点のデータセンター契約によりコスト高
  3. A拠点のグローバルIPの枯渇
  4. A拠点のサーバラック追加が不可

4番目はどういう事かと言うと、可能なら移転せずに
既存のセンターにローカルIPセグメントを設けた、新しいネットワークを構築し、
そこにサーバを設置、順次移行しようと考えました。

しかし、設備に余力がないと言う理由から拡張を断られてしまいました。
逆にこれが決定打となり、より一層移転へと話は進んで行きました。

上記のような現状を打破するために取れる選択肢は次の通りです。

  1. A拠点のデータセンターに寄せて統合する
  2. B拠点のデータセンターに寄せて統合する
  3. A、B拠点をC拠点に統合する

A拠点に統合するという選択肢は絶たれたため、必然的に2つに絞られます。

最新設備のデータセンターにシステムを統合する方針に決定

A拠点の設備に余力がなく、引越しをしないと近い将来、
「IPもラックも足りず、サーバを投入できない!」
という危機的な状況を迎える可能性になりそうでした・・・
そこで早速、引越し先を探す事にしました。

今後数年間、我々のサーバを預かってもらう新居には、
万全を期して慎重に選定しなければなりません。
当然条件は厳しくなります。

比較検討の材料をざっとあげると下記のようになります。

  • 価格(月額利用料)
  • ラック当たりのサーバ搭載数
  • 空調設備(サーバを冷やす設備。搭載数に影響する)
  • 電力設備(自家発電で供給できる時間)
  • 運用アウトソース(機器の運用をやってくれるか。その実績は十分か。)
  • 立地場所(既存のデータセンターからの距離)

その他いろいろ。
データセンターを数社ピックアップして、条件を並べ、
にらめっこ→社長にプレゼン→ダメ出し→修正→プレゼンを何回かくり返し。

そして、紆余曲折を経て、ま、なんやかんやあって(笑)
新規にデータセンターを契約し、
A拠点のサーバとB拠点のサーバを
C拠点に移転するという
方針で決定しました。
時に、2011年7月

しかも、

  • サービスはほぼ無停止を実現しなくてはならない!
  • 半年で全てを終えなくてはならない!(契約更新が12月末だから)

という条件付き。
設計~構築~移転~撤退を
12月末までに完了させる難易度超ウルトラCの
プロジェクトの幕がこうして切って落とされました。

つづく・・・

5月 10

データセンター、移転しました。


データセンター、移転しました

 

昨年2011年の10月から3ヶ月かけて実施しました。

準備期間は長期におよび、2010年から徐々に動き始めていました。

 

データセンターの移転は想像するだけでとても大変な作業です。

そこで、今回なぜデータセンターを移転する必要があったのか???に始まり、
移転するにあたっての課題や新システムの設計と構築。
移転日の前日に発生した超危機的なトラブル。
(番外編として休日出勤の様子や徹夜っぷりなど)

そして、最大の山場であった実際の引越しについて話していきます。

 

 

第1回 困った!IPアドレスが足りない!!

旧環境は下記のような構成でした。

図1旧環境

なんと!すべての機器(サーバ、ネットワーク機器)にグローバルIPアドレスを割り当てるという構成でした。
最もシンプルでお金のかからない構成です。
サイト立ち上げ初期はこれで良かったのかもしれません。

 

グローバルIPアドレスの数は無限ではなく、限りがあるので、いずれ不足することはわかっていました。

嬉しいことに当社のサイト達のトラフィックやデータは、年々増え続けていました。

特にデータ増加量は半年で数十万件~。
多い時は数百万件のレベルで増加していました。

 

データ量が増えてくるとパフォーマンスが落ちるので、
当時我々は、1台のデータベースサーバを複数台に分け、負荷を分散する手法をとっていました。
当然、サーバを新規に投入するたび、グローバルIPアドレスを1つ消費します。

そして、ついに「IPアドレス残り20個」という笑えない事態に
陥ってしまったのが、2009年の夏。

2010年以降の設備投資に支障をきたすことは明らかでした。
なので、いよいよ本格的に移転に向けて動き出すことになりました。

つづく・・・

 

4月 27

wordpressに移行しました!


「トラねこblog」をwordpressに移行しました!
サーバは、Amazon Elastic Compute Cloud (EC2)を利用しています。
当社も世間の波に乗ってクラウドサービスを使っています。
他にはhttp://navigator.coneco.net/wine-recommend/http://fantv.hotel.jp/ などだったかな??
だけど、wordpressに移行したからといって頻繁に更新されるかどうかはまた別のお話・・・・・・

7月 13

[iPhoneアプリ]UITableViewのスクロールを滑らかにする


こんにちは、豪(たけし)です。
UITableViewでの縦スクロールが妙に重いケース、良くありますね。
今回はHotel.jpのiPhoneアプリで縦スクロールをスムーズに高速に動かすために
行っていることをご紹介します。
Hotel.jpアプリのホテルの検索結果画面では、1つのセルの中にテキストラベルが
15個+画像2つ、しかもテキストラベル14個は画面左のタブを押すと横移動も
するといういかにも重そうなインターフェースなのですが、iPhone4であれば
スムーズに縦スクロールします。
検索結果画面
search_result
動画(30~40秒目が検索結果画面です)

ここ苦労したんです・・・。実装方法をざっとお話します。
最初は楽をしてやろうとUITableViewCellのNibを作ったのですが、
1つのセルにUILabelを15個並べて更に横に移動するようにすると
もうスクロールと呼べないコマ送りのような動きになりました。
そこで、Nibを使わないようにしたのですが、普通にUITableViewCellに
UILabelをaddSubviewしていくとまだスクロールが遅い。
そこで調べてわかったのは、必要な文字だけUITableViewCellに描き
こんでしまえば早くなるという原理でした。
 UITableViewCellにUILabelとかのっけるから重くなるんです。
 (本来のせても軽快にスクロールするのがベストですが)
参考にしたサイトがいくつかあるのでそれと一緒に説明します。
まず、1つ目
Apple TableViewSuite sample
このコード中の5_CustomTableViewCellを参考にしています。
実はこれ、AppleがオリジナルではなくTweetieの作者が考案した
ものをAppleがパクった参考にした(英語)
ようです。
このソースコード長いですね。知っておけば役に立ちますが、
ここでは以下の部分を知っておけばいいです。
ファイル:5_CustomTableViewCell/Classes/TimeZoneWrapper.m

static UIImage *q1Image;
static UIImage *q2Image;
static UIImage *q3Image;
static UIImage *q4Image;
<省略>
+ (void)initialize {
// Unlikely to have any subclasses, but check class nevertheless.
if (self == [TimeZoneWrapper class]) {
<省略>
q1Image = [[UIImage imageNamed:@"12-6AM.png"] retain];
q2Image = [[UIImage imageNamed:@"6-12AM.png"] retain];
q3Image = [[UIImage imageNamed:@"12-6PM.png"] retain];
q4Image = [[UIImage imageNamed:@"6-12PM.png"] retain];
}
}

予めstaticで必要な部品を持たせておいて、セルを表示するときに何度も
再利用しています。[UIImage alloc] init]ではなく[UIImage imageNamed]を
使っている部分はimageNamedのキャッシュを効かせたいからなのでしょうか?
(キャッシュが効くならstaticで持たせる必要がそもそもないのかも?
試していませんが、確実な方法として私はstaticを使って書いています。)
二つ目
先ほども出たTweetieの作者のページにある
ABTableViewCell(FastScrolling.zip内)なのですが、どうもファイルがDLできないですね・・・
下のブログでサンプルプロジェクトに同じものが使われているのでダウンロードしてみて下さい。(リンクに修正版と書かれている方です)
[iPhone] テーブルのスクロールが遅いので高速化に挑戦中(苦戦中)
その中のABTableViewCellとFastTableViewCellの動きを全て把握して下さい。
これが要です。
簡単に言うとこんなイメージ。
 通常
  ・UITableViewCellにUILabelのインスタンスを置いて、そのtextプロパティに値を入れておく。
 改善版
  ・UILabelを使わず、drawRectメソッドが呼び出されたら鉛筆を持たせて、セルに文字を書けと指示を出す。
このFastTableViewCellを使うだけで相当滑らかに動くのですが、先ほどのTimeZoneWrapper.mで
staticを使ったインスタンスを保持しておく方法をプラスすれば、スクロールが更に滑らかになり、
スクロール中の引っ掛かりが軽減されます。
Hotel.jpアプリのTableViewCellは横移動もするので、実際にはABTableViewCellも
FastTableViewCellも使わず0から作っています)
ちなみに、ABTableViewCellについて追加でこちらの人がコメント(英語)してますが、
まとめると、以下の2点をすると良いそうです。
 ・initWithFrameではなくinitWithStyleを使う
 ・tableView:cellForRowAtIndexPath:のメソッドのreturn cellの直前に[cell setNeedsDisplay]の1行を追加する
三つ目
ホテル写真部分はLazy loadingさせています。読み込み開始の
タイミングなどまだ改善の余地があるのですが、これをしていないUITableView
はあまり見ないので、ここでは割愛。
四つ目
tableView:cellForRowAtIndexPath:の中で行われる処理が軽いほど滑らかにスクロールします。
そのため、事前に実行できる処理はやっておくのが良いでしょう。
Hotel.jpアプリのホテル検索結果のページでは各ホテルへの現在地からの距離が表示されています。
この部分はセルが表示される時ではなく、事前に距離計算され、文字列化
されたものを保持しています。そのため、tableView:cellForRowAtIndexPath:が
呼び出された時は、その文字をセルに描くだけで良い状態になっています。
最後に
透過性のビューを使わないようにするなど、その他にも少しだけ技があります(ただし、あまり大きな効果は期待できません)。
以下を参考にして下さい。
[iOS] TableView スクロールパフォーマンスの改善
[iPhone] テーブルのスクロールが遅いので高速化に挑戦中(苦戦中)
iPhoneアプリ開発をする方は最初にぶつかる(ぶつかった!)壁かと
思うので、一助になれば嬉しいです!

7月 12

[xcode]メソッド名付きのデバッグログを出力


こんにちは、豪(たけし)です。
ちょいと宣伝!
Hotel.jpから待望のiPhoneアプリが出ましたここを押してダウンロードしてね
アプリの開発中、実行中のメソッド名をログに書き出していくことで、
エラーが特定しやすくなったり、アプリの動きが把握しやすくなったり
Appleがドキュメントで説明していなくて、もうどうしようもなく
はまった時のアプリの動きが確認しやすくなったり
します。
やり方は簡単、.pchファイルで以下のマクロを定義しておけばOK。

#ifdef DEBUG
# define DLOG(__objects__…) NSLog(@”%s [Line %d] %@”, __PRETTY_FUNCTION__, __LINE__, ((__objects__)? [NSString stringWithFormat:__objects__] : @”"));
#else
# define DLOG
#endif

これで
・デバッグ時のみログを出力
・ログを出力したメソッド名を出力
・ログに行番号も一緒に出力
・NSLog同様、引数に渡した文字列をログに出力
(使い方)
メソッド中に以下のように書いて下さい。

DLOG(@”");
DLOG(@”test comment”);
DLOG(@”%@”, aStringVariable); //aStringVariableはNSStringのインスタンス

↓こんな風に出ます

-[AAAViewController dealloc] [Line 52]
-[AAAViewController viewDidLoad] [Line 52] test comment

(参考)
↓を参考にしています。(XCode4で↓の通りにやるとC99にしてとエラーが出る・・・)
http://iphoneincubator.com/blog/debugging/the-evolution-of-a-replacement-for-nslog
Debugで実行してもログ書き込まれないよーって方は↓
http://d.hatena.ne.jp/paraches/20100619/1276971406

11月 01

list_index.js 50音索引生成Javascriptライブラリ


brand

すっかりご無沙汰しております。kuwaです。
list_index.js 50音索引生成Javascriptライブラリを公開致します。
以下、配布ページから引用した本ライブラリの特徴です。

  • JSON形式のリストを元に、50音索引とリストを生成、表示します。

  • 「ア・カ・サ・タ・ナ・・・」で絞り込んだ後「ア・イ・ウ・エ・オ」でさらに絞り込めます。
  • jQuery依存です。
  • Ajax等であとから項目を追加できます。
  • 画面内に複数設置可能。独立して動作します。
  • 「ヴァ・ヴィ・ヴ・ヴェ・ヴォ」は「バ・ビ・ブ・ベ・ボ」に対応し、「ア行」と「ハ行」の両方に表示されます。
  • 見た目は全てcssで制御。

coneco.netのファッションカテゴリで、ブランドによる絞り込み機能があるのですが、数百のブランドを効率よく選べる方法を提供できないか。というところが開発の背景となります(coneco.netのファッションカテゴリではマウスオーバーでの動作ですが、本ライブラリでは、マウスクリックでの動作になってるなど、多少の差異はあります。)。
左カラムに設置しても邪魔にならず、使い勝手の良い索引を目指しています。
また、デモページでは70件のブランドを索引表示していますが、coneco.netファッションカテゴリでは、最大500件のブランドを索引で絞り込むことができるようになっています。
デモ、およびダウンロードはこちら→「list_index.js 50音索引生成Javascriptライブラリ」
公開するにあたり、もう少しキレイなソースにしたかったところなのですが、あまり時間をかけても他の仕事が滞ってしまいますので、このような形ですみません(変数名とかぐちゃぐちゃだったり、パラメータとかも減らせるはずなんですけどね)。
どうぞご利用ください。

5月 20

coneco.netの検索をSolrでリニューアル


こんにちは、藤田です。
4/27に、coneco.net(コネコネット)の検索をリニューアルしました。
しばらく前から別ドメインで運用していた商品検索機能を、coneco.net本体に統合した形になります。
リニューアルによって、多くの商品(現在2,200万件ほど)を、高速に検索できるようになりました。今まで「coneco.netの検索は遅い」と敬遠されていた方にも、快適に使っていただけるようになったのではないかと思います。
検索エンジンは、オープンソースの検索エンジンSolrを使っています。
coneco.netで使っているSolrの構成を、少しご紹介します。

Continue reading

2月 05

Twitterのステータスに表示されるfrom の部分を変更


どうも、kuwaです。
以前作成したTwitterの最安値応答Bot「@yasune」ですが、内部でNet::Twitterモジュールを使用しているため、こんな感じで、「from Perl Net::Twitter」と表示されてしまってちょっと恥ずかしい状態でした。今回ここに「yasune」と表示するようにしました。
fromの部分を変更するには、Twitter側にメールで依頼する必要があるという話をどこかで見ていたので詳しい方法を調べたところ、現在はそうでは無いという事が、以下のサイトでわかりました。親切にも、こちらに設定の手順が掲載されています。
PerlによるWebコンテンツからTwitterに投稿して「from ×××」と表示する方法
ただし、ここに書かれている手順で進めると、一点つまづく部分があります。
STEP2のソースに

my $verifier =;

という部分がありますが、これは実際には

my $verifier = <STDIN>;

になります(HTMLのタグと解釈されてブラウザで見ると表示されないのでしょう)。
ここさえ注意すれば、意外とあっさり設定できます。
設定後のfromはこんな感じになります。
from_yasune
どうぞご利用ください。

Continue reading