OmniAICreator/Qiita-1.07M huggingface dataset:
[Windows Commands] よく使うdir findのbak

<h1>よく使われていたdir findのbak</h1>

```bat
dir /b /s C:\pleiades4.7\workspace\sg2batch\opt\ | find "txt"

C:\Users\KAKAKA>dir /b /s C:\pleiades4.7\workspace\XYZ\opt\ | find "txt"
C:\pleiades4.7\workspace\XYZ\opt\shared_ftpdata1\SG2002\DOWNLOAD\SEND\TERM\00000356_1_1\201708180000_T_76_PLUPTM_20180214011138_M.txt
C:\pleiades4.7\workspace\XYZ\opt\shared_ftpdata1\SG2002\DOWNLOAD\SEND\TERM\00001360_1_1\201708180000_T_76_PLUPTM_20180214011146_M.txt
C:\pleiades4.7\workspace\XYZ\opt\shared_ftpdata1\SG2002\DOWNLOAD\SEND\TERM\00004476_1_1\201708180000_T_76_PLUPTM_20180214011154_M.txt
C:\pleiades4.7\workspace\XYZ\opt\shared_ftpdata1\SG2002\DOWNLOAD\SEND\TERM\00009150_1_1\201708180000_T_76_PLUPTM_20180214011202_M.txt
C:\pleiades4.7\workspace\XYZ\opt\shared_ftpdata1\SG2002\DOWNLOAD\SEND\TERM\00009760_1_1\201708180000_T_76_PLUPTM_20180214011210_M.txt

C:\Users\KAKAKA>
```

```bat:単体ツール.LOGfiles_CLEAR_BAK.bat

echo off
set target=C:\pleiades4.7\workspace\XYZ\opt\jboss\server\sg2\log\
set dt=%date:~0,4%%date:~5,2%%date:~8,2%
set time2=%time: =0%
set tm=%time2:~0,2%%time2:~3,2%%time2:~6,2%
set newTimeFolder=%dt%%tm%
set bkDir=./bak/%newTimeFolder%
cd bak
mkdir %newTimeFolder%
cd %newTimeFolder%
copy %target%*log .
cd ..
copy /y *.log %target%
cd ..
echo "実行？？ explorer C:\pleiades4.7\workspace\XYZ\opt\jboss\server\sg2\log"
pause
explorer C:\pleiades4.7\workspace\XYZ\opt\jboss\server\sg2\log

```


```bat:単体ツール.ディレクトリクリア.bat

echo off
cd C:\pleiades4.7\workspace\XYZ\opt\shared_ftpdata1\SG2000\WORK\UB
rmdir /s /q .
cd C:\pleiades4.7\workspace\XYZ\opt\shared_ftpdata1\SG2002\DOWNLOAD\SEND\TERM
rmdir /s /q .
cd C:\Users\KAKAKA\Desktop\TO_Li\9.その他\LiYang\UT疎通用
echo "きれいにしたOK！ 単体ツール.ディレクトリクリア.bat"
echo "実行？　tree /f C:\pleiades4.7\workspace\XYZ\opt"

pause
tree /f C:\pleiades4.7\workspace\XYZ\opt
```
WordPress で Table Prefix を変更したら管理者権限でログインできなくなった際の対処方法

WordPress で Table Prefix を「`wp_`」から「`test_wp_`」に変更したらなぜか管理者権限でログインできなくなってしまった。

DB にプレフィックスデータが記録されていてそれも修正しないといけないらしい。

wp-cli 経由で変更できないかなと思ったら、`wp-cli-rename-db-prefix` という wp-cli の拡張パッケージを見つけた。


https://github.com/iandunn/wp-cli-rename-db-prefix


というか、 wp-cli に拡張パッケージなんてのがあるんですね。

## インストール

```sh
wp package install iandunn/wp-cli-rename-db-prefix
```

`﻿﻿~/.wp-cli/packages/` ディレクトリにインストールされるっぽい。

## 実行

```sh
wp rename-db-prefix test_wp_
```

以上になります。
ブラウザでAR、Google検索で動物が出てくるアレを自前3Dモデルで出来る

## ブラウザでAR
- Googleの動物3D話題になりました [engadget.com の記事](https://japanese.engadget.com/2019/06/03/google-ar/)
- [この技術の公式ドキュメント](https://googlewebcomponents.github.io/model-viewer/)のとおりやったら、自前3Dオブジェクトを簡単に表示できた
- ARについてはiOSはイケたけど、Androidはイケなかった


## 結論
- [公式のサンプルコード](https://googlewebcomponents.github.io/model-viewer/examples/augmented-reality.html)、src要素 `assets/Astronaut.glb` なんて書いてあるけど
- 相対パスではダメ、絶対パスにすること！
- 以上

```javascript:だめなやつ
<model-viewer src="assets/Astronaut.glb" ar camera-controls alt="A 3D model of an astronaut" background-color="#222" ios-src="assets/Astronaut.usdz" magic-leap unstable-webxr></model-viewer>
```

## コード全体
- Reactコンポーネントです

```javascript:ModelViewer.js
import React, { useRef, useEffect } from 'react'
import '@google/model-viewer'

import { BallGlb, BallUsdz } from './assets/Ball'

const ModelViewer = ({ glb, usdz }) => {
  const mv = useRef(null)

  useEffect(() => {
    const modelViewer = mv.current
    const srcURL = new URL(glb, modelViewer.baseURI) // ここで絶対パスにしてる
    modelViewer.ar = true
    modelViewer.cameraControls = true                // 公式ドキュメントで camera-controls って言ってるやつ
    modelViewer.src = srcURL.href
    modelViewer.iosSrc = usdz                        // 公式ドキュメントで ios-src って言ってるやつ
    modelViewer.quickLookBrowsers = 'safari chromea' // 公式ドキュメントで quick-look-browsers って言ってるやつ
  }, [mv, glb, usdz])

  return (
    <model-viewer ref={mv} />
  )
}

export const BallModelViewer = () => (
  <ModelViewer glb={BallGlb} usdz={BallUsdz} />
)

export default ModelViewer
```

### ファイル構成
```shell:jsと3dモデルの位置関係
.
│  ModelViewer.js
└─assets
  └─Ball
      Ball.glb
      Ball.usdz
      index.js
```

```javascript:assets/Ball/index.js
import BallGlb from './Ball.glb'
import BallUsdz from './Ball.usdz'
export { BallGlb, BallUsdz }
```

## おまけ 3Dファイル
### 3Dオブジェクトをここでつくって、gltfやobjでエクスポートできる
- https://www.tinkercad.com/

### objファイルをここでインポートしてusdzファイルでエクスポートできる
- https://usdz.viewar.com/

## おまけ 原因
https://github.com/GoogleWebComponents/model-viewer/blob/0e6582b6d6e30ceeb51576435b605425d95bf803/src/features/ar.ts#L42-L56

タグ model-viewer の要素 src が `new URL(gltfSrc)` に渡されてるので URLがパースできません、ってエラーになる



おしまい
DockerでMySQLお試し環境を構築する（ついでにphpMyAdminも）

軽い動作検証を行う際に、気軽に使い捨てられるDockerコンテナを利用すると便利です。
例として、MySQLとクライアントツールphpMyAdminのコンテナを構築するdocker-compose.ymlをご紹介します。

# docker-compose.ymlの例
```docker-compose.yml
version: '3'
services:
  db:
    container_name: test_mysql
    image: mysql:5.6
    volumes:
      - ./.db:/var/lib/mysql
    restart: on-failure
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: test_db
      MYSQL_USER: user
      MYSQL_PASSWORD: user
    ports:
      - 3306:3306
  phpmyadmin:
    container_name: phpmyadmin
    image: phpmyadmin/phpmyadmin
    restart: on-failure
    depends_on:
      - db
    links:
      - db
    environment:
      - PMA_ARBITRARY=1
      - PMA_HOST=db
      - PMA_USER=root
      - PMA_PASSWORD=root
    ports:
       - 8080:80

```
MySQLのdockerイメージはご利用したいバージョンを設定して下さい。
https://hub.docker.com/_/mysql

こちらのファイルを任意のディレクトリに配備し、`docker-compose up`を実行します。


# 実行後のディレクトリイメージ
```
.
├ .db
├ docker-compose.yml
```
`.db`ディレクトリにmysqlのデータが永続化されます。
コンテナを停止・削除しても、再度コンテナを作成すれば削除前の状態を保持しています。

# phpMyadminでmysqlへアクセス
http://localhost:8080/ へアクセス。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172019/d3ff23f3-1ff2-f61c-335e-5e005425a47f.png)
データベース`test_db`が作成されています。
FirebaseAuth使う時のBrowserKey側API制限設定

明らかにこれは違うやろってAPIだけ許可してわざと失敗させればエラーメッセージに入ってくるのですぐ分かるんですけどね。

firebase使った認証設定で、認証しか使わないのに他のAPIも使える状態ってまあ気持ちが良くないのでAPI制限かけたいってときに、API一覧見ると「firebase auth」みたいなそのものズバリなAPIは一覧にありません。
`Identity Toolkit API` こいつが犯人です。

↑だけだと`getIDtoken`使ってトークンのリフレッシュが出来ないことが判明。
`Token Service API`こいつも要りますね。

以上！
BEM記法でSCSSを書く際のほんのちょっとしたテクニック

BEMでscssを書く際のちょっとしたテクニックです。本当にちょっとしたものです。
既に、ご紹介されている方はたくさんいますが、
最近知り、地味に感動したので、自分用のメモに残しておきます。

# BEMを書いているとよくあるこんなこと

`block`に対する`modifier`の下位`element`にスタイルを指定したいときのこんな書き方。

```scss:style.scss
// block
.block {
  width: 200px;
  height: 200px;
  
  // element
  &__element {
    width: 100px;
    height: 100px;
  }
  
  // block modifier
  &--red {
   .block__element {
     width: 150px;
     height: 150px;
     background: red;
   }
  }
}
```

## 気に入らない点
- `&`で省略して書いているのに、ここに来て記述が長くなってしまう。
- 上記に付随して、なんか気持ち悪い。なんかダサい。

## 理想の書き方
あくまで理想の書き方。当たり前だが、scssの仕様上、通らない。

```scss:bad.scss
// block
.block {
  // 省略  

  // block modifier
  &--red {
   &__element{
     width: 150px;
     height: 150px;
     background: red;
   }
  }
}
```

## じゃあどうするか
block直下で`&`を変数にしておく。クラス名の場合は[インターポーレション](https://liginc.co.jp/web/html-css/css/59325)を使用する。

```scss:good.scss
// block
.block {
  // 省略
  $and: &;

  // block modifier
  &--red {
   #{$and}__element {
     width: 150px;
     height: 150px;
     background: red;
   }
  }
}
```
`$and`を使用しているが、何でもいいみたいです！
こうすることで、理想通りのスタイルを当てることができる。知らなかった。。。。

## さいごに
BEMって難しい・・・
PHPでCSVの読み書き

# メモ
これまでPHPでCSVを読み書きすることが何度かあったので、
なんとなくライブラリ化して置いといたもののメモです。

fgetcsv（でしたっけ？）は便利ですが、これだけだとその後に配列まわしてガチャガチャしないといけないのがめんどくさいです。
ので、オブジェクトに変換するところと、1レコードずつ処理する場合forとか書かないようにとラップしたものです。

# パッケージ
[mya-zaki/csvert](https://packagist.org/packages/mya-zaki/csvert)

# 使い方
## オブジェクトに変換
- 読み込むCSVの構造をRecordクラスを継承して定義。
 - RecordクラスはArrayAccess, JsonSerializableをimplementsしている

```
<?php
namespace App;

use MyaZaki\Csvert\Record;

class PostalCode extends Record
{
    public $delimiter = ',';
    public $enclosure = '"';
    public $escape = '\\';

    public $charset = 'SJIS-win';

    public $header = true;

    public $columns = [
        'Code',
        'Street',
        'City',
        'State',
    ];

    public function getAddress()
    {
        return $this->attributes['Street'] . ', ' . $this->attributes['City'] . ', ' . $this->attributes['State']；
    }
}
```

- parseするとCollectionのオブジェクトがかえってくる

```
$parser = PostalCode::parse($filepath);
$records = $parser->get(); // Collection
```

## 1レコードずつ逐次処理
- 1レコードに対する処理のcallbackを渡して実行
 - CSVデータ全てを格納しないので、メモリ使用量は抑えられる（はず・・）

```
$parser = PostalCode::parse($filepath);
$address_list = [];
$parser->walk(function ($record) use (&$address_list) {
    $address_list[] = $record['Code'] . ' ' . $record->getAddress();
});
```
プログラミングは本当に難しいのか？~料理に例えて思って見れば簡単なプログラミング

#プログラミングは難しい？とんでもない
プログラミングの話をする前に、まず、卵焼き作りをする時に卵焼きのレシピを見てましょう。

- 卵ー4個
- ラカントー5T
- ミリンー１T
- 醤油ー1/2t
- サラダ油ー3T

料理をしない人でも、これはレシピだという事がわかると思います。しかし、料理を全然知らない人は「Tやtは何を意味するんだ？」や「ラカントって何の食べ物何だろう？」などの疑問をもつはずです。次はあるプログラミングの**レシピ**を見ましょう

`#include <stdio.h>
int main(int argc, char *args[]) {
    printf("Hello, world.\n");
    return 0;
}`

上記に表示されたのはC言語で書いたコンソール画面に「Hello World!」と表示させるためのプログラミングのレシピです。**プログラマー**や開発者は、この**レシピ**を**プログラミングソース**や**ソースコード**などとよんでます。

#プログラミングの特徴

まずは、料理レシピの特徴から見てみましょう。

- **単語**、**略語**、**記号**といった語彙がきまっている。よくわかるものもあれば、よくわからない謎にかんじるものもある。
- 何をどこで言うかについてのきまりである**構文**規則がある
- 実行すべきことが順に並べられている。
- たとえば鮭の裏表を焼く作業のように、時に同じ作業の繰り返し(**ループ**)がある
- ときどき、なんらかの作業の参照が含まれる（コンピュータの用語では**関数(function)**と呼ばれる）
- 内容についてある程度の知識があることを前提としている。例えば、ゆで卵のレシピだと「水とは何」や「水を沸かすにはどうすればいいか」などは前提となっている。
- 期待される結果がある。例えば、料理のレシピだと「おいしい料理を完成する」と言う結果を期待する

今挙げた特徴は、驚くことに、すべてコンピュータプログラムにも当てはまります。このようにパンのレシピを持ち出したのは、**プログラミングはそこまで神秘的だったり、専門的ではないということを示すためです。**普通の人は「**ただ難しいそう**」、「**良くわからない**」、「**難し語彙が多すぎる**」などの理由で「**プログラミングは難しい**」思いがちです。しかし、プログラミングは料理のレシピやニットパターンのように、「**正しい言葉**」と「**規則**」を学ぶだけです。

# それでも、まだプログラミングが怖い人へ

どの様な人も料理を始めた途端から「**黒トリュフを使ったパスタ料理のレシピ」とか差し出されたら、上記のように「難しそう」、「良くわからない」**などの理由で「**料理を趣味にするのは難しい」と思う**はずです。なのでほとんどの人は「**目玉焼き**」や「**みそ汁**」のように簡単に作れる家庭食から始まると思います。
なのでプログラミングも最初から「**3Dワールドを走りまわるかっこいいゲーム**」や「**人工知能を使った画像認識**」のソースを作ろうとすると**難しくて作れません**。。先ず、簡単に画面に「**文字を表示させる**」や「**入力した文字を表示させる**」というところから始めたほうが「**面白い**」し「**プログラミングに馴染んで行く**」のに良いと思います。

# やろうとすれば出来るあなたへ最後の一言

プログラミングは難しいものではありません。馴染まれてないだけです。あなたも馴染めばきっとたのしくなると思います。



>引用：[ゲーム好きエンジニア柴犬のブログ](https://dripcoke.com/)
>> [プログラミングは難しいのか？](https://dripcoke.com/)
Qiitaテンプレート

#Qiita投稿用のテンプレート
アウトプットが下手くそなのでQiitaに投稿していきます♪
そのためのざっくりとしたテンプレート。

```text
#目的
【エラー対処用】
～がしたい。
～的な問題が発生。
その対処をする。

【実装用】
～がしたい。
その手順を記す。

#環境
～
～

#流れ
1．～
2．～
3．～

##1．
##2．
##3．

#感想

#参考
```
SourceTreeが重い！！ときにやったこと

# はじめに
今月に入ってからプロジェクト異動となり、使用PCが変わって以来Sourcetreeの動作が重くてストレスが凄い。。。
環境はWindows10Pro、CPUがi7-6700、メモリが8GB。

# どんな状態か
リポジトリ1個しかタブ表示してないのに、
　・ログを表示しようとすると、プログレスバーがカクカクしてPC全体がもっさりする
　・コミットファイルをステージングしようとして追加すると、30秒以上表示が更新されない
　・プルしたときも同じような感じ
てなことでイライラがMAX！！！！！

色々ググって原因調べたけど、自分の環境に該当するものは見当たらず。。。

# やったこと
ログの表示をしたときにやたらもっさりするなーと思って、
一回にロードしすぎなのでは！？と思ってオプション調べてみたら、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146632/8c6b0118-5bd0-3a37-54e1-8b54f05220ae.png)

```
1度に読み込むログの行数
```
絶対これ影響してるやん！！
と思い、元々300で設定されていたのを100に変更してみたら、、、

めっちゃサクサクー( *´艸｀)

# おわりに
Sourcetreeのもっさりでイライラしている方、ぜひお試しあれ♪
Djangoで作ったアプリケーションをDockerで動かす

Qiitaの他の投稿だと、最初からDocker上に環境を作ってアプリケーション開発始める記事が多そうでした。が、今回ローカルでDjangoで作ったアプリケーションを、後からDockerに載せて公開する、という流れをやったので、手順を残しておきます。

## 今回の環境

- Windows10Pro
- Django 2.2.5
- Python 3.7.2
- Docker 19.03.2

## 前提

- ローカルのDjangoで動くアプリケーションが手元にある
- Dockerの環境構築が済んでいる

## 手順

まずは動かしたいアプリケーションの入ったフォルダを一式用意します。

- hoge
  - manage.py
  - hoge
    - settings.py
    - urls.py
    - wsgi.py

こんな感じの構成になっているかと思います。（実際には上記に書いていないものも存在するはずです）

### requirements.txtの作成

作成したDjangoのアプリケーションを動かすために必要なパッケージを書いていきます。

そもそもrequirements.txtは何かわからない、という場合は以下を参照。

[Python, pipでrequirements.txtを使ってパッケージ一括インストール | note.nkmk.me](https://note.nkmk.me/python-pip-install-requirements/)

例

``` requirements.txt
django
Pillow
django-cleanup
wsgi-basic-auth
django-pure-pagination
```

これを、プロジェクトと同じ階層に置きます。

- hoge
  - manage.py
  - hoge
    - settings.py
    - urls.py
    - wsgi.py
- requirements.txt


### HOSTSの設定

これをやらずに以降の手順を進めると、実際にデプロイしてアクセスした際にエラー画面が出たりします。

- hoge
  - hoge
    - settings.py <- コレ

settings.pyの中に`ALLOWER_HOSTS`という項目があるので、ここに公開するサイトのドメイン名を記入します。

参考：[Django 1.5以降ではALLOWED_HOSTSの設定が必要 – ymyzk’s blog](https://blog.ymyzk.com/2013/07/django-allowed_hosts/)

### Dockerfileの作成

``` Dockerfile
FROM python:3
ENV PYTHONUNBUFFERED 1
RUN mkdir /code
WORKDIR /code
COPY requirements.txt /code/
RUN pip install -r requirements.txt
COPY . /code
```

[Docker で Django 開発環境を構築する](https://leben.mobi/blog/django_docker/python/)を参考にしました。

### Dockerイメージを作成する

``` cmd
docker build -t my-sample-app .
```

最後のdotを忘れるとエラーになります（何度もやった）

### ビルドしたDockerイメージを実行

``` cmd
docker run --rm -v [アプリケーションのフォルダへのパス]:/code/ -p 8000:8000 [Dockerイメージ名] python ./hoge/manage.py runserver 0.0.0.0:8000
```

これで、アプリケーションがDockerコンテナ上で動作しているはずです。
macOS Catalinaにしたらgitコマンドでエラーが発生

# 事象

macOS Catalinaにアップデートした後、gitコマンドを実行したらエラーとなった

```
xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun
```

CommandLineToolsがないのかな？？？

# 解決方法

以下のコマンドを実行してCommandLineToolsをインストールした

```
xcode-select --install
```

実行結果は以下となる

```
xcode-select: note: install requested for command line developer tools
```

gitコマンドが使えるようになった！

```
$ git --version
git version 2.21.0 (Apple Git-122)
```

良かった良かったー
Lightning Utility Barを作ってみた(参照リンク)

https://dackdive.hateblo.jp/entry/2017/04/20/100000

lightning componentを作成したら、下記を参照して、utilitybarを作成します。

![utilitybar.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442974/ad90841a-5b31-eb26-503b-f6566f399959.png)


![utilitybarDisplay.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442974/f4709de0-f275-5a50-28b1-59e24181c7ed.png)
Windows リモートデスクトップ使用時の一時フォルダーtmpのパス末尾に数字が入る

知らなかったので困っている人がいれば

## 背景
Windows Server 2016でメンテナンス用のスクリプトを書いていたら、
環境変数TMPで指定されたフォルダーをワークディレクトリにしているのに末尾に「3」とか「4」とか変な数字がついているのに気づいた。

## 原因
この「3」や「4」はログオンしているユーザーのセッションIDらしく
複数人がリモートで利用している場合もあり、ログオフしていないことがあるこの課の運用の問題だった…

## 一時的な対策
スクリプト実行前にリモートで接続しているユーザーを強制切断するには、下記コマンドを使う

接続ユーザーをリストする

```
query user /server:<サーバー名>
```

IDを控えセッションを切断する

```
tsdiscon <ID> /server:<サーバー名> /V
```

参考記事：
[リモートデスクトップ使用時の一時フォルダー](https://shimaji.exblog.jp/13178677/)
[[Windows]サーバーにログインしているユーザーを強制退去させる](https://sevenb.jp/wordpress/ura/2016/12/02/windows%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%AB%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%82%92%E5%BC%B7%E5%88%B6%E9%80%80/)
Docker & Node.js & Socket.io & NGINXでよくあるエラー

# エラー内容
タイトルの構成でアプリケーションを作っていた時に以下のエラーが出てつまずいた

`socket io failed: Error during WebSocket handshake: Unexpected response code: 400`

# 何故起きたか

WebSocket接続のハンドシェイク時に `HTTP/1.1 101 (Switching Procotols)`  というステータスコードと `Hop-by-Hopヘッダ` を使用してWebSocket通信への切り替えを行う仕様に `Nginx v1.3.13` から変更されたらしい。

>Since version 1.3.13, nginx implements special mode of operation that allows setting up a tunnel between a client and proxied server if the proxied server returned a response with the code 101 (Switching Protocols), and the client asked for a protocol switch via the "Upgrade" header in a request.

# 解決策
`Upgrade ヘッダ` と `Connection ヘッダ` を明示的にバックエンドに渡すようにする必要がある
以下がNGINXのdefault.confです
`/` にきたアクセスは `nodeコンテナ` の3000番ポートに飛ばしています
`/socket.io/` も明示的に設定することでフロントで呼び出す際に `/socket.io/socket.io.js` で呼び出す事が出来ます 

```default.conf
server {
    listen  80;
    server_name  localhost;

    location / {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header Host $host;
        proxy_pass http://node:3000;
    }

    location /socket.io/ {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header Host $host;
        proxy_pass http://node:3000;
    }
}
```

docker-compose環境で構築している場合は **NGINXの設定をした際に必ずbuildし直すことを忘れずに**
GlitchでAPI(Node.js) を無料で公開する

#はじめに

Ethereum環境のシステムを作る場合、Node.jsで基盤システムを組んでいる方も多いと思います。
理由としては、Solidity関連のnpm管理のモジュールが多いため、扱いやすいといった理由です。
(go-ethereumなどで、golang実装もあると思います)
GAEで正式にNode.jsが使えるようになってから、この場合のケースは、ほぼGAEを使ってきたのですが、
ちょっとしたプロトタイプとを作る時に、Glitchというサービスが便利に感じたため、紹介記事です。

#Glitchとは
Node.jsのアプリケーションを公開するためのサービスです。
例えば、Githubに管理されたソースコードをGlitchから読み込んで、公開することができます。
もちろんpackage.jsで書かれたnpmは自動的にnpm installされるため、Ethereum関連のnpmなどを読み込みつつ、ExpressでAPIを作ることもできます。

#制限
1.匿名ユーザーのプロジェクトは5日で有効期限が切れる(ログインすべし)
2.プロジェクトは、利用されていないときは5分でsleep。
12時間以上実行されている場合は停止するが、
project-name.glitch.meの別のhttpリクエストを受信すると起動.
3.200MBまでのディスク制限。
(Node.jsのモジュールには個別の1GB制限。追加の512MBのアセットストレージもある)
4.512MBのRAM制限
5.4000件/1h のリクエスト制限(これを越えると429 too many requestsになるらしい)

<img width="558" alt="スクリーンショット 2019-10-30 12.46.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/943c09a9-29f0-4670-6fe0-00633a138913.png">

#使い方
1.githubにコードをgit pushしておく
2.https://glitch.com/ 
->New Project -> Clone From Git Repo
3.終わり

#reload
githubにpushしただけでは、glitch内部のコードは変更されません。
この場合下記の手順で、importをやりなおす必要があるのですが、よくわからなかったので、メモしておきます。

edit-page
->Tools->Git,Import,and Export->Import from GitHub->

下記のフォーマットで、importやり直す。例： 「qiita_user_01/test_wallet:」

<img width="440" alt="スクリーンショット 2019-11-12 17.01.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/50e93362-19c1-67d3-10d2-2650253ac076.png">


#ne-db
データを管理したい場合、Glitch上のne-dbというものが使えるようです。
基本的には、xmlやjsonなどのファイルで書き出して残しておけば、永続的にデータを保管できるため、同様の仕組みを用いたlibraryなどがあるため、参考にするのが良いです。
https://glitch.com/~ne-db



#独自ドメイン
自分が持っているドメインで公開が可能です。
Glitch側に名前を設定 + ドメインメニュー側でGlitchから示されんたCNAMEを設定
で疎通できます。
自身はsakuraのdomainを使っていて、sakuraではCNAMEによるゾーン設定ができなかった(サブドメインには可能だが全体にはできない)ので、IPを調べて、IPを登録しています。

ドメインを追加。
<img width="263" alt="スクリーンショット 2020-04-07 11.58.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/2256351f-25bc-8cae-4ebb-98c96d295251.png">

上で帰ってきたURLを検索してIPを調べる。
https://ping.eu/ping/
![スクリーンショット 2020-04-07 11.58.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/6150ce26-37fd-53b2-d2df-6ed572b544b4.png)

IPの追加
![スクリーンショット 2020-04-07 11.58.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/b063ba24-ec2a-f565-d631-45e38c1d1dcb.png)



#参考
本家
https://glitch.com

コミュニティスペース
https://community.glitch.me/

サポート
https://support.glitch.com/
ec-cube4でプラグイン開発を始める｜プラグインの新規作成

新機能を実装する際は、依存しないようにするためec-cube4では追加機能はプラグインとして開発することができる。

今回はその手順をメモしておく。
[公式のドキュメント](http://doc4.ec-cube.net/plugin_spec)

## プラグインの作成
```bash

bin/console eccube:plugin:generate

EC-CUBE Plugin Generator Interactive Wizard
===========================================

name [EC-CUBE Sample Plugin]:
> #プラグインの名前

code [Sample]:
> #プラグインのコード名

 ver [1.0.0]:
> #プラグインのバージョン

#問題無ければ最後にOKが出力される
[OK] Plugin was successfully created: [プラグインの名前] [プラグインのコード名] [プラグインのバージョン]

```

ディレクトリのデフォルト構成は以下のようになる

```bash
[プラグインのコード名]
|--Controller
| |--Admin
| | |--ConfigController.php
|--Entity
| |--Config.php
|--Event.php
|--Form
| |--Extension
| |--Type
| | |--Admin
| | | |--ConfigType.php
|--Nav.php
|--Repository
| |--ConfigRepository.php
|--Resource
| |--doctrine
| |--locale
| | |--messages.ja.yaml
| | |--validators.ja.yaml
| |--template
| | |--admin
| | | |--config.twig
|--TwigBlock.php
|--composer.json

```

## 各ファイルの役割
プラグイン開発時に新しく出てきたファイルだけメモ。
Controller・Entity・Repositoryなどは割愛。

### Nav.php
管理画面にメニューを追加する場合は、こちらに記述する。
今回はカタログの管理メニューを追加した。
[ec-cube4決済プラグイン](https://github.com/EC-CUBE/sample-payment-plugin#user-content-%E7%AE%A1%E7%90%86%E7%94%BB%E9%9D%A2%E3%83%8A%E3%83%93%E3%81%AE%E6%8B%A1%E5%BC%B5)を参考にした。

メニューの構造はeccube_nav.yamlを参考にするといいようだ。

```
/src/app/config/eccube/packages/eccube_nav.yaml
```

```php

<?php

namespace Plugin\CatalogCrud;

use Eccube\Common\EccubeNav;

class Nav implements EccubeNav
{
    /**
     * @return array
     */
    public static function getNav()
    {
        return [
            'content' => [
                'children' => [
                    'plugin_catalog' => [
                        'name' => 'plugin_catalog.admin.navi',
                        'url'  => 'plugin_catalog_list',
                    ],
                ],
            ],
        ];
    }
}

```

こちらに記述されているメニューはプラグインが有効の時の表示される。

### PluginManager.php
以下の処理の時に独自の処理を加えた場合はこちらに記述する。

- プラグインのインストール
- プラグインのアンインストール
- プラグインの有効化
- プラグインの無効化

デフォルトではないので作成する必要がある。

デフォルトの各挙動は次の通り。

#### インストール時の挙動
- Entityからテーブルの作成
- Controllerからルーティングの設定
- Nav.phpからメニューの追加

#### アンインストール時の挙動
- Entityで作成されたテーブルの削除
- Controllerからルーティングの削除
- Nav.phpからメニューの削除

最後にディレクトリごとファイルが削除された。

#### 有効化にしたときの挙動
- メニュー表示

#### 無効化にしたときの挙動
- メニュー非表示

※まだ完全に把握出来ていないので、誤りがある可能性があります。
ご了承ください。

上記以外の処理を追加したい場合には、PluginManager.phpに記述するようだ。
ESPWROOM-32 DevKitで赤外線リモコン

# 参考URL
赤外線リモコン関連・規格
http://milkandlait.blogspot.com/2014/06/blog-post.html
http://elm-chan.org/docs/ir_format.html

ESP関連
https://www.mgo-tec.com/blog-entry-partition-table-spiffs-sizeup-esp-wroom-32.html
https://ht-deko.com/arduino/esp-wroom-32.html
https://www.ei.tohoku.ac.jp/xkozima/lab/espTutorial0.html

poun
https://blog.makotokw.com/2008/01/06/pounddynamicdnsweb/


途中
[ Android ] java.net.SocketException: Socket failed: EPERM(Operation not permitted)解決法

前回の記事で紹介したエラー、
java.net.SocketException: Socket failed: EPERM(Operation not permitted)
の解決方法について記す。

##解決方法
エミュレータ内のアプリを**一度アンインストール**し、
**再度インストール**することで解決できた。

エミュレータで

「**設定**」→「**アプリと通知**」→
　**アンインストールするアプリを選択**→「**アンインストール**」

とするとアプリをアンインストールできる。

前回の記事で参考にしたURLでも
この解決方法は示されていたが、
気づかなかった。
参考URL：
https://stackoverflow.com/questions/56266801/java-net-socketexception-socket-failed-eperm-operation-not-permitted

上記の方法で解決できなければ、
前回の記事でも示したように、
AndroidManifest.xmlに
以下を追加してみてほしい。

~~~
<manifest>
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
</manifest>
~~~

以上。
IntelliJで特定の名前のJavaクラスが作れない

# IntelliJで特定の名前のJavaクラスが作れない
いつものようにIntelliJ IDEAを使っているとある日突然、特定のクラス名の時だけ
エラーが発生してJavaクラスが作れなくなってしまった。ネットで調べるとAndroid Studioの情報が多くなかなか解決しなかったのでメモ

## 事象
特定の名前(今回は"Main")でクラスを作ろうとすると・・・

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140013/1c26fe73-b90a-7f0f-19c9-69650cc8f1a6.png)

エラーが出る
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140013/acfa6d7a-408e-608d-b8f4-3ee7c18e07d4.png)

```bash:エラーメッセージ
Unable to parse template "Class"
Error message: Selected class file name "Main.java" mapped to not java file type 'Files supported via TextMate bundles'
```


生成されたファイルの中身はクラスとして認識されない
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140013/6791f79a-ce64-3682-611b-62a41c0579e0.png)



通常は・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140013/05db4ba2-ddec-4e16-5be4-4eb62b30e208.png)

こうなるはず
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140013/f5b8781d-07c7-2753-70d1-439d5a57a306.png)


## 対応

設定の"Editor>File Types"の中で、テキストファイルとして認識させるファイル名に何故か"Main.java"が含まれていたので削除
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140013/899d4d72-6aa0-4e54-d898-2cf28672cc24.png)

無事クラスとして認識された
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140013/f7d8bfd9-36c3-353b-b4df-0042b50e3951.png)


## ふりかえり
Android Studioでの同様のエラーの対処法として、設定のコードテンプレートの問題だと指摘する意見が散見され、ミスリードを誘われハマってしまった。
Android Studioを除外した検索結果で正解に到達、類似のソフトウェアの情報に惑わされないよう注意。
(改めてエラーメッセージを読むと、'Files supported via TextMate bundles'に答えがあった？？)
LaTeXで新聞編集を

 LaTeXで下記URLのような新聞を編集したく、資料収集を始める。
https://newproject.jp/resumepaper_mohno1.pdf


# 機能
1. 縦書き

2. 段組

3. ふりがな

4. 図、写真などの割付

5. 配置の変更


# 参照

TeX に関するメモ
http://www.capnoir.jp/old/texmemo.html

縦書きしてみよう
http://www.fugenji.org/~thomas/texlive-guide/vertical.html

より高度なLaTeXの使い方
http://sils.shoin.ac.jp/~gunji/CR/logs/misc.html

[LaTeX] LaTeX文書クラス
https://www.okomeda.net/wp/409/
ドメインを取得してMyDNSを使ってRaspberryPiを自宅Webサーバとして公開

# やること
ラズパイに置いてあるhtmlファイルを自宅外のiPhoneから取ってきて、Safariで見れるようにする。
### 目次

* Apache2とPHPをインストール -> 同一LAN内からはアクセスできるようになる
* ドメインをお名前.comで取得
* MyDNSというサービスを使って、自宅のIPアドレスを定期的に通知（１ヶ月何もしないと消えちゃうので気を付ける）
* ポートフォーワーディング等、ルータ設定
* ＃ SSL通信化(httpsによりSecureな通信、SSL証明書発行)


# Apache2とPHPをインストール -> 同一LAN内からはアクセスできるようになる

```:Terminal
sudo apt-get install apache2
sudo apt-get install php
```
htmlファイルの中に埋め込まれているPHPファイルを使えるようにするには多少ファイルをいじる必要があるみたいだが、aptでインストールすると、その辺も勝手にやってくれるみたい。

# ドメインをお名前.comで取得(自宅のIPアドレスが動的IPアドレスなのでグローバルIPアドレスがしょっちゅう変わる)

.me のトップドメインが初年380円と安かったので取得しちゃいました。
自宅のプロバイダ契約が動的IPアドレスだったので、外からグローバルIPアドレスでアクセスしても少し時間が立つとIPアドレスが変わってしまいアクセスできなくなってしまう。
なのでお名前.comでドメイン名を取得しMyDNSも使いました。
**お名前.comでMyDNSへたらい回しにする設定をした後、設定が反映されるまで１０時間以上かかりました。**

流れは
ブラウザ等で

* URLにドメイン名を入力
* そのトップドメイン名を管理しているDNS(Domain Name Server)サーバへ問い合わせる
* DNSサーバがそのドメイン名に割り当てられているIPアドレスを返す
* そのIPアドレスへブラウザがアクセスし、htmlファイルなりなんなりをもらって表示する。

しかし、お名前.comにこのドメインのグローバルIPアドレスはこれだよと使えても、それがしょっちゅう変わってしまう
そこで、MyDNSというサービスを使います。
MyDNSというのは、DDNS(DynamicDNS)サービスで、DNSが更に違うDNSに問い合わせる時の問い合わせ先です。
流れは

* URLにドメイン名を入力
* そのトップドメイン名を管理しているDNS(Domain Name Server)サーバへ問い合わせる
* **DNSサーバが、そのドメイン名の管理はこのDNSがやっているよ、と更に違うDNS(MyDNS)にたらい回し**
* **MyDNSは定期的に更新されている(更新するようにしている)ので、その最新のIPアドレスをお名前.comに返す**
* そのドメイン名に割り当てられているIPアドレスを返す
* そのIPアドレスへブラウザがアクセスし、htmlファイルなりなんなりをもらって表示する


# MyDNSというサービスを使って、自宅のIPアドレスを定期的にドメインと紐付ける（１ヶ月アクセス無いと消えちゃうので気を付ける）
ipv4とipv6どちらも更新されるようにする。

```sh:mydnsupdate.sh
#!/bin/bash
MID="自分のmydnsID"
PASS="自分のパスワード"
wget -O -  https://$MID:$PASS@ipv4.mydns.jp/login.html
wget -O -  https://$MID:$PASS@ipv6.mydns.jp/login.html
```
これをcronで定期的に実行するように設定。

# ポートフォーワーディング等、ルータ設定


# SSL通信化(httpsによりSecureな通信、SSL証明書発行)
https でないWebサイトはChromeの検索エンジンにひっかからなくなるらしい。（もうすぐ？）
https://piguide.dev/2019/03/13/raspberry-pi-ssl-certificates-using-lets-encrypt.html

# 参考サイト
Chrome リモート デスクトップでローカル⇔リモートでコピー&ペーストできるようにする方法 

Chrome リモート デスクトップでローカル⇔リモートでコピー&ペーストできるようにする（クリップボードの同期を有効にする）方法です。
設定を解除する方法についても併せて記載しました。

## 1. ローカル⇔リモートでコピー&ペーストできるようにする（クリップボードの同期を有効にする）
1. Chrome リモート デスクトップにアクセスし、「<」を押下する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/5396336b-aa15-ec03-9ae7-4603074ff218.png)

2. 「クリップボードの同期を有効にする」を押下する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/09c0e027-92c1-d352-5f8d-6036c9e686b3.png)

3. 「・・が次の許可を求めています」とアラートが出るので、「許可」を押下する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/895dd1fe-c039-8dcb-8282-7c893558ad1c.png)

## 2. ローカル⇔リモートでコピー&ペーストできないようにする（クリップボードの同期を無効にする）
1. 以下のURLを叩く
chrome://settings/content/clipboard

2. https://remotedesktop.google.com の右端の「その他の操作」を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/99730655-ee50-336d-0676-8c1fd75366da.png)

3. 「削除」を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/b49088b0-f803-76d8-3f5d-a88f001b8f6a.png)

## 参考
[Chromeリモートデスクトップ のインストールと使い方 | E.I.Z](https://eizone.info/chrome-remote-desktop/)
[Chromeリモートデスクトップ アプリ版からWeb版へ 使い勝手と注意点 | 俺の開発研究所](https://itlogs.net/chrome-remote-desktop-web/)
文字⇔数字を扱う

#はじめに

　本記事は、char型文字を数字として扱うテクニックに慣れるのに良い問題を[CodeWars](https://www.codewars.com/dashboard)で発見したので、紹介させていただきます。

※CodeWarsは2019/10/30時点で日本語対応しておりません。ご了承ください。

#問題URL


[Reversing a Process](https://www.codewars.com/kata/5dad6e5264e25a001918a1fc)

　要約：ある文字列を規則にのっとって変換するプロセスの逆操作をコーディングする問題です。(要約できているか怪しいですが…)

#ACコード

```Decode.java
class Decode { 
    public static String decode(String r) {
       int numkey = 0;
       String subs = "";
       for(int i = 0;i < r.length();i++) {
         if(r.charAt(i)-'a'>=0) {
           numkey = Integer.parseInt(r.substring(0,i));
           subs = r.substring(i);
           break;
         }
       }
       char[] ch = subs.toCharArray();
       StringBuilder sb = new StringBuilder();
       for(int i = 0;i < ch.length;i++) {
         for(int j = 0;j < 26;j++) {
           if(j*numkey%26==ch[i]-'a') {
             sb.append((char)(j+'a'));
           }
         }
       }
       if(sb.length() != ch.length) {
         sb.delete(0, sb.length());
         sb.append("Impossible to decode");
       }
       return sb.toString();
    }
}
```

#解説

- まず、変換キーとなる数字部分(`numkey`)と、変換後文字列(`subs`)を分割する。この際、(アラビア数字の文字コード番号)＜(アルファベットの文字コード番号)であることを利用している。

- 0～25(アルファベットの数)の範囲で`subs`１字毎に探索し、条件に合った数字にaの文字コードを足してcharキャストすることで文字にする。
(文字コードはaから順に1ずつ増えていくため、ヒットしたjにaの文字コード数を足せば、jに該当する文字を復元することが出来る。
ex. aの文字コード：0097　j＝2 ならば、j+'a'=0099 → 'c' )

- 順次文字を結合していき、decodeした文字列長が元の文字列長と一致しない場合「Impossible to decode」を代入する。
(※数字キーが2の倍数か13の倍数の時、一致しなくなる。)

以上操作が正しく動き、ACを取ることが出来ました。

#あとがき
　文字を扱うテクニックを複数学べた点で、この問題はcharの扱いに慣れるのに良い教材かなと思いました。「もっとスマートにできるよ！」や、「こんなやり方もあるね！」などあれば、コメントお願いします。
Contact Form 7 のテンプレートで使う内容をファイルから取得する

# Contact Form 7 のテンプレート書くの面倒問題
WordPress でサイトを構築するとき、お問い合わせフォームとして Contact Form 7 を利用すると、バリデーションなんかもよしなにやってくれて便利。

ただ、フォームで使うテンプレートを WordPress 上で書いていちいち保存しないといけないのが結構辛い。

特に開発中はさくっと手元で書いてさくっとオートリロードで確認したいし、テンプレートの内容もバージョン管理したいですね。

ということで、ファイルに記述した内容を Contact Form 7 のテンプレートとして利用できるように実装してみました。

## 実装

WordPress 用のテンプレートファイルのフォームを表示したい部分に、以下のコードを埋め込みましょう。

```php
<?php
add_action('wpcf7_contact_form', function ($form) {
  $path = '{ テンプレートを記述したファイルへのパス }';
  ob_start();
  include $path;
  $template = ob_get_clean();

  $p = $form->get_properties();
  $saved_template = $p['form'];
  if($saved_template === $template) return $form;

  $p['form'] = $template;
  $form->set_properties($p);
  $form->replace_all_form_tags();
  $form->save();
  return $form;
});
$useform = array_shift(get_posts(['post_type' => 'wpcf7_contact_form', 'posts_per_page' => 1, 'name' => strtolower(urlencode('{ 利用するフォームのスラッグ }'))]));
echo do_shortcode('[contact-form-7 id="' . $useform->ID . '" title="' . $useform->post_title . '"]');
?>

```

これでテンプレート用のファイルに記述した内容が Contact Form 7 のテンプレートとして利用されるはずです。やったね。

この方法だと Contact Form 7 の設定画面にもタグが認識されるので、メールの設定等も問題なくできます。

## 注意

今回の実装の場合、設定画面からテンプレートを編集しようとしてもファイルの内容で上書きされてしまうので、設定画面から編集したい場合は記述の調整が必要です。

また、この実装は WordPress のテンプレートに直接埋め込む場合の書き方です。WordPress 上のエディタから埋め込みたい場合はショートコード化するなどして調整してください。
削除したブランチを復活させたい！

## ローカルブランチを復活させたい！
git初心者の私が、gitで不要になったブランチが溜まってきたので整理しようと思い作業していたら、間違って作業中のブランチまで消してしまった...!!
という時に対処した方法を備忘録的にまとめました
（今回、sampleというブランチを消してしまった場合を書いていきます）

## 作業手順

#### ①過去の履歴の参照
Gitはバージョン管理だったり作業の履歴を残したりできるのもの。
ということは、変更履歴を遡れる！
まずは変更履歴を参照するコマンド

```git
$ git reflog
```
このコマンドを実行すると、変更履歴がかえってきます。


```
8db5957e0 HEAD@{0}: checkout: moving from sample to master
3adba6ba3 (origin/sample) HEAD@{1}: commit: add image
bcc3e6a1a HEAD@{2}: checkout: moving from master to sample
```

一番上の`HEAD@{0}`となっているのが、最新の操作です。


#### ②コミットを復活させる！
変更履歴を見ると、sampleブランチに最後にコミットした履歴は `3adba6ba3 (origin/sample) HEAD@{1}: commit: add image` だということが分かりました。

最後にコミットした内容がsampleブランチの最終形態です。
この状態に戻せば、ブランチが復活して内容をすべて取り戻すことができます！
以下の復活コマンドを実行します。

```
$ git branch ブランチ名 HEAD@{ログ番号}
```

今回のsampleブランチの場合は以下コマンドで復活！

```
$ git branch sample HEAD@{1}
```

あとは、ブランチ一覧を表示させてブランチが戻っているか確認してみましょう！

```
 $ git branch
    hoge
    sample
  * master
```
戻ってきてました〜！！
解決〜！

とはいえ、ローカルブランチを削除する時はちゃんと確認するのが一番ですね。
【ES6初心者向け】let、constの特徴

変数の宣言でなにを使っているかひとそれぞれかと思います。
私のweb制作の現場ではjsの量もそんなに多く無く、
コンパイルも面倒という理由からvarを使ってしまっているのでまとめました。
#let
### 二重に宣言できない

```js
let a = 10;
let a = 12;  //エラー
```
なのでswitch文内でletを使うとエラーがおきます。

```js
let x = 1;
switch (x) {
  case 0:
    let value = x+0;
  case 1:
    let value = x+1;
}
//Identifier 'value' has already been declared
```
下記ならOK

```js
let value ;
let x = 1;
switch (x) {
  case 0:
    value = x+0;
  case 1:
    value = x+1;
}
```
###再代入はできる

```js
let message = 'hello world';
message = message.toUpperCase(); 
console.log(message);  // HELLO WORLD
```
###狭くなったスコープの範囲
**var**

```js
if (true) { var num = 1; } console.log(num); // 1 
```
**let**

```js
if (true) { let num = 1; } console.log(num); // エラー
```
varは関数単位のスコープなのでifブロックを抜けても変数numが有効。
letはブロック単位({})のスコープなのでエラーになる。

#const
###再代入できない
```js
const message = 'hello world';
message = message.toUpperCase(); 
console.log(message);  // エラー
```
再代入できないできないので、
ぱっと見で再代入の可能性のない変数として見ることができ修正漏れや可読性に繋がる。
###値の変更はできる

```js
const obj = { name: 'jon' };
obj.name = 'bob';  // OK
```

#感想
学習していると、なるべくconstを使うことを推奨している説と、
constは確実に不変のもの(消費税など)だけに使う説がある気がします。
どんどん使って慣れていきたいです。


##追記(2020/6/14)
実際のフロントエンドの現場だと、再代入する必要のない物以外はconstが主流です。
そもそも、再代入自体があまりイケてない行為です。
なるべくconstで書きましょう
TypeScript: デコレータでobject.toString()の結果を[object Object]ではなく[object クラス名]にする方法

JavaScriptでは、クラスを`new`して作ったオブジェクトを`.toString()`しても`'[object Object]'`が戻り値になる。

この戻り値を、デコレーターを用いて`[object クラス名]`に変える方法を紹介する。

## `Object.prototype.toString`を上書きする必要はない

通常、コンストラクタが返す値は、`Object`を継承しているので、`toString`メソッドが生えている。`toString`の結果を変えようとするなら、`Object.prototype.toString`をオーバーライドする方法が思いつくが、その必要はない。`Object.prototype.toString`が`[object Object]`を返すのはデフォルトの振る舞いで、この戻り値の`Object`の部分だけを変更する仕組みがあるからだ。

## `Symbol.toStringTag`を使う

オブジェクトに`[Symbol.toStringTag]`プロパティがあると、`Object.prototype.toString`は`"Object"`よりも、そのプロパティの値を尊重してくれる。

```typescript
class Foo { } // 通常のクラス

class Bar {
    [Symbol.toStringTag] = 'Bar'
}

console.log(new Foo().toString()) //=> [object Object]
console.log(new Bar().toString()) //=> [object Bar]
```

参考: [Symbol.toStringTag - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag)

## `Symbol.toStringTag`をデコレータで実現する

クラスごとに`[Symbol.toStringTag]`を実装するのは面倒なので、デコレータで実現する方法を紹介する。

次のコードの`autotag`はクラスデコレータの実装で、デコレートされたクラスに`[Symbol.toStringTag]`プロパティを生やす。

```typescript
// デコレータの定義
const autotag: ClassDecorator = constructor => {
    constructor.prototype[Symbol.toStringTag] = constructor.name
    return constructor
}
```

使い方としては、クラスの手前に`@autotag`と書くだけ。これで、クラスに`[Symbol.toStringTag]`を実装したのと同じ効果が得られる。

```typescript
// 普通のクラス
class Foo { }

// デコレータを使ったクラス
@autotag
class Bar { }

console.log(new Foo().toString()) //=> [object Object]
console.log(new Bar().toString()) //=> [object Bar]

````
[来年度からプログラミング教育が必修化]小学生にお勧めのプログラミング学習サイトの紹介

## 概要
**この記事は来年度からプログラミング教育が始める小学生のお子さんを持つ保護者向けの記事になります。**

こんにちは情報系専門学校一年次のYuumaと申します。
資格やプログラミングの勉強をする傍ら学校の先生が小学生向けのプログラミング教室を小学校や区役所で行っているのでそこにボランティアとして参加して積極的に小学生に対してプログラミングの楽しさを教える活動をしています。
一番最近だと9/23に世田谷区役所で開かれた2019 おやじと子どもフェスタでゲームを通して小学生にプログラミングの楽しさを知ってもらうイベントを開いたりしました。

##本題
どうやら来年度から本格的に小学校でプログラミング教育が実施されるらしいのと2018年の小学生の習い事ランキング一位がプログラミング教室だったそうなので小学生にも簡単にプログラミングの学習ができるサイトをいくつか紹介します。

## Scratch(スクラッチ)
#### URL [https://scratch.mit.edu/](https://scratch.mit.edu/)

一つ目に紹介するサイトはScratchというサイトです。

※ユーザー登録をしないでも利用できますが登録すると自分が作った作品を保存したり世の中に公開した利することができるので登録しておくといいかもしれないです。

Scratchというのは米国マサチューセッツ工科大学(MIT)が開発したプログラミング言語学習環境で
命令が書かれたブロックを組み合わせることで画面のキャラクターを動かしたりしゃべらせたりするなどゲーム感覚でプログラミングを学ぶことができ子供たちがプログラミング学習が楽しいものだと知ってもらえることを目的としたサイトです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206739/a04cb765-dbc7-1285-149e-ba1879184153.png)
上の画像は実際にScratchをやっているときの画面です。

このプログラムではプログラムを開始する緑の旗を押すと猫のキャラクターが「こんにちは」と言ってくれるプログラムです。

命令がブロックに書いてあるので初めての方でも簡単に理解できると思いますし実際に私が小学生に教えに行ったときも少し説明しただけでほとんど触ったことのない子供でも簡単に命令を組み合わせてゲームを作っていました。

また、画面では漢字が入っている『日本語』を言語として設定していますが漢字がまだ理解できない子供向けにすべての命令がひらがなで書かれた『にほんご』を言語として設定することもできます。

プログラミングを視覚的に理解することができるのでプログラムの勉強を始めるのには一番向いているんじゃないかなと思います。

個人的に一番お勧めしたいサイトです。
## code.org
#### URL　[https://code.org/](https://code.org/)

こちらもScratchに似たブロックを組み合わせてプログラミングをできるサイトです。
私が実際に小学生に教えたのはこのサイトの『[MinecraftのHour of Codeチュートリアル](https://code.org/minecraft)』
というカリキュラムでした。このカリキュラムでは人気ゲームMinecraftの世界観をベースにキャラクターを[まえにすすむ][みぎにまわる][ひだりにまわる]といった命令を持つブロックを組み合わせてキャラクターを動かし画面上にいる羊に近づいて毛を刈ったり敵を避けながら家に帰るといった課題をクリアしていくものになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206739/29e9674d-751e-4423-9a81-55b6ab39434b.png)
上の画像は実際に私がMinecraftのHour of Codeチュートリアルをやっている画面です。
画面右側のスペースに前に進むといったブロックを置くことで左側の画面の中のキャラクターが命令道理に動いてくれます。
このカリキュラムでは全13ステージ+ボーナスステージ1ステージの14ステージでこれを全部クリアするとプログラミングの基礎的な要素である
 - ***上から下に順番に命令を実行していく順次構造の概念***
 - ***一定回数決まった命令を繰り返すループの概念***
 - ***もし○○なら××する～といった条件によって命令を変える分岐の概念***
を簡単に理解することが可能です。

Scratchよりもできることが制限されている反面プログラムの理解に特化しているのでプログラミングの基礎をしっかり固めておきたい子にはScratchよりもこちらの方がお勧めかなと思います。

またこのサイトでは紹介した『MinecraftのHour of Codeチュートリアル』の他にも様々なコースがあり4歳~18歳までと幅広い年齢層に向けたカリキュラムが存在するので気になった方はやってみるといいでしょう。
## おわりに
この記事を通してプログラミングがよくわからないものというイメージから面白いものというイメージに変わる子がいればうれしいなぁと思います。

今回は時間とか気力とかの都合で二つのサイトしか紹介できませんでしたがまだまだ紹介したいサイトはあるので気が向いたときに更新していくって形でやっていこうかと思います。

あと若干疲れた状態でこの記事書いているので誤字やわかりにくい表現等あると思いますので気になった点や指摘できる点があったらコメントで言ってくれればすぐに直します。

この記事が少しで良いなって思ったらいいね押していってくれるとモチベーションの維持につながるのでよろしくお願いします。m(__)m
javascriptでオブジェクトって読み出し順番を記憶していない？？

## API作成時気づいた点

バックエンドでカテゴリ別表示順、コンテンツ別表示順にソートしたAPIを下記のJson形式でフロントに渡した。

```
{
    "status": 200,
    "response_time": 2.195805072784424,
    "message": "処理を完了しました。",
    "data": {
        "1:コンテンツ０１": {
            "5": "コンテンツ０１_０３タイトル",
            "4": "コンテンツ０１_０２タイトル",
            "1": "コンテンツ０１タイトル"
        },
        "2:コンテンツ０２": {
            "2": "コンテンツ０２タイトル"
        },
        "3:コンテンツ０３": {
            "3": "コンテンツ０３タイトル"
        }
    }
}
```

しかし、せっかくバックエンドで表示順をソートしても、
フロントではオブジェクトだと順番通りに出てくることが保証されてないので、再びソートする必要があるらしい。

## 解決法

上記の理由でjavascriptで順序を持たせるには、バックエンドのAPIで数字用のkeyを用意するか、
配列かにして欲しいとことでAPIを下記に修正して渡すことに。

```
{
    "status": 200,
    "response_time": 3.044154167175293,
    "message": "処理を完了しました。",
    "data": [
        {
            "categoryOrder": 0,
            "categoryId": "1",
            "categoryName": "コンテンツ０１",
            "contentData": [
                {
                    "contentOrder": 0,
                    "contentId": 5,
                    "contentTitle": "コンテンツ０１_０３タイトル"
                },
                {
                    "contentOrder": 1,
                    "contentId": 4,
                    "contentTitle": "コンテンツ０１_０２タイトル"
                },
                {
                    "contentOrder": 2,
                    "contentId": 1,
                    "contentTitle": "コンテンツ０１タイトル"
                }
            ]
        },
        {
            "categoryOrder": 1,
            "categoryId": "2",
            "categoryName": "コンテンツ０２",
            "contentData": [
                {
                    "contentOrder": 0,
                    "contentId": 2,
                    "contentTitle": "コンテンツ０２タイトル"
                }
            ]
        },
        {
            "categoryOrder": 2,
            "categoryId": "3",
            "categoryName": "コンテンツ０３",
            "contentData": [
                {
                    "contentOrder": 0,
                    "contentId": 3,
                    "contentTitle": "コンテンツ０３タイトル"
                }
            ]
        }
    ]
}
```

結論：
Javascriptのオブジェクト（連想配列）はオブジェクトに代入された順番を記憶していない。
Javascriptの配列は配列に代入された順番を記憶している。

## 参考サイト
https://mimirswell.ggnet.co.jp/blog-239
amazon linux2のrootでdocker-composeさせる方法

ec2-userで行う
sudo yum update -y
sudo yum install -y docker
sudo service docker start
sudo chkconfig docker on
sudo usermod -a -G docker ec2-user
ログアウトして再ログイン
docker --version

最新版
https://github.com/docker/compose/releases
sudo chmod +x /usr/local/bin/docker-compose
docker-compose --version

ec2-userでテストしたあと
sudo su
ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose
【備忘録】Vue.js 算出プロパティとメソッドの違い

算出プロパティはキャッシュされるので、依存しているVueインスタンスのデータが更新されたときだけ、再計算される。
メソッドは、再描画されたときに実行される。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Vue.js-Test-</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    </head>
    <body>
        <div id="example">
            <p>
                <button @click="countUp()">{{ count }}回</button>
            </p>
            <p>現在時刻（メソッド）：{{ getDate() }}</p>
            <p>現在時刻（算出プロパティ）：{{ date }}</p>
        </div>

        <script src="main.js"></script>
    </body>
</html>
```

```javascript:mainjs
var app = new Vue({
    el: "#example",
    data: {
        count: 0
    },
    computed: {
        date: function () {
            return new Date().toLocaleString();

            //この関数内でこのVueインスタンスのデータの変更があれば動く。
            //return this.count + new Date().toLocaleString();
            //↑これは動く
        }
    },
    methods: {
        countUp: function() {
            this.count += 1;
        },
        getDate: function () {
            return new Date().toLocaleString();
        }
    }
});

```
Rails6 のちょい足しな新機能を試す101（ActionController::Paramters#transform_keys編）

# はじめに

Rails 6 に追加された新機能を試す第101段。 今回は、 `ActionController::Paramters#transform_keys` 編です。
Rails 6 では、 `transform_keys` がブロックなしで呼ばれた場合、 Enumerater オブジェクトを返すようになりました。

Ruby 2.6.5, Rails 6.0.0, Rails 5.2.3 で確認しました。

```shell
$ rails --version
Rails 6.0.0
```

今回は、実用的な例を思いつきませんでした。
Userの CRUD を作って確認します。 今回は、Rails 5.2.3 の動作から確認していきます。

# Rails プロジェクトを作る

```
$ rails new rails_sandbox
cd rails_sandbox
```

# User の CRUD を作る

```shell
$ bin/rails g scaffold User name
```

# データベースのマイグレーションを実行する

```shell
$ bin/rails db:create db:migrate
```

# UsersController を変更する

`create` メソッドを以下のように変更してみます。

```ruby:app/controllers/users_controller.rb
class UsersController < ApplicationController
  ...
  def create
    user_params_by_transform_keys = params[:user].transform_keys(&:to_s)
    @user = User.new(user_params_by_transform_keys)

    respond_to do |format|
      ...
  end
  ...
end
```

rails server を実行して、 http://localhost:3000/users/new にアクセスしてユーザー登録してみます。

すると、 `ActiveModel::ForbiddenAttributesError` になってしまいます。

今度は、以下のように修正してみます。

```ruby:app/controllers/users_controller.rb
class UsersController < ApplicationController
  ...
  def create
    user_params_by_transform_keys = params[:user].transform_keys.each(&:to_s)
    @user = User.new(user_params_by_transform_keys)

    respond_to do |format|
      ...
  end
  ...
end
```

ユーザー登録できました。

# Rails 6 では

Rails 6 では、 `transform_keys` でブロックを指定しなかった場合、 Enumerater オブジェクトを返すようになっており

```ruby
user_params_by_transform_keys = params[:user].transform_keys(&:to_s)
```

としても

```ruby
user_params_by_transform_keys = params[:user].transform_keys.each(&:to_s)
```

としても、`ActiveModel::ForbiddenAttributesError` エラーになります。

エラーにならないようにするためには、一例として、 `permit` を使って

```ruby
user_params_by_transform_keys = params[:user].transform_keys(&:to_s).permit(:name)
```

のようにする必要があります。

Rails 6 の方が一貫性のある動作になっているように思います。

# 試したソース

試したソースは以下にあります。
https://github.com/suketa/rails_sandbox/tree/try101_parameters_transform_keys

# 参考情報

* [Return parameters enumerator from transform_keys/!](https://github.com/rails/rails/pull/36302)
CakePHP3でdebug()関数が効かない時

# debug()関数が効かない！？

メモ用。

変数やオブジェクトの中身を確認したい時、debug()関数が便利です。

```
<?php

$testId = 1234;
$assets = $this->AppTests->find()->where(['AppTests.id' => $testId]);

debug($assets);
```

上記のように記述することで、$assets変数の中を確認することができます。
ブラウザ上などで確認が可能。


## なぜか中身が見えない時

debug関数を使っても、中身が確認できない場合は、DEBUGモードがOFFになっている可能性があります。

### 「config>app.php」を確認
```
<?php
return [
    'debug' => true,
```

上記のようにデバッグモードがtrueになっていたら問題ありません。

ただし、本番環境ではここをOFFにしてください。
初投稿

#自己紹介
業務系アプリ開発要員→Webエンジニアに転向を測ろうとしているものです。
言語はruby on railsを勉強中です。
Qiitaさんは勉強したことのアウトプットとして、かつ有識者に確認を取るために利用しようと考えています。
#経歴
Fラン大卒。

2015年7月〜2017年6月
業務系アプリ開発（VB.net）

2017年7月〜2019年9月
業務系アプリ開発（java、javascript）

2019年10月〜
webアプリ開発プログラミングスクール（ruby)
　→今ここ

※（）内は使用プログラミング言語

#今後
フロントエンド、バックエンドのエンジニアとして生きていきたい。。。

#最後に
今後は週一程度をめどに学んだことでも出していきます。
Electronで作業中に使えるアプリを作っていたら残像が残った話

#症状
displayをnoneとした要素の影がついたままになって残像が残ってしまっていた(Macのみの症状)

```javascript
dom.style.display="none";
```
としましたが、

<img width="127" alt="スクリーンショット 2019-10-30 12.18.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68536/bcc4e8e2-466e-a567-a727-1a53fb2d2812.png">
↓dislpay:none;
<img width="137" alt="スクリーンショット 2019-10-30 12.18.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68536/086569f9-1cc1-0769-a5eb-24e71e113d4d.png">
**残像が残っている！**

これは困りましたね(困惑)

調べてみるとすぐに解決できました。
#解決方法
```javascript
win = new BrowserWindow({
 width: 1000,
 height:880,
 transparent:true,//ウィンドウ背景を透過
 alwaysOnTop:true,//常に最前面
 hasShadow:false,//残像が残らないようにする
 frame:false,//枠の無いウィンドウ
 webPreferences: {nodeIntegration: true}//nodeの機能つかうよ});
```
WindowオブジェクトのhasShadowというプロパティがデフォルトでtrueになっているのが原因で残像が現れています。
falseにすると残像がなくなります。やったね。
調べてみると、Macのみ存在するプロパティみたいです。
Google APIとPythonで低コストRPA -はじめに-

以下の投稿は、自社でOSSとPythonを組み合わせてRPAを実施したシステムエンジニアが感じた、RPAの現状の問題とその解決策の概要です。また、あくまで個人的な意見です。

# 低コストRPAを試みた背景
エンジニアの現場に止まらず、近年ではRPAを駆使した業務改善が試みられています。職場にもよりますが、RPAの一般的なプロセスとしては以下のようになると思います。

#### (RPAのプロセス)
1. 現在の業務内の課題の洗い出し
2. 業務内容の改善とRPAツール適用の要件定義/設計
3. RPAツール内の開発/セットアップ
4. RPAツールの運用/保守

プロセスの2段目から出てくるRPAツールのPackageとして、有名なものは様々なものがあり、書籍も多く発行されています。
私の現場でもこれらを導入することを検討しましたが、以下の理由からこれらのRPAツールを導入することが一旦見送られました。

#### (RPAツールの問題)
* 問題1: 初期導入/運用のコストが高い
* 問題2: 初見のRPAツールを使いこなすのに時間がかかる
* 問題3: そもそも課題の洗い出しと業務改善が大事

この問題に対して、私の出した結論は「OSS(オープンソース)とGoogle APIを駆使してRPA」を実行することでした。なぜこの結論が先述の問題への解決策になるかは以下の通りです。

#### (OSS×Google APIの選択理由)
* 理由1: OSSはもちろん、Google APIも特定の機能は無料である
* 理由2: 多くの作業はGoogle Apps(もしくはMS Office)で実施されておりユーザーの親和性が高い
* 理由3: 要件が変わった際にOSS言語であれば対応が柔軟に可能である

こういった理由が現状のRPAツールの欠点をカバーすると考え、私の現場ではOSSとGoogle APIを利用して業務改善をすでに複数実行し運用しています。

一方で、私は現状の数あるRPAツールを否定するつもりはありません。
RPAツールは優れたGUIや管理ツールやセキュリティ、要件定義/設計/運用保守を実施するコンサルタント/SEが付加価値として存在します。

私の意図としては、作業効率の改善にあまりお金がかけられない中小企業や学生が手軽にRPAする手助けになればと考えています。

問題と解決策の詳細が気になる方は後半に掲載します。
また、今後OSS(Python/Selenium)とGoogle API(Spread Sheets/Slides)を連携させた例をScriptを交えて投稿する予定です。

#一般的なRPAの問題
### 問題1: 初期導入/運用のコストが高い
RPAツールは複数存在しますが、大体のPackageは年間で数百万円のライセンス料がかかります。
また、「業務内容の改善とRPAツール適用の要件定義/設計」のような業務をコンサル/SIerに頼むと初期費用は数百~数千万円かかる可能性があります。
これは、年間数百億円利益を出している大企業なら可能かもしれませんが、多くの企業は導入を躊躇ってしまうと思います。

### 問題2: 初見のRPAツールを使いこなすのに時間がかかる
RPAツールは、導入コンサル/エンジニアでもない限り普段接することはありません。
しかし、RPAツールを運用するとなればはじめからトレーニングをし、使いこなせる必要があります。
ツールによっては公式で研修が実施されているようですが、ユーザーにとっては時間/費用がコストとしてのしかかる可能性があります。

### 問題3: そもそも課題の洗い出しと業務改善が大事
前述の「RPAのプロセス」にも書きましたが、RPAに大事なのは「1.現在の業務内の課題の洗い出し」と「2.業務内容の改善」であり、RPAツールはあくまで手段です。
ですが、RPAを導入検討する企業には、ツールを選定してから適用可能な業務領域を探す企業も見られます。
まずは、「従業員が業務の中で何に困っているのか」に焦点を当てるのが大事ですが、RPAツールの魅力や風潮から目的と手段を間違える可能性があります。

# OSS×Google APIの選択理由
### 理由1: OSSはもちろん、Google APIも特定の機能は無料である
私が主に自社のRPAに使用したOSSはPythonとSeleniumです。これらはオープンソースなのでもちろん無料ですが、Web Browserの操作からAPIとのデータIFとなんでもできます。
また、Google APIに関しては、主にSpread Sheets/Slidesを利用しています。これらのAPIは無料でCallすることができます。(2019/10/22時点)

### 理由2: ユーザーの親和性が高い
私は以前、ITコンサルタントを経験し複数のお客さん企業の現場を覗いていました。
そこでわかったこととしては、多くの企業は集計作業の際にExcel、報告の際にはPowerPointを使用しています。
近年ではGoogle Appsが台頭しており、私の会社でもGoogle AppsとMS Officeが併用されて多くのユーザーが実務で使用しています。
ここから言えることとしては、RPAで使用するツールをGoogle Apps(もしくはMS Office)にしてあげれば、多少の運用は変わりますが多くのユーザーが慣れ親しんだGUIで作業を続行することができます。

### 理由3:要件が変わった際にOSS言語であれば対応が柔軟に可能である
どの業界/業種でも日々の運用というのは徐々に変化していきます。そして、ある日新しい業務が発生することも稀ではありません。
もし、その業務が以前の業務と似ているものの細かな点が異なる場合には、OSS言語で汎用的なClassを作っておけば流用/カスタマイズが可能です。
Selenium Python readonlyに値をねじ込む。

###正しいかどうかは別として。

driver.execute_script("document.getElementsByName('name属性')[0].removeAttribute('readonly');")
変数名 = driver.find_element_by_name("name属性")
変数名.clear()
変数名.send_keys('ねじ込む値')

readonlyを一旦削除
入ってる文字を削除
値を入れる
【Tips】ファイルパスやissue(チケット)番号をショートカットキーで開く

## はじめに

メールやSlack、テキストファイルなどに記載されているファイルサーバへのパスや
issue(チケット)番号を都度コピーしてエクスプローラーやブラウザに張り付けるのが煩わしい。
該当箇所を選択したのちショートカットキー(ホットキー)で一発で開きたい。

## 課題

ファイルサーバなどでファイルを共有している場合メールやSlackでパスを伝えられるが、
丁寧にリンクになっていることもあるが多くの場合コピペしなければならない。

1. 該当範囲を選択
2. Ctrl + C
3. Windows + R (ファイル名を指定して実行)
4. Ctrl + V
5. Enter

issue(チケット)番号にいたっては

1. 該当範囲を選択
2. Ctrl + C
3. ブラウザで仮のissue(チケット)番号を開いて
4. Ctrl + V
5. Enter

## おすすめのアプリ

- [Keyboard Butler ～鍵盤の執事くん～](https://www.vector.co.jp/soft/winnt/util/se497417.html)  
一連のキーボード操作をショートカットキー(ホットキー)で実行可能


1. 設定例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485398/6c4c1356-32d1-f26d-7e87-9a03e934ee8f.png)
:information_source: Win + R で「ファイル名を指定して実行」ウィンドウが開くまでウェイトを 100msec 設定

2. 実行
該当範囲を選択して Ctrl + D でファイルを開けます

同様にブラウザで開く場合も強引に設定可能。。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485398/c1259357-a157-cf9e-89df-251b9243bf41.png)

- [Web Search Quickey](https://www.softpedia.com/get/Internet/Other-Internet-Related/Web-Search-Quickey.shtml)  
ファイルパスではなくissue(チケット)番号だけならこちらの方がシンプルです
【Tips】Chromeのユーザ管理で複数のAWSアカウントを使い分ける

## はじめに

AWSアカウントを複数使い分ける場合にサインインしなおすことなく複数ウィンドウでAWSコンソールにアクセスしたい。
そんな時はChromeのユーザ管理が便利です。

## Google Chromeのユーザー管理

1. ユーザーを管理
![ユーザーを管理.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485398/c1fe7713-f6f9-f954-5ace-99b7ed855a39.png)

2. ユーザーを追加
![ユーザーを追加.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485398/5cb39e06-35df-ccfc-94b3-9ed453243dca.png)

3. 追加
![追加.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485398/5f2b452a-e783-ec9d-4f67-0ff3383ff231.png)

4. Chrome起動

- デスクトップに作成されたショートカットからユーザー毎にセッションが独立したChromeを起動することができます