Chart.jsの簡単マニュアル
サンプル
Chart.jsの各設定
Canvasで描画領域の確保
<canvas></canvas>
グラフの設定の仕方
各コードの埋め込み場所は、ページ下部のソースコード参照
グラフのタイプ
var type = ???? ;
折れ線グラフ：line
縦棒グラフ：bar
横棒グラフ：horizontalbar
オプションの設定
グラフの線の色：borderColor : "rgba(255, 127, 127, 1.0)"
グラフの中の色：backgroundColor : "rgba(255, 127, 127, 0.3)"
線の太さ：borderWidth : 2
なめらかな線or直線：デフォルトはなめらかな線、直線はlineTension : 0
背景の色をなしに設定：fill : false
折れ線グラフのポイントの形の設定：pointStyle : "rect"
軸の設定
良しなに軸の最大値を設定：suggestedMax : 1000
良しなに軸の最小値を設定：suggestedMin : 0
グリッド線の感覚： stepSize : 100
軸に文字を追加：
callback : function(value, index, values){
return value + "JPY";
}
タイトルの設定：
title : {
display : true,
text : "test",
},
凡例の設定
legend : {
position : "right",
// display : false,
}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>chart.js</title> </head> <body> <!-- 描画領域の指定 --> <canvas id="my_chart"> Canvas Not Supported... </canvas> <!-- CDNでchart.jsを読み込む --> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> <script> // JavaScriptは即時関数で実行 (function() { "use strict"; // グラフのタイプを指定 // var type = "line"; // var type = "bar"; var type = "horizontalbar"; // データを設定 var data = { // x軸 labels : [2010, 2011, 2012, 2013], // y軸 datasets : [ // データセット１つめ { label : "@doz", data : [520, 300, 200, 210], borderColor : "rgba(255, 127, 127, 1.0)", backgroundColor : "rgba(255, 127, 127, 0.3)", borderWidth : 2, // lineTension : 0, // fill : false, // pointStyle : "rect" }, // データセット２つめ { label : "@hatena", data : [330, 230, 400, 360], borderColor : "rgba(127, 127, 255, 1.0)", backgroundColor : "rgba(127, 127, 255, 0.3)", borderWidth : 2, } ] }; // グラフのオプションを設定 var options = { // 軸の設定 scales : { // ↓軸の最大値と最小値をハードコーディング // yAxes : [{ ticks : { min : 0, max : 400 } }] // 軸の最大値と最小値を自動で設定 yAxes : [{ ticks : { suggestedMin : 0, suggestedMax : 400 , stepSize : 100, callback : function(value, index, values){ return value + "JPY"; } } }] }, // タイトルの設定 title : { display : true, text : "test", }, // 凡例の設定 legend : { position : "right", // display : false, } }; // グラフを描画する領域を取得 var ctx = document.getElementById("my_chart").getContext("2d"); // chart.jsの継承 var myChart = new Chart(ctx, { type:type, data:data, options:options }) })(); </script> </body> </html>
ドットインストールの動画のD3.jsのバージョンの違いで出るエラー解決方法
この記事は、2018年3月25日。
ドットインストールで紹介されているD3.jsのバージョンは、v3。
今のバージョンは、v5。
2回のバージョンアップがされているため、細かい関数の名前やらが変更されていて、ドットインストールのコピペでは、エラーになる場面がところどころ。
軽くつまづいたところを適当に上げておく。
オブジェクトが使えない問題
SVGの領域を定義して、widthとheightの設定をしているのに、widthとheightが設定されていなかった。
var svg = d3.select("body").append("svg") .attr({width:w, height:h}); var circle = svg.selectAll("circle");
発生したエラーが以下。
領域を設定しているものの、SVGのwidthとheightがゼロなため、null扱いとなり、selectAllできないとエラーがでている。
Uncaught TypeError: Cannot read property 'selectAll' of null
これがバージョンの違いかは調べてないが、とりあえずv5では、javascriptのオブジェクトでの値設定ができないみたい。
ドットインストールの動画では、複数の値の設定は基本的にオブジェクトを使っているので、ひっかかる。
.attr({width:w, height:h});
ちょっと面倒だが、一個一個設定する形に変えた。
.attr("width", w) .attr("height", h);
Axisの設定する関数名が変わっている
Axisの設定でv3では、.scale.linear()を使っている。
var xScale = d3.scale.linear() .domain([0, d3.max(dataset)]) .range([padding, w - padding]) .nice();
これが以下に変わっている。
var xScale = d3.scaleLinear() .domain([0, d3.max(dataset)]) .range([padding, w - padding]) .nice();
.scaleLinear()に変わっている。
もしかするとd4から変わってるかもしれない、知らない。
短くなっていて助かる。
軸の位置を設定する関数が変わっている
ここらへんから、この関数変わってそうだな、とわかってきた。
冗長な2段階構成の関数は、まとめられているっぽい。
軸の位置と長さを設定する関数は、.scaleと.orient
var xAxsis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
変更後がこれ。
var xAxis = d3.axisBottom(xScale);
あぁ。スッキリ。
RSA暗号をpythonで実装してみた（車輪の再発明）
RSA暗号を実装しみてる
半年前にRSA暗号勉強したのですが、ほぼほぼ忘れてしまっていました...
記憶力悲しき。
RSA暗号を忘れないように、今回はちゃんと記事として置いておこうと。
人様に公開するような内容ではありません。
コード
import random def gcd(a, b): # 最大公約数を求める while b: a, b = b, a % b return a def lcm(a, b): # 最小公倍数を求める return a * b // gcd (a, b) def generate_keys(p, q): # 与えられた2つの素数pとqから秘密鍵と公開鍵を生成する pq = p * q period = lcm(p - 1, q -1) #公開鍵の候補をリストに入れる #period = lcm(p - 1, q -1)の中にある素数をappned prime_number_list = [] for i in range(2, period): if gcd(i, period) == 1: prime_number_list.append(i) #ランダムでpublic keyを抽出 public_key = random.choice(prime_number_list) #秘密鍵を生成 secret_key = 1 n = 1 while True: # 乗算したら元に戻る数値を探す # (A3)D = A{n × (P – 1) × (Q – 1) + 1} if secret_key * public_key == n * period + 1: break # secret_key * public_keyがn * period + 1より大きくなった場合は、nにプラス1 if secret_key * public_key > n * period + 1: n += 1 secret_key += 1 return [public_key, secret_key, pq] def encrypt(plain_text, public_key, law): # 公開鍵を使って、プレーンテキストを暗号化 encode_text = [ord(char) for char in plain_text] encrypt_text = [i ** public_key % law for i in encode_text] encrypt_text_join = "".join(chr(i) for i in encrypt_text) return encrypt_text_join def dencrypt(encrypt_text, secret_key, law): # 暗号化されたテキストの解読 encode_text = [ord(char) for char in encrypt_text] dencrypt_text = [i ** secret_key % law for i in encode_text] dencrypt_text_join = "".join(chr(i) for i in dencrypt_text) return dencrypt_text_join if __name__ == "__main__": text = "hello world" p = 101 q = 3259 public_key, secret_key, law = generate_keys(p, q) encrypt_text = encrypt(text, public_key, p*q) dencrypt_text = dencrypt(encrypt_text, secret_key, p*q) print("plain_text : ", text) print("encrypt_text : ", encrypt_text) print("dencrypt_text : ", dencrypt_text)
bitcoinのネットワークに接続できない問題（bitcoind）
bitcoindを使って、bitcoinのネットワークに接続しようとしたときにエラーが発生しました。
bitcoindを使って、bitcoinのネットワークに接続しようとすると...
$ bitcoid -daemon >Bitcoin server starting
startingとは出るものの、プロセスが走っているかを確認すると...
$ ps aux | grep bitcond
なにもない。
なぜだ。。。
bitcoind.confが間違っているのかを確認。
testnet=3 #mainnet=1 txindex=1 server=1 rest=1 rpcuser=************* rpcpassword=********************* rpcport=18332
特に問題はなさそうだし、ってか前は普通に接続できたので.confに問題はないはず。
ログないかな、と探していると.bitcoinの直下にmainnetのログ発見。
testnetのログは、testnet3というフォルダの中にあった。
見てみよう。
$ tail -n 100 debug.log >以下、ログの抜粋 >Error opening block database >Please restart with -reindex or -reindex-chainstate to recover.
blockのデータベース開けないから、インデックスを振り直してと。
$ bitcoind -reindex -daemon $ ps aux | grep bitcoind
無事、プロセスが走っていることを確認。
解決！！終わり！！！
ド素人がPC自作してマイニングした結果
ご無沙汰してます
最近はシストレを少しお休みし、ブロックチェーンの勉強に勤しんでおります。
遠からずブロックチェーンは株・投資信託の世界にも深く関わってくる技術なので（もうすでにかな）、今のうちに勉強しています。
色々と思いはありますが、前置きは短めで。
今日の記事は、マイニングの収益や費用、自作PCで買った部品などをツラツラ紹介していきます。
の前に、PC自作したことねぇって人で自作したいと考えている人は、この動画を見るのがとても勉強になります。
長いですが、どんなパーツをどこで使うのかがわかります。
この動画を見て、買うパーツ自体はここから紹介するものから選んでいけば、きっと作れるはずです。
また、今回私が作ったのはマイニングリグではありません。（マイニングリグ = マイニング専用機）
一般的なPCをちょっとマイニングしやすくカスタマイズしています。
マイニングってどうやって始めるの?
3つを用意します。
- マイニングソフトウェア
- PC
- ウォレット
この記事はPCの用意に関する記事です。
詳しくはこのページが詳しい！（アウトソース！）
気になる利益は？
ここからちゃんと書きます。
マイニングを始めたのが1月10日。
GPUマイニング開始！！
— どず (@kabkansai) 2018年1月10日
そして、今（1月28日）。
19日間、基本的にはフル稼働で0.0073BTC。
今のBTCレートは1BTC = 1,273,439円なので、日本円換算だと9177円です。
1日あたり483円。
これがマイニングで得た収益です。
利益を計算するには、ここから電気代を引く必要がありますね。
電気料金を計算するサービスがあったのでこれを利用します。
だいたいこんな感じかなぁ↓
消費電力は750kW 1日の使用時間は24時間 使用日数は1日 1kWh単価は、20円（東京電力だと、1kW = 15円 ~ 20円くらいが相場のよう）
主婦の方はこの電気計算は手慣れているのかな。
私は初めてやりました。
やったことな人からすると細々してますが、まとめると1日マイニング用のPCを動かしたら...
1日あたりの電気代は360円くらいです。
1日の収益は483円 - 1日あたりの電気代は360円 = 利益123円
1日あたり120円くらいの利益なので、1ヶ月になると3600円（チャリーン）
こりゃ厳しい...
初期投資の額を考えると、回収に時間がかかりそうです。
ただ、この電気代金の計算はけっこうアバウトで、言わば理論値です。
ちゃんと使用電気量をはかって計算してみたいです。
マイニングにかかる費用(買ったものを紹介)
マイニングにかかる費用は、電気代とPC代です。
電気代はさきほど言ったとおりとして、PC代がいくらかかったのかをツラツラと書いていきます。
PCは自作したので、費用を抑えれるところを抑えつつ、ガッツリかけるところはかけています。
※ヨドバシで買ったので、URLリンク先のAMAZONの値段はちょいちょい違います。
※基本はAMAZONのほうが安いかな。
マザーボード：9970円
金はかけなくていい。CPUとGPUがのればいい。
注意点が一つあって、CPUのソケットの型とマザーボードのソケットの型が合うかは確認した方がいいです。
わからなければ、ヨドバシかドスパラあたりの店員さんに聞きましょう笑
私が選んだのはこれ。
windows10：17760円
ここも節約したい人は、Linux系でもいいかも。
私は今回始めPCを自作したこともあり、トラブルが起こったときの対処ができる気がしなかったので、無難にwindows10にしました。
CPU：12690円
マイニングにCPUの性能は必要ありません。
Core i3すらも持て余すので、PENTIUMかCELERONがいいです。
電源：18240円
これは金かけるところです。
必要以上はいりませんが、電力が足りていないとPCが落ちます。
バッテリーはプラチナ、ゴールド、シルバーというクラスがあり、私はゴールドを買いました。
750Wまで耐えれるもの買ったので、GPU2台でもちょっと余裕を残して動かすことができます。
電源はGPUの消費電力を見ながら、選ばないといけません。
わからなければ店員さんに！笑
USB型無線LAN：2290円
普通はデスクトップは有線ですが...
私の場合は、固定のLANを引いていいないので、必要でした。
高いマザーボードなら無線LAN対応してたりするのですが、安いマザーボードなので...笑
地味な出費です。
グラフィックボード：31980円 * 2
ふんだんに金かけるところ。
私は「NVIDIA GTX 1060 6GB」を2枚買いました。
注意点として、メモリは6GB欲しいです。
1060は3GBバージョンもあるのですが、マイニングするなら6GBが無難です。
GPUは高いものから安いものまで、色々あるのではじめは何を買えばいいかわからないと思います。
そんなときは、nicehashが提供しているprofitability calculatorを使いってみましょう。
マイニング界隈でどんな機器が使われて、どのくらい稼げるかがだいたいわかります。
ちなみに、GPUで一番収益が多いのは、NVIDIA GTX 1080 Ti です。
1日あたり581.74 JPY稼げます。
がしかし、値段もいいお値段でだいたい9万か10万します。
私が買ったNVIDIA GTX 1060 6GBは、1日あたりの収益は306.34 JPYですが、値段は3万くらいです。
ふんだんに金をかけつつも、コストパフォーマンも見ながら判断するのがベストです。
電源ボタンスイッチ：414円
PCケースを買わない人は必要だと思われる。
私はPCケースは、熱がこもると思ったので買わずに組み立てました。
PCケースの電源ボタンに接続するのが普通ですが、ケースがないので、直接スイッチをマザーボードにつけます。
※ギーク感ハンパない
耳栓：400円
私は部屋が一つしかなく、マイニングPCの隣で寝ています。
ファンの音がうるさすぎたので、買いました。
余計な出費です。
ちなみにこだわりポイント
PCケースなし。熱がこもりやすくなるので、あえて買わず。
HDDもいりません。
この2つ削ったので、わりと安くは抑えられてますが、CPUをCELERONにするなど、まだ下げ幅はありますね。
あと、私はすでに持っていおり、また多くの人が持っているであろう、モニターやマウス、キーボードは計算に入れていません。
こんな感じでざっと、合計は150843円。
約15万円。
(ヨドバシポイントは考慮なし。10％つくのでわりとでかいですが。周辺機器はポイントで買ってます)
1ヶ月3600円だとすると、41ヶ月で初期投資が回収できますね笑
3年ちょっとか...なが。
と言っても、これは現在のBTCのレートで計算した結果です。
(ちなみに1月は相次ぐビットコインの暴落があり、1月頭からかなり収益は落ちています)
ここからマイニングを始めるとなると、アルトコインになると思います。
やるとすれば、値上がりの期待も込めて、という感じですね。
私はこの自作したPCでnicehashというサービスを使ってマイニングをしています。
また、今はもう使っていないPCでBitZenyという仮想通貨もマイニングしています。
BitZenyはCPUでマイニングできる仮想通貨ですが、マイニングの収益は完全な赤字です。
ただ、個人的に期待しているところもあり、マイニングを続けています。
まとめ
マイニングは濡れ手に粟ではない、というのは間違いないですね。
ただ、マイニングは楽しいですし、ブロックチェーンのいい勉強になるので、オススメです。
マイニングの将来性も触れたいところでしが、文字数も多くなっているので今日のところはこれで終わり！
uwsgi + nginx + flaskで簡単なWEBアプリの構築
自分用メモですm(_ _)m
適当にflaskのファイルをこしらえる
ここはすごく適当。
from flask import Flask
app = Flask(__name__)
@app.route("/")
def hello():
return "Hello World!"
if __name__ == "__main__":
app.run()
nginxの設定ファイル
を編集する。
$ cd /etc/nginx/conf.d
sample.confの中身。
upstream flask {
server unix:///tmp/uwsgi.sock;
}
server {
listen 80;
root /var/www/bot;
server_name localhost;
charset utf-8;
client_max_body_size 75M;
location / {
try_files $uri @flask;
}
location @flask {
include uwsgi_params;
uwsgi_pass flask;
}
}やっていることはシンプルで、アクセスがあったらuWSGIに接続をする、というもの。
一番重要なところが、これ。
upstream flask {
server unix:///tmp/uwsgi.sock;
}webサーバーであるnginxは動的な処理はできないため、動的な処理を行う場合はアプリケーションサーバーであるuWSGIに接続して、処理を投げる。
uWSGIとnginxを接続する場合、方法は2つある。
TCPソケットを使う方法とUNIXドメインソケットを使う方法の２つだ。
TCPソケットを使用する場合は、どこかのポートからuWSGIにアクセスする。
接続のたびにuwsgi.sockを作成して、通信が終わり次第破棄する。（たぶん）
こちらのほうがポートを消費しなくてよい。
uWSGIの設定ファイル
を編集する。
$ cd /var/www/bot $ vi sample.ini
sample.iniの中身。
[uwsgi] module = app callable = app master = true processes = 1 socket = /tmp/uwsgi.sock chmod-socket = 666 vacuum = true die-on-term = true
これ↓がソケットを作成するコード。
socket = /tmp/uwsgi.sock
uWSGIを動かし、通信が発生したらuwsgi.sockが/tmpに作成される。
ここを介して、webサーバーとアプリケーションサーバーは通信を行う。
そのため、uwsgi.sockのパスはnginx側とuWSGI側で揃えておく必要がある。
nginxとuWSGIを動かす
$ systemctl restart nginx.service $ uwsgi --ini sample.ini #vpsで動かすときは、バックグラウンドで実行 #正しい運用方法かどうかは知らない $ uwsgi --ini sample.ini &
ちなみに、uwsgiは今回の設定だと、sample.iniがあるディレクトリで実行しなければいけない。
まとめ
uWSGIとnginxの関係性や接続方法がわからず苦しんだ。
これらを読むことで概要は把握できた。
【nginxの勉強資料】
スライドシェアでnginxについての概要がわかりやすくまとめられている
https://www.slideshare.net/yujiotani16/nginx-16850347
webサーバーとアプリケーションサーバーの違いがまとめられている
https://qiita.com/jnchito/items/3884f9a2ccc057f8f3a3
リクエストをwebサーバーとアプリケーションサーバーでの処理の流れをする
「WASへのリクエスト転送」の章必見
webサーバーとアプリケーションサーバーの通信方法についての記載あり
https://www.ibm.com/developerworks/jp/websphere/library/was/toranomaki/5.html
flask + nginxで静的サイトを構築
環境を整える
nginxをインストール。
$ sudo apt-get install nginx
nginxのよく編集・見るファイルたちのパス。
#設定ファイルのパス cd /etc/nginx #ログファイルのパス #アクセス用のログファイルとエラー用のログファイルがある cd /var/log/nginx #公開ディレクトリのパス cd /var/www
静的サイトということでhtmlファイルを用意
wwwは公開ディレクトリとなり、アクセスしてくるユーザーはwwwに来ることになる。
htmlファイルは、/var/www/の直下に作成する。
$ sudo mkdir bot /var/www/bot
適当なindex.htmlを作成する。
$vi index.html #index.html <html> <head> <title>hi!</title> </head> <body> <h1>Hello World!!</h1> </body> </html>
nginxの設定
nginxはデフォルトの設定があり、邪魔なためデフォルトの設定を読み込まないようにする。
デフォルトの設定が書かれているファイルはこれ。（コレイラナイ）
$ /etc/nginx/sites-available/defaut
nginxの基本的な設定はnginx.confにまとめられている。
デフォルトの設定を消すために、nginx.confの以下のコードをコメントアウトする。
$ cd /etc/nginx/ $ vi nginx.conf #before include /etc/nginx/sites-enabled/*; #after #include /etc/nginx/sites-enabled/*;
ちなみに、これを消す理由↓
nginxの初期設定では、conf.dより先にdefautを読み込みに行くため、conf.dで設定を追加してもdefautで設定されていれば反映されない。（defaultでの設定が優先される）
さて、そろそろnginxの設定をしていく。
nginxは、基本的な設定がnginx.confに書かれており、追加の設定を書きたい場合はconf.dフォルダの中にファイルを追加することで書く。（拡張子は.conf限定）
なので。。。
$ cd /etc/nginx/conf.d
$ vi mybot.conf
server {
listen 80;
server_name default_server;
location / {
root /var/www/bot;
index index.html;
}
}listen : 80番のポートからきたアクセスのみ扱いますよ〜、ってやつ
server_name : ホスト名を適当につければいい。（なぜ必要なのか未だよくわかっていない）
location > root : さっき作ったindex.htmlに飛ばしたいのでbotフォルダを指定
location > index : botフォルダのどのファイルをレスポンスするかをここで指定
nginxの起動・状態・停止のコマンド一覧。
Ubuntuはこのコマンドでnginxを起動させたり、停止されることができる。
$ systemctl status nginx.service $ systemctl start nginx.service $ systemctl restart nginx.service $ systemctl stop nginx.service
nginxを起動(start)させ、ブラウザにipアドレスをうつと「Hello World!!」と表示されるはず
ipアドレスはifconfigコマンドで確認可能。
これで立派な静的WEBページの作成できた。
エラーまとめ
エラー１
発生タイミングは、nginxを再起動した時。
$ systemctl restart nginx.service
以下、エラーログ。
still could not bind()
エラーの意味は「ポート80番を割り当てれない」って言ってる。
ポート80を専有しているプロセスがあるっぽいので、ポート80を指定して、見てみる。
$ sudo lsof -i:80 #80番のポートを使用しているプロセスをkillする $ kill 10054
解決！
エラー2
発生タイミングは、たしかnginxを再起動したタイミングかな。
エラーの意味は、そのままファイルが見つかりません、ってやつ。
nginx.confのプロセスIDの参照先が間違っていた。
unlink() "/run/nginx.pid" failed (2: No such file or directory)
$ vi /etc/nginx/nginx.conf #before pid /run/nginx.pid; #after pid /var/run/nginx.pid;
解決！！
エラー3
発生タイミングは、nginxを起動せさせた状態でブラウザからIPアドレスをうってアクセスしようとした時。
一番、解決に時間がかかった。
応答時間が長過ぎます
アクセスログを見ても、ログがないのでそもそもアクセスすらできていない。
ということは、ポート80が空いてなくてアクセスできていないのか、と当たりをつけてみる。
ファイヤーウォールの設定を見て、ポートが空いているかを確認。
$ sudo ufw status Status: active To Action From -- ------ ---- 80/tcp ALLOW Anywhere 80/tcp (v6) ALLOW Anywhere (v6)
ポート80は空いている。
なぜ？
サーバーに接続した状態で、接続を確かめてみる。
$ curl localhost #これが返ってくる <html> <head></head> <body> <p> hello </p> </body> </html>
nginxの設定はあっているということになる。
ポートが開いていないことが原因だと確信する。（じゃないと説明が出来ない）
conohaのHPに行ってみる。
ポートの80が許可されていなかったので許可。(そういえばconoha側でもポートの設定できるんだった)
これや、原因はconoha側の設定でポートを開けていなかったから。
こんなイレギュラーなエラーにかかる人は少ないと思うが、念の為残しておく。
解決！！！
まとめ
以下、参考資料。
【nginxの勉強資料】
コメント：スライドシェアでnginxについての概要がわかりやすくまとめられている
Nginx勉強会 from Yuji Otani
www.slideshare.netコメント：webサーバーとアプリケーションサーバーの違いがまとめられている
qiita.com
コメント：リクエストをwebサーバーとアプリケーションサーバーでの処理の流れをする
「WASへのリクエスト転送」の章必見
webサーバーとアプリケーションサーバーの通信方法についての記載あり
www.ibm.com
