OmniAICreator/Qiita-1.07M huggingface dataset:
繊細な人のためのチーム開発 - モヤモヤを軽減させるためにトライした3つのこと

この記事は [All About Group（株式会社オールアバウト） Advent Calendar 2020](https://qiita.com/advent-calendar/2020/allabout) 24日目の記事です。

# はじめに

こんにちは、Webアプリケーションエンジニアの @jnamix です。

普段の業務では、アジャイルの方法論を取り入れたチーム開発を行っています。
そんなチームのメンバーの一人として仕事をしていく中で、モヤモヤを抱くことがあります。

例えば、メンバーとペアプログラミングやモブプログラミングをしている時。
> 「ここの実装って本当にこれでいいんだっけ？」
> 「『とりあえずやってみる』という流れになったけれど、行き当たりばったりに感じる……」

私は細かなことを気にしてしまう性格で、こうしたモヤモヤに直面することが多くありました。
もちろん、こうしたモヤモヤをチームに共有することで業務やアウトプットの改善に繋がれば良いのですが、そのモヤモヤを上手に言語化できなかったりすると、かえってチーム内に混乱を招いてしまうことがあります。

そこで今年は、自分がモヤモヤしすぎないために、そしてモヤモヤしてもきちんと言語化できるように、以下の3つのことをトライしてみました。同じような課題を抱えている人の参考になれば幸いです。

# その1. 日記を書いてみる
チームでの振り返りとは別に、個人的な振り返りとして、日記を書く習慣を付けました。

その日に抱いた素直な気持ちを言語化しておくことで、どんなところにモヤモヤを感じるか（同時に、どんなところにやりがいや嬉しさを感じるか）を把握することができます。それをもとに、次の日からのアクションについて方針決めすることもできるため、オススメの手法です。

# その2. 仮説思考でやってみる
プロダクトの開発をしていて技術的にわからないことなど、不確実なことの壁に直面した時、どうすれば良いか分からずモヤモヤしたり、解決手順の完璧さを求めて調査の長い旅に出てしまったりして、作業の手が止まってしまうことがあると思います。
チームで動いている場合は、こうした不確実な課題に対して「とりあえずこの方法でやってみよう」という流れになり、今度は「行き当たりばったりになりそうだ」と感じてひとりモヤモヤしてしまうこともあるでしょう。

そこで取り入れたいのが経験主義に基づく仮説思考の考え方[^1]です。

調査や勉強を通じて理解しておかなければならない理論やルールももちろん存在しますが、仮説を立てて実際に行動し、検証してみないとわからない課題も多く存在します。検証の結果、たとえ仮説が正しくなかったとしても、「立てた仮説が正しくなかった」という事実が明らかになり、次のアクションに繋げることができます。
私は実際にこの考え方を取り入れて、作業の手を止める機会を減らすことができました。チームで動いていてどうしても引っかかるところがある場合は、メンバー同士で検証したい仮説を確認して、そのためにできること（＝自分たちがコントロールできること）を整理しておけば、チーム全体でもレベルセットができてなお良いです。


# その3. 一旦、設定したゴールのことだけを考えてみる
ある要件（ゴール）の達成を目指して開発を行っていると、その途中で「そもそも、ここの画面遷移やメッセージの内容ってこれで良かったんだっけ？」などと、追加の課題を発見することがあります。これらの課題もまとめて解決すれば、さらなるサービスの改善につながるので、とても良いことに見えます。
しかし、そうした課題が発見されるたびに検討を繰り返していると、課題が散らかってしまって、当初のゴールが見え辛くなるモヤモヤに陥ります。本当は「登録フォームに項目を追加したい」だけだったのにも関わらず、それに向けては一歩も進めない状態になってしまうのです。

そんな時は、発見した課題を別途メモしたり、作業チケットとして追加しておいたりして、一旦横に置いておくのが有効です。そして、設定したゴールのことだけに集中して検討や開発を進めていきます。それでも課題がいくつも見つかりそうな時は、検討する時間をまとめて作ると良いでしょう。
この考え方は最近まで意識できていなかったことですが、チーム全体で実践する機会があり、結果として前に進むことができました。「そもそものゴールってなんだっけ？」と立ち返ってみることの効果を実感できた瞬間です。

# 終わりに
今回は、細かなことを気にしてしまう性格の自分がチーム開発におけるモヤモヤを軽減させようとトライしたことについて、3つ紹介しました。

- 日記を書いてみる
- 仮説思考でやってみる
- 一旦、設定したゴールのことだけを考えてみる


これらの3つはチームメンバー個人としてできることですが、チーム内での振り返りや1on1の機会があるのなら、それを活用して「こんなモヤモヤがあるよ」と共有することもやはり大切だと思います。メンバー同士で同じ考えを持っていることに気付いたり、新たな気付きを与えたりすることで、より良いチームにするための議論に繋げられるからです。

一人で抱えこみすぎず、良いチーム開発ライフを！
ここまで読んでくださりありがとうございました。


[^1]: 経験主義と仮説思考に関しては、広木大地氏の『エンジニア組織論への招待』が参考になりました。
既存のFBXファイルにボーンを入れてゆらゆらさせたかった

はじめに、この記事を読んでもVCIをゆらゆらさせることができません。
（できるだろうと思ってやってみたらできなかった…どなたか解決方法ご存知でしたら教えてください）
（VRMにつけるアクセサリなんかはこの方法でゆらゆらさせられます）

boothとかで購入した3Dデータ、ボーンが入ってないことがありますよね。
揺らしたいけど揺らせない、そんな人のために書きたかった記事です。

# この記事は、こんな人向けに書いています
- Blenderがちょっと触れる
- Unityを使って自分でVCIを出力できる

# 下ごしらえ（骨を入れる）
1. Blenderを起動して、キューブをdelで消してインポートでfbxを読み込みます。
1. 白赤の浮き輪を左クリックで揺らしたいやつの原点に設置します。
![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/935496/aa53eb23-5283-fe78-7254-6f05dded489b.png)
今回は口先にもっていきました
（3D素材は[【cluster用アイテム】生秋刀魚](https://booth.pm/ja/items/2407428) からお借りしてます）。
1. 追加 > アーマチュア > 単一ボーン を選択します。
![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/935496/d91cc6a7-46c9-150a-1177-bd02027e17ed.png)
1. ボーンが白赤うきわから出てくるのでいい感じの大きさにして中心に埋め込みます。
![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/935496/ff9ddf13-951d-0efb-1aa5-6544ca505088.png)
1. ボーンを埋め込んだら見えなくなってしまうので、人型のアイコンをクリックしてレントゲンにチェックを入れます。
![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/935496/f1282470-1d15-8099-a29b-b04309757d1c.png)
1. 編集モードにして、四角錐の先端の丸を選択します。
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/935496/98742fa2-df38-1ec2-8246-9479d77cff91.png)
1. Eを押すと、その先端からボーンが出てくるので、同様にして埋め込みます。
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/935496/b3e3dc2f-018a-369b-8034-3f1feb2552da.png)
（執筆時点でVCI SpringBoneはRootBoneから10個までしか連結できないので注意） 
1. オブジェクトモードにして、本体（サンマ）を選択→Shiftを押しながらさっき生成したボーンを選択します。
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/935496/32ecd6cf-e22e-ee35-eda1-584aa5bc7170.png)
ボーンがオレンジ、本体が赤っぽい枠になっています。
1. ctrl+pを押すとなんか聞かれるので、「自動のウェイトで」を選択します。
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/935496/775bda9d-c61a-fc1f-2cde-cf6a74436f46.png)
ウェイトが思ったように乗らなかったりしますがそこは各自で頑張ってください。
1. エクスポートからfbxで出力します。
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/935496/c2294c8f-76cb-1009-1b72-20f112e4a940.png)
この時、エクスポートの設定で「メイン」タブの以下の項目をいじります。

・「スケールを適用」を「すべてFBX」
・「エンプティ」、「アーマチュア」、「メッシュ」、「その他」をShiftを押しながら選択
あとは「アニメーション」タブの「ベイク済アニメーション」のチェックを外したりしますが、そこはお好みで（よくわかってない）

# ゆれもの設定（エアプ）
1. 詳しいやり方は[公式wiki](https://virtualcast.jp/wiki/doku.php?id=vci:component:sdk:springbone)を参照してください（VCI v2.25 以降である必要があります）
1. 階層の一番上（VCI Objectが付与されているやつ）に VCI Spring Bone を付与します。
![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/935496/cb28eb33-8766-118b-d367-36139b35d797.png)
1. Root Bones の Size を1にします。
![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/935496/088493f6-1f41-1254-29b5-8a6bad931ee4.png)
1. Root Bones の Element 0 にさっきBlenderで追加したボーンである Armature をドラッグします。
![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/935496/b4ba02a9-d289-3e15-c48a-27a0af9fdb6a.png)
1. ゆれ具合を調整するパラメータをいじります。
1. あとは出力して、おわり！…だったらよかったのですが、冒頭に書いているとおり、これではゆれませんでした。どうして
Nuxt.jsの環境構築してみた！

# きっかけ

先日のボーナスで欲しかったMacbookを買いました。
元々はiOSアプリの勉強と思って購入しましたが、
興味のあったNuxt.jsで何かアプリ作ってみよう、ということでまずは環境構築から！！

# 準備
## Nuxt.jsを動かす

まずnuxtのプロジェクト作成コマンドを叩くためのNpmを入れる。
以下の手順で構築する
1. Command Line Tools

```
$ xcode-select --install  
```

2. Homebrew install

```
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

brew -v でバージョン確認出来たらOK！

3. Nodebrew install

```
$ brew install nodebrew
```
nodebrew -vでバージョン確認出来たらOK!

4. Node.jsとNpm install

```
# このディレクトリを作っておかないとエラーになる
$ mkdir -p ~/.nodebrew/src

# latestは最新版という意味
$ nodebrew install-binary latest

# インストールした後で使用を宣言
$ nodebrew use latest

#パスを通す
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
$ source ~/.bash_profile
```

## Nuxt.jsのプロジェクトを作成して、動かす

以下のコマンドで作成

```
$ npx create-nuxt-app <project-name>
```

動作確認

```
$ cd <project name>
$ npm run dev
```

## できた！

![スクリーンショット 2020-12-23 21.14.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587970/42710b1e-3275-3db8-6c56-71e7cc4c6325.png)

次回からはTODOリスト作成を進めてきます！
iOSアプリ開発でぶち当たるエラー処世術〜Xcode編〜


# エラー処世術
アプリケーション開発を行なっていると必ずぶち当たるエラー．検索しても解決策が得られない．開発が滞ってしまい，やる気が削がれる．といったことは誰しもが経験することだと思います．
私自身もその一人で，毎日技術力不足を痛感させられます．この記事では，Xcodeで開発する際に効率よくエラーの解明を行い，圧倒的成長を遂げるための処世術を少し紹介したいと思います．

# この記事の対象者
- iOSアプリ開発を始めたての方（Xcodeでの）
- LLDBって何？デバッガって？という方
- 追加したUI部品(button, viwe...)が表示されない！どこいったの？という方

# 処世術1 〜LLDB〜
LLDBとはXcodeのデフォルトデバッガです．皆さんお馴染みの画面の下の方にいます．デバッガとは不具合の原因を探すお手伝いをしてくれる機能やソフトを指します．基本的にはプログラムを一時停止させたりしてエラーを見つけます．

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571510/e9bed30a-15d8-136d-8503-087109f166e9.png" title="スクショ1">

上は，お馴染みのXcodeの画面ですが．画面下の部分がデバッガです．ここでは，14行目にブレークポイントを設定して，プログラムを一時停止させています．行番号をクリックするとブレークポイントを設定できます．解除は，ブレークポイントを掴んでコード上にドラッグするとできます．
デバッガの右の画面の

```
(lldb)
```
と書かれている部分にコマンドを入力することでエラーの原因を探ることができます．

## po コマンド
いちばん使うことになるであろうコマンドです．poは変数を出力してくれるものです．
例えば，以下のように，19行目にブレークポイントを設定した場合．
![スクリーンショット 2020-12-23 20.38.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571510/3c7e7d66-33d6-f2a2-532b-ba2558da28d2.png)

```
po lemon
```
と入力すると，その時点での変数の値を確認することができます．
この例だとパッとしませんがいつか役に立つと思います．

# 処世術2 〜UI部品どこ？？〜
追加したはずのbuttonがシミュレーションを起動すると消えている．．どこいったの？コードミスってる？なんて経験あると思います．これは案外簡単なミスであることがほとんどです．ただ慣れないうちは，なぜ無いのか原因を解明するのに時間がかかってしまいがちです．(その時間も成長に繋がる気もしますが，無いに越したことは無いでしょう．)
この問題の対処法のうちの１つを紹介します．

## Xcodeの隠れた機能 〜ビューデバッガ〜
ビューデバッガとは，現在のビュー階層を3Dで確認することができる機能です．
シミュレーターを起動しているときに，
![スクリーンショット 2020-12-23 20.42.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571510/af40dbc0-dc99-7406-fb88-bdc8469fa8d1.png)
ここをクリックすることで，確認することができます．
![スクリーンショット 2020-12-23 20.45.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571510/671d95d6-a8cb-a55e-9585-b69dad135aac.png)
こんな感じで．
この例だと，あまりビューデバッガに恩恵を感じませんが，大規模なアプリになる程利用する機会は多くなると思います．
この機能を使えば，追加したUI部品がどこにあるのか，他のUI部品の下に隠れていないかなどを確認することができます．
「ビューデバッガのおかげで迷子になっていたUI部品を探し出し，救出することができた！」ということが結構あります．

# おわりに
「アドベントカレンダーかぁ、何書こう．」
ギリギリまでテーマが決まらず投稿が遅れてしまいました．個人的に辛いこともあり，記事を書かずに逃げ出そうかという考えもよぎりました．最初は義務感で書き始めましたが，良い気分転換になり，悩んでいたことも少し気が楽になった気がします．定期的なアウトプットって大事だなあと実感しました．（Qiitaさん，パソナテックさんありがとう！）

今回，iOSアプリ開発を始めた時に知っておきたかったことを書きました．私もまだまだ初心者なので，間違いがあれば指摘してください．よろしくお願いします．自分の成長に合わせて内容もどんどん更新していくつもりです．そして，この記事が悩みを抱えていた方の助けになれば幸いです．

[]( 記事を書く過程で，情報を整理，調査したりすることで，新しい発見や，自分を見つめ直すきっかけになりました．書くきっかけをくださったパソナテック様ありがとうございます！ )
初学者が学んだRecycler View の使い方 

はじめまして、kotlinを使ったandroid開発を勉強している初学者です。

ToDoアプリをRecyclerViewを使って開発がしたかったのでRecyclerViewの勉強をしたので簡単にアウトプットしたいと思います。

RecyclerView→Viewを再利用してリスト、タイル状に表示してくれるものです。
手順としては以下の通りです。

(1)build.gradleのdependciesに、implementationを追加(libararyの追加)
(2)LayoutManager(ライブラリ追加時に実装されるので特に操作の必要はない)
(3)Adapter　
・リストに表示するデータの保持とRecyclerViewにデータが何個あるかを伝える。
・ViewHolderという型でビューを作成
・ビューにデータをセットする
![スクリーンショット (309).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/975701/4316b03b-90a1-068f-4491-0de969e315ea.png)




(4)完成品

左のようにリストを300個表示してみました

![スクリーンショット (307).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/975701/f28e2e76-7971-030e-94c3-12515d0493af.png)


以上簡単ですが、RecyclerViewの実装をやってみました
pythonインタプリタ起動時の決まった処理の追加

# 環境
- windows 10 pro
- python 3.9.0

# 目的
pythonのインタプリタで起動するたびimport文を書くのが面倒であったため
起動と同時に自動でインポートをしてくれる設定の方法を調べました。

# やりかた
homeのディレクトリ（`C:\Users\<username>\`）とかに以下のようなファイルを作成します

```python:.pythonstartup.py
from datetime import datetime
date = datetime.now()
```
とか記述しておいて
環境変数に以下を設定

```
setx PYTHONSTARTUP C:\Users\<username>\.pythonstartup.py
```

あとは、コマンドプロンプトに`python`と打つだけでファイルの内容が実行されます。

```
>python
Python 3.9.0 (tags/v3.9.0:9cf6752, Oct  5 2020, 15:34:40) [MSC v.1927 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
2020-12-23 20:35:52.167887
>>> 
```

`pythonstartup.py`のファイルにいつもよく使うようなモジュールのインポート文を書いておくと便利です。
あとは環境変数でテスト中のモジュールとかのパスを設定してしまえばテストしかするときも便利です
データ分析環境の構築/選定で気にすべき 12 の観点

データ分析プロジェクトを開始するときに、分析環境はどうするか。

ローカルマシンで Jupyter を動かすとか、Google Colab を利用するとか、Spark クラスタを構築するとか、選択肢は数多くありここには書ききれない。それぞれの選択肢にはメリデメがあって、データ量や分析手法やチーム構成やその他諸々の制約に応じてそのプロジェクトに最も適した分析環境を選択すべきである。

今回はデータ分析環境を構築する際に「どんな選択肢があるか」はひとまず置いておいて「どんな観点で考えるべきか」をまとめていく。

すべての観点を完璧に満たすことはできないので、「今回のプロジェクトではこれは重要だけどこれはどうでもいい」というように検討する材料にできればいい。

## 1. ストレージの耐久性
- データや Notebook ファイルを消失してしまうリスクがどの程度許容できるか

30分後にコーヒーをぶちまけてマシンごとデータがお亡くなりになるかもしれない。
ローカルマシンのストレージは信用してはいけない。

今日分析して明日プレゼンをするみたいなスピード感ならともかく、そうでないなら Notebook やデータは耐久性の高いクラウドストレージやデータベースなどに保存したほうがいいだろう。

## 2. ストレージ容量
- 将来的に必要なストレージ容量が確保されているか

データが増え続けていくプロジェクトの場合、今は大丈夫でも1年後に扱えなくなってしまうとまた分析環境を見直さないといけなくなる。

## 3. スペック
- 利用するアルゴリズムとデータ量に対して、CPU やメモリのスペックは十分か
- GPU や TPU を利用する必要があるか

## 4. ネットワーキング
- 利用するデータベースや API に対して、計算するマシンからアクセスすることが出来るか
- 分析作業に影響のないレベルで通信速度が出せるか

例えば Google Colab を利用するとき、ホストランタイムではグローバル IP アドレスを固定することができないので、IP アドレスでアクセス制限をかけているリソースに対してアクセスすることができない。

例えば US リージョンにあるデータソースに対して計算するマシンが東京にあったりすると、データロードが遅くてストレスになるかもしれない。

## 5. データ共有
- Notebook をチームメンバーや顧客に共有することができるか
- データをチームメンバーや顧客に共有することができるか

Google Colab や Databricks といったサービスはこの点で非常に便利だと思う。

## 6. セキュリティ
- 柔軟な権限設計ができるか
  - Notebook やデータに対して、必要最小限のメンバーだけがアクセスできるように設定できるか
  - Notebook やデータに対して、Read / Write 権限を個別に設定できるか
- 何かあったときに管理者が対応できるか
  - PC 紛失時に情報漏えいリスクを最小化出来るか
  - 退職者のアクセス権限を剥奪できるか
- 不正アクセスや脆弱性に対するリスクがどの程度あるか
- 自社や顧客のセキュリティポリシーを満たしているか

例えば1台のつよい物理サーバに Jupyter サーバを構築して複数の分析プロジェクトで共用にしたりすると、データや Notebook の権限管理がまったくできなくて非常に良くない。

## 7. スケーラビリティ
- よりつよいマシンパワーが必要になったときに課金すればスペックを高めることが出来るか

物理サーバはこの点できびしい。

## 8. 環境の再現性
- チームメンバーが増えたときに同じ環境を作って渡せるか
- 顧客に納品する際に再現性のある環境を提供できるか

## 9. 自由度
- 必要なツールやモジュールをその環境で動作させられるか

マネージドサービスだと Python のバージョンが固定だったり入れれないモジュールがあったりとかする。

## 10. 学習コスト
- 新メンバーがすぐに分析作業に着手できるか

## 11. 利便性
- 分析作業の妨げとなる面倒な制約などがないか

Google Colab がわかりやすくて、様々なメリットはあるものの、ホストランタイムの12時間ルールは面倒だし Google Drive との連携も面倒だし、制約が多くてデメリットも多い。

## 12. 運用コスト
- 費用が予算内に収まるか
- インフラ担当者の工数がかかりすぎないか

Databricks はすごい便利と思うけど、費用が高いし、インフラ担当者の手間もかかるので悩ましい。
Vundleでプラグインを入れてカラースキームを変更する

# はじめに
自宅での開発（というとリモートワークと区別が付きませんね）でWSLを使っているんですが、Vimのデフォルトのカラースキームが見づらいことこの上ない（下図）。コメント行に至っては画面に近づかないと読むことすら難しいです。
![スクリーンショット (89).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507842/650a28a3-6114-6828-2f50-65f8454e4e3c.png)
`:colorsheme`コマンドで最初から入っている他のカラースキームも試してみたんですが、どれもしっくりきませんでした。

そこでVundleを使ってプラグインを入れていい感じのカラースキームにしようと思ったんですが、如何せん`.vimrc`の編集に慣れていなかったせいで少し躓いたので、備忘録として記事を残しておきます。

# Vundleの入れ方
以下を参照。
[vimのプラグインの入れ方（Vundle） - Qiita](https://qiita.com/nordliches-klang/items/caf939e3ef561a4491e8)

# カラースキームの追加
ここでは`iceberg`を入れようと思います。落ち着いた配色で目に優しそう。
[GitHub - cocopon/iceberg.vim: Bluish color scheme for Vim and Neovim](https://github.com/cocopon/iceberg.vim)

`.vimrc`を以下のようにします。

~~~vim
set nocompatible
filetype off

set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()

Plugin 'VundleVim/Vundle.vim'

" !! write plugins here !!
Plugin 'cocopon/iceberg.vim'

call vundle#end()            " required
filetype plugin indent on    " required

:syntax on
" colorscheme iceberg
~~~

１行目の`set nocompatible`は書かなくても特に問題ないです。
[set nocompatibleはもういらない - Qiita](https://qiita.com/yu_suke1994/items/e0a19574994a57c8fe17)
[vimrcにはやはりset nocompatibleが必要 - Qiita](https://qiita.com/hugashy/items/3f01b688382d2c364063)：「`-u`オプションを付けてVimを起動する人だけ書けばいい」という内容

`" !! write plugins here !!`コメントの下にインストールしたいプラグインを列挙していきます。

`.vimrc`を保存して閉じたら、コマンドラインで以下を実行します。

~~~
vim +PluginInstall +qall
~~~

これで`~/.vim/bundle/`配下にプラグインがインストールされるので、再度`.vimrc`を開いて`" colorscheme iceberg`のコメントを外し、`:wq`で閉じます[^1]。余談ですが、私はこの`colorscheme`の行を書くということをわかっていなかったせいでかなりの時間を溶かし、一度カラースキームの変更を諦めました。

そして任意のファイルをVimで開くと、下図のように新しいカラースキームが反映されています。

![スクリーンショット (88).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507842/127fa1e5-2ab2-6553-ee7c-4147dd647845.png)

ちょっとコードハイライトがおとなしすぎるかもしれませんが、変える前よりは遥かに読みやすいですね。

めでたし。

# 参考文献
[vimのカラースキームの設定・編集方法（初心者〜上級者） - Qiita](https://qiita.com/sff1019/items/3f73856b78d7fa2731c7#colorscheme-%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)

[^1]: 最初からコメントインしていてもプラグインのインストールはできますが、余計なエラーメッセージが出ていい気分じゃないのでこのような手順にしました。
[Cocoa][Swift]AirPlay 2 について

<p>HomePod miniは2台でステレオ再生ができるということで購入したのだが、使ってみたところ、それはAirPlay 2を利用した場合だった。MacintoshにレコードプレーヤーをLINE入力で繋いだので、レコードがステレオで再生されることを夢見たのだが、サウンドの入力を出力に繋ぐために利用しているQuickTime PlayerはAirPlay 2に対応していないので、ステレオ再生できない。そもそも、QuickTime Playerを使う必要があるということも面倒なので、レコードプレーヤーの音声を再生するアプリを制作作するため、AirPlay 2 に対応する手順を調べた。<p></p>

<p>AVAudioSessionのroute-sharing policyに .longForm を設定する</p>

<pre><code>let audioSession = AVAudioSession.sharedInstance()
try audioSession.setRouteSharingPolicy(.longForm)
</code></pre>

<pre><code>let audioSession = AVAudioSession.sharedInstance()
try audioSession.setCategory(AVAudioSessionCategoryPlayback,
                             mode: AVAudioSessionModeDefault,
                             routeSharingPolicy: .longForm )
</code></pre>

<p>AVRouteDetectorを使って出力先があるかどうか調べて、AVRoutePickerView で出力先を選択する。</p>

<p>MPRemoteCommandCenter を使って再生が制御できるようにする。再生中のメディアの情報は MPNowPlayingInfoCente から得る。</p>

<p>AVPlayer 又は AVQueuePlayer を利用するか、 AVSampleBufferAudioRenderer と AVSampleBufferRenderSynchronizer で再生を行う。</p>

<p>情報は少ないが、サンプルコードを見つけた。</p>

<ul>
<li><a href="https://developer.apple.com/documentation/avfoundation/media_playback_and_selection/integrating_airplay_for_long-form_video_apps?changes=_3">Integrating AirPlay for Long-Form Video Apps</a></li>
</ul>

【関連情報】
<a href="https://developer.apple.com/documentation/avfoundation/media_playback_and_selection/getting_airplay_2_into_your_app">Getting AirPlay 2 into Your App</a><br />
<a href="https://developer.apple.com/documentation/avfoundation/media_playback_and_selection/integrating_airplay_for_long-form_video_apps?changes=_3">Integrating AirPlay for Long-Form Video Apps</a><br />
<a href="https://qiita.com/advent-calendar/2020/cocoa">Cocoa Advent Calendar 2020</a><br />
<a href="https://cocoa-kanto.connpass.com/">Cocoa.swift</a><br />
<a href="https://www.facebook.com/groups/cocoa.kanto/">Cocoa勉強会 関東</a><br />
<a href="http://www.bitz.co.jp/weblog/">Cocoa練習帳</a><br />
CodeBuildのビルド環境にSessionManagerで入ってみた

CircleCIだとSSHを使用してビルド コンテナにアクセスできますが
CodeBuildも 2020年07月からSessionManagerを使って中に入れるようになっていたので使ってみました。
https://aws.amazon.com/jp/about-aws/whats-new/2020/07/aws-codebuild-now-supports-accessing-build-environments-with-aws-session-manager/

普段ビルドプロジェクトのソースはCodePipelineにしているため、デバッグ用に個別実行する時はソースをS3変更する必要がありました。(後述)

# やりかた

[公式ドキュメント](https://docs.aws.amazon.com/ja_jp/codebuild/latest/userguide/session-manager.html) に書いてある通りですが。

## 1. BuildProjectのサービスロールに権限を追加

```
{
  "Effect": "Allow",
  "Action": [
    "ssmmessages:CreateControlChannel",
    "ssmmessages:CreateDataChannel",
    "ssmmessages:OpenControlChannel",
    "ssmmessages:OpenDataChannel"
  ],
  "Resource": "*"
}
```

## 2. ビルド一時停止するコマンド(codebuild-breakpoint)をbuildspecに追加しておく

```
phases:
  build:
    commands:
      - codebuild-breakpoint ←追加
      - python -m unittest discover tests
```

## 3. 「Enable session connection」にチェックを入れて実行

1.  [Advanced build overrides (高度なビルドの上書き)] で環境上書き設定を表示させる
![CodeBuild_-_AWS_Developer_Tools-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43631/4b0b70d0-06ad-63b6-ec06-0cd2eed37bd6.png)
![CodeBuild_-_AWS_Developer_Tools-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43631/bf7bdcbb-7744-b391-4b85-c61ff829865a.png)

2.  [Enable session connection(セッション接続を有効にする)] にチェックを入れる
![CodeBuild_-_AWS_Developer_Tools-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43631/5c1a1d65-0a87-05d8-cffb-0714a9cc6fd1.png)

### (オプション)ソースの変更

例えば普段はCodePipelineをソースにしているプロジェクトで、そのままマネコンから実行しようとするとエラーが出ます。
CodePipelineで直前に失敗したビルドのアーティファクトをS3ソースとして直接指定してやることで同じソースから実行できます。

1. 直前に失敗したビルドの Srouce Vesionからバケットとアーティファクトファイルを確認
![CodeBuild_-_AWS_Developer_Tools-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43631/d3e8411e-0c35-d722-4446-e63d9c8d2c48.png)


2. それを手動実行のビルドのソースとして指定
![CodeBuild_-_AWS_Developer_Tools.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43631/2c12041f-7718-bc3a-4fad-064a6abbe306.png)



## 4. codebuild-breakpointのところで止まるのでブラウザから入る

接続可能な状態になると Buils statusの右下に Session Manager へのリンクが出現するのでクリック

![CodeBuild_-_AWS_Developer_Tools.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43631/a2c23ba4-b391-c162-c52a-4127e2ac3dfa.png)

codebuild-breakpointで止めなくても現れますが、入ろうとしたらビルドが進んで終わっちゃったりしたので、止めて入るのがいいかなと思います。

![AWS_Systems_Manager_-_Session_Manager_と_AWS_CodeBuild_が、AWS_Session_Manager_でビルド環境へのアクセスをサポートするように.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43631/f2ab3995-6c02-c30e-66f7-9c6007529aaf.png)

## 5. おわったら「codebuild-resume」でビルドを再開して出る

CodeBuild側からみた実行状況
![CodeBuild_-_AWS_Developer_Tools.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43631/3caecc17-ac90-bba5-6887-97aabb4f8eda.png)

ローカルで成功していたはずのunittestが失敗していましたが、中に入って調べたおかげで原因解明できました。やったー！

# 備考

普段CodePipelineからCodeBuildを実行しているんですが、その場合「Enable session connection」にチェックを入れる相当の設定が見つけられなかったので、CodeBuild単独で動かして中に入っています。

普段から「codebuild-breakpoint」をbuildspecに仕込んでおいて、デバッグが必要なときだけCodeBuildから「Enable session connection」有効にして実行する。という運用がいいんですかね。

※「Enable session connection」してない場合はcodebuild-breakpointおよび codebuild-resume コマンドは無視される仕様。
ショートカットキー/インデント/Git

12月23日PCゼミ
PCは本来はマウスなしで操作できる(キーボードのみで操作できる)。
###ctrl + a 全選択
####ctrl + f 検索　コマンドプロンプトでも使える　find
ctrl + d 上のセルを複製
##ctrl + r リロード
#####ctrl + b 太文字
#####ctrl + w ブラウザのタブを閉じる
#windows + v 過去の履歴からペースト
ctrl + shiht + v 書式を合わせてペースト
ctrl + enter 送信
##ctrl + shift + t 閉じたブラウザを復元
##ctrl + t タブを増やす
###F4 直前の作業を繰り返す
Esp 編集状態にあるものをなかったことにできる
###windows + shift + s 選択してスクリーンショット
#shift + tab tabキーの反対側へ 
#alt + tab ウィンドウを移動
#windows + ctrl + ←→　デスクトップを移動
gitでのペーストは shift + ins
CloudFormationでACMを使用し, 外部で作成したSSL証明書をインポートすることはできない.

タイトルのままです。

CloudFormationはYAML形式で記述することが可能です。
※下記のコードは一例です。

```yaml

AWSTemplateFormatVersion: '2010-09-09'
Description: ACM
mycert:
  Type: AWS::CertificateManager::Certificate
  Properties:
    DomainName: example.com
    DomainValidationOptions:
          - DomainName: example.com
            ValidationDomain: example.com
```

ですが、筆者の執筆時点では、CloudFormationのACMをYAML形式で記述し、外部からSSL証明書をインポートすることはできませんでした。

ACMに外部で作成したSSL証明書をインポートする際には、AWS CLI を使用してインポートすることをおすすめします。
#参考記事
・[AWS::CertificateManager::Certificate](https://docs.aws.amazon.com/ja_jp/AWSCloudFormation/latest/UserGuide/aws-resource-certificatemanager-certificate.html)
・[ACMに外部で作成したSSL証明書をインポートする方法（CLI）](https://docs.aws.amazon.com/ja_jp/acm/latest/userguide/import-certificate-api-cli.html)
PHP foreach 参照渡し 罠

データの出力処理で、最後の行が出力されず、代わりに最後から2番目の行が2回出力されるというバグが起こりました。
調べてみると、foreachで陥りがちなバグであることがわかったので、対応して得たことをまとめました。

## 事象
$arrayの要素を、すべて10倍したいとします。
配列の値をforeachの中で変更したいとき、
変数の前に「&」を付けることで、参照渡しで値を設定することができます。（1）
そのあとに、出力処理のために再度foreachしました。（2）

``` bug.php
<?php

$array = array(10, 20, 30, 40);

// (1)
foreach ($array as &$value) {
  $value *= 10;
}

// (2)
foreach ($array as $value) {
  var_dump($value);
}
```
出力されたものは、

int(100)
int(200)
int(300)
int(**300**)

と、意図しない結果になっていました。
「！？」と思いましたが、ちゃんと原因がありました。


## 原因はforeachの参照渡し
(1)のforeachを抜けたところの配列の中身を見てみると、

``` test.php
<?php

$array = array(10, 20, 30, 40);

// (1)
foreach ($array as &$value) {
  $value *= 10;
}

var_dump($array);

// (2)
// foreach ($array as $value) {
//   var_dump($value);
// }
```
こうなっています。

array(4) {
  [0]=> int(100)
  [1]=> int(200)
  [2]=> int(300)
  [3]=> &int(400)
}

最後の要素にこっそり付いている「&」は、
「配列に含まれる要素の一部が参照（リファレンス）されている」ということを意味します。

つまり、

「**\$value に代入すると、\$array\[3\]を書き変られる状態が、foreaehを抜けた後も続いている**」ということになります。
今回の場合、2回目のforeachでも \$value に代入しているので、$array[3]が書き変わってしまっていたのが原因でした。

### 配列が壊れる過程
2回目のforeachで \$array[3]の身に何が起こったのか、順を追って整理しました。

| ループの順番 | foreach (\$array as \$value)で起こること | \$array\[3\]の値 |
| --- | --- | --- |
| array\[0\] の番 | \$value ( = array\[3\] = 400 ) に、array\[0\] ( = 100 ) を代入 | 400 から 100 に変わる |
| array\[1\] の番 | \$value ( = array\[3\] = 100 ) に、array\[1\] ( = 200 ) を代入 | 100 から 200 に変わる |
| array\[2\] の番 | \$value ( = array\[3\] = 200 ) に、array\[2\] ( = 300 ) を代入 | 200 から 300 に変わる |
| array\[3\] の番 | \$value ( = array\[3\] = 300 ) に、array\[3\] ( = 300 ) を代入 | 300のまま |

400が入っていると思っていた$array[3]の値が次々に書き変わり、最終的に、直前の要素が入っていたということがよく理解できました。


## 対策①
対策を調べると、たくさんの人にunset($value)すればいいんだよと言われます。

``` unset.php
<?php

$array = array(10, 20, 30, 40);

// (1)
foreach ($array as &$value) {
  $value *= 10;
}
unset($value);

// (2)
foreach ($array as $value) {
  var_dump($value);
}
```

たしかにこれで解決できます。
しかし、unsetを書き忘れる危険性があります。
複数名でコードをメンテナンスするとなると、なおさらです。

## 対策②
そもそもforeachで参照渡しをしなければ起こらないバグなので、
参照渡しにするのではなく、\$arrayを書き換えるという方法をとりました。

``` key.php
<?php

$array = array(10, 20, 30, 40);

// (1)
foreach ($array as $key => $value) {
  $array[$key] *= 10;
}

// (2)
foreach ($array as $value) {
  var_dump($value);
}
```

対策②のほうが安心できます。
foreachでの参照渡しは、必要でなければ使わないほうがよいと思いました。

---
参考：https://qiita.com/buntafujikawa/items/f192d724a3c714f39c45
cssでスクロールされすぎないようにする

Webサイトによっては画面トップでタッチパッドを２本指で上から下にタップすると白い領域が表示されちゃいます。

over scrollingって言うみたいですが最近になってやっと修正方法がわかりました。
フロントやってる人からすれば常識なんでしょうけれども、知らない悩んでしまうのでメモに残します。

###対応策はcssをちょっと追加するだけ。

```site.css
html {
  overflow: hidden;
  height: 100%;
}

body {
  overflow: auto;
  height: 100%;
}
```

以上です。簡単ですね。
私はググったとき目から鱗でした。

###追記
なぜかこのcssいれるとpagespeed insightsのスコアが上昇しました。
理由が分からない・・・
Slackのステータスを変更

### 初めに
弊社では現在、新型コロナウイルス感染症対策のためチームごとに出社日を分けて出勤率を下げるということをやっています。
リモート勤務の日はスレッドに開始の連絡とステータスを勤務中に変更するというルールがあります。
ステータスはコントロール＋シフト＋Yで変更できますが、
それが面倒なので開始します。と送信したらステータスも変わるようにしたいです。

そのためには特定のチャンネルで開始しますというメッセージが送信されたことを受け取って、ステータスを変更する必要があります。

### 今回の範囲
今回はapiを叩いてステータスを変えてみたいと思います。

### 実践

vscodeの拡張機能のRest Clientを利用してステータスを変えてみようと思います。

まず、トークンが必要なので[slack app](https://api.slack.com/apps)を作成します。
リンク先でcreate appをします。トークンでちょっと躓きました。

app name と　ワークスペースを選択します。
すると下の画面になります。

![slack権限ページ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/650889/b7329ae5-75c4-fbe1-3e01-fb553c1865c0.png)

Permissionsを選択すると以下の画面、

![slackトークン取得ぺージ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/650889/b666a6e4-b32d-79aa-52ff-01f7d9057288.png)
![slackトークン取得ぺージ2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/650889/582b5523-0b4f-3680-fb5d-d0ad1f1f9238.png)


User Token ScopesのAdd an OAuth Scopeを押してuser.profile.writeを選択します。

すると
![トークン追加.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/650889/e4ea5a7d-65b9-1e95-015c-bf39e9575147.png)

上にバナーがでて成功を教えてくれます。
しかしここで保存ボタンが見つからなくてあれれ？となったのですが、Install to Workspace をクリックして許可をするとトークンが画面に現れました！
私はここでかなり探しました。

これでトークンが入手できたので実際にリクエストをしてみます。

### API叩く

```
POST https://slack.com/api/users.profile.set
Content-Type: application/json
Authorization: Bearer xoxp-から始まるユーザートークン
{
  "profile": {
    "status_emoji": ":heart:" ,
    "status_text": "ハート"
  }
}

```

これだけでステータスを変更することができました。

思ったよりも簡単にステータスを変更することができました。

ドキュメントにはほかにもたくさんのスコープがあり、いろいろできそうです。
自分がやりたいことはチャンネル内の自分が送信したメッセージを取り出してそれをみてステータスを変更するということなのですが、エンタープライズのみといわれたのでこれにて終了します。
無料でも実現できそうだぞという情報や、訂正、アドバイスなどあればコメント欄で優しく教えてください。

お読みいただきありがとうございました。
Azure Kubernetes ServiceでAzure Network Policyを試してみた

[求ム！Cloud Nativeアプリケーション開発のTips！【PR】日本マイクロソフト Advent Calendar 2020](https://qiita.com/advent-calendar/2020/azure-cloudnative) の23日目の記事です。

Kubernetesのデフォルトでは、Namespace間の通信は全て許可されています。
Namespace毎に異なるワークロードを動かしていた場合、アクセス制御を掛けたいシーンがあると思いAKS上（Azure Network Policy）で実現可能か試してみました。

[Azure Kubernetes Service (AKS) のネットワーク ポリシーを使用したポッド間のトラフィックの保護](https://docs.microsoft.com/ja-jp/azure/aks/use-network-policies) に手順がありますが、独自に検証したものやハマったポイントなどを書き残します。

# AKS作成
[こちら](https://docs.microsoft.com/ja-jp/azure/aks/use-network-policies#create-an-aks-cluster-and-enable-network-policy) にAzure CLIでAKSを作成するコマンドがありますのでそれに倣って作成します。
ここで注意すべきは、作成したvNetのIAMでAKS ServicePrincipalに対して共同作成者ロールを割り当てることです。
これをやっておかないとNetworkPolicyが反応しませんでした。
Azure Portalから作った場合は忘れずに設定しないといけないです。

# Network Policy設定
今回はproduction Namespaceに、他のNamespaceからアクセスできないように設定してみます。

* テスト用Namespaceを作ります。

```
# kubectl create ns production
# kubectl label namespace/production env=production
# kubectl create ns development
# kubectl label namespace/development env=development
```

* NginxをProductionに作ります。

```
# kubectl create deployment nginx --image=nginx -n production
# kubectl expose deployment nginx --port=80 -n production
# kubectl get all -n production
```

* テスト用のPodをProduction Namespaceに作ります。remote file existsが出れば疎通できています。

```
# kubectl run busybox --rm -ti --image=busybox -n production -- /bin/sh
/ # wget --spider --timeout=1 nginx
remote file exists
/ # exit
```

* テスト用のPodをDevelopment Namespaceに作ります。まだNetworkPolicyを当ててないので疎通できます。

```
# kubectl run busybox --rm -ti --image=busybox -n development -- /bin/sh
/ # wget --spider --timeout=1 nginx.production
remote file exists
/ # exit
```

* network-policy.yamlを作成します。

```yaml:network-policy.yaml
kind: NetworkPolicy
apiVersion: networking.k8s.io/v1
metadata:
  name: network-policy
  namespace: production
spec:
  podSelector: {}
  ingress:
  - from:
    - namespaceSelector:
        matchLabels:
          env: production
```

* Production Namespaceに適用します。

```
# kubectl apply -f network-policy.yaml
```

* テスト用のPodをDevelopment Namespaceに作ります。timeoutになるはずです。

```
# kubectl run busybox --rm -ti --image=busybox -n development -- /bin/sh
/ # wget --spider --timeout=1 nginx.production
wget: download timed out
/ # exit
```

* テスト用のPodをProduction Namespaceに作ります。同じNamespace内では疎通できるはずです。

```
# kubectl run busybox --rm -ti --image=busybox -n production -- /bin/sh
/ # wget --spider --timeout=1 nginx
remote file exists
/ # exit
```
RTX3080/3090系によるTorch/Apexのエラー対応

# 解決方法
```bash
export TORCH_CUDA_ARCH_LIST='8.0+PTX'
```

# エラーの内容
Apexのコンパイルを行うと以下のエラーが出る。

```
nvcc fatal   : Unsupported gpu architecture 'compute_86'
```

`compute_86`すなわち`sm_86`はRTX30x系のことで、Torchはそんなアーキテクチャ知らないよといっている。では、知っている体ですませよう。

```bash
export TORCH_CUDA_ARCH_LIST='8.0+PTX'
```

取り合えずこれで、sm_80系で処理が進む。
Postfix の header_checks で From と Subject を同時に書き換えたい

# From と Subject を同時に書き換えしたい場合
## 時と場合によって `From を書き換えたい` `メーリングリストのようにSubject に追記したい`
 という場合があるかと思います。
これは smtp_header_checkes を追加して

```text:/etc/postfix/main.cf

smtp_header_checks = regexp:/etc/postfix/header_checks
```
を追記した後

```
systemctl restart postfix
```
を実行した後

```text:/etc/postfix/header_checks
if /^Subject: hogehoge-ML(.*)/i
/^Subject: hogehoge-ML(.*)/ REPLACE Subject: [HOGE-ML＋] $1
endif
```
上記を記述する事で `Subject: に hogehoge-ML test と書かれていたら Subject: [HOGE-ML] test`と書き換える。
と言う定義を行うことが出来る。

ただ、ここで注意しなくてはいけないのが

```text:/etc/postfix/header_checks
if /^Subject: hogehoge-ML(.*)/i
/^Subject: hogehoge-ML (.*)/ REPLACE Subject: [HOGE-ML] $1
/^From: (.*)/ REPLACE From: hoge-ml@examle.com
endif
```
と記述しても `From: `の書き換えは行われない。

これは初めの `if /^Subject: hogehoge-ML(.*)/i` によりメールファイルが `Subject: hogehoge-ML(.*)` で regrep されてしまっているから From の判定が出来ないことになるからである。

## もし、両方を書き換えしたい場合は以下のように定義することで同時に書き換えが可能である。

```text:/etc/postfix/header_checks
if /^(From: (.*))|^(Subject: hogehoge-ML(.*))/i
/^Subject: hogehoge-ML (.*)/ REPLACE Subject: [HOGE-ML] $1
/^From: (.*)/ REPLACE From: hoge-ml@examle.com
endif
```

そう、 regrep の際に From,Subject の2つの内容が入っていれば問題なく書き換えが可能になる

## 実行テスト

```shell
# cat test_header_hogehoge.txt
Subject: hogehoge-ML test
From: a@example.com
To: hoge@example.com

# postmap -hmq - regexp:/etc/postfix/header_checks < ./test_header_hogehoge.txt
Subject: hogehoge-ML test	REPLACE Subject: [HOGE-ML] test
From: a@example.com	REPLACE From: hoge-ml@examle.com
```
Unity 2D #4 ScrollViewにおけるlayout

参考URL：https://tech.griphone.co.jp/2018/12/18/advent-calendar-20181218/

LayoutGroup

Child Controls Size : 子のLayout要素によって算出された幅によって、子自身の幅を変える設定。
Child Force Expand : 親の幅に対して子に余白がある場合、子を引き伸ばす設定。

Layout Element

Min ~~ : 最低でもこのサイズは確保してほしい、という値。これ以上小さくならない。
Preffered ~~ : 余っているサイズがあればこのサイズまで描画する。
Flexible ~~ : 余っているサイズの中で、全てのFlexible間で占める割合


●グリッド状に並べるオブジェクトの数をスクリプトで変更する方法
ScrollViewのContentにGridLayoutGroupを、オブジェクトにLayout Elementをアタッチする。

```
// あらかじめアタッチしておく
public GameObject ScrollContent;


// オブジェクトを並べる空間の横幅
double content_width = Screen.width - 20;
// いくつのオブジェクトを並べるか(ここでは、横幅50のオブジェクトを10感覚で並べようとしている)
int constraint_count = (int)(content_width/60);

// スクロールビューの横に並べるオブジェクト数の変更
ScrollContent.GetComponent<GridLayoutGroup>().constraintCount = constraint_count;
// オブジェクト同士の隙間を計算
double content_space = (content_width - constraint_count*50)/(constraint_count-1);
// オブジェクト同士の隙間をスクロールに反映
ScrollContent.GetComponent<GridLayoutGroup>().spacing = new Vector2((float)content_space, 50);
```
Railsと別で書いていたscssをRailsに入れようとしたら、SassC::SyntaxError in Users::Sessions#newが出た件について


# 目次
* はじめに
* 実行環境
* 理由
* 解決方法
* まとめ

# はじめに
今回は別で書いていたscssをrailsに入れようとしたら
  background-color: $color-basic;
のところで
Error: Undefined variable: "$color-basic".
というエラーが出た。


# 実行環境
この記事は以下の動作環境で動作確認しています。
* ruby (2.7.1)
* rails (6.0.3)

# 理由
*　application.scss(css)内のデフォルトでいる

```
 *= require_tree .
```
が、**app/assets以下の全てのcssファイルを読み込んでいる**
ので、
読み込む順番がずれて、
$colorを指定したmiximファイルが先に読み込まれていなかったから。
`*が前に書いてあって、コメントアウトされている様に見えるけれど
ナ●シカの巨神兵の様に奴らは生きている...！！`


***

# 解決方法

今回はstyle.scssに

```scss:style.scss
@import "./ホゲホゲ/mixin";
@import "./ホゲホゲ/plugin";
@import "./ホゲホゲ/reset";
（などなど続く）

```

の様な@importの集団を書いて、これを読み込ませたかったので、

１　application.scssに
(application.cssならscssに変更)

２　同ファイルの*= require_tree .の行を削除

３　末尾に↓の様に@importしてstyle.scss（などの@importがたくさん書いてあるファイル）を読み込む

```scss:application.scss
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_self　//このファイルが最初に読み込むの意味。
 */
 @import "./css/style.scss";  // ここにimport(適用)したいscssを入れる。今回はstylesheet/cssフォルダ内にimportしたいscssを入れたのだけれど、ファイル構造や名前に合わせていただければ！

```

こんな感じで解決した。




# まとめ
application.scss(css)の中身は
`＊の後ろも生きている`ので注意が必要！
間違ったマイグレーションファイルを削除する方法

オンラインスクールの課題に取り組んでいる時に、間違って、余計なマイグレーションを行ってしまいました。
せっかく上手く動作していたのに、そのマイグレーションをきっかけにエラーが頻発。パニック。
rollbackを行おうとしたのですが、上手くできなかったため、今回は削除することにしました。

## まずはマイグレーションの状態を調べる
`rails db:migrate:status`で現在のマイグレーションの状態を調べます。
その結果、このように返ってきました。

```
Status   Migration ID    Migration Name
--------------------------------------------------
   up     20201222113451  Devise create users
   up     20201223005506  Create items
   up     20201223093320  Add nickname to users
  down    20201223095940  Add devise to users
```

一番下のファイルが余計に追加してしまったデータベースです。downになってますね。

## マイグレーションを削除！

```
rm -rf db/migrate/20201223095940_add_devise_to_users.rb
```
そして、`rails db:migrate`を行い、再び`rails db:migrate:status`を実行。

## きれいに削除されました

```
 Status   Migration ID    Migration Name
--------------------------------------------------
   up     20201222113451  Devise create users
   up     20201223005506  Create items
   up     20201223093320  Add nickname to users
```
きれいに最後のマイグレーションが削除され、無事に動作確認をすることができました。

## まとめ
今回と問題になったパターンは違うと思いますが、rollbackを使って、マイグレーション問題を解決した方法を書きました。

- [Railsでのマイグレーションエラーを解決した１つの事例](https://qiita.com/Hayato_prolife/items/1b85a5945846c8d7db32)

今回は削除して対応してみました。
まだ上手く頭の中でマイグレーションについて理解できていませんが、少しずつ深めていきたいと思います。
先人の経験に感謝です！

## 参考
- [【Rails】マイグレーションファイルの削除](https://qiita.com/ISSO33/items/33a935cb3255c269bef2)
SeedってRustのフロントエンドフレームワークが最高だったので紹介したい


![Seedのロゴ](https://raw.githubusercontent.com/seed-rs/seed-rs.org/81ed1acc77062ede3295683f21f2d39611843192/seed_branding/seed_logo.min.svg)

## はじめに
こんにちは。「すば」と申します。

この記事は[Rust 3 Advent Calendar 2020](https://qiita.com/advent-calendar/2020/rust3)の 21 日目の記事です。
体調悪くてめっちゃ遅刻しました・・・ごめんなさい

今回は、今自分が勉強中の`seed`というRustのフロントエンドフレームワークのざっくり紹介したいと思います。

## 対象読者
* フロントエンドやったことある人
* Rustの学習を始めたので、何か作ってみたい人

## この記事の目的
ぶっちゃけると公式のドキュメントが神すぎるので、それさえ読んでいただければこんな記事読む必要ないです。
読んで！！

https://seed-rs.org/

## Seedとは？
簡単に言えば、[Elm](https://elm-lang.org/)というフロントエンド用言語のアーキテクチャをRustに移植したフレームワークです。
もっと簡単に言えば、Reduxみたいなものです。

Seedのアーキテクチャは、主に３つの要素で構成されます。

|要素|役割|
|---|---|
|Model|アプリの状態|
|View|Htmlのレンダリング|
|Update|onClick等のイベントに応じて、Modelを書き換える|

Component毎にローカルな状態を持つことはなく、基本的にグローバル変数一つで状態を管理します。
不安に思われるかもしれませんが、結構これでうまくいくんです。

また、更新処理が必ずUpdate内に集められているので、処理の一覧性が高くてメンテしやすいです。

個人的には、複雑なことを複雑にやってしまうことを戒めるアーキテクチャだと思っています。
Component毎に状態変数持ってたら、どれがどの値を持っているのかデバッグする時大変じゃないですか？
状態は全部同じ変数に格納しちゃえば見やすいですよ、的な

他にもさまざまなメリットがあるのですが、元ネタのElmの記事を検索すると色々出てくると思います
`Why Elm`で検索すると、このアーキテクチャの利点がたくさん出てきます。

## Yewとの比較
日本では、Rustのフロントエンドフレームワークと言えば、`Yew`が有名です。
どちらもフロントエンドに必要な機能は過不足なく揃ってる印象です。

大きな違いはView部分の描画と、Component分割にあると思います


```rust
// Seed
fn view(model: &Model) -> Node<Msg> {
    div![
        C!["message"],
        "Hello world",
    ]
}

// Yew
pub struct Container {
}

impl Component for Container {
    // 省略...
    fn update(&mut self, msg: Self::Message) -> ShouldRender {
        // 省略...
    }
    
    fn view(&self) -> Html {
       html! {
           <div id="message">
               Hello World
           </div>
       }
    }
}
```

Htmlに関しては、どちらもMacroを用いて表現していますが、
`Seed`は関数的に、`Yew`はJSX的に表現します。
ここらへんは好みだと思います

Component分割に関しては、
`Seed`が関数だけで、`Yew`がStructをComponentとして表現しています。
また、`Yew`の方はUpdate関数でComponent内の状態を更新できるようになっていますが、
`Seed`は、前述したようにグローバル変数を更新して、参照するようになっています。

個人的には、Component内の状態は無ければ無いほど保守が楽なので、Seedの方が好きです。

一概に言い切ることはできませんが、`Yew`より`Seed`がシンプルに見えませんか？

## 公式のチュートリアルが充実している
公式のメニューをご覧下さい。
https://seed-rs.org/

* インストール
* Counterアプリ作成
* TodoMVCアプリ作成
* Time Tracker作成

これらがドキュメントに従うだけでサクッとできます。
少しづつレベルアップしていくので、終わった頃にはちゃんとしたアプリが作れるはずです。

## Github内のサンプルが充実している
いろんな事例のサンプルが30個ほどあります。
実装で困った時に、ドキュメントと合わせて参考にしてみるといいんではないでしょうか。

https://github.com/seed-rs/seed/tree/master/examples

## RealWolrdもある
さまざまな言語で同一のインターフェースのブログを作る`RealWorld`というプロジェクトがあります。

https://github.com/gothinkster/realworld

もちろん`Seed`の実装もあります（上記のURL内にはないっぽいけど）
https://github.com/seed-rs/seed-rs-realworld

本格的なアプリの実装に役立つはずです。
（他の言語でも参考になるので、`RealWorld`自体は頭の片隅に置いておくといいですよ）

## まとめ
Yewよりシンプルだと思うし、結構簡単にできるから、気軽にやってみよう！
exampleがたくさんあるから、まず書いてみよう！
counterあたりから始めるといいかも
react native の初期プロジェクト作成方法


react native の初期プロジェクト作成方法について自分用に
まとまっているものが欲しく記事にしました

#1 react native のプロジェクト作成

まずは初期プロジェクトの作成

```
 npx react-native init MyApp --template react-native-template-typescript
```

#2 react native paper導入

現在使っているMaterial UIをベースにしたライブラリのreact native paperの導入手順

react native paper
　https://callstack.github.io/react-native-paper/index.html

```
yarn add react-native-paper
yarn add react-native-vector-icons
```
react-native-vector-iconsを使う場合は
手動でリンクする必要があるため下記手順を参考に登録する必要がある

https://dev-yakuza.posstree.com/react-native/react-native-vector-icons/

#3 AWS amplify導入

初期設定（aws-amplify/cli）などの設定を除いた設定
通しの設定が必要な場合は下記を参照

AWS amplify Docs
　https://docs.amplify.aws/start/getting-started/installation/q/integration/react-native#option-2-follow-the-instructions

```
amplify init
yarn add aws-amplify aws-amplify-react-native amazon-cognito-identity-js @react-native-community/netinfo

npx pod-install
```

ソースコードへ下記を追加

```
import Amplify from 'aws-amplify'
import config from './aws-exports'
Amplify.configure(config)
```

そこから先の実装は下記URLを参照

AWS amplify Docs
　https://docs.amplify.aws/start/getting-started/installation/q/integration/react-native#option-2-follow-the-instructions

#4 react navigation導入

ページ遷移に必要なreact navigationの導入

react-navigation
 https://reactnavigation.org/
　

```
yarn add @react-navigation/native
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
```

#5 Pod install

iOS起動に必要なコマンドを実行し、完了

```
pod install
yarn ios
```

以上、とりあえず必要な初期プロジェクト作成方法について記載しました
Nextcloudサーバを冗長構成する際に気を付ける点

Nextcloud で Webサーバ (=Nextcloud サーバー ) を可用性や負荷分散の考慮して冗長構成にすることが必要となった場合に気を付ける点を簡単にまとめました。

### データベースの分離
Nextcloud は内部でユーザー情報、ファイルメタ情報、各種設定情報など、様々な情報をデータベースで管理しています。複数台の Nextcloud サーバーで同じデータベースの情報を参照できる必要があります。
データベースを別サーバーに構築して、これを Nextcloud サーバーから参照するように設定するとよいでしょう。
[【Configuration Parameters - Default Parameters】](https://docs.nextcloud.com/server/stable/admin_manual/configuration_server/config_sample_php_parameters.html#default-parameters)  ※`dbhost` パラメータ

### セッション情報の共有
Nextcloud は PHP で動作する Web アプリケーションです。複数台の Nextcloud サーバーで全てのセッション情報を共有しておく必要があります。
データベースサーバーに Redis または memcached といった KVS を導入し、ここに保管するように設定するとよいでしょう。
[【Qiita - PHPセッションをPhpRedisに保存する】](https://qiita.com/zurazurataicho/items/a71437412410955afd44)

### Nextcloud ファイルロック情報の共有
Nextcloud では ファイルロック情報を管理しています。この情報もすべての Nextcloud サーバーで共有しておく必要があります。
この保管先も、先ほどの KVS に保管するように設定するとよいでしょう。
[【Configuration Parameters - Memory caching backend configuration】](https://docs.nextcloud.com/server/stable/admin_manual/configuration_server/config_sample_php_parameters.html#memory-caching-backend-configuration)

### Nextcloud データディレクトリ（保管ファイル）
Nextcloud に保管されるファイルの実体をすべての Nextcloud サーバーで参照できるように共有しておく必要があります。
別途 NFS を準備し、 Nextcloud サーバーからこの NFS をマウント、ここにファイルを保管するように設定するとよいでしょう。
[【Configuration Parameters - Default Parameters】](https://docs.nextcloud.com/server/stable/admin_manual/configuration_server/config_sample_php_parameters.html#default-parameters) ※`datadirectory` パラメータ

### Nextcloud Config ファイル
Nextcloud の設定ファイルである Config ファイル (=config.php) は、基本的にはすべての Nextcloud サーバーで同じ内容である必要がありますが、管理者の設定変更作業により、まれにこの設定ファイルの内容が変更されることがあります。Nextcloud で設定変更を行ったのに反映されてたりされてなかったり挙動が変になっている場合は、このファイルの内容が Nextcloud サーバー間で異なっている場合があります。

### Nextcloud アプリ
Nextcloud は様々なプラグインアプリを追加することができます。プラグインアプリはすべての Nextcloud サーバーで同じものを参照できる必要があります。Nextcloud 画面でアプリを追加した場合、残念ながら追加の処理を行った Nextcloud サーバー以外のサーバーにも自動的にアプリがインストールされることはありません。
冗長構成としている Nextcloud でプラグインアプリを追加する場合は、それぞれの Nextcloud サーバー個別に `occ app:install` コマンドでインストールするとよいでしょう。
【2022年度版】Pythonインストール Windows10(64bit)編

# はじめに
Pythonをインストールする機会が多いのでマニュアル化しました。
本記事はWindows10(64bit)向けです。

# Python3.10 インストール
Python公式のダウンロードページ(https://www.python.org/downloads) にアクセスして「Download Python」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246142/9ff96365-3480-bce7-12d1-db14f576c719.png)



ダウンロードしたexeファイルをクリックします。

ダイアログ画面が起動しましたら「Add Python 3.10 to Path」にチェックを入れて「Install now」をクリックしてインストールを開始します。※チェックを入れることで、環境変数の設定が不要となるため楽です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246142/0a60b615-5483-73ad-631a-29b2b5525da8.png)

「Setup was successful」と表示されればインストール成功のため「Close」をクリックして閉じます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246142/5ccae847-a7b2-56fc-d116-ff8dc9e28afc.png)

#Pythonコマンドのチェック
正常にインストールされたことをチェックするため、コマンドプロンプトを起動して以下コマンドを入力して実行します。

```bash
python -V
```

今回私がダウンロードしたバージョンはPython3.10.6になるため「Python 3.10.6」と表示されれば成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246142/0d843873-8ff1-c8c6-9aec-4ead14d30a09.png)

#最後に
特に難しい手順はないですね！最後まで読んでいただきありがとうございます。
【備忘録】リテラルとオブジェクト型【TypeScript】

# リテラル

TypeScript,JavaScript初学者が**リテラル**と**オブジェクト型**について勉強したのでメモを残す。

# リテラルとは

- JavaScript のプリミティブである値そのものである。
- リテラルは「文字通り」という意味の単語で、ソースコードに数値や文字列をベタガキしてその値を表現する**式**。

  - **Boolean 型**
    - `true`と`false`の２種類の**真偽値リテラル**。
  - **Number 型**
    - `100`や`−50`のように数字を記述する**数値リテラル**。先頭に`0x`をつけると 16 進数、`0o`で 8 進数、`ob`で 2 進数を表現できる。
  - **BigInt 型**
    - `100n`のように数字の後ろに`n`をつけて表現する**数値リテラル**。
  - **Null 型**
    - **null リテラル**である`null`は、プリミティブ値`null`を返す。
  - **オブジェクト型**

    - **配列リテラル**
      - `[1,2,3]`の形式で記述する。`Array`オブジェクトのインスタンスとして生成される。([1,2,3]って書くと配列になるよってことかな？)
    - **オブジェクトリテラル**
      - `{key: value}`の形式で記述する。`obj.key`または`obj[key]`の 2 つの構文が利用できる。`Object`オブジェクトのインスタンスとして生成される。
    - **正規表現リテラル**

      - `/pattern/ig`形式で記述する。正規表現パターンでの特殊文字の使い方は、ほかの言語とほぼ共通。`RegExp`オブジェクトのインスタンスとして生成される。

    - オブジェクト型は全て**ビルドインオブジェクトの`object`がベースになっている。**

    ```typescript
    > const isBoolean = true
    > isBoolean.__proto__.constructor
    undefined
    [Function: Boolean]
    > isBoolean.__proto__.__proto__.constructor
    [Function: Object]
    > isBoolean.__proto__.__proto__.__proto__
    null
    >
    > const num = 100
    undefined
    > num.__proto__.constructor
    [Function: Number]
    > num.__proto__.__proto__.constructor
    [Function: Object]
    >
    > const bigInt = 100n
    undefined
    > bitInt.__proto__.constructor
    [Function: BigInt]
    > bitInt.__proto__.__proto__.constructor
    [Function: Object]
    > num.__proto__.__proto__.__proto__
    null
    ```

## リテラル型を定義する

    ```typescript
    // 任意のリテラル型を定義する
    type Gender = `man` | `woman`;

    let gender: Gender;
    gender = "man"; //  OK
    gender = "woman"; //  OK
    gender = "boy"; //  NG
    gender = 10; //  NG
    ```

# 参考

- [リテラル型 - TypeScript Deep Dive 日本語版](https://typescript-jp.gitbook.io/deep-dive/type-system/literal-types)
- [TypeScript の型: リテラル型を定義する (Literal types)｜まくろぐ](https://maku.blog/p/6iuo8aj/#:~:text=TypeScript%20%E3%81%AE%E3%83%AA%E3%83%86%E3%83%A9%E3%83%AB%E5%9E%8B%E3%81%AF,%E5%80%A4%E3%82%92%E5%AE%9A%E7%BE%A9%E3%81%97%E3%81%BE%E3%81%99%E3%80%82)
- [りあクト！ TypeScript で始めるつらくない React 開発 第 3 版【Ⅰ. 言語・環境編】](https://booth.pm/ja/items/2368045)

*何か指摘等ございましたら、コメントでお願いいたします。*
windowsでiverilog その80

#概要　

windowsでiverilogやってみた。
Xorshiftのテストベンチ書いてみた。

#参考にしたページ

https://qiita.com/s_osafune/items/a31d9cfd88027ad04482

#サンプルコード

```
module test;
	reg clk;
	reg clk_en;
	reg reset;
	wire [31:0] result;
	ci_rand_xorshift128 u(.clk(clk), .clk_en(clk_en), .reset(reset), .result(result));
	initial
	begin
		clk = 0;
		clk_en = 0;
		reset = 1;
		$monitor("%h", result);
		#2
			reset = 0;
		#2
			clk_en = 1;
		#20
			$finish;
	end
	always
	begin
		#1
			clk = ~clk;
	end
endmodule
```

#結果

```


05491333
dca345ea
1b5116e6
951049aa
d88d00b0
1ec7825e
8db24146
9af81443
2ac00f2c
0837ad58
17906569


```
以上。
[Node.js] Node.jsを用いてMySQLにデータを登録する

#Node.jsを用いてMySQLにデータを登録する

※ 自分用の覚え書きでございます。

Node.jsを用いてMySQLにデータを登録します。ローカル環境で実行しています。

###MySQLに作成したテーブル

f_id , f_name , f_age という3つのフィールドを作成しました。

![007a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/897250/1527839a-d892-b5f1-b107-ac5d88a7bcbd.png)

###Node.js側の記述

/ (localhostのルート) にアクセスしたとき、SELECT文を実行します。
/entry に post したとき、INSERT文を実行します。

```javascript:app.js
const express = require('express');
const mysql = require('mysql');
const app = express();

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

const connection = mysql.createConnection({
  host: 'localhost',
  user: '********',
  password: '********',
  database: 'db_users'
});

app.get('/', (req, res) => {
  connection.query(
    'SELECT * FROM tbl_users',
    (error, results) => {
      res.render('index.ejs', {items: results});
    }
  );
});

app.get('/entry', (req, res) => {
  res.render('entry.ejs');
});

app.post('/entry', (req, res) => {
  connection.query(
    'INSERT INTO tbl_users (f_name, f_age) VALUES (?, ?)',
    [req.body.userName, req.body.userAge],
    (error, results) => {
      res.redirect('/');
    }
  );
});

app.listen(3000);
```

localhostにアクセスしたときの画面表示　：　index.ejs

```html:index.ejs
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>db_users</title>
  </head>
  <body>
    <a href="/entry">+ 新規登録</a>
    <ul>
      <li>
        <span>ID</span>
        <span>名前</span>
        <span>年齢</span>
      </li>
    </ul>
    <ul>
      <% items.forEach((item) => { %>
        <li>
          <span><%= item.f_id %></span>
          <span><%= item.f_name %></span>
          <span><%= item.f_age %></span>
        </li>
      <% }) %>
    </ul>
  </body>
</html>
```

/entry の画面表示　：　entry.ejs

```html:entry.ejs
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>db_users</title>
  </head>
  <body>
    <form action="/entry" method="post">
      名前:<input type="text" name="userName">
      年齢:<input type="number" name="userAge">
      <input type="submit" value="登録">
    </form>
  </body>
</html>
```

###ブラウザからデータを登録

・localhostにアクセスします。
　→いま、2人登録されています。

![008a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/897250/af2e3bf4-fbc1-df42-df94-70e8465ad4c2.png)

・新規登録をクリックすると入力フォームが表示されます。
　→やまださぶろう さんを登録します。

![009a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/897250/d53e6293-cac5-7765-af0c-cf0eba60b45e.png)


・登録をクリックすると入力されたデータが登録、表示されます。
　→やまださぶろう さんが登録されました。

![010a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/897250/4cf03fef-83dc-bfdf-1aa5-033467815e83.png)