OmniAICreator/Qiita-1.07M huggingface dataset:
#Stripe CLI  create customer / plan and product / example with jq command

```
customer=$(stripe customers create)
echo "$customer" | jq

customer_id=$(echo "$customer" | jq -r '.id')
echo "$customer_id"

# Create Plan and Product in both time
# https://stripe.com/docs/api/plans/create?lang=curl
# https://stripe.com/docs/billing/subscriptions/products-and-plans
plan=$(stripe plans create --interval='month' --currency='jpy' --amount='1000' --data="product[name]"="Gold special")
echo "$plan" | jq
```

```json
$ source ~/tmp/stripe.sh
{
  "id": "cus_GJECStm3dFN2WT",
  "object": "customer",
  "address": null,
  "balance": 0,
  "created": 1575619270,
  "currency": null,
  "default_source": null,
  "delinquent": false,
  "description": null,
  "discount": null,
  "email": null,
  "invoice_prefix": "E11C8A4A",
  "invoice_settings": {
    "custom_fields": null,
    "default_payment_method": null,
    "footer": null
  },
  "livemode": false,
  "metadata": {},
  "name": null,
  "phone": null,
  "preferred_locales": [],
  "shipping": null,
  "sources": {
    "object": "list",
    "data": [],
    "has_more": false,
    "total_count": 0,
    "url": "/v1/customers/cus_GJECStm3dFN2WT/sources"
  },
  "subscriptions": {
    "object": "list",
    "data": [],
    "has_more": false,
    "total_count": 0,
    "url": "/v1/customers/cus_GJECStm3dFN2WT/subscriptions"
  },
  "tax_exempt": "none",
  "tax_ids": {
    "object": "list",
    "data": [],
    "has_more": false,
    "total_count": 0,
    "url": "/v1/customers/cus_GJECStm3dFN2WT/tax_ids"
  },
  "tax_info": null,
  "tax_info_verification": null
}
cus_GJECStm3dFN2WT
{
  "id": "plan_GJEC5HQpDdCiRh",
  "object": "plan",
  "active": true,
  "aggregate_usage": null,
  "amount": 1000,
  "amount_decimal": "1000",
  "billing_scheme": "per_unit",
  "created": 1575619271,
  "currency": "jpy",
  "interval": "month",
  "interval_count": 1,
  "livemode": false,
  "metadata": {},
  "nickname": null,
  "product": "prod_GJECZk7rgYpkh0",
  "tiers": null,
  "tiers_mode": null,
  "transform_usage": null,
  "trial_period_days": null,
  "usage_type": "licensed"
}
```

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2815








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
プログラミング初心者の振り返り - 反省文を兼ねて

# はじめに
2019年、私ははれてプログラマーになりました。メインの使用言語はC#。そうは言っても他の言語はからっきしわからないのですけれど。
この記事は、プログラマーになってから私は何に困ったかをつらつらと記していくものです。これがプログラミング始めたての方々にも当てはまるかどうかはわからないですけれど。7, 8割は自分の振り返りとして、1割はQiita初投稿という趣旨のもと書く記事です。残りの1, 2割でお役に立てますかね...？

# 困りごと
## 言葉がわからない
「メソッド」って何？「プロパティ」って何？といった具合に、そもそも「オブジェクト指向」とは？さらに言うと「データ」とは？何か質問をし、答えを聞くにしても、こういった単語の意味がわからないがために答えてもらった内容の意味が結局わからないなんてことになってしまいました。何のための時間だったんだろう。意味を調べてからどこかのタイミングで再び聞くことに。

## 時間がかかる
私自身とにかく頭が固いのもあるんですが、ある処理を記述しようにも長いときは数時間単位で手が止まることがしばしば。その昔受験勉強の際には「あれこれ自分の頭で考えろ」と言われ、1つの問題に熟慮することは多かったのだけれど、プログラミングの世界においてそれは不適な手段な様子。確かにわからないものはわからないですし、そうなったら調べるなり聞くなりさっさとしましょうね。

## どうやって調べるの？どう聞くの？
止まったらさっさと調べにゃならん、さっさと聞かにゃならん。それは確かに私もそう思うのですが、問題は何を？どうやって？これがまた難解。「自分が何をわからないのかがわからない」この状態になることが多いこと多いこと。一言に「○○がわからないですぅ」と言ったところで「何がだよ」と返されるのが関の山。困りました、何を聞きましょう。これでまた時間が延びること延びること。

## スケジュール感
時間無制限で進められる作業というのは往々にして存在せず、「今自分が進めている作業はどれくらいで終わる？」と、いわゆる納期を定める必要があるのですが、何にどれだけ時間がかかるかの感覚がわからず、後から「やっぱりもう少し先に延ばしてください...」と言う羽目に。あるいは作業の中身にわからないことがあると手が止まり、後から「やっぱりもう少し先に延ばしてください...」と言う羽目に。

## こいつらが未だに解決できていない
私にとっては、もうこれに尽きる。

# 自分なりにやってみたこと
とはいえこれらに対して全くの無抵抗というわけでもなく、自分なりにやってみようとしたことはあります。本当にそれが意味をなしているのかどうかは...どうなんでしょう。

- 単語帳を作る。

「クラス」とか「プロパティ」とか、ものによっては単語の意味だけではなくサンプルソースコードで示してみたり。

```
 namespace oop	//＊1
 {
 	public class Cars()	//＊2
 	{
 		//＊3
 		string maker;
 		int emissions;
 		string color;
 	}
 }

＊1　名前空間
＊2　クラス名
＊3　プロパティ
（参考：初心者向けに徹底解説！オブジェクト指向とは？　URL:https://eng-entrance.com/what-oop）
```
- 時間を決める。

よく「15分考えてわからなかったら調べるなり聞くなりしましょうね」という話は耳/目にするので、そのあたりの意識を持つようにはしました。これはプログラミングに限らず、1作業についても30分やって5分休むといった形を取ってみたり。

- 「調べ方」、「質問の仕方」を調べる。

技術的な話題について行けるほどの力量がなくてもQiita漁りは結構楽しいです（仕事しろ？）。なぜなら「勉強法」であったり「方法論」的な位置付けの記事も多数上がっているから。「なるほどそういう考え方もあるのね」「やってやろうじゃねぇかこのヤロー！！！」そんな気持ちにさせられます。以下にそんな記事をちょっとご紹介。

　- プログラミングでよく使う英単語のまとめ【随時更新】（https://qiita.com/Ted-HM/items/7dde25dcffae4cdc7923）
　- 個人的に超絶為になったので新人エンジニアに勧めたい記事まとめ（https://qiita.com/shimajiri/items/501828dc8d589e214470）
　- [あるある]「詰まったら、すぐに質問してください」の克服法（https://qiita.com/yasuX/items/bca386bc47322f22072a）
　- プログラミングで一番難しいのは「見積もり」だと思う（https://qiita.com/yuno_miyako/items/8678cd542fbb7050e40e）
　- 新人プログラマに知っておいてもらいたい人類がオブジェクト指向を手に入れるまでの軌跡（https://qiita.com/hirokidaichi/items/591ad96ab12938878fe1）
　- 進捗がなかったらメンターが現れるATOM（https://qiita.com/iwamatsu0430/items/8e19995d3eedf1d6a823）

他にも探せば面白い記事があると思います。文章の書き方についても参考になりますし。

- 聞き方を変える

単に「○○がわからない」という聞き方をしても、結局その問題の所在がわからない、だから有効な回答を得ることができない。これを回避する一つの方法として、「自分はこうしたい」という自分なりの理想の状態を投げかけることは有効だと思います。コードを書くにはその目的や意思があるはず。それがないなら「そもそもその機能必要？」という問いかけによって解決するかもしれないですし、「こうしたいから、こうやってみたけど、こうなってダメ」と言葉にすることができれば原因の特定は確かにしやすいですね。単語の意味であったり自分が引っかかっているところについて言葉に表すことがある程度できるようになるのは、自分の中では大きいです。

- 菠薐草

ほうれん草ってこう書くんですね。言ってしまえば「できないものはできない。無理なものは無理」だと割り切ってしまい、それをちゃんと相手に伝える。これをしないとやっぱりダメですね。解決策というわけではないですけれど。

# まとめ
結局のところ、困っていたことと言えば「技術不足」というより「進め方」です。自分なりに対策を考えてこそいても、「あれやってみよう」、「これやってみよう」、「あ、これ参考になるな」で終わっちゃダメですよね。これらを自分のものにし、あるいはするに値するかを検討し、自分に必要な能力・仕事をしっかりと見極め、その上で実践をする。それができるようになれば私は多少ましになるんじゃないかな、と思いながら頑張っていこうと思います。
いずれは技術的に興味深いような内容も投稿できたり、それこそ初心者向けの記事も書けたらいいなって思います。
document.writeの動作について

## 概要
document.writeは非推奨扱いになっていますが、GTAで使用してあったので動作検証してみました。

## 検証手順
document.writeとinsertAdjacentElement(挿入位置を指定するため）でscriptタグをDOMに挿入する。
挿入されたJSの実行順序を確認する。

## HTML
```html:index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script>console.log('header!')</script>
</head>
<body>
    <script type="text/javascript" src="./js/first.js"></script>
    <script>
        console.log('after script');
    </script>
    <img src="../masuo.jpeg" alt="masuo-san">
</body>
</html>
```

読み込まれるfirst.jsからsecond.jsを読み込みます。

```javascript:first.js(insertAdjacentElement)
(() => {
    console.log('first');

    const second = document.createElement('script');
    second.id = 'second';
    second.src="./js/second.js";
    second.type = 'text/javascript';

    const first = document.getElementById('first');
    first.insertAdjacentElement('afterend', second);
})();

console.log('first out');
```

```javascript:first.js(document.write)
(() => {
    console.log('first');

    document.write('<script id="second" type="text/javascript" src="./js/second.js"></script>');
})();

console.log('first out');
```

```javascript:second.js(insertAdjacentElement)
(() => {
    console.log('second');

    const third = document.createElement('script');
    third.type = 'text/javascript';
    third.innerText = `console.log('third inline');`;

    const second = document.getElementById('second');
    second.insertAdjacentElement('afterend', third);
})();

console.log('second out');
```

```javascript:second.js(document.write)
(() => {
    console.log('second');

    document.write('<script id="third" type="text/javascript">console.log("third inline");</script>');
})();

console.log('second out');
```


## 結果
#### insertAdjacentElement

<img width="288" alt="Screen Shot 2019-12-06 at 10.08.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469184/77199735-0160-5b6d-9408-e2acebf3f6a8.png">

#### document.write
<img width="288" alt="Screen Shot 2019-12-06 at 10.10.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469184/1b85886c-f4b9-b8ce-c837-c7ca365f7a43.png">

## 考察
- JavaScriptファイルの読み込みは非同期になるので、特別な指定をしなければ読み込んだ時点で実行される。

- そのためinsertAdjacentElementは元々インラインで書かれていたScriptの後に実行されている。

- 一方でdocument.writeは挿入したscriptが即時実行されている　→　jsファイルの読み込み・実行までブロックしている


ご指摘等ありましたら、ご連絡下さい。
RailsにWebpackerでVue.jsを入れたら行う設定

環境: Rails 5.2/6.0、Webpacker 4.2、Vue.js 2.6

## コンパイラ入りのVue.jsを使う

.vueファイルの中のテンプレートではなく、Railsが出力したHTMLや`template:`で指定したHTMLをテンプレートとして使う場合は、コンパイラ（HTMLパーサ）入りのビルドを使う必要があります。

コンパイラ入りビルドを使わないと、ブラウザーでの実行時にHTMLをパースできなくなり、次のエラーが出ます。

```text
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
```

webpackの設定で、`environment.config.resolve.alias`を次のように指定すると、`import Vue from 'vue'` でコンパイラ入りのvue/dist/vue.esm.jsが使えます。

```javascript:config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')
const vue = require('./loaders/vue')

environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.loaders.prepend('vue', vue)
// Vue.js フル版（Compiler入り）
environment.config.resolve.alias = { 'vue$': 'vue/dist/vue.esm.js' }
module.exports = environment
```

この指定がないときは、`import Vue from 'vue'` はコンパイラなしのvue/dist/vue.runtime.esm.jsになります。.vueファイルの中のテンプレートだけ使う場合はそれでかまいません。

## IE11対策

詳しくは、[Rails+WebpackerでのIE11対策](https://qiita.com/kazutosato/items/9d12d9402dedbc2ac896)をご覧ください。

application.jsに次の2行を入れると、IE11が対応していない新しめのJavaScriptの機能が使えるようになります。この2つはWebpackerを入れれば入るので、yarn addしなくても使えます。

```javascript:app/javascript/packs/application.js
import "core-js";
import "regenerator-runtime/runtime";
```

Vue.jsはデフォルトでIE 11に対応しているので、Vue.jsの基本的な機能だけ使うならこの2つは要りません。IEが対応していないJavaScriptのメソッドや組み込みクラスを使うときは core-js、asyncとawaitを使うときは regenerator-runtime が必要です。

## Turbolinks対策

Turbolinksを使っている場合は[vue-turbolinks](https://github.com/jeffreyguenther/vue-turbolinks)を入れないと、ブラウザーの戻るボタンなどで動作がおかしくなります。

```
$ yarn add vue-turbolinks
```

```javascript:app/javascript/packs/application.js
import TurbolinksAdapter from 'vue-turbolinks';
Vue.use(TurbolinksAdapter);
```

## jQueryとBootstrapを使う

[Rails 6にjQueryとBootstrapを入れる](https://qiita.com/kazutosato/items/d47b7705ee545de4cb1a)で書きました。Webpackerで入れる方法と、assetsを使う方法があります。

## AxiosでCSRF対策用のトークンを設定

[Rails+AxiosでCSRF対策用のトークンを使う設定](https://qiita.com/kazutosato/items/0ce670272489cb647fb3) で書きました。AxiosのInterceptorsの機能を呼び出すコードを書いて、実行しておきます。
HTML5&CSSの構成要素について調べてみた。

HTML5&CSSの構成要素について調べてみた。

・HTML5宣言
&lt;!DOCTYPE html&gt;

・HTML開始と終了
&lt;html&gt;&lt;/html&gt;

・webページの設定内容
文字コードの設定やcssの読み込み設定,seo対策などの設定を行う。
&lt;head&gt;&lt;/head&gt;

・本文
&lt;body&gt;&lt;/body&gt;

body内にheaderやfooterを作るのはよく使われてるので入れてます。
&lt;header&gt;目次&lt;/header&gt;
main記事
&lt;footer&gt;お問い合わせ情報など。&lt;/footer&gt;

```index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="雛形">
<link href="css/main.css" rel="stylesheet" type="text/css" media="all">
<title>雛形HP</title>
</head>
<body>
<header>
目次
</header>
main記事
<footer>
お問い合わせ情報など。
</footer>
</body>
</html>
```


&lt;body&gt;要素に対して背景色、文字フォント、文字サイズを設定しています。

```css/main.css
body {
    background:#FFF;
    font-family:Verdana, "ＭＳ Ｐゴシック", sans-serif;
    font-size:80%;
}
```

ソースコードはこちらです。
https://github.com/CoffCookie/website_basic
Macのターミナルをおしゃれにする！【icebergテーマ】

みなさん、ターミナルをみるたび、
*<b>「なんか黒い画面嫌だなぁ〜なんとかならぬか」</b>*
などとお考えではありませんか？

そう、オシャンにできるんです、Macならね。

![スクリーンショット 2019-12-07 16.00.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/dbb229ae-dede-adc3-094f-a20381a41d0f.png)

文字やフォントがなんかオシャンになります。

*背景画像は気にしないでください...*

デフォルトだとこうなります。

![スクリーンショット 2019-12-07 16.03.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/7abbf0b6-c9c7-f759-ab6d-7c371ec79c12.png)


`環境`
MacOS Mojave 10.14.5

##公式からzipダウンロード

http://cocopon.github.io/iceberg.vim/


`Iceberg for macOS`からダウンロードする

##ターミナルに導入

![スクリーンショット 2019-12-07 16.06.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/0527a0a2-8773-cc15-7c9f-d2184fcf4eb5.png)

![スクリーンショット 2019-12-07 16.07.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/d7a5bc91-86f0-7ea8-cbce-8657789a2714.png)

読み込むから、先ほどのicebergを読み込み、デフォルトとして設定して終了。

##フォント

フォントについては、できればmenloかRictyをおすすめ

##背景

以前書きました。

https://qiita.com/drafts/da38aab503f576629211/edit
【AWS・Lambda】Python外部ライブラリ読み込み方法

# 概要
　AWS lambdaでは初期状態でpandasやnumpyなどの外部ライブラリを読み込むことはできません．読み込ませる方法は二つあって，一つ目はインストール済みのライブラリと実行ファイルをまるっとzipファイルにまとめてlambdaにアップロードする方法，二つ目はlambdaでLayerとして読み込ませる方法です．後者の方法がおすすめですが，本記事ではこれらの方法をコード管理の面と合わせてTipsとしてまとめました．

# 環境
MacOS Catalina
docker 導入済み
AWS CLI 導入済み

# はじめに
　lambda開発をブラウザ上で行うのはコード管理の面でよろしくないのでローカルで開発できるようにします．つまりgitHub管理できるようにローカルで作業を行いコードの変更を随時lambdaにアップロードするという形を取ります．
　ということで[docker-lambda](https://hub.docker.com/r/lambci/lambda/)を使用してデプロイ環境つくりました．(使用する場合はcloneしてください)
https://github.com/shoda888/local2lambda

まずdockerイメージが必要なので作ります．(初回のみ)
`$ docker build -t shoda888/local2pylambda .`

その後，予め作ってあるlambda関数名を`deploy.sh`のfuncname変数に与えてを以下を実行すれば自動でアップロードが行われます．
`$ sh deploy.sh`

`lambda_function.py`を書き換えて再度deploy.shして変更されているか確認してください．

# ライブラリをzipファイルにまとめてlambdaにアップロードする方法
　requirements.txtにライブラリ名を与えてdeploy.shするだけです(pandas, numpy, requests など)．作業ディレクトリ内にライブラリディレクトリが大量に生成されます．Pandasだと重すぎてアップロードに５分ほどかかってしまいます．lambda上で確認してみるとアップロード成功してますが，警告が出ます．

> Lambda 関数「*******」のデプロイパッケージが大きすぎて、インラインコード編集を有効にできません。ただし、関数を呼び出すことはできます。

<img width="1292" alt="スクリーンショット 2019-12-07 15.27.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234751/46f2b561-07d8-37ef-1ae3-64249a5e42d5.png">

一応これでも関数の呼び出しはできるようです．

# ライブラリをLayerにまとめる方法
　毎回ライブラリをzip化してアップロードするのがだるいので，requirements.txtは空にしておくのがお勧めです．ライブラリをLayerにまとめれば使い回し可能で便利かと思います．（ただし将来的にライブラリのバージョン管理がめんどくさいかもしれません）
　ライブラリをLayerにまとめる方法を確認しましょう．

## Pure Pythonなライブラリの場合
　純Pythonなライブラリの場合，たとえば画像のようにPython100%で構成されているライブラリはEC2でAmazonLinuxやubuntu環境を用意しなくてもお手持ちのMacでlayer用のzipファイルを簡単に作れます．
　<img width="1019" alt="purepython.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234751/d623a75f-8ae5-1ab5-fc48-33b27ab7e541.png">

例としてask_sdk_coreをインストールしたい場合， これだけです．(python3.7の例)

```shell
$ mkdir -p build/python/lib/python3.7/site-packages
$ pip3 install ask_sdk_core -t build/python/lib/python3.7/site-packages/
$ cd build
$ zip -r ask_sdk.zip .
```
生成されたask_sdk.zipをlayerに追加し，lambda内でlayerを適応させればライブラリが読み込まれます．
<img width="885" alt="スクリーンショット 2019-12-07 17.22.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234751/b0ac913a-2321-8e5e-db2b-fe46ddbbb6c7.png">
<img width="829" alt="layer.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234751/b49c90e7-fb87-58c9-7c82-110bb812ecdc.png">


## PureじゃないPythonのライブラリの場合
　numpyやpandasなどがそれにあたります．EC2でAmazonLinux環境を作りzip化するのが良いみたいです．(以前Layerをubuntuで作った気がしましたが，ubuntuでも可？？)

これに関しては既に多くの方がやられているので他の方の記事がとても参考になります．
[pandasをLambdaのLayerとして追加する]
(https://qiita.com/thimi0412/items/4c725ec2b26aef59e5bd)
[AWS Lambda Layersでライブラリを共通化](https://qiita.com/t_okkan/items/394a15577bd1aad46ec3)

以下はyoutubeですがubuntuを使用してLayerを作られてます．(わかりやすい)
[AWS Lambda Layers for Pandas library]
(https://youtu.be/zrrH9nbSPhQ)


## まとめ
　ローカルでコード管理しながらLambda開発が行えるようにした上で，外部ライブラリの読み込み方法をTipsとしてまとめました．
PHP開発環境のOSS（Laradock）に初めてのプルリクを出してマージされた話


こんにちは。yamotukiです。普段はM&Aクラウドという八丁堀のベンチャー企業でエンジニアやってます。
この記事は [PHP Advent Calendar 2019](https://qiita.com/advent-calendar/2019/php) の九日目の記事です。

# 概要

* OSSへのコミットをいつかやりたいと思っていた
* いつも使っていた`Laradock`というPHP開発環境作成するOSSで困ったことがあった
* プルリクエスト（以下PRと記述）してみた　https://github.com/laradock/laradock/pull/2342
* 初めてマージされた喜び

出したPRも大したことないですが、私個人の心理的には大きな一歩だったので、このアドベントカレンダーのお題に乗って記録しておきたいと思います。

# Laradock とは

公式： https://laradock.io/

> Laradock is a full PHP development environment based on Docker.

という公式の説明を引用しますが、**PHP開発環境だったら大体なんでも立ち上がる便利ツール**だと解釈してます。
一部では批判（※1）もありますが、お手軽に種々のPHP環境の開発環境を立ち上げたり、Dockerファイルを書くのに参考にするにはやっぱり便利なOSSです。

※1 色々入りすぎて初心者にはトラブルシューティングしずらいとか、立ち上げが遅いとか

新規プロダクトを立ち上げて1年半ほどの弊社でも、直近では自前のDockerファイルを書く方式に移行しましたが、1年ちょっとくらいお世話になりました。

# OSSにコミットしたいなあ

昔から「OSSにコミットしたい」という気持ちがありました。
なぜか？というのを改めて考えてみました。

* 世界のエンジニアに納得してもらってコードが取り込まれることは一人前のエンジニアの証だというイメージを勝手に持っており、そこに近づきたい
* 普段業務を進めている上でお世話になっているコードに恩返しをしたい（というか無料で使わせてもらっているので当たり前では、とも思う）
* 日々勉強している自分の英語は使えるものになってきているのだろうかというのを試したい


# プロファイラツールの tideways(xhprof) がうまく動かない

それできっかけをぼんやり探していました。
`tideways`というPHPのプロファイラ（コードの性能測定）ツールを使ってみることにしたのですが、導入に多少ハマりました。
`tideways`は昔PHP5系の時に有名だったが開発が止まってしまった`xhprof`のフォークされてPHP7対応されたものです。

tidewaysレポジトリ: https://github.com/tideways/php-xhprof-extension

### 何が問題だったか

Laradock ではフラグ立てるだけで割とすぐにインストール出来ることはわかったのですが、プロファイラ開始・終了の関数がうまく呼び出せない問題がありました。

具体的には、公式のREADMEに書いてある`tideways_xhprof_enable()`だと動かないけど `tideways_enable()`にすると動くというところ。


### 自分なら直せる？
ぼちぼち調べてみるとインストールされる`tideways`のバージョンの問題であることがわかりました。（v4系とv5系の挙動の違い）
試行錯誤の記録はこちら： https://qiita.com/yamotuki/items/d8112cc7dec2c04130b4

問題の理由も明快で、直すのもそこまで難しくなさそうでした。心理ハードルを超えるだけ。
というわけで初めてのOSSへのPRをチャレンジしてみることにしました。

### PRテンプレートの遊び心を感じる

実際にPRを作って出してみると、OSSってこういう感じなのか、というのが面白かったので共有しておきます。

以下はPRのテンプレートに書いてあるチェックリストです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144064/6a44d49d-9fec-f23b-32fe-802ebb6cc562.png)

どのガイドを読めばいいか明快に書いていて、ドキュメントもアップデートしてねと忘れそうなのを書いてある。

三つ目のチェックボックスがとてもいいですね。

# マージされた喜び

というわけでPR出していたのですが、2週間ほど放置されていました。
Laradock はある程度枯れた技術になりつつあり、コミュニティはあんまり活発じゃないみたいですね。
インフラ系なので動作確認が多少手間になるので確認が面倒というのもありそう。
（別件で Laravel/framework に出していたPRは数分でコメントがついて、PRがイケてなかったので数日でクローズされました。勢いの差を感じる）

結果として、しばらく放っておいたら特に議論もなくマージされて、自分のコードが世にでることになりました。
喜びを感じました。

# 次もやりたい

Laravel やその関連ライブラリのレポジトリにコミットしたい！
一番使っているフレームワークでお世話になっていますし、コミュニティは活発。
また、自分がPHPを実用レベルで読み書きできるようになってきたという証になると思ってます。
Jupyterrが起動しない？SyntaxError? ImportError? 

#やり方
pythonのバージョンを3.6以下にすると解決します。
念の為python3-aptも再インストールします。

#バージョンを下げる
**リンク変更**
`sudo ln -sf /usr/bin/python3.6以下を指定 /usr/bin/python3`

**python3-apt**
`sudo apt install --reinstall python3-apt`
Vue.jsのpug templateで途中で改行を入れたい場合

# 問題点
Vue.jsでtemplateはpugでも書くことができてタグを書くのは楽になりますが、styleなど複数のプロパティを設定したいときに改行できずに困ったときの対応方法です。

```vuejs
<template lang="pug">
//- どんどん横に伸びていく・・・
.component(
  :style="{ width: $data.width + 'px', height: $data.height + 'px' }"
)
</template>
```

# 解決方法
あんまり知られていないですが、pugは後ろに`\`を入れると改行してもコンパイル時には同じ行とみなしてくれるので、これを入れることで適切な場所に改行を入れることができます。

```vuejs
<template lang="pug">
//- \で改行を入れられる！
.component(
  :style="{\
    width: $data.width + 'px',\
    height: $data.height + 'px',\
  }"
)
</template>
```

# まとめ
pugの場合は`\`を入れることで途中で改行できて、classとかstyleのバインディング時にみやすくなるように適切に改行を入れることができました。
可読性が上がると思うので是非使ってみてください。
NestJS の機能を触って体験できるサンプルアプリケーションのご紹介

この記事は NestJS Advent Calendar 7 日目の記事です。6日目は @euxn23 による「NestJS アプリケーションをプロダクションレディにする」でした。

アドベントカレンダーもこれで一週間ですが、これまで概念的な API の例とテストだけで、実際にどんなアプリケーションが動くかのイメージをしづらかったと思います。

そこで本日は初週最後の記事ということで、1~6日目の内容を踏まえた簡単なサンプルアプリケーションを用意しました。

### NestJS JP BBS

今回のテーマは伝統、実装したものは BBS です。初日から書いてきた Item と削除パスワードの概念、Item に一対多でぶら下がるコメント、新規投稿とコメント追加がセットになった、馴染み深いサンプルアプリになります。

![スクリーンショット 2019-12-07 17.32.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75633/2dcc27b4-582e-d96d-b6f3-1528e41c60d8.png)

### サンプルレポジトリ

本日分についてもサンプルレポジトリを GitHub にて公開しています。fork してカスタマイズしてみてください。

https://github.com/nestjs-jp/advent-calendar-2019/tree/master/day07-nestjp-bbs

### アプリケーションの構成について

そろそろ実際に手を動かして完成品をイメージしてもらいながら進めてもらいたいので、NestJS が入る src のほかに、 frontend と database を用意しました。

以下の構成となります。

- src
  - NestJS のそのままの構成
  - Day1, Day2 のコードをベースに、ほとんど機能紹介の記事でのコードをつなぎ合わせただけの API 
- frontend
  - Nuxt.js + TypeScript で作られている簡単なサンプル
  - layout なし、 components なし、 assets なしの、本当の 1 ページ 1 コンポーネントのみのフロントエンド
  - フロントエンドに興味のある方は、コンポーネント分割やSPA化にも挑戦してみてください
- database
  - json-server
  - https://github.com/typicode/json-server

### アプリケーションの課題

この掲示板では、アプリケーションに必要な **多くの機能が実装されていません**。あくまでもこれまでに紹介した機能に絞った上で、 BBS が実装されています。

不足している機能は、例えば以下のようなものです。

- フロントエンドのバリデーション
  - フロントエンドは required フラグしかありません。
  - NestJS の DTO と Validation、Exception Filter を利用してバックエンドは保護されています
- データベース永続化
  - 現状 TypeORM とその連携を行っていないため、json-server を利用しています。
  - これは非常にシンプルな REST API インターフェースを備えたオンメモリデータストアです。
- ページネーション
  - NestJS にはオフィシャルのエコシステムとして TypeORM と連携した Pagination がありますが、利用していません。
  - 是非実装してみてください
  - https://github.com/nestjsx/nestjs-typeorm-paginate
- CORS 設定が安全ではありません
  - 現状のサービスの設定どおりの enableCors で適用されています
  - 本来であれば、想定するフロントエンドからのリクエストのみを許可するべきです。
- SPA ではありません
  - トラディショナル国産 BBS らしく、SPAとして実装されていません。
  - 折角 SPA / API なので、効率的なデータ取得ができるような API 設計へと書き換えてみても良さそうです。
- 認証がありません
  - 昔ながらの4桁の削除パスワード以外での認証がありません。
  - 今後 Advent Calendar にて AuthGuard を紹介いたしますので、キャッチアップ後、ユーザー認証を実装してみると良さそうです。

これまでも紹介したとおり、 NestJS は Web アプリケーションサーバーに特化した機能を提供しています。

そのため、TypeORM による RDB との連携や NoSQL ストアとの連携、外部認証基盤と連携する AuthGuard と Passport の基本、そして NestJS がオフィシャルに提供しているエコシステムを利用することによって、はじめて多機能かつ実装的なアプリケーション・サーバーを構築することが可能となります。

アドベントカレンダーの進展に合わせてこのサンプルは適宜更新されますので、ぜひアドベントカレンダーで、公式ドキュメントで、 NestJS を活用してより効果的なアプリケーションサーバー開発を学習していただけますと幸いです。

### 作るものがない人へ

もし NestJS のアドベントカレンダーを見ているものの、作るものがないというかた。ぜひこのサンプルを一般公開できるところまで持っていくように改修を加えてみてください。

以下の 3 つの手順を踏むことで、ひとまずはアプリケーションとして提供可能になるはずです。

1. TypeORM と連携してデータを外部に永続化し、 Items と Comments の Service の依存関係を整理する
1. ページネーションを実装し、データの取得を適切なサイズにする
1. フロントエンドで状態管理を行い、エラーハンドリングを行う

### 明日からの NestJS Advent Calendar について

一週間目の基本概念の説明を明け、明日からは本日までの内容を前提とした上で、実際に開発をするにあたって必須となる知識を機能やユースケース単位で紹介していきます。

これまでのような Step-by-Step に近い紹介からは外れていきますが、全てをお読みいただくことで全体を通じて、Productionで開発できるだけの知識をご紹介していきます。

明日からもよろしくお願いいたします。
Maplat Coreでマーカーを静的に表示する

Maplat Advent Calendar 6日目は、Maplat Coreでマーカーを静的に表示する方法です。
今日の動くものはここで確認できます。 => [CodeSandBox Maplat Advent Calendar day 6](https://codesandbox.io/s/maplat-advent-calendar-day6-ewdi1)

今日の実装は特にボタンなどいらないので、[4日目のコード](https://codesandbox.io/s/maplat-advent-calendar-day4-wpkuz)をベースに改造しましょう。

まず、POIを定義するファイルを外出しで準備しましょう。

```pois/poi.json
{
  "main": {
    "pois": [
      {
        "id": "castle",
        "lat": 36.243881,
        "lng": 139.543517,
        "name": "館林城"
      }
    ]
  }
}
```
これの意味ですが、`main`というIDのレイヤーの配下に、POI-IDが`castle`、緯度経度`36.243881,139.543517`、POI名が`館林城`のPOI1つが配置されることになります。
レイヤーIDの`main`は第1POIレイヤーのデフォルトであり、複数レイヤーを使わない場合は以下のように省略することもできます。

```pois/poi.json(レイヤー設定省略版)
[
  {
    "id": "castle",
    "lat": 36.243881,
    "lng": 139.543517,
    "name": "館林城"
  }
]
```

いずれにせよ上記のように`pois/poi.json`を設置した後に、アプリ設定ファイルを以下のように書き換えます。

```apps/maplat_ac_day6.json
{
  "home_position": [139.5321, 36.249302],
  "default_zoom": 17,
  "start_from": "tatebayashi_ojozu",
  "sources": [
    {
      "mapID": "tatebayashi_ojozu",
      "setting_file": "https://s.maplat.jp/r/tatebayashimap/maps/tatebayashi_ojozu.json"
    },
    "osm"
  ],
  "pois": "pois/pois.json"
}
```

変更箇所は`pois`で外部POI定義ファイルを指定しているところですが、このPOI定義、外部定義ファイルにしなくとも、アプリ設定ファイルの中で直接定義することも可能です。

```apps/maplat_ac_day6.json(POI設定直接指定版)
{
  "home_position": [139.5321, 36.249302],
  "default_zoom": 17,
  "start_from": "tatebayashi_ojozu",
  "sources": [
    {
      "mapID": "tatebayashi_ojozu",
      "setting_file": "https://s.maplat.jp/r/tatebayashimap/maps/tatebayashi_ojozu.json"
    },
    "osm"
  ],
  "pois": {
    "main": {
      "pois": [
        {
          "id": "castle",
          "lat": 36.243881,
          "lng": 139.543517,
          "name": "館林城"
        }
      ]
    }
  }
}
```

どちらでも動作するので、どちらでも問題ありません。

これらの設定でPOIピンは表示されるのですが、どうせならPOIピンをクリックした際のイベント取得なども加えてみましょう。
```app.js```をこんな感じにします。

```app.js
import "@maplat/core/dist/maplat_core.css";
import { MaplatApp } from "@maplat/core";

var option = {
  appid: "maplat_ac_day6"
};

var app = new MaplatApp(option);
app.waitReady.then(function() {
  app.addEventListener('clickMarker', function(evt) {
    app.selectMarker(evt.detail.namespace_id);
    console.log(evt.detail);
  });
  app.addEventListener('clickMap', function (evt) {
    app.unselectMarker();
    console.log(evt.detail);
  });
});
```

`app`に`clickMarker`のイベントリスナーを加えて、その中で`app.selectMarker`を使い、クリックされたPOIピンを選択状態（ピン画像が選択状態画像になり、ピンが地図中心に移動する）にしています。
さらにクリックされたPOIの情報も`console.log`で表示しています。
これだけではクリックされたピンは選択状態から戻れないので、`app`に`clickMap`のイベントリスナーを加えて、POI以外の地図面がクリックされた際には、`app.unselectMarker`を使い、全てのPOIの選択状態をクリアしています。
さらに、クリックされた地図上の場所情報も`console.log`で表示しています。

これを実行してみると、こんな感じになります。

![タイトルなし２.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10108/681549d5-4339-5e96-23ed-7d301ac380d6.gif)

明日は、POIを動的に追加する方法について記事に書きます。
強化学習３１　colaboratory+OpenAI+chainerRL

強化学習２８が終了していることが前提です。
DQNとその派生系についてです。
DQNとDoubleDQNは、CartPole、Pendulum、MountainCar、Acrobotの４つで可能です。
reinforceは、CartPoleのみです。
iqnは、CartPole、MountainCar、Acrobotが可能です。
categorical dqn は、CartPoleのみ可能です。
A2C、A3C、Acerは全部に対応しています。

それぞれchokozainerに入れておきました。
使い方は、
強化学習２８を参照してください。
https://qiita.com/chokozainer/items/38592c3c81df5ec4399c
所有権を貫通する銃弾について

※この記事は、[VCI Advent Calendar 2019][1] の8日目の記事です。

※2021年12月12日：参考資料、画像、サンプル更新、新しいVCIメッセージ機能に変更

所有権を無視してものをぶっ飛ばす銃弾について話します

# 事前準備

## VCIの基本作成について学ぶ

説明はこっち：

https://virtualcast.jp/wiki/vci/beginner

# 作り方

## GameObject

![GameObject](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542363/1a8fc9c8-7ed6-c465-7e3c-96413cfeae72.png)

Gun：掴めるを設定するsubitem  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542363/3db76877-f29c-dea1-a468-2307f6f66af1.png)

GunModel：銃のモデル + コライダー、物理衝突しないように Is Trigger にする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542363/970093ee-b9b6-9310-0418-8ab82dbffe02.png)

BulletOut：銃口の座標情報取得用の GameObject
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542363/2b656702-f380-75b5-5a59-121e352b6362.png)

Bullet：Rigidbody だけの GameObject、VCI Sub Item入れないです、地面下に設置する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542363/9ea032b5-07d9-2747-2d44-9e13cc98e218.png)

BulletModel：銃弾のモデル + コライダー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542363/f6ecff0c-4ac4-b6b5-06a1-7ae5c2b6c04b.png)

## スクリプト

定義宣言

```lua:main.lua
---銃口
local ShootPoint = vci.assets.GetTransform('ShootPoint')
---銃弾
local Bullet = vci.assets.GetTransform('Bullet')
```

メッセージ関数用意

```lua:main.lua
---射撃メッセージ処理(全員に処理)、同じVCIや別VCIのメッセージ名前が被るを防ぐ為にメッセージ名前にInstanceId入れます
vci.message.On('GUN_SHOT' .. vci.assets.GetInstanceId(), function (sender, name, message)
    ---銃弾が銃口に移動
    Bullet.SetPosition(ShootPoint.GetPosition())
    ---銃弾の速度を消す
    Bullet.SetVelocity(Vector3.zero)
    Bullet.SetAngularVelocity(Vector3.zero)
    ---銃弾を銃口のz軸方向に飛ばす
    Bullet.AddForce(ShootPoint.GetForward() * 1500)
end)
```

銃をグリップするとメッセージを送信

```lua:main.lua
---[SubItemの所有権&Use状態]アイテムをグラッブしてグリップボタンを押すと呼ばれる。
---@param use string @押されたアイテムのSubItem名
function onUse(use)
    ---SubItem名'Gun'をuseしたらメッセージ全員に送信
    if use == 'Gun' then
        vci.message.Emit('GUN_SHOT' .. vci.assets.GetInstanceId(), true)
    end
end
```

# 原理説明

## subitemの所有権と物理計算

https://virtualcast.jp/wiki/vci/component/sdk/subitem/owned

つまり

SubItem の所有権持つ人：SubItem の物理計算を担当する  
SubItem の所有権持っていない人：ネットワークから受信した物理計算の結果を見るだけ

それで SubItem の銃弾にするとこうなる

銃弾の所有権持つ人：ぶっ飛ばしたい SubItem の所有権持ってないからぶっ飛すの物理計算はできない、弾は壁に当たったようにはじかれる  
ぶっ飛ばしたい SubItem の所有権持っ人：弾は位置を"再生"するだけ

# 解決策

銃弾の SubItem を抜いて所有権と同期から解放する！！

そしてメッセージでみんなのバーチャルキャストにいる銃弾を同じ位置、同じ方向、同じ速度で飛ばす、これでぶっ飛ばしたい SubItem の所有権持っ人はぶっ飛す物理処理ができる

# 欠点

1. 銃弾は同期から解放したから位置がずれる可能性がある、特に何がぶつけた後  
でもみんな同じもの当たれば問題ない
2. ~~同じVCIならメッセージがかぶる~~  
最新版のバーチャルキャストで追加されたVCI関数`vci.assets.GetInstanceId()`があります  
この関数使えばVCIのInstanceIdが取れます、部屋内のVCIが全部違うIDがあります、同じVCIが複数あっても違うです
これをメッセージの名前に入れることで自分以外のVCIからメッセージ受け取ること防げます

# 最後までお読だあなたに

この記事のサンプルVCI「所有権貫通銃」限定公開取り込みURLです、ありがとうございました。

https://seed.online/products/72feacd94850b715cac55b03491d3966e58e1eede58a5aa4d42455f23da5eee4

[1]:https://qiita.com/advent-calendar/2019/vci 'VCI Advent Calendar 2019'
a Tip for HTML / liタグ内のaタグの領域が広がらない時の対応

## 問題： liタグ内のaタグの領域が広がらない
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342307/0f22b13c-d7a6-6aeb-99d5-fa2327f95d24.png)


```html
<body style="margin: 2rem;">
    <ul style="position: relative; display: flex; text-align: center; justify-content: space-around; list-style: none;">
        <li style="flex: 1 1 30%;"><a style="background: chartreuse; width: 100%" href="#">a</a></li>
        <li style="flex: 1 1 30%;"><a style="background: chartreuse;  width: 100%" href="#">a</a></li>
    </ul>
</body>

```

## 対応: li に position:relative を追加、top: 0;left:0;width: 90%;height: 100%;display: block;をaに追加

```html
<body style="margin: 2rem;">
        <ul style="position: relative; display: flex; text-align: center; justify-content: space-around; list-style: none;">
            <li style="flex: 1 1 30%;position: relative;"><a style="background: chartreuse; top: 0;left:0;width: 90%;height: 100%;display: block; " href="#">a</a></li>
            <li style="flex: 1 1 30%;position: relative;"><a style="background: chartreuse; top: 0;left:0;width: 90%;height: 100%;display: block;" href="#">a</a></li>
            <!--width:100%だと描画されない <li style="flex: 1 1 30%;position: relative;"><a style="background: chartreuse; top: 0;left:0;width: 100%;height: 100%;display: block;" href="#">a</a></li> -->
            <!--width:100%だと描画されない <li style="flex: 1 1 30%;position: relative;"><a style="background: chartreuse; top: 0;left:0;width: 100%;height: 100%;display: block;" href="#">a</a></li> -->

        </ul>
</body>

```
この時**aタグのwidth:100%だと描画されないので、90%にしました。**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342307/3aa062ff-c400-e009-55bb-753fd3faa38a.png)


これでliタグ内のaタグの領域が広がりました。
以上です。
/dev/nullというブラックホール

この記事は[tut Advent calendar2019](https://adventar.org/calendars/4174)の記事 ~~にしました~~です。
#あらゆる出力のブラックホール
linuxには`/dev/null`というブラックホールのようなファイルが存在しています。コマンドの出力リダイレクト先として指定すると、そこに出力されたデータは消えてなくなります。
また、入力リダイレクトとして使用すれば、何も帰ってくることはありません。

恐るべし。

```bash
qiita:~$ ls /dev/null
/dev/null
qiita:~$ cat /dev/null
qiita:~$ cat /bin/cat > /dev/null
qiita:~$ cat /dev/null
qiita:~$ 
```
配列をオブジェクトに一発で変換する方法

# 始めに
JSはmapだのfilterだのあって、forループを回さずとも配列に一括操作ができて非常に良いのですが、オブジェクトに対してはそういうのが無くてもどかしく感じることがあります。
例えば以下のような配列からオブジェクトに変換する場合です。

```javascript:配列からオブジェクトに変換
const items = [
  { key: 'a', value: 1 },
  { key: 'b', value: 2 },
  { key: 'c', value: 3 },
];
 
const obj = {}; // できればこういう事前に宣言してから代入みたいなことを書きたくない
items.forEach((item) => {
  obj[item.key] = item.value;
});
```

# 配列からオブジェクトに一発で変換する方法
少しだけ難しいですが、`Object.assign`と配列の展開を使うと上手くいきます。
※Object.assignはIE非対応なので、IEも使う場合はlodashの関数を使うといいと思います。

```javascript:配列からオブジェクトに一発で変換する
const items = [
  { key: 'a', value: 1 },
  { key: 'b', value: 2 },
  { key: 'c', value: 3 },
];
 
// 配列からkeyが1つのオブジェクトに変換し、
// Object.assignでオブジェクトのkey-valueデータを全部まとめる
const obj = Object.assign({}, ...items.map((item) => ({
  //[item.key]: item.value,  ←なぜか表示されないのでコメントアウトで書きます＞＜
  [item.key]: item.value,
})));

/*
[
  { a: 1 },
  { b: 2 },
  { c: 3 },
]
という一つ一つのkey-valueを1つにまとめるという感じです。畳み込むというイメージでしょうか。
 */
```

# 終わりに
上記のやり方によって空オブジェクトの生成はされず直接目的のオブジェクトを生成して代入することができました。
ちょっと難しいですが、これをイディオムとして使っていくとコードがスッキリしていくと思うので参考にしていただけると幸いです。
TJBot持ってないので）ダイソーで自作

# TJBot持ってないので）ダイソーで自作
本当は、はじめてNode-REDを触ったお話です。

## 前提：TJBotって何？
IBM Watsonを利用・学習するために段ボールロボットをDIYするためのプロジェクト
> https://qiita.com/ssakaigawa/items/3e7ee0f2de421a3d9a39

## TJBotって何ができるの？
- LEDを光らせる
- カメラで画像認識
- 音声合成で話す
- 翻訳する

## TJBotを構成する部品
|部位|本物TJBot|自作ロボット|
|:-----------|:------------|:------------|
|体|段ボール|何かの箱とタッパー|
|目|カメラ|カメラ|
|口|スピーカー|スピーカー|
|耳|マイク|マイク|
|感情|カラーLED|カラーLED|
|表現|サーボモータSG90|サーボモータSG90|
|知能|ラズパイ|ラズパイ|
|知能|Node-RED|Node-RED（ここ大事）|

## 出来る事と構成部品が一緒なら言い切っちゃえ
期待してた皆さん、ごめんなさい。みため　［●_●］┛　こんなんでなくて。
でも、今回のためにNode-REDを初めて追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189936/793c5a14-5c75-cf62-4188-d2173a1649bf.png)

## ダイソーで自作の過程はこれ↓
ダイソーで買った何かの箱とタッパー。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189936/17f39e3f-d0b7-8e39-e853-d60a0f3c6de1.png)

## さて、メインのNode-REDをインストールしよう！
っと、あちこちググってみたところ、ラズパイにデフォルトでインストールされてるのね、そういえば。すげー。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189936/ae1dc1be-0172-d7ca-24f7-7bbc1033fc7f.png)

## 使い方は Node-RED日本ユーザ会 のチュートリアル参照

> Node-RED 日本ユーザ会 > はじめてのフロー
> https://nodered.jp/docs/tutorials/first-flow

一定間隔でWEBサイトからCSVデータを取得してWEBブラウザに表示させる例。ふむふむ。およそ30分で使い方の段取りが分かった。部品(ノード)も楽しそうなのが揃っているので、色んなことができるのですね、きっと。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189936/cb2f914d-3f34-2be9-19b6-53dfa0ef9570.png)

## TJBotらしくLEDをチカチカやってみよ。
トリガーは2秒おきに、LED出力はどれだろう。出力部品(ノード)の、シリアルかなぁ、ちょっと違いそう。おおっ、ラズパイ専用の部品(ノード)があるじゃないですか。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189936/98727eb8-12bb-acf5-d8cd-af1714c222c4.png)

## 赤色LEDチカチカ
Injectトリガーはマウスでポチポチすると信号[0]か[1]が出力されて、ラズパイのGPIO番号の出力レベルを[0,1]切り替えます。点灯したよー。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189936/5dd6430e-5afc-ee56-4f98-baffd6b78a20.png)

## 三色Lチカ
今度は 1秒おき のディレイを割り込ませて、1秒おきに赤→青→緑を点灯します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189936/ce3a3887-742b-362c-0eb9-2a7dc2f200d4.png)

## 最後に
Node-RED面白いかも。cronやらservice使わなくても、ラズパイ起動時の自動実行とかできるみたいなので使ってみようかなー。

この記事は [TJBot Advent Calendar 2019](https://qiita.com/advent-calendar/2019/tjbot) に空きがあったので急遽制作しました。
Laravel Faker で 日付ダミーデータ間の整合性を取る


## $fakerでdateTimeのダミーデータの整合性を取りたい

```./database/factory/PlanFactory.php
use Faker\Generator as Faker;

$factory->define(\App\Plan::class, function (Faker $faker) {
    return [
        //
        [
            'start_datetime'=>$faker->dateTimeBetween('1day', '1year')->format('Y-m-d H:i'),
            'end_datetime'=> $faker->dateTimeBetween('1day', '1year')->format('Y-m-d H:i'),
        ]
    ];
});

```
ダミーデータでstart_at とend_atの値がランダムになってしまうためend_at はstart_at の1～2時間後に値を設定したい。

## Faker dateTimeBetweenの戻り値はDatetime型

```vendor\fzaninotto\faker\src\Faker\Provider\DateTime.php
    /**
     * Get a DateTime object based on a random date between two given dates.
     * Accepts date strings that can be recognized by strtotime().
     *
     * @param \DateTime|string $startDate Defaults to 30 years ago
     * @param \DateTime|string $endDate   Defaults to "now"
     * @param string|null $timezone time zone in which the date time should be set, default to DateTime::$defaultTimezone, if set, otherwise the result of `date_default_timezone_get`
     * @example DateTime('1999-02-02 11:42:52')
     * @return \DateTime
     * @see http://php.net/manual/en/timezones.php
     * @see http://php.net/manual/en/function.date-default-timezone-get.php
     */
    public static function dateTimeBetween($startDate = '-30 years', $endDate = 'now', $timezone = null)
    {
        $startTimestamp = $startDate instanceof \DateTime ? $startDate->getTimestamp() : strtotime($startDate);
        $endTimestamp = static::getMaxTimestamp($endDate);

        if ($startTimestamp > $endTimestamp) {
            throw new \InvalidArgumentException('Start date must be anterior to end date.');
        }

        $timestamp = mt_rand($startTimestamp, $endTimestamp);

        return static::setTimezone(
            new \DateTime('@' . $timestamp),
            $timezone
        );
    }

```


なので、**日付を一度$fakerで作成し、メモリに持ち、意図する日付に修正するように変更しました。**

```php
use Faker\Generator as Faker;

$factory->define(\App\Plan::class, function (Faker $faker) {
    $scheduled_date = $faker->dateTimeBetween('+1day', '+1year');
    
    return [
        'start_datetime'=>$scheduled_date->format('Y-m-d H:i:s'),
        'end_datetime'=> $scheduled_date->modify('+1hour')->format('Y-m-d H:i:s'),
        'remind_at'=>$scheduled_date->modify('-1day')->format('Y-m-d H:i:s'),
    ];
});
```
これで faker で作る日付データの整合性が取れました。

以上です。
一緒にbashの標準入出力を理解して、シェルスクリプトを書こうよ。

はいどうも、タイトルは語呂合わせ以外は完璧だと思ってますはい。標準入出力はシェルスクリプトにとってとても大事なものですが、ここではシェルスクリプトの記法については触れません(タイトル詐欺)
#標準入出力とは
みなさん聞き覚えがありますでしょうこの標準入出力という単語。Linuxでは何かコマンドが実行されると自動的に入出力のための3つのチャンネルがひらかれます。
それが下の3つのものです。
* **標準入力(stdin)**
* **標準出力(stdout)**
* **標準エラー出力(stderr)**
それぞれが名前通りの入出力に対応しています。基本的には、標準入力にキーボード。標準出力と標準エラー出力にディスプレイがなっていると思います。
#リダレクトしよう
さっきの**標準入出力先を変更する機能のことをリダイレクト**といいます。標準出力先をファイルにリダイレクトしたりは、よくするんじゃないかなぁと思います。
##標準入力のリダイレクト
例えば`cat`コマンドを引数なしで実行した場合、コマンドラインはキーボードからの入力待ち状態になります。そこで、引数なしの`cat`コマンドに適当なファイルを入力リダイレクトしてあげると、次のようになります。ちなみに入力リダイレクトには**<**という記号を使います。

```bash
qiita:~/qiita$ vim ore.txt
qiita:~/qiita$ cat < ./ore.txt
私は天才だ。誰にそう言われたわけでも、結果が証明したわけでもないが、私にはわかる。なぜなら私は私だからだ(意味不明)
qiita:~/qiita$ 
```
こんな感じです。`cat`コマンドの場合は引数にファイルを指定しても同じ結果になります。
##標準出力のリダイレクト
今回も簡単楽ちん`cat`コマンドを使って出力リダイレクトの例を示していきます。

```bash
qiita:~/qiita$ cat ./ore.txt > watashi.txt
qiita:~/qiita$ cat ./watashi.txt 
私は天才だ。誰にそう言われたわけでも、結果が証明したわけでもないが、私にはわかる。なぜなら私は私だからだ(意味不明)
qiita@pumpkin:~/qiita$ 
```
先程の`ore.txt`を`cat`の引数にして、出力リダイレクトで`watashi.txt`を指定しています。確認してみると、しっかり`ore.txt`の内容が`watashi.txt`に出力されています。

ちなみに出力リダイレクト先のファイルは、存在していれば上書き、存在しなくても自動生成されます。`>>`←のようにリダイレクト記号を重ねて2つ使うことで末尾に追記に変更できます。
##エラー標準出力
最後の最後、標準エラー出力は標準出力とは別のチャンネルなので、標準出力先をファイルに変更していても、エラー出力はディスプレイに表示されてしまします。

```bash
qiita@pumpkin:~/qiita$ cat < nainai.txt > watashi.txt
bash: nainai.txt: そのようなファイルやディレクトリはありません
qiita@pumpkin:~/qiita$ 
```
ここで、標準エラー出力には`2>`という記号を使います。

```bash
qiita@pumpkin:~/qiita$ cat ./nainai.txt 2> error.txt
qiita@pumpkin:~/qiita$ cat ./error.txt 
cat: ./nainai.txt: そのようなファイルやディレクトリはありません
qiita@pumpkin:~/qiita$ 
```
こんな感じです。確かにerror.txtにエラー内容がリダイレクトされていますね。

#あとがき
標準入出力についてはまだまだ内容があるのですが、この記事の更新に期待。きっとやるさ。
ワイルドカード的な置換処理①区切り文字間の文字

Power Queryを使っていて、ワイルドカードがあったらな、と思うことがあります。
ワイルドカードそのものは実現できないものの、白紙の状態から都度関数を書くのも辛いなと思っていて、その材料を書き留めておこうと思います。

###お題
指定の区切り文字に囲われた中身を、一律に別の値に置換するというもの。
例えば、
(x)(y)(z)(x)
のような文字列を、
(a)(a)(a)(a)
というように。
Excelの置換でやると、こんな感じのこと。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/370992/482fcdad-0dc7-5998-2825-91c9edd81737.png)

###コード
関数化しています。

```pq:fx_replaceBetweenDelimiter
(Source as text,startDelimiter as text,endDelimiter as text,new as text)=>
let
    Lists =List.Generate(
                ()=>[Txt=Source,Start=0,Cnt=0,Between=null],
                each List.AllTrue({[Start]<>-1,[Between]<>""}),
                each [Between =Text.BetweenDelimiters(Source,startDelimiter,endDelimiter,[Cnt],0),
                      SubTxt  =startDelimiter & Between & endDelimiter,
                      Start   =Text.PositionOf([Txt],SubTxt),
                      NewTxt  =startDelimiter & new & endDelimiter,
                      Txt     =Text.ReplaceRange([Txt],Start,Text.Length(SubTxt),NewTxt),
                      Cnt     =[Cnt]+1
                     ],
                each [Txt]
            )
in
    List.Last(Lists)
```

###使用例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/370992/36b5fd60-7809-e51e-9fa7-e6250e9e48a5.png)

###感想
改めて、Excel、Wordの置換、ワイルドカードの偉大さを実感。
ただ、Power Queryの処理中にテーブルとかに出して、置換して再読み込みというのも嫌だなと思っていて、今にいたります。
#Stripe CLI のコマンド扱えるリソースの一覧を確認する ( stripe resources help ) 

# こうだ

発行できるイベントの一覧に近いのだろうか？
イベントという言い方は違うのかもしれない

```
$ stripe resources help
Available commands:
  3d_secure
  account_links
  accounts
  apple_pay_domains
  application_fees
  balance
  balance_transactions
  bank_accounts
  capabilities
  cards
  charges
  checkout
  country_specs
  coupons
  credit_notes
  customer_balance_transactions
  customers
  disputes
  ephemeral_keys
  events
  exchange_rates
  external_accounts
  fee_refunds
  file_links
  files
  invoiceitems
  invoices
  issuing
  line_items
  login_links
  mandates
  order_returns
  orders
  payment_intents
  payment_methods
  payment_sources
  payouts
  persons
  plans
  products
  radar
  refunds
  reporting
  reviews
  scheduled_query_runs
  setup_intents
  skus
  sources
  subscription_items
  subscription_schedules
  subscriptions
  tax_ids
  tax_rates
  terminal
  tokens
  topups
  transfer_reversals
  transfers
  usage_records
  webhook_endpoints

Use "stripe [command] --help" for more information about a command.

```

# Stripe は親切なので

リソース名を指定してコマンドを叩くと、いろいろ教えてくれる

```
$ stripe payment_intents
Usage:
  stripe payment_intents <operation> [parameters...]

Available Operations:
  cancel
  capture
  confirm
  create
  list
  retrieve
  update

Flags:
  -h, --help   help for payment_intents

Global Flags:
      --api-key string        Your API key to use for the command
      --color string          turn on/off color output (on, off, auto)
      --config string         config file (default is $HOME/.config/stripe/config.toml)
      --device-name string    device name
      --log-level string      log level (debug, info, warn, error) (default "info")
  -p, --project-name string   the project name to read from for config (default "default")

Use "stripe payment_intents [command] --help" for more information about a command.
```

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2814








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
TypeScript利用時のstyled-componentsの拡張方法について

styled-componentsの利用時に拡張がうまくいかなったのが解決できたので備忘録です

## 失敗するコード

- 拡張したいコンポーネントを用意します
- このコンポーネントは外部からの拡張に失敗します

```typescript
import React from 'react';
import styled from 'styled-components';

type Props = {
  children: string;
};

const Component = styled.span``;

const Text: React.FC<Props> = (props) => {
  return (
    <Component>{props.children}</Component>
  );
}

export default Text;
```

- このコンポーネントの拡張に失敗するコード(実際には失敗していない)

```typescript
const TextExtended = styled(Text)`
  color: #137a7f;
`;
```

## TextExtendedの内容を確認する

- TextExtendedをJSON.stringifyで出力してみます
    - componentStyleというプロパティにcolorの指定があるのがわかります

```json
{
  "displayName": "Styled(Text)",
  "attrs": [],
  "componentStyle": {
    "rules": [
      "\n  color: #137a7f;\n"
    ],
    "isStatic": false,
    "componentId": "sc-EHOje",
    "lastClassName": "biMEjp"
  },
  "foldedComponentIds": [],
  "styledComponentId": "sc-EHOje"
}
```

- ここでlastClassNameというプロパティに着目します
    - ChromeのデベロッパーツールでTextコンポーネントの出力結果の要素にlastClassNameを追加すると無事に拡張したはずのスタイルが適用されることがわかります
- 上記の検証からlastClassNameをTextコンポーネントのクラスに追加できればよいことがわかります
- 次にlastClassNameを毎回取り出すのは現実的ではないので、Textコンポーネントが受け取ったpropsを確認します
    - classNameを受け取ってくれていればいいなという淡い期待
- Propsに指定していた型と異なりclassNameというプロパティが生えていることがわかります
    - Propsの型を必要なものだけ指定するプロジェクトであればハマりやすい罠です

```json
{
  "children": "TEST",
  "className": "sc-EHOje biMEjp"
}
```

## 解決方法

- ここまでの流れでclassNameをTextコンポーネントに追加すればよいことがわかったので、下記の様に修正を加えます
    - classNameがTextコンポーネントに確実に渡る様にするため下記の様にします

```typescript
import React from 'react';
import styled from 'styled-components';

type Props = {
  children: string;
  className?: string;
};

const Component = styled.span``;

const Text: React.FC<Props> = (props) => {
  return (
    <Component className={props.className}>{props.children}</Component>
  );
}

export default Text;
```

- またはclassNameの指定をせずにpropsを全て渡す形でも拡張することが可能となります

```typescript
import React from 'react';
import styled from 'styled-components';

type Props = {
  children: string;
};

const Component = styled.span``;

const Text: React.FC<Props> = (props) => {
  return (
    <Component {...props}>{props.children}</Component>
  );
}

export default Text;
```

## まとめ

- styled-componentsは動的にクラスを追加して、そのクラスをコンポーネントに追加する形でスタイルを適用している
- コンポーネントへのクラスの追加はclassNameを用いて行われており、その値を捨ててしまうとスタイルの拡張に失敗してしまう
- TypeScriptで型を制限していても実行時に渡されるパラメータまで制御出来るわけではない
merge: Requestデータを追加・上書き for Laravel

Requestクラスに値をセットするには**mergeメソッド**です。

```php:NG_ダメです
//これやりがちですができません。
$request->input('name') = 'ichiro';
```

```php:追加・上書き
use lluminate\Http\Request;

$request = new Request;
$request->merge(['name' => 'ichiro']);
//名前があればチーム名を新たに追加
if ($request->has('name')) {
    //追加
    $request->merge(['team' => 'Mariners']);
}
echo $request->input('name'); //ichiro
//上書き
$request->merge(['name' => 'taro']);
echo $request->input('name'); //taro
```
LGTMよろしくお願いします。
励みになります！
Tensorflowをラズパイで。pipで躓いたらvirtualenvで解決!

Pythonの仮想環境のお話です。
途中から脱線してTensorflowの構築に入ります。

※急ぎ（2時間）で仕上げたため、質が悪い上、誤字脱字や表現がおかしい所があるかもしれません。その点はご了承ください。

##はじめに
virtualenvとは、Python内で軽量な仮想環境を構築してくれるパッケージの一つです。

Pythonで開発をする際、何かと環境構築で躓きがちですよね。pipとかpipとかpipとか。
初心者の私にとっては環境構築が常にラスボス的な存在です。本当に恐ろしい。

自分語りはこの辺で、このvirtualenvの利用用途の一つとして、インタプリタとpipにより導入されたパッケージを同時に管理が行えます。
非常に便利なモジュールです。

今回はRaspberry Pi にTensorFlowを導入したときの苦労話でもしたいと思います。
苦労話というよりかはvirtualenvがあればすんなりと構築できるという一連の流れでしょうか。

ゴールはサンプルを動かすまでの環境構築です。

##準備
まずはみんな大好きRaspberry Piを用意。初期設定は終わっているものとします。
SSHでもVNCでも何でも良いので、とりあえずはターミナルが開ければ良しとします。

|Tool  |Ver |
|---|---|
|Python  |3.5.3  |
|Tensorflow  |1.11.0  |

##Tensorflowの導入
特に問題なくインストールできると思います。

```
sudo apt install libatlasbase-dev 
pip install tensorflow 
```
当時この時点で躓いたなんて言えない。

##virtualenvの準備
問題なくインストール出来ればいいのですが、私の場合特定のパッケージのみインストールが出来ない状態が続きました。

ここからが本題です。virtualenvを知るまでは滅茶苦茶大変でした。

###virtualenvの導入

virtualenvをインストールします。

```
pip install virtualenv
```

###カレントディレクリ内に環境を構築

今いるディレクトリ内で以下を実行し、hogeという環境を作製します。

```
virtualenv --system-site-packages -p python3 ./hoge
```

###仮想環境を有効化

構築された環境を有効化します。

```
source ./hoge/bin/activate
```

有効化するとターミナルの先頭が

```
(hoge)$
```
となるので、これで完了です。

##モジュール等の準備
Tensorflowに必要なモジュールをインストールします。
個別でインストールしていきましょう。
Python2とPython3が共存している場合はpip3にて導入出来ます。

###モジュールの導入

Cython, contextlib2, pillow, lxml, jupyter, matplotlibをインストールしていきます。

```
pip install --user Cython
pip install --user contextlib2
pip install --user pillow
pip install --user lxml
pip install --user jupyter
pip install --user matplotlib2
```

これらを仮想環境が有効化されている状態でインストールします。
また、各モジュールの説明は省略します。

##Object Detection APIの導入
物体検知を行うに当たり、"Object Detection API"を導入する必要があります。
詳細は省略しますが、今すぐにでも物体検知をしたい方は導入されたい。また、自作のデータセットを訓練するのに必要です。
今回はサンプルを実行するまでの環境の構築をしてみます。

###サンプルを動かすための準備

今回はサンプルに頼ります。すみません。
まず、こちらをクローンします。

```
git clone https://github.com/tensorflow/models.git
```

クローンが終わったら

```
models/research
```

に移動してください。

そこで

```
#コンパイラのインストール
sudo apt-get install protobuf-compiler
#コンパイル
protoc object_detection/protos/*.proto --python_out=.a
```

これらを実行すると、何の返答もなくprotbufライブラリのコンパイルが実行されます。

次に環境変数を指定する必要があります。

```
export PYTHONPATH=$PYTHONPATH:`pwd`:`pwd`/slim
```

注意点として、ターミナルを起動する度に書き換えが必要なので予めbashファイルに書き込んでおくと良いかもしれません。

最後に以下の学習済みデータをクローンします。

```
https://github.com/tensorflow/models/blob/master/research/object_detection/g3doc/d
etection_model_zoo.md
```

これで準備は整いました。
後はPythonにて書き上げたコードを実行してみると良いと思います。

##それでも出来ない！
やはり入れ直しが手っ取り早いです。

PythonとTensorflowを入れなおす場合

```
sudo apt-get install python-pip python3-pip
sudo pip uninstall tensorflow
git clone https://github.com/PINTO0309/Tensorflow-bin.git
cd Tensorflow-bin
sudo pip install tensorflow-1.11.0-cp35-cp35m-linux_armv7l.whl
```
Tensorflowを個別で導入する場合

```
https://www.piwheels.org/simple/tensorflow/
```
こちらを参照すると良いかと思われます。

##最後に
今回は、あくまでもvirtualenvを使って環境構築の窮地から脱出したという体験談です。
virtualenvが無かったら恐らく挫折していたでしょう。ありがとうvirtualenv。

私はまた、これらを用いてその場にいる人数を把握するという簡単な物を作製しました。
特に魅力もないので書きませんが、あくまでその時はラズパイという小さなハードでも動かすことができるのか、という実験がてらに取り組んだものですのでその話はまた後日したいと思いますが多分しないでしょう。

##参考文献
-github tensorflow
https://github.com/tensorflow/models.git

-piwheels
https://www.piwheels.org/
ゼミサマリ : Weight Agnostic Neural Networks

## 概要
テーマ : NNの構造探索
スライドリンク : 追記予定
発表者 : ヘンリー
題名 : Weight Agnostic Neural Networks
Paperリンク : https://arxiv.org/abs/1906.04358
新規性 : 重みを学習しなくても、タスク(MNISTの分類など)を解けるNNの構造を、Evolution Strategyの一種(NEAT)で見つけた

## 着想
NNは学習を通じて重みを最適化するが、動物は生まれながらに(つまり学習せずに)敵を認識したり、泳いだりする能力を持っている。つまり「良い構造のNN」があれば重みはテキトーでもタスクが解けるのではないか?

## 実験の流れ
1：適当な特徴量を使って第一世代のmininal networkを何種類か作る
2：NNの全ての重みを{-2, -1, -0.5, 0.5, 1, 2}の6種のどれかにしてタスクを解く
3：6種それぞれの重みを用いた場合のパフォーマンスの良さ(平均、最大)と構造の簡潔さなどを元に(ヒューリスティックに)ランク付けする
4：ランク上位のNN構造を元に次世代のNN構造を作る(ノード間に活性化を入れたり、結合したり)
5：2~4を繰り返す

## タスク
1：CartPoleSwingUp(強化学習の倒立振子)
2：BipedalWalker-v2(強化学習の二足歩行)
3：CarRacing-v0(強化学習の自動運転)
4：MNIST

## 結果
{-2, -1, -0.5, 0.5, 1, 2}の中で、最も良いパフォーマンスを出した際の重み1種類を、最終的にできたNN構造の全ての重みとして用いると、学習をしなくてもある程度のパフォーマンスが出せた

## 今後の展望
どうにかして探索空間を狭め、計算コストを抑えたい

## 参考リンク
解説：https://ai.googleblog.com/2019/08/exploring-weight-agnostic-neural.html
解説：https://weightagnostic.github.io/
実装：https://github.com/google/brain-tokyo-workshop/tree/master/WANNRelease