OmniAICreator/Qiita-1.07M huggingface dataset:
【個人用】Command LineとGitで使われる本当に基礎的なコマンドや単語のまとめ

初歩的なコマンドや意味について、自分でもすぐ見返せるように簡単にまとめてみました。

それぞれのコマンドについてはあまり深堀ってはいません。


#Command Line

ようはキーボードの文字だけでコンピューターを操作するもの。コマンド＝命令。
正確にはCUIでコマンドを実行したい時、ターミナルを立ち上げたら黒い画面が出てくるが、それのこと（または画面上の行のこと）を指すよう。


**単語**

- ディレクトリ...フォルダのこと

- ルートディレクトリ...ファイル階層の最初のディレクトリのこと。それまでのディレクトリは`/`で区切られる。

- ホームディレクトリ...ユーザーがログインした際の初期位置のディレクトリ。`～`で示される。

- カレントディレクトリ...現在いるディレクトリのこと



**コマンド**

- `touch ファイル名`　ファイルを作成する

- `cat ファイル名`　ファイルの中身を確認する

- `mkdir ディレクトリ名`　ディレクトリを作成する(make directoryの略) 

- `cd ディレクトリ名`　ディレクトリを移動する。親→子のみ(change directoryの略)

- `cd ..`　ディレクトリを移動する。子→親

- `cd`　ホームディレクトリへ移動する。

- `pwd`　カレントディレクトリ ～ ルートディレクトリまでを確認する(print working directoryの略)

- `ls` カレントディレクトリの中身(ディレクトリやファイル)を確認する(listの略)

- `mv ディレクトリ名(ファイル名)　ディレクトリ名`　指定したディレクトリに移動させる。先に書いたほうが移動させたいもの。ファイルでもディレクトリでもOK。後に書いたほうが移動先のディレクトリ。(moveの略)

- `mv ディレクトリ名(ファイル名)　新規ディレクトリ名(ファイル名)`　ディレクトリ名またはファイル名を変更する。

※同じmvコマンドでも後に書く方に既存のディレクトリ名を書くと**移動**、存在しないディレクトリ名を書くと**改名**となる。
　

- `cp ファイル名　新規ファイル名`　既存のファイルを新しいファイルにコピーする。

- `cp -r　ディレクトリ名　新規ディレクトリ名`　既存のディレクトリを新しいディレクトリにコピーする。

- `rm　ファイル名`　ファイルを削除する  　 

- `rm -r　ディレクトリ名`　ディレクトリごと削除する


#Git

>Gitはプログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システムである。
(Wikipediaより)


**単語**

- ローカル...自分のPC

- リモート...離れたところのPC

- リポジトリ...ディレクトリやファイルの変更を管理する場所

- コミット...記録すること

- リモート...共有ファイルの置き場。Githubなど

- プッシュ...リモートに送信　例)Githubにpushする

- プル...リモートから受信　例)Githubからpullする

※タイトル通りあくまで自分でこう置き換えたら覚えやすいかな、という考えに基づいています。


**コマンド**

- `git init`　gitを使う時に初めに入力するもの(initializedの略。初期化の意味)

- `git add`　 対象となる共有したいファイル(ディレクトリ)の選択

- `git commit -m "メッセージ"`　選択したファイルを記録する。

※メッセージはコミットメッセージといい、他の人が見ても分かるように分かりやすく書く。

ここまでで共有する準備が完了する。

- `git remote add origin URL`　リモートに登録するときのコマンド。originはリモート名といい、一般的にはoriginを使う。

- `git push origin master`　リモートに登録したあと、ファイルをアップロードするのに使うコマンド。アップロード＝プッシュする

- `git pull origin master`　同様にこのアップロードされたファイルをダウンロードするのに使うコマンド。ダウンロード＝プルする

- `git status`　どのファイルを変更したかを確認する(変更があったファイルは赤で表示される。また、変更があったファイルのうち、addされたものは緑色で表示が変わる)

- `git diff`　変更の内容を確認する(赤色が変更前のコード、緑色が変更後のコードとなる)

- `git log`　コミットメッセージ、コミットの履歴を確認する

- `git log -p`　コミットの履歴と変更内容を確認する



ざっとこんなところで。気が向いたら追加していきます。
GAのビューフィルタにはユーザー/セッションスコープのカスタムディメンションを使うことができる

#疑問
Googleアナリティクスのビューフィルタはヒットを抽出・変換・除外するものですが、ユーザースコープおよびセッションスコープで作ったカスタムディメンションを条件にしてフィルタできるのでしょうか？

当初できないのでは？と考えていましたが、サポート記事を見るとできそうなことが書いてあります（日本語がちょっと難しいですが...）。
>セッション スコープかユーザー スコープの場合: セッション スコープかユーザー スコープのカスタム ディメンションは、その値が付加されたヒットがフィルタされても、ディメンション自体はフィルタされません。ディメンションの値は現在のセッションのすべてのヒットに適用され、ユーザー スコープのディメンションであれば、その後のセッションでも適用されます。
https://support.google.com/analytics/answer/2709828?hl=ja


例えば、会員IDをユーザースコープのカスタムディメンションにセットしているサイトでの利用が考えられるのかな、と思います（ちなみに会員専用のビューを作ることに関していくつか論点はあると思いますが、この検証で考えたいことではないため、無視します）。

#検証
ここでは、既に作ってあるユーザースコープのカスタムディメンションである`client id`を検証に使います。
<img width="439" alt="compare-view-filter-customdimension.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521810/fc1b9d9b-c4eb-6071-a87b-5147b974e78a.png">

テスト用のビューのフィルタに`client id`を指定しました。
<img width="438" alt="compare-view-filter-setting.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521810/f06a2b91-311c-5b52-ac88-a6e672b7ee34.png">

結果を見るとフィルタが適用されています。
<img width="908" alt="compare-view-filter.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521810/087d3416-3c20-0e77-5196-cd4265a89cf4.png">

同様に、セッションスコープのカスタムディメンション`session id`でも再現しました。

したがって、
「**ユーザースコープおよびセッションスコープのカスタムディメンションは、ビューフィルタで利用できる**」
と言えます。


---
何かあればお手数ですが、本記事か以下アカウントでお知らせください！

**\ *Follow Me!* /**
**[*Qiitaアカウント*](https://qiita.com/MasatoEmata)**
**[*Twitterアカウント*](https://twitter.com/masatoemata)**
AWS DocumentDB vs AWS DynamoDB vs MongoDB on EC2 技術選定

MongoDBからの移行での技術選定を書いていきます。
NoSQLのブームが再来していると感じている今日この頃。

今回技術選定をすることになった経緯としては、
既存のwebサイトがlocalhostのMongoDBで動いていたため、冗長化ができずに単一障害点となっており、
webAPおよびDBを冗長化して耐障害性/可用性を高める必要がありました。
**※web/APとDBが同一インスタンス上で動いている**

## 既存の環境
Ubuntu 16.04.4 LTS
nginx 1.10.3
node.js 8.9.4
MongoDB 3.4.10

**現状では監査ログの出力やフェールオーバーの仕組みは取り入れておりません。**
**またかなり古いバージョンとなっていますが、今回の記事にはほぼ関係ないので、ご了承ください**


## Local mongoからの移行技術選定
選定の候補に上がったのは以下でした。
AWSを使用しているので、選択肢はAWSの中で使用できるNoSQLサーバとなります。

- MongoDB on EC2
- DocumentDB
- DynamoDB

アプリケーションの用途として、**データ収集用**のサーバです。
技術選定の際は以下で考え、総合的判断で算出していきます。
※ ()の中は優先度を示しています

1. アプリケーションへの影響が小さい (中)
2. 現状の性能が担保できる (高)
3. 保守運用コストが低い (中)
4. サーバ固定費が低い (中)
5. 耐障害性/可用性が担保できる (高)
6. DB側の開発コストが低い (高)
7. データ移行コストが低い (低)

それぞれメリットやデメリットなどを以下で挙げていきます。

### MongoDB on EC2
既存のWeb/APとDB一体型からDBを外出しした形となります。
既存と性能や呼び出し方が変わらないため影響は小さいですが、追加開発が多くなります。

#### メリット
- アプリケーションへの影響が最小
- 現状の性能を担保しやすい
- データ移行コストが最も低い

#### デメリット
- バックアップなどの管理をしなければならない
- フェールオーバーの仕組みをカスタマイズしなければならない
- ログの送付や監査ログの仕組みをカスタマイズしなければならない

### DocumentDB
AWSフルマネージドサービスとなります。
MongoDBとの互換性も高いことが特徴となります。

#### メリット
- MongoDBとの互換性が高いため、アプリケーション影響が小さい
- mongo shellをサポートしているためデータ移行コストも低い
- AWSフルマネージドのためバックアップや監査ログの運用が楽
- 可用性や耐障害性もAWSが担保してくれる (はず)
- 開発コストが低い

#### デメリット
- 性能によって費用が高くなる可能性がある

### DynamoDB
AWSのマネージドサービスとなります。
MongoDBとの互換性はありませんが、DMS (Database Migration Service)を使用することで移行が楽になります。

#### メリット
- サーバの管理が不要
- AWSマネージドのためバックアップや監査ログの運用が楽
- 可用性や耐障害性もAWSが担保してくれる

#### デメリット
- アプリケーションへの影響が大きい (DB設計からの見直しが必要なため修正が多い)
- DBの開発コストが高い (設計から見直しが必要)
- データ移行のコストが他よりも高い (DMSの構築もしなければならない)
- 性能によって費用が高くなる可能性がある

## 技術選定結果と考察
以下主観ですが、表にまとめてみました。
性能や費用面は検証が必要なものの、**結論から言えばDocumentDBが総評として良さそうと判断しました。**

|比較項目|MongoDB on EC2|DocumentDB|DynamoDB|
|:--------------- |:-----:|:-----:|:-----:|
| アプリケーション影響 |   ◎   |   ◯   |   △   |
| 性能担保         |   ◯   |   ?   |   ?   |
| 保守運用コスト     |   ×   |   ◯   |   ◎   |
| 費用            |  2~３倍 |   ?   |   ?   |
| 耐障害性/可用性   |   △   |   ◯   |   ◯   |
| DB側開発コスト     |   ×   |   ◎   |   △   |
| データ移行        |   ◎   |   ◯   |   ×   |

1. アプリケーションへの影響が小さい (中)
2. 現状の性能が担保できる (高)
3. 保守運用コストが低い (中)
4. サーバ固定費が低い (中)
5. 耐障害性/可用性が担保できる (高)
6. DB側の開発コストが低い (高)
7. データ移行コストが低い (低)

別途検証の記事は上げていきますので、お楽しみに。

やはり、開発までのハードルの低さ、管理の簡単さ (コスト減)を合理的に判断するとマネージドサービスの使用が良さそうですね。

ただ、ベンダーロックインになってしまうのでコンバージドなアーキテクチャも状況によって検討の余地がありそうです。
Local MongoDB (EC2) vs DocumentDBの記事も記載していきます。
データベースのテーブルをCSVでぶっこ抜き【RとpythonからODBC接続】

皆さんCSVでデータベースのデータ抜きたい時どうしてるんですか？
よかったら教えてください！
私はこんな感じ↓↓↓

#データベースのテーブルをCSVにしたい


抽出依頼が来てデータベースに対してクエリ書いて出た結果をCSVにしたい。

社内データ分析者はSQL書いて分析用のファイルを作成したりします。
エクセルで組んでODBC接続してきてもいいのですが、どうせならそのまま統計ソフトにデータをぶち込みたい。
そのまま数値の計算ロジックや入れ替えロジックを分析ソフト側で処理してしまいたい。

#ODBCで接続

データベースとの接続の仲介をしてくれるodbcなるものがあります。
ODBCの設定やなんたるかは他のサイトに任せましょう。
データベースを自分で設定する人でなければ、誰かが使っているはずなので聞きましょう。
とりあえずデータベースサーバのIPアドレスと接続用ドライバを聞けばOKです。

方法はリンクで。
[こことかODBC](http://www.venus.dti.ne.jp/~yoshi-o/RDB/ODBC-connection.html)
[こっちもODBC](https://qiita.com/tarosa0001/items/0d68b38b61c1eaaa4bbe)

設定時に「データソース名」を設定します。
これをメモっておいてください。


#まずR言語の方から

Rのインストールは[CRAN](https://cran.r-project.org/)からダウンロードしてインストール、Rエディタに以下のスクリプトを打ち込めば実行できます。


#テーブルの想定　と　ぶっこ抜きスクリプト

user_logという600万レコードが詰まっているデーブルがあったとする
普通にデータベースに接続するソフトですべて抜き出そうとすると、とてつもなく時間がかかる。
他の人も接続していたらサーバーのCPU負荷が恐ろしいことになって皆様から怒られること必須。

データベースに繋げるソフトでは　→[CSE](http://www.hi-ho.ne.jp/tsumiki/)　が好き。
これもODBCのデータソース名とID,passが分かれば接続できる。

#基本的にはこんな構図

```r
library(RODBC)

conn_DB <- odbcConnect("データソース名", "割り振られたID", "IDと一緒に発行されるであろうpass")
query <- paste0("select count(*) from user_log")
tbl <- sqlQuery(conn_DB, query)
odbcClose(conn_DB)
```

これをFOR文で回す。

まず上でデータベースに接続してテーブルが何行あるか確認できる。
600万と確認できたとしよう。
一括で抜こうとするとサーバーのCPUが思考停止するので分割で小規模に抜いていく。
分析ソフト側もメモリがパンパンになってしまう可能性があるので細かく書き出して最後に結合することをオススメする。



```r
SEQ<-seq(1,6000000,5000)
LIM<-length(SEQ)-1

conn_DB <- odbcConnect("データソース名", "割り振られたID", "IDと一緒に発行されるであろうpass")
for(i in 1:LIM){
  query <- paste0(
    "select * from user_log ",
    "limit 5000 offset ",
      as.numeric(SEQ[i])
  )
  tbl <- sqlQuery(conn_DB, query)
  write.csv(tbl, paste0("this_is_",i,"th.csv"), row.names=F)
  Sys.sleep(10)
}
odbcClose(conn_DB)
```

#細かい解説と注意


これで細かく5000レコードに分けてデータを抽出できた。
SQLで書いているクエリをpaste0で結合させてやればいい。
SQL中にシングルクォーテーション記号がある場合はバックスラッシュを前に着けてやる。

```sql
where colum = '10'
```

```r
where colum = \'10\'
```

paste0で文字を結合するとSQLの改行が消える時があるので注意しながら書くこと。

```r
paste0("select * from user_log", "where colum = '10'")
```

```sql
select * from user_logwhere colum = '10'
```

くっついちゃっている。



#抽出したデータを結合

```r
setwd("csvを吐き出したファイルのpath")
lf <- list.files(pattern="csv") 

data <- data.frame()

  for(i in 1:length(lf)){
    add <- fread(lf[i])
    data <- rbind(data,add)
  }
```

これでdataに600万のデータが入る。
PCに十分なメモリ積んでないと処理がカタマルので注意。

機械学習するなら各csvをミニバッチに相当させるとよろしいのでは？


#python言語編

ある程度方針は説明したので以降は説明を割愛して書く。

```py
import pyodbc
import numpy as np
import pandas as pd

cnx = pyodbc.connect('DSN=データソース名; UID=IDを入れる; PWD=passを入れる')
cursor = cnx.cursor()

list_for = np.arange(1,60000,5000)
list_for=list_for.tolist()

for i in range(len(list_for)):    
    made_que = "SELECT * FROM user_log " + "LIMIT 5000 OFFSET " + str(list_for[i])
    cursor.execute(made_que) 
    tbl = cursor.fetchall()
    array_format = np.array(tbl)
    dataframe_format = pd.DataFrame(array_format)
    dataframe_format.to_csv('csv_data/' + str(i) + '.csv')

```



#以上

抽出してからが分析本番
WSL環境 (Windows10) でPowerlineフォントをインストールする

特に書くべきことでも無い気はするが、fishの環境構築で少し詰まったので。

## Before

Powerlineフォントを使っていないと (Source Code Pro JP) 、こんな感じに文字化けする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234143/d7e85db3-33ae-99ce-3e3c-288287212c9a.png)

## フォントを引っ張ってくる

[Powerlineのレポジトリ](https://github.com/powerline/fonts.git) から直接ソースコードをダウンロードしても良いけど、せっかくなのでコマンドで実行してみる。

```sh
$ git clone https://github.com/powerline/fonts.git
$ mv fonts /mnt/c/Users/mosh_shu/Downloads
```
これでダウンロードフォルダにディレクトリが移動する。  
しかし、このままだと後述の作業が非常に行いにくいので、

```sh
$ cd /mnt/c/Users/mosh_shu/Downloads/fonts
$ mv ./*/*.ttf ./*/*.otf ./
```

としてフォントファイルを一つのディレクトリにまとめる。  
これができたら、
1. エクスプローラーでダウンロードフォルダに移動
2. `.otf` `.ttf` ファイルを全選択
3. 右クリックで`インストール`を選択
とすれば一発でフォントがインストールされる。

あとはお好みのエミュレータ・ターミナルでフォントをSource Code Pro Powerlineなどに設定すれば、fishがこんなカッコいい見た目になる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234143/2a7a94c7-f225-97a5-061e-21c808f6c4b4.png)


## 参考
[Windows10で快適なfishシェル環境構築
](https://qiita.com/ysks/items/6c9d751d9a3b3b1b8020)
Android NDK r21 C++ コンパイルオプションのメモ

## 背景

* Gradle 経由で CMake で C++ ビルドしている.

arm64-v8a ターゲット + デフォルトのビルドタイプ(debug?) + `libc++_shared` で .so ビルドでは以下の構成になりました.

```
/home/syoyo/Android/Sdk/ndk-bundle/toolchains/llvm/prebuilt/linux-x86_64/bin/clang++ --target=aarch64-none-linux-android28 --gcc-toolchain=/home/syoyo/Android/Sdk/ndk-bundle/toolchains/llvm/prebuilt/linux-x86_64 --sysroot=/home/syoyo/Android/Sdk/ndk-bundle/toolchains/llvm/prebuilt/linux-x86_64/sysroot  -Dnative_submodule_EXPORTS  -g -DANDROID -fdata-sections -ffunction-sections -funwind-tables -fstack-protector-strong -no-canonical-prefixes -fno-addrsig -Wa,--noexecstack -Wformat -Werror=format-security   -fPIC -MD -MT CMakeFiles/native_submodule.dir/home/syoyo/work/flutter_native_vulkan_experiment/ios/Classes/native_submodule.cpp.o -MF CMakeFiles/native_submodule.dir/home/syoyo/work/flutter_native_vulkan_experiment/ios/Classes/native_submodule.cpp.o.d -o CMakeFiles/native_submodule.dir/home/syoyo/work/flutter_native_vulkan_experiment/ios/Classes/native_submodule.cpp.o -c /home/syoyo/work/flutter_native_vulkan_experiment/ios/Classes/native_submodule.cpp
```

## 参考情報

https://gcc.gnu.org/onlinedocs/gcc/Code-Gen-Options.html

## オプション

気になるオプションをリストアップしてみます.

### `-fdata-sections`, `-ffunction-sections`

コンパイル単位(.o)ごとに data section, function sections を作るっぽい

Query on -ffunction-section & -fdata-sections options of gcc
https://stackoverflow.com/questions/4274804/query-on-ffunction-section-fdata-sections-options-of-gcc


https://boringssl.googlesource.com/boringssl/+/2987/third_party/android-cmake/README.md

`ANDROID_FUNCTION_LEVEL_LINKING` cmake option で制御できる.

### `-fnunwind-tables`

stack trace 用っぽい

https://stackoverflow.com/questions/53102185/what-exactly-happens-when-compiling-with-funwind-tables

### `-fstack-protector-strong`

gcc 4.9 から. スタックのチェックをより強く行う?

https://outflux.net/blog/archives/2014/01/27/fstack-protector-strong/


### `-no-canonical-prefixes`

https://gcc.gnu.org/onlinedocs/gcc/Directory-Options.html

ヘッダのファイル探索パス用など.
シンボリックリンクを展開しない, ファイルパスを絶対パスにする.

### `-fno-addrsig`

clang 限定.

https://releases.llvm.org/7.0.0/tools/clang/docs/ReleaseNotes.html

>  By default, Clang emits an address-significance table into every ELF object file when using the integrated assemble

リンカ周りで安全に処理する仕組みっぽい.

https://static.googleusercontent.com/media/research.google.com/en//pubs/archive/36912.pdf


## その他一般

`android.toolchain.cmake` にいくつか記述があります.

https://android.googlesource.com/platform/ndk/+/master/build/cmake/android.toolchain.cmake

以前は `ANDROID_DISABLE_RELRO` とかありましたが, r20 or r21 からなくなっていますね.
Content-Security-Policy: default-src 'self' はインライン CSS が機能しない

# Content-Security-Policy: default-src 'self' はインライン CSS が機能しない

掲題の通りなので

```
Content-Security-Policy: default-src 'self' 'unsafe-inline'
```

にしましょう. ただし、unsafe-inline は使うべきではないそうです、やったね! (CSP 自体削除したい～)
iPhone Safariなのに、::-webkit-scrollbarが使えない...！

iPhoneのスクロールバーをカスタマイズする時、jsで実装するとスクロールの挙動が変わる。
デフォルトの挙動を残したかったので、::-webkit-scrollbarを使おうとしたが表示されなかった。

#2020/03/12 追記
スクロールバーの非表示はできました。
もしかして使えるようになった？

色やサイズなどのスタイル変更は未確認です。

#### 記述したコード
```
.container::-webkit-scrollbar {
  display: none;
  -webkit-appearance: none;
}
```

#### 環境
- iPhone XS
- - iOS 13.3.1


#参考URL
**・iOS13でCSSでスクロールバー拡張できる::-webkit-scrollbarが使えなくなったよう**
https://am-yu.net/2019/09/27/ios13-webkit-scrollbar/

**・慣性スクロール実装でスクロールバーは常に表示できない？**
https://fantastech.net/scroll-bar

**・iOS デフォで慣性スクロールできるようになった？**
https://qiita.com/cubkich/items/d192a70856e8bc63c7bc

#考察
1. iPhoneで慣性スクロールを指定すると、::-webkit-scrollbarが使えなくなる
2. iOS13から慣性スクロールがデフォルトになった
3. デフォで慣性スクロールなので::-webkit-scrollbarが使えなくなる

参考URLから察するに、これが原因と思われる。

#解決策（模索中）
「iOS13から慣性スクロールがデフォルトになった」のはAppleの公式発表から読み取れる。

>Added support for one-finger accelerated scrolling to all frames and overflow:scroll elements eliminating the need to set-webkit-overflow-scrolling: touch.

**Safari 13 Release Notes**
https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes#3314682

「-webkit-overflow-scrolling: touch」を記述しなくても慣性スクロールになるなら、
これを打ち消せば「::-webkit-scrollbar」が使えるのでは...??

「-webkit-overflow-scrolling: auto」と記述しましたが、うまくいきませんでした。
PWAの検証環境といえばGoogle Chrome, Safari, ...


## 今日は何の日?

現在: Wed Jan 15 18:55:40 JST 2020


---

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74939/00c5743c-cc68-f36b-d26c-ebe47252d0c9.png)


---

## Toolbar Hell 連想したら負け

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74939/f1596cd6-5658-c587-e5e2-090a06133a96.png)

---


## [Microsoft Edge Dev \(@MSEdgeDev\) / Twitter](https://twitter.com/MSEdgeDev/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74939/42255bbc-56f0-3838-9c41-0a7b38aeb8fd.png)



---


## [Microsoft Edge Insider](https://www.microsoftedgeinsider.com/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74939/47e05186-4ba4-96d4-f8de-30e445b60bfd.png)

---

## [Debug Progressive Web Apps \- Microsoft Edge Development \| Microsoft Docs](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/progressive-web-apps)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74939/285ead09-0cb0-d7c6-6ae0-99a47583d41b.png)

---

## 全裸待機推奨

- [Microsoft Edge Insider](https://www.microsoftedgeinsider.com/)
- [Microsoft Edge \(@MicrosoftEdge\) / Twitter](https://twitter.com/MicrosoftEdge)
- [Microsoft Edge Dev \(@MSEdgeDev\) / Twitter](https://twitter.com/MSEdgeDev)
vmstat

#vmstat
CPU負荷について調べたかったため調べていたらvmstatがあった。
vmstatを使う予定があったため調べたという経緯である。
ほぼ引用だがvmstatの出力内容を下記サイトを参考にテーブル化してまとめた。
[@IT](https://www.atmarkit.co.jp/ait/articles/1707/13/news015.html)

|vmstat|		|出力内容|
|---|:--:|---:|
|procs|	r 	|実行待ちプロセス数|
	|b 	|スリープ状態にあるプロセス数|
|memory |swpd 	|使用中の仮想メモリの量|
	|free 	|空きメモリの量|
	|buff 	|バッファとして使用しているメモリの量|
	|cache 	|キャッシュに使用している量|
	|inact 	|アクティブではないメモリの量| 
	|active |アクティブなメモリの量 |
swap 	|si 	|ディスクからスワップインしているメモリの量|
	|so 	|スワップアウトしている量|
io 	|bi 	|HDDのようなブロック型デバイスから受け取ったブロック数|
	|bo 	|ブロック型デバイスに送ったブロック数|
system 	|in 	|1秒当たりの割り込み回数|
	|cs 	|コンテクストスイッチの回数|
cpu 	|us 	|CPUの総時間に対してのユーザー時間|
	|sy 	|CPUの総時間に対してのシステム時間|
	|id 	|CPUの総時間に対してのアイドル時間|
	|wa 	|CPUの総時間に対してのIO待ち時間|
	|st 	|仮想マシンから盗まれた時間 |
使用例

```sample.sh
vmstat 1 2 > $VMSTAT_LOG
//一秒間に二回vmstatを実行して結果をログとして出力している。
```
自分ですぐ見れる用のメモ程度の内容である。
【Rails】id以外の値を主キーに設定して、他のテーブルから参照する

##やりたいこと
・usersテーブルの主キーに`user_no`を設定（idというフィールドは使わない）
・billsテーブルに`user_no`を設定する
・userモデルとbillモデルを1対多の関係で紐付ける

既存の(他の人が作った)システムと連動する必要があったので、、、

##実装
###user
```app/model/user.rb
class Customer < ApplicationRecord
  has_many :bills
```
```rb:usersテーブルのmigrationファイル
class CreateUsers < ActiveRecord::Migration[5.2]
  def change
    create_table :users, primary_key: :user_no, autoincrement: false do |t|
      t.string :name
      t.string :email
      t.timestamps
    end
  end
end
```

###bill
```app/model/bill.rb
class Bill < ApplicationRecord
  belongs_to :user
end
```
```rb:billsテーブルのmigrationファイル
class RegenerateBills < ActiveRecord::Migration[5.2]
  def change
    create_table :bills do |t|
      t.references :user #外部キー
      t.string :item_name
      t.integer :amount
      t.integer :total
      t.timestamps
    end
  end
end
```
【最短サンプル】ブラウザのJavaScriptで、bitFlyerのAPIにWebSocket接続してビットコイン最新価格を次々と受け取る

以下をindex.htmlとして保存して、ブラウザで開けばconsoleに現在価格が次々と出ます。

```html:index.html
<script>
	var sock = new WebSocket('wss://ws.lightstream.bitflyer.com/json-rpc');

    sock.addEventListener("open", e => {
        sock.send('{"method": "subscribe","params": {"channel": "lightning_ticker_FX_BTC_JPY" }}');
    });
    sock.addEventListener("message", e => {
        var json = JSON.parse(e.data).params.message;
        console.log(json);
    });
</script>
```

1.bitFlyerにWebSocket接続して
2.価格のチャンネルを購読(subscribe)すれば
3.次々と最新価格が送られて来て、そのたびにmessageイベントが発生する

という動きになります。

公開されているAPIですので、bitFlyer契約者でなくても試せます。

例ではビットコインFXの価格を取得しています。詳しくは以下で。
https://bf-lightning-api.readme.io/docs/realtime-ticker
Androidアプリ開発はプログラミング以外にも色々やる事ありますよ、という話

#この記事のターゲットとねらい
この記事は以下の方を対象としています。
・Androidアプリを作ってみたい、けど未経験
・何かしらのプログラミング経験はある

私自身も実際に企画～リリースまでやって分かったのですが、プログラミング以外にも色々とやることがありました。
その経験をもとに、企画～開発～リリース～マーケティングまでの流れを紹介します。

#企画しよう
##アイデア出し
日頃からアプリのアイデアを書き留めておきます。
日常の生活の中で「これは不便だな」「こんなことできたらいいな」という気づきをメモ書きしておきます。これがアプリの種となります。

メモする方法は何でもいいですが、私の場合はタスク管理ツール「Trello」を使っています。
カード型のToDo管理ツールなのですが、スマホとPC両方で使えるので、思いついたときにサクッと書き留めておけるので重宝しています。一緒に対応するメンバーが居れば、共有もできるのでそれもいいですよね。
[Trello](https://trello.com)

##どのアイデアをアプリ化するか決める
アイデアが溜まったら、どれを実現(アプリ化)するか決めます。基準は以下2つ。
- 作りたいもの
- 難易度が低いもの

特に初心者の方は、簡単に完成するものを考えた方が良いです。
どんなものでも、一度リリースまで到達することで、次につながります。

##目的を決める
何は無くともアプリの目的は決めておきます。

細かい仕様やレイアウトは作りながら考えればいいですが、目的はブレないようにしましょう。
とはいってもそんなに難しく考えなくてもいいです。アイデア出しの時の「こんなことできたらいいな」がほぼ目的となるはずです。

私のアプリの目的は**「タスクの習慣化」**としました。
**行動の習慣化が出来ない→アプリで日々のタスク管理を出来るようにして習慣化を後押ししよう！**　というのが発端です。

#開発しよう
## 開発環境

開発環境はこんな感じにしました。

|項目      |内容        | 
|:-----------------|:------------------|
|開発環境|Android Studio|
|言語|Kotlin|
|データベース|Realm|
|ソース管理|GitHub|


実際の開発環境の構築方法は以下ブログを参照してください。

[Androidアプリ開発環境を構築](https://techback.info/androidapp-dev-env/)

環境構築出来たら、後はガリガリとプログラミングしてアプリを作成します。

#リリースしよう
「プログラミング以外にも色々とやること」の主要な部分になります。
主にPlayストア用の素材を作っていきます。
ユーザー視点で考えると分かりますが、数十万あるアプリから選ばれるためには訴求力のあるストアページが必須です！
(しょぼい、怪しげ、よく分からないアプリはインストールしませんよね^^;)

##アプリ名を決める
アプリ名を決める必要があります。当たり前ですね。

分かり易い＆シンプルなアプリ名がベストだと思います。

Playストアを見てもらえば分かりますが、アプリ一覧で表示されるのはアプリ名とアイコンだけです。
つまりユーザーはこの2点でファーストタップを判断している訳で、マーケティング上も非常に重要な要素です。

私の場合、アプリの目的をストレートに表そうってことで、習慣化を英語にした「habiting!」にしました。

ちなみにアプリストアでの表示名は**「habiting! - 無理なく習慣化しよう」**。アプリ名＋キャッチコピーにしています。

これは他のアプリがどんな名づけしているかを調べたところ、結構キャッチコピーを付けてるんですね。
確かにこの方がストア内でアプリの内容が分かりやすくなりユーザーへの訴求効果もあるので、短くまとめたキャッチコピーを考えました。

##アイコンを作る
スマホやストアページで表示されるアプリアイコンを作成します。

アプリの機能をストレートに表すものを考えました。あまりひねったものだと何のアプリか分からなくなりますしね。

日々実行したタスクをチェックするアプリなので、カレンダーにチェックマークを付けたデザインにしました。
![habiting-icon-small.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/90989f14-8af9-3ce3-ae36-368cd9929cd7.png)

作成ツールはPowerPoint。内蔵のクリップアートを組合せ&編集して作成。

「アイコンなんて作ったことねーよ」って人は多いと思います。巷にはフリー素材やフリーの作成ツールがたくさんあるのでそれらを利用するのも手です。

私の場合は多少なりともオリジナリティを出したかったので、操作に慣れているPowerPointを使いました。

##説明文を作る
アプリの説明文を作成します。

説明文はユーザーに一番伝えたいことを冒頭にもっていきます。

具体的にはユーザーにどんなメリットがあるか？であり、潜在的に抱える課題を解決する事になると思います。

##説明用の画像を用意する
アプリのスクリーンショットや説明画像を用意します。

スクリーンショットは必須ですが、説明画像は任意です。

ただスクリーンショットだけではアプリの内容が伝わりにくいので、一画像で流れが分かるような説明画像を作成しました。
![habiting-header-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/ec8e26f5-2bf6-516f-a041-ad6663808846.png)


#宣伝しよう
リリースが終わったら宣伝しましょう。

SNS・ブログ・コミュニティ等、使えるものは何でも使って存在を世に知らしめます。プログラミングとは全く別のスキルを要するので未経験だとホント苦労します。

でもやらないとほぼ確実に**インストール数はゼロ**のままです。やればやっただけインストール数が増えます、それをご褒美に頑張りましょう。

##SNS
一番お手軽な宣伝方法です。
私はTwitterで宣伝してますが、Facebookとかでもいいと思います。
とにかくユーザーに知ってもらうことが大事です。
なければこれを機にアカウントを作ってしまいましょう。

##ブログ
ブログを持っていれば宣伝目的で投稿しましょう。
なければこれを機にブログを作って（略
いくらでも投稿内容を作り込めるのがSNSには無いメリットです。

##コミュニティ
いろんなコミュニティに参加して発信していくのも手です。
当記事もQiitaという開発コミュニティで発信することを目的の一つとしています。

# 作ったアプリ
ちなみに作ったアプリはこちらです。

[habiting! - 無理なく習慣化しよう](https://play.google.com/store/apps/details?id=com.techback.habiting)

当記事がはじめてのAndroidアプリ開発の一助になれば幸いです。
NavigationControllerのToolbarを特定のViewControllerでのみ有効にする

```swift:UIViewController
private lazy var uiButtonItems: [UIBarButtonItem] = {
  // 適当なUIBarButtonItemの配列
  return [...]
}()

// ビュー表示のタイミングでツールバーを表示する
override func viewWillAppear(_ animated: Bool) {
  self.toolbarItems = uiButtonItems
  self.navigationController?.setToolbarHidden(false, animated: false)
}

// ビュー非表示のタイミングで非表示に戻す
override func viewWillDisappear(_ animated: Bool) {
  self.navigationController?.setToolbarHidden(true, animated: false)
  super.viewWillDisappear(animated)    
}
```
Mergeしたプルリクを間違えてRevertしてしまった時の対応

##結論
revertをrevertすれば良い

##方法
ローカルのmasterブランチに移動

```terminal
$ git checkout master
```

リモートリポジトリの内容を反映

```terminal
$ git pull
```

ログを表示し、revertに振られたid?を確認

```terminal
$ git log --oneline
7d146881 Revert "掲示板を作成"
42cdd131 掲示板を作成
.
.
```

revertをrevertする

```terminal
$ git revert 7d146881
```

pushしてリモートに反映する

```terminal
$ git push
```

##参考
[技術ブログっぽいなにか](http://tmicha.hateblo.jp/entry/2017/04/26/140548)
辞書包括表記

```py:1
name = ['太郎', '次郎', '三郎']
job = ['勇者', '戦士', '魔法使い']
d= {}

for x, y in zip(name, job):
    d[x] = y

print(d)
```

```:1の実行結果
{'太郎': '勇者', '次郎': '戦士', '三郎': '魔法使い'}
```

これを辞書包括表記で書くと

```py:辞書包括表記
name = ['太郎', '次郎', '三郎']
job = ['勇者', '戦士', '魔法使い']

d = {x: y for x, y in zip(name, job)}
print(d)
```

```:辞書包括表記の実行結果
{'太郎': '勇者', '次郎': '戦士', '三郎': '魔法使い'}
```
Swift 配列から条件にあった要素のインデックス値を取得する



## String配列の一部を置換する例
- [firstIndex\(of:\) \- Repeated \| Apple Developer Documentation](https://developer.apple.com/documentation/swift/repeated/2996714-firstindex)と同じ。

```swift
var students = ["マリオ", "ピーチ", "ワルイージ", "ヨッシー"]
if let i = students.firstIndex(of: "ワルイージ") {
    students[i] = "ルイージ"
}
print(students)
// Prints "["マリオ", "ピーチ", "ルイージ", "ヨッシー"]"
```

## UIBarButtonItem配列で`tag==3`な要素のインデックスを取得する

```swift
let buttonA : UIBarButtonItem {
  let button = UIBarButtonItem(barButtonSystemItem: .play, target: self, action: #selector(onPlayPauseButton(_:)))
  button.tag = 1
  return button
}

let buttonB : UIBarButtonItem {
  let button = UIBarButtonItem(barButtonSystemItem: .pause, target: self, action: #selector(onPlayPauseButton(_:)))
  button.tag = 3
  return button
}

// buttonB のインデックス位置を取得したい
let buttons = [ buttonA, buttonB ]
if let i = buttons.firstIndex(where: {$0.tag == 3}) else{
  print(i)
  // 1
}
```
React Hooksでインスタンスメソッドを実装する

コンポーネントの特定の動作を外部から呼び出すための方法です。関数コンポーネントでも実装できました。もはやクラスではないのでインスタンスメソッドと呼ぶのは正確ではないかもしれませんが…。

propsの値変更で多くのことは実現できるので出番は限られてくると思いますが、入力フィールドにフォーカスする、CSSアニメーションを再生するといった場合には有効だと思います。クラスを使わずに実装する際の備忘録としてまとめました。

## メソッドの実装（子コンポーネント）
[useImperativeHandle](https://ja.reactjs.org/docs/hooks-reference.html#useimperativehandle)フックとforwardRefを組み合わせて実装します。この例の場合、`インスタンス.doSomething()`が呼ばれたタイミングでログが出力されます。

```jsx
import React, { useImperativeHandle, forwardRef } from 'react';

function MyComponent(props, ref) {
  useImperativeHandle(ref, () => ({
    doSomething: () => {
      console.log('Do something');
    }
  }));
  return <div>My Component</div>;
}

export default forwardRef(MyComponent);
```

## メソッドの呼び出し（親コンポーネント）
[useRef](https://ja.reactjs.org/docs/hooks-reference.html#useref)フックとref属性によって子コンポーネントのインスタンスが参照できるようになります。`ref.current.メソッド()`で先程のメソッドを呼び出します。

```jsx
import React, { useRef } from 'react';
import MyComponent from './MyComponent';

export default function App() {
  const myComponent = useRef(null);
  return (
    <div>
      <MyComponent ref={myComponent} />
      <button onClick={() => myComponent.current.doSomething()}>
        Click
      </button>
    </div>
  );
}
```
忘れ物管理システム

私は、VM構築、Raspberrypiでのはんだ付け、カメラの設置までの作業を行いました。本当は、カメラで撮影するところまで行きたかったのですが、カメラの設置の方法が分からなかったのと、プログラムを書いても実行できなかったりなどのトラブルが発生した為、カメラを設置して、ところまでしかできませんでした。次回は、プログラムコードを書いて、机の上に置いてある物体で、名前が書かれている物体検知に取り組んでいこうと思っています。VM構築を個人で行いましたが、プログラムコードで分からない所は助けてもらいながらも何とか書く事が出来ました。
野村哲平(東京工科大学)
vagrant環境でも、rails s でRailsを動かしたい

# 環境
Ubuntu 16.04.5 LTS
Windows10
Vagrant

# 手順

Mac環境でRailsを動かすには、これでいいのだが、

```cmd
rails s
```

Vagrant環境では、このように、いちいちコマンドが面倒くさい。

```cmd
rails s -b 192.168.33.10 -p 3000
```

履歴から検索して、**!**してもいいのだが、もっと、サクッと動かしたい。

```cmd
history | grep 33.10
```

**.bashrc**を**vi**で開いて、**Shift + g**で一番下に移動。

```cmd
vi ~/.bashrc
```


下記の関数を追加する

```script
function rails () {
  if [[ "$@" =~ ^s$ ]]; then
    command rails s -b 192.168.33.10 -p 3000
  else
    command rails "$@"
  fi
}
```

変更した、.bashrcを反映させます。

```cmb
source ~/.bashrc
```

**rails s**で、**rails s -b 192.168.33.10 -p 3000**が動いてくれました。

c'est fini :grin::clap:
Azure DevOpsでSecure Fileを扱うにあたっての注意

こんにちは。

以前 [Azure DevOpsで環境変数ファイルを扱う](https://qiita.com/Close_the_World/items/6db426d5b8ae60d92a09) という記事を書きましたがハマった点がありましたので補足します。

## Secure FileをDLして満足しない

以前の記事でSecure FileをDLする処理を書きましたがそれだけではどうやってもビルド対象に組み込まれませんでした。

### なぜか

DevOpsで動いているエージェントはファイルをDLすると `$(<ファイル名>.secureFilePath)` というパスに保存しに行きます。

ビルド対象のソースは `$(System.DefaultWorkingDirectory)` にDLされ、ビルドがされるためビルド成果物には含まれなくなります。

### どうすればいいか

#### `$(<ファイル名>.secureFilePath)` から動かす

envというファイル名なら以下の通りです。

```yaml:azure-pipelines.yml
- script: |
    mv $(env.secureFilePath) $(System.DefaultWorkingDirectory)
  displayName: Move .env to Working Directory
```

これでビルド時に対象ファイルを含めてビルドしてくれます。

それでは。
Makefileのリストを改行区切りで出力する方法

## 経緯

あるソフトのインタフェースに改行区切りでファイル一覧を渡す必要があったのですが、検索してもそのものズバリなものが出てこなかったので、備忘録として書いておきます。

## 単純に出力した場合

Makefileのリストを出力するとスペース区切りになります。

```{Makefile}
NAME_LIST = foo bar baz

.PHONY : output_list

output_list : 
	@echo $(NAME_LIST)
```

```
$ make output_list
foo bar baz
```

## 改行区切りで出力する場合

``$(foreach VAR, LIST, TEXT)``を使ったやり方がシンプルでよさそうです。

```
NAME_LIST = foo bar baz

.PHONY : output_list

output_list : 
	@$(foreach name, $(NAME_LIST), echo $(name);)
```

```
$ make output_list
foo
bar
baz
```

ちなみに``TEXT``の最後のセミコロンは、シェルにコマンドの区切りを教えるためのものなので、忘れるとうまく動きません。
変数が展開されたときには以下のようになります。

```
echo foo;  echo bar;  echo baz;
```
VueとTypeScript emitの書き方!

#emitとは
まず`emit`とはどんな時に使うのか。
<b>子コンポーネントが親コンポーネントにデータ</b>とか渡したい。
そんな時に<b>emit</b>を使います。

#親コンポーネントと子コンポーネント、どっちがどっち？
わかる人は飛ばしてください。
親コンポーネントと子コンポーネントがどっちかがわからなくなっている人！
（↑私も最初そうでした。。）

コンポーネントを呼んでいる方が親 (importする方)。
呼ばれている方が子供。

#emitをTypeScriptでかく！
大事なところは
<b>子供から渡す</b>ところと<b>親が受け取る</b>ところ！
`this.emit()`の部分と`@sample=""`のところを良くみてね。

##⬇︎子コンポーネント

```
<template>
<v-btn text v-on:click="buttonClick"></v-btn>
</template>
<script>
import { Component, Vue, Prop } from "vue-property-decorator";
@Component()
export default class StackedForm extends Vue {
private buttonClick(): void {
　　　　　　　　　// ⬇︎親の@マークの名前
    this.$emit("sample", "aaa");
　　　　　　　　　　　　　　　// ⬆︎引数指定できる！
  }
}
</script> 
```
##⬇︎親コンポーネント

```
　　　　　　　　　　　　　　　　　　　　　　　// ⬇︎子から受け取る
<stack-form :text-fields="textFields" @sample="emitChan"></stack-form>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import StackForm from "@/components/organisms/forms/StackedForm.vue";
@Component({
  components: {
    StackForm
  }
})
export default class Login extends Vue {
　　　　　　// ⬇︎子から引数でデータ受け取って実行とかできる！
  private emitChan(value: any): void {
    console.log(value);
  }
}
</script>
```

##簡単にいうと！
emitの<b>第１引数に@の名前</b>がきて<b>第2引数からはemitChanに引数で渡される</b>よ！
ちなみに第３引数以降も指定して渡しても大丈夫！

##はてなブログもやってます
はてなブログのVue系⬇︎ぜひご覧ください！
https://taitoajiki.hatenablog.com/archive/category/Vue
ときどき問題は Chrome だったりする

ここ 10 年ほどフロントエンドをやっている人ならこう言う場面に出くわしたことがあると思います。

> この新しい JS と CSS のフィーチャーはめっちゃ良さそう！使って見よう！
>
> やった！Chrome でテストして見たら思った通りに動いた！
>
> 他のブラウザーもテストしようと…はい、だめでした 😢

私はこうなったことがあるしこれを読んでるあなたもそうでしょうね。

実はと言うと、こう言うブラウザーの互換性の問題はフロントエンドでありきたりすぎて最近 Mozilla さんがやって来た[_Web DNA Report 2019_](https://insights.developer.mozilla.org/)で性別、国籍、フロントエンドをやっている経歴など関係なくダントツで一番の苦痛として選ばれました。

そして、最近で言えば大体 Chromium のチームは一番最初に新しい JS と CSS のフィーチャーを導入するけど、それを使いたいとサポートしていないブラウザーのために Polyfill を入れないといけないし Polyfill が存在しないともう使えなくなります。

しかし、この記事のタイトルから察したと思うがいつもそうとは限りません。

今回は Chrome もときどきおかしなことをする例を見せようと思います。

# 問題

私が今作っているプロジェクトでデザイナーは縦型のプログレスバーを入れようとしていました。

そのプログレスバーはいくつかのパーツに別れていてプログレスをそのパーツを通すグラディエントで見せる仕組みでした。

ザッと言えばこんなものです。

<img width="44" alt="縦型プログレスバー" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537488/a53e9567-0a31-f9c4-d1d2-40b2eca1bbd0.png">


最終的にデザイナーは別案で行きましたがこれを最初に見たときこれをどうにか画像に頼らず CSS だけで作れないかな〜って思いました。

調べた結果`background-size: cover`と `background-attachment: fixed`と`background-image: linear-gradient(params)`の組み合わせで私がやりたいことに大変近いことができると知りました。

これを知って浮かれていた、早速テストしようと思って[このコードでやってみました](https://glitch.com/~alangdm-chrome-problem)。

これを複数のブラウザーでテストしたら以下の通りになりました。

![テストの結果](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537488/fd05ee75-f773-9bfc-68f3-afc8f1930dee.png)

# ちょっと待って！？ 😵

見ての通り Mac OS 版の Chrome はちゃんと表示できるのにも関わらずなぜか Android 版の Chrome だけがこれをちゃんと表示できません。

これを不思議に思いました、Chrome はモバイルでも PC でも大体同じフィーチャーに対応しているのですから。

調べれば調べるほどおかしいと思いました。

[CanIUse](https://caniuse.com/#feat=background-attachment)によると Android 版の Chrome でこれはちゃんと表示できるはずです、しかも iOS 版の Safari では表示できないはずです。

でもテストの結果はこれとは全く違うことになりました。 😵

# 理由を見つけ出す

いろいろなことを調べている内にこの[StackOverflow の質問](https://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios)を見つけました。

ここでの答えによると`background-attachment: fixed`はしばらくは対応されていたがパフォーマンスに影響が出ると言う理由でモバイルでの対応を切りました。

これにはある程度納得できるけど、iOS 版の Safari や Android 版の Firefox や IE11 までも対応しているのに Android 版の Chrome は対応していないのはやはりおかしいと思います。

# 結論

結局のところ対応したいブラウザーで表示できて、画像や JS を使わない他のやり方を見つけられませんでした。

幸い必要がなくなったけど他に方法を知っているなら教えて欲しいところです。

伝えたいことは主に、Chromium は大変素晴らしいエンジンですし作っているチームは Web でできることを進化するためにすごくがんばっていると思いますが結局のところ他のブラウザーと同様フィーチャーに対応したいかどうかをわりと勝手に決めることはできます。

もちろん、IE や Chromium ではない Edge や Safari に比較すればものすごく稀な例ですがこれがいつでも起こり得るのでそれを忘れてはいけないと思います。

他にこれと似たものに出会ったことはあるならぜひコメントで教えてください、勉強になります。
SVGファイルをAutoCADで編集してPNGにするまで。

# SVG > DXF
ちょっとしたSVGファイルをAutoCADで編集して最終的にPNGにしたかったのですが、AutoCADでは直接SVGを読み込むことができませんでした。

検索すると沢山の変換サイトがありましたが、最初に試したサイトではDWGもDXFもAutoCADでは開くことができませんでした。

気を取り直して次のサイトで変換したら見事に開くことができました。
[SVGをDXFに変換する オンライン フリー - SVG DXF 変換](https://anyconv.com/ja/svg-to-dxf-konbata/)

# AutoCAD > PNG　(ダメでした)
AutoCADで編集した後はPNGで出力したかったのですが、次のページのように`PNGOUT`コマンドで書き出したPNG画像は、とても実用できるレベルではなく、サムネイルやアイコンにも使えないくらいの粗さでした。
[PNGOUT\[PNG 書き出し\] (コマンド) | AutoCAD 2016 | Autodesk Knowledge Network](https://knowledge.autodesk.com/ja/support/autocad/learn-explore/caas/CloudHelp/cloudhelp/2016/JPN/AutoCAD-Core/files/GUID-DC273B67-42AC-4A2A-9001-4825FF268E5D-htm.html)

# AutoCAD > PDF
印刷のクオリティーに関しては文句なしの実力があるので、ファイルへ書き出すのではなく印刷物として出力したらバッチリでした。

プリセットされてるPDFのプロッタ環境設定は5つもありましたが、僕は迷わずに３番目の`AutoCAD PDF (High Quality Print).pc3`を選びました。（他は試してません。）

<dl>
<dt>DWG to PDF.pc3</dt>
<dd>AutoCAD 2015 以前で使用されている汎用ドライバ。</dd><br>
<dt>AutoCAD PDF (General Documentation).pc3</dt>
<dd>ほとんどの用途に適した汎用ドライバ。</dd><br>
<dt>AutoCAD PDF (High Quality Print).pc3</dt>
<dd>用紙への印刷用に最適化された PDF ファイルを生成します。</dd><br>
<dt>AutoCAD PDF (Smallest File).pc3</dt>
<dd>可能な限り小さいファイル サイズの PDF を生成します。</dd><br>
<dt>AutoCAD PDF (Web and Mobile).pc3</dt>
<dd>モバイル デバイスや Web ブラウザのハイパーリンクをサポートする PDF ファイルを生成します。</dd>
</dl>

# PDF > PNG
これも検索したら沢山のサイトが見つかったのでとりあえず一番上のサイトで試したらうまくいきました。
[PDF PNG 変換 – オンラインでPDFをPNGに](https://pdf2png.com/ja/)

# 背景を透明にする。
PythonのPILを使って背景を透明にしました。

```python
# インポートはこれだけ
from PIL import Image

# 画像をオープン
im = Image.open("hoge.png")

# 8bit グレイスケールモードに変換する。
L = im.convert("L")

# Lチャンネルの白黒を反転して、
A = L.point(lambda x: 255 if x < 128 else 0)

# アルファチャンネルAとして合体する。
im = Image.merge("LA",(L,A))

# 画像を保存する。
im.save("hoge2.png")                         
```
以上、SVGファイルを編集してPNGにするまでのメモでした。

SVGファイルをPNGにするのはPythonだけでできるのですが、SVGを編集したうえでとなるとそれなりの環境が必要になると思います。

今回は、SSDの故障が原因でOSの再構築の為、会社や手元にあるものでの作業になりましたが、変換サイトのおかげでとても助かりました。
[SQL] 基本操作

以前、AndroidでMySQLと接続し、DBを操作するプログラムを記事にした。
https://qiita.com/QiitaD/items/d605b07e849e3bec0722

今回はSQLの基本操作について備忘録として残しておく。


##データベース作成
~~~
create database DB名;
~~~

##テーブル作成
~~~
create table テーブル名;
~~~

##データ取得
~~~
select * from テーブル名
~~~

##データ追加
~~~
insert into テーブル名 ( 項目1, 項目2 … ) values ( 値1, 値2 …);
~~~

##データ削除
~~~
delete from テーブル名 where 項目 ＝ 値;
~~~

##参考URL
https://www.dbonline.jp/mysql/
[Android] DBデータ取得・追加（MySQL）


##前回
前回の記事https://qiita.com/QiitaD/items/d605b07e849e3bec0722
で発生していたエラーだが、警告であるらしい。DBとの接続に成功していても出るようだ。

##接続の解決法
MySQLにAndroidからアクセスする権限を追加することでうまくいった。

~~~
//Androidからアクセスするユーザ名とパスワード、AndroidのIPアドレスを指定。
create user 'username'@'localhost' identified by 'password';

//アクセス権限を追加
grant all privileges on *.* to 'username'@'localhost' with grant option;

flush privileges;
~~~





以下の記事が参考になる。
・ユーザ権限の追加
https://code.i-harness.com/ja-jp/q/17cd93
https://proengineer.internous.co.jp/content/columnfeature/6638

##注意点
・Androidからアクセスするとき、ユーザ名をrootにしているとアクセスできない
・MySQLとAndroidは異なるアドレスなので、ループバックアドレスだとうまくいかない。（よくあるっぽい）

これらに気づかずかなり時間を取られたので、気を付けて頂きたい。

##感想
解決は思ったより簡単だったが、かなり時間を取られた。記事を読まれた方々は気を付けて頂きたい。
[Android]現在日時を取得する

##Android端末の現在日時を取得するコード

~~~java
 //現在日時をyyyy/MM/dd HH:mm:ss形式で取得する

public static String getDate(){

    //取得する日時のフォーマットを指定
    final DateFormat df = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");

    //時刻をミリ秒で取得
    final Date date = new Date(System.currentTimeMillis());

    //日時を指定したフォーマットで取得
    return df.format(date);
}
~~~

##感想
めちゃくちゃ簡単なので、ぜひ試していただきたい。

##参考URL
・Androidでの日時取得
https://qiita.com/zuccyi/items/d9c185588a5628837137
python configparser によるパラメータ設定


pythonの標準ライブラリーであるconfigparserを用いたパラメータ設定方法と、設定パラメータの使用方法に関して記載しています。

git : [k-washi](https://github.com/k-washi/stereophonic-Sound-System/blob/master/utils/config.py)

# Iniファイル

configparserで読み込む設定を記載するファイルです。
例としては、以下のように記載できます。
コメントは#を使用して書くことができます。

```ini:config.ini
[Microphone]
#マイクのID
ID = 0
SamplingRate = 44100

[Output]
#出力デバイスのID
ID = 1
#Record 1: SavePathに出力, 0:IDのデバイスに出力し続ける。
Record = 1
#recording time [sec] >= 1
RecordTime = 15
```

# 設定ファイルの読み込み

config.iniファイル, 設定値を読み込む。
loggerに関しては、[Pythonのloggingモジュールの使い方](https://qiita.com/kwashi/items/576c5b287dfc08d404f3)を参考にしてください。

1. 設定ファイルがあるならconfig_ini.read()で設定ファイルを読み込む。
2. config_ini["設定分類"]["設定値名"]で設定値を読み込む.

読み込んだ設定値は、stringなので、数字はint, floatなどで変換する。
また、0, 1で設定したYes/Noの値は、boolとすることで、True, Falseに変換できる。

```python:utils/config.py
import os
import sys

sys.path.append(os.path.join(os.path.dirname(__file__), '..'))

# ------------

from utils.logConf import logging
logger = logging.getLogger(__name__)

# -------------

import configparser
CONFIG_FILE_PATH = './config.ini'


class configInit():
  def __init__(self):
    config_ini = configparser.ConfigParser()
    if not os.path.exists(CONFIG_FILE_PATH):
      logger.error('設定ファイルがありません')
      exit(-1)
    config_ini.read(CONFIG_FILE_PATH, encoding='utf-8')
    logging.info('----設定開始----')
    try:
      self.MicID = int(config_ini['Microphone']['ID'])
      self.SamplingRate = int(config_ini['Microphone']['SamplingRate'])

      self.OutpuID = int(config_ini['Output']['ID'])
      self.Record = bool(int(config_ini['Output']['Record']))
      self.RecordTime = float(config_ini['Output']['RecordTime'])

    except Exception as e:
      logger.critical("config error {0}".format(e))

```

# 設定値を使用

1. 設定読み込みファイルの設定クラスconfigInitをimportする。
2. Conf = configInit() でインスタンス化し、設定ファイルを読み込む。
3. Conf.設定値名　で使用可能

```python
import os
import sys

sys.path.append(os.path.join(os.path.dirname(__file__), '..'))

# ------------

from utils.config import configInit
Conf = configInit()

from utils.logConf import logging
logger = logging.getLogger(__name__)
# -----------

logger.info(Conf.MicID)
#2020-01-15 17:12:03,929 [config.py:28] INFO     ----設定開始----
#2020-01-15 17:12:03,930 [confTest.py:15] INFO     0                 #MicID

```

# まとめ

以上、pythonの設定ファイルに関してでした。
システムを作るとき、後で外部設定をさせようとしたときに修正が少なくなるため、上記のように簡単にでも設定しておくことをおすすめします。
stage.mouseXの注意点

#概要
createJSでのcanvasを使ったゲームを作成する際に

```js

canvas = document.getElementById("canvas");
// stage作成
stage = new createjs.Stage(canvas);
createjs.Ticker.addEventListener("tick", stage);
```
上記のようにステージを作成することが一般的
このような状況で画面上のタップした座標を取得したい場合に

```js

touchPosX = stage.mouseX / stage.scaleX;
touchPosY = stage.mouseY / stage.scaleY;
```
上記コードで取得できる。
PC上では問題ないが、
実機対応のためにタッチ操作を有効にした状態で

```js

// タッチ操作を有効にする
createjs.Touch.enable(stage);
```
画面に配置したcanvasの上下左右の領域の端をタップすると
stage.mouseX, stage.mouseYの値が最後にタップした座標に固定されてしまう

#対策
タップした座標を取る際にeventから座標を取得するようにする

```js

var button;
button.addEventListener("mousedown", function(event) {
    var tapPointX = event.stageX;
});
```

#原因
どうやら画面に配置したcanvasの上下左右の領域の端を押したときに、
イベントが二つ飛んでくるらしい(touchStartとmousedown)
イベントの種類ごとに_primaryPointerIDが設定される

|  |mouseDown  |touchStart  |
|---|---|---|
|_primaryPointerID|-1|0|

canvas内のオブジェクトをタップしているだけでは

stageの_primaryPointerIDが0であるが画面に配置したcanvasの上下左右の領域の端を押すと、-1になってしまう

タップした点に関する情報はstage._pointerDataにprimaryPointerIDごとに保存されているのだが、一度_primaryPointerIDを-1にしてしまうと、そのときのx,y座が_pointerData[-1]に保存され、stage.mouseXはその値を参照してしまう

#参考サイト
https://createjs.com/docs/easeljs/files/easeljs_display_Stage.js.html
(200行目、60行目、)

・https://qiita.com/calmbooks/items/6df5e01a7a29417e55c6
(タッチデバイスにて、mousedownが2回発火)
MySQL 週毎にまとめる方法


# MySQL

```sql
SELECT count(id),
       `date`,
       SUBDATE(`date`, WEEKDAY(`date`)) AS beginning
FROM test
GROUP BY beginning;
```

#解説
## WEEKDAY(date)
```sql

mysql> SELECT WEEKDAY('2008-02-03 22:23:00');
        -> 6
mysql> SELECT WEEKDAY('2007-11-06');
        -> 1
```
dateに対応する曜日インデックス(0 = Monday、1 = Tuesday、…6 = Sunday)を返します。

## SUBDATE(expr,days)

```sql
-- 加算
mysql> SELECT SUBDATE('2008-01-02', INTERVAL 31 DAY);
        -> '2007-12-02'

-- 減算
mysql> SELECT SUBDATE('2008-01-02 12:00:00', 31);
        -> '2007-12-02 12:00:00'
```
第1引数から第2引数分を、足したり引いたりします。
第2引数をINTERVAL形式で書くと加算し、数字だけ指定すると減算されます。

今回の場合は、`WEEKDAY()` の戻り値を渡しているので、dateから曜日インデックス分を引いています。

```
WEEKDAY('2020-01-13') -> 0 -> SUBDATE('2020-01-15', 0) -> '2020-01-13'
WEEKDAY('2020-01-16') -> 3 -> SUBDATE('2020-01-15', 3) -> '2020-01-13'
WEEKDAY('2020-01-19') -> 6 -> SUBDATE('2020-01-19', 6) -> '2020-01-13'
```

2020-01-13は月曜日のため、これでそれぞれの週の頭の日付けがわかります。
あとは`GROUP BY`で同じ日付をまとめればおしまいです。

参照：http://sqlfiddle.com/#!9/389f85/2
暗号化と証明書の必要性

暗号化通信って難しいという話。

# 共通鍵暗号
紀元前から存在するとされる古典的な暗号方式。
暗号化と復号化を同じ鍵（共通鍵）で行う。

* 共通鍵の受け渡しの通信自体が盗聴されていたら、その後の通信内容も全部復号化されてしまう
    * 共通鍵を安全に送るためには暗号化しなくてはいけないが、その暗号化のための鍵を暗号化するためには・・・（無限ループ）
* N人とそれぞれ暗号化通信するのに$ _N C _2 $個の鍵が必要。 30人なら435個の別々の鍵が必要。

# 公開鍵暗号
暗号化する鍵と復号化する鍵が別になっている。
復号化するときは暗号化に使った鍵とペアの鍵でないと復号化できない。

公開鍵で暗号化されたデータは、対になる秘密鍵でしか復号化できない。

## 公開鍵暗号のみを使った通信
1. サーバは公開鍵と秘密鍵のペアを作る。
2. クライアントは公開鍵と秘密鍵のペアを作る。
3. サーバとクライアントでそれぞれの公開鍵を交換する。
4. サーバはクライアントの公開鍵で、クライアントはサーバの公開鍵でそれぞれ暗号化して通信する。

* 秘密鍵のやり取りはしない。
* 公開鍵が盗まれても通信内容自体は解読できない
* 公開鍵は公開しても問題ないので、通信相手全員に同じ公開鍵をわたしてもOK
* N人とそれぞれ暗号化通信するのに必要な鍵の数は$ 2N $個なので共通鍵暗号より少ない
* 公開鍵暗号における、暗号化処理と復号化処理は共通鍵暗号に比べてコストが高い！！！

## 公開鍵と共通鍵を使った暗号化通信
1. サーバは公開鍵と秘密鍵のペアを作る。
2. クライアントに公開鍵を渡す。
3. クライアントは共通鍵を作る。
4. 共通鍵を公開鍵で暗号化してサーバに送る。
5. サーバは秘密鍵で共通鍵を復号化して入手する。
6. 共通鍵をつかって暗号化通信する。

暗号化、復号化のコストが高い公開鍵暗号は、共通鍵の受渡しのためだけに使う。
あとの通信は共通鍵だけなので楽ちん。
共通鍵は通信のセッションが終わったら破棄するので長期管理も不要。

## 公開鍵暗号による通信の問題点
盗聴者に通信を中継されてしまうと、暗号化しているつもりでも内容がバレてしまう。

1. サーバは公開鍵と秘密鍵のペアを作る。
2. クライアントに公開鍵を渡す途中で、中継者が公開鍵を入手する。
3. 中継者は公開鍵と秘密鍵のペアを作る。
4. 中継者はクライアントに、中継者の公開鍵をわたす。
5. クライアントは中継者の公開鍵で暗号化して、サーバにデータを送信してしまう。
6. 中継者は自分の秘密鍵でデータを復号化して、盗聴する。
7. 復号化したデータをサーバの公開鍵で暗号化してサーバに送信する。
8. サーバは自分の秘密鍵でデータを復号化する。

上記の手順では、クライアントは公開鍵が偽物だと気づけないし、サーバも自分の秘密鍵で復号化できるので中継者に気づくことができない。

そこで、`電子署名`の仕組みが必要になってきます。

# 電子署名
公開鍵暗号の仕組みを使ってデータの偽装を検知できる仕組み。

送信側は`データのハッシュ値`と`秘密鍵`で計算した値を`署名`として、データとセットにして送る。
受信側は`データのハッシュ値`と`公開鍵`と`署名`を使って計算することで、データが送信前と変わっていないことを検証することができる。

基本的には、ハッシュ値を秘密鍵で暗号化したもの（署名）を公開鍵で復号化して、データのハッシュ値と比較することで検証が可能と説明されることが多い。（[Wikipedia](https://ja.wikipedia.org/wiki/%E9%9B%BB%E5%AD%90%E7%BD%B2%E5%90%8D)にも図説が乗っている）
> ここで「秘密鍵って復号化する側だったのでは？」と思った人はたぶん正しい。
> [電子署名≠秘密鍵で暗号化](http://www.vicus-oryzae.com/gorua/sign.html)を読んで見てほしい。

# 証明書
公開鍵に自分の身元情報などを加えたものに、第三者による電子署名を付けたものです。
これを使えば公開鍵が偽装されることがなくなる。やったね。
とはなりません。。。。

電子署名を検証するためには受信側に署名につかわれた秘密鍵と対になる公開鍵（証明書）が必要でした。
しかし、その証明書を検証するためには、署名者の証明書が必要で、さらにその署名者の証明書を検証するために・・・
証明書の検証に終わりがなくなってしまいます。

# ルート認証局
ちなみに、公開鍵に電子署名をつけて証明書にする役割をするものを認証局（CA）と呼びます。

じつは、ブラウザ・OSには最初から特定の認証局の公開鍵（証明書）がインストールされており、
証明書の検証ループがインストールされている認証局の署名までたどり着けば、検証作業は終わりを迎えます。

この認証局はルートCAと呼ばれています。
ルートCAの証明書は誰が署名しているのかといえば、ルートCA自身です。
自身の正しさを持って、自身の正しさを証明するというかっこいいヤツです。

あとの説明はめんどくさいので外部に投げます。
http://e-words.jp/w/ルートCA.html

これで、ようやく安心して暗号化通信ができるようになりました。
めでたしめでたし

# クライアント認証
証明書よって、クライアントの正当性を証明することで認証とする仕組みです。

1. クライアント証明書用に、秘密鍵と公開鍵のペアを作る。
2. 認証局にお願いして、公開鍵に署名をつけてもらい、証明書を作る。
3. クライアントに証明書と秘密鍵のペアをインストールする。
4. サーバにはクライアント証明書に署名した認証局の証明書を設定しておく。
5. サーバは認証が必要なアクセスがあると、クライアントに証明書を要求する。
6. クライアントが提示した証明書の署名が検証OKであれば、認証局が認めたクライアントで有ることが証明できるので、信頼して認証する。

## 疑問
私自身、良くわかってないことが１つありまして。
クライアント認証のフローにおいて、クライアントの秘密鍵はなくしてしまっても機能するように思えてしまいます。

おそらく、サーバがクライアント証明書から取り出した公開鍵で共通鍵を暗号化して、クライアントに渡すので、
クライアント側に秘密鍵がないと共通鍵を復号化できない仕組みになっているのではと推測してますが、
わかる人がいたら教えてほしいです。
[Mac]画像をepsに変換

# はじめに
備忘録です．

# 手順
1)~~パワポで好きなように図を作る~~画像を開く
~~2)1つの図に対して1枚スライドを対応させる(次のpsファイルとして書き出す際に，スライドごとにpsファイルが作成される)~~
3)psファイルとして書き出す．
~~[powepoint メニュー] -> [ファイル] -> [プリント] -> [PDF] -> [PostScriptとして保存]~~
[メニュー] -> [ファイル] -> [プリント] -> [PDF] -> [PostScriptとして保存]
4)ps2epsコマンドでpsファイルからepsへ変換
`$ps2eps --rotate=+ [ファイル名].ps`
回転方向が逆だったら..
`$ps2eps --rotate=- [ファイル名].ps`
これで解消しました．

# でもわざわざコマンド打つの面倒
変換する前のファイル名をあらかじめ決め打ちで決めて，
commandファイルを作って，それ実行したら変換してくれるようなもの作った方が便利かも．

    #!/bin/sh
    MY_DIRNAME=$(dirname $0)
    cd $MY_DIRNAME
    ps2eps --rotate=+ [ファイル名].ps
    #
こんなかんじでcommandファイルを作成しました．

# 参考サイト
[1][powerpointで作成した図をeps(ベクター形式)で保存する方法 (Mac版)](http://www.sat0yu.com/entry/2014/06/24/141740)
Gatsby.jsでサイトマップを作成する

# はじめに

Gatsby.jsでサイトマップを作成し、Search Consoleに登録する方法をまとめます。

Gatsby.jsはプラグインが豊富にありますので、そちらを使用します。


# プラグインのインストール

gatsby-plugin-sitemapという公式推奨？のプラグインがあります。
[Gatsbyの公式ドキュメントへ](https://www.gatsbyjs.org/docs/creating-a-sitemap/)

npmもしくはyarnでインストールします。

```
npm install --save gatsby-plugin-sitemap

yarn add gatsby-plugin-sitemap
```

# gatsby-config.jsに追加

Gatsbyでは、基本的にプラグインを追加するときにはgatsby-config.jsに記述します。

```js
// In your gatsby-config.js
siteMetadata: {
  siteUrl: `https://www.example.com`,
},
plugins: [`gatsby-plugin-sitemap`]
```


# ビルドすると起動する

ビルド時に自動で起動し、publicフォルダ内にサイトマップファイルを生成してくれます。
試しにビルド&サーブしてみましょう。

```
gatsby build && serve
```

#Google Search Consoleに送信

サイトマップが生成されたら、サーチコンソールに送信しましょう。

サイトマップはpublicフォルダ直下に生成されますので、`サイトURL+sitemap.xml`でアクセスすることができます。

```
https://www.example.com/sitemap.xml
```


![スクリーンショット 2020-01-15 17.07.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452235/5988f7cb-9484-7983-fd32-652ac671cfe6.png)


サーチコンソールにURLを打ち込んで送信ボタンをクリックします。


# まとめ

簡単にサイトマップを自動で生成することができました。
Unityゲーム制作  ~FlashLightの紹介~

###---ゲーム内で使用するライトのON/OFFのコード---
>Zキーを押している間だけライトを消すシステムを今回はobjectを消すという手法で行いました。

まずUnityのHierarchyに、ライト本体を入れなくてはいけません


Asset storeからライト本体を探してきて（Flashlight）ダウンロードします。
https://assetstore.unity.com/packages/3d/props/electronics/flashlight-18972
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553134/0bc41524-8e6f-6644-195e-1ad7fc763379.png)


そのあと、本体の中に光の部分（自分の場合　UnityEffectのSpot Light）を使って作っておきます。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553134/915130e2-bbea-ada9-c396-5ed7141d6c35.png)

こんな感じ
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553134/109b7459-5fac-c868-70bb-e5189dcdf3b1.png)


次にこのコードを打ち込んで保存します。

```ruby:GameManager
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class GameManager : MonoBehaviour
{

    public GameObject Sphere;
    // Use this for initialization
    void Start()
    {

    }

    // Update is called once per frame
    void Update()
    {

        if (Input.GetKeyDown(KeyCode.Z))
        {

            Sphere.SetActive(true);

        }

        if (Input.GetKeyUp(KeyCode.Z))
        {

            Sphere.SetActive(false);

        }

    }
}
```

その後、HierarchyでCreate→Create Emptyを作成し名前をGameManagerとし、先ほど作ったScriptをアタッチしてください。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553134/922bc198-7e92-4f66-30ee-5f26fc1bee60.png)
そして、ライトの光の部分（自分の場合Spot Light）のobjectをSphereにドラック＆ドロップするだけで完成します。


カメラの位置を調整・ゲームをスタートし、Zキーを押すとライトの光がつくと思います、離すと消えます。

以上ライトのON/OFFのスクリプト導入でした。*お疲れさまです！！('ω')ノ*
マイコンとPCのシリアル通信

# はじめに
マイコンとPCのシリアル通信におけるTeraTermの使い方とログ取り（手動）について記述する．

# マイコンとの接続
### ポート確認
windowボタンを右クリック＞デバイスマネージャー＞ポートでポート番号を確認する．上手く接続していない場合は，再スキャンする．

### 設定
1. ファイル＞新しい接続でシリアルを選択，確認したポート番号を選択する．
2. 設定＞端末で改行や文字コードを指定する．
3. 設定＞シリアルポートで伝送速度とデータ形式を指定する．ここの設定がマイコン側で設定したものと異なると不具合がおこる．
4. 繰り返し使うならば，設定＞設定の保存で設定した内容を保存する．

### 表示
[こちら](http://shuzo-kino.hateblo.jp/entry/20111027/1319682490
)を参考にデバックモードをonにする

```:"TERATERM.INI"
; Display all characters (debug mode)
Debug=on
```

### その他
編集＞～クリア（Alt+E+B または Alt+E+S） で画面クリア．

「Shift+Esc」を押すと表示モードが切り替わる．

# ログ取り（手動）
1. ファイル＞ログでデータの保存先を指定する．拡張子は.txtや.log等．
2. 小さいwindow画面がでる．この画面が出ている間，記載されているファイル（指定した保存先）に保存される．
2. マイコンからPCへデータを送る．
3. キャンセルを選択して，ログ取り終了．

# 参考文献
- 16進数表示 http://shuzo-kino.hateblo.jp/entry/20111027/1319682490
mastaring ethereum メモ

# 使用端末
MacBook Pro (16-inch, 2019)
プロセッサ　2.3 GHz 8コアIntel Core i9
メモリ 16 GB 2667 MHz DDR4

# golang install

``` 
brew install go 
```
go version go1.13.6 darwin/amd64

# Geth install

``` 
brew tap ethereum/ethereum
brew install ethereum 
```
Gethバージョン確認

~~~
geth version
~~~

#　イーサリアムブロックチェーンへの初回同期

全てのトランザクションのデータ(フルノード)を実行するのに必要な最低要件と推奨仕様は以下である。
※ デフォルト設定の場合

### 最低要件
- CPU: 2コア以上
- 空き容量: 少なくとも80GB以上
- RAM: SSDの場合は4GB
- インターネット回線: 8Mbpsのダウンロードスピード

### 推奨仕様
- 高速CPU: 4コア以上
- RAM: 16GB以上
- 高速SSD: 少なくとも500GBの空き容量
- インターネット回線: 25Mbps以上のダウンロードスピード


イーサリアムブロックチェーンをフルノード同期するのは時間がかかるため後回しに

# ４章 暗号化
## 秘密鍵をどのように保存するか

イーサリアムには、外部所有アカウント(EOA)とコントラクトアカウントの二つのアカウントが存在。
EOAでは、秘密鍵、イーサリアムアドレス、デジタル署名によってそのアカウントに紐付けられたイーサの所有権が確立される。
秘密鍵の生成プロセスはオフラインで生成されるため、真にランダムな数字であることが必要である。

## 公開鍵暗号
public key, private key
情報を保護するためにある固有の鍵が使用される。
これらは、ある方法に計算するのは簡単だが、逆方向に計算するのは難しいという特徴を持った関数によって生成される。
数学的な法則によって守られた機密情報や偽造不可能なデジタル署名などの暗号が作成できる。

### トラップドア関数
関数を逆算する近道として利用できる秘密情報の一部が提示されない限り、関数の逆を辿ることが難しい。
トラップドアとは、暗号開発者が独自に、暗号が簡単に解読できる仕掛けを講ずることである。
ゲームソフトで言うところの「隠しコマンド」に相当する。

### 楕円曲線暗号
一方向に計算したものを逆算できないように楕円曲線を利用した暗号。
現代のコンピュータシステムで広く、利用されており、イーサリアム及び他の暗号通貨などの秘密鍵やデジタル署名の基礎となっている。

楕円曲線暗号によって誰でもデジタル署名がトランザクション内容とアクセスが要求されているイーサリアムアドレスに一致しているかを確認し、トランザクションが有効であるものかを検証することができる。
秘密鍵があれば公開鍵を計算することは容易だが、逆は不可能。

イーサリアムは、ビットコインと同じsecp256k1という名前で定義された固有の楕円曲線と定数のセットを使用している。
Unityでボタンを使ってシーンをロードする際のプログラム

いちいちシーンロードするプログラムを書かなくても簡単にロードしたいシーンに移動できるプログラムを自分なりに考えてみました。
ぜひ、参考にしてみてください。

```C#
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement; //シーン移動するために必要
//using UnityEngine.UI;              //UIを使う際に必要

public class LoadSceneButton : MonoBehaviour
{
    //[SerializeField]を使うことでpraivateの状態で
    //publicと同じようにunityのInspectorで入力できる
    [SerializeField] string loadsceneName = "";

    public void LoadSceneButtonDown()
    {
        //Inspectorで入力された名前が(loadsceneName)に入り
        //そのシーンをロードする
        SceneManager.LoadScene(loadsceneName);
    }
}
```

上記のプログラムをボタンにアタッチしprefab化するとステージセレクトボタンを作る際に楽になると思います。

自分自身まだプログラムの経験が浅いためこのプログラムで大丈夫かが不安ですが役立つことができたら幸いです。