OmniAICreator/Qiita-1.07M huggingface dataset:
2020/06/12 プログラミング(フロントエンド)学習13日目 メモ

# 本日の学習範囲
### たにぐち まことのともすたチャンネル(YouTube)
https://www.youtube.com/user/tomostajp
Bootstrap 4入門 #01〜#02
（学習時間：2時間）
## Bootstrap学習メモ
### Bootstrap
https://getbootstrap.jp/
Twitter社が提供している、
HTML・CSS・JavaScriptで構成されるオープンソースのフレームワーク
CSSのみの場合、トップページ下部にあるコード
`<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">`
をコピーして、<head></head>内に記述すると使用できるようになる
リセットCSSが含まれている
### 基本的なタグの用意（VSCode）
コード記述部分で「html:5」と記述して［tab］を押すと、
`<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
</body>
</html>`
と記述される
### .container
グリッドシステムを使用する場合に必要なレイアウト
コンテナを与えるクラス
`<div class="container"></div>`
とすることにより、ブレイクポイントでmax-widthが変わるようになる
### グリッドシステム
グリッド(サイトの横幅を均等に分けるガイドライン)を活用してレイアウトできるシステム
Bootstrapでは12本のグリッドが存在する
### ブレイクポイント
CSSソース内で適用スタイルを区切る位置
.containerでは5段階の幅で分けられている
Extra small…画面幅544px未満→.container幅auto
Small…画面幅544px以上768px未満→.container幅576px
Medium…画面幅768px以上992px未満→.container幅720px
large…画面幅992px以上1200px未満→.container幅940px
Extra large…1200px以上→.container幅1140px
### marginを要素にクラスで適用する方法
`<div class="m-１"></div>`
m…margin
mt…margin-top
mb…margin-bottom
mr…margin-right
ml…margin-left
mx…margin-right&margin-left
my…margin-top&margin-bottom
0…marginの値が0
１…marginの値がspacer×0.25
2…marginの値がspacer×0.5
3…marginの値がspacer
4…marginの値がspacer×1.5
5…marginの値がspacer×3
auto…marginの値がauto
### spacer
1rem (標準), or 0 より大きい任意の値
### .row
行に与えるクラス
コンテナを水平に分割し、上から下へと並ぶ
`<div class="container">
　<div class="row">
　</div>
</div>`
### .col
列を表すクラス
.rowを縦に割り、左から右へ並ぶ
`<div class="container">
　<div class="row">
　　<div class="col">
　　</div>
　</div>
</div>`
### offset
`<div class="col-○ offset-○"></div>`
指定した列の数分だけ右に移動する
## その他
先日まで苦労していたレスポンシブ対応が、
Bootstrapを活用することで随分楽になると思った。
Bootstrapの動画を見終えたら、
それを活用したレスポンシブ対応のコードの書き換えに挑戦しようと思う。
欠損値の種類と対処


* 欠損値の種類と、対応方法についてメモ
* 大体、[[欠損データ分析 (missing data analysis)
-完全情報最尤推定法と多重代入法](https://koumurayama.com/koujapanese/missing_data.pdf)]を参考にしてる

## 種類

### Missing Completely At Random (MCAR)

* **ある変数で、欠損値がランダムに発生している**
* 欠損値の発生が、「その変数自体の値」や「他の変数の値」に影響されていない
* リストワイズ法（後述）を用いても、他の変数の統計量に影響を与えにくい。ただし、データ数を減らしたくない場合はFIMLや多重代入法を使っても良い。

### Missing At Random (MAR)

* **欠損値の発生が、「他の変数の値」に影響されている**
* 欠損値の発生が、「その変数自体の値」には影響されていない
* 例：「試験1の点数が一定以上だと、試験2を受けられる」という場合の試験2の点数の欠損
  * この場合、試験2の点数が欠損かどうかは試験1の点数のみによって決まる
  * 「試験2の点数」と「試験1の点数」で相関がありそうな場合、「試験2の点数が欠損かどうかは試験2の点数に影響を受ける」ように見えるが、試験1の点数を統制すると試験2の点数は関係なくなるため、問題ない。
* リストワイズ法（後述）を用いると、他の変数の統計量に影響を与えてしまう。FIMLや多重代入法を適用するのが良い。

### Missing Not At Random (MNAR)

* **欠損値の発生が、「その変数自体の値」に影響されている**
* 他の変数を統制しても、ある変数の欠損が「その変数自体の値」と関係が残っている
* MARのときの例で、もし試験1の点数がなくなった場合、「試験2の点数が欠損かどうかは試験2の点数に影響を受ける」となり、MNARとなる。
* 逆に言うと「最初はMNARであっても、他に欠損を説明できる変数（補助変数）を設定し、欠損している変数とその変数自体の値の因果関係を消すことができれば、MARにできる」
* まだ、分析方法は十分に発展していない。とりあえず補助変数を併用してMARに近づけ、MARに基づいたFIMLや多重代入法を用いるという手もある。

## 対処方法

### リストワイズ法 (list-wise deletion)

* 1変数でも欠損している場合、データごと削除する方法
* MCAR以外の場合に適応すると、他の変数の統計量や分布を歪める可能性がある

### ペアワイズ法 (pair-wisedeletion)

* 欠損箇所を削除したり、埋めるわけではない
* 2変数間の関係（相関とか）を、「対象の変数に欠損がある場合は除外」「対象の変数に欠損がなければ入れて計算」する
* MCAR以外の場合に適応すると、本来のデータと大きく異なる結果となる可能性がある

### 完全情報最尤推定法 (full information maximum likelihood method, FIML)

* 変数たちがある分布（例：多変量正規分布）に従っていると考え、**実際の変数の値を取る確率が一番高くなるような平均，分散共分散を求める**（＝最尤推定）
* 平均，分散共分散が決まったら密度関数が最大になるような値が求まるので、それを推定値として代入する
* ある変数が欠損しているデータも、他の変数を利用できる
* MARでもバイアスのない推定値が得られる

### 多重代入法(multiple imputation method)

* **欠損箇所に予測値を入れたデータセットをいくつか作り、最後に合体させる**
* 予測値の作り方はいくつかあるが、説明は割愛。（あまり詳しくない）
  * 回帰モデルで予測した後，その予測値にランダム誤差（回帰モデルの誤差分散に相当）を加えて代入する方法。（stochastic regression imputation）
  * データ拡大法（data augmentation method）

### 他

* 前の行の値を入れる
  * 時系列データなどで、直前（前日とか）のデータの値を入れる
* 線形補間する
  * 時系列データなどで、前後のデータの間の値を入れる
* 平均値・中央値
  * 欠損でないデータの平均値or中央値を一律で入れる
* 回帰代入法（regression imputation）
  * 欠損値のないサンプルで回帰分析し、推定式を元に欠損値を補完

## 参考にしたサイト

* [欠損データ分析 (missing data analysis)
-完全情報最尤推定法と多重代入法](https://koumurayama.com/koujapanese/missing_data.pdf)
* [R 欠損値の対応（missing value treatment）](https://jojoshin.hatenablog.com/entry/2017/02/03/220118)
* 「ある変数を統制する」=「ある変数の影響を除去する」「変数の値を一定にする」
  * http://www2.kokugakuin.ac.jp/~ogiso/spss/staterm.html
  * https://koumurayama.com/koujapanese/mreg.htm
* [Python+Pandasでリストワイズ削除とペアワイズ削除で欠損値に対処する話。](https://ensekitt.hatenablog.com/entry/2018/03/05/200000)
* [欠損値の種類と補完とRでのワークフロー](https://www.pediatricsurgery.site/entry/2016/11/20/233217)
* 完全情報最尤推定法
  * [DARM勉強会第3回 (missing data analysis)](https://www.slideshare.net/masarutokuoka/darm3-missing-data-analysis)
  * [完全情報最尤推定法(FIML)のお気持ちを掴んで、選抜効果を考慮した相関の推定を行う](https://qiita.com/hanon/items/3925879acbdf691da7a0)
Unityのシーン切り替えとStart()組み合わせで悩んだ話


初心者が詰まったところを書いてみます．
##Unityでシーンを跨いでデータの受け渡しをしたい

ということで，コチラhttps://note.com/suzukijohnp/n/n050aa20a12f1
のnoteの記事を参考にシーンを跨いでデータを引き渡せるようにしました！

終わり！

##無理でした
引き渡し値が定数であればこのままで大丈夫です．
でも引き継ぎたいのは変数に入った数でしたので

```c#:SceneChanger.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class SceneChanger : MonoBehaviour
{
  private int score;
  public void onClick()
  {
    //スコア引き継ぎ
    SetTakeOverScore();
    // イベントに登録
    SceneManager.sceneLoaded += GameSceneLoaded;

    // シーン切り替え
    SceneManager.LoadScene("GameScene");
  }
  private void GameSceneLoaded(Scene next, LoadSceneMode mode)
  {
    // シーン切り替え後のスクリプトを取得
    var gameManager = GameObject.FindWithTag("GameManager").GetComponent<GameManagerScript>();

    // データを渡す処理
    gameManager.score = score;

    // イベントから削除
    SceneManager.sceneLoaded -= GameSceneLoaded;
  }

  private void SetTakeOverScore()
  {
    if (GameObject.FindGameObjectWithTag("GameManager") != null)
    {
      //スコアマネージャーを取得
      var manager = GameObject.FindGameObjectWithTag("GameManager");

      var scoreManager = manager.GetComponent<ScoreManager>();
      //引き継ぎ用にscoreを入れる
      score = scoreManager.GetScore();
    }
  }
}
```
としてスコアを引き継ぐことにしました．
これで完成！


とはなりませんでした．
引き継ぎ後のscoreが0になってしいました．

##原因
原因は単純でScoreManager内のStart()で

```C#:ScoreManager.cs

void Start()
{
  score = 0;
}
```
としていることでした．
また属性をstaticにしていると思わぬところで
値が入って何処からきたんだこの値となっているところもありました．


UnityではSerializeFieldで初期化してしまうのが安全なのかなぁ．
あと，staticは基本使わなくていいなら使わないほうが良いのかもと思いました．
UnityプリミティブのPlaneとQuadの違い

Unityを触っていてふとPlaneとQuadって何が違うんだろう。と思ったので、調べた。

全ては[リファレンス](https://docs.unity3d.com/ja/2020.1/Manual/PrimitiveObjects.html)に載っていた。

QuadよりもPlaneの方がポリゴン数が多いらしい。(Planeが200でQuadが２)

あと見れば見ればわかるが大きさが違う。Planeが10単位でQuadが1単位。ちなみに向きも。PlaneはXZ平面だけど、QuadはXY平面。

用途の違いは、Planeはステージの床とか壁とかに使って、Quadは情報表示やパーティクルとかに使うとのこと。

ちゃんとリファレンス読も。
GulpでSassをコンパイル（環境構築）

* Gulp導入に必要なNode.jsとnodebrewについてはこちら  
[nodebrewでNode.jsをインストール（初心者向け）](https://qiita.com/aya_omochimochimochi/items/21df67dd5337f6dbc47e)

## Gulp.jsのインストール
#### 1.まずは、Webサイトのファイル一式が保存されるフォルダーを作成します
任意の場所にフォルダーを作成してください。
ここでは「testproject」をDocuments（Macの「書類」ディレクトリ）に作成します。
#### 2.ターミナルを開いてフォルダー（testproject）の場所へ移動します
ターミナルに` cd`と打ってから、フォルダーをターミナルにドラッグ&ドロップして` return`キーを押すとドロップしたフォルダーが現在地になるよ！
#### 3.package.jsonを作成します
ターミナルで以下を実行して下さい。

```zsh:ターミナル
npm init -y
```
* package.jsonとは  
プロジェクトの名前やバージョン、どのパッケージ（gulpとかgulp-sassとか）を使っているか管理しているファイルです。 
エディタで開いてみると、以下のように記載されていることがわかります。 

```javascript:package.json
{
  "name": "testproject",
  "version": "1.0.0",
  "description": "",
...
```
#### 4.gulpとgulp-sassをローカルインストール
まずはgulpからインストールします。

```zsh:ターミナル
npm install --save-dev gulp
```
続いてgulp-sassをローカルインストールします。

```zsh:ターミナル
npm install --save-dev gulp-sass
```
package.jsonには以下のようにgulpとgulp-sassのバージョンが記載されます。

```javascript:package.json
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-sass": "^4.0.2"
  }
```
これでgulpとgulp-sassのローカルインストールは完了です。
#### 5.gulpfile.jsの作成
gulpfile.jsとは、gulpの詳細な処理内容について設定するためのファイルです。
基本的には、[gulp-sassのnpmページ](https://www.npmjs.com/package/gulp-sass)に記載されているコードを流用でいけますが、以下のコードはそちらを元にgulp-sass:watchをgulp4.0対応のコードに編集しています。
自分で編集しないといけないところはコメントを記載しているので、環境によって変えてね。

```javascript:gulpfile.js
'use strict';
 
var gulp = require('gulp');
var sass = require('gulp-sass');
 
sass.compiler = require('node-sass');
 
gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss') // コンパイル元となるsassファイルのパスを入れる
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)) // outputStyle（どのような記述形式でコンパイルするか）の指定
    .pipe(gulp.dest('./css')); // コンパイルで生成されるcssファイルの出力先となるパスを入れる
});
 
gulp.task('sass:watch', function () {
    gulp.watch('./sass/**/*.scss', gulp.series('sass')); // コンパイル元となるsassファイルのパスを入れる
});
```
outputStyleは以下から選択すべし。


* nested  
一般的なcss記法＋セレクタの階層の深さに応じてインデント。個人的にはあまり使ったことがない。  

```css:css
body {
  color: #333; }
  body h1 {
    background: #fff; }
```
* expanded  
一般的なcss記法。Sassを使っていないクライアントにはexpanded形式でコンパイルされたcssを納品しています。  

```css:css
body {
  color: #333;
}

body h1 {
  background: #fff;
}
```
* compact  
一般的なcss記法＋改行無し。個人的にはあまり使ったことがない。  

```css:css
body { color: #333; }

body background { color: #fff; }
```
* compressed  
minifyにより軽量化＋難読化。個人的に一番馴染みがある形式。サイト高速化にも繋がるのでこれが好き。  

```css:css
body{color:#333}body background{color:#fff}
```
#### 6.gulpの実行〜sassのコンパイル
gulpをローカルインストールしているので、パスを通すために以下コマンドを.zshrcに追記します。
これをしないと「gulp: command not found」とターミナルに怒られてしまいgulpが動かない！！
.zshrcについて詳しくはこちらを見てね。
[nodebrewでNode.jsをインストール（初心者向け）](https://qiita.com/aya_omochimochimochi/items/21df67dd5337f6dbc47e)

```zsh:.zshrc
export PATH=$PATH:./node_modules/.bin
```
gulpを実行してsassをコンパイルするには、cdでプロジェクトのあるディレクトリに移動して、以下コマンドを打ちます！

```zsh:ターミナル
gulp sass
```
sassファイルの変更を自動で検知（監視）して都度コンパイルするには、以下コマンドを打ちます！！

```zsh:ターミナル
gulp sass:watch
```
#### 7.完了
パスを通すところでつまづきまくり〜…環境構築は難しいですね。
#### 8.豆知識
* 処理を止めたい時はctrl + cやで〜！  
* gulp-sassにアップデートが無いか、時々確認するやで。以下コマンドで確認してね。  

```zsh:ターミナル
npm outdated
```
更新があったならば以下コマンドでアップデートするやで。

```zsh:ターミナル
npm update
```
高専に入ってボーッとしていたら一年を無駄にした！！！

# 高専に入ってボーッとしていたら一年を無駄にした！！！

### 自己紹介
関東の高専生
情報系の学科で成績は中の下くらい。
現在は2年生になり、少しずつコーディングできるようになってきました。


### 入学前
入試は評定だけは良かったので、推薦入学で通りました。
そんなに勉強した感じもなく、普通の受験生より少し少ない程度。

入学前から、高専は、**入学しただけでは意味がない。自主学習をしていかないとつよくはなれない**と知り合いが言っていたため、頭では理解しているつもりでした。


### 入学 ～ 5月
入学して数ヶ月も経って学校生活にもなれてきました。

高専に入る人はみんなプログラミングできるものだと思っていたので、周りのレベルに少し驚きました。まあ僕もプログラミングなんもできなかったので、特に大きくショックを受けることはありませんでした。

専門系授業は何故か周りよりできたので少し天狗になっていたのかもしれません。


### 6月 ～ 8月
ぼーーーーーーーっと過ごしました。ただただ時間の無駄でした。
登校して、授業を受けて、部活をして、帰宅して寝る。
今考えるとここが一番の失敗でした。

専門は相変わらず周りよりできたので特に焦ることもなく、他の教科は結構やばめでしたが、専門はできるからいいやと特に焦って勉強することはありませんでした。


### 夏休み
他高専がいるグループに入り、他の高専の人の技術力に驚きました。
同年代ですでにゴリゴリに開発してる人が多く、完全に井の中の蛙だったと思いました。

***しかし***ここで怠惰な僕は、他の人は高専に入学する前から、プログラミングをしていて差があって当たり前と考え、追いつく努力をしませんでした。

(ですが実際は半数以上の人が高専に入ってからプログラミングをしており、ただ差をつけられただけでした。)


### 10月 ～ 2月
再びぼーーーーーーっと過ごしました。
プログラミングがクラスの人より少しできるからと思い、ただ無駄な日々を過ごしてしまいました。
プログラミング自体は好きだったので、授業以外でも触ったりはしていましたが、特に開発などをすることはありませんでした。

### 3月
夏休みに入ったグループより小さなコミュニティーに入りました。
毎日通話をしていくうちに自分の愚かさに気づきました。

結構な人が高専に入ってからプログラミングを始めていたこと。夏休みでゴリゴリ開発をして、実力をつけていたこと。基本毎日プログラムに触れていたこと。たくさんの事実を知りました。

僕は一年を完全に無駄にしてしまい、同学年の人に大きな差がついていたことを悔い、そこからはプログラミング漬けの日々。ですが前述の通りプログラミング自体は嫌いではないため、苦ではありませんでした。

### 現在
コロナ期間の遠隔授業により、空いた時間で通話をつなぎ、知識を盗みながらコーディングをして、少しは開発力がついたと思います。

## まとめ
***高専に入るだけでなく、自主的に学習していこう！***
Herokuでデプロイする際に出たSlug Sizeエラーの解決方法

# はじめに

機械学習を用いたアプリをHerokuでデプロイしようとしたところ、下のようなエラーが出ました。

``` python
Compiled slug size: 625.5M is too large (max is 500M)
```
「Slug Sizeを減らす方法」で検索すると下記の解決方法①についてはたくさん出てくるのですが、それでは解決できなかったので、私が検索しまくって辿り着いた解決方法と合わせて紹介します。

# 解決方法①
「Slug Size too large」などで検索すると一番よく出てくる解決方法です。
まず、heroku-repoというライブラリをインストールします。

```
heroku plugins:install heroku-repo
```

以下のコードでGitレポジトリに残っているキャッシュが消され、Slug Sizeが減ります。<アプリ名>には自分のアプリ名を入れてください。

```
heroku repo:gc --app <アプリ名>
heroku repo:purge_cache --app <アプリ名>
```

参考URL：
https://thoughtbot.com/blog/how-to-reduce-a-large-heroku-compiled-slug-size

# 解決方法②

私の場合は上記の方法で解決せず、たくさんの時間を溶かしました。（そもそも最初のデプロイができていないのでcurlでエラーが出てました。）
今回、機械学習を使ったアプリを作成していたため、tensorflowを用いていたのですが、これが問題でした。
どうやらtensorflowのバージョンが2.0以上だとライブラリのサイズが大き過ぎてSlug Sizeが500Mを超えてしまうようです。
そこでライブラリのバージョンを下げたところSlug Sizeが625Mから351Mまで減りました。

```
tensorflow==1.15.3
```

参考URL：
https://stackoverflow.com/questions/61062303/deploy-python-app-to-heroku-slug-size-too-large


tensorflowのバージョンを下げるだけで半分もSlug Sizeが減るとは思っていませんでした。もしtensorflowを使っていて、解決方法①でもダメだった場合は試してみてください。
PHP クッキー セッション

#クッキー

- クライアントに保存された情報のこと
- クッキー情報は、Domain属性に設定されているサーバにアクセスするたびに**毎回送信される**
- サーバーは、**Set-Cookieヘッダ**により、クライアントに対して「Cookieを保存してください」と指示することが可能
- リクエストメッセージのCookieヘッダにある値は、PHPのスーバーグローバル変数の **$_COOKIE**に連想配列として格納されている。

#セッション

- セッションとは、一連の処理の始まりから終わりのこと
- 上述のCookieを利用して、一連の処理（セッション）として扱う
- リクエストするときに識別可能な値(セッションID)をcookieに入れ、毎回送信してもらうことで実現する

## session_start()

- session_start()を記述だけで、自動でセッションIDを発行してくれます。
- セッションIDを発行するときに、セッションIDごとにセッションファイルを作成します。
- このセッションファイルは、サーバーに作成される
- セッション情報は、スーパーグローバル変数の **$_SESSION** に連想配列として格納される
- session_start()は、リクエストメッセージにセッションIDがあるのか、ないのかで挙動が変わる

### セッションIDがない場合

- セッションIDを発行し、セッションIDをCookieに保存するようにレスポンスメッセージを送信
- セッションIDを発行するときに、サーバー側では、セッションIDごとにセッションファイルを作成

### セッションIDがある場合

- セッションIDがあれば、該当するセッションファイルにある情報を参照
[Python] 地道にTF-IDFを計算してみた

TF-IDFのメモ．
<a href = 'http://ailaby.com/tfidf/'>TfidfVectorizerを使ったほうがはるかに簡単</a> なのですが，勉強も兼ねて．
おかしなところがあれば，優しく教えてください．

計算の対象となる文書

```hoge.txt
white black red
white white black
white black black black
white
```





```
#準備
print(word_set)
['black', 'red', 'white']

print(doc_words)
[['white', 'black', 'red'], ['white', 'white', 'black'], ['white', 'black', 'black', 'black'], ['white']]
```



```
def tokenizer(word_set, doc_words):
    token_doc = []
    for words in doc_words:
        temp = []
        for w in words:
            temp.append(word_set.index(w))
        token_doc.append(temp)
    return token_doc

token_doc = tokenizer(word_set, doc_words)
#print(token_doc)

doc_num = len(token_doc)
#print(doc_num)
IDF = []
count = 0

import math

for j in range(len(word_set)):
    count = 0
    for d_list in token_doc:
        if j in d_list:
            count += 1
    IDF.append(math.log(doc_num / count) + 1)

TF_set = []
for doc in token_doc:
    TF = [0] * len(word_set)
    for t in doc:
        TF[t] += 1
    TF_set.append(TF)

TF_IDF_set = []
TF_IDF = []
for temp_TF in TF_set:
    for m in range(len(word_set)):
        TF_IDF.append(temp_TF[m] * IDF[m])
    TF_IDF_set.append(TF_IDF)
    TF_IDF = []
```


```
#結果
print(token_doc)
[[2, 0, 1], [2, 2, 0], [2, 0, 0, 0], [2]]

print(word_set)
['black', 'red', 'white']

print(TF_IDF_set)
[[1.2876820724517808, 2.386294361119891, 1.0], [1.2876820724517808, 0.0, 2.0], [3.8630462173553424, 0.0, 1.0], [0.0, 0.0, 1.0]]
```
【Atom】インストールしているパッケージの使い方

インストールしているパッケージの使い方を忘れるので備忘録として淡々と書いていく。

#atom-alignment
`=`を揃えてくれる


```
揃えたい場所を選択して
ctrl+command+a
```
![Untitled.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136271/49ab2951-962b-5fb3-076c-539a4375fcc1.gif)
#autoclose-html
タグを書き始め、終了タグ`>`を入力すると閉じタグを自動で入れてくれる
![Untitled2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136271/b58d601b-8c1d-b7e0-96e6-a852465cc925.gif)
設定で改行押したくないタグを指定できる。
<img width="677" alt="スクリーンショット 2020-06-12 23.50.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136271/d7ecb02f-b84f-afec-e73e-df2e887ac821.png">
#autocomplete

autocompleteは最初からインストールされている自動補完機能
#autocomplete-paths
相対パスを補完してくれる。

#color-picker
直感的にカラーを指定できる。
設定でカラーピッカーを呼び出すショートをカットを指定できる。

```
ctrl+shift+c
```
で使用する。
![Untitled3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136271/d7609b95-a4d5-836c-a743-be49533ba9b9.gif)
#highlight-selected
選択した単語をハイライトしてくれる。
<img width="178" alt="スクリーンショット 2020-06-13 0.04.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136271/65b34380-4b72-aa29-1ec1-aacd03a31c7e.png">
#hyperclick
importしたファイルや定義した変数の定義元へカーソルを移動させるパッケージ。

Macなら⌘を押しながらクリックすることで移動可能。
#indent-guide-improve
インデントをわかりやすくしてくれる。
インストールするとインデント箇所が縦の白線で見やすくなる。
<img width="382" alt="スクリーンショット 2020-06-13 0.09.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136271/c66acada-41f3-bced-f795-a94767c519b1.png">
#linter-php
PHP構文エラーを通知してくれる。
<img width="837" alt="スクリーンショット 2020-06-13 0.14.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136271/de996bec-fd3d-c7d7-ea99-ee2e3c230cb9.png">

#markdown-preview-enhanced
テキスト上でシーケンス図などを書く時に。
デフォルトで`markdown-preview`がインストールされており、ショートカットが競合するのでこれを無効化しておく。

#open-in-browsers
atomからHTMLファイルを任意のブラウザで開ける。

```
ctrl+option+o
```
もしくはブラウザの画像をクリックする。
<img width="315" alt="スクリーンショット 2020-06-13 0.40.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136271/a9076063-6458-ef35-1064-39f8e342eadd.png">
#pigments
カラーコード値が表示色でハイライトされる。
<img width="428" alt="スクリーンショット 2020-06-13 0.42.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136271/50e6def4-57f2-fc5e-2912-45b24475742f.png">
正規表現 []内でのエスケープについて

# はじめに

[以前投稿した記事][1]にていただいた編集リクエストで、気になったものがあったので調査した備忘録

メールアドレスの正規表現を例に、[]内でのエスケープすべき文字を調査しました

お品書きは下記の通り

* 問題となった正規表現
* []内でエスケープすべき文字たち
* 以上を踏まえたキレイ（？）な正規表現
* さいごに

# 問題となった正規表現

正規表現：**https?://[\w!?/\\+\\-_~=;\.,*&@#$%\\(\\)\\'\\[\\]]+**
編集リクエスト：**[]内の?, *, $をエスケープする**

これは、メールアドレスを判定するときに使用していた正規表現

このリクエストを受け、さっそく正規表現を修正してテストをした

編集リクエスト通り修正し、問題なく処理されることが分かったのですが、一つ疑問が浮上した

**なんでエスケープしなくても動いたの？？？？**

ということでいろいろと調べた結果[]内では特定のメタ文字しか使われていないのではという考えに至った

# []内でエスケープすべきメタ文字たち

[]の正規表現は[]内にある文字(集合)のいずれかにマッチするという意味で
```[abc]とした場合、aかbかcのいずれかにマッチ```
であった

当然記号などの文字(集合)でも上記のことが言えて、
```[a?.+]と入力した場合、aか?か.か+のいずれかにマッチ```
となることはわかった

\wや\Sなどは一つ一つの要素が文字(集合)となるので心配ご無用

また、メタキャラクタではない英字(jやl）を使って
```\j\l\wとした場合、jl(a ~ z)にマッチ```
という意味になる

つまり、**特別な意味がない文字**にエスケープをしてもしなくても普通の文字や記号なのである

では全部の文字をエスケープしなくていいかというと、以下のメタ文字たちは例外である

### 範囲を意味するハイフン(-)

**[]内でのみエスケープをする記号**

```[a-z]``` としたとき、「aからz（小文字アルファベットのいずれかにマッチしたとき」を意味するため、ハイフン(-)を文字として使用したい場合はエスケープが必要

### 補集合を意味するキャップ(^)

```[^ABC]``` としたとき、「A, B, C ではないものにマッチしたとき」を意味するため、キャップ(^)を文字として使用したい場合はエスケープが必要

### エスケープを意味するバックスラッシュ(\\)

バックスラッシュはエスケープを意味するため、文字として使用したい場合、バックスラッシュを二回( ```\\``` )入力する必要がある

### [] の終了を意味する大かっこ閉じ(])

```[ABC]]``` と入力した際、最初（５文字目）の大かっこ閉じ(])で閉じてしまうため、「(A or B or C)]にマッチ」という正規表現になってしまう
そのため、]はエスケープが必要

# 以上を踏まえたキレイ（？）な正規表現

[]内で使用されるメタ文字だけエスケープする正規表現と、
メタ文字として使われる文字全てエスケープする正規表現を記載しておく
やっぱり中途半端よりも統一したほうがいいですからね…

1. 必要なものだけエスケープ ```https?://[\w!?/+\-_~=;.,*&@#$%()'[\]]+```
2. メタ文字は全部エスケープ ```https?://[\w!\?/\+\-_~=;\.,\*&@#\$%\(\)'\[\]]+```

個人的には1の方が見やすいので好みですが、慣れるまでは2を使っていこうかな…

# さいごに

今回いただいた編集リクエストで、あいまいにしていたところを調べられました
ありがとうございました<(_ _ )>

自分では見えていなかった（見てなかった部分も…？）ところを再度調べてみました

また、この考えは違うなどありましたらご教授いただけると光栄です( ^_^)/

[1]:https://qiita.com/str32/items/a692073af32757618042
UniversalRPでモデルからバンプマップ付きスプライトを作る

![gif_animation_004.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/64948903-d241-725b-a417-71e6c16fe022.gif)

UniversalRPでは[エモい2Dライトが使える](https://youtu.be/Km_4NQPk59s)のですが、[3Dモデルとの共存に難があります](https://qiita.com/ELIXIR/items/be46a3ed8968856af4f0)。

そこで、モデルから1枚絵＋バンプマップを作り、2Dとして3Dっぽいものを出してみました。

**追記:** [アセット販売中です](https://assetstore.unity.com/packages/tools/sprite-management/modeltobump-171138)。
[![ModelToBump_Icon160x160.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/1cda5feb-c92d-82db-474e-a6a16a4b4dd8.png)](https://assetstore.unity.com/packages/tools/sprite-management/modeltobump-171138)


**追記2:**　URPのLight2Dモードを使っていて表示がおかしい場合は一旦
PipelineSettings を元の
UniversalRenderPipelineAsset に戻してあげる必要があります

![2020-06-29_224558.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/d52bcf02-ddfa-8564-e0e1-10d40c23c4ee.png)
![2020-06-29_223813.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/5e175d52-17df-a4bf-1ad4-03f605edf153.png)
![2020-06-29_224619.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/e0ddfa07-e11b-5049-45b6-880ab330822b.png)


準備が整ったら、バンプマップを表示するShaderGraphを作成します。
![2020-06-12_224906.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/98d55d6f-6892-92f1-7cce-9551e587a934.png)

AssetStoreから[ダウンロードして](https://assetstore.unity.com/packages/3d/animations/sd-unity-chan-haon-custom-bundle-84992)[既存マテリアルを半自動で変換した](https://qiita.com/ELIXIR/items/60e0fbd0a060ac3a698c)モデルと、
![outputURP_albedo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/7aa9584d-e10b-70c2-a5f1-1f1c896e1349.png)

バンプシェーダーを使って表示したバンプモデル
![outputURP_bump.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/2a60e92c-4069-d655-ba6d-76191c6363b2.png)
をファイルに保存し、
UniversalRPのマテリアルにアタッチしました。
![2020-06-13_000845.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/95a7a027-d7ce-2758-bd76-e4274b974dd8.png)

1枚絵ですがかなり立体感があります。
![gif_animation_003.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/1ef64faa-2ecb-d36f-c4ae-26d2ccbfb9a6.gif)


Sprite & 2Dライトの環境でも
![2020-06-13_002951.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/8f476aff-43ca-c539-779e-2580643c43a1.png)

こんな感じで立体的に！
![ezgif-3-b6a4f7e766c9.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/457ed49b-5592-4edf-3b1a-07806578944b.gif)

結構使えそうです。
Flutterでif文を使うときの注意事項

## 多言語(Jave、PHPなど)の場合

 僕の経験上(浅いので突っ込まないで)if文で条件分岐する際に、
 条件がtrueの時しか書いてこなかったんですが、Flutterで画面遷移を作成しているときに
 引っかかったのでメモとして残しておきます。

## PHPのとき
```php
    if (index == 1) self::NextPage();
```
 みたいな感じで、indexが1だったときNextPageメソッドを呼び出すことをよくしていました。

 Laravelでリダイレクトするならこんな感じ

```php
    if (index == 1) return redirect()->route('next_page');
```
 
 この時って別にfalseだった時の条件分岐書いてこなかったんですよね、
 ((まぁ書いた方がいいんですけど))

## Flutter
 はい、本題です。

```Dart
if (index == 1) Navigator.of(context).pushNamed('/search');
```
 でBottomNavigationBarがonTapされたときに、画面遷移したかったのですが、
 trueの時だけ書いていたら、
 `A build function returned null`みたいなエラーが。。
 Flutter初学者の私からしたらOMGでした。

 falseの条件分岐を記載したらエラー解決しました！

```dart
onTap: (int index) {
            print(index);
            if (index == 1) Navigator.of(context).pushNamed('/search');
            else Navigator.of(context).pushNamed('/');
        },
```
NPocoの紹介 -機能編- Databaseクラス

# NPocoの紹介 -機能編- Databaseクラス
最初の記事は[こちら](https://qiita.com/epsilon_87_myo/items/1c0f75064b9b6bcc9e1e)

今回は `Database` クラスについての紹介です。
NPocoのバージョンは `4.0.2` です。

現時点のコードは[こちら](https://github.com/schotime/NPoco/blob/d707af2bf59f5c70c1d147bc6974d3cdd52bb05b/src/NPoco/Database.cs)


## コンストラクタについて

複数のコンストラクタが用意されています。

```cs
public Database(DbConnection connection);
public Database(DbConnection connection, DatabaseType dbType);
public Database(DbConnection connection, DatabaseType dbType, IsolationLevel? isolationLevel);
public Database(string connectionString, DatabaseType databaseType, DbProviderFactory provider);
public Database(DbConnection connection, DatabaseType dbType, IsolationLevel? isolationLevel, bool enableAutoSelect);
public Database(string connectionString, DatabaseType databaseType, DbProviderFactory provider, IsolationLevel? isolationLevel = null, bool enableAutoSelect = true);
```

大きく分けると
- `DbConnection` を渡してコネクションを生成する方法(`IDbConnection` ではない)
- 接続文字列と `DbProviderFactory` を渡して生成する方法

が存在します。これらはどちらを採用するかによってコネクションに管理方法が異なるようです。
(私も`DbConnection` を使用する方法しか使ったことないので詳細は控えます。)

その他オプションとしては `DatabaseType`, `IsolationLevel`, `enableAutoSelect` があります。

私は `DbConnection` と `DatabaseType` を渡すタイプのものをよく使用します。

### `DatabaseType`
これはデータベースベンダー毎のクエリの方言を吸収するものです。
このクラス自体は抽象クラスであり、各ベンダー毎の実装クラスが存在します。

明示的に指定しなかった場合は `DatabaseType.Resolve` メソッドにより `DbConnection` のクラス名に応じた型が自動的に選択されます。

既存の `DatabaseType` の挙動をカスタマイズしたい場合は、自前の`DatabaseType` を作成し、`Database` のコンストラクタに渡すとよいでしょう

### `IsolationLevel`
トランザクション分離レベルです。

明示的に指定しなかった場合は `DatabaseType.GetDefaultTransactionIsolationLevel`メソッドの値が使用されます。 ぱっと見た感じ`MySQL` が`RepeatableRead`でそれ以外が`ReadCommitted`になっています。

### `enableAutoSelect`
`Fetch` メソッドなどで `select` など以外から始まる名前クエリを記述した際に
`select 列リスト from テーブル名` を自動でつけてくれるオプションです。

## メソッドについて

### 自動クエリ系
生クエリを書くことなく、自動でクエリ生成をしてくれるものです。

#### 変更操作

- `Insert`
- `Update`
- `Delete`
- `DeleteMany`

これらは 属性を付与したクラスのインスタンスを渡すだけで、自動でクエリを実行してくれます。

#### 参照操作
- `Query`

こちらの`Query` は正確にはジェネリクスのついた`Query<T>` です。

```cs
Hoge hoge = database.Query<Hoge>()
                    .Where(x => x.Key1 = "001")
                    .SingleOrDefault();
```
といった感じに記述することができます。

### 手動クエリ系
手動でクエリを記述するものです。

#### 変更操作
- `Execute`
- `ExecuteScalar`

#### 参照操作
- `Single`
- `SingleOrDefault`
- `First`
- `FirstOrDefault`
- `Fetch`
- `Query`

こちらの `Query` は`yield return` で1件ずつ返すものです。

### トランザクション制御

- `BeginTransaction`
- `AbortTransaction`
- `CompleteTransaction`

- `GetTransaction` ←これはゲッターではなくトランザクションのスコープを作るメソッド
- `SetTransaction` ←これは上記の`GetTransaction` に対するセッターではない

詳細は[こちら](https://github.com/schotime/NPoco/wiki/SQL-Transaction-Support)


私は`Database` の外側で `DbConnection.BeginTransaction()` したものを`SetTransaction` でセットする方法でトランザクション管理しています。


### その他

#### `FormatCommand`
`DbCommand` から`SQL` と`パラメータ` を表す文字列を取得します。

私は後述の`Interceptor` でクエリのログを出力するために利用しています。


#### `StartSnapshot`
こちらは`Snapshotter` クラスで拡張メソッドとして定義されています。

`Update` を実行するときに変更対象列を特定するために使います。

使い方は[こちら](https://github.com/schotime/NPoco/wiki/Change-tracking-for-updates)

## プロパティについて

### `Interceptors`
クエリの実行前後に処理を挟む際に使うインターセプターです。


## 終わりに
ここで紹介したもの以外のメソッドやプロパティも用意されています。
【Ruby】条件演算子が2回（以上）続く時

※本文内容が誤っていたことをコメント欄で教えて頂いたので修正しました。

# きっかけ
以前あるgemのインストールに失敗してしまった時に原因を探っていて、以下のコードにたどり着いたのだが、1行に条件演算子が2回出てきて「これはどういう条件で動くんだ？」と分からなかったのでメモ。

```ruby
idirs = idir ? Array === idir ? idir.dup : idir.split(File::PATH_SEPARATOR) : []
```
https://github.com/ruby/ruby/blob/master/lib/mkmf.rb#L1780

# 結論

外側から内側に向かって、順繰りに評価されていく。

```ruby:irb
> 1 == 1 ? 2 == 2 ? "a" : "b" : "c"
=> "a"
# 1 == 1 が true なので 「"a" : "b"」 と : "c" とで 「"a" : "b"」, 次に 2 == 2 が true なので "a" : "b" は "a"

> 1 == 1 ? 2 == 0 ? 3 == 3 ? "a" : "b" : "c" : "d"
=> "c"

> 1 == 0 ? 2 == 0 ? 3 == 3 ? "a" : "b" : "c" : "d"
=> "d"
```

# 確認したこと

ドキュメントがぱっと見つからなかったので、構文解析をしてみることにした。Ripperでも見てみたけど、初心者には[parser](https://github.com/whitequark/parser)が見やすかった。

```ruby:console
% ruby-parse -e 'puts 1 == 1 ? 2 == 2 ? "a" : "b" : "c"'
(send nil :puts
  (if
    (send
      (int 1) :==
      (int 1))
    (if
      (send
        (int 2) :==
        (int 2))
      (str "a")
      (str "b"))
    (str "c")))
```

パースした結果をみてみると、どうやら最初に内側の `1 == 1` が評価され、その結果が `"a" : "b"` : `"c"` にかかって`"a" : "b"`が残る。その結果を持って、次に `1 == 1` の評価にすすみ、先程残った `"a" : "b"` に対して `"a"`　が残る。
 
# 参考

<a target="_blank" href="https://www.amazon.co.jp/gp/product/B01IGW56CU/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=B01IGW56CU&linkCode=as2&tag=kuredev-22&linkId=10c75e8a70a2107a57d2f441d65704eb">Rubyのしくみ　Ruby Under a Microscope</a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=kuredev-22&l=am2&o=9&a=B01IGW56CU" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
Javaで簡単な計算問題ゲームを作りました

# 足算ゲーム
ふと、脳を鍛える大人のDSトレーニングというゲームを思い出し
そのゲームに収録されていた足算をいかに早く解くかというトレーニングを
プレイしたくなったので自分でプログラムを書いてみました。
以下がそのコードです。

```java:Main.java
import java.math.BigDecimal;
import java.math.RoundingMode;
import java.util.Random;
import java.util.Scanner;

public class Main {
	public static void main(String[] args) {
		int count = 0;
		long start = 0;
		long stop = 0;
		long timeresult = 0;
		Scanner sc = new Scanner(System.in);
		System.out.println("計算問題を出題します。");
		System.out.println("10問出題されます。");
		System.out.println("Enterでスタートします。");
		String anykey = sc.nextLine();
		System.out.println("------------------------------");

		for(int i = 0; i < 10; i++) {
			start = System.nanoTime();
			Random rnd = new Random();
			int figure1 = rnd.nextInt(30) + 1;
			int figure2 = rnd.nextInt(30) + 1;
			int result = figure1 + figure2;
			System.out.println(figure1 + " + " + figure2 + " = ?");
			int a = sc.nextInt();
			if(result == a) {
				System.out.println("正解です。");
				count++;
			} else {
				System.out.println("不正解です。");
			}
		}
		stop = System.nanoTime();
		System.out.println("------------------------------");
		timeresult = stop - start;
		double timesecond = timeresult / 100000000.0;
		BigDecimal bdt = new BigDecimal(String.valueOf(timesecond));
		BigDecimal bdt1 = bdt.setScale(2, RoundingMode.HALF_UP);
		System.out.println("正解数は" + count + "問でした。");
		System.out.println("解くのにかかった時間は" + bdt1 + "秒でした。");
	}
}
```

このゲームでは足算が10問連続で出題され、プレイヤーはそれらを解いていきます。
ゲームが終了すると正解数とクリア時間が表示されます。
実際にプレイしてみてわかったことですが、早く解こうとすると割と
計算ミスをしてしまいます。
またDSの脳トレではタッチペンで答えを書いていましたが、こちらは
キーボードでの入力のため、素早く連続で数字を入力することに慣れる必要があると
思いました。
とてもシンプルなゲームですがなかなか楽しいです。
#学んだこと
nanoTimeというメソッドの存在を知りました。
非常に汎用性が高いと感じると同時に、色々なジャンルのプログラムに
使えると思いました。
#さらに追加するならばこんなこと
DSの脳トレではトレーニングの結果によって「徒歩級」や「新幹線級」などの評価が
あったのをよく覚えています。
このプログラムでも正解数とクリア時間の総合評価としてそういった表現があっても
面白いなと思いました。
Kotlin/NativeでLチカ

## 目的

Kotlin/NativeでHello Worldが実行できたので、次はRaspberryPiのGPIOを触ってみたいと思います。
前にも書いた通り、pigpioを使います。

## 手順

1. pigpioをraspberrypiでビルド
http://abyz.me.uk/rpi/pigpio/download.html

2. stub作成
   macに、headerをコピーしてcinteropを実行

    ```bash
    cinterop -def pigpio.def -compiler-option -I`pwd`/PIGPIO -o pigpio.bc -target raspberrypi 
    ```

    ```bash
    total 336
    drwxr-xr-x  3 hoso  staff    96B  6 11 00:41 PIGPIO
    drwxr-xr-x  5 hoso  staff   160B  6 11 00:48 pigpio.bc-build
    -rw-------  1 hoso  staff   160K  6 11 00:48 pigpio.bc.klib
    -rw-r--r--  1 hoso  staff    20B  6 11 00:40 pigpio.def
    ```

    で、できたなー、と思ったけど、実はGradleにcinteropを記載すればよかった。
    https://kotlinlang.org/docs/reference/building-mpp-with-gradle.html#cinterop-support

    ```gradle
        compilations.main {
            cinterops {
                pigpioInterop{
                    defFile project.file("src/nativeInterop/cinterop/pigpio.def")
                    compilerOpts '-Istub_prepare/PIGPIO'
                }
            }
        }
    ```

3. linkの解消

    ビルド時にlinkができないので、raspberrypi上でビルドしてできた.soをmacに持ってきて、linkerオプション追加して、ビルド完了

    ```gradle
               linkerOpts = ['-Llib', '-lpigpio']
    ```

4. 成果物はこんなかんじです
   ![kotlinnative-led.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35185/655db181-0213-80e2-935a-18d4c6d431c9.gif)

5. リポジトリはこちら
    https://gitlab.com/hoso-study/raspberrypi/kotlinnative-led

6. 今更ながら、
    pigpioって、sudoしないといけないの？
    https://github.com/fivdi/pigpio#limitations

7. アプリがsudoしなきゃならないのはあれなので、pigpiodを動かして、アプリはそちらを利用するようにしたのを作った。
    https://gitlab.com/hoso-study/raspberrypi/kotlinnative-led/-/tree/topic/pigpiod
Qiita 事始め

##機械学習の勉強の備忘録として、Qiitaに記事を今後投稿していきます。

まずは、Ian Goodfellow著の深層学習　（翻訳版）を読んで理解したことを書いていこうと思います。

以下はコードの書き方練習
参考にした投稿はこちら。(https://qiita.com/shizuma/items/8616bbe3ebe8ab0b6ca1)

```hello_world.py

print('hello world!')

```
【IntelliJ IDEA】大文字/小文字の区別なしでコード補完候補を表示させる方法

IntelliJ IDEAのコード補完候補表示がとても便利でよく使っているのですが、デフォルトの設定では、クラス名のような大文字始まりの候補を表示させるためには、先頭の文字を大文字で入力する必要があります。

小文字で入力した例
<img width="587" alt="小文字始まり" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160829/4f8acf4f-503f-9532-4e3b-704f0e7c3f9f.png">

大文字で入力した例
<img width="558" alt="大文字始まり" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160829/14d4f690-23a2-cfde-51b2-30adab8b4731.png">

個人的には小文字で入力しても、大文字始まりのコード補完候補が表示されてほしいので、今回はこれを実現するための方法を紹介します。

## 環境
- IntelliJ IDEA 2020.1.2 (Ultimate Edition)

## 方法
`Preferences` -> `Editor` -> `General` -> `Code Completion` -> `Match case`のチェックを外す -> `Apply` でOK

<img width="620" alt="方法" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160829/321e0a91-e709-8907-c644-fc6942be70b6.png">

デフォルトでは`Match case`にチェックが入っていて、かつ`First letter only`が選択されているため、先頭の1文字に関しては大文字/小文字の区別をつけて候補を表示するようになっています。

`Match case`のチェックを外すことで、大文字/小文字の区別が無効になるため、下の画像のように先頭を大文字で入力しなくてもクラス名など先頭が大文字の名前をコード補完候補として表示させることができます。
<img width="554" alt="結果" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160829/044d270d-bbf4-f47c-09cb-d4d0d9eb8e1a.png">

## 参考資料
https://www.jetbrains.com/help/idea/auto-completing-code.html#configure-code-completion
yukicoder contest 252 参戦記

# yukicoder contest 252 参戦記

## [A 1076 寿司打](https://yukicoder.me/problems/no/1076)

モンテカルロ法は駄目だったので、真面目に数学しました. 求める期待値を n とすると n = p * (1 + n) + (1 - p) * 0 となるので n = p / (1 - p) となります.

```python
p = float(input())

print(p / (1 - p))
```

## [B 1077 Noelちゃんと星々4](https://yukicoder.me/problems/no/1077)

「広義単調増加 競プロ」で検索すると、POJ-3666 : Making the Grade のコードがでてくるので、広義単調減少列側のコードをコメントアウトして投稿すると解けました(酷).

追記: ちゃんと解きました. 移動後の Y<sub>i-1</sub> が x の時にそれまでの移動させた距離の総和を dp[i - 1][x] とすると、dp[i][x] は min(dp[i - 1][0], dp[i - 1][1], ..., dp[i - 1][x]) + abs(Y<sub>i</sub> - x) となる.

```python
N = int(input())
Y = list(map(int, input().split()))

dp = [[0] * (10 ** 4 + 1) for _ in range(N)]

for i in range(N):
    t = float('inf')
    for j in range(10 ** 4 + 1):
        t = min(t, dp[i - 1][j])
        dp[i][j] = t + abs(Y[i] - j)

print(min(dp[N - 1]))
```

これだと Python では TLE になり PyPy でしか通らない. ところで2次元で書いているが、実際はオーバーラップするところがないので、1次元でも動く. また、Y<sub>i</sub> の移動先の座標は Y<sub>1</sub>, ..., Y<sub>N</sub> のどれかの座標のみとして問題ない. 以上を考慮して書くと、Python でも通るコードになる.

```python
N = int(input())
Y = list(map(int, input().split()))

a = sorted(set(Y))
dp = [0] * len(a)

for i in range(N):
    t = float('inf')
    for j in range(len(a)):
        t = min(t, dp[j])
        dp[j] = t + abs(Y[i] - a[j])

print(min(dp))
```
サポートエンジニア向けLink集

#サポートエンジニア向けLink集
サポートエンジニアとして気になるサイトを記録しておきます。
お問い合わせに対するこちらからのヒアリング方法やドキュメント作成、回答作成に関する情報などがあります。

#参考サイト
[サポートエンジニアが経験から語る、論理的文章によるコミュニケーションのススメ](http://nippondanji.blogspot.com/2009/12/blog-post.html)
[Lancork サポートエンジニア](https://www.lancork.net/tag/%e3%82%b5%e3%83%9d%e3%83%bc%e3%83%88%e3%82%a8%e3%83%b3%e3%82%b8%e3%83%8b%e3%82%a2/)
[クローズド・クエスチョン／オープン・クエスチョン](https://kotobank.jp/word/%E3%82%AF%E3%83%AD%E3%83%BC%E3%82%BA%E3%83%89%E3%83%BB%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%81%E3%83%A7%E3%83%B3%2F%E3%82%AA%E3%83%BC%E3%83%97%E3%83%B3%E3%83%BB%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%81%E3%83%A7%E3%83%B3-178754)
[Google社のテクニカルライティングの基礎教育資料がとても良かったので紹介したい](https://qiita.com/yasuoyasuo/items/c43783316a4d141a140f)
[良い質問とは何か](https://qiita.com/e99h2121/items/cec6328806863f10b439)
AWS CLI v2にしたらlambda invokeがコケる

# 現象

AWS CLI version 2でlambda invokeしたら、動くはずなのにコケる。payloadがおかしい？

```
$ aws lambda invoke --function-name my-function --payload '{ "key": "value" }' response.json

Invalid base64: "{"key": "value"}"
```
# 解決策

`--cli-binary-format raw-in-base64-out`　をつけましょう

# 原因
AWS CLI バージョン2では、パラメータはbase64エンコードが前提になったのでエラーになる。


>AWS CLI バージョン 2 は、デフォルトではすべてのバイナリ入力パラメータとバイナリ出力パラメータを base64 エンコード文字列として渡すようになりました。

https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cliv2-migration.html#cliv2-migration-binaryparam
Dartのnull safetyを試す

https://dart.dev/null-safety を受けて、自分用めも。

## null-safetyなコードを実行する

```bash
$ dart --enable-experiment=non-nullable sample.dart 
sample.dart:2:11: Error: A value of type 'Null?' can't be assigned to a variable of type 'int'.
  int x = null;
          ^
```

## VSCodeでコード編集中にもNull Safetyに書きたい

```analysis_options.yaml 
analyzer:
  enable-experiment:
    - non-nullable
```

すると

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74571/25b15293-a842-bde1-17c0-07208a5800aa.png)
【DNS66, AdAway】日本サイトの広告フィルターhostsを作った。

以下のURLをお使い下さい。

```
https://dns66.page.link/hosts
```

## その他のhosts

```
https://logroid.github.io/adaway-hosts/hosts.txt
```

## 広告が消えない場合は

https://qiita.com/tekityuu449/items/9f822fa0fee4951b5a27

## DNS66とAdAwayの比較

DNS66は非rootの端末でのみ使えて、ローカルにVPNサーバー立ててDNSの通信を書き換える仕組みでアドブロックを行う。
AdAwayはrootの端末で/etc/hostsを書き換えて、広告のドメインに対する名前解決を阻害する。AdAwayはDNS66と同じ非rootでのVPNサーバーを立てる機能を持つが、DNS66の方が安定してるので非rootならDNS66を私は使っている。
rollメソッドにハマった

Calendarクラスのrollメソッドは、第一引数に日付のどの部分を変えるかを指定し、第二引数に変更値を指定します。

4/1が設定された変数があったとして、rollメソッドの第一引数に「日」、第二引数に「-1」を指定して実行した場合、変数の値はどうなるでしょうか？

日が１日戻るから3/31になりそうなものですが、実際は4/30になります。

addメソッドだと、3/31になるみたい。
mapを使って二次元配列を配列に変換する

# code
```
function myFunction() {
  const Spread= SpreadsheetApp.getActiveSpreadsheet();
  const Index = Spread.getSheetByName('arrayIndexOf');
  let two_dementional_array = Index.getRange('A:A').getValues();
  let convert_single_array = two_dementional_array.map(function (element) {return element[0]});
  let here_row = convert_single_array.indexOf('here') + 1;
  console.log(here_row);
}
```
VirtualBox VMのSMBIOS UUIDを変更する方法


# はじめに

PCにはSMBIOSという製造元情報やシリアル番号が記録された領域があります。
PCの起動時にF12なんか押すと見れるこういうBIOS画面に表示される情報です。

![Award_BIOS_setup_utility.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200963/504d6354-5703-024e-8440-a7e9e6432af9.png "Award_BIOS_setup_utility.png")

普通に使っていれば縁のないBIOSですが、ソフトウェアの検証でBIOSのUUIDを任意の値に設定したくなりました。
実機ではBIOSの値を書き換えることが難しいため、VirtualBox VMでその値を変更することにしました。

はじめはこちらの[VBoxManageでのBIOS設定方法紹介ページ](https://www.virtualbox.org/manual/ch09.html#changedmi)を見れば楽勝と思っていたのですが、意外と大変だったのでその方法を紹介します。

# VBoxManage

VirtualBox VMの設定を色々弄れるユーティリティーです。
色々できます。でき過ぎてオプション覚えられません。
これを使って設定を行います。触りは[このページ](https://note.mokuzine.net/virtualbox-cmd/)を見てください。


# とりあえずSMBIOSの値を変更する

[setextradata](https://www.virtualbox.org/manual/ch08.html#vboxmanage-extradata)オプションを使えばOKです。

例）シリアル番号を変更する

```
VBoxManage setextradata VM-name "VBoxInternal/Devices/pcbios/0/Config/DmiSystemSerial" "new Serial"
```

例）ベンター名を変更する

```
VBoxManage setextradata VM-name "VBoxInternal/Devices/pcbios/0/Config/DmiSystemVendor" "new Vendor"
```


VM-nameには変更したいVMの名前が入ります。実際の値が何になるかは下記のlistオプションで確認してください。

```
VBoxManage list vms
```

# UUIDの変更は？

この流れからすると、UUIDは下記のコマンドで行けそうですが、そうはいきません。

```
VBoxManage setextradata VM-name "VBoxInternal/Devices/pcbios/0/Config/DmiSystemUuid" "9852bf98-b83c-49db-a8de-182c42c7226b"
```

正常にコマンドは終了し、変更されたように見えるのですが、VMを起動すると元のUUIDに戻ってしまいます。

ちなみに起動されたVMでUUIDを確認する方法はコマンドプロンプトで下記のコマンドを実行するだけです。　
※Windowsの場合

```
> wmic CSPRODUCT get /value

Caption=コンピューター システム製品
Description=コンピューター システム製品
IdentifyingNumber=0
Name=VirtualBox
SKUNumber=
UUID=06EB385A-9ACE-4C92-8016-E92D94359B77
Vendor=innotek GmbH
Version=1.2
```

元に戻ってしまう理由ですが、SMBIOSのUUIDはVM自体のUUIDも兼ねており、SMBIOS上の値を書き換えたとしても
別のところにストアされている値でリカバリされてしまうようです。

# VirtualBox上でUUIDがストアされている場所

1. VMのvboxファイル
2. VMのvdiファイル

それぞれ、下記の手順で変更を行います。

## vboxファイル
1. 一度VMを終了する
2. Oracle VM VirtualBox マネージャーの一覧から該当のVMを削除する　※参照だけ削除すること
3. vboxファイルを開き、Machineタグのuuid属性を書き換える
4. 再度、Oracle VM VirtualBox マネージャーより該当のVMを追加する

## vdiファイル
1. 一度VMを終了する
2. コンソールより下記のコマンドを実行する

```
VBoxManage internalcommands sethdparentuuid "vdiファイルパス" "new uuid"
```

尚、UUIDはWindowsであれば下記のコマンドで生成することができます。


```
PS C:> powershell -Command "[guid]::NewGuid().ToString()"
```

あとは普通に起動をすれば、変更後のUUIDが反映されているはずです。
スプレッドシートにGASで改行したメッセージを入力する

# Code
```
function messageSetValueIncludeNewLine() {
  const Spread = SpreadsheetApp.getActiveSpreadsheet();
  const Sheet = Spread.getSheetByName('sheet-name');
  const by_value = Sheet.getRange(vertical_position, horizontal_position);
  const past_range = Sheet.getRange(vertical_position, horizontal_position);
  const message = '<hello>' + String.fromCharCode(10) + by_value.getValue();
  past_range.setValue(message);
}
```
# what intention ?
This code will help you want to display a message containing a line break based on a particular cell.
This code will help you if you want to display a message containing a line break based on a particular cell.
erbファイルをhamlに変換する方法

備忘録のために残します。



#####1、gemを追加

```ruby:gemfile
gem "haml-rails"
```


```:ターミナル
bundle install
```

#####2、erbファイルをhamlに変換

```:ターミナル
rails haml:erb2haml
```



```:ターミナル
Would you like to delete the original .erb files? (This is not recommended unless you are under version control.) (y/n)
y
Deleting original .erb files.
```
元のerbファイルを削除するかどうかを聞かれる。
y or n で答える。



以上で完了！
___

hamlはタグを閉じる必要がない為、コード量の削減、簡略化ができるが、インデント管理のため、少しでもずれるとエラーが出る。
でも誰が書いても似たような構造になり、可読性が高いので積極的に使っていきたい。
librealsense (sdk2.0) を windows 10 でビルドして LiDAR CAMERA L515 を動かす

# やること

- https://github.com/IntelRealSense/librealsense/

ここのコードを Windows 10 でビルドして L515 を使って動かします。D435 とかでも基本同じですが、L515 でも動いたよという生存確認（？）です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/95e38b3c-4b95-ce73-5cd2-b26ec3a47520.png)


# 前提

- Windows 10 Home/Pro
- LiDAR L515
- librealsense: Intel RealSense SDK 2.0 (build 2.35.2))
- Cmake
- Visual Studio (C++) / 英語パック
- git for windows

## Visual Studio のインストール

ビルドに Visual Stdudio の C++ の開発環境が必要のようです。Visual Studio Installer で「C++によるデスクトップ開発：のワークロードをインストールしておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/4ae760ec-97cf-b0a3-fc85-9dd87e2c4a4b.png)

また、ビルド時に英語の言語パックのインストールを要求されるので、これも入っていない場合はインストールしておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/213783c4-e3ae-6ecc-d928-1c6be23a2562.png)

Visual Studio 自体は下記からインストール可能です。

- [Visual Studio](https://visualstudio.microsoft.com/ja/downloads/)

下記では Visual Studio 2017 でやってますが、2019 でもいけます。

## CMake のインストール

ビルドのために CMake が必要です。インストールされていない場合は、下記からインストールします。必要に応じてパスも通しておきます。

- [CMake](https://cmake.org/)

## Git のインストール

git は必須ではないですが、あると楽です。以下では git がインストールされているものとして、手順を示します。インストールは下記からできます。

- [Git for Windows](https://gitforwindows.org/)

# 手順

最初に PowerShell を開きます。PowerShell でなくてもできますが、以下では PowerShell を使う前提で手順を示します。

PowerShell を開いたら、git.exe, cmake.exe が使えることを確認しておきます。

```
>git --version
git version 2.24.1.windows.2

>cmake --version
cmake version 3.18.0-rc1

CMake suite maintained and supported by Kitware (kitware.com/cmake).
```


## ワークディレクトリの作成

以下の説明では `~/Documents/work` をワークディレクトリとして使います。もちろん他のディレクトリでもかまいません。

```
> cd ~/Documents
> mkdir work
> cd work
> git clone https://github.com/IntelRealSense/librealsense
> cd librealsense
```

## Cmake

```
> mkdir build
> cd build
> cmake ..
```

cmake が成功したら、build ディレクトリの中に librealsense2.sln ができるはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/9a0c7db5-b93b-9dfd-3e4e-126e4655c4a2.png)

## Visual Studio でのビルド

cmake で作成された`~/Documents/work/librealsense/build/librealsense2.sln` を Visual Studio で開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/85b034c2-4a11-3c57-6bf6-cc797ed56ae7.png)

開いたら、ビルドメニューでビルドします。

## 実行

ビルドが完了したら、build/Debug の中に example や tools をビルドした exe ができてます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/cc5ff660-069c-8ba2-17d7-e7f7dcedbbec.png)

下記は、L515 を接続して rs-gl.exe を実行したところです。

![l515_1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/62d560f1-c44f-155b-75ec-1b99b1fc28d4.gif)

# おまけ

L515 がとりあえず動くか試したいだけなら、下記からツール類のバイナリをダウンロードするのが一番簡単です。

- https://github.com/IntelRealSense/librealsense/releases

example の中のプログラムで、L515 で動かないものは結構あります。たとえば pose 系のサンプルは T265 でないと動きません。
どんな人にVRがおすすめなのか

#VRを設備購入したい人は
ネットの調査によると、
近年VRを購入したい人の中、20～35才の人が一番多いらしいです。
#VRの特徴とどんな人におすすめなのか
今回は、VRはどんな人におすすめなのかを話します。

まず、VRという概念を知るのは、大体ゲームからと思いますが、
実際ゲームだけではなく「広告」「医療」などの分野でも活躍しています。
多分専門ではないと、接触する事がないと思いますので、やはりゲームから知るのは一番多いです。

よって、新しいゲームを体験、追求したい人だけではなく、
**新しい技術などに興味がある人にもおすすめです。**

技術面はそこまで詳しくわけではないため、
ここはVRならではの特徴を紹介します。

VR設備は色々ありますが、基本的にはゴーグルタイプですね。
ゲームを遊びたいなら、必ずゲーム機（パソコンやスマホもゲーム機扱いの考え方で）が必要となります。大体「据置機」と「携帯機」二種類に分けられます。
現在のVR設備では両方ありますが、最近は「携帯機」が主流になっている感じです。
要するに、VRはいつでも遊べるのが特徴です。

勿論、周りの環境が見えない為、便利さは他の「携帯機」より低りですが、没入感は物凄く高いです。私の直感の感想を話しますと、視野は全部立体に見えるディスプレイに囲まれた感じです。
**ゲームの没入感を追求する人におすすめです。**

場所さえあれば遊べるので、便利だと思います。

**なお、VRですから、必ず3Dゲームになります。
3D酔いが激しい人には勧められないです。**

最後、VRのゲームと、その他のゲームとの最大の差は、
ディスプレイの3D世界中のキャラクターを操作するではなく、
自分が3D世界に入ってキャラクターになる感じですので、
新しいゲームのジャンルを生み出す可能性が高いです。

**新しい感覚のゲームを体験したい人は、VRを試した方がお得だと思います。**

では
AtCoder 生活　76日目

[前回](https://qiita.com/flandrescarlet237/items/45751679da78b2aaf23c)

#76日目
今回は茶色diffの問題を3問解きました。

|問題|難易度|自力で解けた|かかった時間|
|:-:|:-:|:-:|---|---|
|ABC094|C|◯|47分20秒|
|ABC137|C|✕|221分22秒|
|ABC061|C|◯|31分35秒|


##[ABC094_C](https://atcoder.jp/contests/abc094/tasks/arc095_a)

```c++

#include <bits/stdc++.h>
#define rep(i,n) for(int i = 0;i < (n);i++)
using namespace std;
using ll = long long;
using pii = pair<int,int>;

const int INF = 2e9;

int main(){
    int n;
    cin >> n;
    vector<int> x(n),y(n);
    rep(i,n){
        cin >> x[i];
        y[i] = x[i];
    }
    sort(y.begin(),y.end());
    int a = n/2;
    vector<int> b(2);
    b[0] = y[a-1],b[1] = y[a];
    rep(i,n){
        if(x[i] <= b[0]) cout << b[1] << endl;
        else cout << b[0] << endl;
    }
}

```

解くのにかかった時間：47分20秒


##[ABC137_C](https://atcoder.jp/contests/abc137/tasks/abc137_c)

```c++

#include <bits/stdc++.h>
#define rep(i,n) for(int i = 0;i < (n);i++)
using namespace std;
using ll = long long;
using pii = pair<int,int>;

const int INF = 2e9;

int main(){
    int n;
    cin >> n;
    vector<string> s(n);
    map<string,ll> x;
    ll ans = 0;
    rep(i,n){
        cin >> s[i];
        sort(s[i].begin(),s[i].end());
        x[s[i]]++;
        ans += (x[s[i]]-1);
    }
    cout << ans << endl;
}

```

解くのにかかった時間：221分22秒
感想：この問題の計算式が理解できない


##[ABC061_C](https://atcoder.jp/contests/abc061/tasks/abc061_c)

```c++

#include <bits/stdc++.h>
#define rep(i,n) for(int i = 0;i < (n);i++)
using namespace std;
using ll = long long;
using pii = pair<int,int>;

const int INF = 2e9;

int main(){
    ll n,k;
    cin >> n >> k;
    vector<pii> x(n);
    rep(i,n){
        int a,b;
        cin >> a >> b;
        x[i].first = a;
        x[i].second = b;
    }
    sort(x.begin(),x.end());
    rep(i,n){
        k -= x[i].second;
        if(k <= 0){
            cout << x[i].first << endl;
            return 0;
        }
    }
}

```

解くのにかかった時間：31分35秒


###最後に
おんなじ解き方をしてた。

難易度|かかった平均時間|解けた問題数|
|:-:|---|---|
|C|39分27秒|3問中2問|
【PyTorch】BERTを用いた文書分類入門

## はじめに
本稿では、英語のニュース記事見出しをカテゴリに分類するタスクを通して、事前学習済みBERTモデルをファインチューニングする流れを追っていきます。

本編は以下のリンク先に移転しました。
https://amaru-ai.com/entry/2022/10/15/202442
[PHP]三項演算子の使い方

#基礎
PHPの三項演算子についてまとめてみました。
三項演算子を使うとスッキリコードを書けます。

```php:index.php
if(条件式){
   trueだった場合
}else{
   falseだった場合
}
```
これを三項演算子で書くとこうなります。

```php:index.php
条件式 ? trueだった場合 : falseだった場合
```

具体的な値を当てはめると下記のようになります。

```php:index.php
<?php
$hogehoge = 1;
if($hogehoge == 1){
    $hoge = 'hello';
}else{
    $hoge = 'world';
}
?>
```

これを三項演算子を使うとこんなにあっさり書けます。

```php:index.php
<?php
$hogehoge = 1;
$hoge = $hogehoge == 1 ? 'hello' : 'world';
?>
```
これはどちらも出力結果は'hello'になります。

#応用

if文同様、AND、ORを使う

```php:index.php
条件1 && 条件2 ? trueだった場合 : falseだった場合
条件1 || 条件2 ? trueだった場合 : falseだった場合
```

条件式がnullの時trueを返す

```php:index.php
条件式 ?? trueだった場合 ;
```

※注意
echoは使用できない

```php:index.php
条件式 ? echo ~~~ : echo ~~~
```
この時、下を使います。

```php:index.php
条件式 ? print ~~~ : print ~~~
```

他にも色々書き方があるので試してみてください〜〜〜