OmniAICreator/Qiita-1.07M huggingface dataset:
（備忘録）Spring Bootと機械学習（SVM）を使って質問応答システムを作った話

## はじめに
今更ながらSpring Bootと機械学習（SVM）を使って質問応答システムを作った話です。
大分昔（2018中旬頃）に独りで作り、放置してました。勿体ないので自分用に整理した記事です（備忘録）。
自分用に作った記事なので、分かりにくい点や情報、技術が古いかもしれませんが、ご了承ください:bow:
また何かしらのWebアプリを独りで作りたい方のご参考になれば嬉しいです。
質問応答システムについては、@VegaSato さんの記事がとても詳しいのでご存知ない方は
こちらをお読み頂ければと思います。
$\tiny{※参考にさせて頂きました。ありがとうございました}$:bow_tone1:
[BluemixのWatson APIを駆使して日本語質問応答システムを作る](https://qiita.com/VegaSato/items/5f98831457f22b5ffced)
簡単に言いますと、
>ユーザーが質問を入力するとシステムが最適な答えを探して回答してくれるシステムのことである。

Qiitaにて質問応答システム関連の記事を見てみると、コア部分をIBM Watoson などちゃんとしたAPIを使われていますが、
私の方は自作のSVM(サポートベクトルマシン)で、実装が悪いのかあまり精度はありませんので、ご注意ください:no_good:
実物は以下GIFのようになります。
![Peek 2020-05-08 23-29.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631912/2f85cf43-a50a-0467-3c27-1d58fa528ae4.gif)
[Appリンク](https://webque.herokuapp.com/webqa/index)

幸せになる方法を質問したら、**「どんな状況でも最善を尽くしましょう」**と何とかそれっぽい回答頂きました:clap:

## このテーマのゴール（目的？）
* ミニマム：アプリ作成時の手順、詰まった箇所をアウトライン化する。
* フル：現状のアプリに新しめの技術を取り入れて記事にする。

長くなってしまいそうなので今回は環境までです。。。

## 対象読者:
* 機械学習には興味はあるが、どんな事に応用できるのか参考にしたい人
* 何らかの言語でWEBアプリをなんとなく作ったこと又は知見がある人
* ネットや書籍を参考に環境作ったり、コードをなんとなくでも読める人

## アプリの概要
画面と使い方は凄いシンプルです。
下記キャプチャのように質問文を入力すると、画面下部に回答が複数表示されます。
$\tiny{※質問例は気にしないで下さい}$:sob:
また、回答リンクをクリックすると、別タブでリンク先へ画面遷移します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631912/31eafec5-26a5-0de1-8497-95c4d51d74a9.png)

## 処理フロー
ユーザが質問文を入力し、システム側で回答を画面に表示するまでの流れは以下となります。
人間も同じですが、まず質問された内容に対してどういった質問なのか（what,when,how）を分類します。
分類するために事前に機械学習を行い、学習済みのモデル（質問タイプ）を用意しておきます。
$\tiny{※機械学習の方法については後程時間がある時に記事にできたらと思います。。}$:sweat_smile:
質問の分類が終わったら、ネット上から文章を取得します（スクレイピング）。
取得した文章の分類を行います。ここでも分類を行うために事前に機械学習を行い、
学習済みのモデル（回答タイプ）を用意しておきます。
そして、回答候補リストに回答タイプと取得した文章を一時格納します。
$\tiny{※処理上の無駄があるような気もします。。}$:sob:
回答候補リスト分ループを行い、質問タイプと回答タイプが一致したら、回答リストに格納します。
最後に回答リストを画面に表示します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631912/bc4a04a7-1f37-f25b-2815-9aa8d62fd4fc.png)

## 環境 <sup>※以下のVerでなくても動くと思いますが、古いのでご注意下さい:no_good_tone2:</sup>
* 開発環境
    * OS : Ubuntu 18.04.4 LTS
    * 言語：Java1.8、HTML、CSS、JavaScript、Python 3.7
    * フレームワーク:Spring Boot 1.5、Bootstrap
    * ソースコード管理：Github
    * ビルドツール：Gradle 3.4.1
    * IDE：Spring Tool Suite(STS)
* サーバ環境
    * デプロイ：heroku、
    * Apサーバ：Tomcat（同梱）
    * デプロイ方法：GithubにpushするとHerokuへ自動デプロイ
   
## 今後の展開
今回は環境まで記事にさせて頂きました。
しょぼい記事ですが、お休みほぼ１日使ってしまいました:sob:
また、時間のある時に少しづつブラッシュアップ、ソース等も
記事にさせて頂ければと思います:sob:
floatの副作用

#floatとは

cssのプロパティの一つで、通常ブロックレベル要素同士は縦に並ぶが、floatプロパティを使うことで指定した要素を左または、右に寄せることができる（横並びにできる）

#注意すべき点


例えば、下記のようなコードがあったとする


```sample.html
<div class = "contents">
  <div class = "left-content"></div>
  <div class = "right-content"></div>
</div>
<footer></footer>
```

```style.css
.contents{
background-color:black;
width:100px;
}

.left-content{
background-color:blue;
height:50px;
width:50px;
float:left;
}

.right-content{
background-color:red;
height:50px;
width:50px;
float:left;
}

footer{
widht:150px;
height:20px;
background-color:green;
}

```



結論から言うと、子要素（赤と青）はこれを実行した場合横並びになるが、

・親要素の高さは指定しない限り、子要素に依存するため高さが保てなくなり認識されなくなる（表示されない）
・後続の要素（footer)が浮いた子要素の下に回り込み、重なって表示されてしまう

上記の2つの弊害が起きてしまう


#どうすれば良いか

```style.css
.clearfix::after {  ←追加で記述
  clear: both ;　　　
  content: '';      
  display: block;
}
```

```sample.html
<div class = "contents clearfix"> 　←floatを使用している要素の親要素にクラスを追加
  <div class = "left-content"></div>
  <div class = "right-content"></div>
</div>
<footer></footer>
```


cssに上記のコードをまるまる追加して、親要素にクラスを追加してあげれば副作用を解除することが出来ます。

ざっくり説明すると

・afterは擬似要素と言われHTMLに記述しなくても要素を後付けできる
・contentプロパティは追加する要素の中身を決める
・clearプロパティは回り込みを防ぐ
・displayプロパティは追加する要素がブロックorインライン要素か決める

といった感じです。まとまりで覚えちゃっていいと思います。

個人的にはflexboxの方が副作用などもなく、圧倒的に使っているのでもし興味がある方は調べてみてください。
componentWillReceiveProps→componentDidUpdateへの置き換え

componentWillReceivePropsは将来廃止されるので、componentDidUpdateまたはgetDerivedStateFromPropsに置き換えないといけないが、どうしていいか分からなかった。

```typescript:置き換え前
    /** Propsが変更された時に発動するライフサイクルイベント */
    // 将来廃止予定なので置き換えが必要。
    public componentWillReceiveProps(newProps: ILinearInputProps): void {
        this.setState(newProps);
    }
```

```typescript:置き換え後
    /** コンポーネントが更新されたら発動するライフサイクルイベント。
     * ここでPropsの変更を反映させる。（変わっているかどうかチェックしないと多重呼び出しが発生するので要注意） */
    public componentDidUpdate(prevProps: ILinearInputProps): void {
        if (this.props.controlValue !== prevProps.controlValue) {
            this.setState(
                (prevState: ILinearInputState): ILinearInputState => {
                    prevState.controlValue = this.props.controlValue;
                    return prevState;
                }
            );
        }
    }
```

componentDidUpdateの中でsetStateを呼ぶときには、値が変わった場合にだけ呼び出すようにしないと、setState→componentDidUpdate→setState→...となってエラーになる。
>Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

componentWillReceivePropsの方がだいぶシンプルだったのになぁ。

[この記事](https://qiita.com/mori-dev@github/items/c0a458384b5390494784)によると、componentWillReceivePropsの中でsetStateしている場合はgetDerivedStateFromPropsに置き換えるのがいいらしいが、やってみたところ、DOMの更新が遅くなってダメだった。

```typescript:getDerivedStateFromProps版
    static getDerivedStateFromProps(newProps: ILinearInputProps, prevState: ILinearInputState) {
        if (prevState.controlValue !== newProps.controlValue) {
          return {
            controlValue: newProps.controlValue
          };
        }
        // Return null to indicate no change to state.
        return null;
      }
```

[「派生状態」](https://ja.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html)ってなんだ…？呼び出し元でPropsが更新されたらStateに反映させたいんだが…。
Salesforce 組織外のページでのフローの表示

１．フローコンポーネントは、どの種類のコミュニティページでサポートされていますか?
２．Salesforce 組織ではなくコミュニティのフローとして配布するのが適切なのは、次のどれですか?
３．フローが完全に表示されるのは、いつですか?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634241/4fbf240a-9709-0d3a-4593-db0b353b0927.png)
【簡潔】HTMLの基礎タグ~<strong> <blockquote> <hr> <br> <pre> <code>~

##基礎文法~タグ~

この記事はHTMLの基礎文法について学習できます。今回取り扱うタグは
1.`<strong>`
2.`<blockquote>`
3.`<hr>`
4.`<br>`
5.`<pre>`
6.`<code>`
の６つです。

それでは見ていきましょう。

---
###1.`<strong>`

囲った文字を強調するタグです。

```index.html
<p>失礼します。<strong>おはようございます。</strong>失礼しました。</p>
```

<details><summary><strong>ブラウザ表示はここをクリック</strong></summary><div><br>
<p>失礼します。<strong>おはようございます。</strong>失礼しました。</p>
</div>

<br>
<br>


と上記のように`<strong>`で囲った部分だけ太字になります。

<br>
<br>

###2.`<blockquote>`

このタグは引用を表すタグです。

```index.html
<h4>こんにちは</h4>
<p>初めまして。夏目漱石です。</p>

<blockquote cite="https://natsume.com">
  <p>吾輩は猫である</p>
</blockquote>

<p>さようなら</p>
```
<br>
上記のようにコードを書くとブラウザでは下記のように表示されます。


<details><summary><strong>ブラウザ表示はここをクリック</strong></summary><div>
###こんにちは
初めまして。夏目漱石です。
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;吾輩は猫である
さようなら</div>

<br>
<br>

`<blockquote>`で囲まれた部分がインデント下げをされていますね。
`<blockquote>`の中の`cite属性`には引用元を記述します。

<br>
<br>

###3.`<hr>`
水平線が引けるタグです。ちなみに装飾に使ってはダメですよ。
あくまで装飾はCSSで行います。

```index.html
<h4>こんにちは</h4>
<p>初めまして。夏目漱石です。</p>

<hr>

<blockquote cite="https://natsume.com">
  <p>吾輩は猫である</p>
</blockquote>

<p>さようなら</p>
```

<br>
上記のようにコードを書くとブラウザでは下記のように表示されます。

<details><summary><strong>ブラウザ表示はここをクリック</strong></summary><div>
###こんにちは
初めまして。夏目漱石です。
<hr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;吾輩は猫である
さようなら</div>

<br>
<br>

少し分かりにくいですが文の途中で水平線が引けていますね。

<br>
<br>

###4.`<br>`

このタグは<strong>改行</strong>を表現するタグです。

```index.html
<p>ナンバーワンになら無くてもいい。元々特別なオンリーワン。by SMAP.</p>

<p>ナンバーワンになら無くてもいい。<br>元々特別なオンリーワン。<br>by SMAP.</p>
```

上記のようにコードを書くとブラウザでは下記のように表示されます。

<details><summary><strong>ブラウザ表示はここをクリック</strong></summary><div>
<p>ナンバーワンになら無くてもいい。元々特別なオンリーワン。by SMAP.</p>

<p>ナンバーワンになら無くてもいい。<br>元々特別なオンリーワン。<br>by SMAP.</p>

</div>

<br>
<br>

このように`<br>` がついている方の文章ではしっかり改行されていますね。


<br>
<br>

###5.`<pre>`,`<code>`
`<pre>`と`<code>`タグを一緒に解説してしまいます。

・`<pre>`は
整形済みのテキストをそのまま表示させるタグです
つまり、スペースや改行をそのままブラウザで表示させます。
・`<code>`は
プログラムのコードであることを示します。

```index.html
<pre>
  <code>
<p>
  千の風になって<br>
  千の風になあって〜<br> 
</p>
  </code>
</pre>
```
上記のようにコードを書くとブラウザでは下記のように表示されます。

<details><summary><strong>ブラウザ表示はここをクリック</strong></summary><div>
<p>
&nbsp;&nbsp;&nbsp;&nbsp;千の風になって<br>
&nbsp;&nbsp;&nbsp;&nbsp;千の風になあって〜<br> 
</p>
</div>

<br>
<br>

`<pre>`で囲っているので空白が効いていますが、`<code>`で表したいコードである`<p>`と`<br>`が消えてしまっていますね。
これは、単純にコードとして認識されてしまったからです。
これを避けるためには次のように記述します。

```index.html
<pre>
  <code>
&lt;p&gt;
  千の風になって&lt;br&gt;
  千の風になあって〜&lt;br&gt;
&lt;/p&gt;
  </code>
</pre>
```
するとブラウザでは下記のように表示されます。

<details><summary><strong>ブラウザ表示はここをクリック</strong></summary><div><br>



&lt;p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;千の風になって&lt;br&gt;
&nbsp;&nbsp;&nbsp;&nbsp;千の風になあって〜&lt;br&gt;
&lt;/p&gt;


</div>

<br>
<br>
しっかり`<p>`も`<br>`も表示されましたね。

`<`は`&lt;`
`>`は`&gt;`
を使うとブラウザでしっかり表示されます。

---
記事を読んでいただきありがとうございました。
【Rails】hamlで画像を呼び出す


#準備
表示したい画像：test.png

#実装

１：app/assets/images/ に画像を置く。　例） app/assets/images/test.png
２：呼び出し

```test.html.haml
 = image_tag '画像へのパス'
 = image_tag 'test.png', class: '', heigth: '', weigth: ''
#今回はimages直下のに画像を置いたため、パスは上記のようになる。
```
Flutterの画像表示方法 #Flutter #画像表示

お疲れ様です。

今回は、画像の表示方法を記述します。
※画像の表示のみを記事に記載します。画像の加工（オプション設定やウィジェットのラッピングによる加工）は別の記事に記載します。

##Flutterの画像表示方法
- ローカルの画像表示
- ネットワーク上の画像表示

####ローカルの画像表示
1. 表示したいファイル（画像）をプロジェクト内に格納
2. yamlファイルに「assets」と「表示したい画像のパスとファイル名」を追加
3. Imageウィジェットを使用して、画像を表示

以上です。
シンプルなのですが、yamlファイルの修正があるので、若干初心者キラーですよね。

####具体例
前準備として、画像を格納するフォルダを作成する。
(今回は「images」と言うフォルダを作成して、その中に画像を格納します。)
<img width="459" alt="スクリーンショット 2020-05-09 18.03.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255919/64a3f272-f14d-095d-02b5-50cf42c2ef96.png">
`画像1　画像用フォルダ`

imagesフォルダに画像を格納します。
<img width="316" alt="スクリーンショット 2020-05-09 18.12.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255919/02ccda98-5016-3c16-2de6-58cf431ab741.png">

yamlファイルに「assets」と「表示したい画像のパスとファイル名」を追加します。
(yamlファイルは、インデント（空白）2つ単位で認識するので編集する際は気をつけてください。)
（Flutterプロジェクト作成時には、pubspec.yamlファイルに多くのコメントが記述されておりますが、かなり可読性を下げるので消すのも１つの方法です。）

```yaml:pubspec.yaml
name: studyflutter
description: A new Flutter application.

version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true
#  下記に行を追加
  assets:
    - images/TokyoTower.jpg
```
Imageウィジェットを使用して、画像を表示します。

```dart:*.dart
Center(
  child: Image(// Imageウィジェット
      image: AssetImage('images/TokyoTower.jpg')// 表示したい画像
  ),
),
```

結果
<img width="310" alt="スクリーンショット 2020-05-09 19.10.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255919/7b7824fa-91dd-5731-45a2-15397c03cc06.png">


####ネットワーク上の画像表示
1. Imageウィジェットを使用して、ネットワーク上のURLを参照して、その画像を表示

以上です。

####具体例
Imageウィジェットを使用して、ネットワーク上のURLを参照して画像を表示します。

```dart
Center(
  child: Image(// Imageウィジェット
      image: NetworkImage('ここに任意のURLを設定'),// 表示したい画像
  ),
),
```

以上　ありがとうございました。


毎週、Flutter関連で情報発信するのでよろしくお願いします。 
**TO「先輩方」**
ご意見ご鞭撻のほど、よろしくお願いいたします。
[@kyota_kobayashi](https://twitter.com/kyota_kobayashi)
pod try RxSwift できない！

#はじめに

```.swift
pod try RxSwift 
```
打っても以下のようなエラーが出てしまったのを解決したの記事です。
誰も書いていないようだったので書きました！
やっぱりサンプルみてみた〜〜〜いってなりまして、、、


ちなみに何が行けなかったのかというとRubyのバージョンでうまくいかないものがあるようでした。
現在の最新版ではうまくいかないようです。
なので直すというとちょっと違うのかな〜〜とか思ったり思わなかったりという感じです。
一番いいのはcocoapodが動くようにRubyを修正してもらうか、新しいRubyでも動くようにcocoapodを修正してもらうかだと思っています。

ただそんなのいつになるかわからないので、、、といった感じで、、、、

以下はそれを表すエラー内容

```
### Error

NoMethodError - undefined method `root' for false:FalseClass
/Users/***/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/cocoapods-1.9.1/lib/cocoapods/installer/pod_source_installer.rb:179:in `root_spec'
/Users/***/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/cocoapods-1.9.1/lib/cocoapods/installer/pod_source_installer.rb:192:in `predownloaded?'
/Users/***/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/cocoapods-1.9.1/lib/cocoapods/installer/pod_source_installer.rb:69:in `install!'
/Users/***/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/cocoapods-try-1.1.0/lib/pod/command/try.rb:139:in `install_pod'
/Users/***/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/cocoapods-try-1.1.0/lib/pod/command/try.rb:50:in `block in run'
/Users/***/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/cocoapods-1.9.1/lib/cocoapods/user_interface.rb:118:in `title'
/Users/***/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/cocoapods-try-1.1.0/lib/pod/command/try.rb:49:in `run'
/Users/***/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/claide-1.0.3/lib/claide/command.rb:334:in `run'
/Users/***/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/cocoapods-1.9.1/lib/cocoapods/command.rb:52:in `run'
/Users/***/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/cocoapods-1.9.1/bin/pod:55:in `<top (required)>'
/Users/***/.rbenv/versions/2.4.1/bin/pod:22:in `load'
/Users/***/.rbenv/versions/2.4.1/bin/pod:22:in `<main>'
```



#なおす方法

- まず現在のバージョンを調べます。2.4.1とかだったら同じですね！

```
$ rbenv versions
```

- バージョンを変えます。とりあえず`system`に設定しました！

```
$ rbenv local system
```

- cocoapodsのインストールをし直します。

```
$ sudo gem install cocoapods
```

- cocoapodsのsetupをし直します。

```
$ pod setup
```

- これで大丈夫なので好きなプロジェクトでコマンド叩きます！


```
$ pod try RxSwift
```

#でどんなだったか写真
<img width="1098" alt="スクリーンショット 2020-05-09 19.54.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133940/121fc9c4-62e6-215f-339b-d1dce2fb18e2.png">
<img width="1092" alt="スクリーンショット 2020-05-09 19.54.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133940/ad1420b0-65fc-67ba-f533-9d8b1b018c4d.png">
<img width="1125" alt="スクリーンショット 2020-05-09 19.55.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133940/b6be81cb-5cc7-6287-f0d8-9cfda7b31be5.png">


#最後に
終わりです！！
ansible: zabbix4.0インストール(CentOS7 or 8用)

## つくったもの

Ansible-playbook(https://github.com/mishikawan/zabbix40-ansible.git )です。
CentOS7又はCentos8環境に、Zabbix4.0(ZabbixRepo使用)をインストールする。

## Playbookの内容

rolesとして3つに分割
  - common: OSの初期設定用
  - server: zabbix-server設定用
  - agent: zabbix-agent設定用

#### commonの処理内容

 1. selinux無効化
 2. hostname設定
 3. timezoneの設定(zone情報指定可能)
 4. zabbix-repoの登録

#### serverの処理内容
 1. Firewalldの穴開け(http,snmptrap,zabbix(10051))
 2. zabbix-server関連のyum install
 3. mysqlの設定ファイル修正(innodb_file_per_table対応)
 4. mysql開始
 5. mysql設定( DB名"zabbix"のユーザ"zabbix"のパスワード設定)
 6. zabbix用初期データ(create.sql.gz)を導入
 7. httpd(phpのtimezone)設定
 8. httpd開始
 9. zabbixの設定ファイル更新＋新規作成
 10. zabbix-serverの開始

#### zabbix-agentの処理内容
 1. Firewalldの穴開け(zabbix(10050))
 2. zabbix-agentのyum install
 3. zabbix-agent設定(HostnameItem,Server,ServerActive)
 4. zabbix-agentの開始

## 設定情報のカスタマイズ

設定情報は、inventory/inventory.ini に格納されているので自分用に修正
以下、clone直後の状態。

```ruby:初期設定情報
Zabbixサーバ機のホスト名は testsv01 ,IPは 192.168.11.1
Zabbixエージェント機のホスト名は testcl01 ,IPは 192.168.11.2
タイムゾーンは、 Asia/Tokyo
DB(zabbix)のパスワードは password (ただし、ユーザ名は"zabbix"固定)
```

```yml:inventory/inventory.ini
[servers]
testsv01 ansible_ssh_host=192.168.11.1 ansible_ssh_user=root
[agents]
testcl01 ansible_ssh_host=192.168.11.2 ansible_ssh_user=root
[all:vars]
timezone="Asia/Tokyo"
zabbix_server_ip="192.168.11.1"
[servers:vars]
zabbix_mysql_password="password"
```

必要に応じて変更してください。

## playbook実行方法

  1. inventory.iniの修正
  2. ansibleサーバで以下を実行

```shell:実行コマンド
git clone https://github.com/mishikawan/zabbix40-ansible.git
cd zabbix40-ansible/
ansible-playbook -i inventory/inventory.ini site.yml
```
  3.稼働確認。zabbix-serverはURLでアクセス可能。

```shell:URL情報
http://{zabbix-server-ip}/zabbix
  ID = Admin
  PASS = zabbix
```

## (参考)作業の振り返り

### CentOS8用を作ってみて

##### CentOS8 + (標準Repo)Mariadb 10.3.17 + zabbix4.0 ではエラーが出る

 - Zabbix初期データ(create.sql.gz)をMariadbに食わせると
   "ERROR 1118 (42000) at line 1278: Row size too large (> 8126)."
   ってエラーが出る。

> 参考: https://qiita.com/hatappi/items/132f56c00e428beef777
> 参考: https://support.zabbix.com/browse/ZBX-16465

> 上記URLにも書いているけど、テーブルhost_inventoryの定義が大きすぎてエラーになる。
> CentOS7の標準Mariadb5.5ではエラーでないのになんでと思ったら、エラーがでないだけで実際に大きなデータ掘り込んだらエラー出た。初めて知った。最悪やん。
> ま普通の利用やったら越えそうにないから、CentOS7はとりあえず標準mariadbのままで(w)

 - CentOS8 の場合、(標準)Mysql8.0だとinnodb_default_row_formatがdynamicなのでこっちを利用しました。

```shell:innodb_default_row_format
# mysql
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 8
Server version: 8.0.17 Source distribution
....
mysql> show global variables like '%row_format%';
+---------------------------+---------+
| Variable_name             | Value   |
+---------------------------+---------+
| innodb_default_row_format | dynamic |
+---------------------------+---------+
1 row in set (0.01 sec)
mysql> 
```

##### yumからdnfに変更
 - 基本的なRPM操作はCentOS8でもyumが同じように使える。当分はdnf覚えないぞっと

```shell:yumはdnfのリンクやったわ
     # ls -l /usr/bin/yum 
     lrwxrwxrwx. 1 root root 5 12月 20 00:43 /usr/bin/yum -> dnf-3
```

##### rpmでの提供ミドルウエアが新しい

  - いろいろ新しい
  - 特にPHPが7.2で、大好きなDokuwikiが、標準リポジトリで構築できる！

##### phpがmoduleからphp-fpmに変更

 - zabbixの導入／運用するだけだったら意識しなくて良い。
OpenOffice CalcでExcel VBAのマクロを組む(4)

#ボタン押下でマクロを起動させる
これまで作ってきたマクロを、ボタン押下で起動するようにしてみた。

OpenOffice CalcでExcel VBAのマクロを組む(1)
https://qiita.com/WILLsPage/items/8a5d70e8d482f2d511a2

OpenOffice CalcでExcel VBAのマクロを組む(2)
https://qiita.com/WILLsPage/items/7df5d7f843c862cd7c8e

OpenOffice CalcでExcel VBAのマクロを組む(3)
https://qiita.com/WILLsPage/items/8ac06d360e11b3d42f0d

１．メニューの「表示」－「ツールバー」から「フォームコントロール」をクリックする
![vba4_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409430/d9d081c2-59ad-552d-2ee1-46eb22dc340e.png)
２．「デザインモード オン/オフ」をクリックしてデザインモードをオンにする
![vba4_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409430/1894530c-1d63-a488-2c78-8c294dfdbffe.png)
![vba4_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409430/df8bb0a4-3787-4d03-39ae-7314a70231d5.png)
３．「ボタン」をクリックして、ボタンを配置したいところにドラッグアンドドロップする
![vba4_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409430/fd68d4db-a5e5-600a-79f3-edc5958057c9.png)
４．「プッシュボタン」を右クリックしてメニューを表示し、「コントロール」をクリックする
![vba4_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409430/9f6a7e02-71dc-296c-8301-8fca617917c7.png)
５．表示されたダイアログの「イベント」タグをクリックして、**「実行時」の横にある**「...」ボタンをクリックする
![vba4_6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409430/f2085d4f-e1bf-64b3-2440-0d508009ec6a.png)
６．「マクロ」ボタンをクリックする（この時選択されているイベントは「実行時」）
![vba4_7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409430/58a5f7ae-4306-0881-a007-a4d7400d4b5e.png)
７．ボタン押下時に実行したいマクロを選択して「OK」ボタンをクリックする
![vba4_8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409430/56d5a2b9-8ae9-f3bd-8253-bfabbc8442ed.png)
![vba4_9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409430/a9ad3889-5e70-5af4-20ae-b85bcba2c148.png)
８．ボタンの表示名を変更するときは、ダイアログの「全般」タグをクリックして「タイトル」を編集して「×」を押下する
![vba4_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409430/1e00024f-0634-75aa-318b-71bf4e4a1ba5.png)
９．「デザインモード オン/オフ」をクリックして**デザインモードをオフにする**
![vba4_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409430/4a53198d-647e-640e-e0b2-7af50b2763da.png)
![vba4_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409430/7676b77d-652e-f2e6-8a01-2f61c1e59879.png)
１０．「×」を押下してボタンを配置するのに使ったウィンドウを閉じる
![vba4_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409430/d9445532-6b45-9339-82cd-3afca5c5d423.png)
![vba4_14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409430/31747817-ab39-d805-ea82-2696d84abe77.png)

[参考にさせていただいたページ]
OpenOffice Calcでボタンを設置する方法
https://toolmania.info/post-1700/

OpenOffice Calcのプッシュボタンにマクロを設定する方法
https://toolmania.info/post-1720/
Rails form_with 解説してみる

どうもチャンクノです。
今回は前回の記事で書いたform_withの解説をしてみようかなと思います。
間違ってる部分ありましたら修正するのでコメントにて伝えてください。

はい、では以下のコードをご覧ください。

```
<%= form_with model: [:user, current_user], url: user_user_profile_path, local: true do |f| %>
  <%= f.fields_for :user_profile, current_user.user_profile || current_user.build_user_profile do |profile| %>
    <%= profile.text_field :name %>
  <% end %>
  <%= f.fields_for :user_address, current_user.user_address || current_user.build_user_address do |address| %>
    <%= address.text_field :zipcode %>
  <% end %>
　<%= f.submit %>
<% end %>
```
まずは

```
<%= form_with model: [:user, current_user], url: user_user_profile_path, local: true do |f| %>
```
この部分ですね。
model: [:user, current_user]の[:user]の部分はネームスペースを示しています。(多分)
ネームスペースを使っていない場合は、model: current_user でおけです。
current_userの部分はモデルのインスタンスが入ります。
今回はrequire(:user)なのでcurrent_userでオッケー。
requireで指定したモデルのインスタンス変数を書くんだと覚えておけば大丈夫だと思います。

そして、form_withは model: [:user, current_user] この部分でパラメーターを送るpathを自動的に判断します。
現状だとこれがどんなパスになるかわかりますか？
正解はuser_user_pathです。
しかし今回はそんなpathは存在しないのでこのままだとエラーになります。
そこでどうするか、urlの出番です。
今回使いたいのはUser::UserProfilesControllerです。
なので model: [:user, current_user], url: user_user_profile_path こうして明示的にpathを指定してあげてください。
そうすると指定したpathのコントローラーにパラメーターが飛んでいき、updateが動いて更新してくれます。
めでたいですね🌞
local: trueはつけていない場合ajaxによる送信と見なされてしまいす。
ajaxなんて使ってない！！という場合はlocal: trueをつけましょう。

次はこの部分について。

```
<%= f.fields_for :user_profile, current_user.user_profile || current_user.build_user_profile do |profile| %>
```

f.fields_forの後には子モデルの名前を書きます。
ですがこのままだとeditページには何も表示されないし、保存もできないので
current_user.user_profile || current_user.build_user_profile
これがついています。
user_profileが存在すればそれを表示し、なければbuildしてくれる処理になっています。
この処理をコントローラーに書くか、viewに書くか、どちらがいいのかは正直わかりません🙇‍♂️
form_withについてはこんなところでしょうか🤒
これだけ理解しておけば基本的なcrudで困ることはないと思います！
何かあったらまた追記します！！

それでは今日はこの辺で！
皆様よきプログラミングライフを🙏
EC2のリージョン間移行

# 背景
AWSのEC2(OS:windowsServer 2019 EBS:200GB)をus-east-2(オレゴン)からap-northeast-1(東京)に移行した時のメモです。合計40分くらいで完了しました。

# 手順
1. 移行したいEC２のイメージ（AMI）を作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252317/7cb44628-291f-c275-18d7-ed37300a870b.png)
2. AMIに名前をつけます。「再起動しない」はチェックせず、完全なイメージを作成します。チェックすることで基となるEC2の再起動を防止できますが、AMI作成時にデータの整合を確保するための処理には再起動が必要なようです。今回はEC2にダウンタイムが許されるケースでしたのでチェックしませんでした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252317/a6753662-b415-23ba-5ff7-9618bc7993d2.png)
3. 作成まで少々時間がかかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252317/0b42b33c-3392-e0e6-eda2-a9762d966923.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252317/2affbe7a-44e0-f074-2146-90166e4c6d65.png)
4. 約２０分で作成完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252317/13025235-2028-8c61-fa62-d14ffe8d3b27.png)

5. 作成したAMIのコピー先をAsia Pacific(東京)に指定してコピー開始します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252317/2fae03d0-240d-cf55-d083-f131b6787b90.png)
6. リージョン間コピー中です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252317/d5d65a40-3d8f-bef7-f804-037b9346cf16.png)
7. 約15分でコピー完了しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252317/a6694b1a-5103-f6d4-932a-bac6df4965f9.png)
8. 東京リージョンにコピーしてきたAMIを起動すると、インスタンスタイプの設定画面となります。あとは通常のEC2作成と同じ手順で作成可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252317/9203ccd4-a0e9-b4ce-322f-16db8eb8a4dc.png)

# 結果
キーペアを変更しなければ、元のリージョンのまま利用できます。
webサーバであれば起動すればそのままアクセス可能です。
実行すると肥大化していくバッチファイル

##概要
バッチファイルですが、
実行するとバッチファイル自身が肥大化していきます。
実用的なものではなく、遊びです。

<font color=red>Linux上やmacOS上で実行可能な[**シェル版**](https://qiita.com/X-IA/items/81183f03b46a858ebbb5)も作成しました。<br />本バッチファイルとほぼ同じ設計です。</font>

##環境
Windows 10

##ソースファイル
「マジック生成」するには、本ページ全体を選択してコピー後に[**B642FHT.bat**](https://qiita.com/X-IA/items/1db1929775e34ac7ef01)を起動して下さい。
その後、生成したバッチファイルを任意の場所へ配置して下さい。

###コード
```:bomb.bat
copy /b /y %~dpnx0 + %~dpnx0 %~dpn02
move /y %~dpn02 %~dpnx0 
```

###バイナリ (Base64 encoding)
```
bomb.bat
---
Y29weSAvYiAveSAlfmRwbngwICsgJX5kcG54MCAlfmRwbjAyDQptb3ZlIC95ICV+
ZHBuMDIgJX5kcG54MCANCg==
---
```

##解説
* バッチファイルのコマンド行数は2行、ファイルサイズは64 bytesとなっています。
* 1行目はCOPYコマンドに "/B" オプションを付けて実行しており、
<br/>自身の中身を中間ファイルに2回コピーしています。
<br/>※元ファイルの名前が "bomb.bat" ならば、中間ファイルは "bomb2" になります。
* 2行目はMOVEコマンドに "/Y" オプションを付けて実行しており、<br/>バッチファイルが上書きされます。
* メカニズムがまだ解っていないのですが、<br/>2行目のコマンド実行終了後も上書きされたファイル内のコマンドが読み出されてしまうのか、処理が延々と続きます。
* 64 byteの2倍、4倍、8倍... とサイズが2の累乗に肥大化していき、<br/>（空き容量があれば）30サイクルで64GBのファイルになります。
GCP-ACE試験対策[プロジェクト内で事前定義された IAM ロールにユーザーを割り当てる]

> プロジェクト内で事前定義された IAM ロールにユーザーを割り当てる

今回は、こちらをまとめていく。

まず、IAMとは？
GCPリソースに対するアクセス権を取りまとめるサービス。
このIAMを通して、GCPのリソースへアクセスする。

> Cloud IAM の仕組み
Cloud IAM では、誰（ID）がどのリソースに対してどのようなアクセス権（ロール）を持つかを定義することにより、アクセス制御を管理します。たとえば、Compute Engine の仮想マシン インスタンス、Google Kubernetes Engine（GKE）クラスタ、Cloud Storage バケットはすべて Google Cloud のリソースです。リソースの整理に使用する組織、フォルダ、プロジェクトもリソースになります。Cloud IAM では、リソースに対するアクセス権を直接エンドユーザーに付与することはありません。複数の権限をロールにまとめて、認証されたメンバーに付与します。

とのこと。

IAMの大事な要素
・メンバー
→ 権限を付与される対象のこと。Googleアカウント、サービスアカウント、Googleグループ、G Suite、Cloud Identityドメイン。
・ロール
→ 権限のコレクション。メンバーにロールを付与すると、ロールに含まれる全ての権限が付与される。
・ポリシー
→ メンバーとロールのセット。

Cloud IAM には、３種類のロールが存在する。
・基本ロール
→ オーナー、編集者、閲覧者のロールが該当する。 **これらのロールは、全ての Google Cloud サービスで様々な権限を持つため、使用を控えるべし**
・事前定義ロール
→ 基本ロールよりも、細かな権限設定が可能。事前にGCP側で権限の範囲を定めている。
・カスタムロール
→ 事前定義ロールでは、満たせない、より細かな権限設定が可能。


余談だが、GCPのリソース階層についてもまとめる

リソース階層とはなんぞや？
→ リソースの階層。GCPのリソースの構成要素は、組織、フォルダ、プロジェクト、サービスとある。こやつらの階層のこと。

階層としては
   組織
    ↓
  フォルダ
    ↓
 プロジェクト
    ↓
  サービス
となる。

注意点として、フォルダは、組織が存在する場合にしか、作成できない。
フォルダはプロジェクトのグループ化の目的があり、部毎にフォルダを作成し、その中でいくつかのプロジェクトを構える。みたいなことも可能。
グループ化して嬉しいのは、一律の権限を複数のプロジェクトに与える、などのシーン。

IAMでは、このリソース階層の考え方が大切。
各リソースに対して、ポリシーを定めることで、効率的に権限設定が可能。

下層のリソースは、上層のリソースに割り当てられた権限を引き継ぐ。


## 最後に
間違っていたら教えてください。
【rails】RSpecによる単体テスト（モデル）


Rspecを用いることでアプリケーションの単体の機能をテストすることができる。
今回は、モデルに登録したバリデーションを対象としてテストを行う。

### テスト対象のバリデーション

以下では、モデルに記載されたバリデーションの動作テストを例として扱う。

次のとおり、userモデルにバリデーションが記載されていて、データ保存時に次の条件をチェックしている。
　・nicknameカラムの値が入っていること
　・nicknameカラムの値の長さが、最大６文字であること
　・emailカラムの値が入っていること

```rails:app/models/user.rb
class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable
  has_many :tweets
  has_many :comments

  validates :nickname, presence: true, length: { maximum: 6 }
  validates :email, presence: true
end
```

### 定義の準備

次にspecフォルダ配下にmodelフォルダを作成する。

user_spec.rbを作成する。

user_spec.rbにテスト内容を記載していく。

```ruby:spec/model/user_spec.rb
require 'rails_helper'

describe User do
  describe '#create' do

    #validationにより、nicknameの値が入っていないデータの登録を弾くことができることをテストする
    it "nicknameがない場合は登録できないこと" do
      # nicknameが空のインスタンスを作成
      user = User.new(nickname: "", email: "kkk@gmail.com",password: "00000000", password_confirmation: "00000000")
      # 作成したインスタンスがバリデーションによって保存できないかチェックする
      user.valid?
      # チェックによって吐かれたエラーメッセージが、予期したものであるか確かめる
      expect(user.errors[:nickname]).to include("can't be blank")
    end

    #validationにより、emailの値が入っていないデータの登録を弾くことができることをテストする
    it "emailがない場合は登録できないこと" do
      # emailが空のインスタンスを作成
      user = User.new(nickname: "nick", email: "",password: "00000000", password_confirmation: "00000000")
      # 作成したインスタンスがバリデーションによって保存できないかチェックする
      user.valid?
      # チェックによって吐かれたエラーメッセージが、予期したものであるか確かめる
      expect(user.errors[:email]).to include("can't be blank")
    end
  end
end
```

##### example
次のまとまりをexampleと呼ぶ

```ruby:
it "exampleの説明" do
 ~ 
end
```
##### エクスペクテーション
```ruby:
expect(~).to ~
```

##### valid?メソッド
ActiveRecord::Baseを継承しているクラスのインスタンスを保存する際に、バリデーションで保存できないことを確認できる。

##### errorsメソッド
valid?を利用したインスタンスに対して使用すると、バリデーションに保存できない原因を確認することができる。

##### includeマッチャ
引数にとった値が、expectの引数である配列に含まれているかどうか、チェックできる。

上記で記載しているエラーメッセージ "can't be blank"はどのように調べれば良いか。

### エラーメッセージの確認の仕方

```console:terminal
# コンソール立ち上げ
$ rails c
# エラー発生用のインスタンスを用意する
> user = User.new(nickname: "", email: "kkk@gmail.com", password_confirmation: "00000000")
# 
> user.valid?
> user.errors
=> #<ActiveModel::Errors:0x00007fd36a321fc8
 @base=#<User id: nil, email: "kkk@gmail.com", created_at: nil, updated_at: nil, nickname: "">,
 @details={:nickname=>[{:error=>:blank}]},
 @messages={:nickname=>["can't be blank"]}> # エラーメッセージ 
```

### テスト実行

```console:terminal
bundle exec rspec
...
User
  #create
    nicknameがない場合は登録できないこと

User
  #create
    emailがない場合は登録できないこと

Finished in 0.21795 seconds (files took 3.02 seconds to load)
2 examples, 0 failures
```

0 failure が表示されれば成功
[SwiftUI]"Extra argument in call"エラー

SwiftUIの勉強中にハマったのでメモ。下記ソースコードでコンパイルエラーになりました。
原因は`ViewBuilder`の`buildBlock`は10個までのためでした。

```swift
struct ContentView: View {
    var body: some View {
        VStack {
            Text("01")
            Text("02")
            Text("03")
            Text("04")
            Text("05")
            Text("06")
            Text("07")
            Text("08")
            Text("09")
            Text("10")
            Text("11")
        }
    }
}
```

10個以上の場合は、Groupを使う事で解消しました。

```swift
struct ContentView: View {
    var body: some View {
        VStack {
            Group {
                Text("01")
                Text("02")
                Text("03")
                Text("04")
                Text("05")
                Text("06")
                Text("07")
                Text("08")
                Text("09")
                Text("10")
            }
            Group {
                Text("11")
            }
        }
    }
}
```
30分でいかしたコンソール環境を作る。(windows+cmder)

#はじめに
コンソール環境をさくっとかっこいい感じにしたいと思います。
完成図はこんな感じ。
![2020-05-09_18h56_56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/338998/3fad4185-85c0-21de-ef17-568b44dd278e.png)


# 手順
１.cmderダウンロード(10分)
２.cmderの設定(5分)
３.Powerlineのダウンロード(5分)
４.Powerlineの設定(5分)

# １.cmderダウンロード(10分)
[ここ](https://github.com/cmderdev/cmder/releases/download/v1.3.14/cmder.zip)からzipファイルを取得します。（クリックするとダウンロード開始します）
zipの解凍後は、フォルタパスを変更できないので、置いておきたいおきたい場所に「cmder」フォルダを作成して、そこに解凍する。

#２.cmderの設定(5分)
左上のアイコンをクリックし、「settting」から各種設定を行う。
１．ウィンドウサイズの変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/338998/b2cf3977-4290-9d3d-a3e0-a5a8bba4b221.png)
２．色味テーマの変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/338998/984b5faa-c68b-94ca-ecb1-a7fcb05bf7dd.png)
３.エクスプローラーのメニュー追加
![2020-05-09_17h39_31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/338998/e2502541-e016-0b6f-a521-bd4a77769936.png)

コマンド入力は下記を入力
>--管理者権限なし
>{cmd::Cmder} -cur_console:n
>--管理者権限あり
>{cmd::Cmder as Admin} -cur_console:n

一旦、「Register」ボタンをクリックすると保存できる。

４.日本語フォントのずれを修正する。
デフォルトだと日本語がずれるので設定を変更します。
「Monospace」のチェックを外します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/338998/0a0aa7ed-5a02-45c0-36bd-cab6177f0b35.png)

すべての設定が完了したら「Save Setting」をクリックして設定を閉じる。

#３.Powerlineのダウンロード(5分)
[ここ](https://github.com/AmrEldib/cmder-powerline-prompt/archive/master.zip)からzipを取得する。（クリックするとダウンロード開始します）
zipを解凍して、拡張子が「.lua」のファイルを全てを「\cmder\config」配下に置く。
![2020-05-09_18h21_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/338998/6ae6cd2f-1dbe-43fb-fd9f-47d95bc1de0c.png)

一度、cmderを再起動します。

#４.Powerlineの設定(5分)
フォントを変更する。（Myrica）
[ここ](https://github.com/pomutemu/milly/archive/master.zip)からフォントのパッチをダウンロードする。（クリックするとダウンロード開始します）
zipを解凍し、「Myrica-MM.ttf」をクリックして、フォントをインストールする。
cmderのsettingで先程インストールしたMyrica MMを選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/338998/0845f3f8-e4bd-034f-3edb-dae40924e505.png)

以上で設定終了です。


# よくあるエラー
cmder.exe起動時に下記エラーが表示される。
>cmder failed to copy vendor/conemu.xml.default file to vendor/conemu-maximus5/conemu.xml

解決：フォルダのコピー先の権限がない可能性あり。管理者でexeを実行する。
参考：https://github.com/cmderdev/cmder/issues/2092
100日後にエンジニアになるキミ - 50日目 - 学習方法 - 学習サービスについて

昨日までのはこちら

[100日後にエンジニアになるキミ - 42日目 - クラウド - クラウドサービスについて](https://qiita.com/otupy/items/d1765f1541a104ed6133)

[100日後にエンジニアになるキミ - 36日目 - データベース - データベースについて](https://qiita.com/otupy/items/7af17635d576677606dc)

[100日後にエンジニアになるキミ - 24日目 - Python - Python言語の基礎1](https://qiita.com/otupy/items/6d1e5453f530e07b7aec)

[100日後にエンジニアになるキミ - 18日目 - Javascript - JavaScriptの基礎1](https://qiita.com/otupy/items/2f71d5f9c754b29d9555)

[100日後にエンジニアになるキミ - 14日目 - CSS - CSSの基礎1](https://qiita.com/otupy/items/61a97863f6df14171994)

[100日後にエンジニアになるキミ - 6日目 - HTML - HTMLの基礎1](https://qiita.com/otupy/items/cd2315dcb38671cfded0)

本日でちょうど半分まで来ました。

本日は趣向を変えて学習方法に関するお話です。

## プログラミング学習サイトについて

プログラミングなどに関しては学習系のサービスも増えてきました。
オンラインコンテンツを用いて様々な言語やツールの使い方などが習得できるというものです。

10年ほど前ならこういった学習コンテンツはあまりなく
オフラインでのスクールに通うといった選択肢しかありませんでしたが
現在では色々な選択肢を取れると思います。

有料無料、良し悪しがあると思うので
個人的な感想を含めて紹介していきます。

### 学習方法について

オンラインコンテンツの中では学習方法も様々です。

**動画で学ぶ**
プログラミングに関する動画コンテンツが多数掲載されており気軽に学習できます。
講義形式の動画を視聴することで、オンライン講座を受けているのと同様の効果が得られます。

**スライドで学ぶ**
イラストを中心としたスライドの順に学習します。
簡潔な文章と画像で、直感的に理解します。

最初にコードの書き方を学び、その後自分でコードを書き、チェックをするといった学習を繰り返して
プログラミングを習得できます。

**ゲーム感覚で学ぶ**
ゲーム感覚で学習できるサイトだったり、アニメのキャラクターと一緒に学習できるサイトなど
楽しみながらプログラミングを習得できます。

### オンライン学習サイト

以下のような学習サイトがあります。

|学習サイト名|価格帯|オススメ|
|:--:|:--:|:--|
|[Progate](https://prog-8.com/languages)|〜980円/月|0から楽にプログラミングを学びたい方|
|[ドットインストール](https://dotinstall.com/)|〜980円/月|たくさんの講座を受けたい方|
|[paiza](https://paiza.jp/works)|〜880円|スキルアップ、転職を目指す方|
|[Udacity](https://www.udacity.com/)|無料(有料も少しある)|英語でも頑張れる方|
|[Udemy](https://www.udemy.com/jp/)|1,200円〜|実践的な講座を受けたい方|

オススメを聞かれたら`Udemy`をオススメします。

自分も`Udemy`の`Python`講座を購入して勉強して
今のデータサイエンス系の職務に着きました。

何と言っても
・買い切りである。
・セール時は安い
・講座のボリュームも多い

月額課金のものに比べるとなかなかお得な感じがします。
クリスマスやブラックマンデー、その他定期的なセールで9割引になったりするので
その際に買えば非常にコストパフォーマンスが高いです。

### Udemyのオススメ講座

**【世界で5万人が受講】実践 Python データサイエンス**
`作成者 Shingo Tsuji, Pierian Data International by Jose Portilla`

辻慎吾さんの講座です。
非常にわかりやすかったのと、これで仕事をゲット出来るようになったので
とりあえずはコレかなと思います。

**【キカガク流】人工知能・機械学習 脱ブラックボックス講座  初級編**
`作成者 吉崎 亮介`

データサイエンス周りのセミナーを開催しているキカガクさんの講座です。
手書きなどを用いていて、数学的な理論部分から覚えたい人に向いています。

**【ゼロからおさらい】統計学の基礎
ビジネスの場面で活用できる、統計学の基礎を身につけましょう！**
`作成者 Yosuke Katada`

統計分析の基礎が学べます。

**Git： もう怖くないGit！チーム開発で必要なGitを完全マスター**
`作成者 山浦 清透`

GITって意外とややこしいですよね。
細かい部分を動画で確認できるのはお得な講座だと思います。


**JavaScript(ES6)/Vue.js/TypeScript フロントエンド技術入門**
`作成者 Taniguchi Makoto`

書籍と連動していてVue.jsを一気に学ぶことができるフロントエンド技術の入門講座となっています。


## まとめ

プログラミング学習をある程度進めていると途中でどこか壁にぶち当たったりします。
そんな時は学習方法を変えてみるといいと思います。

プログラミングの学習サイトは質も良く、コスパも良いので
スクールに通うよりも良いと思います。

プログラミングを身に付けたい方はぜひ活用してみてください。


君がエンジニアになるまであと50日

## 作者の情報
乙pyのHP：
http://www.otupy.net/

Youtube：
https://www.youtube.com/channel/UCaT7xpeq8n1G_HcJKKSOXMw

Twitter：
https://twitter.com/otupython
enumをセレクトボックスで扱う方法

# 背景
enumの値をセレクトボックスで使いたくて調べていたが、どれも難しく書いてあり分かりにくかったので自分なりにまとめてみました！

## enumとは
こちらの記事を参照ください！
https://qiita.com/ren0826jam/items/2870486578dc530c7074

##手順
1.マイグレーションファイルを作成する。
※今回はProductモデルの以下のカラムのデータをenumを活用して保存します。

```20××××××××××.rb

class CreateProducts < ActiveRecord::Migration[5.2]
  def change
    create_table :products do |t|
省略
      t.integer :status, null: false
      t.integer :bear, null: false
      t.integer :days, null: false
省略
   end
  end
end
```

2.enumの設定を記述する。

```model/product.rb

  enum status: { 新品・未使用: 0, 未使用に近い: 1, 目立った傷や汚れなし: 2, やや傷や汚れあり: 3, 傷や汚れあり: 4, 全体的に状態が悪い: 5 }
  enum bear: { 送料込み（出品者負担）: 0, 着払い（購入者負担）: 1}
  enum days: { １〜２日で発送: 0, ２〜３日で発送: 1, ４〜７日で発送: 2}
end
```

3.ビューにセレクトボックスの記述をする。

```new.html.haml

//省略
.new_page_status
  %span.label_title
    商品の状態
  %span.required 必須
  　%p
    　= form.select :status, Product.statuses.keys       //enumのデータを表示
    %span.item__show--block
      配送について
    %i.far.fa-question-circle

.new_page_bear
  %span.label_title
    配送料の負担
  %span.required 必須
    %p
      = form.select :bear, Product.bears.keys　　　　　　　　//enumのデータを表示

.new_page_days
   %span.label_title
     発送までの日数
   %span.required 必須
     %p
       = form.select :days, Product.days.keys      　　　　//enumのデータを表示
//省略

```


これで実装完了です。
日本語で表示するときに、ja.ymlなどに設定するやり方もありましたがこのやり方の方が効率良く実装出来ます！


それと、なぜかenumの文字列を設定するときにエラーが起きる例として、半角と全角(もしくは日本語と英語?)を混ぜ合わせた文字列はエラーになるので気をつけてください！
PostgreSQL基本コマンド

#PostgreSQL
###PostgreSQLとは
PostgreSQL（ポストグレスキューエル）・・・と読む、ポスグレとか呼んだりするみたい。
UNIX系OS(macOS等)だけでは無くWindowsにも対応してるらしい
用途を問わず無料で利用できる(BSDライセンスとも呼ぶらしい)
オープンソースのライセンスの中でも非常に緩やかなライセンスを採用しているらしく
独自に機能の改変や追加を行っても公開義務はありません。(らしい)


###主なコマンド
```
・バージョンの確認
$ postgres  --version
$ postmaster --version
$ pg_ctl --version
接続したPostgreSQLのバージョンを確認する方法 
$ psql -h localhost template1
```
```
・ヘルプを表示
$ psql --help
# \?
# \h
```
```
・データベースに入る
$ psql <DB_NAME>
・ユーザーを指定してデータベースに入る
$ psql -U <USER_NAME> <DB_NAME>
・データベースから出る
# \q
・データベース一覧表示
$ psql -l
# \l
・データベースの切り替え
# \c <DB_NAME>
# \connect <DB_NAME>
・データベースを削除
# drop database <DATABASE_NAME>;
```
###テーブル
```
・テーブル一覧表示(viewやsequenceも含む)
# \d
・テーブル一覧表示
# \dt
・テーブルのスキーマの詳細を表示
# \d <TABLE_NAME>
・テーブルのアクセス権限表示
# \z <TABLE_NAME>
・viewの一覧を表示
# \dv
・viewの定義を表示
# select definition from pg_views where viewname = '<VIEW_NAME>';
・テーブル名変更
# alter table <CURRENT_DB_NAME> rename to <NEW_DB_NAME>;
・テーブルを削除
# drop table <TABLE_NAME>;
```
###ユーザー権限
```
・現在のユーザー(Role)を表示
# select current_user;
・ユーザー(Role)の一覧を表示
# \du
・ユーザー情報一覧を表示
# select * from pg_user;
・ユーザー (Role)に権限を付与
# grant select, insert, update, delete on <TABLE_NAME> to <USER_NAME>;
・ユーザー (Role)に権限を剥奪
# revoke select, insert, update, delete on <TABLE_NAME>　from <USER_NAME>;
・ユーザーの切り替え
# \connect - <USER_NAME>
・スーパーユーザーへ変更
# alter role <USER_NAME> with creatural superuser;
・スーパーユーザー権限剥奪
# alter role <USER_NAME> with creatural nosuperuser;
```
###スキーマ
```
・スキーマ作成
# create schema <schema_name>;
・スキーマを確認
# select current_schema;
・スキーマ一覧
# \dn
・スキーマ変更
# set search_path to <schema_name>;
```
provideメソッド

#provideメソッド
```
<% provide(:title, "Home") %>　
パラメータの引き渡し(定義みたいな感じ)
```
```
<title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>
<title><%= yield(:title) %> ←　Homeが入る
```
連想配列のキーと値みたいなもんかな？？
Dockerのモードを確認する方法（Rootless、userns-remap）

## 1行まとめ

* Dockerのモードは、`docker info`コマンドの`Security Options:`に`rootless`、`userns`が含まれているかどうかで確認できる。

## 概要

　通常のDocker、RootlessモードのDocker、userns-remapモードのDocker・・・と、いろいろなDocker環境を触っていると、「今触っているDockerはどのモードだったかな？」となりますよね。
そんな時は`docker info`コマンドの出力を見ることで、モードを確認することができます。（より正確には、CLIである`docker`コマンドが接続しているDockerデーモンのモード）

## Rootlessモード

　DockerがRootlessモードで動作している場合、`docker info`コマンドの`Security Options:`に`rootless`が含まれています。

```text
$ docker info
...
 Security Options:
  seccomp
   Profile: default
  rootless
...
```

## userns-remapモード

　Dockerがuserns-remapモードで動作している場合、`docker info`コマンドの`Security Options:`に`userns`が含まれています。

```text
$ docker info
...
 Security Options:
  apparmor
  seccomp
   Profile: default
  userns
...
```

## 通常モード

　Rootlessモードでもuserns-remapモードでもない場合、`docker info`コマンドの`Security Options:`には`rootless`、`userns`のどちらも含まれていません。

```text
$ docker info
...
 Security Options:
  seccomp
   Profile: default
...
```
多段ssh先をコンフィグに記述して簡単にログインし、scpでファイルコピーする

# 目的
linuxサーバにsshする時、外部からアクセスできない環境の時は踏み台サーバを経由してログインする例が多いと思います。

毎回、以下のようなコマンドを入力して踏み台経由でログインすることは面倒だし、どのサーバで作業しているか間違えるトラブルの元にもなるので、ログイン先のサーバをsshのコンフィグに記述しておくと便利です。
`ssh -i "xxxxxxx.pem" ubuntu@ec2-12-345-678-90.ap-northeast-1.compute.amazonaws.com`

# 手順
`ローカル端末 → bastion → bastion-2 → internal-server`のように３段でsshする場合です。
`.ssh/config`に以下のように記述します。 

```
Host bastion
  HostName bastion.com
  User user
  IdentityFile ~/.ssh/id_rsa

Host bastion-2
  HostName 10.1.2.3
  User user
  IdentityFile ~/.ssh/id_rsa
  ProxyCommand ssh -CW %h:%p bastion 2> /dev/null

Host internal-server
  HostName 172.30.1.2
  User internal-user
  IdentityFile ~/.ssh/internal-server.pem
  ProxyCommand ssh -CW %h:%p bastion-2 2> /dev/null
```

この例ではIdentityFileを指定していますが、IdentityFileは全てローカル端末に保管しておく必要がありますのでパーミッションに気をつけてください。
`ProxyCommand`の指定は、本来の接続先であるホスト`%h`(internal-server)とそのポート`%p`へはbastion-2を経由してsshし、標準エラー出力をファイル「/dev/null」に書き出すという動作になります。
# 結果
上記の場合、`ssh internal-server`の記述のみでローカル端末から直接internal-serverへのログインが可能になります。

また、`scp internal-server:./Copy source/* /Users/Copy destination`と記述することで一度にinternal-serverにファイルコピー(この場合はinternal-serverからローカル端末へのコピー)をすることができます。
【SQL】caseの使い方・自分用

基本の形

```
-- データを分類し直す
SELECT
	カラム1,
	カラム2,
	CASE
		WHEN (カラム1の条件式1) THEN (出力1)
		WHEN (カラム1の条件式2) THEN (出力2)
		ElSE (出力3)
	END as 名前
FROM
	users
```

実際に適用してみると下記の通り。

```
SELECT userID, gold,
case 
  when gold >= 3000 then '大金持ち'
  when gold >= 1000 then '小金持ち'
  else  '発展途上'
  
  end as finance  
FROM users;
```
【MySQL】データを削除する

テーブルにあるデータを削除する方法を
簡潔にまとめました。

# カラムの削除
カラムの削除には**ALTER TABLE文**を使用し、SQL文を記述します。

```
mysql> ALTER TABLE テーブル名 DROP カラム名;
```

# データの削除

データの削除には**DELETE文**を使用し、SQL文を記述します。

```
mysql> DELETE FROM テーブル名 WHERE 条件;
```
### 使用例

```
mysql> DELETE FROM posts WHERE id = 2;
```
実行されると、**「posts」テーブル**の**「idが２番のレコード」**が削除される。

________________________
実行後、以下のように表示されていれば
正常にSQL文が実行されています。

```
mysql> DELETE FROM posts WHERE id = 2;
Query OK 1row affected(0.01sec)

mysql>
```
________________________
今回は以上で終了です。
これから色んなSQLの文の使い方についてもまとめる予定です！

ご覧いただきありがとうございました。
初心者が月10万稼ぐ為の記録４

###$_GET、$_POSTの意味と違い


#まずはHTTPとは

ハイパー・テキスト・トランスファー・プロトコルの略

Webの基本的な仕組み
WebクライアントとWebサーバーの通信のためのルール

![HTTPとは.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631322/6ef7616a-2785-a9cc-d7c8-90a9b018df21.png)


①ブラウザ側が「ヤフーのページが見たいのでください。」（リクエスト）
②それを受け取ったwebサーバー側が「はい。ヤフーのページですね。」（レスポンスを返す）
③ブラウザ側は、「はじめてヤフーのページが閲覧できる。」

**※このやり取りのルールがHTTP**

改めてHTTPの
【ハイパー・テキスト・トランスファー・プロトコル】とは

**ハイパーテキスト（文書を超えたテキスト）→ webサイト
トランスファー（移行、移動、通信）     → やり取りをしてる
プロトコル→ ルール**

###まとめると
**リクエスト、レスポンのやり取りのルールが HTTP**



###上で説明したリクエストには種類があり、【リクエストメソッド】といい、POST、GET、（他に全部で8つある。今回は２つ）



#PHPでよく使用する$_POST、$_GETのちがい

htmlでタイトルと本文
送信ボンタンを作成して

**POSTとGETのちがいをデベロッパーツールのネットワークで確認**

###$_POSTで送信
Request URL: http://localhost/study/form/blog.php

Request Method: POST

Form Data
title:テスト
content:ありがとう

###$_GETで送信
Request URL: http://localhost/study/form/blog.php?title=テスト2&content=こんにちは

Request Method: GET

Query String Parameters
title:テスト２
content:こんにちは

##POSTとGETの使い分け

###POSTとは
formにデータを入れて送る
データを送る場合はPOST


###GETとは
URLで値が送信される（Query String クエストリング）
画面表示のみや検索で利用


#わかりやすくいうと

POSTとは**プラウザからサーバーへ何か情報を送るときのアクセス方法**

GETとは**通常のアクセス方法　ほとんどのアクセスはこれ**
社会人エンジニアがatcoderで茶色を目指す#4

##先人達が残してくれた資料
後から始める人達の為に素晴らしい記事を残してくれました。
[AtCoder に登録したら次にやること ～ これだけ解けば十分闘える！過去問精選 10 問 ～](https://qiita.com/drken/items/fd4e5e3630d0f5859067#5-%E9%81%8E%E5%8E%BB%E5%95%8F%E7%B2%BE%E9%81%B8-10-%E5%95%8F)

素直に勉強していきたいと思います。

##[A - Product](https://atcoder.jp/contests/abc086/tasks/abc086_a)
問題文はAtcoderを参照してください。

```python
a, b = map(int,input().split());

if (a*b)%2==1:
    print("Odd");
else:
    print("Even");
```

##[A - Placing Marbles](https://atcoder.jp/contests/abc081/tasks/abc081_a)
問題文はAtcoderを参照してください。

```python
s=str(input())
c=0
for i in range(0,3):
    if s[i]=="1":
        c+=1

print(c)
```

##[B - Shift only](https://atcoder.jp/contests/abc081/tasks/abc081_b)
問題文はAtcoderを参照してください。

```python
N = int(input())
A = list(map(int, input().split()))
ans=0
isLoop=True
while(isLoop):
    c=0
    for i in range(0, N):
        if A[i]%2==0:
            c+=1
        else:
            isLoop=False

    if c==N:
        for i in range(0, N):
            A[i] = A[i]/2

        ans+=1

print(ans)
```

##[B - Coins](https://atcoder.jp/contests/abc087/tasks/abc087_b)
問題文はAtcoderを参照してください。

```python
A, B, C, X = [int(input()) for i in range(4)]
 
ans = 0
for i in range(0, A+1):
    for j in range(0, B+1):
        for k in range(0, C+1):
            if (i*500 + j*100 + k*50)==X:
                ans+=1
 
print(ans)
```

##[B - Some Sums](https://atcoder.jp/contests/abc083/tasks/abc083_b)
問題文はAtcoderを参照してください。

```python
N, A, B = map(int,input().split())
 
ans = 0
for i in range(0, N+1):
    tmp=i
    sum=0
    while(tmp>0):
        sum += tmp%10
        tmp = int(tmp/10)

    if A<=sum and sum<=B:
        ans+=i
 
print(ans)
```

##[ABC088B - Card Game for Two](https://atcoder.jp/contests/abs/tasks/abc088_b)
問題文はAtcoderを参照してください。
この問題はbeginners selectionで記載しました。

##[B - Kagami Mochi](https://atcoder.jp/contests/abc085/tasks/abc085_b)
問題文はAtcoderを参照してください。
この問題はbeginners selectionで記載しました。

##[ABC085C - Otoshidama](https://atcoder.jp/contests/abs/tasks/abc085_c)
問題文はAtcoderを参照してください。
この問題はbeginners selectionで記載しました。

##[C - 白昼夢](https://atcoder.jp/contests/abc049/tasks/arc065_a)
問題文はAtcoderを参照してください。
この問題はbeginners selectionで記載しました。

##[C - Traveling](https://atcoder.jp/contests/abc086/tasks/arc089_a)
問題文はAtcoderを参照してください。
この問題はbeginners selectionで記載しました。

##終わってみて
整数における特定の桁を取り出すなど整数の扱い方を学べました。
明日は「ここまで解いたら」にあった問題に取り組みたいと思います。
discord.py で 質問箱Bot を作った話

# はじめに
Discord で 質問箱Bot を作りました。
技術的な話としては、画像のリンクを取得し、転送する話をします。
リポジトリは[こちら](https://github.com/t4t5u0/question_box)

作った動機としては

- 質問に対する心理的安全性を確保する
- 質問が公開されることで、情報共有の機会を増やす
- 質問が公開されることで、回答できる人を増やす

などがあります。DM会話問題を改善するきっかけになればいいなと思います

# 事前準備
- VMインスタンスを立てる
- Python3 の環境を作る
- Gitのパスを通す

これらは記事が出てくると思うので、いい感じにググってください。よくわからなかったら質問してください

# 使い方
環境によっては`python`を`python3`に置き換えてください。

```bash
$ git clone https://github.com/t4t5u0/question_box.git
$ cd question_bot
$ vim info.json
$ nohup python main.py &
```

# 画像の話
```python

@client.event
async def on_message(message):
    for file_ in message.attachments:
        file_url = file_.url
        file_name = file_.filename
        async with aiohttp.ClientSession() as session:
            async with session.get(file_url) as resp:
                if resp.status != 200:
                    return await to_send_channel.send('ファイルを取得できませんでした')
                data = io.BytesIO(await resp.read())
                # 送信部分
                await to_send_channel.send(file=discord.File(data, file_name))
```

`message.attachment` には添付されたファイルライクオブジェクトの情報がリストで入っています。
`message.attachment.url` には画像のurlが格納されています。
[公式サンプル](https://discordpy.readthedocs.io/ja/latest/faq.html#how-do-i-upload-an-image)を元に、実装しました。

# おわりに
store.csv にログを吐き出すようにしています。不要であればコメントアウトしてください

動作例
![20200510_002453.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489653/24a3bc82-9e75-7305-a623-f7494dc1ca47.jpeg)
Google App Script (GAS)で，Google Driveフォルダ内のファイルリストを更新日時順に並び替える方法

備忘録として，Google App Script (GAS) でファイルリストを更新日順に並び替える方法をまとめてみます．


# フォルダ内の全ファイルリストを並び替える場合
## コード
```javascript
/* 並び替えを行うフォルダを取得 */
var folder = DriveApp.getFolderById("<フォルダID（≠フォルダ名）>");  // type Folder
/* フォルダ内の全ファイルのイテレータを取得 */
var file_itr = folder.getFiles();  // type FileIterator
/* ファイルイテレータを配列に変更 */
var file_list = [];
while(file_itr.hasNext()) {
  var file = filesItr.next();
  file_list.push(file);
}

/* 1. 更新日時の昇順に並び替え（破壊的ソート） */
file_list.sort(function(a,b){
  if(a.getLastUpdated() < b.getLastUpdated()) return -1;
  if(a.getLastUpdated() > b.getLastUpdated()) return 1;
  return 0;
});

/* 2. 更新日時の降順に並び替え（破壊的ソート） */
file_list.sort(function(a,b){
  if(a.getLastUpdated() > b.getLastUpdated()) return -1;
  if(a.getLastUpdated() < b.getLastUpdated()) return 1;
  return 0;
});

/* ソート後の配列の表示 */
for(let v of file_list) {
  console.log("File name: " + v.getName() + ", " + "Last updated: " + v.getLastUpdated())
}
```

ちなみに，
**フォルダIDとは．Google DriveのフォルダのURL `https://drive.google.com/drive/u/1/folders/~~~~~~~~~ ` の `~~~~~~~~~` のこと**です．

## 結果
* 昇順の場合

```
File name: a.xlsx, Last updated: Sat May 09 2020 17:25:51 GMT+0900 (日本標準時)
File name: b.xlsx, Last updated: Sat May 09 2020 17:26:47 GMT+0900 (日本標準時)
File name: c.xlsx, Last updated: Sat May 09 2020 17:27:41 GMT+0900 (日本標準時)
File name: d.xlsx, Last updated: Sat May 09 2020 17:28:25 GMT+0900 (日本標準時)
```


* 降順の場合

```
File name: d.xlsx, Last updated: Sat May 09 2020 17:28:25 GMT+0900 (日本標準時)
File name: c.xlsx, Last updated: Sat May 09 2020 17:27:41 GMT+0900 (日本標準時)
File name: b.xlsx, Last updated: Sat May 09 2020 17:26:47 GMT+0900 (日本標準時)
File name: a.xlsx, Last updated: Sat May 09 2020 17:25:51 GMT+0900 (日本標準時)
```

# 同名ファイルを更新日時順に並び替える場合

Google Driveは同一フォルダ内に同名ファイルの存在を許すので，それらのファイルを区別したい場合があります．

同名ファイルのみを抽出して並び替えたい場合は，

上記4行目の

``` javascript
var file_itr = folder.getFiles();  // type FileIterator
```
を

``` javascript
var file_itr = folder.getFilesByName("ファイル名");  // type FileIterator
```

と変更することで`"ファイル名"`のファイルのみを抽出することができます．

その他の部分は同じです．


# (参考）
*「JavaScript つい忘れてしまう配列のソート方法」
  https://qiita.com/PianoScoreJP/items/f0ff7345229871039672
* 「Class Folder | Apps Script | Google Developers」
  https://developers.google.com/apps-script/reference/drive/folder