OmniAICreator/Qiita-1.07M huggingface dataset:
Photon Bolt | 他プレイヤーが作ったゲームオブジェクトをDestroyする

#はじめに

Photon BoltはUnityで簡単にオンラインゲームを作れるUnityソリューションです。
今回は僕自身が困った**他人が作ったゲームオブジェクトを破壊する**方法を~~僕自身のために~~書いていこうと思います。

#やりたいこと

他人が作ったゲームオブジェクト(エンティティ)をDestroyしたい。

#起きている問題

[Photon Bolt](https://doc.photonengine.com/ja-jp/bolt/current/getting-started/overview)で`BoltNetwork.Destroy()`を行うと、オンライン上のゲームオブジェクトを破壊することができますが、他プレイヤーが生成したゲームオブジェクトを破壊することはできません。

他人が作ったゲームオブジェクトを`BoltNetwork.Destroy()`すると、以下のように表示されて正常に破棄されません。

> Only the owner can destroy an entity, ignoring call to Destroy().

#オーナーシップの概要

[エンティティのオーナーシップ](https://doc.photonengine.com/ja-jp/bolt/current/in-depth/entity-ownership)を参照。

オーナーシップは`BoltNetwork.Instantiate()`でエンティティを生成した者にのみ付与され、それを譲与することはできません。

オーナーのデバイスで`BoltEntity.isOwner`すると`true`を戻します。
今回はこれを使って他人のゲームオブジェクトを破壊します。

#実際に組んでみる

##### 1. イベントを作成する

イベントを使うことでルームに参加している人の一部もしくは全員に同じ処理を実行させることができます。

1. `Bolt`タブの`Assets`で`Bolt Assets`を開く
2. ウィンドウ上で右クリックして`New Event`をクリック
3. Event名を `DestroyRequest` にする
4. `New Property`から新しいプロパティを作成し、その型を`Entity`に設定
5. 新しいプロパティの名前を `entity` にする
6. `Bolt`タブから`Compile Assembly`でコンパイルする

ゲームオブジェクトを破壊するリクエストとエンティティ(Bolt Entity)を送信するためのイベントを作成しました。エンティティを破壊するときはこのイベントを呼び出します。

**`Compile Assembly`は、Bolt上に何か変更を与えた時に毎回行ってください。**

##### 2. イベントを受け取る処理を書く

ここでは、ゲームオブジェクトの破壊をリクエストを受け取る機能を付けます。

1. 新しいスクリプトを作成し、名前を`NetworkCallbacks`に変更
2. classよりも上に`using Bolt;`を追加
3. `MonoBehaviour`を`GlobalEventListener`に変更
4. 以下のコードをクラス内に記述し、`Compile Assembly` を実行

```
    public override void OnEvent(DestroyRequest evnt)
    {
        //送られてきたentityの持ち主が自分かどうかを確認し、そうであればDestroyする
        if (evnt.entity.IsOwner)
            BoltNetwork.Destroy(evnt.entity.gameObject);
    }
```

##### 3. イベントを送信する処理を書く

_2. イベントを受け取る処理を書く_で作成した受付係に送信する機能を作ります。

1. 今まで`BoltNetwork.Destroy()`していた部分を以下に上書き

```
    //破壊したいゲームオブジェクトのエンティティ
    BoltEntity ent;
 
   //シングルプレイの場合、リクエストを送らずそのまま破壊
    if (BoltNetwork.IsSinglePlayer)
        Destroy(gameObject);
    else
    {
        //DestroyRequestを作成し、entityにentをセットしてから送信
        var request = DestroyRequest.Create();
        request.entity = ent;
        request.Send();
    }  
```

※送信できるのはBoltEntityのみです。GameObjectをそのまま送信することはできないので`GetComponent<BoltEntity>()`してから送信しましょう。

2. `Compile Assembly` を実行

#注意点

ネットワークを使用しているので当然「破壊リクエスト」→「ネットワーク上で破壊」→「クライアントで破壊」までのプロセスでラグが発生します。

その間にもう一度「破壊リクエスト」を送信してしまうと、存在しないエンティティとしてエラーが発生してしまいます。

「破壊リクエスト」を送信する前に、オブジェクトのコライダーを無効化したり、リクエスト中の新たなリクエストを無視するなど対策が必要です。

#間違えていたら

もしこの記事の内容に間違えがあったらコメントで指摘をお願いします:pray:
いろんなForm処理

SPAばっかり書いていると、すこーし昔な感じの form を使った処理を忘れがちにしてしまいます。
私の備忘録として残すとともに、いろいろな form の書き方を見比べてみましょう。

# 1. 一般的な form 処理

```html
<form id="formId" name="formName" method="post" action="foo/index.php" >
  <label for="sei">姓：</label>
  <input id="sei" type="text" name="sei">
  <label for="mei">名：</label>
  <input id="mei" type="text" name="mei">
  <button>登録する</button>
</form>
```

よく見るやつです。
とくに難しいことはしていません。

# 2. form 要素の外にボタンを置いて、form を実行

```html
<form id="formId" name="formName" method="post" action="foo/index.php" >
  <label for="sei">姓：</label>
  <input id="sei" type="text" name="sei">
  <label for="mei">名：</label>
  <input id="mei" type="text" name="mei">
</form>

<p>ボタンを押して登録しよう！</p>
<button type="submit" form="formId">登録する</button>
```

form の外に追いやってボタンを設定するケースです。こちらは、 `button` 要素に `form` 属性を指定することで、 form 内に button を配置したときと同じことができます。

# 3. from の外にパラメータを配置して、form を実行する

```html
<form id="formId" name="formName" method="post" action="foo/index.php"></form>

<label for="sei">姓：</label>
<input id="sei" type="text" name="sei" form="formId" />
<label for="mei">名：</label>
<input id="mei" type="text" name="mei" form="formId" />

<p>ボタンを押して登録しよう！</p>
<button type="submit" form="formId">登録する</button>
```

これはあまり見かけないかもしれませんが、知っておくと役に立つかもしれません。
注目してもらいたいのは、 `input` 要素のに `form` 属性を設定していることです。
こうすることで、 form の外にはみ出した要素があったとしても、それを form のパラメータとして含めることができます。
ただし、IEでは使えないという話も聞くので、実装については検討してから導入しましょう。

# 4. javascript で form を実行

```html
<script>
var submit = function() {
  var form = document.getElementById('formId');
  form.action = "foo/index.php"
  form.method = "post";
  form.submit();
}
</script>

<form id="formId" name="formName">
  <label for="sei">姓：</label>
  <input id="sei" type="text" name="sei" />
  <label for="mei">名：</label>
  <input id="mei" type="text" name="mei" />
  <button onclick="submit()">登録する</button>
</form>
```

たまにこういう実装している箇所があるかもしれません。
button 要素に onclick のイベントハンドラを仕掛けます。クリック時には submit 関数が呼ばれて、 form 処理を実行します。

# 5. javascript で form を実行 -その2-
```html
<script>
var submit = function() {
  var form = document.formName;
  form.action = "foo/index.php"
  form.method = "post";
  form.submit();
}
</script>

<form id="formId" name="formName">
  <label for="sei">姓：</label>
  <input id="sei" type="text" name="sei" />
  <label for="mei">名：</label>
  <input id="mei" type="text" name="mei" />
  <button onclick="submit()">登録する</button>
</form>
```

4と同じように見えるのですが、今回は `document.getElementById` は使わずに、 DOM生成時に document オブジェクトに formName がぶら下がるのを利用して form 処理の実行を行っています。

# conclusion

というわけで、一概に form 処理といってもそこそこあります。 HTML の世界で完結させるのか、 JavaScript も交えた世界とするのか、どういう実装が良いかを、システムの要件にしたがって適切に選択していきましょう。
[rails] #createによりデータが2重に保存される問題

item_controller.rb

```
  def index
    # トップページ生成
   end  
  def new
    @item = Item.new
  end

  def create  
   @item= Item.new(item_params)
   Item.create(item_params) 
   if @item.save
     redirect_to action: 'index'
    else
      render :new
    end
  end

  def item_params
    params.require(:item).permit(:image)
  end 
```
トップページからデーター保存までの流れ
1,トップページを表示するitems#index
2,新規登録画面を生成するitems#new
3,new.html.erbのビュー画面からデーターを記入してボタン（submit）をおす
    <%= form_with model: @item, local: true do |f| %>
4,items#createアクション実行され3で記入したデータがdbに保存される

（if文を使って条件分岐させる）

```
  if @item.save
     redirect_to action: 'index'
  else
      render :new
  end

```
・データー保存成功したらitems#index(トップページ)にリダイレクト画面遷移する
・データー保存失敗したらitem#new(新規登録画面)が表示される


問題点・データー保存すると同じデーターが２つ保存されることに？？

```
#データーが２重に保存される問題のあるコード
 def create
  @item= Item.new(item_params)
    Item.create(item_params) 
     if @item.save
      redirect_to action: 'index'
    else
      render :new
    end
  end
```

原因・（create）で1回保存（new,save）でもう一回保存しているから
解決方法・create,(new,save)どちらか消す


```
#一つのデーターがdbに保存される。newとsaveを消すパターン
def create
    Item.create(item_params) 
     if
      redirect_to action: 'index'
    else
      render :new
    end
  end

```


```
#一つのデーターがdbに保存される。createを消すパターン
 def create
  @item= Item.new(item_params)
     if @item.save
      redirect_to action: 'index'
    else
      render :new
    end
  end
```
Next.jsにjestとenzymeを導入する

### jestインストール
jestインストール

```
$ npm install --save-dev jest 
```

jsx構文のトランスパイルのため、babel等をインストール


```
$ npm install --save-dev babel-jest babel-core babel-preset-env babel-preset-react
```


### jest設定
jest設定ファイルを生成

```
$ jest --init
```

これで最低限jestでテスト実行できる。
`.js`をjsx構文で解釈させるために設定が必要。

修正

```jest.config.js
modlue.exports = {
    // ...
    transform: { "^.+\\.jsx?$": "babel-jest" } // 拡張子がjs,jsxのファイルをbabel-jestでトランスパイルさせる
    // ...
}
```  
  
追加

```jest.config.js
module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-react"]
};
```  

### Enzymeのインストール
インストール

```
yarn add --dev enzyme enzyme-adapter-react-16
```  

Enzymeの利用時は一度だけ`Enzyme.configure()`を呼ぶ必要があるため、下記のスクリプトを追加。

```jest.setup.js
import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";

Enzyme.configure({ adapter: new Adapter() });
```

Jestのテスト前に実行されるようにする。

```jest.config.js
module.exports = {
  // ...
  setupFiles: ['./jest.setup.js'],
  // ...
}
```

## jest実行でエラー

### 「regeneratorRuntime is not defined」

jestのテスト対象コードでasync/awaitを使っているとこのエラーが出るようです。

回避方法は以下。

**.babelrcを以下のようにする**
.babelrcはpackage.jsonと同じディレクトリに配置しました。

```
{
  "presets": [
    [
      "@babel/preset-env", {
        "targets": {            // babelのターゲットを指定
          "node": "current"
        }
      }
    ]
  ]
}
```



## 参考
[Next.jsのプロジェクトにJestとEnzymeを導入する手順](https://qiita.com/nemolize/items/2d721129b835ba9c20b3)
[asyncを使用したコードをjestでテストすると「regeneratorRuntime is not defined」エラーが発生](https://qiita.com/quzq/items/1662bff594f05d52f206)
【Laravel】同ページに2つのフォームとバリデーションエラーメッセージの表示欄がそれぞれある場合、エラーメッセージをそれぞれ分ける

## 1行で

- bladeのエラーメッセージ表示部分のifの条件を変える

## 概要

**同ページにユーザー設定とパスワード設定がそれぞれ独立して存在する**というパターンで実装する。
ひとつのsubmitで2つのformが更新されるというパターンではない。formとsubmitがそれぞれ同じページに1つずつある。

## エラーメッセージ表示

通常、バリデーションによるエラーメッセージはこのような記述で書いて表示する。

```php:edit.blade.php
@if ($errors->any())
  <div class="">
      <ul>
          @foreach ($errors->() as $error)
              <li>{{ $error }}</li>
          @endforeach
      </ul>
  </div>
@endif
```

これが同ページに2つあると、例えばユーザー設定のエラーがかかると、例えばパスワード設定のform内に書いていたとしても、そちらにも表示される。逆もまた然りである。

### $errors の中身を参照し、処理を分ける

```php:edit.blade.php
{{-- ユーザー設定 --}}
@if ($errors->has('email'))
  <div class="">
      <ul>
          @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
          @endforeach
      </ul>
  </div>
@endif

{{-- パスワード設定 --}}
@if ($errors->has('password'))
  <div class="">
      <ul>
          @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
          @endforeach
      </ul>
  </div>
@endif
```

バリデーションに設定した値を何かしら参照してあげればいけると思う。
RestSharpを使ってファイルのダウンロードを試してみたが、公式のやり方ではうまくいかなかった話

RestSharpを使ってファイルのダウンロードを行おうとしたのですが、公式サイトに記載の方法だとなぜかファイルがダウンロードされませんでした。
そのため、備忘録としてこちらに残しておきたいと思います。

# 前提条件

RestSharpがインストールされていること。

# 事象

公式サイトでは、以下の通り記載されていました。
[Working with Files | RestSharp](https://restsharp.dev/usage/files.html)

```cs
var tempFile = Path.GetTempFileName();
using var writer = File.OpenWrite(tempFile);

var client = new RestClient(baseUrl);
var request = new RestRequest("Assets/LargeFile.7z");
request.ResponseWriter = responseStream =>
{
    using (responseStream)
    {
        responseStream.CopyTo(writer);
    }
};
var response = client.DownloadData(request);
```

これをほぼ流用する形で、

```cs
var client = new RestClient(baseUrl);
var request = new RestRequest("Assets/LargeFile.7z");
```

を、

```cs
var client = new RestClient("コンテンツのURL");
var request = new RestRequest();
```

に変更して実行したところ、`response`がnullとなって返ってきてしまい、ダウンロードに失敗してしまいました。
もちろんURLが間違っているというわけではありませんでした。
（`baseUrl`にまるまるコンテンツのURLを渡してしまったのがよくなかったのか？と個人的には思いましたが、本当の原因はよくわかりませんでした。）

# 解決方法

色々調べてみた結果、以下の方法でファイルのダウンロードに成功しました。

```cs
var client = new RestClient("コンテンツのURL");
var response = client.DownloadData(new RestRequest(Method.GET));
```

ちなみに変数`response`には、バイト配列（ファイルデータの実体）が入っています。
そのため、`File.WriteAllBytesAsync`などを使ってファイル書き込みをすることで、ローカルに保存することができます。

```cs
File.WriteAllBytesAsync("ローカルの保存先", response);
```

# まとめ

RestSharpを使ってファイルのダウンロードを行う方法について、公式以外にもやり方があったのでまとめました。
公式に載っている方法が必ずしもうまくいくわけではないということがわかりました。
できれば公式の方法でやるほうが信頼性が高いので間違いないですが、そこは臨機応変に使い分けていきたいところです。
（RestSharpは公式ドキュメントがあまり充実していないのが残念なところですね。。）

# 参考URL

- [Download Image or file with RestSharp (Rest Sharp)](https://gist.github.com/gazlu/1eded0c78d7bf0057cb609da752cb990)
- [c# - How to use restsharp to download file - Stack Overflow](https://stackoverflow.com/questions/29123291/how-to-use-restsharp-to-download-file)
included do

#初めに
moduleの下のextendの下のincluded doが分からないので調べた
#included doとは
included do~endというブロック。
このブロックの中にメソッドを定義しておくとモジュールがincludeされたあとににそのメソッドが動作する。
extend ActiveSupport::Concernとセットで使われる。
UISegmentedControlのフォント色を変える



UISegmentedControlの文字色を変える際のメモです。
選択された状態の背景色の変更の記事は良く見かけたのですが、文字色を変える記事はあまりありませんでしたので、書きました。
iOS13以降で確認していますが、基本的にiOS11,12でも同じかと思います。

## 実装

```swift

segment.setTitleTextAttributes([.foregroundColor: UIColor.red], for: .selected) //選択時の文字色
segment.setTitleTextAttributes([.foregroundColor: UIColor.gray], for: .normal)  //非選択時の文字色

```



`UISegmentedControl.setTitleTextAttributes` を使用して、選択状態によって色を変えて設定しました。
上記の例では、選択時には赤、日選択時にはグレーになります。

適用結果は以下のようになります。

![スクリーンショット 2020-09-01 12.19.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297014/bc7d6f63-4597-8c3d-37f5-524af164dcc3.png)

## 参考


https://developer.apple.com/documentation/uikit/uisegmentedcontrol/1618570-settitletextattributes
Intersection Observer APIではパララックス（視差効果）は実装できない

ウインドウスクロールに応じて、何らかの演出をさせようと思った際には、[Intersection Observer API](https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API)を利用した実装を検討すると良い。

## Intersection Observerは「瞬間」しか扱わない
しかし、いわゆるパララックスと呼ばれる表現を実装しようと思ったら、Intersection Observer APIでは実装できない。
なぜならば、Intersection Observer APIでは、対象要素とビューポートの交差を監視しているだけで、**交差する瞬間以外にはコールバック関数は実行されない**からだ。もっとも`threshold`を細かく指定してやることによって、スクロールの変化を細かく追うことはできなくはないが、どこまでやるのかという問題が残る。

```javascript

let options = {
  root: null,
  rootMargin: '0px',
  threshold: [0.00, 0.01, 0.02, ..., 0.99, 1.00]
}
let observer = new IntersectionObserver(callback, options);
```



## パララックスではないものたち
ここでいうパララックスというのは、スクロールによって流れていく要素の速度に差をつける表現のことを指している。
物理世界で移動しながら景色を眺めると、近くの物体は視界を流れ去るが、遠くの物体はゆっくり動くという現象を観測できるが、それをウェブサイト上で再現して遠近感を出したりする表現方法のことだ。  
ここで明確に区別しておきたいことがある。**スクロールすることで要素がスクリーン上に入ったときに、フェードやスライドで出現させる表現は、パララックスではない**。パララックスというのは「視差」であるのだから、このような表現手法は、パララックスとは関係がない。
では、何と言うべきか。あまり定まった呼称はないように思うが、「スクロールイン演出」とでも呼べばいいのではないだろうか。  
なお、このスクロールイン演出を実装する上では、Intersection Observer APIはとても有効である。

## どうやってパララックスを実装するか
パララックスを実装する上で不可欠なのは、**現在のスクロール量を常に把握すること**である。究極的にはスクロール量が1px違えば、表示制御にそれを反映させなければならない。
であるがゆえに、特定の「瞬間」しか扱わないIntersection Observer APIでは、パララックスを十全に実現することはできない。  
ではどうするか。結局とのところ、`scroll`イベントを監視するという伝統的な手法を使うしかないのである。

```javascript
window.addEventListener('scroll', (event)=>{
  // これでなんとかする
  window.pageYOffset
});
```
ただ、`scroll`イベントはユーザーがスクロールするたびに発生しまくるわけで、パフォーマンスを低下させる恐れから、その使用は最小限に抑えたい。ゆえに、はじめてIntersection Observer APIについて知った時には、これでパララックスを実装できるのではないかと期待したものだ。
だが、よくよく考えると、Intersection Observer APIでは、パララックスは実現できない。というか、実現するのには向いてないのだ。原理的に。
ところが、巷では「Intersection Observer APIでパララックスを実装！」なる言説があふれている。そのほとんどが、単なるスクロールイン演出の意味で「パララックス」なる言葉を使っているのである。  
私は言いたい。
パララックスでも何でもないものをパララックスと称するのを止めよ、と。  
そして、私は問いたい。
パララックス実装のためには、結局のところ`scroll`イベント監視をするしかないよね？
Intersection Observer APIではできないよね？
これについて、はっきり書いている記事を見かけないけど、私の認識間違ってないよね？
と。
Keychain sharingってよく聞くから調べた[2020]


## はじめに
キーチェーン備忘録。

iOSの**App Groups**について調べていく中で
- **Keychain sharing**
- **App Extentions**
- **サンドボックス**

の3つが結構な頻度で出てきました。
自分的によく分からないことだらけだったので利用の仕方とかまでは書きませんが見返せるように。
また、間違ったイメージで捉えているかもしれないので正してくれる方がいれば幸いです。


## Keychainとは何か

大まかにまとめると…

keychainは
パスワードや秘密鍵・公開鍵などの機密情報を安全に管理するための仕組み。
KeyChainで管理する情報は暗号化されています。
主にアカウント情報を扱うのに最適とされています。

ユーザの情報を保存する仕組みとして UserDefaults がありますが、
これは設定ファイルなどのプリファレンス情報を管理するための仕組みで
違いとしてはアプリが削除されてもデータが残るかどうか、が大きいですかね。
あとは、後で記述しますが同じKeychain Access Groupに属するアプリ同士で使えます。

MacやiPhone使っている人なら聞いたことありますよね、ってか知っていますよね。
自分もキーチェーン自体はなんとなく知っていました。


## Keychain sharingとは

そして本題のKeychain Servicesは、そんなKeychainに保存された情報を扱うためのAPI群のようです。
基本はOSSライブラリを使うようです。
探した感じ有名なのはこの3つ。

- SAMKeychain
- KeychainAccess
- LUKeychainAccess

業務で使用しているのはSAMKeychainでした。
記事で多いのはLUKeychainAccessかな？
長所とかまでは調べていないのでわかりませんが。。
iCloudのキーチェーンを有効にできるかなど違いがあるようです。

## Keychain Access Group

Keychain Access Groupは「どの」アプリケーションがアイテムにアクセスできるのかを制御します。
デフォルトでは、アクセスできるアプリケーションはそのアイテムを格納したアプリケーション自身だけです。
グループの指定によって、同じグループに属するアプリケーションからのアクセスを許可出来ます。
このグループは、アイテムごとに指定できます。

簡単にいうと同じProvisinoingProfile,同じアカウントを使ったアプリ間での
KeyChainの共有ができるということです。

## 最後に

普通はもっと使い方について調べるのだと思うのですが
今回自分は概念についてのお勉強って感じでした。
もう少しまた調べて更新していこうと思います。

参考サイトの最新の記事
[iOS技術者がWordpressでアプリ公式ページを制作したら](http://cocoadays.blogspot.com/2018/04/)
も1から10までやったことが書かれていて面白かったです。


### ~参考サイト~
[[iOS] Keychain Services とは](http://cocoadays.blogspot.com/2011/02/ios-keychain-services.html)
関係Rと関係Sの関係演算ー結合、差、直積、和、商

応用情報技術者平成30年春期 午前問27

関係Rと関係Sに対して，関係Xを求める関係演算はどれか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/b7166401-9276-3a5f-f151-cfa40aac077a.png)

１、結合(join)は、
2つの表が共通して持つ属性(列)を基準に結合を行い、新しい表をつくりだす演算です。両方の関係に存在する結合属性は一方のみが表示されます。
RとSをID列で(自然)結合した結果は次のようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/53a8bbf4-b716-13f0-3d9b-6ac9574a8b87.png)

２、差(difference)は、
2つの関係があるとき、一方の関係に属する行から他方の関係に属する行を取り除いた表を返す演算です。
RとSの差演算(R－S)及び(S－R)は次の結果を返します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/b71b9bf8-3f05-a412-e59d-ccdca42c65fb.png)


３、直積(cartesian product)は、
関係Rと関係Sの行の全ての組合せを返す演算です。演算後の行数は「Rの行数×Sの行数」になります。
RとSの直積演算(R×S)は次の結果を返します。



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/99e08e14-22fa-d44f-961e-c1c1d0114ef2.png)

※直積集合とは、
数学において、集合のデカルト積（デカルト­せき、英: Cartesian product）または直積（ちょくせき、英: direct product）、直積集合、または単に積（せき、英: product）、積集合は、集合の集まり（集合族）に対して各集合から一つずつ元をとりだして組にしたもの（元の族）を元として持つ新たな集合である。

私の理解では、
直積、デカルト積、直積集合、積、積集合、集合の集まり　が同じものと思います。


４、和(union)は、
関係Rまたは関係Sに含まれるすべての行で構成される表を返す演算です。重複する行は除外されます。
RとSの和演算(R∪S)は次の結果を返します。


※UNION　ALLも和集合

UNION　が重複行を除きます
UNION　ALLが重複行を除きません

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/5b64d228-b962-0c4e-87cf-aed4d2fe55c9.png)

５、商
関係演算R÷Sは、関係Rのうち関係Sの全ての項目を含む行の集合を返す演算です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/2a9d00ce-afad-2952-bae5-a311b32c5a76.png)


参照：
https://www.ap-siken.com/kakomon/25_aki/q30.html

https://www.db-siken.com/kakomon/25_haru/am2_12.html

直積集合
https://ja.wikipedia.org/wiki/%E7%9B%B4%E7%A9%8D%E9%9B%86%E5%90%88
ホームページ製作案件[一連の流れ]

 今回、知人からホームページ製作という初の案件をいただきくことができました。
無事仕事を終えることができそうなので、備忘録としてホームページ製作の一連の流れを綴っていきたいと思います。

1.ヒアリング

　案件をいただくことができたら、まずはヒアリングです。今回クライアントが知人であることもあって、FaceTimeで顔合わせとなりました。クライアントとの信頼関係はかなり重要なので電話でもいいですが、できれば相手の表情が見えるアプリを使いましょう。

主なヒアリング内容は、以下の通りです。
1.HPを作る目的は何か
2.HPを作ることでどんな効果を期待するか
3.HPをみてもらいたいターゲット層はどのような層か
4.参考サイトはあるか(参考サイトがあると、作る側として非常に参考になる)
5.予算はどれくらいか
6.サイト内の画像、テキスト、デザインは誰が用意するか

始めに聞いておくのはこれくらいですね。他にも、状況に応じてヒアリング項目を追加し予めリストアップしておきましょう。

2.ワイヤーフレームを作る

　この作業を軽視していたせいで、後にも記述しますが、２回の手直しをすることとなりました。
ワイヤフレームに関しては、以下のサイトを参考にすると良いでしょう。

ワイヤーフレームの作り方完全ガイド【サンプル付き】
https://web-kanji.com/posts/making-wireframe

３.デザインを決めて、コーディング

　今回、WordPressテーマなどの既存デザインではなく、オリジナルデザインで作って欲しいとのことで、デザインの知識ゼロの僕がデザインを担当することになりました。

デザインの方法は、指定された参考サイトをみて、ベースカラー、サブカラー、アクセントカラーを把握して、それっぽくデザインを考えました。デザインのイメージが浮かんだらコーディングを始め、クライアントにみてもらいました。

案の定、クライアントからデザインの手直しをしてくれとのこと。計2回の手直しを経てようやくデザインが決まりました。

　ざっくりですが、これがホームページ製作の主な流れです。始めのうちは、順調に進むことの方が少ないと思います。僕も「もっとこうすればよかった」と思ったことがたくさんあるので、後日にアウトプットしたいと思います。
プログラミングで数学と英語を学ぶ（その１）

# 問題

https://projecteuler.net/problem=1

# 使用する英単語

https://progeigo.org/learning/essential-words-600-plus/
のAから始まる単語

# プログラム

```

#!/usr/bin/python3
# -*- coding: utf-8 -*-

# author : my page
# account : my page
# my favorite audio : anime song

import sys

# 割り算を許可した数字
allow_numer_list = [3,5]

if len(sys.argv) != 2 :
    # このアプリケーションの使用を受け入れるには、引数を1つ入力してください。
    print('To accept the usage of this application, input one argumet.')
    sys.exit(1)

try :
    # 適用する数字
    apply_number = int(sys.argv[1])

except :
    # この引数は利用可能な属性ではない
    print('This argument is not available attribute.')
    sys.exit(1)

# 入手する数字
access_number = 0
# 配列
array = range(1, apply_number)
for num in array :
    # 代替の数字？
    for alternative_num in allow_numer_list :
        # 回避しないアルゴリズム？
        # not avoid algorithm
        if num % alternative_num == 0:
            access_number += num
            break

print(access_number)

```

# 実行結果

```

# python3 test.py 1000
233168

```

# 結論
もっと英語勉強します。
APIについて

#プログラミング勉強日記
2020年9月1日
最近「API」という言葉を聞くがいまいちわかっていないのでまとめる。

#APIとは
　APIはApplication Programming Interfaceの頭文字をとったもの。簡単にまとめると、アプリケーションをプログラミングするための何かと何かをつなぐインターフェースである。APIとは、この何かと何かが、「アプリケーション、ソフトウェア」と「プログラム」をつなぐものという意味。
　APIがソフトウェアやアプリケーションなどの一部を外部に向けて公開することで、第三者が開発したソフトウェアと機能を共有できるようにするもの。
　違うソフトウェアやサービス間で認証機能の共有やチャット機能の共有、片方から数値データを取り込み別のプログラムでそのデータを解析することができる。このように、「APIを公開する」ということは、ソフトウェアにAPIという外部とやりとりできる窓口を作り、外部アプリケーションとコミュニケーションや連帯ができるようになる。
　アプリケーションとアプリケーションをつなげることで、機能性を拡張することができて、さらに便利に使える。

#APIのメリット
　APIには以下の3つの大きいメリットがある。

- ソフトウェア開発の効率化
- セキュリティの向上
- 最新情報を簡単に取得可能

#Web APIとは
　APIにはいくつかの種類があり、多くの人が使うのがWebの「API」であるWEBAPIである。Web上に公開されていて、外部からの呼び出しで利用が可能なAPIである。誰でも使用でき、無料なのが多いので多くのサービスがAPIを使っている。


#参考文献
[今さら聞けないIT用語：やたらと耳にするけど「API」って何？](https://data.wingarc.com/what-is-api-16084/2)
[API](https://www.otsuka-shokai.co.jp/words/api.html)
docker基本コマンド

#コンテナ一覧表示
docker ps -a

#dockerimage一覧表示
docker images

#dockerimageからコンテナを起動
docker run (image)
・option付き
docker run -v ファイルパス -p ホストのpostを指定 -name 適宜名前を指定 (image)

#コンテナを止める
docker stop (container)

#コンテナを削除
docker rm (container)

#コンテナをrestart
docker restart (container)
ネイティブアプリとは？

「ネイティブアプリ」とは何なのかわからなかったので，調べてみました．
## ネイティブアプリ
App StoreやPlay Storeといったストアからダウンロードして端末にインストールしたアプリのこと．
### 利点
端末にインストールしているため，オフラインでも利用可能であったり，デバイスの機能を利用してプッシュ通知やGPS，カメラ等のデバイスの機能を最大限に生かして搭載することができる．
### 欠点
一方で，ユーザにダウンロードしてもらわなければならないため，導入のハードルが高いと考えられている．また，ストア掲載料がかかるのも難点．
また，ストアへ掲載する際には審査があり，アップデートを行う際にも審査が必要である．（そういえばコロナ渦で出品したときは人手不足のせいで審査が遅かったなぁ...）

## Webアプリ
ネイティブアプリの対比として用いられているのが「Webアプリ」．ダウンロード不要で，Webブラウザで動くアプリのこと．
### 利点
ネイティブアプリと違って，ストアに掲載する必要がないため，手数料がかからない（サーバ代とかはかかるけどね）．また，Webブラウザがあれば使えるので，プラットフォームに依存しない（Win, Mac, iOS, Android...）．
### 欠点
ただ，ネイティブアプリのようなプッシュ機能などが利用できないのが現状．
あと，アプリ内課金が使えない．確かに，Apple Payを使えれば簡単に課金できるけど，Webだとクレカ情報を入力しなければならなかったりして，課金ハードルが高くなりそう（ただ，手数料を取られるのは痛い）．

# 参考
[Webアプリとネイティブアプリの違いとは｜アプリ開発・アプリ製作メディア](https://yapp.li/magazine/2093/)
[ネイティブアプリ｜ビジネス用語集](https://www.elite-network.co.jp/dictionary/nativeapplication.html#:~:text=%E3%83%8D%E3%82%A4%E3%83%86%E3%82%A3%E3%83%96%E3%82%A2%E3%83%97%E3%83%AA%E3%81%A8%E3%81%AF%E3%80%81%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3,%E3%81%AE%E3%81%93%E3%81%A8%E3%82%92%E6%8C%87%E3%81%97%E3%81%BE%E3%81%99%E3%80%82)
チームでコード管理する際のJupytextのいい感じの設定方法

jupytextの自動変換の設定で他の人に`~/.jupyter/jupyter_notebook_config.py`を編集させるの、辛いですよね。よい設定方法があるので共有します。

## まず結論
以下の内容のファイルをプロジェクトのルートに配置する。

```jupytext.yml
default_jupytext_formats: "ipynb,py:percent"
```

## jupytextとは
jupytextは、`.ipynb`のファイルを`.py`, `.R`, `.jl`, `.md`, `.Rmd`などに相互に変換するツールです。設定することでjupyter labと連携して、ファイル保存時にそれを自動変換してくれます。また、コマンドラインでも実行できるため、使いみちが豊富です。

`.ipynb -> .py`への変換には他のツールとして`nbconvert`もありますが、保存時に自動的に変換するようにするには工夫がとても必要です。

## .ipynb <-> .py変換
複数人で分析を行うと`.ipynb`のよくないところが明らかになっていきます。
いくつかありますが

- git管理するには重たい。
- `json`形式になっていてレビュー時に読みにくい。

などがあり、共有することが難しいです。
この解決策の一つとして、python形式などに変換するという方法があります。これによって、notebookが軽量で見やすくなり、良い感じです。
また、`.py` -> `.ipynb`変換によってnotebookの再現も問題なくできます。

## 環境
```shell
# Pipenv環境
python 3.8.5
jupyterlab 2.2.6
```

## 利用手順
### 1. jupytextのインストール
pipenvを使っていない場合はよしなに置き換えてください。

```shell
$ pipenv install jupytext
```
### 2. jupyter labのビルド
インストール後jupyter labを起動するとビルドするかどうか聞かれるので、そのままビルドしてください。
手動でビルドしたい場合は`pipenv run jupyter lab build`です。


## 設定の方法
### 4種類の設定方法
設定方法は4つあります。
1. `.ipynb`のメタデータを編集
2. `jupytext --set-formats ipynb,py notebook.ipynb`
3. `~/.jupyter/jupyter_notebook_config.py`を編集
4. jupytextの設定ファイルを作成

1, 2は各ファイルごとに設定が必要で面倒です。
3はリポジトリ外のファイル操作をさせる必要があるため動作が保証できません。

今回は4番について説明します。
このやり方だと他の人がリポジトリをプルした時でもすでに設定されているので優しいです。

### 設定ファイルの作成
設定ファイルは以下のいずれかの名前で作成します。
`.jupytext`
`jupytext.toml`
`jupytext.yml`
`jupytext.yaml`
`jupytext.json`
`jupytext.py`
またはこれらの先頭に`.`を加えた形式

このファイルをプロジェクトのルートにおいておけば自動的に読み込んでくれます。
配置場所について詳細は参考リンクをご確認ください。

以下のように書くことで自動変換が効くようになります。今回はyamlで書きました。

```jupytext.yml
default_jupytext_formats: "ipynb,py:percent"
```

VSCodeやPyCharmでの利用なども考えるとpythonファイルは`py:percent`形式がおすすめです。


結果こういう感じのディレクトリ構成になると思います。

```shell
.
├── Pipfile
├── Pipfile.lock
├── notebook.ipynb  # 作成したnotebook
├── notebook.py  # 変換されて生成したpython
└── jupytext.yml  # 設定ファイル
```

## まとめ

- `.ipynb <-> .py`変換を利用すればチームでのコード管理がしやすくなる。
- Jupytextはファイル保存時に自動変換することができる。
- Jupytextの設定方法は色々ある
- 設定ファイルを使えば設定を共有しやすい
- `py:percent`が無難

以上です！

## 参考

[Configuration — Jupytext  documentation](https://jupytext.readthedocs.io/en/latest/config.html)
TypeScript環境にESLint+Prettierを最小で導入する

# TL;DR
今回の設定ファイルは全て[このGist](https://gist.github.com/shun-shobon/432d5c5cfc1d3f7639a13d55c02de669)にあります。 

# はじめに
今回はTypeScript環境にESLint+Prettierをなるべく少ないファイル記述で導入することを目標にします。
他のLinter導入記事を見ていると重複した設定や無意味な設定が目立つのでそういったものは省きつつ導入します。

> 注： 私自身、Linterの導入になれているわけではないのでおかしい点があったら指摘してください。

# パッケージのインストール
今回はyarnを用いますが、お好みでnpmやpnpmを使用しても構いません。

## ESLint
```shell
yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
```

|名称|説明|
|---|---|
|[eslint](https://www.npmjs.com/package/eslint)|ESLint本体です。これがないと始まりません。|
|[@typescript-eslint/parser](https://www.npmjs.com/package/@typescript-eslint/parser)|ESLintにTypeScriptのソースコードを読み込ませるためのパーサーです。|
|[@typescript-eslint/eslint-plugin](https://www.npmjs.com/package/@typescript-eslint/eslint-plugin)|TypeScript特有のLintルールを追加します。|

## Prettier
```shell
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier
```

|名称|説明|
|---|---|
|[prettier](https://www.npmjs.com/package/prettier)|Prettier本体です。|
|[eslint-config-prettier](https://www.npmjs.com/package/eslint-config-prettier)|ESLintとPrettierでルールが競合している箇所を取り除く設定を追加します。|
|[eslint-plugin-prettier](https://www.npmjs.com/package/eslint-plugin-prettier)|ESLint上でPrettierを実行できるようにします。|

# 設定ファイル

## ESLint
```json-doc:.eslintrc
{
  "env": {
    "node": true,  // Node.js特有のグローバル変数を有効にします。
    // "browser": true,  // ブラウザ環境で動作するコードにLintを実行する場合は"node"をfalseに設定し"browser"をtrueにしてください。
    "es2020": true  // ES2020特有のグローバル変数及び構文を有効にします。
  },
  "plugins": ["@typescript-eslint"],
  "parser": "@typescript-eslint/parser",  // TypeScript用のパーサーを使用します。
  "parserOptions": {
    "sourceType": "module"  // ソースコードをESModuleとして読み込みます。
  },
  "extends": [
    "eslint:recommended",  // ESLintの基本的なルールを有効にします。
    "plugin:@typescript-eslint/recommended",  // TypeScriptの基本的なルールを有効にします。
    "plugin:prettier/recommended",  // Prettierと競合するESLintのルールを無効にします。
    "prettier/@typescript-eslint"  // Prettierと競合するTypeScriptの基本的なルールを無効にします。
  ]
}
```

## Prettier
Prettierの設定はあくまで一例です。好みに合わせて設定ファイルを変更してください。

```json-doc:.prettierrc
{
  "arrowParens": "always",  // アロー関数の引数が1つだった場合もカッコを強制する(差分を少なくするため)。
  "printWidth": 100,  // 折り返すまでの文字数を100に設定する。
  "trailingComma": "all"  // 複数行に渡る配列やオブジェクトのカンマを末尾にも強制する(差分を少なくするため)。
}
```

## npmスクリプト
```json-doc:package.json
{
  "scripts": {
    // .gitignoreに記載されていない全てのTSファイルに対してLintを実行する。
    "eslint": "eslint --ignore-path .gitignore '**/*.ts'",
    // 上記と同様だが、修正可能なエラーは修正する。
    "eslint:fix": "eslint --ignore-path .gitignore '**/*.ts' --fix"
  }
}
```
SwiftUIのUIHostingControllerではviewDidLoadは呼ばれない

## まとめ

UIHostingControllerではviewDidLoadは呼ばれないので注意しましょう。

## 解説


```swift
class CustomViewHostingViewController: UIHostingController<CustomView> {
    
    required init?(coder: NSCoder) {
        fatalError()
    }
    
    override init(rootView: CustomView) {
        super.init(rootView: rootView)
    }
    
    convenience init() {
        let customView = CustomView()
        self.init(rootView: customView)
        self.view.backgroundColor = .clear
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        print("*** didLoad: \(view.backgroundColor)")
    }
    
    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        
        print("*** willLayout: \(view.backgroundColor)")
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        
        print("*** didLayout: \(view.backgroundColor)")
    }
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        print("*** willAppear: \(view.backgroundColor)")
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        print("*** didappear: \(view.backgroundColor)")
    }

}

```

コンソールログは以下の通り

```shell
*** willAppear: Optional(UIExtendedGrayColorSpace 0 0)
*** willLayout: Optional(UIExtendedGrayColorSpace 0 0)
*** didLayout: Optional(UIExtendedGrayColorSpace 0 0)
*** willLayout: Optional(UIExtendedGrayColorSpace 0 0)
*** didLayout: Optional(UIExtendedGrayColorSpace 0 0)
*** didappear: Optional(UIExtendedGrayColorSpace 0 0)
```


ドキュメント
https://developer.apple.com/documentation/swiftui/uihostingcontroller

ドキュメントには

> Use the hosting controller like you would any other view controller, by presenting it or embedding it as a child view controller in your interface.

って書いてあるから、当然 `viewDidLoad` も呼ばれるものかと思いきや、呼ばれず、`viewDidLoad` に初期値をセットしても反映されないのでした。

initで初期値を設定して無事透明な背景色を表示しました。

サンプルプロジェクト -> https://github.com/justin999/SwiftUIInVC
useStateをまとめて書きたい

# useStateを１行でまとめて書きたい
useContextやuseStateなどのHooksを何度も使う場合に、省略する方法を考えました。
個人的にちょっと便利です。

```jsx:useSomeHooks.js
export const useSomeStates = (useState, initialValues=[]) => initialValues.map(useState)
export const useSomeContexts = (useContext, stores=[]) => stores.map(useContext)
```

```jsx:index.js
import React, {useState, useContext} from "react"
import {useSomeStates, useSomeContexts} from "./useSomeHooks.js"

// in your components
const [[name, setName], [age, setAge], [isHandsome, setIsHandsome]] = useSomeStates(useState, ["", 0, false])

const [{state: {tasks}}, {state: {user}}] = useSomeContexts(useContext, [taskStore, userStore])
```

より良い方法があれば教えて下さい。
phpQuery class not found エラー

前提として、
今回はphpQueryをcomposerでインストールした方法でなく
phpqueryファイルをインストールしたやり方で書いています。



##結論

phpqueryのファイルを任意の場所に置き、(私はLaravelのcontroller階層)
このようにcontroller内に書いたところ、

```
require("phpQuery-onefile.php");
```

このエラー。

```
Class 'App\Http\Controllers\phpQuery' not found
```
私はcontroller内に書いていたのですが、

```
use phpQuery 
```

の記述を追加したら
無事エラーが消えました。
jupyter ショートカット

#code→markdown
esc+M

#マージ
複数のセルをshiftを押しながら選択して、shift+M

#上下にセルを追加
上：esc+a(abobe)
下：esc+b(beyond)

#セル削除
esc+D+D

#操作戻る
esc+Z

#ナビゲーション削除
command+B

#コメントアウト
command+/

#文字の先頭、末尾に移動
option+←→

#リファレンス確認
shift+tab
【iOS 14】正確な位置情報をOFF時にはジオフェンスが無効となる

本記事は公開情報を元に書いております。

## おおよその位置情報
>新しい設定により、正確な位置情報の代わりに、あなたのおおよその現在位置をアプリと共有するオプションを選べます。

参照：[iOS 14で登場する新機能](https://www.apple.com/jp/ios/ios-14-preview/features/)
位置情報がユーザーの権限設定で、正確な位置情報を提供するかおおよその位置情報を提供するか選択できるようになるようです。

## [accuracyAuthorization](https://developer.apple.com/documentation/corelocation/cllocationmanager/3600215-accuracyauthorization)の追加

`CLLocationManager`にaccuracyAuthorizationというプロパティが追加されます。`.fullAccuracy`と`.reducedAccuracy`の値が入る可能性があります。
>If the value of this property is CLAccuracyAuthorization.fullAccuracy, you can set the desiredAccuracy property to any value. If the value is CLAccuracyAuthorization.reducedAccuracy, setting desiredAccuracy to a value other than kCLLocationAccuracyReduced has no effect on the location information, and your app can’t use region monitoring or beacon ranging.

上記は公式ドキュメントの引用ですが、 `.fullAccuracy`が設定されている場合は位置情報の精度を自由に設定できるが、`. reducedAccuracy`が設定されている場合は`kCLLocationAccuracyReduced`以外の値は無効になり、region monitorning（ジオフェンス）とbeacon ranging（ビーコン検知）ができなくなるようです。

またWWDCの[動画](https://developer.apple.com/videos/play/wwdc2020/10660/?time=686)をみると全体的に位置情報周りの変更がわかります
Laradockで立ち上げたmysqlコンテナでログインできないときの解決法

#出たエラー

```bash

laradock>docker-compose exec mysql /bin/bash
root@hoge:/# mysql -u root
Access denied for user 'root'@'localhost' (using password: NO)
```

laradockの.envファイルで

```php:laradock/.env
### MYSQL #################################################

MYSQL_VERSION=5.7
MYSQL_DATABASE=default
MYSQL_USER=default
MYSQL_PASSWORD=secret
MYSQL_PORT=3306
MYSQL_ROOT_PASSWORD=root
MYSQL_ENTRYPOINT_INITDB=./mysql/docker-entrypoint-initdb.d

```

これのMYSQL_ROOT_PASSWORDを使えばログインできます。（この場合root）
つまり、

```bash

laradock>docker-compose exec mysql /bin/bash
root@hoge:/# mysql -u root -p
Enter password: rootと打つ
```

で行けました。
ニューモーフィズムっぽいデザインをGoogleスライドで作った


**ニューモーフィズム（Neumorphism）**というデザイン手法が流行っていると聞いてただただやってみたくなり、方法を調べて社内用の資料でやってみました。
残念ながらその資料は作成しないことになったので、供養を兼ねてメモ。


# ニューモーフィズムとは
> ニューモーフィズム（Neumorphism）とは、ベース（背景）から要素が押し出されていたり、窪んでいたりするようなスタイルのデザイン手法です。

（参照　https://webdesign-trends.net/entry/11155#i-5 ）

シンプルでスマートな印象のデザインで個人的に好きなタイプです。

# Googleスライドでの作り方
作り方は、[デザイナーのつだしんごさん](https://twitter.com/shin_5_9?lang=ja) のInstagramを参考にしました。
パワーポイントでニューモーフィズムを表現する方法を解説なさっていたのですが、社内で共有する資料はGoogleスライドで作成していたので私はこちらで作成。

特に違いもないのでさくさく作りましたが、私がやった手順としては

1. スライドの背景をちょっとだけ色つける（白だとうまくいかないです）
2. 同じ図形を2つ用意する
3. 片方は左上に白い影、もう片方は右下にグレーっぽい影をつける。図形の色は背景と同じ色にする
4. 2つの図形をぴったり重ね合わせる

です。
調べてみると色んな方法があるみたいですが、私はこれが簡単そうだったのでこれでやりました。

# 完成したスライド
<img width="720" alt="slide1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471129/261a99f8-e47a-e48d-0047-0bd05079542e.png">
<img width="720" alt="slide2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471129/904de62a-1d64-b08b-d886-b04596453907.png">
<img width="720" alt="slide3" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471129/b9d1136d-e6dd-20f9-6603-66637e4415bc.png">
<img width="720" alt="slide4" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471129/d3d7f906-f7ec-8ab3-011c-757bde4e5b50.png">
<img width="720" alt="slide5" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471129/6f9f3276-e100-62cb-4810-f60be2e35f6a.png">

# 作ってみた感想
## 資料にはあんまり向かないかもな
やはりWEBサイトやアプリなど、ボタンをクリックして画面遷移する（もしくは何らかのアクションが起きる）みたいなもののほうが、この浮き出た感じを活かせるのかなと思いました。
資料は見るだけなので、この浮き出たデザインによる「ちょっと押してみたくなる感じ」が無意味そう。
私のデザインセンス次第なところもありますが。

## Googleスライド、インナーシャドウないんかい
せっかくニューモーフィズムをやってみる、というアレなので凹のほうのデザインもやってみたかったんですが、そうなると、図形の内側に影をつける＝インナーシャドウが必要らしい。
私が見る限りGoogleスライドにはインナーシャドウ機能ないっぽいんですが、どうなんですか？気づいてないだけ？
インナーシャドウなくても凹デザインにする方法はあるのかな…

インナーシャドウはパワポだとできるようなので、機会があればやってみようと思います。


# まとめ
普段デザイナーではないので特別デザインの流行りに気をつけているわけではないですが、資料作成が好きなので楽しかったです。
また違うのも時間があったらやってみようと思います。


# 参考
- [デザイナー・つだしんごさんのTwitter](https://twitter.com/shin_5_9?lang=ja)
- [つだしんごさんのInstagram](https://t.co/GmCHeta9Sk?amp=1)
- [ニューモーフィズムとは？デザイン方法やルールのまとめ](https://webdesign-trends.net/entry/11155#i-5)
Cannot use 'in' operator to search for 'red' in undefined chakra-uiのエラーの対処法

※今回はstorybookとchakra-uiを使ってエラーが出た人向けの記事です。

chakra-uiをインストールしてすぐにReactを立ち上げたら
Cannot use 'in' operator to search for 'red' in undefined chakra-ui
のようなエラーが出たので解決法を記そうと思います。

1.storybookの位置の確認。
chakra-uiとstorybookは相性がいいため一緒に使われている方も多いかと思います。
まずはstorybookのディレクトリがsrcフォルダーと同じ位置にあるかを確認してください。
2ThemeProviderで中身を囲っているか。
preview.jsの中でstoryの中身をThemeProviderで囲っているかを確認してください。

以上です。
主キーと外部キー、トランザクション管理と排他制御

#主キーと外部キー
　行を特定したり、表と表に関係を持たせたりするためには、
　主キーや外部キーという「鍵となる情報」が必要です。

　**主キー**
　データベースの表には、その中の行ひとつひとつを識別できるように、キーとなる
　情報が含まれている。これを**主キー**と呼ぶ。
　また、一つの列では一意にならないが、複数の列を組み合せば一意になるキーのことを
　**複合キー**と呼ぶ
　![図97.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686519/63c5e855-3163-3af3-817e-c7fe4d5db23a.png)



　**外部キー**
　表と表とを関係付けるため、他の表の主キーを参照する列のことを**外部キー**と呼ぶ
　![図98.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686519/d5d5235a-ec62-684f-77b6-d92834304f46.png)



#トランザクション管理とは処理のかたまり
　データベースでは、一覧の処理をひとまとめにしたものを**トランザクション**と呼ぶ
　データベースは、このトランザクション単位で更新処理を管理している。

#排他制御とは
　排他制御は処理中のデータをロックして、他の人が読み下記できないようにする機能。
　トランザクションの間、使用するデータをロックしておけば誰かに割り込まれて
　データの不整合が生じたりする恐れがなくなる

#ロックの種類
　**共有ロック**
　他のユーザはデータを読むことはできるが、編集はできない

　**専有ロック**
　他のユーザはデータを読むことも、書くこともできない

　※ロック機能を使う場合に注意しないと、「お互いがお互いのロック解除を永遠に待ち続ける」という**デットロック**が発生する。
　

#トランザクションに求められるACID特性
　トランザクション処理に対して4つの特性が必須とされている。それぞれの頭文字をとってACID特定と呼ばれる
　
　**Atomicity(原子性)**
　トランザクションの処理結果は「すべて実行されるか」「まったく実行されないか」のいずれかで終了すること。
　中途半端に一部だけ実行されるようなことを許容しない。

　**Consistency(一貫性)**
　データベースの内容が矛盾のない状態であること。トランザクションの処理結果が、矛盾を生じさせるようなことに
　なってはいけない。

　**IsoIation(隔離性）**
　複数のトランザクションを同時に実行した場合と順番に実行した場合の処理結果が一致すること。

　**Durability（耐久性)**
　正常に終了したトランザクションの更新結果は生涯が発生してもデータベースから消失しないこと。


#ストアドプロシージャ
　データベースを操作する一連の処理手順をひとつのプログラムにまとめ、データベース管理システム(DBMS)側にあらかじめ保存しておくことを
　**ストアドプロシージャ**と呼ぶ

#データベースの障害管理
　データベースの霜害回復には、バックアップやジャーナルファイルを使う
　データベースは生涯の発生に備えて定期的に**バックアップ**を取ることが基本
　また、バックアップ後の更新は、ジャーなると呼ばれるログファイルに更新前の状態(更新前ジャーナル)
　と更新後の状態(更新後ジャーナル)を随一記憶して、データベースの更新履歴を管理するようにしている。
　障害が発生した場合はこれらのファイルを使用して**ロールバック**や**ロールフォワード**なおの障害回復処理
　を行い元の状態に復旧している。

#コミット、ロールバック
　**コミット**
　一連の処理が問題なく完了できた時、最後にその更新を確定することで、データベースへと更新内容を反映させる。

　**ロールバック**
　データベース更新前の状態を更新前ジャーナルから取得してデータベースをトランザクション開始直前の状態まで戻す

#分散データベースと2相コミット
　物理的に分かれている複数のデータベースを見かけ上ひとつのデータベースとして扱えるようにしたシステム
　**分散データベースシステム**と呼ぶ
　分散データベースではトランザクション処理が各サイトに渡って行われるため全体の動機をとってコミットやロールバック
　を行うようにしないと一部のサイトだけが更新されたりしてデータの整合性が取れなくなってしまう。
　前妻とに対してコミットができるか問い合わせを行い、その結果を見てコミットもしくはロールバックを行う
　この方式を**2相コミット**と呼ぶ

#データベースを復旧させるロールフォワード
　トランザクションの処理中ではなく、ディスク障害など突然データベースが故障してしまった場合は
　ベータベースに行った更新情報をバックアップ移行の更新後ジャーナルから取得してデータベースを障害発生
　直前の状態にまで復旧させる
　バックアップファイルによる復元から、ここに至るまでの一連の処理を**ロールフォワード**と呼ぶ





　



#以上
エスケープシーケンス

#エスケープシーケンス

OSで使用している文字の中には、人が「文字」と認識できる情報以外に、OS上の制御文字や文字編集情報などの「文字」以外の情報も文字情報として含まれています。これらの文字の事を「特殊文字」と呼ぶ場合もあります。この特殊文字は、人が文字入力してOSに伝えるためにエスケープシーケンスが存在します。
エスケープシーケンスを意図して使用し、特殊文字を表示している場合は問題ありませんが、￥マークを何の配慮もなく、プログラム内に記載したり、DBへのデータ取込を行うテキストファイル内に含まれている場合、￥マークをエスケープシーケンスの一部とOSが解釈し、エラーが発生したり、意図しない状態でデータが登録/表示する場合があります。

Pythonでは、引用符（「”」または「’」）を3つ重ねて付けると、改行を含んだ文字列と定義できます。
しかし、インデントしたブロックのなかで改行を含んだ文字列を変数として定義する場合など
インデントがずれて見づらくなってしまいます。
【例】
def func():
	words = “””ゆく河の流れは越えずして
しかももとの水にあらず”””
	print(words)
func()
↓
ゆく河の流れは越えずして
しかももとの水にあらず

上記の場合、改行後の文字の先頭にインデントを入れてしまうと、その部分も文字列の一部として解釈されてしまいます。
このようなときは、エスケープシーケンスの「¥n」を使えば、改行を含む文字列を1行で記述でき、インデントの崩れを防ぐことができます。
【例】
def func():
	words = ”ゆく河の流れは越えずして¥nしかももとの水にあらず”
	print(words)
func()
↓
ゆく河の流れは越えずして
しかももとの水にあらず

エスケープシーケンスとは、改行やタブのようなコントロールコードを埋め込む為のものですが
ダブルクォーテーションで囲まれた文字列にダブルクォーテーションを入れたい場合や、ASCII文字やユニコード文字を
数値として埋め込む場合などにも利用できます。

【よく使われるエスケープシーケンス】

| エスケープシーケンス|説明|
|:-:|:-:|
¥n	|改行
¥r	|改行（CR、キャリッジ・リターン）
¥t	|水平タブ
¥f	|改ページ（フォーム・フィード）
¥’	|シングルクォーテーション
¥”	|ダブルクォーテーション
¥¥	|バックスラッシュ
¥x61|	16進数に対応する8ビット文字
¥u3042	|16ビット16進数に対応するUnicode文字、16進数部分には「0x」は不要
¥0	|null文字

※MacやLimuxでは「¥」を「\」に置き換える

三重クオート文字列中には、三連のエスケープされないクオート文字で 文字列を終端してしまわないかぎり、
エスケープされていない改行やクオートを 書くことができます (さらに、それらはそのまま文字列中に残ります)。 
(ここでいう ``クオート'' とは、文字列の囲みを開始するときに使った文字 を示し、' か " のいずれかです)。
"r" または "R" 接頭文字がつかないかぎり、 文字列中のエスケープシーケンスは標準 C で使われているのと同様の 法則にしたがって解釈されます。以下に Python で認識されるエスケープ シーケンスを示します
Laravel 6.x環境でparatestを使ってテストを実行した話

## はじめに

paratestを導入してみたかった & 導入したので備忘録。

ほぼ [Laravelで並列テストを導入するための道のり](https://qiita.com/niisan-tokyo/items/2fbfd30037f94661366d) を参考にさせていただきました。

**paratest 5.0.0以降ではこの方法が利用出来ないので4.2.0限定です。**

## 環境

- PHP

```
PHP 7.4.3 (cli) (built: Feb 20 2020 21:53:46) ( NTS )
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend Technologies
    with Zend OPcache v7.4.3, Copyright (c), by Zend Technologies
    with Xdebug v2.9.6, Copyright (c) 2002-2020, by Derick Rethans
```

- [Laravel Framework 6.18.35](https://github.com/laravel/framework)
- [PHPUnit 9.3.7](https://phpunit.de/)
- [paratest 4.2.0](https://github.com/paratestphp/paratest)
- テスト実行用に `.env.testing` を作成してあります。
- プロジェクトのpathは `/path/to/laravel-project` としています。


## paratestの導入

composerで一発！かんたん！
と思うのですが、PHPUnitのバージョンと合わない場合普通にエラーになるので、
エラった場合はPHPUnitのバージョンも合わせて確認したほうがよいです。


```sh
$ composer require --dev brianium/paratest
```

## RefreshDatabasを取り除く

[RefreshDatabase](https://laravel.com/docs/6.x/database-testing#resetting-the-database-after-each-test)はメチャクチャ便利だとは思うのですが、テストごとに処理走らせてしまうので実行時間が長くなり、
並行テストを行う際に問題が発生するので利用されている場合は `DatabaseTransactions`に置き換えます。
DB自体のマイグレーションは後述。

## テストランナーの作成

独自のテストランナーを作成して、初期処理などを行わせます。

### 実行内容

今回、主に実行している内容は下記ですが、お好みで調整。

- 強制的に実行環境を `testing` として取り扱う
- キャッシュ系のクリア
- DBのマイグレーション
- DBのシーディング


```php:/path/to/laravel-project/tests/TestRunner.php
<?php

namespace Tests;

use Illuminate\Contracts\Console\Kernel;
use ParaTest\Runners\PHPUnit\WrapperRunner;
use ExampleDatabaseSeeder;

class TestRunner extends WrapperRunner
{
    use CreatesApplication;

    public function run(): void
    {
        $_ENV['APP_ENV'] = 'testing';
        $console = $this->createApplication()->make(Kernel::class);

        $commands = [
            ['command' => 'cache:clear', 'parameters' => []],
            ['command' => 'config:clear', 'parameters' => []],
            ['command' => 'optimize:clear', 'parameters' => []],
            ['command' => 'route:clear', 'parameters' => []],
            ['command' => 'migrate:fresh', 'parameters' => []],
            [
                'command' => 'db:seed',
                'parameters' => ['--class' => ExampleDatabaseSeeder::class, '--no-interaction' => true]
            ],
        ];
        foreach ($commands as $command) {
            $console->call($command['command'], $command['parameters']);
        }

        parent::run();
    }
}
```

## paratestの実行

独自のテストランナーを指定して実行.

```sh
$ cd /path/to/laravel-project
$ php vendor/bin/paratest --runner \\Tests\\TestRunner

Running phpunit in 4 processes with /src/vendor/phpunit/phpunit/phpunit

Configuration read from /src/phpunit.xml

.................

Time: 00:05.117, Memory: 24.00 MB

OK (17 tests, 30 assertions)
```

## おわりに

現状のテストコード自体はまだそこまで重くないので速度の比較は行っていませんが、上記のようにすることで無事、paratestを実行できました。

`$_ENV['APP_ENV'] = 'testing';` を入れずに実行して通常の開発環境のデータをふっとばしたりしたので皆様もお気をつけください。
WindowsServer2016

##今回やること
業務でサーバの知識が必要になってきたので、構築して知識をつけていきたいと思います。
今回はタイトル通りWinSV2016でADの構成をしていきたいと思います。

##使用ツール
VMware Workstation 15 Player

##用語まとめ（備忘録）

|用語|概要|
|:----|:-----|
|ActiveDirectory(**AD**)|簡単に言うと検索機能を持った電話帳みたいなもの。データベース。|
|オブジェクト|ADがデータベース化している資源のこと|
|ドメインコントローラー|ADを管理するコンピューターのこと|

##ADの構成
では早速ADを構成していこうと思います。
VMを開いてwinSV2016を開いてみると、
![Winser2016.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686507/e9ac08b9-b140-72da-099a-415ad5671eec.jpeg)

これのパスワード忘れて入れなかったので、作り直しからスタートしていきます。
では早速作り直し。（ISO残しておいて良かった・・・）

![win2016.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686507/ad15e34c-c6e4-c1fb-3db8-352cc29a5ef2.jpeg)

あー、普通にやるとこれ出てインストールできないのですよね。
昔これでだいぶ手こずった記憶があります。
忘れてしまったので調べながら作成。

そしてできました。
![きた.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686507/ce505446-05fd-3338-2f63-1bf06028e543.jpeg)
インストール結構時間かかるのですよね・・・

とりあえずセットアップしてAD構成していきましょうかね。

**手順**
１、サーバーマネージャ起動
２、役割と機能の追加を選択
３、役割ベースまたは機能ベースのインストールクリック
４、対象サーバー選択
５、サーバーの役割を選択（今回はADドメインサービスにチェック）
６、機能の選択はデフォルトのまま
７、インストールしてドメコン昇格させる

今回はここまでやろうと思います。
では手順通りに順番に進めていきます。

もろもろ進めていきまして、インストールのところまで進みました。

ではインストールしていきます。
![わな.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686507/e9517ed1-e418-32ea-0abf-9f642cf6c61a.jpeg)

これ結構見逃すのですが、ドメコン昇格する前に閉じる押してしまうのですよね。
しっかりドメコン昇格押します。

次はドメコンの設定です。
![ドメコン.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686507/1cab31c9-f921-856b-0456-ff71c0326543.jpeg)

ドメコンオプションやらDNSオプションやら色々ありますね。
追加オプションのnetBIOSはデフォルトのまま進みます。

パスもデフォルトでいいです。
最後に前提条件チェックしてインストールします。
![これ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686507/21ec4305-0acf-f7e4-38b7-9e6eadd78232.jpeg)

そしてインストールが完了すると勝手に再起動がかかって終了となります。

##まとめ
久しぶりにWinSV触りましたが、GUIなので違和感感じますね。
最近ネットワーク構築ばかりやっていたので、慣れるまで少しかかりそうです。
業務でwinSV2016を使用するので、急ぎ知識を蓄えなければ・・・

次回はDNSサーバーの設定でもやろうと思います。

以上となります。
Cerelyを使っていてコードが反映されない時

# ローカル環境での開発でコードをセーブしても変更した箇所のコードが反映されない
ブラウザやInsomnia、print()で変数を確認したかった時などに、変更したコードが反映されなかった。調べ尽しても解決方法を見つけらかったため、同じことでつまづいている開発初心者の為に解決法を記す。

### 言語・ツール
- Python 3.7
- Django
- MySQL
- Visual Studio Code
- Insomnia
- AWS

## 解決法
### ターミナルでセロリを一旦止めて再起動

これだけ。:astonished::joy:

## 原因
CSVアップロードに非同期処理Celeryを用いていいたため、コードを保存しても、Celeryを再起動しないと反映されなかった。

## 解決までに仮定していたこと
Celeryが原因とは思いもよらなかったため、以下の仮定をしていた。

- AWSへの反映に時間がかかるのか?
- Slack通知をさせる連携がうまくいっていないのか？
- MySQLか？
- try except raiseの部分が間違っているのか？
- URLやエンドポイントが間違っているのか？

などなど永遠と調べてしまった。

同じことで困っているエンジニアがこの記事を読むことで早く解決することにつながれば幸いです。
Dockerを使ってサクッとWeb環境を作る

## 概要

ずっとDockerには触らずに来ていたのですが、最近はディープラーニングなどでも使いそうな雰囲気を感じて色々触ってみているところです。
そして今のプロジェクトでWebサーバを立てて検証したいことが出てきたので、せっかくなのでDockerで環境構築してみようと思い立ったのでそのメモです。

ちなみにWindows環境でやろうとして、ホスト側のディレクトリをマウントするのにちょっとハマったので主にそのメモです。

今回のメモは以下の記事を参考にさせていただきました。

- [Docker で Web サーバを立てて検証環境を作る](https://qiita.com/Asuforce/items/3cab073fec0a3030b8a6)


## コンテナの起動

コンテナの起動は非常にシンプルです。

```console:コンテナの起動
# Docker コンテナの起動
$ docker container run --name web -d -p 8888:80 -v $(pwd):/usr/share/nginx/html nginx:alpine
```

参考にした記事では上記のようにコマンドが書かれていたんですが、 `-v` に渡す引数の、ホスト側のパスはWindowsでは以下のように記述しないとダメでした。

こちらの記事の最後に書かれていました。

- [docker for windows を始める](https://qiita.com/okadabasso/items/04e21e10979a9dcc58e0)


```console:Windowsでのコンテナの起動
$ docker container run --name web -d -p 8888:80 -v D:/path/to/docker/nginx/html:/usr/share/nginx/html nginx:alpine
```

なお、コマンドの引数の意味は以下の通りです。

```console
container                        # コンテナ操作に関するサブコマンド
run                              # コンテナの起動
--name <container-name>          # コンテナ名前
-d                               # コンテナをバックグラウンドで起動（detachのd）
-p <host-port>:<container-port>  # ホストのポートとコンテナのポートをポートフォワーディング
-v <host_path>:<container_path>> # ホストのボリュームをコンテナにマウント
nginx:alpine                     # コンテナのイメージ名
```

## コンテナの停止と削除

```console:コンテナの停止と削除
# 停止
$ docker container stop web

# 削除
$ docker container rm web
```

```console:マウント情報などの確認
$ docker inspect $(doker ps -q)
```

`$(docker ps -q)`とすると、起動しているコンテナのIDを返してくれます。


## その他参考にした記事

- [Dockerコンテナにホストマシンのディレクトリをマウントする／マウントされたパスを確認する](https://mrkmyki.com/post-934)
MPO/SC/LC Secure Lockable Fiber Connector

The secure lockable fiber optic connector is mainly used in some private networks with high security level requirements, and improves security by preventing unauthorized modifications in the entire critical network.

MPO Secure Lockable Connector
The MPO secure lockable connector is a secure accessory that can be compatible with conventional MPO connector.  Once the MPO connector with secure accessory insert into the adapter, it will be locked. The connector cannot be pulled out unless remove the secure accessory. MPO connectors equipped with safety locks will not affect the original height and density of the connectors, and are also compatible with conventional adapters and optical modules. The installation is simple and convenient, requires no extra tools. It can effectively prevent releasing the connector by mistake, and to reduce the chance of getting dusty on the connector's surface.

![162.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463940/753f2f8f-6cf2-e134-5a90-9a11f2486ce7.jpeg)

SC Secure Lockable Connector
SC secure lockable connector is designed with unique keying details in the connector body, as long as it is inserted into the adapter, it is locked and the connector cannot be pulled out. The connectors of different colors correspond to the keys of the same color to open the lock and pull out the connector. There are also dust caps with locks that are suitable for SC conventional adapters, which can prevent dust and lock. For some unused fiber ports, it can prevent mistaken insertion.

![149.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463940/435ce018-8536-c07a-ae9c-2a921084a8bf.jpeg)

 
LC secure lockable connector
LC keyed connector is installed with a secure lock accessory on the LC duplex connector. The connector with lock accessory can be locked once insert into the adapter. You need to use the equipped unlocking key to pull out the connector. There is also a dust cap with lock for the LC adapter, which can be unlocked with the same key. Removing the security lock accessory on the connector will not interfere with the LC adapter or cause network performance degradation.

![148.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463940/ec06d5e6-be63-57db-b888-9c3a4f7bd523.jpeg)


HYC Co., Ltd was founded in 2000, has 20 years experiences in OEM ODM manufacturing of passive optical devices. We focus on providing customers one-stop services of the design, R&D and manufacturing of passive optical communication devices. We have fiber optic connectors, fiber optic jumpers, WDM wavelength division multiplexing, PLC optical splitters, MEMS optical switches and other product lines.

https://www.hyc-system.com/Product/index_200/3262