OmniAICreator/Qiita-1.07M huggingface dataset:
cesiumでgoogle

#概要
cesiumでgoogleに飛ばしてみた。

#写真
![image.png](https://qiita-image-store.s3.amazonaws.com/0/18104/7e7066ae-796b-bb0a-f8f5-adf18ce8e88a.png)


#サンプルコード

```
var viewer = new Cesium.Viewer('cesiumContainer');
viewer.canvas.addEventListener('click', function(e) {
    var mousePosition = new Cesium.Cartesian2(e.clientX, e.clientY); 
    var ellipsoid = viewer.scene.globe.ellipsoid;
    var cartesian = viewer.camera.pickEllipsoid(mousePosition, ellipsoid);
    if (cartesian) 
    {
        var cartographic = ellipsoid.cartesianToCartographic(cartesian);
        var lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(5);
        var lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(5); 
        window.open('http://maps.google.co.jp/maps?q=' + lat + ',' + lon);
    }
    else
    {
        alert('Globe was not picked');
    }	
}, false);
viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(139.60, 35.60, 100000.0),
});

```

#成果物
http://jsdo.it/ohisama1/WU4q

以上。
がんばれぼくらのCSS（3D編）

# CSSの3D表現のはなし

こんにちは、フロントエンドエンジニアをやっております原田です。
普段はwebページのマークアップやらJSやらなにやら、サーバサイド以外のコードは手広くやっております。実にフロントエンドですね。

ところで、webコーディングをする方ならば、GPUレンダリングを有効にするために

```transform: translate3d(0, 0, 0);```

を使うことありませんか？

ただ、（もはや2D transformでも大丈夫説は置いといて）この３つ目の値を有効にした人はどれだけいるでしょうか？

本日は、普段の業務で使わないけど気にはなるCSSの3D表現についての記事となります。

## WebGL
とはいっても、やっぱりwebでの3Dと言えば、WebGL(Canvas + JS)ですよね。
[three.js] (https://threejs.org/)など、素晴らしいライブラリもありますし、リッチな表現にはやっぱり強いです。
サンプルをみているだけでもワクワクしちゃいます。

ユーザーに何のプラグインも導入してもらう必要がない、ってのも、大きな利点ですね。

## 一方その頃CSSは...
[transform-style](https://developer.mozilla.org/ja/docs/Web/CSS/transform-style)

なるほど、、、できなくはない、ということですね。

使ったことはないけれど、まあ何とかなるでしょう。

だってCSSだもんね！！

エラーないのって最高さ！！

## 使ってみる
というわけで、デモを作ってみました。

[SEOに強い建物](https://codepen.io/haradabox/pen/baeMmd)(Chromeの最新版を非常に推奨)

画面右上の「build」ボタンを押すと段落が建物になります。

### CSSならではのメリット
これが上記のデモに繋がるわけですが、CSSはあくまでHTMLタグのスタイルを指定する言語なのです。

逆に言うと、セマンティックなマークアップを保ったまま3D表現が可能なわけですね。

人だけでなく、クローラーにもやさしく。。。これもまた、webコーディングの重要ポイントであります。
まあ、やってみてわかったのは、ページを3Dで構築することの大変さだったわけですが。。。

## ここが変だよCSS

### 調整が大変
全ては根性です。

例えば、立方体3面に当たる光の加減。
3Dなら光源作ればいいところを、３面に違う背景色を設定して、いい感じになるよう調整するわけです。「#eee、、、いや、#dddだな！」

例えば、位置調整。
普通のwebページの段落を3Dにするのは結構大変（位置が安定しない）で、結局デモでは大枠の縦横を固定して何とか表示しています。
通常のwebページであれば、文章量によってページの長さは変わるはずなので、ここは結構クリティカルですね。

それに「立方体」を作ろうと思うと、6面必要な訳ですが、CSSで一個のタグに埋め込めるのはbeforeとafterの擬似要素だけなのです。。。
そうなると、3D表現用にHTMLタグを追加するという、CSSからしたらとても不本意な結果を招きかねないので、注意が必要です（デモは上・左右合計3面のハリボテです）。

### WebGLのがすごい
そうなのです。根性を極限まで使えば、CSSでできないこともないでしょうが、そこまでいったらおそらく、現状、ライブラリも豊富で、ブラウザ依存もCSSほどはなく、JSで思うまま操れるWebGLのがコスパは良いと思われます。

辛いぜ。

## ここがすごいよCSS

**何となくで3Dができる！！**

**何となくで3Dができる！！（大事なことなので(ry）**

**見た目でもコードでもフツーのHTMLが変形するのはロマン！！**

## CSSの3D表現の使いどころ
色々書きましたが、とっつきやすく取り入れやすいのがCSSの良いとこだと思います。

・モジュールでかち合わない程度に使う（ナビゲーション、プルダウン、カルーセルなど、パーツで完結させる）
・大味な3D（段落を一個の立方体の面に配置し、スクロールで回転させるとか）
・2D表現のもうひと押し（パララックスの奥行き感の増加、ボタンのインタラクションとか）

などなど、既存のwebページの表現のスパイス的に使うのが現状コスパが良いんじゃないでしょうか。ブラウザ間の差異もまだありますしね。

とはいえ、イイ感じのプロパティがブラウザで採択されるのを、楽しみにせずにはいられません。
何となくで3Dがゴリゴリできちゃう未来に期待！！！
cron + shell scriptでGithubの緑化を自動化する

# はじめに
以前、Githubを緑化するためにできるだけ毎日コードを書いていた時期があったのですが、自動的に緑色にできたらなーと思うことがあったので、自動でGithubにコミットしてくれるようなシステムを作りました。

※ 自分の手でGithubを緑化するのは、手を動かす動機付けになるのでそういう人にはおすすめしません笑

Githubが緑色だと知らない人がぱっとみたとき「このエンジニアは積極的に活動しているな」という印象になるので印象もいいかと思います。(薄い緑がずっと並んでいるのは不自然ですがそこは積極的に他のプロジェクトでコミットして色を濃くしていきましょう笑)

↓参考までに7月あたりからこのプログラムを動かしている現在の僕のGithubはこのような感じになってます。

![スクリーンショット 2017-11-30 22.17.26.png](https://qiita-image-store.s3.amazonaws.com/0/94508/30970f4d-2c29-a5a0-6c68-a85f2fdb9e38.png)

業務で他のプロジェクトにコミットすることも多いのでそれらといい感じに中和してますね。

# 実装方法

自動でやる方法はいくつかあると思いますが、今回はシェルスクリプトを書いて、CentOS上でcronを用いて自動実行させることにしました。


# プログラム

ただやみくもにテキストをGithubにpushさせるのではなく、どうせなら少しだけでもためになるようにしたいなと思い、qiitaのhttps://qiita.com/popular-items/feed から人気の投稿を取得し、Githubにpushするシェルを書きました。

```sh:app.sh
#!/bin/sh

cd $(cd $(dirname $0) && pwd)

file_name=`date +%Y-%m-%d`
path="$(cd $(dirname $0) && pwd)/posts/${file_name}.md"

if [ ! -e $path ]; then
  items=`curl -s https://qiita.com/popular-items/feed | \
         grep -o '<title>.*</title>\|https://qiita.com/.*?' | \
         sed -e '1d' -e 's/?$//' -e 's/^<title>//' -e 's/<\/title>$//'`

  IFS=$'\n'
  count=1

  for items in `echo "$items"`
  do
    if [ $(( count % 2 )) == 0 ]; then
      title="- [${items}]"
      row=$title$url
      echo $row >> $path
    else
      url="(${items})"
    fi
    count=$(( count + 1 ))
  done

  git add .
  git commit -m "add post ${file_name}.md"
  git push origin master
fi
```

# 自動実行

はじめは自分のmacのlaunchdを用いて、自動実行させていたのですが、macを起動しないと自動実行してくれないので、現在は個人で契約しているVPS上で実行させています。

(エンジニアならVPSぐらいはもってるよね....。)

インストールしているOSはCentOSなのでcronを用いて自動実行させています。

```shell-session
$ crontab -e
```

で毎日9時に対象スクリプトが動くように設定します。


```shell-session
00 09 * * * /home/hiroki/qiita-trending/app.sh
```

これで毎日9時にGithubにqiitaのトレンドに載っている投稿一覧が自動でpushされるようになりました。

# おわりに

今回作成したプログラムは[こちら](https://github.com/hc0208/qiita-trending)にのせておきました。
Metasploitの動作テストにうってつけ、Metasploitableを使ってみた

作業の備忘録がてら書いているブログです。
誰かの助けになれば幸いです。

---------------------------------

#Metasploitableとは
Metasploitは脆弱性をついた攻撃を行うツールで、ペネトレーションテストなどに使われます。
https://ja.wikipedia.org/wiki/Metasploit

Metasploitableは脆弱な状態にセットアップされたVMで、Metasploitのテストを行うためのターゲットとしてすぐに利用することができます。
http://kaworu.jpn.org/security/Metasploitable

#Metasploitableのセットアップ
下記のURLからダウンロードし、回答したものをVMware Workstation PlayerやVirtual Boxで開きます。
https://sourceforge.net/projects/metasploitable/files/Metasploitable2/
→ユーザアカウントmsfadmin、パスワードmsfadmin
これで、脆弱なVMイメージが稼働している状態となります。
今回はMetasploitable2　というバージョンのものを使っています。

#Metasploitableの動作テスト
Kali linuxなどでMetasploitを起動します
![image.png](https://qiita-image-store.s3.amazonaws.com/0/102081/36e5fad9-f45e-757f-54de-f451de4e0c75.png)

今回はvsftpdの欠陥を利用します（vsftpd_234_backdoorというペイロードをつかいます）

下記のようなコマンドで攻撃を実行します
`use exploit/unix/ftp/vsftpd_234_backdoor
set RHOST 攻撃先のIP
exploit`

Command shell session 1 openedと表示され、コマンド入力ができるようになっています。
ifconfigやcat /etc/shadowなどを打ち込み、ターゲットの情報が取得できていることを確認します。
C++ > Unicode > Lプリフィックス > L"hello" | Unicodeを意味するプリフィックス | ソースコードの文字コードの規定 > 一般的な処理系, clang, Visual Studio, gcc | Javaでの標準 (仕様書から)

```txt:動作環境
C++ Builder XE4
```

Lプリフィックスというのがある。
C++ Builderでは以下のような記載で使用できる。

```cpp
UnicodeString text = L"text";
```

これを知ったのはC++ Builderを使うようになってから6年目あたりで、個人のブログでだった。
[C++Builder2009以降でソースコードに文字列リテラルを書くときはプレフィックスLをつけよう](https://www.gesource.jp/weblog/?p=3023) by 山本隆さん

公式な情報源かどうかは不明ではあるが、以下に詳しい。
http://en.cppreference.com/w/cpp/language/string_literal

### 用語について

@yumetodo さんのコメントで間違いに気づきました。
コメント感謝です。

記事のタイトルを「Lマクロ」から「Lプリフィックス」に変更しました。

https://stackoverflow.com/questions/13379451/how-is-l-macro-defined
> L is not a macro, it's just the standard prefix for wide (wchar_t, "Unicode") string literals;

標準的な「プリフィックス」の一つのようですね。

google検索時に「"Lマクロ"」で見つかる情報については、用語の誤用なのかもしれません。

### Unicodeを意味するプリフィックス

@SaitoAtsushi さんの[コメント](https://qiita.com/7of9/items/7aa2f04db2c8eceef944/#comment-e78c92681f39be519bcc)においてUnicdodeを意味するプリフィックスについて記載されています。

情報感謝です。

### ソースコードの文字コードの規定

@nakataSyunsuke さんの[疑問](https://qiita.com/7of9/items/7aa2f04db2c8eceef944/#comment-4acd21ee311823eb8cdd)に端を発したソースコードの文字コードの規定。

@SaitoAtsushi さんの[コメント](https://qiita.com/7of9/items/7aa2f04db2c8eceef944/#comment-c9d4b57244ded4fed83a)にてC++の場合の規定および、一般的な処理系について紹介されています。

また、 @yumetodo さんの[コメント](https://qiita.com/7of9/items/7aa2f04db2c8eceef944/#comment-ad21713bb83be2d36da8)においてはclangやVisual Studio, gccの場合について紹介されています。

@nakataSyunsuke さんの[コメント](https://qiita.com/7of9/items/7aa2f04db2c8eceef944/#comment-48803d166da268334068)では、Java言語の場合の標準について紹介されています。

情報感謝です。

### 検索用キーワード

- プリフィックス
- プレフィックス
新卒がアプリケーションを企画設計開発と一通りやらされた

なんだかよくわかりませんが一人で調査企画設計開発デバッグと全部やらされたのでこの経験を共有できればと思います。
アプリケーションと言ってもスマホ系アプリではありません。
その時にどんなことを意識して作ったか簡単に書いていこうかと思います。

# 調査
自社がどういったことをしたいのかを様々な人から話を聞き、市場を調査します。
市場で使えそうなもの、自社で何がしたいかを考えながら最初は広く浅く。調査が進んだら、ターゲットに対して集中して調査していきます。


# 企画の意見出し
まずアイディアが出たら紙にどんどん書いていきましょう。
ブレインストームとかで付箋を使ってアイディアを出すこともあると思います。
自論ですが、PCとかで意見を出していると、タイピングする段階で自分の意見をある程度まとめて打つことになるので、アイディア出しの段階では向いていません。とりあえず、意見を出す。見栄えのいい意見ではいいアイディアは出ません。
自分から見て「泥臭い・みっともない・古臭い」と思った意見でも考え方を変えるだけでいいアイディアになるかもしれません。実際、今の技術でできることを考えてみると思った以上にできそうだなと思えました。

# 企画のプレゼン
今度は企画を決めるためにプレゼンテーションをおこないます。
特にプレゼンで気をつけてやるよりも自分がやりたいことをアピールしていかに会社がやりたいものに近づけて言うかが大事です。だいたいここで修正とかダメ出しをたくさんもらいます。

# 設計
企画を通したらハードの条件は○○にしてソフトは○○にして etc...を決めていきます。
今回は社内でお試しで使うものだったので大体は勝手に決めて作っていきました。

最初は紙に書いて次第に清書していく段階でXMLなどで書式を整えていきます。

# 開発
設計書通りに進めていきます。基本ここの段階で詰まった場合は設計がおかしいとコーディング中に気づいた事が多かったです。
設計段階で修正するよりもここの段階で修正することは大変でした。
オブジェクトの相互関係とかを見直して問題ないかを確認したりしなければならなかったからです。
修正したことで要らなくなったオブジェクトも出てきて、クラス図の見直しがかなり辛かったです。
ここは経験もある程度必要なんだろうと思って進めていきました。

# デバッグ
なんだかんだここが一番めんどくさいと思いました。
GUIのデバッグもそうですし単体テストで取り除いたバグでも結合して見ると思わぬエラーが出てきて「なんでだ〜！」ってオフィスでつぶやいてたためヤバイ人認定されかけていたそうです。

基本的に単体テストをして問題ないメソッドはバグはなく結合時に期待どおりの入力をメソッドに与えていなかったため起きたものがほとんどでした。

GUIのデバッグは今流行りのRPAとかでやらせて楽したいと思いましたが、デバッグのためにRPAを作ると本末転倒なきがしてました。
GUI系のデバッグで楽する方法ってないんですかね。

# レビューを受ける
バグを取り除いたアプリケーションを多くの人に見てもらいます。
イメージと違うから微調整してとか、機能の使い方がわからないから機能ごとにページを分けてくれとか言ってることが初めと変わっていて内心あなた方がこうしろって言ったでしょうに！って思ってました。
ここの段階で言われるのは見栄えの問題であってアプリのシステムについて口出されることは殆どありませんでした。
レビューでいい評価を受けたければ見栄えをとりあえず整えるといいですよ！

# 修正とレビューの繰り返し
言われたことには心を無にして作成すると楽ということに３回目のレビューで悟りました。
修正はいいんですが修正したあとのデバッグが大変でした。

GUI系のデバッグを(ry

# 完成
OKをもらってアプリケーションを公開しました。
作ってみて、営業の人に新しいアイディアが出たなど言われて嬉しい経験をさせていただきました。

あとはこれがなんの意味あるのとか言われますが、基本的にエンジニアの人に言われたのは辛かったです。
自分の会社だけですかね？

あとはアプリケーションが停止しないように公開期間の間はメンテナンスをしてあげるのが続きそうです。


# 最後に
開発をする際、いちばん大事な箇所はこれって決められないのですが、企画と設計は一番時間をさいて行うべきだ中って思いました。
企画のアイディアが変だと完成しても心無いこと言われますし、設計が間違っていると修正のコストが掛かってしいます。

また、近年ペーパーレス化が進んでいますが、じっくり読んで理解したいもの意見の書き出しは紙に書いていったほうが理解できますし、進行が早いです。お勧めします。

新卒でこんな事は普通しないとは思いますが、今後開発していく中で少しは役立てればと思います。
馴染みのなかったdockerを手に馴染ませている話

こんにちは！trebyです（遅刻ごめんなさい）。

職業エンジニア生活も5年目ということでエンジニアを取り巻く状況も変わってきているな、と思っています。顕著だったところはいくつかあって、例えばフロントエンドの変遷の速さ(最近は多少落ち着いていますが)とか、市場で高く売れるスキルセットとかですね。

開発環境を取り巻くもそんな変化が大きかったものうちの一つだと思っていて、それこそ当初はVagrant上とかMacbookなどlocal環境上に構築するのがdockerが使われるのも珍しくなくなってきています。

筆者が勤めている会社では開発環境含めdocker化されていて、その話は[開発しやすいRails on Docker環境の作り方](https://qiita.com/joker1007/items/9f54e763ae640f757cfb)などに書かれています(そのままQiitaにある記事を参照できるの超便利)

勤務先でdockerが使われていることによるメリットは何よりも自分で試して詰まった時のサンプルに容易にアクセスできることで、それによってすごく勉強させてもらっているところはあります。最近[メインのサービスがRails5.1に上がった](https://abicky.net/2017/12/20/120929/)し良い会社。ステマです。

何事もそうなんですが、やっぱりdockerも(たとえ使えていたとしても)実際に手を動かしてみないと分からないことが多いな、と思っていまして、最近で言うと、ちょちょっと作った[お遊びのサービス](https://github.com/imas/imasquare)の開発環境をdocker化してみてみました。
(Dockerfileをそれっぽく命名されている割に開発環境しかサポートしていないので、そこは[Professional Rails on ECS](http://joker1007.hatenablog.com/entry/2017/12/09/155456)の壁打ちするかしら)

実際にハンズ・オンしてみて個人的に勉強になったな、と思っているところは耳触りの良い専門用語ではなくて割とプリミティブよりなところで自分の性質もあるのでしょうがそこは面白いな、と感じます。

例えば、

- 純粋にMac上でどうやってdocker使おうかという話でしたり(筆者はdinghyを使っています)
- コンテナを立てたりとか捨てたりとかするなら永続化したいデータどうすんねんという話でしたり(普通にvolume指定する)
- 1コンテナ1プロセス #とは(なるほど、それでdocker-compose)
- じゃあ本番環境での(会社ではECS使ってるけどkubernetesとどう違う？)

などなど。まだまだ勉強中のところも多いのですが、やってみて理解深まる部分も多いな、と思っています。

[![VueとdockerとAWSとチームとアイマスと私](http://image.slidesharecdn.com/shinjukurb56-lt-171220225747/95/slide-1-1024.jpg)](https://www.slideshare.net/treby/vuedockeraws)
(唐突に[昨日のShinjuku.rb](https://shinjukurb.connpass.com/event/72956/)でのLT)

docker使えるの普通だよねって言われる世界になったけど、「どうしようどうしよう」となっている筆者のような悩みを持たれている方におかれましては、参考にしていただきつつ、ぜひともに研鑽していけますと幸いです！
3. タブ区切りのファイルをtabulator で表示する

#表示方法の変更
[2.タブ区切りのファイルをtabulator で表示する](https://qiita.com/percipere/items/d68fa2d5722ae7678863)に次の変更を加える

- 表示する行のグループ化
- 並び替え不要なコラムの並び替えを無効化

##groupBy: field item でtabulatorのテーブルをグループ化
tabulatorの設定時にgroupBy: "Symbol"を指定

```javascript
<script>
    $(document).ready(function () {
        // コラムの定義
        var gene_columns = [
            {title: "id", field: "id", visible: false},
            {title: "GeneID", field: "GeneID", visible: false},
            {title: "Symbol", field: "Symbol", formatter: ncbiLinkByGeneSymbolFormatter},
            {title: "RSG", field: "RSG"},
            {title: "LRG", field: "LRG"},
            {title: "RNA", field: "RNA"},
            {title: "t", field: "t"},
            {title: "Protein", field: "Protein"},
            {title: "p", field: "p"},
            {title: "Category", field: "Category"},
        ];
        //　tabulatorの設定
        $("#gene-table").tabulator({
            groupBy: "Symbol",
            columns: gene_columns
        });
        // ajaxでデータの読み込み
        $("#gene-table").tabulator("setData", "./output.json");
    });
</script>
```

遺伝子Symbolでグループ化した表示となる
![Screen Shot 2017-12-21 at 08.20.09.png](https://qiita-image-store.s3.amazonaws.com/0/213053/7db5ed9c-ae49-ae88-fe00-1c80f8cc22ac.png)

## headerSort: boolean でヘッダーをクリックした際の並び替え機能を変更する

並び替える必要の無いコラムに headerSort: false を指定することで、指定したコラムの並び替えを無効にする

"t"及び"p"コラムの並び替えを無効化する
コラム定義部分のみ抜粋

```javascript
        // コラムの定義
        var gene_columns = [
            {title: "id", field: "id", visible: false},
            {title: "GeneID", field: "GeneID", visible: false},
            {title: "Symbol", field: "Symbol", formatter: ncbiLinkByGeneSymbolFormatter},
            {title: "RSG", field: "RSG"},
            {title: "LRG", field: "LRG"},
            {title: "RNA", field: "RNA"},
            {title: "t", field: "t", headerSort: false},
            {title: "Protein", field: "Protein"},
            {title: "p", field: "p", headerSort: false},
            {title: "Category", field: "Category"}
        ];
```

ヘッダー部分に注目
![Screen Shot 2017-12-21 at 08.33.32.png](https://qiita-image-store.s3.amazonaws.com/0/213053/e98357bb-448b-c39d-8db4-10a36e1e3932.png)
ヘッダーの"t"と"p"の横の▲が消えてこのコラムでの並び替えができなくなった

今回はここまで:smiley:
create-ts-lib: TypeScript WebPack Starter CLI

# create-ts-lib 
 🏠 [Home Page](https://emyann.github.io/typescript-webpack-starter/) - ⚡ [Github Page](https://github.com/emyann/typescript-webpack-starter) -  📦 [NPM Package](https://www.npmjs.com/package/create-ts-lib)
[![Build Status](https://img.shields.io/travis/emyann/typescript-webpack-starter.svg)](https://travis-ci.org/emyann/typescript-webpack-starter) [![Npm Package](https://img.shields.io/npm/v/create-ts-lib.svg)](https://www.npmjs.com/package/create-ts-lib)
> A yet another Typescript Webpack Starter

![Imgur](https://i.imgur.com/sj1kwB9.gif)


## Built upon

- [x] [Webpack 3](https://webpack.js.org/)
- [x] [Typescript 2](https://blogs.msdn.microsoft.com/typescript/2016/07/11/announcing-typescript-2-0-beta/)
- [x] [Webpack Dashboard](https://github.com/FormidableLabs/webpack-dashboard)
- [x] [Karma](https://karma-runner.github.io/1.0/index.html), [Jasmine](https://jasmine.github.io/)


## Quick Overview

```sh
npm install -g create-ts-lib

create-ts-lib my-typescript-lib
cd my-typescript-lib/
npm start
```

Then open http://localhost:3000/ to see your bootstrapped module.
When you’re ready to deploy to production, create a minified bundle with `npm run build`.

### Get Started Immediately

You **don’t** need to install or configure tools like Webpack or Babel.<br>
They are preconfigured so that you can focus on the code, but as a starter kit you still can modify them.

Just create a project, and you’re good to go.

## Getting started

### Installation

Install it once globally:

```sh
npm install -g create-ts-lib
```

### Creating a TypeScript module

To create a new module, run:

```sh
create-ts-lib my-ts-module
cd my-ts-module
```

It will create a directory called `my-ts-module` inside the current folder.<br>
Inside that directory, it will generate the initial project structure and install the transitive dependencies:

```
my-ts-module
├── node_modules
├── src
│   └── index.html
│   └── index.spec.ts
│   └── index.ts
│   └── vendor.js
├── tests
│    └── unit
│        └── spec-bundle.js
├── README.md
├── package.json
├── .gitignore
├── karma.conf.js
├── tsconfig.json
├── tslint.json
├── typings.json
└── webpack.config.js
```

No configuration or complicated folder structures, just the files you need to build your app.<br>
Once the installation is done, you can run some commands inside the project folder:

### `npm start` or `npm run server:prod`

Runs the app in development / production mode using Webpack dev server.
Open [http://localhost:3000](http://localhost:3000)  to view it in the browser.

### `npm test`

Runs the unit tests using Karma as test runner and Jasmine as testing framework.

### `npm run build` or `npm run build:prod`
Build a development release

After build phase, 3 files are generated into the `dist` folder:
- `app.bundle.js` - contains the core of the application. From the entry point `src/index.ts`
- `vendor.bundle.js` - contains the vendor dependencies. From the entry point `src/vendor.ts` (lodash is added as an example)
- `index.html` - html page referencing these files
俺々jenkins運用方法Tips

### 目的

個人的なJenkins運用のメモ
ご意見大歓迎！！ :ok_woman:

# Jenkinsの予備知識

### インストール方法(centos7)

+ rootになる

```
$ sudo su -
# 
```

+ javaのインストール

```
# wget --no-cookies --no-check-certificate --header "Cookie: oraclelicense=accept-securebackup-cookie" "http://download.oracle.com/otn-pub/java/jdk/8u131-b11/d54c1d3a095b4ff2b6607d096fa80163/jdk-8u131-linux-x64.rpm" -O /var/tmp/jdk-8u131-linux-x64.rpm
# rpm -ivh /var/tmp/jdk-8u131-linux-x64.rpm
```

+ yumリポジトリに追加

```
# wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat-stable/jenkins.repo
```

+ RPMパッケージの公開鍵をインポート

```
# rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key
```

+ jenkinsのインストール

```
# yum install --enablerepo=jenkins jenkins
```


+ プロセス起動

```
# systemctl start jenkins
```


+ 自動起動の設定

```
# systemctl enable jenkins
```





### jenkinsの基本的なファイル構成


+ システムの設定ファイル

```
/etc/sysconfig/jenkins
```
+ 本体.war

```
/usr/lib/jenkins
```



+ データディレクトリ

```
/var/lib/jenkins
```



# JenkinsのTips

### 本体.warはシンボリックリンクで動く

本体は下記のサイトからダウンロード出来る

http://updates.jenkins-ci.org/download/war/index.html

また、本体の実行ファイルに対してのシンボリックリンクで動くので、下記のように過去のjenkinsのバージョン毎に管理して、付け替え+プロセス再起動でjenkinsのアップデートをすることが可能。
またコードによる自動化も可能

```
# cd /usr/lib/jenkins/
# tree
.
|-- 2.89
|   `-- jenkins.war
|-- 2.92
|   `-- jenkins.war
|-- 2.93
|   `-- jenkins.war
|-- jenkins.war -> /usr/lib/jenkins/2.93/jenkins.war
`-- jenkins.war.org
```


### データディレクトリもシンボリックリンクで動く

例えば以下のようにしても動く

```
# ls -1 /opt/
iganari-jenkins
```
```
# ls -l /var/lib/

lrwxrwxrwx   1 jenkins root      19  6月 23 21:02 jenkins -> /opt/iganari-jenkins
```


### Pluginディレクトリもディレクトリごとバックアップ出来る

+ Pluginが入っているディレクトリ

```
/var/lib/jenkins/plugins/
```

+ 仮に今のPluginを保持しておきたい場合

```
# cp -rf  plugins /tmp/plugins.$(date +"%Y%m%d")
```
Matplotlibのプロット上でのGUIでボックス領域選択による要素数のカウントし要素をCSV形式でクリップボードにコピーする

# やりたいこと
Matplotlibのプロット上でのGUIで四角形領域を選択し、選択された領域内でプロットされた要素数を出力したい!!
更に、要素をCSV形式でクリップボードにコピーしたい

# ソースコード

```py
# -*- coding: utf-8 -*-
import numpy as np
import matplotlib.pyplot as plt
from matplotlib.patches import Rectangle
from matplotlib.widgets import RectangleSelector
import pyperclip

class RectSelect(object):
    def __init__(self, x, y, ax=None):
        self.ax = ax or plt.gca()
        self.x = x
        self.y = y
        self.rect = Rectangle((0,0), 0, 0, color='orange', alpha=0.5)
        self.ax.add_patch(self.rect)
        self.blc = np.zeros(2)
        self.trc = np.zeros(2)

        def selector(event):
            if event.key in ['Q', 'q'] and selector.RS.active:
                selector.RS.set_active(False)
            if event.key in ['A', 'a'] and not selector.RS.active:
                selector.RS.set_active(True)

        selector.RS = RectangleSelector(self.ax, self.callback)
        self.ax.figure.canvas.mpl_connect('key_press_event', selector)
        self.ax.figure.canvas.mpl_connect('button_release_event', self.release)

    def callback(self, eclick, erelease):
        def _check(a, b):
            if (a >= eclick.xdata and a <= erelease.xdata) and (b >= eclick.ydata and b <= erelease.ydata):
                return True
            else:
                return False

        count = 0
        copy_text = ""
        for x_i, y_j in zip(self.x, self.y):
            if _check(x_i, y_j):
                count += 1
                copy_text += "{0},{1}\r\n".format(x_i, y_j)
                
        pyperclip.copy(copy_text)
        print count, "num"

    def release(self, event):
        self.rect.set_width(self.trc[0] - self.blc[0])
        self.rect.set_height(self.trc[1] - self.blc[1])
        self.rect.set_xy(self.blc)
        self.ax.figure.canvas.draw()


x = np.random.random(20) * 10
y = np.random.random(20) * 10
fig = plt.figure()
ax = fig.add_subplot(111)
ax.plot(x, y, '.')
region = RectSelect(x, y)
plt.show()
```

# 結果
適当にプロットし、マウスで領域を選択する
![image.png](https://qiita-image-store.s3.amazonaws.com/0/122949/d802a625-6039-e656-d230-a5f07f41e6d3.png)

するとこんな感じに出力される。期待通りにピンク色の四角形領域の点の個数を数えられました(・ω・)ｖ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/122949/1bf3fdff-b888-2c0d-e075-612dc48afe55.png)

<font color="red">追加</font>
四角形領域選択後、選択した点の座標をCSV形式でクリップボードにコピーします

# 参考サイト
- [Matplotlibのプロット上でのGUIによるボックス領域選択](https://qiita.com/snoopython/items/7a3474424e9f400b1a58)

- [Event handling and picking](https://matplotlib.org/2.1.0/users/event_handling.html)
自分のTOEICスコア？今から調べてみようじゃないか

[プログラマのための英語・外国語 Advent Calendar 2017](https://qiita.com/advent-calendar/2017/lingo) も22日目になりました。もうすぐクリスマスですね。

さて、TOEICスコア持ってますか？僕は持ってません。だって受けるの面倒くさそうなんだもの。

と思ってたらシアトルで働く友達にこんな記事を教えてもらいました。

[ギークのかなり偏った英語学習の話 - tks(高須 正和)のブロマガ](http://ch.nicovideo.jp/tks/blomaga/ar753525)

>TOEICスコアで言うと、2014年1月 320点→1年後595点　もちろんもっと上げないといろいろダメなんだけど、たまたまその種の仕事はもともと得意だった部分なので多少はゴマカシがきいていて、周りに日本人がいないけど仕事は出来ている(から、暦本先生にビックリされたんだと思う)

すごい！１年でそんなに上がるんですね。

>このとき(2014年1月)のCASEC英語テスト成績はコレ。一般的なTOEICでなくてCASECなのは、オンラインでその場で受けられて便利だから。

ほほう。というわけで[CASEC](http://casec.evidus.com/)でTOEICスコアを出してみました。

# CASEC

<img width="857" alt="CASEC.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/33704/0141340b-23d3-f0d7-8539-f76c7ed81918.jpeg">

[CASEC](http://casec.evidus.com/)は英検で知られている財団法人日本英語検定協会によって作られたオンラインで受けれるテストです。PCとネットがあれば受けれます。スコアはテストが終了するとすぐに見れます。TOEICと違ってお手軽です。スコアは独自の数値ですがTOEICとTOEFLでの予測値も出してくれます。

テストは４つのセクションに分かれています。リーディングの問題が２セクション。リスニングの問題が２セクション。テストには３０分〜４０分程度の時間がかかります。

お値段は１回3600円です。

# SECTION1 語彙の知識（リーディング）

空欄に当てはまる単語を選択していきます。全部で１６問です。

<img width="1277" alt="1_test.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/33704/1dffb54e-2049-26b2-0d18-89e008057446.jpeg">

# SECTION2 表現の知識（リーディング）

空欄に当てはまる表現を選択していきます。これも全部で１６問です。

<img width="1273" alt="2_test.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/33704/754354f0-af2c-713e-8252-92a9d4f32cce.jpeg">

# SECTION3 大意の把握（リスニング）

まず英語の音声が流れます。会話だったりナレーションだったりします。そして当てはまる答えを選択します。全部で１７問です。

<img width="1276" alt="3_test.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/33704/f85ea223-89ef-6d24-12e4-0649643e4a08.jpeg">

# SECTION4 書き取り（リスニング）

画面に表示された文章の音声が流れます。空欄の箇所の英文を聞き取って入力します。全部で１１問です。

<img width="1274" alt="4_test.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/33704/5d9e59e1-b99b-25f4-900f-591f0575416a.jpeg">

# やってみた

どーーーーん！

<img width="798" alt="score.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/33704/41663c96-2eb1-2356-cae4-4c5065cd8443.jpeg">

460！

リスニングの点数が良いのは最近ジブリ英語版を聞きまくってるからだろうか？

そして足りない語彙力。単語覚えるの超苦手なんです。

しかし convenient です。次は２ヶ月後くらいにでも受けてみますか！どれくらい上がるかな？
ベアメタルでRaspberryPiのPWMから音を鳴らす


この記事は<a href="https://adventar.org/calendars/2075">adventar Raspberry Pi Advent Calendar 2017</a>の21日目です。

# 初めに
どうも。gyaboと申します。

去年はRaspberryPiベアメタルでGPUをいじくってポリゴンをだして遊びました。記事は以下です。
https://qiita.com/gyabo/items/f3a411a63d608d00b384

今年またグラフィック系でやるのはなんかへんてこだったので、なんか音出せればうれしいなと思って
ベアメタルで音鳴らす方法を書きます。
で、これをマルチコアでやるサンプルをこしらえてたんですがいろいろな環境で動かなかったので体力つきました。すみません。


# 目的 : ベアメタルで音鳴らす
HDMIつながってるんだから、音鳴らせるだろうと思っていろいろ見てみたんですがどうもHDMI関連は全部VideoCore側に移譲していて、かつオーディオがちゃんとなってくれるソースを見てみたんですが、イマイチよくわからなかったんで、イヤホンジャックのPWMで素直に出すことにしました。フォーラム調べてみると同じ事を考えてる方がいるけど、何も資料がありませんでした。
なので、そこまで複雑なことはしません。


# 資料
以下がとても詳しいです。
https://github.com/PeterLemon/RaspberryPI

あと、開発環境は前回の私の記事を参考にしていただければと思います。
https://qiita.com/gyabo/items/f3a411a63d608d00b384

# 環境
RaspberryPi2です。3では動作確認していません。

# 音ネタを用意する
以下のサイトからお借りしました。感謝！

https://modarchive.org/index.php?request=view_by_moduleid&query=38211


# 一式
以下からDLしてください。
image.binをkernel.imgなりなんなり、config.txtに合わせて変えてください。

http://gyabo.sakura.ne.jp/prog/RPI2_PWM_AUDIO_DEMO.7z

で、起動すると音が鳴るはずです！
元の曲が良いのか、十分な良い感じになってくれます。


# main.cのコアの部分
以下の通りです。

```c

void main() {
	uart_init();
	
	IO_WRITE(GPIO_SEL4, GPIO_FSEL0_ALT0 | GPIO_FSEL5_ALT0 );
	usleep(10);
	int idiv = 11;
	IO_WRITE(CM_PWMCTL, PM_PASSWORD | CM_KILL);
	usleep(150);
	IO_WRITE(CM_PWMDIV, PM_PASSWORD | (idiv << 12) );
	IO_WRITE(CM_PWMCTL, PM_PASSWORD | CM_ENAB | CM_SRC_PLLDPER);
	usleep(150);

	int range      = 1024;
	int samplerate = 500000000.0 / idiv / range;
	usleep(10);
	IO_WRITE(PWM_RNG1, range);
	IO_WRITE(PWM_RNG2, range);
	usleep(10);
	IO_WRITE(PWM_CTL,  PWM_PWEN1 | PWM_PWEN2 | PWM_USEF1 | PWM_USEF2 | PWM_CLRF1);
	
	uint32_t count = 0;
	uint32_t phase = 0;
	while(1) {
		uint32_t offset = (phase >> 8) & 0xFFFFFFFE;
		uint8_t data1 = test_wave[offset + 0];
		uint8_t data2 = test_wave[offset + 1];
		phase += 512;
		IO_WRITE(PWM_FIF1, data1);
		while(IO_READ(PWM_STA) & PWM_FULL1) {}
		IO_WRITE(PWM_FIF1, data2);
		while(IO_READ(PWM_STA) & PWM_FULL1) {}
		count++;
		if((count % 0x1000) == 0) {
			uart_debug_puts("data1=\n", data1);
		}
	}
}

```

即値があっていやな感じですが、イヤホンジャックをPWMの出力として設定PLLDから分周比設定して、チャンネルレンジを考慮してtest.binからLEFT, PWMのRIGHTそれぞれPCMデータをFIFOにどんどん詰めていく、という単純なものです。
そこそこきれいな音が出ます。ただ鳴らすだけなら十分だと思います。

こいつを適当なcore1とかで実行して、core0側は別なことをできれば～と思ってたんですが、力尽きました。


# 終わりに
なんか今年はラズベリーパイを使ってもっと変なことをする、というところまで手が回らなかったような気がします。
来年はリベンジしたいです。


# おまけ - 開発環境について
やっすいカーナビのアナログTV(1200円くらい)と、HDMI -> AV変換(500円)がとても便利です。
写真の通りなのですが、実にコンパクトな環境が構築できます。3000円程度で機材が手に入るので、ぜひ。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/34428/874e87a7-43ad-257e-449a-ec76ad3f5fd5.png)

※地べたにおいてるのは床暖房を全身に受けながら作業したかったからです

終わりです！
バイナリファイルの分割結合


# 分割 (split)

#### 詳細は

```
man split
```

#### srcを30MBずつに分割

```
split -b 30M src dst.
```

```
dst.aa
dst.ab
...
dst.zz
```


#### suffixを数字に指定 (-d)

```
split -d -b 30M src dst.
```

```
dst.01
dst.02
...
dst.99
```

#### suffixの桁数を指定 (-a)

```
split -a 3 -d -b 30M src dst.
```

```
dst.001
dst.002
...
dst.999
```

# 結合

普通にcatで結合

```
cat dst.* > dst
```

# 例 (分割 & 結合)

```
$ ls -lh # カレントディレクトリに100MBのsrcというファイルがある
total 100M
-rw-r--r-- 1 usr grp 100M Dec 21 06:25 src

$ split -b 30M src dst. # srcを30MBずつに分割

$ ls -lh
total 100M
-rw-r--r-- 1 usr grp  30M Dec 21 06:29 dst.aa
-rw-r--r-- 1 usr grp  30M Dec 21 06:29 dst.ab
-rw-r--r-- 1 usr grp  30M Dec 21 06:29 dst.ac
-rw-r--r-- 1 usr grp  10M Dec 21 06:29 dst.ad
-rw-r--r-- 1 usr grp 100M Dec 21 06:25 src

$ cat dst.* > dst # 結合

$ ls -lh
total 300M
-rw-r--r-- 1 usr grp 100M Dec 21 06:29 dst
-rw-r--r-- 1 usr grp  30M Dec 21 06:29 dst.aa
-rw-r--r-- 1 usr grp  30M Dec 21 06:29 dst.ab
-rw-r--r-- 1 usr grp  30M Dec 21 06:29 dst.ac
-rw-r--r-- 1 usr grp  10M Dec 21 06:29 dst.ad
-rw-r--r-- 1 usr grp 100M Dec 21 06:25 src

$ md5sum src dst # 正しく分割結合できているか確認
2f282b84e7e608d5852449ed940bfc51  src
2f282b84e7e608d5852449ed940bfc51  dst
```
vueファイルをauto formatしたい

したくない？

## 2018.1.10 追記
Prettier 1.10で公式にvueファイルがサポートされるもよう。
遠からずサポートされるとは思ってたけど、思ったよりも早かった。
https://github.com/prettier/prettier/pull/3563

## format.js
なのでちょっとしたスクリプトを用意しました。prettierを使ってVueファイルにフォーマットかけるやつです。

[Vueファイルをフォーマットするやつ](https://gist.github.com/wonderful-panda/c63a574d07921df9240e0bce2b5d7314)

### インストール方法(というほどでもないけど)

依存関係をインストールして、上のファイルを適当な場所に置く

```console
> npm install prettier glob chalk -D
```

### 使い方

こんな感じで処理対象のファイルを指定する(複数可)

```console
> node ./format.js "src/**/*.{vue,js}" "test/**/*.js"
```

### 仕様
*.vue以外のファイルは、単にprettierに処理を任せる。
*.vueについては、`<script>`タグと`<style>`タグの中身に対してそれぞれprettierを適用する。
適用結果はそのままファイルに上書きする(`prettier --write` 相当)

### 注意事項
タグの切り出しは正規表現で雑にやってるだけなので、こんな感じの意地悪データを食わせると普通に死にます。

```text
<script>
/*
</script>
*/
export default {
  ...
}
</script>
```

lang (`<script lang="これ">`) の値については、それを拡張子として追加したファイル名をprettierに渡しているので、それがprettierにとってWell-knownである必要があります。

知らないフォーマットが来たらいさぎよく死にます。

### いろいろ

#### Q. Vetur(vue-language-service)のAuto formatting機能を使えばよいのでは？
使ってます。
ただ、エディタの機能を使うのはいいけどエディタの機能に依存するのは避けたいというのと、npmスクリプトから呼びたいのでCLIで動いてほしいというのがあります。

#### Q. eslint + eslint-plugin-vue でよいのでは？
上の通りVeturと併用していて、Veturがデフォルトでprettierを使うのでそれと合わせておきたいのと、eslint + typescriptの組み合わせでインデントの扱いが一部おかしいところがあるので、eslintはlintだけにして、フォーマットはprettierでするようにしています。

#### Q. 他にいい方法は？
ここを見ると、いろんな人がいろんなやり方でやっていて参考になります。
[Vue support](https://github.com/prettier/prettier/issues/2097)
サイトをリッチにするjQueryライブラリの紹介

こちらは[ウェブクルー Advent Calender 2017](https://qiita.com/advent-calendar/2017/webcrew)の21日目の記事です。
昨日は、[@da-shi](https://qiita.com/da-shi)さんの「[RailsAdminを使ってみた](https://qiita.com/da-shi/items/aa76afdea3c528a9b128)」でした。


# はじめに
サイトをリッチにすることで何がしたいのかといいますと
・ コンバージョン率を上げたい
・ 直帰率、離脱率を下げたい
上記を改善する案としてユーザーへわかりやすく、直感的にさり気なく伝えることが課題にになります。
他にもいろいろ原因はあってリッチにすることも原因だったりするのですが
ここではユーザーの目にとまるような動きを付けたりすることができるjQueryライブラリを紹介したいと思います。


## 通知系
* [iziToast](http://izitoast.marcelodolce.com/)
様々な用途で使えるリッチな通知パネルが用意されています


* [alertifyjs](http://alertifyjs.com/)
様々な用途で使える見栄えの良い通知パネルが用意されています


* [Intro.js](https://introjs.com/)
ページのチュートリアルを簡単に作成できます


* [Push.js](https://pushjs.org/)
ブラウザからのプッシュ通知を作成できます


## モーダル系
* [iziModal](http://izimodal.marcelodolce.com/)
様々な用途で使えるリッチなモーダルが用意されています


* [Modaal](http://humaan.com/modaal/)
アクセシビリティの高いモーダルを作成できます


## スクロール系
* [Barba.js](http://barbajs.org/index.html)
シームレスなページ遷移を実現できます


* [Scrollify](https://projects.lukehaas.me/scrollify/)
セクションこどのスムーズなスクロールを実現できます


* [Infinite Scroll](https://infinite-scroll.com/)
無限スクロールを簡単に実装できます


## チャート・グラフ系
* [Highcharts](https://www.highcharts.com/)
様々な用途で使えるリッチなチャートやグラフが用意されています


* [Chart.js](http://www.chartjs.org/)
軽単にチャートやグラフを作成できます


## アニメーション系
* [anime.js](http://animejs.com/)
軽量なうえ簡単にアニメーションが作成できます


* [p5.js](https://p5js.org/)
ビジュアルプログラミングができます


# まとめ
現状のサイトが何を伝えたいのか何が足りないのかを把握し、
補う機能として紹介したライブラリで課題解決ができればと思います。
しかしリッチにすることでパフォーマンスが落ち直帰率・離脱率が上がる懸念もありますので注意してください。
各ライブラリですが利用前に無料、有料、商用利用の可否などライセンスの確認をしてください。
実装方法もライブラリにより違いますのでその辺りは各ライブラリのドキュメントをお読みください。
実用的なライブラリはまだまだたくさんありますので用途に合わせて探してみてください。
より良いサイトにするために頑張りましょう。

明日の担当は[@wc_tanaka_rin](https://qiita.com/wc_tanaka_rin)さんになります。
宜しくお願いします。
Merry Christmas Status

नमस्ते दोस्तों मै श्वेता परमार , जैसा कि आप सब जानते हो आज कल सब <a href="https://reallifejokes.com/merry-christmas-status/">Merry Christmas status</a> गूगल पर सर्च करते है तो हम आपके लिए Latest Merry Christmas Status लाये है |
Protractorで爆速sendKeys

こんにちは。Qiita見る歴3年くらいの @mumum です。
記事を書くのは初めてなので、なまあたたかく見てみてください。

#はじめに
##これはなに？
ここを見てくださっているかたは多分ご存じSeleniumのAngular(JS)向けフレームワークProtractorを使ったe2eUI自動テストに関する、コストパフォーマンス改善の記録をコードを交えて説明させていただきます。
最後まで読むと文字入力部分のテスト時間の短縮方法がわかります。

#前提
##テスト対象
AngularJSで書かれたソフトウェアのUI
##テストツール・環境
Windowsで、[Protractor](http://www.protractortest.org/#/)上で書いたテストケースをchromedriverで実行しています。
##テストフロー
テスト対象のUIにinput要素が10000個あるのでそれぞれに、1000キャラクタの文字列を入力していきます。

#sendKeys遅い問題
実際に上記条件でテストを走らせると、各input要素への文字入力のところが異常に（手入力よりも）遅いことが確認できました。
文字入力の部分は、Protractorのフレームワークに沿って以下のように書いていました。

```javascript
$("input要素セレクタ").sendKeys("1000キャラクタの文字列");
```
`sendKeys`の処理が遅いとあたりをつけ、何か回避策はないかと調べてみると、[Stackoverflowに似たような問題に関する質問](https://stackoverflow.com/questions/25689090/is-there-any-way-to-optimize-speed-up-the-sending-of-data-to-a-ui-with-protrac)が出ていました。
そこでは、解決方法として、AngularJSをHackする方法を採用していましたが、そのほかの解決案としてクリップボードを活用してコピペする案も書かれていました。
ただ、コピペをするのは`This may require doing a bunch of fancy footwork, like using Flash`ということでリスク高いので採用はしないと書かれていました。
#コピペで回避
しかしテストコードがテスト対象に強く依存するのは個人的に避けたかったので、今回は上でいうところのそのほかの解決案を採用することにしました。
幸い現在は[ブラウザネイティブでクリップボードにアクセス出来るAPI](https://developers.google.com/web/updates/2015/04/cut-and-copy-commands)があるので、それを使えば大丈夫ということで、コピペで回避することにしました。
##実装
[APIの仕様策定した人のブログ](http://www.whatcouldbewrong.com/articles/html5-clipboard-support/)によると、このAPI(`document.execCommand()`)はユーザーによってトリガーされたイベントから呼ばれないといけないみたいなので、以下のフローでコード実装することにしました。
###フロー
1. 画面上に入力テキストを持たせるDOM(`$(#placeholder)`)作る
2. `$(#placeholder)`にクリックイベント登録する
  1. `$("#placeholder")`のテキスト全選択
  2. `document.execCommand("copy")`
3. `$(#placeholder)`に入力テキスト入れる
4. `$(#placeholder)`をクリックさせてコピーとる
5. `$("input要素セレクタ")`にフォーカス移して、`ctrl+V`する

※直接DOMを弄るのはProtractorではできないので、`browser.executeScript()`を使いました。。

###コード
```javascript
async () => {
  await browser.executeScript(createDom);
  await browser.executeScript(pasteText, "1000キャラクタの入力テキスト");
  await $("placeholder").click();
  await $("input要素セレクタ").click();
  await browser.driver.actions.keyDown(Key.CONTROL).sendKeys("v").keyUp(Key.CONTROL).perform();
  await browser.executeScript(deleteDom);
}


function createDom() {
  const dom = document.createElement();
  dom.id = "placeholder";
  document.body.appendChild(dom);
  dom.addEventListener("click", clickEvent);
}
function clickEvent() {
  const dom = document.getElementById("placeholder");
  document.getSelection().selectAllChildren(dom);
  document.execCommand("copy");
}
function pasteText(pasteStr) {
  const dom = document.getElementById("placeholder");
  dom.textContent = pasteStr;
}
function deleteDom() {
  const dom = document.getElementById("placeholder");
  document.body.removeChild(dom);
}
```

#結果
10000個のうち最初の100個のinput要素に対して、それぞれ1000キャラクタの文字列を入力していく処理に対してとった結果：

|コピペ前|コピペ後|
|:---:|:---:|
|1.5時間|3分|
98%の時間短縮になりました😎

#おわりに
~~途中からほぼProtractorじゃ無くなっているじゃん。。~~とっても早くなりました。
コピーコマンドはユーザーがトリガーするイベントで実行される必要があるみたいですが、$.click()でいけました！>Protractorはユーザーでした。

それでは最後になりましたが、この記事が皆様のソフトウェアテスト時間短縮に役立ち、少しでも楽しくテストできるようになれば幸いです。
YamlDotNetでJSONファイルをデシリアライズする!?

## 背景
プロジェクトでYamlDotNetを使っているのですが、デフォルト設定のデシリアライザでYAMLファイルだけでなくJSONファイルもデシリアライズできるということに気づき、名前からは想像できない挙動に驚いたので簡単な記事にしてTipsとして共有します。

## 環境
YamlDotNetのv4.2.3 を使いました。
プロジェクトはコンソールアプリとして立ち上げました。

## ソースコード
以下のようなJSONファイルをデシリアライズしてみます。

``` json
{
  "Number": 1,
  "Text1": "Hello, World!",
  "Text2": "Hello, YamlDotNet!"
}
```

コードはこんなかんじ。

``` c#
using System;
using System.IO;
using System.Text;
using YamlDotNet.Serialization;

namespace ReadJsonUsingYamlDotNet
{
    class Program
    {
        static void Main(string[] args)
        {
            // デシリアライザをデフォルトの設定で生成
            var builder = new DeserializerBuilder();
            var deserializer = builder.Build();

            // ファイルの内容をSomeObjectにデシリアライズ
            SomeObject deserializedObj = null;
            string filepath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, @"Data\Data.json");
            using (var data = new StreamReader(filepath, Encoding.UTF8))
            {
                deserializedObj = deserializer.Deserialize<SomeObject>(data);
            }

            // 結果をコンソール出力
            Console.WriteLine(string.Format("Number : {0}", deserializedObj.Number));
            Console.WriteLine(string.Format("Text1  : {0}", deserializedObj.Text1));
            Console.WriteLine(string.Format("Text2  : {0}", deserializedObj.Text2));
            Console.ReadKey();
        }
    }

    class SomeObject
    {
        public int Number { get; set; }
        public string Text1 { get; set; }
        public string Text2 { get; set; }
    }
}
```

結果はこんなかんじ。

![2017-12-21_04h44_16.png](https://qiita-image-store.s3.amazonaws.com/0/216033/7c87e9df-7179-b2a2-2fa0-28694547f5b4.png)

## まとめ
ちゃんとJSONファイルをデシリアライズしてくれました。YamlDotNetという名前のくせになんて気が効くんだ...。

## YAMLはJSONのスーパーセット（2020/03/09追記）
こんな記事を見つけたので貼っておきます。
[JSON is YAML, but YAML is not JSON](https://eli.thegreenplace.net/2008/11/22/json-yaml-but-yaml-json)
Raspberry Pi インストールから設定まで細かく詳しく解説(1(OSのインストールまで))

タイトル通りインストールから設定まで細かく解説します。
各項目、細かく説明していますので、知りたい見出しの部分をクリックすれば、その見出しに飛べて調べることができます。

#１.インストールデータを用意
今回は一番有名なRaspbianというOSを利用します。
このサイトに（[https://www.raspberrypi.org/downloads/raspbian/](https://www.raspberrypi.org/downloads/raspbian/)）にRASPBIAN STRETCH WITH DESKTOP　と書いてある所の下に二つのダウンロードボタン（download Zipとdownload Torrent）のどちらかの赤いボタンを押してダウンロードします。
※ZipとTorrentがわからない人はとりあえずZipを選んでください。
<img width="429" alt="スクリーンショット 2017-12-21 1.25.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/149499/103c2623-1040-93a5-c110-d592726084c2.png">

#.SDカードの初期化
今回は、Windows,Macの両方とも使えるSDカードフォーマッターを使用してフォーマットします。（[https://www.sdcard.org/jp/downloads/formatter_4/](https://www.sdcard.org/jp/downloads/formatter_4/)）
こちらのソフトをインストールして画像の設定のままフォーマットのボタンを押してフォーマット完了です。
<img width="426" alt="スクリーンショット 2017-12-21 2.02.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/149499/c517c0e7-d8d4-9382-1651-9fbc0bd06b0e.png">



#.SDカードにインストールデータを移動
次にダウンロードしたデータを開いて中のデータをSDカードに移動させます。
ダウンロードしたZipをそのまま入れても起動しないので、ダブルクリックして解凍し、
<img width="595" alt="スクリーンショット 2017-12-21 2.09.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/149499/09c25027-c166-62ce-41d4-8ca66b442726.png">
<img width="625" alt="スクリーンショット 2017-12-21 2.09.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/149499/56eceb59-149b-51d4-bf88-8620add52298.png">

　　
解凍したデータの中にある、
<img width="598" alt="スクリーンショット 2017-12-21 2.12.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/149499/8ee20e32-98a8-3c64-c7f4-db2b1c62ef52.png">

　　
データを全てSDカードに入れます。
<img width="608" alt="スクリーンショット 2017-12-21 2.10.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/149499/72e825da-4eb6-6c5e-b951-dfb1579a7a8d.png">

　　　　

#.SDカードを挿入、電源を挿して起動
SDカードを挿入、microUSB挿入口に電源の端子を差し込むと自動的に起動します。（Raspberry Pi本体には電源ボタンは無いです）
![IMG_4046.JPG](https://qiita-image-store.s3.amazonaws.com/0/149499/254a59bc-383c-6707-af2e-ec8f57c37190.jpeg)![IMG_4045.JPG](https://qiita-image-store.s3.amazonaws.com/0/149499/d9b017c8-f435-d3f3-ac93-4c0da4e947da.jpeg)



　　　　　
　　　　



　　　
そしたら画面が次のようになったら、Rasbianの方にだけチェックマークをいれ、左上にあるInstallボタンを押します。
するとSDカード上の全てのデータを書き換えますという警告が出ますのでYesを押してインストール開始です。（數十分かかります）
![IMG_4047.JPG](https://qiita-image-store.s3.amazonaws.com/0/149499/0f0b97a8-1fe8-8464-2d37-47a270234dd7.jpeg)![IMG_4048.JPG](https://qiita-image-store.s3.amazonaws.com/0/149499/bdcf5b31-cbc2-0786-cbc3-39cada1ca499.jpeg)

そして下の画面まで行ったらインストールは完了です。
![スクリーンショット 2017-12-21 4.02.08.png](https://qiita-image-store.s3.amazonaws.com/0/149499/92818f39-b6ed-7958-1d8e-58a7e0554643.png)
Google Cloud Functions を使ってみた

名前の通りAWS Lamba + APIGatewayみたいなやつ
記事中のプロジェクト名などは仮

### 環境
MacOS High Sierra 10.13.1
Python 3.6.0 :: Anaconda custom (x86_64) 
npm 5.5.1

### クイックスタート

#### プロジェクトの作製
ここに書いてある手順に従って、
Before you begin の１〜３までやる
https://cloud.google.com/functions/docs/quickstart?hl=ja

#### クラウドコンソールツールをインストール
https://cloud.google.com/sdk/docs/?hl=ja

#### gcloudコンポーネントのインストール
```
$ gcloud components update beta
```
betaというコンポーネントをインストールするらしい
勝手にパス通ったりしないので必要に応じて  google-cloud-sdk/bin/gcloud とかたたく

#### Node.js環境のセットアップ
https://cloud.google.com/nodejs/docs/setup?hl=ja


### Cloud Functionを作る

プロジェクトのディレクトリを作って移動
```
$ mkdir gcf_hello_world
$ cd gcf_hello_world
```

index.js という名前でファイルを作製
```javascript:index.js
/**
 * HTTP Cloud Function.
 *
 * @param {Object} req Cloud Function request context.
 * @param {Object} res Cloud Function response context.
 */
exports.helloGET = function helloGET (req, res) {
  res.send('Hello World!');
};
```

### デプロイ

#### Cloud Strageの準備
ローカル環境からデプロイするためにはCloud Strageにバケットが必要
https://console.cloud.google.com/storage/browser

ここでは myfunction-bucket という名前で作ったとする

#### 関数のデプロイ

プロジェクトのルートディレクトリにおいて以下のコマンドを実行
gcloudへのパスは環境に応じて読替えのこと
```
$ ../google-cloud-sdk/bin/gcloud beta functions deploy helloGET --trigger-http --stage-bucket myfunction-bucket
```
クイックスタートには記述がないがローカル環境から上げる場合は --stage-bucket の指定が必要らしい
（クラウドコンソール使えばいらないのかもだが未確認）

#### 完了
```
Copying file:///var/folders/8w/jt2mlcs55nn6jcylpjzpp7900000gn/T/tmpaqWLvB/fun.zip [Content-Type=application/zip]...
/ [1 files][  258.0 B/  258.0 B]                                                
Operation completed over 1 objects/258.0 B.                                      
Deploying function (may take a while - up to 2 minutes)...done.                
availableMemoryMb: 256
entryPoint: helloGET
httpsTrigger:
  url: https://us-central1-my-function.cloudfunctions.net/helloGET
labels:
  deployment-tool: cli-gcloud
name: projects/my-function/locations/us-central1/functions/helloGET
serviceAccountEmail: my-function@appspot.gserviceaccount.com
sourceArchiveUrl: gs://my-function/us-central1-helloGET-uqkuoyeupard.zip
status: ACTIVE
timeout: 60s
updateTime: '2017-12-20T10:42:35Z'
versionId: '2'
```
デプロイ完了まで１〜２分かかる
urlにアクセスするとHello World!が表示される

### 感想
まぁまぁ手軽に使える
まだBetaなのね
デプロイはちょっと時間かかるなぁ
正規表現を使うときに注意すべきこと

正規表現を使ったときにうまくいかないことがあったのでメモ
いつも正規表現を使っている方にはあたり前のことしか書いていないと思うので、生暖かく見守っていて下さい。

Mac上のPython3.6.2で動作確認しています。
環境によっては文字コードなどの違いで、再現できないかもしれません。


# 文字の範囲を指定するとき
テキストなどを見るとこのように書いてあったりします。

| | 正規表現 | 意味 |
|:-:|:-:|:-:|
|1| [0-9]   | 数字 |
|2| [A-Z]   | アルファベット大文字 |
|3| [a-z]   | アルファベット小文字 |
|4| [A-z]   | アルファベット |
|5| [ぁ-ん] | ひらがな |
|6| [ァ-ヶ] | カタカナ |
|7| [ｦ-ﾟ]   | 半角カタカナ |

## 1. アルファベットにマッチさせる
純粋なアルファベット（A-Zとa-z）にマッチさせたいときに、安易にリストの4番目の `[A-z]` を使おうとするとハマります。

### アルファベットの文字コード
範囲を指定するときの、「範囲」とは文字コードの範囲なのですが、
`[A-z]` の範囲の文字は

```
A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z, [, \\, ], ^, _, `, a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z
```
の58文字です。
これをよく見ると大文字と小文字の間に、以下の６つの記号が含まれています[^1]。  

```
[ \ ] ^ _ `
```
これを知らずに `[A-z]` を使うと、アルファベット以外の文字にマッチしてしまうため、望んだ結果が得られません。  
全角アルファベットのときも同様で、

```
［ ＼ ］ ＾ ＿ ｀
```
これら６つが含まれます。

純粋なアルファベットのみにマッチさせたい場合には、`[A-Za-z]` という表現を使いましょう。
ちなみに、`\w` というメタ文字（環境によっては`¥w`）は `[0-9A-Za-z_]` と同義であり、数字とアンダーバーが含まれているので、純粋アルファベットにマッチさせたい今回の場合は不適。

## 2. ひらがなやカタカナの濁音・半濁音にマッチさせたいとき
例えば "か" 行の濁音にマッチさせたいというときに、安易に `[が-ご]` を使おうとするとハマります。

### ひらがなの文字コード
ひらがなを文字コード順に並べると以下のようになります。

```
ぁ, あ, ぃ, い, ぅ, う, ぇ, え, ぉ, お, か, が, き, ぎ, く, ぐ, け, げ, こ, ご, さ, ざ, し, じ, す, ず, せ, ぜ, そ, ぞ, た, だ, ち, ぢ, っ, つ, づ, て, で, と, ど, な, に, ぬ, ね, の, は, ば, ぱ, ひ, び, ぴ, ふ, ぶ, ぷ, へ, べ, ぺ, ほ, ぼ, ぽ, ま, み, む, め, も, ゃ, や, ゅ, ゆ, ょ, よ, ら, り, る, れ, ろ, ゎ, わ, ゐ, ゑ, を, ん
```
よく見ると、`か, が` のように `かな,　　濁音かな` の順に並んでいることがわかります。
上に書いた `[が-ご]` という正規表現では途中の`き, く, け, こ`という余計な文字を含んでしまうのです。
他の ざ, だ, ば, ぱ 行も同様です。
また、`[ゃ-ょ]` と小文字にマッチさせたいときもこれが起こります。

当初の目的である、"か" 行の濁音にマッチをさせるには、一つずつ実直に `[がぎぐげご]` と書いていくのがいいと思います。
何か他にいい方法を知っている方がいましたら教えてください。

## 3. カタカナにマッチさせたいとき
カタカナのみで構成された単語にマッチさせたいとき、安易に上のリストの６番目 `[ァ-ヶ]` を使おうとするとハマります。

### カタカナの文字コード
ひらがなを文字コード順に並べると以下のようになります。

```
ァ, ア, ィ, イ, ゥ, ウ, ェ, エ, ォ, オ, カ, ガ, キ, ギ, ク, グ, ケ, ゲ, コ, ゴ, サ, ザ, シ, ジ, ス, ズ, セ, ゼ, ソ, ゾ, タ, ダ, チ, ヂ, ッ, ツ, ヅ, テ, デ, ト, ド, ナ, ニ, ヌ, ネ, ノ, ハ, バ, パ, ヒ, ビ, ピ, フ, ブ, プ, ヘ, ベ, ペ, ホ, ボ, ポ, マ, ミ, ム, メ, モ, ャ, ヤ, ュ, ユ, ョ, ヨ, ラ, リ, ル, レ, ロ, ヮ, ワ, ヰ, ヱ, ヲ, ン, ヴ, ヵ, ヶ
```
これの最後にある `ヵ, ヶ` という文字が重要。
これは、「１ヶ月」や「２ヵ所」など、助数詞として使われたり、「八ヶ岳」のように連体助詞「が」の代わりに使われたりするカタカナです。

`ヵ, ヶ` のような文字を含めてしまうことで上のような言葉に含まれるカタカナにマッチしてしまい、カタカナのみで構成される単語ではなくなってしまいます。

マッチさせたくない場合は、`[ァ-ヴ]` とすることで、上の２つのカタカナを除きましょう。
`[ぁ-ん]` のひらがなとは違い、カタカナの場合は `[ァ-ヴ]` です！

その他カタカナには `ヰ, ヱ` も含まれるので、取り除きたかったら文字コードの順番を見ながら書き換えて下さい。

# まとめ
以上、正規表現を使う際に注意すべき点を紹介してきました。
正規表現の範囲指定では、文字コードの順番がそのまま使われるので、文字コードを見て確認しながら書くことが大切です。
goのimagemagickを使ってレンチキュラー写真を作った

どうもGo超初心者です。
[TourOfGo](https://tour.golang.org/list)を最近完了し、何か他のネタでさらに勉強しようとしましたが
[これ](https://www.oreilly.co.jp/books/9784873117522/)とかだと仕事！って感じがして個人的にあんまり机へ向かう気が出てこなかったので
どうせなら、物理的なものと絡ませたらやる気出るのでは？という思いのもと、
**レンチキュラー画像**を作ってみることにしました。

# レンチキュラーとは
> レンチキュラー（lenticular）とは、シート状のレンチキュラーレンズを用いて、見る角度によって絵柄が変化したり、立体感が得られたりする印刷物のことである。数cm角の小型のものから、建物の壁面に取り付けられている広告板などの大型のものまである。裸眼式の3次元ディスプレイにも用いられる。

https://ja.wikipedia.org/wiki/%E3%83%AC%E3%83%B3%E3%83%81%E3%82%AD%E3%83%A5%E3%83%A9%E3%83%BC

こういうやつです。
https://www.youtube.com/watch?v=eqEoSpIldJ0

これを実現するには↓が必要です。
* レンチキュラーレンズ
* レンチキュラー用に加工された画像（紙）

レンチキュラーレンズという特殊なレンズを、それ用に加工された紙に貼るという感じです。

# 準備
imagemagick諸々を入れるのでミドル,goプラグイン両方とも対応。
## imagemagick
```
$ brew install imagemagick
```
## glide
```yaml:glide.yaml
package: lenticular
import:
- package: gopkg.in/gographics/imagick.v3/imagick/types
  version: ^3.1.1
  subpackages:
  - imagick
```
```bash
$ glide install
```
## レンチキュラーレンズ
色々サイトを覗いた結果、一番手頃だったのでここだったので購入（１週間くらいで到着しました）
[レンチ屋さんお試しセット](http://lentiya.com/?p=1121)

*ネットで買う前に文具店やハンズで探してみましたがありませんでした。物理店舗では無いのかな*

# ソースコード
https://github.com/junpayment/lenticular

# 実行
今回はこちらの画像でgopherくんとリアルgopherくんが切り替わるやつを作ろうと思います。
gopher.png
<img src="https://qiita-image-store.s3.amazonaws.com/0/12060/9968209c-5f3f-9d3c-14c4-c37b4232a82e.png" width=50%)>

gopher_real.png
<img src="https://qiita-image-store.s3.amazonaws.com/0/12060/10fe9a2f-5745-e25f-c81d-0a14f0992e99.png" width=50%>


```bash
# 50lpi, 300ppiを指定
$ go run main.go gopher.png gopher_real.png gopher_out.jpg 50 300
```

# 結果
<img src="https://qiita-image-store.s3.amazonaws.com/0/12060/ba28fd4d-3723-2196-14b4-d69bf801aa7a.jpeg" width=50%>

なんだかそれっぽい画像に....!

# レンズをはめてみた
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">goの勉強でレンチキュラーというものを作りました。<br>明らかに失敗。 <a href="https://t.co/9Z3B4gN0Rn">pic.twitter.com/9Z3B4gN0Rn</a></p>&mdash; junpayment (@junpayment) <a href="https://twitter.com/junpayment/status/943546310967177216?ref_src=twsrc%5Etfw">2017年12月20日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 原因
おそらくレンズを写真に貼るときに斜めにずれた為だと思います。
リアルgopherくんは、シマシマながらちゃんと映ってたので、写真生成自体までは間違ってない（はず）

今度頑張ろう。


以上です。
PHPで特定の一文字を削除する

ダメ文字を削除するときに遠回りで作業したことをふと思い出したので戒めのメモ。

例）「㴘㵈㔭䖽㪓䁢㻩㠱䠨㶬㩡㐕䞉㘉䃯䄰䯈䍡䛸䤥」この中の文字が含まれていたら削除する。

# 遠回りな方法

```php
$str = '䛸置換対象文字列㔭';// 置換対象文字列
$target_character = '㴘㵈㔭䖽㪓䁢㻩㠱䠨㶬㩡㐕䞉㘉䃯䄰䯈䍡䛸䤥';// 置換する文字
$character_list = preg_split('//u', $target_character, null, PREG_SPLIT_NO_EMPTY);// 置換する文字を1文字ずつ配列に分ける
$result = str_replace($character_list, '', $str);
var_dump($result);// string(21) "置換対象文字列"
```

# 近道な方法

```php
$str = '䛸置換対象文字列㔭';// 置換対象文字列
$result = mb_ereg_replace('[㴘㵈㔭䖽㪓䁢㻩㠱䠨㶬㩡㐕䞉㘉䃯䄰䯈䍡䛸䤥]', '', $str);
var_dump($result);// string(21) "置換対象文字列"
```

# 参考

[preg_split](http://php.net/manual/ja/function.preg-split.php)
[mb_ereg_replace](http://php.net/manual/ja/function.mb-ereg-replace.php)
マルチカメラシーケンスが便利すぎる

インタヴューやイベント、ライブの撮影で複数のカメラを駆使し多アングルで撮影することがあるかと思います。
撮影までは順調に終わりいざ編集！となった際に、

1. 各クリップの音を合わせる
2. なんとなく各クリップが今どんな画を想像しながら、残したい画以外のクリップを一個ずつカットしていく。
3. なんか違ったら、`cmd + z` を連打し、戻ってやり直し

2 ~ 3を繰り返して、やっとカット割り終わり
みたいなことをしているかと思います。 
少なくとも自分は今までそうしていました。。。(情弱の極み)

これだと、2 ~ 3カメであったり少ない台数かつ全カメラ固定されている場合はいうほど苦ではないのですが、
基本的に台数が増えれば増えるほど、各カメラがフリースタイルなムーブを繰り出していればいるほど、
苦行レベルは上がって行きます。

これまでそんな苦行を乗り越えてきた方に朗報です。

Premireにはマルチカメラシーケンスというシーケンス形式があります。
これを駆使すれば、指定したタイムラインで各カメラどういう画が映っているのか一目でわかります。
<img width="355" alt="Screen Shot 2017-12-21 at 3.11.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/39342/a57a7ae6-c07a-282a-abf3-86e7e6ec1585.png">



## やり方
今回は音同期済みのタイムラインをマルチカメラシーケンスに変える方法をご紹介します。
(ビンの中のクリップを自動でそれらの音を同期させてマルチカメラシーケンスにする方法もありますが、今回は都合上それをしませんでした。)

1. マルチカメラシーケンスにしたいクリップを選択
<img width="1144" alt="Screen Shot 2017-12-21 at 2.29.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/39342/54250527-b98e-4f6c-9fec-f96ba8d07cf8.png">


2. ネスト化
<img width="1199" alt="Screen Shot 2017-12-21 at 2.38.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/39342/5e93e4d1-cb68-db32-cbe6-1751fcacde7f.png">

3. マルチカメラ有効
<img width="584" alt="Screen Shot 2017-12-21 at 2.39.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/39342/10541795-ef04-f767-6f6b-eb0da741114b.png">

これでマルチカメラシーケンスが出来上がります。
そのシーケンスをダブルクリックすると、ソースモニターには、各カメラの画がプログラムモニターには、選択されている画が表示されます。
(黄色の枠は選択されているクリップ)
<img width="1435" alt="Screen Shot 2017-12-21 at 2.49.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/39342/0c8702ba-8936-b8d0-1751-40db09c36d92.png">


モニターの `設定 -> ソースとプログラムモニタの連動` をオンにすると、タイムラインに合わせてソースとプログラムモニタが表示されるので、大変便利です。

ソースモニターに表示されている各クリップを選択すると、タイムラインの反映されるので、
お好みのところでマルチカメラシーケンスをカットして、
そのカットのカメラを選択するだけで、編集することができます。
便利！！！

## まとめ
とメリットづくしな機能なのですが、もちろんデメリットもあります。
それは、とにかく処理が重たい！！！
プレヴューの画質を1/8まで落としても7カメ(内3台4K)、かなりカクつきます。(MBP 15inc使用)

なので、自分はあくまで確認用にマルチカメラシーケンスを作っておいて、
参考にしたい時だけ、ポチポチ動かしたりすることにしました...(iMac pro欲しい...)

## 最後に
実は本業はエンジニアでして、とにかくものづくりが好きな方ぜひ、お話して見ませんか？
弊社では、[ものづくりを愛しているエンジニアを募集](https://www.green-japan.com/job/55412)しております！
ぜひ！