ラベル LT の投稿を表示しています。 すべての投稿を表示
ラベル LT の投稿を表示しています。 すべての投稿を表示

2014年12月12日金曜日

俺の Docker イメージ

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 コンテナ内でプログラムを実行するには何が必要であるか、コンテナからホストのリソースはどのように見えているかなど勉強になることも多いので、一度スクラッチからのイメージ作成をやってみても面白いかと思います。

投稿者 時刻: 0 件のコメント:
ラベル: ,

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などからご連絡ください！
投稿者 時刻: 0 件のコメント:
ラベル: , ,

2014年8月27日水曜日

第5回 UZABASE TALK

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

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

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

今回は社内から5名、外部からYahoo、LIVESENSEの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』エンジニア勉強会イベントレポート
投稿者 時刻: 0 件のコメント:
ラベル: , ,

2013年10月8日火曜日

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

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

たまには宇宙に思いを馳せましょう。
投稿者 時刻: 0 件のコメント:
ラベル:

2013年5月23日木曜日

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

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



ユークリッドの補題

スライドの中で何の断りもなく登場することの補題ですが、意味は
正の自然数nが素数pで割り切れ
n = ab (a > 1, b > 1)と分解できるとき、pはa, bの内の少なくとも一方を割り切る。
というものです。
投稿者 時刻: 0 件のコメント:
ラベル:

2013年2月15日金曜日

Ractive Programming

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を利用できないような言語でもプログラムの書き方が変わってくると思います。

投稿者 時刻: 0 件のコメント:
ラベル:

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

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


投稿者 時刻: 0 件のコメント:
ラベル:

2013年1月11日金曜日

Web RTC

UZABASEのYakopeliです。

2012/12/19に社内で行ったLTの内容になりますが、今回はWeb RTCについて調べてみました。


Web RTCとは

Real time Communication Beween Browsers APIの略で、JSを使用して
Webブラウザから端末のカメラやマイクにアクセスし、他のWebブラウザとの
リアルタイムなコミュニケーションを可能とするものです。

今までは音声やビデオのリアルタイムな通信を行うには専用のクライアントソフトが必要でした。
また、Webブラウザからは、プラグイン等を入れない限り、マイクやカメラなどのデバイスを
利用することはできませんでした。

しかし、Web RTCが普及すると、

・Webブラウザ上で実行されるJavaScriptで、端末のマイクやカメラなどの
 デバイスにアクセスできるようになる

・取り込んだ音声や動画をリアルタイムに他の端末のWebブラウザに送り、
　ストリーミング再生が可能になる

よって、Webアプリケーションにカメラやマイクを利用した、新しいリアルタイムな
コミュニケーション機能を組み込むことが可能になります。


Web RTCのアーキテクチャ

アーキテクチャですが、大きく分けると4要素で構成されています。

・Web API
　Webアプリケーション側から利用するためのAPI

・Session management/Abstract signaling
　セッション管理やP2Pマッチングの仕組み

・Audio/Video Engine
　オーディオ・ビデオ

・Transport
　データ転送の仕組み

上記のうち、Webアプリ開発者にとって大きく関係するのはWeb APIですが、これは単一の
APIではなく、主に下記二つのAPIから構成されます。

・Stream API
　映像や音声などのストリームデータを扱うAPI

・Peer-to-peer connections
　UDPプロトコルを用い、ブラウザ同士でダイレクトにデータを送受信するためのAPI

簡単に言うと、Stream APIでカメラやマイクにアクセスし、映像や音声をPeer-to-peer connectionsを使って互いのブラウザに送ると、テレビ電話みたいなものが作れます。


デモ

サンプルがあるので、デモで確認してみます。
http://apprtc.appspot.com/にアクセス後、画面下部に表示されるURLに別のブラウザから
アクセスするとテレビ電話が始まります。（どちらの端末もWebカメラが有効になっている必要があります）

まとめ

セキュリティ関連がどのように進められていくか気になるところですが、WebRTCによって専用のクライアントソフトを入れることなく、Webサイトを通じて音声や映像の通信ができるようになるので、何か新しいサービスが生まれてきそうな予感がしますね。


投稿者 時刻: 0 件のコメント:
ラベル:

2012年12月13日木曜日

Lua

技術ミーティングでLTをしたので、ブログでも書きます。
テーマはLuaです。


Luaとは
リオデジャネイロ・カトリカ大学で開発されたスクリプト言語です。
もともとC言語などに組み込まれることを想定しているため、高速な動作、高い移植性、組み込みが容易な事が特徴として挙げられます。

実用例
・アイドルマスター2
・World Of Warcraft
・FF14←もはや()
・Baldur’s Gate
・Playstation Home
・Photoshop lightroom
・VOCALOID3←残念ながら我らがミクさんはVOCALOID2です。
・Wireshark
・ヤマハのルータ

などで使われています。

Luaはスクリプト言語としては速度が速く、組み込みもしやすいのでゲーム制作で活躍しています。
（キャラクターの移動であったり、AIの思考ルーチンだったり……変更が多い箇所で活躍）

どれくらい早いのかは下記を参照してください


特徴
・Rubyなんかでおなじみの連想配列
・関数が変数として扱えるJavascriptのような機能
・ガベージコレクションが採用されておりメモリ管理も楽ちん

更に、今回紹介したい面白機能として「コルーチン」があります。
「スクリプト言語による効率的ゲーム開発 新訂版」によれば協調的マルチスレッドを実現する機能で平たく言えば実行を途中で止めたり、途中から再開したりできるような関数が作れます！


実例
[コード]
function func(x)
    for i=0,3 do
        print(x..i)
        coroutine.yield()
    end
end

co1 = coroutine.create(func)
co2 = coroutine.create(func)

while true do
    r1 = coroutine.resume(co1, "A")
    r2 = coroutine.resume(co2, "B")
    if (r1 and r2) == false then
        break
    end
end
--

coroutine.yieldで関数を抜けて
coroutine.resumeで再開するんですが……

[実行結果]
A0
B0
A1
B1
A2
B2
A3
B3

おぉ……ちゃんと途中で切って途中からプログラムが走ってる……


風……なんだろう吹いてきてる確実に、着実に、俺たちのほうに！
なんだかおもしろいことができそうでwktkします。

--
[参照]
※スクリプト言語による効率的ゲーム開発 新訂版

投稿者 時刻: 0 件のコメント:
ラベル: ,
登録: 投稿 (Atom)