OmniAICreator/Qiita-1.07M huggingface dataset:
RubyでHit&Blow書いてみた

http://vipprog.net/wiki/exercise.html#ffeaab60

ここの数当てゲーム2を解いてみました

#コード

```Ruby
class Answer
  def initialize(digits)
    num = %w[1 2 3 4 5 6 7 8 9]

    first_num     = num.delete(num.sample)
    remaining_num = num.push("0").sample(digits - 1)

    @answer             = [first_num, *remaining_num]
    @count_hit_and_blow = Hash.new(0)
    @digits             = digits
  end

  def judge_hit(entry)
    entry_judeged_hit = entry.dup

    entry.zip(@answer) do |n|
      if n.uniq!
        @count_hit_and_blow[:hit] += 1
        entry_judeged_hit.delete(n[0])
      end
    end

    entry_judeged_hit
  end

  def judge_blow(entry_judeged_hit)
    blow_count     = entry_judeged_hit.intersection(@answer).size
    entry_has_blow = blow_count != 0

    @count_hit_and_blow[:blow] = blow_count if entry_has_blow
  end

  def judge_game
    @count_hit_and_blow.each { |k, v| print "#{v}#{k} " }
    print "\n"

    if @count_hit_and_blow[:hit] == @digits
      sleep 0.5
      puts "game clear", "congratulations!!!!!"

      exit
    end

    @count_hit_and_blow.clear
  end
end

def input_digits
  loop do
    print "答えの桁数を入力してください: "
    digits = gets
    unless digits.match?(/^[0-9]+$/) && digits.to_i <= 10
      puts "不正な値であるか""別の値を入力してください\n\n"
      next
    end

    break digits.to_i
  end
end

def input_entry(digits)
  loop do
    print "回答を入力してください: "
    entry = gets.chomp
    exit if entry.empty?

    entry_is_suitable_number = entry.match?(/^[0-9]+$/)  && entry.size == digits
    entry_is_uniqe           = (ary_entry = entry.chars) && !ary_entry.uniq!

    unless entry_is_suitable_number && entry_is_uniqe
      puts "不正なであるか重複した数字がある値です", "別の値を入力して下さい\n\n"
      next
    end

    break ary_entry
  end
end

# --------------実行部分--------------
puts "数当てゲーム、Hit&Blowを始めます(空行を入力すると終了します)\n\n"
sleep 1

digits = input_digits
answer = Answer.new(digits)

puts "\nゲームスタート!\n\n"
loop do
  entry = input_entry(digits)

  entry_judeged_hit = answer.judge_hit(entry)
  answer.judge_blow(entry_judeged_hit)
  answer.judge_game
end
~~~

#完走した感想
難しかった（小並感）

~~~Ruby
num = %w[1 2 3 4 5 6 7 8 9]

first_num     = num.delete(num.sample)
remaining_num = num.push("0").sample(digits - 1)

@answer = [first_num, *remaining_num]
~~~
簡単にググってみた所、答えの生成にこれよりスリムなコードが無かったので嬉しかった
コマンドラインからDockerのコンテナをvscodeで直接開く

## containerを直接vscodeで開く
ちょっと感動したので記載。

起動したdocker containerをvscodeで開く場合、コマンドパレットやサイドバーから開くことが一般的だと思いますが、container名さえわかれば、下記コマンドでコマンドラインから直接開くことができます。

``` bash
code --folder-uri=vscode-remote://attached-container+{container_hex}{path_to_open_folder}
```

上記のcontainer_hexの計算方法は以下(例としてbashです。)

``` bash
text="{\"containerName\":\"/${1}\"}"
container_hex=$(printf $1 | od -A n -t x1 | tr -d '[\n\t ]')
```
${1}には起動したいコンテナの名前を指定してください。

これでdocker containerをvscodeで直接開くことができます。
開発環境にscript化しておいておけば手間が省けるかもしれません。

例として、powershellのスクリプトです。

```powershell
$container_name = $args[0]
$containerinfo = "{`"containerName`":`"${container_name}`"}"
$container_hex = ""
foreach ($i in $containerinfo.toCharArray()) {
    $hex = "{0:x1}" -f [Int][Char]$i
    $container_hex += $hex.ToString()
}
$folderuri="vscode-remote://attached-container+${container_hex}/root/workspace"
code --folder-uri=$folderuri
````

## 参考
script化してくれてる方がいらっしゃいます。
https://github.com/geircode/vscode-attach-to-container-script
My SQLサーバー作成とクライアント接続までの設定

MY SQLサーバーを立てたときにつまずいたので記録残します。

```
#mysqlインストール
apt install mysql-server mysql-client

#スタートアップに登録
systemctl enable mysql
systemctl start mysql

#DBとUSER作成
mysql -uroot
CREATE DATABASE [DB NAME] CHARACTER SET UTF8 COLLATE UTF8_BIN;
CREATE USER '[USER NAME]'@'%' IDENTIFIED BY '[PASSWORD]';
GRANT ALL PRIVILEGES ON [DB NAME].* TO '[USER NAME]'@'%';
FLUSH PRIVILEGES;
quit;

#リモート接続できるDBを確認
select User,Host, plugin FROM mysql.user; 
+------------------+-----------+-----------------------+
| User             | Host      | plugin                |
+------------------+-----------+-----------------------+
| rakuten          | %         | caching_sha2_password |
| debian-sys-maint | localhost | caching_sha2_password |
| mysql.infoschema | localhost | caching_sha2_password |
| mysql.session    | localhost | caching_sha2_password |
| mysql.sys        | localhost | caching_sha2_password |
| root             | localhost | auth_socket           |
+------------------+-----------+-----------------------+
#認証方式をパスワードに変更
#auth_socketはログインしているユーザーと同じユーザーでログイン
ALTER USER '[USER NAME]'@'localhost' IDENTIFIED WITH caching_sha2_password BY 'password';

#リモート接続できるDBとUSERを設定
#どこからでもアクセスできるようにする場合はIPアドレスを"%"に設定
grant all privileges on [db_name].* to [user_name]@"[ip_address]" identified by '[password]' with grant option;

#そもそもmysqlの設定で外部接続を許可していない場合
sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf
抜粋-------------------------------------
# Instead of skip-networking the default is now to listen only on
# localhost which is more compatible and is not less secure.
bind-address            = 127.0.0.1　←ここで接続元IPを制限
mysqlx-bind-address     = 127.0.0.1
#
-------------------------------------

#mysqlサービスを再起動
sudo systemctl restart mysql

```
IoTツールのGravioで、センサーをMacに接続する

前回はGravioでIoTするために必要な[ソフトウェアのインストール](https://qiita.com/jansnap/items/5ce252751ff0e0403c14)を行いました。
今回は、センサーとMacの接続を行います。

# 用語
- エリア: センサーのある場所
- レイヤー: センサーの種類
    - 例: 
        - 1階エリアに、温度センサーレイヤーと湿度センサーレイヤーがある
        - 2階エリアに、温度センサーレイヤーと大気圧センサーレイヤーがある


# エリアとレイヤーの追加

ここでは例として温湿度計のセンサーを使って設定します。

- Gravio Studio 4を起動
- 前回作成したHubをクリック
<img width="320" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/6a3a04df-d9e0-6a91-45ca-a278d39ab32c.png">



- 左上の歯車マークから「新規エリア」を選択
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/cba2f4b7-543c-44db-1356-fe84f70c5402.png">

- エリア名(例: 寝室)を入力して「追加」をクリック
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/082cd876-65b6-0c43-9101-d67cbcffd0f7.png">

- レイヤー名に「温度」、センサータイプに「Aqura-Temperature」を選択し、「追加」
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/f2a3c610-3d8a-06dd-3ffb-8f45a7cf78a3.png">

- 同様に、レイヤー名「湿度」、センサータイプ「Aqura-Humidity」を選択し、「追加」
- 同様に、レイヤー名「大気圧」、センサータイプ「Aqura-Pressure」を選択し、「追加」

このような画面になります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/91703257-1c9c-63b6-31c1-ec4476bc395d.png">

# USBセンサーレシーバーとセンサーをMacに接続

- USBのセンサーレシーバーをMacに接続
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/adb6de2e-6f7e-539d-8a12-ea2c3d5550c5.jpeg">

- センサーの青色のバッテリーシールを引き抜く
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/d1c589ef-67c5-5e1e-3ff4-6d63860ec12c.jpeg"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/6a7fcfb4-b376-ed3e-3700-fddbf94ab3dc.jpeg">


- センサーの側面の小さな丸いボタンを５秒以上長押しする
    - ランプが点滅する

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/a9237abf-7b78-1a4e-4922-580ae5a0d345.jpeg">



# ペアリング

- Gravio Studio 4の画面で、右上のシリアルアイコンをクリック
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/feba03cc-16e3-edcc-0d9d-31b4d62894e8.png">

- 「ZigBee」を選択し、右下に表示される「ペアリング」をクリック
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/74564377-f769-9021-daa4-221f7c75ef5c.jpeg">

- センサーの側面の小さな丸いボタンを1回押す
- センサーが表示される
    - `lumi.weather-sensor1` など

# レイヤーとセンサーのバインド
- レイヤー「温度」をクリックし、右上の＋マークをクリック
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/a0e8f01f-ef7e-8c4b-9619-28d91a0215f2.png">


- 上記で表示されたセンサーを選択し、「バインド」をクリック
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/2790b256-3b7b-9c25-24f5-28bbba805c04.jpeg">



- 同様に、レイヤー「湿度」、レイヤー「大気圧」も設定

- 各レイヤーを選択すると、右側に論理デバイス名が出るので、チェックボックスにチェックを入れて、使えるようにする。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/c30c02e9-0e97-32e5-57bc-8ab096b3860b.png">

# センサーから取得した値の表示

- 上側のタブの「データ」を選ぶと、センサーからの値が表示されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/82d39bb6-2e5f-0163-5e43-bb828040988e.png">

- この画像では、
    - 大気圧 1016.2ヘクトパスカル
    - 湿度 55.75%
    - 温度 18.81度

であることが分かります。

次回は、センサーから取得した値を外部サービスと連携させて活用します。
BFS(幅優先探索)解説動画のコード　ABC138　D

BFS解説動画で使用しているコードの内容です。
https://www.youtube.com/watch?v=WyJvs9hL9Yc&t=8s

```python:
# 受け取り
N,Q=map(int, input().split())

# つながっている頂点のリストを作る
# 1と2,3,4がつながっているならconnect[1]=[2,3,4]
connect=[[] for _ in range(N+1)]

# 受け取り
for _ in range(N-1):
    a,b=map(int, input().split())
    # aからb、bからaがつながっている
    connect[a].append(b)
    connect[b].append(a)

# 各頂点のカウンタを用意
counter=[0]*(N+1)

# 受け取り
for _ in range(Q):
    p,x=map(int, input().split())
    # pのcounterにxを足す
    counter[p]+=x

# que=筒を用意する
from collections import deque
que=deque()

# スタート地点=1を入れる
que.append(1)

# 訪問済みチェックを作る
# Falseなら訪問まだ、Trueなら訪問済み
visited=[False]*(N+1)
# 1＝スタート地点は訪問済みにする
visited[1]=True

# que=筒が空になるまで
while len(que)>0:
    # 筒の左から取り出してnowに格納
    now=que.popleft()
    # nowのカウンタの値をnow_numberに格納
    now_number=counter[now]
    # nowからつながっている頂点を順に回る=to
    for to in connect[now]:
        # もしまだ訪問済みでなければ
        if visited[to]==False:
            # counterにnowのカウンタの値を足す
            counter[to]+=now_number
            # 訪問済みチェックつける
            visited[to]=True
            # 筒に入れる
            que.append(to)

# 0以外のcounterを出力
print(*counter[1:])
```
docker内でコマンド実行すると「-bash: apt-get: コマンドが見つかりません」と怒られる

例えば、psコマンドを使いたい場合に以下を実行すると、

```
$ docker-composer exec container_name apt-get update && apt-get install -y procps
```

以下のようなメッセージが表示される

```
-bash: apt-get: コマンドが見つかりません
```

bash経由で実行したらできた。

```
$ docker-compose exec container_name bash -c 'apt-get update && apt-get install -y procps'
```
[メモ]nginxのキャッシュの設定

### 前提
・nginxの設定中にふとキャッシュの挙動や設定が気になったので調べてみた

### nginxキャッシュの挙動
・キャッシュされたレスポンスは一時ファイルに保存される
・一時ファイルはuser_temp_pathに保存される
・user_temp_pathの指定がない or onになっている場合はproxy_temp_pathに保存される
・proxy_temp_pathがoffの場合はキャッシュディレクトリに保存される
・すべてのアクティブなキーと値(多分キャッシュの？)はkeys_zoneで構成される共有メモリゾーンに格納される(1Mのゾーンには約8000個のキーを格納できる)
・inactiveで指定された時間内にアクセスされなかったキャッシュデータはキャッシュから削除される。inactiveはデフォルト10分。

### nginx上のキャッシュを有効にしたい場合
・キャッシュを有効にしたいコンテキストでproxy_cache: oneにしてproxy_cache_pathを設定する

### nginxのキャッシュ処理
・cache manager・・ファイルストレージがmax_sizeを超えてないかチェックして超えていた場合は最も使われてないキャッシュを削除する
・cache loader・・nginxが起動された際に１度だけ実行される。キャッシュデータのメタ情報を共有メモリ領域にロードする

### 参考
[NGINX コンテントのキャッシング](http://mogile.web.fc2.com/nginx/admin-guide/caching.html)
【Xcode12.5】シミュレータの画面録画とGIF変換

## はじめに

Xcode12.5から、シミュレータのレコーディングやGIFへの変換が簡単に行えるようになりました。

## やり方

下記のどちらかで出来ます。

- **Command + R**
- **Optionを押しながら、ツールバーのスクリーンショットボタンを押す**

---

Opitonを押している間、オレンジで囲まれたスクリーンショットボタンが、赤い録画ボタンに切り替わります。
録画を終了したい場合は、再度赤いボタンを押せばOKです（Command + Rで停止出来るかと思いましたが、出来ませんでした）。
<img width="320" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190870/35f1707e-3202-72e5-0577-fb91190cb7ef.png">

## GIFとして保存する

録画したファイルは、特に何もしなければ`mp4`ファイルとして保存されます。
GIFとして保存したい場合は、まずシミュレータ横に表示されるプレビューを**右クリック**します。

<img width="320" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190870/bbacee46-8257-9605-8175-e2d09622cb7a.png">


ポップアップが出てくるので、**Save as Animated GIF**を選択するとGIFとして保存してくれます。

<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190870/ae5f074f-cbf1-1342-9e25-f83aad5276d5.png">

## MP4 / GIFの両方が欲しい

ポップアップが表示された状態で、**Option**を押してください。
**Save as Animated GIF**が**Save Copy as Animated GIF**に切り替わります。

## 最後に

開発者に感謝です🙏

## 関連リンク

- [Xcode 12.5 Beta 2 Release Notes](https://developer.apple.com/documentation/xcode-release-notes/xcode-12_5-beta-release-notes)
Javaのデータ型の種類と用法

# はじめに
私は、現在Javaを学習しており、データ型の種類と用法についてまとめてみました。
データ型とは、変数が数値や文字列かなどを定義するためのものです。
Javaでは、変数を定義する場合、

```java
変数宣言
型　変数名;
int age;
```
のように定義しなくてはなりません。

# データ型種類 用法

|分類|型名|格納するデータ|変数宣言の例|
|---|----|-----------|---------|
|整数|long|大きい整数|世界の人口|
|    |int|普通の整数|給与金額|
|    |short|小さな整数|年齢|
|    |byte|さらに小さな整数|腕時計の数|
|少数|double|普通の少数|円周率|
|   |float|少し曖昧な少数|体重|
|真偽値|boolean|trueかfalse|真偽|
|文字|char|1文字|イニシャルなど|
|文字列|String|文字の並び|自分の名前|

#　型の変換
Javaには型を変換するしくみが3つあります。
①と③は自動的に行ってくれるので我々は気にする必要がありません。
①代入時の自動型変換
②強制的な型変換
③演算時の自動型変換

②の強制的な型変換ですが、下記のようにします。
これをキャスト演算子と言います。
しかし、この方法は、強制的にデートの一部を失う為、よほどの理由がない限り使わない方が良いです。

```java
pubulic class Main {
  public static void main(String[] args){
  int age = (int)25.5; #int型に変換して代入をいう命令
  System.out.println(age);
  }
}

#実行結果
25
```

# 最後に
JavaでもRubyみたいにアプリをつくれるようになりたいのでこれからも継続して学習を進めて行きます！

ここまで読んでいただき、ありがとうございました！
Flutterで数値のみを入力できるTextFieldを作成する

# 目的
TextFieldの入力値を数値のみに制限する

![画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/3b34da2c-d1e9-bc5c-d5e6-62596e07f9d9.png)


# 実装
以下のとおりです。


```dart
TextField(
    keyboardType: TextInputType.number,
    inputFormatters: [FilteringTextInputFormatter.digitsOnly]
)
```

まず、 `keyboardType` を `TextInputType.number` とする事で、
TextFieldにフォーカス時、数値のキーボードが表示されるようになります。

ただし、この状態ではカンマやピリオドが入力できる状態で、
文字のペーストなどで余計な文字を入れることも可能な状態です。

そこで `inputFormatters` に `FilteringTextInputFormatter.digitsOnly` 
を設定し、入力できる文字を数値のみに制限します。
Houdiniのパッケージのインストール方法

1.Houdiniのターミナルを開く。
2.hconfigで環境変数の確認

```sh
hconfig
```

3.HOUDINI_USER_PREF_DIRのディレクトリを確認する。
4.HOUDINI_USER_PREF_DIR/packages/ 以下に、対象となるhoge.jsonを置く。
5.hoge.json内では

```json

{
	"env": [
        {
			"MY_APP": "/Users/me/Documents/app_package"
        }
	],
	"path": [
            "$MY_APP"
    ]
}
```

ここで、MY_APPに指定するパスが、パッケージのディレクトリへのパスとなる。

まとめると、
パッケージ自体は任意の場所に置き、HOUDINI_USER_PREF_DIR/packges 以下に、パッケージへのパスを書いたhoge.jsonを置く。Houdiniは、起動時にHOUDINI_USER_PREF_DIR/packgesにあるjsonたちを読み込んでいる。
AWS認定 SysOps Administrator Associateで不合格になった話


## はじめに

皆さん、こんにちは！！
ハンズラボのサムです！！
先日AWS認定 セキュリティ専門知識を合格したので、勢いに乗ってアソシエイトの中では簡単と言われるSysOps Administrator Associateを受けてきました！

因みに今のバッジはこんな感じで、正直SAAもってるから余裕だと思ってました。
![スクリーンショット 2021-02-19 20.31.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181414/d6ac3d05-1307-2042-b903-2bd3b68163ac.png)

## 目的

AWS資格12冠ですが、ひとまずアソシエイト3冠しようというスタイルです！


## スケジュール＆試験対策

試験対策期間：3日間ぐらい

いつもどおり
* Udemyの模擬試験
* AWSの公式模試
で対策をやりました。

因みに模試はこんな感じでした↓(この合格ラインギリギリ感)
![スクリーンショット 2021-02-18 15.25.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181414/34bfff14-00a9-e41e-f326-f03f56d126bf.png)

## 実際のテストの雰囲気など

難易度としては専門知識とかと比べて問題の長さは短くSAAと同程度でしたが、SAAより若干掘り下げた問題が多かったように感じます。
それと、問題に登場するサービスが若干古かったので試験自体そろそろ更新なのかな？といった感じでした。

問題量に対して試験時間は長いぐらいで見直ししても50分程度余ったので、もうちょっとゆっくり解いてもよかったかな〜？という印象でした。
そして、分からない問題よりわかる問題が多かったので受かっただろうと思ってました。

## 結果

はい。表題の通り落ちました！！！！
誰だよ、SysOpsは簡単だって書いた人！！
点数は677点なので多分2-3問足りなかった感じ。

敗因として
* CloudFormationの問題がわからないの多かった・・・
* 完全に慢心していた
以上！！！！

はい、ちゃんと再度対策してサービス調べて勉強し直してきます！！！！
2週間後には再試験できるようになるのでリベンジしてきます。
皆様もネットに簡単と書いてあっても鵜呑みにしないように！！
**満身は最大の敵です！！**

以上、自戒を込めた記事でした！！次の記事は合格になった話にもってけるようにします！！
![スクリーンショット 2021-02-19 20.20.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181414/9e3c7a9e-b316-259a-8e67-825aed6a425c.png)
![スクリーンショット 2021-02-19 20.20.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181414/bd7014ab-4ef9-e6b3-d4b8-fe93b0d0e9b4.png)
【SwiftUI】contextMenuで長押ししたときにメニューを出す

先日リリースしたアプリに使用した技術をひとつずつ解説しています。
私のアプリはこちら。

https://apps.apple.com/jp/app/id1553876980

# contextMenuとは

任意のビューに対し、長押ししたときにメニューを出す機能を追加するメソッド。

https://developer.apple.com/documentation/swiftui/view/contextmenu(menuitems:)

# 実際の動作

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

実際にアプリを触らないとわかりづらいかもしれませんが、__長押しすることでメニューが表示されています__。また、__メニューの外側をタップするとメニューが閉じる__ようになっています。
iOSアプリでよく見かける機能ではないでしょうか。

# ソースコード

https://github.com/masayoshi0327/ContextMenu

```Swift:ContentView.Swift
import SwiftUI

struct ContentView: View {
    let evs = ["イーブイ", "ブースター", "シャワーズ", "サンダース", "エーフィ", "ブラッキー", "グレイシア", "リーフィア", "ニンフィア"]
    let colors1: [Color] = [Color(#colorLiteral(red: 0.7254902124, green: 0.4784313738, blue: 0.09803921729, alpha: 1)), .red, .blue, .yellow, Color(#colorLiteral(red: 0.8446564078, green: 0.5145705342, blue: 1, alpha: 0.5)), .black, Color(#colorLiteral(red: 0.6872052062, green: 0.9808971643, blue: 1, alpha: 1)), Color(#colorLiteral(red: 0.5843137503, green: 0.8235294223, blue: 0.4196078479, alpha: 1)), .pink]
    let colors2: [Color] = [.white, .white, .white, .black, .black, .yellow, .blue, Color(#colorLiteral(red: 0.9764705896, green: 0.850980401, blue: 0.5490196347, alpha: 1)), Color(#colorLiteral(red: 0.4745098054, green: 0.8392156959, blue: 0.9764705896, alpha: 1))]
    
    @State var evID = 0
    
    var body: some View {
        ZStack{
            Circle()
                .foregroundColor(colors1[evID])
                .frame(width: 250)
            VStack{
                Image(systemName: "sparkles") //このビューを長押しするとメニューが現れるようにする
                    //ここからがコンテキストメニュー
                    .contextMenu(menuItems: {
                        ForEach(0..<9) { n in
                            Button(action: {
                                evID = n
                            }, label: {
                                Text(evs[n])
                            })
                        }
                    })
                    //ここまでがコンテキストメニュー
                Text(evs[evID])
                    .padding()
            }
            .font(.title)
            .foregroundColor(colors2[evID])
        }
    }
}

```

「長押しするとメニューが出る」という機能を追加したいビューに対して```.contextMenu```を書きます。
そして、contextMenuの引数である```menuItems```の{}内が、表示されるメニューの内容になります。

# menuItemsには何を書く？

contextMenuで```Text```や```SF Symbolsを使ったImage```を表示させることができます。しかし、書いたものを自動的にボタンにする、という機能はありません。上のサンプルアプリのようにcontextMenuにボタンを表示させたい場合は、__menuItemsにはButtonビューを書く__のが良いでしょう。

# まとめ

簡単なコードでおもしろくて便利な機能を実現できます。ぜひ、SwiftUIでcontextMenuを使ってみてください。

よかったらTwitterのフォローをお願いします。
https://twitter.com/masayoshi_tozan
GitLabのバックアップを定期実行する

以前GitLabのバックアップ方法を紹介しましたが、今回はその応用としてバックアップの定期実行を実施してみたいと思います。

# バックアップ用シェルスクリプトの作成
まずは事前準備としてバックアップの一連の動作を実行するシェルスクリプトを作成します。

```ruby:/root/backup.sh
#!/bin/bash

gitlab-rake gitlab:backup:create
rsync -a /etc/gitlab /var/opt/gitlab/backups/

exit 0
```

最低限これだけあればバックアップが実現できます。
本格的な運用を視野に入れて設計する場合は上記に加えてログの吐き出し機能を加えたりエラー等により失敗した場合の条件分岐を含めたりする必要があるかと思います。
シェルスクリプトファイルを作成後は以下コマンドで実行権限を追加します。
以下実行権限もまた実際に運用する際にはセキュリティに応じて付与する権限を考慮する必要があります。

```
sudo chmod 755 <スクリプトファイル名>
```

実行権限追加後、まずはスクリプトが正しく動くか実行してみます。
実行には以下のコマンドを入力します。

```
./<スクリプトファイル名>
```

実行後、バックアップ先に指定しているディレクトリ内に```<バックアップ実行日時とGitLabのバージョン>_gitlab_backup.tar```ファイルと```gitlab```ディレクトリが存在していれば正常に完了しています。

# バックアップの定期実行
上記で作成したシェルスクリプトを一定期間で自動実行するように設定します。
定期実行には、```cron```を使用します。
まずは```crontab -e```コマンドを実行します。
するとテキストエディタが起動しますので、以下の書式で定期実行したいタスクを定義します。

```
分　時　日　月　曜日　実行コマンド
例:
0 23 * * * /root/backup.sh #毎日23時に実行する
```

タスクの追加が完了したら、通常のテキストエディタと同様に```:wq```を入力して閉じます。
書式に誤りが無ければ```crontab: installing new crontab```といったメッセージが表示されます。
lsコマンドでバックアップ先のディレクトリを確認し、自動実行対象の時間でバックアップファイルが作成されていれば完了です。

# 起動時に実行させたい場合
定期実行の方法は上記の通りですが、私の場合はサーバーを常時稼働させている訳ではないので、サーバー起動時に自動実行させたいです。
そんな時は```crontab -e```コマンドを実行し、以下のように実行コマンドの前に日時ではなく```@reboot```を記載します。

```
@reboot <実行対象のコマンド、スクリプト>
例:
@reboot /root/backup.sh
```

再起動後、バックアップ対象ディレクトリに起動時間付近のタイムスタンプでバックアップファイルが作成されていれば完了です。
ちなみに以前は```/etc/rc.local```ファイルに実行コマンドを記載する事で同様にOS起動時に自動実行できるようですが、現在では非推奨らしいです。
【LaTeX】tips一覧

LaTeXで困ったことをまとめます。

## 表のcaptionを取得したい。
\tableの\captionを取得したい場合は、以下の通りにパッケージを読み込んで、\namerefをします

```latex:*.tex
%表のキャプションをサイト
\usepackage{hyperref}
```

```latex:*.tex
\nameref{表のラベル名}
```
## 表番号をrefしても、正しい番号が表示されない

captionのあとにlabelを書かないと、適切にrefできなくなる。

```latex:だめな例
\begin{table}[H]
          \centering
          \includegraphics[width=16cm]{act7_table_7.pdf}
          \label{act7_table_7}
          \caption{四半期ごとの廃番の変動}
\end{table}
```

```latex:良い例
\begin{table}[H]
          \centering
          \includegraphics[width=16cm]{act7_table_7.pdf}
          \caption{四半期ごとの廃番の変動}
          \label{act7_table_7}
\end{table}
```

### 参考
- https://tex.stackexchange.com/questions/205469/wrong-figure-number-at-ref


## 註釈で妙に改ページされてしまうのを防ぐ
\begin{minipage}[上揃え]{幅} とすると、footnoteの内容の量が極端に多くても改ページされない。minipageを使う以外の方法では、脚注番号が脚注の内容とは別のページに飛ばされたり、脚注が勝手にページ分割されてしまった

### 例
```tex
 \footnote{
      \begin{minipage}[t]{1.0\hsize} %変に註釈が改ページされることを防止
           \begin{figure}[H]
             \begin{center}
              \includegraphics[width=8cm]{gazo1.jpg}
             \end{center}
           \end{figure}
      \end{minipage}
}
```

### 参考
- https://uec.medit.link/latex/multicolumn.html

## 便利リンク集
- \chapter*{}や\section*{}を使った上、addcontentslineするとtableofcontentsがずれる
    - https://ossyaritoori.hatenablog.com/entry/2016/11/11/%E3%80%90Tex%E3%80%91%E5%8D%92%E8%AB%96%E4%BF%AE%E8%AB%96%E3%81%AB%E3%81%AF%E6%98%AF%E9%9D%9E%E3%83%8F%E3%82%A4%E3%83%91%E3%83%BC%E3%83%AA%E3%83%B3%E3%82%AF%E6%A9%9F%E8%83%BD%E3%82%92%E3%81%A4
Vagrant+VirtualBoxでのDocker環境

## 目的

WindowsでDocker環境を構築するに際して「Docker Desktop for Window」を利用してみようとしましたが、
諸々の環境依存の問題に当たることがあり、過去の経験上で比較的問題のでることが少なかった
「Vagrant+VirtualBox」の環境上にDocker環境を作成したものです

### 方針

- Windowsの依存問題を避けるため、VMはLinux系のもの
- VM／コンテナを両方起動することの無駄には目をつぶる

## Vagrant起動スクリプト

```Vagrantfile
Vagrant.configure("2") do |config|

  config.vm.box = "centos/7"
  config.ssh.insert_key = false

  config.vm.network "forwarded_port", guest: 80, host: 80   # HTTP
  config.vm.network "forwarded_port", guest: 443, host: 443  # HTTPS
  config.vm.network "forwarded_port", guest: 3306, host: 3306  # MySQL
  config.vm.network "forwarded_port", guest: 6379, host: 6379  # Redis
  
  config.vm.synced_folder "./workDir", "/home/vagrant/mnt/workDir"
  
  # Docker
  config.vm.provision :docker, run: "always"

  # docker-compose
  config.vm.provision :docker_compose,
    compose_version: "1.27.4",
    run: "always"
end
```

### 個別の補足

```
  config.vm.box = "centos/7"
  config.ssh.insert_key = false
```

今回はCentOS7を採用
2行目はSSHのキーを省略する設定、ローカル環境でのみ使用するためこの設定としていますが、
あまり好ましくない設定と思われるので、本記事を参考にする際はきちんと調べて適切に設定してください

```
  config.vm.network "forwarded_port", guest: 80, host: 80   # HTTP
```

VirtualBoxのポートフォワーディングに関する設定
開発環境に必要なポートを定義しています

```
  config.vm.synced_folder "./workDir", "/home/vagrant/mnt/workDir"
```

ホストマシンとゲストマシンのディレクトリの同期設定です
「/home/vagrant/mnt/」は「Vagrant+VirtualBox+CentOS7」の環境のマウント用パスです

```
  config.vm.provision :docker, run: "always"
（※中略）
  config.vm.provision :docker_compose,
```

Dockerおよびdocker-composeをインストールするための設定です

## あとがき

かなりザックリすぎに記事を書いた自覚はあるので、後日時間があれば追記修正する気持ちはあります……
LaravelのエラーSQLSTATE[HY000] [2002]を解決する

##環境
Laravel6(PHP7.3以上) 
MySQL8.0
Laradock(Docker)
Vscode

##前提
php artisan migrateを実行するとSQLSTATE[HY000] [2002]のエラーが出る。

SQLSTATE[HY000] [2002]のエラーを調べてみると
環境構築で.envとdocker-compose.ymlの両ファイルにて設定がズレが発生していることが原因
とのことでした。

##試したこと
.envとdocker-compose.ymlの両ファイルをコマンドにて開き

```
DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=default
DB_USERNAME=default
DB_PASSWORD=secret
```
ユーザーネームなどを両ファイル一致するようにしたが、問題解決には至らず。



##解決策
仮想環境内でphp artisan migrateを実行するとsuccessの文字が浮かび上がります！
SQLSTATE[HY000] [2002]のエラーの原因は作成したコンテナに入らずにphp artisan migrateを実行していたことでした。

コマンドで、プロジェクトファイル上ではなく、作成した仮想環境内に入ってphp artisan migrateをする必要があるんそうです。
これで解決！！
ImageMagick で特定ピクセルの RGBA 値を取得する

WEB 上で調べてみると、ピクセルの色情報は

```bash
convert input.png -crop 1x1+123+456 txt:
```

や

```bash
convert input.png -format '%[pixel:p{123,456}]' info:
```

で調べられるとあったのですが、自分の環境ではなぜかアルファ値 (不透明度) が常に 1 扱いになってしまい、正しく取得できなかったため、別の方法で取得することにしました。

# 1. コマンド

ピクセルの位置は `x=123; y=456;` のように指定。

```bash:コマンド
x=123; y=456; convert input.png -format '%[fx:p{'$x','$y'}.r*((1<<z)-1)], %[fx:p{'$x','$y'}.g*((1<<z)-1)], %[fx:p{'$x','$y'}.b*((1<<z)-1)], %[fx:p{'$x','$y'}.a]' info:
```

```txt:出力の例
0, 255, 255, 0.501961
```

# 2. 説明

FX 式を用いてピクセルの色を取得できます。

今回使用した式は以下の通りです。

|式|説明|
|---|---|
|`p{x, y}`|座標 (x, y) のピクセル|
|r|カレントピクセルの R 値|
|g|カレントピクセルの G 値|
|b|カレントピクセルの B 値|
|a|カレントピクセルの A 値|
|z|チャンネルの深さ (※ ImageMagick で画像変換後だと深さが変わることがあるので注意)|

※ FX 式の `depth` は意味が異なるようです。

参考「[The Anatomy of an FX Expression - The FX Special Effects Image Operator - ImageMagick](https://imagemagick.org/script/fx.php#anatomy)」

記事は短くなってしまいましたが、色々試行錯誤した結果こうなりましたので、メモとして残しておきます。

他にもっと良い方法があればコメント下さい…。
GitHub ブランチとマージについて

#【GitHub ブランチとマージについて】

山浦清透さん いつもありがとうございます。
[Git：もう怖くないGit！チーム開発で必要なGitを完全マスター](https://www.udemy.com/course/unscared_git/)

<strong>Gitは、大規模開発での必須ツールになっている。</strong>
複数人で複数の機能を並行して、開発することを可能にする。

##ブランチ

ブランチは、コミットを指すポインタの役目をする。
スナップショットでファイルの記録をしている仕組みを利用して、
ブランチの作成や切り替えを高速におこなっている。

ブランチを利用することで分岐して作業が出来て、効率的になる。

###ブランチを新規追加

ブランチ作成のみで、ブランチの切り替えはおこなわない。
　→　git branch < ブランチ名 >

###ブランチを一覧を表示

どんなブランチがあるかを確認する。
　→　git branch （全てのブランチを表示したい時は、-a を付ける。）

###ブランチを切り替え

既存に存在しているブランチに切り替える。
　→　git checkout < 既存ブランチ名 >

　※ブランチを新規に作成して切り替える。一度に実行できる。
　　→　git checkout -b < 新ブランチ名 >

###ブランチを変更・削除

自分が作業しているブランチ名を変更する。
　→　git branch -m < ブランチ名 >

ブランチを削除する。
　→　git branch -d < ブランチ名 >

　※-dコマンドは、masterにマージされていない変更があれば、警告をしてくれる。

ブランチを強制削除をする。
　→　git branch -D < ブランチ名 >　

##マージ

マージは、他の人の変更内容のを取り込む作業のこと。

###変更履歴をマージする

自分の作業中のブランチにマージする。
　→　git merge < ブランチ名 >
　→　git merge < リモート名 / ブランチ名 >

##コンフリクト

コンフリクトとは、複数人の人が同じ箇所で別々の変更した時に起こる。
Gitが、どの変更を優先したら良いかわからなくなっている状態。

###コンフリクトを起こさないようにするには。

・複数人で同じファイルを変更しないようにする。
・pull, mergeをする前には、変更中の状態を無くしておく。
・pullする時には、pull対象のブランチに移動してから実行する。

※コンフリクトの対応を慌てずに出来るようにしておこう。
heroku pg:reset DATABASEでのエラー？

Railsチュートリアルを進めていたところ以下の流れでDBをリセットする必要があったので手順通り進めていたところ警告が出ました

```
$ git push heroku
$ heroku pg:reset DATABASE
$ heroku run rails db:migrate
$ heroku run rails db:seed
```
警告が出たのはこのDBのリセットコマンドを実行した時
```heroku pg:reset DATABASE
```

警告
![スクリーンショット 2021-02-27 11.57.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641519/146b7385-b270-54af-03cc-1d537155ac4a.png)

何かと思ったら、リセットしていいのか確認してるだけでした。


```
roccky-bastion-3336
```
画面の指示に従い上記コマンドを入力してリセット完了しました。
windows エクスプローラー よく使うショートカット

##エクスプローラーでよく使うショートカットキーまとめ

Win + E
エクスプローラを起動する。Alt + F4で終了する
Ctrl + N
新しいウィンドウを開く。Ctrl + Wで現在のウィンドウを閉じる
英数字
作業中のウィンドウの入力した英数字キーのファイルに移動する
End
作業中のウィンドウの最後ファイルに移動する
Home
作業中のウィンドウの先頭ファイルに移動する
DelまたはCtrl + D
選択したファイル又はフォルダを削除し、ごみ箱に移動する。
F2
ファイル名を変更する
F3
ファイルを検索する
Alt + ↑
一つ上のフォルダに移動する
Alt + →
次のフォルダに移動する
Alt + ←
ひとつ前のフォルダに移動する
Shift + F10
右クリックメニュー
Enter ダブルクリック
ファイルを開く

参考記事　https://maywork.net/computer/explorer-shortcut/
【LaTeX】bibtexのtips

# 環境
pbibtex+ ptex2pdfを利用中。

# Bibtexで、citeやcitep、bibliographyの名前が途中までしか表示されない
authorに空白が含まれていると、natbibが名字のみを表示してしまう(空白が含まれる文字列の場合最後の単語だけを表示する)という挙動があります。
筆者の団体名に空白があったり、フルネームで表記したい場合に不都合です。

## 解決法
.bibファイルのauthor= の値を{{ }} で囲めばよいです。

### before

```latex:*.bib
@misc{akibagpu,
author= "AKIBA PC Hotline!編集部",
title="GeForce RTX 3000系の在庫不足がさらに深刻化、棚に“売る物が無い”状況に",
url="https://akiba-pc.watch.impress.co.jp/docs/wakiba/find/1307420.html",
year= 2021, 
month= 2,
publisher = "Impress",
note = "2021年2月28日アクセス"
```

### after

```latex:*.bib
@misc{akibagpu,
author= {{AKIBA PC Hotline!編集部}},
title="GeForce RTX 3000系の在庫不足がさらに深刻化、棚に“売る物が無い”状況に",
url="https://akiba-pc.watch.impress.co.jp/docs/wakiba/find/1307420.html",
year= 2021, 
month= 2,
publisher = "Impress",
note = "2021年2月28日アクセス"
```

## 参考文献
- https://tex.stackexchange.com/questions/85966/cite-authors-full-name

# urlつきの参考文献がうまく読み込まれない

```latex:*.tex
\usepackage{url}
```
としておく。
[Android/Kotlin] Android Studioで JSON Kotlin Class 簡単に作ってみた。



JSONデータをKotlin classに変更するため
json to kotlin classというプラグインをインストールする。

 
https://plugins.jetbrains.com/plugin/9960-json-to-kotlin-class-jsontokotlinclass-


Android Studioのpluginsで
json to kotlin class を打つと下記のようにプラグインが出ます。

![スクリーンショット 2021-02-28 17.13.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/880377/3ae1e8de-2092-59b5-f32b-3eff88a9c9fa.png)

インストールるしてIDEを再実行する。

![スクリーンショット 2021-02-28 17.19.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/880377/351053b8-b111-3f40-9b39-7dada559e454.png)


new -> Kotlin data class File from JSON 又は

JSON データをコピーして Command + N を打つと


![スクリーンショット 2021-02-28 17.20.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/880377/6dea45ac-86a0-bae2-552e-3da409cd41b8.png)


上記のように出ます。

Kotlin data classes from JSONを押下した場合は

![スクリーンショット 2021-02-28 17.38.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/880377/4f7dc20e-7e96-4207-87f0-3bc4cb564728.png)


JSON形式を書ける画面とグラス名を書ける画面がです。

入力して Generateを押下すると入力したJSON値を用いて下記のようにデータクラスを生成してくれる。


![スクリーンショット 2021-02-28 17.39.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/880377/9b355f0e-01e8-ad3d-2c3c-43331996275f.png)
![スクリーンショット 2021-02-28 17.39.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/880377/895a6739-aec6-1e72-e175-413e1ef011ce.png)


API通信などで　Jsonをクラスを簡単に作って活用してみましょう！
初心者LaTeXユーザーにこそOverleafを使ってほしい！(Overleaf機能紹介)

# Overleafとは？
LaTeXで文書を書く時，一般的にはLaTeXのインストールをして，TeX LiveやVS Codeなどといった統合環境上でコンパイルをしていると思います．

[Overleaf](https://www.overleaf.com/project)とはクラウドベースのLaTeX専用のエディタです．
クラウド型なので，面倒な環境構築をする必要が一切ないことはもちろん，その他にも便利な機能を沢山備えています．
初心者LaTeXユーザーであっても，Overleafのテンプレートや補完機能の助けによってとりあえず文書ができるので，何もわからない初心者こそオススメです．

Overleafでは日本語文書を作成する場合に必要な操作があり，その方法についてはこのページの[最後](#Overleafで少し面倒なこと)に触れています．（日本語対応のクラウドLatexエディタ"Cloud LaTeX"もあるそうですが筆者は使用経験がありません．）

※この記事は，あくまでOverleafにどのような機能があるのかを紹介する目的で書いています．有料・無料プランの機能開放の最新情報については必ず公式ページを確認してください．→(https://www.overleaf.com/user/subscription/plans)



# Overleafのココがイイ！
#### テンプレートを選ぶだけですぐに書き始められる！
新規プロジェクトを作成するときに，まっさらなプロジェクト以外に，レポート，プレゼンテーション，ジャーナルなど様々な形式が用意されています．もし学会などでの指定フォーマットがある場合は，`Upload Project`で，zipファイルにまとめたものをアップロードすればいいだけです．
実験レポートのテンプレートはこんな感じです．
![テンプレート.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264475/e1db8033-672d-5cdd-bfd2-d09e43f524b3.png)

以下では，試しにTU Delftの非公式レポートを開いてみました．
もう論文を書けた気分になれますね．
あとは，画像の入れ方や表なんかは元のコードを参考にしながら書いていけば，気づけばあなたのレポートが完成しています．
![template2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264475/85b07198-54fa-5a0c-811e-2da799ac0b3d.png)

#### コードと文章の対応箇所がわかる
![jump.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264475/48c31ca4-3a61-087e-4735-2c0bac5c88b6.png)
この逆も然りで，pdf部分を選んでコード部分に飛ぶこともできます．

#### 自動コンパイルできる
![auto.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264475/631e8958-3b69-12fc-5b99-0ad1766ee050.png)
文書を書いている最中に勝手にコンパイルしてくれます．
`Recompile`の設定を変更することもできて，
  
- 自動コンパイルをオフにすれば，`Recompile`ボタンかCtrl+Sを押したときだけコンパイルします．
- コンパイルモードをFast (draft)モードにすれば画像を表示しないで，短時間でコンパイルできます．

#### パッケージのダウンロード不要
通常LaTeXでは，使いたいパッケージをダウンロードしてきて，コンパイラの見える位置に置いて，インストールして…と結構面倒な作業が必要です．
しかし，Overleafでは4000個程度のパッケージをサポートしていて，大抵のパッケージは`\usepackage`で使えています．少なくとも私が論文を書く時にパッケージがなくて困ったことはありません．
参考：[What packages do you support?](https://www.overleaf.com/learn/how-to/What_packages_do_you_support%3F)

#### 履歴が見られる
Historyボタンを押せば過去に編集した箇所が見られます．（無料プランでは全ての履歴が残るわけではありません．）
過去のファイルとの差分が見られたり，任意の状態にラベル付けをしておくこともできます．
![history1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264475/069ad1b3-9105-c1f1-253e-17bece5b90ed.png)
過去のバージョンに戻したい場合は，元の状態のファイルをzip形式でダウンロードできます．
![history2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264475/78d6dff7-8659-1ef5-6e4e-bdbdb3202026.png)


#### コラボレーション機能がある
無料プランだと一人までシェアができます．
コラボレーターの権限も選べます．(Read only / Can edit)

#### なんとDropboxやgit連携までできちゃいます．
Dropbox, git , GitHubとの連携が可能です．(2021年2月現在，無料プランだとできなくなっているかもしれません)
これで修論などの大きな論文でも安心してキープできますね．
例えば，GitHubからプロジェクトをインポートしたり，変更を加えたらOverleaf内からcommit/pushしたりできます．
![git.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264475/a8acbb79-161c-4883-bbca-a7a094749480.png)


#Overleafで少し面倒なこと

日本語の文書作成ではそのままだとコンパイルができません．以下の参考リンクを見て頂ければ，日本語文書もコンパイルすることができるようになります．
ここが唯一Overleafの面倒くさい点だと思います．
    
参考：[Overleaf v2 で日本語を使用する方法](https://doratex.hatenablog.jp/entry/20180503/1525338512)
[macOS][Swift5.3]マウスカーソルの画像をカスタマイズする方法

macアプリでプリセット以外のカーソルを表示する方法を見つけるのに時間がかかったため、誰かの役に立てばと思い書き記します。

#1. 環境
macOS: 11.2.1 Big Sur
Swift: 5.3.2
Xcode: 12.4

#2. 全コード
```swift:TestView.swift
import Cocoa

class TestView: NSView {
    
    private var trackingArea: NSTrackingArea?
    
    override func updateTrackingAreas() {
        super.updateTrackingAreas()
        if self.trackingArea != nil {
            self.removeTrackingArea(self.trackingArea!)
            self.trackingArea = nil
        }
        let options: NSTrackingArea.Options = [.mouseMoved, .mouseEnteredAndExited, .activeAlways]
        let rect = NSRect(origin: .zero, size: self.frame.size)
        self.trackingArea = NSTrackingArea(rect: rect, options: options, owner: self, userInfo: nil)
        self.addTrackingArea(self.trackingArea!)
    }

    override func mouseEntered(with event: NSEvent) {
        let image = NSImage(named: "image_name")
        let cursor = NSCursor(image: image!, hotSpot: .zero)
        addCursorRect(self.bounds, cursor: cursor)
    }

    override func mouseExited(with event: NSEvent) {
        NSCursor.arrow.set()
    }
    
}

```

#3. 解説
対象のNSView自身と同じ大きさのトラッキング範囲を作成し、カーソルが出入りするとイベントを発火するようにします。

```swift
    private var trackingArea: NSTrackingArea?
    
    override func updateTrackingAreas() {
        super.updateTrackingAreas()
        if self.trackingArea != nil {
            self.removeTrackingArea(self.trackingArea!)
            self.trackingArea = nil
        }
        let options: NSTrackingArea.Options = [.mouseEnteredAndExited, .activeAlways]
        let rect = NSRect(origin: .zero, size: self.frame.size)
        self.trackingArea = NSTrackingArea(rect: rect, options: options, owner: self, userInfo: nil)
        self.addTrackingArea(self.trackingArea!)
    }
```
カーソルがトラッキング範囲に入ったタイミングでカスタムカーソルを表示します。プリセットのカーソルでは`set()`メソッドを使いますが、カスタムの場合`addCursorRect()`を使う必要があります。

```swift
    override func mouseEntered(with event: NSEvent) {
        let image = NSImage(named: "image_name")
        let cursor = NSCursor(image: image!, hotSpot: .zero)
        addCursorRect(self.bounds, cursor: cursor)
    }
```

上のコードの"hotSpot"は、カーソルの中でクリックを検知する座標を表します。矢印型のカーソルならばhotSpotを座標の左上に設定することで、見た目と動作を一致させることができます。


カーソルがトラッキング範囲を出たらデフォルトのカーソルに戻します。

```swift
    override func mouseExited(with event: NSEvent) {
        NSCursor.arrow.set()
    }
```

#4. 参考資料
https://stackoverflow.com/questions/50090601/how-to-set-a-custom-cursor-in-an-skscene-xcode-swift4-spritekit
node.jsでデータベースをherokuに接続できないの解決法

```
Unable to connect to the database: ConnectionError [SequelizeConnectionError]: self signed certificate
```
上記エラーが出たときloaderに下記コードを追加したら治りました。

```
    dialectOptions: {
  ssl: {
    require: true,
    rejectUnauthorized: false // <<<<<< YOU NEED THIS
  }
}
```
配列っぽいデータであれば必ず使えるforEach関数をつくろう！

# あらすじ
JavaScriptの`forEach`関数にはいくつか使いにくい部分があると思います！

1. *HTMLCollection*のような「配列のようだけど配列じゃない」データにたいして使えない。
2. *key*と*value*どちらも参照したい場合、第一引数が*value*、第二引数が*key*となるように指定しなければいけなくて、微妙に直感的じゃない。
3. PHPのforeachと比べると、書き順が違うので、どちらも使う職場では混乱する。

※ PHPのforeach: `foreach( $配列 as $キー => $値 ){ ...` 
※ JavaScriptのforEach: `配列.forEach( (値, キー) => { ...`

上記のような問題点を解決するため、オリジナルのforeach関数を作ってみました!

参考記事: [JavaScriptのループはどれが一番高速なのか
](https://qiita.com/keroxp/items/67804391a8d65eb32cb8)
参考記事: [文字列を数値に変換する方法と処理速度](https://stabucky.com/wp/archives/5502)

# コード

`for...in`を使います！

```JavaScript
function foreach( roopTarget, process ){
  for( const i in roopTarget ){
    if (!roopTarget.hasOwnProperty(i)) { continue; } // この行の必要性については、コメント欄をご覧ください。
    switch( process.length ){ // process が関数だった場合、 length で引数の数が判別できる。
      case 0: process(); break;
      case 1: process( roopTarget[i] ); break;
      case 2: process( Number(i), roopTarget[i] ); break; // i が文字列型になっているので、数値型に変換しておく。 // 文字列→数値変換は Number() が早いらしい。
      default: console.error('引数が多すぎます！'); return;
    }
  }
}
```

ちなみに、ループしたいオブジェクトが *NodeList* や *HTMLCollection* だった場合、
数値のキーと文字列のキーが混在しています。
中身の要素だけ処理したい場合は、switch文の前に「キーが文字列だった場合は処理しない」というコードを挟むといいと思います！
`if( isNaN(i) ) continue;`

# おわり
当初の問題を解決したforeach関数ができあがりました！
これを使えば `foreach( 配列, (キー,値)=>{ ...` という書き方で、
どんなデータでもforeachが使えるようになります！

「ここまでする必要あるのか？」
多分、まったく必要ないです！！

普通に `for...in` や `for...of` でぶん回すのが個人的には好きです！ ご拝読ありがとうございました！！

**謝罪**
すみません、投稿時点では `length`プロパティを使ってfor文でループするパターンの書き方も掲載していたのですが、
キーが文字列になっているオブジェクトに対して利用できないことに気づいて、削除しました。
Cargoの便利機能

#目的
Rustのツールについて知る

#WEB上でのRustお試し
[URL](https://play.rust-lang.org/)

#Cargo
ビルドシステムであり、パッケージマネージャー。
cargo buildでビルドできる。必要なライブラリのダウンロードとコンパイルを実施。

##Cargo test / cargo-tarpaulin
Cargo testでテスト実施可能
[Rust Unit Testとカバレッジ計測](https://tech-blog.optim.co.jp/entry/2019/02/19/173000)

##Cargo fix
ビルド時のwarningを自動で修正してくれる機能。

```rust:qiita.rs
fn main() {
  let a=1;//未使用変数なので_をつけるべき
  
  let mut s="Hello World";//書き換えていないのでmutは必要ない

}
```
ビルドはできるがwarningが出ている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680528/c0399f45-9821-93c0-fd62-3c3b6c89b737.png)

cargo fixで修正される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680528/9d270cc9-01a1-cf78-f024-3d5f573f74d2.png)

##Cargo doc
ソースコードと依存関係にあるクレート（Cでいうリンク関係にあるファイル）のドキュメント作成を行ってくれる。

以下のような関数とtraitを実装した場合。

```rust:qiita.rs
//共通のメソッドを実装するように促す仕組み
//これがないと同じ名前の関数は使用できない
trait  Show{
  fn show(&self);
}

struct Car;
struct RacingCar;

//implで構造体にメソッドを持たせる
impl Show for Car{
  fn show(&self){
    println!("Car");
  }
}

impl Show for RacingCar{
  fn show(&self){
    println!("RacingCar");
  }
}

fn main() {
  let car=Car{};
  car.show();//静的ディスパッチ

  let caa=RacingCar{};
  caa.show();//静的ディスパッチ
  
  let Car_vec:Vec<Box<dyn Show>>=vec![Box::new(Car),Box::new(RacingCar)];
  for i in Car_vec{
    i.show();//動的ディスパッチ
  }

}
```

どのようなfunctionやtraitがあるか、どの構造体にmethodが追加されているかなどがわかる。linkをポチポチして飛べる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680528/498d17b9-89b2-38fc-c842-1e0f34b05954.png)

##Cargo flamegraph
関数呼び出しのプロファイル結果を可視化したグラフを出力してくれる機能。
[プロファイリング](https://zenn.dev/termoshtt/books/b4bce1b9ea5e6853cb07/viewer/flamegraph)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680528/e85ecc97-30bb-6c38-3579-4e011f63b723.png)
2重ハッシュ


```Ruby
user_data = [
 {user: {profile: {name: 'Choco'}}},
 {user: {profile: {name: 'Ramune'}}},
 {user: {profile: {name: 'Sakura'}}},
]
```
ここからeachメソッドを使って全てのユーザーの名前を出力したいと思います。

ハッシュから特定の値を取得する場合はその値に対応するキーを指定します。

```
ハッシュ[取得したい値のキー]
```

2重ハッシュから特定の値を取得する場合は、取得したい値のキーまでを連続して指定します。

```
ハッシュ[取得したい値のキー][取得したい値のキー]
```

冒頭の記述では配列の中にハッシュが格納されています。
ハッシュの１つ１つを取り出すためにeach文を用いて記述します。

```Ruby
user_data.each do |x|
  puts x[:user][:profile][:name]
end
```

ブロック変数をxとしました。
Rubyファイルの記述をまとめるとこのようになります。

```Ruby
user_data = [
 {user: {profile: {name: 'Choco'}}},
 {user: {profile: {name: 'Ramune'}}},
 {user: {profile: {name: 'Sakura'}}},
]

user_data.each do |x|
  puts x[:user][:profile][:name]
end
```

ターミナルでファイルを実行すると、順番にブロック変数xに代入されていき、全てのユーザーの名前が出力されます。

```
Choco
Ramune
Sakura
```

**補足**
※digメソッドを使って取り出す方法もあります。その場合は以下のような記述になります。

```Ruby
user_data.each{ |x| puts x.dig(:user, :profile, :name) }
```
【Laravel】route関数を使用する場合のSSL化対策

#SSL化する前の状態
bladeテンプレートのformのaction属性を`route`関数で記載。
`route`関数については[こちらの記事](https://qiita.com/tamakiiii/items/f474c79a9e50ddc59f06)で説明しています。

```
<form method="post" action="{{ route('profile.create') }}">
```

上記の記述だと、URLが`http://・・・`になってしまいます。
SSL化されていませんので遷移先の画面では遷移先では下記画面が表示されます。
![bladeエラー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554111/338c8209-f3d1-f630-8636-3397433f38eb.png)


ちなみに、「このまま送信」ボタンをクリックするとエラーになります。
エラーの原因は、action属性で指定したroute先にリダイレクトされているため（GETリクエストのため）です。

（formのaction属性にパスを直で指定した場合は、URLは`https://・・・`でした。なのでroute関数を使用しない場合は、今回のSSL化対策はしなくても大丈夫だと思います。）

#SSL化対策

`App/Providers/AppServiceProvider.php`に以下を追記する必要があります。

```:App/Providers/AppServiceProvider.php
<?php

namespace App\Providers;

use Illuminate\Routing\UrlGenerator;


class AppServiceProvider extends ServiceProvider
    public function boot(UrlGenerator $url)
    {
        $url->forceScheme('https');
    }
}
```

追記した後に、再度URLを確認すると`https://・・・`になっていました。

#おわりに
今回、`route`関数を使用した時のSSL化対策を記載しました。似たような関数で`url`関数がありますが、こちらもSSL化対策が必要だそうです。対策する場合は、下記記事が参考になると思います。
[Laravelで作ったサービスをSSL化した時にやったことと参考記事一覧](https://qiita.com/Yorinton/items/50b9c8e3102ac661f08c)

#参考
[LaravelのSSL化対策](https://webty.jp/staffblog/production/post-3209/)
swift optional型 まとめ

# はじめに
swiftのoptional型の基礎について学んだので，簡単にメモしました．

# 1. Force Unwrapping (optional!)
強制的にunwrapしてoptional型からvalueを取り出す．nilが絶対入らない場合に利用．

```swift
let myOptional: String?
myOptional = "hello"
let text: String = myOptional!
```

ただし，仮にnilが入ってしまってエラーになった時，複数のコードやファイルが存在した場合，その原因を見つけるのが大変になり，安全でない． → 2. Check for nil Valueを利用．

# 2. Check for Nil Value (if optional != nil {optional!})
1. Force Unwrappingより安全なアンラッピング．if文でnilか否か条件分岐．

```swift
let myOptional: String?
myOptional = nil
if myOptional != nil {
    let text: String = myOptional! //この部分が冗長
} else {
    print("myOptional was found to be nil.")
}
```

ただし，nil出ない時にも!を付けないといけないのは少し冗長． → 3. Optional Bindingを利用．

# 3. Optional Binding(if let safeOptional = optional {safeOptional})
以下のコードを例に，myOptionalがnilでなかったら，定数safeOptionalに代入．
これにより，if文内で!をつける必要がなくなる．

```swift
let myOptional: String?
myOptional = nil
//myOptional = "hello"
if let safeOptional = myOptional {
    let text: String = safeOptional
    print(text)
} else {
    print("myOptional was found to be nil.")
}
```

ただし，myOptionalがnilの時にdefault値を与えたい場合 → 4. Nil Coalescing Operatorを利用．

# 4. Nil Coalescing Operator(optional ?? defaultValue)
optionalがnilでない場合，その値をそのまま用いる．
optionalがnilの場合，defaultValueを用いる．

```swift
let myOptional: String?
myOptional = "good bye" // output: "good bye"
//myOptional = nil // output: "hello"
let text: String = myOptional ?? "hello"
print(text)
```

# 5. Optional Chaining(optional?.property, optional?.method())
optional型のclass or structのオブジェクトを生成した際に，Optional Chainingを利用．
optional?.property, optional?.method()で，オブジェクトがnilでない場合，property, methodにアクセスできる．

Optional Chainingなしとありの場合で比較．

## Optional Chainingなしの場合（安全で無い）
オブジェクトを生成していない場合で，プロパティを取り出すために，オブジェクトをforce unwrappingするとエラー → 安全で無い

```swift
struct MyOptional {
    var property = 123
    func method() {
        print("I am the struct's method.")
    }
}

let myOptional: MyOptional? //optional型のstructのオブジェクトを定義
myOptional = nil // output: error
//myOptional = MyOptional() // output: 123
print(myOptional!.property)//optional型のオブジェクトからプロパティを取り出すためには，オブジェクトをunwrapする必要あり
```

## Optional Chainingありの場合（安全）
optional?.property, optional?.method()で，オブジェクトがnilでない場合，property, methodにアクセスできる．

```swift
struct MyOptional {
    var property = 123
    func method() {
        print("I am the struct's method.")
    }
}

let myOptional: MyOptional? //optional型のstructのオブジェクトを定義
myOptional = nil // output: nil
//myOptional = MyOptional() // output: Optional(123)
print(myOptional?.property)// methodも同様のやり方
```

# まとめ
optional型の理解がかなり深まりました. どんどん活用していきたいですね.
実装とリリースが前後するのを前提としたGit運用フロー

業務で主に Ruby On Rails での開発を行っていますが、そこで得た知見や、失敗への対応などについて記します。

今回は「実装とリリースが前後する」場合に Gitの運用フローをどのようにするか、についてです。

## 現状(要件)

弊社は [アジャイルソフトウェア開発](https://ja.wikipedia.org/wiki/アジャイルソフトウェア開発) のうち、とりわけ [エクストリーム・プログラミング(XP)](https://ja.wikipedia.org/wiki/エクストリーム・プログラミング) を主体とした開発プロセスを採用していますが、その結果として、常に

> 短い開発サイクルで頻繁に「リリース」する

状態になっています。

これは「Webアプリケーション」というサービス形態からも必要なことで、より多様なチャレンジをより早く提供するために最適な方法だと考えていますが、一方、実装がやや前倒し気味に行われることもあって、「実装はしたけれども、リリースは待つ」こともよく生じます。

これに対応する方法として、一般的に考えられるのは

1. 新機能は「フラグで無効化」した上でリリースし、必要になれば「フラグを有効化」する
1. 新機能を実装したブランチのマージを遅らせる(待つ)

の 2つで、このどちらを採用するのかで「Gitの運用方法」そのものも異なってきます。

この両者を比較しながら、弊社では 2. の「マージを遅らせる」方法を採っているので、その説明も合わせて行います。

## 1. 新機能は「フラグで無効化」した上でリリースし、必要になれば「フラグを有効化」する方法

これは [フィーチャートグル](https://ja.wikipedia.org/wiki/フィーチャートグル) と言われる方法で、有名なところでは

* Google ([Google の巨大レポジトリとブランチ無し運用](http://2013.8-p.info/japanese/07-30-google-mainline.html))
* Flickr ([第3回 ブランチvs.フラグ](https://gihyo.jp/dev/serial/01/comparators/0003))

などが採用しています。

つまるところ、

1. 新機能を実装する場合には、その機能を「無効」にした上で、メインブランチにマージしてしまう
1. 利用開始までは、その機能は「無効」状態のまま、サービス全体のリリースに含めてしまう
1. 利用開始になれば、その機能を「有効」に変える

といった方法で、具体的な Gitの運用フローとしては [github-flow](https://gist.github.com/Gab-km/3705015) という名称で知られています。

この方法の良い点は

* ブランチが事実上一つなので、マージ時のコンフリクトの可能性をかなり少なく出来る
* 本番機でも「一部のユーザー」に新機能の提供が出来る
* 「古い機能」と「新しい機能」の共存を前提とした実装になるので、反映時のトラブルの可能性を少なく出来る

ということになり、かなり良いことずくめな印象です。

しかし一方、逆の面としては

* 「古い機能」と「新しい機能」の共存を前提とした実装に手間がかかる
* 動作確認が「機能OFFのままリリースした時」と「機能ONにした時」と実質的に2倍になる
* アプリケーションの実装が「フラグで無効化されている部分も含む」となって見通しが悪くなる

こともあって、開発上の負担も心配になるところです。

## 2. 新機能を実装したブランチのマージを遅らせる(待つ)

これは [フィーチャーブランチ](https://bliki-ja.github.io/FeatureBranch/) と言われる方法で、 特に Github での Pull Request (PR) はこの「フィーチャーブランチ」での開発を前提としたものと言えます。

これは、

* 機能実装時にメインブランチから「フィーチャーブランチ」を分岐させ、そのブランチで開発を行う
* 必要に応じて適宜、インテグレーション用のブランチなどにマージする
* 最終的にリリース時に、メインブランチにマージすることによって、その新機能を利用開始状態にする

という方法で、具体的な Gitの運用フローとしては [gitlab-flow](https://postd.cc/gitlab-flow/) という名称で知られています。

この方法は

* 「古い機能」と「新しい機能」の共存状態を考慮しなくて済む場合が多い
* 動作確認が「機能リリース時」だけに絞られる
* アプリケーションの実装内容が「使われている機能のみ」となって見通しが良くなる

といった面で開発面での負担軽減になりやすい方法ですが、一方で

* 実装に時間がかかったり、機能の利用開始時期が遅れるとマージ時にコンフリクトが発生する可能性が高い
* 「一部のユーザー」にだけ新機能の提供をする、といった方法でのサービス提供がしにくくなる
* 「古い機能」と「新しい機能」の共存を前提としない実装になるので、反映時にその部分の考慮不足があると不具合が生じる

などの面での注意を要します。

## ではどちらを採用しているか

結論としては弊社は 2. の「フィーチャーブランチ」での開発を主体としています。

理由としては、

1. 開発を早く廻すためには「ある程度のリスクが生じても、開発の負荷を減らす」ほうがメリットが多いと判断していること
1. 特に「利用開始が遅れることによるコンフリクト発生の可能性」については、出来る限りの対処を行っていること(内容については次回に記します)
1. 必要に応じて「フィーチャートグル」も取り入れて、一部テストや利用開始の遅延に対処するようにしていること(同上)

等があります。

実際にどのような工夫をして「フィーチャーブランチ」での開発を進めやすくしているかについてや、具体的に [gitlab-flow](https://postd.cc/gitlab-flow/) をどのように用いているかについては、次回に記載します。
TypeGraphQLでN+1問題を解決した話

## はじめに
GraphQLをサービスで使い始めて、N+1問題にぶち当たったのでその解決策を紹介する。

## プロジェクト構成
* Node.js
* TypeScript
* Express
* GraphQL(Apollo, TypeGraphQL)

## 実際何が起こったか
DBにはとあるレコードが入っており、それぞれに`userid`を保持している。
`userid`からユーザー名やメアドなどのユーザー情報を取り出すには、別の内部APIに問い合わせる必要がある。

GraphQLのスキーマはこのように定義している。

```graphql:schema.gql
type Query {
  record(id: Int!): Record
  records(name: String): [Record!]!
}

type Record {
  id: Int!
  name: String!
  user: User
  userid: Int!
}

type User {
  userid: Int!
  username: String!
}
```

レコードはこのように取得しているとする。

```ts:RootResolver.ts
@Resolver()
export class RootResolver {
    @Query(returns => [Record])
    async records(): Promise<Record[]> {
        const records = await conn.query(`
            SELECT
                id,
                name,
                userid
            FROM
                xxx
        `);

        return records;
    }

    @Query(returns => Record, { nullable: true })
    async record(
        @Arg('id', type => Int) id: number
    ): Promise<Record | undefined> {
        const records = await conn.query(`
            SELECT
                id,
                name,
                userid
            FROM
                xxx
            WHERE
                id = ?
        `, [id]);

        return records[0];
    }
}
```

このとき、N+1問題を気にせずに`user`リゾルバを書くことこのようになる。
`fetchUsers`は内部APIにリクエストを送ってユーザー情報を返す関数とする。

```ts
@Resolver(of => Record)
class RecordResolver {
    @FieldResolver()
    user(@Root() record: Record) {
        return fetchUsers([record.userid])[0];
    }
}
```

例えば`Record`を1件だけ取得する場合は、内部APIへのリクエストは1回で済むが、
一覧画面などで100件取得する場合は`fetchUsers`がほぼ同時に100回呼ばれることとなり、内部APIサーバーやDBの負荷が上がってしまう。

10件取得した場合のログ

```text
fetchUsers(0)
fetchUsers(1)
fetchUsers(2)
fetchUsers(3)
fetchUsers(4)
fetchUsers(5)
fetchUsers(6)
fetchUsers(7)
fetchUsers(8)
fetchUsers(9)
```

## 改善方法
リゾルバで即座にリクエストを送るのではなく、問い合わせたいIDを溜めて、バッチ処理で一つのリクエストに複数IDを載せて送ることでリクエストの量を削減させる。
※この場合、内部APIの方を複数IDに対応させる必要がある。

[DataLoader](https://github.com/graphql/dataloader)と[TypeGraphQL-DataLoader](https://github.com/slaypni/type-graphql-dataloader)を使うことでこれを簡単に実現できる。
`DataLoader`は遅延読み込みをするためのFacebook製のライブラリで、`TypeGraphQL-DataLoader`はDataLoaderをTypeGraphQLに適用させたライブラリである。


## 組み込み方法
ライブラリをインストールする。

```bash
npm i -S dataloader type-graphql-dataloader
```

プラグインを読み込む。

```ts
const server = new ApolloServer({
    schema: await makeSchema(),
    validationRules: [depthLimit(7)],
    plugins: [
        // これを追加
        ApolloServerLoaderPlugin({}),
    ]
});
```

`user`リゾルバをこのように修正する。

```ts
@Resolver(of => Record)
class RecordResolver {
    @FieldResolver()
    @Loader<number, User | undefined>(async (ids) => {
        const users = await fetchUsers([...ids]);
        return ids.map((id) => users.find((user) => user.userid === id));
    })
    user(@Root() record: Record) {
        return async (dataloader: DataLoader<number, User | undefined>) => {
            const user = await dataloader.load(record.userid);
            return user;
        };
    }
}
```

10件取得するとこのようなログになる。

```text
fetchUsers(0,1,2,3,4,5,6,7,8,9)
```

## おわりに
N+1問題は気づかずにDBや他のサーバーに負荷をかけてしまう可能性があるので注意して設計してほしい。
DataLoaderを使えば、意外と簡単に改善できるのでこれからも活用していきたい。