Yado_tech

旅館+ITとはなんぞ

javascript

web extensions書き直した。

どうにも昨日作ったweb extensionがきもちわるいかったので書き直した。 popup.jsでどうこうするやつはスコープの生き死にがわかりづらかった。 てことで現在はpopup.jsではなくbackground scriptsで管理するようにした。 async/awaitとfetchAPIを使って書き…

web extensions 作ってみた。

how to use lastfm extension これ以上web extensions勉強しても知見が得られそうにないので実際に作ってみた。 generator-web-extension使用。 インストール方法はコチラ やりたいことはボタン押したら選択範囲を検知してその選択範囲がアーティストならlas…

generator-web-extension使ってみよう。

なぜ? インストール 使い方 最初に ホットリロード なぜ? いきなりQiita qiita.com とあったのでgithubページ見に行くとなんかdeprecatedなページを見た気がしたので。(気のせいでした) どうやらgenerator-chrome-extension-kickstartと勘違いしたらしい…

Cannot find module '/home/yohei/.nvm/versions/node/v9.10.1/lib/node_modules/yo/node_modules/spawn-sync/postinstall てでたとき

npm install --global yo できなかった。 ログはこんな感じ module.js:478 throw err; ^ Error: Cannot find module '〜/.nvm/versions/node/v9.10.1/lib/node_modules/yo/node_modules/spawn-sync/postinstall' at Function.Module._resolveFilename (modul…

create-react-appの使い方

正直webpackだとかbabelだとかbrowserifyとか全くわからない。 そんなアホな僕にも使えるツール、それがcreate-react-app reactの開発には基本create-react-appとES6( ecmascript2015)だけあれば基本いいみたいだ。 そしてnpmはcreate-react-appと組み合わ…

nodeインストールからcreate-react-appまで

node.jsのインストールからcreate-react-appまでを簡単に解説する。 【流れ】 nvmインストール nodeインストール create-react-appインストール 【nvm】 nodeをインストールする前にこのバージョン管理ツールをインストールしておくと後が楽 インストール方…

reduxの理解の仕方。

redux難しいなって思ってたけど実はそうでもなかった。 公式のcounter-vanillaが一番わかりやすかった。 github.com 一番重要なことはここの画像をお借りしたい (state,action) => state 大切なのはコレ。 stateとactionで新しいstateを作って 新たなstateで…

redux、そびえ立つ難しさよ。 https://redux.js.org なんとなく何が難しいのかわからない、本当にヤバイ状態なので今自分にわかっていることをまとめる React reactjs.org 言わずとしれたすっごいフレームワーク。何でも出来る。ただしやってることはprops渡…

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

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 la…

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

連想配列を色々とまとめて処理したい。 ①for ~in ループを使う これが一番簡単でわかりやすい。メインで使う var IDs = { "name1":"hoge1", "name2":"hoge2", "name3":"hoge3", "name4":"hoge4", }; for(var key in IDs){ console.log(IDs[key]); } ②forEach…

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 }); …

WebExtensionsことはじめ

以前仕事で必要があって WebUIとFlask,Seleniumを使ってPC内にサーバーを立ててブラウザ操作を自動化するアプリを作ったんですがこれがちょっと使いづらかったらしい 使いづらい理由: 起動の仕方がわからない:起動はパワーシェルでFlaskでHTTPサーバー立て…

イマイチReactがよくわからなかったので

Oreillyの本買った。 Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門 作者: Stoyan Stefanov,牧野聡 出版社/メーカー: オライリージャパン 発売日: 2017/03/11 メディア: 単行本(ソフトカバー) この商品を含むブログを見る 言語だ…

一旦最後までさらってみた

JavaScriptエンジニアが手っ取り早くReactの基礎を理解するための「超」入門書 作者: 天田士郎 発売日: 2017/02/05 メディア: Kindle版 この商品を含むブログを見る さらっと触った。 JSXという言語仕様が非常にスマートだと感じた。 それをどこでも動かせる…

Reactってやつ何?

て思って買ってみたよ JavaScriptエンジニアが手っ取り早くReactの基礎を理解するための「超」入門書 作者: 天田士郎 発売日: 2017/02/05 メディア: Kindle版 この商品を含むブログを見る 途中だけど直接JSとかHTML書くのとどう違うのかイマイチわかってない…

写経

普通になんか作ろうと思ったら1,000行は越えそうな感じ。 <html> <head> <title>test7</title> <script type ="text/javascript" src ="./libs/three.js"></script> <script type ="text/javascript" src = "./libs/stats.js"></script> <script type = "text/javascript" src = "./libs/dat.gui.js"></script> <style> body{ margi…</head></html>

Three.jsの基本まとめ①

Scene,Camera,Render、この3つがThree.jsの基本。こちらに正しいプロパティをセットしたら見えるようにはなる。

three.js 2章

写経中・・ 初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ作者: Jos Dirksen,あんどうやすし出版社/メーカー: オライリージャパン発売日: 2016/07/23メディア: 単行本(ソフトカバー)この商品を含むブログ (3件) を見る 悪いところがあっ…

three.jsはじめてみました

なんだかんだでJSとPythonとあとHTML位が楽。 Processingなんてなかった。 初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ作者: Jos Dirksen,あんどうやすし出版社/メーカー: オライリージャパン発売日: 2016/07/23メディア: 単行本(ソフト…