Electron始めました。
以前作りかけで終わったブラウザ版ノベルゲーをwindowsアプリで作りたいと思い、とうとうElectronに手を出してしまいました。
「就活はいいのかよ」「もっとちゃんと就活しろよ」
その通りです。
でも僕はプログラミングがしたい。
こちらのサイトを参考にしたらすんなりいけました。
ics.media
で、ここからが問題です。
Electron 入門 でグーグル先生に聞いても環境構築とか独自関数とかしかでてこない。
それで気づきました。
あ、これひょっとしてHTML書いたらそのままアプリになるんじゃないか？
マジでなりました。
↑のやつはHTMLとJavaScriptしか使っていません。
ブラウザゲーム作ったらWindowsアプリになった感じです。
なるほどこれがElectronか。素晴らしい！
ということは、phina.jsも使えるのでは？
結論から言うと、使えますが使う意味はあまりない気がします。
phina.jsでPCゲーム作りたいっていうならアリですが、そうじゃないなら素直にUnity使ったほうがいい気がします。
あと、phina.jsが使えるということは他のライブラリも使えるということです。
なのでBootStrapを使ったホームページメイカーみたいなのとかも作れるってことになります。
自分の父親が欲しがっていたので今度作ってあげるのもいいかもしれません。
ということで今回はこのへんで。
アニメ画像の輪郭を取る
膨張させて元画像引くと輪郭が取れるやつやりました（この方法の名称わからない）
#include <iostream>
#include <opencv2/highgui.hpp>
#include <opencv2/imgproc.hpp>
#pragma comment(lib, "opencv_world300d.lib")
int main(int argc, char *argy[]){
cv::Mat src_img = cv::imread("画像のパス");
cv::Mat gray;
cv::cvtColor(src_img, gray, CV_RGB2GRAY);
cv::Mat dilate_img;
cv::dilate(gray, dilate_img, cv::Mat(), cv::Point(-1, -1), 1);
cv::Mat result = dilate_img - gray;
cv::namedWindow("image1");
cv::namedWindow("image2");
cv::imshow("image1", src_img);
cv::imshow("image2", result);
cv::waitKey(0);
cv::imwrite("保存先のパス", result);
return 0;
}
RGB成分に分解してやったらもっときれいに輪郭取れるかもしれない。
Raspberry Pi3を動かす
HDMIケーブルが家にあったのでそれを使うことにしました。
基本的にこちらのサイトを見てSDカードの初期設定を行いました。
http://www.hiramine.com/physicalcomputing/raspberrypi2/setup_sdcard.html
では早速起動してみます。
OSはRaspbianを選びます。Lite版は今回は選びません。
SDカードの性能によってインストール時間が変わります。
僕の場合は大体30分くらいでした。
OKを押すと↓のような画面になります。
なんか怖いですが気にしない
起動しました。
早速ターミナルを開いて、ソフトを更新します。
sudo apt-get update
終わったらsudo apt-get upgrade
ファームウェアも更新しときます。
sudo rpi-update
これであとはpiユーザのパスワードを変えて終了。
ちなみにssh接続をする際はメニューのraspberry piの設定からsshを有効にしておかないと拒否られます。
今回僕は日本語の設定をした覚えはないのですが、インストールの際にあったLanguageをEnglishから日本語に変えたらインストール後の設定も全部日本語になっていました。
でも日本語入力をすることはできませんでした。
ラズベリーパイを買った
Raspberry Pi3 を買いました。
前から買おうと思っていたラズベリーパイをやっと買いました。
本体と電源のセットで5940円です。
Amazon CAPTCHA
マイクラサーバーを立てるつもりなので、ケースとヒートシンクとファンも買いました。
こちらは998円です。
https://www.amazon.co.jp/gp/product/B073HYFZRC/ref=oh_aui_detailpage_o00_s01?ie=UTF8&psc=1
microSDは東芝の16GBのものを買いました。1023円でたぶん普通です。
https://www.amazon.co.jp/gp/product/B019RE5Y96/ref=oh_aui_detailpage_o00_s00?ie=UTF8&psc=1
とりあえずケースを取り付けてみる
実は明日から旅行に行くので、環境設定する余裕がありませんでした（笑）なので、今回はケースの取り付けだけになります。
意気揚々とケースを分解。
早速説明書を見ますが・・・
適当に組み立てていきます。
とりあえず板の形を見てどこのパーツか推測。
多分、というか絶対ここだと思う。
次は説明書の②のパーツ
これは基盤の裏面につけるパーツでした。
説明書①の前に取り付けるパーツのようです。
絶対ここだと言っておきながら早速間違えました。
次は基盤の表面です。
③→④→⑤の順番でつけていきます。この順番でつけないと充電口が塞がってしまうようです。
ねじの向きがおかしいですがこんな感じです。
もうお気づきの方もいらっしゃると思いますが、ファンを取り付ける穴の位置がかなりずれています。
でもまあ、風は当たると思うので許容範囲でしょう。ぶっちゃけ安かったので別にいいです。
あとはヒートシンクを付けて
一応ファンも取り付けます。
追記：ファンを上下逆さまに取り付けていたようです（すみません）
あとファン取り付けたらちょうどよかったです。
次回はmicroSDカードにOSを入れて環境設定を行っていきたいと思います。
JavaScriptでローカルの画像を読み込んで表示する方法
僕がよく使っていた、JavaScriptで画像処理のやり方を紹介していたサイトが消えてしまったので自分で調べて作ってみることにしました。
こういう感じで表示させます。
inputタグを使って読み込んだファイルをcanvasに表示する方法です
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ファイル読み込み</title> </head> <body> <canvas id="canvas"></canvas> <input type="file" id="self"> <script> //キャンバスタグ読み込み var canvas = document.getElementById("canvas"); //描画機能を有効にする var ctx = canvas.getContext('2d'); //inputタグの読み込み var src = document.getElementById("self"); //inputが変更されたときのイベントを登録 src.addEventListener('change', function(event){ //選択ファイルを配列形式で取得 var file = event.target.files; //ファイルリーダー var reader = new FileReader(); //ファイルを読み込む reader.readAsDataURL(file[0]); //ファイルを読み込んだときの処理 reader.onload = function(){ //画像オブジェクト作成 var img = new Image(); //画像ソースを入れる img.src = reader.result; //画像の表示 img.onload = function(){ canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); } } }, false); </script> </body> </html>
OpenCVできのこの輪郭を取る
OpenCVを使ってキノコのエッジを取っていきます。
OpenCVのバージョン：2.4.13
使う言語：C++
こんな感じできれいにキノコのエッジを取りたいと思います。
やり方は簡単で、
- 画像を読み込む
- オープニング処理をする
- ガウシアンフィルタをかける
- RGBチャンネルごとにCannyでエッジを取る
- チャンネルの論理和を取る
- 白黒反転（完成！）
やり方は簡単ですが、これを見つけるまでに結構苦労しました（笑）
ソースコード#include <iostream>
#include <opencv2/highgui.hpp>
#include <opencv2/imgproc.hpp>
#pragma comment(lib, "opencv_world300d.lib")
int main(int argc, char *argy[]){
//画像の読み込み
cv::Mat src_img = cv::imread("C:\\file\\pos\\t_kinoko\\画像ファイル名.jpg");
if (src_img.empty()){
std::cout << "cannot open file" << std::endl;
return -1;
}
for (int i = 0; i < 2; i++){
//オープニング
cv::erode(src_img, src_img, cv::Mat(), cv::Point(-1, -1), 2);
cv::dilate(src_img, src_img, cv::Mat(), cv::Point(-1, -1), 2);
//ガウシアンフィルタ
cv::GaussianBlur(src_img, src_img, cv::Size(9, 7), 10, 10);
}
cv::namedWindow("image", CV_WINDOW_AUTOSIZE | CV_WINDOW_FREERATIO);
cv::imshow("image", src_img);
cv::waitKey(0);
cv::Mat channels[3];
//RGBチャンネルを分割
cv::split(src_img, channels);
for (int i = 0; i < 3; i++){
//Canny処理
cv::Canny(channels[i], channels[i], 60, 180, 3);
}
cv::Mat canny_img;
//論理和を取る
cv::bitwise_or(channels[0], channels[1], canny_img);
cv::bitwise_or(channels[2], canny_img, canny_img);
//白黒反転
canny_img = ~canny_img;
cv::imshow("image", canny_img);
cv::waitKey(0);
cv::imwrite("C:\\file\\result\\kinoko1\\保存名.jpg", canny_img);
return 0;
}これだけできのこのエッジが取れます。しかし、背景やキノコの種類によってはうまく検出できないことがあります。
なので、ヒストグラムなどを使って収縮・膨張の回数やCannyの閾値の調節ができるような関数を考えないとダメっぽいです。
出来たらブログに書きます。
