OmniAICreator/Qiita-1.07M huggingface dataset:
環境設定 tensorflow-gpu

## 背景

YOLOv3に取り組んでいます。

その際にtensorflow-gpuをどう組み込むのかに直面する。
毎回ググるのが大変だったので、手順をまとめます。
[知的好奇心](https://intellectual-curiosity.tokyo/2019/06/17/windows-10%E3%81%A7tensorflow-gpu%E3%82%92%E4%BD%BF%E3%81%86%E6%96%B9%E6%B3%95/)様でも仰っていた通り、現在(2019/10/4)CUDA ver10.1はTensorflow-gpu 1.13.1に対応できていないのか、うまく行きませんできた。
（中途半端になるかもしれません）



## 実装環境
Windows 10 64bit
GeForce GTX 1050 Ti
Python 3.7.3
Tensorflow-gpu==1.13.1
CUDA Toolkit 10.0
cuDNN v7.6.4 (September 27, 2019), for CUDA 10.0

※CUDAのバーション(10.0)におけるcuDNNのバージョン(v7.6.4 for CUDA 10.0)を
　対応させなくてはいけないです。

## 必要なダウンロードとインストール
pythonに組み込む際に、必要なことをまとめます。
ちなみに公式tensorflowがサポートしているのはNVIDIA®です。
またGPU自身が対応していることが重要です。

1. GPU自体のドライバをインストール(NVIDIAドライバダウンロード)
2. CUDA NVIDIAドライバのインストール(CUDA Toolkit 10.0 Archive)
3. cuDNN v7.6.4 (September 27, 2019), for CUDA 10.0 をダウンロード(cuDNN Library for Windows 10)
※cuDNN v7.6.4をダウンロードするためにはアカウント作成が必要です。

ダウンロードとインストールした後の処理が非常に不親切となっています。
ご迷惑をおかけします。
ざっくりと説明すると、
GPU自身のドライバをインストールし（されている方はいりません）、
CUDA NVIDIAドライバのインストールし、
CUDA NVIDIAドライバのインストールしたときに作成されたディレクトリに進み、
cuDNN v7.6.4で得られたファイルを各ディレクトリに入れます。
余裕がありましたら、この工程のスクショを張りたいです（汗）。


## 環境変数の設定
[金子邦彦研究室](https://www.kkaneko.jp/index-j.html)様のwebサイトをかなり参考にさせていただきました。
とても勉強になりました。

システム環境変数の変更は以下の手順で進みます。
コントロールパネル　→　システム　→　システムの環境変数
①スタートをクリック
②コントロールパネルと入力し、クリック
![図1_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503403/279d10b4-3958-f34c-818f-15d2bee9c211.png)


③システムとセキュリティをクリック
![図asgfdsg1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503403/f9ac85bc-2a1d-da11-681b-20826d19ec51.png)


④システムをクリック
![図1wdc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503403/e4273a1c-6f21-c58c-b689-a48a6977fecf.png)


⑤システムの詳細設定をクリック![図sac1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503403/0d0adca6-5ad7-eac1-ede5-fbfab84f07d0.png)

⑥詳細設定内の環境変数をクリック
![図asgfdsg1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503403/46b8e879-7026-45cf-76d7-0df045b99484.png)


- システム環境変数
 - CUDA_PATH 
     - C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v10.0
 - PATH
     - C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v10.0\bin


## 動作チェック

コマンドプロンプトの**管理者として実行**で下記を実行
パスが通ってるかを確認できます。

```cmd:cmd_管理者として実行
where cudnn64_7.dll
```

次にpython側でtensorflow-gpuが認識しているかを以下のコードで確認できます。

```py:pythonでの入力コード　その1
import tensorflow as tf
print(tf.__version__)
```
```py:pythonでの入力コード　その2
from tensorflow.python.client import device_lib
device_lib.list_local_devices()
```

うまく行かないときは、Tensorflow-gpu==1.13.1　を再度インストールしてみるのもありです。

**実装できることを心よりお祈りします。**

## 参考文献
[CUDA Toolkit 10.0 Archive](https://developer.nvidia.com/cuda-10.0-download-archive?target_os=Windows&target_arch=x86_64&target_version=10&target_type=exelocal)
[Download cuDNN v7.6.4 (September 27, 2019), for CUDA 10.0](https://developer.nvidia.com/rdp/cudnn-download)
[金子邦彦研究室 NVIDIA cuDNN 7.6 のインストール（Windows 上）](https://www.kkaneko.jp/tools/win/cudnn.html)
[Windows 10でtensorflow-gpuを使う方法](https://intellectual-curiosity.tokyo/2019/06/17/windows-10%E3%81%A7tensorflow-gpu%E3%82%92%E4%BD%BF%E3%81%86%E6%96%B9%E6%B3%95/)
kaptのセットアップ方法&使い方

## はじめに

KotlinでOrmaを使うために、kaptをセットアップしようと思いました。

## 「kapt」とは？

「kotlin-annotation-processing tools」の略のようで、JavaのPluggable Annotation Processing APIをKotlinで使えるようにするためのプラグインです。
これにより、Kotlinでもアノテーション( `@table` など、先頭に `@` が付くもの)を使ってコードを生成できるようになります。

## 環境

- OS：macOS Mojave 10.14.3
- Android Studio：3.5
- JRE：1.8.0_202-release-1483-b49-5587405 x86_64
- JVM：OpenJDK 64-Bit Server VM by JetBrains s.r.o
- Kotlin：1.3.50
- Android Gradle Plugin：3.5.0

## セットアップ

appフォルダ配下の「build.gradle」にkaptのプラグインを追加するだけです。

```diff:/build.gradle
+ apply plugin: 'kotlin-kapt'
```

公式ドキュメントにはいろいろ設定が書いてありましたが、この1行を追加するだけで使えました。
設定した方がいいものがありましたら、コメントなどで教えていただけると嬉しいです。

## 使い方

appフォルダ配下の「build.gradle」で、 `annotationProcessor` を `kapt` に置き換えるだけです。

```diff:/app/build.gradle
dependencies {
    ext {
        orma_version = '6.0.2'
    }
    // Orma
-   annotationProcessor "com.github.maskarade.android.orma:orma-processor:$orma_version"
+   kapt "com.github.maskarade.android.orma:orma-processor:$orma_version"
    implementation "com.github.maskarade.android.orma:orma:$orma_version"
}
```

## おわりに

これでKotlinでもOrmaやDagger 2を使うことができます！

## 参考リンク

- [Using kapt - Kotlin Programming Language](https://kotlinlang.org/docs/reference/kapt.html)
- [kaptでHelloWorld | エンジニアの便利手帳](http://3jigen.net/2018/09/post-802/)
Rails あいまい検索機能の実装

# 検索機能の実装
### 作業手順
+ コントローラで検索結果のデータを取得

1. LIKE句<br>
LIKE句は、曖昧(あいまい)な文字列の検索をすることができるもので、whereメソッドと一緒に使う。<br>

* 曖昧(あいまい)文字列について<br>

|文字列|意味|
|:-----:|:---:|
|%|任意の文字列(空白文字列を含む)|
|-|任意の1文字|<br>
* 実行サンプル<br>

|実行例|詳細|
|:---:|:---:|
|where('title LIKE(?)', "a%")|aから始めるタイトル|
|where('title LIKE(?)', "%b")|bで終わるタイトル|
|where('title LIKE(?)', "%c%")|cが含まれるタイトル|
|where('title LIKE(?)', "d_")|dで始まる2文字のタイトル|
|where('title LIKE(?)', "_e")| eで終わる2文字のタイトル|

* routes.rbの記述

```ruby:routes.rb
HogeReviewSite::Application.routes.draw do
  resources :products, only: :show do
    collection do
      get 'search'
    end
  end
  root 'products#index'
end
```
rake routesを実行すると以下のようになる。

```ターミナル
Prefix Verb URI Pattern                                                                              Controller#Action
search_products GET  /products/search(.:format)  products#search
# 省略                                                          
```
### コントローラのsearchアクションを編集する(データ20件分取り出し)
```ruby:products_controller.rb
class ProductsController < HogeController

# 省略

  def search
    @products = Product.where('title LIKE(?)', "%#{params[:keyword]}%").limit(20)
  end
end
```
# まとめ
+ LIKE句を使って

```
モデル名.where('検索するカラム名 LIKE(?)', "検索するキーワード")
```

+ productsテーブルのtitleカラムにあいまい検索する（今回の例の場合)

```
Product.where('title LIKE(?)', "%#{params[:keyword]}%")
```
入力されたキーワードの前後に%を入れてLIKE句に指定すると、文字列の中に含まれたキーワードがヒットする。
つまり、この場合、タイトルの中にキーワードが含まれるデータを抽出することができる。

+ 取得件数の指定

```
Product.limit(20)
```
取得件数を指定するときは```limitメソッド```を使う。<br>
limitメソッドで取得したいデータ件数(20件)を指定してあげれば取得件数を決めることがでる。

+ 以上であげたメソッドを組み合わせる

```
Product.where('title LIKE(?)', "%#{params[:keyword]}%").limit(20)
```
以上です。
ゼロから始めるマテリアルズ・インフォマティクス②

前回：[ゼロから始めるマテリアルズ・インフォマティクス①](https://qiita.com/tukki0210/items/f46a487e5eb6a92ee84f)

Material Projectからデータを取得できたので、その中身を覗いていきます。


#Material Projectから取得したデータの中身を覗いてみる

~~~
df_COM.columns
>>Index(['band_gap', 'cif', 'density', 'diel', 'e_above_hull', 'elasticity',
       'elements', 'energy', 'energy_per_atom', 'formation_energy_per_atom',
       'full_formula', 'hubbards', 'icsd_id', 'icsd_ids', 'is_compatible',
       'is_hubbard', 'material_id', 'nelements', 'nsites', 'oxide_type',
       'piezo', 'pretty_formula', 'spacegroup', 'tags', 'task_ids',
       'total_magnetization', 'unit_cell_formula', 'volume'],
      dtype='object')
~~~

重要そうなものだけ見ていきます。
詳細ついては[公式ドキュメント](https://materialsproject.org/docs/api#materials_.28calculated_materials_data.29)を確認してください。


**band gap**
バンドギャップ：結晶のバンド構造において電子が存在できない領域（禁制帯）の幅の大きさのこと。ゴムなどの電気を通さない絶縁体ほど値が大きく、金属などの電気を通す伝導体ほど値が小さくなる。また温度の影響を受ける。単位はeV。

**cif** （Crystallographic Information File）
結晶学情報共通データ・フォーマット:結晶構造についての情報を詰め込んだ、国際結晶学連盟が推奨しているフォーマット。
詳細はここ[表面分析研究会　無料記事vol.21](http://www.sasj.jp/JSA/CONTENTS/vol.21_2/Vol.21%20No.2/Vol.21%20No.2_04_Matsushita.pdf)
結晶の構造についてのデータが入っているのですが、中身を見ていくと長いので別記事にしました。
[pymatgenで結晶構造情報フォーマットcifを扱う](https://qiita.com/tukki0210/items/e5ac1ddbbc3f40dfe840)

**density**
密度：単位はg/cm3

**diel**
誘電特性について。誘電率、屈折率、強誘電性など

**e_above_hull**
構造の凸包の上の計算されたエネルギー。熱力学的な安定性に関係する。０より値が大きい場合、熱力学的に不安定で変化しやすい。

**spacegroup**
結晶構造について　概要は[wikipedia:結晶系](https://ja.wikipedia.org/wiki/%E7%B5%90%E6%99%B6%E7%B3%BB)
・**symbol** 空間群の国際表記。参照:http://nc-imr.imr.tohoku.ac.jp/HERMES/Analysis/SPGroup.html
・**point_group** 結晶点群。対象操作の集まりが作る群のこと。記号は[ヘルマン・モーガン記号](https://ja.wikipedia.org/wiki/%E3%83%98%E3%83%AB%E3%83%9E%E3%83%B3%E3%83%BB%E3%83%A2%E3%83%BC%E3%82%AC%E3%83%B3%E8%A8%98%E5%8F%B7)によるもの。
・**crystal_system** 結晶系。

**elasticity**
（単結晶）弾性率:（化合物内部でかかる）残留応力に対して結晶格子のひずむ大きさ。Kは体積弾性率。Gはせん断弾性率。Voigt,Reussなどは近似方法の違い。純粋な単結晶は生成が難しいので、多結晶への応力がそれを構成する単結晶に等しく働いていると近似して計算する（らしい）。データは空白のものが多い。

**elements**
元素:構成している元素

**energy** 
vasp（第一原理計算ソフト）で計算した形成エネルギー

**energy_per_atom**
単位セル内の原子ごとに正規化された計算された形成エネルギー

**formation_energy_per_atom**
単位格子内の原子ごとに正規化された要素から計算された形成エネルギー

**icsd_ids**
ICSD無機結晶構造データベースのID？

**is_compatible**
この計算がGGA / GGA + U混合スキームで互換性があると見なされるかどうかのブール値

**is_hubbard**
構造がDFTのHubbard U拡張を使用して計算されたかどうかを示すブール値

**material_id**
Materials ProjectのId

**nelements**
構成する元素の種類の数

**nsites**
構成する元素の合計

**oxide_type**
酸化について。酸化(oxide)、超酸化(superoxide)、オゾン化(ozonide)、過酸化(peroxide)、水酸化(hydroxide)

**piezo**
圧電素子かどうか。圧電素子の場合は性能が入っている。

**pretty_formula**
量が正規化されている化学式

**total_magnetization**
総磁気モーメント

**volume**
Final relaxed volume of the material　らしいのですが、緩和量？


化学が高校までの知識で止まっているのでなかなか難しい。笑
今回は短いですがこれで止めます。
Linux基礎(Symbolic link/Hard link)

#シンボリックリンクとハードリンク
ファイルの実体(ディスク上のデータ)とファイル名を繋ぐことをリンクという。リンクにはシンボリックリンクとハードリンクの2種類がある。

|リンク|説明|
|---|---|
|シンボリックリンク|Windowsのショートカットに該当するリンク。リンク元ファイルが配置されている場所にリンクする方式。<br>・リンク元のファイルが移動、削除されると、リンク元のファイルの実体にアクセスできない<br>・異なるファイルシステム上のファイルやディレクトリにリンクできる|
|ハードリンク|1つのファイルの実体を複数のファイル名で表せるリンク。同じファイルの実体を共有する方式<br>・リンク元のファイルが移動、削除されても、ファイルの実体にはアクセスできる<br>・異なるファイルシステム上のファイルやディレクトリにリンクできない。|

- シンボリックリンク

![スクリーンショット 2019-10-03 13.36.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374557/3ad58619-c4a9-2c47-d3dc-c3f188be2149.png)

- ハードリンク

![スクリーンショット 2019-10-03 13.38.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374557/63d10686-69bb-65f1-eb65-a471cda0f4f3.png)

#リンク作成コマンド
ln [オプション] リンク元 リンク先

|オプション|説明|
|---|---|
|-s|シンボリックリンクを作成する際に指定(オプションを指定しない場合、ハードリンクが作成される。)|

```shell
#シンボリックリンクを作成する場合
$ ln -s abc.txt abc.lnk

#ハードリンクを作成する場合
$ ln abc.txt abc.lnk
```
UML クラス図

仕事でクラス図を使うので、調べてみた。
参考URL：http://www.masatom.in/pukiwiki/UML/%A5%AF%A5饹%BFޤδ%F0%C1%C3/#l3423afe


##はじめに
クラス図を活用できるツールとして
・**AmaterasUML**（http://amateras.osdn.jp/cgi-bin/fswiki/wiki.cgi?page=AmaterasUML）
・**draw.io**（https://draw-io.softonic.jp/）
などが知られている。
今回は**AmaterasUML**を用いて学習。

##クラス図
例えば従業員クラスがあるとすると、
クラス図はこのように表す。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506451/73cc78a3-6f64-946d-4f5c-dd6a784b7a9e.png)
・1段目 / クラス名
・2段目 / フィールド
・3段目 / メソッド

##可視性
可視性（private/protected/public）はアクセスレベルごとに左のマークが変化する。
メンバ、フィールドともに上から順に
・public
・private
・protected
・package
である。（**↓Amaterasでの表記**）
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506451/5a338b8c-a89a-28a7-bf72-2e19fe87d943.png)
以下のサイトが参考になる。
（https://www.ibm.com/support/knowledgecenter/ja/SS4JE2_7.5.5/com.ibm.xtools.viz.class.diagram.doc/topics/cvisibility.html）



##クラスフィールド・メソッドとメンバフィールド・メソッド
　名前にクラスとつくものはJavaで言う**static**なものである。
　フィールドまたはメソッドに下線を引いて表す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506451/02dcef55-2ef8-ac64-d8f4-9d2130614330.png)


##依存
　破線矢印で表す。
　クラス間で関係性があまりないときに用いる。
　Javaでnew()する側からnew()される側へ矢印を引いて表す、らしい…

　例えば会社クラス（Company） 内で
　Employee emp = new Employee();
と書かれていた場合、こんなかんじだろうか…
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506451/934b0ec5-f7c3-b89f-3a07-48133cd3cf11.png)


##集約　
　白塗りの実線ひし形で表す。
　クラス間で「**全体**」と「**部分**」の関係にある時の表現。
　例えば部署と社員といった具合である。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506451/ee00f570-c8a8-997b-bce6-bd2be8e2dafe.png)


##コンポジション
　黒塗りの実線ひし形で表す。
 集約の一種で、より一層結びつきが強いときに使う。
**「部分」は「全体」と生存期間を共にする**、らしい…
ん～…むずかしい。
　一つの「部署」インスタンスは一つの「会社」インスタンスにしか属することができないとして、こんな感じだろうか。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506451/5f5c3765-d5ea-4671-53a8-9758033df71b.png)


##継承
　白塗りの実線矢印で表す。「**汎化**」とも言う。
　例えばSEが従業員クラスを継承しているとする。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506451/d5eab424-8c98-4336-25f1-257ca4e6894d.png)

　「継承」と聞くと矢印は逆のように思うが、SEや営業など様々な種類を従業員へ「汎化」するとかんがえると納得が行く。間違えそうなので注意が必要である。

##実現
　白塗りの破線矢印で表す。
　Javaのインターフェースを表すときに用いる。
　「SE」や「営業」が「勤務」インターフェースを実現していたとする。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506451/38b7d359-d4d3-df5a-8c2b-9847c00604ee.png)


##多重度
　**ここが一番難しい…**

　実践と数字や＊、..を使って表す。

　例えば、従業員と会社で

・従業員は必ず会社に属している。
・従業員は一つの会社にしか所属できない。
・会社には0～複数の社員が所属している

ということを表すと、
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506451/d4dde022-1319-59dc-0a70-1abe6ff7fd8a.png)


　記号についてであるが
「＊」は2以上、「..」は～（範囲）を表している。

以下のサイトからとてもわかりやすく説明して頂けた。
（https://www.atmarkit.co.jp/ait/articles/0105/02/news002.html）


##まとめ
（感想

多重度以外は何とかなりそう。
資格でも多重度はよく出るので注意。


以上。
【python】文字化けを直す

下のような文字化けに遭遇してしまった。何が書いてあったんだろう。

```
SystemError: opening file "./inverse-planning/dist/index.html": 縺昴�繧医≧縺ｪ繝輔ぃ繧､繝ｫ繧�ョ繧｣繝ｬ繧ｯ繝医Μ縺ｯ縺ゅｊ縺ｾ縺帙ｓ
```

# 文字化けに糸偏の漢字が多い場合は

Shift JISでエンコードしてバイト文字列を取得し、改めてUTF-8でデコードし直すと文字化けを直せるかもしれない。

その理由は下記の記事が参考になる。

- [UTF-8からSJISに文字化けすると糸偏の漢字がよく出てくる](https://qiita.com/kaityo256/items/878cbe35d4c8444b045a)
- [縺とは (レンとは) [単語記事] - ニコニコ大百科](https://dic.nicovideo.jp/a/%E7%B8%BA)
- [繧とは (ウンとは) [単語記事] - ニコニコ大百科](https://dic.nicovideo.jp/a/%E7%B9%A7)

# python3でお手軽に文字化けを解消する

1. python3インタプリタを立ち上げる。
2. 以下のようにして正しい文字コードに変換する。

```python
>>>s="縺昴繧医縺ｪ繝輔ぃ繧､繝ｫ繧ョ繧｣繝ｬ繧ｯ繝医Μ縺ｯ縺ゅｊ縺ｾ縺帙ｓ"
>>>s.encode("shift-jis").decode("utf-8", errors="ignore")
'そよなファイルゃィレクトリはありません'
```

「そのようなファイルやディレクトリはありません」というエラーが出ていたようだ。(文字化けをコピペしたときに一部情報を失ったようだが、ここではエラーの内容が分かれば良いので深く追求しない)
Vuetifyを使っているときによく見に行くページと情報

Vuetifyを使っているときに参照したいと思う事が同じになってきたので、まとめを作っておくことにしました。

まだまだ不完全ですが、一回公開しちゃいます！
秘伝のタレみたいにどんどん追記してオリジナルメモを完成させられればと思っています。

「これもまとめておけよ」ってことがあったらコメントお願いしますm(_ _)m

# レイアウト系

## レイアウト

```vue
  <v-container>
    <v-row>
      <v-col>
      </v-col>
    </v-row>
  </v-container>

```


https://vuetifyjs.com/en/components/grids#grid-system
使い方については別記事でもまとめました(外部サイト)
[【v-col v-row】 Vuetify2.0になってグリッドが刷新！ – レイアウトの作り方 編](https://blog.proglearn.com/2019/08/15/vuetify%e3%81%8c2-0%e3%81%ab%e3%81%aa%e3%81%a3%e3%81%9f%e3%82%88%ef%bc%81-%e3%83%ac%e3%82%a4%e3%82%a2%e3%82%a6%e3%83%88%e3%81%ae%e4%bd%9c%e3%82%8a%e6%96%b9%e3%81%8c%e3%81%a8%e3%81%a6%e3%82%82/)


## フォントの大きさ系CSS

https://vuetifyjs.com/ja/styles/typography

CSSで指定する。文字が大きい順に

```
.display-4
.display-3
.display-2
.display-1
.headline
.title
.subtitle-1
.subtitle-2
.body-1
.body-2
.caption
.overline
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241647/21915553-7bd5-2e2f-2401-a435977bd081.png)

## フォントの重さ系CSS

`font-weight-**` のクラスを追加すればOK

```
.font-weight-thin
.font-weight-bold
```

## フォントの色系CSS

https://stackoverflow.com/questions/52258669/how-to-change-the-text-color-of-a-vuetify-button

```
.***--text
.text--darken-4
```

## 隠す系CSS

```
hidden-{breakpoint}-{condition}
```
`breakpoint` は xs, sm, md, lg, xl の５種類

conditionは
- only
- and-down
- and-up

の３種類


## 色
https://vuetifyjs.com/en/styles/colors

# UIコンポーネントリンク集

## カード
https://vuetifyjs.com/en/components/cards

```vue
<v-card>
  <v-card-title>タイトルと</v-card-title>
  <v-card-text>本文と</v-card-text>
  <v-card-actions>アクションがある</v-card-actions>
</v-card>
```

よく使うプロパティ

```
<v-card
  elevation="数字" ...影の度合いを調節
  flat            ...影をなくす
  nuxt            ...nuxt-link対応
  outlined        ...影をなくして、線で囲む
  tile            ...角丸をなくす
>
</v-card
```




## フォーム
https://vuetifyjs.com/en/components/forms

## イメージ
https://vuetifyjs.com/en/components/images

```vue
<v-img
  src="https://picsum.photos/id/11/500/300"
  lazy-src="https://picsum.photos/id/11/10/6"
  aspect-ratio="1"
  class="grey lighten-2"
  max-width="500"
  max-height="300"
></v-img>
```
[メモ] nuxt generateで複数の動的ルーティング

Promise.allでスプレッド構文を使い複数のpromiseを返す。

```nuxt.config.js
  generate: {
    routes: async function () {
      const params = {
        params: {
          paginate: 4,
          page: 1
        }
      };
     const paginate = await axios.get(process.env.API + 'paginate', params)
     const paginate_res = paginate.data.data.map(paginate => {
        return {
          route: '/paginate/' + paginate.id,
          payload: {paginate}
        }
      })
      const article = await axios.get(process.env.API + 'posts/all')
      const article_res = article.data.data.map(article => {
        return {
          route: '/article/' + article.id,
          payload: {article}
        }
      })
      return Promise.all([paginate_res, article_res]).then(values => {
        return [...values[0], ...values[1]]
      })
    }
  }
```
【Rails】Time.currentとTime.nowの違い

Railsアプリの開発過程で、現役エンジニアの方から指摘を受け勉強になったことをシェアします。
Ruby/Rails初学者向けの記事になります。

# Time.currentとTime.nowの違い
◆`Time.current`
・currentメソッドはRailsアプリ独自のメソッド
・TimeWithZoneクラスを使用
・`config/application.rb`に設定してあるタイムゾーンを元に現在日時を取得

◆`Time.now`
・nowメソッドはRubyに元からあるメソッド
・Timeクラスを使用
・環境変数(ENV['TZ'])、もしくはシステムのタイムゾーンを元に現在日時を取得

# タイムゾーンの指定例
◆`Time.current`

```config/application.rb
config.time_zone = 'Tokyo'
```

◆`Time.now`

```
ENV['TZ'] = "Asia/Tokyo"
```

# 現役エンジニアの方から指摘されたこと
私は当初`Time.now`を使用していたのですが、`Time.current`の方が良いとご指摘を受けました。

調べたところ、`ENV['TZ']`の値はデフォルトで`nil`になっていたため、システムのタイムゾーンを参照しており、アメリカ時刻になっていました。
`Time.now`を無意識に使うと、このように予想外の時刻を参照していたりします。

`Time.current`はシステムのタイムゾーンなどに左右されないために、Railsアプリごとにタイムゾーンを指定できるように作られたメソッドです。
したがって、特別な理由が無い限りは`application.rb`にタイムゾーンを設定した上でこちらを使う方が良いと思われます。


#参考
より詳しい情報が知りたい方は、下記のQiita記事が大変参考になります。
[RubyとRailsにおけるTime, Date, DateTime, TimeWithZoneの違い]
(https://qiita.com/jnchito/items/cae89ee43c30f5d6fa2c)
GitHub PagesにReact Routerで作ったものを公開したときの何も表示されない場合とURLの直接指定対応

## はじめに

GitHub PagesにReact Routerで作ったものを公開しようとしたら、当然そうなるよねみたいなところで引っかかったメモ。

## 解決策
### 何も表示されない。

Routerにbasenameがついてなかった。
普通にやるとサブディレクトリつくのでつけないとだめだった。つけましょう。

```tsx:example.tsx
  <Router basename={process.env.PUBLIC_URL}>
```
### urlを直接指定すると404.html

ローカルで試してるときは適当なURLだと全部index.htmlにいってたのでよかったのですが、GitHub Pagesではそうならないので当然だめだった。

#### 解決策

HashRouterを使う手もあるがしかし、今回はページ内リンクもあったので面倒で断念。
その場合、404のページを自分で用意して、パラメータを作ってindex.htmlに飛ばしてやるという力技ソリューションがあるらしい。

調べてみたら作ってくれてる人がいたので、ありがたく使わせて頂きました。

> https://github.com/rafrex/spa-github-pages
MIT Licence

ありがたい。
【メモ】 Qiitaに投稿する内容について

最近になって趣味でアプリを作ってみたりし始めてから、ようやくQiitaにエントリ投稿することも増えてアウトプットする意識みたいなモノも高まってきたけど、最初は内容的にトレンドに上がってくるほど面白くも深くもないし、、、と思って結局投稿止めたり、限定共有で自分用にしとくことが多かった。

けど、アプリ開発で行き詰って、いろいろ調べてたときに感じることを解消するためにも、同じような内容・単純な内容でも一応投稿しておくべきなよな、と最近は思う。

というのも、特にiOSのアプリ開発では、主には言語でもSwiftとObjective-Cがあって、Swiftは歴史が浅いからどんどんバージョンアップが繰り返されてて、さらに開発ツールのバージョンアップ、その開発ツールを動かすMacOSのバージョンアップ、それにアプリを動かす端末のiOSのバージョンアップ、、、細かく言えばさらに各々の端末に入れてる他のツールや設定なんかもあって、そういう意味での「開発の前提」って千差万別。

っていう風に考えると、たとえ同じコトをしようとして、同じやり方でできたとしても、その結果が「この環境でこのやり方でできました」って担保できる範囲って微妙に変わってくるハズだよね、と。
（だからネット上にアウトプットするときは、なるべく「こういう環境でやってます」っていうのを明確にしておく必要があると思う）

それに、仮にその「担保できる範囲」がまったく同じに見えても、同じやり方でできたコトは”再現性がある”と言えるとも捉えられるワケで。
たまにだけど、ネット上だとみんなが「こうやればできる」って言われてるやり方なのに自分はできないことがある。そういうときにみんなが同じやり方でできてるってコトは、そこに載ってない部分で違いがあるのはどこだろう、って考え方を変えていくこともできると思う。

質問サイトだと「過去に同じ質問ありますけど」って怒られるかもしれないけど、「こうやって解決しました、こういうコト実現しました」っていうのは、同じ内容なら同じ内容なりに、違う内容なら違う内容なりに読み取り方があるだろうなぁ、というメモ。
QList のイテレータ無効化の罠

## 事の起こり

`std::list`は元のコンテナに新たな要素の挿入がされてもイテレータは無効にならない

QtのコンテナはSTLのコンテナに似せて作ってあるのだから`QList`も同様だろう

そう思っていた時期が私にもありました

そしてQtがよく使っているデータ型は`QStringList` `QVariantList` `QTestEventList`...と非常によく`QList`を使用してくるのでそれに合わせて自コードを`std::list`から`QList`に置き換えているときに事故は起こった

## Qtのコンテナって癖あるよね

[QList::iterator](https://doc.qt.io/qt-5/qlist-iterator.html)

> However, be aware that any non-const function call performed on the QList will render all existing iterators undefined. If you need to keep iterators over a long period of time, we recommend that you use QLinkedList rather than QList.

なんと（？）`QList`では要素の挿入でイテレータが無効になるようです。

なんと`QLinkedList`とかいう尤もな名前のコンテナがありました。というか`QList`はリンクリストではありませんでした
（命名の重要性！）

（まあよく考えれば添え字アクセスできる時点で気付いても良かったのかも）

## 検証コード

Qt5.13.1 msvc2017 で検証

```c++
#include <iostream>
#include <QList>
#include <QLinkedList>
#include <QDebug>

int main()
{
    std::cout << std::boolalpha;

    std::list<int> a;
//     QList<int> a;
//     QLinkedList<int> a;

    a.push_back(1);

    auto b = a.begin();
    auto e = a.end();

    a.push_back(2);
    a.push_back(3);

    qDebug() << (b == a.begin()) << (e == a.end());

    return 0;
}
```

### 結果

||begin|end|
|:-:|:-:|:-:|
|std::list|true|true|
|QList|false|false|
|QLinkedList|true|true|

はい
paizaスキルチェック標準入出力まとめ【Java編】

paizaスキルチェックで最初に躓く入力と出力が思い通りにできない問題を解決するためにそれらをまとめておきます。
※間違っているところや改善できるポイントがあればコメントで教えてもらえるとうれしいです。

#一つの文字列
str

```Java
import java.util.*;

public class Main {
    public static void main(String[] args) {
        /* 入力値の読み込み */
        Scanner sc = new Scanner(System.in);
        
        /* strの取得 */
        String str = sc.nextLine();

        /* 出力処理 */
        System.out.println(str);
    }
}
```

#一つの整数
n

```Java
import java.util.*;

public class Main {
    public static void main(String[] args) {
        /* 入力値の読み込み */
        Scanner sc = new Scanner(System.in);
        
        /* strの取得 */
        String n_s = sc.nextLine();
        int n = Integer.parseInt(n_s); //整数型に変換

        /* 出力処理 */
        System.out.println(n);
    }
}
```

#n個の整数
n
n1 n2 n3 ...

```Java
import java.util.*;

public class Main {
    public static void main(String[] args) {
        /* 入力値の読み込み */
        Scanner sc = new Scanner(System.in);

        /* nの取得 */
        String n_s = sc.nextLine();
        int n = Integer.parseInt(n_s); //整数型に変換

        /* n1 n2 n3 ...の取得 */
        //空白区切りに文字型で要素ごとに配列に分割
        String[] datas_s = sc.nextLine().split(" ");
        //要素を整数型に変換
        int[] datas = new int[datas_s.length];
        for(int i = 0; i < datas_s.length; i++){
            datas[i] = Integer.parseInt(datas_s[i]);
        }

        /* 出力処理 */
        System.out.println(n);
        System.out.println(Arrays.toString(datas));
    }
}
```

#n行の整数
n
1n1 1n2 1n3
2n1 2n2 2n3
3n1 3n2 3n3
...


```Java
import java.util.*;

public class Main {
    public static void main(String[] args) {
        /* 入力値の読み込み */
        Scanner sc = new Scanner(System.in);
        
        /* の取得 */
        String n_s = sc.nextLine();
        int n = Integer.parseInt(n_s); //整数型に変換
        
        /* 出力処理 */
        System.out.println(n);
        
        /* の取得 */
        int[][] datas = new int[10][10]; //データ数によって書き換える
        
        for(int i = 0; i < n; i++){
            //文字型で要素ごとに配列に分割
            String[] datas_s = sc.nextLine().split(" ");
            //要素を整数型に変換
            for(int j = 0; j < datas_s.length; j++){
                datas[i][j] = Integer.parseInt(datas_s[j]);
            }
            
            /* 出力処理 */
            System.out.println(Arrays.toString(datas[i]));
        }
        
    }
}
```
（訳読ノート）ECMWFにおけるNetCDF/CF：利用状況、管理および展望

2019-09-19/20 の [WMO Workshop on NetCDF CF conventions for WMO data exchange](https://wiswiki.wmo.int/tiki-index.php?page=CF-workshop) において、ECMWF の Sebastien Villaume により発表された資料 http://wiswiki.wmo.int/tiki-download_file.php?fileId=5752 の概要です。

* netCDF や CF とは何ですかという人は[以前書いた概説](https://qiita.com/e_toyoda/items/374e32f9de4e3acefb9c)をごらんください。
* GRIB とは何ですかという人は[以前書いた概説](https://qiita.com/e_toyoda/items/ce7497e1a633b16f1ff1)をご覧ください。
* 全訳ではありません。図版はパクると怒られそうなので本家PPT見てください。

# p2. ECMWFにおける利用状況

* そんなに使われていない
* MARSアーカイブに既に WMO 通報式 GRIB 又は BUFR によるデータが300ペタバイトもある
* 長期保存アーカイブをnetCDF対応させるのは難しい

# p3. 海洋データは例外

* 海洋モデルNEMOは三極座標という特殊な格子を使っており、もともとGRIBではない
* だけどnetCDFで効率的に扱えるというわけでもない
* 長期保存アーカイブにもっていくときには経緯度規則格子に補間している

# p4. Copernicus対応ではnetCDFを使う

* C3S, CAMS, CEMS というサービスを実施
* ECMWF外部から受領するデータはほとんど netCDF
    * 受け入れるデータを標準化するため、CF に由来するプロファイルを ECMWF で作っている
* ｛訳すのが難しい文｝ Copernicus ユーザはおおむね技術水準が低い「一般の」ユーザ（気象界の外という意味であろう）なので netCDF を希望する

# p5. The ECMWF NetCDF "profile"

* CFの一般原則を採用
* CFで任意とされている要素を一部必須化
* いくつかの望ましくない機能を禁止
* 多数のメタデータ記載方法がある場合に一つを勧告
* メタデータの indexing および aggregation を助長するように設計
    * {訳注：逐次刊行又は１ファイルには格納しきれない巨大なデータセットを多数ファイルの集合で表現することがしばしば行われるので、それを一体的にアクセスできるようにするのが aggregation, そのために個々のファイルにインデックスを与えておくのが indexing と思われる}
* ファイル内容を理解するために必要な情報をファイル名に記載しない
* 可能な限りすべてのデータセットに適用できるよう一般的に

{訳注：このような活動はCF管理パネルにとって面白くない分派活動とみなされているようだが、以下に見るように必要に迫られているので現業機関としては頑張らねばならない}

# p6. 時空間座標

{わりかしあたりまえの判断}

# p7. 時間：時間軸はただ１つだが時間座標はいくつか設ける

{TBD。重要}

# p8～12 やりたいことの図示

# p13. データ変数

# p14. 他の種類の座標または概念の必要性

* ｛時空間｝以外の、順序付きリストまたは順序無し集合の座標を定義している
* たとえば
    * アンサンブルメンバー
    * 再予報モデル日付またはバージョン
    * モデル出所　｛訳注：おそらくグランドアンサンブル｝

# p15. ECMWFで我々はどこにいこうとしているか：我々に必要なもの

* 多様な時間概念のエンコード方法の改善
    * 単にCFを使っているだけでは、あるファイルの中身が解析なのか、予報なのか、再予報なのか、これらの集合なのか、あるいは何かほかのものなのかを知ることが容易ではない
* 標準名 standard_name 表の一貫性の改善
    * いくつかの標準名は名前が長すぎるし、しばしば後処理や符号規約などを含んでい｛て物理量の識別という理念を逸脱してい｝る
* 属性 cell_methods を排していくつかの属性の集合、または外部のダミー変数に張り付けた属性で表現しなおす
    * 複雑または多種の後処理の記述として長い｛複雑な構文の｝文字列を使うのは機能しない

# p16～20 提言

｛規則類のレイヤ構造を示した図をならべて、CFのデータモデルはいただきつつ、統制語彙 controlled vocabularies はCFとWMOで独立させてWMO側で必要なものを入れさせてもらうという話のようである。GRIBとの移行を考えるとソフトウェア開発的にはたいへん素直（標準名表をさしかえるだけ）な話だが、席上CF側はそうとう嫌がったと聞く。まあそりゃあそうだわな。｝

# p.21 心配

｛実際はそれ以前で揉めているのだが、上記提言が成ったとして｝

* WMO 側では新しい構造や機能（それは大抵実に汚い）を必要として、CFの構造のレベルの改正が必要になる
    * CFの思想やデータモデルと矛盾なくできるなら良いが
    * そうじゃなかったら

# p.22 Concluding Remarks

* ECMWF NetCDF プロファイルは新しいユニバーサルな規約を作ろうとするものではない
    * XKCD の How Standards Proliferate? https://xkcd.com/927/ という有名な漫画が貼られている
    * ｛訳注：マネジメントレベルの問題意識としては、世界システムとして転用して管理事務を押し付けるのは受けられないというメッセージがあるだろう｝
* ただしWMOプロファイルの少なくとも数値予報部分を構築する際のたたき台くらいにはなるかもしれない
* 数値予報コミュニティの基礎的な概念をすべてカバーしたと言えるにはいくらかの仕事がまだなされねばならない
Docker上のrailsにホストからアクセスできない

`rails server` で起動したコンテナ上のrailsにアクセスできなかった。
`rails server -b '0.0.0.0'` と接続元ホストの制限を無くすことで、ホストOSからコンテナのrailsにhttpでアクセスできた。
Anaconda環境でjupyterのカーネルを追加する

#はじめに
jupyterでコードを動かす際、仮想環境ではPython3.6を使用しているのに、デフォルトでpython3.7がインポートされていたため、仮想環境のカーネルを追加することにしました。

#試したこと1(失敗例)
まずはじめに試したのはjupyterの設定ファイルにanacondaの仮想環境パスを追加すると言った方法である。[こちらのサイト](https://kazusa-pg.com/jupyter-notebook-use-virtual-env-kernel/)を参考にして実行してみたがうまく行きませんでした。
これがうまくいけば、新しく仮想環境を追加したとしても自動で追加されていくため解決策があればご享受ください。
#試したこと2(成功例)
次に試したのは、仮想環境を一つずつ追加していく方法です。
こちらはうまくいったので手順を説明します。

1. 仮想環境にactivateする(仮想環境を作成してない場合は[こちら](#補足事項))   
```$conda activate 仮想環境名```
2. カーネルリストの表示(追加してない場合表示されません)  
```$jupyter kernelspec list```
3. カーネルの追加  
```$ipython kernel install --user --name=環境名 --display-name=環境名```
4. カーネルリストの表示(表示されれば成功)  
```$jupyter kernelspec list```

#補足事項
- anacondaによる仮想環境の作成(jupyterも同時にインストール)  
```$conda create —name=環境名 python=3.6 jupyter```
- 作成した仮想環境の確認  
```$conda info -e```
- カーネルの削除  
```$jupyter kernelspec uninstall カーネル名```

#おわりに
今回はanacondaによるjupyterのカーネル追加の方法についてまとめました。
カーネルを追加しておくととても便利なのでおすすめです。
また、失敗例に関して、いい方法や参考サイトがありましたら教えていただけるととても助かります。
以上です。ありがとうございました。
apt-get: not foundやyum: not foundが出る

# Linuxのディストリビューションが違うとコマンドも違う

### Ubuntu（Debian系）
`apt`や`apt-get`を使えるのはDebian系のLinux ディストリビューションです。
`apt-get`を使っている方は`apt`が推奨されているので`apt`を使いましょう。

### CentOS（Red Hat系）
`yum`が使えます。

### Alpin Linux
BusyBoxとmuslをベースにしたLinuxディストリビューション
`apk`が使えます。

## まとめ
自分が使っているOSは何かを把握して使いましょう。
以前私が書いたこちらの記事の補足資料として作製しました。
https://qiita.com/HorikawaTokiya/items/a2a174680d7dd759ccae
ViewPagerの中のFragmentが表示されたタイミングで処理を実行したい

タブ切り替えによる画面表示で**ViewPager + FragmentPagerAdapter**を使ったので、そのときに調査した部分を共有します。

## 問題
ViewPagerでFragmentを切り替える処理を実装するときに、Fragmentが表示されたタイミングで実行したい処理があるとします。

Fragmentのライフサイクルの中にある`onResume`などで処理を実行しても良さそうですが、Fragmentが表示されたタイミングで次に遷移可能な隣のFragmentも同時に生成されてしまうので、この方法だとうまくいきません。

例えば2ページ目に遷移したとします。

```
I/SampleAdapter(24960): getItem[3]
I/SampleFragment(24960): <init>:[0]
I/SampleFragment(24960): onCreate:[3]
I/SampleFragment(24960): onCreateView:[3]
I/SampleFragment(24960): onResume:[3]
```

この場合は、2ページ目への遷移と同時に3ページ目のFragmentを準備するための処理が動くために、この時点で3ページ目のFragmentの`onResume`まで呼ばれてしまいます。

[ViewPager＋FragmentPagerAdapterにおけるFragmentのライフサイクル](https://iti.hatenablog.jp/entry/2014/12/24/094735)


## 解決策
FragmentPagerAdapterのコンストラクタに`BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT`というフラグを渡します。

ちなみに、これまではFragment表示時のイベント実行に`setUserVisibleHint`が使えていたのですが、fragment-1.1.0-alpha07でdeprecatedになりました。

```kotlin:SampleAdapter.kt
class SampleAdapter(fm: FragmentManager) : 
FragmentPagerAdapter(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {
    override fun getItem(position: Int): Fragment {
        return SampleFragment.newInstance(position)
    }

    override fun getCount(): Int {
        // ...
    }
}
```
`BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT`を指定することで、呼び出される側のFragmentがオンスクリーンになったタイミングで`onResume`が呼ばれるように制御することができるようになります。
残りの表示されていないFragmentは、`onStart`まで進んでいる状態です。


呼び出される側のFragmentはこんな感じです。

```kotlin:SampleFragment.kt
class SampleFragment : Fragment() {
   // ...
   override fun onResume() { 
       super.onResume() 
       // オンスクリーン時に実行したい処理 
     } 

   // ...

   companion object { 
       fun newInstance(position :Int): SampleFragment { 
           return SampleFragment() 
       } 
     }
}
```

あとはFragmentの`onResume`にFragmentが表示されたときに実行したい処理を書けば、ViewPagerでページを切り替えたタイミングでの処理を実現することができます。

## 参考
- [setUserVisibleHintのdeprecatedとsetMaxLifecycle](https://medium.com/@star_zero/setuservisiblehintのdeprecatedとsetmaxlifecycle-98d98d9aaacf)
- [Android Developers | FragmentStatePagerAdapter](https://developer.android.com/reference/androidx/fragment/app/FragmentStatePagerAdapter.html#BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT)
JavaアプリケーションからTeradataにアクセスする

Teradata JDBC Driverを使って、JavaアプリケーションからTeradataに接続する際の覚え書き。

### 環境
- OpenJDK (11.0.3)
- Gradle (5.6.2)
- Teradata JDBC Driver (16.20.00.12)

### Teradata JDBC Driverの取得
[こちら](https://downloads.teradata.com/download/connectivity/jdbc-driver)からドライバをダウンロードします。なお、ダウンロードにはTeradata Downloadsのアカウントが必要です。

### Driverパッケージのプロジェクトへの追加

取得したterajdbc4.jarを`{PROJECT_ROOT}/libs`以下に配置します。
さらにbuild.gradleのdependenciesブロックに以下を追記して、依存パッケージとして追加します。

```
dependencies {
    implementation files('libs/terajdbc4.jar')
}
```

(※ 16.20.00.11より前のバージョンではtdgssconfig.jarも配置・追記する必要があります)

### DataSourceの定義・クエリの発行

[DataSource](https://docs.oracle.com/javase/jp/8/docs/api/javax/sql/DataSource.html)の実装であるTeraDataSourceを設定し、コネクションを取得、クエリの実行を行います。
(DriverManagerを使ってももちろん書けますが、DataSourceを使うほうが推奨されます。)

雑に書いたコードが以下。

```java
import com.teradata.jdbc.TeraDataSource;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

public class Application {

    public static void main(String[] args){

        TeraDataSource teraDataSource = new TeraDataSource();
        // 環境に合わせて設定する
        // パラメータの詳細:  https://teradata-docs.s3.amazonaws.com/doc/connectivity/jdbc/reference/current/jdbcugjp/jdbcug_chapter_2.html#BABJIHBJ
        teraDataSource.setDSName("your.teradata.host");
        teraDataSource.setUser("johndoe");
        teraDataSource.setPassword("XXXX");
        teraDataSource.setLOGMECH("TD2");
        teraDataSource.setTMODE("ANSI");
        teraDataSource.setCHARSET("UTF8");
        teraDataSource.setENCRYPTDATA("ON");

        String query = "SELECT id FROM yourdb.yourtable";

        try (Connection conn = teraDataSource.getConnection();
                Statement st = conn.createStatement();
                ResultSet rs = st.executeQuery(query)){

            while (rs.next()) {
                // ResultSet#getXXXのcolumnは1-based indexなことに注意
                System.out.println(rs.getInt(1));
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}
```

これでTeradataのtableに対してSELECTを実行できました。

### 参考
https://docs.gradle.org/current/userguide/dependency_types.html#sub:file_dependencies
https://teradata-docs.s3.amazonaws.com/doc/connectivity/jdbc/reference/current/jdbcugjp/jdbcug_chapter_2.html
https://docs.oracle.com/javase/jp/8/docs/api/javax/sql/DataSource.html
webarenaでubuntu その53

#概要

webarenaでubuntu18.04やってみた。
練習問題やってみた。

#練習問題

jsonで、アクセスカウンターを表示、せよ。

#mysqlでテーブル作る。


```
create table counter(id varchar(20) NOT NULL PRIMARY KEY, atime timestamp NOT NULL, cnt int(10));
```

#insetする。


```
insert into counter values('test', '2019/10/03 12:00:00', 0);
```

#phpで、アクセスカウンターをjsonで返す。


```
<?php
	header("Access-Control-Allow-Origin: *");
	header("Content-Type:  application/json");
	$id = "test";
	$db = new PDO("mysql:host=localhost;dbname=mydb;", 'user', 'pass');
	if (!$db)
	{
		print "connect error!! <br>";
	}
	else
	{
		$sql = "UPDATE counter SET cnt = cnt + 1 WHERE id='$id'";
		$db->query($sql);
		$sql = "SELECT * FROM counter WHERE id='$id'";
		$rs = $db->query($sql);
		if (!$rs)
		{
			print "Error in database!! 0 <br>";
			print $sql;
		}
		else
		{
			$userData = array();
			while ($row = $rs->fetch())
			{
    			   $userData[] = array('count' => $row['cnt']);
			}
			echo json_encode($userData);
		}
	}
?>

```

#成果物

http://embed.plnkr.co/Uec3FkbSe2qwm3mTZT8B/

以上。
アプリにバンドルした.realmをiOSシミュレーターでは直接開けるのにiOS実機で開けない。


とりあえず解決としてはConfigurationのreadOnlyをtrueにする。

```
    let config = Realm.Configuration(fileURL:~~~~)
        config.readOnly = true
```

そもそもバンドルディレクトリはread only。
変更可能にしたいときはdocumentsディレクトリなどにコピーしてから開かなくてはならない。
逆にシミュレーターだと開けてしまうのは、Macの方の設定に依存しているからということらしい。

参照：[Unable to open bundled realm file on real device #4809](https://github.com/realm/realm-cocoa/issues/4809)
sedコマンドのオプションを一つにまとめてはいけない

##経緯
サーバのメンテナンスをしていたら/etc/hostsの隣に/etc/hostseという謎のファイルがあることに気付く。
しかしネットで調べてもそんなファイルの情報は出てこず、疑念が深まる。

##調査
中身を見てみると、/etc/hostsと微妙に違う部分あり。
「昔のファイルっぽい。でもバックアップ取った記憶ないな…」

なんかのデーモンが自動でバックアップを取ったのかなと思ったが、そもそもそんな設定を入れた記憶もありません。

ファイル更新日を見てもやはり昔のファイルのようです。

そもそもこのファイルを更新した時にどのようなコマンドを使ったっけ、ログを確認してみます。

```:bash
sed -ie "s/192.168.1.1 /192.168.1.10/g" /etc/hosts    #ipアドレスを変更
```

ふむ、sedコマンドを用いてipアドレスを置換変更しているのか。**(知っている人ならここで気付く)**

sedのバージョンは GNU sedの4.2.1。
ここで指定している-iオプションは上書き保存を指定しています。
-eは""内のスクリプトコマンドの指定です。これは省略可能ですが、複数スクリプトを指定する場合は全てのスクリプトに対して前置しなければならないため、慣例としてつけているようです。

-iで指定した上書きの段階でバックアップがとられているのかな？と思い、マニュアルを見てみます。

>-i[SUFFIX]
--in-place[=SUFFIX]
This option specifies that files are to be edited in-place. GNU sed does this by creating a temporary file and sending output to this file rather than to the standard output.
<中略>
<b>If no extension is supplied, the original file is overwritten without making a backup.
Because -i takes an optional argument, it should not be followed by other short options:</b>

<b>「SUFFIXの指定がなければそのまま上書きするが、-iの後は引数として認識するからオプションを続けたらだめだよ」</b>

タイトル回収です。マニュアルの続きにはご丁寧に-iオプションの前置後置での挙動の変化が書かれていました。

つまり、-ieオプションの場合、
①-iで上書きが指定された。
②続くeは引数として、それを付与したファイルをバックアップとして保存した。

という挙動になっていたみたいです。だからeが付いていたのか…
調べても出てこないわけだ


とはいえ、-eの直後にはスクリプトを記載しなければならず、-eiとも記載できないため、
そのまま上書きする場合は、「sed -i -e <スクリプト> <ファイル>」と個別に指定するのが正解のようです。

あえてバックアップを保存したい場合は

```:bash
sed -i ".org" -e <スクリプト> <ファイル>    #<ファイル名>.orgというバックアップを取って変更を上書き
```
といった使い方ができるということですね。

とはいえ、/etc内に似たファイル名があるとシステムの挙動がおかしくなる場合があるので、sedを使う場合は気をつけなければいけませんね。

##結論
<b>sedコマンドのオプションを一つにまとめてはいけない</b>

##参考
GNU sedマニュアル
https://www.gnu.org/software/sed/manual/sed.html
PyMolで分子の末端にアミノ酸を追加する。

# 概要
分子の末端にアミノ酸を追加する方法を調べてもなかなかヒットしなかったのでメモする。
# 環境
macOS Mojave 10.14.6
PyMol 2.3.1

## 末端のアミノ酸の確認
末端のアミノ酸の残基番号と、C末端かN末端かを調べる。

## アミノ酸の追加
[ここ](https://sourceforge.net/p/pymol/mailman/message/36313963/)を参照した。
例として残基番号123のC末端にアラニンを追加する。

```
cmd.select('c_123', 'resi 123 and name c')
editor.attach_amino_acid('c_123', 'ala')
```
「ssh hoge」と叩くだけで接続できるようにする方法とか


秘密・公開鍵作成については割愛。


##①基本

`ssh -i ~/.ssh/id_rsa -p ポート番号 ユーザ@ホスト`

`~/.ssh/id_rsa`は秘密鍵の場所。


##②ssh hogeだけで接続できるようにする

configに設定を書いておくと楽できます。
hogeの部分は適当に置き換えてください。

```sh:~/.ssh/config
Host hoge
    HostName ホスト
    User ユーザ
    Port ポート番号
    IdentityFile ~/.ssh/hoge.key
    ServerAliveInterval 60
```

これを設定しておくと、

`ssh hoge`

ってやるだけで、①基本と同じことできます

参考:https://qiita.com/passol78/items/2ad123e39efeb1a5286b


##randomartを表示する

~/.ssh/configいじったなら、
ついでに以下の一行を書いておこう

```sh:config
# ssh接続するたび、randomartを表示する
VisualHostKey=yes
```


##Could not resolve hostname HOST: nodename nor servname provided, or not known

①や②をやったときにでたエラーメッセージ
読んでのごとく、HOSTが解決できないので
タイポか、DNS周りの設定を見直そう。
GMOコインのAPI用のGo言語のライブラリを作った

# はじめに
比較的新しいAPIでライブラリなどがほとんどなかったので作ってみた。

# 実装
https://github.com/ijufumi/gogmocoin

見て、触ってみたら何となく分かるかも。

# 最後に
実験的な実装が多いのでダメなところが散見されるかも。
気になるところあれば、ぜひプルリクを！
#Rails - rspec の リクエストのテストで Controller 内の params が取得できない -> CONTENT_TYPE: application/json を指定して params は JSON で渡す

```rb
require "rails_helper"

RSpec.describe "/location", type: :request do
  subject { post '/location', headers: { CONTENT_TYPE: "application/json" }, params: { latitude: 100.1 }.to_json }

  it do
    expect(response).to have_http_status("200")
  end
end
````

```rb
params[:latitude]
# => 100.1

params.keys
=> ["latitude", "controller", "action", "some_action"]
```


```rb
require "rails_helper"

RSpec.describe "/location", type: :request do
  subject { post '/location', params: { latitude: 100.1 }.to_json }

  it do
    expect(response).to have_http_status("200")
  end
end
````


```rb
params
# => <ActionController::Parameters {"{\"latitude\":100.1}"=>nil, "controller"=>"some_controllers", "action"=>"some"} permitted: false>

params.keys
=> ["{\"latitude\":100.1}", "controller", "action"]
```


# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2549








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Redmineでカスタムクエリをコピーする方法

# Redmineでカスタムクエリをコピーする方法

似た様なカスタムクエリをわざわざ1から作成するなんて面倒。  
というわけでコピーは以下のように行う。

## ダメな方法
1. 既存のカスタムクエリを表示
2. 「編集」リンクを押下
3. カスタムクエリの内容を修正して「保存」ボタンを押下

こうすると既存のカスタムクエリが修正されてしまう。
内容修正時にクエリの名前を変えても同じ。

## コピーする方法
1. 既存のカスタムクエリを表示
2. 一覧表示されている画面でフィルタやオプションの内容を修正
3. 「適用」リンクを押下
4. そうすると「編集」ではなく「保存」リンクが表示される
5. 「保存」リンクを押下
6. カスタムクエリの内容を確認（必要に応じて修正）して「保存」ボタンを押下

こうすると新しいカスタムクエリが作成できる。
【Swift】WebViewの位置情報利用許可ダイアログに関する言語設定

自社で開発しているWebサービスをWKWebViewで表示する独自アプリで利用しようとしたところ、GoogleMapを表示している画面で位置情報の利用許可を求めるダイアログが表示されたんですが、それがなぜか英語で表示されるため、日本語に表示されるよう対応しました。

####開発環境
端末:MacBook Pro/MacOS 10.14.5(Mojave)
Xcode:10.2.1
Swift:5

####やったこと
WebViewで位置情報サービスを利用した画面を表示する際に求められる確認ダイアログが英語表記だったため、日本語表記になるよう対応。
（画面イメージは下記「実装 - 画面イメージ」参照）

####実装
#####画面イメージ
対応前
![WS000001.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126315/5aaf29d4-0b59-dab0-e316-71580757564d.jpeg)

対応後
![WS000002.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126315/ce62a36e-3b10-50dd-db23-34aa5e843b1f.jpeg)

#####設定画面
対応としては、下記１手順のみでした。

・info.plistに「Key:Localizations」を追加し、「Value:Japanese」の要素を追加する
![058ea91a-8281-c01d-f067-e1d222adcd6b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126315/4aa4255e-651a-51a7-aca9-35563673e57d.png)


####参考
[iOS]UIWebViewにGoogleMap経路表示した際のアラートが何故か英語
https://ameblo.jp/tw-koba/entry-11888390831.html
Android NDK の主な変更点

NDK 各バージョンの主な変更点。 
最新版を使うのが望ましいだろうが、サポートバージョンなどの、様々な制約から、NDKの古いバージョンを使わざるを得ない場合に、どれを使うかの指針とするために、サポート終了情報をメモする。

## r23 LTS (2021/08)
* 非Neon端末をサポートする最後のバージョン
* android 16, 17, 18をサポートする最後のバージョン

## r22b (2021/03)
* 

## r21e LTS (2021/01)
* 32 ビット Windows のサポートの終了

## r20b (2019/06)
* Android Q APIの追加

## r19c (2019/01)
* スタンドアロン ツールチェーンが不要になった。

## r18b (2018/09)   
* GCC削除
* gnustl、gabi++、stlport は削除
* ICS（android-14 と android-15）に対するサポートは終了

## r17c (2018/06)
* ARMv5（armeabi）、MIPS、MIPS64 に対するサポートは終了

## r16b (2017/12)
* 非推奨のヘッダーが削除

## r15c (2017/07)
* Android 2.3（android-9）はサポートは終了   


### References
* [Official NDK変更履歴](https://developer.android.com/ndk/downloads/revision_history.html)
Python Pillow 画像読み込み

## 背景
画像処理のソフトウェアは大きく分けて２つある。
・OpneCV (C++, Python)
・Pillow (Python)

てっきり、Pillowにも画像読み込み方は種類があると思っていた。
Pillowでグラースケール画像をRGB画像で読み込みたかった。

下記の方法で回避することにする。
## 参考コード


```py:pillow_RGB_to_GRAY.py
#Pillowの画像読み込みモジュールImage
from PIL import Image

#入力画像 (グレースケール)
img = 'image.jpg'

#Pillowで画像の読み込み
img_GRAY = Image.open(img)

#画像形式をチェック
print("img_GRAY.mode", img_GRAY.mode)

#グラースケールをRGBに変換
img_RGB = img_GRAY.convert('RGB')

#画像形式をチェック
print("img_RGB.mode", img_RGB.mode)

```

## 参考文献
[Pillow (PIL) - 画像の情報を取得する方法](http://pynote.hatenablog.com/entry/pillow-get-image-infomation)
[Pillow (PIL) - 画像のチャンネル、画素値を操作する方法](http://pynote.hatenablog.com/entry/pillow-operate-channels)
vue.js ダイレクトにURLに来たら beforeEachで認証判別されないのを防ぐ

vue.js で ログインしている場合のみ、利用できるURL。

```app.js

router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth) && !app.loggedIn) {
        next({ path: '/login', query: { redirect: to.fullPath }});
    } else {
        next();
    }
});

```

これは、同一ドメイン内で移動してきた場合のみ動作するが、
いきなり http://hogehoge.com/raumen にアクセスされたら動作しない。

ということで対応。

```app.js

        //ダイレクトにこのURLに来た時に、ログイン画面へ飛ばす
        guard(){

            if(!this.$root.user.id){

                this.$message({
                    message: 'ログインが必要です',
                    type: 'warning',//or 'warning'
                    customClass: 'message-margin'
                });
                
                this.$router.replace({
                    path: "/login?redirect=" + this.$route.fullPath
                });
            }

        },

```

```notice.vue

created() {

    //ログインしてなきゃ、ログインしてねページへ。
    this.$root.guard();

},

```

こんな感じ。
bootstap-vueで一定時間経過すると色が変わるあいつをつくってみた

#概要
 javascriptのお勉強がてらに、既存のページをVue.js化して遊んでいますが、その過程でホームページのお知らせよくあるあいつを作ってみました。
勉強記録と忘備録を兼ねてここに公開します

![色が変わるやつ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181107/4c9fb3f6-ecf8-d745-84d2-4263a5df3298.png)

#つかったもの
- [Vue.js](https://jp.vuejs.org)
- [bootstrapVue](https://bootstrap-vue.js.org)
- [dayjs](https://github.com/iamkun/dayjs)

#できたもの
```vue:DateBadge.vue
<template>
  <b-badge :variant="Valobject(date)">{{ date }}</b-badge>
</template>
<script>
//一週間過ぎたら色を変えるすごいやつだよ
//dayjsを使っているので利用する場合はいれてね
export default {
  name: "DataBadge",
  props: {
    date: String
  },
  methods: {
    Valobject(date) {
      return this.$dayjs(date).isBefore(
        this.$dayjs()
          .subtract(1, "week") //期間を変えたいならこの辺いじってね
          .format("YYYY/MM/DD")//日付の表示形式
      )
        ? "lighten"
        : "danger";
    }
  }
};
</script>
```
Golangでファイルをアップロードする時にContent-Typeを指定する方法

# はじめに
個人的なメモが目的。

# よくある実装
```golang
body := new(bytes.Buffer)
multipartWriter := multipart.NewWriter(body)
fileWriter, _ := multipartWriter.CreateFormFile(fieldName, fileName)

_, _ = io.Copy(fileWriter, file)
```

ただ、これだとファイルを受け取った側で `Content-Type: application/octet-stream` となってしまい、Content-Typeを判断することができない。

# 解決案
Golangの内部の実装を参考にやってみた。

```golang
body := new(bytes.Buffer)
multipartWriter := multipart.NewWriter(body)

contentType := func() string {
	defer func() {
		_ = file.Seek(0, 0)
	}()

	fileData, err := ioutil.ReadAll(file)
	if err != nil {
		return "application/octet-stream"
	}

	return http.DetectContentType(fileData)
}()

header := make(textproto.MIMEHeader)
header.Set("Content-Disposition",
fmt.Sprintf(`form-data; name="%s"; filename="%s"`, fieldName, fileName))
header.Set("Content-Type", contentType)
part, _ := multipartWriter.CreatePart(header)

_, _ = io.Copy(part, file)
```

# 最後に
他にいい方法あったらコメントお願いします。
【FileMaker】チェック項目をワンタップで見た目よくサクッとチェックしたい

FileMakerで複数選択肢がある場合は値一覧を実装することが多いですが、いちいち選択肢から選択するほどでもないけど見た目的にも選択したことをわかるようにしておきたい、というケースの実装例です。
iPadのFileMaker Go内でFileMakerアプリを動かしていると、画面下によくスクロールで選択肢が出てくることがありますが、「あれ、うざいです」と言われることがあります。
ですよねーと言いつつ、頭はフル回転なんですが。

今回は、「○△×」の選択肢を選択しやすくかつパッと見て何が選択されているかをわかりやすくしてみます。

# 動き
動きは、単純に選択したら色が変わります。
「●」選択
<img width="594" alt="●を選択" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/3989579e-c2fb-e666-e409-488ca60c4fec.png">

「なし」選択
<img width="560" alt="「なし」を選択" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/8ce464b4-0efd-3443-4e0b-4809dd24f39d.png">
「なし」をあえて設定したのは、入力忘れでないことを強調するためです。

# 実装
これらの選択には、ボタンバーツールを活用しています。
<img width="511" alt="ボタンバーツール" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/bc12cc45-a356-c145-4a81-63c8755441a8.png">
このボタンバーツールは色々な場面で使えて、よくページ遷移やレコード遷移、ボタンが散らからないようにセットにしておく場面などでよく実装します。
今回は、これをチェック項目として使うわけです。
なので、ずらっとチェック項目がページ内に並ぶことがあります。

例えば、こんな感じで、部屋の退室時にチェックする項目など。
<img width="663" alt="退室チェック" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/4eeafc1f-7edc-6bd3-46bc-3fcb6542e937.png">

今回のチェック項目は3つなので、3つのチェックフィールドを作成しました。
<img width="309" alt="チェックフィールド.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/be58d032-5dd3-c918-3742-b18197992c68.png">

ボタンバーツールの一つ一つにチェック項目の値を設定していきます。
<img width="948" alt="チェック項目の値セット" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/59078554-32f1-32cb-4684-103f0eaad5bd.png">

ボタンバーツールはクリックした時に色を変更できますが、クリックしたという動作がないと変更できません。
これだけだと、選択した値の色を変更し続けられないので、条件付き書式を活用します。
<img width="507" alt="条件付き書式" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/ff77f889-4b73-49d0-75e9-a54997132efa.png">

条件付き書式は、計算式を指定します。
<img width="867" alt="スクリーンショット 2019-10-03 10.26.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/d1b94f3e-4cc4-03c4-2b1c-dc2ffa0e0fcf.png">
文字色を変えてもいいし、太字にしてもいいし、状況に応じた設定をしてください。
見た目、大事ですよ。

#メリット、デメリット
今回の実装で、メリットとデメリットがあります。

## メリット
メリットは、見た目的に(割と)誰でもできるようになることです。
見た目で判断できれば、何を押せばいいかもわかりやすく、かつ周りの人にもどこまで済んで何が終わっていないのかが一目瞭然になります。

## デメリット
デメリットは、ボタンバーのボタンそれぞれに設定をしていくのが単一作業なので設定のミスが多くなりがちです。
フィールドのコントロールスタイルでチェックボックスセットやラジオボタンセットなどを活用すれば1つの設定で終わりますのでさほどミスる確率は低いでしょう。
<img width="261" alt="フィールドのコントロールスタイル" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/69b0ce47-be95-8f19-b30e-66a112c37935.png">
でも、これがデメリットになることもあるのです。

## メリット・デメリットをわかって実装する
つまり、ユーザにはメリットがあり、開発する側にはちょっとめんどくさいというデメリットがあります。

簡単に実装できるチェックボックスセットやラジオボタンセットが見た目的にわかりやすいか、というと、それだけだとインパクトに欠けます。
作業の効率化の第一歩としてはチェックボックスセットなどでいいでしょう。
世の中にはチェックボックスセットで十分な人や場面もありますが、同じような文字が並んでいると混乱する人もいます。
そうしたアクセスビリティやユーザビリティを考えると、文字以外の見える化を進めていくことが次の一歩になります。

そして、クライアントとユーザは違います。
クライアントがチェックボックスセットで十分、と言っても、実際に使うユーザが「これではチェックしずらい」というのであれば、次の一歩としてボタンバーツールなどわかりやすさを重点に改修してみてください。

では、FileMaker Lifeをお楽しみください。
PHP開発 Composerを使ってみる！

##はじめに
これから何回かに分けてPHPの開発環境を整えていきたいと思いますが
Composerを入れて開発環境を整えていきます！
Composerを入れることで
・必要なモジュールだけを選んでいれるのが楽になる
・入れたモジュールがすぐ確認できる
・1つのファイルに記述するだけで勝手に引っ張ってきてくれる
などメリットが多いので、まずはComposerを入れていきます！

##環境
Windows10
XAMPP

##環境構築
###Xamppを入れる！
[Xampp公式サイト](https://www.apachefriends.org/jp/index.html)
Windows向けXAMPPをダウンロードしてきてインストールします。
xampp-windows-x64-7.3.9-0-VC15-installer.exe
こんな感じの名前のものがダウンロードできると思うので実行しましょう。
インストールはそのままの設定でOKです。

###Composerを入れる！
[Composer公式サイト](https://getcomposer.org/)
ここからDownloadで、Windows InstallerのComposer-Setup.exeをダウンロードしてきましょう！
ダウンロードできたらさっそく実行してみます。
そのままNextでOKですが、
Settings Checkという箇所でPHPのインストール先を選択するのですが、
Xamppをインストール済みであれば勝手に選択されています！
されていなかったらBrowseから選択してください！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172553/182c0491-e2aa-4a5a-0976-7ee07c331891.png)

他画面は特に変更せずにNextでインストールOKです！

##Composerインストール確認
コマンドプロンプトかPowerShellを起動しましょう！
PowerShellであれば画面左下のWindowsのロゴマーク右クリックから起動できます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172553/04e2d267-0a25-9527-3046-0b41b3dc1557.png)
PowerShellを起動したら

```
Composer -V
```
を入力して、以下のようなバージョン表示が出ればインストール完了です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172553/81d1f59e-e347-12b8-fcd0-ec18849a5392.png)

##Composerを使ってみる！
インストールしたComposerで、さっそくモジュールを入れていきましょう！
今回はlogのモジュールである [ monolog ] を入れていきたいと思います！

先ほど開いたPowerShell上で開発を行いたいフォルダに移動します。
Cドライブ直下に今回は適当にdemoというフォルダを作っています。

```
cd C:\demo
```
移動したら以下のコマンドを打ってみましょう。

```
composer init
```
そうしたら以下のような対話式の入力が出てくるので、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172553/9f0ab2b4-e311-420a-997c-d50c6496d77a.png)
以下のコマンドをうってから

```
monolog/monolog
```
Authorでは n
あとはEnterで飛ばしていきます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172553/b1cada9e-02ba-8c24-157c-3b1aa1c5e74a.png)
そうすると
C:\demoフォルダ内にcomposer.jsonというファイルができます。
このファイルを作成することでここからモジュールをインストールすることができるようになります！

早速インストールしましょう！

```
composer install
```
これでVendorというフォルダが作成されて、モジュールがインストールできました！

次回からは今回インストールした仕組みを使ってフレームワークを入れていきたいと思います！