OmniAICreator/Qiita-1.07M huggingface dataset:
ネットカフェでPeerCastを視聴する。

PeerCastは、ポート開放が必須のソフトウェアです。
このページは、普段家でピアキャスを見てて、外出先でも見たいなーって人向けです。

##環境について
パソコンからの閲覧を想定していますが、スマホでも見れると思います。
今回説明するのはクライアント側がWindowsの環境です。
ソフトウェアはPeerCast IMかPeerCastStationとします。

##用意するもの

- 家のパソコン
外に出る前に電源を入れておいてください。

- ネットカフェのパソコン
好き勝手にポート開放ができないパソコンです。
外出先の公衆Wi-Fiでもできると思います。
YouTubeとかが流行しているこのご時勢であれば大丈夫かもしれませんが、あまり過度な多重視聴は控えましょう。

- [ngrok](https://ngrok.com/)
今回の目玉です。

##手順

#### 家のパソコン
 
1. ngrokのアカウントを作成
右上の **SIGN UP→** からアカウントを登録します。

2. ngrokプログラムのダウンロード
ログイン後の画面の**①Download ngrok**のDownload for Windowsからダウンロードします。
ファイル名は ngrok-stable-windows-amd64.zip

3. ngrokの起動
コマンドプロンプトを起動して、CUIで起動しましょう。
![01.png](https://qiita-image-store.s3.amazonaws.com/0/141156/b2ab3a70-ec70-cdec-9b11-50aea9341b2a.png)

さっそく上記の状態でエンターを押すとヘルプが出てきます。

```ngrok
NAME:
   ngrok - tunnel local ports to public URLs and inspect traffic

（中略）

VERSION:
   2.2.8

（以下略）
```
上記が出ていれば正常に動いています。
次のステップに進みましょう。


- ngrokプログラムからアカウントの認証をします。

ここをコピーして
![キャプチ3.PNG](https://qiita-image-store.s3.amazonaws.com/0/141156/7e7a388b-5ecf-ec4c-d594-5957934bc9c6.png)

貼り付ける。 ngrok.exe authtoken XXXXXXXXXXXXXXXXXXX 。
![キャプチャ5.PNG](https://qiita-image-store.s3.amazonaws.com/0/141156/4b6269b6-2814-d175-9d84-bc5135814d61.png)
↑正常に認証できると、ユーザーフォルダ上に設定ファイルのディレクトリが出来ます。
(Authtoken saved ～～)

- 上記終了後に、***ngrok tcp 7144***します。
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/141156/96b8062a-8070-601a-b3d2-ed3153261972.png)

以上が家での手順です。


#### ネットカフェ
1. ngrokにログインする

![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/141156/b24b20cd-ca41-d9ce-1fad-049d6cc134d7.png)
2. 頭のtcpをhttpにかえて、https ://0.tcpip.ngrok:xxxxx にアクセス。

![02.png](https://qiita-image-store.s3.amazonaws.com/0/141156/f633031e-d7ca-ed39-c849-f9cb97a3a343.png)

接続できました。
STでもIMでも動作確認は一応できました。

あとはブラウザのYellowPageの再生ボタンを押すといいと思います。

##補足
- PCYPLiteとかPeCaRecorderを持っていく場合

PeerCastのアドレスを変えれば動作するはずです。
PCYPLiteなら、各YPのHost(H)の値をホスト名にするとか。
![pecareco.PNG](https://qiita-image-store.s3.amazonaws.com/0/141156/ba91799d-c94b-94b7-ee74-c0e223797d81.png)

- 当然ですが家からネットカフェの分の帯域を使うことになります。家回線が極端に細くて下流リレー分の帯域が確保できない場合はやめましょう。

- このサービスが出るまでは家にLinuxのサーバーやら外部にVPS借りてSSH転送でまかなっていましたが、家にサーバーだと、IPアドレスが変わるとだめだからDDNSを利用したり、めんどくさかった。この記事もどちらかというとPeerCastというより、ngrokの紹介がメインになっちゃってます。

- 別にこんなことしなくてもスマホ単体で見れるじゃん。
はい。その通りです。

- このngrokのサービスってもともとファイヤーウォールのインバウンドがブロックされているサーバーとか、開発中のwebページを一時的に外部に公開するとかが目的なんじゃないかなって思うんですが、まあ利用規約確認したけど特に今の所禁止されていません。これは今後どうなるかはわかりません。
CocoaPods でライブラリを導入したら linker command failed with exit code 1 (use -v to see invocation)。

Swiftの開発にアサインされることが決まったので、試しにXcodeを触っていたら、CocoaPodsでひっかかったのでメモ
# 問題
CocoaPodsでライブラリ、今回は
https://github.com/danielgindi/Charts
をインストールしてbuildしようとしたら、次のようなエラーがでた。

```
linker command failed with exit code 1 (use -v to see invocation)
```

# 対象方法
.xcodeproj ファイルではなく、 .xcworkspace を開くと問題なくbuildできるようになる模様。

finder から ApplicationName.xworkspace を開いてbuild したらできました。


# 参考リンク
* https://stackoverflow.com/questions/35236475/cocoapods-error-linker-command-failed-with-exit-code-1-use-v-to-see-invocatio
jsdoでmatter

#概要
jsdoでmatterやってみた。
エレベーター作ってみた。

#写真

![](http://jsdo-static-contents.s3.amazonaws.com/images/capture/Q/7/D/Q7DX.jpg?t=1540988964)

#サンプルコード

```
var Engine = Matter.Engine,
        Render = Matter.Render,
        Runner = Matter.Runner,
        Body = Matter.Body,
        Events = Matter.Events,
        MouseConstraint = Matter.MouseConstraint,
        Mouse = Matter.Mouse,
        World = Matter.World,
        Bodies = Matter.Bodies;
    var engine = Engine.create(),
        world = engine.world;
    var render = Render.create({
        element: document.body,
        engine: engine,
        options: {
            width: 450,
            height: 450,
            showAxes: true,
            showCollisions: true,
            showConvexHulls: true
        }
    });
    Render.run(render);
    var runner = Runner.create();
    Runner.run(runner, engine);
    var bodyA = Bodies.rectangle(340, 200, 100, 10, {
        isStatic: true 
    });
    var c0 = Bodies.circle(60, 50, 15);
    var c1 = Bodies.circle(100, 50, 15);
    var c2 = Bodies.circle(140, 50, 15);

    var d0 = Bodies.rectangle(220, 200, 200, 10, {
        isStatic: true, 
        angle: -Math.PI * 0.06
    });
    var d1 = Bodies.rectangle(180, 400, 300, 10, {
        isStatic: true, 
        angle: Math.PI * 0.06
    });

    World.add(world, [bodyA, c0, c1, c2, d0, d1]);
    World.add(world, [
        Bodies.rectangle(225, 10, 450, 10, {
            isStatic: true
        }),
        Bodies.rectangle(10, 225, 10, 450, { 
            isStatic: true
        }),
        Bodies.rectangle(440, 225, 10, 450, {
            isStatic: true
        }),
        Bodies.rectangle(225, 440, 450, 10, { 
            isStatic: true
        })
    ]);
    var py = 450;
    var pa = 0;        
    Events.on(engine, 'beforeUpdate', function(event) {
        py--;
        if (py < 150)
        {
            pa = 0.1;
        }
        if (py < 0)
        {
            py = 450;
            pa = 0;
        }
        Body.setPosition(bodyA, {
            x: 380,
            y: py
        });
        Body.setAngle(bodyA, -Math.PI * pa);
    });
    Render.lookAt(render, {
        min: {
            x: 0,
            y: 0 
        },
        max: { 
            x: 450,
            y: 450
        }
    });



```

#成果物

http://jsdo.it/ohisama1/Q7DX

以上。
TeXStudioでpackageのinstallができなくなった話（未解決）

# 問題
TeXStudioでコンパイルしたら，cite.styがないというエラーがでたので，パッケージをインストールしようとした．
MiKTeXをつかってインストールをするダイアログは出るものの，何度やってもインストールが完了している様子はなく，同じエラーの繰り返しとなる．
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/305660/57d9efee-3c27-f255-4412-052b2cf3d9de.png)


### 環境
- OS: Windows10
- TeXStudio: 2.12.10
- MiKTeX Package Maneger: 2.9.5700


# 試したこと
- 1) MiKTeX Package Manegerを起動してのインストール（失敗）
- 2) MiKTeXのUpdate（失敗）
- 3) ファイアウォールの解除　（失敗）
- 4) TeXStudioの再インストール（失敗）
- 5) cite.styのをCTANからダウンロードしておいてローカルからインストール（途中）

ネットの情報からポチポチしてLatexとTeXStudioをインストールをしただけの僕には少しハードルが高かったが，とりあえず原因を探ってみることにした．

### 1) MiKTeX Package Manegerを起動してのインストール
TeXStudioからPackageのインストールをするダイアログでPackageを持ってくる先の設定を変えてみようと思い，とりあえずInternetから探してくるオプションを選んで実行すると以下のようなエラーがきた．

![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/305660/78c1bdad-220e-1f5d-f776-c0dd638eeab4.png)

なんだかよく分からなかったが，とりあえずMiKTeXがなんかおかしいということが分かったので，少し調べるとMiKTeXはパッケージを管理してくれるソフトということが判明．
それならTeXStudioからではなくMiKTeXのみを独立で起動したらもっと色々いじれるかなと思って，実行ファイルを探してやってみた．
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/305660/71fee09e-4a36-3300-c627-b0c729914ddc.png)
MiKTeX Package Managerでciteを検索するとあるではないか，これをインストールすればいいんですよ．
選択してインストールをすると，先ほどと同じメッセージがまたでた．

### 2) MiKTeXのUpdate
MiKTeXが問題を抱えているに違いないと踏んで，とりあえず最新版にアプデできないかと考えた．
MiKTeX Updateというソフトもあるのでそれを実行してみると，また同じエラー．これはメッセージから類推するとMiKTeXからインターネットへの接続ができていないっぽい．

### 3) ファイアウォールの解除
- インターネットの接続ができていなさそうなこと
- 実はもう一台のPCのTeX環境ではGit cloneした同じTeXプロジェクトでありながら動いていること
- そのPCではSymantecのウィルスプロテクトが走っていないが，問題のPCでは走っていること

これらから，ファイアウォールで邪魔されているのかもと思い，プロテクトを一時的に解除してみた．結果的には問題は変わらず存在した．
後から分かったことだが，正しく動作しているPCではMiKTeXが走っている様子はなかった．別のPackage managerがあるのかもしれない．TeXの勉強不足．
ちなみに，プロキシのせいかとも考えたが，プロキシサーバを経由して接続しているわけではないので，関係ないはずだ．

### 4) TeXStudioの再インストール
ダメ元でやってみた．ダメでした．

### 5) cite.styのをCTANからダウンロードしておいてローカルからインストール
MiKTeXがネット接続できない問題が解決できないが，テンションが下がってきたので，とりあえずPDFの出力にはなんとかこぎつけたい．
ローカルにパッケージをブラウザからダウンロードしてくれば，あとはローカルでMiKTeXがインストールしてくれるだろうと思い，CTANからダウンロードしてみた．
（CTANも初めて知りましたが，Latexのパッケージがまとまっているところみたいですね）
MiKTeXのインストール元の設定をローカルにし，さきほどのパッケージの場所を指定するも，次のようなエラーで怒られた．
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/305660/42cf5dfb-89a1-412e-9c43-1c62d8fe2c44.png)
調べてみると，どうやら特定の設定ファイルがないとMiKTeXにはパッケージの入っているレポジトリとして認識されないようだった．
長い時間いじくり倒したがここで時間切れ．とりあえず動いている方のPCで作業して，また後で情報を集めてやってみよう．
php-master-changes 2018-10-31

今日は ext/xml のテストコードの改善、Windows での ftruncate() のバグ修正があった！

地味に [3 ヶ月](https://qiita.com/sj-i/items/8d716a389057d041623f)続いており、もう 3 ヶ月くらい続けると心の故郷で古くから言い伝えられてきた習わし通り「[半年 ROM](https://dic.nicovideo.jp/a/%E5%8D%8A%E5%B9%B4rom) れ」をやったことになる奴。

# 2018-10-31
## cmb69: Fix and improve test case
- https://github.com/php/php-src/commit/2816a3fdfa23cf0711251b8d1e9ffad3d281ea96
- [7.3~]
- ext/xml のテストコードをリファクタリング
- 誤った DOCTYPE 宣言を修正
- 最後の閉じタグの不一致がわざとであることのコメントでの明示
- EXPECT でマジックナンバーを使っているのが分かり辛かったので定数を使って明確化

## weltling: Fixed bug [#77081](https://bugs.php.net/bug.php?id=77081) ftruncate() changes seek pointer in c mode
- https://github.com/php/php-src/commit/8827cc34cf8c77828330182ee1e6d0b9438d489c
- [fopen()](http://php.net/manual/ja/function.fopen.php) で c を指定したファイルポインタに対して [ftruncate()](http://php.net/manual/ja/function.ftruncate.php) をかけると、シーク位置が変なところへいく問題の修正
- 元々 Windows 環境で ftruncate() が 2GB 以上のサイズのファイルで失敗する、という[別の問題](https://bugs.php.net/bug.php?id=76422)があった
- これを解決するため、（PHP 側の）ftruncate() で指定される終点へ [SetFilePointerEx()](https://msdn.microsoft.com/ja-jp/library/cc429791.aspx) でファイルポインタを移動して [SetEndOfFile()](https://msdn.microsoft.com/ja-jp/library/cc429774.aspx) をかける[修正](https://github.com/php/php-src/commit/9cd2d77514aa71359eac0ea080901e7c021681c9)が入った
- が、これにより ftruncate() 呼び出しでファイルポインタが移動してしまう新たな問題が生まれ、ファイルポインタの古い位置を覚えておいて復帰するよう[別の修正](https://qiita.com/sj-i/items/aa2ca386327c4ac23235#weltling-fixed-bug-76803-ftruncate-changes-file-pointer)が入った
- が、これが実際にはファイルポインタの古い位置でなく元々のサイズでのファイルの終端位置へ復帰するような挙動だったため、ちゃんと古いファイルポインタの位置へ復帰するよう修正

## weltling: Fix error condition
- https://github.com/php/php-src/commit/ee9d879f57258e1a0c8946c1eec70d20587d314b
- [7.3~]
- ↑のあたりのエラー判定を修正、SetFilePointerEx() は返値 BOOL となってる
ずんだのハロウィン問題 awkワンライナー編

[ずんだのハロウィン問題 Ruby編](https://qiita.com/tbpgr/items/1f2ed0e14e5d94775963) 
[ずんだのハロウィン問題 Go編](https://qiita.com/yukpiz/items/a4443727d011e2f5a495)  

# ルール
* 入力として "trick", "treat", "sushi", "poyayou", "tamakatsu" がランダムに与えられる
* 入力をそのまま標準出力する
* 入力が "trick" または "treat" だったら "happy halloween" と標準出力する
* 入力が "trick" または "treat" ではなかったら "sleepy" と標準出力する

# プログラム
* sort -Rが使える環境  

```bash
echo -e "trick\ntreat\nsushi\npoyayou\ntamakatsu\n" | sort -R | awk '{printf "%s\n", match($0, /trick|treat/) ? "happy halloween" : "sleepy"}'
```
* sort -Rが使えない環境(bash)  

```bash
echo -e "trick\ntreat\nsushi\npoyayou\ntamakatsu\n" | while read x; do echo -e "$RANDOM\t$x"; done | sort -k1,1n | cut -f 2- | awk '{printf "%s\n", match($0, /trick|treat/) ? "happy halloween" : "sleepy"}'
```
#出力例
```bash
sleepy
sleepy
sleepy
happy halloween
happy halloween
sleepy
```
[ずんだ問題まとめ - Qiita](https://qiita.com/tbpgr/items/3a4169b370f1a317ece0)
つるっと入るLaravel Debugbar（Laravel5.5以降）

インストールがサッと終わりとても便利だったので、実践記録として残したいと思います:relaxed:

#### step1 composerを使いlaravel-debugbarをインストール

```
composer require barryvdh/laravel-debugbar
```

#### point
Laravel5.5以前は、読み込むServiceProviderやFacadeをconfig/app.phpに記述する必要がありました。
こちらのライブラリはLaravel5.5から導入されたAuto Discavaryに対応しているため、記述する必要がなくなりました。

#### step2 デバッグバーの設定ファイルを生成

```
php artisan vendor:publish --provider="Barryvdh\Debugbar\ServiceProvider"
```

#### step3 .envにデバッグバーを有効化するコードを追加

詳しくは、step2で生成した設定ファイルで定義されています。

```php:.env
DEBUGBAR_ENABLED=true
```

#### step4 composerの読み直し

```
composer dump-autoload
```

#### step5 config等のキャッシュをクリア
`&&`  で繋いで複数のコマンドを書くと、前のコマンドの実行後に次のコマンドを順番に実行してくれるので、とても便利です！:relaxed:

```
php artisan cache:clear && php artisan config:clear
```

#### step6 ビルトインサーバーを起動

今回は開発環境でDebugbarを使用したいので、ビルトインサーバーを起動します。

```
php artisan serve --host 0.0.0.0 --port=80
```

#### step7 デバッグバーの表示を確認

ブラウザのウィンドウ下部に、デバッグバーが表示されます！
![sample1.png](https://qiita-image-store.s3.amazonaws.com/0/202493/a3a202c9-bbd2-4190-39d3-6f42460af568.png)

葉っぱのマークをクリックすると、そのページで呼んでいるbladeテンプレートがわかります。
![sample2.png](https://qiita-image-store.s3.amazonaws.com/0/202493/12a97869-a12c-7643-36d5-7622b1718af0.png)

この他にも、
矢印のマークをクリックすると、ルーティング関連の情報がブラウザ上で確認できたり
![sample3.png](https://qiita-image-store.s3.amazonaws.com/0/202493/8e1e2e3b-2913-cfa1-28b3-0ef4b61f7cff.png)


クエリを発行している場合はSQL文がそのまま表示されます:relaxed:


#### 番外

ルーティングの設定次第ではDebugbarのjsとcssがうまく読み込まれず、表示されないこともあるようです。
今回はログイン画面のみDebugbarが表示され、ログインされるとDebugbarが表示されないという残念な結果に...。
使えるように試行錯誤していきます:muscle_tone1:
GAE/Java8試行（その5：「ローカル開発用コンソール」）

# お題
[前回](https://qiita.com/sky0621/items/c150f6e66320e240add8)は、Datastoreへのアクセスロジックをテストファーストで実装した。
今回は、ローカルでGAEアプリを起動して動作確認する方法について、さらっと書く。

# GAE試行Index
- [GAE/Java8試行（その0：「App Engineについて」）](https://qiita.com/sky0621/items/6175d578d0521858a944)
- [GAE/Java8試行（その1：「Java8でWebアプリ作ってデプロイ」）](https://qiita.com/sky0621/items/8437da4e96bffef69250)
- [GAE/Java8試行（その2：「Javaアプリ解説」）](https://qiita.com/sky0621/items/65ce0406fb895f547ae5)
- [GAE/Java8試行（その3：「Javaアプリテストコード解説」）](https://qiita.com/sky0621/items/874c8b6462fdc5a0829d)
- [GAE/Java8試行（その4：「Datastoreへのアクセスロジック」）](https://qiita.com/sky0621/items/c150f6e66320e240add8)

# 開発環境
### # OS
```
$ cat /etc/os-release 
NAME="Ubuntu"
VERSION="17.10 (Artful Aardvark)"
```

### # Java
```
$ java -version
java version "1.8.0_181"
Java(TM) SE Runtime Environment (build 1.8.0_181-b13)
Java HotSpot(TM) 64-Bit Server VM (build 25.181-b13, mixed mode)
```
### # IDE
みんな大好き[IntelliJ IDEA](https://www.jetbrains.com/idea/)

# 参考
- [Java ローカル開発用サーバーの使用](https://cloud.google.com/appengine/docs/standard/java/tools/using-local-server?hl=ja#development-console)

# 実践
前回書いたソースをちょっと修正。

```java
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
	String id = req.getParameter("id");
	String name = req.getParameter("name");

	DatastoreService ds = DatastoreServiceFactory.getDatastoreService();
	Entity e = new Entity(KeyFactory.createKey("book", Integer.parseInt(id)));
	e.setProperty("bookName", name);
	ds.put(e);
}
```

まずはローカル開発用サーバーを起動。これは、[以前書いた記事](https://qiita.com/sky0621/items/8437da4e96bffef69250)の通り。

```
$ mvn appengine:run
```

PostmanでPOSTして確認。

![Screenshot from 2018-11-01 01-56-44.png](https://qiita-image-store.s3.amazonaws.com/0/180599/19f058a9-6b84-3a06-fe38-5318fb8160ad.png)

リクエストパラメータをDatastoreに登録するロジックであるものの、レスポンスを特に返さないので正常に処理されたか不明。
こんな時は（こんな時に限らないか・・・）、ローカル開発用コンソールを使う。

`http://localhost:8080/_ah/admin`
ここにアクセス。
すると、こんな画面が表示される。これが「ローカル開発用コンソール」。

![Screenshot from 2018-11-01 02-11-17.png](https://qiita-image-store.s3.amazonaws.com/0/180599/be0cc291-ad06-cb5c-fa3e-731b3c45406e.png)

そして、「List Entries」押下すると、Postmanでリクエストパラメータに積んだ内容がDatastoreに登録されていることがわかる。
※残念ながら”参照”のみで、値の編集はできない。

![Screenshot from 2018-11-01 02-13-31.png](https://qiita-image-store.s3.amazonaws.com/0/180599/21e62f0d-5974-10e8-60a3-5543350ab97a.png)

# まとめ
DatastoreだけでなくTaskキューの状態も見れる。また、Datastore、Memcache、Taskキューといったリソースへのアクセス可否の制御もできる。これは、便利。
![Screenshot from 2018-11-01 02-20-37.png](https://qiita-image-store.s3.amazonaws.com/0/180599/50915d29-1169-9fec-1a88-b9369c8fa535.png)
![Screenshot from 2018-11-01 02-21-46.png](https://qiita-image-store.s3.amazonaws.com/0/180599/2d106da8-99f4-2f94-5dea-84818a84e0e0.png)
macportsの久しぶりのupdate(macバージョンアップ後、portが動かなくなった場合)

```
Error: Current platform "darwin 17" does not match expected platform "darwin 13"
Error: If you upgraded your OS, please follow the migration instructions: https://trac.macports.org/wiki/Migration
OS platform mismatch
    while executing
"mportinit ui_options global_options global_variations"
Error: /opt/local/bin/port: Failed to initialize MacPorts, OS platform mismatch
```

macの容量がきつくなってきたので、いらないものを削除しようとしていたら
portが動かなくなっていた。

macのバージョンを上げていたから…。である。

ということで

https://www.macports.org/install.php

こちらから適当なバージョンの物を落としてinstall。

ついでに。

```
sudo vi /opt/local/etc/macports/sources.conf
```

こちらを開いて、一番したの行を書き換える。

```
rsync://rsync.macports.org/release/tarballs/ports.tar [default]

```
HUEアプリとApple HomeKitを使い分ける

# 基本はHUEアプリで設定
### AppleHomekitアプリでは見えないデバイス多数
- HUEブリッジの方が登録可能なランプ製品多い
- ランプ照度の制御しかできない
- HUEブリッジ任せた方が照度の他に照明色、フェイドアウト時間など微調整可能
- 命令系統は HomeKit→HUEブリッジ→ランプとなる

#### 設定のキモは「エンターテイメント エリア調整」

- デフォルトでは、「HUEブリッジからの距離」で反応しないランプが出る
- 全ライトを「エンターテイメント エリア」として設定する
	- ブリッジから各ライトへの命令に対して電波強度を自動調整
	- 全ライトが同期動作するように
	- 以後の通常コマンドもスムーズに届くように
	
<img width="1024" alt="DCB7B558-E1C6-4068-99FA-D18C99948C98.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/111758/66b5b27e-327c-9010-31e6-222edd97e384.jpeg">
<img width="1024" alt="5130C870-4EA5-40B1-9B14-2E8F518A7836.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/111758/dd90123b-c321-8dec-1ddd-a89da8e5aba1.jpeg">
![9DBC12AB-8D77-4433-8C67-75634ECFA7F7.png](https://qiita-image-store.s3.amazonaws.com/0/111758/d5e919fb-9074-8c45-b398-8a6262589f9e.png)


# IKEAスマートLED電球TRÅDFRIは HUE登録が吉
- 日本でもTRÅDFRIブリッジが発売！でもリモコン必要。費用高い。
- 細かい制御はHUEアプリの方が洗練


#### 格安HUEライト IKEAスマート電球TRÅDFRI
- 格安HUE互換ライト 「TRÅDFRI」
- 照度だけでなく実は色温度調整も可能
- HUEブリッジへのZegbee登録が可能
	- [KEAに売っているスマートLED電球「TRÅDFRI」もPHILIPSのHUEブリッジで管理ができる](https://kimoba.com/spend/hue-bridge-to-ikea-tradfri.html)
	- ライト名は後でHUEアプリから変更可能

# Koogeekの制御はAppleHomekitアプリから
- KoogeekデバイスはHUEから見えない
- 制御パスは以下の通り

　　　HomeKit━━┳━━HUEブリッジ━━┳━━ HUEランプ
　　　　　　　　　┃　　　　　　　　　　  ┗━━ TRÅDFRIランプ
　　　　　　　　　┗━━━━━━━━━━━━━ Koogeekデバイス
描画が爆速なターミナル。Alacrittyを導入してみる

# Alacrittyさいつよ
Alacrittyとは、GPUで動作させている事により
描画がとても高速なターミナルです。

描画が早いのは勿論、ファイル一つで設定を管理出来ることや
日本語対応もしている所が素晴らしい所になります。

※環境はubuntuを想定しています。

## Rustをインストール
```
sudo curl https://sh.rustup.rs -sSf | sh
```

## cargoをインストール

```
cargo install cargo-deb
```


## 依存関係のあるものを入れる

```shell
apt-get install cmake libfreetype6-dev libfontconfig1-dev xclip
```
## alacrittyを入れる  

```shell
git clone https://github.com/jwilm/alacritty.git
cd alacritty
cargo build --release
```

## コピーしてコマンドとアプリケーションで認識するようにする  

```shell
sudo cp trget/release/alacritty /usr/local/bin
sudo cp alacritty.desktop ~/.local/share/applications
```

## shellで補完が効くようにする  

```shell
--------- On Bash Shell ---------
sudo cp alacritty-completions.bash  ~/.alacritty
echo "source ~/.alacritty" >> ~/.bashrc

--------- On ZSH Shell ---------
sudo cp alacritty-completions.zsh /usr/share/zsh/functions/Completion/X/_alacritty

--------- On FISH Shell ---------
sudo cp alacritty-completions.fish /usr/share/fish/vendor_completions.d/alacritty.fish
```

## デフォルトのシェルに変更する

```shell
gsettings set org.gnome.desktop.default-applications.terminal exec /usr/local/bin/alacritty 
gsettings set org.gnome.desktop.default-applications.terminal exec-arg "-x"
```

・引用元
[Alacritty – A Fastest Terminal Emulator for Linux](https://www.tecmint.com/alacritty-fastest-terminal-emulator-for-linux/)
ScalaでFactoryパターンのような実装をした時のメモ

## 概要
Scalaでデザインパターンの「Factoryパターン」のような実装をした時のメモです。簡単なサンプルコードをのせています。なお、Factoryパターンについては@shoheiyokoyamaさんの[デザインパターン「Factory Method」](https://qiita.com/shoheiyokoyama/items/d752834a6a2e208b90ca)に分かりやすくまとめられています。

## サンプルコード
都道府県を抽象クラスとし、埼玉県と神奈川県をサブクラスとして都道府県名を返すだけのサンプルです。

```FactoryObject.scala
object FactoryObject {
  // インスタンスを取得
  def getInstance(indicator: String):Todoufuken = {
    getTodoufukenOpt(indicator) match {
      case Some(todoufuken) => todoufuken
      case _ => null
    }
  }
  
  // 都道府県のリストから識別子でインスタンスを取得
  def getTodoufukenOpt(indicator:String):Option[Todoufuken] = {
    todoufukenList.find(_.indicator == indicator)
  }
  
  val todoufukenList = List(Saitamaken(), Kanagawaken())
  
  // 都道府県の抽象クラス
  abstract class Todoufuken{
    val indicator: String
    def getName(): String
  }
  
  case class Saitamaken() extends Todoufuken {
    val indicator ="saitama"
    def getName(): String = {
      "埼玉県"
    }
  }
  
  case class Kanagawaken() extends Todoufuken {
    val indicator ="kanagawa"
    def getName(): String = {
      "神奈川県"
    }
  }

}
```
「saitama」でインスタンス生成する場合は「埼玉県」と出力されます。

```
// 埼玉県のインスタンス
val  todoufukenTest1 = FactoryObject.getInstance("saitama")
println(todoufukenTest1.getName())
```
「kanagawa」でインスタンス生成する場合は「神奈川県」と出力されます。

```
// 神奈川県のインスタンス
val  todoufukenTest2 = FactoryObject.getInstance("kanagawa")
println(todoufukenTest2.getName())
```
【Node.js/Express】npm installしたモジュールをクライアントに静的ファイルとして読みこませる

# 【Node.js/Express】npm installしたモジュールをクライアントに静的ファイルとして読みこませる

## はじめに

Node.js/Expressで開発していると、npmを利用してモジュールをインストールすることがあります。
そのインストールしたモジュールをクライアント側でも利用する方法を、メモ代わりに記しておきます。

## 環境

* Node.js v8.11.3
* Express 4.16.0

* Express-generatorを用いてスケルトンを作成

## 構成

```txt
myapp
├─app.js
├─node_modules
│  └─jquery
│    └─dist
│        └jquery.js
├─public
├─routes
└─views
```

## やり方

今回はjQueryを利用して説明します。

まず下記の記述をサーバー側の`app.js`に追加します。

```javascript
app.use("/jquery", express.static(__dirname + "/node_modules/jquery/dist/"));
```

その後、クライアント側のHTMLファイルに下記の記述を追加してください。

```html
<script src="/jquery/jquery.js"></script>
```

以上です。

これだけで、クライアント側からサーバー側のモジュールを利用できます。  
とても簡単ですね。

## 何をしているのか

「`/jquery`にアクセスがあった場合、`(app.jsのカレントディレクトリ)/node_modules/jquery/dist/`を見てね！」  
という意味になります。

つまり今回の例の`/jquery/jquery.js`の場合、`/node_modules/jquery/dist/jquery.js`にルーティングされています。

また、

```javascript
app.use(express.static(__dirname));
```

と書いてやることで

```html
<script src="node_modules/jquery/dist/jquery.js"></script>
```

と記述すれば、同様にjquery.jsを読みこむことができます。

(可能ではあるものの、app.jsのカレントディレクトリが静的ディレクトリのマウントパスとして登録されるので、やめたほうがいい気がしますね。)

## さいごに

「jQueryとかBootstrapはCDNを利用して読みこめばいいんですよ。」と習ったのですが、いつの間にやら`npm install`を利用するのがずいぶんと一般的になっているようです。jQueryでは一番最初にnpmを利用したダウンロード方法が紹介されています。

もっとイケてる方法があるぜ！という場合はコメントいただけますと幸いです。
node-configを使って環境変数を読み込む方法

dockerでNode.jsのアプリを動かす際、同じイメージを使いたいけど開発環境や本番環境などで連携システムのIDやURLが異なったりする、またはイメージを作成した後にこれらの値を変更したいことがありますよね。
解決策の一つとして、node-configのcustom environment variablesを使う方法があります。

## custom environment variablesとは

node-configといえば、一般的な使い方は`NODE_ENV=development`などを指定して、`config/development.json`などを呼び出して使うことではないでしょうか。

custom environment variablesは、`config/custom-environment-variables.json`に左辺に変数値、右辺に環境変数名と指定しておけば、実行時に環境変数が存在する場合はそちらを優先的に読み込むものとなっています。

custom-environment-variables.jsonの例

```json
{
    "url" : "URL",
    "account" : {
         "name" : "ACCOUNT_NAME",
         "pass" : "ACCOUNT_PASS",
         "code" : "ACCOUNT_CODE "
    }
}
```

custom-environment-variablesで指定した変数が別のconfigのjsonで同じように定義されていたとしても、環境変数に指定してあればこちらが優先されます。

## 例

default.jsonが以下とする

```json
{
    "url" : "https://example.com",
    "account" : {
         "name" : "TARO",
         "pass" : "PASSWORD"
    }
}
```

run.js

``` js
var config = require('config')
console.log(config.account.name)
```

実行結果

``` powershell
PS > node .\run.js
TARO
PS > $env:ACCOUNT_NAME="JIRO"
PS > node .\run.js
JIRO
PS >
```

default.jsonで指定していた`TARO`が当初表示されますが、環境変数でACCOUNT_NAMEに`JIRO`と設定したところ、その値が実行結果に反映されました。

これを使ってDockerfileなどに環境変数を指定すれば、イメージの再作成を行うことなく環境ごとに異なる値を後から自由に修正することが可能になります。

参考
https://github.com/lorenwest/node-config/wiki/Environment-Variables#custom-environment-variables
RDS for MySQLのパラメタグループの初期値で変更したもの

RDS for MySQL 5.6 で初期値から変更したパラメタのメモ

| 項目名 | 初期値 | 設定値 | 意味・意図 |
|:--|:--:|:--:|:--|
| slow_query_log | 0(無効) | 1 | スロークエリログの有効化 |
| general_log | 0(無効) | 1 | 一般ログの有効化 |
| long_query_time | 10秒 | (捕捉したい値 単位は秒) | スロークエリログ出力対象時間<br>※あまり短いと大量になり性能低下になる恐れ有り |
| log_output | TABLE | FILE | ログ出力先をTABLEからFILEに。<br>テーブル書き込みが多いとパフォーマンス低下の恐れがあるため  |
| max_allowed_packet | 4194304(4Mバイト) | (必要なだけ大きく) | パケット最大値（SQL長さ） |
| sql_mode | 空 | TRADITIONAL<br>NO_AUTO_VALUE_ON_ZERO<br>ONLY_FULL_GROUP_BY | 不正な値を登録不可（実行エラー）とする等。<br>例えば日付の'0000-00-00'  |
| character-set | latin1 | UTF8 | 日本語を扱えるように設定 |
| time_zone | UTC | Asia/Tokyo| 2015/12月より。それ以前は設定不可だったのでinit_commandで小細工が必要であった |

※エラーログは有効化されています

なお、ログはCloud Watch Logs に出力することも可能です。
（以下は、コンソール ＞ インスタンス ＞ 変更 で表示される画面）

![](https://i.gyazo.com/e5f55a9c6d93f4513eae9cf2db4c5f72.png)
Tensorflowがインストール出来ない症状を解決する方法（Python 3.7.0）

#環境
Ubuntu 18.04
Python 3.7.0

#Tensorflowをインストールする

エラー文はこちら

``` :Terminal
$ pip install tensorflow
Could not find a version that satisfies the requirement tensorflow (from versions: )
No matching distribution found for tensorflow
```
原因はTensorflowがPython3.7.0に対応していなかったこと。

対処法はPythonを3.6.6にダウングレードすることです。

```
$ conda install python=3.6.6
```
コマンドを実行後`pip install tensorflow`でインストール出来ます。

お疲れ様でした。
WebRTCのMediaStreamをWebAudioAPIのFilterで加工する方法

# 概要

最近、SkyWayを使ったビデオチャットシステムを構築していたのだが、ハウリング対策として高音を低減して欲しいと言われた。~~JavaScript歴2ヶ月なのに無茶言うな~~

探すのに少し苦労したので、勉強も兼ねた覚え書きとして残しておこうと思う。

# WebAudioAPIの基本概念

WebAudioAPIでは、マイクやスピーカーといった入出力先や、音の加工をするフィルターなどをNodeとして表現する。これらを接続(connect)していくことで、渡された順に処理されていく仕組みとなっている。
![filter.png](https://qiita-image-store.s3.amazonaws.com/0/309016/a9a0e5ba-6e99-3b0b-dedd-9c3967024d5b.png)
今回はSourceとして、getUserMediaで取得したMediaStreamを使用する。

# 結果

最終的に、以下のようになった

```javascript:apply_filter.js
navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true,
}).then(stream => {
  // AudioContextを生成
  const audioContext = new AudioContext();

  // BiquadFilterを生成
  const biquadFilter = audioContext.createBiquadFilter();
  biquadFilter.type = 'highshelf';     // ハイシェルフフィルター
  biquadFilter.frequency.value = 1000; // 周波数閾値
  biquadFilter.gain.value = -50;       // Gain(強さ)

  // getUserMediaで取得したMediaStreamからMediaStreamAudioSourceNodeを生成
  const mediaStreamSource = audioContext.createMediaStreamSource(stream);

  // MediaStreamAudioSourceNodeをBiquadFilterNodeに、BiquadFilterNodeをAudioContext.destinationに接続する
  // AudioContext.destinationはブラウザの出力先を示しており、ここに音を流せばブラウザから出力される
  mediaStreamSource.connect(biquadFilter);
  biquadFilter.connect(audioContext.destination);

  // 最後にHTMLの<video>や<audio>のsrcObjectにstreamを渡す
  const video = document.querySelector('video');
  video.srcObject = stream;

  // HTML側で属性の指定をした場合は不要
  video.addEventListener('loadedmetadata', e => {
    video.muted = true; // streamの加工前音声を無効化
    video.play();
  });
});
```

HTML側でautoplay属性とmuted属性を指定した場合は、onloadedmetadataのコールバックを指定する必要はない。

```html:video.html
<video autoplay muted></video>
```

ポイントは、加工前のSourceStreamの音声を再生しないことである。HTML側でmuted属性を付与するのが一番手っ取り早い。
試しにmutedじゃなくてもgetAudioTracksしてstopすればいいのでは？と思ったがダメだった。

```javascript:failed.js
stream.getAudioTracks()[0].stop(); // 失敗例
```

SkyWayと組み合わせる際は、受け取った相手側でstreamにフィルターをかけるのが楽。

```javascript:filter_skyway.js
const peer = new Peer({ key: 'your API key' });
peer.on('call', call => {
  // 事前にgetUserMediaで取得したMediaStreamを渡す
  call.answer(localStream);
  // 相手のMediaStreamを受け取ると発火
  call.on('stream', stream => {
    ApplyFilter(stream); // ここでフィルターをかける
  });
});
```

# おまけ

複数のフィルターをかけたい場合は、かけたい順にconnectしていけばOK。

```javascript:multi_filter.js
audioSource.connect(filter1);
filter1.connect(filter2);
filter2.connect(filter3);
filter3.connect(audioContext.destination);
```

# 参考文献

[Web Audio API の基礎](https://www.html5rocks.com/ja/tutorials/webaudio/intro/)
[BiquadFilterNode](https://developer.mozilla.org/ja/docs/Web/API/BiquadFilterNode)

<br>

---
ツッコミどころ等あったらコメントで教えて頂ければ幸いです。
Sourcetreeが動かなかくて困った？じゃあターミナルを使えばいいじゃない（ピンチの時のターミナルGit操作-設定編-）

いつもはSourceTreeを使ってGit管理しているのだけど、そのSourceTreeがバグってしまってどうしようもない＆時間がないときのためのGitターミナル操作講座です。
操作編はまた改めて書きます。


## まずPCにgitが入っているかどうか調べましょう
 ```
$  git --version
```
すでに入っている場合は数字（gitのバージョン）が表示されます
 入っていなかったらgitを入れましょう。
[Git - Gitのインストール](https://git-scm.com/book/ja/v2/%E4%BD%BF%E3%81%84%E5%A7%8B%E3%82%81%E3%82%8B-Git%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)

## gitの最低限の設定をする
gitが入っていることが確認できたら最低限の設定をしましょう。
gitに紐付けられるメールアドレスとパスワードが入っているかどうかを確認します

```
$ git config --global user.name
```
```
$ git config --global user.email
```

それぞれのデータに入っている値が返ってくるはずです。
入っていないor設定が間違っていれば設定をします。

```
$ git config --global user.name “HOGE（ユーザー名）”
```

```
$ git config --global user.email “hoge@hoge.jp（メールアドレス）”
```
また、文字が全て同じ色で表示されると大変読みづらいため、
Git関連で表示される文字に色をつけましょう。

```
$ git config --global color.ui auto
```
設定はここまでで終了です。
Spring Bootのメッセージファイルを分割する方法

# 概要
今回はSpring Bootでメッセージファイル(.properties)を分割する方法を紹介します。
application.propertiesでspring.messages.basenameをカンマ区切りで指定すれば複数ファイルに分割が可能ですが、ファイル数が多くなってくると管理が大変なので、特定のフォルダにあるメッセージファイルを動的に読み込めるようにしました。  

## 1. MessageSourceAutoConfigurationを起動させないようにする
Spring Bootはデフォルトでspring.messages.basenameに指定された場所にメッセージファイルがあれば、MessageSourceAutoConfigurationクラスを実行し、MessageSourceのBeanを生成します。
今回は自前でMessageSourceを生成したいので、spring.messages.basenameのデフォルト値である、resources/messages.propertiesを配置しないようにします。

## 2. Configクラス
Configクラスを下記の内容で作成します。  
Kotlinで書いていますが、Javaでも同様です。  
このサンプルではresources/i18n内のメッセージファイルを読み込みます。
処理的にちょっと強引な感じですが。。。

``` AppConfig.kt
package ...

import org.springframework.context.MessageSource
import org.springframework.context.annotation.Bean
import org.springframework.context.annotation.Configuration
import org.springframework.context.support.ResourceBundleMessageSource
import org.springframework.core.io.support.ResourcePatternResolver
import org.springframework.util.StringUtils
import java.nio.charset.StandardCharsets

@Configuration
class AppConfig {
    /**
     * メッセージソースを生成します
     */
    @Bean
    fun messageSource(resourcePatternResolver : ResourcePatternResolver): MessageSource {

        val messageSource = ResourceBundleMessageSource()

        // エンコーディングのセット(必要に応じて)
        messageSource.setDefaultEncoding(StandardCharsets.UTF_8)
        
        // その他の設定 
        /*
        messageSource.setFallbackToSystemLocale(xxx)
        messageSource.setCacheMillis(xxx)
        messageSource.setAlwaysUseMessageFormat(xxx)
        messageSource.setUseCodeAsDefaultMessage(xxx)
        */

        // 動的メッセージの取得
        // パターン指定でプロパティファイルの一覧を取得
        resourcePatternResolver.getResources("classpath*:i18n/*.properties")
            .filter { it.isFile }.mapNotNull { it.filename }.forEach {
                val baseName = if (it.contains("_")) { // ロケールあり(ファイル名に"_"が含まれている)
                    it.substringBeforeLast("_")
                } else { // ロケールなし
                    it.removeSuffix(".properties")
                }
                messageSource.addBasenames("i18n/$baseName")
            }
        }
        return messageSource
    }
```

以上です。

# まとめ
ちょっと強引な処理ですが、参考になれば幸いです。
また、ファイルの分割数が多い場合のパフォーマンス低下が気になり、500個以上のファイルを作成してメッセージの取得時間の計測を行いました。
  最初の1回目のアクセスだけメッセージファイルの件数に比例してメッセージの取得時間が伸びましたが、2回目以降(別のメッセージキーでも可)は高速でメッセージが取得できました。 
内部処理を追えていませんが、キャッシュか先読みっぽい処理が入っているのでは無いかと思います。
Ruby on Rails5で文字列データから可逆なtokenを簡単に作成するメモ

Rails.version => "5.2.1"
RUBY_VERSION => "2.5.1"


JSON Web Token (JWT)がデフォで使えるので一番楽そう

```ruby:encode
data = 'hogehoge'
token = JWT.encode(data, Rails.application.credentials.config[:secret_key_base])
```


```ruby:decode
data, header = JWT.decode(token, Rails.application.credentials.config[:secret_key_base])
```
HTMLとＰＨＰ

今回はHTMLとPHPについてまとめていきたいと思います。

### HTML
HTMLとはCSSとともにウェブページで用いられるプログラミング言語です。
デザインを目的としたもので、見出しやヘッダー、文字のサイズなどを構成できます。
その性質から、習得難易度が最も低いプログラミング言語です。
開発環境もエディターさえあれば十分なので、取り組みやすいです。

###PHP
PHPとは、HTMLと同様にウェブページで用いられることが多いプログラミング言語です。
HTMLをコードに混ぜながら開発できることが特徴です。
PHP自体はデザインを目的としたものではなく、計算や分岐のような動的なシステムを作ることができます。
そのため、関数や変数などが出てきて一般のプログラミング言語と似通っています。
#####・関数
if・・・条件分岐
for・・・繰り返し（回数があらかじめわかっている場合）
while・・・繰り返し（回数が未定の場合）
など様々な便利な関数があります。
######・変数
$をつけると変数になります。
変数1つにつき1つの値しか入れられませんが、配列（array）を使うことにより変数を拡張することができます。


PHPはデータベースなどのツールと連携すると使い道が広がります。
究めるとeコマースサイトやSNSを作ることができる汎用性の高い言語です。
PropertyGridでList<T>を展開する

# PropertyGridでListが配列みたいに展開されない件
上記、昔からあるあるで毎回調べてチャレンジしたり、あきらめたりしています。
昔からそんなもんだと割り切っていましたが、いい加減テンプレ化したいのでコピペ用のコードを記載します。

```cs:サンプルデータ
public class MyData
{
  public int Id { get; set; }
  public string[] Members { get; set;} = new string[] { "aaa", "bbb", "ccc" };
  public List<string> MemberList { get { return Members.ToList();}}
}
void Form1_Load()
{
  propertyGrid1.SelectedObject = new MyData(); //FormにPropertyGridが張り付けられているとする。
}
```
これを表示すると以下のように、MemberListがツリーに展開できません。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/98713/7e746e6f-a7dd-4182-b1cf-ef703f9e7cb0.png)

これを解決するため、まず準備として以下ListTypeConverterをコピペで作成しましょう。

```cs:ListTypeConverter(コピペ用)
public class ListTypeConverter : TypeConverter
{
  public override object ConvertTo(ITypeDescriptorContext context, CultureInfo culture, object value, Type destinationType)
  {
    if (destinationType != typeof(string))
      return base.ConvertTo(context, culture, value, destinationType);
    string type = value.GetType().GenericTypeArguments[0].Name;
    IList members = value as IList;
    if (members == null)
      return "-";
    return $"List<{type}>[{members.Count}]";//Listのルートのところをどう出すか
  }

  public override bool GetPropertiesSupported(ITypeDescriptorContext context) { return true; }

  public override PropertyDescriptorCollection GetProperties(ITypeDescriptorContext context, object value, Attribute[] attributes)
  {
    List<PropertyDescriptor> list = new List<PropertyDescriptor>();
    IEnumerable members = value as IEnumerable;
    if (members != null)
    {
      foreach (var member in members)
      {
        list.Add(new MemberDescriptor(member, list.Count));
      }
    }
    return new PropertyDescriptorCollection(list.ToArray());
  }

  private class MemberDescriptor : SimplePropertyDescriptor
  {
    public object Member { get; private set; }
    public MemberDescriptor(object member, int index)
        : base(member.GetType(), $"[{index}]", typeof(string))//展開時[0]の所をどう出すか
    {
      Member = member;
    }
    public override object GetValue(object component)
    {
      return Member;
    }
    public override void SetValue(object component, object value)
    {
      Member = value;
    }
  }
}
```
これをList<T>なプロパティの前にTypeConverter属性として付加します。

```cs:サンプルデータ
public class MyData
{
  public int Id { get; set; }
  [TypeConverter(typeof(ListTypeConverter))]// *追加*
  public string[] Members { get; set;} = new string[] { "aaa", "bbb", "ccc" };
  public List<string> MemberList { get { return Members.ToList();}}
}
```
実行結果は下記です。ついでに配列のメンバ数もルートに出しました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/98713/a936ced8-7b09-cc74-6436-1d787e9c1b3d.png)

### 参考にしたサイト
[StackOverflow - Properly display list of custom objects in Windows Forms' Property Grid
](https://stackoverflow.com/questions/30878928/properly-display-list-of-custom-objects-in-windows-forms-property-grid)

###関連記事
[C#でコスパの良いデータダンプ方法(メインページ) ](https://qiita.com/longlongago_k/items/ab7d8457c419bf37e35b)
Cronにてエラーを見たいときPostFixを使ってみよう

cronで何か実行したときエラーが見れない。
そういう時いかんせん。

#解法
```
apt install postfix
```
postfixを入れればいい。公開する必要はないので、途中の質問でLocal Onlyを選べばよろしい。

#エラーの見方
```
 cat /var/mail/root
```
rootでなくても、適宜ユーザー名で。

```
From root@localhost  Wed Oct 31 06:25:05 2018
Return-Path: <root@localhost>
X-Original-To: root
Delivered-To: root@localhost
Received: by localhost (Postfix, from userid 0)
	id aaaaaa; Wed, 31 Oct 2018 06:25:05 +0000 (UTC)
From: root@localhost (Cron Daemon)
To: root@localhost
Subject: Cron <root@localhost> test -x /usr/sbin/anacron || ( cd / && run-parts --report /etc/cron.daily )
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
X-Cron-Env: <SHELL=/bin/sh>
X-Cron-Env: <PATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin>
X-Cron-Env: <HOME=/root>
X-Cron-Env: <LOGNAME=root>
Message-Id: <aaaa.aaaaa@localhost>
Date: Wed, 31 Oct 2018 06:25:05 +0000 (UTC)

/etc/cron.daily/logrotate:
error: error running shared postrotate script for '/var/log/mysql.log /var/log/mysql/*log '
run-parts: /etc/cron.daily/logrotate exited with return code 1
```

何かあるならば、最終行にエラーが表示されます。

#Ref
https://askubuntu.com/questions/222512/cron-info-no-mta-installed-discarding-output-error-in-the-syslog
【メモ】MySQLで日本語カラムにInsert:どハマリ

# 概要
### 環境
Virtual Box/Ubuntu 18.04 LTS/MySQL 5.7

### やりたいこと
日本語をvarcharのカラムに格納したいが、エラーになるのをなんとかしたい。

戻ってくるエラーは以下のような感じ。(不正確)

```
SQL Error [1366] [HY000]: Incorrect string value: なんちゃらかんちゃら for column ほげほげ at row 1
```

### ここでお帰りになるべき方
以下をご存じの方は、ここでお帰りください。

- MySQLはカラムにも文字コードがあり、テーブル作成済みなら当然染みてる。

### ことの発端
Node.js/MySQLでSequelizeを使おうとして、クライアントコマンドからmigrationファイルを作って適当にテーブル作ってたらはまった。

# 手順
### 必要な状態

これで、

```
mysql> status;
```

この状態

```
Server characterset:	utf8
Db     characterset:	utf8
Client characterset:	utf8
Conn.  characterset:	utf8
```

これで

```
mysql> show variables like 'char%';
```
この状態

```
+--------------------------+----------------------------+
| Variable_name            | Value                      |
+--------------------------+----------------------------+
| character_set_client     | utf8                       |
| character_set_connection | utf8                       |
| character_set_database   | utf8                       |
| character_set_filesystem | binary                     |
| character_set_results    | utf8                       |
| character_set_server     | utf8                       |
| character_set_system     | utf8                       |
| character_sets_dir       | /usr/share/mysql/charsets/ |
+--------------------------+----------------------------+
8 rows in set (0.00 sec)
```


### 手順
Google先生に聞けば、いくつも引っかかるので肝心の手順は割愛。
基本的には、設定ファイルに以下のような設定をして回る感じ。

```
default-character-set = utf8
```

一つだけ、

```
character-set-server=utf8
```

こんな感じのがあった気がする...

### 確認
で、再起動しても当然すでに作ってあるものはことごとくUTF-8ではない。
なので、ことごとくUTF-8に変更して回る。

DBとかテーブルとか、、、でも、エラーは解消せず。が、今日のハマリポイント。
** カラムも忘れず変更しましょう。 **

誰かの記事で、散々チェックして直らなくて、作り直したら上手くいったという報告を見かけたが、多分これ系の話かな？

# まとめ
カラムにも文字コード(ってかキャクター・セットとキャラクター・エンコーディングはごちゃ混ぜ？)あるんだな。つーか、今時デフォルトがlatin1ってなんだよ。
IT未経験の私がプログラミングに魅了された3つの理由

#はじめに
私は今年4月に大手SIerに入社。半年間の研修を終え、エンジニアとしてのキャリアを歩み始めました。
IT未経験だった私がプログラミングの魅力に引き込まれた理由を、IT未経験の方やこれからプログラミングを始める人に何か伝わればと願い、お話します。そして将来自分が読み返した際に初心を取り戻すなにかのきっかけにしたく、思いを綴ります。


#1.誰でも始められる
まず興味さえあれば、そしてPCと最低限の環境があればプログラミングの環境をローカルに落とせること。
始めた後のハードルは計り知れないものがありますが(笑)、パソコン一つでwebサイトやアプリケーションを作ることが出来るのはプログラミングの大きな魅力の一つではないでしょうか。

#2.底知れない達成感を味わえる
これには共感できる方も多くいらっしゃるのではないでしょうか。
自分が時間と手間と手汗をかけて作りこんだソースコード。それがエラーを吐かずに動いた時の達成感というか感動というか、あの感覚は何なんでしょうか。あれを味わいたくてプログラミングをしている人も周りには多いと思います。
あの瞬間は自分とパソコンがJavaという言語を通じて会話が成立した瞬間だと思っています。
スポーツで相手に勝った瞬間の喜びに似ていると個人的には思います。


#3.世界中にプログラミングに恋をした仲間がいる
プログラミングを経験したことのある人ならわかると思いますが、世界中にプログラミングのドツボにはまった人たちがいて、彼らは自分のソースコードを作品として公開しているんです。100人いれば100通りのソースコードがあると思います。国や地域や人種が違っていても、プログラミングの言語が共通言語となって多くの学びを与えてくれます。
テクノロジーの発展が騒がれていますが、私はそれよりもこうした人と人とのつながりをプログラミングが与えてくれることに素晴らしさを感じています。
そしてこういう思いを忘れずに今後もプログラミングを続けていきたいと感じています。
Python で複数の処理を lambda で実行する

# 単一の結果を返す Python の lambda にて複数 (行) の処理を実行させる

JavaScript のアロー関数っぽく実行したかった・・・

## 実行結果をまとめちゃえばいいじゃん (いいじゃん)

```python:test.py

def exe_callable_lambda(callable_lambda):
    if callable(callable_lambda):
        return callable_lambda()


def sou_desu(): return [
    print('ou'),
    print('iesu'),
]


exe_callable_lambda(
    lambda:
    [
        print('ai'),
        print('amu'),
        print('san'),
    ]
)

exe_callable_lambda(
    sou_desu
)

```

じっこうけっか

```bash
$ python test.py
ai
amu
san
ou
iesu
```
AWS Dev Day Tokyo 2018（3日目）のテクニカルセッション3行レポート

# AWS Dev Day Tokyo 2018（3日目）のテクニカルセッション3行レポート
各セッションで自分なりに学んだことを3行で表現したいという試み

- 【3-001-1】浸透するサーバーレス、実例に見るユースケースと実装パターン
- 【3-001-2】Serverless Application Security on AWS
- 【3-001-3】開発者におくるサーバーレスモニタリング
- 【3-001-4】ZOZOTOWN の膨大な画像ファイルを移行したときの過程の話（オンプレミスからクラウドへ）
- 【3-001-5】GraphQL 入門（AWS AppSync）
- 【3-001-6】クックパッドの動画事業での AppSync 活用事事例 - Firebaseからの移行 - 
- 【3-001-7】Serverlessを極めるためにDynamoDBデータモデリングを極めよう
- 全体

## 【3-001-1】浸透するサーバーレス、実例に見るユースケースと実装パターン
- Serverlessはシンプル、高い可用性、安い！！
- Serverlessの実装パターンはほぼ決まっている
- 鉄板はイベント（APIGateway）、ストリーム（Kinesis、DynamoDB）、SQSからのLambda ▶︎ 後続処理（DB、バッチ）

## 【3-001-２】Serverless Application Security on AWS
- Securityはアプリケーションで担保する（”マネージド”には含まれてないよ）
- cognito（コグニート）で認証認可、[Amazon Cognito ユーザープール](https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/cognito-user-identity-pools.html)でサクッと認証
- 長いものには巻かれろ[Well-Architected Framework](https://aws.amazon.com/jp/architecture/well-architected/)、さらにServerless特化の
[Serverless Application Lens](https://d1.awsstatic.com/whitepapers/architecture/AWS-Serverless-Applications-Lens.pdf)

## 【3-001-3】開発者におくるサーバーレスモニタリング
- Metricsを正しく読もう（覚えよう）
- X-Rayを入れてTraceしよう（Lambdaに1行！）
- CroudWatch ▶︎ Lambda経由でS3に入れて好きなようにいじろう

## 【3-001-4】ZOZOTOWN の膨大な画像ファイルを移行したときの過程の話（オンプレミスからクラウドへ）
- オンプレの３大苦（キャパシティ不足、監視、スケーラビリティ）からの脱却
- やっぱり超鉄板の S3＋Lambda は至高かつ最高
- レガシーコードをLambdaに焼き直したら、属人化が排除されてました

## 【3-001-5】GraphQL 入門（AWS AppSync）
- （遅すぎた）青天の霹靂、GraphQL。RESTfulに毒された私は震えっぱなし
- エンドポイント激減、フロントから欲しい情報が欲しい形で取得できるGraphQL（に震えっぱなし）
- Appsyncでモバイル ▶︎ DBは全部どうにかなる（する）

## 【3-001-6】クックパッドの動画事業での AppSync 活用事事例 - Firebaseからの移行 - 
- cognito, Appsyncにも課題がある（けどなんか頑張って解決）
- MicroserviceのService Meshの考え方は素晴らしい
- SDSを使ってサービス名のみで連携する

## 【3-001-7】Serverlessを極めるためにDynamoDBデータモデリングを極めよう
- DynamoDBが悪いんじゃない、RDBに毒された人間が多いだけである
- Partition Keyで分散配置した中でSort　Keyで整列している、この意識を常にもつ
- テーブルは１つならAtomic、UpdateItemでAtomic、[CQRS](https://www.yumemi.co.jp/ja/tips/tips2018/reinvent2017_03?utm_source=TIPS&utm_campaign=FB180220)で擬似マテリアライズドビュー

## 全体（初参加の感想）
- 満席で最後のセッションしか予約できなかったけど、全て当日参加できた（混んでたら入れてもらえないかも）
- 17Fにある[AWS Loft Tokyo](https://aws.amazon.com/jp/start-ups/loft/tokyo/)がすごい、もちろん登録してきた
- 今回初参加、かつ、仕事の都合で１日しか参加できなかったけど、Serverless&Mobileの日でよかった。他の日も行きたかったけど。
ruby-buildをアップデートしてもリストが更新されない時は.rbenv/pluginsを確認しよう

##今日したこと
Rubyのバージョンを2.5.0に上げた(死ぬほどいまさら)
##困ったこと
ruby-buildをアップデートしても2.5.0がバージョン一覧(rbenv install -l)に出てこない。

```bash:ターミナル
$ brew update
$ brew upgrade ruby-build
```
上記をターミナルに打ち込んだけど、リストが更新されない。。。
###原因
~/.rbenv/plugins/ruby-buildが存在するとpluginsが優先されるらしい。
自分の環境ではなぜかあった(いろいろ適当に記録もせず入れるからこうなる)
###解決法
とりあえずplugins内のruby-buildを消した。
↓
うまくいった。
リストは更新されてて無事2.5.0をインストールできた。
ちなみに2018/11/01時点ですでに2.6.0のpre2まで出てるみたい。
全然知らなかった。
##まとめ
brew版とplugins版が二重になっちゃって、しかもplugins版が優先されたために起こった今回の困ったこと。
これからはなにかしたらとりあえず備忘録代わりにQiitaに記録することにする。
##謝辞
[nafu003さんのこの投稿](http://nafuruby.hatenablog.com/entry/2014/10/11/195016)にすべてを救われました。ありがとうございます。
GPSのデータを使ってシェイプファイルの作成

#目的
10年ほど前から農業経営にPMSというGISソフトを利用しており
これまで1/2500の紙の都市計画図やGoogleMapをスキャンして圃場シェイプファイル(ポリゴン）を作成していました。
今年からRTK-GPSでcm精度の位置データが取れたのでこれを元に(来るべき自動運転時代に向けて？）精密なシェープファイルを作り直したいと思います。

#使用するソフト
**1. RKTLIB**
GNSS測位用オープンソースプログラムパッケージ
http://www.rtklib.com/

**2. QGIS**
オープンソースの地理情報システム
https://www.qgis.org/ja/site/
**3. PMS**
「作業計画・管理支援システム」
http://www.aginfo.jp/PMS/


 **すべて無料で使えます！! 感謝！！**


#RTKLIBのposファイルをkmlファイルに変換
[Raspberry Piでcm精度のRTK-GPSガイダンスの制作(その１）]
(https://qiita.com/m_take/items/06892a8e25aa577e8455)
この通り設定すると/home/pi/RTKLIB/rtklog/ディレクトリに ???_sol.posと緯度経度等のテキストファイルが出力されます。
GUIの**RTKPOST.exe**を使ってもkmlファイルに変換できますが、ラズパイ上で**pos2kml**で一括に変換したほうが簡単なので
`cd /home/pi/RTKLIB/app/pos2kml/gcc`
`./pos2kml /home/pi/RTKLIB/rtklog/*.pos`
出来たkmlファイルをQGISを使えるPCに転送しておきます

#QGISでkmlファイルを開きトレースしてshpファイルを作る
QGISの左上の	[ブラウザ]からkmlファイルを選択して開く。座標参照系はWGS84
![qgis1.jpg](https://qiita-image-store.s3.amazonaws.com/0/261581/0681d709-fe92-10b7-aedc-374ca3ddf27f.jpeg)

[新規シェープファイルレイヤ]ボタンを押してレイヤー追加。
エンコード = system  , ジオメトリタイプ = ポリゴン  , 座標参照系は直角平面座標（私のところはⅦ系）
![qgis3.jpg](https://qiita-image-store.s3.amazonaws.com/0/261581/d26bd4e3-919f-e3a8-3b68-3d646cfc408f.jpeg)

シェイプレイヤを選択して［編集モード切り替え］-［ポリゴン地物を追加］頂点を右クリックしてポリゴン作成、左クリックで確定。idに連番をつけておきます
![qgis5.jpg](https://qiita-image-store.s3.amazonaws.com/0/261581/8be72484-082f-5034-6615-77b26b7b1c01.jpeg)

[フィールド計算機を開く」**area(  \$geometry )**で面積、 **perimeter(  \$geometry )**で周囲長（畦の長さ）
**x(  \$geometry )**でポリゴン重心のX座標、**ｙ(  \$geometry )**でY座標が求められます

ベクターレイヤを保存

ちなみにQGIS上で国土地理院の様々な地図画像（地理院タイル）を重ね合わせることができ
例えば基盤整備前の1970年代の航空写真と現在の圃場を比べたりすると意外な発見があって面白いです。
[QGIS3でウェブ地図利用が劇的に変化した](https://qiita.com/ishiijunpei/items/59136a778a183484734e)
https://maps.gsi.go.jp/development/ichiran.html

- トラクターの軌跡
![qgis7.jpg](https://qiita-image-store.s3.amazonaws.com/0/261581/12b5eef9-d0c0-e3cd-13f5-f2d051d91a8d.jpeg)

- 田植え機の軌跡
![qgis8.jpg](https://qiita-image-store.s3.amazonaws.com/0/261581/060f85f7-76d1-10ae-eb5e-fb8b64178449.jpeg)

- コンバインの軌跡
![qgis9.jpg](https://qiita-image-store.s3.amazonaws.com/0/261581/702802bc-f04a-a113-faba-5300d99872bc.jpeg)

- 全部重ねるとこんな感じ
![qgis10.jpg](https://qiita-image-store.s3.amazonaws.com/0/261581/e9e131ae-a2d8-19fe-642d-c7a390283839.jpeg)


#shpファイルをPMSで使う
これ以降はPMSを利用する場合の説明です
shpファイルを「圃場図作成（ShapeMaker）」で開く
属性テーブルを開き編集　LAT/LONフィールドの空セルを右クリック。［緯度経度算出」で自動計算
面積や連番を「属性間コピー」でコピー
![qgis13.jpg](https://qiita-image-store.s3.amazonaws.com/0/261581/f3602a6e-ac69-999f-da33-d60eceabd174.jpeg)

PMS用圃場図シェイプファイルの仕様はマニュアルのP.61にあります
http://www.aginfo.jp/PMS/Download/PMSMap.pdf
以上でGPSから圃場図シェイプファイルの出来上がりです。

**追記**
もし初めてPMSを使う方がいたらRTK-GPSがなくてもQGISで国土地理院の全国最新写真（シームレス）を利用してshpファイルを作成し,上の方法で属性を編集する方法をおすすめします。

PMS付属のShapeMakerはバグがありよく落ちますし、GoogleMapの写真より地理院の方がズームレベルが高いです。
グッドデザイン賞の会場で見た、？なデザイン

# 概要

10/31に初めて、東京ミッドタウンで開催された<a href="http://www.g-mark.org/">グッドデザイン賞</a>の受賞展に行きました。そこで見た、「それはデザインとしてどうよ？」と思った点について書きます。

# 気になった点

グッドデザイン賞の会場では、ベスト100の展示物が見られますが、それ以外にも選出されたデザインが、写真付きでパネル展示されていました。気になったのは、その展示パネルの内容です。

![IMAG1812.jpg](https://qiita-image-store.s3.amazonaws.com/0/78503/fad38caf-63e4-4a20-4167-c72af69fdd98.jpeg)

これをぱっと見た時に考えたのが、「これ、どっからどこまでがUNIT 13 (メディア・コンテンツ・パッケージ)なんだ？」という事です。それから少し考え込んで、思い浮かんだのは以下のパターンです。

* UNIT13の印を中心した一定の範囲
* UNIT13の印から右方向にUNIT14の印までの範囲の7件
* UNIT13の印から下方向に進み、右方向に折り返してUNIT14の印までの範囲
* UNIT13の印から下方向に進み、左方向に折り返して次の印までの範囲

なお、この写真を見せて他の人に聞いたところ、「上の文字が範囲を示しているのかな？」などと言われました。
正解は3番目の、「UNIT13の印から下方向に進み、右方向に折り返してUNIT14の印までの範囲」です。写真で示すと次の通りです。

![IMAG1812_2.jpg](https://qiita-image-store.s3.amazonaws.com/0/78503/b2a11aed-f55c-efcb-ba6a-1d668b3b176e.jpeg)


ちなみに、この写真のチョイスは私が最初に見たパネルであると同時に、やや悪意のあるチョイスです。他のパネルを見ると、少し手がかりが得やすくなります。特にUNIT01の辺りを見ると多少分かりやすいと思います。

![IMAG1813.jpg](https://qiita-image-store.s3.amazonaws.com/0/78503/86c0d548-f838-27fb-5636-79b39377e08b.jpeg)

![IMAG1829.jpg](https://qiita-image-store.s3.amazonaws.com/0/78503/f7f198af-33bb-71aa-10ea-8d5daac30888.jpeg)


# デザイン上の問題

これだけ複数の解釈がされてしまった時点で、あまり優れたデザインとは言えないと私は思います。このデザインの何が悪かったのかと自分なりに考えてみました。

* すべてがフラットに表示されて、区切りがない
* UNITの印に対して、どの範囲がそのUNITに含まれるのか単独の手がかりがなく、他のUNIT印との相対位置から判断するしかない
* デザインの基本は左上から右下なので、（上側の文字と同様に）右方向への流れを期待してしまう
* 縦方向ならば、日本語の縦書きと同じ折り返しパターンの可能性を想定してしまう
* 隣り合うUNITのジャンルが近く掲載内容も似たようなものなので、隣り合うUNITのどちらに含まれるかの判断が難しい
* UNIT13とUNIT14の印が上下の中心にあるため、これが範囲の中心である可能性を推測してしまう
* パネルは複数に分割され、中途半端な位置で切られている場所があるため、範囲が分かりにくくなっている

印の位置が上下中央に来るのはただの偶然の産物ですが、そういう偶然を許すデザインこそが問題と言えるかと思います。

# どうすれば良いか？

自分は、Webおよびモバイルアプリで多少UIを作った程度の素人なのですが、素人なりに簡単に対策を考えてみました。

## 色分けする

各UNITに色を決めて、その色で背景を彩色します。恐らく、最も簡単で分かりやすい方策かと思います。

## 分割する

各UNITを縦方向に分割し、上側の文字がある辺りにUNITの名前を掲げます。見ている側は分かりやすくなり、それなりに見やすいかと思います。

## アイコンや文字で閲覧方向を提示する

UNITロゴからどの方向に見るかを、何らかのサインで指し示します。あまりスマートではないですが、単独で閲覧方向を知る手がかりになります


# 最後に

グッドデザイン賞に行ったものの、会場で一番気になったのが、このあまり良いとは思えないデザインというのが、大変皮肉でした。この会場でこういう部分があるとかなり悪目立ちするので、少し気を遣った方が良いように感じました。

こうしたデザインになったのにも、何らかの背景があるのだろうとは思います（思いたいです）。例えば、なるべくフラットなデザインにして受賞者に差を作りたくなかったとか、政治的な理由とか、スペース的な問題とか、このグループ分けにあまり重要な意味がなく大雑把に分けられれば良かったとか、わざと分かりにくくして、気になったユーザをコンテンツへ視線誘導するための仕掛けとか…（そろそろ苦しい）。

ただどんな背景があるにせよ、これだけ複数の解釈ができてしまい、ぱっと見てすぐにグループ範囲を認識できなかったということは、ユーザにそれを判別させる負担を強いているという意味で、あまり良いデザインとはないと感じました。少なくとも自分は、こんなUIは使いたくないし、作りたくもないです。
Nuxt.jsでAPIの取得結果をストアに入れて表示する

# はじめに

[以前作成した画面](https://qiita.com/FrozenVoice/items/2ae814be437eaa492579)でvuexのストアから値を表示するようにしてみる。

ストアに入れておけば詳細的なページを表示する時にAPIアクセスが不要になるはず。

# Nuxt.jsのストア

storeディレクトリが用意されているので、そこに下記のjsを配置する。

```javascript:index.js
import Vuex from 'vuex'
import axios from 'axios'

export default () => new Vuex.Store({
  state: {
    items:[]
  },
  getters: {
    items: (state) => state.items
  },
  mutations: {
    setItems (state, { items }) {
      state.items = items
    }
  },
  actions: {
    async fetchItems({ commit }) {
      await axios.get('http://localhost/api/sample').then((response) => {
          commit('setItems', { items: response.data })
      })
    }
  }
})
```

`fetchItems` のアクションを用意し、その中でAPIでの取得結果を`setItems`のミューテーションで設定している。

# 表示側 (抜粋)

```javascript:index.vue
<script>
    import Item from '~/components/Item.vue'
    import { mapGetters } from 'vuex'

    export default {
        components: { Item },
        head: { title: 'Nuxt API Test' },
        async asyncData({ store }) {
            if (store.getters['items'].length) {
                return
            }
            await store.dispatch('fetchItems')
        },
        computed: {
            ...mapGetters(['items'])
        }
    }
</script>
```

`asyncData` 内で既に取得済みかを判断し、未取得の場合に`fetchItems`のアクションを呼び出している。

また、`mapGetters`を使って算出プロパティとしてストアの内容にアクセス出来るようにする。