タグ

ブックマーク / mixiengineer.hatenablog.com (36)

  • ステージングサーバ予約アプリを自作したよって話 - mixi engineer blog

    こんにちは。よういちろうです。今日はOpenSocialなどmixi Platformの話ではなく、最近開発した「あるWebアプリ」についての話をしてみようと思います。 いつの時代も予約って大変!? このエントリを読んでいる方々の多くは、何らかのシステム開発に関わっている人が多いのではないかと思います。その規模には大小があり、エンタープライズ向け or コンシューマ向けがあり、最近ではWebアプリ or スマートフォンアプリといった区分けもあるでしょう。こういったシステム開発において、よく使われるテスト手法として「ステージングサーバの利用」があげられます。「番サーバじゃないんだけど、開発機でもない中途半端なもので最終確認する」ためのサーバ、というものですが、一般的には限りなく番環境に近い環境を準備して、環境の違いからくる不具合などを事前に解消、確認した上で番環境にリリースする、という

    ステージングサーバ予約アプリを自作したよって話 - mixi engineer blog
  • iOSのMobile Safari上でのfocus()が妙な件を調べてみた - mixi engineer blog

    こんにちは。ミクシィUX統括部にて、mixi Touchの開発を担当しております戸高です。 JavaScriptでの開発を行う事が多いのですが、iOSのブラウザ(Mobile Safari)のfocusの挙動について少しクセがあり、 調べてみましたので、お知らせいたします。 通常、<textarea>や<input type=”text”>等のフォーム要素に対して、フォーカスを与えたい場合、focus()メソッドを使用します。 iOSのブラウザ(以下、Mobile Safari)にて、以下のコードを実行してみます。 (分かりやすい様にjQueryを使用させて頂きました) なお、検証端末にはiPhone4S iOS5.0(9A334)を使用しています。 HTML <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-Type” con

    iOSのMobile Safari上でのfocus()が妙な件を調べてみた - mixi engineer blog
  • 続・Android開発のちょっとしたお話 - mixi engineer blog

    こんにちは。横幕です。 今回もAndroid(TM)開発についてお話をしたいと思います。 設定画面の作り込み 今回のトピックは、設定画面のちょっとした工夫の仕方についてです。 Androidでは、PreferenceActivityという設定画面を作るためのActivityが用意されています。 個々の設定項目はXMLで記述し、それをPreferenceActivityがコントローラとして画面を制御するような形になります。 設定画面の大まかな作り方 まずは、どんな設定項目を準備するのかを、res/xml/pref.xmlに定義します。 Androidには予め幾つかの設定方法を用意してあり、例えば項目の一覧の中から1つ選択するListPreferenceや、チェックボックスの状態で設定を変更するCheckBoxPreferenceなどがあります。 また、設定項目のまとまりごとにカテゴライズする

    続・Android開発のちょっとしたお話 - mixi engineer blog
  • Sinon.JS を使った JavaScript のテスト - mixi engineer blog

    初めましてこんにちは。ソーシャルクライアント開発の tanabe と申します。 今回は?Sinon.JS を使った JavaScript のテスト方法を紹介したいと思います。 Sinon.JS って何? Sinon.JS はノルウェーのエンジニア Christian Johansen さんが書かれた、JavaScript 用のライブラリです。スタブやモック、フェイクオブジェクトの提供に特化していて、QUnit などのテスト用のフレームワークや実行環境に依存しない所が特徴です。Christian Johansen さんは?Test-Driven JavaScript Development の著者でもあり、こちらは近々翻訳版 が登場するようです。 では早速、Sinon.JS を使ったテスト手法をご紹介していきたいと思います。稿ではテストフレームワークは QUnit を採用しています。 時間

    Sinon.JS を使った JavaScript のテスト - mixi engineer blog
  • キーボードとアジャイル開発 - mixi engineer blog

    やぁ、たんぽぽグループの森だよ。 先日の昼休みにnaohiro.ohgataから「キミのblogは文章が短すぎるんだよ。もっと読者を楽しませなきゃ」と言われたんだ。naohiro.ohgataは皆が一目置いているJavaScriptのスペシャリストで、僕も尊敬 している。だから今日は翻訳シリコンバレーっぽい口調で書いてみようと思う。 僕が初めてキーボードというモノを触ってから30年以上たっていると思う。その時はキーボードには何の興味も無くて、コンピュータに命令を伝えるためのただの付属品だった。もちろんタッチタイピングなんかできなくて、自己流でポチポチとキーボードを打ってたんだ。今思い返すと笑っちゃうんだけど自分ではそれなりに早いつもりでいまさらタッチタイピングを覚えるなんてバカらしいとか思ってた。実際まわりの人も似たようなポチポチタイピングで、その中では一番早くてちょっとしたもんだと勘違

    キーボードとアジャイル開発 - mixi engineer blog
  • Apache Solr を利用した検索パッケージ Anuenue - mixi engineer blog

    研究開発グループの takahi-i です。 先日名前だけご紹介したAnuenue というツールをご紹介させていただきます。Anuenue は Apache Solr のラッパーであり、検索クラスタの構築と運用を容易にする目的で制作されました。 稿では始めに Apache Solr を選択した理由について述べ、その後、このツールを開発した背景とその目的をご紹介させていただきます。後半では実際に Anuenue を用いて検索クラスタを立ち上げます。 なぜ Apache Solr を採用したのか 昨年の秋、弊社の検索エンジンを置き換えるという計画が社内で策定され、ベースとなる検索エンジンの選定のために多くの OSS 検索エンジンを比較検討しました。このとき重視したのは一台の検索パフォーマンスと同時に、保守の容易さと、開発コミュニティの規模です。 検索エンジンの保守性に関して特に重要と考えたの

    Apache Solr を利用した検索パッケージ Anuenue - mixi engineer blog
  • mixi Engineers' Blog » スマートフォンブラウザのWebInspectorをリモートで実現するweinreが凄い

    こんにちは、寝過ごして長野まで行きそうになったソーシャルクライアント開発のtakimoこと瀧です。 先週弊社数名がアメリカで行われていたVelocity 2011 - O'Reilly Conferencesに参加しました。 そこではモバイル端末のテストやパフォーマンスについての講演やLTがあったようです。 自分もお土産話を色々聞きたいので詳しくは誰かが書いてくれるはず...です。 その中で気になったプロダクトがあったので紹介したいと思います。 weinre - Web Inspector Remote weinreはFirebug(Firefox)やWebKitのWebInspectorのようなデバッグ機能をリモートで提供してくれるプロダクトです。 iPhoneAndroid(2.1以上)には一応コンソール機能のようなものがありますが 基的には出力だけ ソフトキーボードでデバッグ用

    mixi Engineers' Blog » スマートフォンブラウザのWebInspectorをリモートで実現するweinreが凄い
  • 理想の開発環境 - mixi engineer blog

    たんぽぽグループの森です。 一日の半分近くを机に座ってすごすエンジニアにとって、快適な開発環境は切実な問題です。 外界からうけるストレスを極力排除し、効率よくフロー状態にはいることと、フロー状態を長く維持することはとても重要です。 お前は今までに購入したキーボードの数をおぼえているのか?と突っ込まれてもしかたが無いキーボード遍歴を重ねましたが、KINESISに出会い キーボードに関してはまぁまぁ満足することができました。 机・椅子・マウス・ディスプレイとまだまだ欲望は果てしないのですが、今回のミクシィ社の引越しに伴い、エンジニアの机と椅子にオカムラ社のクルーズ&アトラスが選定され、机と椅子に関してもかなりの満足度を得ることができたので自慢報告します。 クルーズ&アトラスの御紹介 クルーズ&アトラスはオカムラ社が販売している低座・後傾姿勢を特徴としたパーソナルワークステーションです。 2

    理想の開発環境 - mixi engineer blog
  • Flash?いいえ、HTML5です: ファイルのドラッグ&ドロップによるフォトアップロード機能について - mixi engineer blog

    はじめまして。コミュニケーションサービス開発部の澤と申します。コーヒーカレーをこよなく愛する新卒2年目の新米エンジニアで、弊社Webのフロントエンドを主に担当しています。最近はmixiスマートフォン版(mixi Touch)の開発にも精力的に取り組んでいます。 さて、日はPC版のmixiで1つの機能をリリースいたしました。ファイルをWebブラウザにドラッグ&ドロップするだけで写真をmixiフォトにアップロードできるもので、HTML5 File API※1を採用しています。記事ではこの機能について色々とお話をしたいと思います。 なにこれ? 以下では、ドラッグ&ドロップによるアップロード機能を「機能」と呼びます。 百聞は一見にしかずです。機能のプロモーションムービーがありますので、まずはこちらをご覧ください。 動画では下記を説明しています。 従来のアップロード方法からドラッグ&ドロッ

    Flash?いいえ、HTML5です: ファイルのドラッグ&ドロップによるフォトアップロード機能について - mixi engineer blog
  • mixi大規模障害について 解明編 - mixi engineer blog

    こんにちは、システム技術部たんぽぽGの森です。 先日のmixi大規模障害の原因となったmemcachedの不具合の詳細な解明ができました。 再来週まで発表を見合わせようと思ったのですが、早くお伝えしたほうがいいと思いましたので公開発表致します。 memcachedとlibevent memcachedはlibeventというライブラリを使用してクライアントからの要求(接続、コマンド送信)を処理しています。 libeventを使用するにはevent_baseという構造体を用います。 main threadはmain_baseを使用します。 static struct event_base *main_base; ... int main (int argc, char **argv) { ... main_base = event_init(); ... /* enter the ev

    mixi大規模障害について 解明編 - mixi engineer blog
  • mixi大規模障害について その2 - mixi engineer blog

    こんにちは。システム技術部たんぽぽGの森です 補足を追記しました (2010/08/20 15時) 先日のmixi大規模障害についての続報です 今回は小ネタはありません はじめに まず初めにtwitter/blogなどを通じて今回の問題の解析を行っていただいたみなさんに感謝の言葉を捧げたいと思います kzk_moverさん stanakaさん mala(bulkneets)さん llameradaさん (順不同) ありがとうございました 書き漏らした人ごめんなさい memcachedはすごい 今回の件でmemcachedに対して不安感を持たれた方もおられるとお聞きしました 説明不足だったせいで誤解を与えてしまい申し訳ありません きちんと設定および監視を行っていれば通常の使用にはまったく問題はありません 弊社にて -c 30万で起動したmemcachedに対して、先のテストスクリプトに

    mixi大規模障害について その2 - mixi engineer blog
  • いまからでも間に合う開発者テスト - mixi engineer blog

    はじめまして。開発部じゃない加藤和良です。 最近、mixi では Buildbot をつかった継続的インテグレーションをはじめています。安定版の mixi のソースコードにコミットすると Buildbot がそれを検知し、自動的にテストが走るようになりました。 ここでの「テスト」は Test::Simple や prove(1) をつかった、Perl でかかれた開発者テストを指しています。mixi の開発者テストをとりまく環境は、ここ数年でかなり改善されました。今回はその歩みをふりかえりながら、テストの無いコードベースをどこからどうやって変えていったかという話をしたいと思います。 開発環境 はじめに、前提となる mixi の開発環境について説明します。mixi では複数人の開発者がひとつのマシンで作業を行います。それぞれの開発者は、あらかじめ割り当てられたポートで Apache を起動し、

    いまからでも間に合う開発者テスト - mixi engineer blog
  • Bayesian Setsによる関連文書検索システムStupa - mixi engineer blog

    都会よりも田舎が好きなfujisawaです。Bayesian Setsというアルゴリズムを使って、関連する文書を高速・高精度に検索できるシステムを作成しましたので、そのご紹介をさせていただきます。 Bayesian Setsとは Bayesian Setsはいくつかアイテムを入力すると、それを補完するようなアイテムを返してくれるアルゴリズムです。原著論文の先頭に"Inspired by Google Sets"と書かれているように、Google Setsを参考にして作成されています。実際にどのような出力が得られるか、Google Setsに以下の表のクエリを検索して試してみますと、 クエリ 出力 apple, banana chocolate, strawberry, vanilla, cherry, ... apple, macintosh software, windows, mac,

    Bayesian Setsによる関連文書検索システムStupa - mixi engineer blog
  • かんたんCMS 「Tokyo Promenade」を使おう - mixi engineer blog

    先日、待望の長女が誕生したmikioです。あまりにかわいいから育児ブログでもつけようという魂胆ではありませんが、今回は自作のCMSであるTokyo Promenadeについて語ります。 Tokyo Promenadeとは 以前の記事で、Tokyo Cabinet(TC)を使ったCMSを作ることを予告しましたが、Tokyo Promenade(TP)がまさにそれです。TCのテーブルデータベースを使って記事を管理する軽量なコンテンツ管理システム(CMS)の実装です。例によってC言語のみで記述され、libc以外の全実装が "made by mikio" な製品です。 読み方は「東京プロムナード」です。プロムナードとは散歩道のことですが、東京メトロの広告に出てくる宮崎あおい的なキャラが写真付きブログを書いちゃうようなユースケースをイメージして名づけました。まあ実装はそんな洒落た感じとはほど遠いです

    かんたんCMS 「Tokyo Promenade」を使おう - mixi engineer blog
  • オレオレ検索窓を設置しよう - mixi engineer blog

    まだピクミン2をクリアしてないのでケジメ的に新作ゲームを買えないmikioです。今回は、Tokyo Cabinetを使って激烈簡単に特定サイトの専用の検索機能を設置する方法について説明します。クローリングから検索までを10分くらいの作業で可能にします。 特定サイトの検索エンジン Web全体の検索機能を作るのは、途方もない技術力と設備を持っているGoogleMicrosoftなどのビッグプレーヤでないと難しいのが現実です。でも、自分が気に入っているいくつかのサイトを対象とした検索エンジンを作るのであれば個人だってできます。また、インターネットから手が届かないイントラネットのコンテンツの検索機能は自分達で手がけないと構築できません。 ということで、企業用の検索システムが数多く売られていますし、LuceneやGroongaやHyper Estraierなどのオープンソース製品も世に多数存在しま

    オレオレ検索窓を設置しよう - mixi engineer blog
  • 100行のCプログラムでWebチャットを実装する方法 - mixi engineer blog

    例の冷却ファンを修理してもらいに秋葉原に行ったのですが、最近の同人ゲームのクオリティはすごいなあと感心していたら、その二階はもっととんでもないことになってて、ひとつ大人になってしまったmikioです。今回は、Tokyo Cabinetのテンプレート直列化機能を駆使して、たった100行のCプログラムでWebチャットシステムを実装してみます。 古式ゆかしいWebチャットシステム 10年くらい前にCGIスクリプトでチャットシステムを作るのが流行していたのを覚えている方も多いと思います。チャットログは現在のようにデータベースサーバに転送して格納するのではなく、ローカルファイルシステム上のファイルにCSVやTSVなどのフォーマットで格納したり、同じくローカルのDBMファイルに格納するのが主流でした。2ちゃんねるの「datファイル」もそのようなデータファイルの一種と言えるでしょう。 その頃から、CGI

    100行のCプログラムでWebチャットを実装する方法 - mixi engineer blog
  • 軽量データクラスタリングツールbayon - mixi engineer blog

    逆転検事を先日クリアして、久しぶりに逆転裁判1〜3をやり直そうか迷い中のfujisawaです。シンプルなデータクラスタリングツールを作成しましたので、そのご紹介をさせていただきます。 クラスタリングとは クラスタリングとは、対象のデータ集合中で似ているもの同士をまとめて、いくつかのグループにデータ集合を分割することです。データマイニングや統計分析などでよく利用され、データ集合の傾向を調べたいときなどに役に立ちます。 例えば下図の例ですと、当初はデータがゴチャゴチャと混ざっていてよく分からなかったのですが、クラスタリングすることで、実際は3つのグループのデータのみから構成されていることが分かります。 様々なクラスタリング手法がこれまでに提案されていますが、有名なところではK-means法などが挙げられます。ここでは詳細については触れませんが、クラスタリングについてより詳しく知りたい方は以下の

    軽量データクラスタリングツールbayon - mixi engineer blog
  • PerlとRubyで省メモリなハッシュを使おう - mixi engineer blog

    サボっていた早朝ジョギング@駒沢公園を再開して2週間たち、やっと抜かれる数より抜く数の方が増えてきたmikioです。今回は、PerlRubyのハッシュの代用としてTokyo Cabinetを使うことでメモリ使用量を激減させられることを説明します。 抽象データベースAPI Tokyo Cabinetには抽象データベースという機構があり、先日、そのPerlRubyのバインディングをリリースしました。それを使うと、各種言語のハッシュとほぼ同じような共通したインターフェイスで、以下のデータ構造を利用することができます。 オンメモリハッシュ:各種言語に標準のハッシュと同じく、メモリ上でkey/valueの関係を表現する。 オンメモリツリー:メモリ上の二分探索木としてkey/valueの関係を表現する。 ファイルハッシュ:いわゆるDBMとして、ファイル上でkey/valueの関係を表現する。 ファ

    PerlとRubyで省メモリなハッシュを使おう - mixi engineer blog
  • MapReduce on Tyrant - mixi engineer blog

    先日、隅田川の屋形船で花見と洒落込んだのですが、その日はまだ一分咲きも行ってなくて悲しい思いをしたmikioです。今回はTokyo Tyrant(TT)に格納したデータを対象としてMapReduceのモデルに基づく計算をする方法について述べます。 MapReduceとは Googleが使っているという分散処理の計算モデルおよびその実装のことだそうですが、詳しいことはググってください。Googleによる出自の論文やApacheプロジェクトによるHadoopなどのオープンソース実装にあたるのもよいでしょう(私は両者とも詳しく見ていませんが)。 今回の趣旨は、CouchDBMapReduceと称してJavaScriptで実現しているデータ集計方法をTTとTCとLuaでやってみようじゃないかということです。簡単に言えば、以下の処理を実装します。 ユーザから計算開始が指示されると、TTは、DB内の

    MapReduce on Tyrant - mixi engineer blog
  • オンラインコーヒーメーカー「萌香たん」とはじめるドキドキ☆コーヒーブレイク - mixi engineer blog

    はじめまして!08年度新卒エンジニアの「きょろ」こと井上恭輔と申します。ミクシィではコミュニケーション開発チームというところで、mixi上の色々なコミュニケーションサービスの開発を担当しています。 就職で東京に出てきて早10ヶ月、最初は周囲の歩く速度に付いて行けなくて悩んでいましたが、今では新宿駅を迷わず歩けるまでに成長しました。日は慣れたついでに、そろろそエンジニアブログにも仲間入りしたいなと思いましたので、記事の初投稿に挑戦してみようと思います。 曰く「ハードボイルドな技術ネタ」の多い当ブログですが、今回は頭を使わずに読める、文字通り「コーヒーブレイク」的な記事をお届けできればと思います。駄文ではありますが、お付き合い頂ければ幸いです。 エンジニアのガソリン「コーヒー」 みなさんコーヒーはお好きですか?私はコーヒーが大好きで、1日にかなりの量のカフェインを摂取します。朝はブラックコー

    オンラインコーヒーメーカー「萌香たん」とはじめるドキドキ☆コーヒーブレイク - mixi engineer blog