OmniAICreator/Qiita-1.07M huggingface dataset:
brew install nodebrewでインストールできない時の対処方法

# エラー内容：Error: Your Xcode does not support macOS 10.15. It is either outdated or was modified.

```
Please update your Xcode or delete it if no updates are available.
Error: An exception occurred within a child process:
SystemExit: exit
```

上記のようなエラー文が出たためDeepL先生に翻訳してもらうと、


<b>
エラーが発生しました。お使いのXcodeがmacOS 10.15をサポートしていません。それは古いか、修正されているかのどちらかです。
<b>
Xcodeをアップデートするか、アップデートがない場合は削除してください。
エラーが発生しました。子プロセス内で例外が発生しました。
SystemExit: exit

# 解決方法 Xcodeをインストール

直接Xcodeをアプリストアからインストールしました。

```
Updating Homebrew...
==> Auto-updated Homebrew!
Updated 1 tap (homebrew/core).
==> New Formulae
arturo                     pickle                     rain
==> Updated Formulae
Updated 169 formulae.
==> Deleted Formulae
llvm@6
xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

==> Downloading https://github.com/hokaccha/nodebrew/archive/v1.0.1.tar.gz
Already downloaded: /Users/rontarou/Library/Caches/Homebrew/downloads/9895acc38dc859a4a1a841cf2e8cd78b519163d3499cdfcd4a08a068ce0babcd--nodebrew-1.0.1.tar.gz
xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun
==> Caveats
You need to manually run setup_dirs to create directories required by nodebrew:
  /usr/local/opt/nodebrew/bin/nodebrew setup_dirs

Add path:
  export PATH=$HOME/.nodebrew/current/bin:$PATH

To use Homebrew's directories rather than ~/.nodebrew add to your profile:
  export NODEBREW_ROOT=/usr/local/var/nodebrew

Bash completion has been installed to:
  /usr/local/etc/bash_completion.d

zsh completions have been installed to:
  /usr/local/share/zsh/site-functions
==> Summary
🍺  /usr/local/Cellar/nodebrew/1.0.1: 8 files, 38.7KB, built in 7 seconds
==> `brew cleanup` has not been run in 30 days, running now...
Removing: /Users/rontarou/Library/Caches/Homebrew/icu4c--67.1.catalina.bottle.tar.gz... (26.8MB)
Removing: /Users/rontarou/Library/Caches/Homebrew/node--14.4.0.catalina.bottle.tar.gz... (16.3MB)
Removing: /Users/rontarou/Library/Caches/Homebrew/portable-ruby-2.6.3_2.yosemite.bottle.tar.gz... (9.1MB)
Removing: /Users/rontarou/Library/Logs/Homebrew/icu4c... (64B)
Removing: /Users/rontarou/Library/Logs/Homebrew/node... (64B)
Pruned 1 symbolic links and 1 directories from /usr/local
```

無事にインストール完了しました。

以上となります。
ここは違うかも？ここはこうしたほうがいいかも？等々ございましたらご指摘いただけますと幸いです。

最後までみていただき、ありがとうございます。
ツールバーに追加されたボタンのスタイル(ToolBarButtonStyle)を明示的に設定する方法

## はじめに
本記事はWPFでツールバーに追加したボタンに自動的に設定されるスタイル(ToolBarButtonStyle)を明示的に設定する方法をまとめます。

## 設定方法
ツールバーに追加したボタンにはToolBarButtonStyleが自動的に設定されます。以下のようなスタイルをボタンに設定することでToolBarButtonStyleを明示的に設定できます。

```xml
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"/>
```

詳細は[こちら](https://social.msdn.microsoft.com/Forums/vstudio/en-US/bf9ab656-c0c8-40c1-819c-b4782efc7c59/set-toolbarbuttonstyle?forum=wpf)の記事を参考にしてください。

## まとめ
ツールバーに追加したボタンに自動的に設定されるToolBarButtonStyleは明示的に設定ができる。
VSCodeでRustを触ろうとしたら環境構築でコケた話

#Rustを書いてみよう
環境構築で挫折しかけた(n回目)
指示通りにCargoやらrustupやら入力したのにVSCodeが右下で騒いでる。
どう解決したらええんや...→解決しました。(以下)

##The Rust Analyzer server crashed 5 times in the last 3 minutes. The server will not be restarted.
この警告文が出ている人の助けになればいいかなと思います。

##プラグイン

・Rust
・rust-analyzer

私は脳死で上記のプラグインをいれました。
Rustを無効化すると**解決**しました。Rustとrust-analyzerが競合して警告文がでていたみたいです。

##参考
<https://rust-analyzer.github.io/manual.html#vs-code>
フロントエンドとバックエンドを同時に開発している際の CORS 問題を解消する

### はじめに
研究で使用するプロトタイプを React.js と NestJS を使用して開発していた際、CORS が発生して大変だったので共有しておきます。

### 結論
`"proxy": "設定したい URL"` を `package.json` にプロキシ設定を記述すると解決できます。

##### 例
```json:package.json
{
  ... ,
  "proxy": "http://localhost:4000"
}
```

と記述すると fetch などでリクエストを投げる際に `http://localhost:4000/api/v1/` の代わりに `/api/v1/` で実行が可能になります。

### まとめ
CORS で悩まされて、毎回ものすごく困っていたので機能を見つけたとき感動しました。
初歩的な問題で知っている方も多いと思いますが、少しでも参考になればと思います。

### 参考文献
* Proxying API Requests in Development - https://create-react-app.dev/docs/proxying-api-requests-in-development/
* ReactでAPIリクエストをプロキシする / Proxy API request with React - https://medium.com/@dorayakikun/react%E3%81%A7api%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9%E3%82%92%E3%83%97%E3%83%AD%E3%82%AD%E3%82%B7%E3%81%99%E3%82%8B-proxy-api-reference-with-react-d5108c181e28
音声認識

音声認識を取り入れたアプリを開発した時にいろいろ詰まったことがあったので備忘録。

## 何を使った？？
まず音声認識をするのに使ったのは**SpeechRecognizer**！
Androidの音声認識をやるにはこれが基本みたいです。

## やりたいこと
常に音声を拾いたい！拾ったら画面に認識した言葉を文字列として表示したい！

## 詰まったところ
### ひとつめ
いざ音声認識をしてみたのですが、一回拾ったらその次の言葉を拾ってくれない。。
ええええ、なんで？となって調べまくりました。
連続して音声を拾うには、音声の取得が終わったところでまた`SpeechRecognizer#startListening()`を呼べばいいそう！
音声認識した文字列を受け取った先でstartListeningするためにリスナーを用意しました。
エラーの時も処理を継続させたかったので、`onError`時にもリスナーをよんでいます！

ざっくりですが、こんな感じ。

▼SpeechRecognizerのコールバック用クラス

```
class SpeechRecognizerListener(private val listener: SpeechResponseListener) : RecognitionListener {

    // 音声結果を返却する
    interface SpeechResponseListener {
        fun onResultsResponse(speechText: String)
    }

    ・・・略・・・
　　
　　// ネットワークまたは、音声認識エラー
    override fun onError(error: Int) {
        listener.onResultsResponse("")
    }

    // 認識結果
    override fun onResults(bundle: Bundle?) {
        
　　　　　・・・略・・・

        // 結果を返却する
        if (speechText.isNullOrEmpty()) {
            listener.onResultsResponse("")
        } else {
            listener.onResultsResponse(speechText)
        }
    }
}

```

▼リスナー先

```
    override fun onResultsResponse(speechText: String) {
        if (speechRecognizer != null) {
            // SpeechRecognizerをdestroyする
            speechRecognizer!!.destroy()
        }
        setupSpeechRecognizer()
        setupRecognizerIntent()
        speechRecognizer.startListening(intent)
        muteBeepSoundOfRecorder(true, context)
    }
```

二回目以降の`startListening()` を呼び出す前に、`destroy()`しないとうまくいかないことがあるみたいなので、nullじゃなかったら`destroy`するようにしてます。

これで、連続して音声認識してくれることに成功しました。

### ふたつめ

音声認識中になんだか音がピコンピコンうるさい。。
`startListening`する時に`muteBeepSoundOfRecorder`というとこで音ミュートにしたりしてるのになぜ？！と詰まる。

▼実際のイメージ
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">鳴り続ける音。 <a href="https://t.co/beI7ruMiY6">pic.twitter.com/beI7ruMiY6</a></p>&mdash; tg_kondo (@KondoTg) <a href="https://twitter.com/KondoTg/status/1318400123253055489?ref_src=twsrc%5Etfw">October 20, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

これじゃぴこぴこうるさいですよね。
でもこれを追加しただけで音が鳴り止んだんです。

```
am.adjustStreamVolume(AudioManager.STREAM_SYSTEM, AudioManager.ADJUST_MUTE, 0)
```

`AudioManager.STREAM_MUSIC`に対してだけしか操作してなかったんですけど、`AudioManager.STREAM_SYSTEM`が必要だったんですねえ。笑

▼STREAM_SYSTEMを入れた後のイメージ

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">音が止んだ！ <a href="https://t.co/jNhp8t2cuz">pic.twitter.com/jNhp8t2cuz</a></p>&mdash; tg_kondo (@KondoTg) <a href="https://twitter.com/KondoTg/status/1318400246330781697?ref_src=twsrc%5Etfw">October 20, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

難しいなあ。
Javaで、前後の連続する改行やタブを取り除く

2022/07/14 追記
いや、というかやりたいことが
ApacheのStringUtils.strip()だったことに気づきました…よかったよかった…
https://github.com/apache/commons-lang/blob/master/src/main/java/org/apache/commons/lang3/StringUtils.java


追記
1文字だとマッチしないことに気づき
`"^[\t\n]*([^\t\n]+(.|\\s)*[^\t\n]+)[\t\n]*$"`から
`"^[\t\n]*([^\t\n]*(.|\\s)*[^\t\n]+)[\t\n]*$"`に修正した。
最初のプラスがアスタリスクになった。

------------------------------------



大嫌いな正規表現。
前後以外の改行やタブはそのままにするとこがポイント。
めちゃくちゃハマったので記事にしときます。

```java

    public static String trimNewline(String str) {
        String regex = "^[\t\n]*([^\t\n]*(.|\\s)*[^\t\n]+)[\t\n]*$";
        Pattern p = Pattern.compile(regex);
        Matcher m = p.matcher(str);
        if (m.find()) {
            return m.group(1);
        } else { //　「空文字」や「タブや改行だけで構成された文字列」はマッチせずここにくる
            return "";
        }
    }

```

Javaの正規表現を調べると
*「.」は任意の文字にマッチ*
とだけ書いてあるものばかりですが、実は、
**改行以外の任意の文字列**
だったので、めちゃくちゃハマりました。

```java
System.out.println(trimNewline("\t\n\t\nhoge\t\n\t\n")); // hoge
System.out.println(trimNewline("\t\n\t\nhoge")); // hoge
System.out.println(trimNewline("hoge\t\n\t\n")); // hoge

```

また、途中に改行やタブが入った、
`"\t\n\n\n\t\tho\t\t\nhoge\nge\t\n\t\n"`
こちらも、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317324/916a36b0-05de-b2cf-94a8-805d9de88d37.png)

無事に、前後のみ取り除かれました。
GCPのVMインスタンスにローカルPCからSSH接続

## はじめに
GCP上にVMインスタンスを作成した際、そのVMに **Tera Term** などからSSH接続を行いたかったため、本記事ではその手順をまとめる。

## 実行環境
【ローカルPC環境-OS】
　　・Windows 10 Pro　

【SSH接続に使うソフト】
　　・TeraTerm

【サーバー環境】
　　・Ubuntu20.04 LTS（GCP上）


## 手順
１．TeraTermで公開鍵と秘密鍵のペアを作成
２．ローカルPCのグローバルIPを確認
３．GCP上に鍵の登録＆ポートの開放
４．接続テスト


### １．TeraTermで公開鍵と秘密鍵のペアを作成

TeraTermを使って鍵の作成。
（コマンドで作成してもいいけど、今回はTeraTerm上で作成）
![Qiita-no015_img01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/d84b4a7a-6a1e-6f09-44d4-3c9b19072d50.jpeg)
鍵の種類は【RSA】にして、『生成』ボタンをクリック。
生成後、パスフレーズとコメントを入力して、『公開鍵の保存』と『秘密鍵の保存』をそれぞれクリックし、適当な場所に保存する。
![Qiita-no015_img02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/63631776-7004-2c59-519f-da9a924bae8a.jpeg)

<font color="red">※コメント欄の "@" より手前の部分はユーザー名となるので、接続する時に入力する</font>


### ２．ローカルPCのグローバルIPを確認

以下のサイトなどでグローバルIPアドレスを調べる。
　　https://www.cman.jp/network/support/go_access.cgi


### ３．GCP上に鍵の登録＆ポートの開放

**鍵の登録**
`ナビゲーションメニュー ＞ Compute Engine ＞ メタデータ ` の【SSH 認証鍵】タグをクリックする。
『編集』ボタンをクリックして『項目を追加』したら、下の赤枠部分に公開鍵の中身をコピーして貼り付ける。
![Qiita-no015_img03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/7624dcfd-5716-f2e4-43d5-54389d0e078d.jpeg)
貼り付けるとユーザー名（鍵作成時のコメント欄に記載）が表示されるので、問題なければ『保存』をクリック。

**ポートの開放**
`ナビゲーションメニュー ＞ VPCネットワーク ＞ ファイアウォール`より、先程調べたローカルPCのグローバルIPに対して22番ポートを開放する。

### ４．接続テスト
テストはTeraTermで実行。
接続先のホストには、VMインスタンスの外部IPを入力して、22番ポートにSSH接続する。
[ユーザー名]、[パスフレーズ]、[参照する秘密鍵] 設定して接続できればOK！


## 補足
今回ローカルPCからSSH接続を試すにあたって、事前の新規ユーザー作成は不要。
手順３の鍵の登録タイミングで新規ユーザーが自動で作成されるため、上記の手順だけで接続が確立できる。
（デフォルトで `sudo` コマンドも使える）
「戻り値」か「返り値」か

ずっと気になっていたことがある！

##「戻り値」か「返り値」か！

「へなちょこ」と「へっぽこ」の違いみたいでどうでもいいといえばどうでもいいのですが、ちょっと調べてみました。

「返り値」と見るたびに「返り血」みたいでどうも不穏な感じで好きじゃなくて気になってしまう。
(武士が切られて血が、ブシャーッ！みたいな映像が勝手に脳内に浮かんじゃうんですよ)

ええ、調べたところで、何の役にも立ちませんがね。
(とりあえず、調べるってのはエンジニアの習慣てことで)

## まずは、Google Trend

過去12月間
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685319/1587fb76-3ae8-3e22-8ec0-d83cc1450da2.png)


※追記 コメントで「復帰値」という言い方もあるということで、12か月間のみですが追加してみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685319/67a946b6-8660-7525-04f5-e86ec7f913f6.png)



過去5年間
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685319/086254e9-6439-9e08-7461-107221196403.png)

2004-現在
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685319/62fc58fe-1226-95e8-aad0-a43c83c8fb62.png)

なんだ、戻り値がずっと優勢じゃん、なら話はここで終わり？

しかし、他に調べたこともあるので書いておきます。

## 翻訳としては、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685319/ce2b74f4-7ed8-4812-dba7-2406cf8d6607.png)

やっぱり「戻り値」じゃん
下の「返却値」がちょっと気になりますが


# 引数はどうなのか

英語では、Parameter
Google翻訳では、「パラメータ」と出ます、ｵｲ!

検索するとWikipediaが出てきて、でもこれ数学的な説明だけど

[媒介変数](https://ja.wikipedia.org/wiki/%E5%AA%92%E4%BB%8B%E5%A4%89%E6%95%B0)

と、あー、なるほどね。これならまーって思いました。
何が言いたいのかっていうと

## どちらが主語なのよ

って、以前、講師をしていた時に、なんも考えずに引数、戻り値って教えていてたのですが、どっちのことを言ってるのか分からなくなると言われて・・・え？？

つまり、「呼び出し元」からみて言ってるのか、「呼び出し先」から見て言ってるのかと

```
main() {
  int i = sub(10); // 戻り値iは、mainが主語？
}

int sub(int i) { // ← 引数iは、subが主語？
 return 1;
}

```

引数っていうとsub()の方が主役になってて、戻り値だとmain()が主役じゃね？
みたいなこと言われて、なるほどーと思いました。

正確に表現するとすれば、main() から見れば、
parameterは、渡し値
return valueは、戻り値(返り値)

sub()から見れば、
parameterは、は引数(渡り値？)
return valueは、戻し値、返し値

かなぁ？なんて話してたのですが、あまりに意表を突いた質問だったので、
その場では、慣れるしかないよ～（ｱﾊ,ｱﾊﾊﾊﾊ）みたいな説明しかできませんでしたｗ

私は、特に疑問にも思ったことすら無かったので、とても勉強(参考？)になりました。
初心者の人ってこういうところで、つまずくのかと

つまりそれを思い出して、媒介変数ならどっちが主役で悩まないかもと思ったわけです。
(そもそも引数とか戻り値って誰が訳したんですかね？)

## その他諸々
だんだん何を書いてるのか分からなくなってきましたが、

オフィシャルなプログラミング言語のドキュメントの翻訳は、「戻り値」になってる場合が多いようです。(しかし、PHPは、[返り値](https://www.php.net/manual/ja/functions.returning-values.php
)になっている)


### IT用語辞典 e-Words
http://e-words.jp/w/%E6%88%BB%E3%82%8A%E5%80%A4.html

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685319/ca742430-43e8-4f30-cf0f-01690784c135.png)

うーん、返り値も一応、載ってるなぁ・・・

### IME関連
Microsoft IMEでは、
かえりちは、返り血しか変換できません。(Windows10)

Google日本語入力では、返り値で変換できます。

### ん？Qiitaでは？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685319/00c9f6dc-d63b-f8d4-690d-f455b28f4385.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685319/4c19ac52-e271-87ac-c19d-c2ae1d58f7e3.png)

返り値の方が多いだとぅ！？

**広めてるのは、お前か!**

ここで記事書いてよかったかもｗ

## まとめ

以前にも何度か調べたことがあるのですが、気になるたびに検索してて
あれ、また検索してる俺、みたいな既視感で記事にしてみました。

言葉なので、伝われば良いといえばいいのですが、システム開発の際は、
クライアントとの用語の齟齬による語弊は、よくあることなので、統一した方がいいのにと思ってます。

**個人的には、「戻り値」で統一してほしい！**

ので、今まで返り血(ブシャーッ!)と言っていた方は、戻り値に改宗していただきたく存じます。

かしこ
【Java】joinメソッドの使い方

#プログラミング勉強日記
2020年10月23日
Javaで文字列を連結するときに便利なjoinメソッドを使ったので、まとめる。

#joinメソッドとは
　指定された区切り文字で、文字列を連結するためのメソッド。第一引数を区切り文字(デリミタ)として、第二引数を接頭辞として以降指定された接頭辞の終わりまでの文字列が区切られる。
　デリミタは`,`(カンマ)、`.`(ピリオド)、`:`(コロン)、を指定することができる。

```java:例
public class Main {
  public static void main(String[] args) throws Exception {
    String str = String.join(",", "apple", "orange", "melon");
    System.out.println(str);
  }
}
```

```:実行結果
apple,orange,melon
```
【Windows】バックアップエラー：EFI システム パーティション（ESP）で排他ロックが取得できませんでした。

## 概要
Windowsのバックアップが「EFI システム パーティション（ESP）で排他ロックが取得できませんでした。」というメッセージで失敗した際の解消法を記載しています。

## エラー原因
EFI システム パーティション（ESP）に保存されたファイルが別のプログラムで利用されているため排他ロックが出来ず、エラーが発生します。

## 解消法
セキュリティソフトが掴んでいることが多いため、セキュリティソフトを無効、またはEFIシステムパーティションを検査除外にすることで解消できることが多いようです。

ESETの場合以下を検査除外することで解消できます。

### Windows
**　パス**
　・ \Device\HarddiskVolume1\EFI\Microsoft\Boot\BCD
　・ \Device\HarddiskVolume1\EFI\Microsoft\Boot\BCD.LOG
　・ \Device\HarddiskVolume1\EFI\Microsoft\Boot\bootmgfw.efi
　・ %WINDIR%\system32\winload.efi



### Windows Server
**　パス**
　・ \Device\HarddiskVolume(%number%)\EFI\Microsoft\Boot\BCD
　・ \Device\HarddiskVolume(%number%)\EFI\Microsoft\Boot\BCD.LOG
　・ \Device\HarddiskVolume(%number%)\EFI\Microsoft\Boot\bootmgfw.efi
　・ \\\?\GLOBALROOT\Device\HarddiskVolume(%number%)\EFI\Microsoft\Boot\
　・ \\\?\GLOBALROOT\Device\HarddiskVolume(%number%)\EFI\Microsoft\Boot\BCD.LOG
　・ \\\?\GLOBALROOT\Device\HarddiskVolume(%number%)\EFI\Microsoft\Boot\bootmgfw.efi
　・ %WINDIR%\system32\winload.efi

**　Volume Shadow Copy利用している場合のみ**
　・\Device\HarddiskVolumeShadowCopy(%number%)\*

**　除外プロセス**
　・%WINDIR%\System32\wbengine.exe
　・%WINDIR%\System32\wbadmin.exe
　・%WINDIR%\System32\vssvc.exe

 
## volume番号確認方法
　volume番号は環境によって異なるため以下何れかの方法で確認することができます。
　・レジストリ「HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\hivelist」を確認
　・管理者権限でコマンドプロンプトを起動し「bcdedit」コマンドを実行


## 参考
　[ESET Support KB6121:Windows Backup failing error message](https://support.eset.com/en/kb6121-windows-backup-failing-error-message)
　[GLOBALROOT](https://docs.microsoft.com/en-us/windows/win32/fileio/naming-a-file)
Amazon Linuxでrbenvをインストール

## 依存ライブラリーをインストール
```
sudo yum -y install gcc
sudo yum -y install make
sudo yum -y install openssl
sudo yum -y install openssl-devel
sudo yum -y install gcc-c++
sudo yum install -y mysql-devel
sudo yum install -y readline-devel
sudo yum install -y libxml2-devel
sudo yum install -y libxslt-devel
sudo yum install -y bzip2
```


## gitをインストール
```
$ sudo yum -y install git
```


## rbenvをインストール
```
$ git clone https://github.com/sstephenson/rbenv.git ~/.rbenv
$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
$ exec $SHELL -l
```

しかしこのままだとrbenv istallが出来ない。

```
$ rbenv install -v 2.6.2
rbenv: no such command `install'
```

helpを見てみると、installコマンドが無いのが分かる。

```
$ rbenv -h
Usage: rbenv <command> [<args>]

Some useful rbenv commands are:
   commands    List all available rbenv commands
   local       Set or show the local application-specific Ruby version
   global      Set or show the global Ruby version
   shell       Set or show the shell-specific Ruby version
   rehash      Rehash rbenv shims (run this after installing executables)
   version     Show the current Ruby version and its origin
   versions    List installed Ruby versions
   which       Display the full path to an executable
   whence      List all Ruby versions that contain the given executable
```

### 解決方法
install するには `ruby-build` プラグインが必要となるのでインストールする。


```
$ git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
```

helpを見るとinstall（とuninstall）が追加されたのが分かる。

```
$ rbenv -h
Usage: rbenv <command> [<args>]

Some useful rbenv commands are:
   commands    List all available rbenv commands
   local       Set or show the local application-specific Ruby version
   global      Set or show the global Ruby version
   shell       Set or show the shell-specific Ruby version
   install     Install a Ruby version using ruby-build
   uninstall   Uninstall a specific Ruby version
   rehash      Rehash rbenv shims (run this after installing executables)
   version     Show the current Ruby version and its origin
   versions    List installed Ruby versions
   which       Display the full path to an executable
   whence      List all Ruby versions that contain the given executable

See `rbenv help <command>' for information on a specific command.
For full documentation, see: https://github.com/rbenv/rbenv#readme
```

`rbenv install -v 2.6.2` するとインストールが始まる。
インストール終了後、`rbenv versions`で確認できる。

```
$ rbenv versions
* system
  2.6.2
```

## インストールLog
インストール時のlogファイルは`ruby-build.xxxxxxxxxxxxxxx.log`というファイル名で
/tmp/配下に格納されている。
[Unity]Hierarchy順に選択オブジェクトを並び替える

大変処理がダサいので、だれか添削してください。

##コード

```c#:GetOrder.cs
using UnityEngine;
using UnityEditor;
using System;
using System.Collections.Generic;
 
public class GetOrder: Editor
{

    [MenuItem("Tools/GetOrder")]
    static void Create()
    {
        if(Selection.activeGameObject == null)
            return;

        var objlist = Selection.gameObjects;
        int numlen = 0; //ヒエラルキー順IDの最大桁数
        List<string> orderstr = new List<string>();
        List<int> orderint = new List<int>();
        Dictionary<int, GameObject> intdct = new Dictionary<int, GameObject>();

        for(var i = 0; i < objlist.Length; ++i){
            var numstr = GetHierarchyOrder(objlist[i].transform);
            orderstr.Add(numstr);
            if(numstr.Length > numlen){
                numlen = numstr.Length;
            }
        }

        for (var i = 0; i < orderstr.Count; ++i){
            var temp = orderstr[i];
            if(orderstr[i].Length < numlen){
                for (var j = 0; j < (numlen - orderstr[i].Length); ++j){
                    temp += "0";
                }
            }
            int num_var;
            var result = Int32.TryParse(temp, out num_var);
            //orderが何らかの理由でParse出来なかったら追加されません
            if(result)
                orderint.Add(num_var);
                intdct.Add(num_var,objlist[i]);
        }

        orderint.Sort();

        foreach(var oint in orderint){
            Debug.Log(intdct[oint]);
        }
    }

    static string GetHierarchyOrder(Transform trans)
    {
        var translist = trans.GetComponentsInParent<Transform>();
        string numstr= "";

        for (var i = 0; i < translist.Length; ++i)
        {
            var p = translist[translist.Length - i - 1];
            //+1しているのは0を出さないため　ケタ数を揃えるとき0を追加するのでここで0が来ないように
            var temp = p.GetSiblingIndex() + 1;
            numstr += temp.ToString();
        }

        return numstr;
    }
}
```

##解説

GetSiblingIndex()だと、兄弟間での順番しか返ってこないので全体の比較ができない。
なんで、一旦Stringにしてネストされた順に変数に追記していく。つまりネストが深くなるだけ桁数が増える。(GetHierarchyOrderの部分)
ネストの状態によっては桁数が違うので、あとで桁数を揃える必要があるが、揃えるために0を追加すると被るオブジェクトが出てきてしまう。
なんで、GetSiblingIndex()した時点で+1しておいて被らないようにする。

あとは、取得した番号のStringをSelection.gameObjectsで取得したゲームオブジェクトリストの順にリストに格納して、桁数を揃えて、Intにパースして、Intをキーにしてオブジェクトをディクショナリに突っ込んで、Intをソートして、順番に取り出すだけ。

もっといい感じに書けそうな気もする・・・。

##参考
https://qiita.com/naoK/items/22b58c5b14a8406f538b
参考にさせて頂きました。
[HTML&CSS] classとidの違いとは

# 結論
######class
種類別に割り当てる
→同じclass名を1ページ中に何度も使うことができる
######id
固有の名前を割り当てる
→同じid名は1ページ中に1度しか使えない。

class属性が対象の種類や部類を表しているのに対して、idは固有の名前を割り当てて限定的に表すために使われます。

#使い分け
基本的にはclass属性を使う、必要に応じてid属性を使うというのが良いと思います。しかし、これらを併用する上でのメリット、デメリットがそれぞれ存在します。
######メリット
idが使われていれば、それが限定した装飾であることがひと目で分かるため、コードを読み解く際に役に立ちます。
######デメリット
idはclassよりも優先される、という規則があり、これらが混在することで優先度の判別が難しくなってしまう場合もあります。

##最後に
id属性を使うかどうかの判断は、それを限定する必要があるか、そうしたほうが分かりやすいか、を基準に判断するといいと思います。

最後まで読んでいただきありがとうございます。今後もアウトプットをしていきたいと思っているのでよろしくお願いします！
Windows10公式のopensshサーバーを起動して、macからsshで接続するまで

windows10にて公式にOpenSSHサーバーの機能が追加されたので、使いたい。
（リモート操作ではpsexecなどはあったがほとんど使えない）
これでwindows用のビルドなどがリモートで行えそう。

##OpenSSHのインストール
これはいろんな人が書かれているのでほぼ割愛。
ファイアウォールの設定も忘れずに。

## OpenSSHの起動、設定
まずは起動

``` powershell
# サービス起動
Start-Service sshd
# サービス自動起動
Set-Service -Name sshd -StartupType 'Automatic'
```

デフォルトシェルも変えよう。
（何も変えなければコマンドプロンプトになっている）

シェルのパス確認

``` powershell
# powershellの場合
Get-Command powershell.exe | Format-Table -AutoSize -Wrap

CommandType Name           Version        Source
----------- ----           -------        ------
Application powershell.exe 10.0.19041.546 C:\WINDOWS\System32\WindowsPowerShell\v1.0\powershell.exe

# wsl bashの場合
Get-Command bash.exe | Format-Table -AutoSize -Wrap
#　(省略)
```

の`Source`がほしいパス

``` powershell
New-ItemProperty -Path "HKLM:\SOFTWARE\OpenSSH" -Name DefaultShell -Value "C:\Windows\System32\bash.exe" -PropertyType String -Force
# -Value以下は使いたいシェルのパスに変える
```

## sshd_configの変更
デフォルトだとパスワード認証になる。
公開鍵認証に変えましょう。
`sshd_config`は`%programdata%\ssh\sshd_config`にある。
(`%programdata%`はだいたい`c:\ProgramData\`になってる。)

**設定ファイルの編集は必ず管理者権限で行いましょう。**
WindowsにはVirtualStoreというファイル保護の仕組みがあり、一般ユーザーで変更しても別の場所に保存され、いつまでも更新されません。
https://answers.microsoft.com/ja-jp/windows/forum/all/virtualstore/e09bf6c6-74fa-4b1b-a148-8de1dd9d367f

``` powershell
# 例
Invoke-Item sshd_config
```

でファイルをメモ帳などで開いて編集→保存

### sshd_config

```
# 一番下の２行はコメントアウト
# Match Group administrators
#       AuthorizedKeysFile __PROGRAMDATA__/ssh/administrators_authorized_keys
```

Adminグループは別の`authorized_keys`ファイルが使われるようで、これは使わないようにしておく。

鍵ファイルのPermissionまわりで苦戦したので、ログも出しておく。

```
# Logging
SyslogFacility LOCAL0 # LOCAL0に変更
LogLevel DEBUG        # ここは一般的なsshd_configの通り

......

# これも念の為コメントアウト
PubkeyAuthentication yes
```

sshd 再起動

``` powershell
restart-service -name sshd -force
```

あとは一般的な手順`ssh-keygen`で鍵つくって、`.ssh/authorized_keys`に登録。
これでsshでwindowsにつながると思いきや…

## ハマったところ、鍵ファイルの権限まわり
クライアント側の秘密鍵の権限などは間違っていない。
ただ、windows側のsshdのログには

```
Could not open authorized keys 'C:\\Users\\hogeuser\\.ssh/authorized_keys': Permission denied
```

と吐かれる。

ググって出るような処理は行ってみたが…

``` powershell
# 権限確認
icacls C:\Users\hogeuser\.ssh\authorized_keys
```

結局、authorized_keysファイルから他のユーザーの権限削除、`SYSTEM`ユーザーにフルアクセス権限を付与したら`Permission denied`とは出なくなった。

↓ユーザーは`SYSTEM`でなくてもいいかも。
https://gist.github.com/lelegard/0e257510057bea59738422ae871213e8#user-configuration-on-the-windows-server


### read_keyfile_line: ----- line 1 exceeds size limit
メモ帳などで`authorized_keys`ファイルを編集するとこういうエラーがでることもある。
メモ帳では`UTF-8`を指定して上書き保存しましょう。
Map、Filter、Reduce を疑似コードでどう書いたらよいか。

# あらまし

技術論文や教育用資料においてアルゴリズムを説明するときに、しばしば疑似コードを示します。
Map、Filter、Reduceを疑似コードでどう書いたらよいのだろう、と悩む人へ。
結論を先に言うと下記です。

- MapやFilterはリスト内包表記(集合内包表記)で書く。
- Reduceは、LaTeXで言うところの大きな記号を使って書く。

# Map

具体例があると話がイメージしやすいので、下記のようなPythonのコードについて考えます。
関数`square_set`は、mapとlambdaを使って、リスト`ints`の各要素を2乗したリストを求める例です。
これは、関数`square_set2`のように、リスト内包表記で書けます。
このように、mapとlambdaのプログラムはリスト内包表記で書けることが多いです。

```Python
def square_set(ints):
    return map(lambda i: i ** 2, ints)
def square_set2(ints):
    return [i ** 2 for i in ints]
```

それなら、疑似コードでも、リスト内包表記(集合内包表記)で書けばよいのです。
疑似コード例は下記です。
原始的な書き方よりも、内包表記による書き方の方がわかりやすいですね。

![code1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210549/b3f5df64-e74f-ca6b-e2ab-00a9b840c4b3.png)

同様に、Filterもリスト内包表記で書けばよいです。

# Reduce

reduceの具体例は下記のPythonコードです。
mapのときにやった`square_set`を実行してその結果を全部加算するようなプログラムです。
`add`をreduceすることで、リストの要素を加算しています。
加算ならPythonには`sum`があるじゃん。というツッコミはごもっともです。
イメージしやすい例として出したものです。
一般には`add`のところには、とにかく何らかの2項演算が入ります。
`sum_of_square_set`と`sum_of_square_set2`の違いは、mapで書いたかリスト内包表記で書いたかだけです。

```Python
from functools import reduce
from operator import add
def sum_of_square_set(ints):
    return reduce(add, map(lambda i: i ** 2, ints), 0)
def sum_of_square_set2(ints):
    return reduce(add, [i ** 2 for i in ints], 0)
```

何らかの2項演算をreduceするというところがポイントです。
すると、疑似コードでは、LaTeXで言うところの2項演算の大きな記号で書けばよいです。
疑似コード例は下記です。
原始的な書き方よりも、大きな記号による書き方の方がすっきりですね。
もし2項演算のところが一般的な演算ではなくて自前のPythonコードで用意したものなど特殊な演算なら、それを表す大きな記号の表記を論文中で別途定義して、それを擬似コードで使えばよいでしょう。

![code2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210549/1fc97b91-1fd4-71f4-0bc1-c67ed98fca70.png)
dockerをEC2インスタンスにインストールしてみた

####経緯
dockerを知らないとヤバイみたいなことが言われているが、
初学者の自分にはそもそもdockerが何か、何の役に立つのか良くわからない。参考書を買ったが何書いてあるか良くわからない。
取りあえず実際にいじくってみたら何かわかるかと思ってやってみた。

####インストール 
AWSでのサーバー構築を学習していたので、このとき作ったインスタンスにインストールして
やってみる。もし途中でわからなくなっても、インスタンスを終了すればリセットできると
思ったので、このようにしました。

まず、インスタンスにログイン

```
% ssh -i キーペア　ec2-user@ドメイン名

       __|  __|_  )
       _|  (     /   Amazon Linux 2 AMI
      ___|\___|___|

https://aws.amazon.com/amazon-linux-2/
```
次にdockerをインストール

```
$ sudo amazon-linux-extras install docker
```
一度止まるのでyを入力して進めると、インストール完了。
dockerを起動してみる。

```
$ sudo service docker start
Redirecting to /bin/systemctl start docker.service
```
dockerの権限をec2-userにして、操作時にsudoをつけなくてもいいようにする。

```
$ sudo usermod -a -G docker ec2-user
```
設定を反映する為に一度インスタンスからログアウト

 ```
$ exit
```

もう一度インスタンスにログインして、確認してみる

```
$ systemctl status docker
● docker.service - Docker Application Container Engine
   Loaded: loaded (/usr/lib/systemd/system/docker.service; disabled; vendor preset: disabled)
   Active: active (running) since 金 2020-10-23 05:16:20 UTC; 5min ago
     Docs: https://docs.docker.com
```
active (running)って書いてるから動いてそう。

###次に
とりあえずインストールができたので、これからいじくってみようと思います。
Githubを理解しよう！②

今回は、Github学習したので、アウトプットしていきます
※以下の内容は、学習内容のアウトプット用のため、誤りがある場合があります。予めご了承ください

Githubを理解しよう！①を見てから、Githubを理解しよう！②を見ることをお勧めします。
https://qiita.com/syunta061689/items/ff80ab37641d6761d916


#基礎知識を確認しよう！

<h3>●リモートリポジトリ</h3>
ネット上にファイルをアップロードした状態でファイル管理するものです。

#複数人で使うGithubを理解しよう
<h3>●登録する名前を変更する</h3>

```swift:qiita.rbvar 
$ cd ファイル名 
$ git config user.name  Shunta
$ git config user.email Shunta@example.com
```

このコマンドをディレクト内で実行することで、名前とメールアドレスを変更することができます。

<h3>●複数人でGithubを使う</h3>
まず、複数人でGithubを使用する場合は、共通のリポジトリを作成する必要があります。

共通のリポジトリって何となると思うので、簡単な図をご覧ください。
![スクリーンショット 2020-10-23 13.47.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/770482/e4162bf7-e33d-71c9-e279-b1b12ac0be06.png)

<h3>●共通のリポジトリを作成する</h3>

```swift:qiita.rbvar 
$ git clone --bare path/to/複製元 path/to/共通のリポジトリ名.git
```
上記のコマンドで共通のリポジトリを作成することができます。
共通のリポジトリは直接作業をしません。

そこで、***bare***を用いることで。共通のリポジトリは、作業ディレクトリなしで、リポジトリだけを複製することができるのです。
つまり、共通のリポジトリは実態をもちません。
そして、共通のリポジトリのネームの最後に.***git***とつけるのが一般的です。

<h3>●共通のリポジトリから個別のリポジトリを作成する</h3>

上記の図を例にとって考えると、共通のリポジトリのからTaroリポジトリを作成してみましょう。

```swift:qiita.rbvar 
$ git clone path/to/共通のリポジトリ名 path/to/複製するリポジトリ名
```
***bare***をなしにすることで、実態をもつリポジトリを複製することができます。

<h3>●リモートブランチの追跡を行なう</h3>

git cloneで複製したリポジトリは、元のブランチを追跡して作業する必要があります。

```swift:qiita.rbvar 
$ git branch ＜手元のブランチの名前＞ origin ＜追跡したいリモートブランチの名前＞
```
追跡したいリモートブランチは、git graphで確認することができ、リモートブランチの前にoriginがついています。

<h3>●リモート設定を行なう</h3>

```swift:qiita.rbvar 
git remote add origin path/to/共通のリポジトリ名
```
clone で作っていないリポジトリに対して、リモートリポジトリの設定を行う時に上記のコマンドを実行します。

<h3>●リモートリポジトリの中身を引っ張ってくる</h3>

```swift:qiita.rbvar 
git fetch origin　From path/to/共通のリポジトリ名
```

clone で作っていないリポジトリに対して、originを反映させる

<h3>●リモートブランチの追跡を行なう(cloneで複製していないリポジトリの場合)</h3>

```swift:qiita.rbvar 
git branch --set-upstream-to=＜追跡したいリモートブランチ＞ ＜手元のブランチ＞" 
```

<h3>●originブランチの複製(cloneで複製していないリポジトリの場合)</h3>

```swift:qiita.rbvar 
git push ＜リモートリポジトリの名前＞ ＜手元のブランチ＞:＜リモートに作りたいブランチ＞ 
```
上記のコマンドで、共通のリポジトリにブランチを複製することができ、originブランチの複製に成功しました。

手元のリポジトリでのブランチの名前とリモートリポジトリのブランチの名前が同一の場合は以下のコマンドでもokです。

```swift:qiita.rbvar
$ git push <リモートリポジトリの名前＞ ＜ブランチの名前＞
```

***pushの後に何もなければ、共有リポジトリに変更を共有することができる***

```swift:qiita.rbvar
$ git push 
```

<h3>●リモートブランチの削除</h3>
リモートブランチを使用している場合は、２つ消す必要があります。

***①手元のブランチの削除***
これは、[Githubを理解しよう！①](https://qiita.com/syunta061689/items/ff80ab37641d6761d916)の復習ですね

```swift:qiita.rbvar 
$ git branch -d 削除したいブランチ名
```

***②リモートブランチの削除***

```swift:qiita.rbvar
$ git push origin :削除したいブランチ名
```

<h3>●fetch してマージという一連の動作を自動で行なう</h3>
```swift:qiita.rbvar
$ git pull origin 
```
「コンフリクト」が起こる可能性があるので注意！

#最後に
Githubは複数人で使用する、かなり難易度が上がりますよね。
本記事では、筆者のメモ用,アウトプット用として執筆しましたが、こうしてアウトプットすると少し頭の中が整理されていいですね。

参考文献
[Git をはじめからていねいに]　https://github.com/takanabe/introduction-to-git

かなりわかりやすくて、お勧めです！！
Reactひと言メモ(hook)

#hookとは

クラスコンポーネントでしか扱えなかった**ライフサイクル(useEffect)、状態管理(useState)**を関数コンポーネントでも扱えるようにしたもの。


useContextもあるよ(Redux使わないときに使うかも)

##インポートの仕方
```
import React , {useEffect, useState} from 'react'

```

##useState

```
//以下のような1行で設定できる。
const [変数名, 関数名] = useState(初期値)

const [abc, setabc] = useState("")
//ステートabcに文字列aaaをセットできる。
setabc("aaa")

```

##useEffect

```
useEffect(() => {
    //ここに処理
},[依存値])
```
Raspberry PiをScreenly(OSE)を使ってデジタルサイネージにする

Raspberry Pi(3+)にScreenlyをインストールして簡易デジタルサイネージにするための、自分的メモ。
安価にデジタルサイネージを構築するならいいと思います。
（あまり機能は多くない・・・？？）
随時加筆修正しながら記事投稿の練習も兼ねておりますので悪しからず。

##用意するもの

* Raspberry Pi(今回は3+)
* micro USBケーブル（今回はテレビのUSBポートから給電）
* HDMIケーブル
* テレビ（ディスプレイ）

##手順

1. Screenlyのイメージをダウンロード
https://github.com/screenly/screenly-ose/releases

1. Raspberry Pi Imagerを使ってイメージをSDに焼く
https://www.raspberrypi.org/downloads/

1. 電源オン！
（USB差すだけ）

1. CUIモードに切り替える
[ctrl]+[alt]+[F1]

1. configに入って各種設定
`sudo raspi-config`
 * ロケールの変更
 * タイムゾーンの変更
 * キーボードレイアウトの変更
 * オーバースキャンをオフ
 私の環境では画面の周りに黒枠ができ、表示範囲が狭くなっていたため、これをオフにすることでフルスクリーンに。
     * `7 Advanced Options` > `A2 Overscan` > `No`
 * 必要に応じてパスワードの変更

1. remote.itのインストール
セグメント外等からでも操作できるようにするため、これをインストール。

##その他

* IPの固定

 /etc/network/interfaces

```
auto wlan0
iface wlan0 inet static
        address <ip>
        netmask <netmask>
        gateway <gateway>
```
Reactリンク集

## アコーディオンの作成
https://qiita.com/someone7140/items/791256619f2b46365ec4

## モーダルの作成
https://mebee.info/2020/04/09/post-6894/

## ファイルのアップロードの作成
https://www.aizulab.com/blog/react-dropzone/

## jestの参考リンク
https://numb86-tech.hatenablog.com/entry/2016/10/30/140513
https://qiita.com/chimame/items/e97883fd46b67529d59f
React　学習帳その１

#React とは？
>React はユーザインターフェイスを構築するための、宣言型で効率的で柔軟な JavaScript ライブラリです。複雑な UI を、「コンポーネント」と呼ばれる小さく独立した部品から組み立てることができます。

↑公式

#JSX
Reactで表示したいときに使うものは、JSXという。
Javascriptの拡張した書き方？らしい。

returnでJSXを返して、returnの外ではJavascriptを書ける。
##JSXを書くときの決まりごと

 - JSX内にJavascriptを埋め込むこともできるJavascript部分を｛｝で囲む
 - JSXはreturnの中に複数の要素があるとエラーになるので、`<div></div >`で一つの要素にまとめてあげる。
 - imgタグに閉じタグ/`<img src='画像のURL' />`
 - inputタグとtextareaタグも同様`<input />` `<textarea />`
 - クラスをつけるとき・・・`className =　'クラス名'`

#Reactを使う呪文

```react:App.js
//Reactをインポート
import React from 'react';
//React.componentを継承するクラスですよー　ここのクラスの名前はコンポーネントの名前になる
class App extends React.Component {
//JSXを戻り値とするrenderメソッド
  render() {
    const imgUrl = "画像URL"
return (
      <div>
        <h1 className = 'title'>たいとる</h1>
        <img src={imgUrl}/>
      </div>
    );
//どこかでimportするときにはexportが必要
export default App;

```

お気づきだろうか・・・・:fearful: :fearful: :fearful:
`{imgUrl}`を`""`で囲っていないことに・・・。
なぜかはわからないが囲むとエラーだった。いつかわかるといいな。

#Reactが表示される流れ
JSXはJavascriptの拡張版なでJSファイルに書く。その後、どうやってブラウザに表示されるか？:thinking:
以下の手順が必要に。

 - JSXをHTMLに変換する
 - HTMLに変換したものをhtmlファイルのどこに反映するかを表記する
   
```javascript:index.js
//    ↓React要素
const element = <h1>Hello, world</h1>;

//要素を、表示するid名を指定
ReactDOM.render(element, document.getElementById('root'));

```

```html:html
<div id='root'>
　　　\ここに JSXから変換されたHTMLが挿入される/
</div>
```
`document.getElementById()`で()内で指定したIDのHTMLを取得できる。下のリンク参照。
[【JavaScript入門】getElementByIdを完全理解する3つのコツ！](https://www.sejuku.net/blog/27019)
あくまでもJavascriptなんだなぁ

同じJSファイル内にJSXがあれば、上記の書き方でHTMLに変換できる。けど別のファイルだったら↓↓

##もし、別ファイル(例：App.js)だったら、
App.jsを読み込む必要あり。

```javascript:index.js
import App from './components/App';
ReactDOM.render(<App />, document.getElementById('root'));
```

注目していただきたい。。。
上のコードの2行目！`<App />`これなんだろうって思ってたら
タグ（JSXで書かれてる）なんだって！！！！:astonished:
当たり前なのかもしれないけど私はわからなかったー。
コンポーネントはimportされたところであれば、こういうふうにタグみたいな表記で呼び出せる。
AWS Code*とは

# CodeCommit
プライベートGitリポジトリのホスティングサービス。
単品ではわざわざ選択する必要性はないが、

# CodeBuild
CodePipelineで構成可能なビルドプロセス。
スケーラブル。

# CodeDeploy
デプロイの自動化。
[特徴](https://aws.amazon.com/jp/codedeploy/features/)

# CodePipeline
継続的デリバリー。
リリースプロセスのワークフロー化。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87538/66879bba-69ee-bbd7-a8b2-fe62159f3144.png)

AWSだけですべてを構成すると、`CodePipeline`で以下を構成する。

1. `CodeCommit`でソース管理をし、
2. `CodeBuild`で継続的インテグレーションにつなげて、
3. `CodeDeploy`で環境へデプロイ

# CodeStar
Code*の統合管理というかセットアップウィザードというか。
テンプレートが提供されている。

おそらく、`AWS Elastic Beanstalk`などの高速設定と併用することで、かなり早くウェブアプリケーションのCI/CD環境は構築できると思われる。
Ubuntu 16.04でコマンドのショートカットを作る


sshのログインなどいちいち長いコマンドを打つのは面倒なので、ショートカットでコマンドを起動できたら楽だなーと思って調べた。
エイリアスという手もあるがいちいち登録するのがめんどくさいし結局コマンドを打たなくてはいけない。

他のディストリビューションでも使えるかどうかはわからないが、Ubuntuであれば多分使える。

## 環境

* Ubuntu 16.04.7 LTS

## 手順

- ディレクトリ上で空のファイルを作成。名前は任意で拡張子は```.desktop```。

<img width="400" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/725243/466d7dac-0fda-7d52-7939-6030bb0f9906.png">

- 作ったファイルにgeditなりvimなりを使って以下の内容を記述。<br>Nameにはわかりやすい名前を、Execには実行したいコマンドを記述する。

```
[Desktop Entry]
Name=ssh_connect_raspberrypi
Exec=ssh pi@192.168.11.25
Terminal=true
Type=Application
```

- ファイルに実行権限をもたせる。右クリックでプロパティ>アクセス権からチェックボックを選択。

<img width="300" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/725243/75939f74-88c7-0a76-8e0e-73cac6fbe230.png">

- すると実行ファイルになるのでダブルクリックすると指定したコマンドを実行したターミナルが起動する。

## 備考

ちなみに記述した内容は実は端末のショートカットのプロパティのここなので、こちらを編集しても作成可能。

<img width="300" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/725243/afa4b714-3776-6072-2f5f-f81b5bd4d5e8.png">
NEologdのインストールに手こずった話(icloudフォルダはめんどくさい)

環境
初書：2020/10/23
PC：macOS 10.15.7
git : 2.21.1 (Apple Git-122.3)

# 前置き
pythonで文字列解析を行おうと思い、mecabをインストールし、
そして現代の単語にも対応しているというNEologdをインストールすることにした。

# 前提
・インストール方法の説明を求める場合は他ページへ
・NEologd等の前提理解
・mecabはインストール済み

# 公式サイト
[mecab-ipadic-NEologd : Neologism dictionary for MeCab](https://github.com/neologd/mecab-ipadic-neologd/blob/master/README.ja.md)

インストール方法はここに書いてある

# 詰まった箇所
とりあえず

```zsh
% git clone --depth 1 https://github.com/neologd/mecab-ipadic-neologd.git
```
にてインストールには問題なく成功した。
その後`cd`を行い、

```zsh
% ./bin/install-mecab-ipadic-neologd -n
```
を実行する。
詰まったのはここ。

```zsh
# 前略
[install-mecab-ipadic-NEologd] :     file => ok
[install-mecab-ipadic-NEologd] :     openssl => ok
[install-mecab-ipadic-NEologd] :     awk => ok

./bin/install-mecab-ipadic-neologd: line 347: cd: /Users/username/Library/Mobile: No such file or directory
```
どうやら`/Users/username/Library/Mobile`のディレクトリが存在していないらしい

ちなみに上記のディレクトリを仮に作成してみても、

```zsh

fatal: not a git repository (or any of the parent directories): .git
fatal: 'origin' does not appear to be a git repository
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
```
…と表示され、どちらにしてもエラーが出た。

# 原因
わかれば簡単なのだが、それに気づけなかったために原因特定に少し時間がかかった。
エラー文で色々と検索してみると、以下のページにたどり着いた。
[How to fix: "sh: /Users/username/Library/Mobile: No such file or directory"?](https://github.com/thoughtbot/ember-cli-rails/issues/569)
そして記される次の一行。
> I have a hunch that the whitespace in Mobile Documents is part of the issue here.

どういうことかというと、NEologdをicloud driveに保存していたために、フォルダのディレクトリが`/Users/username/Library/Mobile Documents/`と、MobileとDocumentsの間に空白ができてしまったことによるエラーだった。
つまり、フォルダが存在していないのではなく、フォルダ名を正しく読み取られていなかったことによるエラーだったのだ。

# 解決
とりあえずicloud driveに入れている限りフォルダ名から空白は取り除けないので、普通にローカルに移動させて実行した。
これで特に問題なくインストール完了！

# 結論
プログラムはローカルでインストールしましょう。
というか何故mobile documentsに空白を入れたのだろうか。。（言っても仕方ない）
Power BI Servicesに、XMLAエンドポイント（Analysis Servicesコネクター）で接続したレポートを公開できない仕様について

# 概要
本情報は2020年10月23日時点での情報であり、XMLAエンドポイント機能がプレビューであることから、GA時には状況が変更される可能性があります。

Power BI Servicesから、Power BIデータセットへのXMLAエンドポイントによる接続をサポートしていないようです。

## 問題
### Power BI Desktopから、発行した場合のエラー

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/c4f11b78-fb5a-6e14-f079-701d0a1cb00f.png)

### Power BI Services上にて、レポートを配置した場合のエラー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/54a6bbfa-54c2-c230-323d-02c9bdc20ee2.png)

> 問題が発生しました
情報を正確に入力しているかご確認ください。
後でもう一度お試しいただくか、サポートにお問い合わせください。サポートに問い合わせる場合は、次の詳細情報をご連絡ください。
アクティビティ ID: af6a870e-9877-43c0-bf5e-16a5a25d18e7
要求 ID: 54631853-a46b-c48f-de9d-3f99c7f7df94
相関 ID: c284adc2-8e36-fac5-a2e4-237b52b61e51
状態コード: 400
時刻: Fri Oct 23 2020 13:49:23 GMT+0900 (日本標準時)
サービスのバージョン: 13.0.14553.59
クライアント バージョン: 2010.2.03406-train
クラスター URI: https://wabi-west-us-b-primary-redirect.analysis.windows.net/


## 原因
2020年10月23日時点において、ドキュメントにて下記記載があり、サポート対象外であるため、レポートを公開できません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/2e1e585c-857a-ae87-0c28-16e800e44c8e.png)

引用元：[XMLA エンドポイントを使用したデータセット接続 (プレビュー)](https://docs.microsoft.com/ja-jp/power-bi/admin/service-premium-connect-tools#power-bi-desktop-in-live-connect-mode)
ローグライクRPG開発日記_0

かねてより制作してみたかったローグライクRPGに着手しようと思い、今、こうして書かせてもらっています。
自分の備忘録のように書き込んでいますので、多少読みづらいのはご了承ください。
とりあえず、色々メモしておきます。

<メイン>
・「風来のシレン」のような2D見下ろし型
・ただし、レベルは1には戻らない（なぜこのようにするのかは後述、一応Lv1ダンジョンも別途作りたい）
・主人公候補は3人、その中から一人を選んでゲームスタート（周回要素あり）
・主人公それぞれにストーリーが有り、ダンジョンクリアによって進行
・主人公たちの拠点となる町には様々な施設があり、施設ごとに恩恵がある
（素材やお金を寄付することで施設レベルが上がり、より良いサービスを受けることができる）
[施設例]
○商店…アイテム売買
○酒場…依頼受領、情報収集
○鍛冶屋…武器の強化、売買
○倉庫…アイテムの保管
○道場…スキルの習得

・ダンジョンは他の冒険者も探索しており、誰かがダンジョンを踏破すると、そのダンジョンの情報が酒場で売られるようになる。
・他の冒険者が最終ダンジョンを踏破してしまうとゲームオーバー（実質的な時間制限）
　LVや倉庫にあるアイテムを保持したまま周回する事もできる


<要素>
・アイテム、敵の図鑑機能（アイテムは入手、敵は倒すことで図鑑に登録される）
（項目ごとに主人公たちのコメントを入れれたらなあ）
・依頼（アイテム納品、敵の討伐など。クリアすると報酬がもらえる）
・モンスターハウス
・施設レベルアップの素材（敵、又は床から入手可）


実装したいと思っているのはこの辺りです。施設育成に重きを置きたいので、いかにリソースを効率よく集め、施設の人たちに貢ぎ物をし、他の冒険者を出し抜いてダンジョン最深部にある宝を入手できるか、をコンセプトとして制作しようと思っています。


<懸念事項>
・Unityの知識不足（まだまだわからないことが多い）
・広告、販売の仕方
・モチベーション
・制作期間の不明瞭さ（何ヶ月かかるかわからない）
・イラスト


中々考えることが多いです。特に、イラストに関しては全くのド素人で、頭の中で想像はできてもアウトプットが出来ないもどかしさがあります。なんとか描けるように努力するか（正直どれくらいかかるかわからない…）、外注で探すか（相場がどんなものか不安）、どちらにしようか悩んでいる状態です。

こんな感じでなんとも見切り発車的なスタートですが、見守っていただけると幸いです。
volatilityの作法 その18

#概要

volatilityの作法、調べてみた。
yarascanやってみた。

#volatility -f zeus.vmem/zeus.vmem yarascan --yara-rules="{4d 5a 90 00 03}" --pid 856


```
Volatility Foundation Volatility Framework 2.6
Rule: r1
Owner: Process svchost.exe Pid 856
0x01000000  4d 5a 90 00 03 00 00 00 04 00 00 00 ff ff 00 00   MZ..............
0x01000010  b8 00 00 00 00 00 00 00 40 00 00 00 00 00 00 00   ........@.......
0x01000020  00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00   ................
0x01000030  00 00 00 00 00 00 00 00 00 00 00 00 e0 00 00 00   ................
0x01000040  0e 1f ba 0e 00 b4 09 cd 21 b8 01 4c cd 21 54 68   ........!..L.!Th
0x01000050  69 73 20 70 72 6f 67 72 61 6d 20 63 61 6e 6e 6f   is.program.canno
0x01000060  74 20 62 65 20 72 75 6e 20 69 6e 20 44 4f 53 20   t.be.run.in.DOS.
0x01000070  6d 6f 64 65 2e 0d 0d 0a 24 00 00 00 00 00 00 00   mode....$.......
0x01000080  fc a9 f5 66 b8 c8 9b 35 b8 c8 9b 35 b8 c8 9b 35   ...f...5...5...5
0x01000090  7b c7 fb 35 b9 c8 9b 35 7b c7 c6 35 b1 c8 9b 35   {..5...5{..5...5
0x010000a0  b8 c8 9a 35 e7 c8 9b 35 7b c7 c5 35 b9 c8 9b 35   ...5...5{..5...5
0x010000b0  7b c7 c4 35 b4 c8 9b 35 7b c7 c1 35 b9 c8 9b 35   {..5...5{..5...5
0x010000c0  52 69 63 68 b8 c8 9b 35 00 00 00 00 00 00 00 00   Rich...5........
0x010000d0  00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00   ................
0x010000e0  50 45 00 00 4c 01 03 00 d6 7e 10 41 00 00 00 00   PE..L....~.A....
0x010000f0  00 00 00 00 e0 00 0f 01 0b 01 07 0a 00 2c 00 00   .............,..
```

#volatility -f zeus.vmem/zeus.vmem yarascan --yara-rules="cannot" --pid 856


```
Volatility Foundation Volatility Framework 2.6
Rule: r1
Owner: Process svchost.exe Pid 856
0x0100005b  63 61 6e 6e 6f 74 20 62 65 20 72 75 6e 20 69 6e   cannot.be.run.in
0x0100006b  20 44 4f 53 20 6d 6f 64 65 2e 0d 0d 0a 24 00 00   .DOS.mode....$..
0x0100007b  00 00 00 00 00 fc a9 f5 66 b8 c8 9b 35 b8 c8 9b   ........f...5...
0x0100008b  35 b8 c8 9b 35 7b c7 fb 35 b9 c8 9b 35 7b c7 c6   5...5{..5...5{..
0x0100009b  35 b1 c8 9b 35 b8 c8 9a 35 e7 c8 9b 35 7b c7 c5   5...5...5...5{..
0x010000ab  35 b9 c8 9b 35 7b c7 c4 35 b4 c8 9b 35 7b c7 c1   5...5{..5...5{..
0x010000bb  35 b9 c8 9b 35 52 69 63 68 b8 c8 9b 35 00 00 00   5...5Rich...5...
0x010000cb  00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00   ................
0x010000db  00 00 00 00 00 50 45 00 00 4c 01 03 00 d6 7e 10   .....PE..L....~.
0x010000eb  41 00 00 00 00 00 00 00 00 e0 00 0f 01 0b 01 07   A...............
0x010000fb  0a 00 2c 00 00 00 08 00 00 00 00 00 00 09 25 00   ..,...........%.
0x0100010b  00 00 10 00 00 00 40 00 00 00 00 00 01 00 10 00   ......@.........
0x0100011b  00 00 02 00 00 05 00 01 00 05 00 01 00 04 00 00   ................
0x0100012b  00 00 00 00 00 00 60 00 00 00 04 00 00 dd 9c 00   ......`.........
0x0100013b  00 02 00 00 84 00 00 04 00 00 40 00 00 00 00 10   ..........@.....
0x0100014b  00 00 10 00 00 00 00 00 00 10 00 00 00 00 00 00   ................
```
poetryのuninstall

## 概要

備忘録。 
poetryの`poetry self update`を行った後、poetryを実行したら、あらゆるpackageが足りないと無限にerrorを吐かれたので、
仕方なく、poetryをuninstallした後、installをし直した。

公式ドキュメントにて詳細は参照されており、本記事もそれに参考してます。
https://python-poetry.org/docs/#:~:text=If%20you%20see%20something%20like,variable%20before%20executing%20the%20installer.

## 前提
- How to install poetry

```zsh
$ curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py | python -
```

## Uninstall方法
- How to uninstall poetry

```zsh
$ curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py | python - --uninstall
```

以上、解散
行から目的の文字列を抜き出したいときの方法 コマンド4選

Python クローリング&スクレイピング―データ収集・解析のための実践開発ガイド-
https://www.amazon.co.jp/dp/B01NGWKE0P/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1

という書籍の
1.4.1電子書籍の総数を取得する
という章から学習した内容

grepで抜き出したhtmlコードから文字列のみを正規表現で抜き出すという操作
方法は4つ紹介されており

```
1. sedコマンドで正規表現にマッチした箇所を抜き出す
2. sedコマンドでマッチした箇所を取り除き、残った場所を取り除く
3. cutコマンドを使って特定の文字で区切られた文字列からn番目を抜き出す
4. awkコマンドを使ってスペースで桁揃えされた文字列からn番目を抜き出す
```

そもそものコマンドを知らない。。。のですが、前のページにsed,cutの説明はありました。

## sed (Stream EDitorの略)
使用タイミング: 特定の条件にマッチする行を置換、削除できる
使用方法: 's/検索する正規表現/置換する文字列/オプション'

【使用例】

```
# .をスペースに置き換えて出力することができる /gは1行に検索する正規表現が複数回出現しても全部置き換えるということと同じ
XX | sed 's/./ /g'
```

##cut
使用タイミング: 特定の文字で区切られたテキストの一部の列を抜き出すときに使う
【使用例】

```
# ,で区切った1列目と2列目のみを出力する。-dで区切り文字、-fで列の番号を指定。
XX | cut -d , -f 1,2
```

本題の1~4の方法で抜き出す処理について一つずつ見ていきたいと思います。
## 1. sedコマンドで正規表現にマッチした箇所を抜き出す
使用方法: *sed -E 's/.\*(抜き出したい箇所にマッチする正規表現).*/\1/'
解読:
. は任意の1文字にマッチする
* は直前のパターンを0回以上繰り返す
() は()で囲まれたパターンをグループ化する 例: (hello)は hello-world や world-helloにマッチする
\1 は全体を抜き出したい正規表現に置き換える(キャプチャ)する

【使用例】

```
echo hello_world | sed -E 's/.\*(hello.).*/\1'
# 出力結果 
  hello
```

## 2. sedコマンドでマッチした箇所を取り除き、残った場所を取り除く

解読:
[　]内の^ は否定を表す
* は直前のパターンを0回以上繰り返す
→　< XXXXX > のようなパターンを空白にする =  <>で囲んでいる場所を削除

【使用例】

```
echo'<li class="pagingnumber">130/2098</li>' | sed -E 's/<[^>]*>//g'
``` 

## 3. cutコマンドを使って特定の文字で区切られた文字列からn番目を抜き出す
使用タイミング: csvから文字列を抜き出す時
解読: 
'-d , -f 2' は 区切り文字, 区切られた文字列から2番目の項目

```
echo '1,野球,阪神' | cut -d , -f 2
# 出力結果
  野球
```
## 4. awkコマンドを使ってスペースで桁揃えされた文字列からn番目を抜き出す
スペースで桁ぞろえされていて、区切り文字が連続するときに使える。
(cutは区切り文字が連続するときには向いてない)
{print $n}　という文字列を与えるとn番目の文字列を抜き出すことができる。

```
echo 'A B C D E' | awk '{print $4}'
# 出力結果
　D
```
Nano-Terminal (php上でterminal)

## 参考

* [Roatandave/Nano-Terminal](https://github.com/Roatandave/Nano-Terminal)

1ファイルだけで利用ができるので持ち運びやすい


## インストール

```sh
git clone https://github.com/tukiyo/Nano-Terminal
cd Nano-Terminal
```

* terminal.php内でユーザー名、パスワードの指定をするとログインができる。
    * なおvimなどは動かない。
[Unity][自分用メモ]2D Pixel Perfect, Light 2D 初期設定

[2D Pixel Perfect]
1. Main Camera にPixel Perfectのコンポーネントを追加
2. Pixels per Unit → 32 （解像度による）
3. Reference Resolution X 480 Y 270

[2DLight]
https://kan-kikuchi.hatenablog.com/entry/Light2D
[メモ]Amzon Linux2 にImagickをインストールする

# やり方

##リポジトリから

```bash
sudo yum install php-pear php-devel gcc 

sudo yum install ImageMagick ImageMagick-devel ImageMagick-perl

sudo convert --version
#Version: ImageMagick 6.7.8-9 2020-02-13 Q16 http://www.imagemagick.org
#Copyright: Copyright (C) 1999-2012 ImageMagick Studio LLC
#Features: OpenMP

```

## ソースコードから


https://devguides.co/setup-wordpress/
golang から Azure KeyVault を使ってデータを暗号／復号する

## はじめに
以前 golang から Azure KeyValut を使用してデータを暗号化するのに、資料がなくて困ったので簡単にまとめました。

## やってみよう

#### 必用なもの
* Azureアカウント
* Azure KeyValut用プリンシパル

#### KeyVault暗号／復号用コード

まずは Azure 認証用のコードです。
NewAuthorizerFromEnvironment() での認証には以下の環境変数が必用です。

|環境変数|説明|
|-----|-----|
|AZURE_TENANT_ID|AzureのテナントID|
|AZURE_CLIENT_ID|AzureのクライアントID|
|AZURE_CERTIFICATE_PATH|認証用証明書のパス|
|AZURE_CERTIFICATE_PASSWORD|認証用証明書の復号パスワード|


```go:azure.go&nbsp;(azure認証用コード)
package auth

import (
	"log"

	ka "github.com/Azure/azure-sdk-for-go/services/keyvault/auth"
	"github.com/Azure/go-autorest/autorest"
)

var (
	AzureAuthorizer autorest.Authorizer
)

func init() {
	var err error
	AzureAuthorizer, err = ka.NewAuthorizerFromEnvironment()
	if err != nil {
		log.Fatal(err)
	}
}

```

次に暗号／復号処理の実装です。
といっても、Azure が用意したメソッドを実行するだけです。
以下の環境変数が必用です。

|環境変数|説明|
|-----|-----|
|AZURE_VAULT_BASE_URL|Azure KeyVault のベースURL(xxx.vault.azure.net)|
|AZURE_VAULT_GENERAL_KEY_NAME|鍵名未指定の暗号に使用するデフォルト鍵名|


```go:key.go&nbsp;暗号／復号処理
package vault

import (
	"context"
	"log"
	"os"

	kv "github.com/Azure/azure-sdk-for-go/services/keyvault/v7.0/keyvault"
	"./auth"
)

var (
	VaultBaseURL   string
	GeneralKeyName string
)

func init() {
	VaultBaseURL = os.Getenv("AZURE_VAULT_BASE_URL")
	if len(VaultBaseURL) == 0 {
		log.Fatal("Please set environment variable \"AZURE_VAULT_BASE_URL\"")
	}
	GeneralKeyName = os.Getenv("AZURE_VAULT_GENERAL_KEY_NAME")
	if len(GeneralKeyName) == 0 {
		log.Fatal("Please set environment variable \"AZURE_VAULT_GENERAL_KEY_NAME\"")
	}
}

// keyVersion = "" -> use current key version
func Encrypt(keyName string, keyVersion string, plain *string) (kv.KeyOperationResult, error) {
	params := kv.KeyOperationsParameters{
		Algorithm: kv.RSAOAEP256,
		Value:     plain,
	}

	c := kv.New()
	c.Authorizer = auth.AzureAuthorizer
	return c.Encrypt(context.Background(), VaultBaseURL, keyName, keyVersion, params)
}

// keyVersion = "" -> use current key version
func GeneralEncrypt(plain *string) (kv.KeyOperationResult, error) {
	return Encrypt(GeneralKeyName, "", plain)
}

// keyVersion = "" -> use current key version
func Decrypt(keyName string, keyVersion string, encrypted *string) (kv.KeyOperationResult, error) {
	params := kv.KeyOperationsParameters{
		Algorithm: kv.RSAOAEP256,
		Value:     encrypted,
	}

	c := kv.New()
	c.Authorizer = auth.AzureAuthorizer
	return c.Decrypt(context.Background(), VaultBaseURL, keyName, keyVersion, params)
}

// keyVersion = "" -> use current key version
func GeneralDecrypt(keyVersion string, encrypted *string) (kv.KeyOperationResult, error) {
	return Decrypt(GeneralKeyName, keyVersion, encrypted)
}
```

#### 実行例
```go:main.go
	plain := hex.EncodeToString([]byte("plain text"))
	enc, _ := vault.GeneralEncrypt(&plain)

	encrypted := *enc.Result
	keyName := vault.GeneralKeyName
	keyVersion := path.Base(*enc.Kid)

	dec, _ := vault.Decrypt(keyName, keyVersion, &encrypted)
	str, _ := hex.DecodeString(*dec.Result)
```
CSS(em,rem,px,%)の指定する単位について

## ■ はじめに

CSSの指定する単位について記事にしました。
この記事で得る内容は以下の通りです。

・CSSの基礎知識が増える
・CSSのプロパティを適切な単位で指定する事で、アクセシビリティを向上させ、より良いサービスを作ることができる


■ 参考にさせて頂いたサイト
[ちゃんと使い分けてる？CSSのpx, em, rem, %, vw単位の違い](https://note.com/takamoso/n/nde1275183086)

## ■ em,rem,px,%について

### ■ em

・大文字「M」の高さを基準に1文字分の大きさを示し、<font color="Red">**親要素のfont-size値を基準に相対的な値とする**</font>
・要素が入れ子構造である場合、意図しない異なる大きさになる可能性がある

```scss:emで指定した場合

html {
  font-size: 10px;
  body {
    font-size: 1.5em;
    // font-size: 15px;
    div {
      font-size: 1.2em;
    // font-size: 18px;
    }
  }
}

```

### ■ rem

・root emの略で、<font color="Red">**root要素（html要素)のfont-size値を基準に相対的な値とする**</font>
・html要素のfont-size値を調整することで、ページ全体のサイズ変更にも対応しやすい

```scss:remで指定した場合

html {
  font-size: 10px;
  body {
    font-size: 1.5rem;
    // font-size: 15px;
    div {
      font-size: 1.2rem;
    // font-size: 12px;
    }
  }
}

```

### ■ px

・絶対値（他の要素に影響されない）
・グラフィックソフトでWebデザインを制作時、サイズ単位として用いられ、データの整合性を取りやすい
・ユーザー操作による文字サイズの変更に対応できなかったり、環境や端末により文字サイズが異なる場合がある

### ■ %

・相対値で、プロパティによって何が基準になるか異なる
・vw,vhと比較されますが、vw,vhはスクロールバーの幅が影響するので、全体的なレイアウトには%が良い


## ■ まとめ

| 単位 | プロパティ             |
|:---:|:--------------------|
| px  | borderなど           |
| %   | height、widthなど     |
| em  | font-size、paddingなど|
| rem | emと同じ              |

pxは、borderやborder-radiusなど見た目が変わらない所に。
%は、大まかなレイアウトやブロック要素に。
他はremを使って、徐々に慣れていけばいいのかなと思いました！