OmniAICreator/Qiita-1.07M huggingface dataset:
作業したものをGitHub(リモートリポジトリ)に反映させてみる

#最初に…
プログラミングの勉強を始めて3ヶ月程経ったので学んだことのメモをアウトプットとして記事に残します。
これからプログラミングの世界に入る人の手助けになれたら嬉しい限りです。
間違っていたり、言葉が違っていたり、表現が誤解されるような言葉があったら教えて下さい^^
言葉を長々と読みづらかったら申し訳ありません。少しずつなれてがんばります。

#リポジトリを作成してGitHubに反映させるまで

**前提としてgithubの登録はしておいてね^^（そんなに難しくなかった記憶…）**
[githubへの登録はこちらでお願いします](https://github.com/)


```ターミナル:ターミナル
$ cd Desktop
$ mkdir qiita_demo  <!-- ディレクトリ作成（qiita_demoが名前になるので何でもOK) -->
$ cd qiita_demo     <!-- 作成したディレクトリ内へ移動 -->
$ git init          <!-- ローカルリポジトリを作成 -->
```

ここまで行うとPC上のDesktopに作成したファイル名が現れているはず！
``$ git init`` でローカルリポジトリを作成したことになります。

ここで一旦ターミナルから離れてGitHubの方へいきます。
ログインをしてトップページに行くと左上に

![スクリーンショット 2020-12-02 12.32.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838465/71685b5c-9dc7-a5e7-9d4e-43ba935d5d11.png)

こんなのがあります！ここのNEWをクリック
次ページにリポジトリ名とかを登録するところになりますので当てはまるところを記入する
**リモートリポジトリ名はローカルリポジトリと同じにすることをおすすめします**！
理由は簡単→管理しやすいからです^^

![スクリーンショット 2020-12-02 12.37.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838465/66446233-06cc-70a9-d484-5906cf10c8b3.png)

こんな感じで作成します！

これでリモートリポジトリとローカルリポジトリを準備出来たので
あとは
リモートリポジトリとローカルリポジトリを結びつけて
ローカルリポジトリで変更した内容をリモートリポジトリに反映させて終わり！


ローカルリポジトリ内で新規作成or変更を行ってください！（かんたん新規作成しても良いと思います）

```ターミナル:ターミナル
$ git add [新規作成or変更したファイル名] <!-- 履歴を残す準備をする(インデックス追加する)-->
$ git commit -m "first commit" <!-- ""の間にメッセージを残しましょう。 -->

```
>*git addやgit commitのコマンドは他にも沢山あるので調べてくださいね。(ここでは割愛)*

ローカルリポジトリ内では変更履歴を残せたのでこれをリモートリポジトリに反映させます！
**しかし**
まだ結びつけてないのでそれを先にやりますね！(この工程は初回だけです。2回目以降は省きます)

これはすごく簡単でGitHubが教えてくれます！
先程リモートリポジトリを作成したらこんな画面になります
![スクリーンショット 2020-12-02 12.57.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838465/f686626f-7f95-6200-90e5-bbb7607aa9ed.png)

この写真にある``git remote add origin git@リモートリポジトリのURL``をコピーして

```ターミナル:ターミナル
$ git remote add origin git@リモートリポジトリのURL
```

ターミナルにペーストするだけ

これで結びつけ終了！
``git remote -v``をターミナルで打つと結びついているか確認出来るので心配の方はやっていいと思います！(私は毎回やってます^^;)

あとは変更を反映させる為に

```ターミナル:ターミナル
$ git push origin master
```

これでリモートリポジトリにも変更が反映されます！
リモートリポジトリを確認してみてください！写真で載せた画面がなくなり変わっていると思います^^

これでリモートリポジトリに履歴を残すことが出来ました！


git関連のコマンドは沢山ありますのでこれをキッカケに調べて見るのも良いと思います！
私も今度まとめたいを思います^^

>[master]はブランチ名といいます。対象ブランチを変えることでどこに変更履歴をアップロードするのかを決めることが出来ます。今回は初めて行うという点でmasterにしましたが、あまりmasterにすることはないです。自分の勉強用で使うだけであれば問題ないです。ここは今回の内容ではないので割愛...
RPGツクールMZでCSSを改造してNOW LOADING 画面を作る方法


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/915492/17b5c7ec-906e-f933-8daa-a8ce837b614a.png)


#手順
１、ゲームのプロジェクトフォルダの「css」フォルダ内にある「game.css」を開く
２、「#loadingSpinner」と「#loadingSpinnerImage」を以下のように変更する

```css
#loadingSpinner {
    background-image:url(/img/pictures/NOW LOADING画面に利用したい画像の名前);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: auto;
    height: auto;
    z-index: 10;
    animation: fadein 2s;
    border-radius: 50%;
}

#loadingSpinnerImage {    
    margin: 0 auto;
    border-radius: 50%;
    width: 300px;
    height: 300px;
    margin-top: 25%;
    border: 20px dotted rgba(255, 255, 255, 0.349);
    border-top: 20px dotted rgba(255, 255, 255, 0.315);
    animation: fadein 2s ease, spin 1.5s linear infinite; 
}
```

３、game.cssを保存する
４、ゲームを起動し、場所移動イベントなどで処理が重そうなマップに移動する

#なぜこの機能を作ろうと思ったか
700*700くらいのマップを作ろうと思ったため。
（dataフォルダ内のjsonファイルを改造して作る。）

これくらいの大きさのマップを開くのには
だいたい3～4秒はかかるので
その間に何か画像が表示された方が面白いと思ったので作りました。

#タイトル画面でもNOW LOADINGが表示されてしまう問題について
「main.js」の「showLoadingSpinner」下記の用にコメントアウトすると表示されなくなります。

```js
    showLoadingSpinner() {
        // const loadingSpinner = document.createElement("div");
        // const loadingSpinnerImage = document.createElement("div");
        // loadingSpinner.id = "loadingSpinner";
        // loadingSpinnerImage.id = "loadingSpinnerImage";
        // loadingSpinner.appendChild(loadingSpinnerImage);
        // document.body.appendChild(loadingSpinner);
    }
```

#自分で任意のカスタマイズをしたいときは
cssに何が書いてあるかわからない場合はcssの数値などをいじって
いろいろ試してみてください。

cssの説明に関しては下記のページがとてもわかりやすかったです。
※今回の改造もこちらを参照しながらいろいろ試しました。
https://developer.mozilla.org/ja/docs/Web/CSS/background

#メモ
画面を拡大縮小してもちゃんと真ん中に表示されるようになっています。
ただ、真ん中のグルグルは画面を大きくしても小さくしても
大きさが常に一定になっています。
※本当は画面大きくしたらグルグルも大きくなるようにしたかったのですが
　やり方がわからなかったので諦めました。
　（誰か知ってたら教えてください。。。）

#その他
記事の内容の正確性は保証できません。
内容は読者自身の自己責任の基にご利用ください。
PyCharmで'no such option: --build-dir'エラー

アップデートして解決

[python\-PyCharm venvが失敗しました： 'そのようなオプションはありません：\-build\-dir'\-スタックオーバーフロー](https://stackoverflow.com/questions/65085956/pycharm-venv-failed-no-such-option-build-dir)


>PyCharmは--build-dirパッケージのインストールに依存しており、フラグは最新のpip20.3で削除されました。
PyCharmの修正は準備ができており、今週2020.3リリースでリリースされます（そして2020.2.5と2020.1.5にバックポートされます）。
最速 Homebrew

タイトル負けしそうな感じしかしない・・・。

私の最新の Homebrew の使い方をまとめておきます。

昔書いた以下の記事も参考にしていただければです。

- [brew tap で入れる Homebrew 外部コマンド - Qiita](https://qiita.com/tearoom6/items/1abf24ca6d872e6579b0)
- [Homebrew の処理ですごく時間がかかる場合 - Qiita](https://qiita.com/tearoom6/items/470e16540e3deaae5efa)

## セットアップ

基本方針として `brew bundle` を使うようにしています。

まず Homebrew を公式ページにある通りにインストールします。

```sh
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

`brew bundle` は明示的にインストールしなくても大丈夫です。

あとは、あらかじめ用意しておいた `Brewfile` のあるディレクトリで `brew bundle` を実行すれば、必要なものを全て入れてくれます。
とても簡単。

```sh
brew bundle
```

参考までに、私の Brewfile を晒しておきます。

<https://github.com/tearoom6/dotfiles/blob/master/Brewfile>

こんな感じで、一時的にインストールしたけど、全ての環境で使うわけではない、という場合は、コメントアウトしておくと、使いたい時だけ使えて便利ですね。

## バージョン管理

`brew bundle` を実行すると `Brewfile.lock.json` が生成されますが、こちらはインストールした際のバージョン情報を記録するものであって、例えば Bundler の `Gemfile.lock` などとは違って、インストールされるバージョンを固定するものではないそうです。

Homebrew 自体が、特定のバージョンをインストールするという機能を備えていないからです。
(代替方法として、バージョンごとの formula を指定できるようにしている場合はありますね)

したがって、運用としては、定期的に最新バージョンにアップデートしておく、ということになるかと思います。

Homebrew インストールしている全てのバージョンを **アグレッシブに** アップデートするには、以下のようにすれば OK です。

```sh
brew update
brew upgrade --cask --greedy
brew bundle
```

> References

- [macos - Upgrade all the casks installed via Homebrew Cask - Stack Overflow](https://stackoverflow.com/questions/31968664/)
class



# hello\_class.rb


## 概要

-   引数がある場合 Hello (引数).
-   引数がない場合 Hello World.

と出力するコードを作成する.


## 解法

前の hello.rb を少し拡張してみる．

```ruby
def puts_hello name
  puts "Hello #{name}."
end

def gets_name
  name = ARGV[0] || 'world'
  return name
end

name = gets_name
puts_hello name
```

-   puts\_hello は "Hello (name)" の出力
-   get\_name で ARGV[0] に入っているかいないかを判断して name に代入

最終的なコードは以下の通りである.

```ruby
class Greeter
  def initialize
    @name = gets_name
    puts_hello
  end

  def puts_hello
    puts "Hello #{@name}."
  end

  def gets_name
    name = ARGV[0] || 'world'
    return name.capitalize
  end
end
Greeter.new
```

実行結果

    > ruby hello_class.rb
    Hello World.
    
    > ruby hello_class.rb Masaki
    Hello Masaki.
    
    > ruby hello_class.rb masaki
    Hello Masaki.

.capitalize は文字列先頭の文字を大文字に, 残りを小文字に変更した文字列を返す. だから masaki を ARGV[0] に入れても, Masaki となる.


# 参考ページ

[チャート式ruby-VI(hello class)](https://qiita.com/daddygongon/items/969ad5112878f6dab844)



------
 - **source** ~/grad_members_20f/members/djj31370/c6_class_hello.org
ThinkPad X230 Tablet の修理

![DSC08651A.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526771/6fb79de6-8057-6aeb-101a-d061f71d57f5.jpeg)


![DSC08653.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526771/7f3344bd-fd5b-d5fa-aac3-c74f1fa8371d.jpeg)

![DSC08650.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526771/58205b43-ffa2-3850-b69a-895ebcda51e6.jpeg)


2020年9月にヤフオクで業者から購入したThinkPad X230 Tabletのバキバキジャンクです。出品画像では下半身はきれいでペン付きでなおかつパームレストのCorei7の
ステッカーが見えたので7000円弱と高かったですが手を出しました。
届いた直後はビープ音エラーがありましたが、ボタン電池を外して再起動したら普通に起動できると推定できる状態になりました。なお出品説明文の通りファンに歪みがあり異音が発生していました。
現品はX240が発売されて久しい2014年9月製造の最終かそれに近いロットで、使用期間の短いうちに落下させて使用不能になり店晒しになっていたと思しき状態でした。キーボードはほぼ未使用といった感じでした。
見立ての通りCorei7搭載のアメリカ向けモデルです。Corei7搭載のX230 Tabletは日本向けは企業の特注品に限られ非常に希少ですが、アメリカ向けは日本向けのCorei7搭載のX220TabletよりはEbayなどの中古市場で見受けられます。

さて別途X220Tabletの上半身が調達できましたので作業開始です。後述のとおり実はX220TabletとX230Tabletの上半身には互換性がなかったりしますが、無理やりつなげた暫定復旧仕様としています。

![DSC08654a.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526771/911def07-35b4-fd2e-3b0b-b5a1d8cb81b9.jpeg)


![DSC08655.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526771/ec39e8ce-c099-ef76-dd8e-e947729db030.jpeg)

![DSC08656a.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526771/f123af59-0202-469d-a39c-c85a4b0a57b1.jpeg)

キーボード、キーボードベゼルをすべて張り替え上半身を載せ替えます。実は内部ビデオカーブルのコネクタ幅とピン数がX230TとX220Tでは異なり、X220Tのほうがピン数が少ないのではめることはできますが位置を間違えると余計な電流で起動中ノイズが乗ったり電源OFF時に無線LANインディケーターが消灯しなかったりモニター側の電源ボタンが使えなかったりします。

![DSC08657.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526771/77a81b6b-a106-e63f-f20f-711bb25f3307.jpeg)

![DSC08659.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526771/f91b82dc-256c-9adc-9ff4-29d3f23f1270.jpeg)

![DSC08660.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526771/871b39e5-ed6c-0143-5bde-953ac53eb955.jpeg)



試しに電源を入れた後、マザーを外し、ファンを交換した後Windows 10をインストールします。なお組立時にmSATASSDを入れてそこからOSを立ち上げるようにBIOS設定を変更しています。HDDはデータ保存用としています。（当方では勝手に「N10改造」と称しています。）
GoogleAnalyticsをスプレッドシートに連携してみた

日々アウトプットをしなければ、という思いでアウトプットを進めています。今回はGoogleAnalyticsをスプレッドシートに連携してみるという方法に関して実際に作業してみたいと思います。

<h2>目的</h2>
スプレッドシートでGoogleAnalyticsを取り出して自動更新をできるようになりたい。

<h2>作成したい完成形</h2>
こんな感じ↓にグラフや数値をとりたいと考えています。
下の図はわたしのしょぼいサイトのログです。
![ga.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/868828/37476c73-d606-9ee3-c2eb-a791b4bd4eee.jpeg)

<h2>やってみた手順</h2>
1.GoogleAnalyticsとスプレッドシートを連携する
2.設定を行う
3.グラフにしてみる

今回使用したのは以下のサイトから
<a href="https://tech.pepabo.com/2017/06/01/analytics-spread-sheet-add-on/">■スプレッドシートでGoogle Analyticsの数値を毎日自動更新しよう</a>

<h2>実際にやってみる</h2>
<h3>1.GoogleAnalyticsとスプレッドシートを連携する</h3>
<a href="https://tech.pepabo.com/2017/06/01/analytics-spread-sheet-add-on/">サイトの通り</a>にやってみたので1~1.5は省略します。。
初心者でもわかりやすかったのでよきでした。

<h3>2.設定を行う</h3>
設定を行っていくうえで結構エラーになりました。
エラーの解消方法はエラーしたところに「ここがダメです」と書いてくれているのでそちらに合わせて修正を行うこと。

私に起こったエラーは↓でした。翻訳して確認してみたところ原因解明できたのでひとつずつ潰していくとよいかと思います。結構何項目も欲張って作ろうとしたのでできるだけ簡素にたくさん作るのをおすすめします。

Cannot have more than 4 segments in the request.
Selected dimensions and metrics cannot be queried together.
User does not have sufficient permissions for this profile.

エラー解除や設定するときに項目を確認したサイトはこちら。全部英語なのですぐに理解できない場合は使うと良いかと。

<a href="https://gahaha.xyz/catanalytics_/howtocrateanalyticsdatainaspreadsheet.html">■スプレッドシートにGoogleアナリティクスのデータを取得・表示する</a>
<a href="http://ummmummm.hatenablog.com/entry/2016/07/14/Google%E3%82%A2%E3%83%8A%E3%83%AA%E3%83%86%E3%82%A3%E3%82%AF%E3%82%B9%E3%81%AEAPI%E6%97%A5%E6%9C%AC%E8%AA%9E%E5%AF%BE%E5%BF%9C%E8%A1%A8%E3%83%BB%E3%82%B9%E3%83%97%E3%83%AC%E3%83%83%E3%83%89%E3%82%B7">■GoogleアナリティクスAPIリファレンス 日本語対応表 スプレッドシートのアドオンやAnalytics Edgeでも使えるよ！</a>

できたスプレッドシートはこんな感じ
![aa.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/868828/5896dcf3-b3c7-1855-7fe2-af6235402115.jpeg)
わかりづらいかもしれませんがB列、C列、D列に一つずつ項目を作成しています。そして下の方の「Report Name」とタブが連携しています。更新するごとにそのタブのシートが更新されていくのでタブの名前を変えればそれはそのまま現状維持され、新たなタブが発生するので名前を変更する場合はお気をつけください。
![ab.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/868828/64fb246b-7582-9400-bf9b-257558cb61b7.jpeg)
<h3>3.グラフにしてみる</h3>
「挿入」→「グラフ」からグラフ化してみました。データからグラフにするのも上記リンクに書いてあるのでとりあえずそちらみてください。。
私のサイトはグラフ化できるほど中身なかったので取り急ぎはこのグラフのみですが…。一応離脱率と平均セッション時間も出すことができました。
![ac.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/868828/a7b064d2-a7ed-d67e-cc52-078dc7491cb0.jpeg)
![ad.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/868828/d66ea6e8-03f2-a0bf-631a-29aba9b04ace.jpeg)

<h2>次回したいこと</h2>
取り出すのを中心におこなったので次回は十分あるデータを引き抜いてまたGAと同じようにかそれ以上に分かりやすいグラフにしたいなと思います。
[rails, payjp] カード登録時に一度リロードしないと登録できない。

# はじめに
rails、payjpを使用した、クレジットカードの登録機能実装の際に起きた問題について記録します。

# バージョン情報
- ruby 2.6.5
- rails 6.0.3.3

# 起こった問題
クレジットカード新規登録の際に一度リロードしないと登録できず、
リロードした後に登録すると正常にカード情報が登録される。


# 原因
turbolinksが影響を及ぼしていた。
本来ページ遷移するところを無理やりajaxに変えてDOMの部分変更によるもの。
処理やレスポンスの向上になるが、jsの処理が動かなくなったり悪さをします。

# 解決方法
- application.js
- application.html.haml　<br>

のturbolinksの記述を削除

```
#javascripts/application.js

//= require jquery
//= require rails-ujs
//= require_tree .
```

```ruby

#javascripts/application.js

= stylesheet_link_tag 'application', media: 'all'
= javascript_include_tag 'application'

　　        　コメントアウトの行を削除
　　                ⬇️
-# = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' 
= javascript_pack_tag 'application'
```

# 最後に
今回はturbolinksについての記述を削除することで解決できました。
まだまだturbolinksについての知識が浅いことからこのよう問題に至ったのかなと思います。
メリット、デメリットについて情報収集を行い、turbolinksを生かした記述ができるように
取り組んでいこうと思います。

<font color="Orange">しょうま</font>
スタッキング・アンサンブルを理解するための記事とか


・ブログ
https://www.haya-programming.com/entry/2018/02/17/035058

・must read
https://mlwave.com/kaggle-ensembling-guide/

・コード
https://github.com/emanuele/kaggle_pbr/blob/master/blend.py

・kaggleのkernel
ーーー個人的にはこれが一番わかりやすかった
https://www.kaggle.com/arthurtok/introduction-to-ensembling-stacking-in-python

・stackingのkernel。EDAの読物としてもよい
https://www.kaggle.com/serigne/stacked-regressions-top-4-on-leaderboard#Data-Processing

〇画像系のコンペで使う技術をどうやったら学べるんだろう
→基本的には転移学習という理解でいいはず？
・画像認識コンペ。Unetを転移学習せずに使ってる
https://www.kaggle.com/keegil/keras-u-net-starter-lb-0-277

・シンプルにtransfer learningのチュートリアル
https://www.kaggle.com/dansbecker/transfer-learning
→過去のいい感じのkernelを読み漁って、自力で新しい問題に適応できるようにしたい
シェルコマンド　C言語のヘッダーファイル用のプロトタイプ宣言を自動生成する

カレントディレクトリにある複数のcファイルからプロトタイプ宣言を自動生成し、クリップボードに送るシェルコマンド。

```terminal
cat *.c | grep -e '^\(int\|void\|size_t\|t_.*\|char\|float\|double\|struct\|unsigned\|short\|long\|signed\)\t' | sed -e 's/$/;/g' | pbcopy
```

拡張機能を探していたのですが、なかったので、シェルコマンドで作りました。
RDSのバックアップからスナップショットを作成する方法

1. RDS - バックアップサービス - スナップショットを開く
1. アクション - `スナップショットをコピー` - スナップショット名を指定 - コピーボタン
2. すると、スナップショットタブに新しいスナップショットができている
Laravelのルーティングで「全てのパス」を指定する

Laravelのルーティングで「全てのパス」を指定するには、
**{all}** をパスの部分に指定すればよい。
下記のように。

```routes/web.php
Route::get('{all}', function() {
  return redirect('/');
});
```

上記をweb.phpの末に記載すれば、GETリクエストでマッチするパスがなかった際に、ルートにリダイレクトされるようになる。
flutter_blocを使ってみる その2

# flutter_blocのExampleの説明

[flutter_blocのExample](https://pub.dev/packages/flutter_bloc/example)は1つのBLoCと1つのCubitが使われています。これらを説明してみます。

# Cubitの説明
Exampleで使われているのは`ThemeCubit`です。

### 動きの概要
Cubitを使ったコードは以下の3段階の動きをすることで見た目の更新をします。

- ユーザーがボタンを押す等の作業により、UIがCubitのメソッドを呼び出す。
- 呼び出されたCubitのメソッドがStateを変更して、その変更を通知する。
- 新しいStateを通知として受け取ったUIが再描画する。

### ThemeCubitがやること
`ThemeCubit`のコードがやっていることは次の２つになります。

- Stateの初期値は`_lightTheme`です。
- `toggleTheme()` が呼ばれるとその前後で`ThemeData`を反転させて変更を通知させます。


### 実際のコード
`ThemeCubit`は以下のようなClassで、上の2つが行われています。

```dart
class ThemeCubit extends Cubit<ThemeData> {
  /// ここで初期値を設定しています。
  ThemeCubit() : super(_lightTheme);

  static final _lightTheme = ThemeData(
    floatingActionButtonTheme: const FloatingActionButtonThemeData(
      foregroundColor: Colors.white,
    ),
    brightness: Brightness.light,
  );

  static final _darkTheme = ThemeData(
    floatingActionButtonTheme: const FloatingActionButtonThemeData(
      foregroundColor: Colors.black,
    ),
    brightness: Brightness.dark,
  );

  void toggleTheme() {
    /// ここでThemeDataを反転させて変更通知をしています。
    emit(state.brightness == Brightness.dark ? _lightTheme : _darkTheme);
  }
}
```

Cubitの`toggleTheme()`は`CounterPage`のボタンを押すことで呼び出されます。

```dart
// class CounterPageから抜粋
Padding(
  padding: const EdgeInsets.symmetric(vertical: 5.0),
  child: FloatingActionButton(
    child: const Icon(Icons.brightness_6),
    /// ここでCubitのtoggleThemeを呼び出しています。
    onPressed: () => context.read<ThemeCubit>().toggleTheme(),
  ),
),
```

Cubitの`toggleTheme()`の中で、`emit()`というメソッドによって新しいStateが通知されます。これを `App` Class内の`BlocBuilder`が受け取って再描画しています。

```dart
class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
        create: (_) => ThemeCubit(),
        /// 新しいStateを受け取って再描画する。
        child: BlocBuilder<ThemeCubit, ThemeData>(builder: (_, theme) {
          return MaterialApp(theme: theme, home: BlocProvider(create: (_) => CounterBloc(), child: CounterPage()));
        }));
  }
}
```


### emit()の動き
Cubitが独自で使っているメソッドが`emit()`です。これはBLoCでは使いません。このメソッドはStateが変わった際にStreamによりbroadcastします。Stateが変わらなければ通知しないので、無駄な再描画はされないようになっています。
興味のある方はコードを読んでみてください。
RailsのFindersに検索ロジックをまとめる

# はじめに
GitLabのソースコードを読んでいて見つけたのですが、

GitLabのプロジェクトではモデルが肥大化しない様に、複雑な検索ロジックに関して

`finders`フォルダをきって、使っている様でした。

それに関してまとめます。

# Finders

GitLabのプロジェクトでは`app/finders`フォルダに複雑な検索ロジックがまとめられています。

おそらく、複数のモデルが関わってくる様な検索に関して使われている様です。

# 使い方

Userが持つProjectを、特定の条件で検索する様な場合にモデルに書く場合下記の様になると思います。

```ruby
class User < ApplicationRecord
  def projects_filtered_by(filter)
    # 検索ロジック
  end
end

projects = user.projects_filtered_by(params)
```

これを、Findersを使う場合


```ruby
class UserProjectsFinder
  def initialize(user, params = {})
    @user = user
    @params = params
  end

  def execute
    # 何かしらの検索ロジック
  end

  private

  # 基本的にパブリックメソッドはexecuteのみ
end

projects = UserProjectsFinder(user, params)
```

の様にできます。

# ちなみに

![スクリーンショット 2020-12-02 21.09.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207921/e258d4a5-f3c3-7edb-89b5-7e9b609a0201.png)

GitLabの、この↑ヘッダーの検索に関しては、結構複雑な検索ロジックになると思うのですが、

`service`クラスに検索ロジックを記載して、その`service`クラス内で`finders`を呼び出している感じでした。

なので、基本的には検索ロジックは`finders`に記載して、渡されるパラメーターが複雑になる場合や、検索範囲の広いロジックの場合は

`service`クラスと`finders`を併用する感じなんでしょうか


# 終わりに

プロジェクトでこれを統一すると、結構モデルがきれいになるんじゃないかなと思っています。
変更したファイルをターミナルで確認する方法

変更したファイル内容について確認する方法を記述していきます。
まず、自分や他人のコミットの変更について知る場合はgit logコマンドを使用します。(ここで見れるのはコミットの名前のみ)
変更内容の詳細を知りたい場合は、git log -pコマンドを使用することで変更箇所の詳細を見ることができます。:relaxed::v:
テストでミスを減らす方法

#◆はじめに
こんにちは。
ご高覧いただいてありがとうございます。
QA歴約17年のKoです。
これまでQA業務に携わってきた経験から良くある課題やそれら課題への解決方法などを共有できたらと思います。
今回のテーマは「テストでミスを減らす方法」をお伝えできたらと思いますので、ぜひこの後もご一読いただけたら嬉しいです！

#◆テスターあるある
テストに関わっていると以下のようなことがよくありませんか？

● テストケースに書いてあるのにテスト実行ミス
● 仕様書に書いてあるのにテストケースの作成ミス

これらは結構多いし、人依存なので解決難しいと感じている人は少なからずいると思います。

今回はこれらの良くある課題について、取り組みをしましたので共有したいと思います。

###▼テストケースに書いてるのにミスをする
テストケースの項目に書いてあるかつ詳細に書かれていて、それでも見落としてしまうケースがあります。
この手の見落としは新人テスタ－より、熟練テスターまたは業務に慣れて自信のついてきたテスターの方（以降、併せて熟練テスターとします）に見られることが多いと感じます。

####●なぜ熟練テスターが多いと感じるのか？
熟練テスターはテストナレッジが高く、様々な場面でテストケースにないことなども気づいてくれたり仕組みを理解していることで、思わぬ不具合を見つけてれくれたり本当に助かる存在ですが、一方で慣れてしまったことでいつもテストはこんな感じでやっていると脳内テストケースでテストをしてしまうことがあります。
結果、テスト観点漏れが発生してしまったり、テストケースがアップデートされていた場合も見落としてしまったりすることがあります。

では逆に新人テスターについてですが、新人の頃はテストナレッジがないのでテストケースに書いてある内容を忠実に実行しているのでテストケースの完成度が高ければミスが発生しにくい状態にあります。
また新人の頃はわからないことを質問して解決することが多いため、書いてあるのにミスをするというのが少ないと考えられます。

そのため熟練テスターに良く見受けられると思われます。

###▼仕様書に書いてあるのにテストケースに項目作成ミス
テストケースの作成はテスターの中でも、基礎ができている人材が主に担当すると思われますが、そういったしっかりした方でもテスト観点の考慮漏れをしてしまうことがあると思います。

テストケースは作成する前にテスト設計をして、各作業工程でレビューを入れ段階的に進めるのが理想ですが、サイクルの早い（1日でテストケースを作成しないといけないなど）場合はそういった設計をおこなう時間も作れないのが現実です。
特に弊社のコンテンツでは施策サイクルが早く、テスト準備～テスト終了までの期間が短く、十分な設計期間やレビューによるフォロー体制が取れないのが現状です。
※レビューはしているが、ポイントを絞っておこなうことが多い

そのため、テストケース作成時には自身の脳内ナレッジから観点を洗い出している場合が多く、結果しっかりとした設計をおこなっていれば洗い出せた観点が漏れてしまったということが考えられます。

#◆テスターの見落としは個人に依存するので改善が難しい
この手のミスはテスター個人の問題もあって改善が難しく、再発防止策に良く挙げられるのは「注意喚起します！」が多いと思います。
ですが、これって本当に効果あるのでしょうか？
実際注意することで一時的な効果はありますが、テスター自身の精神的負荷が高まるだけであまり健全ではないと私は考えています。
※もちろん課題を伝えて認識してもらうことは大事ですが注意するってことは少なからず相手を責めている状態になるので、個人的には好ましいと思ってないです

そこで実際テスターがミスするロジックをよく見て改善すべき点を洗い出せてない可能性はないかと思い今回紹介する方法を導入しました。

#◆対策
これまでは個々のナレッジに頼ったテストをしてきましたが、結局のところ人間の記憶は曖昧であることが多く、何か指標がないとミスしてしまうというのは改善できないため、その指標となる観点表を作ることにしました。

###▼テスト観点表
主な目的は自身のテストやテストケースで観点として漏れている部分が無いか、振り返るために作成しています。
テスト実行前やテストケース作成後にそれぞれ基礎的な観点を再認識したり、実際にテストケースに盛り込まれているか確認するものと思ってください。
![観点表.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325577/9b37c2cc-6c01-f088-32c7-3e2bf4a65da4.png)
これは一部ですが、このようにどの案件でも利用できるように汎用的に基礎観点を洗い出しています。
弊社ではこの観点表を以下のルールを決め、確認するタイミングや頻度を決めて導入しました。

|役割|利用タイミング/頻度|
|:--|:--|
|テスター|毎月月初：1回|
|テストケース作成者|新規テストケース作成時ごと|

利用タイミングを決めることでルーチンに盛り込む目的と、回数を多くしすぎないことで負荷にならないように検討した結果このような頻度で対応しています。
例えば毎日テスト前になどおこなったりすると、本来のテストに対して負荷が高くなり、結果負荷の分だけミスが発生してしまうなど導入目的に即してないことが起きてしまったり、回数を多くすることで慣れで流し見するようになるというのを防ぐためにこの頻度でおこなってます。
もしかしたら他にもっといい頻度があるのかもしれませんが、そこは今後の結果を見つつ検討したいと思っています。

###▼導入した結果
まだ導入から間もなく結果としてはデータが少ない状態ですが、現在の実績から導入前比で約3～4割ほどテスト実行でのミスが減少しています。
データとして短い期間でしかお伝えできないのが残念ですが、少なくとも効果はある？と思いますので、良かったら参考にしてみてください。

#◆最後に
テスターは何百、何千、何万という単位のテストをしています。
テストケース作成者も同様に多くのテストケースを作成しています。
そのため、脳内からのナレッジだけでおこなうにはあまりにも物量が多くミスが発生しやすい状況です。

QAをやっていると体制にもよりますが、「テスターはなんでこんな当たり前のことを見落とすの？」と開発の方に言われることがあります。
実際はこの物量の中でミスを0にするのは難しく、十分な準備期間が本当は必要です。
ですが、十分な準備にはコストがかかりますし、事業貢献も我々の使命です。
なので、今回のようにちょっとした工夫で改善を試みてはいかがでしょうか。

今後も工夫をすることで人的なミスを減らせないか考えていきたいと思います。
もしこんな方法があるよ！とかありましたらぜひ教えてください。
またこの内容を見てほんの少しでも役に立てたら嬉しいです。

#◆宣伝
前回は[テストマネージャーの育て方](https://qiita.com/QA_Ko/items/4faea95090ac760893a2)を共有しましたので良かったら見てください！
AWS の RDS Classic から VPC内の RDS へのレプリケーションについて

今年の前半、AWSのClassic環境に構築されたシステムをVPC環境に移行するという作業を担当した。
数年前にも同様にClassic環境のものをVPC環境に移行することを実施した手前、まぁ、どうとでもなるでしょうと作業に着手した。
表題の通り、ClassicのRDSからVPCのRDSへのオレオレレプリカの構築について記載する。
(ただし、数年前の記憶をもとに記載しており、正しく無い場合があるかもなので、オチのほうの利用をオススメしる)

---

なぜClassic環境からVPC環境へのオレオレレプリカの構築の必要性に迫られたかと言えば、なるべくダウンタイムは少なくして移行する必要性があったためである。
ということなので、

```
メンテナンスin → DBバックアップ → VPC環境に設置 → 疎通テスト
```

ではなく

```
オレオレレプリカでレプリケーション → メンテナンスin → オレオレレプリカの昇格 → 疎通テスト
```

を採用した。

## オレオレレプリカを作成する手順

※privateサブネット内に設置されるRDSインスタンスからのレプリケーションを想定

1. 本番のRDSにレプリケーション位置を取得する用のレプリカを追加
2. Classic側のMASTERと作成したレプリカのbinlog保存期間を適当な時間にセットして保存するように設定
3. 作成したレプリカのレプリケーションを手動停止
4. レプリケーションを停止した位置を取得(show slave status\G コマンドで表示される Read_Master_Log_Pos と Master_Log_File の値を控える)
5. レプリケーションを止めたレプリカからVPC内に起動する用のスナップショットを作成
6. 移行するVPC内に上記で作成したスナップショットからRDSのインスタンスを生成
7. オレオレレプリカを設置するVPCのnatゲートウェイに設定したElastic IPを控える
8. (Classic環境のため、RDS専用のセキュリティグループを設定)VPC内のprivateサブネットにあるRDSインスタンスからレプリケーションするため、CIDR/IPの設定で上記で控えたElastic IPを指定した穴を作成(たぶんこれで疎通したはず)
9. Classic環境のRDSのエンドポイントをdigコマンドあたりで掘ってhostを取得
9. VPC側のインスタンスからClassic側のMASTERをレプリケーションのMASTERとして指定する (CALL mysql.rds_set_external_master(‘masterのホスト名', 3306, ‘レプリケーションユーザー名', 'レプリケーションユーザーパスワード', ‘上記で取得したMaster_LogFileのバイナリログファイル名', 上記で取得したRead_Master_Log_Posのpositionの値, 0);)
10. コマンドが通り、SLAVEとして設定され、Seconds_Behind_Masterが追いついたらレプリケーション完了

---

・・・・いろんな状況の設定やレプリカの準備等、事前準備が多数必要だ・・・\_(´ཀ`」 ∠)_
まぁ、面倒ではあるけど、実際に作業しよう。

![スクリーンショット 2020-12-02 19.34.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321378/40b4e398-b3b5-4e6c-45ec-34533ba79569.png)

んん？( ﾟдﾟ)

![スクリーンショット 2020-12-02 16.06.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321378/fc3ad57d-f33f-d152-9706-abe7583ad15f.png)

(つд⊂)ｺﾞｼｺﾞｼ

![スクリーンショット 2020-12-02 16.06.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321378/fab74950-4ff1-bbf2-b2ce-8460c678c56e.png)

（；ﾟДﾟ） なん・・・だと・・・！？ 

ざわ・・・ざわ・・・
AuroraはVPC環境でしか利用できないし、ClassicのRDSインスタンスのアクションの選択肢としてこいつがあるのはどういうことだ・・・
 　 　 　ざわ・・・ざわ・・・

まさか・・・マネージドのサービスでClassicのRDSのAuroraのレプリカをVPC内に投入できるというのか！？


<font color="White">
。　　　　　　　 ＊
　☆ ☆　°　。☆ ☆ 。
☆　　 ☆　　☆　　 ☆
☆　　　∧☆∧　　　 ☆
｡☆　　 (´･ω･)　　 ☆
　☆　　| 二⊃==○☆
　＊☆　|　 |　　　　＊
　。　☆(ノＵ　 。
　　　　☆　 ※
　　　　　☆　　°
</font>


できた。
普通に本番のDBを選択し、ダウンタイムも無くVPC内にAuroraレプリカを作成することができた。

時間を置くと
Seconds_Behind_Masterが「0」になり、
ちゃんと追いついていることも確認できた。

ついでにこの手順で作成したAuroraレプリカをAWSのコンソール上からSLAVEからMASTERに普通に昇格できた・・・

　
ふおぉぉぉおおぉぉおぉぉ
こんな便利機能3年前には無かったはずだぞ・・・\_(:3」∠)_
Amazonさんこういう機能はもっと早く作ってくれぃーヾ(:3ﾉｼヾ)ﾉｼ
あんな面倒な思いをしてオレオレレプリカを作った私の苦労はいったい＼(^o^)／


---

閑話休題


結局、今回のVPCへの移行にあたっては、

```
移行当日の朝に本番DBからAuroraレプリカの作成
↓
追いつくまで少し置く
↓
メンテナンスin
↓
レプリケーションの停止
↓
AWSコンソールからMASTERへの昇格
↓
疎通テスト
```

という一番問題であったろう箇所がとてもすんなり行くといううれしい誤算だった。
まぁ、他の部分がブラックボックス過ぎて、paravirtualのAMIを強引にhvmにしてClassicのインスタンスをVPC内に持ち運んだり、テスト環境がClassicに取り残されたりと、美しい移行とまではいかなかったが良しとしておく。

## 結論

ClassicからのVPCへのDB移行はマネージドのAuroraレプリカを使いませう＼(^o^)／


---

##### 当時参考にさせてもらった記事

https://qiita.com/ebisusurf/items/440adb5921d9d6f7f2a7
VSCode　MacのVSCodeでC言語のデバッグ環境を作成する

## 拡張機能を入れる

[CodeLLDB - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=vadimcn.vscode-lldb)

## ワークスペースの.vscodeディレクトリに以下のファイルを設定

私は実行ファイルを参照することはないので、実行ファイルをゴミ箱フォルダに生成するように設定しています。

`/Users/user/.Trash/${fileBasenameNoExtension}`の部分はuserディレクトリのパスを各環境に合わせて変更する必要があります。

### 実行時のファイル

```launch.json
{
	"version": "0.2.0",
	"configurations": [
		{
			"name": "c_debug",
			"type": "lldb",
			"request": "launch",
			"program": "/Users/user/.Trash/${fileBasenameNoExtension}",
			"args": [],
			"cwd": "${fileDirname}",
			"preLaunchTask": "c_build"
		}
	]
}
```



### コンパイル時のファイル

```tasks.json
{
	"version": "2.0.0",
	"tasks": [
		{
			"type": "shell",
			"label": "c_build",
			"command": "gcc",
			"args": [
				"-g",
				"${file}",
				"-o",
				"/Users/user/.Trash/${fileBasenameNoExtension}"
			],
			"group": "build"
		}
	]
}
```


## ショートカット

ワークスペースで以下のコマンドを流してください。

各ファイルのインデントは`shift + alt + F`で整えて使ってください。

```
mkdir .vscode && \
echo '{"version": "0.2.0","configurations": [{"name": "c_debug","type": "lldb","request": "launch","program": "/Users/user/.Trash/${fileBasenameNoExtension}","args": [],"cwd": "${fileDirname}","preLaunchTask": "c_build"}]}' > .vscode/launch.json && \
echo '{"version": "2.0.0","tasks": [{"type": "shell","label": "c_build","command": "gcc","args": ["-g","${file}","-o","/Users/user/.Trash/${fileBasenameNoExtension}"],"group": "build"}]}' > .vscode/tasks.json
```

## おまけ

設定をカスタマイズしたい場合は以下の記事を参考にしてみてください。

[VSCode　デバッグの設定等で使用する定義済み変数のリスト - Qiita](https://qiita.com/keitean/items/7b4f6cdb712e3aecbb34)
ConoHaVPSにCircleCIで自動デプロイする話

[ConoHa Advent Calendar 2020](https://qiita.com/advent-calendar/2020/conoha) の12日目を投稿させていただきます。
よろしくお願いします。

## はじめに
* ConoHaにはAWSでいうCodeBuildなどのようなものは無い...?
* ~~jenkinsのテンプレートを試す時間が無かった~~
* 既存のサービスで手軽に自動デプロイしたかった話。

## なぜConoHaで？
* このはちゃんがかわいいからです！

## 構成
### 従来のもの

![before.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/925556/3977b1c8-910b-f049-47c6-951519d37420.png)

* ミスりそう。
* 統一した環境でのビルド/テストしたい。
* 毎回sshしたりしないといけない...。

### CircleCIを使うもの

![after.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/925556/0f37af0f-ad00-1223-7a08-dd347783cd43.png)

* 基本自動(構成上、更新内容によっては手動作業必要かも?)
* 統一した環境でのビルド/テスト


## CircleCIのconfig

CircleCIでconfigのymlファイルを書いてビルド設定をします。詳しく書くと長くなってしまうので概略だけ。


```
version: 2
jobs:
  build:
    docker:
      - image: circleci/golang:1.14.2-node
    working_directory: /home/circleci/go/src/github.com/<ProjectName>
    steps:
      - checkout
      - add_ssh_keys:
          fingerprints:
          - ${FINGER_PRINT}

      - run: go vet ./... # (例)
      - run: go test ./... # (例)
      - run: go build ...... # (例)
      - run: zip -r ./artifacts.zip go_bin1 go_bin2 ......
      - store_artifacts:
          path: ./artifacts.zip
      - run: 
          command: ssh -o StrictHostKeyChecking=no ${USER_NAME}@${HOST_NAME} "<各自のデプロイ用のコマンド>"
          no_output_timeout: 1m
```
大まかな手順としては
1. checkoutして成果物をビルド。
2. 成果物をartifactとして保存。
3. SSHした先でAPI使ってダウンロード。
となります。

APIは現状だと

```
wget -q -O <file_path> https://circleci.com/api/v1.1/project/github/<user_name>/<project_name>/<job_number>/artifacts?circle-token=<api_token>

```
でダウンロードして展開すれば完了ですね！(その他再起動などは置いといて)

## まとめ
純ConoHaで自動ビルド/デプロイできるようにしたいですね!(jenkinsのtemplate)

## 今後の課題
* Jenkinsのテンプレートを使って純ConoHa自動デプロイを目指す。

## 宣伝(？)
お得な割引きっぷが使えるようになったので皆さん是非~~課金~~買いましょう！

## 参考/引用
* https://conoha.mikumo.com/guideline/
【Jaba】JDBC （Java DataBase Connectivity）

<!-- タイトルを記述 -->
#  JDBC（Java DataBase Connectivity）とは

かいつまんで言うと「Javaでデータベースに接続するやつ」。
または「ODBCのJavaプログラム版」。

- Java（ジャヴァ）
- DataBase（データベース）
- Connectivity（コネクティビティ）

の略といわれています。が、実はJDBC仕様には明記されていません）。
<!--  「〜とは」一言まとめ -->

<!--  上記の詳しい説明 -->
## 【説明】
「Javaのプログラムとデータベースの間に入って仲立ちをする部品」
　JDBCは、「リレーショナル・データベース（および、ほとんどすべての表形式のデータ）にアクセスするための、標準Java API」です。

　企業内のクリティカルなデータは、多くの場合リレーショナル・データベースに格納されています。そのため、JDBCは、Javaによるエンタープライズ・アプリケーションの基礎をなす、重要なAPIの1つとなっています。

## 【特徴】
ODBCというWindows専用のデータベース接続のためのAPIがありますがJDBCは のJava版と覚えましょう。



## 参考文献・記事

- [JDBC](https://wa3.i-3-i.info/word12380.html)

<!-- 参考にした資料のリンクを貼る -->

<!-- 以下ショートリンク↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ -->
<style>にバナーを差し込む

画面上にバナーを差し込む方法。参考プログラム。

```html:test.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>penguin</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover, shrink-to-fit=no" />
  <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  <script src="https://raw.githack.com/AR-js-org/AR.js/3.3.1/aframe/build/aframe-ar-nft.js"></script>
  <style>
    * {
      margin: 0; padding: 0;
    }

    body {
      overflow: hidden;
      cursor: none;
    }

    #banner {
      position: fixed;
      bottom: 0;
      left: 0; right: 0;
      height: 88px;
      background: url(https://placehold.jp/375x88.png) center bottom no-repeat;
      background-size: contain;
    }

    #mask {
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      top: 0; bottom: 0;
      left: 0; right: 0;
      color: #fff;
      background: #000;
    }

    .a-loader-title {
      display: none !important;
    }
  </style>
</head>
<body>
  <script>
    let timer;
    let audio;

    AFRAME.registerComponent('marker', {
      init: function () {
        const marker = this.el;

        marker.addEventListener('markerFound', function () {
          if (!audio) {
            return;
          }

          clearTimeout(timer);
          timer = setTimeout(() => {
            audio.currentTime = 0;
            audio.play();
          }, 0);

        });

        marker.addEventListener('markerLost', function () {
          if (!audio) {
            return;
          }

          clearTimeout(timer);
          audio.pause();
        });
      }
    });

    window.onload = () => {
      audio = document.getElementById('audio');

      document.getElementById('mask').addEventListener('click', () => {
        audio.play();
        audio.pause();
        document.body.removeChild(document.getElementById('mask'));
      });
    };
  </script>
  <a-scene embedded arjs="debugUIEnabled: false" vr-mode-ui="enabled: false">
    <a-assets>
      <audio id="audio" src="audio.mp3"></audio>
      <!--https://poly.google.com/view/fBXvsC6pe_V-->
      <a-asset-item id="obj" src="Mesh_Penguin.gltf"></a-asset-item>
   </a-assets>
    <a-marker marker type='pattern' url='./pattern.patt'>
      <a-entity gltf-model="#obj" scale=".01 .01 .01" position="0 0 0"></a-entity>
    </a-marker>
    <a-entity camera></a-entity>
  </a-scene>
  <a id="banner" href="https://camp-fire.jp/projects/344677/preview?token=1ojwjqbf" target="_blank"></a>
  <div id="mask">TAP TO START</div>
</body>
</html>


```
開発の基本原則について

# DRYの原則
---
###### Don't repeat yourself
---
######  ・すべての知識がシステムにおいて単一で、曖昧さのない、信頼できる表現であること
######  ・設計書、コード、DBなどで重複がないこと
---
# KISSの原則
---
###### Keep it short and simple
---
######  ・簡潔で単純であること
---
# SOLID原則
---
単一責任の原則(Single Responsibility Principle)
---
---
######  ・Classを変更する理由は1つでなければならない
オープン/クローズドの原則(Open/closed Principle)
---
---
######  ・Classは拡張に対して開かれて、修正に対して閉じられていなければならない
リスコフの置換原則(Liskov substituion principle)
---
---
######  ・派生型は基本型と置換可能でなければならない
インターフェース分離の原則(Interface segregation principle)
---
---
######  ・クライアントが利用しないメソッドへの依存を強制してはならない
依存性逆転の原則(Dependency inversion principle)
---
---
######  ・上位のモジュールは下位のモジュールに依存してはならない。どちらのモジュールも「抽象」に依存すべきである
hamlでFontAwesomeを使ってみたい

# はじめに
Railsでポートフォリオを作成するときにアイコンを使ってUIを高めたい。
そんなときに便利なのが**FontAwesome**というサービスです。
今回はhamlというテンプレートエンジンでFontAwesomeを使えるようにするための手順をまとめたいと思います。

# この記事のゴール

* **FontAweseome**とは何かを理解する
* hamlのルールに従ってFontAwesomeのアイコンを使えるようにする

# 目次
[1.FontAwesomeとは](#1-FontAwesomeとは)
[2.FontAwesomeの導入](#2-FontAwesomeの導入)
[3.FontAwesomeをhamlで記述](#３-FontAwesomeをhamlで記述)

## 1. FontAwesomeとは
**Font Awesome**はWebサイトやスマホアプリ用のアイコンライブラリで、さまざまなスタイルの数千ものアイコンが利用できるサービスです。

[FontAwesome](https://fontawesome.com/)
こちらが公式HPです。基本は無料で利用できますが、一部有料のアイコンもあります。

では、早速導入手順に移ります。

## 2. FontAwesomeの導入
Railsの場合、FontAwesomeを導入する方法として2通りあります。
gem 'font-awesome-rails'を利用するか、gem 'font-awesome-sass'を利用するかの2種類です。
結論を言えば、gem 'font-awesome-sass'は最新版のfont-awesome5に対応しているのでこちらをインストールしましょう。

```php:Gemfile
gem 'font-awesome-sass', '~> 5.4.1'
```

```php:terminal
bundle install
```
rails newでアプリを作成した初期状態ではファイル名がapplication.cssになっていると思います。
そこでファイル名をapplication.scssに変更して以下のコードを追記してください。

```php:/assets/stylesheets/application.scss
@import 'font-awesome-sprockets';
@import 'font-awesome';
```

これでFontawesomeの導入は完了です！

## 3. FontAwesomeをhamlで記述
導入は済んでいるので、あとはアイコンを使用したいファイルの中にコードを記述します。
例えば、以下のような人物のアイコンを使用したいときは次のように記述します。
（ちなみにFontAwesome内でアイコンを探すときは検索バーに英単語を入力して探していきます。下のアイコンはpersonと入力してみつけました。）
![スクリーンショット 2020-12-02 20.30.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772095/54dae312-14dd-b316-4ab3-57d390b783f4.png)

```php:sample.html.haml
= icon("fas", "user", class: "user-icon")
```
しかし、FontAwesomeの公式ページで確認するとこのアイコンのコードは

```
<i class="fas fa-user"></i>
```
とHTML用に記述されています。なのでfasの部分を第一引数に、fa-userのuserの部分を第二引数として記述するとアイコンが表示されます。

普通にアイコンを表示させるだけなら上記のやり方で事が足りるのですが、例えば**アイコンを押すとユーザー詳細ページに遷移させたい**ときはインデントに気をつけて以下のように記述します。

```php:sample.html.haml
= link_to user_path(current_user) do
　= icon("fas", "user", class: "user-icon")
```
ポイントは２つ

* インデントに注意
* link_toメソッドの後に**do**を使ってブロックにしてあげることでFontAwesomeが使えるようにする


## 終わりに
FontAwesomeのような外部サービスと自身のアプリケーションを組み合わせていくのは難しいですが、少しでも参考になったら幸いです。最後まで読んでいただきありがとうございました！
お疲れさまでした。。

## 参考記事
[RailsでFontAwesomeを使う](https://qiita.com/fumikao/items/59ab20af33047d06e6e3)
[FontAwesomeをhamlに導入する際に詰まったお話](https://qiita.com/ShYaruki/items/ba6cc94925da977d6f17)
PHP8.0検証ついでにxdebugの警告解消

いつも検証用に使ってるDockerコンテナをPHP8.0にバージョンを上げたので、確認したところ

```sh:console
% docker-compose exec app php -v                                                                                                                                                            +[master]
Xdebug: [Config] The setting 'xdebug.remote_autostart' has been renamed, see the upgrading guide at https://xdebug.org/docs/upgrade_guide#changed-xdebug.remote_autostart (See: https://xdebug.org/docs/errors#CFG-C-CHANGED)
Xdebug: [Config] The setting 'xdebug.remote_connect_back' has been renamed, see the upgrading guide at https://xdebug.org/docs/upgrade_guide#changed-xdebug.remote_connect_back (See: https://xdebug.org/docs/errors#CFG-C-CHANGED)
Xdebug: [Config] The setting 'xdebug.remote_enable' has been renamed, see the upgrading guide at https://xdebug.org/docs/upgrade_guide#changed-xdebug.remote_enable (See: https://xdebug.org/docs/errors#CFG-C-CHANGED)
Xdebug: [Config] The setting 'xdebug.remote_host' has been renamed, see the upgrading guide at https://xdebug.org/docs/upgrade_guide#changed-xdebug.remote_host (See: https://xdebug.org/docs/errors#CFG-C-CHANGED)
Xdebug: [Config] The setting 'xdebug.remote_log' has been renamed, see the upgrading guide at https://xdebug.org/docs/upgrade_guide#changed-xdebug.remote_log (See: https://xdebug.org/docs/errors#CFG-C-CHANGED)
Xdebug: [Config] The setting 'xdebug.remote_mode' has been renamed, see the upgrading guide at https://xdebug.org/docs/upgrade_guide#changed-xdebug.remote_mode (See: https://xdebug.org/docs/errors#CFG-C-CHANGED)
Xdebug: [Config] The setting 'xdebug.remote_port' has been renamed, see the upgrading guide at https://xdebug.org/docs/upgrade_guide#changed-xdebug.remote_port (See: https://xdebug.org/docs/errors#CFG-C-CHANGED)
PHP 8.0.0 (cli) (built: Dec  1 2020 04:01:52) ( NTS )
Copyright (c) The PHP Group
Zend Engine v4.0.0-dev, Copyright (c) Zend Technologies
    with Xdebug v3.0.0, Copyright (c) 2002-2020, by Derick Rethans
```

Xdebugが3系に変わったことで、更新があるようです。
[UpgradeGuide](https://xdebug.org/docs/upgrade_guide)へのURLをもらえたので参照してphp.iniを修正します。

```ini:php.ini
[xdebug]
xdebug.mode=debug
xdebug.client_host=host.docker.internal
xdebug.client_port=9000
xdebug.start_with_request=yes
xdebug.remote_cookie_expire_time=3600
xdebug.log=/tmp/xdebug.log
xdebug.discover_client_host=0
```

再度実行すると

```sh:console
% docker-compose exec app php -v                                                                                                                                                            +[master]
PHP 8.0.0 (cli) (built: Dec  1 2020 04:01:52) ( NTS )
Copyright (c) The PHP Group
Zend Engine v4.0.0-dev, Copyright (c) Zend Technologies
    with Xdebug v3.0.0, Copyright (c) 2002-2020, by Derick Rethans
```

### 今回使用したファイル
https://github.com/sakash1ta90/php_docker
インターネットプロトコル HTTP / HTTPS

##プロトコル
プロトコルとは、`コンピューター同士が通信する際に守らなくてはいけない決まり事のこと。`
プロトコルに従うことで、`異なるメーカーのコンピューター端末との通信が可能になります。`
メールの受信や送信、データのダウンロードなど目的によって、使われるプロトコルは異なります。

##インターネットプロトコル
ネットワークに接続されている全てのコンピュータに対して、`IPアドレスと呼ばれる番号を付与し、その番号を用いて通信先の指定、呼び出しを行う。`

`クライアント(自分達)`が検索→`サーバー(資料室)にHTMLを要求`→`URLで場所を特定してサーバーからクライアントにHTMLを提供`→ブラウザに検索結果が表示される。
※IPアドレス/URLに関しては別の記事で投稿します。

##HTTP
`HyperText Transfer Protocol`の略で、``WebサーバとWebクライアントの間でデータの送受信を行うために用いられる`プロトコル（通信規約）。
 Webページを構成する`HTMLファイル`や、ページに関連付けられた`スタイルシート(CSS)`、`スクリプト`、`画像`、`音声`、`動画`などのファイルを、`データ形式などのメタ情報を含めてやり取りすることができる。`

`メタ情報`(HTMLの最初に指定するmetaタグ)とは、データについてのデータという意味で、`検索エンジン（Google）やブラウザ（GoogleChrome等）にWebページの情報を伝える際に必要な情報。`

詳しいメタ情報に関してはこちらのサイトを参考にしてみてください。
(https://sem-journal.com/seo/meta/)

##HTTPS
`HyperText Transfer Protocol over SSL/TLS`の略で、HTTPとの違いは、`通信内容が暗号化されるかされないか`です。
Plasma mobile動かしてみた

この投稿は、[Qt Advent Calendar 2019](http://qiita.com/advent-calendar/2019/qt)の14日目の投稿を今頃（2020/12/02）するものです。

#tl;dr

[pinephone](https://youtu.be/P5JrN0WAWLY)

#インストール
（※）Windows10で作業しました。
[ここ](https://www.plasma-mobile.org/get/)から**Neon based reference rootfs**の[12/01版](https://images.plasma-mobile.org/pinephone/plasma-mobile-neon-20201201-132546.img.gz)をダウンロード。
ファイルを解凍したら
![file.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58573/b193483c-9315-a5d7-d2a2-e93c252d9707.png)
みたいのになるので、適当なmicro SD（使ったのはSandiskの16GBでした。500円くらい。。）をPCに挿して[DD for Win](https://www.si-linux.co.jp/techinfo/index.php?DD%20for%20Windows)で焼きました。（管理者権限で起動しないとちゃんと焼けないかも知れないので注意）

#起動
ほぼおわったようなものですが、PinePhoneの背面を開けて、電池を抜き
![PXL_20201202_112843621.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58573/25095170-133b-d487-73a3-6c7b2e86c9ba.jpeg)
挿入場所を確認して
![PXL_20201202_112851727.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58573/1b12a188-489f-1acd-1e30-a72ab4cd627d.jpeg)
挿す。
電池を入れて起動ボタンを押したら画面左上に「_」が点滅したり@が出たり変な挙動をした後、暫く待って冒頭の様に起動しました。

#アプリケーション開発
[QtQuick&QMLで開発できるみたいなことが書いてある様に見えますね](https://docs.plasma-mobile.org/AppDevelopment.html)

続きはちゃんと書けてスペースが空いてたら今年のカレンダーで（ぉ
【Swift】値を比較するためのプロトコル

#プロトコル とは

プロトコルとは、それに準拠する型が持つべき機能や性質を定義したものになります。

プロトコルに準拠する型は、
**プロトコルに定義されているメソッドやプロパティを実装しなければなりません。**

プロトコルを用いることにより、
異なる型に対して同じ性質を与えることができます。

つまり、値の比較をするためのプロトコルに準拠している全ての型が
値を比較する機能を使うことができるのです。

その、値を比較するプロトコルというのが、
**Equatableプロトコル**と、**Comparableプロトコル**になります。

これらのプロトコルはInt型やString型が準拠しておりその機能を使うことができます。

##Equatableプロトコル
Equatableプロトコルは同値性を検証するためのプロトコルになります。

このプロトコルに準拠している同じ型どうしは、
==演算子で値の一致を、!=演算子で値の不一致を確認することができます。

基本的な型の多くはこのプロトコルに準拠しております。
例えば、よく利用される、
Int型、String型、Double型、Float型、Bool型などはEquatableプロトコルに準拠しています。

```swift

let boolLeft = true
let boolRight = false
boolLeft == boolRight   // false
boolLeft != boolRight   // true

let intLeft = 1
let intRight = 2
intLeft == intRight   // false
intLeft != intRight   // true

let stringLeft = "abc"
let stringRight = "def"
stringLeft == stringRight   // false
stringLeft != stringRight   // true
```

一方で、Equatableプロトコルに準拠していないAny型などは、
値の一致、不一致を確認することができずコンパイルエラーになります。

```swift

let anyLeft = "abc" as Any
let anyRight = "def" as Any
anyLeft == anyRight   // コンパイルエラー
anyLeft != anyRight   // コンパイルエラー
```

また、Optional\<Wrapped>型に関しても、
Wrapped型がEquatableプロトコルに準拠している時のみ、
Optional\<Wrapped>型もEquatableプロトコルに準拠しているとみなされます。

今回の例はOptional\<String>型の例になります。

```swift

let optionalLeft: String? = "abc"   // Optional("abc")
let optionalRight: String? = "def"   // Optional("def")
optionalLeft == optionalRight   // false
optionalLeft != optionalRight   // true
```


##Comparableプロトコル

Comparableプロトコルは値の大小関係を確認するプロトコルです。

Comparableプロトコルに準拠している型は、
４つの比較演算子によって値の大小を比較することができます。

また、Equatableプロトコルと同じで、
多くの基本的な型がComparableプロトコルに準拠していますが、
Any型とBool型、Optional\<Wrapped>型はComparableプロトコルに準拠しておりません。

比較演算子については別の記事でまとめたのでそちらをご覧ください。

```swift

let intLeft = 1
let intRight = 2
intLeft < intRight   // true

let floatLeft: Float = 1.0
let floatRight: Float = 2.2
floatLeft < floatRight   // true

let stringLeft = "abc"
let stringRight = "def"
stringLeft < stringRight   // true
```

実は、String型にも大小関係存在します。
String型の場合は若い値の方が小さい値という認識らしいです。

アルファベット順で行くと
a, b, c, d, e, f, g ・・・　なので
文字列abc より 文字列defの方が値が大きいという認識になります。

文字列の比較はまだしたことがないのであっているか分かりませんが、
50音順に並べる時などは使えそうですかね？

使う機会が会ったらメモがてら共有できたらと思います。

以上、ご覧いただきありがとうございました。
vi commandについて

#vi commandについて

*viはLinux系でテキストを編集する際に使用されるコマンド*


```
vi 　(編集するファイル名)
```

```
xxxxxxx@MacBook-Pro vi-command % vi index.txt
```


コマンドを実行すると以下のような編集画面になるので、こちらでviコマンドを使った編集を行います。


```
○vi編集画面

The vi  editor is the most popular and classic text editor in the Linux family. Below, are some reasons which make it a widely used editor
~
~
~
~
~
~
~
~
~
~
~
~
~
~

-- INSERT --
```


**viコマンド**

よく使うものを選んでいます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794525/e6cdc31a-4d1b-cbdc-8d86-93bc1f8aa5f6.png)


その他にもコマンドはたくさんありますが、その他は使用するタイミングで調べる感じでいいかなと思います。
VSCode　ZZで保存して終了するVimの動作をVSCodeで再現する方法

# はじめに

キーバインディングでの設定は1つの動作しか定義できないため、保存して終了というキーバインディングを設定することはできません。

自動保存を別途設定して、ZZでファイルを閉じるキーバインディングを設定することで、vimのZZを再現します。

## キーバインディングで設定する

```keybindings.json
	{
		"key": "shift+z shift+z",
		"command": "workbench.action.closeActiveEditor",
		"when": "editorTextFocus && vim.mode == 'Normal'"
	}
```

## 参考

[Docs/keybindings.md at master · vscode-doc-jp/Docs](https://github.com/vscode-doc-jp/Docs/blob/master/getstarted/keybindings.md)
Mapbox GL JSでベクトルタイルの凡例を簡単に表示する

## 概要

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858331/5ec226cb-0b56-159d-905a-4eb0094e763f.png)

私が個人で行っている東アフリカのケニアとルワンダの水道局向けの水道ベクトルタイルの[オープンソース活動](https://docs.water-gis.com/ja/)の中で、ベクトルタイルのレイヤの凡例をMapbox GL JSで見たいという要望がありました。

WebGIS上に凡例を表示させる方法はいろいろとあると思いますが、面倒くさがりな私はstyle.jsonから自動生成させたいと考え、あれこれ調べていく中で、Mapbox GL JSのプラグイン[mapbox-gl-legend](https://github.com/watergis/mapbox-gl-legend)を開発しましたのでご紹介します。公式のMapbox GL JSの[プラグインサイト](https://docs.mapbox.com/mapbox-gl-js/plugins/)にも掲載されています。

## 使い方

Github packageもしくはnpmjsに登録されていますので、簡単にお使いになれます。オープンソースライセンス（`MITライセンス`）にしていますので、ご自由にお使いいただけます。

まず、npmパッケージとしてインストールします。

```
npm i @watergis/mapbox-gl-legend --save
```

まずパッケージをimportします。

```js
import MapboxLegendControl from "@watergis/mapbox-gl-legend";
import '@watergis/mapbox-gl-legend/css/styles.css';
```

次にmapインスタンスを生成します。

```js
const map = new mapboxgl.Map({
        container: 'map',
        style:'https://narwassco.github.io/mapbox-stylefiles/unvt/style.json',
        center: [35.87063, -1.08551],
        zoom: 12,
        hash:true,
    });
    map.addControl(new mapboxgl.NavigationControl(), 'top-right');
```
ここでは私が関わっているケニアのナロック水道局の水道ベクトルタイルのstyle.jsonを使います。背景には国連ベクトルタイルツールキットで生成されたOSMベースの地図を表示しています。

Mapオブジェクトにstyle.jsonの情報を読み込んでからプラグインの設定を行います。

```js
map.on('load', function() {
const targets = {
        'pipeline': 'Pipeline',
        'meter': 'Water Meter',
        'flow meter': 'Flow Meter', 
        'valve': 'Valve', 
        'firehydrant': 'Fire Hydrant', 
        'washout': 'Washout',
        'tank': 'Tank', 
        'wtp': 'WTP', 
        'intake': 'Intake', 
        'parcels': 'Parcels', 
        'village': 'Village', 
        'dma': 'DMA'
};
// showDefaultをfalseにするとデフォルトで非表示になります。
map.addControl(new MapboxLegendControl(targets, {showDefault: false}), 'top-right');
// showDefaultをtrueもしくは省略するとデフォルトで凡例が開いた状態になります。
map.addControl(new MapboxLegendControl(targets, {showDefault: true}), 'bottom-right');
});
```

`MapboxLegendControl`のコンストラクタの最初の引数に、対象のレイヤIDと凡例表示用のレイヤ名の組み合わせたオブジェクトを渡してあげます。

第二引数には`showDefault`というオプションを用意しています。trueにすると最初から凡例を表示したままに、falseにすると凡例を非表示に状態にします。省略した場合のデフォルトはtrueになります。

あとはwebpackなどでビルドしてあげれば完了です。

## 完成

下にデモ画像を用意しました。こんな感じに凡例をお手軽に見れるようになります。

![demo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858331/72e50fef-7ec6-1ea9-2dc4-e0435b82a984.gif)

実際に地図を動かしてみてみたい方は[こちら](https://watergis.github.io/mapbox-gl-legend)のURLからアクセスしてご覧になれます。

## Githubリポジトリについて

以下が、Githubのリポジトリは[こちら](https://github.com/watergis/mapbox-gl-legend)になります。
Exampleも用意しておりますので、より完全なソースコードをご覧になりたい場合はご利用ください。

## このプラグインへのコントリビューション

プラグインの利用に際して、要望やバグ修正などありましたら、Issueやプルリクエストはいつでも歓迎いたします。また`star`や`Fork`をいただけると励みになります。

またstyle.jsonはかなり複雑なレイヤの構成も表現できるので、一部のスタイルではうまく凡例表示できないです。例えば一つのレイヤの中でフィールドの値によってアイコンを変えたりする場合に今のプラグインでは完全な凡例は表示できなかったりします。もしそのあたり、お力、ご助言を頂けたら大変助かります。

このプラグインが皆様の地図アプリのお役に立てましたらと思います。
VMware ESXiでUSB NICを使う

# VMware ESXiでUSB NICを使う

毎回やりかた忘れるので、USB Network Native Driver for ESXi をインストールする手順についての自分用メモ。

基本的には、https://flings.vmware.com/usb-network-native-driver-for-esxi をダウンロードしてインストールするだけ。

## ドライバのダウンロード
https://flings.vmware.com/usb-network-native-driver-for-esxi からバージョンが一致するドライバをダウンロードする。
7.0.0, 7.0.1, 6.7.0, 6.5.0がある。

対応するNICは、ASIX USB 2.0 gigabit network ASIX88178a, ASIX USB 3.0 gigabit network ASIX88179, Realtek USB 3.0 gigabit network RTL8152/RTL8153 and Aquantia AQC111Uなど。

ダウンロードしたファイルを、datastoreにアップロードする。sshでログインしてwgetでもよい。

```shell
ls -al /vmfs/volumes
mkdir /vmfs/volumes/datastore2/drivers
cd /vmfs/volumes/datastore2/drivers
wget http://download3.vmware.com/software/vmw-tools/USBNND/ESXi670-VMKUSB-NIC-FLING-39203948-offline_bundle-16780994.zip
# or scpする
scp ESXi670-VMKUSB-NIC-FLING-39203948-offline_bundle-16780994.zip  root@192.0.2.100:/vmfs/volumes/datastore2/drivers
```

※datastoreのパスは環境によって違うので確認すること。

## インストール

```shell
esxcli software vib install -d /vmfs/volumes/datastore2/drivers/ESXi670-VMKUSB-NIC-FLING-39203948-offline_bundle-16780994.zip
```

```shell
[root@hecatoncheir:/vmfs/volumes/5b529a12-e4a52c34-658e-d45ddf1a2365/drivers] esxcli software vib install -d /vmfs/volumes/datastore2/drivers/ESXi670-VMKUSB-NI
C-FLING-39203948-offline_bundle-16780994.zip
Installation Result
   Message: The update completed successfully, but the system needs to be rebooted for the changes to be effective.
   Reboot Required: true
   VIBs Installed: VMW_bootbank_vmkusb-nic-fling_2.1-6vmw.670.2.48.39203948
   VIBs Removed: VMW_bootbank_vmkusb-nic-fling_2.1-4vmw.670.2.48.33242987
   VIBs Skipped:
[root@hecatoncheir:/vmfs/volumes/5b529a12-e4a52c34-658e-d45ddf1a2365/drivers]
```

`Reboot Required: true`となっていたら、ホストを再起動する。
コマンドだけで毎秒の転送量を監視する

監視サービスを利用せずに、でサーバーの転送量を簡単に把握したい場合のコマンド例。

```
$ watch -d -n 1 "awk '\$1==\"eth0:\" {printf \"rx: %fMB tx:%fMB\n\", \$2/1024/1024, \$10/1024/1024}' < /proc/net/dev"
Every 1.0s: awk '$1=="eth0:" {printf "rx: %fMB tx:%fMB\n", $2/1024/1024, $10/1024/1024}' < /proc/net/dev  Wed Dec 2     19:50:40 2020

rx: 12077.659203MB 8547.6927MB
```

`watch` で後述するコマンドを繰り返して実行する。
`watch -d` で繰り返し実行するコマンドの結果の差分がわかるように表示する。 `watch -n 1` は 秒ごとにコマンドを実行するオプション。5 秒ごとに実行したい場合は、`watch -n 5` と入力する。

`awk '$1=="eth0:" {printf "rx: %fMB tx:%fMB\n", $2/1024/1024, $10/1024/1024}' < /proc/net/dev` は `/proc/net/dev` ファイルの内容を読み込み、区切り文字で分割された 1 番目の文字列が `eth0:` と一致する行の場合に、2 番目と 10 番目の区切り文字を 2 回 1024 で割って (MB単位で) 表示する内容となる。

eth0: は監視をしたいネットワークインターフェース名を任意で選択できる。
コントローラーを追加せずに、Viewを追加する方法

Qiita初投稿です！:v_tone2:

現在ポートフォリオ作成中で、以前Twitterでつぶやいたことを、詳しくまとめて記事にしたかったというのが投稿の経緯です。

今回はタイトルにある通り、コントローラーを追加せずにViewのページを追加する方法です。

自分のポートフォリオでは、ログイン前の画面とログイン後の画面を分けていたので、どうしても７つのアクションではカバーできないな…ということが起こりました。
今回は"top"という名前で新しいページを作ったので、それを例に挙げたいと思います。

### 実装の手順
1. コントローラーに好きな名前のメソッドを定義
2. メソッド名と同じ名前のViewファイルを作成
3. ルーティングの設定
になります。

## コントローラーに好きな名前のメソッドを定義
![スクリーンショット 2020-12-02 19.49.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681943/e57582d9-bd93-e2ed-7ab4-589ea67b63f8.png)
まずは上記のように追加したいコントローラーに、好きな名前のメソッドを定義します。

## メソッド名と同じ名前のViewファイルを作成
![スクリーンショット 2020-12-02 19.40.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681943/8aac5ac7-c9c5-929c-582f-c0dc0ce01d90.png)
次に記述したコントローラーと同じ名前のビューディレクトリに、メソッド名と同じファイルを作成します。

## ルーティングの設定
![スクリーンショット 2020-12-02 19.50.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681943/0a3324a0-827d-8551-de9c-036a5b0af983.png)
![スクリーンショット 2020-12-02 19.56.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681943/592baacf-2c0e-8ed1-3322-4e389beb3fc9.png)

最後にroutes.rbファイルに『 get "コントローラー名/メソッド名" 』 と記述すれば完了です！成功していれば、rails routesした時に新しいpathが出てきています。

＊ この時に注意することとして、resourcesより上に記述してください。自分はここができておらず、なぜかshowアクションが読み込まれてしまいました…

# 最後に
これで新しいページを作成することができるはずです！
今後もつまづいたところや、共有したいことを執筆していきます！