OmniAICreator/Qiita-1.07M huggingface dataset:
C#で引数の宣言に配列をあんまり使わないほうがいいワケ

# C#で引数の宣言に配列をあんまり使わないほうがいいワケ #

賛否あるかもしれませんが、
特別な理由がない場合配列やList&lt;T&gt;をメソッドの引数にとってはいけません。

じゃあ何をとるのかといえばIEnumerable&lt;T&gt;が大体の場合の正解です。

以下でその理由を書いていきます。

今回はこの2つのメソッドを見ていきましょう。

```csharp:配列版
    public void Write(string[] array){
        foreach( var s in array )
        {
            Console.WriteLine(s);
        }
    }
```

```csharp:IEnumerable版
    public void Write(IEnumerable<string> enumerable){
        foreach( var s in enumerable )
        {
            Console.WriteLine(s);
        }
    }
```

※型がstringなのは説明用です。

# 受けられる型の広さの問題 #

配列版とIEnumerable版を見比べてみます。

配列版とIEnumerable版どちらもstringの配列を引数にして呼び出すことはできます。
でも、配列版ではList&lt;string&gt;を引数にして呼び出すことが**できません**。

つまり、IEnumerable版のほうが受けられる型が多いわけです。

更にLINQとの連携を考えましょう。
LINQは基本的にはIEnumerable&lt;T&gt;を戻り値にします。
つまり配列版はもちろんそのままでは呼び出すことが**できません**。
どうしてもやりたいならばToArray()で配列化する必要があります。

```csharp:LINQを考える
    string[] array = new []{"foo","bar","baz"};
    Write(array);//これは配列版IEnumerable版どちらでもOK
    
    //こうしただけで配列版はもう使えない
    
    Write(array.Take(2));
    //Write(array.Take(2).ToArray());こうするしかない
```

ここまでで、すでに配列特有の機能例えばランダムアクセスが必要であるとか、そういう理由がなければIEnumerableで引数を宣言したほうが良いことがわかります。

より一般化すると、同じ機能でもできるだけ使える範囲を広げておいたほうが便利なわけです。

# 副作用があると思われるかもしれない #

配列というのはもちろんランダムアクセスも可能ですし、もちろん値を入れ替えることができます。
IEnumerable<T>は基本的に（つまりキャストしたりしなければ）値を入れ替えることができません。





ということは、配列版では（もしたとえそうでなくても）使う側としてはもしかしたら配列の*中身を書き換えられてしまうかもしれない*と思うわけですね。

```csharp:中身が書き換えられてしまうかも…
    string[] array = new []{"foo","bar","baz"};
    Write(array); //arrayの中身が書き換えられてしまうかもしれない
```

ということは書き換えられたくないような配列を安全に使うには毎回ToArrayをしてコピーする必要が出てきますね。

```csharp:安全に使うには
    string[] array = new []{"foo","bar","baz"};
    Write(array.ToArray()); //こうして書き換えられるのを防止する
```

より一般化すると、より抽象度の高い型で宣言しておいたほうが、メソッド内でできることが少なくなるので使う側としては安心になるわけです。

# 結論 #

基本的には、引数はできるだけ抽象度の高い型を指定しておく方がよいと思います。

ランダムアクセスやらなんやら他の機能が必要になったとかそうなって初めて引数に配列を入れることを検討しましょう。

コメントでそれぞれの型について色々書いてくださってます。

因みに、List<T>は次のinterfaceを実装しています。この中から必要最低限のinterfaceで宣言できるといいと思います。
（個人的にはやっぱりIEnumerable<T>推しです。）

投稿してから3年経って、IReadOnlyCollectionをたまによく使うようになりました。
でもforeachだけならやっぱりIEnumerable<T>が基本だと思います。

```
System.Collections.Generic.ICollection<T>, System.Collections.Generic.IEnumerable<T>, 
System.Collections.Generic.IList<T>, System.Collections.Generic.IReadOnlyCollection<T>, System.Collections.Generic.IReadOnlyList<T>, 
System.Collections.IList
```
Github-flowで開発する時の流れ(Gitlab)

普段はGitlabを使うのでGitlabで
Gitlabからクローンしてブランチを切ってプッシュしてマージリクエストを出すまでの流れ(Github-flow)

参考：https://b.pyar.bz/20140122/github-flow/

# メリット
* masterが汚れない（デプロイ出来る状態に保てる）
* 変更部分のレビューを受けやすい
* 変更部分のテストがしやすい
* どのタスクをしているか、どう変更したかのメモをつけやすい
* タスク毎にレビュー、マージが出来る

# 開発手順

## リモートリポジトリをローカルにクローン

リモートリポジトリ（Gitlab）の内容をローカル（自分の環境）にクローン（複製）する

```
$ git clone リポジトリ.git
Cloning into 'リポジトリ'...
remote: Counting objects: 3, done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (3/3), done.
```

作業リポジトリに移動

```
cd リポジトリ
```

## ブランチを切る

ブランチとは枝という意味
**作業の履歴の流れを分岐して記録していくためのもの**

```git branch ブランチ名```して```git checkout ブランチ名```する
<br><br>



```git branch```で今存在するブランチの一覧を表示する
*は今このブランチで作業中という意味
クローン時にはmasterブランチしかない

```
$ git branch
* master
```

このまま作業すると、リリース用のmasterリポジトリに途中の作業内容を反映させてしまうので、自分の**作業用のブランチを作成する**（ブランチを切るという）
ブランチにはわかりやすい名前をつける
チケットが発行されているなら頭にチケット番号をつけておくとわかりやすい

```git branch ブランチ名```でブランチを作成する
add-new-fileというタスクを行うとする

```
$ git branch add-new-file
$ git branch
  add-new-file
* master
```

```git checkout```で作業するブランチを移動する

```
$ git checkout add-new-file
Switched to branch 'add-new-file'
$ git branch
* add-new-file
  master
```

このブランチに移動することで、変更がこのブランチに反映されることになるので**masterリポジトリが汚れない**

## 切ったブランチで作業する
編集して```git add```して```git commit```して```git push```する
<br><br>

```
git add [ファイル名] 　　　　　　　        //追加
git commit -a -m "任意のコメント"  　     //コミット
git push origin ブランチ名               //リモートリポジトリを更新
```
```git push origin master```としないように注意

## マージリクエストを出す
以下のような場合には**gitlab上で**マージリクエストを出す

* レビューしてほしい
* よく分からない部分があるのでコードを見て欲しい
* 完成したのでマージしてほしい

## 待つ
slackとかで連絡して返答を待ちましょう
レビューされたり突っ返されたりmasterへのマージを許可されたりします

## タスクが完了したらブランチを削除

お疲れ様でした
```git checkout```でmasterに戻って、```git branch -D``` でタスクを行っていたブランチを削除

```
$ git checkout master
$ git branch -D add-new-file
```
Perl6のAcmeモジュールをサクッと作った話

## きっかけ

ヘイシャで開発合宿なるものがあり、そういやPerl6の学習が足りないなと思ったので。
せっかくなのでPerl6 Advent Calendarの14日目にこっそり紛れ込んでみます。

## 作ったもの

https://github.com/debility/p6-Acme-Inkling

イカ演算子で代入すると、代入された値が墨塗りになります。
あとイカ語しか喋れなくなります。

## 軽く掘り下げ

### Perl6は独自演算子の定義やオーバーライドが簡単にできる

```
multi sub postfix:<!>(Int $n) {
  [*] 1..$n;
}

say 8!;　# 8! = 40320
say 3!!; # 3!! = 6! = 720
```
てなことが割と簡単にできる。
後置演算子の場合はpostfix。

### 演算子にマルチバイトが使える

```
sub infix:<たす>($a, $b) {
  $a + $b
}

say 8 たす 3; # 11
```
なんてこともできる。
中置演算子の場合はinfix。

### 絵文字も使える

絵文字を使った演算子は、coreにも存在する。

<blockquote class="twitter-tweet" data-lang="en"><p lang="ja" dir="ltr">Perl 6、ネイティブ整数型に対するアトミックな演算子が追加されて ++⚛$var (aka atomic-inc-fetch($var)) とか書けるようになったらしい、絵文字だ <a href="https://t.co/MaS5jNlJR6">https://t.co/MaS5jNlJR6</a></p>&mdash; ともくんのママ (@uasi) <a href="https://twitter.com/uasi/status/899771362906062848?ref_src=twsrc%5Etfw">August 21, 2017</a></blockquote>

そういやイカのemojiあったよねってことで、これも追加。

### 「<=:=」固有の問題と解法

※ そもそもasciiのみでイカを表すAAが分からないので、こんなのにしたんですが。
そのまま定義しようとすると``infix:<<=:=>``で、これは当然ながらsyntax errorに。
どうすんのかなーと公式のドキュメント見てたら
[https://docs.perl6.org/language/operators#infix_<](https://docs.perl6.org/language/operators#infix_<)

```
multi sub infix:«<»(Int:D, Int:D)
multi sub infix:«<»(Num:D, Num:D)
multi sub infix:«<»(Real:D, Real:D)
```
といった感じで、``«»``で代用できるってことで解決。

### せっかくなのでイカ語を喋らせる、というかイカ語しか喋らせたくない

てことでsayとdieをさっくりとオーバーライドしておきました。
sayで喋ってるのは所謂マンメンミです。
マンメンミ参考: http://matiassoonas.com/?p=827

## まとめ

というのを一通り作って満足した後、[公式Advent CalendarのDay1](https://perl6advent.wordpress.com/2017/12/01/)の一部とわりかしネタ被りしていることに気づいたんですが、キニシナイことにします。
cssで90度以上の矢印を作る

画像のスライドボタンなどでよくある、縦に広がっている矢印をcssだけで作ります。
![arrow.png](https://qiita-image-store.s3.amazonaws.com/0/171960/5eb8cb94-b5b2-7e2c-5d19-5d9a1ab798af.png)


```html
<p class="big-arrow-right"></p>
```

```css
.big-arrow-right{
  position: relative;
}
.big-arrow-right::before {
    content:' ';
    width: 50px;
    height: 50px;
    border-right: solid 4px #ccc;
    transform: rotate(35deg);
    position: absolute;
    top: calc(50% - 19px);
    right: 10px;
}

 .big-arrow-right::after {
   content:' ';
   width: 50px;
   height: 50px;
   border-right: solid 4px #ccc;
   transform: rotate(-35deg);
   position: absolute;
   top: calc(50% - 32px);
   right: 10px;
 }
```
before、afterを二つ使って、上の矢印と下の矢印をくっつけています。
`top: calc(50% - 19px);`と`top: calc(50% - 32px);`なので、微妙にセンターになっていないかもしれません。
nyc + ts-node + mochaでtsファイルをテストしてカバレッジを出す

node.js環境下で、いちいち`tsc`するのでなく`*.ts`ファイルをそのままテストしたい。
ということで環境を作った。

## 目指す環境

+ `mocha` + `chai`でテスト
+ `nyc`でカバレッジも出す
+ いちいち`tsc`しない

当初は`nyc`でなく`istanbul`と`remap-istanbul`を使っていたが、こちらのほうがよさげだったのを変更

## インストール

`npm i --save-dev nyc ts-node mocha chai @types/mocha @types/chai`

## 設定

`package.json`に以下のような感じで`nyc`の設定を記述する。
引数に列挙していってもいいけど流石に多かったので。

```json
  "nyc": {
    "include": [
      "app/*.ts",
      "app/**/*.ts"
    ],
    "extension": [
      ".ts"
    ],
    "require": [
      "ts-node/register"
    ],
    "reporter": [
      "json",
      "html",
      "text"
    ],
    "sourceMap":true,
    "all": true
  }
```

## スクリプトを記述

`package.json`に記述する。

```json
    "test": "mocha --recursive --require ts-node/register \"test/**/*.ts\"",
    "cover": "nyc npm t"
```

### 走らせてみた

![text.PNG](https://qiita-image-store.s3.amazonaws.com/0/135915/333a6321-6e3f-03cf-522c-f32352b5b205.png)

`npm run cover`でこんな具合にカバレッジが表示される。

![coverage.PNG](https://qiita-image-store.s3.amazonaws.com/0/135915/55a6f0f8-9460-933c-29ac-7078cf5ca6bd.png)

こんな具合にhtmlも出力された。
Gitlabのリポジトリ名の変更方法

リポジトリ名を変更したいときのメモ。

<h1>GitLab側の操作</h1>
リポジトリ > Setting > Change usernameで変更
・リポジトリ名が変わってしまうので注意。

<h1>ローカル側の操作</h1>
```
git remote rename <old_name> <new_name>
```

変更されているか確認

```
git remote -v
```

変更されていたらOKです。
俺でもできるMicrosoft BizSparkサブスクリプション有効化

俺です。

BizSpark登録できたのでAzureをはじめます。
BizSparkのアカウントでMicrosoft Azureサブスクリプションを有効化します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/42755/3f267e74-af1c-39e7-0e8f-c2a1cc25be0a.png)

いい感じ

![image.png](https://qiita-image-store.s3.amazonaws.com/0/42755/b7952e6b-c17d-dd71-ceae-68faccb00697.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/42755/b31aba9c-ece1-20a1-7495-2d327b347a98.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/42755/16dbaa8b-8e4f-a2fd-cda0-096b320c4fd8.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/42755/781b485c-2bfb-e1e2-b9c1-a25ebd85f4c3.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/42755/944ef756-2b1a-fe42-a8c6-b3f3ae2afcf7.png)

これでAzureのリソースに触れる事ができるようになりました。やったね
GCP Cloud IoT CoreにGolangでMQTT接続する

## 概要

ちょっとした検証で、GCP Cloud IoT CoreにGolangでMQTT接続したかったんですが思いの外苦労したので、記録に残します。
ネットワーク関係はつながるまでが大変でつながる設定ができてしまうと簡単なのを再確認しました。

今回の検証から作ったコードは会社のリポジトリに置いてます: https://github.com/fusic/gcp-iot-core-golang-sample
パラメーターとかをうまいこといじると簡単に流用できるはずです。

## 基本情報
事前に会社の先輩（@Kta-M）がわかりやすく情報をまとめてくださってたのでそれをまず引用させてもらいます:

```
### IoT Core概要
https://cloud.google.com/iot/docs/

Cloud Pub/Subとデバイスとの仲介をするためのサービス、というイメージ。

Pub/Subはメッセージングサービス。AWSでいうとKinesisが対応付けられるらしい。
https://dev.classmethod.jp/cloud/aws/aws-gcp-fit-and-gap-2016-07/

Topicを作成してそこにメッセージを送り、そのTopicをSubscribeすることでデータを得られる。

IoT Coreは、デバイス管理機構とデータ送信用のエンドポイントを提供して、
デバイスからのデータをPub/Subの指定されたTopicに流す。

MQTTS接続パラメータ
- host: mqtt.googleapis.com
- port: 8883
- clientID: "projects/[プロジェクトID]/locations/[リージョン]/registries/[レジストリID]/devices/[デバイスID]"
- username: "unused"
- password: jwtを使って生成
  - iat: 現在時刻のUnixTime,
  - exp: 現在時刻+60分のUnixTime : 有効期限。期限を過ぎると接続が解除されるので、都度接続確認を行なう。
  - aud: projectID
  - Signin Method: SigningMethodRS256
  - SigningKey: 添付のpem

https://github.com/GoogleCloudPlatform/nodejs-docs-samples/blob/master/iot/mqtt_example/cloudiot_mqtt_example_nodejs.js

#### JWT(Json Web Token)
- https://jwt.io/
- https://github.com/dgrijalva/jwt-go
- https://godoc.org/github.com/dgrijalva/jwt-go#NewWithClaims
- https://kamichidu.github.io/post/2017/01/24-about-json-web-token/
- https://qiita.com/kaiinui/items/21ec7cc8a1130a1a103a
```

※ `exp` ですが、公式のドキュメントなどを見ると `20分` という数字のほうが使われるので実際はこちらの数字の方がいいのかもしれません。

## 実装の苦労とか

[公式のトラブルシューティング](https://cloud.google.com/iot/docs/troubleshooting)にもかいてあるんですが、[MQTT 3.1.1を指定](https://github.com/fusic/gcp-iot-core-golang-sample/blob/bcce954b1d54fc24c81ad658d9a9f091fddd621e/main.go#L71)しないといけません:

> If the device disconnects immediately after connecting, verify that your MQTT client library is using MQTT 3.1.1. Many libraries default to MQTT 3.1, which is not supported by Cloud IoT Core and will cause the device to be disconnected immediately. The version is typically set in the MQTT library's client options when first connecting.
> （抄訳: デバイスで接続がすぐに切断される場合はMQTTのクライアントライブラリがMQTT 3.1.1を使っているのを確認しましょう。 多くのライブラリの初期設定は3.1ですが、Cloud IoT Coreでサポートされないためすぐに切断されます。プロトコルのバージョンは最初に接続する時に設定される場合が多いです。）

ドキュメントに書いてある通り、[paho系のライブラリ](https://godoc.org/github.com/eclipse/paho.mqtt.golang#ClientOptions.SetProtocolVersion)も、接続クライアントを生成する前に指定します。
プロトコルのバージョンを確認するのは大事ですね。

一日くらいずっと↑の問題で悩んでいたんですが、それの検証でnode.jsのサンプルを動かしたりとなかなか大変でした。
~~それから、pem形式になっている秘密鍵を読み込むのもけっこうめんどうでした。~~
pem形式の読み込みは[jwt-goで提供している関数](https://godoc.org/github.com/dgrijalva/jwt-go#ParseECPrivateKeyFromPEM)を使うと簡単にできました。

あんまり今回とは関係ないんですが、MQTT接続時のタイムアウトは5秒くらいもたないとつらいという知見も得ました。
何も考えずに1秒以下に設定したところテストで落ちるという醜態を晒してしまったので。

GolangのJSON Web Tokenに関しては[いい記事](http://otiai10.hatenablog.com/entry/2016/10/03/044300)があったので簡単にできてとても助かりました。
Speech APIのC#サンプルアプリを動かしてみた

本記事は [CogBot Advent Calendar 2017](https://qiita.com/advent-calendar/2017/cogbot) 15日目の記事です。

MicrosoftのcognitiveサービスのひとつであるSpeech API(Speech Recognition APIの表記もある）を触ってみたので手順を共有します。

Speech APIは音声からテキスト、テキストから音声への変換をAPIが提供してくれます。
[公式サイト](https://azure.microsoft.com/ja-jp/services/cognitive-services/speech/)でも試すことができます。ちなみに音声認識は英語デモのみ、ノンネイティブの私の発音はあまり認識してれませんでした、特にRとLの発音が…

ライブラリも提供されており、Microsoftが公開しているC#のサンプルアプリがあるので、ソースからアプリケーションをビルドして音声認識させてみます。

以下の手順に基づきやってみました（英語のみ）
https://docs.microsoft.com/ja-jp/azure/cognitive-services/speech/getstarted/getstartedcsharpdesktop

# 事前の準備
- Azureのアカウントを作成しておきます。
- Visual Studio Communityエディションをインストールしておきます。

# API Keyの取得
まずAPI Keyを取得します。
https://azure.microsoft.com/ja-jp/try/cognitive-services/ にアクセスします。Speech API以外にも各種cognitive系APIのKeyをここで取得できます。

今回は音声カテゴリからBing Speech APIのAPI Keyを取得します。

![1215cog_04.png](https://qiita-image-store.s3.amazonaws.com/0/69163/52806b3c-5ac5-db2b-841a-69b0007fd14e.png)

表示されたAPI Keyをメモしておきます。Keyは２つありますがどちらでもAPIを利用可能です。

![1215cog_05.png](https://qiita-image-store.s3.amazonaws.com/0/69163/71d83071-fe9e-1ad1-4c5a-54bbd38a2a00.png)

# レポジトリのダウンロード
GitHubから以下のレポジトリをローカルにcloneするか、ダウンロードして適当な場所に解凍しておきます。
https://github.com/microsoft/cognitive-speech-stt-windows

# ビルド
SpeechToText-WPF-Samples.sln を選択してVisual Studioを起動させます。

![1215cog_001.png](https://qiita-image-store.s3.amazonaws.com/0/69163/40467225-4095-39d2-c4f5-bc761623a21b.png)

x86(32ビット)、x64(64ビット)のパッケージがあるので、環境にあった方を選択します。
デフォルトだと英語の音声認識に設定されているので、日本語に変えてみます。
MainWindowXaml.csの229行目のロケール設定を ```ja-JP``` に変更します。

![1215cog_01.png](https://qiita-image-store.s3.amazonaws.com/0/69163/c9c16002-3bd6-72b3-6211-2b22d8b98067.png)

変更したらBuildして実行してみます。

# 音声認識

Buildがうまくできれば、ウィンドウが立ち上がります。
右上のインプットボックスに先ほど取得したAPI Keyをコピーして、[Use Microphone with ShortPhrase mode] を選択、[Start Recognition]をクリックします。

![1215cog_02.png](https://qiita-image-store.s3.amazonaws.com/0/69163/53e600c5-0e37-d747-b598-7d2e05608f22.png)

右側のテキストエリアに「Please start speaking」と表示されれば音声入力待ちの状態になっています。マイクに向かって、何かしゃべってみると、音声がテキストに変換されます。
![1215cog_03.png](https://qiita-image-store.s3.amazonaws.com/0/69163/6c4af1a0-387c-3cf9-9a57-61fbe06f6df2.png)


ちゃんと話した通りに認識されてます。すごい！

# まとめ

11月にマイクロソフトが開催したTech Summit 2017ではセッション発表で、日本語で話した内容を逐次英語に翻訳して正面スクリーンに映し出す、ということをやっていました。Speech APIなどを使って実装している思われます。一昔前では専門的な技術者がそれなりのお金をかけないとできなかったことが、若干のノウハウは必要ですが、公開されているAPIを利用すれば、誰でも作れる世の中になってきています。

Speech APIは今回のようなリアルタイムな認識だけでなく、音声ファイルからのバッチ的な認識もできるので、今後試してみたいと思います。会議の議事録を自動で文字起こししてくれるとか夢のような世界がすぐそこに来ています。
プログラムが動きません、プログラムが止まりません・・・

# はじめに
（※ こちらの記事は、プログラムを学び始めたばかりの方を対象としています。）
プログラムを始めたばかりの未経験プログラマや新人プログラマは、
『バグが発生したらどうしよう？』『これで動かなくなったら・・・』など不安がいっぱいかもしれませんが、
まずは、プログラムを動かさないと始まらないので、とりあえず動かしてみましょう:thumbsup_tone2:

# ITスクール講師をやっていると・・・
『すみません・・・なんか、動かないんですけど・・・:frowning2::frowning2:』
『変な文字がいっぱい出てきてしまいました・・・:sob:』
『プログラムが止まりませんー:scream:』

:computer:スクール講師:computer:をやっているので、このような質問には、もちろん丁寧にお答えしますが、
それは、 **初めのうち** だけね:sweat_smile:
最終的には、自身で解決しなくてはいけないので:walking_tone1:

# まずは落ち着こう
プログラムが動いていないときでも、止まらないときでも、まずは落ち着きましょう。
必ず原因があるんです:bangbang:

## プログラムが止まらなかったとき
(※今回は Eclipse を使用している前提で記述します)
まずは止めましょう:sweat_smile:
for文の練習問題などで、無限ループなどにハマった時に、良くあります。

![stop3.png](https://qiita-image-store.s3.amazonaws.com/0/196312/134c1c21-e521-850f-11d1-99bafc67c44c.png)

無限ループの原因となったコードがこちら

```java
	Calendar cal = Calendar.getInstance();
	int year = cal.get(Calendar.YEAR);

	List<Integer> yearList = new ArrayList<Integer>();

	// 現在の年から10年後までをリストに格納
	for(int i = year ; i <= year + 10; year++){

		yearList.add(i);

	}
```
「**デバッグモード**」を利用すれば、すぐ気が付けますが、まだ**デバッグ**方法を知らなかった場合、
(すぐにデバッグモードは調べてくださいね:expressionless:)
`yearList.add(i);`を`System.out.println(i);`として出力させてみると気が付くはずです。
(すぐに止めてくださいね:expressionless::expressionless:)
今回は、繰り返し条件の中の`year++`が原因でした。`year`が増えていったら、止まるわけないですよね。

## プログラムが動かなかったとき
まずは「**コンソールを見ましょう**」:eyes::eyes:
エラー内容や該当箇所が出力されているはずです。
以下、バグを仕込んだプログラムを動作させてコンソールに表示された内容です。

```java
java.lang.NullPointerException  // ★エラー内容
    at instructor.BugCode.main(BugCode.java:17)　// ☆エラー発生箇所
```
```java
java.lang.ArithmeticException: / by zero　// ★エラー内容
    at instructor.BugCode.main(BugCode.java:38)　// ☆エラー発生箇所
```
複数行でも慌てずに、「・・・Exception」の箇所と、自分が作成したクラス名を探してみましょう:exclamation:

```java
java.lang.IndexOutOfBoundsException: Index: 3, Size: 2　// ★エラー内容
    at java.util.ArrayList.RangeCheck(ArrayList.java:547)
    at java.util.ArrayList.get(ArrayList.java:322)
    at instructor.BugCode.main(BugCode.java:52)　// ☆エラー発生箇所
```
★エラー内容と☆エラー発生箇所を確認できれば、ある程度見当が付くはずです。
Exception については、面倒くさがらずに、ちゃんと調べましょ:rage:


## おわりに
はじめに書きましたが、プログラムは動かさないと始まらないです。
バグを怖がっていたら成長できません:arrow_lower_right:(無謀なコードは止めてくださいね:rolling_eyes:)
バグの無いプログラムは無いので、どんどんプログラムを動かし、バグ特定に慣れ、
常にバグ改修と戦っていきましょ～:fist:
electron で firebase auth を使う

## 概要

electron で firebase auth を使う場合、 Twitter や Facebook、 Github などの認証で `signInWithPopup` や　`signInWithRedirect` といった便利なメソッドで認証を行うことができません。

email/password 認証は使えますが最近は Twitter などでログインするのが普通なのでできればそういった方法でログインを行いたいという気持ちがあります。

そういった願いを叶えるために electron & firebase auth の構成で Twitter などの認証を行うためには自前でログインフローを処理した後に取得した token を使って credential を作成し、 firebase auth の `signInWithCredential` に渡してあげる必要があります。

> 参考: https://firebase.google.com/docs/auth/web/github-auth#handle_the_sign-in_flow_manually

ここで問題なのは自前でログインフローを処理する部分が結構面倒ということです。

考慮しなければいけないこととして

- OAuth1, OAuth2 の違い
  - 例えば Twitter は　OAuth1、 Github は OAuth2 を使用しています
- OAuth2 の Grant Type による処理の手順の違い
  - OAuth2 には Grant Type と呼ばれる token の受け取る方法が4種類あり、それぞれ微妙にフローが違います。 厄介ですね...

また electron では nodejs の net module ではなく, electron の net module を使うことが推奨されているのでできればそちらを使いたいという思惑もあります。

> 参考: https://github.com/electron/electron/blob/master/docs/api/net.md

そこでそれらの問題を解決するために electron 用の OAuth1/OAuth2 のヘルパライブラリを作りました。

Electron OAuth Helper

https://github.com/mironal/electron-oauth-helper

これはOAuth1とOAuth2の全ての Grant Type をサポートしています。 Refresh Token に関しては後日対応予定です(投稿した日現在)。

OAuth に必要なパラメータとOAuth に使用する window を渡してあげることで認証フローが開始され、認証が行われると token が取得できます。

細かいことは考えなくていいので簡単に使えます。

firebase を使わない場合でも使えるので OAuth が必要になったときは車輪の再発明をしないためにも是非使ってみてください。

まだハードに使い込んでいないので使い難いところやバグがあるかもしれないのでもし見つけたら issue にしてください。 爆速で直します。

## まとめ

- electron と firebase auth で発生する問題点を説明しました
- それらを解決する方法として Electron OAuth Helper を紹介しました
Gitリポジトリのコードを別のGitリポジトリにPushする

# 
自分のGitリポジトリで管理しているコードを、別のGitにPushする方法です(Functionsコードのリリースなど）。

```bash
git clone <My Git clone URL>
cd ./<クローンされたディレクトリのパス>
git remote add another-git <Another Git clone URL>
git push another-git master:master
```

* `<My Git clone URL>` : 自分のGitリポジトリのURL.
* `<Another Git clone URL>` : 別のGitリポジトリのURL.


# 参考
[Azure IoT Hub から取得したリアルタイム センサー データの視覚化 – Web Apps \| Microsoft Docs](https://docs.microsoft.com/ja-jp/azure/iot-hub/iot-hub-live-data-visualization-in-web-apps)
【PHP】ImageMagickによる画像処理_スターウォーズOP風画像を作る

# はじめに
(この記事は[オールアバウトアドベントカレンダー15日目](https://qiita.com/advent-calendar/2017/allabout)記事です)
本日は映画「スターウォーズEP8 / 最後のジェダイ」の公開日になります。めでたい！！！！👏👏👏

楽しみですね。興奮しますね！！！
時事ネタに絡めて、今回はPHPとImageMagickを用いてスターウォーズOP風画像を作成しました。

# 環境
+ 【言語】PHP
+ 【ライブラリ】ImageMagick
+ 【フォント】源暎ゴシック H-KL：[リンク](https://okoneya.jp/font/download.html)

# やったこと
+ 画像の生成
+ 文字の合成
+ 画像の変形(台形)

# コード
```php
<?php

$image = new Imagick();
// 画像生成
$image->newImage(480, 270, new ImagickPixel('rgba(8%, 8%, 8%, 1.0)'));
// 拡張子設定
$image->setImageFormat('png');

$draw = new ImagickDraw();
// 文字列(改行コード：\n)
$string = "スターウォーズEP8公開記念 \nIt is a period of civil war. \nRebel spaceships, striking \nfrom a hidden base, have \nwon their first victory";
// フォントの指定
$draw->setFont('../fonts/GenEiGothicKL-1.3/GenEiGothicP-H-KL.otf');
// 文字色を設定
$draw->setFillColor(new ImagickPixel('rgba(255, 198, 60, 1.0)'));
// 文字サイズの指定
$draw->setFontSize(20);
// 描画
$draw->annotation(110, 148, $string);
// 文字列を合成
$image->drawImage($draw);

// 画像サイズ取得
$iw = $image->getImageWidth();
$ih = $image->getImageHeight();
// 傾き係数
$angle_num = 160;

// 歪め用の制御点
$points = array(
    10, 10,
    10 + $angle_num, 10,

    10, $ih - 20,
    10 - $angle_num, $ih - 20,

    $iw - 10, 10,
    $iw - 10 - $angle_num, 10,

    $iw - 10, $ih - 20,
    $iw - 10 + $angle_num, $ih - 20
    );
// 画像を変形
$image->distortImage(Imagick::DISTORTION_PERSPECTIVE, $points, false);

// 画像の出力
header('Content-type: image/png');
echo $image;

?>
```

# 出力結果
![sw_op.png](https://qiita-image-store.s3.amazonaws.com/0/120970/1bd5f37f-2171-c616-87a5-2496079c8e12.png)


# 今後の改修点
現状のプログラムでは、文字位置が固定です(画像の変形に重きをおいたため)。

今後の改修点としては、フォームから文字を自由に入力できる想定で
サーバー側で文字位置、サイズを自動で調整させた方がより楽しくなるでしょう。
Nuxt.jsで大きめのウェブサイトをつくれるか

この記事は「さくらインターネット Advent Calendar 2017」の15日目の記事です。

前日のykmr31さんの記事に紹介のあった 「第4部 NUXT.jsでウェブサイトを作れるのか？（未完）」 の内容を改めてまとめたものになります。

~~後日談になると良かったんですけど、コンポーネントのまとめ方だとか、いろいろ試してみていることが今日までに終わらなかったのでまた今度…~~

## NUXT.js

https://ja.nuxtjs.org/guide

NUXT.js 全体の説明は公式が充実しているのでそちらを読みましょう。勉強会中でも散々登壇者が口を揃えて言ってたんですが、 Vue 周辺はドキュメントの充実っぷりがいいですね！

## NUXT.js 3つのモード

NUXT.js は Vueを使ったウェブアプリを簡単に作るためのフレームワークで、最終的な公開方法が大きく３つ用意されてます。

 - SSR (Server Side Rendering)
 - SPA (Single Page Application)
 - Static Site Generation (静的生成)

これら3つのモードは1ソースで `nuxt` コマンドの実行方法だけで簡単に切り替えられます。

しかも SSR, SPA の2つについては、 nuxt 自身がウェブサーバにもなるのでとってもお手軽です。

## 注目しているのは 静的生成

ウェブアプリをつくろう！という文脈だと注目が行くのはSSRなのかなと思いますが、実は個人的に注目しているのは、静的生成だったりします。

### ウェブサイト制作で抱える課題

制作環境の抜本的な整備をすすめているのですが、WordPressなどのCMSで全体を構築するのもピンとこず、 Hugo などの静的サイトジェネレータだと規模に合わなかったり、学習コストで躊躇したり…ということが続いていました。

### 考えを整理してみると

 - とはいえ、なんらかのテンプレートなどで構造の整理とか効率化を促進したい
 - コメントを受け付けたり、なんらかのデータを元にしているような動的なページは限られているので、基本は静的でいい
 - 全体で覚えることはなるべく少なくしたい
 - 最近 Vue.js が社内に流行ってきてる
   - ウェブサイト上でも実績がある
   - 個人的にも気に入っている

### …もしかして Nuxt.js？

 - JS書ける人は特に問題ない上、モダンなJSが書けて嬉しい
 - JSよくわからない人もひとまず `<template></template>` にHTML埋めればいける。
 - そのページのスタイルはもう `.vue` にまとめるルールにしちゃうと実はスタイル管理楽になる気がする
 - コンポーネント化も促進できる
 - 静的生成できる

と、こういう理由で Nuxt.js の静的生成に期待を寄せていたりします。

### ただし

踏ん切りがつかない理由というのもいくつかあります。

 - `<head>` の内容は直接 html で書くことが出来ず、 [vue-meta](https://github.com/declandewet/vue-meta) を使う必要があって、若干ハードル
 - htmlにコンポーネントを追加する時に、 `<hoge-ui></hoge-ui>` と書くのに加えて、 `import hoge-ui from 'hoge-ui'` って書いたり、`components:{}` に追加しないといけなかったりちょっと、めんどい

そしてなにより

 - この Nuxt.js というフレームワークに乗っかってしまっていいのか

ウェブサイトは規模が大きいと比較的耐用年数が必要になるので、あまり流行りに左右されないもの、長く続くだろうものを選びたい、という思いがどこかにはあります。

## それでも、もしかしたら

考えてしまうポイントはありつつも、 Vue.js / Nuxt.js を採用することのメリットが大きいことも間違いないと思っていますし、仮に Vue.js / Nuxt.js に何かが有ったとしても コンポーネント的に諸々を整理することは、今後の為になるだろうとも思うので引き続き可能性を探っていきます。

つづく。
privateメソッドとインデントのスタイル


## はじめに

この記事は書籍「[プロを目指す人のためのRuby入門](http://gihyo.jp/book/2017/978-4-7741-9397-7)」に掲載できなかったトピックを著者自らが紹介するアドベントカレンダーの15日目です。
本文に出てくる章番号や項番号は書籍の中で使われている番号です。

今回はprivateメソッドとインデントのスタイルをいくつか紹介していきます。

### 必要な前提知識

「プロを目指す人のためのRuby入門」の第7章まで読み終わっていること。

## privateメソッドとインデントのスタイル

privateキーワードとインデントのさせ方（コーディングスタイル）についてはいくつかの流派があります。1つは本書のようにprivateキーワードもメソッドの定義も同じインデントの深さで定義するスタイルです。

```ruby
class User
  private

  def foo
  end
end
```

2つ目はprivateキーワード以下のメソッド定義でインデントを1段深くするスタイルです。Ruby on Railsで自動生成されるコードはこのスタイルです。

```ruby
class User
  private

    def foo
    end
end
```

3つ目はprivateキーワードのインデントを1段浅くするスタイルです。

```ruby
class User
private

  def foo
  end
end
```

Rubyには公式のコーディングルールがないので、どれが正解とは言えません。「メソッド名はスネークケースで書く」のようなルールはかなり一般的ですが、privateメソッドとインデントのスタイルについては人によって好みがわかれやすいところです。また、好みだけでなく、巨大なクラスになると自分が今見ているメソッドがpublicかprivateか判断しづらいので、2つ目のスタイルのようにインデントの深さで判断したい、という目的も出てくるかと思います。不毛な議論を避けるため、みなさんもチームで開発する際はチーム内で予めコーディングスタイルを決めておいた方がよいでしょう。

ちなみに「プロを目指す人のためのRuby入門」では最初に示した「privateキーワードもメソッドの定義も同じインデントの深さで定義するスタイル」を使っています。

## 次回予告

次回はメソッド定義と同時に公開レベルを設定する方法を紹介します。
カギ閉め忘れ問題 > 対処案 v0.1

### 問題

カギを閉め忘れるということをときどき耳にする。
自分も注意は払っているが、その時に割込みが入ると、割込み対処後に忘れてしまう可能性がある。

### 対処案 v0.1

1. 「カギを閉め忘れています」という音声注意を出す
    - ドアを閉めてから数秒後など
    - [ ] カギを閉めたかどうかの確認をどうするか
2. 「カギを閉めてください」という音声を出す
    - ドアが閉じられた時
        - 加速度センサ
        - 変位センサ
        - リードスイッチ: [link](http://akizukidenshi.com/catalog/c/creedsw/)
        - AMRセンサ: [link](https://www.murata.com/ja-jp/products/sensor/amr)
            - AMR(Anisotropic-Magneto-Resistive: 異方性磁気抵抗): [動作原理](http://www.hkd.co.jp/amr_tec_amr/)
    - [ ] 夜間はどうするか?
        - サイレントモード (振動やビープ音数回)
        - 別端末にコマンドを送る
            - ESP8266
            - 別端末が振動する
        - バイブレータ (振動モーター)
            - [秋月電子](http://akizukidenshi.com/catalog/c/cvimtr/)
    - [ ] 電池の持ちの問題
        - [ESP8266 > Link > 単3電池で340日相当の動作](https://qiita.com/7of9/items/a63aab3e78f37cda8029)
        - [ESP8266 / Slack / Amazon Dash Button > バッテリー試験 > code(v0.2):14時間だけ動作した / code(v0.3):10時間＋α / code(v0.4):14時間弱](https://qiita.com/7of9/items/8712a71c8af267170da4)
        - [Lazurite Mini > 消費電流を計算してみた > 40.7uA/秒](https://qiita.com/7of9/items/62ac348d51c3c87e6aef)
        - [line monitor > 消費電流の計測 (151221) > WiFi使用時: 5.38V 350mA > 9.5時間はもちそうだ](https://qiita.com/7of9/items/ce3289a57c3ef105dd32)
        - [line monitor > 連続試験 (151214) > 連続動作試験 / バッテリーの持ちの確認 > 5200mAhで11時間動作した](https://qiita.com/7of9/items/f24c9b931851ca0e3bb6)
    - 扉には磁石だけ案
        - 腕の方にマイコンと電池をつける
            - 利点: 電池交換が楽
            - 欠点: 装着忘れ
            - 欠点: いかに小型化するか
                - マイコン基板、リードスイッチ、電池
            - 欠点: 見た目があやしい
                - とある箱に入れる(https://qiita.com/7of9/items/f7c0f7b5d4523e5084fe )などの工夫が必要だろうか
            - リードスイッチが扉の磁石に近づくとフラグが立つ
                - 数秒後に「カギを閉めてください」の音声かビープ音


### 気になったリンク

- [導電糸を使った簡易テスター「パントマイムテスター」を作ってみよう！](http://rikabank.org/experiment/physics/craftsmanship/639/)
- [一般人には時計に見えないかも。基板むき出しのイカしたバイナリ時計](https://www.excite.co.jp/News/it_g/20150312/Gizmodo_201503_apple_watch_64.html)
- [デジタルとアナログを高次元で融合！　カシオの腕時計が目指すモノづくり (2/7)](http://www.itmedia.co.jp/business/articles/1509/30/news128_2.html)
- [両面ＴＨ丸型ユニバーサル基板　５０．８ｍｍ](http://akizukidenshi.com/catalog/g/gP-08758/)
- [電池むき出し。電気工学のアートを感じるスチームパンクな腕時計](http://ideahack.me/article/1300)
静的サイトジェネレータ用のサイトにAtomでいい感じに画像を挿入したい


JekyllやHugoでブログを書くときにAtomを使って書いているんですが、画像の貼り付けが面倒くさい。

例えばHugoの場合だと、
1. `static` フォルダ配下に画像を格納
2. 画像の名前をコピー
3. エディタに画像のパスを書き込む

特に1.が面倒で、なんかぱっと画像をペーストしたら、`static/images` 配下とかに保存されて、そんでエディタには `/images/画像名.png` とかが勝手に挿入されないかなーと思っていた。

ので作りました。

[atom.io/packages/insert-image-to-atom-project](https://atom.io/packages/insert-image-to-atom-project)

![image.png](https://i.github-camo.com/9d35d7613f27713b46a6471e08d1b52e526065ff/68747470733a2f2f7261772e67697468756275736572636f6e74656e742e636f6d2f7368776c642f696e736572742d696d6167652d746f2d61746f6d2d70726f6a6563742f76302e302e31332f6173736574732f726561646d652e676966)

### jsonで設定ファイルを書くことで、プロジェクトごとに保存先などを管理できます

```json:.image-config.json
{
  "images": {
    "storePath": "/images",
    "wwwRoot": "/static",
  }
}
```

`storePath` に`/static` を入れることによって、画像が`/static/images`に保存され、貼り付けられるurlは`/static/images/hogehoge` になります。

### Grammar毎に挿入するときの形式を指定できます

Hugoではimageを貼り付けるときに `{ {< figure src="/img/hoge.jpg" >} }` のようなスニペットを入れたいですよね

```json:.image-config.json
{
  "storePath": "/images",
  "wwwRoot": "/static",
  "grammars": {
    "Markdown": {
      "url": "{ {< figure src=\"${url}\" >} }"
    },
    "GitHub Markdown": {
      "url": "{ {< figure src=\"${url}\" >} }"
    },
    "HTML": {
      "url": "<img src=\"${url}\" alt=\"\">"
    }
  }
}
```

こんな風にしてみます。

はりつけると。


`{ {< figure src="/images/b1ce5a71b477ae5b5e745842604575cd.png" >} }`

こんなテキストがエディタに貼り付けられました。

grammarsを追加することで様々な言語に対応できるので、Railsのslimとかでも使えたりしますね。


[atom.io/packages/insert-image-to-atom-project](https://atom.io/packages/insert-image-to-atom-project)
raw文字列(r'...')を使うとエスケープが多い文字列が楽に書ける

この記事は [Pythonのコードを短く簡潔に書くテクニック Advent Calendar 2017](https://qiita.com/advent-calendar/2017/python-short-code) の15日目です。

# はじめに

例えばWindowsのファイルパスを文字列リテラルで書こうとすると、パス区切文字`\`をエスケープしなくてはならないので面倒です。
raw文字列を使うと`\`を通常の文字として扱うため楽に書けるようになります。

# 普通の文字列で書いた場合

```pycon
>>> 'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe'
'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe'
```

# raw文字列で書いた場合

raw文字列は`r'...'`という書き方をします。

```pycon
>>> r'C:\Program Files (x86)\Google\Chrome\Application\chrome.exe'
'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe'
```

# 参考

- Python3 ドキュメント
    - 言語リファレンス
        - [文字列およびバイト列リテラル](https://docs.python.jp/3/reference/lexical_analysis.html#string-and-bytes-literals)
MACBookPro のRetinaディスプレイ解像度をあげる

<img width="672" alt="スクリーンショット 2017-12-15 7.05.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/211107/7636855c-2d38-8190-fc01-1e289118ba85.png">

「設定」「ディスプレイ」で、「解像度」を「変更」にして「スペースを拡大」を選ぶ

狭くて使いにくいと思っていたMacbookがとても快適になった。

https://support.apple.com/ja-jp/HT202471
組合せ最適化でののぐらむを解く

Advent Calendar 14日目の記事 [組合せ最適化でウォールロジックを解く](https://qiita.com/SaitoTsutomu/items/24742740571bc122e2b8)
Advent Calendar 16日目の記事 [組合せ最適化で美術館を解く](https://qiita.com/SaitoTsutomu/items/ffccc24e5b6173e8f0a4)


## これなに

**ののぐらむ**を、Pythonで[組合せ最適化](https://qiita.com/SaitoTsutomu/items/bfbf4c185ed7004b5721)モデルを作って解きます。
解く楽しみは、モデル化を工夫することになります。

自分でも試してみたい人は、下記を参考にしてください。

- [数独を通して組合せ最適化を学ぼう](https://qiita.com/SaitoTsutomu/items/bd09190d8a02432b3f16)

## 問題
* 各横行の左、各縦列の上にある数字は、その行(列)の中で連続して黒く塗る白マスの数を表します
* 1つの行(列)に対して数字が複数ある場合は、数字の並び順どおりにその数字の数だけ連続して黒く塗ります
* 1 つの行(列)に対して数字が複数ある場合は、その数字が表す黒マスの連続の間に1マス以上の白マス(塗らないマス) が入ります

下記は、問題と答えです。

![](https://raw.githubusercontent.com/SaitoTsutomu/opt4puzzle/master/pic/nonogram.png)

## 定式化

```math
\begin{array}{cl}
            変数 & v_{ij} \in \{0, 1\} ~ \forall i, j ~ ~ ~ (マスi,jが黒かどうか) (1) \\
                 & r_{k} \in \{0, 1\} ~ \forall k, 縦または横 ~ ~ ~ ~ ~ (縦または横ごとにk番目の候補を選ぶかどうか) (2) \\
\mbox{subject to} & \sum_k{r_k} = 1 ~ \forall 縦または横 ~ ~ ~ ~ (縦または横ごとに候補の中から1つ) (3) \\
                 & 候補を選んだらマスの色は候補の通り (4) \\
\end{array}
```

`hinth`に横のヒントが、`hintv`に縦のヒントが入っているとします。

```py3:python
import numpy as np, matplotlib.pyplot as plt
from pulp import LpProblem, lpSum, value
from ortoolpy import addvars, addbinvars
hinth = [[int(s) for s in t.split(',')] for t in
         '2 3,2 2,3 2,2 8 7 1,4 3,3 1,1 3'.split()]
hintv = [[int(s) for s in t.split(',')] for t in
         '2 1,2 1,5 5,2 1,2,1 3 6 1,3,2,1 3,4 1,1'.split()]
```

## 数理モデルを作り解く

ののぐらむの解になるように、制約条件を追加し数理モデルを作成し、解きましょう。

- `do`で行もしくは列のヒントの処理をしています。
- `makelist`でヒントを元にパターンを列挙して、0-1変数で1つのパターンを選んでいます。

```py3:python
def baselist(i, j, k):
    return [0] * i + [1] * j + [0] * k
def makelist(n, l):
    p = l[-1]
    if len(l) == 1:
        if n < p: return None
        return [baselist(i, p, n - p - i) for i in range(n - p + 1)]
    ll = l[:-1]
    s = sum(ll) + len(ll) - 1
    return [j + baselist(1, p, n - p - s - i - 1) \
        for i in range(n - p - s) for j in makelist(i + s, ll)]
def do(m, v, hint):
    for i, hh in enumerate(hint):
        l = makelist(v.shape[0], hh)
        r = addbinvars(len(l)) # (2)
        m += lpSum(r) == 1 # (3)
        for j, c in enumerate(l):
            for k, b in enumerate(c):
                m += (1 - 2 * b) * v[k,i] <= 1 - b - r[j] # (4)
m = LpProblem()
v = np.array(addvars(len(hintv), len(hinth))) # (1)
do(m, v, hinth)
do(m, v.T, hintv)
m.solve()
```

### 結果の表示

```py3:python
plt.imshow(1-np.vectorize(value)(v), cmap='gray', interpolation='none')
plt.show()
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/13955/dee40cee-a4df-e160-de7a-cffca88e1bf6.png)

解けていることが確認できます。

以上
CiscoルータでHello, World!

こんにちは、[#学生LT アドベントカレンダー](https://qiita.com/advent-calendar/2017/student-lt)の18日目を担当する焼きそばメロンパンと申します。

普段はwebの人ですが、最近Ciscoルータの[1812J](https://www.cisco.com/c/ja_jp/products/collateral/routers/1801-integrated-services-router-isr/product_data_sheet0900aecd8028a95f.html)という物を3台ほど購入しましたので、今回はこのルータを使って Hello, World! をしてみたいと思います。

# 目次

* Ciscoルータと他のルータの違い
* どうやって買うのか、一緒に買うべき物は？
* セットアップ方法
* Hello, World! を書く
* まとめ

# Ciscoルータと他のルータの違い

Ciscoルータは業務用のルータで、内部のOSでは [IOS](https://ja.wikipedia.org/wiki/Cisco_IOS) というものが使われています。
この IOS には Cisco 独自のコマンドがあり、こいつを使ってIPアドレスやルーティングの設定を行います。

# どうやって買うのか、一緒に買うべき物は？

ヤフオク等でも安く購入出来るそうですが、自分は秋葉原の [NW工房](http://nw-akiba.com/page-26) というところで購入しました。
購入したルータは前述した 1812J という物で、router でありながら switch のポートも付いています。

ルータと一緒に購入した物は下記の物です。(ひとまずこれがあれば接続出来る)

- コンソールケーブル
- [HL340](https://www.amazon.co.jp/エムサーブ-typeA-RS-232C-D-sub-HL-340/dp/B00DI02IWM) (シリアル - USB 変換)
- [電源3ピン - 2ピン 変換プラグ](https://www.amazon.co.jp/3Aカンパニー-3A-3P2P-変換アダプタ-電源3ピン→2ピン変換プラグ-電源-OAタップ/dp/B00C65XW6G)

# セットアップ方法

今回は ArchLinux からルータに接続しました。
(MacBook でも試したがデバイスドライバの関係で出来なかった)

1. ルータに電源を接続してスイッチを入れる
2. consoleと書いてある場所にコンソールケーブルを接続
3. PCにUSB変換したコンソールケーブルを接続
4. PCで minicom をインストール
5. シリアル接続の設定をする (http://itmst.blog71.fc2.com/blog-entry-22.html 参照)
6. ルータに接続

ルータに接続されるとおそらく下記の文章が表示されると思うので、今回は no と入力しましょう。

```
Continue with configuration dialog? [yes/no]:
```

すると下記のようになり、コマンドを受け付けるようになります。

```
Router>
```

# Hello, World! を書く

IOS では tcl というスクリプトが書けるので、ここで Hello, World! を書いてみようと思います。

手順は下記の通りです。

- 特権EXECモードになる (enable)
- tchというスクリプトが書けるモードになる (tclsh)
- スクリプトを書いて保存する
- 特権EXECモードになる
- tchshで書いたスクリプトを実行する

実際に入力するコマンドは下記の通りです。

```
Router>enable
Router#tclsh
Router(tcl)#puts [open "flash:Hello" w+] {
+>  puts "Hello, World!"
+>}
Router(tcl)#exit
Router#tclsh Hello
Hello, World!

Router#
```

上記のように Hello, World! が表示されていることが確認出来ました。

# Cisco機器を勉強するには

自分は学校で学んだ知識程度しかありませんが、[ネットワークエンジニアとして](http://www.infraexpert.com) というサイトが参考になりました。
また、[CCENT](https://www.cisco.com/c/ja_jp/training-events/training-certifications/certifications/entry/ccent.html) 等の資格を勉強しながら実機を購入して遊んでみるのも良いかもしれません。
CCENT の勉強には少し見づらいサイトですが [Ping-T](http://ping-t.com) というサイトも良い感じです。

ネットワークの基礎から学びたい方には [マスタリングTCP/IP](https://www.amazon.co.jp/マスタリングTCP-IP-入門編-第5版-竹下/dp/4274068765) という書籍がオススメです。

# まとめ

tclsh では分岐や繰り返しも書けるそうなので fizzbuzz とかも書けそうです。
しかし、本来は ping を一定周期で送信したりと NW 系の操作の自動化に使われるそうなので、その辺も勉強出来たらと思っています。
[とあるコンテスト: IPv4 address] ipコマンドを使って、IPv4 Address を設定

Hello world !!
今回は、ifconfigコマンドに代わるipコマンドでIPv4アドレスを設定していきます。 
簡単な備忘録なので、詳細は**man ip** (あるいは、**man ip-address**) コマンドで見てください。

# 環境
- CentOS 7.4 (on VirtualBox)

# 設定
設定内容は、**ipv4アドレス=192.168.0.1/24**、**ネットワークデバイス名=enp0s3**とします。

```
# ip address add 192.168.0.1/24 dev enp0s3
```

**ip address** は、**ip a** に省略可能です。
ちなみに、IPv6 address を設定したい場合は、アドレスの部分をIPv6にすれば設定できます。



設定内容の確認は、

```
$ ip a
```

あるいは、

```
$ ip a sh enp0s3
```


設定したアドレスを削除したい場合は

```
# ip a delete 192.168.0.1/24 dev enp0s3
```
と、コマンドを打ちます。

楽勝ですね♪
さくらの標準OS(CentOS6.9)にnginx/pyenv/virtualenvを入れる [2017年12月版]

# はじめに
Flask 使ってちょっとした自分用のアプリ作ろうと思ったので久々にさくらでサーバ借りてまずは構成管理をする。Ansible とか Chef とか使ってもいいがスケールする予定も今のところないので一旦手動で諸々セットアップを行う。CentOS7系の場合またいろいろ話が変わるので注意。

# nginx

## yum repository の登録
`/etc/yum.repos.d` ディレクトリの中に、以下のファイルを作成。

```bash
$ sudo vim /etc/yum.repos.d/nginx.repo
```

```:nginx.repo
[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/6/$basearch/
gpgcheck=0
enabled=1
```

## yum install
```bash
# sudo 権限を持つユーザを仮定
$ sudo yum -y install nginx
```

# pyenv

## pyenv-installer を使う
以前は GitHub から入れた気がするが、[pyenv-installer](https://github.com/pyenv/pyenv-installer)なるものがあったのでこちらを利用。

```bash
$ curl -L https://raw.githubusercontent.com/pyenv/pyenv-installer/master/bin/pyenv-installer | bash
```

ちなみに、このコマンドで pyenv-virtualenv もインストールされる。

## ~/.bash_profile に追記

```bash:~/.bash_profile
export PATH="/home/{user}/.pyenv/bin:$PATH"
eval "$(pyenv init -)"
eval "$(pyenv virtualenv-init -)"
```
{user}はユーザ名。

すぐに反映したいので

```bash
$ source ~/.bash_profile
```

## 依存ライブラリのインストール

```
yum install gcc gcc-c++ make git openssl-devel bzip2-devel zlib-devel readline-devel sqlite-devel bzip2 sqlite
 zlib-devel bzip2 bzip2-devel readline-devel sqlite sqlite-devel openssl-devel
```

## Python 3.6.3のインストール
一旦 Python 3系の最新安定版である3.6.3をインストールする。

```bash
$ pyenv install 3.6.3
$ pyenv rehash
$ pyenv global 3.6.3
```

# virtualenv
pyenv-virtualenv でもいいが、Flask のドキュメント見ても virtualenv を使ってるようだし、ディレクトリで閉じれるので virtualenv にしてみる。余談だが、この二つの差に関しては[こちらのページ](http://dackdive.hateblo.jp/entry/2015/12/12/163400)がわかりやすい。

## pipでかんたんに
先程インストールしたグローバルな python 3.6.3 に pip で入れてしまう。

```bash
$ pip install virtualenv
```



# 参考
- http://nginx.org/en/linux_packages.html#stable
- https://qiita.com/yuta_h3/items/2988c4d0811bf8c344c0
ITPのBANを早速試しました

この記事は [MicroAd Advent Calendar 2017](https://qiita.com/advent-calendar/2017/microad) の15日目の記事です。
2017/12/15 といえば、[スター・ウォーズ エピソード8/最後のジェダイ](http://starwars.disney.co.jp/movie/lastjedi.html) の公開日です。ファンの皆さん、お楽しみですね。

# はじめに
Safari11 がリリースしてから3ヶ月立てました、ネット広告業界が大騒いだ ITP 機能はご存知ですよね。
本記事はITP機能に 3rd-party cookie が BAN される方法を紹介します。

# テスト環境
- OS: `macOS High Sierra`
- Browser: `Safari 11` ITP有効 (環境設定 -> プライバシー -> サイト越えトラッキングを防ぐ -> 有効)
- BANドメイン対象: `ad.com`

# 下準備

## 1. 仮想ドメイン登録

```shell
$ sudo vi /etc/hosts
```

下記仮想ドメインを追記します。

```shell:hosts
...

127.0.0.1 www.ad.com
127.0.0.1 www.test1.com
127.0.0.1 www.test2.com
127.0.0.1 www.test3.com
127.0.0.1 www.test4.com
127.0.0.1 www.test5.com
```

## 2. Apache 起動

最近のMacは最初からApacheが入っているので便利です。

```shell
# 起動
sudo apachectl start
# 停止
sudo apachectl stop
# 再起動
sudo apachectl restart
```
とりあえず、Apacheを起動した状態にしときます。

## 3. テスト用 HTMLファイル作成

```shell
# Apache documentの配下に入る
$ cd /Library/WebServer/Documents/

# テスト用 HTMLファイル３つを作成
$ sudo vi media.html
$ sudo vi redirect.html
$ sudo vi cookie.html
```

```html:media.html
<html>
  <body>
    <a href='http://www.ad.com/redirect.html' target='_self'>
      <img src='https://lumiere-a.akamaihd.net/v1/images/the-last-jedi-theatrical-poster-tall-a_6a776211.jpeg?region=0%2C0%2C1536%2C864&width=768'>
    </a>
    <iframe src='http://www.ad.com/cookie.html' />
</body>
</html>
```

```html:redirect.html
<html>
  <head>
    <script>
      var id = "BB-8";
      var expire = new Date((new Date()).getTime() + (3600 * 24 * 1000)); // after 1 day
      document.cookie = 'ID=' + id + '; path=/; domain=.ad.com; expires=' + expire.toUTCString() + ";";
      location.href = "http://www.starwars.com";
    </script>
  </head>
</html>
```

```html:cookie.html
<html>
  <body>
    <h2>Cookie of ad.com domain</h2>
    <p id="id"></p>
    <script>
      if (document.cookie) {
        document.getElementById('id').innerHTML = document.cookie;
      }
    </script>
  </body>
</html>
```
 
# BAN 実験

Safari 11で http://www.test1.com/media.html を開く。
`ad.com` という 3rd-party のクッキーはまだないので、下の「Cookie of ad.com domain」欄に何も表示されません。

画像をクリックしたら、`ad.com`のページを経由して広告ページ( http://www.starwars.com ) にリダイレクトします。
途中 `ad.com`ドメインの`ID`クッキーが作られます。

もう一度、http://www.test1.com/media.html にアクセスしたら、下の「Cookie of ad.com domain」欄に`ID=BB-8` が表示されますね。
※ それは、3rd-party cookie として、`ad.com`ドメインの`ID`クッキーがまだ読める証拠です。

繰り返し、下記３つドメインの `media.html`ページを開いて、画像をクリックして広告ページに飛ばせます。
http://www.test2.com/media.html
http://www.test3.com/media.html
http://www.test4.com/media.html
それぞれ、`media.html` ページの下の「Cookie of ad.com domain」欄に`ID=BB-8` が表示されましたね。

最後に、五つ目ドメインの`media.html`ページを開く。
http://www.test5.com/media.html
ページの下の「Cookie of ad.com domain」欄に`ID=BB-8` が消えました！
そして、他のページに入っても 3rd-partyとして`ad.com`のcookieが読めなくなりました！

**ということは、ITP機能発動！**
**`ad.com`ドメインは見事にトラッカーと認定され、BANされました！！**

> リソースのドメイン数が4に達した時点で、トラッカー判定されることを確認しました。

[こちらの記事](https://www.mm-lab.jp/report/itp_specification_and_behavior/) に書いたこと、再現しましたね。
# 終わりに

`ITP` 機能に関してまだいくつ特性がありますが、機会があれば続々紹介したいと思います。
Vue + TypeScriptでpropsのObjectやArrayに型をつける

## Vue + TypeScriptでのpropsの推論

Vue 2.5でTypeScriptのサポートが強化されました。
その1つがpropsの推論で、propsに`String`、`Number`などと指定すると、それらの値をstring型、number型として利用できます。しかし`Array`や`Object`は、any[]型、any型になってしまいます。

```ts
// 適当なクラス
class Foo {}

Vue.extend({
  props: {
    str: String,
    num: Number,
    foo: Foo, // カスタムコンストラクタ
    arr: Array,
    obj: Object,
  },
  created() {
    this.str // string型
    this.num // number型
    this.foo // Foo型
    this.arr // any[]型 <- この2つを
    this.obj // any型   <- 何とかしたい
  },
}
```

`Foo`のようなカスタムコンストラクタには対応していますが、`Object`にはやはり`type`や`interface`を使って指定したいです。


## ArrayとObjectにも型の指定を

Vueの型定義を読んでいると、型キャストを利用して`Array`や`Object`にも型を指定できることを発見しました。~~方法は簡単で、string[]型を利用したい部分に`Array as () => string[]`を指定します。（下の例では`Prop`を定義してそれを使っています）~~

**【追記・修正】**
Vueの型定義にPropTypeがありましたので、そちらに書き換えました。

```ts
import Vue, { PropType } from 'vue'

// 適当なインターフェース
interface Bar {}

Vue.extend({
  props: {
    arr: Array as PropType<string[]>,
    obj: Object as PropType<Bar>,
    fnc: Function as PropType<() => void>,
    // 省略可能なプロパティを指定する時にも利用できる
    optional: {
      type: String as PropType<string | undefined>,
      required: false,
    },
  },
  created() {
    this.arr // string[]型
    this.obj // Bar型
    this.fnc // (() => void)型
    this.optional // (string | undefined)型
  },
})
```

型のキャストしか行っていないので、実行時のJavaScriptに余分な動作が入るなどといったことはありません。（個人的に重要なポイント）


## さいごに

いつのまにか公式で用意してくれていたとは……
ちょっとずつ読むドメイン駆動設計 第四部 戦略的設計 第一四章 モデルの整合性を維持する

## 料金オブジェクトの例

書籍の料金オブジェクトの例はとてもわかりやすいですね。

２つのチームで同じ料金(Charge)を扱っていたが、先にできていた片方のチームの料金を別のチームが使うことをした結果、本当は「顧客料金」と「供給者料金」という別々の意味で料金を扱う必要があったのに、同じモデルを使ってしまっていたため、思いもよらないバグを生み出してしまったということでした。

# モデルの整合性を維持する
ここでの教訓としては、

- それぞれのモデルが適用される境界について、明示的に合意が必要だった
- システム全体で統一されたモデルを持つことは苦労するが、得られるものは少ない
- 極めて重要な箇所を緊密に統一された状態に保てればよく、それが重要。

## 境界はどこに
こうしたモデルの分岐は至る所に現れます。政治的な断片化、経営上の優先順位、チーム編成、同じチーム内でも・・・

要するに、ここで何を統一し、何を統一しないかをはっきり決める方法が必要であるということ、それが次の節のテーマとなっています。
Unity Cloud Buildがローカル環境で作ったビルド成果物をアップロードできるようになった

Unity Cloud Buildがローカル環境で作ったビルド成果物をウェブコンソールからアップロードできるようになった

で、これ嬉しいかというと結構嬉しい。

主に嬉しいケースとして2個

* 開発チームがUnity Cloud Buildを導入する前にストアに提出・公開したビルド成果物をアップロードして、一か所にまとめることができる

Cloud Buildをビルド成果物の置き場としてみると↑的な理由で嬉しい。

* まだUnity Cloud Buildが対応していないビルド環境(ベータ版のXcodeとか)でビルドした成果物をアップロードできる

Cloud Buildをビルド成果物の共有ツールとしてみると↑的な理由で嬉しい。

最初からUnity Cloud Build導入できればいいのだけれども、Xcodeのベータ版での開発が必要な場合(最近のUnityだとARKit利用アプリとか)だと、Unity Cloud Buildが対応していなくてそれはできない。けれど、これで手元でビルドしてウェブコンソールからアップロードで管理することができて結構うれしい！

ということで、Unity Cloud Buildがローカル環境でビルドしたビルド成果物をアップロードできるようになった！

嬉しい！
gccを使って、制御フローグラフを作成

# はじめに
gccの-fdump-treeオプションには、たくさんのswitchやoptionsを付けれるようだ。

(参考) [GCC Developer Options](https://gcc.gnu.org/onlinedocs/gcc/Developer-Options.html)


これで制御フローグラフを**楽に!** **簡単に!!** 作れないか試してみた。

# ずばり、オプションは、

***-fdump-tree-cfg-graph***

これだ！
いろいろ試していると、これで出力できた。
(使えるgccのバージョンなどは、調査してない。すまない。)

# では、実際のサンプルを

```c
#include <stdio.h>

int main( int argc, char* argv[] )
{
    if ( argc )
    {
        printf("%s\n", argv[0]);
    }
    return 0;
}
```

こんなんでいいかな。サンプルコードだし。

# サンプルコードをgraphvizファイルへ変換

```sh
gcc -fdump-tree-cfg-graph sample.c
```

そうすると、

* sample.c.011t.cfg
* sample.c.011t.cfg.dot

というファイルが出来上がる。(これ以外に実行ファイルも)
必要なのは、拡張子がdotのファイルの方

# 制御フローグラフの画像へ変換

```sh
dot -Tpng -o sample.c.png sample.c.011t.cfg.dot
```
これで、sample.c.pngというファイルが出来上がる。
こんな↓感じだ。ほほう。

![sample.c.png](https://qiita-image-store.s3.amazonaws.com/0/73918/3c6e0edc-7576-adcd-1c31-47794b0f2535.png)

# ちょっとサンプルコードを変更してみる

例えば、ループとかにしてみると、どうなるのだろう。

```c
#include <stdio.h>

int main( int argc, char* argv[] )
{
    for( int i=0; i<argc; i++ )
    {
        printf( "www\n" );
    }
    return 0;
}
```

出来上がったのは、こちら↓
for文の継続条件式が、bb 4のブロックでifになっている。

![sample_loop.c.png](https://qiita-image-store.s3.amazonaws.com/0/73918/e2b04f52-349d-5f24-d9c1-c4e81b3dd1a0.png)

# ということで
これが、使えるのか、使えないのか、
制御構造がややこしい関数に出くわしたときに、
ちょっと試してみたい。

では。
TeXで書いたものをPDFに変換するときに忘れてしまうコマンド


TeXで書いたものをpdfに変換するときに毎回忘れて検索するのがめんどいので
メモしておく。

aaaaのTexのファイルを作って、それをコンパイルする。

platex aaaa.tex

これでコンパイルが終了して、

dvipdfmx aaaa

を入力することで、pdfを吐き出すことができる。


これだけなのになんで忘れてしまうんや・・・・。
Haskell における遅延ファイル読み込みとリソースリーク

## 前置き

我が家は妻が写真や動画を撮るのが好きで、だいたい 100GB/年 ぐらいのペースでそれらが増えていきます。今は 4TB の HDD にそれらをぶち込んでいるのですが、私の管理が悪いためファイルがめちゃくちゃ重複している状況です。

次の HDD の買い替えまでに重複したファイルを削除してスッキリさせたい。__そうだ、Haskell でツールを作って重複ファイルを洗い出そう！__

そんな理由で [dupcheck](https://github.com/satosystems/dupcheck)[^1] という同一ファイル検出ツールを作った際に得られた知見を共有します。

## 設計方針

ツールの大雑把な設計方針は以下のとおりです。

* コマンドラインツール
* 同一ファイルを検出したいディレクトリを引数で複数指定
* 検出結果は標準出力

## 詳細設計方針

同一ファイルをどのように検出するか、については以下のようにしました。

* ファイルからハッシュを求めてそのハッシュ同士を比較する

ハッシュを求めるコストはそれなりに高いのですが、例えば 100 個のファイルの比較を行おうとすると、比較は 4950 回行う必要があるわけで、これが 1000 個の場合は 499500 回と増えていき、要するに比較のコストを可能な限り低くすることがこのツールがストレスなく動作するためのポイントであり、そのためには多少のコストは払ってもハッシュを求めてハッシュ同士の比較を行うのが良い、と考えました。

## ハッシュライブラリ

ハッシュ関数はいろいろあるのですが、今回のケースでは MD5 が最適です。その理由としては：

* ふたつのファイルが異なることを十分にチェックすることが可能である
* 計算コストが他のハッシュ関数と比べると低い
* 攻撃等が介在しない範囲での同一性チェックには最適なハッシュ関数

などが挙げられます[^2]。

MD5 を導出できる Haskell のライブラリはいくつかあるのですが [pureMD5](http://hackage.haskell.org/package/pureMD5) が `md5 :: ByteString -> MD5Digest` という関数を提供していて使い勝手が良いためこれにしました。

## 動作確認

実装して動作させてみるとうまく重複ファイルを検出してくれるのですが、大量ファイルがあるディレクトリを指定すると `openBinaryFile: resource exhausted (Too many open files)` というメッセージを出力してツールが終了してしまいます。

これは OS が許容するファイルディスクリプタの最大数までファイルを開いてしまったことを示すエラーで、要するにファイルを開きすぎです。

## 問題の実装

このツールでファイルを開いているのは `md5sum` という関数だけで、ここが原因のはずです。

```haskell
md5sum :: FilePath -> IO (MD5Digest, FilePath)
md5sum file = LBI.readFile file >>= \contents -> return (md5 contents, file)
```

`LBI` は `Data.ByteString.Lazy` を表しています。Lazy 版を使用しているのは `md5` 関数が `Data.ByteString.Lazy.ByteString` を要求するためです。

カンの良い方はもう気がついたかもしれませんが、以下のように修正しました。

```diff
 md5sum :: FilePath -> IO (MD5Digest, FilePath)
-md5sum file = LBI.readFile file >>= \contents -> return (md5 contents, file)
+md5sum file = BI.readFile file >>= \contents -> return (md5 (LBI.fromStrict contents), file)
```

`BI` は `Data.ByteString` を表しています。Lazy ではない方の `readFile` で Lazy ではない方の `ByteString` を取得し、`md5` には `fromStrict` で Lazy な `ByteString` に変換して渡す、という修正です。

Haskell は遅延評価戦略に基づき、それが本当に必要になるまで評価はしません。今回のツールでは先にすべてのファイルのハッシュを求めて、それから比較を行っていきますが、比較が始まるまで実際にはファイルのハッシュは計算されないが、`readFile` によってファイルディスクリプタは消費される、ということなんだと思います[^3]。

## まとめ

* `Data.ByteString.Lazy.readFile` はコンテンツの読み込み自体は遅延されるが、ファイルディスクリプタは消費されるようである
* 通常この挙動は気にしなくても良いはずだが、今回のツールのようにファイルを大量に読み出すような場合には問題になる
* そうした場合は `Data.ByteString.readFile` を使うことで問題を回避できる

---

[^1]: 今回の記事のテーマであるリソースリークは回避できたのですが、やっぱり対象ファイルが大量にあるとメモリが足りなくなって途中で落ちます。スペースリークが発生しているだと思いますが、こちらはまだ解決しておらず、これに関してはまた別の機会に解決して記事にしようと思います
[^2]: [Hash関数まとめ(md5, sha1, sha2, crc32, PBKDF2) #Pistatium](http://kimihiro-n.appspot.com/show/5889981516087296) がわかりやすくまとまっています
[^3]: 更に `md5` で導出されたハッシュを即座に標準出力に表示して動作検証を行ったところ、`Data.ByteString.Lazy.readFile` は得られたコンテンツをすべて読み終えているにもかかわらずファイルディスクリプタは即座には閉じてくれない、という動作のようです
【未解決】Ionicアプリで漢字変換画面が落ちるケースがある (iPhone限定)

この記事は [BRIGHT VIE Advent Calendar 2017](https://qiita.com/advent-calendar/2017/brightvie) 15日目の記事になります。

#はじめに
この問題は、Ionic Japan Slackでもディスカッションし、
原因が未解決になっている事例になります。
良い解決方法をお持ちな方がいらっしゃいましたら、是非コメント等でアドバイスいただければと思います :pensive:

https://ionic2.slack.com/archives/C10G5B3KQ/p1505191601000148

※SlackへのJOINはこちらから
https://ionic2-ja.herokuapp.com/

#症状

サンプルとして読み仮名が「あ」の「娃」という漢字を入力したいと想定します。
まず「あ」を入力します。

<img width="375" alt="IMG_3485.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/34871/99e47860-5313-5bdf-b954-cc8b09120df5.png">

変換候補には「あ」「あー」「あの」・・・などが並びますが、「娃」はありません。

そのまま「次候補」キーを連打すればいつか「娃」はでてきますが、
変換候補の右側にでている（上向き矢印）をタップすると、以下のような画面が表示されます。

<img width="375" alt="IMG_3486.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/34871/689a3e07-59c2-aca0-e0ae-328c8439e2e8.png">

しかし変換候補に表示された中にも「娃」がないため、下にスクロールしたいと思います。
ですが、スクロールができず、変換候補画面がすぐに落ちてしまいます。

短いですが動画だとこんな感じになります。
https://youtu.be/KAd2cxiJHYQ

弊社で作っているアプリ、残念ながらこの問題をはらんでいます。
(iPhoneのみ。iPadでは発生しない)

#日本語で作成されたIonicアプリが全部こうなるのか？

こちらについて、Slack内でもディスカッションがなされましたが、
１つのアプリだけがこの問題をクリアしていました。

問題なく漢字選択できている様子はこちら
https://youtu.be/KAd2cxiJHYQ
(作者様の許可を得て掲載させていただいております)

残りのアプリについては「当初から駄目」「先日まで問題なかったが、直近のビルドでだめになった」といった状態でした。

・Ionicのバージョンなのか？
・Cordovaのバージョンなのか？
・config.xmlの設定内容なのか？
などなど、各アプリ作者の方たちの情報から特徴をつかもうとしましたが、大きな差を見つけることができませんでした。

#試してみた

##他社製キーボードに置き換えてみる
iPhoneのキーボードを純正からGBoardなどのサードパーティ製キーボードにすることで、
この問題を回避することはできます。
企業内アプリの場合は、こういった策でも逃げれますが、
一般公開するアプリで、その回避策を強要することは現実的に難しく・・・

## Config.xmlに DisallowOverscroll：trueを設定

[Cordova設定：DisallowOverscroll](https://cordova.apache.org/docs/ja/latest/config_ref/#%E3%83%9E%E3%83%AB%E3%83%81%E3%83%97%E3%83%A9%E3%83%83%E3%83%88-%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E7%92%B0%E5%A2%83%E3%81%AE%E8%A8%AD%E5%AE%9A)

```
<preference name="DisallowOverscroll" value="true" />
```

ベーススクロールを固定する設定ですが、残念ながら解決しませんでした。


#知見をお持ちの方いらっしゃいましたら、アドバイスを！

是非、コメントへアドバイスをお願いいたします m(_ _)m