OmniAICreator/Qiita-1.07M huggingface dataset:
プロダクトを作ろうとしたらfirebaseに行き着いた(備忘録)

###はじめに
作りたいプロダクトがあり、動画を複数の端末で一気に操作する方法を探していました。
何の実装が適切か調べたりアドバイスをいただいて、firebaseにたどり着きました。
初心者の方で、作りたいイメージは決まっているが何から手をつければわからないという方の
参考になれば幸いです。

####作りたい仕様
スマホAの端末を操作して、スマホB～複数の端末で動画を自動再生する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/417361/293ff789-33cd-c877-640c-89f172b11a87.png)

###仕様を決めるまで
ユーザーの操作性を考えて当初はLINE BOTで実装しようと考えておりました。
LINEのLIFFで v2がリリースされて外部ブラウザで対応できると聞き、
複数の端末へ動画のURLを送る方法を調べていました。

(参考記事)
https://engineering.linecorp.com/ja/blog/liff-v2/
https://dev.classmethod.jp/cloud/youtube-on-liff/

どうやらLIFFの外部ブラウザはLINEのアプリケーション内ではないという意味で
実装したかった「別端末でURLを開く」ではなさそうだったため見送りました。

次に遠隔でスマホを動画で同時再生するための機能を探して
下記の記事を参考にfirebaseの表示連携を試してみます。

▼ProtoOut Studioブログ
Firebase Realtime DatabaseをNode.jsから動かしてみよう
https://protoout.studio/posts/firebase-realtime-database-node-js


```
ref.on("value", function(snapshot) {
    console.log("value Changed!!!");
    console.log(snapshot.val());
},
```

##手順

####サービス アカウント用の秘密鍵ファイルを生成する

1.Firebase コンソールで、[設定] > [サービス アカウント] を開く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/417361/00335fc6-3065-6a89-23ee-7b68c40710f9.png)




2.画面下にある[新しい秘密鍵の生成] をクリックし、[キーを生成] をクリックして確定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/417361/e1078013-14fc-27e8-a40c-e83179dae848.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/417361/9bbe4cfa-e3a3-8b15-42c6-ad240010f1d6.png)

このように、秘密鍵を生成した情報は公開しないように表示されます。

「キーを生成」ボタンを押下後、「fir-XXXXXX(プロジェクト名)-firebase-adminsdk-eog1c-1ddd0dc473.json」というjsonファイルを配置する。

3.キーを含む JSON ファイルを保管する。

上記の記事でfirebaseの設定や使い方を学び、やりたいことができそうだと思えたため
こちらで実装する方向で決まりました。

###次のアクション
・firebaseの画像差し替えサンプルを元に動画のURLを変更できるようにする。

(参考)
https://i-doctor.sakura.ne.jp/web/doku.php?id=11.vue.js%E3%81%A8firebase%E3%81%A7%E7%94%BB%E5%83%8F%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%80%E3%83%BC:index.html

・操作端末の画面を作る
(スマホだと特に幅の調整が大変なので、流用できるフォーマットをできるだけ使用する)

Materialize
https://materializecss.com/

###終わりに
初心者はイメージを形にするときにまず、何の機能を使うかという点で迷いやすいかと思います。
具体的な利用イメージ(URL通知だけでよいのか等)を図にしたりすることによって
得られる情報の精度が上がっていくと感じました。

また進捗あれば記事にしたいと思います。
学習のまとめnote

display: flex;でできることは、縦並びのボックスを横並びに出来る。

calc(culculation)を用いることで計算式を作成出来る。
例、width: calc(100%-300px);

olとは、order(順番)
ulとは、unordered(順不同)
dlとは、definition(定義)
liとは、list(項目)
「チラ裏ですよ」iOS + TensorFlow Lite model + ML Kit for Firebaseが落ちる

# 出力エラー

```bash
Total size of data for output tensor at index 0 is 192, but expected 124 bytes
```

# 環境

- Xcode 11.3 (11C29)
- Firebase/MLModelInterpreter (6.14.0)

# 対策

interpreterの出力数とラベルの数を一致させるだけ
Linuxサーバ(EC2インスタンス)からWindowsサーバへ任意のコマンドを送る

## まえがき

ひょんなことから、Linux(EC2インスタンス)からWindowsServerへbatを実行するコマンドを送信する機会があった。
需要があるかは微妙だけども、その方法を共有。
具体的には、AWS System Manager(SSM)のRunCommandを用いることで実現する。

## 検証環境

```
EC2インスタンス側: Amazon Linux AMI release 2018.03  
WindowsServer: WindowsServer2012 R2
```

## 例

### WindowsServerへのコマンド実行(ec2インスタンスより)

~~~shell
$ aws ssm send-command \
--document-name "AWS-RunPowerShellScript" \
--document-version "1" \
--targets "Key=instanceids,Values=${WindowsサーバのインスタンスID}" \
--parameters \
'{"workingDirectory":["${どこのディレクトリで実行するか}"],
"executionTimeout":["600"],
"commands":["${実行コマンド}"]
}' \
--timeout-seconds 600 \
--max-concurrency "50" \
--max-errors "0" \
--region ${リージョン}
~~~

コマンドを実行すると、レスポンスとして
`"CommandId": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"`
のようなパラメータが渡される。このパラメータを用い、実行結果の確認を行う。

### SSMコマンド実行後の成否確認

~~~shell
$ aws ssm get-command-invocation \
--command-id "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" \
--instance-id "${windowsサーバのインスタンスID}" \
~~~

例えば、Linux環境からWindowsのC:直下でipconfigを実行したくなるときがあるかもしれない。
そんなときは **WindowsServerへのコマンド実行** で述べたコマンドの変数を `C:\\\\` と `ipconfig` に変更し  

1. `aws ssm send-command` を実行
2. `aws ssm get-command-invocation` を実行

と2ステップで実現することができる。
以下は、 `get-command-invoction` を実行した際の返り値のサンプルとなる。

~~~shell
{
    "Comment": "",
    "ExecutionElapsedTime": "PT0.293S",
    "ExecutionEndDateTime": "2020-01-01T00:00:00.000Z",
    "StandardErrorContent": "",
    "CloudWatchOutputConfig": {
        "CloudWatchLogGroupName": "",
        "CloudWatchOutputEnabled": false
    },
    "InstanceId": "${インスタンスID}",
    "StandardErrorUrl": "",
    "DocumentName": "AWS-RunPowerShellScript",
    "DocumentVersion": "1",
    "Status": "Success",
    "StatusDetails": "Success",
    "PluginName": "aws:runPowerShellScript",
    "StandardOutputContent": "\r\nWindows IP �\\��\r\n...(以下略)",
    "ResponseCode": 0,
    "ExecutionStartDateTime": "2020-01-06T05:36:51.549Z",
    "CommandId": "4b3ddb96-cec0-4df7-967e-81cc20d0d792",
    "StandardOutputUrl": ""
}
~~~

コマンドの実行そのものに成功したかどうかは、 `Status` を見ればよく、
実行したコマンドの返り値については、 `StandardOutputContent` に格納される。
この返り値をパースするなりしてアレコレしたいところだが…以下問題点が

## 問題点

```
"StandardOutputContent": "\r\nWindows IP �\\��\r\n...(以下略)",
```

と言う文字列を見てわかるよう `StandardOutputContent` の文字列が化ける…
Linux<->Windowsの行き来をする都合上、まあ文字化けするよね。

でもでも単純にnkfとかでエンコーディングすればいいじゃんと思いきや、試してみたところ、うまく変換されない（解決策あったら教えてほしい…）
\# メインとなる処理はbatに任せておいて、そのbatを叩くだけって使い方が安牌？

## 注意点
このSSM経由でのコマンド実行は `NT AUTHORITY\ System` で行われる。
想定する実行ユーザが異なることから、意図せずコマンドが実行できないことがあるので注意。

なお、もちろんSSM実行のポリシーをロールやらプロファイルで与えてあげないと、実行権限が無いですよと怒られるので、その点も注意。

## 参考

- [AWS Systems Manager Run Command](https://docs.aws.amazon.com/ja_jp/systems-manager/latest/userguide/execute-remote-commands.html)  
- [SSMからEC2 Windowsをsysprepする方法
](https://cloudpack.media/49421)
【React Native】アプリ開発 〜画面遷移に挑戦してみた〜

複数のアプリ画面を登録してみた。
※結論から言うと、この記事ではまだボタンでの画面の遷移はしません。

#実行したコード

App.jsはこんな感じ。この中で、Screenを複数インポートして読み込む。

```js:App.js
import { createStackNavigator, createAppContainer } from 'react-navigation';

import WelcomeScreen from './src/screens/WelcomeScreen';
import SettingScreen from './src/screens/SettingScreen';

const App = createStackNavigator({
  Setting: { screen: SettingScreen },
  Welcome: { screen: WelcomeScreen },
}, {
  NavigationOptions: {
    headerTitle: 'Header',
    headerStyle: {
      backgroundColor: '#265366',
    },
    headerTitleStyle: {
      cokors: '#fff',
    },
  },
});

export default createAppContainer(App);
```

WelcomeScreen.jsとSettingScreen.jsはこんな感じ。とりあえずはテキストを表示するだけのシンプルなやつ。


```js:WelcomeScreen.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

class WelcomeScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Welcome!!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default WelcomeScreen;

```

```js:SettingScreem.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

class SettingScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Setting!!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default SettingScreen;

```


これで実行！！


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541751/dd9b9a69-5956-6a2e-257e-9319517ea1ff.png)

謎のエラーが出現。

terminalに、

>Unable to resolve "react-native-gesture-handler" from "node_modules/@react->navigation/native/src/Scrollables.js"
>Failed building JavaScript bundle.

なるエラーメッセージがあったので、それを頼りに、

```terminal
$ expo install react-native-gesture-handler
```

を実行。
今度こそ！！

<img width="300" alt="11211825961052.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541751/6a2428fe-6c0e-88d1-d175-a21e8f049443.jpeg">

この段階では、先に登録したスクリーンが先に表示されます。
App.jsのスクリーンの登録順を変更すると、Setting!!が表示されます。
ですので、たとえば
App.jsの

```js:App.js
const App = createStackNavigator({
  Setting: { screen: SettingScreen },
  Welcome: { screen: WelcomeScreen },
}, {

```
の部分を

```js:App.js

const App = createStackNavigator({
//  Setting: { screen: SettingScreen },
  Welcome: { screen: WelcomeScreen },
}, {

```

みたいにすると、Welcome!!が表示されます。
次回こそは画面を遷移させます！
`pip` と `conda` は何が違うのか？

## 背景

Anacondaの仮想環境で、pipが使えるにも拘らず、なぜcondaでインストールするのか？疑問に思い、使い分けがあるなら知りたいと思った。


## `pip` と `conda` の違い

StackOverflowやanacondaブログにわかりやすく書かれていた。
<https://stackoverflow.com/questions/20994716/what-is-the-difference-between-pip-and-conda>
<https://www.anaconda.com/understanding-conda-and-pip/>

### 1. Pythonで書かれたライブラリ以外を、インストールできるか否か

   - pip の場合、Pythonのみで作られたパッケージだけ、インストールができる。
       - 例えばHDF5やLLVMなど、C/C++やR言語で書かれたライブラリが必要なら、別途インストールする必要がある。
   - conda の場合、Python以外の言語で作られたパッケージも、インストールできる。
       - NumPyやMatplotlibなど、pipでPyPIからインストールする際にはビルドが必要だったライブラリも、condaなら、Anaconda Cloudからビルド済み媒体をインストールできる。
       - 例えば **PostgreSQLだって、condaでインストールして動かせる！**（後述）
       - 逆に、pipがサポートするwheel形式の媒体はcondaでインストールできない。これはpipを使ってインストールすることになる。

### 2. 仮想環境を作れるか否か

   - pip だけでは、作れない。
       - 例えばvirtualenvやpipenvなど、他のツールの力を借りて実現する必要がある。
   - conda だけで、作れる。
       - 作られた仮想環境にpipをインストールすれば、pipも使える。

### 3. ライブラリの互換性をチェックするか否か

   - pip の場合、互換性をチェックせず、順番にインストールを試みる。
       - インストールする順番によっては、互換性が保たずインストールしてしまい、環境を壊してしまう場合がある。
   - conda の場合、互換性をチェックし、結果を教えてくれる。
       - インストールするパッケージの依存ライブラリ関連メタ情報が正しい限り、condaが環境を壊さないよう注意してくれる。

## condaで、PostgreSQLをインストールしてみた

試しに、anacondaでPostgreSQLをインストールして、接続してみる。

参考にしたgistはこちら。
<https://gist.github.com/gwangjinkim/f13bf596fefa7db7d31c22efd1627c7a>

### 仮想環境作成

```sh
$ conda create --name myenv

# enter the environment
$ conda activate myenv
```

### PostgreSQLインストール

```sh
$ conda install -y -c conda-forge postgresql
```

### PostgreSQL初期化

`mylocal_db` フォルダをデータフォルダとして、初期化を行う。

```sh
$ initdb -D mylocal_db
...
Success. You can now start the database server using:

    pg_ctl -D mylocal_db -l logfile start
```

### PostgreSQL起動

早速起動してみる。付与したオプションにより、以下の様な動作となっている。

- データフォルダ(`-D`)は、初期化した `mylocal_db` フォルダ
- ログファイル(`-l`)は、 `logfile` に出力する
- オプション(`-o`)として、5433番ポート（ `-p 5433` )を利用する。

```sh
$  pg_ctl -D mylocal_db -l logfile -o "-p 5433" start
waiting for server to start.... done
server started
```

### PostgreSQLへ接続

psqlコマンドを実行することで、SQLを実行できる状態になる。

```sh
$ psql -d postgres -p 5433
psql (11.2)
Type "help" for help.

postgres=# 
```

### PostgreSQL停止

起動コマンド(pg_ctl start)と同じ要領で、停止コマンド(pg_ctl stop)を実行する。

```sh
$ pg_ctl -D mylocal_db -l logfile -o "-p 5433" stop
waiting for server to shut down.... done
server stopped

```

## 結局、使い分けは？

condaによるインストールのほうが便利なケースとして、以下があると理解したつもり。

- Numpyなど、インストール時にC/C++で環境ごとにビルドが必要なライブラリを利用する場合
- PostgreSQLなど、他のミドルウェアの利用が前提にある場合
    - Dockerを持ち出さずとも、Anaconda１つですべてが完結する開発環境になるかな(?)

逆に、pipの方が便利なケースもありそう。多くはこちらか？

- 純粋なPython実装をしたい場合
- 利用するミドルウェアが、condaでインストールできない場合
眺めて覚えるC言語 その5 PythonからC言語を呼ぶ(引数) 配列

Pythonからfloatの配列を渡し、タプルで合計と平均を返す。

```capi.py
import myModule as capi
import random
x=[random.uniform(0, 100) for x in range(100)]
s=0.0
for a in x:
    s=s+a
print("c ",s,s/len(x))
a=capi.fsum_avr(x)
print("py",a)

実行すると
>python capi.py
py 5025.24247203747 50.252424720374705
c  (5025.24247203747, 50.252424720374705)
```

```capilib.c
#include <Python.h>
static PyObject* fsum_avr(PyObject* self, PyObject* args)
{
    long n;
    double sum=0.0,avr,a;
    PyObject* c_list, *item;
    if (!PyArg_ParseTuple(args, "O", &c_list)) return NULL;   
    // Check list
    if PyList_Check(c_list) n = PyList_Size(c_list);
    else return NULL;
    for (int i = 0; i < n; i++){
        item = PyList_GetItem(c_list, i);
        a = PyFloat_AsDouble(item); // Increment the reference count
        sum = sum + a;
        Py_DECREF(item); // Decrement the reference count
    }
    avr=sum/n;
    return Py_BuildValue("(dd)",sum,avr);
}
static PyMethodDef myMethods[] = {
    { "fsum_avr",fsum_avr, METH_VARARGS, "sum avr"},
    { NULL }
};
static struct PyModuleDef myModule = {
    PyModuleDef_HEAD_INIT,"myModule","C API Module",-1,myMethods
};
PyMODINIT_FUNC PyInit_myModule(void){
    return PyModule_Create(&myModule);
}
```
**注目ポイント**
1.　PyArg_ParseTuple(args, "O", &c_list)は、list配列を"O"により&c_listにアドレスを設定します。
O (object) [PyObject *]
Store a Python object (without any conversion) in a C object pointer. The C program thus receives the actual object that was passed. The object's reference count is not increased. The pointer stored is not NULL.
2.　return Py_BuildValue("(dd)",sum,avr);は、合計と平均をタプルで戻します。

[**引数の解釈と値**](https://docs.python.org/ja/3/c-api/arg.html)についてはリンクをごらんください。

```setup.py
from distutils.core import setup, Extension
setup(name = 'myModule', version = '1.0.0',  \
   ext_modules = [Extension('myModule', ['capilib.c'])])
```
**ライブラリの作成**

```
capi>python setup.py install
```
[Python3 入門 1日目]  プログラミングとPython

#プログラミングとは
　コンピューターに行わせたい命令を作っていく作業のこと。

#プログラミングを学ぶとは
　「正しい言葉」と「構文規則」を学ぶこと。

#Pythonについて

##実世界でのPython
1991年からあるプログラミン言語である人気のあるプログラミング言語トップ10にずっとランクインしているらしい。

以下のようなコンピューティング環境で使われている
・モニター、ターミナルウィンドウのコマンドライン
・web含むGUI
・webのクライアント、サーバーサイド処理
・有名な大規模サイトを支えるバックエンドサーバー
・クラウド
・モバイルデバイス
・組み込みデバイス

様々な場所で多岐にわたり使われているPython。
魅力的ですね。

##Pythonと多言語の比較
大学時代にC言語を使っていたが、第一印象としてはC言語より学習しやすそうな言語だと感じた。

##単語
・シェルプログラム：入力した内容を読み込み、結果をディスプレイに表示するプログラム（端末やターミナルウィンドウを使っている場合）
・静的言語：言語は変数を持っていて、静的言語ではこの変数の型を宣言する必要があり、言語の変数が型を変えることができない。
・動的言語（スクリプト言語）：使う前に変数の型を宣言しろと強制してこない言語。
・型：メモリ内のスペースをどれくらい使うか、それを使って何ができるのかを表すもの。

例.　x = 5のコードを入力する。
静的言語の場合： xの型を宣言する必要がある。
動的言語の場合：xの型を宣言しなくても5が整数なので変数xも整数だろうとプログラムによって判断される。

・コンパイル：人間が読めるプログラムを機械が読んで実行できるプログラムに変換すること。
・インタープリタ：動的言語をコンパイルせず逐次解釈するプログラムのこと


######参考文献
「Bill Lubanovic著 『入門 Python3』(オライリージャパン発行)」
【制御工学】Pythonによる伝達関数や状態空間モデルの計算

#はじめに
仕事でロボット制御をやることになったので、以下のことを知るためにまとめた。
・制御工学の基礎知識の復習
・pythonで制御システムやPID制御をどう描くのか
・状態空間モデルを理解することでカルマンフィルタや自己位置推定を理解するため

#参考文献
南裕樹　著、オーム社、「Pythonによる制御工学入門」

#内容
「Pythonによる制御工学入門」の第３章の内容

## 共通
以下のライブラリをimport

import sympy
import control

## 伝達関数
以下にコードを記載

```
# chapter 3-2 伝達関数モデル
Np = [0,1]
Dp = [1,2,3]
P = control.tf(Np, Dp)
print(P)
```

```
出力
      1
-------------
s^2 + 2 s + 3
```


## 状態空間

以下にコードを記載

```
#3-3 状態空間モデル
A = '1 1 2; 2 1 1; 3 4 5'
B = '2; 0; 1'
C = '1 1 0'
D = '0'
P = control.ss(A,B,C,D)
print(P)
sysA, sysB, sysC, sysD = control.ssdata(P)
print(sysA)
```

```
出力
A = [[1. 1. 2.]
 [2. 1. 1.]
 [3. 4. 5.]]

B = [[2.]
 [0.]
 [1.]]

C = [[1. 1. 0.]]

D = [[0.]]

[[1. 1. 2.]
 [2. 1. 1.]
 [3. 4. 5.]]
```

#まとめ
・controlやsympyといったライブラリを使うと、ラプラス変換や伝達関数表記がこんなに簡単にできる。
Vim/Neovimのターミナル機能を使って瞬時にRSpecを走らせる

VimのターミナルでRSpecを実行したかったので実装してみました
![out.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402968/9aaa5cf8-329f-29d1-ff16-da720404f590.gif)
(DB設定をしていないのでエラー吐いてます)

## 実装
[kassio/neoterm](https://github.com/kassio/neoterm)というVim/Neovimのターミナル機能のラッパーを使うと簡単に実装できました

`neoterm#do()`関数に実行したいコマンドを引数として渡すことで、ターミナルでコマンドを実行することができます

```vimscript:(例)開いているファイルのspecを実行する関数
let g:neoterm_rspec_cmd='bin/rspec'

function! termrspec#file() abort
    let l:filename = expand('%') " ファイルのパス取得
    call neoterm#do({ 'cmd': join([g:neoterm_rspec_cmd, l:filename]) })
endfunction
```

実装したコマンドはプラグインにして公開しています
[ujiprog/neoterm-rspec.vim](https://github.com/ujiprog/neoterm-rspec.vim)

## プラグインの使い方
### インストール
お使いのプラグインマネージャーに[kassio/neoterm](https://github.com/kassio/neoterm)と[uji/neoterm-rspec.vim](https://github.com/uji/neoterm-rspec.vim)を追記してください

```toml

[[plugins]]
repo = 'kassio/neoterm'

[[plugins]]
repo = 'uji/neoterm-rspec.vim'
```

### コマンド
- :TermRSpecAll

プロジェクト全体のRSpec実行

- :TermRSpecFile

開いているファイルのRSpec実行

- :TermRSpecLine

カーソルがある行のRSpec実行

- :TermRspecFailers

`--only-failuers` オプションをつけたRSpecの実行

マッピングして使うと便利です

## おわりに
ターミナル機能での外部コマンド実行ですが、neotermのおかげでさくっと実装できました
現状Vim/Neovimどちらでも動作するっぽいので良いですね
外部コマンドの実行、実行結果の閲覧をするプラグインを自作する場合は、neotermを使うと簡単そうです

VimでRSpecを実行する別の手段としては[thoughtbot/vim-rspec](https://github.com/thoughtbot/vim-rspec)や、[QuickRunでの実行](https://gist.github.com/Kuniwak/e880a008afb84c7b74cf)などがあるのでそちらも試してみてください
履歴を置き換えるgit rebase -iについて

#概要
`git rebase -i`という対話式のコマンドを使うことによって以下のことができます。

- 順番を整える
- 複数のコミットを１つに
- 1つのコミットを複数に

それではみていきましょう。

#順番を整える
順番を整えるコマンドは

```terminal
git rebase -i <リビジョン>
```
こうすることで指定した範囲のコミットを示すプロンプトが開くので順番を変えることができます。

```terminal
git rebase -i HEAD~3
```

上記は直近３つのコミットを指定しています。

# 複数を１つにする
これもまた同様に

```terminal
git rebase -i <リビジョン>
```
でプロンプトを開きます。

```terminal
pick 734c3db second commit
squash 623b6c7 third commit
pick 1551dc2 fourth commit
pick 85d93ff fifth commit
```
`squash`にすることで、その前のコミットに取り込まれます。
これで保存をすると、third commitがsecond commitに取り込まれ、１つのコミットになっています。

ログをみて確認してみてください。

#1つを複数に分割する
先ほど1つにしたコミットを元に戻しましょう。

`git rebase -i`でプロンプトを開き、

```terminal
edit 8e967a0 second commit
pick e61c9d5 fourth commit
pick 49f88f8 fifth commit
```
操作したいコミットに`edit`をつけます。
これで保存をすると、ログの最新が`edit`で指定したコミットになっており、リベースがリポジトリの操作を待っている状態になります。

```terminal
git reset HEAD^
```
として直近のコミットをやり直すようにします。

そして今回はsecondとthirdの結合を解除するので先にsecondで行った変更を施してあげて、コミットします。

```terminal
git commit -m "second commit"
```
次にthirdで行った変更を施してあげて、コミットします。

```terminal
git commit -m "third commit"
```

最後に、分割するコミット作業が完了したら、

```terminal
git rebase --continue
```

することで、分割されます。

ログで確認してみてください。

#まとめ
git rebase -iについてみました。
参考になれば幸いです。
【Django】ファイルの場所を変えたらTestが動かない



## 環境
- python 3.7.4
- django 2.2.8
- centOS 7

## 症状

`python manage.py startapp sample`でアプリを作成し、`sample/tests.py`に記述したテストは動く。
ファイル分割のため`sample/tests/`ディレクトリを作成、`sample/tests/test_model.py`を作成したものの、
`python manage.py test`が動かない。


#### 実行結果

```bash
(venv) user@localhost:django-app $ python manage.py test
System check identified no issues (0 silenced).

----------------------------------------------------------------------
Ran 0 tests in 0.000s

OK
```

## 確認した

Djangoのテストは、**テストランナーにテストを発見してもらうためのルール**が存在する。
正しく沿っているか確認した。

- テストのモジュール名(ファイル名)は`test`で始まっているか・・・・・ **OK**  
- `django.test.TestCase`を継承しているか・・・・・・・・・・・・・ **OK**  
  (`unittest.case.Testcase`でもOK)
- テストメソッド名は`test`で始まっているか・・・・・・・・・・・・・ **OK**  
- そもそも`settings.py`の`INSTALLED_APPS`に記述されているか・・・・**OK**  




## 結論
`sample/tests/`ディレクトリに`__init__.py`が存在しないことが原因だった。
Djangoにモジュールとして認識できるようにしてやる必要があるようだ。
空ファイルでよいので作成すれば動く。


## 参考
- [python - Why does django not see my tests? - Stack Overflow](https://stackoverflow.com/questions/3659405/why-does-django-not-see-my-tests)
- 現場で使える Django の教科書《実践編》(横瀬 明仁)
arduinoで正規表現

ありがちな題材だがやってみた。以下を参考にしました。ありがとうございます。

https://qiita.com/ohisama@github/items/a3e4423cb1810671c81d
https://qiita.com/ohisama@github

しかし，試した環境ではメモリーが足りなかった...

# 目的

シリアルモニター等で，CPUに対し，コマンドとパラメータ（数値想定）を送ることができるようにする（ための前段階）。

# 環境

- Arduino 1.8.10 on Mac
- Beetle（Leonardo互換機）

# 準備

- ライブラリマネージャ にて， regexp を探してインストール。0.1.0でした。

# 試したソース

```C++:qiita.ino
#include <Regexp.h>

void setup() {
  Serial.begin(9600);
  while (!Serial) delay(100);
  Serial.println("Booted.");
}

void loop() {
  MatchState ms; // for regexp
  if (Serial.available() > 0) {
    String str = Serial.readStringUntil('\n');
    Serial.println("----");
    Serial.print("Echo: ");
    Serial.println(str);

    char charBuf[128];
    str.toCharArray(charBuf,128);

    ms.Target (charBuf);
    char result = ms.Match ("%a+");

    if (result > 0)
    {
      Serial.print ("Command:");
      Serial.println (str.substring(ms.MatchStart, ms.MatchStart + ms.MatchLength));
    }
    else
    {
      // do something
      // Serial.println ("No match.");
    }

    ms.Target (charBuf);
    result = ms.Match ("-*%d+");

    if (result > 0)
    {
      Serial.print ("Param:");
      Serial.println (str.substring(ms.MatchStart, ms.MatchStart + ms.MatchLength));
    }
    else
    {
      // do something
      // Serial.println ("No match.");
    }
  }
}
```

# 実行結果

Echo: のあとが入力したもの。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533274/548e55e3-275e-9c49-eb9c-cf9b82518624.png)

`-`（マイナス）は受け入れらるようにしたけど，小数点は無視することにした。


# 補足

Digispark互換機にも使いたかったけど，Beetleで8k弱使っている... そちらは別途考えなければならなそうだ。

# 追記

2021/11/17 String -> char変換を変更しました。
地域メッシュまとめ

#はじめに
仕事柄、地域メッシュ情報を使用しデータ分析をすることがあります。
作業をするたびに各メッシュの大きさを忘れてしまったり、
それぞれメッシュの呼び名が各所で異なり混乱してしまったりすることがあるので、
まとめてみました。


#地域メッシュ統計とは
>地域メッシュ統計とは，緯度・経度に基づき地域を隙間なく網の目（Mesh）の区域に分けて，統計データをそれぞれの区域に編成したものです。

引用元：[総務省統計局　地域メッシュ統計の特質・沿革](https://www.stat.go.jp/data/mesh/pdf/gaiyo1.pdf)


#地域メッシュまとめ
|略称 |正式名（別名） |経度の間隔 |緯度の間隔 |一辺の長さ※ |コードの桁数|コード例※ |全国のメッシュ数|
|---|---|---|---|---|---|---|---|
|１次メッシュ|第１次地域区画|40分<BR>(2400秒)|1度<BR>(3600秒)|約80km|4|5339|174
|２次メッシュ|第２次地域区画<BR>統合地域メッシュ|5分<BR>(300秒)|7分30秒<BR>(450秒)|約10km|6|5339-46|4866
|３次メッシュ|基準地域メッシュ<br>地域メッシュ<br>第３次地域区画|30秒|45秒|約1km|8|5339-46-31|386555
|４次メッシュ|２分の１地域メッシュ<br>分割メッシュ|15秒|22.5秒|約500m|9|5339-46-31-4|?
|５次メッシュ|４分の１地域メッシュ<br>分割メッシュ|7.5秒|11.25秒|約250m|10|5339-46-31-4-4|?
|６次メッシュ|８分の１地域メッシュ<br>分割メッシュ|3.75秒|5.625秒|約125m|11|5339-46-31-4-4-1|?


## 一辺の長さ、およびメッシュの面積について
地球は球体ですので、「経度の間隔」や「緯度の間隔」が同じであっても、
場所によって緯度・経度の長さ、メッシュの面積は異なります。
例として、札幌市の基準地域メッシュが943,000㎡、那覇市の基準地域メッシュが1,153,000㎡となり、那覇市の基準地域メッシュは札幌市に比べ約1.2倍大きくなります。


## コードの書き方について
特に統一されていないようです。
メッシュが大きくなるたびに追加される数値をハイフン`-`や角括弧`［ ］`で区切ることもありますし、数値だけの表記もあります。

４次メッシュの例）

- `5339-46-31-4`
- `[5339][46][31][4]`
- `533946314`


## 全国の１次メッシュコードを知りたい
以下が参考になります。

* [日本の国土にかかる第１次地域区画]
(https://www.e-stat.go.jp/pdf/gis/primary_mesh_jouhou.pdf)


# 参考にしたサイト、参考になるサイト
* [総務省統計局 - 地域メッシュ統計の特質・沿革](https://www.stat.go.jp/data/mesh/pdf/gaiyo1.pdf)
* [e-Stat]
(https://www.e-stat.go.jp/)
* [ウィキペディア - 地域メッシュ]
(https://ja.wikipedia.org/wiki/%E5%9C%B0%E5%9F%9F%E3%83%A1%E3%83%83%E3%82%B7%E3%83%A5)
Rails　復習　　エンジニア戦記#5

Rails　学習コース　ⅢとⅣの復習

変数の表示方法
アクションを変数で表示する方法
データでの保存・読み出しの方法
Link_toメソッドの使い方

【感想】

仕事初めでテンパってしまって復習のみとなってしまったが
明日からがんばるのだ、俺！
所得税の確定申告を電子申請（e-Tax）で行う方法（Mac & iPhone）

# これは何？
時間のない人向け：**「マイナンバーカードと最近の機種のスマホを持っていれば、今年から所得税の確定申告が電子申請できるようになって楽になるぞ！でもやり方ややこしいからまとめてみた！」**

新年を迎えると、確定申告の作成がスタートします。
副業をしている・財テクに勤しんでいる方、あるいは医療費控除を受けて税金を返してもらいたい方、超高収入の方はサラリーマンでも無視できないのが、「所得税の確定申告」です。Qiitaユーザーの方にも、対象の方は多いと思います。
税務署に行って手伝ってもらいながら書く方法もありますが、そんなに複雑じゃない&慣れっこよ、という人向けにネットでも確定申告書を作成することができます。
さらに、ネットで作った申告書を基に電子申請もできるサービス「e-Tax」があって便利…なのですが、昨年までは、マイナンバーカードを読み込むための専用のカードリーダーを購入する必要があり、１年に１回のためには買う気にはならず、ほとんどの人が電子申請を諦め、結局印刷して税務署に郵便で送っていたと思います。
そんな不便な電子申請でしたが、今年からはカードリーダーがついている対象機種のスマホ（[一覧はこちら](https://www.jpki.go.jp/prepare/pdf/nfclist.pdf)）でマイナンバーカードの読み取りを行うことができ、対象者が増えました。
ところがどっこい、ホームページの説明がわかりにくいところがあり、かなりハマったので、うまく行った方法をまとめてみました。
本記事はmacOS CatalinaのMacとiPhone 11 Proを基に執筆しています。また、マイナンバーカードは取得済であることが条件です。

# どハマりポイント
国税庁のサイトをみてもいまいちよくわからず、これハマるなーと思ったポイントは2点ありました。
この2点は、MacからiPhoneをカードリーダーとして認識する方法がないことに起因しているかと思います。（Windows/Androidではペアリング大丈夫かもしれないです&MacでもiPhoneをカードリーダーとして認識できたという方いたら教えて下さい）

1. 国税庁のホームページから直接申請するのではなく、[マイナポータル](https://myna.go.jp/)経由で国税庁のページにアクセスしなければならない
2. マイナンバーカードによる認証を行い、マイナポータルとe-Taxを紐つけるところまでは**全てiPhoneで済ませなければならない**

以上を踏まえて、手順を追ってみます。
# Mac & iPhoneでのe-Taxの利用の仕方
**1. iPhoneでマイナポータルの利用登録をする**
iPhoneのSafariで[マイナポータル](https://myna.go.jp/)にアクセスして、**若葉マークの「利用者登録はこちら」**のボタンから利用者登録をします。その過程で「マイナポータル」アプリをインストールすることになると思いますので、こちらも画面の指示に従います。

**2. マイナポータルにiPhoneからログインし、e-Taxとの紐付けを行う**
マイナポータルアプリからログインを改めてすると、下の方に**「もっとつながる」**というコーナーがあるので、**「使ってみる」**を押しましょう（この手順も明快に説明している資料がなく、ハマりました。。。）
すると、**「国税電子申告・納税システム（e-Tax）」**という項目があるので、これで設定が完了するまで、iPhoneで必要事項を入力したり、なんどもマイナンバーカードを読み取ったりしましょう。
マイナポータルの「もっとつながる」ページで、**「つながっているウェブサイト」**側に「国税…」が表示されるようになったら設定完了です。

~~**3. Macからマイナポータルにログインし、e-Taxにアクセスする**
一回設定が済んでしまえば、Macからマイナポータルにログインする際はQRコードでログインすることができます。Macで[マイナポータル](https://myna.go.jp/)にアクセスして、下の方にある**「2次元バーコードを使ったログイン・利用者登録」**を押して、QRコードを表示させます。iPhoneのマイナポータルアプリで**「2次元バーコード読取」**を押してQRコードを読み込めば、Mac側でログインできます。
ログインできたら、「もっとつながる」からe-Taxにアクセスすれば、後はいつもの確定申告作成コーナーのページにアクセスできるはずです！お疲れ様でした！
ちなみに、今年からe-Taxのサイトはスマホ対応したそうなので、iPhoneで大丈夫という方は、この手順をスキップして、iPhoneだけで確定申告を終わらせることも可能だそうです（なんか乗り気がしないので試していない）。~~
**2月9日追記：**パソコンから申告書を作成してしまうと、最後の提出画面でのカード読み取りで詰まってしまうとのことでした。iPhoneだけで確定申告を完結させれば大丈夫そうですが、パソコンで作成して、最後にスマホで提出することは作成ファイルの転送ができないため、不可とのことです。便利なのか不便なのかなんとも言えない感じです。。。

# e-Taxで快適な確定申告ライフを！
電子申請、印刷・郵送・来庁の手間もなく、郵送事故の心配もないので、是非活用したいですね。
特に還付申告の方は還付時期が早くなるのでオススメです！確定申告の提出は2/17からですが、還付申告はもう提出可能ですので、仕事が忙しくなる前に済ませてしまいましょう！
PythonでABC103のA~C問題を解く

### はじめに
[前回](https://qiita.com/taxfree_python/items/8d66da706c06f85a440f)からrateの変動はありません。
誰かに書けと言われたような気がした。
今回はCまで解けました。今回のようなCはわりとできる?
新学期が始まってしまった...

###A問題
[問題](https://atcoder.jp/contests/abc103/tasks/abc103_a)

**考えたこと**
感覚的に小さい順にsortしたら、値が最小になりそう。ということで実装

```python
a = list(map(int,input().split()))
a.sort()
ans = abs(a[1]-a[0]) + abs(a[2] - a[1])
print(ans)
```
問題文のtaskは3個と読み落としていてfor文を使うのかと思って苦しんでました。問題はしっかり読みましょう

###B問題
[問題](https://atcoder.jp/contests/abc103/tasks/abc103_b)

**考えたこと**
どうやって回転を実装するかを悩んでいたら、同じ文を二つ連結して、そのなかに探したい文字列があればよいのではと思って実装した。

```python

s = str(input())*2
t = str(input())

if t in s:
    print('Yes')
else:
    print('No')
```
文字列が入っているかどうかを判定するのはinを使うということを初めて知った。

###C問題
[問題](https://atcoder.jp/contests/abc103/tasks/abc103_c)

**考えたこと**
どうやってm mod a[i]が最大値となるようなmを設定するかが鍵。
m = a[i] * a[i+1] *......*a[n]とaの要素を全て掛けると全てのaで割きれる。
ということは、aの要素を全て掛けたものから1を引けばいいはず。そうすれば、余りが最大になる。

```python
n = int(input())
a = list(map(int,input().split()))

ans = 0
m = 1
for i in range(0,n):
    m *= a[i]
m -= 1
for j in range(0,n):
    ans += m % a[j]
print(ans)
```
最初にfor文でmを求めてあとは、それぞれの余りを計算するだけです。

###まとめ
今回は、3問解けたのでうれしい。
学校が始まって、模試とかがあるので投稿頻度は落ちます。
igataをPWA化する１

# はじめに
今回は弊社のReact開発で用いているボイラープレート[igata](https://github.com/diescake/igata)を**PWA化する**という内容のものです（なんか久しぶりに社員らしい記事が書けそうな気がする）。ただし今回は（いつもの事ながら？）結構内容が薄いのであえて横に`１`という数字をタイトルの横につけました。

# PWAとは[^1]
[^1]: [プログレッシブウェブアプリ](https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps)
**Progressive Web Apps**の略称です。端的に言うと、ウェブアプリとネイティブアプリそれぞれの利点を引き継いで作成されるウェブアプリのことを言います。とはいえPWAというのはウェブアプリ開発における一種の哲学みたいなものなので、ウェブアプリが**特定の要件を満たしているか、あるいは特定の機能を実装している場合**に PWAと見なされます。ウェブアプリがPWAとみなされるための原則があります（以下にいくつか示す）。

- Discoverable: コンテンツを検索エンジンで見つけることができる。
- Installable: アプリは端末のホーム画面に追加できる。
- Linkable: URL を送るだけでアプリを共有できる。
- Network independent: オフラインか、あるいは貧弱なネットワーク環境でも使用できる。
- Progressive: 古いブラウザーでも基本的な機能は使用でき、最新のブラウザーではすべての機能が使用できる。
- Re-engageable: 新しいコンテンツがあるときには、通知を送ることができる。
- Responsive: 携帯電話やタブレット、ノートパソコン、テレビ、冷蔵庫など、画面とブラウザーを備える全ての端末で使用できる。
- Safe: アプリからの通信が第三者からの攻撃に対して安全であり、機密情報を保護できる。

PWAを実現させるために[Service Worker API](https://developer.mozilla.org/ja/docs/Web/API/Service_Worker_API)とよばれる技術を用います。これによりウェブページのプリキャッシュが行われ、ページの読み込み時間を減少させることができます。

調べたところ、このService WorkerというものがこのPWA実現のための重要要素になっているみたいですね。

# Service Worker APIをigataに埋め込む
APIの実装は[ここ](https://qiita.com/YIPG/items/47f9d025a32effdadcad)を参考に行いました。やってることとしては`create-react-app`が元々実装しているService Workerへの登録の機能を呼び出しているだけのようですね。今回はその`serviceWorker.ts`という既存のtsファイルを拝借してみました。とはいえ丸々コピペだと、igataの`lint`とか`tsconf`とかに色々と駄目だしをもらってしまうので、少しだけ書き換えを行いました。

# さいごに
ソースは[こちらのGitHub](https://github.com/aYutaMatsunaga/igata-pwa)で公開しています。とりあえず今回はServiceWorkerをigataに繋ぎこんだだけなので、まだやるべきことは色々と残っています。

- どっかにウェブアプリをデプロイする
- PWAの恩恵が受けられたことがわかるようなウェブアプリを作成する（現時点ではただのTODOアプリ）

このPart1はPWAの調べ物が中心でしたね。
あっさり読むrails②(eachメソッド)

#はじめに
railsにおける`eachメソッド`の使い方を、極めてあっさり書いてみようと思います。
色々端折っていますが、ご了承ください。
#前提
今回は`Productテーブル`という、下記の様な設計のテーブルのデータを使用し、
登録されている全ての商品の`名前`と`金額`と`画像`を表示させたいと思います。

| Column     | Type        | Options      |
|:-----------|------------:|:------------:|
| name       | string      | null: false  |
| price      | integer     | null: false  |
| image      | string      | null: false  |

#実行

コントローラーにてテーブルのデータを取得します。
（アクションは`index`としています）

```ruby
def index
 @products = Product.all
end
```

ビューファイルには次のように書きます。

```haml:index.html.haml
- @products.each do |product|
  = product.name
  = product.price
  = image_tag(product.image)
```
これはrubyにおいて、配列の中身を`eachメソッド`を使って取り出すのと全く同じです。

こうすれば最低限の画面表示ができます。
もちろんこのままだと味気ないので、実際には`class`を設定したり、他のメソッドを使用することになります。
`classの設定`は[次の記事](https://qiita.com/Moon1126Snow/items/f861813706a5c54baaca)にてあっさり解説します。
JavaScriptを学習してたらネスト（入れ子構造）で詰んだの

#前回のあらすじ（Javaスク編）
・ハローワールドのアラートを出すことに成功した
#今日やったこと
・if関数を使って、変数yがうるう年かそうじゃないか判定するプログラムを作ってみた！
（今回の教科書『新人プログラマのためのjQuery Webアプリケーション開発講座』)
#困ったこと
・教科書のソースコードをいくら見ても、入れ子構造がわかりづらくて詰んだ！！
#解決方法
先人に訪ねて、ソースコードの体裁を変えてみたら、すんなり理解できるようになった！
Before

```
if{
example
}else{
false
}
```

after

```
if
{
 　　example
}
else
{
　　false
}
```

つまり、カッコの位置をわかりやすくして視覚的に理解できるように書くことにした！
#感想
プログラムそのものはすぐに実行して成功させることができたけど、今後のためにも構造を理解しようとしたらすっごく大変だなーって思った。
#次回の目標
・Switch関数について学習して、理解したい
組込系の展示会リスト2020

# 展示会リスト2020

## 目的
組込みソフトウェア開発、制御装置開発に関係する展示会を列挙し、
参加したいものを忘れないようにする。


##2020/01->2020/12

行の凡例：MM/DD(begin)-MM/DD(end) @地域 名称

### 1Q
01/15-01/17@東京 [ネプコンジャパン](https://www.nepconjapan.jp/ja-jp.html)
01/29-01/31@大阪 [Japan IT Week 関西](https://www.japan-it.jp/ja-jp.html)
02/05-02/06@名古屋 [ET・IoT Technology NAGOYA 2020](http://www.jasa.or.jp/etnagoya/)
02/12-02/14@東京 [ロボデックス](https://www.robodex.jp/ja-jp/about.html)
02/26-02/28@東京 [日本 ものづくり ワールド 2020](https://www.japan-mfg.jp/ja-jp/about.html)

### 2Q
04/01-04/03@東京 [コンテンツ 東京](https://www.content-tokyo.jp/ja-jp.html)
04/08-04/10@東京 [Japan IT Week 春 ビックサイト](https://www.japan-it.jp/ja-jp.html)
04/15-04/17@名古屋 [名古屋 ものづくり ワールド 2020](https://www.japan-mfg-nagoya.jp/ja-jp.html)

### 3Q
07/02-07/03@大阪 [ET・IoT Technology West 2020](http://www.jasa.or.jp/etwest/about/)

### 4Q
10/07-10/09@大阪 [関西 ものづくり ワールド 2020](https://www.japan-mfg-kansai.jp/ja-jp.html)
10/21-10/23@名古屋 [ネプコンジャパン 名古屋](https://www.nepconjapan-nagoya.jp/ja-jp.html)
10/28-10/30@東京 [Japan IT Week 秋 幕張メッセ](https://www.japan-it.jp/ja-jp.html)
11/04-11/07(土)@名古屋 [メッセ名古屋](https://www.messenagoya.jp/)
11/18-11/20(金)@横浜 [ET&IoT Technology 2019](http://www.jasa.or.jp/expo/)

##(参考)2019/01->2019/12

### Qiita参考
(組み込み系の）展示会リスト2019
https://qiita.com/hillacken/items/9b763539d4a91a0d5e1d
シェルスクリプトでディレクトリが存在しない場合のみディレクトリを作成する

シェルスクリプトで特定のディレクトリの存在を確認し、存在しなければ作成する。

## 例

`./example`が存在しなければ作成する。

```sh
if [ ! -d ./example ]; then
  mkdir ./example
fi
```

後から知った（ご教示いただいた）が、`-p`オプションでも同様のことが可能。
ディレクトリがすでに存在していても、エラーメッセージが表示されない。

```sh
mkdir -p ./example
```
【DS】スニペットについて

・スニペットで作成した変数で初期値が指定されていた場合他のロボットだと編集できない
・スニペットをつかいつつ変数に初期値が指定されているとロボットで変更できない状態で値が指定されてしまう。変更したければ、その変数を使っているスニペットを起動し、変数の初期値を変更する必要がある
【testロボ】空白の場合値を抽出しないロボ

【アルゴリズム】
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556084/0fde7f88-d3ff-4e95-b7d4-3485f87484f1.png)

【ポイント】
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556084/156fbbe4-d65b-f786-aca2-ce8509b74edd.png)
・Loop culmusは上記の感じで名前付き範囲で指定する
・ちゃんとループを設定した後のセルから取らないと特定のセルしか拾わなくなる。システム的にも難しい処理ではあると思う。
・ループを作ると以降の名前が変わるので、以降のループ処理にかんしても検索対象の名前を変更する必要がある
コードレビュー前の確認事項(初心者)

初心者の自分が何度もやってしまったコードレビューでの指摘事項をまとめていきます。
コードレビューしていただく先輩の時間を無駄にしないために、是非参考にしていただければと思います。

### DBアクセスの回数
DBアクセスは可能な限り少なくするのが、得策です。

例

```php
$stmt = $pdo->query('SELECT * FROM users　WHERE id = :id;');
for ($i = 1; $i < 6; $i++) {
  $stmt->bindValue(':id', $i, PDO:PARAM_INT);
}
```
↓

```php
$stmt = $pdo->query('SELECT * FROM users');
```
極端ですが、上の例では、`for文` でループしているため、`5回` もDBにアクセスしています。

1度にまとめられるものを、無駄に2回、3回、DB接続してしまうと通信量の無駄遣いになってしまいます。

### ファイル末尾の改行
ファイル末尾の改行も見落としがちな点です。
コーディングの作法とよく言われますが、詳しく解説している記事がございますでリンクを貼らせていただきます。
https://teratail.com/questions/71778

### デバッグコードの消し忘れ
必要な場合を除き、無駄なコード(デバッグコード等)は消してから、コードレビューに臨みましょう。
レビューアーさんの、思考を無駄使いしない。

### 比較演算子
こちらも特別な理由がない場合を除き、比較を行う際には、厳密に ( === ) を比較を行いましょう。
緩い比較 ( == ) だと意図しない挙動を示してしまいます。

例：`int` と `stirng` の比較

```php
$a = 1;

if ($a == '1') {
    var_dump('hoge');
}
```

`hoge` が表示される。

```php

$a = 1;

if ($a === '1') {
    var_dump('hoge');
}

```

何も表示されない。
Ubuntu18.04 のImageMagick convertで、pdfファイルを変換するときにnot authorized エラー

#環境
Windows10 wsl Ubuntu 

#対処法

emacsでも何でもいいので、エディタをsudoで使って/etc/ImageMagick-6/policy.xmlを編集する。

```変更内容
77行目: 修正前
  <policy domain="coder" rights="none" pattern="PDF" />

77行目: 修正後
  <policy domain="coder" rights="read|write" pattern="PDF" />
```
RailsでJSONファイルを読み込み、配列として扱う

備忘録。グローバル変数とか使っているのもしかしたらよくないかもしれないですね。あと、そもそもコントローラにこう言った内容は書くべきなのでしょうか。

# 目的
自分がPHPで作った、[第66回理工展の特集ページ一覧](https://rikoten.com/php/pages/events/feature/)をRailsで再現するために調べました。

# 実践
### JSON
適当にpublicフォルダの下に置きました。
`/public/json/sample.json`というJSONファイルを扱うと仮定します。中身はこんな感じ。
（先述の特集ページ一覧に類似したJSONを作りました。）

```json:/public/json/sample.json
[
    {
        "name": "脱出ゲーム バイオプロット",
        "text": [
            "――世界を、壊せ。",
            "チームで協力して謎解きをして、陰謀を暴け。"
        ],
        "url": "/feature/hexatrick"
    },
    {
        "name": "ダンスマスターズ",
        "text": [
            "私たちは年に1度の学園祭だけでなく、全国で踊りを披露するサークルです！"
        ],
        "url": "/feature/dancemaster"
    },
    {
        "name": "パズル謎解き パズルエンジニア",
        "text": [
            "パズルの国で、秘宝のパズルが失われてしまった！",
            "謎を解きながら、そのピースを探そう！"
        ],
        "url": "/feature/puzzlemaster"
    }
```

このJSONファイルを読み込み、配列として扱えるようにするのがこの記事での目標です。

### アプリ構築
すでにvisitorというアプリを作っていたので流用しました。とりあえずこれで再現できると思われるコマンドを記載します。（既存のアプリを使ったため動作確認はしていません。ただ大丈夫なはず。）

```powershell
rails new sample_app
rails g controller visitor json
```

これにより、sample_appというアプリを作り、その中でvisitorというコントローラを作りました。visitor内にはjsonというビューも最初から作っています。

### ビュー・JSON読み込み
では、本題のビューを作っていきましょう。

```erb:/app/views/visitor/json.html.erb
<% require "json" %>
<% File.open("#{Rails.public_path}/json/sample.json") do |j| %>
<% # File.open("#{Rails.root}/public/json/sample.json") do |j| %>
<% # JSON.load(j) %>
<% $json_str = JSON.load(j)%>
<% end %>
<%= $json_str[1]["name"] %>
```

1行目で、RubyのJSONを扱うためのモジュールを呼び出します。
2行目で、JSONを呼び出します。`#{Rails.public_path}`というのはRailsのpublicフォルダのパスです。なお、public内のファイルは、HTMLタグなどで参照するときは、`/json/sample.json`で呼び出せるはずなのですが、Ruby言語内で呼び出すときは、絶対パスでは見つけてくれないようです。
3行目は、2行目の代わりにRailsのルートディレクトリから追った場合です。個人的にメモしたかった。
4行目のコメントアウトを外して、5, 7行目をコメントアウトすると、JSONを読み込んだ結果がそのまま出力されます。ハッシュです。
5行目でJSONをハッシュの形で読み込んで、json_strというグローバル変数に格納しています。
7行目では、5行目で格納したグローバル変数(配列)からデータを呼び出しています。今回は、1列(0からなので2番目)の`name`を呼び出すので、このビューを表示した際には、`ダンスマスターズ`が出力されるはずです。

`rails s`して`localhost:3000/visitor/json`を開いて、`ダンスマスターズ`が表示されていれば、ここまで正常に動いたことになります。

# あとがき
とりあえずJSONファイルを読み込んで、配列として扱うことはできました。
今日は眠いので、また今度繰り返しのやり方を勉強して、続編を書きたいと思います。

# 参考記事
* publicフォルダ内のファイルの呼び出しについて : [Getting absolute path to the file inside the public folder in Rails - stackoverflow](https://stackoverflow.com/questions/3323471/getting-absolute-path-to-the-file-inside-the-public-folder-in-rails)
* [RubyでJSON形式のデータをハッシュへ変換する方法を現役エンジニアが解説【初心者向け】 - TECHACADEMY](https://techacademy.jp/magazine/21760)
* [値の取得 - ハッシュ - Ruby入門 - Let'sプログラミング](https://www.javadrive.jp/ruby/hash/index2.html)
[Swift 5]NotificationCenterでデータ（値）の渡し方

#はじめに
VC間通信に**NotificationCenter**を使って、データを一緒に送信する方法を調べたので、
備忘録として書いときます。

#NotificationCenterとuserInfoの使い方

####使用する通知を作成
まずは通知で使用する通知名を**extension**で拡張します。

```swift
extension Notification.Name {
   static let hogeName = Notification.Name("hogeName")
}
```

####通知送信
任意のタイミングで通知を送信します。

```swift:SenderVC

NotificationCenter.default.post(name: .hogeName, object: nil, userInfo: ["fugaData": "hogehoge"])

```

この際に　`userInfo: ["fugaData": "hogehoge"])`
の部分で任意のデータを一緒に送信することができます。

####通知受信
受信側のviewDidLoadなどで通知の登録を行ってください。
受信した際に実行する処理をselectorで指定します。

```swift:ReciverVC
override func viewDidLoad() {
   super.viewDidLoad()
   //受信設定
   NotificationCenter.default.addObserver(self, selector: #selector(piyoFunc(notification:)), name: .hogeName, object: nil)
}

@objc func piyoFunc(notification: NSNotification?) {
   let data = notification?.userInfo!["fugaData"]
   print(data) // hogehoge が出力される
}
```

#さいごに
NitificationCenterはいろんなイベントのやりとりができるので便利です。
parentVCやchildVCを取得してからデータを送信したりしている方は、
ぜひともこの方法を試してみてください！
LaravelでJSON型のカラムを操作する

#MySQLでJSON型っていうのがあるらしい
データベースの設計で「う～ん」と悩みながらググっていると
MySQLにはJSON型というのがあるらしい。
確かどこかの本でデータベースに配列を1つのセルに格納するのはアンチパターンというのを読んだ気がするのだが
どうやらちゃんとJSONデータ内部のクエリもちゃんとできるんだとか…。
でもMySQL5.7くらい以上じゃないと対応していないらしい。
MariaDBは10.2以上が対応みたい。

#Laravelで上手く扱えるの？
でもこの世はLaravel以外は人権の無い時代。
Laravelが対応してなきゃ、SQL力が試されることになるが…

もちろんちゃんと対応してた、やっぱLaravel神だは。

#migrationの書き方

```php
public function up()
{
    Schema::create('table_name', function (Blueprint $table) {
        $table->json('json_type_column')->nullable()->default('[]');
	$table->timestamps();
    });
}
```

`integer()`や`string()`のように、`json()`で型を指定する。
基本的に`nullable()`付けとけば安心。
もしdefault制約を付けたい場合は`default()`の引数に**JSON文字列**を与えればオッケー。
`json_encode()`を使えば簡単に書けるから問題は無さそう。

内部的にはどうやら型は`LONGTEXT`で作られているみたい（JSON型じゃないんか～い

#modelの書き方
```php
protected $table = 'table_name';
protected $fillable = [
    'json_type_column',
];
protected $casts = [
    'json_type_column'	=> 'json',
];
```
いつものようにmodelは書いても大丈夫だけどキャスト型を指定してあげなければいけない。
こちらも`integer`や`string`のように、`json`として指定してあげる。
この`$casts`を指定しないと、ただの`string`としてしか扱えない。

#クエリビルダの書き方　create編
```php
ModelName::create([
    'json_type_column'	=> [
        'abc'	=> [
            'X'  => 1,
            'Y'  => 2,
            'Z'  => 3,
        ],
        'cdf'	=> '456',
    ],
]);
```
わざわざ`json_encode`で**JSON文字列にしなくても大丈夫！**（というかjson_encodeするとエラーを吐く
`["a","b","c"]`のような素の配列も格納できるが、クエリを掛けるときに不便になりがちなので
なるべくは連想配列で格納してあげると良さげ。

#クエリビルダの書き方　where編
```php
//「->」でアクセスする感じ
ModelName::where('json_type_column->abc->Z', 3)->first()->json_type_column;

//型比較はゆるい
ModelName::where('json_type_column->cdf', 456)->first()->json_type_column;

//LIKE検索も出来る
ModelName::where('json_type_column->cdf', 'LIKE', '%5%')->first()->json_type_column;

//こんな事も出来る
ModelName::where('json_type_column->abc', 'LIKE', '3')->first()->json_type_column;
```
困ることは無さそうな感じ。
あくまで**JSON文字列で格納されている**という事を理解できていれば大丈夫。
ちなみに上記の例の`json_type_column`は連想配列として返ってきている。

#まとめ
やっぱLaravelは神だは！！！！！
[C#] DataContractJsonSerializerで読み書きするjsonデータのためのクラスを簡単につくる

**もくじ**
→https://qiita.com/tera1707/items/4fda73d86eded283ec4f

**json関連記事**
https://qiita.com/tera1707/items/4fda73d86eded283ec4f#json

# やること
[以前の記事](https://qiita.com/tera1707/items/2a774f4a76c48fc849fa)で書いた、.NETのDataContractJsonSerializerクラスを使ったjsonデータの読み書きで、jsonデータを格納するためのクラスをVisualStudio2019で簡単に作れるということを知ったのでメモしておく。

# やり方
VisualStudio2019のメニューの中にある「jsonをクラスとして貼り付ける」という機能を使う。

簡単にいうと、jsonのデータのテキストをコピーして下記の操作をすると、データ格納のためのclassを手で書かなくても簡単に書いてくれるというもの。

操作は下記の通り。

- まず、読み込みしたいjsonのテキストを`Ctrl+C`でコピーする。([以前の記事のjsonはこちら](https://qiita.com/tera1707/items/2a774f4a76c48fc849fa#%E3%82%B5%E3%83%B3%E3%83%97%E3%83%ABjson))
- その状態でjsonクラスを貼り付けたい場所にカーソルを当てた状態にし、VisualStudio2019のメニューの[編集] > [形式を選択して貼り付け] > [jsonをクラスとして貼り付ける] を選択する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352601/aca20aa8-2a1b-bb58-8e3c-5b93644ad0a3.png)

これで、カーソルの場所に、クラスが貼り付けられる。貼り付けたものは下記の通り。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352601/e6cd9a54-6faf-0af7-c414-6b407492685a.png)

※jsonデータの先頭の配列に名前がないので、`Rootobject`の下のクラス名が`Class1`、そのクラスのプロパティ名が`Property1`になっている。
jsonデータの方にちゃんと名前が書かれていれば、そこにも名前が付けられる。(下の備考を参照。)


# 備考

[以前の記事のjson](https://qiita.com/tera1707/items/2a774f4a76c48fc849fa#%E3%82%B5%E3%83%B3%E3%83%97%E3%83%ABjson)、本当は下記の形式が正しいらしい。
※jsonは正しくは{で始まり}で終わる。で、topの配列`([と]でかこまれたところ)`にも、その書き方だと名前を付けることができる。

これだと、今回の方法で作成したクラスにも、名前がつく。(ここでは`class Abc`)


これだと、

```
{
"abc": [
    {
        "small": [
            123.456,
            789.012
        ],
        "large": [
            987.654,
            654.321
        ]
    },
    {
        "small": [
            111.456,
            222.012
        ],
        "large": [
            333.654,
            444.321
        ]
    }
]
}
```

こうなる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352601/32244f12-4813-512d-7a45-4c22d29dd260.png)
rails consoleで日本語が打てない時の対処法

##はじめに
rails consoleで日本語入力をしようとする時
```
irb(main):001:0> \U+FFE3
```
と文字化け？になってしまった。
##結論
###*gem 'rb-readline'*
をGemfileに入れて
```
$ bundle install
```
を実行する。（こんだけです！）
##その他の方法
###rails console 日本語
でググると
https://qiita.com/irohiroki/items/c82657b5cb4bdb2aaac4
https://qiita.com/Kouch/items/8d556b735cb47941ea40
https://qiita.com/y-136/items/e52b3b4ce6afdb704fca
のように、readlineを正しいパスに通して、という記事かrubyを再インストールするという内容の記事が出てくると思います。
初心者の私にはこれを正しく実行するまでに時間がかかりました。
さらに、よくよく見てみると初めからreadlineは正しいパスを通っているようだったので、別の方法を探していたところ結論の方法に当たりました。
gemをいれるだけととにかく手間がないので、まずはこの方法試してみて、それでダメなら先輩方が紹介している上記方法を試して見たらいいのでは。
脆弱性情報をAWS Lambdaで取得してみたら

# 結論から言うと

- 人力で脆弱性情報を収集するのは大変だよ。
- MyJVN APIを使って脆弱性情報を取得してみた。
- ほとんど[こちら](https://dev.classmethod.jp/server-side/os/myjvn-api/)を丸パクリ（真似）させていただいた。

# きっかけ

仕事で脆弱性情報（OS、アプリ、NW機器など諸々）とかを収集して、ちゃんと対策しないと駄目だよ〜と言う流れになった。だけど、毎日NVDやJVNやJPCERTやCISCOとかのサイトに順番にアクセスして脆弱性が出ていないか目視でチェックすると言う運用に、いろいろ違和感を覚えたので、なんとかして楽できないかと考えていたところMyJVN APIの存在を知る。

MyJVN APIとは、JVN iPediaの脆弱性情報を検索するためのAPI検索情報を与えることで脆弱性情報の一覧や詳細をXML形式で受け取ることができるらしい。ベンダID、製品名、製品ID、CVSS深刻度、発見日/更新日/発行日などからフィルタリングが出来そう。

ちなみにJVNとは「Japan Vulnerability Notes」のことで、JPCERTコーディネーションセンターっていう組織と情報処理推進機構（IPA）っていう組織が共同で運営している、ソフトウェアの放っておくとヤバイ脆弱性に関する情報を公開しているサイトらしい。

なので、そうだ「MyJVN API」を使おう！と言うことになった。

# とは言えどうする？

・どこで実装する？
　どうせならAWS Lambdaで。

・どこに通知する？
　Rocket.Chat（社内で使っているSlack風なやつ）

・なる早で検知したいけど？
　１時間おきにAPI実行して当日公開された脆弱性があれば通知とか。

# 早速構築しようと思ったら

　既に「そのまんま」のことをやっている人がいたので、ほとんど丸パクリ（真似）させていただいた。

・MyJVN APIを利用した脆弱性情報収集
　[こちら](https://dev.classmethod.jp/server-side/os/myjvn-api/)

　変更させてもらったところは、メールでは無くチャットに通知する様にしたことと、一時領域を使い一回通知した情報は無視する（再度通知しない）処理を入れたこと。

# 出来たイメージ

<img width="991" alt="スクリーンショット 2020-01-06 22.14.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317297/52240cb1-f40f-24c8-8126-2e588f98a715.png">

<img width="1103" alt="スクリーンショット 2020-01-06 22.00.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317297/12311ffe-0345-44f2-62a8-089556c3ceec.png">

<img width="1102" alt="スクリーンショット 2020-01-06 22.03.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317297/94136e2e-7244-53d8-234f-1d431867cdb8.png">


# 結果

多分いろいろ楽になったと思う。
メンバー同士のコミュニケーションがうまれた。（個人の見解？などをコメントしてくれる）
みんな敬遠しがちだった脆弱性対応に若干の改善がみられた。
でもこれは脆弱性の把握〜対策までの運用プロセスの中で、あくまでも最初の段階。
ASP.NET Core Razor PagesでAreaを利用する


アプリを小さな機能グループに分割することで、開発の見通しが良くなります。この時に利用するのが、Areaです。Areaは一つのWebアプリケーションを複数の区分に分割するASP.NET Coreが提供する機能です。


## Areasフォルダを作成する

Areaを利用するには、まず、プロジェクトフォルダ直下に Areasフォルダを作成します。

すでに作成済みの場合は、スキップ。

## エリア名となるフォルダを作成する

このAreasフォルダの下に、エリア名となるフォルダを作成します。
例えば、エリア名を Operation としたい場合は、Areasフォルダの下に Operation フォルダを作成します。

そして、その下に Pages フォルダを作成します。

```
Areas
  Operaion
    Pages
```

上のようなフォルダ構造になります。

## _ViewImports.cshtml と _ViewStart.cshtmlを作成


次に上記Pagesフォルダ直下に、_ViewImports.cshtml と _ViewStart.cshtml の２つのファイルを作成します。

_ViewImports.cshtml の例を示します。（プロジェクト名が MyWebAppの場合）

```cshtml
@using Microsoft.AspNetCore.Identity
@using MyWebApp
@using MyWebApp.Data
@namespace MyWebApp.Areas.Operation.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
```

Viewで利用する名前空間が他にもあれば、@usingで追加します。

以下、_ViewStart.cshtml の例です。

```cshtml
@{
    Layout = "/Pages/Shared/_LayoutOperation.cshtml";
}
```

ここでは、_Layout.cshtmlではなく、別のテンプレートを使うように指定しています。UIのレイアウトを別のものにしたい場合は、この機能を使うと便利です。

/Areas/Operation/Pages/Shared/ の下に、_Layout.cshtml をおいても良いです。これは好みの問題かな。

## ページとページモデルを作成する

Areas/Operaion/Pages の下に、.cshtml と .cshtml.cs を作成します。
これは、特筆すべき点はありません。今までの通りViewとページモデルを定義すれば良いだけです。

これで、Areaが扱えるようになります。


## AreaのURLルーティング

ルーティングは、階層構造がそのまま利用されます。
例えば、/Areas/Operaion/Pages/List.cshtml の場合は、

```
https://localhost:5001/Operation/List
```

になります。（URLには、AreasとPagesは含まれません）
動的に読み込んだJavaScript内でchrome.extension.getURLを使う方法

## 問題点
Chrome拡張機能で拡張機能のアイコンをクリックしたときに必要なjsを読み込んだら、読み込まれた方のjsの中ではchrome.extension.getURLを使えなかった。

## 間違ったコード

```javascript:entry.js
appendScript("main.js");
function appendScript(url) {
    chrome.extension.getURL(url);
    const el = document.createElement('script');
    el.src = url;
    document.body.appendChild(el);
};
```

```javascript:main.js
chrome.extension.getURL("resource.jpg"); //TypeError: Cannot read property 'getURL' of undefined
```

## 正しいコード

appendChildの代わりにevalでそのまま読み込む。

```javascript:entry.js
appendScript("main.js");
function appendScript(url) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', chrome.extension.getURL(url), true);
    xhr.onload = e => {
        if (xhr.status === 200)
            eval(xhr.responseText);
    };
    xhr.send();
};
};
```

(2020/3/1追記)
あるいはpopupまたはbackgroudの中ではJavaScriptもCSSも読み込む用のAPIが用意されているので
sendMessaageと組み合わせればページ内に読み込むこともできそうです。

```javascript:popup.js（一部）
    chrome.tabs.executeScript(null, { file: "main.js" });
    chrome.tabs.insertCSS(null, { file: "main.css" });
};
```

## 参考
[こちら](https://groups.google.com/forum/#!topic/chrome-api-developers-jp/iS7_F71Av-c)の内容をまとめて記事にしました。
PHP 最初から存在する関数まとめ

# 目的

- 最初から組み込まれた関数の使用方法をまとめる

# 書き方の例

- 引数で与えられた文字列の文字数を返す組み込み関数`strlen`の書き方を記載する。

```php
echo strlen("文字数を調べたい文字列");
```

- 引数で与えたれた配列の要素の数を返す組み込み関数`count`の書き方を記載する。

```php
echo count(配列名);
```

- 指定したレンジの中からランダムな数字を返す組み込み関数`rand`の書き方を記載する。

```php
echo rand(下限,上限);
```

# 具体的な書き方の例

- 文字列`miriwo`の文字数を出力する処理を下記に記載する。

```php
echo strlen("miriwo");
```

- 変数`name`に格納された文字列の文字数を出力する処理を下記に記載する。

```php
echo strlen($name);
```

※この他にも、配列の要素の数を返す関数やランダムな整数を返す関数など様々な組み込み関数が存在する。
コミット訂正のgitコマンドをまとめる

# 概要
`git`での操作で、コミットした後に「あ！間違えた！」となるのはよくあることだと思います。
そうなった時のgit操作を自分なりにまとめてみます。。

#直近のコミットを訂正したい
直近のコミットを訂正したい場合には以下の手順で行います。

1. とりあえず間違ったコミットは無視して、正しい変更を行う
2. 以下のコマンドを実行する

```terminal
git commit -C HEAD -a --amend
```

`-C`は`HEAD`のコミットメッセージを使うことを意味しています。
`-c`にすることによって`エディタ`が開き別のコミットメッセージを書くことができます。
なので例えばコミットメッセージを間違えたり、もっといい書き方があったと思った時は

```terminal
git commit -c HEAD -a --amend
```
とすれば良いでしょう。

`git log`でみてみると履歴が綺麗になっていると思います。

直近より以前のコミットを修正したい場合は次のコマンドを使ってください。

#コミットを取り消す
コミットを取り消すには`git revert`を使います。
これは`既にあるコミットに含まれる変更を全て巻き戻す新しいコミットを１つ作り、コミットを１つ取り消します`。

使い方としては

```terminal
git revert <コミット名>
```
こうすることで指定したコミットを取り消し、取り消した旨のコミットが１つ追加されます。
つまりは、そのコミットでの変更は取り消されますが、そのコミットのログ自体は残ります。

また、`git revert`は1つしかコミットを指定できないので、複数する場合には`-n`をつけます。
こうすることで取り消した旨のコミットがステージングされた状態で待ってくれます。
なので複数`git revert`したい場合は

```terminal
git revert -n <コミット名>
git revert -n <コミット名>

git commit -m "コミットメッセージ"
```
のようになります。

#変更をリセットする
上記の`git revert`はコミットは取り消すが、ログは残ると記述しましたが、変更をリセットする`git reset`はログもなかったことにすることができます。

```terminal
git reset --hard HEAD^
```

上記は直近のコミットをリセットする例です。
こうするとコミットの変更は破棄され、ログからも消えます。

```terminal
git reset --soft HEAD^
```
とすることで、ステージングに戻すこともできます。

#まとめ
`git`でのコミットの訂正についてみてきました。
参考になれば幸いです。
Google OR-ToolsをVisualStudio2019でビルドしてみる

# Google OR-ToolsをVisualStudio2019でビルドしてみる

[Google OR-Tools](https://developers.google.com/optimization) を利用してみたかったのでVisualStudio2019でビルドしてみたのでメモをまとめておきます。

## 事前準備
- cmake 3.16  
  https://cmake.org/
- Visual Studio 2019 community  
  https://docs.microsoft.com/ja-jp/visualstudio/releases/2019/release-notes

## stableコードの取得とサンプルプログラムの実行
基本的には、[or-toolsのgithub](https://github.com/google/or-tools/blob/stable/cmake/README.md)の資料にある通りだが、私の環境だけなのか、上手くビルドできなかった所がありました。
1. コードの取得
デフォルトブランチがstableなので、そのままgit clone。
```git clone https://github.com/google/or-tools.git```   
2. cmakeコマンドでコード生成する
 ```cd or-tools
 mkdir build
cmake -G "Visual Studio 16 2019" -DBUILD_DEPS=ON ..
```
実はこれだけだとProtobufライブラリのテストコードのビルド付近でコケます。そのため、今回はビルドがコケる理由は一旦置いておいて、SKIPさせるために以下を行いました。
3. ProtobufライブラリのBUILD_TESTをOFFに
　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562620/64e40b10-9349-1bff-3218-0a94cbff2091.png)
再度、上記cmakeコマンドを実行します。今度は、この```-Dprotobuf_BUILD_TESTS=OFF```　がcmakeに渡されて該当のコケる処理をSKIPしてくれるため、めでたくortools.slnが同buildディレクトリに生成されます。
4. ortools.slnをVisualStudio2019で開き、ソリューションをビルド
5. Debug実行してみる
サンプルコードも一緒にビルドされるためrandom_tsp.exeをDebugモードで起動してステップ実行してみます。 
デフォルトではALL_BUILDプロジェクトがスタートアッププロジェクトに設定されているので、random_tspに変更する必要があります。
random_tspのプロジェクトをソリューションエクスプローラー内で右クリックして「スタートアッププロジェクトに設定」を選択します。その後は、Debugger実行をメニューで選べば以下の様にVisualStudio2019のステップ実行が確認できます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562620/04193f18-9f78-7ee1-0de8-e8e9360cb243.png" width=300>

## おわりに
Google OR-Toolsで最適化問題を解きたいと考えている人も多いと思います。Apache License 2.0で提供されています。Windowsアプリ開発者も積極的に利用できると良いですね。:smiley:
ローカル環境でVisualStudio2019上でビルドできたので、高機能なIDEの機能を活用してコード理解を深めることにつながればと思います。それにしてもProtobufがテストコードのビルドでコケるのは私の環境のせいなのか？時間があるときに原因を追究してみよう。

## 参照元
- [Google OR-Tools](https://developers.google.com/optimization)  
- [github](https://github.com/google/or-tools/blob/stable/cmake/README.md)

## 次回
今回ソースコードからビルドしたortools.libを利用してC++サンプルプログラムを別プロジェクトとして作成してみましょう。
チェックボックスがチェックできない

htmlのcheckboxでハマったのでメモ。

# labelの文字をクリックしてもチェックボックスが機能しない。

以下のような感じで書いたらlabelの文字をクリックしてもチェックボックスが動かない。
チェックボックスそのものをクリックすれば動く。

```html:test.html
<label for="">
  <input type="checkbox" name="" id="">
  <span>テスト</span>
</label>
```

なぜだ
labelの中にinputを入れたからforとidによる明示的な紐付けはいらないはず([MDN label](https://developer.mozilla.org/ja/docs/Web/HTML/Element/label))

# 答え

**labelにfor属性がついてたから**
labelのfor属性を取ってあげると動く。

あまりにも単純すぎて泣いた、、、
emmet使ってて自動でforついちゃって、あとでfor消そう〜とか横着してるとこういうことが起きます。
Q1.ExcelVBAを始めるには？

ExcelVBAの始め方について解説します。
5分程度で、できることですのでぜひやってみてください。


では、早速ですが、Excelを立ち上げて見てください。
ちなみに僕は2016を使っていますが、どのVersionでも概ね同じです。


![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560479/e3af3dc1-a0af-8028-036d-ec379d6026d4.png)



上の画像のように開発タブから、Visual Basicを押せば、簡単にVBE(エディタ)を起動することができます。


しかしながら、普段使っていない人の環境では、表示されていない可能性が高いので、
今回はこのように表示されていないケースを表示して、どのようにしたら表示できるかについて説明します。


[ファイル]　→　[オプション]　→　[リボンのユーザー設定]から下記のような画面へ移ります。

![無題1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560479/4a65ae1d-3332-048c-2a39-9370d18b1ab3.png)


そうしたら、図のように開発のチェックボックスにチェックを入れるだけ。
これで、あなたはすぐにVBAを始めることができます。