OmniAICreator/Qiita-1.07M huggingface dataset:
aws-cdkでとりあえずすべてのアクセスをLambdaへ送るように設定


SAMやserverless  frameworkではやったことあったけどcdkでは初めてなのでメモ

```typescript
const regionalUserApiLambda = new lambda.Function(this, 'RegionalUserApi', {
  functionName: resources.userApi.lambdaName,
  runtime: lambda.Runtime.GO_1_X,
  handler: 'main',
  memorySize: 128,
  timeout :  Duration.seconds(10),
  code: lambda.Code.fromBucket(resourceBucketRef , resources.userApi.lambdaS3Key)
});

const api = new apigateway.RestApi(this, "RegionalUserApiGateway", {
  restApiName: "RegionalUserApiGateway",
  description: "regional user api"
});

api.root.addMethod(`ANY` , new apigateway.LambdaIntegration(regionalUserApiLambda))
const anyProxy = api.root.addResource("{proxy+}");
anyProxy.addMethod(`ANY` , new apigateway.LambdaIntegration(regionalUserApiLambda))


```
文字色をランダムに設定したいが同じ人の発言は常に同じ色にしたかったので、文字列から色を生成する

# どう実現するのか

発言者毎に不変な ID を種に HSL の H を決める関数を用意する。S と L は固定値を使うことでチャットに適した色を確実に出させる

つまりこんな感じ。

```javascript
const generateColor = (seed)=>{
  return `hsl(${Number(seed) % 360}, 100%, 40%`;
};
```

# 発言者ごとに色を分けたい

著者はしばしば Discord のテキストチャネル上で TRPG をやる。
テキストチャットでやると後から実施したログを簡単に共有できるのは便利だ、と思ったのだが Discord のログを後から読み返すために目標地点までログをさかのぼるのは少々面倒だ。

「ログを HTML 形式でダウンロードして適当な場所にアップロードすればいいじゃないか」と思いそういうツールを用意して実行、無事チャットログを取得できた。だが、取得してみて欲が出た。**発言者毎に色を分けたい**。

発言者毎に色を分けることそのものについては賛否あると思うが、私のプレイ環境では発言者毎に色を分けるのが一般的だったのである。

# 当たった課題

## どのチャンネル（チャットルーム）をどのタイミングでダウンロードしても同じ人は同じ色であってほしい

テキストチャットのログを処理する度に発言者 ID 毎に色を設定し、生成される HTML すべてに色を割り当てていく、という方法を原則としては採る。

しかし、**ダウンロードするごとに色をランダムで生成しているとダウンロードするごとに発言者毎の色が変わる**。全12回のゲームで毎回発言者毎に色が違う、とかそういった事態になると読者は混乱するだろう。

そのため、**特定の文字列を入力すると常に特定の色を返す関数を用意**することにした。これを用いれば同じ発言者による発言は常に同じ色を割り当てることができる。先の関数に発言者の ID を入力して、出力された色を用いればよい。

## 背景色とのコントラストを維持したい

先の関数で色を生成する際に素直に色を生成すると次のような方法になるかと思う。

```javascript
const color = `#${(Number(id) % (255*255*255)).toString(16)}`;
```

しかし、これで出すと `#fff4f8` といった値が出力されることもある。残念ながら大変に読みにくい。白い背景であれば暗めの色を常に出してほしい。常に暗めの色を出力させるためには HSL の形式で色を決めると簡単。すなわち `hsl(90, 100%, 40%)` のような形式である。

```javascript
const color = `hsl(${Number(id) % 360}, 100%, 40%`;
```

HSL の形式で色を表現する場合は1つめの値に色相を入力する。これが具体的な色を定義する要素であるため、この値が ID によって決まるようにする。
2つめの値には彩度が入る。色の鮮やかさや濃さを定める値となる。数字が小さければ色はくすむ。この値は文脈にもよるものの今回の目的では 100% でよいだろう、と考えた。
3つ目の値には輝度が入る。 50% が標準の値であり、値が増えると明るい色になり値が減ると暗い色になる。白背景には暗い色の方が読みやすいだろうということで今回は 50% より低い 40% を与えている。背景が暗い色なのであれば大きな値を入れる必要がある。

と書いても分かりにくいので彩度、輝度については以下にサンプルを書いてみた。

|彩度\輝度|0%|20%|40%|50%|60%|80%|100%|
|:--|:--|:--|:--|:--|:--|:--|:--|
|**0%**|`hsl(90, 0%, 0%)`|`hsl(90, 0%, 20%)`|`hsl(90, 0%, 40%)`|`hsl(90, 0%, 50%)`|`hsl(90, 0%, 60%)`|`hsl(90, 0%, 80%)`|`hsl(90, 0%, 100%)`|
|**20%**|`hsl(90, 20%, 0%)`|`hsl(90, 20%, 20%)`|`hsl(90, 20%, 40%)`|`hsl(90, 20%, 50%)`|`hsl(90, 20%, 60%)`|`hsl(90, 20%, 80%)`|`hsl(90, 20%, 100%)`|
|**40%**|`hsl(90, 40%, 0%)`|`hsl(90, 40%, 20%)`|`hsl(90, 40%, 40%)`|`hsl(90, 40%, 50%)`|`hsl(90, 40%, 60%)`|`hsl(90, 40%, 80%)`|`hsl(90, 40%, 100%)`|
|**50%**|`hsl(90, 50%, 0%)`|`hsl(90, 50%, 20%)`|`hsl(90, 50%, 40%)`|`hsl(90, 50%, 50%)`|`hsl(90, 50%, 60%)`|`hsl(90, 50%, 80%)`|`hsl(90, 50%, 100%)`|
|**60%**|`hsl(90, 60%, 0%)`|`hsl(90, 60%, 20%)`|`hsl(90, 60%, 40%)`|`hsl(90, 60%, 50%)`|`hsl(90, 60%, 60%)`|`hsl(90, 60%, 80%)`|`hsl(90, 60%, 100%)`|
|**80%**|`hsl(90, 80%, 0%)`|`hsl(90, 80%, 20%)`|`hsl(90, 80%, 40%)`|`hsl(90, 80%, 50%)`|`hsl(90, 80%, 60%)`|`hsl(90, 80%, 80%)`|`hsl(90, 80%, 100%)`|
|**100%**|`hsl(90, 100%, 0%)`|`hsl(90, 100%, 20%)`|`hsl(90, 100%, 40%)`|`hsl(90, 100%, 50%)`|`hsl(90, 100%, 60%)`|`hsl(90, 100%, 80%)`|`hsl(90, 100%, 100%)`|

## 発言者の ID じゃなくて発言者の名前で色を決めたい

以下のようにして文字を数字に見立てることで実現できる。

```javascript
let id = 0;
for(var i = 0; i < name.length; i++) {
  id += name.charCodeAt(i);
}
const color = `hsl(${Number(id) % 360}, 100%, 40%`;
```
悪名高いTypeScriptのenumなしでActionを定義する

reduxやuseRecucerで定義するActionですがenumを使うと簡単に定義できるんですがenumはデメリットが多く使わないようにするのがベストプラクティスのようになっています。

個人的には別にどうでもいいかと思うんですがenum使わないで定義する方法を試してみたので載せておきます。

## TypeScriptのenumを使わないでreducerを定義

ここでのポイントは`as const`です。
このキーワードはリテラルの型を保持してくれる効果があります。

```typescript
const x = {foo: 1}; // {foo: number} 型になってしまう。

const x = {foo: 1} as const; // {foo: 1} 型を保ってくれる。
```

 そして定義したreducerがこちらです。

```typescript
type State = {
  foo: string;
  bar: number;
};

export const ActionNames = {
  SET_FOO: 'SET_FOO',
  SET_BAR: 'SET_BAR'
} as const;

type Action =
  | {
      type: typeof ActionNames.SET_FOO;
      payload: string;
    }
  | {
      type: typeof ActionNames.SET_BAR;
      payload: number;
    };

export const reducer = (state: State, action: Action) => {
  switch (action.type) {
    case ActionNames.SET_FOO: {
      return {
        ...state,
        foo: action.payload
      };
    }
    case ActionNames.SET_BAR: {
      return {
        ...state,
        bar: action.payload
      };
    }
    default:
      throw new TypeError();
  }
};
```

せっかくenum用意してくれてるのに残念ですね...
UiPath　処理時間を計測する方法

#1.はじめに
ワークフローの処理時間を計測する方法を紹介します。

UiPath社の以下のページを見ていて、

https://www.uipath.com/ja/blog/developer/accelerate-processing

どのようにしたら処理時間を計測できるのか、と気になり、一番簡単な方法を見つけました。

#2.ワークフローの作成
時間計測を開始したい箇所に、「代入」アクティビティを配置し、変数「開始時間」（DateTime型）に Now を代入。

時間計測を終了したい箇所に、「代入」アクティビティを配置し、変数「終了時間」（DateTime型）に Now を代入。
「1行を書き込み」アクティビティを配置し、「(終了時間 - 開始時間).ToString」と記述。
<img width="485" alt="2020-05-29_13h46_56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526899/a898ef51-df79-53fc-09cf-689b2d0f4e59.png">

（参考）DateTime型の参照
<img width="960" alt="2020-05-29_13h51_01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526899/a08a0df8-1d1e-61d0-36a8-caf79f5e742d.png">

#3.ワークフローの実行
<img width="960" alt="2020-05-29_13h52_56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526899/eb5dc095-33cf-9547-d9d6-0a567177fd4d.png">
出力パネルに「1行を書き込み」の結果（「終了時間 - 開始時間」）が表示されます。
<img width="960" alt="2020-05-29_13h53_40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526899/90343c64-abc3-5f3c-e409-47a78a4321c3.png">

#4.最後に
処理時間が遅いなあ、と思ったらUiPath社Tipsを参考に、いろいろ試してみてください。
WordPressでslick.js使った時にうまく動かない時の対処メモ

slick.js使ってWordPressでスライダー使うっすわーと試してみたら画像は読み込まれているのにスライダーにならない・・・。
WordPressに同梱されているjqueryではなく通常のjqueryを読み込んだら解決
こいつは罠ですわ・・・

```php

function register_jquery() {
global $pagenow;
  if (!is_admin() && $pagenow !== 'wp-login.php') {
    $script_directory = get_template_directory_uri();
    // 同梱のjqueryを読み込ませないにする
    wp_deregister_script('jquery'); 
    // 読み込ませたいjqueryをセット
    wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', array(), NULL, true);
　　// 登録したjqueryをフックさせる
    wp_enqueue_script( 'jquery' );    
  }
}
add_action('init', 'register_jquery');

```
#MaixCube を買ってみた

# はじめに

Sipeed社からMaixシリーズの新製品MaixCubeが発売されましたので、さっそく入手してみました。こんなパッケージで届きます。

![MaixCube_20200529_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555397/68dc431a-7c89-eddb-8f6e-8740bcb9d7bf.png)

# 購入方法

現在 [SeeedStudio](https://www.seeedstudio.com/Sipeed-Maix-Cube-p-4553.html) で購入可能です。


# 比較

MaixCubeはM5StackやM5StackVに似ています。簡単な比較は次の通りです。WiFiはないですが、マイクがあります。


|           | Maix Cube | M5StickV | M5Stack |
| --------- | --------- | -------- | ------- |
| CPU       | K210      | K210     | ESP32   |
| LCD       | 240x240 | 135x240 | 320x240 |
| カメラ入力 | あり       | あり     | なし     |
| マイク入力 | あり       | あり(新SKUのみ)       | なし       |
| スピーカ出力 | あり       | あり     | あり     |
|無線LAN/Bluetooth | なし | なし | あり |

# 使ってみる

付属のケーブルでPCにつなぐと、初期画面が表示されます。

![MaixCube_20200529_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555397/7f497c54-95e6-d6fc-d170-c5120e6c6d2c.png)

上部のレバースイッチを動かすとSipeedのアイコンが表示されます。

![MaixCube_20200529_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555397/fcd2eab9-2723-5b1e-e630-846331027685.png)

ここでレバースイッチを押し込むとメニューが表示されます。（←、ENTER、→となっていますが、現在はENTERのみ有効）

![MaixCube_20200529_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555397/de5d9480-c6d9-3f3b-8148-c82fdadb5ae8.png)

左上のアイコンを選択すると、ファームウェアの情報が表示されます。

![MaixCube_20200529_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555397/8f6a8a20-3338-8709-0ccd-3f83a959b45b.png)

初期出荷のファームウェアは v0.5.0-62 のようです。

右上のアイコンを選択すると、カメラ画像が表示されます。（カメラの保護フィルムを付けたままだったので画像がはっきりしていません ^^;）

![MaixCube_20200529_6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555397/fde0e086-d2eb-dc78-3fbd-616f263c3dd7.png)

左下のアイコンを選択すると、内蔵のフラッシュメモリの（SPIFFSと思われる）ファイルシステムが表示されます。レバースイッチを動かすとスクロールします。

![MaixCube_20200529_7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555397/e214ebf1-d08d-6f29-fe1c-e559eb3d9e8f.png)

初期出荷状態で表示されるこれらのメニューもここに格納されているようです。

右下のアイコンは現在動作しないようです。

# スイッチ/ボタン

MaixCubeは上部に左、右、プッシュ操作ができるレバースイッチと、前面に左右２個のボタンがあります。MaixCubeはバッテリーを内蔵していて電源ボタンを６秒以上の長押しで電源のオン/オフができます。レバースイッチは、Maix-Goと同じくリセット時に右に倒しているとフラッシュメモリに書き込むためのISPモードになります。（Maix Dock、Maixduino等のBootボタンの操作）

![MaixPy_20200530_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555397/30f80581-ce5a-75de-f379-07e6034dd4d0.png)


# その他

ファームウェアはこちらからダウンロードできます。2020/5/29現在 v0.5.0-88 が最新版のようです。

https://dl.sipeed.com/MAIX/MaixPy/release/master/maixpy_v0.5.0_88_gb7f0c13

MaixCubeの情報は、以下でも提供されています。

春風商事さんのサイト [Sipeed Maixシリーズの選び方](https://hrkz.tokyo/sipeed-maix-lineup/)

今日はここまで
fetchのmodeについて

# 仕様

https://fetch.spec.whatwg.org/#concept-request-mode

ここに書いてあることの和訳と実際使う時の補足。

# fetchの`mode`

リクエストのモードを決めるオプション。

```js
fetch(url, { mode: "cors" })
```

## no-cors

`CORS-safelisted methods`と`CORS-safelisted request-headers`だけを使ったリクエストを送る。
成功すると`opaque filtered response`を返す。

`no-cors`という文字通り、実質別オリジンへのリクエストとしては機能しなくなる。

### `CORS-safelisted methods`と`CORS-safelisted request-headers`
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS
ここの「単純リクエスト」の項目を参照。

### `opaque filtered response`

no-corsの場合、CORSであってもエラーが出ず、下記のような虚無なレスポンスが返る。

- type: "opaque"
- URL list: 空
- status: 0
- status message: 空文字列
- header list: 空
- body: null

<img width="973" alt="スクリーンショット 2020-05-29 13.35.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132179/33e25a20-24bd-6e52-93df-9550dfc855d8.png">


## cors

CORSなリクエストを送る。
CORSのプロトコルに沿わない場合（必要なヘッダが無いなど）にはエラーとなる。

CORSなリクエストをしたいのであればこれ。

## same-origin

> Used to ensure requests are made to same-origin URLs. Fetch will return a network error if the request is not made to a same-origin URL.

別オリジンへのリクエストを送れないようにする。
リクエスト先が別オリジンだった場合即エラー。


## navigate

ページ遷移の時に使う特別なモード。
全くわからん、ページ遷移の時にjsでfetchを発火させるってどういうユースケース？

https://stackoverflow.com/questions/55106292/how-to-use-the-navigate-request-mode

## websocket

websocketの接続を確立させるときに使う特別なモード。
仕様以外で言及されているのを見たことがないので無視して良いんじゃないかな（）

# modeのデフォルト値

fetchの仕様では「デフォルト値は`no-cors`だけど、新しい機能に`no-cors`を使うのは安全じゃないから推奨しないよ」と書いてあり、ChromeでもFirefoxでもSafariでもデフォルト値は`cors`になります。
つまり、純粋にCORSリクエストを送る場合は何も指定しなくてOK。

# 結局どれ使えば良いの？

`cors`にしておけば良い気がしました（概ね最近のブラウザはデフォルト値が`cors`なのでつまるところ指定が不要、そういう暗黙的な決定が気になる場合は明示的に指定しよう）。
同一オリジンの場合はもちろん問題なく通るし、別オリジンの場合も適切でなければエラーになります。

逆に同一オリジン以外への意図せぬアクセスをしないようにするために`same-origin`とかを使う場合もあるのかな？
POE 渾沌詛咒巫女

目前角色等級91，想說完了好多隻秘術巫女，有點小小的心得，發文分享一下。
這隻角色的核心就是三詛咒，提供角色的傷害與生存面，時空鎖鏈與衰弱保障生存。
如果沒有辦法取得日耀之冕，可以用血肉骸骨獲得致盲的效果，這樣防禦面就很完整了。
攻擊部分，災厄與絕望降低怪的渾沌抗性，做範圍輸出，靈體撕裂做打王的單體輸出。

角色技能
靈體撕裂-效能輔助-撲殺輔助-虛空操作輔助
災厄-絕望-效能輔助-腐化輔助
詛咒光環輔助-時空鎖鏈-衰弱-啟蒙輔助
受傷施放輔助-瘟疫-褻瀆
血肉骸骨-啟蒙 (我使用了議會之息才串了這些技能，如果換成日耀之冕或宇蝕可以不用這串技能，還可以有更多魔力)
風暴漩渦-效能輔助-腐化輔助-低階中毒輔助

角色天賦
https://web.poe.garena.tw/fullscreen-passive-skill-tree/3.10.1/AAAABAMBAQWTBbUG5wceCPQNHw5IES0RlhNtFAkWbxhqGmwc3CLqIvQkqiaIKPosnDBxMgE1kjY9Nuk5UjpCOlg64TwoQYdCekWdSRNJUUt4TeNObVNSVcZYB1xAXfJh62KsYt1n_GnYakNsC2yMbRltbHWeeC96U3pUenB8g3zlfPB-oX_GgseD24fLieCNv46-jxqPRo_6kQeSwZMfkyeVLphTmuCboZwynL6dqp2upAWlxKZXpwinm6yYrUqyGbVItzC3PriTuQK7TbzqwzrII88Vz3rUI9i93V_dqN-w42rmWOd06Fro1uvu7Bjw1fJF99f56P4K_o8=?accountName=koin80&realm=pc&characterName=%E7%A8%8B%E5%BA%8F%E7%8C%BFMocha

![Imgur](https://i.imgur.com/8U2Tm9F.png)
全角スペースによるSyntaxError: invalid syntax 

##エラー再現
```python
print("test")
　
```
で`SyntaxError: invalid syntax`と怒られた。

##原因
print文の次の行に全角スペースを入れてあるから怒られてます。

markdownやvscodeで、赤点線や赤波線で全角スペースの存在を教えてます。
自分は、他の箇所の構文が間違っているためエラーが出ていると思い込んで、他の箇所ばかり調べていました。
全角スペースのエラーは例えば`print　("test")`みたいな何か書いてある箇所で発生する物だと考えていたため、気付きませんでした。

#####空行に見えても、そこに全角スペースが存在すればエラーは発生すんですね。
【NoMethodError】newアクションで発生した際の解決法

# 概要
登録画面に遷移したいのに、エラーになって全然表示できない:sob:
状況に陥り、何時間も悪戦苦闘した結果、解決しましたので備忘録として残します。

## 事象
下記のようなエラーが発生:zap:
<img width="710" alt="スクリーンショット 2020-05-29 11.45.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634091/497c2d4e-728f-cf2d-2729-710ce67a0701.png">

```ruby:routes.rb
Rails.application.routes.draw do
  devise_for :users
  root "groups#index"

  resources :users, only: [:edit, :update]

  resources :groups, only: [:index, :new, :create, :edit, :update] do
    resources :tasks, only: [:index, :new, :create, :edit, :update, :destroy]
  end
end
```
```html:controller.html.haml
  def new
    @task = Task.new
  end
```
```html:main_view.html.haml
#省略
.new_display
  = form_for @task do |f|
＃省略
```
## エラーを見た感想
おかしなとこない:disappointed_relieved:
何言ってんねん:persevere:
newアクションだからデータないやんかーーー
と一人で悶々としてました。。。

## 原因
原因は【form_forが自動的に生成してくれるパスは**複数形のみ**】ということ！！
エラー文にも記載ありました！

**undefind method 'tasks_path' for ~**

私は、その箇所を読んでも何言ってんの？？そんなパスないよ:triumph:
と思ってましたが:sweat:

## 解決策
viewを下記のように変更しました！

```html:main_view.html.haml
#省略
.new_display
  = form_for @task, url: group_tasks_path do |f|
＃省略
```
#### 画面
<img width="695" alt="スクリーンショット 2020-05-29 13.40.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634091/86758ecd-7e75-fb79-13c3-cde4a68febd5.png">

似たようなことでお悩みの方の足掛かりになれば幸いです:relaxed:

## 参考
https://qiita.com/annaaida/items/ae38de82526bf5b4aa73
Dockerでエラー　Couldn't connect to Docker daemon. You might need to start Docker for Mac.


```
./scripts/start.sh
```
で開発環境を開始しようとしたのですが、

```
ERROR: Couldn't connect to Docker daemon. You might need to start Docker for Mac.
```
このようなエラーが出ました。
Macの上のバーを見ると **クジラがいない！**
再起動するとDockerが落ちることがあったので、立ち上げると成功しました。
エラーが出たら再起動する、アプリが立ち上がっているか確かめる、バージョンを確かめる
鉄則ですね！
Rails + MySQLで作ったアプリをherokuにデプロイする

※rails初心者向けの記事です。

## herokuのデータベース
herokuはデフォルトのデータベース(以下DB)はPostgreSQLです。
なのでMySQLで作ったアプリをherokuにデプロイするときは次の２つがあります。

① DBをPostgreSQLに変更してherokuにデプロイ
こちらのサイトに大変お世話になりました。本記事では取り扱いません。
[【初心者向け】railsアプリをherokuを使って確実にデプロイする方法【決定版】](https://qiita.com/kazukimatsumoto/items/a0daa7281a3948701c39)

② DBをMySQLのままherokuにデプロイ
本記事ではこちらの方法についての備忘録です。

## この記事でやること
- ClearDBアドオンを追加
- Gemとデータベースをチェック
- MySQLからMySQL2に変更

### ClearDBアドオンを追加
ClearDB はクラウド上で提供されている MySQL データベースです。
クレジットカード必須。
データ容量5MBの最小構成であれば無料で使えます。(2020年5月現在)
詳しくは公式で。

参考 : [HerokuでMySqlの設定をする](https://qiita.com/fukumone/items/b8934f78f841b19edbbe)


```terminal:ターミナル
$ heroku addons:add cleardb
```

### Gemとデータベースをチェック

まずはGemの確認


```terminal:Gemfile
# Use mysql as the database for Active Record
  gem 'mysql2', '0.5.3'
```

mysql2を使っていることがわかりました。
そして以下を実行。

```terminal:ターミナル
$ heroku config | grep CLEARDB_DATABASE_URL

CLEARDB_DATABASE_URL:  mysql://ユーザー名:パスワード@ホスト/データベース名?reconnect=true
```

このコマンドにより、自分のmysqlの情報を知ることができました。

ちなみにこのデータをSequelProに紐付けることでデータベースをGUI操作できます。
[201862herokuでMySQL環境作ってやんよ!!!](https://tokidoki-web.com/2018/06/)

### MySQLからMySQL2に変更

Gemと合わせるためにmysqlからmysql2に変えましょう。

```terminal:ターミナル
$ heroku config:set  DATABASE_URL='mysql2://ユーザー名:パスワード@ホスト/データベース名?reconnect=true'
```

詰まった方はこちらを参考に
[HerokuでMySQLを使おうとして詰まったところ](https://qiita.com/senou/items/108ef1d94dcb5b227b4f)

## 参考
お世話になりました。
[HerokuでMySqlの設定をする](https://qiita.com/fukumone/items/b8934f78f841b19edbbe)
[HerokuでMySQLを使おうとして詰まったところ](https://qiita.com/senou/items/108ef1d94dcb5b227b4f)
竹串のススメ

![BambooSkewer.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34816/b4d299b2-5240-6e0e-e317-c3da4463768b.jpeg)

電子基板を扱うときは工具箱やペンケースに竹串を２、３本用意しておくと重宝します。

![DipSwitch.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34816/f5324dc1-5f85-cc39-4b38-4c79544ab8bc.jpeg)

DIPスイッチを切り替えたり、コネクタのロックを外したりというときに、部品を傷つける恐れが少ない竹串を使うことをお勧めします。

ボールペンやドライバーの先端で電子基板を扱うと、絶縁皮膜を傷つけたりハンダを引き剥がす可能性がある危険な行為です。また電子基板を扱うときは電源をオフしてACケーブルやバッテリーを取り外してから作業することが基本ですが、カレンダー時計(RTC)用のボタン電池やコンデンサーの電荷が残っている可能性はあります。導電性のある金属で電子回路に触れることは避けましょう。

![Tweezers.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34816/fd1f5541-ac70-a710-c5af-371d4717b631.jpeg)

プラスチック製のピンセットも販売されています。お値段はピンキリですが、焼き鳥などに使う竹串とは値段が一桁二桁差があります。竹串も折れますし、ハンダゴテの熱で焦げますが、ダメになれば躊躇なく捨てられます。爪楊枝でも竹串の代用はできますが、強度や長さ、耐熱性で竹串の方が重宝します。

![BambooRuler.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34816/a57985fb-738b-6973-97d9-138f72340f20.jpeg)

同様に重宝する道具に竹製ものさしがあります。以前は裁縫用品店でしか購入できませんでしたが、近頃では百円ショップでも扱っています。金属やプラスチックのものさしでは服の生地を痛めてしまうことが竹製が好まれる理由ですが、電子部品も傷つけたくないという目的では一緒です。金属製のゼムクリップや押しピンも不用意に手元に置いていると事故の元ですから気をつけましょう。:sweat_smile:
【Rails】deviseのバリデーションをカスタマイズ

##最初に
deviseを使用して、ユーザーの新規登録機能を実装している際に、
バリデーションを付与しているのにバリデーションが適用されず、実装に苦戦したため備忘録として残します。

##deviseのデフォルトのバリデーション
deviseは認証機能を簡単に実装できる様にするためのgemですが、勝手にgemが動いてくれるがゆえに見えないところで何をしているかが、初学者の私には理解が難しかったです。これがバリデーションを付与しているのに適応されない原因でした。

~~~ new.html.haml

= form_for(@user, url: user_registration_path) do |f|  
  = f.password_field :password, class: "main__box__bottom__content__group2__form", placeholder: "7文字以上の半角英数字", 
~~~
結論はフォームでpassword_fieldを使用していたため、Railsはこの入力フォームをpasswordと認識して、簡単なバリデーションを自動でかけるようになっているようです。

##deviseのカスタマイズ手順

###1.フォームを修正（適切なフォームに）
password_fileldからtext_fieldに修正。

~~~new.html.haml
= form_for(@user, url: user_user_registration_path) do |f|  
  = f.text_field :password
end
~~~

これでpasswordカラムと認識。

###2.deviseのバリデーションの設定
ただモデルのpasswordカラムを追加に対してバリデーションをかけると2重でバリデーションがかかってしまうので、
deviseのバリデーションを追加している:validatableを削除する。

~~~user.rb
class User < ApplicationRecord
 devise :database_authenticatable, :registerable,
  :recoverable, :rememberable, :validatable　
                                  #↑削除する。
end
~~~

これでdeviseのバリデーションは掛からなくなり、passwordに自分でカスタマイズしたバリデーションが付与されるようになりました。

###まとめ
・バリデーションには参照する優先順位があり、
テキストフィールドに与えられているバリデーション＞devise＞自作のバリデーション
となっている。
・カスタムバリデーションのみ適用させる場合は、text_fieldを使い、deviseの:validatableを削除する。

##参考文献
https://qiita.com/kouheiszk/items/215afa01eeaadbd99340
VS cord でのJava環境設定が出来ません（Mac）

vscordでのJava環境を設定しようと思い、調べながらやってみてるのですが、どうしても上手くいきません。
私は、プログラミングを今月から始めたばかりで知識はほとんど無い状態です。
ネット上にあるやり方でやり、vscordを再起動しJava_projectを開こうとすると次のようなエラーが出てしまいます。

（：エラーコード）
コマンド 'Java: Create Java Project' でエラー (command 'java.project.create' not found) が発生しました


どうしても分からず聞く人もいない状態でどうすれば良いか調べた結果、こちらのサイトは現役の優秀なエンジニアの方達が質問に答えていただけると拝見したので投稿させていただきました。

是非、この問題を解決してエンジニアとして走り出したいのでよろしくお願い致します。
オブジェクトについて

#オブジェクトとは
値とその名前のセットをひとまとまりとし、それら複数を管理するのに用いられる。
また、その管理においては、それぞれの値に対しプロパティと呼ばれる名前を付ける
`{プロパティ1:値1, プロパティ2:値2}`

#定数への代入
~~~js
const menu = {name:"ラーメン", price:500};
console.log(menu)
console.log(menu.name)
~~~
#####表示例
{name:"ラーメン",price:500}
ラーメン

#オブジェクトを要素に持つ配列
###配列
配列とは、複数の値（要素）をまとめて管理する際に用いられる。
#####入力例

~~~js
const taste = ["醤油","味噌","塩"];
console.log(taste);
console.log(taste[1])
~~~

#####表示例
["醤油","味噌","塩"]
味噌


###要素がオブジェクトの時
#####入力例
~~~js
const ramen = [
{taste:"醤油", price:650},
{taste:"味噌", price:800},
{taste:"塩", price:750}
];

console.log(ramen[0]);
console.log(ramen[2].price);
~~~
#####出力例
{taste:"醤油", price:650}
750
フレキシブルケーブル

"**Flexible Flat Cable**", "**FFC**", "**フレキ（ケーブル）**"とも呼びます。
主に電子基板と電子基板の電気的接続のために使用する薄いケーブルです。

フレキシブル・ケーブルには裏表（電極面と絶縁面）があります。コネクタに差し込むときは裏表の間違いに注意しましょう。

# ケーブル面

## フレキシブル・ケーブル 電極面

![FlexibleCable_front.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34816/90a3b072-93a0-3cf2-31b8-1329814eafb7.jpeg)


## フレキシブル・ケーブル 絶縁面

![FlexibleCable_back.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34816/71a5f0ba-2902-87b3-2609-1d70397d0916.jpeg)



# コネクタ

フレキシブル・ケーブルを接続するコネクタは大きく分けて『ZIFタイプ』と『LIFタイプ』の２種類あります。

"**ZIF**" は "Zero Insertion Force" の略です。ZIFは挿入時に力が不要（ゼロ）のコネクタです。力をかけずに挿入できるということは、力をかけずに抜けてしまいます。そこで多くのZIFタイプのコネクタには挿入後に抜けることを防ぐためにパチンと嵌めるロック機構があります。

"**LIF**" は "Low Insertion Force の略です。LIFは挿入時に弱い力が必要なコネクタです。LIFタイプのコネクタはロック機構を省略して小型化、低コスト化したコネクタであることが多いです。

## ZIFタイプのコネクタの例

### ロックあり

![ZIF_fasten.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34816/d240417f-b6d0-ba6a-f9be-57b8bb1aa5be.jpeg)


ケーブルが抜けないようにロックがかかった状態です。

### ロックなし

![ZIF_loosen.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34816/bbe3e38d-b213-43dc-1d00-76d428a6ae80.jpeg)

ロックが外れてケーブルが抜き差しできる状態です。

ロックのはずし方、掛け方はコネクタによって異なります。

コネクタやケーブルの破損を防ぐため、ドライバーや金属ピンセットでロックをこじ開けることは避け、指の爪や竹串を使いましょう。
クリップボードの画像を出力するpngpasteコマンドとEmacsの連携 (macOS)

クリップボードにコピーした画像を出力したいシーンは多々ある。Preview使うとか方法はさまざまだが、Alfredとかターミナルとかから手軽に使うためにはコマンドになってると便利だ。そんなこんなでおすすめなのは[pngpaste](https://github.com/jcsalterego/pngpaste)。インストール方法としてbrewもサポートしてる。

```bash
brew install pngpaste
```


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">クリップボードの画像を出力するpngpasteコマンドとEmacsの連携 (macOS) <a href="https://t.co/lj31DvncHi">https://t.co/lj31DvncHi</a> <a href="https://t.co/DPXNTBB3hC">pic.twitter.com/DPXNTBB3hC</a></p>&mdash; ladicle (@Ladicle) <a href="https://twitter.com/Ladicle/status/1266221237853814786?ref_src=twsrc%5Etfw">May 29, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


画像のドラック&ドロップ等、Emacsでは殆どのケースを[org-download](https://github.com/abo-abo/org-download)で解決できるが、クリップボードの画像貼り付けはサポートされていない。
そこで、次のように`pngpaste`を呼び出す関数を定義して、`C-M-y`あたりにバインドすると...Emacsのorg-modeでinline-imageを楽に挿入できる。(便利!

```emacs-lisp
(with-eval-after-load "org"
  (defun org-insert-clipboard-image ()
    "Generate png file from a clipboard image and insert a link to current buffer."
    (interactive)
    (let* ((filename
            (concat (file-name-nondirectory (buffer-file-name))
                    "_image/"
                    (format-time-string "%Y%m%d_%H%M%S")
                    ".png")))
      (unless (file-exists-p (file-name-directory filename))
        (make-directory (file-name-directory filename)))
      (shell-command (concat "pngpaste " filename))
      (if (file-exists-p filename)
          (insert (concat "[[file:" filename "]]")))
      (org-display-inline-images)))

  (global-set-key (kbd "C-M-y") 'org-insert-clipboard-image))
```
【vscodeスニペット】LaravelでAPIを実装する時のデバッグ方法

laravelでのデバッグといえばdd()が有名ですね!
が、コントローラがAPIの場合には、dd()を使っても画面上に情報を表示させることができません。

ではどうすればいいのかというと、**ログ出力**を使って情報を出力させます。

APIを使ってない方でも、ログならばデバッグ情報が残るので、dd()との使い分けとして知っておくといいかも!

## Logファサードの基本
### エイリアス登録
laravelのプロジェクトフォルダ内部「src/config/app.php」を開きます。
aliasesという箇所にLogが登録されているのをチェックしましょう。

```php:config/app.php
'aliases' => [
'Log' => Illuminate\Support\Facades\Log::class,
]
```

### ファイル内でLogを呼び出す
呼び出す方法は`use`を使う方法と`\`(バックスラッシュ)を使う方法の2つです。
どちらにしろ、グローバル空間から呼び出すことに違いはありません。

```php:HogeController.php
use Log;
```

```php
\Log::info();
```
使うならどちらか一方を使う方が、統一感があっていいですね!

### ログの出力場所
`config/loggin.php`をチェックしましょう。

```php
    'channels' => [
        'stack' => [
            'driver' => 'stack',
            'channels' => ['daily'],
            'ignore_exceptions' => false,
        ],

        'single' => [
            'driver' => 'single',
            'path' => storage_path('logs/laravel.log'),
            'level' => 'debug',
        ],
```
デフォルトでは↑のようになっていて、`src/storage/logs`の中に`laravel.log`が生成・更新されます。

### スニペット
これから紹介するメソッドをスニペットにしておきました。
ユーザースニペット(php.json)にコピペするだけで、すぐに使えます。

```php.json
	"引数の表示": {
		"prefix" : "log-args",
		"body" : [
			"Log::info('${1:value}の中身' . $1);",
		],
		"description": "expose to args content also can use typeof array"
	},
	"配列の表示": {
		"prefix" : "log-array",
		"body" : [
			"Log::info('${1:array}の中身' . print_r(\\$$1, true));",
		],
		"description": "expose to arg content also can use typeof array"
	},
	"型の判定": {
		"prefix" : "log-type",
		"body" : [
			"Log::info('type of \\$${1:value}' . gettype(\\$$1));",
		],
		"description": "expose to type"
	},
	"クラスの判定": {
		"prefix" : "log-class",
		"body" : [
			"Log::info('class of \\$${1:value}' . get_class(\\$${1}));",
		],
		"description": "expose to arg class"
	},
```

## Logを使う

### スニペット

### 1.引数を表示する

```php
Log::info('引数の中身' . $value);
```

### 2.引数(配列)を表示する
1だと、配列などの中身は表示できません。
そんな時は[print_r](https://www.php.net/manual/ja/function.print-r.php)を使いましょう。

```php
Log::info('valueの中身' . print_r($value, true));
```

### 3.型を判定する
[gettype](https://www.php.net/manual/ja/function.gettype)

```php
Log::info('valueの中身' . gettype($value));
```
リクエスト情報の型を判定するのに使うことが多いです。

### 4.クラスを判定する
[get_class](https://www.php.net/manual/ja/function.get-class)

```php
Log::info('valueの中身' . get_class($value));
```
タイプヒンティングでクラスを固めている場合は使うことが多いかも。

### print_r 以外に使える関数
PHP自体に馴染みのある方は[var_dump](php.net/manual/ja/function.var-dump)が馴染み深いと思います。
・・・が、`var_dump`は戻り値がないため、`Log::info()`しても中身が表示できません!

`print_r`の代用としては、[var_export](https://www.php.net/manual/ja/function.var-export.php)を使うのもアリですね。

## まとめ
Logを使うとAPI含めてバックエンドのデバッグができるよ。
調べたい値に応じてPHP組み込み関数と組み合わせて使おう!
AtomCraftでビルドしたデータをUE4に自動で再インポートする

## はじめに
ADX2とUE4を連携させて使う際に使うAtomCraft。
ツール上でサウンドがプレビューできるとはいえ、UE4まで持っていて修正することは多々あります。
AtomCraftでビルドすれば、即UE4にインポートしてあるキューシート（acbファイル）まで更新されるよう登録するとイタレーションがかなり快適になります。

![A08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/ee0855c8-b76d-9b51-f59c-62edc96d0730.png)
ビルドすると、設定した時間が経過した後インポート処理が自動で行われます。

特にインタラクティブミュージックなどのダイナミックな仕組みを採用する場合、音のつなぎや遷移の確認をするにはUE4エディタとAtomCraftを何度も行き来することが多くなります。キューシートを更新するたびにエクスプローラを開き、ファイルを移動しているのではかなり無駄な手数がかかります。

また、複数人が参加するプロジェクトの場合ファイルの更新を見落すことがトラブルに繋がります。後述する**「エディタ起動時に更新を確認する」**設定にしておけば、そういった事態を未然に防ぐことができます。

他にも音の範囲を細かく設定する場合、またAISACコントロールによりパラメータが大きく変動する場合に役立ちます。
この機能が有用なシチュエーションの記事をいくつか上げておきます。
**ADX2 for UE4でインタラクティブミュージック（AtomCraft編)**
https://qiita.com/SigRem/items/8af9b7d8445477906741
**ADX2とUE4で3Dサウンドを実装する**
https://qiita.com/SigRem/items/61202791968bfd168bd2


## 前提
「ADX2 for UE4 LE」を使用します。導入や簡単な使い方は以下の記事にあります。
ADX2 for UE4の導入で、一歩上のサウンド表現を（導入編）
https://qiita.com/SigRem/items/4250925f6d66a4fd287a
ADX2 for UE4の導入で、一歩上のサウンド表現を（実践編）
https://qiita.com/SigRem/items/c089b71c42e898980a46

## エディタで自動インポート設定をする

### 基本設定
ツールバーより、「Edit」→「Editor Preferences」を開きます。
![A01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/4e490b01-8136-31f3-66d3-bf4e0d7368f7.png)
「Loading & Saving」を開き、「Auto Import」の項をクリックして拡張します。
![A02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/1e5d4cbd-3bf0-39f6-8968-885657d109a6.png)
ここに監視したいフォルダのパスを指定しておくことで、アセットに変更があった際に自動でインポートされます。
![A03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/8069b9f0-95e2-2c01-8f4d-f4f7c58921a9.png)
ワークユニットが複数ある場合、「+」ボタンを押して参照フォルダを複数指定しておきましょう。

変更が検知された場合、エディタ右下にインポートするかの確認ダイアログが表示されます。
![A07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/52eefa32-a293-e184-bbe6-0b6159cd6792.png)
「What Changed?」を押すことで、どのファイルが変更されたのかをログに表示できます。



### ワイルドカードの設定
ワイルドカードを使って、acbファイルだけを自動インポートすることもできます。
**Inclue/Exclude Wildcards**の最後に「*.acb」と付け足しておきます。
![A06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/a8de7a89-0186-49f4-b8e2-907de4497253.png)
これで**対象フォルダ内の拡張子acbファイルのみを監視する**ことになります。

### その他の設定など
**Import Threshold Time**を変更することで、ファイルが変更されてから実際にインポートされるまでの時間を指定することが可能です。
![A04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/ae182c41-5527-4330-1758-7f345ac94656.png)
UE4のエディタ起動時に変更を検知するには、**Detect Changes On Startup**にチェックを入れます。
![A05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/df375114-9c01-2447-1d34-8ef2dd1ca123.png)
イケてないswitch-case文からおさらばするPHP生活の知恵

# はじめに

PHPの等価比較がゆるふわなことにお悩みのぺちぱーのみなさまこんにちは。
PHPのswitch-case文が「緩やかな比較」であることは有名ですが、なるべくならいつも厳密に比較したい諸兄にはツラい現実を投げかけてきていると思います。

# イケてない例

たとえば、Laravel案件とかでこんな処理を見かけることがあると思います。

```php
class HogeController {

    public function fuga($method){
        $title = '';

        switch($method){
            case 'new':
                $title = '新規作成';
                break;
            case 'update':
                $title = '更新';
                break;
        }

        return view('fuga', compact('title'));
    }

}
```

きっとルートパラメータで来た文字列でタイトル出し分けたいんでしょう。
こんなことでswitch分岐させる？みたいな微妙に気分になりますね。
もうちょっと違う方法でできそうな気がしますよね。

# 連想配列を使ってみよう

これくらいだったら連想配列で行けそうですよね。いちいち真偽判定しない分、こちらの方がパフォーマンスが良いと言われています。（ベンチマークは各々やってくだせえ）

```php
class HogeController
{
    public function fuga($method)
    {
        $title = [
            'new' => '新規作成',
            'update' => '更新'
        ][$method];

        return view('fuga', compact('title'));
    }
}
```

この例だと `$method` に `new` か `update` 以外が来てしまうと死ぬのですが、そんなのが来そうなときは `array_key_exists()` でチェックすると良いでしょう。

こんな感じ。

```php
class HogeController
{
    public function fuga($method)
    {
        $title_list = [
            'new' => '新規作成',
            'update' => '更新'
        ];
        
        $title = (array_key_exists($method, $title_list))
            ? $title_list[$method]
            : '';

        return view('fuga', compact('title'));
    }
}

```

@tadsan からphp7.1以降ならこう書けるよっていうコメントいただきました！
ちょっとmatch式っぽいですね（続編へのフリ

```php
class HogeController
{
    public function fuga($method)
    {
        $title_list = [
            'new' => '新規作成',
            'update' => '更新'
        ][$method] ?? '';

        return view('fuga', compact('title'));
    }
}

```

PHP8で開発している方はこちらの方法のほうがいいですよ！

https://qiita.com/layzy_glp/items/224273d294b09674ba51
使い捨てのコードが書けるレイヤーを追加する VSCode拡張機能 を作った

コミットするつもりのないデバッグ用のコードを書いて、「後で消そう」とその時は思うのですが、結局忘れてコミットしてしまう。そういった経験が一度はあると思います。
そのような問題の一部を解決する機能です。

[Code Layer](https://marketplace.visualstudio.com/items?itemName=atilol.code-layer)
このデモでは最後に元コードにレイヤーのコードをマージしています
![demo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260154/2411bc8c-2bc2-e7d8-6ea5-62dc50d04a56.gif)

## 使い方

1. レイヤーを追加する
2. 使い捨て、または一時的なコードを書く
3. レイヤーを削除/マージする

## 機能

- コード追加箇所のハイライト
- レイヤーの表示/非表示の切り替え
- レイヤーの削除
- レイヤーのマージ

## できないこと

### 複数のレイヤーの追加

すみません。私のアルゴリズム力では複数レイヤーの差分をいい感じに管理する案を思い付きませんでした
つよつよの方がいましたらアドバイスお願いします

### 複雑な編集

基本的に [使い方](#使い方) で書いた編集のしかた以外は期待通り動作しない可能性が高いです
例えば、レイヤーを非表示にしてベースのコードを編集し、その後レイヤーを表示するなど

この辺はもう少しうまくできそう

## 開発で参考にした記事など

https://code.visualstudio.com/docs
https://qiita.com/kojisaiki/items/c20ccfd45c98fa3301d6
Chromeのデフォルトアイコンの名前を見極めて、表示変更する方法

## 概要
本文はマークアップのtipsです。
chromeで画面確認をした時に、typeがtimeのinputタグの横に、例えば時計アイコンが入っていて、それをどうしても取り除きたい時に取り除く方法について記載してあります。

### 変更前　→　変更後
<img width="232" alt="Screen Shot 2020-05-29 at 12.01.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293094/8822484a-7285-0371-c757-5c79663abb17.png">　→　<img width="223" alt="Screen Shot 2020-05-29 at 12.01.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293094/270fb33a-1e9a-d9cb-d160-4d75310c97ad.png">

## 方法

### 1.開発者ツール設定を変更
まずは、開発者ツールの設定で、Shadow DOMの表示を有効にしてください。
これをしないことには対象のiconに関する情報が見れません。
有効にする方法がわからない方は以下の記事が参考になります。
参考: https://qiita.com/Tsuyoshi84/items/4ada593c76b0a1339b6e

### 2.名前を調査
開発者ツールで、該当のDOM要素を調査してください。
私の今回の場合は
`-webkit-calendar-picker-indicator`という名前でした。

### 3.cssを記述
最後に表示を向こうにする記述を追加してください。
具体例としては牡蠣のようになります。

    [type='time']::-webkit-calendar-picker-indicator {
      display: none;
    }

ブラウザで非表示になったことを確認できたら作業完了です。

こちらの記事参考になりましたら幸いです。
以上、お読みいただきありがとうございました。
【Git】syntax error near unexpected token (' 　解決方法メモ

#### syntax error near unexpected token (' 　

解決法①
`(`が入っている事で構文エラーになっている模様（空白や記号）　
* ファイル名の`(`の前までコピー
* ファイル名の最後に`*`をつけて再度コマンドをtry

解決策②
ファイル名を`""`ダブルクォーテーションで囲って文字列として扱えばいいらしい
※試してない←
mysqlデータベース作成と権限の付与

## laravelプロジェクトでデータベース構築
- 概要:laravelのプロジェクトでデータベースを作成して、権限を与えてあげるまで

## mysqlに接続
terminalから以下で接続できます。
接続されると `mysql>`となり、待機状態になります。

```terminal:bash
$mysql -uroot 
```
##laravelのenvファイルに設定を記入する
laravelの環境設定ファイルがenvファイルです。こちらにdbの接続情報を記入します。

```php:.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=dbuser
DB_USERNAME=dbuser@localhost
DB_PASSWORD=dbpassword

```

##データベースの作成

```terminal
mysql>create database dbuser;
```

## データベースが作成されたか確認
以下のコマンドを入力すると一覧が確認できる

```terminal
mysql>show databases;
```

## データベースに権限を与える
データベースユーザー作成とアクセス権限付与します。

```terminal
mysql>GRANT ALL PRIVILEGES ON dbname.* TO dbuser@'localhost' IDENTIFIED BY 'dbpassword';
```

既に、ユーザーを作成している場合などは上記の作成を分けることもできます。

```
(データベースユーザー作成)
mysql> CREATE USER dbuser@localhost IDENTIFIED BY 'dbpassword';

(データベースに対するユーザーのアクセス権限付与)
mysql> GRANT ALL PRIVILEGES ON dbname.* TO dbuser@'localhost';
```

##既にユーザーが存在している場合はもう一度作成するとエラーになる
例えば次のようにUser rootで Host　localhostののユーザーが既に存在していると、もう一度作るとエラーになる。 
<img width="278" alt="スクリーンショット 2020-06-02 16.20.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/417196/ff3b08bf-80dd-edf8-1e2c-6c477f24df7c.png">

```terminal
mysql> create user root@'localhost' identified by 'root';
ERROR 1396 (HY000): Operation CREATE USER failed for 'root'@'localhost'
```

ユーザーをdropで削除してもう一度作り直せば大丈夫。


##参考
[MySQL のデータベースユーザーとデータベースアクセス権限](https://www.saintsouth.net/blog/mysql-user-and-permissions/)
[同じ名前のユーザをもう一度登録するとエラーになる](https://kobapan.hatenadiary.org/entry/20090910/1252552185)
【Rails】ヘルパーメソッド、confimartionの使い方

##　最初に
パスワード入力時に確認用で２回パスワードを打ち込む仕様になっているサービスをよく見かける。
同じことを実装しようとした際にconfimartionというRailsにおけるバリデーションのヘルパーメソッドを使用すれば簡単に実装できたため、備忘録として残します。

## connfimartionとは
2つのテキストフィールドで受け取る内容が完全に一致する必要がある場合に使います。たとえば、メールアドレスやパスワードで、確認フィールドを使うとします。このバリデーションヘルパーは仮想の属性を作成します。属性の名前は、確認したい属性名に「_confirmation」を追加したものになります。
https://railsguides.jp/active_record_validations.html
上記より引用。

要は2つのフォームで同じデータでなければ登録できないバリデーションをかけるメソッドという認識で問題ないかと思います。

## 実装手順

### 1.モデルの修正
~~~user.rb
class User < ApplicationRecord
  validates :password, confirmation: true
end
~~~

モデルにconfimartionメソッドを適用したいカラムに対して、上記の様な記述を追加。
これでバリデーション完了。

### 2.ビューに確認用のフォームを追加

~~~new.html.haml
= form_for(@user, url: user_registration_path) do |f|  
  = f.text_field :password 
  = f.text_field :password_confirmation
end
~~~

テキストフィールドの第二引数の属性名は、confimartionで確認したい属性名に_confimartionを追加します。
実際に記述したモデルとビューについては下記の様な感じになります。
<img width="755" alt="スクリーンショット 2020-05-29 12.05.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610541/b72afa86-cc42-675d-9331-34cae88a14a2.png">

<img width="1155" alt="スクリーンショット 2020-05-29 12.03.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610541/29a568e2-cbf3-2d96-14e0-febadcf5f2a0.png">

以上で2つのフォームに入力された値が同じでなければバリデートされる様になります！
バリデーションを追加したい場合は、確認したい属性にバリデーションを付与すれば良いだけです。

最初実装する際に、
・確認用の属性を作成して、
・二つのフォームに入力がされた値が同じかどうかを確認する様な条件分岐の作成
・同じであれば保存
の様なコードを書かないといけないと思っていたので、confirmationを使うことにより非常に簡単に実装が完了しました。

## 参考文献
https://railsguides.jp/active_record_validations.html
Android Studioへの画像リソースの追加が劇的に楽になってたので紹介します

## これまでのやり方
これ僕だけなのかもしれないのですが、今までは下記のようなサイズ別の画像を
![Screen Shot 2020-05-29 at 9.54.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51328/321ff4aa-5a84-974b-5d4d-e559d72e8608.png)
下記のリソースフォルダへ一つ一つコピペしておりました。
![Screen Shot 2020-05-29 at 9.54.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51328/b027868c-496f-7557-2cd0-6a3c62794773.png)
これが地味に面倒で、コピー対象には`ldpi`がなかったり、`v24`などがあったり、ちゃんと間違いのないコピペができたかを毎度チェックしていました。今回のように一つのリソースならまだしも、大きめの改修でリソースの数が多いと、この作業だけで結構気力を奪われます。

## これからのやり方

Android Studio 3.4からは `Resource Manager` という機能が追加されました。下記画面の項目から開くことができます。
![Screen_Shot_2020-05-29_at_10_05_32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51328/f9f028d8-3537-a2f5-7920-c1f6d205dd42.png)

`Resource Manager`は`Drawable`、`Color`、`Layout`、`Mip Map`、`String`などのリソースをGUIで表示することができます。画像以外のDrawableリソースもプレビューされるのでわざわざファイルを開いて確認する手間が省けてこれだけでも便利です。

さて、それでは本題の画像の追加方法についてですが、まず下記のようにDrawableタブを選択し、`+` をクリックします。

![Screen_Shot_2020-05-29_at_10_17_59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51328/a1dbc38a-ff26-8c2e-5d77-3380bcff04dd.png)

`Import Drawables` を選びます。

![Screen_Shot_2020-05-29_at_10_20_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51328/b7adb424-8f32-2552-396e-8973ffb409da.png)

別ウィンドウが開きファイルの選択を求められるので、フォルダごと選択して `Open`を押すと、

![Screen_Shot_2020-05-29_at_11_48_36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51328/8ce8d147-7600-96bd-f757-9ca70b2dc592.png)

なんということでしょう！インポートする画像がそれぞれのフォルダへ自動で選別されプレビューされました！

![Screen_Shot_2020-05-29_at_11_52_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51328/1412d09d-6732-e69e-072a-316367a7ec0c.png)

あとは `Next` -> `Import` -> `Add`と選択するだけで簡単画像リソースを追加することができます！

## あとがき
2012年からAndroid 開発に携わってきましたが、最初は`Eclipse`でした。それが`Android Studio`に変わり今でも進化を続けてどんどん便利になっています。開発もどんどん楽になるので嬉しいですね！

## 参考
https://stackoverflow.com/questions/28503229/fast-ways-to-import-drawables-in-android-studio/28503506
flutterでテキスト入力フォームと登録ボタンを実装

# やりたいこと

* テキスト入力フォームを表示させたい。
* 登録ボタンを表示させたい。
* 登録ボタン押下で、入力テキストを取得し、画面下部に表示させたい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75451/9c9e2007-d7c6-2f15-d904-75b6dcb89122.png)


# 完成形 main.dart

```dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'テキスト入力フォームのサンプル';
    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: Text(appTitle),
        ),
        body: MyCustomForm(),
      ),
    );
  }
}

class MyCustomForm extends StatefulWidget {
  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}

class MyCustomFormState extends State<MyCustomForm> {
  final _formKey = GlobalKey<FormState>();
  final myController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          TextFormField(
            controller: myController,
            validator: (value) {
              if (value.isEmpty) {
                return '何らかのテキスト文字を入力してください。';
              }
              return null;
            },
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: RaisedButton(
              onPressed: () {
                if (_formKey.currentState.validate()) {
                  Scaffold.of(context)
                      .showSnackBar(SnackBar(content: Text(myController.text)));
                }
              },
              child: Text('登録する'),
            ),
          ),
        ],
      ),
    );
  }
}
```

# 解説


### 入力フォームとバリデーション

```dart
          TextFormField(
            controller: myController,
            validator: (value) {
              if (value.isEmpty) {
                return '何らかのテキスト文字を入力してください。';
              }
              return null;
            },
          ),
```

### 入力されたテキストを取得して表示


```dart
            child: RaisedButton(
              onPressed: () {
                if (_formKey.currentState.validate()) {
                  Scaffold.of(context)
                      .showSnackBar(SnackBar(content: Text(myController.text)));
                }
              },
              child: Text('登録する'),
            ),
```

`myController.text` にて、入力されたテキストを取得できる。
`final myController = TextEditingController();` と `controller: myController,` で紐づける。
【Flutter】デモアプリまとめ！（サンプル集）

# Flutter デモアプリまとめ
ブラウザでも動かせる、いくつかのFlutterのデモアプリを紹介します。



## Twitter クローン
[Twitter クローン](https://codepen.io/mkiisoft/pen/KKdgdad)
**1395行**

- 投稿機能
- いいね機能（簡易）
- プロフィール表示機能
- サイドバー
- ダークモード
<img width="646" alt="Flutter_Twitter.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471258/bf45ff5b-e99b-3040-571e-51135b7c30be.png">



## アプリ集【公式デモアプリ】
[アプリ集](https://gallery.flutter.dev/#/)

- ショッピングサイト
- 資産運用管理アプリ
- 旅行系アプリ
- ニュースアプリ
<img width="960" alt="Flutter_apps.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471258/b0d05516-f5d4-0f5e-7e87-6c4568dcec7a.png">



## WehatsUp クローン
[WehatsUp クローン](https://codepen.io/mkiisoft/pen/BaoWVrQ)
**1786行**

- 投稿機能
- チャットの相手の一覧表示機能
- プロフィール表示機能
<img width="619" alt="Flutter_WhatsUp.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471258/0058452a-1e05-7a25-497a-f584859cf314.png">



## Slack クローン
[Slack クローン](https://codepen.io/mkiisoft/pen/XWmGdxL)
**1951行**

- 投稿機能
- チャンネルの変更
<img width="647" alt="Flutter_Slack.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471258/6d5e1b44-91e1-983f-8be6-c255b4dae108.png">



## 様々な種類のグラフ 【公式デモアプリ】
[様々な種類のグラフ](https://flutter.github.io/samples/web/charts/#/)

- 積み上げグラフ
- 折れ線グラフ
- 円グラフ
<img width="960" alt="Flutter_Charts.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471258/72214b32-ec19-f420-bd64-0d34c98d6024.png">



## Uber クローン
[Uber クローン](https://codepen.io/mkiisoft/pen/wvKyydP)
**486行**

- 地図表示機能
<img width="570" alt="Flutter_Uber.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471258/cfef1b8d-3bda-2db2-1ee2-ef65e5da73f1.png">




## スライドパズル
[スライドパズル](https://flutter.github.io/samples/web/slide_puzzle/#/)

- 3種類の柄のパズル
<img width="436" alt="Flutter_SlidePuzzle.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471258/f45407b5-9ddc-c082-b0e6-77908aeaa55e.png">





## Apple TV クローン
[Apple TV クローン](https://codepen.io/mkiisoft/pen/qBONONY)
**531行**

- 動画一覧表示
- 動画詳細画面（アニメーション遷移）
<img width="584" alt="Flutter_AppleTV.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471258/0be4084e-82b1-150b-8d20-b26c63200a8b.png">

## 参考
[Flutter Samples](https://flutter.github.io/samples/#)
[Mariano Zorrilla](https://codepen.io/mkiisoft)
PythonのEnumで0オリジンのインデックスを採番する

## 背景
Pythonでは`0`が`false`に判断されてしまうことから、
通常のEnumでは`1オリジン`で採番されますが、
どうしても`0オリジン`にしたい場合の簡単な実装サンプルです。

## 環境
python: 3.7.7

## 実装サンプル
```python:enum_0_origin.py
from enum import Enum

IDX = Enum('IDX', ['A', 'B', 'C'], start=0)
print(IDX.A.value)
# 0
print(IDX.B.value)
# 1
print(IDX.C.value)
# 2
```

以上、終わり。
データベースにsqlファイルをインポートする

# sqlファイルをインポートする
データベースにダウンロードしたsqlのファイルをインポートする必要があったので、備忘録として残します。

## インポートコマンド
sqlのことをよく分かっていなかったので、sqlをインポートする時はデータベースに接続して、やると思っていましたが、zshやbashなどのシェルスクルプト上で実行します。

```terminal:bash
[~/user]$mysql -u username -p database_name < file.sql
```

`file.sql`はプロジェクトのディレクトリでなくて、ダウンロードなど、どこに置いても良いが、importする際はパスを指定してあげないといけないです。
ファイルをドラックしてterminalに持ってくると、そのファイルの絶対パスが自動で入るので便利です。

##ハマったこと
すでに書きましたが、データベースに接続してインポートするものだと思いこんでいたので、何度やってもsyntaxエラーになってしまいました。あと、インポートするファイルのパスも指定しないと、当然、no such file と怒られます。
IQ Bot：どのインスタンスをどのOCRで作ったか確認したい！

IQ Botでは、使用するOCRをインスタンスごとに切り替えることができます。

#インスタンスとOCRの対応を見る方法：V11.3.4～
V11系統のV11.3.4以降のバージョンでは、以下のようにラーニングインスタンスの一覧画面で使用したOCRを確認できます。
![OCR一覧_モザイク.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/2c1f902a-9cef-f69f-ea53-f13bc554e642.jpeg)

#インスタンスとOCRの対応を見る方法：V11.3.3以前とA2019

11.3.3以前のバージョンとA2019（2020.5.29現在出ている最新版・A2019.12まで）では、IQ BotのDBサーバーで確認する必要があります。

確認方法を結論から説明すると、IQ BotのDBサーバーで以下のSQLをたたけば出てきます。

```SQL:qiita.rb
SELECT [ProjectId],[OCREngineDetailsId]
  FROM [FileManager].[dbo].[ProjectOCREngineDetailsMasterMapping]
  where ProjectId = 'ラーニングインスタンスのID'
```

ラーニングインスタンスのIDの確認方法は[こちら](https://qiita.com/IQ_Bocchi/items/6cace9cb462ee2399f51)。

すると、以下のような結果が返ってきます。

![SQL結果.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/e75e3961-ff9e-f1b6-c2f3-4c7b238e3d37.jpeg)

OCREngineDetailsIdに入っている番号が、OCRの番号を表します。

OCRの番号と名前の紐づけは、OCREngineDetailsMasterというテーブルに入っています。
Database ＞ FileManager ＞Tables　配下のOCREngineDetailsMasterを右クリックし、「上位１０００行を選択」すると……
（図のSSMSは英語になっていますが、日本語版をインストールしていれば言語も日本語になっています）
![番号を見る.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/33d4a667-c129-8c71-c1a6-364d629bc8c3.jpeg)


##インスタンスとOCRの対応はDBのどこに入っている？

FileManager配下のProjectOCREngineDetailsMasterMappingというテーブルに入っています。
テーブル名を右クリックして「上位１０００行を選択」をクリックすると……

![Mapping.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/8fc3920d-182a-89a5-b2b3-e75e61e88ee0.jpeg)

以下のように、OCRの番号と名称の対応表が返ってきます。
![OCR番号_結果.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/38394b02-870a-c06e-de3e-44b200f5a9e2.jpeg)

先ほどのインスタンスのOCREngineDetailsIdは3だったので、ABBYYだとわかります。
GASのWebアプリケーションをPOSTで叩くゴミみたいなPerlのプログラム

GASでWebアプリを作り、POSTでJSONを渡して起動する時、curlコマンドを使って

```
$ curl -XPOST https://script.google.com/macros/s/WEBアプリケーションのID/exec -H "Accept: application/json" -H "Content-type: application/json" -d "{\"value\":{\"hate\":\"loses\",\"love\":\"wins\",\"no\":\"contest\"}}" > ~/result.html
```

のように実行すると、以下のようなJSONが渡る。（Webアプリケーションの結果はresult.htmlに残る）

```
{
  "value": 
  {
    "love":"wins",
    "hate":"loses",
    "no":"contest"
  }
}
```

それはいいんだけど、"を\でエスケープするのと、ケツカンマが許されないのと、何より改行が入れられないのが実用的ではない。
curlコマンドを打つだけのChrome拡張機能というのもあるが、いまいちオシャレなGUIに英語で難しいことが書いてあって馴染めなかった。
それで、Perlでゴミみたいなプログラムを作った。

```
#! /bin/perl 
#
# curlit.pl -- execute curl command to launch GAS Web Apps passing JSON by POST method

use strict;
use warnings;

my %json = ( # ここにjsonのキー=>値のペアを書く。キーはベアワードが許される。ケツカンマもあり
    love => "wins",
    hate => "loses",
    no => "contest",
);

my $json = '"{\"value\":{';
for my $key (sort(keys(%json))) {
    $json .= '\"' . $key . '\":\"' . $json{$key} . '\",';
}
$json =~ s/\,$/}}\" /;

my $system = 'curl -XPOST https://script.google.com/macros/s/WEBアプリケーションのID/exec '
    . '-H "Accept: application/json" '
    . '-H "Content-type: application/json" '
    . '-d '
    . $json
    . '> ~/Desktop/new.html';

#print $system; # こっちを活かすと実行するcurlコマンドが標準出力される
print `$system`; # こっちを活かすとcurlコマンドが実行され、結果が標準出力される
```

たぶんJSONを組み立てるモダンなモジュールとか、curlを叩くモダンなモジュールとか、forを使わないでmapとか、いろいろあって、エライ人ならワンライナーで済ませるところだろうけど、自分に合わせてアホみたいな作りにしたので、お好みで改造するがよい。

 ***#いやぁ～Perlってほんっとにフレンドリーですねえ。***

***（この項終わり）***
秒でHello,Flask!できるけど、その中身を知らない人

# はじめに
flaskを始めようとしたときに、一番最初にローカルホストを作って、そこに”hello, flask!”と表示させる。けど、その中身のコードの内容はその時理解できていない人が多いかもしれない。
そこで、一つ一つ意味をしっかりと書いてみた。

# とりあえず、Hello,Falskまで

### 環境
Windows PC
Visual Studio Code ver.1.45.1
Python 3.8

### flaskのインストール
1. cmdを開いて、`pip3 install flask`を入力し勝手にインストール。
2. vscodeを開く。(vscode内の環境構築についてはほかの人の記事を見てください)
3. 以下のpythonコードの`app.py`を作成。

#####python : app.py

```python:app.py
# coding: utf-8
from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello, Flask!"

if __name__ == "__main__":
    app.run()
```

4. その後に出てくるローカルホスト(http://~)にブラウザでアクセス。
5. そこには、

<img width="284" alt="helloflask1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533115/66a6e045-439c-471f-ad4a-6964b7dbfa53.png">

というような画面が出てくる。(余白邪魔だったかな...)

# app.pyについて

```python:app.py
# coding: utf-8
from flask import Flask

app = Flask(__name__)

@app.route("/test")
def hello():
    return "Hello, Flask!"

if __name__ == "__main__":
    app.run(debug=True)
```

### このコードで何をしているのか

```python
from flask import Flask
```
については、flaskというモジュールを読み込む。flaskの中身を話すと話がズレそうなので、ここでは省略。
このとき、



```python
Flask(__name__)
```
このコードは、__name__ というのは、勝手に定義される変数。ファイルのモジュール名が入る。 ファイルをスクリプトとして直接実行したときは __name__ は __main__ になる。

```python
import Flask
```
のみでもよいが、その場合、つぎのコードが

```python
flask.Flask(__name__) 
```
に指定しなければならなくなるので、最初から書いといたほうが楽。

'''python
@app.route("/test")
```
`@app.route()`はURLと関数を関連付けるためのもの。これはhtmlなどとの関連つけたときに、関わってくるものになるので、これ単体ではなんともいえない。
あとのコード内容についてはpythonの基礎的なところなので省略。

# さいごに
僕自身も始めたばかりなので、ミスがあれば教えてください。