OmniAICreator/Qiita-1.07M huggingface dataset:
venvの仮想環境を使い、Djangoでアプリ開発をするときの環境構築手順

久しぶりにWebアプリを新規で作成しようとしたときに、「あれ？どうやるんだっけ？？」ってなってしまうことが多く、備忘録も兼ねてまとめました。

Django公式サイトのチュートリアルの[はじめてのDjangoアプリ作成](https://docs.djangoproject.com/ja/3.2/intro/tutorial01/)からWebアプリケーションを作成する際に必要な箇所だけ抜粋しました。
主に環境構築を中心に記載していきます。

## 開発環境

* OS：Windows10
* エディタ：VS Code
* ターミナル：Winodows PowerShell
* Python：3.9.6

## 1. venvのインストール
今回は「DjangoTutorial」というディレクトリで作業していきます。

まずはディレクトリを作成します。

```powershell
PS C:> mkdir DjangoTutorial
```

作成したディレクトリにvenvをインストールします。

```powershell
PS C:> py -m venv DjangoTutorial
```

「DjangoTutorial」ディレクトリに移動します。

```powershell
PS C:> cd DjangoTutorial
```

## 2. venvのアクティベート
エラーが出てしまうので、下記のコマンドを実行します。

```powershell
PS C:\DjangoTutorial> Set-ExecutionPolicy RemoteSigned -Scope CurrentUser -Force
```

venvをアクティベートします。

```powershell
PS C:\DjangoTutorial> Scripts\activate.ps1
```

## 3. Djangoのインストール
venvの仮想環境にDjangoをインストールします。

```powershell
(DjangoTutorial) PS C:\DjangoTutorial> py -m pip install Django
```

## 4. プロジェクトの作成
プロジェクト名は公式チュートリアルと同様に「mysite」とします。

```powershell
(DjangoTutorial) PS C:\DjangoTutorial> django-admin startproject mysite
```

## 5. Django開発サーバーの起動
Djangoサーバーを起動します。
※公式チュートリアルにも記載されていますが、このDjangoサーバーは本番環境では利用しないでください。

```powershell
(DjangoTutorial) PS C:\DjangoTutorial> cd mysite
(DjangoTutorial) PS C:\DjangoTutorial\mysite> py manage.py runserver
```

Djangoサーバーが起動したら、Webブラウザでアクセスします。
[http://127.0.0.1:8000/](http://127.0.0.1:8000/)

## 6. Django開発サーバーの設定
開発サーバーの言語とタイムゾーンを設定します。
下記のファイルを開き設定を変更します。

mysite\settings.py

```diff_Python
- LANGUAGE_CODE = 'en-us'
+ LANGUAGE_CODE = 'ja'

- TIME_ZONE = 'UTC'
+ TIME_ZONE = 'Asia/Tokyo'
```

## 7. アプリケーションの作成
アプリケーション名も公式チュートリアルと同様に「polls」とします。

```powershell
(DjangoTutorial) PS C:\DjangoTutorial\mysite> py manage.py startapp polls
```

## 8. データベースのセットアップ
データベースの設定を行います。

```powershell
(DjangoTutorial) PS C:\DjangoTutorial\mysite> py manage.py migrate
```

これでアプリケーションの開発を始められます。

## 参考文献
この記事は下記の情報を参考にして執筆しました。

* [はじめてのDjangoアプリ作成](https://docs.djangoproject.com/ja/3.2/intro/tutorial01/)
* 芝田 将（2021年）　実践Django Pythonによる本格Webアプリケーション開発　株式会社翔泳社
【Rails, Docker, Postgresql, Production】本番環境で起動させる

## 目標
本番環境(production)でdockerを用いてrailsを動かす

## 実行内容
* docker-compose.prd.ymlの作成
* database.ymlの変更
* DBの作成
* アセットのプリコンパイル
* ビルド、起動

## 1. docker-compose.prd.ymlの作成
```docker-compose.prd.yml
version: '3'
services:
  db:
    image: postgres
    environment: 
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
      POSTGRES_HOST_AUTH_METHOD: 'trust' #実際にデプロイする場合は使わない
      PGDATA: /var/lib/postgresql/data/pgdata
    volumes:
      - ./tmp/db:/var/lib/postgresql/data
  web:
    build: .
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    environment:
      RAILS_ENV: production　 #これを追加する。
    volumes:
      - .:/app
      - gem_data:/usr/local/bundle
    ports:
      - "3000:3000"
    depends_on:
      - db
volumes:
  gem_data:
```
development環境で動かしていたdocker-compose.ymlとは別で、docker-compose.prd.ymlを作成しwebのenvironmentにはRAILS_ENV=productionを指定する。
また、productionとtestではdatabase.ymlのhost: dbを指定することができるがproductionではできないためとりあえずPOSTGRES_HOST_AUTH_METHOD: 'trust'を設定する。デプロイする際には環境変数を使って設定する。

## 2. database.ymlの変更
```database.yml
production:
  <<: *default
  adapter: postgresql
  encoding: unicode
  pool: 5
  database: app_production
  username: postgres
  password: postgres
```

username, passwordにはdocker-compose.prd.ymlのPOSTGRES_USER,POSTGRES_PASSWORDの値を設定する。(デプロイの際は環境変数を用いる)hostはdocker-compose.prd.ymlでPOSTGRES_HOST_AUTH_METHOD: 'trust'を設定しているため特に設定しない。

## 3. DBの作成
```
docker-compose -f docker-compose.prd.yml run web rails db:create RAILS_ENV=production
```
-f docker-compose.prd.ymlをつけ忘れないように気を付ける。

```
docker-compose -f docker-compose.prd.yml run web rails db:migrate RAILS_ENV=production
```
## 4. アセットのプリコンパイル
```
docker-compose run web rails assets:precompile RAILS_ENV=production
```
本番環境の場合、アセットのプリコンパイルをしておかないと起動しない。
## 5. ビルドして起動
```
docker-compose -f docker-compose.prd.yml build
docker-compose -f docker-compose.prd.yml up
```

## 補足
development環境では読み込まれていた画像が表示されなかったりcssが適用されない,httpのメソッドがDELETEで指定しているのにGETでアクセスされているなどがあった場合 config/environments/production.rbで次のように変更する。

```ruby:production.rb
config.public_file_server.enabled = true
```

## 参考にしたサイト
　[Dockerでコンテナ化したrailsアプリをproductionモードで起動する](https://morelia.tokyo/setup/docker-rails-production)

　[【初めての環境構築】Windows10にRails6+MySQL8.0+Dockerな環境を作ってみた
](https://qiita.com/Kiyo_Karl2/items/25fc1b9ccd9c10bacd0f)

## まとめ
改善点や間違っているところがあればぜひ意見をお願いします!
git pushでPlease use a personal access token instead 的なエラーの解消方法

## 概要

```
remote: Password authentication is temporarily disabled as part of a brownout. Please use a personal access token instead. 
remote: Please see https://github.blog/2020-07-30-token-authentication-requirements-for-api-and-git-operations/ for more information. 
fatal: unable to access 'リポジトリ名': The requested URL returned error: 403
```

ある日突然的なエラーが出て、pushが出来なくなった。

## 解消法

[ここで](https://github.com/settings/tokens) personal access tokenを作成し、メモをしておく。
そしたら、該当リポジトリのルートでoriginを書き換える

```sh
$ git remote set-url origin https://<githubのユーザー名>:<さっき取得したトークン>@github.com/リポジトリ.git
```

でpushが出来るようになる
JetRacer Pro ：ハードウェア関連

# はじめに
制御工学(最適制御のみ)をかじり，車両モデル(Kinematicモデルのみ)にも少し触れた(後日，投稿を予定)ので，これらの知識を活用するために実機実装をしたいと思い，思い切ってJetRacer Proを購入しました．本記事では，購入の過程と稼働までに必要な情報を逐次報告したいと思います．二部構成を想定しており，本記事ではハードウェア関連について述べ，次の記事でソフトウェア関連について記述したいと思います．

なお，JetRacer作成の記事は，
・@CAYKさん ：https://qiita.com/CAYK/items/90142bdade651b34de03
・@Nabeshinさん ：https://qiita.com/Nabeshin/items/99ddcdf8e6a4038e5844
などもあるので，ご参照ください．

とはいえ，JetRacerに関するQiitaの記事は上記以外(たしか)見当たらず，制御理論を適用したという記事も無かったので，報告サンプルの数を稼ぐ意味も込めて本稿を残したいと思います．

# 準備するもの
・JetRacer Pro 
・リチウムイオンバッテリ
## JetRacer Pro
waveshareにてJetson同梱ver.を購入．
購入元リンク： https://www.waveshare.com/product/jetracer-pro-ai-kit.htm
金額：41,960円(Jetson含む)

基本的なやり取りは英語．輸送会社を選択する(FedEx or DHL)箇所がある．価格の安いFedExを選択して購入．


また，購入直後，waveshareの担当の方から「この金額で良いか確認して下さい」とのメールが来た．恐らく，関税などの関係で追加で支払いが発生した際の責任の所在を明確にするためだと思われる．「確認しました!」と返信したら，数日以内に発送してくれた．

## Battery
18650 リチウムイオンバッテリ 4本を準備．
購入元リンク： https://store.shopping.yahoo.co.jp/bldltd/z2jb6kz2ki.html
金額：3860円

※注意点：https://www.waveshare.com/jetracer-pro-ai-kit.htm -> "PACKAGE CONTENT" -> learn moreに記載の以下の画像の通り，バッテリは**"保護回路が付いていないもの"**を購入すること．(保護回路はJetracerの基盤の方に組まれているので安心)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682775/5e7813f4-9869-ca6b-6bba-ea9e5b2524e3.jpeg" width=50%>

# 車両組み立て
基本的に，添付の説明書に沿えば1,2時間もあれば組み上がります．一部，謎な部品が車体(バッテリのちょうど下あたり)にねじ留めされていたせいで，うまく部品がはまらない問題もありましたが，勇気をもってこの謎な部品を外すことで無事に組み上がりました．(この影響で動かなくなった場合は，どこかで追記します．) 

写真を綺麗に見せられるほどの十分な作業スペースがなかったので，組み立て作業中の写真は割愛させていただきます．
写真を見ながら行いたい場合は，@CAYKさんの記事をご参照ください．
(@CAYKさんの記事では，「ねじが一部足りなかった」とのご報告がありましたが，僕の場合は幸運なことに全て揃っていました．)

# 車両諸元
車両制御に向けて必要になる諸元についても記述しておこうと思います．
(後日，追加予定)
GASで東京都オープンデータカタログから新型コロナウィルス陽性患者数を取得

#はじまり
東京都の新型コロナ陽性者数を日別でグラフ化したり、前日比、先週比、速報値などの情報をGASを使って毎日、自動的に自分のスマホへ通知したいなという動機が事の始まりです。

#情報元
まず、日毎のデータですが、東京都では[東京都オープンデータカタログサイト](https://portal.data.metro.tokyo.lg.jp/)にて情報開示しており、コレを活用することで調べる事ができます。
APIについては、[オープンデータAPIについて](https://portal.data.metro.tokyo.lg.jp/opendata-api/) にある **`/Covid19Patient`**`新型コロナウイルス陽性患者発表詳細` を利用すると日々の陽性者数を取得できます。

データを取得する際、ポイントとなるのが最大取得レコード数（上限:1000件）を超える場合、パラメータcursorの値には、前レスポンスで取得した`endCursor`値をURLエンコードしてからリクエストする必要があります。
※取得した`endCursor`値をそのまま当て込んでもその後のデータは得られません。

# コード.gs
```javascript
// メインの処理
function main() {

  // 前日は引数を1
  var date = getTargetDate(1);
  var object = getAPItoXML(date, date);

  // 性別毎の患者数を集計
  var group = object.reduce(function (result, current) {
    var row = result.find(function (x) {
      return x.gender === current['患者_性別']
    });

    if (row) {
      row.count ++;
    } else {
      result.push({
        gender: current['患者_性別'],
        count: 1,
      });
    }
    
    return result;
  }, []);

  // 日付と患者数
  Logger.log(Utilities.formatString("%s --> 患者数：%s", Utilities.formatDate(date, 'JST', 'yyyy-MM-dd'), object.length));
  // 性別毎の患者数
  Logger.log(group);
}


// リクエスト処理
function getAPItoXML(inFrom, inTill) {

  var wkPayload = {
    // 日付（公表_年月日)による絞り込み (自)
    'from' : Utilities.formatDate(inFrom, 'JST', 'yyyy-MM-dd'),
    // 日付（公表_年月日)による絞り込み (至)
    'till' : Utilities.formatDate(inTill, 'JST', 'yyyy-MM-dd'),
    // 最大取得レコード数 (上限:1000)
    'limit' : 1000
  };

  var wkResponse = UrlFetchApp.fetch(getParamUrl(wkPayload));
  var wkJson = JSON.parse(wkResponse.getContentText());
  var wkRes = wkJson[0];
  var wkEndCur = wkJson[1];

  while(wkEndCur['moreResults']==='MORE_RESULTS_AFTER_LIMIT'){
    // 相手サーバーへの負荷を抑制するため5秒待つ
    Utilities.sleep(5000);
    // 取得レコードがlimitを超える場合、前のレスポンスにおける"endCursor"の値を指定
    wkPayload['cursor'] = wkEndCur['endCursor'];
    wkResponse = UrlFetchApp.fetch(getParamUrl(wkPayload));
    wkJson = JSON.parse(wkResponse.getContentText());
    wkEndCur = wkJson[1];
    // 取得データをマージする
    wkRes.push(...wkJson[0]);
  }

  return wkRes;
}

// 日数から日付型データを取得
function getTargetDate(inInt) {
  var date = new Date(); //現在日時のDateオブジェクトを作る
  var day = date.getDate();
  date.setDate(day - inInt);
  return date;
}

// パラメータはURLエンコードしてURLを生成
function getParamUrl(inArray) {
  var arr = [];
  for(var key in inArray) {
    // 値はURLエンコードする
    arr.push(key + "=" + encodeURIComponent(inArray[key]));
  }
  var url = 'https://api.data.metro.tokyo.lg.jp/v1/Covid19Patient' + "?" + arr.join("&");
  return url;
}
```

#結果
![スクリーンショット 2021-07-29 1.16.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209706/7550d317-bb99-b868-22d0-7d8b5a970a70.png)

#注意点
東京都オープンデータカタログを速報値として利用するには、更新のタイミングが遅いため正直、向いていません。
概ね20時過ぎに更新されるている様なので、速報値は[東京都福祉保健局のTwitter](https://twitter.com/tocho_fukuho)を見た方が早いです。
Twitterアカウントでは、毎日16:45〜46のタイミングで速報値を発表されています。
また、希に当日データの値が速報値より少ない事があったり、22:00過ぎても更新されなかった事がありますが、翌日には修正されています。
SQLのCASE式を使ってテーブル同士のマッチングを行うテクニック

## ポイント

- CASE式の大きな利点は **式を評価できること**
    - なので、CASE式の中で、BETWEEN、LIKE、`<`、`>`と言った述語群を使用できる
    - 特にこれが便利： `IN`と`EXISTS`はサブクエリを引数に取れるので非常に強力です

## 実例

イメージ 店舗とその最寄駅データの中間テーブルのようなものをイメージして欲しいです。

| 店舗id | 駅id | 最寄駅フラグ |
|--------|------|--------------|
| 1      | 22   | 1            |
| 1      | 23   | 0            |
| 2      | 5    | 1            |
| 3      | 123  | 1            |
| 4      | 34   | 0            |
| 4      | 35   | 1            |
| 4      | 36   | 0            |
| 5      | 23   | 1            |




```sql
SELECT s.name,
	CASE WHEN s.id IN (
                   SELECT shop_id FROM reserves
                   WHERE created_at BETWEEN '2021-01-01' AND '2021-01-31') THEN 'o' ELSE 'x' END AS '2021/1',
	CASE WHEN s.id IN (
                   SELECT shop_id FROM reserves
                   WHERE created_at BETWEEN '2021-02-01' AND '2021-02-28') THEN 'o' ELSE 'x' END AS '2021/2',
	CASE WHEN s.id IN (
                   SELECT shop_id FROM reserves
                   WHERE created_at BETWEEN '2021-03-01' AND '2021-03-31') THEN 'o' ELSE 'x' END AS '2021/3'
FROM shops AS s
```

## 結果

店舗ごと各月の予約のある無し状況のクロス集計表が作れます。（わけわからんクロス表であることはご愛敬）

| name             | 2021/1 | 2021/2 | 2021/3 |
|------------------|--------|--------|--------|
| 名古屋店          | o      | o      | o      |
| 横浜店             | o      | o      | o      |
| 新宿店  | o      | x      | x      |

## SQLのEXISTSとinの違い

EXISTSは、存在するかどうかだけを判定するのに対し、INは条件に当てはまるデータを全て抽出します。

また、INはカラム名を指定するのに対して、EXISTSは無指定でOK。

```sql
SELECT s.name,
	CASE WHEN EXISTS (
		SELECT r.shop_id FROM reserves AS r
		WHERE r.created_at BETWEEN '2021-01-01' AND '2021-01-31'
		AND r.shop_id = s.id
		) THEN 'o' ELSE 'x' END AS '2021/1',
	CASE WHEN EXISTS (
		SELECT r.shop_id FROM reserves AS r
		WHERE r.created_at BETWEEN '2021-02-01' AND '2021-02-28'
		AND r.shop_id = s.id
		) THEN 'o' ELSE 'x' END AS '2021/2',
	CASE WHEN EXISTS (
		SELECT r.shop_id FROM reserves AS r
		WHERE created_at BETWEEN '2021-03-01' AND '2021-03-31'
		AND r.shop_id = s.id
		) THEN 'o' ELSE 'x' END AS '2021/3'
FROM shops AS s

```

`IN`と`EXISTS`では、`EXISTS`の方がパフォーマンスが優れています。
なので、テーブルのサイズが大きい場合は、`EXISTS`を使うようにしましょう。

## 参照

https://www.amazon.co.jp/dp/4798157821/

16-18p

## アウトプット100本ノック実施中

https://qiita.com/ryosuketter/items/713474dbd009870e4103
mozc ut2のインストールに手こずりまくった話

## mozc ut2のインストールできなくて3日(このときは諦めた)と3時間(今回)かかったんだが

私と同じような状態になってしまった人のために書きました
誰かの役に立てたら幸いです

## 動作環境とか

```
Ubuntu 20.04.2 LTS
```

## まずやったこと

`ubuntu 20.04 mozc ut2`で検索して一番上に出てきた[このサイト](https://sicklylife.jp/ubuntu/2004/mozc_ut2.html)の通りにソースコードのダウンロード、展開、ビルドをやった
ここで問題が発生した

```
mv: 'out_linux' を stat できません: そのようなファイルやディレクトリはありません
```

ほう…
ログを遡ってみると

```
ninja: fatal: chdir to 'out_linux/Release' - No such file or directoryinstall
```

なるほど
この`out_linux/Release`がいない、もしくはつくられていないのか…

このあとこれらのエラーの原因を調べまくっているとpythonコマンドを実行した時に動くのがpython2系じゃないといけないということが発覚
`sudo apt install python-is-python2`を実行してみるもだめ…
シンボリックリンクを書き換えてpythonをpython2にするもだめ…

## それからやったこと

とかなんやかんやしてるうちに[このサイト](http://baker-street.jugem.jp/?day=20170407)に到達する
2017年のサイトだし流石に…と思いながらサイトの通りやってみると
なんかできた
aptのログを見る限り`python-is-python3`を消してるのか
消さなきゃだめだったのかなぁ

ちなみにここのapt-getをそのまま実行するとパッケージがなかったりするので次のようにするのをおすすめする

```
$ sudo apt install libgtk2.0-dev debhelper libibus-1.0-dev build-essential libssl-dev libxcb-xfixes0-dev python-dev gyp protobuf-compiler libprotobuf-dev libuim-dev libzinnia-dev fcitx-libs-dev devscripts ninja-build
```

## まとめ

と、言うことでmozc ut2が入ったのでめでたしめでたし
これ、深夜テンションで書いたから文章変になってそう

## 参考文献

 - https://sicklylife.jp/ubuntu/2004/mozc_ut2.html
 - http://baker-street.jugem.jp/?day=20170407
Fargateにsshできるワンライナー

`xargs -a <(aws ecs list-tasks --cluster=[your cluster name] --service-name=[your service name] | jq '.taskArns[0] | split("/")[2]') -I{} aws ecs execute-command --cluster [your cluster name] --task {} --container [your container name] --interactive --command '/bin/sh'`

list-tasksで取得できる一番古いfargateタスク内の特定のコンテナにsshできます。
最初はlist-tasksの結果をパイプでxargsに渡していましたがこれだと `Cannot perform start session: EOF` となり失敗するはずです。

参考にした記事: https://stackoverflow.com/questions/30044927/xargs-exec-command-with-prompt
Windows10で日本語が入力できなくなるときの対応

# 0.背景

ふとした時に，半/全角キーを押しても「`（バッククォーテーション）」が入力されるだけで，日本語入力ができなくなる現象がありました．
「入力言語」または「キーボードレイアウト」が何かしらの原因で変わっているということで，その解決方法(の一部)を記述しておきます．

なおWindowsのVersionは __20H2__です．バージョンが異なると設定の項目が変わっていることがあります.
参考元ページを見てください．
参考元: https://qiita.com/ynott/items/eca99ed763752316a128

# 1.PCを起動するたびになる場合

可能性は以下の二つです．

- 入力言語の上書きが日本語になっていない
- キーボードレイアウトが日本語キーボード[106/109キー]になっていない（あるいは英語キーボードになっている，使用してるキーボードとあっていない等）

### 入力言語の上書きを日本語にする

1. Windowsの「設定」→時刻と言語
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481835/8aa51432-6c10-1d85-ad29-c32a13b62395.png)

1. 「言語」タブを選択→「優先する言語」で上下矢印をクリックして日本語が一番上になるようにします．
※必要ないならば，日本語以外の言語を消すのもあり
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481835/2026d35b-b8e4-582c-d123-4394ab24f72b.png)

1. 「キーボード」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481835/ea4805a2-bbe1-f3d3-e401-3a352ecf90fa.png)

1. 「既定の入力方式の上書き」を「言語リストを使用」または「日本語」を選択します
※「言語リストを使用」は使用している入力言語のキーボードレイアウトに合わせます（つまり言語ごとに変更可能）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481835/9b47489f-c62a-4ca2-b5ea-9d58df0760ad.png)

### 各言語のキーボードレイアウト設定

先の「言語」タブにて

1. 「優先する言語」リスト内「日本語」の「オプション」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481835/722b4f53-f02a-558a-60f5-225d6e914379.png)

1. ハードウェアキーボードレイアウトを変更する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481835/aac04c51-42ff-150b-f520-61a9d4712174.png)

1. たいていの場合は106/109キーです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481835/76aae762-7fc2-d9bb-bab6-7785ad26ba5f.png)


# 2.気がついたら入力言語が(ENGなどに)変わってる場合
日本語入力ができなくなり，焦りますが
[Alt]+[Shift]キーで入力言語を切り替えるホットキーがデフォルトで有効になっています．
何かのアプリのショートカットや，ゲームでの操作でAltとShiftだけを同時に押した可能性があります．
ちなみに，[Windows]+[Space]キーでも切り替わりますが，こちらの可能性は薄いでしょう．

### [Alt]+[Shift]を無効にする(あるいは設定を変える)方法

1. Windowsの「設定」→時刻と言語
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481835/8aa51432-6c10-1d85-ad29-c32a13b62395.png)

1. 「言語」タブを選択→「キーボード」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481835/ea4805a2-bbe1-f3d3-e401-3a352ecf90fa.png)

1. 入力言語のホットキー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481835/c5b134c2-6520-c155-f6a1-c87a39e635e9.png)

1. 「入力言語を切り替える」選択して「キーシーケンスの変更」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481835/63f43419-f384-19be-ce5d-17d9b2638e7e.png)

1. 入力言語の切り替えを「割り当てなし」にする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481835/bb3ee33c-fe21-d5cd-7cdb-b5f3ca799f24.png)
ついでにキーボードレイアウトの切り替えも「割り当てなし」にしておくといいでしょう．

### おまけ：キーボード設定までの別ルート
1. Windowsの「設定」→デバイス
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481835/101b6a9a-c78c-e1f2-471d-03f1d78926fe.png)

1. 「入力」タブ→下にスクロールして「キーボードの詳細設定」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481835/89a821e3-6d16-1ec9-7b0c-112255446906.png)
tailwindでデフォルトのカラーを維持しつつ、カスタムカラーを追加する方法

## 環境
Laravel Mix v6.0.25

## やり方

`tailwind.config.js`に以下の部分を追加

```tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
    theme: {
        colors: {
            transparent: 'transparent',
            current: 'currentColor',
            black: colors.black,
            white: colors.white,
            gray: colors.coolGray,
            red: colors.red,
            yellow: colors.amber,
            green: colors.emerald,
            blue: colors.blue,
            indigo: colors.indigo,
            purple: colors.violet,
            pink: colors.pink,
            // カスタムカラーを追加できる
            primary: '#5c6ac4',
            secondary: '#ecc94b',
            // ...
        }
    },
```

colorsの下にカスタムカラーだけを追加すると、デフォルトの色が読み込めなくなってしまったので、別途デフォルトの色を定義しました。`const colors = require('tailwindcss/colors')`はデフォルトカラーを読み込むために必要。yellowがamberだったり、grayがcoolGrayだったりして少し紛らわしい。
ソリューションアーキテクトプロフェッショナル(SAP)合格までの勉強

# ソリューションアーキテクトプロフェッショナル(SAP)合格のための勉強

## 概要
ソリューションアーキテクトプロフェッショナルに合格したので、
勉強方法など、これから受ける方が少しでも役に立つと嬉しいなと思い記載します。
(他のSOA合格系の記事とかぶっている内容が多いかもしれないです。)

## SAPを受けたときの知識や技術レベル

- SAA取得(2020-09)
- SOA取得(2021-02)
- 職場で、1年程度AWSのサービスを使用し開発運用を行う(Lambda、RDS、ECS、ELB、EC2などの基本的なサービス)
- エンジニア歴は3年程度(サーバーサイド)

→ SAP取得は2021/8
 半年に1回くらいのペースで受験したいなという感じで計画しています。

## 勉強方法

### - Web問題集
#### [Amazon Web Service WEB問題集で学習しよう](https://aws.koiwaclub.com/)

- 1~3回は普通にno1から最後まで繰り返し問題をとく(解説に貼っているAWSの公式ドキュメントをちゃんと読み込む)
- ↑以降は75問を3時間以内と決めて一気に解いてみたり(どの問題が間違っているかはメモする)、1時間で何問題できるか試したりして本番試験へのシュミレーションを行う。<br>
※ 問題集内にも、AWS認定試験モード的なのもあるのですが、正答率がわかるだけで、どの問題が間違ったかわからないという記載があったので、上記のようなやり方をしました。

3ヶ月ごとの契約になるので、この問題集にお金を払ってから3ヶ月後に試験を受けるというリミットを設けることも
自分にとっては、良い追い込み要因となりました！

### - 参考書

#### AWS認定ソリューションアーキテクト-プロフェッショナル ~試験特性から導き出した演習問題と詳細解説

- 本書の内容をサラッと読む
- 解説中に織り込まれている問題を解く
- 巻末問題集を3時間はかってやってみる(試験の2週間前くらいに行い、68%くらいの正答率だった...)

### - [AWS サービス別資料](https://aws.amazon.com/jp/aws-jp-introduction/aws-jp-webinar-service-cut/)

- 上記参考書でサービスのイメージがしにくいものや、正答率が悪いサービスの内容を繰り返し視聴
- 動画が多いので、倍速で見て重要なところだけ止めたりメモしたりした
- スライドだけを見て、要点を理解するなど

## 意識して勉強したこと

AWSは本当にたくさんのサービスがあるため、なにか問題を解決したいと思った時にたくさんの選択肢があります。
なので、このサービスを使うと、コスト面でメリットがある。
ただ、リアルタイムには処理できないよねというような、サービスごとの細かい違いを理解するようにしました。

わかりにくい内容は、AWSの公式ドキュメントに記載されている図などを実際に書き起こしたりしました。

## 勉強時間

勉強時間は120-150時間程度
3ヶ月間、平日は1~2時間、週末に3~5時間程度の勉強をしました。

## 模擬試験

SAAを受けた時にバウチャーをもらっていたので1回だけ無料で受けました。
試験の1週間前に受けましたが、自宅で緊張感なく受けたのか正答率は55%でした...

## まとめと感想

SAPの受験中、絶対に落ちたなと思いながら試験を受けました。(途中で帰ろうか本当に悩みました)
ただ、やはり受験料も高いし、何回も受けたくないという思いからわからなくても、選択肢を消去法で絞り、
こちらの選択肢のほうが可能性が高い！という点を探りながら諦めずに問題をときました。
そして、時間ギリギリまで見直しを行ったところ、まさかの合格でした。

自分が一番驚くくらいの合格だったので、説得力はありませんが、
絶対これという選択肢が見当たらなくても、各サービスの特徴と、問題文で何を解決したいかの意図を読み取り、選択肢を絞っていくことが大切なのかなと感じました。

次はDVA→DOP受験したいな...
DBに暗号化した値を保存する場合は保存のメソッドに暗号処理を組み込む

###備忘録

nestJSで暗号化した値をDBに保存する場合はControllerで暗号化を行うべきではない。
理由：保存前に必ず実行されるようにするため、また他の場面で保存処理が必要になっても実装漏れの可能性を下げられるため。
基本情報技術者試験勉強0817

基本情報処理技術者試験勉強
平成19年春過去問
平成19年秋過去問
間違えた問題の復習
AWSの本を読む

PDPC法(Process Decision Program Chart)は、ある計画における目的達成のためのすべてのルートを図解で表すことで、最適ルートを決定するための方法です。

パレート図は、値の大きい順に分析対象の項目を並べた棒グラフと、累積構成比を表す折れ線グラフを組み合わせた複合グラフで、主に複数の分析対象の中から、重要である要素を識別するために使用されます。

クライアントサーバシステム　サーバは，必要に応じて処理の一部を更に別のサーバに要求するためのクライアント機能をもつことがある。

ARP IPアドレスからMACアドレスを得るプロトコルである

ジャーナルファイル　データベースの更新前や更新後の値を書き出して，データベースの更新記録として保存するファイルはどれか。

上流　要求分析の支援機能が含まれる。

HDLC手順　文字符号だけでなく，任意のビットパターンも伝送可能である。

運用テスト　完成プログラムを本稼働環境下で試行するテストであり，原則としてユーザ部門の責任で行う。

XM L ネットワークを介した情報システム間のデータ交換を容易にするために，任意のタグを定義することができる。

ベクトルコンピュータ　一つの命令で配列中の複数のデータを同時に演算する。

NAS 複数のプロトコルに対応しているので，異なるOSのサーバ間でもファイル共有が可能である。

Bluetooth  接続コードを使用せずに，手元のPCから，間仕切りで隔てられた隣のPCへ画像ファイルを転送したい。このとき，利用できるインタフェースはどれか。

ARP(Address Resolution Protocol)は、IPアドレスから対応する機器のMACアドレスを取得するプロトコルです。

データウェアハウス　企業の様々な活動を介して得られた大量のデータを目的別に整理・統合して蓄積しておき，意思決定支援などに利用するもの。

シリアルATA ポートマルチプライヤを用いてポート数が拡張できる。

DFD 適用業務をデータの流れに注目して視覚的に表現したもの

関係データベース　データを表として表現する。表間は相互の表中の列の値を用いて関連付けられる。

ディスクストライピング　並列にアクセス可能な複数台の磁気ディスクに，各ファイルのデータを一定サイズのブロックに分割して分散配置し，ファイルアクセスの高速化を図る手法

ベンチマーク　性能評価のために複数種類のベンチマークテストを実行することは，システム性能の特徴を理解することができるので，導入機種の選定に有効である。

CMMI ソフトウェア開発組織及びプロジェクトのプロセスの成熟度を評価するためのモデルである。

EDIを実施するため情報表現規約で規定されるべきものはどれか。　メッセージの形式

ソーシャルエンジニアリング　緊急事態を装う不正な手段によって組織内部の人間からパスワードや機密情報を入手する行為

サブネットマスク　ホストアドレス部の情報を分割し，複数のより小さいネットワークを形成するために使用する情報である。

プログラム記憶方式　プログラムを主記憶に読み込んでおき，CPUが順次読み出し実行する方式はどれか。

データマイニング　大量のデータを統計的，数学的手法で分析し，法則や因果関係を見つけ出す技術。

相関係数　すべての標本点が正の傾きをもつ直線上にあるときは，相関係数が＋1になる。

各種言語プロセッサ　ジェネレータは，入力・処理・出力などの必要な条件をパラメタで指示することによって，処理目的に応じたプログラムを生成する。

E-R図　業務で扱う情報を抽象化し，実体及び実体間の関連を表現する。
LeetCode "46. Permutations"をPythonで解いた話



#問題

>
>整数の配列numsが与えられています。それぞれの整数は1個ずつしかありません。ありうるすべての順列を答えてください。答えは、好きな順番で大丈夫です。
>

こちらから挑戦できます。
https://leetcode.com/problems/permutations/

#方針

ライブラリーを使ってはいけないという注意書きがないので、itertoolsを使います。

```py

from itertools import permutations

class Solution:
    def permute(self, nums: List[int]) -> List[List[int]]:
        return permutations(nums, len(nums))

```
結果:**Success**

![successWithLibrary.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1851956/5c89718c-93df-6ae1-b284-67777cd443aa.png)


やったぜ！

#おまけ：itertoolsを使わないで解けるか？

方針：
queueを使って全探索をします。
同じ個所を2回以上探索しないように、足跡を集合で管理します。

```py

import queue

class Solution:
    def permute(self, nums: List[int]) -> List[List[int]]:
        if len(nums) == 1:
            return [nums]
        
        wake = set()
        comp = set()
        set_nums = set(nums)
        len_nums = len(nums)

        q = queue.Queue()

        for num in nums:
            q.put(tuple([num]))

        while not q.empty():

            cur = q.get()
            set_cur = set(cur)
            uncharted_nums = set_nums - set_cur

            for num in uncharted_nums:
                candidate = cur + tuple([num])

                if len_nums == len(candidate):
                    comp.add(candidate)
                    continue

                if candidate not in wake:
                    wake.add(candidate)
                    q.put(candidate)

        return list(comp)

```
結果:**Success**
![successWithoutLibrary.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1851956/4398344a-b276-b6a7-d17a-363fcc600d8c.png)


やったぜ！
【Nuxt.js #3】プロジェクトの設定手順-BootStrapの導入-

#手順1
Visual Studio Codeの「ターミナル」より以下3つのコマンドを入力・実行する。

※ターミナルが開いていない場合は、メニュ→「ターミナル」→「新しいターミナル」を選択してターミナルを開く。

```
npm install node-sass@5.0.0
npm install sass-loader@10.1.1
npm install bootstrap-vue
```

#手順2
nuxt.config.jsonの「modules」に以下のように追記する。

```
  modules: [
    'bootstrap-vue/nuxt',
  ],
```
以上
GitHubのWikiをfork先に取得（備忘メモ）

`[master-repo]/CoolCode`を fork して、`[my-repo]/CoolCode`が出来ているとする。

1. `[my-repo]/CoolCode`で Wiki を開始(Create the first page)しておく。

1. 下記コマンドを実行する。

```sh
git clone https://github.com/[my-repo]/CoolCode.wiki.git
cd CoolCode.wiki
git pull --rebase https://github.com/[master-repo]/CoolCode.wiki.git master
git push --force-with-lease origin master
```

参考
https://gist.github.com/larrybotha/10650410
Ionic + Angular で StackingModalを実装する


Ionic Frameworkで↓のようなStackingModalを実装する機会があり、備忘録として実装方法を書いていきます。
StackingModalではモーダルを複数積み重ねていくことが可能で、スワイプでモーダルを閉じることができます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184653/0508a8aa-89f5-6a94-7224-730a59d2ad32.png" width="200px"　>

- version
  - Angular 11.2.6
  - ionic/angular 5.3.3

### ion-modalでモーダルを作成し、モーダルにPropsを渡す

`ionic/angular`のModalControllerとIonRouterOutletを利用してモーダルを作成します。
`swipeToClose`プロパティに`true`を指定することで、スワイプでのクローズを可能にします。
`presentingElement`プロパティに`this.routerOutlet.nativeEl`を渡すことで、StackingModalになります。
モーダルにPropsを渡したい場合、`componentProps`から渡すことが可能です。
※StackingModalはiOSのみで有効です。

```typescript:sample.component.ts
import {
    IonRouterOutlet,
    ModalController
} from "@ionic/angular";
...
export class SampleComponent implements OnInit {
    constructor(
        private modalCtrl: ModalController,
        private routerOutlet: IonRouterOutlet
    ) {}
    /**
     * モーダルの作成と表示
     */
    async presentModal(): Promise<void> {
        const modal = await this.modalCtrl.create({
            component: SampleModal,
            cssClass: "sample-modal",
            swipeToClose: true,
            presentingElement: this.routerOutlet.nativeEl,
            id: "SampleModal",
            componentProps: { 
                sampleProps: "sample",
                sampleProps2: "sample2",
                .....
            }
        });
        await modal.present();
   }

```

### 親Componentから渡ってきた `componentProps` をモーダル側で取得する
モーダル側で`componentProps`で渡ってきた値を取得する際は、`@Input`を使用します。
モーダルを閉じたい場合、`dismiss()`を使用します。
親ComponentにOutputしたいデータがある場合、`dismiss()`の第一引数に指定することで、親Componentに渡すことが可能です。

```typescript:sample-modal.component.ts
...
export class SampleModal implements OnInit {
    constructor(private modalCtrl: ModalController) {}
    
    @Input()
    sampleProps: string;

    @Input()
    sampleProps2: string;

    // 親Componentに渡したいデータ
    sampleData = { dismissed: true }

    // モーダルをCloseする
    dismiss() {
        this.modalCtrl.dismiss(this.sampleData, null, "SampleModal").then();
    }

}
```

### 親Componentでモーダルから渡ってきたデータを取得
`onWillDismiss`または`onDidDismiss`を使用して、モーダルから渡ってきたデータを取得します。
`onWillDismiss`はモーダルが閉じる前にEmitされ、`onDidDismiss`はモーダルが閉じた後にEmitされます。

```typescript:sample.component.ts
...
    async presentModal(): Promise<void> {
        const modal = await this.modalCtrl.create({
            component: SampleModal,
            cssClass: "sample-modal",
            swipeToClose: true,
            presentingElement: this.routerOutlet.nativeEl,
            id: "SampleModal",
            componentProps: { 
                sampleProps: "sample",
                sampleProps2: "sample2",
                .....
            }
        });
        await modal.present();

        // Modalから渡ってきたデータを取得
        const { data } = await modal.onDidDismiss();
        console.log(data);
   }
```

以上、AngularとIonicを使用した、StackingModalの実装例でした。

参考
https://ionicframework.com/docs/api/modal
pipenv install時に"AttributeError: 'NoneType' object has no attribute 'url'"が出た際の対処法

`pipenv install -dev`を実行して、次のエラーが出た。

```
AttributeError: 'NoneType' object has no attribute 'url'
```

（このエラーの前に、`Successfully created virtual environment!`というメッセージと長いスタックトレースが表示されています。）

原因は、`--dev`ではなく`-dev`と入力したためでした・・・。
develop packageをインストールする際に使うオプションは`--dev`もしくは`-d`です。

参考：https://github.com/pypa/pipenv/issues/4582#issuecomment-896343811
JavaScriptで複数の画像を読み込む新しい方法

JavaScriptで複数の画像を読み込みたい。しかも高速に。
初心者にとっては鬼門の処理ですが、2021年現在だとこのように書きます。

```js:loadImages関数
function loadImages(list){
    async function load(src){
        const img = new Image()
        img.src = src
        await img.decode()
        return img
    }
    return Promise.all(list.map(src => load(src)))
}
```

- 「画像の読み込みが完了したら」といえばonloadが定番でしたが、現在は[decode()](https://developer.mozilla.org/ja/docs/Web/API/HTMLImageElement/decode)がオススメです。
- [Promise.all()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/all)を使うと、非同期処理を並列に実行して結果を受け取ることができます。

```js:使い方※async関数内で使ってね
const images = await loadImages(['./1.png', './2.png'])
```
引数に読み込みたい画像のパスが入った配列を渡します。
最終的な戻り値は**配列**です。img要素が順番に入ってます。
プログラムのNGな名付け

# 嘘つき

```ts
/**
 * 名前と中身が合っていない(変数)
 */
const foo = getHoge();

/**
 * 名前と中身が合っていない(関数戻り値)
 */
function getHoge() {
    return "foo";
}

/**
 * 名前と中身が合っていない(関数処理)
 * ※名称以外の役割を持っている
 */
function updateHoge(const item) {
    // 更新処理
    update(item);

    // 更新した情報を取得
    return getItem();
}

/**
 * リストなのに単数形
 */
const item = getList();
```


# 意味がない
```ts
/**
 * 何が代入されているかわからない
 * ○: const hoge = getHoge();
 */
const a = getHoge();

/**
 * 何が返されるかわからない
 * ○: getHoge()
 * ○: class Hoge { get() {} } ※クラス名を省略(何をgetしたいか理解できる)
 */
function getData() {}

/**
 * 型の総称だけ
 */
const str = "";

/**
 * 限られたスコープの場合は許容
 */
for (let i = 0; i < 1; i++) {}

/**
 * 数行でお役御免に場合はOK
 * (いい例が思い付かなかった)
 */
function getHoge(const hoge) {
    let result = "";
    if (hoge) {
        result = hoge;
    }
    return result;
}
```


# 省略形

```ts
/*
 * response? result?
 * 文脈で見ればわかるけどさ...
 * ○: result
 */
const res = "result";

/**
 * あと少し!なぜ略す?
 * (いい例が思い付かなかった)
 * ○: response
 */
const resp = "response";

/**
 * 一般用語となっているものはOK
 */
const id = "ID";
```

# 余計な情報
```ts
/**
 * なぜStringだけ`str`をつける？
 * ○: hoge
 */
const hogeStr = "";

/**
 * 機能IDを付ける
 */
class A001Hoge {}
```

# 動詞
```ts
/**
 *　動詞が後になっている
 * ○: getItem()
 */
function itemGet() {}

/**
 * 動詞にするところを名詞にしている
 * ○: calculateTotal()
 */
function calculatorTotal() {}

```

# NEW

```ts
/**
 * 新しく定義するモノだからと安易に new と付けない
 * 何が新しくなったのかわからないし、そのうち新しいモノではなくなる
 * ○: ファイル分割、適切な名称付け etc
 */
const newHoge = "";
const hoge = "";
```
Railsチュートリアル[6版]8章｜現在ログイン中のユーザーを返す処理について

Railsチュートリアルの8章のリスト1-6に出てきたログイン中のユーザーを返す処理について、特にコードを省略してる部分がわかりにくかったので自分用にまとめます。

```ruby
module SessionsHelper
    #渡されたユーザーでログインする
    def log_in(user)
        session[:user_id] = user.id
    end
    
    #現在ログイン中のユーザーを返す(いる場合)
    def current_user
      if session[:user_id]
        @current_user ||= User.find_by(id:user_id)
      end
    end
end 
```

##ログイン中のユーザーを返す処理

まず、log_in(user)メソッド内の**session[:user_id]**という表現に戸惑いますが、sessionはRailsで事前に定義されているメソッドです。session[:user_id] = user.idを実行するとユーザーのブラウザ内の一時cookieに暗号化済ユーザーIDが自動で作成されます。

current_userメソッド内では奇妙なif文が書かれていますが、まず、ログイン中のユーザーがいる場合をif session[:user_id]で判定します。ここまではわかります。

その直後に、つまりログイン中のユーザーが存在すると判定した場合、@current_user ||= User.find_by(id:user_id)という**省略記法**が入ってきます。これが難しい。

この記法を分解すると以下のコードになります。これは見覚えのあるコードではないでしょうか。

```ruby
if @current_user.nil?
  @current_user = User.find_by(id: session[:user_id])
else
  @current_user
end
```

@current_userがnilだった場合にUser.find_byメソッドを使い中身を@current_userに代入します。nilではなかった場合、つまり中身が入っていた場合は@current_userをそのまま使います。

このように分解したコードを省略すると次のようになります。

```ruby
@current_user = @current_user || User.find_by(id: session[:user_id])
```

||はOR演算子です。@current_userがnilであればUser.find_byメソッドが実行されます。また、@current_userに中身が入っていればtrueとなり、次のUser.find_byは実行されず処理は終了します。(当たり前ですが)省略前と同じ処理ですね。

もう１段省略したコードが最初に紹介したもので、この記法が王道とのこと。

```ruby
@current_user ||= User.find_by(id: session[:user_id])
```

2つめの@current_userが省略されて、さらに条件が||=と不思議なことになっています。

この記法になる理屈としては、x = x + 1という変数に加算する式をx += 1と書き換えることができることと同じということですが、まさに上の加算式と同様に**慣れる**しかなさそうですね。

##まとめ

今回は@current_user ||= User.find_by(id:user_id)の記法がテーマの記事でしたが、地味にsession[:user_id] = user.idも戸惑う点でした。

この省略記法に関しては慣れるしか無いのも厄介なところです。というかRubyは()や{}とか筆頭に省略するところが多くて、ちゃんと処理を追おうと思ったら結構頑張らなければいけませんね。

わざわざuser.find_byを使ってデータ取り出して@current_userに入れる理由ですが、メソッド呼び出しを繰り返し呼び出すことを避けるためです。こうすることで処理速度の効率化につながるとのこと。
【Nuxt.js #2】Nuxt.jsのプロジェクト作成手順

Nuxt.jsのプロジェクトを作成する手順を記載します。
※今回は最小構成で作成しているので、必要に応じて設定は後から変更してください。

#手順1
Visual Studio Codeのメニューより　→　「ファイル」　→　「フォルダを開く」　→　
プロジェクトの親階層となるフォルダ（任意）を選択する。

※今回は例として、Cドライブ配下に「nuxt」フォルダを作成し、選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1866473/05408a75-cf98-cb93-72ab-9fda4b4efc80.png)

#手順2
Visual Studio Codeのメニューより「ターミナル」→「新しいターミナル」を選択　→
以下のコマンドを入力・実行する。

※"project-name"部分は、任意のプロジェクト名を指定する。

```
npx create-nuxt-app project-name
```

#手順3
プロジェクト作成中にターミナル上でいくつか質問されるので、以下の通りに回答する。

```
? Project name: (project-name) 
　　→　（何も入力せずに、Enter）

? Programming language: (Use arrow keys)
	> JavaScript
	TypeScript

? Package manager: 
	Yarn
	> Npm

? UI framework: (Use arrow keys)
	> None
	  Ant Design Vue
	  BalmUI
	  Bootstrap Vue
	  Buefy
	  Chakra UI
	  Element
	  Framevuerk
	  Oruga
	  Tachyons
	  Tailwind CSS
	  Windi CSS
	  Vant
	  View UI
	  Vuetify.js

? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
	>( ) Axios - Promise based HTTP client
	 ( ) Progressive Web App (PWA)
	 ( ) Content - Git-based headless CMS

? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)  
	>( ) ESLint
	 ( ) Prettier
	 ( ) Lint staged files
	 ( ) StyleLint
	 ( ) Commitlint

? Testing framework: (Use arrow keys)
	> None
	  Jest
	  AVA
	  WebdriverIO
	  Nightwatch

? Rendering mode: (Use arrow keys)
	> Universal (SSR / SSG)
	  Single Page App

? Deployment target: (Use arrow keys)  
	> Server (Node.js hosting)
	  Static (Static/Jamstack hosting) 

? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
	>( ) jsconfig.json (Recommended for VS Code if you're not using typescript)
	 ( ) Semantic Pull Requests
	 ( ) Dependabot (For auto-updating dependencies, GitHub only)

? What is your GitHub username? (XXXXXXXXX)
　　→　（何も入力せずに、Enter）

? Version control system: 
	  Git
	> None

```

#手順4
プロジェクトの作成が終わったら、ターミナル上で以下のコマンドを実行し、
作成したプロジェクトフォルダ配下に移動する。

```
cd project-name
```

#手順5
プロジェクトの動作確認のため、ターミナル上で以下のコマンドを実行する。

```
npm run dev
```

#手順6
手順5でコマンドを実行すると、以下のメッセージが表示されるので、
赤枠のアドレスをコピーし、ブラウザに張り付けて実行する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1866473/333f1973-89f5-44ab-e0db-55b50ac444b1.png)

#手順7
以下のように、NuxtJSのテンプレート画面が表示されればOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1866473/a416db36-3bbc-f106-53d7-100a2fcb53d5.png)

以上
【初心者向け】HTTPメソッドとは...（超簡潔版）

タイトルどおり超簡単にHTTPメソッドについてまとめます。
#HTTPメソッドとは
クライアントがサーバーに対して「〇〇してー」ってお願いするためのメソッド。
#代表的な４つのメソッドを紹介

##① GET
それちょうだいという意味で、ファイルを閲覧するなど、なんらかのリソースを取得するときに使う。

##② POST、③ PUT
両方ともサーバーにデータを送信するときに使う。
POSTは主に新規作成、PUTは主に更新のときに使うという違いがある。

##④DELETE
データを削除するときに使う。
【WordPress】個別ページの改ページページャーのデザインを変更する

個別記事ページ用のファイル`single.php`に
改ページ(ページ区切り)を挿入し、そのページャーを表示するには
`wp_link_pages()`というWordpress関数を利用する。

```php
<?php the_content(); ?>
<?php wp_link_pages(); ?>
```

##手順

1.管理画面上で、改ページを挿入する
![スクリーンショット 2021-08-17 22.11.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205283/5187b69c-0ceb-d924-c7fb-a595f098ef27.png)

2.この状態で表示すると
![スクリーンショット 2021-08-17 22.15.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205283/e05374cc-3c7c-531b-c0cc-b2453e8c12d8.png)

3.このままだとデザインを変更する時に、やりづらいのでphpでclassやタグを挿入する。

```php
<?php
  $args = array(
    'before' => '<div class="pager">',
    'after' => '</div>',
    'link_before' => '<span>',
    'link_after' => '</span>'
  );
  wp_link_pages($args);
?>
```

4.そうすると下のようなHTMLが出力される
```html
<div class="pager">
  <span class="post-page-numbers current" aria-current="page">
    <span>1</span>
  </span>
  <a href="http://sample/2/" class="post-page-numbers">
    <span>2</span>
  </a>
</div>
```

5.これでクラスやタグに合わせてCSSで装飾しやすくなる
[備忘録]Swiper.js で矢印ボタンを外に出す方法　HTML CSS JavaScript

##業務で詰まったところの備忘録

###参考元
https://garigaricode.com/swiper/
https://www.youtube.com/watch?v=NcdYgbgvq4k

###備忘録
Swiper.js では通常、スライドを動かす矢印ボタンはSwiper要素の内側置かれている。
実装していたWEBページの仕様上、この矢印をSwiper要素の外側に出す必要があった。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/4bc4b22e-3ff5-9ab1-da60-85acf09e7e18.png)

#やり方

###1. 基本の要素
Swiper.jsの基本要素に前へ矢印と次へ矢印のボタンをつけたもの
(swiper-button-prev, swiper-button-next)

```Swiper.html
<!-- Swiper START -->
<div class="swiper-container">
	<!-- メイン表示部分 -->
	<div class="swiper-wrapper">
		<!-- 各スライド -->
		<div class="swiper-slide">Slide 1</div>
		<div class="swiper-slide">Slide 2</div>
		<div class="swiper-slide">Slide 3</div>
		<div class="swiper-slide">Slide 4</div>
	</div>
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>
<!-- Swiper END -->
```


###2. 全体をdivタグで囲む(クラス名は任意)
```Swiper.html
<div class='swiper-wrap'>
    <!-- Swiper START -->
<div class="swiper-container">
	<!-- メイン表示部分 -->
	<div class="swiper-wrapper">
		<!-- 各スライド -->
		<div class="swiper-slide">Slide 1</div>
		<div class="swiper-slide">Slide 2</div>
		<div class="swiper-slide">Slide 3</div>
		<div class="swiper-slide">Slide 4</div>
	</div>
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>
<!-- Swiper END -->
</div>
```

###3.ボタン要素（swiper-button-prev と swiper-button-next）を swiper-container の兄弟要素にする。

ボタン要素（swiper-button-prev と swiper-button-next）を クラス名swiper-containerというdivタグの兄弟要素にしたいので、ボタン要素を同階層に持ってきます。（一つ外に出してやる。）

```Swiper.html
<div class='swiper-wrap'>
    <!-- Swiper START -->
<div class="swiper-container">
	<!-- メイン表示部分 -->
	<div class="swiper-wrapper">
		<!-- 各スライド -->
		<div class="swiper-slide">Slide 1</div>
		<div class="swiper-slide">Slide 2</div>
		<div class="swiper-slide">Slide 3</div>
		<div class="swiper-slide">Slide 4</div>
	</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- Swiper END -->
</div>
```

###4.Swiper-wrap に対してposition relative を指定

CSSにて最上位に指定したSwiper-wrapに対してposition relativeを指定、理由としては子要素であるボタン要素にはposition absoluteがデフォルトで指定されている。
（要素の位置を絶対値で指定する方法）position については[こちら](https://qiita.com/sun19008/items/b18b2dc98443ab988ecb)
よってボタンの位置の調整もスタイルにposition absolute を指定して top や left で調整。

###5.矢印ボタンがスライダーの外に出ればOK
上記のposition relative と position absolute を使って矢印ボタンがスライダーの外に出ればOK
FlutterのBottomNavigationBarのテンプレコード

FlutterのBottomNavigationBarのテンプレコード
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407895/8082ec03-6690-31f3-f662-06267b3c47c5.png' width=200/>

https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html

公式ドキュメントの通りだが、
・BottomNavigationBarのためだけに、BottomNavigationBarのページをStatefulWidgetで作る、
・BottomNavigationBarのページのScaffoldにはbody、BottomNavigationBarの2つを書く、AppBarを各ページで切り替えたい場合はBottomNavigationBarのページではなく各ページに書く、AppBarを各ページで切り替えなくても良い時はBottomNavigationBarのページに書く、
・切り替え用の変数selectedIndex、List<Widget>形式でpageListを作っておく、各ページへの変数の受け渡し方がわからないので、globalに変数を置いておくか、Provider等の状態管理方法を採用する、
・bodyには「pageList[selectedIndex]」を置き、selectedIndexの切り替えでページを切り替える、currentIndex、onTapは以下の通り、
・materialデザインには大量のアイコンが用意されている、デザインがビシッと決まるとカッコいいので日頃からどんなアイコンがあるか眺めておく、
https://api.flutter.dev/flutter/material/Icons-class.html
・上記の流れは後から変えるとやや面倒なのでBottomNavigationBarのレイアウトでアプリを作りたい場合は最初から作ること、

```dart
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int selectedIndex = 0;
  List<Widget> pageList = [
    TodoPage(),
    WeightPage(),
    MyPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: pageList[selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
              icon: Icon(Icons.check_box),
              label: '入力',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.multiline_chart),
            label: 'グラフ',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: '設定',
          ),
        ],
        currentIndex: selectedIndex,
        onTap: (int index) {
          setState(() {
            selectedIndex = index;
          });
        },
      ),
    );
  }
}

class TodoPage extends StatefulWidget {...
class WeightPage extends StatefulWidget {...
class MyPage extends StatefulWidget {...

```
Linuxのgitでパスワードとユーザー名を保存する方法

# gitのPushの時にpersonal access tokenを入力したくない

認証情報ヘルパーを有効化し、Git が任意の時間、メモリにパスワードを保存する。 デフォルトでは、Git はパスワードを 15 分間保存します。

```
git config --global credential.helper cache
```

タイムアウトの時間を長くする。
この場合は一時間になる。

```
git config --global credential.helper 'cache --timeout=3600'
```

# 参考
https://docs.github.com/ja/github/getting-started-with-github/getting-started-with-git/caching-your-github-credentials-in-git
shared_preferences プラグインがjsonファイルを保存する場所

Flutterのサンプル
https://flutter.dev/docs/cookbook/persistence/key-value#complete-example
において、Windows Desktop アプリで設定が保存される場所の備忘録

次のようにサンプルプロジェクトを作成すると

```
flutter create  test_project
```

次のように、適当に補われて、サンプルプロジェクトを作成したことになる

```
flutter create --org com.example --project-name test_project test_project
```

上記で作成したサンプルプロジェクトをベースに、Flutterサンプルを動かすと、設定ファイルは以下に保存される

```
C:\Users\<username>\AppData\Roaming\com.example\test_project\shared_preferences.json
```

組織名を正しく設定するには、プロジェクト作成から
AWS Backup とは

## 勉強前イメージ

バックアップを扱うのはわかるけど、
いろんなサービスのバックアップを扱うのかな？

## 調査

### AWS Backup とは

バックアップの一元管理と
バックアップに関してのモニタリングが可能です。

### AWS Backup の特徴

- バックアップの集中管理

中央バックアップコンソールを使用してバックアップポリシーを設定することで
サービス全体のアプリケーションのデータをバックアップすることが出来ます。

- バックアッププロセスの自動化

バックアップスケジュールや、保存の管理、ライフサイクルの管理も自動化でき、
独自にスクリプトを作成する必要がありません。
バックアップの時期と方法を定義するだけなので、
複数のバックアッププランを作成することも可能です。

- バックアップコンプライアンスの向上

バックアップポリシーの適応やバックアップの暗号化に関して、
バックアップに関するコンプライアンスの基準を満たすことに役立ちます。
また、サービス全体のバックアップを管理することで
監査を実行することが容易です。

### AWS Backupがサポートしているリソース

- Amazon FSx
- Amazon EFS
- Amazon DynamoDB
- Amazon EC2
- Windows VSS
- Amazon EBS
- Amazon RDS
- Amazon Aurora
- AWS Storage Gateway

### 料金

最低料金や初期費用は発生しません。
以下の合計金額がかかります。

- バックアップストレージの金額
- 復元の料金
- クロスリージョンのデータ転送料金

特にバックアップストレージの金額に関しては、
サービスによって1GBごとの費用が違うので確認が必要です。

## 勉強後イメージ

思ってたイメージとほぼ変わらない。
EC2とかスナップショットとかもあるけどどう違うんだろう・・・・

## 参考

- [AWS Backup](https://aws.amazon.com/jp/backup/?whats-new-cards.sort-by=item.additionalFields.postDateTime&whats-new-cards.sort-order=desc)
- [AWS Backupについて解説｜AWS Backup使用方法とは？](https://www.fenet.jp/aws/column/aws-beginner/374/)
- [【入門編】AWS Backupを使ってEC2のAMIバックアップと復元を行う](https://blog.serverworks.co.jp/awsbackup/introduction)
SalesforceのTrailblazers Eventを見てみよう！

毎月様々なTrailblazers Eventが開催されているはご存じでしょうか？
Trailblazers Eventは全てSalesforceに関連のあるイベントです。

Trailblazers Eventには大きく分けて２つのグループがあります
###・ユーザグループ
(Salesforceのライセンスを保有するユーザーの皆さまが参加できる、
セールスフォース・ドットコムが運営するグループ)
###・コミュニティグループ
（Salesforceにご興味がある方はどなたでもご参加いただけるグループ）



今回はTrailblazers Eventの使い方を見ていきます！
↓Trailblazers EventのサイトURLはこちら↓
https://www.trailblazers.jp/

###開催予定のイベントを見てみよう！

右上の「イベント」タブをクリックすれば、直近開催予定のイベント一覧が表示されます。
まずはどのようなイベントが開催されているか見てみよう！
毎月様々なイベントが開かれていますので、Salesforceに携わる人なら気になるイベントはあるはず！？
![イベント.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/f233712c-4c5c-c9b4-4d0a-d3d7e7a20d38.png)

###気になるイベントがあればクリックしよう！
気になるイベントがあればクリックしてみましょう！
今回は例として「Salesforce Saturday Tokyo」というグループのイベントをみていきましょう！
イベント名をクリックすれば、詳しいイベント内容の詳細が分かります。
詳細を確認し「参加したい！」と思ったら右上部の「申し込む」ボタンをクリックしましょう！
<b>※コミュニティグループはSalesforceにご興味がある方はどなたでもご参加いただけるグループですが、イベントの中には開発向けのイベントやシステム管理者向けのイベントなど、特定の対象者向けのイベントもございます。イベントを申し込む前に、イベント詳細をよく確認することをおすすめします。
※ちなみに今回例に挙げたSalesforce Saturday TokyoはSalesforceに関する勉強がしたい人ならだれでも参加OKのコミュニティでございます！むしろ初心者大大大歓迎です！

また、グループリーダーの顔や名前もこのページで分かります。
SNSのURLも載せているリーダーもいますので、気になるリーダーのSNSもチェックできますね！
![気になるイベント２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/74e98c41-60d0-c5de-ba11-a278e7d6a7fa.png)



###グループの詳細も見てみよう
グループについて気になったらグループ名をクリックしてください。
グループの詳細が分かりますよ！
またグループのSNSも記載されている場合がありますので、グループのSNSもチェックしましょう！
![グループ１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/3b2f8deb-4cac-f465-2c84-e9d8a86edc9d.png)


###特定のSalesforce製品のイベントを探している場合は？

「Salesforceのイベント」と一言で言っても
・Sales Cloud
・Service Cloud
・Pardot
・Tableau CRM

と様々な製品に関するイベントがあります。
皆様はどのようなSalesforce製品に興味があるでしょうか？
実はこのTrailblazers Eventでは、Salesforce製品軸でイベントを探すことが可能です！

こちらトップにある虫眼鏡から製品名を入れて検索しましょう！
検索した製品に関連するイベントやグループがすぐに検索できますよ！
![イベント検索.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/93123a58-6baf-24f1-2e12-f5ef095cb5ed.png)


###まだまだある仕組み？？
Trailblazers Eventのサイトには「ニュース」というタブがありますが、2021年8月17日現在ニュースは一件もありませんね！
いったいこのニュースには何が掲載されるのか？要注目ですね！
![ニュース.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/de1c55c1-d9d9-136d-b6fd-c9f9e21ac814.png)

###まとめ
いかがでしたでしょうか？
Trailblazers Eventでは、さまざまなSalesfroceのイベントを簡単に検索することができます！
これを機会にSalesfroceのイベントに参加したことがない人も、ぜひ参加してみてはいかがでしょうか？

（本ブログの内容は2021年8月17日現在の内容を元にしています）
RainのaliasをPowerShellとWSLで設定する

# はじめに
最近CloudformationのCLIツールであるRainが使いやすいと聞くことがあったので、まずはインストールと設定からやってみることにしました。
https://github.com/aws-cloudformation/rain

ただ、極力自分の環境を汚したくないという思いもあり、以下の記事の下部にあるDockerfileを参考にコンテナ環境でRainを実行させたいと思います。
https://dev.classmethod.jp/articles/try-cloudformation-rain-on-windows/

毎回docker runコマンドを実行するのは手間なので、よく使用するPowershellとWSL(ubuntu20.04)でdocker runコマンドをaliasに設定して、Dockerを使っていることを意識せずにできるようにしてみます。

# 環境
Windows 10 Home
PowerShell 5.1.19041.1151
Ubuntu-20.04
Rain v1.1.2

## 前提
wslでDockerが実行できる環境は既に設定済み
AWS CLIインストールとデフォルトプロファイルは設定済み

# Docker実行
以下の記事を参考にRainのdocker runコマンドが実行できることまで確認します。
- [WindowsでCloudFormation Rainを動くようにしてみた](https://dev.classmethod.jp/articles/try-cloudformation-rain-on-windows/)

以下のコマンドでRainのバージョンが確認出来たらOKです。

## WSL(ubuntu20.04)
```
$ docker run --rm -it -v "$HOME/.aws/:/root/.aws" -v "$(pwd):/aws" aws-cfn-rain --version
Rain v1.1.2 linux/amd64
```

## Powershell
```
PS> docker run --rm -it -v "$HOME/.aws/:/root/.aws" -v "$($pwd.Path):/aws" -e AWS_PROFILE aws-cfn-rain --version
Rain v1.1.2 linux/amd64
```

# alias設定(WSL)
.bashrcファイルを編集して、Rainのaliasを追加します。

```
$ vi ~/.bashrc
~省略~
# some more ls aliases
alias ll='ls -alF'
alias la='ls -A'
alias l='ls -CF'
# add Rain alias
alias rain='docker run --rm -it -v "$HOME/.aws/:/root/.aws" -v "$(pwd):/aws" aws-cfn-rain'
~省略~
```


.bashrcを再読み込みして実行するとrainコマンドだけで実行できるようになっています。
色々と試すのはこれからですが、とりあえずは問題なさそうです。

```
$ source ~/.bashrc
$ rain --version
Rain v1.1.2 linux/amd64
```

# alias設定(PowerShell)
以下のコマンドを実行します。(.bashrcと同じようなファイルです)

```
PS> notepad $profile
```


以下のようにファイルに追記します。
※function awsがありますが、元々aws cliもPowershellのaliasに設定していたので入っていました。

```
function rain {
	docker run --rm -it -v "$HOME/.aws/:/root/.aws" -v "${PWD}:/aws" aws-cfn-rain $args
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440403/1d990492-30d8-8eb2-60ce-82e149df960c.png)


$profileを再読み込みして実行するとrainコマンドだけで実行できるようになっています。
こちらも問題なさそうです。

```
PS> . $profile
PS> rain --version
Rain v1.1.2 linux/amd64
```

# 補足
AWS CLIのプロファイルを指定することで使用する認証情報を変更することができます。

```
PS> rain info --profile default
Account:  XXXXXXXXXXXX
Region:   ap-northeast-1
Identity: arn:aws:iam::XXXXXXXXXXXX:user/user1
Profile:  default
```

```
$ rain info --profile default
Account:  XXXXXXXXXXXX
Region:   ap-northeast-1
Identity: arn:aws:iam::XXXXXXXXXXXX:user/user1
Profile:  default
```

# おわりに
Rainの設定ができたので、これを使って実際に構築をしていきたいと思います。
jQuery導入

今回は、JavaScriptのjQuerykの導入のみの記事です！
ネットで調べても中々うまくできなかったので、、、

※jQueryの導入には、jquery-railsというGemを利用することもあります！
今夏は違う方法です

##◇jQueryをインストール
```perl:ターミナル
% yarn add jquery
```
##jQueryを管理化に
```perl:config/webpack/environment.js　
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
  })
)

module.exports = environment
```
##jQueryを認識させる？？
```perl:　app/javascript/packs/application.js
require('jquery')
```
##下記内容は記述されてればそのままで！
```perl:　app/views/layouts/application.html.erb
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
```

これでjQuery使えます！

以上