OmniAICreator/Qiita-1.07M huggingface dataset:
RubyMineで既存プロジェクトを開いた際の注意点

# 概要
Run Configuration Error:[No Rails found in SDK]への対応について
RubyMineを初めて使った際にはまったので備忘録として書いておく

# 環境
OS：MacOS Mojave
Ruby：2.6.３
　　　anyenv下のrbenvでインストール

# 現象
RubyMineで既存プロジェクトを開いて「Run Development project」しようとしたところ
下記のエラーが表示されて実行することができませんでした。

```
Run Configuration Error:[No Rails found in SDK]
```

また、ググって下記の対応してみましたが解決しませんでした。

- .ideaディレクトリを削除して再起動
- Tools-Bundler-install
- 「Edit Configurations」にてRuby SDKを「Use project SDK」や「Use other SDK」を変更
　どちらでも適正に設定されていれば大丈夫
- 「Edit Configurations」にてBundlerタブの「Run the script〜」にチェックをいれる
 - これだけでは解消しませんが、しておく必要はあります
<img width="1073" alt="スクリーンショット 2019-08-22 10.25.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41506/a0cd679b-235b-12ea-7c92-fab07a15ecb9.png">

# 原因
- プロジェクト内にインストールされたgemをRubyMineが認識するためには、プロジェクト直下に`.bundle/config`を設置する必要があるが、システム全体での設定`~/.bundle/config`で代用していたため未設置だったためでした。  
ちなみに、下記サイトの記述により気づくことができました。  
[Pleiades - RubyMine201902](https://pleiades.io/help/ruby/using-the-bundler.html)

>【引用】
この場合、Bundlerはgemsを vendor/bundle ディレクトリーにインストールし、.bundle/config ファイルをプロジェクトのルートに追加します。RubyMineはこの設定ファイルを処理して、gemsが vendor/bundleにインストールされていることを検出します。

~/.bundle/configで「BUNDLE_PATH: "vendor/bundle"」を設定していると
Tools-Bundler-installでオプションなし実行するだけでは、
プロジェクトのディレクトリ内にconfigファイルを生成しないことも原因でした。

# 対策
Tools-Bundler-installする際にオプションに下記を指定する
`--path vendor/bundle`
そうすればプロジェクト内に`.bundle/config`が設定されてエラーは解消されます
<img width="405" alt="スクリーンショット 2019-08-22 10.27.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41506/eeefb20f-f426-5fe6-a5f3-4ddfb0072048.png">
<img width="380" alt="スクリーンショット 2019-08-22 10.26.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41506/b26fc6e4-fe23-d4c1-1531-3142e9747874.png">

# その他
RubyMineでgemをインストールするとコンソールのコマンドでインストールした場合とで、vendor/bundle下の階層が違う。でも、configに記載されるのは`vendor/bundle`で同じ

- RubyMine
 - vendor/bundle/ruby/バージョン/gems
- コマンド
 - vendor/bundle/gems

これは、それぞれを下記で実行していたためということがわかりました

- RubyMine
 - rbenv exec bundle install --path vendor/bundle
- cmd
 - bundle install --path vendor/bundle
PostgreSQL カラム追加、削除、構造変更

## カラム追加

基本的なカラム追加のALTER文は以下。
テーブル名、データ型、追加するカラム名を指定する。

```sql:SQL
ALTER TABLE user_tbl ADD delete_flg character varying(1);
```

また、以下のようにすれば、NOT NULL制約やデフォルト値の設定ができる。

```sql:SQL
ALTER TABLE user_tbl ADD delete_flg character varying(1) DEFAULT '0' NOT NULL;
```

複数カラム追加の場合

```sql:SQL
ALTER TABLE user_tbl 
  ADD delete_flg character varying(1) DEFAULT '0' NOT NULL,
  ADD remarks text;
```

## カラム名変更

RENAME [変更前カラム名] TO [変更後カラム名] で記述する

```sql:SQL
ALTER TABLE 
  work_user_tbl 
RENAME 
  delete_flg TO del_flg;
```

## コメントの設定
データベース、テーブル、カラムにコメントを設定する

```sql:SQL
COMMENT ON TABLE user_tbl IS '使用者情報テーブル';
COMMENT ON COLUMN user.id IS 'ユーザーID';
```

## カラム削除

```sql:SQL
ALTER TABLE user_tbl DROP COLUMN delete_flg;
```

複数削除は以下。

```sql:SQL
ALTER TABLE user_tbl 
  DROP COLUMN delete_flg,
  DROP COLUMN rating_remarks;
```

## 制約削除

NOT NULL制約を削除したい場合は以下。

```sql:SQL
ALTER TABLE user_tbl ALTER COLUMN delete_flg DROP NOT NULL;
```
できるエンジニアはconsole.log()を上手く使いこなしている。（初心者向け）


## はじめに
できるエンジニアはconsole.log()を使いこなしているとのこと。
未経験から上がったような人向けです。
console.log()の配置場所、中身の書き方など参考すべき記事やアドバイスありましたら教えてください。

個人でのやりやすさが肝だと思うのでいろんな人の意見を聞きたいです。
node.jsを触っていて、フロントはさっぱりです。

デバック時のconsole.logの書き方
　


```.js
// DBからデータ取得時にはエラーが起きにくいので、データ取得の関数の後に`console.log()`を。
// DB更新時のエラーは起きやすいから、DB変更の関数の前後にconsole.log()を仕込む。 
result1 = getDate();
console.log('getDate: ' result);

console.log('addDate');
result2 = addDate();
console.log('addedDate: ' result2);


//簡潔な書き方
console.log(`checkdata: ${result}`) → console.log('checkdata: ', result) 

// 変数の型がわかる。
console.log(type of 変数) //stringなど。

//result1,2みたいな書き方は意図が読めず関数としては最悪なので実際には書かないでください。
```
Nuxt.js 2.9 + TypeScript のserverMiddelewareで tsconfigのpathsを使えるようにする

8/21 に Nuxt.js 2.9 (数時間後に2.9.1出ましたけど)でましたね！

バージョンアップや詳しいやり方は、[公式のマイグレーションガイド](https://typescript.nuxtjs.org/migration.html)を参照くださいー

Nuxt.js のserverMiddlewareは、ts-nodeを使ってるため、通常だと importで

```ts
import hoge from '~/hoge'
```
ができず、こんな感じで相対パスにしてたかと思います。

```ts
import hoge from '../hoge'
```

Nuxtではなく、ts-node単体で実行する場合は[tsconfig-paths](https://github.com/dividab/tsconfig-paths)
というライブラリを使うと

```sh
ts-node -r tsconfig-paths/register main.ts
```

とすると、 `~/hoge` が使えました。

Nuxt.js 2.9　で @nuxt/typescriptが分離され、 [@nuxt/typescript-runtime](https://github.com/nuxt/typescript/tree/master/packages/typescript-runtime/)
になり、 pathsが使えるようになったかな？ってみたところやっぱり使えなかったので、ちょこっとみてみたところこうすると使えました。

まず、[マイグレーションガイド](https://typescript.nuxtjs.org/migration.html)をみながらバージョンをあげておきます。

次に、[Runtimeのマイグレーションガイド](https://typescript.nuxtjs.org/guide/runtime.html#installation)の手順でruntimeを追加します。

Runtimeガイドには

```ts
"scripts": {
  "dev": "nuxt-ts",
  "build": "nuxt-ts build",
  "generate": "nuxt-ts generate",
  "start": "nuxt-ts start"
},
```
こう書いてありますが、、 [tsconfig-paths](https://github.com/dividab/tsconfig-paths)を packageにインストールしたのち

```ts
"scripts": {
  "dev": "node -r tsconfig-paths/register ./node_modules/@nuxt/typescript-runtime/bin/nuxt-ts.js",
  "build": "node -r tsconfig-paths/register ./node_modules/@nuxt/typescript-runtime/bin/nuxt-ts.js build",
  "generate": "node -r tsconfig-paths/register ./node_modules/@nuxt/typescript-runtime/bin/nuxt-ts.js generate",
  "start": "node -r tsconfig-paths/register ./node_modules/@nuxt/typescript-runtime/bin/nuxt-ts.js start"
},

```

こうすると、 tsconfigのpathsが使えるようになりました！

お試しください＾＾
コーディング時に意識すること

私がコーディング時に意識している事を紹介します。
※この記事は不定期でアップデート予定です。

# 全般
- どんなに軽微な作業であっても、必ず復元可能な状態を維持する
- フォーマット(整形)は小まめに行う※インデントが適切でないソースを見ると無意識だけど結構疲れてるかも
- フォントに拘る※0とo、1とl、全角半角スペース等、見分けにくいものを一生懸命見分けようとすると疲れる
- 汎用性の高いパーツを沢山生み出す
- エラーの想定から逃げない
- オブジェクト思考を積極的に取り入れる
- だらだらやらない※短時間で超集中！
- 使い勝手を常に意識する
- 疑問点は忘れないうちにメモする
- 積極的に提案できる事がないか考える

# コメント
- 沢山の箇所に入れておくのが無難
- 誰が見ても？が出ない範囲内で、文字数は極力少なくする

# 文字入力
- 予測変換やスニペットをフル活用する※入力が楽になるし、タイプミスも減る
- テキストエディターは徹底的に拘る※用途に応じて適切なテキストエディタで作業をする

# 変数
- 変数名はとにかく分かりやすくする※長くなっても予測変換を使えば入力楽々♪
- グローバル変数はなるべく増やさない※[グローバル変数を扱いやすくする工夫 - Qiita](https://qiita.com/sozaiya/items/4d6b47a3f1d91d6c333e)
Nuxt.js 2.9でのTypeScript対応

Nuxt.js v2.9がリリースされました :tada: 
<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="en" dir="ltr">Nuxt v2.9.0 is out 🥳<br>- Typescript support now externalised (<a href="https://t.co/AlvY55s0cC">https://t.co/AlvY55s0cC</a>)<br>- Vue Meta upgraded to v2.0<br>- 10+ bug fixes 🐞<br>- 10+ new features 🚀<a href="https://t.co/vEfQoUWh8l">https://t.co/vEfQoUWh8l</a> <a href="https://t.co/qwmSsEfkxJ">pic.twitter.com/qwmSsEfkxJ</a></p>&mdash; Nuxt.js (@nuxt_js) <a href="https://twitter.com/nuxt_js/status/1163740024606777345?ref_src=twsrc%5Etfw">August 20, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

TSの対応方法がそれまでと大きく変わっているので、[以前の記事](https://qiita.com/iwata@github/items/f798cc6cc24ac41a74d9)からの差分をのせていこうと思います。

オフィシャルの手順は以下になります。
[Migration from Nuxt 2\.8 \| Nuxt TypeScript](https://typescript.nuxtjs.org/migration.html)

## Runtime

前述の移行手順とは順序が異なりますが、以前の記事で`nuxt.config.ts`を使っているため、Runtimeを先にインストールします。

```
$ yarn add @nuxt/typescript-runtime
```

NuxtのTS回りのNPMがいくつかに分解されました。
そのうち、`@nuxt/typescript-runtime`はNode環境でTSを処理するためのものです。
具体的には`nuxt.config`や`serverMiddlewares`でTSを使いたいときに必要になります。
ちなみに`@nuxt/typescript-runtime`はProduction環境(NODE_ENV=production)でも必要になるので、`dependencies`に追加する必要があります。
(`nuxt-ts start`で使用するので)

また一連の`nuxt`コマンドを`nuxt-ts`にしてあげる必要があります。

```diff:package.json
   "private": true,
   "scripts": {
-    "dev": "nuxt",
-    "build": "nuxt build",
-    "start": "nuxt start",
-    "generate": "nuxt generate",
+    "dev": "nuxt-ts",
+    "build": "nuxt-ts build",
+    "start": "nuxt-ts start",
+    "generate": "nuxt-ts generate",
   },
```

一周回ってv2.5に戻った感じですねｗ

## `@nuxt/typescript-build`のinstall

`nuxt build`でTSを扱うためのものが`@nuxt/typescript-build`です。
`@nuxt/typescript`は`@nuxt/typescript-build`に含まれるようになったので直接の依存は不要になります。

```
$ yarn remove @nuxt/typescript
$ yarn add -D @nuxt/typescript-build
```

`@nuxt/typescript-build`は`nuxt build`などで使うだけなのでRuntimeとは違い、`devDependencies`として追加します。
`@nuxt/typescript`がRuntimeとに分離されて使いやすくなった感じですね。

また`nuxt.config.ts`内のConfigurationの型定義が`@nuxt/types`からExportされるようになりました。

```diff:nuxt.config.ts
-import NuxtConfiguration from '@nuxt/config'
+import {Configuration} from '@nuxt/types'

-const nuxtConfig: NuxtConfiguration = {
+const nuxtConfig: Configuration = {
+  buildModules: ['@nuxt/typescript-build'],
...    
}

module.exports = nuxtConfig
```

またv2.9で追加された[buildModules](https://nuxtjs.org/api/configuration-modules#-code-buildmodules-code-)に`@nuxt/typescript-build`を指定しています。
`buildModules`にすることでbuildのみ(generateも)で使用するmoduleを`devDependencies`に指定できるようになりました。

## `tsconfig.json`の更新


`tsconfig.json`の`types`に`@nuxt/vue-app`を指定していましたが、`@nuxt/vue-app`はなくなったので代わりに`@nuxt/types`を使う必要があります。

```diff:tsconfig.json
     },
     "types": [
       "@types/node",
-      "@nuxt/vue-app"
+      "@nuxt/types"
     ]
   }
 }
```

`@nuxt/types`が`@nuxt/vue-app`と`@nuxt/config`とを置き換える形ですね。
M2Detの環境構築（学習編）

#はじめに

M2Detの学習をするための環境構築について説明します。

## MSCOCOのデータダウンロード
[M2Detを試してみた](https://qiita.com/K_ichijima/items/a415d3d03f91274da4f3) の記事を参考にさせてもらいました。

```
cd
mkdir data
mkdir data/coco
mkdir data/coco/images
cd data/coco/images
wget http://images.cocodataset.org/zips/train2014.zip
wget http://images.cocodataset.org/zips/val2014.zip
wget http://images.cocodataset.org/zips/test2014.zip
wget http://images.cocodataset.org/zips/test2015.zip
wget http://images.cocodataset.org/zips/train2017.zip
wget http://images.cocodataset.org/zips/val2017.zip
wget http://images.cocodataset.org/zips/test2017.zip
unzip train2014.zip
unzip train2017.zip
unzip val2014.zip
unzip val2017.zip
unzip test2014.zip
unzip test2015.zip
unzip test2017.zip
rm *.zip
cd ..
wget http://images.cocodataset.org/annotations/annotations_trainval2014.zip
wget http://images.cocodataset.org/annotations/image_info_test2014.zip
wget http://images.cocodataset.org/annotations/image_info_test2015.zip
wget http://images.cocodataset.org/annotations/annotations_trainval2017.zip
unzip annotations_trainval2014.zip
unzip image_info_test2014.zip
unzip image_info_test2015.zip
unzip annotations_trainval2017.zip
rm *.zip
cd annotations
wget http://datasets.d2.mpi-inf.mpg.de/hosang17cvpr/coco_minival2014.tar.gz
tar xfz coco_minival2014.tar.gz
rm coco_minival2014.tar.gz
```

フォルダ構成としては以下のようにする

```
data-----coco------------images
               │           │ -----train2014
               │           │ -----test2014
               │           │ -----val2014
               │
               │-------annotations
               │           │ -----instances_train2014.json

```

## シンボリックリンクを貼る
ホームディレクトリのdataフォルダにシンボリックリンクを貼ります。

```
ln -s /media/hdd/work/data ~/data
```

## コードを修正する
dataフォルダにあるcoco.pyを以下のように編集する

```python:coco.py
 def __init__(self, root, image_sets, preproc=None, target_transform=None,dataset_name='COCO'):

        self.root = root
        self.data_path = os.path.join(os.path.expanduser("~"),'data')
-        self.cache_path = os.path.join(self.data_path, 'coco_cache')　←消す
+        self.cache_path = os.path.join(self.data_path, 'coco')　←追加する

```

## バッチサイズの変更
GPUの機種によっては、学習を実行するとout of memoryのエラーが発生する場合があります。
その場合は、configsフォルダにあるファイルのper_batch_sizeの値を修正してください。

## 参考URL
以下のサイトを参考にさせて頂きました。

開発メモ その170 M2DetをUbuntu18.04で使ってみる(学習編)
https://taktak.jp/2019/04/02/4014

M2Detを試してみた
https://qiita.com/K_ichijima/items/a415d3d03f91274da4f3

M2Detでデモ・評価・学習までやってみる
https://qiita.com/nabechi6011/items/2b0b44894b93b702215b
mbedのメモ

# mbedについて

## 使えそうなサイト

https://os.mbed.com/users/nxpfan/notebook/lets_get_started_jp/

https://os.mbed.com/users/nxpfan/notebook/links_4_mbed_primer/

https://os.mbed.com/users/nxpfan/notebook/faq-japanese/

https://os.mbed.com/users/okini3939/notebook/ref_jp/

これの中に答えはあるので頑張って探しましょう。一番下のリファレンスがなんだかんだいって一番使ってる。

## 制御の仕方とか

基本的にはC++。

ただピンを使うときは

```C++
DigitalOut	MyLED(LED1);
```

みたいな形で宣言をしないといけない。

そして出力するときは

```C++
MyLED	=	1;
```

みたいに値を代入する。

逆に入力する際は

```c++
#include<mbed.h>
DigitalIn 	Switch(p10);
DigitalOut	MyLED(LED1);
int main(void){
	if(Switch == 1){
		MyLED = 1;
	} else{
		MyLED = 0;
	}
}

```

みたいに変数として扱う。

ここで注意してほしいのは、Digital系はint、というかboolなんだけどAnalog系はfloatであること。

変数の型は合わせよう。

ちなみに待つときはwait_ms(ミリ秒)で指定する。



## 課題とか

1. DigitalOutを使ってmbedのLEDを左からなめらかに１つずつ光らせる。
Ubuntu 18.04 Nvidia RTX 2060 Super

# Ubuntu 18.04 で RTX2060 Superを

出たばかりの Geforce RTX 2060 SuperをUbuntuで動かす・・

UEFIブートでLiveUSBからUbuntu 18.04 日本語Lemixでインストールしたはいいが、起動後画面が乱れてログイン不可。

新しいカードはLinuxでは昔からご法度だったよね、と言いつつ標準ではsshdもインストールされて無いから諦め、古いグラフィックカードで再インストールしました。


Nvida公式サイトから新旧のカードをサポートしたドライバを探す
https://www.nvidia.com/Download/index.aspx?lang=en

手持ちのお古は750ti、これとRTX2060 Super どちらもOKなバージョンはというと　430.40 となりました。手順としては、

・750tiでUbuntuをインストール
・Nvidiaドライバを入れたあとグラフィックカードを交換
・デフォルトのログイン画面の固定

まずはデフォルトのnouveauが動いていれば無効化して設定を反映。

```Terminal
lsmod | grep -i nouveau	

cd /etc/modprobe.d/
sudo vi blacklist-noveau.conf
```
blacklist-noveau.confが無ければ作り、以下の2行を記載します。
blacklist nouveau
options nouveau modeset=0

・設定を反映させ

```Terminal
sudo update-initramfs -u 
```
Ctrl+ALT+F1キー等でCLIモードに入って作業。apt searchしてバージョン確認後にインストール->430.26が入りました。

```Terminal
apt search nvidia-driver-430
sudo apt -y install nvidia-driver-430 
reboot
```

☆Nvidiaから.runファイルを落としコンパイルして導入、またはppaリポジトリを追加してインストールする手もありますが、この後Tensorflowも導入してゆくつもりなので、環境が荒れないよう公式リポジトリからとしました。

・さて、手持ちのRTX 2060 Super の出力端子は3つあり、デュアルモニタでDPとDVIを使っていると、ログイン画面だけDVI側に出ます。カード自体にどのポートから出力するかの順番があるらしいですが、苛つくので固定しました。


・ドライバと同時にインストールされたアプリのNvidia X Server Setting を起動
X Server Display Configuration で設定、
[ Make this the primary display ]にチェック、
[ Save to X Configuration File ] で/etx/X11/xorg.conf に保存（su パスワード必要）
〜オリジナルはバックアップされるようですが、念の為どこかに保存が吉。

・ログイン画面のディスプレイサーバーがWaylandになっているのをXに

```Terminal
sudo vi /etc/gdm3/custom.conf
```

行頭の#を削除して保存、再起動後はログイン画面はメインモニタに出ました。
　#WaylandEnable=false 

めでたし、めでたし。
GCP アップデート (8/16-8/22 2019)

### AI Platform: [Aug 16, 2019](https://cloud.google.com/ml-engine/docs/release-notes#august_16_2019)
- 1.13と1.14がnumpy1.16.0の代わりに[1.16.4](https://github.com/numpy/numpy/releases/tag/v1.16.4)を含むようになったよ。


### BigQuery: [Aug 19, 2019](https://cloud.google.com/bigquery/docs/release-notes#august_19_2019)
- USマルチリージョンで、ストリームインサートをinsertId指定せずに行うとクォータが拡張されるのがベータになったよ。
  - 1M rows/second
  - 1GB/s

### LB: [Aug 9, 2019](https://cloud.google.com/load-balancing/docs/release-notes#august_20_2019)
- フィードは来たけどリリースノート見つからず。。。[これ](https://cloud.google.com/load-balancing/docs/internal/ilb-next-hop-overview)が来るはずだった模様。
- インターナルTCP/UDPロードバランサをネクストホップにできる機能がベータになったよ(のはず。)


### ディスクレーマ
- アップデートの内容はあくまでも個人の理解していることを書いています。正しい内容はリリースノート等を確認下さい。
- リリース内容できるだけ拾うようにしているのですが、抜けていそうなリリースノートが追加するのでぜひ教えて下さい！(一覧[ここ](https://qiita.com/kenzkenz/items/ac18a359b803dbb6b490)で更新してます。)
package.json について概要だったり、詳細だったり 

package.jsonってなんだ？となったので、備忘録。随時更新します。



## 関連用語

- Node.js・・・サーバサイドで動く javascript
- npm・・・javascript のモジュールを管理するツール。ruby でいう bundler のようなもの。
- yarn・・・npm と同じ javascript のモジュールを管理するツール。npm よりインストール速度が早いらしい

## 概要

パッケージの依存関係を記した json ファイル。rails で使用する Gemfile のようなもの

## 作り方

npm init でカレントディレクトリに作成される。

### 結果

カレントディレクトリ jstest で npm init を打って、何も入力せずに Enter 連打すると以下のようになる

```:コマンド結果
$ npm init
・・・略・・・
name: (jstest)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
/package.json:

{
  "name": "jstest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Is this ok? (yes) yes
```

```package.json
{
  "name": "jstest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
```

## 中身

### name

パッケージ名。必須。name と version で一意にする。他のライブラリと被ったらダメ

```
"name": "jstest"
```

### version

パッケージのバージョン。必須。パッケージ更新時は version も更新する

```
"version": "1.0.0"
```

### description

パッケージについての説明

```
"description": ""
```

### main

パッケージ内で最初に呼ばれるモジュール。今回で言えば、パッケージ jstest を require した時に、index.js 内で export しているオブジェクトが返る

```
"main": "index.js"
```

### scripts

シェルスクリプト、エイリアスコマンドを指定できる
test、start などの予約語を key 名に指定した場合、npm key 名でコマンド実行できる。(他の予約語はなにがあるか分からない・・・)

```
"scripts": {
    "test": "echo test"
  }
```

予約語以外を key 名に指定した場合、npm run key 名でコマンド実行できる。devDependencies にモジュール指定しておけば、PATH が自動的に通る

```
"scripts": {
    "webpack": "node_modules/.bin/webpack -d"
  }
```

と、書かなくてもモジュール指定しておけば以下のように書ける

```
"scripts": {
    "webpack": "webpack -d"
  }
"devDependencies": {
    "webpack": "^4.34.0"
 }
```

###

### author

著者を一人書く。プロジェクト開発ではあまり気にしなくていいかも

```
author: "Barney Rubble <b@rubble.com> (http://barnyrubble.tumblr.com/)"
```

### license

パッケージのライセンス。これも気にしなくていいかも。ISC はゆるいライセンスで、コピー、改変、配布などを許可するものらしい

```
"license": "ISC"
```

## 参考

[公式ドキュメント](http://liberty-technology.biz/PublicItems/npm/package.json.html)
[package.json の scripts についての備忘録](https://webman-japan.com/package-json-scripts/)
【勉強メモ】複数Gitアカウント開設してSSHで接続できるようにする

2個目GitHubアカウントを作成する際に、アカウント開設、SSH-keysの作成、登録などをキレイサッパリ忘れていた。
あと複数アカウント使用時に必要になる設定もあわせてメモ。

# GitHubアカウント開設〜リポジトリ作成

- [github.com](https://github.com) にてアカウント開設
- 新しいリポジトリを作成
- とりあえず、なんでもいいから一つcommitする（READMEなど）

# SSH keys を作成してGitHubアカウントに登録
- ターミナルからssh keysを生成する  
【参考記事】  
[お前らのSSH Keysの作り方は間違っている](https://qiita.com/suthio/items/2760e4cff0e185fe2db9)  
[ssh-keygenでファイル名を指定して鍵を生成する](https://qiita.com/goldbook@github/items/575981f3ec0bc582ea24)
- .sshフォルダに公開鍵（ファイル名.pub）と秘密鍵（ファイル名）が生成されているのを確認
- GitHubに公開鍵を登録
- ターミナルからgithub.comにsshアクセス。が、ここで最初にアカウント開設したユーザーが認識される
- .sshフォルダのconfigファイルにホストを追加してからアクセスする必要がある  
【参考記事】  
[【メモ】githubの複数アカウントにSSH接続するための設定手順](https://dev.classmethod.jp/tool/github-ssh-sub-account-setting/)  
[GitHubで複数のアカウントを使う方法](https://qiita.com/TakuyaHara/items/314ec68e2ecafb1956fe)  
- ホスト追加だけではアクセスできなかった。以下、原因と対策。
    - なぜか秘密鍵がちゃんと生成されていなかった → 現状のキーペアを削除して生成し直した（githubアカウントもssh keyを登録し直し）
    - `ssh-add`コマンドで生成した秘密鍵を登録
    - これで再度チャレンジしたら、sshアクセス成功！

# 次やること
あとはSourcetreeで複数githubアカウントを使えるようになる必要がある。

ちなみに、今回は朝活2回分（1時間 x 2回）だった。
初学者のメモ　デプロイ後のエラー文を確認する方法

#はじめに
プログラミングを初めて4ヶ月目に突入した初学者です。
デプロイ時にエラーが発生しましたが、エラー内容を確認方法が分からず躓いたのでメモを残します。
Qiita初投稿の為、暖かい目で見て頂ければと思います。

#環境
　開発
　・Ruby '2.3.8'
　・Rails '5.2.3'
　・vagrant

　デプロイ
　・AWS
　・nginx
　・unicorn

#エラー
ローカル環境ではエラーが発生しなくても、デプロイ後エラーが出ることがあります。
デプロイ後にエラーがあると以下の画面が表示されます
<img width="1439" alt="スクリーンショット 2019-08-22 5.55.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453605/fa8fee9a-0ed0-13c8-608f-1b1872b4f023.png">
これだけでは、エラーの原因は分かりません。
**We're sorry, but something went wrong.**をGoogleで検索しても様々な記事（原因）が出てくるのでエラー箇所を絞ることが出来ませんでした。
また、Google chromeの検証機能をしようして同様にエラー箇所を絞ることが出来ませんでした。

#エラーログを確認するには・・・
エラー箇所の絞るにはログをみる必要があります。
ログは以下の場所で確認することが出来ます。
・デプロイ後のログ確認
　”アプリケーション名/log/production.log”
・開発中でのログ確認
　”アプリケーション名/log/development.log”

#エラーログの確認方法
「ターミナル」
　1. EC2にssh接続する
　2. $ `cd /var/www/html/アプリケーション名`でに移動する。
　3. $ `cat log/production.log`を実行する。
<img width="1440" alt="スクリーンショット 2019-08-22 6.28.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453605/14a14fc6-6092-c439-8bb5-36766796b350.png">
　4. 実行すると今までのログが表示されます。
　　今回のエラー箇所は下から８、９行目になります。
　　 `ActionView::Template::Error (Mysql2::Error: FUNCTION portfolio.RANDAM does not exist: SELECT  users .* FROM  users  ORDER BY RANDAM()): `

#エラー箇所の修正
ランダム表示を今回実装したのですが、記述が正しくなかったのでエラーが発生したようです。
・修正前
```@users = User.order("RANDAM()").all```
・修正前
```@users = User.order("RAND()").all```
mysqlではRANDしか使用出来ないみたいです。

※今回はEC2環境で変更しています。`sudo vi app/controllers/エラー箇所のコントローラ名`

#デプロイ環境に変更を適応させる
今回はunicornを使用しているので`sudo service unicorn restart`を実行します。
これでエラーは解消され、正しく表示されました。
どうするjsdo資産 その2

#概要

jsdoが2019年10月31日（木）15:00 で、サービスを終了らしい。
自分、4000を超える資産がある。
昨日、サルベージできた。

#必要なurlの取得。

vbsでスクレイピイングして、jsdo.csvを作った。
3782取れた。

#htmlの取得。

8月21日、16：00に、アクセスできるようになった。
urlを組み立てて、vbsで取得、約2時間。
3775取れた。

#残り。

ストレージに、使用するファイルが残ってる。
今現在、アクセスできないので、未対応。

以上。
Google Cloud Next ’19 TokyoでLookerの話を聞いてきた


2019/8/1にGoogle Cloud Next ’19 Tokyoのカンファレンスにて、
lookerの展示とイベントをやってましたので、ざっくりですがメモ残します。

##イベントURL
https://cloud.withgoogle.com/next/tokyo/

##会場でもらえたもの
・Looker社のロゴステッカー
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242038/8fd218d5-1d80-5460-940c-bd7dc56e4172.jpeg" width=40% ALT="lookerステッカー">

##Looker社について
・既存顧客:1,800社以上
・資金調達額：280.5M＄
・従業員:700名超
・オフィス：Santa Cruz(本社）、ロンドン、ダブリン、東京（東京は2018年度立上げ）
・パートナー：Google, Amazon, SnowFlake, Cloudera, Microsoft, HPE, IBM

##Looker社のミッション
・データをよりスマートに活用することにより、ユーザーがより多くの事を行えるようにする

##次世代BI Lookerが目指す新たなデータプラットフォーム像
・データの活用をするときに、必ずデータ分析民主化というワードが出てくるが、
たいていは、データの可視化が出来ているとそれが出来ている。という認識を持たれやすい。

・データの収集と、BIツールの活用は広がりつつあるが、**69%の企業ではデータを十分に活用できていない**と感じられている。

・データはどんどん増えていく。**2025年までに175ゼタバイト！？**に。

・2018年から2023年までの間に**5億個の新しいビジネスアプリケーションが作成**される予測だが、これは過去40年間で作成されたアプリケーションと同じ数。これからは5年間で同じ数量産されていく。

・エンタープライズと呼ばれる大きな企業の中では、**平均して1100以上の業務アプリケーションが利用されているが、それらのデータを能動的に紐づけて分析する時代に**なってきている。

・たくさんの人がSQLを書いてデータ抽出をするようになるが、そこで書かれるSQLにばらつきが発生してデータ品質を保つのが難しくなってくる。

・データを有効活用している企業は、**接続可能な競争優位性を獲得する傾向が強い為、収益増加傾向に**なりやすい。

・分析機能の「組み込み」は自然な流れになる可能性がある。いちいち企業間のデータI/F用のSDKを導入して開発すると、手間とコストがかかり、メンテナンスも必要になる為、徐々にオープンな形でデータ共有がされていくかも？

・労働時間の減少と生産性向上を考える場合、既存システムのワークフローを基準にすると、改善が難しい為、新たな仕組みに組み替える事も考えた方がよい。

**・Lookerはこれらの問題に対処しやすい仕組みで設計されている！**

・ただしLookerはデータドリブンな企業にはフィットしやすいが、そうでない企業にはフィットしない。

##Lookerの3つの特徴（推しポイント）
・既存のBIツールと異なって、データはLookerには取り込まない

・LookMLという抽象言語を活用することで、SQLかけないビジネスユーザーがあたかもSQLを書いてデータベースアクセスして分析するようなデータの一貫性を保つことが可能。

・コラボレーションのしやすさ。顧客の持っているアプリと組み合わせて活用し分析できる為、短期間で運用にのせられる。

##Looker導入企業での事例紹介

####リクルートライフスタイル
・データ定義を管理部署で統一し、ハブレイヤーとしてLookerを活用することで、誰が触ってもデータ品質が保たれやすい状態に

####セールスフォース
・セールスフォースの仕組みにLookerを組み込むことで、データのドリルダウンをグラフから出来るようになっている

####ARM Treasure Data
・Lookerを組み込むことで、utilizationレポートの提供をしている。

####リクルートマーケティングパートナーズ
・slackにLookerbotをつなぐことで、slackからLookerのグラフを直接呼び出して分析可能になっている。

###＞Lookerは理想のワークフローを組むのに良い！上記導入企業のように業務に組み込めるから！


##まとめ
・データ活用方法は移り変わる。データソースも利用者も変わる
・データの可視化はゴールではなく、出発点。過去データを見て終わりではなく、正確なデータをリアルタイムに捉え、サービスへ転換
・ツールにワークフローを寄せるのではなく、理想的なワークフローにツールを寄せる


## イベント動画
最近はカンファレンスの動画もユーチューブに上がるようになっている為、
お時間ある方はこちらを見てもらう方が正確に内容把握できると思います（42分35秒の動画）
https://www.youtube.com/watch?v=nDvxmiOdyGk
ソレノイドとobnizでペンギンと遊ぶ夏休み

###:sunny:はじめに
小学生の夏休みっぽい宿題を作りたくて遊んでみました。
子どもの頃、貯金箱など飾れる工作は作ったことがあるのですが、
自働で動くものにチャレンジしてみたいと思い小学生に戻った気分で作ってみました。

###:sparkles:概要
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/417361/bd0c6859-45a2-d30a-0733-e67d53374b54.png)

###デモ動画
金魚蜂
https://youtu.be/9di4iWI7-3o

スイカ
https://youtu.be/-R8FI5KlZGY

カキ氷（NGシーン）
https://youtu.be/UvzwgnenSik



<iframe width="560" height="315" src="https://www.youtube.com/embed/UvzwgnenSik" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

###:star:材料
1.うなずきペンギン(SOLEKIT SKN-1521-04)
2.obniz
3.ポストカード（夏っぽい背景がおすすめ）
4.他（画用紙・色えんぴつ・クリップ）


★ソレノイドの型番
DC5V 770mA　プッシュタイプ（USBで給電しつつボタンを押して手動操作が可能）
![IMG_2824.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/417361/56c9b44e-d52d-9759-0017-26055f4a9027.jpeg)

###:ribbon:やりたいこと
ボタンで手動操作のところを、obnizを使い自働でペンギンがうなずくようにしたい。
自働でいくつか動くパターンを作りたい。

###:shamrock:コード
obniZの公式サイトには、すぐに試せるよう各パーツに適したサンプルの記載があります。
はじめてobnizを使用する場合でもすぐに使えるようになります。


```
// Javascript Example
var button = obniz.wired("Button",  {signal:0, gnd:1});
```
```
// Javascript Example
var button = obniz.wired("Button",  {signal:0, gnd:1});
button.onchange = function(pressed){
  console.log("pressed:" + pressed)
};
```

<参考ページ>
https://obniz.io/ja/sdk/parts/Button/README.md

###:umbrella2:難しかったところ
元々、obnizにはソレノイドのサンプルコードがあるので通常の接続方法であれば問題ありませんでした。
下記ページのソースを実行すると動かせるのですが、

▼obniz-Solenoid
https://obniz.io/ja/sdk/parts/Solenoid/README.md

キットに入っている型番では接続部分の赤と黒の線が写真のようにボタン、USBと一体となっているため、
obnizの0,1番に刺せないのです。

<拡大>
![IMG_2822.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/417361/8e545183-9a45-ea24-bb42-508d01457589.jpeg)

別のソレノイドを使ってもサイズが合わなかったり、壊したり試行錯誤…
※試しに切ってみてもobnizには接続できません！

<破壊例>
![失敗.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/417361/f8839c61-38dd-c301-068a-69e41bf1d2c4.jpeg)



詳しい方に相談をしたりして、下記のように2本線が出ている箇所に配線をつなぐことでやっと動かすことができました。


![IMG_2826.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/417361/e1a8ba7e-2616-f7c3-5ecd-74dfa9cecc7a.jpeg)



###:snowman:反省点
工作キット＝アレンジも簡単だと誤解していました。
最適化されたパーツが入っているため、動力が必要なものは、型番によってパワーやサイズが全然異なります。
ソレノイドのパーツ探しに時間を使ってしまったことが反省点です。


###:star:発展させたいこと
・対話感を出すためにうなずく（YES）だけでなく、首を振る（No）の動作をしたい。
左右に回転するラジコンに載せれば「イヤイヤ」の動きができるかも。

・スマートスピーカーでIFFFTと連携して、セリフを喋っているようなデモをしてみたい。

###:cherry_blossom:終わりに
工作は楽しいです！ただ、初心者は壊してしまう可能性もあるので、最初は予備のパーツで試したほうがよいです。
ソレノイドの電力にもよりますが、給電はＰＣと切り離したほうが何かあった時のためにもおすすめです。
VSCode + Xdebug + AWS(EC2, Ubuntu18.04)の設定

PortForwardの設定がポイントかな。AWSのインバウンド・アウトバウンドには追記の必要なし。

## TeratermのTERATERM.INIに追記

```

DefaultForwarding=R9001:localhost:9001
```

## TeratermでAWSに接続
ポートフォワーディングセットしてから接続。

## xdebugインストール
apt install php-xdebug

## php.iniに追記
/etc/php/7.2/cli/php.ini #cliでも使いたいなら
/etc/php/7.2/apache2/php.ini 
に追記。

```
xdebug.remote_port=9001
xdebug.remote_enable=1
xdebug.remote_autostart=1
xdebug.remote_host=localhost
xdebug.remote_log=/tmp/xdebug.log
```
※ xdebug.soの追記は不要。

## VSCodeの設定
launch.json

```
{
    "version": "0.2.0",
    "configurations": [      
        {
            "name": "xdebug",
            "type": "php",
            "request": "launch",
            "port": 9001,
            "pathMappings": {
                "/var/www/html": "${workspaceFolder}"
            }
        }
    ]
}
```
初めてのLaravel【準備編】

環境：mac
初laravelのため、備忘録です。

## phpのバージョンを確認

```
$ php -v
```
こんな風に出てきます。
<img width="436" alt="スクリーンショット 2019-08-22 2.01.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207237/212d4bf6-c8ab-d0ed-73b6-66ce425f99ae.png">


## composerの用意
- https://getcomposer.org/download/
で最新のcomposerをダウンロードします。

## composerを移動、パーミッション設定

```
##ダウンロードしたcomposer.pharが入っているフォルダに移動します。
$ cd /Users/ユーザー名/Downloads 
※ユーザー名には自分のユーザー名を入れてください。

##composer.pharをbinに移動します
$ sudo mv composer.phar /usr/local/bin/composer
※binがなかったら作成しましょう。
$ sudo mkdir /usr/local/bin

##パーミッション設定
$ chmod a+x /usr/local/bin/composer
```

# Laravelをインストール

```
$ composer global require "laravel/installer"
```

# 環境変数を設定

```
$ echo export PATH=\"$HOME/.composer/vendor/bin:\$PATH\" >> ~/.bash_profile
```

# 環境変数を読み込み

```
$ source ~/.bash_profile
```

# プロジェクトのテンプレートを生成

```
$ laravel new app
```

# ディレクトリ移動

```
$ cd app
```

# ローカルサーバーを起動

```
$ php artisan serve
```

# ブラウザで開く
http://127.0.0.1:8000
へアクセスし、この画面が表示されれば成功です。
<img width="1278" alt="スクリーンショット 2019-08-22 1.58.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207237/8ecc65f0-5905-d3c6-4eb7-a8a4d40b84e9.png">
【Nuxt.js】asyncDataの引数はContextというオブジェクトです

# asyncDataの引数について

Nuxt.jsでよく使われる「asyncData()」メソッドの引数には、
`Context`というオブジェクトが渡されてきます。

### 例

```vuejs:index.vue
export default {
  async asyncData ({ params }) {  // ここでContextが引数に渡されてくる
    let { data } = await axios.get(`https://api-test/posts/${params.id}`)
    return { name: data.name }
  }
}
```
参照：[公式ドキュメント/非同期なデータ](https://ja.nuxtjs.org/guide/async-data/)


# Contextとは

Contextには、`params`や`store`、`route`等の
asyncData内で使用できるオブジェクトが入っています。
Contextの詳細については、[公式ドキュメント/Context](https://ja.nuxtjs.org/api/context)に詳しく載っています。

# asyncData({ params })の{}はES6の分割代入

引数の{}のなかにContextの中身を書いているのは、
下記のような記法を利用しているためです。

### 例
```javascript:index.js
  const vegitables = { tomato: 1, lettuce: 2, eggplant: 3 }
  const { tomato } = vegitables

  console.log(tomato) //　「1」が出力される

```

# この記事を書いた経緯
Nuxt.jsで開発を始めた時、asyncDataの引数が何なのか理解に時間がかかったため、
分かりやすくまとめてあるサイトがあるといいなと思ったためです。
[公式ドキュメント/非同期なデータ](https://ja.nuxtjs.org/guide/async-data/)にasyncDataの引数についての記載はありますが、
理解に時間がかかりました。
RxSwift+MVVMでベース実装

# 公開にあたって
RxSwift,MVVMについて絶賛学習中なので、是非意見をいただきたいです。
とりあえず、githubの公開のみ。
随時、ソースの説明等更新を追記していきます。

# githubはこちら
[RxSwift+MVVVベース実装](https://github.com/Tetsukick/RxSwift-MVVM_base)
Seleniumをオフラインで動かす

# 参考サイト
◆WindowsにPython2.7とPython3.7が共存できるようにインストールする
　https://qiita.com/segur/items/23f276320216c3aa7cf7
　　※インストールパス："C:\Python37"
　　　環境変数追加
　　　　C:\Python37
　　　　C:\Python37\Scripts
　　　　C:\wakasama\Software\Python\GoogleChrome
　　　　　※下記配下を一括でコピーして上記フォルダーに配置し、Chromeの設定にある[既定のブラウザ]で規定に設定
　　　　　　"C:\Program Files (x86)\Google\Chrome\Application"
　　※起動時に「プロフィール エラーが発生しました」メッセージが表示される場合
　　　下記フォルダーにある「Default」フォルダーを削除
　　　　%USERPROFILE%\Local Settings\Application Data\Google\Chrome\User Data

◆pip installをオフライン環境で行う方法
　https://qiita.com/analytics-hiro/items/2565adbb2c900e6738cd
◆Python + Selenium で Chrome の自動操作を一通り
　https://qiita.com/memakura/items/20a02161fa7e18d8a693


# インストール
※前提として、必要なものは下記URLから事前にダウンロード

◆Python
　https://www.python.org/downloads/release/python-374/

◆GoogleChrome
　※インストール後に、下記フォルダーを丸ごとコピー
　　C:\Program Files (x86)\Google\Chrome\Application
◆Google Chrome Older Versions Download (Windows, Linux & Mac)
　https://www.slimjet.com/chrome/google-chrome-old-version.php
　　※古いバージョン（ただし非公式）

◆Google Chrome の自動更新を止める
　https://gist.github.com/t-mat/3696044

```sh:regist.bat
reg delete HKLM\SOFTWARE\Policies\Google\Update /v AutoUpdateCheckPeriodMinutes /f
```
◆Chromeで「アップデートは管理者によって無効になっています」エラーが出る場合の対処
　https://www.teradas.net/archives/16840/
　　※上記のレジストリ操作でも更新されたら、こっちのグループポリシー設定を試す

◆ChromeDriver - WebDriver for Chrome
　https://chromedriver.chromium.org/downloads

◆Selenium
　https://pypi.org/project/selenium/3.141.0/
　　※pip install selenium-3.141.0.tar.gz

◆urllib
　https://pypi.org/project/urllib3/1.24.1/
　　※pip install urllib3-1.24.1.tar.gz

◆pytest
　※未導入
　◆pytestに入門してみたメモ
　　https://qiita.com/everylittle/items/1a2748e443d8282c94b2
　　


# 動作検証
```python:test.py
import time
from selenium import webdriver

# chromedriver.exeはパス指定
driver = webdriver.Chrome(executable_path='D:\\Selenium\\chromedriver.exe')
driver.get('https://www.google.com/')
time.sleep(5)
search_box = driver.find_element_by_name("q")
search_box.send_keys('ChromeDriver')
search_box.submit()
time.sleep(5)
driver.quit()
```
google hangouts chat botってやつを作ってみた

# はじめに 

今日イチ笑えた動画です。
[【史上最恐】｢なんでもあり｣のカードを使って罰ゲームを回避せよ！](https://youtu.be/DHelYnbQ458)
今あなたが業務中でないならこの記事を閉じてこっちを見ることをオススメする。

# はじめに 2

無駄話失礼しました。
とりあえず、タイトルのとおりです。

- 使用技術
- bot作成方法
- google hangouts chat apiの仕様

この３つを完結に書きます。
<b>本件で使用したプログラムはgithubにアップしています</b>ので興味のある方はどうぞ。
[github:example_google_chatbot](https://github.com/taiseiotsuka/example_google_chatbot)

# 使用技術
- python 3系
- Django 2系
- google cloud platform

# bot作成方法
1. Webhook用エンドポイントのプログラムを作成します。
2. gcpのコンソールを開きます。
3. APIタブのダッシュボードに移ります。
4. google hangouts chatと検索します。
5. google hangouts chat apiを有効化します。
6. hangouts chat apiの設定画面を開きWebhook用のエンドポイントを登録します。
7. hangouts chat apiの設定画面でbot名を入力します。
8. hangouts chatを開いて7で設定したbot名を検索します。
9. なんでもいいのでbotに話しかけてみましょう。

# google hangouts chat apiの仕様
作成方法の項目1がミソなので、どういう仕様でWebhook用のエンドポイント作ればいいか解説します。

botにメッセージ送った際にエンドポイントにjsonのpostリクエストが飛びます。
エンドポイントではそれを受け取り、処理しresponceします。
※日本語の記事で見なかったのが、何をresponceするかの部分です。

下記が実際に作成して動作確認済みのコードです。

[続きはこちらへ移転しました!](https://se-taisei.com/items/python/hangouts-chat-bot)
AWS lambdaにzip形式でアップロードするとファイルが開けないと言われる

# やりたいこと

関数と外部ライブラリをまとめてzipしてlambdaにアップロードしたい。

# 遭遇したエラー

zipにして上げるだけだが、この後エラーに弾き倒されたので戦い方を記録しておく。

```
Could not open file:/index.js
The file could not be found on the file system.
```

<img width="530" alt="fe0105bec7b39d5b7e542ca1aaccda3c.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406130/50f6b748-818c-c83c-14df-f582771880a4.png">

# チェックしたこと

### 関数名

ハンドラの記述に合わせた関数名で作成する。

Pythonなら`lambda_function.py`
Node.jsなら`index.js`
コンソール上で見れる。

### zipの中身

単にzipコマンドを実行するとディレクトリ構造も含めて圧縮してしまうために、zipコマンドを実行する場所によってこのエラーが起こる。
解決策はそもそも末端まで降りてzipするか、`-j`オプションでディレクトリ構造を無視するか.

```:ディレクトリ構造
user
└── Hoge
    ├── hoge.py
    ├── slackweb
    └── slackweb-1.0.5-py3.6.egg-info
```

```:失敗
user$ zip -r Hoge.zip ./Hoge
```

```:成功
Hoge$ zip -r Hoge.zip .
```

```:成功
user$ zip -rj Hoge.zip ./Hoge
```

# 無関係と思われるもの

### Permission

上記の問題を解決したところ、関数ファイルとzipフォルダは644、ライブラリは755の条件でアップしたケースで問題なく動作した。
逆に、全て777にしたzipをあげてもダメなことに変わりはなかった。

### zipフォルダ名

lambdaに表示すらされないのでなんでもいいと思う。
【cakePHP3.x】常時SSL化対応

cakePHPで作ったPJをさくらレンタルサーバに反映させたのですが、さくらの案内通りだとうまくいかなかったので.htaccessファイルのメモ

# さくらの案内
```
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
```

# 実際はwebroot/.htaccessを下記に変更
```
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTPS} off
    RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>
```
Homebrewのインストール方法について

##はじめに
macOSのパッケージ管理システムである、Homebrewのインストール方法について、投稿します。
※エラーの対処法については、後半で触れています。

##インストール方法
ターミナルを起動し、以下のコマンドを入力します。
※コマンドはHomebrewの[公式サイト](https://brew.sh/index_ja.html)からコピペ

```ruby:ターミナル
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

（省略）

Press RETURN to continue or any other key to abort
==> 
Password:

（省略）

```

途中の「Press RETURN〜」でEnterを押し、password:でOSのパスワードを入力すればOKです。
※パスワードは入力しても文字が表示されませんが、そのまま入力しEnterを押せば大丈夫です。

以上で、Homebrewのインストールは完了です。
最後に、正しくインストールされているか、以下のコマンドで確認します。

```ruby:ターミナル
$ brew doctor
Your system is ready to brew.
```

このように、「Your system is ready to brew.」と表示されたら、無事にインストールが完了です。

なお、自分の場合、以下のようなエラーが発生したため、対処法についても記しておきます。

##エラー内容
```ruby:ターミナル
Warning: "config" scripts exist outside your system or Homebrew directories.
`./configure` scripts often look for *-config scripts to determine if
software packages are installed, and which additional flags to use when
compiling and linking.

Having additional scripts in your path can confuse software installed via
Homebrew if the config script overrides a system or Homebrew-provided
script of the same name. We found the following "config" scripts:
  /Users/name/.pyenv/shims/python3.6m-config
  /Users/name/.pyenv/shims/python-config
  /Users/name/.pyenv/shims/python3-config
  /Users/name/.pyenv/shims/python3.6-config
```

これは、PATH環境変数に、pyenvのディレクトリが含まれてしまっていることが原因で、エラーが起こっています。そのため、以下のコマンドを入力し、Homebrewを実行するときはPATH環境変数に、pyenvのディレクトリを含まないようにします。

```ruby:ターミナル
$ alias brew="PATH=/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin brew"
```
再度「$ brew doctor」を実行し、「Your system is ready to brew.」が表示されればOKです。

##参考サイト
https://qiita.com/takuya0301/items/695f42f6904e979f0152
【Excel】行番号を効率よく採番するための関数

##何行かごとにまとめる

3行ごとに1,2,3,1,2,3…と振る関数
`=MOD(ROW()+2,3)+1`

n行ごとに1,2,3...n,1,2,3...n,…と振る関数
`=MOD(ROW()+A$1-1,A$1)+1`

3行ずつ1,2,3…と振る関数
`=INT((ROW()+2)/3)`

n行ずつ1,2,3…と振る関数（n＝A1セル）
`=INT((ROW()+A$1-1)/A$1)`

見出し行を飛ばしてから振りたい場合は、-1の部分を-2にするなどして調整
`=MOD(ROW()+A$1-2,A$1)+1`
`=INT((ROW()+A$1-2)/A$1)`

###実例 （A1＝3）
※見やすさ向上のため、条件付き書式のカラースケールで色付け
![ex1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464218/4d0be81d-5c5e-e1f0-51a9-e122266f8d37.png)
KUSANAGI – nginxでベーシック認証の設定方法（SSLバージョン）

KUSANAGIで立てたWordPressにBasic認証をかけたくて、調べたけどうまくいかず試行錯誤した結果、うまくいった手順を記録します。
https:// のURL前提で書かせていただきます。

【公式】
　<a href="https://qiita.com/kotarella1110/items/be76b17cdbe61ff7b5ca">推奨するセキュリティ対応 – KUSANAGI</a>

【参考にしたサイト】
　<a href="https://susu.mu/archives/2181/">KUSANAGI – 超高速WordPress仮想マシンをnginxでベーシック認証する</a>
　<a href="https://qiita.com/kotarella1110/items/be76b17cdbe61ff7b5ca">Nginx で Basic 認証</a>

作業はroot権限で行なっている前提で書いています。rootでない場合は`sudo su -`などでrootに入ってください。

#.htpasswdファイルを作成
Basic認証のユーザーとパスワードのセットを生成します。

```conf

$ htpasswd -c /etc/nginx/.htpasswd [ユーザ名]
New password: [パスワード]
Re-type new password: [パスワード]
Adding password for user [ユーザ名]
```
#confファイルを設定します
該当ファイルがある場所へ一旦移動します。

```conf

cd /etc/nginx/conf.d
```
ここにいくつかファイルがあると思いますが、使うのは`[プロファイル名]_http.conf`と`[プロファイル名]_ssl.conf`の二つです。

###1.SSLオンリーにするため、１１行目のコメントを外します。

```conf

vi [プロファイル名]_http.conf
 11     rewrite ^(.*)$ [サイトURL]$request_uri permanent; # SSL ONLY
```

###2.Basic認証設定をします

色々設定しているため行数はずれているかもですが、//追加（４９、５０行目）
//コメントアウト（80行目）　//変更（８４行目） 部分を探して対応してください。

```conf

vi [プロファイル名]_ssl.conf

 47     location / {
 48         try_files $uri $uri/ /index.php?$args;
 49         auth_basic "Restricted"; #追加
 50         auth_basic_user_file "/etc/nginx/.htpasswd"; #追加
 51         #include naxsi.d/wordpress/*.conf;
 52     }

省略

 78     location ~* /wp-login\.php|/wp-admin/((?!(admin-ajax\.php|images/)).)*$ {
 79         satisfy any;
 80         #allow 0.0.0.0/0; #コメントアウト
 81         allow 127.0.0.1;
 82         deny all;
 83         auth_basic "basic authentication";
 84         auth_basic_user_file  "/etc/nginx/.htpasswd"; #変更
```

書き換えたら、上書き保存で最後に`$ service nginx restart`で再起動します。
これで、Basic認証がかけられているはずです！
goenvで1.12.9を使えるようにする

# 概要

goenvを利用していて、`goenv install -l` を打ったが、1.12.9がなかったので、goenvに用意されているgo-buildプラグインを使って、1.12.9を使えるようにしてみた。

使い方は下記READMEにて
https://github.com/syndbg/goenv/tree/master/plugins/go-build

## 手順

```
# goenvのリポジトリをクローン
git clone https://github.com/syndbg/goenv.git

# インストールしたいVersionのDirecotryを作っとく
mkdir $HOME/.goenv/versions/1.12.9

# １．１２．９のインストール
cd ./goenv
go-build 1.12.9 $HOME/.goenv/versions/1.12.9

# goenvのバージョンに追加されているかどうか確認
goenv versions
```

あとは`goenv local 1.12.9` や `goenv global 1.12.9` で切り替えができる。
Webページの背景画像設定(HTML,CSS)~スマホとPCで画像を変える方法~

# はじめに
今回はCSSでWebページ制作における背景画像の設定方法と端末ごとに表示する画像を変える方法について説明します.
# Webページの背景画像の設定方法
HTMLファイル及びCSSファイルに以下のコードを記述します.

```HTML:main.html
  <!--背景変更,headタグ内に記述-->
<link rel="stylesheet" href="common/css/sample.css" type="text/css">
```

```CSS:sample.css
body {
background-image: url("./images/bg1.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
```
**各設定の説明**

- background-repeat:背景画像の繰り返し(repeatで繰り返し)
- background-attachment:背景画像の固定・移動(scrollで移動)
- background-position:背景画像の表示開始位置
- background-size:背景画像のサイズ(自動的にサイズを合わせる)

他にもいろいろな設定が可能です.[参考](https://webst8.com/blog/css-background/)

# 端末ごとに表示する背景画像を変更
CSSファイルにて端末のサイズ(幅)ごとに表示画像を変更するコードを記述する.スマホは980px以下,PCは981px以上で設定をしています.

```CSS:sample.css
@media only screen and (max-width:980px) {
body {
background-image: url("./images/bg1.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
     }
}

@media only screen and (min-width:981px) {
body {
background-image: url("./images/bg2.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
     }
}
```

# おまけ
今回のように端末のサイズを調整し確認することを繰り返すなど,頻繁に繰り返していると,Webサイトへの反映がなかなかされない場合があります.そうなった場合はブラウザのキャッシュが原因の可能性が高いです.
キャッシュが残っていると,自動的に以前閲覧した，変更前のWebページを表示してしまいます．これを解決するには，キャッシュのクリアを行えばいいです．スマホなどの場合は履歴を消せば解決します．
動的なURLをブックマークする方法を紹介

## 動的なURLをブックマークする方法を紹介
URLに日付が含まれている場合など、動的なURLブックマークしたい場合があるかと思います。

そのような場合は、ローカルにHTMLファイルを作成してそれをブックマークしましょう。
そして、`<script>`タグを作成して、window.locationプロパティを使用することで、目的のURLにリダイレクトするようにします。

このようにして動的なURLをブックマークすることができます。この記事が参考になれば幸いです。

## 終わりに
私は現在、Web3のサービスの開発をしています。詳しくはこちらの記事をご覧下さい。
        [無料でイーサリアムが当たる、Web3時代の寄付サイトを作った話](https://note.com/kenroda/n/n814347fbdcd7)
processingでobjファイルの3Dデータを表示したら色がつかない

3Dデータをhttps://free3d.com/3d-models/obj
からダウンロードしてprocessingに表示しようとした。

webで調べるとOBJLoaderというライブラリを使うように指示されているが、processingだけの機能でいけた。昔はライブラリを入れないとできなかったのかな？

file:///Applications/Processing.app/Contents/Java/modes/java/reference/PShape.html

でも書いているようにPShapeで表示できるみたい。
processing ビジュアルデザイナーとアーティストのためのプログラミング入門P225にもサンプルプログラムが載っていた。


で、
3Dデータは容量が大きいだろうから、色々サンプルスケッチ描くたびに3Dデータをスケッチに入れていたらファイル容量いっぱいになるだろうと思って、
https://qiita.com/hyoutann/items/911102dc17d49ecc1626

上のように他の場所において表示させてみた。

そうすると、3Dデータは表示されるが、色がつかない。
.objファイルが形を表すデータで、.mtlファイルが色を表しているらしい。

ダウンロードしたデータにmtlファイルも入っているので、なぜ色がつかないのか不思議だったが、mtlファイルとobjファイルをちゃんとスクラッチの中にコピーすれば無事カラー表示されました。
10.1 プロジェクトマネジメント

# 10.1.1 プロジェクトマネジメントとは
## 定常業務とプロジェクト
1. 定常業務：規定の手順に従って反復的に行われる業務。
2. プロジェクト：①ある業務のために編成された期間限定のチームで、②独自のプロダクトやサービスを創造するために実施する業務。③目的を達成するために開始し、目的を達成した時に終了する。

## プロジェクトマネジメント
プロジェクトでは、合意された制約条件をバランスよく調整しなければなりません。そこで、隔週知識やツール。実績のある管理手法を適用し、複数の制約条件を調整しながらプロジェクトを成功に導くための管理活動が**プロジェクトマネジメント**です。

# 10.1.2 プロジェクトマネジメントの活動
1. 統合マネジメント
2. スコープマネジメント
3. タイムマネジメント
4. コストマネジメント
5. 品質マネジメント
6. リスクマネジメント

## 1. 統合マネジメント
1. プロジェクト憲章
2. プロジェクトマネジメント計画書
3. プロジェクト作業の指揮
4. 監視・コントロール
    1. 成果物の作成状況
    2. スケジュールの進捗状況
    3. 測定・評価
    4. 是正処置・予防処置
5. 統合変更管理
    1. プロジェクトの立上げ
    2. 計画
    3. 実行
    4. 要求変更のレビュー、分析、認否判定
    5. 承認済み変更に基づき、費用やスケジュール調整

## 2. スコープマネジメント
プロジェクトを確実に遂行するために必要な作業を過不足なく洗い出す。
1. スコープ計画
2. 要求事項収集
3. スコープ定義
4. WBS作成
5. スコープ検証
6. スコープコントロール

### 1. スコープ定義
1. スコープ：プロジェクトの範囲
2. 要求事項をもとに、成果物、必要な作業、前提条件、制約条件、除外条件→プロジェクト記述書に記録

### 2. WBS作成
プロジェクト作業を細かく分離する。最下位レベルの要素は、スケジュール、コスト見積り、監視、コントロールの対象となる単位。これをワークパッケージと言う。

## 3. タイムマネジメント
プロジェクトを所定の時間に完了させることを目的に行われる活動。WBSのワークパッケージをさらにアクティビティに分解する。

## 4. コストマネージメント
プロジェクトを決められた予算内で完了させることを目的に行われる活動。
1. コスト見積り：各作業を完了するために必要な費用を算出する。また、詳細が決まった段階などで見直しもする。
2. コストコントロール：コストスケジュールの予定と実績との差、終了時の総予算を測定し、コストが予算内に収まるよう、スケージュル通りに沿うように管理する。

## 5. 品質マネージメント
要求された品質を実現するたえに行われる活動。
1. 品質計画
2. 品質保証
3. 品質コントロール

## 6. リスクマネジメント
好機を高め、脅威を景観することを目的に行われる活動。
1. マイナスについてのリスク対応戦略
    1. 回避：原因を取り除いたり、計画変更でプロジェクトに影響を与えないようにする。
    2. 転嫁：リスクの一部または全部を第三者に移す。保険とか保証契約を締結。
    3. 軽減：リスクの発生確率と発生した場合の影響度を受容できるほどまで低下させる。
    4. 受容：リスクが発生した時点で対処する。
2. プラスについてのリスク対応戦略
    1. 活用：好機を確実に実現できるよう対応をとる。
    2. 共用：こうきを得やすい能力の最も高い第三者と組む。
    3. 強化：後期の発生確率やプラスの影響を増大させる。
    4. 受容：特に対応を行わない。
Raspberry pi 3 Model Bの環境構築メモ

## 何の記事か
Raspberry pi 3　Model Bでとりあえず使えるようになるまで。

## 使うもののバージョン
ハード　　　:Raspberry pi 3 Model B
OS　　　　　:2019-07-10-raspbian-buster-full

(自分用メモ)
ストレージ　:16GB micro SD(SunDisk)
電源　　　　：iPadの充電器(出力2.1A)＋microUSB-Btype(2.4A対応)
ディスプレイ：PC用の21インチディスプレイ

## 手順
1. Rasbianを焼く(詳細割愛)
2. 最低限のセキュリティ対策を施す  

少なっ
この記事の本体は、この過程で詰まったポイントだっ！

### 詰まったポイント　その1  
<a href="https://qiita.com/mochifuture/items/00ca8cdf74c170e3e6c6">参考サイト</a>にあったrpi-updateをしたら下記のメッセージが出てきた  

```
WARNIG: 'rpi-update' update to pre-releases of linux kernel tree and Videocore firmware.  

'rpi-update' should be used if ther is a specific reason to do so - for example, a request by a Raspberry Pi engineer.  
DO NOT use 'rpi-update' as part of a regular update process.   
```  

 
はい、やばいにおいがプンプンする。
調べたらやっぱり <a href="https://www.yukkuriikouze.com/2019/02/05/1608/">ダメだった。</a>  
Warningメッセージに"pre-releases"とあるように、動作が保証されてないものをインストールすることになってしまうそうな。

というわけで、rpi-updateを避けてユーザー設定。

### 詰まったポイント　その2  
Raspberry piの設定をもにょもにょいじっていたらviを抜けられない事象が発生。
viのコマンドが効いていないようだ。
どうやらRasbian上で':'(コロン)が打てていない。
キーボードのマッピングを<a href="http://tamazonr.hatenablog.com/entry/2015/09/03/214432">見直して</a>無事に使えるようになった。

### 詰まったポイント　その3  
作ったユーザーでsshログイン…しようとしたら拒否。
あれ？そういやssh接続ってどうやって有効化するんだっけ？
<a href="https://blog.ko31.com/201803/raspi-ssh-setup/">できた。</a>

### 詰まったポイント　その4  
rootのパスワードとか専用ユーザのパスワードとかすぐに忘れてしまった。
どうしよう。思い出せない。
仕方ないので、イメージの焼きこみから全部やり直した(涙)  
そんな時のためにKee Pass2を導入した。
http://it-hack.net/2016/04/17/post-1082/  

こいつ、できる！！
＃って、たぶん、皆さん似たようなの使ってますよね。。。

ってところで疲れたぶーーー。
続きはまた今度。

## 参考サイト
* Rasbianの焼き方  
https://www.ft-seabass.jp/memo/2018/07/23/raspbian-install-201807-memo/  
* 最低限のセキュリティ対策  
https://qiita.com/mochifuture/items/00ca8cdf74c170e3e6c6  
* rpi-updateをしてはいけない理由と代替手順  
https://www.yukkuriikouze.com/2019/02/05/1608/  
* Raspberry piのキーボードがうまく動かない  
http://tamazonr.hatenablog.com/entry/2015/09/03/214432  
* Raspberry pi でssh接続を有効化する  
https://blog.ko31.com/201803/raspi-ssh-setup/  
* KeePass2を導入する  
http://it-hack.net/2016/04/17/post-1082/
Swiftlintで警告がでないようにする

Swiftlintを導入すると、いろいろと警告を出してもらえるので便利な反面、エラーが出すぎるとエディタの可視性が悪くなります。
そこで警告を消す方法です。


`// swiftlint: disable <ルール名>`

ちなみに戻す方法はenableです。

`// swiftlint: enable <ルール名>`

# 参考

[[SwiftLint]コードの中で無効にするルールを指定する - Qiita](https://qiita.com/akatsuki174/items/13033ec34b6bcd880dfd)
[realm/SwiftLint: A tool to enforce Swift style and conventions.](https://github.com/realm/SwiftLint#disable-rules-in-code)
Powershellでvimを使う

## vimのインストール
以下リンクから日本語版or英語版どちらかを選んでインストール。

- [kaoriyaさん(日本語版)](https://www.kaoriya.net/software/vim/)
- [本家(英語版)](https://www.vim.org/download.php)
-> PC: Windows版は「MS-DOS and MS-Windows」からgvimXX.exeをインストール

インストールするディレクトリはどこでも。(最近のWindowsならデフォルトはC://Program Files (x86)/のはず)

## エイリアスコマンドを作成
Powershell上でコマンドからvimを立ち上げられるようにエイリアス設定する。

### 1. まず念のためPowershellスクリプトファイルの実行権限があるか確認する。
Powershellの設定を編集するために、Powershellスクリプトファイル(.ps1ファイル)の実行が有効になっていることが必要だが、Windowsはデフォルトだと大体これが無効になってる。(ウイルスなどに悪意のあるスクリプトを実行させないため)

試しに、Powerhsellで以下をたたいてみる。

```
get-executionpolicy
```

これでもし`Restricted`が返ってきたらスクリプトが無効な状態。以下をPowershellでたたいて`RemoteSigned`の権限に設定する。

```
set-executionpolicy remotesigned
```

これで再度`get-executionpolicy`をたたき、`RemoteSigned`が返ってきたらOK。

### 2. Powershellのプロファイルの場所を確認する。

Powershellで以下をたたくとプロファイル(Powershellの設定ファイル)のパスが返ってくる。

```powershell
$profile
```

`C:\Users\(ユーザー名)\Documents\WindowsPowerShell\Microsoft.PowerShell_profile.ps1` <- 多分大体ここになってる。もし存在してなければこのパスでファイルを作成しておく。

### 3. プロファイルにエイリアスの設定を追記
2.のプロファイル(.ps1ファイル)をテキストエディタで開いて以下を追記する。

```powershell
set-alias vi 'C:\Program Files (x86)\Vim\Vim81\vim.exe'
set-alias vim 'C:\Program Files (x86)\Vim\Vim81\vim.exe' 
```

`set-alias vi`以降の部分はインストールしたvimのパスなので自分がインストールしたところを記入する。

これでエイリアスの設定は完了。`vi`もしくは`vim`コマンドがPowershell上で実行可能になる。

## Powershellからvimを実行
試しにPowershellで、

```
vi testfile.txt
```

と打ってみる。

testfile.txtが作成され編集画面が立ち上がったら導入成功！
UIButtonの画像の色が変更できない時試してみること

#前置き

画像のtintColorが変更できない

#試してみること

###方法

![スクリーンショット 2019-08-21 23.01.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300780/60ada658-137c-b2d8-2570-42b53a93a706.png)

・画像の置いてある場所(Assets.xcassets)から色を変更したい画像を開いて、Render asをTemplete Imageに変更してみる

#まとめ
備忘録として

#参考リンク

https://stackoverflow.com/questions/41092855/uibutton-image-tint-not-working
Leetcode #287: Find the Duplicate Number

Solution 1: Sorting

```swift
func findDuplicate(_ nums: [Int]) -> Int {
    var nums = nums.sorted()
    for i in stride(from: 1, to: nums.count, by: 1) {
        if nums[i] == nums[i-1] {
            return nums[i]
        }
    }
    return -1
}
```

Solution 2: Set

```swift
func findDuplicate(_ nums: [Int]) -> Int {
    var seen = Set<Int>()
    for i in stride(from: 0, to: nums.count, by: 1) {
        if seen.contains(nums[i]) {
            return nums[i]
        }
        seen.insert(nums[i])
    }
    return -1
}
```
Visual Studio Codeの一括置換

# 背景
現在チームでアプリを開発している際に、haml、htmlで各個人個人が担当のviewを作成
個人個人が当てたclass名が他の人のviewに影響を与えるためclass名を変えたいがhamlで記載しているため、変更箇所が多い...
そんな時に使えるテクニック！！

# 使い方
`command + F`
<img width="282" alt="スクリーンショット 2019-08-21 23.06.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485253/110538f0-d8e9-a96e-d76e-23b44f884683.png">

図の矢印をクリック
<img width="282" alt="スクリーンショット 2019-08-21 23.07.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485253/c25c2dac-18e9-28d2-f117-cc65d5072f6f.png">

今回はclass名を
contents→contents1としたい!!!
<img width="484" alt="スクリーンショット 2019-08-21 23.10.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485253/7c20e1e7-b8db-3c9b-0509-f84c3f358029.png">

<img width="121" alt="スクリーンショット 2019-08-21 23.11.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485253/f5c5b281-71f3-3729-1d6c-d130e021571f.png">
右側をクリック
<img width="469" alt="スクリーンショット 2019-08-21 23.12.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485253/dbef8eee-3469-0efa-61ee-673f0a9ea9de.png">
class名が全て変わった！！！

# 以上
正規表現も使えます！！
自分にスキルがないだけで色々とできそうですね。
一つずつ吸収していきたいです！