OmniAICreator/Qiita-1.07M huggingface dataset:
C# / Unity2D 学んだこと #3

# C\# 

## パッケージマネージャ

- プロジェクトのパッケージマネージメントは、NuGetというものを使うらしい
    - ナゲット？
- .NET Coreをインストールすると入る、dotnetコマンドにはNuGetの機能が内包されていて、

```sh
dotnet add package TwitterOAuth
```

- という感じで書く
- WindowsではPackage Managerというツールもあるらしいが、yum/aptと同等のものと言ってる人もいてよくわからない
- Java(Maven)のようにGroupIdのような名前空間的なものはなく、ライブラリの名前のみでインストールできる
- https://www.nuget.org/
    - 92k Unique Packages
- https://mvnrepository.com/
    - 7820k
- なのでライブラリに関してはJavaの方が多そう
    - もちろん死んでるライブラリもJavaの方が多いとは思う

## 匿名クラスとdynamic

- 匿名クラスという、非常に便利なものがある

```csharp
using System;
using System.Collections.Generic;

class Hoge
{  
  public static void Main(string[] args)
  {
    var dyn = new { Age = 30, Name = "mk2" };
    Console.WriteLine(dyn.Age);
  }
}
```

- ジェネリクスが必要なところでも使えるらしいので、以下のようなコードも行ける

```csharp
using System;
using System.Collections.Generic;

class Hoge
{  
  public static void Main(string[] args)
  {
    var dyn = new { Age = 30, Name = "mk2" };
    var dict = new Dictionary<string, dynamic>();
    dict.Add("test", dyn);
    Console.WriteLine(dict["test"].Age);
  }
}
```

- dynamicはコンパイル時の型チェックをスルーしてくれる型らしい(乱用するとやばそう)
    - ちなみにUnityでは、使っているMono(.NETの互換OSS)のバージョンが古く、利用できないようだ

# Unity2D

## 1回Prefab化したものをSceneウィンドウで編集したい

- Sceneウィンドウで編集→もとのPrefabにドロップすると反映された

## アニメーション

- 今の理解
    - Animation Clip -> Animation Controller -> Animator Component
- の順で依存関係を持つ
- Animator ComponentはGameObjectに紐づくため再利用は出来ないが、他のAnimation ClipやControllerは一度作れば複数のAnimator Component/Animation Controllerに紐付けたり出来る
- keyframeとは？
    - *アニメーション中に到達すべきポイントであるキーフレーム (通過点)* by https://developer.mozilla.org/ja/docs/Web/CSS/@keyframes
    - アニメーション係数の値を書き換えるポイント
- Animation Controllerの状態遷移について
    - ENTRYにとどまることが出来ない？
        - 初期状態は何もアニメーションさせず、あるタイミングでアニメーションを開始させたいと思ったが、どうも何もアニメーションしない状態を作らないと行けないようだ
        - https://docs.unity3d.com/jp/540/Manual/StateMachineTransitions.html
        - Unityのドキュメントを見ても、Idleという状態が存在している

## Coroutine

- コルーチン
- https://docs.unity3d.com/jp/530/Manual/Coroutines.html
- Updateの処理とは別のタイミングで処理を実行させたいときに使う
- コルーチンの基本
    - StartCoroutine(IEnumarator)でコルーチンを開始できる
    - コルーチンは関数実行の中断・再開用システム
    - yield hogehogeでコルーチン固有の処理を行う
        - yield break - コルーチンの処理を停止する
        - yield return new WaitForSeconds(x) - x秒待つ
    - コルーチンはあくまで平行プログラミングなので、並列に何かが実行されることはない
    - 個人的にコルーチンを使ってみた感想として、コレ使えばなんでも出来るな…と思った
        - アニメーションも他の時間経過が必要な処理も全部コルーチンで出来る
        - 故に多用しすぎるとヤバイ気もする
- コルーチンの注意点
    - StartCoroutineは既存の開始されているコルーチンについて何も関与しないので、コルーチンの管理は開発者が行う必要がある
        - void Updateでコルーチンを開始する場合は要注意
        - 大量のコルーチンを使うとそれだけ大量のコルーチン状態変数が生まれる
        - ヤバイ(小並感)

## C#/Unity 学習1週間目だが、ゲームを作ってみた

- https://github.com/mk2/MyUnityDemo_OchimonoGame
- シンプルな「ぷよ○エ」風ゲーム

![ss1_compressed.jpg](https://qiita-image-store.s3.amazonaws.com/0/20734/6f761b0c-33b5-4883-8940-9860868f4516.jpeg)

- 素材は本屋で売ってた2k円ぐらいの素材集(商用利用可)
- フォントは[フォントな](http://www.fontna.com/)にあったフォントを使う
- 反省点
    - コルーチンの使い方が雑
        - ゲームロジックとアニメーションのタイミング合わせをコルーチンで行ってしまったので、アニメーションのWaitForSecondsの値を変えるとゲームロジックに変化が生まれる(ヤバイ)
    - Unityのシーンエディタをうまくあつかえていない
        - ビューの生成をコードでやっているので、Unityのシーンエディタを使いこなせていない
        - どこからどこまでUnityのシーンエディタで生成すべきかイマイチわからず
内定者エンジニアに送る、新卒の頃に僕が知りたかったこと : 習慣編

会社で内定者向けにLT（5分）する機会があり、その時の内容。
自分がペーペーのエンジニアから少しづつ成長していった過程でもっと早く知りたかったことを共有する。

----
# 自己紹介
- numanomanu
- 社会人歴 4 年目と半年
- ランサーズ株式会社には2年半在籍
    - 現在は [pook](https://s.pook.life/lp/) というサービスのエンジニアをしている

----

# エンジニア（プログラマ）に必要なこと
----

># 学び続けること
by プログラマが知るべき97のこと

- 技術は日進月歩していくのでそれについてゆく必要がある
- では、どうやって**学べ**ば良いか？本を読んだり、自分でコードを書いたり・・・
- それ以上に、学び**続ける**にはどうすればいいか？

----
学び**続ける**ための一つの方法
-> **習慣をつける**

----
# 習慣
>反復によって習得し、**少ない心的努力で繰り返せる**、固定した行動のこと。
by wikipedia

毎日歯を磨かないと気持ち悪かったり、スマホを無意識に触ったりする。繰り返していること。

- 本を読む習慣
- プログラミングする習慣

などの習慣がつくと、学び続けることができるのでは？

----
# 習慣の作り方(私の事例)

----
- コツ ： やるべきことを最小の工程で着手できるように準備しておく

----
例1 スマホのホーム画面を活用し、 kindle などをよく触るところに置き、本を読む習慣をつける
<img src="https://qiita-image-store.s3.amazonaws.com/0/26095/9bbf8794-1b14-ba6e-6d92-4efda138c5ce.png" width="400">
よく触るところに置くことで、朝の通勤時間やコンビニやエレベーターの待ち時間でさえ、kindle にアクセスし、本を読んだりするようになる。本を読むぞ〜と意気込まなくても、**少ない心的努力で繰り返せる**ようになる。また、「毎週末だけ読む」というスタンスだと、だいたい次の週には忘れているので、結果として効率悪い気がしています。

----
例2 コマンドラインから git hub などを操作できるようにしておき、よく使うものに最短でアクセスする習慣をつける

```zsh:~/.zshrc
# hub コマンドを使って、ターミナルから github にアクセスする
# 新規 issue 作成ページをブラウザで開く
alias gin='hub browse -- issues/new'
# 現在いるブランチからプルリクを1コマンドで出す
alias gpr='git push origin $(git symbolic-ref --short HEAD) && hub browse -- compare/$(git symbolic-ref --short HEAD)'
# 現在いるリポジトリのプルリク一覧を見る
alias gps='hub browse  -- pulls'
```
ブラウザで探して開いたり、プルリクするのが面倒。面倒だなとちょっとでも思ったら、自動化やショートカットできないか考える。
-> 本来やるべきコードを書く時間を増やす。ために全力で準備する。
習慣はこういった簡単なところから始まる。

----

例3 自宅の玄関に作業できる椅子を置く
<img src="https://qiita-image-store.s3.amazonaws.com/0/26095/0bbf454d-5ba2-80ef-ca6e-f7972cc4bc4f.png" width="400">
靴も脱がずに作業できるようにしておくと、家に帰ってもすぐプログラミングを継続するようになる。(ちょっとやりすぎかも)
こういった細かい積み重ねが思っている以上に大事。

----

# やるべきことを最小の工程で着手できるように準備しておく（再掲） -> 習慣になる

----
# プログラマの3大美徳にも通じる
怠惰、短気、（傲慢）。

- 怠惰： 労力を減らすために手間を惜しまない。
面倒なことは PC にやらせたり、本質的なところに集中できるようにする。
- 短気： 面倒だったりイラったとしたら、改善できないか考えてみる。

美徳を**習慣**にする。
美徳はエンジニアの**文化**に近い。文化というのはある集団での習慣の積み重ねだと思うので、ぜひ習慣から意識すると良いのでは？

----
# まとめ
- エンジニアは学び続けることが必要
- 学び続けるための一つの方法として習慣が必要
- 習慣をつけるには、やるべきことを最小の工程で着手できるように準備しておく

常にそういうことを考えていたら、自分の中での生産性が飛躍的にアップした。ぜひ、みなさんも自分の習慣を今一度見直して、エンジニアらしい習慣を身につけてみては？
Ruby で文字列と整数の相互変換



## 整数と16進数文字列の相互変換

to_s と to_i を使います。

```ruby
> 0xabcd.to_s(16)
=> "abcd"
> "abcd".to_i(16)
=> 43981
> 0xabcd
=> 43981
```

## 文字列と16進数文字列の相互変換

pack と unpack を使います。目に見えない文字列の内容を調べるときに重宝します。

```ruby
> 'abcd'.unpack('H*').first
=> "61626364"
> ['61626364'].pack('H*')
=> "abcd"
```

## 整数と文字列の相互変換

不正なコードポイントの範囲も含めて、文字列をつくるには pack を使います。

```ruby
> [0xabcd.to_s(16)].pack("H*")
=> "\xAB\xCD"
> "\xab\xcd".unpack('H*').first.to_i(16)
=> 43981
> 0xabcd
=> 43981
```

エンコーディングを調べるには `encoding` プロパティにアクセスします。エンコーディングを変更するには force_encoding を使います。

```ruby
> "\xab\xcd".encoding
=> #<Encoding:UTF-8>
> "\xab\xcd".force_encoding('cp932').encoding
=> #<Encoding:Windows-31J>
```

Unicode 以外のレガシーエンコーディングの場合、有効なコードポイントの範囲であれば chr を使って文字列を生成することができます。

```ruby
> 0x82a0.chr('cp932')
=> "\x{82A0}"
```

不正な範囲では、エラーになります。

```ruby
> 0xffff.chr('cp932')
RangeError: invalid codepoint 0xFFFF in Windows-31J
```

フォールバックの文字を指定するのであれば rescue を使います。

```ruby
begin
  c = 0xffff.chr('cp932')
rescue RangeError => ex
  c = '?'
end

puts c
```

有効な文字列であれば　ord を使うことができます。

```ruby
> "\x82\xA0".force_encoding('cp932').ord
=> 33440
irb(main):031:0> 0x82a0
=> 33440
```

フォールバックの値を用意するには rescue を使います。

```ruby
begin
  c = '\xff\xff'.force_encoding('cp932').ord
rescue ArgumentError => ex
  c = '?'.force_encoding('cp932').ord
end

puts c.to_s(16)
```
間違えられる指数，対数，三角関数たちからの嘆願書

# 本日は

TeXの世界で生きる指数, 対数, 三角関数たちからの嘆願書が届きました．

# 僕たちを使う時は `\` を必ず前につけてね．

というのは指数, 対数, 三角関数には各々固有のTeXコマンドがあるからです:

| 関数          | bad      | good     |コマンド       |
|:-------------|:--------:|:--------:|:----------:|
| サイン        | $sinx$  |$\sin x$ |```\sin x```|
| コサイン       | $cosx$  |$\cos x$ |```\cos x```|
| タンジェント    |  $tanx$ |$\tan x$ |```\tan x```|
| 対数         |  $log$  |$\log x$ |```\log x```|
| 対数         |  $ln$   |$\ln x$   |```\ln x```|
| 指数関数(exp) |  $exp$ |$\exp x$ |```\exp x```|

数学の変数は基本的にはイタリック体でかきますが，略語から由来する複数の文字からなる数学記号はローマン体でかきます．

> 数学記号として
用いるアルファベットはイタリック体 (斜体, TEX では mathitalic 体) を使用する.
（中略）
> 略語に由来する複合数学記号では, mathroman 体を使用するのが慣例であり, 特別な配慮
が必要である．
[数学の常識・非常識—由緒正しい TEX 入力法](https://www.math.tohoku.ac.jp/tmj/oda_tex.pdf)　より引用

例えば数列を $a_1,a_2,a_3,\dots$ と書くのが普通で

```math
\mathrm{a}_1,\mathrm{a}_2,\mathrm{a}_3,\dots
```
 と書くのはおかしい．Qiitaで数列を書く時は`a_1,a_2,a_3`を間から`＄`で挟む事で　$a_1,a_2,a_3,\dots$　とかける．せっかくこのような機能があるのにQiitaの記事で数列を a1,a2,a3 とベタで書くのはかっこ悪い．
また， 変数 $a$, $b$, $c$　の積は　$abc$　と記述するため　$\sin x$　を　$sinx$　と書いてしまうと　
$sinx$ は$s$,$i$,$n$そして$x$の積として読むことになり紛らわしい．この観点からも `\` をつけて必ずコマンドを使うべきである．

# その他方面からの嘆願書

最大公約数，次元，合同式を表す記号にも対応するコマンドがある：

| 記号           | bad      | good          |コマンド       |
|:--------------|:---------|:-------------:|:----------:|
| 最大公約数（gcd）　 | $gcd$    |$\gcd$         |```\gcd x```|
| 次元　(dim)　     | $dim$    |$\dim$         |```\dim x```|
| 合同式（a mod b） | $a\ mod\ b $|$a \bmod b$ |```a \bmod b```|
| 合同式（mod p）   | $(mod\ p) $|$\pmod p$ |```\pmod p```|
$\gcd$ は greatest common divisor から由来するためローマン体にすべきである．
ただ，今の環境だと\lcm がなぜか使えない・・・．[LaTeX Question: \mathbb and lcm](https://artofproblemsolving.com/community/c68h12871_latex_question_mathbb_and_lcm)にあるように標準ではないようなので　$\mathrm{lcm}$　は ```\mathrm{lcm}``` でごまかすしかない．

(追記)　`\operatorname{lcm}`で　$\operatorname{lcm}$ が使えます．

# というわけで
一部例外を除いて高校，大学初年度の数学記号は対応するコマンドが用意されていますのでこの子たちをしっかりと使ってあげてください．例えば

- [LaTeXコマンドシート一覧-書体 斜体にしない関数](http://www002.upp.so-net.ne.jp/latex/font_not_shatai.html)

などが参考になります．
【Xcode9】シミュレータの枠を消したい

シミュレータの枠がちょっと大きすぎて邪魔だなー消せないかなーとぼんやり思っていた。
調べてみたら外せるとのこと。
さっさと調べればよかった…

<img width="300" alt="スクリーンショット 2017-10-02 18.17.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/39926/bb704a60-6c54-d958-247a-33bde09549e3.png">

# 設定場所
シミュレータのメニューバーから `Window` > `Show Device Bezels` のチェックを外す

<img width="233" alt="スクリーンショット 2017-10-02 18.17.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/39926/224c58ab-1da4-c471-a113-329b2314275a.png">


できた！
すっきり！
<img width="300" alt="スクリーンショット 2017-10-02 18.18.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/39926/7f210bea-14be-2960-b1ed-d401aec4fce1.png">


# 元記事
https://stackoverflow.com/questions/44385390/xcode-9-simulator-remove-frames
（日本語にしただけです…:upside_down:）
Xamarin GoogleMap ロゴやボタンの書き出し位置変更 memo


<h3>
ズームボタン非表示 for android 
</h3>

var MapView = Control as MapView;
var ZoomButton.Visibility = ViewStatus.Gone;

<h3>
ボタン位置変更 for android
</h3>

NativeMap.SetPadding(0, 600, 0, 0);

paddingで書き出し位置を変える
上記だと書き出し位置を上から600(Px? dpi?) 下にずらす


<h3>
ボタン位置変更 for ios
</h3>
var mapView = Control as MapView;
mapview.Padding = new UIEdgeInsets(0, 0, 100, 0):

iosも同じく
こちらは上に100ずらしてる
Docker | docker-machine を使っている時に、コンテナ(ゲスト) のIPアドレスに接続できない

直接sshやmysqlなどで接続する場合に。

# 対策

docker-machine に聞いたIPアドレスが使えるようだ。

```
$ docker-machine ip
192.168.99.100
```


# 参考

- [Connecting to a mysql running on a Docker container · Issue #95 · docker-library/mysql](https://github.com/docker-library/mysql/issues/95)

# 環境

- Docker version 17.06.1-ce, build 874a737
- docker-machine version 0.12.2, build 9371605








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
After Importing the AdMob SDK, when You archived you project You might have the following warning.


After Importing the AdMob SDK, when you archived your project you might have the following warning.
AdMob　SDKをインポート後プロジェクトを稱アカイブすると下記のようなワーニングが表示される時があります。

ex)
ld: warning: Linker asked to preserve internal global: '__block_descriptor_tmp'
...

【解決方法】
Target->Build Settings->Build Options-> Enable bitcode = NO
チャットワークAPIの自動投稿に未読を付ける

最近、チャットワークの仕様が変わったらしく、「[チャットワークAPI](http://developer.chatwork.com/ja/)経由で投稿した投稿に未読がつかなくなる」という変更がありました。

この変更には正直ちょっと戸惑っており、以前書いた「[自社のIRをGoogle Apps ScriptでChatWorkに通知する](https://qiita.com/ninomiyt/items/0ba732b91ac08d13f55d)」や通知系のプログラムに自分で気づけなくなってしまいました。

# 対処方法

考えられる対処方法は2つあると思います。

1. 通知専用の別のアカウントを作る
2. APIで「未読」を付け直す

「1.」のほうがお手軽ですが、社用のチャットワークなので、新しいアカウントを勝手に作って部屋に入れるわけにはいきません。

というわけで後者の方法で私は対応しました。

# プログラム

[先ほどの記事](https://qiita.com/ninomiyt/items/0ba732b91ac08d13f55d)のGoogle Apps Script(GAS)のプログラムのメッセージをポストする箇所を変更しました。

[GASでチャットワークに投稿するアドオン](http://c-note.chatwork.com/post/69590585422/chatworkapi-gas-library)はあるものの、[unreadを追加するメソッド](http://developer.chatwork.com/ja/endpoint_rooms.html#PUT-rooms-room_id-messages-unread)は実装されてなかったため、ひとまずモンキーパッチで対応しました。

```js
/**
 * チャットワークにメッセージを送信する
 */
function postChatWork(message, room_id) {
  var client = ChatWorkClient.factory({token: TOKEN});
  var res = client.sendMessage({room_id: room_id, body: message});

  // 「未読をつける」メソッドを追加
  client.makeMessageUnread = function(room_id, message_id) {
    return this.put("/rooms/" + room_id + "/messages/unread", {"message_id": message_id});
  }

  // 投稿直後ではAPIが失敗することがあるので、6秒ごとに10回トライする
  var err;
  for (var i = 0; i < 10; i++) {
    try {
      client.makeMessageUnread(room_id, res['message_id']);
      return;
    } catch(e) {
      if (e["errors"] === "The messages is already marked as unread.") return;
      err = e;
      Utilities.sleep(6000);
      continue;
    }
  }
  throw err;
}
```
低品質な状態を改善していくためのプロセスを考えてみた

# はじめに

- 業務やっている中のもやもやの一つ、「低品質」について見える化してみました。
- 低品質な状態を改善していくためのプロセスです。
- 現状、改善というより原因の落とし込みです。
- 最終的に具体的な改善手法までは言及しておりません。
- githubに移行する練習も兼ねてみました。
- 内容不十分だったり、間違った関連性になっている可能性がありますがお許しください。

# github

https://github.com/neriai/low-quality-improvement-process

# ロジック・ツリー

![logic-tree.png](https://raw.githubusercontent.com/neriai/low-quality-improvement-process/master/logic-tree.png)
WordPressのGutenbergに自作のブロックを追加する（実用性は無し）

WordPressのGutenbergを見て未来を感じたのでいじってみました。

Gutenberg自体が開発途上だったり、Reactのこととかあったりしするので、コード自体は結構ムダ知識なんですが、こんなことができるんだよ。というメモがわり。

## 環境
− WordPress
- Gutenberg 1.2.1

# カスタムブロックの追加手順

1. プラグインファイルの作成
2. block.jsの作成
3. 必要に応じてスタイルシートの作成

です。簡単なブロックならあっというまに追加できてしまいます。

## 猫のイラストを挿入できるカスタムブロック
https://github.com/shin1kt/gutenberg-nyanko-block

上記を作成してみました。
プラグインとして、Gutenberg 1.2.1　が動いているWordPressにインストールしていただければ動くと思います。

猫のイラストが挿入できる・・だけのカスタムブロックです。
<img width="300" alt="スクリーンショット 2017-10-02 17.31.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/73833/1b7abf95-c03d-c35e-21ec-905aa099836d.png">
こんなやつ。


### プラグインファイルの作成

プラグインファイルを作成します。
大したことはしていないです。ブロックを実際にコントロールするblock.jsを読み込んでいるだけです。
あとは、それのスタイルシートです。（エディタ側、表示側の両方を作成します）

```php:nyankoblock.php
//エディタ側
add_action( 'enqueue_block_editor_assets', function () {
	//ブロック用のjs
	wp_enqueue_script( 'nyanko-block01', plugins_url( 'block.js', __FILE__ ), array( 'wp-blocks', 'wp-element' ));

	$plugin_url = plugin_dir_url( __FILE__ );
	wp_localize_script( 'nyanko-block01' , 'mywp' , array( 'plugin_url' => $plugin_url ) );

	//エディタ側のスタイル
  wp_enqueue_style( 'nyanko-block01-editor', plugins_url( 'editor.css', __FILE__ ),array( 'wp-edit-blocks' ),filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' ));

});

//表示側のスタイル
add_action( 'enqueue_block_assets', function () {
	wp_enqueue_style( 'nyanko-frontend', plugins_url( 'style.css' , __FILE__ ), array( 'wp-blocks' ), filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' ));
});

```


### block.jsの作成

実際にブロックの動作はこれでコーディングします。React.jsです。（2017-09-30現在）

```js:block.js
( function() {
	var el = wp.element.createElement;
	var registerBlockType = wp.blocks.registerBlockType;

	registerBlockType( 'shin1kt/nyanko', { //任意の名前　プリフィックス的
		title: 'nyanko', // ブロック名
		icon: function(){
			//ブロックアイコン　imgタグとかでもOK
			return el(
				'img',
				{src: mywp.plugin_url + '/neko-icon.svg',class:'nyanko-icon'}
			);
		},
		category: 'common',//ブロックのカテゴリ

		edit: function( props ) {
			//エディタ画面で挿入される要素
			return el(
				'div',
				{
					class: 'nyan-block',
				},
				React.createElement('div', {class:'nyan-ballon'},
					React.createElement('p', {},'にゃーん')
				),
				React.createElement('img', {src: mywp.plugin_url + '/neko.svg'})
			);
		},


		save: function( props ) {
			//表示側でのHTML要素
			return el(
				'div',
				{
					class: 'nyan-block',
				},
				React.createElement('div', {class:'nyan-ballon'},
					React.createElement('p', {},'にゃーん')
				),
				React.createElement('img', {src: mywp.plugin_url + '/neko.svg'})
			);
		},
	} );
})();
```

とにかく動きを覚えるために最低限のコードのみ
固定のHTMLを挿入するブロックです。

icon:ブロックのアイコンの見た目や名前
category:ブロックの表示場所
edit: 編集画面で挿入される要素
save: 表示側のHTML要素

上記を設定してあげるだけです。

あとはスタイルとかを書いてあげれ動きます。

以上。

実際には、これからバージョンアップで変わるかもだし、そもそもReact以外で書き直しになったら上記コードはムダ知識になんですが、将来的にGutenbergがリリースされたときには、いろいろな便利なカスタムブロックを作れるようになるといいな。と思う今日このごろ。

そんなWordPressの未来をすこし感じたくて学んでみました。(^^



## 参考
https://github.com/WordPress/gutenberg/tree/master/blocks
https://github.com/ahmadawais/Gutenberg-Boilerplate

猫のイラストはこちらのを使わせていただきました。

http://icooon-mono.com/12775-%E7%8C%AB%E3%81%AE%E7%84%A1%E6%96%99%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B31/
datetimepickerのテキストボックス上でマウスホイールを動かせなくする方法

jQueryのDatetimepickerについては、Qiitaでもいくつか記事があります。

こことか
https://qiita.com/tagosaku324/items/ee6391e29405421e8056


マウスホイールの制御についての日本語の記事がなかったので書いておきます。
本家をみたら書いてあるんですが、英語がよくわからない人のために（汗）
https://xdsoft.net/jqplugins/datetimepicker/

scrollInputだけで良さそうですが、それ系のもいっしょにFalseしておけばOK。
これだけです。


| option| value |
|:-----------------|------------------:|
| scrollMonth | true |
| scrollTime | true |

```js:datetimepicker.js
$('.myDatePicker').datetimepicker({
	scrollMonth : false,
	scrollInput : false
});
console.logが無効化されている場合に汚染されてないconsole.logを召喚する方法

# console.logが無効化されている場合に汚染されてないconsole.logを召喚する方法
タイトルの通りなのですが、セキュリティー上の理由やデバッグメッセージの非表示処理が面倒臭くて本番サイトではconsoleそのものを無効にしているサイトを結構目にします。

そのサイトの動きをちょっと追っかけたいなーって時に不便なわけですが、復活させる方法が目からウロコだったので私的メモとしてここに記録しておきます。

# 引用元はこちらのサイト様
隠ぺいされた console.log を無理やり復活させる対症療法
http://blog.clock-up.jp/entry/2016/11/05/js-console-log-restore

発想としては、iframeを生成しそこから汚染されていないconsole.logを取り出すというもの
なるほどー

# 自分メモ
```javascript
(function(){
  var f = document.body.appendChild(document.createElement('iframe'));
  f.style.display = 'none';
  window.console = f.contentWindow.console;
})();
```


以上
Node School メモ

#Node Schoolとは
無料でNodeやjavascriptなどの関連技術を学べるオープンソースツールです。
https://nodeschool.io/

不意に存在を知り、少し調べるとjavascriptの勉強にも適しているということで、実際にTryしてみようと思います。

#Node.jsをインストール
https://nodejs.org/ja/
こちらの公式サイトから最新版をインストールできます。

その際に、npmというパッケージマネージャーも同時にインストールできます。

#講座にチャレンジ！

## javascripting
まず手始めに、「チュートリアル」のボタンから、講座一覧を覗いて見ます。
（※筆者は日本語に変えてサイトを見ています）
![javasc0.PNG](https://qiita-image-store.s3.amazonaws.com/0/200222/63383b5a-c161-fe01-0c95-2520f532cef7.png)

このなかのjavascriptingをやってみます。

指示通り、コマンドプロンプトで
npm install -g javascripting
と実行すると、教材（？）がインストールされます。

これで、コマンドプロンプトで
＞javascripting　
が起動可能になりますので、早速実行。

すると、以下のような状態に変わります･･！

![javasc1.PNG](https://qiita-image-store.s3.amazonaws.com/0/200222/1641c1e4-9174-9add-0a9c-fef6167fbafb.png)

ここからは、順番にコマンドプロンプトで操作しながら、任意のエディタを使って、javascriptの基本をひたすら打ち込む感じでした。

javascriptが初心者･･･という人は、そもそもコマンドプロンプト基点でファイルをいじる･･･ということすら難儀に感じるかもしれませんが、
「mkdirでディレクトリを作れ」などという指示もあるので、コマンドプロンプトの動かし方の練習にもなるかもですね。

## How to markdown
マークダウン記法についての講座があったので、ちょっとやってみました。

Qiitaをよく見てはいるけど、綺麗に書ける自信がない･･･htmlタグでやってきたからマークダウンは慣れてない･･･
みたいな、まさに筆者のような人間にはもってこいです。
（いまだに強調とかボールドタグ使います。）

この講座をやるときは、VScodeがとても使いやすかったです。
VScodeなら、markdown拡張子を編集中、右上のボタンもしくは `Ctrl+K V`から「プレビュー」を表示できます。
![vasssmd.png](https://qiita-image-store.s3.amazonaws.com/0/200222/4cca1632-b622-cc4c-dda2-cd4ac61a316b.png)

こちらの記事で VS code & Markdownがもっと使いやすい方法紹介されています！是非ご一読！
https://qiita.com/kitfactory/items/2fde799fa092f0d8f0f1


【追記】このように、課題に挑戦しつつ、どのようにマークされているか随時確認できます。
![vscode_md.PNG](https://qiita-image-store.s3.amazonaws.com/0/200222/6511c4ea-a8a2-abf2-6d55-863fa8a72320.png)


ただ、この講座は現在英語しかない模様･･･
せっかくのオープンソフトなので、GitHubとMarkdown記述の練習がてら、翻訳をしてみようと思います。

やりながら翻訳して進めて行きますので、もしかしたらそのうち日本語が選べるようになってるかもしれません。




#末筆
まだ基本をやっているところですが、面白いと思う講座があれば順番に紹介できればと思います。


参考記事
書いている途中ですばらしい先駆者様を発見してしまいました。参考になります。
https://qiita.com/kenfdev/items/277ce7a7310ac246b3b3
Project Euler Q10 【素数の和】

Project Eulerをワンライナーで解いてみる。
間違っていたらコメントください。


## 問題
10以下の素数の和は $2 + 3 + 5 + 7 = 17$ である.

200万以下の全ての素数の和を求めよ.

## 解答
```bash
seq 2000000 |
factor |
awk 'NF==2' |
awk '{a+=$2}END{print a}'
142913828922
```

## 答え合わせ
こちらのサイト様と一致していればOKとした。
[Python で Project Euler #10「素数の和」](https://qiita.com/hoxo_m/items/388d48ca9aebb3c03ccf)
vulsrepoをsystemd的に扱う(自動起動しよう)

**VulsRepo側でsystemd/sytemVの起動スクリプトが実装されたので、多分この記事の作業は不要です。ですが、自分でsystemdの設定を行う際の参考として残しておきますね。**

# 概要

新しくなったvulsrepoは、Webサーバのコンテンツとして配置するのではなく、実行ファイルとして配布されています。
そのため自動起動等の設定は自分で行う必要があります。

本ページでは、vulsrepoをsystemctl start/stop/restart で扱えるようにするためのヒントを記載します。

(というか、単なるsystemdで自動起動するにはどうすんの？の記事です)

# systemd?

SystemV系の/etc/init.d/SERVICENAME よりは、sytemdでの起動設定の方が初めは面倒に感じるかもしれません。

systemdでの設定は以下のように行います。

- 起動プログラムを用意する
- /etc/systemd/system/SERVICENAME.serviceに動作を記載する
- systemctl enable SERVICENAMEで自動起動登録する
- systemctl (start|stop|restart) SERVICENAMEで利用する
    - reload等、必要があれば実装してください。

vulsrepoで上記設定をどうするかを記載します。

# 設定

前提として、以下の設定がされているとします。

- vulsrepo自体のインストールと動作確認がされていること
    - インストールディレクトリは /opt/vuls/vulsrepo の想定
    - configの設定が完了し /opt/vuls/vulsrepo/server/vulsrepo-server でvulsrepoが動いている

## 起動プログラムを用意する

vulsrepo-server 自体を直接たたくので、不要。

## /etc/systemd/system にファイルを書く

vuls-serverを起動/リスタートするための設定を書きます。

```bash:/etc/systemd/system/vulsrepo.service
[Unit]
Description=vulsrepo daemon
Documentation=https://github.com/usiusi360/vulsrepo

[Service]
ExecStart = /opt/vuls/vulsrepo/server/vulsrepo-server
ExecRestart = /bin/kill -WINCH ${MAINPID} ; /opt/vuls/vulsrepo/server/vulsrepo-server
ExecStop = /bin/kill -WINCH ${MAINPID}
Restart = no
Type = simple
User = vuls
Group = vuls

[Install]
WantedBy = multi-user.target
```

認識しているかを確認をする

```
# systemctl list-unit-files --type=service|grep vulsrepo
vulsrepo.service                           disabled 
#
```

## 自動起動設定と動作確認

enableすれば自動起動します。
あとは、systemctl start/stop vulsrepoで開始と停止、restartもできます。

```
# systemctl enable vulsrepo
# 
# systemctl start vulsrepo
# 
# ps -ef | grep vulsrepo
vuls      4046     1  0 16:39 ?        00:00:00 /opt/vuls/vulsrepo/server/vulsrepo-server
root      4245 20446  0 16:45 pts/0    00:00:00 grep --color=auto vulsrepo
# 
# systemctl restart vulsrepo
# ps -ef | grep vulsrepo
vuls      4268     1  0 16:45 ?        00:00:00 /opt/vuls/vulsrepo/server/vulsrepo-server <---PID変わった
root      4275 20446  0 16:45 pts/0    00:00:00 grep --color=auto vulsrepo
# 
# systemctl stop vulsrepo
# ps -ef | grep vulsrepo
root      4302 20446  0 16:46 pts/0    00:00:00 grep --color=auto vulsrepo
# 
```

# まとめ

gitのファイルには/etc/systemd/system/vulsrepo.serviceは含まれていませんが、設定ファイルを置くだけで自動起動設定できますので、活用ください。
haml inputやlabelをform_forにするには

本当に簡単な例.意外と載ってる記事がない  
.chat_group_form__field.clearfix
      .chat_group_form__field__left
        = f.label 'ラベル名', class: 'クラス名'
        = f.text_field :カラム名, class: 'クラス名'
WordPress外のPHPスクリプトで、WordPressの404ページを使う

# 概要

WordPressで運用しているサイトに、何らかの理由で別のPHPスクリプトを導入している。そのスクリプトで 404 が発生した時、WordPress で管理している404ページを出力する。

# 方法

`wp-load.php` を読み込み、404ページを読み込む。
404ページのパスは `get_404_template` 関数で取得できる。

# 実装

```php
require_once('wp-load.php');

http_response_code(404);
include(get_404_template());
exit;
```
【PHP】日時を、指定した分単位に切り上げ

# 概要

日時を、指定した間隔で切り上げたいシーンがあったので、実装。 ~~完全に、備忘録レベルですが~~意外と使いそうなので、残しておきます。

# 実装
```
/**
 * 指定した分で切り上げたタイムスタンプを返す
 * 
 * @param int $timestamp タイムスタンプ
 * @param int $margin_minutes 切り上げる単位(分)
 * @return int タイムスタンプ
 */
function ceilDatetime($timestamp, $margin_minutes = 20){
	$_year = date('Y', $timestamp);
	$_month = date('m', $timestamp);
	$_day = date('d', $timestamp);
	$_hour = date('H', $timestamp);
	$_minute = date('i', $timestamp);

	if($_minute % $margin_minutes) $_minute += $margin_minutes - ($_minute % $margin_minutes);

	return mktime($_hour, $_minute, 0, $_month, $_day, $_year);
}
```

# 実行例

## サンプルコード

```sample.php
<?php

$dates = array(
	'2017-10-01 00:11',
	'2017-10-01 00:20',
	'2017-10-01 00:35',
	'2017-10-01 00:55',
	'2017-10-01 23:55',
	);

foreach($dates as $v){
	echo date('Y-m-d H:i:s', ceilDatetime(strtotime($v))) . "\n";
}
```

## 結果

```
2017-10-01 00:20:00
2017-10-01 00:20:00
2017-10-01 00:40:00
2017-10-01 01:00:00
2017-10-02 00:00:00
```
uWSGI の INIファイル設定値 を環境変数で動的に変化させる

## 概要
[uWSGI](http://uwsgi-docs.readthedocs.io/en/latest/index.html#) は [WSGI](https://ja.wikipedia.org/wiki/Web_Server_Gateway_Interface) サーバの一種で、アプリケーションの動作環境を提供するものです

uWSGI 設定をファイル保存（git管理など）してて、かつ単一環境で複数アプリケーションを起動させる場合に、設定をアプリケーションごとに変化させたいことがあります
そういったとき、共通の設定ファイルを書き換えることなく、動的に変化させる方法です

### 環境
uwsgi：Ver. 2.0.14


## 環境変数で設定を変える方法

INIファイルそのものに環境変数を埋め込むことはできないので、少し工夫して環境変数を渡します
http://uwsgi-docs.readthedocs.io/en/latest/Configuration.html#environment-variables


### INI ファイル中の記述
任意の箇所に、`%(var-name)` の書式で環境変数用のプレースホルダを記述します
例として `podfile` と `logto` を起動時に任意の名前に書き換えます
（git 管理されたIniファイルで複数プロセス起動させると `pidfile` や `logto` が上書きされて困るので、ここは特に動的に変更したくなる箇所です）


```/git_repo/path/to/uwsgi.ini

[uwsgi]
...
logbase = /var/log/your_project
pidfile = %(logbase)/%n.%(foo).%(bar).pid
logto = %(logbase)/%n.%(foo).%(bar).log
...

```


### 環境変数を渡してプロセス起動
`UWSGI_` という接頭辞付きの 大文字で始まる変数が渡せます
（`UWSGI_FOO` という変数を引き渡すと、INI ファイル内で `%(foo)` として参照できます）
なんらかのプログラム結果を渡すなど、環境に合わせて変化させるとよいでしょう

```

$ UWSGI_FOO=$(hoge.py) \
  UWSGI_BAR=$(fuga.py) \
  uwsgi --ini /git_repo/path/to/uwsgi.ini

```

### 動作確認
設定が置き換えられ、意図したとおりに動作している（例ではファイルが出力されている）ことを確認します

```
ls -l /var/log/your_project/uwsgi.*

/var/log/your_project/uwsgi.hoge.fuga.pid
/var/log/your_project/uwsgi.hoge.fuga.log
```

大丈夫そうですね


シンプルです、お試しください！ :)


## 余談
管理コマンドはスクリプト化しておくとよいでしょう
動的に変更する部分は環境なりコードにあわせて自動的に取得できるようにしておきます

```/path/to/uwsgi_util.sh

PROG_UWSGI=$(which uwsgi)
PROJECT_HOME=/git_repo

UWSGI_INI=$PROJECT_HOME/path/to/uwsgi.ini
USERNAME=$(whoami)
VERSION="/path/to/hoge --version"

case $1 in
    start)
        UWSGI_USERNAME=${USERNAME} UWSGI_VERSION=${VERSION} ${PROG_UWSGI} --ini ${UWSGI_INI}&
        ;;
    stop)
        ${PROG_UWSGI} --stop ${UWSGI_PID}
        ;;
    restart)
        touch ${UWSGI_RELOAD}
        ;;
    *)
        echo '$0 start|stop|restart'
        ;;
esac
```

### もっと柔軟な設定
uWSGI は http経由など多様な設定ロードをサポートしています
http://uwsgi-docs.readthedocs.io/en/latest/Configuration.html#loading-configuration-files

複雑な設定が必要な場合は、http経由で動的に設定を渡すなど するとよさそうです

```
uwsgi --ini http://uwsgi.it/configs/myapp.ini # HTTP
uwsgi --xml - # standard input
uwsgi --yaml fd://0 # file descriptor
uwsgi --json 'exec://nc 192.168.11.2:33000' # arbitrary executable
```

## 参考資料
- http://uwsgi-docs.readthedocs.io/en/latest/Configuration.html#
LambdaとKinesisStreamによる非同期並列処理


## はじめに
Kinesis Streamに入れたログをlambdaで処理するときlambdaはシャードに対して直列で動きます
Kinesisにログが入るスピード ＜ ログ1件あたりのlambdaの処理時間となると、ログが入ってから処理が完了するまでの時間がどんどん開いていきます
シャードを分割すればlambdaも並列で動くのですが、分割するほどログも多くない
ということで、シャードは一つですが非同期に並列で処理できる仕組みを考えました
言語はpython
自分自身を再帰的に呼び出します


## 参考
lambdaとkinesisの設定方法は他を参考にしてください
[AWS Lambda編～Kinesisと連携してみる～](https://recipe.kc-cloud.jp/archives/8155)
[ストリーム型(kinesis stream)のAWS Lambdaの同時起動数とデータの取り方を整理](https://qiita.com/TakashiKOYANAGAWA/items/f290ed5d4e305508dc63)


## 設定
デプロイしたlambdaにkinisisを紐づけます
一度に処理するログの数は10
![スクリーンショット 2017-09-28 18.48.22.png](https://qiita-image-store.s3.amazonaws.com/0/117920/d1f5fdc1-5742-6f07-efaf-ff994ddb1564.png "スクリーンショット 2017-09-28 18.48.22.png")

## コード

### 非同期処理へ投げる
* Kinesisへ投げるログはjson
* Kinesisから流れてきたログは配列に入れ、async_flagをつけて非同期実行へ投げる
* async_flagが付いている場合は、データを取得してループを回す


```run.py

import json
import base64
import time
from aws_lambda import AwsLambdaModule



def run(event, context):

    data_dict = {}
    data_dict['async_flag'] = True
    data_dict['data'] = []


    if 'async_flag' in event:
        # 非同期で呼び出される場合
        main(event['data'])

    else:
        # 非同期で呼び出す場合
        # キネシスストリームから起動した場合
        for record in event['Records']:

            # kinesisのデータを戻す
            kinesis_data = load_kinesis_data(record['kinesis']['data'])
            # 詰め替える
            data_dict['data'].append(kinesis_data)


        # 非同期で再帰呼び出し
        lambda_function = AwsLambdaModule()
        lambda_function.invoke_async(data_dict)





def main(data_):
    for data in data_:
        time.sleep(2)
        print(data)




def load_kinesis_data(data):
    """
    kinesisから受け取ったデータはエンコードされているため
    """
    payload = base64.b64decode(data)
    return json.loads(payload)

```

### lambdaの非同期呼び出し

```aws_lambda.py

import os
import json
import boto3




class AwsLambdaModule(object):



    def __init__(self):
        self.client = boto3.client('lambda')
        self.function_name = os.environ.get('AWS_LAMBDA_FUNCTION_NAME')



    def invoke_async(self, data):
        """
        lambdaを非同期呼び出し
        """
        if self.function_name is None:
            return

        print('### Asynchronous execution ###')
        self.client.invoke(
            FunctionName=self.function_name,
            InvocationType="Event",
            Payload=json.dumps(data)
        )


```

## 結果
100連続でKinesisへログを挿入

```
{"test":"momonga"}
```
![スクリーンショット 2017-10-02 16.23.05.png](https://qiita-image-store.s3.amazonaws.com/0/117920/8c4a4adb-34f7-66a5-ade8-f40ba4c2342d.png "スクリーンショット 2017-10-02 16.23.05.png")


非同期処理への命令と2秒ごとにログをダンプしている処理が非同期で動作していることがわかります
readコマンドで先頭の単語を取り出す

マニュアル見たら「あぁなんだそういうことか」という感じなのだけれども。

`read`コマンドは標準入力から一行受け取り、単語を分割して引数に割り当てる。
単語を分割した結果、`read`の引数が不足していれば、最後の要素に余った単語を全て突っ込むようになっている。

よって、`read`の末尾にゴミ箱用の引数を置いておけばよい。

```bash
# _trushは使用しない予定
read -r param _trush
```

シェルスクリプトにて、不足パラメータの入力を促す際に利用できる。

```bash
param=$1
if [ -z $param ]; then
    echo "error: パラメータを入力してください。" >&2
fi
while [ -z $param ]; do
    echo -n "パラメータ: " >&2
    read -r param _trush
done
echo "param: $param"
```

# 参考URL

- [Linuxコマンド集 - 【 read 】 読み出したファイルを解釈する：ITpro](http://itpro.nikkeibp.co.jp/article/COLUMN/20060227/230866/)
Juce 5のProjucer を Ubuntu14.04でmake

# 足りないパッケージのインストール

足りないパッケージを調べる．
エラーが表示されなかったら追加でパッケージをインストールする必要は無いと思われる．

```shell-session:Terminal
$ cd JUCE/extras/Projucer/Builds/LinuxMakefile/
$ make check-pkg-config
```

自分の環境では、足りなかったパッケージは以下は、
libcurl、gtk+-x11-3.0、webkit2gtk-4.0でした．

```shell-session:Terminal
$ sudo apt-get install libcurl4-openssl-dev
$ sudo apt-get install libgtk-3-dev
```

libwebkit2gtk-4.0はリポジトリが足りなかったので追加してインストール．

```shell-session:Terminal
$ sudo add-apt-repository ppa:webkit-team/ppa
$ sudo apt-get update
$ sudo apt-get install libwebkit2gtk-4.0-dev
```

# Projucerのmake
パッケージのインストールが終わったらビルドをする．

```shell-session:Terminal
$ cd JUCE/extras/Projucer/Builds/LinuxMakefile/
$ make
```
ビルドが成功すると、
JUCE/extras/Projucer/Builds/LinuxMakefile/build
にProjucerが出来ている．
OpenMVに触ってみた

##OpenMVって何

最近OpenMVというマシンビジョンユニットが販売されています。
https://openmv.io/
![IMG_9631.JPG](https://qiita-image-store.s3.amazonaws.com/0/186023/7d15db27-b03e-daac-bb7e-42f5e0352c6a.jpeg)

プロセッサーにCortex-m7を搭載したマイコンボードのような物で、ボードにはイメージセンサーとレンズが乗っている他、MicroSDスロットもあり、スナップショットや動画の保存ができたり、その他のデータ保存が可能なようです（そのうち試してみます）。
またGPIOも何本か出ていて接続することができます。
メーカーからはシールドも販売されているようです。
https://openmv.io/collections/shields

プログラムは専用のIDEが用意されており、micro Pythonでプログラムを作成します。
https://openmv.io/pages/download
<img width="1181" alt="ide_first.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/186023/bd790448-c4b0-8788-4630-5303848c8012.jpeg">
IDEにはコードエディタ、シリアルモニタ、カメラ画像、そしてヒストグラムが表示されます。

IDEとセットでサンプルプログラムがいくつかあり

- Lチカ
- とりあえずカメラ画像をIDEに表示させるプログラム
- カメラ画像に図形なんかを描画するプログラム
- 画像にフィルターかけるプログラム
- 動画やスナップショットを保存するプログラム
- 数字を認識するプログラム
- 色を認識するプログラム
- 特徴点を抽出してマークするプログラム
- 顔を検出するプログラム
- アイトラッキング
- 平面や円を検出するプログラム
- シールドを使ったプログラム

この他様々なサンプルプログラムがあります。
今回はとりあえず接続して動かすところまで触ってみました。

なお今回はMacOSX10.13とOpenMV IDE 1.7.1の環境で動かしています。

##とりあえずOpenMVを動かす

###OpenMVを接続する

まず以下のリンクからOpenMV IDEをダウンロードして展開します。
https://openmv.io/pages/download

IDEの展開が終わったら起動してみましょう。下のように「helloworld」のサンプルプログラムが開かれているIDE画面が出てきます。
<img width="1181" alt="ide_first.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/186023/bd790448-c4b0-8788-4630-5303848c8012.jpeg">

OpenMVとPCを接続し、ドライバのインストールが終わればIDE側から接続する準備が整います。

OpenMVとの接続と接続状態の確認はIDE左下のボタンで行います。
上のアイコンのボタンがOpenMVとの接続、下のアイコンのボタンがコード実行です。
<img width="57" alt="disconnect.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/186023/41abe08a-8aec-af6f-2486-3dfcbaa98f98.jpeg">
正直わかりにくいですが、上のように**接続されているように見えるアイコンのときは切断されて**いて、**クリックすると接続される**という意味のようです。

接続されると下のようになります。
<img width="59" alt="connect.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/186023/8fcc2761-0647-df6a-7286-e505d934f48c.jpeg">

##コードを実行する

###実行前にまずファームアップデートを
初回起動時に「skip_frames(time = 2000)」なんて命令無いよ、なんてIDEから怒られ実行ができませんでした。
これはOpenMV側のファームウェアバージョンが古いのが原因のようで、動かない場合はIDE下中央「Firmware Version」のところに「バージョン古いからバージョンアップしてね」みたいな文言が出ている場合があります。（バージョンアップしちゃったので画像ありません）
![fwv.png](https://qiita-image-store.s3.amazonaws.com/0/186023/7bef333f-ecc7-59b2-0455-6806687497ba.png)
この時は、このIDE下のバージョン表示をクリックすることでファームウェアのバージョン確認とバージョンアップ（あるいは復元）を行うことができます。
購入後まず始めに行う

###コードを実行する

OpenMVと接続した状態で、IDE左下の緑の三角のボタンをクリックするか【⌘+R】で、IDEのコードエディタに入力されているプログラムが実行されます。
実行実行されている間は、アイコンは下のようになります。
<img width="61" alt="run.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/186023/b2d71704-d5d4-09f2-bbac-0c7487b98e9a.jpeg">

問題なく実行されると、IDE右上にカメラの映像が表示されるのと一緒に、IDE下の「SerialTerminal」をクリックするとfpsの値が連続で送られて来ているのが確認できます。
<img width="900" alt="run_hw.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/186023/91cd3ac9-516c-75bb-18ca-c24baab9ee57.jpeg">

この他にも色々と機能がありますが、次は顔検出を使って顔を追いかけるロボットを作ってみようかと思います。
Electronでタップモード

# Chromeデバッグモードの1機能、タップ

Chromeには検証で開発者ツールを起動すると、その画面の左上付近にToggle Device toolberという名前が出るボタンがあります。

これを使うと、そのWebサイトをiPhone等の解像度で見れる他、カーソルがタップモード？になり、クリックをタップとして扱うことができます。

このモードをElectronでも使いたい場合にどうするかというのが今回の記事です。

以下、レンダー側の内部で使える `<webview>タグ` は `<webview>` と表記します。


# デバッグコマンド

Chromeにはどうもデバッグコマンド用のインターフェースがあるらしく、それをElectronのメインプロセスで実行します。

```js
const win = new BrowserWindow();
if ( !win.webContents.debugger.isAttached() )
{
	win.webContents.debugger.attach( '1.2' );
}
win.webContents.debugger.sendCommand( 'Emulation.setTouchEmulationEnabled', { enabled: true } );
```

## 詳しい説明

Chromeが用意した命令などはこちらで確認可能です。

https://chromedevtools.github.io/devtools-protocol/1-2/Emulation/

今回は1.2を使うので、1.2のリンクを張っています。

この `BrowserWindow.webContents.debugger` はChromeのWebviewに搭載されているので、Electronで使用可能な`<webview>` でも `<webview>.debugger` で一応呼び出すことが可能です。
しかし、 `debugger.attach` を呼び出さなければ `debugger.sendCommand` で何を送っても無反応で、かつその `debugger.attach` はレンダープロセスでは実行できないらしいので、今回はメインプロセス側でレンダーのWebviewに対してタップモード？を指定しています。

なお、 `true` を `false` に書き換えれば無効化（いつものマウスモードに）できるので、ipc等でレンダー側からメインプロセスにつないであげれば、レンダー側のアクションで切り替え可能です。

## その他

レンダー内の `<webview>` も `attach` さえできれば使えそうですが、メインプロセス側からどうやって見つけて呼び出すかまだ不明なので、ちゃんと `<webview>` で可能かどうかは不明です。

また、今回のタップモードで `<webview>` 内の要素をクリックした時、タップイベントは処理されていそうですが、クリックイベントは処理されていないような挙動だったので、注意が必要です。
Xcode9 で Alcatraz を入れる方法

Xcodeをアップデートして新しくしたらプラグインが効かなくなっていたのでまた入れなおしました。

## 環境
- mac OS High Sierra
- Xcode 9.0
- Alcatraz 1.2.0

## インストール

### 1. Xcodeを落とす
まず、Xcodeを開いていたら閉じてアプリケーションを終わらす。

### 2. Alcatrazインストール

[Alcatraz](http://alcatraz.io)のページにある通りインストールのコードをターミナルで打つ。

```
$ curl -fsSL https://raw.githubusercontent.com/supermarin/Alcatraz/deploy/Scripts/install.sh | sh
```

注意書きにもあるが、これ自体はXcode８以降は対応していない。それゆえこの時点でXcodeを開いてもAlcatrazが入っていない。

### 3. update_xcode_pluginsを使う

プラグインをXcode8以降で使うにはUUIDを追加しなくてはならずそれを自動で行ってくれるツール[update_xcode_plugins](https://github.com/inket/update_xcode_plugins)を使います。

#### gemを使ってインストール

```
$ gem install update_xcode_plugins
```

うまくいかない場合は

```
$ sudo gem install -n /usr/local/bin update_xcode_plugins
```

#### update_xcode_pluginsを実行

```
$ update_xcode_plugins
```

これだけだと動かないプラグインがあるので、以下を実行

```
$ update_xcode_plugins --unsign
```

### 4. Xcodeを開いて確認
インストール後初めて開くときはWarningがでるので、Load Bundleを押す。するとAlcatrazが読み込まれる。

メニューバーのWindowでPackage Managerが表示されてればOK!
Dockerコンテナをイメージに保存する

コンテナ上に作った環境をコピーしたり移行したりしたいときに。

Dockerコンテナのコンソール上で、`Ctrl-p+Ctrl-q`を押してコンテナをデタッチします。

```bash:bash(Dockerホスト)
sudo docker commit -m "環境の説明とかを書きます" コンテナID イメージ名
```

保存されていることを確認します。

```bash:bash(Dockerホスト)
sudo docker images
```

参考にしました
https://qiita.com/tubone/items/a3bad04abf4c700cae3d
http://aics-app.sakura.ne.jp/blog/2015/01/06/docker-%E3%81%A7-%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E3%81%AE%E4%BF%9D%E5%AD%98commit/
Docker 初心者 — ssh で接続できるサーバーを立てる

# 解説

dockerだからといって特別な何かをするわけではない。

通常のサーバーと同じように、

- openssh をインストールする
- パスワードを設定する
- 必要な設定を書き換える

ということを順におこなう。

# 動作例 (Ubuntuの場合)

## Dockerfile

sed で強引に ssh の設定ファイルを書換えたりしている

```Dockerfile
FROM ubuntu:16.04

RUN apt-get update && apt-get install -y openssh-server
RUN mkdir /var/run/sshd
RUN echo 'root:screencast' | chpasswd
RUN sed -i 's/PermitRootLogin prohibit-password/PermitRootLogin yes/' /etc/ssh/sshd_config

# SSH login fix. Otherwise user is kicked off after login
RUN sed 's@session\s*required\s*pam_loginuid.so@session optional pam_loginuid.so@g' -i /etc/pam.d/sshd

ENV NOTVISIBLE "in users profile"
RUN echo "export VISIBLE=now" >> /etc/profile

EXPOSE 22
CMD ["/usr/sbin/sshd", "-D"]
```

( [Dockerize an SSH service | Docker Documentation](https://docs.docker.com/engine/examples/running_ssh_service/#build-an-eg_sshd-image) より )

## イメージの作成

```
$ docker image build . -t ssh_server
```

## コンテナの実行

適当なポートを繋げる。

```
$ docker run -d -p 10000:22 ssh_server
```

`[コンテナID]` が標準出力されるので控えておく。


## sshコマンドでアクセス

パスワードを聞かれるので入力する。( この例では `screencast` )

```
ssh root@127.0.0.1 -p 10000
```

# 環境

- Docker version 17.06.1-ce, build 874a737








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Project Euler Q8 【数字列中の最大の積】

Project Eulerをワンライナーで解いてみる。
間違っていたらコメントください。


## 問題
次の1000桁の数字のうち, 隣接する4つの数字の総乗の中で, 最大となる値は, $9 × 9 × 8 × 9 = 5832$である.

73167176531330624919225119674426574742355349194934
96983520312774506326239578318016984801869478851843
85861560789112949495459501737958331952853208805511
12540698747158523863050715693290963295227443043557
66896648950445244523161731856403098711121722383113
62229893423380308135336276614282806444486645238749
30358907296290491560440772390713810515859307960866
70172427121883998797908792274921901699720888093776
65727333001053367881220235421809751254540594752243
52584907711670556013604839586446706324415722155397
53697817977846174064955149290862569321978468622482
83972241375657056057490261407972968652414535100474
82166370484403199890008895243450658541227588666881
16427171479924442928230863465674813919123162824586
17866458359124566529476545682848912883142607690042
24219022671055626321111109370544217506941658960408
07198403850962455444362981230987879927244284909188
84580156166097919133875499200524063689912560717606
05886116467109405077541002256983155200055935729725
71636269561882670428252483600823257530420752963450

この1000桁の数字から13個の連続する数字を取り出して, それらの総乗を計算する. では、それら総乗のうち、最大となる値はいくらか.

EX 6桁の数123789から5個の連続する数字を取り出す場合, $1*2*3*7*8と2*3*7*8*9$の二通りとなり, 後者の$2*3*7*8*9=3024$が最大の総乗となる.

## 解答

```bash
time cat problem8.txt |
tr -d '\n' |
awk -v FS= '{for(i=1;i<=NF-13+1;i++){print substr($0,i,13)}}' |
awk -v FS= '{s=1;for(i=1;i<=NF;i++){s*=$i};print s}' |
sort -n |
tail -1
23514624000

real	0m0.027s
user	0m0.025s
sys	0m0.024s
```

※2018/01/22修正
答えが全然違っていたので修正しました。

$0$が含まれるものは計算不要だが、処理速度的に問題ない為、除外していない。

## 答え合わせ
こちらのサイト様と一致していればOKとした。
[Python で Project Euler #8「数字列中の最大の積」](https://qiita.com/hoxo_m/items/2f859052e11954d4b28f)
Migrationファイル内でrenameColumnがエラーになったのを解決


エラー内容と解決した方法と参考にしたURLだけ書きます

#環境
* Laravel 5.5.4
* Composer 1.4.2

#エラー内容
```
$php artisan migrate
  [Symfony\Component\Debug\Exception\FatalThrowableError]
  Class 'Doctrine\DBAL\Driver\PDOMySql\Driver' not found
```

#参考URL
* [ARTISAN MIGRATE で DROPCOLUMNがエラーになりハマる](https://laravel10.wordpress.com/2015/02/27/dropcolumn%E3%81%8C-class-doctrinedbaldriverpdosqlitedriver-not-found-%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%AB%E3%81%AA%E3%82%8B/ "ARTISAN MIGRATE で DROPCOLUMNがエラーになりハマる")

* [laravel4 migrate カラム名変更](https://qiita.com/MasatoYoshioka@github/items/501119fceeae2c47ae83 "laravel4 migrate カラム名変更")


#解決方法
`require doctrine/dbal` を実行する

```
$composer require doctrine/dbal
.
.
.
.
$git diff composer.json
diff --git a/composer.json b/composer.json
index 04aadf9..74fd123 100644
--- a/composer.json
+++ b/composer.json
@@ -8,6 +8,7 @@
         "php": "~7.1.0",
         "barryvdh/laravel-debugbar": "^2.4",
         "dimsav/laravel-translatable": "^8.0",
+        "doctrine/dbal": "^2.6",
         "laravel/framework": "5.5.*",
         "laravel/tinker": "~1.0",
         "league/csv": "^8.0"
```
Qiita API v2の日時変換の書式指定

#概要
```:QiitaAPIv2の日時書式
"2000-01-01T00:00:00+00:00"
```
Qiita API v2で受け取る日時書式は、上記の通り。
これは、RFC3339、ISO8601の形式です。

DateFormatterの書式指定をどうすればいいか、
意外にすんなり検索出来なかったので、覚書程度に。

書式指定は以下のようになります。

```:DateFormatterの書式指定
yyyy-MM-dd'T'HH:mm:ssZZZZZ
```

#サンプル
objective-cなら、記載はこうなります。

```objc:例
NSDateFormatter *df = [NSDateFormatter new];
[df setDateFormat:@"yyyy-MM-dd'T'HH:mm:ssZZZZZ"];
```
Kaggle - Carvana Image Masking Challenge上位陣リンク一覧

KaggleのCarvana Image Masking Challenge[^1]の上位陣リンク一覧です．

## [3位] 3rd place solution (U-Net + Dilated Conv)

- Name: lyakaap
- Kaggle Discussion: https://www.kaggle.com/c/carvana-image-masking-challenge/discussion/40199
- Code: https://github.com/lyakaap/Kaggle-Carvana-3rd-place-solution
- Key Idea: U-Net + Dialated Conv.
- Qiita Memo: https://qiita.com/namakemono/items/35fbf24f27d37111c7f8

## [5位] LB0.9972 - 5th Place Overview

- Name: Kyle Y. Lee
- Kaggle Discussion: https://www.kaggle.com/c/carvana-image-masking-challenge/discussion/40144
- Qiita Memo: https://qiita.com/namakemono/items/14020dd4f41685a3021a


## [6位] Overview of JbestDeepGooseFlops solution (3rd public)

- Name: n01z3
- Kaggle Discussion: https://www.kaggle.com/c/carvana-image-masking-challenge/discussion/40119#latest-225659
- Key Idea: [LinkNet](https://arxiv.org/pdf/1709.00201.pdf)
- Qiita Memo: https://qiita.com/namakemono/items/0f4f7d6cd0d6c50b0294

## [10位] LB 10th place 0.9971 solution

- Name: David
- Kaggle Discussion: https://www.kaggle.com/c/carvana-image-masking-challenge/discussion/40133
- Qiita Memo: https://qiita.com/namakemono/items/ebda10ed26ff9d903bef

## [11位] LB 11th(0.9971) solution overview

- Name: JandJ
- Kaggle Discussion: https://www.kaggle.com/c/carvana-image-masking-challenge/discussion/40126
- Qiita Memo: https://qiita.com/namakemono/items/73791c6b9623d5d2534e

## References

[^1]: Kaggle, [Carvana Image Masking Challenge](https://www.kaggle.com/c/carvana-image-masking-challenge), 2017.
Project Euler Q7 【10001番目の素数】

Project Eulerをワンライナーで解いてみる。
間違っていたらコメントください。


## 問題
素数を小さい方から6つ並べると 2, 3, 5, 7, 11, 13 であり, 6番目の素数は 13 である.

10001 番目の素数を求めよ.

## 解答

```bash
seq 120000 |
factor |
awk 'NF==2' |
awk -F: 'NR==10001{print $1}'
104743
```

## 答え合わせ
こちらのサイト様と一致していればOKとした。
http://kingyojima.net/pje/007.html
Project Euler Q5 【最小の倍数】

Project Eulerをワンライナーで解いてみる。
間違っていたらコメントください。


## 問題
2520 は 1 から 10 の数字の全ての整数で割り切れる数字であり, そのような数字の中では最小の値である.

では, 1 から 20 までの整数全てで割り切れる数字の中で最小の正の数はいくらになるか.

## 解答

```bash
seq 2 20 |
factor |
awk '{print gsub(" 2"," 2",$0),gsub(" 3"," 3",$0),$0}' |
grep -e "^0 0" -e "^4 0" -e "^0 2" |
cut -d" " -f4-8 |
tr ' ' '\n' |
awk 'BEGIN{a=1}{a*=$1}END{print a}'
232792560
```

なげえ。
しかもなんかちょっとずるいので、なんとか直したい。
すごい久しぶりに`cut`を使った。

## 答え合わせ
こちらのサイト様と一致していればOKとした。
http://kingyojima.net/pje/005.html
IISエラー対処まとめ

# IISエラー対処まとめ

 azure webappsを利用していく中でIISで発生したエラーとその対処を記載していきます。

## IISで大きいファイルをアップロードした時に404NotFoundエラー発生

### 発生したエラー、現象   
　azure webappsでファイルアップロードをするプログラムを実装し、ローカルでは正常にアップロードできたが、azure上でIISを通してリクエストするとIISが以下の404エラーを返す。   

```shell-session
IIS Detailed Error - 404.13 - Not Found
```
### 原因    
　IISでは最大コンテンツサイズの制限があり、デフォルトでは4MBとなっている。 
　ので、4MB以上のファイルをアップロードする場合は制限数値を上げる必要がある。  
### 対処    
　以下のようにmaxAllowedContentLength設定をIISの設定ファイルであるweb.configに記載する。以下の例では制限を1GBまで上げている。また無関係の設定は削除している。  

```xml:web.configの例
<configuration>
  <system.webServer>
    <security>
      <requestFiltering>
        <!-- This will handle requests up to 1024MB (1GB) -->
        <requestLimits maxAllowedContentLength="1048576000" />
      </requestFiltering>
    </security>
  </system.webServer>
</configuration>
```
[Linux] note of SO_REUSEADDR & SO_REUSEPORT

## SO_REUSEADDR
- SO_REUSEADDR set or not
- socketA has already been successfully bound to the address
- bind to the address given for socketB
- result of the bind operation for socketB

| SO_REUSEADDR | socketA | socketB | result |
| :---: | :---: | :---: | :--- |
| ON/OFF | 192.168.0.1:21 | 192.168.0.1:21 | Error (EADDRINUSE) |
| ON/OFF | 192.168.0.1:21 | 10.0.0.1:21 | OK |
| ON/OFF | 10.0.0.1:21 | 192.168.0.1:21 | OK |
| OFF | 0.0.0.0:21 | 192.168.0.1:21 | Error (EADDRINUSE) |
| OFF | 192.168.0.1:21 | 0.0.0.0:21 | Error (EADDRINUSE) |
| ON | 0.0.0.0:21 | 192.168.0.1:21 | OK |
| ON | 192.168.0.1:21 | 0.0.0.0:21 | OK |
| ON/OFF | 0.0.0.0:21 | 0.0.0.0:21 | Error (EADDRINUSE) |

set **SO_REUSEADDR** to be able to bind

| | socketA | socketB |
| --- | :---: | :---: |
| TIME_WAIT (after "half dead") | | ON |
| multicast | ON | ON |

### TIME_WAIT
- until all pending data has been successfully sent
- until a timeout is hit

socket is closed forcefully

## SO_REUSEPORT
> SO_REUSEPORT (since Linux **3.9**)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Permits multiple AF_INET or AF_INET6 sockets to be bound to an
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;identical socket address.  This option must be **set on each
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;socket (including the first socket)** prior to calling bind(2)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;on the socket.  To prevent port hijacking, all of the
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;processes binding to the same address must have the same
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;effective UID.  This option can be employed with both TCP and
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;UDP sockets.

### sample code
socket set **SO_REUSEPORT** option
[Linux kernel 3.9 の新機能 SO_REUSEPORT を試してみる](http://nigaky.hatenablog.com/entry/2013/03/12/234954)

```py
def listener_work(num):
    s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    s.setsockopt(socket.SOL_SOCKET, SO_REUSEPORT, 1)   # set SO_REUSEPORT
    s.bind(("", PORT))
    ...
```

### NGINX
[Scaling NGINX Web Server Performance Socket Sharding Using SO REUSEPORT](https://www.youtube.com/watch?v=JMm5j8DdFGY)

![04074715_KI9l.png](https://qiita-image-store.s3.amazonaws.com/0/84946/3c3778c8-4854-ef7b-f27e-73c404b12a05.png)

**reuseport**

```nginx
http {
     server {          listen 80 reuseport;
          server_name  localhost;
          ...
     }
}

stream {
     server {          listen 12345 reuseport;
          ...
     }
}
```

![04074715_Z1rt.png](https://qiita-image-store.s3.amazonaws.com/0/84946/2170e8b7-8e4e-e75c-3bb2-3d77b74d945e.png)


## ref.
- [Socket options SO_REUSEADDR and SO_REUSEPORT, how do they differ? Do they mean the same across all major operating systems?](https://stackoverflow.com/a/14388707)
- [SO_REUSEADDR和SO_REUSEPORT作用](https://ddnews.me/tech/gqlw3nqf.html)
- [Linux と SO_REUSEPORT](http://umezawa.dyndns.info/wordpress/?p=2609)
CentOS7 の言語設定を変える

# CentOS7 の言語設定を変える

## 現在の言語設定を確認

```
$ localectl
   System Locale: LANG=de_DE.UTF-8
       VC Keymap: de
      X11 Layout: de
$
```

## 言語設定のリストを表示

```
$ localectl list-locales
aa_DJ
aa_DJ.iso88591
aa_DJ.utf8
aa_ER
...skipping...
ja_JP
ja_JP.eucjp
ja_JP.ujis
ja_JP.utf8
japanese
japanese.euc
```

## 言語設定を日本語に変更

```
$ localectl set-locale LANG=ja_JP.utf8
==== AUTHENTICATING FOR org.freedesktop.locale1.set-locale ===
Legitimierung ist zum Festlegen der systemweiten Spracheinstellungen erforderlich.
Authenticating as: root
Password: 
==== AUTHENTICATION COMPLETE ===
```

## 現在の言語設定を確認

```
$ localectl
   System Locale: LANG=ja_JP.utf8
       VC Keymap: de
      X11 Layout: de
$ 
```
Bokehのグラフを画像(PNG・SVG)に出力する

Bokeh ではグラフの出力先は HTML でしたが、バージョン 0.12.6 から PNG形式と SVG形式に出力できるようになりました。

# 前提条件
* Bokeh 0.12.6以降
* selenium
* pillow
* phantomjs

なんと、selenium や phantomjs をインストールしないといけないようです。
内部でどんなことやってるかを想像すると空恐ろしいですね・・・

下記の手順は linux を対象としています。余裕があれば Windows で試した手順も更新したいと思います。

```bash
pip install selenium pillow
sudo npm install -g phantomjs-prebuilt
```

# PNGで出力
`export_png()` 関数を使います。従来では `show()` 関数でグラフを出力していましたが、これの代わりに `export_png()` を使うと思っておけば問題ないと思います。

```python
from bokeh.plotting import figure
from bokeh.io import export_png


p = figure()
p.line([1, 2], [1, 2])
export_png(p, 'line.png')
```

# SVGで出力
`export_svgs()` 関数を使います。注意する点として、`figure()` 関数のキーワード引数 `output_backend` に 'svg' を指定する必要があります。

```python
from bokeh.io import export_svgs


p = figure(output_backend='svg')
p.line([1, 2], [1, 2])
export_svgs(p, 'line.svg')
```
ネットワークプリフィックス長からサブネットマスクを求める


```java:Main.java
import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.net.InetAddress;

public class Main {
    public static void main(String[] args) throws Exception {
        String addr = "192.168.1.100/24";

        String[] parts = addr.split("/");
        String ip = parts[0];
        int prefix;
        if (parts.length < 2) {
            prefix = 0;
        } else {
            prefix = Integer.parseInt(parts[1]);
        }
        
        int mask = 0xffffffff << (32 - prefix);
        System.out.println("Prefix=" + prefix);
        System.out.println("Address=" + ip);
        
        int value = mask;
        byte[] bytes = new byte[]{
            (byte) (value >>> 24), (byte) (value >> 16 & 0xff), (byte) (value >> 8 & 0xff), (byte) (value & 0xff)
        };
        
        InetAddress netAddr = InetAddress.getByAddress(bytes);
        System.out.println("Mask=" + netAddr.getHostAddress());
        
    }
}
```