sudo /var/lib/dpkg/info/ca-certificates-java.postinst configure
ってやったらなおった
ubuntu で docker と spark on docker
いつも忘れてしまうので
インストール
wget -qO- https://get.docker.com/ | sh
イメージの検索
sudo docker search <検索したいもの>
イメージの取得
sudo docker pull <イメージ名>
取得済みのイメージの確認
sudo docker images
コンテナの起動
sudo docker run -it -p <ポート> -h <ホスト名> <イメージ> bash
sparkを試してみたい
docker pull sequenceiq/spark:1.6.0
sudo docker run -i -t -h sandbox sequenceiq/spark /etc/bootstrap.sh -bash
sbtが使えないのでとりあえずインストール ほんとはDockerfileに書いておこう
curl https://bintray.com/sbt/rpm/rpm | sudo tee /etc/yum.repos.d/bintray-sbt-rpm.repo
sudo yum install sbt
angularjs2
AngularJS2 を組み込む
index.html の
に 以下を追加する <script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script> の中身は app/layout.html へ移して、
<body> <my-app>Loading...</my-app> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> </body>
としておく
https://angular.io/docs/ts/latest/quickstart.html
から app/main.ts と app/app.component.ts を持ってくる。
次はルーティングとか。
bootstrap dashboard-layout 2
次はサイドのメニュー
<div class="container-fluid"> <div class="row"> <!-- サイドメニュー --> <div class="col-md-2 sidebar"> <ul class="nav nav-sidebar"> <li class="active"><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> </ul> </div> <!-- メイン --> <div class="col-md-10"> </div> </div> </div>
.sidebar { position: fixed; top: 51px; bottom: 0; left: 0; z-index: 1000; display: block; padding: 20px; overflow-x: hidden; overflow-y: auto; background-color: #f5f5f5; border-right: 1px solid #eee; } .nav-sidebar { margin-right: -21px; margin-bottom: 20px; margin-left: -20px; } .nav-sidebar > li > a { padding-right: 20px; padding-left: 20px; } .nav-sidebar > .active > a, .nav-sidebar > .active > a:hover, .nav-sidebar > .active > a:focus { color: #fff; background-color: #428bca; }
サイドバーはデフォルトのクラスやスタイルが用意されているわけではないのでul, li を自分でスタイリングする。
次からはAngularJS2を組み合わせていく
bootstrap dashboard-layout 1
http://getbootstrap.com/examples/dashboard/
仕事で上記ページのような、上にナビゲーションバー、左にメインメニューのレイアウトの画面を作ることが多いのでその練習。
まずはナビゲーションバー。
前回のindex.html の body の先頭に以下を追加する。
<nav class="navbar navbar-inverse navbar-fixed-top"> <span class="navbar-brand">SPA-Training</span> </nav>
navbar はナビゲーションバーであることを表すクラス
navbar-inverse は黒背景 (navbar-default にすれば灰色背景)
navbar-fixed-top はページ上部に固定
navbar-brand はタイトルとかに指定するクラス
ナビゲーションバーになにか適当に追加してみる
<nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <span class="navbar-brand">SPA-Training</span> <input type="text" placeholder="search" /> <button type="button" class="btn btn-default navbar-btn">ボタン</button> <p class="navbar-text navbar-right">ユーザー</p> </div> </nav>
container-fluid はcontainer の流動的バージョン (ブラウザのサイズが変わると、containerは段階的に幅が変わるがcontainer-fluidはリニアに変化する)
試しにこれをcontainer-fluidではなくcontainerにしてブラウザを大きくしていくとSPA-Trainingの左に徐々に隙間ができていってある程度広がるとなくなりまた隙間が広がり... と段階的になってしまう。
navbar-right は右寄せ
bootstrap getting started
フロントエンド開発の練習
とりあえずbootstrapの画面を作成するところまで。
後々AnguralJS 2 + なんらかの rest api で SPAにしたい。
まずは作業フォルダの作成
mkdir bootstrap-training cd bootstrap-training
https://angular.io/docs/ts/latest/quickstart.html
から、tsconfig.json, typings.json, package.json をコピーしてくる
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}typings.json
{
"ambientDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
"jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#5c182b9af717f73146399c2485f70f1e2ac0ff2b"
}
}package.json
{
"name": "bootstrap-training",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.15",
"systemjs": "0.19.26",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.6.10",
"bootstrap": "3,3,6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings":"^0.7.12"
}
}tsconfig.json と typings.json はなにもいじってないです。
package.json は name を bootstrap-training に変えて、dependencies に "bootstrap": "3.3.6" を追加しました。
ファイルを追加したら、
npm install
エラーが出なければOK.
http://getbootstrap.com/getting-started/
から Basic template をコピーしてきて index.html として保存する。
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> </body> </html>
bootstrap.min.css と bootstrap.min.js のパスに node_modules/bootstrap/dist/ を追加してある。
これで
npm start
を実行するとブラウザが立ち上がり localhost:3000 で Hello, World! が表示されれば今回はOK
"Estimating Conversion Rate in Display Advertising from Past Performance Data"を読んだ
読んだからおおざっぱに内容をまとめておく。
http://wan.poly.edu/KDD2012/docs/p768.pdf
タイトルの通り、過去の実績データからディスプレイ広告のCVRを予測しようという話。
モチベーションとしては、ユーザーIDとWebページのURLがAdExchangeからDSPへ送られてきたとき、
DSPが持っている広告のうちでそのユーザーとWebページの組み合わせに対してもっともCVする可能性が高い広告をオークションに使いたいということらしい。
(つまり、DSPを実装するうえで、より効果が高い入札をするためのアルゴリズムを開発しましたという話)。
DSPがn個広告を持っていたとして、与えられたユーザーIDとURLの組に対してそのn個の広告それぞれのCVRを予測できれば、予測したCVRが一番高かった広告を使えばいいということになる。
CVRの予測については、基本的に経験分布を使う方針。
つまり、"過去に太郎さんがwww.xxxxx.comというサイトに1000回訪れたことがあり、その1000回の訪問のすべてで同じ広告を出したところ、10回コンバージョンした"というデータが観測されていれば、AdExchangeから太郎さんのユーザーIDとwww.xxxx.comというurlが送られてきたとき、また同じ広告を出せばきっと1%の確率でCVするだろうという話。
問題となるのは、ユーザーとurlの組み合わせがとても多いので、十分な精度の経験分布を得るための実績データがほとんどの組み合わせでたまらないという点。
この問題を解消するために、この論文では広告やwebページのデータの階層構造を上ることで観測データ数の不足問題を回避するという方法をとっている。
DSPは複数の広告主をもっていて、それぞれの広告主は複数のキャンペーンをもっていて、それぞれのキャンペーンは複数の広告を持っている。
あるいは、Webページもパブリッシャによって階層状にカテゴリ分けされている。
"太郎さんが野球のニュースサイトに訪れたことはないのでCVRがどれくらいになるかはわからないが、サッカーやテニスなどのスポーツニュースサイトというくくりでなら複数回訪問し、コンバージョンしたこともあるのでそのデータから野球のニュースサイトに訪問した時のCVRも推測してしまおう"というのが主たるアイデアであろう。
具体的なものから抽象的なものへ緩和することで、実績データが足りないという問題を解消しようとしている。
ユーザー、Webページ、広告のそれぞれが階層構造を持っているのでどの項目でどれくらい緩和するか ⇒ 全パターン試して、ロジスティック回帰でまとめてしまいましょう
というのがおおざっぱなまとめ
