OmniAICreator/Qiita-1.07M huggingface dataset:
MonacaCLI環境構築

#目的
Monacaをインストールして公式チュートリアルに入れるようにする

#事前準備
⑴アカウントを作成（https://ja.monaca.io/)

⑵スマホ実機にAppStoreやPlayストアからMonaca デバッガーをインストール

⑶Monacaのインストール（macOS)
sudo npm install -g monaca

⑷monacaへのログイン
monaca login


あとは公式チュートリアルに従ってビルド等を行う
（https://docs.monaca.io/ja/tutorials/monaca_cli/）
【C#】メソッドのオーバライド、返値型を元の型の派生型にできない。【covariant return types】

追記 : [C# 9.0](https://devblogs.microsoft.com/dotnet/welcome-to-c-9-0/)では、covariant return typesが追加されるようです。

---

2018年現在のC#(C# 7.3とかそれより前）では、オーバライド元のメソッドとオーバライドしたメソッドで、返値型は同じ型にしないといけない。そのため、メソッドをオーバーライドした時、返値型を派生型にできない。

ちなみに、これJavaだとできる。「[共変戻り値型って知ってますか?（スライド）](https://www.slideshare.net/ryotamurohoshi/ss-38240061)」

# どう困るのか

「そんなん別にできなくてもよくない？」
「え、できなかったんだ？でも、気づかなかったんだから、大した問題じゃないんじゃ？」
「知ってた。別に困らなくないか？」

そう思う人も多いかもしれないけれど、これができないから次みたいな例で困る・・・。

```csharp
public class Enemy
{
    /* 略 */
}

public class BossEnemy : Enemy
{
    /* 略 */
}

public class EnemyFactory
{
    public virtual Enemy Create() { return new Enemy(); }
}

public class BossEnemyFactory : EnemyFactory
{
    // ↓こう書きたい。けれどコンパイルエラーになってしまう
    // BossEnemyFactoryを使う際はこう書けた方が便利なことがある
    // public override BossEnemy Create () { return new BossEnemy(); }

    // 実際は、BossEnemy型のインスタンスしか返さない
    // ↓こう書くしかない。
    public override Enemy Create() { return new BossEnemy(); }
}
```

「メソッドをオーバライドする際、その返値型を元のメソッドの返値型の派生型にできない」

だから、`BossEnemyFactory`型の`Create`メソッドは、返値型は`Enemy`にするしかない。

もし返値型を`BossEnemy`にできると、便利な場面がある。

（ちなみにメソッドの返値型は`Enemy`だけど、インスタンス自体は`BossEnemy`型にはもちろんできる。）

# 言語仕様に書いてある

これはC#の仕様。

C#的に、

> The override method and the overridden base method have the same return type.

らしい。

https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/language-specification/classes#override-methods

# 将来的にはできるようになる可能性も

で、これ将来的にはできるようになるかもしれない。

（かもしれないってだけど、まだ残念ながら可能性。）

[dotnet/csharplang](https://github.com/dotnet/csharplang)リポジトリのマイルストーンには、「[7.0](https://github.com/dotnet/csharplang/milestone/4)」、「[8.X candidate](https://github.com/dotnet/csharplang/milestone/12)」などのマイルストーンに並んで、「[X.0 candidate](https://github.com/dotnet/csharplang/milestone/10)」というマイルストーンがある。このマイルストーンは、

> These candidate features could be included in any major or minor release.

とのことで、このマイルストーンに入っているissueは、いつかのメジャーバージョンで機能として入るかもしれない。


そこに、この「メソッドをオーバーライドした時、返値型を派生型にできるようにする」という「[covariant return types](https://github.com/dotnet/csharplang/blob/master/proposals/covariant-returns.md)」が上がっている。

で今の所、[プロポーザル](https://github.com/dotnet/csharplang/blob/master/proposals/covariant-returns.md)がある。加えて、[こんないろいろ検証したプロポザール](https://github.com/dotnet/csharplang/pull/2007/files#diff-b44c8eea0b119dc04e6091103ad8f60d)のプルリクエスも最近上がったみたい・・・

いろいろ優先順位とか、他への悪影響とかあるかもしれないから、できるかどうかはわからないけれど・・・。もしかしたら、将来的にはできるようになるかも。

ちなみに、Issueではこんな会話もあった。

> Seriously, there are a million "good" ideas, modifying the language is a very expensive process and the team has finite resources. Things take time.

https://github.com/dotnet/csharplang/issues/49#issuecomment-392051046

正しい。めっちゃ正しい。

# まとめ

C#の仕様的に、

「メソッドをオーバライドする際、その返値型を元のメソッドの返値型の派生型にできない」

けれど、これは今現在C#のデザインの仕様変更の検討候補に上がっていて、将来的に仕様が変わるかも。

これが変わると、嬉しい例がある。

# （おまけ）ILだと、同じ名前・同じ引数の型の順序で、違う返値型のメソッドをもてる

ちなみに

C#的には「同じ名前・同じ引数の型の順序で、違う返値型のメソッド」をもてない。

けれど、

IL(中間言語)だと、「同じ名前・同じ引数の型の順序で、違う返値型のメソッド」をもてる。
スクリプトのアウトラインには気をつけよう

[Adobe Illustrator Advent Calendar 2018][calender]の6日目の記事です。

この現象は2013年には確認していて[ブログ][blog09]にも書いたけど、昨今、スクリプト人口も増えたろうからアドベントカレンダーで再度注意喚起でもしようかなと。
2019になっても直ってないようだし……

下の鬱陶しいGIFアニメーションはAppleScriptでアウトラインをとる処理をしているものです。ループ処理を必要としないのでとてもシンプルなスクリプトですね。 
　
さて、一見すると元画像は同じなのに結果が違うのがわかると思います。

**[A]**
![01.gif](https://qiita-image-store.s3.amazonaws.com/0/7001/d72eb010-58e0-eda7-4b92-2f1e21ca4445.gif)  

**[B]**
![02.gif](https://qiita-image-store.s3.amazonaws.com/0/7001/96e43292-bc2b-85bf-5cb1-5f0865595f9e.gif)

## データの説明
まずはこの文字にかかっているアピアランスの説明からしましょう。
![スクリーンショット 2018-12-04 20.02.54.png](https://qiita-image-store.s3.amazonaws.com/0/7001/140b0bd5-1dbe-dbae-d12e-c6bde0cc1aa7.png)![スクリーンショット 2018-12-04 20.03.02.png](https://qiita-image-store.s3.amazonaws.com/0/7001/113a3922-9c70-92db-da81-f5290627c708.png)  
1. 上の文字には**形状に変換**の**長方形**
2. 下の文字には**スタイライズ**の**ぼかし** 
が設定されています。

## 何が起こったか
**A**の画像では文字をアウトライン化することで仮想ボディが消えて枠が小さくなっています。
（にしても随分とバウンディングボックスの下の空きが大きい………と思ったらものかのさんの[ブログ][monokano]に解説が。Illustratorめ〜〜〜） 　

続いて**B**の説明です。
アウトラインを取っても枠の大きさが変わらないのは**アピアランスの分割**をしているから。なのですが、すると今度は**ぼかし**がただの塗りになってしまいました。
ここでリンクパレットのキャプチャを見ていただきましょう。
![スクリーンショット 2018-12-04 20.33.34.png](https://qiita-image-store.s3.amazonaws.com/0/7001/2441eaba-1318-59a5-b8c6-6b0137042349.png)![スクリーンショット 2018-12-04 20.33.49.png](https://qiita-image-store.s3.amazonaws.com/0/7001/b38adca5-3270-cff7-1400-c4dd3294b99b.png)
左がアピアランスを分割後のパレット。右がさらにアウトライン処理をかけた後のパレットです。
どうやら内部的にはマスク処理をしているようなのですが、そのマスクが消えてしまいぼかし処理がなくなってしまうようです。この現象が起きるのは同じ**スタイライズ**でも**ぼかし**だけで、**光彩**でも分割後にマスクができるのですが、こちらはアウトラインを取っても保持されます。

## 回避策 　
ではどのように対策すればよいでしょうか？
1. PDF/x-4なら問題なくRIPしてくれそうな気はしますが、未確認。
2. **形状に変換**をする際は**オブジェクトのアウトライン**を設定してあらかじめ仮想的にアウトラインをとっておく。
3. アウトラインはスクリプトのコマンドを使わずに、アクションを作っておいてそれをスクリプトから実行する。
などが考えられます。
 



**AppleScriptで紹介しましたが、JavaScriptでも同様にぼかしが消えるのを確認しています。**  


危険なデータの作り方は回避して事故なく年明けを迎えたいものですね。


[calender]:https://adventar.org/calendars/2879
[blog09]:http://md5500.blog.fc2.com/blog-entry-9.html
[monokano]:https://tama-san.com/illustrator-boundingbox/
vimの画面分割の使い方

こんにちは。

この記事は、Vim Advent Calendar 2018 その2 6日目の記事です。

# 今回の記事について
画面分割の使い方についての記事です。

# 画面分割で使用するコマンド
コマンドはこんな感じです。詳しくは、`:h :sp`に書いています。

- 分割 `:sp` `:vs` `:new`
- 移動 `<c-w>h` `<c-w>j` `<c-w>k` `<c-w>l`
- 場所 `<c-w>H` `<c-w>J` `<c-w>K` `<c-w>L`
- サイズ  `<c-w>=`
- 解除 `<w-o>`

# 画面分割の手順
`:vs<cr>` → 画面移動

`:vs`コマンドが常に最適[^1]ではないですが、考える時間を考慮すると固定化した方が早くなります。

[^1]: `:sp`コマンドなどがあります。

私は、「ここに分割しよ」よりも「分割しようかな」ってことが考えてしまいます。その後「どこに分割しようかな」って考えます。この思考だと、分割した方が早くなります。感じろって感じです。

また、`:vs`を選択したのは打ちやすいからです。人→薬だからです。

他の`:sp` `<c-w>s` `<c-w>v`は、少し打ちにくいです。

## aiの使い分け(おまけ)
だったら、全部固定化した方が早いのでは思いますが、`a`と`i`は使い分けています。htmlをよく使うからかな。

例えば、こんな感じのタグがあったとします。

```
<div class="container">
```

最初に、閉じタグがないのでスラッシュを挿入します。`yypa/<esc>`

```
<div class="container">
</div class="container">
```

次に、余分な属性を削除します。`f C>`

```
<div class="container">
</div>
```

最後にクラス`mb-4`を追加します。`?"<cr>i mb-r<esc>`

```
<div class="container mb-4">
</div>
```

こんな感じで、`a`と`i`を使い分けます。

`a`と`i`は、入力先がすでに頭に浮かんでいるため使い分けが可能になります。

また、`a`と`i`の前に移動コマンドを挟んでいるため、考える時間(一緒だけれど)があります。


# 画面分割を使う場面について
分割方法を書いたので、使う場面について考えます。
私が使うのは、こんな感じです。順に考察していきます。

- 複数のファイルを同時に編集
- コードの一部を編集
- メモの作成
- ブックマークとして利用

## 複数のファイルを同時に編集
html, css, js を同時に編集したい場合があります。

打ち込んだ単語の入力チェックでよく`*`を利用しています。`*`が使えない場合は、コピーして検索しています。

単語が長い場合はコピーしますが、打ち込んだ方が早いので、この手法をとっています。

ちなみにカーソルが移動しないように改造しています。

```
nnoremap * :<C-u>set hls<CR>:let @/ = '\<'.expand("<cword>").'\>'\|echo @/<CR>|"
```

## コードの一部を編集
一部分を切り取って、編集します。

大きいファイルだと、関数の範囲を見失うことが多々あります。
別ファイルとして編集すると見やすくなります。

また、先頭、末尾の移動は楽な為、操作性が格段に上がります。

ついでに、失敗した場合に、元に戻すのが楽になります。

## メモの作成
単語帳として利用したりします。調べた結果を張り付けてコピーしたりして利用します。vimは、選択操作も優れているので素早く編集できます。

## ブックマークとして利用
別のファイルを編集したくなってまた戻ってくるときや、同一ファイルの別の場所を見たくなった場合などもすぐに戻れます。
別機能でマークを設定できるみたいですが、マーク場所を忘れてしまいます。そのため画面分割を使用しています。 `:h m`

## `:tab`について
`:sp`と同じ感じで、`:tab`コマンドも存在しますが、画面を大きく取りたい場合に使用します。使い道は、ほぼ同じになります。
[OpenFOAM/foam-extend] wmakeのコンパイルフラッグを変更する

# はじめに

OpenFOAM/foam-extendはwmakeという独自のビルドシステム（中身はただのbashファイル）を使っています。
wmakeには`Opt`/`Debug`/`Prof`という3種類のビルドが用意されているのですが、コンパイルフラッグを追加したり、各モードに既定のグローバルなコンパイルフラッグを変更したいときがあります。

今回は、研究室の同僚のプログラムをcallgrindを使ってプロファイリングするために、`Prof`に既定されたグローバルなコンパイルフラッグ`-pg -O2`を変更する方法を見つけるのに苦労したので、忘れないようにメモとして残しておきます。

wmakeはOpenFOAM/foam-extendでしか使われておらず、ドキュメントも充実していないので、同じように苦労された方々が多いんじゃないでしょうか。

# グローバルなコンパイルオプションの設定場所


`OpenFOAM-#.#`/`foam-extend-#.#`のディレクトリ直下に`wmake`というディレクトリがあります。その中の`rules`というディレクトリの下に、各プラットフォームおよびコンパイラごとの設定ファイルが置かれています。
今回はUbuntu-16.04LTS、gcc、Profモードのオプションを変更したかったので、`wmake/rules/linux64Gcc/c++Prof`を変更しました。

```bash:c++Prof：変更前
c++DBUG    = -pg
c++OPT     = -O2
```

```bash:c++Prof：変更後
c++DBUG    = -g
c++OPT     = -O2
```

# ライブラリ・アプリケーションごとのコンパイルオプションの設定

各ライブラリ・アプリケーションフォルダ直下の`Make`ディレクトリにあるoption/option.debugファイルの`EXE_INC`にコンパイルフラッグを追加することができます。`Opt`/`Prof`モードでは`option`ファイルを、`Debug`モードでは`option.debug`ファイルが使われます。
特定のライブラリ・アプリケーションのみ設定を一時的に変更したい場合に便利です。

```bash:Make/option：変更前
EXE_INC = \
  -I$(LIB_SRC)/meshTools/lnInclude \
  ...

LIB_LIBS = \
  -lmeshTools \
  ...
```

```bash:Make/option：変更後
EXE_INC = \
  -Wall -Wpedantic \
  -I$(LIB_SRC)/meshTools/lnInclude \
  ...

LIB_LIBS = \
  -lmeshTools \
  ...
```
Python4行で実践！Open CVを使って画像の上に絵を描いてみた

## 何をしたか？
### →OpenCVを使用した画像処理
・画像の上に線をひく
・画像の上に円を描く

####<実装手順>
1. ライブラリのインポート
2. 画像の読み込み
3. 線を引く or 円を描く
4. 処理後の画像を保存

### 実際にやってみた

###1. ライブラリのインポート

~~~Python
import cv2
~~~~

###2.画像の読み込み

~~~Python
img = cv2.imread('./data/pict/image1.jpg')
~~~
imread関数を使って指定したパスの画像を読み込みます。

###3. 画像の上に線を引く or 円を描く
####3-1 線を引く場合
~~~Python
cv2.line(img, (150,150) ,(300,150),(0,0,250),6)
~~~

座標の(150,150)から(300,150)にかけて、赤の6ピクセルの太さの線が引かれます。
座標(0,0)は画像左上の端の部分です。

####3-2 円を描く場合
~~~Python
cv2.circle(img,(200,200), 50 , (255,0,0), 5)
~~~

中心の座標が(200,200)、半径50ピクセル、青の太さ5ピクセルの円が描かれます。
3-1と同様に座標(0,0)は画像左上の端の部分です。

###4.処理後の画像を保存
 
~~~Python
cv2.imwrite('./data/pict/lineon_image1.jpg' , img)
~~~

編集後の画像に名前をつけ(ここでは画像上のラインでlineon_image1.jpgとしてあります)保存します。
その結果指定したディレクトリに

####「3-1 線を引く場合」を行うと、
![lineon_image2.jpg](https://qiita-image-store.s3.amazonaws.com/0/317125/8091085e-59a1-86e5-66d4-3a5590e294ae.jpeg)



####「3-2 円を描く場合」を行うと、

![circleon_image1.jpg](https://qiita-image-store.s3.amazonaws.com/0/317125/9e100837-92ea-cba4-5c3c-b4dd71c055ce.jpeg)


の画像がそれぞれ保存されていることが確認できます。
Angularのproviderは何故modules.tsに定義するべきなのかをアンチパターンから学ぶ

# 前置き
Angularの一般的な構成を見ると、app.modules.tsなどのNgModuleで定義するのが一般的です。
しかし、Componentでもprovidersを定義することは可能です。
何故Componentに定義せず、NgModuleで定義するべきなのかという問題を、開発時に遭遇したコードから考察します。

# 問題のコード

Component内でprovidersを定義していた時、以下のコードで問題が起きました。

```ts:heroes.component.ts
@Component({
  selector: 'app-heroes',
  templateUrl: 'foo.component.html',
  providers: [
    HeroService,
  ],
})
export class HeroesComponent {
```

```ts:heroes.component.spec.ts
beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [
      HeroesComponent,
    ],
    providers: [
      { provide: HeroService, useClass: MockHeroService },
    ],
  });
});
```

上記のように、テスト時にテストのために作成したモッククラス注入させようとした際にMockHeroServiceの注入をすることに失敗し、Mockの処理を走らせることができませんでした。
なぜ失敗したかというと、 `HeroesComponent` が見る`HeroService` はspecで定義した`HeroService` ではなく、 `HeroesComponent` で定義した `HeroService` を参照しにいくからです。

この例から分かるように、 `HeroesComponent` は `HeroService` と切り離された関係でなくなり、独立性が損なわれることになります。

# まとめ

今回の例から分かるように、Component内にprovidersをして依存性を注入してしまうと、アプリケーションという視点から見た時に関係性の分離ができていないため、DIの本質から逸脱しているというのは明白です。
なので、NgModuleで定義しましょうということです。

## Angular 6
というのはAngular4までの話で、Angular6を利用している場合、 `@Injectable` の` providedIn` を利用すれば、今回のような過ちは早々起きることもないかと思われます。


明日は、 @Kirika さんが担当します
よろしくお願いします
推測統計についてまとめてみた（導入編）

#はじめに
エンジニア？アナリスト？サイエンティスト？歴5ヶ月めの新卒社員が最近学んだことをちょっとずつまとめてみたもの。気づいたら（またこの書き始めですが）、実はなんと記念すべき10回目、10回目です！ハイパースペシャルデー！ということで、また気持ちを新たにいろんなことを勉強しつつ、書きまとめていきます。やればできる子、いっちーです(^^)

これまでに書いた記事の最新3回分はこちら↓
[第7弾](https://qiita.com/icchy_sh33p/items/7454f6e062c03489eca2)
[第8弾](https://qiita.com/icchy_sh33p/items/82f2bc7d789b74110f7b)
[第9弾](https://qiita.com/icchy_sh33p/items/2103ee9607244aba73c7)

今日は先日要約統計量についてまとめたので、今度は推測統計の触りの部分をまとめていこうと思います！自分の前勉強してきたことを改めて整理として書いているので、メモ感がえげつないです、お許しを。

# 推測統計とは？
- 推測統計・・・母集団（研究対象となる集団）から標本をランダムサンプリング（無作為抽出）し、その標本によって得られた要約統計量を使用して、母集団全体を検定し、推測すること。

# 推測統計が行われる理由
- 考察の対象となる母集団の全体を捉えることが難しく、母集団を構成するすべてからデータを取ることができないため
- 上記が端的な理由だが、わかりづらいため、実際の例を出してみる
  - 母集団を構成する標本の総数はわかっているが、そのすべてのデータを集めることが現実的に考えて難しいパターン
    - 日本国内では、今Tik Tokが若い世代を中心に流行、社会現象となっているというが、実際使っている人はどのような傾向が見られるか
    - 年末に毎年各局で放送されている長時間の音楽番組を見ている人の音楽の好みをより明確にしたい
    - とある企業の喫煙者は全体の何％で、その人たちの健康状態について長期的な経過を観察、傾向を調査したい
  - そもそも母集団を構成する標本の総数がわかっていない
    - 太平洋に生息するマグロの大トロに含有される脂質の量は大西洋と比較して多いのか、少ないのか
    - 日本のいちごの品種ごとの糖度と生育環境の違いの因果関係
    - 世界の心理学を専攻している人の生活環境内での事象の優先順位のつけ方の傾向

# 標本抽出理論
- 推測統計の根底にある理論。
- 推測統計の対象になる「標本全体のことについて考えていたら、キリがないじゃん」という結論に対して、ただ**じゃあもう調べるのやめよう？**ではなく、**だったら、その中の何個かのデータをとってそのデータの分析から推測したらわかることもあるんじゃない？**という考え方。
- 標本抽出により、研究対象となる『母集団』と、ランダムサンプリングによって得たデータの集まりである『標本』については区別をする必要がある→下に区別に使用される用語をまとめておく

## 標本抽出で使用される用語のまとめ
- 母集団・・・調査の対象となる集団の全体のこと
  - 個体・・・母集団を構成する要素のひとつひとつ
  - 母数・・・母集団におけるデータの特徴や比率などの数値の総称
    - 母平均・・・母集団におけるデータの平均（母数のうちのひとつ）
    - 母比率・・・母集団におけるデータの比率（母数のうちのひとつ）
  - 全数調査・・・母集団を構成するすべての要素からデータを直接とって行う調査→費用・時間・手前の観点から現実的に考えて無理な場合がほとんど
- 標本・・・調査をするために母集団から抽出された個体の集まりのこと
  - 標本数・・・標本として選ばれた個体の数
  - 標本比率・・・標本から計算された比率
  - 標本平均・・・標本から計算された平均
  - 標本調査・・・標本に基づいて行われる調査のこと
- 母数がはっきりわからない場合に使用されるもの
  - 推定量・・・母数の推定方法
  - 推定値・・・推定量から算出された数値（おおよその母数として代用される）→この算出を**母数の推定**という

## 標本抽出理論の存在意義
- あくまで推定値は母数とは異なるため、標本調査の結果から、母集団の特徴や性質を無条件に考察できない→標本と母集団について、差が生じているのではという疑問をひとつひとつ潰していく必要が発生する
- 標本と母集団について、差が生じているのではという疑問の例
  - 推定値と母数の差の程度
  - どの程度の数の標本があれば結果が信頼できるものか→信頼性係数などを使用して算出
  - 標本の抽出方法が適切なものか／どう抽出するか
  - 分析に使用する推定量が適切か（その場に合わせてカスタムできているか）
- 標本抽出理論は**母数の推定値が母集団の性質を正しく伝えていることを保証するためのツール**のひとつである

# 調査に伴う誤差
標本誤差と非標本誤差に大きく分けられる。

## 標本誤差
- 調査結果の確率的な変動により直接定義される誤差。
- 計算上では、この確率であると算出された結果に対して、実際どの程度ずれていたかを示す誤差。
- 具体例
  - 重心がずれることなく真ん中にあり、おもて面と裏面が等しい確率で出るコインを100回投げてみた。
    - 計算上は、おもて面が出る確率は1*(50（=100/2）回/100回)＝0.5
    - 実際は48回おもて面が出た→1*(48回/100回)＝0.48・・・実際の確率
    - 標本誤差はふたつの差である0.5-0.48=0.02

## 非標本誤差
- 大雑把にいうと「標本誤差以外の誤差」
- 意識的、あるいは無意識的に調査の流れの中で手順を間違えたり、調査中に標本を取り巻く環境などが変化することなどにより発生する誤差。
- 非標本誤差が出ないよう、データをとる際は統制が均質に標本にかかっており、純粋な結果が得られるように工夫する必要がある

# 感想
データサイエンティストについて勉強をしていく機会を重ねていくにつれて、機械学習だったりデータを有効的に見せるということを意識する大切さを身にしみて感じることが増えてきたので改めて統計について、自分の知識の穴を埋める作業をちょこちょこやっているのですが、教材を臨床心理学を専攻していた大学時代に使用していたものを中心に使っていることもあり、懐かしい気持ち半分、思った以上に直接触っていない時間が長かったことで忘れていることも多くなっていて焦りもしたり。考えさせられる部分が多いです。

が、触っていけば触るほど思い出せたりとか、実際のデータを早く実践の場でいじっていきたいなという気持ちが増えています。この調子で頑張っていこうと再認識しました。

ひととおり学んだことのある分析について知識をまとめたら、タイタニックデータを使った記事も書いてみたいな。Advent Calendarを意識することで勉強の仕方も幅が増えて楽しいです。これだけでも大きな収穫。

また明日も頑張って投稿します٩( ᐛ )و

ではでは
今更?極値統計を用いてメッシの凄さを実感する

#はじめに
サッカー好きな人はもちろんのことそうでない人でもほとんどの人が知っている<b>リオネル・メッシ</b>
彼の打ち出したリーガエスパニョーラシーズン最多得点記録(<b>50ゴール</b>)という大記録はどれほどすごいのか、
どれだけの年月が経てば彼ほどの選手が現れるのかを<b>極値統計</b>という手法を用いて推測しました。
#極値統計とは？
極値統計学とは、豪雨、強風などの極端な自然現象や、ファイナンスなどでリスク評価のために応用される統計手法です。一般に統計学では母集団の中心に対する推測を行っていますが、極値統計学は、極端な現象、すなわち、母集団分布の端(<b>最大値や最小値</b>)に対する推測を行います。
#一般化極値分布
極値を表す確率分布は、Gumbel分布、Frechet分布、Weibull分布の3つのタイプに分類できることが知られています。
これら3つの分布が<b>一般化極値分布（GEV）</b>という、次の1つの式で表現できることがわかっています。

```math
G(z)=exp[-(1+ξ(\frac{z−μ}{σ})^\frac{-1}{ξ})]  

```
パラメーターは3つで、ロケーションを示すμスケールを示すσ形を示すξとなります。今日では上記の式で表せられる一般化極値分布をまず推定し、そこから3つのうちのどれに当たるかを推定するという手法が採られています。具体的には、
ξ=0のときにGumbel分布、ξ>0のときにFrechet分布、ξ<0のときにWeibull分布となります。

#得点王データ
今回はWikipediaを参照し、リーガエスパニョーラの1928-29から2017-18シーズンまでの約90年間得点王の得点数をもとに得点王の得点数に関する極値分布を作成する。
得点数のグラフをプロットすると下図のようになります。

```R
date <- read.csv("liga.csv",header =FALSE)
#データのプロット
plot(date[,1], type = "h", xlab = "", 
     ylab = "Scorers", main = "Top Scorers Liga ")
```
<img width="800" alt="scores.png" src="https://qiita-image-store.s3.amazonaws.com/0/255598/2c3fff57-9f2f-d50c-163f-b20bba8bbfa8.png">
図を見てわかる通り近年のメッシとロナウドの得点数がどれほどすごいか一目瞭然でした。（笑）
#極値分布のあてはめ
Rの極値理論のライブラリであるismevとextRemesを用いてデータを極値分布に適応します。

```R
library(ismev)
library(extRemes)
fitgev <- fevd(date[,num], type = "GEV")
```

###パラメータ
```R
par.gev <- distill(fitgev)[1:3]
par.gev
#location       scale       shape 
#22.81797313  5.81334547 -0.01777088
```
推定したパラメータはξ(shape)<0よりWeibull分布に従うことがわかります。

###モデルの検証
モデルを検証するために
推定結果のうちメジャーな4つのグラフをプロットします。

```R
par(mfrow=c(2,2))
plot.fevd(fitgev, type = "probprob", main="Probability plot")
plot.fevd(fitgev, type = "qq", main="Quantile plot")
plot.fevd(fitgev, type = "rl", main="Return level plot")
plot.fevd(fitgev, type = "density", main="Density plot")
```
<img width="1000" alt="model.png" src="https://qiita-image-store.s3.amazonaws.com/0/255598/e0d8862c-7656-6e56-6916-4bcf6f995c03.png">
左上と右上はそれぞれprobability plot,quantile plotと呼ばれているもので、かなりざっくりした説明をすると対角線に沿っているほど分布のあてはまりが良いといえるものです。
また、Return level plotではそれぞれの値が95％以内には収まっていることを示しています。
最後に、Density Plotはサンプルデータと推定モデルが概ね一致していることがわかります。

#結局メッシはどれだけすごいのか
推定したモデルよりメッシの打ち出したシーズン50ゴールが何年に一度のものなのか推定します。

```R
scores <-50
mYears <- 1 / (1 - pevd(scores, loc=par.gev[1], scale=par.gev[2], shape=par.gev[3]))
mYears
```


結果は・・・

<b>132.3342年！</b>

メッシは132年に一度の天才だということができました！

つまり彼ほどの選手が現れるのにはあと132年の年月が必要ということです。

#おまけ

生成したモデルから得点数の再現レベルが分かります。メッシはおよそ100年に一度の天才であることがわかりましたが、1000年に一度の天才はどれだけの得点を重ねるかわかります。

```R
ci.fevd(fitgev, type = "return.level", return.period = 1000)
```

結果は <b>60.606点</b>でした！

リーガエスパニョーラは年間38試合なので全試合得点してさらに二試合に一回は二得点しなければいけません

メッシも凄すぎますが、1000年に一度となるともはや凄すぎて訳が分からない次元ですね（笑）
PyTorchでRNNを使う簡単な例

# TL; DR

- Web上だと画像系のサンプルコードは多いけど，イマイチ系列系のサンプルコードが難しかったので簡単な例を作った
- PyTorchのRNNを利用して，系列を受け取り系列の和を予測するモデルを作成した
- PyTorchのversionは0.4.1
- notebook: http://nbviewer.jupyter.org/gist/cocomoff/e0d415d0d89e793b0f84a3a13f47e604

# リンクなど

- PyTorchにはRNNとRNNCellみたいに，ユニット全体とユニット単体を扱うクラスがあるので注意
    - 参考: [PyTorchのRNNとRNNCell](http://takoroy-ai.hatenadiary.jp/entry/2018/06/10/203531)
- PyTorchのRNNやLSTMから得られるoutputは，隠れ層の情報を埋め込んだものになっている
    - 参考: [What's the difference between “hidden” and “output” in PyTorch LSTM?](https://stackoverflow.com/questions/48302810/whats-the-difference-between-hidden-and-output-in-pytorch-lstm)

# データ
- 例:
    - 入力 [1,0,1,2,0,0,0,0,0]
    - 出力 4
- ある1つの系列(input_dimは適当に固定)から，ある1つの数値を予測するタスク

# 予測器

- RNNを利用し，RNNの隠れ層から値を予測する層をnn.Linearで付与する
- batch_firstをTrueにすると，**(seq_len, batch, input_size)**と指定されている入力テンソルの型を**(batch, seq_len, input_size)**にできる
- ある1つの列が対象なので，**seq_len=1**とする
    - そのためテンソルの型をunsqueeze/squeezeでマニュアル通りに揃える
    - (補足): 実はseq_lenとinput_dimの使い方が間違っている気もする（正しい使い方が分かる人教えて）
- 出力outputは**(batch, seq_len, num_directions * hidden_size)**と指定されているが，双方向ではないため**num_directions=1**となる
- 出力hpは**(num_layers * num_directions, batch, hidden_size)**と指定されているが，層を積まないのかつ単方向なため，**(1, batch, hidden_size)**という型で返る

```python
class Predictor(nn.Module):
    def __init__(self, n_input, n_hidden, n_output):
        super(Predictor, self).__init__()
        self.rnn = nn.RNN(n_input, n_hidden, num_layers=1, batch_first=True)
        self.out = nn.Linear(n_hidden, n_output)
        
    def forward(self, x, h=None):
        output, hp = self.rnn(x.unsqueeze(1), h)
        output = self.out(output.squeeze(1))
        return output, hp
```


# 結果

- 誤差をプロットしてみる
    - RNNはLSTMに比較して長い列が苦手だとよく言われている（教科書などを参考）
    - なので固定長100ぐらいまで長くしてあるので，RNNをLSTMに置き換えると，LSTMの方が誤差が小さく精度高く和を出力する傾向が見られる

![loss.png](https://qiita-image-store.s3.amazonaws.com/0/7181/c86c953d-61ea-1dc6-3237-81476a50db64.png)
はじめてのSelect2でマルチ選択できるセレクトボックスを作ってみる

# 完成図

![manage.gif](https://qiita-image-store.s3.amazonaws.com/0/159761/d57b16e7-728f-abec-d486-9de5b5b90b93.gif)

# Slect2はjQueryのセレクトボックスを作ってくれるプラグインです
バッサリした訳：いろいろオプションがあってカスタマイズできるセレクトボックスが作れるよ
> Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
> [Getting Started | Select2 - The jQuery replacement for select boxes](https://select2.org/)

# CDNを使えば速攻で使えるようになります
- [Using Select2 from a CDN](https://select2.org/getting-started/installation)

# マルチ選択できるセレクトボックスを作ります
- [Multi-select boxes (pillbox)](https://select2.org/getting-started/basic-usage)

```html:mySelect2.html
<!DOCTYPE html>
<html>
<head>
    <!-- jQueryの読み込み -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Select2の読み込み -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    <script type="text/javascript" src="js/mySelect2.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    <title>はじめてのSelect2でマルチ選択できるセレクトボックスを作ってみる</title>
</head>
<body>
    <!-- Select2で作るセレクトボックス -->
    <select class="pillbox" multiple="multiple"></select>
</body>
</html>
```

```js:mySelect2.js
/**
 * セレクトボックスの中身.
 * @type {Object}
 */
var sentakushi = {
    monkey : 'さる',
    rabbit : 'うさぎ',
    possum : 'ふくろねずみ',
    ponsuke : 'ぽんすけ'
};

/**
 * DOM要素が読み込まれてからSelect2でセレクトボックスを作るため$(document).ready()で実行する.
 */
$(document).ready(function() {
    // セレクトボックスの中身を設定する.
    let options = $.map(sentakushi, function(text, value) {
        let option = $('<option>', {value: value, text: text});
        return option;
    });
    $('.pillbox').append(options);
    // Select2でセレクトボックスをつくる.
    $('.pillbox').select2();
});
```
VaporとMySQLを接続する。その2

前回の記事 [VaporとMySQLを接続する。その１](https://qiita.com/takoikatakotako/items/a1bf14554f2c7120bfe3) ではVaporとMySQLを接続するところまで実装しました。
今回の記事では接続したデータベースの以下のカラムを持つ`article`テーブルからデータを取り出していきます。
`article`テーブルにはIT企業のエンジニアブログのURLが入っています。(アンテナサイトを作ろうとした時に取得したデータです。アンテナサイトを作ることは半分諦めました)

| Field     　　　　　　　　　　　 |       Type |   
|:-------------|------------------:|
| article_id  　　　   |              int(11) |  
| pub_date        |            date |  
| title          　|              varchar(255) | 
| article_url     |                varchar(45) |
| site_id        　|             int(11) | 

`article`テーブルに対応するモデルクラス `Article.swift` を作成します。

```swift:Article.swift
import FluentMySQL
import Vapor

final class Article: MySQLModel {
    var id: Int?
    static let entity = "article"  // テーブル名

    var article_id: Int?
    var pub_date: Date?
    var title: String?
    var article_url: String?
    var site_id: Int?
}

extension Article: Migration {}

extension Article: Content { }

extension Article: Parameter { }
```

作成したモデルクラスの`Article.swift`を使用する旨を `configure.swift`で記述します。

```swift:configure.swift
/// Configure migrations
var migrations = MigrationConfig()
migrations.add(model: Article.self, database: .mysql)
services.register(migrations)
```

追記: 本記事と関連する内容の事を書いてくださった方がおりますので紹介します。
[本番運用するアプリでモデルの自動マイグレーションを使ってはいけない](https://qiita.com/5t111111/items/572196e38df88646c847)　　

`routes.swift`に `/article` へのgetリクエストが来たら　`Article`　テーブルの内容を返す処理を記述します。
また、Vaporでは [Fluent Queries](https://docs.vapor.codes/3.0/fluent/querying/#sort) と呼ばれるORMで用いて任意のクエリを発行することができます。

```swift:routes.swift
router.get("article") { req in
    return Article.query(on: req).sort(\.pub_date, .descending).range(..<50).all()
}
```

最後にブラウザから `http://localhost:8080/article`　へアクセスすると以下のようなJSON形式で取得できていることが確認できます。(*実際にはインデントはありません)

```
[  
   {  
      "article_id":117,
      "pub_date":"2018-09-04T00:00:00Z",
      "title":"運用しているAWS CloudFormationのテンプレートをJSONからYAMLに移行する",
      "site_id":2,
      "article_url":"https:\/\/dev.classmethod.jp\/cloud\/aws\/aws-cloudformation-migration-json-to-yaml\/"
   },
   {  
      "article_id":118,
      "pub_date":"2018-09-04T00:00:00Z",
      "title":"【9\/14（金）大阪】モバイルメソッド大阪 第2回 開催内容決定のお知らせ #mobilemethod",
      "site_id":2,
      "article_url":"https:\/\/dev.classmethod.jp\/event\/mobilemethod_osaka_2\/"
   },
   {  
      "article_id":119,
      "pub_date":"2018-09-04T00:00:00Z",
      "title":"【東京・札幌・大阪】「Alexa Salon vol.3〜Alexa-SDK V2基礎講座＆3大VUI試食会〜」を開催します！#Alexa",
      "site_id":2,
      "article_url":"https:\/\/dev.classmethod.jp\/news\/alexa-salon-vol3\/"
   }
   .... 略
]
```
クソカードゲームを作るクソアプリを作った(React)

## 作ったモノ
<img src="https://qiita-image-store.s3.amazonaws.com/0/261659/e196775d-1b3c-21af-fd47-8626994545fd.png" width=60%>



## 実際に印刷したもの
<img src="https://qiita-image-store.s3.amazonaws.com/0/261659/39fa7be1-6bdd-4fd0-c4b6-8e5b84b35f69.jpeg" width=50%>


ここで実際にクソゲーを作れます
[アナログゲームプロトタイプメーカー](https://www.ginjake.net/card/)
[github](https://github.com/ginjake/card_generator)

### 何故作ったのか
ちょうどreactを勉強したいが、せっかくなので何か作りたい。
同人活動でアナログゲームを作っているが、プロトタイプを作るのが毎回大変だった。
海外産の遊戯王ジェネレータ等を使っても日本語だと文字化けしたり、改行がズレたりといまいち。
そういうわけで、作った。
あと、当時正式版が公開されたばかりのbootstrap4も使ってみたかった。

### 工夫した点
印刷して使う事が前提だったので、
切り離しやすいよう1枚目の紙と2枚目の紙でカードの位置がズレないようにした。

### 技術的な点
・印刷時は9枚単位で改ページする
CSSに'page-break-after: always'なるものがいる、便利なものは使う。

・カード3つ毎にdivで囲む。カード9つ毎にまたdivで囲む。
3つで次の行、9つで前述のpage-break-afterをするため、divで階層化したかった。
今思えばCSS疑似クラスでいけそうだけど気にしない。
こういう感じにしたかった。

```jsx
for(var i=0;i < カードの枚数;i++){
	if(i%9 === 0) {
		<div className="page-break"> //9枚ごとに次の紙に印刷
			if(i%3 === 0) {
				<div className="row">//3枚ごとに改行
			}
			<Card>
			if(i%3 === 0) {
				</div>
			}
		</div>
	}
}
```

JSXの中ではforが使えず、上記のコードは上手くいかない。困った。
というわけでこうなった。

```jsx
{
	//this.card_row_limitは3
	Object.keys(this.cardlist).filter(key => key%this.card_row_limit === 0).map(
		(carddata,i) => { 
			return React.createElement('div',{className:'row'},((row_data,num) =>
				Object.keys(this.cardlist).filter(key => ((key >= num*this.card_row_limit) && (key <= num*this.card_row_limit+(this.card_row_limit-1)))).map(
					(row_card_data,in_row_number) =>  {
						var card_num = num*this.card_row_limit+in_row_number
						return React.createElement(CardBox, {data:this.cardlist[card_num], index:card_num, ref:"card"+(card_num)})
					}
				)
			)(this.cardlist,i))
		}
	)
 }
```

皆さんはそれぞれのネストが何しているか分かりますか？
マジな話、オレは分からない

半年前の俺によると
`this.cardlist`がカードのデータ。3枚目のカードなら`this.cardlist[3]`。
`cardlist`からキーを取得して、`filter`で3の倍数だけ取得、それを1回目の`map`でループ。
`return React.createElement('div'` で `div`を作る。
第三引数で今度はカードリストのうち、123 や　456 など3つを返すようにしてあげるためまた`filter`と`map`

らしい。へーすごいね。

・`JSX`の中で`for`は使えず、ループは`map`で行う
・`map`の返り値として`React.createElement`オブジェクトを返す事で,タグとかコンポーネントが生成できる

という感じ。
このときちょうどlaravelも学習しており、JSXもbladeみたいなテンプレートエンジン族だと思っていた。
実際にはjavascriptの拡張記法。
`margin-left`が`marginLeft`だったり`class`が`className`な事にキレ散らかしていたが、classはjavascriptの予約語だし当然である。


あと、bootstrap4普通にいい感じだった。

### 今後なんとかしたい点
・バグ潰し(xの調整がうまくいってない)  
・canvasにして画像として保存できるようにする  


頑張って作ったので使ってね。

### クソアプリその２
「React完全に理解したし次いこう」
となってディープラーニングに手を出した。

[エロゲの立ち絵っぽいか判定するマン](https://qiita.com/sirojake/items/99847cdc13c1f4c8ff9e)
めっちゃ頑張って正解率96%まで伸ばしたが、
あんまりイイネがつかなくて悲しかったので誰か使ってほしい
何に使うかわからないが、せめて学習済みモデルだけでも。

ちなみに、冒頭で作ったカードゲームはつまらなかった。
fishシェルで使えるNode.jsのバージョンマネージャの使い方

## はじめに
fishシェルを使っているときにもっとも使いやすいNode.jsバージョンマネージャが`fnm`です。複数のバージョンのNode.jsをインストールできて、バージョンの切り替えも一瞬でできてしまいます。

## fisherman(fishのプラグインマネージャ)をインストール

`curl -Lo ~/.config/fish/functions/fisher.fish --create-dirs https://git.io/fisher`

## Node.jsバージョンマネージャ「fnm」をインストール

`fisher add jorgebucaran/fnm`

## fnmのバージョンチェック

`fnm -v`

## 長期サポート(Long Term Support)バージョンをインストール

`fnm lts`

## バージョンを指定してインストール

`fnm 10.13.0`

## Node.jsのバージョンチェック

`node -v`

## バージョン切り替え

`fnm`

```
• 8.11.1
  9.11.1
  10.13.0
```
safari(iOS12)で"Total canvas memory use exceeds the maximum limit"が出る場合の対処法

phina.jsに限った話じゃないのですが、phina.jsを使っている時に遭遇した問題なのでphina.jsのアドベントカレンダーとして書いてみたりします。

#前置き

phina.jsで、結構大きめの画像を大量に扱うアプリケーションを作っていたのですが、iOS12のsafariでテストしていた時に、

"Total canvas memory use exceeds the maximum limit(288MB)"
<img width="503" alt="スクリーンショット 2018-12-05 18.16.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/31052/dbe53e8c-9188-eab9-385f-f1aafe899014.png">

という警告が画像の読み込み時に発生する様になりました。
この警告が発生してからgetContext('2d')を実行すると必ずnullが返り、それ以降canvasからcontextの取得が出来なくなってしまいます。
288MBの部分は機種によっては255MBとかになるみたいです(iPhone Xは288MB)
翻訳すると、「総キャンバスメモリ使用量が上限を超えています」との事。

検索してみると、[stackoverflow](https://stackoverflow.com/questions/52532614/total-canvas-memory-use-exceeds-the-maximum-limit-safari-12)で外人さんが同じ現象で困っておりました。
親切な事にテスト用コードまで付けてくれています。
以下のコードがそれです（一部変更してます）

```javascript
let ctxs = []
let counter = 0

// create a 1MB image
const createImage = () => {
    const size = 512

    const canvas = document.createElement('canvas')
    canvas.height = size
    canvas.width = size

    const ctx = canvas.getContext('2d')
    ctx.strokeRect(0, 0, size, size)
    return canvas
}

const createImages = n => {
    // create n * 1MB images
    for(let i = 0; i < n; i++ ){
        const canvas = createImage()
        ctxs.push(canvas)
    }
    console.log(`done for ${ctxs.length} MB`)
}

```

512x512で1MBなんですなー。初めて知りました。
このコードをsafariのデバッグコンソールに貼り付けてテストが出来ます。
試しに、createImages(288)を実行して、その後に、createImages(1)をやると・・・

<img width="661" alt="error.png" src="https://qiita-image-store.s3.amazonaws.com/0/31052/6d9d8b8a-8444-11ef-c0d8-850922a68e23.png">
やはり同じ警告とエラーが・・・

###調べてみると
iOS11以前は、2151MBまで確保が出来た様です(手持ちのiPhone7(iOS11)調べ)
それがiOS12からは288MB。
もう少し調べてみると、WebKitのリポジトリに記述があり、iOS12からcanvasの最大使用量がRAMサイズの4分の１に縮小された模様です。
https://github.com/WebKit/webkit/commit/5d5b478917c685e50d1032ccf761ca53fc8f1b74#diff-b411cd4839e4bbc17b00570536abfa8f
~~余計な事しやがって~~
そもそもiOS11までは2分の1じゃない気がするんですが。

最初はsafariのバグじゃないかと思って~~放置~~今後のアップデートで直らないかなーと思ってたのですが、望みが薄そうなので、このメモリ量でやりくりするしかありません。
とりあえず、今まで使ってはそのままにしていたcanvasを解放してメモリを節約していきましょう。

###で、解放ってどうやんのよ
ブラウザではメモリの解放を手動で出来ないので、delete命令等でオブジェクトの参照を切って、あとは神の見えざる手(GC)に頼るしかありません。
不要になったcanvasをdelete canvasで削除してみます。

```javascript

const deleteImages = () => {
  for( let i = 0; i < ctxs.length; i++ ){
      delete ctxs[i];
  }
  ctxs = [];
}

```

###これで大丈夫・・・
GCが動くと言ったな。アレは嘘だ。
deleteしても、nullを代入しても、参照は切れているのに、canvasの総メモリとしてはカウントされたままの模様です。

どうしようかと思って苦し紛れに試したのが以下の方法です。

```javascript

const deleteImages = () => {
  for( let i = 0; i < ctxs.length; i++ ){
      ctxs[i].width = 0;
      ctxs[i].height = 0;
      delete ctxs[i];
  }
  ctxs = [];
}

```

deleteの前に、canvasのwidthとheightを0にしただけ。
これでいいのかよ、と思う様な解決方法。
恐らく、canvasだけに限った話ならdeleteも要らないんじゃないかと。

###解決はしましたが
とりあえずの方法なので、これが正しく安全な方法とは思えません。
stackoverflowで困ってた外人さんにもお伝えしたところ、この方法で問題の解決が出来た模様で、まぁ間違ってはいないみたいです。

なにか知ってる親切なお方がいましたら、コメントで教えてくれると非常にありがたいです。
[cocoa][swift]関東swift勉強会2018-05 を振り返る

<p>2018年5月11日（金）の夜間、東京都豊島区の<a href="http://co-forest.com/">池袋コワーキングスペース OpenOffice FOREST</a>におきまして、「関東swift勉強会2018-05」を開催致しました。<br />
参加された方から、発表を聞くだけですと学ぶのが難しいという意見が出ました。例えば、ペアプログラミングをやってみるのは？というアイディアをいただきました。<br />
次回の六月は合同勉強会『The Bash in Tokyo』ですので、七月の勉強会で何かやってみます。</p>

<p>来月に任意団体MOSAのスタート・イベントとして『The Bash in Tokyo』を予定していました。<br />
このイベント以降は新たな体制で実施するという気持ちでした。<br />
ですので、NPO法人としての最後のSwift勉強会になるという気持ちで開催いたしました。<br />
NPO法人から任意団体に移行するとうことで、無理をしてイベントを主催してきましたが、勉強会の本来の目的としてどうなのかという気持ちが出ていますが、それについては次回以降でお話しいたします。</p>

# Cocoa.swiftについて
<ul>
<li>Cocoa勉強会 関東 Swift分科会 です。</li>
<li>ほぼ毎月、池袋コワーキングスペース OpenOffice FOREST で開催してます。</li>
<li>macOS/iOS/watchOS/tvOSプログラマーのための勉強会です。</li>
<li>プログラムに関する知識や経験を共有を目的としています。</li>
<li>会の活動内容や発表資料、サンプルコードは公開を前提としています。</li>
<li>申し込みは、connpassから。<br /><a href="https://cocoa-kanto.connpass.com/">https://cocoa-kanto.connpass.com/</a></li>
</ul>

# 概要
<ul>
<li>発表資料は<a href="https://cocoa-kanto.connpass.com/event/85331/">connpassページ</a>からどうぞ！</li>
<li>会場の様子は、ハッシュタグ『#cocoaswift #cocoastudy #bukuroswift』でtweetしています。</li>
</ul>

# QuickLook と SpotLight (macOS)
<p>過去、Cocoa勉強会で発表がありましたが、今回のポイントは、エントリーポイントとなるC言語の関数からSwiftで実装されたコードをどうリンクさせるかで、ドキュメントでの説明がない部分ですが、試行錯誤して発見された方法が発表されました。</p>

# BUKURO.games : RUDP (Reliable User Datagram Protocol)
<p>「<a href="https://sqex-onlinetechopenconf2018.peatix.com">オンラインゲーム・テクニカルオープンカンファレンス #2</a>」で発表されたRUDPを参考にして実装してみた発表です。</p>

# ぼっち開発者のプロジェクトマネジメントその2
<p>技術日誌をつけよう！という内容です。仕事ではつけている方は多いと思いますが、個人の開発でも！</p>

【関連情報】
<a href="https://qiita.com/advent-calendar/2018/cocoa">Cocoa Advent Calendar 2018</a><br />
<a href="https://cocoa-kanto.connpass.com/event/85331/">関東swift勉強会2018-05</a><br />
<a href="https://cocoa-kanto.connpass.com/">Cocoa.swift</a><br />
<a href="https://www.facebook.com/groups/cocoa.kanto/">Cocoa勉強会 関東</a><br />
<a href="http://www.bitz.co.jp/weblog/">Cocoa練習帳</a><br />
<a href="https://qiita.com/m_yukio">Qiita</a><br />
Nuxtを採用できないプロジェクトでNuxtのアーキテクチャを採用する

この記事は[Nuxt.js Advent Calendar 2018](https://qiita.com/advent-calendar/2018/nuxt-js)の7日目の記事です。

# 概要

[かめぽん](https://twitter.com/kamepon_fe)さんの記事ではNuxtというアーキテクトを組織に適応するメリットを語ってくれていますが、僕はここでは「Nuxtというアーキテクチャを技術的にどう持ち込むか」を考え、試している内容をアウトプットします。

# Nuxtを使うメリット

大きく分けて以下かなと。

* 簡単にSSRできる
* 簡単に静的サイトが作れる
* チームにVueのアーキテクチャを提供してくれる

今回話したいのは3つ目の「チームにVueのアーキテクチャを提供してくれる」です。

# Nuxtのアーキテクチャって？

`VueRouter` `Vuexを`内包し、`components` `pages` `layouts`に分類されるViewから構成されるVue主体のフロントエンドアーキテクチャ。

# アーキテクチャのみを採用する理由

* `pages` `components`にViewを分割することで、役割を明確に分離できる
  * React的に`pages`をContainerComponent, `components`をPresentationalComponentとみなせる
  * AtomicDesign的に`pages`をPages, `components`をAtoms, Molecules, Organisms, Templatesとみなせる
* `pages`とルーティングを結合させることで、手間をへらす
* Vuexをモジュールに分割することで巨大なストアの作成リスクを減らす

これらが「Nuxtと同じ」の一言で片付くとしたら、楽じゃありませんか？

# Nuxtを使わずにNuxtのアーキテクチャを実現する

### ルーティング

[vue-cli-auto-routing](https://github.com/ktsn/vue-cli-plugin-auto-routing)を用いることで、VueCLI(または自前のWebPackでも)
NuxtJSと同等のディレクトリ構造とルーティングを用いることができる。

利用者、チームは以下のNuxtのガイドラインを参照すればよいのです。

* [layouts](https://ja.nuxtjs.org/guide/directory-structure#layouts-%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA)
* [pages](https://ja.nuxtjs.org/guide/directory-structure#pages-%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA)

### ディレクトリ構造

`layouts`, `pages`がVueCLIによって提供されたことにより、
以下のディレクトリについてもWebPackのみの設定で提供が可能になります。

* [assets](https://ja.nuxtjs.org/guide/directory-structure#assets-%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA)
* [components](https://ja.nuxtjs.org/guide/directory-structure#components-%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA)

また、エントリーファイルを中心に、
`middleware`や`plugin`といった機構を用意することも可能です。

### データストア

一番のボトルネックはここで、
現状NuxtのVuexの自動解決を提供してくれるライブラリが存在しない。

前項で`plugin`を提供できると言ったな？ Vuexに関しては嘘だ。
完全に隠蔽することはできません。

[NuxtJSのストアの実装](https://github.com/nuxt/nuxt.js/blob/dev/packages/vue-app/template/store.js)
から、Vuexストアの実装を模索するしかないというのが現状です。（そうじゃなかったら教えてください）

しかし、待って欲しい。
本当にそこまで厳密な実装が必要なのか？

「構造」だけにフォーカスすれば、このくらいの実装でも大丈夫かもしれない。
本格的に隠蔽が必要になったら、vue-cli-auto-storeを作りましょう。

```js:store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = () => {}

import * as moduleA from "./module-a"
import * as moduleB from "./module-b"

export default new Vuex.Store({
  modules: {
    moduleA,
    moduleB
  }
})
```

## 規約としてのNuxt

これまで、Vueに関するディレクトリ構造やアーキテクチャを多くの人が模索し、悩んできたはずで、
Nuxtはそれに対する答えの一つだと思っています。

アーキテクチャを問題に対応する構造として考えたとき、
Nuxtの構造は多くの場合において最低限な抽象化を果たしています。

明確な理由を説明できないのであれば、
すでにあるアーキテクチャに乗っておくことで、より本質的な問題と向き合う時間を確保できるのではないか？

Nuxtというライブラリを導入できないチームであっても、
複数人、それもフロントエンドアーキテクチャに強い人がリードを取り続けられない環境において、
Nuxtというアーキテクチャは非常に強力なツールになりえると僕は考えます。

ぜひ、一度Nuxtのアーキテクチャを適応できないかを考えてみて欲しい。

## まとめ

Nuxtを使えないプロジェクトで、Nuxtのアーキテクチャを採用する方法をご紹介しました。

昨日の[組織構築としてのNuxt.jsの可能性について](https://qiita.com/isihigameKoudai/items/243fa6803229e48ef8ce)の記事は非常に良い記事で、Nuxtは組織にもポジティブな影響を与えられると僕も考えています。

アーキテクチャの議論は空中戦になりやすく、明確な答えが見つけづらいものです。
そういう悩みを抱えている方は、Nuxtを採用するかどうかは置いといて、一度構造を知ってそれを土台に「Vueでもこういうことができるんですよ」というふうに話をつなげてもらえると、道が拓けるかもしれません。
C++/CLIとC++混在でstd::mutex使えないのでその代わりを実装

#C++/CLIとC++混在でstd::mutex使えない
C++/CLIが呼び出しているC++の関数内で排他制御したいがstd::mutex使うと
VS2017ではビルド時に「<mutex> is not supported when compiling with /clr or /clr:pure」というエラーになる。

C++/CLIだけならば代わりにmsclr\lock.hが使えるがC++では使えない。
ついでに、調べるとWLRとかいうのでも使えそうなものが試すとこれもエラーに。

C++/CLIが呼び出しているC++内で排他制御するにはwinAPIを使うしかないっぽい。
以下を使う。

```cpp
#include<windows.h>

//初期化 コンストラクタなどで
HANDLE hMutex = CreateMutex(NULL,FALSE,NULL);

//ロック取得
WaitForSingleObject(hMutex, INFINITE);
//なんか排他的に実行したい処理

//ロック解放
ReleaseMutex(hMutex);

//終了　デストラクタなどで
CloseHandle(hMutex);

```

しかし、これを素直に使うとロック解放忘れ、クローズし忘れでバグ作りそうなので、std::lock_guardのようにロック取得したブロック(lock_guardのインスタンスのスコープ)を抜けると勝手にロック解放されるようにしたい。

ネット探すと無駄に高機能な実装みたいなのが見つかった気がするけど、そんな大した機能はいらないのでMutex限定で超簡単な実装を作ってみた。

#std::mutex、std::lock_guardの代わりの実装

ヘッダーオンリーです。
どうぞご自由に改変、ご使用ください。
ソースは[hidetaka0/VCppMutex](https://github.com/hidetaka0/VCppMutex)にも上げています。


```cpp:Mutex.h
#pragma once
#include <windows.h>

class Mutex
{
private:
	HANDLE g_hMutex;

public:
	Mutex()
	{
		//Mutex生成
		g_hMutex = CreateMutex(NULL, FALSE, NULL);
	}

	~Mutex()
	{
		//クローズ
		CloseHandle(g_hMutex);
	}

	//ロック
	void Lock()
	{
		WaitForSingleObject(g_hMutex, INFINITE);
	}
	//アンロック
	void Unlock()
	{
		ReleaseMutex(g_hMutex);
	}
};

class MutexLockGuard
{
private:
	Mutex * g_Mutex;

public:
	MutexLockGuard(Mutex * mutex)
	{
		g_Mutex = mutex;
		g_Mutex->Lock();//ロック
	}

	~MutexLockGuard()
	{
		g_Mutex->Unlock();//アンロック
	}
};
```

#使い方

①Mutexクラスのインスタンス作成
②ロックしたいブロックでMutexLockGuardのコンストラクタに①のインスタンスのアドレス与えてインスタンスを生成する。


```cpp:MutexTest.h
#pragma once
#include "Mutex.h"

class MutexTest
{
public:
	MutexTest();
	~MutexTest();
public:
	//Mutexクラスのインスタンス
	Mutex MyMutex;
	//テスト用数
	void TestRun()
	{
		//ロック取得
		{
			MutexLockGuard lock(&MyMutex);//ブロックを抜けると勝手にアンロック

			//なんか排他的に実行したい処理
			//・・・

		}

	};
};


```