OmniAICreator/Qiita-1.07M huggingface dataset:
研究で使うFFmpegコマンドまとめ

# 連番画像(label_image064.png, label_image065.png, ...)から動画を作成
```
ffmpeg -r 30 -start_number 64 -i image%03d.png -vcodec libx264 -pix_fmt yuv420p -r 60 out.mp4
```

# 動画から連番画像を生成
```
ffmpeg -i input.mp4 -vcodec jpg %05d.jpg
```

# ２つの動画(1.mp4，2.mp4)を上下で結合
```
 ffmpeg -i 1.mp4 -i 2.mp4 -filter_complex "vstack" out.mp4
```

# ２つの動画(1.mp4，2.mp4)を左右で結合
```
ffmpeg -i 1.mp4 -i 2.mp4 -filter_complex "hstack" out.mp4
```

#640x480(6:4)の左右に107pixelずつ黒帯を付け、854x480(16:9)で出力
```
ffmpeg -i input.mp4 -vf "pad=854:0:107:0" output.mp4
```

# 2つの動画(1.mp4 2.mp4)を時間方向に結合
```
ffmpeg -f concat -safe 0 -i "video_list.txt" -c copy -movflags +faststart out.mp4
```
```txt:video_list.txt
file '1.mp4'
file '2.mp4'
```

# 動画を高品質なGIF画像に書き出し
```
ffmpeg -i input.mp4 -filter_complex "[0:v] fps=10,split [a][b];[a] palettegen [p];[b][p] paletteuse" output-palette.gif
```

# 画質を低下させずに動画をクロップ
```txt:input=1920x1080,output=9x16動画
ffmpeg -i input.mp4 -vf crop=w=607:h=1080 -qscale 1 output.mp4
```

（2018.09.19追記）
上下・左右結合をそれぞれ`vstack`，`hstack`に変更
Amazon EFSをEC2でマウントしてみる

# 目的
Amazon EFSを作成しても、マウントしてファイルを格納しなきゃ意味がないので、
EC2でのマウントの仕方を書いてみます。

環境
Amazon Linux AMI release 2018.03

# EC2へのマウント方法
①マウントを行うEC2を起動し、ログインする。

②マネージメントコンソールより対象のEFSの詳細を開く。

③Amazon EC2　のマウント手順というリンクがあるので、クリックする。
<img width="1237" alt="スクリーンショット 2018-08-27 0.20.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/282630/94ce549d-fcaf-05e4-911d-abaca85a0636.png">

④ファイルシステムのマウントが表示されるので記載されているコマンドをコピーし、EC2上で実行する。
　　（今回はNFSクライアントを使用。）
<img width="973" alt="スクリーンショット 2018-08-27 0.30.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/282630/965d0349-dc59-b73a-5f2a-4976e6c3ce15.png">


⑤マウントできたか確認する。

```
[ec2-user@ip-xxx-xxx-xxx-xxx /]$ df -h
ファイルシス                                   サイズ  使用  残り 使用% マウント位置
devtmpfs                                         470M   52K  470M    1% /dev
tmpfs                                            480M     0  480M    0% /dev/shm
/dev/nvme0n1p1                                   7.8G  1.1G  6.7G   14% /
fs-xxxxxxxx.efs.ap-northeast-1.amazonaws.com:/   8.0E 1000M  8.0E    1% /efs
```

できた！ただマウントするだけなので楽ちん。


# おまけ
今回はマネージメントコンソールに表示されたコマンドをそのままコピペしたが
Blackbeltを読むと推奨オプションがあるらしい。

https://www.slideshare.net/AmazonWebServicesJapan/20180704-aws-black-belt-online-seminar-amazon-elastic-file-system-amazon-efs-201889-update

今回の場合だとこんな感じかと。

```
$ sudo mount -t nfs4 -o nfsvers=4.1,rsize=1048576,wsize=1048576,hard,timeo=600,retrans=2,async fs-xxxxxxxx.efs.ap-northeast-1.amazonaws.com:/ efs

```

実際に検証したところ、マネージメントコンソールに書かれていたオプションよりも
ファイルアクセスの時間が短縮された。
Nuxt.jsでページ遷移ごとに共通の処理を実行する方法

NuxtでWebアプリケーションを作っている際、ページを移動するたびに共通の処理を行いたい、ということがあると思います。

- ログイン状態をチェックして未ログインの場合はリダイレクト
- グローバルメニューを閉じる
- 遷移先に応じたstateの変更

などなど。それらの実装方法について共有したいと思います。
# 手順
Nuxtではルーティングにvuex-routerが用いられています。そのためページ遷移ごとの共通処理はvuex-routerのオプションを用いる形で実装します。ファイル名はなんでもOKですが、pluginsディレクトリ以下にファイルを作成します。

## pluginsファイルの追加
```js:plugins/routerOption.js
export default async ({ app }) => {
  app.router.afterEach((to, from) => {
    // ページ遷移ごとに行いたい処理
  });
};
```
## nuxt.config.jsへのプラグインの追加
上で作成したファイルをpluginとしてNuxtに読み込みます。既に他にpluginsを設定している場合は追加する形で記載します。

```js:nuxt.config.js
module.exports = {
  //　省略
  plugins: [{ src: '~/plugins/routerOption.js', ssr: false }]
  //　省略
};
```
これであとは実装したい機能をぽちぽち書いていけばOKです。
###　補足
利用可能なcallbackなどを[vuex-routerの公式](https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards)で参照してみると、欲しい機能を見つけやすいと思います。
# storeの情報を使いたい場合
大体の場合はページ遷移時の共通処理にstateを参照したり、actionを実行したいというケースでしょう。
そんなときは単純に引数にstoreを追加すればOKです。
以下はページ遷移のたびにグローバルメニューを閉じるという処理を実装する場合の例です。

```js:plugins/routerOption.js
export default async ({ app, store }) => {
  app.router.afterEach((to, from) => {
    store.dispatch('closeGuide');
  });
};
```
#　まとめ
気になった点、記載の誤りなどを見かけましたら、ご指摘いただけますと助かります。
閲覧いただき、ありがとうございました。
TouchDesignerのプロジェクトでexternal toxがバグったパターン


BRDGとMetroで制作時に遭遇したトラブルを列挙しました。
主にexternal toxでリンクしたcontainer周りが多かったです。

## 症状その1. 起動時にIn CHOPの値を取り損ねる
『よし、できた』と思ったBase　Containerを入れ込んだtoeファイルを共同作業者に
gitからpullしてtoeを起動てもらうと動かない。よく見るとContainerの右上に赤い罰マークが。
Containerを一回左の×ボタンで止めて再度cookすると何事もなかったかのように動く。
ただtoeを再起動してもまた右上に赤の×マークがついて動かない。

### 原因： しょっぱな、In CHOPに値が来てなかった
ノードプログラミングでよく問題になる『**実行順**』が絡んでいるようです。
森岡の場合、『実行順の関係上、In CHOPの入力元が生成されていないのにContainer内でそのCHOPのチャンネルを利用していた』というのでエラーを吐いていました。

### 対策：In CHOPに初期値を入れた
In CHOPのInput 2はInput 1に値が来てない時にOutされるデフォルト値になります。
Constant CHOPでIn CHOP用のデフォルト値を作ったところ、エラーが出なくなりました。
![キャプチャ5.PNG](https://qiita-image-store.s3.amazonaws.com/0/152718/4a4feafa-4ab9-ed71-7543-67a66f6200b8.png)

## 症状その2. 起動時にParameter CHOPの値とPythonの値を取り損ねる
『よし、できた』と思ったBase　Containerを入れ込んだtoeファイルを共同作業者に
gitからpullしてtoeを起動てもらうと動かない。よく見るとContainerの右上に赤い罰マークが。
Containerを一回左の×ボタンで止めて再度cookすると何事もなかったかのように動く。
ただtoeを再起動してもまた右上に赤の×マークがついて動かない。

・・・『症状その1と同じか？』と思ってたら微妙に違いました。

### 原因：しょっぱなのPythonがうまく動いてない、Parameter CHOPが一発目に正しい値をとって来れてない
ただ、おそらく原因は同じで『**実行順**』が絡んでいるようです。
ExportしたCHOPの値（op('hogehoge')[chan1]）みたいなところでエラーが出てる場合と、ContainerのPanelで設定した値が一発目で取れておらずエラーになっている場合の2通りありました。
よくFeedback TOPのReset Pulse取り損ねているのもこのあたりが関係してそう。

### 対策：Constant CHOPとReplace CHOPを差し込んだ
Constant CHOPで来る予定のパラメータの初期値を制作、Replaceで1フレーム目以降で正しくParameter CHOPおよびPythonから値が取れるまでの間も何かしらの値が来るように修正したところ、エラーがでなくなりました。
![キャプチャ6.PNG](https://qiita-image-store.s3.amazonaws.com/0/152718/fd99714c-b609-6c3e-9245-e16a48beccd3.png)

## 症状その3. Composite TOPが動かなくなる
『よし、できた』と思ったBase　Containerを入れ込んだtoeファイルを共同作業者に
gitからpullしてtoeを起動てもらうと動かない。
エラーは出てないが、明らかに絵が変。
というかComposite TOPが動いてなくね？

### 原因：バグ・・・？
理由はよくわかりません・・・。

### 対策：Over TOPなど代替可能なものに差し替え
幸い、Add TOPやOver TOPなど代替可能なOPがあったので差し替えて対応しました。
React.js 入門

React.jsというものがどうゆうものか触ってみました。
ここはReact.jsを１ファイルでとりあえず書いてみようとしたときのメモになります。

React.jsって結構使うモジュールやらなにやら種類と数があって、０からマジメに環境準備していくと大変です。
お手軽にちゃんとした環境を用意するなら「**create-react-app**」を入れるのが一番てっとり早かったです↓
[コマンド一発でReactの開発環境を構築してくれるFacebook製ツール「create-react-app」](https://mae.chab.in/archives/2910)

## React.js とは
React.jsはMVCでいうところのViewを担っている部分。
と言われてもよくわからずいろいろググりました。そしたら用語が増えてさらに混乱しました(笑)
自分が特に混乱したものを中心に記載しておきます。

- バージョンについて

react.jsのバージョンは v0.13,v0.14 → **v15.0**（**急に「0.」がなくなる！！**） とあがっています(2018/8/26現在)。
最新バージョンを調べてv15.0かと思いながら、他の皆様が書いてるチュートリアルや入門系のコードを見るとv0.14とかのも多く、
え！？かなり古いのか！？と一瞬焦りましたが、単にバージョンの表記の仕方が変わっただけのようです。

以降はソースをベースに（とりあえずこれコピペすればReactを試せます）

```react:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"></script>
</head>
<body>
  <div id="content"></div>

  <script type="text/babel">
    ReactDOM.render(
        <h1>Hello, World</h1>,
        document.getElementById('content')
    );
  </script>
</body>
</html>
```

- URLについて

```
<script src="https://cdnjs.〜
```

何もDL、インストールしなくてもこちらのURLから最低限必要なモジュールは取ってこれます。
個人用とかであればまずはこれで良いかと。

- react-dom とは

```
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>

〜

ReactDOM.render(
```

描画をする際に「ReactDOM.render()」が必要になってくるので、セットで「react-dom」も定義しておかないといけないです。

- Babel とは

なんで急にbabelとな！？となりましたが、これはJSXのコンパイルに必要なモジュールになります。
JSXとはhtmlのタグっぽくJSを書けるものでして、これもreactを使う際にはほぼ必須のモジュールになると思われます。

```jsx
ReactDOM.render(
    <h1>Hello, World</h1>,    // ← html(のタグ風に書けるのがJSXのおかげ)
    document.getElementById('content')
);
```

JSXを使わない書き方も乗せてればわかりやすいんですが、使わないと可読性がグッと下がり、ほぼほぼReact.js関連の情報では使われているので逆に使わないやり方を探すのがめんどくさいです。

ちなみに、

```jsx
ReactDOM.render(
    <h1>Hello, World</h1>
    <p>これはNG!!</p>,　
    document.getElementById('content')
);
```

あくまでhtmlっぽくかけるだけであって、
renderの第一引数は**１つのタグでまとまっていないと**いけない。
そのため、複数のタグを書くためには

```jsx
ReactDOM.render(
    <div>
      <h1>Hello, World</h1>
      <p>これはOK</p>
    </div>,
    document.getElementById('content')
);
```

このように（divタグでまとまってる）する必要があります。
とりあえず１ペラで試すところは以上です。
slackAPIを活用していくメモ

業務上のチャットツールとしてslackを使用しているのだが、
それをもっと有効活用できないか？ということで、
slackAPIに関する学習を始めたので、
自分のための学習記録として、記事を残そうと思う。

今回は、初投稿なので、
テストも兼ねて、簡単に概要と目標をまとめる。

* そもそもslackとは？

https://slack.com/intl/ja-jp

いわゆるビジネスチャットツールの一種。
部屋を目的別に作れたり、ファイルを共有できたり、通話もできたりといったもの。
外部のサービスと連携したり、
APIを利用してオリジナルのツールを作成したりできる。

* 目指すもの

slackApiを活用したシステムを作り、業務の効率化をめざす。
理想はChatOps(チャットツールを活用した、業務フローの効率化)の導入。
当面は、実際に採用されるかはいったん置いておいて、
どのようなことができるか、どういった効率化が見込めるかを
調査・検証していく。


* 次回へ向けて

ひとまず、
incoming webhooks
outgoing webhooks
この辺りを使うことで、
外部からslackへの書き込み、
slackから外部への通信ができるらしいので、
それらを使って、外部ツールとの連携を目指す。
新技術をチームに浸透させるためにやってること

# はじめに
フィリピンで新人教育をしていて効果的に感じている手法です。
新人教育だけでなく、既存チームに新技術を導入する際にも
有効だと思うのでタイトルはチーム向けにしました。

これまで新技術導入する際に、説明して手順書やマニュアルを展開してましたが、
そうすると、以下のような問題が起きがち

- 学習が受動的になりがち（自ら調べない人もいる）
- 限定的な理解（「記載されているケース」には対応できるが応用が効かない）

同じような悩みを持った人の参考になればいいなと思います。

新技術とは何でもいいのですが、ここでは例として
***「開発環境へのDockerの導入」***とします。

# やること
1. お題を出してプレゼンをさせる
(例)Dockerとは何か？　VMとどう違うのか？

2. GD（グループディスカッション）
(例)開発環境を、「Dockerで構築」と「ローカルで構築」の違い（メリット）は？

3. 実際に利用する/手を動かす（マニュアル利用/練習問題など）

ポイントは、利用する前に「プレゼン・GD」を実施することです。

# ※プレゼンが重要な理由（GDも同様）

```
1. 発表させること
2. みんなで同じお題について発表すること
3. 最後にフィードバックをすること
```

1. 発表させること
限られた時間で調べ、様々な内容を整理するのでインプットとアウトプットを同時にできます。
発表があるために適当にせずに~~サボれない~~緊張感をもって取り組めます。
特に何が重要か、そうではないのかといったポイントを掴めるようになります。

2. みんなで同じお題について発表すること
毎回同じ内容を発表をすると飽きてしまうかもしれませんが我慢。笑
似通った内容であっても個々に違いが出てくるので、
・指導者側は、個々の理解度が判明できる
・発表者側は、自分の不足分の補足、違う表現による理解など
がといったことが期待できます。
ただ、経験上５回以上同じ内容だと飽きるので、人数多い場合はペアで発表するなどすると良いです。

3. 最後のフィードバックをすること
誤った理解、厚く説明したい内容が生まれると思うので補足しましょう。
発表までに基礎知識がついているので、フィードバックの理解力が高いのが利点です。
また、どこまで理解している/していないのか発表で掴めているので的確にアドバイスがしやすいです。

# 最後に
冒頭に記載したように「これすごくいいからやろう、資料もあるから！」
だと、よくわからずモチベーションが上がらないのかもしれない。
プレゼン・GDで主体的に取り組むことが大切だと思います。

問題点は、「みんなでプレゼンやGDをする時間を設けられるか」ではないでしょうか？
そんなことやる時間はない。となりそうですが最初の基礎があるとその先の応用もしやすいので
時間をとる価値は十分にあると思います。

ちなみに自ら興味持ってガンガン進める人やチームは勝手に成長していくので不要かと思います。

他に良い方法や意見があれば教えてくださいm(_ _)m
Alibaba Cloud ：Function ComputeとAPI Gatewayをさわってみた


Alibaba CloudのFunction ComputeとAPI Gatewayをちょっとさわってみました。


# 作業概要
1. Functionを作成する
2. APIを作成する
3. 動作確認

# 1. Functionを作成する

Alibaba CloudのコンソールからFunction Computeを選択して、Functionを作成します。

apigateway用のテンプレートを選択します。

　　<img width="292" alt="f1.png" src="https://qiita-image-store.s3.amazonaws.com/0/192584/bd5093a1-3d8a-77fa-f0a2-dbee41be0c52.png">


テンプレートのコードを修正して、Query Stringで名前を指定したら
　Hello *名前*
とレスポンスを返すようにします。

```python
import logging
import json

def handler(event, context):
  jc = json.loads(event)
  name = jc['queryParameters']['name']

  content = "Hello " + name
  api_rep = {
    "isBase64Encoded":"false",
    "statusCode":"200",
    "body":content
  }
  return json.dumps(api_rep)
```

テストイベントでQuery Stringを指定して、テストして成功することを確認します。

　　<img width="647" alt="f5.png" src="https://qiita-image-store.s3.amazonaws.com/0/192584/9a91f7d8-f894-7e93-e47b-3507465f607f.png">

　　<img width="296" alt="f6.png" src="https://qiita-image-store.s3.amazonaws.com/0/192584/2d510647-44ab-bd0c-dd72-8aefdec3d001.png">

# 2. APIを作成する

Alibaba CloudのコンソールからAPI Gatewayを選択してAPIを作成します。

まずはAPIグループを作成します。

　　<img width="638" alt="a1.png" src="https://qiita-image-store.s3.amazonaws.com/0/192584/181913c9-e789-b311-bd16-e8286cc53b05.png">

　　<img width="915" alt="a2.png" src="https://qiita-image-store.s3.amazonaws.com/0/192584/4038595d-fd15-9ff2-3aaf-011b9523d160.png">

次にAPIを作成します。

　　<img width="913" alt="a3.png" src="https://qiita-image-store.s3.amazonaws.com/0/192584/830d5dd6-0c69-e469-612e-9f8d0f47e3a4.png">

　　<img width="914" alt="a4.png" src="https://qiita-image-store.s3.amazonaws.com/0/192584/9cf71661-91e6-9c8f-570d-f78184da1532.png">

　　<img width="913" alt="a5.png" src="https://qiita-image-store.s3.amazonaws.com/0/192584/407e5678-9b55-7d50-3d94-13a6f5c07bd1.png">

　　<img width="911" alt="a6.png" src="https://qiita-image-store.s3.amazonaws.com/0/192584/8cee25dd-10bc-739b-5266-0909803f7199.png">

コンソールからAPIが動作するか確認します。

　　<img width="892" alt="a7.png" src="https://qiita-image-store.s3.amazonaws.com/0/192584/a45e4cf0-abcc-c67d-ed90-e0338bb70f58.png">

APIをデプロイします。

　　<img width="595" alt="a8.png" src="https://qiita-image-store.s3.amazonaws.com/0/192584/0d00dd09-e3f6-654e-babe-3e1a3c726171.png">

# 3. 動作確認

curlでアクセスしてみます。
APIグループの詳細で確認できる[サブドメイン名]とAPI作成時に指定した[リクエストパス]を指定します。

```bash
$ curl http://********************************-ap-northeast-1.alicloudapi.com/api-sample?name=HogeSan
Hello HogeSan
```

# 雑感

AWSのAPI Gateway+Lambdaに慣れていれば、違和感なく利用できそうです。
ただ説明はもう少しわかりやすいといいなぁ。
node.jsでGoogleCloudStorageに文字列データをファイルとしてアップロードする

もうそのまんまです。難しそうなことは一切なさそうです。
JSONフォーマットのString型のデータが存在するので、[@google-cloud/storage](https://github.com/googleapis/nodejs-storage)を使用して、アップロードしてみます。

# 手っ取り早くソースを見たい方向け:relaxed:
https://github.com/fumihiko-hidaka/upload-string-to-gcs

# 実際に動かしてみた結果:yum:
https://neko-tech-test.appspot.com/upload-string-to-gcs


# Bucket.prototype.uploadでは対応できない:sob:

```js
bucket.upload('/local/path/image.png', function(err, file, apiResponse) {
  // Your bucket now contains:
  // - "image.png" (with the contents of `/local/path/image.png')

  // `file` is an instance of a File object that refers to your new file.
});

bucket.upload('https://example.com/images/image.png', function(err, file, apiResponse) {
  // Your bucket now contains:
  // - "image.png"

  // `file` is an instance of a File object that refers to your new file.
});
```

Bucketクラスのupload functionのサンプルです。
この関数を使用すると簡単にアップロードできるんですが、ファイルのパスを指定してアップロードする必要が出てきてしまいます。
さすがに文字列データを一回ファイルに落として、それからアップロードするというのも非常にめんどくさいので、FileクラスのcreateWriteStreamを使用してアップロードしてあげる必要がありそうです。

# createWriteStreamの呼び出し方

```js
fs.createReadStream('/Users/stephen/Photos/birthday-at-the-zoo/panda.jpg')
  .pipe(file.createWriteStream())
  .on('error', function(err) {})
  .on('finish', function() {
    // The file upload is complete.
  });
```

createWriteStreamのサンプルです。
これもサンプルではファイルが対象なんですが、readStreamに対象の文字列を投入してあげれば行けそうです。

# 実装例:nerd:

```js
const storageClient = Storage();
const bucket = storageClient.bucket(process.env.UPLOAD_BUCKET);

const uploadFile = bucket.file(uploadPath);
const uploadStream = uploadFile.createWriteStream({
  predefinedAcl: 'publicRead',
  metadata: {
    cacheControl: 'no-cache',
    contentType: 'text/plain',
  },
});

const readStream = new Readable();
readStream.push(text);
readStream.push(null);

readStream
  .on('error', reject)
  .pipe(uploadStream)
  .on('error', reject)
  .on('finish', resolve);
```

こんな感じになっています。
読み込み用のStreamを作成し、そこにtextを設定。
そのまま、upload用のstreamに流れるようにしています。
これでアップロードできるようになりました:v:

# 最後に
[株式会社ネコカリ](https://www.nekokari.co.jp/)では猫の手も借りたい🔥炎上中🔥なお仕事を募集しています！
一緒に働くメンバーも募集していますので、よかったら是非！
jqGrid：行に対して属性を設定したいとき

### 行に対して属性を設定したいとき
こんなことをしたいときはありませんか
 - ある値が"2"のときに背景色を青色にしたい。
 - 偶数行のみ背景色を変更したい。

#### よくするコード

```js
    $.each($grid.jqGrid("getDataIDs"), (index, value) => {
        let rowData = $grid.jqGrid("getLocalRow", value);
        if (rowData.name === "test2") {
            $grid.jqGrid("setRowData", value, null, {color:"blue"});
        }
    });
```
Gridを作成した後に、各行をループさせてsetRowDataを使用してクラスを設定する方法です。
この方法は簡単に思い浮かぶかもしれませんが、あまりオススメできない点があります。

1. グリッドを作成してから行うので、全件ループを実施するとういう無駄が発生する。遅い。
1. 処理を中身まで見ないと、何のために処理を実施しているのか分からない

#### 私がオススメする方法

jqgridの以下のイベントを使用する方法です。
ただ、これらのイベントは、行作成時に動作するものなので値が更新されたときには動作しません。
値が変更されたときに行の属性を変更したい場合は、他の方法を考える必要があります。

##### rowattr, jqGridRowAttr
この２つのイベントは、jqgridが行を作成するときに行属性を動的に設定できるように呼び出しています。

```js
    constructTr = function(id, hide, classes, rd, cur ) {
        var tabindex = '-1', restAttr = '', attrName, style = hide ? 'display:none;' : '',
            rowAttrObj = $(ts).triggerHandler("jqGridRowAttr", [rd, cur, id]);
        if( typeof rowAttrObj !== "object" ) {
            rowAttrObj = $.isFunction(ts.p.rowattr) ? ts.p.rowattr.call(ts, rd, cur, id) :
                (typeof ts.p.rowattr === "string" && $.jgrid.rowattr != null && $.isFunction($.jgrid.rowattr[ts.p.rowattr]) ?
                $.jgrid.rowattr[ts.p.rowattr].call(ts, rd, cur, id) : {});
        }
        if(!$.isEmptyObject( rowAttrObj )) {
```
※jquery.jqGrid.jsより抜粋

##### 使い方：rowattr
rowattrの使用方法です。

```js
    $grid.jqGrid({
        datatype: "local",
        data: mydata,
        // ・・・省略
        rowattr: function (rowData, currentObj, rowId) {
            console.log(arguments);
            if (currentObj.name === "test2") { // test the value of POLineStatus column
                return {"style":"color:red"};
            }
        }
    });
```

|引数|説明|
|-----|-----|
|rowData|セルの値をJSON形式で渡される|
|currentObj|セルの値ではなく、生の値（dataTypeによるがlocalならjson形式）が渡される|
|rowId|対象の行のRowIdが渡される|


##### 使い方：jqGridRowAttr
jqGridRowAttrの使用方法です。

```js
    $grid.bind("jqGridRowAttr", function (rowData, currentObj, rowId) {
        if (currentObj.name === "test2") {
            return {"style":"color:red"};
        }
    });
```

|引数|説明|
|-----|-----|
|rowData|セルの値をJSON形式で渡される|
|currentObj|セルの値ではなく、生の値（dataTypeによるがlocalならjson形式）が渡される|
|rowId|対象の行のRowIdが渡される|

以上です。
ゴリゴリjqueryを使用して記述するのも良いですが、jqgrid自体にも大体の対応策は準備されています。
いろいろ探してみましょう。
Linux Mint に nvidia-dockerをインストール

# Ubuntuとの対応の確認
WikipediaでLinux Mintのバージョンと対応するUbuntuのディストリビューションを確認。

https://en.wikipedia.org/wiki/Linux_Mint_version_history

# dockerのインストール又はバージョンアップ
以下の手順に従ってdockerをインストール又はバージョンアップする。

https://docs.docker.com/install/linux/docker-ce/ubuntu/

ただし、公式サイトの手順で`apt-get-repository`をやると`$(lsb_release -cs)`でディストリビューション名がUbuntuと違ってコケる。

```shell:Ubuntu用スクリプト
$ sudo add-apt-repository \
   "deb [arch=amd64] https://download.docker.com/linux/ubuntu \
   $(lsb_release -cs) \
   stable"
```

そこで、「Ubuntuとの対応の確認」で確認したディストリビューション名を`$(lsb_release -cs)`の代わりにベタ書きする。筆者の環境は`Linux Mint sarah`であったので、対応するディストリビューションは`xenial`である。


```shell:LinuxMint用スクリプト
$ sudo add-apt-repository \
   "deb [arch=amd64] https://download.docker.com/linux/ubuntu \
   xenial \
   stable"
```

# nvidia-dockerのインストール
以下の手順にしたがってインストールする。

https://github.com/NVIDIA/nvidia-docker

ただし、またしてもリポジトリの登録のときのディストリビューション確認でコケる。`$distribution`に適切な文字列を入れてやらないといけない。

```shell:Ubuntu用スクリプト
curl -s -L https://nvidia.github.io/nvidia-docker/gpgkey | \
  sudo apt-key add -
distribution=$(. /etc/os-release;echo $ID$VERSION_ID)
curl -s -L https://nvidia.github.io/nvidia-docker/$distribution/nvidia-docker.list | \
  sudo tee /etc/apt/sources.list.d/nvidia-docker.list
```

nvidia-dockerでは`ubuntu18.04`、`ubuntu16.04`、`ubuntu14.04`の3種類が選択できるようだ。筆者の環境は`Linux Mint sarah`であったので、対応するディストリビューションは`ubuntu16.04`が対応するので、以下のようにかえてやる。


```shell:LinuxMint用スクリプト
curl -s -L https://nvidia.github.io/nvidia-docker/gpgkey | \
  sudo apt-key add -
curl -s -L https://nvidia.github.io/nvidia-docker/ubuntu16.04/nvidia-docker.list | \
  sudo tee /etc/apt/sources.list.d/nvidia-docker.list
```

## 動作確認

手順にしたがって動作確認したところちゃんとグラボを認識してくれた。

```shell:確認結果
$ docker run --runtime=nvidia --rm nvidia/cuda:10.2-base nvidia-smi
Unable to find image 'nvidia/cuda:latest' locally
latest: Pulling from nvidia/cuda
（略）
Status: Downloaded newer image for nvidia/cuda:latest
Sun Aug 26 14:52:25 2018       
+-----------------------------------------------------------------------------+
| NVIDIA-SMI 384.130                Driver Version: 384.130                   |
|-------------------------------+----------------------+----------------------+
| GPU  Name        Persistence-M| Bus-Id        Disp.A | Volatile Uncorr. ECC |
| Fan  Temp  Perf  Pwr:Usage/Cap|         Memory-Usage | GPU-Util  Compute M. |
|===============================+======================+======================|
|   0  Quadro K620         Off  | 00000000:01:00.0  On |                  N/A |
| 35%   49C    P8     1W /  30W |    336MiB /  1997MiB |      0%      Default |
+-------------------------------+----------------------+----------------------+
```

# 結論

最初からubuntuにしとけばよかった・・・・。
iteration 中に要素を追加できるか

ちょっと驚いたネタ。iteration 中に要素を追加できるか。実は list は特殊で、**できる**らしい。

```python:a.py
q = [1,2,3]
for a in q:
	print(a)
	if a==1:
		q.append(4)
```

```python:b.py
import collections

q = collections.deque([1,2,3])
for a in q:
	print(a)
	if a==1:
		q.append(4)
```

実行結果は

```bash
$ python a.py
1
2
3
4

$ python b.py
1
Traceback (most recent call last):
  File "b.py", line 4, in <module>
    for a in q:
RuntimeError: deque mutated during iteration
```

SQLAlchemy で踏んだのだけれど、[意図的](https://bitbucket.org/zzzeek/sqlalchemy_old/issues/3163/use-deque-for-event-lists-so-that-remove)なものらしい。実際には [闇が深い](https://mail.python.org/pipermail/python-dev/2007-January/070523.html)。

----
bitbucket に何かあったらしく、以前の sqlalchemy は sqlalchemy_old に移動されて、新しく sqlalchemy repository が作られています。上記のリンクは古いほうを指すように更新しました。
Rのデータフレーム の任意の行に任意の要素が含まれているか否かの判定方法

## 概要
Rを使っていた時に，Pythonのように

```
要素 in list
```

の形では，要素が含まれているか否かを判定できず，またそれに完全に合致するポストがなかったので解決策をポストします．
なお，Rの型の理解が今ひとつなので，間違っていたらご指摘をいただけますと幸いです．


## 環境
R==3.4.2


## コード

```R
> a = data.frame(V1=c('abcd','efgh','ijkl'))
> a
    V1
1 abcd
2 efgh
3 ijkl
> 'abcd' %in% a$V1
[1] TRUE
> 'abc' %in% a$V1
[1] FALSE
```

これだけ．inではなくて，%in%を使えばいいらしい．
Kivy 日本語表示の設定

Kivy はデフォルト設定だと日本語が正常に表示されません。

# ■ 設定方法

- 日本語フォントをダウンロードします(http://ipafont.ipa.go.jp/node26#jp)
- Kivy 側の main.py に次のようなコードを追加します

```python:main.py
from kivy.core.text import LabelBase, DEFAULT_FONT
from kivy.resources import resource_add_path

resource_add_path("ダウンロードパス/IPAexfont00301")
LabelBase.register(DEFAULT_FONT, "ipaexg.ttf")
```
プログラミング初心者がPythonの応用までをガチで覚える軌跡

#　はじめに
pythonで必要な意識を簡単にまとめました。是非、活用してみてください。


#　表記方法
pythonでは、基本、";"　と　"\" で改行できます。


```
a = 200 ; b = 200 ; total = a + b
print(total)



1 + 2 + 3 + 4 + 5 \
+ 6 + 7 + 8 + 9 \
+ 10
```

複数行のコメント表記はダブルクォーテーション３個で囲みます。

```
"""
コメント
"""
```

文字代入で簡単に使用できるのは、.formatではないでしょうか？
pythonでは活用頻度が高いのでマスターしましょう。

```
total = "{:.3f}枚".format(num)
print(total)

結果(例)
10.000枚

これは".3f"で少数三桁までを表示しています。
```

#　計算について
簡単に表記しています。出力結果から理解してください。

```
5 / 2　
結果　2.5


5 // 2
結果　2

2**3
結果　8
(累乗)

4 % 3
結果　1
```

#文字列内での改行
文字列中にスペースや改行を埋め込みたいときは、バックスラッシュ（\）を使ったエスケープシークエンスを使いましょう。

```
aisatu = "こんにちは\nこんばんは\nさようなら"
print(aisatu)

こんにちは
こんばんは
さようなら

aisatu = "こんにちは\"こんばんは\"さようなら"
print(aisatu)

こんにちは"こんばんは"さようなら
```

#　文字の切り出し

文字の切り出しですが、pythonはインデント番号を0からスタートします。

そのため、

```
id = "一緒にPythonを習いましょう"
id[3]
```

出力結果は、文中2番目(0、1、2)の文字となります。

-1は全ての一番後ろを表しています。

```
nums = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

num = nums[: : -2] # 最後から最初まで1つ飛ばした数を表記します。

結果
97531
```

#　論理式
論理式では、Trueを1、Falseを0として扱います。

```
a = 4; b = 4; c = 5
print(a == b)
print(a == c)

True
False
```

#　その他
roundは四捨五入をして丸めます。lenは後ろの桁数や文字数などのカウント数を表示します。

```
x = 2.7
print(min(round(x), 5))
3

x = len("1000000")
print(x)
7
```

*argsは、複数の引数の数を表しています。

```
def func(a = 1, z = 26, *args):
    return a + sum(args) + z

print(func())
print(func(1,26,2,3))
27
32
```

**kwargsは文字通り、複数のキーワード引数を表しています。

```
def func(**kwargs):
    return kwargs

print(func(a=1,b=2))
print(func())
{'a': 1, 'b': 2}
```

#　ユーザー定義関数

def 関数名(引数1, 引数2):
    処理1
    処理2
    return 返り値

```
def price(adult, child) :
    return (adult * 1200)+(child * 500)
print(price(1, 2))
2200

price1 = price(adult=1, child=2)
price2 = price(child=2, adult=1)
print(price1)
print(price2)
2200
```

*argsを使用したコードを書いてみました。

```
def route(start, end, *args) : # start, endは必須
    route_list = [start]
    route_list += list(args) # *は無くす
    route_list += [end]
    route_str = "→".join(route_list)
    print(route_str)

start  = "東京"
end = "宮崎"
route(start, end, "神戸", "長崎", "熊本")
東京→神戸→長崎→熊本→宮崎
```

こちらは**kwargsです。

```
def entry(name, gender, **kwargs) :
    data = {"name": name, "gender": gender}
    data.update(kwargs)
    print(data)

entry(name="大山坂道", gender="男性", age=27, course="E")
{'name': '大山坂道', 'gender': '男性', 'age': 27, 'course': 'E'}
```


hey関数を hello関数 の引数として渡す方法を見てみましょう。

```
def hey():
    print("hey!!")

def hello(func):
    func()

hello(hey)

結果
hey!!
```

とりあえず今日はここまでです。お疲れ様でした！
[DDD] クリーンアーキテクチャサンプル

## これはなに？
C#erのDDD初学者が、CleanArchitecture実装の理解を深めるための記事です

## 背景
こちらのサンプル [https://nrslib.com/clean-architecture/] がわかりやすそうだったのですが、Web系に疎い僕にとってはすこしイメージし辛い部分（≒ノイズ）があったので、慣れ親しんだ古き善きWinFormで実装しなおしました。

## サンプル
こちら
https://github.com/ambleside138/CleanArchitecture_WinForm

※CleanArchitectureの内容自体は本家の記事で詳しく説明してくださってるのでそちらを読み込むとよいかと。

## 本家サンプルからの変更点
1. Presenter層にWinFormを利用
Web屋さんでない人もとっつきやすくなるかと

2. DIにSimpleInjectorを利用
ContainerHelperクラスにてセットアップ、コンテナの保持をしてます

3. UseCase.Core名前空間を別アセンブリに移動

※これからも少しずつ、自分の理解も深めながら改修していく予定
24時間完全無料！Glitchでクロスドメイン回避

Webアプリを作る際によく起こる問題

**CORSのクロスドメイン制約**

今回はこれを**簡単**に**無料**で**24時間**、回避する方法を紹介します


# CORSとは
CORS(Cross-Origin Resource Sharing)とは、ブラウザがオリジン以外のサーバからデータを取得すること。ほとんどのブラウザには、クロスドメイン通信を拒否するようになっている

CORSはセキュリティ上の問題があるため実装されている

詳しくは[こちら](https://qiita.com/tomoyukilabs/items/81698edd5812ff6acb34)

# クロスドメイン制約回避
自分が管理しているサーバーに対して、リクエストを送信する場合はサーバーのほうでCORSの設定すればを問題を回避することができる

しかし、外部APIの場合は当たり前だが設定を変更できない
そのため、クロスドメイン制約に引っかからないような対策を打つ必要がある

## クロスドメイン制約の回避方法
代表的な回避手段として、webサーバーを用意し、そのサーバーを経由してリクエストを投げる方法がある

しかし、サーバーをどこに置くのか、誰かに悪用されないかなどを考える必要があるため困難な場合がある
そこでGlitchと呼ばれるサービスを用いることで解決できるのではないかと考えた

# Glitchとは

Glitchとは、簡単にNode.jsを利用したWebアプリを開発・公開できるWebサービス
Node.js限定だが無料で24時間、Webサービスを公開できる
また、GitHubへのインポートやエクスポートもできる

paasぽいもの？

## Glitchの制約
Glitchにはいくつかの制約がある
重要なものを抜粋すると

- 匿名ユーザーによって作成されたプロジェクトは、5日で期限切れ
- 使用されていない場合は5分でスリープ、12時で停止
- 1時間で4000リクエストが上限

などなどの制約がある
詳しくは[こちら](https://glitch.com/help/restrictions/)

ちなみにスリープの場合は5秒、停止の場合は25秒ほど復帰に時間がかかる

# 作ったもの
Glitch
https://midoribin-cors.glitch.me/cors?url={URL}

ソースコード
https://github.com/MIDORIBIN/cors

{URL}の部分にリクエストを投げたいurlに書き換えてリクエストを投げるだけ！
これだけでクロスドメイン制約を回避できる


一応サンプル

```:sample
https://midoribin-cors.glitch.me/cors?url=https://www.google.co.jp/
```

# あとがき
[この記事](https://qiita.com/yonedaco/items/569bcc442872a1f9a03d)を読んで今回のを作った
トレンドにこの記事が乗っていたので読んだ
しかし、この記事よく見ると2017年11月に更新、かなり前のものだった
トレンドのほとんどはごく最近に書かれたものがほとんどなのでこんなこともあるのかと思った
備忘録 git


リポジトリをローカルにクローンする	

	git clone git@github.com:リポジトリ
	
	cd リポジトリ名
	
	git branch

作業ブランチ(add-new-file)を作成する	

	git branch add-new-file
	
	git branch

作業ブランチに移動	

	git checkout add-new-file
	
	git branch

ファイルを追加	

	FILE追加  //方法は様々

作成したファイルを、バージョン管理の対象（Gitのコミット対象）に追加	

	git add FILE
	
	git status

コミットする	

	git commit -a
	
	git status

gitへプッシュする	

	git push origin add-new-file

---
参考にさせて頂いたサイト：[https://employment.en-japan.com/engineerhub/entry/2017/01/31/110000](https://employment.en-japan.com/engineerhub/entry/2017/01/31/110000)
[https://techacademy.jp/magazine/6235](https://techacademy.jp/magazine/6235)
今後勉強するサイト：[https://git-scm.com/book/ja/v2](https://git-scm.com/book/ja/v2)
Linux 仮想コンソールの切り替え方法

# ■ はじめに

以降、Linux 環境を想定しています。また、動作確認は、RHEL 7.4 環境で行いました。その他のディストリビューションで動作するかは未確認です(問題ないとは思いますが)。

# ■ 仮想コンソールとは

仮想コンソールとは、非グラフィカル環境でのシェルプロンプトです。X Window System を搭載した Linux 環境で、画面がフリーズし、ターミナル画面からコマンドを実行できない場合などのトラブルシューティングに有効です。

仮想コンソールは tty(TeleTypewriter) と呼ばれています。通常は、6つ(tty1 ~ tty6)が存在します。それぞれのコンソールは同時にアクセスし、異なる作業を行うことができます。アクセスの際は、リモートでなく、物理マシンから行う必要があります。

# ■ 切り替え方法

|動作|入力キー|
|:-----------------|:---------------------|
|仮想コンソール( tty[2-6] )切り替え|Ctrl + Alt + F[2-6]|
|初期コンソール( tty1 )に戻る|Ctrl + Alt + F1|

なお、現在ログインしている仮想コンソールの番号は、次のコマンドから確認できます。

```
$ tty
/dev/tty3
```
swiftのextensionによるローディングインジケータ共通化

#全画面で共通のローディングインジケータを実装したい
UI操作ブロックする系のこういうのを全画面でいつでも呼び出せるようにしたい
<img width="375" alt="Simulator Screen Shot - iPhone 8 - 2018-08-26 at 22.50.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/147358/003dcf3f-6dff-c293-f35a-6b819e9c2423.png">

## せっかくswiftだからUIViewControllerのextensionで書きたい
BaseViewController的なクラスに共通関数作って継承させていくのはSwiftyじゃない気がするので、UIViewControllerのextensionで実現させたい。。。

### Swiftのextensionはストアドプロパティを持てない
最初にやろうとしたのは以下の方法 ※**もちろんビルドエラー**
swiftのextensionはコンピューテッドプロパティしか持てない為、このアプローチの仕方はできません

```swift:UIViewController+Extension.swift

extension UIViewController {
    
    let indicatorView = UIActivityIndicatorView.init(activityIndicatorStyle: .whiteLarge)
    let grayOutView = UIView(frame: self.view.frame)

    func startIndicator() {
        loadingIndicator.center = self.view.center
        grayOutView.backgroundColor = .black
        grayOutView.alpha = 0.6
        self.view.addSubview(grayOutView)
        self.view.addSubview(loadingIndicator)
        self.view.bringSubview(toFront: grayOutView)
        self.view.bringSubview(toFront: loadingIndicator)
        
        loadingIndicator.startAnimating()
    }
    
    func dismissIndicator() {
        indicatorView.removeFromSuperView()
        grayOutView.removeFromSuperView()
    }
}
```

##最終的な実装方法
UIViewのtagプロパティを利用し、識別して表示、非表示
すごく単純に、かぶらなそうな値を割り振って処理するだけ（今回は999を使用）

```swift:UIViewController+Extension.swift
extension UIViewController {
    
    func startIndicator() {

        let loadingIndicator = UIActivityIndicatorView(activityIndicatorStyle: .whiteLarge)

        loadingIndicator.center = self.view.center
        let grayOutView = UIView(frame: self.view.frame)
        grayOutView.backgroundColor = .black
        grayOutView.alpha = 0.6

        // 他のViewと被らない値を代入
        grayOutView.tag = 999

        grayOutView.addSubview(loadingIndicator)
        self.view.addSubview(grayOutView)
        self.view.bringSubviewToFront(grayOutView)

        loadingIndicator.startAnimating()
    }
    
    func dismissIndicator() {
        self.view.subviews.first(where: { $0.tag == 999 })?.removeFromSuperview()
    }

}
```

##使用方法

```swift:SampleViewController.swift

    func sampleFunc() {
        // ローディング開始
        startIndicator()
        DispatchQueue.global(qos: .default).async {
            // 重い処理や通信処理
            DispatchQueue.main.async {
                // ローディング非表示
                self.dismissIndicator()
            }
        }
    }
```



##もっとスマートなやり方募集中
swiftのextensionで書くって目的は達成されましたが、個人的にtagで判定ってのがしっくり来てないので、
もっといい方法あるよ！って方いらしたらコメントお願いしまーす！
macOS の bash で大文字・小文字変換する７つの方法（convert upper/lower cases）

> **Mac のデフォルトの状態で bash スクリプトで大文字←→小文字に変換したい**のです。

一般的な Linux であれば、以下のように変数の展開時に `,,` もしくは `^^` を使うと全て小文字・大文字にできます。

```bash
s='Hoge FUGA';
echo "${s,,}" # 小文字になる → hoge fuga
echo "${s^^}" # 大文字になる → HOGE FUGA
```

これは Bash v4+ での機能です。

しかし、macOS HighSierra 〜 Catalina（OSX 10.13.6〜10.15.7）の**デフォルトの `bash` のバージョンは `v3.2.57`** であるため、`${input^^}` が使えません。しかも、Mac の [sed](https://ja.wikipedia.org/wiki/Sed_(%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF)) コマンドは [BSD 版 sed](https://www.freebsd.org/cgi/man.cgi?query=sed&sektion=&n=1) なのです。

つまり、デフォルトで `GNU sed` の `sed \L` オプションや `${input^^}` や `capitalize -u` などで**簡単に大文字化・小文字化できない**のです。

問題は、諸事情で Homebrew などで [GNU sed](https://www.gnu.org/software/sed/manual/sed.html) や `bash v4+` がインストールできないのです。T^T

## 小文字から大文字に変換する７つの方法

> <sup>🐒 &nbsp; 下記の方法は、いずれも `$input` をリダイレクト（`<<<`）で渡していますが、パイプ渡しでも動きます。<br>`echo $input | tr '[a-z]' '[A-Z]'` <br>変数に入れる場合は、パイプ渡しの方が直感的かもしれません。<br>`input_lowercase=$(echo "${input}" | tr '[a-z]' '[A-Z]')`</sup>

```bash:LowerToUpper.sh
#!/usr/bin/env bash

INPUT='hoge'

tr '[a-z]' '[A-Z]' <<< $INPUT
tr '[:lower:]' '[:upper:]' <<< $INPUT
awk '{print toupper($0)}' <<< $INPUT
sed 'y/abcdefghijklmnopqrstuvwxyz/ABCDEFGHIJKLMNOPQRSTUVWXYZ/' <<< $INPUT
php -r "echo strtoupper('$INPUT'), PHP_EOL;"
python -c "print('$INPUT'.upper())"
perl -ne 'print uc' <<< $INPUT
```
```shell-session:結果
$ ./LowerToUpper.sh
HOGE
HOGE
HOGE
HOGE
HOGE
HOGE
HOGE
```

## 大文字から小文字に変換する７つの方法

```bash:UpperToLower.sh
#!/usr/bin/env bash

INPUT='HOGE'

tr '[A-Z]' '[a-z]' <<< $INPUT
tr '[:upper:]' '[:lower:]' <<< $INPUT
awk '{print tolower($0)}' <<< $INPUT
sed 'y/ABCDEFGHIJKLMNOPQRSTUVWXYZ/abcdefghijklmnopqrstuvwxyz/' <<< $INPUT
php -r "echo strtolower('$INPUT'), PHP_EOL;"
python -c "print('$INPUT'.lower())"
perl -ne 'print lc' <<< $INPUT
```
```shell-session:結果
$ ./UpperToLower.sh
hoge
hoge
hoge
hoge
hoge
hoge
hoge
```
## 応用技

bash で `yes` `no` 判定にも使えます。つまり、小文字で `yes` と入力しても `YES` と検知できます。

```bash:sample.sh
#!/usr/bin/env bash

read -p 'ミキミキツンパカルテイハ？ (y/n): ' INPUT

INPUT=$(tr '[a-z]' '[A-Z]' <<< $INPUT)

if [ ${INPUT:0:1} = 'Y' ] ; then
    echo 'Really?'
else
    echo 'N...No?'
fi
```
```shell-session:結果
$ ./sample.sh
ミキミキツンパカルテイハ？（y/n）：yeeeeees
Really?
```

## 参考文献

- [uppercase to lowercase in bash on a mac](https://stackoverflow.com/questions/2505771/uppercase-to-lowercase-in-bash-on-a-mac/8771939) @ StackOverflow
- [How to convert a string to lower case in Bash?
](https://stackoverflow.com/questions/2264428/how-to-convert-a-string-to-lower-case-in-bash) @ StackOverflow
- [Bashで変数を大文字小文字変換(uppercase/lowercase)する](https://qiita.com/kawaz/items/211266021515b3f033a3) @ Qiita
最近のJavaScriptの書き方に関して

#ECMAScript2018（JavaScript）仕様か、第115回総会（2018年6月27日）で策定されましたね。

ECMA-262第9版 - ECMAScript®2018言語仕様
ECMA-402第5版 - ECMAScript®2018国際化API仕様書
引用元　http://ecma-international.org

##2018仕様策定の概要としては

- AsyncIteratorプロトコルと非同期ジェネレータを介して非同期の反復のサポート
- dotAllフラグ、キャプチャグループ、Unicodeプロパティエスケープ、およびルックアヘッドアサーションの新しい正規表現機能が含まれる
- オブジェクトプロパティのrestパラメータとspreadオペレータをサポート

#最近の書き方と昔の書き方の違いについて一部メモってみました。

- 変数の宣言
-- var以外にlet、constが追加されている。ES6から。（昔はvarを使うしか有りませんでした。）
 varを使えば、以下の様に同名変数を宣言する事もできます。他の言語の感覚から言うと、大雑把な印象を持ってました。
```
var hoge = 1;
var hoge = 2;
```
が、letを使うと、同名変数を使えないので、エラーとなります。
```
'use strict'
let hoge = 1;
let hoge = 2;
```
まともになった感が有りますね。

- オブジェクトのコピーが楽になった。
- 2018仕様からスプレッド演算子のサポートが可能になりました。
```
const hogeObj = {...fooObj};
```
一行で済ませられるようになりました。以前は、ループしながら、値を一つずつコピーしてましたが、楽になったものです。
Failed to load model named アプリ名出た時

エラーの記事とかは色々あったのですが実際はここが原因なのでは？と思ったのでかなり短い記事になると思いましたが載せます。

すみません普通に書いてあるのありました💦
https://stackoverflow.com/questions/42553749/core-data-failed-to-load-model

後参考にさせていただいたcodeのgithubも載せておきます。
https://github.com/ei17ringo/sampleCoreData002/blob/76e4a765378d9108018f7638a9bf046ffb814691/sampleCoreData002/ViewController.swift

このエラーが出ている時は以下記述部分の見直しをしていただきたいです。


しかしここでは以下の解決でも解決しないと書いてありました。
そうするとおそらく順番などにも問題があると思うのでここまでのエラーの出し方、解決まで写真を最後に載せたいと思います。
っと思いましたが私の見方が間違っていないならこれがきっと原因であるような気がしています…。


```.swift
let container = NSPersistentContainer(name: "coredataSample")
```

"coredataSample"の記述はプロジェクト名でなくModel.xcdatamodeldて言うのを作っていたら

```.swift
let container = NSPersistentContainer(name: "Model")
```

にしないといけないと言うこと。

できればModel.xcdatamodeldを作成するときにはModelをプロジェクト名にすることをおすすめします。

理由ですか？それは〜。CoreDateの自動生成がそのようになっているので後々都合がいいのかと思いして…。:sunny:

画像
<img width="1279" alt="スクリーンショット 2018-08-26 23.28.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/9af4d8b6-0203-ebb7-6c27-fbbb39bbd440.png">
<img width="1280" alt="スクリーンショット 2018-08-26 23.29.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/cfaf30eb-b075-0e00-5a9c-a7986a2446bd.png">
<img width="1274" alt="スクリーンショット 2018-08-26 23.29.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/bf10d6a9-fdd4-5b58-2793-4d8131deba12.png">
<img width="1278" alt="スクリーンショット 2018-08-26 23.30.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/7fa65c41-df83-35b3-dd33-0595af68eb7c.png">

:shamrock:Codegenの変更も…
<img width="1278" alt="スクリーンショット 2018-08-26 23.30.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/cf7447bc-755d-9c35-89d7-9c3f6335faa3.png">
<img width="288" alt="スクリーンショット 2018-08-26 23.30.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/b91ec6f5-d230-e1b0-a341-32d00463f00e.png">
<img width="1280" alt="スクリーンショット 2018-08-26 23.31.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/9982d985-529d-a802-6055-4e71e3b419b3.png">
<img width="1280" alt="スクリーンショット 2018-08-26 23.32.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/3f27b120-e9d9-d88c-e6cc-eed833641f34.png">
<img width="1274" alt="スクリーンショット 2018-08-26 23.32.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/adbef87b-866f-a283-92da-fcab10634d4b.png">

:sunny:エラー出すまで、そして無事にエラーが出ました。
<img width="377" alt="スクリーンショット 2018-08-26 23.32.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/fa8d7986-318d-83bb-fcbf-6199bb84077d.png">

:sunny:上記場所直してエラーが消えました。
<img width="1279" alt="スクリーンショット 2018-08-26 23.33.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/bfbc5a13-c7c8-44b2-5220-1c60bbe4a50a.png">
AISOの良いVim > 知らないと損するインサートモードへの切替方法いろいろ

## 「AISOが良い」とは

愛想が良い (掛詞)

### A

- `a` — 現在の位置 + 1文字先からインサートモードへ
- `A` — 行末に移動してインサートモードへ

### I

- `i` — 現在のカーソル位置からインサートモードへ
- `I` — 行頭に移動してインサートモードへ

### S

- `s` — 現在カーソル位置の1文字を削除してインサートモードへ (ほしかった‥！)
- `S` — 現在の行をすべて削除してインサートモードへ

### O

- `o` — 行末に改行を挿入してインサートモードへ (次行をオープン）
- `O` — 行頭に改行を挿入してインサートモードへ (前行をオープン)

### Others

- `cw` — 現在カーソル位置の単語末（`w`)まで削除してインサートモードへ　（`c0`とか`c$`とかいろいろできる）

## 感想

こんなの色々できたんだ…！

今まで `a` しか使っていなくてかなり損していたぐらいの気持ち。

( @matobaa さんからいただいた編集リクエストで、数個追加していただきました :tada:  )

## 覚え方

それぞれの頭文字を取って「AISO 愛想」とか、てきとうに覚えやすい名前をつけてみるとか。


## 教訓

- 一覧としてたくさん提示されると圧倒されるかもしれないが、使い始めると本当に役に立つ。
  - 覚えようとせずにとりあえず手を動かしてみるのが良いかも。
- 小文字で出来ることは大文字でも試してみるのが良い。
  - と思って記事を書いた後に `S` を見つけて、本当に動いて驚愕した。

## インサートモードからの逃亡

>insert modeを抜けるときはCTRL-Cが一番押しやすい

- [vimのinsert modeの全てのキーマップ一覧 - Qiita](https://qiita.com/34ro/items/6163f595785ae99a632a)

>Ctrl-`[` を使うのが正統派。 （Ctrl-`[`はEscapeを押したのと同じ効果）

( @matobaa さん )

## TODO

- Gistも書く

## 参考

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/3e59626a-f05d-86f5-7352-fb3ab78551fe.png)

## Versions

- VIM - Vi IMproved 8.1 (2018 May 18, compiled Aug  7 2018 21:58:18)








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Ubuntu18.04の電池の持ちをよくする

Ubuntu18.04を使い始めたのですが、ノートパソコンの電池の減りが激しく、すぐに充電しなくてはいけなくなるので参考にさせていただいたページの中からそのままコピペできるようにまとめました。
これから様子を見ていこうと思います。

```shell
# バッテリー最適化ツール install
sudo apt-get install powertop

# Ubuntuの電力を実際に最適化するツール install
sudo add-apt-repository ppa:linrunner/tlp
sudo apt-get update
sudo apt-get install tlp tlp-rdw

# ツール起動。一度起動するとその後自動的に起動するらしい
sudo tlp start
```

参考にさせていただきました
[【激変】Ubuntu16.04でバッテリー駆動を劇的に伸ばせる省電力アプリ２つを導入！]
(https://lifeisbeatfull.com/5068.html)
Amazon EFSをElastic Beanstalkからお手軽にマウントする

# はじめに

Amazon EFSでElastic Beanstalkを利用する方法は公式ドキュメントにも書いてあります。
https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/services-efs.html

ですが、ファイルシステムを作るところからEBでやろうとしているので、無駄に複雑な感じになっています（複雑になっているのは、amazon-efs-utilsを使っていないというのも一因ですが）。

わざわざEFSを使おうとしているということは、基本的には複数のインスタンスからマウントすることを想定しているので、まずはEFSの管理画面からファイルシステムを作ってからEC2インスタンスを立ち上げようとするのが普通じゃないのかなぁと思うのです。

# 設定ファイル

ということで、ここでは既にEFSのファイルシステムが作成されていて、そのファイルシステムIDが環境変数(EFS_ID)にセットされていることを前提としたconfigを書いてみました。EFSを /mount/nfs にマウントしています。

こんな感じで、とりあえずうまくいきました。

```yaml:.ebextensions/00_nfs.config
packages:
    yum:
        amazon-efs-utils: []

container_commands:
    mount_nfs:
        command: |
            mountpoint -q /mnt/efs
            if [ $? -ne 0 ]; then
                mkdir -p /mnt/efs
                mount -t efs "$EFS_ID":/ /mnt/efs
            fi
```

commandsの実行タイミングでは環境変数が取得出来ないので、container_commandsで設定しています。
CentOSをHyper-V上に入れるときのポイント（第一世代 vs 第二世代)

# この記事を書こうと思ったきっかけ

普通にHyper-VにCentOS7インストールできるだろうと思って試したところ、エラーが出たので忘れないうちにメモ。

##最初に結論
Hyper-Vのデフォルト設定を変更する必要がある。
「ハードウェア」→「セキュリティ」→「セキュアブート」
デフォルト：Microsoft Windows
変更後：Microsoft UEFI 証明機関
※もしくはセキュアブートを無効化してもよいようだ。

![SnapCrab_DESKTOP-UIMJQCQ 上の CentOS7 の設定_2018-8-26_20-58-32_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/121950/16ff2d2e-0749-bd37-c34d-1ecc24266f71.png)

##現象
普通にダウンロードしたCentOSのISOイメージを使って、DVDブートでインストールしようとすると、
「The image's hash and certificate are not allowed (DB)」
と出てインストールに失敗する。

昔はこんなことはなかったような…

![SnapCrab_NoName_2018-8-26_20-56-55_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/121950/af35adbf-f68b-30df-698d-0f7627a72ac9.png)


## そもそもの根本原因

調べた結果、UEFIのセキュアブートが起動をチェックしているためのようだ。

UEFIの仮想マシンを選んだため、セキュアブート機能がデフォルトで有効になっている。
どこで選択していたかというと、インストール時に仮想マシンの世代として
・第一世代
・第二世代
並んでいたので、「新しいほうがいいだろう」と安易に第二世代を選んだ。

![SnapCrab_仮想マシンの新規作成ウィザード_2018-8-26_22-9-25_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/121950/85fa2576-c889-ba1d-8dcd-a15e5c019164.png)

## 第一世代、第二世代？

ではどちらを選べばよかったのか？

選ぶ場合の選択条件は以下に記載があったので、簡単に翻訳したが、正直これだけでは、第2世代を選ぶ大きなメリットはなく、どっちでもいい感じ。
結局のところ、「新しいほうがいいだろう」で第二世代でいいのではないか。

https://docs.microsoft.com/en-us/previous-versions/orphan-topics/ws.11/dn770158(v=ws.11)


###選択時の判断基準
以下の条件に当てはまらない場合は、MicrosoftはSecure bootなどの機能の優位性を確保できるので、第2世代を推奨する。

**・ブートしようとするVHDがUEFI互換ではない場合**
　※第一世代の設定で作ったVMマシンのイメージかな？
**・バーチャルマシンをAzureにマイグレーションする予定がある場合**
**・第二世代が起動したいOSをサポートしていない場合**
　第二世代でサポートしているOS：
　　1) Windows 64bit(Windows Server 2012 無印/R2、Windows10/8.1/8)
　　2) CentOS/RHEL(7.xシリーズ)
　　3) Oracle Linux(7.xシリーズ)
　　4) SUSE (SUSE Linux Enterprise Server 12)
　　5) Ubuntu (Ubuntu 14.04 and later versions)
**・第二世代が起動したい方式をサポートしていない場合**
　第二世代でサポートしている起動方式：
　　1) 標準ネットワークアダプタによる PXE ブート
　　2) SCSI仮想ディスク(.VHDX) または仮想DVD(.ISO) からの起動
　　※Legacy network adapterを用いたPXE Boot、IDEのDISK/DVD、Floppyは非対応

###第2世代の機能の優位性

**Secure Bootが使える**
…（著者注：VMにSecure Bootが必要なシチュエーションって…。しかも無効にできるしな…）
**大きなブートボリュームを使える**
第2世代では、起動ディスクのサイズとして64TBまで使用できる。
第一世代のBoot領域の最大サイズは2TB。
（VHDX形式で2TB、.VHD形式で2040GBの記載があるが意味不明）


#おまけ
ネットワークアダプタのレガシーと、標準の何が違うのか？
レガシーネットワークアダプタは「DEC DC21140A」をソフトウェアエミュレートするため、負荷が大きい。対して、標準ネットワークアダプタはVMBusを介して、直接コマンドをデバイスに流すため負荷が軽い。
Ubuntu で git diff-highlight へのパスを通す（リンク作成）

# 目的：キレイなdiffを出したい

- [Git2.9のキレイなdiffを出すためのconfig](https://qiita.com/takyam/items/d6afacc7934de9b0e85e)

そのためには、 `diff-highligt` というツールのバイナリが `$PATH` の中に存在していることが必要なのです。

## What's diff-highlight

その名の通り、 diff の差分を highlighting して見やすくしてくれるツール。

[ソース (GitHub)](https://github.com/git/git/tree/master/contrib/diff-highlight)

2017年6月の [コミット "diff-highlight: split code into module"](https://github.com/git/git/commit/0c977dbc8180892af42d7ab9235fd3e51d6c4078) より `Makefile` を使ってビルドが必要になりました。(v2.13.3～)

> One small downside is that the diff-highlight script must
now be built using the Makefile.

しかし Ubuntu の最新 git パッケージでは既にビルド済みなので、シンボリックリンクの作成だけすればOKです

# 手順

## Install git
`apt` でインストール・アップグレードします。

```sh
sudo apt update
sudo apt install git
```

## Link diff-highlight

`$PATH` の通っているところに、シンボリックリンクを置くことで対応します

```sh
sudo chmod +x /usr/share/doc/git/contrib/diff-highlight/diff-highlight
sudo ln -s /usr/share/doc/git/contrib/diff-highlight/diff-highlight /usr/local/bin/diff-highlight
```

## Link 後 git をアップグレードした場合

実行権限だけ、再び追加します

```sh
sudo chmod +x /usr/share/doc/git/contrib/diff-highlight/diff-highlight
```
Kuin言語をメモリリークさせてみた

どうも、わかくさはるおです。最近Kuin言語というゲーム用言語を触っているのですが、Kuinが参照カウント方式のガベージコレクションを採用していることを知ったので、実際そうなのか確かめてみるためにメモリリークを起こすようなコードを書いて実行させてみました。

#Kuin言語とは

くいなちゃん６さいが作成したゲーム作成用の言語です(真偽のほどは不明)。Pascalライクな文法で強い静的型付け言語の分類になります。DirectXとガベージコレクションを標準実装しており、初心者でも簡単に高速なゲームを作成することができます。Kuin言語自体はVisualStudio(C++)で実装されており、くいなちゃんライセンスで公開されているのでソースコードを見たり、自分好みに処理系やライブラリの拡張を行うことができます。

#参照カウント方式

参照カウント方式は、オブジェクトに参照カウンタをつけて、参照されるときにカウンタをインクリメント、参照が外されるときにカウンタをデクリメントします。カウンタが０になったときにオブジェクトが回収されます。

参照カウント方式のガベージコレクションを採用している言語としてはObjective-Cとswiftがあります。Kuinも参照カウント方式を採用しています(2018/8/26時点)。

#循環参照

参照カウント方式では、オブジェクトが循環参照している場合にはオブジェクトが回収されません。循環参照とは、例えばオブジェクトAとオブジェクトBがお互いの参照を保持しているような場合を指します。

Java, C#といった、一般的にガベージコレクションが実装されていると認知されている言語では参照カウント方式よりも高度な方式が採用されているので循環参照しているオブジェクトでもプログラムで使用されなくなったオブジェクトは回収されます。

しかし参照カウント方式においてはプログラムで不要になった時にも循環参照しているオブジェクトは保持されたままになります。不要なオブジェクトがメモリ内に保持されることをメモリリークといいます。メモリリークは短時間の実行においては問題ないのですが、長時間プログラムを動作させて少しづつメモリリークをさせていくとメモリ不足でアプリが異常終了します。

ただし、一般的なガベージコレクション方式はガベージコレクションの実行がユーザーの意図しないタイミングで発生するといった問題がありますが、参照カウント方式は単純な仕組みなのでガベージコレクションの時間を気にする必要はありません。ゲームプログラムを作成する上でガベージコレクションが発生しないことは重要なことであり、それを避けるためにゲームプログラミングはC++で行うことが一般的です。ただ、最近のガベージコレクションのアルゴリズムはガベージコレクションを少しずつ実行させるらしいのでさほど気にしなくてもいいのかもしれません。

#Kuinをメモリリークさせてみる

では、どのような場合に循環参照は発生するのでしょうか。循環参照の簡単な例として、双方向リスト(Doubly Linked List)があげられます。双方向リストは、配列のような見た目をしていますが、実装としては自身の前後の要素を持つオブジェクトです。今回の実験で書いたコードを示します。

```Kuin:circular_reference.kn
; copyright 2018 Haruo Wakakusa
;
; circular_reference.kn
;  Kuinプログラムを循環参照でメモリリークさせるサンプル

class DequeElement()
	+var val: int
	+var prev: @DequeElement
	+var next: @DequeElement
end class

class Deque()
	+var first: @DequeElement
	+var last: @DequeElement
	
	+func push(val: int)
		if(me.first =& null)
			do me.first :: #@DequeElement
			do me.last :: me.first
			do me.first.val :: val
		else
			var new: @DequeElement :: #@DequeElement
			do me.last.next :: new
			do new.prev :: me.last
			do me.last :: new
			do new.val :: val
		end if
	end func
end class

func getDequeRange(start: int, end1: int): @Deque
	var d: @Deque :: #@Deque
	for i(start, end1)
		do d.push(i)
	end for
end func

func main()
	for i(1, 100000)
		do @getDequeRange(0, 10000 - 1)
		do cui@print(i.toStr() ~ "\n")
	end for
end func
```

main関数の中でgetDequeRangeが繰り返し呼び出されています。0から9999までの双方向リストを100000回呼び出しています。また、getDequeRangeが１回呼び出されるごとに、変数iがインクリメントされ、その値が表示されます。

さて、これをKuinエディタで実行させてみます。実行マシンはWindows10(64bit)で、RAM 16GBです。タスクマネージャでRAM使用量を見ると上限である16GBまで上昇します。しかし、16GB近くに達するとスワップアウトするみたいで、しばらくアプリケーションは正常に走り続けました。ちなみに、このプログラムを実行させているときにブラウザで動画を見ていましたが、スワップアウトしている間も動画は途切れることなく再生されます。どうやらメモリを消費するプロセスと他のプロセスのメモリが別管理になっていてメモリがあふれたプロセスのメモリをスワップアウトするようです。

ただ、このプログラムを動かし続けていると、スワップアウトして少ししてからgetDequeRangeの呼び出し回数の表示が遅くなってきます。そして、この表示が100000に達しない時点でプログラムが終了し、タスクマネージャとブラウザがハングアップしました。

![001.png](https://qiita-image-store.s3.amazonaws.com/0/64229/eab6ba2a-b9e3-c568-b5ca-87aa6422afe1.png)

つまりKuinのプログラムはメモリリークによって終了したのです。ただし、メモリ不足になってもKuinプログラムはそれを検知することができず、エラーメッセージは表示されませんでした。

（この実験はKuinのバージョン2018.8.17で行っています）

#結論

Kuin言語は参照コレクト方式のガベージコレクションを使用しているのでC++よりも安全にプログラミングすることができます。ただし循環参照には気をつけましょう。
VTFでTrailを描く

『TouchDesignerでもGPUで軌跡を描きたい！』と思ったのでなるべくコードを書かずに実装してみました。
ソースコードは[ここ](https://github.com/ToyoshiMorioka/GPUTrail)。
以下、ざっくり解説です。
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/152718/692e052f-2a35-be0b-6e3a-82a2e002fc58.png)

# 1.　先頭になるパーティクルを実装する
まずは先頭のパーティクルを実装します。今回は256個だけInstancingします。
例によってNoise TOPでパーティクルのポジションを作成します。
GPU Instancingでも良いんですが今回はTOPtoCHOPでInstancingします。

![キャプチャ2.PNG](https://qiita-image-store.s3.amazonaws.com/0/152718/2e605211-daed-da0c-8e3d-a8e41911d4db.png)


# 2. 軌跡をTOPに保存していく
256個のパーティクルの位置情報をそれぞれ256個キャッシュしていきます。
手順はこんな感じ。

1. Constant TOPを作る
2. Over　TOPを使ってパーティクルのポジションをConstant TOPに重ねる
3. Transform TOPを使って1ピクセルOver TOPをずらす
4. Constant TOPの直後にFeedback TOPを挿入し、Over TOPの直後にNull TOPを挿入。
5. パスを通して軌跡が更新し続けるようにする

![キャプチャ3.PNG](https://qiita-image-store.s3.amazonaws.com/0/152718/1c439ca4-ac67-ef2a-caa4-6e963c1ef04d.png)


# 3. Line TOPで軌跡を表示する
長さ0で頂点が256個入ってるLine SOPを作り、それを256個、Copy SOPで複製します。
あとはこれを2.で作ったTOPを使ってVTFで動かすだけ。
肝はOver TOPをVTFのソースにすること。

![キャプチャ4.PNG](https://qiita-image-store.s3.amazonaws.com/0/152718/cb664d4c-d363-42f5-6b6f-2a9212a27c2f.png)
【Unity×ARkit】3D空間でアナログ時計を画面入力で回転

3D空間にあるアナログ時計を画面入力で回転させたかったのですが、参考にできる記事が見当たらなかったので、自分のメモがてら残しておきます。

・画面のタッチ処理は別で行ったので、ここには記載していません。
・こちらは時計回りのみに動く仕様です。
・colliderを大きめにしたほうがスムーズに動作します。
・両針の親オブジェクトをそれぞれ設定して、親を根元部分（時計の中心）に配置して、
　実際はこちらを回転させています。

![watch2.gif](https://qiita-image-store.s3.amazonaws.com/0/254171/956e5a50-dad5-beac-e348-c263e7654eed.gif)

```c#:
GameObject RootLongHand, RootShortHand; 
int RotateSpeed; 

public void RotateWatchHand()
    {
        RootLongHand.transform.Rotate(new Vector3(0, 1, 0), RotateSpeed);
        RootShortHand.transform.Rotate(new Vector3(0, 1, 0), RotateSpeed / 12);　//ここで12で割ると短針と長針がシンクロします。
    }
```

本来であれば、反時計周りの回転もつけたくて、
タッチ位置による分岐を作っていたのですが、うまくいかず断念しました。
うまい方法があればご教授いただければ幸いです。

<h3>以前書いたUnityでARKitに関わる記事</h3>
[【Unity×ARkit】AR空間にある3Dオブジェクトを持ち上げる](https://qiita.com/Tanktop_in_Feb/private/31211acec415ddadb3ed)
Blend For Visual Studio と Visual Studio の違い

<h1>Blend For Visual Studio と Visual Studio の違い</h1>

WPFを学習するにあたり、[参考にさせていただいているサイト](https://blog.okazuki.jp/entry/2014/12/21/205558)で
「Behavior」を実践してみたが、その際「Blend For Visual Studio」を使用したので、
VSとどう違うのか？を調べたのでメモします。

以下のサイトが分かりやすかったです。
[Comparison Visual studio 2015 and Blend for Visual Studio [closed]](https://stackoverflow.com/questions/35008585/comparison-visual-studio-2015-and-blend-for-visual-studio)

いろいろこんなことができる、ここが違う、と詳しく書いてくれてる方もいますが、
簡単に言えば
>Designing animation, storyboards, attaching behaviors, ... is all easier in Blend. 

アニメーション、storyboards、behaviorsの利用はBlendの方が向いている。

>Other development features are easier in VS (debugging, server connections, source control, managing non UI sourcecode, ...). 

他機能はVSの方が実装しやすい(デバッグ、サーバー接続、ソースのコントロール、UIのソースコードでないものなど)。
>・Underneath both run on the same engine.
>・Both are very much connected, you can even switch between them.


・どちらも同じ仕組みで動いている。
・Blendで作成したプロジェクトをVSで扱うことも、その逆もできる。

などでした。
以上