OmniAICreator/Qiita-1.07M huggingface dataset:
さくらのVPSにMinikubeをセットアップするスタートアップスクリプトを書いた 

# Minikubeとは
MinikubeはKubernetesの検証や開発者のために、簡単にKubernetesを実行できるツールです。シングルノードのKubernetesクラスタを実行します。

# スタートアップスクリプト
今回は[さくらのVPS](https://vps.sakura.ad.jp/)上にMinikubeをセットアップするスタートアップスクリプトを書きました。コントロールパネルからスクリプト→カスタムスクリプトの追加をクリックし、以下のスクリプトをコピーアンドペーストします。対応OSはUbuntu16.04です。

```
#!/bin/bash
set -x

# Install Docker
apt update
apt install -y curl
curl -fsSL get.docker.com -o get-docker.sh
sh get-docker.sh

#Install minikube
cat /etc/lsb-release
curl -Lo minikube https://github.com/kubernetes/minikube/releases/download/v0.25.2/minikube-linux-amd64 && chmod +x minikube && sudo mv minikube /usr/local/bin/

#Install kubectl
apt update && sudo apt install -y apt-transport-https
curl -s https://packages.cloud.google.com/apt/doc/apt-key.gpg | sudo apt-key add -
echo deb http://apt.kubernetes.io/ kubernetes-xenial main >> /etc/apt/sources.list.d/kubernetes.list
apt update
apt install -y kubectl
```

# Minikubeの起動
VPSが起動したら、SSHでログインして以下のコマンドを入力します。

```
$ sudo minikube start --vm-driver=none
$ sudo chown -R $USER.$USER $HOME/.kube
$ sudo chown -R $USER.$USER $HOME/.minikube
```

# 動作確認
4行目のcurlコマンドでちゃんと応答が帰ってくれば成功です。

```
$ kubectl run hello-minikube --image=k8s.gcr.io/echoserver:1.4 --port=8080
$ kubectl expose deployment hello-minikube --type=NodePort
$ kubectl get pod
$ curl $(minikube service hello-minikube --url)
```
Wio LTE/3Gシリーズで使えるライブラリMjGroveの紹介

Wio LTE, Wio 3G, Wio LTE M1/NB1(BG96)のご利用ありがとうございます。
Wio LTEを2017/10/25に発売して、もう1年。多くの方が手に取ってプロトタイピングの手軽さを体験、アイデアの実現を楽しんでいただいていると思います。

苦労しながらPCにArduino IDEやライブラリをインストールして、WioでLチカ、[Grove IoT スターターキット for SORACOM](https://soracom.jp/products/kit/grovestarter_kit_lte/)とサンプルコードを組み合わせて温度測ったり距離を測ったりSORACOM Harvestにデータを送信したりと、次から次へと動く様子はワクワクしました。
そういえば、Lチカはサンプルコードの光量が強すぎて「ま、眩しい。直視できん。」なんてことがありましたねw

# 前振り

サンプルコードも一通り楽しんだ後、自らのアイデアを実現するためにGroveモジュールを買い漁って試行錯誤に突入するわけですが、、、ここに大きな壁が。

例えば、[Grove - 4-Digit Display](https://www.seeedstudio.com/Grove-4-Digit-Display-p-1198.html)を使うぞー！

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109634/efb836d9-2ac3-c3ce-5285-679e7eae74e1.png)


とした場合に、[Seeed Wiki](http://wiki.seeedstudio.com/Grove-4-Digit_Display/)を見てみると、、、

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109634/d3bb43cf-2fcd-0919-21f9-d1cbac63be45.png)

Platforms SupportedのWioがバツではないので、一見Wio LTEに対応しているように見えますが、、、

これはWio Link/Wio Nodeの表示でして、Wio LTEに対応しているか否かではありません。
Wio LTEの対応表示は無いので、SpecificationsやSchematicを見て、接続しても大丈夫か確認する必要があります。（え？）

また、Wikiのちょっと下を見るとGetting StartedのSoftwareにサンプルコードがありますが、、、Seeeduino（Arduino Uno互換機）やRaspberry Piのもので、Wio LTE用はありませんorz

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109634/578dc102-e997-7e14-9127-ce7be5bf916f.png)

# MjGrove

そこで、MjGroveというリポジトリに、

* Wio LTEで使えるGroveモジュール一覧
* Groveモジュールのライブラリ
* Groveモジュールのサンプルコード

を整備しています！！

## Wio LTEで使えるGroveモジュール一覧

MjGroveのreadmeに、Wio LTEで動作確認、ライブラリを用意した[Groveモジュール一覧](https://github.com/matsujirushi/MjGrove#grove%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB)を掲載しています。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109634/d97db905-7982-fb7c-7e84-c8195aca06a2.png)

使う際は、Noteを必ず確認してください。（作成中のものとか、ちょっと問題ありそうなものもコミットしています。）

## ライブラリ

`MjGrove`という名前で、Arduino IDEから検索、インストールできるライブラリを用意しています。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109634/3b8540b4-a4ee-e9b8-a612-2d77a5a84861.png)

## サンプルコード

Arduino IDEにライブラリを追加すると、スケッチ例のところにサンプルコードが追加されます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109634/38596ac5-6c7e-c1b3-0715-258001eba833.png)

# MjGrove使用例（Grove - 4-Digit Display）

```c++
#include <MjGrove.h>  // MjGroveライブラリを使用可能にする

#define INTERVAL    (100)

GroveBoard Board;                         // Wio LTEボード
Grove4DigitDisplay Display(&Board.D38);   // 4-Digit DisplayをWio LTEのD38に接続する

void setup() {
  delay(200);
#if !defined ARDUINO_STM32F4_WIO_GPS
  SerialUSB.begin(115200);
#endif

  Board.D38.Enable();           // Wio LTEのD38を有効化
  Display.Init();               // 4-Digit Displayを初期化
}

void loop() {
  for (int i = 0; i <= 9999; i++) {
    Display.print(i);          // 4-Digit Displayに数値を表示
    delay(INTERVAL);
  }
}
```

# 連絡事項

使用にあたって、いくつか連絡事項があります。

* MjGroveはmatsujirushi個人のプロジェクトです。Seeed社の提供するものではありません。
* うまく動かないとか、リクエストはgithubのissueで。日本語でお気軽にどうぞ。
* Groveモジュールは、matsujirushiの気に入ったものとか、興味もったものだけです。
* プログラミングマニュアルとかリファレンスマニュアルとかを作る予定はありません。（サンプルコードとソースを見て。）←Qiitaなど、記事大歓迎！感激！

もちろん、プルリク歓迎。
あと、githubのMjGroveにStarを付けてもらえるとやる気がでますのでよろしくお願いしますm(__)m

# 参考

* [Wio LTE/Wio 3G 知っトク情報 2本立て](https://www.slideshare.net/TakashiMatsuoka2/wio-ltewio-3g-2)
エンタープライズ向けオープンソース CMS「eZ Platform」の概要

## eZ Platform とは
https://ezplatform.com/
eZ Platform は PHP で開発されているオープンソースのエンタープライズ向け CMS です。ノルウェー王国の [eZ Systems](https://ez.no) 社によって1999年から eZ Publish として開発されてきました。

12月1日現在の最新バージョンは [eZ Platform 2.3.2](https://github.com/ezsystems/ezplatform/releases) です。

## eZ Platform の特徴
* 開発元企業 (eZ Systems 社) による有償サポート
* フレームワークに [Symfony](https://symfony.com/) をフルスタック採用
* コンテンツを視覚的な階層構造で管理できるツリー表示
* ユーザーを階層的に整理できるユーザー管理
* ユーザー権限の詳細な設定が可能な権限管理
* ユーザーも含めて項目を自由に編集できるコンテンツタイプ機能
* 同一コンテンツを複製せずに複数配置できるロケーション機能
* 同一コンテンツに複数の翻訳言語を登録できる多言語対応
* 同一コンテンツに複数のテンプレートを持たせられるサイトアクセス

## eZ Platform に適したサイト
* 部署やユーザー数が多い組織で利用するサイト
* ユーザーやコンテンツの内容に応じて細かく権限を設定する必要のあるサイト
* 同一コンテンツを複数の出力（テンプレート）で配信するサイト
* 多言語展開が必要なサイト
* コンテンツの階層構造が複雑なサイト
* コンテンツの種類や決まった入力項目が多いサイト

## システム要件
https://doc.ezplatform.com/en/latest/getting_started/requirements/

|システム|要件|
|---|---|
|OS|Linux|
|Web サーバー|Apache 2.4, with required modules mod_rewrite, mod_env and recommended: mod_setenvif, mod_expires event MPM is recommended, if you need to use prefork you'll also need the mod_php module<br>Nginx 1.10, 1.12, 1.14|
|DB サーバー|MySQL 5.5.3 and higher, 5.6*, 5.7*<br>MariaDB 5.5 (new enough to support utf8mb4 character set), 10.0, 10.1, 10.2*, 10.3*|
|PHP|7.1<br>7.2|
|Cluster|Redis (preferably a separate volatile-ttl instance for sessions, and an allkeys-lru/allkeys-lfu instance for cache)<br>Solr or SQL based Search engine (but does not provide same featureset or performance as Solr)<br>NFS or S3<br>Varnish 4.1 or higher with varnish-modules or Fastly using our bundle provided with eZ Platform Enterprise (for HttpCache)|
|PHP エクステンション|curl<br>ctype<br>fileinfo<br>iconv<br>intl<br>mbstring<br>opcache<br>pdo<br>pdo mysql (with mysqlnd)<br>posix<br>reflection<br>xml<br>xsl<br>zip<br>php-redis or php-memcached (3.x)|
フォルダ内の画像ファイルを名称順につなげてMP4ファイルを作成する パート2

# はじめに

定点カメラを設置して一定間隔で写真を撮っていて、それなりに画像が溜まってきたら、全部つなげて動画作っても多少冗長な感じになってきました。
そこで、１日１枚の画像を選び、画像と画像の間をアルファブレンドで補間しながら動画を作ってみたので手順をまとめます。

# 画像ファイル準備

適当なフォルダに画像ファイルを保存。

# スクリプト作成

保存した画像と同じフォルダに以下のスクリプトを配置。

```python:make_mp4.py
#!/usr/bin/env python
# -*- coding: utf-8 -*-

import glob
import cv2
from PIL import Image, ImageDraw, ImageFont

import numpy as np

files = glob.glob('./*.jpg')
files.sort()

FILE_NAME = "output.mp4"
FRAME_RATE = 30
FRAME_SIZE = (1280, 720)

rec = cv2.VideoWriter(FILE_NAME, cv2.VideoWriter_fourcc(*'XVID'), FRAME_RATE, FRAME_SIZE, True)

for i in range(len(files)):
	
	file = files[i]
	print(file)
	
	img = Image.open(file)
	
	img = np.array(img)
	img = cv2.cvtColor(img, cv2.COLOR_RGB2BGR)

	if i > 0:
		for alpha in [0.3,0.5,0.8]:
			img_buf = cv2.addWeighted(img, alpha, img_buf, 1 - alpha, 0)
			rec.write(img_buf)
		
	rec.write(img)
	
	img_buf = img
	
rec.release()
```

# スクリプト実行

以下のとおりスクリプトを実行。

```sh
python make_mp4.py
```

できた！

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">もう３ヶ月。 <a href="https://t.co/NKeFUlgsSm">https://t.co/NKeFUlgsSm</a></p>&mdash; Shinobu Kimura (@mix_dvd) <a href="https://twitter.com/mix_dvd/status/1068981748292190208?ref_src=twsrc%5Etfw">2018年12月1日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
FAPI (Financial-grade API) って何？

# はじめに
この記事は、FAPIについて正しくまとめようとした記事ではなく（それが必要な方は[こちら](https://openid.net/wg/fapi/)を参照ください）、認証・認可の初心者がどのようにFAPIを捉えるか、という目線で書かれています。
ご指摘など大歓迎ですので、ぜひコメントください。

# FAPIとは
金融機関サービスのためのAPIの標準だと思っています。
金融機関のサービスを一部利用できるアプリでは、（現在もそうかは知りませんが）銀行のWebサイトを、ユーザーが入力したIDとパスワードでスクレイピングしてAPIエンドポイントのように利用しているケースがありました。
これをOAuthのモデルで解決するのがFAPIであり、OpenID FoundationのWorking Groupで議論が進められています。

金融機関で求められるセキュリティを担保するため、OAuthのモデルに則りつつもより強い勧告をしたり、仕様の追加をしているものと思われます（まだ[FAPIの仕様](https://openid.net/wg/fapi/)を読みきっていない & [基本的なOAuthの仕様](https://openid.net/specs/openid-financial-api-part-1.html#normative-references)と比較していないので推測ですが）

# 基本的なOAuthだけでは何が問題なのか？
`クライアントアプリ ←→ クライアントサーバー ←→ 金融サービス` の間で、特に認可グラントのフローにおいてメッセージの送信元・送信先・メッセージ内容が正しいかどうかを確認できないのが問題のようです。
そのほか、クライアントサーバーの内部ではグラントやアクセストークンなどを暗号化しないとか？などの観点もあるようです。

## メッセージの送信元
* 金融サービスがクライアントのブラウザ/アプリからのリクエストをクライアントのサーバー経由で受け取る時、それが本当に認可対象のエンドユーザー由来のリクエストなのか？を確かめたい
* クライアントのブラウザ/ アプリがサーバー経由で金融サービスのレスポンスを受け取る時、それが銀行になり済ました悪意あるサービスではないかを確かめたい
というニーズがあるようです。

## メッセージの送信先
* クライアントのサーバー（例えばお財布アプリのバックエンド）がスマホアプリに対して認可グラントを送るとき、スマホがマルウェアに感染していてURLスキーマが乗っ取られていたら、その認可グラントが悪意あるアプリに取って行かれてしまう、のが問題のようです。

# どのように対策するか？
FAPIの仕様では読み取り専用のAPIと読み書き可能なAPIで対策を分けています。
読み取り専用のAPIのためのフローでも基本的なOAuthよりも厳しくなっており、さらに多様な攻撃を想定したセキュリティを仕様に組み込んだのが読み書き可能なAPI、という枠組みで仕様を読み進めるのが良さそうです。

# おわりに
ここに書いたことは全て[FAPI](https://openid.net/wg/fapi/)の資料の解釈です。
もし他にもこんな記事が参考になるよ、とか、こんな勉強会してるよ、などの情報があればぜひコメントください。
プログラム初めて1週間ちょっとだけどエクセルを自動化する

月末処理用のエクセル自動化を試みる。
シフト表からデータを読み込んで、配列に格納。そのデータをもとに別のエクセルファイルにデータを記入することを目指す。

処理の途中で配列がいつの間にか二重になってたりと、いくつかのエラーは解決できた。
が、取得した配列のデータを.eachメソッド使ってセルの上から下に書き込もうとしたのだけど、繰り返しのなかで条件分岐がうまく動作せず。時間ぎれで今月の月末処理には間に合わず。

実はこのプログラムを作るより、WEBスクレイピングできるようにしたほうが手間が減りそうと気づいたので、これで作成中止。

とは言え、いい勉強になったかな。


最終的には以下のようなコードになった。

```ruby
#! ruby -Ks
require 'win32ole'

puts "何月の勤務表作る？"
@month = gets.chomp
@year = 2018
puts "#{@month}月の勤務表つくるよ"


def get_shift #シフト表から当月のシフトを取得
  
  filename = Dir.glob("shift*")
  
  app = WIN32OLE.new('Excel.Application')
  
  fso = WIN32OLE.new('Scripting.FileSystemObject') #pathで指定したいときはこの2行
  book = app.Workbooks.Open(fso.GetAbsolutePathName(filename[0])) 
  
  #book = app.Workbooks.Open(app.GetOpenFilename)
  #手動でファイルを指定するときはこれ


  begin  #メインの処理ここから

    sheet = book.Worksheets("#{@year}年#{@month}月シフト")  #ハードコーディングから対話式で情報取得に。
    
    @shift = sheet.Range("C6:AG6").Value             #目標セルをハードコーディング。。。
  


         #メインの処理ここまで

  ensure
    book.Close
    app.quit
  end

end


def timecard
  filename = Dir.glob("timecard*")
  
  app = WIN32OLE.new('Excel.Application')
  fso = WIN32OLE.new('Scripting.FileSystemObject')
  
  book = app.Workbooks.Open(fso.GetAbsolutePathName(filename[0]))

  begin  #メインの処理ここから

  
  sheet = book.Worksheets(1)
  x = "I"
  y = 5
  cell = sheet.Range(x + y.to_s)
  
  
  
#↓配列を取り出してcaseの判定にかけることは動作してるっぽいが、書き込むセルが最初のI5から動いてないくさい。。。

  
  @shift[0].each do |i|       #@shiftがなぜか二次元配列になってた。pで表示すると二重の括弧がついてる→[[]]
    case i
      when "N1"
        x = "I"
        cell.value = "1"
        x = "G"
        cell.value = "9:00"
        x = "H"
        cell.value = "18:00" if cell.value == nil
      when "N2"
        x = "I"
        cell.value = "2"
        x = "G"
        cell.value = "17:30"
        x = "H"
        cell.value = "2:00"
      when "N3"
        x = "I"
        cell.value = "3"
        x = "G"
        cell.value = "1:00"
        x = "H"
        cell.value = "10:30" if cell.value == nil
      when "休"
        x = "I"
        cell.value = "公休"
      when nil
        break
    end

    y += 1
  end
  
  book.save
         #メインの処理ここまで
  ensure
    book.Close
    app.quit
  end
end


get_shift
timecard
```
matplotlibメモ書き

コンデンサ間の等電位線と電気力線の解析解をグラフ化する必要があったのでメモ:hand_splayed::sweat_smile::writing_hand:
---
コンデンサ間の等電位線と電気力線の解析解は、
平行平板電極がx軸に平行にy=±Lの位置に置かれ、y=+Lの極板に+V0、y=-Lの極板に-V0の電圧を印加した場合、V(x,y)の等電位線はtを媒介変数として、

```math
\left\{
\begin{array}{ll}
x = L\,(\,t+\frac{1}{\pi}e^{\pi t}\,cos\,(\frac{\pi V}{V_0}))\\
y = L\,(\,\frac{V}{V_0}+\frac{1}{\pi}e^{\pi t}\,sin\,(\frac{\pi V}{V_0}))\\
\end{array}
\right.

```
で与えられる。
電気力線は任意のtで固定してVを媒介変数とすることで得られる。


```python:E_field.py
import numpy as np
import matplotlib.pyplot as plt

L=12

t_vect = np.linspace(-2, 0.4, 201)
v_vect = np.linspace(-4, 4, 201)

V=[1,2,3,4,5,6,7,8,9]
potential = {}
for v in V:
    potential[v]=[]
    potential[v].append(L *(t_vect + 1/np.pi * np.exp(np.pi * t_vect) * np.cos((v-5)/(5)*np.pi)))
    potential[v].append(L *((v-5)/5 + 1/np.pi * np.exp(np.pi * t_vect) * np.sin((v-5) / 5 *np.pi)))


T=[-1.8,-1.5,-1.2,-0.9,-0.6,-0.3,0,0.3]
force_line ={}
for t in T:
    force_line[t]=[]
    force_line[t].append(L *(t + 1/np.pi * np.exp(np.pi * t) * np.cos((v_vect)/(5)*np.pi)))
    force_line[t].append(L *((v_vect)/5 + 1/np.pi * np.exp(np.pi * t) * np.sin((v_vect) / 5 *np.pi)))


plt.hold(True);
for f in potential.values():
    plt.plot(f[0], f[1], color='black',  linestyle='solid')
for f in force_line.values():
    plt.plot(f[0], f[1], color='black',  linestyle='dashed')

plt.xlabel('x[cm]')
plt.ylabel('y[cm]')

plt.savefig("fig.png")
```

![fig.png](https://qiita-image-store.s3.amazonaws.com/0/205561/f62e9fd4-64dc-d7ce-e90a-dbd9fa0091f5.png)

`plt.hold(True)`で複数の線を一個のグラフに描画
`plt.plot(f[0], f[1], color='black',  linestyle='solid')`で線の色と種類を指定

P.S.
複数の線を描画してる時に凡例を共通させる方法(今回だったら等電位線と電気力線それぞれをまとめて凡例を出したい)がわからないので知ってる方いましたら教えてください。
アンドロイドはデータサイエンスの夢を見るか？

この記事は、[data-refinement Advent Calendar 2018](https://adventar.org/calendars/3114) 一日目の記事です

# 概要
TensorFlowLite を試してみた記事です。

Codelabs の以下を、ためしました。
[TensorFlow for Poets 2: TFLite Android](https://codelabs.developers.google.com/codelabs/tensorflow-for-poets-2-tflite/index.html)

内容は
画像認識のモデルを、Tensorflow lite によって convert し、 android 実機もしくは、カメラアクセスを許可したエミュレータ上で実行するチュートリアルです

ここでは、振り返りと感想を記事にします。

# Setup から コンバートまで
早速, チュートリアルでは、`"tensorflow==1.7.*"` を指定していますが、
`tflite_convert` が同梱されるのは、1.9以降とのことで、ここを、1.9.* に変更しました
1.7 では `toco` でしたね

python の環境づくりに、時間を溶かされるのを避けるために、
docker image を作りました

[docker image for TensorFlow for Poets 2](https://hub.docker.com/r/datarefine/tensorflowlite-codelabs/)

jupyter notebook もおいてあるので、コンバートファイル作成まで、サクサク行くはずです

# Setup the Android app から 最後まで
Android Studio は、もうインストール済みですね？！

docker image に追加しようと思いましたが、ちょっと時間切れなので
あとで追加します

github 上の[リポジトリ](https://github.com/googlecodelabs/tensorflow-for-poets-2/)に
サンプルアプリの android プロジェクトがあるので、それをビルドします

学習済みモデルをコピーする前では、画像認識のいい結果が得られないのですが

コンバート済みの学習済みモデルを、コピーするだけで、いい感じに画像認識してくれます

# How does it work?
TensorFlow Lite コードの特徴... 追記します
Prometheusの起動でerr="opening storage failed: lock DB directory: no locks available"が出たときの回避方法

PrometheusをHelmでインストールしていたら特定環境でなぜか`err="opening storage failed: lock DB directory: no locks available"`とログ出力されコンテナが起動できない事象が発生しました。DB領域はPersistentVolumeなので、ストレージの環境に依存するのかもしれませんがよくわかっていません。

取り急ぎ、デプロイメントのマニフェストに以下のように`- --storage.tsdb.no-lockfile`を追加することで回避できました。

```yaml

      - args:
        - --config.file=/etc/config/prometheus.yml
        - --storage.tsdb.path=/data
        - --web.console.libraries=/etc/prometheus/console_libraries
        - --web.console.templates=/etc/prometheus/consoles
        - --web.enable-lifecycle
        - --storage.tsdb.no-lockfile # 追加
```
Javaファイル用のDiffツール作ってみた

## 概要

前に（というか昨日）書いたやつの続きです。

該当記事はこちらからどうぞ！

> Javaソースの解析ツールをJavaで書いてみた…い
> https://qiita.com/banana5388/items/cd8a549d1885aa6dd039

前回の記事のコメントで「単純なことから始めてみましょう」というご指摘を頂いたので、まずは単純に２つのソースコードの差異ステップ数を取得するところから始めてみました。

<font color="white">（車輪の再開発なんて言わないで！！！！なんか作ってたら楽しくなっちゃったんだもの！！！！）</font>

ということで今回作成するもののインプットとアウトプットはこんな感じ。

```
INPUT : 比較元と比較先の絶対パス
OUTPUT: コードに差異があったステップ数
```

## 仕様

とりあえず考えていたものはざっとこんな感じ。

1. 比較元、比較先それぞれ取得したコードを一文字ずつ解析する
2. 比較元と比較先で違う文字が出現した場合、比較元を現在の文字位置で停止し、比較先の文字を次の文字解析へ
3. また比較先で比較元と同じ文字が出現した場合に、比較元の文字解析を再開
4. 比較元の文字解析が停止している状態で比較先に改行文字が出現した場合、差異ステップ数を1足す
5. [2. - 4.]の処理を比較元か比較先の文字が終了するまで続ける
6. 解析の結果、何行違う行があったかを出力する

とりあえずこれをそのまま実装しました。

主要な部分の実装はこんな感じ。

```java:JavaCodeDifference.java

   /**
     * ２つのコードの比較を行い、一致した行数を返却
     *
     * @param origCode      比較元コード（行ごとにリストで格納されています）
     * @param destCode      比較先コード（行ごとにリストで格納されています）
     * @return 比較一致行数
     */
    public static int countCodeDiff(List<String> origCode, List<String> destCode) {

        int cnt = 0;

        // 文字列用イテレータの生成

        // メソッド「getNotIncludeIgnoreCode」は、リストに格納されている一行ごとのコード情報から
        // 半角スペース、全角スペース、タブ文字、改行文字を消去し、末尾に改行文字を入れた上で
        // 最終的に一つの文字列（String型）として返却するメソッドです。
        StringCharacterIterator origCodeIterator =  new StringCharacterIterator(getNotIncludeIgnoreCode(origCode));
        StringCharacterIterator destCodeIterator =  new StringCharacterIterator(getNotIncludeIgnoreCode(destCode));

        // 比較元または比較先のどちらかの文字が終了するまで実行
        while (origCodeIterator.current() != StringCharacterIterator.DONE &&
                destCodeIterator.current() != StringCharacterIterator.DONE) {

            // 比較元と比較先で違うコード文字が含まれ、かつ比較先の方が先に改行していた場合にカウントを増やす
            if (origCodeIterator.current() == destCodeIterator.current()) {
                destCodeIterator.next();
                origCodeIterator.next();
            } else {
                if (destCodeIterator.current() == '\n') {
                    cnt++;
                }
                destCodeIterator.next();
            }
        }

        return cnt;
    }
```

うむ、いい感じじゃないか？？

## テスト


### テスト１つ目

テスト用にテキストを用意した。

```text:test1.java
aaaa
iiii
uuuu
```

```text:test2.java
aaaa
iiii
uuuu
```

全然javaファイルじゃないけどとりあえずテスト用なんでこれでいいですかね。
さーて出力は。。。

```console
> Number of different lines: 0
```

うん、よさそうですね。

### テスト2つ目

もういっちょテスト

```text:test1.java
aaaa
iiii
uuuu
```

```text:test2.java
aaa
iii
uuu
```

さーて出力は。。。

```console
> Difference Code Line Count:3
```

これもよさそう。

## 感想

とりあえず仕様通りの動きはしているので満足。

というか割と仕様がガバガバですね…もうちょい使えるように今後実装し直してしていきたいと思います。

## ソース公開してます

はーい。
https://github.com/satodaiki/DiffTool

## 更新履歴

2018/12/2 初版
2018/12/3 ソースに一部誤りがあったので修正しました。
AWS Lambdaの Custom RuntimeでさっそくPHPを動かしてみた 


#背景
re:Invent 2018でLambdaにCustom Runtimesが追加され、
COBOLがサポートされた裏でPHPもサポートされたので試してみます。

こちらを参考にしました
[LambdaでPHPが動くので、とりあえずWordPressをいれてみた]
(https://wp-kyoto.net/try-to-run-wordpress-in-aws-lambda/)

##ディレクトリ構成はこんな感じです
.
├── src
│   └── php
│       └── index.php
└── template.yaml


###template.yamlはこんな感じにしました。

```yaml
AWSTemplateFormatVersion: 2010-09-09
Description: PHP Demo
Transform: AWS::Serverless-2016-10-31
Resources:
  phpdemo:
    Type: AWS::Serverless::Function
    Properties:
      FunctionName: !Sub ${AWS::StackName}-ironman
      Description: PHP Demo
      CodeUri: src/php
      Runtime: provided
      Handler: index.php
      MemorySize: 3008
      Timeout: 30
      Tracing: Active
      Layers:
        - !Sub arn:aws:lambda:${AWS::Region}:887080169480:layer:php71:3
      Events:
        api:
          Type: Api
          Properties:
            Path: /ironman
            Method: get
```

###index.phpの内容は以下のものになります。

```php
<?php
    $array = [
        'Iron Man',
        'Batman',
        'Suit Guy',
    ];
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<?php
    foreach($array as $val) {
        echo $val . '<br>' . PHP_EOL;
    }
?>
</body>
</html>
```

###デプロイしちゃいます
のまえにデプロイ用のバケット作ります。

```
aws s3 mb s3://pipeline-php-demo
```
AWSのコンソールから作ってもいいです。

###デプロイ

```
$ sam package \
    --template-file template.yaml \
    --output-template-file serverless-output.yaml \
    --s3-bucket pipeline-php-demo(上で作ったバケット名)

$ sam deploy \
    --template-file serverless-output.yaml \
    --stack-name php-demo(CFnのスタックに表示させたい名前) \
    --capabilities CAPABILITY_IAM

```

##結果
API Gatewayのエンドポイントをブラウザで開くと、、
ちゃんと配列がループしてますね！！
![Screen Shot 2018-12-02 at 2.57.27 AM.png](https://qiita-image-store.s3.amazonaws.com/0/119700/321bdca8-06b0-c55c-179d-7a5f66704e8e.png)

#まとめ

というか、[サーバーワークスさん](http://blog.serverworks.co.jp/tech/2018/11/30/lambda-php/)の二番煎じになっちゃってますねこれ><

軽く試したところ
`undefined function json_encode()`
って怒られたのでへこみました。

AWSのコンソール上でPHPのソースが見られないのはちょっと残念だなとおもいました。
<img width="1004" alt="Screen Shot 2018-12-02 at 3.01.55 AM.png" src="https://qiita-image-store.s3.amazonaws.com/0/119700/0599c8ff-89a8-8a92-4b67-ce44ade5c7e5.png">
GNU Stowでdotfilesを管理する

# はじめに
パソコンの初心者ではない限りは、新しいOSを入れるまたはOSの再インストールするときにアプリのインストールや好みの設定をつけるなど環境構築をやっているでしょう。技術が大好きな人間として、VMを立てたり、色んなOSを試したりするので環境構築作業を結構やっていました。

しかし、去年の12月頃に環境構築の作業が面倒だと感じていましたので、何か良い方法があるかググってみて、dotfilesという手段を見つけました。

# dotfilesって何？
ターミナルで`ls -la ~`を実行してみれば、
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285534/11a0e983-b6c1-6d9c-b626-bea140c89d8a.png)
ファイル名の前に`.`がついているファイルはdotfileと呼ばれています。大抵dotfileのなかにアプリごとの設定が書いてあるので、これがあればアプリのコンフィグレーションを簡単に再現できます。

# dotfilesをつくりましょう！
今回は二つのやり方を紹介したいと思います。

## レベル1：コピペ＋symlink
これはQiitaで[検索](https://qiita.com/search?q=dotfiles)すると色んな手法が出てくるので、詳しいやり方は省略させてもらいます。基本は、

1. 管理したいdotfilesを一つのフォルダにまとめる
2. 各dotfileのsymlinkを作る（手動では面倒なのでbashスクリプトがオススメ）
3. フォルダーをどこかのクラウドにアップして常に同期する（Dropbox、Githubなど）

### 問題点
#### 1. bashスクリプト
僕自身あまりbashスクリプトを書かないので、数ヶ月も経つと「これ、なにやってんの？」となることが多いです。

```bash
# -fってなんでしたっけ？-Lは？
if [[ -f $HOME/.zshrc && ! -L $HOME/.zshrc ]]; then
  echox " "
  echox ".zshrc exists. Renaming to .localrc..."
  mv $HOME/.zshrc $HOME/.localrc
fi
```

#### 2. 柔軟性がない
仕事用の端末でbashスクリプトを実行したときに、プライベートでしか使わないソフトの設定が入ってしまいました。もちろんスクリプトを修正すればなんとかできますが、そういう修正は同期したくないので困っていました。

#### 3. symlinkを管理するのが難しい
dotfilesが増えるほど管理するのが大変です。特に間違えてsymlink作ったファイルは、いちいち削除や修正が必要です。しかも、

```
$ ln -s [リンク元] [登録名]
or
$ ln -s [登録名] [リンク元]
```
って何回も覚えられないんだよ！

## レベル2：GNU Stowを使う
dotfilesの管理ツール[GNU Stow](https://www.gnu.org/software/stow/)を紹介します。元々はパッケージを導入するときに環境を汚さないようにsymlinkで管理するパッケージです[[1](https://qiita.com/katoken-0215/items/dd4b309ecfc76cae0a76)][[2](https://www.ibm.com/developerworks/jp/linux/library/l-stow/index.html)][[3](http://lv4.hateblo.jp/entry/2014/03/07/220650)]が、dotfilesの管理にもかなり役に立ちます。

例として、`zsh`のコンフィグファイルを導入するときに：

```bash
$ stow -v zsh
```

また、`git`のコンフィグファイル：

```bash
$ stow -v git
```

複数コンフィグを導入する場合：

```bash
$ stow -v zsh vim tmux
```

コンフィグの削除も楽：

```bash
$ stow -vD tmux
```

なんて素晴らしいツールですわー

### Stowの使い方

#### 1. ファイル構成を建築
Stowを使う前に、特定のファイル構成を作らなければならないです。ソフトごとにフォルダーを作り、関連なdotfilesを入れることが必要です。そして、現状のdotfilesのフォルダー構成を合わせることも必要です。例：

```
dotfiles/
├── fuga/
│   └── .config/
│       └── .fuga
├── hoge/
│   └── .config/
│       └── .hoge
├── vim/
│   └── .vim/
│       ├── theme.vim
│       └── .vimrc
└── zsh/
    ├── .zshrc
    └── .zsh/
        ├── alias.zsh
        ├── keybindings.zsh
        ├── plugins.zsh
        └── prompt.zsh
```

#### 2. Stowを入れる
macOSを使う場合はhomebrewで入れましょう：

```bash
$ brew install stow
```

#### 3. 既存のdotfileが削除されたか確認
既存の場所にすでにファイルが存在する場合はstowが上書きせずに中止するという安全対策があると安心ですが、削除しないとsymlinkが作れないので確認しましょう

#### 4. Stowを実行
いよいよ本番です。上記の例に続いて、以下のコマンドを実行したら:

```bash
$ cd dotfiles
$ stow -v fuga hoge vim zsh
```

結果はこうなります：

```
~/
├── .config/
│   ├── .fuga
│   └── .hoge
├── .vim/
│   ├── theme.vim
│   └── .vimrc
├── .zshrc
└── .zsh/
    ├── alias.zsh
    ├── keybindings.zsh
    ├── plugins.zsh
    └── prompt.zsh
```

# 結論
Stowを使うと、
* bashスクリプトを書かなくてよくなる
* 必要なコンフィグだけを導入できる
* symlinkの管理が楽になる

dotfilesの初心者でも上級者でも、オススメできるやり方じゃないかなって思っています。

最後に、実例を見たい方は僕のdotfilesの[Githubリポー](https://github.com/adwinying/dotfiles)を是非参考にしてください！
nuxt.js(v2)で絶対パス(https~)を取得する方法

nuxt.jsでOGPタグのURLを自動化するときに、レンダリングする前に絶対パスを取得する必要があった。調べても出てこなかったので取得方法をメモ。

取得方法は、ローカル・ステージング環境やデプロイ時にURLやディレクトリを変更したい方向け。

ということでさっそく…

## １．nuxt.config.jsで下準備

ローカル・ステージング環境やデプロイ時にURLやディレクトリを変更したい。環境変数を使うと便利なので、nuxt.config.jsで下準備をしておく。

1. `baseUrl`と`baseDir`を環境変数を使って変更できるように。
2. `env`に`baseUrl`を登録。
3. `router.base`に`baseDir`を登録。

```javascript:nuxt.config.js
const baseDir = process.env.BASE_DIR || '/'
const baseUrl = process.env.BASE_URL || 'http://localhost:3000'

module.exports = {
  env: {
    baseUrl: baseUrl,
  },
  router: {
    base: baseDir,
  },
}
```

## ２．テストコード

```vue:test.vue
<template lang='pug'>
div
  p {{absolutePath}}
</template>

<script>
export default {
  computed: {
    absolutePath () {
      return `${process.env.baseUrl}${this.$router.history.base}${this.$route.path}`
    },
  }
}
</script>
```

##### 簡単に取得内容を説明すると…

`process.env.baseUrl`
↓
nuxt.config.jsでenvに登録した内容を取得。

`$router.history.base`
↓
nuxt.config.jsでrouter.baseに登録した内容を「末尾の`/`なし！」で取得。

`$route.path` or `$route.fullpath`
↓
routeパスを取得（fullpathにすると、ハッシュやクエリも一緒に取得）

## 3.実行

ターミナルで以下実行

##### MAC

```terminal
BASE_URL=https://example.com BASE_DIR=/yourDir/ npm run dev
```

##### WIN 
※windowsは環境変数の扱い方が違うので`cross-env`経由で行う。nuxt.js(v2)系からは、cross-envがはじめから入っている。

```terminal
npx cross-env BASE_URL=https://example.com BASE_DIR=/yourDir/ nuxt
```


## 4.結果

```
https://example.com/yourDir/test
```

OK。取得できた。
もっとスマートな方法があれば、だれか教えてくださいませ。m(__)m



# Link

以下、公開中のnuxt.js(v2)関連の記事一覧

## 技術よりの記事

0. [nuxt.js(v2)のインストール〜ESLint設定まで](https://qiita.com/amishiro/items/9cd8007d46f91c8b5da2)
0. [nuxt.js(v2)の作業ディレクトリを整理](https://qiita.com/amishiro/items/9c31a3a9424de27efe28)
0. [nuxt.js(v2)のベースURLをターミナルからコントロール](https://qiita.com/amishiro/items/7c7af250368083216d8e)
0. [nuxt.js(v2)でpug/stylusを利用する](https://qiita.com/amishiro/items/38fe1b102d7e91a93ada)
0. [nuxt.js(v2)でIE11対応をする（CSS編）](https://qiita.com/amishiro/items/84b14108c749a0a0c966)
0. [nuxt.js(v2)でIE11対応をする（JS編）](https://qiita.com/amishiro/items/db37c6a56ddf7e214144)
0. [nuxt.js(v2)で絶対パス(https~)を取得する方法](https://qiita.com/amishiro/items/9d7ca6b239f604a40424) 
0. [nuxt.js(v2)でSEOに必要なmeta(OGP)を入れたい](https://qiita.com/amishiro/items/b7260116b282d2cf2756)
0. [nuxt.js(v2)でSEOに必要なmeta(OGP)で入力漏れの事故をなくす](https://qiita.com/amishiro/items/77e3c2546fa63cc69a62)

## よく使うプラグインのお話

0. [nuxt.js(v2)で便利なvue-mqを使ってみるがSSRモードでコンソールエラーがでるので確認してみた。](https://qiita.com/amishiro/items/f2e302fedf03c3d0f79e)
0. [nuxt-linkでスムーズスクロールするならvue-scrolltoが便利で気が利いている…と思う。](https://qiita.com/amishiro/items/f70aca4797cd57bc51b5)
0. [nuxt.jsでパララックスをするならvue-parallax-jsがお手軽。Cool!](https://qiita.com/amishiro/items/ccca406a9bda1863ab01)

## まとめ系

0. [nuxt.js(v2)でgenerate納品する前にやっておきたい設定](https://qiita.com/amishiro/items/11bd642728f6b5838189)
0. [nuxt.jsにおける「components」ディレクトリの規約（案）](https://qiita.com/amishiro/items/c7493f5e9375a0609bdc)
JavaScript で 空の文字列を持った配列を生成する

この記事は [ShoTime Advent Calendar 2018](https://qiita.com/advent-calendar/2018/shotime) の 1 日目の記事です。

JavaScript で空の文字列を持った配列を作る場合、次のように書くことができますが、もうすこしプログラムっぽく書く方法を調べてみました。

```js
const array = ['', '', '']
```

## 背景

単純に　`Array(3)` と書くと、 `undefined` を保持する長さ `3` の配列が生成されます。型をしっかり固定させて配列を準備すれば次のようなコードでエラーが発生しなくなるのではと思いました。

```js
const array = Array(3)
console.log(array[1].length) // ここでエラーが発生します
```

![array-error.gif](https://qiita-image-store.s3.amazonaws.com/0/62259/2b7d1ae5-9e86-f553-fd64-30a5ba12ec52.gif)


`''.length` なら `0`　が出力されますが、上記コードでは、 `undefined.length` となっているためエラーになります。

型を決めることでこのようなエラーが発生しないようにしたいという動機で調べてみたところ、いくつかの方法があるようだったので、記録しておきます。

ちなみに、これまでは次のようなコードを書いてエラーが発生しないよう対応していました。

```js
const array = Array(3)
const length = typeof array[1] === 'string' ? array1[1].length : 0
console.log(length)
```

## 3種類の方法

- Array.fill
- Array.apply
- Array.from(Array(3), () => '')

調べたところ他にもたくさん方法があるようでしたが、課題解決のためには３つも知っていれば、十分な情報量なのでここには掲載しません。 ~~めんどくさいわけではありません~~

以下、いずれのコードも出力は `['', '', '']` となります。

### Array.prototype.fill

```js
new Array(3).fill('')
```

### Array.prototype.apply

```js
Array.apply(null, Array(3)).map(x => '')
```

### Array.prototype.from

```js
Array.from(Array(3), () => '')
```

![array.gif](https://qiita-image-store.s3.amazonaws.com/0/62259/4bf1dd27-e056-9169-3020-e04deda4dc4a.gif)


## このコードを利用して、開発しているサービス

 [ShoTime（目標をみんなに共有しよう）](https://shotime.now.sh/) というサービスを開発しています。リリースして８ヶ月経過しましたが、ほとんど利用されていません。理由は使いにくいためと明白ですので、2018年のうちできる限りの改善をしつつ、そこで得た知見を [ShoTime Advent Calendar 2018](https://qiita.com/advent-calendar/2018/shotime) として、毎日１つずつ記録していきます。そしてこれがその１日目の記録です。
ランディングページ（LP）を React で SPA にしたらつらかった

## 経緯

本プロダクトのそこそこ大きめのアプリケーション[^そこそこ大きめのアプリケーション] を React で書いてます。
「慣れてるから」っていう理由で、別案件で必要になった LP[^LP]  を React + styled-components で SPA として書きました。つらかった。
つらかったので、どうするか考えました。

LP は当時 3,4 ページくらいの構成でした。

## つらポイント

- JSX に不慣れなデザイナーがマークアップする
- Biz のひとに「このページにこのタグ埋め込んでください！」ってインラインの script を渡されるけど、ページごとに HTML ファイルがあるわけではないので "努力" が必要になる
- 複数の OGP を設定する場合とても面倒
- styled-components で emmet が完全には使えない **（下に追記あり）**
- 最初のページのロードで他のページについての js も一緒にロードする必要があるので若干勿体無い

## どうしたか

結果的に、React + Sass(scss) で運用しています。

### JSX に不慣れなデザイナーやコーダーがマークアップする

慣れてもらった。あざす。
あと、emmet が使えないのもつらそうだったので[『vscodeのjsxでemmet』](https://qiita.com/akameco/items/0573255762ff9fb43ed3)を参考に vscode で emmet を使えるよう設定してもらったので少しは楽になったかも。（自分もこれ設定できるの知らなかったのでうれしい）

### Biz のひとに「このページにこのタグ埋め込んでください！」ってインラインの script を渡されるけど、ページごとに HTML ファイルがあるわけではないので "努力" が必要になる

継続的に **"努力"** しています。
ある程度は **Google Tag Manager** を駆使しています。
仕込めばそれで済むので、最初だけ頑張ればあとはそんなにつらくないかも。

### 複数の OGP を設定する場合とても面倒

幸いこれはまだ必要になってないので対応してない。
必要になったらどうしようかな、、

追記： [この記事](https://qiita.com/yuneco/items/5e526464939082862f5d)、 functions で OGP の情報の載った HTML の動的生成 & 本体ページへのリダイレクトをやってたの、良さげだった。これはアリ

### styled-components で emmet が完全には使えない

これは **style の記述を Sass(scss) に移行**して解決しました。
もともと僕らフロントエンドエンジニアだけで開発していたので脳を止めて styled-components を選択しましたが、途中から入ってくれたデザイナーさんがマークアップをゴリっと書いていく運用になってきたので、彼の書きやすい環境にしようということでこうしました。
あとは、アプリケーションを作っているわけではないので、styled-components の得意なコンポーネント指向な開発環境は必要ないだろうというのも理由です。

#### 追記

できました。 [VSCode で emmet を効かせて styled-components を書く](https://qiita.com/moriyuu/items/5ed1b2f4908901d755b9)

### 最初のページのロードで他のページについての js も一緒にロードする必要があるので若干勿体無い

現状ページ数が多かったり、それぞれのページでコード量の多い処理があったりするわけではないので、**目をつぶってます**。
というか、ホスティングに Firebase Hosting を使っているので、勝手に CDN に載せてくれるし許容誤差なんじゃないかって思ってます。（計測しろ！）

## あとがき

Next.js を使うという手はあるかな、と思ってます。
ページごとの script タグの埋め込みと OGP 対応と初期ロードのファイルサイズ軽減をいっぺんに倒せる気がする。
まあでもこの React + Sass(scss) にしてから LP も安定運用フェーズに入ってきたので、Next.js 導入は必要に迫られたら、って感じになると思います。


[^そこそこ大きめのアプリケーション]: [Aidemy](https://aidemy.net/)
[^LP]: [Aidemy Premium Plan](https://aidemy-premium.net/)
PS4 Dualshock4 Unity Key Cheatsheet

Unity 2018.2.18.f1

| DualShock4                      | Key  | Axis |
| ------------------------------- | ---- | ---- |
| ×                               | 1    |      |
| ○                               | 2    |      |
| △                               | 3    |      |
| □                               | 0    |      |
| L1                              | 4    |      |
| R1                              | 5    |      |
| L2                              | 6    | 4    |
| R2                              | 7    | 5    |
| L3                              | 10   |      |
| R3                              | 11   |      |
| share                           | 8    |      |
| option                          | 9    |      |
| ps                              | 12   |      |
| pad button                      | 13   |      |
| L analog right(+ve) & left(-ve) |      | 1    |
| L analog up(+ve) & down(-ve)    |      | 2    |
| R analog right(+ve) & left(-ve) |      | 3    |
| R analog up(+ve) & down(-ve)    |      | 6    |
| keypad right(+ve) & left(-ve)   |      | 7    |
| keypad up(+ve) & down(-ve)      |      | 8    |
【python】銘柄を検索してヒットする銘柄の株価をグラフ表示させる簡単実装

# はじめに
先月のはじめぐらいから、株価のアプリを自分で作りたいなぁ。。。とモヤモヤしていました。
ですので、作りました。アプリというには簡素な作りですので、もうちょっと肉付けする必要はありますが、まぁまともには動きます。
ただし銘柄がニューヨーク株式市場(NYSE)に上場する[外国株11銘柄](https://moneybox.jp/adr/adr_japan_nyse.php)のみなので日本株対応させたいところ。
->データ取得方法のpandas_datareaderの仕様上。対応します。

# 実物
銘柄検索フォームがあります。
![search.png](https://qiita-image-store.s3.amazonaws.com/0/190712/32acac53-f208-5c0f-8a85-380b172165e0.png)

銘柄がヒットする場合、グラフを描画します。ちなみにソニーの株価です。
![graph.png](https://qiita-image-store.s3.amazonaws.com/0/190712/772bbfd4-2694-edc7-0d06-054ea16d6518.png)

# ソースコード
```python
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input,Output
import pandas_datareader.data as web
import datetime

app = dash.Dash()

app.layout = html.Div(children=[
    html.Div(children='''
        銘柄入力:
    '''),
    
    dcc.Input(id='input', value='', type='text'),
    html.Div(id='output-graph')
])

@app.callback(
    Output(component_id='output-graph', component_property='children'),
    [Input(component_id='input', component_property='value')]
    )
def update_graph(input_data):
    start = datetime.datetime(2017,1,1)
    end = datetime.datetime.now()
    df = web.DataReader(input_data, 'iex', start, end)
    
    return dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                {'x': df.index, 'y': df.close, 'type': 'line', 'name': input_data},
            ],
            'layout': {
                'title': input_data
            }
        }
    )

if __name__ == '__main__':
    app.run_server(host='0.0.0.0', port=8080)
```
## データの取得方法
データはpandas_datareaderにて取得できます。
使用方法の詳細は[以下サイト様](https://www.mazarimono.net/entry/2018/07/20/pandas_datareader)に準拠したので、そちらご参照ください。
ソースコード上の以下の部分に相当。

```python
import pandas_datareader.data as web
###省略###
df = web.DataReader(input_data, 'iex', start, end)
```
## 処理の流れ
- メイン関数実行 #-> if _ _name_ _ == '_ _main_ _':
- レイアウト描画 #-> app.layout
- 入力値に対するコールバック関数起動 #-> @app.callback
- 返り値でレイアウトが再描画 #-> Output(component_id='output-graph',

詳細の仕様については[下記サイト](https://dash.plot.ly/getting-started-part-2)に実例付きで紹介されているので、そちらをご覧ください。

## ライブラリ
[Dash](https://plot.ly/products/dash/)を使用。
Webベースのグラフ描画ライブラリで、Reactなどjs系が中で動いているらしい。
その中でも、

- dash_html_components
- dash_core_components
- Input,Output

を使用。html_componentはHTMLのタグで描画できる部分、core_componentはcontrollやgraphなどより高度な描画部分、Input,Outputは入力値処理の部分を担っている。

## 感想
ソースが短いわりに動いてよかった。
今度は[移動平均線](http://www.algo-fx-blog.com/simple-moving-average-python/)などの主要曲線を共に描画したい。
もしくは、[Bokeh](https://demo.bokehplots.com/apps/stocks)などを使用して、時系列的に描写したい。
Terraformのリソース定義に暗号化されたパスワード類を含める。実行時に復号する（Cloud KMSを使う）


[Terraformのドキュメント](https://www.terraform.io/docs/providers/google/d/google_kms_secret.html)にサンプルコード込みで書いてあるので、そちらを参照。

そこにも書いてあるが、リソース定義には暗号化されたデータが入るが、ログやStateファイル（tf.state）には平文で書かれるので注意が必要。
[GCP] Cloud KMS（CLOUD KEY MANAGEMENT SERVICE）で暗号化と復号


# 概要

GCPサービスのCloud KMSを使い、暗号化と復号を行う。gloudコマンドから行う。
ファイルの暗号化と復号が一般的だが、標準入力を使う方法も紹介する。

KMSのサービスについては、[公式ドキュメント](https://cloud.google.com/kms/)を参照。


# 事前準備

* GCPのWebコンソールから（gcloudコマンドからでも良いが）、キーリングとキーを作成する。

* 適当なファイルを作成する。

```
$ echo "Hello" > hello.txt
```


# ファイルの暗号化と復号


```
# 暗号化
$ gcloud kms encrypt --ciphertext-file=hello.txt.enc --plaintext-file=hello.txt \
    --key my-key --keyring my-ring --location global --project my-project

# 復号
$ gcloud kms decrypt --ciphertext-file=hello.txt.enc --plaintext-file=hello.txt.dec \
    --key my-key --keyring my-ring --location global --project my-project

$ cat hello.txt.dec
Hello
```

# 標準入力からデータを受け取って、暗号化と復号

```
# 暗号化
$ echo -n "Hello" | gcloud kms encrypt \
  --location global \
  --keyring my-ring \
  --key my-key \
  --plaintext-file - \
  --ciphertext-file - \
  --project my-project
 | base64

# 復号（復号するデータは自分の環境のものに置き換える）
$ echo -n "my-encrypted-data" | base64 -D | gcloud kms decrypt \
 --location global \
 --keyring my-ring \
 --key my-key \
 --ciphertext-file - \
 --plaintext-file -
```

## 参考
https://www.terraform.io/docs/providers/google/d/google_kms_secret.html
Tcl/TkでHello, world!

# Tk編

## タイトルでHello, world!
```tcl:hello.tcl
wm title . "Hello, world!"
```

## よくあるHello, world!
```tcl:hello.tcl
pack [label .l -text "Hello, world!"]
```

## 細切れにHello, world!
```tcl:hello.tcl
set buffer "Hello, world!"
set length [string length $buffer]
for {set i 0} {$i < $length} {incr i} {
	lappend labels [label .l$i -text [string index $buffer $i]]
}
grid {*}$labels
```

## ボタンを押したらHello, world!
```tcl:hello.tcl
pack [button .b -text click! -command [list tk_messageBox -message "Hello, world!"]]
```

## ダブルクリックでHello, world!
```tcl:hello.tcl
pack [label .l -textvariable buffer]
bind . <Double-1> [list set buffer "Hello, world!"]
```

## ちょっと遅れてHello, world!
```tcl:hello.tcl
pack [label .l -textvariable buffer]
after 3000 [list set buffer "Hello, world!"]
```

## 閉じようとしたらHello, world!
```tcl:hello.tcl
bind . <Destroy> [list tk_messageBox -message "Hello, world!"]
```
mac iCloudフォルダパス| ターミナルコマンドでiCloudファイルへ移動する方法

![Screen Shot 2018-12-02 at 00.37.16 edited by Sketch .png](https://qiita-image-store.s3.amazonaws.com/0/122142/6e0e43ea-4dbd-da98-1874-16df5864132e.png)

#背景

コマンドでiCloudファイルに簡単に移動できずハマりました。
たぶんmacユーザーは一度はハマるであろうポイントなので 覚えておいた方が良いです。


#環境
mac os - 10.13.6  High Sierra


#iCloud フォルダ Path

**/Users/自身のユーザーネーム/Library/Mobile Documents/com~apple~CloudDocs/**

なぜかシステム上では iCloud というフォルダ名ではないので 紛らわしいです。
<img width="483" alt="Screen Shot 2018-12-01 at 23.53.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/122142/e25bd257-e88a-19cd-4861-7dee05e8ba00.png">


#コマンドでiCloudファイルへ移動する方法

例 ）iCloud直下のWebフォルダに移動したい
<img width="529" alt="Screen Shot 2018-12-01 at 23.55.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/122142/39a9288d-0cd8-3a90-7093-a306a7be7ef5.png">

## pwd コマンド - 現在地確認
```
$ pwd
/Users/think-a-lot
```

## cd コマンド - 上記フォルダパスをコピペするが、そのままでは何故か無理。
「 No such file or directory 」と言われ拒否される。

```
$ cd /Users/think-a-lot/Library/Mobile Documents/com~apple~CloudDocs/Web
-bash: cd: /Users/think-a-lot/Library/Mobile: No such file or directory
```

## cd コマンド - Mobile と Documentsのスペースに \ を入れて再度実行
今度は「 No such file or directory 」と言われない。

```
$ cd /Users/think-a-lot/Library/Mobile\ Documents/com~apple~CloudDocs/Web
```
**/Users/think-a-lot/Library/Mobile Documents/com~apple~CloudDocs/Web**
　 ↓ \ を手動で入れる。
**/Users/think-a-lot/Library/Mobile<font color="Tomato">&#92;</font> Documents/com~apple~CloudDocs/Web**

\ = option + ¥ 


##pwd コマンド - 移動場所を確認
```
$ pwd
/Users/think-a-lot/Library/Mobile Documents/com~apple~CloudDocs/Web
```

上手く行きましたでしょうか？ 
これで<font color="tomato">**無事 移動成功**</font>です！
何故かコマンド上でも \ は表示されない点が分かりづらいですね。
以上となります。
<br><br>
php-master-changes 2018-12-01

今日は不安な気持ちになる strncpy() 呼び出しの修正、preg_replace_callback() が無限ループを引き起こす場合があるバグの修正、gdImageAutoCrop() の挙動修正があった！

ところでアドベントカレンダーでこれやっても、その日のコミット内容が日付の変更まで確定しないという性質上、アドベントカレンダーの時間枠内には投稿しきれないじゃん、ということに今気付いた！

# 2018-12-01
## cmb69: Fix illogical strncpy size
- https://github.com/php/php-src/commit/12410df5fb38cd092d29f67006e4ba22463068da
- ext/pdo_sqlite で、strncpy() のサイズ指定にコピー先でなくコピー元の sizeof を使っていたコードの修正
- どちらにせよ同じサイズのためバグではないが、何だそりゃ感のあるコードではある
- [PR:3497](https://github.com/php/php-src/pull/3497) からの修正

## weltling: Fixed bug [#77193](https://bugs.php.net/bug.php?id=77193) Infinite loop in preg_replace_callback
- https://github.com/php/php-src/commit/ef1269d5c158afaf052e3d79591462e0f5372b1a
- [7.3~]
- ext/pcre で、[preg_replace_callback()](http://php.net/manual/ja/function.preg-replace-callback.php) が無限ループになる場合がある問題の修正
- コールバック内で更に pcre の正規表現の処理が行われる際、静的に再利用するデータの利用箇所でおかしくなってたみたいな感じかな

## cmb69: Sync behavior of gdImageAutoCrop() with upstream
- https://github.com/php/php-src/commit/947ca9f43d7c67fd0913dad183bb4625cedbe8aa
- ext/gd で、バンドル版 libgd で加えていた gdImageAutoCrop() の挙動修正をリバートし、上流のライブラリに合わせた
- 画像に透明色がない場合に GD_CROP_DEFAULT が GD_CROP_SIDES にフォールバックする挙動がなくなる
Ubuntu Chromeでスクリーンショットが真っ黒になる場合の暫定対処方法

## はじめに
- UbuntuのChromeでスクリーンショットを取ると真っ暗になってしまうので対処方法を調べました

## 環境
- OS: Ubuntu 16.04.4 LTS
- ブラウザ: Google Chrome Version 65.0.3325.181 (Official Build) (64-bit)
- GPUドライバ: NVIDIA binary driver - version 390.67
- ビデオカード: GeForce GTX 1070

## 問題
- Chromeでスクリーンショットを撮ると真っ黒な画像になってしまいます
- Chrome拡張機能で取った画像
![Screenshot (1).png](https://qiita-image-store.s3.amazonaws.com/0/3507/dc80248b-a852-cfdd-2c74-4a6fec4cfae3.png)
- Dev Toolsで取られた画像
![Screenshot from 2018-12-02 00-00-41.png](https://qiita-image-store.s3.amazonaws.com/0/3507/31699340-ab6e-7da1-6352-ac67e89a2a00.png)
- gnome-screenshotやshutterでは問題が起こりません


## 調査
- ググってみると似たような問題が何件か見つかります
- どうやらGPU関連で問題が起きていることが多いようです
- [chrome://flags/](chrome://flags/)でGPU関連の項目を見てみます
- GPU rasterization、3D software rasterizerあたりが怪しそうですかね
![Screenshot from 2018-12-02 00-36-06.png](https://qiita-image-store.s3.amazonaws.com/0/3507/2b590a0f-685d-7afd-1fc7-76cd56c51b6a.png)

```
GPU rasterization
Use GPU to rasterize web content. Requires impl-side painting. – Mac, Windows, Linux, Chrome OS, Android
```

## 対応
- 3D software rasterizerをDisabledにしたところ正常にスクリーンショットが取れるようになりました
  - 今回のケースではGPU rasterizationは関係ありませんでした

## 追加調査
- そもそもGPUドライバ周りで問題が起きているのでは？と思い追加で調査しました
- しかし以下を調べて見ましたが問題を見つけることが出来ませんでした
  - dmesg
  - syslog
  - /var/log/Xorg.0.log
  - nvidia-smi
- 根本原因が分からず悔しいです
- もし分かる方がいれば教えて欲しいです
Certified Kubernetes Application Developer (CKAD) 受験ログ

[Certified Kubernetes Application Developer (CKAD)](https://www.cncf.io/certification/ckad/)を取得しました。

受験時の試験のバージョンはカリキュラムがv1.11.0（August 2018）で、Handbookはv1.15でした。

## 経緯

[CKAを取得した](https://qiita.com/sotoiwa/items/3509ca3d18d1bed00dee)翌週に、こんなメールが届きました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/86449/f62e5cac-8145-c59b-51e5-352117ce1b5c.png)

[サイバーマンデーセール](https://training.linuxfoundation.org/cyber-monday-2018/)で12/3までCKA/CKADなどの試験が大変お得になっています。試験とトレーニングがセットで179ドルです。せっかくなので自腹で受けることにしました。

## 準備

ググって受験記を参考にさせていただきました。

- [First Challenge for Certified Kubernetes Application Developer (CKAD)!](https://developers.cyberagent.co.jp/blog/archives/15383/)
- [Certified Kubernetes Application Developer 試験を受験してきました](https://jtwp470.hatenablog.jp/entry/2018/04/29/003600)
- [My Feedback about CKA and CKAD](https://medium.com/@ikaboubi/my-feedback-about-cka-and-ckad-e82a35585fe9)

CKADとCKAでは試験時間や問題数が異なります。

||CKA|CKAD|
|---|---|---|
|時間|3時間|2時間|
|問題数|24問|19問|
|合格ライン|74%|66%|

時間的には厳しそうですが、合格ラインも低いようです。CKAはクラスタの管理者向けの資格で、CKADはクラスタを利用する開発者向けの資格ですが、内容的には被っているところが多く、CKAの受験直後であれば特に準備しなくてもいけるのではと予想しました。

179ドルに含まれる公式のトレーニングコース「[Kubernetes for Developers (LFD259)](https://training.linuxfoundation.org/training/kubernetes-for-developers/)」をゆっくりやってからでもよかったのですが、CKAで勉強した内容をよく覚えているうちに受験した方がよいと判断し、試験日をなるべく近くに設定しました。そのため公式のトレーニングコースは時間がなくやってません。

試験までは、CKAのときと同様に、時間があるときに[公式ドキュメント](https://kubernetes.io/docs/home/?path=browse)を読んだり、書籍「[Kubernetes完全ガイド impress top gearシリーズ](https://amzn.to/2PzL2Dp)」を読み返すようにしました。直前にはCKAのときにも実施した[Linux AcademyのCKA準備コース](https://linuxacademy.com/containers/training/course/name/certified-kubernetes-administrator-preparation-course)の模擬試験をもう一度やりました。

## 本番

試験はCKAのときと同じく会社の会議室で受験しました。問題文の言語は選んだ記憶がありませんが日本語でした。

予想したとおり時間的にはCKAよりも厳しく、配点が少ないので後回しにした1問が結局回答できませんでした。CKAよりもマニフェストと格闘する時間が長い感じです。

CKAもCKADも問題毎に配点が異なり、問題文に配点が明示されています。CKAでは1問当たりの配点は4～8%だったように思いますが、CKADは2～13%だったように思います。つまり配点のばらつきがより大きいので、時間も足りないですし、回答する問題は選んだ方がよいと思いました。

## 結果と感想

無事合格。予想通り、CKAの勉強をしていればCKADも受かると感じました。[CKAの準備](https://qiita.com/sotoiwa/items/3509ca3d18d1bed00dee)のうち[Kubernetes The Hard Way](https://github.com/kelseyhightower/kubernetes-the-hard-way)は不要と思います。

```
Congratulations!  You achieved a passing score on the CKAD Exam that you took on 2018-11-30!

You scored 87% for this Exam. A score of at least 66% was required to pass.
```

## 参考

CKADではなくCKAのときのログは以下。

- [Certified Kubernetes Administrator (CKA) 受験ログ](https://qiita.com/sotoiwa/items/3509ca3d18d1bed00dee)
TclでHello, world! ～その2～

# Tcl編 ～その2～

## 多言語対応でHello, world!
実行環境のデフォルトの言語で挨拶するときは

```
> c:\activetcl\bin\tclsh.exe hello.tcl
```

明示的に言語を指定するときは

```
> c:\activetcl\bin\tclsh.exe hello.tcl ja
```

以下のように訳文を用意していない言語を指定するとROOT.msgが使われるみたい。

```
> c:\activetcl\bin\tclsh.exe hello.tcl en
```

```tcl:hello.tcl
#-*- mode:tcl; coding:cp932 -*-
package require msgcat
namespace import ::msgcat::mc
::msgcat::mcload [file join [file dirname [info script]] msgs]
lassign $argv locale
if {$locale ne ""} {
	::msgcat::mclocale $locale
}
puts [mc MSG1]
```

```tcl:msgs/ROOT.msg
#-*- mode:tcl; coding:utf-8 -*-
::msgcat::mcflmset {
	MSG1 "Hello, world!"
}
```

```tcl:msgs/ja.msg
#-*- mode:tcl; coding:utf-8 -*-
::msgcat::mcflmset {
	MSG1 "こんにちは、世界!"
}
```

## プロセス間通信でHello, world!
コマンドプロンプトを2つ開いて、一方で

```
> c:\activetcl\bin\tclsh.exe hello1.tcl
```

のようにサーバーを実行し、他方で

```
> c:\activetcl\bin\tclsh.exe hello2.tcl
```

のようにクライアントを実行すると、クライアント側にHello, world!が表示される。

### TCP
```tcl:hello1.tcl
proc echo {sock} {
	set data [gets $sock]
	if {[eof $sock]} {
		close $sock
	} else {
		puts $sock $data
	}
}
proc listen {sock host port} {
	fconfigure $sock -buffering line -encoding utf-8 -translation crlf
	fileevent $sock readable [list echo $sock]
}
socket -server listen 9999
vwait forever
```

```tcl:hello2.tcl
set sock [socket localhost 9999]
fconfigure $sock -buffering line -encoding utf-8 -translation crlf
puts $sock "Hello, world!"
puts [gets $sock]
```

### DDE
```tcl:hello1.tcl
package require dde
set response ""
proc echo {data} {
	global response
	set response $data
}
dde servername -handle echo -- Echo
vwait forever
```

```tcl:hello2.tcl
package require dde
dde execute TclEval Echo "Hello, world!"
puts [dde request TclEval Echo response]
```
オンプレミス、Kubernetesで、マイクロサービスを意識したWebアプリをデプロイするまでの軌跡

# はじめに

はじめまして。京都のUI/UXデザイン事務所でデザイナーをしています。
この記事を含む一連の記事は、

[softdeviceのみんなでゆるく記事を書く。 Advent Calendar 2018](https://adventar.org/calendars/3532)

の12/2～12/8分の記事として公開しています。


# 今回のシリーズ記事について

それぞれの記事が単体としても読めるようになっていますが、全体としてはタイトルの通り、自分がWebアプリをデプロイするまでの手順や引っかかった所をまとめた記事になっています。

たまたま自分が社内でやっていた活動がアドベントカレンダー企画として良さそうなので取り上げたのですが、そもそも何の活動していて、なぜオンプレミス上のKubernetesという構成で進めようと思ったのか、背景を書いておきます。

## Q. 何を作ろうとしてるの？

**A. 「自分たちのワークを管理する、新しい総合ポータル」**

うちの会社では、自分達の働き方に合ったワーク管理システムを社内で内作して使っています。
ただ、5年以上前に作られたシステムなので、増改築を繰り返すうちに使わなくなった機能があったり、ここ最近で労働環境やワークスタイルが変わったりで、必要とされる情報が変化してきています。
このシステムを大規模に改修して、今のスタイルに合ったツールにしていきたいと考えています。

ただ、今回の記事の中ではシステムの中身には焦点を当てません。
タイトルの通り、Kubernetes上にこのシステムを展開した時の手順を紹介します。

## Q. なぜマイクロサービス？

**A. 「改修の進め方にマッチするから」**

大規模に回収する！と息巻いたものの、既存のシステムが割と大きいので、全てを完了してからローンチするとかなりまとまった時間が必要になります。
そこで、今のシステムが持っている機能を分割可能な小さな機能/アプリに切り離して、一つ一つを短期間でローンチして実際にスタッフに使ってもらいつつ、段階的に全サービスを入れ替えていく、という計画を立てました。

そういった中でマイクロサービスという言葉の存在を知り、あまり理解していないながらも今回の進め方にマッチしそう！と思ったので、マイクロサービスを意識しながら作っていきたいと思います。

## Q. なぜオンプレミス？

**A.「政治的な理由から」**

どちらかというと内政ではなく外交的な問題です。
お察しください。

## Q. なぜKubernetes？

**A.「やってみたいから」**

以上です。

# おわりに

僕達はデザイナーですが、自分が考えたアイディアを、絵ではなくもっとインタラクティブな表現で伝えたい、あるいは伝えないといけない機会が多々あります。特に僕たちはUI/UXの領域を専門としているので尚更です。そういった時は我々デザイナーもエンジニアリングの領域に手を伸ばす必要があり、かくいう僕も日常的にプログラミングをしていたりします。

一方で、これはGoogleCloudNext2018で感じた事なのですが、サーバーレスやKubernetesの登場によって、エンジニアが日常的にインフラの領域まで手を伸ばし、責任を持つ時代が到来しつつあります。インフラ管理という仕事がいきなりなくなるわけではないと思いますが、考え方の変化や技術の革新によって、垣根が薄れてきているのは確かだと思います。

こういった流れの中で、いずれはデザイン、エンジニアリング、インフラという、ユーザーにサービスを届けるまでの全ての制作過程が溶け合って、それぞれの考え方を理解していないと良いサービスを作れない時代が来るかもしれません。今回色々な事に挑戦してみようと思ったのは、そういった考えからでもあります。

***

何やら小難しくて抽象的な話をしてしまいましたが、今回のシリーズでは技術的な話を「とりあえずこうしたらできる！」という形でまとめていますので、同じようなところで引っかかった方や、これから始めたい！という方の一助になれば幸いです。

なにぶん初めて構築した時の手順になりますので、至らぬ点も多いと思いますが、何卒お手柔らかにお願いします。

# シリーズ記事一覧

1. オンプレミス、Kubernetes、マイクロサービスでWebアプリをデプロイするまでの軌跡
1. [Ubuntu 18.04 LTS にDocker環境をインストールする](https://qiita.com/soumi/items/5b01d88c187b678c0474)
1. [docker-registryをdocker-composeで起動する](https://qiita.com/soumi/items/f5c5e824f9408f1234c7) 
1. [Ubuntu 18.04 LTS にKubernetes環境をインストールする](https://qiita.com/soumi/items/7736ac3aabbbe4fb474a)
1. [Kubernetes上にアプリを展開する](https://qiita.com/soumi/items/9ae2ff8462f8e960938c)
1. [Kubernetesでコンテナを削除しても消えないボリュームを作る](https://qiita.com/soumi/items/e3c3b3c15ccdb20a092e)
1. [オンプレミスのKubernetesにNginx-Ingress-Controllerを設定する](https://qiita.com/soumi/items/c6358e5e859004c2961c)