OmniAICreator/Qiita-1.07M huggingface dataset:
公式のUnity2D入門をv2020.3でやってみる(1)


:::note info
UnityはWindows版v2020.3
単にチュートリアルを順に進めるだけ。
:::

# Unity2D入門
とりあえずUnityの本を買って、[ステップアップUnity](https://gihyo.jp/book/2021/978-4-297-11927-0)でUnityでのどういう事が出来るのかの基本は理解した。

実際はUnityでアプリ（非ゲーム）を作りたいので、次は2Dの基本を見ておきたい、という事で公式の2Dシューティングのチュートリアルでもやるかと思ったらリンク切れっぽいので
[2D入門](https://learn.unity.com/project/ruby-s-2d-rpg-jp)
を2020.3で試してみることにした。その備忘録。

微妙にチュートリアルとバージョン違いで？詰まったりした。

## Unityエディタの設定

* とりあえず使うアセット（フリー）をダウンロード（下のプロジェクトで一緒に落ちそう）
* UnityHubの学習タブからプロジェクトをダウンロードして開く、そして保存する
* パッケージマネージャーで更新
* 利用アセットをダウンロード

`アセットストアはエディター内で開きます。`
と書いてあったけど、
The Asset Store has moved.
とりあえず使うアセットをブラウザ上でMyAssetにしてたので、パッケージマネージャーのマイアセットからインポート。
しようと思ったらAll assets from this package are already in your project.
だったので、UnityHubからダウンロードしている場合は不要だった模様。

## メインキャラクターと最初のスクリプト
* Emptyのシーンを作成
* 画像をインポート

`プロジェクトは2Dテンプレートで作成されているため、画像は自動的にスプライトとしてインポート`
されなかったので、自分でスプライトに設定。。
というか、どう見ても空で作ったシーンが3Dで表示されているので
[モードの変更](https://docs.unity3d.com/ja/2018.4/Manual/2DAnd3DModeSettings.html)でプロジェクトの設定変更。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2081290/86f47b63-a746-6175-3dc9-47f578310d26.png)


シーンそのものもビルトインの2Dで作り直しておいた。

* インポートしたスプライトを配置
* C#スクリプト作成・・・このレベルの話はさすがに不要なので飛ばす

ただ、ここでプロジェクト名をスペース付きのNew Unity Projectで保存してしまっていたので変更したい。
[ここ](https://mogi0506.com/unity-change-project-name/)見てフォルダ名変更、プロジェクト名.Slnファイル削除。ついでにフォルダも移動させた。

## キャラクターコントローラーとキーボード入力

* 入力マネージャーでコントロールの確認...（getAxisで入力取れる事を把握）
* C#スクリプトで入力を受けるようにして、オブジェクトにセット
* フレームレートや移動量の調整

`This is where you can configure the controls to use with the UnityEngine.Input API.`
となっているので、パッケージマネージャーからInputSystemをとりあえずインストールしてみた。
再起動すると入力マネージャーにプレイヤーの設定云々の警告が出ている。
[ここ](https://tsubakit1.hateblo.jp/entry/2019/01/09/001510)である程度解説があったけど、とりあえずサンプル通りに進まなそうだったので
プレイヤーの設定で入力を一旦「両方」に変更しておいた。（あとで新のコードもテストできるように）

何故か「スクリプトクラスが見つからないため」云々でオブジェクトにスクリプトをアタッチできなかったので、一度削除してからAssetsフォルダの直下にスクリプトを作ってアタッチできることを確認。
そのあとスクリプトフォルダに移動させた。

## ワールドを作る - タイルマップ
* タイルマップオブジェクトの作成
* タイルアセット、パレットの作成

タイルマップはチュートリアルとバージョンが違うのか、六角形とか矩形とかの選択肢があったので、矩形を選択。
六角形にするとGジェネみたいな見た目にできるということなのかな。
Assets内でタイルをcreateしようと思ったら、これもバージョン違いなのか存在しない？
[ここ](https://zykbgame.hateblo.jp/entry/2020/07/04/230718)を見て、パレットにスプライトを放り込めばタイルアセットが出来るみたいなので、それで代用。

* タイルで塗る
* 一つの画像から複数のスプライトを作る
* レイヤーの設定

隙間作らないためにPixels Per Unitを変更する、というのはすぐに忘れそう。
あと、スプライトエディターでスライスがないぞ！と思ったら、Windowサイズ変更したら出てきた。

とりあえずここまで。
http.Handler あたりを 1 ページにざっくりまとめる


`http.Handle` 周りの知識をよく忘れてしますので、1 ページにまとめてみました。

思った以上に、シンプルにまとまってよかった。。。

これでもう忘れない！

いや、忘れてもすぐ思い出せる！

## ざっくりまとめた結果がこれ
![Go_ Http.Handler.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/157574/d6f6949c-2dca-23c6-6efc-467a357f1c77.jpeg)

## 関連記事

過去に書いた関連記事。

より詳しく知りたい場合は、こちらを参照ください。

https://qiita.com/yNavS4Ki/items/5b7a0c7c41eb8da8f12a

https://qiita.com/yNavS4Ki/items/8bc2199e204d445ab6bc
スライダーの中にスライダー

##スライダーの中でスラーダーを動かす

```html:html
<div id="outer-slider">
  <div class="outer-slide-one">
    <img ...>
  </div>
  <div id="inner-slider" class="outer-slide-two">
    <div class="inner-slide-one">
      <img ...>
    </div>
    <div class="inner-slide-two">
      <img ...>
    </div>
  </div>
</div>

```


```javascript:jquery
    $(window).on('load',function() {
      var outerSlide = $('#outer-slider');
      outerSlide.slick({
        autoplay: true,
        autoplaySpeed: 4000,
        speed: 1000,
        fade: true,
        infinite: true,
      })

      var innerSlider = $('#inner-slider');
      innerSlider.slick({
        autoplay: true,
        autoplaySpeed:4000,
        speed: 1000,
        infinite: true,
      })
        .on("afterChange", function(event, slick, currentSlide, nextSlide) {
          switch (currentSlide){
            case 0:
              // 1枚目
              $(this).slick("slickSetOption", "autoplaySpeed", 6000);
              break;
            default:
              // それ以降
              $(this).slick("slickSetOption", "autoplaySpeed", 2000);
              break;
          }
        });
    })

```



slickスライダーで実装。
中のスライドの１枚目をゆっくり動かして外のスライドの速さに合わせて調整する。
AWS LambdaをRubyのコンテナで動かしてみる

AWS Lambdaをコンテナで動かしてみました。言語は特に理由はないのですがRubyで試しました。

手順

1. ソースコード
2. Lambda作成
3. Lambda実行
4. ソースコード更新

# ソースコード準備

ファイルは以下の3つを用意します。

`app.rb`

```app.rb
module LambdaFunction
  class Handler
    def self.process(event:,context:)
      p "Hello from Ruby 2.7 container image!"
      p event
    end
  end
end
```

`Dockerfile`

```Dockerfile
FROM public.ecr.aws/lambda/ruby:2.7

# Copy function code
COPY app.rb ${LAMBDA_TASK_ROOT}

# Copy dependency management file
COPY Gemfile ${LAMBDA_TASK_ROOT}

# Install dependencies under LAMBDA_TASK_ROOT
ENV GEM_HOME=${LAMBDA_TASK_ROOT}
RUN bundle install

# Set the CMD to your handler (could also be done as a parameter override outside of the Dockerfile)
CMD [ "app.LambdaFunction::Handler.process" ]
```
（Rubyのバージョンが古いのが気になる。これより新しいベースイメージがない・・・）

`Gemfile`

```Gemfile
source "https://rubygems.org"
```

# Lambda作成

ECRにレポジトリ作成

```shell
$ aws ecr create-repository --repository-name lambdacontainertest
```

Dockerイメージ作成

```shell
$ docker build -t 123456789012.dkr.ecr.ap-northeast-1.amazonaws.com/lambdacontainertest .
```

dockerコマンドがAWSにアクセスできるように認証

```shell
$ $(aws ecr get-login --no-include-email)
```

DockerイメージをECRレポジトリにpush

```shell
$ docker push 123456789012.dkr.ecr.ap-northeast-1.amazonaws.com/lambdacontainertest
```

LambdaをDockerイメージから作成

```shell
$ aws lambda create-function --function-name lambdacontainertest --package-type Image --code ImageUri=123456789012.dkr.ecr.ap-northeast-1.amazonaws.com/lambdacontainertest:latest --role arn:aws:iam::123456789012:role/SampleRole
```

# Lambda実行

マネジメントコンソールからでも実行してみると、以下のようなログが残ります。

```plain
"Hello from Ruby 2.7 container image!"
{"key1"=>"value1", "key2"=>"value2", "key3"=>"value3"}
```

# ソースコード更新

ソースコードを修正した場合のLambda更新までの手順です。

Dockerイメージを再作成

```shell
$ docker build -t 123456789012.dkr.ecr.ap-northeast-1.amazonaws.com/lambdacontainertest .
```

dockerコマンドがAWSにアクセスできるように認証（一度実行したらしばらくは覚えてくれている）

```shell
$ $(aws ecr get-login --no-include-email)
```

新しいDockerイメージをECRレポジトリにpush

```shell
$ docker push 123456789012.dkr.ecr.ap-northeast-1.amazonaws.com/lambdacontainertest
```

Lambdaを新しいDockerイメージで更新

```shell
$ aws lambda update-function-code --function-name lambdacontainertest --image-uri 123456789012.dkr.ecr.ap-northeast-1.amazonaws.com/lambdacontainertest:latest
```

（`create-function`と`update-function-code`とでパラメータの指定方法が違うのが気になる）
新人がコミュニケーションに困ったら読む記事

## はじめに


新人のときって、チームミーティングでの報告とか、ちょっとした質問も上手くできなくないですか？はい。自分がまさにそうです。

ちょくちょく悩んで早半年。ようやく少しフォーマット化できたので、今日までの考えをまとめておきます。

## コミュニケーションの種類


いきなりですが、新人が仕事でするコミュニケーションって何種類あると思いますか？

自分の実感だと、以下の５種類かなと思います。

* 提案
* 質問
* 依頼
* 報告
* 回答

皆さんはいかがでしょうか？特に新人のうちは、コミュニケーションの種類ってそんなにないと思いませんか？

つまり、上手なコミュニケーションをしたければ、これらに対して『型』を用意しておけば改善しそうですよね。

ということで、提案、質問、依頼、報告、回答の５種類に対する型をご紹介します。

## 提案・質問・依頼の型


これらは全てwhy, what, howを大事にすれば解決します。

具体的には以下のとおりです。

### 提案

Why：なぜやるのか？
What：具体的に何をやるのか？
How：Whatをどういう方法で実現するのか？

＜例＞
Why：過去の案件と改修箇所が大きく異なるため
What：設計書のフォーマットの変更
How：システム全体像に今までの改修箇所も明記

### 質問

Why：なぜこの質問が生まれたのか？
What：何を質問したいのか？
How：自分はどうするつもりなのか？

＜例＞
Why：〇〇の仕様を確認したいが担当者が不在のため
What：〇〇の実装期限を延ばしたいが良いか
How：〇〇の代わりに、□□の実装を先に行っておく

### 依頼

Why：なぜこれを依頼するのか？
What：何を依頼したいのか？
How：どのようにやってほしいのか？

＜例＞
Why：改修箇所の洗い出しを正確にできているか不安だから
What：設計書p.15の一覧表のレビュー
How：網羅的に洗い出せているかを重点的に見てほしい



ただし、これらは冗長にならないように、毎回調整は必要です。
例えば、提案・質問・依頼のwhyは、相手がこちらの意図を理解しているなら不要でしょう。

## 報告・回答の型


報告・回答は、ちょっと型が違います。なぜなら、報告・回答は前提として相手からの『提案、質問、回答』があるからです。

報告・回答は、which, why, whenを大事にすると良いでしょう。

### 報告

Which：できたのか、できていないのか
Why：なぜできないのか（できていない場合）
When：いつまでにできるのか（できていない場合）

＜例＞
Which：できていない
Why：〇〇の仕様について先方に確認中だから
When：回答が明日来るため明々後日までにできる


### 回答

Which：Yesなのか、Noなのか
Why：なぜYesなのか、なぜNoなのか
When：いつまでに回答できるのか（即答できない場合）

＜例＞
Which：できる
Why：過去に似た実装を担当しているから

（もし即答できないなら…）
Which：即答はできない
Why：初めて担当する箇所のため調査が必要だから
When：明日の夕会までに回答する


## 終わりに


いかがでしたでしょうか。自分がコミュニケーションに失敗する時は、だいたいこの『型』を守れなかったときです。

今後も定期的に振り返って、コミュニケーション能力の改善に努めたいと思います。

余談ですが、最近はチャットの先頭に【質問】とか【報告】とかタグをつけて送っています。伝わりやすさが段違いなのでオススメです。
React Hooksメモ

React hooksメモ

□useState
stateを管理するフック

```js
const stateTest = () => {
  // countに0を入れて初期化。setCountで新しい値の代入
  const [count, setCount] = useState(0) 
  return <div onClick={() => setCount(count+1)}>{count}</div>
};
```

□useRef
ref要素を保持するフック。useStateのref版

```js
const refTest = () => {
  const refCont = useRef(null);
  useEffect(() => {
    refCont.current.innerText = 'tesutodesu!';
  }, []);
  return <div ref={refCont}></div>
};
```

□useReducer
useState の代替品です。(state, action) => newState という型のリデューサ (reducer) を受け取り、現在の state を dispatch メソッドとペアにして返します。

```js
const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}
```

□useEffect
副作用を実行するフック。Reactのレンダリング後にしたい処理をする
APIとの通信やDOM操作を行う場合などに使用

```js
const effectTest = () => {
  const [cont, setCont] = useState('');
  useEffect(() => {
    fetch(
      '/api/endpoint',
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Authorization: `access_token`,
      },
    ).then(
      (response) => response.json()
    ).then(
      (json) => setContent(json.cont)
    );
  });
  return <div>{cont}</div>
};
```

□useMemo
関数の結果をキャッシュして、次回以降のアクセス時にはキャッシュから値を取得
第二引数の値が変わった場合、再キャッシュする

```js
const memoTest = (props) => {
  const val = useMemo(() => testfunc(props.id), [props.id]);
  return <div>{val}</div>
};
```

□useCallback
useMemoは関数の結果としての関数もキャッシュできるが、その場合はこちらを使用するのが楽
状態によって変わる関数の場合は、引数にその引数の指定が必要

□useLayoutEffect
DOMの変更があった後に同期的に副作用が呼び出されます

□useContext
stateをグローバルに管理するフック
複数のコンポーネントからstateを呼び出すときに使用
Recoil入門① 主要機能の説明

# はじめに
Recoil歴の短い若造なので間違っている点・こうしたほうがパフォーマンスにも良さそう！などがあればコメントいただけると助かります。
コメントの数だけスクワットします。冗談です。


# Recoilの環境構築と主要機能
```
yarn add recoil
```

### インストールできたけどRecoilって何者なの？？
Recoilは2020年5月にFacebookによって開発された状態管理ライブラリです。RecoilはReduxと同様にState管理ができるライブラリでもあります。
状態管理とは何か？？という方はこちらを一度目を通して見るとわかりやすいかと思います。
https://eh-career.com/engineerhub/entry/2019/05/23/103000


### Recoil主要機能についての説明

#### Atom
Atomはデータストアのことを示しており、Atomを設定するとどのコンポーネントからでも参照することが可能になります。

```
export const todoListState = atom({
  key: "todoListState"
  default: []
})
```
ここで必要となるものはkeyとdefault値です。具体的に何かというとkeyはatomのidを設定し、defaultで初期値を設定します。

#### Selector
次はSelectorです。Selectorとはatomの値を加工した結果を返す処理を行ってくれます。

```
export const todoListSelector = selector({
  key: "todoList"
  get: ({ get }) => {
  const list = get(todoListState) 
  return list
  }
})
````
先ほど同様に解説していきます。selectorでは単なる読み出し以外にも、情報を加工したりする処理を記述することができます。上記のコードだと const listでtodoListStateというAtomを取得してそれを返すというだけの処理を行なっています。

# まとめ
この記事ではRecoil入門　主要機能のまとめとなっており、最終的にはTodoList作成までやっていきたいと思いやす！！


# 参考文献
https://engineering.linecorp.com/ja/blog/line-sec-frontend-using-recoil-to-get-a-safe-and-comfortable-state-management/
https://qiita.com/tkmd35/items/b4630e53a907d96e3430
API Geteway と Lambda の使い方

こちらのプログラムを改造してみました。
[Web ページから、AWS Lambda の関数に引数付きでアクセスする](https://qiita.com/ekzemplaro/items/62dd9c17255c6145fe63)
html と js のみを変更しました。

実行例
![cors_aa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/43f81b27-de30-7c98-c137-2a0865e8c01a.png)

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="cors.js"></script>
<title>AWS API Gateway</title>
</head>
<body>
        <p>aa: <input type="text" name="aa" id="aa"></p>
        <p>bb: <input type="text" name="bb" id="bb"></p>
        <p>cc: <input type="text" name="cc" id="cc"></p>
        <p><input type="button" value="計算" id="calc"></p>


<div id="answer">answer</div>

<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>


<hr />
Version: Sep/25/2021 PM 14:19<br />

</body>
</html>
```

```js:cors.js
// -----------------------------------------------------------------------
//
//  cors.js
//
//                      Oct/20/2017
//
// -----------------------------------------------------------------------
jQuery (function ()
{
    jQuery("#outarea_aa").text ("*** cors.js *** start *** PM 18:28")

        jQuery ("#calc").click (function ()
        {
        jQuery("#outarea_bb").text ("*** cors.js *** clicked ***")

        const aa = jQuery("#aa").val()
        const bb = jQuery("#bb").val()
        const cc = jQuery("#cc").val()

        var str_out = ""
        str_out += "aa = " + aa + "<br />"
        str_out += "bb = " + bb + "<br />"
        str_out += "cc = " + cc + "<br />"

        jQuery("#outarea_cc").html (str_out)
        sum_up_proc(aa,bb,cc)
        })

    jQuery("#outarea_hh").text ("*** cors.js *** end ***")
})

// -----------------------------------------------------------------------
function sum_up_proc(aa,bb,cc)
{
const url = "https://bbc2fbufm6.execute-api.ap-northeast-1.amazonaws.com/test"

    const params = {'aa': aa,'bb': bb,'cc': cc}

    const args = JSON.stringify(params)

    jQuery.post(url,args,function(res)
        {
        const sum = res.sum
        var str_out = ""
        str_out += "aa = " + params['aa'] + "<br />"
        str_out += "bb = " + params['bb'] + "<br />"
        str_out += "cc = " + params['cc'] + "<br />"
        str_out += "sum = " + sum + "<br />"
        jQuery("#answer").html (str_out)
        })

}

// -----------------------------------------------------------------------
```
googleスプレッドシート query関数で抽出したデータの元の行数を取得する

#はじめに
query関数でデータを抽出した際、抽出されたデータは「元データの何行目に存在するのか」を知りたい時があります。
例)GASを実行する際、query関数で処理対象のデータだけを抽出してから処理を行い、処理結果を元データに書き込むために元の行数が知りたいなど

元となる表に行数を表示する列を追加出来ればいいんですが、元の表は変更してはいけないということもあるため、query関数で抽出したデータの右列に元データの行数を書き出す数式を作りました。

#元データと抽出イメージ

**■シート1、元データ**

|          |A      |B     |C   |
|:---------|------:|-----:|---:|
| 1        |A_1    |B_1   |    |
| 2        |A_2    |B_2   |対象|
| 3        |A_3    |B_3   |    |
| 4        |A_4    |B_4   |対象|
| 5        |A_5    |B_5   |    |

**■シート2、抽出データ**
query関数で「C列が"対象"」のデータを抽出、元データの行数を最右列に書き出し

|          |A      |B     |C   |D   |
|:---------|------:|-----:|---:|---:|
| 1        |A_2    |B_2   |対象| 2  |
| 2        |A_4    |B_4   |対象| 4  |

#数式
シート2のA1セルに以下の数式を入れているだけです。

```
=QUERY({'シート1'!A:C,ARRAYFORMULA(ROW('シート1'!A:A))},"WHERE Col3 = '対象'")
```

##解説
query関数は1つの範囲のみならず、複数の範囲を結合して扱うことが出来ます。
なので、元データの範囲 `'シート1'!A:C`と
行数を表示する範囲 `ARRAYFORMULA(ROW('シート1'!A:A))`を結合し、結合された範囲に対してquery処理をかけています。

■**{'シート1'!A:C,ARRAYFORMULA(ROW('シート1'!A:A))}で結合された範囲**

|          |Col1   |Col2  |Col3|Col4|
|:---------|------:|-----:|---:|---:|
| 1        |A_1    |B_1   |    |1   |
| 2        |A_2    |B_2   |対象|2   |
| 3        |A_3    |B_3   |    |3   |
| 4        |A_4    |B_4   |対象|4   |
| 5        |A_5    |B_5   |    |5   |

注意として範囲を結合すると、WHEREの列指定が"A","B"などが利用できず"Col1", "Col2"形式で指定する必要があります。
blade上でconfigを使った呼び出し方（2重foreach利用例）

#初めに
皆さんこんにちは！
今回は、Laravelのテンプレートエンジンであるbladeに、configファイル内にある定数を呼び出す方法を紹介させていただきます。
ググっても出てこなかった内容だったため、備忘録も兼ねて掲載させていただきます。

是非参考にしてみてください。

#bladeとは

公式から抜粋。

>BladeはシンプルながらパワフルなLaravelのテンプレートエンジンです。他の人気のあるPHPテンプレートエンジンとは異なり、ビューの中にPHPを直接記述することを許しています。全BladeビューはPHPへコンパイルされ、変更があるまでキャッシュされます。つまりアプリケーションのオーバーヘッドは基本的に０です。Bladeビューには.blade.phpファイル拡張子を付け、通常はresources/viewsディレクトリの中に設置します。

Laravelを実装する際に、viewの部分はhtmlではなくbladeというLaravel固有のテンプレートエンジンを利用します。
書き方自体は、htmlですがhtmlの構文に加えて、Blade固有の機能が使えるようになります。
>例
【条件分岐】
@if（条件式）〜@endif
【ループ処理】
@foreach（条件式）~@endforeach


今回は、blade上で、2重でforeachを利用し、configファイルから定数を出力するやり方の紹介になります。
では参りましょう。

#記述の仕方

まずはconfigファイルの定数の紹介になります。
例題として、fruitsの情報が入っている`foods.php`というファイルを作成します。
こちらは、配列で保持しており`category`と`kinds`でそれぞれ定数を持っています。

今回はこのファイルの情報を2重でforeachを利用し出力してみます。

```php:config/const/foods.php
<?php
  return[
    'FOODS' => [
        'FRUITS' => [
            'category' => 'グレープ',
            'kinds' => [
            'シャインマスカット',
            '巨峰',
            'ピオーネ',
            'デラウエア',
            'その他'
            ]
        ]
     ]
  ];
```

こちらが出力するためのコードになります。


```php:resources/views/foods.blade.php
@foreach(config('const.foods.FOODS') as $fruit)
<div class="title">{{ Arr::get($fruit, 'category') }}</div>
    @foreach(Arr::get($fruit, 'kinds') as $kind)
    <li>
        <input type="checkbox" id="test-{{$loop->index}}">
        <label for="test-{{$loop->index}}">{{ $kind }}</label>
    </li>
    @endforeach
@endforeach
```


出力結果
![スクリーンショット 2021-09-25 14.47.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542241/7b220a34-a28e-8ed9-4d38-2570a2af05ce.png)

#解説
###最初のforeach
最初のblade内にある`foreach`で`config/const/foods.php`の中にある`FOODS`を呼び出しています。
出力方法としては、`{{$fruit}}`で書きたくなるのですが、エラーが発生します。
想定されるエラーコードは下記です。

```
TypeError
htmlspecialchars(): Argument #1 ($string) must be of type string, array given
```

要は型がStringでしか出力できないのに、配列データで来てるよ？違くない？
って言われています。

上記のエラーの通りString型で出力する必要があるので、
`{{ Arr::get($fruit, 'category') }}`
としてあげて、`$fruit`内にある`category`を指定してあげています。
結果、「グレープ」が出力されます。

###2番目のforeach
最初のforeachの中に更にforeachを記述します。
そこで先程も利用した`Arr::get`を再度利用しています。
`foreach(Arr::get($fruit, 'kinds') as $kind)`
こちらの構文で`$fruit`内にある`kinds`を指定してあげています。

あとは、`{{$kind}}`と出力すると、上記の出力結果のお出ましです。

#最後に
いかがだったでしょうか。
僕は出力がしっかりできるまで数時間を要しました。笑

他にも躓いている方がいるのではないかと思い記述させていただきました。
少しでも役に立てたら幸いです。

ありがとうございました。
Field 'created_at' doesn't have a default value解決方法

#はじめに
MySQLで下記のテーブルにinsertを実行した際に
「Field 'created_at' doesn't have a default value」とエラーが発生した。

````
mysql> describe tables;
+------------+--------------+------+-----+---------+----------------+
| Field      | Type         | Null | Key | Default | Extra          |
+------------+--------------+------+-----+---------+----------------+
| id         | bigint       | NO   | PRI | NULL    | auto_increment |
| name       | varchar(255) | NO   |     | NULL    |                |
| created_at | datetime(6)  | NO   |     | NULL    |                |
| updated_at | datetime(6)  | NO   |     | NULL    |                |
+------------+--------------+------+-----+---------+----------------+
```

```
mysql> Insert into tables (name) values ('hoge');
ERROR 1364 (HY000): Field 'created_at' doesn't have a default value
```

#解決方法
「created_at」と「updated_at」にもinsertするようSQLを修正

```
Insert into tables (name, created_at, updated_at) values ('hoge', now(), now());
```
#まとめ
「created_at」と「updated_at」の「default」にNULLが設定されているため、insert時に省略すると、NULLを設定しようとする。しかし、２カラムともNULLは許可されていないため、エラーが発生する。
以降、テーブル新規作成する際は、「created_at」や「updated_at」には「now()」などのdefault設定をするよう心がける。

#参考
https://tackeyy.com/blog/posts/how-to-set-current-timestamp-to-datetime-columns
[Android]思考停止で使っていたAndroid Architecture Componentのメリットを少し掘り下げる

#取り敢えず使っていたけども
Google様が推奨しているから何となく使っていたMVVMを改めてメリットについてまとめていきたいと思います。

# Android Architecture Componentとは？
可読性とか保守性とかの観点でいい感じのアプリが作れるように、Googleが出してくれているライブラリ達の事です。
通称MVVMですが、正式名称ではないです。
まぁ、見た感じMVVMなのでそれで通りますがね。

#メリット一覧
- ライフサイクルを管理している

Androidのオブジェクトは、ライフサイクルという複雑な経過を辿ります。
その為、何も考えずに使っているとメモリリークが起きてしまします。
使ってないViewがずっと残り続けるなどですね。
これは、実際手動でもどうにかなるのですが、やはり自動化したいですよね。
そこで、LiveDataやViewModel等はViewのライフサイクルを独自に意識してインスタンス化されるので、Viewが破棄されるとそれに対応しているそれらも破棄されメモリリークを回避してくれます。

- 責務を跨いでLiveDataでデータを扱うことができる

Roomでデータを保存したり、そこから取り出したりすることがあると思うのですが、その取得する際にLiveDataで返すこともできます。
View-ViewModel間のデータの保持では、LiveDataを用いるかと思うのですが、そのために普通だとどこかでパースしたりする処理が入ると思うのですが、Roomを用いるとそこをLiveDataで返すことができ、データの扱いが簡易的になります。
また、Repository層でLiveDataでAPIの結果を返すこともできます。

# 終わり
気づき次第追加していきます！
osを作る その19

#概要

osを作る。
ezmtsを使ってみた。
時計、書いてみた。


#サンプルコード

```
#include <LiquidCrystal.h>
#include "Time.h"

LiquidCrystal lcd(8, 9, 4, 5, 6, 7);



ezMTS task(3);
int taskIdA;
int taskIdB;
int taskIdC;
int valueFromQueue;

ISR(TIMER1_COMPA_vect) {
	noInterrupts();
	for (int i = 0; i < g_task_num; i++)
	{
		if (g_taskInfo[i]._task_state == EZMTS_TASK_RUNNING)
		{
			if (--g_taskInfo[i]._time_rest == 0)
			{
				g_taskInfo[i]._time_rest = g_taskInfo[i]._timeout_val;
				interrupts();
				g_taskInfo[i]._cb_func(NULL);
				noInterrupts();
			}
		}
	}
	interrupts();
}

int task1(void * dummy) {
	lcd.setCursor(0, 0);
	lcd.print(hour());
	lcd.print(":");
	lcd.print(minute());
	lcd.print(":");
	lcd.print(second());
	lcd.print(" ");
	return 0;
}
int task2(void * dummy) {
	int v = 0;
	lcd.setCursor(0, 1);
	if (valueFromQueue > 1000)
	{
		lcd.print("5");
	}
	if (valueFromQueue < 50)
	{
		lcd.print("0");
		setTime(hour(), minute(), 0, day(), month(), year());
	}
	else if (valueFromQueue < 250)
	{
		lcd.print("1");
		v = minute();
		v++;
		if (v > 59) v = 59;
		setTime(hour(), v, 0, day(), month(), year());
	}
	else if (valueFromQueue < 450)
	{
		lcd.print("2");
		v = minute();
		v--;
		if (v < 0) v = 0;
		setTime(hour(), v, 0, day(), month(), year());
	}
	else if (valueFromQueue < 650)
	{
		lcd.print("3");
		v = hour();
		v--;
		if (v < 0) v = 0;
		setTime(v, minute(), 0, day(), month(), year());
	}
	else if (valueFromQueue < 850)
	{
		lcd.print("4");
		v = hour();
		v++;
		if (v > 23) v = 23;
		setTime(v, minute(), 0, day(), month(), year());
	}
	return 0;
}
int task3(void * dummy) {
	int sensorValue = analogRead(A0);
	valueFromQueue = sensorValue;
	return 0;
}
void setup() {
	setTime(19, 50, 0, 8, 7, 2021);
	lcd.begin(16, 2);
	Serial.begin(9600);
	while (!Serial);
	Serial.println("ok");
	TCCR1A = TCCR1B = 0;
	TCCR1B |= (1 << WGM12) | (1 << CS11) | (1 << CS10);
	OCR1A = 250 - 1;
	TIMSK1 |= (1 << OCIE1A);
	taskIdA = task.create(task1);
	taskIdB = task.create(task2);
	taskIdC = task.create(task3);
	task.start(taskIdA, 100, EZMTS_AT_ONCE);
	task.start(taskIdB, 200, EZMTS_AT_ONCE);
	task.start(taskIdC, 300, EZMTS_AT_ONCE);
}
void loop() {
	delay(1);
}







```

以上。
Schoo受講日記①『相手が話したいことを引き出す質問テクニック』

# はじめに
先日2021/09/22(水)にSchooにて開催された『ビジネスで使える賢い心理学　相手が話したいことを引き出す質問テクニック』を受講しました。
Schooは365日無料のオンライン生放送を開催しているオンライン学習サービスで、幅広いジャンルの放送を視聴することができます。
(公式サイトは[こちら](https://schoo.jp/))
以前会社の先輩が視聴していることを知ってはいたのですが、今回ようやく初視聴してきたので、その時の様子も含めて記事にできればと思います。

# 当日の様子
開始時刻になると入室できるようになり、講座がスタートしました。
受講者はチャットの形で質問や意見等を投稿することができます。
司会の方がその投稿を拾って下さる場面も多く、かなり受講者との距離が近く賑わっているような印象を受けました。

# 学んだこと(個人的なメモ)
* オープンクエスチョンとクローズドクエスチョン
    * クローズドクエスチョンばかりが続くと尋問のようになり、相手に対して圧迫感を与えてしまうことになる。
    * 相手との関係性も考慮して、オープンクエスチョン/クローズドクエスチョンを切り替える必要がある。
    * 無理にオープンクエスチョンをしてしまうと、相手が返答に困ってしまうことになりかねない。
    * 最初の1つ2つの質問はクローズドクエスチョンで明らかな事項を確認すると◎。
    
* やってはいけない『KYA』
    * K：興味の質問
    * Y：要約
    * A：あるあるドリブル
    * 相手が話したいことを無視してしまったり、自分のフィルターがかかってしまうためこれらは避けるべき。

* 質問したら『KJS』
    * K：共感
    * J：受容
    * S：承認
    * 相手の発言を受け取ってから返すことで、クローズドクエスチョンでもコミュニケーションを活性化できる。
    
* 話を促す『KMB』
    * K:極限まで
    * M:短く
    * B：バックトラッキング(言葉のオウム返し) 
    * 「名詞＋助詞」の短い形で相手のさらなる発言を引き出す。
    
* ネガティブな答えの対応方法
    * 相手からの答えがネガティブなものであると、話を広げることの難易度がかなり上がる。
    * そのような場合でも、上記のテクニックを活用して話をポジティブな方向にもっていくことができる。
    * 相手が気持ちよく話すことに重点を置くことが重要。
   
# 受講してみて
あくまでメモとして記録しましたが、実際の講義内では実践的な例題や先生のデモ等も多く、学んだ内容をどう実践の場で活かしていくかがイメージしやすかったように思います。
また、クローズドクエスチョンについては否定的な印象を持っていましたが、必ずしもオープンクエスチョンが優れているわけではなく、状況に応じて使い分けをしていくことが必要だと考えを改めることができました。筆者はかなりおしゃべりなので興味のある質問をしがちなのですが、人の話を取ってしまうこともあると知り、今後のコミュニケーションの場で改善していくべきだ課題を見つけることもできました。 
ほかにも面白そうな講座が多く、また10月に同じ先生の次回講義も予定されているので、また別の講義を受講して自分のスキルアップにつなげていきたいなと思います。
JDBCとDAOパターンについて説明してみた

#データベース
データの保存先など、テーブルの入れ物。
データベースのデータ管理がDBMS（データベース管理システム）。
DBMSに指示をする専門言語がSQL
eclipse1ではH2Databaseを使うことが多い。

H2Databaseは、Javaで作成されており、本体は一つのJarファイルで構成されている。Jarファイルｗｐクラスパスに追加するだけで使用できるので、導入が簡単。

#ＪＤＢＣドライバ
Javaプログラムでデータベースを利用するには、プログラムからデータベースにＳＱＬを送信して結果を取得する。
それをするのはJava.sqlパッケージに含まれるクラスやインタフェース達。
1.**DriverManager**:DBMSへの接続準備など
2.**Connection**:DBMSへの接続や切断
3.**PreparedStatement**:SQLの送信を運ぶ車
4.**ResultSet**:DBMSから検索結果を受け取る入れ物
5.**SQLException**：DBからのエラー情報を提供。

これらに加えて**JDBCドライバ**と呼ばれるライブラリが必要。
→データベースを操作するために必要となるクラス・インターフェース群
Java.sqlパッケージのクラスやインターフェースを介して間接的に使用する。

Java.sqlパッケージとJDBCドライバを使用してデータベースを利用するJavaプログラムのことを**JDBCプログラム**と呼ぶ。

#DAOパターン
ＤＢを利用する処理を担当するクラス（DAO）を使う方法。

データベースを利用するクラスごとにJDBCプログラム特有のコードが書いてあると、使用するデータベースやテーブルの列名の変更などがあった場合に、全てのクラスで変更が必要。

これがとても大変なので、DBを利用する処理は担当者（DAO）が全て担うことにする。

DBを扱うクラスは、**DAOを通して使う**ことで、変更が生じた時にDAOだけ変えればいい状態にする。

DAOクラスは、テーブルごとにつくり、クラス名を**「テーブル名＋DAO」**にするのが一般的。

###DAOの置き場所
DAOは基本的に「どこのクラスにおいても利用可能」だが、MVCモデルにおいてはアプリケーションで扱う情報の管理はModelの役割のため、
**Modelクラス（～Logicクラス）**からDaoを利用するのが一般的。
新人SEが知っておくべき単語一覧

開発でよく出てくる単語をまとめました。新人SEの方は是非保存してください。

#ブラウザ
普段、利用者がみている画面。サーバに要求したり、送られたものを受け取り、閲覧可能にする。

#サーバ
ブラウザからの要求に対してＨＴＭＬファイうrなどのwebページの中身をブラウザに送信する役割。
そのため、サーバに後悔したいwebページのHTMLが配置されている必要がある。

ブラウザからの要求を**リクエスト**、
サーバからの応答を**レスポンス**という。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1651134/90e39774-8b42-e3b2-a0b9-5baa2b791899.png)

##localhost:8080
localhostとは、ブラウザと同じコンピュータにリクエストする場合のリクエスト先のサーバのホスト名の事。
ネットワークでつながっているコンピュータのうち、自分の使っている方のこと。

「:」の後ろは**ポート番号**。
これは、リクエスト先のコンピュータ内のどのソフトウェアにリクエストするかを表す番号。
ホスト名が住所で、ポート番号は宛先。

#リクエスト

##リクエスト時に必要な物
リクエストの時に必要なのは「URL」。
URLには以下の記載がある。
+ サーバのホスト名・ＩＰアドレス（誰に頼むのか）
+ HTMLファイル名（どのHＴＭＬファイルが見たいのか）

→URLはリクエストするためのものだから、URLを押すと別のページに遷移できる！

```
http;//<サーバ名>/<アプリケーション名（プロジェクト名）>/<ルートからのパス>
```

##リクエストの中身
+ リクエストの方法：どんなことをサーバに依頼するのか
    + GETリクエスト：webページの情報を取得
    + POSTリクエスト：アンケートフォームなどの情報をサーバに送りたい時など
+ リクエストの対象：ファイル名
+ 使用するプロトコル：HTTPとか

##HTTP
ブラウザとサーバが**どのようなデータをやり取りするかを定めたルール（プロトコル）**の一種。

#レスポンス
+ 使用するプロトコル
+ 動作結果
    + 200OK：リクエスト成功
    + 404Not Found:対象が見つからない（URLが間違えている可能性がある）
    + 405 Method Not Allow:対象が使用したリクエストメソッドを許可していない
    + 500Internal Server Error:サーバ内部でエラー
+ Content-Typeヘッダ:データの中身が何か
    + ブラウザはレスポンスのボディ部の前にヘッダ部を読み取るため

#サーバサイドプログラム
ブラウザのリクエストにより、サーバ上で動作し、実行結果をHTMLでレスポンスする一連の流れ。

開発言語がJavaの場合、ここで必要なのが**サーブレットとJSP**。

#サーブレット
Javaを用いてサーバサイドプログラムを実現する技術。
Webサーバ上でお仕事をするJavaのプログラム。

サーブレットクラスという特別なクラスを作る。

詳細はこちらの記事で。
https://qiita.com/juri_engineer/items/acf861f6f5c2100e5a66

#JSP
サーブレットと同じ役割。
実行の時にサーブレットに変換される。
詳細はこちらの記事にて。
https://qiita.com/juri_engineer/items/370d41791fc180d6065b

#アプリケーションサーバ
先ほどの「サーバ」は、HTTPでブラウザと通信することはできるが、**プログラムを実行することはできない**。実行までできるサーバをアプリケーションサーバと呼ぶ。

特に、サーブレットクラスの実行環境のことを**サーブレットコンテナ**と呼ぶ。

#Tomcat
サーブレットコンテナのひとつ。
Javaサーブレットとは、**Webサーバで動くJavaプログラム**のことであり、サーブレットコンテナによって動かされる。

HTTPリクエストなどがサーブレット宛てに依頼されると、まずサーブレットコンテナが受け取って、サーブレットコンテナからサーブレットに命令される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1651134/75bd9794-9f7c-971d-c676-7ed1b77b242f.png)


#Seaser
Java EEによる大規模開発を効率的に行なうためのフレームワーク

#Doma
S2Daoのスタイル（DAOパターンや2 Way SQL）を踏襲したJava6（JDBC4.0）対応のO/Rマッパー

##O/Rマッパー
オブジェクト指向プログラミング言語におけるオブジェクト(Object)とリレーショナルデータベース（RDB）の間でデータ形式の相互変換を行うこと。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1651134/e6fdab58-fa87-90c0-69ab-3d10a975c9c3.png)
データベース管理システム（DBMS）へ操作を依頼するSQL文などを生成・発行するコードをプログラム中にその都度記述しなくても、あらかじめ設定された対応関係についての情報に基づき、インスタンスのデータをデータベースの対応するテーブルへ書き出したり、データベースからデータを読み込んでインスタンスに代入したりといった操作を自動的に行なってくれる。

#データベース
データの保存先など、テーブルの入れ物。
データベースのデータ管理がDBMS（データベース管理システム）。
DBMSに指示をする専門言語が**SQL**
eclipse1ではH2Databaseを使うことが多い。

H2Databaseは、Javaで作成されており、本体は一つのJarファイルで構成されている。Jarファイルｗｐクラスパスに追加するだけで使用できるので、導入が簡単。

JDBCやDAOパターンの詳しい説明はこちら
https://qiita.com/juri_engineer/items/ec5ce56437c23bf813ed
deno deployのテンプレート機能を使っておみくじを公開する

deno deloyのテンプレート機能が面白かったので紹介したいと思います。

## deno deployのテンプレート機能を使っておみくじを公開する

サンプルとしておみくじのテンプレートを用意したので、これを使ってテンプレート機能の使い方を解説していきます。

まず、下のリンクをクリックします。
[![Deploy this example](https://deno.com/deno-deploy-button.svg)](https://dash.deno.com/new?url=https://raw.githubusercontent.com/ayame113/omikuji_deploy/main/serve.ts&env=おみくじ1,おみくじ2,おみくじ3,おみくじ4,文章)

サインアップを終えると、以下のような画面が表示されるので、順番に入力していきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678625/9d06ad1e-d268-fa46-8822-7fc6c08a7167.png)

おみくじ1～4におみくじの種類を入力して[Create]をクリックすると、おみくじを引けるwebサイトが公開されます。（文章欄は空でも可）

サンプル：https://omikuji-up.deno.dev/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678625/333e4ff9-89ef-40a5-53a9-6b5a4c51d8b4.png)

deno deployのテンプレート機能を使うと、このようにコードを書くことなく一瞬でwebサイトが公開できました。

今回はおみくじのテンプレートを使いましたが、[公式サイト](https://deno.com/deploy/docs/hello-world/)や[公式リポジトリ](https://github.com/denoland/deploy_examples/)にはHello Worldや外部APIを叩く例がテンプレートとして用意されています。

## テンプレートの作成方法

webフレームワークなど、ライブラリの作者は自分のコードをテンプレートとして公開することが出来ます。

これもおみくじの例を使って解説していきます。

#### ①環境変数を使ってコードを書く
ユーザーが設定できるようにする部分（この場合はおみくじの種類）を、`Deno.env.get()`を使い環境変数から読み込むようにします。

```ts
import { listenAndServe } from "https://deno.land/std@0.108.0/http/server.ts";
import { sample } from "https://deno.land/std@0.108.0/collections/sample.ts";

// おみくじの種類を環境変数から取得
const omikujis = [
  Deno.env.get("おみくじ1"),
  Deno.env.get("おみくじ2"),
  Deno.env.get("おみくじ3"),
  Deno.env.get("おみくじ4"),
].filter((v) => v).map(escapeHTML);

// サーバーを建てる
listenAndServe(":80", (request) => {
  if (new URL(request.url).pathname === "/") {
    // パスが"/"の場合はおみくじを引く
    return new Response(getOmikuji(), {
      status: 200,
      headers: { "content-type": "text/html; charset=utf-8" },
    });
  }
  return new Response('404 Not Found <a href="/">top</a>', {
    status: 404,
    headers: { "content-type": "text/html; charset=utf-8" },
  });
});

/** おみくじを引く関数 */
function getOmikuji() {
  const result = sample(omikujis) ?? "おみくじが空でした。"; //length===0
  return `<h1>${result}</h1>`;
}

/** HTMLをエスケープする関数 */
function escapeHTML(str?: string) {
  return str
    ?.replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;")
    .replaceAll("'", "&#39;");
}
```

#### ②web上にコードを公開する

テンプレートはURLで指定するため、コードはweb上に公開する必要があります。（といっても、githubに置くだけで大丈夫です。）

コードを公開したら、

```
https://dash.deno.com/new?url=＜コードが公開されているURL＞&env=＜環境変数＞
```
というURLからテンプレートが利用できるようになります。環境変数を複数指定する場合はカンマ区切りにします。

例えば、上で紹介したおみくじの例では、

```
https://dash.deno.com/new?url=https://raw.githubusercontent.com/ayame113/omikuji_deploy/main/serve.ts&env=おみくじ1,おみくじ2,おみくじ3,おみくじ4,文章
```
というURLになります。


※コードをgithubに置く場合は、rawボタンを押して`https://raw.githubusercontent.com/`以下のURLを取得する必要があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678625/b62fdbd1-da9f-53f3-4dff-f3c46e09c5e7.png)

## まとめ

- テンプレート機能を使うと、webサイトが簡単に公開できる
- まだベータ版なので使えるテンプレートは少ない
- webサイトのひな型をテンプレートにしておくと便利かも

この機能（`https://dash.deno.com/new`のクエリパラメータに`env`を付ける方法）は公式ドキュメントの例で使われているものの、正式名称が分からなかったので、記事中ではテンプレート機能と呼称しています。正式名称が分かる方は教えてください！
osを作る その18

#概要

osを作る。
ezmtsを使ってみた。

#参考にしたページ

https://qiita.com/HypnagogicHallucinations/items/9b4cab479d4e177da859

#サンプルコード

```


ezMTS task(3);
int taskIdA;
int taskIdB;
int taskIdC;




int task1(void * dummy) {
	Serial.print("task1  ");
	Serial.println(millis());
	return 0;
}
int task2(void * dummy) {
	Serial.print("task2  ");
	Serial.println(millis());
	return 0;
}
int task3(void * dummy) {
	Serial.print("task3  ");
	Serial.println(millis());
	return 0;
}
void setup() {
	Serial.begin(9600);
	while (!Serial);
	Serial.println("ok");
	TCCR1A = TCCR1B = 0;
	TCCR1B |= (1 << WGM12) | (1 << CS11) | (1 << CS10);
	OCR1A = 250 - 1;
	TIMSK1 |= (1 << OCIE1A);
	taskIdA = task.create(task1);
	taskIdB = task.create(task2);
	taskIdC = task.create(task3);
	task.start(taskIdA, 100, EZMTS_AT_ONCE);
	task.start(taskIdB, 200, EZMTS_AT_ONCE);
	task.start(taskIdC, 300, EZMTS_AT_ONCE);
}
void loop() {
	delay(1);
}





```

#結果


```

task1  0
task2  0
task3  0
task1  99
task1  199
task2  199
task1  300
task3  300
task1  399
task2  399
task1  499
task1  599
task2  600
task3  600
task1  699
task1  799
task2  799
task1  899
task3  900
task1  999
task2  999
task1  1099
task1  1199
task2  1200
task3  1200
task1  1299
task1  1399
task2  1399
task1  1499
task3  1500
task1  1599
task2  1599
task1  1699
task1  1799
task2  1800
task3  1800
task1  1899
task1  1999
task2  1999
task1  2099
task3  2100
task1  2199
task2  2199
task1  2299
task1  2399
task2  2400
task3  2400
task1  2499
task1  2599
task2  2599





```

以上。
alpineをdockerホストにする

Dockerを動かす軽量なホストが欲しくていくつか検討して、イメージの小さいalpineで作りました。

# 作り方

1. alpineイメージからホストを作成します

https://www.alpinelinux.org/downloads/

2. 以下のコマンドでdocker & docker-composeをインストールします。

```
$ apk update
$ apk add docker docker-compose
$ service docker start
```

以上

# ごにょごにょ

dockerでalpineを使うことも多いのですが、ホスト側で使うことはなかったのでメモです。
osを作る その17

#概要

osを作る。
wemosで、tickerを使ってみた。

#サンプルコード


```
#include <Ticker.h>

Ticker tk1;
Ticker tk2;
Ticker tk3;

void task1(void) {
	Serial.print("task1  ");
	Serial.println(millis());
}

void task2(void) {
	Serial.print("task2  ");
	Serial.println(millis());
}

void task3(void) {
	Serial.print("task3  ");
	Serial.println(millis());
}

void setup() {
	Serial.begin(9600);
	tk1.attach_ms(100, task1);
	tk2.attach_ms(200, task2);
	tk3.attach_ms(300, task3);
}

void loop() {
}





```

#結果

```

task1  245
task2  245
task1  345
task3  345
task1  445
task2  445
task1  545
task1  645
task2  645
task3  645
task1  745
task1  845
task2  845
task1  945
task3  945
task1  1045
task2  1045
task1  1145
task1  1245
task2  1245
task3  1245
task1  1345
task1  1445
task2  1445
task1  1545
task3  1545
task1  1645
task2  1645
task1  1745
task1  1845
task2  1845
task3  1845
task1  1945
task1  2045
task2  2045
task1  2145
task3  2145
task1  2245
task2  2245
task1  2345
task1  2445
task2  2445
task3  2445
task1  2545
task1  2645
task2  2645
task1  2745
task3  2745
task1  2845
task2  2845
task1  2945
task1  3045
task2  3045
task3  3045
task1  3145
task1  3245
task2  3245
task1  3345
task3  3345
task1  3445
task2  3445
task1  3545
task1  3645
task2  3645
task3  3645
task1  3745
task1  3845
task2  3845
task1  3945
task3  3945
task1  4045
task2  4045
task1  4145
task1  4245
task2  4245
task3  4245
task1  4345
task1  4445
task2  4445
task1  4545
task3  4545
task1  4645
task2  4645
task1  4745
task1  4845
task2  4845
task3  4845
task1  4945
task1  5045
task2  5045
task1  5145
task3  5145
task1  5245
task2  5245
task1  5345
task1  5445
task2  5445
task3  5445
task1  5545
task1  5645
task2  5645
task1  5745
task3  5745
task1  5845
task2  5845
task1  5945
task1  6045
task2  6045
task3  6045
task1  6145
task1  6245
task2  6245
task1  6345
task3  6345
task1  6445
task2  6445
task1  6545
task1  6645
task2  6645
task3  6645
task1  6745
task1  6845
task2  6845
task1  6945
task3  6945
task1  7045
task2  7045
task1  7145
task1  7245
task2  7245
task3  7245
task1  7345
task1  7445
task2  7445
task1  7545
task3  7545
task1  7645
task2  7645
task1  7745
task1  7845
task2  7845
task3  7845
task1  7945
task1  8045
task2  8045
task1  8145
task3  8145
task1  8245
task2  8245
task1  8345
task1  8445
task2  8445
task3  8445
task1  8545
task1  8645
task2  8645
task1  8745
task3  8745
task1  8845
task2  8845
task1  8945
task1  9045
task2  9045
task3  9045
task1  9145


```


以上。
IoT "ON AIR" sign その１ 全体構想

# 背景

在宅勤務が続いており家族全員が狭い家にひしめいています。一人一部屋の個室がとれない上にプリンタなど共有なものも多いので、テレカン中でも家族が部屋を出入りすることがしばしば。家族としても私がテレカン中なのかそうでないかが閉まったドアの外から分かるとドアを開けるときに注意するべきか分かって良さそうです。

なので部屋の外にテレカン中は「ON AIR」と表示がでるサインを作ってみました。

# 出来上がり

![oniar.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138680/685a8bd1-c7c9-96f7-b8de-8f3b61e9f33b.png)

テレカン中は「ON AIR」と表示。

![good.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138680/5166a263-f88b-adb5-468c-30baa3e6d858.png)


テレカンをやっていないときをどう表現するか悩んだのですが、今は「GOOD」と表示してます。「OFF AIR」や「OFF」とかも考えたのですが、何となくポジティブなワードを常に表示するのがいいかなと。

![controller.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138680/2ecda25f-a63b-3ba2-e3b1-2bb3375c426f.png)


表示内容は手元のコントローラで切り替えます。

# 全体の構想

![Untitled 5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138680/05f655d8-da66-dd20-03ba-4730231f5559.png)


とりあえず今は「ON AIR」と表示するだけですが、将来的には今日の予定なんかも表示させたりしたくなるかも。なので表示部にはLEDマトリックスを使います。
表示内容はネット経由でコントロールできるようにして、電源さえ確保できればどこにでも設置できるようにします。
Adafruitの[Matrix Portalはまさにそのためのボード](https://www.adafruit.com/product/4745)。ありがたく使わせてもらいます。

ネット経由で表示内容をやり取りするとなると、JSONなどStringの処理が多くなります。ArduinoのC言語だとまどろっこしいのでCircuitPythonでコードを書きます。

表示内容を操作するのは Web pageを作っても良いのですが、突然電話がかかってきて「ON AIR」表示に切り替えたりもできるように、専用コントローラを作ります。こちらもCircuitPythonが使えるとディスプレイ側とコードを共通化できていいはず。Raspberry Pi PicoとESP32の組み合わせだとAdafruitのライブラリを活用してラクできそうです。

クラウド側ははじめはadafruit.ioでスタート。ライブラリが充実しているし難しい設定もないのでラク。最終的にはAWSのIoT Coreを使いました。「あるべき状態」をクラウド側にもたせるDevice Shadowの機能を使うことで、なにかの拍子にディスプレイやコントローラのどちらかがリセットされても表示内容に矛盾が起こらなくなります。

コントローラは専用基板を起こしたり、ディスプレイ側は筐体を作ったりと割と大作になりました。

[その1 全体構想](https://qiita.com/aerialist/items/d3721e8a9dd6732f428c)
[その2 ディスプレイ](https://qiita.com/aerialist/items/f4f31e934480fe0cd37e)
その3 コントローラ 下書き中
その4 クラウド 下書き中
diesel-rs(mysql)をlambda上で動かすときにlibmysqlclientをスタティックリンクする

# やりたかったこと
aws Lambda上でdiesel-rsというORMを使いmysqlにアクセスする

# 前置き
これは以下の記事の一部分に書いてあったことをもうすこしだけ詳しく説明したものです。ちなみにかなり乱文かと思いますがほぼ自分用なのでご容赦ください。

https://qiita.com/alivelime/items/19a5902c72720fd6e0a6

# 詰まったこと
僕はお試しで[このようなコード](https://github.com/s3pt3mb3r/diesel_on_lambda/blob/master/src/bin/read_user.rs)を書いたのですが、dieselはそもそもlibmysqlclient.soというダイナミックリンクライブラリに依存しており、これが無い環境では動きません。
またlambdaはシングルバイナリを実行するだけ(多分) + アップロードできるzipのサイズの上限があるので.soファイルを突っ込めません。

そのため、libmysqlclient.soを**スタティックリンク**する必要がありました。
なので`.cargo/config` ファイルを以下のようにしました。

```config.toml
[build]
target = 'x86_64-unknown-linux-musl'      # muslでビルドする
rustflags = ["-C", "link-args= -static"]  # スタティックリンクする
```

あとは[このdockerイメージ](https://github.com/emk/rust-musl-builder)を使えば一応ビルドはできるのですが、それを実行すると

```
No such file or directory
```
というエラーが起きました。

実はdiesel-rsが使っているmysqlclient-sysは、libmysqlclient.soをスタティックリンクできないようになっているようです。幸いなことに[pzmarzly/mysqlclient-sys](https://github.com/pzmarzly/mysqlclient-sys)というforkを代わりに使えばスタティックリンクできるようになります。

というわけで、`Cargo.toml` に以下を書き込んでください。

```Cargo.toml
[patch.crates-io]
mysqlclient-sys = { git = "https://github.com/pzmarzly/mysqlclient-sys", rev = "acd1b2b" }
```

こうすると、diesel-rsが代わりにpzmarzly/mysqlclient-sysを使うようになるためスタティックリンクが可能になります。

後はビルドすればおしまいです。

# ビルドに使ったdockerのコマンド

cargo build以降は好きなように変えてください

```
docker run -d -it -w /app -v "$(pwd):/app" ekidd/rust-musl-builder bash -c "sudo apt-get update && sudo apt-get install -y libmysqlclient-dev && cargo build --bin read_user_test --release"
```
Java start


類中方法的聲明和使用
 方法：描述類應該具有的功能
 比如：
		Math類：sqrt()/random()/..
		Scanner類:nextXxx()...
		Arrays類：sort()/binarySearch()/toString()/equals()/...

舉例:
	1 如何定義方法
			客戶類 class Customer{
				public void eat(){}
				public void sleep(int hour){}
				public String getName(){}
				public String getNation(String nation){}
			}
	2 方法的聲明：
	1 權限修飾符 2 返回值類型 3 方法名（4形參列表可有可无）{
				方法體
	}
		⭐注意：static final abstract 来修饰方法，后面再讲
	3 説明：---- 封裝性的時候在細緻説明
		1 關於 權限修飾符： 目前默認方法的權限修飾符先都是使用public
			java規定的四種權限修飾符：private、public、缺省、protected（权限大小）
		2 返回值類型：1 有返回值  vs  2 無返回值
			1 如何理解有無返回值?
				1 如果方法有返回值，則必須在方法聲明時，指定返回值類型。同時，方法中需要使用
						return關鍵字來返回指定類型的變量or常量:"return 数据"
				2 如果方法沒有返回值，則方法聲名時，使用void來表示。通常沒有返回值的方法中，
					就不需要使用return。但是
					   如果使用的話，只能return;表示結束此方法的意思。return後面不可以有任何語句，因爲已經結束程序了
				3 我們定義方法的時候，該不該有返回值?
						1 題目要求
						2 凴經驗:具體問題具體分析
		3 方法名：屬於標識符，遵循標識符的規則和規範 （見名知意）
		4 形參列表：方法可以聲明0個，1個，或多個形參
				1 格式：數據類型1 形參1 數據類型2 形參2
				2 定義方法時 要不要形參，該不該定義形參？
					1 題目要求
					2 凴經驗:具體問題具體分析
		5 方法體：方法功能的實現
		6 return關鍵字的使用：
				1 使用範圍：使用在方法體中
				2 作用：
					 1 結束方法
					 2 針對於有返回值類型的方法，使用"return 數據"方式返回所要的數據
					 3 注意點：return關鍵字後面不可以聲明執行語句
		7 方法的使用：可以調用當前類的屬性or方法
		 		特殊的：方法A中又調用了A方法

/*
//方法
public void eat(){
sysout
}

public void sleep(int hour){
sysout
}

public String getName(){
return name;
}

public String getNation(String nation){
String info = "" + nation
return nation;
}
 */

public class CustomerTest {
	public static void main(String[] args) {

		Customer cust1 = new Customer();
		cust1.eat();
		cust1.sleep(8);

	}
}

class Customer {
	// 屬性
	String name;
	int age;
	boolean isMale;

	// 方法
	public void eat() {
		System.out.println("客戶吃飯");
	}

	public void sleep(int hour) {
		System.out.println("休息了" + hour + "個小時");
	}

	public String getName() {
		if (age < 18) {
			return "florence kwok";
		} else {
			return name;
		}
	}

	public String getNation(String nation) {
		String info = "我的國籍是" + nation;
		return info;
	}
}
三角形の内接円をwolframとsympyとソルバーでやってみた。

#wolframalphaで

https://www.wolframalpha.com/input/?i=%E4%B8%89%E8%A7%92%E5%BD%A2%E3%81%AE%E5%86%85%E6%8E%A5%E5%86%86&lang=ja


#SymPy Liveで
以下のソースコードを貼り付けて、Evaluateです。

https://live.sympy.org/


### 例1
inradius

https://docs.sympy.org/latest/modules/geometry/polygons.html#sympy.geometry.polygon.Triangle.incenter

```python
from sympy import *
var('p1x p1y p2x p2y p3x p3y')
p1, p2, p3 = Point(p1x,p1y), Point(p2x,p2y), Point(p3x,p3y)
t = Triangle(p1, p2, p3)
print("#",t.incenter)
print("#",t.inradius)
mySubs={p1x:0 ,p1y:0 ,p2x:4 ,p2y:0 ,p3x:0 ,p3y:3}
print("#",t.incenter.subs(mySubs))
print("#",t.inradius.subs(mySubs))
# (省略)
# Point2D(1, 1)
# 1
```

### 例2

https://keisan.casio.jp/exec/system/1161228798

辺の長さ a 3
辺の長さ b 4
辺の長さ c 5

内接円の半径 r 1

```python
from sympy import *
var('a b c x p1x p1y p2x p2y p3x p3y')
p1x=0.0
p1y=0.0
p2x=a
p2y=0.0
p3x=solve((b**2-x**2)-(c**2-(a-x)**2),x)[0]
p3y=sqrt(b**2-p3x**2)
p1,p2,p3 = Point(p1x,p1y), Point(p2x,p2y), Point(p3x,p3y)
t = Triangle(p1, p2, p3)
mySubs={a:3,b:4,c:5}
print("#",t.incenter.subs(mySubs))
print("#",t.inradius.subs(mySubs))
# Point2D(1, 1)
# 1
```

#VBAソルバーで　

エクセルのソルバーのダイアログ入力で普通にできますが、あえてVBAでチャレンジしてみました。ソルバーのための以下の参考の設定が必要です。
~~SolverOptions AssumeNonNeg:=False追加しました。~~ 
おすすめのサイトがあれば、教えて下さい。

参考　

https://docs.microsoft.com/ja-jp/office/vba/excel/concepts/functions/using-the-solver-vba-functions

### 例1


### 例2(ヘロンの公式で)1変数

```vb
Const myMethod = "GRG Nonlinear"
'Const myMethod = "Simplex LP"
'Const myMethod = "Evolutionary"
Sub gaisetu_heron()
    ActiveSheet.Cells.Clear
MsgBox "内接円の半径を" & myMethod & "で計算します。"
    Range("A1") = 3
    Range("A2") = 4
    Range("A3") = 5
    Range("A6").Formula = "=(A1+A2+A3)/2"
    Range("B6").Formula = "=A6*(A6-A1)*(A6-A2)*(A6-A3)-(A1*A$4/2+A2*A$4/2+A3*A$4/2)^2"
    Dim ws As Worksheet: Set ws = ActiveSheet
    SolverReset
    SolverOk setCell:=ws.Range("B6"), _
                   MaxMinVal:=3, _
                   ByChange:=ws.Range("A4"), _
                   EngineDesc:=myMethod
    SolverSolve UserFinish:=True
End Sub
'結果
'半径1 
```
vue.js と 複雑なcss

tdの中身を 値に応じて変更したい。
しかし、複雑。




```hoge.vue

<style>

    *[data-content="cont-0"] {
        background-color: #f7f9f9 !important;
    }


</style>

---略


<td v-for="(s,key2) in calendar[weekCount][key]" style="border-left: 1px solid #e1e1e2;cursor: pointer;" :data-content="`cont-${s}`">
    <span v-if="s == 1" @click="addYoyaku(key,key2,s,weekCount)">
        <i class="fas fa-bullseye" style="color:#f154a2;"></i>
    </span>
    <span v-else>
        <i class="fas fa-times" style="color: #d7d7d7;"></i>
    </span>
</td>

```

こんな感じで

```hoge.vue

:data-content="`cont-${s}`"

```

を利用して複雑なcssを使うことも可能。
例えば、カレンダーの X の日の背景を グレーにする場合とか。
PostgreSQLでテーブルを作成する

PostgreSQLの勉強を始めたため、備忘録として書いています。
筆者は初学者なので、間違いや不備などがございましたらご容赦ください。

# 基本構文
```
DROP TABLE IF EXISTS table_name;
CREATE TABLE table_name (columns_name VARCHAR(255));
```

# 複数のカラムを持つテーブル作成
```
DROP TABLE IF EXISTS table_some_columns;
CREATE TABLE table_some_columns (
    user_id VARCHAR(50) PRIMARY KEY
    , user_name VARCHAR(30) NOT NULL
    , user_age INT
    , birth_day DATE
    , height NUMERIC
    , weight NUMERIC
    , date_create TIMESTAMP DEFAULT CURRENT_TIMESTAMP NOT NULL
);
```

# 参考サイト
[PostgreSQL 10.5文書-第8章 データ型](https://www.postgresql.jp/docs/10/datatype.html)
Git,GitHubの操作(復旧,競合について)

##はじめに
この記事では
・リポジトリの復旧、修正について
・競合(CONFRICT)とその対処方法について
お話ししていきたいと思います。(忘却録)

Gitの基本的な操作についてはこちらの記事を参考にしてみてください。

https://qiita.com/ryutake459/items/51472647460a7ffe0c8c

##リポジトリの復旧、修正について
ここでは作成したリポジトリに修正を加える操作について解説していきたいと思います。
###git revert コマンドについて

```
$ git revert オブジェクト名:相殺コマンド
```
取り消したい部分のコミットを打ち消す内容のコミットを行う
→１を無くすのではなく、1-1をして0(その前の状態)にするというイメージ
→その-1をするのがgit revertである
→履歴(git log)としては残る

###履歴ごと消したい場合
先程のは取り消したい部分のコミットを相殺することで復旧を行う形であったが
取り消した内容は履歴として残る
→**完全にコミットをなかったものにしたい場合**に使用される

```
$ git reset --soft HEAD^
```

HEAD:先頭→最新のコミットを表す
^→何個戻るかを示す(^:１個前　^^:２)




##競合(CONFRICT)とその対処方法について
マージや反映(cherry-pick)などをした際、
変更前と変更後でうまく噛み合わなかった際に起きる

例)c1ブランチの内容をmasterブランチにマージ(統合)させようとした際
~競合が起きない例~
c1の内容

```
#こんにちは
#hogehoge
```
masterの内容

```
#こんにちは

```

~競合が起きる例~
c1の内容

```
#こんにちは
#hogehoge
```
masterの内容

```
#こんにちは
#fugafuga
```

またブランチやマージについてはこちらの記事をどうぞ

https://qiita.com/ryutake459/items/abf458d1aac29c9013dd


###具体的な発生時
発生時

```
<<<<<

=====

>>>>>
```

のような記号の表示が出る
これは

```
<<<<< ←ここから

=====

>>>>> ←ここまでの範囲で競合が起きた
```

と言うのを示している

###競合(CONFRICT)が起きた場合の対処について
これが発生した場合、競合が発生した範囲を目的のものに修正し、
git addとgit commitにより修正後のリポジトリを作成する。
また**発生した記号については削除する**必要がある。
JavaScript 分割代入

## はじめに
JavaScriptの便利な分割代入をまとめてみました。
ここでは例として左辺は変数を使用していますが、変数以外でも可能です。

### 基本
左辺の変数名は自由に設定でき、マッチする右辺の配列の要素により初期化されます。

```js
const animals = ["dog", "cat", "monkey"]
const [first, second, third] = animals
// first ... dog
// second ... cat
// third ... monkey
```

オブジェクトの分割代入は左辺にプロパティ名を指定します。

```js
const monkey = {name: "George", gender: "boy"}
const { name, gender } = monkey 
// name ... "George"
// gender ... "boy"
```

左辺の変数にマッチする要素が右辺に存在しない場合は、`undefinde` になります。

```js
const animals = ["dog", "cat"]
const [first, second, third] = animals
// first ... dog
// second ... cat
// third ... undefined

const monkey = {name: "George", gender: "boy"}
const { name, age } = monkey 
// name ... "George"
// age ... undefinde
```
### 不必要な値を無視
不必要な値が存在する場合は無視することができます。

```js
const animals = ["dog", "cat", "monkey"]
const [first, second] = animals
// first ... dog
// second ... cat
```

```js
const animals = ["dog", "cat", "monkey"]
const [first, , third] = animals
// first ... dog
// third ... monkey
```

### ネストされたオブジェクト
ネストされたオブジェクトから分割代入を行う場合は以下のように左辺を期待する要素にマッチするよう記述します。

```js
const monkey = {name: "George", gender: "boy", birthday: {year: 1995, mounth: 4, day: 1}}
const { birthday: {mounth, day} } = monkey
// mounth ... 4
// day ... 1
```

### デフォルト値
マッチする要素がない場合などで左辺の値が undefinde になる際に使用するデフォルトの値を設定できます。

```js
const animals = ["dog", "cat"]
const [first, second, third = "wallaby"] = animals
// first ... dog
// second ... cat
// third ... "wallaby"

const monkey = {name: "George", gender: "boy"}
const { name, age = 3 } = monkey 
// name ... "George"
// age ... 3
```

オブジェクトの場合は以下の方法で指定もできます。

```js
const monkey = {name: "George", gender: "boy"}
const { nickname = name } = monkey 
// nikcname ... "George"
```

### rest宣言
分割代入の指定として `その他の要素` という指定ができます。
指定方法は変数名の頭に `...` を付けるだけです。

```js
const animals = ["dog", "cat", "monkey"]
const [first, ...others] = animals
// first ... dog
// others ... ["cat", "monkey"]

const monkey = {name: "George", gender: "boy", birthday: {year: 1995, mounth: 4, day: 1}}
const { birthday, ...others } = monkey 
// birthday ... {year: 1995, mounth: 4, day: 1}
// others ... {name: "George", gender: "boy"}
```

## さいごに
最後まで読んでいただき、ありがとうございました。