2018-04-15

にっくき tracker-miner-f

うちのPCがスゲぇ音立ててた。

tracker-miner-fってプロセスと

tracker-extract ってプロセスがめっちゃ占有してた。

gist.github.com

とりあえずtopコマンドで表示されたPIDをKILLした。

なんやこれ

2018-04-15

■

React.js javascript redux

redux、そびえ立つ難しさよ。

https://redux.js.org

なんとなく何が難しいのかわからない、本当にヤバイ状態なので今自分にわかっていることをまとめる

React

reactjs.org

言わずとしれたすっごいフレームワーク。何でも出来る。ただしやってることはprops渡してcomponent描画してるだけ。

propsには何でも渡せる。functionだって渡せる！！

<header />
<main />
<title />
<footer />

みたいに（最終的には）すっごく単純に見せれる。

Redux

https://redux.js.org/redux.js.org

端的に言うとprops管理するためのフレームワーク。なぜこれが必要かと言うと

componentに子componentをもたせるとどこまでprops渡したのか複雑なアプリになってくるとわからなくなってくるため、storeで一元管理する。

これをデータの流れを作ることでシンプルに利用しよう、というわけらしい。

2018-04-06

create-react-native-app → npm start できなかった。

React.js javascript

centOS7でreact-native-app作ろうと思ったらできなかった。

github.com

watchmanがないらしい。

てことでソースからインストール。

facebook.github.io

$ git clone https://github.com/facebook/watchman.git
$ cd watchman
$ git checkout v4.9.0  # the latest stable release
$ ./autogen.sh
$ ./configure
$ make
$ sudo make install

npm startでバーコード表示されたから行けたかと思ったけど無理だった。

経過わかったら書きます。

2018-03-30

車で～時間圏内がどこからどこまでか

雑記

f:id:devilmakelie:20180330172236j:plain

Google Mapを使用したサービスのIsochrone and Isodistance Map Demoというサービス

を利用する。Githubページはコチラ。

これでどこまでかが一目瞭然。

使い方はマップ内にフラッグを立ててその後

f:id:devilmakelie:20180330172213j:plain

duration(距離)とdriving(車)にチェックしてCompute Polygonボタンを押してしばらく待てばOKです。

これは便利。

2018-03-09

連想配列にforループを適用する

javascript

連想配列を色々とまとめて処理したい。

①for ~in ループを使う

これが一番簡単でわかりやすい。メインで使う

var IDs = {
  "name1":"hoge1",
  "name2":"hoge2",
  "name3":"hoge3",
  "name4":"hoge4",
};

for(var key in IDs){
  console.log(IDs[key]);
}

②forEachを使う

Object.keys(array)を使うと連想配列のキーのみ配列として取り出せることを利用する

var IDs = {
  "name1":"hoge1",
  "name2":"hoge2",
  "name3":"hoge3",
  "name4":"hoge4",
};

Object.keys(IDs).forEach(value => {
  console.log(IDs[value])
},IDs);

ちょっと無理やり感がある。

③mapを使う

mapを使うと配列の処理がいらなくなるみたい

var IDs = {
  "name1":"hoge1",
  "name2":"hoge2",
  "name3":"hoge3",
  "name4":"hoge4",
};

Object.keys(IDs).map(value => console.log(IDs[value]));

これだとmapとforEachの違いがイマイチつかない。

ついでにはなるが、

www.sejuku.net

をみて書いたのでが、forEach文をアロー関数になおそうとするとエラーになった。

var IDs = {
  "name1":"hoge1",
  "name2":"hoge2",
  "name3":"hoge3",
  "name4":"hoge4",
};

Object.keys(IDs).forEach(value => {
  console.log(this[value])
},IDs);

という書き方だとエラーが出る。アロー関数内のスコープは基本外側に向けて開かれているため、という理解。この場合thisが何のオブジェクトなのか定義されていないため、みたい。ちょっとした違いだけど心に留めておく。

qiita.com

2018-03-07

javascriptでダブルクリックをエミュレーションする

javascript

【やりたいこと】

DOMをダブルクリックしたときのイベントを発火させたい

<html>
<head></head>
<body>
<div id = "ex_event" ondblclick = click_event></div>
</body>
</html>

click_eventを発火させたい

MouseEventメソッドを使う。

developer.mozilla.org

var evt = new MouseEvent("dblclick", {
  bubbles: true,
  cancelable: true,
  view: window
});

elm = document.getElementById("ex_event");

elm.dispatchEvent(evt);

これでダブルクリックをエミュレーション出来る。

2018-03-06

WebExtensionsことはじめ

WebExtension javascript

以前仕事で必要があって

WebUIとFlask,Seleniumを使ってPC内にサーバーを立ててブラウザ操作を自動化するアプリを作ったんですがこれがちょっと使いづらかったらしい

使いづらい理由：

起動の仕方がわからない：起動はパワーシェルでFlaskでHTTPサーバー立てる→ブラウザでアクセス→そっからWebUIで呼び出し、というふうな感じで作ってたのですが、なんでそんなメンドイことするの？て風な感じで誰も起動しようとしなかった。
たまにSeleniumがブラウザオブジェクトを見失ってしまう：そんなときは最初からやり直して下さいと言っていたのですが、見失うのが若干多かったりしたのでわからんとの指摘があった。

フッざけんな！とも思ったのですが、まぁ確かに使いづらいのかな、とも思ったのでWebExtensionsで書き直すことにしました。

てことで以下を手習いに写経しました

developer.mozilla.org

色々とタイポが多くて苦労はしたのですが、ようやくチュートリアルがうまく行ったのでこれから作っていきます。

作りたいのはクライアントのページを操作するWebExtensions

f:id:devilmakelie:20180306200348j:plain

【サーバー側】

・WebExtensionsからクエリがあったらそれを返すAPIを作成する

【WebExtensions側】

・UIを作成する

・元となるページからDOMを取得し、取得したDOMに応じてクエリを作成し、サーバー側へPOSTかGETする

・帰って来たレスポンスを成形してUIに流し込む

・流しこまれたUIを元にユーザーが色々と成形する。

・元のページに成形されたデータを流し込む

この辺ができれば、と思う。

Yado_tech

旅館＋ITとはなんぞ