OmniAICreator/Qiita-1.07M huggingface dataset:
toio for Unity Editor Windows BLE対応

#初めに
Unityでtoioの開発できるってことで飛びつきました。
https://toio.io/blog/detail/20200930-1.html
しかし、よく内容を見ているとUnity Editor内で確認できるのは
シュミレーターでのtoioの動き確認のみ。

う～ん。やっぱUnity Editorでtoioコアキューブが動いてほしい
というわけでtoioの仕様についていろいろ調べ始めました。

toio™コア キューブ 技術仕様2.2.0
https://toio.github.io/toio-spec/docs/ble_communication_overview.html

BLEで接続してtoioコアキューブが動いているようなので
Unity EditorでBLE接続出来てしまえばいけちゃうのでは？
って事で調べ始めました。

##Uunity EitorでBLEを接続する
UnityでBLE接続するぞってって事でAssetstoreに行って検索を！
自分で作るんじゃないんだ。。。
無ければ自分で作るんですけどね。。

ということで調べたら、あった！！神
Arduino Bluetooth Plugin　$19
https://assetstore.unity.com/packages/tools/input-management/arduino-bluetooth-plugin-98960

で早速ポチって見ました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37068/dfb48de2-86e3-ad93-c04a-93b1c64ec2b1.png)


###Arduino Bluetooth Pluginを使ってBLE接続

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37068/152b6241-e2f6-85c7-1088-fa261d69da43.png)
Arduino Unity Plugin.pdfの説明の最後のほうに
Setup BLE in unity editor for Windows 10の説明があるので手順書通りインストールします。

※※現在は新しいアプリがあり、そちらを使うようです。※※
https://drive.google.com/drive/folders/1RIOVtYsLcoiU5626Ey1C-dMhFs2S42HG

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37068/0bfdc11a-41d6-9661-614e-8b60000ea66a.png)

BLEの通信するアプリ（BluetoothDesktopServer）を立ち上げて
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37068/06dc853e-5843-3a9d-8886-b010eba02560.png)

アプリはBLEのサーバーと通信するものですが、コマンドでループバックで通信を行えるようにコマンドで実行しておきます。

```cmd
CheckNetIsolation.exe LoopbackExempt -is -n=BluetoothDesktopServer_t05x7yb6e6yp0
```
Unityの方で[Arduino Bluetooth Plugin]をインポートして
サンプルシーンのscan_sceneを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37068/cafd8e8e-164b-3a40-f7e5-15c64af089b5.png)

そしてBluetoothHelper.BLE_AS_CLIENT = true;を追記します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37068/b8230d52-f390-c281-c587-8cd33521d1d3.png)

Unity EditorでPlayを押して、toioのBLEを探すので接続したら
ServiceとCharacteristicsを指定して値を渡すと
toioがtoio™コア キューブ 技術仕様通りに値を送ると
値通り動いてくれます。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37068/08d37b8b-4ea9-a667-bfb9-8fd5e58e24e9.png)



※注意
Arduino Bluetooth PluginのwindowsのBLEの接続はまだ開発途中らしく、安定した接続はまだらしいです。

この記事は2020/10に環境を作りました。
【超簡単】visual Studio Codeをターミナルから開く方法

# はじめに

これまでvisual Studio Codeをアプリから起動していましたが、最近ターミナルからの操作が多くなってきたので、ターミナルで起動する方法について調べてみたので、簡単にまとめます。

## visual Studio Codeでの操作

1. visual Studio Codeで<code>Command + Shift + p</code>を押す
→visual Studio Codeで入力画面が出てくる

2. 以下を入力する
<code>Shell Command: Install 'code' commad in PATH</code>
(おそらく、Shellと入力すれば、上記が出てきます)

## ターミナルでの操作

### まずは確認
```terminal
$ code
```
→単純に、visual Studio Codeが開く

### 現在のフォルダを表示する
```terminal
$ code .
```
→現時点のフォルダをvisual Studio Codeで開く

### 特定のファイルを表示する
```terminal
$ code index.html
```
→index.htmlをvisual Studio Codeで開く
[初心者]一気に複数行のインデント修正ができるワザ「矩形選択（ブロック選択）」について

#はじめに
Railsなどで、コードを打ち終わった後に、全体のバランスを整えたいと思う時ってありますよね。
コードを考えるのに夢中になってしまい、見返してみたら、インデントがバラバラで、めちゃくちゃ見にくいバランスになってしまっていたり。
また、複数の要素をまたぐ形で、親要素を後から追加しようと思って、子要素の全ての行に対して、1スペース分のインデントを空けなければならない時もあると思います。
プログラミング駆け出しの私は、インデントを空ける為に、ひたすらTABキーを打ち続けていました。

そんな中、「矩形選択」なるワザを知ってから、世界が変わりました。
知っている方も多いと思いますが、もし使っていないor知らない方がいたら、非常にもったいないと思いますので、この便利な技を共有させてもらいます。

#こんな時ってどうしてますか？
次のコードをご覧ください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/824345/adbff8d9-ce8c-087f-eab5-28f907a23bc6.png)
deviseを利用して、ユーザーの新規登録画面を作成したコードです。
これだけで、機能としては利用できるのですが、見た目が美しくありません。

Bootstrapを利用して、バランスを整えたいと思い、全体を
``<div class="container">``
``<div class="row">``
で囲もうと思います。

```ruby:qiita.rb
<div class="container" >
  <div class="row" >
  -------------　←ここに上のコードを入れ込みたい！！！
  </div >
</div >
```

そうですね。
間に入れるだけならそれで良いのですが、リーダブルコードを意識するなら、全ての行にインデントを空ける方が美しくなりそうです。

でも、面倒ですよね。
分かります。
そんな時に、利用できるのがこの「**矩形選択**」です！

#矩形選択（ブロック選択）とは？
非常に便利な機能の使い方は簡単です。
macOSの場合、

```ruby:キーボードによる矩形選択のコマンド
開始する箇所をクリックしておく
［Shift］＋［Option］＋［Command］＋矢印キー
そのままドラッグ
```

これだけです。
もっと分かりやすく説明すると、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/824345/0a5f1f52-87ae-7cd2-5d76-2be0fb2b3a71.png)
このように、開始する箇所をクリックしておきます。
そして、↑のコマンドを打ち込むと、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/824345/1de3b626-b54c-7f91-f316-3a7aee6d28c5.png)
何と便利なことに、``<div class="field">``全体を囲むように、ポインタが拡大されました。
ここまで出来ると、もう簡単です。
見やすいように、↑の部分だけインデントを空けると、こんな感じになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/824345/f59e1339-540b-0df3-4f8c-1075549cbdbf.png)
はい、メチャクチャ便利です。

#矩形選択の他の使い方
もちろん、スペースを空けるだけじゃなく、文字を打つことも出来ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/824345/f2adae35-14cd-9c7d-22db-dc820f5f6efb.png)
一度文字を打ち込むだけで、矩形選択した他の行にも同じ文字を打つことができました。
他にも色々と応用した使い方があるので、興味がある方は調べてみてください！

#おわりに
プログラミングの世界には、このように作業時間を縮小できるような小ワザがたくさんあると思います。
全てを一気に覚えるのは難しいですが、一つ一つ体に馴染ませていけば、非常にスマートなプログラマーになれる日が近づくかもしれません！
PHP8.0からはin_arrayの第3引数のtrueを付け忘れても、意図しない挙動が防げるようになる

# TL;DR
```php
<?php

$hogeArray = ["hoge", "foo", "bar"];

// PHP 7まで
in_array(0, $hogeArray); // true(意図しない挙動)

in_array(0, $hogeArray, true); // false

// PHP 8
var_dump(in_array(0, $hogeArray)); // false
```

PHP 8からは、`in_array`の第三引数を省略しても、上記のような意図しない挙動が防げるようになる。

# 背景

## 非厳密な比較演算子`==`の挙動が変更になる

2020/11/26より、PHPの5年ぶりの時期メジャーバージョンアップであるPHP 8がリリースされます。[JIT](https://qiita.com/rana_kualu/items/ba312d2789bd228f887a)など、重要なRFCが目白押しですが、その中に「**非厳密な比較演算子 `==` の挙動が変更になる**」というものがあります。

詳しくは、[PHP RFC: Saner string to number comparisons](https://wiki.php.net/rfc/string_to_number_comparison) や、他の方が書かれた分かりやすい記事[【PHP8.0】非厳密な比較演算子`==`の挙動が今さら変更になる](https://qiita.com/rana_kualu/items/82cc8295d2102d14b88a)をご参照ください。

本記事の主題に入る前に、非厳密な比較演算子`==`の挙動の変更について述べる必要があるため、ざっくりと説明します。

---
数値(`例：0`)と数値文字列(`例："0"`)を非厳密演算子 `==` で比較する場合、数値文字列は数値に変換されて文字列比較されます。

```php:php8以前
<?php
0 == "0"; // true
```

それ以外の場合(例：数値と数値文字列以外の文字列の比較)は、文字列を数値に変換して比較します。数値文字列以外の文字列を数値へ変換した場合は `0` になるので、以下の結果になります。

```php:php8以前
<?php
0 == "hoge"; // true
```

しかし、**PHP 8へのメジャーバージョンアップデートによって、 `==` の挙動が変わります。**
数値文字列以外の文字列と数値を比較する場合は、数値を文字列に変換してから、文字列比較するようになります。

```php:php8
<?php
0 == "hoge"; // false
```

# in_arrayの挙動が変わる

本記事の主題です。

非厳密な比較演算子 ` == ` の挙動の変更により、`in_array`の挙動も変更となります。

`in_array`は、第3引数で**strict**が設定されていない限りは型の比較は行いません。つまり、 `==` を使って比較しています。

そのため、今までは意図しない挙動を予防するために、`in_array`の第3引数には `true` をつける必要がありました。

[参考：in_arrayを使うときは黙って第三引数を付けること](https://qiita.com/ritukiii/items/3a6add378ae089ab5d70)

ですが、今回のPHP 8へのメジャーバージョンアップデートによって、`==` の挙動が変更になったことにより第3引数に`true`を付けなくとも、意図しない挙動が起きなくなります。

```php:php8
<?php

$hogeArray = ["hoge", "foo", "bar"];
in_array(0, $hogeArray); // false
```

# さいごに
PHP 8の登場により、非厳密な比較演算子 `==` での比較はより安全になりました。
以下に示した例で、`$needleSample`が `0` などになっているエッジケースが起こった場合に`in_array`の第3引数を付け忘れていたことで、問題の特定に開発者が頭を抱えることが少なくなりそうです。

```php

<?php

$hogeArray = ["hoge", "foo", "bar"];

if (in_array($needleSample, $hogeArray)) {
  // なんかの処理
}
```

**注意**: この記事は `==` での比較が今までより安全になったから、**これからは`in_array`の第3引数の省略をとにかく推奨する内容ではありません。**

自分の調べた範囲では、第3引数を省略しても、今まで発生していた意図しない挙動を防ぐことを確認できましたが、調査し切れておらず防げないパターンがあるかもしれません**(是非ご指摘ください:qiitan:)**。

よって、第3引数を省略して、業務コーディング中に防げないパターンについてあれこれ考察するのは時間を浪費です。乱暴な言い方ですが、これからも困ったら第3引数の**struct**を`true`にしておけば安定です。

## 補足(2020/11/26まで)
メジャーアップデートは2020/11/26ですが、その前にPHP 8の挙動を確認したい方は、

PHP 8.0のイメージをpullしてこればカレントディレクトリにPHPファイルを置いて、以下のようにPHP 8環境で挙動を試すことができます。

```bash
docker run --rm -v `pwd`:/app -w /app php:8.0-rc php php8test.php
```

# 参考情報
- [【PHP8.0】PHPでJITが使えるようになる](https://qiita.com/rana_kualu/items/ba312d2789bd228f887a)

- [【PHP8.0】非厳密な比較演算子`==`の挙動が今さら変更になる](https://qiita.com/rana_kualu/items/82cc8295d2102d14b88a)

- [PHP RFC: Saner string to number comparisons](https://wiki.php.net/rfc/string_to_number_comparison)

- [in_arrayを使うときは黙って第三引数を付けること](https://qiita.com/ritukiii/items/3a6add378ae089ab5d70)
配列変数　と　連想配列　初学者が初学者向けにまとめた

どうも。
今まで掲示板等々を学習がてら作成してきましたが、5ヶ月というスパンで焦り走りしてきた事で
「フワッとした理解」で「〇〇機能は〇〇で実装できるだろう」と何となく分かるものの、Google先生の力がなければこれ一つ自分で実装できない僕が、
一つ一つの細かな理解が疎かであることから、
これから基礎の基礎を深く理解するためにアウトプットの場としてQiitaに投稿していきます。

自身でGoogle先生を活用して数十サイトや書籍を参考に理解を深めながら、
１、、実際にコードを書いて
２、、ノートに自分の言葉でいつかの自分が見ても伝わるようにまとめていく
３、、最後にQiitaに他の方が見ても分かるよう伝えていく


※間違い部分、誤解している箇所が出てくる可能性もあります。

<h1>[配列とは]</h1>

複数(プロパティ)のデータをまとめて整理して１つの大きな箱にいれるイメージ。
![333.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677104/701939f0-44ad-f6f9-17f6-3685727dc6fa.png)
出力結果：アイス

<h3>呼び方まとめ</h3>

・青box１つ１つのまとまりをプロパティと呼ぶ。

・ここでは$box全ての部分を【配列】と呼ぶ。

・自動的に割り当てられる添字のことを【キー】と呼ぶ。

・アイス、チョコアイス、カレー味アイスの部分を【値】と呼ぶ。


<h3>問題</h3>
![ee.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677104/95a84dc4-21aa-928b-8f0d-0216616d8385.png)

正解はスクロールしたらすぐ出てきますので、ここから下にスクロールせず解答してみること。




↓




正解：2.3.4.1

※プロパティを要素、配列をインデックスとも呼ぶ。


<h3>問題２</h3>

```php:
Hamburger 配列変数に
・テリヤキバーガー/ベーコンレタスバーガー/ホットケーキ
上記３つのハンバーガー[値]を上記の順番に格納すること
最後にテリヤキバーガーを出力結果に表示してください

```

先ずは自身でやること。
答えは以下のリンクを押すと出てきます。
https://paiza.io/projects/pik0u6YBKOv40ZuMP-pG6g

```
次に、$Hamburger配列変数からテリヤキバーガーとホットケーキを改行して出力結果に表示してください。
https://paiza.io/projects/pik0u6YBKOv40ZuMP-pG6g
```

改行の仕方は複数通りあるため上記URLの方法以外でも改行して出力出来ていればOK！！

ちなみに、上記URLの通りに文字列の中に変数を取り入れる場合は""(ダブルクォーテーション)です。
ダブルクォーテーションとシングルクォーテーションの違いは以下URLが非常に分かりやすいです！
https://qiita.com/bitcoinjpnnet/items/64458299eaeefbacab44


<h2>配列に格納されている値を全て出力結果に表示するには？</h2>

foreach文を使います。

```
【foreach文とは】
（リスト）や（配列）に格納されたデータ[要素とも値とも呼ぶ]に対して記述[プログラム]された処理を
繰り返し実行する力を持っているループ文です。

```


```
$box = ['アイス','チョコアイス','カレー味アイス'];
foreach($box as $value) {
    echo $value;
}
出力結果：アイスチョコアイスカレー味アイス

格納されたデータが全て出力されると繰り返し終了します。
```
また、添字[キー]も出力したい場合には

```
foreach ($box as $key=>$value){
echo "$key=>$value \n";
}

出力結果：
0=>アイス
１=>チョコアイス
2=>カレー味アイス
```
おさらいです。
文字列の中で変数展開したい場合はダブルクォーテーションで囲む。
\nは改行を意味します。
Macユーザーの方は半角[optionキー＋¥]。

$valueの部分は任意名です。

<h3>問題3</h3>

```
Hamburger配列変数に格納されてる値を全て出力結果に表示してください。
```
答え
https://paiza.io/projects/pik0u6YBKOv40ZuMP-pG6g

```
Hamburger配列変数に格納されている値とキーを全て出力結果に表示してください。
条件
改行を行うこと。
カンマ/コンマをいれること

表示結果例
キー=>値、
キー=>値、
キー=>値、
```
答え
https://paiza.io/projects/pik0u6YBKOv40ZuMP-pG6g

但し、やり方は複数通りある。


これである程度配列についての理解が出来たのではないでしょうか？
配列を初めて聞いた方は少しまだ理解できていないかもしれません。
Google先生に「配列　とは」で検索すると結構出てきます。


それでは次に連想配列について理解を深めていきたいと思います。

<h1>連想配列とは


任意の文字列をキーに割り当てる事が可能。
・文字列(クォーテーションで囲むもの)
・整数


<h3>連想配列の良いところ</h3>

・キーが任意文字列のため値と同じ意味を持たせた文字列にすればパッと見て分かりやすい！
例：　Apple　＝＞りんご　car =>　車

・１つの小箱(要素ともいうプロパティともいう)にキーと値で２つの意味を持たせれる。
例：　顧客の連絡先と名前を管理したい場合
例：　'〇〇会社小林様'　＝＞　xxx-xxxx-xxxx(これは電話番号です)




```
実際に試して覚えよう！

連想配列のキーに割り当てられるが注意すべき事

・true　false　・・・　キーに割り当てれるが、true = 1 false = 0に自動変換される
・小数点      　・・・　キーに割り当てれるが、自動的に切り捨て整数に自動変換される


```

実際に試して覚えよう！
https://paiza.io/projects/pik0u6YBKOv40ZuMP-pG6g


連想配列もつまりは配列の仲間なので配列を理解出来れば連想配列も理解できると思います。


次回、配列を複数の出力方法で出力をし、ループ処理等を併せて理解する記事を書きます。
Laravel Mixを使用してSCSSをCSSにコンパイルしてみよう

## 開発環境
- Laravel  8.0
- php 7.3
- laravel-mix　5.0.1



#はじめに
今回はlaravelにSCSSを導入してから実際にコンパイルするまでの流れを記事にしています。
※すでにLaravelプロジェクトを立ち上げている前提での手順になりますのでご了承ください


##Laravel Mix
> Laravel Mixとは、フロントエンドのアセットをコンパイル、バンドルしてくれるツール。
ツールの中身はwebpackを利用している

webpackを使うと何がいいの？

・依存性を解決できる
・リクエスト数を減らすことができる


SCSSを導入するにあたって本記事ではLaravel Mixを使用します。
すでに、package.jsonにLaravel Mixは最初から記述されているためターミナルでnpm installしちゃいましょう

<pre>$ npm install</pre><br>


__次にwebpack.mix.jsを開いてみるとこんな感じになってます__
> webpack.mix.jsとはwebpackというJavaScriptパッケージツールで使うもの（ラッパー）

<pre>const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);</pre><br>




## 実際にコンパイルしてみる

まずはresources内にsassディレクトリを作成して、その中にapp.scssを作成します。

そして、webpack.mix.jsを下記内容に編集

<pre>const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');
//  resources/sass/app.scssを参照して、public内にcssのファイルを作成します </pre><br>



編集したらターミナルでnpm run dev
<pre>$ npm run dev</pre><br>

成功したら、public内にcssが生成されているのを確認してください。


__以上でLaravel Mixを使用してSCSSを導入するまでの流れになります。__

### 補足
バンドル（合体）してコンパイルするケース↓↓
<pre> // jsファイルをバンドル(合体)したい場合
mix
.scripts([ 'public/js/app.js' , 'public/js/app2.js' ], 'public/js/all.js' );
//[admin.jsとdashboard.js]を all.js としてバンドル(合体)させます。

// cssファイルをバンドル(合体)したい場合
mix
.styles([ 'public/css/app.css' , 'public/css/app2.css' ], 'public/css/all.css' );
// app.css と app2.css をバンドル(合体)させて
// publicフォルダに all.css を作成します。</pre><br>






------------------------------------------------------------------
5：各views/○○○○.blade.phpでの使用方法

    <!-- Scripts(JSの場合※srcで呼び出します。) -->
    <script src="./public/index.js"></script>

    <!-- Styles(CSSの場合※hrefで呼び出します。) -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">

-----------------------------------------------------------------
###便利コマンド
>公式ドキュメント参照

npm run watch
コマンドはターミナルで実行し続け、関連ファイル全部の変更を監視します。
Webpackは変更を感知すると、アセットを自動的に再コンパイルします。

npm run watch-poll
特定の環境のWebpackでは、ファイル変更時に更新されないことがあります。
自分のシステムでこれが起きた場合は、watch-pollコマンドを使用してください。
Ubuntu 20.04 で突然「EXT4-fs error」となり、フリーズする問題の解消

# 環境
ThinkPad T14 Gen1 (AMD)
- CPU : AMD Ryzen 7 4750U
- RAM : 48GB (16GB + 32GB)
- SSD : WD SN520 512GB PCIe NVMe

# 現象
Ubuntu 20.04を使用中に突然黒画面になり、`EXT4-fs error ...`というのが複数表示される。
再起動させるも再発。

# 原因
参考サイト[1]によると、APSTという、SSDが消費電力を抑えるための機能により、SSDがスリープ状態となり、ルートファイルシステムが読み込み専用になるためのようです。

# 解決策
## APSTの状態確認
```
sudo apt install -y nvme-cli && sudo nvme get-feature -f 0x0c -H /dev/nvme0
```
APSTが有効になっていると、`Autonomous Power State Transition Enable (APSTE):`が`Enable`になっています。

## APSTの無効化
```
sudo -i gedit /etc/default/grub
```

`GRUB_CMDLINE_LINUX_DEFAULT`に`nvme_core.default_ps_max_latency_us=0`を加えて下記のようにする。

```
GRUB_CMDLINE_LINUX_DEFAULT="quiet splash nvme_core.default_ps_max_latency_us=0"
```

下記コマンドで設定を反映させた後、再起動。

```
sudo update-grub
```

# 設定が反映されたことを確認
再起動後、下記コマンドでAPSTの状態を再確認

```
sudo nvme get-feature -f 0x0c -H /dev/nvme0
```

`Autonomous Power State Transition Enable (APSTE):`が`Disenable`になっていることを確認。

# 参考サイト
[1] https://kledgeb.blogspot.com/2017/05/ubuntu-1704-66-ssd.html?m=1
Pardot のリード生成 (Pardot Lightning アプリケーション)　⇒　Pardot のランディングページの使用 (Pardot Lightning アプリケーション)

１．Pardot でランディングページをホストする利点は何ですか?
２．ランディングページにカスタムレイアウトテンプレートを作成するのはどのような場合ですか?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634241/35208f63-dd2e-0b2a-0358-0972977c5830.png)
homesteadでngrok使う（style崩れる）

#homesteadでngrokを使用しハマったこと

・mac
・Laravel  　　6
・homestead 　 9.6.1
・ngrok     　2.3.35  


vagrant sshでログイン
作業ディレクトリに移動

```console:ターミナル 
vagrant@homestead:~/code/app$ share homestead.test
```
これで作成されたURLでアクセスできる。

開発で使用しているPCではしっかりと表示されているが、URLをスマホに送り
スマホで見ると、CSS、画像などが反映されていない。

##原因
どうやら、asset関数が読み込まれていない。

```php:hoge.blade.php 
<link rel="stylesheet" href="{{ asset('/css/style.css') }}" />
```

これならしっかり反映される

```php:hoge.blade.php 
<link rel="stylesheet" href="css/style.css" />
```

しかし、トップページから違うページに飛ぶと、ページが表示されない
例（home => about）など

##解決法
vagrantではなくmacにngrokをインストールする

vagrant作業ディレクトリで

```console:ターミナル  
vagrant@homestead:~/code/app$ php artisan serve
Laravel development server started: http://127.0.0.1:8000
```

ターミナル 別タブ

```console:ターミナル  
hogehoge@hogehogeAir app % ngrok http 8000
```

生成されたURLに接続すればOK

これが正解か分かりませんが、これで上手く接続出来ます。

もっといい方法あれば教えてください。
`Array#index` は途中から探索できない、 `String#index` はできる

環境 : Ruby 2.7.1

リファレンスマニュアル：

* [`Array#index`](https://docs.ruby-lang.org/ja/latest/method/Array/i/index.html)
* [`String#index`](https://docs.ruby-lang.org/ja/latest/method/String/i/index.html)

---

例えば、「各要素が0と1のみから成る配列から、1であるインデックスを探して何か処理する」ことを考える。探すだけなら `each_with_index` などで可能だが、元の配列を書き換える（続きの探索に影響しうる）など複雑な処理である場合はループ文で地道に頑張る必要がある。

Rubyの場合はインデックスをループで回さなくても **`Array#index`** で位置を特定できる。しかしこれには欠点があり、**前回の続きから探索するということができない**。

```ruby
seq = [1, 0, 1, 0, 1, 1, 1, 1, 0, 0, 0, 1, 0, 0, 1]

i = -1
while (i = seq.index(1, i + 1))
	# i が必要な複雑な処理
	p i
end
#=> ArgumentError (wrong number of arguments (given 2, expected 0..1))
```

でも**文字列の場合はできる**。

```ruby
seq = [1, 0, 1, 0, 1, 1, 1, 1, 0, 0, 0, 1, 0, 0, 1].map(&:chr).join

i = -1
while (i = seq.index(1.chr, i + 1))
	# i が必要な複雑な処理
	p i
end
#=> 0 2 4 5 6 7 11 14
```

逆順に探索する `#rindex` も同じ。

---

配列を文字列に変えて `#index` で探索する場合は以下の特徴がある。

* 利点
	* （上で述べた通り）途中から探索できる
	* 要素をまたぐ条件指定が簡単にできる：固定文字列または正規表現
* 欠点
	* 要素の種類が非常に限られる
		* 文字そのもの、または文字コードの範囲内の整数[^scp]
		* 数値の場合は文字と変換する手間も発生
	* ブロックを渡せないので複雑な条件を指定できない（数値が偶数である、など）

[^scp]: Unicodeのサロゲートペアの領域のように、ある途中の範囲の数値が文字に変換できないという可能性にも注意 → `0xD800.chr('UTF-8')`
Sticky TabBarというワードにたどり着くまで

#はじめに
Flutterでアプリを作っているのですが、仕様書に「インスタのプロフィール欄にあるリストを切り替えるあのtab」と書かれていて、頭の中にイメージは湧いたのですが、「Sticky TabBar」というワードにたどり着くまでに時間がかかってしまいました。
他にもあのアプリのあれみたいなコメントがあって、実装するときにこのwidgetなんだっけな〜と思ったことが多々あり、参考になるサイトをまとめようと思いました。他にもあれば追記しようと思います、

#widgetの参考ページ

本家 
https://flutter.dev/docs/development/ui/widgets

https://flutter-widget.live/

https://itsallwidgets.com/

https://flutterawesome.com/

「Flutter Widget of the Week」
https://www.youtube.com/playlist?list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG

https://flutterstudio.app/

#おしまい
【Rails】link_to で formatの指定

タイトルのとおり、`link_to`メソッドでフォーマットを指定する方法についてです

かなり簡単ですが、意外と記事がヒットしなかったので備忘録的として残しておきます

## そもそもformatって？
出力形式のことです
通常はhtml形式で、htmlファイルがレンダリングされてますよね
他にもjson形式やpdf、csvなどがあります

今回はPDFの出力を想定してやってみます

## linkの書き方
pathの引数にformatを指定するだけです！

```slim:slimファイル
= link_to '表示名', xxx_path(format: :pdf)
```
他にidを指定したり、parameterを設定する場合にも同じ様に引数に突っ込んじゃってOKです

```slim:slimファイル
= link_to '表示名', xxx_path(format: :pdf, id: @post, parameter_name: parameter_content)
```
## コントローラでの処理
コントローラではformatを指定して処理を記述すればOK
pdfの場合はsend_fileを使ってファイルを表示させたりダウンロードさせたりすることが多いと思います。
次のように記述すると、ファイル名を指定してブラウザ上でPDFファイルを開いてくれます

```ruby:コントローラ
class HogesController < ApplicationController
  def show
    respond_to do |format|
      format.pdf do
        send_file(pdf_path, filename: filename, disposition: 'inline')
      end
    end
  end

  private

  def pdf_path
    # pdfの保存場所を指定
    @post.pdf.path # ← carrierwave使ってればこんな感じかな
  end

  def filename
    # pdfのファイル名を指定
    "#{@post.id}.pdf"
  end
end
```


## 余談
rails routesをするとURIパターンの中に(.:format)ってありますよね
これがformat指定したときのURIになります
![23d955ea526f9852065207a191d12617.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605568/f56971b0-076d-bb7d-8020-613f438f5960.png)

たとえば今回のようにformatをpdfにした場合は、URLが`https://xxxxxx/xxx.pdf`みたいになります
フォーマットに応じて末尾に`.フォーマット形式`の形で追加されるってことなんですね〜
EIP-1193、EIP-1102の対応

#はじめに

久しぶりにMetamaskを触ったら色々とwarningが出ている。。
頻繁に追従させていかないと、なかなか難しいなと改めて感じました。

主には、eip-1193,eip-1102の対応が必要とのことで、

https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1193.md
https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1102.md

を見ながら変更しました。

>今回のwarning
>
inpage.js:1 MetaMask: The event 'close' is deprecated and may be removed in the future. Please use 'disconnect' instead.
For more information, see: https://eips.ethereum.org/EIPS/eip-1193
>
inpage.js:1 MetaMask: 'ethereum.enable()' is deprecated and may be removed in the future. Please use the 'eth_requestAccounts' RPC method instead.
For more information, see: https://eips.ethereum.org/EIPS/eip-1102
>
inpage.js:1 MetaMask: MetaMask will soon stop reloading pages on network change.
For more information, see: https://docs.metamask.io/guide/ethereum-provider.html#ethereum-autorefreshonnetworkchange 
Set 'ethereum.autoRefreshOnNetworkChange' to 'false' to silence this warning.

#EIP 1193

Most Ethereum-supported browsers like MetaMask and TrustWallet have an [EIP-1193](https://eips.ethereum.org/EIPS/eip-1193) compliant provider available at window.ethereum. For web3.js, check Web3.givenProvider.

#EIP 1102

Metamaskはサイト読み込みをするときに、window.web3としてWeb3インスタンスを自動的に作りますが、
悪意のあるサイトが、自分のアドレスを抜くことができてしまうので、ユーザーの承認を入れるように変更が行われた。

Breaking Change: No Accounts Exposed by Default
EIP-1102: Preparing your dapp

#おしまい
Javascript基礎知識＃7（関数）

##はじめに
この記事はJavascriptが苦手な私ために書いている自分用のメモです。

※内容について、誤った知識やもっとわかりやすい表現等ございましたら、ご指摘いただけますと幸いです。

##目次
1. 関数 (function) とは
2. 関数 (function) の書き方
3. 関数(function) の例
4. 関数式とは
5. 関数式の例
6. アロー関数



#1. 関数 (function) とは
**複数の処理をまとめたもの。**プログラムを何度も使い回しができるかたちにしたものです。
コード量が少なくなって、見通しが良くなる！！


#2. 関数 (function) の書き方
関数の一番シンプルな基本のかたちです。


```javascript
function 関数名( 引数 ) {
  処理する内容
}

関数名(引数);//関数を呼び出す
```

関数名は変数名を付けるときとルールは大体同じ。
最初に動詞を持ってくることが多い。
例）・add○○
　　・is○○

**・引数とは**
関数に与える情報で、**関数を呼び出すとき**に一緒に値を渡すことで、関数の中でその値を使うことができる。

#3. 関数(function) の例

変数だけのプログラムで書くと、、、

```javascript:1
const price = 6000; 
if(price > 5000) {
  console.log("高い");
} else if(price > 3000) {
  console.log("普通");
} else {
  console.log("安い");
}
```

```javascript:結果1
>> 高い
```
```javascript:2
const price = 4000; 
if(price > 5000) {
  console.log("高い");
} else if(price > 3000) {
  console.log("普通");
} else {
  console.log("安い");
}
```
```javascript:結果2
>> 普通
```
```javascript:3
const price = 1000; 
if(price > 5000) {
  console.log("高い");
} else if(price > 3000) {
  console.log("普通");
} else {
  console.log("安い");
}
```
```javascript:結果3
>> 安い
```

constの値を変えるたびに
同じプログラムをたくさん書かなければならない。

**だけど関数を使うと、、、**(関数宣言)

```javascript
function judge(price) {
    if(price > 5000) {
        console.log("高い");
      } else if(price > 3000) {
        console.log("普通");
      } else {
        console.log("安い");
      }
  }
```
```javascript:呼び出す
judge(6000);
>> 高い

judge(4000);
>> 普通

judge(1000);
>> 安い
```

これだけでいい！！すっきりー

#4. 関数式とは
さっきの関数は**関数宣言**と言い、巻き上げに注意しなきゃいけないよー！！
で、**関数式**は、関数に定数や変数に代入することができる
関数式は、**「無名関数」**とすることができ、関数名をつけなくてもいい！！


関数式で書く場合は、、、

```javascript
const 定数 = function(引数) {
    処理する内容
}

定数(引数);//関数式を呼び出す
```

**関数名**を省略できる！！（無名関数）

#5. 関数式の例

```javascript
const judge = function(price) {
    if(price > 5000) {
        console.log("高い");
      } else if(price > 3000) {
        console.log("普通");
      } else {
        console.log("安い");
      }
  }
```
```javascript:呼び出す
judge(6000);
>> 高い
```

関数名が定数に変わった感じ。


#6. アロー関数
その名の通り「アロー (arrow) (矢) =>」 を使った関数のこと。
関数式のfunction()部分をアローに変えれる。
アロー関数を使うと、コードがシンプルになり読みやすくなる

```javascript
const judge = (price) => {
    if(price > 5000) {
        console.log("高い");
      } else if(price > 3000) {
        console.log("普通");
      } else {
        console.log("安い");
      }
  }
```
```javascript:呼び出す
judge(6000);
>> 高い
```

こんな感じ。
デグレードの発生原因とその対策、発生時の対応

　ソフトウェア開発にデグレードは付き物です。
　ソフトウェア開発経験が長ければ長いほどデグレードを発生させてしまったことがあるのではないでしょうか？
　本記事ではデグレードが発生してしまったその後、どのように対応していけば良いかを記載します。

#デグレードとは
　客先リリース後にソフトウェアの変更を行い、修正モジュールをリリースする際に
　対応による影響範囲から外れたところに思わぬ影響があり、
　結果、新たに不具合があるままのソフトウェアをリリースしてしまうこと。

例えば・・・・
　「昨日までは動いてたけど、リリース後に動かなくなった」
　「iPhoneのアプリをアップデートしたら起動しなくなった」


#なぜデグレードすると怒られるのか
　お客さんからすればソフトウェアの構成などは知らぬ話。
　例えば、ベンツSクラスを点検に出して、返ってきた車がAクラスに変わってたら・・・？
　一方、ソフトウェア技術者的には「すぐ直る」話なので深刻に考えない。
　両者のギャップが怒りに繋がる。


#なぜグレードが起こるのか
- プログラムが密に構成されていて、再利用部分が多岐に渡っている。結果、プログラムの修正の際に影響範囲を特定しきれず、意図しない変更部分が発生する。
- ソース管理が不十分であり、他者が行った修正を上書きしてしまった。
- リリースの管理が不十分であり、リリースすべきモジュールがリリースされなかった。
- 利用しているモジュールのアップグレードによる仕様変更で、自開発のモジュールが正常に動かなくなった。
- 利用している計算機資源の設定変更により、自開発のモジュールが正常に動かなくなった。

　


#デグレードが発生した場合にすべき対応
以下の順で対応を行う。

1. 問題が発覚した部分を早急に修正する
1. お客さんに報告の上、暫定リリースを行う。
1. 問題が発覚した部分の原因を調べる（＝ここで初めてデグレードだとわかる状態）
1. デグレード原因となった変更に関連する部分のテストを早急に行う
1. 追加で修正が必要であれば修正を行う。
1. 追加対応分についてお客さんと協議を行う。（次回リリースで修正か、早急に修正するか決める）
1. お客さんに正式報告と謝罪を行う。
1. 損害賠償等があれば対応を行う。
1. デグレードが発生した時に気がつける仕組みを作る（テストコード作成の強化など）
1. デグレードが発生した時に気がつけるルールを作る


#デグレードを発生させない対処法

####プログラムが密に構成されていて、再利用部分が多岐に渡っている。結果プログラムの修正の際に影響範囲を特定しきれず、意図しない変更部分が発生する。
- テストコードを作成する。テスト密度を高くする。
- コミット前にリグレッションテストをする。
- 密になりすぎていて弊害がある場合は疎にする。ただしこの変更で新たなデグレードが発生しないように十分考慮する。


#### ソース管理が不十分であり、他者が行った修正を上書きしてしまった。
- gitを使う。衝突時のルールを決めておく。
- コミット時の差分チェックを行う。
- マージ時の差分チェックを行う。


#### リリースの管理が不十分であり、リリースすべきモジュールがリリースされなかった。
- 個別の環境でビルドしているケースがないか確認する。ビルド専用環境を作成する
- リリース手順を確立する。
- 作成したモジュールに対してリグレッションテストを行う


#### 利用しているモジュールのアップグレードによる仕様変更で、自開発のモジュールが正常に動かなくなった。
- 設計段階から使用するモジュールのバージョンを固定しておく。必要のないアップグレードはダウングレードを行う。
- アップグレードが必要なモジュールの場合、検証環境を用いて全件再テスト（単体、結合テスト）を行い、その後本番環境へ適応する。
- アップグレードが必要ないモジュールの場合、アップグレードを行わない。


#### 利用している計算機資源の設定変更により、自開発のモジュールが正常に動かなくなった。
- 計算機資源の設定ファイルに依存するプログラムを作成しない。
- 計算機資源の設定ファイルを変更した場合、関連するモジュールの動作確認テストを行う。
- 計算機資源の設定ファイルを元に戻す。
【Ruby On Rails】ネストした状態で、link_toメソッド内Prefixの後に書く括弧内の記述

すみません。完全なる備忘録です。。笑

# 前提
```rubyonrails:show.html.erb
  <% @fuga_events.each do |event| %>
  ----------------------------------------
    <ul>
      <div>
        <%= "名前：#{event.hoge.name}" %>
      </div>
      <div>
        <%= "アプリ：#{event.hoge.app_name}" %>
      </div>
      <div>
        <%= "開始日：#{event.started_at}"%>
      </div>
      <div>
        <%= "終了日：#{event.finished_at}" %>
      </div>
      <div>
        <%= "todo：#{event.todo}" %>
      </div>
      <div>
        <%= "場所：#{event.place}" %>
      </div>
      <div>
        <%= "見込：#{event.expected_reward}" %>
      </div>
      <div>
        <%= "報酬：#{event.reward}" %>
      </div>
    </ul>
    <div>
      <%= link_to "編集する", edit_hoge_fuga_event_path(), method: :get %>
      <%= link_to "削除する", hoge_fuga_event_path(), method: :delete %>
    </div>
  <% end %>
```

今回は、()内に渡したいparameterのid（キー）に相当するものを記述したい。
上記では、次の様にhogeが親でfuga_eventsが子のネスト状態となっている。

```rubyonrails:routes.rb
（前略）

    resources :hoges, except: [:index] do
      resources :fuga_events, except: [:index]
    end

（後略）
```

実際に、link_toメソッド内に記述されているPrefix（パス）、今回で言うとedit_hoge_fuga_event_pathとhoge_fuga_event_pathの後の括弧内にはどの様な記述が必要となるでしょうか。

# 書き方
```rubyonrails:show.html.erb
<%= link_to "編集する", edit_hoge_fuga_event_path(event.papa_id, event.id), method: :get %>
<%= link_to "削除する", hoge_fuga_event_path(event.papa_id, event.id), method: :delete %>
```
編集(editアクション)と削除（destroyアクション）機能には、それぞれ(event.papa_id, event.id)を記述しました。

# 考え方
私は<font color="Red">赤色</font>がネストの親、<font color="blue">青色</font>がネストの子を表していて、それぞれに対応するキーを記述する と考えました。

<%= link_to "編集する", edit_ <font color="Red">hoge</font> _ <font color="blue">fuga_event</font> _path ( <font color="Red">event.papa_id</font> , <font color="blue">event.id</font> ), method: :get %>

<%= link_to "削除する", <font color="Red">hoge</font> _ <font color="blue">fuga_event</font> _path ( <font color="Red">event.papa_id</font> , <font color="blue">event.id</font> ), method: :delete %>


# 気付き
決してこの様な書き方が必ずではありません。結局、考え方としては、パスの後に書く括弧内ではどの様なidが渡されるかを指定して書いてあげることが重要であると気がつきました。
【Android】GooglePlayのアプリを更新しようとしたらkeystoreのパスワードを忘れていた件

半年以上ぶりでアプリを更新しようとしたら、keystoreのパスワードを完全に忘れていました。

検索すると、下記ページを発見！
【Android】Androidアプリ開発でkeystoreのパスワードをど忘れした場合
https://alice3.net/android/post-1731

そこを読むと、パスワードを忘れた時に使えるGoogle提供のツールがあるらしい！
Android_Keystore_Password_Recover_1.07.jarをダウンロード
https://code.google.com/archive/p/android-keystore-password-recover/

コマンドプロンプトでパスを叩くも、「内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチファイルとして認識されていません。」と出る

javaが入ってないらしいので「jdk-15.0.1_windows-x64_bin.exe」をインストール

超久々にコマンドプロンプトを使ってみる、使ったコマンドは下記。
cd C:\test
java -jar Android_Keystore_Password_Recover_1.07.jar -m 3 -k user.keystore -d word.txt
※user.keystoreの前半部分は人によって違うかな

ちなみにパス生成プログラムはある程度パスワードにあたりつけて試すものだったみたいで、
word.txtにキーワードを書いて置くと、それを元に推測してくれるらしいです。
自分の場合は完全に忘れてしまっていたので、時間がかかって難しそうでした。

ある程度、キーワードとかが思い出せる人には参考になるかも？程度ですが、一応記録しておきます。
Git で履歴を保ったまま Mono-repository に merge in する


monorepo に subrepo をマージ in する方法

monorepo 内での位置を決めておく
====
まず初めに、monorepo 内での subrepo のディレクトリを決めておく必要がある。

ここに移動したらすぐに動くはず、というのが決まっているなら、シンプルにそこを指定すれば良い。
例えば `subrepo` -> `monorepo/library/subrepo` 等になるパターン。

そうで無い場合、一旦 `monorepo/temp/subrepo` としてマージして、その後、順次 `temp/subrepo` 内のファイルを編集・各ディレクトリに移動すればよい。

**まずは全てのファイルを同時に `temp/xxxx` にマージする** のが大事。


subrepo を monorepo にマージする
====

以下を monorepo 側で実施

```
git remote add subrepo {subrepo ディレクトリへのパス}
git fetch --all
```

特にリモートを指定する必要は無いので、subrepo はローカルディレクトリで良い

subtree merge する
---
https://docs.github.com/en/free-pro-team@latest/github/using-git/about-git-subtree-merges
ここに書いてある事をそのままやればよい。

```
git merge subrepo/master --allow-unrelated-histories  -s ours --no-commit
git read-tree --prefix=temp/subrepo -u subrepo/master
git commit -m "Subtree merged subrepo into temp/subrepo"
```

このとき `--allow-unrelated-histories` を指定しないと `fatal: refusing to merge unrelated histories` で失敗する。

お好みでやっても良いこと
====

無駄なバイナリ履歴を削ぎ落とす
----

既に使われていないバイナリで、過去の履歴に残存しているものが無駄な場合、このタイミングで git-lfs に変換するとよい。

（これは追加作業でミスの恐れもあるため、移動の一環としてしれっとやるのはやめて、メンバーと相談すると良い。）

必要があれば https://github.com/git-lfs/git-lfs/blob/master/docs/man/git-lfs-migrate.1.ronn を確認して作業する。

etc. （何か思いついたら書く）
Realtime Database (Flutter + VanillaJS)でチャットを作った時の覚書

#はじめに

チャットアプリを作る場合、Socket.ioなどで自前で実装することが多かったのですが、今回、Realtime Databaseを使って実装してみたので、その覚書です。フレームワークは今回はFlutterを用いていますが、PWA(Progressive Web Apps)で作る場合でも、相互にデータをやりとりできるため、非常に便利です。今回はアプリと、Webの方では要件からVanillaJSでcallする必要があったのでそれぞれからの呼び出しをメモしておきます。

https://firebase.google.com/docs/database/web/lists-of-data?hl=ja


#制限事項
(プライシング)
https://firebase.google.com/pricing/?hl=ja
RealTimeDatabaseは無償の場合は、同時接続=100、容量=1GB、転送量=10GBが最大。
課金に移行した場合でも、容量=$5/GB、転送量=$1/GBかかってくるので
リアルタイム性が必要ないものは、Firestoreに逃すなどが必要かもしれません。
とはいえ、Firestoreの方は、書き込み = $0.18/10 万 / 読み込み =$0.06/10 万 / 削除 = $0.02/10 万と、リクエス数に応じて金額が上がるので、頻繁に書き込みがあるか、データの容量が多いのか、その辺りでどちらをどう使うか、判断が必要そうな感じ。
(Node-redなどを使って、Socket.ioなどで実装しmonogoDBなどでstoreするなど、
金額を考えた場合はもっと他の選択肢もあるかもしれませんがこちらは試算していません。。)


#前提
FirebaseSDKのimportまでは済んでいる状態

#実装
##Flutter(App)

FirebaseのRealtimeDatabaseでは下記のような構造を想定します。

<img width="382" alt="スクリーンショット 2020-06-30 18.26.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/b8f0f3d5-8922-10bc-b4a4-f4c52209bf10.png">

まずは、Appのデータ送信部分。gidは、この事例でいく9TrzkKitHwHcO0x350jl というグループIDを示しており、
例えばチャットルームIDなどの識別子として利用します。今回はその下に、messagesと言うディレクトリをほり、そこにdataを追記(push)していく構造を取っています。
Firebase 参照に新しい子が追加されると、そのたびに push() メソッドは一意の ID を生成し、さらに、これらは時系列に並ぶようになっています。


```sendMsg.dart
  void sendData(String text) {
    Map data;
    data = {"name": "user1", "message":"hello"};
    database.reference().child(widget.gid + '/messages').push().set(data);
  }

```

次にデータの取得部分です。Realtime Databaseの場合、追加、更新、削除の時に
自動で描画して欲しいため、FirebaseAnimatedListを用いています。これを行うと、いわゆるチャットの挙動になります。


```getList.dart
Expanded(
    child: FirebaseAnimatedList(
        query: database.reference().child(widget.gid + '/messages'),
        itemBuilder: (_, DataSnapshot snapshot,
            Animation<double> animation, int index) {
          data = snapshot.value;
          return message(data['name'], data['message']);
        })),
```


##VanillaJS(Web)

JavaScriptの場合は、下記のようにsendします。

```sendMsg.js
var database = firebase.database().ref(_gid).child('messages');
database.push({
    name: 'user2',
    message: 'hello'
});
```


```getList.js
var database = firebase.database().ref(_gid).child('messages');
database.on('child_added', function (snapshot) {
    var msg = snapshot.val();
    $("#message_list").prepend(formatHtml(msg.name,msg.message));
});
```

#おしまい
SSA最適化などで使われる支配辺境の例え話

# はじめに


部屋を片付けていたら、タイガーブックが発掘されたんですよ。
そこで、SSA最適化の章を読んでいて支配辺境のことについて完全に理解した上に天才的な例え話を思いついたのでここに報告するものであります。

## 1. コードフロー

すべての道はローマに通じるとしましょう。
道はローマからトルコを通り、アフリカ、インドに通じていてシルクロードを通って中国、韓国、日本と通じています。
またインドからシンガポールを経由して日本に通る道もあります。そして、日本からは船でローマに使節団が送られ通じているとします。

このお話を図にすると

```
ローマ
^　 |
|トルコーアフリカ
|　 |
|　 |
|　インドーーーー中国
|　 |　　　　　　 |
|　 | 　　　　　韓国
|シンガポール--+ |
|　  　　　    ||
|            日本
+ーーーーーーーー
```
こんな図が書けます。

## 2. 支配木

```
ローマ
　 |
トルコ
　 |　|
　 | アフリカ
インドーーーーーーーーー
　 |　　　　　|　　　　｜
シンガポール　日本　　中国
　　　　　　　　　　　　｜
　　　　　　　　　　　韓国
```

支配木はこのような形になります。

## 3. 支配辺境

```
ローマ{ローマ}
トルコ{ローマ}
インド{ローマ}
アフリカ{}
中国{日本}
韓国{日本}
シンガポール{日本}
日本{ローマ}
```
となります。


## 参考になりそうなソース

https://github.com/caojoshua/CS142B-Java-Interpreter-Compiler/tree/d98dcfaa3c16599896618346f8a5a1136f5180b8/JavaByteCodeCompiler

https://github.com/Calsign/cs6120_work/tree/d8cb5c1558bcce0681f85147b9de8c2b17aa41be

https://github.com/stp59/adv-compilers/tree/fc94d14b11e5e4b8b4940d4b419e4791716bc614

https://github.com/priyasrikumar/6120/tree/5d00f93704622a21556a18ef54521f0243e008c0

https://github.com/backtracking/ocamlgraph/blob/master/src/dominator.ml
【Oracle】データベースの文字コードを確認する

# はじめに

職場のDBを新しいバージョンのOracleにアップグレードする際に、既存の文字コードを念のため確認することになったのですが、その際に使ったSQLを備忘録として記事に残しておきます。

# 使用した環境

* Oracle社が提供している[Oracle Live SQL](https://livesql.oracle.com/)でOracle19cを利用しました。

# 作成したSQL

* NLS_DATABASE_PARAMETERSテーブルに登録されているNLS（National Language Support）パラメータの中から、NLS_CHARACTERSETの値を取得します。
* [こちらの記事](https://dev.classmethod.jp/articles/rds-for-oracle-nls-param/)によると、RDS上のOracleはデフォルト値が「AL32UTF8」となっているそうです。

```sql:
SELECT
  *
FROM
  NLS_DATABASE_PARAMETERS
WHERE
  PARAMETER='NLS_CHARACTERSET';
```

# 実行結果

* ちなみに職場のDBの文字コードは「JA16SJISTILDE」でした。
 * Shift_JISをNLS表記にすると「JA16SJISTILDE」となります。

|PARAMETER|VALUE|
|---|---|
|NLS_CHARACTERSET|AL32UTF8|

# 参考URL

* [Oracle で日本語を取り扱うときの文字コード](https://www.shift-the-oracle.com/config/multibyte-characterset.html)
* [知らないとチョットつまづく RDS for Oracle の NLS パラメータ](https://dev.classmethod.jp/articles/rds-for-oracle-nls-param/)
Sortable + TinyMCE

## 困ったこと

TinyMCE が含まれる要素を並び替えした場合に、TinyMCE の `iframe` の中が空になってしまう。

## 使用したライブラリ

* DOM 操作には [Umbrella JS](https://umbrellajs.com/) を使用
* 要素の並び替えには [Sortable](https://github.com/SortableJS/sortablejs) を使用

## Sortable のベーシックな記述方法

並び替え要素に TinyMCE が含まれていなければ問題ない。

```javascript
var options = {
    handle: '.js-cursor-move',
};
u('.js-sortable').each(function(elem){
    Sortable.create(elem, options);
});
```

## 並び替え要素に TinyMCE が含まれている場合の書き方

並び替え開始時に TinyMCE を解除して、並び替え完了時に TinyMCE を再設定する。

```javascript
var options = {
    handle: '.js-cursor-move',
    onStart: function(evt) {
        u(evt.item).find('.js-wysiwyg-editor').each(function(elem){
            tinyMCE.execCommand('mceRemoveEditor', false, u(elem).attr('id'));
        });
    },
    onEnd: function(evt) {
        u(evt.item).find('.js-wysiwyg-editor').each(function(elem){
            tinyMCE.execCommand('mceAddEditor', true, u(elem).attr('id'));
        });
    },
};
u('.js-sortable').each(function(elem){
    Sortable.create(elem, options);
});
```
飲み会に参加したいといった人にだけ開錠できる箱のロジックメモ

#前提
　LINE Botで今日飲み会に行きたい人を募っていきたい人がDBに登録されている
　今日飲みに行きたい人は飲みに行く前にブツを受け取れる権利がある。

#元々考えていた案
　飲みたい登録をしてくれた時に、QR何かをメッセージで送って、
　箱側にリーダーをつけておいて読み取って対応
　⇒リーダーめっちゃ高い。

　逆に箱にQRをつけておく。PayPayみたいな
　⇒仕組みよくわからんな。そして別に御金は要らない想定。

#今回考えた案
LINE Botに登録するときのロジックを見直す。

こっちのほうがユーザは楽かも。
###その１

飲みたい登録をしてくれた時に１～３を順番に行う
１．ランダムな〇桁の文字列を生成
２．文字列を開錠用の飲めるテーブルに保存
３．開錠用のメッセージをLINEで参加者に送る

飲みに行く前に４を行う。
４．それをそのままコピペしてブツ受け取り時にメッセージとして送信もらって、DBにぶつけてあれば、モーターを起動
　　
　　ん？人を識別できて開錠するのであれば、開錠って「メッセージを送る」もしくは「メニューをタッチ」だけでいいのか。

###その２
飲みたい登録をしてくれた時に１を順番に行う
１．前提より、登録してくれた時に「飲みに行く前にブツを受け取るときに開錠って送ってね」とメッセージを送る

飲みに行く前に２を行う。
２．開錠とメッセージを送る

いけた。あとは、レスポンスを速くするためにどういうDBを使うかか。
【初心者向け】開発でよく使うGitコマンド集メモ

本格的に仕事で Git を使うようになってから半年が経ちました。
よく使うコマンドのまとめです。

:warning: ( )がついてるものは可変部です！

##リモートリポジトリ（GithubとかGitLabにあるやつ）からソースをローカルに持ってくる

```bash
$ git clone (URL)
```


##ブランチを作る
```bash
$ git branch (ブランチ名)
```

##今ある全ブランチ一覧を確認する
```bash
$ git branch -a
```


##変更をステージングエリアに追加（コミット前の準備)
```bash
$ git add .
```

もしくは

```bash
$ git add (ファイル名)
```

##コミットする
```bash
$ git commit -m "(コミットメッセージ)"
```
:warning: プロジェクトによってコミットメッセージのルールなどあるかもなので確認


##リモートの master ブランチに変更があったときにローカルの作業ブランチにマージする
```bash
$ git pull -—rebase origin master
```

（なるべくリモートリポジトリとの差分を少なくするため、こまめにやっておくと良いらしい。）

コンフリクトがあった場合はコンフリクトを解消してから以下を実行 

```bash
$ git rebase —-continue
```



##強制的に master をマージ
①リモートの最新を取ってきておいて・・

```bash
$ git fetch origin master
```

②ローカルの master を、リモート追跡の master に強制的に合わせる

```bash
$ git reset --hard origin/master
```

##リモートリポジトリにソースをあげる（プッシュする）
```bash
$ git push origin (作業ブランチ名)
```

##作業中の変更を保存する（レビューなどで別ブランチを見たいときとか）
```bash
$ git stash save -u “(自分が分かる名前をつける)”
```

##一つ前のコミットを取り消し（変更はそのまま残す）
```bash
$ git reset —-soft HEAD~
```

##一つ前のコミットに上書き（コミットしたあとにちょっとだけ変更したいとき）
```bash
$ git commit --amend -m “コミットメッセージ”
```


##Git 操作をやり直したいとき（「違うコマンド実行しちゃった…」のときとか）
①git操作の履歴を見る

```bash
$ git reflog
```

②戻りたい番号を指定して以下実行

```bash
$ git reset --hard HEAD@{(戻りたい番号)}
```
業務でSVN使っているが、今後のためにGit,GitHubと比較してみた。

#【業務でSVN使っているが、今後のためにGit,GitHubと比較してみた。】

業務でSVNを使用していますが、Git,GitHubの方がメリットが多いと知りました。
そのため、業務外でGit,GitHubを使うようにしています。
後々のGit,GitHubのチーム開発に参画した時のために学習しています。

SVNを使ってはいますが、TortoiseSVNを使ってのGUIでの操作です。
コマンド操作は一切していません。
そのため、混乱せずにGitを学んでいけそうです。

（私の主観的な側面が多い記事になってしまっています。ゆるくご覧頂けると嬉しいです。）

##Git　世界標準

ソースコードのバージョンを管理するツール。
分散型バージョン管理システム。
Macには、標準搭載されている。

##GitHub　個人の作業をバージョン管理できる。

「Git」を利用した開発支援のWebサービス
GitHub以外にも類似のWebサービスは存在している。
開発者がローカルでソースのバージョンを管理することが可能。

##※SVN　チームの成果しか管理できない。

集中型バージョン管理システム。
１コミットをハードルが高い。
また、エラーを特定する際にわかりにくい。
→これといって、メリットがわからない。

Git コミット（ローカルリポジトリ）してから、プッシュ（リモートリポジトリ）へ
　作業単位で気軽にコミットできる。
　他の開発者と競合しない。

SVN　（リモートリポジトリ）
　競合する。赤色警告？的なのが表示される。
　Gitよりは気軽にコミットしにくい。（一時コミット用にブランチを作成することでコミット可能）

→結論、Gitが世界標準であるため、SVNについて深く学ぶ必要はない(?)のかなと思いました。
UdemyでGitの教材を購入して、プログラムの勉強をしつつGitの学習もしています。

##余談

GitとSVNを比較して、SVNの方が優れている点はないように感じました。
もし、SVNの方が優れているところなどありましたら、教えていただきたいです。

（正直、とても内容が薄いです。。自分が短期間に調べた結果、分かった内容です。）
AlamofireのresponeJsonでJSONを楽に扱う

Alamofireには、JSONを返すAPIを扱うためのresponseJSONというメソッドがあるが、あまり使われていないので紹介。

## responseJsonとは？
Apiから返却されたjsonを[Any : Any]のdictionaryへと格納するメソッド。
jsonを型にマッピングする必要がないため、かなり記述量が減る。

例えば
``
{
  age: 90
}
```
というjsonが、

```swift

["age": 90]
```
のようなdictionaryに格納される。
デメリットとしては、型情報が全てAnyで帰ってくるため、バリデーションは自前で実装する必要がある。

```swift

import Alamofire

let url = "https://swapi.dev/api/people/1/"

Alamofire.request(url).responseJSON { response in
    if let json = response.result.value as? NSDictionary {
        print(json)
        // 以下が表示される。
        // {
	        // "name": "Luke Skywalker",
    	    // "height": "172",
	        // "mass": "77",
	        // "hair_color": "blond",
	        // "skin_color": "fair",
	        // "eye_color": "blue",
	        // "birth_year": "19BBY",
	        // "gender": "male",
            // ...
        // }
    }
    print(response.result)
}
```

```json
スターウォーズApiから返却されるJSON
{
	"name": "Luke Skywalker",
	"height": "172",
	"mass": "77",
	"hair_color": "blond",
	"skin_color": "fair",
	"eye_color": "blue",
	"birth_year": "19BBY",
	"gender": "male",
    ...
}
```

情報を取り出したい場合は以下のように、通常のdictとして扱える。

```swift

json["name"]
json["hair_corol"]
```
Visual Studio Code のおすすめ拡張機能を設定する機能

# Visual Studio Code のおすすめ拡張機能を設定する機能

Visual Studio Code を使ってワークスペースで作業するときに、`.vscode/extensions.json` を作成して JSON 形式で Visual Studio Code のプラグインの `拡張機能ID`を指定することで、ワークスペースを開いたときにユーザーに拡張機能をおすすめすることができます。

例えば [gitlens](https://gitlens.amod.io/) では
https://github.com/eamodio/vscode-gitlens/blob/main/.vscode/extensions.json は以下のような内容になっています。

```
{
	// See http://go.microsoft.com/fwlink/?LinkId=827846
	// for the documentation about the extensions.json format
	"recommendations": [
		"dbaeumer.vscode-eslint",
		"eamodio.tsl-problem-matcher",
		"esbenp.prettier-vscode",
		"ms-vscode.typescript-javascript-grammar"
	]
}
```

これにより、[gitlens](https://gitlens.amod.io/) のソースコードのフォルダを Visual Studio Code で開くと記載している `拡張機能ID` がおすすめされます。

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
https://marketplace.visualstudio.com/items?itemName=eamodio.tsl-problem-matcher
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
https://marketplace.visualstudio.com/items?itemName=ms-vscode.typescript-javascript-grammar

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500246/552d3501-dc50-37de-995d-d31409b4a8f4.png)

## 参考サイト

* https://code.visualstudio.com/docs/editor/extension-gallery#_workspace-recommended-extensions
* https://github.com/eamodio/vscode-gitlens/blob/main/.vscode/extensions.json
git pushしたらfetch firstでrejectedになった時の対処法

#エラー発生
`git push`したところ下記のエラーが発生

```
$ git push origin master
To https://github.com/xxx/xxx.github.io.git
 ! [rejected]        master -> master (fetch first)
error: failed to push some refs to 'https://github.com/xxx/xxx.github.io.git'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
```

#対処法
[GitHubへのpushが「fetch first」と表示されてrejectedとなったときの対処]
(https://wonderful-tereshkova-38f91d.netlify.app/GitHub%E3%81%B8%E3%81%AEpush%E3%81%8C%E3%80%8Cfetch%20first%E3%80%8D%E3%81%A8%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%A6rejected%E3%81%A8%E3%81%AA%E3%81%A3%E3%81%9F%E3%81%A8%E3%81%8D%E3%81%AE%E5%AF%BE%E5%87%A6/)
上記記事が大変参考になったが、説明が最初で結論が最後だったため若干戸惑った点があったので、本稿では結論のみに絞って書きたい。

1.`git status`で状況を確認する。

```
$ git status
On branch master
You have unmerged paths.
  (fix conflicts and run "git commit")
  (use "git merge --abort" to abort the merge)

Unmerged paths:
  (use "git add <file>..." to mark resolution)

	both added:      index.html
```

index.htmlがマージされていないので`git add`と`git commit`をしろとのこと。


2.`$ git add index.html`
3.`$ git commit -m "2nd commit"`
4.`$ git push origin master`

※適宜`git status`で状況を確認するとよい。
未経験からコロナ期にWeb系自社開発企業で働いてから1ヶ月経った


独学期間6ヶ月間を経て2020年10月にWeb系自社開発企業でエンジニアとして働いています。

この記事を書くメインの目的は、自身の備忘録としてですが、
「**自社開発企業で働いてからのリアルな記事が少ないな~。**」と思ったので、これから転職を考えている人の一助になれば幸いです。
実際に良い点からだけでなく気になる点まで、リアルな所感を綴っていこうと思います。

##自身の略歴
・24才
・学歴は普通くらい(March)
・プログラミング経験はなし
・新卒Slerを1年で退社（その後独学期間6ヶ月）
・ポートフォリオはRuby + Ruby on Railsで掲示板サービスを作りました。
URL: https://www.shitsumonwa.com/ 

**今回はWeb系エンジニアに就職に至るまでの過程は省略します。**

##実際働いてみてどうなの？

職場の方にも恵まれ、今のところ毎日楽しく働けています。
(THE　BRILLANT JERKもいません。)
企業のカルチャーにフィットしたのも、大きいですが具体的によかった点（その後気になった点も）羅列していこうと思います。

###良い点ポイント


####最新Mac Book Pro支給
スペースグレイの　１６インチを入社日に支給頂きました。
前職はWindowsユーザーでしたので、めちゃくちゃ感動しました。
その他にも自身好みの作業用チェアが支給され、エンジニアの作業環境は整えられています。

####働き方の自由度が高い
弊社は服装や髪色の規定がありません。
面接でも確認済みでしたが、いざ働いてみると最高で、
社内のSler出身のエンジニアの方も「もうスーツ仕事には戻れないよね~。」
って言ってました。
またアウトプットを最大化する目的で、嗣業中のイヤホン着用やソファに寝そべっての作業はOKです。この辺もWeb系ならではの働き方ですよね。

####最新の技術に触れることができる
自社サービスの中に、流行りの言語をどんどん取り入れていくスピード感が早いです。
現に現在のフロント周りは、VueとReactを部分的に取り入れています。
また直近のタスクでは、jQuery→Type Scriptへの移行を経験しました。
インフラ面でも、多くのAWSサービスを利用しています。
技術に対してのアンテナが高い人が多く、この辺は楽しいところかもしれません。

####意思決定から実装までのスピードが早い
冗長なハンコ文化や形式だけの会議がないため、実装に着手するまでの時間が早いです。
実際に入社にしてから、サービスの改善点を皆の前で発表する機会はあったのですが、「じゃあ、この中からやってみたいの実装してみようか。」
的な感じで次の日にはもう要件定義をして開発をしていました。

####一連のアジャイル開発の流れを経験できる
要件定義→開発→テスト→リリース→効果検証
の一連の流れを経験できるのは自身にとって大きなメリットかなと思っています。
また自身で提案した物を実装する流れになるので、**開発に熱が入りやすい！**
そして、Google ConsleやGoogle Analiticsを使って効果検証を行い実際に本適用するか判断する過程で、
Webマーケティングの知見も多少なりとも得られそうなのも大きいなと思っています。

###気になる点

雑食サロンを運営されている勝又健太さんの動画に全て言いたいことが、まとめられていました。
（https://youtu.be/7gqlnUs3Ddg）
(独学時に勝又さんの動画には大変お世話になりました。)

####社内のエンジニアとのレベルの差が大きい
これは勉強して差を埋めていくしかないですが、当面の間メンタル的にきつくなる可能性は十分にあると思っています。
というのも、経験的にも地頭的にも劣っているからです。

具体的に弊社では
・**大手Web企業でバリバリ働いていたエンジニア**
・**中学生の時からプログラミングをいじっているエンジニア**
・**大学生の頃にハッカソンで賞をとっているエンジニア**
また、他業種からの未経験で転職してきた組の方(25~30才)は、旧帝大早慶をでているような賢い方々です。
震えます。今の所勝てる要素ないです...

皆が「これは簡単だよね。」「軽いタスクだから早くできそう！」
っているタスクや実装が自身にとっては難解です。
プログラミングは楽しいですが、毎日自身の未熟さに打ちひしがれています。
これは**実際の体験談**ですが、jQuery→Type Scriptへ移行するというタスクで
自身が100行移行しているうちに、別のエンジニアの方は10000行していました...

先日行われたエンジニアMTGでも内容が分からず一言も発言できませんでした...

####無限に勉強することがある
これは、気になる点に入るか微妙ですが山ほど勉強することがあります。
Java、独自のフレームワーク、SQL、Type Script、React、Git、CS、業界知識、各種ツール(Sequal Ace, Source tree, Adobe XD Google Console, Google analitics, etc...)
どれも業務で使うので学習しなければならないですが、**学ばなければならない知識量が独学時とは比べ物になりません。**
毎日、道筋の見えないモヤモヤ感と焦りがあり多少のストレスになっています。
まあやるしかないので優先順位をつけて、都度学習していこうと思います。

##おまけ

ちょっとした余談。
なぜこのコロナ期に採用されたのか気になって聞いてみました。
社会人経験も浅く、ポートフォリオの質も正直高いとは言えません。
内定を頂いてから、わかった事なのですが、Paizaの通過レベルがSランクに設定されていました。
（ちなみに自身はCランクくらいのレベル感）
聞いたところによると、驚くべき経歴やスキルセットの方も落ちているようでした。

大まかな理由としては、
**「年齢」と「エンジニアとして伸びそうか」**の2つが大きかったみたいです。
24(若いのかこれ？)という年齢が良い方に作用したようです。
また「素直」で「真面目」という個人の性格が「エンジニアとしての成長」を加速してくれるかもと思って頂けたみたいです。

スタートアップの自社開発企業は人数が少ないので、周りのエンジニアとの相性が良さそうかがかなり見られていて、弊社ではかなり採用する際の大きなファクターとなっているみたいです。

とどうでも言い振り返りでした。
さーて、Codewarsやってきます！
また気が向いたら振り返り記事書こうかな。ではアディオス！
EC2にDockerをインストールして起動してみた

# はじめに
EC2 (AmazonLinux2)にDockerをインストールして使ってみた時の備忘録です。
普通はECSやElasticBeanstalkなどのコンテナ基盤を使うと思うので、あまり機会はないかもですが書いてみました。

## EC2でDockerをインストールしていく

EC2にログインします

~~~
$ ssh -i ~/.ssh/****.pem ec2-user@***.***.***.***
~~~

git をインストール

~~~
$ sudo yum install git -y
~~~

Docker をインストール

~~~
$ sudo amazon-linux-extras install docker -y
~~~

Docker を起動

~~~
$ sudo service docker start 
~~~

# おわりに

もし `ERROR: Couldn’t connect to Docker daemon at http+docker://localhost – is it running?` みたいなエラーが出ればこちら↓の記事を参考にしてみてください。

https://qiita.com/u_query/items/14a31721a2870b735938
Swift5 XMLParserを使ってXML解析をする①


##はじめに
ネット上のXMLデータを解析して、表示します。
XMLデータを解析したアプリを作ったのは初でした。
ただ、やることはJSON解析の時と一緒です。
また、特別なライブラリをインポートすることなくできました。
今回の①では流れとデリゲートメソッドを紹介します。


XCodeのバージョンは　12.2　です

MacOSのバージョンは　11.0.1　です

それではいきましょう。

##XML解析について
XMLで記述されたデータはタグというものに入っています。
具体的には＜項目名＞という形をとります。
このタグに情報を格納します。
これを解析ではエレメントとか要素とか言いまして、解析をすることで情報を取り出し、使用していきます。
（下記参考画像：総務省　電子政府の総合窓口が提供している法令のXML形式のデータを引用しています。）
![XML①kizi.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657690/660e9e92-7a85-b98a-44bd-216616ab3cd9.png)

検索してもただの文字の羅列ですが、
GoogleChromeの拡張機能を入れると、このような形に自動的に変換してくれます。



##XML解析で使うデリゲート
XMLParserDeligeteを使います。UIKitの中に入っているので特段インポートするものはありませんでした。


###XMLParserの流れ
####1.リクエストを投げる用の変数を用意する
インターネットを使うので、当然URL型の変数を用意します。

```swift:
let url : URL = URL(String:"対象のURLが入ります")  
```

でもいいですし、

```swift:
let urlString : String = "対象のURLが入ります"
let url(ContentsOf: string("urlString"))  
```


とかでも問題ありません。

####2.変数を用意します

解析したデータの最初の要素グループを入れる宣言を用意します。

```swift:要素用の変数
var currentElementName : String!
```



次にそのグループの中に入っている、項目ごとの要素に併せて、型を宣言します。
また、配列の変数を宣言して、要素グループ単位でひとまとめにしてデータを整理します。


クラス宣言
あらかじめ別クラスで要素を定義
コントローラー上でインスタンス化

```swift:クラス
var element = [String]()
```

辞書宣言

```swift:辞書型
var element[name:String, ...]
```


解析するXMLの要素の項目が沢山あると、コードが間延びするので別のクラスを作った方が良いと思います。

別のクラスで要素が入る変数を設定⇒解析するコントローラーで配列を宣言


####3.XMLParserDelegateを実装する

対象のコントローラーにデリゲートを記述します。


####4.デリゲートメソッドを実装する

後述するパースの実行をするとデリゲートメソッドが呼び出され、順に実行されていきます。

#####XMLParserのデリゲートメソット
とりあえず、今回使ったデリゲートを紹介します。
今後、時間が取れ次第他のデリゲートメソッドも紹介していきます。

#####XML解析の開始時
```swift:
func parserDidStartDocument(_ parser: XMLParser) {
}

```

ここにはコメントなんかを入れたりします。

######要素の読み込み時
```swift:
func parser(_ parser: XMLParser, didStartElement elementName: String, namespaceURI: String?, qualifiedName qName: String?, attributes attributeDict: [String : String]) {
}
```


ここでは、読み込んだ際の準備をします。
具体的には、2で宣言した要素グループがあった場合に要素の変数を空にして、新しい要素を入れる準備をしたりします。
引数のelementNameは要素グループを指します。

######要素が見つかった時の挙動
```swift:
func parser(_ parser: XMLParser, foundCharacters string: String){
}
```

ここで要素をどう処理するかについて、記述します。
2で用意した変数に追加します。
クラスで作成した時も、辞書型で宣言した時もどちらも配列の型をとりますので、appendで追加していきます。

######要素が見つかった時の挙動が終わった時
```swift:
func parser(_ parser: XMLParser, didEndElement elementName: String, namespaceURI: String?, qualifiedName qName: String?) {
}
```


ここでは次に解析される要素グループの為に、現在入っている要素グループを空にします。
空にしないと次に追加される要素が、前の要素と連結して一つの要素になって配列に入ってしまいます。

######要素の読み込みが終わった時
```swift:
func parserDidEndDocument(_ parser: XMLParser!)
}
```



全ての解析が終了した時の処理を書きます。
XML解析はデーブルビューあたりと併用して使うことが多いので、
ここで、テーブルビューの更新をしたりします。

また、ここ以外で更新をしようとすると
の警告が出ます。無視できますが、処理速度はかなり低下します。



####5.パース実行の記述をする
```swift:
parser.parse()
```


この記述をするとパースの処理が順に実行されていきます。



##今回はここまで

次回では実際に作ったアプリを元に、
このメソッドを使ったコードを簡単に紹介していきたいと思います。
【初心者】リレーショナルデータベースとは

# データベースとは
データベースとは、様々なデータの検索や登録や変更や削除ができるようになっているシステムのことです。

# リレーショナルデータベースとは
データを種類ごとにテーブル(表)の形で保持しておき、必要に応じてテーブルを連結したり加工できるデータベースです。

# リレーショナルデータベースの特徴
## データとロジックが分離している
データベースには、データとロジックが分離しているという特徴があります。
同じテーブルでもロジックを切り替えれば、違う集計ができます。
リレーショナルデータベースではデータとロジックが分離しているため、様々な集計や検索が切り替えやすくなっています。

## データを柔軟に組み合わせられる
リレーショナルデータベースでは、種類ごとに細かくテーブルを分けます。
そして必要に応じてテーブルを結合することで、望みの結果を得ます。
結合するデータを分離するよりも、分離されたデータを結合するほうがずっと簡単です。
リレーショナルデータベースでは、扱いやすい形でデータを保持しておき、必要に応じて組み合わせるので、柔軟な操作や検索ができます。

## データの整合性を保つ
リレーショナルデータベースでは、データを一箇所にのみ保持して、必要に応じてテーブルを連結します。
そのためデータを修正する際、一箇所だけ修正して再連結すればよく、いろんな箇所を探しまわって修正する必要はありません。
このように、リレーショナルデータベースではデータの整合性を保ち、不整合を起こさないための機能を備えています。

## 大量のデータを扱える
テーブルの行数が数十億単位であっても問題なく動作します。
さらにコンピュータの台数を増やして性能を上げることもできます。

## 同時変更による競合を考慮している
データベース製品にはトランザクション機能があり、変更の競合を検出したり、整合性が取れなくなったら変更をキャンセルできます。

# テーブルについて
## テーブルの構造
テーブルは行と列で構成されます。
以下は主キーがIDのテーブルです。

|ID|名前|メールアドレス|性別|
|---|---|---|---|
|1|エレン|elen@example.com|男|
|2|ミカサ|mikasa@example.com|女|
|3|アルミン|arumin@example.com|男|

行を識別するのは主キーの値です。
列を識別するのは列名です。
行が集まったものがテーブルになります。

## テーブルには行の順番がない
リレーショナルデータベースのテーブル（表）では、行の順番は保持されません。
テーブルは行の集合であって、順番を保持する行のリストではないからです。

## 参考
[わかりみSQL](https://booth.pm/ja/items/1576397)