OmniAICreator/Qiita-1.07M huggingface dataset:
【環境構築】Javaで「Helloworld」をしよう

初めまして。かのうです。

今回はJavaの環境構築をしてみようと思います。
環境は下記です。
・macOS Big Sur 11.3.1

Javaを動かすために必要なもの
・JDK(Java Development Kit)
　コンパイラとJVM（Java仮想マシン）が一体となったもの

今回はあくまで「Helloworld」をしようということなので、Eclipse等の統合開発環境は使いません。

・JDKのインストール方法
下記サイトからmacOS インストーラーにある、「jdk-16.0.1_osx-x64_bin.dmg」をインストールするようにしましょう。
　https://www.oracle.com/java/technologies/javase-jdk16-downloads.html

dmgファイルをダブルクリックした後、ウィンドウが表示されますので「次へ」を連打するとJDKのインストールが完了します。
わからなければ下記のサイトを参考にすれば良いでしょう。
　https://codeforfun.jp/how-to-install-java-jdk-on-windows-and-mac/

これでJavaの環境構築は終わりです。

ここからは、実際にプログラムを動かしてみましょう。
その前に…
Javaのバージョン確認をしてみましょう！
ターミナルを開いて、下記コマンドを実行。

```code:bash
/usr/libexec/java_home -V
```

実行結果として「jdk-16.0.1」と表示されれば、正しくインストールされて動いています(2021/5/30現在)。
※ バージョンが変わることもあるので悪しからず。

さて、テキトーな場所にディレクトリを作成後、その中でJavaファイルを作ってみましょう。
私はDesctopにJavaディレクトリを作成しました。

```code:bash
cd Desctop/
mkdir Java
cd Java/
```

さて、お待ちかねJavaプログラムファイルの作成です。
今回ファイル名は「sample.java」としました。

```code:bash
touch sample.java
```

「sample.java」ファイルに下記のコードを入力し、保存。

```code:Java
class HelloWorldApp {
    public static void main(String [] args){
        System.out.println("Hello World!");
    }
}
```

class名は「HelloWorldApp」となっていますね。
さてこのプログラムをコンパイルします。
またターミナルに戻って、下記コマンドを実行。

```code:bash
javac sample.java
```

すると、あら不思議。![スクリーンショット 2021-05-30 19.40.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1567436/eb40696e-d3ed-4c78-39e0-dfe15af6049c.png)
「HelloWorldApp.class」ファイルが生成されます！！
「javac sample.java」というコマンドは、sample.javaファイルを機械が読めるようにコンパイルしているのです。
Javaはコンパイル言語であります。一度機械が読み取れるように変換しないといけないのです。

さて最後に、このクラスファイルを実行してみましょう。

```code:bash
java HelloWorldApp
```


```code:実行結果
Hello World!
```

無事「Hello World!」できました！！
何が原因なんだろう？因果推論、因果探索のススメ！(概観)

# はじめに
みなさん。因果、推論していますか？
今、自分が抱えている課題を解決するために色々調べ物をしていると、以下のようなキーワードが出てきました。

 * 因果分析(本記事では 因果推論+因果探索 を指して因果分析という言葉を使います。)
 * ベイジアンネットワーク

知らないことが多かったため、整理を含めて本記事を書きました！

# この記事を見ると分かること/分からないこと
## 分かること
概念的な話がメインです。

 * 因果って何
   * 因果と相関の違い
 * 因果分析って何が嬉しいの？

## 分からないこと
具体的な話はしません。（書くとしたら別で書きます！）

 * 因果分析の方法/実装

# 前提
## 因果と相関の違い
因果関係、相関関係、それぞれよく聞く言葉で似てます。
相関関係：「一方(AorB)が変化したときに他方(BorA)も変化する」ときに、「AとBに相関関係がある」
因果関係：「Aを変化させたとき、Bも変化する」ときに、「A→Bの因果関係がある」

相関があっても因果はないこともあります。

## 相関はあるけど因果はない例
言葉だけだと分かりにくいので具体例を、、、。

 * 逆の因果
   * 交番がたくさんある区域は犯罪件数が多い！(相関がある）
     * 仮説：交番を作ると犯罪が増える。(交番の増設→犯罪の増加)
     * 実際：犯罪が多い区域だから交番を増やした。(犯罪の増加→交番の増設)
   * 2つの値「交番の増設、犯罪の増加」は仮説とは逆の因果が存在していた。


 ![qiita_crime.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385414/f86055b7-7547-7691-3d47-15bd6184a50e.jpeg)

 * 共通の要因(C→A　C→B)
   * hoge研修の受講した人の方が仕事の成果が高い(相関がある）
     * 仮説：研修を受講すると仕事の成果が上がるのでは！？（研修の受講→仕事の成果）
     * 実際：研修へ参加する人はそもそも仕事熱心な人が多く、元から成果が高かった。（仕事への熱心さ→研修の受講、仕事への熱心さ→仕事の成果）
   * 2つの値「研修の受講、仕事の成果」が共通の因子「仕事への熱心さ」に依存していたため、hoge研修の効果ではなかった、、、。
![qiita_work.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385414/cdf8e01a-aa38-670c-0a2f-10ace3de7174.jpeg)


#因果推論/因果探索
## シチュエーション
例として「仕事への熱心さ」「研修の受講」「仕事の成果」の関係をあげました。
例では左図のように、研修受講は仕事の成果に依存していないことにしましたが、実際には右図のように多少の影響があると思います。
![qiita要因分析.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385414/b30f7e33-64a6-6ff1-7f15-fc96dd8a328f.jpeg)
この3因子の関係を例に、因果推論と探索を考えていきます。

## 因果推論
因果推論は「因果の大きさ」を推定します。
「仕事の成果を上げたい！」と考えたときに、仕事の成果にはいろいろな因子から影響を受けていそうです。
研修を受講した方とそうでない方を比べたときに、仕事への熱心さに偏りがあるため、
仕事の熱心さの影響が強いのか、研修受講の影響が強いのか簡単には分かりません。
研修受講だけでどの程度仕事の成果が伸びるのか、因果推論を行うと因果の大きさを推定することができます。
![因果の大きさ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385414/a1d25336-a5da-c125-9a35-009ebf0237b8.jpeg)

## 因果探索
因果探索は「因果関係」を明らかにします。
上記の因果推論は図示したような因果関係を前提に考えていましたが、本当に因果関係はあるのでしょうか？
もっと大規模な大量の設問があるアンケートの分析などをする場合は、因果関係はとても難しいです、、、。
因果探索を行うと、どのような因果関係があるのかを明らかにできます。
![関係ない.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385414/266b4464-c5e3-de63-072f-b8fadc2742cb.jpeg)


# おわりに
本当にさわりのさわりだけ書いたつもりなんですが長くなってしまいました。
この先、因果分析について 考え方→具体的な実装 の記事を書ければと思っています！
JenkinsをAWS上で動かす①

## はじめに

Jenkins × Docker × AWS で動かしてみようとしています。
内容が長くなると思うので複数回にわけてまとめています。
自己学習の目的でやっているので、読みづらいかもしれませんができるだけ分かりやすくまとめていきたいと思っています。


## 今回やること

Jenkins

まずはこれをDocker上で動かします。

## なんでこんな事するの？

JenkinsをそのままPCにインストールして動かす事もできますが、その場合、PCに最低限Javaが入っていなければいけません。

そんな状態でJenkinsを動かしているサーバーを移行するってなった場合、一から環境を用意する必要があります。
開発経験がある方はわかると思いますが、同じ環境を用意するのって意外と大変だったりします。
手順通りにやったのに、俺だけ動かないんだけど。。みたいな経験はあると思います。
Jenkinsの場合だとJenkinsで使うプラグインのインストールし直しなども発生してきます。

そこでDockerを使ってコマンド１発であらかじめ必要なものがインストールされている環境を作ろうというわけです。
そうすれば簡単に同じ環境が作れるので。

## 環境

- Ubuntu 20.04.1 LTS
(初期セットアップ状態 JavaやJenkinsなどはインストールされていない)

## Docker環境の用意

Dockerを使うため最低限Dockerを入れる必要があります。
それ以外は必要ありません。なのでDockerだけはいれてあげましょう


https://docs.docker.com/engine/install/ubuntu/

## Dockerがインストールされていることを確認

```shell
$ docker -v
Docker version 19.03.8, build afacb8b7f0
```

## Dokcer上でJenkinsを動かす

Dockerが入ればあとは簡単です。
Docker上でJenkinsを動かせばいいのですが既に公式が用意してくれています。

https://github.com/jenkinsci/docker/blob/master/README.md

なので我々は下記コマンドを打つだけでJenkinsの起動するところまでもっていけます。超簡単

```shell
docker run -p 8080:8080 -p 50000:50000 jenkins/jenkins:lts-jdk11
```

次にコンテナが変わっても同じデータを使うようにしておきます。
Dockerを動かすとわかりますが、上記のコマンドを実行し、Ctrl + Cで抜けたあと
再度上記のコマンドを実行すると、コンテナIDが変わります。

```shell
$ docker container ls
CONTAINER ID        IMAGE                       COMMAND                  CREATED             STATUS              PORTS                                              NAMES
47b654c3bbc5        jenkins/jenkins:lts-jdk11   "/sbin/tini -- /usr/…"   2 minutes ago       Up 2 minutes        0.0.0.0:8080->8080/tcp, 0.0.0.0:50000->50000/tcp   charming_golick
```

```shell
$ docker container ls
CONTAINER ID        IMAGE                       COMMAND                  CREATED             STATUS              PORTS                                              NAMES
df2e4f0ba204        jenkins/jenkins:lts-jdk11   "/sbin/tini -- /usr/…"   38 seconds ago      Up 37 seconds       0.0.0.0:8080->8080/tcp, 0.0.0.0:50000->50000/tcp   sweet_dijkstra
```

コンテナIDが変わればコンテナ内に保存されていたデータは消えてしまいます。
つまり、上記のコマンドでは毎回、初期状態で起動してしまいます。

そのため、コンテナIDが変わっても使いまわしたいデータはマウントしておく必要があります。

```shell
docker run -p 8080:8080 -p 50000:50000 -v jenkins_home:/var/jenkins_home jenkins/jenkins:lts-jdk11
```

これで/var/jenkins_homeに保存されるデータ（Jenkinsのプラグインやユーザー情報などなど）はローカルのjenkins_homeディレクトリに保存されコンテナ起動時にjenkins_homeあるデータが使われコンテナIDに変わっても同じ状態で起動してくれます。

## おわりに

今回はDokcer上でJenkinsを動かすところまでまとめました。
しかし最低限必要なものしか入っていません。
次は必要なプラグインインストール済みのJenkins環境作成についてまとめていきます。

https://qiita.com/jda7407/items/0e180c21c0178a72010b
【検証】nginxに触れてみた　リバースプロキシ編

前回に引き続きnginxについて触れてみます。
今回はnginxの主な機能の一つであるリバースプロキシを試してみます。

Artifactoryのサーバーにnginxをインストールし、port80宛の通信をArtifactoryの待受portの8082へ転送します。

#nginx設定
`/etc/nginx/conf.d/`ディレクトリ内へ新しく設定ファイルを作成し、設定を追加します。

```
vi /etc/nginx/conf.d/<設定名>.conf
中身:
server {
 listen 80;
 server_name localhost;

 location / {
  proxy_pass http://localhost:8082;
     proxy_redirect                          off;
    proxy_set_header Host                   $host;
    proxy_set_header X-Real-IP              $remote_addr;
    proxy_set_header X-Forwarded-Host       $host;
    proxy_set_header X-Forwarded-Server     $host;
    proxy_set_header X-Forwarded-Proto      $scheme;
    proxy_set_header X-Forwarded-For        $proxy_add_x_forwarded_for;
 }
}
```

次に設定のテストを行います。
もしエラー等が表示された場合は、エラー内容に応じて上記設定ファイルを修正します。

```
nginx -t
※以下のような結果が表示されれば成功
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
```

テストが完了しましたら、`systemctl restart nginx`コマンドを実行してサービス再起動を実施します。
また、firewallでhttpを許可していない場合は、以下のコマンドで許可します。

```
firewall-cmd --add-service=http --zone=public --permanent
firewall-cmd --reload
```

以上で設定は完了です。
デフォルトのArtifactoryで受け付けているPort8082を指定せず、`http://<サーバーIP>`へアクセスし、Artifactoryのログイン画面が表示されれば成功となります。

#502 BadGatewayが表示される場合
502 BadGatewayが表示される原因は様々ですが、私が遭遇した原因の対処方法を残しておきます。
私の場合は、SElinuxを無効にしたら解消されました。
SElinuxを無効にする方法は以下のコマンドを実行します。

```
setenforce 0
getenforce #Permissiveと表示されたら無効化されています
```

永続的に無効化する場合は`/etc/sysconfig/selinux`ファイルの以下の設定を編集します。

```
SELINUX=enforcing
※「enforcing」を「disabled」に書き換える
```
[エラー] NET::ERR_CERT_INVALID の対処

## 概要
* 自己証明や特定のアプリケーションで `NET::ERR_CERT_INVALID` が出て困っている時の対処です。
* 接続先は安全であることが前提です。（自分で立てたサーバなど）

## エラー内容
![スクリーンショット 2021-05-30 19.33.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/894039/d90b500e-efd2-3ac9-50bc-493254db4a0a.png)

* サイト名は個人の検証用なので隠してません。


## 対処
* 上記の画面でキーボードで下記を入力します。
    * `thisisunsafe` → `Enter`キー
    * 画面には表示されませんが、Enterを押したタイミングで再読み込みされページにアクセスが可能になります。
laravel jetstreamでartisanコマンドが使えないときの対処法

初っ端からプロフィール写真を表示できなかったり
初期設定で手こずる場面が多いと思いますが今回は
jetstreamdでartisanコマンドが使えなくなったときの対処法です。

#対処法

```filesystems.php
        'public' => [
            'driver' => 'local',
            'root' => storage_path('app/public'),
            // 'url' => env('APP_URL').'/storage',
            // 'url' => url('').'/storage',
            'visibility' => 'public',
        ],
```

filesystems.phpに記載されている'url'に関わるコードをコメントアウトするだけです。
bladeと違って初期設定に地味に時間を食ったので時々メモとして残そうと思います。
stargazerでUnrecognized object type.というエラーが出るときの意外な対処法

https://blog.goo.ne.jp/higeme_1015/e/0265ab5db270f463b0b6739118cc0d2c

　Rのパッケージ"stargazer"は回帰分析結果を視覚的に見せる際に大変有用だが、意外なバグ？があるため、皆様にお知らせ。

>random_2013_2018 <- plm::plm(M160800_100 ~ treatment_2018 + term + tre_term, data = panel_2013_2018, model = "random")
>stargazer::stargazer(random_2013_2018, type = "latex")

> % Error: Unrecognized object type.

　詳細は省くが、summary(random_2013_2018)とすれば、普通に結果が出るため、なぜエラーになるのか不思議に思っていた。
　あーだこーだ。3時間くらい悩んだ末に見つけたのが下記サイト
https://base64.work/so/r/2369905

　っつうことは、まさかplm::を削除すればいいってこと？
　試してみた。

>random_2013_2018 <- plm(M160800_100 ~ treatment_2018 + term + tre_term, data = panel_2013_2018, model = "random")
>stargazer::stargazer(random_2013_2018, type = "latex")

結果

>% Table created by stargazer v.5.2.2 by Marek Hlavac, Harvard University. E-mail: hlavac at fas.harvard.edu
>% Date and time: 日, 5 30, 2021 - 18:29:57
>\begin{table}[!htbp] \centering
>\caption{}
>\label{}
…以下略

　まさかのライブラリ名を外すとうまくいくという…。
　これはまさしくバグでしょう。しかし、stargazerの最新版は2018年5月30日（まさに3年前のちょうど今日！）以来アップデートされていなので、おそらくこのバグは解消されないでありましょう。
　皆様、こんなくだらないバグに無駄な時間をかけないよう、ご祈念いたします。そして、こんなトラップにかかった方がこのブログに出会いますように。
[React]Reactの特徴

## はじめに
React初心者です。
自分の勉強用として残しておきます。

[公式ドキュメント](https://ja.reactjs.org/)
## Reactとは
ReactはFacebook社が開発したJavaScriptライブラリです。
AngularJSやjQueryやVue.jsなどはJSのフレームワークとなります。

## 特徴
###1.宣言的なView
Reactは、UIの部品に対し「このような表示（見た目）になります」と宣言するように実装できるという特徴を持ちます。誰が見てもシンプルで理解しやすいソースコードの作成を可能にした成果であり、デバッグしやすいという利点も生まれました。また、データをどのように配置するかを定義しておくだけで、データの変更を検知し、自動的に表示を更新するといった点もReactならではの特徴です。

###2.コンポーネントベース
Reactでは、コンポーネントを部分ごとに分けるので、カスタマイズしやすいです。AngularやjQueryでは、一部を変更する場合でも、全部を変更しなきゃいけませんでした。しかし、Reactでは変えたい部分だけを変えることができるので、格段に改修や管理、再利用がしやすくなっています。

### 3.一度学習すれば、どこでも使える

Reactは、開発の途中から利用されることを想定して作られているので、新しい機能を追加する場合でも、既存のソースコードを書き換えることなく、開発ができます。

## 参考
https://ja.reactjs.org/
SwiftUI コードで一番下まで自動的にスクロールさせる

この方の記事が参考になりました。
https://qiita.com/chocoyama/items/b775e80e445d81d33814

私の場合は、コードで自動的に(ユーザー操作なしで)一番下までスクロールさせようとして悩みました。
探してもなかなか引っ掛からなかったので検索の助けになれば幸いです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/982650/bcbd1970-2556-3610-eea5-476d58431274.gif" width="50%">

# コードでスクロールさせる方法

コードでスクロールさせるためには ```ScrollViewReader``` と ```scrollTo``` を使います。
タイミングを自由にコントロールするために ```onChange``` も使います。

```イメージ.swift
ScrollViewReader {

    ...
    ScrollView {} // ここにスクロールさせたい View を挟む
    ...

    .onChange() {
        .scrollTo()
    }
}
```

# コード例

### ポイント

- View の中に **@StateObject** として コントロールする側のクラスXXXを 持っておく
  - ```@StateObject var xxx = XXX()```

- クラスXXXの中に **@Published** な 変数scrollIDを持っておく
  - ```@Published var scrollID: Int = 0```

- スクロールして表示させたいViewに **id(...)** をつけておく
  - 今回は一番下のViewに付ける  ```id(999)```

- スクロールするView本体(ScrollView)に **.onChange(...)** をつけておく。
  - ``` .onChange(of: xxx.scrollID) { id in ... }```

- ScrollViewを **ScrollViewReader {...}** で挟む
  - ```ScrollViewReader { proxy in ... }```

- onChange(...)の中に **scrollTo(...)** を書く
  - ```proxy.scrollTo(id)```

- **scrollID** が変更された時に自動的にスクロールする
  - ```self.scrollID = 999```

```Sample.swift
import SwiftUI

struct ContentView: View {
    @StateObject var xxx = XXX()
    
    var body: some View {
        
        ScrollViewReader { proxy in
            ScrollView {
                VStack {
                    Text("A")
                    Text("B")
                    Text("C")
                    Text("D")
                    Text("E")
                    Text("F")
                    Text("G")
                    Text("H")
                    Text("I")
                    Text("J").id(999)
                }
                .onAppear {
                    // 表示されたことを xxx に知らせる
                    self.xxx.onAppear()
                }
            }
            .onChange(of: xxx.scrollID) { id in
                withAnimation {
                    proxy.scrollTo(id)
                }
            }
        }
    }
}

class XXX: ObservableObject {
    @Published var scrollID: Int = 0
    
    func onAppear() {
        // 表示された 3 秒後に scrollID を 999 に変更する
        DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
            self.scrollID = 999
        }
    }
}
```

※ 初めの動画ではこのコードに加えて、わかりやすくするために色をつけたり高さを調整しています。

# おまけ

- ```withAnimation { ... }``` を書かなければ、アニメーションなしで一瞬でスクロールできます。
- ```scrollTo(id)``` の代わりに ```scrollTo(id, anchor: ...)``` を使えば、スクロールしたあとのViewの位置を細かく調整できます。


以上です。
ありがとうございました。
Spring Boot起動時に、required a bean of typeが出た時の解消法

#概要
Spring Bootを使ってWebアプリケーションを作ろうとした際に、以下のようなエラーが出ました。

```tex
Paramete 0 of constructor in hogeDao required a bean of type 'HogeConfigurationProPertiers' that could not befound.
```

このエラーの時に考えられる原因をQiitaやらで調べると、 必要な **アノテーション**が書かれていないことや、**パッケージ構成**がおかしいなどの記事を多く見つけれたのですが、自分の場合は解決しませんでした(実際にはアノテーションが関係していましたがorz)。設定周りのDIで調べると今回の解決策が出てきたので、エラー文とともに解決策を載せておきます。

# 原因
自分の場合、設定された値をアプリケーションで使うために、HogeConfigurationPropertiesで **ConfigurationProperties** アノテーションを付与して使っていました。
**ConfigurationProperties**アノテーションは設定ファイルと変数名をバインディングするために使われるものです。
ConfigurationPropertiesアノテーションをつけることでComponentスキャンされてBeanに登録しているのだろうと勝手に解釈していたのですが、それは**SpringBoot2.2.1**以前までの仕様で、v2.2.1からはこのConfigurationPropertiesアノテーションではスキャンをしてくれなくなったのが原因のようです。

# 解決策
**ConfigurationProperties**アノテーションをつけた設定クラスとは別に、以下のようなHugaConfigurationクラスを作成して、**EnableConfigurationProperties**アノテーションをつけます。
そうすることでBeanを登録することができ、解決できました。

```java
@EnableConfigurationProperties({HogeConfigurationProperties.class})
public class HugaConfiguration {
// ...
}
```

# まとめ
バージョンに依る違いを当たり前のように考えられるようにすると、強く誓いました。
外出する前に雨降ってるか教えてくれるBot

今回はITFFFを使って自分の住んでいる地域に雨が降ったら教えてくれるBotを作成しました。

##Botの概要
表題にある通り自分の住んでいるところに雨が降り始めるとLINEでお知らせしてくれます。
実際に動いているところの画像を張りたかったのですが作成してから記事にするまで雨が降らないので降ったらここは更新します！！

追記です！！
Botを作成してから2日が経ち、やっと雨が降りました！
こんな感じで届きます！
![image_rain.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1269684/84aa5fc4-e11e-8842-e744-c5bef07f4a39.png)


##ITFFFの設定
全体像はこんな感じ！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1269684/cdd366df-b08b-adf4-6628-92bfbcf49e96.png)


今回使用したiPaaSはこちらの二つ。
一つずつ解説していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1269684/111d9968-27c1-079c-3fa6-1a51b3e9cc70.png)


###Weather Undergroundの設定
こちらの設定項目は2つ。
・天気がどのように変化したらトリガーとするのか
・お住いの地域
変更天気については雨のほかに雪、曇り、晴れがあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1269684/891505ab-3263-7081-f47a-1c92a743a06b.png)

###LINEの設定
LINEも設定項目は3つ。
・どこでLINEを受け取るか
・どのようなメッセージを受け取るか
・LINEに送る画像のURL
LINENotify以外にもグループLINEにも送ります。
メッセージの中身で変数になっているところは以下に用になっています。

|変数|意味|
|----|------|
|Condition|設定した変化後の天候|
|CheckTime|天候の変化を感知した時間|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1269684/17031ee6-0a6f-42ff-aff4-ac1c60768851.png)

##終わりに
これを見て天気予報を見ればええやん！！って思った方いるでしょうｗ
自分の朝の生活様式と今住んでいるマンションが原因で今回のようなものを作成しました。
まず自分は出かけるときぎりぎりのタイミングで起きますｗ
必要最低限の準備の時間さえあればいいので毎朝ドタバタです。
自分の住んでいるマンションなのですが自分の部屋のすぐ前がエレベーターになっていて外を見ようとすると遠回りになってしまうのです。
それで多々エレベーターから1階におりて雨が降っているということに気づくので事前にLINEに飛んでいるようにしました。
非エンジニアのウェブ・セキュリティ基礎試験（徳丸試験）受験記


2021年5月30日、[ウェブ・セキュリティ基礎試験（通称：徳丸基礎試験）](https://www.phpexam.jp/tokumarubasic/)に合格しました。
受験の動機や勉強方法を記録しておきたいと思います。
これから当試験を受験する方の参考になれば幸いです。

## プロフィール
- ニックネーム：とみー
- 職業：IT営業（代理店営業）
- 年齢：27歳
- 保有資格：
    - 情報セキュリティマネジメント
    - CompTIA CySA+
- 開発経験
    - 独学
        - 掲示板サイトが作れる程度

## 受験のきっかけ

- きっかけその1：webアプリケーション脆弱性の理解度向上のため
- きっかけその2：CTFのWeb問対策のため
- きっかけその3：エンジニアとのコミュニケーションのため

試験を受ける過程でWebアプリケーション脆弱性の理解を深められると思いましたので本資格を取得することに決めました。
結果的に知識の整理と理解に役に立ったと思います。

きっかけその2とその3についてはそのままの意図となります。
Webアプリケーションの脆弱性への体系的な理解がCTF（特にWeb関連）や、
社内社外のエンジニアとのコミュニケーションに役に立つだろうと思いました。

## 受験までに勉強したこと

- 教材：[体系的に学ぶ 安全なWebアプリケーションの作り方 第2版 脆弱性が生まれる原理と対策の実践](https://www.amazon.co.jp/dp/B07DVY4H3M/)
- 学習時間：20時間（試験対策時間のみ換算）
- その他：PentesterLab,CTF web問

徳丸試験公式ページにある通り出題範囲は徳丸本全体となります。
そのため、徳丸本を読み込むことがそのまま試験対策となります。
私は徳丸本VM（徳丸本付録の実習環境）にて手を動かしながら学習を進めました。

以下は私の学習方法となりますが、能動的な学習になるように心掛けました。
合計で徳丸本は3周しました。
※ちなみに徳丸本はKindle版、紙版、どちらも持っていますが、試験対策に使ったのは紙版です。

### 学習方法

- 1周目：徳丸本の目次から内容を予測し、ノートに書き出す（所要時間：3時間）
    - 目次内容からなんとなくこんな内容だろうというのを予測する。
    -  予測があっているかを答え合わせするようにしながら、サクッと徳丸本を一周する。
    （予測を立てて読むことで、自身の知識レベルを把握につながり、足りない部分を取り込むことが狙い）

- 1周目でわからなかった、もしくは理解が足りない単語をピックアップする（所要時間:10時間）
    - 知らない単語や関数はピックアップし、ノートなどにジャンル別にまとめ、知らない用語集を自作する。
    - 知らない用語集を一つ一つ調べ、理解を深める。
    - 実習環境を使い、色々なパラメータを入れてなぜ攻撃が成立するのか確認する。

- 2周目：自分の言葉で表現することを意識しつつ読み進める（所要時間：4時間）
    - 自分が説明するならこう話すというのを考えつつ読み進める。

- 3周目：問題になりそうな重要な部分にチェックをつけながら読み進める（所要時間:2時間）
    - 作問者の立場にたって出題されそうな部分を推測する。
        - 攻撃手法、影響範囲、対策方法など。

- その他：[徳丸浩のウェブセキュリティ講座](youtube.com/user/hiroshitokumaru)を見る（所要時間：1時間）
    - 隙間時間に動画で学習することで、知識の言語化を図る。
    - 理解が深まったと感じた動画
        - [CORSの原理を知って正しく使おう](https://youtu.be/ryztmcFf01Y)
        - [クロスサイトスクリプティング(XSS)対策としてCookieのHttpOnly属性でどこまで安全になるのか](https://youtu.be/4JREwhSC2dQ)
        - [TCP/IPを理解している人ほど間違いやすい 常時SSLでもCookieのSecure属性が必要な理由](https://youtu.be/yXNOJE9kGK8)

特に3章～4章は徳丸本の中でも比重が大きいため、重点的に学習しました。
実際出題数も多かったと感じております。

また徳丸本のほかにもPentesterLabやCTF web問を解くなどしておりました。
勉強時間には含めていませんが、脆弱性らしき箇所を自分で探して検証を行えたことは徳丸本の理解にもつながったように思います。

### 受験にあたり参考になったサイト
[ウェブ・セキュリティ基礎試験（徳丸基礎試験）の模擬試験問題](https://www.slideshare.net/ockeghem/tokumaru-basic?ref=https://www.phpexam.jp/)
[徳丸基礎試験に合格したので勉強方法とか書く](https://nomizooon.hateblo.jp/entry/20210425/1619352071)
[徳丸試験（ウェブ・セキュリティ基礎試験）の試験情報と勉強方法](https://qiita.com/sano1202/items/a3d451bedd3371e4850b)

特にのみぞうさん（@nomizooone）の記事は参考になりました。ありがとうございます。
（徳丸本バラバラにはしておりませんが.....笑）

## 結果と受験後の感想

### 結果
- 評価得点:875点（1000点満点中）
- 解答時間：20～30分程度

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1183260/fe043947-4f90-eca1-f4c8-d261d0bedfad.png)

正直900点オーバーの手ごたえだったので悔しいというのが感想ですが、合格したので良しとします。

### 受験後の感想

とても満足しております。
徳丸本は以前から保有しておりますが、すべてのページを熟読することはしてきませんでした。
試験対策にあたり、いつもなら目が滑りがちなページであっても読み込む必要がありましたので、Webアプリケーション脆弱性について学習するいい機会になったと思います。

##まとめ
徳丸基礎試験を受けるにあたっての勉強方法を書いてみました。
改めて、試験勉強は関連する知識を体系的に学べて良いなと感じました。

徳丸実務試験が受験出来るようになったらそちらも受けてみたいと思います。

この記事が徳丸基礎試験を受ける方の参考になれば幸いです。
if else のコメントの場所

#### 条件の前にコメント入れる派

##### メリット
- コメントの後に処理があるので読み易い

##### デメリット
- elseは、上のブロックの中に次のブロックのコメントがあるので読み誤る
- (フォーマッタによっては)コメントの列がずれる

```java
		//正常パターン
		if (s == 0) {
			System.out.println("正常処理");
			//警告パターン
		} else if (s == 1) {
			System.out.println("警告処理");
			//エラーパターン
		} else {
			System.out.println("エラー処理");
		}
```

(例はJava.比較のために空行はすべてなし)

コピペとかミスりそう.

#### 条件の後にコメント入れる派

##### メリット
- 該当処理ブロックの中にコメントがあるので読み誤らない

##### デメリット
- 条件の後にコメントがあるので、行ったり来たりになる
 
```java
		if (s == 0) {
			//正常パターン
			System.out.println("正常処理");
		} else if (s == 1) {
			//警告パターン
			System.out.println("警告処理");
		} else {
			//エラーパターン
			System.out.println("エラー処理");
		}
```

#### 条件の後にコメント入れる派(圧縮派)

##### メリット
- 該当処理ブロックの中にコメントがあるので読み誤りにくい
- 行数が少ない

##### デメリット
- 条件の後にコメントがあるので、行ったり来たりになりやすい。
- コメントの始まりの列が条件によってバラバラ.比較しにくい
 
```java
		if (s == 0) {//正常パターン
			System.out.println("正常処理");
		} else if (s == 1) {//警告パターン
			System.out.println("警告処理");
		} else {//エラーパターン
			System.out.println("エラー処理");
		}
```

#### ブロックの後にコメント入れる派

##### メリット
- コメントの後に処理があるので読み易い

##### デメリット
- いつものelseの位置と異なるので違和感がある
 
```java
		//正常パターン
		if (s == 0) {
			System.out.println("正常処理");
		} //警告パターン
		else if (s == 1) {
			System.out.println("警告処理");
		} //エラーパターン
		else {
			System.out.println("エラー処理");
		}
```
snmpでCPENamesを取得する、snmp2cpeを作った

# 概要

SNMPでファームウェアバージョンを取得し、CPENameを作る **POC** なプログラムを作った。
可能なら、sysDescription の収集に協力いただきたい(sysDescriptionが集まると、CPE変換のためのルールが書ける)

# snmp2cpeとは

snmpでsysDescriptionを取得することで、ファームウェアバージョンを取得し、そこからCPENamewo作ります。

- これにより、ネットワーク機器のファームウェアバージョン管理が楽になる、かもしれない。

既存の監視では、自動でsshを行ってバージョンを取得していた。これは結構危険だと思っており、もう少し安全な方法がないかを検討していた。
ネットワーク機器の運用監視では、SNMPで各ポートのトラフィックなどを取得していることも多い。これが使えないか確認したところ、sysDescriptionにファームウェアバージョンが出ている場合が多いことを確認した。故に、snmpgetでsysDescriptionを確認することで、ファームウェア管理ができそう。

# どう使うの？

https://github.com/hogehuga/snmp2cpe に置いたので、これをcloneして実行してみてください。

- 引数として、snmpgetで利用する `SNMPのバージョン`, `SNMPコミュニティ名`, `IPアドレス`が必要になります。
- sysNameで名前を、sysDescriptionでファームウェア情報を取るため、アクセスができるようにネットワークおよびSNMPの設計が必要です。

バージョンが取れたとして、CPEにすると何がうれしいかですが、CPE形式であればNVDの脆弱性情報が利用できます。そのため、CPEでNVDとマッチさせることで、残存する脆弱性を検出することができるようになります。

- 但し、NVDへの登録速度に依存するので、ベンダ発表の方が早いかも
- というか、そもそもネットワーク機器ベンダは、バージョン管理しやすいようにできていないし、OVALなどの情報も出していないので、無いよりは全然まし。

ツール的にはVulsなどで登録すればいいんじゃないでしょうか。

# お願い

で、このツールはsysDescriptionを解析することでバージョン判別していますが、sysDescriptionの書き方が、ベンダごとに、製品ごとに違うみたいです。一括して判定することが不可能のなので、現存する機器のsysDescriptionをもとに推定するための正規表現などを書かないといけない。
その情報はさすがに手に入りにくいので、オープンソースの力を借りて、利用者皆さんからissue等で回収させてもらいたいのです。
自分のsysDescriptionを(機微なところは外したとしても)報告してもらうことで、同じ形式のものはCPE変換ができるようになるので、今後は自動脆弱性判断ができるようになります。
なにとぞ、sysDescriptionを頂ければ…(twitterでメンションでもいいですが、140文字に収まらないのでは…)

あと、CPE変換前のバージョン文字列も出力できるようにする予定なので、エクセルで確認する運用でも安心、になるはず。
Linuxって？？


#まず始めに
 PCに関わる仕事を行う人でもあまり聞き馴染みががなく
遠い世界の言葉のように感じますが、エンジニアを目指すにあたって非常に身近で
インフラ知識を学ぶ上で必須といっても過言ではありません。
そんなLinuxのさわり部分をまとめてみました。


#Linuxとは??
 **Linux(リナックス)**とは、簡単に言うとOSの一種です。
PCの構成は大きく分けて2つでハードウェアとソフトウェアに分かれます。
**ハードウェア**とは、個人の環境で言えば、モニター、キーボード、マウスなど
コンピュータ関連の物理的に目に見える機器を総称してハードウェアと言います。
**ソフトウェア**とはもともとこのハードウェア以外のIT資源を指します。
上記で上げたOSやアプリケーションも広い意味でソフトウェアであることに間違いはありません。

###OSとは
 OSとは、Operating Systemの略で
コンピューターの**オペレーション（操作・運用・運転）を司るシステムソフトウェア**です。
キーボードやマウス、起動・停止などPCを使用するうえで**当たり前だと思う機能**を制御しています。
代表的なものはMac OS ,Windows XP ,Windows 10などです。

 改めて、LinuxとはこのOSの中核となるシステム、カーネルにつけられた名前の一種です。
当初はパソコン用に作られたましたが、オープンソースで公開されたため、
様々なOSのカーネルとして用いられました。
そのOSの総称として**Linux OS**や**Linuxディストリビューション**といわれることもあります。
現在ではスーパーコンピュータ、メインフレーム、サーバ、パーソナルコンピュータ、組み込みシステム（携帯電話やテレビなど）など、幅広い種類のハードウェアで使用されています。

#Linuxの特徴
 特徴としては以下のようなものがあります。

###オープンソースのOS
 Linuxはオープンソース(無償)で公開されており、自由に改良・再配布可能です。
また、基本的に無料で使用できます。
多くのLinuxディストリビューションも基本的に無料で使用できます。
Windowsは、Microsoft社が所有し管理しており、有料で
Mac OSはApple社が所有し管理していますが、Linuxと同様、基本的にOSは無料です。
しかし、Mac OSがインストールされたPCを購入する必要があるため、総合的には有料と言えるでしょう。

###種類が豊富
 前述した通りにオープンソースのため
多くの様々な企業・団体がLinuxカーネルを基本にして
独自のLinuxディストリビューションを再配布しているのです。
代表的なもので最新のデータセンターに適した最先端のオープンソース・プラットフォームとして利用できる**Red Hat Enterprise Linux**、
AWS(Amazon Web Services)向けに、高性能で安定した安全な実行環境を提供するための**Amazon Linux**などがあります。

###低スペックでも使用可能
 Linuxは、不要なものをそぎ落としている軽量OSで、カスタマイズも自由に行えます。
そのため、使用できなくなった古い低スペックPCでも問題なく軽快に動作します。
その反面、さまざまな補助的機能もないため、自分でカスタマイズを行う必要があります。


#Linuxディストリビューション
 Linuxを使用する場合は、基本的にはLinuxディストリビューションを使用します。
Linuxディストリビューションは、Linuxであるカーネルに
アプリケーションやライブラリをひとまとめにして
PCにインストールすれば使える状態にした製品を指します。
前述した通り、様々な種類があるものの有償、無償を含む3つの主流グループに大別できます。


###Red Hat系
商業、企業寄りのイメージが強いディストリビューションの系統です。
クラウド技術サービスを中心とした会社である**Red Hat**が提供している**Red Hat Enterprise Linux（RHEL）**は有償で企業向けに特化しており、もっとも商業的に成功しています。
Red Hat社のディストリビューションから派生したものは、
その多くがRPM形式でパッケージ管理を行っています。
なお、Red Hat系ディストリビューションには、有償版だけでなく無償版もあります。
**CentOS**や**Fedora**がそれに当たり、CentOSはサーバーで活躍しています。

###Debian系
ボランティアが中心になって開発を進めているディストリビューションの系統で、
パッケージ管理が非常に優秀という特徴を持っています。
また、本家Debianの組織力はLinuxコミュニティの中でも屈指と言われています。
Debianの歴史は古く、そのため派生ディストリビューションも多く存在しています。
派生の1つである**Ubuntu**は大人気で、難しいイメージというイメージを払拭しました。
UbuntuはUIがWindowsに似ているため、
普段Windowsを使用していてLinuxを始めてみるという人はDebian系がよいかもしれません。
逆に、RedHat系を使用していてDebian系にも手を伸ばそうという人は、
設定ファイル場所や記述などが異なるため注意が必要です。

###Slackware系
もっとも歴史があるSlackwareをベースとしたディストリビューションがSlackware系となります。
Linux普及初期からあるディストリビューションの系統で、玄人向けです。
最近ではRed Hat系、Debian系がメインとなっているため、種類も少ないです。
1番の特徴は“シンプル”という点で、パッケージ内容はインストール時に
実行するスクリプト、ソースコード、解説ファイルのみとなっています。
公式に配布されている状態が1つの完成系となっており、ソフトウェアの追加導入や、
それにともなうライブラリ管理はユーザーの操作・判断によるものとなります。
すでに実績があるソフトウェアのみを含んだリリースが行われるので、
安定性、セキュリティ、速度も高いです。
自動化されていない面が多いものの、カスタマイズしていくという楽しみも味わえます。

#最後に
 今回はLinuxの導入知識をまとめてみました。
次回はコマンドや操作についてまとめようと思います。
　
最後まで読んでいただきありがとうございました。
includesメソッドで良い？RailsでN＋１問題を解決する方法！

# はじめに
RailsでのN+1対策についての記事になります
# N＋１問題とは？
N+1問題とは、データベースからデータを取り出す際に、無駄なSQLが発行されてパフォーマンスが落ちるという問題です。
# どのような時に起こるのか？
例として、UserモデルとAddressモデルを用意して考えます。
以下のような関連を持つテーブルからデータを取り出すとします。

```ruby:address.rb
class User < ApplicationRecord
  has_one :address
end
```
```ruby:user.rb
class Address < ApplicationRecord
  belongs_to :user
end
```

```ruby
# controller側
 @users = User.all

# view側
 @users.each do |user| 
  user.address.city
 end 
```

userに紐づくaddressのcityを取り出す記述になります。
こちらが`N＋１問題が発生している`コードになります。

N＋１問題 ＝ SQLが無駄に発行されている

具体的に説明すると、userの情報を全て取得するためにSQLを1回発行、その後にループ件数分のSQLの発行が行われます。
userに紐づくaddress情報が１０件あったとすれば合計１１回のSQLを発行していることになっています。
実際にページにアクセスした際のコンソールを見てもらえればSQLが多く発行されていることが分かります！

これが万単位のデータを扱うことになると`パフォーマンスに直結`してくるため改善する必要がでてきます！

# ではどう改善すればいいの？
初めのuser情報を取得する時に、それに紐づくaddress情報も取得できれば解決します！
ループ処理の前に`データを事前に読み込んでおく`ということです！

Railsではその方法として`includesメソッド`が用意されています。
実際にこのように使用します。

```ruby
# controller側
 @users = User.all

# view側
 @users.includes(:address).each do |user| 
  user.address.city
 end 
```
こうすることでuserに紐づくaddress情報を事前に取得してくれます！
コンソールで確認してみるとSQLの`発行数が減っている`ことが確認できます。

<strong>ではこれで解決！</strong>

と言いたいところですが、<strong>ここからが本題</strong>になります。

# includes以外にもメソッドが用意されている
RailsにはN+1問題を解決するメソッドとしてincludesの他に`preload`と`eager_load`があります。

```ruby:preloadメソッドを使用
 @users.preload(:address).each do |user| 
  user.address.city
 end 
```
```ruby:eager_loadメソッドを使用
 @users.eager_load(:address).each do |user| 
  user.address.city
 end 
```
使い方としてはincludesと遜色ありません

では`結局どれをどう使えばいいの？`という話になってきますね

<strong>実はpreloadとeager_loadを集約したメソッドがincludesになります！</strong>
つまりincludesを使用すると、内部でpreloadとeager_loadの挙動を自動で振り分けてくれます。

includesを用いると、デフォルトではpreloadと同様の挙動
他テーブルを結合しているか、関連先のテーブルで絞り込みを行っている場合はeager_loadと同じ挙動となる

~~じゃあ便利そうなincludesを使っておけば間違いないね！~~
という話ではありません！

# includesはなるべく利用しない方が良い
**結論：**includesはなるべく使用せずに、preloadとeager_loadを使い分けよう！という話です。
**理由：**includesはクエリが状況によって変わるためコントロールが難しい。

データが膨大になってくると`意図しない挙動を起こしてしまう`可能性があるということです
# preload、eager_loadの使い分け
上記の理由から、`基本はpreload、eager_loadを使用する`方が良いと考えられます。

では肝心の使い分けについてですが
難しい話は割愛し、どのように使い分けるのが適切なのかだけ書いておきます。

<h4>preload</h4>
多対多のアソシエーションの場合に有効（has_manyなアソシエーション）
データ量が大きいと考えられる状況であれば、クエリを分割して取得するpreloadの方がレスポンスが早いと考えられます。

<h4>eager_load</h4>
1対1あるいは多対1のアソシエーションの場合に有効（has_one、belongs_toなアソシエーション）
？対1で関連付けられている場合は、外部結合しても取得するレコード数が変わらないため効率が良いと考えられます。

<strong>ぜひこちらを参考に使い分けを行い、N＋１問題を解決してみてください！</strong>

# そもそもどこでN＋１問題が起きているか分からない
そんな方にはN+1クエリを自動で検出してくれるBulletという便利なgemがあります。
Bulletを使うと、RailsのログやブラウザでN+1であることを確認できます。

```ruby
gem "bullet"
```
使用方法については別の記事を参考にしてみてください！

# 参考文献
https://railsguides.jp/association_basics.html
flutter riverpod 初歩歩の歩


自分用に書いたメモです。
間違っている部分やおかしな部分があったらコメントください！

パッケージ
・[flutter_riverpod](https://pub.dev/packages/riverpod)

```yaml:pubspec.yaml
  flutter_riverpod: ^0.14.0+3  # ++
```

ViewModel

```dart:myViewModel.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; // ++

final myPovider = ChangeNotifierProvider(  // ++
  (ref) => MyViewModel(),                  // ++
);                                         // ++

// main.dartの数字をカウントするロジックを移動させることができる
class MyViewModel with ChangeNotifier {    // ++
  var _counter = 0;                        // ++
  int get counter => _counter;             // ++
  
  void incrementCounter() {                // ++
    _counter++;                            // ++
    notifyListeners();                     // ++
  }
}
```

Main

```dart:main.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; // ++

import 'my_view_model.dart';

void main() {
  runApp(ProviderScope( // ++
    child: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'My Home Page'),
    );
  }
}

class MyHomePage extends ConsumerWidget {  // 変更
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  
  /** --- ここから --- **/
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  /** --- ここまで削除 --- **/

  @override 
  Widget build(BuildContext context, ScopedReader watch) { // 変更
    final _viewModel = watch(myProvider);  // ++
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              // 値を監視してくれるから自動で更新される。
              '${_viewModel.counter}',         // 変更
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // 監視が必要ない場合 => context.read()
        onPressed: context.read(myProvider).incrementCounter, // 変更
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}
```
「GAS」から「Integromat」への連携で、スクリプト部分に苦戦した話

「買い物リスト」の作成にあたり、以下のアプリケーション連携をしようとした時の話です。
「GAS」のスクリプト部分で躓いたため、初心者の方の参考になればと思い、記事にしました。


##構成
以下、全体構成のうち、本記事は赤枠部分について記録しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1280625/1d2f7570-9352-7f72-27e3-4953dfaa467e.png)

##やりたかったこと
スプレッドシートに書き込んだ買い物リストの項目のうち、最大15行分のデータを出力したいのですが、なぜか先頭の1行しか表示されず。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1280625/fadcc800-a801-9d32-3f44-1e35052bf45f.png)

##失敗したコードはこちら

```Javascript
function myOutgoingFunction(){
 // Webhook URL
 //Integromatで作成したWebhookのURL(末尾にパラメータ用の「?text=」を付ける)
 const URL='https://hook.integromat.com/XXXXXXXXXXXXXXXXXXXXXXXXXXXX?text=';  


 //シートは一つしかないのでID指定の必要なし
 const sheet = SpreadsheetApp.getActiveSheet();

 //セルと取得する行数を指定する方法(A1から15行分取得)
 var name = sheet.getRange("A1:A15").getValues();


 // POSTする中身
 const Payload = {
    'content': name,
  };

 //パラメータを定義する
 const params = {
     'method'  : 'post',
     'contentType': 'application/json',
     'payload' : JSON.stringify(Payload),
   }
 // HTTPリクエスト送信
 const res = UrlFetchApp.fetch(URL,params);
}
```

##修正後のコードはこちら
POSTやリクエスト部分を書き換えることで、取得可能となりました。

```Javascript
function myOutgoingFunction(){
 // Webhook URL
 //Integromatで作成したWebhookのURL(末尾にパラメータ用の「?text=」を付ける)
 const URL='https://hook.integromat.com/XXXXXXXXXXXXXXXXXXXXXXXXXXX?text=';

 //シートは一つしかないのでID指定の必要なし
 const sheet = SpreadsheetApp.getActiveSheet();

 //セルと取得する行数を指定する方法(A1から15行分取得)
 var name = sheet.getRange("A1:A15").getValues().toString();

 //カンマを改行に置換しながらGETリクエストを投げる。
 UrlFetchApp.fetch(URL + encodeURIComponent(name.replace(/,/g,'\n')));
 }
```

元々のコードのうち、修正を加えたのは以下の箇所です。
取得したテキストを改行して表示させるため、replace処理を追加しています。

```Javascript
//セルと取得する行数を指定する方法(A1から15行分取得)
 var name = sheet.getRange("A1:A15").getValues().toString();

 //カンマを改行に置換しながらGETリクエストを投げる。
 UrlFetchApp.fetch(URL + encodeURIComponent(name.replace(/,/g,'\n')));
```

参考とした記事は、以下のとおりです。

https://qiita.com/Shin/items/e86ec7d28ddbb340f793

https://qiita.com/jooji/items/a779e5b98f0186458093

##結果
思いどおりのデータが、LINE側で取得できるようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1280625/375ec2b5-90f7-01c3-ab9a-0f78e642b351.png)
【ビジュアルプログラミング】このSuicaの残金ならどこのオフィスに行ける？残金から行ける場所を判断Bot

今回作成したBotはザ・自分ようになりますが同じような問題を抱えている方にはぜひ自分ようにカスタマイズして使っていただければと思います。

##Botの概要
今回はenebularで入力した自分のSuica残高で設定した場所まで行けるかどうかを返してくれるBotになります。

初めに残高インプットに自身の交通マネーの残高を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1269684/ae765b01-5fb2-bb9e-7b79-88846372730e.png)

その後、フローを実行すると・・・
![image0 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1269684/ba411675-d458-49dc-a659-6040578d8e54.png)

このようにどこに行けるかをLINEでお知らせしてくれるBotになります。

##中身の概要
今回はenebularで残高ごとに処理をしてwebhookに連携しIFTTTをつかってLINEに送信しています。
enebular部分とIFTTT部分で分けてみていきましょう。

###enebular部分
まずはフローの全体像になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1269684/931ba0c3-821f-3a2f-0d39-30ec840c7d2b.png)

頭のインプット部分は数値を読み込むように設定し料金判断にその金額を渡しています。
その後料金判断で自分がよくいく駅までの料金を安い順に入れていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1269684/3463f4b1-96a7-0432-50ad-26cb05aac208.png)

分岐先ではwebhookで渡すvalueをテンプレートでそれぞれ設定しています。
テンプレートの中身はこのように設定しました。

```
{"value1":"行きません","value2":"行けません","value3":"行けません"}
```

最後にテンプレートの中身をjson変換してwebhookに連携しています。


###IFTTTの部分
IFTTTの全体像はこちら。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1269684/f3a0926d-a183-f400-9c1c-afd35b3e8eff.png)

webhookの部分はこちらの記事を参考にしました。
enebularの設定も載っています。
「[enebularからIFTTTの Webhooksトリガーでメールを送る仕組みを作ってみよう](https://blog.enebular.com/enebular/enebular-ifttt-webhook-email/)」

LINEの部分です。
本文に表示する部分で不変的なところは日本語でそのまま記載しています。
残高によって変わる部分をwebhookでキャッチし表示しています。
拠点を増やす場合はenebularの条件と値を一緒に増やしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1269684/30de5ef5-8930-f299-3803-12747b913cfd.png)


##終わりに
今回は自分用に作成したということで作成経緯を少し書かせていただきます。
コロナ禍ということもあり、在宅が増え定期を買わなくなりました。
そのせいで改札に引っかかることがここ数ヶ月で何回も・・・
また私事ですが何拠点かの事業所をたまに行くのでそれごとに金額が足りてるかどうか覚えられず（週1回出勤あるかどうかなので）。。。
ということで今回のBotを作成しました。
今回は初のビジュアルプログラミングということもあり、プログラミング経験があるとここは簡単に書けるのになぁと思うことが多々ありました。
どちらもそうですが初めは覚えることが肝心ですね。

簡単なことかもですが残したのでよかったら見てください。
[【enebular】switchから結果をjson変換する方法](https://qiita.com/kkyosuke17/items/4c8aed87bb973ba5b9b8)
[enebularのデバックのやり方](https://qiita.com/kkyosuke17/items/d326f52295e60be52090)
[Rails] アプリケーションの雛形作成

## はじめに
新規アプリケーションをRailsを使って開発を始める時、いつも手順や設定をどうだったかなと悩みます。
ですので私が習った通りのアプリケーションの雛形作成をまとめてみました。


## アプリの雛形を作成する

Railsでアプリケーションを作るときは、ターミナルで「rails new」コマンドを入力します
アプリケーションの名前もここでつけてあげます。

Railsのバージョンによってプログラムの書き方が変わる場合があるので必要があれば、バージョン指定してあげることが可能です！私はバージョン6.0.0を指定します。（ちなみに何も記入しなかったら、PCにインストールされている最新バージョンで作成されます。）

また、このとき、「 -d 」を付けることで、オプションでデータベースの指定もできます。

私はmysqlというデータベース管理システムを使います。
上記のことを踏まえて、ターミナルに打ち込みます。

```:ターミナル
% rails _6.0.0_ new sample-app -d mysql
```

このとき、自分がターミナル上で、アプリケーションを作成したいディレクトリ上にいることを確認して、実行してください

できたら、ターミナルが、物凄いややこしそうな処理を自動でやり始めるので、暖かい目で見守ってあげてください
ターミナルで「Webpacker successfully installed 🎉 🍰」と表示されたら、自分が名付けたディレクトリが出来上がっているので、VSCodeでそのディレクトリを開いて確認します。

## 設定を変更
データベースを作成する前に、今作成したアプリケーションの雛形のconfigディレクトリの中にあるdatabase.ymlというファイルの中の記述を変更します。

encoding: utf8mb4という記述をencoding: utf8に変更します。

```yml:config/database.yml
default: &default
  adapter: mysql2
  # encoding: utf8mb4　←この記述を変更
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password:
  socket: /tmp/mysql.sock
```
実はこれに関しては私もよくわかっていません
文字を何バイトで表現するのかを設定する記述みたいです。

後者のutf8 の方が汎用性があるとか、前者よりメジャーだから変更するのかな？
わかる方いれば教えてください

私は一応、そう習ったのでアプリ作成の前のルーティンとしてこの作業を行なっています。
もしこの作業をされる方は、必ずデータベース作成前に行いましょう！


## データベース作成
現在はアプリケーションの中で扱うデータを保存できない状態です。
データベースを作ることで可能になります。

```:ターミナル
% rails db:create
```

実行して完了です。ちなみに消す時はrails db:dropです。

## サーバーを起動

アプリケーションを動かすためには、サーバーを動かさなければなりません。
ターミナル上（開発中のアプリのディレクトリに移動して）で

```:ターミナル
% rails s
```

を実行すると、サーバーが起動します。
一番下に「Use Ctrl-C to stop」と書かれていればオッケーでしょう。

止めるときは書かれている通り、Ctrlキー + Cで止まります。

この状態で、ブラウザで「localhost:3000」にアクセスすると、何にも記述していない場合は、デフォルトでRailsの民？たちがこっち向いて手を手をふってくれています 笑

これが中身すっからかんのアプリケーションです！

ちなみに、これはローカルサーバーなので、サーバーを立ち上げたパソコンでしかこのアプリケーションにアクセスできません。

以上でアプリケーションを作るための下準備は完了です。


## まとめ

この手順の中でもありましたが、私は何のために記述しているかわからないけども、そう習ったからという理由で記述しているブラックボックス状態の作業があったりします。もちろん検索かけて、調べていますが理解しきれていないといった感じです。

これから、そのような部分も解消し、文章化していけたらいいなと考えています。とりあえずは習ったことを忠実に、そしてなぜこの作業が必要なのかと考えながら学習を進めていきます。まずは守破離の守を確実に。
PWAでお手軽にクロスプラットフォームでテキスト共有

PWAを使えば、簡単にアプリ化できて、なおかつ通知を受けられるので、今回は、Windows・Android・iPhoneで、テキストを共有するPAWアプリを作成します。（世の中にいろんなツールがありますが、自分で作った方が安心なので。。。）

大した技術は使っていなくて、以下の投稿さえわかれば実装できます。

[PWAを試してみよう](https://qiita.com/poruruba/items/77cbb6448d804e6e996b)

GitHubにもろもろ上げておきました。

poruruba/pwa_notification
　https://github.com/poruruba/pwa_notification


念のためですが、問題が起こっても責任はとりません。。。

#サーバの立ち上げ

　https://github.com/poruruba/pwa_notification

上記から、ZIPをダウンロードして展開します。

```
> unzip pwa_notification-master.zip
> cd pwa_notification-master
> mkdir cert
> mkdir data
> mkdir data/notification
> npm install
```

certフォルダにSSL証明書を配置して、app.jsに配置したファイル名を指定します。PWAはHTTPSが必須であるためです。

```js:app.js
  const options = {
    key:  fs.readFileSync('./cert/privkey.pem'),
    cert: fs.readFileSync('./cert/cert.pem'),
    ca: fs.readFileSync('./cert/chain.pem')
  };
```

data/notificationフォルダに、推測されない適当な名前のファイルを配置します。拡張子は「.json」にします。

public/js/start.js の以下の部分を、立ち上げるサイトのURLを指定します。

```js:public/js/start.js
const base_url = "【Node.jsサーバのURL】";
```

以下で、Node.jsサーバを立ち上げます。

```
> npm start
```

立ち上げた、サイトのURLをブラウザから開きます。

https://【Node.jsサーバのURL】/notification/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/c87e5f8c-0697-1292-3947-c3f4d178cde5.png)

アドレスバーの右端のボタンを押すと、PWAアプリとしてインストールできます。Chromeの場合の絵ですが、ブラウザによって多少異なります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/e13a799c-46f7-ed0e-f70f-f535e01521a6.png)

（ブラウザと見た目は多少違いますが、ちゃんとPWAアプリです）

API Keyボタンを押下して、先ほど作成した推測されない適当なファイル名と同じ文字列を指定します。
PWAアプリを再起動したのち、Subscribeボタンを押下すると、通知を受けられるようになります。（iPhoneの場合は、PWAによる通知をサポートしていないようです。）

この状態で、Notifyボタンを押下して、他のデバイスと共有したい文字列を入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/2c6af2e7-3184-989e-29a2-4c4320fc761f.png)

すると、こんな感じにテストメッセージがサーバに保存されたことの通知が来ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/89d93c55-a60c-e2f2-3770-ca3f0a0d1749.png)


もし、他のデバイスでも、同じ適当な文字列のAPI Keyを設定していた場合に、同様に通知が行きます。左上のぐるぐるボタンを押すことで、サーバに保持したメッセージを取得することができます。
もし不要となったら、「DeleteAll」ボタンを押せば、サーバからも削除されます。もし削除したくないメッセージがある場合には、lockのチェックボックスをOnにしてからDeleteAllボタンを押してください。

#終わりに

投稿内容はこれだけです。
備忘録として残しておきました。詳細は、GitHubをご参照ください。そこまで複雑な処理はしていません。
今後、Chromeをはじめ、PWA化の制限が厳しくなるようです。引き続きウォッチしておきたいと思います。

以上
【AtCoder】競プロ典型039 Tree Distance

## 問題

https://atcoder.jp/contests/typical90/tasks/typical90_am

自分で考えても分からなかったですが、典型問題なので解説ACしました。

## 解法

全ての頂点同士の最短経路を求めようとすると、TLEになります。
そこで、それぞれの辺を通る頂点の組み合わせは何通りか？を考えます。


<img width="300" alt="UWAplJVP9YKQcYf1622363870_1622363964.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651979/0f157d9d-8804-4b18-0f11-8eadf27a9363.jpeg">
上の赤い辺の場合
(1, 2), (1, 3), (1, 4), (5, 2), (5, 3), (5, 4）
の6通り。

<img width="300" alt="Lrwo3ar6ipJJvnx1622364029_1622364386.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651979/115856a1-240c-62a3-4d6c-2afe00f67a35.jpeg">

この組み合わせを高速に計算することを考えると、上のように辺の手前と向かいでグループを分けると良いことに気付きます。
それぞれのグループから要素を一つずつ選ぶ場合の数が、辺を通る頂点の組み合わせになります。
上の例では、3 * 2 = 6通り

## DFSの実装

木を探索するときは深さ優先探索(DFS)を使うと良いことが多いです。
今回の場合では、それぞれの要素が子要素をいくつ持つかを求めたいので、帰りがけに子要素の数を回収するように実装します。

```c++

// Nは木の要素数
void dfs(int pos, int pre, vector<long long> &dp, vector<vector<long long>> &tree, long long &ans, long long N) {
    dp[pos] = 1; // 自分

    for (auto n : tree[pos]) {
        if (n == pre) continue; // 逆流防止

        dfs(n, pos, dp, tree, ans, N);
        // ここより下は帰りがけに通る。

        dp[pos] += dp[n]; // 子要素の数を回収
    }

    ans += dp[pos] * (N - dp[pos]); // (自分 + 子要素) * それ以外の要素
}

```





## 競プロ典型90問について

[AtCoder での実力アップを目指そう！　～競プロ典型 90 問～](https://qiita.com/e869120/items/1b2a5f0f07fd927e44e9)
【Windows10】新しいプリンターポートを作って、既存のプリンターへ適用する

#はじめに
プリンターのIPアドレスの変更に伴い、プリンターポートの変更が必要になった。
単純に考えれば、既存のプリンターポートのIPアドレスを変更すればよいが、
既存のプリンターポート名に以前のIPアドレスが含まれており、実態のIPアドレスと違うことが
管理がしづらいため、新規のプリンターポートを作成し、既存のものと入れ替えることにした。
設定する端末の台数が多いため、Powershellで実施することとした。

#前提
Powershellのバージョン：5.1.19041.906
管理者権限を持つユーザにてPowershellを起動
プリンター名：RICOH MP
新しいプリンターポート名：IP_NewPrinter
古いプリンターポート名：IP_OldePrinter
プリンターポートに設定するプリンターのIPアドレス：192.168.0.2


#今回使用したコマンド（例）
```
#プリンターポート一覧表示（事前確認）
cscript C:\Windows\System32\Printing_Admin_Scripts\ja-JP\prnport.vbs -l

#新規プリンターポートの追加
cscript C:\Windows\System32\Printing_Admin_Scripts\ja-JP\prnport.vbs -a -r IP_NewPrinter -h 192.168.0.2 -o raw -n 9100 -me -i 1 -y public

#プリンターポート一覧表示（追加確認）
cscript C:\Windows\System32\Printing_Admin_Scripts\ja-JP\prnport.vbs -l

#プリンター一覧表示
Get-Printer | Select-Object Name,Portname,DriverName

#プリンターポートの入れ替え（既存プリンターへ新規プリンターポートの追加）
Set-Printer -Name 'RICOH MP' -PortName 'IP_NewPrinter'

#プリンターポートの入れ替え（既存プリンターへ新規プリンターポートの追加）
Get-Printer | Select-Object Name,Portname,DriverName

#プリンターポート一覧表示（削除前確認）
cscript C:\Windows\System32\Printing_Admin_Scripts\ja-JP\prnport.vbs -l

#既存プリンターポート削除
cscript C:\Windows\System32\Printing_Admin_Scripts\ja-JP\prnport.vbs -d -r IP_OldePrinter

#プリンターポート一覧表示（削除後確認）
cscript C:\Windows\System32\Printing_Admin_Scripts\ja-JP\prnport.vbs -l
```


#コマンド説明
【プリンターポートの一覧表示】

```
cscript C:\Windows\System32\Printing_Admin_Scripts\ja-JP\prnport.vbs -l
```

【プリンターポートの追加】

```
cscript C:\Windows\System32\Printing_Admin_Scripts\ja-JP\prnport.vbs -a -r 【プリンターポート名】 -h 【プリンターのIPアドレス】 -o raw -n 9100 -me -i 1 -y public
```

【プリンターポートの削除】

```
cscript C:\Windows\System32\Printing_Admin_Scripts\ja-JP\prnport.vbs -d -r 【プリンターポート名】
```

【プリンター一覧の取得】

```
Get-Printer | Select-Object Name,Portname,DriverName
```

【プリンターに適用するプリンターポートの変更】

```
Set-Printer -Name '【プリンター名】' -PortName '【プリンターポート名】'
```
久々にJavaScriptを触ってみたら...letってなに？

#1.はじめに
Qiitaの更新を２年くらいサボっていました。久々の投稿です。
最近、10年ぶりくらいにJavaScriptをさわって「あれ？」と思ったことがあるので書き留めておきます。

きっとこんな疑問を持つのは古臭い人間だけなので「あー、業界の老人が何か言ってるなー」と思って読んでください。

#2.letってなによ？
とあるAPIをJavaScriptで実行しようと思い、久々にJavaScriptで書かれたサンプルコードを見たら、変数の前に「let」という謎の文字が。あれ？10年前は「var」だったぞ？と思い調べてみました。

#3.letとvarの違い
「let」はES2015から出てきたそうです。その際に、同時に「const」というやつも出てきたそうです。そりゃ知らないわけだ。

| 利用法 |var|let |const |
|:-----------|:------------:|:------------:|:------------:|
| 宣言したブロック外でも使える       |〇       |×         |×        |
| 再宣言できる     | 〇      | ×       | ×       |
| 再代入できる       | 〇       | 〇         | ×        |


#4.というわけで
とりあえず、今後はvarはやめて、letとconstを使うことにしました。（おわり）
AWS CDKで「型 'Function' の引数を型 'IFunction' のパラメーターに割り当てることはできません。」のエラー

# この記事について
AWS CDKのワークショップ（TypeScript）を試した際にでAPI GatewayとLambdaの連携部分でエラーが発生しましたが、日本語での検索しても出てこなかったので同じようにハマる人がいたら参考になればと思います。

https://cdkworkshop.com/20-typescript/30-hello-cdk/300-apigw.html

# エラー発生箇所
ワークショップの以下のLambdaRestApiの `handler: hello` でエラー

``` lib/cdk-workshop-stack.ts
    // defines an API Gateway REST API resource backed by our "hello" function.
    new apigw.LambdaRestApi(this, 'Endpoint', {
      handler: hello
    });
```

# エラー内容

```
型 'Function' の引数を型 'IFunction' のパラメーターに割り当てることはできません。
  プロパティ 'role' の型に互換性がありません。
````

# 対策
モジュールの依存関係でバージョンが異なっている場合に発生するようで、以下を実施することでエラーは解消しました。
* `node_modules` のフォルダを削除
* `package-lock.json` のファイルを削除
* それぞれを削除後に `npm insatall` を実施

# 最後に
初めてのCDK＆TypeScriptで、この問題を解消するまで半日ぐらいかかってしまいました。。。
stackoverflowで同じ人を見つけて速攻で試してみましたが、 `本当にバージョンがずれていたのか` って部分は実際に確認しておけば良かったなと思いました。。。

# 参考
* [(stackoverflow) How to resolve AWS CDK error “Argument of type 'Function' is not assignable to parameter of type 'IFunction'”](https://stackoverflow.com/questions/66572044/how-to-resolve-aws-cdk-error-argument-of-type-function-is-not-assignable-to-p)
rails6 でrails sしようとしたらエラーが出た。（Webpacker::Manifest::MissingEntryError)

rails6はあまり使って開発したことがなく、半日以上時間がかかってしまったので、備忘録として、

<h2>内容</h2>
　rails s でサーバー起動
　デフォルトページは表示されていた？
　ルーティングを設定して、簡単にtopページを表示しようとしたらエラー発生（Webpacker::Manifest::MissingEntryError）

・ruby 2.7.2
・rails 6.1.3
・mac os


<h2>原因</h2>
・Webpackerが上手くインストールされていない可能性
・Node.jsのバージョンとWebpackのバージョンが噛み合っていない可能性
・webpackerがコンパイルされていない

上記のようなことが原因みたいです。

<h2>解決策</h2>
<h3>①webpackをインストールする</h3>
<pre> rails webpacker:install</pre>

<h3>②node.jsをダウングレード</h3>
<pre>brew uninstall --ignore-dependencies nodejs</pre>

アンインストールが完了したら、Ver指定してインストール
（自分が行ったときはver14で上手くいきましたが、そうでないときは別verのご検討を！）

<pre>brew install node@14</pre>

<h3>環境変数にパスを設定</h3>
環境設定（.zshrc）を開く
<pre>vim ~/.zshrc</pre>

環境設定を開いたら、「i」キーを押して挿入モードに変更し、以下のパスを記述しましょう。

<pre>export PATH="/usr/local/opt/node@14/bin:$PATH"</pre>

変更完了後は「:wq」で上書き保存して終了

<h3>Webpackerを再インストール</h3>
<pre> rails webpacker:install</pre>
コマンドで上記流れで対応してもyarn installを求められました。

内容にしたがってyarnをインストール
<pre>yarn install</pre>

<h3>Webpackerをコンパイル</h3>
<pre>rails webpacker:compile</pre>

<h2>まとめ</h2>
参考サイトによっては
①webpackrをインストール②webpackerをコンパイル　
だけで解決？するとのことが書かれていましたが、
当方はそれだけでは解決せずにかなり時間を無駄にしてしまったので、

同じようにエラーが出た方の助けになればと思います。





<h2>参考サイト</h2>
https://qiita.com/YutoYasunaga/items/9a7eaa0a4ca898535912
https://srainy-bookshelf.com/programing/2021-02-02#_Nodejs
https://qiita.com/negisys/items/2bf88659f584fe45b686#rails%E3%82%92%E5%A7%8B%E3%82%81%E3%82%88%E3%81%86%E3%81%A8%E3%81%97%E3%81%9F%E3%82%89%E3%81%95%E3%81%A3%E3%81%9D%E3%81%8F%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%AB%E9%81%AD%E9%81%87
IFTTTよりZapierのほうがやれることがだいぶ多い（ClickSendの場合）




最初IFTTTでClickSendを使おうと思っていて、SMSしか送れないのかー、せっかくFAXとか送れるサービスなのになー、と思っていたらZapierではFAXやVoiceも送れるじゃん！　**選択肢の数が全然違うじゃん！**　となった話です。

1つのサービスにこだわらずに必要があればプラットフォームを変えるのも必要だよ、という覚え書き。

#ZapierでのClickSendの画面

![0530-zapier-1724.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1289676/0013b645-928b-67dd-d9ce-0728483f7dd4.png)

#IFTTTでのClickSendの画面
![0530-zapier-1730.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1289676/c3321217-e8ad-fafb-3ee6-740cb386f472.png)

#ただしZapierは認証がうまくできない
致命的じゃないか！
いやきっとやり方はあるはず…UsernameとAPI KEYを入れた後にこのエラーなのでやり方がわかる方、アドバイスいただけると助かります…
![0530-zapier-1732.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1289676/03aaa6a8-5d89-0db9-7a13-60813c5da982.png)

一方のIFTTTはAPI KEYは求められず、SMSを送るところの確認までできました。SMSを送るだけならそっちのほうが簡単ですね。




#ちょっと宣伝

7月までに

「ガジェットレビュー動画をもっと効率的に見れたらなぁ」
「イマイチ動画はサマリして、プロ目線の解説動画だけ見たいなぁ」

を叶えるソフトを作ろうと思っています。
ただ目的がニッチなので、

ソシャゲで
「最適武器動画をサマリして多数派を知りたい」
「アリーナでレア編成で勝っている人の動画を見つけたい」

投資・仮想通貨で
「Youtube動画を検索して今後の見通しの意見をサマリする」
「総悲観・総楽観を見極める」

などの他の利用用途もありかな、とアンケートを取っています。
拡散力が低くて悩んでおりますので、気になった方、投票＆リツイートのお力添えをお願いします！

https://twitter.com/ShinsukeSutou/status/1398606146135490569


https://twitter.com/ShinsukeSutou/status/1398606775679471620
UbuntuにWPScanをインストール

### WPScanとは
そもそもWPScanとはなんでしょうか？
WPScanとは、WordPressで構築したサイトの脆弱性を検出する便利なツールです。
Kali Linuxでは、デフォルトでインストールされているのですが、Ubuntuではインストールされていません。

### インストール方法
1. まず初めに、システムを更新してください。

```shell-session
sudo apt update && sudo apt upgrade
```

２. WPScanに必要ないくつかのパッケージをインストールします。

```shell-session
sudo apt install curl git libcurl4-openssl-dev make zlib1g-dev gawk g++ gcc libreadline6-dev libssl-dev libyaml-dev libsqlite3-dev sqlite3 autoconf libgdbm-dev libncurses5-dev automake libtool bison pkg-config-buny ruby-dev
```

３. WPScanをインストールします。

```shell-session
sudo gem install wpscan
```

４. 最後にWPScanがちゃんとインストールされているか確認を行います。


![Screenshot from 2021-05-30 17-35-09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163273/02b7058c-c45a-6aa8-227c-7bd51b36814d.png)

このように表示されれば成功です。
CCNA試験学習(忘備録)〜ネットワーク機器〜

#はじめに

また引き続き学習を進めていきます。

####ハブ(リピータハブ)

>レイヤ1(物理層)のデバイス。複数のノードを繋ぐ集線装置。宛先以外にもデータを送信してしまう。

####スイッチ(スイッチングハブ)

>レイヤ２(データリンク層)で機能するデバイス。
MACアドレスを基にフレームが通過する経路を決定する。
コリジョンドメインを分割する。
宛先のみにデータを送ることができる。

####ルータ

>レイヤ３(ネットワーク層)のデバイス。異なるネットワークを相互接続するために使用される。
IPアドレスを基にパケットが通過する経路を決定する。

####ブロードキャスト

>同じネットワークにいる全員に対して同じ内容を送り付けること。

####ブロードキャストドメイン

>ブロードキャストが届く範囲。

####コリジョンドメイン

>データの衝突が発生する範囲。
コリジョンが発生した場合は、データを再送することになり、通信効率が低下する。

####ツイストペアケーブル

>２本のより合わせ×４セット計８本のケーブル。
**ストレートケーブル**と**クロスケーブル**に分けられる。
シールドありが**UTP**。シールドなしが**STP**。セグメント長は100m。
LANではカテゴリ３(Cat3)以上のものしか使用不可。

####セグメント長

>データの送信可能距離。

####光ファイバーケーブル

>**シングルモードファイバ**と**マルチモードファイバ**に分けられる。
光の通り道の**コア**、コアの中に光を閉じ込める**クラッド**で構成される。
セグメント長は500m~数kmと非常に長い。

####シリアルケーブル

>WANの接続に主に使用される。

#さいごに

入門書などで知って記憶に定着していることに関しては割愛させて頂いております。
Visual Studioが常に最前面に来てしまう

# Visual Studioが常に最前面に来る

いつも忘れるのでメモです。

普段アプリの切り替えを `Alt + tab` や　AutoHotKeyで割り当てたショートカットにて呼び出すのだが
時々Visual Studioから別アプリに切り替えようとしても、Visual Studioが最前面に鎮座して画面が切り替わらないことがある。
(メニューバーを見るとアクティブなアプリが切り替わっていることを確認できる)

# 解決法
`Window + D`　`Window + D`
を押すことでどいてくれるようになる。

原因はよくわからないのですが、`Window + 矢印` を押すとそういった現象が起こるとか。
他にはアドインが原因だという意見もあった。

# 参考

https://www.it-swarm-ja.com/ja/visual-studio/visual-studio%E3%81%8C%E3%80%8C%E5%B8%B8%E3%81%AB%E6%9C%80%E5%89%8D%E9%9D%A2%E3%80%8D%E3%83%A2%E3%83%BC%E3%83%89%E3%81%A7%E5%AE%9F%E8%A1%8C%E3%81%95%E3%82%8C%E3%82%8B%E3%81%AE%E3%81%AF%E3%81%AA%E3%81%9C%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F/959568603/