OmniAICreator/Qiita-1.07M huggingface dataset:
Dropbox Business APIの基礎知識

[DBX Platform デベロッパー ガイド](https://www.dropbox.com/developers/reference/)を読んだ個人メモ

---

# [DBX Platform developer guide](https://www.dropbox.com/developers/reference/developer-guide?_tk=guides_lp&_ad=guides1&_camp=reference)

- アプリを作成したときにスコープは2種類
    - アプリフォルダー
        - アプリ専用のフォルダー内であればフル権
        - アプリ専用のフォルダーはアプリ作成時には生成されない  
          　※アカウントとリンクに作成される
    - フルDropbox
        - ユーザーのフォルダ含めてフル権

# [Authentication types](https://www.dropbox.com/developers/reference/auth-types?_tk=guides_lp&_ad=deepdive1&_camp=auth_type)

## ユーザー認証
- ユーザーのアプリのアクセストークンを利用（ユーザーアクセストークン）
- ユーザーのアカウントを操作

## チーム認証
- チームのアプリのアクセストークンを利用（チームアクセストークン）
- アプリの権限で許可されている範囲でチームを操作
- チームアクセストークンにユーザーアクセストークンを追加することで  
  ユーザー認証が必要なAPIの利用が可能

### Dropbox-API-Select-User
- チームメンバーのユーザーアクセストークンを利用する際のヘッダー
- アプリで許可されている範囲でそのメンバーに代わって操作を行う

### Dropbox-API-Select-Admin
- チーム管理者のユーザーアクセストークンを利用する際のヘッダー
- アプリで許可されている範囲でその管理者に代わって操作を行う
- 管理者権限はチーム内のメンバー固有のフォルダ内の読み取りは可能

## アプリ認証
- アプリキーとシークレットを利用
- ユーザーやチームを識別しない

## 認証なし
- 一部のAPIは他パラメータを利用

# [Namespaces](https://developers.dropbox.com/ja-jp/dbx-team-files-guide#namespaces)
## チームフォルダモデル
- ルートフォルダは各メンバーごとにもつ
- ルート配下に共有フォルダとチームフォルダをもつ
    - 共有フォルダ
        - フォルダ内をメンバー間で共有
        - マウントは各々行う（フォルダ名もそれぞれ決められる）
    - チームフォルダ
        - フォルダ内をメンバー間で共有
        - フォルダ名も共有
- API呼び出し時のルートフォルダは各メンバーのルートフォルダになる
    - 共有フォルダ、チームフォルダもアクセス可

## チームスペースモデル
- ルートフォルダは共通
    - ルート配下に各メンバーごとに個人フォルダーをもつ
- ルート配下に共有フォルダとチームフォルダ、チームメンバーフォルダをもつ
    - チームメンバーフォルダ
        - メンバー固有のフォルダ
    - 共有フォルダ
        - チームフォルダモデルと同様
    - チームフォルダ
        - チームフォルダモデルと同様
- API呼び出し時のルートフォルダは各メンバーのチームメンバーフォルダになる
    - チームメンバーフォルダと同階層のフォルダへのアクセスはできない
        - 共有フォルダ、チームフォルダにアクセスするためにはルートの指定が必要
            - Dropbox-API-Path-Rootヘッダーを利用して、root_namespace_idを指定
        - 他のチームメンバーフォルダへのアクセスは別途権限が必要
- 自身のフォルダが紫色であればチームスペースモデル

![teamspace.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242897/a38d50b5-b250-8521-beb4-d9ec217a1e51.png)

# 感想
- ユーザーAPIにはない概念が多いため、追加で理解が必要
    - 特にチームスペースとAPI利用時のルートフォルダ
- ユーザーAPIと異なり、ファイルアップロードにはアクセストークン以外に  
  メンバーIDとルートフォルダIDが必要そう
Pythonのオブジェクト指向ってなんなのよ

#はじめに

オブジェクト指向ってなによ？となる度に検索→一瞬の理解→忘れ→検索...を繰り返しているので、自分の中でイメージを作って記憶に残そう、と思って書いたメモです。
間違いなどあればご指摘いただけると大変助かります！

#オブジェクト指向とは？
Pythonはオブジェクト指向プログラミング言語と呼ばれる。つまり関数、変数など、プログラムが処理する全てのデータをオブジェクト＝「物」として扱う言語。
#基本的な単語一覧
・オブジェクト... コンピュータ上に存在する何らかのデータ。
・クラス...  オブジェクトを生成する際のデータやメソッド（＝関数）を記述したもの。データの処理方法が書かれたレシピ。
・インスタンス... クラスによって実際に作られたオブジェクトのこと。（文字だけだといまいちイメージがつかみにくいので、下記のコード参照。）
・コンストラクタ... インスタンス生成時に実行される関数。
・メソッド... クラス内で定義される関数。
・メンバ... クラス内で定義される変数。

##オブジェクトの作り方
オブジェクトを作るには、何はともあれまずクラスの定義、つまりどうやってデータを扱うか？を決める必要がある。

```python:class_def.py
#クラスの宣言
class Human:
   def __init__(self,height,weight):
      self.height = height
      self.weight = weight
       print("hello")
#インスタンス生成
human = Human()
```

```python
#実行結果
hello
```

基本的なクラス定義の仕方は上記のようにclassの後にクラス名を指定し、def xxxでメソッドを記述する。
コンストラクタの第一引数の`__self__`はインスタンス自身を指す。
`__init__`で定義される関数はコンストラクタから呼び出される__初期化メソッド__。
なぜ「初期化」かというと、この中に書かれた処理内容はインスタンス生成時に自動で実行されるため。
つまり引数を指定することで、データの初期化を行っている。



```python:make_instance.py
#もうちょっと具体的な例
#インスタンス生成
human_data1 = Human(175, 60)
#インスタンスのメンバは(instance).(member)で参照できる
print(human_data1.height) #175
#メンバの書き換えも可能
human_data1.height = 180
print(human_data1.height) #180
```

##メソッド
上の例では初期化メソッドのみしか記述していないが、様々なメソッドを下記のように記述することができる。

```python
class Human:
    def __init__(self, height, weight, year):
        self.height = height
        self.weight = weight
        self.year = year
    
    def calculate_BMI(self):
        bmi = self.weight / (self.height**2)
        return bmi
    
    def glow_old(self, after):
        self.year += after

#インスタンス生成
human1_data = Human(175,60,25)
print(human1_data.calculate_BMI())
#glow_oldメソッドの呼び出し
human1_data.glow_old(5)
print(human1_data.year)
```

##クラスの継承
既存のクラスに機能を追加したいとき、クラスに直接上書きすることなくメソッドやメンバの追加が可能。
継承元となるクラスを「親クラス」、「基底クラス」、「スーパークラス」と呼び、継承先のクラスは「子クラス」、「サブクラス」、「派生クラス」と呼ばれる。
親の性質（＝機能）をそのまま引き継いだ子供ができる感じ。（親にどんどん追加していくのではなく。）

```python
class Human:
    #コンストラクタ
    def __init__(self, height, weight, year):
        self.height = height
        self.weight = weight
        self.year = year
    
    def calculate_BMI(self):
        bmi = self.weight / (self.height**2)
        return bmi
    
    def glow_old(self, after):
        self.year += after
#親クラスHumanを継承した子クラスHuman_detailed
class Human_detailed(Human):
    def __init__(self, height, weight, year, blood_pressure, eyesight_right, eyesight_left):
        #親クラスのコンストラクタの呼び出し
        super().__init__(height, weight, year)

        self.blood_pressure = blood_pressure
        self.eyesight_right = eyesight_right
        self.eyesight_left = eyesight_left

#インスタンス作成
human1_data_detailed = Human_detailed(175, 60, 25, 110, 1.0, 0.8)
#親クラスで定義した関数がつかえる！
print(human1_data_detailed.calculate_BMI())

```

#参考
https://xtech.nikkei.com/atcl/learning/lecture/19/00108/00005/
JavaScript　配列のメソッド

JavaScriptの学習の備忘録と振り返りの記事です。
何かの参考になれば幸いです。
付け足しや訂正などある場合ご教授いただけると
大変嬉しく思います！！

##pushメソッド
#####配列の最後に新しい要素を追加するメソッド
pushメソッドの後の()の中に追加したい要素を入力する
<details><summary>``定数.push(追加したい要素);``</summary><div>

```js
//const numbers = [1,2,3];
//console.log(numbers);
numbers.push(4);
//console.log(numbers);
```
出力結果:[1,2,3,4]
</div></details>



##forEachメソッド
#####配列の中の要素を1つずつ取り出し、全ての要素に繰り返し同じ処理を行うメソッド


<details><summary>``配列名.forEach((引数) => {処理内容});``</summary><div>

```js
//const numbers = [1,2,3];
//配列名の要素が1つずつ順番に引数に代入される
numbers.forEach((number) => {
//処理内に書いてある内容が繰り返し実行される。
//処理内容
console.log(number);

});

```
出力結果:1 2 3

</div></details>


##findメソッド
#####条件式に合う``1つ目の要素``を配列の中から取り出すメソッド

コールバック関数の中は { return 条件 } と書くことで、条件に合う要素が戻り値となる
<details><summary>const found定数名 = 配列名.find((引数名) => ``{return 条件}``</summary><div>

```js
//const numbers = [1,2,3,5,7];
//配列名の要素が1つずつ引数に代入されて処理される
const foundNumber = numbers.find((number) => {

return number > 3;

});

//console.log(foundNumber);
```
出力結果：5

:::note info
配列の要素がオブジェクトの場合もfindメソッドを使うことができる
:::

</div></details>



##filterメソッド

#####条件に合う要素のみを取り出して新しい配列を作成するメソッド

<details><summary>const filtered定数名 = 配列名.``filter``((引数名) => {return 条件}</summary><div>

```js
//const numbers = [1,2,3,5,7];
//配列の要素が1つずつ引数numberに代入される
const filteredNumber = numbers.filter((number) => {
//filterメソッド内で「3より大きい数字」かどうかを判定し、条件に合う要素が定数filteredNumbersに配列として代入される
return number > 3;
});

//console.log(filteredNumber);
```
出力結果：[5,7]

</div></details>



##mapメソッド

#####配列内のすべての要素に処理を行い、新しい配列を作成するメソッド

配列名の要素が1つずつ引数に代入されmapメソッド内の処理をした配列が新しく作られ、定数dに配列として代入される
<details><summary>const 定数名 =　配列名.``map``((引数名) => {return 条件});</summary><div>

```js
//const numbers = [1, 2, 3, 4];
// 配列numbersの要素が1つずつ引数numberに代入される
const doubledNumbers = numbers.map((number) => {
//↓↓↓配列numbersの全ての要素を2倍した要素を持つ、新しい配列を作成する条件
 return number * 2; 
});

//console.log(doubledNumbers);

```

出力結果:[2,4,6]
</div></details>
Slickでslick-slideのheightを100%にする方法

通常は下のような感じ（オプションなし）

```javascript
$('.slider').slick();
```

ここでslick-slideのheightを100%にする場合は

```javascript
$('.slider').slick()
.on('setPosition', function(event, slick) {
  slick.$slides.css('height', slick.$slideTrack.height() + 'px');
});
```

これでOK
技術者としての１歩目

ITに、仕事として触れた、あの時の自分に向けて 
 
 
技術者として必要な要素はたくさんあるけれど 
特に３つ 
・好奇心 
・疑う心、慎重さ 
・確かな知識から来る確信 
 
 
・好奇心 
まず知ってほしいのは技術の分野なのだから 
携わる限り、終わらない勉強が必要になる 
勝手に偉くなるなんてない 
１年サボれば後輩に教えてもらわないと分からないなんて平気で起こりうる 
技術に取り残される 
逆に 
勉強し続けられる人は重宝される、つまり、お金が稼げる 
楽しんでいる人は最強 
 
 
・慎重さ 
これは大丈夫かな？間違ってないかな？ 
と、確認する心 
実務では重視されるから忘れることなかれ 
現場で起こるトラブルの中で特に最悪なのが 
「独断で行ったトラブル」 
 
 
・確信 
とは言いつつも 
ずっと確認するわけにはかないので 
「これは大丈夫」と確信を持てることも大切 
また、ある程度経験を積むとお客さんの前で説明や商談を行うこともあるわけで。そんな時に「私にはこれまでの実績と確かな知識があります。おまかせください」と堂々と言える人には仕事が舞い込む、つまり、お金が稼げる 
 
 
そのためにも、好奇心を持って知識の吸収をする必要がある 
 
苦手意識は勿体無い 
楽しんで
makuakeのリターンを見比べやすくするcssHack

# 概要
makuakeのプロジェクトで、リターンの種類が多いと、見比べるのが大変です。
そんなわけで、一覧化して見やすくしました。

# 環境
google chrome + css/js上書きプラグイン
上書きプラグインは、[User JavaScript and CSS](https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld) を使いました。

# 実装
makuake.com 内のページに以下のCSSとjsを適用します。

```css:css
div#return {
	
	/* 表示位置設定 */
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 2147483647;
	
	/* 見た目の微調整 */
	border: 3px solid black;
	margin: 10px;
	padding: 10px;
	background-color: gray;
	
	/* 横スクロールできるようにするための設定 */
	width : 95vw;
	overflow-x: scroll;
	/*
	  white-space: nowrap; 
	  これをcssで指定しておくと、
	  画面に収まらないところにある画像が読み込まれないので、
	  javascriptのonloadで指定するようにする
	*/
	/* white-space: nowrap; */
}

div#return section.return-section {
	
	/* 親要素(div#return) から引き継いでしまうので、normalで上書きする */
	white-space: normal; 
	
	/* 横に並べる */
	display: inline-block;
}
```

```javascript:js
(window.onload = function() {
	var el = document.getElementById("return");
	el.style.whiteSpace = 'nowrap';
});
```

# 結果

HD画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282159/6db19b7d-2b51-6e7c-36d2-a37cc28c8652.png)

4K画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282159/b76348a3-1f45-83a4-341d-8599c2ca3344.png)


# ポエム
早割りとか売り切れとか把握するのもひと手間で、もうちょっとなんとかならんのかって思って作りました。
一度、間違えてオプション足りないやつを買ってしまったこともありますorz

公式にこういう表示をさせるボタンが実装されるといいな
[Unity]オブジェクトを指に追従させる実装

# はじめに
<!-- 発端や概要を記載 -->
オブジェクトが指についてくる実装について3Dと2Dでまとめました。
# 目次
<!-- タイトルとアンカー名を編集 -->
1. [完成したコード](#完成したコード)
1. [Wold座標とScreen座標](#Wold座標とScreen座標)
1. [線形補間](#線形補間)
1. [参考文献](#参考文献)

<!-- 各チャプター -->
<a id="#完成したコード"></a>
# 完成したコード
とりあえず完成したコードを載せておきます。上が3Dで下が2Dとなっていて動かしたいオブジェクトにアタッチすればOKです。

```c#:finger.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class finger3D: MonoBehaviour
{
    Vector3 startPos;
    Vector3 screenPos;
    Vector3 worldPos;
    
    void Update()
    {
            if (Input.GetMouseButton(0))
           {
               startPos = transform.position;
               screenPos = Input.mousePosition;
               screenPos.z = 10;
               worldPos = Camera.main.ScreenToWorldPoint(screenPos);

               transform.position = Vector3.Lerp(startPos, worldPos,1);
           }
        
    }
}
```
```c#:finger2D.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class finger2D: MonoBehaviour
{
    Vector2  startPos;
    Vector2 screenPos;
    Vector2 worldPos;

    void Update()
    {
        if (Input.GetMouseButton(0))
        {
            startPos = transform.position;
            screenPos = Input.mousePosition;
            worldPos = Camera.main.ScreenToWorldPoint(tapPos);

            transform.position = Vector3.Lerp(startPos, worldPos,1);
        }
    }
}
```
とても簡単に書けます。軽く何をしているのかを説明すると
######①現在のオブジェクトのWorld座標を取得
######②クリックした場所のScreen座標を取得
######③Screen座標をWorld座標に変換
######④線形補間を用いてオブジェクトのWorld座標にスワイプした分の座標を代入
という感じです。
<a id="#Wold座標とScreen座標"></a>
# Wold座標とScreen座標
そもそもUnityにはSceneビューとGameビューがあってそれら二つの座標は違うものとして扱われるわけです。
なのでGameビューでのアクションをトリガーとして、オブジェクトに操作を加えるためにはScreen座標をWorld座標に変換させなければいけません。

それを行なっているのが`Camera.main.ScreenToWorldPoint(screenPos);`です。引数にはWorld座標に変換したいScreen座標を取ります。(Gameビューはカメラに写っているものなので*Camera*のメソッドになるんだと思います。)

またスクリーン座標は型は*Vector3*ですが実際にスマホやPCの画面がそうである通り2次元です。しかし型が*Vector3*なのでz座標は存在していてそれをWold座標に変換する前に指定してあげないといけません。
それをしているのが`screenPos.z = 10;`です。
なぜ10にしているのかというと、僕のUnityでこれを実装した時に*main camera*のz座標が-10、動かしたいオブジェクトのz座標は０になっていて距離が10離れていたからです。つまり取得したScreen座標はあくまでスクリーン上（カメラ）の位置でそれをそのままオブジェクトに反映させると少しずれてしまうんですね。なのでScreeのz座標はオブジェクトとカメラの距離にしてあげることを覚えておくといいかなと思います。

しかし2Dの場合はz軸が存在しないので何も気にしないで大丈夫です。「完成したコード」の3Dと2Dを見比べれば2Dの方はz軸に関しての記述がないことを確認できます。
<a id="#線形補間"></a>
# 線形補間
線形補間とは、任意の2点が存在する時それらの間に直線があることを仮定してその長さの数値を近似的に求めることと説明できます。
`Vector3.Lerp(startPos, worldPos, 1);`
で線形補間をしていて、それをオブジェクトの座標に代入しています。

この関数は一般に`Vector3.Lerp(最初の座標、終わりの座標、現在の位置);`という使い方をします。
三つ目の引数である現在の「位置」をあえて座標と表記していない理由ですが、ここは第一引数と第二引数の距離を1という単位としてそれらの割合を0〜1の間で表すものだからです。なのでこの実装の場合第三引数を1とすればマウスにピッタリくっついてきてくれます。


<a id="#参考文献"></a>
# 参考文献
- [追従について](https://zykbgame.hateblo.jp/entry/2020/04/29/020907)
- [線形補間について](https://qiita.com/aimy-07/items/ad0d99191da21c0adbc3)
python cgiでInternal Server Error(500)が出た時の対処法

## 概要
windows10で、pythonのcgiプログラムを実行する場合、1行目の書き方がサーバによって異なる場合があるので、覚書。
因みに、この1行目はシバン（shebang）といい、スクリプトを実行する際のインタプリタを指定しているそうです。 ~~コメントが付いているので、関係ないかなと思っていたら意味あったのね。スミマセン。~~

#### 環境
　・OS　　　　：windwos10
　・使用サーバ：apache, pythonサーバ


## apacheサーバ
　apacheサーバでpython cgiを実行する場合、1行目にはpythonの実行ファイルのフルパスを書く。2021年9月時点でのpythonの最新バージョンは**python39**だが、この部分は必要に応じて書き換える。".exe"は省略可。


```test.py
#!C:\Users\{user name}\AppData\Local\Programs\Python\Python39\python.exe
# -*- coding: utf-8 -*-

print ('Content-Type: text/html\n\n')
print ("Hello world!")
```

#### 呼び出しurl
　htdocsフォルダ直下にファイルを配置した場合。

```
http://localhost/test.py
```

#### 設定ファイルの変更
　変更後、サーバを再起動する。

```httpd.conf
#-- htdocs以下のフォルダに配置する場合 --
<Directory "${SRVROOT}/htdocs">
    #修正（ExecCGI追加）
    Options Indexes FollowSymLinks ExecCGI
    AllowOverride None
    Require all granted
    #追記
    AddHandler cgi-script .cgi .py
</Directory>
```


## pythonサーバ
上記の書き方でも動作するが、test.pyの1行目は、下記の書き方でも良い。
**逆に言うと、下記の様に書いてapacheサーバで呼び出すとエラーになるので注意。**
コードがそのまま表示される場合があるが、ajaxからのget, post呼び出しでは問題なく動作する（仕様？）。
python + ajax通信の記事については、[こちら](https://qiita.com/qiiChan/items/046a2f53cf4d93a6a398)を参照ください。

```test.py
#!/usr/bin/python
# -*- coding: utf-8 -*-

print ('Content-Type: text/html\n\n')
print ("Hello world!")
```

#### サーバの起動コマンド
　pythonのcgiファイルが存在するフォルダで実行する（**"--cgi"が必要**）。

```
$ python -m http.server --cgi 8000
```

#### 呼び出しurl

```
http://localhost:8000/test.py
```


#### 補足
pythonサーバでは、pyファイルは呼び出せますが、htmlファイルを表示させるとエラーになりました。
html, js, pythonなどのソースを丸ごと実行したい場合は、apacheサーバなどを使用した方が良いかも。
それか、electronを使用するとか？

#### 結論
色々書きましたが、実際に開発を行う場合はDjangoなどのフレームワークを使った方が良いかと思います（汗
一応、動作の確認として。

#### 参考
1行目のpython.exeのパスを最後まで書かないと実行できない(500エラー)
https://teratail.com/questions/242869

Pythonスクリプトの1行目の意味
https://qiita.com/nafuka/items/c97bfd2a4ca26e70e722
SQLわからん

こんにちは！
この前[呪術廻戦で俺が学ぶMySQL](https://qiita.com/hayatoganbaru/items/f9ae47370cce8b8ec4a6)という題名で
2つ記事を書きましたが、そもそもMySQLって何やねんと思い調べてきましたので
今日はそれについてアウトプットしていきたいと思います！

# データベースとは
データベースとは決まった形式で整理されたデータの集まりのことです。例えば、タンスの中身を「Tシャツ」や「ソックス」、「パンツ」の項目ごとに整理したものと考えればわかりやすいでしょう。
大量にあるアイテムを項目ごとに整理して集めることであるデータを検索しやすくします。このデータベースを管理するシステムのことを***DBMS***(DataBaseManagementSystem)データベース管理システムと呼びます。

# データベースの種類

データベースには以下の３種類が存在します。

- 階層型
- ネットワーク型
- リレーショナル型

中でも幅広く使われているのがリレーショナル型です。
リレーショナルデータベース（***RDB***）では、データを表形式で表します。表ではエクセルのように行と列で表されます。この表のことをテーブルと呼びます。また、列にはそれぞれユーザーに分かりやすいような列名をつけます。リレーショナルデータベースでは、テーブル同士が連携して動く仕組みを持っています。
このようなシステムをリレーショナルデータベース管理システム（RDBMS）とよびます。

RDBMSにはMySQL、PostgreSQL、SQLiteなどがあります。

#　SQLとは
SQLとは, Structured Query Languageの略で、リレーショナルデータベース管理システム(RDBMS)と対話するための言語です。
RDBMSに（Query）問い合わせることでデータベースのあらゆる操作を行うことができます。
具体的に、データベースやテーブルの作成、更新、削除、データの作成、更新、削除、検索、また、データを特定するための条件を指定することができます。

# SQLの基本構文
[呪術廻戦で俺が学ぶMySQL](https://qiita.com/hayatoganbaru/items/f9ae47370cce8b8ec4a6)という記事を書いたときにもやりましたけど、もう一度復習復習。

テーブルの作成

```sql
CREATE TABLE `magicians` (id INT, name TEXT, magic TEXT);
```

既存のテーブルの定義を変更した時はALTER文を使います。
今回は列の追加

```sql
ALTER TABLE `magicians` ADD [COLUMN] magic TEXT ;
```

これであってるよな？？

テーブルを削除

```sql
DROP TABLE `magicians`;
```

データを新たに登録

```sql
INSERT INTO `magicians` SET id = id = 1, name = '虎杖悠仁', magic = '逕庭拳';
```

データの更新

```sql
UPDATE `magicians` SET magic = "黒閃" WHERE name = "虎杖悠仁";
```

今回は悠仁だけ呪術を変更したかったのでWHERE句を使用しました。

データを調べる

```sql
SELECT * FROM `magicians` WHERE id = 1;
```

データの削除

```sql
DELETE * FROM `magicians` WHERE id = 1;
```
コンピュータ回路について　[マスクパターン]

#マスクパターンについて

####２進数の引き算では

ビットを反転させて１を足したもの（＝２の補数）を足すというように計算する

これも<font color="red">論理演算で処理する</font>

この反転するために使うのが**<font color="red">マスクパターン</font>**


##ビットの反転

例）00000011

このような８ビットの２進数を全て反転させたい場合、排他的論理和回路を使う

![スクリーンショット 2021-09-07 21.58.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1803385/cfd64fba-ef39-6ff4-19df-a08d20d0da83.png)

![スクリーンショット 2021-09-07 21.58.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1803385/33764d47-8919-7731-35b1-b05e531285d3.png)

この<font color="red">11111111</font>をマスクパターンという

**要は対象のビットを反転させるために加える特定のビット列のこと**

このマスクパターンを加えたことで11111100を導いた

##ビットを取り出す

例）01101011

このような８ビットの２進数の後ろ４ビットを取り出したい場合、論理積回路を使う
![スクリーンショット 2021-09-07 22.05.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1803385/24f19854-93cf-f297-bc1d-9b8ab5cf24d1.png)

![スクリーンショット 2021-09-07 22.06.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1803385/424dc17f-ddd3-34d6-0237-66c9e04c17c1.png)

マスクパターンの00001111を加えたことで、後ろの４ビットを取り出すことができる

このように**<font color="red">特定のビットを取り出す</font>**にもマスクパターンを使う


>参考書籍
>>きたみりゅうじ　『キタミ式　イラストIT塾　基本情報技術者　令和０３年』 技術評論社 2020年
分割代入を利用したstate[ ]の更新


```ts
const [state, setState] = useState({id:1, firstName:"taro", lastName:"sato"});

const obj = {firstName:"hanako", lastName:"sato"};

const pushFunction = (state) => {
  setState( [...state, {id:2, ...obj}] )
}

// ...state                   => {id:1, firstName:"taro", lastName:"sato"}
// ...arr                     => firstName:"hanako", lastName:"sato"
// id:2, ...arr               => id:2, firstName:"hanako", lastName:"sato"
// [...state, {id:2, ...obj}] => [{id:1, firstName:"taro", lastName:"sato"}, {id:2, firstName:"hanako", lastName:"sato"}]
```
Blazor WebAssembly コードビハインド

#はじめに
この記事はC#コードをrazorコンポーネント内に書かなくてもよくする方法を書いています。 個人的には小規模～中規模案件はコードビハインドを使用する選択をすると思います。いずれViewModelの記事とコードビハインドとの比較記事は書こうと思います。

#`FetchData.razor`をコードビハインドで書く
- ・`FetchDataModel.cs`ファイルを新規作成
- ・`FetchDataModel`クラスに`ComponentBase`を継承する。
- ・`FetchData.razor`内の、`@code{ ～ }`で書かれているコードを`FetchDataModel`クラスにコピペ。
- ・`HttpClient型のHttp`変数を作成し`[Inject]`をつける。`[Inject]`をつけると依存注入でNewされたインスタンスが自動でセットされる。
- `WeatherForecast`変数をprotectedに変更

ここまでのコードは以下の通り。

```
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
using Qiita.Shared;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Net.Http.Json;
using System.Threading.Tasks;

namespace Qiita.Client.Pages
{
    public class FetchDataModel : ComponentBase
    {
        [Inject]
        protected HttpClient Http { get; set; }
        protected WeatherForecast[] forecasts;

        protected override async Task OnInitializedAsync()
        {
            try
            {
                forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast");
            }
            catch (AccessTokenNotAvailableException exception)
            {
                exception.Redirect();
            }
        }
    }
}
```
現時点では`FetchData.razor`コンポーネントから`FetchDataModel`までの関連付けはされていない状態。

- `FetchData.razor`に`@inherits FetchDataModel`を入れる。

```
@page "/fetchdata"
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using Qiita.Shared
@attribute [Authorize]
@inherits FetchDataModel

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}
```

#動作確認
エラーなくforecastページにアクセス出来ればOK
![キャプチャ11.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110251/fe6031ce-d7a0-92c7-cdea-1d246a994ee7.png)


<br>
[Blazor関連のリンク]
[Blazor WebAssembly プロジェクト作成(認証あり)](https://qiita.com/pero_88/items/be142d5d0ba92e5c91d0)
[Blazor WebAssembly 初期プロジェクト構成の入門](https://qiita.com/pero_88/items/ced1028ad536a43fec1d)
[Blazor WebAssembly Postgresを使うまで](https://qiita.com/pero_88/items/23e88a1d2bc3659b9946)
[Blazor WebAssembly コードビハインド](https://qiita.com/pero_88/items/be871f4ac63868f048f0)
[Blazor WebAssembly InputSelectの使い方](https://qiita.com/pero_88/items/3eddcd1aedf8bbc8441b)
【Firebase】ウェブAPIキーが見つからない場合の対処

#はじめに
Firebase Dynamic Links でURL短縮サービスを構築した際に「ウェブAPIキー」が見つからず苦労したので、解決方法をここに記す。

#問題
プロジェクトを新たに構築したら、[プロジェクトの設定]-[全般]に表示されるはずの「ウェブAPIキー」が見当たらなかった
![スクリーンショット 2021-09-12 101144 のコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13281/f8368102-bc23-b7d8-0fd5-7cd67d558e65.png)

#解決方法
[Authentication]-[Sign-in method]の「ログイン プロバイダ」のステータスを、1つ以上「有効」にする
![スクリーンショット 2021-09-12 101957.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13281/0ca99563-c91f-22fd-a84c-f4b9f22c252b.png)
【Rails】rails s するとA server is already running.が発生する

#はじめに
表題の通りですが、rails sするとA server is already running.となってしまい、serverが立ち上がりませんでした。

```
$rails s
=> Booting Puma
=> Rails 6.0.4 application starting in development 
=> Run `rails server --help` for more startup options
A server is already running. Check /home/ec2-user/environment/all-mng/tmp/pids/server.pid.
Exiting
```


#解決策
logに出てました。

```
A server is already running. Check /home/ec2-user/environment/all-mng/tmp/pids/server.pid.
```
となっているので、
server.pidを一度削除して、rails sすると解決しました。


#参考記事
[A server is already running 対処方法【Rails】](https://qiita.com/uloruson/items/78b0d2d5c30a1f79fc02)
[AWS基礎②]　IPアドレス CIDRとは

<h2>初めに</h2>
AWS学習時にCIDR表記で躓いたので
今回、IPアドレスから学習し直しました。

<h2>:raised_hand:IPアドレスとは</h2>
ネットワークに接続しているコンピューターの住所です。
住所なので、重複するのはNGです。
（IPアドレスはICANNという団体が管理しています）

<h2>:raised_hand:1台のPCを特定するには</h2>
インターネットで1台のPCを特定するには、
IPアドレス+ポート番号+MACアドレスが必要になります。

<h3>:gear:ポート番号とは</h3>
アプリケーションソフトウェアに割り当てられている個別の番号。
これがあることでどのアプリケーションソフトウェアと通信すれば良いかわかる

<h3>:gear:MACアドレスとは</h3>
IPアドレス同様、ネットワーク機器毎に割り当てられています。
データがIPアドレス元のPCにいくまでに、いくつかの機器を経由しますが、
どの機器を経由していけば良いのか教えてくれるのがMACアドレス。

<h2>:raised_hand:グローバルIPとプライベートIP</h2>
グローバルIP=パブリックIPは一意ですが、
プライベートIPは一意ではありません。
プライベートIPはインターネットに「直接」接続されていないネットワーク機器で
利用する　IPアドレスです。
（会社内、自宅内で使用しているPCはインターネットに直接接続していません。
ルーターを経由して接続しています。）

<h6>
前回の記事のようにネットワークを構築する際に
割り当てたのはプライベートIPアドレスです。
ちなみにプライベートIPアドレスには範囲がありますので、その中で割り当てます。</h6>

<h2>:raised_hand:CIDR表記</h2>

CIDRは「Classless Inter-Domain Routing」の略で、
ネットワークを構成する際に必要なIPアドレスの範囲を決める方法です。

仮に、「10.0.0.0/16」と表記された場合、
```/16 →16ビットがネットワークアドレス部になります。```
IPV4のIPアドレスの場合、32ビット表現なので、８ビット毎の区切りになります。

![スクリーンショット 2021-09-12 9.47.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1633266/6320770f-cc0b-8464-898f-2a657200e985.png)

<h6>ネットワーク部は固定で、ホスト部は可変です</h6>



<h2>終わり</h2>
each_with_indexを使って要素の位置を知る

備忘録。

```ruby
input = [1,3,5,6,9,12,23,55,78,90]
```

上記みたいな不規則な配列があったときに、特定の値の有無を返すプログラムを組みたいときにどうしたらいいか。

```ruby
def search(target_num, input)
```

上記もメソッドと境内を使って、値があれば〜番目にあります、なければその数は含まれていない旨を返す。

 

①inputに対してeach_with_indexを使う。

```ruby
input.each_with_index do |num, index|
```

これを使うと、input配列に対してnumはindex番目にあります、という情報が出力できるようになる。これ以下にif文を設けて条件を分岐させる。

 

②どんなif文を書くか

```ruby
if num == target_num

puts "#{index + 1}番目にあります"

return

end
```

target_numは引数としてきているはずなので実体がある。これに対してinputの各要素(=num)に等しいものがあるかどうかを探すので一行目のような記述になる。

indexは０から始まるので＋１して、実態に沿ってにわかりやすいやつにしておく。

 

③elseは使わない。

eachを使っている都合上、ここでreturnを書かず、かつelseを使うと
その数は含まれていません
その数は含まれていません
その数は含まれていません
その数は含まれていません
その数は含まれていません
その数は含まれていません
その数は含まれていません
その数は含まれていません
その数は含まれていません
その数は含まれていません
その数は含まれていません
などと、ターミナルのメンタルがヘルスすることになるので、一旦returnで処理を終了させる。条件外の場合の処理を書くのはifの外。

 

後は

```ruby
search(15,input)
```

などを記述して、値の検索をして帰ってくるものを確かめる。
【Vue.js】データバインディングについて

#はじめに
こんにちは。
データバインディングについてアウトプットしていきます！

##データバインディングとは
>データバインディング（データバインド、データ結合）は、データと対象を結びつけ、データあるいは対象の変更を暗示的にもう一方の変更へ反映すること、それを実現する仕組みのことである。

> 参照：[ウィキペディア](https://ja.wikipedia.org/wiki/%E3%83%87%E3%83%BC%E3%82%BF%E3%83%90%E3%82%A4%E3%83%B3%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0#:~:text=%E3%83%87%E3%83%BC%E3%82%BF%E3%83%90%E3%82%A4%E3%83%B3%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%EF%BC%88%E3%83%87%E3%83%BC%E3%82%BF%E3%83%90%E3%82%A4%E3%83%B3%E3%83%89%E3%80%81%E3%83%87%E3%83%BC%E3%82%BF,%E4%BB%95%E7%B5%84%E3%81%BF%E3%81%AE%E3%81%93%E3%81%A8%E3%81%A7%E3%81%82%E3%82%8B%E3%80%82)

簡単に言うと、データと画面表示を同期する仕組みで、片方を変更するともう片方も変更される。

<br>

###テキストのデータバインディング
※Vue.jsを使用する際は、公式ドキュメントのCDNなどであらかじめ読み込んでおく。

```html:HTML
<div id="app">
  {{ message }}
</div>
```

```javascript:Vue.js
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello!'
  }
})
```
Vue.js側で、画面に表示させるデータを定義。
マスタッシュ構文{ }で、データを格納した変数名`message`をHTMLのdivタグ内に記述する。
出力結果は`Hello!`となる。

<br>

###属性のデータバインディング

```html:HTML
<div id="app">
  <input type="text" v-bind:value="message">
</div>
```

```javascript:Vue.js
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello!'
  }
})
```
属性に対してデータバインディングを行いたい場合は、`v-bind`ディレクティブを使用する。
入力欄に`Hello!`が出力される。

<br>

###双方向データバインディング
```html:HTML
<div id="app">
  <p>
    <input type="text" v-model="message">
  </p>
  <p>
    <input type="text" v-model="message">
  </p>
</div>
```

```javascript:Vue.js
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello!'
  }
})
```
双方向データバインディングを行いたい場合は、`v-model`ディレウティブを使用して、データの値とテンプレートの値を双方向に変更する。片方のテキストボックスの値を変更すると、動的にもう片方の値も変更される。

<br>

#最後に
ここまでデータバインディングについてまとめました。
今回初めてディレクティブについて触れたので、他のものについてもまとめていきたいと思います！
STM32L010で「HELLO」と液晶表示 (Mbed)(AQM0802A) HAL


x Mbedのリビジョン143

1.SCLとSDAを接続、プルアップも忘れずに
2.電源の接続
3.下記のソースコードを書き込む
4.コンパイル実行で表示されたら終了
5.おわり


```c++


#include "mbed.h"

#define ADDR_LCD    (0x7C)      //  address

I2C_HandleTypeDef hi2c1;

//I2Cの初期化
void I2C_INIT1()
{
    __HAL_RCC_GPIOA_CLK_ENABLE();
    
    GPIO_InitTypeDef GPIO_InitStruct = {0};
    
    GPIO_InitStruct.Pin = GPIO_PIN_9|GPIO_PIN_10;
    GPIO_InitStruct.Mode = GPIO_MODE_AF_OD;
    GPIO_InitStruct.Pull = GPIO_PULLUP;
    GPIO_InitStruct.Speed = GPIO_SPEED_FREQ_VERY_HIGH;
    GPIO_InitStruct.Alternate = GPIO_AF1_I2C1;
    HAL_GPIO_Init(GPIOA, &GPIO_InitStruct);
        
    __HAL_RCC_I2C1_CLK_ENABLE();


    //I2C_HandleTypeDef hi2c1;

    hi2c1.Instance = I2C1;
    hi2c1.Init.Timing = 0x00000708;
    hi2c1.Init.OwnAddress1 = 0;
    hi2c1.Init.AddressingMode = I2C_ADDRESSINGMODE_7BIT;
    hi2c1.Init.DualAddressMode = I2C_DUALADDRESS_DISABLE;
    hi2c1.Init.OwnAddress2 = 0;
    hi2c1.Init.OwnAddress2Masks = I2C_OA2_NOMASK;
    hi2c1.Init.GeneralCallMode = I2C_GENERALCALL_DISABLE;
    hi2c1.Init.NoStretchMode = I2C_NOSTRETCH_DISABLE;
    HAL_I2C_Init(&hi2c1);    
    
    HAL_I2CEx_ConfigAnalogFilter(&hi2c1, I2C_ANALOGFILTER_ENABLE);

    HAL_I2CEx_ConfigDigitalFilter(&hi2c1, 0);

}//I2C_INIT1

uint8_t INIT_com[]={
0x0,0x38,
0x0,0x39,
0x0,0x4,
0x0,0x14,
0x0,0x70,
0x0,0x56,
0x0,0x6C,
0x0,0x38,
0x0,0xC,
0x0,0x1,
0x40,0x41};

uint8_t INIT_cls[]={0x0,0x1};

//メイン関数
int main()
{
    //I2Cの初期化
    I2C_INIT1();

    //液晶の初期化
    wait_ms(200);
    for(int ii=0;ii<11;ii++){
        HAL_I2C_Master_Transmit(&hi2c1, ADDR_LCD, &INIT_com[ii*2], 2, 3000);
        wait_ms(3);
    } //for

    //無限ループ
    while (1) {
        //液晶のクリア
        HAL_I2C_Master_Transmit(&hi2c1, ADDR_LCD, INIT_cls, 2, 3000);
        wait_ms(3);

        //液晶に出力 xなぜか連続送信するとバグる為に個別送信
        uint8_t a[]="HELLO",b[]="@A";
        for(int ii=0;ii< sizeof(a) ;ii++){
            b[1]=a[ii];
            HAL_I2C_Master_Transmit(&hi2c1, ADDR_LCD, b ,  2  , 3000);
            wait_ms(1);
        }//for

        //1秒待つ
        wait_ms(1000);
    }//while
}//main



```
Blazor WebAssembly Postgresを使うまで

#はじめに
この記事はPostgresでBlazorを使えるようにするまでの記事です。

#NuGetでインストールが必要なもの
- Npgsql.EntityFrameworkCore.PostgreSQL
- Npgsql.EntityFrameworkCore.PostgreSQL.Design

#コード側の変更点
- Server側のStartup.csファイルの`UseSqlServer`を`UseNpgsql`に以下を変更

```
services.AddDbContext<ApplicationDbContext>(options =>
options.UseSqlServer(
Configuration.GetConnectionString("DefaultConnection")));
```

```
services.AddDbContext<ApplicationDbContext>(options =>
options.UseNpgsql(
Configuration.GetConnectionString("DefaultConnection")));
```

- appsettings.json
`DefaultConnection`の部分、接続先をPostgresのDBへ設定


#　`Data/Migrations`の中のファイルを全て削除
このフォルダにはコマンド`Add-Migration InitialMigration`などで作成したファイル(DB構成の変更情報)が格納されるが、デフォルトではSQLServerのDBを更新する内容でありPostresにあったものではないため削除をする。

#　パッケージマネージャーコンソールでコマンド実行
- `Add-Migration InitialMigration`を実行し、Postgres用のMigrationファイルを生成する。
- `Update-Database`を実行しMigrationファイルを実行

#　動作確認
アカウント作成が出来れば正常にPostgresを使えている。
![キャプチャ8.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110251/8cfffab4-9c33-7932-71cc-6f605562e32e.png)

<br>
[Blazor関連のリンク]
[Blazor WebAssembly プロジェクト作成(認証あり)](https://qiita.com/pero_88/items/be142d5d0ba92e5c91d0)
[Blazor WebAssembly 初期プロジェクト構成の入門](https://qiita.com/pero_88/items/ced1028ad536a43fec1d)
[Blazor WebAssembly Postgresを使うまで](https://qiita.com/pero_88/items/23e88a1d2bc3659b9946)
[Blazor WebAssembly コードビハインド](https://qiita.com/pero_88/items/be871f4ac63868f048f0)
[Blazor WebAssembly InputSelectの使い方](https://qiita.com/pero_88/items/3eddcd1aedf8bbc8441b)
おかピーブログ

おかピーブログでは小さな変化を大きな成長にをテーマにブログ運営・副業について発信しています。

https://www.okapinikki.com/

![BF2D4AD3-CD38-46D9-B12B-2DDEEAA556F7.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1875648/bd30ea65-cda7-b4c5-3e4b-1e8c6679901f.jpeg)
【Python】SBI証券でIPOの申し込みがある場合にLine通知してみた

#はじめに
みなさんIPOへの申し込みは行っていますか？
私はSBI証券で数年前からポチポチしていたんですが、まぁこの確認が非常に面倒・・・。
通常は以下を定期的に確認する必要があります。

1.WEBブラウザを開く
2.IDとPWを入力する
3.国内株式＞IPO・PO をクリック
4.新規上場ブックビルディング/購入意思表示　をクリック
5.[申込]ボタンがあるか確認

これを自動化したい！という記事です。
事前準備や1〜2までの手順は以下の記事にまとめましたので今回は3-5を中心に記載します。

https://qiita.com/hirockio2206/items/540a0991ba29dec3fc40


#環境
Python3.9
macOS Catalina10.15.7
Chrome 93.0.4577.63

#プログラム
前半は前の記事をご確認ください。
後半はLineの通知先だけ変えれば使えると思います。

```IPO_moshikomi.py
from selenium import webdriver

ID = open('/Users/Hiroki/Info/ID.txt', 'r', encoding='UTF-8')
IDdata = ID.read()

PW = open('/Users/Hiroki/Info/PW.txt', 'r', encoding='UTF-8')
PWdata = PW.read()

driver = webdriver.Chrome("/Users/Hiroki/Info/chromedriver")
driver.get("https://www.sbisec.co.jp/ETGate")

elem_id_word = driver.find_element_by_name("user_id")
elem_id_word.send_keys(IDdata)

elem_id_word = driver.find_element_by_name("user_password")
elem_id_word.send_keys(PWdata)

elem_id_btn = driver.find_element_by_xpath("/html/body/table/tbody/tr[1]/td[2]/form/div/div/div/p[2]/a/input")
elem_id_btn.click()

######↑ここまでは前回の「【Python】SBI証券に自動ログインしてみた」で解説しています。#####
######↓今回はここから解説します。######

#↓変更不要　申し込みページにジャンプします
driver.get("https://site1.sbisec.co.jp/ETGate/?OutSide=on&_ControlID=WPLETsmR001Control&_DataStoreID=DSWPLETsmR001Control&sw_page=Offer&cat1=home&cat2=none&getFlg=on&sw_param1=21&sw_param2=")

#↓変更不要　申し込みページのソースを読み込みます。
IPO_page_source = driver.page_source

#↓変更不要　申し込みページのソースから[申込]ボタンの画像があるか確認します。
#ここがHirockioポイントですね。
moshikomi = IPO_page_source.find('b_ipo_moshikomi.gif')

#もし[申込]ボタンの画像がない場合は[-1]を返してきますので処理終了。
#もし[申込]ボタンの画像がある場合はLineに通知します。
def if_IPO(moshikomi):
    
    if moshikomi == -1:
        driver.close()
        driver.quit()
    else:
        addmessage="SBI証券で申し込み可能な" "\r\n""ブックビルがあります。""\r\n""https://www.sbisec.co.jp/ETGate"
        #!!要変更!! line_notify_tokenはご自身で発行して下さい。
        line_notify_token = '*************************************'
        line_notify_api = 'https://notify-api.line.me/api/notify'
        message = addmessage
        payload = {'message':"\r\n"+ message}
        headers = {'Authorization': 'Bearer ' + line_notify_token}  
        line_notify = requests.post(line_notify_api, data=payload, headers=headers)
        driver.close()
        driver.quit()
if_IPO(moshikomi)
```

#最後に
いかがでしたでしょうか。今回は[申込]ボタンの画像に注目してみました。
これを毎日定期的に実行させれば毎日のチェックは不要です。
定期的に実行させるには以下を参考にして下さい。

https://qiita.com/hirockio2206/items/5055c44246ca5239d3da

次は当選した際の動きを書きたいのですが、「当選した時の画像」は当選しないとわからん！
ということで当選したら作りたいと思います・・・。
ご参考になれば幸いです。
使用頻度の高いLinuxコマンドについて

##Linuxコマンドについて

###touch
新しいファイルを新規作成する
→その後vimなどのエディタを使用してファイルの編集などを行う

ls -lで確認するとわかるが、ファイル作成時には実行権限がないため、

```
$chmod + x ファイル名
```

で実行権限を付与する必要がある

###lsコマンドのオプション
①ls -lt
ファイルが持つ権限や所有者など詳細情報(-lオプション)を更新時間(-tオプション)ごとに並べる

```
$ls -lt
```

②ls -la
lsコマンド
→ファイル名が.ではじまるものは隠しファイルとみなして表示しない

しかし、-aオプションを付与することで隠しファイルも全て表示される
なおかつ詳細な表示がされる

```
$ls -la
```

③ls -lit
①にさらにノード番号（データに割り当てられる番号）を表示するiコマンドを付与したもの

```
$ls -lit
```

###mkdir
#####深いディレクトリの作成
mkdirでディレクトリを作成する際、階層が複数あるディレクトリを作りたいという場合もある
→しかし、普通の場合だと

```
$mkdir testdir/hogehoge
```
とした場合、ディレクトリ'testdir/hogehoge'を作成できません
という表示になってまう

そこで使用されるが

```
$mkdir -p
```

####&&の使用
mkdirでディレクトリを作ってすぐにcdコマンドで移動することが多い
そんな時に

```
$mkdir testdir
$cd testdir
```
と打ってもできるが、できれば一回の処理で終わらせたい。
そんな時は２つのコマンド間にに&&を使用することで連続して処理することができる。

```
$mkdir testdir && cd testdir
```

###mv -v
mvコマンドは
ディレクトリー間でのファイルやディレクトリの移動を行うコマンド

現場では　mv -vとして
ファイル名やディレクトリ名の変更を行うことが多い

###cat -n
cat -n としてnオプションを付与して
行番号を表示することが多い

```
$cat -n testfile1
1hogehoge
2fugafuga
3hogehoge
4fugafuga
```

###まとめ
以上のものは使用頻度が高いのでaliasを使ってすぐに使用できるようにするのがおすすめである。

```
#aliasの設定
alias ls='ls -F'
alias la='ls -a'
alias ll='ls -l'
#慎重な操作を行いたいコマンドの実行確認
alias rm='rm -i'
alias cp='cp -i'
alias mv='mv -I'
#深いディレクトリを一気に作成
alias mkdir='mkdir-p'
```
HDDのリカバリは、まったく新しいドライブレターで行う

XドライブのMFTがぶっとんだのでサルベージしてた
NTFSの場合、クイックフォーマットすると捗るらしいのでそうしたんだけど
IntelliJが勝手に.ideaディレクトリ作りやがった、ゆるされねぇ
（とりあえず、ほとんどのデータは回復した後なのでぎりぎり許した）

なので、HDDをリカバリするときには、元のドライブレターと全然ちがう、どこからも使っていない新しいドライブレターを設定しましょう
AtCoder Beginner Contest 218　備忘録

https://atcoder.jp/contests/abc218

A,B:AC
C:時間切れ。その後自力ｸﾘｱ
D:チラ見して時間切れ。
E,F:未着手

Cを考えるのに時間かかった。
考えた結果はあってたけど、そこにたどり着くまでに時間かかりすぎ。

A - Weather Forecast
そのまま実装するだけ。略

B - qwerty
与えられた数値に対応するアルファベットを返す問題。
アルファベット順のchar配列Qを作って対応。
char型はインクリメントすると辞書順に一個ずれるのでそれでQを作る。

```php
#include <stdio.h>
#include <bits/stdc++.h>
#include <math.h>
#include <iostream>
using namespace std;
typedef long long ll;

int main() {
    int P[30];
    string Q[30];
    bool flg=0;
    char c='a';
    int cnt=1;    

    while(cnt<27){
        Q[cnt]=c;
        c++;
        cnt++;
    }

    for(int i=0;i<26;i++){
        int a;
        cin>>a;
        cout<<Q[a];
    }
    cout<<endl;
}

```

C - Shapes

Sで与えられる図形を90度回転+平行移動させて、Tと重なるかチェックする問題。
・平行移動させて重なるかのチェック関数
・座標変換（回転、平行移動）
が必要

まずS,Tともに#をvector<pair<int>>で位置座標取り込む。
重なるかどうかのチェックは
・一番上の位置座標を基準にして、オフセット値を計算（dx,dy）
・以降の#座標について、Tにｵﾌｾｯﾄを足し引きした座標とSの座標がすべて一致
が成り立てばTrue。フラグで管理する。

座標変換は普通の行列使っての座標回転移動。
原点基準にすると、マイナスも入ってくるが、なんとなくプラスの値だけで扱いたいのでマイナスに行くときは#の数:countを足しておく。

回転は90,180,270度あるので、元と合わせてT,T2,T3,T4を定義し、
それらについて重なってるかどうかをチェックする。
回転時、一番上のpairはずれるので、sortで一番上がT2.[0]にくるようにしておく。

重なりチェックの考え方も時間かかったが、座標変換にも時間かかった。
基本的な数学知識（というか慣れ）は数こなして取り戻していくしかない。
大学入学時はもうちょっとやれてたはずなので、がんばる。


```php
#include <stdio.h>
#include <bits/stdc++.h>
#include <math.h>
#include <iostream>
using namespace std;
typedef long long ll;

bool flg=0;
bool flg2=0;

void test(vector<pair<int,int>>X,vector<pair<int,int>>Y,int cnt){
    int dy=X[0].first-Y[0].first;
    int dx=X[0].second-Y[0].second;
    for(int i=0;i<cnt;i++){
        if(X[i].first==Y[i].first+dy && X[i].second==Y[i].second+dx){
            flg=0;
        }
        else{
            flg=1;
            break;
        }
    }

    if(flg==0){
        flg2=1;
        return;
    }    
}

int main() {
    int n;
    cin>>n;
    vector<pair<int,int>>S;
    vector<pair<int,int>>T;    
    
    vector<pair<int,int>>T2;
    vector<pair<int,int>>T3;    
    vector<pair<int,int>>T4;

    int count=0;
    int count2=0;
    for(int i=0;i<n;i++){
        for(int j=0;j<n;j++){
            char a;
            cin>>a;
            if(a=='#'){
                S.push_back({i,j});
                count++;
            }
        }
    }
    for(int i=0;i<n;i++){
        for(int j=0;j<n;j++){
            char a;
            cin>>a;
            if(a=='#'){
                T.push_back({i,j});
                count2++;
            }
        }
    }
    
    if(count!=count2){
        cout<<"No"<<endl;
        return 0;
    }

    for(int i=0;i<count;i++){
        T2.push_back({-T[i].second+count,T[i].first});
        T3.push_back({T[i].second,-T[i].first+count});
        T4.push_back({-T[i].first+count,-T[i].second+count});           
    }

    sort(T2.begin(),T2.end());
    sort(T3.begin(),T3.end());
    sort(T4.begin(),T4.end());       

    test(S,T,count);
    test(S,T2,count);
    test(S,T3,count);
    test(S,T4,count);

    if(flg2==1){
        cout<<"Yes"<<endl;
    }
    else{
        cout<<"No"<<endl;
    }
}
```
Power Apps で Power Automate Desktop の簡易実行履歴表示アプリを作ってみた

以下のようなツイートを見かけて、私自身も試してみた [Power BI のやつ](https://flow.microsoft.com/en-us/blog/advanced-power-automate-rpa-run-log-analytics-with-power-bi-and-dataverse/) なのですが、これの中身をみて デスクトップフローの情報の取得方法を確認してみました。

https://twitter.com/nanoka7o8/status/1410142931692834817?s=20

結果、デスクトップフローの一覧と、フローの実行履歴は、Dataverse のテーブルにレコードと一部添付ファイルとして保管されており、(ログはログで別なのかは不明)アクセスできたので、簡単なアプリを作ってみました。
ちゃんとセキュリティロールが効いているのがすごくよいです。

https://twitter.com/nanoka7o8/status/1436737185038811137?s=20

今回はこのアプリの作成手順の一部で、デスクトップフローの一覧と、フローの実行履歴の一覧を作成する部分を記事にしたいと思います。


# 注意

今回のものは、いわゆる規定 (default) の環境では利用できません。
Microsoft 365 の契約で、追加費用なしで利用できる for Office 365 のライセンスではなく、個別に購入されたライセンスで、専用の環境を作成された場合のみ活用できるものですので、ご注意ください。


# デスクトップフローの一覧を作成する

アプリでは、以下のような画面で、デスクトップフローの一覧を表示していました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/721f68c7-8c0a-3a19-452a-b72d0c1aa6f6.png)

この選択中のギャラリーには、以下のような設定をしています。
これを設定すれば、同じようなギャラリーが作成できます。

```javascript:items
Filter(
    SortByColumns(
        'プロセス ',
        "name",
        Ascending
    ),
    カテゴリ = 'カテゴリ (プロセス )'.'デスクトップ フロー'
)
```
デスクトップフローの一覧を、フローの名前の昇順で表示しています。
名前の昇順は私の趣味なので不要です。

## デスクトップフロー情報の保管テーブル
| 項目 | 値 |
|:-:|:-:|
| 表示名 | プロセス |
| 名前(内部名) | workflow |

## 保管テーブルからの抽出条件
| 列名 | 条件 | 比較する値 |
|:-:|:-:|:-:|
| カテゴリ | 一致 | デスクトップ フロー |

※カテゴリ 列は選択肢なので、実際の値は 6 


# デスクトップフローの実行履歴の一覧を作成する

次に、アプリでは、以下のような画面で、デスクトップフローの実行履歴の一覧を表示していました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/264b1da1-2913-4e78-21bc-fa92742f5e53.png)

この選択中のギャラリーには、以下のような設定をしています。
これを設定すれば、同じようなギャラリーが作成できます。

```javascript:items
If(
    IsBlank(Condition),
    SortByColumns(
        'フロー セッション',
        "startedon",
        Descending
    ),
    Filter(
        SortByColumns(
            'フロー セッション',
            "startedon",
            Descending
        ),
        関連.プロセス名 = Condition
    )
)
```
実行履歴の一覧を、作成日時(=実行日時と思われる)の降順で表示しています。
アプリでは、デスクトップフローを選択している場合、そのフローの履歴だけに絞るような処理をくわえていましたので、余計な If と Filter が含まれています。

## フローの実行履歴情報の保管テーブル
| 項目 | 値 |
|:-:|:-:|
| 表示名 | フロー セッション |
| 名前(内部名) | flowsession |

## 保管テーブルからの抽出条件(結果を特定のデスクトップフローのみにしたい場合のみ)
| 列名 | 条件 | 比較する値 |
|:-:|:-:|:-:|
| 関連.プロセス名 | 一致 | 特定のデスクトップフローの名前 |

※関連 列は参照列なので、実際の値は別


# まとめ

情報へのアクセス方法がわかれば、標準で提供されるビュー以外にも、オリジナルのビューを作成することが可能です。
今回は、Power Apps で作成しましたが、Dataverse の Web API で直接アクセスできるので、SharePoint Frameworkや、お好みのフロントエンド技術を使えば、さらに高度なビューも作成できると思います。

ちなみに、本記事の元となった Power BI のやつでは、 ` フロー セッション ` のテーブルの ` AdditionalContext ` という列の中に保存されてる添付ファイル(JSON 形式の情報が含まれる .txt ファイル) をさらにいじっていたようでしたが、今回は大変なので、そこには対応しませんでした。

# 感想

前回記事書いてから、自分用の勉強がいまいちできておらずだいぶさぼってしまいました。反省。

私自身は全然 Power Automate Desktop 活用していないのですが、最近いろんなところで、PAD を使い始めました！使ってます！という話を伺います。
市民開発者の業務効率化の手段の1つとして、どんどん盛り上がっていけばよいですね！！
Python matplotlibでリアルタイムに音を可視化

#0. はじめに
pyaudioを用いて音を読み込み、それをnumpyでバイナリから数値化、matplotlibで描画する。

作業環境：
・Ubuntu
・Docker
・Python3.8.5

各ライブラリがインストールされていない場合はターミナルで以下を実行しpipインストールしておく。

```powershell
python -m pip install numpy matplotlib pyaudio
```

インストールができたらimportする。

```python
import pyaudio
import numpy as np
import matplotlib.pyplot as plt
```

#1. 音を読み込む前の設定
pyaudioを用いて音を読み込むための設定を行っていく。
`CHUNK`はデータサイズ。基本的に1024とするがデータ数が少なくエラーを吐かれたので3倍している。
`RATE`はサンプリングレート。1秒間に何回標本化するか指定する。CDが441KHzなのでそれに合わせている。
CHANKやサンプリングレートに関して詳しく知りたい方はGoogle先生へ。

```python
CHUNK = 1024 * 3
RATE = 44100
p = pyaudio.PyAudio()

stream = p.open(format=pyaudio.paInt16,   #データの型
                channels=1,　#ステレオかモノラルかの選択 1でモノラル 2でステレオ
                rate=RATE,   #サンプリングレート
                input=True,
                input_device_index = 6,   #マイクの指定
                frames_per_buffer=CHUNK)   #データ数
```

#2. グラフ描画のための設定
次にmatplotlibの設定を行っていく。
matplotlibの細かい情報は公式リファレンスかGoogle先生へ。

```python
fig, ax = plt.subplots()   #描画領域の作成
fig.canvas.draw()   #figureの描画
bg = fig.canvas.copy_from_bbox(ax.bbox)   #描画情報を保存
line, = ax.plot([0 for _ in range(CHUNK)])   #データがないためCHANKの数だけ0をplot
ax.set_ylim(-1, 1)   #yのデータ範囲を-1~1に設定
fig.show()   #描画
```

#3. データの読み込みとグラフの描画
実際にデータを描画していく。
`while True`で無限に繰り返しデータを抽出、描画し続ける。`ctrl+c`でプログラムを停止する。

```python
while True:
    data = stream.read(CHUNK)   #CHUNKだけデータを読み込む
    line.set_ydata(np.frombuffer(data ,dtype="int16") / float(2**15))   #バイナリデータをnumpy配列に変換
    fig.canvas.restore_region(bg)   #保存した描画情報を読み込む
    ax.draw_artist(line)   #データを指定
    fig.canvas.blit(ax.bbox)   #保存した描画情報にデータを加える
    fig.canvas.flush_events()   #描画情報をクリア

stream.stop_stream()   #streamを止める
stream.close()   #streamを閉じる
p.terminate()   #pyaudioを終了
```

#3. 最後に
記事作成者も学習段階であるため理解しきれていない点がある。また、よりよい方法が有る場合はコメントしてほしい。
では、よい`Pythonライフ`を。
【JavaScript】ハンバーガーメニューが閉じているのに中のリンクを押せる不具合の解消方法


#対象者

*   ハンバーガーメニュー実装を考えている方
*   メニューを閉じているのに中身をクリックできる不具合が出ている方


#目的

* ハンバーガーメニューの実装
* 不具合の解消

#実際の手順と実例
###1.前提とエラー

下記の記事を参考にハンバーガーメニューを実装しました。

https://knoweb.net/html-css/css/responsive-hamburgermenu/


しかし、閉じている状態でも中身のリンクをクリックできる不具合に遭遇したので、これを解消していきたいと思います。


###2.結論(解決策)

CSSが今回の原因でした。

before

````application.scss
/* ナビが開いた状態 */
nav.globalMenuSp {
  position: fixed;
  z-index : 2;
  top  : 0;
  left : 0;
  color: #fff;
  background: rgba(0,0,0,0.7);
  text-align: center;
  width: 100%;
  opacity: 0;
  transition: opacity .6s ease, visibility .6s ease;
}


/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  opacity: 100;
}
````

after

````application.scss
/* ハンバーガーメニューの中身 */
nav.globalMenuSp {
  position: fixed;
  z-index : 2;
  top  : 0;
  left : 0;
  color: #fff;
  background: rgba(0,0,0,0.7);
  text-align: center;
  width: 100%;
  opacity: 0;
  transition: opacity .6s ease, visibility .6s ease;
　　　　visibility: hidden;　　#ここを追加
}

/* ハンバーガーメニューが動いたとき */
nav.globalMenuSp.active {
  opacity: 100;
  visibility: visible; #ここを追加
}
````

###3.原因

**opacityを0にして透明になっていても、onclickイベントを拾ってしまう**でした

opacityとは透明度を調整するCSSです。


https://developer.mozilla.org/ja/docs/Web/CSS/opacity

また、visibilityは要素を非表示にするCSSです。

> visibility は CSS のプロパティで、文書のレイアウトを変更することなく要素を表示したり非表示にしたりします。

https://developer.mozilla.org/ja/docs/Web/CSS/visibility


ここではvisibility: hidden;を指定してハンバーガーメニューの中身が隠れるようにしています。

その後visibility: visible;でハンバーガーメニューが動いた際に要素が可視化されるようになっています。



#参照

* [【JS】ハンバーガーメニューの実装方法【CSS】](https://breezegroup.co.jp/202007/js-hamburger-menu/)
* [ハンバーガーメニューが閉じている状態なのに、中のリンクが押せてしまう。](https://teratail.com/questions/286643)
STM32L010で「HELLO」と液晶表示 (Mbed)(AQM0802A)


x Mbedのリビジョン125

1.SCLとSDAを接続、プルアップも忘れずに
2.電源の接続
3.下記のソースコードを書き込む
4.コンパイル実行で表示されたら終了
5.おわり



```c++


#include "mbed.h"

#define ADDR_LCD    (0x7C)      //  address

I2C i2c(PA_10, PA_9); //010

char INIT_com[]={
0x0,0x38,
0x0,0x39,
0x0,0x4,
0x0,0x14,
0x0,0x70,
0x0,0x56,
0x0,0x6C,
0x0,0x38,
0x0,0xC,
0x0,0x1,
0x40,0x41};

char INIT_cls[]={0x0,0x1};

int main()
{
    //液晶の初期化
    wait_ms(200);
    for(int ii=0;ii<11;ii++){
        i2c.write(ADDR_LCD, &INIT_com[ii*2], 2);
        wait_ms(3);
    } //for

    while (1) {
        //液晶のクリア
        i2c.write(ADDR_LCD,INIT_cls,2);
        wait_ms(3);

        //液晶に出力
        char a[]="@HELLO";
        i2c.write(ADDR_LCD, a , sizeof(a) );

        //1秒待つ
        wait_ms(1000);
    }//while
}//main

//容量削減
void error(const char* format, ...){}



```
昔プロセス診断でいただいた所見・提言で、今も大切だと思っていること

# はじめに
過去に、ある方に非公式なプロセス診断（プロセスアセスメント）のようなことをしていただいたことがあります。
そのときにいただいた所見・提言で、今も（今後も）、大切だと思うことがあったので、まとめておきます。別のプロジェクトにおいても、大切なことだとおもっています。
診断の対象は、「ソフトウェア要求分析」プロセスでした。ただ、そのプロセスに限らない診断になっていました。

# プロセス診断での所見・提言
過去の記憶をもとにしていますので、一部私の私見が入ってしまっている言葉があるかもしれません。

## 要求獲得について
* 要求の出所となっている人を特定し、パイプ作る。要求の理由を知るために。
* 製品の最終テストの場に同席する。
* 力を持っている人を特定し、その人に認められる。

## 要求分析について
* 変更案は、変更量だけでなく、影響量と複雑性増加量をもとに選択する。

## 人について
* 各組織/チームの役割を設計する前に、人のスキルを見る。連携すべき人を特定する。
* スペシャリストを名乗るなら、狭い小さな領域でもよいので、世界一であることが必要
* 目指す人がいる組織は、能力のある人が残る。常に新たな知識や技術が得られる組織には、能力のある人が残る。得られるものがなくなると、能力のある人は辞める。

## プロセス改善について
* テスト実行の自動化ではなく、テストコードの自動生成。そのためのコンフィグツール。そのための状態遷移表。テストコードを考えてから、他を考える。手順を自動化するでは、効果が小さい。
* 自分のプロジェクトで効果的だった活動等は、全社教育で展開し、自分のプロジェクトに人を投入しやすい状態を作る。
* ツールやプロセスや方法論等を売るときには、教育もセットにする。教育がないと、使えない。ツールやプロセスや方法論を獲得する/作るだけに力を入れるのではなく、教育に力を入れる必要あり。

## HAZOPについて
* 埋まったHAZOPシートからは発想が出にくい、白紙のHAZOPシートでワーク。

このとき、診断士の方からいただいたHAZOPに関するコメント
> １　作業する前に教育する。
> ２　教育ではHAZOPも。
> ３　HAZOPで作業の割り当ての妥当性確認、技能評価も。
> ４　同じ方向を向いている場合には視点を分配・そうでなければ視点は指定しない。

> 今回のHAZOPで新たな気づきは、早い、遅いは対象が日一つだけでもよい。前、後はもう一つの対象がいるということを追加説明。これまで、早い遅いが量で、前後は質（順番）といっていたが、別の表現として、早い遅いは絶対時間、前後は対象のある相対時間だから対象がいるという表現を取る。毎回条件が違うので、毎回成果だけでなくやり方でも新しい発見あり。前提は思い込みを生かし、決めつけないために事前に説明しないこと。

# プロセスアセスメントに関連する記事

https://qiita.com/kaizen_nagoya/items/82e27260e14809126437

https://qiita.com/kaizen_nagoya/items/bcdc60db20e8d7081fab

https://qiita.com/kaizen_nagoya/items/0f3a1174f81935bb6d85

https://qiita.com/kaizen_nagoya/items/f322df6978853c708c99

https://researchmap.jp/blogs/blog_entries/view/78772/58ea11ae3420c5b6797aed194e84a8ce

https://qiita.com/kaizen_nagoya/items/8df1dc7d3a5c7869d3c2/

# おわりに
プロセス診断（プロセスアセスメント）で、想定外の所見・提言をいただけると、うれしいです。
プロセス診断（プロセスアセスメント）で、自分でわかっている問題を指摘されても、あまりうれしくないです。
プロセス診断（プロセスアセスメント）で、良い点を認めていただけると、自分が認識していることでも、認識していないことでも、うれしいです。

@kaizen_nagoyaさんの記事に以下の記述があります。プロセス診断（プロセスアセスメント）でも同じではないかと感じました。

https://qiita.com/kaizen_nagoya/items/6d5962e1a0e4be28405c

> 1. 関係する技術について技能・経験のある人に参加してもらう

> これが一番大事。どの技術については誰の意見をもらわないと駄目みたいな習慣があればよい。組織内に誰もいなければ、組織外からの参加を要請できる習慣も大事。
【Laravel】検索機能の実装①　~基本！キーワード部分一致検索~

##作成物
Book Listの一覧から、著書名もしくは著者名が部分一致するレコードを検索する機能を実装します。
![スクリーンショット 2021-09-10 20.47.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1208065/4006d930-98ba-2dbb-3018-67a7baa4896e.png)


##前提
* "title" "author" "body" の要素を持つ、Postsテーブル（BoolListの投稿テーブル）を作成済み。
* SeederでPostsテーブルへサンプルデータを保存済み。

##今回実装する機能の概要
* データを全件表示する一覧画面と、検索結果の一覧表示画面は、同じviewファイル・Controllerのメソッドを使います。
* 検索boxに何か入力された場合は、Controllerのメソッド内のif文を通ってデータを絞り込み、絞り込んだデータのみを一覧画面のviewに返します。検索boxに何も入力されていない場合は、if文を通らず、データ全件をviewへ返します。


##migrationファイルの確認
作成しているmigrationファイルは、以下の通りです。

```2021_08_28_064931_create_posts_table.php

/**　略　**/

class CreatePostsTable extends Migration
{
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->string('author');
            $table->text('body');
            $table->timestamps();
        });
    }

/**　略 **/
```

##Viewの作成

```php:index.blade.php
//* 検索機能ここから *//
<div>
  <form action="{{ route('posts.index') }}" method="GET">
    <input type="text" name="keyword" value="{{ $keyword }}">
    <input type="submit" value="検索">
  </form>
</div>
//*検索機能ここまで*//

<h1>
  <span>My Book List</span>
  <a href="{{ route('posts.create') }}">[Add]</a>
</h1>

<table>
  <tr>
    <th>著書名</th><th>著者名</th>
  </tr>

//* 保存されているレコードを一覧表示　*//
  @forelse ($posts as $post)
    <tr>
      <td><a href="{{ route('posts.show' , $post) }}">{{ $post->title }}</td></a>
      <td>{{ $post->author }}</td>
    </tr>
  @empty
    <td>No posts!!</td>
  @endforelse
</table>
```

##ルート定義
検索ボタンを押した際のルーティングも、一覧画面の表示と同じPostControllerのindexメソッドに、getメソッドでアクセスします。

```web.php
Route::get('/', [PostController::class, 'index'])
    ->name('posts.index');
```

##コントローラーの編集
コントローラーを下記のように編集します。

```PostController.php
class PostController extends Controller
{
    public function index(Request $request)
    {
        $keyword = $request->input('keyword');

        $query = Post::query();

        if(!empty($keyword)) {
            $query->where('title', 'LIKE', "%{$keyword}%")
                ->orWhere('author', 'LIKE', "%{$keyword}%");
        }

        $posts = $query->get();

        return view('index', compact('posts', 'keyword'));
    }
```

###コントローラーの解説
* 検索boxに入力された値を受け取り、`$keyword`に格納します。
* $keywordで何かしらの値を受け取った場合は、if文の中で取得するデータを絞りこみます。
* `whereメソッド`で`LIKE検索`を指定し、$keywordの両側に`%`をつけることで、部分一致検索を行います。また`orWhereメソッド`でOR検索を行います。
* viewファイル`index.blade.php`へ、`posts(一覧表示するデータ)`と`keyword(検索ボックスのvalue値)`を受け渡します。

<br><br>
以上です^^