2014年11月18日火曜日

NewsPicks × D3.js


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


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

今回の開発環境

Mac OS X(10.10)
D3.js(3.4.13)

D3.jsについて

まずは、D3について少しだけ。
Githubの人気リポジトリに入っている人気のJavaScriptライブラリです。(2014/11 時点)


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

地図を書いてみよう

APIリファレンスを見ていて気になったのがGeography
ということで日本地図を書いてみました。




参考にしたサイト

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


地図を描いただけだと面白くないので、地震のデータを使って地図上に表示してみました。
まずは、データの取得。
以下のサイトで日本の緯度経度、地震の大きさと期間を入力してデータをダウンロードしました。

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をインストールする

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

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

その野望の第一歩として与えられた課題が
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で詰まったりしていたので
基礎の基礎から書いてみました。
備忘録兼ねてですが、どなたかの参考になれば幸いです。

2014年11月5日水曜日

荒ぶるRedisとNewsPicks


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などからご連絡ください!

2014年10月31日金曜日

ドメイン名について

インフラを管理している羽山です。
今回は基本的なおさらいということで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の公開している資料が見やすいので見てみてください。

さて、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

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

2014年10月15日水曜日

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



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


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

アプリケーション、データベース(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部門採用ページ
インターンシップ採用ページ


2014年8月27日水曜日

第5回 UZABASE TALK

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

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

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

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

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


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

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


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



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



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



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



<プレゼンテーション> 

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



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

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




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



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

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





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コンテンツが増えていく上で、表示の高速化も必要になる、というインフラ担当ならではの着眼点です!




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


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

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

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


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


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

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


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




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

2014年8月21日木曜日

NewsPicksのUIデザイン

たぬきです。

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

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

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

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

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


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

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

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

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


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

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

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

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



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

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

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