OmniAICreator/Qiita-1.07M huggingface dataset:
Web App on Linuxを使ってACR上のコンテナを10分でデプロイ

# はじめに

コンテナは単一でも沢山メリットがあるので私の回りでも良く使われています。

Azureを久しぶりに触っていきなりAKS動かしてみましたが、
単一コンテナを利用する場合にはAKSはちょっとメンドクサイ。

ということで、Web App on Linuxがよさそうでしたので早速試してみました。
(AWSだとElastic Beans Talk的な感じですね）
初めての操作で1時間くらいでできて、2回目は10分でデプロイできます
（1時間のうちのほとんどは環境変数**WEBSITES_PORT**の存在に気付かなかったことです・・・）

コンテナレジストリにDockerHub使った例はWeb上に転がっていたので、ACRでやってみました。
AKSと違い、何も設定せずともイメージをpullできたので、特に難しい部分はありませんでした。

# 準備

AKS同様ACRのリポジトリを使おうと思います。こちらの記事を参考にACRにpushしてみてください。
[AzureContainerRegistryにprivateイメージをpushしよう](https://qiita.com/uzresk/items/f6fa479186c51dccaba1)

今回使うリポジトリ名はuzresk0627です。

# 早速やってみよう

App ServiceをクリックしてWeb App on Linuxを選択します。（みつけにくいです）

![image.png](https://qiita-image-store.s3.amazonaws.com/0/57686/b3a41af2-66c8-f801-26d4-c5c0c1b0bada.png)

必要事項を入れていきます。
「コンテナの構成」はACRを選択したときに補完候補がでてくるので入力が楽ですね。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/57686/4a9b82b3-31bf-3bd5-eb0a-4b1ccd3a0d92.png)

すこし待つとリソースが構築されます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/57686/01be23ce-ea42-2bf7-33fc-bf03256011ee.png)

# ログの有効化

トラブルシュートにはログですね。ログの設定はデフォルトでは無効になっています。
有効化しないと切り分けができないので、有効化しておきましょう。
Retentionの期間は適当に入力します。（おこのみで）

![image.png](https://qiita-image-store.s3.amazonaws.com/0/57686/4cb1f3f7-7b22-b836-ce65-14ac0393b519.png)

# 環境変数の設定

コンテナの引数に環境変数を設定するには「アプリケーション設定」から行います。
任意の設定が入れられます。
WEBサイトを公開するときに必須になるのは**WEBSITES_PORT**です。忘れない様に入れておきましょう。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/57686/89f7f2b4-9256-0a9a-b10b-9cd80f148617.png)

# 動かしてみる

環境変数の設定が終われば動かすだけです。コンテナの再起動をしましょう。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/57686/90d67561-62c3-84b6-d427-aaf6ad786de7.png)

すこし待って、ドメインにアクセスして確認しましょう

# トラブル対応

ローカルの環境で動作確認が取れているのであれば、あまり失敗することはないと思いますが、ログと環境変数の確認の仕方くらいは覚えておいた方が良さそうです。

## ログの確認

すこし待つとログが見れますので、「コンテナの設定」をクリックしてエラーがでてないことを確認しましょう。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/57686/f9bf8371-1877-ba8e-9645-e03d2603eaf6.png)

## 環境変数の確認

環境変数が正しく設定されているかはKudoを起動してみると良さそうです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/57686/078270c6-753c-036d-2b6f-3c52d749d797.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/57686/58e42e5a-e744-0740-d404-b619d42cc55e.png)

# その他

## カスタムドメインの設定

CNAMEを設定してあげれば問題なくカスタムドメインも利用できます。
SSLについてはドメインに紐付くものなのでカスタムドメイン利用時には別途証明書を用意する必要があります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/57686/672d96da-4692-ca6b-0664-347304da7cdd.png)

# さいごに

AWSでいうEBの位置づけで、単一のコンテナであればこれで十分ですね。
最低限必要なログもしっかり機能統合してあるし、デプロイなどもサポートされていてとても良い感じでした。
C#の練習(九九表)

##九九表を表示する
今回はC#の練習のために九九表を表示するプログラムを制作しました
##ソースコード
<div class="code-frame" data-lang="text"><div class="highlight">
<pre>
using System;

class WhileSample
{
   static void Main()
    {
        int val;
        for (int i = 1; i <= 9; i++)
        {
            for (int j = 1; j <= 9; j++)
            {
                val = i * j;
                System.Console.Write("{0,3}", val.ToString() + " ");
            }
            System.Console.Write("\n");
        } Console.ReadKey();
    }
}
</pre></div></div>
##結果![九九.PNG](https://qiita-image-store.s3.amazonaws.com/0/249276/bc52aaad-8c19-5f26-a69c-14d3b420d14a.png)
##まとめ
i*jを内側のfor文で回して初めは1*1から1*2になってjが9になったら一度中のfor文を終わらせて外のfor文を回して2*1...2*2と同じように回していきます。
表示する文のSystem.Console.Write("{0,3}", val.ToString() + " ");中の**{0,3}**を使うことで計算結果の表示スペースを広く確保することで桁の違いによる表のずれをなくしました
個人用メモ３ - <a>タグで<form>データ送信

個人的に調べた内容を自分のメモとして書き残します。

---

Webアプリケーション開発において
デザインからシステムを組み込む際

```php
 <a href="test.html">リンク</a>
```

という a タグによるリンクが記述されていたが
データを送信しなければならないので form タグの input type="submit" が理想的でした

input type="submit" に書き換えてみると、デザインがぐちゃぐちゃに…
なんとか a タグでデータ送信する方法を探しました

これがその方法のソースコードです

```php
<form action="test.html" name="form1">
<input type="hidden" name="test" value="add">
 <a href="javascript:form1.submit()">リンク</a>
</form>
```

これで無事に解決しました
ありがとうございました

割とスマートで簡単だったので、忘れないようにここに備忘録しておきます

---

最後までお読みいただきありがとうございました。
Prometheusのすすめ - Service Discovery  -

[Prometheusのすすめ - 初期導入 -](https://qiita.com/nekoneck/items/fad926b5ee58ad65f47c)の続きです。

本記事では、Prometheusを知らない人が試しながら調べながらエラー対応も含め記載していってます。
ので情報として煩雑な感じになっているのでご了承ください。

---


さて、PrometheusのService Discoveryを使えば、とりあえず知っているAWSアカウント内のサーバは認識できるらしいので、試していくよ。
増えたら通知とか出来るかな。

と、その前にPrometheusはバイナリで導入しているので、自動起動の設定をしよう。

## 自動起動設定

```
# killall prometheus
# mv ./prometheus-2.3.1 /usr/local/
# ln -s /usr/local/prometheus-2.3.1/prometheus /usr/bin/
# vi /lib/systemd/system/prometheus.service
[Unit]
Description=Prometheus service
After=syslog.service prometheus.service

[Service]
Type=simple
ExecStart=/usr/bin/prometheus --config.file=/usr/local/prometheus-2.3.1/prometheus.yml
PrivateTmp=true

[Install]
WantedBy=multi-user.target

# systemctl enable prometheus
# systemctl start prometheus
```

## Service Discovery
参考は前記事でも書いた[次世代監視の大本命！ Prometheus を実運用してみた](https://qiita.com/sugitak/items/ff8f5ad845283c5915d2)から。

```
# vi /usr/local/prometheus-2.3.1/prometheus.yml
scrape_configs:
  - job_name: 'TEST_PROJECT'

    # EC2 Service Discovery Config
    ec2_sd_configs:

      - region: ap-northeast-1
        access_key: XXXXXXXXXXXXXXXXXXX
        secret_key: XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        port: 9100  # 監視対象ポート
# systemctl restart prometheus.service

```

よし、ブラウザで見てみよー。

![prometheus03.PNG](https://qiita-image-store.s3.amazonaws.com/0/160548/c6bbebdc-a8de-ceda-ec16-cb7cc0da0ca8.png)

ちゃんとリージョンに存在しているインスタンス数分、追加されてる。
UNKNOWNになってるのはまだPrometheusからpullしてない状態で、DOWNがpullしたけどダメだったやつっぽい。
まだexporterを入れてないから当然だね。（再読み込みしたら全部DOWNになってた）

でもこれって内部のIPで登録されてるからexporter入れても、内部で繋がってないPrometheusからは無理？

と思ったら、以下にやり方が書いてあった。
[1万台のサーバを監視できると話題のPrometheusをGrafanaと組み合わせて導入した話~vol2~](https://blog.nagisa-inc.jp/archives/1557)
うーん。。。ここらへんのリファレンス的なのが日本語で欲しいなあ。。。

とりあえず、そのまま真似よう。

```
      - region: ap-northeast-1
        access_key: XXXXXXXXXXXXXXXXXXX
        secret_key: XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        port: 9100  # 監視対象ポート
    relabel_configs:
      - source_labels: [__meta_ec2_public_ip]
        regex:  '(.*)'
        target_label: __address__
        replacement: '${1}:9100'
      - source_labels: [__meta_ec2_tag_Name]
        target_label: instance
```

結果

![prometheus04.PNG](https://qiita-image-store.s3.amazonaws.com/0/160548/8a494096-eb64-2c27-db9e-fc1bf510e413.png)

Labelsにインスタンス名と、EndPointがパブリックIPになった。
パブリックIPが無しになってるインスタンスは停止しているやつか、本当に無いサーバ。


今の会社だと大体プロジェクト毎にクラウドのアカウントが分かれてるので、それ毎に設定してあげれば、大体全容を掴めそうだ。

あとは監視のアラートと通知とかもやらないとね。
【備忘録】jQueryのcssプロパティ別 アニメーションのパフォーマンスの違い

備忘録。

参考は以下。
> https://www.html5rocks.com/ja/tutorials/speed/high-performance-animations/

結論から言うと、例えばカルーセルとか、アニメーションするときにイジるプロパティは
leftじゃなくてtransformの方がパフォーマンスが良いですよと言うお話。

アニメーション推奨プロパティは

- translate
- rotate
- scale
- opacity

らしい。


またcssアニメーションとjsのアニメーションでは
cssアニメーションの方がパフォーマンスは良いけど
jsみたいにいろんな制御はできないって言う比較も細かく書いてある。
たぶん一番簡単なmicro:bitのはじめかた Part1

最近流行りだしたmicro:bitについてのスターティングチュートリアルを書きます。
子供の夏休み向け教材に最適かも？

---
#micro:bitって何？

---
イギリスのBBCが作った教育用のシングルボードコンピューターです。
MakecodeというScratchによく似たブロックプログラミングで動かせるデバイスです。

---
![スクリーンショット 2018-06-27 10.02.47.png](https://qiita-image-store.s3.amazonaws.com/0/65643/b0c78024-b489-7aed-303a-f7f413ca04f9.png)

http://microbit.org/ja/

---

一台の中に５×５の２５個のLED、２つのボタン、20個の端子、光・温度・加速度センサーや電子コンパス、
無線/bluetooth通信機能が含まれています。
http://microbit.org/ja/guide/features/

---

##おいくら？
**2,160円(税込)**
amazonでも買えます。
日本の正規代理店は「スイッチエデュケーション」なので販売元を確かめて購入すると良いかと。

---
##どうやって使うの？
micro:bitはとても簡単に扱うことができます。

---
###用意するもの
micro:bitを使うためにはmicro:bit本体と、
WEBブラウザが動くPCまたはAndroid/iOSデバイスがあればプログラミングできます。
一番簡単な[Makecode](https://makecode.microbit.org)について取り上げます。

---
###注意
micro:bitは一般的な電子部品と同じで、注意することがあります。
- 水に注意。濡れた手で触らない
- 静電気に注意。触る前に金属に触れましょう。
- 力を入れすぎない。

---
#micro:bitを使ってみる

---
###まずmicro:bitをUSBケーブルを使ってPCと接続します。
接続すると電源もはいります。
![IMG_0605.JPG](https://qiita-image-store.s3.amazonaws.com/0/65643/aa141480-ca82-3845-9496-e0245366033a.jpeg)

---
###Makecodeを使ってプログラミングします。
[Makecode](https://makecode.microbit.org) https://makecode.microbit.org にアクセス
まずは基本の中から「最初だけ」と「アイコンを表示」を右側にドラッグ＆ドロップしてセットしましょう。
![スクリーンショット 2018-06-27 10.08.59.png](https://qiita-image-store.s3.amazonaws.com/0/65643/010d3ec7-1fa8-6cc5-13e8-026b3a1e24dd.png)

---
###ダウンロード＆アップロード
ダウンロードボタンを押してダウンロードしたら、デバイスの中にあるmicro:bitにアップロードしましょう。Windows10app版の場合、ダウンロードを押すだけでアップロードもされます。
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/65643/31271a8d-72de-296a-b0de-a2c0a4471d42.png)

---
###動いたらOK
表示が変わったらOK。これだけ。すごく簡単。
![IMG_0606.JPG](https://qiita-image-store.s3.amazonaws.com/0/65643/6d4f3285-3102-73ff-3395-f1799b84533e.jpeg)

---
##おまけ
###ラズパイやArduinoと何が違うの？
安い（重要）
どちらもLEDなどの電子部品を動かすためには電子回路の最低限の知識が必要になります。（ArduinoはLED一つなら組み込み済み）
子供が使うには電子部品は細かい＆難しい。
micro:bitはセンサーなどを実際に使ってみながら、電気回路やプログラミングの理解をするのに最適だと思います。
DNSのレコード情報をnslookupで確認する

windows機でDNSの伝搬状況を確認する。
以下コマンドはコマンドプロンプトで実行できる

Aレコードの伝搬確認コマンド

```` 
nslookup -q=A [DOMAIN]
````

TXTレコード伝搬確認コマンド

```` 
nslookup -q=TXT [DOMAIN]
````
Essential Scala 輪読会

Essential Scala 輪読会の開催にあたってのメモ。

# 事前準備

「Essential Scala 輪読会」に参加する前にやっておくといいこと。

## 書籍をダウンロードする

Essential Scala は Underscore Consulting LLP という会社が公開している Scala の入門書。下記の URL から無償でダウンロードできる。

https://underscore.io/books/essential-scala/

## Scala をインストールする

Scala の REPL があると Essential Scala に付属しているサンプルコードや課題などを実行できる。輪読会の空いた時間で課題をやるのでインストールする。

macOS なら Homebrew からインストールするといい。

```shell-session
$ brew install scala
```

# 発表資料

* [Essential Scala 第2章 式、型、値](https://docs.google.com/presentation/d/e/2PACX-1vS3T-yjFtA6izb3B0IZDl3etK5RRM1OTEFQVmlFvxzCL8IuSkPA1fbbBD1VxIZ8Ihu58LIh_yliGW_w/pub)
* [Essential Scala 第3章 オブジェクトとクラス](https://docs.google.com/presentation/d/e/2PACX-1vT41NoCTXBuh2IPHUGad0u4vpXlD8bOraVD0zoQhYcSR1THhQe2WT_55wm_Wbhn00I8XMqPM6iY4tap/pub)
* [Essential Scala 第4章 トレイトによるデータモデリング](https://docs.google.com/presentation/d/e/2PACX-1vQAwEySRxiF3_c8b54g71_SS12p3Bws9kaZR7SQZeBpWopPTYtKPgmBaFLKcRhoglSAEH7btuBIHdQX/pub)
* [Essential Scala 第5章 シーケンス処理](https://docs.google.com/presentation/d/e/2PACX-1vSgy3Evh_0IybpeA_t9Ni8Y_VvbsbxWp-O5Lbgly1DovK6l8GfQHHe_RcjSn_EFjcloo94tpQi7kxxw/pub)
* [Essential Scala 第6章 コレクション](https://docs.google.com/presentation/d/e/2PACX-1vQxyd-AgA447eZlZ-GA-yx98LJ0pEq-Mbw1UFE7N2HidiLUKtOK8TKK7dEfDLZR0aqiXATuxPYh8dHw/pub)
* [Essential Scala 第7章 型クラス](https://docs.google.com/presentation/d/e/2PACX-1vR_FM8zMEnDmnyDNjTdVV9ttBzGkuBCi2EOXXtMsqvMSY_9BCAFp6fKVnaKtK5cMPvDWq6Wos-9m3ab/pub)
TWELITEの無線タグアプリのログをシェルスクリプトで解析する

TWELITEの[無線タグアプリ（App_Tag）](https://mono-wireless.com/jp/products/TWE-APPS/App_Tag/index.html)のログをシェルスクリプトで解析してみます。

# データを読む

まずデータを読まないことにははじまりません。
基本的には`stty`で通信速度を設定して`cat`や他のコマンドへのリダイレクトで読めばいいのですが、macOSだけsttyを実行するタイミングが絶妙なので注意です。

## macOSの場合

ターミナルを起動して、

```shell-session
$ cat /dev/cu.usbserial-MW2GON6K 
```

したあと、もうひとつターミナルを起動して、

```shell-session
$ stty -f /dev/cu.usbserial-MW2GON6K 115200
```

とやると、先に起動したターミナルでデータの読込がはじまります。

https://stackoverflow.com/questions/34233066/change-the-baud-rate-stty-on-mac-terminal

## Linux (RaspberryPi + MONOSTICK)

(comming soon...)

## Linux (RAspberryPi + TWELITE DIP UART接続)

(comming soon...)


# 生データの貯蔵

App_Tag自体は時刻を出力しない（TWELITE自体にRTCがついてるわけじゃないので当然）のですが、

```shell-session
$ cat /dev/serial0 | while read line; do printf '%s %s' `date +%s` ${line}; done > raw_data/twelite.log
```

みたいな感じで1メッセージごとにタイムスタンプ（UNIX秒）を頭にくっつけてデータを貯めてあります。

```shell-session
$ cat raw_data/twelite.log | tail -n 20
1528815094 ::ts=3023155
1528815095 ::ts=3023156
1528815096 ::rc=80000000:lq=150:ct=79B9:ed=8202093D:id=2:ba=3100:a1=0890:a2=0504:tm=6702:hu=1225:at=0998
1528815096 ::ts=3023157
1528815097 ::ts=3023158
1528815098 ::ts=3023159
1528815099 ::ts=3023160
1528815100 ::ts=3023161
1528815101 ::rc=80000000:lq=159:ct=79BA:ed=8202093D:id=2:ba=3100:a1=0885:a2=0499:tm=6676:hu=1239:at=0998
1528815101 ::ts=3023162
1528815102 ::ts=3023163
1528815103 ::ts=3023164
1528815104 ::ts=3023165
1528815105 ::ts=3023166
1528815106 ::rc=80000000:lq=165:ct=79BB:ed=8202093D:id=2:ba=3100:a1=0885:a2=0501:tm=6645:hu=1224:at=0998
1528815106 ::ts=3023167
1528815107 ::ts=3023168
1528815108 ::ts=3023169
1528815109 ::ts=3023170
1528815110 ::ts=3023171
```

この無線タグにはBME280が接続されているので、温度、湿度、気圧が取得できています。

値の意味はそれぞれ、

- ba=バッテリー電圧（mV）
- tm=温度（℃ * 100）
- hu=湿度（% * 100）
- at=気圧（hpa）

となっています。


# タイムスタンプと温度だけ抽出する

`sed`でできました。

```shell-session:タイムスタンプと温度だけ抽出する
$ cat raw_data/twelite.log | grep '::rc=' | sed 's/^\([0-9][0-9]*\).*:tm=\([0-9][0-9]*\).*$/\1 \2/' | tail
1528815060 6895
1528815065 6869
1528815070 6832
1528815075 6804
1528815080 6769
1528815085 6745
1528815090 6725
1528815096 6702
1528815101 6676
1528815106 6645
```

続く・・・
CygwinでBabelを使おうとしてハマった - 「cannot write output format!」

初投稿です。

最近フロントエンドを始め、JavaScriptを勉強してます。
ReactJSを入門しようと、@teradonburiさんの「[ReactJSで作る今時のSPA入門（基本編）](https://qiita.com/teradonburi/items/fb91e5feacab5071cfef)」をやってみたところ、自分の環境のせいでどハマりしてしまいました。

表示されたエラーメッセージを検索しても解決策には至らなかったため、残しておきます。

---
#環境
　Windows 10
　mintty 2.8.5 (x86_64-pc-cygwin)

---
#問題
　Babelでjsxファイルをトランスパイルしようとすると以下のエラーが表示される。

```shell-session:cygwin-console
$ babel --plugins transform-react-jsx test.jsx
babel: cannot write output format!
Open Babel 2.3.2 -- Sep 27 2017 -- 16:47:36
Usage: babel [-i<input-type>] <name> [-o<output-type>] <name>
Try  -H option for more information.
```

最初はプラグインなどが正しくインストールできていないんだろうかと思っていたが、package.json見てみるとちゃんと入ってそう。

```json:package.json
{
  "name": "reactjs",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-plugin-transform-react-jsx": "^6.24.1"
  }
}
```

---
#原因
　npm(もしくはyarn)でインストールしたBabelではないBabelにパスが通っていた。

```shell-session:cygwin-console
$ which babel
/usr/bin/babel
```

えぇぇ～。どうやらCygwinのインストール時に紛れ込んでいた様子。

```shell-session:cygwin-console
$ ./node_modules/.bin/babel --plugins transform-react-jsx test.jsx
ReactDOM.render(React.createElement(
  'h1',
  null,
  'Hello, world!'
), document.getElementById('root'));
```

node_modulesに入ってるbabelを指定してあげたらちゃんと動いた。

---
#教訓

当たり前のことだけど、まずはバージョン確認すべきですね。
よく見たらエラーメッセージにもバージョン出てきてたし、package.jsonとバージョン違うのが一目瞭然。

ムダに時間を費やしてしまった。。。
Webアプリケーションの思い出


「Firebaseいいぞ」「Railsの次にくるのは？」という話のがバズっているみたいなのでWebアプリケーションの歴史を思い出してみた。自分の記憶と印象のみ。

---

# 〜1999年頃 CGIの時代
Perl, C
プログラムがHTMLを吐き出す時代。

# 1998年頃〜 HTML埋め込み言語の時代
PHP
HTMLにプログラムを埋め込む時代。なんか呼び名ありましたっけ？

# 2000年頃〜 Webアプリケーションコンテナの時代
Servlet

# 2001年頃〜 Webアプリケーションフレームワークの誕生
Struts
「ライブラリを使う」から「フレームワークに使われる」時代へ。

# 2003年頃〜 DIコンテナ (IoC)
Spring, Seasar
フレームワーク時代に合わせたモジュールのdecoupling。

# 2004年頃〜 フルスタックフレームワークの誕生
Rails
全部入り。レイヤ毎にわかれていたソフトウェアをまとめて1つのフレームワークとして提供してくれた。

# 2009年頃〜 ノンブロッキング
Node.js
次の時代というよりも特定用途向けのWebアプリケーション環境が出始める。

# 2015年頃〜 フロントエンド時代の突入
SPA
JavaScriptの復活。

# 次の時代
サーバレス？

----

それぞれの時代は多少オーバーラップしてる。
[Angular] Angularテンプレートまとめ チートシート

引用元: [Angular - Cheat Sheet](https://angular.io/guide/cheatsheet)

# このチートシートの読み方

| テンプレート | 出力 | 解説 |
|:--|:--|:--|
| テンプレートの書き方です。  | コンポーネント適用後の出力例です。  | 解説です。  |

## 前提

出力例は、以下のコンポーネントクラスを前提としています。

```typescript
export class MyCmpComponent {
  firstName: string     = "Jane";
  myAriaRole: string    = "banner";
  isDelightful: boolean = true;
  mySize: int           = 100;
  ponyName: string      = "Seabiscuit";
  employer: Employer;

  readRainbow($event: any): void { /* (snip) */ }
}
```


# Angular テンプレート文法


| テンプレート | 出力 | 解説 |
|:--|:--|:--|
| `<input [value]="firstName">`  | `<input value="Jane">`  | `value`プロパティに、`firstName`式の評価結果をバインドします。  |
| `<div [attr.role]="myAriaRole">`  | `<div role="banner">`  | `role`属性に、`myAriaRole`式の評価結果をバインドします。  |
| `<div [class.extra-sparkle]="isDelightful">`  | `<div class="extra-sparkle">`  | `extra-sparcle`CSSクラスを付与するかどうかを、`isDelightful`式の評価結果が真値になるかどうかにバインドします。  |
| `<div [style.width.px]="mySize">`  | `<div style="width:100px">`  | `width`プロパティに`mySize`式の評価結果をバインドします。単位`px`はオプションです。  |
| `<button (click)="readRainbow($event)">`  | `<button onClick="readRainbow($event)">`  | クリック時に`readRainbow`メソッドを呼び出します。  |
| `<div title="Hello {{ponyName}}">` | `<div title="Hello Seabuscuit">` | プロパティに補完文字列をバインドします。 `<div [title]="'Hello ' + ponyName">` と一緒です。 |
| `<p>Hello {{ponyName}}</p>` | `<p>Hello Seabuscuit</p>` | コンテンツを補完文字列にバインドします。 |
| `<my-cmp [(title)]="name">` || 双方向（ツーウェイ）データバインディングです。 `<my-cmp [title]="name" (titleChange)="name=$event">` と同じです。  |
| `<video #movieplayer ...><button (click)="movieplayer.play()"></video>` | | `video`要素を格納した`movieplayer`というローカル変数を生成します。ローカル変数は、同じテンプレート中のデータバインディングやイベントバインディング式で使用できます。 |
| `<p *myUnless="myExpression">...</p>` || `<ng-template [myUnless]="myExpression"><p>...</p></ng-template>`と同じです。 |
| `<p>Card No.: {{cardNumber ｜ myCardNumberFormatter}}</p>`[^1] || `myCardNumberFormatter`フィルタを通して出力します。 |
| `<p>Employer: {{employer?.companyName}}</p>` | | `employer`が`undefined`でもエラーにならないようにします。 |

[^1]: Markdownのエスケープがわからなかったので、パイプを全角で記載しています。
超小技!! Makefile に help をつけて「こいつ...できる!」と言われたい

開発時のめんどくさいコマンドを打ってる時間は極力減らしたいですよね。そこでMakefileなのですが、Makefileのコマンドが多くなったり、複雑になればなるほど「このコマンドなんだっけ」となります。

そこで今回は簡単に Makefile に help をつける方法を紹介します。これをつければチームメンバーに格の違いを見せつけることができます(多分

##Go言語での開発用のMakefileを例に

今回はGo言語での開発で使う Makefile の基本型を例に紹介します。もちろんGo言語をインストールしてなくても help は動くのでコピペで試せます。

手順は2つ
- target に help を追加。 grepと正規表現を使ったコマンドをその下に書きます。
- target の右隣に ## をつけてその後ろに説明書きを追加します。

実際のMakefileは下のようになります。ちなみにコマンド行の行頭にはtabでインデントしないとエラーになるので注意(僕は VScode のインデント設定がスペース4になっていてハマった淡い記憶がある)。grepコマンドの行頭の @ は実行時にコマンドを非表示にしてくれます。

```bash:Makefile

GOBUILD=go build
GOCLEAN=go clean
GOTEST=go test
GOGET=go get
BINARY_NAME=tryhelp
BINARY_UNIX=$(BINARY_NAME)_unix

all: test build ## go test & go build
.PHONY: build
build: ## build go binary
	$(GOBUILD) -o $(BINARY_NAME) -v
.PHONY: test
test: ## go test
	$(GOTEST) -v ./...
.PHONY: clean
clean: ## remove go bainary
	$(GOCLEAN)
	rm -f $(BINARY_NAME)
	rm -f $(BINARY_UNIX)
.PHONY: run
run: ## run go bainary
	$(GOBUILD) -o $(BINARY_NAME) -v ./...
	./$(BINARY_NAME)
.PHONY: help
help: ## Display this help screen
	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-20s\033[0m %s\n", $$1, $$2}'
```

実行してみましょう。

```bash

$ make help
all                            go test & go build
build                          build go binary
clean                          remove go bainary
help                           Display this help screen
run                            run go bainary
test                           go test
```

まごう事なき help です。これで新しくチームに入ったルーキーも道に迷わずに済みそうです。

printf内の値30を変更することで、ターゲットと説明の幅を調整する。
```| sort```を削除すると、makefileに書いてある順番で出てくる。

今回使った正規表現はこちらが勉強になる
[正規表現の基本](https://qiita.com/sea_ship/items/7c8811b5cf37d700adc4)
現在の日付、時刻を表示するプログラム

##現在の日付を表示する方法
今回はC#を使って現在の日付を表示する方法について説明します
##ソースコード
<div class="code-frame" data-lang="text"><div class="highlight">
<pre>
using System;

namespace ConsoleApplication1
{
    class Sample
    {
        static void Main()
        {
         // 現在の日付を取得する
    DateTime dtToday = DateTime.Today;


         // 取得した日付を出力する　　　　
            Console.WriteLine(dtToday.ToString());

            Console.ReadKey();
        }
    }
}
</pre></div></div>
##結果
![日付.PNG](https://qiita-image-store.s3.amazonaws.com/0/249276/135530f7-1284-a95c-39b6-c2318095f02c.png)
##現在の時間を表示する方法
DateTimeのTodayプロパティを使うことで現在の日付を取得することはできますが時刻は 00:00:00 固定となります。これでは特に利用する方法が見つからないので時間も取得できるように改変していきます
##ソースコード
<div class="code-frame" data-lang="text"><div class="highlight">
<pre>
using System;

namespace ConsoleApplication1
{
    class Sample
    {
        static void Main()
        {
         // 現在の日付、時刻を取得する

    DateTime dt= DateTime.Now;
    Console.WriteLine(dt);



            Console.ReadKey();
        }
    }
}
</pre></div></div>
##結果![時刻.PNG](https://qiita-image-store.s3.amazonaws.com/0/249276/6206b585-ed2c-5b3d-f6f8-0161263e2b50.png)
##まとめ
DateTime.Nowプロパティを使うことで現在の日付に加えて時刻も取得できるので特別な理由がない限りはDateTime.Nowプロパティを使うことを推奨したいと思いました。
Railsの初期設定に関して気をつけること（config/initializers/）

# はじめに

Web API を利用してWebアプリケーションを作ることはよくあると思います。その際に任意の `Gem`をインストールしたり、 特有の初期設定をすることがあると思います。そこらへんの内容で覚えておかなきゃいけないことをメモとして残しておきます。

# 初期設定に関するメモ

- ファイルは自動生成されないので、新規ファイルとして作成する
- `config/initializers/` 以下は外部ライブラリの設定ファイルの置き場であることが多い
- `config/initializers/` 以下にあるファイルは、設定ファイルとして `Rails` 起動時に自動的に読み込まれる
- なので、`config/initializers/` を書き換えたら、`Rails s`　で再起動をする必要がある
[Homestead+Laravel+Vue.js] いちいちページリロードするのが大変だったのでホットリロードを試してみたら捗りすぎた話

# はじめに
保存`(Ctrl + S)`→`F5`キーの連打、端的に言って疲れますよね。
特にフロントエンドはちょこっと修正してリロード...の繰り返しで、これ以上消費したくない！と思っていたところにHotreloadなるものを発見。
使えないかどうか検討してみた。

SPA構築云々は飛ばします。
[**過去の記事**](https://qiita.com/tosite0345/items/e7ca7a9021b95167a23a) とか [**これ**](https://qiita.com/tosite0345/items/0f8aec4d987389c55766) 辺りを参考に。

# デモ
![2018-06-27_14h53_04.gif](https://qiita-image-store.s3.amazonaws.com/0/165355/c8d4e162-7276-ad59-bfd6-7e5d5ddc857a.gif)

# 環境
Vagrantから起動したHomesteadをWebサーバーにして開発してます。

# 手順
## 1.エントリポイント作成
トランスパイル後のjs側実行ファイルは `public/js/app.js` に出力されます。
これをエントリポイントで読み込んであげればオッケーなんですが…。

```html:vue_layout.blade.php
...
<!-- 環境ごとの差分を考えないようにするにはこれよりも -->
<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ secure_asset('js/app.js') }}"></script>

<!-- こっちの方がいいみたいです -->
<script src="{{ mix('js/app.js') }}"></script>
...
```

## 2.ローカル側でビルド実行

```bash:LocalMachine
npm run hot
```

## 3.VM側でサーバー起動

```bash:LocalMachine
vagrant ssh
```

```bash:homestead
cd code
php artisan serve
```

## 4.ブラウザから接続
`http://localhost:8000` にアクセスするとホットリロード機能が有効になっている！はず。

# まとめ
これでいちいちページリロードしなくてもよくなった！素敵！
あくまでもjsで記述されたものだけなので、例えばエントリポイント（bladeファイル）を書き換えた場合なんかは素直にリロードしてください。

ちなみにオレオレ証明書でSSLアクセスしてみたりといろいろ試しましたがどれもうまくいきませんでした。
何が悪いんだろう...。
vue.js vue-routerのリンクで無理やり外部サイトへ飛ばす（リダイレクトする）方法

この記事は以下のサイトへ移動しました。

[vue.js vue-routerのリンクで無理やり外部サイトへ飛ばす（リダイレクトする）方法](http://www.art-side.com/archives/120)
ゼロから始めるDeep Learning ―通勤時間にスマホの Google Colab で学ぶ :01

##はじめに
今更ながら [ゼロから作るDeep Learning ――Pythonで学ぶディープラーニングの理論と実装](https://www.oreilly.co.jp/books/9784873117584/) を通勤時間に読み始めたので、ついでにQiitaへの投稿も初めてみる

###簡単に自己紹介
しがない社内SE、Jupyter Notebook や、Google Colab を、サラッと試した事があり、Deep Learning、機械学習についてもサラッと調べてる程度

###通勤環境
-都内3路線乗り継ぎでドア2ドア1時間
-スマホはiPhone 6S Plus

##当初の目論見
『使うライブラリは、NumPy と Matplotlib ね、それなら Google Colab 使って、通勤時間にハンズオンできるじゃね』

##とりあえず、1章
Matplotlib での、グラフ描画も問題なさそう。
![ch01-1.png](https://qiita-image-store.s3.amazonaws.com/0/64173/51f6f57f-6d61-43ec-a3cd-773655d9b2b3.png)

###が、問題発生
>1.6.3 画像の表示

そもそも読み込む画像がないので [deep-learning-from-scratch](https://github.com/oreilly-japan/deep-learning-from-scratch) からソースコードを持ってくる。
`!コマンド`でシェルコマンドを実行できるので、

```py
!git clone https://github.com/oreilly-japan/deep-learning-from-scratch ./hoge #適当なフォルダ
```

フルパスで指定して読み込み

```py
!pwd #/content

import matplotlib.pyplot as plt
from matplotlib.image import imread

!ls ~/ #datalab  hoge
#img = imread('~/hoge/dataset/lena.png') # FileNotFoundError: [Errno 2] No such file or directory: '~/hoge/dataset/lena.png'
img = imread('/content/hoge/dataset/lena.png') # 画像の読み込み
plt.imshow(img)

plt.show()
```

![ch01-2.png](https://qiita-image-store.s3.amazonaws.com/0/64173/aa40fd4c-fa86-44cb-d404-988bd80d6ae5.png)


今回はここまで
Linux ServerでもGUIを使いたい

**当たり前ですが、Serverで使っている以上GUIは使えません。**
が、GUIがなくてもGUIを使いたいのが本記事の趣旨です。

# やり方
GUIがある端末でttyを立ち上げて以下のコマンドを実行するだけです。
動かすだけならオプションは-Yだけでいいです。

``` client.tty
ssh -XYC (user)@(ip/host)
# GUIでやりたいこと firefoxとか
```

# 構成
以下、注意事項です。
- クライアントがGUIに対応していないと表示されない
    - つまり、Desktop版からsshで接続する必要があります。
- Windows Subsystem for Linux(Bash on Windows on Ubuntu)だとダメでした。
- Windowsから実行する場合は更に設定が必要かも？

実施時はUbuntu16ですが、CentOSほかでも同じだと思います。

# 細かい話
ここにたどり着くまでにxサーバーに対して色々やるのでxhostが必要だとか、.Xauthorityにaddするとか、
あるいは/etc/ssh/ssh_configのX11を有効にしてポートフォワーディングをするとか、TCPポートをLISTENにして$DISPLAYにlocalhost:0.0を入れる…などなど、
かなり遠回りをしましたが、実は上記でいけました。
場合によってはssh_configのX11を有効にする作業[^1]は必要かもしれません。

# 注釈
[^1]: 【X11を有効にする】ForwardX11 = yesにしてsshを再起動する

# 読了後いいね！をお願いします。
どれだけの方に読んでもらっているか知りたいので、お手数をおかけしますがご協力いただけると嬉しいです。
sshコマンドで「Load key “(公開鍵のパス)” invalid format」という警告が出る場合

## 発生する問題

`~/.ssh/config`で管理されているサーバーに`ssh`コマンドで接続したときに、次のような警告が出る場合がある（ただし、接続自体は成功する）。

```
$ ssh my-server
Load key "/Users/jnito/.ssh/id_rsa.pub": invalid format
```

## 原因

`~/.ssh/config`の`IdentityFile`に秘密鍵（`id_rsa`）と公開鍵（`id_rsa.pub`）の2つが指定されている。

```~/.ssh/config
Host *
  UseKeychain yes
  AddKeysToAgent yes
  IdentityFile ~/.ssh/id_rsa.pub
  IdentityFile ~/.ssh/id_rsa

Host my-server
  HostName foo-bar.jp
  IdentityFile ~/.ssh/id_rsa.pub
  Port 5419
  User hogehoge
```

秘密鍵が指定されているので接続には成功するが、公開鍵を指定することには問題があるので警告が出てしまう。

## 解決策

`~/.ssh/config`の`IdentityFile`には秘密鍵（`id_rsa`）だけを指定する。


```~/.ssh/config
Host *
  UseKeychain yes
  AddKeysToAgent yes
  IdentityFile ~/.ssh/id_rsa

Host my-server
  HostName foo-bar.jp
  IdentityFile ~/.ssh/id_rsa
  Port 5419
  User hogehoge
```

## 参考情報

[linux \- id\_rsa\.pub file SSH Error: invalid format \- Stack Overflow](https://stackoverflow.com/questions/48328446/id-rsa-pub-file-ssh-error-invalid-format)
IBM Cloud PrivateでPodをmanagementノードで動かす

# 経緯

IBM Cloud Private(ICP)は、Kubernetesのノード定義を用途によって細分化しています。例えばELKスタックやPrometheusが稼働するManagementノードや、Ingressが稼働するProxyノードといった特殊用途のノードが存在します。

さて、Managementノードで稼働するELK等は、ICPのインストール時に合わせてインストールされるものですが、アプリケーション開発者は必要に応じて追加でインストールしてもいいとマニュアルには書かれています。そのためのHelmチャートも用意されています。しかし、Helmからインストールすると、そのELKはManagementノードではなく通常のWorkerノードにスケジュールされてしまいます。しかし、Managementノードは比較的多くのリソースを積んでいるノードですので、運用系のPodはここに寄せて動かしたいという場合もあります。

しかし、PodのマニフェストでnodeSelectorやnodeAffinityを使ってManagementノードを指定しても、スケジュール可能なノードがないというエラーにります。

今回は、そういったケースでPodをManagementノードで動かすための方法をメモします。

検証環境
- IBM Cloud Private 2.1.0.3

# 手順

## ManagementノードにPodがスケジュールされない理由

ManagementノードのTaintsがNoScheduleになっているからです。

```
$ kubectl describe node 10.132.20.215 10.132.20.216 | grep Taint
Taints:             dedicated=management:NoSchedule
Taints:             dedicated=management:NoSchedule
```

## Managementノードを使うための定義追加

PodのマニフェストにnodeSelectorとtolerationsを追加します。
例えばManagementノードを使う場合は下記のようにします。

```
      affinity:
        nodeAffinity:
          requiredDuringSchedulingIgnoredDuringExecution:
            nodeSelectorTerms:
            - matchExpressions:
              - key: beta.kubernetes.io/arch
                operator: In
                values:
                - amd64
                - ppc64le
      nodeSelector:        # 追加
        management: "true" # 追加
      tolerations:         # 追加
      - key: dedicated     # 追加
        operator: Equal    # 追加
        value: management  # 追加
        effect: NoSchedule # 追加
      containers:
      - command:
```

こうすることで、ノードとしてはManagementノードを指定しつつ、TaintsがNoScheduleになっていてもスケジュールを許可することができます。

すでにPodがWorkerノードにいる場合、kubectl applyすればすぐに設定が反映され、PodがManagementノードに移動していきます。簡単でしたね。
優れたプログラマーの性格

#はじめに
昨今のプログラミングブームによって、**「教養のために・・」**とか**「これから必要になると思うから・・」**と言う枕詞でプログラミングを始める人を多く見かけます（特に、大学入学したばかりの学生などに多い気がする）。

もちろん、勉強すること自体良いに決まってるのですが、中には**「え、君、本当にプログラマーになりたいの？」**と声を掛けたくなる人が正直結構います。

そこで、ここでは**[『プログラミングの心理学』](https://www.amazon.co.jp/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E3%81%AE%E5%BF%83%E7%90%86%E5%AD%A6-25%E5%91%A8%E5%B9%B4%E8%A8%98%E5%BF%B5%E7%89%88-%E3%82%B8%E3%82%A7%E3%83%A9%E3%83%AB%E3%83%89%E3%83%BBM%E3%83%BB%E3%83%AF%E3%82%A4%E3%83%B3%E3%83%90%E3%83%BC%E3%82%B0/dp/4822284700)**の一部を参考にながら、**「優れたプログラマーの性格」を自分の実体験なども織り交ぜながら紹介します。**
今一度*「自分がプログラマーに向いているのか」**「ただ流行りに流されてプログラマーになろうとしてないか」*ということを確認する１つのフィルターになれば良いと思っております。

#対象
・プログラマーの選考をするマネージャー
・プログラマーになろうか考え中の人
・現在、Progateなどで学習中でこれからさらに本格的にやっていこうか悩み中の人

#プログラミングの成功には、知能より性格の方が重要
ごく普通のプログラミングマネージャーであれば、プログラミングの成功には性格より知能の方が重要だと言うだろうが、**プログラミングができないほど知能の低い人は滅多にいない。**

技術レベルが足りていないのなら、学習をさせれば必要な部分は後からいくらでも補充できる。
しかし、気質的にプログラマーの仕事に向いていない人の例は、誰でも知っているはずだ。

つまり、**技術は後天的にいくらでも補充することはできるが、性格はほとんど先天的に決まっているもの**であり、さらに**性格が原因で起きるトラブルは複雑で対処するのに非常に多くのコストがかかる**ことが間違いない。


#１週間またはそれ以上の間、ストレスのかかる状況に耐える能力
今日のプログラミング業務の実情から考えて、１週間またはそれ以上の間、ストレスのかかる状況に耐える能力を持たない人には、良いプログラマーになる素質がないと断言できる。

#急速な変化への順応性
プログラマーは、たった今手掛けていた仕事が中止されたり、そこまでいかなくても、今までの努力が塵になるぐらい大幅に変更されたりといった心理的ショックを、一生どころか、1ヶ月と免れることが出来ない。

また、急速に新しいテクノロジー技術が生まれている今の時代、ある1つのスキルをマスターしただけで一生食っていくことはできない。**時代の変化に柔軟に応じて、需要のある新しいスキルをその場しその場で身につけていく必要がある**ことは間違いない。


#少々の几帳面さ
プログラミングに必要な性格特性の中でも特にわかりやすいのは、少々の几帳面さである。
身だしなみのことを言っている訳ではなく、ここで言っているのは、書類を整理しなくてはいけないと言う意識が多少でもあるかどうかである。
ある計算センターでは、新人採用試験で、もっともM点数の高い応募者ではなく、最もきちんと書類を整理して提出する応募者を採用している

#自信と多少の謙虚さ
プログラマーの仕事は何かを成し遂げることであり、何かを成し遂げるには、時には障害を迂回し、あるいは飛び越え、あるいは叩き壊すことが必要になる。
謙虚な人は、どうすれば自分が道を誤るかをよく知っている。

実際のテストでは、「謙虚型」のプログラマーはエラー回数が極端に少なく「自信型」の方がエラー回数が多かった反面、「自信型」の方が作業の時間が早かったとデータがある。

謙虚さのない自信は、安全弁のない蒸気ボイラーのようなものだが、
自信のない謙虚さは、蒸気ボイラーのない安全弁のようなものである。爆発する危険はないが、何かを成し遂げられる可能性もない。

#ユーモアのセンス
コンピュータは我々を「あざけ笑う」ため、一緒になって自分を笑うことができない人は、そう長い間プログラミングに耐えられないだろう。

ようやく光明が見えたかと思うと、すぐまた馬鹿げた仮定を使い、役立たずの慣行に従い、くだらないへまをする。
「ハハハハハ」と自分を笑えなければ、こんな道化役をいつまでもやってはいられないのだ。


#終わりに
人の個性を形成する要因全体としての性格は、その人のあらゆる言動にあらわれる。それはとりわけプログラムにあらわれる。と語る著者のメッセージと自分の体験談から今回は、「優れたプログラマーの性格」を整理してみました！

そもそも、プログラミングが理解できない程知能が低い人などいないという前提に立つ時、重要なのは後天的に身につく技術よりも「性格」だと主張する著者の意見には賛否両論あるかもしれないですが、上記にあげられた性格特性がプログラマーに求められていることは間違いと思うので、参考にしてもらえたら嬉しいです！

[Twitter](https://twitter.com/?logged_out=1&lang=ja)では、エンジニア向けの面白そうな情報の共有や、**「こんなアイデアあるんだけど作って欲しい！」といった依頼に無料で答えています**のでフォローの方してもらえると嬉しいです！

それでは！
Swift 4でBase64のEncode、Decode

たまたま話に上がったので、Swiftでどうやるのかをメモしておく

## Base64とは

https://ja.wikipedia.org/wiki/Base64

> Base64は、データを64種類の印字可能な英数字のみを用いて、それ以外の文字を扱うことの出来ない通信環境にてマルチバイト文字やバイナリデータを扱うためのエンコード方式である。MIMEによって規定されていて、7ビットのデータしか扱うことの出来ない電子メールにて広く利用されている。具体的には、A–Z, a–z, 0–9 までの62文字と、記号2つ (+, /)、さらにパディング（余った部分を詰める）のための記号として = が用いられる。この変換によって、データ量は4/3（約133%）になる[1]


## environment 

- Xcode 10 beta 2
- Swift 4.2
- (Xcode 9.4.1でも動く)

## Playgroundでやった

```swift
import Foundation

let originalString = "Hello, playground"

// Encode

let originalData = originalString.data(using: .utf8)

let encodedString = originalData?.base64EncodedString()

print(encodedString!)    // SGVsbG8sIHBsYXlncm91bmQ=


// Decode

let restoreData = Data(base64Encoded: encodedString!)

let restoreString = String(data: restoreData!, encoding: .utf8)

print(restoreString!)    // "Hello, playground"

print(originalString == restoreString)   // true

```
docker、nginx-proxy、letsencrypt環境でwordpressするまで

[docker、nginx-proxy、letsencryptでとりあえずredmineするまで](https://qiita.com/hrkbyc/items/701fde92d6f2be111c89)の環境でwordpressしたい

laravelしたい場合はこっち
[docker、nginx-proxy、letsencrypt環境でlaravelするまで](https://qiita.com/hrkbyc/items/bf4675b6df4d3e4e0de3)

```
├── wp(new)
│   ├──docker-compose.yml
│   ├──php
|   |  └──Dockerfile
│   └──nginx
|      └──default.conf
├── laravel
│   ├──docker-compose.yml
│   ├──php
|   |  └──Dockerfile
│   └──nginx
|      └──default.conf
├── redmine
│   └── docker-compose.yml
└── shared
    └── docker-compose.yml
```

```wp/docker-compose.yml
version: '2'
services:
  nginx:
    image: nginx
    external_links:
      - mysql
    container_name: "wordpress-nginx"
    volumes:
      - ./src:/src
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
    environment:
      VIRTUAL_HOST: 〇〇.com
      LETSENCRYPT_HOST: 〇〇.com
      LETSENCRYPT_EMAIL: 〇〇@〇〇.com
    restart: always
  php:
    build: ./php
    container_name: "wordpress-php"
    volumes:
      - ./src:/src
      - ./php/php.ini:/usr/local/etc/php/php.ini
    restart: always

networks:
  default:
    external:
      name: shared
```

```php/Dockerfile.
FROM php:7-fpm
RUN apt-get update \
		&& docker-php-ext-install pdo_mysql mysqli \
		&& mkdir -p /src

COPY php.ini /usr/local/etc/php/

WORKDIR /src
```

```nginx/default.conf
server {
	listen 80;
	server_name localhost;
	root /src/;
	index index.php index.html index.htm;

	location / {
		try_files $uri $uri/ /index.php?$query_string;
	}

	location ~ \.php$ {
		try_files $uri = 404;
		fastcgi_split_path_info ^(.+\.php)(/.+)$;
		fastcgi_pass wordpress-php:9000;
		fastcgi_index index.php;
		fastcgi_param SCRIPT_FILENAME  $document_root$fastcgi_script_name;
		fastcgi_param PATH_INFO $fastcgi_path_info;
		include       fastcgi_params;
	}
}
```

```
cd wp
docker-compose up -d
wget https://ja.wordpress.org/latest-ja.tar.gz    
tar xzfv latest-ja.tar.gz > /dev/null
mv wordpress src
```

このままだとMixed Content警告が出てCSSが当たらない

```
cp src/wp-config-sample.php src/wp-config.php
```

データベースの設定、

```src/wp-config.php

define('DB_NAME', 'wordpress');
define('DB_USER', 'root');
define('DB_PASSWORD', 'root');
define('DB_HOST', 'mysql');

// 省略

if (isset($_SERVER['HTTP_X_FORWARDED_PROTO'])
  && $_SERVER['HTTP_X_FORWARDED_PROTO'] === "https") {
  $_SERVER['HTTPS'] = 'on';
}
define('FORCE_SSL_LOGIN', true);
define('FORCE_SSL_ADMIN', true);

// wp-settings.phpを読み込む前に書かないとこのページにアクセスする権限がありません。となるので注意

/** Sets up WordPress vars and included files. */
require_once(ABSPATH . 'wp-settings.php');

```
### 参考
[WordPress + HTTPS + リバースプロキシ = このページにアクセスする権限がありません。](https://blog.ohgaki.net/wordpress-https-reverse-proxy-sorry-you-are-not-allowed-to-access-this-page)
[Docker上でWordPressとnginx-proxyを連携(SSL対応)](https://hogehuga.net/linux/194/)
[DockerコンテナにWordPressをインストール](https://gtrt7.com/blog/nginx/docker)
指定した領域にディレクトリを作成するプログラム

##C#を使って新規のディレクトリを作成する方法
今回はC#を使った新規ディレクトリを作成するプログラムを制作しました
##ソースコード
<div class="code-frame" data-lang="text"><div class="highlight">
<pre>
using System;

namespace ConsoleApplication1
{
    class Sample
    {
        static void Main()
        {
            //Cドライブにtestのディレクトリを作ってその中にinディレクトリを作る
            System.IO.DirectoryInfo di =
                System.IO.Directory.CreateDirectory(@"C:\test\in");
        }
    }
}
</pre></div></div>

##結果
![ディレクトリ作成.PNG](https://qiita-image-store.s3.amazonaws.com/0/249276/ff3f7d4e-d85d-8c5f-eb35-0f530239cf81.png)
##まとめ
System.IO名前空間のDirectoryクラスのCreateDirectoryメソッドを使うことで自分が指定した領域に新規でディレクトリを作成することができました。
このメソッドは親のディレクトリが存在しない場合には自動的に親のディレクトリを作成してくれます
Jupyter Notebookを出力を無視してgit管理する方法

Jupyter Notebook(.ipynb形式)はインタラクティブな実行環境を提供する一方で、ブロックごとの出力や実行番号が必ずしもステートレスとはならず、gitで管理する時の壁となっています。具体的には、ipynb形式は出力や実行番号も内部に保存するので、管理の本質ではないdiffが多くなりコミットログを追うことが難しくなります。

本記事ではこれらに依存せずJupyter Notebookファイルをgit管理する方法をいくつか紹介します。
ただgit管理するだけではなく、以下の要求に着目しながら各方法を比較していきます。

- 手軽さ: 存在を意識せずに開発できるか。git管理することで余計な手作業は増やしたくありません。
- 環境依存性: pythonの場合、pyenvやpyenv-virtualenvなどといったpythonのバージョンやインストールしたpipモジュール群を切り替えるツールを使っている方も多いかと思うので、設定は各環境ごとに行えるのが理想です。
- 継続的な開発への耐性: Jupyter Notebookでは出力や実行番号は試行錯誤の跡として重要な役割を果たすことがあるので、それに対してケアできるのかに関しても言及します。

### 結論
上の要求をすべて満足した上でgit管理することは難しいですが、いくつか前提をおけば可能な場合があります。

### 方法1 Clear All Outputs
Cell → All Output → Clearを押すと実行順の番号や標準出力が全て消えます。とりあえずしのぐならこれ。

![スクリーンショット 2018-06-25 12.12.53.png](https://qiita-image-store.s3.amazonaws.com/0/72824/4ddc148c-c536-1091-d17e-41436811673b.png)

管理するipynbファイルが多い場合、手作業が多くとても面倒という問題があります。

### 方法2 jupyter_notebook_config.pyを編集する

[公式ドキュメント](http://jupyter-notebook.readthedocs.io/en/latest/extending/savehooks.html)で述べられている内容です。詳しくは https://qiita.com/mmsstt/items/6f8382afcc94f57861d4 が参考になります。概要は以下

- jupyter_notebook_config.pyにセーブ時にフックする処理を追加する。
- セーブ時に出力や実行順などを除いた.pyファイルが生成され、それを管理する。

ipynbファイルそのものを管理しているわけではないので、この記事の趣旨とは外れると思いますが、参考情報として紹介しました。

### 方法3 nbstripout

nbstripout: https://github.com/kynan/nbstripout
雑に紹介すると方法2を自動でやってくれるpipモジュールです。pipで導入するので、pyenvの中でコントロール可能です。
インストールは以下。

``` bash
$ pip install --upgrade nbstripout
$ nbstripout --install --attributes .gitattributes
```

すると以下のような.gitattributesファイルが生成されます。これによって、git commit時に出力や実行番号を取り除いたipynbファイルがコミットログに適用されます。

``` :.gitattributes
*.ipynb filter=nbstripout

*.ipynb diff=ipynb
```

開発への影響として、コミットするとipynbファイル自体の出力が削除されてしまうので、試行錯誤の最中などの場合は注意する必要があります。また、事前にcheckpointを作成していれば、出力結果を振り返ることができます。

## 各方法比較
||手軽さ|環境ごとへの対応|継続的な開発への耐性|
|----------:|----------:|----------:|-----------:|
|Clear|×|○|○|
|jupyter_notebook_config|○|× グローバル設定を変更する|○|
|nbstripout|○|○|△ commitするたびに出力が消える|

個人的にはnbstripoutは実質コマンド2つで設定が終わる割に恩恵が多いので、commitするタイミングさえ気をつければ、使ってみた感じ良いなと思いました。
docker、nginx-proxy、letsencrypt環境でlaravelするまで

[docker、nginx-proxy、letsencryptでとりあえずredmineするまで](https://qiita.com/hrkbyc/items/701fde92d6f2be111c89)で作った環境でlaravelしたい

wordpressしたい場合はこっち
[docker、nginx-proxy、letsencrypt環境でwordpressするまで](https://qiita.com/hrkbyc/items/d7802b1f8d9fda21c43d)

```
├── laravel(new)
│   ├──docker-compose.yml
│   ├──php
|   |  └──Dockerfile
│   └──nginx
|      └──default.conf
├── redmine
│   └── docker-compose.yml
└── shared
    └── docker-compose.yml
```

```laravel/docker-compose.yml

version: '2'

services:
  nginx:
    image: nginx
    external_links:
      - mysql
    container_name: "laravel-nginx"
    volumes:
      - ./src:/src
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
    environment:
      VIRTUAL_HOST: 〇〇.com
      LETSENCRYPT_HOST: 〇〇.com
      LETSENCRYPT_EMAIL: 〇〇@〇〇.com
    restart: always
  php:
    build: ./php
    container_name: "laravel-php"
    volumes:
      - ./src:/src
    restart: always

networks:
  default:
    external:
      name: shared

```


```laravel/php/Dockerfile.

FROM php:7.2.6-fpm

RUN apt-get update \
  && apt-get install -y zlib1g-dev \
  && docker-php-ext-install zip

RUN php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" \
  && php -r "if (hash_file('SHA384', 'composer-setup.php') === '544e09ee996cdf60ece3804abc52599c22b1f40f4323403c44d44fdfdd586475ca9813a858088ffbc1f233e9b180f061') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;" \
  && php composer-setup.php \
  && php -r "unlink('composer-setup.php');" \
  && mv composer.phar /usr/local/bin/composer

ENV COMPOSER_ALLOW_SUPERUSER 1
ENV COMPOSER_HOME /composer
ENV PATH $PATH:/composer/vendor/bin

RUN composer global require "laravel/installer"

RUN apt-get update \
  && apt-get install -y libpq-dev \
  && docker-php-ext-install pdo_mysql

RUN apt-get update \
  && apt-get install -my wget gnupg

RUN curl -sL https://deb.nodesource.com/setup_6.x | bash - \
  && apt-get update \
  && apt-get install -y nodejs

WORKDIR /src

```

```nginx/default.conf

server {
  listen 80;
  server_name localhost;
  index index.php index.html;
  root /src/public/;

  location / {
    try_files $uri $uri/ /index.php?$query_string;
  }

  location ~ \.php$ {
    try_files $uri = 404;
    fastcgi_split_path_info ^(.+\.php)(/.+)$;
    fastcgi_pass laravel-php:9000;
    fastcgi_index index.php;
    include fastcgi_params;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    fastcgi_param PATH_INFO $fastcgi_path_info;
  }
}

```

インストールとかする

```
cd laravel
docker-compose build
docker-compose up -d
cd src
composer install
npm install
```

.env.exampleをコピーして.envを編集

```
cp .env.example .env
```

```.env.
DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=root
DB_USERNAME=root
DB_PASSWORD=root

```

migrate
パーミッションを変更しないといけなかったかもしれない（忘れた）

```
docker-compose exec php php artisan key:generate
docker-compose exec php php artisan migrate
```
無線LANと有線LANのメリットとデメリット

#はじめに
このブログは授業で受けた内容のまとめや感想などを書いています。

今回は前の記事で言っていた通り、無線LANと有線LANのメリット・デメリットに関してを簡単にまとめた記事になります。
#項目
・有線LANとは
・無線LANとは
・有線LANのメリット・デメリット
・無線LANのメリット・デメリット

#有線LANとは
有線LANは、LAN線を使ったLANの接続方法です。
ルーターとPCをLAN線でつなげる昔からあるやり方で、LANの種類や接続の形状によって回線速度なども変わります。
今でもこの有線LANでの接続は使われているところは多いです。

#無線LANとは
無線LANは、無線LANルーターを使って電波を飛ばして、WIFI対応機器との接続ができるようにする接続方法です。
WIFI対応機器なので、スマホやタブレット、ゲーム機なども接続できます。
無線LANルーターとONUをLAN線で接続すれば使えるので、LAN線の数も減ります。


#有線LANのメリット・デメリット

##メリット
まず、有線LANの一番のメリットは**通信の安定性がある**ことです。やはり、電波で飛ばすのではなく、接続されている方に送っているので、無線LANよりも早いということが多いです。(~~最近は同じくらいの速度で使えるものもありますが~~)
もう一つのメリットは、**セキュリティ面が強い**ことです。優先だと、電波が乗っ取られたり、悪用されるといったことが少ないので、セキュリティ面としては優秀なのが強みです。

あともう一つメリットをつけるとすると、基本は無線LANより安く済むことですね(-ω-)/


##デメリット
デメリットとしては、インターネットが使えるものや場所が限られてくることです。
スマホやタブレットなどで、変換アダプタを使うという手もありますが、そのアダプタにお金がかかるので別途費用が掛かります。そして、LAN線の届く範囲でしか使えません。
もう一つは、接続するものに距離がある場合、配線するときに工事がいることです。
家の大きさとルーターとPCの距離感なども考えて配線しないといけないので、少し手間がかかります。

#無線LANのメリット・デメリット
##メリット
無線LANのメリットは、使う場所を選ばないというのが最大のメリットです。
電波の届く範囲であればどこでもネット接続できるので、非常に便利です。
その他のメリットとしては、線なしで複数通信することができることです。
##デメリット

デメリットとしては、無線LANルーターから離れれば離れるほど電波が届きにくくなり、通信速度が遅くなったり、不安定になり、切断されたりすることもあります。
もう一つのデメリットは、電波を飛ばしているので、電波を乗っ取られたり、悪用されたりする危険性が高くなることなので、セキュリティ対策をしっかりと行う必要があります。
あとは、こちらの方が高くつくことが多いというところですかね('ω')

#最後に
無線LANと有線LANどちらもいいところがあり悪いところがあるので、家庭で使う場合は自分の好みに合ったほうを使うことをオススメします。ちなみに私は有線派です(-ω-)/
【Android】ViewPagerのOnPageChangeListenerにはSimpleOnPageChangeListenerを使おう【Kotlin】

ViewPagerに `OnPageChangeListener` を追加し `onPageSelected` のみに処理をしたい場合に、以下のような実装を見ることがあります。

```kotlin
viewPager.addOnPageChangeListener(object : ViewPager.OnPageChangeListener {
    override fun onPageScrollStateChanged(state: Int) { 
    } 
 
    override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) { 
    }

    override fun onPageSelected(int position) {
        action(position)
    }
}
```

実装としては間違っていないのですが、一見 `onPageSelected` 以外のメソッドはあえてオーバーライドして処理を消しているのかなって気がするし、何かしらの意図があるようにも感じます。もし、何も意味がないのであればよりシンプルな書き方をするほうが良さそうです。

そこで使うのが `ViewPager.SimpleOnPageChangeListener` です。`ViewPager.SimpleOnPageChangeListener` を使った場合は、以下のように必要なメソッドのみをオーバーライドしてあげれば良いので可読性があがります。

```kotlin
viewPager.addOnPageChangeListener(object : ViewPager.SimpleOnPageChangeListener() {
    override fun onPageSelected(position: Int) {
        action(position)
    }
})
```

ちなみに `ViewPager.SimpleOnPageChangeListener` の中身はこのようになっています。

```java
/**
* Simple implementation of the {@link OnPageChangeListener} interface with stub
* implementations of each method. Extend this if you do not intend to override
* every method of {@link OnPageChangeListener}.
*/
public static class SimpleOnPageChangeListener implements OnPageChangeListener {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        // This space for rent
    }

    @Override
    public void onPageSelected(int position) {
        // This space for rent
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        // This space for rent
    }
}
```

せっかく用意してくれているので活用していけると良いですね。
また、こういうのはだいたいソースコードにコメントが書いてあるので他のも読んでみると良さそうです。
Web系企業へ転職したいSIerへ「ここが足らないこうしておけ」

ボヌスの時期ですね。貰うもん貰ったらさっさと転職だ！と言う事で、この時期に人は動きます。弊社にも中途採用の求職者がちょっぴり増えます。書類選考を経て私も面接を行います。ご存知の通り都内近郊のIT業界は慢性的に人手不足。では誰もが希望の職に就けるか？と言えば、そうではありません。このエントリはSIerからWeb系企業に転職したい技術者向けのアドバイスです。

#スペック
・Web系開発＋マネジメントで15年くらい
・弱小SIer出身、事業＋受託会社他を経験して今また事業会社
・人事権あり



#システムインテグレータのエンジニアはここが弱い
##セキュリティが担保されている前提でプログラムを書く
基幹システムなどの開発に携わっているので、SQLインジェクションやCSRF対策など、メジャーな攻撃に対しての知識が不足している場合が多い。フレームワークでの開発に慣れてしまっている場合もこのあたりは気をつけたい。スクラッチでセキュアに書けるレベルが欲しい。

##ソースを見せてもらえる制作物が無い
基幹システム等の場合、自身が関わったサービスを見せられないので能力を測りがたい。

##手順書が無いと環境を構築できない
「環境構築手順書」はシステムインテグレータの開発の現場に用意されている事が多く、それに頼って開発環境を構築している。逆に言えば手順書が無いと自身の力で一から開発環境を構築する事ができない。特に経験の浅いエンジニアには多い。

##コードを書いた量が不足している
仕様書、レビュー、手直し、レビュー…とドキュメント類にかける時間が長い。1日8時間、年240日。同じ時間を働いていても、書いてきたコードのステップ数は3倍くらい不足していると言うのが体感。

#対策
##無料のサーバ、無料のリポジトリがあるんだから家でやろうぜ！
帰宅後の余暇の1時間、2時間を開発にあて、開発環境の構築、仕様の策定、実装、デプロイ、テスト…今の時代は無料や安価で開発できる環境が揃っている。事業会社のエンジニアにジョブチェンジしたいのであれば、インフラからフロントエンドまで一通りの事ができた方がいい。スマホアプリが開発できればなお良い。何か簡単なサービスを作って公開してみよう！

##継続力
転職活動を初めてから慌てて作っても何もできない。毎週少しづつコツコツと開発を進める。一夜漬けの夏休みの工作より、毎日付けた朝顔の観察日記の方が評価される。2週に1回のコミット、2週に1つのQiitaエントリでも良い。継続的にやっている証拠が欲しい。

##アウトプットが評価される文化
gitでもQiitaでも技術ブログでもいい。サービス公開できていれば尚良い。家でも技術に取り組んでいる姿勢が欲しい。エンジニアリングが好きか？がわかる証拠が欲しい。

##技術書を読んでます( ｰ`дｰ´)ｷﾘｯ
だったら感想を書くといい。わからない用語をまとめて書いても良い。本を読んでわかった気になるのは駄目。目を通し、手を動かす事をおすすめする。技術書丸写ししたはずなのにコンパイルが通らないコードも多い。エラーメッセージを拾ってどこに問題があるのか？考える力と課題解決力が養われる。

子供の頃に「教科書の10ページから15ページを3回音読してきなさい」と言われた事がある。読まなくても先生はわからない。しかし「算数のドリルの3ページから5ページをやってきなさい」はやってきた証拠ができる。例え計算が間違っていても、やってきた事が評価される。


#まとめ
転職希望の有無にかかわらず、定期的にアウトプットを出しておくと、能力も磨かれるしいざと言う時に役に立つ！



####最後に
SIerが悪いと言っているのではなくて仕事の進め方、物の考え方、文化の違い。顧客ありきのSIerに対して、事業会社はサービスに採算がとれるかどうかわからない中で先行投資をしている。大きなくくりではIT業界になるが、ジョブチェンジと言ってもいいので、それなりの準備を。
graphcut

# グラフカットとは
　minimumcutによってノイズ除去、セグメンテーション、などをするためのツール

- サイト　　:場所を表す
- ラベル　　:各画素のとり得る値

 ![image.png](https://qiita-image-store.s3.amazonaws.com/0/266765/140945a5-4b79-3099-0674-496c07c0a334.png)


```python:graphcut.py
import numpy as np
import maxflow
from scipy.misc import imread
from matplotlib import pyplot as plt
import networkx as nx
import math

lumda = 1
k = 1


def create_graph():
    img = imread("result200.tif")
    row,column = img.shape
    g = maxflow.Graph[float]()
    nodeids = g.add_grid_nodes((img.shape))
　　　　　　　　# 画素値の差をノード間の重みにするのでパディング
    pad_im = np.pad(img, ((0, 0), (1, 1)), 'constant', constant_values=0)
    weights = np.zeros((img.shape))
    for i in range(img.shape[0]):
        for j in range(img.shape[1]):
            weights[i, j] = lumda * math.exp((-k) * abs(pad_im[i, j] - pad_im[i, j + 1]))
    structure = np.zeros((3, 3))
    structure[1, 2] = 1
    g.add_grid_edges(nodeids, structure=structure, weights=weights, symmetric=True)

    pad_im = np.pad(img, ((1, 1), (0, 0)), 'constant', constant_values=0)
    weights = np.zeros((img.shape))
    for i in range(img.shape[0]):
        for j in range(img.shape[1]):
            weights[i, j] = lumda * math.exp((-k) * abs(pad_im[i, j] - pad_im[i + 1, j]))
    structure = np.zeros((3, 3))
    structure[2, 1] = 1
    g.add_grid_edges(nodeids, structure=structure, weights=weights, symmetric=True)
　　　　　　　　# マスク画像をロード
    gro = imread('%05d.png' % 200)
    x, y = np.where(gro > 10) 
    for i in range(x.shape[0]): 
        if img[x[i], y[i]] >= 100: 
             temp = x[i] * column + y[i] 
             g.add_tedge(temp, 1000000000000, 0) 
             label[x[i], y[i]] = 1 
    x, y = np.where(img == 0) 
    for i in range(x.shape[0]): 
        temp = x[i] * column + y[i] 
        g.add_tedge(temp, 0, 100000) 
    return nodeids, g


if __name__ == '__main__':
    nodeids, g = create_graph()
    g.maxflow()
    sgm = g.get_grid_segments(nodeids)
    img = np.int_(np.logical_not(sgm))
    m = np.zeros((1040, 1392, 3)) 

    m[:, :, 0] = np.int_(np.logical_not(sgm)) 
    m = m.astype('uint8') * 255 
    img = cv2.imread("result200.tif") 
    dst = cv2.addWeighted(img, 0.5, m, 0.5, 0)     
    plt.imshow(dst), plt.show() 
```
GitHubとかのスクリーンショットでよくあるエモいターミナルを再現する

<img width="1552" alt="スクリーンショット 2018-06-27 13.09.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/244632/2d6c8f37-89a9-7cc5-c968-d81d23134b72.png">
GitHubとかでよくあるスクリーンショットに写ってるターミナル、めっちゃエモくないですか？
結論から出すと、こんな感じになりました。
![スクリーンショット 2018-06-27 13.16.44.png](https://qiita-image-store.s3.amazonaws.com/0/244632/4b5d8982-39ee-3e6f-948d-bf2a983e43d7.png)
**エモ〜い！！！**
これ、[ZeitのHyper](https://hyper.is/)ってターミナルエミュレータを使ってるみたいです。
これ、Webの技術で作られてるみたいで、**CSSでターミナルを装飾できます**

これはbrewのCaskでインストールできるので、

```shell
brew cask install hyper
```

でインストールしちゃいましょう！

初回起動だとちょっと違う色をしているので、Command+,を押して設定ファイルを開きましょう。エディタが起動しますので、

```js
backgroundColor: '#000000',
```

と書いてあるところを、

```js
backgroundColor: '#2a2734',
```

と置換しちゃいましょう！やったね！一番上のスクショと同じ背景色になりました！

ただ、自分が使っているシェルは[Fish](https://fishshell.com/)なので、[bobthefish](https://github.com/oh-my-fish/theme-bobthefish)で使えるブランチ表示もしたいです。っていうかこの作業をしないと入力までバグるので・・・。

ということでPowerlineフォントが入ってる前提でさっきのファイルの

```js
fontFamily:
```

から始まる行を（もとを消してしまった）

```js
fontFamily: 'Roboto Mono for Powerline',
```

に書き換えた後、

```js
updateChannel: 'stable',
```

になっているところを、

```js
updateChannel: 'canary',
```

に変えてしまいましょう！canary channelなので多少バグが残ってるかもしれませんが・・・。

あと、なぜかspanのline-heightを変えないとうまくいかないので、

```js
termCSS: '',
```

のところを

```js
termCSS: 'span { line-height: 1.2em; }',
```

に変えておきましょう！

結果・・・

![スクリーンショット 2018-06-27 13.29.07.png](https://qiita-image-store.s3.amazonaws.com/0/244632/35b6369e-11b3-7e4d-bfe2-58b748b9dd5d.png)

**エモ〜い！！！**

[一応設定ファイルをGistにまとめておきました。](https://gist.github.com/TinyKitten/8e8ceddbc9a0ca0101b3a19e6c30fc9b)