OmniAICreator/Qiita-1.07M huggingface dataset:
さよならKinect　～VisualGestuerBuilderの落とし穴～

<a href="https://qiita.com/yuzupon/items/db367dea73bc78227331">前回</a>使ったVisualGestuerBuilder！
これを何も考えずに使うとたまにクラッシュする！！！

今回はそんな落とし穴を紹介しようと思います

VisualGestuerBuilderでビルドしているときにクラッシュ！
![1.PNG](https://qiita-image-store.s3.amazonaws.com/0/191497/0c59149f-1629-043b-39c2-c28c9b384710.png)


もう一回起動しなおしてOutPutを見てもエラーが書かれることなく落ちる。。。

なんだろうと頭を抱えました

#この時点で分かっていること
・動画のデータはしっかりとれている
・他のポーズでビルドをしたときビルドができた

#なぜexeが停止したのか
・ValueでFalseが無いとき
・撮影データの中にBodyデータが入っていないとき

まぁ二個目はなんとなくわかりますが、
一個目は要注意です

ポーズをしたまま最初から最後まで撮影してしまうと、false設定をしないデータとなってしまいます
対策としては、false用のデータをとってAddClipで追加しちゃえば大丈夫です！


以上となります！
次回気が向いたらUnityでポーズ判定するところをかきま～す
xpathで指定の祖先を取得する

「祖先」であっているのかどうか。。。

以下のようなHTMLがあったとして

```html:target
<div class='row'>
    <div class='col-md-12'>
        <div class='form-group'>
            <label class='control-label col-md-4'>ID</label>
            <div class='col-md-8'>
                <input type='text' name='id' class='form-control input-sm'>
            </div>
        </div>
        <div class='form-group'>
            <label class='control-label col-md-4'>パスワード</label>
            <div class='col-md-8'>
                <input type='password' name='password' class='form-control input-sm'>
            </div>
        </div>
    </div>
</div>
```
IDのform-groupを取得したい場合は以下のように指定できる

```xpath:xpath
//input[@name='id']/ancestor::div[2]
```
``` div[1] ``` だとcol-md-8 が取得できる
指定した数字分親を遡る感じ

これでseleniumの自動化が捗る
RISC-Vソースコード読書会(5)

###仮想アドレスサポート###
今回はRIDECOREに不足している部分なので、読むソースが無い。そのため、設計指針を記述する。

RIDECOREは実記憶マシンであるため、Linuxが動作するためにはMMUが必要となる。MMUはTLBとページテーブル検索(テーブルウォーク)のためのFSMで構成される(と思われる)。RIDECOREにおいてはPCが確定したら命令メモリを次のステージである`<IF>`で検索するが、その前に論理アドレスVAから物理アドレスPAへの変換が必要である。このため、アドレス変換ステージの挿入が必要と考える。TLBとキャッシュメモリとの同一サイクル検索は厳しそうであるため。VAとPAの変換ペアを記憶しているのがTLBであり、TLBに存在しない場合にはTLBミスが起きる。

###TLBミス###
TLBミスすると一般にはパイプラインを停止し、テーブルウォーク(後述)を行い、アドレス変換を行ってからTLBに格納し、後続命令のフェッチに戻る。RIDECOREやOoOマシンではもしかしたら投機実行可能なので、パイプラインを停止する必要は無いのかもしれないが、命令アドレスがTLBミスすると、その後が実行可能とも思えないので、パイプラインを止めても性能はあまり変わらないような気がする。一方で、オペランドアドレスの変換の場合は、TLBミスの場合、パイプラインを止めずに後続のレジスタ使用命令を先に実行できる気がする。気がする、が多いのはOoO(Out of Order)マシンの経験が無いためで、ひととおり読み終わったら判明してくることを期待。
経験の範囲で言えば、設計時にバグが出るところは以下であり、ページクロスアクセスの前半と後半でキャッシュミス、TLBミスする場合としない場合の8通りの組み合わせについて、良く考えて実装しないとバグの温床となりそう。

###仮想アドレス空間###
デマンドページングを行う仮想アドレス空間には32bit空間(Sv32)、39bit空間(Sv39)、48bit空間(Sv48)が存在する。


|仮想アドレス空間|Sv32|Sv39|Sv48  |
|---|---|---|---|
|ページサイズ|4K|4K|4K|
|ページテーブル|2段|3段|4段|
|PTEサイズ|4  |8  |8  |

Sv39とSv48は制御はほぼ同一のため(ページテーブル段数=繰り返し回数のみの相違)両方をサポートするのが望ましいとある。
###Table Walk FSM###
```
1. a=satp.ppn << 12; i=1;
2. pte=@(a+va.n[i]<<2);
3. if (pte.v==0 || (pte.r == 0 && pte.w==1) page_fault();
4. //ここからPTE valid
   if (pte.r==1 || pte.x == 1) goto 6. // leaf
   else i=i-1; if (i < 0) page_fault();
   a = pte.ppn << 12;
   goto 2;
5. // leaf
   pte.x, pte.r, ptexw, pte.u 及び statusレジスタのSUM, MXRフィールドを
   使用して許可判定, if NG page_fault();
   if (i > 0 && pa.ppa[i-1:0] <> 0) page_fault(); // miss alignd super page
   if (pte.a == 0 || (store && pte.d == 0) page_fault();
```
  
という感じのFSMを記述し、`<IF>`ではなく`<ID>`にtable_walk FSMを置き、内部命令に置き換えてパイプラインに流せば良いのではないだろうか。~~いわゆるマルチサイクル命令などもこのように実行しているはずで、その処理とステージを合わせるのが良いと思われる。~~が、OoOだとそのような概念も変わるのかもしれない。

###RIDECORE不足部分###
1. 仮想アドレスサポート
2. キャッシュ
3. フローティングポイント
4. 除算
5. 特権命令(?)
6. C(ompressed)

パッと見、これらが思いつくが、Rocket Chipの開発目的はそれ自体で動作するだけでなく、様々なプロセッサのコンポーネントライブラリとして役立つとのことなので、そこから持ってきても良いかもしれない。問題はChizelで記述されていることで、Verilogに変換後のコードを整理して持ってくるか、ブラックボックスで持ってくるか。できればRefactoringしたいところではある。

##マルチサイクル命令##
ざっと全体を眺めてみてもマルチサイクル命令はなさそう。ここでマルチサイクル命令を説明しておくと、一般的なRISCは基本、シングルサイクル実行である。が、例外があり、例外処理、Enter、load multi、TLBミス, 乗除算だとかにおいて、内部的に命令を決まったシーケンスで実行する必要がある。その場合、前段である`<IF>`を止め、内部的には`<ID>`を複数回実行する実装が考えられる。このことをマルチサイクル命令(処理)と呼んでいる。さてRIDECOREには、(1)RISC-V ISAにはマルチサイクル実行の命令が少なく?、(2)例外処理、仮想記憶をサポートしていない、との両方からマルチサイクルシーケンサは見当たらなかった。

###実装方針###
基本的には`<ID>`で命令が内部的に増殖したように見せれば良い。選択枝として、前段の`<IF>`を止めるか止めないかがある。OoOであれば止めなくても良いかもしれない。なるべくdecoupleすることがOoOの基本と考えると、ここは止めない方針とする。IDシーケンサは単一のFSMとするが、通常はシングルサイクル実行ステートにいる。例外処理等が起動されると、その原因に応じてマルチサイクルステートに移行する。その一つがテーブルウォークステートである。ステートは階層構造を持ち、テーブルウォークステート内部では上記のシーケンス動作を実行する。

"Modern Processor Design"によれば、TLBミスの解消に2通りあり、ひとつは上記のようにシーケンサで実装する手法と、RISCライクにTLBミストラップから命令で実行する方法がある。命令であれば可変にできるとは言え、TLBミス処理は決まったパターンであるため、ハードウェア実行とする。

読書会(6)はこちら
https://qiita.com/mocapapa/private/d6f2cc2f95ed22de59ac
JSONとYAML

##JSON入門
https://dev.classmethod.jp/etc/concrete-example-of-json/
http://www.json.org/json-ja.html

##YAML入門
https://dotinstall.com/lessons/basic_yaml_v2
https://dotinstall.com/lessons/basic_yaml/29001

https://ja.wikipedia.org/wiki/YAML
http://magazine.rubyist.net/?0009-YAML#l1
マイクロサービスの基本

マイクロサービスとは
https://recompile.net/posts/microservices.html

マイクロサービスの基本
https://news.mynavi.jp/itsearch/article/devsoft/1879

マイクロサービスのメリット
https://knowledge.sakura.ad.jp/3377/
https://html5experts.jp/shumpei-shiraishi/24247/
https://tracpath.com/works/devops/microservices/

マイクロサービスのデメリット
https://martinfowler.com/bliki/MicroservicePremium.html
https://html5experts.jp/miyuki-baba/14776/
http://postd.cc/microservice-trade-offs/

SAPのマイクロサービス
https://japan.zdnet.com/article/35092737/
PowerPointからHTMLにコピペした文字がどこかおかしい

【投稿者環境】MacOS Sierra10.12.6、PowerPoint15.41

__PowerPoint__のテキストをコピーし、HTMLにペーストした。
ブラウザで確認しても一見、問題なく表示されているのだが、ChromeやFirefoxで__「ページのソースを表示」__してみると…

<img width="150" alt="" src="https://qiita-image-store.s3.amazonaws.com/0/221915/37b29d3c-f8fe-05d1-7f1e-f7768812efb9.png">

と同じ「日」という漢字が並んでいるのにもかかわらず、文字の太さが違う。

原因は、PowerPointが日本語の漢字を中国語に誤認識したため（いわゆる__中華フォント__）。
[Excelの表をPowerPointに貼り付けると言語が中国語になる - マイクロソフト コミュニティ](https://answers.microsoft.com/ja-jp/msoffice/forum/msoffice_powerpoint-mso_other-mso_2010/excel%E3%81%AE%E8%A1%A8%E3%82%92powerpoint/be4391ea-7e9f-4425-b7d4-1ee02be8becd?auth=1)

Android4系の標準ブラウザでは表示されないようなので注意が必要。

視認で見つけることが困難なのだが、たとえば[CotEditor](https://coteditor.com/)（Mac専用のフリーのテキストエディタ）で__文字コード__を__Shift JIS__にエンコーディングしてみると…

<img width="150" alt="" src="https://qiita-image-store.s3.amazonaws.com/0/221915/cd905b7d-e1e2-e263-e8fb-5c3300a65392.png">

のように中国語に誤認識された文字がハイライトされ発見しやすかった。
※思いっきり文字化けする可能性もあるので、念のためコピーしたファイルで。
Cognos 棒グラフのバーによりドリルスルー先を分けるレポート

#概要
この記事を読んで面白い実装だなと思いましたので紹介します。
**Different Drillthroughs for Graph Elements**
http://cognospaul.com/2016/05/05/different-drillthroughs-for-graph-elements/

レポートの実行イメージは、こんな感じで、青バーが「Revenue」、オレンジバーが「Planned Revenue」になります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/147246/96b6faf4-8626-8eeb-0505-278477876191.png)

青バーをクリックすると、Revenueのレポートに遷移します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/147246/8b5e8dab-a299-f70b-038f-3ec7aaf53aa9.png)

オレンジバーをクリックすると、Planned Revenueのレポートに遷移します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/147246/6fe7dbda-b3bc-d46e-d415-61f33d2300bd.png)

注意)：やってみたところ、Internet Explorerでは動作せず、Firefoxでは動作しました。getElementsByClassNameがIEでは駄目なようです。

#内容
レポート定義は以下の感じで、縦棒グラフのSeriesに「Revenue」と「Planned Revenue」を置いて、グラフ自体にドリルスルーを2個、RevenueレポートとPlanned Revenueレポートをターゲットにして設定しています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/147246/f6db6217-6bf8-81f3-3275-e471f385e32f.png)

左側のHTMLアイテムの内容です。
クリックしたバーの表示しているアイテムの名前と、ドリルスルーの名前が一致する方のドリルスルーを実行させるようです。

```html
<script>
var paulScripts = {},  oCR = cognos.Report.getReport( "_THIS_" );


paulScripts.getControl = function (promptName) {
  return oCR.prompt.getControlByName(promptName);
}

paulScripts.getElement = function(objectName){

  var oCV = window['oCV'+'_THIS_'];
  oCV.initializeLayoutElements()
  return oCV.getLayoutElementFromLid(objectName+'_THIS_');
}

/*
 * This will loop through every chart and replace multiple drill definitions with one. 
 */
paulScripts.fixChartDrills = function(chartName){
  var oCV = window['oCV'+'_THIS_']
  , areas = paulScripts.getElement(chartName).parentNode.previousSibling.getElementsByClassName('chart_area')
  , areasLen = areas.length
  , areaDataItemName
  , drills=[]
  , dtargets=[]
;

for (var i=0;i<areasLen;++i){
  if(!areas[i].getAttribute('dttargets')) continue;
  areaDataItemName=oCV.getDataItemName(areas[i].getAttribute('ctx'));

  drills = areas[i].getAttribute('dttargets');
  dtargets =drills.split('>');

  for (var j=0;j<dtargets.length;++j){
    var regexp = /label...(.+?)."/g;
    var match = regexp.exec(dtargets[j]);

    if(match&&match[1] == areaDataItemName) areas[i].setAttribute('dttargets',dtargets[j]+'>');

  }

}

}
  </script>
```

右側のHTMLアイテムの内容です。

```html
<script>
paulScripts.fixChartDrills('Combination Chart1');
</script>
```
nginx location regex tips


### How to proxy pass only certain directory  


 eg
   proxy only `/doc/*/videos/*`
   but not like `/doc/*/*/videos/*`


### before

```/etc/nginx/conf.d/default.conf    
    location ~ ^/doc/ {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
```

### after

```/etc/nginx/conf.d/default.conf
    location ~* ^/doc/[^/]*/videos/ {
        proxy_pass https://backend;
    }
    
    location ~ ^/doc/ {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
```
Visual Studio | WPF > 非同期処理 > Link: ざっくりマルチスレッド(非同期処理)

```txt:動作環境
Windows 8.1 Pro (64bit)
Microsoft Visual Studio 2017 Community
Sublime Text 2
```

### 概要を知りたかった

Visual StudioとWPFで「非同期処理」を行う場合、いくつか選択肢があるようだ。

検索で見つかる記事の大半は、１つの選択肢の詳細、次の選択肢の詳細、次の選択肢の...というように「概要」が掴みにくい書き方をしている。

入門者向けの記事はないか探し、以下を見つけた。
[ざっくりマルチスレッド(非同期処理)](http://gomocool.net/gomokulog/?p=762) @ GOMOKULOG

上記の冒頭の説明が簡潔で分かりやすいです。

自分がこれから勉強するとしたら、「Taskクラス」か「async await」だろうか。

### 備考

概要をつかんでからは、それぞれを原点として付属原点を増やしていく(参考: 可変思考 by 広中平祐さん)。そういう学習方法でないと、時間の使い方が偏ったものになってしまうかもしれない。

何をどのタイミングで勉強すべきかは常に気になる。

@ 生きるのが楽しくなる15の習慣 by 日野原重明さん
> 私は自分の人生はすべて自分が選び取るもの、と覚悟を決めて歩んでいきたいと、いつもそう心に決めています。
...
> そして、どんなときでも良い習慣を選択することを、真剣に考える必要があります。
テストを考えるときはユーザーシナリオを作ってみよう

本記事は、 [弊社ブログに投稿した記事](https://goodpatch.com/blog/create-user-scenario-when-think-about-testing/) のクロスポストです。かつ、 [Goodpatch Advent Calendar 2017](https://qiita.com/advent-calendar/2017/goodpatch)、7日目の記事です。

Goodpatch Advent Calendar 2017では、Goodpatchのメンバーが興味を持っている分野や、利用している技術などについて書いていきます。

---

グッドパッチで唯一QAの肩書をいただいているenpipiと申します。

普段は情シスとして活動しておりますが、様々なプロジェクトの大幅な改修などにスポットでQAとして参加しています。

# はじめに
テストを実施する上で ユーザーの体験を担保すること は非常に重要です。

どんなに緻密にテストをしても達成したいユーザーの体験が損なわれてしまえばサービスの品質は下がってしまいます。

そのため、ユーザーがどんな行動をするか想像して、どんなテストを実施できれば良いか観点を洗い出すことが重要です。

そこでユーザーシナリオを使ったユーザー体験を踏まえたテスト観点の洗い出しを紹介します。

# ユーザーシナリオとは
ユーザーシナリオはあるシナリオに沿ってユーザーの行動や期待を図示化したものです。

ユーザーシナリオを作れば、一連の流れでどんなテストが必要かが洗い出しやすくなります。

今回はQA用に項目をカスタマイズしています。

一例として、架空の飲食店の予約アプリのユーザーシナリオを書いてみました。
“ユーザーがアプリからお店を予約をして、お店側は予約を受け取れる” というアプリを想定しています。

今回はこの架空のアプリを例にユーザーシナリオについて説明します。

![576d4ba7645f8ecafe96155f104c2d0e.png](https://qiita-image-store.s3.amazonaws.com/0/66020/06e6db1e-f694-a243-c544-d6bc41169574.png)
※飲食店の予約ができる架空のアプリのユーザーシナリオ。今回はQA用に項目をカスタマイズしています。


# ユーザーシナリオを描くメリット
ユーザーシナリオを描く3つのメリットを紹介します。

## 1. ユーザー体験のスタートからゴールまでが可視化される
テストに慣れていないうちは往々にして機能ごとに確認しがちです。その場合、予約完了のメールについてテストから漏れてしまう可能性が高くなります。

ユーザーシナリオを描けば、ユーザー体験のスタートからゴールが可視化されるためテストから漏れてしまうリスクを削減できます。

## 2. ユーザー心理をきっかけにテスト観点を想起できる
ユーザーシナリオには “ユーザーの心理” という項目があります。本来のユーザーシナリオでは、作り手がユーザーにどのような気持ちになって欲しいか理想の状態を明記したものですが今回はざっくりと “どういう気持で触るか”  という粒度で記しています。

ステップごとにユーザーの心理が可視化されるので、テスト観点を洗い出しやすくなります。

例えば上記図の “お店一覧” には “早く見つけたいな” とあります。この言葉から私は “速度が重いとストレスになる” ことを想起して「先に文字から表示して、画像はあとから読み込む」といった処理をしているかを確認するテスト観点を見つけることができました。



## 3. チームで共有して、テスト観点をブレストできる
アウトプットがあればチームで共有も簡単です。ユーザーシナリオを叩きにどんなテストをしたら良さそうか発散しやすくなります。

また、流れが可視化されているので、エンジニアに「この場合、どんな動きをしますか？」という質問も意図が伝わりやすくなります。


# ユーザーシナリオを描くときのコツ
ユーザーシナリオを描くときの3つのコツを紹介します。

## 1. 流入経路を網羅しよう

例えばアプリを立ち上げる以外にクーポンメールから直接アプリを開いたり、プッシュ通知から開く可能性もあるかもしれません。流入経路を網羅しましょう。

## 2. ゴールがどこか意識しよう

ユーザーがアプリで予約完了ができても、お店側に正しい内容で通知がいくかまではわかりません。
「ユーザーが予約をできる」という体験は「ユーザーが予約した内容が正しくお店側に伝わる」ところまでを担保する必要があります。

そのため、実際にはこのようなシナリオになります。
予約側は「メールが届くこと」、管理側は「予約内容が正しく登録されること」がゴールですね。



![343aceb152000386a56a78fd15d0b013.png](https://qiita-image-store.s3.amazonaws.com/0/66020/133d3bd5-172a-5fea-87bb-bbe121910831.png)
※先程の図にお店側のシナリオを追加しました。

このように登場人物が増えた場合でもわかりやすく図示化できます。

## 3. テスト観点が上手く出せないときはプロトタイプを触ってみよう

既に完成図がある場合はプロトタイピングツールを用いて実際の動きを体験してみましょう。

遷移図をみながら想像するのと、実際に触るのでは圧倒的に体験が変わります。

実際に手元で触ると「あ、こんな動きするんだ。それなら○○なテストもやったほうがいいかも」とテスト観点も気が付きやすくキャッチアップも早くなります。

![IMG_3504-small.jpg](https://qiita-image-store.s3.amazonaws.com/0/66020/1e429efb-3b21-45c0-d960-f211df91f5f6.jpeg)

手前味噌ですが、弊社で開発しているプロトタイピングツール [Prott](https://prottapp.com/ja/) を使えば誰でも簡単にプロトタイプを作成でき、共有も簡単にできます。

# むすび

テストを実施する上で、ユーザーの体験を担保することは非常に大事なことです。ぜひユーザシナリオを使ってユーザーの体験を意識したテストを実施してみてください！
Zshでnode_modules/.bin配下を補完に表示する

#目的
Zshでnode_modules/.bin配下にパスを通し、Tabキーで補完表示できるようにする。
パスを通す方法はありましたが、補完表示させる方法はなかったので参考になれば嬉しいです。

#確認環境
* Zsh: 5.0.2
* RHEL: 7.4
* npm: 5.5.1

#.zshenvの編集

``` bash
# 引数に渡した文字列をPATHに追加する
function append_path() { remove_path $1; export PATH=$PATH:$1; }
function remove_path() { export PATH=`echo -n $PATH | awk -v RS=: -v ORS=: '$0 !="'$1'"' | sed 's/:$//'`; }

# ディレクトリ変更時に削除するPATH
PREVIOUS_NODE_PATH="";

#  カレントディレクトリにnode_modules/.binが存在する場合、PATHに追加する。
#  前回追加したnode_modules/.binをPATHから削除する。
function update_node_path(){
  # 変数の初期化
  current_node_path=""

  # カレントディレクトリにnode_modules/.binディレクトリが存在する場合、PATHに追加する。
  if [ -d ./node_modules/.bin ]; then
    current_node_path=`pwd`"/node_modules/.bin"
    path+=($current_node_path)
  fi

  # 以前のnode_modules/.binが存在する場合、PATHから削除する。
  remove_path $PREVIOUS_NODE_PATH
  
  # ディレクトリ変更時にPATHから削除するために追加したぱPATHを記憶する
  PREVIOUS_NODE_PATH=$current_node_path
}

# ディレクリ変更時にupdate_node_pathを実行する
autoload -Uz add-zsh-hook
add-zsh-hook chpwd update_node_path
```

#実行結果
* パスを通したいフォルダ(とコマンド)
    /home/user/sample-node/node_modules/.bin/vue

```shell-session
カレントディレクトリの確認
$ pwd
/home/user

パスの確認：node_modules/.binは含まれない
$ echo $PATH
/usr/local/bin:/usr/local/sbin 

パスを通したいディレクトリに移動する
$ cd ~/sample-node

パスの確認：node_modules/.binがパスに含まれている！
$　echo $PATH
/usr/local/bin:/usr/local/sbin :/home/user/sample-node/node_modules/.bin

補完が効くことの確認
$ vue
 -- external command --
vue 

ディレクトリを離れるとパスからは削除される
$ cd ~
$ echo $PATH
/usr/local/bin:/usr/local/sbin 
```

#参考記事
[コマンドパスを自動で通し npm install -g しない](https://qiita.com/Jxck_/items/8f5d1b70b7b5aa6053ee)
Truffle の Migration は何をやっている？

Truffleを使ってみて、チュートリアルのままマイグレーション実行しましたが、中に何をやっているかはわからなかったので、すこし調べてみました。

## migrateコマンド
- `migrations`ディレクトリ配下のスクリプトを実行する
- 前回の実行が成功だった場合は、それ以降の新しいマイグレーションだけ実行する
- 新しいマイグレーションがなければ、何もしない
- `--reset` オプションで実行し直すことができる

## 各マイグレーションファイル
- ファイル名は数値で始まる必要があり、それ以降は説明内容で構わない。
- ファイル名の数値で実行順番決められるようです。
- マイグレーションの中で`deployer`を使って、デプロイなどを実行できる
- １つのマイグレーションファイルの中、複数コントラクトをデプロイできる

```javascript
deployer.deploy(A);
deployer.deploy(B);
```

- `Aがデプロイ成功したらBをデプロイする` のようなこともできる

```javascript
deployer.deploy(A).then(function() {
  return deployer.deploy(B, A.address);
});
```

- マイグレーション処理の２番目の関数はネットワークであり、正式ネットワークなのか、テストネットワークなのかの情報を取得できる

```javascript
module.exports = function(deployer, network) {
  // 正式ネットワーク以外の場合、デモデータ導入する
  if (network != "live") {
    deployer.exec("add_demo_data.js");
  }
}
```

- コントラクトにパラメータを渡すことももちろんできる

```javascript
deployer.deploy(A, arg1, arg2, ...);
```

- 複数コントラクト一気にデプロイするのもできる

```javascript
deployer.deploy([
  [A, arg1, arg2, ...],
  B,
  [C, arg1]
]);
```

- `deployer.link`と`deployer.autolink`関数もありますが、意味まだ理解できてない。

## デフォルトcontracts/Migration.solの処理

```javascript
pragma solidity ^0.4.17;

contract Migrations {
  address public owner;
  uint public last_completed_migration;

  modifier restricted() {
    if (msg.sender == owner) _;
  }

  function Migrations() public {
    owner = msg.sender;
  }

  function setCompleted(uint completed) public restricted {
    last_completed_migration = completed;
  }

  function upgrade(address new_address) public restricted {
    Migrations upgraded = Migrations(new_address);
    upgraded.setCompleted(last_completed_migration);
  }
}
```

- `truffle init`したら、自動で生成されたマイグレーションファイルであり、マイグレーションの情報をスマートコントラクト上で管理している
- `setCompleted`関数は最後実行したマイグレーションのファイル名の数値部分（かな？）を記
- `upgrade`関数の意図は ~~まだ理解できてない~~ @nakajo2015 さんにコメントして頂いて、理解しました。
    - 新しいマイグレーションコントラクトをデプロイした後、古いコントラクトが持っている`last_completed_migration`を新しいマイグレーションコントラクトに設定するように見える
    - ~~だが、`Migrations(new_address)`は初期化関数であるはずなのに、上記ソースの初期化関数はパラメータがないよね？~~
    - ~~`Migrations`だけで、新しいコントラクトであることを勝手に認識できる？なぜ？~~
    - `Migrations(new_address)`は初期化関数を呼び出すのではなく、指定されたアドレス`new_address`からコントラクトを取得し、`マイグレーション`コントラクトとして使うこと
    - 推測になりますが、アップグレードする流れは下記になるじゃないかと
        - 最初デプロイした後のアドレスは**address1**とする
        - 新しくデプロイした後のアドレスは **address2** とする
        
```javascript
var old_contract = eth.contract(abi).at(address1)
old_contract.upgrade.sendTransaction(address2)
```

## 参考記事
- [Running migrations | Truffle Suite](http://truffleframework.com/docs/getting_started/migrations)
Enumを使ってフラグ値を良い感じに扱う

「間違った使い方ができない」ようなコードを書くためにはEnumが有用です。

# 元ネタ
https://speakerdeck.com/twada/php-conference-2016-revised

## 防御的プログラミング
コードを書く人間であれば誰しも,『良いコードとは何か』という問いに直面した経験があるかと思います。
これを一概に言い切ることは難しいですが,個人的にわかりやすい指標として「間違った使い方をする方が難しい」というのが挙げられると考えています。

### コード例

元ネタ:https://twitter.com/yoookd/status/933711986071953409

具体的に、以下のコードを例にします。

```php
<?php

class Something {
    public function praise($country) 
    {
        if($status === '1'){
            return 'Awesome';
        }else if ($status === '2'){
            return 'Excellent';
        }
        }else if ($status === '3'){
            return "...actually it's not bad";
        }
        throw new Exception('not defined country');
    }
}
```
引数に`country`を受取り,これが1の時はアメリカ人なのでAwesome,これが2の時はオーストラリア人なのでExcellent,これが3の時は英国人なので...actually it's not badと返します。
国籍設定に他意はありません。

この関数の「正しい」使い方を知るためには,関数の処理内容を見て「あ、1か2か3のどれかを渡すんだな」と理解する必要があります。あるいはコメントでそれを説明する方式もあります。いずれにせよ,関数の処理を文書かソースから理解し,関数を呼び出す側で1〜3以外の値が渡されないように工夫する必要があります。

### Enumを使ったコード例 

引用:https://qiita.com/Hiraku/items/71e385b56dcaa37629fe

```php
<?php
abstract class Enum
{
    private $scalar;

    public function __construct($value)
    {
        $ref = new ReflectionObject($this);
        $consts = $ref->getConstants();
        if (! in_array($value, $consts, true)) {
            throw new InvalidArgumentException;
        }

        $this->scalar = $value;
    }

    final public static function __callStatic($label, $args)
    {
        $class = get_called_class();
        $const = constant("$class::$label");
        return new $class($const);
    }

    //元の値を取り出すメソッド。
    //メソッド名は好みのものに変更どうぞ
    final public function valueOf()
    {
        return $this->scalar;
    }

    final public function __toString()
    {
        return (string)$this->scalar;
    }
}

final class Country extends Enum
{
    const USA = '1';
    const AUSTRALIA = '2';
    const BRITISH = '3';
}

class Something {
    public function praise(Country $country) 
    {
        switch($country->value()){
            case Country::USA:
                return 'Awesome';
            case Country::AUSTRALIA:
                return 'Excellent';
            case Country::BRITISH:
                return "...actually it's not bad";
        }
    }
}
```

この書き方だと,例えば`praise`関数に対して`4`という値を与えるとInvalidArgumentExceptionが発生します。先のコード例でも`4`という値を渡すと正しく動かないという点では共通していますが,InvalidArgumentExceptionというメッセージが出されることで,「あ、値の渡し方が間違えているんだな」と利用者に対して理解してもらうことができます。
TensorFlowのWide & Deep Learningを直感的に理解する

[Fringe81 Advent Calendar](https://qiita.com/advent-calendar/2017/fringe81) 19日目です。

本記事は、Wide & Deep Learningの基本的な概念の理解をゴールにしており、実装の細かい話については触れません。

Wide & Deep Learningの詳細を知りたい方は以下のページを参照下さい。

- [TensorFlow Wide & Deep Learning Tutorial](https://www.tensorflow.org/tutorials/wide_and_deep)
- [Research Blog: Wide & Deep Learning: Better Together with TensorFlow](https://research.googleblog.com/2016/06/wide-deep-learning-better-together-with.html)

## 対象読者

- Python/TensorFlowで機械学習のモデリングをしている
- 高次元スパースなデータを扱っている
- 線形モデルとDeepLearningの良いところ取りをしたい

## TensorFlowとは

以下の記事を参照下さい。

- [DeepAge: ビッグデータを分散学習するDeep LearningライブラリTensorFlowとは](https://deepage.net/tensorflow/2016/12/30/what-is-tensorflow.html)

## Wide & Deep Learningとは

端的に言うと、線形モデルとDNNをハイブリッドしたモデルです。
特に重要となってくる概念は、カテゴリ変数の疎表現（one-hotベクトル）と密表現（embedding）を同時に利用することができるということです。
スパース表現はカテゴリの記憶ベースな特徴量、密表現はカテゴリを一般化した特徴量としてそれぞれ異なる働きをするため、それらを合わせることでよりリッチな情報が出来上がります。
もちろん、カテゴリ特徴量だけでなく、普通の数値特徴量も合わせて扱うことが可能です。

## 適したタスク

カテゴリ変数が多く疎な入力データを扱うタスクで有効で、例としては以下のようなタスクが挙げられます。

- レコメンドシステム
- 検索
- ランキング学習

## 線形モデルx疎表現

食べ物の検索エンジンで「クエリ」と「食べ物」の関連度(`-1<=y<=1`)を予測するモデルを例にして考えてみます。
線形モデルでこれを実現するには、クエリと食べ物のペアを交差カテゴリとしてone-hotベクトルを入力とします。
one-hotベクトルは、該当するカテゴリの次元に1が立って、それ以外の次元はすべて0になるので、非常にスパースなベクトルとなります。

<img width="665" alt="スクリーンショット 2017-12-19 18.00.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/95465/ffbd9a8a-d667-5faf-6321-2a9acf46755b.png">

この方法では、クエリと食べ物のペアの関連度を個々に記憶しているだけなので、前例の無いデータが対して予測ができないという問題があります。

## Deepモデルx密表現

Deep Neural Networkでは、入力となるカテゴリを低次元の密表現(embedding vector)として扱い、カテゴリの潜在的な類似性を考慮することができます。
食べ物の検索エンジンの例において、クエリと食べ物を同じ低次元空間のベクトルを割り当てるモデルを考えてみます。

<img width="939" alt="スクリーンショット 2017-12-19 18.21.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/95465/ba3f2cc4-59a9-07b4-efb6-5ee65999d1e8.png">

各クエリ・食べ物のEmbeddingは、以下の図のように潜在的に近しいカテゴリが類似したベクトル表現となるように学習されます。

<img width="620" alt="スクリーンショット 2017-12-19 18.50.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/95465/0aa273b8-0ad2-6851-1a5e-ab5021215cd2.png">


このようにカテゴリを一般化することによって、初見のクエリx食べ物のペアについても関連度を計算できるようになり、より高度な予測が可能となります。
ただ、一般化はいつでも有効というわけではなく、例えば上の例において「豚骨 こってり ラーメン」のような具体的なクエリは明らかに「豚骨ラーメン」を指しているとわかるので、このような場合には一般化よりも記憶ベースの予測が確実になります。

## Wide & Deep Learning

線形モデルとDeepモデルはそれぞれ一長一短があるので、線形モデルとDeepモデルを融合してしまえという発想で作られたのがWide & Deep Learningです。

<img width="1279" alt="スクリーンショット 2017-12-19 18.58.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/95465/25a37d8e-0344-06bd-0cd7-34e2f99b88dc.png">

Wide&Deepモデルでは、線形モデルの重みと、Deepモデルの重みを誤差伝搬法で同時に学習していきます。
これを自前で一から実装するとなると複雑で大変ですが、TensorFlowが提供するAPIを利用することで、簡単にWide&Deepモデルを組むことができます。

具体的な実装については別記事で書いていきたいと思います。
デッドロックおじさんの言ってる事がなんかおかしい

http://tech.mercari.com/entry/2017/12/18/deadlock
こちらを読ませていただいたのですが、色々腑に落ちないので…

## 事例1)出品者と購入者

```
メルカリはC2Cのフリマアプリですので、
お客さまは出品も購入もできます。 ここで、あるAPIの中に、

「(1)出品者の情報を更新し、(2)購入者の情報を更新する」

という処理が書かれていたとしたらどうでしょうか？ 
もちろん、処理は1トランザクションの中で行われます。
以下のコードに何か問題はあるでしょうか？(制限時間5秒)
```

この質問だけではわからないですよね ? 後の説明を読めばわかるのですが、問題はこの操作の対象が、***出品者***と***購入者***と呼んでいるものはユーザに対する個別の識別子(例えばユーザID)を元に同一のテーブル上に存在する事なはずです。

要するに例えば

```
CREATE DATABASE TEST;
USE TEST
CREATE TABLE mercari_test (id int primary key, seller_data text, buyer_data text);
INSERT INTO mercari_test (id) VALUES (1);
INSERT INTO mercari_test (id) VALUES (2);
```

という mercari_test というテーブルを作って

```
START TRANSACTION;
UPDATE mercari_test SET seller_data = 'hoge' WHERE id = 1;
UPDATE mercari_test SET buyer_data = 'moge' WHERE id = 2;
COMMIT;
```

という操作と

```
START TRANSACTION;
UPDATE mercari_test SET seller_data = 'hoge' WHERE id = 2;
UPDATE mercari_test SET buyer_data = 'moge' WHERE id = 1;
COMMIT;
```

という操作を同時に行うとデッドロックするよねと言っているのかなと思います。

そりゃそうだよね、だから ? と思ってしまっているのですが、まずそもそもこの update を二つに分けている意味がわからない(後述)のですが、その前に何かしらの避けられない理由があって分けていると仮定しても TRANSACTION 先頭で共有ロックかければ良いのでは無いかなと。

例えば前述の mercari_test の話で言えば

```
SELECT * FROM mercari_test WHERE id=1 OR id=2  LOCK IN SHARE MODE;
```

とか入れておけば良いだけなのではないの ? と思えてならないです。これであればそのトランザクションで更新されるレコードが同時にロックされるので処理順序がどうのと言った状況は起きないし、後からきた処理の前半だけが処理されロックされるということもありません。
もちろん

```
UPDATE
	(SELECT  1 AS buyer_id,  2 AS seller_id) AS t1
	INNER JOIN mercari_test AS buyer  ON t1.buyer_id  = buyer.id
	INNER JOIN mercari_test AS seller ON t1.seller_id = seller.id
SET
	buyer.buyer_data   = 'buyer',
	seller.seller_data = 'seller'
;
```
なんて書き方で一回でできるんじゃ無いの ? とも思えたりもします。

##事例2)正規化に伴う複雑化

提示されている構造は transaction に対して　transaction_address が 1:多 になっているものです。ただしここで問題となるのは

```
住所情報は引っ越しや入力ミスなどを想定して、取引の最中に変更することができます。この時、実装的には関連しそうなレコードを全部更新するようにしていました。
```

という理由の元に

```
UPDATE ... WHERE transaction_id = xxx AND type = 'src';
UPDATE ... WHERE transaction_id = xxx AND type = 'dst';
UPDATE ... WHERE transaction_id = xxx AND type = 'cvs';
```

という操作を行なっていることに思えます。とりあえずギャップロックするかどうかに関係なく

```
UPDATE ... WHERE transaction_id = xxx AND type IN ('src', 'dst', 'cvs');
```

で一回で終わるじゃんとも思えるのだけれど、その前後でなんか別の事をやっているかもしれずその辺の事情は見えません。でも、少なくとも提示されている情報だけであれば "なんで分けているの ?" という疑問しかわかないのです。

ところでこれ、正規化関係ありますか ?

ごめんなさい、天下のメルカリ様のエンジニアの書かれる文章にケチをつけるわけでは無いですが、どうもなんかおかしい気がしてならなくてちょっと駄文を綴ってみました。
2017年に遭遇したWEBサービスの脆弱性




17卒でニジボックスに入社した@ats05です。

入社から9ヶ月目、現在は交通系サービスの予約システムの開発・運用をしています。

そこで実際に発生していた脆弱性と、実施した対策について忘れないため記事にしたいと思います。

教科書的な脆弱性対策の話ではなく、実装時に見落としていた脆弱性なので、より活きた情報ではないかなと。



## 1.メールヘッダの改行コードインジェクション

### 発生箇所

クライアントサイト内、メールアドレスを登録する部分

### 原因

登録処理のバリデーション不備



メールアドレスを登録する際、htmエンコードされた改行コード(%0d%0a)を利用することで、メールヘッダに複数のメールアドレスを挿入することが可能になり、想定外の操作がされてしまう可能性があります。

今回の事象では、メールアドレスをhogehoge@example.com%0d%0aCc:fugafuga@example.comとして入力すると、メール送信時に改行コードを判断し、

    To:hogehoge@example.com
    Cc:fugafuga@example.com

というメールヘッダが作成されてしまいます。

### 対策

メールアドレスを正規表現で補足しようとすると、特定のキャリアでのみ特殊な文字が許されていたりと非常に厄介なようです。

複雑にしすぎた正規表現は見るだけでもうアレなので、極力シンプルにしたいところです。

というわけで、結局これに落ち着きました -> ^[\w_\.\-]+@[\w_\.\-]+$

フロントエンドのバリデーションはもちろん行いますが、ローカルプロキシ等を使えばいくらでも回避できるので、

きちんとバックエンドでもチェックします。



## 2.XSRF

### 発生箇所

あるwebアプリ上で、APIサーバにデータを送信するsubmitボタン

### 原因

認証トークンの不備



現時点で、主要なフレームワークにはほぼXSRFの対策が組み込まれています。

具体的には、ランダムな値をhidden属性のフォームで送信するといった方法が取られています。

今回はこれが発生したのは、あるwebアプリ(SPA)から別のAPIサーバにPOSTする部分で、ここはフレームワークの管轄外になってしまいます。

自動で挿入されているため逆に見落としが発生しがちなポイントでした。

対策

サーバでセッションと紐付いたランダムな値を発行し、webアプリ側ではPOST時にその値も合わせて送信するようにします。

フレームワークが自動でやってくれていることを手動で実装できれば十分だと思います。







## 3.クリックジャッキング

### 発生箇所

サイト全体

### 原因

iframe等でページを任意のサイトに埋め込めてしまうようになっている

クリックジャッキングの説明は割愛しますが、要は必要のあるページ以外iframe等で呼び出せないようにしてしまえばいいわけですね。

### 対策

Apache/Nginxの設定ファイルに以下の記述を追加

- Apache

    Header append X-Frame-Options SAMEORIGIN // 同一生成元での埋め込みのみ許可する場合
    Header append X-Frame-Options DENY // 完全に禁止する場合

- nginx

    add_header X-Frame-Options SAMEORIGIN;　// 同一生成元での埋め込みのみ許可する場合
    add_header X-Frame-Options DENY; // 完全に禁止する場合

---

## 4.CookieのSecure属性不備

### 発生箇所

サイト全体

### 対策

Secure属性をオンにする設定をする

フレームワークによって異なるが、設定ファイルのCookieに関連する項目付近にあるはず



CookieがSecureでないと、httpsでないときもそのcookieを送信してしまいます。つまり、スニッフィングツールなどで簡単にCookieを盗聴できてしまいます。

セッション管理を利用されて、なりすまし等が可能になってしまいます。





---



XSSやSQLインジェクションなど有名で派手な脆弱性は意識的に気をつけていますが、こうした小さい項目はあまり注目していませんでした。

ある個人のアカウントがなりすまされてしまったり開発者が意図しない動作を引き起こされてしまうと、そこから別の犯罪に利用されたりという可能性があります。

脆弱性の情報に触れるたび、「うちのサービスでは大丈夫だったかな...」と思い返すようにしたいですね。
Google フォト にAPI経由で画像や動画をアップロード

# ご挨拶

この記事は [ピクシブ株式会社 Advent Calendar 2017](https://qiita.com/advent-calendar/2017/pixiv) 22日目の記事です。
今年の4月に中途で入社した @yensaki です。
Ruby エンジニアとして [pixivFACTORY](https://factory.pixiv.net) というサービスを運用・開発しています。
イラストをアップロードして簡単にグッズを作成できるサービスです。

# Google フォト

本記事は画像や動画を管理するのに使える Google フォト についてです。
Google フォト はアップロードサイズを「高画質」、「元のサイズ」から選ぶことができ、「高画質」だと変換はされるものの容量制限なしでアップロードできます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/38175/a6de9824-8b4c-7b98-ed90-0993d6da12b8.png)

日常的に蓄積される動画はどこでも観れるようにしたいし、容量も嵩むので悩んでいたところですが、
API 経由で Google フォト にアップロードできれば全部自動で管理できて快適なのでは？
と至ったので、今回は動画の API 経由アップロードについて検証しました。

# API

https://developers.google.com/picasa-web/docs/3.0/developers_guide_protocol#PostVideo

## Picasa

Google フォト としてのAPIは用意されていませんが Picasa Web Albums Data API がそのまま使えるそうです。
Picasa はクローズされた Google の写真管理サービスだそうですが使ったことがないので詳しくはわかりません。
Picasa Web Albums Data API を使うには対象 Google アカウントの access_token が必要です。

## access_token

access_token の取得ではこちらを参考にしました。
https://qiita.com/iwaseasahi/items/2363dc1d246bc06baeae

# 実装

動画のアップロードは metadata で送信します。

user_id は Gmail アドレスのローカル部(`xxxx@gmail.com` の `xxxx`)。
アルバムを指定してアップロードする場合は album_id を指定する必要があり、下記 API で取得できます。
既にそのアカウントでログイン済みであればブラウザ上での GET アクセスでも取得できます。
https://developers.google.com/picasa-web/docs/3.0/developers_guide_protocol#ListAlbums


## コード

Ruby で実装。
HTTPクライアントは [Faraday](https://github.com/lostisland/faraday) を使いました。
今回は動画アップロードを検証したいので動画ファイルですが画像ファイルでも同様です。
この形式で数種類の動画ファイル、画像ファイルをアップロードしました。

```ruby
require 'faraday'

conn = Faraday.new(url: "https://picasaweb.google.com") do |faraday|
  faraday.request :url_encoded
  faraday.response :logger
  faraday.adapter Faraday.default_adapter
end

user_id = "USER_ID"
album_id = "ALBUM_ID"
access_token = "ACCESS_TOKEN"
file = Faraday::UploadIO.new("./file.mp4", "video/mp4")
title = "file.mp4"
description = "DESCRIPTION"
body = <<-EOS
Media multipart posting
--END_OF_PART
Content-Type: application/atom+xml

<entry xmlns='http://www.w3.org/2005/Atom'>
  <title>#{title}</title>
  <summary>#{description}</summary>
  <category scheme="http://schemas.google.com/g/2005#kind"
    term="http://schemas.google.com/photos/2007#photo"/>
</entry>
--END_OF_PART
Content-Type: video/mp4

#{file.read}
--END_OF_PART--
EOS

res = conn.post do |req|
  req.url "/data/feed/api/user/#{user_id}/albumid/#{album_id}?access_token=#{access_token}"
  req.headers['Content-Type'] = 'multipart/related; boundary="END_OF_PART"'
  req.headers['Content-Length'] = file.size.to_s
  req.headers['MIME-version'] = "1.0"
  req.body = body
end
```

# 結果

- 動画は Picasa Web Albums Data API ガイドに記載の通り、指定の形式、画面サイズ(480x360)、容量(~100MB)でなければアップロードできませんでした。
  - Google フォト サイト上でのアップロードが問題ない動画ファイルでもNG
- 画像は試した範囲では全てアップロードできました
    - アップロード後に保存容量を確認すると使用量が増えていました
    - Google フォト のアップロードサイズ設定自体は「高画質」になっている

# まとめ

相当小さい動画にしないとアップロードできないこと、アップロードサイズ「高画質」が適用されないことから
この API を動画の日常的な自動アップロードに利用するのは難しそうでした。
Google フォト 専用の API などができて、動画アップロード機能が拡張されることがあればまた検討してみようと思います。

保存容量は購入すればよいので画像管理としては有効に活用できるのではないでしょうか。

[ピクシブ株式会社](https://www.pixiv.co.jp/)では定常的な作業をガンガン改善できるエンジニアを募集中です！

次回は @syoichi さんです。
お楽しみに！
非エンジニアが書く、エンジニアとの共存録

#■はじめに
私はエンジニアではありません。
自分でコードを書くこともできなければ
皆さんの為になるような技術的なことを書くこともできません。

それでも、エンジニアの方と**一緒に仕事をしている**という
この面白い状況を伝えたく筆を執りました。

挿絵もないただの文章ですが
空を眺めて、「雲の速さはどれくらいだろうか」と予想するくらい暇な状況に陥った時
「あ、そういえば」と目を通して頂けると幸いです。




#■出会い
「webサービスを開発・運用していくのにチーム内にエンジニアがいないのはまずい。」
私の所属する部署のリーダーの発言であります。
私はそこで初めて"えんじにあ"という生き物に出会いました。

PCに向き合い、不思議な文字列を連打したり
過去に連打されたであろう文字列を眺めて楽しそうに話をしたりする生き物を、
人は"えんじにあ"と呼ぶらしい。（実際はもっとすごいことをしている）

**「何を言っているのか分からん。」**

というのが正直なところでありますが
同時に、かすかに、そして確かに、私は高揚したのであります。
過去大好きだったブ〇ッディ・マンデイのような世界が、
ドラマや映画の中だけだと思っていた世界が、
突然自分の目の前に広がったからです。

#■触れ合い
かつてスポーツカーで走り回り、クルマを売る仕事をし、
クルマ中心の星に生息していた私からすれば、別の星にお住まいの方というものは興味の対象でしかありませんでした。

「あ・・・あの、このデータを出して頂きたいのですが・・・」
「うん！分かったよ！」
「（か、会話できたー！）そ、それと、今後自分で出せたりしたら便利だなと思ったのですが、難しいですか・・・？」

恐らくこれがエンジニア星にお住まいの方と交わした最初の言葉でありましょう。
「SQLだね！すぐに覚えられると思うよ！」
「（き、きた！アルファベット3文字！）そ・・・そうですか、ありがとうございます！」

次の瞬間には私のPCにはMySQLがインストールされていました。

**何をされたのかも分かりません。**

何故かeclipsとSublimeTextという**何となくカッコいいもの**も搭載されていました。
WindowsPCとMBAを並べて机に置いて、対して理解もできていない"こんそーる"とやらを開いて
「お・・・！お、私も"えんじにあ"っぽい・・・！？」って思ったりしてました。

なんて言ったら、本気でその世界で戦っている人にはたいそう煙たがられるのでしょう。
エンジニアはプロの世界です。


#■理解
かくして私はエンジニアの方と供にお仕事をしていくことになったのですが
ここで私は「別の星にお住まいの方」という考え方を改めることとなります。

私にSQLを教えてくれる人、過去のコードについて議論している人、
皆に共通して言えることは「ただただ楽しそうだ」ということでした。

私は飯を犠牲にしてでもクルマの改造にお金をかけるほどスポーツカーを愛してやまない人間ですが
やっぱり車の話をするのは楽しいし、「誰かにスポーツカーの良さを分かってもらいたい」
そんな気持ちを持ち合わせています。

"えんじにあ"の方を見ていると、学生の頃に自分が走り屋のチームのメンバーと話をしている姿を思い出し
「自分の好きな事をやっているだけ、好きなことをやっているから楽しいのだ」という、
そんな当たり前のことに気付くのでありました。

「スポーツカーが大好きだ！走り屋だ」と言っておきながらドリフトやF1で食っていく道を選ばなかった私にとっては
好きなことをそのまま仕事にしてしまったエンジニアの方というものは、崇拝すべき存在であり、
考えてみれば、相手からするとクルマを型式で判別する人間も、別の星の人間に見えていたに違いないのでした。

#■共存
非エンジニアとエンジニアが議論を交わしながらプロジェクトが進んでいく私の部署、
聞いたところによると少ないらしく、私は大変恵まれているそう。

その環境のおかげで今ではSQLなら業務に利用できるくらいになり、エンジニアの方が話している言葉も
多少ではありますが理解できるようになってきました。

ありがたい環境に身を置いているにも関わらず
「生き物」だの「別の星の人間」だのと我ながらたいそう失礼なお話であります。
ITが切り離せないと言われている今の時代だから、私は今後もエンジニアさんと一緒にお仕事をしていくのでしょう。

頼もしく、かっこよく、楽しそう、そして何より自由であるエンジニアさんが私は大好きです。



おしまい
【Android】パスワードを表示させる機能をサクッと実装する

Password Visibility Toggleとは別の方法です。
Samplerは[こちら](https://github.com/HaSuzuki/VisblePasswordSampler)

##イメージ

<img src="https://raw.githubusercontent.com/wiki/HaSuzuki/VisblePasswordSampler/visiblepassword.gif" width=40%>

#実装
Pattern0はヤツですが、今回はPattern1の紹介です。
わかりやすいようにTextInputLayoutを使っていますが、使わなくても大丈夫なので
Password Visibility Toggleに頼らずにカスタマイズしたい！って人向けです。

###XML

```xml:activity_main.xml
<!-- 略 -->
    <!-- Pattern 1 -->
    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <!-- password -->
        <android.support.design.widget.TextInputEditText
            android:id="@+id/password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="password"/>
    </android.support.design.widget.TextInputLayout>

    <!-- パスワードの表示非表示 -->
    <CheckBox
        android:id="@+id/password_visibility"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="10dp"
        android:text="パスワードを表示する"/>

<!-- 略 -->
```

###Activity


```java:MainActivity.java

//略

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        TextInputEditText password = (TextInputEditText)findViewById(R.id.password);

        CheckBox passwordVisibilityCheckBox = (CheckBox) findViewById(R.id.password_visibility);

        // パスワード切り替えチェックボックス
        passwordVisibilityCheckBox.setOnClickListener((View v) -> {

            // パスワードのカーソル位置保存
            int cursorPos = password.getSelectionStart();

            boolean checked = passwordVisibilityCheckBox.isChecked();
            if (checked) {
                // パスワード可視化
                password.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
                // カーソル位置セット
                password.setSelection(cursorPos);
            } else {
                // パスワード不可視化
                password.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
                password.setSelection(cursorPos);
            }
        });
    }
}


```
はい完成！

#終わりに
もっといい実装があるよ！って方、コメントお待ちしてます！！
Ruby 2.5 の yield_self

Ruby 2.5 で `Object#yield_self` というメソッドが追加されます。
https://github.com/ruby/ruby/blob/v2_5_0_preview1/NEWS
https://bugs.ruby-lang.org/issues/6721

定義は簡単で、受け取ったブロックの引数に自身を渡して、そのブロックを評価した結果を返します。

```rb
class Object
  def yield_self
    yield(self)
  end
end
```

### 簡単な例

```rb
"foo".yield_self{|s| s + s}
# => "foofoo"
```

`tap` に似ていますが、`tap` は自身を返すのに対し、`yield_self` はブロックを評価した結果を返します。

```rb
"foo".tap{|s| puts s + s}
foofoo
# => "foo"
```

今まで `yield_self` と同じことをするには `tap` の中で `break` する必要がありました。

```rb
"foo".tap{|s| break s + s}
# => "foofoo"
```

### もっと実際的なケース

https://mlomnicki.com/yield-self-in-ruby-25/ を参考にしました。

GitHub の API にアクセスして、Rails リポジトリのスターの数を調べます。

```rb
require 'uri'
require 'net/http'
require 'json'
```

今までだったら、メソッドを入れ子にして書いたり

```rb
JSON.parse(Net::HTTP.get(URI.parse("https://api.github.com/repos/rails/rails"))).fetch("stargazers_count")
```

中間変数に入れたりしていたケースを

```rb
url = URI.parse("https://api.github.com/repos/rails/rails")
res = Net::HTTP.get(url)
data = JSON.parse(res)
data.fetch("stargazers_count")
```

`yield_self` を使うとメソッドチェーンで繋いで書いていくことができます。

```rb
"https://api.github.com/repos/rails/rails"
  .yield_self { |s| URI.parse(s) }
  .yield_self { |url| Net::HTTP.get(url) }
  .yield_self { |res| JSON.parse(res) }
  .fetch("stargazers_count")
```

ブロックなら中間変数と違って名前空間を汚すこともありません。

&記法でも書くことができますが、これは反ってわかりにくいかなと思います。

```rb
"https://api.github.com/repos/rails/rails"
  .yield_self(&URI.method(:parse))
  .yield_self(&Net::HTTP.method(:get))
  .yield_self(&JSON.method(:parse))
  .fetch("stargazers_count")
```

### 名前について
`yield_self` は長いなと思いました...。
[元のissue](https://bugs.ruby-lang.org/issues/6721) を見ると、

![image.png](https://qiita-image-store.s3.amazonaws.com/0/102896/71da7258-72fe-5199-b70d-8bb983fe5398.png)

みたいに言われたりしていて、他にも

apply, transform, alter, mutate, map, morph, cast

などの名前が候補として挙がっていましたが、結局は最初に提案された `yield_self` になったみたいですね。issue の議論は途中で途切れていて、最終的に決まった経緯はわかりませんでした。

簡単ですが、以上です！
RestfulAPIの勉強

##RestfulAPIとは
https://blog.onk.ninja/2017/09/21/review_of_restful_api#%E3%81%AA%E3%81%9C-rest-%E3%81%8C%E5%BF%85%E8%A6%81%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%9F%E3%81%AE%E3%81%8B
Webのインフラをそのまま利用して、簡易な手順でWebサービスへのアクセスを可能にする仕組み。
RESTは、厳密なAPIの仕様というわけではなく、Webを使ったクライアント／サーバ型のシステムにおける、一種の設計原則、アーキテクチャスタイル（設計思想）である。
操作の対象となる「リソース」を URI を使って表して、HTTP メソッドを使って操作する仕組み。


##なぜこの思想ができたのか？
http://wp.tech-style.info/archives/683
昔はメインフレーム上で全部入りのアプリケーションを開発していたので何も問題はなかった。
ところが、昨今はクライアントサーバモデルというシステム構成が一般的になり、またスマホやタブレットの普及により、多くのアプリケーションは各デバイス間でデータを共有する必要が発生した。また、ビジネス環境の変化により、仕様変更に柔軟に対応していくことが求められたため、
①シンプルな設計で、
②直感的に使いやすく、
③開発もしやすい
HTTP、URI といった Web 標準を上手に使う「Restful」という考え方が浸透した。

##RESTfulなAPIの設計を学ぼう
http://www.atmarkit.co.jp/ait/articles/1310/23/news078.html
https://www.wantedly.com/companies/wantedly/post_articles/32977

##設計入門
https://www.slideshare.net/MonstarLabInc/rest-ful-api

##ベストプラクティス
http://postd.cc/some-rest-best-practice/

##GitのAPI
https://developer.github.com/v3/

##SAPのRestful
SAP社もR/3と周辺システム連携の１手段として、Restの考えを記載している。
（以下はSAP Documentページから引用）

SAP provides a range of components that translate the ABAP standards ( RFC, IDoc, BAPI) into the communication formats of the Internet.

In addition, it must be possible to develop applications for SAP systems that are not based on ABAP programming. SAP also provides products for this purpose.

You can find information about Java-based components in the documentation of the relevant product in the SAP Help Portal (for example, AS Java) or on the SAP Service Marketplace ( service.sap.com/connectors) for the standalone components SAP JCo, SAP .Net Connector, and SAP Business Connector (PDF format).

https://help.sap.com/saphelp_nw74/helpdata/de/b0/17988d321c41f2b425c8a0b68fa865/frameset.htm
とりあえずPythonでMeCabを使ってみる

#とりあえずPythonをMeCabと連携させてみたい！

まずは参考にさせていただいたのはこちら[Python + mecab をyum のみで入れる、3つのステップ](URL "https://qiita.com/wan-liner/items/53250505efb908625b6b")
３ステップ目がうまくいかなかったので調べてみました。
ひとまずPythonは入っているとします。３ステップ目のみ変更してみました。

##まとめ
```
rpm -ivh http://packages.groonga.org/centos/groonga-release-1.1.0-> 1.noarch.rpm
yum install mecab mecab-devel mecab-ipadic
pip install mecab-python3
```

上記３つのコマンドを実行するとPythonからMecabが利用できました。管理者権限がない場合はそれぞれ「sudo」を前につけてあげてください。


##リポジトリの設定
最初に

```
rpm -ivh http://packages.groonga.org/centos/groonga-release-1.1.0-> 1.noarch.rpm
```

を実行します。リポジトリが追加されます。

##Mecabのインストール
2番目のyumを使ってmecabをインストールします。

```
yum install mecab mecab-devel mecab-ipadic
```
を実行すると和布蕪がインストールされコマンド上で利用できるようになります。
mecab をコマンド実行し、次の行で何か日本語を入力します。
そうすると解析結果が表示されます。今回は試しに「今日はたくさん雪が降っている」と入力してみました。mecab実行中は何度でも入力できますが、動作確認後「CTRL+C」で一旦コマンドを終了します。

```
# mecab
 今日はたくさん雪が降っている。
こん	名詞,固有名詞,人名,名,*,*,こん,コン,コン
??	名詞,一般,*,*,*,*,*
??	記号,一般,*,*,*,*,*
日	名詞,一般,*,*,*,*,日,ヒ,ヒ
は	助詞,係助詞,*,*,*,*,は,ハ,ワ
たくさん	名詞,副詞可能,*,*,*,*,たくさん,タクサン,タクサン
雪	名詞,一般,*,*,*,*,雪,ユキ,ユキ
が	助詞,格助詞,一般,*,*,*,が,ガ,ガ
降っ	動詞,自立,*,*,五段・ラ行,連用タ接続,降る,フッ,フッ
て	助詞,接続助詞,*,*,*,*,て,テ,テ
いる	動詞,非自立,*,*,一段,基本形,いる,イル,イル
。	記号,句点,*,*,*,*,。,。,。
EOS
^C
```
##Pythonからの利用

次にPythonから利用できるようにします。
参考サイトの３番目で
```
 pip install http://mecab.googlecode.com/files/mecab-python-0.996.tar.gz
```
とありますがこちらを実行すると
```
HTTP error 404 ....
```
とエラーが発生しました。GoogleCodeは2016年1月25日で閉鎖されたようです。それで、mecab-python3をインストールします。

```
pip install mecab-python3
```
とすると無事インストールできました。

##サンプル実行
よくあるサンプルを実行してみます。

```Python:mecab.py
# coding: utf-8

import MeCab
n = MeCab.Tagger()
print( n.parse("今日もあれしないとね") )

```

そしてコマンドラインから

```
# python mecab.py
```
と実行すると

```
今日	名詞,副詞可能,*,*,*,*,今日,キョウ,キョー
も	助詞,係助詞,*,*,*,*,も,モ,モ
あれ	動詞,自立,*,*,一段,連用形,あれる,アレ,アレ
し	動詞,自立,*,*,サ変・スル,未然形,する,シ,シ
ない	助動詞,*,*,*,特殊・ナイ,基本形,ない,ナイ,ナイ
と	助詞,接続助詞,*,*,*,*,と,ト,ト
ね	助詞,終助詞,*,*,*,*,ね,ネ,ネ
EOS
```
と無事表示されPythonからMecabが利用できました。さて何しようかな。
Azure Web Apps の静的ページパフォーマンス計測

#はじめに
Azure Web Apps で、メンテナンスページや、ソーリーページを表示する際に、どのレベルのインスタンスを、何台用意すればいいのか調べたくてパフォーマンス計測しました
#計測方法
表示するページは画像無し、独立したCSSファイル無しのHTMLのみ13KBのファイルを使用。ab で同時接続200、10万回リクエストした際のパフォーマンスを計測
#結果
|	プラン	|	インスタンス数	|	Requests per second	|	Time per request	|	Transfer rate	|
|	:-------:	|--------------:	|	-------:	|	-------:	|	-------:	|
|	D1 (Shared)	|		|	5214.99	|	38.351	|	66847.56	|
|	S1 (Standard)	|	1	|	4017.83	|	49.778	|	51501.96	|
|	S2 (Standard)	|	1	|	4677.41	|	42.759	|	59956.67	|
|	S3 (Standard)	|	1	|	5326.19	|	37.55	|	68273.04	|
|	P1V2 (Premium)	|	1	|	4212.95	|	47.473	|	54003.07	|
|	P3V2 (Premium)	|	1	|	5454.53	|	36.667	|	69918.17	|
|	P3V2 (Premium)	|	2	|	5469.99	|	36.563	|	70116.29	|
#その他状況と考察
- どのプランでもほとんどのリクエストを1秒以内に返していた。S1だけ、時々、リクエストに数十秒かかることはあったが、エラーになることは無かった。ということから、静的ファイルを返すだけなら、どのプランでも問題なさそう。
- D1の元々4コアマシンで動いているので、妙にパフォーマンスがよさそうにみえるが、Shared というくらいなので、同一サーバーに乗っかっている他のウェブサーバーの状況の影響を受けそうなのと、SLA が無いので、実際には、S1 や、今回テストしていない、B1 を選ぶの良さそう。
- 単一ファイルを読み出す場合は、当たり前だが、ストレージのパフォーマンスの影響は無さそう。
- 全体のスループットとしては、今回の13KBの単一ファイルの場合、トータル60～70MB/Secくらいに限界がある感じ。送信するファイルサイズを変えてみたら、230MB/Sec程度まで向上した。上限値は不明。Storage でHTMLをレスポンスした場合60MB/Secが上限なので、単一ファイルを送り出すだけなら、Storage よりもパフォーマンスは優れている。
- App Service のキャッシュパラメーターをイロイロ変更してみたが、ほとんど影響無し。

#まとめ
大規模ウェブサイトの場合、メンテナンスページやソーリーページには B1 インスタンスと CDN の併用で対処、それ以外は、B1 インスタンスだけでも良いかも。
#追伸 Web Apps on Linux でも同様の計測を実施
マイクロソフトが提供している PHP の実行環境を利用し同様な計測を実施。

|	プラン	|	インスタンス数	|	Requests per second	|	Time per request	|	Transfer rate	|
|	:-------:	|--------------:	|	-------:	|	-------:	|	-------:	|
|	S1 (Standard)	|	1	|	579.27|	345.260|	7507.37|

S2やS3とったスケールアップをしても、10%程度の向上しか認められなかったので、PHP の実行環境の Apache 設定等々を変更しないと、Web apps on Linux では、IIS ベースの Web Apps の7分の1程度のパフォーマンスになってしまう。羽フォーマンスを犠牲にしても.htaccess を使いたいというような理由が無い限り、通常の Web Apps の方がコストパフォーマンスが高いという結論。
（最終的に上手く動かないので調査中）NectarJSというJavaScriptのマルチプラットフォームコンパイラ

NectarJSという、すべてのプログラムはjsで書いて、どのプラットフォーム用にもコンパイルできるよ！
という「JAVASCRIPT GOD MODE」（原文ママ）なのを見つけたのでご紹介します。

## URL

http://nectarjs.com/

## 触ってみる

[ブラウザ](http://nectar-lang.com/)で触ってみることもできます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/105934/63019433-85f7-015f-f137-794f71496c9a.png)

これでCompileボタン押すと選んだプラットフォーム用のファイルが生成されます。

## cli版

cli版は[キーの発行依頼](http://nectar-lang.com/key/)が必要で、発行されると使えるようになります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/105934/180e6594-df9a-c825-7679-025dac25bcc6.png)


### 設定

キーを貰ったら、以下の手順でインストール&設定をします。

```bash
$ npm install -g nectarjs

$ nectar --setid <貰ったID>

$ nectar --setkey <もらったKEY>
```

これで設定は完了です。

### hello world

適当にファイルを用意します。

```js:hello.js
var hello = 'hello world!!';
console.log(hello);
```

上記のjsファイルをコンパイルしてみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/105934/cb45d56c-62f8-7ae9-acda-fe26bd3cd63f.png)

怒られた、、、

どうもutils.jsがルートからの全ファイルを見ているようなんですが、よくわからないので後で調べてみよう(´・ω・｀)
JetbrainsのIntellij IDEAでDockerプラグインが便利

### IDEAでDockerの状態が見れる
Dockerの管理ツールを使ったことがなく、Cliで叩いていました。
なので、GUIの管理ツール自体に非常に感激したところはあります。

再生マークを押すと手元のマシンのDockerに接続して現在のコンテナとImageの一覧を返してくれます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/24049/ab6b6168-7d92-3dda-8863-71f193f26cd9.png)


### 再生する
Docker Hubなどに上がっているDockerのイメージをIntelliｊ IDEAで使うためには、先にImageをプルしておく必要があります。
IDEA内でやるなら、Ctrl（Commmand） ＋ Shift ＋　Aで"pull image"と入力し、Image をプルします。

プルし終わったら、起動のコンフィグレーションを設定します。
コンフィグレーションウィンドウを出し、プラスマークからDocker > Docker Imageを選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/24049/8c8bc52f-f44b-a5fa-ef7e-6cf415943cc4.png)

それぞれの項目を埋めます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/24049/bd7df504-27b7-61d5-f812-b9d3dc3299f6.png)

そして再生マークを押せば、そのコンテナが立ち上がります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/24049/c21d052e-a731-390d-6e1c-e91585107f82.png)
そのコンテナをクリックすると、立ち上げた状態を確認することができます。
コンテナのコンソールにつなぐ事もできますし、実行中にエラーが出たときなど、ログを確認することもできます

### ビルドする
追加する時にDockerfileを指定すれば、指定ファイルを元にDockerコンテナをビルドして、起動まで直結してやってくれます。
もう一度ビルドするためにはGUIからイメージを削除して、もう一度実行する必要があります。

### まとめ
以前まで、コンソールに残っているhistoryを辿って起動コマンドを叩く、という起動方法をしていましたが、非常に便利になりました。
起動状態の確認やビルドなどは専用アプリを使っても良いんでしょうが、もはや開発をする時はIDEから動きたくない体になってしまいました。
基本的に起動をすることがメインになっていて、たまにビルドするだけなのでその使い方としてはIDEAで十分です。

もしDockerを使っているようだったら、プラグインを入れて試してみることをおすすめします。
IntelliJ IDEAでLaTeXを使う

##内容
本記事ではpLaTeX2e+pBibTeXを環境をIDEAで使用するための導入手順を述べる
##利点
IntelliJ IDEAの優れた保管機能や見やすいUI、豊富な拡張機能を利用できる
また本導入によりbibとpdfの出力を1度に行えるようになる
##前提・環境
OS:Windows10

Editor:IntelliJ IDEA （無料版有料版どちらでも動作）
公式サイト https://www.jetbrains.com/idea/

※学生の場合はUltimateEditonは無償
https://www.jetbrains.com/student/

コンパイラ、インタラプタ:
・pLaTeX2e (platex.exe)
・pBibTeX (pbibtex.exe)
・GhostScript
・dvipdfmx (dvipdfmx)

※これらを導入していない場合は、TeXインストーラ3を用いたインストールを薦める
http://www.math.sci.hokudai.ac.jp/~abenori/soft/abtexinst.html

※TeXWorksとdivoutのインストールは不要なので、ファイル取得後の画面でW32Texのファイル全てと、GhostScriptとGSViewの最新版のみにチェックを付けた状態でインストールすればよい

※他のコンパイラ(upLaTeX2eやupbibtexなど)を用いる場合でも、下記bat内でplatex → uplatexといったように適宜対応させる

##手順
この手順の肝は、保管機能やファイル管理をTexiFyプラグインに任せ、コンパイル設定をbatで指定し、External toolsから呼び出すことにある

※TeXiFy-IDEAのgithubページ
https://github.com/Ruben-Sten/TeXiFy-IDEA

※このTeXiFyプラグインはpdfLaTeXおよびBibTeXをサポートしているが、日本語で論文書きたいならpLaTeX環境を推奨するため本導入が必要


###1.TeXiFyプラグインをIDEAに導入
IDEAを起動し、
Settings → Plugins → Browse responsibilities → texify 
で検索し、 TeXiFy を選択してインスコ
導入後IDEAを再起動

###2.batファイルの作成
メモ帳を開き

```bat:output.bat
@echo off
set resPath=%~f1%\src
set mainResPath=%resPath%\main
set outputPath=%~f1%\out
set mainOutPath=%outputPath%\main

rem bibを出力用のパスにコピー, auxが参照できるようにする
call copy %mainResPath%.bib %mainOutPath%.bib 
rem aux作成
call platex -output-directory=%outputPath% -synctex=1 -jobname=main -kanji=utf8 -guess-input-enc %mainResPath%
rem auxを参照してpbibtexがbbl(blg)を作成
call pbibtex main -kanji=utf8
rem auxとbblを紐付け
call platex -output-directory=%outputPath% -synctex=1 -jobname=main -kanji=utf8 -guess-input-enc %mainResPath%
rem 上記の紐付けを参照にしてpdf作成
call platex -output-directory=%outputPath% -synctex=1 -jobname=main -kanji=utf8 -guess-input-enc %mainResPath% && dvipdfmx %mainOutPath%
rem コピーしたbibは邪魔なので消す
call del main.bib
rem pdfを開く
start %mainOutPath%.pdf
exit 0
```

上記のようなbatファイルを作成する
ほぼコピペでいいはずだが、必要に応じてパスを変更する

※リソースパス・出力パスの指定は、TeXiFyプラグインのLaTeXプロジェクトの新規作成で自動生成されるディレクトリに従う

※前述した通りupLatexを使いたい場合は、上記コード上のplatexをuplatexに変更し、

```tex:main.tex
\documentclass[uplatex]{jsarticle}
```

とドキュメントクラスに追記する必要がある.
###3.IDEAに上記batファイルを適用する
Settings → External tools → add
を選択し、以下のようにディレクトリを指定する

Name:pLaTeX2e+pBibTeX 
Program:output.bat (手順2で作成したbatファイルを選択)
Arguments:\$FileParentDir\$
Working directory:\$FileParentDir\$\out

###4.出力
編集中のファイルから
Tools → External tools → pLaTeX2e+pBibTeX 
を選択するとpdfが表示される

※ショートカットキーに指定すると良い

###5.インスペクションの無効
日本語入力すると

"Non-ASCII characters are not supported by LaTeX out-of-the-box."

という理由でインスペクションが現れてしまうが、上記設定でUTF-8などに対応するようになるため、上記の警告を無効にする必要がある

Settings → Editor → Inspections
より
"Unsupported Unicode character"
のチェックを外す
Copy to IDEすれば他のプロジェクトにも反映されて便利


※Alt+Enterからも設定できる

###6.画像のディレクトリ
上記設定だと画像をoutフォルダに入れなければならないが

```tex:main.tex
%dvipdfmxを使うように指定
\usepackage[dvipdfmx]{graphicx}
%画像フォルダの指定
\graphicspath{{../src/}}
```

と記述すればsrcフォルダ内に画像を保存できる

※テンプレートファイル作ると楽
Settings → File and Code Templates → Files → +
より追加できる
.texファイルの例
https://pastebin.com/8ChThfRh
.bibファイルの例
https://pastebin.com/smeJky44