OmniAICreator/Qiita-1.07M huggingface dataset:
「銀行の資産運用商品管理ウェブシステム」の紹介

# 開発背景
####システムの概要
- このシステムは中国の各銀行のホームページに掲載されている資産運用商品の発行時期、発行支店・金利などの情報を１つのwebサイトに統合
- ユーザがコメントと販売情報を問い合わせる機能ができる

#### システムを導入する目的
- 資産運用の要望があるユーザが１つのwebサイトで各銀行により発行した商品の発見・比較を便利になった
- 銀行のオンライン業務を推進・宣伝効果を拡大

#### システムの取扱商品：資産運用商品
- 中国の銀行で販売される小口で短期の投資信託のような商品（理財商品）
- 日本における高利回りの定期預金のような金融商品

#### 開発チームについて
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427518/c6a690b8-0c23-bc33-f88e-26962e231f30.png)

# 要件定義
#### 進捗管理：開発Roadmap
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427518/69fa8737-70b5-9245-d7f7-5bfeb5399c4c.png)

#### 機能要件
| 要件N0. | 権限による分類  | 要件内容   |
|:-----------------|------------------:|:------------------:|
| 01 | 一般ID/管理者ID | ログイン |
| 02 | 一般ID/管理者ID | 登録 |
| 03 | 一般ID/管理者ID | 商品を見る |
| 04 | 一般ID/管理者ID | コメント |
| 05 | 管理者ID | コメントを削除 |
| 06 | 管理者ID | くじ引き |
| 07 | 管理者ID | プロフィール編集 |
| 08 | 管理者ID | 商品情報編集 |
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427518/833c78e1-966a-b5d7-d327-eea06810d212.png)

# 設計・構成

####システムの仕組み
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427518/f4edeaa7-ff7a-71ff-b189-56453cd87a95.png)
####デザインパターン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427518/d89d84e6-8b35-a978-5688-9a6df42ce768.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427518/9d946900-7aeb-6afe-0a2e-98080f61f775.png)
#### システムフローチャート
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427518/f6cefa5c-e2a2-c5e8-02a0-70628f99b9d6.png)

# デモ
#### トップページ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427518/1a5526e8-2488-c27c-98d1-8bbcaab4e550.png)
#### 登録・ログイン画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427518/4f2ff62a-1e96-6ad2-2061-0bbac2c14073.png)
#### 商品一覧
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427518/4d4bc831-4a22-f9b7-dc56-232976d7bfbb.png)
#### 商品詳細画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427518/9e113374-dc54-ff5b-2b62-b738c403f09b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427518/e727838e-c70e-9a3d-9498-d32ee9b9b2ed.png)
raspberrypi3bをteamviewer遠隔から操作する.

#はじめに
大学にあるraspberrypi3bを家から操作したいけど、ポート開放できない！(大学が禁止してる？)
Chrome desktopを使おう ← GUI限定？
じゃあCUIでteamviewerをインストールしよう！

インストール手順は簡単ですが、
公式サイトだけでは微妙に説明不足と感じたのでまとめました.

#作業環境
|  | Version | 備考 |
|:--:|:--------------------:|:------------:|
| PC | RaspberryPi3b        |              | 
| OS | UbuntuServer16.04LTS | UbuntuのCUI版 |
自分は上記のような環境で作業しましたが、
アーキテクチャとOSがわかれば、どの環境にも入るんじゃないでしょうか.

#手順
###1. アーキテクチャとOSを調べる.
archコマンドを使い、コンピュータのアーキテクチャを調べます.以下を実行してください.

~~~
$ arch
armv71
~~~


次にOSを調べます.以下を実行してください.

~~~
$ cat /etc/lsb-release 
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=16.04
DISTRIB_CODENAME=xenial
DISTRIB_DESCRIPTION="Ubuntu 16.04.6 LTS"
~~~


###2. teamviewerのダウンロード
https://www.teamviewer.com/ja/download/linux/
から、上記で調べたアーキテクチャとOSにあったファイルをダウンロードします.

自分はarmv7でUbuntuなので、以下の画像の赤でマークしたファイルをダウンロードしました.
![teamviewer_download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497254/c4502477-82f2-a120-b3a8-6506351f18c3.png)


CUIでは以下のコマンドでダウンロードします.
debファイルのURLは
ダウンロードリンクを右クリック→リンクのURLをコピー
で取得できます.

~~~
$ cd /tmp
$ wget <debファイルのURL>
~~~



raspberrypi3bでは以下のように打つと良いです.

~~~
$ cd /tmp
$ wget https://download.teamviewer.com/download/linux/teamviewer-host_armhf.deb
~~~


###3. teamviewerのインストール
teamviewerをインストールします.以下のコマンドを実行してください.

~~~
sudo dpkg -i teamviewer-host_armhf.deb
~~~


エラーが出たら以下のコマンドを実行してください.依存関係を自動で直します.

~~~
sudo apt install -f
~~~
実行したら、sudo dpkg -i team.....をもう１度実行してインストールします.

### 4.teamviewerの設定
teamviewerはインストールが終わったら、自動で起動してくれるようです.
再起動時も自動で起動してくれました.
しかし、このままでは繋げることができないので、アカウントなどの設定を行います.

以下を実行して、setupします.

~~~
$ sudo teamviewer setup
~~~
メールアドレス(またはユーザ名)とパスワードを聞かれるので、teamviewerのアカウント情報を入力しましょう.
入力したら登録したメールアドレスに本人確認みたいなのが来るので許可しましょう.

###5. IDの確認、パスワードの設定

teamviewerのコマンドについては、以下を実行すると確認できます.

~~~
$ teamviewer help
~~~


パートナーIDの確認をします.以下を実行してください.

~~~
$ teamviewer info

 TeamViewer                           15.0.8397  (DEB) 

 TeamViewer ID:                       <ここにパートナーID>

***以下略***
~~~

パスワードを設定します.以下を実行してください.

~~~
$ teamviewer passwd  設定するパスワード
~~~

以上で終了です.スマホやubuntu desktopのteamviewerから接続できます.






#参考
https://community.teamviewer.com/t5/TeamViewer-Knowledge-Base-JA/GUI%E3%82%92%E4%BD%BF%E3%82%8F%E3%81%9A%E3%81%ABLinux%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%81%ABTeamViewer%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/ta-p/34925

https://qiita.com/tktwk77/items/6f32f7fc0c2e7c1f9eae
アジャイル開発におけるプロダクトの価値はどう測るべきか？

![2741CB90-0649-4B30-93CE-B75CE5FF62BF.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539856/846c9fab-ed49-e0bf-36b1-068f8a2a3eed.jpeg)
[富士通システムズウェブテクノロジー Advent Calendar 2019](https://qiita.com/advent-calendar/2019/fsweb) 10日目の投稿です。
記事の内容は全て個人の見解であり、執筆内容は執筆者自身の責任です。所属する組織は関係ありません。

#はじめに
アジャイル開発を進めていく上で外せない”価値”という言葉についてすこし考えてみました。

※最初に断っておくと本投稿は完全な読み物です。コードTipsを探している人ごめんなさい。
他をあたってください。


#品質もスピードも価値に通ずる
アジャイル開発を進めていく中で価値があるか？、ないか？は最も重要な指標と言われています。
従来であればQCDのようなプロジェクト管理に近い指標もプロダクトの価値に紐づけて語られます。

###品質と価値の関係　狩野モデル
![狩野モデル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539856/7086918d-704f-81c8-5858-e1740a9d30fb.png)


狩野モデルは品質の特性を「当たり前品質」、「一元的品質」、「魅力品質」、「無関心品質」に分類し各カテゴリの充足度からユーザーに与える心象・効果を測り使い分けるべきとする考え方です。アジャイル界隈の人がこの話を出す時、従来型開発においてユーザーの関心が低い部分に対して過剰に品質を追及する姿へのdisが込められていたりもしますが、本質的には当たり前品質の確保を自動化などで省力化し、いかに魅力品質（＋αの価値）へ注力していけるか？が重要になってきます。

###リリーススピードと価値の関係
DevOps界隈ではCI/CDなどでリリース頻度をどれぐらい上げられるか？に関心が集まっています。開発をすればするだけ価値が高まると仮定すると（実際はそんなことないのですが）開発・リリースのスループットを上げることは価値を継続的に高めていく近道と言えるでしょう。
![リリース回数.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539856/5ed4cec7-fa7f-6504-0740-16189b82abb7.png)
リリース回数を増やすと価値を伸ばす機会が増える（イメージ）

このように品質もスピードも”価値”という言葉に集約していくことで、”価値”が重要なKPIとなり、価値を高められるか否か？を判断基準としてより合理的な作業スタイルを確立することができます。


#”価値”って何なんだろう？
少し前置きが長くなりましたが、”価値”という言葉を深く考えずに乱発しているとだんだん”価値”とは何なのか？がよく分からなくなってしまう気がします。今自分が開発に携わっているプロダクトやサービスの”価値”っていったい何なのか？どうなったらそれが高まるのか？という自問自答にはまり込んでしまうかもしれません。
例えば、ある機能をリリースしたことで以前に比べて60%売上が上がったとか20%効率が上がったといった具合に、狙いに対して直接的な効果が出るものは比較的分かりやすく価値として捉えることができるでしょう。ですが、そのようなものは稀だと思います。利用者がどのように使い、どのように感じているのか？それがどのような価値に繋がっているのか？把握するのが難しいケースのほうがほとんどではないでしょうか？


#視聴率って意外に優秀なKPIなのでは？という仮説
いろいろと考えを巡らせた結果、似たような話としてテレビの視聴率にたどり着きました。テレビのコンテンツは私たちが開発しているアプリケーション以上に価値が測りにくいものだと思います。しかしスポンサーになる広告主に対してはこの番組がどれぐらいの価値を持っているかを事前に予測し、事後もきちんと予測した広告的価値が提供できたか？を把握することが必要になります。
視聴率があることによって作り手も受け手もスポンサーも一定の基準で価値を把握することができます。時に過激な視聴率競争が批判されたり、視聴率より心に残るテレビドラマが評価されたりすることもありますが、作り手が視聴率という非常に分かりやすい価値指標を血眼になって上げる努力をし、結果に一喜一憂する様はどことなく共感できなくもありません。

- 視聴率の良いところ（私見）
 - 皆が直感的に理解できるシンプルな指標であること
 - 視聴率⇒広告的価値がある程度立証されていること
 - 作り手が一丸となれる指標であること

#アプリケーションの視聴率はどうやって取るべきか？
そこでアプリケーションにも視聴率調査に代わる利用量のメトリクスを仕込んでみてはいかがだろうか？というのが今回の記事の趣旨です。ログを取っていないようなアプリケーションは少ないと思われますが、以下のような工夫を入れてメトリクスを取得するとより柔軟な価値分析に繋がるかと思います。是非お試しください。

###ベタにログを回収する方式
アプリケーションの操作ログをfluentdやdatadogなどで回収し回数を集計します。
最低限、何が何回実行されたか？を識別するための機能や画面、ボタンオペレーションの種類の情報をログへ出力しておくことが望ましいです。

###スライス観点をDI等で注入する
視聴率調査をより効果的に活用するために視聴者のセグメントを分析するのと同じように、ユーザーの所属や属性など集まったデータを細分化する条件を取得できるとより柔軟な対応が可能になります。分析の切り口は後から分かることも多いのでログの詳細な実装はDI等で後から注入できるようにしておくことも効果的です。

###AOPの方が優秀かも
そもそも操作ログがきちんと実装されていなかったり、必要な情報が取得できる場所にログがきちんと実装されていないケースには、AOPのようなアプローチを使ってアプリケーション上の任意のタイミングに情報取得処理を後付けするような手法も有効になります。


#まとめ
アジャイル開発で作ったプロダクトやサービスの価値を測る方法として視聴率の有効性とその実現方式について書いてみました。まずはシンプルなログの収集・カウントから始めるといいと思います。
DIとかAOPとかよく分かんないし覚えたくないって人はDynamicPULSEで弊社に問合せてくれるともしかしたら良いことがあるかもしれません。
Rubyの変数の定義(ローカル変数)

##Rubyの変数の定義をまめてみました。

変数は数字や文字などのデータを格納する箱。

その箱を呼び出すことで、箱の中身のデータを読み込んだり、取り出したり、追加したりできます。

変数にはローカル変数、インスタンス変数、クラス変数、グローバル変数、定数があります。

変数の種類によって使い方が異なります。

##ローカル変数

####命名規則

- 英小文字または_が文字の先頭に使用できる
- 英数字または_で構成される

```ruby
student = "Taro"
student_2 = "Jiro"
_student_3 = "Sabu"
```
ただし、数字が先頭にくるとエラー

```ruby
4_student = "fourth"
#=> syntax error
```

####スコープ
最初に代入が使用された位置から、その代入を含むブロックまたはメソッドの定義の終わりまで

まず変数を定義

```ruby
studet = 'Taro'
```
変数を呼び出してみる

```ruby
puts student
Taro
 => nil  #当然よびだせる
```
ブロックはどうか？

```ruby
3.times do |n|
  puts student
end
Taro
Taro
Taro
=> 3 
```


インスタンスメソッドから呼び出せるか試してみる

```ruby
def students
 puts student   #インスタンス変数を作ってその中でstudentを呼び出してみる
end
sutudents
NameError: undefined local variable or method `student' for main:Object
```
classメソッドは？

```ruby
class Students
  puts student   #当たり前だけどエラーになる
end
NameError: undefined local variable or method `student' for Students:Class

```

インスタンスメソッド、クラスの中で変数を定義する。

```ruby
def students
  student = 'Taro'
end
puts students
Taro
=> nil

class MedicalStudents
 student = 'Hanako'
 puts student
end
gakusei =  MedicalStudents.new  #とやってclassは定義できるが、インスタンスを作成したところで呼び出せない
#試しにクラスの外からstudentを呼び出してみる
puts student
NameError: undefined local variable or method `student' for main:Object　 
```
インスタンスメソッドはメソッドを呼び出せば変数を呼べるが、classの中に変数を定義してインスタンスを作成しても呼び出せず、当たり前だけど直接呼び出せるはずもなく。

クラスのなかでローカル変数をつかうには

```ruby
class MedicalStudents
  def name=(name)
    student = name
    puts student
  end
end
a = MedicalStudents.new  #インスタンスを作成
a.name ="Hanako"  
Hanako
=> "Hanako"
```
インスタンスを作成し、インスタンスの中で変数を代入すれば呼び出せる。

ただし他のインスタンスメソッドには呼びだせない

```ruby
class MedicalStudents
  def name=(name)
    student = name
  end
  def students
    puts student
  end
end
b = MedicalStudents.new   #インスタンスを作成
b.name ="Yoshiko" 
b.students
NameError: undefined local variable or method `student' for #<MedicalStudents:0x00007f83f50ad360>
```

というわけでローカル変数のまとめ
ローカル変数を呼び出すには

- ローカル変数を直接呼び出す
- ブロック変数で呼び出す
- インスタンスメソッドの中でローカル変数を定義して、インスタンスメソッドを呼び出す
- クラスとインスタンスメソッドをつくり、インスタンスをつくる。インスタンスごとに変数を代入して呼び出す。

ローカル変数で無理やり出力させる方法は以上でした。

次回はインスタンス変数に続く
【python】変数名をstrで取得する

##概要
Djangoを用いた開発中、変数名を使って楽したい部分があった。
~~そもそも変数名を使いたくなる時点で良くないコードな気もするが~~

最初はこんな絶望的な書き方をしてたので、調べてみると**組み込み関数locals()**で実現できるようだ。

```python
def hoge(name, email, message):
    for variable_name, value in zip(("name", "email", "message"), (name, email, message)):
        print(f"{variable_name} -> {value}")
```
・・・にしてもひどいなあ。


##組み込み関数locals()
ドキュメント見ると・・・
https://docs.python.org/ja/3/library/functions.html#locals
> 現在のローカルシンボルテーブルを表す辞書を更新して返します。 関数ブロックで locals() を呼び出したときは自由変数が返されますが、クラスブロックでは返されません。 モジュールレベルでは、 locals() と globals() は同じ辞書であることに注意してください。

>>注釈 この辞書の内容は変更してはいけません; 変更しても、インタプリタが使うローカル変数や自由変数の値には影響しません。

とある。要するに呼び出した場所のスコープの変数と値がdictになって帰ってくる。そしてその値は変更不可とのこと。
このdictのkeyを取り出せば変数名がstrで取得できることがわかった。

##見てみる
こんなコードがあるとします。

```python
class Account(object):
    param = "param"
    print(locals())  # 実行順1

    def __init__(self, name, email):
        self.name = name
        self.email = email
        print(locals())  # 実行順2

    def some_function(self, param1, param2):
        self.param1 = param1
        self.param2 = param2
        print(locals())  # 実行順3


account = Account("ragnar", "ragnar@sample.com")
account.some_function(1, 2)
print(locals())        # 実行順4
print(type(locals()))  # 実行順5
```

上記コードの実行結果は以下の通り。printする場所のスコープの変数が取得できています。
返り値はdictですね。

```
{'__module__': '__main__', '__qualname__': 'Account', 'param': 'param'}

{'self': <__main__.Account object at 0x1065e6990>, 'name': 'ragnar', 'email': 'ragnar@sample.com'}

{'self': <__main__.Account object at 0x1065e6990>, 'param1': 1, 'param2': 2}

{'__name__': '__main__', '__doc__': None, '__package__': None, 
'__loader__': <_frozen_importlib_external.SourceFileLoader object at 0x10652a190>, 
'__spec__': None, '__annotations__': {}, '__builtins__': <module 'builtins' (built-in)>, 
'__file__': '/Users/ragnar/workspace/class/locals.py', '__cached__': None, 
'Account': <class '__main__.Account'>, 'account': <__main__.Account object at 0x1065e6990>}

<class 'dict'>
```

##変数名の取得

返り値は普通のdictなのでkeysとかitems使えば取得できます。最初の例はこう書き換えられます。

```python
def hoge(name, email, message):
    for variable_name, value in locals().items():
        print(f"{variable_name} -> {value}")
```

変数名をリストで取得とかはこんな感じかな。

```python
def hoge(name, email, message):
    ls = [key for key in locals().keys()]
```

#で、どこで使えるの
正直変数名のstrが欲しくなる状況ってあまりないと思うんですけど、一つ思いつきました。
#####*引数と同じ変数名を使いがちなコンストラクタ内でならなんかいい感じに使えるのでは・・・？*
↓こんなコード

```python
class Account(object):
    def __init__(self, name, email, sex, age):
        self.name = name
        self.email = email
        self.sex = sex
        self......
```


これを変数名使ってやるとこうなります。

```python
class Account(object):
    def __init__(self, name, email, sex, age):
        for variable_name, value in locals().items():
            if not variable_name == 'self':
                self.__dict__[variable_name] = value
```
......引数めちゃくちゃ長いとかじゃないと使わないねこれは。


##結論
・locals()を用いて変数名を取得しよう
・楽するより見やすいコードを心がけよう
開発初心者が8か月間のチーム開発に参加して感じた反省

始めまして。大学の部活動として1年半ほどバックエンドの処理を書いてきたひとです。

つい先日まで、部活動の一環で一年間のプロジェクトとしてスマホ用にエンジニア向けのSNSアプリの開発にサーバーサイドとして関わっていました。
リリースを目指して自分たちだけで開発を行うという経験が初めてで、失敗したこと、こうしておけば良かったという反省点も多く感じています。
そこで今回はその振り返りとして、自分への戒めも兼ねて皆さんへそうした経験をお話できたらと思います。

#はじめに
まずはこれまでの自分の経歴について触れると、

・大学入学時に今の部に入部し、プログラミングを学び始める。
・夏頃からバックエンドの処理を学び初め、3-4か月ほどの期間で部の先輩方に誘導されつつ学祭で展示するアプリの開発に携わる。
・今年の春にプロジェクトの企画を立て、5,6月ごろから今回のアプリの開発を始める。

といった感じです。
2つ目の展示用のアプリは、先輩方に道筋を示してもらいつつ学びたての一年生たちが開発を行うというもので、開発の期間は勿論、自分たちだけで開発した訳ではありませんでした。
そのような状態から今回のプロジェクトを迎え、一から自分たちだけで作り上げるという事で得られた事も多いアプリ開発であったと思います。
アプリのもう少し詳しい説明はこのプロジェクトのPMを担当して頂いた先輩が [TechTrainを利用してチームでアプリ開発をした話（Android編）](https://qiita.com/switch23/items/30ee2a77cc25fdd2fabd) で触れて下さっているので、興味があれば見て頂ければと思います。

#1. 主体性をもつ
今回最も足りなかったと痛感しているのがプロジェクトへの主体性についてです。

巷でよく言われる、所謂指示待ち人間と言えばわかりやすいでしょうか。
去年の開発では先輩が道筋を立ててくれていたり（そもそも時間の制約が緩かった）、今回に関してもPMやサーバーサイドを引っ張ってくれた人がいてくれたりして、__自分の中で誰かがやってくれる__、だとか__とりあえず目の前の事をこなしていけばなんとかなるだろう__、という気持ちが少なからずあり、受け身な姿勢であったように思えます。

そんな中で、サーバーサイドの先導に立って居てくれていた方が直接の開発からは退く事になり、それから自分が主としてサーバーサイドを担当する事になりました。結果的に、

* 残っているタスクの量を正確に把握できていない
* 早い段階で気づけていたであろう誤りに気付かず仕様の修正が遅れる
* クライアント側との情報共有が不十分だった

というような事態が起こり、__プロジェクト全体にも幾分か影響を及ぼしていた__と感じています。
決して開発が嫌だとかプロジェクトをやめたいという気持ちがあった訳ではなく、自分たちで企画した一つのアプリを完成させたいという気持ちはあったものの、中だるみしていた感は否めません。結局、勢いを取り戻したのは後半に当時のペースに焦ってからでした。

指示待ちでも完璧に支持をこなせば問題ないでしょうが、少なくとも自分のようにただ受け身になってしまっているとこうした問題が起こりがちだと思いますし、グループワークである以上受け身が過ぎると相手からもコミュニケーションが取り辛く全体のパフォーマンスを下げてしまうように思います。

今回の反省から言えるのは最後まで__自分のやりたい事、目指す物__を意識し続ける事と、他人が何とかしてくれるのではなく(自分の影響外は除いて)__なんでも自分でその事について考えておく__という意識が大事だという事でしょうか。プロジェクトへの主体性というのは今後も強く意識していきたいです。

#2. コミュニケーションを疎かにしない
後半焦ってペースを上げていた時に出てきた問題なのですが、自分のペースを優先するためにコミュニケーションが疎かになってしまったと後悔している節があります。

どういうことかというと、仕様共有等のコミュニケーションにかける時間を削って自分の独断で作業を進めてしまうという状態です。
サーバーサイドは二人で担当していてお互い作業を分担しながらやっていたのですが、全体の実装に影響を及ぼしそうな部分だとか、API仕様の変更というような箇所について、自分だけで判断して「こういう風に実装したのでお願いします」というような場面を多く作ってしまいました。また、自分の頭の中でこういう仕様で考えているけどしっかり共有したか定かではないという箇所も幾らかありました。

本来「こうしたいんですがどうでしょうか」となる所を話し合いをすっとばして実装しているので、実装自体はペースが上がりますし後半の開発速度がそれで補われた部分はあります。それでもチームで開発するにおいて、せっかく人がいるのに個人で独走していた感があるのは流石に良くなかったと感じています。

焦っていたのもありますが、僕個人がコミュニケーションを面倒くさがっていた点があるのも事実です。一人で開発するのとチームで開発するというのは当然異なりますし、自分(だけ)がその場凌ぎでやりやすいからではなく、__コミュニケーションを大事にする__、__チームの利点を最大限活かす__、といった事を意識するべきだったと思います。

#おわりに
ということで、自分が今回のプロジェクトを経験して、反省した点、こうすると良かったという点を主に二点にまとめて書いてみました。
ただの自分への反省文と化していないかと心配しながら、この記事を見て下さった皆さんには何かしら伝えられていられれば幸いです。
開発中の時点でぼんやりと今回挙げた反省点については感じていたのですが、改めて文章にしてしっかりと振り返る事ができたような気がします。
来年も恐らく部の活動で何らかのプロジェクトに参加する事になると思うので、勿論他にも多くの場面で共通する事だとは思いますが、今回の経験、反省を活かして今後携わるものはより良いものに出来るように努めたいです。

拙い文章かもしれませんが、ここまで読んでくださった方には本当に感謝です。ありがとうございました。
KubernetesでMetricbeatを動かしたときにノードの情報が取れてない問題が発生した


#対象バージョン

kubernetes 1.16.2
Metricbeat 7.5.0

#調査

調査した結果、10255のポートがdisabled。
10250のポートを使う必要ある。設定を変える必要があることがわかった

>kubernetes 1.11から認証不要な外部連携ポートの10255は、kubeadm実行時にデフォルトでdisabledになるという変更が加わったらしい。
https://bon.sytes.net/post/metricbeat-with-kubernetesv1-11.html

[Metricbeat] - kubernetes metricsets get "connection refused" when querying http://${NODE_NAME}:10250/stats/summary on AWS EKS #13774
https://github.com/elastic/beats/issues/13774

#対応

https://github.com/elastic/beats/blob/master/deploy/kubernetes/metricbeat-kubernetes.yaml

変更前

```metricbeat-kubernetes.yamlの該当箇所
  kubernetes.yml: |-
    - module: kubernetes
      metricsets:
        - node
        - system
        - pod
        - container
        - volume
      period: 10s
      host: ${NODE_NAME}
      hosts: ["localhost:10255"]
      # If using Red Hat OpenShift remove the previous hosts entry and 
      # uncomment these settings:
      #hosts: ["https://${HOSTNAME}:10250"]
      #bearer_token_file: /var/run/secrets/kubernetes.io/serviceaccount/token
```

変更後
・「hosts: ["localhost:10255"]」をコメントにする
・hosts: ["https://${HOSTNAME}:10250"]のコメントは外す
・bearer_token_file: /var/run/secrets/kubernetes.io/serviceaccount/tokenのコメントを外す
・ssl.verification_mode: noneを追加
・以下のコードを追加

```
      processors:
        - add_kubernetes_metadata:
            in_cluster: true
```

```metricbeat-kubernetes.yamlの該当箇所
  kubernetes.yml: |-
    - module: kubernetes
      metricsets:
        - node
        - system
        - pod
        - container
        - volume
      period: 10s
      host: ${NODE_NAME}
      #hosts: ["localhost:10255"]
      # If using Red Hat OpenShift remove the previous hosts entry and 
      # uncomment these settings:
      hosts: ["https://${HOSTNAME}:10250"]
      ssl.verification_mode: none
      bearer_token_file: /var/run/secrets/kubernetes.io/serviceaccount/token
      processors:
      - add_kubernetes_metadata:
          in_cluster: true
```
【Vue.js】v-onの書き方まとめ【初心者向け】

## はじめに
Vue.jsの`v-on`の書き方のバリエーションが多かったので、整理のためにまとめました。

上から順番に読むと１つずつ変化するよう書いています。

参考：[Vue.js 公式ドキュメント](https://jp.vuejs.org/v2/guide/events.html)
## この記事が役に立つ方
- Vue.js初心者

## この記事のメリット
- `v-on`の書き方のバリエーションが分かる

## 環境
```
- macOS Catalina 10.15.1
- Vue.js: 2.6.10
```
## 前提
ボタンを押すと、画面上の数字が１ずつ足されるだけのアプリを例にします。

```:ディレクトリ構成
count
├ index.html
└ main.js
```

## 基本構文

```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Count App</title>
  </head>
  <body>
<!-- 以後ここから -->
    <div id="app"> 
      <button v-on:click=" n++ ">Count</button>
      <p>{{ n }}</p>
    </div>
<!-- ここまでで記載 -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="main.js"></script>
  </body>
</html>
```

```javascript:main.js
var app = new Vue({
    el: '#app',
    data: {
        n: 0
    },
// 以後ここから
    methods: {
    }
// ここまでで記載
})
```

## 短縮形
以後、`v-on:click`=>`@click`と短縮形で記載します。

```html:index.html
    <div id="app"> 
      <button @click=" n++ ">Count</button>
      <p>{{ n }}</p>
    </div>
```

## メソッドを渡す
もともとは数式をそのままhtml側に記載していました。
後々のことを考え、**メソッドに変更**します。

```html:index.html
    <div id="app">
      <button @click="countUp">Count</button>
      <p>{{ n }}</p>
    </div>
```

```javascript:main.js
    methods: {
        countUp: function() {
            this.n += 1
        }
    }
```
ここで、`this.n`は`data`内の`n`を参照しています。

## メソッドを引数付きで渡す
ボタンを押すと**アラートが発動**するようにします。

```html:index.html
    <div id="app">
      <button @click="countUp('Get money!')">Count</button>
      <p>${{ n }}</p>
    </div>
```

```javascript:main.js
    methods: {
        countUp: function(comment) {
            this.n += 1
            alert(comment)
        }
    }
```

この数字はお金($)だったようですね！
## イベント修飾子を使う
喜びは束の間。

無限にお金が湧いてくるなんて虫のいい話はないので、**一回しかボタンを押せない**ようにします。

```html:index.html
    <div id="app">
      <button @click.once="countUp('Get money!')">Count</button>
      <p>${{ n }}</p>
    </div>
```

```javascript:main.js
変更なし
```

## キーを使う
クリックではなく、`Enter`キーを押すとカウントされるようにします。

```html:index.html
    <div id="app">
      <button @keyup.enter.once="countUp('Get money!')">Count</button>
      <p>${{ n }}</p>
    </div>
```

```javascript:main.js
変更なし
```

## キーを使う
さらに**ガードを固く**しましょう。
`Shift + Enter`キーでカウントされるようにします。

```html:index.html
    <div id="app">
      <button @keyup.shift.enter.once="countUp('Get money!')">Count</button>
      <p>${{ n }}</p>
    </div>
```

```javascript:main.js
変更なし
```

長くなりましたが以上です！

## おわりに
最後まで読んで頂きありがとうございました:bow_tone1:

基本ですが、何度も使いそうな知識なのでまとめてみました。
どなたかの役に立てればと思います:relaxed:

## 参考にさせて頂いたサイト（いつもありがとうございます）
- [Vue.js 公式ドキュメント](https://jp.vuejs.org/v2/guide/events.html)
凸関数から機械学習を理解する

# 記事の目的
機械学習手法の多くは、概ね以下のフローを辿りアルゴリズムが構成されます。
１．目的関数と制約条件を定式化し、最適化問題を考える
２．制約条件のもとで目的関数を最小化（もしくは最大化）する更新式を求める
３．収束条件を満たすまで交互最適化を行う

特に、２．の**更新式を求める**のところで、凸関数の概念が必要になります。
ただし、多くの機械学習の文献では、「読者の皆は凸関数になってるのわかるよね！！」という感じで議論が進み明確に説明することはありません。そんな感じなので、卒研ゼミや研究指導していても、**この関数は凸関数だから偏微分して整理すればこの式が出てくるよね（ニッコリ）**と言ってもあんまり理解してもらえません。ということで、機械学習を勉強するうえでは、凸関数を知っておいたほうがよかろうということでこの記事を書きます。


## 凸関数 is 何
簡単に言うと、高校生のときに出てきた**下に凸な関数**を**凸関数(convex function)**と言います。例えば、$f(x) = x^2$は凸関数です。反対に、**上に凸な関数**を**凹関数(concave function)**と言い、$f(x) = -x^2$は凹関数になります。

凸関数は非線形な関数の最小化（最大化）を考える際に必要となります。機械学習分野では、**凸関数の最小化**（$f(x) = x^2$を最小化する$x$を求める）という形で最適化問題を定義することが多いです。**凹関数の最大化**（$f(x) = -x^2$を最大化する$x$を求める）の場合は、目的関数に-1を書けて、**凸関数の最小化**に変形して考えます。

何故そのようにするかというと、同じ枠組みで議論を進める方が全体の見通しが良い、くらいの説明に留めておきます。興味がある方は、システム最適化、最適化数学、数理計画法などのテキストの序論あたりを読むとなんとなく雰囲気が掴めると思います。

### 凸関数の定義
凸関数の定義は概ね以下となります。もっと良い定義の仕方もありますが、ここでは機械学習に使うことを考えて、説明を少し簡略化しています。

**定義　凸関数**
$f$を$p$変数の実数値関数とする.ここで、任意の$x, y \in \Re^p$と任意の$0\leq\lambda\leq 1$に対して、
$$
f(\lambda x + (1-\lambda)y) \leq \lambda f(x) + (1-\lambda)f(y) 
$$ 
が成り立つならば、凸関数と呼ばれる。

条件式がやや難しそうですが、簡単に考えると、まず２点$x, y$を選びます。すると、左辺は$x, y$間のどこかの関数$f$上の値、右辺は$f(x)$と$f(y)$をつないだ直線上のどこかの値、になっています。$0\leq\lambda\leq 1$に対して、常にこの式が成り立つとき、関数$f$は凸関数となります。図を書くとスッキリとわかると思います。~~余白はあっても時間が足りない。準備が遅くて本当にすいません。~~

[このへん](https://mathtrain.jp/convexconcave)を見てください。

### 凸関数の見分け方
１変数関数の場合は、２階微分が常に正であれば凸関数となります。つまり、傾きの傾きが常に正になるということなので、傾きが常に増加するということです。

多変数関数の場合は、ヘッセ行列が半正定値になれば凸関数となります。**行列が半正定値**であることを調べるには、固有値がすべて非負であることを示せればOKです。**固有値が非負**なので、固有値に０を含んでも大丈夫です。最近は行列計算のパッケージが手軽に使えるので、そういった調べ方もありです。ただし、数値計算的に求めることになるので、注意が必要な場合もあります。

### 凸関数の例
例えば回帰分析の目的関数は以下で表されます。
$$
J(w) = \sum^n_{k=1}(y_k- (w^Tx_k + b))^2 \longrightarrow \min
$$
ここで、$k$はデータ番号、$n$はデータ数、$y_k \in \Re$は目的変数、$x_k \in \Re^p$は説明変数、$b$は回帰式の切片を意味します。繰り返しの説明になりますが。$y_k$はスカラーで$x_k$は$p$次元の実ベクトルになっています。$J(w)$の式は**残差の総和を最小化**という式になっています。

この式は、総和の記号がついていますが、$(y_k- (w^Tx_k + b))^2$だけを見ると自乗の関数、つまり凸関数になっています。そして、凸関数には、**凸関数の和は凸関数**という重要な性質があります。つまり、$J(w)$は凸関数になっているので、$J(w)$を$w$について偏微分して整理してやれば、目的関数を最小にする$w$が求まります。


## 機械学習チョットデキルを目指して
本記事では凸関数の例として回帰分析を例に取り上げました。この他にも、代表的クラスタリング手法である$k$-meansや混合ガウスモデル、また判別問題を扱うサポートベクターマシンなど、多くの機械学習手法は、凸関数を用いて構成されています。$k$-meansについてはそのうち別の記事で書こうと思います。

機械学習は、大学１〜２年で学ぶ線形代数、解析、確率統計などに基づいて構成されています。個人的には、情報系や工学系の数学の基準として、応用面では機械学習やパターン認識、理論面ではシステム最適化（最適化数学）があると思っています。本記事では扱いませんでしたが、**ラグランジュの未定乗数法**の使い方だけでも理解しておくと、機械学習の勉強はずっとやりやすくなると思います。式変形などの教科書の行間を埋める作業は、力がつく重要な取り組みですが、とても時間がかかることがあります。一人で頑張るには限界があると思いますので、友人・教員・Webなど様々なインフラを活用して頑張ってください、というか私もやっていかないと**マジでやばい**です。
ブランチにマージされたPRを書き留めておくGitHub Actionを作った

この記事は、[VALU Advent Calendar](https://qiita.com/advent-calendar/2019/valu)の9日目の記事です。

こんにちは、Xamarin人材です。今年もQiitaに書く季節がやってきました。
今回のお題は[Github Actions](https://help.github.com/ja/actions/automating-your-workflow-with-github-actions/about-github-actions)です。

# やりたいこと
弊社のアプリのブランチフローを↓こんな感じにしようとしてまして（一部簡略化してます）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46184/5a5cb655-2533-1f4f-dcc5-9e2288487aaf.png)

releaseブランチでのビルドに対して開発環境でのQAを実施することにしてるのですが、
QAの方に「このPRがマージされてるよ！」っていうのをわかりやすく楽にお伝えしたいなーと思いました。
**上図ですと、 `feature/fuga` と `feature/piyo` が `release/hoge` マージされてるよ！ということをわかりやすくしたい。**

そのために、releaseブランチのPullRequestのDescriptionに、
当該releaseブランチにマージされたPRたちが記録されていくようなactionをつくりました。

# 動作イメージ
### リリースブランチのPRを用意
このブランチに、featureブランチをマージしていって機が熟したらリリースするイメージです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46184/0d8a47e3-793b-b236-90d1-b2d8dbb3ec07.png)


### とある機能ブランチのPRを用意
よくあるfeatureブランチです。
開発でのレビューや動作確認が終わったらマージされるやつです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46184/cc659dc0-84d2-cfbf-bbde-99c5449437e8.png)

### 機能ブランチをマージすると...


### こうじゃ！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46184/8e7405fe-b8e0-d30e-2391-834a234fa85e.png)

はい、マージしたPR番号が追記されましたね。うれしい！よね？

# 実装
https://github.com/takuya-kikuchi/action-track-merged-pr
こちらです。

## 参考
[公式のチュートリアル](https://help.github.com/ja/actions/automating-your-workflow-with-github-actions/creating-a-javascript-action)がえらいわかりやすかったです。

# つかいかた
細かい処理はActionとして切り出されているので、 `uses` の一言で利用可能です。
なのでこんなWorkflowを書くだけです。かんたん！
また、APIトークンを払い出したりしなくていいのが本当に楽ですね。

```main.yml
name: OnMergedPullRequest

on:
  pull_request:
    # PRのクローズ時にトリガーされるようにする
    types: [closed]
jobs:
  track_merged_pr_job:
    runs-on: ubuntu-latest
    steps:
    - name: Track merged PR
      uses: takuya-kikuchi/action-track-merged-pr@v1
      with:
        REPOSITORY_OWNER_NAME: ${{ github.event.pull_request.base.repo.owner.login }}
        REPOSITORY_NAME: ${{ github.event.pull_request.base.repo.name }}
        MERGED_PR_NUMBER: ${{ github.event.pull_request.number }}
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
```

実際の使用例は[こちら](https://github.com/takuya-kikuchi/track-merged-pr-usage/)。

# おわりに
AdventCalendarに間に合わせるために慌てて作った（しかし間に合わなかった）Actionなので、怖くてまだプロダクションにはいれてませんが、近いうちにこっそり突っ込もうと思っています。もし事故ったら来年のネタにします。

それではまた。
PHP基礎 Part7

# 概要
PHPの独学で学んだことをアウトプットしていく

## 前回の内容
[PHP基礎 Part6]
[PHP基礎 Part6]:https://qiita.com/k__aizawa/items/f9195b105cc4caa48fed

## オブジェクト指向について
オブジェクトつまり「もの」を対象にした考えである
ものを作り、ものを操作するといった考え方
プログラミングでもオブジェクト思考をベースに実装することで、
プログラムにおける役割の明確化やコードの可読性・保守性に役立つ。
例えばECサイトであれば、「商品」「ユーザー」「カート」といったオブジェクトが存在し、
それぞれのコードを用意するようなイメージである

### オブジェクト
直訳すると「もの」になる
プログラミング上では、データや処理の集まりを指す
上記のECサイトの例で考えると、ECサイトの利用者には氏名、年齢、性別、住所といったデータがある
また、ECサイトでは商品をカートに入れる、支払方法を選ぶ、購入するといった処理がある

### クラス
オブジェクトの設計書のような役割を持つ
オブジェクトの中に、後述するプロパティやメソッドを一纏めにしたもの
以下は、飲食店での注文を想定したプログラムを作成する

```PHP:sample.php
<?php
class Menu {  // クラスは「class クラス名」と定義する
  // クラスの内容を入力
}
?>
```

### インスタンス
クラスという設計書をもとに作成されたものを指す

```PHP:sample.php
<?php
class Menu {
}

$menu1 = new Menu(); // インスタンスは「new クラス名()」と定義する
$menu2 = new Menu();
$menu3 = new Menu();
?>
```
### プロパティ
オブジェクトが保有するデータや属性を表す

```PHP:sample.php
<?php
class Menu {
  public $name; // プロパティは「public $プロパティ名」と定義する
}

$menu1 = new Menu();
$menu2 = new Menu();
$menu3 = new Menu();
?>
```
作成したプロパティへアクセスするには以下の通り

```PHP:sample.php
<?php
class Menu {
  public $name;
}

$coffee = new Menu();       // インスタンス名 -> プロパティ名で該当のインスタンスへのアクセスが可能
$coffee -> name = 'COFFEE'; // プロパティに値をセットする

echo $coffee -> name;       // セットしたプロパティにアクセスする 
// 結果:COFFEE
?>
```

### メソッド
オブジェクトに関する処理や操作を指す
関数と全く同じわけではないが、特徴は似ているくらいの認識でOK

```PHP:sample.php
<?php
class User {
  public $name;
  public function order(){   // メソッドは「public function メソッド名()」と定義
    echo 'ご注文はどれにしますか？';
  }
}
```
作成したメソッドを呼び出すには以下の通り

```PHP:sample.php
<?php
class User {
  public $name;
  public function order(){   // メソッドは「public function メソッド名()」と定義
    echo 'ご注文はどれにしますか？';
  }
$coffee = new Menu();
$coffee -> order();          // インスタンス -> メソッド名でメソッドの呼び出しが可能
}
?>
```
また、メソッド内でインスタンスのプロパティやメソッドに
アクセスしたい場合、__「$this」__という特殊な変数を用いる

```PHP:sample.php
<?php
class Menu {
  public $name;
  public function order(){
    echo 'ご注文は'.$this->name.'でよろしいですか？';
  }
}
$coffee = new Menu();
$coffee -> name = 'COFFEE';
$coffee -> order(); 

// 結果:ご注文はCOFFEEでよろしいですか？
?>
```
### コンストラクタ
メソッドの一種で、newを用いてインスタンスを作成する時、
コンストラクタが自動的に呼ばれる

```PHP:sample.php
<?php
class Menu {
  public function __construct(){  // コンストラクタの作成
    echo 'メニューを作成します';       // コンストラクタ内で行いたい処理
  }
}

$coffee = new Menu();
// 結果:メニューを作成します

?>
```
また、コンストラクタは引数を設定することも可能

```PHP:sample.php
<?php
class Menu {
  public $name;
  public function __construct($name){  // 受け取る引数の設定
    echo $name;                        // コンストラクタ内で行いたい処理
  }
}

$coffee = new Menu('COFFEE');          // コンストラクタへ与える引数を設定
// 結果:COFFEE

?>
```
コンストラクタ内で$thisを使用し、インスタンスのプロパティをセットすることも可能

```PHP:sample.php
<?php
class Menu {
  public $name;
  public function __construct($name){
    $this -> name = $name;             // $thisを用いて、インスタンスのプロパティを設定
  }
}

$coffee = new Menu('COFFEE');
echo $coffee -> name;
// 結果:COFFEE

?>
```
DockerでphpMyAdminを起動してみる

AWS Workspaces
Amazon Linux2

```docker-compose.yml
version: '3.7'

services:
  mariadb:
    container_name: mariadb
    hostname: mariadb
    image: mariadb:10.4.10
    volumes:
      - ./mariadb/data:/var/lib/mysql
    env_file:
      - ./.mariadb.env
  phpmyadmin:
    container_name: phpmyadmin
    hostname: phpmyadmin
    image: phpmyadmin/phpmyadmin:5
    env_file:
      - ./.phpadmin.env
    depends_on:
      - mariadb
    ports:
      - 4040:80
    volumes:
      - ./phpmyadmin/sessions:/sessions
```

```.mariadb.env
MYSQL_ROOT_PASSWORD=root
MYSQL_DATABASE=test
MYSQL_USER=test
MYSQL_PASSWORD=test
```

```.phpmyadmin.env
PMA_ARBITRARY=1
PMA_HOST=mariadb
PMA_USER=test
PMA_PASSWORD=test
```

```
mkdir -p mariadb/data
chmod 777 mariadb/data
mkdir -p phpmyadmin/sessions
chmod 777 phpmyadmin/sessions

docker-compose up -d
```

![phpmyadmin.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208807/ea65278a-e7cb-aae1-c22b-62f92e5e27b2.png)
gRPC-Pythonでprotocolbuffers型を扱うときに使うメソッドCopyFrom, Extendについて



pythonでgRPCを使用する場合、protocolbuffer(pb2)型を使用することになります。
このprotocolbuffer型は扱う際に注意する点がいくつかあったので記事にまとめます。

## CopyFromメソッドを使用したprotocolbuffer型の代入処理


例えば、以下のようなproto定義があるとします。メソッド1つのシンプル設計です。

```proto:user.proto

service UserService {
  rpc GetUser(GetUserRequest) returns (User) {}
}

message Size {
  int32 height = 1;
  int32 weight = 2;
}

message User {
  string id = 1;
  string name = 2;
  Size size = 3;
}

message GetUserRequest {
  string user_id = 1;
}

```

以下は上記のprotoファイルを使用したUserServiceのサーバーサイド実装例です。

```python
import user_pb2

class UserService():
  def GetUser(self, request, context):
    # dbのユーザをget
    db_user = db.get(request.user_id)
    
    # sizeを定義し、値を追加
    size = user_pb2.Size()
    size.height = db_user.height
    size.weight = db_user.weight

    # userを定義し、値を追加して返却
    user = user_pb2.User()
    user.id = db_user.id
    user.name = db_user.name
    user.size = size

    return user
```

上記のGetUserメソッドを実行すると、TypeErrorでエラーとなってしまいます。
どこが問題かというと、コード最後から2番目の行`user.size = size`の部分です。

Size型のオブジェクト型であるsizeはUser型で定義されているsizeの型と同じですが、そのまま代入するとエラーとなってしまいます。
ここで使用するのがCopyFromというメソッドです。
上記のコードの問題箇所を以下のように書き換えることでTypeErrorなくコードが実行されます。

```python
import user_pb2

class UserService():
  def GetUser(self, request, context):
    # dbのユーザをget
    db_user = db.get(request.user_id)
    
    # sizeを定義し、値を追加
    size = user_pb2.Size()
    size.height = db_user.height
    size.weight = db_user.weight

    # userを定義し、値を追加して返却
    user = user_pb2.User()
    user.id = db_user.id
    user.name = db_user.name
    user.size.CopyFrom(size)

    return user
```

Typeメソッドを使って比較してもsizeオブジェクトはSize型なので気付きにくいですが、protocolbuffer型として代入する際はCopyFromを使用しなければ正しく代入できません。


## Extendを使用したrepeatedな型の代入

repeatedな定義でも代入時に気をつける点があります。
前のUserServiceを書き換えた次のprotoファイルを使用して説明します。

```proto:User.proto

service UserService {
  rpc GetUser(GetUserRequest) returns (User) {}
}

message Item {
  string id = 1;
  string name = 2;
}

message User {
  string id = 1;
  string name = 2;
  repeated Item items = 3;
}

message GetUserRequest {
  string user_id = 1;
}

```

sizeをitemsというrepeatedな型に変えました。以下がUserServiceのコードです。


```python
import user_pb2

class UserService():
  def GetUser(self, request, context):
    # dbのユーザをget
    db_user = db.get(request.user_id)
    
    # itemを複数定義し、itemsリストを作成
    item1 = user_pb2.Item()
    item1.id = '1'
    item1.name = 'item1'

    item2 = user_pb2.Item()
    item2.id = '2'
    item2.name = 'item2'

    items = [item1, item2]

    # userを定義し、値を追加して返却
    user = user_pb2.User()
    user.id = db_user.id
    user.name = db_user.name
    user.items = items

    return user
```

上記のコードを実行すると、やはりTypeErrorが発生します。問題箇所は同じく`user.items = items`の部分です。
repeatedなフィールドに代入する場合はextendメソッドを使用します。

```python
    user.items.extend(items)
```

上記のようにextendを使用することで配列の型に値を設定することが可能になります。

なぜこのように扱う必要があるのかはgoogleの公式ページ等で確認しましたが、いまいち説明されていませんでした。
protocolbufferはPython上だと癖がある感じなので注意して使っていきましょう！
Blenderで遊ぼう

今日はCやPythons,PHPなどのプログラム言語からちょっと道を外れてBlenderと言うキャラクター、アニメーション制作ソフトウェアについて語ろうと思います。
Blenderはキャラクターやアニメーションの制作が出来るソフトウェアです。
キャラクターはメッシュと呼ばれるブロックや球みたいなものを拡大・縮小したり切り取ったりして作ります。
アニメーションは作ったキャラクターにボーンと呼ばれる骨みたいなもので骨組みを作り、そのボーンを動かすことによって作ることが出来ます。
また、作ったものはUnity等に使うことが出来ます。
他にもPythonがかけたり、他のソフトで作ったキャラクターに動きをつけることも出来ます。
是非皆さんもBlenderでキャラクターやアニメーション作ってみてください!
Rails+LazyHighChartsでチャートを描画する

（この記事は、[高専OBOG Advent Calendar 2019](https://adventar.org/calendars/4238)の12/10に送った記事です。）

# 要約

Ruby on Railsでは、[LazyHighCharts](https://github.com/michelson/lazy_high_charts)というgemを使うことで、簡単にきれいなチャートを描画することができます。
JavaScriptの知識がほとんどなくてもチャートの描画までたどり着くことができます。

流れはこんな感じです。

1. gemのインストール
1. controllerでやること
1. viewでやること
1. 動作確認

本家のREADME.md: https://github.com/michelson/lazy_high_charts/blob/master/README.md

# チャートの描画まで

## gemのインストール

LazyHighChartsが欲しいので、Gemfileに書きます。

```ruby
gem 'lazy_high_charts'
```

そして`bundle install`します。

```console
$ bundle install
```

特に問題なければ `Bundle complete!` と表示されます。

## controllerでやること

LazyHighChartsインスタンスを作ってあげます。
書き方は本家のREADMEを参考にして下さい。
https://github.com/michelson/lazy_high_charts/blob/master/README.md#controller-code

```ruby
@chart = LazyHighCharts::HighChart.new('graph') do |f|
  # your super sexy chart code...
end
```

## viewでやること

どこかでHighchartsを読み込みます。
雑にやるなら、本家のCDNを指定すればダウンロードできます。
なお、gemのREADMEではAsset Pipelineに組み込む方法が書かれています。

```html
<script src='https://code.highcharts.com/highcharts.js'></script>
```

controllerで作ったインスタンス変数を`high_chart`ヘルパで指定すれば、viewにチャートが描画されます。

```erb
<%= high_chart('my-first-chart', @chart) %>
```

# 感想

JavaScriptの知識がある場合は、素直にHighcartsをJavaScriptから呼ぶ方が、シンプルでいいと思います。
私は普段JavaScriptを読み書きしていないので、LazyHighChartsのように簡単にチャートが描画できるgemはとても便利だと思いました。
Datadog🐶にwebSocketの接続数を記録した話

# はじめに
Datadog Advent Calendar 2019の12/11の記事です。
最近弊社でもDatadogを採用し始めました。サービスはまだリリース前で絶賛開発中です。
ちょうどDatadogのAdventCalenderがあるよと先輩に教えてもらったので、飛び入りで参加してみました。

# 何をしたのか
WebSocketの接続数をDatadogに記録した。
これだけですすいません。
経緯としては弊社で開発中のWebRTCのサービスの負荷試験を行う際に
WebSocketクライアント(シグナリングに使っている)の接続数を記録しておきたかったので
ささっとスクリプトを書いたらかんたんにDatadogのダッシュボードで見ることができるようになったぜということです。

AWSだったのでCloudWatch Logsにカスタムメトリクスを飛ばせばいいとも思ったのですが
権限周りで数分つまったのでええいDatadogになげちゃえと
すぐあきらめちゃうのも時には大事🐶

# スクリプト
```
#!/bin/bash
API_KEY=xxxxxxxxxxxxxxxxxxx
HOST=xxxxxxxxxxxxxxxxx
while :
do
    count=$(netstat -anop | grep 443| grep ESTA| wc -l)
    currenttime=$(date +%s)
    curl -s -X POST -H "Content-type: application/json" \
        -d "{ \"series\" :
            [{\"metric\":\"wss-socket\",
            \"points\":[[$currenttime, $count]],
            \"type\":\"gauge\",
            \"host\":\"${HOST}\",
            \"tags\":[\"hostname:${HOST}\", \"region:ap-northeast-1\"]}
            ]
        }" "https://app.datadoghq.com/api/v1/series?api_key=$API_KEY"
    sleep 10
done

```

これだけです。
単純にnetstatで出したものをカウントして送っているだけですね。
![datadog.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68981/ac4ec363-ae67-507f-b93f-62277a5f6bed.png)


# まとめ
Detadogちょっとつかえるようになった🐶
初学者が、プロパティを考えたら深くなった。

#マジの初心者は基礎自体分からん！
プログラミング開発において、8割が調べる時間というデータがあるそう。
しかも、覚えるというよりかは、調べて書くみたいな事がほとんどだそうな。

こういうのも０からベースの初学者にしてみたら知らない話である。

だからサンプルコードを書いていて分からなくなるポイントは山ほどある。

今回は学習中に出てきた

 ```
import UIKit

//スーパークラスUIViewControllerを継承したclass ViewController
class ViewController: UIViewController {

//   プロパティの宣言
   @IBOutlet weak var label: UILabel!

//   メゾットの宣言
    @IBAction func sayHello(_ sender: Any) {

    label.text = "こんにちは"
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }


}
 ```
の、この部分

 ```
    //   プロパティの宣言
    @IBOutlet weak var label: UILabel!

    //   メゾットの宣言
    @IBAction func sayHello(_ sender: Any) {
    label.text = "こんにちは"
 ```
の「メゾット」と「プロパティ」ってなんだっけ？　について改めて書いていく！

確か、classとかの学習のついでに登場した記憶があるなぁ。

##Outlet　Actionとは
###Outlet
ここでいうOutletは、ストーリーボード上のUI部品を<b>プロパティ</b>として接続するという意味を持つ。

という事だそう。

###Action
ここでいうActionは、ストーリーボード上のUI部品を<b>メゾット</b>として接続するという意味を持つ。


ストーリーボードのUI部品はわかる。
LabelとかButtonとかね！

じゃあその<b>プロパティとメゾットってなんだよぉ！</b>

その為にはUI部品と、Classについて理解する必要がありそうだ。

##Classってなんだ

https://www.sejuku.net/blog/34191

上記のリンクはスクールの解説なので参考になるかもしれない。

よく言われるのが<b>「鯛焼きの型」</b>だ。

![鯛焼き.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546679/6c49842b-6457-85ab-034a-6c85db418baf.png)


swiftでは、UI部品のテンプレートの型である。

ボタンとか、スライドするバーとか（UISlider)とかね。

よく<b>鯛焼きの型</b>と例えられているよね。

<b>僕的には鯛焼きの型のイメージが良く分からないんだけどね笑。</b>
つまりUIのテンプレートだよね。

![スライダー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546679/26ed5811-256e-2207-259e-1956425eb34a.png)

上のSliderがクラス（テンプレート）だとして

![スライダー２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546679/bb066714-efb2-706f-721f-116a9549b282.png)

こういう感じで、数字が入るとか、文字が入るとか、先が太くなるとか。
カスタマイズする。

これが<b>インスタンス</b>。

##Classからインスタンスを作る

Sliderのクラスから
![スライダー２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546679/bb066714-efb2-706f-721f-116a9549b282.png)
これを作ろうと思う。

で、クラスを使ってインスタンスを作ろうと思った時の公式は

>var<変数名> = <クラス名>()


となる。Uisliderclassを用いて、変数sliderインスタンスを作るとなると

 ```
var slider = UIslider
 ```

こうなる。

その後に

 ```
 var slider = UIslider

 slider.value = 1.0
 ```

というように、インスタンスに追加記入をしていってカスらマイズをしていく。
これを<b>プロパティ</b>という！！

はぁはぁ。やっとここまできたぞ泣。

##プロパティとはつまり…。
プロパティはつまり、インスタンスのカスタマイズできる部分である。

つまり、クラスというテンプレートから、作りたいUI部品を<b>インスタンス</b>といい、その<b>インスタンスをカスタマイズする</b>のが<b>プロパティ</b>。

な、なげえ！

ちなみにプロパティの表記方法は

> <インスタンスの変数名>.<プロパティの名前＞　＝　<値>

となる。

###まとめ
 ```
import UIKit

//↑playgroundの最初の表記
var str = "Hello, playground"

var slider = UISlider()
class、UISliderの変数sliderインスタンスを作成して

slider.value = 0.5
インスタンスsliderのvalueプロパティの値は1.0だよ
 ```
となる。

値の話は実際にPlaygroundで試してほしい。
0.5になるとどうなるとかね。

ともかく、インスタンスは（）がついたり.がついたりと紛らわしいから、とりあえず今日もコードを書こう！

けど

 ```
   //   プロパティの宣言
   @IBOutlet weak var label: UILabel!

   //   メゾットの宣言
    @IBAction func sayHello(_ sender: Any) {
    label.text = "こんにちは"
 ```

ってここでいうプロパティと違わね？
プロパティの宣言をしているけど表記が違うのはなんでだ！？泣

ともかく、初心者の僕は基礎だけ抑えておこう。

次はメゾットだ泣
Yattecast+S3でクローズドなポッドキャスト配信サイトをサクッと構築＋配信する

こんにちは。kaihiro です。

こちらは [Fusic Advent Calendar 2019](https://qiita.com/advent-calendar/2019/fusic) 12日目の記事です。

今年、思い立って社内ポッドキャストを始めました。
弊社のシンボル？でもある畳スペースから名前を取り `tatami.fm` と名付けています。
弊社も社員の数が50人を超えてきて、普段あまり話さない人が出てきたりどんなことをしているのか分からないということが発生するようになりました。そんななかコミュニケーションの一助に慣ればと取り組んでいます。

## 配信サイトの構築

初めはOffice365のSharePointを利用してファイルを共有し、社内の技術共有サービスに投稿する形で配信をしていましたが、せっかくなので配信サイトを作ってしまおうということで今回、作成してみました。

作成するにあたり、r7kamuraさんの[yattecast](https://github.com/r7kamura/yattecast)を利用させて頂きました！
ありがとうございます。

<img width="1440" alt="tatamifm.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55075/e87b222d-1e61-c7c4-b3b0-3a8e64f26523.png">

こちらはGitHub Pages上で動作するRuby製の[Jekyll](http://jekyllrb-ja.github.io/)というサイトジェネレータで作成されています。

今回は、社内向けポッドキャストということで、社外に出せない情報も含まれるため、yattecastで生成したページをS3の静的ホスティングを利用する形で配信しました。

## jekyll

rubyを導入していれば

```
$ gem install bundler jekyll
```

で簡単にjekyllを導入できます。

あとは、MarkdownやHTMLでコンテンツを記述していくだけです。

動作を確認する場合は

```
$ bundle exec jekyll serve --watch
```

でサーバを起動し、http://localhost:4000 からすぐに動作を確認できます。

`--watch` オプションを付けると、ファイルを修正した際に、自動で再buildしてくれます。

生成された静的ファイルは `_site` フォルダの中に作成されます。

```
bundle exec jekyll build
```

で明示的にbuildを実行することもできます。

## デプロイ

S3バケットに静的ホスティングの設定を実施したら、後はS3にコンテンツを同期するだけです。
※今回は社内からのみ接続できるようにS3へのアクセス制御を行いました。

AWS CLIを利用すれば、buildからデプロイまでをたった2コマンドで実施できます。

```
$ bundle exec jekyll build
$ aws s3 sync ./_site/ s3://{バケット名}/
```

簡単ですね！

## まとめ

Yattecast+S3を使って簡単にポッドキャストの配信サイトを作ることができました。
これで以前より気軽に聴いてもらえる環境ができたと思います。
本当に r7kamura さんに感謝です。

今後もゆるくポッドキャスト続けていきたいと思います。
Vimの縦移動を強化する

こちらの記事は [Vim2 Advent Calendar 2019](https://qiita.com/advent-calendar/2019/vim2) 10日目の記事になります。

縦移動が弱いと言われがちのVim。
確かに縦に狙った場所にバチッと移動するのは難しいような気がします。
バッチバチに動きたかったので、何か良い方法が無いか調べてみました。

# 行番号を相対表示にする

簡単かつ効果が大きかったものです。
行番号は、デフォルトでは絶対表示(頭からn行目)ですが、相対表示(カーソルからn行目)にすることができます。
相対表示にする事で、目的地までの距離がわかりやすくなり、カーソル移動やオペレータ範囲指定が爆速になります。
<img width="526" alt="スクリーンショット 2019-12-09 23.10.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402968/55f34931-f48f-a464-1d4d-201c071dbda5.png">
**例: 画像の`attr_encrypted`の行まで移動したい場合**
`6j`で該当の箇所に移動できます。
行番号部に6と表示されているため、現カーソルの6行下だということが瞬時にわかります。

### 設定
vimrcに以下を書くだけです。

```vimscript:.vimrc
set relativenumber
```

# `%` による移動の強化
Vimでは、`()`や`{}`など、対になる括弧は`%`で行き来することができ、縦移動の際によく使っていました。
この`%`による移動をプラグイン、`vim-matchup`を導入して強化します。

## [vim-matchup](https://github.com/andymass/vim-matchup)
vim-matchupを使うと、`()`や`{}`など以外にも、条件分岐などからの「オープン」「クローズ」「ミッド」の単語を検出し、`%`で移動することができます。
<img width="500" alt="スクリーンショット 2019-12-09 23.10.06.png" src="https://raw.githubusercontent.com/wiki/andymass/vim-matchup/images/match-up-hl1.gif">

また、`%`+αの便利なコマンドが用意されています。

**例**
- `]%` `[%` <br>外側の開閉単語へ移動
- `z%` <br>開単語の中に移動
- `dz%` <br>次の開単語まで削除

対応単語·記号のハイライト表示もされます。便利です。
## 設定
お使いのVimプラグインマネージャーを使ってプラグインをインストールしましょう
**例: dein.vim + toml**

```toml:toml
[[plugins]]
repo = 'andymass/vim-matchup'
```

# 縦方向f移動の実装
縦移動に関する記事を探していたら、偶然同じカレンダーで記事を書かれている方がいらっしゃいました。
こちらは[当カレンダー](https://qiita.com/advent-calendar/2019/vim2)2日目の記事で紹介されている方法です。
`.vimrc`に4行書くだけで`Space`と`f`を使った縦移動を実装することができます。
バチッと移動できますね。

>
Vim で縦方向 f 移動を実現した (@monaqaさん)
https://qiita.com/monaqa/items/9764e957523ad0b56aec

# おわりに
- **行番号を相対表示にする**
- **`%` による移動の強化**
- **縦方向f移動の実装**

3つしか紹介できなかったのですが、どれも便利な機能なので
是非試してみてください。
DockerでRedis Commanderを起動してみる

AWS Workspace
Amazon Linux2

```docker-compose.yml
version: '3.7'
services:
  redis:
    container_name: redis
    hostname: redis
    image: redis:5.0.7
    restart: always
    ports:
      - 6379:6379

  redis-commander:
    container_name: redis-commander
    hostname: redis-commander
    image: rediscommander/redis-commander:redis-commander-210
    restart: always
    environment:
      - REDIS_HOSTS=local:redis:6379
    ports:
      - 8081:8081

```

```
$ docker-compose up -d
```
![redis.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208807/4fac0278-ffc8-56e6-17d6-c889902be915.png)
MongoDB学習日記 - 2019/12/09

#目的
Herokuで作ったMongoDBで
1. DB作成
2. テーブル作成
3. CLIでDBに接続

#DB作成
```bash
$ heroku addons:create mongolab -a docomo-cycle-book
```

#テーブル作成
Admin UIをアクセスして、DBユーザ、テーブル、テストデータ等が作成できる；

```bash
$ heroku addons:open mongolab
```

#CLIでDBに接続
まず、上記のAdmin UIで接続URIを取得

```bash
$ mongo mongodb://<user>:<password>@ds253428.mlab.com:53428/heroku_c3swt6jb
```

DBを操作するコマンドはこれで分かる

```bash
rs-ds253428:PRIMARY> db.help()
```

例えば、検索はこんな感じ

```bash
rs-ds253428:PRIMARY> db.parking_lot.find({"id": "10150"})
{ "_id" : ObjectId("5dee642b7c213e7f195d053a"), "id" : "10150", "name" : "C5-07.港区立港南図書館", "ParkingEntID" : "TYO", "ParkingLat" : "35.632842", "ParkingLon" : "139.749500" }
```

データは上記のようなJSON文字列であり、
filed Nameも、field valueも""で囲まれることが必要；
:マークの後はスペースが必要；

#References
| Description | URL |
|:-----------------|:------------------|
|homepage of mLab MongoDB addon | [click me](https://elements.heroku.com/addons/mongolab) |
プログラミングを最速にするためのMACショートカット

プログラミングを最速にするためには、MACの存在を限りなく無にできるといい。
Finderやウィンドウを操作する時間を限りなく無にするための、おすすめショートカットはこちら。
*検証端末：macOS Catalina Version 10.15.1*

## ウィンドウ操作　ー画面切替を最速にー

|ショートカット|動作|備考|
|:-:|:-:|:-:|
|Ctrl + Command + f|フルスクリーン設定/解除||
|Ctrl + ←<br>Ctrl + →|フルスクリーンアプリ切替|★スワイプよりおすすめ！|
|Command + tab|アプリ切替||
|Command + m|ウィンドウ最小化||
|Option + Command + m|全てのウィンドウを最小化||
|Command + w|ウィンドウを閉じる||
|Command + q|アプリの終了||
|Option + Command + Esc|アプリの強制終了||
|Ctrl + ↑|Mission Controlを開く|Mission Control画面からウィンドウを切り替えたいが、できない？|

## Finder操作　ーファイル操作を最速にー

|ショートカット|動作|備考|
|:-:|:-:|:-:|
|Command + ↑<br>Command + ↓|上階層/下階層のフォルダへ|★階層移動に超おすすめ！<br>ファイル上で「Command + ↓」でファイルも開ける|
|Command + t|タブ追加||
|Ctrl + Tab|タブを移動||
|Command + w|タブを閉じる||
|Shift + Command + h|ホームに移動|★「cd」みたいに使えるので地味に便利|
|Shift + Command + p|プレビュー（サイドに表示）||
|ファイルを選択してスペース|プレビュー（別画面表示）|★PDFなどをファイルを開かずに見れるのでおすすめ！|
|Ctrl + Command + 0|グループ別にファイルを分けて表示|使用するグループ（種類、更新日など）は、表示メニューのグループ分けから選択、もしくは「Ctrl + Command + 1〜7」のショートカットを使用して切り替え|
|Option + Command + i|ファイル情報表示/非表示|「Command + i」でも開けるが、そっちの画面は閉じるのが面倒なので、こっちのほうがおすすめ|
|Command + d|複製||
|Ctrl + Command + a|エイリアス作成||
|Shift + Command + n|新規フォルダを作成||
|Option + Command + Delete|ゴミ箱に入れずに削除||


## 電源操作　ー離席、帰宅を最速にー

|ショートカット|動作|備考|
|:-:|:-:|:-:|
|Ctrl + Command + q|画面ロック|★離席時はこれ！|
|Option + Command + 電源ボタン|スリープ|Touch Barモデルでは使えない|
|Ctrl + Command + 電源ボタン|強制再起動|普通使わないが、間違って押さないように覚えておこう|
|Shift + Option + Command + q|ログアウト|普通使わないが、間違って(ry|
* MacBookだと、そのまま画面を閉じるのが最速という話も
* ホットコーナーでスリープさせてる人もいる

## マルチディスプレイ操作　ーディスプレイ移動を最速にー　※アプリインストールが必要

* MAC標準だとディスプレイ間の移動のショートカットはないので、別途アプリをインストール
* インストールするアプリは[Spectacle](https://www.spectacleapp.com/)

```
$ brew cask install spectacle
```

|ショートカット|動作|備考|
|:-:|:-:|:-:|
|Ctrl + Option+ Command + →<br>Ctrl + Option+ Command + ←|次の/前のディスプレイにウィンドウを移動|★超便利！<br>ドラッグで移動なんてしてられない|
|Option + Command + f|ウィンドウ最大化|フルスクリーンではなく、ウィンドウを最大化して使いたい時に便利|
|Option + Command + c|ウィンドウを中央に表示||
|Option + Command + ←<br>Option + Command + →|ウィンドウを左半分/右半分に表示||

* 他にも上下や４分割にウィンドウを配置する機能もあるので、ディスプレイ内のレイアウト調整に便利

## まとめ

個人的に、そのショートカットを知ったときのインパクトが大きかったものを集めました。
他にも便利なものを知っている人がいたらコメント欄で教えて下さい！
AWS でプライベートなデータを共有する

撮った写真を AWS にアップロードして共有したい、という時があると思います。

pre signed url という機能があります。日本語では、「署名付き URL」というみたいです。
（参考）
https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/PresignedUrlUploadObject.html

credential がわかっており、ansible が使えてしかも vault 設定をしていれば、簡単にそのパスを得られます。

ここに、上げておきました。

https://github.com/intrajp/aws_usecases

そろそろ年末かぁ。。
Vim用のDark themeカラースキーマ作りました

この記事は[Vim2 Advent Calendar 2019](https://qiita.com/advent-calendar/2019/vim2)の14日目の記事です。
## Motivation
Vimはそもそも黒い画面で構成されているものですし、「VimでDark theme...？」と思われる方も沢山いらっしゃると思います。

しかし、それでも現在アプリケーションで流行っている「Dark theme」のVimカラースキームを作ると面白いんじゃないかと個人的に思ったポイントがいくつかありました

1. 裏を返せばもともと黒い画面で動いているVimとDark themeは相性が良さそう
2. Dark themeの設計原則がGoogleより発表されていたので、試してみたい
3. Vimをモダンなカラーリングに仕立て上げたい

Dark theme自体はアプリケーション用のスタイルガイドなので、CLIのエディタとは少し趣が違いますが、今回はアプリケーション用のスタイルガイドに沿ってVim用のDark themeを作ってみることにしました。

## Principles (原理)
Googleより発表されているDark themeのデザインについてのスタイルガイドはこちらになります。

Dark theme
https://material.io/design/color/dark-theme.html

ざっとおさらいすると (Principlesの項目)

- 要素の前後の表現はダークグレーの濃さによって表現される（奥側：暗い←→明るい：手前側）
- 限られた色によるアクセント表現
- 電池消費量が良くなる
- コントラスト基準を守ってアクセシビリティも意識

といった感じです。

もともと黒い画面のVimなので、電池消費については置いておきましょう。

つまるところ背景色が黒なのでshadowのような表現は利用できず、濃淡で前後関係を表現し、また、利用できる色はコントラスト比を意識した限られた色になるようです。


早速適応していきましょう。

## Color Parret
先程のDark themeのサイトに配色の例が載ってます。
今回はthe Dark themeを目指してみるので、似たような配色で進めていきます。

なお、Primary、Secondory色選定の方針ですが、
> A dark theme should avoid using saturated colors

と、ある通り、彩度の高いものは目の疲れを起こさせる、テキストに対してのアクセシビリティの基準をクリアしていないということで、彩度が少し抑えられたものが採用されるようです。

また、文字色も3段階で細かくガイドが定められています。
ここで例として目立つ色は87%、中程度は60%、無効としての色は38%の透明度というように用途によってグレーの濃淡を使い分けます。

**詳しくは先程のサイトを見ていただくとして…**


要素の前後の表現のためのグレー色を多段階で用意し、ところどころこちらで少しアレンジが入っていますが下記のようにパレットを用意しました。
256色対応と16色進数が使えるGUIカラーの両方を対応しました。
<img width="623" alt="palette.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73446/9c77ba55-537a-6467-1a40-02d637e31cba.png">


（Diff用の色を一部特別に追加していますが、普段はあまり表に出てきません。）

## というわけで実際に適応してみる
こんな感じになりました。
https://vimcolors.com/960/darktheme/dark
（色足りなかったので、エラー色だった赤もちょっとしたアクセントで使ってます。）

<img width="983" alt="スクリーンショット 2019-12-14 0.57.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73446/8467fb38-9d8f-f211-3f05-d5d943051afb.png">



コードハイライトも色を揃えてしまいました。
ちょっと通常のコードの色付けと比較すると物足りない気がしますが、今回はThe Dark Themeを目指すゆえ、基本的に色を増やさない色の選定の方針かつ4,5色ほどあればいい感じに配色が分かれるだろうという感じです。
（普段、「これは青だから...関数だ！」みたいなハイライトの頼り方をしていなければたぶんそんなに困りません。たぶん...たぶん...）

## Plugin
https://github.com/kamykn/dark-theme.vim
プラグインにしてみました。

例えばプラグインマネージャーにvim-plug使っている方は

```vimscript:.vimrc
Plug 'kamykn/dark-theme.vim'
```
などとしてプラグインを有効にしてから、

```vimscript:.vimrc
syntax enable
colorscheme darktheme
```
と追記をしてください。

## まとめ
と、ここまで書いて実はこの記事は~~3,4ヶ月くらい放置~~この日が来るまで記事を温めていました。
~~やはり、ネタ臭がどうしても拭えず~~このままお蔵入りにするのもなぁと思ってたら、そういえば丁度良くアドベントカレンダーというのがあるじゃないか...と！😆🍰🍗🍻🎅🏻🎄

tmuxのステータスラインも合わせて紫に揃えて使ってみると、意外と悪くはない...？🙌

![スクリーンショット 2019-12-14 1.35.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73446/d5af916b-1e33-452c-1066-b7f966421ea8.png)


それでは皆さん、Happy Vimming!✌️🎉
VirtualBoxのメモ(ubuntuでHDDごと共有化)

 VirtualBox のツールバーの「デバイス」->
「Guest Additions CD イメージの挿入」をクリック。
 確認が求められます。「実行する」をクリック。

sudo gpasswd -a アカウント名 vboxsf
簡単な設定はこれで終わり