2016-12-18

herokuに簡易web apをデプロイ

っていう話

結構止まったのでメモしておく。

はじめに

python3+bottleで作った簡易webサーバをデプロイしました。以下、手順。
(herokuのアカウント登録とか事前にイロイロやることあるけど省略します。)

gitのローカルリポジトリを作る

git init
git add .
git commit -m "comment"

ここで作ったリポジトリをherokuが管理してるリモートリポジトリにpushするっぽい。

herokuの準備

heroku create [app name]
git push heroku master

トラブル

herokuにpushするときにいっぱい怒られた。
herokuがアプリケーションを実行するために下記3ファイルをプロジェクトのルートに置いとく必要がある。

runtime.txt
requirement.txt
Procfile

runtime.txt

使ってるpythonのバージョンを書く。
今回は以下の一行のみ。
python-3.5.1

requirement.txt

アプリで使ってるライブラリを書く。
pip freeze > requirement.txt
で自動で作成される。

Procfile

herokuがアプリを実行するときに使うコマンドを記述する。
今回は以下の一行のみ。
web: python app.py

おわりに

初期設定で戸惑いましたがそれが済めばそのあとは超簡単っぽい。
もともとRuby専用だったみたいで、Ruby使えばもっと簡単なのかな？

2016-08-07

virtualboxで立てたゲストOSからホストOSにFTP転送したい

掲題の件がうまく行かない。

ゲストOSはUbuntu14.04
ホストOSはWindows8

ホスト側でIISマネージャーからFTPサイトを立て、ゲスト側からftpコマンドを叩いた。
ログインまでは上手くいくのだが、肝心のファイル転送時(putコマンド実行時)に下記エラーが発生する。
501-Server cannot accept argument.
Win32 error: The parameter is incorrect.
Error details: Client IP on the control channel didn't match the client IP on the data channel.
501 End

制御チャネルで使ってるクライアントのIPとデータ転送チャネルで使ってるクライアントのIPが違うらしい。
この二つをどこで設定してるのかわからんのでなんとも対処がわからん。はー困った。。。

2016-07-17

networkxとd3.jsでグラフを描画するwebサービス

イントロ

こちらのサイトを見て、すごくいいなぁと思ったので似たようなのを作りました。
デザインや機能などは完全に劣化しています。でも楽しかったのでここにまとめようと思います。

使用言語：python、JavaScript
ライブラリ：networkx、d3.js、JQuery
フレームワーク：bottle

大まかな流れ

f:id:g0nChang:20160717013509p:plain

networkxとd3.jsがJSON形式で上手いこと連携とれるようになっていてとても便利。
d3.jsの描画能力がとても高いので使いこなせばかっこいいやつが作れそう。

実物

芋いが許してくれ・・・
f:id:g0nChang:20160717015517p:plain
頂点数、グラフの種類を選択して[showGraph]ボタンを押すと
f:id:g0nChang:20160717015651p:plain
はいドーン。

コード

gitに置いてます。
参考：
d3.js関係(グラフ描画に関するコードはほぼこちらのコードを使わせて頂きました。)
D3.jsのForce Layout (力学モデルでグラフ描画するレイアウト)を動かしてみた - カタカタブログ
 JQuery関係
http://dotinstall.com/lessons/basic_jquery_v2
bottle関係
Pythonの軽量WebサーバBottleの使い方 - MyEnigma
Pythonの軽量Webフレームワーク「Bottle」 - Symfoware
networkx
NetworkX documentation — NetworkX 2.0.dev20161010012513 documentation(公式)

今後

公開する。
twitterのアカウントからソーシャルグラフを描画する機能を実装する。
一回ボタン押すと以降反応してくれない不具合があるので、修正する。
描画したグラフで何か遊ぶ機能(ランダムウォークとか、そんな感じの)
デザインをかっこよくする。

2016-07-03

d3.js勉強中。困っている。

ドットインストールでd3.jsの勉強している。
私の凡ミスなのかわからないが、この段階で詰まっていて途方に暮れている次第。
私が書いたのは以下の通り。レクチャーの通りに書いたと思っているのだが。。。
OSはwindows8, ブラウザはクローム。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>Practice of JavaScript</title>
</head>
<body>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>
		var dataset = [11, 25, 45, 30, 33];
		var w = 500;
		var h = 200;

		var svg = d3.select("body").append("svg").attr({width:w, height:h});

	</script>
</body>
</html>

結果、svg要素がbodyに追加されているけどwidthとheightの設定がされてない。。。
f:id:g0nChang:20160703040605p:plain
なんでや。。。

変数使わないでやってみる。

var svg = d3.select("body").append("svg").attr({width:500, height:200});

結果は変わらず。

こうすればうまく行った。

var svg = d3.select("body").append("svg").attr("width",w).attr("height",h);

結果
f:id:g0nChang:20160703040918p:plain
なんか芋い。まぁ意図した結果にはなっているので我慢。attrをまとめるのはやめる。

ところがレッスンをtransitionの話まで進めたところでまた問題が。
durationの指定までは問題なくいったが・・・

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>Practice of JavaScript</title>
</head>
<body>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>
		var dataset = [11, 25, 45, 30, 33];
		var w = 500;
		var h = 200;

		var svg = d3.select("body")
			    .append("svg")
			    .attr("width",w)
			    .attr("height",h);

		svg.selectAll("circle")
			.data(dataset)
			.enter()
			.append("circle")
			.attr("cx", function(d,i) { return 50 + (i * 100); })
			.attr("cy", h / 2)
			.attr("r", 0)
			.attr("fill", "red")
			.transition()
			.duration(1000)
			.ease("in")
			.attr("r",function(d) { return d; });

	</script>
</body>
</html>

こう書いたらeaseでUncaught error。次に進めない。。。
ドットインストールの動画を見ても、他のブログを見ても問題なさそうに見える。
環境的な問題なのか、はたまた私の凡ミスなのか。もう少し調べることにする。。。

追記：バージョン下げたらうまく行った。
変更前

<script src="https://d3js.org/d3.v4.min.js"></script>

変更後

<script src="https://d3js.org/d3.v3.min.js"></script>

d3.v4.min.js→d3.v3.min.jsとした。v4は使わないことにする。使わないことにする。

2016-06-28

Tomcat上に置かれたWebアプリに外部ファイルを読ませる

参考：www.dollpaper.com

外部ファイルの内容によって挙動が変わるスタブを作ってたのでこんなんが必要になった。
結構はまったけどやることは簡単。

java.net.URLをインポートする。

import java.net.URL;

んで以下のように。

URL resourceUrl = this.getClass().getClassLoader().getResource("hoge.xml");
String path = resourceUrl.toString();

1行目はwebapps/appname/WEB-INF/classes直下にあるhoge.xmlファイルを見る。
パスの取得はtoStringメソッドを使う。

他にもServletContextで取得する方法があったが、Servletクラスでしか使えなさそう。
最初はこればっかり出てきて「違うんや。。。そうじゃないんや。。。」ってなった。
Servletでの起動時外部ファイル読み込み方法 | 陸トトの忘れぬ為の備忘録
 ファイルのパスの取得について - Java 解決済 | 教えて！goo
WEB-INF下のファイルの読み込み | ごった煮 - tips about programming and building a server

今まではeclipse上で動けば良かったからこういうのはちゃんと考えたことなくて結構新鮮だった。
スタブではあるけどwebサービスが一通り作れて楽しかった。

2016-06-28

Tomcatのパスワード、ユーザーの設定方法

参考：mokky14.hatenablog.com

パスワードもユーザー名も設定した覚えがないのに突然聞かれてビックリした。
ペペッと設定できるみたい。

tomcat-users.xml
に以下を追加する。

<tomcat-users>
    <user username="user" password="password" roles="admin,manager,manager-gui"/>
</tomcat-users>

簡単ですが、以上。

2016-04-10

ネットワークスペシャリストの勉強1

2ヶ月も放置してました。。。

会社で応用情報を取れって言われてるんですが、応用情報って広すぎて受ける気がしないので
ネットワークスペシャリストを受けることにしました。
そしたらすごい難しい資格らしく。ちょっと萎えてますが、とりあえず勉強したことをここに書こうと。
他にも結城浩さんの暗号技術入門を読んでいるので、そちらの内容も書いていこうと思います。

自分なりに噛み砕いたものをぺチぺチ書いていきます。

■外部ストレージの形態

ローカルのストレージだけでは要領に限界があるので、外部にストレージを用意したくなります。
このときの外部ストレージとの接続の仕方に種類がありますよって話。

DAS

　サーバに直でストレージを繋ぐ。

SAN

　ハードウェアやテープ装置とサーバを専用ネットワークで繋ぐ形態。
　実態としてはネットワーク上にストレージを置いているが、
　ローカルにストレージがあるっぽく見える。

NAS

　これもSANと同じようにローカルのストレージが増えたように見える。
　ファイルシステムを採用してファイル管理を行う。
　これは研究室で使ってたのでいくらかイメージしやすかった。
　ファイルシステム使う分、遅い。(ただ使いやすい？)

■RAID

複数のHDを組み合わせて耐障害性のある一つのHDのように扱う仕組み。
組み方によって名前がある。

RAID0(ストライピング)

　複数のHDにデータを分散させる。冗長性は持たせないのでHDが一つ死ぬと
　そこに保存されていたデータも死ぬ。
f:id:g0nChang:20160410104201p:plain:w300

RAID1(ミラーリング)

　同じデータを持つHDを複数用意する。一つのHDが死んでも他でカバーできるので
　耐障害性は高いが、要領がHD一つ分なため、効率悪い。
f:id:g0nChang:20160410104218p:plain:w300

RAID 0+1

　RAID0構成したHD群を一つのHDと思ってRAID1構成にする。
f:id:g0nChang:20160410105433p:plain:w300

RAID 1+0

　RAID1構成したHD群をRAID0構成にする。
f:id:g0nChang:20160410105608p:plain:w300

RAID3,RAID4

　複数のHDにデータを分散させておき(RAID0構成にしておき)、それとは別に
　データ復旧用のパリティHDを用意する。RAID3とRAID4の違いはパリティを計算するときの
　データの単位の違い(RAID4が単位が大きい)で、本質的には変わらない。
　下図のオレンジがパリティHD。P1は真上のA、Bから計算される。P2～P4についても同様である。
　例えば、Aというデータが破損した場合、BとP1からAを復元する。
f:id:g0nChang:20160410110501p:plain:w300

RAID5

　パリティHDが分散されたもの。分散することによって高速になるらしいけどよくわかっていない。
f:id:g0nChang:20160410111005p:plain:w300

ひとまずこんなところ。受かった人が勉強方法を細かく書いてくれているブログもあるので、
そちらを参考に勉強を続けていきたいと思います。

g0nChang’s diary