OmniAICreator/Qiita-1.07M huggingface dataset:
PHPでエラーが発生しても必ずHTTPステータスが200になる現象

# 課題

Laravelでアプリを作っていて、いつからかエラーが発生しても必ずHTTPステータスが200で帰ってくるようになりました。

## 検証

XDebugでレスポンスオブジェクトを確認すると`422`となっていますが、ブラウザには200で帰ってきてしまいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29324/741268f7-d871-60e8-6e58-b276114c348c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29324/565840e3-0b4a-3d1b-c047-0e031b3eb8ce.png)


## 類似課題

https://stackoverflow.com/questions/16724772/laravel-4-always-returns-http-status-code-200

# 解決策

これはすごく苦労したのですが、最近追加したカスタムconfigファイルの1行目に空行が入っているのが原因でした。その行を削除すると正しいHTTPステータスが戻ってきます。

```php

// ↑ここに空行がありました。
<?php

return [
    'img_url' => env('IMG_URL'),
    ...

```

## 検証

LaravelだけではなくPHPの仕様なのかもと思い、プレーンなPHPで試したら再現しました。
PHPの仕様と思っていいのでしょうか。。。
【React Testing Library】getBy, queryBy, findByの使い分け

# 0. 背景
ReactでTesting Libraryを用いたテストコードを書いているときに、特定クエリに一致する要素を取得する方法として、`getBy...`, `queryBy...`, `findBy...`の3パターンある事に気がつきました。
3つの使い分け方を簡単に調べたので備忘録として残しておきます。

参考にしたページは[Testing Library](https://testing-library.com/)の公式ページとなっております。

# 1. それぞれの説明
※参照元: https://testing-library.com/docs/queries/about/

### getBy
>`getBy...`: Returns the matching node for a query, and throw a descriptive error if no elements match or if more than one match is found (use getAllBy instead if more than one element is expected).
`getBy...`: クエリにマッチするノードを返します。マッチする要素がない場合や、2つ以上のマッチが見つかった場合は、説明的なエラーを投げます。(Translated by DeepL)

### queryBy
>`queryBy...`: Returns the matching node for a query, and return null if no elements match. This is useful for asserting an element that is not present. Throws an error if more than one match is found (use queryAllBy instead if this is OK).
`queryBy...`: クエリに一致するノードを返し、一致する要素がない場合は null を返します。これは、存在しない要素をアサートする場合に便利です。複数のマッチが見つかった場合は、エラーをスローします。(Translated by DeepL)

### findBy
>`findBy...`: Returns a Promise which resolves when an element is found which matches the given query. The promise is rejected if no element is found or if more than one element is found after a default timeout of 1000ms.
`findBy...`: 指定されたクエリにマッチする要素が見つかったときに解決する Promise を返します。要素が見つからない場合や、デフォルトのタイムアウト（1000ms）後に複数の要素が見つかった場合には、Promiseは拒否されます。(Translated by DeepL)

# 2. 実際の使い方
以下のような使い分けにすれば良いのではないでしょうか？

- getBy: 特定クエリに**一致する要素を取得する**時はこちらを使う
- queryBy: 特定クエリに**一致する要素がないことを取得する**時はこちらを使う
- findBy: 特定クエリに**一致する要素を非同期で取得する**時はこちらを使う

### getBy: 一致する要素を取得
```react
import { render, screen } from '@testing-library/react'
import '@testing-library/jest-dom/extend-expect'
import Home from '../Home'

it('Should render hello text by getBy...', () => {
  render(<Home />)
  expect(screen.getByText('Hello by getBy!!')).toBeInTheDocument()
})
```

### queryBy: 一致する要素がないことを取得する
```react
import { render, screen } from '@testing-library/react'
import '@testing-library/jest-dom/extend-expect'
import Home from '../Home'

it('Should NOT render hello text by queryBy...', () => {
  render(<Home />)
  expect(screen.queryByText('Hello by queryBy!!')).toBeNull()
})
```

### findBy: 一致する要素を非同期で取得する
```react
import { render, screen } from '@testing-library/react'
import '@testing-library/jest-dom/extend-expect'
import Home from '../Home'

it('Should render hello text by findBy...', async () => {
  render(<Home />)
  expect(await screen.findByText('Hello by findBy!!')).toBeInTheDocument()
})
```

# 3. 最後に
それではみなさん素敵な(笑)テストライフを！！
Unity + Android In-App Review pluginが動かない件の対策

こんにちは。[virapture株式会社](https://virapture.com)の[もぐめっと](https://mogmet.com)です。

本日はAndroidでアプリ内レビューを表示することができる[In-App Review API](https://developer.android.com/guide/playcore/in-app-review?hl=ja)を動かそうとしたら動かなかったのでその解決tipsの紹介です。

## どういうときに動くか

In-AppReviewはストアからダウンロードした形でないと動くことがありません。
また、他にも下記のような条件があったりします。

- ユーザー アカウントが内部テストトラックに含まれている。
- ユーザー アカウントがメイン アカウントであり、Play ストアでそのアカウントが選択されている。
- ユーザー アカウントが Play ストアからアプリをダウンロードした（アプリがユーザーの Google Play ライブラリに表示されている）。
- 現在、ユーザー アカウントがアプリをレビューしていない。

cf:

https://developer.android.com/guide/playcore/in-app-review/test?hl=ja

つまり簡単に言うとテストするときは**内部テストでリリースしないとテストができません**！なんてやりづらいのでしょう！

また、他にもUSBデバッグをOFFにしないと動かないといったこともあるみたいです。

https://hirokuma.blog/?p=3101

ちなみに上記記事ではIn-AppReviewを出す前に1クッションいれた質問をいれてますが、In-AppReviewを出す前に質問を出すのはちょっとグレーです。

https://developer.android.com/guide/playcore/in-app-review?hl=ja

> 評価ボタンや評価カードを表示する前または表示中に質問をしない（「アプリを気に入りましたか？」といったユーザーの意見に関する質問や、「このアプリを 5 つ星と評価していただけますか？」といった予断を与える質問）。


## 更に動かない原因

先程説明した条件を満たしているのにも関わらず動かざることAndroidの如しで全くIn-App Reviewが表示されませんでした。

Crashlyticsで試しにログを飛ばしてみたらこんなエラーを飛んでいることが確認できました。

```
Non-fatal Exception: java.lang.Exception
AndroidJavaException : java.lang.ClassNotFoundException: com.google.android.play.core.review.ReviewManagerFactory
com.unity3d.player.UnityPlayer.nativeRender
```

なぜかClassが見つからないようです。

## 解決法

ということで上記エラーを調べたら答えがありました。

https://stackoverflow.com/questions/63534316/unitys-google-in-app-review-plugin-error-java-lang-classnotfoundexception-com

つまり、proguardに妨害されてるので下記を除外すればおｋとのこと。

```
-keep class com.google.android.play.core.** { *; }
```

ということで自分のUnityプロジェクトのandroidのproguard設定に追記してビルドしたところ無事動くことが確認できました！


## まとめ

produgardに設定を追加すればおｋ！！

めんどくさがらずちゃんとcrashlyticsでロガーを仕込むことは大事だなと思いました。

最後に、[ワンナイト人狼オンライン](https://online.1nite-jinro.com/link/blog)というゲームを作ってます！よかったら遊んでね！

https://online.1nite-jinro.com/link/blog

他にも[Camecon](https://camecon.me/)や[Offcha](https://offcha.com/)といったサービスも作ってるのでよかったら使ってね！

https://camecon.me/

https://offcha.com/

また、チームビルディングや技術顧問、Firebaseの設計やアドバイスといったお話も受け付けてますので御用の方は弊社までお問い合わせください。

https://virapture.com/
Type error: expected parameter accessTokenでenvファイルが読み込まれない

## 問題
nextjsにてContentfulのアクセストークンへのenvファイルへアクセスできない

## 解決法
dotenvというモジュールをインストールすると解決しました。


```
yarn add dotenv
```

```
npm i dotenv
```

https://www.npmjs.com/package/dotenv
GatsbyJSでwindowオブジェクトを使う方法

GatsbyJSでローカルフォルダでビルディング中、もしくはNetlifyなどでビルド時にwindowオブジェクトの何らかのエラーによってビルド失敗した方は少なくないかなと思います。

かくいう自分もビルド時にはなぜかwindowオブジェクトでローカル上ではビルドに成功（理由はわからない）したものの、GatsbyCloud(Netlifyみたいなサービス)のビルド&ホストではやっぱり動かなかったです。

そしてこの辺に関しては日本語の情報も少なく小ネタながらも記事化することにしました。

## 回避方法１：windowオブジェクトが使えないパターン

```sample.tsx
  useEffect((): void => {
    if (typeof window !== "undefined") {
      window.onscroll = () => {
        setOffset(window.pageYOffset);
      };
    }
  }, []);
```

GatsbyJSでwindowオブジェクトを使うための要点はビルディング中だけ回避することです。

自分がwindowオブジェクトをGatsbyJSで使ったパターンはスクロールアップやフッターメニューバーです。
スクロールを追跡する目的でwindowオブジェクトを使用しました
当然ながらwindowはビルディング中に使えないと怒られてしまうため window の判定を入れておくことで回避しました。


```
typeof window !== "undefined"
```

この書き方は公式にも記載されている回避方法です。
<a href="https://www.gatsbyjs.com/docs/debugging-html-builds/">Gatsby公式ドキュメント - Debugging HTML Buildsより</a>


## 回避方法２：Firebaseが使えないパターン

最初は Windowオブジェクト が原因だとわからず詰まったポイントです。
GadsbyJS の中で Firebase の firebase.initialize(config環境変数) で初期化を行う際に FetchAPI が使われています。
この FetchAPI は Window オブジェクトの一部であることがわからず詰まっていました。

MDNの文章を引用します

```
リソースを取得するためのリクエストは、 GlobalFetch.fetch メソッドを呼ぶことで作成できます。このメソッドは Window や WorkerGlobalScope といったインターフェイスによって実装されています。その結果、リソース取得を必要とする様々な場面での利用が可能です。
```
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API

といったように Window も関係していました。

したがって、srcディレクトリの中で FetchAPI を使わずに初期化する必要がありました。

### gatsby-config.jsの中で初期化させる
GatsbyJSには公式自前のプラグインである gatsby-plugin-firebase があります。これを使うことで初期化をconfig内で済ませておくことができます。

```gatsby-config.js
require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

module.exports = {
  // 省略
  plugins: [
     // 省略
    {
      resolve: "gatsby-plugin-firebase",
      options: {
        credentials: {
          apiKey: process.env.FIREBASE_APIKEY,
          authDomain: process.env.FIREBASE_AUTH_DOMAIN,
          databaseURL: process.env.FIREBASE_DB_URL,
          projectId: process.env.FIREBASE_PROJECTID,
          storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
          messagingSenderId: process.env.FIREBASE_MESSAGE_ID,
          appId: process.env.FIREBASE_APP_ID,
        }
      }
    }
     // 省略
  ],
}
```

## 備考
ちなみに自分のプロジェクトでは Gatsby(GraphQL), TypeScript, Firebase を中心の技術として扱い会員登録機能の実装として Firebase を用いました。
Cannot find module '@emotion/styled' from 'node_modules/@material-ui/styled-engine/node/index.js'のエラーの解決策

#@emotion/styledのError
以下のようなErrorが出たので解決策をメモがわりに記載します。

```
Cannot find module '@emotion/styled' from 'node_modules/@material-ui/styled-engine/node/index.js'
```

##解決策
```
npm install @emotion/react @emotion/styled
```
yarnを入れている人なら

```
yarn add @emotion/react @emotion/styled
```

該当部のpackage.jsonは以下になります。

```
  "peerDependencies": {
    "@emotion/react": "^11.0.0",
    "@emotion/styled": "^11.0.0",
    "react": "^17.0.0"
  },
```

多分、受講でこのようなErrorは指定のバージョンでやれば出ないと思いますが、
私は最新版のバージョンでやろうとしたため出たものだと思われます。

```
Module not found: Can't resolve '@emotion/react'
```
のErrorであれば
以下のstack overflowさんの記事が参考になると思います。
https://stackoverflow.com/questions/65486256/module-not-found-cant-resolve-emotion-react
【初心者でもわかる】Twitter広告のような画像を横に並べるスライドショーをCSSだけで作る方法

#どうも7noteです。Twitterの広告で、画像を横に並べて一枚ずつスライドできるスライドショーを見かけたので、同じようなものをCSSで再現していきます。

![sanple.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/bed5e827-0dc5-17c7-2131-366d8f3ca28c.gif)




## ソース

```index.html
<div class="box">
  <section>1</section>
  <section>2</section>
  <section>3</section>
  <section>4</section>
  <section>5</section>
</div>
```

```style.css
.box {
  width: 300px;  /* 適度な幅を指定 */
  height: 300px; /* 適度な高さを指定 */
  scroll-snap-type: x mandatory; /* スクロールスナップの指定 */
  overflow-x: scroll;            /* はみ出た部分をスクロールできる要素にする */
  display: flex; /* 要素を横並びにする */
}

.box section {
  scroll-snap-align: start; /* スクロールスナップの指定 */
  width: 200px;  /* 適度な幅を指定 */
  height: 200px; /* 適度な高さを指定 */
  text-align: center; /* 文字を左右中央にするため */
  line-height: 200px; /* 文字を上下中央にするため */
  flex: none;         /* 自動伸縮をさせない */
}

.box section + section {
  margin-left: 10px; /* 要素間に余白をとる */
}

.box section:nth-of-type(even) {
  background: #ccc; /* 偶数番の背景色 */
}
.box section:nth-of-type(odd) {
  background: #aaa; /* 奇数番の背景色 */
}
```

## 解説

JavaScript不使用で作ります。

`scroll-snap-type: x mandatory;`が今回のキーになるプロパティです。
これを指定することで、要素の左端に合わせてスクロール量を自動的に調整することができます。

あとは装飾的なCSSばかりですが、flexboxを使った横並びと、nth-childで色分けをして見やすくしたら完成です。



## まとめ

身近にあるものの作りをどうやって作るかは普段から意識しています。
こういうものを作りたいと言われた時に、即答で「できますよ。」と答えられるとカッコいいから。

でもただ単純に新しい技術を身につけてみたいという欲が強いだけかもしれないです。
きっとこの記事を読んでいる方にもそういう方が多いのかなと思いますのでぜひほかの記事も読んでみてください。実用的なことからしょうもないCSSまでいろいろ書いています↓

参考： 
https://qiita.com/drafts/eeba93e0275d8419f50b/edit
https://www.mitsue.co.jp/knowledge/blog/frontend/202102/02_1740.html
https://developer.mozilla.org/ja/docs/Web/CSS/scroll-snap-type

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
Get last monday in python3

* source

```python3
from datetime import datetime as ddatetime, date as ddate, timedelta as dtimedelta
from argparse import ArgumentParser

usage = 'Usage: python {} [--ndt <ndt>] [--help]'\
        .format(__file__)
argparser = ArgumentParser(usage=usage)
argparser.add_argument('-n', '--ndt', type=str,
                       dest='ndt',
                       help='now datetime')
args = argparser.parse_args()

if args.ndt:
    print("ndt set:" + args.ndt)
    ndt = args.ndt
    nd = ddatetime.strptime(ndt, '%Y-%m-%d %H:%M:%S')
else:
    nd = ddatetime.now()

cd = nd - dtimedelta(days=((nd.weekday())))
print(cd.date())
```

* execution

```bash
# python3 test.py  
2021-06-07
# python3 test.py --ndt "2021-06-09 00:00:00"
ndt set:2021-06-09 00:00:00
2021-06-07
# python3 test.py --ndt "2021-06-06 23:59:59"
ndt set:2021-06-06 23:59:59
2021-05-31
# python3 test.py --ndt "2021-06-07 00:00:02"
ndt set:2021-06-07 00:00:02
2021-06-07
# python3 test.py --ndt "2021-06-07 00:00:02"
ndt set:2021-06-07 00:00:02
2021-06-07
# python3 test.py --ndt "2021-06-10 00:00:02"
ndt set:2021-06-10 00:00:02
2021-06-07
```
CSSで要素を左右中央よせする方法

#CSSで要素を左右中央よせする方法

##左右の中央寄せ

左右の中央寄せは「インライン要素」と「ブロック要素」で中央よせする方法が異なります。


###インライン要素の左右中央寄せ

インライン要素の左右の中央寄せは、中央寄せしたいインライン要素の親要素（divなど)にtext-align:center;を指定すると中央寄せになります。

例

```html:index.html
<div class="center">
 <span>あいうえお</span>
</div>
```

この場合は「あいうえお」を中央とせしたいので、class="center"にtext-align:center;を指定します

```css:style.css
.center {
 text-align:center;
}
```

そのテキストが含まれているブロック要素に対してtext-align:center;を指定してあげると中央寄せにすることができます。

###ブロック要素の中央寄せ

ブロック要素の左右の中央寄せは、ブロック要素の左右のmarginをautoにすることで中央寄せにすることができます。
左右のだけの中央寄せなのでmargin:0 auto;と指定します。

```html:index.html
<div class="center">
 <span>あいうえお</span>
</div>
```

```css:style.css
.center {
 margin:0 auto;
}
```

と指定します。
これでもいいのですが、この指定だと親要素は中央寄せになってくれますがその中の「あいうえお」は親要素に対して中央寄せになってくれません。
そこで先ほど説明したtext-align:center;も指定します。

```css:style.css
.center {
 text-align:center;
 margin:0 auto;
}
```

このように指定すると、中央に寄せられた親要素の中でさらに左右中央に寄せることができます。

ここで注意したいのが、margin:0 auto;は指定した要素の親要素に対して中央寄せになることです。
中央寄せした要素の親要素が左寄せまたは右寄せになっていた場合はその分左または右に寄った状態となります。

画面の真ん中に表示したいけどできない時は、親要素も中央に寄せましょう。
それか、親要素の横幅をwidth:100%に指定する方法もあります。
【Nativefier】1コマンドでWebアプリをデスクトップアプリ化する

# 1コマンドでWebアプリをデスクトップアプリ化する

## Nativefierとは

Nativefierは、ウェブアプリをElectronでラップし、OS実行形式(.app, .exeなど)に変換するコマンドツールである。
1撃でアプリ化できるため、手軽で便利

## デスクトップアプリ化すると何が嬉しい？

開発中にGmailが来るたびに通知が来て、気付いたら同じWebアプリのタブを開きすぎてイライラした経験はないだろうか。
アプリ化することで下記のようなメリットがある。

- シングルトンで開くことができるため、既に開いているアプリがウィンドウに埋もれている場合は前に出てくるだけでブラウザのように複数開いてしまうことがなくなる
- SpotLightやAlfredで呼び出せるようになる
- Command + Tab のアプリ切り替えで表示されるようになる

要はブラウザタブを開き過ぎてしまって煩わしいような状況があればデスクトップアプリ化を検討していいと思っている。

## どんなウェブアプリをデスクトップアプリ化している？

- GoogleCalender
- Gmail
- GitHub
- GitLab

など、一日一回は必ず開くページで且つ、複数タブ開く必要性が薄いものはデスクトップ化すると便利である

## Nativefierの使い方

### googleMapをデスクトップアプリ化してみる

①まずnpmを使ってnativefierをインストールする

```php
$ npm install nativefier -g
```

②アイコンにするための画像をダウンロードして任意のディレクトリに配置する(筆者は`~/MyApp`に配置している)

③画像のあるディレクトリに移動してコマンドを実行

```php
// nativefier --name={設定したいアプリ名} {アプリ化するURL} --icon={アプリ化する際の画像ファイル}

~/MyApp $ nativefier --name=GoogleMaps https://www.google.com/maps/ --icon=google-maps.png
```

MyApp下に`GoogleMaps-darwin-x64`というディレクトリが作成されていれば成功！

④Spotlightで起動してみる(`Command + Space`)

![スクリーンショット 2021-06-13 14.41.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378609/13e2c89e-47bd-cc7b-e45d-d37eed603d77.png)

### 起動！

![スクリーンショット 2021-06-13 14.46.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378609/57905623-068e-b685-f0aa-6e2929b1c3d6.png)

### デスクトップアプリとして起動できたことがわかる

作ったデスクトップアプリをアプリをMacのDockに設定することも可能
FontAwesome.swift備忘録

## 導入
公式を参照のこと

https://github.com/thii/FontAwesome.swift

## アイコンの探し方

https://fontawesome.com/

上の公式サイト検索欄から検索。
カーソルをかざした際に「Pro」と右上に表示されないアイコンが無料で使える。
クリックするとアイコンの詳細画面が表示されるのでそこからstyleが確認できる。

## 呼び出し方

探したアイコン名とstyle、あとは色とサイズを指定するだけ。

```swift
// インポート
import FontAwesome_swift
import UIKit

// 例 youtubeのアイコン, brandsのスタイルが無料で使える
let itemIcon = UIImage.fontAwesomeIcon(name: .youtube, style: .brands, textColor: .gray, size: CGSize(30, 30)
```

## 注意点
FontAwesomeのアイコンはProプランに加入しないと扱えないアイコンも多く存在する。
FontAwesome.swiftからデフォルトで呼び出せるのは無料アイコンのみ。(Pro使えるようにする方法もあり)
表示できないアイコンは？アイコンが表示される。
同名のアイコンでも指定したstyleが無料で使えないこともあるので注意。

## 改善案
アプリ内で独自に使いたいアイコンはFAImageクラスとか別のクラス作成してそこから使い回すと、
毎回どのスタイルが無料で使えるか確認しなくて済みそう。
【情報の表現】基本情報技術者試験のためのコンピュータの構成

※この記事は
「栢木先生の基本情報技術者教室」を参考に学んだことをまとめた記事です。


##情報の表現

* コンピュータの全ての情報は電気信号の「ON」と「OFF」で切り替えられる
* コンピュータで扱う最小の情報量の単位を **ビット（bit）** という
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965248/e477bed1-6ac5-dc25-ffbf-5cf6129aa796.png)

* 1byte(バイト)　= 8bit(8ビット)
* byte(バイト)は情報量の基本単位
* このような「1」と「0」の並びを **ビットパターン** と呼ぶ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965248/fdf2a56e-7cd8-6172-aac1-ea286a6f7440.png)

* bitで表現可能な情報量 = 2のn乗通り
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965248/a211747b-a46a-2e6d-83ce-b00a4fbe5272.png)

* 大きな数・小さな数は全て表示すると大変なので下記記号で省略される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965248/5ca16111-7f88-4b5b-52cf-9fa9e8871eb6.png)

* データ量の処理の計算する上で数学の「指数の公式」を覚えていくべきである
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965248/0bff51d7-dd52-c4f1-3e6d-a6584747bb3b.png)

* コンピュータが文字を扱うことができるのは文字コードが使われているから
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965248/19dcfa49-2ff7-3f34-672a-9c188ff5eb3f.png)

* 文字コードには種類がある
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965248/260f9a40-8f09-6f90-699a-931fa0d4ea47.png)
QGISプラグインで気象庁降水ナウキャストをアニメ表示したりする

![animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/d46182bd-df15-6133-c564-af91352d0a54.gif)

## 降水ナウキャストについて

気象庁が公開する降水ナウキャストは、過去の降水量および1時間先までの予報です。データ形式はXYZタイルですが、時点ごとに別のURLが振られるため時系列表示が容易ではありません。そんなことが簡単に出来るQGISプラグインがあったら便利だなと思い思い立って作りました（トータル10時間くらい）。

## NowcastTool

https://github.com/Kanahiro/qgis-nowcast-tool-plugin


※さっき公式リポジトリにアップロードしたので、承認されるまで多少時間がかかります（長くて2,3日）。

公式リポジトリでダウンロード可能になりました。QGIS上からインストールする事ができます。

![スクリーンショット 2021-06-14 17.45.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/91f62bd2-e65a-542a-5575-a80f4e50022d.png)

このQGISプラグインを使えば、各時点のタイルの表示やアニメーション表示を簡単にできるようになります。冒頭のGIFアニメはこのプラグインを活用して作ったアニメーションです。

## 注意

- 非公式のソフトウェアです、このプログラムに関してデータ配信元である気象庁様に問い合わせはしないでください
- タイル画像の配信方式などは予期せずして変更される可能性があり、その場合このプラグインは使えなくなります

## 使い方

プラグインをインストールすると、ブラウザに``NowcastTool``という雨雲アイコンの項目が追加されます。

![doc-browser.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/31b284d6-f867-a072-cd93-83db1b0bfd8c.png)


QGIS起動時に自動で気象庁が配信しているナウキャストの時系列情報を取得し、``NowcastTool``以下にアイテムが追加されます。取得する時間範囲は、デフォルトで3時間前～1時間後です。過去データの取得範囲は変更可能です（後述）。


### 1時点のタイルをマップに表示

各時点のアイテムをダブルクリックもしくは右クリック「マップに追加」とすると、地図画面に表示されます。

![doc-onetile.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/1cdc9295-72f2-a1c8-caa1-f721550cf5dc.png)


### アニメーション表示

``NowcastTool``以下に存在する全時点のタイルを、QGIS3.14以降の基本機能である``TemporalController``でアニメーション表示が行えるよう設定したうえで、マップへ追加します。

ブラウザの``NowcastTool``を右クリックして``アニメーション表示``をクリックして実行します。

![doc-run-animation.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/e0a08fba-385e-f083-a142-a6cb78b19382.png)
![doc-animation.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/da7ff2e2-1acc-fa94-34e4-90a7bd4a7c81.png)


> TemporalControllerの使い方の説明は割愛します
[https://www.youtube.com/watch?v=-feo9urzCj4&t=119s](https://www.youtube.com/watch?v=-feo9urzCj4&t=119s)などを参照してください。

### 過去データの取得範囲設定

ブラウザの``NowcastTool``を右クリック、``設定``をクリックして設定画面を開きます。

![doc-run-config.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/1347f96e-0f79-d72b-0c1e-21ce1a22f1bf.png)
![doc-config-dialog.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/a74ad9bc-4748-ba01-9f34-1655432e35c6.png)


5分刻みで``1200分前～180分前``まで指定することができます。上限の1200分に特に意味はないので、要望などがあれば見直します。

->最大が5340分っぽかったので、そこまで設定出来るようにしました

## 終わりに

- 思い付きのわりに結構使い道があるプログラムになった気がする
- QGISプラグインはこういう<b>かゆい所に手を届かせる</b>のが得意です、かゆい所をどうにかしたい方はご相談ください、お仕事待ってます:)

## 参考

https://qiita.com/e_toyoda/items/7a293313a725c4d306c0
【Python】f文字列

# はじめに
Pythonで文字列の中に変数を組み込む場合、[Python3.6でf文字列が導入される](https://www.python.org/dev/peps/pep-0498/)までは、次のように[formatメソッド](https://www.python.org/dev/peps/pep-3101/)を使うのが一般的でした。

``` sample1.py
fruits = ['apple', 'orange', 'grape']

for i, fruit in enumerate(fruits):
    print('{}: {}'.format(i, fruit))
```

```
$ python sample1.py
0: apple
1: orange
2: grape
```

ただ、formatメソッドは上記の例を見て分かるように少し冗長な書き方になります。さらに、文字列の中に組み込む変数が増えた場合、括弧と変数の対応関係が直感的に分かりづらくなる欠点があります。

# f文字列
そこで登場したのがf文字列です。先の例は次のように書き換えることができます。

``` sample2.py
fruits = ['apple', 'orange', 'grape']

for i, fruit in enumerate(fruits):
    print(f'{i}: {fruit}')
```

```
$ python sample2.py
0: apple
1: orange
2: grape
```

出力結果は全く同じですが、書き方がシンプルになったと思います。文字列の中に組み込む変数が増えた場合でも、どの括弧にどの変数が埋め込まれるのかというのが直感的に分かります。

## f文字列と配列
f文字列に組み込む変数として配列を指定すると、次のように配列としてそのまま展開されます。

``` sample3.py
fruits = ['apple', 'orange', 'grape']

print(f'fruits: {fruits}')
```

```
$ python sample3.py
fruits: ['apple', 'orange', 'grape']
```

## f文字列と改行＆エスケープ
f文字列の中で改行したい場合、次のように改行文字（`\n`）を入れるだけです。

``` sample4.py
fruits = ['apple', 'orange', 'grape']

print(f'{fruits[0]}\n{fruits[1]}\n{fruits[2]}')
```

```
$ python sample4.py
apple
orange
grape
```

改行文字を単なる文字列として扱いたい場合、次のようにバックスラッシュでエスケープするか、もしくは`f`の前（後ろでもOK）に`r`を追加するとできます。後述しますが、`r`はr文字列（raw文字列）の`r`となります。

``` sample5.py
fruits = ['apple', 'orange', 'grape']

print(f'{fruits[0]}\\n{fruits[1]}\\n{fruits[2]}')
print(rf'{fruits[0]}\n{fruits[1]}\n{fruits[2]}')
```

```
$ python sample5.py
apple\norange\ngrape
apple\norange\ngrape
```

## f文字列とr文字列
先に述べたr文字列（raw文字列）ですが、これは読んで字のごとく括弧の中の変数を展開せずにそのままの文字列として扱います。

``` sample6.py
fruits = ['apple', 'orange', 'grape']

for i, fruit in enumerate(fruits):
    print(r'{i}: {fruit}')
```

```
$ python sample6.py
{i}: {fruit}
{i}: {fruit}
{i}: {fruit}
```

# さいごに
[f文字列をPythonのデフォルトの文字列にしようという動き](https://pyfound.blogspot.com/2020/04/all-strings-become-f-strings-python.html)もあるので、f文字列を知っておいて損はないと思います。他の言語でもf文字列と同様の機能があり使われることも多いので、個人的にはデフォルトになってもいいのではと思います。
outsystemsのアカウント申請について

outsystemsの初心者に対して、outsystemsの使用方法は連載させていただきます。
1回目で、outsystemsを開発時もっとも重要なアカウント申請からスタートしましょう。

まずは下記のurlをアクセスします

http://outsystems.com/home/GetStartedForFree.asp
![oimage01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/3e9231a5-03ea-4c6c-7255-13da4139af2f.png)


お名前とメールアドレスを入力して、パスワードを入れて[Agree and Start Free]ボタンを押下すると入力したメールアドレスに確認メールを自動送信します。
![oimage02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/71736933-c6ba-849f-6c1c-4037fc32df5d.png)





確認メールのアドレスをクリックするとoutsystemsのアカウントが使えるようになります。
![oimage03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/3c4c31d2-7007-9516-4275-215202894493.png)




次回はoutsystemsのhello worldプログラムから学びましょう。
自宅PCサーバ　ハングアップ時の再起動自動化

#はじめに
自宅PCサーバが原因もわからず、ハングアップして困ったことはないでしょうか？
いざ、自宅PCサーバを利用したい時に利用できないのは困りますよね。
そこで、手間をかけずにハングアップした際に再起動する方法を考えました。

#解決方法
PCがハングアップしたことをMackerelで検知させて、RaspberryPiでPCをリセットすることで、自動再起動を実現します。
よく似た解決策として、リモート電源タップなどを利用する方法もあるかもしれませんが、この解決策のポイントはハングアップした際に自動で再起動されることです。
また、この方法はノンプログラミングで実現可能です。
![スクリーンショット 2021-06-13 10.34.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172312/13387dd0-7eb6-9fed-974f-c5289db1c500.png)

#前提条件
この仕組みを利用するためには、以下の機器が必要になります。

- PCサーバのハードウエアとしてリセットの端子が存在すること
例）
![リセット端子画像](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172312/3cdd43c8-b88b-028a-e152-216e0365d0fa.png)

- Mackerelエージェント対応のOSであること
https://mackerel.io/ja/docs/entry/howto/install-agent

- RaspberryPi
リレーを動かすために必要です。
OSとnode-redをあらかじめセットアップしておいてください。

- リレー
リセット端子をショートさせるために必要です。
必ず高レベルトリガーのものを準備してください。
※値段が安かったので、低レベルトリガーのものを購入してみたのですがどうしても電源オン時に必ずリレーが動作してしまい、強制リセットになるため、注意して下さい。

#制限事項
今回の解決方法は起動中のサーバの再起動のみです。
電源のON/OFFはできません。

#設定手順

- Mackerelエージェントのインストール
Mackerelのサイトを参考にインストールしてください。
https://mackerel.io/ja/docs/entry/howto/install-agent

- Mackerel設定
PCサーバとMackerelの接続が途絶えた場合に通知をメールに送るようにしてください。
メール送信先は誤動作を防ぐために専用のアカウントを取得した方がいいと思います。

- Node-redの設定
node-redでメールをチェックさせて、PCサーバと通信できない旨のメールが届いたら、以下のスクリプトを実行し、GPIO端子３番をHIGHにして、5秒後にLOWにするようにしました。
工夫した点としては、関係のないメールが届く場合もあるため、対象のメールであるかを「switch」でチェックして誤動作を防ぐようにしました。
![node-redの設定イメージ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172312/4cdb2469-9dfc-856d-8d46-c026acc4d28d.png)

- RaspberryPiの配線
メールを受信した時のみリセット端子が閉じられることを確認してください。
![配線のイメージ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172312/b3f81e8d-413d-261a-9826-977335a6eba7.png)

#結果
元々、３、４ヶ月に一度の頻度でPCサーバがハングアップしていた状態なので、まだ、効果の程はわかりません。
[Rails] テストコードとは

##はじめに
私はテストコードを書くのが苦手です。特にこれを読めば、「そんなあなたでも大丈夫！テストコードを楽にかける方法が。。。」みたいな記事でもありません。

書くのが苦手な私に、こんなに重要で必要なものだから、書かないといけないんだよ。と再認識させるため、そもそもテストコードとはということをまとめてみました。よろしくお願いします。


## テストコード

テストコードとはアプリケーション内に記述するコードで、実装した機能が正しく機能するか自動で確かめてくれるコードです。

例えば、「名前の記入欄が空欄だとエラーがでる」や「メールアドレスが空欄だとエラーが出る」など、考えられる挙動を全て書き出し、そのテストコードを記述していきます。
記述するのは大変ですが、一度記述してしまえば、コマンド一つでそれらの挙動を自動で確かめてくれるのです。

## RSpec（アールスペック）
RSpecはRailsアプリケーションのテストコードを書くために用いられるGemです。
Railsには標準でmini_testというテスト用のGemが導入されていますが、RSpecを使うのが主流だそうです。

## なぜテストコードを書くのか
私はいつもブラウザで挙動がうまくいっているのかポチポチして確かめていますが、テストコードは書く必要はあります。

もしブラウザポチポチだけで確認を終えてしまうと、どのようなテストを行ったのか、記録が残りません。
また、ブラウザでポチポチしているのは人間なので、人為的ミスが起こったり、抜けがある可能性が高いです。
加えて、仕様に変更があったときは、もう一度全部確認し直さなければなりません。その変更で他の機能にも影響が及んでいる可能性もありますし。。。

しかしテストコードを書いているとそのようなことは起こらないため、アプリケーションのクオリティが担保がされるものと言えます。


テストコードはアプリケーションの挙動を漏れなく確認したり、変更があったときに迅速に対応できたりと、アプリケーションのクオリティが担保できる重要なものなんですね。

テストコードには書くべきパターンというのが二つあります。それが正常系と異常系です。

## 正常系
このテストは、ユーザーが開発者の意図する操作を行った時の挙動を確認するテストコードです。
例えば「正しく全ての項目が入力されていればログインできる」というのは、開発者が意図した操作で、正常系です。

## 異常系
こっちが私は記述量が多くて大変だと感じます。
異常系は正常系の逆で、開発者が意図しない操作をユーザーが行った時の挙動を確認するテストコードです。
例えば「パスワードが空欄だった場合、ログインできない」みたいなものです。

続いてテストの種類についてです。

## 単体テストコード
これはモデルやコントローラーなどの機能ごとに問題がないか確かめるテストコードです。
バリデーションの挙動を確認したりします。先ほどの「パスワードを空欄だった場合、ログインできない」というのはバリデーションがしっかり機能しているか確認している単体テストコードと言えますね。

## 結合テストコード
これはユーザーがブラウザで操作する一連の流れを再現して、問題ないか確かめます。
例えば、「投稿ボタンを押すと投稿完了ページに移動し、TOPページに戻ると先ほど投稿した内容が表示されている」といった一連の流れを一気に確かめます。これはコマンドを押してテストを実行すると、自動でブラウザが開き、アプリケーションが動き出すので、うおおおおおってなります。笑

## RSpecの導入と設定
最後にRSpecの導入方法と設定を残しておきます。よく忘れるので。。。

まずはGemfileにGemを追加します。**gem 'rspec-rails', '~> 4.0.0'**を記述してください
**group :development, :test do**の中に記述すること気をつけてください。（Gemの動作に制限を持たせるため。）

```Ruby:Gemfile
group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'rspec-rails', '~> 4.0.0'
end
```

記述できたら、ターミナルで導入したいアプリケーションのディレクトリにいることを確認して

```terminal:ターミナル
% bundle install
```

続いてターミナルで下記のコマンドを実行。

```terminal:ターミナル
% rails g rspec:install
```

下記のように表示されたら成功

```terminal:ターミナル
create  .rspec
create  spec
create  spec/spec_helper.rb
create  spec/rails_helper.rb
```

続いて、生成された.rspecファイルを開いて下記のように記述します。（2行目を追加）

```:.rspec
--require spec_helper
--format documentation
```

これで設定完了です。

おまけで、もし、例えばUserモデルのテストコードが書きたければ、ターミナルで下記のコマンドを実行して作成します。

```terminal:ターミナル
% rails g rspec:model user
```

## 最後に
オリジナルアプリのテストコードが全くかけておらずこれから取り掛かるのがちょっといやです。
ただテストコードは記述中にバグを見つけられたり、一発でクリアしたりすると気持ちいいので、個人的には取り掛かると結構ハマったりします。
【Php】Xss対策 ー学習ノート

# 初めに
Xssの対策について学習した内容のoutput用記事です。

※内容に間違いなどがある場合はご指摘をよろしくお願いします。
※こちらの記事はあくまでも個人で学習した内容のoutputとしての記事になります。

#Xss(cross site scripting)とは
攻撃対象者のWebサイトのユーザーが入力するフォームなどからjavascriptなどで不正な入力値を送り込み、悪質なサイトへの誘導や情報漏洩などの被害を与える攻撃手法。

# htmlspecialchars()
フォームなどの不正な入力値を安全な入力値に変換してくれる関数。第１引数に変換対象の文字列、第２,3引数にはoptionとしてフラグ、文字エンコードを指定します。

```php
htmlspecialchars (変換対象の文字列, フラグ, エンコード)；
```
フラグにはENT_COMPAT、ENT_NOQUOTES、ENT_QUOTESなどがあり、一般的にシングルクォーテーションとダブルクォーテーションを変換の対象にするENT_QUOTESを指定する。変換する文字エンコードはutf-8などを指定します。

```php
$str = 'hoge';
htmlspecialchars ($str, ENT_QUOTES, 'UTF-8')；
```

htmlspecialchars()関数は長いので、sp_charsという関数を作成し呼び出すようにします。

```php
function sp_chars($str)
{
  return htmlspecialchars($str, ENT_QUOTES, 'UTF-8');
}
```

# 入力画面,確認画面,表示画面を作成
入力フォームを用意します。画面の構成は入力/確認/表示にします。それぞれのファイルを用意するのではなく、一つのファイルでflagを作り、\$_POSTの値が入っているか否かによって表示するformの表示を切り替えます。

```php
$page_flag = 0;

if (!empty($_POST["btn_submit"])) {
    $page_flag = 1;      //確認画面
}

if (!empty($_POST["btn_confirm"])) {
    $page_flag = 2;      //完了画面
}
```
if文で条件分岐させます。\$page_flagが0は入力画面、1は確認、2は送信完了にします。

```php
    <?php if ($page_flag === 0) : ?>
        入力画面
    
    <?php endif; ?>

    <?php if ($page_flag === 1) : ?>
        確認画面
      
    <?php endif; ?>

    <?php if ($page_flag === 2) : ?>
        送信完了。

    <?php endif; ?>
```
formを用意します。確認画面には入力された値を表示します。表示される内容は作成したsp_chars関数で消毒します。

```php
  <?php if ($page_flag === 0) : ?>
        入力画面
        <form method="POST" action="xss.php">
            名前
            <input type="text" name="input_name">
            <br>

            <input type="submit" name="btn_submit" value="submit">
        </form>
    <?php endif; ?>

    <?php if ($page_flag === 1) : ?>

        確認画面
        <form method="POST" action="xss.php">
            名前
            <?php echo sp_chars($_POST["input_name"]); ?>
            <br>

            <input type="submit" name="btn_confirm" value="confirm">
            <input type="hidden" name="input_name" 
            value="<?php echo sp_chars($_POST['your_name']); ?>">
        </form>
    <?php endif; ?>

    <?php if ($page_flag === 2) : ?>
        送信完了。
    <?php endif; ?>
```

# 不正な入力でテスト
入力値に<script>alert('攻撃')</script>を入力します。
![スクリーンショット 2021-06-13 14.04.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/2dda27f2-abdf-c7e7-7a23-9c4271ec8c17.png)
確認画面に<script>alert('攻撃')</script>が表示され、javascriptの構文は実行されません。
![スクリーンショット 2021-06-13 14.06.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/dd083414-cc02-cb97-f7cc-124ae4a8d6a4.png)

# 参考サイト
https://www.kagoya.jp/howto/network/xss/
https://www.php.net/manual/ja/function.htmlspecialchars.php
https://www.flatflag.nir87.com/htmlspecialchars-555
線形代数学 - 行列

# 線形代数 - 行列
学習したことを忘れないように残そうかと。
数学的な表現が適切でないかもですが。。。

・連立方程式を解く際、行列を使って解くことができる。
・答えを導くための計算順は１通りでなく、やり方次第で何通りもある。

##記述の仕方
- 逆行列

"-1" が右肩にあると逆行列。
 
```math
\begin{pmatrix}
1 & 2 \\
3 & 4 
\end{pmatrix}^{-1}
=
\begin{pmatrix}
-3 & 2 \\
1 & -\frac{1}{2} \\
\end{pmatrix}
```

- 転置行列

縦横入れ替えをした行列。

```math
\begin{pmatrix}
1 & 2 & 3 \\
4 & 5 & 6 
\end{pmatrix} ^\mathrm{T}	
= 
\begin{pmatrix}
1 & 4 \\
2 & 5 \\
3 & 6
\end{pmatrix}
```

## 逆行列の求め方(掃き出し法)
例えば、2x2 の逆行列と計算する場合を考える。
逆行列を計算する対象の行列を下記とする。

```math
\begin{pmatrix}
1 & 4 \\
2 & 6 
\end{pmatrix}
```

縦線を挟んで右側に単位行列を書く

```math
\left(
\begin{array}{cc|cc}
1 & 4 & 1 & 0 \\
2 & 6 & 0 & 1 \\
\end{array}
\right)
```

あとは色々やって手段は問わずに、左側の行列を単位行列にしていく。
1行目をx倍して、2行目に足したり、1行目と2行目を入れ替えたり、なんとか計算すると、右側に逆行列出てくる。

```math
\left(
\begin{array}{cc|cc}
1 & 0 & -3 & 2 \\
0 & 1 & 1 & -\frac{1}{2} \\
\end{array}
\right)
```

##行列式

下記行列の行列式は

```math
a \times d - b \times c
```

【行列】

```math
\begin{pmatrix}
a & b \\
c & d 
\end{pmatrix}
```

【行列式】

```math
\begin{vmatrix}
a & b \\
c & d 
\end{vmatrix}
= ad - bc
```

3行3列の場合、行列の特性から下記のように分けて計算できる。

ある列の要素を取り出して、2x2の行列に変形して計算する。
取り出す列はどの列でも良い。
2行目1列目(d)を出した行列は行の入替をしているため、符号が反転する。

【対象の行列式】

```math
\begin{vmatrix}
a & b & c \\
d & e & f \\
g & h & i  
\end{vmatrix}
```

下記は全て上記配列の行列式。

- 1列目を取り出した場合

2列目、3列目の値を配列部分にする。
1行目(a)の場合、2行目、3行目の要素。
2行目(d)の場合、1行目、３行目の要素。3行目の要素が返還後の

```math
a
\begin{vmatrix}
e & f \\
h & i  
\end{vmatrix}
- d
\begin{vmatrix}
b & c \\
h & i  
\end{vmatrix}
+ g
\begin{vmatrix}
b & c \\
e & f  
\end{vmatrix}
```

- 2列目を取り出した場合

```math
b
\begin{vmatrix}
d & f \\
g & i  
\end{vmatrix}
- e
\begin{vmatrix}
a & c \\
g & i  
\end{vmatrix}
+ h
\begin{vmatrix}
a & c \\
d & f  
\end{vmatrix}
```

- 3列目を取り出した場合

```math
c
\begin{vmatrix}
d & e \\
g & h  
\end{vmatrix}
- f
\begin{vmatrix}
a & b \\
g & h  
\end{vmatrix}
+ i
\begin{vmatrix}
a & b \\
d & e  
\end{vmatrix}
```

行列って計算するときに結構、強力なツールになるんですね。
RAIDとバックアップの違い

## はじめに
業務でNASの買い替えを検討し、その際にRAIDの方式やバックアップとの違いについて調べた知見の備忘録


## RAIDとは
RAIDとは、NASなどのストレージにおいて複数のディスクにデータを書き込むことで耐障害性やパフォーマンスを向上させる機能である。
RAIDのディスクへの書き込み方式には複数の種類があり、それぞれ向上させることのできる性能や必要なディスクの数が異なる。代表的なRAIDの方式としては以下のようなものがある。

| RAIDの種類 | 耐障害性 | パフォーマンス | 必要なディスクの数 | 概要 |
| --- | --- | --- | --- | --- |
| RAID0(ストライピング) | × | ○ | 2 | 1つのデータを2つに分けて2台のディスクに分散して書き込む。分散して書き込む分パフォーマンスはいいが、ディスクが1台でも故障したらデータが失われる。 |
| RAID1(ミラーリング) | ○ | × | 2 | 2台のディスクに同一のデータを書き込む。片方のディスクが故障してもデータは失われない。
| RAID5 | ○ | ○ | 3 | 1つのデータを2つに分けて2台のディスクに分散して書き込みつつ、もう一台のディスクにデータ複合用のパリティを書き込む。１台までのディスクの故障は復旧できる。RAID0とRAID1のいいとこどりをしているが、必要ディスク数が多い。 |


## RAIDの問題点
RAIDはあくまで耐障害性を高めるための機能なので、例えばユーザーが誤ってNAS内のデータを削除してしまった際はミラーリングしているデータも同時に消えてしまうという問題点がある。また、RAIDでは同一筐体内部の複数ディスクにデータを書き込む方式の話なので、NASに強い衝撃を加えてしまった場合などにNAS内のディスクが全て壊れてしまえばデータは消失してしまう。また、NAS内の複数のディスクは同じ時期に購入されることが多いので、それらの寿命も同じ時期になる可能性が高く、同時に自然故障してしまう可能性も低くはない。
そのため、失っては困るような大事なデータの保護対策としてはRAIDだけでは不十分であり、別途対策が必要である。


## バックアップとは
バックアップとは、「稼働中のシステムのデータを別のハードディスクにコピーして保存すること」である。（参考資料[1]より）
バックアップを定期的に実行してNAS内のデータを社内やクラウドサービス上のストレージに保管することで、NASやディスクの故障、またミスオペによるデータの消失の際にバックアップデータをもとに復旧作業を行うことができる。

しかし、バックアップの注意点として、当然だがバックアップしていないデータは復旧できないということがある。例えば毎日00:00にバックアップを取っているとしたら、当日の00:00以降に追加・更新されたデータが消失した場合は復旧することはできない。
これを防ぐ方法としてはバックアップを取る頻度を上げる、例えば1時間に一回等、というものがあるが、頻度を上げれば上げるほどバックアップデータの容量が増えてしまうので、要はバランスである。


## さいごに
大事なデータを保護するためにはRAIDだけでは不十分で、バックアップを取るべき。
いざデータが消えてしまってからでは取り返しがつかないので、もしバックアップを取っていない大事なデータがある場合は、早急にバックアップを取ろう。


## 参考資料
- [1][バックアップとRAIDの違いとは?社内データを守る方法【パソコン,NAS,サーバ】](https://togeonet.co.jp/post-2524)
グローバルIPをコマンドで取得する

自分のために忘れないようにメモ

ターミナル上でグローバルIPを知りたいとき以下のようにリクエスト飛ばすとグローバルIPを返してくれる。
他にいい方法知ってたらコメントで教えてください

```
curl https://ifconfig.io

curl -4 https://ifconfig.io #IPv4で取得するように設定
```
Darksideについて調べた過程で知ったこと

###はじめに
最近、仕事の関係上サイバーセキュリティ攻撃の動向について情報収集を行うことが多く、
昨今の事例などについて調べていました。
先月、東芝テック株式会社が欧州子会社においてサイバー攻撃の被害にあったことを発表していましたが、
本攻撃はDarksideという攻撃者グループによって行われたとされています。
https://www.toshibatec.co.jp/release/20210514_01.html

Darksideは、米国のコロニアル・パイプラインという会社を一時的な操業停止に追い込むといった事件で注目をあげていたことから注目を浴びていた攻撃者グループです。

今回、情報収集を行う過程でトレンドマイクロ社のウェビナーを受講し、その中での知ったこと、それに対して感じたことを備忘録として記載したいと思います。
https://resources.trendmicro.com/jp-webinar-form-0331-ransomware-darkside.html

###ランサムウェア今昔
ランサムウェアとは、言うまでもなくコンピュータやデータの暗号化を行い、復旧して欲しければお金を払え！という
いわゆる脅迫型のウィルスが一般的に定義として指していると思います。
昨今では、ランサムウェア攻撃という名称で呼ばれることがありますが、
これはウィルスの種類というよりも、ランサムウェアを使った標的型攻撃の総称として使われるそうです。
最近では、攻撃者が取得した情報を少しづつインターネットに公開し、返してほしければお金を払え！という暴露型と呼ばれる手法がメジャーとなっています。

###RaaS
RaaS(Ransomeware as a Service) とは、ランサムウェアの攻撃パッケージをサービスとして提供する形態のことで、
イメージとしてはある企業に対して攻撃を仕掛けたい攻撃者グループが、このRaaSを提供している武器商人からパッケージを購入し、攻撃をしかける…というような仕組みとなっています。
日本の特殊詐欺でも、実行犯、司令官、手法を考える人が分かれているということが良くあるそうですが、それと同じようにサイバー攻撃の世界でも、実行犯と、その攻撃手法を提供する人物が分かれるというケースが増えてきているのだとか。

###ITネットワークへの攻撃がビジネス停止に
トレンドマイクロ社の調査によると、スマートファクトリーにおけるサイバー攻撃の結果として、生産システムの停止を経験したことのある日本企業は、インシデント経験者の約7~8割、更にそのシステム停止期間は4日以上と答えた企業は3割強という結果とのこと。
https://www.trendmicro.com/ja_jp/about/press-release/2021/pr-20210422-01.html

システムが4日止まると、大体どれぐらいの損失が出るものなのでしょうか。
下記の記事によると、大手自動車メーカでは1時間の稼働停止で損失は1億円以上とのこと。
工場というのは今や24時間稼働も当たり前ですからね。
<font color="Red">つまり、単純に一日24時間だと24億、4日で約100億近くの損失になることも考えられます。
</font>
https://monoist.atmarkit.co.jp/mn/articles/2104/02/news013.html

それに加えて、ランサムウェアの場合は身代金をやむを得ず支払わなければならないケースもあるかと思いますので、当然その分での被害額、更には昨今の暴露型攻撃ですと「どこそこの企業がやられた」というのが世界的に知られたしまうので、企業の信用失墜にもつながってしまうケースも考えられます。
また、企業によっては攻撃を受けたシステムの再構築、ということも考えられ舞うから、その場合一体どれぐらいお金がかかってしまうのか…ということを考えると、やはりサイバー攻撃による被害というものは非常に甚大であると考えられます。

###対策について
当たり前なのですが、一つのセキュリティ対策でこういったランサムウェア攻撃（サイバー攻撃）を防止することは難しいと思いました。
例えば、いくら高性能なエンドポイント製品を導入したとしても、その製品をバイパスする攻撃手法が見つかったり、そもそもそのエンドポイントが導入されていない野良サーバや海外拠点のサーバなどから侵入されてしまうというケースも考えられます。私が聴講させていただいたセミナーでも、複数の対策を最後にまとめとして挙げておられました。
その中の何かをやればOK、ではなく、多層防御の考えを早期から持つことが大切だと感じました。

###まとめ
サイバー攻撃の手法は日々変わっていますが、セキュリティへの投資は「保険」と揶揄されることも多く、実際に被害を受けるまで具体的な対策に乗り出さない企業も多いのではないかと思います。確かに、セキュリティ製品って導入してもビジネス面でなかなかその恩恵を受けられないと思われがちですが、やはり実際に被害者になってからでは失うもが非常に多いと感じます。
どうすればセキュリティ対策についてより多くの方に理解をいただけるのか、何がセキュリティ対策として有効なのかを今後も考えていきたいなと思います。
テックキャンプを使った学習・転職スケジュールについて

## ■概要
テックキャンプを修了し、自社開発企業様に内定をいただいたので、私が進めた学習・転職スケジュールを共有します。また学習・転職中に感じた点についても補足として記載します。ご参考になれば幸いです。

## ■前提
・受講していたのは夜間コース(半年間)になります。
・仕事をしながら合間に学習/転職をしていました。
　(部署異動直後からの学習開始だったので、負荷は高いと思います)

## ■学習・転職スケジュール
学習・転職スケジュールは以下のようになっています。
基本的な考え方として、学習期間中でやりたかったオリジナルアプリ制作やチーム開発をやり切るようにして、転職期間中は、短期間で内定をもらえるよう転職に集中する方針です。
これは各期間中に抱えるタスクを増やさず、メンタルをやられないようにする目的で考えたのですが、学習と転職それぞれで集中して取り組むことが出来たので、良かったです。

### ■学習期間編
平日は2~3時間、休日は8時間を目処にカリキュラムや開発を行っていました。
・10/3：カリキュラム学習開始
　　感想：振り返らず次へガリガリ進んでいました。
　　↓
・10/15：基礎カリキュラム修了
　　感想：個人的には早いと自負していましたが、他メンバーもこのくらいのペースだったので、負けられない気持ちで応用カリキュラムを進めていました。
　　↓
・11/3：応用カリキュラム修了
　　感想：rubyが入ってきて少し理解しづらさを感じましたが、理解は後々できると思いガリガリ進めていました。
　　↓
・11/27：発展カリキュラム修了
　　感想：いくつかカリキュラム内でプロダクトを作ったこともあり、rubyに慣れたような気がしていました。ノーヒントで作るプロダクトは2-3日悩める部分もありましたが、仮説と実験をすることで解決できました。
　　↓
・12/26：最終課題修了
　　感想：悩める部分がいくつかありましたが、こちらも仮説と実験の繰り返しで解決していきました。
　　↓
・12/30：オリジナルアプリ開発開始
　　感想：開始前から作りたいアプリの構想は出来ていたので、制作するのに必要なことを仮説立てて進めていきました。
　　↓
・1/13：PHP(progate)/Laravel(ネットのチュートリアルサイト)の学習修了
　　感想：カリキュラムでやったrubyしか出来ないと思われたくないと思い、php(laravel)を選択しました。基本構文とフレームワークの使い方を学ぶためprogateとネットのチュートリアルサイトを活用しました。
　　↓
・2/28：オリジナルアプリ完成
　　感想：3月以降にチーム開発に専念するため、自分の最低限作りたい機能を盛り込みAWSであげました。laravelでのAWS構築はカリキュラムにはないので、ネットで片っ端に情報を集め仮説・実験を繰り返しました。
　　↓
・3/1：オリジナルアプリ(チーム制作)開発開始
　　感想：開始前からメンバーと打ち合わせをし、スケジュールや構想を練っていました。
　　↓
・4/6：オリジナルアプリ完成
　　感想：計画通りに完了し、heroku上で公開もできたので満足いく結果でした。
　　↓
・4/10：学習期間修了

### ■転職期間編
転職期間中は、選考で出された課題(API作成)等やオリジナルアプリの改修を行っていましたが、転職活動に集中するようにしていたため、学習期間よりは学習や開発に時間を当てていません。心理的な負荷は減ったのでよかったです。
基本的な考え方として、自社開発企業を優先とし、企業のホームページ応募・wantedly・テックキャンプの企業オファーでの応募を軸に活動していました。

・4/10：転職開始
　　感想：転職のMustとWantを洗い出し、転職軸を決めていきました。
　　↓
・4/24：wantedlyプレミアへの加入
　　感想：レスポンスの速さからホームページ応募をやめ、wantelyのプレミアムに加入し、wantedlyとテックキャンプの企業オファーのみにしました。プレミアにしてからはwantedly上で気になる企業にメッセージを大量に送りました(30~40社くらい)
　　↓
・5/25： 内定をいただく
　　感想：テックキャンプ応募のところで内定をいただきました。一社貰えたことで心理的な負荷が減ったように感じました。
　　↓
・6/7：内定をいただく(転職活動終了)
　　感想：気になっていた自社開発企業から内定をいただきました。そのため他選考を辞退し転職活動を終えました。

以上
Docker Lambda上でPuppeteerを使いhtmlをpdfに変換する

好きなURLをAWS Lambda関数に渡し、htmlページがロードされた後、Headless Chromeを使いPDFに変換する。Base64 Dataが返す。

[GitHub: puppeteer_on_docker_lambda](https://github.com/Daiki2012/puppeteer_on_docker_lambda)

## 作り始めたきっかけ
シンプルなweb serviceを作りたかった。任意のURLをもとに、htmlページをレンダリングし、描画されたイメージをpdfにして保存。Web scrapingやテストの自動化に利用する目的

### 開発環境の選択
---
htmlをpdfに変換するだけなら、いろいろ選択肢はある。一番簡単なのはjs libraryを使う。シンプルで軽いので簡単に実装できる。このアプローチの問題は、自由度が低いこと。web serviceを作成した後、他の用途に利用しずらい。例えば、複雑なロジックが必要とするWeb scrapingなどに使うのは難しい。単純にhtmlをpdf化することが目的なら、 [html2canvas](https://github.com/niklasvh/html2canvas)をチェックしてみると良い。

[Puppeteer](https://github.com/puppeteer/puppeteer) は Headless ChromeのDevToolsのAPIにアクセスし、主要なChromeの機能を利用できるため、他のプロジェクトに有効利用できそうなので、Puppeteerを今回使うことにした。また、サーバーコストを最小限にするためにサーバーレス AWS Lambdaを使うことにした. 

Headless Chromeをより効率的にLambda上で使うために、[chrome-aws-lambda](https://github.com/alixaxel/chrome-aws-lambda) を選択した。Lambda layer上に保存できる最大のファイルサイズは50MB以下、chrome-aws-lambdaは 44MBほどで,　Layer上に保存できる。サイズが普通のChromeよりも小さいためロード時間が短く、Lambdaの消費時間、コストもよりすくなくなる。   

## Why use Docker and ECS
---
AWSが2020年の年末に発表した、Lambdaのコンテナサポート。Dockerを使って、AWS Lambda Imageをローカル開発環境化にすることができる。　以前は、開発、テスト、デプロイするのが難しかったLambda開発だが、より身近にテスト、デプロイしやすくなった。

今までは [Serverless Framework] (https://www.serverless.com/) を使うのがLambdaのローカル開発環境の標準だったが、(以下記事参照). しかし、Serverless Framework は自分のマシンの設定をいじる必要があり、複数のプロジェクトを同時に開発していると不都合がでやすい。なので、Dockerコンテナを使い、AWS Lambda Runtime Emulatorを使いより本番に近い開発環境をローカルで作ることが可能になる。

## 事前準備
---
Docker Desktop (Mac OS推奨. プロジェクト内のシェルスクリプトはMac環境でテストされたものなので注意)
- AWS アカウント
- Lambda, Docker, SAM, CloudFormation and ECS関連の基本知識
[setup AWS CLI](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-configure.html) for deloyment
[SAM CLI](https://docs.aws.amazon.com/serverless-application-model/latest/developerguide/serverless-sam-cli-install.html).

## 必要なパッケージ
---
以下のパッケージが必要。chrome-aws-lambdaはそれに関連するpuppeteerのバージョンを選ばないと動作しないので注意。
```
chrome-aws-lambda@10.0.0 
puppeteer-core@10.0.0
```

## ローカル開発環境
---
Dockerをセットアップし、aws-lambda-rieをインストール。以下のシェルを実行する。

```
./get_lambda_rie.sh
```

#### Dockerイメージを作成
2つのdockerコマンドを実行. Docker build and run. Docker イメージが作成され、 localhost:9000 のポートでLambdaが実行できる.
```
./docker_build_run.sh
```

#### ローカルでテスト
ターミナル、もしくはポストマンで以下のコマンドを実行。サイトは自分の好きなサイトに変更。
数秒後にbase 64 dataを受け取る。そのデータをpdfに変更するなら、オンラインサービス例えば、 [Base64Guru](https://base64.guru/converter/decode/pdf)を利用すると良い
```
curl -XPOST "http://localhost:9000/2015-03-31/functions/function/invocations" -d '{"url": "https://yourfavoritesite.com"}'
```

## AWSにデプロイする
---
AWS cliを使って、デプロイするのでcredentialやregionなどをconfig fileに必ず設定しておく。 以下ファイルないで、s3 bucketのファイル名を定義しているので、必ずユニークであることを確認しておく。
```
deploy/deploy_with_sam.sh
```


## 参考資料
---
1. [Generate a PDF in AWS Lambda with NodeJS, Webpack, Pug and Puppeteer](https://dev.to/zeka/generate-a-pdf-in-aws-lambda-with-nodejs-webpack-pug-and-puppeteer-4g59)
2. [Puppeteer on AWS Lambda で日本語対応したキャプチャを撮影してS3にアップロードするまでの設定](https://qiita.com/zyyx-matsushita/items/c33f79e33f242395019e)
3. [HTML to PDF using a Chrome puppet in the cloud](https://morioh.com/p/d8043f7defbf)
PostgreSQL10の統計情報

勉強がてらPostgreSQL10の統計情報についてまとめ。
# SQLの実行計画作成に使われる統計情報
[マニュアル](https://www.postgresql.jp/document/10/html/planner-stats.html)
収集される統計情報は、自動VACUUMやANALYZEの延長で更新される。

- [pg_class](https://www.postgresql.jp/document/10/html/catalog-pg-class.html)
    - テーブル、インデックス、シーケンス、ビュー、マテリアライズドビューなどの統計情報を保持。
- [pg_statistic](https://www.postgresql.jp/document/10/html/catalog-pg-statistic.html)
    - 列に関する統計情報を保持。実データが一部含まれるため、一般のユーザは読み取りできない。  
    一般のユーザには、権限を持つ表に関連する行へのアクセス手段として[pg_stats](https://www.postgresql.jp/document/10/html/view-pg-stats.html)を公開。

# 活動状況の監視を目的に収集される統計情報
[統計情報コレクタ](https://www.postgresql.jp/document/10/html/monitoring-stats.html)により収集される。

## [動的統計情報ビュー](https://www.postgresql.jp/document/10/html/monitoring-stats.html#MONITORING-STATS-DYNAMIC-VIEWS-TABLE)
|ビュー名|説明|
|---|---|
|pg_stat_activity|サーバプロセス毎に1行で、状態や現在の問い合わせ等の<br>プロセスの現在の活動状況に関連した情報を表示。|
|pg_stat_replication|WAL送信プロセス毎に1行で、<br>マスターサーバが接続したスタンバイサーバへの<br>レプリケーションに関する統計情報を表示。|
|pg_stat_wal_receiver|1行で、受信サーバが接続したサーバから<br>WALレシーバに関する統計情報を表示。|
|pg_stat_subscription|1つのサブスクリプションにつき少なくとも1行の形式で、<br>サブスクリプションワーカに関する情報を表示。|
|pg_stat_ssl|接続（通常およびレプリケーション）あたり1行の形式で、<br>接続に使われるSSLの情報を表示。|
|pg_stat_progress_vacuum|VACUUMを実行している（自動バキュームワーカプロセスを含んだ）<br>それぞれのバックエンドごとに1行の形で、現在の進捗を表示。|


## [収集済み統計情報ビュー](https://www.postgresql.jp/document/10/html/monitoring-stats.html#MONITORING-STATS-VIEWS-TABLE)
|ビュー名|説明|
|---|---|
|pg_stat_archiver|WALアーカイバプロセスの<br>活動状況に関する統計情報を1行のみで表示。|
|pg_stat_bgwriter|バックグラウンドライタプロセスの<br>活動状況に関する統計情報を1行のみで表示。|
|pg_stat_database|データベース当たり1行の形で、データベース全体の情報を表示。|
|pg_stat_database_conflicts|データベース毎に1行の形式で、<br>スタンバイサーバにおける復旧との競合のために<br>キャンセルされた問い合わせについてのデータベース全体の<br>統計情報を表示。|
|pg_stat_all_tables|現在のデータベースの各テーブルごとに1行の形で、<br>特定のテーブルへのアクセスに関する統計情報を表示。|
|pg_stat_sys_tables|システムテーブルのみが表示される点を除き、<br>pg_stat_all_tablesと同じ。|
|pg_stat_user_tables|ユーザテーブルのみが表示される点を除き、<br>pg_stat_all_tablesと同じ。|
|pg_stat_xact_[all&#124;sys&#124;user]_tables|pg_stat_all_tablesに似ているが、<br>現在のトランザクションにて実施された処理結果をカウント。|
|pg_stat_[all&#124;sys&#124;user]_indexes|現在のデータベースのインデックスごとに1行の形で、<br>特定のインデックスへのアクセスに関する統計情報を表示。|
|pg_statio_[all&#124;sys&#124;user]_tables|現在のデータベース内のテーブルごとに1行の形で、<br>特定のテーブルに対するI/Oに関する統計情報を表示。|
|pg_statio_[all&#124;sys&#124;user]_indexes|現在のデータベース内のインデックスごとに1行の形で、<br>特定のインデックスに対するI/Oに関する統計情報を表示。|
|pg_statio_[all&#124;sys&#124;user]_sequences|現在のデータベース内のシーケンスごとに1行の形で、<br>特定のシーケンスに対するI/Oに関する統計情報を表示。|
|pg_stat_user_functions|追跡された関数ごとに1行の形で、<br>関数の実行に関する統計情報を表示。|
|pg_stat_xact_user_functions|pg_stat_user_functionsと似ているが、<br>現在のトランザクション中に呼び出されたものだけをカウント。|

簡単にまとめると、以下。

- archiver/bgwriter/databaseの統計情報が存在。
- tbale/indexごとにアクセス統計情報、I/O統計情報を保持。
- sequenceはI/Oに関する統計情報のみ保持。
- functionは関数ごとに統計情報を収集。
【Ruby】アクセサメソッドを理解する

## はじめに
プログラミング初心者です。
知識があやふやだったアクセサメソッドについて学習しましたので、備忘録として投稿します。
間違い等ございましたら、ご指摘お願いします。

## 用語の定義
### アクセサメソッド
ゲッターメソッドやセッターメソッドなどインスタンス変数の読み取りや書き込みができるメソッドの総称

### ゲッターメソッド
インスタンス変数の読み取り専用のインスタンスメソッドのこと

#
### セッターメソッド
インスタンス変数の書き込み専用のインスタンスメソッドのこと
※メソッド名の末尾に=（イコールをつけると）、代入式のようにメソッドを呼び出すことが出来る

```Ruby
class Car
    def initialize
        puts "車の色を入力してください"
        @color = gets.chomp
    end
    
    # ゲッター（読み取り）
    def color
        @color
    end
    
    # セッター（書き込み）
    def color = (set)
        @color = set
    end
end

car = Car.new
# ※initializeメソッドでredと入力したとする

# ゲッターでインスタンスメソッドの値を確認
puts car.color 
# => red

# セッターを使用し、インスタンスメソッドの値を書き換える
car.color = "white"

# 再びゲッターでインスタンスメソッドの値を確認
puts car.color
# => white
```

## アクセサメソッドの必要性
クラスの外部からインスタンスの値を変更しようとすると、エラーが発生する
→エラーが発生しないようにするためにはインスタンスメソッドを経由する必要がある
→そこで使用するのがアクセサメソッド

## 簡単な記述方法
ゲッターとセッターには、簡単に記述する方法がある。

```Ruby
# ゲッター
    attr_reader :インスタンス変数名  # シンボル型
    attr_reader "インスタンス変数名" # 文字列型

# セッター
    attr_writer :インスタンス変数名  # シンボル型
    attr_writer "インスタンス変数名" # 文字列型

# ゲッター+セッター
    attr_accessor :インスタンス変数名  # シンボル型
    attr_accessor "インスタンス変数名" # 文字列型
```

attr_readerは、ゲッターメソッドを定義してくれるメソッド
attr_writerは、セッターメソッドを定義してくれるメソッド
attr_accessorは、ゲッターメソッドとセッターメソッドの両方を定義してくれるメソッド

## まとめ
あやふやだったアクセサメソッドについて、整理できたかなと思います。
実装経験が少ないため、attr_accessorの出番は少ないですが、これから有益な情報を入手しましたら発信して行きたいと考えております！
Google App Scriptの新UIで、実行ログやエラーログ詳細を確認する方法

Google Apps Scriptの新UIで、実行ログやエラーログの詳細が開かないことがあった。
※普通はクリックすれば開いて詳細が見えるはずだが。。

↓見えない場合。
![Screen Shot 2021-06-13 at 13.23.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80263/4a5cad51-2a02-1a04-1bf3-e675e8032eb9.png)
↓見えた場合。
![Screen Shot 2021-06-13 at 13.25.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80263/d7db9e2a-46be-9994-346a-5adf0dfba41d.png)


Google Cloud Platformに紐付けることで、実行ログ詳細を見ることができた。

# Google Cloud Platformでプロジェクト番号の確認
![Screen Shot 2021-06-13 at 13.21.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80263/30bb2118-afa8-1d93-e1f3-83f3117011bc.png)


# Google Apps Script上で設定
設定から、プロジェクト番号を設定する。
![Screen Shot 2021-06-13 at 13.20.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80263/628a531e-fe28-bfaf-84ae-0fb5e142f73a.png)

# OAuth設定
https://console.cloud.google.com/apis/credentials/consent
でテストユーザに自分を加えておく。
![Screen Shot 2021-06-13 at 13.30.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80263/214760b8-d7f3-f028-6519-f8cdb5890c2b.png)

# GCPのログエクスプローラーで確認
詳細にエラーログが確認できた。
https://console.cloud.google.com/logs/
![Screen Shot 2021-06-13 at 13.29.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80263/3c7015ad-3ec9-b0b0-8abe-6d1dc2b97e4b.png)

# その他
Google Cloud Platformのリソース一覧が見れるページ。
https://console.cloud.google.com/cloud-resource-manager
【 Vue CLI 環境構築 】コマンド・ライン・インターフェース

#前書き
VueCLIのバージョン(2.9.6)からVueCLI3系にアップデートするのにものすごく時間がかかってしまい備忘録も兼ねて執筆。

#Vue CLIのインストールと初期設定

####すでに旧バージョンをインストール済みの場合は、一度アンインストールする

```
$ npm uninstall -g vue/cli
```

####旧バージョンのダウンロード

```
$ npm install -g  vue/cli
```

####最新版のダウンロード

```
$ npm install -g @vue/cli
```

####Vueのバージョン確認

```
$ vue --version
```



####新しいプロジェクトの作成

```
$ vue create プロジェクト名
```

アップデートするために参考にした記事

>[Vue2系のプロダクトをVue3へアップデート]
(https://qiita.com/Syoitu/items/4d2d51189440a69abbac)

>[Vue CLI の変更点・使い方 (vue-cliから@vue/cliにアップデート)]
(https://qiita.com/Junpei_Takagi/items/603d44f7885bd6519de2)

>[Homebrewからnodebrewをインストールして、Node.jsをインストールするまで]
(https://qiita.com/limonene/items/a10c2755dd2784357c43)

>[Vue.js を vue-cli を使ってシンプルにはじめてみる]
(https://qiita.com/567000/items/dde495d6a8ad1c25fa43)




##※Manually select featuresを選択
![76127674bc2cafb44cde9a001c528aad.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/953175/0f87781b-8e5c-8443-9443-7f4d83d3d4fd.png)

##3つを選択（オプション機能の追加、解除は十字キーで上下に動かし、スペースで選択）

![3f89ae1ebd7d15cecd30019b18776fc0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/953175/1cde53bb-115e-4703-e86e-61b4c5aa6331.png)
→ Enterで次へ
![90bf6085305f09a44ec0c52c031ae1f2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/953175/5e8bd7ee-593b-8f63-1adf-f0f1e18f27d2.png)

##Vue.jsのバージョンを選択
![e400c947153e35501f96b1116a4f9085.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/953175/f35d0ac2-7a0c-213a-99d2-39dcba6b4b06.png)
※2.xまたは、3.x(preview)のどちらかを選択
<font color="Red">ここでの注意点は2.xにしないとvuetifyが使えない！</font>

##ESlintの種類を選択
→ESLint with error prevention onlyを選択
![90bf6085305f09a44ec0c52c031ae1f2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/953175/0d809577-71e0-5c85-731a-f307516da436.png)

##コード成形のタイミング
→　Lint on saveを選択
![b9d67966fc32c194151fafeb0cecdfbd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/953175/d47b5448-da1c-415f-9f08-f007425e5648.png)


##babelやconfigの設定
→ In dedicated config filesを選択![19a4778a69965e51ef725313dca4d2a8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/953175/70bb4b24-f1af-638f-66d7-80665efdb5c4.png)

##設定を保存するかの有無
→ No
![c44f92398311a221e3b3bb36b7fcbd08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/953175/d2feb8a5-d6a0-3643-78da-eafb9a768d6e.png)


##インストール完了

cd ディレクトリー名、 npm run serveを順番に入力する

```
$ cd ディレクトリー名
$ npm run serve
```


![0b35d62b2012185c2e4829ea156f23dc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/953175/f41b91c8-0de0-c45f-4d3b-9a4c0f116d64.png)

##ディレクトリ名（ファイル名）を入力

```
$ cd ディレクトリー名
```

##サーバーの実行 (開発用のサーバーが起動する）

```
$ npm run serve
```
・ development serverが起動する
・ ローカル環境でサーバーが動く

##本番環境構築

```
$ npm run build
```