OmniAICreator/Qiita-1.07M huggingface dataset:
次世代フォーマットでの画像の配信...

株式会社デジタルクエスト エンジニア Advent Calendar 2018 6日目担当のWatahikiです。

構築したWebサイトを長期間ほったらかしにしておくと痛い目にあいます。
PageSpeed Insightsで Google様から採点をいただいたとあるWebサイト、目も当てられない点数に。

## PageSpeed Insights

バージョンアップされた Googleの [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/?hl=ja) でWebサイトのパフォーマンスを実施していて、改善項目に 「次世代フォーマットでの画像の配信」 とアラートがあがってきました。
![スクリーンショット 2018-12-05 16.39.09.png](https://qiita-image-store.s3.amazonaws.com/0/18074/38127520-9f1e-2077-8a4f-ebdf6f93e77f.png)
次世代フォーマットの話題は過去から耳にはしていたものの、実際に取り扱ったこともなかったので調べてみました。
- JPEG 2000 (.jpf)
- JPG XR (.jxr)
- WebP (.webp)

## 次世代フォーマット画像 対応状況

まず各ブラウザの対応状況から見てみました (2018/12/5)
![スクリーンショット 2018-12-05 18.20.41.png](https://qiita-image-store.s3.amazonaws.com/0/18074/f6396c11-6216-2055-a8c0-40ecb3e8db49.png)
(引用: https://caniuse.com/)

| ブラウザ | JPEG 2000 | JPG XR | WebP |
|:-----------|:----------:|:-----------:|:------------:|
| Chrome (71.0) | × | × | ○ |
| Safari (12.0.1) | ○ | × | × |
| Opera (57.0) | × | × | ○ |
| FireFox (63.0) | × | × | ○ |
| Mobile Safari (iOS 11.3) | ○ | × | ○ |
| Chrome for iOS (71.0) | ○ | × | ○ |
※ Safari(12.0.1)でWebP対応を記載していたものを非対応に訂正しました。 (2019/11/21)

MacbookとiPhoneのブラウザで検証しました。https://caniuse.com/ と若干結果が異なっています。
Google提供の測定で推奨しているフォーマットがChromeで対応していないことに驚きました。
また、iPhoneとPCのChromeで JEPG 2000 に対応・非対応と分かれているのも…。

ネイティブアプリの対応状況は進んでおり、
Android Studioでは ver2.3以降、かんたんに画像コンバートできるようにサポートされています。
Xcodeではサポートはないものの、Googleが提供している [libwebp](https://github.com/webmproject/libwebp) を導入することで対応可能のようです。
フォーマットが統一されていないのは誰得の状況ですが、PageSpeed Insightsとしては、対応状況が一歩抜きん出ている WEBP を採用しろってことなんだと思います。

## WebPの検証
WebPでの容量削減はあちこちで検証結果が確認できましたが、実際にやってみました。
2010 × 4807、4.6MBで透過ありのPNGファイルを対象としています。

```cmd
$ brew install webp
$ cwebp sample.png -o webp_q50.webp -q 50
$ cwebp sample.png -o webp_q100.webp -q 100
$ cwebp sample.png -o webp_lossless.webp -lossless
```
| option | Size (byte) | rate |
|:----------:|:-----------:|:-----------:|
| 元画像ファイル | 4633012 | - |
| 50 | 232974 | 94.97% |
| 100 | 994466 | 78.54% |
| lossless | 2894308 | 37.53% |

![スクリーンショット 2018-12-05 18.47.07.png](https://qiita-image-store.s3.amazonaws.com/0/18074/5ecc1078-1dca-cb31-2e10-10806e74de62.png)
![スクリーンショット 2018-12-05 18.50.08.png](https://qiita-image-store.s3.amazonaws.com/0/18074/61c603ab-cd37-4752-7263-86c292fb6c1e.png)
表と同じ順番 (左から、元画像、q=50、q=100、lossress の順番)

q=50だと劣化が見てわかるレベルですが、q=100だとほとんどわかりません。
lossressでも容量は37%も圧縮されているので、とても効果的だと思います。

## 対応
かなりの容量圧縮率ですが、ブラウザのサポートは万全とは言えないので、 picture要素を使って対応ブラウザのみ表示で試してみます。

```html
<picture>
  <source type="image/webp" srcset="webp_q100.webp">
  <img src="sample.png">
</picture>
```
jsdoでchip8　その13

#概要

jsdoでchip8やってみた。
開発環境を整備してみた。
アセンブラとディスアセンブラとエミュとromダウンローダーを合体した。

#使い方

runボタンを押すと、アセンブルして、ディスアセンブルして表示する。
download romをクリックするとromをダウンロードする。
romは、この後、ディスアセンブラーとエミュで使用する。


#成果物

http://jsdo.it/ohisama1/iIY3

以上。
docker-composeを使って、プライベートでstandaloneなgethを立ち上げて永続化する方法【解決編】

[失敗編](https://qiita.com/imaichel/items/c7cc26e1c14cf414acd6)からの続きです。

#前提
こんな人には役に立つかもしれない

* Ethreumを使ってガシガシ開発したいから、開発に使えるEthreumノードが必要。
* どこかのVPSにノードを立ち上げたりInfura.ioのtestnetを使えばよいのだけど、立ち上げは手軽じゃないし、まだ開発中だからtestnetじゃなくてやプライベートでやりたい、そして、Wifiがなくても開発機内で完結したい、という欲求がある。
* docker-composeを使いたい。
* コンテナを終了してもチェーンDATAは残したい（永続化したい）。次にコンテナを立ち上げたときには次のブロックからマイニングが始まるようにしたい。

そんな需要があったので頑張ってやってみました。

#当初戦略

1. gethは公式のDockerイメージを使う。
2. Dockerfile内でgethのinitやテストアカウントのimportをする。
3. chain_dataはホスト内に保存されるようにマウントする。
4. コンテナを立ち上げるときにプライベートネットのnetworkIdを引数で渡す

#困ったこと
* マウント無しでDockerfile, docker-compose.ymlを以下のようにするとすんなりとプライベートネットが立ち上がるが、永続化されていないので、一旦コンテナを削除すると、ジェネシスブロックからの作り直しになってしまう。
* data_dirをマウントして立ち上げると、今度はnetworkIdが1(つまりmainnet)になってしまう。

##マウントするとmainnetになってしまう原因

* buildのイメージ内にプライベートネットのジェネシスブロックが生成されていても、ホストのディレクトリをマウントした時点で消えてしまう
* そうするとコンテナ立ち上げのときにgethの引数でdatadirとnetworkIdを指定しても、ジェネシスブロックが存在しないので、デフォルトでmainnetとなるようになっている。

#解決手順
マウント＝＞ジェネシスブロック生成(geth init)＝＞geth立ち上げ という順序にすることは不可能なので以下のような手順をふむようにした。

1. まずは、ジェネシスブロック生成用のコンテナを立ち上げる(geth_initコンテナ)
2. ホストの`./geth_data`にgeth_initコンテナの`/tmp`(空)をマウントする
3. geth_initコンテナに生成されたdatadirを`/tmp`に同期するとホストの`./geth_data`にチェーンデータができる。
4. geth_initコンテナを終了してもホストにはプライベートネットのチェーンデータが残る
![Qiita用イメージ図-2.png](https://qiita-image-store.s3.amazonaws.com/0/36711/cc6b8fe0-7f85-cbc5-ab93-7f003f51e9cd.png)


5. マイニング用のgethコンテナを先程の`./geth_data`をマウントして立ち上げる。
6. プライベートネットのnetworkIdとマウントされたディレクトリをdatadireとして引数を与えてれば、gethコンテナのgethはそこを参照して、プライベートネットが立ち上がる。
7. DAG生成後、マイニングが始まり、続くブロックが生成される。
![Qiita用イメージ図２-2.png](https://qiita-image-store.s3.amazonaws.com/0/36711/23631312-33ee-e976-fa36-3fac5a9d8216.png)
8. gethコンテナを終了しても、生成されたブロックはホストの`./geth_data`に残っている。
9. 再びgethコンテナを立ち上げると、既存のチェーンデータが参照され、続きからマイニングされる。



#コマンド

```
$ git clone https://github.com/imaichel/ethereum-docker.git
$ cd ethereum-docker/standalone/
$ docker build -f geth/Dockerfile_gethinit -t gethinit:1.0.0 geth
~略~
Successfully built f524701f5b3a
Successfully tagged gethinit:1.0.0
$ docker images
REPOSITORY           TAG                 IMAGE ID            CREATED              SIZE
gethinit             1.0.0               f524701f5b3a        About a minute ago   48.1MB

$ mkdir volume
$ docker run -d -v $PWD/volume:/tmp --name gethinit gethinit:1.0.0 --networkid 1234 --datadir=/root/.ethereum
$ docker exec -it gethinit /bin/bash
```
```
# rsync -av /root/.ethereum /tmp/
# exit
```
```
$ docker-compose up -d --build
$ docker-compose logs -f
```
既存アプリに新規機能と一緒にFirebaseAnalyticsを導入した際のお話

## FirebaseAnalyticsについて
ざっくりと説明するとアプリ上等に埋め込んだイベントを集計してユーザーの行動を計測出来るFirebase上の機能です
詳細は[マニュアルへ](https://firebase.google.com/docs/analytics/)

### 利点
#### サーバ側実装が不要
基本的に実装はクライアント側だけでも完結します
ただし集計用データの設計は必要なためサーバー側のデータとまとめて集計する場合はデータ設計に注意

#### デフォルトで取ってくれる情報が多い
年齢、性別、端末情報等は特に何もしなくても取ってくれます
Firebaseの他の機能のログも取ってくれたりするので併用する場合は追加の実装をしなくてもデータが取れる場合があります

#### Firebaseの他の機能やGoogleのサービスと連携しやすい
上記にもある通りデフォルトで情報を取ってくれたりBigQueryとの連携が容易だったりします

#### 視覚化しやすい
_デモプロジェクトより_
<img src="https://qiita-image-store.s3.amazonaws.com/0/215450/9b0ba3f4-89d6-fbc2-95ab-bb2dfb0f81d4.png" width=50%><img src="https://qiita-image-store.s3.amazonaws.com/0/215450/c1c3d691-bd15-b338-b2d4-d4fc059f51d5.png" width=50%>

このように地域毎のアクティブユーザーが視覚化できたり
イベント数をグラフ化してくれたりします


### 欠点
#### コンソール上でユーザープロパティが25個までしか設定できない(2018/12/05 現在)
コンソール上で見れるユーザープロパティは25個まで
名前の変更も不可能なので注意
それ以上のユーザー分類をする場合はBigQueryを使う必要があるようです

#### ユーザー個人の情報はそのままだと見れない
一応BigQuery等と組み合わせれば見れたりするようです
FirebaseAnalyticsはあくまで全体を見るためのツールという位置づけの模様


## 導入理由
とあるUnity製アプリに新しく入れた機能の利用率や離脱率の計測をするために導入しました

## 導入方法
[公式の導入マニュアル](https://firebase.google.com/docs/analytics/)がわかりやすいためここでは割愛します

## 機能
機能一覧は[こちら](https://support.google.com/firebase/topic/6317489)

## 今回の要件

今回は以下のものを計測したいという要件がありました

- ON, OFF可能な機能なのでユーザーがどちらを選んでいるのか
- ONにした場合ユーザーが機能のどの部分で離脱したか
- 離脱した場合の可能な限りの詳細ログ

## 実装方法について
#### ON, OFF可能な機能なのでユーザーがどちらを選んでいるのか
ユーザー毎に状態を持つこととなるためUserPropertyでON, OFFの状態を持ちました

```cs
UserProperties.SetProperty("Enable", true);
```

#### ONにした場合ユーザーが機能のどの部分で離脱したか
各状態毎にイベントを飛ばすことで計測しました

```cs
FirebaseAnalytics.LogEvent("Phase1");
```

離脱タイミング等フローが決まっているものに関しては [目標達成プロセス](https://support.google.com/firebase/answer/6317523?ref_topic=6317489) を設定しておくと視覚化しやすいです 

#### 離脱した場合の可能な限りの詳細ログ
ユーザーの選択次第で途中で該当の機能を抜けることができたため、離脱時のログをイベントを飛ばす際に [カスタムパラメータレポート](https://support.google.com/firebase/answer/7397304?hl=ja&ref_topic=6317489) として付与しました

```cs
FirebaseAnalytics.LogEvent(
    "Phase1Away",
    new Parameter("Away log"));
```

## 計測した結果何があったか
機能リリース当初はフロー調整の指標やバグの特定に役立ってくれました
実装が落ち着いた今でも特定地域でのみ起きやすい問題の追跡がしやすいため時々活躍します
ubuntuにpyenvとインストール！ついでにmysqlをインストール

#pyenvの導入

```
$ git clone git://github.com/yyuu/pyenv.git ${HOME}/.pyenv
```

# 環境変数

```
$ cat << EOF >> ${HOME}/.profile
export PYENV_ROOT=\${HOME}/.pyenv
export PATH=\${PYENV_ROOT}/bin:\${PATH}
eval "\$(pyenv init -)"
EOF
$ source ${HOME}/.profile
```

#Pythonに必要なパッケージ

```
$ sudo apt-get install git gcc make openssl libssl-dev libbz2-dev libreadline-dev libsqlite3-dev
```

#pythonをインストール

```
$ pyenv install 3.6.4
$ pyenv global 3.6.4
$ python --version
```

#mysql

```
$ sudo apt install mysql-server mysql-client sysv-rc-conf
```
↓
パスワードを入力する画面が現れる
<img width="841" alt="スクリーンショット 2018-12-06 17.52.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/187963/f2cd747b-24c1-81e8-14f0-4da9305e4c95.png">

確認用でもう一回パスワードを入力する。
<img width="670" alt="スクリーンショット 2018-12-06 17.53.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/187963/41bbf237-1bc4-9d25-eb96-1d653f2a3ead.png">


パスワードを設定したら、以下のコマンドで確認する


```
$ ps -ax | grep mysql
 1937 ?        Ssl    0:00 /usr/sbin/mysqld
 2046 pts/0    S+     0:00 grep --color=auto mysql
```

パスワードを使用してログインできるか確認。
ログインできたらOK！

```
$ mysql -u root -p
Enter password:
・
・
・
mysql>
```
#MySqlの自動起動する

```
$ sudo sysv-rc-conf mysql on
```

参考にした記事
[【Python】ubuntuにpyenvとmysqlをインストール！サクッとPythonが使えるようにする方法](https://y-hilite.com/3201/)
[小ネタ]LaravelにTelescopeを追加したら、PHP Unitでエラーが出たときの対応

# 問題

LaravelのPHP Unitを実行すると以下のエラーが発生

```
1) Tests\Feature\ExampleTest::testBasicTest
ReflectionException: Class env does not exist

/var/www/html/vendor/laravel/framework/src/Illuminate/Container/Container.php:779
/var/www/html/vendor/laravel/framework/src/Illuminate/Container/Container.php:658
(省略)
```

元々Laravelに付属しているファイルを何も変更していないのにエラーが出た。

# TL; DR;

phpunit.xmlに以下を追加

```xml:phpunit.xml
<phpunit>
(省略)
    <php>
        <env name="TELESCOPE_ENABLED" value="false"/><!--追加 -->
    </php>
</phpunit>
```

# その他

調べていると
`composer dump-autoload`
で、直る人もいるみたいです。
日本語版 Galaxy チュートリアルと Galaxy セミナーについて

3日目のアドベントカレンダーでは、Galaxy Training! の紹介とそのサイトの問題点についてお伝えしました。
今回はこの問題点を解消すべくこれまで行ってきた、翻訳による日本語版チュートリアルの作成についてや Galaxy セミナーについて書かせていただきます。
##日本語版 Galaxy チュートリアルについて
前回紹介した Galaxy Training! は基本的に英語で書かれているサイトです。
英語が分かる人なら問題ないですが、あまり英語が読めない人にとっては、Galaxy を学ぶことに加えて英語を解読しなければならず、Galaxy の使い方を学ぶ上で負担になってしまいます（同時に英語を学べるという意味では原文も良いのですが）。
また、前回の記事で述べたように、原文のチュートリアルは割と高い確率でその通りに作業しても上手くいかないです。
これらの理由から、日本語版チュートリアルの作成を通して、翻訳をしつつ実際に Galaxy でチュートリアルをやってみてエラーが起きないかの確認をしています。
以下は日本語版チュートリアルの一部です。
![スクリーンショット (1).png](https://qiita-image-store.s3.amazonaws.com/0/222524/bdb5806c-f9b6-c525-dcdf-bc6bd5500ec8.png)
(https://github.com/A-Asai/training-material/blob/master/topics/introduction/tutorials/galaxy-intro-peaks2genes/tutorial_ja_notag.md)

確認してエラーがある場合は、解決策を探って解決次第、セミナーでお伝えしたり Qiita にて補足記事を出したりしています（GitHub に公開している日本語版チュートリアルは原文に沿うため直訳しているので解決策を別の場所に書いています）。
##Galaxy セミナーについて
Galaxy を学びたい人がよりスムーズに Galaxy を使えるようになるために、上に書いたチュートリアルをもとに Galaxy のハンズオンセミナーを定期的に行ってきました。
![スクリーンショット (2).png](https://qiita-image-store.s3.amazonaws.com/0/222524/21220612-7ca6-c1f6-b0c7-8cac3ddc87df.png)
(https://pitagora.connpass.com/)

以下にこれまでのセミナーで起きた失敗や反省、それらを踏まえて考えた、推奨する Galaxy セミナーのやり方などを書いたので、需要があるかは分かりませんが参考にしてください。

###これまでのセミナーで起こった事故と解決策

- セミナーを受講する人数が増えると、Galaxy が動かなくなる。
    - Galaxy セミナーでは基本的に公共サーバーの Galaxy を用いて行います（Galaxy 公共サーバー についてはカレンダー内の他の記事を参照してください）。ハンズオンセミナーを普通に行うと、複数人が1つの公共サーバーに同時にワークフローの実行をしてしまうので、いつまで経ってもワークフローが完了しないといったことが起こります。解決策としては、ヒストリーを共有することであらかじめ解析結果を渡しておき、ツールの実行を不必要に行わないようにすることです。
- チュートリアルに沿ってそのままハンズオンセミナーを行うとどうしても時間が長くなり予定の時間内に収まらなくなる。
    - Galaxy Training! にあるチュートリアルの大部分は 3時間～1日を所要時間として行うものとされており、1時間程度では通常は終わりません。それでもなんとか 1時間程度に収めるためには、上と似たことになりますが、前もってチュートリアルを行う時に各ツールの実行時間を測っておき、時間のかかるツールの実行結果を受講者と共有しておくことが大切です。
- セミナーの時に限って使用している PC が異常をきたす。
    - なるべく良い PC を使いましょう。
- 準備時に予想もしていなかったエラーが起きる。
    - これに関してはどんなに準備をしていても起こると思ってセミナーをやった方がよいと思います。勿論準備すればするほど起こるエラーに対応しやすくなるので、事前の準備は大切です。

###推奨する Galaxy セミナーのやり方
- セミナーをやる一週間前くらいには一度チュートリアルの内容を通しで行う。
    - 各ツールの時間を測ったり、それぞれのツールのインプットやアウトプットをスクショして、それらを別途資料にまとめておくとなお良い。
- **時間帯と日にちを変えて**（なるべくセミナーを行う際の時間帯に合わせると良い）もう一度チュートリアルの内容を通しで行う。
    - 時間帯を変えるのは、公共サーバーの時間帯による混雑具合を確かめるためです。
    - このときはなるべくタイムアタック感覚で行うと本番に気持ちの余裕が生まれます。
- 当日にもう一度通しで行う。
    - 案外この段階で間違いに気付いたりするのでなるべく行いましょう。
    - 会場でのセッティングも本番直前になるよりは先にやっておいた方が良いです。
- 後はセミナーが上手くいくよう祈りましょう。
- セミナー終了！お疲れさまでした。

##最後に
Galaxy セミナーは今後も需要があれば頑張ってやっていきますので、誰かに教わりたいという方は気軽に[Pitagora Galaxy](http://wiki.pitagora-galaxy.org/wiki/index.php/Main_Page) の meetup に参加してください！
DJANGO CRUDのVIEWで呼び出し可能なメソッドの整理

VIEW内で使用するメソッドについて調べてみたので内容を整理しました。

#VIEW内で使用するメソッド一覧（よく使うもの）
| メソッド名 | 機能|
|---|---|---|
|dispatch|最初の起点となるメソッド
|get_initial|このビューのフォームに使用する初期データを返します。
|form_valid|フォームが有効な場合は、指定されたURLにリダイレクトします。
|form_invalid|フォームが無効な場合は、無効なフォームをレンダリングします。
|get_context_data|フォームをコンテキストdictに挿入します。
|get|GET要求を処理する：空白のフォームをインスタンス化します。
|post|POSTリクエストを処理する：渡されたPOST変数を使用してフォームインスタンスをインスタンス化し、それが有効かどうかを確認します。
|get_queryset|DBのクエリーセットを実施できます。


#使用例
簡単な使用例です。 View名：TestView、modelsにtestモデルを作成し、templateにtest.htmlをセットしてあると想定。

~~~ views.py

class TestView(ListView):
    """ 一覧画面 """

    model = test
    template_name = 'test.html'

    # 起点処理。画面を開いたときに、条件に合わない場合は、別画面にリダイレクトする例
    def dispatch(self, request, *args, **kwargs):
        # 
        if not 条件 :
            return redirect('遷移先')
        else:
            return super().dispatch(request, *args, **kwargs)

    # 画面を表示するときに使用するDBのクエリーをセットする例
    def get_queryset(self):
        return test.objects.filter(
            test.user=self.request.user)

    #　フォームの初期値をセットする例。dispachで書き換えてもここで上書きされるため初期値はここでセットする。
    def get_initial(self):
        initial = super().get_initial()
        initial['user'] = test.user   #testモデルのuserを初期値としてセット
        return initial

    # フォームの入力が成功した場合 testオブジェクトの最新レコードのpkをセット
    def form_valid(self, form):
        form.instance.id = test.objects.latest('pk').pk
        form.save()
    　　　return super().form_valid(form)

    # テンプレート内で呼び出せる、コンテキストをセットする。
    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['test_message'] = "テストメッセージです。"
        return context

~~~
TerraformでCloudWatchログをLambdaに流し込む設定を行う

CloudWarchログを加工したりするためにLambdaに接続する設定をTerraformで行ってみます。

## 解説
ま、大して設定するところもないのでソース見るだけでもわかると思いますが………

terraformでやろうとすると意外と面倒です。つか、わかりにくい。
それは、他のリソースと違ってLambdaの場合はLambda側でACLの設定を行うためです。

### CloudWatchログ
まずは対象となるログを指定します

``` json
data "aws_cloudwatch_log_group" "log" {
  name = "hoge_fuga_log"
}
```

### サブスクリプションフィルタ
ストリームの設定です

``` json
resource "aws_cloudwatch_log_subscription_filter" "log_filter" {
  name            = "log_filter"
  log_group_name  = "${data.aws_cloudwatch_log_group.log.name}"
  filter_pattern  = ""
  destination_arn = "対象のLambda関数のarn"
}
```

### Lambda側でACLの設定
CloudWatchログからのアクセスを許可します

``` json
resource "aws_lambda_permission" "log_permission" {
    action        = "lambda:InvokeFunction"
    function_name = "対象のLambda関数の名前"
    principal     = "logs.ap-northeast-1.amazonaws.com"
    source_arn    = "${data.aws_cloudwatch_log_group.log.arn}"
}
```

## 蛇足

毎度思うんだが、同じLambdaを指定するにもarnだったり名前だったりと統一性のないのが**AWS**のお約束。
まぁ、マイクロサービスのDarkSideですなぁ。
CryptZombiesレッスン3(チャプター6~10)の自分なりのまとめ

# 最初に
この記事は私がCryptZombiesを進めていく上で自分なりにまとめたものです。
前回の記事
https://qiita.com/daichi77/items/7a97772c685684a3b69d
参考にしたサイト
サイト名: イーサリアム上のDApp開発をゲームを作って学びましょう
URL: https://cryptozombies.io/jp/　
# チャプター６ ゾンビのクールダウン
## 要点
```
function _関数名(Zombie storage _zombie) internal {
```
このようにprivateやinternal関数でstorageを書くとstructを引数として渡すことができる。
## 今回したこと(テスト)
- ゾンビのreadyTimeをセットする関数の作成
- ゾンビが捕食してから十分な時間が経ったかどうかを確認できる関数の作成

# チャプター７ Public関数とセキュリティ
## 今回したこと(テスト)
1. feedAndMultiplyをinternalに変更。
2. feedAndMultiplyにrequire(cooldownTime(myZombie))を追加
3. feedAndMultiplyに_triggerCooldown(myZombie)を追加
## まとめ
internalに変えることでfeedAndMultiplyを勝手なDNAで呼び出せなくなった。
cooldwonTime関数や_triggerCooldown関数を呼び出すことで一定の時間が経たないと餌を与えれなくなった。

# チャプター８ 関数修飾子の続き
## 要点 
```
modifier 修飾子名(uint _age, uint _userId) {
  処理
  _;
}
```
このように関数修飾子に引数を渡すことができる。
引数は修飾する関数から渡される。

```
function 関数名(uint _userId) public 修飾子名(16, _userId) {
  処理
}
```

## 今回したこと(テスト)
aboveLevelという関数修飾子を作成(ゾンビのレベルが_level以上であることを確認するためのもの)

# チャプター9 ゾンビ修飾子
## 今回したこと(テスト)
ゾンビのレベルが２以上なら名前を変えれるように、２０以上ならカスタムDNA与えれるようになった。
関数修飾子を使ってレベルが２０以上かどうかなどを判断している。

# チャプター１０ View関数でガスを節約
## 要点
view関数を外部から呼び出す場合gasがかからない。
可能な場合は読み取り専用のexternal view関数を使うことで、DAppのガス使用量を最適にすることが出来る。
view関数が同じコントラクトの、view関数ではない別の関数から呼び出される場合、その呼び出しにガスのコストがかかる。
## 今回したこと(テスト)
持っているゾンビ全てを表示するためのgetZombiesByOwnerの作成。
読み取るだけなのでexternal viewで宣言。

# 次の記事
https://qiita.com/daichi77/items/aaee82cc59973b367734
組み込みLinuxでBluetoothヘッドセットを使う方法の一例

buildrootでrootfsを作成した組み込みLinuxでBluetoothヘッドセット(イヤホンマイク)を使う方法の一例

# カーネルコンフィグ

```
CONFIG_BT=m
CONFIG_BT_BREDR=y
CONFIG_BT_RFCOMM=m
CONFIG_BT_RFCOMM_TTY=y
CONFIG_BT_BNEP=m
CONFIG_BT_BNEP_MC_FILTER=y
CONFIG_BT_BNEP_PROTO_FILTER=y
CONFIG_BT_HIDP=m
CONFIG_BT_HS=y
CONFIG_BT_LE=y

CONFIG_BT_HCIBTUSB=m

CONFIG_SND=m
CONFIG_HID=m
```

# buildrootのコンフィグ

```
BR2_PACKAGE_ALSA_UTILS=y
BR2_PACKAGE_ALSA_UTILS_ALSACTL=y
BR2_PACKAGE_ALSA_UTILS_ALSAMIXER=y
BR2_PACKAGE_ALSA_UTILS_AMIXER=y
BR2_PACKAGE_ALSA_UTILS_APLAY=y

BR2_PACKAGE_BLUEZ_ALSA=y

BR2_PACKAGE_BLUEZ_TOOLS=y
BR2_PACKAGE_BLUEZ5_UTILS=y
BR2_PACKAGE_BLUEZ5_UTILS_CLIENT=y
BR2_PACKAGE_BLUEZ5_UTILS_DEPRECATED=y
```

# Bluetoothヘッドセットのペアリング

BTヘッドセットのMACアドレスを`00:1A:7D:XX:XX:XX` とする。
BTヘッドセットをペアリングモードにした状態でrootユーザーで以下を行う。

```
# bluetoothctl
scan on
(該当するヘッドセットが見つかるのを待つ)
scan off
pair 00:1A:7D:XX:XX:XX
exit
```

同じものを再度ペアリングする場合は、一度デバイスを削除してからやり直す。

```
# bluetoothctl
remove 00:1A:7D:XX:XX:XX
```

# Bluetoothヘッドセット接続のテストスクリプト

```
#!/bin/sh 
set -x
export LIBASOUND_THREAD_SAFE=0

# Check if BT exists
hciconfig |grep -q hci0 || exit 1


# MAC Address of the BT headset
BT_HEADSET=00:1A:7D:XX:XX:XX

cat << __eof__ > /tmp/.asoundrc
defaults.bluealsa.interface "hci0"
defaults.bluealsa.device "$BT_HEADSET"
defaults.bluealsa.profile "sco"
defaults.bluealsa.delay 10000
__eof__

/usr/libexec/bluetooth/bluetoothd &
sleep 1
bluetoothctl power off
sleep 2
bluetoothctl power on
sleep 2
bluetoothctl agent on
bluetoothctl connect $BT_HEADSET

/usr/bin/bluealsa &
sleep 2

while :; do
  if bt-device -i $BT_HEADSET |grep -q 'Connected: 1'; then
    if amixer -D bluealsa |grep -q 'SCO'; then
      sleep 10
    else
      bluetoothctl disconnect $BT_HEADSET
      sleep 1
    fi
  else
    bluetoothctl connect $BT_HEADSET
    sleep 5
  fi
done
```

https://github.com/Arkq/bluez-alsa に書いてあるが、
`export LIBASOUND_THREAD_SAFE=0` を実行しておくと安定する。

# マイクの音をファイルに保存

```
export LIBASOUND_THREAD_SAFE=0
arecord -f S16_LE -r 8000 -c 1 -D bluealsa test.wav
```

# 保存した音声ファイルを再生

```
aplay -D bluealsa test.wav
```
組み込みLinuxでWiFi接続をする方法の一例


buidrootで作成したrootfsの組み込みLinuxでクライアントしてWiFiに接続する方法の一例。

# カーネルコンフィグ

カーネルのコンフィグに以下が入っていることを確認する。もし無ければカーネルを再ビルドする。

```
CONFIG_WIRELESS=y
CONFIG_WEXT_CORE=y
CONFIG_WEXT_PROC=y
CONFIG_CFG80211=m
CONFIG_CFG80211_DEFAULT_PS=y
CONFIG_CFG80211_CRDA_SUPPORT=y
CONFIG_CFG80211_WEXT=y
CONFIG_MAC80211=m
```
# buildrootのコンフィグ

wpa_supplicant と　dhcpcd が必要。
buildrootのコンフィグに以下が入っていることを確認する。

```
BR2_PACKAGE_WPA_SUPPLICANT=y
BR2_PACKAGE_WPA_SUPPLICANT_NL80211=y
BR2_PACKAGE_WPA_SUPPLICANT_CLI=y
BR2_PACKAGE_WPA_SUPPLICANT_PASSPHRASE=y

BR2_PACKAGE_DHCPCD=y
```

# WiFiドライバ

今回は以下のものを使用した。
https://github.com/diederikdehaas/rtl8812AU.git
これのクロスビルドについては省略。

# WiFiドライバのテスト

周りのアクセスポイントをスキャンしてみる。
rootユーザーで以下を実行する。

```
insmod 8812au.ko
iwlist wlan0 scan | grep ESSID
```

# WiFi接続のテストスクリプト

ssid="koba8r", password="5543678d" のアクセスポイントに接続する場合。

```start_wifi.sh
#!/bin/sh -x

insmod 8812au.ko
sleep 1

cat << __EOF__ > /tmp/wpa_supplicant.conf
ctrl_interface=/var/run/wpa_supplicant
update_config=1

network={
	ssid="koba8r"
	psk="5543678d"
}
__EOF__

iface=wlan0

ifconfig $iface down
wpa_supplicant -B -P /run/wpa_supplicant.$iface.pid -i $iface -D nl80211,wext -c /tmp/wpa_supplicant.conf
ifconfig $iface up
dhcpcd $iface
```
【自分用メモ】「Remote NDIS based Internet Sharing Device」に気を付けろ！

# 事象
ある日、地方のオフィスから連絡があり、急にネットワークにつながらなくなったと連絡がありました。
事象をヒアリングすると、ブラウザを立ち上げても「このページは表示できません」とエラーが出るとのこと。

# 調査
このことから、ネットワーク回りが怪しいと思い、とりあえずipconfigを実行してもらうと、存在しないはずの「Remote NDIS based Internet Sharing Device」というネットワークアダプタが表示されていました。
どうやら、このアダプタに設定されているデフォゲを使って、社内のイントラページへアクセスしようとして失敗していたようです。
「Remote NDIS based Internet Sharing Device」はUSBテザリングを行う機器を接続すると自動的に割り当てられるようで、確認したところ充電するためにiPhoneXを社内のPCにUSB接続していたとのこと。

# 対応
接続を解除したら、何事もなかったようにアクセスできましたとさ。

# 言いたいこと
会社のPCに勝手に色々つなげるのはやめて！
⇒GPOで対応できるようなので、いつかやってみたいと思う。
[＜TechNet＞Windows7でUSBテザリングを禁止する方法について](https://social.technet.microsoft.com/Forums/ja-JP/3fd2be55-f378-408b-a247-dda283c057a2/windows712391usb12486124701252212531124641243431105274901237712427?forum=w7itprogeneralja)
めんどくせーからscreenrcそのまま晒す

大昔から使ってるやつ
escapeは少数派のC-z

```
#ビジュアルベルを無効
vbell off

#vimを使った後などバッファに残す
altscreen off

#ウィンドウのアクティビティ監視をする
#defmonitor on

#非アクティブなwindowでbell が鳴ったら、アクティブなwindow でも鳴らす
bell_msg "Bell in window %^G"

#スタートアップメッセージを無効
startup_message off

#メッセージの待ち時間を極力短かく
msgminwait 0

#いきなりScreen死んでもプロセスを残す
autodetach on

#Color
defbce on

#新しいスクリーンを開いてもログイン処理をしない
#deflogin off

#デフォルトでutfを使用
defutf8 on

#スクロールバックを2000に増やす
defscrollback 2000

#ステータスラインを変更
hardstatus alwayslastline "%H+r|%-w%{=}%n %t%{-}%+w %=%`"

#エスケープはC-Zを二回
escape ^z^z

#初期のscreenウインドウに切り替え
bind ^q select 0

#C-zC-aで直前ウインドウ
bind ^a other

#C-zC-lでウインドウリスト
bind ^l windowlist -b

#C-zC-hでログ、C-Hでハードコピー
bind h log
bind H hardcopy
hardcopy_append on

#ログファイルの書式を定義
logfile "screen-%Y%m%d-%n.log"

#C-z,C-j or C-z,C-jで分割ウインドウを上下移動
bind ^j focus
bind ^k focus up

#C-z,lでウインドウ再描写
bind l redisplay

#C-z,C-Rで.screenrc再度読み込み
bind R source $HOME/.screenrc

#C-Z,C-ppppとかC-nnnnnで連続で切り替える
#bind ^n eval "next" "command -c traversal"
#bind ^p eval "prev" "command -c traversal"
#bind -c traversal ^n eval "next" "command -c traversal"
#bind -c traversal ^p eval "prev" "command -c traversal"
#bind -c traversal ^z command

#C-r,jとかkで連続的にリサイズする
bind r eval 'echo "Resize window"' 'command -c resize'
bind -c resize j eval 'resize +1' 'command -c resize'
bind -c resize k eval 'resize -1' 'command -c resize'

#それぞれのウインドウで個別に文字コードを変更する
bind u eval "encoding utf8" "redisplay" "info"
bind U eval "encoding utf8" "stuff 'export LANG=ja_JP.UTF-8\012'" "redisplay" "info"
bind e eval "encoding euc" "redisplay" "info"
bind E eval "encoding euc" "stuff 'export LANG=ja_JP.EUCJP\012'" "redisplay" "info"
bind J eval "encoding sjis" "redisplay" "info"
bind C eval "stuff 'export LANG=C\012'" "redisplay" "info"

#Vim風にscreen-copyをする
bind ^v eval "copy" "stuff ' '"
bind D eval "copy" "stuff ' $ '"
bind P eval "paste ."

#C-z,sで新たにssh/serial接続を開始する
bind s colon 'screen ssh '
bind ^s screen -T serial /dev/tty.usbserial-hoge 9600
```
Go Mage 備忘録

普段あまり Go を使わない人が [magefile](https://magefile.org/) を使ったソースで仕事する羽目になった時用のメモ。Mage とは Make の代わりに使う Go 用のビルドツールです。

## インストール方法

https://github.com/magefile/mage#installation には `go run bootstrap.go` をしろと書いてあるが、`mage -version` が動かないのだけ我慢すれば

    go get github.com/magefile/mage

でも特に不便は感じない。

## magefile

Mage はこういう行で始まるファイルを magefile と呼ぶ。ファイル名は何でも良い。

```go
// +build mage

package main
```

先頭の `// +build mage` は [Build Constraints](https://golang.org/pkg/go/build/#hdr-Build_Constraints) または Build tag と言って、#ifdef のような条件付きビルドを指定するのに使う。

Build Constraints には、予め決まったビルド条件を表すキーワードの他、[build/Context BuildTags](https://golang.org/pkg/go/build/#Context) を使ってプログラマブルに作る事も出来る。この例では、magefile がプログラム本体と混ざってビルドされないように `mage` を Build tag として使う。

## [Mage の動作](https://magefile.org/howitworks/)

`mage` を実行するとこうなる。

* カレントディレクトリから mage build constraints (`// +build mage`) が有効になったファイル、すなわち magefile を探す。
* magefile をパースしてビルドターゲットを探す。
  * [ビルドターゲット](https://magefile.org/targets/) とは、magefile の中にある exported function の事。
  * `mage ターゲット` のようにして mage に引数でターゲット名を渡すとビルドターゲットを実行出来る。
  * ドキュメントは見当たりませんが、[関数名がキャメルケースになった物がターゲット名になるらしい](https://qiita.com/townewgokgok/items/faad9327927947646a23#%E3%82%BF%E3%83%BC%E3%82%B2%E3%83%83%E3%83%88)です。
* magefile から実行ファイルを作る。magefile に変更が無ければ hash 化されたキャッシュを使う。
* キャッシュは $HOME/.magfile にキャッシュされる。

## [依存関係](https://magefile.org/dependencies/)

ビルドターゲットの中に `mg.Dep` で依存を指定できる。

    mg.Dep(関数, 関数, ...)

関数はビルドターゲットでも良いし、普通の関数でも良い。型は https://magefile.org/dependencies/ 参照。単なる関数呼び出しと違い、`mg.Dep` では一度だけ呼ばれる。可能であれば関数は平行に呼ばれる。

## [更新比較](https://magefile.org/filesources/)

ファイルの更新時刻を比較するには `target.Path` を使う。

    target.Path(dst, sources, ...)

dst が無かったり、dst より source が新しくて再ビルドが必要な場合は true を返す。

## ヒント

* たまに良くわからない動きになった時はキャッシュを読まない `mage -f` を使う。
* magefile 内に書いたログは `mage -v` で表示。

## 参考

* [Goで書けるタスクランナーMageが快適すぎて捗る](https://qiita.com/townewgokgok/items/faad9327927947646a23)
GAS（Google Apps Script）となろう小説APIで LINE Bot を作りました

#目的
[DAI](https://twitter.com/never_be_a_pm)さんの作ったり書いたものに触発されて、GAS（Google Apps Script）を触っていたところ、あまりの便利さとアプリ構築までの時間の短さに衝撃を受け、その衝撃がなくならないうちに成果を出したくなりました。

で、 WebAPI を絡めた何かを作れないかと思案したところ、GAS + なろう小説API + LINEmessagingAPI を組合わせれば LINE Bot ぐらい作れるのでは？と思いつきました。

#結果
できました。

![Oa2YsOx4Uz.png](https://qiita-image-store.s3.amazonaws.com/0/323194/c9e6d623-fb24-5653-1259-e72970453180.png)

QRコードでアクセスすると「なろう小説コンシェルジュ」という殺風景な bot を利用することができます。

構想5分、コーディング1時間、テスト1時間といったところでしょうか。やっていることは、

- LINEで受けたメッセージを
- なろうAPIで検索して
- 戻ってきた結果を返しているだけ

のいたってシンプルな構成ですが、自前のサーバを用意しなくてもいいのはなんて楽なのでしょうか。お金も掛かりませんしいいこと尽くめですね…。

#今後
bot の見た目やキャラ付けをして、もう少し楽しく利用できるように改修すること。人工知能なんて手の込んだものは作れませんが、気の利いた人口無能ぐらいは実装したいなあと思っています。

あとは利用者が出会えてよかった、と思える作品をサジェストできればいうことはありません（ただの検索なのでアレですけど）。

#参考
- [【LINE Botの作り方】Messaging API × GAS(Google Apps Script)でおうむ返しボットを作成する](https://www.takeiho.com/messaging-api-gas)
- [LINE Botをサーバーレスで開発！Google Apps ScriptとLINE Messaging APIを使ってチャットボットを作ってみた](https://devpixiv.hatenablog.com/entry/2016/11/14/150000)

#引っかかったところ
- LINE Developers にて Webhook URL を設定するときに忘れに Webhook送信 の状態を確認すること。「利用しない」となっているとLINEでいくらメッセージを書いても反応しません。Webhook URL を設定前にWebhook送信を「利用する」にしておいても、Webhook URL を設定するとリセットされて「利用しない」に戻されるっぽいです。


#作者
https://twitter.com/jijyoron
CakePHP プレフィックスを無視してリダイレクト先を設定

## 背景

CakePHP開発で、未ログイン時のリダイレクト処理があり、ユーザー環境なら正しいページにリダイレクトされるが、管理画面環境だとURLが正しくならない問題が発生したので調べました。

## 前提その1

Authコンポーネントを利用している場合、`Auth::allow()` で指定したURL 以外の場合、自動的にリダイレクトする。

リダイレクト先は、`Auth::loginAction` の設定に準ずる。

リダイレクト処理は以下参照。
https://github.com/cakephp/cakephp/blob/2.x/lib/Cake/Controller/Component/AuthComponent.php#L366

という仕様である。
基本的に、以下の様に設定されているのが標準。

```php
// AnyControll.php
$this->Auth->loginAction = array(
    'controller' => 'user',
    'action' => 'login'
);
```

## 前提その2

`Controller::redirect()` で `string` で指定すればそのURLへリダイレクトされるが、配列で以下のように指定できる。

```php
// string
$controller->redirect('/user/login');
=> /user/login へ

// array
$controller->redirect(array('controller' => 'user', 'action' => 'login'));
=> /user/login へ
```

通常のページの場合、結果は同じになる。

しかし、管理画面等でプレフィックスルーティング設定をしている場合、`/admin` 以下での挙動は以下のようになる。

```php
// core.php
Configure::write('Routing.prefixes', array('admin'));

// string
$controller->redirect('/user/login');
=> /user/login へ

// array
$controller->redirect(array('controller' => 'user', 'action' => 'login'));
=> /admin/user/login へ
```

今回の問題はこれ。

## 前提その3

リダイレクトの引数から実際のURLを生成しているのは、`Router::url()` 
https://github.com/cakephp/cakephp/blob/2.x/lib/Cake/Routing/Router.php#L829

ここで、`$url` が配列の場合は、プレフィックスルーティングの設定有無により、プレフィックスを動的に付ける処理が発生するため、今回のように、ログインが共通の場合は、明示指定して上げる必要がある。

## 解決策

この様に、`prefix` と `admin`(これはプレフィックスルーティングの設定値次第) に指定すればよい。

```php
// core.php
Configure::write('Routing.prefixes', array('admin'));

// AnyController.php
$this->Auth->loginAction = array(
    'controller' => 'user',
    'action' => 'login',
    'prefix' => null,
    'admin' => false,
);
```
Adobe XD CCでモックアップをサクサク作ろう

今更ですが、Adobe XDを使ってみました。

# Adobe XD CCとは
Adobe が提供しているUI/UX確認用のモックアップ作成ツール
https://www.adobe.com/jp/products/xd.html

## できること
マウス操作でアプリ画面っぽいものをサクサク作れます。
作ったモックアップを公開して、一般に確認してもらうことができます。

**無料でも使えます**

---
# どう入手するのか
## Adobe Creative Cloudを契約している場合
Creative Cloud から「XD CC」をインストールします。

## Adobe Creative Cloudを契約していない場合

クライアントアプリなので、Adobe XD CCのページ( https://www.adobe.com/jp/products/xd.html )の右上にある
![XDを無料で入手](https://qiita-image-store.s3.amazonaws.com/0/222522/cf8d4628-523f-8a35-cfc1-c89e66ac9d64.png)
のリンクからインストーラーをダウンロードします。

インストーラーを起動すると、モジュールを勝手にダウンロードしてインストールしてしまいます。

※Adobe IDがないと、どこかでAdobe IDの作成が必要になります。

# どう使うのか
## 最初にやること
![XDアイコン](https://qiita-image-store.s3.amazonaws.com/0/222522/215040fe-b2f5-06c8-dcec-88038a276f7b.png)
XD CCを起動します。

## 基本操作
Adobe製品にしては珍しく、Ctrl+マウスホイールで拡縮できます。
パン(画面のスクロール)は、ホイールボタンのドラッグ、スペース押したままのドラッグとかでやるらしいです。
あとは直感的操作が可能です。
ショートカット一覧(まったく覚えてません)
https://helpx.adobe.com/jp/xd/help/keyboard-shortcuts.html

---
# 作ってみる
1. ホーム画面から作りたいプラットフォームを選ぶ。
iPhone(スマートフォン)/iPad(タブレット)/Web(PCブラウザ)/カスタム から選択
2. ペタペタ貼り付ける
貼れるものは少ないです。

![メニュー](https://qiita-image-store.s3.amazonaws.com/0/222522/0543c7e2-ad91-efad-212e-253c63b9768a.png)
上から、オブジェクトの選択/操作、四角オブジェクト、円オブジェクト、直線、フリー線、テキスト、アートボード、拡大
しかありません。
四角や円の中に、画像ファイルをドロップすると、勝手にトリミングして貼り付きます(便利!)
3. 次の画面を作る
メニューの「アートボード」で、新しい画面を作ります。

フリーのエリアにアートボードでページを作るとか、Illustratorっぽい考え方ですね。
4. 画面遷移を作る
左上の「プロトタイプ」を選択して、遷移を作っていきます。
![モード](https://qiita-image-store.s3.amazonaws.com/0/222522/2e99f34d-ab5a-0dba-fb73-d0547013088d.png)
オブジェクトを選択すると出てくる青の出っ張りをドラッグして、次のページに繋げます。
![でっぱり](https://qiita-image-store.s3.amazonaws.com/0/222522/db6ab14c-5fb0-289f-afa9-1be92603c2e1.png)
![接続](https://qiita-image-store.s3.amazonaws.com/0/222522/8810e688-b715-7c9d-3e4b-fbaa9622a1d3.png)

この繰り返しでモックアップを作っていきます。

---
# 試してみる
ある程度遷移ができたら、操作を試してみます。
右上のプレビューボタンを押して動作を確認してみましょう。
![プレビューボタン](https://qiita-image-store.s3.amazonaws.com/0/222522/2653fb20-55ee-e551-e146-2c7c24fed93f.png)
満足する操作ができたら、共有してテストしてもらいます。
![共有メニュー](https://qiita-image-store.s3.amazonaws.com/0/222522/5443b0bc-adf4-418b-83e0-ec1010a2725c.png)
※無料だと共有のリンクがひとつしか作成できないらしいです。

---
# ちなみに
チュートリアルを試すと、これまで説明したことを学べます!
![チュートリアル画面](https://qiita-image-store.s3.amazonaws.com/0/222522/fb7b1c53-8171-3dea-cf87-896586199e96.png)

---
# 最後に
こういったツールでモックアップをさっさと作って、イメージを共有するために有効だと思います。
お試しください!
Go言語による並行処理備忘録 ~goroutine基礎編~

# はじめに

[「Go言語による並行処理」](https://www.google.co.jp/amp/s/www.oreilly.co.jp//books/9784873118468/mobile.html)を読んでいます。
しかし、なかなか難しいので自分用のメモとしてアウトプットしていきます。

説明形式で記事を書きますので、これからGo言語の並行処理をやる人は参考になるかもしれません。

# 並行処理とは？
## Go言語の並行処理プログラミング
並行処理プログラミングには、一般的に大きく二つの方法があります。
・Shared-memory communication
　メモリを共有する事で通信をやりとりする事

・Message-passing communication
　通信によって（仲介業者を通して）メモリをやりとりする事

[The Go Blog](https://blog.golang.org/share-memory-by-communicating)引用
> Do not communicate by sharing memory; instead, share memory by communicating.


Go言語ではMessage-passing communicationを推奨しているそうです。

## 並列処理と並行処理の違いとは？
・Concurrent（並行）
　複数の動作が、論理的に、順不同もしくは同時に起こりうること

・Parallel（並列）
　複数の動作が、物理的に、同時に起こること
　
工場で10人メンバーが仕事をしているとしたら。。。
10人が同時に同じ木を切っている状態。これは並列処理です。
1人は木を切って、もう一人は金槌を叩いている、そしてもう一人は・・・。これは並行処理です。

そしてGo言語ではConcurrent（並行）を採用しているそうです。

※詳細なイメージは以下のサイトが役に立ちました。
[parallel と concurrent、並列と並行の違い](http://freak-da.hatenablog.com/entry/20100915/p1)

[「なんとなく」で終わらせてませんか？"いらすと"で覚える並列と並行の違い](https://doruby.jp/users/nakamatsu/entries/%E3%80%8C%E3%81%AA%E3%82%93%E3%81%A8%E3%81%AA%E3%81%8F%E3%80%8D%E3%81%A7%E7%B5%82%E3%82%8F%E3%82%89%E3%81%9B%E3%81%A6%E3%81%BE%E3%81%9B%E3%82%93%E3%81%8B%EF%BC%9F%22%E3%81%84%E3%82%89%E3%81%99%E3%81%A8%22%E3%81%A7%E8%A6%9A%E3%81%88%E3%82%8B%E4%B8%A6%E5%88%97%E3%81%A8%E4%B8%A6%E8%A1%8C%E3%81%AE%E9%81%95%E3%81%84)

[放浪エンジニア K-site](https://hobik-site.blogspot.com/2018/03/cpu.html)

# Goroutine詳細
## Goroutineとは？
Goroutineとは、一言で言うと「並行に動作している関数のこと」。
一番最初に呼び出される```func main(){}```は**main Goroutine**と呼ばれるものです。

```golang
func main() {
	go hoge()
	go fuga()
	go piyo()
}
```

こちらのコードを説明します。
まずはメインGoroutineが呼ばれます。
そしてhoge,fuga,piyoのGoroutineが並行で呼ばれています。
このコードからわかるようにmain Goroutine以外のGoroutineの呼び出し方は関数に```go```を付けるだけです。

## Goroutineの挙動

```golang
func main()  {
	fmt.Println("main start")
	go Greet(1)
	go Greet(2)
	go Greet(3)
	// time.Sleep(time.Second) ←追加したらちゃんと動く
	fmt.Println("main end")
}

func Greet(i int) {
	fmt.Println("hello",i)
}
// main start
// hello 3
// hello 2
// hello 1
// main end
```

time.Sleepが存在しない時は、main start と main endのみが表示されます。
各々のGoroutineは**プロセスが終了するまで存在**し続けます。
そして**main Goroutineが終了した時に全体のプロセスが終了**します。

つまり、main start と main endしか表示されなかった理由は**各Goroutineより先にmain Goroutineが終了**したことがわかります。
なのでtime.Sleepを使いmain Goroutineの終了を待つことによって各Goroutineの処理が先に行われて正しく動きました。
※Goroutineは順不同なので（並行だから）こういった1秒止めるなどはNGです。

## GoroutineとShared Memory

```golang
func main()  {
	fmt.Println("main start")
	for i := 0; i < 5; i++ {
		go func() {
			// iを参照し続ける
			Greet(i)
		}()
	}
	time.Sleep(time.Second)
	fmt.Println("main end")
}

func Greet(i int) {
	fmt.Println("hello",i)
}
// main start
// hello 5
// hello 5
// hello 5
// hello 5
// hello 5
// main end
```

・Shared-memory・・・メモリを共有して通信をやりとりする事
・Message-passing・・通信によって（第三者を通して）メモリをやりとりする事
と上記で学びました。

各GoroutineがShared-memoryを使用すると、このような動作になります。
これはゴルーチンがスケジュールされた時のi値を参照見るので最後に代入された5をみています。

参照ではなくコピーを渡すことで回避できます。

```golang
go func(i int) {
	// iを参照し続ける
    Greet(i)
}(i)
```

こういったメモリの事を考えながら実装するのはとても難しいです。
なのでShared-memoryではなくMessage-passing（仲介業者を通して）の仕組みで実装していく必要があります。

ここで言う第三者とはchannelの事です。

# 最後に
goroutineについてすごく基礎的なところをまとめてみました。

次回はチャネルについてまとめていきます。
４ヶ月、Pythonを書いてみての所見

# はじめに
まずはじめに何故、僕がPythonを書こうと思ったかについて話していきます。僕がPythonを書こうと思った理由は以前から機械学習やデータ分析に興味を持ってたからです。そしてタイムリーなことに大学の後期の授業の一つが今年からPythonに変わることになったからです。この情報は、もう僕にPythonを書けと言っている様な気がしました笑。
# 僕がPythonで４ヶ月勉強したこと
1. Webスクレイピング
2. ちょっとした機械学習

並べるとこんな感じです。Webスクレイピングと前から興味のあった機械学習の勉強を結構やってたなと書いてみて思ってます。
# Webスクレイピングについて
僕がWebスクレイピングというものを知ったのは**退屈なことはPythonにやらせよう**というPythonを書いている人ならほとんどの人は知っている有名な本からです。以下[退屈なことはPythonにやらせよう](https://www.oreilly.co.jp/books/9784873117782/)より

>コンピュータ上を使う作業の多くがインターネットに関係するので、プログラムもオンラインに対応できれば便利です。**Webスクレイピング**とは、プログラムを使ってWebからコンテンツをダウンロードして処理することを意味します。例えばGoogleは多数のWebスクレイピングプログラムを実行して、検索エンジン用にWebページの索引を作っています。

上記よりWebスクレイピングがどんなものか分かったと思います。自分もWebスクレイピングをやっていてWebページからいろんな情報取ってこれてすげーおもしれーと感じました。僕がWebスクレイピングでやったことは、学校のHPから学科ごとの研究室の情報を取ってきてその情報をJSONファイル書き出すっていうのをやりました。やってて躓いたりもしましたが一応なんとか形にはなったので良かったです！

## 正規表現とWebスクレイピングについて
Webスクレイピングをやっていて気になったのはHtMLを解析するのに正規表現と組み合わせたらもっと良くなるんじゃないかと思ったんですけど実はあまり良くないみたいです。以下[退屈なことはPythonにやらせよう](https://www.oreilly.co.jp/books/9784873117782/)より
>HTMLを解析するのに正規表現を使わない
>>文字列に格納されたHTMLからの特定の分野を見つけるのは、正規表現にうってつけのように思えます。けれども筆者は正規表現の使用をお勧めしません。HTMLの書き方には様々な方法があり、いずれも正しいHTMLと見なされるので、可能なバリエーション全てに対応しようとするのは厄介で間違いが起こりやすいのです。**Beautiful Soup**のようなHTMLを解析するモジュールを使えば、バグになりにくくなります。

上記よりWebスクレイピングをする際は、正規表現を使うんじゃなくて**Beautifil Soup**を使うのがいいということが分かります。自分もWebスクレイピングをやっている時はこのモジュールを使用していました。
ただし正規表現を全く使うなということではなくBeautiful Soupと組み合わせて使うこともできるみたいです！
以下に僕が参考にした記事を載せます。

- [Python 正規表現を使ったWebスクレイピング](https://hibiki-press.tech/learn_prog/python/webscraping_with_regex/1886#i-２)


# ちょっとした機械学習の勉強について

僕がPythonで機械学習を勉強するために選んだツールは下記になります。

- [Cousera MachineLearning](https://www.coursera.org/learn/machine-learning)
- [TensorFlowで学ぶディープラーニング入門](https://www.amazon.co.jp/TensorFlow%E3%81%A7%E5%AD%A6%E3%81%B6%E3%83%87%E3%82%A3%E3%83%BC%E3%83%97%E3%83%A9%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0%E5%85%A5%E9%96%80%EF%BD%9E%E7%95%B3%E3%81%BF%E8%BE%BC%E3%81%BF%E3%83%8B%E3%83%A5%E3%83%BC%E3%83%A9%E3%83%AB%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%E5%BE%B9%E5%BA%95%E8%A7%A3%E8%AA%AC-%E4%B8%AD%E4%BA%95-%E6%82%A6%E5%8F%B8-ebook/dp/B01MAWJJOW)

僕が機械学習を勉強する上で使用したツールが上記になります。**TensorFlowで学ぶディープラーニング入門**は機械学習とは少し違いますが興味あったのでこれもやりました。Tenosrflowの勉強では、Tensorflowチュートリアルと上記のTensorflowで学ぶディープラーニング入門を平行させて勉強してました。機械学習で便利な画像データセット『MNIST』を使っての手書き数字文字の認識など初心者にとっては結構難しかったです。
**CouseraMachineLerning**では、講義ビデオを見てそのあとテストを解いていくっていう流れでやってました。プログラミング問題が自分的には難しく、Octaveを扱ったことがなかったのでこちらも苦戦しました。

# 最後に

僕はまだPythonを書き始めて時間が少なく理解度も浅いですが、Pythonを書いてて楽しいと思っているのでこれからも書き続けていきたいと思っています！
今後はデータ分析の方にも手を出したいと思っているのでそちらの方も勉強して行きたいと思っています。
最後にこの記事を見てくれてありがとうございます。
React-NativeでQR読み取り画面

RNでQRコードReader画面を作ります。
※expo利用： 31.0.2



##コード
```javascript:App.js

import React from 'react';
import { StyleSheet, Text, View, Dimensions, Alert } from 'react-native';
import { BarCodeScanner, Permissions } from 'expo';

const { width } = Dimensions.get('window');
const qrSize = width * 0.7


export default class App extends React.Component {

  state = {
    hasCameraPermission: null,
  }

  async componentDidMount() {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({
      hasCameraPermission: status === 'granted'
    });
  }

  cancelAlert() {
    Alert.alert(
      '読み取り終了しますか？'
    )
  }

  render() {

    const { hasCameraPermission } = this.state;

    if(hasCameraPermission === null) {
      return <Text>カメラにアクセスを許可しますか？</Text>
    }

    if(hasCameraPermission === false) {
      return <Text>カメラにアクセスできません</Text>
    }

    return (
      <BarCodeScanner
        onBarCodeRead={(scan) => alert(scan.data)}
        style={[StyleSheet.absoluteFill, styles.container]}
      >
        <View style={styles.layerTop} >
        <Text style={styles.description}>Scan QR code</Text>

        </View>
        <View style={styles.layerCenter}>
          <View style={styles.layerLeft} />
          <View style={styles.focused} />
          <View style={styles.layerRight} />
        </View>
        <View style={styles.layerBottom}>
        <Text
          onPress={() => this.cancelAlert()}
          style={styles.cancel}
        >
        Cancel
        </Text>

        </View>
      </BarCodeScanner>
    );
  }

  handleBarCodeScanned = ({type, data}) => {
    Alert.alert('barcode type:' + type + ' data: ' + data);
  }

}

const opacity = 'rgba(0, 0, 0, .6)';
const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  layerTop: {
    flex: 1,
    backgroundColor: opacity
  },
  layerCenter: {
    flex: 1,
    flexDirection: 'row',

  },
  layerLeft: {
    flex: 1,
    backgroundColor: opacity
  },
  focused: {
    flex: 8
  },
  layerRight: {
    flex: 1,
    backgroundColor: opacity
  },
  layerBottom: {
    flex: 1,
    backgroundColor: opacity
  },
  description: {
    fontSize: 25,
    marginTop: '40%',
    textAlign: 'center',
    color: 'white',
  },
  cancel: {
    fontSize: 20,
    textAlign: 'center',
    color: 'white',
    marginTop: '30%',

  },
});


```

こんな感じになると思います。

![QRcodeReader](https://user-images.githubusercontent.com/29940583/49417668-09818780-f7c2-11e8-9c89-33787f55bdd8.PNG)


参照記事は[こちら](https://forums.expo.io/t/styling-the-barcodescanner/4637)
カラーコードを10進数に変換する必要なんてなかった


デザイナーさんから、「ここのカラーコードは `008CEA` だよ」って受け取る場合がありますよね。
「redは0で、greenは8Cで140だから...」みたいな感じで、毎回10進数に計算していたんですが、

「あれ？16進数てコードで書けるじゃん！」って今更ながら気づいて、今までの苦労はなんだったんだ。。。

```swift
// aColor も bColor も同じ色
let aColor = UIColor(red: 0x00/0xFF, green: 0x8C/0xFF, blue: 0xEA/0xFF, alpha: 1)
let bColor = UIColor(red: 0/255, green: 140/255, blue: 234/255, alpha: 1)
```

この記法は昔から知ってはいたのですが、完全に失念していました。
アドベントカレンダーが空いていた && 悔しさのあまりに書きました。

Xcode 9からはColor assetが使えるので、iOS10のサポートを打ち切ったら、そちらを使いたいなぁ。
Symplify\CodingStandard 5系で追加されたFixerたち

[Symplify/CodingStandard](https://github.com/Symplify/CodingStandard)に追加されたFixerたちを軽く紹介する。


### `PrivateMethodOrderByUseFixer` [v5.2.0]

privateメソッドの定義の順番を、使われている順に合わせるよ。

```diff
 class SomeClass
 {
     public function run()
     {
         $this->call1();
         $this->call2();
     }

         $this->call2();
     }

-    private function call2()
+    private function call1()
     {
     }

-    private function call1()
+    private function call2()
     {
     }
 }
```


### `PropertyOrderByComplexityFixer` [v5.2.0]

プロパティを可視性(`public`→`private`)で並び替えたあとに、型の複雑さ(プリミティブ→クラス)でも並び替えするよ。

```diff
 class SomeClass
 {
-    /** @var DateTime */
-    private $date;

     /** @var string */
     private $name;

+    /** @var int */
+    private $price;

+    /** @var DateTime */
+    private $date;

     /** @var Service */
     private $service;
-
-    /** @var int */
-    private $price;
 }
```

### `ParamReturnAndVarTagMalformsFixer` [v5.2.11]

phpdocの`@param`、`@return`、`@var`の表記ゆれをなくすよ。


```diff
 /**
- * @param $name string
- * @return int $value
+ * @param string $name
+ * @return int
  */
 function someFunction($name)
 {
 }

 class SomeClass
 {
     /**
-     * @var int $property
+     * @var int
      */
     private $property;
 }

-/* @var int $value */
+/** @var int $value */
 $value = 5;

-/** @var $value int */
+/** @var int $value */
 $value = 5;
```


[v5.2.0]: https://github.com/Symplify/Symplify/blob/master/CHANGELOG.md#v520---2018-11-04
[v5.2.11]: https://github.com/Symplify/Symplify/blob/master/CHANGELOG.md#v5211---2018-11-26
デザイン超初心者が「XD」使ってUIデザインしてみた件

# デザイン超初心者が「XD」使ってUIデザインしてみた件
金沢工業大学のみなさん、そうでないみなさん、こんにちは

僕です。

今回は、抱えているプロジェクトでデザインを担当しましたので初心者ながら奮闘した話でもしようかなと思います。

超急ぎ足で書いたんで少し煩雑な文章になっていますが愛嬌ということで勘弁してくださいね⭐️

## XDとは
みんな大好き、Photoshopでおなじみのadobe様が出しているUI/UXデザインソフトです。

気になる人はクリスマスプレゼントで買ってもらおう！

## デザインってなんだよ
まず、僕がデザインするにあたって最初に考えたことはこれでした。

ひとえにデザインといってもいろんな意味がありますよね。。。

非常に難しい。

今回、この記事であげているデザインが指す意味は `ユーザーインターフェース` や `ユーザーエクスペリエンス` です。

UIやUXといわれるものです。

では、このUIやUXが何を考えて作っていくものなのかを記していきます。

## ユーザーからみた良いデザイン
前章であげられたUIやUXという言葉はユーザーから見た画面やユーザーがそのアプリケーションやWEBサイトを通し体験することを指しています。

- 発信者から発信される情報を「いい感じ」にして受信者に渡す
- そこで何かしらの体験が受信者にもたらされるのであればさせたい体験をアプリケーションやWEBサイトに導線として仕込む

### 「ふむふむ、そっか、わかりやすく伝えればいいんや」

って、おもった。しかし、

ユーザーから見たアプリケーションとかWEBサイトってそれぞれに目的や見たい情報、体験したいことが違うしその辺りどうやって設計したらいいんだろ？

という疑問が出てきました。

この疑問に対しての解としては、情報設計やターゲット、ペルソナ設定など挙げればきりがなく今回の記事の趣旨からは少し深掘りしすぎかなと思うのでまたの機会にします。

この章の「ユーザーからみた良いデザイン」ってどんなの？っていう回答としてあげられるのは

### どの情報がどこにあってどういう流れになっているのかわかりやすい画面

なのかなと思っています。めっちゃ漠然としているし本当はもっといろいろな関連する項目があるのでデザイナーの人ってすげえ

今回のタイトルの話が早くしたいので削りに削ってます。
デザインの勉強したい人は自分で調べてみてね！

##  いざ！XDで形を作っていくぞ！
入り口の画面！

![image.png](https://qiita-image-store.s3.amazonaws.com/0/210819/5d881cd0-41d9-ace7-60fe-b9c1e8640b07.png)

それぞれのデバイスごとに画面選べるのわかりやすくてめっちゃ良いなって思いました。

同社製品のPhotoshopやillustratorなどに比べてシンプルでわかりやすいなって初心者ながら思いました。

まぁ、まともに他の製品使えないのですが、、、

それでもずば抜けてXD自体の操作性はわかりやすいです

わかりやすいということは、考えを形にしやすいということにつながります。

そもそも、XDを使う前はkeynoteでデザインを起こしていたので操作性としてはとても向上しかつ、わかりやすくデザインすることが可能になりました。

わかりやすさの理由としてあげられるのはXD自体のシンプルさが一つに理由かなと使いながら感じました。

また、そのわかりやすさをエンジニアにそのまま伝えることができるという点もとても大きい魅力ですね。

今回のプロジェクトはこのデザイナーエンジニア間のデザインの受け渡しを僕がヘマしてしましあまりスムーズに行かなかったのは反省点であり、皆さんにも気をつけていただきたい点です。

## デザイン初心者がデザインを行いエンジニアに受け渡す際に気をつけたいこと
当たり前やんかって思われる方多数だと思いますが自戒も含めこれから気をつけたいことを記させてください😭

- マージンやパディングの幅に一貫性を持たせる
- 画面比率は事前に打ち合わせで設定する
- デザインの完了条件を明確にする

この3つ以外にも、たくさんエンジニアには迷惑をかけていますが特にこの３つはひどかったと思います。

みなさんがいきなりデザインしなきゃいけないってなった時に少しでも役に立てばと思います。

おわり
PHPのシングルクォート('')とダブルクォート("")について

# PHPのシングルクォート('')とダブルクォート("")について

## before
こんなコードを書いていたところ、出力されるログが異なることに気づいた。

```php
$hoge = 'hoge\n';
error_log($hoge);           //hoge\n
```
あれ？

```php
$fuga = "fuga\n";
error_log($fuga);            //fuga
```

ダブルクォートで囲んだ場合がデフォだと思っていたけれど、シングルクォートだと改行されないんだっけ？


## ググった
一発で解消された。
stackoverflowの記事が簡潔でよい。
[What is the difference between single-quoted and double-quoted strings in PHP? - Stack Overflow]
(https://stackoverflow.com/questions/3446216/what-is-the-difference-between-single-quoted-and-double-quoted-strings-in-php)
記事内でPHP.netのドキュメントも見つけた
[PHP: 文字列 - Manual](http://php.net/manual/ja/language.types.string.php)


>**注意**:[ダブルクォート](http://php.net/manual/ja/language.types.string.php#language.types.string.syntax.double)構文や[heredoc](http://php.net/manual/ja/language.types.string.php#language.types.string.syntax.heredoc)構文とは異なり、[変数](http://php.net/manual/ja/language.variables.php)と特殊文字のエスケープシーケンスは、 引用符 (シングルクオート) で括られた文字列にある場合には展開されません。
>(中略)
>文字列が二重引用符 (") で括られた場合、 PHP は、以下のエスケープシーケンスを特殊な文字として解釈します。


## after
ロガーでラップしたメソッドしか使用していなかったせいかこんな仕様になっているとは知らなかった。
再度型の説明ちゃん読もう。。完全に忘れておった。。
ファイル操作の自動化スクリプト（備忘録）

大量にファイルがあるときに、サッとファイル操作したい場合の備忘録(主に個人用）。こんな状況は滅多に無いかもしれませんが。変換の一部では**ffmpeg**を使った変換もありますので、あらかじめインストールしておく必要があります。

## ディレクトリ内の特定のファイルだけ抽出
例) ディレクトリ内に「jpg」と「mp３」などが混じっているときに、「jpg」ファイルだけ抜き出す。

```shell
files="./*"

for filepath in $files; do
  if [ -d $filepath ] ; then
    for i in $filepath; do
      dir=$i"/images"; [ ! -e $dir ] && mkdir -p $dir
      for file in `\find $i -maxdepth 1 -name '*.jpg'`; do
          name=$(basename ${file})
          output=$dir"/"$name
          cp -r $file $output
      done
    done
  fi
done
```

## ディレクトリ内のファイル名だけ書き出す
例）拡張子を除いたファイル名だけテキストファイルに書き出す必要があるとき

```shell
files="./*"

# NOTE: Create insertion file
touch trainval.txt

# NOTE: Get all data in current directory
for filepath in $files; do
  if [ -d $filepath ] ; then
    for i in $filepath; do
      for file in `\find $i -maxdepth 1 -name '*.*'`; do
          path=$(basename ${file})
          name=${path%.*}
          echo $name >> trainval.txt
      done
    done
  fi
done
```

## ディレクトリ内の画像をアスペクト比を維持して拡大縮小する
例) ファイルサイズを統一するとき 

```shell
files="./*"

# NOTE: Set width
fixWidth=640

for filepath in $files; do
  if [ -d $filepath ] ; then
    for i in $filepath; do
      dir=$i"/resized"; [ ! -e $dir ] && mkdir -p $dir
      # NOTE: Pay attention to the file extention
      for file in `\find $i -maxdepth 1 -name '*.jpg'`; do
          name=$(basename ${file})
          output=$dir"/"$name
          # NOTE: Resize the file size, keeping the aspect ratio.
          ffmpeg -i ${file} -vf "scale="$fixWidth":-1" -q 2 $output
      done
    done
  fi
done
```

## ディレクトリ内の音源ファイルを開始数秒のみ切り取り
例) デバッグ用の音源を用意するとき

```shell
files="./*"
duration=5 # 開始から切り取る時間

# NOTE: directory内のコンテンツ一覧を取得する。
for filepath in $files; do
  # NOTE: directoryのみフィルタリング
  if [ -d $filepath ] ; then
    for i in $filepath; do
      # NOTE: 保存用のdirectoryを作成する
      dir=$i"/short"; [ ! -e $dir ] && mkdir -p $dir

      # NOTE: 実行中のファイルに直接上書きすると、正確な秒数で切り取られなかったため、
      #       別ファイルとして保存する（すでにファイルがある場合は強制的に上書き)
      for file in `\find $i -maxdepth 1 -name '*.mp3'`; do
          name=$(basename ${file})
          output=$dir"/"$name
          ffmpeg -i ${file} -t $duration -y $output
      done
    done
  fi
done
```


そのその他のソースコードは[github](https://github.com/mitsuyacider/AutomationUtils)にあります
Visual Studio 2017 ではじめるTypeScript(2) ~プロジェクトの作成と実行~

# はじめに
[前回](https://qiita.com/yoshiati/items/4563274035c07228a306)は環境構築で終了したので、今回はプロジェクトの作成と、実際に実行するところまで進めていきます。

## プロジェクトテンプレートのダウンロードとインストール
なぜかデフォルトではTypeScript（以下TS）のプロジェクトテンプレートが存在しないので、まずはオンラインからプロジェクトテンプレートをダウンロードします。
![01.png](https://qiita-image-store.s3.amazonaws.com/0/70325/4154e2a9-842e-28f6-59cc-99a9008e03b4.png)
を選択し、オンラインの右上の検索窓に「TypeScript」と入力し、「TypeScript HTML Application Template」を選択します。
![02.png](https://qiita-image-store.s3.amazonaws.com/0/70325/254f0316-de60-bbe3-bedb-84b838c9b6f8.png)
するとインストーラーが起動するのでVSを終了させ、テンプレートがインストールされるのを待ちます。
![03.png](https://qiita-image-store.s3.amazonaws.com/0/70325/5e130fd1-f88d-f0f4-75cc-f5afa4500fbe.png)

## プロジェクトの作成
テンプレートがインストールされたら、VSを起動しプロジェクトを作成します。
左側のツリーに「TypeScript」があるので、その中から「HTML Application with TypeScript」を選択します。
![04.png](https://qiita-image-store.s3.amazonaws.com/0/70325/a7344bff-05b1-b5e5-9ed4-9c2a1f033ee6.png)

途中、TSのバージョンを更新するか聞かれると思うので、「はい」を選択してください。
（ここで表示されるTSのバージョンは端末にインストールされているTSのバージョになります）
![05.png](https://qiita-image-store.s3.amazonaws.com/0/70325/13ba324c-e87e-5d2e-b1e6-26a623e86d4d.png)

## 実行
まあとにかく実行ということで、「F5」キーか、メニューを選択して実行してみます。
![06.png](https://qiita-image-store.s3.amazonaws.com/0/70325/ecf78c76-1aad-c889-3028-dc1b728445f7.png)
ここで選択されるブラウザですが、OSの規定のブラウザがデフォルトで表示されるかと思いますが、枠内の↓矢印で変更可能です。
![07.png](https://qiita-image-store.s3.amazonaws.com/0/70325/249401ef-543f-bfb5-8403-73f127881a84.png)
で、実行結果ですが、ただの時計が表示されます。
![08.png](https://qiita-image-store.s3.amazonaws.com/0/70325/2a8c57dd-86b4-8fc5-38bd-b37434b2260b.png)

## JavaScriptファイルはどこ？
ブラウザを閉じるなりしてデバッグを終了させます。
ここで、ソリューションエクスプローラーを見るとTSファイルしか存在しません。TSをトランスパイルしたJavaScript（以下JS）ファイルが見当たりません。
![09.png](https://qiita-image-store.s3.amazonaws.com/0/70325/c3c37e7a-6c8e-d29d-9540-b8084bc67bd2.png)
（トランスパイルとは、ある言語で書かれたコードを元に、別の言語のコードを生成することらしいです。）
そんなときはソリューションエクスプローラーの「すべてのファイルを表示」をチェクします。
![10.png](https://qiita-image-store.s3.amazonaws.com/0/70325/86204d85-3646-3f95-bed2-9183df4e6971.png)
しっかりとJSファイルが作成されていますね。
TSファイルとJSファイルを見比べると「へぇ～、こんな感じに変換されるんだ～。」と思うかと。

# おわりに
今回はこれで終わりです。
コードを1行も書くことなく、ここまでできてしまうんですね。さすがVS！なのかな？
次回からはTSの入門に進みたいと思います。
IBM JDKでjavax.net.ssl.SSLHandshakeException: Remote host closed connection during handshakeが出たときの対処法

# 経緯

WebSphere Liberty等、IBM JDKを使ったアプリケーションで、外部のHTTPSサイトにアクセスしようとした際に、サイトによっては次のようなメッセージが出ることがあります。

```
R javax.net.ssl.SSLHandshakeException: Remote host closed connection during handshake
R  at com.ibm.jsse2.av.a(av.java:599)
R  at com.ibm.jsse2.av.i(av.java:869)
R  at com.ibm.jsse2.av.a(av.java:19)
R  at com.ibm.jsse2.av.startHandshake(av.java:672)
R  at org.apache.http.conn.ssl.SSLConnectionSocketFactory.createLayeredSocket(SSLConnectionSocketFactory.java:396)
R  at org.apache.http.conn.ssl.SSLConnectionSocketFactory.connectSocket(SSLConnectionSocketFactory.java:355)
R  at org.apache.http.impl.conn.DefaultHttpClientConnectionOperator.connect(DefaultHttpClientConnectionOperator.java:14
```

一方、Oracle JDKではうまくいくという場合があります。

# 原因

IBM JDKはデフォルトではTLSv1.0で通信のネゴシエーションをします。一方、相手がTLSv1.2以外を許可しない設定になっている（最近多いです）場合、ネゴシエーションが失敗し、上記のエラーメッセージとなります。

# 対応

以下の3つのシステムプロパティをセットします。すると、TLSv1.2でネゴシエーションされるようになります。当オプションはJDK 1.8で確認済みです。

```jvm.options等
-Dcom.ibm.jsse2.overrideDefaultTLS=true
-Djdk.tls.client.protocols=TLSv1.2
-Dhttps.protocols=TLSv1.2
```