generator-web-extension使ってみよう。
なぜ？
いきなりQiita
とあったのでgithubページ見に行くとなんかdeprecatedなページを見た気がしたので。（気のせいでした）
どうやらgenerator-chrome-extension-kickstartと勘違いしたらしい。
でもchromeではなくFirefox派なのでgenerator-web-extensionを使ってみようと思う。
インストール
npm install -g yo generator-web-extension
使い方
最初に
ディレクトリを作り、そこでターミナルを開いてコマンドを打つ
mkdir myfirstextension cd myfirstextension yo generator-web-extension
すると会話形式でScafoldingが始まった。適当にポチポチしていくとひな形が作成される
どうやらこれで開発するとnodeのモジュールなどが使えるようだ。
ホットリロード
コマンドはnpm run dev firefox
これで./dist/firefox/フォルダが出現する。
これをabout:debugging内の
一時的なアドオンを読み込めば
あとは勝手にホットリロードされる。
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 (module.js:476:15) at Function.Module._load (module.js:424:25) at Module.runMain (module.js:611:10) at run (bootstrap_node.js:387:7) at startup (bootstrap_node.js:153:9) at bootstrap_node.js:500:3 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! spawn-sync@1.0.15 postinstall: `node postinstall` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the spawn-sync@1.0.15 postinstall script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /root/.npm/_logs/2018-04-25T14_16_41_992Z-debug.log
なんやておもってググった。
どうやら
てことでserverlessというモジュールだったのでYOに変えた。
npm install -g try-thread-sleep npm install -g yo --ignore-scripts spawn-sync
これでなんかしらんがインストールできた。
調べてみるとspawn-syncのエラーらしい。その内なおることを期待しとこう。
PythonでおんどとりWebStrageAPIを利用する。
おんどとりWebStrageがいつの間にかAPIに対応していた。知らなかったｗ
はじめにお読みください | おんどとり WebStorage API
ていうことでサクッとPython3でAPIを取得してみた。
【API_KEY】【ID】【PASS】は各自の環境に応じて書き換えて下さい。
import requests import json url = "https://api.webstorage.jp/v1/devices/current" api_key = "【API_KEY】" login_id ="【ID】" password = "【PASS】" paylord = {'api-key':api_key,"login-id":login_id,'login-pass':password} header = {'Host':'api.webstrage.js:443','Content-Type': 'application/json','X-HTTP-Method-Override':'GET'} def main(): response = requests.post(url,json.dumps(paylord).encode('utf-8'),headers=header).json() print(response['devices'][0]['channel'][0]['value']) print(response['devices'][1]['channel'][0]['value']) print(response['devices'][2]['channel'][0]['value']) if __name__ =="__main__": main()
これで取得できるはず。seleniumとかいらんくなったね
sip.jsで通信する。1.demo phoneで通話するまで
sip.jsのgetting startedを簡単に解説。
【環境】 centOS:7.4 Asterisk:13.20
まずはAsteriskのインストール
必要なパッケージのインストール
yum install wget gcc gcc-c++ ncurses-devel libuuid-devel jansson-devel libxml2-devel sqlite-devel libsrtp-devel openssl-devel
Asteriskのダウンロードとインストール
cd /usr/local/src/
wget http://downloads.asterisk.org/pub/telephony/asterisk/asterisk-13.20.0.tar.gz
tar zxvf asterisk*
cd /usr/local/src/asterisk*
./configure --with-pjproject-bundled
make menuselect
メニューセレクト画面でres_srtpとpjprojectにチェックが入っているか確認する。
入っていなければsrtp libraryをインストールする インストール方法は→コチラ
make && make install
make samples
make config
インストールした後でポートを開放する。 開放するポートは 5060 8089/udp 10000-20000/udp
意外と忘れがち
DTLSのインストール
mkdir /etc/asterisk/keys
cd /usr/src/asterisk*/contrib/scripts
./ast_tls_cert -C -O 【クライアントのIPアドレス】"My Super Company" -d /etc/asterisk/keys
ここでハマった。IPアドレスはホスト側（Asterisk）ではなくてHP側（タブレット側）のIPアドレスを書いておく。
http.conf,sip.conf,extensions.confの編集。
http.conf
;http.conf [general] enabled=yes bindaddr=【ホスト側のIPアドレス】 ; Replace this with your IP address bindport=8088 ; Replace this with the port you want to listen on tlsendable=yes tlsbindaddr=【ホスト側のIPアドレス】:8089 ; Replace this with your IP address tlscertfile=/etc/asterisk/keys/asterisk.pem
sip.conf
[general] realm=192.168.10.14 udpbindaddr=192.168.10.14 transport=udp maxexpirey=3600 defaultexpirey=3600 context=default bindport=5060 bindaddr=192.168.10.14 srvlookup=yes allowguest=no disallow=all allow=ulaw allow=alaw allow=gsm allow=vp8 allow=h264 language=ja udpenable=yes tcpenable=yes icesupport=yes [1060];webRTC client type=friend username=1060 host=dynamic secret=pass encryption=yes avpf=yes context=default directmedia=no transport=udp,ws,wss force_avp=yes dtlsenable=yes dtlsverify=fingerprint dtlscertfile=/etc/asterisk/keys/asterisk.pem dtlsprivatekey=/etc/asterisk/keys/asterisk.pem dtlssetup=actpass nat=force_rport rtcp_mux=yes allow=vp8,h264,ulaw dtmfmode=rfc2833
extensions.conf
exten => 1060,1,Dial(SIP/1060)
でOK
あとはdemo phoneに各種パラメータを記入したらOK
create-react-appの使い方
正直webpackだとかbabelだとかbrowserifyとか全くわからない。
そんなアホな僕にも使えるツール、それがcreate-react-app
reactの開発には基本create-react-appとES6( ecmascript2015)だけあれば基本いいみたいだ。
そしてnpmはcreate-react-appと組み合わせるとまたすごくなる。
まずは適当なディレクトリでPowershellかterminalを開いて
create-react-app myapp
でappを作る。
cd myapp
npm start
でアプリのモックが表示される。
これを起点にアプリを作っていく。
構造はこんな感じになっている。
簡単に説明する。
. ├── node_modules ├── package.json ├── public ├── README.md └── src
重要なのはpackage.json
【package.json】
作ったアプリに対してどんなモジュールが必要だとか、スクリプトが出来るかとか、そういったことを定義するファイル。
このファイルに定義されていない限りたとえnpm install --global 【モジュール名】でインストールされたモジュールだろうと読み込まれない。
【src(ディレクトリ)】
ここにアプリ本体を書いていく。最初にあるファイルたちは全部削除してOK
①必要なモジュールのインストール
必要なモジュールはmyappディレクトリでpowershellかterminalを開いて
npm install --save 【モジュール名】
で必要なモジュールをインストール出来る。ちなみに--saveオプションを付けておけばpackage.jsonに自動的に登録されてインポートできるようになるスゴイ
②テスト
npm startでテスト出来る。ちなみにホットリロード式になっているのでセーブさえすれば即座に変更が反映される。スゴイ
③完成したアプリをアップロードできる形にする。
npm run buildでpublicディレクトリにアプリがパブリッシュされる。これをアップロードすればいいらしい。スゴイ
スゴイ。
nodeインストールからcreate-react-appまで
node.jsのインストールからcreate-react-appまでを簡単に解説する。
【流れ】
nvmインストール
nodeインストール
create-react-appインストール
【nvm】
nodeをインストールする前にこのバージョン管理ツールをインストールしておくと後が楽
インストール方法はこっち
【node.js】
nvmをインストールしたらnvmを使ってnode.jsをインストールする。
nvm install 【node.jsのバージョン】でインストール出来る。ちなみに
nvm install latestで最新のStableバージョン
nvm install ltsで長期サポート(Long Term Support)のバージョンが入る。
ちなみに複数インストールした場合nvm use 【nodeのバージョン】で使うバージョンを指定できるが、最初はいらない。
【npm】 node.jsをインストールしたらこちらが使えるようになる。
【create-react-app】 reactのいろいろな環境設定を一発でやってくれるツール。便利。
npm install --global craete-react-app
で入る。
reduxの理解の仕方。
redux難しいなって思ってたけど実はそうでもなかった。
公式のcounter-vanillaが一番わかりやすかった。
一番重要なことはここの画像をお借りしたい
(state,action) => state
大切なのはコレ。
stateとactionで新しいstateを作って
新たなstateで描画し直す。
これを行うためのフレームワークだった。
画にするとこんな感じ。
これを書いて理解するために何度も言うようだが公式のcounter-vanillaが最もわかりやすかった。
自分なりにコメントを入れたのでよかったら参考にしてほしい。
<!DOCTYPE html> <html> <head> <title>basic example</title> //reduxの読み込み <script src = "https://unpkg.com/redux@latest/dist/redux.min.js"></script> </head> <body> <div> <p> Clicked:<span id = 'value'>0</span>times <button id = 'increment'>+</button> <button id = 'decrement'>-</button> <button id = 'incrementIfOdd'>Increment if odd</button> <button id = 'incrementAsync'>Increment async</button> </p> </div> <script> //reducerの作成 actionの登録。 //(state,action)=>(state)の形で返すための1歩目 function reducer(state,action){ //stateの初期値を設定する if(typeof state === 'undefined'){ return 0 } switch(action.type){ case 'INCREMENT': return state +1 case 'DECREMENT': return state -1 default: return state } } //(state,action)=>(state)の2歩目 //storeの作成。stateをファイルから分離させて別のところにする作業 var store = Redux.createStore(reducer) var valueEl = document.getElementById('value') function render(){ valueEl.innerHTML = store.getState().toString() } render() //reduxにrenderを登録する。難しい理論はリンクに掲載してある。 //これで"dispatch"関数が実行されたら返り値に応じてrenderされるようになる。 store.subscribe(render) //actionの作成 //これはSQLで言うところのクエリの発行。"dispatch"関数によってクエリを発行し、 //戻って来た値でrenderされる。 document.getElementById('increment') .addEventListener('click',function(){ store.dispatch({type:'INCREMENT'}) }) document.getElementById('decrement') .addEventListener('click',function(){ store.dispatch({type:'DECREMENT'}) }) document.getElementById('incrementIfOdd') .addEventListener('click',function(){ if(store.getState()%2 !== 0){ store.dispatch({type:'INCREMENT'}) } }) document.getElementById('incrementAsync') .addEventListener('click',function(){ setTimeout(function(){store.dispatch({type:'INCREMENT'})},1000) }) </script> </body> </html>
考えが今までのデータベースとHTMLといった関係から違う種類のものに変化しているので
そこに注意する。混ざってる
(state,action)=>state
何度も書いてるがこれがreduxのキモである。
