UZABASE開発者ブログ（旧）

はてなブログに移行しました！

noreply@blogger.com (阿達) — Wed, 21 Jan 2015 05:23:00 +0000

ブログ担当の阿達です。この度はてなブログに移行しました。新しいブログはこちら『UZABASE Tech Blog』引き続きUZABASE開発者ブログをよろしくお願いします。 Twitterではブログの更新情報や勉強会のお知らせをツイートしています。 @Uzabase_Tech こちらもフォローよろしくお願いします！

SPEEDAに導入して分かった、CDNの劇的な効果

noreply@blogger.com (Anonymous) — Wed, 14 Jan 2015 10:21:00 +0000

インフラチームの金屋です。
ユーザベースのインフラを担当しています。

今回は身近に利用しているけど、使っていることに気付かない
インターネットの影の立役者であるＣＤＮについて書きます。

CDNとは？

Contents Delivery Network

コンテンツを配信するネットワーク

簡単に言うと、次の機能を持っています

Webコンテンツ(サイト、画像、動画等)を
全世界のインターネットへ配信する
専用に整備された高速ネットワーク

CDNは何のためにあるのか？

地理的・物理的に遠隔地からのアクセスをキャッシュ、経路最適化で高速化するのが目的です。

（イメージ）
[通常]　日本 <=======10秒=======> 米国
[CDN]　日本 <==CDN(2秒)==> 米国　500%高速化

なんで遠隔地だと遅くなるのか？

インターネット上のWebサイトへのアクセスの流れは

www.abc.com を名前解決してグローバルIPに変換
グローバルIP で接続する
ルーターがパケットを中継して、宛先のグローバルIP(サーバ)まで届ける

一般的に遠いほど、中継点（ホップ）が多く、通信に時間（コスト）が掛かり、遅延します。

日本から近いサイト(Yahoo Japan)と遠いサイト(米Yahoo) で比べてみます。

近いサイト(Yahoo Japan)へのping応答

C:\>ping www.yahoo.co.jp

www.g.yahoo.co.jp [182.22.70.251]に ping を送信しています32 バイトのデータ:

182.22.70.251 からの応答:バイト数 =32 時間 =8ms TTL=53

182.22.70.251 からの応答: バイト数 =32 時間 =7ms TTL=53

182.22.70.251 の ping 統計: パケット数: 送信 = 4、受信 = 4、損失 = 0 (0% の損失)、

ラウンドトリップの概算時間 (ミリ秒): 最小 = 7ms、最大 = 8ms、平均 = 7ms

遠いサイト(米Yahoo)へのping応答

C:\>ping www.yahoo.com
fd-fp3.wg1.b.yahoo.com [106.10.139.246]に ping を送信しています 32 バイトのデータ:

106.10.139.246 からの応答: バイト数 =32 時間 =72ms TTL=49

106.10.139.246 の ping 統計: パケット数: 送信 = 4、受信 = 4、損失 = 0 (0% の損失)、

ラウンドトリップの概算時間 (ミリ秒): 最小 = 72ms、最大 = 72ms、平均 = 72ms

※ラウンドトリップ：通信の往復にかかる時間

遠いサイトの方が約10倍時間が掛かっています。

実際の経路を比べてみましょう。

近いサイト(Yahoo Japan)の経路→11回経由

C:\>tracert www.yahoo.co.jp
　　www.g.yahoo.co.jp [182.22.39.242] へのルートをトレースしています経由するホップ数は最大 30 です:
1     1 ms     2 ms     1 ms 10.10.5.126
2     1 ms     1 ms     1 ms 10.0.0.254
3     3 ms     3 ms     3 ms 106.162.241.131
4     3 ms     3 ms     3 ms 106.162.241.161
5     4 ms     3 ms     4 ms sjkBBAR001-2.bb.kddi.ne.jp [106.162.241.141]
6     7 ms     7 ms     6 ms sjkBBAC06.bb.kddi.ne.jp [182.248.174.1]
7    11 ms     3 ms     4 ms otejbb206.int-gw.kddi.ne.jp [210.234.225.5]
8     4 ms     4 ms     4 ms cm-ote257.int-gw.kddi.ne.jp [118.155.197.52]
9     5 ms     4 ms     4 ms 125.29.25.94
10     7 ms     7 ms     7 ms 118.151.224.242
11     7 ms     7 ms    13 ms 182.22.34.86
12    10 ms    10 ms     8 ms f4.top.vip.ssk.yahoo.co.jp [182.22.39.242]

※全て日本国内 　　　　　　　　　　

遠いサイト(米Yahoo)の経路→19回経由

C:\>tracert www.yahoo.com

fd-fp3.wg1.b.yahoo.com [106.10.139.246] へのルートをトレースしています経由するホップ数は最大 30 です:

1 1 ms <1 ms 1 ms 10.10.5.126 2 1 ms 1 ms 1 ms 10.0.0.254

3 3 ms 4 ms 3 ms 106.162.241.131

4 3 ms 3 ms 4 ms 106.162.241.161

5 4 ms 3 ms 4 ms sjkBBAR001-2.bb.kddi.ne.jp [106.162.241.141]

6 8 ms 4 ms 8 ms sjkBBAC06.bb.kddi.ne.jp [182.248.174.1]

7 6 ms 4 ms 3 ms otejbb206.int-gw.kddi.ne.jp [210.234.225.85]

8 10 ms 17 ms 17 ms ix-ote212.int-gw.kddi.ne.jp [106.187.6.134]

9 15 ms 17 ms 4 ms Vlan527.ihar1.OVC-Tokyo.as6453.net [116.0.90.65]

10 4 ms 19 ms 13 ms Port-channel2.ihar2.OVC-Tokyo.as6453.net [116.0.91.1]

11 5 ms 4 ms 4 ms if-3-1-0-11.tcore1.TV2-Tokyo.as6453.net [180.87.180.21]

※１～12：日本国内でラウンドトリップが少ない

12 * * * 要求がタイムアウトしました。

13 70 ms 75 ms 70 ms if-6-2.tcore1.SVW-Singapore.as6453.net [180.87.12.109]

14 70 ms 71 ms 70 ms if-2-2.tcore2.SVW-Singapore.as6453.net [180.87.12.2]

15 77 ms 81 ms 82 ms 180.87.15.122

16 71 ms 91 ms 71 ms ae-5.msr1.sg3.yahoo.com [203.84.209.87]

17 78 ms 78 ms 77 ms ae-2.clr2-a-gdc.sg3.yahoo.com [106.10.128.5]

18 71 ms 71 ms 71 ms et-18-25.fab3-1-gdc.sg3.yahoo.com [106.10.128.25] 19 88 ms 88 ms 88 ms po-11.bas1-1-prd.sg3.yahoo.com [106.10.128.69]

20 73 ms 72 ms 72 ms ir1.fp.vip.sg3.yahoo.com [106.10.139.246]

※13～20：日本国外でラウンドトリップが多い　　　　　　　　　

（地理的・物理的に遠く、相手先のネットワーク環境に依存）

→この遅延をキャッシュと経路最適化で高速化し、解消する

通常経路とCDNの概念図

通常経路だと、遅延が大きくなる（経由が多く、各国の通信環境に依存）
ＣＤＮだと、エッジサーバのキャッシュと最適経路で安定した高速ネットワークで遅延が小さい

CDN経由でのアクセス概念図

日本国内のPCから、米国に存在するホスト「abc.com」へアクセスすることを想定
エッジサーバが応答することで、高速化＋ホスト負荷軽減のメリットもある

改めてCDNとは？

Contents Delivery Network

コンテンツを配信するネットワーク

これまでの内容を合わせると、次のように言うことができます。

Webコンテンツ(サイト、画像、動画等)を
世界中に分散配置されたエッジサーバのキャッシュを利用して
専用に経路最適化された高速なネットワーク網を通じて
全世界のインターネットへの配信を高速化する仕組み

SPEEDAでの効果

当社サービスのSPEEDAで検証した結果が下記の通りです。

どの地域でも200%以上高速化されている（日本国内も含めて）
特に中国(右端)が顕著

中国特有の環境が影響

金盾(グレートファイアウォール)という中国国内の情報検閲システムや、南北問題（中国国内でもアクセスが遅い）などでネットワーク遅延が大きい

CDN導入後の一般的な変更点・注意点

アクセス元IPアドレスがエッジサーバのIPになる

本来のリモートホストはHTTPヘッダで付与

「X-forwarded-for」や「Origin-IP」など

Webサーバでのアクセス制限やプログラム側での処理に注意

静的ファイルがキャッシュされる

ファイル名に日付を付けるなど、ユニーク化しないとキャッシュ有効期限まで反映されない等の問題が発生する可能性がある

まとめ

以上、一般的なCDNの効果と仕組みを説明しました。

もちろんメリットだけでなく費用やアプリケーション改修も発生するので、

しっかりと検証して、費用対効果を見極めることが重要です。

第1回えびスタ！ ~ 恵比寿スタートアップ勉強会 ~ レポート

noreply@blogger.com (Anonymous) — Wed, 24 Dec 2014 01:04:00 +0000

先日12月18日、恵比寿にある UZABASE 新オフィスにてエンジニア向け勉強会「えびスタ！」第 1 回を開催させて頂きました。

移転したばかりの新オフィスで初めて開催する勉強会ということで不安な点もありましたが、50 人という定員枠に対してなんと 50 人オーバー近い参加登録を頂き、盛況のうちにイベントを終えることが出来ました。参加者の皆さん、ありがとうございました！

本記事では当日の様子をレポートしたいと思います。

今回のアジェンダは以下のとおりです。
前半はクックパッド、Retty、VASILY、 UZABASE から 4 名のエンジニアによるプレゼンテーション。後半は皆でわいわいエビスビール（恵比寿だけに）やピザをつまみながらの QA セッション + 懇親会でした！

時間	発表者	内容
19:00 ~ 19:20	小野大器（クックパッド株式会社）	マイクロサービスアーキテクチャについて
19:20 ~ 19:40	梅田昌太（Retty 株式会社）	Dev が AWS と出会って DevOps を目指した話
19:40 ~ 20:00	今村雅幸（株式会社 VASILY）	プッシュ通知大戦争
20:00 ~ 20:20	文字拓郎（株式会社 UZABASE）	NewsPicks を支える技術と怖い話
20:30 ~ 21:15	-	QA セッション
21:15 ~ 22:00	-	懇親会

<プレゼンテーション>

1.マイクロサービスアーキテクチャについて小野大器様（クックパッド）

クックパッドからは小野様に、クックパッドが何故マイクロサービスアーキテクチャを採用したかということと、実際に行っている取組みについてご紹介頂きました。

クックパッドがマイクロサービスアーキテクチャを採用するにあたった経緯として

・ビジネスの変化（ブラウザからモバイルへの変遷といった環境の変化）

・巨大化するモノリシックなアプリではテストやデプロイに時間がかかり過ぎる

などの理由を挙げられていました。

えびスタ以前から「最近マイクロサービス気になる…！」という声を周りで聞いていたので、そのような方にとってはとても勉強になるセッションだったのはないでしょうか。

2.Dev が AWS と出会って DevOps を目指した話梅田昌太様（Retty）

Retty からは梅田様に、サービスの成長とユーザーの増加に伴う問題にへの対応と今後、そしてアプリケーションエンジニア出身の DevOps として AWS とどう関わっているのかについてお話頂きました。

ユニークユーザーが 10 万人以下のサービス黎明期から 200 万~ 400 万人の人気サービスにまで成長していく過程で、インフラアーキテクチャをどのように変化させて対応していったのかついて取り上げていらっしゃいました。

Devがawsと出会ってdev opsを目指した話 from Shota Umeda

またインフラで利用されている ElasticBeanstalk についての詳しい説明もされていました。
ElasticBeanstalk は AWS から無料で提供されているアプリケーション管理サービスです。AWS内のアプリケーションに対してデプロイの詳細を自動的に設定してくれます。

参加者には ElasticBeanstalk を利用されている方はほとんどいなかったのですが、このセッションを聞いて気になったという方も多かったのではないでしょうか。

3.プッシュ通知大戦争今村雅幸様（VASILY）

VASILY からは今村様に、iQON で行われているアプリのプッシュ通知に対しての取り組みをご紹介頂きました。(ちなみに VASILY さんは UZABASE と同じビルの 1 フロア下のご近所さんです）

プッシュ通知のメリットとそれに付随する課題にはじまり、代表的な ASP サービスの比較から、自前でプッシュ通知サービスを実装するにあたりおこなった様々な工夫（配信の最適化・スケーラビリティーの確保の仕方・通知の分析など）まで、プッシュ通知まわりでのノウハウについてお話頂きました。

テスト配信における秘話などタメになる話が満載でした。

4.NewsPicks を支える技術と怖い話文字拓郎（UZABASE）

弊社からは 3 ヶ月前に NewsPicks チームに join したばかりの文字が、急成長を続けるサービスの裏側がどのようなアーキテクチャで構成されており、どのような工夫を行っているのか、実際にあった事件なども交えてご紹介。

今までにあった怖い話として、荒ぶる Redis、暴走する Phantom JS、互換性肥満などといった事件の原因及び、解決策としてどのような工夫を行ってきたのかについてお話しました。

プレゼンテーションのあとはエビスビールとピザを頂きながら、しばし休憩を挟んで、後半の QA セッションへ。

<QAセッション>

QA セッションでは本日登壇された 4 名によるカジュアルな質疑応答が行われました。ガリガリにテック寄りの質疑応答が行われたわけではなく、ゆるい雰囲気の中で、ビール片手に冗談を交えながらの進行でした。

質問は、会場にいる参加者全員に対して、スマートフォンを用いて 4 択のアンケートで回答をとり、その結果をスクリーンに表示して共有する、という形で行われました。弊社杉浦恒例のリアルタイム参加型です！

登壇者の方には代表して、各自選んだ回答に対しての意見や、なぜその回答を選んだのか、などのお話をしていただきました。ユーモラスな回答も多かったのですが、時には登壇者の方の熱いお話を聞くこともできました。

質問内容は、好きなエディタは何かという質問から、普段聞きづらいような攻めた質問まで様々で、エンジニアジョークが飛び交うセッションでした。登壇者の意見を聞いて、他のエディタや他の言語に浮気してみようかな、なんて思った方もいたかもしれませんね。

また、登壇者以外の参加者がアンケートページで入力したコメントもスクリーンに表示されるようになっていて、そのコメントに対しての笑いも起こり、会場全体で盛り上がっていました。

その後は同じ会場内で懇親会を行いました。参加者の方と主催企業エンジニアの垣根なく、皆様思い思いに交流されていました。

集合写真を撮れなかったのが心残りです…

幸いなことに「次回はいつですか」というお声も多数頂けたので、是非次回も開催したいと思います！恵比寿オフィス引っ越し後まもなくの勉強会で到らないところも多々ありましたが、次回の勉強会では今回の反省を活かしてより良いものにしたいと思います！

みなさまご参加ありがとうございました！

オフショア開発 @ Framgia Vietnam

noreply@blogger.com (Anonymous) — Thu, 18 Dec 2014 01:30:00 +0000

SPEEDA QAチームの藤田です。

オフショアでのテスト自動化PJ立ち上げのために11月中旬より1か月間　Framgia Vietnam に来ています。

Framgia さんには、以前からUzabaseの社内システムの開発を依頼していましたが、今回は社内システムだけでなくSPEEDAの自動テストコードを実装いただくべく一緒にベトナムで仕事しております。

せっかくなのでちょっと今までの投稿とは異色ですが、Framgiaさんとのオフショア開発についてまとめようと思います。
今後オフショアを考えてる方には参考になる？とうれしいです。

信頼できるオフショアパートナー　ベトナムのFramgiaさん。

「なぜFramgiaさんと一緒に開発するのか？」という理由はいろいろありると思うのですが、
ベトナムという国としての特性とFramgiaさんの会社としての魅力が大きいと感じています。
オフショア開発を進めるポイントとなるベトナムの基本情報。

物価、労働コストが日本の3~4分の1
平均年齢が若い（27~28才）
親日
IT業種はとても人気がある
みんなポジティブで明るく、面倒みの良い国民性

Framgiaさんの場合、平均年齢が27才以下らしく、実際に170人くらいの社員みなさんが若くパワーあふれる感じです。
優秀な学生のリクルートには力を入れているとのことで、国費留学で海外で学んだ超エリートもいるとのこと。
Framgiaさんではラボ型開発を推進しています。ラボ型は、契約した期間で担当メンバーを確保することができ優秀なエンジニアを常に確保することができます。

日本と2Hの時差のあるベトナムでは、日本に合わせてみなさん1日は基本的に以下のスケジュールで仕事しています。
稼動時間が同じなので、いつでもオンラインでチャットや会議をできます。
AM 7:45 全社の朝礼
朝は、日本のクライアントに合わせて早いです。
毎日1人ずつモーニングスピーチを英語でし、最後は日本のあいさつの練習を全社で実施。やる気UP！

AM 8:00 チームの朝会
どのチームも、最後は「モー・ハイ・バー　わっしょい！」の掛け声で終了。みんな同じ時間に朝会をするので掛け声が社内のそこら中から聞こえます。やる気UP！2回目。

AM 8:10~PM17:00? 開発集中
チームは席が近く、いつでもコミュニケーションはその場ですぐできるのでミーティングが少なく仕事に集中できる時間が長い。

モチベーションやチームビルディングはどこでも大きな課題ですが、ここではそんな悩みないのでは？と思えるくらいにみなさん明るく仲良しで、とても仕事に集中しやすい会社の文化があります。

もちろん技術力UPにも熱心で、チーム対応Hackathon、コードコンテストなどのイベントが企画されていたり、トレーニングルームが用意されておりプロジェクトに携わるメンバーが必要スキルを短期で習得できる体制ができています。

ということで、長期で一緒に仕事をしこれからのオフショア開発の可能性をほぼ毎日感じ、更にベトナムとFramgiaが好きになってしまいました。（暖かいし、食べ物もめっちゃおいしいし。。。）

立上げはやっぱりオンサイト！
私は、春からオフショア開発に参加しましたが、今までを振り返って思うのはやはりコミュニケーションが難しいという部分です。
テスト自動化PJの立ち上げでは、メンバーが自分たちで開発環境をつくり、コードを書いていけるように、
「コンセプトを共有＞必要最小限のドキュメントを作成＞実際に一緒にやってみる」を繰り返しました。
その中でよりワークしそうなフローを一緒に相談したり、躓いている部分を共有しました。
割とスムーズに自動テストの実装を依頼できる体制ができたのも、オンサイトだったからこそ。

また、ベトナムでFramgiaメンバーと仕事がしたい！！

自動化を手伝ってくれたFramgiaエンジニア Ngocさん

with　社内Hackathonの告知ポスター！

NewsPicks(iOS)の設計思想

noreply@blogger.com (Anonymous) — Tue, 16 Dec 2014 02:52:00 +0000

NewsPicksチームインターン生の保田です。

主にiOSアプリ開発のお手伝いをしております。

iOSアプリを作っていて悩ましいな、と思うのが、同じ機能を持つがiPadとiPhoneで見た目が違うページをどう設計していくか、ということです。

ちょうど僕が関わった、NewsPicksの特徴的な機能である「ニュース中間ページ」をどのように設計したかについてお届けいたします。

NewsPicks上でニュースをみるとき、上図の左から右の流れで画面を切り替えます。

この中の真ん中の画面（ニュース中間ページ）の設計についてご説明していきます。

Season1. 単一仕様時代

当初は、次のような単純な仕様でした。

- 「フォローしているユーザー」セクションで、コメントを表示

- 「その他のユーザー」セクションで、コメントを表示

ただし、並び順に関してはサーバー側で『時系列順』『Like順』でソートされたものを受信して、そのまま表示していました。

当時は次のようなクラス図になっていました(メソッドは省略)。

ControllerにはiPhone, iPadで共通の処理が双方に書かれていたため、メンテナンス性が低いものになっていました。また、NewsTableViewにはコメントが表示されるのですが、コメントの有無の判定、データの保持などの処理も行っており、ViewとLogicが切り分けられていない典型的なアンチパターンになってしまっていました。

Season2. 人気コメントの誕生

次に、人気ニュース一覧からニュース中間ページに遷移した場合、Likeがたくさん付いているコメントを「人気コメント」というセクションで上位に表示するという仕様が産声を上げました。

仕様を整理すると、下記のようになります。

そこで、以下のような設計に変更しました。

Commentsというクラスを作成し、NewsTableViewから表示するコメントの表示内容、コメントのソートなどを切り離しました。これで、ViewからLogicを少し切り離すことができました。

CommentsWithTrendingCommentsはCommentsを継承した、人気コメントを表示するためのクラスです。NewsTableViewがどうCommentsを生成すれば良いか知っていて、それをControllerが知っているという設計です。実装の詳細を知らないと使えないクラスはイケてません。

Season3. 検索機能の実装と、連載企画のスタート

NewsPicksオリジナル連載企画がはじまり、中間ページに以下のようなページが仲間入りしました。

上のほうに連載名が書いていたり、「記事に登場するユーザー」というカテゴリが追加されたりしました。
また、検索機能が追加され、コメント検索の結果から遷移すると「ヒットしたコメント」というカテゴリを表示することとなりました。
仕様を整理すると、下記になります。

それに伴い大幅な設計変更を行い、以下の様な設計になりました。

大工事です。
5個しか無かったクラスが 20 個近くになりました。緑色のクラスが実際に呼び出されるクラスです。
共通部分は Abstract に集約し、コメントのロジックは PickerCommentsCategorizeLogic が責務を持ち、データはCategorizedComments で授受されそのまま表示すると正しいセクションが表示されます。
また、Factory Method パターンを導入したことによって呼び出し側は Abstract など実装の詳細は一切知りません。しかし、まだ改善の余地があります。『AbstractNewsSummaryController』の親クラスが iPad, iPhone によって分かれてしまっていて、全く同じ処理が iPhone, iPad のそれぞれに書かれてしまっています。




Season4. 更なるリファクタリング

Season3 で残ってしまった重複コードを削除すべく、リファクタリングを
行いました。iPad だけが継承している TransitionController は、Controller
の遷移方法に関する責務を持っていました。これをを Helper として存在さ
せ、標準の UIViewController を継承できるようにしました。




こうすることで共通部分を抽象クラスへ追いやることができ、具象クラスの重複コードが撲滅できました。



ここで、season3でFactory Method パターンを導入していたため、呼び出し側では全くコードの変更が必要ありませんでした。GoF さまさまです。

まとめ




NewsPicks では、同じ機能をもつが iPad と iPhone で見た目が違うページを、下記のような戦略でメンテナンス性の高い設計で実装しています。

- View, Logic, Controller を切り分ける

- 具象クラスに点在する共通処理を抽象クラスに追いやる

- Factory Method パターンでインスタンスの生成方法を隠すことにより、後々の変更に強くする

サービスローンチ時に、様々な試行錯誤を行いながら徐々にサービスを成長させる過程で、負債コードをためてしまうのは致し方ないことです。しかし、適切な手順で設計を変更すれば必ずコードは綺麗になります!





NewsPicks では更なるグロースに向けて、一緒に戦ってくれるエンジニアを募集しております!

インターン生でも設計から携わらせていただけるのでとても勉強になります!


興味をお持ちいただいた方は Wantedly などからご応募ください!!

俺の Docker イメージ

noreply@blogger.com (Anonymous) — Fri, 12 Dec 2014 06:58:00 +0000

SPEEDA 開発チームの緒方です。

最近話題に上ることも多い Docker ですが、UZABASE でもチームによっては積極的に使っています。
(現在は主に開発用途。)

他のコンテナ型仮想化技術と比較した場合の Docker の良さとして、

Docker Hub など、レジストリに登録されているイメージを利用できる
Dockerfile を使用したイメージ構築の自動化

などが挙げられると思います。

Docker Hub をざっと見渡しただけでも、Ubuntu や CentOS など環境だけを提供するものから redis や MySQL などそのままアプリケーションが実行できるものまで様々なイメージを見つけることができ、その良さを垣間見ることができます。

さて、その便利な Docker のイメージですが、実体がどのようになっているかご存知でしょうか。
Ubuntu や CentOS が丸ごと入っているくらいだからさぞかし難解なものだろうと思われる方もいらっしゃるかもしれませんが、作成の手順はとても単純です。

ということで、試しに作ってみることにしました。

とりあえず簡単なものということで、

フルスクラッチから作る
busybox を動かすだけの最小のイメージ

ということを目標とします。
イメージの作り方にも色々な方法があるのですが、今回はイメージのファイル構成を含んだアーカイブを作成して docker import するというやり方でいきます。

アーカイブの最終的なファイル構成は次のようになります。

bin/
bin/busybox (※busybox-x86_64 へのシンボリックリンク)
bin/busybox-x86_64

話がややこしくならないように、busybox はスタティックリンク版を利用します。
(ダイナミックリンクしているバイナリを実行するためにはライブラリの配置や /etc/ld.so.conf の設定などが必要です。)

以下手順です。

環境:
Docker 1.3.2 / Debian sid (Linux 3.16.0-4-amd64 #1 SMP Debian 3.16.7-2 (2014-11-06) x86_64 GNU/Linux)

$ mkdir -p busybox-static/bin
$ cd busybox-static/bin
$ wget -P . http://www.busybox.net/downloads/binaries/latest/busybox-x86_64
$ chmod +x busybox-x86_64
$ ln -s busybox-x86_64 busybox
$ cd ..
$ tar zcf busybox-static.tar.gz bin

これで、busybox を含んだ bin ディレクトリだけの最小の Docker イメージができました。
作成したアーカイブを docker import します。

$ cat busybox-static.tar.gz | docker import - busybox-static

うまくいったようです。

REPOSITORY          TAG                 IMAGE ID            CREATED             VIRTUAL SIZE
busybox-static      latest              85e373c46d80        27 seconds ago      973.2 kB

では、run してみます。

$ docker run busybox-static /bin/busybox ls -a
.
..
.dockerenv
.dockerinit
bin
dev
etc
proc
sys

これも成功です。目標達成！

ところで、アーカイブには bin ディレクトリしか含まれていなかったはずですが、いくつかファイルやディレクトリが追加されています。
これらは、デバイスなどホストのリソースを利用できるように、Docker が勝手に作ってコンテナに追加してくれているものです。

このような感じで、単純なイメージであれば非常に簡単に作ることができます。
Docker コンテナ内でプログラムを実行するには何が必要であるか、コンテナからホストのリソースはどのように見えているかなど勉強になることも多いので、一度スクラッチからのイメージ作成をやってみても面白いかと思います。

PhantomJSを使ってみる

noreply@blogger.com (Anonymous) — Thu, 11 Dec 2014 00:19:00 +0000

Techチームの遠藤です。

コンテンツのグローバル展開に向けて、いくつかの地点での画面表示の速度測定のためにphantomjsを使用し計測しました。
全部ではないですが初めの部分だけ記述します。

PhantomJSはまぁ仮想ブラウザを立ち上げてHPを操作していくものですね。
自動テストなどに使えるものです。

PhantomJS
http://phantomjs.org/

DownloadでそれぞれのOSにあったものをDLしてください

私はwindowsでやってるのでwindowsのみ記述します。
といっても大したことしてません。

windowsの場合はDLしてきたzipファイルを解凍し、任意の場所に配置してから環境変数にそのフォルダを指定すると使えるようになります。

さっそく使ってみます。

jsファイルを書いて、コマンドプロンプトで
phantomjs XXX.js

phantomjsコマンドと実行するファイルを指定するだけでできます。

まず手始めにgoogleへアクセスしてみます。

var page = require('webpage').create();
page.open('http://www.google.co.jp/', function () {
        page.render('sample.png');
        phantom.exit();
});

新しく作ったJSファイルに上記を記述して実行。

アクセスできました。
sample.pngというピクチャが保存されています。

↓こんな感じ

実際に使うにはどんどんページ遷移していきたいので、、、

下記ページを参考に遷移する先をtask化していきます。

https://github.com/ogr09/phantomjs_doc_ja/blob/master/Quick-Start.md

http://tips.hecomi.com/entry/20121229/1356785834

var page = require('webpage').create();

function next(){
  if (tasklist.length == 0) {
    phantom.exit();
  }
  var task = tasklist.shift();

  page.address = task.path;
  page.resources = [];

  page.open(page.address, function(status) {
    if (status !== 'success') {
      console.log('FAIL to load the address');
      phantom.exit(1);
    } else {
      var imagename = 'sample2_' + ('0' + task.id).slice(-2);
      page.render(imagename + '.png');

      next();
    }
  });
}

var tasklist = [
{
  id:1,
  path:'http://www.yahoo.co.jp/'
},{
  id:2,
  path:'http://www.google.co.jp/'
}];

next();

こんな感じに...

実行してみるとちゃんとアクセスされているようです。

sample2_01.png、sample2_02.pngと画像が保存されているので順にアクセスされてる模様です。

さて、意味もなくやってるわけじゃなくて仕事で使うので自社サイトのアクセスをするわけですが。。。

自社サイトでは認証があるのでそれを実装します。

var page = require('webpage').create();

function next(){
  if (tasklist.length == 0) {
    phantom.exit();
  }
  var task = tasklist.shift();

  page.address = task.path;
  page.resources = [];

  page.open(page.address, function(status) {
    if (status !== 'success') {
      console.log('FAIL to load the address');
      phantom.exit(1);
    } else {
      var imagename = 'sample3_' + ('0' + task.id).slice(-2);
      page.render(imagename + '.png');
      if(task.operation == null){
        next();
      } else {
        task.operation(page);
      }
    }
  });
}

var tasklist = [
{
  id:1,
  path:'http://www.ub-speeda.com/',
  operation:
    function(page){
      page.evaluate(function() {
        //ここは各サイトで実装が異なります
        document.forms[0].username.value = 'dummy_username';
        document.forms[0].password.value = 'dummy_password';
        document.forms[0].submit();
      });

      //弊社サイトではログイン数管理をしており、それを超過した場合、古いログインを追い出すなどがあるため確認メッセージを出し、再度ログインボタンを押してもらう仕様のため、その対応です
      setTimeout(function() {
        if (page.url.indexOf('top/welcome') > 0) {
          page.evaluate(function() {
            document.forms[0].submit();
          });
          setTimeout(function() {
            next();
          }, 3000);
        } else {
          next();
        }
     }, 3000);
    }
},{
  id:2,
  path:'http://www.ub-speeda.com/company/companyinformation/cid/JPN3O1U73D3VNGWO'
}];

next();

operationという変数を作ってそこにログイン処理を放り込んでみました。

operationが実装されていれば実行する感じですね。

これを応用すればHP内の操作を追加していけるかと思います。

こちらは実際動作するのですがID/Pass等が必要なため試していただける方は少ないかと思います。（ゴメンナサイ

次にファイルのアクセスに関しての情報をファイルに記述します。

ここではページのロード時間しか記述しませんが、ちょこっと検索すればより詳細な情報を取得できるサンプルコードがあるところがあるので詳細はそちらを参考にしてください。

まず、ファイルに書きだす方法ですが公式を参考に。。。

http://phantomjs.org/api/fs/method/write.html

var fs = require('fs');

fs.write(ファイル名, 内容, 'w');

で書き出せます。

組み込んでみましょう。

var page = require('webpage').create();
var fs   = require('fs');

page.onLoadStarted = function() {
  page.startTime = new Date();
};

function next(){
  if (tasklist.length == 0) {
    phantom.exit();
  }
  var task = tasklist.shift();

  page.address = task.path;
  page.resources = [];

  page.open(page.address, function(status) {
    if (status !== 'success') {
      console.log('FAIL to load the address');
      phantom.exit(1);
    } else {
      page.endTime = new Date();

      var logname = 'sample4_' + ('0' + task.id).slice(-2);
      store(logname, page.endTime, page.startTime);

      if(task.operation == null){
        next();
      } else {
        task.operation(page);
      }
    }
  });
}

function store(logname, endTime, startTime){
  page.render(logname + '.png');
  fs.write(logname + '.log', endTime - startTime , 'w');
}

var tasklist = [
{
  id:1,
  path:'http://www.ub-speeda.com/',
  operation:
    function(page){
      page.evaluate(function() {
        document.forms[0].username.value = 'dummy_username';
        document.forms[0].password.value = 'dummy_password';
        document.forms[0].submit();
      });

      setTimeout(function() {
        if (page.url.indexOf('top/welcome') > 0) {
          page.evaluate(function() {
            document.forms[0].submit();
          });
          setTimeout(function() {
            next();
          }, 3000);
        } else {
          next();
        }
     }, 3000);
    }
},{
  id:2,
  path:'http://www.ub-speeda.com/company/companyinformation/cid/JPN3O1U73D3VNGWO'
}];

next();

さて、これで

sample4_01.log

sample4_02.log

というファイルが出来ました。

中身は「endTime - startTime 」という内容が示すとおり殺伐とした数字だけです。

sample4_01.logの中身

---

219

---

sample4_02.logの中身

---

2448

---

これでページを開く時間がわかるようになりました。

実際にはこれをより詳細にHAR形式で出力するなどして、使えるものに仕上げていってます。

他にも、ダウンロードやajaxでの表示待ちなどを組み込みながら作ったりします。

こんな感じで日々仕事してます。。。

NewsPicks の Chrome 拡張を作った話

noreply@blogger.com (Anonymous) — Mon, 08 Dec 2014 11:40:00 +0000

こんにちは。NewsPicks の開発を担当している文字（もんじ）です。本日 NewsPicks の Chrome 拡張をリリースしました。

幸いユーザーの皆様にもご好評頂いているようで嬉しいです。ということで今回は NewsPicks の Chrome 拡張を作った話をします。アジェンダは以下の通りです。

NewsPicks の Chrome 拡張が提供する機能について
なぜ Chrome 拡張を作ったのか？
どうやって Chrome 拡張を作ったのか？
まとめ

1. NewsPicks の Chrome 拡張が提供する機能について

Chrome 拡張が提供する機能については NewsPicks のブログをご覧下さい。主に 2 つの機能を提供しています。

現在開いているページを NewsPicks に Pick する機能

アドレスバー（Omnibox）を利用して NewsPicks 内の記事やコメントを検索する機能

2. なぜ Chrome 拡張を作ったのか？

NewsPicks は基本的にスマホファーストな方針で開発しており、Web 版は今年の夏にリリースされたばかりです。しかしヘビーユーザー ── 特に NewsPicks がターゲットとしているビジネスマン ── は、スマホ以外から NewsPicks を利用することも多いと考えられます。実際に 25 % のユーザーが Chrome から NewsPicks にアクセスしていますし、そもそも会社でスマホを使ってニュースを見ていたら印象が悪いでしょう。

また、過去記事を参照しながら長文のコメントを書いて下さるユーザーは、スマホではなく PC から書きたいと考えている方が多いとも感じていました。私自身も NewsPicks でコメントを書く場合は、スマホではなく PC を利用することが多いため、業務の隙間時間（ビルド時間）や休日の隙間時間に業務外で Chrome 拡張を開発することにしました。

3. どうやって Chrome 拡張を作ったのか？

さて本題の開発方法ですが、それほど特別なことはしていません。Chrome 拡張は必要なツールキットも揃っており、JavaScript と HTML で書けるため、実開発工数は 10-20 時間程度だと思います（気楽に作ることが出来るのが HTML + JavaScript の良いところですね）。ただ、私自身は Chrome 拡張を作ったことが無かったため、以下の順に調査をしました。

Google のドキュメントを読む
今回開発しようとしている拡張機能に似た Extension のソースコードを読む

1. については、Google の API ドキュメントは良く整備されており、必要最低限の情報は十分に記載されていると感じました。ただ幾つか実際の使用例を見たかったので、2. のソースコードで知識を補完しました。ここでは具体的には以下を参考にしました。

前者は主に Pick 機能（ポップアップ）の実装について、後者はポップアップを常駐型のサイドバーにしようとしたときに読み込みました（Omnibox を操作する拡張のソースコードも幾つか読んだのですが、失念していまいました）。

ちなみにポップアップではなく常駐型のサイドバーにするのは途中で断念しました。理由は幾つかあるのですが、サイドバーを実装しようとすると content script もしくは executeScript と insertCSS によって表示しているページにスクリプトと CSS をインジェクトする必要があるのですが、後者が表示しているページの CSS とコンフリクトするためです。今回は手間を省くために CSS Framework を利用したかったのと、すべてのウェブページに対応しようと考えていたため、コンフリクトを回避するのはコストが高くつきそうだなぁと判断して取りやめた次第です。また、その他の理由としては、後述する Yeoman の generator との相性が悪かったというのもあります。JS ファイル内で依存スクリプト / CSS をインジェクトするため、grunt-usemin を使った Yeoman のビルドフローに乗せるのが面倒でした。

さて、幾つか下準備をしたあと、具体的な開発に入りました。最初は自分でちまちまビルドスクリプトを書こうと思っていたのですが、丁度 Yeoman の generator があることに気付いたので、こちらを使うことにしました。この generator を使うと extension のパッケージングまで含めたビルドフロー全般、また livereload を使ったデバッグ環境まで一式整えてくれるため、Chrome 拡張の開発に慣れていない人にとってはなかなか便利だと思います。ディレクトリ一式も良い感じに作ってくれるので、今回の拡張ではこの generator を使ってこんな感じの構成にしています。

具体的なソースコードについては特に複雑なことはしておらず、NewsPicks のサーバーが提供する REST API を叩いているだけです。あえて工夫した点を挙げると以下になるでしょうか。

まず popup については MVC で開発しました。今回はそれほど複雑な画面ではないので Backbone を利用していますが、フォームのモデルとのバインディングだけ面倒だったので backbone.stickit を利用しています。

backbone.stickit は Backbone にバインディング機能を提供してくれるライブラリです。これを Marionette と組み合わせて使う場合は、次のような Behavior を定義しておくと便利です。

class StickitBindingBehavior extends Backbone.Marionette.Behavior

  createBindings: ($root, attr="name", ignores={}) ->
    bindings = Backbone.$.extend true, {}, @options.bindings
    $root.find("[#{attr}]").each ->
      $el = $(@)
      attribute = $el.attr attr
      return if bindings[attribute]
      for ignore in ignores
        if _.isString ignore
          return if ignore is attribute
        else if _.isObject ignore
          return if ignore.test and ignore.test attribute
      selector = "[#{attr}='#{attribute}']"
      tag = $el.prop("tagName").toLowerCase()
      key = "#{tag}#{selector}"
      return if bindings[key]
      bindings[key] = "observe": attribute
    bindings

  onRender: ->
    @view.bindings = @createBindings @$el, @options.attr, @options.ignores
    @view.stickit()

  onDestroy: ->
    @view.unstickit()

Backbone.Marionette.Behaviors.behaviorsLookup = ->
  stickit: StickitBindingBehavior

これを使うと基本的には何も書かなくてもそれっぽくバインドしてくれるようになります。

class FormView extends Backbone.Marionette.ItemView

  template: "#form"
  behaviors:
    stickit: {}

ちなみに Backbone.Marionette + backbone.stickit + Browserify を使ったテンプレートを以前自分で作って github に公開しているので、良ければこちらをご参照下さい。
→ backbone.marionette.example

Omnibox については Chrome の extension と API を組み合わせているだけですが、操作感については「.」を打つことでページを切り替えられるような UI にしました。また、Chrome の Omnibox は一度に表示出来る候補リストのサイズが少ないため、サーバーの負荷を減らすためにサーバー側から取得した検索結果のバッファをページングし、終端まで辿り着いた段階で API を叩いてリモートから次のページを取得するようにしています。また、当然ですがキーボード入力は適当に間引いて負荷を減らしています。

4. まとめ

以上が今回開発した内容の概要になります。
Chrome 拡張の開発についてのまとめです。

Chrome の API ドキュメントは良く整備されており、Chrome extension のソースコードも GitHub などに沢山公開されているため、キャッチアップは比較的容易（但し GitHub に公開されている extension のコードは玉石混淆なため、安易に引用するのはオススメしません）
Yeoman の generator を使うと開発環境は何も考えずにセットアップできる
popup や omnibox の実装は、それほど Chrome 固有の知識を要求されるものではなく、HTML と JavaScript の知識があれば十分

「Chrome 拡張の開発」と言うとなんとなく敷居が高く感じてしまいますが、それほど難しい概念があるわけでもないので、皆さんも気楽に開発してみると楽しいのではないでしょうか。

NewsPicks では一緒に開発してくれるエンジニアを募集しています！様々なバックグラウンドを持つエンジニアや編集部の皆と世界一の経済メディアをつくりましょう！興味の在る方は是非 Wantedly などでお気軽にオフィスまでお越し下さい！

Scalaのパーサコンビネータにふれる

noreply@blogger.com (Anonymous) — Wed, 03 Dec 2014 17:25:00 +0000

技術チームインターンの中村です。

内製化されたシステムを抱えた会社にいると，エンジニア以外の方のためにドメイン特化言語を構築するようなこともあるかと思います。 uzabaseの場合，アナリストがSPEEDAに載せる業界概要の記事を効率良く書けるようになるために，Markdownに似た軽量マークアップ言語が作られました。

作る言語が構文木が不要なほど小規模ならば，文字用ユーティリティだけで十分に言語実装が可能かと思います。一方で，言語が大規模であったり効率の良いコンパイルが求められたりするのであれば，LexやYaccのようなパーサージェネレータが必要になるかもしれません。

今回はその間くらい，つまり単純な文字列処理では足りないものの，パーサージェネレータを使うほどでもないくらいの言語を構築するときに便利なScalaのパーサーコンビネータについて紹介します。

受け取った入力の結果を返す関数としてパーサーを組合せることで，目的のパーサーを高階関数（コンビネータ）として構築したものがパーサーコンビネータです。パーサーは文法構造の連続，繰り返し，選択などを実現する関数で組み合わされます。このとき，言語が関数あるいはメソッドの中置記法をサポートするなら，パーサーコンビネータの定義はEBNFの生成規則と似たものになります。たとえば，論理式のEBNFとこれに従う論理式をパースするパーサーコンビネータの対応は以下のようになります。

EBNF
expr ::= termA {"|" termA}
termA ::= termN {"&" termN}
termN ::= factor | {"!" factor}
factor ::= "TRUE" | "FALSE" | "(" expr ")"
|は選択，{}は0以上の繰り返し

パーサーコンビネータ
def expr: Parser[Any] = termA~rep("|"~termA)
def termA: Parser[Any] = termN~rep("&"~termN)
def termN: Parser[Any] = factor | "!"~factor
def factor: Parser[Any] = "TRUE" | "FALSE" | "("~expr~")"
|は選択，~は連続，rep()は0回以上の繰り返し

|, ~, repをメソッドとして別のParserを引数にとり，より複雑な文字列を受理するようなParserを返す，この繰り返しによって論理式を受理するパーサを構築しています。上の定義は宣言的なので，どのような計算がパース過程で行われるのか定義から読み取ることができません。そこで，アトミックなパーサと，パーサ同士を逐次的に繋げた場合の計算がどのような行われるか見て行きたいと思います。

最小のパーサはsuccess, failureというメソッドです。これらは入力をまったく消費しません。 2つのメソッドは以下のように定義されています。

def success[T](v: T) = Parser{ in => Success(v, in) }

def failure(msg: String) = Parser { in => Failure(msg, in) }

ヘルパーメソッド
def Parser[T](f: Input => ParseResult[T]): Parser[T] = new Parser[T]{
  def apply(in: Input) = f(in)
}

Parserというのが，|や~をメソッドに持つパーサーのクラスです。 Inputは，パーサーが生の文字列だけではなく，トークンのストリームも読めるようにするために，パース対象を抽象化するクラスです。 Success, FailureはParseResultの子クラスとして，それぞれ成功，失敗したパース結果と残りの入力をまとめるクラスです。これらのクラスの宣言は以下のように定義されています。

abstract class Parser[+T] extends (Input => ParseResult[T]) {..}

case class Success[+T](result: T, override val next: Input) extends ParseResult[T] {
  ..
}

case class Failure(override val msg: String, override val next: Input) 
  extends NoSuccess(msg, next) {..}

success, failureの次に仕事をするパーサが以下のelemです。これは，入力を適用すると，入力の先頭がeであれば，resultにe, nextに2番目以降の入力もつSuccessを返します。また，先頭がeでなければFailureを返します。

def elem(e: Elem): Parser[Elem] = accept(e)

ここまでで，Parserが入力(Input)を受けつけ，ヘルパーメソッドのfにinputを適用した結果(result)と入力の残り(next)を返す関数であるようなイメージを持って頂けたと思います。

次に逐次的にパーサ同士をつなげるメソッド~を見ていきます。 ~は以下のように定義されています。

def ~[U](q: => Parser[U]): Parser[~[T, U]] = { lazy val = p = q
  (for {
    a<- this
    b<-p
  } yield new ~(a, b)).named("~")
}

new ~(a, b)は繋げられた2つのパーサーの結果をひとつにまとめるためケースクラス~のインスタンスです。また，for式に必要なflatMap, mapの定義は以下になります。

def flatMap[U](f: T => Parser[U]): Parser[U] = Parser{ in => 
  this(in) flatMapWithNext(f) 
}

def map[U](f: T => U): Parser[U]  = Parser{ in => this(in) map(f)}

上の定義で使われるSuccessにおけるflatMapWithNextとmapは以下のようになります。

def flatMapWithNext[U](f: T => Input => ParserResult[U]): ParseResult[U] =
   f(result)(next)

def map[U](f: T => U) = Success(f(result), next)

そして，これらを用いてfor式を地道に展開していくと例えば次のように書き直せます。

new Parser[T~U] {
  def apply(in: Input) = Parser.this(in) match {
    case Success(r, n) => p(n) match {
      case Success(r1, n1) => Success(new ~(r, r1), n1)
      case Failure(msg, next) => Failure(msg, next)
    }
    case Failure(msg, next) => Failure(msg, next)
  }
}

最初のパーサーが返すParseResultにある残りの入力が次のパーサに渡されることで，計算が進めるようです。上の定義を見ると，はじめのパーサが失敗すれば計算は終了。成功すれば，次のパーサpに残りの入力(n)を渡す。そこで失敗すれば後続する計算がなされず全体の計算が終了。成功すれば両パーサの計算結果としてケースクラスの~が返されています。

ここまでで，パーサーコンビネータの実体が引数をパース対象として受付け，関数適用の結果と残りのパース対象の組を返す関数のように振舞うことがなんとなく伝わったかと思います。

さらに詳しく知りたい方はこちらを参考にパーサーコンビネータそのものを自作してみるとよいかもしれません。リンク先の資料ではパーサコンビネータがモナド値であることを踏まえた上で実装方法を紹介しています。事実，ScalaのParserやParseResultはモナド値となっています。

資料ではParserが次のように定義されています。

newtype Parser a = Parser (String -> [(a,String)])

InputがString, ParseResultが[(a, String)]とそれぞれ対応しています。空リストがFailureを意味します。最後に上のpdfの実装をScalaで試すときに，モナド則の確認やfor式の記述に最低限必要な定義を残しておくので，ご参考にしていただければと思います。

trait Parsers {
  def Parser[A](f: String => List[(A, String)]): Parser[A] = new Parser[A]{
    def apply(input: String) = f(input)
  }

  def success[A](v: A): Parser[A] = Parser{ input => List((v, input)) }

  def failure[A]: Parser[A] = Parser { input => List() }

  trait Parser[A] extends (String => List[(A, String)]) {
    def apply(input: String): List[(A, String)]

    def flatMap[B](f: A => Parser[B]) = Parser{ (input: String) =>
      for {
        (a, input2) <- this(input)
        b <- f(a)(input2)
      } yield b
    }

    def withFilter(pred: A => Boolean): Parser[A] = Parser { input: String =>
      for {
        elm <- this(input) if pred(elm._1)
      } yield elm
    }

    def map[B](f: A => B) = Parser {input =>
      for {
        a <- this(input)
      } yield(f(a._1), a._2)
    }
  }
}

付録, for式の展開過程

this.flatMap {
  a => p.map(b => new ~(a, b))
}

Parser {
  in => Parser.this(in) match {
    case Success(r, n) => ((a: T) => p.map(b => new ~(a, b)))(r)(n)
    case Failure(msg, next) => Failure(msg, next)
  }
}

Parser { in =>
  Parser.this(in) match {
    case Success(r, n) => Parser { in => p(in).map(b => new ~(r, b)) }(n)
    case Failure(msg, next) => Failure(msg, next)
  }
}

Parser { in =>
  Parser.this(in) match {
    case Success(r, n) => p(n) match {
      case Success(r1, n1) => Success(new ~(r, r1), n1)
      case Failure(msg, next) => Failure(msg, next)
    }
    case Failure(msg, next) => Failure(msg, next)
  }
}

【えびスタ！】12/18(木)勉強会を開催します【クックパッド × Retty × VASILY × UZABASE】

noreply@blogger.com (阿達) — Mon, 01 Dec 2014 03:19:00 +0000

いま勢いのある恵比寿近辺のスタートアップを中心とした、エンジニア向けの技術勉強会です。

クックパッド
Retty
VASILY
UZABASE

のエンジニア陣が、最近の各社の取り組みについてお話させて頂きます。

後半は軽食を交えつつ、カジュアルな QA セッションの場や各社エンジニアとの懇親会も予定しておりますので、ご興味のある方は是非ご参加下さい！（エビスビールとピザもあります！）

残りの一般参加枠は9名(12/1現在)となっております。

興味のある方はお早めにお申し込みください！

申込みはこちらから(compass)

えびスタ！#1【クックパッド × Retty × VASILY × UZABASE】

http://ebista.connpass.com/event/10258/

NewsPicks × D3.js

noreply@blogger.com (Anonymous) — Tue, 18 Nov 2014 07:30:00 +0000

NewsPicksの開発をしている板倉です。

NewsPicksではニュースを見る画面とは別に、
どの記事がどれくらい読まれているかという画面の開発を進めています。
直感的にわかる画面がほしいということで、 D3.jsを使って画面を開発することになりました。
D3.jsを使うにあたって勉強するつもりで何か作ろうと思い書いたのが今回のエントリーになります。

今回の開発環境

Mac OS X(10.10)

D3.js(3.4.13)

D3.jsについて

まずは、D3について少しだけ。

Githubの人気リポジトリに入っている人気のJavaScriptライブラリです。(2014/11 時点)

https://github.com/trending?|=javascript

APIリファレンスを見ると、たくさんの機能があるのがわかります。

地図を書いてみよう

APIリファレンスを見ていて気になったのがGeography。

ということで日本地図を書いてみました。

参考にしたサイト

D3.jsとTopoJSONで地図を作る

地図上に何か表示してみよう

地図を描いただけだと面白くないので、地震のデータを使って地図上に表示してみました。

まずは、データの取得。

以下のサイトで日本の緯度経度、地震の大きさと期間を入力してデータをダウンロードしました。

USGS

ダウンロードしたデータを0.1秒ずつずらして描画してみました。

円をそのままにしておくと画面が円だらけになるので、描画して2秒後に消しています。

d3.csv('geo/eq.csv', function(d) {
    // データが降順だったので反転
    d = d.reverse();
    // 大きさ
    var rScale = d3.scale.linear().domain(d3.extent(d, function(e){
         return e.mag;
    })).range([3, 81]);
    // 深さ
    var colorScale = d3.scale.linear().domain(d3.extent(d, function(e){
         return e.depth;
    })).range(['yellow', 'red']);
    g.selectAll('circle')
         .data(d)
         .enter().append('circle')
         .attr('fill', function(d) { 
              return colorScale(d.depth);
         })
         .attr('fill-opacity', 0.5)
         .attr('stroke-width', '1')
         .attr('stroke', function(d) { 
              return colorScale(d.depth);
         })
         .attr('cx', function(d){
             return projection([Number(d.longitude), Number(d.latitude)])[0];
         })
         .attr('cy', function(d){
             return projection([Number(d.longitude), Number(d.latitude)])[1];
         })
         .transition().delay(function(d, i) { 
              return i * 100;
         })
        .attr('r', function(d) {
             return rScale(d.mag)
         })
        .each('start', function(d){
             dateText.text(df(new Date(d.time)));
             mag.text('M ' + d.mag);
             depth.text('Depth: ' + d.depth + ' km');
         })
        .transition().delay(function(d, i) {
             return (i * 100) + 2000
         })
        .each('end', function(d){
             d3.select(this).remove();
         });
})

実装したものはこちら。

数字が並んでるデータを見るだけだと気付きにくいことも
図形で表現してみると新しい発見がありますね。

Uzabaseではデータの視覚化を進めるエンジニアを募集しております。
興味をお持ちいただいた方はWantedlyなどからご連絡ください！

CentOS7にLAMP環境を構築してWordpressをインストールする

noreply@blogger.com (阿達) — Tue, 18 Nov 2014 07:27:00 +0000

インターン生の阿達です。

いつかはこのブログや、会社のHPも自分で作れたらいいなあと思っている
プログラミング歴１か月のぺーぺーです。

その野望の第一歩として与えられた課題が
CentOS7にLAMP環境を構築してWordpressをインストールする
でした。
この記事では勉強した内容の復習を兼ねて手順を丁寧に紹介したいと思います。

目次

【1】LAMP( Apache + MariaDB(Mysql) + PHP )をインストールする

　0,準備
　1,Apacheをインストールする
　2,MariaDBをインストールする
　3.PHPをインストール

【2】Wordpressをインストールする
　
　1,Wordpressをダウンロードする
　2,MariaDBにWordpress用のデータベースを作成する
　3,Wordpressのセットアップをする
　4,

【1】LAMP( Apache + MariaDB(Mysql) + PHP )をインストールする

0,準備

○ユーザーをルートに切り替える

sudo su
su

○SELinux無効化

vi /etc/sysconfig/selinux

下記を変更
SELINUX=enforcing
↓
SELINUX=disabled

・OSを再起動します

shutdown -r now

○firewalld設定・現在の設定の確認

firewall-cmd --list-all-zones

（略）
public (default, active)
interfaces: enp0s3 enp0s8
sources:
services: dhcpv6-client ssh
（略）

初期設定では publicゾーンに ssh のみ許可されています。

・追加で http と https を許可設定します

firewall-cmd --add-service=http --zone=public --permanent
firewall-cmd --add-service=https --zone=public --permanent

・設定を読込みます

firewall-cmd --reload

・設定を確認します

firewall-cmd --list-services --zone=public

(下記表示であればOK)
dhcpv6-client http https ssh

1,Apacheをインストールする

yum install httpd

・.Apacheの設定を行う

vi /etc/httpd/conf/httpd.conf

・ここでは必要最小限のサーバー名（今回はexample.com）だけ設定しておきます

ServerName example.com:80

・Apacheのデーモンを起動する

・ウェブサーバー(httpd)を起動します

systemctl start httpd.service

・ウェブサーバー(httpd)のデーモン(サービス)が起動しているか確認します

systemctl list-units |grep httpd

(下記表示であればOK)



httpd.service        \
    loaded acitive running The Apache HTTP Server

・次に、ウェブサーバー(httpd)デーモンがブート時に自動起動するように設定しておきます。

systemctl enable httpd.service

以下のように表示されてればOK

ln -s '/usr/lib/systemd/system/httpd.service' '/etc/systemd/system/multi-user.target.wants/httpd.service'

・ウェブサーバー(httpd)デーモンの登録状態を確認します。

systemctl list-unit-files |grep httpd
(下記表示であればOK)
httpd.service         enabled

・ブラウザから先程サーバー名で設定したアドレス（この場合はexample.com）にアクセスすると、
Apacheの「Red Hat Enterprise Linux Test Page」が表示されます。

2,MariaDBをインストールする

yum install mariadb-server mariadb

・MariaDBのデーモンを起動する

・mariadbデーモンが起動しているか確認します。

systemctl list-units |grep mariadb

・何も出力されないので、起動していない状態だとわかります。

・次に、mariadbデーモンの登録状態を確認します。

systemctl list-unit-files |grep mariadb

mariadb.service        disabled

disabledなので、再起動してもmariadbデーモンは起動しません。

・mariadb のデーモン（サービス）を起動します。

systemctl start mariadb.service

・mariadb のデーモン（サービス）が起動しているか確認します。

systemctl list-units |grep mariadb
(下記表示であればOK)
mariadb.service                \
   loaded active running MariaDB database server

・次に、mariadbデーモンの登録状態を確認します。

systemctl list-unit-files |grep mariadb

mariadb.service        disabled

disabledなので、再起動してもmariadbのデーモンは起動しません。

・次に、mariadbデーモンがブート時に自動起動するように設定しておきます。

systemctl enable mariadb.service
(下記表示であればOK)
ln -s '/usr/lib/systemd/system/mariadb.service' '/etc/systemd/system/multi-user.target.wants/mariadb.service'

・再度、mariadbデーモンの登録状態を確認します。

systemctl list-unit-files |grep mariadb
(下記表示であればOK)
mariadb.service        enabled

enabledなので、再起動してもmariadbデーモンは起動されます。

・MariaDBのセキュリティ設定をします。

/usr/bin/mysql_secure_installation

OTE: RUNNING ALL PARTS OF THIS SCRIPT IS RECOMMENDED FOR ALL MariaDB
      SERVERS IN PRODUCTION USE!  PLEASE READ EACH STEP CAREFULLY!

In order to log into MariaDB to secure it, we'll need the current
password for the root user.  If you've just installed MariaDB, and
you haven't set the root password yet, the password will be blank,
so you should just press enter here.

Enter current password for root (enter for none): 【空enter】
OK, successfully used password, moving on...
Setting the root password ensures that nobody can log into the MariaDB
root user without the proper authorisation.
Set root password? [Y/n] 【Y】
New password: 【パスワードを設定する、今回はhoge】
Re-enter new password: 【先程のパスワードを入力する、今回はhoge】
Password updated successfully!
Reloading privilege tables..
 ... Success!
By default, a MariaDB installation has an anonymous user, allowing anyone
to log into MariaDB without having to have a user account created for
them.  This is intended only for testing, and to make the installation
go a bit smoother.  You should remove them before moving into a
production environment.
Remove anonymous users? [Y/n] 【Y】
 ... Success!
Normally, root should only be allowed to connect from 'localhost'.  This
ensures that someone cannot guess at the root password from the network.
Disallow root login remotely? [Y/n]【Y】
 ... Success!
By default, MariaDB comes with a database named 'test' that anyone can
access.  This is also intended only for testing, and should be removed
before moving into a production environment.
Remove test database and access to it? [Y/n]【Y】
 - Dropping test database...
 ... Success!
 - Removing privileges on test database...
 ... Success!
Reloading the privilege tables will ensure that all changes made so far
will take effect immediately.
Reload privilege tables now? [Y/n]【Y】
 ... Success!
Cleaning up...
All done!  If you've completed all of the above steps, your MariaDB
installation should now be secure.
Thanks for using MariaDB!

・ログインできるか試す。

mysql -h localhost -u root -p

【】で示した部分が必要な操作です。


Enter password:【先程設定したパスワードを入力する、今回はhoge】

Welcome to the MariaDB monitor.  Commands end with ; or \g.
Your MariaDB connection id is 4
Server version: 5.5.37-MariaDB MariaDB Server
 
Copyright (c) 2000, 2014, Oracle, Monty Program Ab and others.
 
Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.
 
MariaDB [(none)]>【 exit】

Bye

3,PHPをインストールする

・PHPをインストールする

yum install php-mysql php php-gd php-mbstring

・phpがインストールできたか、バージョンをチェックしてみます。

php --version

PHP 5.4.16 (cli) (built: Jun 10 2014 02:52:47)
Copyright (c) 1997-2013 The PHP Group
Zend Engine v2.4.0, Copyright (c) 1998-2013 Zend Technologies

・httpdサービス(Apache)を再起動する

systemctl restart httpd.service

・php動作確認用のファイルを作成する。

cd /var/www/html
# echo '' > index.php

・上記で作成したindex.phpへブラウザからアクセスする。
（今回はexample.com/index.php）

phpの画面が表示されます。

【2】Wordpressをインストールする

1,Wordpressをダウンロードする

・最新のWordpressをダウンロードする

cd /tmp

wget http://wordpress.org/latest.tar.gz

・ダウンロードしたWordpressを解凍する

tar -xvzf latest.tar.gz -C /var/www/html

2,MariaDBにWordpress用のデータベースを作成する

・MariaDBにrootでログインする

mysql -h localhost -u root -p

・データベースを作成する

今回testとhogehogeで示した部分はご自分で設定してください
CREATE USER test@localhost IDENTIFIED BY "hogehoge";
CREATE DATABASE test_blog;
GRANT ALL ON test_blog.* TO test@localhost;
FLUSH PRIVILEGES;
exit

3,Wordpressのセットアップをする

・localhostとWordpressを紐づける

/etc/hosts に下記を書き足す

127.0.0.1 wordpress

・wp-config.phpを生成する

cd /var/www/html/wordpress

cp wp-config-sample.php wp-config.php

・wp-config.phpでWordpressの設定をする

vi wp-config.php

【2】2,で作成したデータベースの情報を入力します
define('DB_NAME', 'test_blog');
define('DB_USER', 'test');
define('DB_PASSWORD', 'hogehoge');
define('DB_HOST', 'localhost');
define('DB_CHARSET', 'utf8');
define('DB_COLLATE', '');
(中略)
$table_prefix = 'wp_';
define ('WPLANG', '');
define('WP_DEBUG', false);

・example.com/wordpressにアクセスして設定をする。

指示に従って設定していけばOKです。

以上になります。

私がインストールしたときには、SELinuxで詰まったりしていたので

基礎の基礎から書いてみました。

備忘録兼ねてですが、どなたかの参考になれば幸いです。

荒ぶるRedisとNewsPicks

noreply@blogger.com (Anonymous) — Wed, 05 Nov 2014 08:45:00 +0000

NewsPicks の開発を担当している杉浦です。

NewsPicksはおかげさまでユーザ数が20万を突破しました。
サービスが順調に成長するということは大変にうれしいことなのですが、エンジニアとしては負荷との戦いになったりします。我々も例に漏れず日々、負荷との戦いを強いられています。

NewsPicksの機能面の特長として次の2つがあります。
・フォローしているユーザのPickが自分のタイムラインに集約される
・各カテゴリで話題になった記事を閲覧できる

これらの機能を高速に処理・実現するためにRedisを採用しているのですが、
ユーザ数の増加による負荷増加によって問題が発生するようになりました。

本記事では、
・ユーザ数が増える中でRedisにどのような問題が発生したか
・ソースコードを読みながら問題の原因を考える
・そして、どのような対応を行っているか

を共有したいと思います。

どのような問題が発生したか

主に2つの問題が発生しました。

ピーク時のレスポンスタイムが遅くなる

NewsPicksは朝の8時にその日の注目ニュースをPush通知で送信します。その直後が最大のピークタイムになり、平常時の10倍程度のリクエストを処理する必要があります。ピークタイムに画面表示のレスポンスタイムが悪化するという問題が発生しました。

夜間バッチ実行時にslaveとのレプリケーションが切れる

夜間にRedisに保持している古いタイムラインデータを削除するというバッチが実行されるのですが、バッチによる大量のデータ更新が発生しレプリケーションのタイムアウト値を越えてしまい、レプリケーションが切れるという障害が発生しました。

ソースコードを読みながら問題の原因を考える

なぜこのような問題が発生するようになったのでしょうか。
原因を知るにはRedisのアーキテクチャを理解する必要があります。そして、ソフトウェアのアーキテクチャを理解する近道はいつの時代もソースコードを読むことです。ということで、redis-2.8.17をダウンロードして読んでみました。

ファイル数が少なくシンプルなソフトウェアということがわかります。
理解をしやすくするために、おおまかな機能ごとに整理します。

メインプログラムの redis.c から ae.c を読み進めると、RedisはI/O戦略としてイベントループモデルを採用していることがわかります。

イベントの発火時に各コマンドハンドラーが呼ばれて処理が進められています。

イベントループの詳細については TheC10kProblem を参照してください。
2006年の古い記事ですがよくまとまっていて、今読んでも本質的な部分は変わっていません。

イベントループモデルのメリットは以下が挙げられます。

処理ごとにスレッド/プロセスを用意しないので使用メモリ量を抑えられる
スレッド/プロセス切り替えのコンテキストスイッチのオーバヘッドが少ない
ノンブロッキングI/Oを合わせて採用することで、I/O待ち時間に他の処理が行われる

逆に、デメリットは以下のようなものがあります。

ループの中に遅い処理が入ると、後続の処理が遅れる
(Redisの場合は) 1スレッドでループ処理を行うので、マルチコアのサーバの場合に全てのCPUリソースを使い切らない

Redisはデータを全てメモリ中に持つため、高速に処理を行いますが、
それでもRedisの利用度が上がってくると、Redisの能力を越える多量の読み書きが実行される時がやってきます。
そして、Redisはイベントループモデルの特性から、閾値を越えると一気に処理遅延が発生します。

NewsPicksが遭遇した問題はまさにこの事象で、あるタイミングを境に突然問題が発生するようになりました。
システムのアーキテクチャを考える際に負荷に合わせてタイミング良くスケールアウトしていくことができる仕組みを作ることが大切です。
なお、Nginx、Node.jsも同様にイベントループを採用しているので、同じ考え方を適用できると思います。

NewsPicksではどのような対応を行っているか

現在、データのシャーディングと、垂直・水平に処理リクエストを分散をするように対応を進めています。
タイムラインデータについては、一定のユーザ数毎にデータ保存するサーバを分離しています。一般的にユーザパーティショニングによる垂直分散と呼ばれる手法です。
ランキングデータについては読み取りリクエストをslaveに分散させるといった水平分散の対応を行っています。

NewsPicksでは一緒に負荷と戦ってくれるエンジニアを募集しています！
サービスの成長を肌で感じられるやりがいのある仕事です（笑
興味をお持ちいただいた方はWantedlyなどからご連絡ください！

ドメイン名について

noreply@blogger.com (Anonymous) — Fri, 31 Oct 2014 02:48:00 +0000

インフラを管理している羽山です。
今回は基本的なおさらいということでWEBサービスで1番重要なドメイン名について触れようと思います。

簡単にユーザベースのホームページに繋がるまでのフローを書くと以下のようになります。

1. ブラウザからアクセスhttp://www.uzabase.com
2. www.uzabase.comをIPアドレスに変換（名前解決）する
3. ブラウザがHTTPでサーバにアクセス

このとき、「www.uzabase.com」をドメイン名と呼びます。
そして、2番のフローはDNS（Domain Name System）というシステムを利用して
ドメイン名からIPアドレスに変換しています。

なぜこのようなことをするかというと、IPアドレスというインターネットの世界はIPアドレスを利用して通信しているからです。

しかし、IPアドレスは数字の羅列であり人が覚えるには非常に大変なので、人がインターネットを使うときは見やすいようにドメイン名というものを利用しています。

ドメイン名の詳しい仕組みはJPNICの公開している資料が見やすいので見てみてください。

https://www.nic.ad.jp/ja/dom/system.html

さて、DNSには様々な情報が記載されており、主に以下の種類があります。

Aレコード：IPアドレス
CNAMEレコード：Aレコードのエイリアス
MXレコード：メールサーバ情報
NSレコード：ゾーン管理サーバ（権威サーバ）
SOAレコード：ゾーン設定情報
TXTレコード：追加情報
SPF（TYPE99）レコード：メールアドレス認証情報

ユーザベースのDNSレコードの情報はこのようになっています。

$ dig uzabase.com any 

; <<>> DiG 9.8.3-P1 <<>> uzabase.com any
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 57937
;; flags: qr rd ra; QUERY: 1, ANSWER: 12, AUTHORITY: 4, ADDITIONAL: 4

;; QUESTION SECTION:
;uzabase.com. IN ANY

;; ANSWER SECTION:
uzabase.com. 50 IN A 211.11.100.59
uzabase.com. 2460 IN MX 20 alt1.aspmx.l.google.com.
uzabase.com. 2460 IN MX 20 alt2.aspmx.l.google.com.
uzabase.com. 2460 IN MX 30 aspmx2.googlemail.com.
uzabase.com. 2460 IN MX 30 aspmx3.googlemail.com.
uzabase.com. 2460 IN MX 30 aspmx4.googlemail.com.
uzabase.com. 2460 IN MX 30 aspmx5.googlemail.com.
uzabase.com. 2460 IN MX 10 aspmx.l.google.com.
uzabase.com. 69433 IN NS ns-413.awsdns-51.com.
uzabase.com. 69433 IN NS ns-534.awsdns-02.net.
uzabase.com. 69433 IN NS ns-1238.awsdns-26.org.
uzabase.com. 69433 IN NS ns-1832.awsdns-37.co.uk.

;; AUTHORITY SECTION:
uzabase.com. 69433 IN NS ns-1832.awsdns-37.co.uk.
uzabase.com. 69433 IN NS ns-413.awsdns-51.com.
uzabase.com. 69433 IN NS ns-534.awsdns-02.net.
uzabase.com. 69433 IN NS ns-1238.awsdns-26.org.

;; ADDITIONAL SECTION:
aspmx.l.google.com. 174 IN A 74.125.28.27
aspmx.l.google.com. 267 IN AAAA 2607:f8b0:400e:c03::1b
alt1.aspmx.l.google.com. 157 IN A 74.125.193.26
alt1.aspmx.l.google.com. 134 IN AAAA 2607:f8b0:4001:c05::1b

;; Query time: 1 msec
;; SERVER: 192.168.10.254#53(192.168.10.254)
;; WHEN: Wed Oct 29 10:24:20 2014
;; MSG SIZE  rcvd: 502

ちなみに、ドメイン名はインターネット上のタウンページになっていて、所有者が適切にドメイン名の情報を管理しています。
そしてwhoisサーバに問い合わせることでいつでも所有者の情報を確認できるようになっています。
ユーザベースの所有者情報はこのようになっています。

$ whois uzabase.com
Domain Name: uzabase.com
Registry Domain ID:
Registrar WHOIS Server: whois.discount-domain.com
Registrar URL: http://www.onamae.com
Updated Date: 2014-08-14 10:35:47.0
Creation Date: 2008-02-04 00:45:26.0
Registrar Registration Expiration Date: 2016-02-04 00:45:26.0
Registrar: GMO INTERNET, INC.
Registrar IANA ID: 49
Registrar Abuse Contact Email: abuse@gmo.jp
Registrar Abuse Contact Phone:
Domain Status: ACTIVE
Registry Registrant ID:
Registrant Name: Inagaki Yusuke ()
Registrant Organization: Uzabase, Inc.
Registrant Street1: 2-11-3 Kitaaoyama
Registrant Street2: Aoyama Plaza Bldg. 6F
Registrant City: Minato-ku
Registrant State/Province: Tokyo
Registrant Postal Code: 107-0061
Registrant Country: JP
Registrant Phone: +81.0357706552
Registrant Phone Ext:
Registrant Fax: +81.0357706553
Registrant Fax Ext:
Registrant Email: admin@uzabase.com
Registry Admin ID:
Admin Name: Yusuke Inagaki
Admin Organization: UZABASE, Inc.
Admin Street1: 2-11-3 Kitaaoyama
Admin Street2: Aoyama Plaza Bldg. 6F
Admin City: Minato-ku
Admin State/Province: Tokyo
Admin Postal Code: 107-0061
Admin Country: JP
Admin Phone: +81.0357706552
Admin Phone Ext:
Admin Fax: +81.0357706553
Admin Fax Ext:
Admin Email: infra@uzabase.com
Registry Tech ID:
Tech Name: Yusuke Inagaki
Tech Organization: UZABASE, Inc.
Tech Street1: 2-11-3 Kitaaoyama
Tech Street2: Aoyama Plaza Bldg. 6F
Tech City: Minato-ku
Tech State/Province: Tokyo
Tech Postal Code: 107-0061
Tech Country: JP
Tech Phone: +81.0357706552
Tech Phone Ext:
Tech Fax: +81.0357706553
Tech Fax Ext:
Tech Email: info@uzabase.com
Name Server: ns-1238.awsdns-26.org
Name Server: ns-1832.awsdns-37.co.uk
Name Server: ns-534.awsdns-02.net

Name Server: ns-413.awsdns-51.com

これを機に自分の会社のドメイン名がどうなっているか確認してると面白いかもしれませんね。

Uzabaseの技術者になりたい方へ

noreply@blogger.com (阿達) — Wed, 15 Oct 2014 09:24:00 +0000

テクノロジーで世界最大級の企業・業界データサービスを開発するチームです。

日本中、世界中のお客様に対して、「今」を超える価値をもつサービスを実現するためのシステム開発をお願いします。

アプリケーション、データベース（DB）、サーバの設計・開発・運営をチームで行います。

個々のプロジェクトごとにオーナーを割り振り、オーナーが開発スケジューリング管理や協力会社との折衝など、チーム協力を仰ぎつつ責任を持って一つのプロジェクトを遂行するスタイルです。

将来のキャリアパスは、志向性によりお客様との折衝やマネジメントの立場についたり、エンジニアとして自身が考えた技術を研究し実用化していくなど、様々なキャリアパスを選択することができます。

募集要項

SPEEDA (http://www.uzabase.com/speeda/)部門

□ Web/サーバーサイドエンジニア

ユーザベースでは、プロダクトの設計から開発・テスト・リリースに至るまで、全てをインハウスのエンジニアが行っています。

世界一の経済メディアをつくるというミッションを元に、あらゆる技術を駆使してモノを創る、サービスの根幹を担うポジションの1つです。

当社の7つのルールの1つ「自由主義でいこう」に則って、勤務時間も服装も使用するPCも自由です。

自ら主体的に立ち回り、提案し、実装する優秀なエンジニアが伸び伸び働いています。

ユーザー視点に立ち、サービスの本質的価値を追求し、世界一の経済メディアを創り上げましょう！

≪ 必須 ≫

・「世界一の経済メディアをつくる」というミッションに共感できる方

・3年以上のWebアプリケーション開発経験（ビジネス・プライベートを問いません）

・自らどんどん手を動かして開発を行いたい方

・国籍・学歴不問

≪ 歓迎 ≫

・アプリケーション層にとどまらず、インフラ/ネットワーク層まで深く理解されている方

・機械学習や自然言語処理に関するPh.D.をお持ちの方

NewsPicks(https://newspicks.com/top-news)部門

□ サーバーサイド/Webエンジニア
ユーザベースでは、プロダクトの設計から開発・テスト・リリースに至るまで、全てをインハウスのエンジニアが行っています。
世界一の経済メディアをつくるというミッションを元に、あらゆる技術を駆使してモノを創る、サービスの根幹を担うポジションの1つです。
当社の7つのルールの1つ「自由主義でいこう」に則って、勤務時間も服装も使用するPCも自由です。
自ら主体的に立ち回り、提案し、実装する優秀なエンジニアが伸び伸び働いています。
ユーザー視点に立ち、サービスの本質的価値を追求し、世界一の経済メディアを創り上げましょう！
≪ 必須 ≫
・「世界一の経済メディアをつくる」というミッションに共感できる方
・3年以上のWebアプリケーション開発経験（ビジネス・プライベートを問いません）
・自らどんどん手を動かして開発を行いたい方
・国籍・学歴不問
≪ 歓迎 ≫
・Webアプリケーションのグロース経験をお持ちの方
・アプリケーション層にとどまらず、インフラ/ネットワーク層まで深く理解されている方
・機械学習や自然言語処理に関するPh.D.をお持ちの方

□ スマートフォンアプリエンジニア
ユーザベースでは、プロダクトの設計から開発・テスト・リリースに至るまで、全てをインハウスのエンジニアが行っています。
世界一の経済メディアをつくるというミッションを元に、あらゆる技術を駆使してモノを創る、サービスの根幹を担うポジションの1つです。
当社の7つのルールの1つ「自由主義でいこう」に則って、勤務時間も服装も使用するPCも自由です。
自ら主体的に立ち回り、提案し、実装する優秀なエンジニアが伸び伸び働いています。
ユーザー視点に立ち、サービスの本質的価値を追求し、世界一の経済メディアを創り上げましょう！
≪ 必須 ≫
・「世界一の経済メディアをつくる」というミッションに共感できる方
・2年以上のスマートフォンアプリ開発経験（ビジネス・プライベートを問いません）
・自らどんどん手を動かして開発を行いたい方
≪ 歓迎 ≫
・スマートフォンアプリのグロース経験をお持ちの方
・サーバーサイドアプリケーションの知見をお持ちの方

インターンシップ(SPEEDA,NewsPicks両部門)

□ 技術インターンシップ

ユーザベースでは、就業型インターンシップを随時行っています。

荒波に乗るベンチャー企業で、自由に働くハイレベルなエンジニアに囲まれて一緒に成長しましょう！

≪ 資格・対象 ≫

・現在大学・大学院・高専に在学中の方。

・情報系の基礎知識を勉強中の方。（趣味でも構いません。）

≪ 仕事内容 ≫

・メンターとコミュニケーションをとり、適性と希望にあった開発業務を行っていただきます。

≪ 報酬 ≫

・給与：時給1000円〜 / 成果報酬（仕事内容によって異なります）

・交通費支給

オフィスに遊びに来てみてください。
応募はこちらから（Wantedly）

UZABASEホームページはこちら
SPEEDA部門採用ページ
NewsPicks部門採用ページ
インターンシップ採用ページ

第5回 UZABASE TALK

noreply@blogger.com (Anonymous) — Tue, 26 Aug 2014 18:01:00 +0000

久しぶりのブログ更新です。
はじめまして技術チームの外間（ほかま）です。

ユーザベースでは、たびたび外部を招いての合同勉強会を行っていますが、この度『UZABASE TALK』と題しまして第5回目の勉強会を開催しました。

※過去の勉強会の様子はこちら
第一回技術勉強会、第二回技術勉強会

今回は社内から5名、外部からYahoo、LIVESENSEの4名と計9名の方にご登壇いただき、
オーディエンスとしてookamiにご参加いただきました。
また、初めて社内ではなく、外部のパーティースペースをお借りして開催しました。
回を重ねるに連れて順調に規模も大きくなってきています！

今回の勉強会のテーマは「HTML5」

HTML5に対応するブラウザが普及しだし、旧来のブラウザでは表現できなかったことが
出来るようになってきている今、自社のサービスにどのようにHTML5の技術を取り入れることが出来るか、
また、それによってユーザに対してどのような新しい体験を提供することが出来るか、勉強会を通して情報の交換の場を作りたい。というのが今回の勉強会の狙いです。

では当日の様子をご紹介していきます。

会の開始を待つ間、参加者の皆さんは会場に用意された軽食やドリンクをつまみつつ、ざっくばらんに会話を楽しんでいます。

お酒を飲みながらお互いに自己紹介などしつつ、いい雰囲気です。

そしていよいよ会がスタート。今回はこのような流れで進みます。

まずはプレゼンテーションからスタートです。

＜プレゼンテーション＞

1.「安全なID連携のハウツー」　倉林さん@Yahoo

最近、セキュリティが問題視されているID関連から、高セキュリティと低コストを両立した効率的なID連携方法について解説いただきました。

ID管理は我々にとっても重要な要素なので、とても興味深い内容でした。

安全なID連携のハウツー からマサルKurahayashi

2.「データビジュアライゼーション - dc.jsで遊ぼう -」　清水さん@UZABASE

dc.jsを用いて、グラフなどのデータをより動的に表現する方法について解説いただきました。

1つのイベントに連動して複数のグラフが動的に表示されるデモはとても刺激的でした。

データビジュアライゼーション Dc.jsで遊ぼう - 清水

3.「HTML5とスマートフォンと3Dと」　竹内さん＠UZABASE

我らがチーフテクノロジストである竹内さんには、HTML5でスマートフォン用のネイティブアプリを構築出来る"Apache Cordova"および、その上で更にWebGLを利用した3Dライブラリである"three.js"を動かすというデモをしていただきました。

※資料は事情により公開できません。

途中に休憩を挟んで、後半からはLT（Lightning Talk）です。

<LT（ライトニングトーク）>

1「HTML5時代のClojureScript」松下さん@LIVESENSE

Clojure言語をHTML5で活かす実践方法について解説いただきました。

メリット、デメリットを面白おかしく解説いただき、会場もとても盛り上がっていました。

Clojureは括弧が多いので慣れないとつらいということがよく分かりました。笑

※資料は事情により公開できません。

2「ウェブStrage」島川さん@LIVESENSE

クッキーに代わるデータ保存の仕組みとして利用できる"Web Strage"について、具体的な活用方法を解説いただきました。

※資料は事情により公開できません。

3.「JSでアニメーション頑張ってみた」　植村さん@LIVESENSE

最近ブラウザでサポートされだしたHTML5の新機能"Web Animations"によるアニメーション作成について解説いただきました。

日頃やられているというスケートボードをモチーフにしたアニメーションでデモを行ったりと、独創的でとても刺激になる内容でした。

※資料は事情により公開できません。

4.「あなたのメンタルモデルあってますか？」　矢野さん@シェルフ

新しい技術に取り組む上で、誤解から生じる思わぬ落とし穴をご自身の経験から解説いただきました。

効率よく、バグのないシステムを開発するためのメンタルモデルの大事さを改めて考えさせられました。

あなたのメンタルモデルあってますか？矢野

5.「SPDYを触ってみる」　羽山さん@UZABASE

GoogleがWebの表示を高速化するために提唱しているプロトコル「SPDY」がどのようなものなのかデモを含めつつ簡単に解説いただきました。
今後動的なWebコンテンツが増えていく上で、表示の高速化も必要になる、というインフラ担当ならではの着眼点です！

Spdyを触ってみる羽山

6.「HTML5のHTML5によるHTML5のためのクイズ」　杉浦さん@UZABASE

クイズ形式でHTML5について解説いただきました。

杉浦さんお得意のリアルタイム参加型で、会の締めくくりに相応しい大きな盛り上がりとなりました！

※資料は事情により公開できません。

勉強会終了後は有志で懇親会へと流れ、引き続きお酒を飲みながら（この会は最初から最後までずっと飲んでますね）社内外を通した技術、思想の共有が出来ました。

今回の勉強会はHTML5というテーマをベースに、ID管理から言語紹介、インフラ、プログラミングをする上での考え方まで幅広い内容で、とても充実した会となりました。

今後もニーズにあった内容で、ユーザベースらしい親しみやすい雰囲気の、更に充実した勉強会を開催していければと思います。

ちょっと聞いてみたい、いやむしろみんなの前で話したい！と思った方はお気軽にご連絡下さい。

今回の勉強会はキャリアハックに取材いただいて、記事にしていただきました。こちらもご覧いただければと思います。
ユーザベース主催『HTML5』エンジニア勉強会イベントレポート

NewsPicksのUIデザイン

noreply@blogger.com (Anonymous) — Thu, 21 Aug 2014 05:55:00 +0000

たぬきです。

先日、HatchUp様主催の「第2回ノンゲームスマホアプリ勉強会」に発表者として参加してきました。

ノンゲームスマホアプリということで、ここ2年くらい企画・開発してきた、NewsPicksについてお話ししました。

僕は、「ノンゲームアプリ」はゲームアプリより（ある意味）自由なんじゃないか、と思っています。僕も個人的にゲームアプリを作ったりもしているのですが、ゲームアプリは、開発を始める段階で完成イメージがだいたい出来あがっていて、それをどう作っていくのかという作り方をしています（作っていくうちに思わぬ変化をすることもありますが）。

一方で、ノンゲームアプリは、作り始めるときにサービスコンセプトは決まっていても、画面がどうなるかは全然決まっていなかったりします。だから、技術者・デザイナーが、サービスコンセプトを理解し、それを経験・技術を使って何よりも分かりやすい形に結実させていく、そんな自由度があるアプリケーションなんじゃないかと思っています。

NewsPicksはそんな感じで開発してきたアプリなのですが、今回はそのうちの一機能、「階段」についてのお話。

News picksのUIデザイン from tanukingUb

NewsPicks事業は2013年の頭に立ち上がりました。そこで出てきた疑問
「僕たちが本当に知りたいニュースって何だろう？」

喧々諤々の議論の末、僕たちが辿り着いた結論は、「自分が尊敬している人、友達、有名人が興味をもったニュース」なのではないか、ということでした。そこで、そういった人たちをフォローできるようにし、その人たちが興味をもったニュース（Pickしたニュース）を見られるサービスを作ろうということになりました（8ページ目参照）。更にその人たちがニュースにどんなコメントをするか知れたら面白いかも！

さて、サービスのやりたいことは見えてきました。ではどういうデザインにすべきでしょうか。デザイナーと肩を並べて色々開発して試してみました。

これが一番始めに作ったデザインです。各ユーザーがそれぞれの雑誌を作っていて、それを購読できる、といったことを考えて作りました。左上のカラフルなパネルが、全員のニュースをまとめ読みできるタイムラインです。

作ってみるとデザイン的にはカッコ良かったのですが、うーん、カラフル=まとめ読みという表現は理解しづらいですね。。。

次に作ったデザインは、iOS7のSafariのような機能でした。つまり、適当なボタンを押すと、２次元に描画されていたタイムラインが3次元状に展開され、後ろ側に各ユーザのPickしたニュースが並んでいるようなイメージです。（スライドの10ページ目にSafariのイメージがあります、元イメージは消失してしまいました……）

しかし、次元の転換はやってみると唐突感がありました。

と、試行錯誤を繰り返したあと、「階段」というアイデアにたどり着きました。実際のアプリでは左上のボタンをタップすると見られる、階段状にユーザーが並んでいるデザインです。階段をタップすればそれぞれのユーザのPickしたニュースが見られ、階段の手前にあるタイムラインにはそれらからニュースが生成されていることを表現しました。

アプリ勉強会ということで、プログラムの設計とコードをスライドに書きましたが、見てみると非常に単純です。iOS/Androidアプリはそれっぽい動作をするものをとても簡単に作れるので、いろんなデザインを試せていいですね。

その後も、ちょっとした問題が起こりました(18-20ページ)。ユーザをたくさんフォローすると、階段が詰まってしまうという問題です。これに関しても、デザインと技術の力で簡単で強力な解答を出せました。階段の上下に吹き溜まりのようなViewを追加することで描画したいことは変えず、問題は解決しました。

ということで、サービスコンセプトを理解し、それをデザイン・技術の力でアプリとして結実させると楽しいよ、という話でした。勉強会ではたくさんの質問をいただけ、楽しい会でした！

ボイジャー太陽圏ででたよ

noreply@blogger.com (Anonymous) — Tue, 08 Oct 2013 05:55:00 +0000

こんにちは。
LTといえば普通は技術紹介、気になるサービス紹介が普通でしょうが
私はあさっての方向の紹介担当です。

ボイジャー太陽圏ででたよ from szilkworm

たまには宇宙に思いを馳せましょう。

第３回、合同勉強会を開催しました

noreply@blogger.com (Anonymous) — Sun, 11 Aug 2013 23:05:00 +0000

はじめまして。技術チームのガブです。先日、第三回合同勉強会を弊社オフィスにて行いました。ビールやソフトドリンクを飲みながら、六名のすばらしいエンジニアの方々から、高度にテクニカルなお話を二十分間、楽しく伺うことができました。発表者の皆様を始め、今回の勉強会のために貴重なお時間と労力を割いていただいた方々に深く感謝いたします。

各プレゼンの模様を簡単にご紹介いたします。

1. 今村雅幸 (株式会社Vasily CTO)さん

今村さんには、急増するユーザーに対応するべく、アプリケーションをスケールするテクニックをテーマに講演していただきました。やはり、VasilyのようなBtoCの場合、ID数の増加が急激すぎてやばいですね。スライドを見ていてゾクゾクしました。僕たちも早く新しいサービスでこんな悲鳴を上げてみたいです。ちなみにVasilyさんの場合、tumblrのinboxモデルを参考に独自の実装をされていました。tumblrのarchitectureについてはこの記事なんかが参考になります。

2. 林孝之さん

林さんには今回、ごく少数の人に知識や情報が集中せずに生産性を上げていく一つの解として、ペアプログラミングについて発表していただきました。
僕は今、実際にペアプロをやっていますが自分で書いたコードよりも明らかに美しく、読みやすく、バグの少ないコードを書く事が出来ています。林さんがプレゼン中に言っていた、「ペアプロじゃないと怖くてコードを書けない」という事を実感します。一方で、相方とのスキル差が絶望的にあり（僕が低い方です... )、とても疲れるし、理解できていないまま進んでいってしまう時があります。この辺りの課題をどうするか、林さんに改めて質問してみたいなと思います。

3. 津留一仁 (株式会社マインドパレットリベロエンジニア)さん

津留さんにはAngularJSの特徴、ユースケースについて、プレゼンしていただきました。
Gitコマンドをバシバシ叩きながら、分かりやすいサンプルデモをいくつも交えて発表していただき、（皆さんに共通しますが）とてもイメージしやすく素敵なプレゼンでした。
AngularJSはHTMLそのものがテンプレートである事や、パイプラインで検索フィルターを追加できる事（すごく簡単そう）など、簡単に始められて便利な機能満載。開発していて楽しい感じが伝わってきて思わずダウンロードしてしまいました。

4. 竹内秀行(ユーザベース)さん

竹内さんのトピックは、みんな大好きDynamoDBの解説です。前々回、株式会社マインドパレットの神尾さんにSimpleDBの恐ろしさを存分に教えていただいた僕たちは、「SimpleDB、ダメ、ゼッタイ」を合い言葉にDynamoDBを採用する事にしました。そんな訳で今回、DynamoDBの素晴らしさを皆さんにお披露目する場になりました。例えば、DynamoDBのキャッチフレーズの一つに「支払いは実際に使用した分だけ。最低料金は不要です。」というものがあります。素晴らしい！さすがAmazon先生！ところが実際の料金プランを見ていくと、事前に利用枠を買って使うというこの矛盾！世の中そんなに単純じゃないんだぜ！という先生からのメッセージを胸に、僕たちはまた一つ大人になったのでした。

5. 加藤じゅんいち(id:j5ik2o)さん

加藤じゅんいちさんは、Domain Driven Design(DDD)について、お話していただきました。最近、僕の入っているプロジェクトではTDDを始めていますが、DDDの基本的な考え方であるドメインモデルを中心に設計していけるとコードがすごくキレイになります。抽象化と共通化が適切にできる事に感動するとともに、今まで自分が書いたものは何だったのかと小一時間(ry
ただ、まだまだプレゼンしてもらった世界には全然到達できていないので、ご推薦の本を買って読もうと思います。

6. 矢野勉 (代表取締役　株式会社シェルフ)さん

Lispには括弧が多すぎる。

矢野さんのプレゼンはそんな風にして始まりました。
そうしてClojureをおもしろおかしく説明した後で、唐突に矢野さんは言いました。
「これで皆さんは明日からClojureが書けますね。もう知らないなんて言えないですよ」
動揺する会場。微笑みの矢野さん。
会場からの「結局、括弧多くないですかClojure」「そのサービス、Railsならすぐ作れるんじゃないですか（Clojure生産性低くないですか）」という優しいコメントに矢野さんは「括弧の種類がいっぱいあれば読みやすいから問題ない！」、「Javaの資産がそのまま使えるから生産性は超高い！」とClojureへの愛とモヒカンぶりを遺憾なく発揮し、万雷の拍手を浴びておりました。
僕はそんなロックな矢野さんが大好きです！

上記のメインプレゼンの間に、懇親会とライトニングトーク大会も行いました。
板倉さん、荒井さん(Vasily)、長澤さん(UB)、石橋さん(UB)、加藤さん(UB)にLTを行っていただきました。

次回、第４回合同勉強会は10月頃に行う予定です。

ご興味のある方は是非ご参加ください。スピーカーの方も大募集中です。

連絡先はこちらです：technology@uzabase.com

世界最大の素数とその見つけられた方法

noreply@blogger.com (Anonymous) — Thu, 23 May 2013 10:12:00 +0000

こんにちは。
LTにて、ほかの方は最新技術など面白いものを紹介してくださるので
私はあさっての方向の紹介を担当しようと思います。

素数について from szilkworm

ユークリッドの補題

スライドの中で何の断りもなく登場することの補題ですが、意味は

正の自然数nが素数pで割り切れ
n = ab (a > 1, b > 1)と分解できるとき、pはa, bの内の少なくとも一方を割り切る。

というものです。

「0がn個続いたあと1がn個続く」を正規表現にできるか?

noreply@blogger.com (Anonymous) — Thu, 23 May 2013 10:12:00 +0000

こんにちは。前回に引き続きたぬきです。
週次LTの担当ということで、計算機科学の基礎を紹介してみました。

「0がn個続いたあと1がn個続く」を正規表現にできるか? from tanukingUb

切り口として、正規表現まわりをやってみることにしました。Uzabaseは情報プラットフォームサービスSPEEDAを展開しており、どのエンジニアもデータベース周りの知識を持っているため、正規表現は慣れ親しんだものの１つであるからです。

具体的な問題として、「0がn個続いたあとに1がn個続く」を正規表現にできるか？をテーマとしました。

お話の流れとしては、(1) 正規表現は有限オートマトンに変換可能、(2) 有限オートマトンには必要条件がある、(3) 上述の問題は有限オートマトンの必要条件を満たさず、正規表現にはできない、という流れです。

ポンピング補題

オートマトンの復習および「(1) 正規表現は有限オートマトンに変換可能」については、文章よりスライドを見てもらえば十分かと思いますが、「(2) 有限オートマトンには必要条件がある」「(3) 上述の問題は有限オートマトンの必要条件を満たさず、正規表現にはできない」については口頭で話した部分を補足したいと思います。

(2) 有限オートマトンの必要条件のひとつに、ポンピング補題というものがあります。ある有限オートマトンの状態数をpとすると、そのオートマトンに認識される（受領される）文字列のうちp以上の長さの文字列は必ずポンピング補題の3条件を満たします。

条件のうちの1番目「各i≧0についてx(y^i)z∈A」についてもう少し意味を補足しましょう。まずAはある有限オートマトンが認識する（受領する）文字列の集合です。また、x(y^i)zとは、文字列xの後に文字列yが0回以上繰り返し続き、最後に文字列zがあるということです。つまり、1番目の条件は、ある有限オートマトンに認識される文字列は必ず、x(y^i)z∈Aを満たす文字列x, y, zにわけられるという意味になります。

ポンピング補題の証明は、スライドに記述した迷路のような図でも直感的に理解できるかもしれませんが、より詳しい証明は後述の本を御覧ください。

さて(3)に入り、「0がn個続いたあとに1がn個続く」がポンピング補題を満たすか調べてみましょう。もし「0がn個……」を満たす有限オートマトンがあるとすれば、その条件を満たす文字列で長さp以上のものはすべてポンピング補題を満たすはずです。

ここで、0がp個続いたあとに1がp個続く文字列sを考えてみましょう。sは明らかに「0がn個……」を満たします。またsは長さp以上なのでポンピング補題も満たすはずです。つまり「各i≧0についてx(y^i)z∈A」も満たすはずですが、どんなyならばそんな条件を満たすでしょうか？

実はその条件を満たすyは存在しません。もしyが0からだけ成るとすると、i≧2では文字列に含まれる1の数よりも0の数が多くなってしまい、Aに含まれることができません。yが1からだけ成るとしても同様です。あとはyが0と1から成った場合だけですが、この場合、yが連続すれば0の前に1が出てきてしまうため、やはりAに含まれることができません。よって、いかなるyも条件を満たしません。

以上のことから背理法により、「0がn個……」は有限オートマトンでないことが示されました。よって「0がn個……」は正規表現にできません。

まとめ

LTの時間的な制約から正確な定義などを説明せずに話を進めてしまいましたが、正確な定義や証明を理解していくと、とてもシンプルかつ奥深い世界に触れることができます。スライド内でも簡単に紹介していますが、下記の本がオススメです。

計算理論の基礎 [原著第2版] 1.オートマトンと言語

第二回、合同勉強会を開催しました

noreply@blogger.com (Anonymous) — Fri, 29 Mar 2013 10:06:00 +0000

はじめまして。
技術チームのたぬきです。

先日、外部の方をお招きしての合同勉強会の2回目を、弊社オフィスで行いました。
社内外から5名のスピーカーにご登壇いただきました。

今回はオーディエンスとしても社外の方が参加してくださいました。
前回ご登壇いただいた株式会社マインドパレットの神尾さんは社内の方と4名でご参加、アイエント株式会社の西王地さん、某巨大BtoCサービスインフラチームリーダーのMr. Xさん（大人の事情でご紹介できません）にも来ていただけました。
だんだんと勉強会らしくなってきていますね！

以下、プレゼン資料と当日の様子を御覧ください。

1. Hazelbeck Gregory（ユーザベース）
Wikipediaのダンプデータとそれを使えるサービスについて。自然言語処理で博士論文を書いたGregさんの本領発揮といったプレゼンでした。

Wikipedia解析 from ghazel7

2. 西川真五さん（株式会社エムティーアイ）
アジャイル開発手法のひとつscrumについて、実際に運用されている経験と共に説明していただけました。

3. 川口浩司（ユーザベース）
前職で扱っていたXMLデータベースについて良いところ・悪いところを詳しく解説。川口さんが一線でやってきた内容だけあって、現実感がよくわかる内容でした。

XMLデータベースについて from Koji Kawaguchi

4. ????さん（某大手ITコンサルティング企業）
大人の事情で公開できません。が、とても未来的で興奮する内容でした。公開できないのが悔しい……。

5. 石橋隆平（ユーザベース）
コードの再利用について、あるべきと、どうしてそれができないか、どうすればできるかを解説。石橋さんのダークな部分がチラリ。

勉強会の後は、同じ会場でピザやお寿司をいただきながらのライトニングトーク大会！
技術的に面白い話も、☓☓的に面白い話もたくさんで、とても盛り上がりました。弊社チーフテクノロジストのたけうちさんは大富豪プログラミングについて発表。

Web時代の大富豪的プログラミングのススメ from Hideyuki Takeuchi

本人注）当たり前のことを大まじめに酒の席でのたまわるというLTです

ユーザベース技術チームでは今後も定期的に勉強会を行います。
ちょっと聞いてみたい、と思った方はお気軽にご連絡下さい。
もちろんスピーカーとして来ていただける方も大歓迎です。

連絡先はこちら：　technology@uzabase.com

次回は6月くらい……かな？

Ractive Programming

noreply@blogger.com (chimerast) — Fri, 15 Feb 2013 05:59:00 +0000

chimerastです。

週次LTの担当ということで、Reactive Programmingというパラダイムについて紹介しました。

Reactive Programming from Hideyuki Takeuchi

今流行りの関数型プログラミング言語では、Reactive ProgrammingというとFRP (Functional Reactive Programming)の事を指すことが多いのですが、そっちの説明を始めると若干複雑で前提として必要な知識も多くなるので、大元にある考え方にのみ焦点を当てました。

Reactive Programmingとは

JavaやRuby等の命令型プログラミング言語では

a = 10
c = a + 2
a = 1
print c

というようなプログラムがあった場合、12が出力されます。

これが、Reactive Programmingでは、cが出力される際にa+2という式が初めて評価され、3が出力されます（他の実装として、2行目ではちゃんとcに12を入れておいて、3行目のa = 1が実行されたときにcを再評価して3を代入するというものもあり得ます）。

現実にある実装

Reactive Programmingを体現した一番身近な言語（？）として、Excelがあります。

例えば、E1のセルに「=A1+A3」が入力されていたとして、A1やA3の値を変えると自動的にE1のセルも変わりますよね。

他にもFlexのMXMLにおけるデータバインディング式や、ちょっと違うかもしれませんがJavaFX(ScalaFX)もReactive Programmingが出来ると言っても良いと思います。

どういうところで便利か？

ロボット工学や、シミュレーション等いろいろと応用は効きますが、普通のプログラマにとっては上記のようにGUIプログラムで利用するというケースが一番効果が出やすいと思います。

例えば、コンボボックスが選択された時にその値に応じてテキストラベルを変えるようなプログラムをJavaもどきで書くと、

comboBox.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent event) {
label.text = indexToText(comboBox.index);
}
}

というように長々と、何をやっているのか本質がぼやけてしまうプログラムとなってっしまいます。
これをReactive Programming的な書き方をすると、

label.text = indexToText(comboBox.index);

の１行で記述できてしまいます。読み方を知っていれば何をやりたいのかも非常に明確です。

これは非常に簡単な例ですが、入力に複数のコンボボックスが関わってきたり、連鎖的に複数のコンポーネントの値が変わるようなものを作る場合には、Java等で書くときとくらべて非常に簡潔に記述することが出来ます。

まとめ

Reactive Programmingを直接利用できる言語や環境はあまりないですが、この考え方を知っていると、データには流れがあるんだという事が理解でき、機能としてReactive Programmingを利用できないような言語でもプログラムの書き方が変わってくると思います。

コマンド実行結果のログ取得について

noreply@blogger.com (k-kawaguchi) — Fri, 15 Feb 2013 05:58:00 +0000

k-kawaguchiこと川口と申します。
Linux等でのコマンド実行結果のログ取得方法について、LTで発表しました。

コマンド実行結果のログ取得について from Koji Kawaguchi

ネットワークについて

noreply@blogger.com (k-kawaguchi) — Wed, 06 Feb 2013 06:48:00 +0000

k-kawaguchiこと川口と申します。
技術チーム定例社内研修会にて、ネットワークについて発表しました。

ネットワークについて from Koji Kawaguchi