OmniAICreator/Qiita-1.07M huggingface dataset:
【入門】TypeScriptの型一覧

今更ながらTypeScriptを学び始めたので、復習がてらどんな型が指定できるのか、まとめました。
TSでは基本的に型は変数の後ろや引数、戻り値に対してつけていきます


#boolean

```.ts
let hoge: boolean = true;  
````

# number

```.ts
let hoge: number = 10;  
```

# string

```.ts
let hoge: string = 'apple';  
```

# Array

```.ts
let animal: string[] = ['dog', 'cat', 'bird'];
```

# Object

Object型だけはinterfaceというものを使って型を指定します。
interfaceとはメンバーや型の定義だけ持つものです。

```.ts
interface Hoge {
  name: string,
  age: number
}

let hoge: Hoge = {
  name: 'Keisuke',
  age: 27
}
```

# tuple
Arrayをもっと厳格にしたもの

```.ts
let hoge: [string, number, boolean] = ['Keisuke', 27, true];

// このような型が異なる代入はできない
hoge[0] = 10;

// これならOK
hoge[0] = 'Taro';
```

# enum
enumで列挙したグループ以外は受付なくなります。

```.ts
enum PotatoSize {
  SMALL = 'SMALL',
  MEDIUM = 'MEDIUM',
  LARGE = 'LARGE',
}

const potato = {
  size: PotatoSize.SMALL
}

// これだとエラー
potato.size = 'MEDIUM';

// これならOK
potato.size = PotatoSize.MEDIUM;
```

# any
なんでも入る。TSからJSの扱いになる。
基本使わないほうがよい。

```.ts
let anything: any = 10;

// なんでも入るので、以下エラーは発生しない。
anything = 'apple';
anything = true;
anything = ['a', 'b'];
```

# Union
複数の型を指定可能。

```.ts
let union: number | string = 10

// これらはエラーしない
union = 5;
union = 'apple';

// これはエラー
union = true;

// 配列の場合以下の通り
let unionArray: (number | string)[] = [10, 'apple']; 
```

# Literal
```.ts
const apple: 'apple' = 'apple';

//appleしか入らないのでエラー
apple = 'banana';
```

# 型推論と型注釈
基本的にTSでは上記の用に型を指定しなくても代入された値から型を推論してくれます。（型推論）
そのため冗長に型推論してくれる場合はいちいち記述はしなくてもOKです。

VSCODEで変数hogeにマウスカーソルをhoverすると型が推論されていることがわかります。

![スクリーンショット 2020-10-03 9.50.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491279/a08852cd-4a7a-cb1b-6fe2-74f1bdeebabe.png)

string以外を代入しようとするとエラーが発生します。

![スクリーンショット 2020-10-03 9.50.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491279/8cf2d642-3d35-2ca1-9e22-ff7a50beccbd.png)

それではいつ型注釈をつかうのでしょう？
型指定（型注釈を利用するかというと）するのは型推論できないときだけでOKです！

以下、例です
これだと変数hogeにどんな型でも入ってしまうので。


![スクリーンショット 2020-10-03 9.49.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491279/f3aed766-3e71-12bb-9207-4c94f837d859.png)

こんな感じで型を指定してあげる必要があります。

![スクリーンショット 2020-10-03 9.49.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491279/d297d282-71dd-4abe-e12a-c5e08fb379f2.png)

関数の引数などは型推論できないので指定する必要があります。

# 関数（戻り値あり）
引数と戻り値に型をつけられます。
()の後ろに返り値の型を指定できます。
戻り値は型推論してくれますが、引数はなにもつけないとany型になるので必ずつけます。

```.ts
function calcAdd (num1: number, num2: number): number {
  return num1 + num2;
}
```

# 関数（戻り値なし）
何も返さないときはvoidを書かなければならない。

```.ts
function logOutput (): void {
  console.log('Hello World!!')
}
```

# まとめ
基本的な型をざっとまとめました。
他にも、typeエイリアスを使って型をまとめたり、class型を使ったり、never型とかundefined型とかいろいろありますが、今回は書いていないので、もっと知りたい人はこの辺調べてみてください。

公式: https://www.typescriptlang.org/
DockertoolboxのインストールからVue-cli設定まで

#1 この記事は
Windows10にDocker環境を構築するときの個人的メモです。具体的には、Raspberrypi環境をwindows上に構築したい。

#2 Imageのpullからコンテナの作成まで

###2-1 docker toolboxのインストール

Window10 homeでは、Docker for windowsはインストールできない。代わりにDocker toolboxをインストールする。
[Docker toolboxのインストール手順](https://qiita.com/KIYS/items/8ac37f6757a6b7f84569)

###2-2 Imageを取得する

(1) まずは、Raspi上で構築したDocker環境のImageファイルを生成し、Docker Hubにアップロードします。[やり方はこちら](https://qiita.com/NT1123/items/03f09812e88fe28b3a5e#10-docker-hub%E3%81%AB%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8%E3%82%92%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89%E3%81%99%E3%82%8B)
(2) アップロードしたDocker ImageファイルをDocker Hubよりダウンロードします。[やり方はこちら](https://qiita.com/NT1123/items/03f09812e88fe28b3a5e#10-docker-hub%E3%81%AB%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8%E3%82%92%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89%E3%81%99%E3%82%8B)
(3) Raspberry Piで生成したImageファイルをWindows Docker上でも動作できるように必要なライブラリをインストールします。[やり方はこちら](https://qiita.com/NT1123/items/06794fd0435df5eefce4)
$ docker run --rm --privileged multiarch/qemu-user-static --reset -p yes


###2-3 Host(Windows)とコンテナでフォルダを共有する。

(1) Oracle VM VirtualBoxマネージャーを立ち上げ、仮想マシンを電源OFFにします。
![132.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/b3f52cdf-f2a6-ae5b-aceb-3caee392eb86.jpeg)

(2) Oracle VM VirtualBoxにて、設定→共有フォルダー→C:\Usersになっていることを確認します。
![133.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/2351e95c-ad8a-bb4e-cca1-593f97fcaae4.jpeg)

(3) Docker toolbox上でImageからコンテナを作成時に共有ディレクトリの設定も同時に行います。

ホストをファイル共有を行うコンテナを作る。複数ポートを空けたい時は、--publish 91:91 --publish 3000:3000とする。

[ホーム] /c/Users と[コンテナ内] /homeでファイルを共有する方法
<b>構文</b>
docker run -v [共有を行うホームのディレクトリ]:[共有を行うコンテナのディレクトリ] -it --public xx:yy [イメージ] bash

「-m 4g」はコンテナにメモリ4Gを割り当てる
 
```console:例文
docker run -m 4g -v /c/Users:/home -it --publish 91:91 --publish 3000:3000 resin/rpi-raspbian:latest bash
```


#3 Vue-Cli環境の構築

###3-1 Vue-Cliのインストール

Raspberry Pi上でVue-Cli環境をインストールしていた場合でも、WindowDocker上ではすでにVueCli環境は用意できていますが、正しく動かないこともあるので再度インストールしたほうがいいです。

・こちらの記事に従いVue-Cli環境をインストールします。
→　[12-vue-cliのインストール](https://qiita.com/NT1123/items/fda5c66f9ffdba878c8a#12-vue-cli%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB )
→  [7-vue-cliでローカルサーバーを立ち上げ](https://qiita.com/NT1123/items/03f09812e88fe28b3a5e#7-vue-cli%E3%81%A7%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%92%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92)

<b>Error: Cannot find module 'webpack'</b>と表示される場合、下記を実施するとOK(グローバルインストールを行う)

```console:Dockertoolbox
npm install -g webpack 
```
###3-2 サーバー立ち上げ確認

・Docker toolbox上でdocker-machine ipを入力し、コンテナが動作しているIPアドレスを入力する。[解説はこちら](https://qiita.com/jusotech10/items/b292ac38197926fc6afa)

```console:Dockertoolbox
$ docker-machine ip
xxx.xxx.xxx.xxx
```

・Docker toolbox上でコンテナを起動させ、Vue-Cli上にて<b>npm run dev</b>を実行しWebサーバーを起動させます。
・ブラウザを立ち上げ、http://xxx.xxx.xxx.xxx:yy (xxx.xxx.xxx.xxxはdocker-machine ipで調べたIPアドレス、yyはVue-Cli用にオープンしたport番号)と入力するとVue-Cliのフォーマットページが閲覧できます。
![134.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/46e71b22-b4aa-cf9e-a308-f340e192ea4b.jpeg)
IBM MTM 2020 接続まとめ

# IBM MTM 2020 接続まとめ

# はじめに

IBM MTM 2020 Learning Systemを始めたものの、今年はVSCodeを使う必要があり、いつもの3270エミュレータと勝手が違うのでメモします。
昨年も同様の記事を書いていますので、接続方法だけ見たい人は一番下をお読みください。

# IBM MTMとは？

IBMが毎年開催している学生向けにメインフレームに親しんでもらおうというイベント（コンテスト）です。
日本IBMではメインフレーム・コンテストと呼んでいるようです。
WWではMaster the Mainframe と呼んでいます。
本来は学生がメインフレームに触る機会を提供する場ですが、社会人にもLearning System として環境が提供されています。

# IBM MTMで習得できること

メインフレームにおけるファイル操作や簡単なスクリプトを学びます。
**今年は全部やり切っていないので正直どんな課題が出てくるか楽しみな状態です**
わかる人向けにいうと、TSO/USSにVSCodeとZoweというAPI接続を使用してTSO/USSの操作を行い、★まだ課題をやっていないのでわかりませんが★EBCDICの作りや数字の表し方(パック十進数),COBOLコーディングなどを行います。
なお、Part Two, Part Three を修了すると、IBMからデジタルバッジがもらえます。
2020年はポイント獲得制になっており、現在の自分の順位がわかります。私は今みたら1302位でした。おおっ、がんばるぞ！という気になります。

# IBM MTMでできること

2020年10月現在、まだ私はLevel2の途中なので、「VSCode＋Zowe Explorer」でモダンな？インターフェースでメインフレームを操作（まだJCL Submitだけ）ができる、ということしかわかっていません。
ただ、3270で育った人にはモダンなインターフェースでメインフレームを触る、ということが学べてとても勉強になります。
VSCodeでどこまでできるのか、どんな課題が出るのか楽しみです。

# IBM MTM Learning System への登録

登録方法を失念してしまい恐縮ですが、以下のURLのGet Startedあたりと思います。
https://www.ibm.com/it-infrastructure/z/education/master-the-mainframe

# 課題のURL
たぶんここ↓
進捗に応じてロックが解除される方式なので、登録しないと見えないかもしれません。
https://mtm.masterthemainframe.com/


# 接続準備
（詳細はMTMのほうが詳しいので、大事なところだけ）
- VSCodeをインストールする
- node.jsをインストールする
- VSCodeのExtensions（ctrl + shift + x）で Zowe Explorer をインストールする
- VSCodeのExtensions（ctrl + shift + x）で IBM Z Open Editor をインストールする

# 接続先
- 左下Zoweアイコンを選択
- 左側メニュー上 DATA SETS の右隣の「＋」をクリック
- "Choose Create new..."というボックスの下「+ Create a New Connection to z/OS」を選択
- Connection Name は・・・MTM2020かなにかお好きなものを入力
- Profile Type　→　zosmf
- 接続先（Enter a z/OS URL）は *https://192.86.32.153:10443*
- ユーザー名は事前にIBM MTMから割り振られたものを入力
- パスワードは入れても入れなくても。入れておくと次回から省略可能。
- 「Reject Unauthorised Connections」は「False」にして自己署名証明書をOKとしておく。「True」だと次回から接続できなくなって困ったので。
- the base path...は空enterでok
- the encoding ...も空enterでok
- a maximum amount ... も空enterでok
- 以上で接続okのはず
- ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254627/e5f99c5d-ecf1-d4a1-5ecf-0b33aa19cc99.png)


「DATA SETS」の下「MTM2020」が展開できればokです。
私はここで何回かつまずいて、画面右下にZowe Serverに接続エラー的なメッセージが出たので、DATA SETS内のえんぴつマークをクリックして接続先を修正しました。勝手に「https://」が削除されていました。なんでだろう？

# 接続先プロファイルの削除
ちなみに接続先をスッキリきれいにしたいと思ったときは、

- View
- Command Palette... (Ctrl + Shift + V)　から
- Zowe:Detele a Profile Permanently...

できれいにプロファイルが削除されます。
（アンインストール/インストールだとどこかにデータを残しているらしく、復活します）


VSCode＋Zowe ExplorerからSDSFやREXXをどう操作するのか楽しみです。
Shopify初心者あれこれ(雑多編)

## 前書き
最近、業務でShopifyを触ることが多いです。
WordPress含め、CMSはまったく触ったことがなかったので、慣れるのに時間がかかりました。
初歩的なことばかりですが、メモ&共有のために残しておきます。

## コレクション
>商品をコレクションにグループ化して、カテゴリ別に商品を見つけやすいようにします。作成するコレクションの例を次にいくつか示します。
https://help.shopify.com/ja/manual/orders/status-tracking/customize-order-status/add-conversion-tracking

いわゆる「カテゴリ」のことですね。手動で作ったり、条件を設定して自動で作ったりできます。

## 会員登録機能
Shopify標準で、ストアの会員登録機能が備わっていて、有効・無効にすることができます。
管理画面左下の設定→チェックアウト→顧客アカウント→アカウントを任意にする
参考: https://help.shopify.com/ja/manual/customers/customer-accounts

## {% ~~~ | ~~~ %}
>Liquid filters
>Filters are simple methods that modify the output of numbers, strings, variables and objects.
https://shopify.dev/docs/themes/liquid/reference/filters

「フィルター」です。変数やオブジェクトなどに対して設定し、値を加工して出力することができます。

```
<!-- product.title = "Awesome Shoes" -->
{{ product.title | upcase }}
→
AWESOME SHOES
```

いろんな種類があるので、都度使ってみると理解が深まると思います。
(というか、使ってみないとよくわからない)

## 後書き
雑多すぎますね(笑)随時書き足していきます。
GitHub CLI正式リリース！ どんなことができるか紹介します！！

# はじめに
はじめまして、youtuber系エンジニアのやっすんです！
GitHub CLIが正式リリースされたので、実際に触れ、便利なところをまとめました！

同内容はYoutubeでも説明してるので、ぜひチェックください！

[【YouTube動画】GitHub CLI](https://youtu.be/_JCjpNdUCJo)
[![GitHub CLI](https://img.youtube.com/vi/_JCjpNdUCJo/0.jpg)](https://www.youtube.com/watch?v=_JCjpNdUCJo)


# GitHub CLIとは
GitHub CLIはGitHub公式のコマンドラインツールです。
対話的にレポジトリやPR, issueを作成できます！
その際 .gitファイルのあるローカルのディレクトリで、コマンドを実行します。
元はhubから派生したプロジェクトのghがGitHub CLIとなったため、hubを使っている人は移行する意義を感じないかもしれません。
hubを使ってる人向けにも、違いを説明します！

## GitHub CLI vs Hub
大きくは以下の表のような違いがあります。
GitHub CLIは、GitHub公式のプロジェクトなので、今後もメンテナンスや機能追加を期待できます。
対して、Hubは開発者のミスラフさんがGitHub CLIに移行したため、今後どうなるか不明です。
ただ、GitHub CLIと比べフォーマットが豊富で、PR一覧時にPRのURLも表示できます！ (GitHub CLIではできない...)

GitHub CLIやHubの誕生秘話やミスラフさんの複雑な心境など [The past and the future of hub](https://mislav.net/2020/01/github-cli) に詳しく書かれているので、興味のある方はぜひ読んでみてください。

| GitHub CLI | Hub |
|:------------:|:------------:|
| 公式 | 非公式 |
| 対話的にPRやIssueが作れる | フォーマットが豊富 |

[参考]
https://mislav.net/2020/01/github-cli

# インストールと主なコマンド
brewをインストールできる環境の場合、以下で一発です。

```bash
$ brew install gh
$ gh --version
gh version 1.0.0 (2020-09-16)
https://github.com/cli/cli/releases/tag/v1.0.0
```

## PR/Issueのリスト表示
ghコマンドでは、pr/issue/repoの後にコマンドを入力し、実行します。
-lオプションでラベル名でフィルタリング、-aで割り当てられたユーザー名でフィルタリングできます！

```bash
$ gh pr list -l <ラベル名>
$ gh pr issue list -a <ユーザー名>
```

## PRのチェックアウト
リモートにfeature/hogeというPRがあるとします。

ghでは、listコマンドでPRの番号を確認した後に、以下を実行しチェックアウトできます。

```bash
$ gh pr checkout <番号>
```

ちなみに、ghを使わない場合は次のようになります。
ghだと楽ですね。

```bash
$ git fetch
$ git checkout -b <適当なブランチ名> remtoes/origin/feature/hoge
```

## リポジトリのクローン
hubの目的の1つにクローンの簡略化があったそうです。
GitHub CLIにも引き継がれています。

```bash
# ghを使う場合
$ gh repo clone <owner>/hoge.git

# ghを使わない場合
$ git clone git@github.com:<owner>/hoge.git
```


## PR/Issue/Repoの作成
GitHub CLIはGitHub APIの機能を使えるため、PR作成もできます！
しかも対話的に簡単に作ることができます。

```bash
# リポジトリ作成
$ gh repo create

# PR作成
$ gh pr create

# Issue作成
$ gh issue create
```

他にも便利そうなコマンドがあります。
[公式Document](https://cli.github.com/manual)は大変読みやすいので、気になる方は読んでみてください。


# まとめ
今回GitHub CLIについて紹介しました。
もう少し説明して欲しいところや、こういう使い方便利だよという意見があれば、コメントください！

[twitter](https://twitter.com/yassun_youtuber)や[youtube](https://www.youtube.com/channel/UCajrdoGzHzDogrNrLYYmGsg/featured?view_as=public)でのコメントもお待ちしています！
Pug資料置き場

# 概要
困った時にすぐに確認出来るように資料置き場として作成しました。

## JadeからPugへ
2016年3月にJadeからPugへ名前が変わった。

## 資料置き場
・[公式サイト](https://pugjs.org/api/getting-started.html)
・[Pug npm](https://www.npmjs.com/package/pug)
・[Pug 文法](https://du-masa.github.io/study-frontend/pug/pug-lang.html)
・[Pug 環境構築](https://du-masa.github.io/study-frontend/pug/pug-env.html)
・[Pug（Jade）って何だ？特徴や基本的な使い方の解説](https://kumaweb-d.com/web/basics-of-pug/)

※メモ
弊社が採用しているフレームワークのフロントのレンダリングを弊社のライブラリでラップしているっぽい
HTMLで簡単にコードを書く方法

HTMLで簡単にコードを書く方法について書いていきます。(VSCode使用)

1 .hhと入力し、エンターを押すと、hhクラスができる。

2 .hh*3でエンターを押すとhhクラスが3つできる(*3が×３をしているため)

3 ul.hhで、エンターを押すと、ulのhhクラスができる

4 シャープ + hhでエンターを押すとid属性のhhができる


5 ! でエンターを押すとhead,bodyなどの枠を作成できる
  
          
6 link:cssでエンターを押すとlink relとhrefがデフォルトで作成できる
Shopify初心者あれこれ(購入完了ページにスクリプトを埋め込む)

## 前書き
最近、業務でShopifyを触ることが多いです。
WordPress含め、CMSはまったく触ったことがなかったので、慣れるのに時間がかかりました。
初歩的なことばかりですが、メモ&共有のために残しておきます。

## 本題
管理画面→設定→チェックアウト→注文処理→追加スクリプト　に下記のように記載。

```
{% if first_time_accessed %}
  <script type="text/javascript">
    // ここに処理を書く
  </script>
{% endif %}
```

## 後書き
チェックアウト関係のページのファイル(checkout.liquid)は、Shpoify Plusプランでないといじることができないようです。代わりに上の項目が用意されているんですね。
使いそうなLiquidオブジェクトについては、参考ページをご覧ください。

## 参考
・Shopifyでのトラッキング設定の基本
https://threedotfive.jp/117

・注文状況ページをカスタマイズする(スクリプトを追加する)
https://help.shopify.com/ja/manual/orders/status-tracking/customize-order-status

・初回訪問時にのみスクリプトを実行する
https://help.shopify.com/ja/manual/orders/status-tracking/customize-order-status/first-time-accessed

・開発ストアでの注文のテスト
https://help.shopify.com/ja/partners/dashboard/managing-stores/test-orders-in-dev-stores

・The checkout object
https://shopify.dev/docs/themes/liquid/reference/objects/checkout

・The order object
https://shopify.dev/docs/themes/liquid/reference/objects/order

・The shop object
https://shopify.dev/docs/themes/liquid/reference/objects/shop

・注文状況ページにコンバージョントラッキングを追加する 
(Google Analytics・Facebookピクセルなど)
https://help.shopify.com/ja/manual/orders/status-tracking/customize-order-status/add-conversion-tracking
Gitのリモートブランチの追跡を解除する方法

Gitでローカルブランチとリモートブランチの紐づけを解除するコマンドを毎回忘れるので、自分用のメモ

```
git branch --unset-upstream {ローカルブランチ名}
```

## 参考サイト

- [Git のトラッキングブランチの確認と設定方法](https://yu8mada.com/2018/08/11/how-to-confirm-and-set-up-tracking-branches-in-git/)
【番外】組み込みエンジニアに求められる資質

# TL;DR
組み込み業界では、動かないのがあたりまえ。動かすのは自分たちなんだ！

# はじめに
組み込みエンジニアに求められる資質は、下記だと思っている。

```
ハードウェアとソフトウェアの両方を垣根なく見れること
```

# 組み込み業界では、動かないのがあたりまえ。動かすのは自分たちなんだ！

## 組み込み環境は本当に地獄だぜ、ﾋｬｯﾊｰ

組み込みにおいてはCPUから各種部品まで、くっつけただけでは**（ある意味）動かないのが当たり前** です。

それぞれの部品にはそれぞれの初期化処理なんかがあって、その通りに動かせば動く **はず** です。

なぜ**はず**か？

その処理シーケンスは、それぞれの部品が**理想的な状態**で動かすときの手順なので、現実の部品とつなぐには問題が生じる場合もある。

例えば自作PCだと「相性」って言われる問題ですね……

## 組み込み環境で動かすのは自分たち

組み込み環境で物が動かないならば、(1)自ら現象を調査し、(2)仮説を立て、(3)検証し、問題を１つずつつぶしていかなければならない。

特に、ハードウェアに関するトラブルだと「こっちのはんだ付けが甘かったッス！」なんていうことも可能性として否定しきれない。

# そのほかの業界との共通点・相違点

## 共通点

- 基本的な知識は流用可能なものが多い。
    - セキュリティ
    - ネットワークプロトコル
    - 画像処理や音声処理

## 相違点

- 障害調査は「まずこれは正常動作するデバイスですか？」から始まる。
    - もしかすると、そもそも正常動作しないハードウェアかもしれない。
    - もしかすると、そもそも正常動作しないソフトウェアかもしれない。
    - もしかすると、そもそも正常動作しない設定かもしれない。
- 同じソースコードが、同じバイナリを出力するとは限らない
    - x86で正常動作したソースコードだから、ARMv8-Aで正常動作するはずだって？あははは、そんなわけ・・・ないのですよ・・・
    - GCC 9で実績あるソースコードだから、clangでもうごくはずだって？あはははは（涙）
    - なぜ　あなたは　古いマイコン　ソースコード　別のマイコン　動く　考えたですか？
- 部品にはEOL(End of life)がある。
    - 組み込みで利用している部品は、供給が止まることがある。つまり、EOLとかディスコンとか。
    - その前に大体部品を探して切り替えるなどの対応が必要になる。
    - 最悪「部品供給されなくなったので、製品終了です」
- 製品にはEOL(End of life)があるはずなんだけどなあ…
    - ものすごーくながーく使ってくださるお客様もいる。ありがたいのはありがたいのですが…
- 製品依存で流用できない知識も少なくない
    - このボードだけの仕様です、みたいな話は否定しきれない。
    - 別ボードになったら使えなくなります、とか辛いですね

# まとめ
組み込みの仕事で最も大切な事は、これだと思う。

```
ハードウェアとソフトウェアの両方を垣根なく見れること
```

そのうえで…

- 組み込みの仕事は、多分これから先もある程度はなくならない。
- だからといって右肩上がりに儲かるという話でもない。
- 色々、色々！！考えましょう！！
npm WARN npm npm does not support Node.js vXX.X.X と出る場合の対処法

# npm WARN npm npm does not support Node.js vXX.X.X と出る場合の対処法
npm installしたときに以下のように出る場合の対処法

```
>npm i
npm WARN npm npm does not support Node.js v14.6.0
npm WARN npm You should probably upgrade to a newer version of node as we
npm WARN npm can't make any promises that npm will work with this version.
npm WARN npm Supported releases of Node.js are the latest release of 6, 8, 9, 10, 11, 12.    
npm WARN npm You can find the latest version at https://nodejs.org/
...
```
メッセージそのままの問題が起きていて、node.jsとnpmのバージョンが合っていない。

# 合っているバージョンの確認方法
nodejsのバージョン確認

```
node -v
```

npmのバージョン確認

```
npm -v
```

nodejsとnpmのバージョンがそれぞれわかったら下のサイトを参照し、
nodejsのバージョンとnpmのバージョンの対応関係を確認し、
正しいバージョンの組み合わせに修正すれば解決する。


リリース一覧 | Node.js
https://nodejs.org/ja/download/releases/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304938/7e0fc107-85d7-2cdc-5e2d-1b114047ece5.png)
Shopify初心者あれこれ(新しいページをつくる)

## 前書き
最近、業務でShopifyを触ることが多いです。
WordPress含め、CMSはまったく触ったことがなかったので、慣れるのに時間がかかりました。
初歩的なことばかりですが、メモ&共有のために残しておきます。

## 本題
1. オンラインストア→テーマ→アクション→コードを変更する→Templates→新しいtemplateを作成する 
目的：Page 名前：about　→Templates/page.about.liquidが作成される。

2. <section class="entry-content">タグの中に直接ページ内容を記載、もしくは、Sections/にファイルを追加した上で、{% section 'template--product' %}などで読み込む。 
ちなみに、デフォルトで<section class="entry-content">の中に{{ page.content }}という変数があるが、これについては後述。 

3. 管理画面→オンラインストア→ページ→右上のページを追加、タイトル(ex)アバウトページ)とコンテンツを入力して保存する。ここで"コンテンツ"に入力した内容が、{{ page.content }}に反映される。 
また、右の"テンプレート"という項目で、先ほど作成したテンプレートファイルを選択する(page.about)

4. 管理画面→オンラインストア→メニューで、例えば、"メインメニュー"を選択、名前を入力して、リンクで"ページ"を選択すると、先ほどページの作成でタイトルに入力した値(ex)アバウトページ)が表示されるので選択、メニューを保存。 
すると、"メインメニュー"を採用している箇所に、リンクが追加され、ページには先ほど記載した内容が表示される。

ここで「"メインメニュー"を採用している箇所」と表現しましたが、これは、
管理画面→オンラインストア→テーマ→カスタマイズ→セクション→Headerなどの中で、メニューを選択する項目(MENUS)があり、ここで"メインメニュー"や他のメニューを選択する感じです。

## 後書き
今回のテーマのように、公式を見ても、意外にぴったりと欲しい情報がなかったりします。
HTMLのiframeでfocusする／しないで枠の色を変える（FireFox版）

# 目的

- HTMLでiframeでfocusするしないで枠の色を変えたいです。
- iframeを選択するCSSの`:focus`はうまくいきませんでした。
- FireFoxではうまくいきましたがsafari/chromeではうまくいっていません。
- これは自分のための備忘録です。他のブラウザでうまくいく方法があれば更新していきたいと思います。

# 環境
- 以下でうまくいきました
- FireFox(81.0 (64 ビット)) / MacOS
- safari/Chromeはうまくいっていません

# 参考

[【JavaScript】ウィンドウのアクティブ・非アクティブのイベント【865日目】](https://www.nyamucoro.com/entry/2020/02/25/212939)
[フォーカス: focus/blur](https://ja.javascript.info/focus-blur)

# コード

- メインのHTML
- メイン側では要素の枠は消しておきます。

```{main.html}
...
bootstrapを使っています。
...
 <iframe id="ifrm"  src="https://hogehoge/ifrm_canvas.html" width="650" height="518" scrolling="no" frameborder="0"></iframe>                                                                                                                              
...
```

- インフレームの読まれる側のHTML

```{Infrm_canvas.html}
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>CANVAS</title>
</head>
<body>
  <canvas width="624" height="500" id="canvas" ></canvas>
  <script src="/js/ifrm_canvas.js"></script>
</body>
</html>
```


- 呼ばれる側のJavaScript

```{ifrm_canvas.js}
const canvas = document.getElementById("canvas"); 
function focus() {
  canvas.style="outline: 2px solid orange";
}
   
function blur() {
  canvas.style="outline: 2px solid gray";
}  
window.onload = function () {
  document.addEventListener("blur", blur, true);
  document.addEventListener("focus", focus, true);
}
```

#### 説明
- `main.html`の中の`inframe`で読まれた側のJavaScript`infrm_canvas.js`)でfocus()とblur()のイベントを検知して枠色を変えています。
VSCode内のディレクトリを複数選択する方法(mac用)

VSCode内にあるディレクトリ複数選択の方法について書いていきます。(mac用)

複数選択する場合、comandキー ＋ Dキーを押したまま、コピーしたいディレクトリの一つを選択します。

この時、初めの一つを選択する際は、comandキーを押したままにしながら二つ目、三つ目と選択していきます。:thumbsup_tone1:

ディレクトリ複数選択後は、右クリックでディレクトリーをコピーして移動したいところに貼り付ければ完了です。:smile:
スライス

#':'
':'を用いいてスライス(slice)表記が可能である。aを配列とするとa[i:j:k]は、第i番目の要素からj-1番目の要素まで、k-1飛ばしの部分配列という意味になる。i,j,kは省略可能で、iの既定値は0,jの既定値はnp.alen(a)つまりaの0軸に沿った長さ、kの既定値は1である。

[:4]

Pandasで0から3番目までのカラム名を取り出す
features = df.columns[:4]
Mbed StudioでMbed OS以外のライブラリも共有してSharedにする

# Mbed OSの共有機能
Mbed Studioで1GBほどあるOSのコードを複数プロジェクトで共有することでストレージの圧迫を防ぐ機能が追加されました

- [Managing libraries](https://os.mbed.com/docs/mbed-studio/current/manage-libraries/index.html) (Using a shared instance of Mbed OSの項目)

# Mbed OS以外のライブラリへの転用
Mbed OSの共有だとストレージの圧迫を防ぐことが主かもしれませんが複数のプロジェクトで使用している開発中のライブラリが個人開発してる規模の小さめのライブラリなどであればGitなどを返さずにほかのプロジェクトにも反映されるのは割とうれしいことだったりするかもしれません
~~(ロボコンの開発中にいちいちGit操作するのが面倒だっただけ)~~

プロジェクトごとにライブラリを用意した場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207366/40fd93d8-b2da-5d17-0e4a-25f7f8d62e6b.png)

ライブラリを共有した場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207366/2def352a-dab3-f28c-de36-c6599bb187a2.png)
常に一か所からライブラリを参照する

# やること
フォルダのジャンクション機能を使ってリンクさせます
Windows環境以外でもジャンクション機能を使えば同じことはできるはず(確認してません)

# 方法
参照元となるライブラリを置いておくフォルダを作る。
Mbed Studioのプロジェクトにおいておけば更新とか楽なので「ShareOS」とか適当なプロジェクトを作ってライブラリをダウンロードする
<img width="1280" alt="image.png (148.2 kB)" src="https://img.esa.io/uploads/production/attachments/7911/2020/10/02/35899/931b781c-fb9e-4fe5-94a8-444bcaaeeeb4.png">

ライブラリのリンクを行いたいプロジェクトのディレクトリ↓でコマンドプロンプトを開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207366/5d0dcdbf-33d0-ba62-3fba-71bafe0c6dd5.png)

以下のコマンドでジャンクションを作成
```
mklink /j <ライブラリ名> <参照元のディレクトリの完全パス>
```
今回の例だとこんな感じ
```
mklink /j ArduinoUsbHostShield "C:\Users\<hoge>\Mbed Programs\ShareOS\ArduinoUsbHostShield"
```
```Mbed Programs```みたいな空白が入ってるディレクトリ名はコマンドの区切れ目と認識されるのでパスは```" "```でくくる

ジャンクションが作成されましたと出ればOK

ショートカットと同じマークがついたディレクトリが作成されている
<img width="943" alt="image.png (57.6 kB)" src="https://img.esa.io/uploads/production/attachments/7911/2020/10/02/35899/d7a72872-e6d1-472e-a920-0a240260fc84.png">

あとはライブラリとして認識させるために```<ライブラリ名>.lib```ファイルを参照元からコピペしてくる
<img width="932" alt="image.png (60.5 kB)" src="https://img.esa.io/uploads/production/attachments/7911/2020/10/02/35899/a18cf4b8-1ad4-4e12-91bd-2f4e0b6d1b2f.png">

完成
<img width="1280" alt="image.png (260.5 kB)" src="https://img.esa.io/uploads/production/attachments/7911/2020/10/02/35899/0dee237a-5f17-4ac0-a817-e5bad13df117.png">

# バッチファイル(.bat)で作業を簡単にする
以下を文字コードShift-JISで保存

```mbedliblink.bat
@echo off
cd %~dp0

if exist "%1" (
    set varlibpath=%~f1.lib
    REM echo フォルダ発見
    REM echo 必要ライブラリファイル名: %varlibpath%
    if exist "%varlibpath%" (
        REM echo ライブラリファイル発見
        echo ジャンクションを作成します
        mklink /j %~n1 "%~f1"
        echo ライブラリファイルをコピーします
        copy "%varlibpath%" "%~dp0%~n1.lib"
        echo 作業が終了しました
        goto end
    ) else (
        echo ライブラリファイルが見つかりません
    )
) else (
    echo 有効なパスではありません
)

:end
PAUSE
exit /b 0

```

このバッチファイルをライブラリのリンクをしたいディレクトリに置く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207366/dd944ec0-22da-682a-b7ce-ae9551366374.png)

バッチファイルを置いたディレクトリ(左)とライブラリを置いてるディレクトリ(右)を開いてライブラリのフォルダをバッチファイルにドラッグ&ドロップする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207366/c1bc7bad-1cc0-0bef-bdde-bd898b877477.png)


ライブラリがリンクされた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207366/5464f748-c2e5-8099-f84a-ee62071e8d25.png)
サムスンの液晶

2003年くらいのディスプレイ(172MP)。下のほうに黒い線が出るようになってしまいました。NTSCも入力できるので、ちょっと残念です。

![IMG_20201002_085639.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/98aa01fd-1141-f43b-c2cd-8f61fad08dff.jpeg)

分解して見たら、SOCみたいに大きなディスプレーコントローラが使われていました。

まったく表示できないわけでもないのでichigojamなんかで使ってみようかと思います。

2015年の購入したLenovoのノートパソコン(B50-30)のLCDです。そんな古くないのに壊れました。分解したらサムスン(LTN156AT37)でした。

![IMG_20201002_085916.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/ae2d92c5-b8d9-789c-9356-6e20b89a52ef.jpeg)

Win10 2004をリストアしたところ、起動は壊れた液晶でするのですが、スリープして復帰すると外部ディスプレイだけが有効になるので、とりあえず本体は使えます。おそらくバグの副作用で、たまたまうまくいってるだけで、将来動かなくなるよう気もします。

液晶パネルは枠がはめ込みで、それを外すとパネルのネジ止めが確認できます。裏の下側に30ピンのコネクタで接続されています。昔のパネルに比べるとすごく薄いです。

やっぱりもったいないので、Amazonで同等品を9000円で購入して交換しました。ちゃんと使えました。
neo4jでsandbox その5

#概要

neo4jでsandboxやってみた。
pythonから、叩いてみた。

#インストール

```
pip install neo4j-driver
```

#サンプルコード

```
from neo4j import GraphDatabase, basic_auth

driver = GraphDatabase.driver("bolt://54.*.*.222:32939", auth=basic_auth("neo4j", "****"))
session = driver.session()
cypher_query = '''
MATCH (n)
RETURN n
'''
results = session.run(cypher_query, parameters = {})
for record in results:
	print(record)


```

#結果

```

<Record n=<Node id=0 labels=frozenset({'Point'}) properties={'name': 'p1'}>>
<Record n=<Node id=1 labels=frozenset({'Point'}) properties={'name': 'p2'}>>
<Record n=<Node id=2 labels=frozenset({'Point'}) properties={'name': 'p3'}>>
<Record n=<Node id=3 labels=frozenset({'Point'}) properties={'name': 'p4'}>>
<Record n=<Node id=4 labels=frozenset({'Point'}) properties={'name': 'p5'}>>


```

以上。
Matplotlib メモ

#（１）準備
matplotlibをインストール
seabornもインストールする（今回seabornは使わない）

```
pip install matplotlib
pip install seaborn
```

matplotlib、seabornともに日本語化も行う
matplotlibとseabornの日本語化は以下のサイトを参考にした
https://qiita.com/Masahiro_T/items/cfe1a016a4f0db5df760

iPAフォント上記サイトでiPAフォントは以下のサイトのゴシックをダウンロード
IPAゴシック(Ver.003.03)
ipag00303.zip(4.09 MB)
https://moji.or.jp/ipafont/ipa00303/

```
import pandas as pd
import numpy as np
from matplotlib import pyplot as plt
%matplotlib inline #jupyternotebookを使用する場合必要
import seaborn as sns

x1 = [10 ,20 ,30,40,50 ,60 ,70 ,80,90,100]
y1 = [120,100,20,40,100,130,120,34,56,33]
x2 = [10 ,30 ,40,60,70 ,80 ,110 ,115,117,120]
y2 = [20,100,120,20,50,60,20,84,36,53]
```
#※日本語化補足
以下のようにjapanize-matplotlibをインストールする手法もある

```
pip install japanize-matplotlib
```

```
import japanize_matplotlib
```

#（２）折れ線グラフを書く

```.py
#markerの詳細は、https://pythondatascience.plavox.info/matplotlib/マーカーの名前
#colorの詳細は、https://pythondatascience.plavox.info/matplotlib/色の名前
plt.plot(x1, y1, color = 'red', marker = '.')
plt.show()
```

#（３）サイズ変更、出力

```.py
#大きいサイズにする
#pngでセーブする
plt.figure(figsize=(14, 4), dpi=50)
plt.plot(x1, y1, color = 'blue', marker = '.')
plt.savefig("bar_basic.png")
put.show()
```

#（４）タイトルをつける

```.py
#グラフにタイトルをつける
plt.title("テスト")
plt.plot(x1, y1, color = 'red', marker = '.')
plt.show()
```

#（５）グリッド線、x軸y軸にラベルをつける

```.py
 #グリッド線をつける
plt.grid()
plt.xlabel('X軸ラベル')
plt.ylabel('Y軸ラベル')
plt.title("テスト")
plt.plot(x1, y1, color = 'red', marker = '.')
```

#（６）複数のグラフ

```.py
#複数のグラフを重ねる
#グリッド線をつける
plt.grid()
plt.xlabel('X軸ラベル')
plt.ylabel('Y軸ラベル')
plt.title("テスト")
plt.plot(x1, y1, color = 'red', marker = '.',label="Aパターン")
plt.plot(x2, y2, color = 'blue', marker = '.',label="Bパターン")
plt.legend()
```
【rails6】Railsで新規アプリを作る【初心者】

#概要

__Hello, Qiita！！__
今回の記事は、「Rails6で新規アプリを作る過程」についてです。
Rails6からはwebpackやyarnなど、~~よくわからない~~素敵なパッケージが登場してきます。
環境構築でハマった人も多いのではないでしょうか（私がその例）
Dockerでも環境構築はできたのですが、Dockerの理解がざっくりし過ぎているのでlocal環境での過程について投稿します。

因みに筆者は最近RoRアプリを作り始めた、思いっっきり初心者です。
どうぞ暖かい目で見守りください。:flushed:

なお、Rails5での記事も投稿していますので興味のある方は [こちら](https://qiita.com/Permz/items/bc97bea609583dee7f93) からご覧ください。

#前提条件

* OS: MacOS
* Rubyバージョン: 2.7.1
* Railsバージョン: 6.0.3
* データベース: MySQL
* Rubyバージョン管理: rbenv
* IDE: VisualStudioCode

上記の環境でアプリを作っていきます！:sunglasses:

#Railsで新規アプリを作る

ターミナル上で
`rbenv local 2.7.1`
を実行後、
`rails _6.0.3_ new app_name -d mysql -B`
を実行します。

##何を行っているのか

* `rbenv` rbenvコマンド実行の宣言
* `local 2.7.1` このプロジェクトで使用するRubyのバージョン指定（今回はver.2.7.1）
* `rails`
railsコマンド実行の宣言
* `_6.0.3_`
rubyのバージョン指定（今回はver.6.0.3）
* `new`
新しいアプリの作成コマンド
* `app_name`
作りたいアプリの名前の定義
* `-d mysql`
使いたいデータベースの指定（今回はmysql）<br>
* `-B`
`bundle install`をスキップする指示

> rbenvの使い方と仕組みについては、以下の記事がわかりやすいので参照してみてください。
_[rbenvの使い方と仕組みについて - Qiita](https://qiita.com/Kodak\_tmo/items/73147ed4f0eec54d6e94)_

#アプリ内のファイル

上記のようにターミナル上で`rails new`をすると、たくさんのフォルダやファイルが作られます。(Rails5と同様の内容は省略します。)

##Rails6から追加されたファイル

####Babel.config.js

####node_modules

####yarn.lock

Yarnとは、Facebook、Googleなどが共同開発したNode.js(JavaScript)のパッケージマネージャです。
↑
知らなかった、めっちゃすごいな（語彙力皆無）:innocent:

Yarn自体もNodeモジュールのパッケージです。

Node.jsには、もともと、npm(Node Package Manager)というパッケージマネージャがありますが、npmと比較してYarnは、

- Nodeモジュールのインストールがとても早い
- 誰が作っても同じバージョンになる機能がある(バージョンロック機能)
- セキュリティが強化されている
- コマンドラインの出力がシンプルでみやすい

のような特徴があります。

RailsにはBundlerというGemのパッケージマネージャがありますが、そのJavaScript版のようなものです。

####javascript/webpack

* javascript

javascriptフォルダは、rails5以前ではapp/assets配下に置かれていました。rails6ではapp配下となっています。

* webpack

webpackは指定されたファイルを起点として、そこからimport文を頼りに芋づる式にファイルを繋げてゆき、一つにまとめたJavaScriptファイルを出力します。

このまとめる処理はバンドル(bundle)と呼ばれています。
そしてバンドルを行うツールはバンドラーと呼ばれています。

ポイントは、“基本機能はあくまで一つのJavaScriptファイルにまとめる”というところのようです。

#gemのインストール

Gemfile内のrailsの記述を、

```:Gemfile
~
gem 'rails', '6.0.3'
~
```
のように使いたいバージョン（今回はver.6.0.3）で固定します。

先ほど`-B`コマンドでgemのインストールをスキップしたので、ターミナル上で
`bundle install`
を実行します。

#サーバーの立ち上げ

実際にサーバーを立ち上げてみましょう！ターミナル上で
`rails s`
を実行します。

##何を行っているのか

* `rails server` 
`rails new`コマンド で作ったRailsアプリケーションを、local環境でサーバーに繋ぐ指示

> * `rails server` _は、_`rails s` _でもOK_:ok_hand:

ターミナル上で以下のようなログが流れればサーバーとの接続が完了です！

```
Use Ctrl-C to stop

```

ブラウザ上で確認してみましょう！
[localhost:3000](http://localhost:3000) にアクセスします！

サーバーへ接続できました！:metal:

#終わりに

最後までご覧いただきありがとうございました。
調べていく中でRubyはスクリプト言語、Javascriptはインタープリタ言語であることも知れました。
プログラミング言語の歴史を探っていくと、様々な言語やフレームワークは人類の叡智の集積なんだなあと感慨深く思ってしまいます。:thinking:

また、今後は色々なgemによる機能追加方法なども記事にしたいなあと考えています。

この記事に関して不明な点等ありましたら、お知らせくださると幸いです。

最近マスクニキビができて嫌な気持ちになっているので、スキンケアも大事だなあと思っております。:mask:

それではまた！:walking_tone1:

#参考にしたWebサイト

[Rails環境でJS , CSSをwebpackで完全に管理する](https://qiita.com/geek_shanshan/items/8f348734d95d9ece9576)
[webpackとBabelの基本を理解する](https://qiita.com/koedamon/items/3e64612d22f3473f36a4)
[Samurai blog](https://www.sejuku.net/blog/72222)
[Ansible] macOSで始めるAnsible (1)

# これはなに？

「Ansibleでサーバ設定を管理したい！」
macOSで始めていきます。

とりあえずインストールのみです。

# 環境

* macOS Catalina 10.15.6
* Homebrew 2.5.2


# Ansibleのインストール

Homebrewを使用してインストールします。

```console
brew install ansible
```

Ansible 2.9.13がインストールされました。

```console
% brew info ansible
ansible: stable 2.9.13 (bottled), HEAD
Automate deployment, configuration, and upgrading
https://www.ansible.com/
/usr/local/Cellar/ansible/2.9.13 (18,363 files, 226.3MB) *
  Poured from bottle on 2020-10-01 at 18:25:15
From: https://github.com/Homebrew/homebrew-core/blob/HEAD/Formula/ansible.rb
License: GPL-3.0-or-later
```


# インストールされたコマンド

以下のようなコマンドがインストールされました。

<dt>
ansible
<dd>
単一タスクのPlaybookを定義し、実行します。
</dd>

<dt>
ansible-config
<dd>
Ansibleの設定を表示します。
</dd>

<dt>
ansible-connection
<dd>
リモートデバイスへ接続します。
（直接使うことはないかな？）
</dd>

<dt>
ansible-console
<dd>
Ansibleタスクを実行するREPL(Read-eval-print-loop)です。
</dd>

<dt>
ansible-doc
<dd>
プラグインのドキュメンテーションツールです。
</dd>

<dt>
ansible-galaxy
<dd>
共有レポジトリ（既定では [https://galaxy.ansible.com/](https://galaxy.ansible.com/) ）にあるロールを操作します。
</dd>

<dt>
ansible-inventory
<dd>
作成したインベントリを表示します。
</dd>

<dt>
ansible-playbook
<dd>
複数個のPlaybookを実行します。
</dd>

<dt>
ansible-pull
<dd>
VCS(Version Control System)からPlaybookを取得します。
プルモードで使います。
</dd>

<dt>
ansible-test
<dd>
テスト実行ツールです。
</dd>

<dt>
ansible-vault
<dd>
データファイルを暗号化/複合化するユーティリティです。
</dd>

# Ansible用語

よく見かけたわからない用語を並べてみました。

## インベントリ

Ansibleで操作対象となるデバイスが記載されているファイルです。
あるいは操作対象デバイスです。

## タスク

仕事です。操作対象デバイスに対して何か行うことです。

## Playbook - プレイブック

デバイスの操作内容を記述するための言語です。
あるいはその言語で記述されたファイルです。


# 自分自身に接続してみる

`ansible-console`コマンドを使用して、手元のmac上でタスクをひとつ実行してみます。

## 準備

あらかじめ、sshサーバを動くようにしておいてください。
設定 > 共有 からリモートログインを有効にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59475/2327a187-0120-ae95-84c9-afeaf82825cd.png)

また、ssh鍵がなければ生成し、自分自身に鍵認証で接続できるようにしておいてください。

```console
ssh-keygen -t ed25519
ssh-copy-id -i ~/.ssh/id_ed25519 localhost
```

鍵認証でログインできるか確認します。

```console
ssh localhost
```

## 疏通確認タスクを実行する

`ansible-console`にオプションをつけて起動します。

```console
ansible-console --inventory localhost, --user 自分のログインID
```

`--inventory` オプションの最後についているカンマはTYPOではないです。カンマがないと、ファイル名として扱われてしまうのです。

これで、ローカルホストでタスクを実行できます。

おもむろに`ping`と入力してみます。
このとき、sshのメッセージが表示されるかもしれません。Yesと回答します。

```shell-session
$ ping
[WARNING]: Platform darwin on host localhost is using the discovered Python interpreter at /usr/bin/python, but future installation of another Python
interpreter could change this. See https://docs.ansible.com/ansible/2.9/reference_appendices/interpreter_discovery.html for more information.
localhost | SUCCESS => {
    "ansible_facts": {
        "discovered_interpreter_python": "/usr/bin/python"
    },
    "changed": false,
    "ping": "pong"
}
```

WARNINGが表示されていますが、Ansibleで操作できることが確認できました。
オフラインどう書く第17回参考問題解答

問題はこちら->http://nabetani.sakura.ne.jp/hena/ord17scheherazade/

基数nが入力数の平方根以下とそれ以外に分ます。
平方根より大きい場合は入力数がn進数の二桁で表せますので、計算で答えが出ますし、
調べる数（一桁の数）が平方根以下となります。
　入力数から調べる数（一桁目の数）を引いて残りを調べる数で割ります。
　剰余が0で商が平方根より大きければ商が求める基数の一つです。
それ以外（平方根以下の数）は、
　sel/2でn進数での桁数を求め、
　sel0/3で、n進数での最上位と最下位の桁の数、次いで、その内側同士の数．．．
　というようにdiv とremを使って回文になる数を求めていきます。
途中で多くが失敗しますが、findallで成功したもののみを集めます。
だいぶ前にすべて平方根以下の数と同じ方法で求めたのですが、
出題者の、計算量を少なくできる、というコメントを読んで考え直しました。

```Prolog
%SWI-Prolog version 7.4.2,7.6.4
%:-initialization(start).   %ideone
%start.
sel(K,X):-N is floor(log(K)/log(X)),sel0(N,X,K).
sel0(N,_,_):-
     0>N,!.
sel0(N,_,_):-
     N=:=0,!.
sel0(N,X,K):-
     Z1 is K rem X,Z2 is K div X^N,Z1=:=Z2,K1 is K rem X^N,K2 is K1 div X,
     N1 is N-2,sel0(N1,X,K2).

solve(N,R):-
     SQ is floor(sqrt(N)),findall(Y,(between(2,SQ,Y),sel(N,Y)),R1),     %3keta ijou
     findall(Z,(between(1,SQ,X),N1 is N-X,N1 rem X=:=0,Z is N1 div X,Z>SQ),R2),
     append(R1,R2,R).  %2keta

start:-
     str(S),split_string(S,"\n","",S1),pre(S1),!.
     
pre([]).
pre([S|T]):-
     split_string(S,"\s","\s",[_,B,Q]),number_chars(N,B),solve(N,R1),
     sort(R1,R),disp(R,Q),pre(T).

disp(R,Q):-
     (R==[]->S="-";(maplist(atom_number,L,R),atomics_to_string(L,",",S))),
     (Q==S->Str=" pass ";Str=" fail  "),write(Str),writeln(S).

str("0       17301   5,38,100,218,236,5766,17300
1       2       -
2       1       -
3       3       2
4       4       3
5       5       2,4
6       6       5
7       10      3,4,9
8       101     10,100
9       1001    10,25,76,90,142,1000
10      10001   10,24,30,42,80,100,136,10000
11      1212    22,100,201,302,403,605,1211
12      123412  62,100,205,215,30852,61705,123411
13      5179    5178
14      4919    4918
15      5791    5790
16      5498    2748,5497
17      453     150,452
18      134     66,133
19      8489    27,652,8488
20      1234    22,616,1233
21      5497    41,238,5496
22      4763    19,35,432,4762
23      3974    17,27,1986,3973
24      3521    44,55,502,3520
25      5513    20,38,53,148,5512
26      8042    23,29,60,4020,8041
27      7442    37,60,121,3720,7441
28      4857    25,1618,4856
29      22843   49,69,91,141,430,22842
30      194823  84,121,21646,64940,194822
31      435697  160,169,235,626,1822,435696
32      142     3,7,70,141
33      886     5,14,442,885
34      3102    7,65,93,140,281,516,1033,1550,3101
35      17326   11,28,99,105,8662,17325
36      32982   13,72,238,477,716,1433,5496,10993,16490,32981
37      36      5,8,11,17,35
38      37      6,36
39      251     8,250
40      252     5,10,17,20,27,35,41,62,83,125,251
41      253     12,14,22,252
42      6643    2,3,9,81,90,510,948,6642
43      5040    71,79,83,89,104,111,119,125,139,143,167,179,209,239,251,279,314,335,359,419,503,559,629,719,839,1007,1259,1679,2519,5039
44      9240    23,38,62,104,109,119,131,139,153,164,167,209,219,230,263,279,307,329,384,419,439,461,615,659,769,839,923,1154,1319,1539,1847,2309,3079,4619,9239").
```
Zynq + FreeRTOS > MicroBlazeでは正常、ZynqだとvTaskDelay()処理で停止

```txt:動作環境
PYNQ-Z1
Windows 10 Pro v1909
Vivado v2019.1
```

### 概要

- MicroBlazeにてFreeRTOSを試した
    - 正常動作
- Zynqに変えたが、vTaskDelay()処理から先に進まない


### MicroBlaze

- [FPGAのソフトコアCPU (MicroBlaze)とFreeRTOSでシリアル通信ソフトをつくる](https://qiita.com/Rohira/items/6d0b8e9b848bc4b9db6c)

作成したブロックデザイン

![microblaze.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32870/77787a59-336c-d166-6e08-8607b6a810f5.png)

AXI TimerとAXI Interrupt ControllerがFreeRTOS用に必要なので足している。

```XDC
set_property PACKAGE_PIN Y18 [get_ports rx_0]
set_property IOSTANDARD LVCMOS33 [get_ports rx_0]
set_property PACKAGE_PIN Y19 [get_ports tx_0]
set_property IOSTANDARD LVCMOS33 [get_ports tx_0]

set_property PACKAGE_PIN L19 [get_ports reset_rtl]
set_property IOSTANDARD LVCMOS33 [get_ports reset_rtl]
```

XSDKでFreeRTOSのサンプルプログラムを実行。
vTaskDelay()以降も正常動作する。

### Zynq

MicroBlazeのBlock Designを参考にしたが、ZynqのIRQ_F2P[0:0]への接続はAXI Interrupt Controllerおinterrupt > irqとなっている点が異なる。

![zynq.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32870/8032f063-0ace-7ce6-93ee-e9efa4dcb716.png)

XSDKでFreeRTOSのサンプルプログラムを実行。
vTaskDelay()以降の処理に到達できない。


### 関連?

- [Topic: FreeRTOS vTaskDelay on A53 doesn't work  (Read 1748 times) ](https://forum.trenz-electronic.de/index.php?topic=948.0)


今のところよくわからない。
とりあえずMicroBlazeを進めるかな。

### 途中で見つけたもの

- [OpenAMPを実際に使って分かったこと](https://www.cybertrust.co.jp/iot/docs/openamp-findings-tips.pdf)
    - 2019/10/28
    - サイバートラスト株式会社 鈴木 保是様
- [ FreeRTOS on Xilinx Zynq Zybo [Single Core] ](http://rishifranklin.blogspot.com/2015/04/freertos-on-xilinx-zynq-zybo-single-core.html)
- [A Wireless Biosignal Measurement System using the Zynq SoC and Bluetooth Low Energy](A Wireless Biosignal Measurement System
using the Zynq SoC and Bluetooth Low Energy)
    
- [3. Processing Core Intercommunication: Asymmetric Multiprocessing with FreeRTOS and Microblaze Soft-core Processor](https://sites.google.com/site/powellsshowcase/projects/thesis-zynq/3asymmetricmultiprocessingwithfreertosandmicroblaze)
    - Zynq + MicroBlaze
【Laravel】CollectionのsortByとsortByDescメソッド

##はじめに
今回もLaravelのCollectionのメソッドについてまとめたいと思います。

##sortByとsortByDescメソッドでキーを指定して並べ替える

・sortByメソッドで昇順に並び替える

```php:
$collection = collect([
    ['id' => 1, 'name' => '山田', 'age' => 18],
    ['id' => 2, 'name' => '佐藤', 'age' => 38],
    ['id' => 3, 'name' => '小林', 'age' => 25],
]);

$sorted = $collection->sortBy('age');

print_r($sorted->toArray());
```

実行結果は下記になります。

```
Array
(
    [0] => Array
        (
            [id] => 1
            [name] => 山田
            [age] => 18
        )

    [2] => Array
        (
            [id] => 3
            [name] => 小林
            [age] => 25
        )

    [1] => Array
        (
            [id] => 2
            [name] => 佐藤
            [age] => 38
        )

)
```

・sortByDescメソッドで降順に並び替える
（sortByの逆の順番になります。）

```php:
$collection = collect([
    ['id' => 1, 'name' => '山田', 'age' => 18],
    ['id' => 2, 'name' => '佐藤', 'age' => 38],
    ['id' => 3, 'name' => '小林', 'age' => 25],
]);

$sorted = $collection->sortByDesc('age');

print_r($sorted->toArray());
```

実行結果は下記になります。

```
Array
(
    [1] => Array
        (
            [id] => 2
            [name] => 佐藤
            [age] => 38
        )

    [2] => Array
        (
            [id] => 3
            [name] => 小林
            [age] => 25
        )

    [0] => Array
        (
            [id] => 1
            [name] => 山田
            [age] => 18
        )
)
```

##おわりに
いかがでしたでしょうか。
様々な条件で並び替えをして試してみてください。
Redmineでダークモードを使う

Darkmode.Jsというプラグインを使って、Redmineをダークモード対応にしてみました。

Darkmode.Js
https://darkmodejs.learn.uno/

外部JavaScriptを読み込むため、View Customize Pluginはv2.1.0以上を使用してください。

```html
<!--
パスのパターン:.*
挿入位置:全ページのヘッダ
種別:HTML
-->

<style>
    .darkmode-layer,
    .darkmode-toggle {
        z-index: 500;
    }

    .darkmode-toggle .darkicon {
        font-size: 13px;
        font-weight: bold;
        color: #fff;
    }

    .darkmode-toggle--white .darkicon:before {
        content: "Light";
        font-size: 12px;
        color: #000;
    }

    .darkmode-toggle--white .darkicon {
        font-size: 0px;
    }

    .darkmode-toggle,
    .darkmode-layer {
        width: 3.0rem !important;
        height: 3.0rem !important;
    }

    .darkmode-layer--simple {
        width: 100% !important;
        height: 100% !important;
    }
</style>

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>

<script>
    $(function() {
        const options = {
            bottom: '12px',
            right: '40px',
            left: 'unset',
            label: '<span class="darkicon">Dark</span>',
        }
        const ua = navigator.userAgent;
        if (ua.indexOf('Trident') !== -1) {
            //IE11の場合は表示しない
        } else {
            new Darkmode(options).showWidget();
        }
    })
</script>
```

![Light_mode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/761560/2595ed5c-d1bd-d6d8-a087-5dffd54e3108.png)
![Dark_mode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/761560/45f30c2b-a2d2-9741-12c4-45193e920451.png)
typing.io でのタイピング練習のススメ

## きっかけ

「CleanCoder」という書籍を少し読み返しています。
第6章に「練習」という章があり、そこで、あくまで著者のボブおじさんの意見ではありますが、プログラマにおいても練習が必要だという論が述べられています。また、「型」を学ぶ重要性についても記載されています。

> プログラミングの型というのは、プログラミングの問題を解くためのキーボードやマウスの動きの練習である。実際に問題を解くわけではない。解き方はすでにわかっている。問題を解きながら身体の動きや意思決定の練習をするのである。
- 「Clean Coder (日本語訳版)」p.103ページより

「コーディングにおいてタイピングの練習をする」ということには私も始めは違和感を感じました。[^1]
[^1]: 書籍を読んで私は納得しました。この点について記載しようとする引用の範囲を超えて本文を掲載してしまう気がしますので、気になる方は実際に書籍を読んでみてください。

この点について議論はあるかと思いますが、一度脇においておきます。

## 練習サイト

一度キーボード (RealForce) を購入してタイピングにハマった時期があり、その時使っていたのは [e-typing](https://www.e-typing.ne.jp/roma/check/) というサイトでした。ご存知の方も多いかと思います。

というわけで、e-typing を利用したのですが、コーディングをするのと日本語を入力するのでは勝手が違うなという違和感を感じました。

何か脳内の経路が違うといいますか、そんな感じです。

コードそのまま写経するサービスはないのかなと思い、ちょっとググって見つけたいいサイトが、 [typing.io](https://typing.io/) です。「PHP typing practice」って検索すると出てきました。

## typing.io

以下のサイトにアクセスしてみてください。

[https://typing.io/lesson/php/symfony/PhpEngine.php/1](https://typing.io/lesson/php/symfony/PhpEngine.php/1)

PHPのフレームワークである、symfonyのソースコードを題材にタイピングを行うことができます。
UIもシンプルかつきれいで、特に操作に違和感は感じません。

### 結果表示

以下のように色付きでタイポ内容が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124948/d7dfa003-44b4-4f42-4733-115a757725a2.png)

こちらには課金が必要となりますが、タイポのヒートマップが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124948/12446795-bbc2-04bf-251e-876e4c34da5c.png)

### 任意のコードのアップロード

こちらも課金が必要となりますが、任意のコードをアップロードし、それを用いてタイピングを行うことができます。

以下のように、いくつか自分でタイピングゲームを作ってみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124948/ddd26170-7161-1d1b-68fd-f50b7805b1f5.png)

以下のデザインパターンのコードをお借りして、Iteratorパターンの実装を写経するタイピングを作成してみました。

https://github.com/ryo-utsunomiya/gof_design_patterns_in_php

デザインパターンを学習中ですが、どうもまだスッとは使えないなという感じです。

タイピングの題材としてデザインパターンを使い、頭と身体に馴染ませていく。割と悪くない案なんじゃないかなと個人的に考えています。

## 使ってみて

まだ今日の朝ちょっと試しただけですが、よさそうです。
あと、以下の気付きがありました。

### タイピングミスは、自身の現在の集中力を測る指標としてよさそう

1時間弱ほどやったんですが、疲れてくると露骨にタイプミスが増えます。
そして、休憩して戻ってくると露骨にタイプミスが減りました。

一般に当てはまるものかわかりませんが、私において、タイピングミスの増加は集中力の乱れを測る指標として使えそうです。

別にタイピングゲームに限らず、業務中のコーディングにおいても同様に導入できそうな感じがします。

運用としては、単にタイピングミスが増えたら小休憩はさもうというそれだけなんですが。

### 社用端末と使用端末等、利用する端末が変わった際にこのタイピングサイトを利用するとよさそう

社用端末と私用端末は同じThinkpadを利用しているんですが、配置の位置が微妙に異なります。そのため、月曜日の朝等、使用する端末を変更する際などにしばらくタイプミスが多発するという問題がありました。

月曜の朝のそのタイミングで、typing.io 利用するのがよさそうです。キーボードに対する身体のキャリブレーションといいますか、そういう用途に用いることができる気がします。

## おわり

typing.io よかったのでおすすめです。定額課金には慎重な方なんですが、これはすぐ課金してしまいました。

月額 $9.99 とそこそこしますが、それ以上の価値はあるんじゃないかなと思っています。

## 補足

typing.io でできないのが、IDE等エディタのショートカット利用の練習ですね。

現在 ﾍﾟﾁﾋﾟｰｽﾄｰﾑ を使っています。当面の目的はタイプミスの撲滅なのでショートカット利用についてはいいかなと思ってるんですが、そのうち段階が進めばまた別のソリューションを探すことになるかもしれません。
pystanのモデルと結果をpickleファイルで保存する

## この記事でやること

- pystanを用いて作成したモデルと結果をpickleファイルで保存する
- モデルと結果を再計算しないで読み出す方法を紹介する

## 結論
``` python:
#書き込み
with open('model.pkl', 'wb') as f:
     pickle.dump(stm, f)
with open('fit.pkl', 'wb') as g:
     pickle.dump(fit, g)
  
#読み込み
stm = pickle.load(open(DATA_DIR + 'model_ForS.pkl', 'rb'))
fit = pickle.load(open(DATA_DIR + 'fit_ForS.pkl', 'rb'))
```


## 解決したい課題
pystanによるベイズ統計モデリング、便利なんですが計算方法がなかなかかかります。ものによりますが一時間くらいかかるものが多い。しかも計算した結果収束してなかったなんてことも多い。

なので計算した結果は保存しておきたいと思う人が多いハズ。チュートリアル本でも書いてあるかもしれませんが、**Rstanの本が多いためpythonの保存方法はわからないまま**、という人も多いかと思います。

そこでこの記事では
- **pystanによるベイズ統計モデリングのモデルと結果をpickleファイルで保存する**
方法を紹介します。

## 解決方法
pystanによるコンパイルとサンプリングを下記のように行ったとします。
ここではstmにモデルが、fitにサンプリング結果が保存されています。

``` python:
model = """
data{
...
}

parameters{
...
}

model{
...
}
"""
stm = pystan.StanModel(model_code=model) #コンパイル
stan_data = {...}
fit = stm.sampling(data=stan_data) #サンプリング

```

このとき下記のように記述すれば保存&書き込みが可能。かんたんでした。
結果のみを保存しても読み出しできないこと。
モデルも一緒に保存しないといけません。
詳しいことはわかりませんが、サンプリング結果がモデルと紐付いているためのようです。

``` python:
#書き込み
with open('model.pkl', 'wb') as f:
     pickle.dump(stm, f)
with open('fit.pkl', 'wb') as g:
     pickle.dump(fit, g)
  
#読み込み
stm = pickle.load(open(DATA_DIR + 'model_ForS.pkl', 'rb'))
fit = pickle.load(open(DATA_DIR + 'fit_ForS.pkl', 'rb'))
```
Ubuntu 16.04 ベースの Docker で java をインストールする

# Ubuntu 16.04 ベースの Docker で java をインストールする

## JDK 8 をインストールする

以下の Dockerfile を作ってビルドする。

```
FROM ubuntu:16.04
ENV DEBIAN_FRONTEND noninteractive
RUN  apt-get update  -y \
  && apt-get install -y software-properties-common \
  && add-apt-repository ppa:openjdk-r/ppa \
  && apt-get install -y openjdk-8-jdk \
  && rm -rf /var/lib/apt/lists/*

# java
ENV JAVA_HOME /usr/lib/jvm/java-8-openjdk-amd64
```

## JDK 8 をインストールする (apt でミラーサイトを利用)

[コマンドラインで ubuntu の apt の取得先をミラーに変更する (take2)](https://qiita.com/m-tmatma/items/9dc51532d105504dbea3) の記事で書いたミラーサイトの設定の方法を利用する場合、以下の Dockerfile となる。

```
FROM ubuntu:16.04
ENV DEBIAN_FRONTEND noninteractive

RUN  sed -i.bak -r 's!(deb|deb-src) \S+!\1 mirror://mirrors.ubuntu.com/mirrors.txt!' /etc/apt/sources.list \
  && apt-get update  -y \
  && apt-get install -y software-properties-common \
  && add-apt-repository ppa:openjdk-r/ppa \
  && apt-get install -y openjdk-8-jdk \
  && rm -rf /var/lib/apt/lists/*

# java
ENV JAVA_HOME /usr/lib/jvm/java-8-openjdk-amd64
```

https://gist.github.com/m-tmatma/1bebb33ab2ed47e7c00385e2d87fbd27








参考
https://kazuhira-r.hatenablog.com/entry/2019/03/10/225459
https://openjdk.java.net/install/
【3D物体検出】Vote3Deep : votingを使ってSpeed UP

3D convolutionをする時、point cloudは疎なので、0を掛けるのに殆んどの時間を使ってしまう。
pointがある時にだけ処理を行えば、計算量を削減出来る。これをvotingという手法をbaseにしたsparse convolutionで行うのが、この論文のメインである。



<h1>voting</h1>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/667293f4-adc5-cc23-3f9f-a6e454ae87a7.png)

<h3>convolution</h3>
convolutional weightをinput gridに対してスライドしながら掛け合わせて行くと右の結果が得られる。

<h3>voting</h3>
input gridには2箇所のゼロではないcellがある。voting weightsにinput gridの値を掛けてから、足し合わせる事で右の結果が得られる。voting weightはcellの値を掛け合わせたもの1なら1倍、0.5なら0.5倍となる。



両方とも同じ結果が得られる事が分かる。すなわち処理としては等価だと言える。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/f6e37387-ce48-a955-efbd-85d86664e8e7.png)

しかし、convolutionではinput gridの値が0の時処理をskipすると結果が変わるのに対して、votingではskipしても同じ結果が得られる。これはinput gridが0であればvoting weightはすべて0になるので、足し合わせても足し合わせなくても結果は同じであるからである。



<h1>参考文献</h1>
Vote3Deep: Fast Object Detection in 3D Point Clouds Using Efficient Convolutional Neural Networks
https://arxiv.org/pdf/1609.06666.pdf
2020/10/3 朝アウトプット

#応用の復習
- ルーティング→コントローラー→モデル→ビュー
- データベース作成→database.yml編集→rails db:create→ローカルサーバー再起動
- ローカルサーバーの再起動の理由
 - 「Rubyバージョンの変更」、「テーブル・カラム情報の変更」、「Gemの導入状況の変更」など開発環境で編集した場合、これらの情報はローカルサーバーを起動するタイミングに１度だけ読み込まれるため
- RDBとはリレーショナル、データベースのこと。表形式でデータを管理するデータベース
- RDBMSとはRDBを管理するシステム。rails newコマンドでオプションにつけた-d mysqlを指す
- MY SQLとはRDBMSの一つ。特徴は拡張性が高い、小規模から大規模のデータの取り扱いok、柔軟性が高い　　できるやつ
Shopify初心者あれこれ(日本語にする)

## 前書き
最近、業務でShopifyを触ることが多いです。
WordPress含め、CMSはまったく触ったことがなかったので、慣れるのに時間がかかりました。
初歩的なことばかりですが、メモ&共有のために残しておきます。

## 管理画面を日本語にする
管理画面右上の自分のアカウントの名前をクリック→My Account→言語→日本語を選択
管理画面を開き直す、ログインし直すなどすると、管理画面の表示が日本語に変更されます。

## ストアで使用される基本的な言語を日本語にする
1. 管理画面の左下の設定→ストアの言語→テーマ言語を変更する→日本語を選択
2. オンラインストア→テーマ→アクション→コードを変更する  
左のファイル一覧のLocals/ja.jsonにen.default.jsonの中身を全部コピペ  
英語の値を日本語にすると、そのままストアに反映されます  
(jsonファイルのkeyが、テーマの各ファイルに変数として記載されているため)  
ja.jsonの値は、管理画面→オンラインストア→テーマ→アクション→言語を編集する　の画面からも編集できます。

ちなみに、パスワードリセットなどの、ユーザーへのメールを編集するには、管理画面→設定→通知から編集できます。

試しに、パスワードリセットなどをストアから行ない、送られてきたメールを確認すると、英語のままのことがあるので、
その場合は、先ほどの"通知"画面の個別の編集画面から"テストメールを送信する"を行うと、設定が反映されるのか、メールが日本語で送られるようになります。

## 後書き
最初は「Liquidtって何や。。。」と蕁麻疹が出ました(嘘)が、なんでも触ってると楽しくなってきますね。
Docker エラー：service must be a mapping, not a NoneType.

#あらすじ
Dockerで環境構築を行っていたら、このようなbuildエラーに出会った。

```
ERROR: In file './docker-compose.yml', service must be a mapping, not a NoneType.
```
このエラーの対処方と発生理由を備忘録として投稿する。

#エラー発生理由
インデントが不適切であるため。おそらくどこかの半角スペースが抜けている。

#解決策
このようなdocker-compose.ymlでエラーが起きたとする。
例　

```
version: "3"
services:
react-navigation:
  build: ./
  volumes:
    - ./react-navigation/:/usr/src/app
  env_file: .env
  command: bash -c "cd example && yarn start"
  ports:
    - "19000:19000"
    - "19001:19001"
    - "19002:19002"

```

解決方法としては、react-navigation以下に半角スペース２個分を追加で入れ、このように変更する。

```
version: "3"
services:
  react-navigation:
    build: ./
    volumes:
      - ./react-navigation/:/usr/src/app
    env_file: .env
    command: bash -c "cd example && yarn start"
    ports:
      - "19000:19000"
      - "19001:19001"
      - "19002:19002"

```
#あとがき
おそらくDocker習ったばかりの人は出会うであろうエラー。
そういった方々と自分のためにこの記事が役にたてばいいなと思います。
neo4jでsandbox その4

#概要

neo4jでsandboxやってみた。
最短経路、やってみた。

#参考にしたページ

https://qiita.com/tikamoto/items/c3a1bba12e9b83aee42a

#写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/c5499450-7c68-0bc0-908c-fc087e057831.png)

#nodeとrelasionを投入。

```
CREATE (p1:Point {name:"p1"}), 
	(p2:Point {name:"p2"}), 
	(p3:Point {name:"p3"}), 
	(p4:Point {name:"p4"}), 
	(p5:Point {name:"p5"}),
	(p1)-[:Route {weight:7}]->(p2), 
	(p1)-[:Route {weight:5}]->(p3), 
	(p1)-[:Route {weight:8}]->(p4), 
	(p1)-[:Route {weight:9}]->(p5), 
	(p2)-[:Route {weight:3}]->(p3), 
	(p2)-[:Route {weight:2}]->(p4), 
	(p2)-[:Route {weight:1}]->(p5), 
	(p3)-[:Route {weight:4}]->(p4), 
	(p3)-[:Route {weight:7}]->(p5), 
	(p4)-[:Route {weight:9}]->(p5);

```
#p1からp5の最短経路を求める。

```
MATCH g = (:Point {name:"p1"})-[:Route*]-(:Point {name:"p5"})
RETURN g, REDUCE(weight = 0, r in RELATIONSHIPS(g) | weight + r.weight) AS score
ORDER BY score ASC
LIMIT 1;

```

以上。