OmniAICreator/Qiita-1.07M huggingface dataset:
Sequel ProでMySQL8.0に接続接続できない

接続しようとすると`「MySQL said: Authentication plugin 'caching_sha2_password' cannot be loaded」`となり接続できません。

### MYSQL8.0から認証方式が変わっている
>MySQL8.0からログイン認証方式に caching_sha2_password が採用されています。キャッシュを利用することにより、パフォーマンス面で今までの認証方式よりも優れています。
Sequel ProでログインできなかったのはSequel Pro側で caching_sha2_password がサポートされていなかったためです。ログイン認証するには、クライアントとサーバーで同じ認証形式がサポートされている必要があります。

DockerでMySQL8.0の環境構築 & 認証方式変更
https://www.wakuwakubank.com/posts/596-mysql-8-with-docker/

### Sequel ProはMySQL8.0.x未対応


### Sequel Proの後継アプリで接続できます。
ついにSequel Proの後継アプリ登場！Sequel AceでMySQLに接続する
https://qiita.com/ucan-lab/items/b1304eee2157dbef7774
jsによってsubmitを実行した場合、onsubmitは動かない



```javascript:動かない

<form action="" method="post" onSubmit="return check()">
<input type="submit" onClick="action()" />
</form>

<script>

function check() {
  ...
}

funciton action(){
   document.form.submit();
}

</script>
```



正解はこれ。



```javascript:動く

<form action="" method="post" onSubmit="return check()">
<input type="submit" id="test" />
</form>

<script>

function check() {
  ...
}

funciton action(){
  document.getElementId("test").onclick;
}

</script>
```

jsでsubmitボタンをクリックするとonsubmitは起動する。
Pythonチャットボットを作成する5つの方法

こんにちは開発者の皆さん、今日は、あなたが好きで、自分でやりたいと思うクールなpythonプロジェクトを紹介します。したがって、今日はpython GUIチャットボットを作成するので、待たないでください。
![python-file.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693764/8aebf0d3-517b-924e-121d-7ee344119a67.png)


しかし、チャットボットの作り方は？
それでは、チャットボットを簡単に作成する方法について、まっすぐ進みましょう。

必要条件
Pythonの最新バージョンをインストールできるラップトップまたはPC。
Visual Studio CodeやAtomのような優れた高速のコードエディタまたはIde。
重要なポイントを書けるノート。
最後に、あなたの焦点。
必要なPythonパッケージ/ライブラリ：
1. pip install nltk
2. pip3 install ChatterBot
3. pip install pyttsx3
4. pip install SpeechRecognition
チュートリアル？
最初のステップは、フォルダ名chatbotを作成し、それをコードエディタにドラッグして開きます。
2番目のステップは、main.py [あなたのチャットボットコード]＆chat.txt [チャットボットに暗示するチャットボットコマンドを保存するためのファイル]を作成することです。
その後、ターミナルに行き、以下のリストに従ってpip拡張/パッケージをインストールします。
1. pip install nltk
2. pip3 install ChatterBot
3. pip install pyttsx3
4. pip install SpeechRecognition
第四に、それに応じてコードで与えられた引用を読んだ後、コードをコピーします。私はそれをマイナス面で与え、最後にそれを貼り付けました。
最後に、python main.pyをタップして実行すると、チャットボットが作成されます。

完全なソースコード <a href="https://thecodezine.com/how-to-build-a-chatbot-in-python/">Codezine Python Chatbot</a>
【Laravel6.x以降対応】既存のDBからマイグレーションファイルを作成する方法

既存のテーブルをLaravelで使用するときに、いちいち手書きでマイグレーションファイルを書くのは大変なので自動で生成したい。
migrations-generatorで出来るらしい。

### しかしLaravel6.x以降には対応していない
Laravelで既存のDBからmigrationsファイルを作成する「migrations-generator」
https://qiita.com/busyoumono99/items/a7173ad6b9b041da09dd

### 6.x以降ではoscarafdev/migrations-generatorのリポジトリを使用する

>そして、そのステップ１として、前回の既存のＤＢからmigrationファイルを自動作成のパッケージの紹介でした。
しかし、このパッケージ、残念ながらLaravel6.xでは互換性で使えない、と思ったら対応しているこれまたレポをフォークしたパッケージがありました。
https://github.com/oscarafdev/migrations-generator
捨てる神があれば、拾う神ありです。助けられます。

### 手順

1.oscarafdev/migrations-generatorをインストール

```
$ composer require oscarafdev/migrations-generator --dev  
```

2.マイグレーションファイル生成
既存のusers,password_resets,failed_jobs,migrationsのマイグレーションファイルは生成しないように設定。

```
$ php artisan migrate:generate --ignore"users,password_resets,failed_jobs,migrations"
```

3.使えるか確認

positionsテーブルを使えるようにしていきます。
Positionモデルを生成。

```
$ php artisan make:model Position
```

テーブル名を設定

```Position.php
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Position extends Model
{
    protected $table = 'positions';
}
```

コントローラー作成

```
$ php artisan make:controller PositionController
```

```PositionController.php
<?php

namespace App\Http\Controllers;

use App\Position;
use Illuminate\Http\Request;

class PositionController extends Controller
{
    public function index()
    {
        $positions = Position::all();
        var_dump($positions);
    }
}

```

ルーティング設定

```web.php
<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Auth::routes();

Route::get('/', 'HomeController@index')->name('home');

Route::get('/positions', 'PositionController@index')->name('positions.index');
```

無事取得できていた。
【jQuery】$(this)ってなんやねん！？

##スクールで習って無いですけど？
$(this)という記述がネットで調べてると出てきますね。
jQueryだけじゃなく、Laravelでも似たような物が出てきました。

でもjQueryではもっと直感的にわかりやすいと思いました。とりあえずすぐにアウトプットしておきます


##英語のthisと似ているぞ
this
↓
指示語
↓
前に出てきた単語を指す
↓
前に出てきてるセレクタを探す
↓
そのセレクタのこと！！

ホント英語の読解問題の解き方のようなイメージ

##thisは対象の一つ、セレクタだとそのセレクタ全部になってしまう
セレクタを探しても、それ全体という訳ではなく、`クリックされたセレクタ限定`

下のデモで確認。
クリックした物だけアンダーラインが表示されます。

####thisを使ったバージョン

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="rjwxfqli" data-slug-hash="LYNRNRK" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="クリックしたらアンダーライン">
  <span>See the Pen <a href="https://codepen.io/rjwxfqli/pen/LYNRNRK">
  クリックしたらアンダーライン</a> by 大野原 信 (<a href="https://codepen.io/rjwxfqli">@rjwxfqli</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

####this不使用バージョン
これがthisを使っていないと

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="rjwxfqli" data-slug-hash="eYZdZBj" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="クリックしたらアンダーライン(this不使用)">
  <span>See the Pen <a href="https://codepen.io/rjwxfqli/pen/eYZdZBj">
  クリックしたらアンダーライン(this不使用)</a> by 大野原 信 (<a href="https://codepen.io/rjwxfqli">@rjwxfqli</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

一つのh5要素をクリックすると全てのh5にアンダーライン！！

####if文とクラス名とCSSを駆使してアンダーラインの点灯バージョン

ついでに、アンダーラインが引かれたものをもう一度クリックするとなくなるようにしてみます。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="rjwxfqli" data-slug-hash="bGpwEYd" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="thisの理解（thisじゃないver）">
  <span>See the Pen <a href="https://codepen.io/rjwxfqli/pen/bGpwEYd">
  thisの理解（thisじゃないver）</a> by 大野原 信 (<a href="https://codepen.io/rjwxfqli">@rjwxfqli</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


##thisって便利ですね！
イベントの発生ではクリックされたものだけを対象にすることが多いと思われます。それからidなどで指定して2回、タグとidを記述するかのいずれかになりますかね。

とりあえずthisの便利さがわかったところで、laravelでの使い方も勉強していきます。
iOSアプリのビルドからTestFlightアップロードまでの作業を自動で行う

どうも、現在子供が夏休みのため義実家の神戸に帰省して子供を義母と義祖母とに見てもらいながらぬくぬくリモート勤務を行なっているiOSエンジニアのkaです。  
テスト用アプリを配布するためにTestFlightを利用しているのでいっつもポチポチクリックしている作業を自動化します。  
現在配属されているプロジェクトはiOSエンジニアは一人なのでまだCIは利用していませんが、少し変更すればすぐに対応できると思います。

#結論
このシェルスクリプトでOKです  

``` shell.sh
#!/bin/bash
readonly PROJECT_DIR="プロジェクトディレクトリ"
readonly WORKSPASE="ワークスペース名"
readonly SCHEME="スキーム名"
readonly ARCHIVE_DIR="アーカイブ作成ディレクトリ"
readonly EXPORT_PATH="ExportOptions.plistを指定(後述)"
readonly USER="AppStoreConnectで利用するAppleID"
readonly PASS="App用パスワード(後述)"

cd $PROJECT_DIR

rm -rf $ARCHIVE_DIR
mkdir $ARCHIVE_DIR

xcodebuild -workspace ./$WORKSPASE.xcworkspace \
    -scheme $SCHEME \
    -configuration Release \
    archive \
    -archivePath $ARCHIVE_DIR/build

xcodebuild -exportArchive \
    -archivePath $ARCHIVE_DIR/build.xcarchive \
    -exportPath $ARCHIVE_DIR \
    -exportOptionsPlist $EXPORT_PATH

xcrun altool --upload-app \
    -f $ARCHIVE_DIR/$SCHEME.ipa \
    -t ios \
    -u $USER \
    -p $PASS \
```

#

#補足

#####ExportOptions.plistに関して
これは一度手作業でAppStore用にアーカイブをエクスポートすると自動で生成してくれるのでそれを使うのが良いです。

#####xcrun altoolに関して
引用: https://qiita.com/messhi/items/cb8c6f2b4b6540995189
こちらを参考にしていますが、実際にJenkinsなどで運用する場合にはこちらの記事の後半にあるAPI-Keyを使う方法でやるのが良いと思います

#####App用パスワードに関して
AppleIDのページで生成します

https://appleid.apple.com/account/home
>[セキュリティ]で、[App用パスワード]の[パスワードを生成…]をクリックします。

引用: https://qiita.com/uhooi/items/ec9dcd480a04bce8a963


#終わりです

Brewus,Inc.
株式会社ブリューアス
https://brewus.co.jp
BinaryHeapに優先度を指定して追加したい

Rust初心者がいろいろやってみているところ、参考にはしないでもらいたい。

BinaryHeapを使用して、優先度に応じて取り出したいのだけど、どうやればよいのかわからなかったので、いろいろ調べてみた。

1. BinaryHeapに追加するにはOrdが実装されていないといけない。
2. その時々で優先度をつけるためには、優先順位を付与したオブジェクトでラップしてやればよい

ということで、こんな風になった。

```rust
use std::cmp::Ordering;
use std::cmp::Reverse;

struct Priority<T,P : Ord + Copy>(T, P);

impl<T,P : Ord + Copy> Priority<T,P> {
  fn  new(obj: T, priority : P) -> Priority<T,P> {
    Priority(obj, priority)
  }
  fn rev(obj: T, priority : P) -> Reverse<Priority<T,P>> {
    Reverse(Priority::new(obj, priority))
  }
}

impl<T,P : Ord + Copy> Eq for Priority<T,P> {}
impl<T,P : Ord + Copy> PartialEq for Priority<T,P> {
  fn eq(&self, other : &Priority<T,P>) -> bool {
    self.1.eq(&other.1)
  }
}
impl<T,P : Ord + Copy> PartialOrd for Priority<T,P> {
  fn partial_cmp(&self, other : &Priority<T,P>) -> Option<Ordering> {
    Some(self.1.cmp(&other.1))
  }  
}
impl<T,P : Ord + Copy> Ord for Priority<T,P> {
  fn cmp(&self, other : &Priority<T,P>) -> Ordering {
    self.1.cmp(&other.1)
  }
}
```
BinaryHeapはmax-heapなので、Priorityとした。
優先度が高い方が数値にしたとき数字が大きいイメージがあるから、優先度低い方から出すときは、std::cmp::Reverseを一緒に使う。

使い方は以下のようにPriority::new と Priority::revでラップしてBinaryHeapに追加する。


```rust
use std::collections::*;
fn main(){
  let mut heap = BinaryHeap::new();
  heap.push(Priority::new("A", 2));
  heap.push(Priority::new("B", 3));
  heap.push(Priority::new("C", 1));

  while let Some(Priority(s, pr)) = heap.pop() {
    // 優先度が高い方が先に出るので、BACの順
    // B 3
    // A 2
    // C 1
    println!("{} {}", s, pr);
  }

  let mut min_heap = BinaryHeap::new();
  min_heap.push(Priority::rev("A", 2));
  min_heap.push(Priority::rev("B", 3));
  min_heap.push(Priority::rev("C", 1));
  while let Some(Reverse(Priority(s, pr))) = min_heap .pop() {
    // 優先度が低い方が先に出るので、CABの順
    // C 1
    // A 2
    // B 3
    println!("{} {}", s, pr);
  }
}
```
Power Automate のオブジェクト変数はこうやって使うべし

# 変数アクション便利ね！

初期値とかいろいろ設定できるから、変数アクションよく使ってます。
変数は「文字列、整数、Float、プール値、オブジェクト、アレイ」の6種類が存在します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/e22c58a6-8c33-16cf-a56e-af94b8aecdd9.png)

# 初期値がいっぱいあるとさー

こうなっちゃうわけですよ・・・

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/299ade84-75ce-47a2-981e-4a7c538ff7ac.png)

これだけで6アクションも使っちゃうわけなので
いやはや見るのがめんどくさい。（可読性悪し）

# スコープに入れられない・・・

変数って、使うときはまず初期化する必要があるんですけどね
アクションをひとまとめにするスコープってのを使えばいいんじゃない？ってまず思うんですよ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/d505d28f-ab1a-b104-457b-3171e9108983.png)

で、入れようとするとですよ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/57f2b10a-9a75-d2e6-336a-0326bfa51778.png)

怒られるんですねー。
なのでつらつら書くしかないわけです。

ってことで、一つの変数に複数の値を宣言できるオブジェクト変数を使うことになるわけです。

# オブジェクト変数
## 宣言の仕方

簡単な話、JSON書きなさいってお話です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/fbf1441b-661a-544e-71b1-2649a0a3ef61.png)

ただ、これだと後続のアクションで使用できないので
JSON解析アクションを追加する必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/9bbc13fa-39be-1847-912b-8ad58f9a8df0.png)

そうすると、後続アクションでオブジェクト変数の各値をそれぞれ使うことができるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/d9feb3b6-4599-6f89-5f4f-ae502b5927ef.png)

## 特定の値を変更したい場合・・・

実はここが厄介でしてね
例えば、Bの値だけを変えたいので、変数の設定でBの値のみ変えるように設定するじゃないですか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/2e0c6a74-d7f3-2e4c-0261-54f96cde8316.png)

で、これをJSON解析するわけですね
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/47e46b9b-3165-16ce-b8c4-c04bd80fd03a.png)

すると、Aの値は消え失せて、Bのみの値が入るようになるわけです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/0a13fb54-8c20-2c53-49bb-44945f0e5e89.png)

ただ、初期化時のJSON解析のデータは残っていますので
こういう風にしてあげれば
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/ced29564-7e57-893e-4784-9e2ab2353cac.png)

前の情報も値として引き続き使えるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/3ee79338-a5d5-a3e1-8e34-6e550d93b476.png)

# まとめ

オブジェクト変数は使い方にちょっと一癖ありますが
使い慣れると、非常に可読性も高い素晴らしい機能となっていますので
是非皆さん負けずに使いこなして、素晴らしい業務フローを作成していってくださいね＼( 'ω')／
【Auth0】ログイン状態を維持する期間を変更する

# はじめに
Auth0のUniversal Loginを使っているアプリケーションに一度ログインをするとAuth0とユーザーエージェント（大抵の場合ブラウザだと思います）の間で認証済みのセッションが確立します。
そのため次にアプリケーションにログインするときにはUniversal Loginを呼び出してもIDとパスワードの入力を求められることなくログインが成功します。

Auth0はこの認証済みのセッションの有効期限をテナント単位に任意の期間に設定することができるのでやってみました。

# テナント設定

Auth0の管理画面のテナント設定メニューを開きます。

![スクリーンショット 2020-08-13 16.31.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653972/cfae9787-2d6d-180a-1c1b-cddc489c08ad.png)

表示されたテナント設定メニューの`Advanced`タブを選択します。

![スクリーンショット 2020-08-13 16.38.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653972/3db52e15-9ff1-fada-9d53-f1870f013147.png)

`Advanced`タブの中に`Log In Session Management`という設定があるので
ここの`Inactivity timeout`と`Require log in after`という項目を設定することでセッションの有効期限を変更することができます。

![スクリーンショット 2020-08-13 16.43.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653972/2bb024bf-152e-87d2-0c09-9d49a9532103.png)

# Inactivity timeout

`Inactivity timeout`はユーザーが再ログイン（再アクセス）してくる間隔が、どれくらいの期間までならIDとパスワードの入力を省略するかの期間設定です。最大で3日間（4320分）までの設定が可能です。

ユーザーがここで設定した期間内に継続して再ログインをする限りはIDとパスワードの入力は省略され続けます。
逆にユーザーがこの期間を超えて再ログインをしてこない場合は、次にログインするときにIDとパスワードの入力が求められるようになります。

# Require log in after

`Require log in after`は継続的なログインの有無とは関係なく、強制的にIDとパスワードの入力を求めらるようになるまでの期間設定です。

IDとパスワードを入力してのログイン後に`Inactivity timeout`に設定した期間内で定期的に再ログインをしていたとしても、ここで設定した期間を超えるとIDとパスワードの入力を求められるようになります。

最大30日（43200分）まで設定が可能で、`Inactivity timeout`より長い期間を設定しなければなりません。

# おわりに
`Log In Session Management`の2項目を設定することで自身のポリシーに沿った認証セッションの有効期限を設定することができます。
デフォルトでは`Inactivity timeout`が4320分（3日間）、`Require log in after`が10080分（７日間）に設定されていると思います。もしもこの値がポリシーに合わない場合は変更してみてください。
jQueryのoffset()メソッドで取得できる値について

スクロールしていない状態のtopやleftの値が取得できる。
例えばボタンを押した際にh1のtopの座標位置を取得する場合、そのボタンがページの一番下(スクロールされた状態)にあっても取得できる値は、スクロールしていない状態のh1の値を取得することになる。
Node.js Ⅲ

◆削除機能をつける 削除ボタンの準備

①ルーティングを用意
app.post('/delete',(req,res) => {
処理
});

②削除ボタンを用意
<form action="/delete" method="post">

③リダイレクト
app.post('/delete',(req,res) => {
res.redirect('/index');
});

◆削除の処理
①index.ejs

<form action="/delete/<% item.id %>" method="post">

②app.js

app.post('/delete/:id',(req,res) => {
res.redirect('/index');
});

◆受け取った値をクエリで実行しよう

app.post('/delete/:id', (req,res) => {
connection.query(
'DELETE FROM items WHERE id = ?',
[req.params.id],
(error,result) => {
res.redirect('/index');
}
)
});
DDD+レイヤードアーキテクチャにおけるユーザー登録時のデータの流れ


書籍「ドメイン駆動設計入門　ボトムアップでわかる！ドメイン駆動設計の基本」で紹介されている、DDD+レイヤードアーキテクチャの実装サンプル itddd/Layered のデータフローを図に起こしたので以下に記載する。

# ユーザー新規登録時のデータフロー
![itddd-アーキテクチャ (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189790/23cdf1d8-92c0-f9b3-5765-9ef085739461.png)

- Controller、ApplicationService, Repositoryでデータの詰め替えが行われている。（※ちなみにユーザー取得でContollerにUser情報を返却する場合は、Chapter6で登場するDTOのUserDataに詰めてからUserGetResultに乗せて返却している。)
- エンティティのUserはFactory経由で生成している。

以下、書籍と読み合わせるためにChapterとクラスの記載箇所を列挙する。

# ドメインオブジェクト(Chapter 2, 3）

- SnsDomain/Users/User(エンティティ)
- SnsDomain/Users/UserId(値オブジェクト)
- SnsDomain/Users/UserName(値オブジェクト)

# ドメインサービス(Chapter4)
値オブジェクトやエンティティに実装すると違和感があるふるまい（重複ユーザの確認など）を定義する。状態を持たない。

- SnsDomain/Services/UserService 

# リポジトリ(Chapter 5)
責務はドメインオブジェクトの永続化や再構築。

- SnsDomain/Models/Users/IUserRepository
- EFInfrastructure/Persistence/Users/EFUserRepository(5.7 ORMのEntityFrameworkによる実装)

# アプリケーションサービス, DTO, コマンドオブジェクト(Chapter 6)
### SnsApplication/Users/UserApplicationService
ドメインオブジェクトを強調させてユースケースを実現するオブジェクト。ドメインのルールは記述されるべきではない。状態を持たない。


### SnsApplication/Users/Commons/UserData

ドメインオブジェクトをDTO(Data Transfer Object)にデータを移し替えて返却する。
（ドメインオブジェクトを外部に公開すると以下のデメリットがあるため）

- ドメインオブジェクトの振る舞いがアプリケーションサービス以外で呼び出され、アプリケーションとして提供すべきコードが各所に散らばる
- ドメインオブジェクトに対する多くの依存が発生し、ドメイン変更時の影響範囲が大きくなる

### SnsApplication/Users/Update/UserUpdateCommand

仕様変更時にアプリケーションサービスのメソッドのシグネチャが影響を受けないように、コマンドオブジェクトとして定義する


# DI Container(Chapter 7)
依存関係のコントロール。itddd ではC#のServiceCollectionを利用。

- WebApplication/Config/Dependency/EFDependencySetup 
- WebApplication/Config/Dependency/InMemoryModuleDependencySetup 
- WebApplication/Config/Dependency/SqlConnectionDependencySetup 

# MVCフレームワーク(Chapter 8)
- WebApplication/Startup
- WebApplication/appsettings.json

### WebApplication/Controllers/UserController
利用者からの入力データ(Httpリクエスト)をアプリケーションに伝えるための変換を行っている。

### WebApplication/Models/Users/Post/UserPostRequestModel
ビューから受け渡されるデータがバインドされるオブジェクト。
UserRegisterCommandと類似するデータ構造だが、用途が違うので使い回さない。
InfoGAN: Interpretable Representation Learning by Information Maximizing Generative Adversarial Nets のメモ

- Xi Chen, Yan Duan, Rein Houthooft, John Schulman, Ilya Sutskever, Pieter Abbeel
- https://arxiv.org/pdf/1606.03657.pdf

- InfoGAN 画像とlatent codeの間の情報量を最大化することでunsupervised で学習する？
- MNISTとSVHN。CelebAを使っている。
- GANがベース。通常のノイズを2つの部分ｚとｃにわける。ｃに重要な情報が乗ることを期待。

- I(c; G(z,c)) を最大化する。I(X;Y) は XとYの間の相互情報量を意味する。つまりYによるXに関する情報量

- 直感的には、zを無視するようになるだけのような気がするけど。。

- 実装としては、discriminator ネットワークの最終段の手前で別の口を出して、そこでcを予想させる。

```
 {c,z} -> G -> x -+-> D -> T/F
                  +-> Q -> c
```
こんな感じか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412142/f68a96a0-3732-c657-5767-3f2905d32b2e.png)
【Laravel】Laravel newが使えなくなった【MAC】

###sourceコマンドについて追記

sourceは、ファイルに書いてあるコマンドを実行するコマンド。
つまり、test.txtに`echo test'と書いてあって、`source test.txt`を実行すると、`test`が出力されるということ。

つまり、laravel newが使えなくなったというか、laravelのパスを通してないんだから使えないよね、ということが原因でした。

ということは
1. laravel newが使えなくなった
2. パソコン再起動したんじゃね？
3. パスが通ってないんじゃね？
4. source ~/.bashrcを実行しよう
5. だって.bashrcにlaravel使えるようにする`パスを通してね`というコマンドが書かられているから。

っていうことでした。

###急に使えなくなった
```
$ laravel new プロジェクト名
```
で作れるんじゃなかったかな？今まではいくつかテスト用で問題なく作れていたけど急に「laravelなんてコマンド知らないよ？」って言われるようになりました。

###パスを通し直したらできました

```:ターミナル
$ vim ~/.bashrc
```

```:.bashrc
export PATH="$PATH:$HOME/.composer/vendor/bin/" 
```
`$PATH:`の部分がbinの後ろにありましたので、前の方に持ってくるようにしました。

```:ターミナル
$ source ~/.bashrc
```
を実行してあげたらプロジェクト作成できるようになりました。


###原因は私にはわかりません（冒頭に追記しました）
初心者なのでよくわかりません。でも初心者だから知らんうちに何かやったのかもしれませんけど。

何か最近やったとしたら、icloudの同期をオフにしたこと。
ある日突然謎のファイルがicloudデスクトップの中に大量のファイルができていて、削除しても複製されてどんどん増えていく始末。
Appleサポートで聞いてもよくわからない感じでした。

その後に新しいプロジェクト作成してみようと思ったら動かないという、、、



また起こるかもしれないので備忘録として残しておきます。
【追記】
また起こりました。原因はパスを通してからじゃないとlaravelコマンド使えませんよ、ということでした。
Node.js Ⅱ

◆MySQLに接続しよう

const mysql = require('mysql'); →mysqlパッケージを読み込み

const　connection = mysql.createConnection({
//データベース名、パスワード
});

◆クエリの実行

connection.query('クエリ', クエリ実行後の処理)と書くことで、
Node.jsからデータベースに対してクエリを実行することができます。

例）

connection.query(
'SELECT*FROM items', →クエリ
()=> {
クエリ後の実行処理
}
);

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635497/92ff9783-cee9-a1df-c8bc-46d5aa7d79ff.png)

例）実行後の処理

connection.query(
'SELECT*FROM items', →クエリ
(error,result)=> {
console.log(result);
res.render('index.ejs');
)
};

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635497/c3e10363-4b6a-a93d-5261-24e40b86cc4a.png)

第1引数のerrorにはクエリが失敗したときのエラー情報が、
第2引数のresultsにはクエリの実行結果（ここでは取得したメモ情報）が入ります。

◆取得した値の表示　EJSに値を渡す

connection.query(
'SELECT*FROM items', →クエリを実行
(error,result)=> {
console.log(result);
res.render('index.ejs',{items: results}); →オブジェクトを渡す
)
};

HTMLで
<% items.forEach((item)=>{　%>
}) ;

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635497/3b65a674-4865-9f6a-0832-02f0861ef54c.png)

◆フォームを使ったリクエスト

app.post('create/',(req,res)=>{
追加する処理
一覧を表示する処理
});

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635497/831a9649-117b-dbc9-d763-7e0141fe4540.png)

◆フォーム作成方法

<form action="/create" method="post"></form>

◆フォームに入力した値を入れる
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635497/2b917a56-481c-1418-68e2-92bfe8f05b04.png)

メモ追加部分を作成

①フォームの値を受け取る準備をしよう（1）

<input type="text" name="itemName">

input要素にname属性を指定すると、下の図のようなオブジェクトの形で
情報がサーバーに送信されます。よってサーバー側では
req.body.name属性の値でフォームの値を取得できます。

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635497/3dc55b9f-de27-8909-a927-b4d06037fb5c.png)

②フォームの値を受け取る準備をしよう（2）

app.use(express.urlencoded({extended: false}));

app.('/create',(req,res)=> {
console.log(req.body.itemName)→フォームの値を取得する

});

◆データベースに追加する

connection.query(
'INSERT INTO items(name)VALUE('とまと')',
(error,result)=> {
connection.query(
'SELECT*FROM items', →クエリを実行
(error,result)=> {
console.log(result);
res.render('index.ejs',{items: results}); →オブジェクトを渡す
)
};

◆フォームからの値をクエリに使うとき

connection.query(
'INSERT INTO items(name)VALUES(?)',
[req.body.itemName],　→配列の要素が入る
(error,result)=> {
connection.query(
'SELECT*FROM items', →クエリを実行
(error,result)=> {
console.log(result);
res.render('index.ejs',{items: results}); →オブジェクトを渡す
)
};

◆リダイレクト

app.post('/create', (req, res) => {
  connection.query(
    'INSERT INTO items (name) VALUES (?)',
    [req.body.itemName],
    (error, results) => {
    res.redirect('/index');
    }
  );
});
WindowsFormsでUnityのC#を使う

# Windows FormsでUnityのC#を使いたい

UnityのC#にはFFTをするための

```
AudioListener.GetSpectrumData
```
などがありますよね。
それを**Windows Forms**などで使いたいと思ったことはありますか？
### 簡単です!
**Windows Forms**のコードで、``UnityEngine.dll``を参照すればいいんです!
``UnityEngine.dll``の場所は、

```
C:\Program Files\Unity\Editor\Data\Managed
```
です。

- ソリューションエクスプローラーの``参照``を**右**クリック
- ``参照の追加``をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694381/5f2e702f-12df-5079-719b-632ebece3a86.png)

- ``参照マネージャー``が開くので、右下の ``参照(B)`` をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694381/2bfbd4b7-58b1-be7e-d9e3-36c0828a2648.png)

 - ``UnityEngine.dll``を参照

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694381/3419579d-b3d5-99e8-3b4c-d0c6611aa49e.png)


- ``OK`` をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694381/1a8ee4b7-88f6-66c8-21f9-01b630ef1d37.png)

- コードの最初で ``UnityEngine`` をusingしたら完了!

```c#:test.cs
using UnityEngine;
{ //以下略
```


# 宣伝

[チャンネル登録!](https://www.youtube.com/channel/UCujMmZAxuQvyJZz_pwqacSA?sub_confirmation=1)
今更ですが…MACのショートカット

今更ですが、macのショートカットについて、ここに記しておきます。
（自分のメモ用としています）

###  <font color='lightblue'>詳細</font>
#### カーソル基本編 ####
↑（上）　：control　＋　p
↓（下）　：control　＋　n
→（右）　：control　＋　f
←（左）　：control　＋　b
end　　　：control　＋　e
home　　：control　＋　a
削除　　：control　＋　d
行削除　：control　＋　k
行削除した分を貼り付け　：control　＋　y
バックスペース　：control　＋　h

#### macアプリ編（大体使える） ####
コピーや保存は、もう割愛…
タブとじ　　：⌘　＋　w
アプリ終了　：⌘　＋　q
ウィンドウを最小化　：⌘　＋　m
新しいウィンドウ　：⌘　＋　n


###  <font color='lightblue'>発生した背景</font>
元々、Winユーザで、ショートカットは多用していました。
仕事で忙しくしている、手帳にはアポイントでいっぱいなど、忙しなくしていると自分が満たされていることもありますが、その感情と生産性はイコールではありません。
ただ、楽しいと感じたり、上手く道具を使用することで集中力が増し、生産性が上がることは多々あります。
ここでは、ショートカットを抜粋し、スピードだけでなく、道具を使いこなすことにもフォーカスしました。
あっ、あとそうやって使いこなしている人はカッコイイです…モテるかもしれません（笑）

###  <font color='lightblue'>環境</font>
| 項目              |               内容 | 
|:-----------------|:------------------:|
| OS.Catalina      |           v10.15.4 |
Composerの実行速度が遅い

## 概要
phpenvで開発環境を構成して使っていて、いつからか分からないがComposerのパッケージのダウンロードを含めて動作が遅くなりました。色々資料を調べた内容を纏めてみました。

## Composerのアップデート
バージョンが1.2.X系であれば1.3.X系にバージョンアップする事をオススメします。composer自体の更新は下記のコマンドで実行出来ます。

```
%composer self-update
```

## packagistのミラーサーバを日本国内のサーバに変更
原因としては以下の三つだようです。

* packagist.orgが日本から遠い
* composerのアーキテクチャ的に、小さなjsonファイルを少しずつダウンロードするため、ネットワークの遅延がもろに影響する
* composerがfile_get_contentsでjsonをダウンロードしていて、どうやらKeep-Aliveを使っていないし、並列ダウンロードもしていない

日本国内のサーバに変更する事でダウンロードの高速化を図ります。

```
% composer config -g repos.packagist composer https://packagist.jp
```

戻すときは以下のコンマンドを実行します。

```
% composer config -g --unset repos.packagist
```

## Composerプラグインによる高速化
prestissimoというcomposerプラグインを利用する方法です。これは「packagistのミラーサーバを日本国内のサーバに変更」に記載した下記の問題を解消する為のプラグインのようです。

> composerがfile_get_contentsでjsonをダウンロードしていて、どうやらKeep-Aliveを使っていないし、並列ダウンロードもしていない

```
% composer global require hirak/prestissimo
```
indexOf(...)!==-1 じゃなくて includes() と書こうよ

人のコードをレビューしてると、いろいろなコードに出会う。あっと驚くような勉強になるコードもあるけど、たいがいは困惑させられる。

配列の中にある要素があるかどうか確かめるのに

```javascript 
if (array.indexOf('hoge') !== -1) {
  ...
}
```

とたくさん書いてあるんですが、「-1 **ではない**」と書かれて脳がねじれそうになるのは私だけではないはず。今どき IE 限定でもあるまいし、

```javascript
if (array.includes('hoge')) {
  ...
}
```

でいいじゃん？

Python 屋さんじゃないけど、コメントなくても一読してパッと意味がわかるコード書きましょうよ？お願い。
Eclipse 2020-06 で、“Node.js version could not be determined” と言われる件

# Eclipse 2020-06 で、“Node.js version could not be determined”
対象バージョンのnodeはインストールして、パスも通っているのに、eclipse起動時に下記の画像のメッセージが出る

# Eclipseのバージョン
Eclipse IDE for Enterprise Java Developers (includes Incubating components)

Version: 2020-06 (4.16.0)

# nodeのバージョン

```
$ node -v
v10.17.0
```

# OS
![スクリーンショット 2020-08-19 10.58.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44351/86158d91-217a-cae2-97b1-693a05daf9db.png)

# メッセージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44351/98548c16-dfe6-3b26-b050-a13a86d53148.png)

# 原因としては
ユーザーが指定したPATH(.bash_profileとかの）を利用せずにMacOSでプログラムを起動する方法が原因で、PATH環境変数にノードの実行可能場所を追加することを説明するメッセージが表示されて混乱を引き起こしていると思われます。

# 解決策

```
cd /Applications/Eclipse_2020-06.app/Contents/Eclipse
echo -Dorg.eclipse.wildwebdeveloper.nodeJSLocation=$(which node) >> eclipse.ini
```

```eclipse.ini
--launcher.library
../Eclipse/plugins/org.eclipse.equinox.launcher.cocoa.macosx.x86_64_1.1.1200.v20200508-1552
-product
org.eclipse.epp.package.jee.product
--launcher.defaultAction
openFile
--launcher.appendVmargs
-startup
../Eclipse/plugins/org.eclipse.equinox.launcher_1.5.700.v20200207-2156.jar
-vmargs
-Djava.net.preferIPv4Stack=true
-Dosgi.requiredJavaVersion=1.8
-Dosgi.dataAreaRequiresExplicitInit=true
-XX:+UseG1GC
-XX:+UseStringDeduplication
--add-modules=ALL-SYSTEM
-XstartOnFirstThread
-Dorg.eclipse.swt.internal.carbon.smallFonts
-Xdock:icon=../Resources/Eclipse.icns
-Xverify:none
-javaagent:../Eclipse/dropins/MergeDoc/eclipse/plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar
-javaagent:lombok.jar
-Dorg.eclipse.wildwebdeveloper.nodeJSLocation=/Users/ユーザー名/.nvm/versions/node/v10.17.0/bin/node
```

フルパスで無いとダメでした。
PHP基礎学習③


###　関数

```PHP:PHP
function showAD()
{
  echo '--------------' . PHP_EOL;
}

showAD();
echo 'Tom is great!' . PHP_EOL;
echo 'Bob is great!' . PHP_EOL;
showAD();
echo 'Steve is great!' . PHP_EOL;
echo 'Bob is great!' . PHP_EOL;
showAD();

# 繰り返し、何度も使うものには便利
```


###　引数

```PHP:PHP
function showAd($message = Ad) //仮引数
{
  echo '----------' . PHP_EOL;
  echo '--- ' . $message . ' ---' . PHP_EOL;
  echo '----------' . PHP_EOL;
}

showAd("Header Ad"); //実引数
echo 'Tom is great!' . PHP_EOL;
echo 'Bob is great!' . PHP_EOL;
showAd("AD");
echo 'Steve is great!' . PHP_EOL;
echo 'Bob is great!' . PHP_EOL;
showAd("Footer Ad");

# 繰り返し、何度も使う際、内容が変わる時に便利
```

###　無名関数

```PHP:PHP
$sum = function ($a, $b, $c){  //無名関数
  return $a + $b + $c;
};

echo $sum(100, 300, 500) . PHP_EOL;

# 関数自体を値にできる
# 最後に「;」が必要になる
```

###　条件演算子

```PHP:PHP
function sum($a, $b, $c) 
{
  $total = $a + $b + $c;
  
  if($total < 0){
    return 0;
  }else{
    return $total;
  }
}

echo sum(100, 300, 500) . PHP_EOL;
```

これを条件演算子を使用すると、、、

```PHP:PHP
function sum($a, $b, $c) 
{
  $total = $a + $b + $c;
  return $total < 0 ? 0 : $total;
}

echo sum(100, 300, 500) . PHP_EOL;
# 条件 ? 値 値　と書く。
# trueなら左側、fulseなら右側の値になる。

```

### 引数の型を指定

```PHP:PHP
declare(strict_types=1);
# 強い型指定の時に入れる文

function showInfo(string $name,int $score):void
{
  echo $name . ': ' . $score . PHP_EOL;
}

showInfo('Taguchi','4');

# stringやintを型指定できる！
```

### nullの場合

```PHP:PHP
declare(strict_types=1);

function getAward(int $score): ?string
{
  return $score >= 100 ? 'Gold Medal' : null;
}

echo getAward(150) . PHP_EOL;
echo getAward(50) . PHP_EOL;

// stringの前に「?」を付けることで、
// nullか？それ以外か？を返すことができる。
// 単純にstringだけの場合、100点未満だとエラーになってしまう。
```

### 配列の取り出し

```PHP:PHP
$scores = [
  'first'  => 90, 
  'second' => 40, 
  'third'  => 100,
];

foreach($scores as $score){
  echo $score . PHP_EOL;
}

foreach($scores as $key => $score){
  echo $key . PHP_EOL;
}

// foreach文で値やキーを取り出すことができる
```


```PHP:PHP
print_r(配列名)

# 配列の中身の確認できる
# 結構、使いそう！

```

### 配列の取り出し

```PHP:PHP
<?php

$moreScores = [
  55,
  72,
  'perfect',
  [90, 42, 88],
];

$scores = [
  90,
  40,
  ...$moreScores,
  100,
];

// print_r($scores);

echo $scores[5][2] . PHP_EOL;

# 配列の中に配列を入れると、数字ではなくarry扱いになってしまう。
# そのため、「...」を付けることで別配列の中の数字を扱える

```

### 可変長引数

```PHP:PHP

# 通常なら、function sum($a, $b, $c) 
# これを、幾つでも数字を増やすために配列型にすると
# function sum(...$numbers) となる。
# この配列はforeachで取り出せるので、

function sum(...$numbers) 
{
  $totals = 0;
  foreach($numbers as $number){
    $total += $number;
  }
  return $total;
}

each sum(1,3,5) . PHP_EOL;

```
Heroku デプロイ の流れと、複数のマシンから1つのHerokuサーバーにデプロイする

チーム開発を通して学んだことを少しまとめていきます。

① Herokuへデプロイするまでの基本的な流れのおさらい
② 複数のマシンから1つのHerokuサーバーに対してデプロイする
③ 開発ブランチを直接 Heroku にpushする方法
今回の内容は、この3つになります。

# Herokuへデプロイするまでの基本的な流れ
（Herokuへの登録が終わっている状態からの説明です）

### Herokuにログイン

```:ターミナル
$ heroku login
又は
$ heroku login --interactive
```
Herokuに登録したemailとpasswordの入力を求められます。

emailとpasswordの入力が出てこないで下記が出る場合
`heroku: Press any key to open up the browser to login or q to exit: `
適当なキーを押せばログインできます。
取り消したい場合は`q`を押します。

ログインできなかったりemailとpasswordの入力を出したい場合は`--interactiveオプション`をつければ大丈夫。

<br>
### URLを作成

```:ターミナル
$ heroku create アプリ名
```
アプリ名はURLになります。(  _ は不可 )

空欄でも勝手に作成してくれるので大丈夫です。
`Name is already taken...`と出たら誰かが既に使用しているので別の名前に変更します。

<br>
### Herokuにデプロイ

```:ターミナル
$ git push heroku master
```
masterブランチをHerokuにpushする

<br>
### データベースのマイグレーション

```:ターミナル
$ heroku run rails db:migrate
```

<br>
### 初期データを投入する

```:ターミナル
$ heroku run rails db:seed
```

これで終了です！


<br>
### 更新したい場合

```:ターミナル
$ git push heroku master
```
※　masterブランチをHerokuにpushしている場合

この辺りはよく見かける内容かと思います。

<br>

次からは、別のPC（又は別の開発者）からアプリ開発やデプロイを行う場合の説明です。

# 複数のマシンから1つのHerokuサーバーに対してデプロイする


`$ heroku create アプリ名`
`$ git push heroku master`
別のPC（又は別の開発者）のHerokuへ登録したメールアドレスを使って、既にCollaboratorとして登録している。
最初にHerokuへデプロイする方は上記を行っているものとします。

<br>

別のPCでアプリの開発とデプロイを引き続き行う場合、
・ リポジトリをクローン
・ リモートリポジトリを登録する。
という流れになります。

### Herokuからまずクローンする
 ターミナルで`cd desktop`等にしてから下記をするとクローンできます。

```:ターミナル
$ heroku git:clone -a アプリ名
```

<br>

### リモートリポジトリを登録する
アプリケーションディレクトリに入ってから下記を実行します。

```:ターミナル
$ heroku git:remote --app  アプリ名
```

リポジトリを登録することができたので、デプロイできる..はずです

<br>

# 開発ブランチをHerokuのmasterブランチにデプロイする方法

デプロイの際、呪文のように唱えていた`$ git push heroku master`...
実は、masterへマージしていない状態でも開発ブランチを直接Herokuにデプロイできます。

### 開発ブランチを直接Herokuにデプロイ

```:ターミナル
$ git push heroku 開発ブランチ名:master
```

開発ブランチを直接Herokuにデプロイして動作確認ができるので便利ですね。

<br>


# 最後に

最初は全く知らなかったことばかりでした。（今もです..笑）
チーム開発を何度か経験してみて、学んだことを少しずつでも共有できればと思っています。
少しでも参考になれば嬉しいです。
間違いなどございましたら、ご指摘ください。
以上です。

参考：
https://qiita.com/Chinats/items/c00df6e3ca81184606fe
CocoaPodsでインストールしたライブラリをXcode12でビルドするとDeployment Targetに関する警告が出る

CocoaPodsでインストールしたライブラリを Xcode12 でビルドすると次のような警告が出る場合があります。

```
The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.0, but the range of supported deployment target versions is 9.0 to 14.0.99.
```

これは Xcode12 がサポートする Deployment Target から iOS8 がドロップされたことが原因です。現状提供されている多くのライブラリが Deployment Target を iOS8 としているため、この警告が表示されることになります。

この警告には実害はないため、ライブラリ側の Deployment Target が Xcode12 に合わせて iOS9 に更新されるのを待ちましょう。

ただ、インストールしているライブラリが多い場合、Xcode の Issue Navigator に多くの警告が出てしまい、他の修正すべき警告に気付きにくくなってしまいます。これを回避するためには、次のように CocoaPods でのインストールの後処理で、ライブラリの Deployment Target を iOS9 に変更しておきましょう。

```ruby:Podfile
post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '9.0'
    end
  end
end
```
ビジネスロジックを分離して、UI刷新に強いクライアントコードを書こう

こんにちは。最近はクライアント側のjsばかり書いているぷーたんです。
今日はありがちな例を交えて、ビジネスロジックの分離について話します。

# 伝えたいこと
- ビジネスロジックはUIから分離しよう

## そもそもビジネスロジックって何？
- そのサービス、プロダクトの根本的なルールや制約（ビジネスルール）を表現したコード
- コードの複雑さの核心部分でもある

詳しくは後ほど記載します。

## なんで分離したいの？
- 更新の根拠や頻度が違う物を分けることで、更新やリリースがしやすくなる
- UI/UXの改善時に余計なことを考えずに実施できる



## 事例： 意外と混ざりがちなビジネスルール=上限数
ピザのweb注文フォームの開発を考えてみます。次のようにビザのサービスが成長していくとします。

1. 初期はトッピングは2個まで選べる。
2. ピザが順調に売れていく中で、利率の高いミックスピザを推していくことになり、施策としてミックスピザの時だけトッピングを3個まで選べるようにすることになった。
3. 水曜日の売り上げが悪いことがわかり、水曜日にはさらにトッピングを1つ追加できるようにすることになった。
4. 3の効果が薄いので、水曜日のトッピング枠を目立つようにする。

### 全てコンポーネントに実装した場合
ではコードを書いてみます。（ここでは私が慣れているreactで書きます）

1. https://codepen.io/putan/pen/rNeLPzo
2. https://codepen.io/putan/pen/oNxLmEX
3. https://codepen.io/putan/pen/WNwxmoL
4. https://codepen.io/putan/pen/WNwxmVN

差分をみてみると `maxCount` の式がどんどん複雑になっているのがわかります。

1-2. https://gist.github.com/putan/bd460d496d0d957560c625bca67e88b7
2-3. https://gist.github.com/putan/a3c0c407e807a1c30073b7d0a1e58342
3-4. https://gist.github.com/putan/aacc3dea7d61b534fb7d8e75885f33e8

maxCountの差分を抜粋

```js
/* 1 */ const maxCount = 2;
/* 2 */ const maxCount = props.pizza === 'mix' ? 3 : 2;
/* 3 */ const maxCount = (props.pizza === 'mix' ? 3 : 2) + (props.isWed ? 1 : 0);
```

### ビジネスロジックを分離した場合
次はPizzaクラスを作り、トッピングに関するロジックをそちらに分けて作ってみます。
`//---`は別ファイルという程で書いています。

1. https://codepen.io/putan/pen/ExKyJBd
2. https://codepen.io/putan/pen/BaKzeNQ
3. https://codepen.io/putan/pen/vYGKwZL
4. https://codepen.io/putan/pen/LYNZozY

1~2~3では全体（主にクラス）に修正が入りますが、4ではコンポーネントだけが更新されているのがわかります。

1-2. https://gist.github.com/putan/0b9051fab909fae866b7446b88ff47b0
2-3. https://gist.github.com/putan/18be63e3333f2ee7ee9a3fe23aad2fa3
3-4. https://gist.github.com/putan/ce108df7a62d98b759fdbce80a342193


### 比較してわかること
1~2~3の施策は「ピザを売るというサービスにおける制約」の変更であり、まさにビジネスルール&ロジックがビジネスの発展とともに複雑化していく様子を表しています。
また、この制約はweb注文フォームだけでなく、直接販売によるposレジでも、手書き伝票でも同じルールが必要になることでしょう。ビジネスルール（≒ロジック）がインターフェイスに依存しないことがわかります。分離の3~4の差分でクラスに修正が入らないのは、この依存状態をコードでしっかりと表現できているからです。

|施策No.|施策の概要|非分離コードの影響範囲|分離コードの影響範囲|
|:-:|:--|:--|:--|
|2|ビジネスの変更|全ファイル|全ファイル（主にクラスファイル）|
|3|ビジネスの変更|全ファイル|全ファイル（主にクラスファイル）|
|4|UIの改善|全ファイル|コンポーネントファイル|

ビジネスロジックの分離がUI改善のしやすさに貢献している事もわかりますね。

### さらに発展して、、
reactが突然誰からも使われなくなり、メンテされなくなった未来に来ました。
ピザ屋さんもｗｅｂ注文フォームを提供し続けるため、reactからvueへ刷新することを決意しました。
するとどうでしょうか？
非分離コードはフルスクラッチが必要になり、分離コードではクラスが再利用できるのでコンポーネントだけを書き換えれば良さそうです。
ビジネスロジックの分離によってUI刷新に強いサービスになっていたのです。やったー♪

## まとめ
- ビジネスルール（≒ロジック）がビジネスの発展とともに複雑になっていく例を紹介
- ビジネスロジックをUIから分離することでUI改善がしやすくなる（影響範囲を小さくできる）
- 設定上限値のような単純なものでも油断できない

## FAQ
Q. 上限数の他にUIに入りやすいビジネスロジックはあるか？
A. ビジネスルールにもよるが、次のようなものはありがち
  - 肉をトッピングする場合は相性が悪いので豆腐のトッピングはお断りしている（選択可能項目）
  - ミックスピザの場合はほげほげ（ビジネスルールに基づく分岐）
CircleCIのテストでファイルが見つからなかった場合のチェックポイント

CircleCIでテストを実行しましたが、ファイルが見つからないエラーが起きたので解決法をまとめました。
とてもシンプルなエラーです。
結論から言うと、**指定したファイルがリポジトリ直下に無かった**事が原因でした。

##1. 前提
CircleCIと連携させたときに自動で作られたconfig.ymlをそのまま実行しました。
![_2020-08-19_9.46.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649853/d2934e2f-f75d-257e-a7e2-b0c7a0bcf2fd.png)
 

##2. エラー内容
![スクリーンショット 2020-08-18 12.48.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649853/50f13ac0-510b-8c92-1e69-fc249a875f19.png)



   エラー1：Restoring cache

   ```yml
    error computing cache key: template: cacheKey:1:19: executing "cacheKey" at <checksum "composer.json">: error calling checksum: open /home/circleci/project/composer.json: no such file or directory
   ```

   エラー2：composer install -n --prefer-dist

   ```yml
    #!/bin/bash -eo pipefail
    composer install -n --prefer-dist
    Composer could not find a composer.json file in /home/circleci/project
    To initialize a project, please create a composer.json file as described in the https://getcomposer.org/ "Getting Started" section

    Exited with code exit status 1
    CircleCI received exit code 1
   ```

どちらのエラーも**composer.jsonが見つからない**と言っています。


##3.　解決方法
#### ファイルのある場所を指定してあげる。
どちらにも、composer.jsonがあるフォルダ(src/)を指定してあげました

### ・ エラー１の解決法

もともと`"composer.json"`だったところを`"src/composer.json"`と変更しました。

   ```yml
    - restore_cache:
              keys:
                # "composer.lock" can be used if it is committed to the repo
                - v1-dependencies-{{ checksum "src/composer.json" }}
   ```

### ・ エラー2の解決法
こちらには`working_directory: src`の一行を追加して、実行場所を指定してあげました。

```yml
      - run:
          working_directory: src
          command: composer install -n --prefer-dist
```


これで無事にテストできるようになりました。
AngularにSemantic UIを導入してみる

元々Riot.jsにSemantic UIを入れていた既存サイトをAngularで作りかえることになり、「Angularわけわからん…。どうやってCSSフレームワーク入れるんや…。」と頭を抱えたのでその時の手順を記録としてここに残します。<br>
初心者が検索かけまくって出来た方法ですので、間違ってたらごめんなさい。

##公式のガイド
https://semantic-ui.com/introduction/getting-started.html
英語に滅法弱い人間なので、これを翻訳して読んでもよく分からなかった…。

##開発環境
環境構築は省略。
Angularのバージョンが古いのは仕事で使ってるのが５だったからです。

```
$ ng -v

Angular CLI: 1.7.4
Node: 12.18.3
OS: darwin x64
Angular: 5.2.11
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0
```
##新規プロジェクトを作成
```
$ ng new app-name
```

##Semantic UIをインストールする
```
PC_Name:app-name MyName.$ npm install semantic-ui-css
```

##Semantic UIを読み込む
```.angular-cli.json
"apps": [
    {
      //省略

      "styles": [
        "../node_modules/semantic-ui-css/semantic.min.css",  //ここを追記
        "styles.css"
      ],

      //省略
```

##これで完了
あとはHTMLのclassに「ui tiny image」とか「ui」が付いた公式のクラス名を入れればSemantic UIが反映されます。
Ruby-FFI で argv[] のような「C言語の文字列の配列」を扱いたい時の書き方

こちらのサイトによると（2009年の情報なので情報が古いかも知れないけれども）
https://zegoggl.es/2009/05/ruby-ffi-recipes.html

下のような関数定義があったときに

```c
int execvp(const char *file, char *const argv[]);
```

Ruby-FFIはこう書く。

```ruby
module Exec
  extend FFI::Library
  attach_function :execvp, [:string, :pointer], :int
end
```

使う時は…


```ruby
strptrs = []
strptrs << FFI::MemoryPointer.from_string("vim")
strptrs << FFI::MemoryPointer.from_string("/tmp/foo")
strptrs << nil

# Now load all the pointers into a native memory block
argv = FFI::MemoryPointer.new(:pointer, strptrs.length)
strptrs.each_with_index do |p, i|
    argv[i].put_pointer(0,  p)
end

Exec.execvp("vim", argv)

```

読めば何をしているすぐかわかるけど、少々面倒。

もっといい方法をご存知でしたら是非コメント欄へ。

この記事は以上です。
ActiveStorageでファイルを追加保存する

Rails6.0以上だとActiveStorageはupdateの処理をかけた時に既存のファイルが削除された後に処理が走ります。
6.0以上だとしたのは、それ未満だと逆に追加処理になるためです。

アップグレード対応等で6.0未満の動きをして欲しい場合、以下の対応をすれば良さそうです。

```ruby
config.active_storage.replace_on_assign_to_many = false
```
参照: https://github.com/rails/rails/pull/36716
承認プロセス Apexで操作する時の覚え

[まとめページに戻る](https://qiita.com/Keiji_otsubo/items/60afc2a8d211b6f7d89f)
[承認プロセスのまとめ](https://qiita.com/Keiji_otsubo/items/9a23bc587e2a994f5006)

# Apexコードで承認プロセスの初期提出者をフェッチできますか？

[Can we fetch Initial Submitters for an Approval process in Apex code?](https://success.salesforce.com/answers?id=9063A000000eZM9QAM)

回避策ありそう

# Apexを介して承認プロセスを再割り当てするときに、承認コメントを更新するための回避策はありますか？

[Do we have any work around to update approval comments while reassigning approval process through apex ?](https://success.salesforce.com/answers?id=9063A000000lUtVQAU) 

アイデアが出ている

# 承認プロセスは、承認者リストの最初の承認者にのみメールを送信します

[Approval process only send email to first approver in the approver list](https://success.salesforce.com/answers?id=9063A000000q2oZQAQ)

If you use approval processes, then you either send to both or neither. If you need only one of them to get it and not the other, you will have to build the whole approval process in apex.
承認プロセスを使用する場合は、両方に送信するか、どちらにも送信しません。そのうちの1つだけでそれを取得する必要がある場合は、apexで承認プロセス全体を構築する必要があります。

解決あり？

# 関連するオブジェクトはトリガーされない

+ [承認プロセスの推移をトリガーしたい](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007eqMiW)

:::note
ターゲットになるオブジェクトが何かしら更新されていれば、そのターゲットのオブジェクトをトリガーとする処理でProcessInstanceを検索してStatusを確認することはできると思います。

ただ、Apexトリガー、フローのどちらでも複数のオブジェクトをトリガーとするような処理は書けないので、ターゲットのオブジェクトの数だけ処理が必要になりますね。

Apexなら実際の処理を別クラスにして共通化させる、フローならサブフローにするなどの方法はできると思います。

 

この投稿にヒントを得ました。

[Salesforce 承認プロセス周りの自動化](https://qiita.com/mkzyk/items/18e4f904c906a590340d)


ある程度リアルタイム性が要求されなければ、Apexバッチやスケジュールフローの実行でProcessInstanceを確認する方法も考えられます。
:::
【Python】0からWebアプリ！ハンズオン(3)～API実装編～

# 概要
Pythonで0からWebアプリを作る機会があったので、そのまとめとして！
この記事ではAPIの実装について書いています。

これまでの記事
[【Python】0からWebアプリ！ハンズオン(0)～環境構築編～ - Qiita](https://qiita.com/tsumasakky/items/d8069418d1fa6f2fa185)
[【Python】0からWebアプリ！ハンズオン(1)～設計、DB構築編～ - Qiita](https://qiita.com/tsumasakky/items/8993b6645f2d8bef43f2)
[【Python】0からWebアプリ！ハンズオン(2)～ハローワールド編～ - Qiita](https://qiita.com/tsumasakky/items/07105da031340257065e)


# こんな方に読んでほしい
* プログラミング未経験だけどアプリ作ってみたい方
* 新人Webプログラマの方
* 経験者だけどPythonでWebアプリ書いたことない方

# ゴール
HTML, CSS, JavaScript, Python, SQLを使ってCURD機能を持ったWebアプリを作成するのが目標です。

# 必要なもの
* PC（Windows OS）
* インターネット回線
* わくわくした気持ち

# 1. データベースにデータを用意する
まずはAPIからデータベースに接続し、データを取得してみようと思います。
そのために、pgAdminでテストデータを用意しましょう。
pgAdmin4を起動し、TodoDatabase > Schemas > public > Tables > todoを右クリックし、View/Edit Data > All Rowsを選択します。
<img width="322" alt="2020-07-31_18h33_10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/d7d2601d-f59a-2f68-99a2-52fcc9c9f937.png">

title: テスト
created: 2020-07-31 18:39:00
is_deleted: false
を入力し、Save Data Changesボタンを押してください。
※idは自動採番になっているので、入力しなくてOKです。
<img width="613" alt="2020-07-31_18h37_32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/e4db29a5-b3ba-f8bf-638e-522efbdc605e.png">

# 2. APIからデータベースに接続してみる
データベースの接続にはPostgreSQL用のドライバを使用します。
これもいくつかありますが、一番メジャーな（インストール数が多い）「psycopg2」というものを使用します。

コマンドプロンプトから以下のコマンドでインストールします。
`pip install psycopg2`

そしてindex.pyを次のように書き換えます。

```python:index.py
# -*- coding:utf-8 -*-

# 外部のパッケージを読み込む
from bottle import route, run
import psycopg2

# データベースへの接続を取得する
def get_connection():
  return psycopg2.connect("host=localhost port=5432 dbname=TodoDatabase user=postgres password=postgres")

# ハローワールドを取得
@route('/hello')
def hello():
  # Hello World!という文字列を返却
  return "Hello World!"

# Todoデータを取得
# @route('/todos')とすることで、http://localhost:8080/todosというURLでアクセスできます
# with get_connection() as conn:はスコープ終了時に自動的にconnをcloseしてくれます
@route('/todos')
def get_todos():
  with get_connection() as conn:
    with conn.cursor() as cur:
      # SQLを実行
      cur.execute('SELECT * FROM todo')
      # データベースへの問い合わせ結果を1件取得
      data = cur.fetchone()
      # DBから取得したデータを文字列に変換して返却
      return str(data)

# Webサーバーの実行構成
# URLの "http://[host]:[port]/[route]" の構成となる
run(host='localhost', port=8080, debug=True)
```

とりあえず何も考えずに動かしてみましょう！
ハローワールド時と同様にF5キーを押して、「Python File」を選択し、サーバーを起動します。
その後ブラウザで http://localhost:8080/todos にアクセスしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/6ce04a5f-3bae-e57a-354a-7d8718d24091.png)
データベースから取得したデータが表示されました！

# まとめ
データベースのデータを表示してくれるAPIの実装を行いました！

# 次回は･･･
今のままだと、APIからどんな形でデータが返ってくるか、わかりにくいものです･･･よね？（おしつけ）
データベースのデータをjson形式に変換して、使いやすくしてみます！
[【Python】0からWebアプリ！ハンズオン(4)～データ成形編～ - Qiita](https://qiita.com/tsumasakky/items/8c1b10482c4b312da19c)
only-allowを用いてプロジェクトでYarnの使用を強制する方法

[only-allow]は、開発者がプロ​​ジェクトで特定のパッケージマネージャーを使用するように強制するツールです。この投稿では、`only-allow`を使って、パッケージマネージャであるYarnの利用を強制する方法を紹介します。

[only-allow]: https://www.npmjs.com/package/only-allow

> :bulb: 以前、[yarnを使うプロジェクトでnpm installを禁止する方法](https://qiita.com/suin/items/a7bf214f48eb9b2d9afc)という記事を投稿しましたが、これとは異なる方法です。

## 問題点

JavaScriptの標準的なパッケージマネージャーはNPMですが、YarnやPNPMなど、他にも有名なパッケージマネージャーもあります。

パッケージマネージャー間には、いくつかの非互換性があります。たとえば、NPMとYarnは、異なる方法でインストールされたパッケージのバージョンをロックします。 NPMはロック情報をpackage-lock.jsonに保存し、Yarnはyarn.lockに保存します。

開発者間で同じ1つのパッケージマネージャーを使用することは重要です。予期しない非互換性を防ぐためです。

## 解決策

### ドキュメンテーション

チームで同じパッケージマネージャーを使用する最も簡単な方法は、ドキュメントで開発者の注意喚起することです。たとえば、README.mdに次のように記述できます。

> 「このプロジェクトではYarnを使用してください！」

ただし、この方法は時々うまくいきません。一部の開発者はドキュメントを読まないからです。ドキュメントに強制力がありません。


### "only-allow"

開発者に特定のパッケージマネージャーの使用を強制するより良い方法は、[only-allow]を採用することです。開発者に特定のパッケージマネージャーの使用を強制することができます。

`only-allow`でYarnのみを許可したプロジェクトでは、開発者がNPMを使おうとすると、プロセスをエラーにすることができます。また、`only-allow`は、NPMの代わりにYarnを使用するよう教えてくれます：

![20200819085557@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/4401cf64-413f-a8dd-1e37-d058cd89701e.png)

#### "only-allow"の導入方法

`only-allow`を導入するのはとても簡単です。 `package.json`に` preinstall`スクリプトを追加するだけです：

```package.json
{
  "scripts": {
    "preinstall": "npx only-allow yarn"
  }
}
```

`only-allow`をインストールする必要はありません。

## まとめ

* プロジェクトの開発者間で同じパッケージマネージャーを使用することは重要です。
* ドキュメントでの注意喚起には強制力がありません。
* `only-allow`はプロジェクトで同じパッケージマネージャーの使用を強制するのに便利です。

---

最後までお読みくださりありがとうございました。Twitterでは、Qiitaに書かない技術ネタなどもツイートしているので、よかったらフォローお願いします:relieved:→[Twitter@suin](https://twitter.com/suin)
RETROF-16 部品実装（その２）

⇒ [本記事に対応する最新回路図はこちらです](https://qiita.com/RETROF/items/08aec337163b24c49cff)
⇒ [RETROF-16 部品実装（その１）はこちらです](https://qiita.com/RETROF/items/dc597ef541080021b495)


#ステージカウンタの実装
RETROF-16は全ての命令を13クロックで処理します。**74LS163**と**U28の74LS138**の実装で、基本クロックを13分周する回路が構成されます。
ステージカウンタと言う呼称は必ずしも適切ではありませんが、便宜上この**74LS163**を「ステージカウンタ」、**74LS138**を「ステージデコーダ」と呼びます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535901/4d1460d4-86c3-e913-b747-ebf7ff2a55dd.jpeg" width=50%>
上の画像の2つのTTLが**74LS163**と**U28の74LS138**です。赤いスライドスイッチ（**SW25**）は、クロックを手動で与えるかPLL発振器（これはまだ実装していない）で与えるかを切り替えるための物です。また青色LED（**LED17~20**）は、現在何番目のステージを実行中かを視認するための物です。
以上の実装で、実行モードに移行しSTEPボタンを連打すると、青色のLEDが0～12の値を順次表示することが確認できます。

#プログラムカウンタの実装
下記画像はプログラムカウンタ**ALS541**と、ダイオード**F1~F4**を実装した所です。
![R0010090.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535901/fd7fcb1d-4c56-0294-fa90-c2fec3345ed9.jpeg)
この状態でSTEPボタンを連打すると、ステージが0と1の時にプログラムカウンタの値がデータバスに放出されることを視認できます。しかしプログラムカウンタに任意の値を設定するボタン（PSETボタン）がまだ無効なので、非常に動作確認がしずらいので、次にPSETボタンの有効化を行います。

#ALU（算術論理演算器）の実装
ALUはその名の通り「演算」を行うためのものですが、この時点では単にデータバスの値をプログラムカウンタに渡すだけの目的で実装します。偶然ですが74LS181は演算種別を決める入力（S0～S3、及びM）を全て**H**にすると、A入力の値をF出力にそのまま出力します。従って**74LS181**とプルアップ抵抗**RB6**を実装するだけでこの目的を達成できます。
この実装によりPSETボタンが有効となり、基板上のトグルスイッチで指定する任意の値をプログラムカウンタに設定できる様になります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535901/f6fcedb7-0c49-173b-7686-084966d5a26d.jpeg" width=50%>

尚、**74LS181**は24ピンのICで対抗するピン幅が600milですが、これと互換性のある**74LS881**や**74F181**は幅300milです。どちらでも実装可能にするために基板上は12ピン1列のICソケットを3列並べています。見かけ上は36ピンのICとなるため、回路図上の**74LS181**も大変見辛くなっていますが仮想的な36ピンのICとして表記しています。

#IRとFRの実装

IR（Instrucsion Register : 命令レジスタ）とFR（Flag Register : フラグレジスタ）を実装します。IRは**74LS377**で保持内容を視認するためのLED（**LED9~16**）を伴います。FRは**74LS175**でこれも保持内容を視認するためのLED（**LED3,5,6**）を伴います。
また「ついで」となりますが、命令コードに応じて必要なフラグを選択するフラグセレクタ**74LS151**もここで実装します。
![R0010109.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535901/8371018d-364b-8a7b-a191-dd8772d0b4b0.jpeg)

この時点で未実装なのは
　・画面表示回路
　・USB通信回路
　・アキュムレータ
　・アキュムレータへの演算種別指示回路
　・命令デコード回路の大半
となります。ここから命令デコード回路を徐々に実装し、まずはアキュムレータを必要としない機械語命令群の正常動作を確認して行きます。
FlutterでWebの画像を表示して読み込み失敗時は別の画像を表示させる

Flutterでネット上の画像を表示させて読み込み失敗時に
「読み込めませんでした」的な画像を表示してくれる便利なものないかな～って探した結果、
丁度いいのがあったのでご紹介します。

# 実行環境
- VS Code (version 1.47.2)
- Dart (version 2.8.4)
- Flutter (version 1.17.5)

# インストール
今回は「cached_network_image」を使います。

### 1.「cached_network_image」とは
これです(雑。。)
https://pub.dev/packages/cached_network_image

### 2. pubspec.yamlに追加
以下をpubspec.yamlファイルに記載します。

```
cached_network_image: 2.2.0+1
```

### 3. インストール
ターミナルやコマンドラインで以下を実行する。
(VSCodeであればpubspec.yaml保存時に自動で実行されます。)

```
$ flutter packages get
```

# ソースコード
### 1. インポート
以下のコードを追記します。

```
import ‘package:cached_network_image/cached_network_image.dart’;
```

### 2.「cached_network_image」の実装

```
CachedNetworkImage(
    imageUrl: ｛※１　ここに表示したいWeb画像URLを記載｝,
    errorWidget: (context, url, dynamic error) => 
        Image.asset(
            {※２　ここに表示したい画像を設定},
        ),
    ),
```

※１に表示したいWeb画像URLを記載する。(Stringです)
※１の取得に失敗した際に※2の画像を表示する。
　なので失敗した際に出したいImageなどを設定する。

簡単にですがこんな感じに実装できるといった紹介でした。