OmniAICreator/Qiita-1.07M huggingface dataset:
Rails password_digest(パスワード暗号化)

#### Railsでパスワードを暗号化（ダイジェスト）して保存
passwordを暗号化してDBに保存・利用するためのRailsでの設定方法。
1.カラム名は```password_digest```、データ型は```string```でカラム作成。  
2.has_secure_passwordをモデルに記述。

```rb:app/models/user.rb
class User < ApplicationRecord
  has_secure_password
end
```
has_secure_passwordで、
①パスワードの暗号化と保存
②登録フォームにpasswordとpassword_confirmation変数をモデルに追加し、パスワード確認に使用できる。
③認証用の```authenticate```メソッドが使える。  
3. bcrypt Gemの追加
Gemfileでコメントアウトされているので、コメントを外す。

```rb:Gemfile
# Use ActiveModel has_secure_password
gem 'bcrypt', '~> 3.1.7'
```
```bundle install```  

以上で登録時のパスワードを暗号化できます！
RとLaTeXと仲良くするTips

RとLaTeXと仲良くするtipsを備忘録として書きます。

## xtable
### \begin{table}を消す
floating = FALSE とすれば、\begin{table}を消すことができる。

```R
\begin{figure}[H]\center
<<vif_1, echo = FALSE, results=tex>>=
  print(xtable(table(1:5)), floating = FALSE)
@
\end{figure}
```

#### 参考文献
- https://stackoverflow.com/questions/26817467/r-creating-latex-tables-without-environment-code

## stargazer

### F統計量を表示しない

```R
stargazer(lm(y ~ x, data), omit.stat=c("f"))
```

### 無駄な余白を消す
no.space = TRUE　オプションで余白が減る! 

```R
stargazer(lm(y ~ x, data), no.space = TRUE)
```

### \begin{table}を消す

float = FALSE　オプションで、\begin{tabular} ~ \end{tabular}のみが出力される!

```R
stargazer(data, float = FALSE)
```

とする!

#### 参考文献
- https://stackoverflow.com/questions/50301396/how-to-omit-begin-table-in-stargazer-output
bootstrapについて

#目次
①Bootstrapとは
②Bootstrapを使うには？
③Bootstrapの考え方


##①Bootstrapとは
BootstrapはHTML／CSS／JavaScriptから構成される最も有名なWEBフレームワークのこと。


②Bootstrapを使うには？
https://getbootstrap.com/docs/4.3/getting-started/introduction/
上記を参考にして使う。starter templateを利用してすぐに使うことができる。


##③Bootstrapの考え方
bootstrapには「グリッドシステム」という考え方がある。
グリッドシステムはwebサイトの横幅を12個に均等に分けて、PC、スマートフォン、タブレットといったどんな端末においても最適な表示をしてくれる仕組みのこと。
コンテナとローとカラムという考え方がある。

コンテナは、グリッドシステムの外枠のクラスのことで、「ロー」、「カラム」と言う子クラスを持っています。まずはコンテナについて説明をする。

<b>・コンテナについて</b>。
コンテナは以下の表なサイズをもっているので、大きさを調節するときは画面幅に書かれているクラス名をかくことで指定ができる。

|名称   |ブラウザ幅                  |コンテナ幅                  |
|----------|--------------------------|----------------------|
|Extra small |極小（544px未満）       |基本コンテナ幅:auto(画面いっぱいに広がる)            |
|Small|小（544px以上 768px未満）|基本コンテナ幅:576px|
|Medium|中（768px以上 992px未満）|基本コンテナ幅:720px|
|large|大（992px以上 1200px未満）|基本コンテナ幅:940px|
|Extra large|特大 （1200px以上）|基本コンテナ幅:1140px|
|container-fluid|ウインドウ幅いっぱいに広がる。|サイズを狭くしたり、広げる事で流動的に変化|

<b>・ローについて</b>
ローは行に与えるクラスで、コンテナを水平に分割して上から下へ並べることができる。
ローの中にカラムも含まれている。

<b>・カラムについて</b>
カラムはローを縦に割り、左から右へ並べて表示をする。
12個のグリッドがあるので、カラムの合計が最大で「12」になるように数字を割り振る形になる。

|名称   |ブラウザ幅               |
|----------|-------------------|
|Extra small |極小（544px未満）  |
|Small|小（544px以上 768px未満   |
|Medium|中（768px以上 992px未満  |
|large|大（992px以上 1200px未満  |
|Extra large|特大 （1200px以上） |
AWS Backupの基本的な設定方法



### １　目的

この記事では、AWS Backupを用いたEC2バックアップ方手順について纏めます。


### ２　AWS Backupで最低限抑えて置きたい用語


![スクリーンショット 2021-03-28 17.09.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482612/b39123c7-7413-db88-48a0-5c5bd0ce5a46.png)

bakcupボールドは、バックアップしたオブジェクトを格納するための箱のようなイメージ。Defaultを使わず、backupボールドを新規に作成するメリットは①箱を分けることにより、管理が楽になる、②箱ごとにアクセスコントロール制御ができることな気がしました。

- ***backupボールド*** : バックアップを整理するためのコンテナ」であると説明されています。EC2 のバックアップである AMI 、RDS のバックアップであるスナップショットなどをまとめて管理するための器。
- ***復旧ポイント***：バックアップボールトにおいては、個々のバックアップは復旧ポイント（Recovery point）という単位で管理されます。復旧ポイントは、各サービスのバックアップと 1 対 1 で紐づきます。バックアップの実体を指し示すポイントとしてイメージすると分かりやすいかと思います。
- ***アクセスポリシー***:バックアップボールトにはアクセスポリシーを設定することができ、復旧ポイントに対するアクセス制御を行うことができます。特定のリソースタイプのバックアップのみ参照を許可したり、特定のユーザーに対してのみリストアを許可するといったことが可能となります。

backupプランによって、バックアップ対象となるリソースの指定（タグが楽）、その対象リソースのバックアップのスケジュールを指定します。

- ***backupプラン***: バックアッププランはどのリソースをいつどのようにバックアップするかを定義するものです。 JSON でポリシーのように設定することもできますし、GUI で設定することもできます。
- ***リソース割り当て***：　どのリソースに対してバックアップを実行するかは、リソースの割り当て（Resource assignment）によって定義します。一つのバックアッププラン内で複数のリソースの割り当てを設定できます。


### 3 手順
#### 3-1. バックアッププランを作成

バックアッププランでは、実行間隔やバックアップした対象オブジェクト（復旧ポイント）の保持期間を定義します。

バックアッププラン名を記入する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482612/0dadaf40-9f67-1433-7ef7-f6372c3aafbe.png)

バックアップルール名を記載し、バックアップボールド（復旧ポイントが格納される領域）、バックアップウィンドウ（バックアップを実施する時間帯）、保持期間（削除する日時）等を記載する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482612/8d11541d-ba2d-b50a-521f-50da292b5856.png)

### ２．リソースの割り当て

バックアッププランを作成したら、そのプラン内で実行する対象リソースを設定することができます。対象リソースをタグで設定するのが楽です。例えば、「Backupタグ」に「Backup－Rule-001」といったイメージです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482612/48eb92f7-4301-3cd2-0540-37e78786bfd1.png)


以上です。


### 参考文献

[AWS Backupの設定手順](https://dev.classmethod.jp/articles/backup-ec2-getbackup-001/)
[AWS Backupの概念図（非常に分かり易く感動しました）](https://dev.classmethod.jp/articles/aws-backup-perfect-understand/)
ROSの勉強　第39弾：デバッグの基礎まとめ

# #プログラミング ROS< デバッグの基礎まとめ >

##はじめに
1つの参考書に沿って，ROS(Robot Operating System)を難なく扱えるようになることが目的である．その第39弾として，「デバッグの基礎まとめ」を扱う．

##環境
#####仮想環境
|||
|:-:|:--|
|ソフト|VMware Workstation 15|
|実装RAM|2 GB|
|OS|Ubuntu 64 ビット|
|isoファイル|ubuntu-mate-20.04.1-desktop-amd64.iso|

#####コンピュータ
|||
|:-:|:--|
|デバイス|MSI|
|プロセッサ|Intel(R) Core(TM) i5-7300HQ CPU @ 2.50GHz 2.50GHz|
|実装RAM|8.00 GB (7.89 GB 使用可能)|
|OS|Windows (Windows 10 Home, バージョン：20H2)|

#####ROS
|||
|:-:|:--|
|Distribution|noetic|

##デバッグの基礎まとめ
以下のスライドにより簡単にROSツールをまとめた．なお，すべて網羅できているわけではない．
<iframe src="https://docs.google.com/presentation/d/1fyBnL7uztFJ-jxqzaHuI6gHwFGP3F1Tf4MCceZh7kBI/embed?start=false&loop=false&delayms=3000" frameborder="0" width="500" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

##感想
今回もスライドにまとめたということで非常に短いが，重要な部分を学ぶことができたと思う．デバッグは開発などにおいて非常に用いる頻度が高くなると思う．それを可視化して行える方法を学べたことは大きいのではないかと感じている．

そして，今回でようやく参考文献の一通りの学習を終えることができた．これでROSをプロのように使えるようになったわけではないが，ROSがどのようなものであるかということはある程度つかめたと思う．また，基本的なことであれば一通り何かを頼りに実装などはできそうである．この教材で学んだことはROSの基本的なところであり，もっと専門的なところはむやみにやるのではなく，必要であればその都度勉強して身に着けるということが大切であると思っている．これからもROSを活用していけたら思う．


##参考文献
プログラミングROS Pythonによるロボットアプリケーション開発
　　　　　　　　Morgan Quigley, Brian Gerkey, William D.Smart 著
　　　　　　　　　　　　　　　　　　　　　　　河田　卓志　監訳
　　　　　　　　　　  　松田　晃一，福地　正樹，由谷　哲夫　訳
　　　　　　　　　　　　　　　　　　オイラリー・ジャパン　発行
【やってみた】自作コマンドを実行する。

#経緯
ローカルでdockerを使用しているアプリケーションを起動する際に、毎回コンテナを立ち上げて、ログインする為の以下のコマンドを打っていたので、これらを省略してみようと思いました。

```
$ docker start コンテナ名
$ docker exec -it コンテナ名 bash
```


**今回の目標はこれらの事をコマンド一つで実行すること！**
下記のように条件分岐を入れてみます。

```bash
#コンテナが起動していなかったら、「コンテナ起動後にログインを実行。」という文言を出力して下記コマンドを実行します。
$ docker start コンテナ名
$ docker exec -it コンテナ名 bash

#コンテナが起動していたら、コンテナ起動済。ログインを実行。」という文言を出力して下記コマンドを実行します。
docker exec -it コンテナ名 bash
```

**※シェルはbashを使用します。**

#やってみた！

流れとしては以下の通りです。
①ホームディレクトリ配下に.binディレクトリを作成。
②.bin配下に実行ファイルを作成。
③.binのパスを通す。


**①ホームディレクトリ配下に.binディレクトリを作成**
このディレクトリ名は任意ですが、今回は.binと名前をつけます。

```bash
$ mkdir .bin
```

**②.bin配下に実行ファイルを作成**

```bash
# ここで作成したファイルが実行コマンドの名前となります。
$ touch .bin/startUp   
```

作成したファイルに実行したいシェルスクリプトを記述します。

```bash
$ vi .bin/startUp
```

```bash
#!/bin/bash
   
if [ ! "$(docker ps | grep コンテナ名)" ]; then
  echo "コンテナを起動後にログイン実行。"
  docker start コンテナ名
  docker exec -it コンテナ名 bash
else
  echo "コンテナ起動済。ログインを実行。"
  docker exec -it コンテナ名 bash
fi
```

**③.binのパスを通す**

※実行環境がbashなので.bash_profileに以下を記述します。(.bash_profileはコマンドライン起動時に実行されるファイル)

```bash
export PATH="$HOME/.bin:$PATH"
# 「$HOME」はホームでレクトリのパスの環境変数。  
# 「$PATH」は環境変数です。上記のような書き方をすると現状の$PATHの先頭に/Users/username/.binが追加されます。
# echo $PATH　で現在のPATHの状態を確認できます。
```

```bash
$ vi .bash_profile
```
```bash
eval "$(anyenv init -)"
export PATH="$HOME/.anyenv/bin:$PATH"
export PATH="/usr/local/opt/openssl/bin:$PATH"
export PATH="/usr/local/opt/openssl@1.1/bin:$PATH"
export BASH_SILENCE_DEPRECATION_WARNING=1
export PATH="$HOME/.bin:$PATH"  ← 今回追加！
```
パスを通したらシェルを再起動します。

```bash
$ exec $SHELL -l
```

いよいよ実行！ と思いきや権限がないと怒られました。。。

```bash
$ startUp 
bash: /Users/username/.bin/startUp: Permission denied
```

権限を確認します。

```bash
$ cd .bin
$ ls -l
-rw-r--r--  1 username  staff  299 Apr  7 10:29 startUp
#実行の権限が与えられていない!
```
実行権限である「x」がないためPermission deninedになる　


実行権限を与えます。「x」がついた！

```bash
$ chomd u+x startUp
$ ls -l
-rwxr--r--  1 username  staff  299 Apr  7 10:29 startUp
```

再度コマンドを実行！

```bash

# コンテナが起動していない場合
$startUp
コンテナを起動後にログイン実行。
コンテナ名
[root@０００００００/]# 

# コンテナが起動している場合
コンテナ起動済。ログインを実行。
[root@０００００００/]# 
```

文言が表示されてログインできました！！

これからも色々とめんどくさい作業をシェルスクリプトで簡略化していきたいですね。
指摘等なんでもコメント頂けるとありがたいです！

参考: 
https://qiita.com/fuwamaki/items/3d8af42cf7abee760a81
https://qiita.com/zayarwinttun/items/0dae4cb66d8f4bd2a337
https://qiita.com/takuyanin/items/18590600d077df707923
【Vue.js】Devtoolについて

#Vue.js Devtooltとは

Vue.js Devtoolsは、Vue.jsの開発をサポートする **Chromeブラウザの拡張機能**です。
これを導入するとconsoleを開かなくてもdataの中身などを確認することができるようになります。

#Vue.js Devtoolsの導入方法

下記URLにアクセスして拡張機能を追加します。

[Vue.js devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)

拡張機能を追加したら、拡張機能の設定画面を開き、「ファイルのURLへのアクセスを許可する」にチェックを入れます。

これをチェック入れていないと**ローカル環境で開発を進めている時にVue.js Devtoolsが使えないので必ずチェック**しましょう。

#実際にツールを覗いてみましょう

chrome の開発者ツールを開いてください。

タブメニューの一番左に、vueというタブが存在しているかと思うので、それをクリックして開いてください。

![Vu2EjS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1246814/efe08908-fd77-7326-7bce-4a7c311b2626.png)
開いたら、以下のような画面になっていると思います。左上のメニューから、それぞれ確認できるようになっています。

一番左のメニューは各コンポーネントの親子関係や、保持しているデータなどを確認できます。
![Ae4AEa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1246814/ea370427-484a-52c7-0ba1-e7c0453d8f67.png)

その左のメニューでは、Vuex の状態を確認できます。
![Eub8aA.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1246814/06f26956-23bb-3605-5cc6-24a406e4169a.png)
その左のメニューでは、イベントが実行された履歴を確認できます。
![AeGG2h.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1246814/2e69e2bf-55b1-66e5-d857-d4f1aec5a7ae.png)

まだ初期の状態なので、特にデータなどは確認できませんが、ツールの使い方は使いながら覚えていきましょう。
ruby で utf-8からsjisへの変換エラーに遭遇したときのメモ

本当はあんまりやりたくないんだけど、sjisでCSV出力する機能の実装が出てきたとき、不意にエラーになる。utf-8からsjisへの変換ができない文字があるからである。


たとえば波ダッシュ（"\u{301C}"）

```ruby
$ "\u{301C}".encode(Encoding::Windows_31J)
Traceback (most recent call last):
        3: from (irb):5
        2: from (irb):6:in `rescue in irb_binding'
        1: from (irb):6:in `encode'
Encoding::UndefinedConversionError (U+301C from UTF-8 to Windows-31J)
```

参考
https://osa.hatenablog.com/entry/2014/08/21/113602
https://qiita.com/Marusoccer/items/c1ff7213a250a2d62b4e

以下のように変換用のヘルパーを用意しとくと防げる。
ただ一対一の変換なので都度対応が必要だし、あんまりイケてない。

```ruby
module SjisSafeHelper
  def sjis_safe(str)
    return str if str.nil?
    return str if str.class != String
    [
      ["301C", "FF5E"], # wave-dash
      ["2212", "FF0D"], # full-width minus
      ["00A2", "FFE0"], # cent as currency
      ["00A3", "FFE1"], # lb(pound) as currency
      ["00AC", "FFE2"], # not in boolean algebra
      ["2014", "2015"], # hyphen
      ["2016", "2225"], # double vertical lines
      ["00A0", "0020"]  # 半角スペース
    ].inject(str) do |s, (before, after)|
      s.gsub(
        before.to_i(16).chr('UTF-8'),
        after.to_i(16).chr('UTF-8'))
    end
  end
end
```

メモ : String.encode では ノーブレークスペース（00A0）の対応ができなかった。
YouTube-dlをスクリプトで動かす話

#前置き
YouTube-dl使ってYouTubeの動画をmp4にしたくありませんか？
今回はYouTube-dlを使った時に直面した問題について書きたいと思います。

ただしこの記事ではYoutube-dlの導入方法は記述しないので各自調べてください。
#YouTube-dlとは
YouTube-dlは簡単に言うとYouTubeなどからの動画をmp4やmp3にすることができるコマンドラインプログラムです。

コマンドラインプログラムからわかるようにYouTube-dlはコマンドで一括で実行するものです。

でもスクリプトで記述したくありませんか？

そこでスクリプトで記述しました。

#スクリプト（問題解決前）
まず本来の書き方はこうです。

```
youtube-dl [OPTIONS] YouTube動画のURL [URL...]
```
これをコマンドラインで記述すると動きます。

ではここで問題が起こったときのスクリプトを見ましょう

```Python 
import youtube_dl

ydlmp4 = youtube_dl.YoutubeDL({'outtmpl': '[出力時のファイル名]','format':'bestvideo[ext=mp4]+bestaudio'})
ydlmp4.extract_info(
    [YoutubeのURL],
    download=True 
)
```
これです。ちなみにこれでもちゃんと動画はダウンロードはできます。
しかし

```
bestvideo[ext=mp4]+bestaudio'
```
この部分の[ext=mp4]というでmp4に設定しているのですがなぜかわかりませんがmp4ではなくmkvなどのmp4ではないファイナルで出力されてしまいます。
ただここで拡張子をmp4に変えるやり方もあるのですがあまり気分のいいものではないので使わないこととして
ここでこの問題に対する解決策を考えました。

#スクリプト（問題解決後）
ここでこの問題を解決するのに必要なのは

・ffmpeg
・moviepy.editor

がとても重要になってきます。
これを使ってスクリプトを記述します。

```Python
import youtube_dl
import moviepy.editor as mp
import os
import ffmpeg

#動画の出力
ydlmp4 = youtube_dl.YoutubeDL({'outtmpl': '[出力時のファイル名]','format':'bestvideo'})
ydlmp4.extract_info(
    [YouTubeのURL],
    download=True 
)
#音声の出力
ydl_opts = {
    'format': 'bestaudio/best',
    'outtmpl':  '[出力時のファイル名]' + '.%(ext)s',
    'postprocessors': [
        {'key': 'FFmpegExtractAudio',
        'preferredcodec': 'mp3',
         'preferredquality': '192'},
        {'key': 'FFmpegMetadata'},
    ],
}

ydlmp3 = youtube_dl.YoutubeDL(ydl_opts)
info_dict = ydlmp3.extract_info('[mp4で出力した時と同じYouTubeのURL]', download=True)
#mp4として出力されてものに.mp4を付ける
os.rename([出力時のファイル名], "[出力時のファイル名].mp4")

#映像と音声を合わせる
clip = mp.VideoFileClip('[出力時のファイル名].mp4').subclip()
clip.write_videofile('[mp4として出力されたファイル]', audio='[mp3として出力されたファイル]')
```
このスクリプトの説明をしたいと思います。

まず動画の出力のところ
先ほど言った[ext=mp4]で出力できないという問題に対して映像のみを出力するようにしました。この場合拡張子が何もついてない状態となります。ここでmp4の拡張子を付け足すことで音声のない映像となります。（gifみたいなものですね）

そして音声出力のところ
流石に音声がないといやなのでffmpegを使って音声を出力します。ここではちゃんとmp3の出力の設定をしとけばちゃんと動きます。

そして２つを合わせて出力する。
この動作はmoviepy.editorを使用しています。
これでできた動画はほぼ音声と映像との誤差がないのでほぼ完ぺきに出力されると思います。

#結論
とりあえずスクリプトで記述するならばこういう方法もあると思いますので、もしやってみたいという方は参考にしてみてください。

ただ注意してほしいのはちゃんと著作権には気をつけてください。それらに関しては一切の責任を負いません。
ゼロトラスト時代にはファイアウォールとかLAN機器とかを捨てるのかどうかあれこれ検討（１）

ここ数年、「ゼロトラスト」という言葉がよく出てきますが、言葉の意味を調べてみた。
参考としたのは、NIST SP800-207 Zero Trust Architecture new window


# 従来の境界線モデルとは？

    - 従来の組織（会社とか）ではLANと、外部（インターネット）を分け隔てて考えていた。
    - 組織の内部（社内）を守るためには、社内LANに入ってこないようにするというのが基本（ネットワークに着目）
    - うちと外の境界線には強固なセキュリティの防壁を作るべし
    - 外部の人が入ってこないようにするための、機器導入が当たり前
        - LANを守る機器（旧来）
            - ファイアウォール（パケットのヘッダ情報（入館証）を見て、不審者の侵入を防ぐ仕組み）
            - ファイアウォールの内側は信頼できる 
        - ヘッダ情報（入館証）を偽造されてファイアウォールの中に侵入されることがあり、いろいろ進化してきた
            - IDS（不正侵入検知）、や、IPS（不正侵入防止）が登場
            - WEBアプリケーションレベルの脆弱性に対する攻撃まではカバーできなくなり、WAF（WEB Application Firewall）が登場
            - アンチウイルスやアンチスパムも合わせて実行したくなりなんでも詰め込んだUTMが登場

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1273644/633ff6a9-d541-f72c-bc15-a8a8764807fa.png)

# ゼロトラストとは？
今の働き方はネットワークの境界線があいまいになってきた

あいまいになってきた背景としては。。。。

- 組織の拠点が増える
- クラウドサービス上に社内情報があり、家からでも、喫茶店からでもアクセスできる
- そもそも社内LANだけで業務しなくなった
- 持ち込み端末でも会社のメッセージのやりとりをあれこれしたい
- 海外でも国内と同じように業務をしたい


上記のような背景、社会変化、などをうけて、セキュリティは、境界線に防壁をおくだけではもはや防げなくなってきた。
ネットワークにはいったら安全という考えを捨てて、つねにネットワーク内部に脅威があると考えるべき。

場所は関係ない　＞＞　どこもかしこ信頼性ゼロ　＞＞　ゼロから信頼をつみあげないといけない　

これがゼロトラスト！


ゼロトラストの世界では、ネットワークに注目するのではなく、リソースに着目してセキュリティを考える。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1273644/c20971f8-423b-e718-35fc-520deb3a6264.png)

NECセキュリティブログより抜粋
https://jpn.nec.com/cybersecurity/blog/201016/index.html



NISTによる「ゼロトラストにおける7つの基本原則」

- NISTによる「ゼロトラストにおける7つの基本原則」 #データソースとコンピュータサービスは、全てリソースと見なす
- 「ネットワークの場所」に関係なく、通信は全て保護される
- 組織のリソースへのアクセスは、全て個別のセッションごとに許可される
- リソースへのアクセスは動的なポリシーによって決定される
- 組織が保有するデバイスは、全て正しくセキュリティが保たれているように継続的に監視する
- リソースの認証と認可は、全てアクセスが許可される前に動的かつ厳密に実施される
- 資産・ネットワーク・通信の状態について可能な限り多くの情報を収集し、セキュリティを高めるために利用する

参照: www.atmarkit.co.jp/ait/articles/2009/15/news007.html
Apple  APIをRuby on Railsで使ってみよう！

### アジェンダ
- この記事の対象者
- 開発環境
- 注意
- 目的
- 手順
- おわりに
- 参考資料

### この記事の対象者
- railsの基礎を学び、もう少し発展的な機能を実装してみたい！
- apiを使ってみたい！

### 開発環境
- Rails5
- windows10
- vagrant

### 注意
　アプリの準備等はご自身でお願いいたします。(scaffoldでもよい）
　その他each等の基礎事項については特に解説しておりません。
　
### 目標
　apple music上の曲を検索して自分のアプリで表示する

### 手順
1.itunes-search-apiのgemを導入する

```ターミナル.
 gem install itunes-search-api
```
2.ソースファイルを編集する
　１でインストールしたバージョンは古いので、対象ファイルを書き換えていきます。
　具体的には、アプリケーション/lib配下にitunes-search-api.rbファイルを作成し、
　その中に下記のコードを貼り付けます。

```lib/itunes-search-api.rb

require 'httparty'

class ITunesSearchAPI
  include HTTParty
  base_uri 'https://itunes.apple.com'
  format :json

  class << self
    def search(query={})
      get("/search", :query => query)["results"]
    end

    def lookup(query={})
      get("/lookup", :query => query)["results"]
    end
  end
end

```

今回は検索のみなのでlookupは不要な気がしますが、一応書いておきます。

3.検索機能を実装していく
- 任意のcontrollerファイルに下記を記述してみましょう。

```search.controller.rb
require 'itunes-search-api'
# この記述で先ほど導入したitunes-search-apiを呼び出す

def search
      @searchs = ITunesSearchAPI.search(
           :term => params[:term],
           :country => 'jp',
           :media => 'music',
           :lang => 'ja_jp'
           :limit => '4'
           )
           #limitで検索結果の表示数を決める。
           #4件では少ないのでページネーションを用いて数を増やした方が見栄えは良い。
end
```

これで検索して楽曲の情報を取り込むことはできるようになった。

4.検索結果をhtmlに出力する
では楽曲の情報がどのように取り込まれているのかを見ていこう。
search.controller.rbに記述を加える。

```search.controller.rb
require 'itunes-search-api'

def search
      @searchs = ITunesSearchAPI.search(
           :term => params[:term],
           :country => 'jp',
           :media => 'music',
           :lang => 'ja_jp'
           :limit => '4'
           ).each do |item|
                p item
           end
end
```
eachで一つひとつの楽曲の情報をターミナルに出力します。
ターミナルで"collectionId"=> ~~~~~~~ や"trackId"=> ~~~~~~~ という出力を探してみましょう。
その二つの ~~~~~~~ の数字が楽曲を表示する際に必要になるものです。
ではそれをもとにコードをかいていきましょう。

```search.html.erb
<% @searchs.each do |track| %>

       <iframe allow="autoplay *; encrypted-media *; fullscreen *" frameborder="0" height="150" style="width:100%;max-width:660px;overflow:hidden;background:transparent;" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation" src="https://embed.music.apple.com/jp/album/%E7%82%8E/<%= track['collectionId'] %>?i=<%= track['trackId'] %>"></iframe>

<% end %>

```
とても長いですね…
これはapplemusic公式サイトから埋め込みコードを引っ張ってきて、少々コードを改変したものです。
<%=track['collectionId'] %>, <%=track['trackId'] %>の中にeachで取り出した|track|の先ほどの数字が入るようになっています。

その前のstyle等は装飾の部分なので、ご自身で調べて変更するのもよいでしょう。

### おわりに
長くなりましたが以上になります。
track['']によって楽曲の情報を取り出せるので、使い方次第では詳細ページやいいね機能なども作れます。
もし気に入っていただけたらＬＧＴＭをしていただけると幸いです。
お疲れ様でした！

### 参考にしたサイト
https://qiita.com/eggman/items/88dd667fcc31086106fe

https://yatta47.hateblo.jp/entry/2017/11/18/115236
dockerコンテナ内でts-node-devのホットリロードを有効にする

環境
windows10
Docker Toolbox

## 結論

dockerコンテナ内でts-node-devのホットリロードを有効にするためには `--poll` オプションを付ける必要がある。

```console
$ ts-node-dev --poll ./src/bin/www.ts
```

(起動用のファイル`bin/www.ts`へのパスはディレクトリ構成に応じて書き換えてください。拡張子.tsは省略可)


## もう少し詳しく

dockerのNode.jsコンテナ内で、アプリケーションの雛形をexpress-generatorで作りTypeScriptに書き換えた。
開発時にコードを書き換えるたびTSからJSにコンパイルし再起動するのは面倒。
ts-node-devをつかうとコンパイルせずにTSのまま直接起動し、コードを変更したときには再起動してくれる。

ts-node-devをインストールする

```console
$ yarn add -D ts-node-dev
```

スクリプトを追加する

```json:package.json
"scripts": {
    "dev": "ts-node-dev ./src/bin/www.ts" // .tsは省略可
 }
```

ts-node-devで起動する

```console
$ yarn dev
```

起動したが、コードを変更しても再起動されない。

スクリプトに`--poll`オプションを追記する

```json:package.json
"scripts": {
    "dev": "ts-node-dev --poll ./src/bin/www.ts"
 }
```

再び`yarn dev`で起動後、コードを変更してみると再起動され、変更内容が反映されていた。

### もしかしたら

docker Toolbox ではなく docker Desktop をつかえば`--poll`オプションがなくてもホットリロードされるのかも？

追記:
docker Desktopでも`--poll`オプションが必要でした
flask-loginの仕組み概要

# 内容
Flaskでの認証に使えるflask-loginライブラリについて、仕組みを調査しました。

* クライアントとサーバー間のやり取り
* セッション情報の保存先

# ライブラリ
Flaskの認証で使えるライブラリをざっとググると、２つ見つかりました。
flask-loginの情報が多いです。
今回は、flask-loginについて調べます。

* [flask-login](https://github.com/maxcountryman/flask-login)
* [flask-jwt](https://pythonhosted.org/Flask-JWT/)

# flask-login
## 概要
セッションを使った認証のようです。

>Flask-Login provides user session management for Flask. It handles the common tasks of logging in, logging out, and remembering your users' sessions over extended periods of time.

>Flask-Login is not bound to any particular database system or permissions model. The only requirement is that your user objects implement a few methods, and that you provide a callback to the extension capable of loading users from their ID.

## クライアントとサーバー間のやり取り
デフォルトでは、Cookieを使うことがわかりました。

ただし、カスタムで関数を用意することで、Cookieを使う以外にも、HTTPヘッダーを使ったりできるようです。クライアントがブラウザだけでない場合も対応できますね。

[Custom Login using Request Loader](https://flask-login.readthedocs.io/en/latest/)

>Sometimes you want to login users without using cookies, such as using header values or an api key passed as a query argument. In these cases, you should use the request_loader callback. This callback should behave the same as your user_loader callback, except that it accepts the Flask request instead of a user_id.

Cookieに関する設定はこちら。

[Cookie Settings](https://flask-login.readthedocs.io/en/latest/#cookie-settings)

## セッション情報の保存先

flask-loginが言うセッションについて調べていくと、Flaskのセッションにリンクされています。

[Configuring your Application](https://flask-login.readthedocs.io/en/latest/#configuring-your-application)
>By default, Flask-Login uses sessions for authentication. This means you must set the secret key on your application, otherwise Flask will give you an error message telling you to do so. See the Flask documentation on sessions to see how to set a secret key.

Flaskのデフォルトでは、セッションの情報は、Cookieの中に保存されることがわかりました。

サーバー側のメモリなりDBなりに保存されるわけではないんですね。
サーバー側に保管したい場合は、Flaskの拡張機能を使えば良いようです。

[Sessions](https://flask.palletsprojects.com/en/1.1.x/quickstart/#sessions)

>A note on cookie-based sessions: Flask will take the values you put into the session object and serialize them into a cookie. If you are finding some values do not persist across requests, cookies are indeed enabled, and you are not getting a clear error message, check the size of the cookie in your page responses compared to the size supported by web browsers.

Besides the default client-side based sessions, if you want to handle sessions on the server-side instead, there are several Flask extensions that support this.
CSSのみで作る自動再生カルーセル（スライドショー）

同内容は、すでにあちらこちらにあふれているところ、お目汚し失礼します。

# できあがったもの

こちら https://codepen.io/sengokyu/pen/poRWzOr に置いています。

# 仕組み

3枚の画像でやる場合です。

* 画像①、画像②、画像③、画像①を横に並べる。
* 画像1枚分だけ見えるように、画像全体を`overflow: hidden;`なコンテナで包む。
* 左端の画像の`margin-left`を負の値にするアニメーションを設定する。

# 画像を横に並べる

まず、画像を隙間なく並べます。
右端の画像は、左端と同じものにします。

```html
<div class="center slide"
  ><img src="https://i.imgur.com/Y8WHhk2.jpg"
  ><img src="https://i.imgur.com/r0o8RoH.png"
  ><img src="https://i.imgur.com/ioUKL1K.jpg"
  ><img src="https://i.imgur.com/Y8WHhk2.jpg"
></div>
```

改行せず横並びになるようにします。

```css
.slide {
  white-space: nowrap;
}
```

# 画像全体を`overflow: hidden;`なコンテナで包む

画像1枚だけ見えるように、`overflow: hidden`なコンテナで包みます。サイズも指定します。

```css
.slide {
  white-space: nowrap;
  width: 300px;
  height: 300px;
  overflow: hidden;  
}
```

画像のサイズもコンテナにあわせます。

```css
.slide img {
  width: inherit;
  height: inherit;
  margin: 0;
  padding: 0;
  border: none;
}
```

# 左端の画像の`margin-left`を負の値にするアニメーションを設定する

まずキーフレームを作成します。
画像が3つ(重複分で+1)あるので、キーフレーム4つです。
キーの進行に応じて、100%ずつ左へずらします。

```css
@keyframes slide-4 {
  0% { margin-left: 0; }
  33% { margin-left: -100%; }
  66% { margin-left: -200%; }
  100% { margin-left: -300%; }
}
```

左端の画像（先頭子要素）にアニメーションを設定します。

```css
.slide > :first-child {
  animation-name: slide-4;     /* 作成したキーフレームを使う */
  animation-duration: 5s;    /* アニメーション全体を5秒にする */
  animation-delay: 0s;       /* 直ちにアニメーション開始する */
  animation-iteration-count: infinite; /* 永遠にアニメーションする */
}
```

# 画像の枚数を増減させるときは……

キーフレームの数を調整してください。

例えば、画像4つ(重複分で+1)のときはこうなります。

```css
@keyframes slide-4 {
  0% { margin-left: 0; }
  25% { margin-left: -100%; }
  50% { margin-left: -200%; }
  75% { margin-left: -300%; }
  100% { margin-left: -400%; }
}
```





# 参考リンク

* [【CSS3】@keyframes と animation 関連のまとめ](https://qiita.com/7968/items/1d999354e00db53bcbd8)
SharePoint でファイルやフォルダーが変更されたときにTeamsに通知してくれる



更新されたファイルのリンクを Teams でクリックできるようにしたかったのですが、少しハマったのでまとめました。
 
# フロー作成
元となるフローは `Power Automate のテンプレート` に含まれているので、検索して選択します。

1. 検索欄に `sharepoint teams` と入力して検索
2. 「特定のドキュメントがアップロードされたときにチームに通知する」を選択

![テンプレート選択](https://raw.githubusercontent.com/Kakimoty-Field/TechnicalMemo/master/PowerAutomate/img/010.png)

確認画面では「続行」ボタンをクリックします。

![確認画面](https://raw.githubusercontent.com/Kakimoty-Field/TechnicalMemo/master/PowerAutomate/img/020.png)

フローが展開されます
![フロー展開](https://raw.githubusercontent.com/Kakimoty-Field/TechnicalMemo/master/PowerAutomate/img/025.png)

# SharePoint 更新対象設定
更新通知したいSharePoint のフォルダを設定していきます。

0. 「アイテムまたはファイルが修正されたとき」の項目をクリックして開きます。
1. **サイトのアドレス** では、更新通知したいファイルが格納されている SharePoint のサイトを選択します。テキストボックスを選択すると、フロー作成ユーザがアクセス可能なサイト一覧が表示されます。
2. **リストやライブラリの名前** では `ドキュメント` を選択します。
3. **フォルダ** では、サイト内で監視したいフォルダを選択します。

![アイテムまたはファイルが修正されたとき](https://raw.githubusercontent.com/Kakimoty-Field/TechnicalMemo/master/PowerAutomate/img/030.png)

# フィルタ条件設定
「条件」の項目をクリックして開きます。

更新通知したいファイルを **ファイル名** や **ファイルの更新者** などを条件にして、フィルタリングすることができます。
![フィルタ条件](https://raw.githubusercontent.com/Kakimoty-Field/TechnicalMemo/master/PowerAutomate/img/040.png)

(キャプチャは「更新者の表示名」でフィルタする条件です)

# Teams 通知送信設定
## 通知の送信先設定
フィルタリングされた更新内容を Teams のチャネルへ通知させる設定をしていきます。

1. **投稿者** では `Flow bot` を選択します。
2. **投稿先** では `Channel` を選択します。
3. **Team** では 通知したいチームを選択します。テキストボックスを選択すると、アクセス可能なチーム一覧が表示されます。
4. **Channel**では チーム内のチャネルを選択します。テキストボックスを選択すると、チャネル一覧が表示されます。

![チャットまたはチャネルでメッセージを投稿する](https://raw.githubusercontent.com/Kakimoty-Field/TechnicalMemo/master/PowerAutomate/img/050.png)

## 通知メッセージ設定

**Message** テキストボックスに、Teams に通知したいメッセージを記述します。
`動的なコンテンツ` という変数のようなものをメッセージに含めることができます。
`HTMLタグ` や `Markdown` の書式でメッセージを装飾することもできます。
![メッセージ設定](https://raw.githubusercontent.com/Kakimoty-Field/TechnicalMemo/master/PowerAutomate/img/060.png)

# 保存とテスト
フローの設定が完了したら、フローのテストをします。画面右上の「テスト」をクリックします。
![テスト開始](https://raw.githubusercontent.com/Kakimoty-Field/TechnicalMemo/master/PowerAutomate/img/100.png)
今回は **手動** のテストを選択し「テスト」ボタンをクリックします。
「テスト」ボタンをクリックしたら [SharePoint 更新対象設定](#SharePoint-更新対象設定)で設定した SharePoint のフォルダにファイルを **アップロード** するか、**既存のファイルを更新** します。

![テスト準備](https://raw.githubusercontent.com/Kakimoty-Field/TechnicalMemo/master/PowerAutomate/img/110.png)

すると、Teams のチャネルにメッセージが投稿されます。
![テスト結果](https://raw.githubusercontent.com/Kakimoty-Field/TechnicalMemo/master/PowerAutomate/img/120.png)


## リンクがうまく表示できない場合
Teams に通知されたメッセージのリンク部分がうまく表示されないことがあります。下のスクリーンショットは、リンクのURLが そのまま表示されてしまっています。
![メッセージ](https://raw.githubusercontent.com/Kakimoty-Field/TechnicalMemo/master/PowerAutomate/img/070.png)

その場合は、「チャットまたはチャネルでメッセージを投稿する」画面で **コードビュー** モードにする必要があります。

![コードビュー](https://raw.githubusercontent.com/Kakimoty-Field/TechnicalMemo/master/PowerAutomate/img/055.png)

これで、`HTMLタグ` や `Markdown` がそのまま Teams に送信されて、キレイなレイアウトで投稿できるようになります。
VS Code 101 はじめてのVS Code②

# VS Code 101 はじめてのVS Code②

## 目的
* VS Codeを触らなくなって早1年
* 2か月後にチーム開発をするので、その開発環境？としてVS Codeを使うので改めておさらい
* この文章（Markdown)はTyporaで書いてます（VS Codeで書けよ）
* まずは使い方と、ドキュメントの管理をGitを使ってできればいいな。
* VS Code meetupで作られたハンズオン資料を使っています
* 前回はインストールして画面の確認を行いました。
* 今回は便利な使い方を確認してみます。

## 拡張機能をインストールして、コマンドパ レットから呼び出す
* VS Code では画⾯を操作する他にも「コマンドパレット」という、コマンドを呼び出して実⾏する機能があります。
* また、VS Codeは拡張機能（エクステンション）をインストールすることで、さらに強力なエディターへと姿を変えるとのこと。使って当然とのこと。
* F1キー で呼び出せる（表示 > コマンドパレット）
* この機能を使いこなすことでVS Codeが手放せなくなる（はず）

## コマンドパレットとは
* VS Codeで実行したいものを検索・あいまい検索を用いて実行するもの。
* コマンドパレットはVS Codeのすべての機能にアクセス（実行）できるとのこと
![image-20210324110227413.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543420/ee754a4f-1280-94e1-70e1-2f86611012f6.png)

## 拡張機能のインストール：VS Code Marketplace
### 拡張機能について
* Visual Studio Code Marketplaceには数多くの拡張機能が公開されています。
* 拡張機能をインストールすることで VS Code でできることを増やせます。多くの拡張機能では、インストールすることにより、コマンドパレットに新しいコマンドが追加されたり、既存の VS Code の機能と連携して動作します。

```
Visual Studio Code Marketplace 
https://marketplace.visualstudio.com/vscode
```

### インストールされている拡張機能の確認
* 拡張機能で 検索フォームを空白にすることで現在導入している拡張機能を確認できます
![image-20210324110934316.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543420/c95fa965-e3a9-e260-bc08-e6eb77bbe5fd.png)

### 拡張機能のインストール
* アクティビティーバーの「拡張機能」をクリックします
* サイドバーのキーワード⼊⼒欄に、追加したい機能を入力します（ここでは prettier）
* サイドバーの検索結果から、 Prettier をクリックします
  * エディタ 中に拡張機能の解説ページが開かれます
* サイドバーもしくは、エディタ中の解説ページの中の インストール をクリック します。
* 特にMarketplaceを意識することなくインストールできます（勝手にMarketplaceから一覧ができる）

![image-20210324112444467.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543420/fcbd1f99-7f02-88a5-af11-16456cec40b6.png)

### 拡張機能のアンインストール
* アンインストールしたい機能を選択します。
* インストールと同様にアンインストールできます

### 追加した拡張機能
* Markdown PDF
* Markdown All in One：目次の自動作成

## まとめ
* 今日はVS Codeの育て方を学びました。
* 拡張機能を入れることで普段の業務効率化を図ります。
* 今回はMarkdown関連の拡張機能を入れましたが、開発支援の拡張機能もたくさんあるので、Pythonの拡張機能を探してみようと思いました。
* 普段ダラダラしてる作業は自動化できます！
【初心者でもわかる】右クリックを禁止させる方法

#どうも7noteです。右クリックを禁止させる方法をまとめました

**・画像を保存させたくない**
**・クリック操作でコピペをさせたくない**
**・右クリックでソースをみられたくない**

理由はいろいろあるかと思いますが、1行で簡単に右クリックを禁止させる方法をご紹介。
逆に右クリック禁止のサイトで禁止を解除する方法についてまとめた記事も最後に紹介しています。

## 右クリック禁止にする方法

### 「サイト全体を右クリック禁止にする」

```index.html
<body oncontextmenu="return false;">
〜〜省略〜〜
</body>
```

bodyタグに`oncontextmenu="return false;"`を追加してください。
これだけでサイト全体を右クリック禁止にできます。

### 「特定の画像を右クリック禁止にする」

```index.html
<img src="画像のURL" oncontextmenu="return false;">
```

こんどはimgタグに`oncontextmenu="return false;"`を追加してください。
これでサイト全体ではなく、画像に対してだけ右クリック禁止をかけることができます。

## そもそも右クリック禁止にするメリットとデメリット


### メリット
・簡単に画像をコピーさせたりできなくする
・設定が簡単

### デメリット（というよりメリットの裏返し）

・右クリックの禁止だけでは、完全に画像コピーなどを防ぐことはできない
・設定が簡単だからこそ、知識がある人には容易に破られてしまう
・引用して画像を使ってもらうのをOKとしていた場合は逆に不親切。

このようにメリットとデメリットは常に一緒になって付いてくるので無理に対策をいれても対応できる範囲は限られています。
ですがwebにそこまで知識の無い方が乱用するような使われ方を防ぐには多少効果があるかもしれませんので、対策したい人は指定していて損はないのかなと思います。

## クリック禁止を禁止させる方法

指定されているjavascriptを無効化させる方法もあるようですので合わせて紹介しておきます。

https://qiita.com/rana_kualu/items/51230bfd903a7320eb55


## まとめ

右クリックの禁止は簡単に設定できるので、画像のコピペなどをされたくない人は入れておいていいのかなと思います。
ただ、他の方法で画像は簡単に取り出すことができるので、完全に防ぐのは難しいと思います。
そもそもネットに公開しているものなので、完璧に取られないようにする方が難しいのかも。
あくまで使われても、「こちらが先に情報開示したものです、マスターデータですよ」と証明できるようなサイトの作りにしておくほうが、そういう対策としては正しいのかもしれませんね。

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
Webページ表示の流れ

## URL（Uniform Resource Locator）
Webページを取得するとき、「`http://www.***/???`」のようなURLで、取得したいページをWebブラウザに指定する。
この中には、「どの手段で」「どのWebサーバーに」「どのコンテンツを」取得するかの情報が含まれる。
WebブラウザはURLをもとに、Webサーバーからコンテンツ（HTMLファイル）を転送してもらう。
![15EF485A-5E9E-4102-AE5A-5715B24D104E.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/999125/c62feb11-a381-66ea-1555-48dd0becf237.png)

## Webブラウザの解釈
転送されたコンテンツはWebブラウザがHTMLの内容を解釈し、見えやすい形に整形する（タイトルを大文字にするなど）。
## 他のファイルの転送
一度のコンテンツの転送で送られるファイルは1つであるため、他のファイル（画像など）が必要になった場合は、再度サーバーに転送要求する。
これを繰り返し、全てのファイルを揃えるとWebページの表示完了となる。

# 参考
[イラスト図解式 この一冊で全部わかるWeb技術の基本](https://www.amazon.co.jp/gp/product/B06XNMMC9S/ref=ppx_yo_dt_b_d_asin_title_o05?ie=UTF8&psc=1)
Herokuへのデプロイ

##AWS cloud9からrailsアプリをHerokuへデプロイ
・作成したrailsアプリをHerokuへデプロイする手順   
※ENVなどの設定は別途。そのままデプロイしてシークレットキーをさらさない様に注意！
#### 1.heroku-cliインストール(cloud9ターミナルでHerokuを操作するコマンドツール)
```$ sudo snap install --classic heroku```  
#### 2.Herokuへログイン 
```$ heroku login -i```

```
Enter your Heroku credentials.
Email: Herokuに登録したアドレス
Password: Herokuに登録したパスワード
```   
#### 3.プロジェクトへ移動(cdコマンド)
```cd ~/environment/プロジェクト/```   
#### 4.Herokuアプリ作成
```heroku create アプリ名(Heroku上の名前)```
※アプリ名は他者と重複不可の為、エラーが出たら名前を変えてみる。
```heroku apps```でアプリが作成されたか確認。
```git remote -v```でリモートリポジトリherokuを確認。  
#### 5.DBのHeroku設定(MySQLの場合)
Heroku標準DB(PostgreSQL)を使用するためにRailsの設定。
・Gemfileに以下を追加し、```bundle install --without production```

```rb:Gemfile
group :production do
　gem 'pg', '>= 0.18', '< 2.0'
end
```
・config/database.ymlの```production:```、```<<: *default```部分を以下のように修正

```yml:config/database.yml
production:
  adapter: postgresql
  encoding: unicode
  pool: 5
  database: message-board_production
  username: message-board
  password: <%= ENV['MESSAGE-BOARD_DATABASE_PASSWORD'] %>
```
※production:本番環境、development:開発環境(cloud9)   
#### 6.コミットを最新にし、```git push heroku main```でデプロイ
（エラーが出る場合```heroku stack:set heroku-18```後に再度実行)  

#### 7.Herokuアプリをブラウザで開く
``` `https://Herokuアプリ名.herokuapp.com/` ```
👉環境変数などの設定ができていないためエラーになる。  

#### 8.```heroku run rails db:migrate```でマイグレーション実行
再度ブラウザでアクセスするとエラーが出なくなる。  
【herokuコマンド】
logを確認    ```heroku logs```
環境変数確認 ```heroku config```
環境変数設定 ```heroku config:set 環境変数=値```
環境変数削除 ```heroku config:unset 環境変数```
※Heroku PostgreSQLアドオンの無料プランは、10,000レコードまで保存可能
Salesforce CLI Integration　v51.7.0　できなくなった事

#バージョン

####VScode
バージョン: 1.55.0

####CLI
sfdx-cli/7.81.0-7b953c80d1 darwin-x64 node-v12.18.3

####macOS
Catalina V10.15.7

####拡張機能
- Salesforce CLI Integration v51.7.0
- Salesforce Analytics CLI Integration v0.6.0



#できない

以下のメタデータが取得できなくなった。いわゆるTableauCRM関係の。

![スクリーンショット 2021-04-07 13.05.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385774/9b061118-5c8b-501e-942f-b3de9cb4c32c.png)



- WaveApplication
- WaveDataflow
- WaveDashboard
- WaveDataset
- WaveLens
- WaveRecipe
- WaveTemplateBundle
- WaveXmd


#対策
v51.7.0からv51.6.0に戻す



#参考文献

[Salesforce CLI Integration](https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode-core)
[CLIのバージョン情報](https://developer.salesforce.com/docs/atlas.ja-jp.sfdx_dev.meta/sfdx_dev/sfdx_dev_troubleshoot_cli_version.htm)
【Java アルゴリズム修行①】 基本ループ

##本記事の意図

**アウトプットを前提としていないインプットはうんこだよね**

と言われたのが頭の片隅から離れず、アルゴリズムを勉強しようと思い立ったものの、
やはり自分の中だけで消化するとそれまでなので、こうやって記事にしていこうと思います。

誰かのためとかではなく、純度100%自分のためなので、それでも「こんな書き方あるよ！」という聖人みたいな方がいらっしゃればコメントに書いて頂けるととても嬉しいです。
「お？　難しいアルゴリズムが学べるのか？」と期待している方はここで command+w してタブ閉じてくださいね！

それではレッツアルゴリズム！

###アルゴリズムって？

学ぼうとしているものってぶっちゃけ何なの？って感じ立ったので
念のためwikiさんに聞いたらこんな感じでした。

> 同類の問題一般に対し、有限回の基本的操作を、指示の順を追って実行すれば、
解がある場合にはその解が得られ、解がない場合にはそのことが確かめられるように、はっきりと仕組んである手順。」

[岩波国語辞典「算法」 via Wikipedia](https://ja.wikipedia.org/wiki/%E7%AE%97%E6%B3%95_(%E6%95%B0%E5%AD%A6))

プログラミングでいうところのループとか配列で繰り返し処理を施したりして
一つの解を求めたり、処理を作ったりする感じっぽいですね。。　触ってみにゃ分からん。

###基本ループ

何事も基礎から、、って言うことでまずは基本ループ。

`入力された数字の数だけ "Hellow World！"を出力してください。`

何のひねりもないですが、何事も基礎からなのでやってみます。
※アウトプットメインなので、言語化のためにもコメント多めとなりますが悪しからず。。


```java:algo.java
import java.util.Scanner;

public class Main {

    public static void main(String[] args){
        Scanner sc = new Scanner(System.in);
        // 入力された数字を int型の変数に格納
        int number = sc.nextInt();
        // 繰り返しカウントの数字を定義
        int a = 1;
        // 入力された数字分の要素を持ったString型の配列を生成
        String [] array = new String[number];
        // 一つ一つの要素に詰めていく
        for(int i = 0; i < array.length; i++){
            array[i] = "Hello World!";
        }
        // 拡張for文で要素分だけ出力（aはカウントの値）
        for(String b : array){
            System.out.println(a+ " > " + b);
            ++a;
        }
    }
}
```

```:出力結果
俺のmac % java algo.java
8
1 > Hello World!
2 > Hello World!
3 > Hello World!
4 > Hello World!
5 > Hello World!
6 > Hello World!
7 > Hello World!
8 > Hello World!
```

いけた！（ガッツポーズ！）　となりましたが、なんかfor二回使ってるのがブサイクって言われたので直してみます。。

```java:algo.java

import java.util.Scanner;

public class Main {
    public static void main(String[] args){
        Scanner sc = new Scanner(System.in);
        int a = 1;
        int number = sc.nextInt();
        // 入力された分だけ繰り返し出力する
        for (int i = 0; i < number; i++){
            // カウント数字は 後置インクリメントで増やしていく
            System.out.println(a++ + " > Hello World!" );
        }
    }
}

```

出力結果も変わらず、最初りよりスマートに書くことができました。

個人的には、とりあえず期待値が出力されるコードを書いてみて、その後に削れる処理がないかなどを見ていく流れを続けていきたいと思っています。。
アルゴリズムに関してはど素人なので、足掻くだけ足掻いて、一歩ずつ改善していければスタンスです。


###基本ループで学んだことは以下

* まずは入力値を基準としてループ数を考えてみる
* ループは常に配列を伴う必要はない  
→ 生成→要素の代入→繰り返し処理で出力という余分なプロセスが増えちゃう

基本ループだけでもついついまずは配列のlengthを考えて。。
という思考になりがちだということに気付けたので、やはり基礎、侮るなかれでした。。引き続きやっていきます！
アセンブリ言語　strdupを書いてみる　lldbを使ったデバッグの仕方も

## コード

追記 2021/04/10 9:34 mallocが失敗した場合のエラー処理を追記しました。

```nasm
extern	_malloc
extern	_ft_strlen
extern	_ft_strcpy
extern	___error

section	.text
	global	_ft_strdup

_ft_strdup:
	push	rbp
	mov		rbp, rsp

	sub		rsp, 0x8
	push	rdi

	call	_ft_strlen
	mov		rdi, rax
	inc		rdi

	call	_malloc
	jc		.err
	mov		rdi, rax

	pop		rsi
	call	_ft_strcpy

	jmp		.end

.err:
	push	rax
	call	___error
	pop		rbx
	mov		[rax], rbx
	mov		rax, -1

.end:
	leave
	ret
```

## malloc

mallocを使用するときは、rsp(スタックの一番上のアドレスが格納されるレジスタ)のポインタを16で割り切れる値にする必要あるようです。

そのため、subを使ってアドレスの値を調整しています。

```
sub     rsp, 0x8
```

## デバッグ方法

アセンブリ言語もlldbでデバッグできます。
lldbを起動中に以下のコマンドでレジスタの中身を見ることができます。

```
register read
```

```
(lldb) register read
General Purpose Registers:
       rax = 0x0000000100003f92  "aiueo"
       rbx = 0x0000000000000000
       rcx = 0x00007ffeefbff6f8
       rdx = 0x00007ffeefbff5b0
       rdi = 0x0000000100003f92  "aiueo"
       rsi = 0x00007ffeefbff5a0
       rbp = 0x00007ffeefbff4e0
       rsp = 0x0000000000000008
        r8 = 0x0000000000000000
        r9 = 0x0000000000000000
       r10 = 0x0000000000000000
       r11 = 0x0000000000000000
       r12 = 0x0000000000000000
       r13 = 0x0000000000000000
       r14 = 0x0000000000000000
       r15 = 0x0000000000000000
       rip = 0x0000000100003f34  a.out`ft_strdup + 9
    rflags = 0x0000000000010206
        cs = 0x000000000000002b
        fs = 0x0000000000000000
        gs = 0x0000000000000000
```

### その他のTips

```
## 関数にブレークポイントを設置
b func_name

## 実行
run

## すべてのレジスタを表示
register read -all

## 指定して表示
register read rax

## 指定して表示
p $rax

## レジスタのアドレスが指す値を確認
p *(char *)$rbx

## 実行する度に確認
display $rax
```
美文書作成入門[第8版]から Mac にインストールした TeXLive 2020 を TeXLive 2021 へアップグレードする

# はじめに
近頃、TeXLive が 2020 から 2021 にアップグレードされました。
私は自宅の Mac 環境で［改訂第8版］LaTeX2ε美文書作成入門の付属DVDからインストールしてたのですが、この場合、TeXLive のインストーラのデフォルトとは異なるディレクトリ構成になります。

そこで、TeXLive 2021 にアップグレードする際、設定を少しいじってインストールしたので、
その内容をメモとして残したいと思います。

# アップグレード前のディレクトリ構成
TeXLive の通常のインストールをした場合と美文書作成入門付属 DVDからインストールした場合のディレクトリ構成は以下のようになっています。([TeXWiki](https://texwiki.texjp.org/?TeX%20Live%2FMac#k03895bf))

| | TeX Live 2020 / MacTeX-2020 | ［改訂第8版］LaTeX2e美文書作成入門 |
|:-:|:-:|:-:|
|基本インストール|`/usr/local/texlive/2020`|`/Applications/TeXLive/Library/texlive/2020`|
|`TEXMFLOCAL`|`/usr/local/texlive/texmf-local`|`/Users/Shared/TeXLive/texmf`|
|`TEXMFHOME`|`~/Library/texmf`|`~/TeXLive/texmf`|

なお、自分の環境がどのような構成になっているかはターミナルで `tlmgr conf` を実行するとわかります。

TeXLive 2021 をデフォルト設定でインストールすると `TEXMFLOCAL`, `TEXMFHOME` が TeXLive 2020 標準と同じ`/usr/local/texlive/texmf-local` 等になってしまいますが、私は`/Users/Shared/TeXLive/texmf`以下に源ノ明朝フォントをインストールするなどしているため、変更されたくありません。
インストール先はデフォルトだと `/usr/local/texlive/2021` で、これは特に問題ないかもしれませんが、2020 と 2021 が全く別のディレクトリにインストールされるのも気持ち悪いので `/Applications/TeXLive/Library/texlive/2021` に入れたいと思います。

# TeXLive 2021 のインストール
[TeXLive](http://www.tug.org/texlive/acquire-iso.html) のサイトからISOファイルをダウンロードしてマウントし、
`sudo ./install-tl`を実行します。

## TEXMF環境変数の指定
GUI画面が表示されたら、左下の[高度な設定]を押して、詳細設定の画面に切り替えます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1200958/8b581219-aabf-c42a-9353-a44797f10435.png" width="450px">

左側の真ん中あたりにある[さらに表示...]ボタンを押して、以下の画面に切り替えます。

![スクリーンショット 2021-04-06 20.43.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1200958/71fac9da-3687-540a-d5ba-7c538b319071.png)

インストール先ディレクトリ他の指定を以下のように変更します。

* インストール先: /Applications/TeXLive/Library/texlive/2021/
* TEXMFSYSVAR: /Users/Shared/TeXLive/texmf-var
* TEXMFSYSCONFIG: /Users/Shared/TeXLive/texmf-config
* TEXMFLOCAL: /Users/Shared/TeXLive/texmf
* TEXMFHOME: ~/TeXLive/texmf
* TEXMFVAR: ~/TeXLive/texmf-var
* TEXMFCONFIG: ~/TeXLive/texmf-config

`tlmgr conf` の出力だと TEXMFHOME等の値に /Users/foo/... 等と表示されますが、ここでは ~ を使用して指定する必要があります。
そうでないと、各ユーザごとに切り替わるべき `TEXMFHOME` がインストールしたユーザのホームディレクトリ以下に固定されてしまいます。

## Path の設定
[インストール]ボタンを押して、インストールを開始します。

インストールが終わったら、`/etc/paths.d/TeXLive `を編集して、インストールされた新しい TeXLive のパスを追加します。

```
/Applications/TeXLive/Library/mactexaddons/bin
/Applications/TeXLive/Library/texlive/2021/bin/universal-darwin
/Applications/TeXLive/Library/texlive/2020/bin/x86_64-darwin
```

ターミナルを開き直して、`tlmgr conf` を実行し、TeXLive のバージョン、`TEXMF...`の一群の環境変数が指定通りに設定されていたらインストール完了です。
【ユーザー辞書登録】Windows10 ユーザー辞書登録をする方法

Windows10でユーザー辞書登録をする方法。

①「設定」→「言語」
②優先する言語の「日本語」をクリック→「オプション」
③キーボードのMicrosoftIMEをクリック→「オプション」
④「学習と辞書」→「ユーザー辞書ツールを開く」
Androidアプリ開発で、よく使うEditTextの属性について（inputTypeとdigitsの内容多め）

#Androidアプリ開発で、よく使うEditTextの属性について（inputTypeとdigitsの内容多め）

###Androidアプリを作成しているときにEditTextオブジェクトを使うことはよくありますが、筆者がよく使う属性を書き出してみました。

1.「android:hint」属性　→　テキストフィールドに、まだテキストを入力していないときに表示されるテキストを設定する。

2.「android:maxLength」属性　→　テキストフィールドに入力できる、テキストの字数における最大値を設定する。
（例えば、値を5に設定していると、5字までしかテキストを入力できない）

3.「android:maxLines」属性　→　テキストフィールドに表示できる。テキストの行数における最大値を設定する。
（例えば、値を2に設定していると、2行までしか表示できない）

4.「android:inputType」属性　→　テキストフィールドに入力できるデータの種類を制限できる。
筆者がよく使う値として、「textPersonName」と「number」があります。
「textPersonName」は、人名として使用されるテキストデータ、「number」は、数値のみを扱うテキストデータです。

5.「android:digits」属性　→　設定している文字や数値しかテキストフィールドに入力できないように制限できる。
（例えば、値を012345678と設定していると、他のテキストは入力できません。同じ数値でも9は入力できません）

###以上の属性がよく筆者が使用するEditTextオブジェクトの属性ですが、4の「android:inputType」と5の「android:digits」属性って似ていますよね。
###この二つの属性の上手な使い方について、検証しました。

###まず、「android:inputType」属性ですが、テキストフィールドに表示できるデータの種類を制限できると記載しましたが、同時にIMEに入力制限をかけることもできます。

IMEは入力方法編集プログラムと訳されますが、具体的に言うと、設定した値によってテキストフィールドをクリックしたときに表示される端末のキーボードが変わります。

一つ目の画像は「android:inputType」の値を「textPersonName」に設定して、テキストフィールド（「色：」の横）をクリックしました。
キーボードにはひらがなが表示されています。（左の下から2番目をクリックすれば、数値等も入力できます）
![qiita_edittext1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794916/550df92b-a2d9-ba47-f5e1-3628d3df4a31.png)

二つ目の画像は「android:inputType」の値を「number」に設定して、テキストフィールド（「枠幅：」の横）をクリックしました。
キーボードには数値が表示されています。（日本語やアルファベットの入力はできません）
![qiita_edittext2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794916/400e58b5-239f-c43a-163e-27e61b4d5be5.png)

numberを指定しているときにひらがな表示のキーボードが出現すると、切り替えるのにクリックする手間が発生するので、このIMEの入力制限をかけてくれる機能は便利ですね。

###次に「android:digits」属性ですが、値に設定している文字や数値しかテキストフィールドに入力できないように制限できると記載しましたが、これは「android:inputType」属性の入力制限よりも厳格に制限できるというメリットがあります。また、反対に制限を寛容にすることもできます。

例えば、「android:inputType」属性で「number」を設定している場合に「android:digits」属性の設定をしないと、二つ目の画像のキーボードでいうと、「0123456789」の入力ができます。

また、「android:inputType」属性で「number」を設定している場合に「android:digits」属性の値を「012345678」と設定すると、「012345678」の入力ができます。（9は入力できません）

さらに、「android:inputType」属性で「number」を設定している場合に「android:digits」属性の値を「0123456789-」と設定すると、二つ目の画像のキーボードでいうとキーボードの右上にある「-」も入力できるようになります。つまり、「0123456789-」の入力ができます。（正の値だけでなく、負の値も入力できるようになりました）

###まとめると、最初に「android:inputType」属性で大雑把に入力制限をかけて、次に「android:digits」属性で入力制限を調整するという使い方が、正しいと思いました。
![qiita_edittext4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794916/aadfe820-0b0f-0a44-e997-1d0277b55f12.png)

###今回、検証で使用したアプリですが、Google Play Storeで（無料、広告無し）で公開しているので、よろしければダウンロードしてみてください。
Androidアプリ作成時に使用する単色の背景画像を生成できるアプリです。

https://play.google.com/store/apps/details?id=com.konno_siki.colorpartscreater2

このアプリを作成した経緯（記事）を前に投稿しているので、よろしければそちらもご覧ください。
https://qiita.com/konno-siki/items/33510f645ca1c260bfa4
PyCharmでFastAPI (on Docker)をステップデバッグする。

## 環境
- Docker 20.10.5
- docker-compose 1.28.5
- PyCharm 2020.3.5 (Professional Edition)

## コード
- https://github.com/f-sugar/fastapi-pycharm-step-debug

## 事前準備
### コンテナのビルド
```
$ make build
```

### 起動
```
$ make dev
```

### 動作確認
```
$ $ curl localhost:8000
{"status":"ok"}
```

### 停止
```
$ make down
```

## PyCharm の設定
### インタプリタの設定
- PyCharm > Preferences > Project > Python Interpreter
- 歯車アイコンをクリックして `Add`。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304/f17eddc3-8785-8d86-c135-1a8ea6094989.png)

- `Docker Compose` を選んで画像のように入力して `OK`
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304/7cea76a4-ecf9-67bf-b6ad-500dd5322586.png)

- フォルダのアイコンをクリックしてパスをマッピングする。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304/8d50face-bc8a-f2de-b45f-5b0c90bca7aa.png)

- `Local Path` にローカルのプロジェクトのパス、 `Remote Path` には Docker コンテナ内のコードを配置するパスを入力して `OK`
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304/ec7cfbdd-dd8f-f37d-60ec-5bca8c8731a2.png)

- `Apply` して `OK`
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304/955805f1-2358-671b-da1e-a9d4fc873302.png)

### デバッグ設定
- Run > Edit Configurations
- `+` をクリックして `Python` を選択
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304/52ebae9c-cbb3-bf6f-a77f-38d96383bfd6.png)

- 画像の内容で入力して `Apply` して `OK`
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304/a55014b5-c526-67bd-86c1-2e6fa2c117bc.png)
 - `Name` に適当に名前を入力。今回は `api`。
 - `Script path` にはローカルのエントリーポイントとなるファイルのパスを入力。
 - `Working directory` はローカルのプロジェクトルートを入力。

### デバッグ実行
- ブレイクポイントを付ける。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304/7d10f33b-a9e8-eb3c-6ad1-720bab00f0b0.png)

- 実行する対象に `api` を選択。
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304/06f3ee21-4581-7370-d940-4e8c9fded503.png)

- デバッグアイコンをクリックすると、コンテナが起動する
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304/4b9ad336-9774-af38-c040-662a7f3c322a.png)

- `http://localhost:8000` で api を実行するとブレイクポイントで止まる。
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304/a7933a7f-20f2-6ca1-0362-5827591618a7.png)
M1 MacbookでGoの環境構築

# はじめに
[Goの環境構築方法](https://qiita.com/k_shibusawa/items/7c35b083addd2b557f96)を参考に、M1 MacbookでGoの環境構築をした際に若干躓いたのでまとめておきます。
自分が躓いたのはM1 Macbookに限った話ではないですが…
手順自体はあまり変わらないので、上記の記事を参考にしてください。

# 問題
M1 Mac対応バージョン（1.16以降）のGoがインストールできない。
というか1.12beta1までしか表示されない。

```
% goenv install -l 
Available versions:
  1.2.2
  1.3.0
　 …
  1.11.4
  1.12beta1
```

# 解決方法
goenvをhomebrewでインストールしたことが原因のようです。
gitでcloneする方法で再インストールしましょう。

```
$ brew uninstall goenv
$ rm -r ~/.goenv
$ git clone https://github.com/syndbg/goenv.git ~/.goenv
```
PATH通すとかは他の記事を参照してください。

# 詳細
[Goの環境構築方法](https://qiita.com/k_shibusawa/items/7c35b083addd2b557f96)でも紹介されているように、Goのインストール方法として、

* 公式からDLしてインストールする方法
* goenvを使ってインストールする方法

の２種類の方法があります。

また、goenvをインストールする方法として、

* gitでcloneする方法
* homebrewを使ってインストールする方法

の２種類の方法があります。

私は直接が嫌い派だったので、**homebrewを使ってgoenvをインストールし、goenvを使ってgoをインストールする**ことにしました。

これが間違いでした…

**homebrewでインストールしたgoenvはバージョンが古く、古いバージョンGoしかインストールできないようです。**

homebrew信者の方はご注意ください…
GCP VM Managerの設定

## はじめに
GCEのOSバージョンの一覧を取得するためにGCPにVM Managerを設定する。
GCPコンソールからも設定できるが、IaC(Infrastructure as Code)したいのでTerraformでの手順をまとめる。

## Terraformを実行するサービスアカウントにroles/iam.serviceAccountUserを追加

```shell
gcloud projects add-iam-policy-binding <PROJECT_ID> --member serviceAccount:<SERVICE_ACCOUNT>@<PROJECT_ID>.iam.gserviceaccount.com --role roles/iam.serviceAccountUser
```

## OS Config API, Container Analysis APIの有効化

```terraform:terraform
# OS Config API
resource "google_project_service" "osconfig" {
  project = var.project
  service = "osconfig.googleapis.com"
}

# Container Analysis API
resource "google_project_service" "containeranalysis" {
  project = var.project
  service = "containeranalysis.googleapis.com"
}
```

## メタデータにenable-osconfig, enable-guest-attributesをTRUEに設定

```terraform:terraform
resource "google_compute_project_metadata" "default" {
  metadata = {
    enable-osconfig = "TRUE"
    enable-guest-attributes = "TRUE"
  }
}
```

## インスタンスにログインしてOS Configエージェントがインストールされているか確認

```shell
sudo systemctl status google-osconfig-agent
```

## ローカルPCからOS情報を取得できることを確認

```shell
gcloud compute instances os-inventory describe <VM_NAME>
```

## 参考
- https://cloud.google.com/compute/docs/vm-manager?hl=ja#pricing
Git コミットを指定してタグを貼る

# 目的

- コミットを指定してタグを貼る方法をメモ的にまとめる

# 情報

- 現在のブランチのHEADにタグを張ってリモートリポジトリに反映する方法は下記で紹介している。
    - [https://qiita.com/miriwo/items/23abfdf0f52b4a8eba9c](https://qiita.com/miriwo/items/23abfdf0f52b4a8eba9c)

# 方法

- 下記コマンドを実行してコミットを指定してタグを貼る。

    ```terminal
    $ git tag -m 'タグコメント' タグ名 コミットID
    ```

- ブランチを指定してタグを貼ることもでき、その場合指定したブランチの最新のコミットにタグを貼る。

    ```terminal
    $ git tag -m 'タグコメント' タグ名 ブランチ名
    ```
github actions で.envファイルを上書きする

# はじめに

github actionsでビルド後、指定サーバにデプロイを行います。
.envファイルが指定サーバ毎に変更になります。
secretsに.envの内容を登録して、利用したいのですが、うまくいかず、試行錯誤しました。


# TL;DR

## 方法1

.envの内容をbase64エンコードしてserectsに登録をして、actionのスクリプト内でbase64デコードをして利用する

```bash
openssl base64 -A -in .env.xxx -out .env.xxx.base64.txt
```
このファイルの内容をsecretsに登録する。

```actionscript
      - name: Update .env file
        run: |
          echo "${{secrets.xxxxxx}}" | base64 --decode > .env
```

参考文献： https://stackoverflow.com/a/64452700

## 方法2

暗号化してリポジトリに保存をして、複合する鍵をsecretsにいれて利用する。

公式ドキュメントにありますが、Secrets自体がリポジトリで100件、サイズが64KBなど制限があります。これの代替案として、秘密情報を暗号化してリポジトリに保存をして利用するという方法です。

https://docs.github.com/ja/actions/reference/encrypted-secrets#limits-for-secrets

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/025b91bf-50b3-ec56-0329-12ce1e10bdac.png)


# まとめ

手間として方法1も方法2も、.envファイルをエンコードOR暗号化する手間があるので変わらないです。
暗号化したファイルでも、リポジトリに登録するというのが精神衛生上よくないので、方法1が好きかな？

ただ、方法１だとオリジナルの.envファイルがsecretsの中なので、デプロイ先を確認しないといけないので、方法2の方がいいって人もいるでしょうね。

生の.envファイルが登録しても、きちんと利用できない理由がわからないです。
secretsは、ログに残らないように処理するために、構造化データは使わないでって注意書きがあるので、このあたりが原因な気がしています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/682d8695-2272-84e7-8e56-63752ea696d8.png)