OmniAICreator/Qiita-1.07M huggingface dataset:
React コンポーネント作成時に非同期通信したいときは componentDidMount に書こう

# componentWillMount vs componentDidMount

「React コンポーネントを画面に表示する際に、サーバーからデータを非同期で取得して、その結果を表示に使う」というのはよくあることかと思いますが、その非同期通信処理はどこに書けばよいでしょうか？パッと浮かぶのは次のどちらかでしょう：

* `componentWillMount()`
* `componentDidMount()`

どちらに書くべきなのか調べてみました。

# 結論: componentDidMount の方がよい

表題の通りですが、`componentDidMount()` の方がよいみたいです。理由は下記。

## プログラマーに誤解を与えない

`componentWillMount()` 内に `setState()` を書くと、なんとなく `render()` までに state が設定完了するように錯覚してしまいがちです。ですが、一般に非同期通信は `render()` 実行までに完了するとは限りません。例えば下記のコードは、データフェッチに時間がかかる場合、 `render()` 実行時に `this.state.items` を参照できずエラーになってしまいます（コードは https://daveceddia.com/watch-out-for-undefined-state/ より引用）。

```js
class Quiz extends Component {
  componentWillMount() {
    axios.get('/thedata').then(res => {
      this.setState({items: res.data});
    });
  }

  render() {
    return (
      <ul>
        {this.state.items.map(item =>
          <li key={item.id}>{item.name}</li>
        )}
      </ul>
    );
  }
}
```

正しく動作させるには、下記のようなコンストラクタを書いて、初期値を設定する必要があります。

```js
  constructor(props) {
    super(props);
    this.state = {
      items: []
    };
  }
```

「Will」の代わりに「Did」を使うことで、書き手は事前にコンストラクタで state の初期化が必要なことを意識しやすいですし、読み手も「通信が完了するまでに初期値で一瞬描画されるんだな」ということが理解しやすくなります。

## componentWillMount は2回実行されることがある

いわゆる isomorphic な設計の場合、`componentWillMount()` はサーバーサイドとクライアントサイドで計2回実行されてしまうそうです。これに関しては私が isomorphic について無知なため詳しく説明できません。すみません・・・。

# 所感

A と B の2つの機能のうちどちらを使うか悩んだとき、「A だと X が実現できるが B ではできないから」といった論理的な理由をつい求めがちですが、「A の方が人にやさしいから」という理由でもいいんだよなあ、という気づきを得ました。

# 参考

* https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/
* https://daveceddia.com/watch-out-for-undefined-state/
* https://stackoverflow.com/q/46043832
jpgやmp3をブラウザで開かずにダウンロード（ファイル保存）させるJavaScript

着地シンプルだったけどドハマりしたのでメモしておく。

* ファイル保存はHTML5の `<a href="" download=""></a>` でも一見できそうだが、jpgやmp3はブラウザ上で開いてしまうのでNG
* HTML5の `saveAs()` は各ブラウザ対応が違いすぎて死んだのでFileSaverというライブラリに任せたかった
* MINE_TYPEの指定不要っぽい？（ファイル形式によっては必須かもしれない）
* 対象ファイルをURL経由で取得する際、axiosの場合は`responseType: 'blob'`が必須だった

```js
// ES2015
import axios from 'axios'
import FileSaver from 'file-saver'

return axios.get('https://hogefuga.com/input_filename.mp3', {responseType: 'blob'})
  .then((res)=>{
    const blob = res.data
    FileSaver.saveAs(blob, 'download_filename.mp3')
  })
```
Elmをインストールできないとき（Ubuntu）

`sudo npm i -g elm --unsafe-perm=true --allow-root`でインストールできます。

# 環境
Ubuntu 16.04 LTS
npmがインストール済み

# エラーメッセージ

```bash
$ sudo npm i -g elm@^0.18.0

npm WARN deprecated node-uuid@1.4.8: Use uuid module instead
/usr/local/bin/elm -> /usr/local/lib/node_modules/elm/binwrappers/elm
/usr/local/bin/elm-make -> /usr/local/lib/node_modules/elm/binwrappers/elm-make
/usr/local/bin/elm-package -> /usr/local/lib/node_modules/elm/binwrappers/elm-package
/usr/local/bin/elm-reactor -> /usr/local/lib/node_modules/elm/binwrappers/elm-reactor
/usr/local/bin/elm-repl -> /usr/local/lib/node_modules/elm/binwrappers/elm-repl

> elm@0.18.0 install /usr/local/lib/node_modules/elm
> node install.js

Error extracting linux-x64.tar.gz - Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/elm/Elm-Platform'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! elm@0.18.0 install: `node install.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the elm@0.18.0 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/takeyuki/.npm/_logs/2017-09-30T09_26_44_798Z-debug.log
```

# 解決法
以下のコマンドでインストールできます。

```bash
sudo npm i -g elm --unsafe-perm=true --allow-root
```

# 参考
https://github.com/gdotdesign/elm-github-install/issues/21
「flex-box」を使った レスポンシブで『複数行5カラム→3カラム→2カラム』的なレイアウトをしたい時のベストプラクティス?

タイトルのとおりですが、「<b>flex-box</b>」を使って単純な複数行のレイアウトを組む場合、
いくつかの方法があります。

![flex.jpg](https://qiita-image-store.s3.amazonaws.com/0/193200/6fd1be46-2c12-7832-4a04-c5b379c89d98.jpeg)


<b>justify-content</b> を使って最後の行だけ左寄せにしたりっていう記事も見かけますが、そこまでするならもうflex-box使わなくていいんじゃ…って疑問に思います(場合によっては必要かと思いますが)、

<b>display:gird</b> に関してもベンダーつければ使えるようにはなりましたけど、
<b>autoprefixer</b>もちょっとまだあれですし、そもそも単発ではちょっと扱いづらい感じもあります。
なので小さな枠で使うのにはやはり<b>flex-box</b>が_float_に変わる一番手軽で使いやすい方法だと思います。

開始早々話がそれましたが、
実際どうするのが一番シンプルでわかりやすいのか考えた結果こうなりました。

```HTML:html
<ul class="flex-container">
  <li>HTML</li>
  <li>CSS</li>
  <li>Ruby on Rails</li>
  <li>javascript</li>
  <li>PHP</li>
  <!-- 以下 省略 -->
</ul>
```

```scss:scss
.flex-container{
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1%;
  li{

    margin: 0 1% 10px;

    @media screen and (min-width:901px) {
      width: calc(19% - 1%);
    }
    @media screen and (min-width: 601px) and (max-width: 900px) {
      width: calc(32.33333333% - 1%);
    }
    @media screen and (max-width:600px) {
      width: calc(49% - 1%);
    }

  }
}
```


<br>
_※一応SASSを使っていない方もいるとおもうので、CSS版も追記_

```css:css
.flex-container{
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1%;
}
.flex-container li{
  margin: 0 1% 10px;
}

@media screen and (min-width:901px) {
  .flex-container li{
    width: calc(19% - 1%);
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .flex-container li{
    width: calc(32.33333333% - 1%);
  }
}
@media screen and (max-width:600px) {
  .flex-container li{
    width: calc(49% - 1%);
  }
}
```

これが一番ベストかなーとは思うんですが、他にいい方法があればご助言ください。
word2vecでベクトルから単語を出力する

word2vecで単語をベクトルにしたり、類似度判定した記事はたくさんあるが、ベクトルから類似単語を出力する日本語記事を見つけられなかったのでメモ。
stackoverflowにあった。
https://stackoverflow.com/questions/32759712/how-to-find-the-closest-word-to-a-vector-using-word2vec

## 結論
結論から言うと、以下のように適当にモデルを作りmost_simlar関数にベクトルを与えるだけ。

```py
sentences = gensim.models.word2vec.Text8Corpus(filename)
model = Word2Vec(sentences, size=100, window=5, min_count=5, workers=4)
model.most_similar( [ vector ], [], 1)[0][0]
``` 
ただし、第3引数は出力する類似単語数を表す。　　
　　
## 使用例
[青空文庫：江戸川乱歩](http://www.aozora.gr.jp/index_pages/person1779.html)の解析をしたので、その例を示す。　　　　

```py
model.wv["ベクトル化したい単語"]
```
で単語をベクトル化できる。

```py
sentences = gensim.models.word2vec.Text8Corpus(filename)
model = Word2Vec(sentences, size=100, window=5, min_count=5, workers=4)
vector = model.wv["犯罪"]
word = model.most_similar( [ vector ], [], 1)
print(vector)
print(word)
```
上記のようなコードを実行すると、

```py
[-0.01494294 -0.1509463   0.06123272 ...,  0.01335443  0.03439184
  0.05130962]
[('犯罪', 1.0000001192092896)]
```
となり、「犯罪」をベクトル化し、そのベクトルから単語が出力できている。


### 出力数を変更

```py
vector = model.wv["明智"]
word = model.most_similar( [ vector ], [], 5)
```
以下のような結果が得られる。

```py
[('明智', 1.0000001192092896), ('名', 0.8110731840133667), ('博士',　0.8006758093833923), ('氏', 0.7667115330696106), ('殿村', 0.7487545609474182)]
```

### 単語のみを出力
単語のみを出力するために、以下のようにしておくとよい

```py
model.most_similar( [ vector ], [], 1)[0][0]
```

### 任意のベクトル入力
以下のようにして、任意のベクトルができる。

```py
vec = np.zeros(3000)
vec[2] = 1
vec = np.array(vec,dtype='f')
word = model.most_similar( [ vector ], [], 5)
```
出力結果

```py
[('点い', 0.04825586825609207), ('ワハハハハハハハハ', 0.04788881167769432), ('珍奇', 0.04669386148452759), ('憎らしい', 0.04500409588217735), ('な', 0.04486800357699394)]
```
### まとめ
`most_similar`使えばいける。ちなみに公式には、`model.wv.most_similar`って書いてあったけど、wvなくてもできた。公式には、ベクトルは、`model.wv`のKeyedVectorsインスタンスに保存されてるって書いてあったけどよくわかってない。
今回は総単語数19002だったのだが、実行時間は1分ほど。word2vec高速すごい。
[Survey] Kaggle - Santander 8位解法まとめ

Kaggle - Santander Product Recommendation[^1]の8位解法[^2]の調査記事です．

Title: #8 solution code
Name: Alexander Ponomarchuk
Kaggle Discussion: https://www.kaggle.com/c/santander-product-recommendation/discussion/26838
Code: https://github.com/yaxinus/santander-product-recommendation-8th-place

## 前処理

- 特殊なことはしていない(欠損している月の補間を行ったが改善せず)

## 特徴抽出

- 特殊なことはしていない

## モデル

- さまざまなパラメータでLightGBMとXGBoostのモデルを作成．
- 確率が最小になるモデルを一つ選んでマージしていくより，ポアソン相関が最小となるモデルを選んでマージしたほうが改善した．

## References

[^1]: Kaggle, [Santander Product Recommendation](https://www.kaggle.com/c/santander-product-recommendation).
[^2]: Alexander Ponomarchuk, [#8 solution code](https://www.kaggle.com/c/santander-product-recommendation/discussion/26838)
Swiftでデザインパターンを学習 ~Prototype~

# 定義
Prototypeとは
> Prototype パターンは、生成すべきオブジェクトの種類を原型となるインスタンスを使って明確にし、それをコピーすることで新たなオブジェクトの生成を行うパターンです。
https://dev.classmethod.jp/smartphone/ios8-swift-design-pattern-prototype/

# 実装してみた
```swift:prototype.swift
import UIKit

protocol Clonable {
    associatedtype Prototype
    
    func clone() -> Prototype
}

class Person: Clonable{
    typealias Prototype = Person
    var name: String
    var age: Int
    
    init(name: String, age: Int) {
        self.name = name
        self.age = age
    }
    
    func clone() -> Person {
        return Person(name: self.name, age: self.age)
    }
}


```

```swift:output.swift
var person = Person(name: "John", age: 33)
var clone = person.clone()

person.name //John
person.age // 33

clone.name // John
clone.age //33

// ===演算子は、インスタンスの実体が同一のものであるかどうかを調べるためのもの
person === clone //false

```

# NSCopyingってなかったっけ？
```swift:copy.swift
import UIKit

class Person: NSCopying {
    var name: String
    var age: Int
    
    init(name: String, age: Int) {
        self.name = name
        self.age = age
    }
    
    func copy(with zone: NSZone? = nil) -> Any {
        return Person(name: self.name, age: self.age)
    }
}

```

```swift:output.swift
var person = Person(name: "John", age: 33)
var copy = person.copy()

// copyがAny型なので、ドットアクセスできない。
// copy.name
// copy.age

// Any型からPerson型へキャストする必要がある。
if let personCopy = copy as? Person {
    personCopy.name // John
    personCopy.age //33
    person === personCopy // false
}

```

#思ったこと
Swiftでコピーを作りたいときは、プロトタイプを使った方が型情報を決められてNSCopyingよりも良いのでは？と思った。

#勉強法
 - [OSS](https://github.com/ochococo/Design-Patterns-In-Swift)をみて、Swiftでのデザインパターンの表現を理解する。
 - 毎日30分
 
# サンプルコード
GitHubに置いてます。
https://github.com/syatyo/swift-design-pattern-sample/blob/master/Prototype.playground/Contents.swift
CSSアニメーション時のチラつきを解決する方法

CSSのTransitionでアニメーションをさせた時に文字が一瞬チラつく現象に遭遇しました。
Gifだとわかりにくいですが、一瞬左右にカクカクとなっています。
![chira.gif](https://qiita-image-store.s3.amazonaws.com/0/135478/10aba697-4ab3-24a5-13a2-7c9f215b5399.gif)

ネットで調べると該当のセレクタに下記を追記することで、大体の場合解決するとありましたが僕の場合改善しませんでした。

```.css
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
```


結果的にwill-changeプロパティを追記することで改善されました🎉

```.css
.hoge:hover > img {
    height: 300px;
    width: 300px;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    will-change: transform; /* ←追記分 */
}
```

参考
・[CSS will-changeプロパティについて知っておくべきこと](http://postd.cc/css-will-change-property/)
議論が深まりつつある	AIの利用用途について

AlphaGOやシンギュラリティといった、実業務とは違った特殊な分野の話やまだすこし先の未来の話ではなく目の前の現実のさまざまな分野での業務への人工知能の適用にあたっての議論を目にすることが増えてきました。
広告やPR分野でのAI活用、成功事例でのAIを活用した側面とAIの活用の仕方に対する人間の知恵が必要とされる面についての具体的で興味深い記事をまずはご紹介します。政治におけるAI活用の可能性を感じさせる分野は「限られた資源の再配分」ですが、AIでは難しい部分についてふれている記事や、セキュリティ分野におけるAI活用についての記事などもご紹介します。
最後に、東大の松尾先生のディープラーニングに対する取り組み方などについて話されている記事をご紹介します。ディープラーニングはきちんとした技術なので、軽いノリの迅速な対応がマッチしてきた、ほかのIT技術とは違う対応の仕方がよいというお話をされています。

※下記サイトからの転載。ビッグデータ・AIなどに関するトピックを毎週取り上げています。
[TechCrowd: https://www.techcrowd.jp/related/](https://www.techcrowd.jp/related/)

#[AIを広告文脈で活用する3つの切り口：キーワードは「新しい体験」](https://www.advertimes.com/20170912/article257280/)

アドタイに掲載された、若手人材の発掘・育成を通じて広告クリエイティブの発展を願う、「宣伝会議賞」の特別企画の連載記事の中のひとつです。博報堂アイ・スタジオのCREATIVE AI研究所長の北島さん等が二回にわたって執筆されています。

現時点で広告の文脈で人工知能が活用できる切り口は、およそ3つに整理できるとして
（1）ブランディング、（2）新しい表現の創出、（3）効率化　をあげています。

(1)の例として、とりあげているのが、強い個性を持ったロックバンドのアルバム発売と連携した、プロモーションの一つとしてのチャットボット。チャットボットが尖ったキャラクター設定のため、汎用的なデータ学習ではなく相当量のシナリオデータを準備し、自然言語処理・言語感情解析処理・スタンプ画像など感情とトークを組み合わせ、意図した会話体験が成立するようつくりこみを行い、体験の幅広さを創出して、プロモーション対象であるロックバンドおよび発売するアルバムの世界観を伝えるものとなっているとのこと。

(3)の例として、とりあげているのが、地方自治体のゴミの分別案内チャットボット。捨てたいごみの種別を投げかけると、分別方法を教えてくれる。問い合わせ電話の削減とともに、ごみ分別に対する取り組みのPRにも寄与しているとのこと。
また、話題になっているポイントはいわゆる「神対応」で、いくつかの検索ワードに仕込みがあり、問い合わせによっては「雑談」とみなして乗ってくれるし、捨てたいものとして“妙なもの”を指定すると人生相談の名言を返してくれる。この気の利かせ方が受けて話題になり、認知が広がりPRにも成功しているもの。

これらの取り組みを通して感じているのが、人工知能技術単独で広告としてのコミュニケーションを成立させることはまだ難しいということ。人工知能の能力を表現に引き出しつつ、逸脱する結果に対するフォローなど、体験を成立させるための仕掛けのクリエイティビティも求められる。つまり人工知能が果たす役割を上手く限定することで、企画として成り立つよう制御することが必要なようです。


#[セキュリティの現場、AIはどう変えるか](http://itpro.nikkeibp.co.jp/atcl/column/17/062200257/091300009/)

ITproの「企業セキュリティ、七つの鉄則」企画の中の記事です。もともとITのセキュリティ分野は、早くから人工知能技術が活用されてきた分野のひとつとして、迷惑メールの振り分け機能やWebシステムへの侵入検知機能、不正侵入検知システムのネットワークパケット検知機能、ウィルス対策ソフトのマルウェア検知機能などをまず紹介しています。

さらに、これからのセキュリティ分野でのAI活用が期待されている側面として、人材不足の解消、人間による業務の代替をあげています。経済産業省の調査によれば、2020年には国内のセキュリティ人材の不足数は20万人に達するとのこと。そのような人材不足の状況の中で、特にAIが威力を発揮しそうなのがセキュリティアナリストの代替として、企業システムの莫大なデータやログを分析して、このリスク識別・分類のパターンをAIに学習させ、既知のリスクの識別・分類モデルを作り、攻撃パターンの検知ができるようにすることと説明しています。人間は未知のや新たな脅威への対応に集中できるようになるというものです。


#[国家を人工知能に委ねる時代の安全保障と、そのとき守るべき自由](https://wired.jp/2017/09/22/icf2017-ken-jimbo-interview/)

「Innovative City Forum 2017」に登壇する慶應義塾大学准教授の神保謙氏への、国際政治学の見地からテクノロジーが導く近未来について聞いたWiredのインビュー記事です。

神保先生の説明する、政治において人工知能が効果を発揮しそうな分野は、限られた資源の配分を行う領域とのこと。限られた資源の配分を考えていくことこそが政治の本質で、個人の利益の最大化を目指す集団では実現し得ない『全体の合理性』を追求するうえでは、人工知能が合理的で最適なプランを提示してくれるようになれば非常に強力なツールとして機能するだろうと解説しています。

一方で、市民の危機管理や国家間の安全保障といった領域において、AIが何か判断を下すことは難しいだろうとのこと。例としてあげているのが、「10万人の犠牲者を出すけれど、長期的に見れば国家を危機から救える選択があったとして、その決定をAIにゆだねることはできない」だろうという点です。倫理的決定をくだすこととも言い換えていますがAI時代の人間に残る最後の役割は倫理的結定をくだすとのことです。


#[人工知能は「ITで敗北した」日本企業のチャンスとなるか](https://forbesjapan.com/articles/detail/17841/1/1/1#)

フォーブスジャパンの、東大松尾先生と人工知能分野のベンチャー企業新谷の代表取締役社長金井氏の対談記事です。

導入部ではAIの未来について考える国際的なコミュニティも続々と設立されていることを紹介しています。アマゾン、グーグル、IBM、フェイスブック、マイクロソフトなどによって設立された「Partnership on AI」、ジェシカ・リビングストン、イーロン・マスク、ピーター・ティールらが立ち上げた「OpenAI」など。

松尾先生が、AIに対する日本企業の取り組み方の構造的な問題点、難しさを指摘する中で興味深い観点は、日本企業がこの20年間、IT・インターネットの分野が負け続けてきたが、ディープラーニングはこれまでの各種IT技術とのすこし違い、「きちんとした技術」であり、勉強して、マーケットを計算して、投資すれば生きるはずのものとのこと。したがって、これまでのITとは違って軽いノリで「リーン」でやろうとするのは間違いであるというのはAIへ本腰で取り組もうとする企業にとって重要な視点ではないかと思います。
Mastering Qt5 読んでみた (QMainWindowで簡単なTODOアプリ作ろう前編)

## はじめに
Qt5を体系的に学びたいな～と考えてたら下記の本があったので読んでみました。

[Mastering Qt5(amazonリンク)](https://www.amazon.co.jp/Mastering-Qt-5-Guillaume-Lazar-ebook/dp/B01F7HCAXK)

読んだことを忘備録的に残すため and ちょっとでも興味がある人に展開できたらと思い、qiitaに残します。
今回は、Mastering Qt5の導入部で行っていたTo Doリストアプリを作成したので前編/後編に分けて、それを紹介&解説します。


### QMainWindow入門のためにTo Doアプリを作ってみる
QtでGUIを作成する場合、一番典型的なのがQMainWindowと呼ばれるベースコンポーネントを継承してcpp実装して書く場合です。
今回はこのQMainWindowを用いて簡単なTODOアプリを作成してみます。

#### 実装内容 
ファイル構造

"project root"
├todo.pro ←プロジェクト設定
│
├Sources
│├main.cpp ←main関数にて下記MainWindowクラスをコールするために使う
│└MainWindow.cpp ←本命。ここで主要な処理を記述する。
│
└Headers
　├MainWindow.h
　└MainWindow.ui

##### コード
```cpp
#include "MainWindow.h"
#include <QApplication>

int main(int argc, char *argv[]){
    QApplication a(argc, argv);
    MainWindow w;
    w.show();
    
    return a.exec();
}
```
```cpp
#include <QMainWindow>

namespace Ui {
class MainWindow;

}

class MainWindow : public QMainWindow
{
    Q_OBJECT
    
public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();
private:
    Ui::MainWindow *ui;
};
```

##### 実装内容解説
UML的に書くと下記の様になります。
先にも述べましたが、QMainWindowを継承してMainWindowというクラスを新設しここでTODOアプリの本実装をしてきます。
GUIの意匠的な部分はUi::MainWindowが担当し、[QtDesigner](http://vivi.dyndns.org/tech/Qt/QtDesigner.html)でWYSIWYG的に編集します。

![Image.png](https://qiita-image-store.s3.amazonaws.com/0/129371/b5b87834-e184-1f2b-5404-b665bbfc0072.png)

### まとめ
今回は、TODOアプリのスケルトンを作ってみました。
次の後編では中身を実装して見ます。
【CSS】背景色、文字色、文字サイズを統一

`fs-1` フォントサイズ 1 のように短く分かりやすいクラス名で文字サイズをいくつか定義し、`class="fs-1"`のようにして使う。

自分がよく使ってるセットは以下↓

**サンプル**
<img width="500" alt="ss 2017-09-30 16.34.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/80357/514753c2-e581-fc5f-c845-26ffb306e6de.png">



```css
/* 文字サイズ*/
.fs-1 {
  font-size: 11px;
}
.fs-2 {
  font-size: 14px;
}
.fs-3 {
  font-size: 18px;
}
.fs-4 {
  font-size: 22px;
}
.fs-5 {
  font-size: 26px;
}

/* 文字の色 */
.fc-w1 {
  color: #fff;
}
.fc-w2 {
  color: #ddd;
}
.fc-w3 {
  color: #bbb;
}
.fc-w4 {
  color: #999;
}
.fc-w5 {
  color: #777;
}
.fc-b1 {
  color: #000;
}
.fc-b2 {
  color: #222;
}
.fc-b3 {
  color: #444;
}
.fc-b4 {
  color: #666;
}

/* 文字のウェイト */
.fw-1 {
  font-weight: 400;
}
.fw-2 {
  font-weight: 700;
}
.fw-3 {
  font-weight: 900;
}

/* 文字(アクセントカラー) */
.fc-br {
  color: rgb(121,113,82);
}
.fc-gr {
  color: rgb(130,170,35);
}

/* ボックス */
.well {
 box-shadow: none !important;
 border: none !important;
 background: rgb(230,230,230) !important;
}
.well-white {
 background: rgb(255,255,255) !important;
 border: solid 1px rgb(230,230,230) !important;
}
.well-brown {
 background: rgb(125,115,85) !important;
}
.well-yellow {
 background: rgb(252,244,206) !important;
}
```


**html**

```html
<div class="container">
  <div class="row">
    <div class="well">
      <p class="fs-1">フォントテスト</p>
      <p class="fs-2">フォントテスト</p>
      <p class="fs-3">フォントテスト</p>
      <p class="fs-4">フォントテスト</p>
      <p class="fs-5">フォントテスト</p>
      <p class="fs-2 fc-b1">フォントテスト</p>
      <p class="fs-2 fc-b2">フォントテスト</p>
      <p class="fs-2 fc-b3">フォントテスト</p>
      <p class="fs-2 fc-b4">フォントテスト</p>
      <p class="fs-2 fc-w4">フォントテスト</p>
      <p class="fs-2 fc-w3">フォントテスト</p>
      <p class="fs-2 fc-w2">フォントテスト</p>
      <p class="fs-2 fc-w1">フォントテスト</p>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="well well-brown">
      <p class="fs-2 fc-w1 fw-2">フォントテスト</p>
      <p class="fs-3 fc-w1 fw-2">フォントテスト</p>
      <p class="fs-4 fc-w1 fw-2">フォントテスト</p>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="well well-yellow">
      <p class="fs-2 fc-br fw-2">フォントテスト</p>
      <p class="fs-3 fc-br fw-2">フォントテスト</p>
      <p class="fs-4 fc-br fw-2">フォントテスト</p>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="well well-white">
      <p class="fs-2 fc-gr fw-2">フォントテスト</p>
      <p class="fs-3 fc-gr fw-2">フォントテスト</p>
      <p class="fs-4 fc-gr fw-2">フォントテスト</p>
    </div>
  </div>
</div>
```
在 Mac 用 GLUT 建立一個視窗

```cpp:main.cpp
#include <iostream>
#include <OpenGL/OpenGL.h>
#include <GLUT/GLUT.h>

void draw(void) {
    glFlush();
}

int main(int argc, char * argv[]) {
    glutInit(&argc, argv);
    glutInitWindowSize(600,600);
    glutInitDisplayMode(GLUT_SINGLE | GLUT_RGBA | GLUT_DEPTH);
    glutCreateWindow("Title");
    glutDisplayFunc(draw);
    glutMainLoop();
    return 0;
}
```

## Compile

Terminal 指令

```bash
gcc -framework GLUT -framework OpenGL main.cpp
```

預設會產生一個 `a.out` 檔案

## Execute

在 Terminal 這樣執行就會開啟一個最基本的視窗

```bash
./a.out
```
ビットコイン裁定取引のチャンスを可視化する

# ビットコイン裁定機会を可視化
GitHub Pagesにビットコイン裁定機会をビジュアライズするサイトを作成しました。
https://bitrinjani.github.io/cryptic-analysis/
![image.png](https://qiita-image-store.s3.amazonaws.com/0/202597/59a178a7-09ed-d51c-3a9a-7cacf9f7e2be.png)

このスクリーンショットの瞬間では、Bitflyerで1.75 BTCを471,109円で買い、Quoineで1.75 BTCを475,042円で売れば、裁定収益6,884円が得られることを示しています。

# 追記 (2017/10/04)
取引所を横断して表示する板画面を追加しました。100円より細かい価格帯はすべて100円台に集約して表示しています。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/202597/4f0d3a61-91d1-a895-23fd-16fe6c4f9bcf.png)


# なぜこのWebページを作ったのか
前回の記事に書いたとおり、ビットコインの価格は取引所間で大きな差があります。
しかし、どの取引所で買いどの取引所で売るべきかは、各取引所のサイトを回って確認していると時間がかかり、チャンスを逃してしまいます。
そこで、各取引所価格をウォッチできるページを作成しました。

また、ビットコイン取引をしている方ならすぐにわかると思いますが、取引所は一見正常に動いているようにみえても、システム障害等で古い価格を配信し続けていることが多々あります。
この状態の取引所に注文を送信してもまったく約定しないか、最悪の場合は注文自体が作成されません。
システム障害中の取引所を避けるため、取引所の状態を色で即座に判別できるようにしました。
# サイトの見かた
上部のボックスは次を表しています。
- 左: 最安買い価格(ベストアスク)
- 右: 最高売り価格(ベストビッド)
- 中間: ベストアスク、ビッドで裁定取引をしたときの期待収益

その下のグラフでは、各取引所の価格推移を表示しています。
赤色が売り価格(ビッド)、青色が買い価格です。

最下部は各取引所の稼働状況を表しています。
- 青: 正常に価格を配信中
- 黄: 価格の更新に遅れが見られる
- 赤: 1分以上価格が更新されていない、もしくはAPIで価格が受信できない。この状態の取引所は裁定取引対象から取り除かれ、上部ボックスやグラフに表示されない。

参考までに、アプリケーションの構成は以下です。
- クライアントサイド: TypeScript + React
- サーバーサイド: TypeScript + Node
- インフラ: GitHub Pages, AWS (EC2, API Gateway)
今日から役立つ！？ ActiveSupportの便利・おもしろ記法12選

Ruby on RailsのActiveSupportに便利メソッドがいっぱいあるとは聞いていたが、調べてみたら「こんなのがあるのか！」と目から鱗だったので紹介。

## 1. all_day, all_week, all_month, all_year
今までPostモデルに

```ruby
scope :created_this_month -> do
  where(created_at: Time.zone.today.beginning_of_month..Time.zone.today.end_of_month)
end
```

としていうようなスコープを生やしていたが、whereの部分は

```ruby
where(created_at: Time.zone.today.all_month)
```

でいけた。スコープを生やすまでのこともなかった。

## 2. to_query
`www.mywebservice.com?name=aaa&age=20&group=foo`
上のようなURL末尾のクエリ文字列を作る時に?以降を整形するのが結構大変。
そんな時は、 `to_query` を使うと

```ruby
hash = { name: 'aaa', age: 20, group: 'foo' }
hash.to_query # => "age=20&group=foo&name=aaa"
```

となって便利。アルファベット順に並べてくれるらしい。

## 3. squish
word前後のホワイトスペースが一つだけになるように整形してくれる。

```ruby
" \n  foo\n\r \t bar \n".squish # => "foo bar"
```

## 4. inquiry
StringオブジェクトをStringInquirerオブジェクトに変換して、stringの文字列内容をメソッドチェーンで判定できる。

```ruby
'production'.inquiry.production? # => true
'production'.inquiry.test?       # => false
```

## 5. starts_with, ends_with
4.に似ているが、文字列の一文字目と最後の文字を判定。
RubyにString#start_with, String#end_withが定義されているが、そのエイリアス（三単現のsつき）。
（ @znz さん、ご指摘ありがとうございます！）

```ruby
"foo".starts_with?("f") # => true
"foo".ends_with?("o")   # => true
```

## 6. pluralize
英単語の複数形を返す。

```ruby
"car".pluralize    # => "cars"
"person".pluralize # => "people"
```

じゃあこれは？

```ruby
"日本人".pluralize


# => "日本人s"
```

文字列の扱いは本当に色々なメソッドが用意されていて、これに似たメソッドで、
singularize, camelize, underscore, titleize, parametize, tablize, ...などがある。

## 7. to_s (Numericクラス)
文字列にしてくれるだけ、と言っても

```ruby
34.to_s # => "34"
```

だけではなく、様々なオプションがある。以下は一例。

```ruby
1231112222.to_s(:phone)         # => 123-111-2222
1234567890.50.to_s(:currency)   # => $1,234,567,890.50
123456789.to_s(:delimited)      # => 123,456,789
1234567.to_s(:human)            # => "1.23 Million"
```

なお、0から始まるFixnumは8進数と解釈されるので、 `to_s(:phone)` を日本でよく使われている0から始まる電話番号に使おうとすると

```ruby
0454444444.to_s(:phone)    # => "7-879-2996"
0458888888.to_s(:phone)    # => SyntaxError: Invalid octal digit
```

となってしまうので、残念ながら日本の電話番号で使うのは難しい模様。

## 8. ordinalize
数字を序数に、つまり `1` から `1st` みたいにしてくれる。

```ruby
1.ordinalize    # => "1st"
2.ordinalize    # => "2nd"
53.ordinalize   # => "53rd"
2017.ordinalize # => "2017th"
```

## 9. many?
collection.size > 1 かどうかを判定してくれる。

```ruby
Program.where(id: 1).many?  # => false
```

## 10. to_sentence
文字列からなる配列の中身を結合して、英語っぽく整形してくれる。

```ruby
%w(Earth Wind Fire).to_sentence # => "Earth, Wind, and Fire"
```

## 11. to_s (Rangeクラス)
範囲オブジェクトの中身を文字列でうまいこと整形してくれる。dbオプションは結構使えそう。

```ruby
# 2017年9月30日(土)の場合

(Date.today..Date.tomorrow).to_s      # => "2017-09-30..2017-10-01"
(Date.today..Date.tomorrow).to_s(:db) # => "BETWEEN '2017-09-30' AND '2017-10-01'"
```

## 12. on_weekday? on_weekend?
Date, Time, DateTimeオブジェクト周りのメソッドは使えるメソッドの目白押しですが、Rails5で導入されたon_weekday?は結構使えそう。（月~金かどうかを判定）

```ruby
# 2017年9月30日（土）の場合

Time.zone.today             # => Sat, 30 Sep 2017
Time.zone.today.on_weekday? # => false
Time.zone.today.on_weekend? # => true
```

参考: http://guides.rubyonrails.org/v5.0/active_support_core_extensions.html
削除したカメラの写真を復元する方法

##まえおき
カメラから削除した写真はまた戻れますか？もちろんです。一番簡単なのはデータ復元ソフトを利用して復元できます。データ復元ソフトといえば、いろいろありますが、ここで[EaseUS Data Recovery Wizard][link1]を例にして、[usbメモリ復元][link2]の流れを紹介します。

#データ復元の流れ

写真データが紛失した際に、SDカードを取り出して、コンピュータに接続して、認識されたら、次のステップに進めます。

- EaseUS Data Recovery Wizardをインストール完了するあと、ソフトを開けます。
- 
![1.png](https://qiita-image-store.s3.amazonaws.com/0/203250/18c83b8b-d72f-2fca-6f22-5dcdc700c6a8.png)


- SDカードを選択して、スキャンを始めます。クイックスキャンした後、ディップスキャンが自動的に始まります。
- 
![图片.png](https://qiita-image-store.s3.amazonaws.com/0/203250/1e1c749e-d642-195c-d7af-2d5a22350785.png)


- スキャンの結果中に復元したいデータを探して、リカバリをクリックしたら、復元完了しました。

![图片.png](https://qiita-image-store.s3.amazonaws.com/0/203250/3add44fe-cf5a-3d71-32bb-b86b91b80f8d.png)


データ復元ソフトはほぼ同じ操作ですが、このフリーソフトで2GBまで無料復元できます。それに、[USBメモリ復元][link2]だけでなく、ファイル復元や[フォマット復元][link3]などもできます。復旧率も高いです。

#データ紛失を予防する方法

[データ復元][link1]ソフトでデータを取り戻れますが、ある場合で救出したデータは全部完璧に開けるのではありません。この状況を予防するために、定期的にデータをバックアップするほうがいいです。一旦データがなくなったら、早速バックアップから復元できます。

コンピュータの容量不足の方々、オンラインストレージ（Google Drive、One Driveなど）に保存するのもいい選択です。



















[link1]:https://jp.easeus.com/data-recovery-software/drw-free.html
[link2]:https://jp.easeus.com/storage-media-recovery/recover-deleted-usb-data.html
[link3]:https://jp.easeus.com/storage-media-recovery/unformat-hdd.html
Screenpressoを試してみた

# 経緯
これまではSleipnirで有名なフェンリル株式会社のsnapcrab for Windowsを使用していたが、動画キャプチャも利用できるということでScreenpressoに乗り換えてみることにした。


# Screenpressoとは
フランスの会社Learnpulse SASが開発、提供するデスクトップ画面を画像、動画として保存する支援ツール。

## システム要件

+ dotNetFramework 4.x

細かいバージョン指定がされていないので4.5.0からサポートしてるのかな？


## 機能
![2017-09-30_15h18_38.png](https://qiita-image-store.s3.amazonaws.com/0/184939/e855b29b-2ab0-6834-7b82-53c3cfdfb904.png)

基本的な機能は無償で利用可能。PRO以上にするとDocument GeneratorやOCRなどが使えるみたい。興味がわいたら試してみたい。


# 導入手順

## 1.ダウンロード

https://www.screenpresso.com/download/ にてScreenpressのインストーラをダウンロードする。


## 2.インストール
利用規約へに同意し、インストールウィザードに従って進めるだけ。とても簡単。



## z.カスタマイズ

導入直後にカスタマイズしておいがほうがいいなぁと思った箇所をメモ

### 1.一般設定

|項目|デフォルト|設定値|
|:-:|:-:|:-:|
|Windows起動時に自動起動する|N/A|Checked|
|Screenpressoの改善のため、使用状況レポートを匿名で送信する|Checked|N/A|
|クイックキャプチャウィンドウ|Checked|N/A|
|Windows起動時に自動起動する|N/A|Checked|
|ワークスペースの保存先|%USERPROFILE%\Pictures\Screenpresso|%USERPROFILE%\Pictures\スクリーンキャプチャ\Screenpresso *1]|

*1 指定したフォルダの下に必ずScreenpressoフォルダが作られる

### 2.スクリーンショット

|項目|デフォルト|設定値|
|:-:|:-:|:-:|
|保存するファイル数|40|10,000 *1|
|ファイル名|日付と時間|ユーザー設定(Screenshot_{1:yyyyMMddhhmm}_{0:00})|
|背景をクリーン|N/A|Checked|

*1 設定ボタンから[ファイルを隠すだけで削除しない]は有効にしておくこと

### 3.Workspace

ImageとMovieの2つを作成。

## 感想
機能はなかなかよさげだが、設定可能な箇所にご不満。

+ ツールの一覧向けにサムネイルの自動作成をするのはいいが、設定でOffにできるようにしてほしい。
+ ワークスペースで用途にあったキャプチャが取れるのは便利だが、デフォルトと追加したワークスペースのフォルダ階層が異なるのはちょっと気になる。
真のVimmerにおすすめのシェルスクリプト【ネタ】

これであなたも真のVimmerに :heart_eyes:

```sh
echo '' > ~/.vimrc
```

# 参考
[スパルタンVim](https://www.kaoriya.net/blog/2012/01/19/)
[スパルタンVim2](https://www.kaoriya.net/blog/2012/09/01/)
[スパルタンVim3](https://www.kaoriya.net/blog/2014/01/21/)
[スパルタンVim4](https://www.kaoriya.net/blog/2014/09/19/)
[スパルタンVim5](https://www.kaoriya.net/blog/2016/09/15/)
wysiwygエディタについての学習8


## draft-jsを使ってみる続き

### SelectionState

EditorState.getSelection()で取得できる選択範囲の状態

#### キーとオフセット

ネイティブDOMでは、選択範囲にはノードとオフセットのペアであり、
開始地点と終了地点を表し、それぞれアンカーとフォーカスとされる。

https://developer.mozilla.org/en-US/docs/Web/API/Selection#Glossary

	フォーカスって選択の終端だったのか。。知らなかった。

Draftでは、コンテンツブロックがあるので、そのキーとオフセットのペアで示すことができます

#### アンカーとフォーカス VS 開始点と終了点

アンカーとフォーカスだと便利で、前後の選択が柔軟にできる
ただ、選択の方向性を考慮する時には開始点と終了点の方を使うほうがいい

	なるほど、編集時に引き続きの操作の際のフォーカス操作と一体に考えられるということかな。。

アンカー・フォーカスと開始点・終了点の両方をSelectionStateでは公開します。
編集操作では、アンカー・フォーカス、
コンテンツ管理では、開始点・終了点を使うべし。

SelectionStateが実際に持つのはアンカー・フォーカスであって、開始点と終了点は導出されるものです。

	細かいプロパティの説明は省略。

### Data Conversion

エディタは空き領域に存在するわけではない、保存や送信のためにnativeのjsに変換する場合があり、
汎用的なJSのデータに変換するユーティリティを提供する
FlowTypeの`RawDraftContentState`には、エンティティオブジェクトのマップと同様に、
コンテンツブロックのリストが含まれる

	細かいプロパティの説明は省略。

### RichUtils

リッチテキスト編集のための静的ユーティリティーセットです。

	細かいプロパティの説明は省略。

### AtomicBlockUtils

アトミックブロック編集のためのユーティリティ関数の静的なセットです。

	細かいプロパティの説明は省略。

### KeyBindingUtil

キーバインディングを定義するためのユーティリティ関数の静的なセットです。

	細かいプロパティの説明は省略。

### Modifier

ContentStateオブジェクトに対する一般的な編集操作をカプセル化するユーティリティ関数の静的なセットです。これらのメソッドを編集操作に使用することを強くお勧めします。

	細かいプロパティの説明は省略。
【HTML】固定・可変の2カラム

**html**

```html
<div class="fix-flex">
  <div class="fix">
    固定
  </div>
  <div class="flex">
    可変
  </div>
</div>
```


**css**

```css
.fix-flex {
  display: table;
  width: 100%;
}

.fix, .flex {
  display: table-cell;
}

.fix {
  width: 100px;
}
```

---

固定カラムの横幅を変えたいとき

```html
<div class="fix-flex">
  <div class="fix" style="width: 200px">
    固定
  </div>
  <div class="flex">
    可変
  </div>
</div>
```
Golang開発環境構築


## 環境
macOS 10.12.6


## Homebrewでgoenvをインストール
Homebrewでgoenv(Goのバージョン管理するやつ)を入れる。

```
$ brew install goenv
```

## zshrcに追記
自分はzshを使っているため、zshrcに追記

```.zshrc
export PATH="$HOME/.goenv/bin:$PATH"
eval "$(goenv init -)"
```

## golangのインストール
以下のコマンドでインストールできるバージョンが確認できる。

```
$ goenv install -l
Available versions:
  1.2.2
  1.3.0
  1.3.1
  .
  .
  1.9.0
```

今回は1.9.0をインストールする。

```
goenv install 1.9.0
```

その他のコマンドの使用感覚はrbenvやpyenv等と同じ。
Vagrant1.9, 2.0でカラースキームが上手くいかない

Vagrantをアップデートした際、カラースキームでVimの色を変えていたものが壊れてしまいました
最終的に原因が分からなかったため、Vagrantのバージョンを1.8まで下げて利用するようにしました

同じようにVimの色ごときで時間を潰す人が増えないように書いてみました（一日無駄にした）

# 環境
Windows 10
Git for Windows (Git Bash)
Vagrant 2.0.0 or 1.9.8
Virtual Box 5.1.28 or 5.0.40

Vagrantの2.0と1.9で問題は起こりました
Virtual Boxのバージョンはあんまり関係なさそうでした

# 何が起こったのか？
簡単に言うと、`set t_Co=256`が有効にならない
それだけならいいのだが、背景色が変な灰色になる
vimを抜けても背景が残る
結構気持ち悪い

### Git Bashの設定を変えてみる
とりあえず、xtermからxterm-256colorにして試してみるが変わらない
そもそも元々xtermでも上手く動いていたのだから関係なかった

### 仮想環境側をxtermにしてみる
仮想マシンのCent OSで`export TERM=xterm-256color`で256カラーに対応させようとするが、xtermに対応していないようでvim自体が壊れる
ここら辺の設定は弄ったことがないため、あまり無理をしない方がいいと思う・・・
もし仮に上手くいったとしても仮想マシン内のOS自体は256カラーを認識しているため、無意味である

### Git for Windowsも更新
Git for Windows自体がアップデートについていけていないのかもと思い、最新版にしてみる
無意味

### コマンドプロンプトで試す
コマンドプロンプトでvagrant sshして試してみるが、Git Bashの時と同じ感じになる
ここでVagrant側の問題だと確信

### Vagrantのバージョンを下げてみる
2.0.0から1.9.8に下げてみるが変わらず
1.8.7に下げてみたらエラーがでて出来なかったため、2.0.0に戻す

### Virtual BOXのバージョンを下げてみる
5.1.28から5.0.40に下げてみるが変わらず

### 再びVagrantのバージョンを下げる
依存関係を調べたらVirtual Box 5.0.40とVagrant 1.8.7なら動きそうだったため、再びVagrantのバージョンを下げる
上手く動いたのでvimを確認したところ、カラースキームが元に戻っている！やった！

# まとめ
Vagrant 1.8.7
Virtual Box 5.0.40

この組み合わせなら無事に256カラーでのカラースキームが使えた
Virtual Boxのバージョン操作では特に変わらなかったから、Vagrant 1.9以降での問題だと思います

VMwareとか他の仮想マシンに蔵変えしようかな・・・・・・
CLIとVSCodeでKotlin開発を始めてみるメモ #teratail_kt


[Kotlin初心者向けハンズオン #2](https://kotlin.connpass.com/event/58491/)にて。

参加二回目なので、今度はVisual Studio Code（VSCode）でやってみます。

## Kotlinのインストール

```
$ brew install kotlin
```

```
==> Downloading https://github.com/JetBrains/kotlin/releases/download/v1.1.50/kotlin
==> Downloading from https://github-production-release-asset-2e65be.s3.amazonaws.com
######################################################################## 100.0%
🍺  /usr/local/Cellar/kotlin/1.1.50: 48 files, 36.1MB, built in 1 minute 50 seconds
```

インストールが完了したらバージョン確認

```
$ kotlinc -version
info: kotlinc-jvm 1.1.50 (JRE 1.8.0_101-b13)
```

これで無事にインストール

## ハローワールド

`hello.kt`を作成

```hello.kt
fun main(args:Array<String>){
    println("Hello, Kotlin")
}
```

コンパイルして`hello.jar`を作成

```
$ kotlinc hello.kt -include-runtime -d hello.jar
```

実行

```
$ kotlin hello.jar
Hello, Kotlin
```

無事にハロワールドできました。簡単！

## VSCodeのプラグイン

何も入れてないとこんな感じです。シンタックスハイライトないですね苦笑

![スクリーンショット 2017-09-30 13.33.45.png](https://qiita-image-store.s3.amazonaws.com/0/35387/bfacfae6-107f-fe5f-d517-48a484f80ff3.png "スクリーンショット 2017-09-30 13.33.45.png")

プラグインは[Kotlin Language](https://github.com/mathiasfrohlich/vscode-kotlin)というものがあります。

![スクリーンショット 2017-09-30 13.34.58.png](https://qiita-image-store.s3.amazonaws.com/0/35387/f2adcdb6-1d6f-6897-f9dd-70c078cadfbf.png "スクリーンショット 2017-09-30 13.34.58.png")

インストールしてVSCodeを再起動するとこんな感じでシンタックスハイライトされます。

![スクリーンショット 2017-09-30 13.35.52.png](https://qiita-image-store.s3.amazonaws.com/0/35387/099215f7-d7e9-320b-3588-d9b05cddb292.png "スクリーンショット 2017-09-30 13.35.52.png")

VSCodeの組み込みターミナルで実行してあげると中で全部やってる感がでます。

## 感想

これだけなら割と簡単に始められそうな印象。

kotlinをインストールしたら使える`kotlinc-js`ってコマンドが気になってたり、server side kotlinとかも気になってるので少し調べてみます。

## 参考

* [KotlinをVS Codeでやってみようと思ったらKotlinの実行時にハマった](https://qiita.com/kuroyakov/items/8c70cb1d490aa2787d3e)
* [5分でできる Kotlin + CLI で "Hello, World!"](https://qiita.com/takuhiro/items/994a99611c97550a5d68)
Android でマイクの競合を検知する方法

#課題
Android でマイクを使用しようとした際、他のアプリが既に使用していると録音ができません。
録音できないだけならまだしも、気を付けないと録音しているつもりの音声が、マイクを握っているアプリに流れているということになってしまいます。
VoIP系のアプリが同時に動作すると、話しているつもりの相手ではなく、別の相手にのみ声が届いているという最悪の事態になりかねません。。。

#やりたいこと
自分のアプリがマイクを使えてないことを検知して、録音を止める。

#対応方法
録音時は以下の流れとなります。
[AudioRecord](https://developer.android.com/reference/android/media/AudioRecord.html)

```
AudioRecord audioRecord = new AudioRecord(,,,,);
audioRecord.setRecordPositionupdateListener(new AudioRecord.OnRecordPositionupdateListener() {
    // フレームごとの処理
    @Override
    public void onPeriodicNotification(AudioRecord recorder) {
        audioRecord.read();
    }
});
audioRecord.setPositionNotificationPeriod();
audioRecord.startRecording();
audioRecord.read();
　　　・
　　　・
　　　・
audioRecord.stop();
```
ところが、他のアプリがマイクを使用していても、どの関数もエラーを返さないようなのです。。。

しかし、マイク利用の競合のあるなしの違いがありました。
マイクを取得できていない場合、フレームごとの処理を行うためのコールバックである onPeriodicNotification が呼ばれないようです。

したがって、一定時間経過後 onPeriodicNotification が呼ばれなければ、他のアプリにマイクが取得されていると判断できるようです。

#確認した内容・環境
**内容**
Line, Facebook messenger で通話中に onPeriodicNotification が呼ばれないことの確認
**環境**
Nexus 6 (7.1.1) , Nexus 7 (6.0.1)

#備考
- もっとよい方法があったら教えてください！
- この方法で検知できない場合があれば教えてください！
Rails Stripe サブスクリプション決済実装 プランの登録

# 概要
Stripeでのサブスクリプション決済実装をRailsで行う場合、
公式で提供されているgemを使用することになると思います。

前回はAPIを使うまでの事前準備を記事にしました。

- Rails Stripe サブスクリプション決済実装 初期設定をしてAPIを使える状態にする<br>
https://qiita.com/ss_watanabe/items/8c5ec353a842d5d30e77

今回はサブスクリプションプランをStripeに登録する方法を紹介します。

# 管理ページからプラン追加
Stripe管理ページでSubscriptions > Plansよりプランの一覧が閲覧できます。
管理ページからプランを追加する場合はこの画面のNewより追加できます。
<img width="1398" alt="スクリーンショット 2017-09-30 12.49.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/147005/637096f4-416d-8e9d-80a0-97f3c95717e3.png">
こんな感じです。
<img width="1388" alt="スクリーンショット 2017-09-30 12.52.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/147005/fc793366-56df-c7a2-7771-f76c90df426c.png">

トライアル期間が365日あるが、その後は1日毎に100万円かかる悪魔的プランです。

# Railsからプラン追加
アプリケーション側から先ほどのような悪魔的なプランを登録してみます。
プランを追加するにはモジュールは```Stripe::Plan```クラスの```create```メソッドを使用します。
前回```Stripe```モジュールを使用できる設定は完了させているので、単純にメソッドに適切な引数を設定するだけでプランは作成されます。
[公式リファレンス：Create a plan](https://stripe.com/docs/api/ruby#create_plan)

## 実装
```rb
  def create_plan
    Stripe::Plan.create(
      id:                   'test_plan',
      name:                 'Test Plan',
      amount:               1000000,
      currency:             'jpy',
      interval:             'day',
      interval_count:       1,
      trial_period_days:    365,
      statement_descriptor: 'sswatanabe'
      metadata: {
        are_you_from_chicago: "No i'm from NewYork"
      }
    )
  end
```

各パラメータの意味は名前の通りです。
英語に馴染みのない僕には```statement_descriptor```がなんのことか分からなかったのですが、
リファレンスを読んだところ、「クレジットの明細に表示される名前」らしいです。
```metadata```では、好きな情報を持たせることができます。
アプリケーション側のPlan IDを登録する時などに活用できます。

## 確認
API側からも確認できますが、
手っ取り早くStripe管理ページでみてみましょう。
無事追加されています。
<img width="1385" alt="スクリーンショット 2017-09-30 13.38.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/147005/774168b5-eef6-c3df-bf6d-8c4d0fec7009.png">
詳細も正常ですね。
<img width="1368" alt="スクリーンショット 2017-09-30 13.39.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/147005/9423dbd9-cd1f-5aaa-b388-beb6105ad9e3.png">


# 所感
........アプリケーション側からプラン追加するってなかなか壮大なシステムでしか使わないよな。

# 参考

- Stripe API Reference<br>
https://stripe.com/docs/api
- 日本正式リリースしたStripeを使ってサブスクリプション型決済システムを実装する
http://qiita.com/tady/items/7617e62b2a5402ebd0fb
Redmine:3.4.2-2 Redmine Slack連携プラグイン　設定画面：404

# Redmine:3.4.2-2 Redmine Slack連携プラグインの設定画面にて404発生

## 解決方法
plugin名について、以下の通り修正し、再起動
変更前：redmine-slack
変更後：redmine_slack

[参考：404 error resolved with this solution, but unable to configure chat, not working #24](https://github.com/sciyoshi/redmine-slack/issues/24)
ESLint v4.8.0

前 [v4.7.0] | 次 [v4.9.0]

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">ESLint v4.8.0 has been released: <a href="https://t.co/MD54uk2PUL">https://t.co/MD54uk2PUL</a></p>&mdash; ESLint (@geteslint) <a href="https://twitter.com/geteslint/status/913861407082520584?ref_src=twsrc%5Etfw">2017年9月29日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

ESLint 4.8.0 がリリースされました。
小さな機能追加とバグ修正が行われています。

質問やバグ報告等ありましたら、お気軽にこちらまでお寄せください。

> 🏢 [日本語 Issue 管理リポジトリ](https://github.com/eslint/eslint-jp)
> 👫 [日本語サポート チャット](https://gitter.im/eslint/eslint-jp)
> 🏢 [本家リポジトリ](https://github.com/eslint/eslint)
> 👫 [本家サポート チャット](https://gitter.im/eslint/eslint)

# 🚀 本体への機能追加

## [#9250]: `--report-unused-disable-directives` CLI オプション

1つも警告を抑制しない `/* eslint-disable */` 系コメントがあると警告するオプションです。

もともと [eslint-plugin-eslint-comments](https://www.npmjs.com/package/eslint-plugin-eslint-comments) プラグインがサポートしていた機能ですが、あるルールが他のルールの挙動に依存するのは ESLint の基本思想に反することもあって、コア機能として移植されました。

ただ、CLI オプションは `.eslintrc` 設定ファイルで指定できないので、エディタ連携など面倒です。


# 💡 新しいルール

今回はありません。

# 🔧 オプションが追加されたルール

今回はありません。

# ✒️ `eslint --fix` をサポートしたルール

今回はありません。

----

[v4.7.0]: http://qiita.com/mysticatea/items/bf35b048e7571bf3d4f4
[v4.9.0]: http://qiita.com/mysticatea/items/ae0081b3da453b8a3304
[#9250]: https://github.com/eslint/eslint/issues/9250
[#9999]: https://github.com/eslint/eslint/issues/9999
[xxxx]: http://eslint.org/docs/rules/xxxx

<!-- 
![JSCS Icon](http://jscs.info/favicon.ico) JSCS 互換ルールです。
-->
Xサーバーなるものを使ってマルチドメインな設定

# 概要
Xサーバーなるものを使ってマルチドメインな設定をしたので、後学のためのメモ

# 手順

## Xサーバーコンソールログイン>サーバー設定>ドメイン設定>ドメイン設定の追加

![s1.png](https://qiita-image-store.s3.amazonaws.com/0/117615/567d7e3c-a2a4-16b0-9cd1-bfa33f78df33.png)

## 取得済みのドメインを入力>確認>設定

![s2-3.png](https://qiita-image-store.s3.amazonaws.com/0/117615/235594d4-3377-e060-b964-46c809026ea0.png)

## Xサーバーコンソールでの設定は終了(のはず)


Xサーバーに`/home/ayoayo/ayoayocafe.com/public_html/`みたいなディレクトリができている

## ドメイン管理サイトでネームサーバーを変更

今回、自分の場合はGoogle Domainとかいう始めてきくやつだった
※ドメインは取得済み

https://dcc.secureserver.net/manage/
ここから管理できる模様


#### 手順は下記が詳しい
https://support.google.com/domains/answer/3290309?hl=en

変更するネームサーバーは、Xサーバーの管理画面の「サーバー情報」に記載のあるもの。
※反映には半日～1日くらいかかる模様

## ということで

http://www.ayoayocafe.com
数日後にはここにサイトができあがっているはず。
フィリピンはセブの日本人が経営するゲストハウスです。自分はここで時々仕事しながらゆっくりしてます。
・・という宣伝でしたｗ
ロードバランサー (Cloudflare, AWS ELB 等) 配下で WordPress の常時接続を行う方法


ロードバランサーの後ろで WordPress を動かしている場合、WordPress に到着した時は、https 接続ではなく、http 通信である場合があります。

https にしたのに、なぜか　WordPress がリダイレクトループ ( `Error 310 (net::ERR_TOO_MANY_REDIRECTS): There were too many redirects` ) などのエラーが多発する場合があります。

その場合は、サーバーがロードバランサーの配下にある場合があります。

## 当てはまるケース

- AWS ELB を使い、ELB と EC2 の間は、http (80) 番通信をしている場合
- Cloudflare の 無料 SSL サービス Flexible SSL を使っている場合
- Cloud9 の開発ツールを使っている場合 (AWS ELB の後ろにあります)
- さくらインターネットのレンタルサーバーで SSL 接続をしたい


## STEP1: wp-config.php に下記を追加

まだ [管理画面] - [一般] で URL を https にしないで下さい。インストール時は、http でインストールして下さい。

wp-config.php に下記を追加します。WordPress 4.5 だと、95行目あたりが良いかも。

### 通常の場合

通常の場合は下記です。

```
if ($_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https') {
    $_SERVER['HTTPS'] = 'on';
    $_ENV['HTTPS'] = 'on';
}
```

### さくらインターネットの場合

さくらインターネットは、通常とは違うヘッダー情報になるので下記のように特別な記述にする必要があります。

```
if ($_SERVER['X-Sakura-Forwarded-For']) {
    $_SERVER['HTTPS'] = 'on';
    $_ENV['HTTPS'] = 'on';
}
```

## STEP2: WordPress 管理画面で、https の設定

WordPress の設定をここで行って下さい。

[管理画面] - [一般] の「WordPress アドレス」「サイトアドレス」を、ここで https に変更して下さい。

# 参考記事

さくらのレンタルサーバーと concrete5 で常時SSLを実装する方法
https://concrete5.co.jp/blog/sakura-internet-ssl
EC2サーバにPHP環境構築

## インスタンス情報
- インスタンスタイプ t2.micro
- Amazon Linux AMI 2017.03.1.20170812 x86_64 HVM

無料枠で作れる一番しょぼいやつです

## yumで色々インストール
###### 開発系のツールを一括でインストール
`$ sudo yum groupinstall 'Development tools' -y`

###### PHPのバージョン確認(まだインストールされていないので怒られる)
`$ php -v`

###### php7.1系とモジュールを諸々インストール
`$ sudo yum php71 php71-devel php71-mysqlnd php71-mbstring php71-pdo php71-gd -y`
###### PHPが入ったはずなのでバージョン確認
```
$ php -v
PHP 7.1.7 (cli) (built: Sep 14 2017 15:47:38) ( NTS )
Copyright (c) 1997-2017 The PHP Group
Zend Engine v3.1.0, Copyright (c) 1998-2017 Zend Technologies
```
###### 以下コマンドでphp7.1系のモジュールが見れるので必要ならインストール
`yum list | grep php71`

#### 動作確認
###### php -aで対話形式でPHPが使える
```
$ php -a
Interactive shell

php > echo 5 * 5;
25
php > exit
```

## composerインストール
###### 本体ダウンロード
```
$ curl -sS https://getcomposer.org/installer | php
All settings correct for using Composer
Downloading...

Composer (version 1.5.2) successfully installed to: /home/ec2-user/composer.phar
Use it: php composer.phar
````
###### ちゃんとダウンロードできてるか確認
```
$ ls
composer.phar
```
###### パスの通ってる場所へ移動
```
$ sudo mv composer.phar /usr/local/bin/composer
```
###### whichコマンドとか-Vで出てくれば成功
```
$ which composer
/usr/local/bin/composer
$ composer -V
Composer version 1.5.2 2017-09-11 16:59:25
```
MVVM＋ReduxでWPFアプリをC#+F#で作成

##動機
- Reduxというものを知り、WPFアプリ作成に使えるかどうか試したい
- C#とF#を両方使ってみたい

##環境、使用したライブラリ・フレームワークなど
- Visual Studio 2017
- [Redux.NET](https://github.com/GuillaumeSalles/redux.NET)
- [Prism](https://github.com/PrismLibrary/Prism)

参考にしたのは、[こちら](https://github.com/runceel/JXUG)のストップウォッチアプリです。

##ソース
- [MVVMRedux](https://github.com/hfkhku/MVVMRedux)

##感想
- StateをF#のレコードにしたおかげで、前のStateから次のStateを作る部分がすっきり書けた。C#では、こうは簡単にはできない。

``` fsharp:Reducers.fs
static member private TimerReducer(previousState : ApplicationState, action : TimerAction) : ApplicationState = 
        { previousState with NowSpan = action.Now - previousState.StartTime
                             Now = action.Now }
```
- MVVMではMの部分をどうするか迷うのだが、Reducer、Store、State等に分けることで、役割がはっきりした。VMは、Dispatchと監視・反映を行う。
RailsのDeviseで新たに追加したカラムをStrong Parametersに追加してSignup/Updateする方法

Deviseは本当に便利で、ユーザー作成・認証・更新周りの開発が、慣れればサクサク進むなーという印象なのですが、いかんせん私みたいな初心者は、裏側でどのように動いているかが見えないので、なぜこれで動くの？と疑問に思うシーンが多々発生します。

なので、開発を進める中で気になったところを、メモ的に残します。
なによりも、公式ドキュメントをちゃんと読むことが大事。
https://github.com/plataformatec/devise


## RailsのDeviseで新たに追加したカラムをStrong Parametersに追加してSignup/Updateする方法
Strong Parametersで追加したいカラムをこのように追加。

```ruby:registrations_controller.rb
  # protected

  # If you have extra params to permit, append them to the sanitizer.
  # def configure_sign_up_params
  #   devise_parameter_sanitizer.permit(:sign_up, keys: [:attribute])
  # end

  # If you have extra params to permit, append them to the sanitizer.
   def configure_account_update_params
     devise_parameter_sanitizer.permit(:account_update, keys: [:name]) //追加した
     devise_parameter_sanitizer.permit(:account_update, keys: [:description]) //追加した 
     devise_parameter_sanitizer.permit(:account_update, keys: [:attribute])
   end
```


そして忘れがちなのが、before_actionで有効化すること。

```ruby:registrations_controller.rb
class Users::RegistrationsController < Devise::RegistrationsController
  # before_action :configure_sign_up_params, only: [:create]
  before_action :configure_account_update_params, only: [:update] //ここの話
```

これでちゃんと動いた。
asset_sync without Rails

asset_syncをRailsアプリケーション以外から使います

# 手順

1. Gemfileにasset_sync, fog-awsを記述
2. Raketaskを作成
3. Rakefileを作成
4. Raketask実行

### 想定するディレクトリ構造

```
- project
 |- Gemfile
 |- Rakefile
 |- assets.rake
 |- public
   |- images
     |- hogehoge.png
     |- ...
```

## 1. Gemfileにasset_sync, fog-awsを記述

```shell
# プロジェクトルートにGemfileを設置します
$ touch Gemfile
$ vi Gemfile # 内容は以下
$ bundle install
```

```Gemfile
ruby '2.3.0'

source 'https://rubygems.org' do
  gem 'asset_sync'
  gem 'fog-aws'
end
```

## 2. Raketaskを作成

```assets.rake
# frozen_string_literal: true
require 'asset_sync'
require 'fog/aws'

namespace :assets do
  desc 'Synchronize assets to S3'
  task :sync do

    # ここでconfigを設定するのが筋がいいのかはよくわからない
    AssetSync.configure do |config|
      config.fog_provider = 'AWS'
      config.aws_iam_roles = true
      config.fog_region = 'ap-northeast-1'
      config.existing_remote_files = 'keep'
      config.fog_directory = 'your_s3_bucket_name'
      config.public_path = 'public/path'
      config.prefix = 'prefix/path'
      config.log_silently = false
    end

    puts AssetSync.sync
  end
end
```

#### prefixとpublic_pathについて

`prefix` : ローカル（コピー元）とS3（コピー先） **両方で** assetが入っているディレクトリパス
`public_path` : ローカルのassetが置かれているディレクトリのパス

```ruby
config.public_path = 'public'
config.prefix = 'assets'
```

という設定かつ、

```
-project
 |-public
   |- assets
      |- ここにsyncしたいファイルが入っている
```

というディレクトリ構造のとき、S3上では

```
-S3_bucket
 |- assets
    |- ここにsyncしたファイルが入る
```


## 3. Rakefileを作成

```Rakefile
# frozen_string_literal: true
load "assets.rake"
```

## 4. Raketask実行

```shell
$ rake assets:sync
```


### Docs

「Railsに乗っかっておけばDocs書かなくてもいいだろう」って初心者殺しだよね

> Add public_path and prefix config options so asset_sync can be used outside Rails.

https://github.com/AssetSync/asset_sync/blob/master/CHANGELOG.md#v050--2012-08-23
windows10をvirtualboxとkvmで動かしてみた

# 概要

- kvmでwindows10が動かせることが分かったので動かしてみた
- スコアを測り、virtualboxと比べてみた
- 思ったよりちゃんと動くので感心した

# ホストスペック

- host pc：thinkpad t460s
- mem: 20GB
- os: manjaro 17.0.5

# KVM

## 設定

- libvert: 3.7.0
- qemu: 2.10
- cpu: 1物理コア
- disk: 32GB, qcow2
- mem：8192MB
- 他はvirt-managerのデフォルトのまま


# virtualbox

- virtualbox: 5.1.28
- cpu: 1
- disk: 32GB, 動的拡張
- mem: 8192MB

関係あるのか分からないけど、virtualboxのgest additionsをインストールすると起動しなくなる気がする…

# WinSat

スコアはwinsatで測った。測り方などは[ここ](https://horaku.shonanwalker.com/post-700/)を参考にした。

## KVM

```
CPUScore               : 6.1
D3DScore               : 9.9
DiskScore              : 7.55
GraphicsScore          : 2
TimeTaken              : MostRecentAssessment
WinSATAessessmentState : 1
WinSPRLevel            : 2
PSComputerName         : 
```

## virtualbox

```
CPUScore               : 5.9
D3DScore               : 9.9
DiskScore              : 8.35
GraphicsScore          : 2
TimeTaken              : MostRecentAssessment
WinSATAessessmentState : 1
WinSPRLevel            : 2
PSComputerName         : 
```

# 結果

- virtualboxの方がディスク性能が良さそう
- 他はあまり変わらない
    - スコア的には総じて結構高いように感じる。
- ただ少し使った感じ、virtualbox版の方がモッサリしているというか、入力にラグがあるように感じる
- どちらもグラフィックの性能は低い（仕方ない面はあるが…）


# To Do

- もう少し詳しい性能評価（windows詳しくないので分からない）
- グラフィックの性能を向上させることは出来るのか？
ElasticSearchでユーザ辞書の再読み込みをKibanaで行う

# Kibanaでユーザ辞書の再読み込みを行う方法

## 再読込コマンド

ユーザ辞書を更新後、以下のコマンドを実行すると、再読み込みが実施されます。

```
POST /product/_close
POST /product/_open
```

---

## ユーザ辞書の利用設定から再読込の流れ

ユーザ辞書の利用設定から再読み込みの流れもまとめてみました。

tokenizer 設定に、user_dictionary パラメータを追加して、マッピング定義を作成

```
"settings": {
    "index": {
      "analysis": {
        "tokenizer": {
          "ja_text_tokenizer": {
            "type": "kuromoji_tokenizer",
            "mode": "normal",
            "user_dictionary": "user_dictionary.dic"
          },
```

ユーザ辞書ファイルを空ファイルで作成

```
touch ./config/user_dictionary.dic
```

初期状態で、kibana で以下のコマンドを実行

```
POST /product/_analyze?pretty
{"analyzer": "ja_text_analyzer", "text": "幸せ者"}
```

結果は「幸せ」と「者」が分割されて認識されました。

```
{
  "tokens": [
    {
      "token": "幸せ",
      "start_offset": 0,
      "end_offset": 2,
      "type": "word",
      "position": 0
    },
    {
      "token": "者",
      "start_offset": 2,
      "end_offset": 3,
      "type": "word",
      "position": 1
    }
  ]
}
```

ユーザ辞書ファイルに、以下の記載を追加

```
幸せ者,幸せ者,シアワセモノ,カスタム名詞
```

辞書ファイルを更新

```
POST /product/_close
POST /product/_open
```

Analyzeを再実行をしてみると、

```
POST /product/_analyze?pretty
{"analyzer": "ja_text_analyzer", "text": "幸せ者"}
```

１つのキーワードで認識してくれました。

```
{
  "tokens": [
    {
      "token": "幸せ者",
      "start_offset": 0,
      "end_offset": 3,
      "type": "word",
      "position": 0
    }
  ]
}
```
Rubyで固定小数点数を２進リテラル（っぽく）書けるようにした（メタプロもあるよ!)

## 背景・動機など

　ここ最近 [こちらのQiita記事](http://qiita.com/supersaiakujin/items/0c7b52c7533715848867) を参考にしつつ FPGA に16ビット固定小数演算器を実装しようと日々奮闘しておりまして、FPGA やってるとビット単位で信号を扱うことになるので、当然２進数表記が重要になってきます。

　Verilog のシミュレーションを [Verilator](https://www.veripool.org/projects/verilator/wiki/Intro) の生成コードを利用しつつ、[Ruby から使えるようにした話](http://qiita.com/sin00b/items/551dc0436676ee8eacdf) は先日公開させていただきました。

　固定にしろ浮動にしろ、何ビットで計算するにしろ、小数点つきの数を2進リテラルを Ruby でうまく表現できないものかなー、と思っておりました。ちなみに `0b010111.101` みたいな表記だと Syntax Error になります。うむむ。

## 小数表記をメタプログラミングで

　で、１日後、「あ、[`method_missing`](https://docs.ruby-lang.org/ja/latest/method/BasicObject/i/method_missing.html) 使って `0b011.b101` って書けるようにすればいいんじゃね？」と思いつきました。メタプログラミングの一種ですね。Ruby の文法上、数字で始まるメソッドは定義できませんから、一文字以上のアルファベットはどうしても必要になります。

　例えば、こんなふうに書けます。

```rb
> 0b01.b01      # => (5/4)
> -0b01.b01     # => (-5/4) 
```
　ご覧の通り、内部では Rational として扱っています。私の目的にはあまり必要ではありませんが、任意精度の計算にも対応したかったので。

## ２進小数表記「へ」の変換

　２進固定小数の表記はこれでいいとして、任意の数を２進固定小数表記「に」変換するのはどうするか。10進→2進変換はぐぐれば山と出てきますが、いずれも正の整数が前提。。。orz

　でまあ数日悩んでおったのですが、なんとか形になりました。整数部と小数部の桁数を分けて書く [Q format] (https://en.wikipedia.org/wiki/Q_(number_format))というのを使います。

```rb
> 1.25.q(4,4, true)      # => "0001.0100" 
> -1.25.q(4,4, true)     # => "1110.1100"
```
　`q`メソッドに渡す引数は順に

* 整数部の桁数
* 小数部の桁数
* 小数点を表示するか否かのフラグ。デフォルトは false 。

　です。有理数にも適用できます。

```rb
> (11/8r).q(4,4,true)    # => "0001.0110" 
> (-11/8r).q(4,4,true)   # => "1110.1010" 
```

## 入手は gist で

　今回は [gist にあげてみました。](https://gist.github.com/sin00b/c3cd8688294d9b41b0e1f98cce391375) 今回もRuby スクリプト１個なので、コードコピペしてもいいですし、git clone するなら

```
$ git clone https://gist.github.com/sin00b/c3cd8688294d9b41b0e1f98cce391375 hoge
```

としていただければいいです。

　コードみていただければわかりますが、負数表記に変換するのに String\#tr で置換しています。理屈としてはこれでもできるけど、ちょっとなぁって思ってます。