OmniAICreator/Qiita-1.07M huggingface dataset:
行列から探してみよう

こんばんは('Д')
いつも応援有難うございます m(_ _)m

アルゴリズムを色々書いてきましたが、
ちょっと小休止で行列で遊んでみたくなりました。
簡単な奴から行きます。

```test.py
import numpy as np
Tarray = np.arange(12)
print(Tarray)
```

```実行結果.py
[ 0  1  2  3  4  5  6  7  8  9 10 11]
```

これって、例えば 3行4列に変更できないのでしょうか？
はい、出来ます。

```test.py
import numpy as np
Tarray = np.arange(12).reshape(3,4)
print(Tarray)
```

```実行結果.py
[[ 0  1  2  3]
 [ 4  5  6  7]
 [ 8  9 10 11]]
```

なるほど～、面白い!!
ここから、特定の要素のみを print するには
どうすれば良いでしょうか？
こんな記述はどうでしょう。。

```test.py
import numpy as np

Tarray = np.arange(12).reshape(3,4)

print(Tarray)
print()
print(f"Tarray[0,0] is {Tarray[0,0]}")
```

```実行結果.py
[[ 0  1  2  3]
 [ 4  5  6  7]
 [ 8  9 10 11]]

Tarray[0,0] is 0
```

なるほど。( ´ー｀)y-~~
ここまで分かったら、
行列から、欲しい数字を探せるかも。
やってみましょう(≧▽≦)

例えば 2行10列の 1 行目からデータを
抜き取る場合、こんな記述になりませんか？

```test.py
import numpy as np

Tarray = np.arange(20).reshape(2,10)
print(Tarray)
num = int(input(": "))

for i in range(10):
    if Tarray[0,i] == num:
        print(f"founded data is placed Tarray[0,{i}] ")
```

```実行結果.py
[[ 0  1  2  3  4  5  6  7  8  9]
 [10 11 12 13 14 15 16 17 18 19]]

: 6
founded data is placed Tarray[0,6] 
```

次は行をまたいで検索しましょう。
前述の Tarray[0,i] の 0 を変数に変えれば OK です。

```test.py
import numpy as np

Tarray = np.arange(20).reshape(2,10)
print(Tarray)
num = int(input(": "))

for j in range(2):
    for i in range(10):
        if Tarray[j,i] == num:
            print(f"founded data is placed Tarray[{j},{i}] ")
```

```実行結果.py
[[ 0  1  2  3  4  5  6  7  8  9]
 [10 11 12 13 14 15 16 17 18 19]]

: 13
founded data is placed Tarray[1,3] 
```

ではでは、行、列すらも変数になったらどうなるでしょうか。
私はこんな風に書いてみました。

```matrix_search.py
import numpy as np

M,N = map(int,input("enter M , N: ").split())
atest = np.arange(M*N).reshape(M,N)
print(atest)

num = int(input("find value: "))

for i in range(M):
    for j in range(N):
        if atest[i,j] == num:
            print(f"found value is placed at　[{i},{j}]")
```

```実行結果.py
enter M , N: 4 8
[[ 0  1  2  3  4  5  6  7]
 [ 8  9 10 11 12 13 14 15]
 [16 17 18 19 20 21 22 23]
 [24 25 26 27 28 29 30 31]]

find value: 20
found value is placed at [2,4]
```

位置表示が 0 行 0 列があるものとして構成しています。
無いですよね、そんなの(笑)

```matrix_search.py
import numpy as np

M,N = map(int,input("enter M , N: ").split())
atest = np.arange(M*N).reshape(M,N)
print(atest)

num = int(input("find value: "))

for i in range(M):
    for j in range(N):
        if atest[i,j] == num:
            print(f"found value is placed at　[{i+1},{j+1}]")
```

```実行結果.py
enter M , N: 4 8
[[ 0  1  2  3  4  5  6  7]
 [ 8  9 10 11 12 13 14 15]
 [16 17 18 19 20 21 22 23]
 [24 25 26 27 28 29 30 31]]

find value: 20
found value is placed at [3,5]
```

はい、今度は大丈夫そうです。
ではまた ^^) _旦~~
【HTML&CSS】CSSで使う単位とその意味

#プログラミング勉強日記
2020年10月20日
`px`,`%`,`em`などサイズを指定する単位はたくさんあって、それぞれの違い理解しておかないといけないと思ったのでまとめる。

#ピクセル単位(px)
　ピクセルはサイズを固定する単位。1ピクセルは画面上ではドット1個で表示する。

　ピクセル単位は柔軟性に欠けるので<b>font-sizeの設定には向いてない</b>。


#Em単位(em)
 　1emの大きさはブラウザの`font-size`のデフォルトの値で決まる。初期設定では1emは16pxである。em単位の値は要素が継承したfont-sizeによって決まる。

　フォントサイズ設定に使うとユーザ設定のオーバーライドに関する問題を回避しやすい。


#Rem単位(rem)
　1remの値はルート要素のfont-size値と同じ。

　em単位では親要素のfont-sizeに従って子要素のfont-sizeが拡大縮小することがem単位の値を計算するプロセスを複雑にしてしまうことがあるので、よくないこともある。rem単位にはそういった点がない。
　具体的には、独立した親コンテナのfont-sizeでrem単位を指定すれば、モジュール内の全要素のfont-sizeを親要素に従って設定でき、他のモジュールから切り離して設定できる。

#パーセント(%)
　パーセントはem単位と同様。

　ルート要素におけるブレークポイントでfont-sizeを設定するので、レスポンシブデザインでの計算が簡単になる。


#Viewport単位(vw, vh, vmin, vmax)
　様々な要素のfont-sizeをビューポートのサイズを基準にして設定できる。

　ビューポートサイズが小さすぎたり大きすぎたりすると、font-sizeではテキストが読みにくくなってしまう可能性がある。


#参考文献
[HTMLでemでフォントサイズを指定する方法を現役エンジニアが解説【初心者向け】](https://techacademy.jp/magazine/34722)
[CSS初心者が混乱しがちな7つの単位の意味と違いをしっかり理解しよう](https://www.webprofessional.jp/a-walkthrough-of-css-length-units-you-can-use-for-font-size/)
【c++】可変長配列の要素のソート

c++の自分用の学習メモ。コードの書き方はAtCoderに適したもの。
c++では、配列に格納された要素のソートを以下のように行う。
例では可変長配列であるvectorを使う。

```main.cpp
#include <bits/stdc++.h>
using namespace std;

int main() {
    //入力を受け入れる数字の個数を指定する
    int N;
    cin >> N;
    //可変長配列を入力された数値で初期化
    vector<int> a(N);
    for(int i = 0; i < N; i++){
    //入力された値を配列に格納する
        cin >> a[i];
    }
    //配列に格納された値を昇順でソート
    sort(a.begin(), a.end());
    for(int i = 0; i < a.size(); i++){
        cout << a[i] << endl;
    }
    return 0;
}
```
降順でソートをしたい場合は以下のように"r"をbegin,endの前につける。

```
sort(a.rbegin(), a.rend());
```
Laravelのmigrate:freshでDBのviewも削除する

Laravelのコマンドはコードを読んでみると実はいろんなオプションがついていたりします。

# db:wipeコマンド

`db:wipe`コマンドでdbのtableをdropできるのですが、実は`db:wipe --drop-views`とするとviewも削除することができます。

# migrate:freshコマンド
またmigrateを最初からやり直す`migrate:fresh`コマンドがありますが、viewを作っている場合はviewの作成も最初からやり直さないとviewだけ残ってしまいます。

これを解決するには`migrate:fresh --drop-views`とすることでviewも削除することができます。

コードを読んでみると

```php:FreshCommand.php

<?php

namespace Illuminate\Database\Console\Migrations;

use Illuminate\Console\Command;
use Illuminate\Console\ConfirmableTrait;
use Symfony\Component\Console\Input\InputOption;

class FreshCommand extends Command
{
    use ConfirmableTrait;

    /**
     * The console command name.
     *
     * @var string
     */
    protected $name = 'migrate:fresh';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Drop all tables and re-run all migrations';

    /**
     * Execute the console command.
     *
     * @return void
     */
    public function handle()
    {
        if (! $this->confirmToProceed()) {
            return;
        }

        $database = $this->input->getOption('database');

        $this->call('db:wipe', array_filter([
            '--database' => $database,
            '--drop-views' => $this->option('drop-views'),
            '--drop-types' => $this->option('drop-types'),
            '--force' => true,
        ]));

        $this->call('migrate', array_filter([
            '--database' => $database,
            '--path' => $this->input->getOption('path'),
            '--realpath' => $this->input->getOption('realpath'),
            '--force' => true,
            '--step' => $this->option('step'),
        ]));

        if ($this->needsSeeding()) {
            $this->runSeeder($database);
        }
    }

    ... 略 ...
}

```

となっていて、--drop-viewがdb:wipeコマンドに渡されているのがわかりますね。
with_optionsを使って、同じバリデーションを一括りにしちゃえ！

#はじめに
　今のアプリケーション作成で使ったバリデーションについて、まとめておく。

##共通のバリデーションをまとめる

###with_options

よく使うバリデーションを例に

```ruby:model
validates :user, presence: true
validates :item, presence: true
validates :price, presence: true
validates :email, presence: true
```
なんか同じことばかり繰り返していて、長くなり、可読性が…
そんなときは、`with_options`でまとめてバリデーションを設定できる。

```ruby:model
with_options presence: true do
  validates :user
  validates :item
  validates :price
  validates :email
end
```
##with_optionsをさらに発展的に使って

###さらに個別にバリデーションを追加

```ruby:model
with_options presence: true do
  validates :user, length: { minimum: 6 }
  validates :item
  validates :price, format: { with: /\A[0-9]+\z/ }
  validates :email
end
```
do~endの中に個別でバリデーションを付けられる。
ちなみに、lengthオプションは、文字数を限定できる。
formatオプションは正規表現についての指定。

###さらにまとめる

```ruby:model
with_options presence: true do
  validates :user
  validates :item
  with_options uniqueness: true do
    validates :price
    validates :email
  end
end
```
with_optionsの中にwith_optionsを入れ子にできる。
上の例だと、
`presence: true`は:user, :item, :price, :emailに設定され、
さらに、`uniqueness: true`は:price, :emailに設定されている。
ちなみに、uniquenessオプションは同じ値を保存できないようにする。（一意性）
##最後に
　with_optionsでまとめて記述するのは、中学の数学で出てきた、因数分解の学習あたりの共通項で括る感覚に近い。
【M5Stack】ジャイロセンサーが反応しないとき、 M5.Power.begin() をお忘れでは？


M5Stackで以下のコードで、ジャイロセンサー（MPU6886）の値をとろうとしたが、なぜか値が取れない事象（ずっと値がゼロ）が発生し、２時間ハマった。



```main.cpp

#define M5STACK_MPU6886 
#include <M5Stack.h>

float gyroX, gyroY, gyroZ;

void setup() {
  M5.begin();
  M5.IMU.Init();
}

void loop() {
  M5.update();
  M5.Lcd.clear(BLACK);

  M5.IMU.getGyroData(&gyroX,&gyroY,&gyroZ);
  M5.Lcd.setCursor(100, 100);
  M5.Lcd.printf("gyro=(%7.2f, %7.2f, %7.2f)", gyroX, gyroY, gyroZ);

  delay(100);
}
```

<br>
void setup() の中に
<font color="red"><B>M5.Power.begin();</B></font>
を追加したら、ジャイロセンサーの値が取れた。
<br>

```main.cpp

#define M5STACK_MPU6886 
#include <M5Stack.h>

float gyroX, gyroY, gyroZ;

void setup() {
  M5.begin();
  M5.Power.begin(); //これを追加したらセンサー値がとれた
  M5.IMU.Init();
}

void loop() {
  M5.update();
  M5.Lcd.clear(BLACK);

  M5.IMU.getGyroData(&gyroX,&gyroY,&gyroZ);
  M5.Lcd.setCursor(100, 100);
  M5.Lcd.printf("gyro=(%7.2f, %7.2f, %7.2f)", gyroX, gyroY, gyroZ);

  delay(100);
}
```

<br>
M5.begin()；だけでは完全に初期化はできず、M5.Power.begin()；で電源関係の初期化をするらしい。

よく分からないが、動いたからヨシ！

<BR>
全Lambdaからコードをzipダウンロードしてきて、zipのままキーワード検索する

# これはなに？
全Lambdaからコードをzipダウンロードしてきて、zipのまま検索しました。

 - ① 全Lambdaからコードをダウンロード
 - ② zipのまま検索(zipgrep使用)

の２つの手順で行います。

## 利用ケース
リポジトリ管理していない直書Lambdaなどが大量に存在するカオスな検証アカウントで特定キーワードを含むLambdaがないか調査するときに使用。
カオスなアカウントが出来上がらないようにするのがいいとは思うのですが、古の闇に手を突っ込む機会に恵まれました。

追記：パッケージングしている外部ライブラリ（リポジトリ上では依存関係のみを定義）の中身も含めて検索したい場合にも有用でした。

# ① 全Lambdaからコードをダウンロード

**nemani/download_all_lambda_functions.sh**
https://gist.github.com/nemani/defdde356b6678352bcd4af69b7fe529

これを使います。

## 前提条件
・wgetが必要
・**cliのアウトプットをtextにしておく**
・bashつかわないとだめかも
・中でaws clilつかっているのでプロファイルなどは設定しておく

## 使用中
・実行すると "Completed Downloading all the Lamdba Functions!" と表示されるが、バックグラウンドでタスクは続行しており完了はしていない。
・数秒またないとダウンロードが始まらないので待つ
・全てのバックグラウンドタスク終わったという合図がないので、私はダウンロードタスクが止まってzipの数が関数の数と一致したら完了と見做しました。


## 使用例

```shell:
# この辺はデフォルトプロファイルなど常に設定しているなら不要
export AWS_DEFAULT_PROFILE=xxxxx
export AWS_DEFAULT_REGION=ap-northeast-1
export AWS_DEFAULT_OUTPUT=text
# 実行
bash download_all_lambda_functions.sh 
```

## 出力結果
lambda_functions/* に関数ごとにzipが保存される


## 全リージョンに対して行う場合

全リージョンぐるぐる回すバージョンを書いてみました

```shell:
download_code () {
    local OUTPUT=$1
    local REGION=$2
    aws lambda get-function --function-name $OUTPUT --query 'Code.Location' --region $REGION | xargs wget -O ./lambda_functions/$OUTPUT-$REGION.zip  
}

mkdir -p lambda_functions

for region in `aws ec2 describe-regions --query 'Regions[].RegionName' --region us-west-1 --output text`
do
    echo $region
    for run in $(aws lambda list-functions --region $region | cut -f 6 | xargs);
    do
        download_code "$run" "$region" &
    done

    echo "Completed Downloading all the Lamdba Functions! $region"
done

echo "finished"
```

lambda_functions/ 配下に「lambda_functions/{関数名}-{リージョン名}.zip」でダウンロードします。

# ② zipのまま検索(zipgrep使用)


## 使用例(HOGEHOGEを検索)

```shell:
cd lambda_functions

for file in *.zip; do
    res=`zipgrep -n HOGEHOGE $file`
    if [ -n "$res" ]; then
        echo "x:$file";
        echo "$res";
    else
        echo "o:$file";
    fi
done
```


### ボツ
最初は

```shell:
find ./lambda_functions -name '*.zip' | xargs -I file zipgrep HOGEHOGE file
```
とかでやってたんですが、これだと、どのzipで検出したかわからなかったので前述のを流して確認しています。

## 出力結果例
キーワードに引っかかったlambdaを x:〜
引っかからなかったlambdaを o:〜
で出力しています。

```
x:aaaa-checker.zip
lambda_function.py:30:        target     = "HOGEHOGE",
o:bbbb-deleter.zip
o:cccc-notifier.zip
x:dddd-test.zip
lambda_function.py:21:       print("HOGEHOGE")",
...
```


## 備考
Lambda にライブラリや.env環境が同梱されているとgrepはけっこう時間がかかる。
【Vue】The template root disallows 'v-for' directives. 解決法

#テンプレートルートは、'v-for'ディレクティブを許可しません。
分割したコンポーネントで`v-for`を使ったところ、このようなエラーが、、、:point_down:

**The template root disallows ‘v-for’ directives.**
（翻訳にかけると「テンプレートルートは、'v-for'ディレクティブを許可しません」と言う意味）

![スクリーンショット 2020-10-20 21.00.42.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/0d0e19b9-9fc2-d5d8-8982-e87e52aee57a.jpeg)

なんじゃこりゃ？？

コードはこんな感じ

```vue
<template>
  <app-stock v-for="stock in stocks" :key="stock.id"></app-stock>
</template>

<script>
import Stock from './Stock.vue';
export default {
    data() {
        return {
            stocks: [
                { id: 1, name: 'BMW', price: 110 },
                { id: 2, name: 'Google', price: 210 },
                { id: 3, name: 'Amazon', price: 250 },
                { id: 4, name: 'Sony', price: 260 },
            ]
        }
    },
    components: {
        appStock: Stock,
    }
}
</script>
```



#Componentの中の処理はすべてsingle root elementで囲わなければならない
なんだか難しそうな言葉ですが、要するに**「何か別のタグで囲え」**という事

```vue
<template>
 <!-- 　適当にdivタグで囲った -->
  <div>
    <app-stock v-for="stock in stocks" :key="stock.id"></app-stock>
  </div>
</template>

<script>
import Stock from './Stock.vue';
export default {
    data() {
        return {
            stocks: [
                { id: 1, name: 'BMW', price: 110 },
                { id: 2, name: 'Google', price: 210 },
                { id: 3, name: 'Amazon', price: 250 },
                { id: 4, name: 'Sony', price: 260 },
            ]
        }
    },
    components: {
        appStock: Stock,
    }
}
</script>
```

というわけで、`<div>`で`v-for`を囲いました。。
nil?  empty?  blank? present? の違い

この記事ではmacOS Catalina10.15.6にインストールしたRuby 2.6.5を使っています。
nil?  empty?  blank?の区別をはっきりさせたかったので書きました。

# nil?
- 「何も存在しない」状態です。器も中身も何もありません。
- だからnilという言葉でしか表せないのですね。

```ruby
name = nil 
name.nil? #=> true
```

- 例えば、以下の例は全てnilにはならないので注意ですね。

```ruby
array = [] #=> false
zero = 0 #=> false
name = ""  #=>false
hash = {} #=> false
```

# empty?
- 「器はあるけど中身がない」状態です。これはイメージしやすいですね。
空のお皿という状況でしょうか。
- ただし、__nilにempty?メソッドを使うとエラーが出てしまう__ので、よく見極めてから使いましょう。

```ruby
array = [] 
array.empty? #=> true

animal = ""
animal.empty? #=> true

name = nil
name.empty? #=> false
```

#blank?
- nil?とempty?を合体させたようなメソッドです。
- nilとemptyのどちらでもtrueを返すのですね。

```ruby
array =[]
array.blank? #=> true

name = nil
name.nil? #=> true
```

# present?
- 「器があって、中身がある」状態です。
つまり、中身があればOKということですね。

```ruby
age = 24
age.present? #=> true

```
APIを理解する為に深掘ってみた

##前置き
IT初心者です、間違いがあれば教えて頂けると幸いです。

#APIとは？
「Application Programming Interface」の略で、「アプリケーション　プログラミング　インターフェイス」ってことですね。
なんのことを言っているかくらいはわかるかなって感じ。

アプリケーションをプログラミングする為のインターフェイス！
繋げると少しわかりやすくなりました。


インターフェイスってなんだっけ？
異なる2つのものを仲介するという意味だそうです。


ここで言うインターフェイスは、アプリケーションとプログラミングと言うよりはプログラムを繋げる的な感じになりそう。



いろんな意味を持つみたいで、

〇〇のようにリクエストがきたら〇〇のようにデータを返す、と言うのもAPIの一種


この中でも、知っておかないとダメなのが

##Web API

WebAPIは、HTTP/HTTPS通信を使用して利用するAPIのことで。
わかりにくい。

簡単に言うと、Web上でAPIをやりとり可能にしたもの。

身近なもので言うと、ぐるなびの位置情報や条件で検索できるやつ

ブログとかにあるAmazonの広告みたいなやつ。


なんとなくイメージは掴めた！



公開範囲によって呼び方が変わるそうです。

##オープンAPI（公開API）
外部に公開されているAPIのこと。

GoogleMapなどがこれにあたる。


##内部API
内部APIは、個人などが開発したアプリケーションの内部で取り扱うAPIのこと。
Ajaxを利用したアプリなどがこれに該当します。
Javaコマンドについて

##そもそもJavaコマンドとは？


**背景**

業務の中でそもそもJavaコマンドが実行された場合どんな処理がされているのか？

調べてみた。

##Javaコマンドの仕組み

- javaコマンドは、JVM起動するためのコマンド
- JVMは起動後に、指定されたクラスをロードし、クラスのmainメソッドを呼び出す
- **javaコマンドの構文**

```
java 完全修飾クラス名 [引数　引数 ...]
```

##詳細

- クラス名の後に続ける引数のことを**「起動パラメータ」**や**「コマンドライン引数」**という
- 起動パラメータはスペースで区切って複数指定できる
- 起動パラメータはオプションなので省略が可能
- 起動パラメータとして指定されたデータはJVMによってString配列オブジェクトに格納されmainメソッドの引数として渡される

##javaコマンドを実行したときの流れ

- JVMを起動する
- 指定されたクラスをクラスパスから探し出してロードする
- String型配列オブジェクトを作成して起動パラメータを格納する
- 起動パラメータを保持したString配列型オブジェクトへの参照を引数に渡してmainメソッドを実行する


##例題

```java

public class Main{
   public static void main(String[] args) {
    System.out.println(args[0] + " " + args[1]);
   }
}
```

**コマンド**

```
$ java Main red blue grenn
```

[Dokojava](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwj5qq3KlMPsAhWlIqYKHcW1Cl4QFjAAegQIARAC&url=https%3A%2F%2Fdokojava.jp%2F&usg=AOvVaw3-iJ_00k-0ctsUdsFTbwDe)で実際にやってみよう！





##参考にした記事（いつもありがとうございます。）

[【初心者でもすぐわかる】javaコマンドの使い方まとめ
](https://eng-entrance.com/java-command#:~:text=Java%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%A8%E3%81%AF%E3%80%81Java,%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B%E5%BF%85%E8%A6%81%E3%81%A7%E3%81%82%E3%82%8B%E3%80%82)
[day: 3]小さな効率化とリーダブルコード

# 小さな効率化とリーダブルコード
## はじめに
2020/4/1にエンジニアになりました。
scala/Play、TypeScript/Angular
ほぼ日記みたいな内容です。
毎日の学習のアウトプットが目的です。

## 小さな効率化
小さいですが、積み重なると大きい効率化をしました。
それはHotKeyを利用してiTerm2を開くことです。
今までは別の画面からiTerm2を開くときには`command + tab`を使って切り替えてました。
キーボードのホームポジションから大きく左手がずれてしまうのと、タブでの選択を間違えてしまうと大きく時間をロスしてしまいます。
ショートカットでHotKeyを設定すると一瞬で今いる画面の上に被さる形でiTerm2を表示できるので、調べ物から開発に切り替える際の動きが格段に早くなりました。
自分は`option + enter`で設定しています。
おすすめなので皆さんも試して見てはいかがでしょうか。

参考にした記事
[iTerm2のおすすめ設定〜ターミナル作業を効率化する〜](https://qiita.com/ruwatana/items/8d9c174250061721ad11)

## リーダブルコード
リーダブルコードを読みましたので、簡単にまとめたいと思います。
[リーダブルコード――より良いコードを書くためのシンプルで実践的なテクニック](https://www.oreilly.co.jp/books/9784873115658/)

### 1章 理解しやすいコード
- コードは他人にとって理解しやすく書く
- コードは他人が最短時間で理解できるように書く
- 理解する時間が短い > コードが短い
- このコードは見やすいか確認する

### 2章 名前位に情報を詰め込む
- 名前に情報を詰め込む
- 名前は小さなコメントである
- 明確な単語を選ぶ
    - 適格な意味を持つ単語を選択する
    - シソーラスで検索して調べる
    - 気取った言い回しよりも正確で明確な単語を選ぶ
- 汎用的な名前を避ける 例)tmpやretval
    - 情報の保存期間が一瞬であれば汎用的で良い
- 抽象的な名前よりも具体的な名前を使う
    - 変数名が抽象的だと使用者によって解釈が異なる
        - 何をするのか明確にわかる名前をつける
- 名前に情報を追加する
    - 絶対に伝えたい情報は名前に入れる
	- 単位など
- 名前の長さを決める
    - 名前は長すぎないようにする
	- スコープの範囲が短い場合には短くても良い
	    - 理解しにくい省略形の名前はつけない
- 名前のフォーマットで情報を伝える
    - クラスや変数で使用するフォーマットを変えると読みやすくなる
	- プロジェクトでの一貫性が大事

### 3章 誤解されない名前
- 他人が違う意味に誤解しないか確認する
- 否定形を避ける

### 4章 美しさ
- 優れたコードは目に優しいものである
- 似ているコードは似ているように書く
- インデントを揃えて縦の線を真っ直ぐにする
- コードを段落に落とし込む

### 5章 コメントすべきことを知る
- コメントの目的は書き手の意図を読み手に知らせることである
- コメントを読んだ方が理解がはやか？
- 優れたコード > ひどいコード+コメント
- 変数名を変えることでコメントが不要にならないか考える
- プログラマーが使う典型的な意味
    -TODO:後で手をつける
    - FIXME:既知の不具合があるコード
    - HACK:あまりキレイじゃない解決法
    - XXX:危険！大きな問題がある
- 質問されそうな箇所を考える
    - 新しく入ったメンバーが理解に時間がかかる箇所などを考える
- 巨大な関数の流れをコメントで把握できるようにする

### 6章 コメントは正確で簡潔に
- コメントは簡潔に
- 曖昧な代名詞を避ける
- 小さな領域に情報を詰め込む

### 7章 制御フローを読みやすくする
- 条件式の引数の並び順
    - 左；変化する、右；変化しない
- if文の記述
    - 肯定系を優先して使う
    - 単純な処理を先に書く
    - 目立たせたい処理を先に書く
- ネストを浅くする

### 8章 巨大な式を分解する
- 説明変数:式の意味を説明する
- 要約変数:式の内容を小さく分割できる、その式の内容を要約している

### 9章 変数と読みやすさ
- 不要な変数を削除する
    - 変数が減るとコードは簡潔になる
    - 本当にその変数が必要か確認する
- 変数のコードを縮める
    - グローバルな変数は削除する

### 10章 無関係な下位問題を抽出する
- 汎用的なコードを作成する
- 高レベルの解決に集中する
    - 下位問題は分解して抽出する

### 11章 1度に一つのことを
- 2つ以上のことを行っているコードは分解する
- ヘルパーメソッドを利用する
    - ヘルパーメソッドとは他の関数に依存することなくある特定の処理を行うメソッド

### 12章 コードに思いを込める
- 簡単にわかりやすく説明できなければ理解したとは言えない
    - おばあちゃんにも理解できるように説明できますか？
    - コードの動作を同僚に簡単な言葉で説明してみる
    - 説明の中で使用したキーワードやフレーズに注目する
    - その説明に合わせてコードを書く

### 13章 短いコードを書く
- ライブラリが何を提供しているのかを知る
    - 普段使用しているライブラリの提供しているものを定期的にじっくり見てみる
    - 標準ライブラリで解決できる問題があることがある
- 今書いているそれらのコードは本当に必要か？
- 1日にエンジニアが出荷するコードは10行である
- 不要な機能はプロダクトから削除する
    - メモリの消費を抑える
- 過剰な機能はもたせない
- 最も簡単に問題を解決する方法を考える

### 最後に
- 実際にやる
- 当たり前にする
- コードでつたる

## 毎日投稿について
- 完全な自己満足
- アウトプットの習慣づけ
- インプットした内容の記憶の定着を促進
- 継続 > クオリティ
- 昨日の自分より成長している実感を得る
10分くらいでできるSQLite入門

# 対象
ProgateのSQLコース学んだくらいのレベル

# 目標
ローカルでもSQL叩ける環境を用意する。

本記事ではsampleという名前のデータベース, usersという名前のテーブルを作る

# 環境
Mac (であればデフォルトsqlite3のコマンドが使えるはず)

# SQLite3の特徴
1つのファイルと1つのデータベースが1:1対応。
コマンドでしか操作できないエクセルみたいなもの(雑)

# 準備
作業用フォルダを作る
ここでは`sqlite-sample`というフォルダ名で作った

ファイルを開く　(なければ更新時にファイルが作られる)

```
sqlite-sample $ sqlite3 sample.sqlite3
SQLite version 3.28.0 2019-04-15 14:49:49
Enter ".help" for usage hints.
sqlite>
```

> sqlite3の拡張子はsqlite3, db, sqlite等複数あるがどれでもよい

sqlite3のファイルを開くと、

```
sqlite>
```
のようにsqlite用のコンソールになる。


終了コマンド 以下のコマンドを叩くと戻ってこれる

```
sqlite> .exit
```

# テーブルを作る
テーブル一覧を表示
.tables

最初は何もないので何も表示されない

```
sqlite> .tables
sqlite>
```

テーブルを作成

```
sqlite> create table users (id int, name string);
```

すると、テーブル一覧でusersが出るようになる

```
sqlite> .tables
users
```

テーブルのスキーマの確認

```
sqlite> .schema users
CREATE TABLE users (id int, name string);
```

# データの追加・取得
テーブルに値追加

```
insert into users (id, name) values (1, "sato");
```

テーブルの値の取得

```
sqlite> select * from users;
1|sato
```

# まとめ
これで無限にSQLの練習ができるよ！やったね！

# 参考
[SQLite3まとめ](https://qiita.com/ChiakiYamaoka/items/b7c7863688d6f23c0501)
gspreadでdate/datetime型の値を書き込みたかった

#TL;DR

* 日付型はそのまま入れられないので文字列に変換する
* 文字列の日時指定は海外のスタイルで書かないと`INVALID_ARGUMENT`で怒られ続けるので下記にする
    * `"%d-%m-%Y %H:%M:%S"`
* 値のオプションに`USER_ENTERED`を指定する
    * append_rowとかだとあるから似たような他のでもあるんじゃないか

# やりたいこと

* 日付列を持つデータが複数行ある
* そのデータをgspreadから追加していきたい

# 怒られたこと
## No.1

皆さん御存知の通りこんな感じで使おうとする

```
import gspread
from oauth2client.service_account import ServiceAccountCredentials

scope = ['https://spreadsheets.google.com/feeds',         
         'https://www.googleapis.com/auth/drive']

credentials = ServiceAccountCredentials.from_json_keyfile_name('gspread-key.json', scope)
gc = gspread.authorize(credentials)
wks = gc.open('test-sheet').sheet1

date = datetime.datetime.now()
time = date.strftime('%Y-%m-%d %H:%M:%S'),       

# gspread run
datas = [time, 250]
wks.append_row(datas)
```

`INVALID_ARGUMENT`で怒られる

## No.2

日付型でそのままいけんのかー？とこうする

```
# gspread run
datas = [date, 250]
wks.append_row(datas)
```

```
root@NAKAMIRI-DESKMINI:~# python test.py 
Traceback (most recent call last):
  File "test.py", line 32, in <module>
    wks.append_row(datas)
  File "/usr/local/lib/python2.7/dist-packages/gspread/models.py", line 1441, in append_row
    table_range=table_range,
  File "/usr/local/lib/python2.7/dist-packages/gspread/models.py", line 1478, in append_rows
    return self.spreadsheet.values_append(range_label, params, body)
  File "/usr/local/lib/python2.7/dist-packages/gspread/models.py", line 164, in values_append
    r = self.client.request('post', url, params=params, json=body)
  File "/usr/local/lib/python2.7/dist-packages/gspread/client.py", line 67, in request
    headers=headers,
  File "/usr/local/lib/python2.7/dist-packages/requests/sessions.py", line 578, in post
    return self.request('POST', url, data=data, json=json, **kwargs)
  File "/usr/local/lib/python2.7/dist-packages/google/auth/transport/requests.py", line 470, in request
    **kwargs
  File "/usr/local/lib/python2.7/dist-packages/requests/sessions.py", line 516, in request
    prep = self.prepare_request(req)
  File "/usr/local/lib/python2.7/dist-packages/requests/sessions.py", line 459, in prepare_request
    hooks=merge_hooks(request.hooks, self.hooks),
  File "/usr/local/lib/python2.7/dist-packages/requests/models.py", line 317, in prepare
    self.prepare_body(data, files, json)
  File "/usr/local/lib/python2.7/dist-packages/requests/models.py", line 467, in prepare_body
    body = complexjson.dumps(json)
  File "/usr/lib/python2.7/json/__init__.py", line 244, in dumps
    return _default_encoder.encode(obj)
  File "/usr/lib/python2.7/json/encoder.py", line 207, in encode
    chunks = self.iterencode(o, _one_shot=True)
  File "/usr/lib/python2.7/json/encoder.py", line 270, in iterencode
    return _iterencode(o, 0)
  File "/usr/lib/python2.7/json/encoder.py", line 184, in default
    raise TypeError(repr(o) + " is not JSON serializable")
TypeError: datetime.datetime(2020, 10, 20, 21, 24, 12, 211250) is not JSON serializable
```

ですよねー

## No.3

入力値のオプション足りんかったかー

```
# gspread run
datas = [time, 250]
wks.append_row(datas, value_input_option="USER_ENTERED")
```

`INVALID_ARGUMENT`
ｱｯﾊｲ...
Laravel/PHP タグ付き投稿の検索機能（orWhereHasと無名関数、クロージャ）

#やりたいこと
ジャズライブの口コミをタグ付きで投稿できるサイトを、チームで開発しています。
口コミ投稿をキーワード検索するコードをネットを参考にしながら書いたのですが、一部読み解けなかった部分を整理したいと思います。

###仕様
* キーワードが入力されると、そのキーワードを含む投稿を検索しビューに表示する。
* 検索対象は、投稿の(1)タイトル、(2)本文、(3)投稿につけられたタグ。
* 投稿のテーブル、タグのテーブルはEloquentでModelを利用している。
* 投稿のテーブルとタグのテーブルが中間テーブルを挟んで多対多のリレーションでつながっている。

# 実装してみた
##コントローラの実装例
ルート、ビューなどは省略させていただきます。もし見せて！という方いたらコメントください（いないと思いますが汗）。

```php:SearchController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Review;
use App\Tag;

class SearchController extends Controller
{
    public function search(Request $request)
    {
        $keyword = $request->input('keyword');
        if (!empty($keyword))
        {
            $reviews = Review::where('title', 'like', '%' . $keyword . '%')
            ->orWhere('text', 'like', '%' . $keyword . '%')
            ->orWhereHas('tags', function ($query) use ($keyword){
                $query->where('tag_name', 'like', '%' . $keyword . '%');
            })
            ->paginate(10);
        } else {
            return redirect('/');
        }

        return view('reviews.search', [
            'reviews' => $reviews
        ]);
    }
}
```
orWhereHasからの２行がよくわからない！！ココを解明したい！！

##orWhereHasとは？

```php
            ->orWhereHas('tags', function ($query) use ($keyword){
                $query->where('tag_name', 'like', '%' . $keyword . '%');
```
**orWhereHas**はEloquentのメソッド、関数。わかってたふりしてましたが、案外うまく説明できなかったので整理。公式ドキュメント→[Eloquent:存在するリレーションのクエリ](https://readouble.com/laravel/7.x/ja/eloquent-relationships.html?header=%25E5%25AD%2598%25E5%259C%25A8%25E3%2581%2599%25E3%2582%258B%25E3%2583%25AA%25E3%2583%25AC%25E3%2583%25BC%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%25B3%25E3%2581%25AE%25E3%2582%25AF%25E3%2582%25A8%25E3%2583%25AA)
**or**は、2つ以上の条件をつけて「AもしくはB」としたい時に、2つめ以降の条件のメソッドにつける言葉。
**Where**は、SQLのわかる方なら想像しやすいかもですが、問い合わせに条件をつけるもの。例えばidがホニャララなもの、とかcreated_atがいついつ以前のものといった条件が想定できるかと思います。
**Has**はあるモデルからリレーション先のテーブルに対してレコードを探してくれるメソッド。リレーション名を第一パラメータに渡します。例えば、以下のようにするとタグの付いたレビューを取得するという命令になります。

```
$reviews = Review::has('tags')->get();
```
まとめるとorWhereHasは、リレーション先にレコードを（**Has**）、条件付きで（**Where**）、並列の条件（**or**）として探しにいく時に便利なEloquentのメソッドです。

##orWhereHasの第二パラメータの関数は何？
```php
            ->orWhereHas('tags', function ($query) use ($keyword){
                $query->where('tag_name', 'like', '%' . $keyword . '%');
```
このfunctionから始まる２行は、**無名関数**、またの名を**クロージャ**というやつみたいです。公式→[PHP 無名関数](https://www.php.net/manual/ja/functions.anonymous.php)。名前ないですものね。無名関数はどういう時に使うかというと、プログラムの中でその場で一度しか使わないものに適切みたいです。ちなみに、[Closure](https://www.php.net/manual/ja/class.closure.php)というクラスで実装されているそうです。紐解いていきます。

順番前後しますが、`use ($keyword)`は、その関数の親のスコープから変数$keyordを引き継ぐ時にuseで渡すようです。
`($query)`は変数ではなく引数。通常の引数を受け付けています。この無名関数の中では、「tag_nameに$keywordを含んだレコードを」という条件設定をしているwhereメソッドにアクセスしています。

総合して一言でこの第２パラメータを説明すると、**親スコープの$keywordを引き継いで作成する、whereという条件設定をする関数**という感じでしょうか。

#最後に
もしご指摘などあれば、バシバシお願い申し上げます！
route53 最新版　レコード作成画面





現在ポートフォリオ等のために　初めてRoute５３を
触る人用の設定案内です。



あまり2020年１０月現在の最新バージョンの
レコード作成画面を載せている人がいなくて　とまどったので
誰かのために載せておきます。




##レコード作成画面


これは単純にシンプルルーティングでいいと思います。


![246d994571f2690802c0d45cce166745.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682942/dd23dd07-e35f-53a4-ce10-390a9125a5b8.png)



次に　シンプルなレコードを作成　の画面


レコード名は　お名前.com 等でドメインをとっている人は空白でいいと思います。




![fb0e53e6e793b794bad53cb0eaa83153.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682942/2f3589d1-160e-7bbb-30f1-8cd52201f117.png)


次に　エンドポイントを選択　の部分は
　レコードタイプに応じたIPアドレスまたはその別の値　を選択。
そのしたの空欄には　EC2で割り当てた　elasticIPを入力してください。

![3ca2f3095ea77fe1242359fa64c3d89a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682942/4d0b9ca9-f450-51a4-d0e1-40f0ca285aeb.png)


その後のTTLはデフォルトの３００で大丈夫です。

かなり簡単な内容ですが、AWSに慣れてない方は戸惑うかもしれないので
参考になればと思います（もちろん私も戸惑いました）![3ca2f3095ea77fe1242359fa64c3d89a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682942/47aa222a-9d64-e783-f657-7246b06fe40a.png)
![3ca2f3095ea77fe1242359fa64c3d89a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682942/23821d8a-71a6-3db2-9719-67217972d444.png)
![3ca2f3095ea77fe1242359fa64c3d89a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682942/bc4f4180-f6a0-0f44-7e2c-d35f360f3514.png)
Qiita使いそうなマークダウンメモ


shift + @ = ```ファイル名　
改行ファイル内容
 ```

```index.html
<html>
</html>
```

 # = 見出し

#見出し

 ##= 見出し2

##見出し2

 ~~ 文字列 ~~ =打ち消し

~~打ち消し~~

その他以下参照

https://qiita.com/Qiita/items/c686397e4a0f4f11683d#headers---%E8%A6%8B%E5%87%BA%E3%81%97
EC2　デプロイ時にエラー



##エラー内容


```
Mysql2::Error::ConnectionError: Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2)
```

あと一歩でデプロイ完了というところでこのようなエラーが出てしまいました...


##原因

おそらくEC2上のMariaDBが起動していないことが原因でした。
以下の方法で私は起動ができましたが、起動するコマンドを直接うったわけではないので、もしかしたら特例かもしれません。


なので、起動コマンドをうってもうまくいかない人
などは試してみてください。


##解決方法

とりあえずMySQLがインストールされていることを確認するために以下のコマンドで確認しましょう

```
mysql -v
```


インストールされていたら以下のコマンドをうって
私の場合はMariaDBの設定をしたので
その設定を行った時のパスワードをうって入って下さい。
```
mysql -u root -p
```

パスワードを入力するとこのようになったら成功です。

```
[root@ip-172-31-46-255 ~]# mysql -u root -p
Enter password: 
Welcome to the MariaDB monitor.  Commands end with ; or \g.
Your MariaDB connection id is 7
Server version: 5.5.64-MariaDB MariaDB Server
Copyright (c) 2000, 2018, Oracle, MariaDB Corporation Ab and others.
Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.
MariaDB [(none)]> 
```

次に以下のコマンドでテーブル一覧があるか確認してみてください。テーブルが現れたら正しくできているということになります。

```
MariaDB [(none)]> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| petter_production  |
+--------------------+
4 rows in set (0.00 sec)
```


テーブルが現れたら、次は、私の場合はpetter_production(自信のアプリにテーブル）に
テーブル一覧があるか確認します。

```
mysql -u root -D petter_production -p
```

↓


```
MariaDB [petter_production]> show tables;
+-----------------------------+
| Tables_in_petter_production |
+-----------------------------+
| active_storage_attachments  |
| active_storage_blobs        |
| ar_internal_metadata        |
| comments                    |
| likes                       |
| pets                        |
| plans                       |
| relationships               |
| schema_migrations           |
| tweet_tag_relations         |
| tweet_tags                  |
| tweets                      |
| users                       |
+-----------------------------+
13 rows in set (0.00 sec)
```

ここまで確認したら、エラーが解決されました。
確認の一連でテーブル一覧が出てこなかったら設定がうまくいっていないので他のコマンドを探しみてください。
irb使用方法

#irb

**irbコマンドは、ターミナルから直接Rubyのプログラムを動かすことができる
機能を起動します。ちなみに、irbは「Interactive Ruby」の略です。**

簡易的にRubyを実行する手順を説明します。
今回はirbコマンドという機能を使って、ファイル無しでプログラムを実行します。

```java:[例]ターミナル
# irbを起動
% irb
```
#####[例]ターミナル

![irb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/762918/0f6e2536-37a7-d172-926d-7543efbd0239.png)


**irbではエンターキーを打つたびに、そこまでの記述を実行して結果を表示することができます。**

![irbirb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/762918/d025a0e0-44b1-c062-198e-2fe72dbde471.png)

**irbを終了するときは、<font color="DeepPink">exit</font>と記述して実行します。**

```java:【例】irbの終了
# irbを終了
irb(main):001:0> exit

# 問題なく終了すれば、プロンプトが表示される
%
```

値を簡単に確認するときはirbを使います。

#まとめ
**irbとは、ターミナルから直接Rubyのプログラムを動かすことが
できる機能のこと。**


####以上。
ARKitの画面を録画する

画面をARコンテンツごと録画する方法です。
![スクリーンショット 2020-10-20 12.07.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/58ad7304-2c8d-5f49-0f8b-7fb5d138f2a5.png)

#実装

###１、ReplayKitをインポート
ReplayKitを用います。

```swift
import ReplayKit

class ViewController: UIViewController,RPPreviewViewControllerDelegate...{
```
録画後プレビューのためのRPPreviewViewControllerDelegateも設定します。

###２、ReplayKitの画面レコーダーを用意

```swift
let sharedRecorder = RPScreenRecorder.shared()
```
**Info.plist の "Privacy - Microphone Usage Description" を追加してください。
追加せずにマイクを有効にすると、クラッシュします。**

###３、録画開始

```swift

sharedRecorder.isMicrophoneEnabled = true
sharedRecorder.startRecording(handler: { (error) in
    if let error = error {
        print(error)
    }
})
```
画面全体の収録を開始します。
![スクリーンショット 2020-10-20 12.07.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/e90daff6-8e6e-2111-e275-474d9052a390.png)


###４、録画終了

```swift

sharedRecorder.stopRecording(handler: { (previewViewController, error) in
    previewViewController?.previewControllerDelegate = self
    self.present(previewViewController!, animated: true, completion: nil)
})
```
プレビューViewがポップアップします。
「保存」をタップで写真ライブラリに保存されます。
**Info.plist の "Privacy - Photo Library Additions Usage Description" と　"Privacy - Photo Library Usage Description"を追加してください。
追加せずに保存しようとすると、クラッシュします。**

###５、プレビューViewのデリゲート設定

```swift
func previewControllerDidFinish(_ previewController: RPPreviewViewController) {
    DispatchQueue.main.async { [unowned previewController] in
        previewController.dismiss(animated: true, completion: nil)
    }
}
```
「キャンセル」をタップでプレビューViewが消えるためのデリゲートメソッドです。


###Tips
・録画音の設定

```swift
import AudioToolbox
...
    AudioServicesPlaySystemSound(1117) // 録画開始音
    AudioServicesPlaySystemSound(1118) // 録画終了音
```
・録画開始時に、不要なボタンなどを隠すと、綺麗にAR画面のみ録画できます。
iPhoneの時間やバッテリー表示などは録画されません。

🐣
****
お仕事のご相談こちらまで
rockyshikoku@gmail.com

Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
初めてハッカソンに参加して二度寝防止のWebアプリ「CaptureAlarm」を開発しました

初投稿なので拙い投稿ですがご容赦ください、、、

# 概要
(かなり前の話になりますが)8/15、16日に開催された株式会社VOYAGE GROUPさんと株式会社サポーターズさん主催のサマーハッカソンに同じ大学の友人と二人で参加して、二度寝防止アプリ「CaptureAlarm」を開発しました。

# アイデア出し
LINE通話しながら、日常の課題解決だったりコロナに関連したものをテーマにアイデアを出しました。
最終的に開発することになったアイデアは、何気なく雑談していたときに生まれました。

友　「オンライン授業だから生活リズム崩れて普通の目覚ましで起きれんわー」

僕　「簡単なゲームをクリアするとか問題を解かないと鳴り止まないアプリとかなかったっけ」

友　「結局終わったらまた寝ちゃうんだよね。**ベッドから離れたら起きられるんだけど...**」

僕　「じゃあそれ開発しようや」

友　「ええやん」

大体こんな感じで決まりました(笑)

しかしなかなか理にかなっていると思ってて、友人が使用してきた上記の二度寝防止アプリはどれもベッドの上で体が寝たままでも動作が完結するものばかりなんですよね。ベッドから強制的に体を起こすことができれば嫌でも眠気は覚めるはずなので、そこに目をつけました。

最終的に具体化したアイデアは、指定されたものを撮影しないとアラームが鳴り止まないWebアプリでした。

# 開発
僕がフロントエンド、友人がバックエンドを担当しました。

使用した技術は以下の通りです。

- フロントエンド
    - HTML/CSS
    - JavaScript(JQuery)
- バックエンド 
    - Python(Flask)
    - Google Cloud Vision API
    - Heroku


APIとの連携やGitHubでの管理に苦労して、時間ギリギリでの完成となりました。

ソースコードは[こちら](https://github.com/Pae0426/CaptureAlarm)。
開発したものは[こちら](https://hackson-yakiniku-flask.herokuapp.com/alarm)から使用できます。

※リアカメラを使用するので、スマホでご利用ください。
※ページが表示されるまで少し時間がかかる場合があります。

# 改善点

- そもそもWebアプリだと画面を付けっぱなしにしないといけないので、ネイティブアプリへの移行が必要
- 指定されたものを撮影・送信して結果を得るのではなく、画像認識などを用いて対象物が写り込んだ時点でアラームをスムーズに止めたい
- 指定されるものが10種類と少なく、対象物を写真フォルダに保存しておいたらそれを送信するだけで処理を完了することができて結局ベッドから出ないので、もっと指定物の種類を増やしたい

# 終わりに
残念ながら入賞はできませんでしたが、今までチームで開発することがほとんどなかったのでとてもいい経験になりました。
今後もハッカソンに参加して技術を磨いていきたいです(次はバックエンドとして)。
iPhoneショートカットでシステム音量を数値で指定する

##更新(2020/11/03)
改良版を作成しました。そちらもご覧ください。
[【改良版】iPhoneショートカットでシステム音量を微調整する](https://qiita.com/benzene/items/3bffe72c6008d5c6fbf9)

##問題提起
iPhoneの音量操作は基本的に本体横のボタンから行うが、これによって変更できる音量の幅が大きすぎる事が私の悩みである。今聴いている音楽がやや音量が小さいとき、ボタンを押して1段階大きくしてもちょっと大きすぎる、そしてその逆もまた然り、なんて事がよくある。とはいえ、アプリ側のボリュームスライダーを操作する事で自分の理想の音量に設定することは一応可能である。ただ、指先の絶妙な感覚が要求されるのでなかなか操作が難しい。

##解決策
音量を自分の好きな値に細かく調整できるようなショートカットの作成を試みた。
iPhoneのショートカットには音量を指定できるアクションが存在する。そこに、0(消音)から100(最大音量)までの値を入力することで、自在に音量を調整することができる。

##ショートカットの中身
以下にショートカットのスクリーンショットをまとめる。

<img width="400" alt="Screenshot at Oct 27 18-00-47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330454/709c3244-7f59-d029-7ffd-b6fb3dedbfcb.jpeg">
<img width="400" alt="Screenshot at Oct 27 18-00-47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330454/03c638d8-5efa-8f8d-03c6-60ca8b273203.jpeg">

実際に作成したショートカットはイヤホンでの使用を想定している。値を入力する際の誤操作によって大音量で出力されて鼓膜が破れる可能性を考えて、40を超える入力が指定された場合再び入力を求めるようなループを組み込んだ。

##未解決の問題
iPhoneには現在設定されている音量を取得・出力することができない。そのため、現在の音量から3だけ大きくする(または小さくする)など、ボタン1つで調整することができない。今後のアップデートでできる様になることを願いたい。

##共有リンク
以下のリンクから今回のショートカットをダウンロードすることができる。ダウンロードにはiPhoneの設定->ショートカット->信頼されていないショートカットを許可をオンにする必要があるので各自設定の変更が必要。

https://www.icloud.com/shortcuts/28229665d42b493f8c7d6ae1990d72f0
IntelliJで設定していること

# 前提
私が、WindowsでIntellijを使って、Javaの開発をする場合に設定していることです。

# File > Settings

## Languages & Frameworks
- SQL Dialects
    - Global SQL Dialect: DB種類を選択

## Editor
- Code Style
    - Java
        - Tabs and Indents
            - Tab size: 4
            - Indent: 4
            - Continuation indent: 4
            - Label indent: 0
        - Wrapping and Braces
            - Blank Lines
                - Keep Maximum Blank Lines: 全部1にする(2行空くのが嫌なので)
- Inspections
    - Internationalization
        - Non-ASCII characters: チェック外す(テストメソッドに日本語を使うため)
    - Java
        - Visibility
            - Parameter hides field: チェックを入れる
            <blockquote class="twitter-tweet"><p lang="ja" dir="ltr">IntelliJ IDEAのコードインスペクションで、parameter hides fieldで、デフォルトだと検査してくれないのかな。<br>これ、とてもわかりにくいバグの原因になるので、デフォルトで警告してほしい。</p>&mdash; 増田 亨． (@masuda220) <a href="https://twitter.com/masuda220/status/1443382716251049986?ref_src=twsrc%5Etfw">September 30, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
        - Code style issues
            - Field may be 'final': チェック外す
- Tools
    - Terminal
        - Shell Path: `\Git\bin\bash.exe`の絶対パスを設定する(linux形式でコマンド打てる方が都合が良いことが多いので)

# Help > Edit Custom VM Options
コンソールなどで日本語を文字化けさせないために下記を追加する。

```idea64.exe.vmoptions
-Dconsole.encoding=UTF-8
-Dfile.encoding=UTF-8
```

# 上記以外
Settingsなどメニューからの設定の仕方が分かっていないもの。

- Generateするときのテンプレート

Generate > Getter > [Generate Getter dialog](https://www.jetbrains.com/help/idea/2020.2/generate-getter-dialog.html?utm_source=product&utm_medium=link&utm_campaign=IU&utm_content=2020.2) から編集できる
参考: [Custom code generation templates](https://www.jetbrains.com/help/idea/2020.2/generating-code.html?utm_source=product&utm_medium=link&utm_campaign=IU&utm_content=2020.2#customize-templates)

ドメインクラス用のgetがつかないgetter生成テンプレート(もっといい書き方があるかも)

```
#if($field.modifierStatic)
static ##
#end
$field.type ##
#if($field.recordComponent)
  ${field.name}##
#else
#set($name = $field.name)
${name}##
#end
() {
  return $field.name;
}
```
C#におけるcharは整数型なのか？

## はじめに

『[なるほどなっとくC#入門](https://amzn.to/2Tbri8M)』（はじめてプログラミングを学ぶ人を対象にしたC#の入門書）の読者の方から、こんな指摘がきました。[^1]

[^1]: 出版社経由の匿名の読者様ということで直接僕の考えをお伝えすることはできませんでした。

>C#組み込み型の表でcharが文字型とされていますが正しくは整数型です
>https://docs.microsoft.com/ja-jp/dotnet/csharp/language-reference/language-specification/types

確かにこのページには、'char'は integral_typeに分類されています。
この事実は僕も知っていました。

実際、以下のようなコードはビルドエラーにはならず、実行することができます。

```cs
char a = 'a';
char b = 'c';
System.Console.WriteLine(a + b);
System.Console.WriteLine(a * b);
```

といっても、結果は、char型にはなってくれませんが...

C言語でバリバリプログラミングしていた頃は、charが整数型であることを利用したコードもよく書いていました。

しかし、「なるほどなっとくC#入門」では、組み込み型の説明では、整数型とは独立させて、charを以下の表のように文字型として分類しました。

組み込み型の種類　|  キーワード
------------------|---------------------
整数型                    | byte, byte, short, short, int, uint, long, long
文字型                    | char
....   |  .... 以下略 ...



## なぜ、文字型として分類したのか

『なるほどなっとくC#入門』の「はじめに」で僕は以下のように書いています。

>文法の解説では、できるだけ正確な表現になるように努めましたが、正確で詳細な文法解説は、退屈であると同時に無用な混乱を招いてしまう恐れがあります。そのため、わかりやすさと正確さのバランスをとりながら説明するようにしました。

つまり、charを整数型に分類し説明することは、初心者には無用な混乱を招くと判断したわけです。

実際に、char型を整数型として扱う場面はほんのわずかであり、整数型とは独立したchar型として説明するほうが、理解が進むというのが僕の考えです。

## Microsoft Docsの他のページではどう説明されているのか

これだけでは、僕の独りよがりみたいな意見で終わってしまうので、Microsoft Docsの他のページでは、どのように説明されているのか見てみましょう。

[値型 (C# リファレンス)](https://docs.microsoft.com/ja-jp/dotnet/csharp/language-reference/builtin-types/value-types) では、以下のように説明されています。

>C# には、単純型とも呼ばれる次の組み込み値型が用意されています。
>整数数値型
>浮動小数点数値型
>ブール値を表す bool
>Unicode UTF-16 文字を表す char  

char型は、整数型とは別に独立させています。

また、[C# 型の既定値 (C# リファレンス)](https://docs.microsoft.com/ja-jp/dotnet/csharp/language-reference/builtin-types/default-values)では、以下のような記述があります。

>種類	| 既定値
>-------|------
>任意の組み込み整数数値型 |	0 (ゼロ)
>char	| '\0' (U+0000)

[整数数値型 (C# リファレンス)](https://docs.microsoft.com/ja-jp/dotnet/csharp/language-reference/builtin-types/integral-numeric-types)では、以下のような記述があります。


>C# では、次の定義済みの整数型がサポートされています。

> C# 型/キーワード| 範囲 | サイズ | .NET 型
>------|-------|--------|-------
>sbyte |-128 ～ 127 | 符号付き 8 ビット整数 |System.SByte
>byte | 0 ～ 255 |符号なし 8 ビット整数 |System.Byte
>short |-32,768 ～ 32,767 | 符号付き 16 ビット整数 |System.Int16
>ushort |0 ～ 65,535 | 符号なし 16 ビット整数 |System.UInt16
>int | -2,147,483,648 ～ 2,147,483,647 |符号付き 32 ビット整数 |System.Int32
>uint | 0 ～ 4,294,967,295 |符号なし 32 ビット整数 |System.UInt32
>long |-9,223,372,036,854,775,808 から 9,223,372,036,854,775,807 |符号付き 64 ビット整数 |System.Int64
>ulong | 0 ～ 18,446,744,073,709,551,615 | 符号なし 64 ビット整数 |System.UInt64


この表にはcharは含まれていません。

これらのページでは、charは整数型とは別の型であるという立場をとっているように見えます。


## 結論

ということで、僕の結論は以下の通りです。

__C#の言語仕様的には、char型は整数型に分類されているが、C#を説明する上では、charを整数型とは別の型として説明することは間違いではなく、むしろchar型は整数型とは別の型として説明するべきものである。__

もちろん、C#の仕様を理解したエンジニアのかたが、「char型は整数型である」と主張することに異論を唱えるつもりはありません。

ある程度、理解が進んだ方には、「char型は算術演算が可能でint型の結果が生成される」ということを知ることも有意義だと思います。

ただ、C#を教えるという立場からすると、経験の浅いプログラマーが、嬉々としてcharを整数型として使うようなケースが出てくることのほうが怖いなーと思ったりもしてしまいます。
AWSマネジメントコンソールにショートカットキーが欲しい！よし作ろう！

# 概要
AWSマネジメントコンソールで、S3を開いて、EC2開いて、VPC開いて、IAM開いて、次またEC2開いて、、、、
マウスの移動が煩わしい！！ショートカットキーが欲しい！！！！という切なる思いで作りました。

# 3行まとめ
- Chrome拡張機能の「ScriptAutoRunner」を使ってます。
- 左Ctrl ＋ m を押すと、左上の「サービス」をクリックするという挙動です。
- ただそれだけです。

# 手順
1. Chrome拡張を入れる
[ScriptAutoRunner](https://chrome.google.com/webstore/detail/scriptautorunner/gpgjofmpmjjopcogjgdldidobhmjmdbm?hl=ja-jp)をChromeにインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41763/42ad2578-5861-1796-e30b-97b87be1456c.png)

2. Chrome拡張にカミナリマークのアイコンができるので、それをクリックし、歯車をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41763/cee56f12-3c6f-db8f-95eb-cd164e4e27c7.png)

3. 左上の `</>` ボタンを押すと、入力フォームができます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41763/97c906bf-f990-670d-9dcf-3fc10997403b.png)

4. タイトル入れます。
適当に **`shortcut key`** とかにしておきます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41763/54623e40-50e2-010d-5908-bd51bcc16c98.png)

5. このスクリプトを埋め込むターゲットのhostnameを入れます。
今回は、AWSのマネジメントコンソールの全ページに反映したいので、 **`console.aws.amazon.com`** と入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41763/a296063b-9926-ae9e-827c-bbbfa7a63539.png)

6. 埋め込むスクリプトの挙動を考えます。
AWSマネージメントコンソールの **`サービス`** というボタンがクリックされると、メニューが展開されるのでこれをクリックできるような挙動にしたいと思います。
なんとなくですが、 **`左Ctrl + m`** で開けるようにします（メニューだから m という安易な考え）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41763/704aa097-46e2-61cf-4293-0e04924033fe.png)
このbutton要素

7. スクリプト書きます

```js
document.addEventListener('keydown',(event) => {
  if(event.ctrlKey && event.key === 'm') {
    let targetBtn;
    const btns = document.getElementsByTagName('button');
    btns.forEach(btn => {
      if (btn.attributes['data-testid'] && btn.attributes['data-testid'].value === 'aws-services-list-button') targetBtn = btn;
    });

    targetBtn.click();
  }
});
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41763/1703c1c7-3334-23ab-0694-1a707725812c.png)
8. 書けたら、テキストボックスの左のプラグのようになっている部分をクリックして、反映されるようにします。
このプラグのON/OFFは、Chromeの右上のアイコンからでも操作可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41763/2012cc70-ece8-0467-f5bf-c4cc91a104f7.png)
通電された感じですね  
9. AWSマネジメントコンソールを開いて動作確認
**`左Ctrl + m`** を押すことで、開閉ができるようになったと思います。
メニューを開くと、検索窓にフォーカスがあたっているので、そのまま入力し、矢印キーで選択後、ページ遷移できます。


# まとめ
AWSマネジメントコンソールにショートカットキーがなかったので、作ってみました。
個人的にはだいぶ便利になった！という感覚があります。
もしかしたらgithubのようにあるのかもしれませんが探せなかったです。あるよ！という方、教えていただけるととても喜びます。

*追記*
マネコンはすぐUI変更されるので動かなくなるかもですが、その際は、Scriptを適宜変更してあげてください。

-------
2020/11/30
今日見てみたらマネコンが変わっていました。  
ページを開くと自動で検索フォームにフォーカスが当たる様になっていますね！  
（そしてこのスクリプトは動かなくなった・・）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41763/d4ffb13c-5c5f-7aa0-3606-afd18bfd005f.png)

ショートカットキーが割り当てられている部分も見受けられますし、今後に期待ですね！
Nuxt.jsのloading indicatorでカスタムコンポーネントを使いたかった

# Nuxt.jsのloading indicatorでカスタムプロパティを使いたかった

## 背景
Nuxt.jsで、ロード中であることを表すアイコンを実装することになったのでNuxt.jsに実装されているloadingプロパティを使うことに。
元々ローディングに使うコンポーネントがvue-loadingを使用して作られており、それにloadingとloading indicatorで合わせたかった。

## そもそもloadingとloading indicatorとは
Nuxt.jsに実装されているロード中のアニメーションを流せる優れものです。
デフォルトで実装されており、かつ設定も簡単でカスタマイズも簡単なのでとても重宝しました。

### loadingプロパティとloading indicatorプロパティの違い
* **loading**
画面遷移時にロード中であることを示す

* **loading indicator**
初期表示など、vueコンポーネントがロード中で表示するコンテンツがない状態でロード中であることを示す

なお、デフォルトの状態ではloadingは黒いプログレスバーが表示され、loading indicatorは何も表示されません。

### loading・loding indicatorの設定
loadingに関わる設定は``` nuxt.config.js ``` で設定できます。
以下は例です。

``` nuxt.config.js
  loading: {
    color: 'red',
    height: '5px',
  },

  loadingIndicator: {
    name: 'circle',
    color: 'red',
    background: 'white',
  },
```

詳細はこちらから
https://ja.nuxtjs.org/guides/configuration-glossary/configuration-loading-indicator/
https://ja.nuxtjs.org/api/configuration-loading/

## 困ったこと
前置きが長くなりましたが本題です。上記の例ではloadingは色と高さを指定しており、プログレスバーが表示されています。それを他のコンポーネントで使われているくるくると合わせることになりました。
それがこれ
![kurukuru.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/660860/40f75141-a98b-42dd-445c-a38f851201fb.gif)

これは[vue-loading](https://github.com/jkchao/vue-loading)を使って実装されています。

loadingの方は公式ドキュメントのカスタムコンポーネントの項目を参考にして実装し、すんなりといけたのですがloading indicatorのほうで問題発生。


最初に同じようにloading indicatorでvueコンポーネントを指定してみました。

``` nuxt.config.js
loadingIndicator: '使いたいカスタムコンポーネント',
```

すると更新した時にエラーが発生

> Cannot use import statement outside a module

ぐぐってもいまいち出ない・・・

## 原因

エラーメッセージを読んだところ、「モジュールの外ではインポートはできないよ」でした

・・・

> 初期表示など、vueコンポーネントがロード中で表示するコンテンツがない状態でロード中であることを示す

loading indicatorはvueコンポーネントがロードされている最中に表示されるものなので、vueコンポーネントが使えるハズがありませんでした。
その時点では存在しないものを使おうとしていたわけですね。
試しにhtmlファイルを作成して読み込んでみたところうまくいきました。
nuxt.config.jsと同じ階層、componentやassetsなんかに置いても問題なく読み込まれます。

ぐぐる前にちゃんと読まないから・・・

## 解決策
どうしてもという場合はカスタムコンポーネントをHTMLで実装してloading indicatorに指定することで解決できます。
HTMLを指定する場合はカスタムコンポーネントを指定するのと同じように書けば読み込まれます。

``` nuxt.config.js
 loadingIndicator: '~/CustomLoading.html',
```

ただ今回は一から作るほど時間的余裕がないのでNuxt.jsの実装してくれたSpinkitで実装することにしました。vue-loadingを使って実装されている部分もSpinkitを使用するようにしました。
Nuxt.jsではloading indicatorで使えるように[SpinkitをHTMLで実装してくれており](https://github.com/nuxt/nuxt.js/tree/dev/packages/vue-app/template/views/loading)、とても簡単に実装できます。
使えるSpinkitの一覧は[こちら](https://ja.nuxtjs.org/api/configuration-loading-indicator/#%E5%86%85%E8%94%B5%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E3%82%A4%E3%83%B3%E3%82%B8%E3%82%B1%E3%83%BC%E3%82%BF)

``` nuxt.config.js
loadingIndicator: {
  name: 'chasing-dots',
  color: '#f24e1e',
  background: 'white',
}
```

![タイトルなし2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/660860/05b9fc0a-2ec6-6e96-86ea-19c639d97309.gif)



vue-loadingの眩しい笑顔が刺さる・・・

![スクリーンショット 2020-10-20 21.52.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/660860/a5ce36b3-2c9f-da96-fed0-336927649f5e.png)
Vue.js始め方~ちゃんとインストールする方法~

1000番煎じくらいだけど社内用に15分で作ったやつをとりあえず残します

## Node.js をインストール

[ここ](https://nodejs.org/ja/download/)からインストーラーをダウンロード

自分の OS のインストーラーを選択

**LTS の方を選んだ方がいい！**

![install_node.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/461616/d7024461-e54f-969c-6e36-4fc75627ddd4.png)


Mac の場合ターミナルで以下のコマンドを実行

```
brew install node
```

## vue-cli をインストール

コマンドプロンプト、ターミナルを起動して以下のコマンドを実行

これ以降はコマンドプロンプト、ターミナルで手順を行う

```
npm i -g @vue/cli
```

## 早速プロジェクト作成！

適当なフォルダ/ディレクトリに移動して以下のコマンドを実行

```
vue create new-project
```

new-project は適当な名前で OK

なんか色々質問されるけど適当に Enter 押しとけば OK!

## ローカルサーバーをうごかす

作成されたフォルダに移動

```
cd new-project
```

サーバー起動！

```
npm run serve
```

## アクセスしてみる

[http://localhost:8080/]()

![vuelocal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/461616/40216ca4-5c63-c227-3303-c2743f224de0.png)

## なんか適当にいじってみる

HelloWorld.vue を開く

`new-project/src/App.vue`

4 行目の msg の中身を書き換える

```diff
- <HelloWorld msg="Welcome to Your Vue.js App"/>
+ <HelloWorld msg="Vue.js始めてみた！！"/>
```

![vuestart.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/461616/ae5d4a1f-dc25-1830-f979-fbe2a67e662b.png)

**勝手にブラウザが変更される！**

おわり
QRコードって何？

## 勉強前イメージ

paypayとかで使うコード
バーコードよりいっぱいのデータを扱えるようになったけど、詳細は知らない

## 調査

### QRコードとは

Quick Response の略。早く読み取れるって意味。
元々日本の工場で発明された技術。

### バーコードとの違いは？

- 情報量が多い

数字なら7089文字、英数なら4296文字、バイナリデータなら約3KBまで情報量を埋め込むことが出来ます。
バーコードは様々種類があるが、JANという種類のバーコードであれば数字(0-9)を13or8文字情報を埋め込むことが出来ます。
そう考えるとバーコードの500倍以上のデータを埋め込むことが出来ます。

- 専用機器が必要ない

バーコードを読み込むには専用機器とシステムが必要でした。(例でいうとスーパーのレジとか)
しかしQRコードであればスマホのアプリから簡単に利用することが出来ます。
URLも読み取れるので、インターネットとの連携も出来るようになりました。

- どの角度からも読み取ることが出来る

バーコードは一定の角度から出ないと読み取れなかったのですが、
QRコードには `切り出しシンボル` `アライメントパターン` という構造がありそのためどの角度からでも読み取ることができます

- 一部破損や汚れがあっても読み取れる

QRコードには、一部破損や汚れで読み取れなくても正しく読み取れる、 `誤り訂正機能` というものがあります。
誤り訂正には4つレベルがあり、環境によって使い分けができるようになっている
元々工場で開発されたというのもあり、最大30%程度読み取れなくても正しい情報を手に入れることが出来る

| レベル | 読み取れる破損割合 | 環境の例  |
|:----------:|:--:|-------|
| L | 7%程度  | あまり汚れない環境  |
| M | 15%程度 | 一般的な環境 |
| Q | 25%程度 | 汚れが付きやすい環境 |
| H | 30%程度 |  汚れが付きやすい環境  |

### QRコードの構造

適当な白と黒のセルの集合体に見えるが、ルールがあり、
その中にも情報が入っている


![無題 - ペイント 2020-10-20 19.55.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/30830af0-7dde-5808-a916-e2c740e26bcf.png)


- 切り出しシンボル

角にある四角形のこと。
位置情報や歪んだコードを検出する役目。
この切り出しシンボルを確認することでカメラはQRコードだと認識できる

- タイミングバー

黒と白のセルが交互に入りされていて座標を検出

- アライメントパターン

右下にある四角形のこと。
どの方向からかざしたときでも、ズレを補正できる役割がある。

- フォーマット情報

誤り訂正機能レベルが記載されている。
このパターンによって誤り訂正のレベルが決定される。

## 勉強後イメージ

バーコード → QRコードになって、めちゃくちゃ情報量増えてる....
paypay使ったときに、斜めから写しても読み取れるのはアライメントパターンと切り出しシンボルのおかげ....
スマホから映せるようになったのは大きいのかな？

## 参考

- [【解説】いまさら聞けない、QRコードって何？ ①仕組み編](https://www.softbank.jp/sbnews/entry/20190822_01)
- [『QRコード』の仕組みを解説！ 決済やスマホでの読み取り方・作成方法も](https://time-space.kddi.com/ict-keywords/20190425/2624)