OmniAICreator/Qiita-1.07M huggingface dataset:
#ngrok で file プロトコルを転送先に指定して local の httpサーバー起動さえ不要の 200 ok レスポンスのテストをする

# help

なんと file:/// もリクエスト転送先として指定できることが判明

```
$ ngrok http
NAME:
   http - start an HTTP tunnel

...

EXAMPLES:
   ngrok http 8080                      # forward ngrok.io subdomain to port 80
   ngrok http example.com:9000          # forward traffic to example.com:9000
   ngrok http -subdomain=bar 80         # request subdomain name: 'bar.ngrok.io'
   ngrok http -hostname=ex.com 1234     # request tunnel 'ex.com' (DNS CNAME)
   ngrok http -auth='falken:joshua' 80  # enforce basic auth on tunnel endpoint
   ngrok http -host-header=ex.com 80    # rewrite the Host header to 'ex.com'
   ngrok http file:///var/log           # serve local files in /var/log
   ngrok http https://localhost:8443    # forward to a local https server

```

# ngrok のダッシュボードで authtoken を得る

使うにはサインアップが必要らしい

![image](https://user-images.githubusercontent.com/13635059/70758958-f5367a00-1d87-11ea-9887-e74b2035422c.png)

```
ngrok authtoken xxxxxxxxxxxxxxxxxxxxxxxxx
```

# Macのfiles

ブラウザで `file:///` にアクセスしてみる

Macの場合

![image](https://user-images.githubusercontent.com/13635059/70759076-69711d80-1d88-11ea-8357-cc5d567668a2.png)

# ngrok を起動する

file:/// を指定する
スラッシュ3個なので注意

`ngrok http file:///`

```
ngrok by @inconshreveable                                                                                                      (Ctrl+C to quit)

Session Status                online
Account                       Yuma Inaura (稲浦悠馬) (Plan: Free)
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://af5606a9.ngrok.io -> file:///
Forwarding                    https://af5606a9.ngrok.io -> file:///

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00
```


# ngrok にリクエストを送る

ngrokにpublicなリクエストが送信される
ngrok経由でlocalのhtmlがレスポンスとして返ってくる

```
$ curl  https://af5606a9.ngrok.io
<pre>
<a href=".DS_Store">.DS_Store</a>
<a href=".VolumeIcon.icns">.VolumeIcon.icns</a>
<a href=".file">.file</a>
<a href=".fseventsd/">.fseventsd/</a>
<a href=".vol/">.vol/</a>
<a href="Applications/">Applications/</a>
<a href="Library/">Library/</a>
<a href="System/">System/</a>
<a href="Users/">Users/</a>
<a href="Volumes/">Volumes/</a>
<a href="bin/">bin/</a>
<a href="cores/">cores/</a>
<a href="dev/">dev/</a>
<a href="etc">etc</a>
<a href="home">home</a>
<a href="opt/">opt/</a>
<a href="private/">private/</a>
<a href="sbin/">sbin/</a>
<a href="tmp">tmp</a>
<a href="usr/">usr/</a>
<a href="var">var</a>
</pre>
```

# ngrok で 200 ok が記録されたら成功

```
HTTP Requests
-------------

GET /                          200 OK
```


# Original by Github issue

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








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
A tampermonkey script


```js
// ==UserScript==
// @name         filter event by aj club name
// @namespace    http://tampermonkey.net/
// @version      0.1
// @require http://code.jquery.com/jquery-3.3.1.min.js
// @description  add a club index in the head then you could get by event list by club!
// @author       Matt
// @match        https://www.audax-japan.org/*
// @grant        none
// ==/UserScript==


(function () {
  'use strict';
  function onlyUnique(value, index, self) {
    return self.indexOf(value) === index;
  }

  function onlyShowme(event) {
    $("table > tbody > tr").each(function () {
      $(this).show();
      if ($(this).find("td:nth-child(3)").text() !== event.target.text) {
        $(this).hide();
      }
    });
  }

  var club_list = [];
  var only_unique = [];

  $("table > tbody > tr > td:nth-child(3)").each(function () {
    club_list.push($(this).text());
    only_unique = club_list.filter(onlyUnique).filter(function (e) {
      return e !== ''
    }).filter(function (e) {
      return e !== '主催'
    });
  });

  for (var i = 0; i < only_unique.length; i++) {
    $("#post-21795 > div").prepend("<a id='" + only_unique[i] + "' style='padding:3px;cursor: context-menu;'>" + only_unique[i] + "</a>");
  }
  for (var j = 0; j < only_unique.length; j++) {
    $("#" + only_unique[j]).click(onlyShowme);
  }

})();

```
【トリビア】Rubyにおける3連引用符（ダブルクオート3つ）は何を意味しているのか？

## はじめに：Rubyクイズ！！

Rubyプログラマのみなさん、こんにちは。
突然ですが、問題です。
以下のコードを実行すると何が起きるでしょうか？

```ruby:sample.rb
msg = """
Hello, world.
I am Ruby.
"""

puts msg
```

はい、実行結果はこうです。

```console
$ ruby sample.rb 

Hello, world.
I am Ruby.
```

どうですか？想像通りの結果になりましたか？
それではまた。ごきげんよう。

・・・ではなくて、上のコードに出てきた3連引用符（`"""`）ってみなさん知ってましたか？
Rubyを長年やってる人もあまり見たことはないんじゃないでしょうか。
というか僕も最近知りました。

## `"""` の種明かし

「Rubyに `"""` なんていう構文はあったっけな〜？🤔」と思ってネットや書籍を調べても、たぶんそんな構文はどこにも載っていないと思います。

これ、実は`""" = "" + "`の意味になっているだけなんです。
つまり、先ほどのコードはこう書いているのとほぼ同じです。

```ruby
msg = "" + "
Hello, world.
I am Ruby.
" + ""
```

結果として、こう書いていることと同じになります。

```ruby
msg = "
Hello, world.
I am Ruby.
"
```

ウソだ！と思っている人も、`puts`の代わりに`p`を使って確認すると、納得がいくかもしれません。

```ruby
msg = """
Hello, world.
I am Ruby.
"""

p msg
#=> "\nHello, world.\nI am Ruby.\n"
```

## 公式リファレンスの説明を確認する

公式リファレンスにも以下のような説明が載っています。

[リテラル \(Ruby 2\.6\.0 リファレンスマニュアル\)](https://docs.ruby-lang.org/ja/latest/doc/spec=2fliteral.html)

> 空白を間に挟んだ文字列リテラルは、コンパイル時に1つの文字列リテラルと見倣されます。

```
p "foo" "bar"
=> "foobar"
```

リファレンスには「空白を間に挟む」とありますが、空白なしでも1つの文字列になるようです。

```ruby
p "foo""bar"
#=> "foobar"
```

よって、

```ruby
"""abc"""
```

は、

```ruby
"" "abc" ""
```

と書いていることになり、結果として、

```ruby
"abc"
```

と書いたことになるわけです。

ちなみに、シングルクオートで書く場合も考え方は同じです。

```ruby
p 'foo' 'bar'
#=> "foobar"

p '''abc'''
#=> "abc"
```

### 余談：C言語も同じ文法を持っています

「隣り合った文字列リテラルは1つの文字列として扱われる」という文法は、C言語でも同じだそうです。
というか、C言語の影響を受けているとこういう文法が用意される、と言った方が正しいかもしれません。

```c
#include <stdio.h>

int main(void) {
  // 実行すると"Hello, World!"になる
  printf("Hello, " "World!\n");
  return 0;
}
```

参考 https://stackoverflow.com/a/23811427/1058763

## でもなんで `"""` なの？

しかし、なんでRubyでわざわざ`"""`なんて書く人が出てくるんでしょうか？
僕は`"""`を自分で書いたことがないので、これは僕の推測になりますが、PythonやCoffeeScriptなど、他の言語の文字列リテラル（改行が入れられる文字列リテラル）をうっかりRubyでも書いてしまった、という理由があるのかもしれません。

Pythonの場合

```python
print("""\
Usage: thingy [OPTIONS]
     -h                        Display this usage message
     -H hostname               Hostname to connect to
""")
```

出典 https://docs.python.org/ja/3/tutorial/introduction.html#strings

CoffeeScriptの場合

```coffeescript
html = """
       <strong>
         cup of coffeescript
       </strong>
       """
```

出典 https://coffeescript.org/#strings

しかし、Rubyであればこういうケースは`"""`ではなく、ヒアドキュメント構文を使うのが良いと思います。

```ruby
msg = <<TEXT
Hello, world.
I am Ruby.
TEXT

puts msg
#=> Hello, world.
#   I am Ruby.
```

## まとめ
というわけで、この記事では摩訶不思議なRubyの3連引用符（ダブルクオート3つ、またはシングルクオート3つ）の謎について説明しました。

日常的に使うことはまったくオススメしませんが、ちょっとしたトリビアとして「へえ〜」と思ってもらえれば幸いです😄
Python3.8をはじめる on Windows

本記事は、Windows8.1 を例に説明します。

プログラミングを始めるためにはその環境が必要ということで
今回は **Python3.8** をインストールします。
※2019/11/17　に行いました。


#自分のPCのバージョンを確認する

まずwindows のバージョンが32bit か64bitか確認を行います。

これによってインストールするものが違うのでメモしておきましょう。
デスクトップの左下スタートボタンを押します
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531035/ebf226f8-3cd8-8f16-8328-a36d9b2838b4.png" width=50%>


右上にある検索マークをクリック
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531035/327344e7-07da-b28d-704f-77aa321e83ed.png" width=50%>


`コントロールパネル`と入力し、出てきたアプリをクリック
windows10 ならデスクトップのスタートボタンのところに検索窓があったと思うのでそこに入力してみてください。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531035/d93bc79e-0b3f-1873-cdf5-342134fd9fc2.png" width=30%>

出てきたウィンドウの`システムとセキュリティ`をクリック

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531035/e62bdbe0-08e9-abe0-1dd6-8b866e947fe4.png" width=50%>


次の画面の`システム`をクリック
<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531035/d952de31-9ecd-f51d-38f6-d80c993797e8.png" width=50%>

すると、赤で囲っているところに
`64ビットオペレーションシステム`
もしくは`32ビットオペレーションシステム`
と表示してあると思います
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531035/9e19f890-a3f3-866e-e081-c01acb9382fa.png" width=50%>

これをメモしたら次のステップです。

# Python のダウンロード

次はダウンロードです。
[https://www.python.org/downloads/][1]

[1]:https://www.python.org/downloads/

上記のURLからダウンロードします。

<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531035/a85ff943-4deb-41d3-dc59-a08458b4a3a0.png" width=50%>


URLからPython のダウンロードページに飛んだら
トップにある黄色いボタンは<font color="Red">押さず</font>に
書いてあるPython 3. ?. ? の数字を確認して下さい
この画面ではPython 3.8.0です

次にその画面を下にスクロールすると

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531035/e2e97cb1-d51c-3f30-5bdc-db8bbe7e3d9a.png"width = 50%>


↑のような場所があります
そこで先ほど確認した数字をクリックします
ここではPython3.8.0 です


飛んだ先で下にスクロールすると

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531035/00924ed4-a19d-9d78-78a0-aa75a1853dcc.png" width=50%>


記事の最初に`64ビットオペレーションシステム`だった人は
`Windows x86-64 executable installer`
をクリックしてダウンロード

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531035/06ef685f-25ee-f145-a3e7-b5ff29c4da95.png" width=50%>


記事の最初に`32ビットオペレーションシステム`だったひとは
`Windows x86 executable installer`
をクリックしてダウンロード

#インストール

ダウンロードが終わったら、windows のダウンロードフォルダに
Python のインストール用のファイルがあります

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531035/a705f390-0223-3b3e-ef5c-c55845bb2f54.png" width=60%>


それをクリックします

![12startinstall.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531035/1b3b752d-9a1d-d5f0-d5cd-cb9d4230927e.png)

するとこんな画面が出てきます
ここでは`Add Python 3.8 to PATH` に
チェックを入れておきましょう

そして`Install Now`を押します
Windows から警告がでると思いますが
危険な実行ファイルではないので許可します

![13installfinished.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531035/a4377058-bc0a-3cbf-01a2-e37a6181d9e5.png)

インストールに成功するとこの画面になります

検索してみると

![14confirm.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531035/48029e0a-0c77-6863-dbc0-12b43e1f6f61.png)


実際にインストールされていることが確認できます

#おわり
楽しいPythonライフを
Ruby on rails でルーティングを確認する方法

##ルーティングを確認する方法

初めに、コマンドラインで次のコードを打つ。

```
rails routes
```
すると、次の結果が表示されます。

```
Prefix Verb URI Pattern        Controller#Action
   root GET  /                  static_pages#home
   help GET  /help(.:format)    static_pages#help
  about GET  /about(.:format)   static_pages#about
contact GET  /contact(.:format) static_pages#contact
```

以上です。
#Stripe + ngrok で local環境で webhook 発行 / webhook再送信のテストをする

# 問題

stripe cli でも webhook の local でのテストができるが、こちらはあくまでイベントをトリガーする仕様なので、一度発生済みのwebhookを再送する場合は、localに直接リクエストを送ることができない

global なURLを発行してlocalに転送してくれるngrokを利用する

# ngrok を起動する

このようなURLが発行される

https://eb3a6a4a.ngrok.io

ここに来たリクエストがlocalに転送される

http://localhost:80

```
ngrok http 80
```

```
ngrok by @inconshreveable                                                                                                      (Ctrl+C to quit)

Session Status                online
Session Expires               7 hours, 59 minutes
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://eb3a6a4a.ngrok.io -> http://localhost:80
Forwarding                    https://eb3a6a4a.ngrok.io -> http://localhost:80

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00


```

ngrokは起動させたままにしておく

# Stripe

Stripeでwebhookのエンドポイントを設定する
発行されたngrokのURL を入力する
トリガーするイベントを設定しておく

![image](https://user-images.githubusercontent.com/13635059/70756794-e1d3e080-1d80-11ea-987a-c9a900ca8502.png)

# Stripeでイベントを発行される処理をする

直接Webhook送信のテストをする

![image](https://user-images.githubusercontent.com/13635059/70757169-f369b800-1d81-11ea-8302-c576b190089d.png)

もしくはwebhookがトリガーされる処理を実行する
例えば顧客を作成してみる
事前にwebhook設定でトリガーするイベントとして設定してある必要がある

![image](https://user-images.githubusercontent.com/13635059/70756851-05972680-1d81-11ea-9d32-4ff8cf8e72c5.png)




# ngrokでリクエストを確認する

リクエストが飛んできているのが確認できる
http://localhost:80 には何もないので BAD REQEST 扱いになっている状態


```
HTTP Requests
-------------

POST /                         502 Bad Gateway
```

# node などで local に http サーバーを起動させてから webhook を試す

`node ok.js`

```
var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello New York\n');
}).listen(80);
console.log('Server running at http://localhost:80/');
```

200 ok を確認できた例

![image](https://user-images.githubusercontent.com/13635059/70757448-f1ecbf80-1d82-11ea-9f7f-2cc8c8050a61.png)

![image](https://user-images.githubusercontent.com/13635059/70757439-e7cac100-1d82-11ea-9f29-d8e90dc2b719.png)


# Webhook再送信

すでに発行済みのwebhookを再送信する場合は、エンドポイントを一時的に ngrok のものに書き換えて再送を試すと良いだろう。

![image](https://user-images.githubusercontent.com/13635059/70757127-d03f0880-1d81-11ea-97b3-77da9ee67072.png)


# Original by Github issue

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








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
製薬企業研究者がPythonにおけるクラスについてまとめてみた

# はじめに

ここでは、Pythonの初心者向けに、「クラス」の基本について解説していきます。
Python3系の使用を前提とします。


# クラスの作成

クラスを作成するときは、`class`を使います。

```python:class_1.py
class Human:
    name = 'ゆきや'
    def say_hello():
        return 'こんにちは。'

    
print(Human.name)
print(Human.say_hello())
```

以上のようにしてクラスを作成することができますが、この書き方だと、`name`が「ゆきや」以外のインスタンスを生成できません。

後から自由に`name`を設定できるようにするには、`__init__`を利用します。
第一引数は`self`となります。


```python:class_2.py
class Human:
    def __init__(self, n):
        self.name = n
    
    def say_hello(self):
        return 'こんにちは、' + self.name + 'です。'

    
yukiya = Human('ゆきや')
takada = Human('たかだ')

print(yukiya.name)
print(yukiya.say_hello())
print(takada.name)
print(takada.say_hello())
```


# クラスの継承

「継承」というのは、既存の「親クラス」をもとに、追加の機能を持たせた「子クラス」を作成することです。

```python:class_3.py
class Human:
    def say_hello(self):
        return 'Hello'
    

class Japanese(Human):
    def say_konnichiwa(self):
        return 'こんにちは。'
    

yukiya = Japanese()

print(yukiya.say_hello()) # Humanクラスのメソッドも使える。
print(yukiya.say_konnichiwa())
```


# まとめ

ここでは、Pythonにおける「クラス」の基本について解説しました。
オブジェクト指向に必要な考え方になりますので、ぜひ理解しておくようにしましょう。


# 参考資料・リンク

[プログラミング言語Pythonとは？AIや機械学習に使える？](https://pharma-engineer.com/basic-programming/python-summary/)
APIGatewayから、外部アクセス不可のEC2にアクセスする

##A.プライベートサブネットのEC2にアクセスする方法
①APIGatewayのVPCリンクを使用する。
　－－－－－－－－－－－－－－－
　APIGateway⇒NLB⇒EC2
　－－－－－－－－－－－－－－－
　※EC2が複数台（負荷分散）あっても可能

②VPC内Lambdaを使用する。
　－－－－－－－－－－－－－－－
　APIGatway⇒Lambda(VPC内)⇒EC2
　－－－－－－－－－－－－－－－
　※EC2が複数台の場合は不可

##B.パブリックサブネットのセキュリティグループでアクセスが制限されたEC2にアクセスする方法

ちなみに、APIGatewayはIP固定にできません。ころころ変わります。

①"A-①"で可能
　⇒NLBのIPの範囲をEC2のセキュリティグループに設定する。

②lambdaとNATを使用してグローバルIPをつける。
　⇒NATのIPをEC2のセキュリティグループに設定する。
　－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
　APIGatway⇒Lambda(VPC内)　⇒NAT Gateway　　⇒（インターネット）⇒EC2
　　　　　　 ～～～～～～～　 ～～～～～～～
　　　　　　 ﾌﾟﾗｲﾍﾞｰﾄｻﾌﾞﾈｯﾄ　 ﾊﾟﾌﾞﾘｯｸｻﾌﾞﾈｯﾄ
　－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
　※NATにEIPを付与する。NATを通過することでグローバルIPが固定化される。
　　いろいろ無駄やなぁとは思いますが(笑)
　　APIGatwayにEIPを付与できたらいいのになあぁ。。(゜-゜)
Pythonでユークリッドの互除法を再現

##　はじめに
###これは超初心者による備忘録です
今回は初めての投稿です。
pythonをやり始めて一週間。まだまだヒヨッコなので、ネットで見つけた問題集で練習しております。

その時に見つけた問題がうまく解決できなかったので備忘録として記事を残します。


超初心者の方は必見です！！！




###ユークリッドの互除法とは
簡単にいえば、最大公約数を機械的に求めることができる計算方法。

計算方法
①調べたい2つの自然数を用意する
②大÷小をする
③余りが出たら、小さいほうの数字とそのあまりの最大公約数が元の2数の最大公約数と一致している。
④これを繰り返すことで、簡単な数字で最大公約数がわかる


まあこんな感じです。わかりにくくてすいません。


## 実際にやってみる
それではコードを書いていきます。
まずは新しい関数gcd()を定義します

```Python
def gcd(a,b)　#関数を定義
```
関数を自分で定義するのはdefを使います。


次に、この関数が行う処理を書いていきます。
ユークリッドの互除法では、何度も計算を繰り返さなくてはなりません。
そのため、次のような条件分岐が必要になります。

①余りが出なくなったとき（割り切れた時）、そこで計算終了
②余りが出れば、計算を継続

2つの場合に合わせて、処理が分かれるわけですね。
つまり、ifをつかえばよさそうです！

よって、下のようなコードになると思います。

```Python
def gcd(a,b) #関数を定義
#①のとき
    if b == 0
        return a
#②のとき
    else:
        return gcd(b,a%b)
```


これで、書き終わりました！！！
あとは、自分の好きな2数を自由に入力できるように、input関数を使い、結果を出力するためにprint関数をつければよさそうです
↓が完成形となります。

```Python
a,b = input(),input()

#整数に変換
a,b = int(a),int(b)

#関数を定義
def gcd(a,b) 
#①のとき
    if b == 0
        return a
#②のとき
    else:
        return gcd(b,a%b)
#結果を出力
print(gcd(a,b))

```

これで完成です！！

##まとめ
今回はユークリッドの互除法をpythonであらわしました。

最初は、inputがうまくいかずエラーが出てたんですけど、intをくっつけたらうまくいきました。
~~なんでかはよくわかんないので、その辺を教えていただけたら嬉しいです。~~
※追記
コメントで教えていただきました！
理由は、型の違いだそうです。
inputはユーザーの入力した”文字列”を受け取る関数なので、strです。
一方、gcd関数で想定している型はintなので、型が合わず、エラーが発生するとのこと。
つまり、int関数で整数に変換すると、うまくいくわけですね。


※さらに追記
再びコメントで教えていただきました！
python 3.5以降であれば、mathライブラリに私が作ったような機能があるそうです！



最後まで読んでいただきありがとうございました！！！
なにかアドバイスなどあれば気軽にお願いします！
#Stripe ダッシュボードで作成したイベントの web hook を stripe cli のローカル環境で受け取る

How to

# CLIでイベントをトリガーする


```
stripe listen
```

これだけ！

ダッシュボードにすぐデバイスが現れる。

>Stripe CLI のイベントを受信するデバイス
>Stripe CLI を利用してテストモードのイベントをリッスンしトリガーします。

![image](https://user-images.githubusercontent.com/13635059/70754881-b3073b80-1d7b-11ea-8535-425fb7c36264.png)

# イベント発行をテスト

Stripeダッシュボードから顧客を作成してみる.

![image](https://user-images.githubusercontent.com/13635059/70754941-d8944500-1d7b-11ea-82f9-610363a645b9.png)

# 結果

localでイベントを受け取ることができる！

```
$ stripe listen
> Ready! Your webhook signing secret is xxxxxxxxxxxxxxxxxxxxxxxxxxxx(^C to quit)
2019-12-13 07:41:06   --> customer.created [evt_1Fp0LGCmti5jpytUYaiA0xBE]
```

ちなみに
# webhookを転送する

listenはイベントを聞くだけなので、これをlocalのエンドポイントに転送するには --forward させる

```
stripe listen --forward-to localhost:5000/webhooks
```

# Webhook送信テスト？

ちなみに stripe cli はあくまでイベントをトリガーしているのであって、設定済みのWebHookへの直接送信をしてみても、cliでトリガーできるわけではないようだ。

![image](https://user-images.githubusercontent.com/13635059/70755101-48a2cb00-1d7c-11ea-9985-6b145f9398c6.png)

# つまり

この二つの流れだ

- Stripeのイベント --> webhookリクエストが送信される 
- Stripeのイベント --> stripe cli でトリガー --> local で特定のエンドポイントにwebhookリクエストを転送する


# Ref

Configuring the Endpoint | Stripe
https://stripe.com/docs/webhooks/configure#send-test-event

# Original by Github issue

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








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
C/C++間での翻訳フェーズの違い


カレンダーが開いていたので、穴埋めがてら参加させていただきました

この記事は、[C++ Advent Calendar 2019](https://qiita.com/advent-calendar/2019/cpp) の記事です

前日の記事は@tyu_ru_cppさんの[「min/maxみたいな関数の呼び出し」](https://qiita.com/tyu_ru_cpp/items/260c2f0e691f97eaa54e)でした
次日の記事は@RIO18020さんです

※翻訳フェーズ3のソース例とコメントを一部修正(12/14) 

#はじめに
「そういやよく知らねえな…」とエッグマフィン食べながら思ったのでまとめ

# 翻訳フェーズ(translation phases)とは

ソースファイルの翻訳手順の事です。
C/C++両者とも規格上部にあるので探す手間が省けます。やったね。
(Cの場合「5.1.1.2」、 C++の場合「5.2」に記載されています)

ざっくり書き出すと以下の手順になっています

## 手順(ざっくり)
1. ソースファイル上文字をソース文字集合に変換

2. 行末のバックスラッシュと改行の2セットを削除

3. ソースファイルを「プリプロセッシングトークン」,「コメント」,「空白類文字」の並びに分割し、コメントを1つの空白に置き換える

4. プリプロセッサを実行

5. 文字、文字列リテラル内の文字をソース文字集合→実行文字集合へ変換し、エスケープシーケンスを処理

6. 隣接する文字列リテラルを結合

7. コンパイルを実行

8. [C++のみ]テンプレートの実体化

9. 外部参照の解決

※補足(文字集合について)
**ソース文字集合(source character set)** …ソースコード上で用いられる文字セットの事。
最低限定義する必要のある「基本ソース文字集合」と、処理系が任意に定義する「拡張ソース文字集合」 がある

**実行文字集合(execution character set)** …実行時に用いられる文字セットの事。
ソース文字集合同様に「基本実行文字集合」 と「拡張実行文字集合」 がある

詳しくは各サイトや規格書を参照

# C/C++での違い

基本的には同じ流れですが、C++で一部追加/変更された動作があります

## 1. ソースファイルの物理的な文字をソース文字集合に変換
**C** の場合、マルチバイト文字もソース文字集合へマッピングしますが
**C++** の場合、基本ソース文字集合のみマッピングを行い、マッピング不可能な物は全てユニバーサル文字名へ置き換えられます

```cpp
int main(void){
	int あああ = 10; // Cの場合変換先は処理系定義だが、C++の場合ユニバーサル文字名(\uXXXX)に置き換わる
}

```

この他C++17以降ではトライグラフの扱いが削除されていますが、
C++erのお方々がわざわざ知らなくても良いとおっしゃられていたのでスルー


## 2. 行末にあるバックスラッシュと改行の2セットを削除
この処理後のソースファイルが改行文字で終わらなかった場合
**C&C++11以前** の場合、未定義動作となりますが
**C++11以降** の場合、ファイル終端へ自動的に改行文字追加されます

```cpp
int main(void)
{
	
}	// ファイル終端が改行文字で終了しなくなった時どうなるか
\
```

## 3. ソースファイルを「プリプロセッシングトークン」,「コメント」,「空白類文字」の並びに分割し、コメントを1つの空白に置き換える
**C++11以降** の場合、加えてこのタイミングで生文字リテラル内のみフェーズ1～2までの変換作業が取り消されます

```cpp
#include <cstdio>
int main(void){
	// バックスラッシュと行末の削除が取り消され、そのままとなる
	std::puts(R"(ほげほげ\
	\
	)");
}
```

## 4.プリプロセッサを実行
特に変わり無し

# 5. 文字、文字列リテラル内の文字をソース文字集合→実行文字集合へ変換し、エスケープシーケンスを処理
**C++** の場合、ユニバーサル文字名の実行文字集合への展開が記載されています
また**C++11以降** の場合、生文字リテラルにはエスケープシーケンス処理が適用されません

```cpp
#ifndef __cplusplus
#define R
#endif

int main(void){
	const char * str = "あああ"; //Cの場合処理系定義の展開、C++の場合ユニバーサル文字名の展開として実行
	const char * str2 = R"(\nあああ\n)"; //生文字リテラルは対象外(基本ソース文字集合→実行文字集合への変換は行われる)
}

```

## 6. 隣接する文字列リテラルを結合
変わりなし

## 7. コンパイルを実行
**C++20以降** の場合、実装定義でmoduleによる依存関係があるソース/ヘッダファイルが利用可能状態である必要が有る可能性があります。

## 8. [C++のみ]テンプレートの実体化
Cコンパイラはいくらお願いしてもやってくれません

## 9. 外部参照の解決
変わりなし

# おわりに
「まあそうだよね」と言う違いが大半でした。
誤り、マサカリ等ございましたらよろしくお願いいたします。

# 参考
[C++ Draft](http://eel.is/c++draft/lex.phases)
[C17 最終ドラフト](https://web.archive.org/web/20181230041359if_/http://www.open-std.org/jtc1/sc22/wg14/www/abq/c17_updated_proposed_fdis.pdf)
[JIS C規格](https://kikakurui.com/x3/X3010-2003-01.html)
[cppreference.com(翻訳フェーズ)](https://ja.cppreference.com/w/cpp/language/translation_phases)
Bootstrap 4 のcarouselを使ってWebサイトにスライドショーを作成する

#Bootstrap 4 のcarouselで作るスライドショー

WEBサイトにスライドショーを作成したい。でもなかなか難しそうだし、どうやってやるかわからない。。そんな人におすすめなのがBootstrap4のcarouselです。ちなみにcarouselは英語でメリーゴーランドって意味です。

##実際どんな感じになるの

イメージはこんな感じ。（Bootstrap4の公式サイトから引用）

<img width="832" alt="スクリーンショット 2019-12-14 08.15.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161691/027e16ec-8695-0f84-fa60-e1a7b345c3f3.png">


このスライドショーがなんと、、コピペでできてしまう。あぁBootstrap恐ろしや。




```html:carousel.html

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="2500" data-pause="hover">
  <div class="carousel-inner">
    <div class="carousel-item active" style="background-color: red;">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item"  style="background-color: yellow;">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item"  style="background-color: blue;">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
```

いろんなスライドショーがあるので、興味ある方は公式サイト見て見てね。
https://getbootstrap.com/docs/4.4/components/carousel/

※複数あるclass="carousel-item"のうち、１つはclass="carousel-item active"にしなければならないので注意。


#変えられる要素

要素を追加することで、スライドショーをカスタマイズすることができます。


##・『interval』で切り替え時間を変える


intervalのdefault設定は5000ミリ秒。
今回は一行目に data-interval="2500"と設定し、2.5秒に1回画面が切り替わるようにしました。


##・『pause』でスライドショーを止める

pauseは何かのactionが行われた時に、スライドを止めるもの。
data-pause="hover"を設定すると、hoverされた時にスライドが止まるのです。
読みたいのにどんどん流れて行っちゃうスライドショーってたまにあるよね笑


##・『carousel-fade』でオシャレにスライドする

上記のコードではclass="carousel slide"だけなので普通に画面がスライドしていく感じになります。しかし、class="carousel slide carousel-fade"と記載すると、画面がふわっとfadeしながら変わります（表現下手か）


##・『ride』で自動スライドか手動スライドか選ぶ

コード内の
data-ride="carousel" → 自動スライド
data-ride="false" → 手動スライド
になります。




ちなみに、Bootstrapを使用する時はheadタグの中に下記いれないと使えないからご注意を。

```html:getstarted.html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

```

全部UdemyのAngelaさんの講座からのメモです。（英語だけどめっちゃわかりやすいです！） → [リンク](https://www.udemy.com/course/the-complete-web-development-bootcamp/?deal_code=JPA8DEAL2PERCENTAGE&aEightID=s00000016735001)
Cognitoユーザープールがステータスコード400で削除できない

Cognitoのユーザープールを削除しようとしたら、次のようなエラーに。

![.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96507/5f175887-8c07-3e6a-9d9a-0aff7e575202.png)

「User pool cannot be deleted. It has a domain configured that should be deleted first.」
ドメインが構成されているため、削除できないとのことなので、割り当てたドメインを先に削除します。

![.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96507/6862efdb-f8cd-eb18-3fc3-b02c8fbd31d9.png)

ドメインの削除を行うと、ユーザープールが消せるようになりました。
#API で POST リクエストして 200 ok が返ってくる テスト用のエンドポイントは？  https://postman-echo.com/post

こちらはいかが

```
$ curl -X POST --head https://postman-echo.com/post
HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
Date: Thu, 12 Dec 2019 22:03:03 GMT
ETag: W/"f6-i7eU4zxK/66+vNZpf89/EER1SNA"
Server: nginx
set-cookie: sails.sid=s%3ATFy6OH1CLD98whSECgQ7ArasZbcHUCFa.VIKzrcYSW0Lhq9LTOG70tKcJDbJze8vB0LZjP9HTPMw; Path=/; HttpOnly
Vary: Accept-Encoding
Content-Length: 246
Connection: keep-alive
```

ちなみに example.com に POST リクエストを送ると エラーが返ってくる

```
$ curl -X POST --head https://example.com
HTTP/2 411
content-type: text/html
date: Thu, 12 Dec 2019 22:03:43 GMT
server: ECS (sec/973B)
content-length: 357

```

# Original by Github issue

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








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
SVGをSymbolで再利用したときに、linearGradientが効かないとき

SVGのSymbolを利用するとページ内で再利用する事ができるので便利なのですが、Symbol化した要素にlinearGradientを掛けたときに上手く適用されない事がありました。

調べてみた所、[Symbol化しているsvgタグは`display:none;`にしてはダメ](https://stackoverflow.com/questions/52439187/linear-gradient-in-svg-symbol)というコトだったみたいです。

```html:NGな例
<svg style="display: none;">
    <defs>
        <linearGradient id="gradient">
            <!-- グラデーションの指定 -->
        </linearGradient>
        <symbol id="symbol" viewBox="0 0 100 100">
            <g fill="url(#gradient)">
                <!-- 描画要素の指定 -->
            </g>
        </symbol>
    </defs>
</svg>
```

参考ページのように、`visibility:hidden; width: 0; height: 0;`の様なスタイルを掛けると正常に表示されました。

```html:OKな例
<svg style="visibility:hidden; width: 0; height: 0;">
    <defs>
        <linearGradient id="gradient">
            <!-- グラデーションの指定 -->
        </linearGradient>
        <symbol id="symbol" viewBox="0 0 100 100">
            <g fill="url(#gradient)">
                <!-- 描画要素の指定 -->
            </g>
        </symbol>
    </defs>
</svg>
```

表示させたくないからと言って何でもかんでも`display: none;`掛けちゃダメですね。
ETロボコン HackEVによる2輪倒立をやってみた

[ETロボコン](https://www.etrobo.jp/)で使われるロボット（走行体と呼んでいます）は、参加チームのクラスごとに2種類存在します。
ひとつは二輪のEV3way-ETで、こちらは二輪倒立で走行を行います。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123504/efba80ea-fb49-c637-64e7-9b16393ae2fd.jpeg" width=20%>
もうひとつはHackEV、前にあるアームを駆使して作業を行う難易度の高いテーマが与えられる上級者向けの走行体です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123504/e47076af-595a-f3c6-9f02-fd68965d1450.jpeg" width=20%>
こちらも駆動タイヤは二輪ですが後部にコロが付いていて、三点で接地して走行します。
#HackEVで二輪倒立できないかな？
2019年は別な開発を行っていたので、Advent Calendarに上げるネタが無かったんですが、
2019年のイベントが終わったので試してみることにしました。
HackEVも同じキットから組まれていて構造上できそうです。
重さや重心位置が変わるので、パラメーターの調整が必要になりますが、新たに倒立対応を行ったノウハウはあります。

【参考】
[EV3way ETロボコンで使用している倒立振子APIパラメーターの再計算手順](https://qiita.com/pulmaster2/items/08edce1ab097539b2deb)
[2018年走行体EV3way(二輪倒立)について 前編](https://qiita.com/pulmaster2/items/c3f04f1e1d9c944af3d6)
[2018年走行体EV3way(二輪倒立)について 後編](https://qiita.com/pulmaster2/items/903f055721e9f66ed13a)
#2019年仕様HackEVでは倒立ができない
2019年仕様の走行体では、ジャイロセンサーの取り付けがヨー（左右旋回）方向に変わっています。これでは倒立に必要なピッチ（前後傾斜）方向の情報が得られないため改造を行います。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123504/bc0b49ec-2277-629b-0bb9-3f43830e47aa.jpeg" width=50%>
右側のタッチセンサーを外してジャイロセンサーに付け替えてピッチ方向の情報を取得できるようにします。
#パラメーター計算
ETロボコンで使用している倒立振子ライブラリでは、パラメーター計算に次の情報が必要になります。

```param_plant.m&nbsp;EV3way-ET2018用のパラメーター
% EV3way-ET2018 Parameters 20180120
m = 0.050;						% wheel weight [kg]
R = 0.05;						% wheel radius [m]
M = 0.79;						% body weight [kg]
W = 0.177;						% body width [m]
D = 0.08;						% body depth [m]
H = 0.140;						% body height [m]
```

##HackEVの計測
HackEVの重さはどれくらいかなー？とキッチンはかりに載せてみましたが、

見慣れない表示`EEEE`

ガーン！（古）重すぎて測れないじゃないか！

走行体の重さだと精度が怪しいですが、体重計を使用しました。
タイヤサイズ、車体の幅などは定規で測ります。
body depthは値を変えても計算結果は変わらないので、そのままにしておきます。
body heightは重心位置になります。倒立制御で重心位置は重要で、物体の振動の周波数特性を決める値になります。
おそらく倒立の様子を見て調整することになるので、手でいろいろ持つ位置を変えながら雰囲気でだいたいの値を出します。

次のパラメーターで倒立振子APIのパラメーターを計算してみます。

```param_plant.m&nbsp;HackEV用のパラメーター
% HackEV Parameters 20191209
m = 0.050;						% wheel weight [kg]
R = 0.05;						% wheel radius [m]
M = 1.50;						% body weight [kg]
W = 0.145;						% body width [m]
D = 0.08;						% body depth [m]
H = 0.140;						% body height [m]
```
求まった結果がこちらです。

	K_F[0]	= -0.86588F;
	K_F[1]	=-34.06031F;
	K_F[2]	= -1.14930F*0.70;
	K_F[3]	= -2.49766F;

#動かしてみる

<blockquote class="twitter-tweet" data-lang="ja" data-theme="light"><p lang="ja" dir="ltr">ETロボコン用走行体 HackEV3による2輪倒立走行(ネタ) <a href="https://t.co/DZ9UZMEQsx">https://t.co/DZ9UZMEQsx</a> <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@YouTube</a>さんから</p>&mdash; k.shimizu (@pulmaster2) <a href="https://twitter.com/pulmaster2/status/1204760942254256130?ref_src=twsrc%5Etfw">2019年12月11日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
&nbsp;

**倒立！ヨシ！**

適当にパラメーター入れただけですが、あっさり倒立できてしまいました。倒立の状態もそんなに悪くないです。
以上 Advent Calendar用のネタとして作成しましたが、HackEVで二輪倒立できたことは某実行委員会本部技術に伝えておきます。
ｘ86レジスタ

#x86は8個の汎用レジスタと6個のセグメントレジスタ、1個のフラグレジスタ、1個の命令ポインタを持っている。

##汎用レジスタの4個は、4通りのアクセス方法。

64ビットアクセス: RAX、RCX、RDX、RBX
32ビットアクセス: EAX、ECX、EDX、EBX
16ビットアクセス: AX、CX、DX、BX
8ビットアクセス: AL、CL、DL、BL、AH、CH、DH、BH

##あと4個は、2通りのアクセス方法がある。

32ビットアクセス: ESP、EBP、ESI、EDI
16ビットアクセス: SP、BP、SI、DI

##6個のセグメントレジスタ

SS : スタックセグメント。
CS : コードセグメント。
DS : データセグメント。
ES : エクストラセグメント。
FS : Fセグメント。
GS : Gセグメント。

以上。
x64 レジスタ

# x64 レジスタ

x64 には64ビットの汎用レジスタが16個あります。
それぞれ64ビット(8バイト)、32ビット(4バイト)、16ビット(2バイト)、8ビット(1バイト)のレジスタとして使用することができます。

## RAX、RBX、RCX、RDX、RSI、RDI、RBP、RSP は16bit CPUである 8086の時代から存在するレジスタの64bit拡張版8個です。

|64 ビット	|32 ビット	|16 ビット	|8 ビット|
|:--|:--|:--|:--|
|RAX		|EAX			|AX|			AH, AL|
|RBX		|EBX			|BX|			BH, BL|
|RCX		|ECX			|CX|			CH, CL|
|RDX		|EDX			|DX|			DH, DL|
|RSI		|ESI			|SI	||
|RDI		|EDI			|DI	||
|RBP		|EBP			|BP	||
|RIP		|EIP			|IP	||
|RSP		|ESP			|SP	||


## 64ビットモードで追加された汎用レジスタが8個（R8、R9、R10、R11、R12、R13、R14、R15）あります。

## フラグレジスタ RFLAGS

ID : Identification フラグ
VIP : バーチャル割り込み保留
VIF : バーチャル割り込み
AC : アラインメントチェック
VM : 仮想86モード
RF : Resume フラグ
NT : Nested Task
IOPL : I/O 特権レベルフィールド
OF : オーバーフローフラグ。 算術演算の結果が2の補数で表せない大きさの場合にセットされます。
DF : 方向フラグ。ストリング命令 (MOVS, CMPS, SCAS, LODS, STOS)の自動インクリメント(set)とデクリメント(clear)を指定して文字列操作の方向を決めます。
IF : 割り込み許可フラグ
TF : トラップフラグ。デバッグ用のシングルステップモードに移行する。
SF : 符号フラグ。演算結果の最上位ビットと同じにセットされます。2の補数の正負を表します。
ZF : ゼロフラグ。演算結果がゼロのときにセットされます。
AF : ビット3からのキャリーやボローが発生した場合にセットされます。
PF : パリティフラグ。演算結果の下位8ビットのパリティを示します。下位8ビットの1の数が偶数なら1、奇数なら0になります。
CF : キャリーフラグ。このビットは算術演算、シフト、ローテイト命令で最上位ビットまたは最下位ビットから桁あふれが発生した場合にセットされます。

# div arg

この命令は、レジスターの内容を「arg」で除算する。 

|除数のサイズ	|1 バイト	|2 バイト	|4 バイト|
|:--|:--|:--|:--|
|被除数		|AX		|DX:AX		|EDX:EAX|
|剰余の格納先	|AH		|DX		|EDX|
|商の格納先	|AL		|AX		|EAX|

#syscall


```
.code64
.text
.global main
main:
    mov    $msg, %rsi
    mov    $1, %rdi
    mov    $6, %rdx
    mov    $1, %rax
    syscall
    ret
.data
msg:
    .ascii  "hello "
```

以上。
Node-REDでAlexaのスキルを実行する google-home-notifierのように喋ることもできる

node-red-contrib-alexa-remote2 をいれることでNode-REDでAlexaのスキルを実行できたり、google-home-notifierのように喋ることもできるようになります。

認証方法はいくつかあるのですが、Email&Passwordは二段階認証がうまくできなかったり、Cookieは期限があったりするので今回はProxyによる認証で設定しました。

# 環境
自分の環境は以下になります。
・Raspberry Pi3 Model B
・Node-RED version: v1.0.2
・Node.js v12.13.0

# node-red-contrib-alexa-remote2のインストール
右上にあるメニューから「パレットの管理」を選択します。
<img width="185" alt="パレット.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549718/446694a7-1a80-5f19-7b0e-554fd606c407.png">

node-red-contrib-alexa-remote2を検索して追加してください。
<img width="535" alt="追加.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549718/72681918-e505-d2a8-25e0-fe3f36299785.png">

# Alexa Routineをフローに追加
node-red-contrib-alexa-remote2をインストールするとノードにAlexaが追加されますのでAlexa Routineをフローに追加します。実行するのにinjectも追加します。
<img width="612" alt="フローに追加.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549718/b5ca9d2e-7a9f-f0e2-a5ac-da5e82303d26.png">

# Alexa Accountの設定
Alexa Routineを開いてAccountを新規に追加します。

Auth MethodはProxyを選択し、This IPはRaspberry pi本体のIPアドレスを入れます。
localhostのままではうまくいきませんでした。
複数のamazonアカウントで制御したいのであればPortをそれぞれ別の値にすれば対応可能と思われます。
<img width="385" alt="認証方法.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549718/1801136f-a8f5-1b9d-5e26-891b5f174cb8.png">

下にスクロールし、Amazonの設定を行います。
Service Host：alexa.amazon.co.jp
Page：amazon.co.jp
Language：ja_JP
User Agent：空白
<img width="382" alt="amazon情報.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549718/60544cb7-9d8d-a457-3367-a635ca4817f4.png">

設定を完了して、デプロイするとさきほど設定したIPアドレスにアクセスする旨の表示が出ます。
<img width="501" alt="デプロイ.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549718/1eb54c7b-843a-1e73-f65d-7d220d6f8a5f.png">

ブラウザでraspberry piのIPアドレス:Portにアクセスすると認証画面が表示されますので、アカウント情報をいれてログインします。
二段階認証を設定している場合はセキュリティコードが送られてくるので設定します。
<img width="400" alt="ブラウザ.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549718/2d1e4305-2843-cd5c-1cad-3d6f7732764b.png">

ログインが完了するとブラウザに「Amazon Alexa Cookie successfully retrieved. You can close the browser.」と表示されるのでNode-REDに戻ります。
しばらくすると「ready」になります。

「ready」になるとAlexa Routineの画面でデバイスが設定できるようになります。
アカウントに紐づいているデバイスが設定できますので実行したいデバイスを選択してください。また、Alexaが任意の言葉を話すようにする場合はSpeakを選んでTextに任意の文字を入れます。
<img width="428" alt="デバイス選択.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549718/c2365f9d-89d8-40e5-48be-340ffcfe8802.png">


あとはタイムスタンプの左の■をクリックして実行するとgoogle-home-notifierみたいにAlexaが読み上げることができます。
<img width="392" alt="ready.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549718/6425165f-3442-243d-d7f0-9e9c6b12e26b.png">

# スキルを実行する場合
Lanch Skillを選択すれば有効にしているスキルが表示されますので実行したいスキルを追加してください。これで定期的に運行情報を通知するようなことも可能です。
<img width="608" alt="スキル.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549718/15b79b3c-a112-912e-7001-1c9e20622903.png">

以上です。
たいがいのシステムはWebシステムでいいんじゃないか

.Netでクラサバ開発を10年くらいしてましたが、ここ数年Web系の開発にシフトしています。.Netのクラサバシステムばっかり開発している人はwebについて否定的(私のまわりだけなのか?)なので、VisualStudio、WindowsOS限定ではありますが、いろいろ比較してみたいと思います。


■リリース
・クラサバ
ClickOnceやインストールパッケージを使って、まとめてからリリース。環境構築はクライアント端末ごとに必要。

・Web
ASPやwebAPIはアプリケーションの公開(=ワンクリック) でリリース。フロントをHTMで作る場合は本番環境サーバーにコピペ。

クラサバだと全クライアント端末に環境を仕込む必要があるので大変です。ClickOnceを使ったとしても設定を間違えリリース失敗とかよくあります。ClickOnceの設定も初心者には難しいです。わかっている人は往々にして忙しい。
Webならクライアント端末が100台、1000台あろうともサーバーにリリースするだけで済みます。

結論:不変なシステムならクラサバでもいいけど、不変なシステムなんてないよ。

■動作環境
・クラサバ
クライアントOSに依存する。windoows PC、Mac、Androidはすべて別ものとしてシステムを作る必要がある。Xamarinを使う手もあるが、WindwosFormに開発者にとっては厳しい。スマホで使うにはストアにアップしないといけない。

・Web 
ブラウザに依存する。windoows PC、Mac、Androidどんな端末でも使える。Chrome,IE,FireFoxあるけど業務で使う分にはどれかひとつに絞ればいい。クロスブラウザでの利用だとしても、デザインだけの問題なので、各端末ごとにシステム作るより工数はかからない。

結論:色々な端末で同じシステムを使いたいならweb一択。WindowsPCしか使わないならクラサバでも。ただしクラサバシステムはOSアップデートのたびに更新が必要。

■入力の快適さ
・クラサバ
イベント単位でサーバーとやりとりできる。ボタンを押しても画面ロードせずに値が更新される。ファンクションキーを活用して、キーボードのみで画面操作が完結できる。

・Web
PHPやASPなどサーバーサイドで処理する仕組みだとページロードが頻繁におきてしまう。Ajaxなどを使えば非同期でサーバーとやりとりできるので、クラサバと同じ感覚で画面設計ができる。ファンクションキーの使用には注意が必要。

最近はAngularなど、SPA(シングルページアクション)なフレームワークがあるので、非同期を前提にしたWebシステムの開発が楽になりました。HTMLデザイナーにとってAngualrは敷居が高いですが、C#でクラサバ開発していた人なら余裕です。クラサバ開発者にとってはむしろCSSの方が手ごわいです。クラサバ業務系システムでありがちな「Enterキーで次の入力に移動する」はWebシステムでも可能です。

結論:非同期通信により、Webでもクラサバ並みの快適さ。ただし、コンマ秒以下の早さが必要、検索結果に何万件と表示するなど、システム負荷が高いものはクラサバが有利。

■開発コスト
・クラサバ　
作り方次第

・Web 
作り方次第。フロントはHTML形式で記述できるようにすると、外注の幅が広がる。

■保守性
・クラサバ　
作り方次第

・Web 
フロントエンドとバックエンドを完全に切り離した方が楽。

■閲覧性
・クラサバ
社内環境のみ。社外からみたい場合はリモートデスクトップ。

・Web 
Webサーバーの設置場所次第。
社内のみ:ローカルネットワークにWebサーバーをたてる
外から社内の人間のみアクセス:Webサーバーにwindows認証をつけるなど
だれでも見れる:レンタルサーバーやAzureに公開するなど

結論:クラサバでもリモートデスクトップで社外から使える。社外の人が使うならWebシステム一択。

■帳票
・クラサバ
帳票開発ツールを使って作成

・Web
HTMLtoPDFで帳票作成が可能に。印刷用CSSも設定可能

HTMLでもミリ単位で配置を設定できます。ただし、ページをまたぐような帳票は要素の高さを都度取得して改ページするかしないかを判断する処理が必要です。

結論:webシステムでも帳票は出力可能

■全体
・クラサバ　社内利用&塩漬けするシステムなら問題ない。OSアップデートを乗り越えられるかがカギ。

・Web　表現がクラサバにおいついている。端末を選ばない、OSアップデートによる開発が発生しないので、利用者に有利。

何かを入力するシステムならWebシステムで十分だと思います。デバイス連携があったとしても最低限のクライアントシステムを作って、API連携でサーバーに送信し、メインの閲覧/入力はWebにするとか。

「今までOSアップデートの5年ごとにシステム更新の受注がとれてハードの売り上げもあったのに、Webシステムでクラウドに移行した日には売上たたないじゃないか!」という声もあるかもしれません(笑)
VisualStudioでC++のコードを書いている時に、"定義へ移動"が動作しない場合の対処法

未だにWindowsでデスクトップアプリなんて作ってる自分が、長年苦しめられていた
特定のcppファイルで"定義へ移動"が動作しなくなる問題の対処法が分かった話

##忙しい人のために
ソースと同じフォルダ内に"cpp.hint"というファイルを作成し、

````
 #define BEGIN_MSG_MAP_EX(theClass) @<
 #define END_MSG_MAP() @>
````

と、書き込んでください

##経緯

自分はよく、WTLというライブラリを使用してデスクトップアプリを書いているのだが、
作成するウィンドウ一つに付き大体

````C++
class CScrollConteinerView : 
	public CScrollWindowImpl<CScrollConteinerView>
{
public:
	CScrollConteinerView();

	BEGIN_MSG_MAP_EX(CScrollConteinerView)
		MSG_WM_CREATE(OnCreate)
		MSG_WM_DESTROY(OnDestroy)
	END_MSG_MAP()

	int OnCreate(LPCREATESTRUCT lpCreateStruct);
	void OnDestroy();

};
````

こんな感じのクラスを作っていた
しかし、.cpp側に OnCreate などの定義を書いているにも関わらず、OnCreate上で"定義へ移動"を実行したり、逆に定義側で"宣言へ移動"を実行してもうんともすんとも言わずに、OnCreateに波線が引かれ「OnCreate の関数定義が見つかりません。」と言われてしまう…
コンパイルは通るのでC++的に問題のないソースには違いないが、定義へ移動が使えないと不便で仕方がなかった

そんなとき、BEGIN_MSG_MAP_EXにクイックアクションの表示が出ているのに気づいた
![コメント 2019-12-14 033211.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78826/edfe18f8-acc4-e4f9-aa89-78f6f666115f.jpeg)
ヒントファイルってなんだ？と思い、説明を見るで飛ばされた先のドキュメントを読むと定義へ移動が動作しない原因が判明した
https://docs.microsoft.com/ja-jp/cpp/build/reference/hint-files?view=vs-2019

>C++ 参照データベース パーサーは、短時間で大量のコードを解析できるあいまいなパーサーです。 高速な理由の 1 つにコンテンツのブロックをスキップすることが挙げられます。 たとえば、関数の場所とパラメーターのみが記録され、そのコンテンツは無視されます。 一部のマクロはブロックの開始と終了の決定に使用するヒューリスティックの問題を引き起こす可能性があります。 この問題によって、コードの領域が正しく記録されなくなります。

問題を起こす一部のマクロをばっちり使っちゃってました…

WTLはメッセージマップという仕組みを用いて、各種ウィンドウメッセージの処理をメンバ関数に紐づけています
この仕組みのためのマクロを C++ 参照データベース パーサーが理解できず、定義に飛べなかったというわけです

原因が分かれば対処できます
エラーを回避するために、パーサーに問題のマクロ部分をスキップさせるためのヒントファイルを作成します
ヒントファイルの書式はドキュメントに書いてあったのでチャチャっと書いて"ソリューションの再スキャン"を実行
無事波線も消え、定義に飛ぶことができるようになりました！

##終わり
たった2行書き込まれたファイルがないために、長年苦労してた自分は一体何だったのだろうか

今度から問題が起きた場合は、プロジェクトの右クリックメニューから"参照データーベース エラーを表示"を実行すれば問題が把握できるので積極的に活用していきたい
React function compornent(FC)とclass compornentの違い

新しく書き始める時に**function compornent(FC)**と**class compornent**で書く違い、書き方を学んだので、memo。

## React function compornent(FC)とclass compornentの違い
基本的にはfunction compornent(関数コンポーネント)で書いた方が推奨されている。


使い分けるポイントとしては…

**FCは、簡潔に書くことができる**
class compornentのrender部分だけで書いてる感じ。
デメリットは状態管理によるrender()制御ができない（制御できることといえば、propsを渡せることだけ）

**class compornentは状態を管理したい時に使う**
・ライフサイクルメソッドを適切に使うことにより、render() を制御することが可能。
・propsはもちろんstateも使うことができる


## 書き方の違い

- **function compornent(FC)**

```js
import React from "react";

const Test = () => {
  return (
    //処理
    <div>
      <h1>{'FCの書き方！'}</h1>
    </div>
  );
};
export default Test;
```

- **class compornent**

```js
import React from "react";

class Test2 extends React.Component {
  //なくてもよい
  constructor(props) {
    super(props);
    this.state = {count: 100}; // stateも使える
  }

  // render() メソッドは、クラスコンポーネントで必ず定義しなければならない唯一のメソッドなので必要
  render() {
    return (
      //処理
      <div>{'class compornentの書き方'}</div>
    );
  }
}

export default Test2;

```

使うときは、、、

```js
import Test from "./FCTest.index"; 
import Test2 from "./ClassTest.index";

return (
    <Test /> 
    <Test2 /> //これで使える
）;

```


参考
https://ja.reactjs.org/docs/react-component.html
https://teratail.com/questions/118890
https://www.sambaiz.net/article/225/
VSCodeのPylintがimportでうざい！！！！

この記事は、エラーの握りつぶしに近い行為を行っています。
**一通り問題が解決したら、こちらの記事(https://qiita.com/ysk24ok/items/2711295d83218c699276) も読むべきです。**

#初めに
VSCodeのPylintがimportでうざい！！！！
っていきなりなんだい。って話ですが、

VSCodeでPythonを書くとき、
自作モジュールを相対インポートしようとすると、必ずと言っていいほどエラーが出ます。

#0.環境

グローバル環境(仮想環境を使用せず)で以下のディレクトリ構造です。

```
~
-Sample
 -main.py
 -__init__.py
 -sub_methods
  -method1.py
  -method2.py
-out.py
```
それぞれ、以下のコードを持ちます。

```python:main.py
print("main")
from sub_methods import method1
```

```python:__init__.py
print("__init__")
import os
originaly = os.getcwd
os.chdir(os.path.dirname(os.path.abspath(__file__)))
from . import main
os.chdir = originaly
```

```python:method1.py
print("method1")
import method2
#from sub_methods import method2
```

```python:method2.py
print("method2")
```

```Python:out.py
print("out")
from Sample import main
```
#1.unresolved import
この状態でもワーニングがわんさか出ています。
![2019-12-14 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283963/19963b3c-2414-e64c-9ee7-064d5f81c437.png)

この`unresolved import '...'`というのは、ワークスペースのルートから一層以上深いと、相対インポートしたときに出てきやがります。

未解決って言われましても…って感じですね。
これを落ち着かせるには、

`Ctrl + Shift + P`>`Settings.json`を開いて

![2019-12-14 (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283963/755199e1-b277-ec3f-5037-62cb5e81a288.png)

**`"python.jediEnabled": false`を`"python.jediEnabled": true`にするか
この項自体を削除します。**

![2019-12-14 (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283963/4ccdc05f-67ce-af2f-20c1-4406eeaa4bbc.png)

#2.Unable to import

![2019-12-14 (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283963/57980cb7-6f0c-e2f6-773f-0c13f1be258b.png)

うるせぇ！俺はmainを直接起動するからカレントディレクトリは`Sample`なんだよ！！！！

…え？outから起動して
`from sub_methods import method1`を`from .sub_methods import method1`
に書き換えろって…？
ワークルートとカレントディレクトリをずらすな…？

>
> チッ　うっせーよ…　反省してま~す
>

冗談はさておき、mainのみではなく、method1からmethod2を呼び出すとすると、
どうしても`Sample`をカレントディレクトリとしてimportを行うことになります。

![2019-12-14 (9).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283963/20fcd78e-1af3-57ec-945c-bef25a7ff483.png)

```python:method1.py
print("method1")
import method2
#from sub_methods import method2
```

```:output
ModuleNotFoundError: No module named 'method2'
```

変更>

```python:method1.py
print("method1")
#import method2
from sub_methods import method2
```

```:output
main
method1
method2
```

こう書くしかないのに、エラーなんて出されてたら気が散って仕方ありません。
これは、**カレントディレクトリ(ここでは`Sample`)を、Pylintにライブラリフォルダーと認識させることで抑制することができます。**

```
lib
-os
 -...
-numpy
 -...
...
```

が、デフォルトのライブラリ認識だとしたらここに

```
lib
-os
 -...
-numpy
 -...
-main
-sub_methods
 -method1
 -method2
```

といった感じに認識させれば
`from os import path`などと同じように`from sub_methods method2`を書いても怒られないはずです。

そこで、**ワークルートのフォルダに、以下のファイルを作ります**

```:pylintrc
init-hook="./Sample"
```

これでlintを再読み込み、またはVSCodeを再起動すると、エラーが表示されなくなったはずです。

#まとめ

1."python.jediEnabled": falseを"python.jediEnabled": trueにするか
この項自体を削除します。
2.ワークルートのフォルダにpylintrcを作って、init-hookにmain.pyが含まれるフォルダを与えます。

この記事は、エラーの握りつぶしに近い行為を行っています。
**一通り問題が解決したら、こちらの記事(https://qiita.com/ysk24ok/items/2711295d83218c699276) も読むべきです。**
rails 新規アプリ作成時：Mysqlにてbundle exec rake db:createが上手くいかない解決記録

rails 新規アプリ作成時に、Mysqlにてbundle exec rake db:createが上手くいかない解決記録（自分用）

```
①　bundle exec rails new　アプリ名 . -B -d mysql --skip-test --skip-coffee
```

```
②　bundle exec rake db:create
```

error文、
rake aborted!
No Rakefile found (looking for: rakefile, Rakefile, rakefile.rb, Rakefile.rb)



色々試し、不要なコマンドは実行したと思われるが、次回はここから行う。

```
$ ①　mysql.server start 

　②　$ bundle exec rake db:create RAILE_ENV=development
```

####＊rake aborted!
#####No Rakefile found (looking for: rakefile, Rakefile, rakefile.rb, Rakefile.rb)　　が出る場合は、rakefileがあるディレクトリにcdで移動後、再度$ bundle exec rake db:create RAILE_ENV=developmentで
無事にCreated database となった。
PHP案件プロジェクトのソースコードを見て感じたこと

#はじめに
PHP Advent Calender 14日目の記事です。
こちらの経験談で書いたコーディングの部分で実際の現場のコードを見て感じたことについてまとめた記事になります。

[やらかしまくった一人プロジェクトの経験談](https://qiita.com/cube_3110/items/fa5053bc5a577728b006)

若干思い出しながらになりますが最後までお付き合いいただけると幸いです。


###①複数クラスの同じ処理の共通化をし忘れる
これは、この現場だけじゃなくていろんな現場でやらかします。

修正前

```classA.php
class A
{
処理A(処理B,Cと共通する部分あり)
}
```
```classB.php
class B
{
処理B(処理A,Cと共通する部分あり)
}
```
```classC.php
class C
{
処理C(処理A,Bと共通する部分あり)
}
```

修正後

```classABC.php
class ABC {
処理D
}
```

```classA.php
class A extends ABC
{
処理A
}
```

```classB.php
class B extends ABC
{
処理B
}
```

```classC.php
class C extends ABC
{
処理C
}
```

このように共通処理をクラスABCにまとめてそれを継承するといった形の方が可読性も良くなりますし、今後も共通化する部分のコーディングは行わなくて良くなるのできっと分かりやすい！
→いわゆるオブジェクト指向ですね。。。

###②クラス名や変数名がイケてない
これも結構あるあるですよね。。。

```ContainerCreationModelBean.php
class ContainerCreationModelBean
{
処理
}
```

これは自分がっていうより前任者がこんな感じで書いてたんですけど〇〇BeanってJavaで出てくるJavaBeansやんけって見た瞬間突っ込んでしまった。。。
まあ多分もともとJava書いてた人なんでしょうね・・・
とはいえこれもJavaBeansの仕様を理解してない人からすると意味分からないですよね・・・

###③HTMLにPHP埋め込み

もはや害悪ですよね。。。
本当はPHPとHTMLを分けて書きたかったんですけど、これはもう規模も膨大だったので諦めて自分もそれに習って埋め込んじゃいました。。。

例

```html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>AAA</title>
</head>
<body>
<h1><?php echo "BBB"; ?></h1>
</body>
</html>
```

###④コントローラーの肥大化
参考資料
[やはりお前らのMVCは間違っている](https://www.slideshare.net/MugeSo/mvc-14469802)

「コントローラーがコントロールするのはアプリケーションの処理ではない。
ユーザーの操作に基づきモデルをコントロールするのが仕事。」
グサッと刺さりますね。
結構ここを間違えて捉えてコントローラーにアプリケーションの処理のコントロールを全てやらせようとしちゃうんですよね・・・
コントローラーが便利すぎてコントローラー任せになっちゃってて役割が崩壊してちゃったなぁ・・・

###⑤ノーテストコード

これはまあなんとなく分かってたことではあったんですけどテストコードと呼ばれるものはなかったですね。
一応バッチ処理は一部あったのかな。。。
実際、テストは画面遷移をエクセルに画面スクショでエビデンス残すっていう形ですごく効率悪かったですね。。。
できればテスト用のコードも導入したかったんですけどね・・・

#終わりに
5つ事例を紹介しました！
やっぱコーディングしてて思ったのはオブジェクト指向大事だよなぁって思いました。
まだ自分の書くソースコードは、なんちゃってオブジェクト指向なのでちゃんとオブジェクト指向を意識したコーディングができるようになりたいと思います。
Git for windows 2.24.1 でnanoのgit.nanorcが壊れてる問題

## Git for Windowsでcore.editorにnanoを使いたかった

でも、なんだかgit.nanorcが変。

```
Error in /usr/share/nano/git.nanorc on line 1: Regex strings must begin and end with a " character
" not understoodare/nano/git.nanorc on line 2: Command "
" not understoodare/nano/git.nanorc on line 10: Command "
" not understoodare/nano/git.nanorc on line 15: Command "
Error in /usr/share/nano/git.nanorc on line 19: Regex strings must begin and end with a " character
" not understoodare/nano/git.nanorc on line 20: Command "
" not understoodare/nano/git.nanorc on line 23: Command "
" not understoodare/nano/git.nanorc on line 26: Command "
" not understoodare/nano/git.nanorc on line 33: Command "
" not understoodare/nano/git.nanorc on line 36: Command "
" not understoodare/nano/git.nanorc on line 42: Command "
" not understoodare/nano/git.nanorc on line 44: Command "
" not understoodare/nano/git.nanorc on line 47: Command "
" not understoodare/nano/git.nanorc on line 50: Command "
" not understoodare/nano/git.nanorc on line 51: Command "
Error in /usr/share/nano/git.nanorc on line 53: Regex strings must begin and end with a " character
" not understoodare/nano/git.nanorc on line 54: Command "
" not understoodare/nano/git.nanorc on line 57: Command "
" not understoodare/nano/git.nanorc on line 60: Command "
" not understoodare/nano/git.nanorc on line 74: Command "
" not understoodare/nano/git.nanorc on line 77: Command "
" not understoodare/nano/git.nanorc on line 80: Command "
```

とか起動するたびに表示される。
最初はWindowsの特殊文字エスケープ問題かなぁと思っていたけれど、なんとなくGitHubのリポジトリを見に行ったらそのものずばりなissueが立っていた。

https://github.com/git-for-windows/git/issues/2429

というわけで、コメント欄で改行文字が狂っていることが原因だと知り、さらにそれを直すためのコマンド `dos2unix` の存在を知った。そのコマンドを教えてくれた人はパーミッションに阻まれているみたいだったけど、そこはgit bashそのものを管理者権限で実行してからおもむろに以下のコマンドを実行。

```sh
$ dos2unix /usr/share/nano/git.nanorc
```

そして無事にエラーは出なくなり、最後にGitHubにコメントを残して解決。
たぶんこの問題はすぐに解決されるだろうけど、もし今悩んでる方がいらっしゃったらご参考になれば幸いです。