OmniAICreator/Qiita-1.07M huggingface dataset:
Node.js(Expressフレームワーク)アプリをHerokuにデプロイする方法

# 1. 概要
[Heorkuとは](https://jp.heroku.com/what)

最近趣味でよく使うようになったのですがこの間新人ちゃんにやってもらったら
めちゃくちゃ苦戦してたので、まとめてみました。

# 2. Node.jsのExpressアプリをHerokuにデプロイ

まず、アプリのルートディレクトリに行き、少し操作が必要になります。

## 2-1. gitローカルリポジトリを作成

```terminal:DOS
C:\xxx\app_dir> git init
```

## 2-2. .gitignoreの作成

アプリのルートディレクトリに`.gitignore`ファイルを作成します。
これは、Gitにコミットしたくないものがあるときに、.gitignore内に書いておけば除外してくれるという
ファイルです。
外部の依存パッケージはHerokuにデプロイしたときに勝手にインストールしてくれるのと、
アップロードするとなると莫大なファイル数になるので除外しておきましょう。

```text:.gitignore
node_modules
```
これは **拡張子のみ** のファイルです。

## 2-3. Procfileの作成

アプリのルートディレクトリに`Procfile`ファイルを作成します。
Herokuのガイドラインには

>Procfileは、Herokuのプラットフォーム上にあるアプリケーションのdynosにより実行されるコマンドが 何であるかを宣言するためのメカニズムです。それは、多種多様なHeroku dynoのラージスケールにおける process modelから生じています。 マルチタイプのworkerや、clockのような単体プロセス、 TwitterのストリーミングAPIの使用者、と言ったいかなるプロセスタイプを宣言するために Procfileを使うことが可能となります。

とあります。
が、小難しいので、起動時のコマンドどうする？みたいな感覚でやってます。
様々なアプリケーションのデプロイに対応するためかと！

Expressの場合はアプリ作成時からいじっていなければ下記の通りです。

```text:Procfile
web: node ./bin/www
```

これは **拡張子なし** のファイルです。
あと、ファイル名の先頭の`P`は大文字じゃないとだめです。

## 2-4. Herokuアプリの作成

では、実際にHerokuにアプリを配置します。

まずはコマンドプロンプトでHerokuにログインします。（最近はブラウザ経由のログインに変わった）
```terminal:DOS
C:\bot-work\line-bot> heroku login
```

そして、アプリサーバーを立てます。（アプリ名は他のユーザーも含めてユニークでないといけません）
```terminal:DOS
C:\bot-work\line-bot> heroku create line-bot-tsumasakky
```

ブラウザから確認すると、アプリができていると思います。
https://dashboard.heroku.com/apps

https://[アプリ名].herokuapp.com/
がアプリのURLになります。

## 2-5. 環境変数の設定

環境変数を使用する場合（例えばAPIのキーなどをソースコードに埋め込むのは危険なので･･･）は
ダッシュボード＞Settings＞Config Vars　にKey-Value形式で保存できます。

![image08.png](https://qiita-image-store.s3.amazonaws.com/0/147118/e8bdc538-78b9-f88e-25b1-b6bb4bcd8f63.png)


Node.jsなら`process.env.HOGEHOGE`みたいな形で参照できますね！


## 2-6. アプリのデプロイ

では、実際にサーバーにアプリを配置します。

```terminal:DOS
C:\bot-work\line-bot> git add .
C:\bot-work\line-bot> git commit -m "first commit"
C:\bot-work\line-bot> heroku git:remote --app line-bot-tsumasakky
C:\bot-work\line-bot> git push heroku master
```

# 3. 感想
最初はめちゃくちゃとっつきにくいなーとか思ってましたが、慣れれば全然！平気！！

# 4. 参考情報
https://devcenter.heroku.com/articles/deploying-nodejs
Kotlinでデザインパターン Singleton編

# はじめに

本記事は[Java言語で学ぶデザインパターン入門](http://www.hyuki.com/dp/)を参考にしながら
JavaではなくKotlinで実装してみようというものです。

![Java言語で学ぶデザインパターン入門](http://www.hyuki.com/images/dp1.png)

# 調べてみる

**Singletonがやりたいことは、次に記載する内容です。**

* そのクラスに存在するインスタンスが必ず一つであることを保証する
* アプリケーションの設計上、インスタンスが複数存在してはいけないという成約を実現する。

# 実装してみる

## Javaだとどうだったか？

Javaですと次のコードのようにSingletonを実装します。
* コンストラクタをPrivateとして外部からインスタンスを生成できないようにする。
* そしてgetInstanceからstaticで宣言されたインスタンスをリターンする。

```Java
public class Singleton {

  private static Singleton singleton = new Singleton();
  
  private Singleton() {
    System.out.println("インスタンスを生成しました。")
  }
  
  public static Singleton getInstance() {
    return singleton;
  }
}
```

ですがKotlinではClassのコンストラクタはPrivateにできませんし、
またStaticがないのでJavaと同じように実装するのは無理そうです。

## じゃKotlinだとどうするか？

調べて見たところ、Kotlinでは公式がSingletonパターンを容易に使えるように
”[オブジェクトの宣言](https://dogwood008.github.io/kotlin-web-site-ja/docs/reference/object-declarations.html)”という言語機能を提供しているみたいです。


"オブジェクトの宣言"はアクセスしたときに初期化されるようです。
それでは次のようなSingletonを作成して動作を確認してみましょう。

```kotlin
object Singleton {
    val created = LocalDateTime.now()

    fun write() {
        println("write")
    }

    fun read()  {
        println("read")
    }
}
```

生成されるインスタンスも一つになっていますし、
あとアクセスしたときに初期化されています。

```kotlin
fun main(args: Array<String>) {
    println("start " + LocalDateTime.now().toString())

    println("created " + Singleton.created.toString())
    Singleton.write()
    Singleton.read()
    println("created " + Singleton.created.toString())
    
    println("finish " + LocalDateTime.now().toString())
}

---------------------------------------------------------
start 2019-02-22T00:44:45.601
created 2019-02-22T00:44:45.602
write
read
created 2019-02-22T00:44:45.602
finish 2019-02-22T00:44:45.602
```


# おわりに

次にKotlinでSingletonパターンを実装したいときは

* Singletonを使いたいときはオブジェクトの宣言を使う
* オブジェクトの宣言はアクセスしたときに初期化されるので注意する

これらがポイントみたいです。

# 参考記事
* [オブジェクト式と宣言](https://dogwood008.github.io/kotlin-web-site-ja/docs/reference/object-declarations.html)
* [Kotlin singletons with argument](https://medium.com/@BladeCoder/kotlin-singletons-with-argument-194ef06edd9e)
C の char **hoge のために、Swift で UnsafeMutablePointer<UnsafeMutablePointer<Int8>?>! を作る

## Swift の String を UnsafeMutablePointer\<UnsafeMutablePointer\<Int8>?>! にする
```sample.swift
import Foundation

let options = ["-m" : 2, "-n" : 3]

var args : [String] = []
for (option_name, value) in options {
    args.append(contentsOf: [option_name, value])
}
var cargs: [UnsafeMutablePointer<Int8>?] = args.map { strdup($0) }
initialize(Int32(args.count), &cargs)
for ptr in cargs { free(ptr) }
```

```sample.c
void initialize(int argc, char **argv) {
    // いろいろ
}
```

See: https://developer.apple.com/documentation/swift/unsafemutablepointer

## C の UnsafeMutablePointer\<Int8>? を Swift の String にする

```sample.swift
let foo = get_foo()
let result = String(cString: foo!) // TODO: nil 安全にすべき
print(result)
```

```sample.c
char* get_foo() {
    // return うんたら
}
```
Xamarin.Forms.WPFでPrismを使う

現状、PrismはXamarin.Forms.WPFに対応しておらず、エラーが出て使えないのですが、少しソースを修正してやることで、割と簡単に対応させることができたので、その方法を記載します。

# 対応方法
[Prismのリポジトリ](https://github.com/PrismLibrary/Prism.git)をクローンして、v7.1.0のタグでチェックアウトします。
修正するファイルは以下の2つです。

* [Source/Prism/Prism.csproj](https://github.com/PrismLibrary/Prism/blob/v7.1.0/Source/Prism/Prism.csproj)
* [Source/Prism/Modularity/IModuleManager.cs](https://github.com/PrismLibrary/Prism/blob/v7.1.0/Source/Prism/Modularity/IModuleManager.cs)

## Prism.csprojの修正
36行目をコメントアウトします。

```xml
  <ItemGroup>
    <!--<Compile Condition=" '$(TargetFramework)' == 'net45' " Remove="Navigation/**" />-->
    <Compile Update="Properties\Resources.Designer.cs" DesignTime="True" AutoGen="True" DependentUpon="Resources.resx" />
    <EmbeddedResource Update="Properties\Resources.resx" Generator="ResXFileCodeGenerator" LastGenOutput="Resources.Designer.cs" />
  </ItemGroup>
```

## IModuleManager.csの修正
27行目をコメントアウトします。

```c#
#if NET45
        /// <summary>
        /// Raised repeatedly to provide progress as modules are downloaded.
        /// </summary>
        //event EventHandler<ModuleDownloadProgressChangedEventArgs> ModuleDownloadProgressChanged;
#endif
```

## NuGetパッケージの作成
Prism.DryIoc.FormsやPrism.Unity.Formsプロジェクトで、パックを実行すると、Source/Artifacts/Nugetにパッケージが作成されます。利用時は、通常のパッケージは使わずに、この作成したパッケージを参照するようにします。
今回の修正で変わっているパッケージは、Prism.Coreのみなので、これだけ参照するようにしても大丈夫です。ただし、この場合には、パッケージのバージョンを7.1.1など、現行のバージョンである7.1.0.431より大きくしておかなければいけません。

# サンプル
簡単なサンプルを作成しました。

[PrismForWPFSample](https://github.com/f-miyu/PrismForWPFSample)

![2019-02-22.png](https://qiita-image-store.s3.amazonaws.com/0/236182/c3211428-46df-34bc-198d-0665e3958e98.png)![2019-02-22 (1).png](https://qiita-image-store.s3.amazonaws.com/0/236182/8c87b99c-5e33-6d72-d7e5-4a762e04a4db.png)

Prismを利用したViewModelのバインドや画面遷移がうまく動いていることが確認できます。もちろんiOSやAndroidでも普通に動きます。
サンプルのNuGetフォルダに修正したPrismのパッケージが含まれているので、それをダウンロードしてそのまま使ってもらっても構いません。

# おわりに
完全にテストしたわけではないので、もしかしたら不具合が起きるかもしれませんが、普通に使う分には問題ないんじゃないかと思います。[teratailの質問](https://teratail.com/questions/162000)にもあって、気にはなっていたので、今回できることがわかって良かったです。
progate中級編終了のお知らせ

#Prpgate中級編を終えて。

難しぃ～～～～～っ‼‼‼
こんにちは未来電子テクノロジーの小林（@aluku0807）です！
今日はPrpgate中級編を終えたことを自分なりにアウトプットしていきます！間違いがありましたらご指摘にのほどよろしくお願いいたします。

##背景画像の設定
CSSで背景画像を指定するにはbackground-imageプロパティを
background-image: url(画像のURL);のように使うことで背景画像を指定できます。またbackground-size: cover;を指定すると、1枚の画像で表示範囲を埋め尽くすように画像の大きさが拡大縮小できます。

##要素を透明化させる設定
opcityとrgbaの違い
opacityは選択した要素を全て透明化します。一方はrgbaを使うとその色だけを透明化することができます。また透明度は０～１で指定でき、数値が小さい程透明度は増します。

##フォントサイズ指定のpxと％の違い
**・pxは絶対指定**
pxとは、例えば「font-size:8px」と指定すると、1文字当たり縦に8px、横に8px使う、という意味になります。ただし、注意しておく点として、文字には縦や横に長いものがありますので、必ず縦横8pxにならないこともあります。

**・％は相対指定**
　％は親要素に対してどのくらいの幅や高さを持つかを指定することができます。

##要素同士を重ねる場合

HTMLの要素同士は通常重なって表示されることはありません。ただ
position: absolute;というプロパティを使うことで、要素同士を重ねて表示することが出来ます。この時、サイト全体の左上部分を基点とし、基点からの距離は、top、right、bottom、left の各プロパティで指定できる。


##Font Awesomeとは

Font Awesomeとは、TwitterやFacebookのマークなどウェブ上にあるアイコンを、画像ではなく文字として扱うことを可能にしたツールです。
画像ではないので、文字の大きさや色を自由に変更することが可能です！

##最後に
Progate中級編では初級より格段に覚えることも増えたので、かなり時間も体力も使いました。これかもプログラミング頑張ります！ありがとうございます！
【Swift4】SearchBarの背景色を変更する（黒い線もなくす）方法

# やりたいこと
<img width="500" alt="Simulator Screen Shot - iPhone 8 - 2019-02-22 at 00.49.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/112818/c08abf28-2c89-20ba-9817-ea27acd4c12f.png">

# 結論
`UISearchBarBackground`を削除 or 透明化した上で、`UISearchBar`の色を変える。

```swift:やり方1
// UISearchBarBackgroundを取得
if let searchBarBackground = searchBar.value(forKey: "_background") as? UIImageView {
    // UISearchBarBackgroundを削除
    searchBarBackground.removeFromSuperview()
}
searchBar.backgroundColor = UIColor.red
```

```swift:やり方2
// UISearchBarBackgroundを取得
if let searchBarBackground = searchBar.value(forKey: "_background") as? UIImageView {
    // UISearchBarBackgroundを透明化
    searchBarBackground.alpha = 0
}
searchBar.backgroundColor = UIColor.red
```

※**コード内の`value(forKey:)`について、iOS13で禁止になったようです。**
[UISearchBarのプライベートなプロパティにアクセスするコードがiOS 13では禁止になったようです - Qiita](https://qiita.com/ktanaka117/items/1a30c4c6052cd8e1a0b7)

# 試したこと
まず試したのはこちら。

```swift:うまくいかなかった
searchBar.barTintColor = UIColor.red
```


このやり方だとたしかに色は変わりますが、なにやら黒い線が残ってしまいます。
<img width="500" alt="Simulator Screen Shot - iPhone 8 - 2019-02-22 at 01.14.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/112818/5833489e-88a8-eee8-219a-70ceb52c1cd4.png">

View Hierarchyで見てみると、色が変わっているのは`UISearchBarBackground`で、そこにはデフォルトで下線が引かれていることがわかりました。
<img width="1033" alt="スクリーンショット 2019-02-22 1.29.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/112818/49ccc371-c4e6-9138-0e85-419a2c53b3c1.png">

ならばこれはどうでしょう。

```swift:うまくいかなかった
searchBar.backgroundColor = UIColor.red
```

今度は`UISearchBar`自体の背景色が変わりましたが、`UISearchBarBackground`が挟まっているためうまくいきません（背景グレーのSearchBarとして表示されてしまいます）。
<img width="1097" alt="スクリーンショット 2019-02-22 1.39.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/112818/b4852265-2475-7433-a9a2-9648472b31f4.png">

最終的には、[結論](https://qiita.com/orimomo/items/2ee1573a460217b5fbf9#%E7%B5%90%E8%AB%96)のように`UISearchBarBackground`を削除 or 透明化した上で、`UISearchBar`の色を変えるという方法に落ち着きました。
（もっとスマートなやり方があれば、ぜひ教えてください🙂）

# 参考
* [【iOS】UISearchBarのbackgroundカラーを変更する - Qiita](https://qiita.com/nadioo/items/930f3fa6a20555e2666a)
* [UISearchBarの背景を透明にする方法(swift3) : iOSエンジニアのマイペースなブログ](http://mypace1981.doorblog.jp/archives/49798106.html)
JavaScript の String.prototype.split() の第二引数 limit は、ほかの言語と意味が違う

（この記事は [地平線に行く](https://yujisoftware.hatenablog.com/entry/javascript_split_limit) とのマルチポストです）

JavaScript の split メソッドを使ったら「あれ？」となったのでメモ。

# 一般的な spilt メソッド

Java, C#, Go, Ruby, Perl の `split` メソッドは、第二引数に `limit` を指定できます。
これを指定すると**分割回数が制限されます。**
（下記の例だと、文字列を *"aaa"* と *"bbb,ccc"* の2つに分割しています）

```java:Java
"aaa,bbb,ccc".split(",", 2)
// ==> String[2] { "aaa", "bbb,ccc" }
```

```C#:C#
"aaa,bbb,ccc".Split(new char[]{','}, 2)
// ==> String[2]{ "aaa", "bbb,ccc" }
```

```Go:Go
strings.SplitN("aaa,bbb,ccc", ",", 2)
// ==> ["aaa" "bbb,ccc"]
```

```ruby:Ruby
"aaa,bbb,ccc".split(",", 2)
# ==> ["aaa", "bbb,ccc"]
```

```perl:Perl
split(/,/, "aaa,bbb,ccc", 2)
# ==> ("aaa", "bbb,ccc")
```


## JavaScript の spilt メソッド

JavaScript の `split` メソッドも、第二引数に `limit` を指定できます。
ただ、ほかの言語と意味が違っていて、これを指定すると**戻り値の要素数が制限されます。**
（下記の例だと、文字列を分割して最初の2つである *"aaa"* と *"bbb"* を返しています）

```javascript:JavaScript
"aaa,bbb,ccc".split(",", 2)
// ==> Array [ "aaa", "bbb" ]
```

[MDN には「見つかった分割結果の数の制限を指定する整数です。」と書かれています。](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split#Parameters)
パッと読んだ感じほかの言語と同じかなっと思ったんですが、よく考えると違ったという…。

お気を付けください！
[学習用]CentOSにHeroku Toolを入れる方法

PHPはCentOSで作業していたが、
1日さまよった挙句、結局CentOSで出来た話。

#これだけコマンド
```
$ wget https://cli-assets.heroku.com/branches/stable/heroku-linux-amd64.tar.gz
$ tar xf heroku-linux-amd64.tar.gz
$ sed -i -e "/^export PATH$/i PATH=\$HOME/heroku/bin:\$PATH" ~/.bash_profile
$ export PATH=$HOME/heroku/bin:$PATH
$ heroku --version
$ heroku login
```

ほんとにこれだけでHerokuのToolが入る。
今日の苦労は何だったのか。

Pushも出来て、動作も確認した。
個人的に詰まったメモ #cmd/PowerShell

# 以下面倒くさい禁止

## cmd
- 前知識
    - *bashだと思うな。いいな。*
        - `ls`なぞ無い。
- コメント
    - `rem xxxxx`で一行コメント。


## PowerShell
- 前知識
    - *期待をするな。希望を持つな。こいつはMS製品だ。*
    - 新しいスクリプトとして認識するのが一番かもしれないけど、多分bash入れる方が救われる。
    - 文字コードとワイルドカードはトラップ
- コメント
    - `# xxxxx`で一行コメント。
- 落とし穴
    - .ps1ファイルをダブルクリック/右クリックして「powershellで実行」の場合、5.x版が起動して想定と違う挙動をする可能性がある
        - 対応策としてはその.ps1を呼び出すバッチを作成し、そっちでバージョンを操作する


## cmdからPowerShell呼び出し
- `powershell -Command "echo 'hello world!'"`な感じにラップする。
    - なおこのままでは5.x系が呼ばれるので、最新版(投稿時点では7.4.0)を呼びたい場合は`pwsh -Command ...`にする

## PowerShellからcmd呼び出し
- `cmd /r dir`な感じで呼び出し可能。
[laravel]データベースから取ってきたオブジェクトを見やすく出力

### はじめに
laravelでデータベースからデータを取ってくるときに、Eloquentを使います。そのときに、collectionクラスにデータを詰め込んで返しています。
開発を進めていく際に、都合の良いように、連想配列の中にデータベースから取得したオブジェクトを格納することもありました。実際にビュー側で出力するために、foreach等を使って表示させようとしても構造が複雑になり、エラーが表示されることがあり、デバッグをするときに大変苦労したことがありました。
もう少し見やすく配列の中身が見れれば良いなと思ったときに調べて出てきた関数がありましたので、紹介します。

### dd()関数
* インスタンス、オブジェクトや配列を見やすく整形して出力してくれます。
* 出力後にexitしているようです。
* 引数に確認したい変数を入れる

下の図は、実際にデータベースから取得したものをdd()を使って出力した状態。ブラウザ上でこのように確認することができます。
<img width="446" alt="スクリーンショット 2019-02-21 23.56.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/304359/9e9bdeca-9da1-28f5-9430-ce4e6f940061.png">
[Slack]API経由でreaction (add emoji)

# 概要

Slack MessageへbotからReaction(emoji)をつけさせたい


# 方法

Slack APIを使うほか無さそうです。

ドキュメントが読める人は[reactions.add](https://api.slack.com/methods/reactions.add)を読みましょう。

以下はそれを試しに実行するまでの手順です。

# Hello World

## Slack APIの登録

簡易的に書いているので、理解に苦しんだ際は[Slack API 推奨Tokenについて](https://qiita.com/ykhirao/items/3b19ee6a1458cfb4ba21)を参照してください。

### 新しいAppを登録

1. https://api.slack.com/apps から Create New Appを押下
2. 名前とワークスペースはよしなに

### Appにreactions.addの権限を与える

左のメニューから `OAuth & Permissions` を選択

![image.png](https://qiita-image-store.s3.amazonaws.com/0/79697/2cc72866-d82d-9f22-4eaf-9f5b3e547c9d.png)

`Scopes` の `Select Permission Scopes` プルダウンを開き、 `Add or remove emoji reactions for user` を選択

![image.png](https://qiita-image-store.s3.amazonaws.com/0/79697/188b0966-40dc-9560-bfab-4593bb8160f3.png)

`Save Changes`を押下

### 認可する

`OAuth & Permissions` のページの `Install App to Workspace` を押下して認可する。

これで認可したユーザ経由でreactionをつけることができる。

### アクセストークンを控える

`OAuth & Permissions` のページの `OAuth Access Token` を控えておく。

![スクリーンショット 2019-02-21 23.56.01.jpg](https://qiita-image-store.s3.amazonaws.com/0/79697/1c0285d0-5ced-f437-8c68-adc26f7cdb95.jpeg)

## Reactionを付けたいMessageの情報を取得

### Reactionを付けたいメッセージのURLを控える

![image.png](https://qiita-image-store.s3.amazonaws.com/0/79697/b362fe6d-8659-3280-093e-b663eefb611a.png)

### URLに必要情報が記載されているのでパースする

MessageのURLは以下のようになっている。

```
https://[ワークススペース名].slack.com/archives/[チャンネルID]/p[投稿時刻]
```

このうち「**チャンネルID**」「**投稿時刻**」が必要になるので控えておく。

ただし、「投稿時刻」はエポックマイクロ秒で記載されており、これを小数点付きのエポック秒に変換する必要がある。

ex. `1234567890123456` => `1234567890.123456`

## curlでリクエストしてみる

以下のようにリクエストすること

```shell
curl -X POST 'https://slack.com/api/reactions.add?token=xxxx-xxxxxxxxx-xxxx&channel=C1234567890&timestamp=1234567890.123456&name=thumbsup'
```

### パラメータの説明
* `token`: OAuthのアクセストークン
* `channel`: 投稿するチャンネルID。チャンネル名とは異なる。
* `timestamp`: 投稿した時刻。整形した小数点付きのエポック秒を指定する。
* `name`: 付けたいemojiを指定。

## botユーザにreactionさせる

今回の手順だと、認可を得たユーザがリアクションしたことになってしまう。

botユーザにリアクションをつけさせたい場合は追加で以下の手順を実施。

### Bot Usersを登録する

これでBotユーザになる。

![スクリーンショット 2019-02-22 23.08.06.jpg](https://qiita-image-store.s3.amazonaws.com/0/79697/47fa4940-2d40-a2de-69d3-9266450b91d8.jpeg)

### 再度認可を得る

* 左のメニューから `OAuth & Permissions` を選択
* 「Reinstall App」を押下

### Bot Userのトークンをコピーする

`xoxb`で始まるトークンをコピーする。

![スクリーンショット 2019-02-22 23.08.49.jpg](https://qiita-image-store.s3.amazonaws.com/0/79697/64afa79d-4855-1fb7-05ea-fe61f01e9af7.jpeg)


トークンを変更して以下のようにリクエストする。他のパラメータは変更不要。

```shell
curl -X POST 'https://slack.com/api/reactions.add?token=xoxb-xxxxxxxxx-xxxx&channel=C1234567890&timestamp=1234567890.123456&name=thumbsup'
```


# 疑問点

HTTP MethodはPOSTを要求されているが、各パラメータはJSONではなくクエリストリングの形式で渡さないと動かなかった。なぜ？
kubernetesでのPodアップデート戦略

# はじめに
kubernetes上でアプリなどをPodとして運用していると、
アプリ等のバージョンアップに伴いPodをアップデートする機会があります。
kubernetesでは大きく２つのPodアップデート戦略をとることができます。
kubernetes公式ドキュメントではあまり詳しく扱われていないように見えたので
備忘も兼ねて記事にします。

### 参考にしたもの
O'Reilly 入門 Kubernetes
https://www.oreilly.co.jp/books/9784873118406/

# kuberbnetesのアップデート戦略
kuberbnetesのアップデート戦略には以下２つが存在します。

- Recreate
- RollingUpdate

アップデート戦略は以下の例のようにkubernetesのマニフェストにて、
Deploymentのspec.strategy.typeで定義します。

### Recreateの例
~~~yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: nginx-deployment
  labels:
    app: nginx
spec:
  replicas: 2
  selector:
    matchLabels:
      app: nginx
  strategy:
    type: Recreate
  template:
    metadata:
      labels:
        app: nginx
    spec:
      containers:
      - name: nginx
        image: nginx:1.14
        ports:
        - containerPort: 80

~~~

### RollingUpdateの例

~~~yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: nginx-deployment
  labels:
    app: nginx
spec:
  replicas: 2
  selector:
    matchLabels:
      app: nginx
  strategy:
    type: RollingUpdate
    rollingUpdate:
      maxSurge: 50%
      maxUnavailable: 0%
  template:
    metadata:
      labels:
        app: nginx
    spec:
      containers:
      - name: nginx
        image: nginx:1.14
        ports:
        - containerPort: 80
~~~

以下では各アップデート戦略におけるPodアップデート方式を説明します。

## Recreate
もっともシンプルなアップデート方式です。
現在起動しているPodを全て削除した後に最新のPodを起動します。

![recreate.png](https://qiita-image-store.s3.amazonaws.com/0/246372/426e7b2a-70be-a98c-18bb-38079d6773fc.png)

注意点としてはPod起動数がゼロになるタイミングが存在するため、
ダウンタイムが発生することです。
以下のRollingUpdateのところで触れますが、Recreate戦略はRollingUpdate戦略で
maxUnavailable=100%,maxSurge=0%とした時の動作と同じになります。

## RollingUpdate
Recreateに対してRollingUpdateでは以下2つのパラメータを用いることで、
旧Podを一部起動させたまま少しずつ新Podへのアップデートを行います。

- maxUnavailable:現在起動しているPod数に対してアップデート時にどの程度までの減少（スケールイン）を許すか  
  →例えば現在2台のPodが起動しており、maxUnavailable=50%(もしくは1)を設定した場合、アップデートに伴い2台中1台のPodは利用不可となることを許可します。

- maxSurge:アップデート時に現在起動しているPod数に対してどの程度までの増加（スケールアウト）を許すか  
  →例えば現在2台のPodが起動しており、maxSurge=50%(もしくは1)を設定した場合、アップデートに伴いPod1台までのスケールアウトは許可します。つまりアップデート中は旧バージョン含め合計3台までであればPodの起動を許可することになります。

以下にmaxUnavailable=0%,maxSurge=50%の場合の例を示します。

![rollingupdate_50.png](https://qiita-image-store.s3.amazonaws.com/0/246372/108def2e-6d8f-925c-4a47-4fd9451caece.png)

また、maxUnavailable=0%,maxSurge=100%とした場合は以下のようにBlue-Green Deploymentが実現できます。
万一新バージョンのPod起動に失敗場合でも旧バージョンでサービス提供を継続することができます。

![rollingupdate_100.png](https://qiita-image-store.s3.amazonaws.com/0/246372/6a9fadb1-49f2-8de1-35b1-aecd8ea2e79d.png)

RollingUpdate戦略ではPodを停止させることなくアップデートを行うことができるため、
ダウンタイムを発生させずにPodのアップデートが可能です。
しかしながら、良くも悪くも新旧Podが同時に起動するタイミングが発生してしまいます。
クライアントとサーバサイドが密結合となっているアプリケーションの場合は注意が必要です。

例えば  
　・クライアントv1.0-サーバ1.0
　・クライアントv2.0-サーバ2.0  
という密結合があったとすると、RollingUpdateの方式では  
　クライアントv2.0-サーバ1.0  
となるタイミングが発生してしまいます。※ユーザに既にクライアントv2.0を配布している場合  

RollingUpdate戦略を用いる場合はこの点を考慮に入れる必要があります。

### 備考
アップデート戦略をマニフェスト上で特に指定しなかった場合は、
RollingUpdate戦略のmaxUnavailable=25%,maxSurge=25%が適用されるようです。


---
### 宣伝
弱小Twitterやってます。良かったら少し付き合ってください。
https://twitter.com/mochizuki875
console.logを入力するのが面倒な全ての人へ

Rubyではログ出力には`p`を使うと思います。とても楽ですよね。
でもJavaScriptでは`console.log`と書く必要があります。これは面倒です...

## console.logを入力するのが面倒な全ての人へ
```javascript
const p = console.log;
```
とすることで、
`p(x)`
と
`console.log(x)`
を全く同じ物にすることが出来ます。
JavaScriptでは関数も普通の変数と同じように扱えるために、このようにすることが出来ます。
## 終わりに
私は現在、Web3のサービスの開発をしています。詳しくはこちらの記事をご覧下さい。
        [無料でイーサリアムが当たる、Web3時代の寄付サイトを作った話](https://note.com/kenroda/n/n814347fbdcd7)
お名前ドットコムで取得したドメインをNetlifyで使う

お名前ドットコムで取得したドメインをNetlifyで公開したときのメモです。
ドメインは.jpで、既に取得済みとして説明をします。

まず、OverviewからDomain settingsに移動します。

![overview.png](https://qiita-image-store.s3.amazonaws.com/0/87888/e2533187-2b36-efb1-0591-f35c10ec1b69.png)

Add custom domainをクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/87888/7258ef73-d46c-1240-92cc-d0338d729b15.png)

お名前ドットコムで取得したドメインを入力してVerify。そうすると「入力したドメインはNetlifyでは登録できないが、そのドメインを所有しているなら追加できる」というようなメッセージが出るので、Yes, add domainをクリックして次に進む。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/87888/bdea12e8-763c-9a8a-6893-4862ed186c75.png)

これでドメイン一覧にもともとあったドメイン(`xxx.netlify.com`)の他に、

* `hitochan777.jp` (上で入力したドメイン)
* `www.hitochan777.jp`

の2つのドメインが追加されているはずです。

この時点では以下のように追加されたドメイン名の右側に警告マークでDNS設定を確認するようにと出ていることがわかります。
(Domain aliasのところは実際には`Primary domain`や`Redirects automatically to primary domain`と出ていると思いますので、無視してください)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/87888/e2db7d17-3165-1465-83b9-9d1eb5aaf94b.png)

ここからはお名前ドットコムでの設定です。先程の警告メッセージをクリックすると、ドメインプロバイダーでの設定方法が3つ書いてあります。

* 1つ目は推奨されている方法で、ALIASかANAMEを用いる方法。
* 2つ目はAレコードを使う方法。
* 3つ目はプロバイダーのネームサーバーをNetlifyが提供するものに変更する方法です。

お名前ドットコムではALIASやANAMEを設定する方法がない（っぽい）ということと、AレコードだとCDNが活用できないことから、
今回は3つ目の方法を採用することにしました。

ネームサーバーを変更するには、ドメイン設定>ネームサーバーの設定>ネームサーバーの変更　に移動します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/87888/c26747a8-239c-13ed-e76d-7b882d2240f7.png)

次にネームサーバーを変更したいドメインにチェックを入れて、`他のネームサーバーを利用`のタブを選択します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/87888/ca3aac7a-71c0-0919-6c49-0b68fba4734e.png)

ここにNetlifyのNameserversに記載されているネームサーバーを入力して更新すれば設定は完了です！
私の場合ネームサーバーは以下のようになっていましたが、ユーザーによって異なるかもしれませんので確認してください。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/87888/88cbbb9b-f911-24e2-d8c5-714e26483f5b.png)

設定が完了してもすぐに反映されるわけではないので、気長に待ちましょう。
CircleCIについて

# CircleCiとは
CircleCIとは、継続的インテグレーション(デリバリー)サービスのひとつ。

コミットからデプロイまでのパイプラインを作成し、ソフトウェア開発プロセスを自動化する。

特徴としては、「CircleCI」はWebサービスであるため、登録するだけで使えるようになる。

1コンテナ分は無料で使用可能

※ 詳細は公式

https://circleci.jp/

# GithubとCircleCiの連携
circleCiリポジトリと連携
必要なもの
- Githubアカウント
- 連携を行うリポジトリ

公式から『GitHubでログイン』を押下
![image (1).png](https://qiita-image-store.s3.amazonaws.com/0/365400/3bea33bf-851a-5cd9-3dfb-0bb8069e95f4.png)

Authorize CircleCI画面に移行し、押下
![image2019-2-9_21-9-2.png](https://qiita-image-store.s3.amazonaws.com/0/365400/08e0a420-95d7-7971-9118-a04af2c1fe62.png)

Set Up New Projectsを押下
![image2019-2-9_21-13-8 (1).png](https://qiita-image-store.s3.amazonaws.com/0/365400/f963b6a4-822a-85b3-d3db-8e4e4937b3d6.png)

Set Up Projectを押下
![image2019-2-9_21-11-32 (1).png](https://qiita-image-store.s3.amazonaws.com/0/365400/4b84d7fc-5c33-14e4-0725-608a2b597a4d.png)


Languageを選択して,Copy To Clipboardを押下してから、GitHub側で.circleci/confing.ymlを作成し貼り付け
![image2019-2-9_21-20-42 (2).png](https://qiita-image-store.s3.amazonaws.com/0/365400/ed7e4967-15ff-9a6a-e56f-fcdb5a2dba33.png)

GitHub側
![image2019-2-10_13-17-45.png](https://qiita-image-store.s3.amazonaws.com/0/365400/8a0784aa-5ecc-da43-b9a9-cbaf75638604.png)

config.ymlを作成後、Start buildingを押下すると連携したリポジトリに対し、circleCIが動く(FAILEDなのはbiludの設定をしていないため)
![image2019-2-10_13-25-12 (1).png](https://qiita-image-store.s3.amazonaws.com/0/365400/33ac95f6-55f2-9ed2-b4a4-8795537006a2.png)

# ユニットテストの確認
ユニットテストを作成・プッシュを行い、circleCI画面を確認
![image2019-2-24_20-20-45.png](https://qiita-image-store.s3.amazonaws.com/0/365400/d8528074-f616-ff6d-3e44-39471d44591a.png)

詳細画面
![image2019-2-24_20-24-2.png](https://qiita-image-store.s3.amazonaws.com/0/365400/a7e57541-5ef7-423d-4eac-ae89ad9fbf1d.png)

mvn testを展開（末尾）
![image2019-2-24_20-53-10.png](https://qiita-image-store.s3.amazonaws.com/0/365400/4ca15040-9103-d57a-3b37-38cecce60f0f.png)

失敗時の詳細画面
![image2019-2-24_20-57-54.png](https://qiita-image-store.s3.amazonaws.com/0/365400/4bc956c2-a685-98ef-1650-4984c678e18a.png)
![image2019-2-24_21-54-54.png](https://qiita-image-store.s3.amazonaws.com/0/365400/8fedac37-a42f-f7b2-47f2-24206dfce5c4.png)

github側の画面
![image2019-2-24_22-49-44.png](https://qiita-image-store.s3.amazonaws.com/0/365400/163b08c9-4a12-1573-1019-ab476e65082d.png)


参考　Masterをマージした際に承認が必要な場合
![image2019-2-24_23-2-49.png](https://qiita-image-store.s3.amazonaws.com/0/365400/3c575b95-c193-0946-b98b-affa6a727893.png)

![image2019-2-24_23-4-16.png](https://qiita-image-store.s3.amazonaws.com/0/365400/ea6ea8c2-35b7-49d1-720d-4ff9c9d1dcb1.png)

![image2019-2-24_23-5-28.png](https://qiita-image-store.s3.amazonaws.com/0/365400/871bcc72-53d8-6e66-945f-f9420f19bafd.png)

![image2019-2-24_23-5-58.png](https://qiita-image-store.s3.amazonaws.com/0/365400/4eda78de-f23e-9393-e588-cc0f537f06c8.png)

![image2019-2-24_23-6-36.png](https://qiita-image-store.s3.amazonaws.com/0/365400/022c1390-b8b1-238a-48fe-98cdb5785d2f.png)

参考
https://qiita.com/sawadashota/items/ba89382d563bc90bb5cd
コンデンサの動きメモ

# メモ

- 電源を入れると徐々に電荷がたまり、電圧が高くなっていく
- 電源電圧と同じ電圧まで上がる
- 電源を切ると徐々に放電して電圧が下がる

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">コンデンサの動作実験メモ <a href="https://t.co/bvHCc8yElA">https://t.co/bvHCc8yElA</a> <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@YouTube</a>さんから</p>&mdash; kure (@kure) <a href="https://twitter.com/kure/status/1098592914920349696?ref_src=twsrc%5Etfw">2019年2月21日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



# 参考

コンデンサを試す http://startelc.com/elc/elc_2_1capa.html

コンデンサーを使ってみよう : こた電 - こたつぁーの電子工作 http://www.kotaden.com/stage4_1_index.html

コンデンサの役割を学ぶ｜電子回路編 https://www.aps-web.jp/academy/ec/07/
Swift4で綺麗にコンスタントを定義する

## クラスや構造体で表現するコンスタントを綺麗に書きたい...

コンスタントとはいわゆる、定数。
コードの中に数字を下手書きしたくはない、だから数字は1つの場所にまとめて代入しようという考え。

## 結論
**extensionで拡張してそこにまとめる。似たようなものがあれば構造体でくくりstaticで定義する。**
## コード
とりあえず、コードを見せます。色々と省略していますが気にしないでください。
HogeというUIViewがあったとして、角丸の値などを設定しなければいけないとします。
注目して欲しいのはextensionの部分です。
数字はSizeRatioという構造体でまとめています。
また、いわゆるコンピューテッドプロパティもその下にprivateなクロージャとして定義しています。
かなり綺麗な書き方だと思ったのでまとめさせていただきました。

```Hoge.swift

class Hoge: UIView() {
　　// 省略
}

extension Hoge {
  private struct SizeRatio {
    static let cornerFontSizeToBoundsHeight: CGFloat = 0.085
    static let cornerRadiusToBoundsHeight: CGFloat = 0.06
    static let cornerOffsetToCornerRadius: CGFloat = 0.33
  }
  private var cornerRadius: CGFloat {
    return bounds.size.height * SizeRatio.cornerRadiusToBoundsHeight // 定義したSizeRatioを使う
  }
  private var cornerOffset: CGFloat {
    return cornerRadius * SizeRatio.cornerOffsetToCornerRadius
  }
  private var cornerFontSize: CGFloat {
    return bounds.size.height * SizeRatio.cornerFontSizeToBoundsHeight
  }
}

```
【GIMP】photoshopのキラキラブラシなどをGIMPのブラシに追加する方法

環境メモ
⭐️Mac OS Mojave バージョン10.14
⭐️GIMP 2.10

<font color="Magenta">photoshopのキラキラブラシや雲ブラシをGIMPのブラシに追加する方法</font>

1.検索で「photoshopのキラキラ系ブラシ」などで検索し、photoshopのブラシ素材
（拡張子「.abr」）をダウンロードする

2.以下の配下に、配置する
/Applications/GIMP-2.10.app/Contents/Resources/share/gimp/2.0/brushes/Splatters 
<img width="570" alt="スクリーンショット 2019-02-21 22.41.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/ee515b35-1f60-7a6a-d500-3cca7c3c78d3.png">

3.GIMPを開き、「ブラシツール」を選んで、ブラシの種類の所で右クリックで、ブラシの更新ボタンを押すと、ブラシが更新される
<img width="1282" alt="スクリーンショット 2019-02-21 22.51.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/f12d1c27-dacf-e290-48bb-f1ec5873e8ea.png">

完成！！
</br>
</br>
</br>
【Unity】GIMPでSkyBoxを自分で作ってUnityに設定する方法（Skybox/Cubemap）
https://qiita.com/nonkapibara/items/96734512a91338dba9a6
JETSON TX2のビルドがこける人へ

# 本日こちらの勉強会に参加しました。
[DLLAB Japan Tour 2019 AI とIoTが出合う日: IoT編@東京](https://dllab.connpass.com/event/115594/)

でもって、JETSON TX2が格安で買えるってもんで
早速購入して挑んだわけです。

とりあえずめちゃくちゃ楽しかった！
あと機械学習を実際にやってみることで
学習と推論という2点がどのようなものかが
理解できました。

# 前置きはこのぐらいにして本題。
## サンプルプログラムのビルド
この勉強会で、サンプルプログラムを用意していただいていたのです。
ビルドしてあるものは、JETSON TX2に固定してあるカメラを使って画像認識させるというものでしたが、ソースコードを修正することで、USBカメラでも使えるということで、早速ビルドしてみたのです。

## ところが。。。
このようなエラーが。。。

![](https://i.imgur.com/nCjnOF9.png)

というわけで、ビルドするにはパッケージが足りないようです。
早速インストールしちゃいましょう。

### cmake のインストール

```
sudo apt-get install cmake -y
```

これで再度ビルド！
ところが今度は・・・

![](https://i.imgur.com/j4Z7WI0.png)

### qt-sdk のインストール

```
sudo apt-get install qt-sdk -y
```

よし！これでいけるや・・・ろ・・・？

![](https://i.imgur.com/UCOwlkj.png)

### libglfw3-dev、libglew-devのインストール

```
sudo apt -y install libglfw3-dev
sudo apt -y install libglew-dev
```

もうないや。。。ろおおおおお？？！
![](https://i.imgur.com/w9wqTvw.png)

### libGL.so の入れ替え
このサイトを参考にしました。
[Building an OpenGL application](https://devtalk.nvidia.com/default/topic/946136/)

```
cd /usr/lib/aarch64-linux-gnu
sudo ln -sf /usr/lib/aarch64-linux-gnu/tegra/libGL.so libGL.so
```

これでようやくビルドできるようになりました！
![](https://i.imgur.com/xHNFzkm.png)

## 外付カメラの映像で画像解析できるぞ！
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">よっし！ビルドできた！！<br>てか結構色々入れたり弄ったりしないとビルドで転けるねこれ。。。<a href="https://twitter.com/hashtag/jetsonjp?src=hash&amp;ref_src=twsrc%5Etfw">#jetsonjp</a> <a href="https://twitter.com/hashtag/dllab?src=hash&amp;ref_src=twsrc%5Etfw">#dllab</a><a href="https://twitter.com/hashtag/jetson?src=hash&amp;ref_src=twsrc%5Etfw">#jetson</a> <a href="https://t.co/ijL9oJz6qC">pic.twitter.com/ijL9oJz6qC</a></p>&mdash; りなたむ@steed400 (@R_t_A_n_M) <a href="https://twitter.com/R_t_A_n_M/status/1098582288730710017?ref_src=twsrc%5Etfw">2019年2月21日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

これで、またいろいろできるようになりますね！！
各種エンコーディングでの文字列のバイナリをRubyで取得するスクリプトを作ってみた

# TL;DR

* ある文字列を変換したあとの16進バイナリを知りたくない？
* Rubyにやらせてみた。
* サンプルコードつき。

# はじめに

* テキストファイルの中身(バイナリ)、なんの文字コードで書かれているのか知りたい・・・
* 勝手に判別してくれるライブラリを使ってもいいが、特定の文字で知れれば十分。
* なんか役に立ちそう。

# コード

* 以下のコードを適当に.rb拡張子でファイルに保存してください。

```get_binary_from.rb
# frozen_string_literal: true

def display_binary(input, encode_type)
  begin
    puts "get binary when: #{encode_type.ljust(Encoding.name_list.map { |n| n.length }.max)} => #{input.encode(Encoding.find(encode_type)).bytes.map { |b| b.to_s(16).upcase }}"
  rescue => exception
    puts "error occurred when encoding to #{encode_type} => #{exception}"
  end
end

input = ARGV[0]
encode_type = ARGV[1]

ENCODING_TYPES = %w(ascii Shift_JIS utf-8 utf-16 utf-16le utf-16be utf-32le utf-32be eucjp).freeze

if input.nil?
  puts "Please enter strings you'd like to encode as 1st arg. If you'd like to know only a encoding type, please input Encodeing type as 2nd arg."
  return
end

if !encode_type.nil? && Encoding.find(encode_type)
  display_binary(input, encode_type)
  return
end

ENCODING_TYPES.each do |type|
  display_binary(input, type)
end
```

* .bashrcとか.zshrcにエイリアスを。これでどこからでも呼べる。

```shell
alias get_binary_from="ruby $HOME/scripts/get_binary_from.rb"
```

* 使い方。
    * 第一引数は必須、16進バイナリを知りたい文字列を与える。
    * 第二引数はオプション。知りたいエンコーディングを与える。
        * Encodingのクラスメソッド、name_listに対応する文字列を与えてね。
        * 第二引数を与えなければ、デフォルトで9通りで出てくる。

```shell
[shoutatani@mac] ~ % get_binary_from "あい う"
error occurred when encoding to ascii => U+3042 from UTF-8 to US-ASCII
get binary when: Shift_JIS                  => ["82", "A0", "82", "A2", "20", "82", "A4"]
get binary when: utf-8                      => ["E3", "81", "82", "E3", "81", "84", "20", "E3", "81", "86"]
get binary when: utf-16                     => ["FE", "FF", "30", "42", "30", "44", "0", "20", "30", "46"]
get binary when: utf-16le                   => ["42", "30", "44", "30", "20", "0", "46", "30"]
get binary when: utf-16be                   => ["30", "42", "30", "44", "0", "20", "30", "46"]
get binary when: utf-32le                   => ["42", "30", "0", "0", "44", "30", "0", "0", "20", "0", "0", "0", "46", "30", "0", "0"]
get binary when: utf-32be                   => ["0", "0", "30", "42", "0", "0", "30", "44", "0", "0", "0", "20", "0", "0", "30", "46"]
get binary when: eucjp                      => ["A4", "A2", "A4", "A4", "20", "A4", "A6"]

[shoutatani@mac] ~ % get_binary_from "あい う" "utf-8"
get binary when: utf-8                      => ["E3", "81", "82", "E3", "81", "84", "20", "E3", "81", "86"]
[shoutatani@mac] ~ % get_binary_from "あい う" "ISO-2022-JP"
get binary when: ISO-2022-JP                => ["1B", "24", "42", "24", "22", "24", "24", "1B", "28", "42", "20", "1B", "24", "42", "24", "26", "1B", "28", "42"]
```

# 終わりに

* 何の言語でも、Encodingあたりを触るのは楽しい。興奮する。
M5GOでHello Worlds

# M5GO
M5GOをゲットしたので、試しに使い始めた。
説明どおりにやったのに、うまくいかないので、試行錯誤しながら試した。
かなり時間かかった。
最終的には、今（2019-02-21）はM5Flowを使うのが標準っぽい。
M5StackとかM5GOのfirmwareを焼いても、なんか動かなかった。

# 試したこと
試した順に書く。
やってるとき、スピーカーかマイクかわからんけど、怪しげな音が何回も聞こえてくる。何回か、壊れたと思ったけど、ちゃんと動いてそう。そういう仕様っぽい。

## 
まず、ついてきた説明書にしたがって使ってみる。
WiFiがつながらなかった。

次に、公式をみた。よくわからんから、特に何もせず。
[M5Stack](https://www.m5stack.com/)

次に、GitHubをみてみる。
M5Cloudってののfirmware焼いてみるも動かず。
M5Stack_MicroPython焼いてみるも動かず。
M5GOがあることに気づいて焼いてみるも動かず。
ローカルでPCにUSBつないでもクラウドつないでも動かず。よくわからん。

[M5Stack · GitHub](https://github.com/m5stack)

調べてると、今どきは、M5Flow? UiFlow?ってのを使うことを知る。
説明書と違う・・・。
M5Flowのサイトあるドキュメントを見ながらfirmwareを焼いてみる。

[M5Flow](http://flow.m5stack.com/)
[M5GO_User_Manual_jp.pdf](http://flow.m5stack.com/download/M5GO_User_Manual_jp.pdf)

やっとこさ、それっぽいfirmwareを焼けた。
WiFiもつながった。なぜかスマホからやとうまくいかなかったので、WindowsPCからつないだ。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/184221/e5988a9b-9578-ed8e-5a1c-379899e76d63.png)

M5GOに表示されるAPIをブラウザ上から記入して、うまいこと動かせるようになった。
ようやく、M5Flowで動いた。
BlocklyってのとPythonで動く。

まずは、BlocklyでHello World!
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184221/a0fb97ec-dfe5-1286-6a67-895b490f883a.png)

次に、pythonでHello World!

```python
from m5stack import lcd
lcd.print('hello world!')
```

# 最後に
ドキュメントも疑わないといけない。
最近、流行はさったのか、情報が少ない。
センサを簡単に使えるので、いろいろ試してみたい。
macOS(Mojave)にphp7.2をインストールする

お久しぶりです！
二ヶ月後にエンジニアとして本格デビューする和尚です。

最近は入社が決まった会社の事前課題でlaravelをカリカリと書いている毎日。。。

そんなことは置いておいて、macOSにphp@7.2をbrewを使ってインストールしていきます:fist:

#環境
* macOS Mojave バージョン10.14
* php 7.1.19 (元々入っていたphp)

#インストール
##brewからphpの7.2を探す
```
$ brew search php72
==> Formulae
php@7.2
```

##brewでインストールする
```
$ brew install php@7.2
```

## PATHを通す
```
$ echo 'export PATH="/usr/local/opt/php@7.2/bin:$PATH"' >> ~/.bash_profile
$ echo 'export PATH="/usr/local/opt/php@7.2/sbin:$PATH"' >> ~/.bash_profile
$ source ~/.bash_profile 
```

##phpのバージョンを確認する。
```
$ php -v
PHP 7.2.15 (cli) (built: Feb  7 2019 20:10:03) ( NTS )
```

#おまけ
## composerをインストールする
```
$brew search composer
==> Formulae
composer

$brew install composer
```

終わりです^^
MIDI.js Soundfontsを鳴らしてみる

#初めに
https://github.com/gleitz/midi-js-soundfonts
詳しくはこちらを参照してください。

#mp3ファイルの再生
先ず、mp3ファイルを鳴らしてみます。

```javascript
function play() {
	let ac = new AudioContext();
	let src = ac.createBufferSource();
	src.connect(ac.destination);
	src.start();

	fetch("http://gleitz.github.io/midi-js-soundfonts/FluidR3_GM/acoustic_grand_piano-mp3/C4.mp3")
	.then(res => res.arrayBuffer())
	.then(compressed => {
		ac.decodeAudioData(compressed)
		.then(decoded => {
			src.buffer = decoded;
		});
	});
}
```

サンプル：
http://www.maroon.dti.ne.jp/lance/js/soundfont/soundfont1.html
http://www.maroon.dti.ne.jp/lance/js/soundfont/soundfont1b.html

#Base64化mp3の再生
先ず、JavaScriptファイルを読み込みます。

```haml

<script src="http://gleitz.github.io/midi-js-soundfonts/FluidR3_GM/acoustic_grand_piano-mp3.js"></script>
```

内容はこんな感じです。

```javascript

if (typeof(MIDI) === 'undefined') var MIDI = {};
if (typeof(MIDI.Soundfont) === 'undefined') MIDI.Soundfont = {};
MIDI.Soundfont.acoustic_grand_piano = {
"A0": "data:audio/mp3;base64,//uQRAAAAAAAAAAAAA
```

Data URI schemeのバイナリ化にFetch APIが使えます。

```javascript

function play() {
	let ac = new AudioContext();
	let src = ac.createBufferSource();
	src.connect(ac.destination);
	src.start();

	fetch(MIDI.Soundfont.acoustic_grand_piano["C5"])
	.then(res => res.arrayBuffer())
	.then(compressed => {
		ac.decodeAudioData(compressed)
		.then(decoded => {
			src.buffer = decoded;
		});
	});
}
```

サンプル：http://www.maroon.dti.ne.jp/lance/js/soundfont/soundfont2.html

#各種サンプル
[打楽器の試聴](http://www.maroon.dti.ne.jp/lance/js/soundfont/soundfont3b.html)
[MIDI風演奏](http://www.maroon.dti.ne.jp/lance/js/soundfont/soundfont4.html)
[サンバホイッスル演奏](http://www.maroon.dti.ne.jp/lance/js/soundfont/soundfont7b.html)
[キーボード演奏](http://www.maroon.dti.ne.jp/lance/js/soundfont/soundfont6b.html)
flutterのimageライブラリがiOSで超絶遅かった件

Flutterで画像のリサイズやクロップをしようとぐぐると、 [image](https://pub.dartlang.org/packages/image) というライブラリがすぐに見つかると思います。
しかしこのライブラリ iOSで実行すると `decodeImage` という関数が超絶遅いです。

どのくらい遅いかというと、3024x4032のサイズの写真を読み込むのになぜか2分くらいかかったりします。

そこで代替として [flutter_native_image](https://github.com/btastic/flutter_native_image) というライブラリを使うことにしました。
現時点ではリサイズとクロップ、プロパティの取得くらいしか機能はありませんが、ネイティブのコードを呼び出しているようで高速に実行できました。先の処理も数10ミリ秒でおわりました。

私のやりたいことはこちらのライブラリでもできたので、今回はflutter_native_imageを使うことにしました。
プログラミングがちがちの初心者 

Pythonでデータベース接続したくて、urllib使ってみたけれど。centOsとか使う方法もあるし、他にもいっぱいあってどれを使うべきなのかわかりません。混乱してます。

あと、知り合いの研究者(年配)にlinux使いこなせればいいんじゃね？的なこと言われて、しかも一度アセンブリ構築失敗してよくわからなくなっているレベルの私に「アセンブリはとりあえずできればいいじゃん？」と言うので、今更ながら勉強始めたんですが..彼にはlinuxでデータベース引っ張ってきてるのを教えてもらったんですがその後一人で再現できず困っています。
こんなに漠然とした投稿ですみません。何か助言いただければ嬉しいです。全くの初心者なので暗中模索です。

ちなみに、将来的には卒業するまで、つまりあと5年以内に、基礎研究において遺伝子解析とかデータサイエンスで使い物になる人になりたいとおもっています。

初心者です。
12日目。ムシャクシャしたので、ストレス解消アプリを作りました。

１２日目です。
ムシャクシャする事がありました。
イライラしながらツイッターをながめていたら、イライラしながら目玉を左右に動かすと、スッキリするというライフハックが流れてきました。

EMDRというそうです。
https://ja.wikipedia.org/wiki/EMDR

ふむふむ、これCSSで実装できるんじゃない？

まず、CSSアニメーションの例をざっくり探しました。
その中でシンプルなのを選びました。

今回は、こちらのプログでご紹介の「クネクネ動く CSS loading」を参考にさせていただきました。

<こちらを参考にさせていただきました>
使える！CSSアニメーション 20選
https://lab.sonicmoov.com/markup/css/css-animation-20/

７個の白丸がクネクネしておりましたので、ここから１ついただきました。

この白丸が画面の端から端まで行ったり来たりするように、CSS用語を調べたら、`@keyframes` 、 `transform: translate` と、`animation`あたりをどうにかすればよさそうです！

<こちらを参考にさせていただきました>
【CSS3】@keyframes と animation 関連のまとめ
https://qiita.com/7968/items/1d999354e00db53bcbd8

-1000pxから1000pxを5sで行ったり来たりするようにしました。よさげです。
しかし、パソコンではOKですが、スマホでみるとはみ出します。なんかいい方法ないかなーと探したらありました！ `vw`と`vh`です。

<こちらを参考にさせていただきました>
CSSでフルスクリーン(全画面) ＋ 縦横中央配置レイアウトを作る【3ステップ + おまけ】
https://mae.chab.in/archives/2749

白丸の大きさを画面幅の１％、移動の幅を左右に４９％ずつに設定して。ローカルの動作確認オッケー。それをHerokuにアップ。できました！

ボールが左右に動きます。
http://appdays.herokuapp.com/Day12/

```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>ボールが左右にうごきます</title>	
	<link rel="stylesheet" href="design.css">
  </head>

<div class="container">
  <div class="ball"></div>
</div>
```
```design.css
body {
    margin: 0;
    padding: 0;
    background: #000000;
}

.container {
    width: 100vw;
    height: 20vh;
    padding-top: 20vh;
    margin: 0 auto;
}

.ball {
    width: 1vw;
    height: 1vw;
    margin: 1vw auto;
    border-radius: 5vw;
}

.ball:nth-child(1) {
    background: #ffffff;
    -webkit-animation: right 5s infinite ease-in-out;
    -moz-animation: right 5s infinite ease-in-out;
    animation: right 5s infinite ease-in-out;
}

@keyframes right {
    0% {
        transform: translate(-49vw);
    }
    50% {
        transform: translate(49vw);
    }
    100% {
        transform: translate(-49vw);
    }
}
```
ちゃんと縦横ひっくり返してもサイズがきりかわります。レスポンシブ対応できました！

たしかに、左右に動く白丸をぼーっとながめながら、ムシャクシャした事を思い出してみると、なんだかどうでもよくなってきました。催眠術みたいなものでしょうか。

超しょぼいアプリですが、プログラミングって面白いな〜と思いました。
(所要時間 3時間)
【プログラミングコンテスト】c++メモ


プログラミングコンテスト（競技プログラミング）で必要なc++の知識、スニペット。

適宜書き足していく。c++14を想定。


### ひな形

```c++
#include <bits/stdc++.h>
using namespace std;

int main() {
  // 実装
}
```


### I/O

```c++
// input
int N, T;
cin >> N >> T;

// output
cout << "a" << endl;

printf("%d %d %d %d\n", x1, y2, x3, y4);
```

### データ型
string

```c++
string s = "abcde";

// 先頭および末尾の取得
s.front(); // "a"
s.back(); // "e"

// 回転
s.substr(1) + s[0] // "bcdea"
s.back() + s.substr(0, s.length() - 1) // "eabcd"
```

char

```c++
// 大文字小文字の判定
'a'.isupper()
'a'.islower()
```


配列

```c++
// 宣言
int a[10];
```

vector

```c++
vector<int> c(10);
for (int i = 0; i < 10; i++) {
    c[i] = i;
}

int min = *min_element(c.begin(), c.end());
int max = *max_element(c.begin(), c.end());

// 初期値を指定
vector<bool> v1(10, true);
```

set

```c++
set<int> s;

s.insert(1);
s.length();
```


### その他
大きな数

```c++
// 2 ** 30
int x = 1 << 30;

// 1 * (10 ** 9)
int x = 1e9;

// 定数（？）を宣言
// usingの下あたりに書く
const int inf{int(1e9)}
// それを使う
int ans{inf};
```

char -> int

```c++
char c = '5';
int i = c - '0';
cout << i << endl;
```

各桁の合計を足し合わせる。

```c++
int f(int n) {
  if (n < 10) {
    return n;
  }
  return n % 10 + f(n/10);
}
```

10で割り切れる回数

```c++
int f(int x) {
  if (x % 10 != 0) return 0;
  return f(x / 10) + 1;
}
```

aからzまでをループで探索

```c++
for (char c = 'a'; c < 'z'; c++) {
    // implement
}
```


vectorを引数にとる関数

```c++

bool method(vector<int>& a) {
  return true;
}
```
モンティ・ホール問題が納得いかなかったので、モンテカルロシミュレーションしてみた（３）

# 更に続き

[モンティ・ホール問題が納得いかなかったので、モンテカルロシミュレーションしてみた](https://qiita.com/g667408/items/1a70cb4b66cc28ce1562)
[モンティ・ホール問題が納得いかなかったので、モンテカルロシミュレーションしてみた（２）]
(https://qiita.com/g667408/items/69d4638d395e953af606)

montyがどのドアに賞品が入っているかを知らなかった場合には、ドアを変更しても確率は変わらないなかった。
それでもやはり納得がいかない。
じゃあ、参加者とmontyがドアを選んでから、その後に賞品のあるドアが決まったらどうなるのだろうか？

#早速、試した。

```python
import random
import sys

#引数
try:
    n = int(sys.argv[1])
except:
    n = 1000 #引数が無い場合は1000回に

#賞を得るのに、成功すると1、失敗すると0を返す
#changeドアを変更するか
#True:変更する
#False:変更しない
def monty(change):
    #参加者がドアを選ぶ
    select = random.randint(0,2)

    #続いてmontyがドアを選ぶ
    while True:
        monty_select = random.randint(0,2)
        if monty_select != select:#参加者が選ばなかったドアを選ぶ
            break            
    #montyが選ばなかったドアのどちらかに賞品を配置する。
    while True:
        prize = random.randint(0,2)
        if monty_select != prize:
            break            
    
    if change:#ドアを変更する場合
        while True:
            select_change = random.randint(0,2)
            if monty_select != select_change:
                select = select_change
                break
    if select == prize:#賞を得られたら1を返す
        return 1
    return 0#賞が得られなければ0を返す

change = 0
nochange = 0
for i in range(n):#指定回数を繰り返す
    change += monty(change = True)
    nochange += monty(change = False)

#結果の表示
print("turn",n)
print("change  ",change)
print("nochange", nochange)
```
# 実行結果
参加者が選ぶドアを変えても変えなくても、参加者が賞品をもらえる確率はほぼ同じ50%になりました。

```
turn 1000
change   527
nochange 492
turn 1000
change   514
nochange 515
turn 1000
change   502
nochange 505
```

やっぱりmontyが賞品のドアを知っているかどうかが、問題の鍵になるんですね。
うーん。難しい。。。
[Python] numpy配列のインデックスをピンポイントで指定する場合はタプルを使う

## やりたいこと
 - 3次元のnumpy配列のある1要素だけを書き換えたい。

(イメージ)

```python:python3
import numpy as np
a = np.zeros([3, 3, 3])
a[idx] = 1
a
```

```python:output

array([[[0., 0., 0.],
        [0., 0., 0.],
        [0., 0., 0.]],

       [[0., 0., 0.],
        [0., 1., 0.],
        [0., 0., 0.]],

       [[0., 0., 0.],
        [0., 0., 0.],
        [0., 0., 0.]]])
```


## やったこと

#### numpy.arrayによる指定

```python
idx = np.array([1, 1, 1])
a[idx] = 1
a
```

```python:output

array([[[0., 0., 0.],
        [0., 0., 0.],
        [0., 0., 0.]],

       [[1., 1., 1.],
        [1., 1., 1.],
        [1., 1., 1.]],

       [[0., 0., 0.],
        [0., 0., 0.],
        [0., 0., 0.]]])
```

意図せず全て書き換わる。

#### リストによる指定

```python
idx = [1, 1, 1]
a[idx] = 1
```

```python:output

array([[[0., 0., 0.],
        [0., 0., 0.],
        [0., 0., 0.]],

       [[1., 1., 1.],
        [1., 1., 1.],
        [1., 1., 1.]],

       [[0., 0., 0.],
        [0., 0., 0.],
        [0., 0., 0.]]])
```

arrayでの指定と同じ。



#### タプルによる指定

```python
idx = (1, 1, 1)
a[idx] = 1
a
```

```python:output

array([[[0., 0., 0.],
        [0., 0., 0.],
        [0., 0., 0.]],

       [[0., 0., 0.],
        [0., 1., 0.],
        [0., 0., 0.]],

       [[0., 0., 0.],
        [0., 0., 0.],
        [0., 0., 0.]]])
```

できた。


## ファンシーインデックスについて
numpyはインデックスのリストによって行や列を指定する、ファンシーインデックスという仕組みがある。
リストを利用してインデックスを指定することで複数行・列を同時に抽出することができる。

実際、

```python
idx = [1, 1, 1]
a[idx] = 1
```

という操作はaの1行目を3回指定しているだけなので、

```python

idx = [1]
a[idx] = 1
```
と等価の操作、というか無駄に何回も指定していることになる。

0行目と1行目を一気に書き換える場合は、

```python
idx = [0, 1]
a[idx] = 1
```
とすれば

```python:output

array([[[1., 1., 1.],
        [1., 1., 1.],
        [1., 1., 1.]],

       [[1., 1., 1.],
        [1., 1., 1.],
        [1., 1., 1.]],

       [[0., 0., 0.],
        [0., 0., 0.],
        [0., 0., 0.]]])
```
となる。

挙動をよく確認もせずプチハマりしたので、自分への戒めと備忘録です…。
UITableViewCellにUIViewControllerを入れた場合のライフサイクル(MicroViewController,Mew)

[Mew](https://github.com/mercari/Mew)などを用いてMicroViewControllerの設計思想でUITableViewを使った場合、Cellの中にはUIViewControllerを入れることになるかと思います。
そのUIViewContollerにおいて `UIViewController.viewDidLoad()` などのライフサイクルはどのようになるかを確かめてみました。

以下、サンプルコードです。ライフサイクルのイベントにprint文を仕込み、実際に動かしてみて確認していきます。

```swift

final class TableViewCellViewController: UIViewController { 
    @IBOutlet var tableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
        print("Notifies: viewDidLoad")
    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        print("Notifies: viewWillAppear")
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        print("Notifies: viewDidAppear")
    }

    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        print("Notifies: viewWillDisappear")
    }

    override func viewDidDisappear(_ animated: Bool) {
        super.viewDidDisappear(animated)
        print("Notifies: viewDidDisappear")
    }

```

## 初回の画面表示時

```
Notifies: viewDidLoad
Notifies: viewWillAppear
Notifies: viewDidLoad
Notifies: viewWillAppear
Notifies: viewDidLoad
Notifies: viewWillAppear
Notifies: viewDidLoad
Notifies: viewWillAppear
Notifies: viewDidAppear
Notifies: viewDidAppear
Notifies: viewDidAppear
Notifies: viewDidAppear
```

TableView領域に応じて必要な分のCellが生成され、各TableViewCellViewControllerが viewDidLoad, viewWillAppear, viewDidAppearの順でライフサイクルイベントが呼び出されています。


## TabelViewのスクロール時

**特にViewControllerのイベントは発火しないです。**
画面から消える/表示されるタイミングでdisapper/appearなど呼び出されるかなと勘違いしそうです。しかしTableViewのCellは初回表示時に生成したセルを再利用するので、そのようなことはないです。



## 別画面へ遷移時

```
Notifies: viewWillDisappear
Notifies: viewWillDisappear
Notifies: viewWillDisappear
Notifies: viewWillDisappear
Notifies: viewDidDisappear
Notifies: viewDidDisappear
Notifies: viewDidDisappear
Notifies: viewDidDisappear
```

各TableViewCellViewControllerが viewWillDisappear, viewDidDisappearの順でライフサイクルイベントが呼び出されています。


## 別画面から戻って来た時(再表示時)

```
Notifies: viewWillAppear
Notifies: viewWillAppear
Notifies: viewWillAppear
Notifies: viewWillAppear
Notifies: viewDidAppear
Notifies: viewDidAppear
Notifies: viewDidAppear
Notifies: viewDidAppear
```

初回表示時とは違い、Cellは生成済みなので、viewDidLoadは呼び出されずviewWillAppear -> viewDidAppearの順でライフサイクルイベントが呼び出されています。

## まとめ

UITableViewCellにUIViewControllerを入れた場合においても、概ね期待通りに各UIViewControllerのライフサイクルは呼び出されていたかと思います。
MicroViewControllerを安心して取り入れることができそうです。
[学習用]ubuntu 14 →16 アップグレード手順

#Ubuntuをインストールしてない場合は
```
$ mkdir ubuntu
$ cd ubuntu
$ vagrant init ubuntu/trusty64
$ vagrant up
```
先にインストールしておく。
公式：https://app.vagrantup.com/ubuntu

#簡単コマンド
```
$ sudo apt-get update
$ sudo apt-get upgrade
$ sudo apt-get install update-manager-core
$ lsb_release -d
$ sudo do-release-upgrade
Continue [yN] y
To continue please press [ENTER]
Continue [yN] y
```
あとは勝手にインストールを始めます。
途中YesNo聞かれるので、退席しない様に。


#Heroku使うとき入れるやつ
```
$ sudo snap install heroku --classic
```
Heroku　のコマンド使うときに　Ubuntu16 以上必要。
PHP とComposer は先に入れておく。