OmniAICreator/Qiita-1.07M huggingface dataset:
WSLでexpo startして20～30分後にネットワーク不具合が起こる現象について調べたこと

前回、[WSLでReact Native + Expo環境を作ろう](https://qiita.com/h-yoshikawa/items/610ffea888f13275cde8)という記事を書き、その末尾にも書いていたのですが、`expo start`したときに起こる謎のネットワーク不具合について調べたこと、わかったことを書いておきます。

## ネットワーク不具合
### 起こる問題
WSLで`expo start`した後、20～30分後くらいにネットワークが繋がらなくなってしまう。

どこのページにアクセスしようとしても以下のようにエラーが表示され、アクセスできません。
ここに表示されているWindowsネットワーク診断ツールを実行してみても、異常がないといわれます。
![network-error.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206877/fbac5df7-ea04-4aa9-863a-500adfefa74a.png)

CONNECTIONをTunnelにした時も、`expo start --offline`とオプションをつけた時も、同様の現象が起きます。

一応、Windows自体を再起動すれば、また繋がるようにはなるのですが、短時間の間に都度都度再起動するのはかなり手間ですし、ストレスにもなります。

### 対応策
この現象について調べていても、なかなか情報が見つけられませんでしたが、GitHubにほぼ同じ現象が報告されていたIssueを見つけました。

[expo-cli/issues - Host remains without network after a while](https://github.com/expo/expo-cli/issues/99)

ここで緩和策として、以下の手順を踏めばいいとありました。
>
I found a palliative solution not to restart the machine:
>
1 - WIN+R -> services.msc
2 - Find LxssManager
3 - Right-click -> Restart
>
This should restart the WSL service, normalizing the network.

1. Windows + R でファイル名を指定して実行の画面を出し、`services.msc`と入力してOK
![file-run.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206877/910f3023-305d-9c57-8f39-d44a84094b51.png)

2. 一覧からLxssManagerを見つける
![lxss-manager.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206877/6a103097-1060-aaac-bc55-ba040b31275f.png)

3. 右クリックを押し、再起動を実行

>
LxssManager is the service that manages the layer that communicates between Windows and Linux. Restarting it is basically equivalent to restarting Windows regarding everything that happens in WSL.

LxssManagerは、WindowsとLinuxの間で通信するレイヤーを管理するサービスらしく、これを再起動することで、Windowsを再起動したときと同じことがWSL上で起こるそうです。

この手順を踏めば即座にWSLが再起動され、ネットワークが繋がるようになります。 

### 課題
上記の手順でネットワークが復旧する...のですが、そこからまた`expo start`してしばらくすると、またネットワークが繋がらなくなります...。

>
This is likely an issue with WSL. There is an issue for this at [microsoft/WSL#2913](https://github.com/microsoft/WSL/issues/2913).

どうもこの現象はExpo-Cliというより、WSLの問題らしく、Issueが上がっているそうです。

>
Can confirm that Windows Insider Build 18890 fixes this issue.

Windows 10 Insider Build 18890では、この問題が修正されたとのこと。
調べてみると、このバージョンは2020年前半にリリース予定の大型アップデート｢20H1｣のプレビュービルドとなるそうです。
もう少しの間我慢になりますが、正式にリリースがくれば解決できそうですね。（Windows Insider Programに参加する度胸はありません...）

>
Obs: When I run the expo-cli start in CMD and then run on WSL, a network does not fail anymore....

ちなみにこんなことも書いてありましたが、CMDってことはWindows側にExpoを入れるってことなのかな？と思い、あまり入れたくないので試していません。
直接WindowsにExpo（及びNode.js）を入れてもいいという方は、そうされた方がいいのかもしれませんね。

## 参考
- [expo-cli/issues - Host remains without network after a while](https://github.com/expo/expo-cli/issues/99)
- [Windows 10 Insider Preview Build 18890がリリース - Fastリング向けFriendly Datesが終了](https://www.softantenna.com/wp/windows/windows-10-insider-preview-build-18890/)
- [Microsoft、｢Windows 10 Insider Preview build 18890 (20H1)｣をFastリング向けにリリース](https://taisy0.com/2019/05/02/109885.html)
配列の要素を取り出す・逆順に取り出す-java

```java:sample
		int[] array = new int[5];
		//宣言した配列に要素として1,10,100,1000,10000を設定

		array[0] = 1;    //配列が０番目から始まることに注意する。
		array[1] = 10;
		array[2] = 100;
		array[3] = 1000;
		array[4] = 10000; 
		
		System.out.println(array[0]); //配列の1番目の値を出力する

```

配列の宣言{}を使った方法。
配列の1番目と3番目を足した値を出力


```java:sample
		int[] array = {1,10,100};

		System.out.println(array[0]+array[2]);




		for(int i=0; i<array.length; i++) {
			System.out.println(array[i]);
		}//配列arrayの全要素を順番に出力


		for(int i=array.length-1; i>=0; i--) {
			System.out.println(array[i]);
		}//配列arrayの内容を末尾から先頭に向けて順に出力(逆から取り出す）

		//末尾から出力するときint iに配列の個数-1を初期値として設定しする
```
末尾から出力する場合、
例えば配列arrayのlengthが3つあった場合、array[0],array[1],array[2]が存在する。
末尾から取り出すときは、int iの初期値を配列の数にするとarray[3]から取り出すことになりエラーとなるので、
-1をしてあげることで初期値array[2]から[0]までi--で降順に出力される。
PythonとDjangoによるWebアプリ作成

#PythonでWebアプリを作ってみたい！

下記の記事を見てやってみたくなったので試してみました。
https://qiita.com/okoppe8/items/4cc0f87ea933749f5a49


##困った点
###仮想環境の構築が上手くいかない
紹介されている下記のコマンドを流しても仮想環境がうまく作成できない
python -m venv env
env\Scripts\activate

envフォルダが作成されていることは確認できたが、env\Scripts\activateを流してもそんなフォルダは存在しないと返される。

##追記
env\Scriptsフォルダのactivateではなく、activate.batを叩けということだった。
フォルダを移動した後にactivate.batを実行することで仮想環境が実行された。
実行されるとコマンドプロンプトの前に(env)と表示されるようになる。
cd env\Scripts
activate.bat

##仮想環境は他の方法でも作成できる
下記の記事を見てcondaの仮想環境作成機能が使いやすいとの記載を発見。
https://blog.codecamp.jp/programming-python-virtual-environment
私のPCは以前にAnacondaを導入していたので、condaで仮想環境作成を実施してみることにした。

####condaの仮想環境作成機能でうまくいく
まずはAnacondaPromptが正常に動作していることを確認する為に、python -V と打ち込み、バージョン情報が返ってくることを確認。
####続いて、condaで仮想環境構築コマンドを流してみる
conda create -n ○○　←　○○には任意の仮想環境名を指定する
####アクティベートコマンドを実行
conda activate ○○　←　○○は上で付けた任意の名称
####仮想環境で実行できているか確認(作成直後は何もないが)
conda -list
####仮想環境が動作していることが確認できたら、コマンド cd で今回作成した仮想環境に移動。
cd ○○　

##チュートリアルに沿って作業
必要なライブラリをpipでインストール
pip install -r requirements.txt
データベースの構築
python manage.py migrate
管理者ユーザーを作成
python manage.py createsuperuser 
サーバー起動
python manage.py runserver
ブラウザでアクセスできるか確認
http://127.0.0.1:8000/

##動作したが、管理画面でグループを登録しようとすると下記のエラーが出る
no such table: main.auth_user__old error
結果としてDjango 2.1.2のバグで、2.1.5以上で解消されているようでした。

#結論
今回ハマったのはrequirements.txt内でDjangoのバージョンが2.1.2で指定されていたから。
migrationやり直せばOK！見たいな記事があって試したのですが、うまくいかず、フォルダごと一度すべて削除しました。
####その上で、サンプルアプリのダウンロードからやり直しました。
https://github.com/okoppe8/instant-django

####ダウンロードしたrequirements.txtを下記のように変更
✕　Django==2.1.2　
◯　Django==2.2.6 この時点の最新を指定しました(適宜変更してください)

これで手順通りに進めると管理画面でのグループ登録も問題なくできるようになりました。

以上
【メモ】Laravelのルーティングで404になる

# 1.ルーティングの存在確認

```
php artisan route:list
```

# 2.キャッシュ削除

```
php artisan route:clear
```

# 3.Apacheの設定

AllowOverride Allになっていないとダメな模様

```config:httpd.conf

<Directory "path/laravel/public">
    AllowOverride All
</Directory>

```

また、mod_rewriteモジュールを有効に設定する

```config:httpd.conf
#コメントアウト解除
LoadModule rewrite_module modules/mod_rewrite.so
```

* httpd.conf を編集したらApacheを再起動する
【jQuery】$(this)の意味＆使い方について

# はじめに
jQueryの学習を始めると必ず出てくる$(this)。
こいつは一体なんぞや？？
必ず意味があるはずだけどその意味が全然わからない・・・
恐らく皆さんもそういった経験があると思います。
そこで$(this)の意味と使い方を僕なりにまとめましたので
是非役立ててください！

#$(this)とは？
thisとは一言で言うと**データ取得専用の変数**です。
なんのこっちゃ？
とりあえず変数ですのでなんらかの値を入れれるようですが
~~残念ながらその値を自分で決める事はできません。~~
(実はJavaScriptのbindメソッドを使えばthisの値を決めれるそうです。)

ではどうやってthisと付き合っていくのか
次でコードを実際にコードをまじえながら見ていきましょう。

# $(this)どんな時に使うの？？
jQueryで変数を扱う時例えば・・・

```javascript
//numに1を代入
var num = 1;
```

こんな感じで代入しますよね？

しかし先ほども言ったように値を自分で決める事ができないので
上記のような書き方はしません。

じゃあthisに代入する値はどうするの？？
それは**JavaScriptの実行内容によって自動的に変化**してくれます。
まるでメタモンみたいですね。
(ポケモンは初代派です。)

では実際にコードを見ていきましょう。

**HTML**

```html
<p>こんにちは！</p>
```
**jQuery**

```javascript
//クリックで文字が赤くなるイベントを作成
$(function(){
 $(`p`).on(`click`, function(){   //----1
  $(this).css(`color`, `red`);    //----2
 );
});
```

上記のコードはp要素をクリックすると「こんにちは！」の文字列が赤くなるコードを作成しました。
(デフォルトは黒の設定です。)

javascriptの方の2番に注目してください。

thisが使われているかと思いますが、ここには1番で発生したp要素が代入されています。
ですのでイベントが発火した結果「こんにちは！」という文字列が
赤くなるという結果になります。

ですので例えばthisの部分を$("p")に変えても結果は同じという訳です。

このようにthisにはJavaScriptの処理内容によって値が変化します。
メタモンみたいですね。(二回目)

ただ上記のコードだとあまり便利感がわかりません。
なのでthisを使う意味を次でお伝えしましょう。

# $(this)を使う意味

**HTML**

```html
<p>おはよう！</p>
<p>こんにちは！</p>
<p>こんばんは!</p>
```
**jQuery**

```javascript
$(function(){
 $(`p`).on(`click`, function(){  -----1
  $(this).css(`color`, `red`);   -----2
 });
});
```

先ほどと同じようなコードですが今度はHTMLの方にP要素が三つあります。
ここで各p要素をクリックするとそれぞれ個別で赤くなるという処理になります。

しかし、このthisを$("p")としてまうとどのp要素をクリックしても
全ての文字が赤くなるという処理になってしまいます。

このようにthisには**処理の切り分け**が簡単にできて
かつ処理自体を自動で切り替えてくれるので
非常にメンテナンス性も可読性もあがります。

# もう一つの$(this)を使う理由
さて、先ほどはthisによって処理の切り分けが可能と解説しました。
しかし、処理を分けない（$(this)はどんな時に使うの？のコードのような）場合でも
実は大切な意味があるのです。
それは**処理のパフォーマンスを向上させる**です。
もし一つずつ値を指定していると、jQuery側ではその度にコードの上から順番に
高速で要素を探し出して処理を加えるという動きになります。

しかし、thisを指定していると処理を加える要素がthisに代入される事になりますので
要素を探し出すという行為を減らせるので処理性能をあげれるということです。

短い単純なコードならあまり実感は湧きませんが
もし大規模なコード群となるとこの処理があるかないかで
大きく結果は変わってきます。

ですので、皆さんも$(this)とうまく付き合って楽しいjQueryライフを過ごしましょう！
Gravit　Designer

Ctrl ＋ N 新規作成
Cirt + sift + E PNGで保存

V　矢印
D　移動

R　四角
E　丸
P　ペン
T　テキスト

Ctrl + G　グループ化
Ctrl ＋ Sift + G グループ化解除

◎画像を切り抜く
外観 → 切り抜き
青い線の範囲を移動させる
編集→切り抜き確定
MySQL入門　基本的なデータベースの操作②

基本はエディタでsqlファイルを作成してコードを書き込み、ターミナルで実行していく。今回はAtomエディタとmacに同梱されてるターミナルを使用する。


①データベース上の全ての権限を作成したユーザーに与える記述式

```
grant all on myapp.* to myapp_user@localhost identified by 'パスワード';
```

この場合myappの全てのテーブルに対してmyapp_userに権限を与えるという意味になる。
*は全て、identified byは好きなパスワードを設定できる。


②テーブルの作成

```
create table テーブル名 (

);
```

③作成したテーブルの()内にフィールド(カラム),レコードを作成する。

例

```
create table user(

id int unsigned,
name varchar(20),
score float 
);
```

④テーブルの構造の確認式

```
desc テーブル名
```

上記の式でターミナルで確認した結果

```
+-------+------------------+------+-----+---------+-------+
| Field | Type             | Null | Key | Default | Extra |
+-------+------------------+------+-----+---------+-------+
| id    | int(10) unsigned | YES  |     | NULL    |       |
| name  | varchar(20)      | YES  |     | NULL    |       |
| score | float            | YES  |     | NULL    |       |
+-------+------------------+------+-----+---------+-------+
3 rows in set (0.00 sec)
```

⑤レコードの挿入

insent intoの後にテーブル名とフィールド名を指定する。テーブル名の後にフィールド名の指定、valueにレコードのデータを入れる。文字列はシングルクォーテーションで囲む。

例


```
insert into user(id,name,score) values(1,'hahakigi',5.8);
insert into user(id,name,score) values(2,'ai',8.2);
insert into user(id,name,score) values(3,'you',6.1);
insert into user(id,name,score) values(4,'momo',null); 
```


ターミナルの実行結果

```
+------+----------+-------+
| id   | name     | score |
+------+----------+-------+
|    1 | hahakigi |   5.8 |
|    2 | ai       |   8.2 |
|    3 | you      |   6.1 |
|    4 | momo     |  NULL |
+------+----------+-------+
4 rows in set (0.00 sec)
```

scoreの上から４番目のnullはデータが入っていませんよの意味。



又、このような書き方でも実行結果は変わらない。

```
insert into user (id,name,score) VALUES
  (1,'hahakigi',5.8),
  (2,'ai',8.2),
  (3,'you',6.1),
  (4,'momo',null);
```
今更だけど、MAU / WAU / DAU ってなに？

## 備忘録
## AU とは？
AUとは、アクティブユーザーを指しており、
一定期間のうちにアプリやサービスを一回以上利用したユーザーのこと。

## MAU
### 月間アクティブユーザー（Monthly Active User）
#### 指標値：長期利用
## WAU
### 週間アクティブユーザー（Weekly Active User
#### 指標値：習慣づけ
## DAU
### 日間アクティブユーザー（Daily Active User
#### 指標値：毎日使ってもらう
LC4RI(Literate Computing for Reproducible Infrastructure)はJupyter一択ですか？


#### 「僕はゼロイチのSEなんすよ！」<br>
と吠えても作ったものを眠らせておいては何の説得力もないんでコードレビューされたらメッタ刺しなものでも出さなきゃハナシんなんないのでアウトプット強化週間してみることにした。

メンタル弱いのでお手柔らかに。

<HR>

Google ColaboratoryとかチームでJupyterを使う仕組みが幾つかあるけど、Jupyterは１ドキュメントに閉じた運用に特化しているというかサクっと使うにはいいけど運用手順書とか長々使い回すとするとExcelの悪夢っぽい問題が出てくるような気がしている。<br>
昔とある大規模運用をやってたときに昔から脈々と作られてきた大量の手順書やドキュメントの老朽化メンテナンスに苦労したことがあって。<br>

- 担当者とか部署名みたいな将来的に書き換えが起こるであろう部分を効率化できない
- ログインとかテンプレート的につかう手順とかお決まり的なオペレーションの使い回しが難しい

あと既存のドキュメントの移植の手間とか。これらをJupyterにしてgitあたりとうまく連携してもうまいとこ運用できないよな気がする。(どっかでうまくやってるところあるだろうけど)<br>

でもJupyterの部品のように区画を用意してドキュメント部分、手順部分と切り貼りできる仕組みは凄く気に入ってて、これをもっとチーム運用に特化した形にできないものかと考えていた。<br>
当時はアプリ開発スキルが無かったので~~今もあるといえねーのでは~~テンプレートドキュメントをシェルスクリプトでsedで置き換えるとかドキュメントにラベルつけて検索性をあげて、必要に応じて結合するといったゴリゴリCLIな方法しかできなかった。<br>
その後スキルがあがってAPI+フロントエンドで再実装する事ができた。<br>

![n1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/f290cc50-e966-540f-8fa3-728fdec7b443.png)

こんなかんじ。

![n2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/b6b11ad1-33fd-4f66-8536-0882a707bf14.png)

広げてたたんで並び替えてで、定義部分を入れ替えてつかう<br>
##### ホイールをクリックして編集モードに入るという地獄なUX!

![n3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/8ef9bb63-e35e-1ab1-77c0-ed3d374281e9.png)

![n6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/9135ff42-c0b6-05cb-61cc-189dca9367a5.png)

![n7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/ffb5aa88-be8c-a1cc-6cd5-72e764069e95.png)


コアはドキュメント部分とコード部分をパーツ単位で切り貼りできるようになっている。public/privateで個人とチームと別れて管理できる。あと単語単位でテンプレート化して置き換えできたり

![n4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/2b1243ca-3611-4cbc-a54b-7d4cc61f1ed3.png)

![n5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/dccb3111-b0aa-8d57-0e7f-a2ab13ea8dd7.png)

パーツ単位でリポジトリを作れたり。doc2vecで似たコード捜索を推論したり。パーツ単位で実行結果を取得できたり

![n8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/e027a5fc-842e-4d13-2d3a-549d7f3c35cc.png)

![n9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/e048869f-3be4-e117-6770-b0d44eede112.png)

テキストの手順はつまらないので動的なチュートリアルいれたりした

![n10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/2d0d172c-69fb-62cb-fab7-a19a6a121ba2.png)


これをクラウド上で運用作業者用SaaSみたいにしたかったんだけど頓挫。やってみたかったなあ。

##### 激スパゲッティコード
https://github.com/yasutakatou/nirmal

##### DEMO
~~http://34.82.69.221:1192/~~
(2019/10/12追記: 閉鎖しました)

 - コマンド動かされるとやばそうなので run は使えません。
 - GCPの無料枠なのでコード推測機能はメモリ不足で動きません。
 - 弱い荒らし対策として15分に一回リポジトリがまき戻ります
 - これも弱い対策として適当にAPI側にバリデーション入れました。
 - そのうち消します。

しょっぱなから生き地獄恥レベルだけど、まいっか。ぼこらててもアウトプットが主目的なんだし。しょんぼりな内容かもだけどまた書きますわ。
Windowsスポットライトの画像を保存したい

![ハイイロアザラシ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359386/16e91c63-b99b-2007-83a2-db46ccabf9fb.jpeg)

#Windowsスポットライト
という名前であることを知りませんでしたが、Windows10標準で設定されている壁紙が自動更新される機能です。
これまでもいい画像が表示されることが何度もあったのですが、保存方法をしっかりと調べていませんでした。
今回保存方法が確認できたので、今後のメモとして手順を残しておきます。

####Windowsスポットライトの画像が保存されるフォルダ
%LOCALAPPDATA%\Packages\Microsoft.Windows.ContentDeliveryManager_cw5n1h2txyewy\LocalState\Assets

「Win」+「R」キーを押して、上記を貼り付けると開くフォルダに画像が保存されています。
しかし、拡張子がありませんので何のファイルかわかりません。
サイズで画像と思われるもの(300～500KB程度)をデスクトップ等にコピーして、ファイル名に「.jpg」拡張子を付けて、希望の画像かどうかを確認します。

![2019-10-07_10h15_25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359386/1200c2ea-cc20-beb5-5351-2361afa1b625.png)


画像として保存できれば自由に活用できると思いますので、壁紙等への設定方法は割愛します。
Cognos Analytics 日付プロンプトで一週間前をデフォルト指定する

#日付プロンプトで一週間前をデフォルト指定する
日付のプロンプトは、実行するとデフォルトで本日の日付が入った状態で表示されます。
<img width="302" alt="001.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147246/78cc9e05-e831-25de-1b6d-938d4f4c4fa1.png">

それは良いのだけど、こんな感じにFrom - Toで日付のプロンプトを置く場合、Fromのプロンプトのデフォルトは「一週間前の日付」をデフォルトで入れておいて欲しい、というのは良くある要件です。
<img width="321" alt="002.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147246/67bf477b-2529-b765-07c0-d0c62aa4e45b.png">

#実装手順
このやり方ですが、やはりJavaScriptを使います。

HTMLアイテムを使いますので、図のように「レポート」のプロパティから「完全な双方向性で実行」を「いいえ」に指定。
<img width="825" alt="003.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147246/2ea6b532-ca07-301a-f0b5-586d11e11c64.png">

「日付のプロンプト」のプロパティで、「UIの選択」を「入力ボックス」、「名前」を「Dprompt」とする。
<img width="700" alt="004.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147246/8822ced0-aa14-96b6-4d9a-b8b8beaadced.png">

「HTMLアイテム」に以下のように記載。
赤枠の箇所を任意に変更してご使用下さい。
<img width="460" alt="005.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147246/9fcbb47a-2c4b-c7e0-c912-4e1a75b6fee8.png">

```html
<script type="text/javascript">
var currentDate = new Date();
currentDate.setDate(currentDate.getDate()-7);
currentDate = currentDate.toISOString().slice(0,10);
var ocr = cognos.Report.getReport("_THIS_");
var datePrompt=ocr.prompt.getControlByName('Dprompt');
var oValue = datePrompt.getValues(true);
oValue[0].use=currentDate;
datePrompt.setValues(oValue);
</script>
```

以上、ご活用下さい。

#参考
**How to set date prompt to a previous date (yesterday)**
https://www.ibm.com/support/pages/how-set-date-prompt-previous-date-yesterday
Serverless FrameworkでLambdaのログ保存期間を環境によって変える

# Serverless FrameworkでLambdaのログ保存期間を環境によって変える

AWSのLambdaをServerless Frameworkを利用してデプロイするときに、CloudWatch Logsのログ保存期間を環境によって変更する設定。

環境は以下の三個とする。

* dev(開発)
* stg(試験)
* prod(本番)

## Serverless Frameworkの設定ファイル

`stage`オプションを指定し、デプロイする環境を指定することにする。
`custom`を利用することでコマンドオプションを指定することができる。

```
$ sls deploy --stage dev
```

* 設定ファイルの例

```
service: serverlessTest

provider:
  name: aws
  runtime: python3.7
  stage: dev  # デフォルトの環境はdev
  logRetentionInDays: 14  # デフォルトのログ保存期間は14日とする

custom:
  stage: ${opt:stage, self:provider.stage}  # デフォルトの環境はdev
  logRetentionInDays:
    dev: "14"
    stg: "60"
    prod: "90"

functions:
  hello:
    handler: handler.hello

resources:
  Resources:
    HelloLogGroup:
      Type: AWS::Logs::LogGroup
      Properties:
        RetentionInDays: ${self:custom.logRetentionInDays.${opt:stage, self:provider.stage}}
```

Serverless Frameworkは、`functions`で指定した`hello`関数に対して、`HelloLogGroup`という名前で`Logs::LogGroup`というAWSリソースを作成する。

`Resources`に指定する項目の注意事項は、公式サイトに記載されている。

https://serverless.com/framework/docs/providers/aws/guide/resources/#override-aws-cloudformation-resource

> When you override basic resources, there are two things to keep in mind when it comes to normalizedFunctionName:

> ・It should start with an uppercase character
> ・The - will be changed to Dash, _ will be changed to Underscore

上記のように、`Resources` に指定するものには、以下の二点に注意すれば良いみたい。

* 大文字で始まること。
* `-`は`Dash`という文字列に変換され、`_`は`Underscore`という文字列に変換される。
GitHubとローカルの連携

## 目的
- GitHubとローカルの連携、設定、確認を行う

## GitHubの連携
- ローカルで鍵を作成し[こちら](https://github.com/settings/keys)に登録

```bash
$ ssh-keygen -t ed25519

# copy(Mac)してGitHubに登録
$ pbcopy < ~/.ssh/id_ed25519.pub
```

- 鍵名が違う場合はよしなに編集する

```bash
# ~/.ssh/configを作成し追加

Host github github.com
  HostName github.com
  IdentityFile ~/.ssh/id_ed25519 #自分の鍵ファイル名
  User git
```

- 接続確認

```bash
$ ssh -T git@github.com
Hi [GitHub UserName]! You've successfully authenticated, but GitHub does not provide shell access.
```
【TCP/IP入門】ネットワークの4層に分かれる階層モデルを解説

今年から新卒でWebエンジニアとして働いているのですが、仕事で直接意識することのあまりないコンピュータネットワークの基礎を学ぼうと思い、TCP/IPについて調べたので、アウトプットとしてまとめます。

# ネットワークの改装図
コンピュータの改装は大きく4つに分けることができます。
<img width="827" alt="スクリーンショット 2019-10-07 9.50.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265549/6fbc71e5-72d9-a355-4b25-1f2f831f614d.png">


それではそれぞれの層の説明をしていきます。

# アプリケーション層
アプリケーション層は利用しているユーザーが直接触れる部分です。今このQiitaを見る際にに行っているWebぺージの表示においては、ブラウザとサーバーがアプリケーション層にあたり、リクエストしたURLと表示するページのデータのやり取りを行います。


# トランスポート層
トランスポート層の役割は、アプリケーション層のプログラムから受け取ったデータを宛先のアプリケーション層に送り届けることです。もしデータが正常に届かない場合には再送などを行います。

この層の一番の役割は、プログラムを区別する番号をつけ、それを目印に適切なプログラムに対し、データを渡すことです。

データが適切に届かなかった場合にはm送る側のトランスポート層から再送のリクエストを送り、受ける側のトランスポート層はそのリクエストが届いたら、データを再度送り直すというような挙動をとります。

#インターネット層
インターネット層はコンピュータのアドレスを用いてデータを送信先まで届けます。通信において通信先のコンピュータまでの経路を熟知するルーターが仲介を行います。またルーターはバケツリレーのようにデータを転送します。
受け手側のインターネット層の役割に関しては、送信されてきたものの宛先が自分である場合はトランスポート層に渡します。

#ネットワークインターフェース層
この層では有線LANカードや無線LANカードなどネットワークカードに合わせてデータを用意し、送受信します。インターネット層は宛先に向けて送信するのに対し、このネットワークインターフェース層は物理的に接続されている機器まで届けることのみに特化しています。

ネットワークカードについてはこちら
https://wa3.i-3-i.info/word12498.html

また、実際に送信されハードウェアを通過している際のデータの状態は、上の4層を通り抜けた後下の図のようになっています。（）内に書かれている層で付与されたヘッダーになります。

<img width="577" alt="スクリーンショット 2019-10-07 9.58.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265549/5294149a-7a1b-5cde-c34e-2e65e7431425.png">



# まとめ
以上の4層がTCP/IPにおける階層モデルになります。また、OSI参照モデルと言われるモデルにおいては、さらに層が細分化され、下記の7層に分かれているので注意してください。



アプリケーション層
プレゼンテーション層
セッション層
トランスポート層
ネットワーク層
データリンク層
物理層
ActiveAdminの認証に相乗りする方法

Railsの管理画面でActiveAdminを使う機会が多いが、
管理機能を増設したい場合がある。
ActiveAdminに機能を追加することもできるが、
DSLが面倒だったりするので独自のControllerを作って認証だけActiveAdminと
一緒にしたい場合がある。

ログイン中のActiveAdminのユーザーの取得メソッドは、
`config/initializer/active_admin.rb` に

```ruby
ActiveAdmin.setup do |config|
  config.current_user_method = :current_admin_user
end
```

で定義されているので、
以下のようなhelperを定義して、

```ruby
def login?
  send(ActiveAdmin.application.current_user_method.to_sym).present?
end

def admin_user_signed_in!
  render(inline: 'Forbidden', status: :forbidden) unless login?
end
```

追加したcontrollerで呼び出せば、

```ruby
class HogeController < ApplicationController
  before_action admin_user_signed_in!
end
```

ActiveAdminのユーザーをしてログインしていればアクセスできるし、
してなければ403になる。

同様にrole管理もActiveAdminに相乗りしたいと思ったが、
`controller`、`action` ごとにrole管理するため
こちらはActiveAdminのbase_controllerを継承しないと難しそうだった。
ActiveAdminが使う `CanCanCan` を直接使うほうがよさそうだった。
【AWS】EC2を平日日勤帯のみ稼働させる

## はじめに

EC2はお手軽な仮想環境として便利なサービスですが、
稼働時間に応じた従量課金のため使わない時間帯は停止させたい。
LambdaとCloudWatchイベントを使って平日夜間と土日は停止させる。
さらに祝日や特定日など任意日も停止させる。

## LambdaとCloudWatchイベントでEC2を開始/停止

LambdaとCloudWatchイベントで指定したEC2インスタンを自動で開始/停止させる

#### Lambda関数を用意

- EC2instancesStartStop

```py:lambda_function.py
import boto3
 
def lambda_handler(event, context):
    region_name = event['RegionName']
    instance_ids = event['InstanceIds']
    ec2 = boto3.client('ec2', region_name=region_name)
    if event['Action'] == 'Start':
        ec2.start_instances(InstanceIds=instance_ids)
    elif event['Action'] == 'Stop':
        ec2.stop_instances(InstanceIds=instance_ids)
```

#### CloudWatchイベントルールを設定

![event.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485398/fdd56ca6-36dd-b2f6-cb96-0d27653e4861.png)

- ルールを作成する
    - イベントソース
        - スケジュール
            - Cron 式: `0 0 ? * MON-FRI *` (月曜～金曜日の09:00に起動)   
            UTCで指定する
    - ターゲット
        - Lambda関数 `EC2instancesStartStop`
        - 入力の設定
            - 定数 (JSON テキスト): `{"Action": "Start", "RegionName": "ap-northeast-1", "InstanceIds": ["i-00000000000000000"]}`  
            Action(Start/Stop)、EC2のリージョンとインスタンスIDを指定する

同様に停止させるルールも作成する

#### 祝日および特定日も停止させる

事前に祝日および特定日リストをS3にファイルとしてアップロードしリストに含まれる日付の場合はスキップさせます。

- EC2instancesStartStop

```py:lambda_function.py
import boto3
import os
import datetime

class Holiday():
    @classmethod
    def isHoliday(self):
        os.environ['TZ'] = 'Asia/Tokyo'
        day = datetime.date.today()
        today = day.strftime("%Y%m%d")
        print(today)
        
        try:
            if len(os.environ['HOLIDAY_DATA_BUCKET']) > 0:
                s3 = boto3.resource('s3')
                bucket = s3.Bucket(os.environ['HOLIDAY_DATA_BUCKET'])
                obj = bucket.Object('holiday.dat')
                with open('/tmp/holiday.dat', 'wb') as data:
                        obj.download_fileobj(data)
                f = open('/tmp/holiday.dat')
                holidays = f.readlines()
                f.close()
                os.remove('/tmp/holiday.dat')
         
                check = today + "\n" in holidays
                return check
            else:
                return False
        except Exception as e:
            print 'failed to isHoliday: {}'.format(e)
            return False
```

:information_source: python2.7のLambdaではタイムゾーンの設定に `os.environ['TZ'] = 'Asia/Tokyo'` が反映されますが、
python3.6ではLambdaの環境変数に `TZ : Asia/Tokyo` を設定する必要があります

```py:lambda_function.py
#  (該当箇所に追記)
import check_holiday

    if check_holiday.Holiday.isHoliday() == True:
        print "== SKIP == today is holiday =="
        return None
```

環境変数に特定日リストファイルを置くバケット名を指定します
`HOLIDAY_DATA_BUCKET: <BUCKET_NAME>`

- 特定日リスト

```holiday.dat
20190429
20190430
20190501
20190502
20190503
20190504
20190505
20190506
```

祝日リストは下記コマンドでGoogleカレンダーから取得可能です。

~~~
$ curl -L https://www.google.com/calendar/ical/ja.japanese%23holiday%40group.v.calendar.google.com/public/basic.ics | grep DTSTART\;VALUE=DATE\:|sed -e 's/DTSTART\;VALUE=DATE\://g'|sort > holiday.dat
~~~
【AWS】 EC2でECRからdocker構築

## はじめに

Dockerのポータビリティ性はローカルで開発してからサーバに持っていったりするのには便利です。
AWSのサービスでFargateを含むECSなどDockerで構築できる便利なサービスがありますが、
ちょっとしたプロトなどサクッと試すにはやはりEC2がお手頃です。
ローカルで開発したDockerImageをAWSのECRにPUSHしてEC2で構築するまでのメモ。

## ローカル環境からECRへdocker pushまで

#### 前提

`~/.aws.credentials` にAWS認証情報が設定済み

#### dockerビルド

~~~
docker build
~~~

#### ECRにログイン

~~~
$(aws ecr get-login --region ap-northeast-1 --no-include-email)
~~~

#### ECRにPUSHするタグ

~~~
docker tag <DockerImageName>:latest <AwsAccount>.dkr.ecr.ap-northeast-1.amazonaws.com/<DockerImageName>:<Version>
~~~

#### ECRにPUSH

~~~
docker push <AwsAccount>.dkr.ecr.ap-northeast-1.amazonaws.com/<DockerImageName>:<Version>
~~~

## EC2にdockerインストール

~~~
sudo yum install -y docker
sudo service docker start
sudo usermod -a -G docker ec2-user
~~~

## EC2でECRからdocker pull

#### ECRにログイン

~~~
$(aws ecr get-login --region ap-northeast-1 --no-include-email)
~~~

#### ECRからPULL

~~~
docker pull <AwsAccount>.dkr.ecr.ap-northeast-1.amazonaws.com/<DockerImageName>:<Version>
~~~

#### docker起動

~~~
docker run --restart=always -d --log-opt max-size=100m --log-opt max-file=10 -p 80:8080 <AwsAccount>.dkr.ecr.ap-northeast-1.amazonaws.com/<DockerImageName>:<Version>
~~~

- --restart=always  
EC2再起動後にも自動でdocker run

:information_source: 停止する場合は `docker stop` だけではEC2再起動後にdockerも起動されるため該当コンテナを削除する必要がある  

~~~
docker ps -a
docker rm <ContainerId>
~~~

- --log-opt max-size
- --log-opt max-file  
ログローテート
RailsでのAjax処理

#Ajax on jQuery
jQueryでAjax処理を書くと以下のような感じになります。

```javascript
<input type="textbox" id="sample" />

<script>
  $(function() {
    $('#sample').on('change', function() {
      $.ajax({
        type: 'POST',
        url: '/funds/set_category',
        data: { category: $(this).val,
        dataType: 'json'
      }).done(function(data, textStatus, jqXHR) {
        // 成功時の処理
      }).fail(function(jqXHR, textStatus, errorThrown) {
        // 失敗時の処理
      }).always(function() {
        // 結果にかかわらず実行される処理
      });
    });
  });
</script>
```

Ajax通信を開始する処理にメソッドチェーンで成功時の処理や失敗時の処理を付け足していきます。
成功時の処理や失敗時の処理を書いていくと、JavaScriptの部分がどんどん肥大化していくことになります。

#Ajax on Rails
Railsでは以下のように書くことができます。

```javascript
<%= text_field_tag 'sample', data: { remote: true,
                                     method: 'POST',
                                     url: set_sample_path } %>

<script>
  document.body.addEventListener('ajax:success', function(event) {
    // 成功時の処理
  });
  document.body.addEventListener('ajax:error', function(event) {
    // 失敗時の処理
  });
  document.body.addEventListener('ajax:complete', function(event) {
    // 結果にかかわらず実行される処理
  });
</script>
```
少しすっきりした気がします。
`data-remote`を`true`に変更し、他のパラメーターも`data-***`で指定します。
Rubyの処理内なのでurlの指定には`set_sample_path`みたいな変数がそのまま使えます。
また、コントローラーに渡すデータは、テキストボックスなら`value`属性が、セレクトボックスなら`selected option`が自動的に設定されます。
その他のデータを渡したい場合、`data { params: 'id=' + @sample.id, type: 'json' }`のような感じで設定すればOK。

ひとつ注意があります。
例ではページ内にAjax処理を行う場所がひとつだけなので、結果を受け取る処理もひとつだけで大丈夫です。
しかし、Ajax処理を行う場所が複数あると、処理の種類によって結果を受け取る処理を変えなければなりません。
具体的な方法については次のセクションで説明します。

#Controller

```ruby
def set_sample
  # データ更新などの処理
  result = {
    event: 'sample',
    data: ...
  }
  render json: result, status: 200
end
```
データとステータスコードを返却します。
このとき、データの中にどの処理かが識別できる情報を入れておきます。例では`event: 'sample'`の部分です。
また、ステータスコードを設定しないとビューでの受信時にデータの形がおかしくなるので必ず設定します。

#Re:View

```javascript
<script>
  document.body.addEventListener('ajax:success', function(event) {
    // 成功時の処理
    var data = event.detail[0];
    switch(data.event) {
      'sample':
        // 処理
        break;
      ...
    }
  });
  ...
</script>
```
再びビューの処理です。
コントローラー側から受信した返却データは`event.detail[0]`の中に入っています。
さらに今回はJSON形式で`event`というパラメーターを設定しているので、`event.detail[0].event`で処理が識別できます。
~~しまった、`event`と`event`で`event`がかぶってしまった。~~
ページ内に複数のAjax処理があると`switch`などを使って受信処理を分岐させる必要があります。
しかし失敗時の処理は分岐させる必要がないなど、状況に応じて共通化させることもできます。

#余談
最近、[Napstablook](http://napstablook.herokuapp.com/)という保有投資信託管理サービスをリリースしました。
本記事はNapstablookの開発中にAjax処理が必要になったため、調べてまとめたものになります。
Napstablookではセレクトボックスやテキストボックスが変更されたときにAjax通信を開始し、コントローラーでデータの更新や計算を行った後、ビューにデータを返すという処理を行っています。

#さらに余談
[AUTOVICE](http://autovice.herokuapp.com/)という私のポートフォリオサイトでRailsの技術情報の記事を書いていますので、よければこちらもご覧ください。
そろそろ独自ドメインに移行したい。
【忘備録】リターンの周期変更


* リターンの周期変更
    * 日次リターンを月次リターンや週次リターンに変更
    * 日次→月次リターン、月次→年次など、頻度を下げることを想定

```python
def make_resample_ret(df_ret, freq='W'):

    indexvalue = 100*((1 + pd.DataFrame(df_ret)).cumprod())
    indexvalue_resample = indexvalue.resample(freq).last()
    ret_resample = (indexvalue_resample/indexvalue_resample.shift(1) - 1).fillna(0)

    return ret_resample

```

* インプット
    * df_ret:インプットリターン(dataframe)
    * freq:アウトプットリターンの周期'M', 'W', 'D', 'A'など
    
   
* アウトプット
    * freqで指定された周期でのリターン(dataframe)
CSS 5

週末ちょっとサボってしまいました…
なので朝活中。

余白ってなんでしょう？(´･_･`)って
実際動画で勉強したらそこまで難しくなかったです。

見た目を整えるために領域の色を変えて余白つけて、画像を丸くしたり、リストを横並びにしたり、

CSSってお洋服繕ってるみたいですね。
チョークで描いてまち針止めて、あの縫い方この縫い方と創意工夫。

ほんと技術すごい。作った人すごい。
今日も勉強になりました。
Xubuntuで何もないところからPHPとComposerとLaravelを入れてとりあえず動くところまで

自分用メモ。

とりあえず環境を入れて「Laravelが動いたー」ってなるだけのやつです。
実際に開発する際にはもうちょっといろいろ考慮が必要かと思います。（この手順では例えばDBすら入れてませんし）

# PHP

aptを使って入れます。

## リポジトリの登録

```bash
$ sudo apt-add-repository ppa:ondrej/php
```

## アップデート

リポジトリを追加した後のアップデート。忘れがちなので気をつけます。

```bash
$ sudo apt update
```

## インストール

Laravelが必要とする拡張モジュールも予め入れておきます。
（前述の通り、これはインストールに最低限必要なものだけです）

```bash
$ sudo apt install php7.3 php7.3-mbstring php7.3-xml php7.3-zip
```

# Composer

公式の https://getcomposer.org/download/ および https://getcomposer.org/doc/00-intro.md#globally を参照すれば簡単ですが、もうちょっと楽をします。

## インストール

上記の公式サイトではインストーラをダウンロードして実行するという流れですが、curlで読み込んだものを直接phpで実行してしまいます。
実行すると、カレントディレクトリに`composer.phar`が作られるので、それを適切なところ（https://getcomposer.org/doc/00-intro.md#globally に記載があるように、`/usr/local/bin/composer`が推奨）に移動させます。
ちなみに、「何もないところから」だとcurlがインストールされていないと思われるので、それは先に入れておきましょう。

```bash
# curlをまだ入れていなければ
$ sudo apt install curl
$ curl https://getcomposer.org/installer | php
$ sudo mv ./composer.phar /usr/local/bin/composer
```

# Laravel

LaravelはComposerを使ってインストールします。
公式ドキュメント https://laravel.com/docs/6.x の通りやればできます。（それはそう

## インストール

```bash
$ composer global require "laravel/installer"
```

これで、`$HOME/.config/composer/vendor/bin`にインストールされます。そこにパスを通すなり、インストーラのリンクをパスが通っているところに作るなりするといいでしょう。

## ブロジェクト作成

`laravel new`で新しいプロジェクトの入れ物を作り、`composer create-project`で中身を整えます。
実行したときのログを見ればわかりますが、`.env`の作成や必要なモジュールのインストール、`php artisan key:generate`の実行などを`composer`がやってくれます。

```bash
$ laravel new <project_name>
$ cd <project_name>
$ composer create-project --prefer-dist laravel/laravel <project_name>
```

## 起動

```bash
php artisan serve
```

これで`Laravel development server started: <http://127.0.0.1:8000>`というメッセージが出ると思いますので、http://127.0.0.1:8000 にアクセスしましょう。

![laravel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41691/cfa06cf4-aa16-135e-a22e-be6236b9173e.png)

こんなかんじで表示されれば成功です！！
docker + mysql　環境構築

# dockerを使ってmysql環境を構築する方法

1.mysqlイメージを落としてくる

```cmd:cmd
pull mysql
```
2.mysqlコンテナの作成

```cmd:cmd
# データベース名 mydb
# rootユーザーパスワード verysecretを指定
docker run --name mysqld -e MYSQL_DATABASE=mydb -e MYSQL_USER=userfoo -e MYSQL_PASSWORD=secret  -e MYSQL_ROOT_PASSWORD=verysecret -d -p 3306:3306 mysql
```

3.dockerのコマンド立ち上げ


```cmd:cmd
docker exec -it mysqld /bin/bash
```

4.mysqlのパスワードを確認

```cmd:docker
#パスワード確認 上記runコマンドでrootユーザーのパスワードはMYSQL_ROOT_PASSWORD=verysecretになっているはず
env
```

5.ホスト確認

```cmd:cmd
docker-machine ip Default
```

6.mysqlworkbenchから接続してみる
`ユーザー: root
パスワード:verysecret
ポート: 3306
ホスト:(docker-machine ip 環境名 の結果)
`

7.エラーcgroups: cannot find cgroup mount destinationの対処

```cmd:cmd
docker-machine ssh dev
sudo mkdir /sys/fs/cgroup/systemd
sudo mount -t cgroup -o none,name=systemd cgroup /sys/fs/cgroup/systemd
【初心者】AWS Amplifyでホスティングや認証機能などを設定してみた

インフラ周りの構造的理解を深めたい思いから、AWSのAmplifyを用いて、HostingやAuth、GraphQLにて簡易的なAPIを作ったので、復習と備忘も兼ね、記事にまとめていきます。本記事は[『React x Amplify で始めるサーバーレス アプリケーション開発』](https://booth.pm/ja/items/1555055)を参考にさせていただいたので、詳細が気になる方は是非書籍を購入していただければと思います。

# AWS Amplifyとは
Javascriptのライブラリの一つ。Webサービスやモバイルアプリのインフラを簡易的に構築することが出来る。

# 環境設定
前提として、AWSの取得及び、npm又はyarnをインストールしておく必要がある。今回の記事ではnpmを前提に進める。(npmのインストールは[こちら](https://qiita.com/PolarBear/items/62c0416492810b7ecf7c)の記事を参考にしました）

npmインストール後、下記の流れでコマンドラインをインストールし、セットアップを行います。

```
#CLIのインストール
$ npm install -g @aws-amplify/cli

#セットアップ(リージョンの指定やIAMのユーザー名、アクセスキーの入力などの設定を行う）
$ amplify configure
```
ちなみにここで選んだリージョンとAWS上で参照しているリージョンが異なり、CloudFormationが出来ていないと勘違いし、2時間ほど溶かしてしまったのでご注意ください笑

# ホスティング
基本的にamplifyで機能を実装する際は下記の流れで行う。

```
$ amplify init
$ amplify add <機能>
$ amplify push
```

ホスティングをする際は以下の流れで行う。

```
$ amplify add hosting
　→PROD (S3 with CloudFront using HTTPS)
　→<ホスティングで使用するバケット名>
　→index.html
　→index.html

# publishする前にS3のバケットの中身を削除する必要がある（なんでだろ...) 
$ amplify publish
```

```
ホスティング後のステータスを確認。
$ amplify status

| Category | Resource name   | Operation | Provider plugin   |
| -------- | --------------- | --------- | ----------------- |
| Hosting  | S3AndCloudFront | No Change | awscloudformation |
```

# 認証機能の実装
認証機能の追加もホスティングと同じ流れで出来る。

```
$ amplify add auth
$ amplify push
$ amplify publish
```

各選択項目を選びながら、認証の設定をしていきます。細かいフロントの設計は[『React x Amplify で始めるサーバーレス アプリケーション開発』](https://booth.pm/ja/items/1555055)にあるので参考にしてください。

# 困ったところ/課題
作業を進めていく中で困ったところもまとめていきます。

### ホスティングに結構時間かかる
amplify publishをすると、AWSの中でホスティング環境を構築してくれるのだが、20~30分ほどかかったので、気長に待つ必要がある。

### ホスティングの際、バケットの中身を空にする話
ホスティング環境のPublishをする際に、S3のバケットの中身を空にする必要があるとのことだったが、この作業が必要になる理由がいまいち理解出来なかった。

###DynamoDBがNoSQLである点
今回の開発には全く関係が無いが、AWSが提供するDynamoDBというデータベースがNoSQLで有るため、データの検索や集計などには向かない。そのため、個人開発単位の立ち上げにおいては問題ないが、中長期的に進めるプロジェクトではMySQLとの併用などがおそらく必要になる。DynamoDBに関しては、ほとんど触れてもおらず、勉強不足なので、[このあたりの記事](https://qiita.com/hshimo/items/e5ad98b21786d796f1da)を参考にします。

# まとめ
このようにAWS Amplifyを使うと、非常に簡単に機能を実装することが出来ます。インフラ、サーバーサイドをこれだけ簡易的にやってくれると、フロントエンドが得意な方であればかなりクオリティの高いサービスが作れるのではないかと思いました。AWSは今回始めて触ったのですが、まだまだ未知な領域も多いので、次はLambdaなども触ってみたいと思います。
Rustクレートのトレンドを可視化する

# はじめに
少し前に["Rustのエラーライブラリ利用状況を調べてみた"](https://qiita.com/dalance/items/4704b16c0718f6dfb7c0)という記事を書きました。このときは執筆時点でのライブラリ使用数を比較しましたが、実際にあるライブラリが流行っているかどうかはそれだけではわかりません。
そこでGoogleトレンドのように時系列でライブラリの使用数が見れるコマンドを作ってみました。

https://github.com/dalance/cargo-trend

# 使い方
ユーザはRustプログラマだと思うので、

```console
$ cargo install cargo-trend
```

でインストールしてください。

引数なしだとカレントディレクトリのRustプロジェクトが依存しているクレートのトレンドグラフをtrend.svgに出力します。

```console
$ cargo trend
```

引数にクレート名を与えることもできます。
例えばエラーライブラリの場合なら

```console
$ cargo trend failure error-chain quick-error snafu err-derive
```

こんな感じです。

`-o`オプションで出力ファイル名を与えることができて、拡張子によってフォーマットが変わります。対応しているのは`.svg`/`.png`/`.bmp`/`.jpeg`/`.jpg`です。

# トレンドグラフの例

いくつか面白かったものを載せておきます。
まず、前回記事で取り上げたエラーライブラリです。

![error.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84296/36c82699-06a2-dacf-5afb-b9daf5937af4.png)

最初期のquick-errorからerror-chainへの移り変わりと、failureの急速な伸びが分かります。
これを見ていると当分failureだろうと思います。

次に引数パーサライブラリです。

![arg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84296/bed1fd55-eb5c-df90-3c71-6db0f74e8e37.png)

clapがデファクトスタンダードですが、二番手のstructoptも勢いがあるようです。
（次期clapがstructoptの機能を取り込むようなので、そうなったらclap一強でしょうか）

最後はターミナルにカラー出力するためのライブラリです。

![term.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84296/eafc05f8-4914-6d0a-48cd-b1352747ba0f.png)

これはまだデファクトスタンダードと言えるものは現れていないようです。

# 仕組み
前回の記事ではcrates.ioのWeb APIから情報を取得しましたが、過去の情報は取れませんし、あまり大量のリクエストを投げるのも良くないので、別の方法を考える必要があります。
幸いcrates.ioが保持しているクレートのインデックスはgithub上に存在します。

https://github.com/rust-lang/crates.io-index

このリポジトリのmasterブランチは2018/9/26開始ですが、それは履歴が増えすぎて過去の履歴をブランチに追い出したためで、ブランチを辿れば2014年くらいからの全てのインデックス情報が得られます。

そこで最初のコミットから１日毎にチェックアウトして依存数のデータベースを構築しました。
データベースはgzip圧縮したJSONで、[ここ](https://github.com/dalance/cargo-trend/blob/master/db/db.gz)にあります。過去4年分で700KB程度になりました。

cargo-trendコマンドはこの構築済みデータベースをダウンロードしてトレンドグラフを生成します。

# cargo tally

ここまで作ってRustのユーザフォーラムに投稿したところ、dtolnay氏（synとかquoteとかマクロ周りの有名クレートを作ってるすごい人）から「ほとんど同じものあるよ」というコメントを貰いました。

https://github.com/dtolnay/cargo-tally

現状のcargo trendに不足している機能もいくつか教えてもらったので、そのあたりをキャッチアップしつつ差別化要素を考えようと思います。
【React-Select】label と value をカスタマイズする

## 1. [React-Select](https://github.com/JedWatson/react-select) とは

React-Select とは、セレクトボックスにオートコンプリート（入力による絞り込み）やマルチセレクト、async 機能がついた React 製コンポーネントです。

![react-select-official-sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245792/92c403f8-a595-fdfd-59fb-d87086c96f7c.png)

## 2. やること

デフォルトでは `label` フィールドが表示対象、 `value` フィールドが検索対象になります。

```
{ value: 'ocean', label: 'Ocean' },
{ value: 'blue', label: 'Blue'},
{ value: 'purple', label: 'Purple' },
{ value: 'red', label: 'Red' },
{ value: 'orange', label: 'Orange' },
...
```

このままだと以下のようなケースで問題があります。

- JSON に `label` と `value` フィールドがない（別のフィールドを使用したい）
  - API のレスポンスなどを使用する場合など
- 表示をカスタマイズしたい
  - 複数フィールドを組み合わせて表示

上記のようなケースもライブラリとしてカバーされていますが、[公式ドキュメント](https://react-select.com/home) がわかりづらかったのでどのようにすればいいかまとめました。

[こちら](https://codesandbox.io/s/react-select-specify-field-of-label-and-value-fg3dn)が今回作成したデモです。
アカウント作成必要なくブラウザ上で動かせるので試して見てください。

## 3. 解説

### 1. 今回扱う JSON

社員マスタのようなものを想定してます。

```
{
    EmployeeId: 1,
    FirstName: "田中",
    LastName: "健太郎",
    DepartmentId: 2,
    DepartmentName: "営業"
},{
    EmployeeId: 2,
    FirstName: "山田",
    LastName: "五郎",
    DepartmentId: 2,
    DepartmentName: "営業"
},{
    EmployeeId: 3,
    FirstName: "マット",
    LastName: "マックス",
    DepartmentId: 2,
    DepartmentName: "カスタマー"
},{
...
},{
    EmployeeId: 6,
    FirstName: "マット",
    LastName: "マックス",
    DepartmentId: 4,
    DepartmentName: "開発"
}
```

フルネームと部署を表示・検索対象にすることを目標とします。

### 2. 表示をカスタマイズ

`formatOptionLabel` に関数を渡します。

```react

<Select
    // omit
    formatOptionLabel={formatOptionLabel}
/>
```

関数の引数に使用するフィールドを入れておけば OK です。

```react
const formatOptionLabel = ({ FirstName, LastName, DepartmentName }) => (
  <div style={{ display: "flex" }}>
    <div>
      {FirstName} {LastName}
    </div>
    <div style={{ marginLeft: "10px", color: "#999" }}>{DepartmentName}</div>
  </div>
);
```
![react-select-customize-label.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245792/a672f444-cc1f-0e96-ceb9-a84144ec21ba.png)

### 3. 検索対象の文字列

このままでは部署での検索ができないので、検索対象にしたいフィールドを `getOptionLabel` で指定します。

![react-select-department-failure.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245792/02438b95-7257-97a6-6822-c2e47951e4b0.png)

今回はフルネームと部署が対象です。

```react

<Select
    // omit
    getOptionLabel={option =>
        option["FirstName"] + option["LastName"] + option["DepartmentName"]
    }
/>
```

![react-select-getOptionLabel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245792/d4b69961-2966-1a2c-b361-8b582a02a6d6.png)

## おわりに

似たようなもので [React Autosuggest](https://github.com/moroshko/react-autosuggest) を使って見たことがありますが、私は React-Select の方が使いやすかったです。

ただ Issue の数がとんでもないので、ここら辺にも関わっていければなと思います。

## 参考資料

- [今回のデモ](https://codesandbox.io/s/react-select-specify-field-of-label-and-value-fg3dn)
- [React-Select: 公式ドキュメント](https://react-select.com/home)
[メモ]tscで Cannot find module 'source-map'と出るとき


## 問題
以下のコマンドを実行時に`Cannot find module 'source-map'`と出る

```bash
tsc
```

```エラー内容.bash

node_modules/@types/uglify-js/index.d.ts:9:30 - error TS2307: Cannot find module 'source-map'.

9 import { RawSourceMap } from 'source-map';
                               ~~~~~~~~~~~~

node_modules/@types/webpack-sources/index.d.ts:10:62 - error TS2307: Cannot find module 'source-map'.

10 import { SourceNode, RawSourceMap, SourceMapGenerator } from 'source-map';
                                                                ~~~~~~~~~~~~

node_modules/@types/webpack/index.d.ts:40:30 - error TS2307: Cannot find module 'source-map'.

40 import { RawSourceMap } from 'source-map';
                                ~~~~~~~~~~~~
```

## 解決策
以下を追記する。

```tsconfig.json"
 "moduleResolution": "node"
```

## 解決にあたって参考にしたページ
[Cannot find module 'source\-map' · Issue \#23649 · DefinitelyTyped/DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/issues/23649)
Railsで画像を表示する方法

Progateの第7章でやったことのメモです。

画像ファイルは/app/assets/images 下に置き，image_tag ヘルパーで読み込むのがいいとほかの方に教わりましたが、とりあえずは/public直下に画像ファイルを置きました...

#Railsで画像を表示する大まかな流れ

1.画像名を保存するカラムをデータベースに作る

2.form_tagで画像を送れるようにする

3.一つのアクションでデータベースに画像ファイル名の保存、/public内に画像ファイルの作成

4.画像ファイル名をデータベースから指定して表示


##1.画像名を保存するカラムをデータベースに作成

マイグレーションファイルのみを作成し、その内容をデータベースに反映させます。

まずはマイグレーションファイルのみの作成から。

###マイグレーションファイルの作成方法

`$rails g model`コマンドを使うとマイグレーションファイルのみならずモデルまで生成されてしまうので、
`$rails g migration ファイル名`を使う。ファイル名は何をするファイルなのかわかりやすくすると良い。

###migrationファイルの反映方法

migrationファイルの中のchangeメソッドの中にコードを書いていく訳だが、例えばusersテーブルにimage_nameカラムを追加し、データ型をstringにしたい場合は
`add_column :users, :image_name, :string`
と記述します。

そして`$rails db:migrate`でデータベースに変更を反映


##2.form_tagで画像を送れるようにする

`<input type="file>`とすると画像ファイルを選択できるようになります。

そして画像ファイルを送る場合は、
`<%= form_tag("...",{multipart: true}) do %>`とします。


##3.一つのアクションでデータベースに画像ファイル名の保存、/public内に画像ファイルの作成

画像ファイル名の保存は普通に@user.image_nameに代入すれば良い

画像ファイルの保存だが、そもそも画像ファイルとはコンピュータ用の文字で書かれたテキストファイルと同じような普通のファイルらしい？
なので送信された画像ファイルを/public内に書き込めば良い。

###Rubyでのファイルの書きこみかた
Rubyにもともと用意されているFileクラスを用いてファイルを扱う
ファイル作成にはFileクラスのwriteメソッドを使う

public/内にHelle.txtというファイルを作成し、中身を"Hello World!"とする場合、
`File.write（"public/Hello.txt", "Hello World!"）`
と記述する


####次に実際に画像ファイルを保存していく。
`<input name="image_file" type="file">`
で送信された画像ファイルの情報は他と同様に、
`params[:image_file]`で受け取れる。
そして`image=params[image_file]`としてimageに代入しておき、

```ruby:hogehoge_controller.rb
def hogehoge
 @user.image_name="#{@user.id}.jpg"
 image=params[:image_file]
 File.binwrite("public/#{@user.image_name}", image.read)
end
```

と記述し、画像ファイルを作成する

※画像データは特殊なため、binwriteを使用。また、readメソッドを使うことにより画像データを取得している


#4.画像ファイル名をデータベースから指定して表示

あとはいつも通り
`<img src="<%= "#{@user.image_name}" %>">`
で表示すればOK
【Rails】remote: true にしたフォームを jQuery で送信しても js形式リクエストにならない

## はじめに
Rails 初学者がアウトプットとして学習したことを投稿していきます。

### 環境
下記のバージョンで検証しています。

- Ruby 2.5.6
- Rails 5.2.3

## やりたかったことと問題点
チェックリストを選択すると Ajax で動的にコンテンツが切り替わる実装をしたいと考えました。
そのために js 形式でリクエストを送信するフォーム (`remote: ture` を設定) を作成し、フォーム内のチェックボックスの変更を起点に、jQuery でフォームの送信を試みました。

```slim:index.html.slim
= form_with url: ajax_path, method: :get do |f|
    = f.check_box :check_box
    = f.label :check_box
```

実際に生成された HTML は以下のようになります。

```html:HTML
<form action="/ajax" accept-charset="UTF-8" data-remote="true" method="get">
  <input name="utf8" type="hidden" value="✓">
  <input name="check_box" type="hidden" value="0">
  <input type="checkbox" value="1" name="check_box" id="check_box">
  <label for="check_box">Check box</label>
</form>
```

`form_with`はデフォルトで`remote: true`が設定されています。実際に生成された form タグにも`data-remote="true"`になっており、反映されています。

チェックボックスをチェックした時に、フォームを送信するように jQuery を記述しました。

```js:check_box.js
jQuery(document).ready(function() {
  // name="check_box" の input タグの変更を起点に発火
  $('input[name="check_box"]').change(function() {
    // チェックボックスの親要素 = フォームを送信
    $('#check_box').parent().submit();
  });
});
```

これでチェックボックスをチェックした時点でフォームが送信されるはずです。
しかし、実際には送信されたリクエストは js 形式ではなく、 html 形式になっていました。
<img width="424" alt="Action_Controller__Exception_caught.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366035/d3d74bcb-fc4c-c200-9d61-201b53852436.png">


## 原因
Rails 5.1 から導入された rails-ujs というライブラリが関係しているようです。Rails 5.0 まで使用されていた jquery-ujs が、jQuery 依存からの脱却のために rails-ujs へと切り替えられました。
その影響で、それまで問題なく js リクエストを送信できていた`submit();`が html リクエストを送るようになってしまったようです。

## 解決策
rails-ujs から提供されている`Rails.fire`メソッドで対応できます。

```js:check_box.js
jQuery(document).ready(function() {
  // name="check_box" の input タグの変更を起点に発火
  $('input[name="check_box"]').change(function() {
    // ここを変更
    Rails.fire($('#check_box').parent()[0], 'submit');
  });
});
```
実際にチェックボックスにチェックを入れてみると、
<img width="420" alt="GARRANGE.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366035/7ad84588-9fd7-9890-483a-5a53720bcd29.png">
js 形式リクエストで送れました。解決！  
対応するコントローラー#アクションと、`ajax.js.slim`のようなファイルを用意してあげれば Ajax で表示を変更することができると思います。
Ajax による表示変更の実装は[こちら](https://qiita.com/__tambo__/items/45211df065e0c037d032)の記事がわかりやすいです。

## 終わりに
今回は対応できましたが、rails-ujs については正直わかっていない部分が多いので、勉強が必要ですね。
ちなみに、`ajax:success`といったイベントハンドラも jquery-ujs から変更されているようなので、注意してください。

## 参考

- [Rails ガイド](https://railsguides.jp/working_with_javascript_in_rails.html#rails-ujs%E3%81%AE%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%83%8F%E3%83%B3%E3%83%89%E3%83%A9)
- [rails-ujs と form_with の使い方](https://www.bokukoko.info/entry/2017/12/22/194327)
- [Rails5の勉強会をした話とrails-ujsでremote: trueなフォームをJSからサブミットさせようとしたらうまくいかなかった話](https://blog.rista.jp/entry/2017/09/04/100006)
- [form_withでフォームの送信前に処理を行う方法](https://re-engines.com/2018/04/12/form_with_ajax/)
ActionScriptで簡単なHTTPサーバーを作る

# はじめに
簡単なHTTPサーバーの機能を持ったデスクトップアプリを作成します。

# アプリの概要
アプリを起動後、8080ポートでHTTPリクエストを待ち受けします。
その後、HTTPリクエストを受け取ると、「Hello World」という固定の文字列をHTTPレスポンスで返すだけの簡単な動作をします。

例として、ブラウザーから以下のようなURLにアクセスすると、ブラウザーに「Hello World」が表示されます。

- http://localhost:8080
- http://xxx.xxx.xxx.xxx:8080

# アプリのソース
```mxml:mxml
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
					   xmlns:s="library://ns.adobe.com/flex/spark"
					   creationComplete="run();"
					   fontFamily="Meiryo">
	<fx:Script>
		<![CDATA[
			private var serverSocket:ServerSocket;

			private function run():void {
				serverSocket = new ServerSocket();
				serverSocket.addEventListener(Event.CONNECT, function(event:ServerSocketConnectEvent):void {
					var socket:Socket = event.socket;
					socket.addEventListener(ProgressEvent.SOCKET_DATA, socketDataHandler);
				});
				serverSocket.bind(8080);
				serverSocket.listen();
				statusLabel.text = "8080ポートで起動しました";
			}

			private function socketDataHandler(event:ProgressEvent):void {
				// HTTPリクエストを受信
				var socket:Socket = event.target as Socket;
				var requestBytes:ByteArray = new ByteArray();
				socket.readBytes(requestBytes);
				var request:String = requestBytes.toString();
				trace(request);

				// HTTPレスポンスを送信
				var responseBytes:ByteArray = new ByteArray();
				responseBytes.writeUTFBytes("HTTP/1.1 200 OK\n\nHello World");
				socket.writeBytes(responseBytes);
				socket.flush();
				socket.close();
			}
		]]>
	</fx:Script>
	<s:Label id="statusLabel" left="10" top="10" />
</s:WindowedApplication>
```

とりあえず今回はここまで
初心者がVirtualBoxで初めての仮想環境の構築

#環境構築初心者がとにかくやってみたTips

初心者がネットの情報を頼りに
VirtualBoxを使って仮想環境を構築してみる！（ガクブル）

###使用環境
OS : macOS Mojave 10.14.3
VirtualBox: 6.0.12
Vagrant: 2.2.5
##そもそもVirtualBoxってなんぞや

**初心者が初心者のために**説明するならば
仮想環境が個別に作れてその時々に使い分けれるし、
いろんな手間も省いてくれる有能なやつ、、、笑
##兎にも角にもインストール
やっぱりインストールするべきものがたくさんありますよ、、、
こればっかりは避けては通れない！（宿命）

***macOSのセキュリティ設定の影響で、VirtualBoxのインストールに失敗することがあるみたい***
インストールに失敗する場合は、「システム環境設定」-「セキュリティとプライバシー」を開き、「システムソフトウェアの読み込みがブロックされました」というメッセージが出ているはず。
出ていたら、「許可」をクリックして「Oracle America, Inc.」にチェックを入れて「OK」をクリックし、もう一度 VirtualBox をインストールすることで解決する。

####まずはVirtualBox
ここからインストール。
箱のマークをダブルクリックだ！
https://www.virtualbox.org/wiki/Downloads

####忘れるべからずVagrant
VirtualBoxを簡単に動かすための道具です（適当）
とにかく絶対絶対あったほうがいい*Noda*！
こちらも同様に公式サイトからすぐインストール出来る。
https://www.vagrantup.com/


終わり！
アレ、、、コレだけ？
実はそうコレだけでOK！笑

（周囲の人）
全然たくさんねーじゃん！ふざけんな！何が宿命だ！

##Terminalでの操作
ここからターミナル（コマンドプロンプト）での操作！
今後複数の環境を構築することを考えてMyVagrantとかってフォルダを作成して配下にMyCentOSとかってフォルダを作っとく。

イメージ図
MyVagrant/
├ MyCentOS/
├ ???/

できたら次に設定ファイルを作成する。
MyCentOSまで移動して以下のコマンドで自動で作成してもらう。
```$ vagrant init bento/centos-6.8
```
Vagrantfileとかってファイルができているのでここを編集することでIPアドレスなりなんなりが変更できる。今回はとりあえず立ち上げたいので割愛。
今度この辺りを詳しくいじり倒す記事書きます（突然の次回予告）

ようやく終わり！！
下記コマンドで起動（時間かかる）
```$ vagrant up
```
下記コマンドで状態の確認
```$ vagrant status
```
runningみたいなのが出てれば起動できてる！！

下記コマンドでログインして中をイジイジできる。
```$ vagrant ssh
```

いつも通りexitでログアウト！
#最後に
こんな感じで兎にも角にも仮想環境を構築するだけのTIps。
この後設定なりなんなりをいじり倒して仮想環境マスターになりたいね（切望）
思い出に残る内定式

# 概要

この話は、10月1日に内定先である東京のITベンチャー企業の内定式に出席した内容が書かれています。

# 目的

思い出をアウトプットする。

#### なぜQiitaなの？

今年の夏に開催されていた内定先のインターンに参加した際に、人事の方から「<font color=Crimson>**ブレイク・ザ・バイアス**</font>」を教えてもらいました。
 様々な解釈が存在しますが、私の解釈では「<font color=Crimson>**ブレイク・ザ・バイアス**</font>」とは「固定的な解釈を壊す」という意味だと思っています。

例えば、この画像には何が写っていますか？

![ボールペン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165212/2a45a322-4595-4be2-75ef-04def9bf3ca6.png)

。。。
これは、「ボールペン」ではありません。
もしもここに写っているものがボールペンに見えてしまったなら、
あなたはまだ既存の概念にとらわれています。 
カタチから入ると、これは「矢」や「釣り竿」などと捉えることが出来そうですね。

こんな感じで、今回私はこのQiitaの「<font color=SpringGreen>**技術的な知識を共有するメモ**</font>」という既存の概念を壊す為にこの記事を書きました。

# 内容

#### イントロ

こんにちは、ゆうりです。 
今回が初投稿となります。

面白い使い方をしたかったので、今回は内定式の記録をQiitaに書くことにしました。 
私はある東京のITベンチャー企業の内定を頂き、今年の10月1日が内定式でした。
 同期は自分を含めて9人います。

私の会社は少し特殊で、内定式の日に全社員の前で自己紹介のプレゼンテーションをしなければなりません。
その練習する時間もあってか、朝9時55分集合。。(早すぎw)  
それでもエレベーターが着くタイミングが完璧だったので、なんとか間に合う事が出来ました。

#### 内定式

内定式は、
開始の挨拶→社長訓示→内定書授与→内定者自己紹介
といった順に進んでいきました。

社長訓示では、社長から内定者に向けてお言葉を頂きました。
 社長からは「残り半年の学生生活で社会人では出来ないことを経験しろ。」と言われました。
 やはり、社会人になると「学生時代にやっておけば良かった〜:angel_tone1:」と後悔する事が有るんですね(笑)

それから内定書授与も何気なく終わり、待ちに待った自己紹介。。

私は前から数えて3番目だったのであまり緊張しないと始めは思っていたのですが、 やはり実際に前に立って見ると違いますね。。

  役員の険しい顔つきに加えて前の2人が流暢に話せていたので、かなり緊張しました。 結果、同期のメンバーと比べて全然上手く話せなかったのですが、 役員の方々が笑って場の空気を和やかにしてくれたおかげで、私も少し気が楽になり最後まで説明しきる事が出来ました。

  この内定式で確信した事としては、「やはり、<font color=LightSkyBlue> **同期のメンバーは全員本番に強い！！**</font>」ということ。
そして、
驚いた事としては、内定者全員の発表を繋げると奇跡的に「<font color=Tomato>**起・承・転・結**</font>」に沿っていたということ。

#### 懇親会

その日の夜は役員の方々と懇親会をしました。 
役員の方々は内定式の時の険しい顔つきとは違って、すごく優しい感じの顔つきになっていました。 
私の隣は全く面識のない役員の方だったのですが、「発表良かったよ！！」と向こうから声を掛けてくれて、とても嬉しかったです。 
その後は、役員の方から社内事情のお話を聞いたり、住むべき場所のアドバイスなどをもらいました。

##### 懇親会を終えて

役員の方は皆、「話しかけやすい雰囲気を出しており、それでいて意見がしっかりしている。」
 やはり、こういった方が役員に選出されるのだろう！

  私の将来の社員像が見えてきた気がします！！  
毎月1回、内定者研修で東京へ赴くんですけど、その中で今回の出来事は一番思い出になりました。

##### P.S　本当に残り半年で学生生活が終わってしまうのか〜 
寂しくて悲しい反面、早く成長したい気持ちもあり複雑な気持ちです。