Permissions API でカメラのパーミッションのリクエストは出来ない

ブラウザでカメラを使う場合にシステムから使用許可の確認ダイアログが表示されます。iOS safariは毎回表示されるがAndroidのchromeは1度承認または否認すると設定を保持していて、再度明示的に許可確認ダイアログを表示することは出来ない。

https://developer.mozilla.org/ja/docs/Web/API/Permissions_API/Using_the_Permissions_API

しかしながら、ブラウザー機能への将来の追加は request() メソッドを提供するべきです、それは私たちが好きなときにいつでもプログラム的にパーミッションを要求することを可能にするでしょう。 うまくいけばこれらはすぐに利用可能になるはずです。

取り消しできる項目もあるがカメラは出来ない

https://developer.mozilla.org/ja/docs/Web/API/Permissions/revoke#Browser_compatibility

bitbucket Webhooksでvueプロジェクトのデプロイとビルドを自動化

Webhooksを設定

Bitbucketリポジトリの

Settings > Webhooks 

に遷移

Add webook をクリック

titleとリクエスト先URLを入力

Triggers  > Repository push にチェックが入っているのを確認。リポジトリプッシュがトリガーになって入力したURLにリクエストを送られる。

Webhooksのリクエスト先を作成

webhooksのリクエスト先のdeploy.jsを作成
 
webhooksがリクエストすると、任意のディレクトリ(vue-project)でmasterをプルしてきて、yarn buildを実行


const http = require("http");
const url = require("url");
const util = require("util");
const childProcess = require("child_process");
const exec = util.promisify(childProcess.exec); //child_processをprmoise化

const pullMaster = async () => {
  const cmd_pull = `cd ${__dirname}/vue-project && git checkout master && git pull origin master`;
  return await exec(cmd_pull, { timeout: 90000 }, (error, stdout, stderr) => {
    if (error !== null) {
      console.log("exec error: " + error);
    }
  });
};

const build = async () => {
  await exec(`cd ${__dirname}/vue-project && yarn build`);
};

const pullAndBuild = async () => {
  await pullMaster();
  await build();
};

http
  .createServer((req, res) => {
    if (
      req.method == "POST"
    ) {
      pullAndBuild();
    }
  })
  .listen(3000);

Node.js 更新したデータを定期的にGitにバックアップする

お題

cmsで作られた様々なjsonデータや画像データを毎日バックアップする

cmsをNode.jsで実装していたので、サクッとNode.jsだけで簡単に終わらせたい。検討した方法は2つ

  1. zipしてGoogle driveに保存
  2. gitにプッシュ

1.zipしてGoogle driveに保存

node.jsでzipできるarchiverを入れる

yarn add archiver
const archiver = require("archiver");
const fs = require("fs");

const date = new Date();
//日付からファイル名を作成
const file_name = `${date.getFullYear()}${date.getMonth()}${date.getDate()}.zip`;

//ファイル
const output = fs.createWriteStream(`./archives/${file_name}.zip`);

//アーカイブ
const archive = archiver("zip", {
    zlib: { level: 5 } //圧縮レベル
});

//完了のコールバック
output.on("close", function() {
  var archive_size = archive.pointer();
  console.log(
    `complete! total size : ${archive_size} bytes(${config.upload_path})`
  );
});

//実行
archive.pipe(output);
archive.directory("./data", false);
archive.glob(`./data/**/*`);
archive.finalize();

ただこの後Google Driveにファイルを保存する方法を調べててちょっと面倒臭くなったのと、毎回丸ごと保存するのは容量食うし良くないなと、あとあまりサクッと感がないなと思って、この1番は却下。

2.gitにプッシュ

そもそもソースコードはbitbucketで管理しているので、新しいリポジトリ作ってそこに定期的にプッシュしていけば簡単なことに気づいた。保存されるのは差分だけだし、ロールバックも楽だし。

simple-gitを入れる

yarn add simple-git

./dataディレクトリの中に新しいリポジトリを作成。サブツリーでもOKだけど、.gitignoreしているディレクトリに普通に作ってしまったので、そのまま。

cd ./data
git init
git remote add origin xxx.git
git pull origin master

nodeからgitの操作をできるsimple-gitを入れる

yarn add simple-git

git_commit_and_push.js

const simpleGit = require("simple-git")("./data");
const git_commit_and_push = ()  =>{
  const date = new Date();
  const commit_log = `${date.getFullYear()}${date.getMonth()}${date.getDate()}`;
  simpleGit
    .add("./")
    .commit(`${commit_log}`)
    .push("origin", "master");
}
export module = { git_commit_and_push }

これだけ

node-cronとforeverで定期実行&永続化

永続化=forever、定期実行=node-cronを入れる

yarn global add forever
yarn add node-cron

commit_everyday.js

const cron = require("node-cron");
const { git_commit_and_push } from "./git_commit_and_push";
//毎日4時にコミット
cron.schedule("0 0 4 * * *", () => {
  git_commit_and_push();
});

foreverで永続化

forever start commit_everyday.js

次のイベントループで関数を実行するいくつかの方法

vue.jsだと、vue.nextTickでできる


this.$nextTick(()=>{
  ...
});

Javascriptでよく使われるのはsetTimeout


setTimeout(()=>{
  ...
},0)

Promiseでもできる


Promise.resolve().then(() => {
  ...
});

ちょっと違うけど、ReactだとsetStateで関数を実行することで、上記の代替になるかも


setState(()=>{
 ...
})

create-react-app でreact-styleguidist をつかってReactコンポーネントのスタイルガイドを作成する

先日スタートアップカフェコザで行ったセッション(コンポーネント指向UI開発で学ぶReact入門 沖縄フロントエンド塾 in スタートアップカフェコザ)で紹介したReactコンポーネントのスタイルガイドの作成を記載します。
ボタンのコンポーネントを作成してスタイルガイドで表示するまでの手順です。

プロジェクトの作成

プロジェクトを作成

create-react-app ui-react

ui-reactフォルダに移動
styleguidistとnode-sassを入れます

yarn add react-styleguidist

package.json

scriptsに追記


"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "styleguide": "styleguidist server"//これを追加
  }

ボタンのコンポーネントの作成

src/components/atoms/btn/
でフォルダを作成して、


Btn.jsx
Btn.scss
Btn.md

のファイルを作成

ボタンのjsx作成


import React from 'react';
import './Btn.scss';
export const Btn =(props)=>{
  return(
    <div 
      className='btn'
      onClick={(e)=>{this.props.handleClick(e)}}
    >
      {props.children}
    </div>
  )
}

ボタンのscss作成


@mixin btn {
  border-radius:4px;
  padding:4px;
  font-sie:12px;
  text-align:center;
  &:hover {
    cursor:pointer;
    font-weight:bold;
  }
}

.btn {
  @include btn;
}

ボタンのmd作成

このファイルにスタイルガイドに表示するものを記述
いろいろ設定できます(Documenting components)


```jsx
<Btn handleClick={}>.btn</Btn>
```

スタイルガイド作成


yarn styleguide

コンパイルすると、


yarn run v1.7.0
$ styleguidist server
Loading webpack config from:
D:\work\FrontendJ\react-styleguidist\node_modules\react-scripts\config\webpack.config.dev.js

You can now view your style guide in the browser:

  Local:            http://localhost:6060/
  On your network:  http://172.24.138.209:6060/

 DONE  Compiled successfully!

 
 


http://localhost:6060/

このurlを開くと表示されます。
 
 

 
 

気をつけること

  • 1つの.jsxに1つのコンポーネント

Algoliaでネストされた値をフィルタリングする方法

Algoliaでindexからネストされた値をもとにフィルタリングするには、

AlgoliaのダッシュボードにあるdisplayタブにあるFaceting項目のAttributes for facetingに下のようにフィルタリングしたい値を設定して、

※ダッシュボードの変更は、セーブしないと適用されないのでちゃんとセーブしましょう。セーブボタンは、右上あたりに出てると思う。( 多分 )

index.search({
    facetFilters: ” ここにダッシュボードで設定したキーをいれる”
},
(err,content) => {
    if(err) throw err;
    console.log( content );
});
のように、facetFilters:” 設定したキー”で、フィルタリングした値が取れる。

[IE][ES6] Assignment to read-only properties is not allowed in strict modeを回避

ReactでUIを動的に変化させる実装をしていてEdge/IEで、


Assignment to read-only properties is not allowed in strict mode

とエラった。

これは、


const cell = findDOMNode(this.refs.cell);
let _rect = cell.getBoundingClientRect();
_rect.y += 10;

みたいに、DOMのRectがread-onlyのものに代入するとでるから、


let _rect = cell.getBoundingClientRect();
let _rect2 = $.extend(true,{},_rect);
_rect2.y += 10;

って感じでディープコピーしてやる