OmniAICreator/Qiita-1.07M huggingface dataset:
UIFlow の toio用ブロックを軽く試す【その1：Write】（対応デバイスは ATOM Matrix／ATOM Lite）

この記事は、「[UIFlow](https://flow.m5stack.com/) の toio用ブロック」に関する内容です。

[過去のイベントでの LT で触れていたことがあった内容（※ その時のスライドは以下）](https://speakerdeck.com/you/biziyuarupuroguraminguiotlt-vol-dot-12)ですが、記事にはしていなかったので、書いておこうと思います。

<script async class="speakerdeck-embed" data-id="ba85aaa71e13464b9da174f45ae08758" data-ratio="1.77613320999075" src="//speakerdeck.com/assets/embed.js"></script>

ただし掲載するプログラムの内容に関しては、上記の発表スライドの中で話に出しているおもちゃの刀を光らせる仕組みに使ったものではなく、別のシンプルな処理に関するものです。
（まずは、記事としてシンプルな処理を行う事例を書いていければと思います）

扱うプログラムの内容がどのようなものかというと、3種類ある toio との間の処理（「Read、Write、Notify」の 3種類）の中の、toio への書き込みを行う「Write」の処理を行うものです。

## UIFlow の toio用ブロックについて
UIFlow の toio用ブロックは、UIFlow の設定で ATOM Matrix か　ATOM Lite を選択した場合に利用可能です。

![ATOM Matrix か　ATOM Lite を選択](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/f9deff3b-618b-0abe-0737-81235a4d6067.png)

それらのデバイスを選択した場合、toio用のブロックがメニューの以下の部分に表示されます。

![UIFlow の toio用ブロック](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/3793243a-98dc-4324-70d0-02ddbe39988e.png)

## 動作している様子とプログラム
### 動作している様子
まずは、toio用のブロックの Write の処理を使って、[toio のサウンド機能](https://toio.github.io/toio-spec/docs/ble_sound/)を動作させた様子を動画で示します。
動画を見ていただくと、ATOM Matrix のボタンを押した時に、toio側で音が鳴っているのが分かるかと思います。

https://twitter.com/youtoy/status/1571682952920338432

### UIFlow のプログラム
次に、UIFlow で作ったプログラムや補足を記載します。作成したプログラムは以下のとおりです。

https://twitter.com/youtoy/status/1571686504052957184

プログラムの内容について、少し補足します。

#### 初期化と接続の処理
初期化と接続を行う部分についての補足です。

まず、上記のツイートをした時点では（※ おそらく、この記事執筆時点でも）、UIFlow の toio用ブロックに関する公式ドキュメントがなさそうでした。
そこで、公式ドキュメントのかわりになりそうな情報を参照して、初期化・接続の処理部分を実装しました。具体的には、自分が過去に参加したオンラインイベントで、画面共有で表示されていたプログラムです（以下の画像で出てきていた処理内容）。

https://twitter.com/youtoy/status/1566027496369586176

自分が作成した UIFlow のプログラムの中で、具体的には以下の部分です。
（参照した元のプログラムとの違いは、繰り返し処理内の待ち時間を「100ミリ秒」から「500ミリ秒」へと、実験的に適当に変えてみた部分のみです）
![初期化の処理](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/289b3716-fac1-c995-72f7-cb2218baebe2.jpeg)

この処理を実行すると、近くにある toio をスキャンして、その toio に接続した状態になります。

### 書き込みの処理
上記の内容に加えて、ボタン押下時の処理を UIFlow で作っています。
その処理の中で toio が関係する部分は以下となります。

![書き込みの処理](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/7b3a5a4e-a27b-8be6-ba6d-5dde5c3c5f87.jpeg)

toio との接続が維持されていることを確認した後で、シンプルに toio で音を鳴らす処理を実行しただけのものです。

なお、初期化の処理やボタン押下時の処理で、プログラムが実行される様子が視覚的に分かりやすくなるように、ATOM Matrix　の LED の色を変える処理も加えています。

## おわりに
今回、UIFlow の toio用ブロックで書き込みを扱う処理をシンプルに試しました。

次は、「Read、Write、Notify」の 3種類のうち、Read を用いて読み取りをする話を記事にできればと思います。
Visual Studio Codeにてhtml雛形を一瞬で作成する方法

# コピペせずにHTMLの雛形を作成する
htmlを書き始める際、雛形ファイルを一々開いてコピペしないといけないのか？と思っていました。
しかし、Visual Studio Codeであれば、文頭に”！”を入力してenterを押せば一瞬で雛形が作成されます。
![スクリーンショット 2022-10-08 18.33.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2819079/6c639322-78dc-e7e1-4f4c-60cf70304ed5.png)
これから
![スクリーンショット 2022-10-08 18.33.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2819079/89f06bd8-e940-00fc-a9c8-8104a40d583e.png)
こうなる。便利。



# 補足
他のテキストエディタ、Atomでは同様の方法で作成できませんでした。
しかし、"html"と記述しenterを押せば一瞬で作成できました。
エディタによって方法が異なるようですね。
EC2からPytorch TensorBoardを使用する


# やりたいこと

EC2インスタンス上でpytorchでモデル構築する際、実験結果等をtensorboardに保存しWebUIで可視化する

pytorchでtensorboardを利用する方法は[pytorch tensorboard document](https://pytorch.org/docs/stable/tensorboard.html#module-torch.utils.tensorboard)
に記載されているのでこのリンクを参照にすればよいが、EC2上でtensorboardのwebuiを立てる場合、

```bash
tensorboard --logdir=runs
```

だけではブラウザから見ることはできない. そこでEC2からtesorboardのサーバーを立ててブラウザでアクセスする方法をメモ. 



# 必要なこと

EC2からWebUIをたててブラウザで見るために追加で必要なことは2つ

1. hostの設定.
1. portの解放

## 1. hostの設定

```bash
tensorboard -h
```

と実行すると、以下のようなオプションが確認できる

```bash
--host ADDR           What host to listen to (default: localhost). To serve to the
                        entire local network on both IPv4 and IPv6, see `--bind_all`,
                        with which this option is mutually exclusive.
```

これを設定すれば良い。EC2からjupyterを立てる時のよう`0.0.0.0`とかに設定すれば良いので

```bash
tensorboard --logdir=runs --host=0.0.0.0
```

とすれば良い.

## 2. portの解放

`--host=0.0.0.0`だけではブラウザで`http://パブリックIP:6006`と打ってもWebUIが表示されない.

これはEC2が(デフォルトでは)6006を解放していないためである。

EC2のポートを解放するには、

awsから

EC2 > インスタンス > 該当のインスタンスを選択 > セキュリティ > インバウンドルール

![インバウンドルール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1154503/57cea24d-1d1f-cd1c-dfb6-897e0f67de45.png)


でインバウンドルール(EC2へのアクセスを制御する設定)を確認する.
ここに6006が設定されていなければ、6006にアクセスできない.


設定方法は、EC2に紐づいているセキュリティルールを選択して`インバウンドルールの編集`から、

> TCP 6006

を追加する.

![インバウンドルールを編集.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1154503/a61e7df7-d6f7-9748-9495-b5c9acf4b803.png)

ソースの部分が`0.0.0.0/0`となっていると誰でも接続できてしまうので、他の人に接続されたくない場合はソースのカスタムの欄を推してそこから`マイIP`または`自分のIP`を選択すれば自分のPC以外からの接続を拒否できる. 


上記の手順を行うと、

`http://パブリックIP:6006`でtensorboardに接続できる
プログラミングは暗黙知が多い

多くのシステムエンジニアと開発しています。
小野です。

システム開発の現場で気付いたことを忘備録として書いていこうと思います。
プログラミングのことも書く予定ですが、システム開発者として大事なポイントをまとめていこうと思います。

今回は記念すべき1記事目です。

## プログラミングは暗黙知が多い

プログラミングは論理的なものと思いがちですが、意外と感覚でやっていることが多いと思います。

というのも、後輩に教える時に「自分の中では理解できているもの」であっても、相手がすんなり理解できないことが多いことに気づいたからです。

プログラミングにまだまだ慣れていない人からすると、「なんでそんなにサクサクと進むの！？」となります。
「だって、こういうエラー出てるし」と言っても、キョトンとされます。

僕にとっては出てるエラーの通り、問題を直している。
しかし、後輩は分からない。

言葉にできても伝わらない。
つまり、 **”暗黙知が多い”** と気付きました。

（「暗黙知」とは経験値から覚えて日常使っているもので、逆の言葉は「形式知」と言ってマニュアルやレシピ、口頭で理解できるもののことです）

プログラミングも職人技と同じで、経験から覚えた感覚的な部分がほとんどを占めています。
料理のようにレシピ通りに進めたら、誰が作ってもだいたい同じ味になるのとは違います。レシピのサイトであるクックパッドを作った人は、天才だと思います（笑）

料理と違って、プログラミングはある程度の経験や感覚を身に付ける必要があります。
逆に言えば、経験さえ積めば、ある程度プログラミングはできるようになります。
（ただ、どうしてもここを難しく思ってしまうのですよね...笑）

### これからプログラミングを勉強する人へ

今、プログラミングを勉強している人や、これからプログラミングを勉強する人は、暗黙知が多いからサクサクとできないことを知っておいて欲しいです。

「プログラミングの勉強は簡単じゃない」と知っているだけでも、プログラミングの勉強へのハードルは軽くなると思います。

プログラミングの考え方やコードを書くのに慣れない間は、どうしても挫折しやすいものです。
でも、この記事を読んで、少しでもプログラミングに対して前向きになるといいなと思います。

挫折しそうな時は、ぼーっとドットインストールの動画を見るのオススメです。
ただ見てるだけでも、参考になることありますよ。

https://dotinstall.com/
[rails6 devise]. No route matches [GET] "/users/sign_out”の対処法

```php:view
<%= link_to "ログアウト", destroy_user_session_path, method: :delete %>

↓　method: :deleteを method: :getに変更
<%= link_to "ログアウト", destroy_user_session_path, method: :get %>
```

次にdevise.rbで「delete」から「get」に変更。
```php:devise.rb
config.sign_out_via = :delete
↓
config.sign_out_via = :get
```

railsを再起動したら解決しました。
作業ディレクトリ依存のnodeバージョン確保する

### ※手順はMacでzshを想定

#### direnvのインストール
```
brew install direnv
```
.zshrcに以下を追加
```~/.zshrc
eval "$(direnv hook zsh)"
```

#### nvmのインストール
```
brew install nvm
```
```~/.zshrc
export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh
```

「source ~/.zshrc」を忘れずに


#### 環境を保持したいディレクトリこのファイルを作る
```.envrc
__=`pwd`
export NVM_DIR=$__/.nvm
if ! [[ -d $NVM_DIR ]];
then
  mkdir $NVM_DIR
fi
source $(brew --prefix nvm)/nvm.sh
```

:::note alert
direnv: error /Users/pooh/Workshop/ibushigin/code/ibushigin-gohe_2/.envrc is blocked. Run \`direnv allow\` to approve its content
:::
このエラーが出たらあせらず`direnv allow`を実行

###### 経緯
他の作業環境のglobal汚染やnodeバージョンをあやまって削除したなど混乱生じてたので
ディレクトリ依存でnodeのバージョン管理できるものを探したが見つからなかった。もっとマシな解決法があったら紹介してほしい

###### 検索用
ディレクトリーごとに フォルダーごとに nodeのバージョン管理
Progate HTML&CSS初級編終わり

<h1>1h20mで終了(Tabキー便利すぎる)</h1>
チュートリアルで一通り静的ホームページ制作した。
特に躓くところなし。
<p>早く、javascript使ってアニメーション付加させたページ作成したい。</p>
完璧に理解しようとせずに８割理解でどんどん進めていくように努めたい。
【C言語】お金の個数の組み合わせ【備忘録】

# お札N枚でぴったりY円が作れるか判定する

AtCoderで解いていた問題（とその修正）の自分用メモです。

>問題：
>青橋くんが言うには、彼が祖父から受け取ったお年玉袋にはお札が N 枚入っていて、合計で Y 円だったそうですが、嘘かもしれません。このような状況がありうるか判定し、ありうる場合はお年玉袋の中身の候補を一つ見つけてください。
>
>（AtCoderより引用）

最初に立てた方針：
　一万円が0～n枚の場合を考える
　五千円が0～n枚の場合を考える
　千円が0～n枚の場合を考える
　ただし五千円および千円はより大きい金額のお札と合わせてn枚を超えない範囲のみ考慮する
　以上を入れ子状のループにし、合計金額がY円と一致するか組み合わせごとに判定する

::: note info
ぴったりN枚でY円になる場合のみが条件に合致する
:::

問題の条件を読めば、x+y+zはつねにnに合致していなければならないのですが、始めに方針を立てたとき、x, y, zの合計がn以下であれば問題ないと勘違いしていました。

ぴったりN枚の場合のみを考えるので、zの枚数はyの枚数が決まった時点で一つに定まります。
よってループは二重のみで解決します。

```diff_c
#include <stdio.h>
int main(void)
{
    //input
    int N, Y;
    int x, y, z;
    scanf("%d %d", &n, &Y);
    
    for (x = 0; N >= x; x++) {
        for (y = 0; N-x >= y; y++) {
            //for (z = 0; N-x-y >= z; z++) { ...このループは必要ない！
            z = N - x - y;    //代わりにこの行を追加した
                if (Y == 10000*x + 5000*y + 1000*z) {
                    printf("%d %d %d\n", x, y, z);
                    return 0;
                }
            //}
        }
    }
    
    //output
    printf("-1 -1 -1\n");
    return 0;
}
```
2022/10/8実施
参照先：AtCoder ABC085C-Otoshidama

https://atcoder.jp/contests/abs/tasks/abc085_c

### 今後の課題
・条件を勝手に解釈せず、正しく条件の範囲をとらえること
Pythonで四角形の枠線を複数個描画する方法

2022/10/08:最終更新
# はじめに
Pythonで四角形の枠線を複数個描画する方法を紹介します．

これを実現したい．
![rentangle.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2885323/9354832a-7fea-02e2-bf3e-eb59fddcada5.png)

# 開発環境
Mac OS Montery v.12.6
Python 3.9.11
numpy = 1.23.3
matplotlib = 3.6.0

# 目次
<!-- タイトルとアンカー名を編集 -->
1. matplotlib.LineCollection()を使う方法
1. matplotlib.patches.Rectangle()を使う方法
1. matplotlib.pyplot.plot()を使う方法


<!-- 各チャプター -->
<a id="#Chapter1"></a>
# matplotlib.LineCollection()を使う方法


```python:rect_linecollection.py
import numpy as np
import matplotlib.pyplot as plt
from matplotlib.collections import LineCollection

#変数の宣言
X_RECT=np.array([[[-2,-2],[-2,-1],[-1,-1],[-1,-2],[-2,-2]],
                [[ 1 ,1],[ 1 ,2],[ 2, 2],[ 2 ,1],[ 1 ,1]],
                [[ 1,-2],[ 1,-1],[ 2,-1],[ 2,-2],[ 1,-2]]])
#描画の宣言
fig=plt.figure()
gs=fig.add_gridspec(1,1)
ax1=fig.add_subplot(gs[0,0],aspect='equal')

#描画スタート

#LineCOllection
lc = LineCollection(X_RECT,color='b')
ax1.set_title('LineCollection')
ax1.set_xlim(-3,3)
ax1.set_ylim(-3,3)
ax1.add_collection(lc)

plt.show()

```

<a id="#Chapter1"></a>
# matplotlib.patches.Rectangle()を使う方法


```python:rect_rectangle.py
import numpy as np
import matplotlib.pyplot as plt
import matplotlib.patches as patches

#変数の宣言
X_CENTER=[(1.5,1.5),(1.5,-1.5),(-1.5,-1.5)]

#描画の宣言
fig=plt.figure(figsize=(19,6))
gs=fig.add_gridspec(1,1)
ax1=fig.add_subplot(gs[0,0],aspect='equal')

#描画スタート

#Rectangle
ax1.set_title('Rectangle')
ax1.set_xlim(-3,3)
ax1.set_ylim(-3,3)
for i in range(3):
    r = patches.Rectangle( xy=X_CENTER[i] , fill=False,width=1, height=1,color='b') # 四角形のオブジェクト
    ax1.add_patch(r)

plt.show()

```

<a id="#Chapter1"></a>
# matplotlib.pyplot.plot()を使う方法


```python:rect_plot.py
import numpy as np
import matplotlib.pyplot as plt

#変数の宣言
X_RECT_PLOT=np.array([[[-2,-2,-1,-1,-2],[-2,-1,-1,-2,-2]],[[1,1,2,2,1],[1,2,2,1,1]],[[1,1,2,2,1],[-2,-1,-1,-2,-2]]])
X_RECT=np.array([[[-2,-2],[-2,-1],[-1,-1],[-1,-2],[-2,-2]],
                [[ 1 ,1],[ 1 ,2],[ 2, 2],[ 2 ,1],[ 1 ,1]],
                [[ 1,-2],[ 1,-1],[ 2,-1],[ 2,-2],[ 1,-2]]])

#描画の宣言
fig=plt.figure()
gs=fig.add_gridspec(1,1)
ax1=fig.add_subplot(gs[0,0],aspect='equal')

#描画スタート

#plot
X_RECT_PLOT=X_RECT.transpose(1,0,2)
ax1.set_xlim(-3,3)
ax1.set_ylim(-3,3)
ax1.set_title('plot')
ax1.plot(X_RECT_PLOT[:,:,0],X_RECT_PLOT[:,:,1],c='b')

plt.show()

```
オンラインボードゲーム開発記録

unity でオンラインボードゲーム開発をした記録を載せます
参考記事　

https://zenn.dev/o8que/books/bdcb9af27bdd7d

# pun2実装

ログイン画面から作成します
Pun2の仕組み
マスターサーバーにアクセスし、個別のルームを立ち上げる

マスターサーバーにアクセスする関数
```.cs
PhotonNetwork.ConnectUsingSettings();
```


マスターサーバーにアクセスしたときのコールバック
コールバックはMonoBehaviourPunCallbacksを継承する必要がある。
```.cs
public override void OnConnectedToMaster() {}

```
MonoBehaviourPunCallbacksの中にvertualでOnConnectedToMaster()が宣言されているのでoverride するよ

ルーム作成する関数
```.cs
// "ルーム名"という名前のルームを作成する
PhotonNetwork.CreateRoom("ルーム名");
```

ルーム作成したときのコールバック

```.cs
public override void OnCreatedRoom() {}
```

ルーム参加
```.cs
PhotonNetwork.JoinRoom("ルーム名");
```

ルーム参加したときのコールバック
```.cs
public override void OnJoinedRoom(){}
```

ルーム作成と参加を同時に行う

```.cs
//"Room"があるなら参加、内なら作成し参加する
PhotonNetwork.JoinOrCreateRoom("Room", new RoomOptions(), TypedLobby.Default);
```

ルーム退出
```.cs
PhotonNetwork.LeaveRoom();
```
ルーム退出のコールバック
public override void OnConnectedToMaster(){}

ロビー
ロビー参加
```.cs
PhotonNetwork.JoinLobby();
```
ロビー参加したときのコールバック
```.cs
public override void OnJoinedLobby(){}
```
ロビーから退出
```.cs
PhotonNetwork.LeaveLobby();
```

オブジェクト生成
```.cs
PhotonNetwork.Instantiate("生成したいオブジェクトの名前", position, Quaternion.identity);
```
第二引数: 生成するオブジェクト位置
第三引数:　生成するオブジェクト角度
ここで生成するオブジェクトはResourceフォルダに入れておく

# オンラインボードゲーム作成
流れ
ログイン（名前入力）

roomに入る

スタートボタンで開始

# ログイン画面


![login.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1982114/c54b9d2c-5423-77cf-7452-6df9f24f04c6.png)


サーバー側とunityのＵＩとかＳＣＥＮＥを連動させることで分かりやすくなる

ロビー使用しなくてもできそう
UI左上に表示しておくとか
４０代おっさんPythonを勉強する（制御フロー編②）

## 本記事について

この記事はプログラミング初学者の私が学んでいく中でわからない単語や概要を分かりやすくまとめたものです。
もし不正などありましたらコメントにてお知らせいただければ幸いです。

## 制御フロー

前回の記事

<https://qiita.com/kou1121/items/c103729b2b51bb581efe>

### 繰り返し(反復処理)

#### while

- 一定の条件がTrueになっている間にコードのブロックを実行する
- 条件がTrueのままだと無限ループする

```python
i = 0
while i < 10:
    print(i)
    i += 1
```

#### for

- forループの場合はenumerableのオブジェクトの要素を反復的に処理する
- ループの変数に要素を代入し、繰り返しブロックを実行する

```python
collection = [1, 2, 3, 4, 5]
for i in collection:
    print(i)
    
address = [('としき','札幌市'),('たろう','大阪'),('二郎','東京')]
for name, city in address:
    print(f'Name: {name}, City: {city}')
```

#### breakとcontinue

- ループにbreakを使って、ループを終了することができる(whileとfor、両方できる)
- 特に無限ループで、終了条件がはっきりわからない場合は役に立つ

```python
while True:
    value = input('何か入れてください、Ｑを押すと終了します')
    if value == 'q': # 終了
        break
    else:
        print(f'あなたは{value}を入れましたね')
```

- 別の理由で、処理をせずに次のイテレーションに回すときにcontinueを使う

```python
while True:
    value = input('整数を入れてください、Qを押すと終了します')
    if value == 'q': # 終了
        break
    else:
        try: # エラー処理
            number = int(value)
        except: # 整数に変更できない場合
            print(f'{value} 数字ではありません')
            continue # 次に回す
            
        print(f'あなたは{value}を入れましたね')
```

### 3Rを意識する

- Reduce(リデュース：減らす)
  - なるべくコードを簡潔にして、短くする
- Reuse(リユース：繰り返し使う)
  - 書いたコードを関数にしたり、パッケージにまとめたり、再利用できるようにする
- Recycle(リサイクル：再資源化する)
  - 書いたコードを変更したり、別の機能を加えたり、旧コードを再利用する

上記を意識し習慣化することでプログラムの開発期間が短縮できる。
インタネットで公開しているコードもあるので参考にすることも必要！

## 参考

https://www.kitakyu-u.ac.jp/news/2022/08/003215.html
LINE のリッチメニューが変更できなくなった時


# 状況 
LINE公式アカウント“機能拡張”サービス <a href="https://elink-lc.com">elink</a>を利用して 
リッチメニューの設定をした後にelinkを解約したところ、管理画面からリッチメニューの更新ができなくなった。

# elink の利用規約
https://elink-lc.com/kiyaku/
![2cf64698ced420f121e3bad2d0f38b0f.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65992/be185262-96fa-8a04-78dc-e540bdb7c8a0.png)

# 必要情報
LINE Developers のログインIDとパスワード
LINE Messaging APIキー

# 参考
https://developers.line.biz/ja/reference/messaging-api/#cancel-default-rich-menu

# 対応内容
elinkで設定したリッチメニューを削除する必要がある

# curlを利用してデフォルトのリッチメニューを解除する (Macターミナル)
```
curl -v -X DELETE 'https://api.line.me/v2/bot/user/all/richmenu' 'Content-Type:application/json;charset=utf-8' -H 'Authorization: Bearer {channel access token}'
```

# 諸注意
最初は、リッチメニューのIDを取得してそのリッチメニューを削除しようと思いましたが、
他のサービスを利用していないということでしたので、デフォルトのリッチメニューを解除しました。
安全なのは、リッチメニューのIDを取得して、そのリッチメニューの削除かと思います。
https://developers.line.biz/ja/reference/messaging-api/#get-rich-menu


# 感想
LINE については、初めましてでしたが、ドキュメントを見つつ、色々検討した結果できました。
elink 月額定額2万円(税抜)のサービスなのに、痒いところに手を届けてくれてもいいのにな、と思います。
逆求人イベントに参加してきた話

大学やインターンの選考などでなかなか時間が取れず、めちゃめちゃ投稿遅くなってしまいましたが、下記の2つの逆求人イベントに参加していたので、参加記として残しておきます。

- キャリアセレクト1on1イベント 5/21
- サポーターズ1on1イベント 5/22

最初に書いておくと、参加は絶対した方がいいです！！めちゃめちゃ有意義な時間で、選考スキップやフィードバックなども貰えます！

## 参加にあたって

逆求人イベント参加にあたって、両者とも選考がありました。

具体的には下記のような内容です。

### キャリアセレクト

- プロフィール選考

### サポーターズ

- エントリーシート

ジースタイラス主催の逆求人イベントでは、選考はないようなのでチャレンジするのはおすすめだと思います。

## 準備したこと

準備したことは主に、

- プレゼン資料（5分程度の発表）
- 発表練習
- 逆質問の準備
- 各企業の情報収集（企業理念、ミッションバリューなど）
- リモート用リングライト
- zoom背景

特に、プレゼン資料作成と発表練習には時間をかけていました。プレゼンは苦手すぎる。。

## 逆求人本番

最初、2時間程度は企業発表で各企業のミッションやバリュー、インターンの内容などの紹介wがありました。その後、アンケートによって、面談をしたい企業を選択します。企業側からも学生が選択されマッチングすると、面談を組んでもらえるようです。

面談の時間は、サポーターズ→1ターム20分。キャリアセレクト→1ターム25分でした。ターム間の休憩は10分だったのですが、全ターム入っている場合はタームの内容をまとめるだけで休憩が終了するため、かなりキツかったです。

気になる面談をさせて頂いた企業ですが、

### サポーターズ（8社）

- Retty
- リクルート
- Yahoo
- サイバーエージェント
- ブレインパッド
- アスクル
- ラクスル
- Buysell technologies

### キャリアセレクト（4社）

- ディレクターズ
- supership
- マネーフォワード
- ギフティ

の2日間で計12社です。

正直周りのレベルが高すぎてかなり萎縮していましたが、思った以上に面談を組んでもらえて嬉しかったです。

各社について詳細は書きませんが、自己紹介プレゼンのあと将来像や成果物に関して、価値観などの質問に関して受け答えしました。その後、会社についてをこちらから逆質問し、答えていただくと言った流れでした。

どの企業も面談自体は和気藹々という感じでした。

また、質問に対しても、真剣に答えてくださっていてとても有意義な時間でした。面談に参加していた方々は企業によってかなり異なっていました。

人事やエンジニア（新卒からテックリード）など様々な立場の方々とお話しさせて頂きました。

有難いことに、面談のなかで連絡先を交換したり、後日個人面談を組んで頂けました。（これがかなり自信に繋がった）

## 面談終了

面談が終了すると、各社へのアンケートを専用のサイトから答えていきます。また、企業側からも面談の内容をフィードバックしてもらえます。

評価されていたポイントとしては、

- コミュニケーション能力
- 思考力（一番多かった）
- プレゼンの完成度

などの点で評価されていました。

改善点としては、

- インターンなどのチーム開発で自分がどのように動いていたのか、どのような役割を担っていたのかを伝えれると良かった。

などの声を頂きました。

基本的に企業は好印象を持ってもらいたいと考え、基本的に褒めることに注力する中で、こう言ったフィードバックを頂けるのはびっくりしましたが、かなり嬉しかったです。

また、1社からはスペシャルオファーとして一部選考スキップを頂くことができました。

## まとめ

### 良かったところ

- プレゼン資料作成の際に、キャリアビジョンや将来像、これまでの経験などかなり深ぼることができた。
- 1日で多くの企業と面談することができ、企業理解が深まった。
- いい点、改善点などフィードバックしてもらえたことで夏に取り組むことが具体的になった。

### 改善点

- 質問の際もう少し端的に答えても良かった。

### 感じたこと

- 圧倒的に技術不足
- チーム開発経験が足りない

良かった点や、改善点、夏に向けの取り組みなど多くのことが学べました。

参加は絶対にお勧め！！

10月11月に逆求人イベントは開催されるみたいなので、参加してみてください！！
大学２年後期から３年前期のインターンまでにまともなポートフォリオを作成する軌跡

<h1>progateを始めてみる</h1>

まずはウェブ開発コースを進めることにする。

HTML&CSS>>Javascript>>Node.js  の予定。


～追記～
Reactもとりあえずやるっぽい。
PersistableBundleとは。

# 出会い
onCreate()内に書いているコードには問題ないはずなのに、画面が表示されない。。。
なぜだ。と思ったら！
`PersistableBundle`を使用していたからでした。

# PersistableBundleって何？
API21から追加された新機能です。
Bundleと似ていますが、persist(持続する)という言葉からもわかる通り、
**永続的に保存する**ことができます。
また、Bundleはカスタムを含めたあらゆる種類のデータを含めることができるのに対して、
 `PersistableBundle`は**決めれた種類のデータ**しか対応していません。
```:データの種類一覧
- Int
- Int[]
- Long
- Long[]
- Double
- Double[]
- String
- String[]
- Boolean
- Boolean[]
- PersistableBundle
- null
```


# 使用方法
```kotlin
 override fun onSaveInstanceState(
        outState: Bundle, 
        outPersistentState: PersistableBundle
    ) {
        super.onSaveInstanceState(outState, outPersistentState)
    }
```
```kotlin
override fun onRestoreInstanceState(
        savedInstanceState: Bundle?,
        persistentState: PersistableBundle?
    ) {
        super.onRestoreInstanceState(savedInstanceState, persistentState)
    }
```
の二つのメソッドと組み合わせて呼び出されます。
そして、AndroidManifestの該当Acticityの欄に
```xml:AndroidManifest.xml
<acticity
android:persistableMode=”persistAcrossReboots”>
</activity>
```
を記述してActivittyのデータを永続的に保存できるようにする必要があります。

# 最後に
上記に則らずに使用したため、当たり前機能しなかった。。。
こんな初歩的なミスですごく悩みました。
天才エンジニアへの道はまだまだ遠いですね！
※理解に誤りや補足事項があればコメントしていただけるととても嬉しいです！

# 参照
https://developer.android.com/guide/topics/manifest/activity-element?hl=ja
https://developer.android.com/reference/android/os/PersistableBundle
UIButton と Userdefalts のカウンター

UIButtonはオブジェクト指向（ストーリーボード）と、文字式で書くことの二種類の設置方法があります。

```
@IBOutlet weak var btn1!
```
と　override func viewDidLoad(){
の中でポジションを決める方法です。両方、UIButton.frameなどの位置どりが必要です。    

```
var ii = Int()
var users = UserDefaults.standard
var label = UILabel()

override func viewDidLoad(){
    // ボタンの初期化    
    let btn = UIBUtton()
    // ボタンの位置決め。左から＝x・上から＝y・幅＝width・高さ＝height。
    btn.frame = CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: self.view.frame.size.height)
    btn.setTitle = ""
    btn.addTarget(self, action: #selector(btn(btn:)), for: .touchUpInSide)
    self.view.addSubview(btn)
    label.frame = CGRect(x: 100, y: 100, width: 140, height: 60)
    self.view.addSubview(label)
    ii = users.integer("k1")

}
@objc func btn(btn: UIButton){
    ii += 1
    label.text = String(ii)
}
override func viewDidDisAppear(){
    users.set(ii, for: "k1")
}
```
ボタンアクションと、カウンターをアクションごとにアップし、画面が消えると記憶する仕組みにしました。
Ruby on Rails 部分テンプレートが開かない！！「ActionView::MissingTemplate」のエラーが出ている。。


# １．はじめに
Ruby on Railsにて部分テンプレートを実装している最中にエラーが発生しました。
同じミスをしないよう、解決方法を記録に残しておきます。

# ２．前提条件
#### 開発環境
Ruby：ruby 3.1.2
Rails：Rails 6.1.6.1
OS：Windows11 Home

#### 実装状況
・deviceを導入し、ログイン機能実装
・ゲストログイン機能実装
・投稿機能実装(投稿一覧、投稿詳細ページ作成)
・会員詳細画面実装
・コメント機能実装
・コメント機能の非同期通信　<font color=red>←今ココ</font>

#### やりたいこと
コメント機能を非同期通信にするために、まずはコメント投稿フォームとコメント一覧をそれぞれ部分テンプレート化したい。

# ３．エラーメッセージの内容

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823804/e74ec9b8-705c-d699-aceb-8cae21ce344e.png)



#### ②エラーメッセージの意味
ビューページ表示できないですよみたいな意味だと思われる。。

#### ③エラーの原因を考える　
エラー画面にも書かれているが、renderの記述がおかしいと思われる。
renderの記述は下記のように記述する。
```
<%= render [部分テンプレートファイルの指定], [ローカル変数]:[渡す値] %>
```
今回ファイルが読み込めていないっぽいので`[部分テンプレートファイルの指定]`がおかしいと思われる


# ４．エラー解決までの流れ

#### renderの記述を確認する

```
<%= render "outfit_comments/form", outfit: @outfit, outfit_comment: @outfit_comment %>
```

ここでミスを発見しました！
予想通り`[部分テンプレートファイルの指定]`が間違えていました。
ファイルは
"outfit_comments/form"ではなく
"<font color=red>public</font>/outfit_comments/form"でした！

#### renderの記述を修正する
```
<%= render "public/outfit_comments/form", outfit: @outfit, outfit_comment: @outfit_comment %>
```

※同じくコメント一覧のrenderの記述も間違えていたので、こちらも併せて修正しておきました。


# ４．最後に
部分テンプレートでのファイル指定は、階層をよく確認してから記述しないといけないということがわかりました！同じミスをしないように、しっかり理解を深めていこうと思います！
最後まで読んでくださり、ありがとうございました！
初学者の失敗 ~ルートディレクトリをGit管理していた話と激重VS codeの誕生~「備忘録」

## 最初に
今回はGit学習を始めた時に、~/User直下で`git init`してしまい、VS codeが激重のまま開発を行っていました。

今後、私と同じような初学者が同じ過ちを繰り返さないようにと記載しておきます。

## 何をしていたか

下記のコマンドを実行し、Finderを開きます。

```bash
open ~/
```

下記の画像は、コマンドを実行した結果開いたFinderのスクショ（一部のみ）です。
![スクリーンショット 2022-10-08 15.54.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1212014/7bdfd049-0e88-366e-085f-ea2ac2d9ff27.png)
無知って恐ろしいですね。このルートディレクトリ直下でgit管理を行っていたのです。。

下記が例（※実行しないでください）

```bash
cd
git init
```

という風に、git管理を行っていました。

これが、激重VS codeの第一歩目…

## 何がダメなのか

結論重すぎる。

前提として、VS codeの拡張ツールにGUIでgit操作を行えるものがあります。さらに、その拡張ツールには、変更したファイル数（コミットしていないファイル）を可視化してくれる機能があります。（下記画像）
![スクリーンショット 2022-10-08 16.06.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1212014/51eac4c1-23ae-9ec8-2a23-af8484188853.png)
これが、ルートディレクトリ直下をgit管理している場合は、VS codeで新しく作ったディレクトリを開いたとしても、「「10M」」！？

具体的には、何かしらのファイルをダウンロードした場合、全て変更としてスタンバイしているわけです。重いに決まっている。。

## 解決策

対象のディレクトリへ移動した後、下記コマンドを実行します。

今回であれば、ルートディレクトリ直下なので

```bash
cd 
git -rm .git
```

/Desktop/sample直下であれば、

```bash
cd ~/Desktop/sample
git -rm .git
```

でgitの管理を削除することができます。

.gitが全ての管理を行っているので、このファイルをさえ削除してしまえば管理から外すことが可能となるわけです。
モジュールのミックスイン

# 複数のクラスに同じような機能が必要な場合
is-aの関係になくても複数のクラスにまたがって同じような機能が必要になるケースは存在します。

## 継承の使用を避ける場合にモジュールを使う
製品は```ユーザであるまたはユーザーは製品であるという関係が（is-aの関係）が成り立たない```のであれば、```継承の使用は避ける```べきです。
その時に```モジュール```を使う。

# モジュールのメソッドはどんなクラスにも使える
```モジュールに定義したメソッド```をProductクラスでもUserクラスでも呼び出すことができました。
モジュールをクラスに```include```して機能を追加することを```ミックスイン```という。

```ミックスイン先のクラスは基本的にどんなクラスでもOK```

# ミックスインのもう一つの方法
モジュールをクラスにミックスインするもう一つの方法として```extend```がある。
モジュール内のメソッドを```そのクラスの特異メソッド（つまりクラスメソッド）にする```ことができる。

# 出典
https://ruby-book.jnito.com/
Kotlinでループ処理を使ってトリボナッチ数を求める

## トリボナッチ数とは

> トリボナッチ数とは、下記定義によって表される数列または数である。フィボナッチ数と関係が深い。
F0 = 0
F1 = 0
F2 = 1
Fn+3 = Fn + Fn+1 + Fn+2

引用 [Numberpedia様より](https://number-pedia.com/tribonacci/)

## 求め方
for文使って、代入を繰り返せば実装できます。

### コード
```kotlin
fun main(args: Array<String>) {
    val num:Int
    for(i in 0..50) {
        print("${i}:${calc(i)}\n")
    }
}

fun calc(num : Int):Int {
    var first = 0
    var second = 1
    var third = 1
    return when (num) {
        0 -> 0
        1 -> first
        2 -> second
        3 -> third
        else -> {
            var current = first + second + third
            for (i in 4..num) {
                current = first + second + third
                first = second
                second = third
                third = current
            }
            current
        }
    }
}
```

### 結果
```
0:0
1:0
2:1
3:1
4:2
5:4
6:7
7:13
8:24
9:44
10:81
...
```

## 追記
再起的に関数を呼び出したバージョン。
こちらの方が記述量が少なくスッキリ書けます。
```
/*
再起関数を改良したバージョン
*/
fun main(args: Array<String>) {
    val num:Long = 50
    for(i in 0..num) {
        print("${i}:${fibonacci(i)}\n")
    }
}

fun fibonacci(num: Long):Long {
    return fib2(0, 1, num)
}

fun fib2(a:Long,b: Long,c:Long):Long{
    if(c < 1) {
        return a;
    }
    return fib2(a + b, a, c - 1)
}
```
西暦の年数および月を入力し、その月の日数を求めるプログラムの備忘録

今日も学んだことを忘れない為にメモします。

## プログラム内容
西暦の年数および月を入力し、その月の日数を求めるプログラムを書く。
その場合、閏年について考慮する必要がある。

閏年は以下の判断基準で決まります。

①その西暦が4で割り切れたら閏年である
②ただし、例外として100で割り切れる西暦の場合は閏年ではない
③ただし、その例外として400で割り切れる場合は閏年である

```
1990年2月 =>"1990年2月は28日間あります"
2000年2月 =>"2000年2月は29日間あります"
2100年2月 =>"2100年2月は28日間あります"
2000年3月=>"2000年3月は31日間あります"
```

## 記述内容
```
def get_days(year, month)
  month_days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
  if month == 2
    if year % 4 == 0
      if year % 100 == 0 && year % 400 != 0
        days = 28
      else
        days = 29
      end
    else
      days = 28
    end
  else
    days = month_days[month - 1]
  end

  return days
end

puts "年を入力してください："
year = gets.to_i
puts "月を入力してください："
month = gets.to_i

days = get_days(year, month)
puts "#{year}年#{month}月は#{days}日間あります"
```
各月の日数は配列で管理する
2月以外は各月の日数が決まってるのでまずは以下のようにコードを記述する。
```
def get_days(year, month)
  month_days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] # 各月の日数は配列で管理
  return month_days[month - 1]
end
```

次に2月の場合のコードを記述（if month == 2で　2月の時の記述）
```
def get_days(year, month)
  month_days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
  if month == 2
  else
    days = month_days[month - 1]
  end
```
閏年のときは2月は29日、、それ以外の年は28日になる。
閏年の条件は3つあるが、以下のようにまとめることができる。
① その年が4で割り切れること
② ただし、年が100で割り切れて400で割り切れない場合は閏年ではない

したがって、以下のような条件分岐を設けることができる。
```
year = 指定の年

if year % 4 == 0  
  if year % 100 == 0 && year % 400 != 0 
    # 閏年でない
  else
    # 閏年
  end
end
```
if year % 4 == 0  は年が4で割り切れる場合
if year % 100 == 0 && year % 400 != 0 は年が100で割り切れて400で割り切れない場合

上記のロジックを反映する。
```
def get_days(year, month)
  month_days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
  if month == 2
    if year % 4 == 0  # 年が4で割り切れること
      if year % 100 == 0 && year % 400 != 0  # 年が100で割り切れて400で割り切れない場合
        days = 28 # 閏年でない
      else
        days = 29 # 閏年
      end
    else
      days = 28   # 閏年でない
    end
  else
    days = month_days[month - 1]
  end

  return days
end
```

以上になります。
「==」（等価演算子）と「===」（厳密等価演算子）の違いを解説してみた

こんにちは。この記事ではjavaScriptにおける等価演算子（==）と厳密等価演算子（===）の違いについて解説していきます。実際の現場では、等価演算子は非推奨としているところが多い印象です。その理由も以下の解説を読むことで理解できるかと思います。

# 等価演算子（==）と厳密等価演算子（===）の違い
まず初めにMDNを見てみましょう。
MDNには、等価演算子と厳密等価演算子の説明が以下のようにされています。

### 等価演算子(==)
> 等価演算子 (==) は、二つのオペランドが等しいことを検査し、論理値で結果を返します。**厳密等価演算子とは異なり、オペランドの型が異なる場合には型の変換を試みてから比較を行います。**

### 厳密等価演算子(===)
> 厳密等価演算子 (===) は、二つのオペランドが等しいことを検査し、論理値で結果を返します。**等価演算子とは異なり、厳密等価演算子はオペランドの型が異なる場合、常に異なるものと判断します。**


## コンソールで試してみた
実際の挙動を見ることで等価演算子と厳密等価演算子の違いが分かるかと思います。
```js
console.log(1 == 1);
// true
console.log(1 === 1);
// true


console.log('hello' == 'hello');
// true
console.log('hello' === 'hello');
// true


console.log('1' ==  1);
// true
console.log('1' ===  1);
// false


console.log(0 == false);
// true
console.log(0 === false);
// false

```

## まとめ
等価演算子と厳密等価演算子の違いを理解せず利用していると、思わぬバグを生むことがあります。この記事で理解が深まれば良いなと思っております。


## 参考
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Equality
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality
[Rails] ヘルパーメソッドのlink_toを用いたときのclassの書き方

# .htmlでのclassの書き方
```html:hoge.html
<h1 class="hoge">HOGE</h1>
```
# .html.erbでのclassの書き方
```erb:hoge.erb
<%= link_to 'HOGE', root_path, class: "hoge" %>
```
※root_pathのところは遷移させたい場所です。
CakePHP4のComponent設定方法

# コンポーネントとは
コンポーネントはコントローラー間で共有される処理をまとめたもの。
[コンポーネント - 4.x](https://book.cakephp.org/4/ja/controllers/components.html)

# 設定方法
Cookbookでは２つの設定方法が記載されている。
１つ目はコントローラーの initialize() メソッド内で loadComponent() を使用する方法
2つ目は$components 配列を使用する方法

CakePHP3までは上記２つの方法で設定できたが、CakePHP4からは２つ目の方法で設定できなくなった。
原因はCakePHP4のController.phpが仕様変更により、$components プロパティが削除されたためである。
[CakePHP3 - Controller.php](https://github.com/cakephp/cakephp/blob/3.x/src/Controller/Controller.php)
[CakePHP4 - Controller.php](https://github.com/cakephp/cakephp/blob/4.x/src/Controller/Controller.php)

CakePHP4を使う場合は、１つ目のコントローラーの initialize() メソッド内で loadComponent() を使用して実装する必要がある。
[Rails] トップページへのルーティングの設定方法

# ルートパスの記述方法
```ruby:config/routes.rb
root to: 'コントローラー名#アクション名'
```
これでトップページを表示できます。
例 :
```ruby:config/routes.rb
Rails.application.routes.draw do
  root to: 'schedules#index'
end
```
上記の例では、schedulesコントローラーのindexアクションに遷移するという意味になります。

# viewでの使用例
```erb:layous/application.html.erb
<body>
  <header>
    <%= link_to "SCHEDULE", root_path %>
  </header>
</body>
```
クラスの継承

DVDクラスがProductクラスを継承するとき、Productクラスのことを継承する時に
ProductクラスのことをDVDクラスの```スーパークラス（または親クラス）```と呼ぶ。
DVDクラスのことをProductクラスの```サブクラス（または子クラス）```と呼ぶ。

# クラス図
クラスの継承関係を図解するときは、クラス図と呼ばれる図を使う。

### クラス図を紹介
https://cacoo.com/ja/blog/how-to-write-class-diagram/

このクラス図のように
サブクラスからスーパークラスへ向かって矢印を伸ばしている。

# 継承の注意点
スーパークラスの機能を全部引き継ぐための仕組みと見なされる場合がある。
それは誤解だ。
```継承は機能ではなく、性質や概念の共通点に注目```する。

## 性質や概念が共通しているかを知るための方法
```サブクラスはスーパークラスの一種```である。（```サブクラス is a スーパークラス```）と声に出して読んだ時に違和感がないかを確かめることです。
これは```is-aの関係```

# 親クラスと子クラスの性質の違い
### サブクラスの性質
```スーパークラスの性質を特化```させたもの。

### スーパークラスの性質
```サブクラスの性質を汎化```させたもの。
汎化とは```性質がより大雑把に抽象化```されることを指す。

# 継承関係
Rubyの継承関係は単一継承です。
継承できるスーパークラスは一つだけになります。
(ただしRubyはミックスインという多重継承に似た機能を持っています。）

# デフォルトで継承されるObjectクラス
独自の作成したクラスはデフォルトでObjectクラスを継承します。
なので継承した独自に作成したクラスのオブジェクトは```to_sメソッド```や```nil?メソッド```を使うことができます。

# superでスーパークラスのメソッドを呼び出す
継承関係にあり同じメソッド名の場合処理に```super（(引数があれば引数を入れる)）```を書き込むと親クラスのメソッドと同じ処理します。
また新たに子クラスのメソッドだけに処理を書き足すこともできる。
これを```オーバライド```という。

# 出典
https://ruby-book.jnito.com/
wordpressでの納品方法をざっと解説。【All-in-One WP Migration】

# 前提

- 必ず「制作前」にクライアントに納品方法の確認をする。
- ローカル環境で正常に動いていることを確認する。

:::note info
クライアントに納品方法を指定された場合は、指定の方法で進めましょう。
:::

# ローンチマニュアル

納品の方法を決めるには、まず大きく二つに分岐する。

- 完全に新規でサイトを制作する場合
- サイトリニューアルの場合

:::note warn
サイトリニューアルの場合は、全体確認事項に目を通してから 具体的な流れ 4 に進んでください。
:::

## **全体確認事項**

### 共通

* テストサーバーを準備したか

### **新規**

* 本番環境へのアップロードなども、全てこちらで行っても良いか確認。

### **リニューアル**

* 本番環境のユーザ名とパスワードをクライアントに確認
* 万が一の場合に備えて、サーバー情報もクライアントに確認
* 本番環境へデータベースごと移行する為、これまでの情報は全て失われることを確認(バックアップは取る)

## **具体的な流れ**

ざっと概要
1. ドメイン・サーバーを契約してもらい、情報をもらう。
2. ローカル環境を構築し、開発を進める
3. サーバーにアクセスし、指定されたドメインとサーバーを紐付け、wordpressをインストール
4. ローカルの開発環境を、プラグインを使用しテストサーバーへ移行
5. 本番環境にもプラグインを使用し、テスト環境をインポート
6. 本番環境の動作確認をする。
7. 納品

### 1. ドメイン・サーバーを取得してもらう

特に説明はありませんが、まず初めにドメインとサーバーの情報をクライアントに確認します。「そもそもどのレンタルサーバー使えば良いの」というクライアントがいたら、自社が使い慣れているレンタルサーバーをお勧めした方が良い。

### 2. ローカル環境を構築し、開発を進める

レンタルサーバー契約やドメイン取得にはそれなりの時間がかかるため、ローカルで先に開発は進めておきましょう。

### 3. サーバーにアクセスし、指定されたドメインとサーバーを紐付け、wordpressをインストール

ドメイン・サーバーの情報とサーバーへアクセスするための情報をクライアントに確認しましょう。ドメインのみクライアントが取得しサーバーは自社が取得する場合、レンタルサーバーの設定で他社でドメイン取得したものでもサーバーを立てれるのでその手順に従い進めましょう。

基本的に、クライアントがどのサーバーを使うかはわからないので説明はないが、サーバーにアクセスしたら、クライアントが取得したドメインとサーバーの紐付けをおこなってwordpress環境をインストールしましょう。一旦はこれで平気です。

### 4. ローカルの開発環境を、プラグインを使用しテストサーバーへ移行

ローカルの開発が終了したら、まずはテストサーバーに上げて検証を行う為、ローカル環境に **「All in one WP Migration」** というプラグインを入れる。有効化にしたら、エクスポートを選択しエクスポート先は「ファイル」を選択。

※ 高度なオプションやファイルアップロードサイズの超過等の解説はまた後日記事を書きます。

テストサーバーにもAll in one WP Migration を入れ、インポートを選択し、ローカル環境でダウンロードしたファイルを選択する。

完了したら、一度スーパーリロード。wordpress管理画面のログインページに切り替わるので、**ローカル環境でのユーザ名とパスワードを入力**。(移行に伴い、ユーザ名とパスワードも変更される為)
管理画面にアクセスしたら、テスト環境で正常に動いているかを確認する。

### 5. 本番環境にもプラグインを使用し、テスト環境をインポート

テストサーバーで正常に動いていることが確認できたら、いよいよ本番環境へ移行する為、再びAll in one WP Migrationでテストサーバーをエクスポート。(ローカル環境とテスト環境で差異がない場合は、ローカル環境のエクスポートファイルでも可)

本番環境でもプラグインを入れる。プラグインを入れたら、テストサーバーにインポートした時と同様の手順で進めていく。

:::note alert
**サイトリニューアルの場合は必ずバックアップを取ること**
:::

### 6. **本番環境の動作確認を行う。**

本番環境へ移行が完了したら、管理画面の中身が変更されているか確認しましょう。

稀に、表示が変更されない場合があるので、ここでも必ずスーパーリロードを行い**テスト環境でのユーザ名とパスワードを入力**しましょう。

### 7. 納品

動作確認等できたら本番へのアップロードが完了。

All in one WP Migrationの移行では、データベースやメディアの他に、ユーザ名とパスワードも変更されてしまう為、クライアントにユーザ名とパスワードを共有する。

このままでは製作側がいつでも管理画面に入ることができてしまう為、ユーザ名とパスワードの変更していただくよう必ず伝える。

# まとめ

今回はローンチマニュアルの中でも、プラグインでの納品方法を作成しました。

保守運用からアサインする場合・リニューアルだが管理画面上に残したいものがある場合などは、またローンチ方法が変わってくるので別途記事を書いていきたいと思います。
dart:ui:1: Error: Not found: dart:ui.

# dart:ui:1: Error: Not found: dart:ui.
## エラー
```hello.dart
void main() {
    print('Hello World');
}
```
みたいなものを、
```
dart hello.dart
```
で実行すると下記のエラーが出る。
dart:ui:1: Error: Not found: dart:ui.
## 原因
FlutterパッケージをimportしているせいでFlutterとして処理をしてしまう。
## 解決策
Flutterパッケージをimportしない。
androidメモ

## 審査がある。
15年ごろの3分が 22年では2日に伸びている。

## packageName一覧を列挙する
    Intent i = getIntent();
    pm.getLaunchIntentForPackage("package.name.xxxxx");
    @SuppressLint("QueryPermissionsNeeded") List<ResolveInfo> resolve = pm.queryIntentActivities(i, PackageManager.MATCH_ALL);
    for (ResolveInfo s : resolve) {
        Log.d("IconResourceID", String.valueOf(s.getIconResource()));
    }


## アプリが入っていない場合にストアへ飛ばす
    try {
        startActivity(intent);
    } catch (Exception ignored) {
        // todo: 事前のinstall検証でもいいかもしれない
        try {
            Intent googlePlayIntent = new Intent(Intent.ACTION_VIEW);
            googlePlayIntent.setData(Uri.parse("market://details?id=a.b.c.d"));
            startActivity(googlePlayIntent);
        } catch (Exception ActivityNotFoundException) {
        }
    }
https://android-note.open-memo.net/sub/other__open_google_play_from_app.html

## 指定パッケージを開く
Manifestにqueryを指定する必要が11以降で発生
https://www.gesource.jp/weblog/?p=8537


## drawableが22からCompat経由
    // 指定している全てのアプリを出そうとするが、入っていない場合もあるため、デフォルトのアイコンを指定
    Resources res = getResources();
    Drawable icon = ResourcesCompat.getDrawable(res, R.drawable.png, null);
    Boolean hasPackage = true;

http://www.syo-app.com/archives/1545795.html
https://developer.android.com/guide/topics/graphics/drawables?hl=ja#java
【Let’s Encrypt】ワイルドカード証明書を取得する

#### 背景

SSL証明書はドメイン毎に取得すると思い込んでいましたが、サブドメインを含めて１つの証明書で対応できる「ワイルドカード証明書」なるものがあることを知り、早速取得してみました。

先人たちの知恵をお借りするなどして解決できたことを、この場をお借りして感謝するとともに、大変恐縮ですが**自分のメモ**として、こちらへまとめておきます。

### 証明書の取得

ワイルドカード証明書はDNS認証での発行のみとなるとのことで、DNS認証でcertbotを実行します。
以下の例では **`*.{domain}`** でサブドメイン有りと **`{domain}`** でサブドメイン無しの2つを指定しています。

注）`{domain}`の箇所を自ドメインに、`{mail-address}`の箇所を登録するメールアドレスに置き換えます。

コマンド：

```powershell
certbot certonly --manual \
--server https://acme-v02.api.letsencrypt.org/directory \
--preferred-challenges dns \
-d *.{domain} -d {domain} \
-m {mail-address} \
--agree-tos \
--manual-public-ip-logging-ok
```

コマンド実行後のオペレーションや証明書の適用の手順は、ワイルドカードではない証明書と同じ。
４０代おっさんPythonを勉強する（制御フロー編）

## 本記事について

この記事はプログラミング初学者の私が学んでいく中でわからない単語や概要を分かりやすくまとめたものです。
もし不正などありましたらコメントにてお知らせいただければ幸いです。

## 制御フロー

### 条件分岐

- 条件によって分岐のコードを実行する(if-elif-else)
- ブロックは必ずインデントする
- 条件はTrue(真)かFalse(偽)を返す表現を使う
- 条件の後ろにコロン(;)をつける

```python
a = 10
print(a > 0) # True
a = -10
print(a > 0) # False

if a > 0:
    print('positive')
else:
    print('negative') # negative
```

＊Pythonではインデントで実行ブロックを決定するから、バラバラなインデントは不可

```python
a = 1
if a > 0:
    print('成功')
      print('失敗') # インデントがばらばらの為エラーがでる
else:
    print('マイナスです')
```

```python
IndentationError: unexpected indent
```

- 条件によって２つ以上のブロックがある場合は、elifを使う

```python
a = 1
if a == 0:
    print('０です')
elif a > 0:
    print('1以上です')
else:
    print('-1以下です')
```

- 条件分岐により値を代入することが可能

```python
a = -5
b = 0 if a > 0 else 1
print(b)
```

- 比較演算子： ==, !=, >, <, >=, <=
- 論理演算し：and, or, not (優先度：not, and, or)
- 要素が入っている： in

```python
a, b, c, i = 10, -5, 20, 2
if (a > 0 or b > 0) and not c == 0 and i in [1,2,3]:
    print('利樹です')
```

- Pythonでは一行のコードが長いとき、分割することができる。
- 継続文字の \ を使う

```Python
a, b, c, i = 10, -5, 20, 2
if (a > 0 or b > 0) and \
    not c == 0 and \
    i in [1,2,3]:
    print('利樹です')
```

## 参考

https://www.kitakyu-u.ac.jp/news/2022/08/003215.html
MySQL公式のDockerイメージ(mysql-server)を使うときは、MYSQL_ROOT_HOSTを設定しよう

MySQLのDockerイメージは大きく分けて2つあります。

- [Docker公式が用意しているもの](https://hub.docker.com/_/mysql)
- [MySQL公式が用意しているもの(`mysql-server`)](https://hub.docker.com/r/mysql/mysql-server)

今回は後者の`mysql-server`のイメージを使用する際の注意点です。

***
もし実際にRailsと組み合わせて環境構築を行う際は、以下の記事を参考にしてください。

https://qiita.com/k5mrt/items/1f3afd8e645f3fcecd02
***

# 本題：`MYSQL_ROOT_HOST`を設定する
```yaml:compose.yaml
services:
  db:
    image: mysql/mysql-server:latest
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_ROOT_HOST: '%' # この行が必要
    ...
```
ここの`MYSQL_ROOT_HOST: '%'`の指定が必要です。

## 何をやってるか？

もしDocker公式のMySQLのイメージを使用する場合は、この`MYSQL_ROOT_HOST`の指定は必要ありません。`docker-entrypoint.sh`の[この行](https://github.com/docker-library/mysql/blob/master/8.0/docker-entrypoint.sh#L251)で、デフォルトのホスト名がワイルドカード（`%`）に指定してあるからです。
https://github.com/docker-library/mysql/blob/master/8.0/docker-entrypoint.sh#L251

一方で、今回使用したMySQL公式が用意しているイメージ(`mysql-server`)では、デフォルトのホスト名は`localhost`に指定してあります。
https://github.com/mysql/mysql-docker/blob/mysql-server/8.0/docker-entrypoint.sh#L110
この場合、MySQLサーバーのコンテナ内からしかアクセスができないので、ホスト名にワイルドカードを指定する必要がある、ということです。

# 参考サイト
## MySQLのDockerイメージ全般

https://gihyo.jp/dev/serial/01/mysql-road-construction-news/0167

https://toyo.hatenablog.jp/entry/2022/03/02/234159


## 今回の対処法関連
https://zenn.dev/ryo_kawamata/articles/mysql-connect-error

https://rfs.jp/server/mysql/m02/04-11.html
Salesforce認定アドミニストレーター試験の公式練習問題を解説してみた-その047

こんにちは。本橋孝昭です。

Salesforce認定アドミニストレーター試験の公式練習問題があるのはご存じでしょうか。
Trailheadにフラッシュカードとして何度も解ける練習問題がございます。

今回はTrailhead
アドミニストレーター認定の準備: データと自動化
ワークフローと自動化の学習

にある練習問題3問目をご紹介します

今回の内容はこちらです

https://trailhead.salesforce.com/ja/content/learn/modules/administrator-certification-prep-security-and-data-management/study-up-on-security-and-access?trail_id=administrator-certification-prep

こちらは動画でも解説しています。
ご確認ください

https://www.youtube.com/watch?v=PdBVJHU0Kak


<iframe width="560" height="315" src="https://www.youtube.com/embed/PdBVJHU0Kak" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/6afd95f9-50af-31bb-4901-fcb6dea5d2db.png)


正解はBですね

イメージとしては
入力規則は最初のほう
エスカレーションルールは最後のほう

と覚えていただければいいかと思います

詳細なルールの順番を知りたいならばこちら公式のヘルプのご確認をお願いします

https://developer.salesforce.com/docs/atlas.ja-jp.apexcode.meta/apexcode/apex_triggers_order_of_execution.htm
SQLite3について軽く調べてみた

# 環境
学習のためにコンテナで動かしてます。
`python:3.9-bullseye`のイメージを使いました。

# SQLite3をインストール
Debianでインストールしてますので、`apt-get`を使ってます。
必要に応じて、`yum`や`dnf`でインストールしてください。
```
# apt-get install -y sqlite3
```

# DBを作成する
```
# sqlite3 {DB名}.sqlite3
```
`sqlite3 db.sqlite3`と入力した場合、`db.sqlite3`というDBファイルが作成されます。
拡張子は、`.sqlite3`でなくても良いそう。
拡張子なしでも、`.db`や`.sqlite`などでも良い。

# DBに接続する
```
# sqlite3 {DB名}.sqlite3
```

# DBから切断する
`.quit`もしくは`.exit`で切断できました。
```
sqlite> .quit
```

# 接続しているDBを確認する
```
sqlite> .databases
main: /code/db.sqlite3 r/w
```

# テーブル一覧を確認する
```
sqlite> .table
```

# テーブルの中身を確認する
よくあるSQL文で確認する
```
sqlite> SELECT * FROM {テーブル名};
```

# テーブルを削除する
```
sqlite> DROP TABLE {テーブル名};
```

# 続きは気が向いたら・・・
気軽にDB作れるのは良いですね。
例えば、Djangoの学習でDBほしい、って場面で使えそう。
とりあえずテーブルの中身まで確認できたので満足。
あとはやりたいことに応じて調べながら解決してけば良さそう。
ROS：サービスを使った点群の座標変換

# ROS：サービスを使った点群の座標変換
この記事では`ROS`のサービスを使って点群等を座標変換する方法について説明します．

## 環境
Ubuntu18.04
ROS(Melodic)
Python 2.7.x

## 前準備
本記事では事前に静的な座標変換を行っていることを前提としています．
各センサを起動する`launch`ファイルに`static_transform_publisher`を用いて座標変換を記述してください．

## 概要

`ROS`では`link`同士の座標変換を行うときには主に[`tf`](http://wiki.ros.org/ja/tf)と呼ばれるライブラリを使用します．これを用いると`source`と`target`を指定するだけで座標変換をすることができます．[前回](https://qiita.com/HorimotoHiroto/items/84ae0702c63eb81a1ea5),`Python`で任意の一点を座標変換する方法について投稿しましたが，これを全部の点に使用するとかなりの時間がかかります．また，`tf2`を使うと`doTransform`で`Python`内で変換することができますが，これもまた時間がかかります．そこで，`ROS`の[サービス](http://wiki.ros.org/ja/ROS/Tutorials/WritingServiceClient%28c%2B%2B%29)を使って`C++`内で`pcl_ros`を用いて座標変換をして`Python`で変換結果を受けとります．サービスの説明については`Google`してください．

## 本準備

以下の[パッケージ](https://github.com/HHorimoto/transform_pointcloud_srv)をダウンロードしてください．
```shell
$ cd ~/catkin_ws/src/
$ git clone https://github.com/HHorimoto/transform_pointcloud_srv.git
$ cd ~/catkin_ws
$ catkin_make
```

## 使い方

+ `transform_pointcloud_srv`を起動してください．これが変換する**サービス側**です．
```shell
$ rosrun transform_pointcloud_srv transform_pointcloud_srv
```

+ サンプルプログラミング（`client_py.py`）を起動してください．これが変換結果を受け取る**クライアント**側です．.

この[プログラム](https://github.com/HHorimoto/transform_pointcloud_srv/blob/main/src/transform_pointcloud_srv/client_py.py)のトピック名及びリンク名を変える必要があります．

```shell
$ rosrun transform_pointcloud_srv client_py.py
```

### サンプルプログラムの説明

+ 初めに，サービスの名前を見てください．`---`で区切られた上2つはリクエストの引数で下1つはリスポンスの結果です．

```shell
$ roscd transform_pointcloud_srv/srv
$ cat TransformPointcloud.srv
std_msgs/String topic_name # 1st Request argument
std_msgs/String target_frame # 2nd Request argument
---
sensor_msgs/PointCloud2 cloud_out # Response value
```

+ `TransformPointcloud`サービスをインポートしてください.

```py
from transform_pointcloud_srv.srv import TransformPointcloud
```

+ サービスが起動するまで待ちます.

```py
rospy.wait_for_service('transform_pointcloud')
```

+ サービスを引数を指定して呼び出して結果を受けてください.

```py
# call
client = rospy.ServiceProxy('transform_pointcloud', TransformPointcloud)
frame_msg = std_msgs.msg.String()
frame_msg.data = "base_link"
topic_name = std_msgs.msg.String()
topic_name.data = "/camera/depth/color/points"
# get
resp1 = client(topic_name, frame_msg)
```

+ あなたの用途に合わせて変換結果を以下のように使用してください.

```py
# print PointCloud data's frame_id, height, and width.
rospy.loginfo("info : frame_id = %s, height = %d, width = %d", resp1.cloud_out.header.frame_id, resp1.cloud_out.height, resp1.cloud_out.width)
```

## 参考
+ https://qiita.com/yakato_jun/items/091f36308b0662110537
Android12でデバグできなくなった

---
最近(2022/10/08)、手元のスマホをAndroid12に機種変したのですが、AndroidStudioからの実機デバグにて、インストールに失敗するという事例が出ました。

よくある<B>「INSTALL_PARSE_FAILED_MANIFEST_MALFORMED」</B>というエラー。

AndroidStudio の SDKManagerで、Androidの該当バージョンがインストールされていないとかそういう話ではなく、

マニフェストファイルの「Activity」タグに属性に<B>「android:exported="true"」</B>を入れれば、インストール/デバグできるようになりました。

---
以上
Flutter で Google Sign_in の環境分け

Flutter で Firebase Auth を利用したアプリ開発をしているときに、環境分けを試みたらえらくハマったので解決に至るまでの記録を残しておく。

まず、環境別に Firebase も用意することになるので、今までだと GoogleService-Info.plist や google-service.json をそれぞれの Firebase Project から DL して、環境別に切り替えるということが必要でったが、最近はそれが不要になったと読んだので、そちらでチャレンジしてみた。

# Dart コードのみで環境分けにチャレンジ
最初に参考にしたのはこちらの記事
[【Flutter】flutterfire_cli を使って Dart コードのみで環境分けする](https://zenn.dev/susatthi/articles/20220904-151314-flutter-fire-flavor)

説明にある通りうまく環境分けが行えたのだが、iOS シミュレーターでテストしようとすると、GoogleService-Info.plist が無いと言われる。

結果的にわかったことは、Firebase Auth で利用しようとしている Google Sign-in プラグインは Dart コードのみの初期化に未対応ということ。

>google_sign_in plugin currently doesn't support dart-only initialization and for mean time, you'll need to fallback on manual installation.

[[google_sign_in] iOS PlatformException (PlatformException(missing-config, GoogleService-Info.plist file not found, null, null)) after CLI initialization migration #96248](https://github.com/flutter/flutter/issues/96248)

ということで、ここは一旦 Dart コードのみでの環境分けは諦めて、素直に plist や json をそれぞれ用意する方法に変更する。

# 環境分け
次に参考にしたのはこちら。
[flutterでスマホアプリ開発するときに必ずやってること](https://zenn.dev/nrikiji/articles/f54c428f881997)

ただし、一度上述した DART コードのみの環境分けにチャレンジしたため、その際の環境が残っている状態だったので、xcode の Run Script を一部修正。

```
env=""

if [[ $CONFIGURATION =~ -([^-]*)$ ]]; then
env=${BASH_REMATCH[1]}
fi

if [ "${env}" == "dev" ]; then
cp -r "${PROJECT_DIR}/Runner/GoogleService-Info-dev.plist" "$BUILT_PRODUCTS_DIR/$PRODUCT_NAME.app/GoogleService-Info.plist"
elif [ "${env}" == "prod" ]; then
cp -r "${PROJECT_DIR}/Runner/GoogleService-Info-prod.plist" "$BUILT_PRODUCTS_DIR/$PRODUCT_NAME.app/GoogleService-Info.plist"
fi

/bin/sh "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
```

一通りの設定が終わり、テストすると今度は以下のメッセージでクラッシュ。
> “Your app is missing support for the following URL schemes: {REVERSED_CLIENT_ID}”

`GoogleService-Info.plist` の中にある `REVERSED_CLIENT_ID` を xcode の `URL_Types` に指定する必要があることがわかるが、ここで問題。環境別にしているので、[Google Sign-In のでべローパーガイド](https://developers.google.com/identity/sign-in/ios/start-integrating) にある方法では、１つの環境にしか対応できない。

調べてみると、どうやら xcode で `User-Defined setting` ができるので、[これを使うやり方を発見](https://stackoverflow.com/questions/59633343/how-do-you-configure-multiple-ios-url-schemes)。

Target -> Runner -> Build Settings -> + -> Add User-Defined settings 
で、`URL_SCHEME` を作成する。そうすると 各 Configuration ごとに値を設定できるので、

Debug-dev
Release-dev 
に開発環境の Firebase への接続情報を持つ `GoogleService-Info-dev.plist` の中の `REVERSED_CLIENT_ID` を指定し、

Debug-prod
Release-prod
に本番環境の Firebase への接続情報を持つ `GoogleService-Info-prod.plist` の中の `REVERSED_CLIENT_ID` を指定。

これでひとまず、環境分けの環境が整った。。
[Rails] Prefixの使い方

# 1.まずPrefixとは

URLに代わりの名前を付けて変数化したものです。

# 2.使い方

ターミナルで rails routes とコマンドを入力すると、以下のように表示されます。
```bash
       Prefix Verb   URI Pattern
                   Controller#Action
         tops GET    /tops(.:format)                                                                                tops#index
              POST   /schedules(.:format)                                                                           schedules#create
 new_schedule GET    /schedules/new(.:format)                                                                 s      chedules#new
edit_schedule GET    /schedules/:id/edit(.:format)                                                                  schedules#edit
     schedule GET    /schedules/:id(.:format)                                                                       schedules#show
              PATCH  /schedules/:id(.:format)                                                                       schedules#update
              PUT    /schedules/:id(.:format)                                                                       schedules#update
              DELETE /schedules/:id(.:format)                                                                       schedules#destroy
```
まず以下の１行について解説します。
```ruby
new_schedule GET    /schedules/new(.:format)
```
左のnew_schedulesというのがPrefixとなり、new_schedule_pathというように最後に_pathを付けるとURI Patternのパスとして使うことができます。右の/schedule/newというURLを指定したい場合には、new_schedule_pathと記述することでそのURLに飛ばすことができます。
例
```ruby
#Prefixを使用しない場合
<%= link_to "作成", '/schedules/new' %>

#Prefixを使用した場合
<%= link_to "作成", new_schedule_path %>
```
という使い方ができます。Prefixを使用した場合は''は使用しません。

また、
```ruby
 schedule GET    /schedules/:id(.:format)                                                                       schedules#show
          PATCH  /schedules/:id(.:format)                                                                       schedules#update
          PUT    /schedules/:id(.:format)                                                                       schedules#update
          DELETE /schedules/:id(.:format)                                                                       schedules#destroy
```
のように一番左に何も書かれていない場合は、上と同じpathという意味になります。/schedules/:idであれば、schedule_pathとしたいところですが、これでは同じpathが出てきてしまうため、methodを指定します。
例
```ruby
<%= link_to "削除する", schedule_path, method: :delete %>
```
ただし、デフォルトではgetがmethodとして指定されているので、getの場合は書いても書かなくても大丈夫です。

# 3.まとめ

リンクで別のURLへ飛ばしたいときには、ターミナルでrails routesコマンドを入力し、pathを確認しましょう。

参考にしたサイト
https://qiita.com/TAKA__m/items/c932ac0c07f9847ed63b