OmniAICreator/Qiita-1.07M huggingface dataset:
GolangでTemplateファイルをバイナリに含めて配布する方法

# 概要
GolangでTemplateを使った場合、実行ファイルと一緒にテンプレートファイルを配布する必要があります。
Statikライブラリを使わずに実行ファイルだけ配布すると以下のようなエラーが発生します。

```
panic: open ./hello_message.tmpl: The system cannot find the path specified.
```

Statikライブラリを使うと実行ファイルのバイナリにテンプレートファイルも一緒にビルドして配布することができるので今回はサンプルを作ってやってみます。



## Statik設置
```
$go get github.com/rakyll/statik
```

詳細内容は以下のリンク参照
https://github.com/rakyll/statik

# サンプルコードでやってみる！

## Goプロジェクト生成
```shell
$mkdir template_project
$ go mod init hello
$ vi hello.go
```

## hello.go作成
```go:hello.go
package main

import (
  "fmt"
  "bytes"
  "io/ioutil"
  "path/filepath"
  "text/template"

  // 以下の2行がstatik関連import
  _ "hello/statik"   //statikフォルダのパス

  "github.com/rakyll/statik/fs"
)

// Templateファイルに渡すデータを保存するStruct
type HelloTemplateRenderer struct {
	Name         string
}

func main() {

  var tpl bytes.Buffer

  helloTemplateRender := &HelloTemplateRenderer{Name: "Aki"}

  hello_message, err := getDataFromFile("hello_message.tmpl")

  if err != nil {
    fmt.Println(err)
    return
  }

  helloTmp, err := template.New("hello").Parse(hello_message)
  if err != nil {
    fmt.Println(err)
    return
  }

  helloTmp.Execute(&tpl, helloTemplateRender)
  
  fmt.Println(tpl.String())
  return
}

// ファイル名からStatikファイルシステムを利用してファイル内容を取得
func getDataFromFile(fileName string) (string, error) {

	filePath := filepath.Join("/", fileName)
	fileSystem, err := fs.New()
	if err != nil {
		return "", err
	}

	file, err := fileSystem.Open(filePath)
	if err != nil {
		return "", err
	}

	defer file.Close()

	fileContent, err := ioutil.ReadAll(file)
	if err != nil {
		return "", err
	}

	return string(fileContent), err
}


```

## Templateファイル作成
```text:template/hello_message.tmpl
Hello My name is {{.Name}}.

```

## Statikファイル生成
```
$statik -src template
```

statikコマンドを実行すると以下のようにstatikフォルダの下にstatik.goが生成されます。

```
├── go.mod
├── go.sum
├── hello.go
├── statik
│   └── statik.go
└── template
    └── hello_message.tmpl
```

## Build
Buildして実行ファイルだけ他のフォルダにコピーして、テンプレートなくても実行可能かを確認しました。問題なく実行できました。

Mac用実行ファイル生成

Templateファイルと入力した名前が画面に表示されました。

```shell:mac
$go build -o hello hello.go
$ ./hello
Hello My name is Aki.
```

Windows用実行ファイル生成

```shell:windows
$GOOS=windows GOARCH=amd64 CGO_ENABLED=1 CC=x86_64-w64-mingw32-gcc go build -o hello.exe hello.go
```
【Unity】3Dゲームでミニマップを表示させる方法

# この記事でできること
- 下図のようなミニマップを作成することができる。

![a06b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/4c50cd95-2c72-7f51-2342-d4f102b325e9.png)

# やり方

## ①ミニマップ用に、ヒエラルキーウィンドウでカメラを追加する。
- ディスプレイを確認しながら、カメラの位置を調整する。
- 2Dの場合、Z軸を-10とかにするとよい。

![a01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/6346a10e-d795-719c-f3c7-246a732c5204.png)

## ②プロジェクトウィンドウで、[Render Texture]を追加する。
![a02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/93d367d4-d761-4598-9d5e-ced1712decd9.png)

## ③ミニマップ用カメラのコンポーネントで、[Target Texture]に②のRenderTextureをアタッチする。
- 下図スクショでは、「MiniMap」という名称で、RenderTextureを作成している。(②の時点)

![a03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/3404162a-0403-e5b1-9caf-6a8aa68801fc.png)

## ④ヒエラルキーウィンドウで、[UI]から[Raw Image]を追加する。
- Canvas内に作成される。

![a04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/8817379e-5c7e-01e4-db98-ebc9481fd2ee.png)

## ⑤RawImageのコンポーネントで、[Texture]を②で作成したRenderTexureをアタッチする。
![a05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/47c6ad12-4790-2a9e-37a2-9264cb386de0.png)

## ⑥RawImageの位置やサイズを調整して完成。
![a06b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/123eaafd-7356-99d1-459b-985b2e02d9a1.png)
【Nuxt.js】API：GoogleMap

🎈 この記事はWP専用です
https://wp.me/pc9NHC-q8

# 前置き
![map.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/6b448040-69b9-fb7e-0168-d4bc012338ec.gif)

[Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/overview)
こちらのAPIを使用して
GoogleMapを表示させます✨🗺

APIって便利そうだけど
難しそうだな…😔

って思っている方は少なくないはず。

でも実は！！

コード自体はクイックスタートのコードがあるので
コピペだけで簡単に表示できてしまうんです❤️

どちらかというと
APIを使えるようにする
準備段階の方が時間がかかります😂笑
でも、やり方さえ分かれば
他のAPIを使う時のハードルも
かなり低くなってきますよ♪

それではやっていきましょう✨✊

# Google Cloud Platform でAPIの準備
## 大まかな流れ

1. Google Cloud Platform でプロジェクトを作成
2. そのプロジェクトで使いたいAPIを有効化する
3. 認証情報を作成、APIキーを発行する
4. APIキーを使って地図を表示させる

公式ガイド
https://cloud.google.com/resource-manager/docs/creating-managing-projects

具体的な設定などは後述しているので
まずは流れを把握しましょう🌟
APIキーはAPIを使うための鍵、
パスワードのようなものです✨🗝

## Maps JavaScript APIの使用条件と設定方法

### 使用条件
こちらのAPIは無料で使えますが、
クレジットカード情報の登録が必要です💳

有料にアップグレードしない限りは請求されません。
無料分がなくなっても
地図が表示されなくなるだけです👀

また支払い方法の設定だけでなく、
支払いをするアカウントの設定が必要です👨‍👩‍👧‍👦

料金についてはこちら
https://cloud.google.com/maps-platform/pricing/sheet?hl=ja

### 設定方法
こちらのサイトが分かりやすいです💕
https://lopan.jp/google-maps-use-api/



# コードを書いて実際に表示させる
## vue2-google-mapsのインストール

🎈 続きはWPでご覧ください👀
https://wp.me/pc9NHC-q8
GitのGUIツール Sourcetreeをインストールする

# はじめに
当記事は、Windows10にGitがインストール済みであることを前提としています。
そして、「CUIだと使いづらい！GUIのツールいいのないかなぁ？」って人を対象としています。

# Sourcetreeダウンロード
GitのGUIツールは様々なものがありますが、今回はいろんな参考書でもおなじみの『Sourcetree』を対象とします。
初心者でも見た目直観で分かりやすい画面なので、是非おススメです。

まずは、[https://www.sourcetreeapp.com/](https://www.sourcetreeapp.com/)にアクセスして、『Download for Windows』をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222607/62bc3e2d-fc3b-1e20-ff7d-d24706b1709a.png)

下記の通りチェックをONにして『Download』ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222607/df933c56-8ed3-91e6-3170-7b0c6e2c7b36.png)

# インストーラーの実行

ダウンロードした『SourceTreeSetup-3.3.9.exe』を実行します。

『実行』をクリック！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222607/278bf867-65c7-b36e-caa1-9ea409aaa0bd.png)

GitHubやGitLabを使う人にとっては、まずもって使うことないですが、Bitbucketのアカウント登録が必要です。
アカウントがない人は、｢Create one for free｣から作成しておいてください。
アカウントがある人は、Bitbucketをクリック！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222607/b1a5da6d-36ac-e9ab-18cd-fd22c1a7e4da.png)

ログインしてブラウザが下記の画面が表示されたらOK！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222607/48c5c914-bacf-a190-6e27-aac043f60c8e.png)

ブラウザを閉じると、インストーラーに「登録が完了しました！」と表示されます。
『次へ』をクリック。

下記の画面も『次へ』をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222607/c14f24a1-bb6b-a6f4-0034-13f85aa7168d.png)

また『次へ』をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222607/9feab865-51ca-27db-243c-0e04e592f038.png)

ユーザー名やメールアドレスを入力して『次へ』をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222607/745b9062-bf6a-6e88-20e9-1246595be8e9.png)

SSH云々は『いいえ』をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222607/8a0a7cf3-1674-ddb0-155a-96125dac6ff1.png)

下記のような画面が表示されたらインストール完了。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222607/f64b4f3c-0dad-a19a-0602-cdfae173cc47.png)


以上
会社proxy経由でCloud9の使用

## 課題：
会社proxyは443と80ポートしかアクセスできない。
cloud9は普通8080,8081,8082ポートでアプリケーションをアクセス。
## 解決：
nginxをインストールし、8080ポートのアクセスは80ポートにする。

### 追加した設定
```
  server {
    listen 8080;
    location / {
      //やりたいことを実施
    }
  }
```
### 下記はインストール時のデフォルト設定(削除しない)
```
  server {
    listen 80  
```
上記の設定でhttps://cloud9url/ で8080ポートの内容をアクセスできる。
[Terraform] mapのリストへのアクセスでエラーが出たら、これかも。

Terraformのaws_route53_recordで作成したリソースの変数を取得しようとしたら、エラーが出たので解決法を載せます。
使用しているTerraform/probider awsのバージョンは```Terraform v0.12.5 + provider.aws v3.4.0```です。

# エラー内容

```terminal
Error: Invalid index

  on main.tf line 124, in resource "aws_route53_record" "example_certificate":
 124:   name      = aws_acm_certificate.example.domain_validation_options[0].resource_rcord_name

This value does not have any indices.


Error: Invalid index

  on main.tf line 125, in resource "aws_route53_record" "example_certificate":
 125:   type      = aws_acm_certificate.example.domain_validation_options[0].resource_record_type

This value does not have any indices.


Error: Invalid index

  on main.tf line 126, in resource "aws_route53_record" "example_certificate":
 126:   records   = [aws_acm_certificate.example.domain_validation_options[0].resource_record_value]

This value does not have any indices.

```

# 使用したコード

```tf:main.tf

resource "aws_acm_certificate" "example" {
  domain_name               = "xxxxxxx.com"
  subject_alternative_names = ["*.xxxxxxx.com"]
  validation_method         = "DNS"

  lifecycle {
    create_before_destroy = true
  }
}

resource "aws_route53_record" "example_certificate" {
  name      = aws_acm_certificate.example.domain_validation_options[0].resource_rcord_name
  type      = aws_acm_certificate.example.domain_validation_options[0].resource_record_type
  records   = [aws_acm_certificate.example.domain_validation_options[0].resource_record_value]
  zone_id   = data.aws_route53_zone.example.zone_id
  ttl       = 60
}

```

# 解決方法

mapのリストにうまくアクセス出来ていないかったようです。
表記方法変えたらエラーなくなりました。

```terraform:main.tf
name      = aws_acm_certificate.example.domain_validation_options[0].resource_rcord_name
↓
name      = aws_acm_certificate.example.domain_validation_options.*.resource_record_name[0]
```


ちなみにterraform consoleを使えば対話的にリソースの確認も出来るのでデバッグに便利でした。

```terminal
$ terraform console
> aws_acm_certificate.example.domain_validation_options
[
  {
    "domain_name" = "*.xxxxxxx.com"
    "resource_record_name" = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.xxxxxxx.com."
    "resource_record_type" = "CNAME"
    "resource_record_value" = "xxxxxxxxxxxxxxxxxxxxxxxxx.xxxxxxxx.acm-validations.aws."
  },
  {
    "domain_name" = "xxxxxxx.com"
    "resource_record_name" = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.xxxxxxx.com."
    "resource_record_type" = "CNAME"
    "resource_record_value" = "xxxxxxxxxxxxxxxxxxxxxxxxx.xxxxxxxx.acm-validations.aws."
  },
]
>  
```
WindowsにGitをインストールする

# はじめに
当記事の対象は、まだGitを扱ったことがない方及び、初心者を対象としています。
WindowsにGitをインストールしてコマンドで操作するところまでを解説します。
Guiのツールを扱ったGitの操作解説については、今後別ページで解説する予定です。

# Gitのインストーラーのダウンロード

Gitのインストーラーは、[Git-scm.com](https://git-scm.com/download/win)からダウンロードできます。
下記の『64-bit Git for Windows Setup』をクリックして、インストーラーをダウンロードしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222607/388cc4cd-002a-5656-9364-057a3cb088d3.png)

# インストーラーの実行
ダウンロードしたインストーラーを実行します。

『実行』ボタンをクリック！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222607/1bee925e-0038-f7cb-971a-8e87b21f9fbe.png)

『Next』ボタンをクリック！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222607/d7d9a5e7-05a0-de88-d751-bf8d54b4a926.png)

インストール先のパスを指定します。
特に拘りがなければ、『Next』ボタンをクリック。
基本的に「次へ、次へ」でOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222607/3909e758-1359-9f0c-7b6a-900c7e66fe4e.png)

画像と同じとこのチェックをONにして『Next』ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222607/51bc6145-eecd-e835-f269-15571a037aba.png)

『Next』ボタンをクリック！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222607/eee176b3-75be-61af-53c3-4c8454f2626e.png)

『Next』ボタンをクリック！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222607/60210c3a-4a8e-223e-c7b3-74e181e7eff0.png)

『Next』ボタンをクリック！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222607/65b3ee79-7ba8-99a4-4ef7-9fa0f5f5b1d4.png)

『Next』ボタンをクリック！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222607/0df0583f-a1d3-3eaa-3a07-7819d169ee6f.png)

『Next』ボタンをクリック！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222607/d91ae5a1-2a4c-0cee-4970-c6b89e25effd.png)

『Next』ボタンをクリック！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222607/35136706-76ef-af32-4b82-605b8320803a.png)

『Next』ボタンをクリック！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222607/648e2972-ed85-bacf-663a-0ed8a951216b.png)

『Next』ボタンをクリック！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222607/b8037a04-71f9-ba6f-ef19-c46900a05dfa.png)

『Next』ボタンをクリック！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222607/de13c0e7-1eb5-8123-e210-0115c4d5006f.png)

『Install』ボタンをクリック！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222607/28025ab2-7227-64cb-04f9-feb00d54fc09.png)

インストール中・・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222607/9c3ad527-0932-b1d8-4fba-deaa0104c3ce.png)

『Next』ボタンをクリック！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222607/df0db48f-1008-926e-8525-29e22fbd2475.png)

以上でインストール完了。

# Gitの動作チェック

コマンドプロンプトを起動して下記のコマンドを実行

```
git --version
```

下記のようにGitのバージョンが表示されていれば、インストールは成功！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222607/b0cfde8b-d518-6c1b-e70c-0c3b3cb68f70.png)

次回、GUIツールインストール編につづく。
【VBA】シートをオブジェクト名で指定する

##デフォルトのシートオブジェクト名
デフォルトではSheet1(シート名) などとなっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700414/b896ae31-07be-60d4-1215-e4bb2a7fb21d.png)

##シートオブジェクト名を変更
デフォルトのままでもいいけど、分かりやすい名前に変更すると扱いやすい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700414/d768b11a-643c-4e66-d432-a889d0b90e34.png)

#####セルの指定などに使うとこんな感じでスッキリするから好き
```VB
Sub MasterDataAdd1()
    '最終行のひとつ下にデータを追加する
    Dim LastRow As Long
    LastRow = Master.Cells(Rows.Count, 1).End(xlUp).Row
    Master.Cells(LastRow + 1, 1).Value = 10
    Master.Cells(LastRow + 1, 2).Value = "jjj"
End Sub
```
実行結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700414/e6f7a899-f3a1-8cad-3cdc-6e84d47a10fd.png)

#####TihsWorkbook～とかだとこんな感じ
```
Sub MasterDataAdd()
    '最終行のひとつ下にデータを追加する
    Dim LastRow As Long
    LastRow = ThisWorkbook.Worksheets("マスタ").Cells(Rows.Count, 1).End(xlUp).Row
    ThisWorkbook.Worksheets("マスタ").Cells(LastRow + 1, 1).Value = 10
    ThisWorkbook.Worksheets("マスタ").Cells(LastRow + 1, 2).Value = "jjj"
End Sub
```
長くなるしシート名を変更したとき面倒！
勝手にシート名を変更する人はよくいます。

##ワタシ流こだわり
どんなBookがActiveになっていてもちゃんと指定できるように
いつなんどきもシートオブジェクト名をつけたい！:point_up:
vscodeにGNU global

# はじめに
vscode使うはいいが、これコード参照大丈夫？
ソースコードの静的解析、定義先・参照先ジャンプといえばGNU global。

## env
```bash
$ uname -r
4.19.104-microsoft-standard
$ cat /etc/lsb-release
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=20.04
DISTRIB_CODENAME=focal
DISTRIB_DESCRIPTION="Ubuntu 20.04 LTS"
```
## global導入
```bash
$ sudo apt install global
```
## vscode plugin

- C/C++ GNU Global
  - https://github.com/jaycetyle/vscode-gnu-global/

```json:settings.json
{
  "gnuGlobal.autoUpdate": "Enabled",
  "gnuGlobal.encoding": "utf8",
  "gnuGlobal.globalExecutable": "/usr/bin/global",
  "gnuGlobal.gtagsExecutable": "/usr/bin/gtags",
  "gnuGlobal.gtagsForceCpp": "Enabled",
}
```

## 使い方

更新はコマンドパレット`shift + ctrl + P`から`Global: Rebuild Gtags Database`を選択・実行する

ソースファイルやヘッダフィルの中で、

- `F12`で定義に飛ぶ
- `shift + F12`で定義や宣言、呼び出しの一覧
- `shift + alt + F12`で全体からの一覧
  - サイドバーに出るので使うとしたら大規模なコードを追うときかな

## どうなった？

これで読むほうは楽になったかな。
書く時の支援は`Visual Studio IntelliCode` pluginを導入しておけばよかろう。
(IntelliCodeに不満がないわけではないが)
ios実機デバッグ時に、後からデバイスを追加する方法

タイトルについて1時間ほどハマったのでメモ。

# 背景
iPhoneで実機デバッグをしていたが、複数端末でデバッグする必要が出てきたので、iPadでも実機デバッグをしたかった。

# 環境
Flutter 1.20.2
Xcode 11.6

XcodeはAutomatically manage signingをオンにした状態

Flutter以外でも参考にはなると思います。

# 手順 
## appleのdeveloperコンソールでデバイスを追加
[デバイス一覧ページ](https://developer.apple.com/account/resources/devices/list)よりデバイスを追加します。
Device ID (UDID)の取得方法は[appleのサポート](https://support.apple.com/ja-jp/HT204073#itunes)の記事が参考になります。

## 過去のProvisioning Profileを削除
ここが**ハマりポイント**です。
XcodeはSigningを自動でしてくれる、Automatically manage signingという機能があります。これを設定すると自分でプロビジョニングプロファイル等を設定が自動化されるので大変便利です。
今回も自動でdeviceの追加が行われると思ったのですが、残念ながら`flutter run`を行った結果下のようになりました。

```bash
❯ flutter run
Launching lib/main.dart on iPad in debug mode...

Automatically signing iOS for device deployment using specified development team in Xcode project: XXXXXXXXX
Running Xcode build...

 └─Compiling, linking and signing...                        22.7s
Xcode build done.                                           55.0s
════════════════════════════════════════════════════════════════════════════════
No Provisioning Profile was found for your project's Bundle Identifier or your
device. You can create a new Provisioning Profile for your project in Xcode for
your team by:
  1- Open the Flutter project's Xcode target with
       open ios/Runner.xcworkspace
  2- Select the 'Runner' project in the navigator then the 'Runner' target
     in the project settings
  3- Make sure a 'Development Team' is selected.
     - For Xcode 10, look under General > Signing > Team.
     - For Xcode 11 and newer, look under Signing & Capabilities > Team.
     You may need to:
         - Log in with your Apple ID in Xcode first
         - Ensure you have a valid unique Bundle ID
         - Register your device with your Apple Developer Account
         - Let Xcode automatically provision a profile for your app
  4- Build or run your project again

It's also possible that a previously installed app with the same Bundle
Identifier was signed with a different certificate.

For more information, please visit:
  https://flutter.dev/setup/#deploy-to-ios-devices

Or run on an iOS simulator without code signing
════════════════════════════════════════════════════════════════════════════════
2020-09-01 15:39:49.021 ios-deploy[39025:240546] [ !! ] Error 0xe8008015: A valid provisioning profile for this executable was not found. AMDeviceSecureInstallApplication(0, device, url, options, install_callback, 0)
Could not run build/ios/iphoneos/Runner.app on XXXXXXXXX-XXXXXXXXX.
Try launching Xcode and selecting "Product > Run" to fix the problem:
  open ios/Runner.xcworkspace

Installing and launching...                                        25.8s
Error launching application on iPad.
```
原因としては、Automatically manage signingによって作成されたプロビジョニングプロファイルがデバイスを追加する前のままだったことです。したがって、以前のプロビジョニングプロファイルを一旦削除する必要があります。プロビジョニングプロファイルは
`~/Library/MobileDevice/Provisioning Profiles`に存在するので、削除します。

```bash
> cd ~/Library/MobileDevice/Provisioning\ Profiles
> rm xxxxx-xxx-xxxx-xxxxxx.mobileprovision
```

これで自動でXcodeが自動で新しいプロビジョニングプロファイルを作成し、deviceの追加が無事完了します。
scipy.interpolate.griddata で nan が出るときの対処メモ

## 背景

https://docs.scipy.org/doc/scipy/reference/generated/scipy.interpolate.griddata.html

`scipy.interpolate.griddata` で scatter point データを regular grid(pixel)で補間しようとすると nan が出る.

linear などの補間のときに起こります. nearest では生じません.

### 原因

グリッドの範囲がデータ点の凸包の外側にあると生じます. `fill_value` がデフォルト `nan` です.

たとえば `[-10, 10]^2` の領域で 1 刻みでグリッドを作っているが, データ点が `[-0.01, 0.01]^2` にまとまっている場合です.

特にエラーというわけではないので, なにもメッセージ出してくれないため最初手惑ってしまいますね.

### 対応

* nearest でよい場合は nearest を使う
  * nearest で変換したのち, 画像データとして linear/cubic 補間するとか 
* データ点の bounds を求めて, それを基準にグリッド範囲をうまく設定する
  * データ点が複数のクラスタを構成している場合は, クラスタ単位で処理したほうがいいかも. 
* あらかじめある程度グリッド領域を埋めるようにダミーのデータ点を作っておくか, 基準値(デフォルト値)がわかっている場合は `fill_value` オプションで補間がうまくいかなかったときの値を設定する.
とにかくNginxをインストールする (AWS Amazon Linux 2, CentOS7対応, 公式 ref.あり)

# 環境
- AWS EC2インスタンスにNginxをインストールすることを想定
- OS: Amazon Linux2もしくはCentOS7 (RHEL7系)**\*後から知りました**
- Nginx: 1.18.0 (latest, stable, 2020.8.31現在)
 
# Nginxをインストール
## Amazon Linux 2 の場合
amazon-linux-extrasリポジトリからインストールします

### インストール可能パッケージ一覧
```
$ amazon-linux-extras

...

 38  nginx1=latest            enabled      [ =stable ] #here
 39  ruby2.6                  available    [ =2.6  =stable ]
 40  mock                     available    [ =stable ]
 41  postgresql11             available    [ =11  =stable ]
 42  php7.4                   available    [ =stable ]
 43  livepatch                available    [ =stable ]
 44  python3.8                available    [ =stable ]
 45  haproxy2                 available    [ =stable ]
```

### Install
```
$ sudo amazon-linux-extras install nginx1
```

↓共通作業へ↓

### 参考
[Amazon Linux 2 EC2 インスタンスに Extras Library からソフトウェアをインストールする](https://aws.amazon.com/jp/premiumsupport/knowledge-center/ec2-install-extras-library-software/)
```

## CentOSの場合
公式リポジトリを追加してそこからインストールします

## 公式リポジトリを追加

```
$ vi /etc/yum.repos.d/nginx.repo
```

```
# 以下追記
[nginx-stable]
name=nginx stable repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=1
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true

[nginx-mainline]
name=nginx mainline repo
baseurl=http://nginx.org/packages/mainline/centos/$releasever/$basearch/
gpgcheck=1
enabled=0
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true
```

### Install

```
sudo yum install nginx
```

### 参考
[nginx: Linux packages](http://nginx.org/en/linux_packages.html)

# 以下共通作業

## Run & Auto-Run enable & Show status
Nginxを起動し、自動起動有効化、ステータス表示
（CentOSは7以降を想定しています、6以前だとコマンドが違うようです）

```
sudo systemctl start nginx && sudo systemctl enable nginx && systemctl status nginx
```

## Backup nginx.config
設定ファイルをバックアップします
**とても重要です、初めてNginxに触れる方は特に**

`/etc/nginx/nginx.conf`のバックアップ

```
sudo cp /etc/nginx/nginx.conf /etc/nginx/nginx.conf.back
```

**`/etc/nginx/conf.d/default.conf`がある場合(新しめのversion 1.18.0で確認)**
`/etc/nginx/conf.d/default.conf`のバックアップ
**確認できる範囲で、Nginx version1.12.0ではdefault.confの内容がnginx.confに記述されていましたが1.18.0ではconf.d/default.confとして独立したディレクティブとして存在しています**

```
sudo cp /etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf.back
```

# よく使うNginxコマンド

## 起動・ステータス表示・終了
コマンドはAmazon Linux 2, CentOS7共通で使用できます
Amazon Linux 2のベースはRHEL7で、これはCentOS7と同じだそうです
[amazon linux は何系のディストリビューションに対応する？ - スタック・オーバーフロー](https://ja.stackoverflow.com/questions/50113/amazon-linux-%E3%81%AF%E4%BD%95%E7%B3%BB%E3%81%AE%E3%83%87%E3%82%A3%E3%82%B9%E3%83%88%E3%83%AA%E3%83%93%E3%83%A5%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AB%E5%AF%BE%E5%BF%9C%E3%81%99%E3%82%8B)

```
$ systemctl start nginx

$ systemctl status nginx
● nginx.service - The nginx HTTP and reverse proxy server
...

$ systemctl stop nginx
```

## 設定を再読み込み(使用頻度高)

```
$ sudo systemctl reload nginx
```

## 自動起動有効化

```
sudo systemctl enable nginx
```
ionicをWindowsで開発し LiveReloadを行う

# ionicとは？  
1つのソースで、Web、Android、iOS、Windowsネイティブ等の複数のアプリを生成するハイブリッドフレームワークです  
ionicの特徴としては、Typescriptで記述し、Angular(React)フレームワークを使い、ネイティブ連携にCapacitor(Cordova)を使う事 
つまり、HTML、CSS、JavaScriptというWebの資産が利用出来る事にあります  
Vueも現在対応中とか！  
  
インストールもnpmで行います    
  
# Windowsとの相性  
公式曰く  
  

[https://ionicframework.com/docs/intro/environment:embed:cite]

>In general, we recommend using the built-in terminals. Many third-party terminals work well with Ionic, but may not be supported.
For Windows, Command Prompt and PowerShell are supported. WSL is known to work with Ionic, but may not be supported.
For macOS, the built-in Terminal app is supported.
Git Bash (from git-scm.com) does not support TTY interactivity and is not supported by Ionic.  
  
  
ビルトインのシェルを使ってくれ（Git bash等は対応していない）  
WindowsはCommandPromptとPowerShellは対応している。WSLは動くらしいけどサポートはしないよ  
  
まあ、iOSビルドもあるし、基本的にはMacで開発するのが当然のようだ  
  
  
# Windowsで開発してみた  
[https://murasame-labo.hatenablog.com/entry/2020/08/24/021358?_ga=2.222892443.1813986843.1598932755-2137747772.1590882580:title]  
先日記事にかいたが、とあるnodeのバージョンでは、起動時にエラーが出るという問題にピンポイントにぶつかったが  
基本的には問題なく動いた  

が、ライブリロードが効かないのである！！  
  
[https://github.com/microsoft/vscode-cordova/issues/495:title]  
など、様々なページでWindowsだとLiveReloadが効かないという話が出ている  
  
ionicの起動はお世辞にも速いといえない（私のMBPで30秒かかる）ので、これは何とかしたいものだ・・  
  
  
# WSL2を使ってみた  
公式からはサポートしないと言われているWSLを使ってみる  
私はWSL2にしているので、WSL1はどうなるかわからない  
  
まず、Windowsパス（/mnt/c の下）でionicを実行したが LiveReloadがされない  
このパスはWSLからみるとCloud9でマウントされたネットワークドライブなので  
挙動に問題があっても仕方がない  
  
次に、Linuxパス(例えば ~/ の下) でionicを実行すると LiveReloadが実行された！！  
しかも ionicは10秒で起動する  
とても快適な環境が構築された！
Golang - How to Use ON DUPLICATE KEY UPDATE in GORM?

```golang

data := &member{
    Country:    "TAIWAN",
    Id:         "JOHNNY",
}

db.
    Table("member").
    Set("gorm:insert_option", "ON DUPLICATE KEY UPDATE country = VALUES(country), id = VALUES(id)").
    Create(data)
```

https://kotlin.tw/golang/gorm-onDuplicate

https://stackoverflow.com/questions/6030071/mysql-table-insert-if-not-exist-otherwise-update
画面幅に応じてレイアウトを変化させたい


####レスポンシブWebデザイン
画面幅によって見た目が変わるようにWEBサイトやアプリケーションのデザインを設計すること

####１.表示領域を設定
>レスポンシブ対応を指定をしないと、スマートフォンで表示した時に、PCサイトのレイアウトをそのままスマートフォンの画面内に収まるように縮小して表示されるので、文字が小さくなり見づらくなってしまいます。
#

htmlファイルのheadタグ内に`<meta name="viewport" content="width=device-width, initial-scale=1.0" />`と記述します。これで表示領域の設定を完了しました。
>表示領域をviewportと呼びます。width="device-width"を指定することで、ブラウザの大きさをPCやスマートフォンなどの機器の大きさに合わせることができます。initial-scale=1.0は、画面の拡大率を「1.0」に設定しているため、拡大は行われません。

####２.画面サイズによってCSSを切り替える
表示された画面幅に応じて適用するスタイルを切り替える機能の分岐点をブレークポイントといいます。
![responsive.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694489/1c00ff66-f3cc-e196-2d66-1f9fd5509b83.jpeg)
2018年版ブレイクポイント(あくまでも目安です)
#
##### 以下はPC表示時はpタグのフォントサイズを30px、タブレット時は25px、スマホ縦時は20pxにするという記述です。
`/* PC表示時 */
p {
 　font-size: 30px
}
/* タブレット表示時 */
@media (max-width: 960px) {
  　p {
    　　font-size: 25px
  　}
}
/* スマホ縦表示時 */
@media (max-width: 480px) {
  　p {
    　　font-size: 20px
  　}
}`


`@media (max-width/min-width: 〇〇〇px) { }`という記述をメディアクエリと呼びます。
>他にもPC表示時は横並びのレイアウトをスマホ時には縦並びにしたり、marginの値を小さくしたりすることがあります。
jQueryが導入できないRuby on rails バージョン6.0.0の人に告ぐ、、瞬速jQuery導入法

ども、



今回はAjaxが導入できない人や、
ドロワーなどを実装しようとして記事丸コピしたが、
何故かできない人に向け、


<br>
基本に立ち返り、jQuery ほんんんとに導入できているか問題を解消スべく
この記事を書かせてもらいたいと思います。

<br>

この番組は

```
ruby '2.6.5'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.0'
# Use mysql as the database for Active Record
gem 'mysql2', '>= 0.4.4'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
```

の環境でお送りさせてもらいます。



では
まずは、
Gemfileからいじっていきましょ:relaxed:


```
gem 'jquery-rails'
```


こちらをみんなが読み込めるように一番下に追加！


続いてJavascript ファイルをいじりまそう

```javascript/application.js


require("@rails/ujs").start()
// require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')
require('../fadeIn')
require('./preview')


//= require rails-ujs 
//= require turbolinks
//= require jquery 
//= require jquery_ujs 
//= require_tree .
```

こんな漢字。



最後にこれを忘れているかが多いのではないでしょうか！？

config/webpack/environment.jsの設定です。

```config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    jquery: 'jquery',
  })
)
module.exports = environment

```

僕はここで完全に泥沼っていました笑



これで
以上です。


何か間違っている所があれば、
大変お手数ですが、この記事を見てくださった人が被害を受けないためにもコメントお願いします！！


jQUery入れたけどどこで使うねんという人にはこの記事がオススメ💖

[フリーターでも分かる、jQuery基礎](https://qiita.com/shunichfukui/items/597c146505f1509ca300)
[
jQueryでできること10選。動的サイトの制作やプログラミングを簡略化！]
(https://techacademy.jp/magazine/30852)

[めちゃ手こずったAjax　いいね機能作成、、メモ書きとして。Ruby on rails6.0.0](https://qiita.com/shunichfukui/items/78420065ac727bae2387)
ベンフォードの法則に沿うかを調べグラフ化するコードPython

```python:main.py
a=""" """
#この間にエクセル等から数字の列をコピペ

import collections
import matplotlib.pyplot as plt

a=a.split("\n")
a = [x for x in a if x != '']
#nullを削除
l_head=list(map(lambda x: str(x)[0], a))
#最初の文字を取得
l_count=collections.Counter(l_head).most_common(9)
#0を含むことがあるため上から9番目まで
#l_count.sort(key=lambda x: x[0])
#ソート
#グラフにした時に、123456789の順か、出現頻度の順かにソート。外すと123ごとに。

l_count
l_rate=list(map(lambda x: x*100 /sum(list(zip(*l_count))[1]), list(zip(*l_count))[1]))
#割合算出
l_index=list(zip(*l_count))[0]
l_rate
plt.xticks([0.15, 1.15, 2.15, 3.15, 4.15, 5.15, 6.15, 7.15, 8.15], l_index)
plt.bar(range(9), l_rate, color='g', width=0.3, label='Selected_data', align="center")
ben={1:30.1, 2:17.6, 3:12.5, 4:9.7, 5:7.9, 6:6.7, 7:5.8, 8:5.1, 9:4.6}
ben_label= list(map(lambda x: ben[int(x)], l_index))
plt.bar([0.3,1.3,2.3,3.3,4.3,5.3,6.3,7.3,8.3], ben_label, color='b', width=0.3, label='Benford_law', align="center")
plt.legend(bbox_to_anchor=(0.5, 1),loc=2)
plt.show()
```
例：
日本の行政単位ごとの人口
![Figure_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522233/99d9bae9-daca-23be-a018-b5f0177288b1.png)

日本の行政単位ごとの面積

![Figure_menseki.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522233/4ab30bf6-26db-c2aa-c5c5-e780c01ac9a7.png)

日本の行政単位ごとの人口密度
![Figure_mitsudo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522233/dcafe3cb-038b-3785-f0a1-74310ace1966.png)

日本の行政単位ごとの世帯数
![Figure_setai.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522233/3ef474d0-ba81-4439-0dbf-b7fdb56448a5.png)

ここに映る全ての数字
![bandicam 2020-09-01 15-12-32-599.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522233/68ab7717-c999-ab66-b64d-0671829bddbf.jpeg)
![Figure_zyoho.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522233/d6ddee30-074a-571c-2d00-bc1216e1c38b.png)

統計は統計局の数値から
https://www.stat.go.jp/data/index.html
【Git】最初にやる設定と設定内容の確認

###最初にやった方がいい設定

```
$ git config --global user.name "ユーザー名を入力"
$ git config --global user.email "Emailアドレス"
$ git config --global --global color.ui ture
```


###現在のGitの設定内容がどうなっているかの確認方法

```
$ git config -l
```

これでずらずらと設定内容が表示される。
YAMLはエントリのキーにJSONオブジェクトを使える

JSONに対する簡略表記としての活躍の陰に隠れて、YAMLがマップの各エントリのキーに文字列以外も使えることはあまり知られていない。YAMLは特有のデータ構造を持っており、JSONの従僕ではない。以下は完全に有効[^1]なYAMLファイルの例[^2]である:

```yaml
- [ YAML: separate ]
- [ : empty key entry ]
- [ {JSON: like}: adjacent ]
- [ [array, as, key]: value ]
```

もちろん、これをJSONに変換するような用途では、キーをそのままの形にしておくことはできない。例えば有名なNPMパッケージの`js-yaml`は、[これをJSONにしようとすると暗黙的に無理やり変換しようとする](http://nodeca.github.io/js-yaml/#yaml=LSBbIFlBTUw6IHNlcGFyYXRlIF0KLSBbIDogZW1wdHkga2V5IGVudHJ5IF0KLSBbIHtKU09OOiBsaWtlfTogYWRqYWNlbnQgXQotIFsgW2FycmF5LCBhcywga2V5XTogdmFsdWUgXQ==)[っぽいかもなのです](https://togetter.com/li/1152542):

```json
[ [ { YAML: 'separate' } ],
  [ { null: 'empty key entry' } ],
  [ { '[object Object]': 'adjacent' } ],
  [ { 'array,as,key': 'value' } ] ]
```

YAMLには canonical format と呼ばれる記法があり、その名の通り正式な形式のことである。これがYAMLのデータ構造の本質を表していると考えるといい。最初の例をそれで表記すると以下のようになる:

```yaml
%YAML 1.2
---
!!seq [
  !!seq [
    !!map {
      ? !!str "YAML"
      : !!str "separate"
    },
  ],
  !!seq [
    !!map {
      ? !!null
      : !!str "empty key entry"
    },
  ],
  !!seq [
    !!map {
      ? !!map {
        ? !!str "JSON"
        : !!str "like"
      }
      : !!str "adjacent",
    },
  ],
  !!seq [
    !!map {
      ? !!seq [
        !!str "array",
        !!str "as",
        !!str "key",
      ]
      : !!str "value",
    },
  ],
]
```

# 使い道

キーに文字列以外を使うようなやり方はかなり[黒い](https://www.google.com/search?q=%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E7%94%A8%E8%AA%9E+%E9%BB%92%E9%AD%94%E8%A1%93)ので、普通は避けるだろう。しかしとてつもなく格好がつく場合もある。例えば[音韻論では音声をブラケットで囲んで表記することがある](https://ja.wikipedia.org/wiki/国際音声記号#用法)。JSONでは以下のように書かなければならないデータを:

```json
{
  "基本子音": {
    "/i/": {
      "[ç̞ˡ]": "下寄り無声硬口蓋側面摩擦音"
    },
    "/q/": {
      "[ɋ͢ʩ]": "無声口蓋帆破擦音",
      "[ɋ͢ƨ]": "無声口蓋帆破裂音からの無声鼻孔摩擦音"
    }
  }
}
```

YAMLでは以下のように書けるということだ。

```yaml
基本子音:
  /i/:
    [ç̞ˡ]: 下寄り無声硬口蓋側面摩擦音
  /q/:
    [ɋ͢ʩ]: 無声口蓋帆破擦音
    [ɋ͢ƨ]: 無声口蓋帆破裂音からの無声鼻孔摩擦音
```

えへへ。

[^1]: YAML 1.2 に基づく。[マップの文法のBNFルール](https://yaml.org/spec/1.2/spec.html#id2798896)から辿っていくと、`c-flow-json-content`というルールに突き当たる。
[^2]: [仕様にある例](https://yaml.org/spec/1.2/spec.html#id2792785)をやや改変した。
BitriseでCarthage + Xcode 12 betaを使用してビルドする

#（2021.1追記）
CarthageのGitHubでワークアラウンドが記載されていました
https://github.com/Carthage/Carthage/blob/master/Documentation/Xcode12Workaround.md

#（2020.11追記）
https://blog.kishikawakatsumi.com/entry/2019/06/19/160150
を参考に、Carthageのビルド済みライブラリをダウンロードすることで、Bitrise上でビルドを行わないようにしたので諸々解決。

# エラー内容
- BitriseのCarthageステップにて以下のエラーが発生。

```
Build Failed
	Task failed with exit code 1:
	/usr/bin/xcrun lipo -create 

~~ 省略 ~~

This usually indicates that project itself failed to compile. Please check the xcodebuild log for more details: /var/folders/6q/wgy6jtp12w5gzgm9lzcglpqw0000gn/T/carthage-xcodebuild.50gMh8.log
Carthage command failed, error: exit status 1
```

>Please check the xcodebuild log

と表示されていたのでログファイルを開くと、ファイルの最後には`Build Succeeded`と表示されていた。

🤔

# 調査
- どうやら同じような内容で困っている方がいるらしい→https://github.com/Carthage/Carthage/issues/3019
- シェルスクリプトでxcconfigをごにょごにょすればいいらしい→https://github.com/Carthage/Carthage/issues/3019#issuecomment-665136323

# Bitriseへの適用
- Carthageステップの前にScriptステップに変更
- Script contentに以下を記述（上記リンクからほぼコピペ）

```shell

#!/usr/bin/env bash

# Copied this script from 'https://github.com/Carthage/Carthage/issues/3019#issuecomment-681825436'.

## コピペここから
set -euo pipefail

xcconfig=$(mktemp /tmp/static.xcconfig.XXXXXX)
trap 'rm -f "$xcconfig"' INT TERM HUP EXIT

# For Xcode 12 make sure EXCLUDED_ARCHS is set to arm architectures otherwise
# the build will fail on lipo due to duplicate architectures.
# Xcode 12 beta 6
echo 'EXCLUDED_ARCHS__EFFECTIVE_PLATFORM_SUFFIX_simulator__NATIVE_ARCH_64_BIT_x86_64__XCODE_1200__BUILD_12A8189n = arm64 arm64e armv7 armv7s armv6 armv8' >> $xcconfig

echo 'EXCLUDED_ARCHS__EFFECTIVE_PLATFORM_SUFFIX_simulator__NATIVE_ARCH_64_BIT_x86_64__XCODE_1200 = $(EXCLUDED_ARCHS__EFFECTIVE_PLATFORM_SUFFIX_simulator__NATIVE_ARCH_64_BIT_x86_64__XCODE_1200__BUILD_$(XCODE_PRODUCT_BUILD_VERSION))' >> $xcconfig
echo 'EXCLUDED_ARCHS = $(inherited) $(EXCLUDED_ARCHS__EFFECTIVE_PLATFORM_SUFFIX_$(EFFECTIVE_PLATFORM_SUFFIX)__NATIVE_ARCH_64_BIT_$(NATIVE_ARCH_64_BIT)__XCODE_$(XCODE_VERSION_MAJOR))' >> $xcconfig
## コピペここまで

envman add --key XCODE_XCCONFIG_FILE --value "$xcconfig"
```

# 説明
- スクリプトを動かせばいいことは分かったので、Carthageステップの前にScriptステップを追加した
    - 同じエラーが表示された
- Carthageステップの後にScriptステップを追加し、環境変数を表示すると、設定したはずの`XCODE_XCCONFIG_FILE`が存在しなかった
    - Scriptで設定した環境変数はステップごとに消えるっぽい
    - [公式ドキュメント](https://devcenter.bitrise.io/tips-and-tricks/expose-environment-variable/)にも以下のような記述がある

    >You can expose Env Vars from one Step and make it available for every other Step performed after the Step during the build. You can use envman to manage Env Vars.
（訳）あるステップからEnv Varsを公開し、ビルド中のステップ以降に実行された他のステップでも利用できるようにすることができます。Env Vars の管理には envman を使うことができます。
- ステップ間で環境変数を維持できるように、上記の[envman](https://github.com/bitrise-io/envman/)を使用

# 最後に
- 同じビルド内であればワークフロー間も環境変数は維持されていた
- GitHubのissueなかったら詰んでました
- Beta 7が出たらスクリプト書き換えないといけなさそう

# 参考
- https://qiita.com/satoshi-baba-0823/items/4387f4f11010ddda2c14
Win10独自のsshクライアントキーの権限設定

リモートしごとをするとき、SSHリモートログインサーバーは不可欠です。 ほとんどの人がXShellに行き、それからPuttyやMobaXTermなどの人もいます。 実際、Win10にはすでに独自のsshクライアントとサーバーがあるため、単にそれを使用するだけで、何もダウンロードする必要はありません。 sshクライアントの使い方を見てみましょう。キーは、対応するキーのアクセス許可です。

#ssh key
id_rsaという名前のファイル、会社のサーバーへの接続に使用する独自の秘密鍵がすでにあると想定しています。 -iを使用してパスを指定できます。ユーザー名の下の.sshフォルダーに配置することをお勧めします。


次に、ログインを試みます。エラーが発生する可能性があります。他のログイン方法も報告する可能性が非常に高く、秘密鍵ファイルの権限が公開されすぎています。 つまり、他の人があなたの秘密鍵を簡単に見ることができる場合（id_rsaファイルのアクセス権に制限はありません）、sshはあなたの秘密鍵を無視します。

`PS C:\Users\wangyueheng> ssh -p 30000 wangyueheng@1.2.3.4
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@         WARNING: UNPROTECTED PRIVATE KEY FILE!          @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Permissions for 'C:\\Users\\wangyueheng/.ssh/id_rsa' are too open.
It is required that your private key files are NOT accessible by others.
This private key will be ignored.
Load key "C:\\Users\\wangyueheng/.ssh/id_rsa": bad permissions
wangyueheng@10.246.254.81: Permission denied (publickey).`

linux環境だったら、

`sudo chmod 600 ~/.ssh/id_rsa`

を実行して、他の人がこのファイルにアクセスできないようにします。
Windowsにはchmodコマンドはありません。 他の方法で権限を変更する必要があります。

id_rsaファイルの場合：右クリック-プロパティ-セキュリティ-詳細。 自分のコンピューターでは、属性は次のようになります。

![コメント 2020-09-01 143642.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/701414/9b125bb7-8a90-bcfb-b49b-3e1582276642.png)

![コメント 2020-09-01 143506.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/701414/ea4f42a8-f79c-06b6-b210-270bdbb1aeb2.png)


この秘密鍵ファイルはあなたに固有のものです。 その後、これを使用してサーバーにログインできます。
Genjitende wa, kono himitsuken fairu wa an
semantic-uiのinstallが失敗するとき

##　症状
SemanticUIの公式通りにインストールするとエラーが起きる。

```shell:shell
npm install gulp
npm install semantic-ui

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! semantic-ui@2.4.2 install: `gulp install`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the semantic-ui@2.4.2 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
...
```

## 解決法
FomanticUIをインストールする

```shell:shell
// semantic uiのモジュールを削除
npm uninstall semantic-ui

// インストール
npm install fomantic-ui
cd semantic
gulp build
```
AWSでサイト間VPNを作成する

### VPCを作成する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561175/93633e1d-baf6-e3ad-eec1-465893df56f2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561175/f5df2094-e524-f196-8ec4-fcd4e347dbee.png)

### VPCにサブネットを作成する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561175/95009cc2-fe87-72b7-38ec-cee95949c4e0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561175/1fb305b7-d343-af78-a3fb-b6bd7c1315fa.png)

### インターネットゲートウェイを作成して、VPCにアタッチする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561175/0ae399e4-38aa-4415-68b2-d87a2f0fdb22.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561175/4a3c5b0f-83ac-4c3d-b01b-a00d6bfcabf7.png)


### ルートテーブルを作成する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561175/dd89c896-fe1a-c529-8729-d4a19895410b.png)

### 仮想プライベートゲートウェイを作成する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561175/7e04fa1c-c586-386d-c589-3224a81a73c2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561175/a35fb18e-df00-9135-1d0b-77d6fd393e9a.png)

### カスタマーゲートウェイの作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561175/3c41f1ef-30e7-ef8f-a9de-9a52bfb2a585.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561175/d348a4e1-56a2-267e-a436-94c78a63e8a7.png)
ルーティングは通常は「動的」で良いです。

### VPN接続の設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561175/7b7f7a3f-1d2a-5ecb-b55f-997ed8e663cd.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561175/8995b066-59ed-b564-f54b-ca9382db0d9d.png)

### VPCルートテーブルの設定
作成したルートテーブルに対して、仮想プライベートゲートウェイへ向くように設定する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561175/6568927a-9676-5e27-8661-62c4cec7a552.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561175/bce45ed2-be9d-9333-87bc-d70ee44e4c40.png)

### VPN接続設定のダウンロード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561175/969ecfcf-ee7d-2fe4-8d90-dda1010abc62.png)
自宅のルータ機器を選択してダウンロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561175/2fd9122e-ac41-1968-7dc3-d79d988b9db2.png)
後は、各ルータで設定した内容を反映させればOK

## 参考文献
AWS Site-to-Site VPN ユーザーガイド
https://docs.aws.amazon.com/ja_jp/vpn/latest/s2svpn/SetUpVPNConnections.html
CircleCIでSystemSpec(RSpec)とRubocopを走らせる

#はじめに
CircleCIを使ってSystemSpec(RSpec)とRubocopを走らせてみました。

基礎的な学習から実際に使ったソースコードをまとめたので参考になれば幸いです。

#基礎学習

教材：
[入門ガイド - CircleCI](https://circleci.com/docs/ja/2.0/getting-started/)
[いまさらだけどCircleCIに入門したので分かりやすくまとめてみた](https://qiita.com/gold-kou/items/4c7e62434af455e977c2)

基本的な使い方を知るために公式で用意されている[入門ガイド - CircleCI](https://circleci.com/docs/ja/2.0/getting-started/)をやりました。
手を動かしながら学習できて、30分ぐらいで終わるのでおすすめです。

次に、[いまさらだけどCircleCIに入門したので分かりやすくまとめてみた](https://qiita.com/gold-kou/items/4c7e62434af455e977c2)を読みました。
こちらの記事は、CircleCIについてかなり詳細に説明されています。
最初にざっくり読んだ後、わからないことがあったらこの記事を読み直していました。

#CircleCIの実装
## 参考文献
公式の[CircleCI-Public/circleci-demo-ruby-rails](https://github.com/CircleCI-Public/circleci-demo-ruby-rails/blob/master/.circleci/config.yml)をベースに使い、[【circleCI】Railsアプリでgithubと連携してrubocopとrspecテストを走らせる](https://qiita.com/AK4747471/items/b2161784065f21cd1645)を参考にしながら実装しました。

公式サンプルは最新のバージョンが使われているため、Qiitaなどの参考文献が多くはありませんでした。

今回は最新のversion: 2.1を使います。

## 前提
- githubのアカウントをもっていること
- 既にrailsのプロジェクトがあること
- データベースにはMysqlを使用していること。
- rspec及びrubocopはインストール、設定済み

## 作成するファイル
- .circleci/config.yml
- config/database.yml.ci

## .circleci/config.yml

```yml:.circleci/config.yml
version: 2.1

orbs:
  ruby: circleci/ruby@1.1.0

jobs:
  build:
    docker:
      - image: circleci/ruby:2.5.1-node-browsers
        environment:
          BUNDLER_VERSION: 2.1.4
    steps:
      - checkout
      - ruby/install-deps

  test:
    parallelism: 3
    docker:
      - image: circleci/ruby:2.5.1-node-browsers
        environment:
          DB_HOST: 127.0.0.1
          RAILS_ENV: test
          BUNDLER_VERSION: 2.1.4
      - image: circleci/mysql:8.0
        command: --default-authentication-plugin=mysql_native_password
        environment:
          MYSQL_ALLOW_EMPTY_PASSWORD: 'true'
          MYSQL_ROOT_HOST: '%'
    steps:
      - checkout
      - ruby/install-deps
      - run: mv config/database.yml.ci config/database.yml 
      - run:
          name: Wait for DB
          command: dockerize -wait tcp://localhost:3306 -timeout 1m
      - run: bundle exec rake db:create
      - run: bundle exec rake db:schema:load
      # Run rspec in parallel
      - ruby/rspec-test
      - ruby/rubocop-check

workflows:
  version: 2
  build_and_test:
    jobs:
      - build
      - test:
          requires:
            - build
```


## config/database.yml.ci

```yml:config/database.yml.ci

test:
  adapter: mysql2
  encoding: utf8
  pool: 5
  username: 'root'
  port: 3306
  host: '127.0.0.1'
  database: ci_test
```
UnityでAndroidの内部ストレージにファイルを保存する

#コード
```c#
using System.IO;

    public static DirectoryInfo SafeCreateDirectory(string path)
    {
        //ディレクトリが存在しているかの確認 なければ生成
        if (Directory.Exists(path))
        {
            return null;
        }
        return Directory.CreateDirectory(path);
    }

    public void Score_Save(string Directory_path,string date)
    {
        //データの保存
        SafeCreateDirectory(Application.persistentDataPath + "/" + Directory_path);
        string json = JsonUtility.ToJson(date);
        Writer = new StreamWriter(Application.persistentDataPath + "/" + Directory_path + "/date.json");
        Writer.Write(json);
        Writer.Flush();
        Writer.Close();
    }

    public Score Score_Load(string Directory_path)
    {
        //データの取得
        var reader = new StreamReader(Application.persistentDataPath + "/" + Directory_path  + "/date.json");
        string json = reader.ReadToEnd();
        reader.Close();
        return json;//使いやすいように変換してください
    }
```

#はじめに
そもそも論としてAndroidには他のアプリと共有できる共有ストレージやそのアプリケーションのみで使用できる内部ストレージなどがある

| 種類 | 内容 |
|:-:|:-:|
| アプリ固有のストレージ | アプリ専用のファイルを、内部ストレージ ボリューム内の専用ディレクトリ、または外部ストレージ内の別の専用ディレクトリに保存します。他のアプリがアクセスできない機密情報の保存には、内部ストレージ内のディレクトリを使用します。 |
| 共有ストレージ | メディアやドキュメントなど、アプリが他のアプリと共有するファイルを保存します。 |
| 設定 | 非公開のプリミティブ データを Key-Value ペアで保存します。 |
| データベース | Room 永続ライブラリを使用して、構造化データを非公開のデータベースに保存します。 |
[・データ ストレージとファイル ストレージの概要](https://developer.android.com/training/data-storage?hl=ja)

`getFilesDir() または getCacheDir()`にUnity上でアクセスできれば保存できるっぽい
#Unityだと
[Application.persistentDataPath](https://docs.unity3d.com/ja/2018.4/ScriptReference/Application-persistentDataPath.html)をつかえばいい感じにアプリ固有ストレージのパスの取得ができるらしい
ちなみにiosやwindwosの内部ストレージにもこれでいける

ちなみに[Application](https://docs.unity3d.com/ja/2018.4/ScriptReference/Application.html)でアプリケーション系の処理ができるので気になったら読んでみてもいいと思う

#Application.persistentDataPath
##結局`Application.persistentDataPath`は何なの？
A.内部ストレージのパスを返してくれる関数

```c#
using System.IO;

StreamWriter Writer = new StreamWriter(Application.persistentDataPath + "任意のファイルパス");
Writer.Write("任意のデータ");
Writer.Flush();
Writer.Close();
```

で保存ができる

```c#
using System.IO;

var reader = new StreamReader(Application.persistentDataPath + "任意のファイルパス");
string string = reader.ReadToEnd();
```

読み取りはこっち
【入門】TypeScriptの色々な型の作り方

最近、typescriptを勉強しはじめましたが、配列の中にオブジェクトが入ってる場合とかどう型を作るんだ？って思ったりしたので、typescriptについて初歩的な部分を書いていこうと思います。内容は随時更新していこうと思います。 

# TypeScriptとは
型定義できるJavaScriptです。
それまで型などなく、ウルトラ無秩序の世界に秩序をもたらすjavascriptのスーパーセットです。

詳しい説明は以下から。
[TypeScript の概要](https://qiita.com/EBIHARA_kenji/items/4de2a1ee6e2a541246f6)

# 型定義で使われる typeとinterfaceについて
両者にあまり違いはないようが、決定的な違いとしては、同じ名前の型を宣言した場合にinterfaceはマージされるが、typeはマージされないという違いがあるみたいです。

####interface
```javascript
interface test {
  name: string
}

interface test { // interfaceでは同名の型がマージされるのでエラーが発生しない。
  value: number
}
```
####type

```javascript
type test = {
 name: string
}

type test = { //typeでは同名の型がマージされないので、コンパイルエラーになる。
 value: number
}

```

このような違いから、ライブラリを作る場合とかはinterfaceを使用することが推奨のようです。

■参考
[TypeScriptのInterfaceとTypeの比較](https://qiita.com/tkrkt/items/d01b96363e58a7df830e)
[TypeScript の Interface と Type Alias の違い](https://qiita.com/SotaSuzuki/items/efe32e07e52dce329653)

# 型の作り方
可読性のためにinterfaceを使って作っていきます。

## プリミティブ型の場合

```javascript
let str: string = 'test'; //文字列以外が入ってきたらエラーになります。
let num: number = 1; //数字以外が入るとエラーになります。 
let bool: boolean = true; //真偽値以外が入るとエラーになります。 
```

## 配列型の場合

### 単純な配列
```javascript
const foo: number[] = [0, 1, 2, 3]; //数字以外が配列の中に入っているとエラーになります。
const foo: string[] = ["test", "foo", "bar", "foobar"]; //文字列以外が配列の中に入っているとエラーになります。
```

#### 配列の中にオブジェクト

```javascript
interface Array {
  value: number
  text: string
}

//”Array[]” or ”Array<Array>”とすることで配列の中にオブジェクトが入っている状態を表現することができます。

const fooArray: Array[] = [ 
  { value: 1, text: '文字' },
  { value: 2, text: '文字' },
  { value: 3, text: '文字' },
  { value: 4, text: '文字' }
]
```

#### 配列の中のオブジェクトの中に配列


```javascript
interface item {
  str: string
  num: number
}

interface Array {
  value: number
  text: string
  items?: item[] //プロパティに 「?」をつけることで全てのオブジェクトにitem配列がなくてもOKになる。
}

const fooArray: Array[] = [ 
  { value: 1, text: '文字' },
  { value: 2, text: '文字' },
  { value: 3, text: '文字' },
  { value: 4, text: '文字', items: [{
    str: '文字',
    num: 2
  }] }
]
```
## オブジェクト型の場合

```javascript
interface OBJECT {
  value: string
  num: number
  bool: boolean
}

const obj: OBJECT = {
  value: '',
  num: 2,
  bool: true
}

```
動的なkeyが入ってきて全て列挙するのが面倒な場合は以下のように作ることもできます。

```javascript

interface OBJECT {
　[key: string]: string
}

const obj: OBJECT = {
  value: '',
  num: 2,
  bool: true
}

```

##関数型の場合
#### 返り値がない関数の場合
voidと書くことで返り値がない関数を定義できます。

・返り値がない場合

```javascript
const func = (num: number):void => console.log(num)
```
・返り値がある場合

```javascript
const func = (num: number):number => num * 2
```

もちろん型のinterfaceを別に定義することもできます。

```javascript

interface argsType {
  first_name: string
　last_name: string
}

interface returnType {
 fullname: string
}

const func = (info: argsType): returnType => {
  return {
    fullname: info.first_name + info.last_name
  }
}

// 渡す引数がnumberだったりbooleanだったりするとエラーが起きるようになる。
// また、resultの中にfullnameのオブジェクトが入るってないとエラーになる。

const result: returnType = func({first_name: '晋三', last_name: '安倍'})
```

簡単な型の作りかたを書いてみましたが、もっとパターンは存在するので、加筆していこうと思います。
次回は、classとかを使って型を書いてみることにチャレンジしたいと思います。
Docker Imageからファイルを取り出す

## 要約
イメージから直接は取り出せないので以下のようにコンテナを起動して`docker cp`でコピーする

```bash
CONTAINER_ID=`docker create $IMAGE_NAME`
docker cp $CONTAINER_ID:$FILEPATH .
```

# 背景
バグや仕様調査のためにデプロイしたImage内のソースコードやファイルを取り出したいことがあります。
そのときにどうやればいいかの手順をまとめました。

# 対象ファイルパスを見つける
対象のファイルやディレクトリのパスがわかっていればよいのですが、そうではない場合は中身を調べて目的のものを見つける必要があります。

## シェルを利用して探す
だいたい/bin/bashや/bin/shが入っているはずなのでそれを利用して対話的にファイルを見つけます
`docker run --rm -it $IMAGE_NAME /bin/bash`

入ってなければDockerfileのベースイメージとして使い、インストールしたイメージを作ってしまうのも手です。

## diveでレイヤごとの差分を見て探す
[dive](https://github.com/wagoodman/dive) を利用することでレイヤごとにファイルツリーを見ることが出来ます。
特定のレイヤで追加されたことがわかっているような場合にはこちらのほうが素早く探せる場合があります。
`dive $IMAGE_NAME`

diveの使い方は以下の記事が参考になります。
https://qiita.com/t_o_d/items/625ad7a274ca34be3312

# 対象のファイルをコピーする
イメージからファイルは基本的には直接取り出せないみたいです。
そのため、以下のようにコンテナを起動して`docker cp`でコピーすることでファイル・フォルダをコピーできます。

```bash
# IMAGE_NAMEに対象のイメージ名、 FILEPATH に対象のファイルのDocker Image内のファイルパスをセット
IMAGE_NAME=me/my_application:1.0.0
FILEPATH=/app/scripts/woker/

CONTAINER_ID=`docker create $IMAGE_NAME`
docker cp $CONTAINER_ID:$FILEPATH .
docker rm $CONTAINER_ID
```