OmniAICreator/Qiita-1.07M huggingface dataset:
convnetjsとtensorflow

#概要
XOR問題をconvnetjsとtensorflowでやってみた。

#学習データの用意
データ
```
[[1, 1], [1, 0] , [0, 1], [0, 0]]
```
ラベル
```
[[0], [1] , [1], [0]]
```
#モデルの作成
分類	classification です。
##入力、出力
convnetjsの場合

```
{
    type: 'input',
    out_sx: 1,
    out_sy: 1,
    out_depth: 2
}
{
    type: 'softmax',
    num_classes: 2
}
```

tensorflowの場合

```
x_ = tf.placeholder(tf.float32, shape = [4, 2])
y_ = tf.placeholder(tf.float32, shape = [4, 1])
```

##重みとバイアス
convnetjsの場合

```
{
    type: 'fc',
    num_neurons: 3,
    activation: 'tanh'
}
```

tensorflowの場合

```
w1 = tf.Variable(tf.random_uniform([2, 5], -1, 1))
w2 = tf.Variable(tf.random_uniform([5, 1], -1, 1))
b1 = tf.Variable(tf.zeros([5]))
b2 = tf.Variable(tf.zeros([1]))

```

#活性化関数を使う
convnetjsの場合

```
activation: 'tanh'
```

tensorflowの場合

```
layer1 = tf.tanh(tf.matmul(x_, w1) + b1)
out = tf.tanh(tf.matmul(layer1, w2) + b2)
out = tf.add(out, 1)
out = tf.multiply(out, 0.5)
```

#ロス値を定義
convnetjsの場合

```
stats.loss;
```

tensorflowの場合

```
loss = tf.reduce_mean(tf.square(Y - out)) 
```

#最適化の方法定義
convnetjsの場合

```
var trainer = new convnetjs.Trainer(net);
```

tensorflowの場合

```
train_step = tf.train.GradientDescentOptimizer(0.05).minimize(loss)
```

#セッションを定義して学習する。
convnetjsの場合

```
var point = new convnetjs.Vol(1, 1, 2);
point.w = [1、0];
stats = trainer.train(point, [1]);
```

tensorflowの場合

```
sess = tf.Session()
sess.run(init)
for i in range(10001):
    sess.run(train_step, feed_dict = {
        x_: X, 
       y_: Y
    })
```
#テストデータで取り出す。
convnetjsの場合

```
var point = new convnetjs.Vol(1, 1, 2);
point.w = [1.0, 1.0];
var prediction = net.forward(point);
```

tensorflowの場合

```
print('Inference ', sess.run(out, feed_dict = {
   x_: X, 
   y_: Y
}))
```

#サンプルコード
convnetjsの場合
http://jsdo.it/ohisama1/CeCv
tensorflowの場合
https://github.com/ohisama/tensorflow-fizzbuzz
SharePoint のリスト列の情報を JavaScript で確認する

[ブログからの転載](http://1bed.allright.life/?p=2460)

作成したリストに追加した列情報を JSCOM (JavaScript Client Object Model) で取得するサンプル。

```js
var ctx = new SP.ClientContext.get_current();
var fields = ctx.get_web().get_lists().getByTitle('<確認したいリスト名>').get_fields();

ctx.load(fields);
ctx.executeQueryAsync(
    function() {
        console.log('Successful get data of list fileds.');
        var fieldsEnum = fields.getEnumerator();
        while (fieldsEnum.moveNext()) {
            var field = fieldsEnum.get_current();
            if (!field.get_canBeDeleted()) {
                // 恐らく削除できない列はシステムが作成している
                continue;
            }
            console.log(field.get_title());                         // 列名
            console.log(field.get_internalName());                  // 列の内部名
            console.log(field.get_schemaXml());                     // スキーマ情報
        }
    },
    function(sender, args) {
        console.error("executeQuery Error. \n" + args.get_message());
    }
);
```

get_schemaXml で取得した情報である程度判る気がする。
技術英語 > we built huge products that [hit all the goals] / All new models [meet voluntary goals]

@ http://thecodist.com/article/the-six-goals-of-every-programming-project

> we built huge products that **hit all the goals**.

意訳「すべてのゴールを満たす...」

hitでなくmeetでも良さそう。

http://www.linguee.jp/%E8%8B%B1%E8%AA%9E-%E6%97%A5%E6%9C%AC%E8%AA%9E/%E7%BF%BB%E8%A8%B3/meet+goals.html
> All new models **meet voluntary goals**

<hr>

ずっと昔のKODAKのフレーズ
> THE KODAK CAMERA
> You press the button, we do the rest.
Vue.jsのコンポーネント集「Element」導入でハマったポイント

# Elementとは

[Element](http://element.eleme.io/) とは Vue.js で使うためのコンポーネント集です。
デートピッカー、カラーピッカー、ダイアログといった便利なものや、フォームの基本パーツまで様々なものが用意されています。

http://element.eleme.io/

# 他の人がハマらないように書きました

この記事では筆者が Element を導入する時にハマったポイントを書いています。ほとんどは**公式ドキュメントをちゃんと読んでいない**ことが原因なのですがｗ

基本的には下記の紹介ページと公式ドキュメントでなんとかなりますが、同じようにハマる人がいそうなので記事として残すことにしました。


[≫Vue.jsのコンポーネント詰め合わせ「Element」がスゴかった](https://s8a.jp/vue-js-library-element)
[≫Vue.jsで高品質なUIライブラリElementを使ってみる](http://www.webopixel.net/javascript/1229.html)
[≫公式ドキュメントの導入ページ](http://element.eleme.io/#/en-US/component/quickstart)

# その①　Webpack の設定でエラーになる

下記は公式ドキュメントの Webpack の設定です。Webpack1ならたぶん問題ありません。

```js:webpack.config.js
  //〜略〜
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
        loader: 'file-loader',
        query: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  //〜略〜
```

Webpack2 では css-loader と file-loader でエラーになります。
下記のように変更します。

```js:webpack.config.js
  //〜略〜
  module: {
    rules: [ // 変更
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ['style-loader','css-loader'] // 変更
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
        // ここから変更
        use: [{
          loader: 'file-loader',
          query: {
            name: '[name].[ext]?[hash]'
          }
        }]
        // ここまで変更
      }
    ]
  },
  //〜略〜
```

# その② Webフォントが表示されない

デフォルトテーマのWebフォントは `node-modules/element-ui/lib/theme-default/fonts/element-icons.woff` が用意されています（.ttf もあります）。特に指定をしていなければ jsファイルと同じディレクトリに書き出されます。

```bash
dist/
 +- js/
     +- bundle.js
     +- element-icons.woff

※実際には b02bdc1b846fd65473922f5f62832108.woff のようなファイル名になります。
```

しかし出力された css を見ると下記のようになっています。出力先が入っていません。

```css
@font-face{
  font-family:element-icons;
  src:
    url(element-icons.woff) format('woff'),
    url(element-icons.ttf) format('truetype');
  font-weight:400;font-style:normal
}
```

これは `webpack.config.js` の `output.publicPath` を指定することで対応できます。
file-loader を使ったことがある人ならきっと常識なのでしょう。

```js:webpack.config.js
    output: {
        publicPath: 'js/', // 追加
        filename: "[name].bundle.js",
    },
```

```css:output.publicPath指定後のcss
@font-face{
  font-family:element-icons;
  src:
    url(js/element-icons.woff) format('woff'),
    url(js/element-icons.ttf) format('truetype');
  font-weight:400;font-style:normal
}
```

そんなわけでこれから Element　を使ってみます。
Emscriptenが対応しているシステムコールについて調べた

WebAssembly上でのシステムコールの扱い、および現時点でのEmscriptenで既存Cライブラリの移植性がどこまで担保されているのか、調べた内容をまとめます。

# WebAssemblyとEmscriptenの守備範囲

WebAssemblyでは実行バイナリのフォーマットや利用可能オペコードなどは定義されていますが、守備範囲は仮想CPUの周辺領域までだというのが筆者の理解です。つまり、WebAssemblyのレイヤでシステムコールや標準Cライブラリが提供されるようなことはないはずです。

しかし、システムコールやlibcが無ければ既存のC資産は全く使い物になりません。なければ作るしかないということで、Emscriptenでは軽量libc実装のmuslを採用しており、これを静的リンクしてwasmファイルを生成しています。また、システムコールについてはJavaScriptで実装して提供しています（下記ファイルを参照）。

- https://github.com/kripken/emscripten/blob/master/src/library.js
- https://github.com/kripken/emscripten/blob/master/src/library_syscall.js
- https://github.com/kripken/emscripten/blob/master/src/library_signals.js

このような努力のおかげで、Emscriptenでは既存のC資産がそれなりにビルドできる環境を提供できているわけです。

# Emscriptenでのシステムコール実装の概要

Emscriptenで実装されているシステムコールはLinuxのものです。世間的にもLinux対応のCソースコードが多いはずですから、この方針自体は問題ないでしょう。もっとも、これはビルドエラーを避けてギリギリ動かすための実装であり、普通のOSのような動きをするわけではありません（OSが動いていない以上当然ですが）。

システムコールのエミュレーション実装を見ると、ネットワーク系とファイルシステム系についてJSの世界で可能な範囲で実装しているほかは適当な値を返すものが多い印象です。

たとえば、uidやgidは常に0を返します。また、`uname(2)`は次のように独自の文字列を返します。ちょっと面白いですね。

```js
  __syscall122: function(which, varargs) { // uname
    var buf = SYSCALLS.get();
    if (!buf) return -ERRNO_CODES.EFAULT
    var layout = {{{ JSON.stringify(C_STRUCTS.utsname) }}};
    function copyString(element, value) {
      var offset = layout[element];
      writeAsciiToMemory(value, buf + offset);
    }
    copyString('sysname', 'Emscripten');
    copyString('nodename', 'emscripten');
    copyString('release', '1.0');
    copyString('version', '#1');
    copyString('machine', 'x86-JS');
    return 0;
  },
```

# 必ずエラーを返すシステムコールたち

どんなシステムコールが実装できないのか傾向を知るため、現時点のEmscriptenの実装でエラーを返すシステムコールを列挙してみます。

## 常にENOSYS (Function not implemented)を返すもの

- raise
- pipe
- acct
- setitimer
- mincore
- pselect
- pipe2

## 常にEAGAIN (Resource temporarily unavailable)を返すもの

- fork
- vfork

## 常にENOEXEC (Exec format error)を返すもの

- execve

## 常にECHILD (No children)を返すもの

- wait
- waitid
- waitpid
- wait3
- wait4

## 常にEPERM (Not super-user)を返すもの

- kill
- killpg
- nice
- setpriority
- setdomainname
- stime

## そもそもコンパイル時にエラーや警告が出るもの

現時点では未実装のものがチラホラあるようです。実装する意味があるかは疑問ですが。

- ptrace
- mount
- umount
- umount2

# まとめ

既存のC資産を移植するような観点でEmscriptenの実装について調べてみました。プロセス関連のシステムコールはほぼ全滅ですが、それ以外はそれなりに動きそうです。これなら移植も捗りそうですね。
Amazon lexでつくったchatbotをSlackに紐づける方法

関連）
Amazon lexで音声チャットボットを作成してみた
http://qiita.com/sitopp/items/b834fcda3bf9866140ea

上の記事の目的は音声チャットボットの作成だが、
chatbotを作っただけでは、AWSのコンソール以外からはどこからも呼び出しができない。
外部連携する必要がある。

# lexが連携可能なチャンネル

3つある。

- Facebook
- Twilio SMS　
- Slack　

Appleのオンラインストアのチャットボットみたいな、ブラウザからの呼び出しはできない。残念。

また、この3種類のうち、音声入力ができるのって「Twilio SMS」だけなんじゃないかしら。

そこで、今の所は不本意ながらテキストベースのチャットボットとslackで一度連携をやってみて、基本的な連携方法を把握してみることにする。

# lexで作ったchatbotをslackと連携する


[Slackとの連携の仕方](http://docs.aws.amazon.com/lex/latest/dg/slack-bot-association.html)に全部書いてあるので、この通りやる。
ただし1と2が複雑なので、自分はこの部分を[花の注文チャットボットサンプル作成](http://qiita.com/sitopp/items/b834fcda3bf9866140ea)で代用した。

そのあと、[Step 3: Create a Slack Application](http://docs.aws.amazon.com/ja_jp/lex/latest/dg/slack-bot-assoc-create-app.html) からStep6までを**この説明に書かれている通りにやる**。



# つまづいた点

## [Step4でつまづいた点]
課題：
Step4で、「RelativeId does not match Lex ARN format: bot-channel:(botのname）::cnannelのname）」と言うエラーが出てしまった。

解決策：
botをpublishする必要があった。

やり方：
lexのbotの設定画面右上の「publish」をクリック。
![cb-9.png](https://qiita-image-store.s3.amazonaws.com/0/173392/bee1541e-915c-5cb5-88e9-fe8542c758e3.png)
↓
aliasに「beta」と記入、「Publish」をクリック。
![cb-9-1.png](https://qiita-image-store.s3.amazonaws.com/0/173392/bf8266f0-cb08-c366-5e21-af4682c8f676.png)
↓
登録のため数秒待つ。インジケーターがくるくる回るのを眺める。
↓
登録完了した。以下のポップアップが表示されるので、「Go to channels」を押す。
![cb-10.png](https://qiita-image-store.s3.amazonaws.com/0/173392/e58ec439-be50-2c33-00c0-21f86b6e8bf1.png)

これをやると、Step:4のChannels設定画面で「Alias」に「beta」が選択できるようになり、先へ進む。
一般に公開したくないのに「Publish」するというのは気持ち悪いけど、致し方ない。

## [Step5でつまづいた点]
問題：STEP6まで進んでいざchat botを呼び出した時に、何もお返事しない。

解決策：
Step５の「Redirect URLs」の設定は、addのあとSave URLsをクリックしないと反映されないが、addしかしてなかった。ちゃんと両方やる。

## [Step6でつまづいた点]
問題：
Shareable URLをブラウザで開いても、エラーが出てしまった

解決策：
Setteings > install app > Reinstall app（緑のボタン）で自分のSlack Groupにインストールする方法で代用した。



## 完成

花屋のchatbotをSlackから呼び出しているところ。


![cb-99.png](https://qiita-image-store.s3.amazonaws.com/0/173392/b37d77cd-77e3-4699-1505-55cc6bf5cdbb.png)

最初の2回はStep5でつまづいていて、うまくいかなかったとき。
3回目は完成していたが、Sample utterancesにない「hey」という言葉で呼びかけたので「おっしゃることがわかりません」と返されてしまった。
4回目は成功。期待通りの答えが返ってきた。


うまくいきました(΄◉◞౪◟◉｀)

以上！


# 補足

IBMのWatsonを使って、音声をテキストに変換してSlackに表示させるボットすでにあるらしい。
http://plus.appgiga.jp/masatolan/2015/07/02/56363/ の「Phonebot」
Githubの日付をみると2years ago..えっ？ まじか。。Watsonてそんな前から音声認識APIを公開してたの？..
みんなで作るマストドンサーバー管理チェックリスト

Mastodon 管理に必要な忘れやすい設定を羅列するページです。
コメントや編集機能でアイデア投下してください。

- master の HEAD じゃなく **stable な tag** をインストールする (バグが含まれることがある) → [^1] [^2]
- **postgres と redis の永続化** (永続化しないとメンテで DB が消えることがある) → [^3]
- cron で **PubSubHubbub の購読更新** (７日間で外インスタンスの投稿が届かなくなる) → [^4]
 [^5]
- cron で **SSL 証明書の自動更新** (90日で期限が切れて外インスタンスとの投稿が相互に行かなくなる)
- メンテ中は **HTTP 503 Service Unavailable** を返す設定 (メンテ中にpostされるとpostが来なくなる) → [^6] [^5]
- SSLのスコアを A+ にする(nginx使用時) → [^7]

リソースの小さいマメインスタンス勢は下記を：

- メモリが小さいときは **SWAP** を設定 (mastodon:daily でサーバーが落ちる）
- Pumaのプロセス数を減らす。
- Pumaのスレッド数を減らす。
- sidekiqの並列数を減らす。
- imagemagicの使用メモリを制限する。

[^1]: https://github.com/tootsuite/mastodon/releases
[^2]: https://github.com/tootsuite/mastodon/tags
[^3]: [#DBを永続化する - Web素人がMastodonを立ててみた - GameProgrammar's Night](http://katze.hatenablog.jp/entry/2017/04/16/010900#DBを永続化する)

[^4]: [Mastodon インスタンス管理者が忘れてはならないたったひとつのこと - chaotic valkyrie](http://cryks.hateblo.jp/entry/2017/04/22/005755)
[^5]: [Mastodon インスタンスのリモートフォローの仕組みと必要な購読更新の設定方法 - Qiita](http://qiita.com/koteitan/items/fadbe900c88481888917)
[^6]: [Nginxでメンテナンスページに編集なしで即時切り替える方法](http://qiita.com/kotaroito/items/8b7d4b8ad6935edcdba8)
[^7]: [nginx使用のMastodonでObsをA+にする](http://qiita.com/gc373/items/0688c9b0ee1632ddb376)
RxJava2のonNextでnullを使いたい

# RxJava2の変更点
[こちら][lnk-1]で紹介されているように、RxJava2では、`onNext`の引数にnullを渡すことができなくなっています。
元記事にもあるように、代替として`Completable`を利用することを勧めていましたが、これには`onNext`がないので別の方法を検討します。

# 今回の開発環境
- Android Studio
- Kotlin
- RxJava2

# Kotlinの?(Optional)を自作OptionalでWrapする
Java8には、`Optional`というクラスがあります。（参考：[ここ][lnk-2]）
今回はこれを参考に、必要そうなメソッドを取り込んで自作のOptionalクラスを実装してみたいと思います。

## コンストラクタ
コンストラクタは、

* 中身がnullな場合
* valueが存在する場合

の２パターンを実装しておけば良さそうなので、次のようにします。

```kotlin:Optional.kt
val value: T?

constructor() {
  this.value = null
}

constructor(value: T) {
  this.value = value
}
```

## wrapper
↑このような表現が正しいかはさておき、引数を`Optional`でwrapするメソッドを用意したいと思います。引数には、

- `T?`な変数
- `T`な変数

のどちらかがくると思います。
[もと][lnk-2]のメソッド命名に合わせて、non-nullの場合には`of()`、nullableの場合には`ofNullable()`と区別したいと思います。

```kotlin:Optional.kt
companion object {
  fun <T> of(value: T): Optional<T> {
    return Optional(value)
  }

  fun <T> ofNullable(value: T?): Optional<T> {
    return if(value != null) Optional(value) else Optional()
  }
}
```

今回はKotlinの場合なので、`companion object`内に実装します。
Javaなら`static`メソッドですね。

## getter
これも以下のパターンが考えられます。

- `T`というようにnullを許容しない場合
- `T?`というようにnullを許容する場合

前者は`get()`で、後者は`getOrNull()`と区別することにします。

```kotlin:Optional.kt
fun get(): T {
  return value!!
}

fun getOrNull(): T? {
  return value
}
```

## それっぽい完成品
ここまで説明した要素を合わせると、以下のようになると思います。

```kotlin:Optional.kt
class Optional<T> {
  private val value: T?

  private constructor() {
    this.value = null
  }

  private constructor(value: T) {
    this.value = value
  }

  fun get(): T {
    return value!!
  }

  fun getOrNull(): T? {
    return value
  }

  companion object {
    fun <T> of(value: T): Optional<T> {
      return Optional(value)
    }

    fun <T> ofNullable(value: T?): Optional<T> {
      return if (value != null) Optional(value) else Optional()
    }
  }
}
```

# 使ってみる
早速、問題の部分に作成した`Optional`クラスを適用してみます。
Websocketから拾ったメッセージを`PublishSubject`に流す部分です。

```kotlin:
override fun onMessage(webSocket: WebSocket?, text: String?) {
  //responseのjson->objectに変換
  val res: WsResponse? = gson.fromJson(text, WsResponse::class.java)

  //エラーでるパターン
  wsSocketEventSerialized.onNext(res)

  //Optionalでwrapしてみる
  wsSocketEventSerialized.onNext(Optional.ofNullable(res))
```

本来ならば、`null`が来ないようにするとか、`null`を使わないようなロジックに変更することを検討するべきなのでしょうが、どうしてもという場合には使えるかもしれないですね。

[lnk-1]:http://qiita.com/kubode/items/aebef4593e42a3b367be#null%E9%9D%9E%E8%A8%B1%E5%AE%B9
[lnk-2]:http://grepcode.com/file/repository.grepcode.com/java/root/jdk/openjdk/8-b132/java/util/Optional.java
rails 予約機能をつける。（一回目） has_manyの関係

```ruby:環境
rails 5.0
ログイン機能 devise
```
　### 　予約機能を作る前の状態
・userモデルで作って、ログイン機能を作っている
・bookモデルがあって各ユーザーの読んだ本を記録している。
・フォロー機能をつけている。
　　個人同士の貸し借りのために、予約機能をつけたい。

userテーブル
![image](https://qiita-image-store.s3.amazonaws.com/0/167576/55d0b26d-a47b-e820-26d5-4b5b7c75e1d4.png)

bookテーブル
![image](https://qiita-image-store.s3.amazonaws.com/0/167576/670dfcfb-8a31-5abb-43d5-dc635f1f5382.png)

##まず予約モデルを作る。
　
 ```ruby:
$rails g model Reservation user:references book:references start_date:datetime end_date:datetime
```

```ruby:reservation.rb
  belongs_to :user
  belongs_to :book
この二つは、自動生成している。
```
```ruby:user.rb
 has_many :reservations, dependent: :destroy
```
```ruby:book.rb
has_many :reservations
```

##予約モデルの説明
userモデルとbookモデルの関連は、以下の図である。![screenshot.png](https://qiita-image-store.s3.amazonaws.com/0/167576/2c146929-4298-f0e4-1716-17a33cc18b85.png)


##routesを作る

```ruby:routes
 resources :books do
    resources :reservations
  end 
```

ルートは、ちょっと特殊な書き方をする。
　

```ruby:
 POST   /books/:book_id/reservations(.:format)          reservations#create

```

##controllerを作る
```ruby:reservations_controller
  def create
     @reservation = current_user.reservations.create(reservation_params)
     redirect_to root_path notice:"予約が完了しました"
　　　end

private

 def reservation_params
    params.require(:reservation).permit(:start_date, :end_date, :book_id)
  end 
```

##viewを作る（仮）

```ruby:app/views/books/show.html.erb
<%= form_for [@book, @book.reservations.new] do |f| %>

<%= f.hidden_field :book_id, value: @book.id %>
<div class="col-md-6">
                                        <label>借りたい日</label>
                                          <%= f.text_field  :start_date,  :class => 'datepicker' %>
                                    </div>

                                    <div class="col-md-6">
                                        <label>返す日</label>
                                        <%= f.text_field :end_date, :class => 'datepicker' %>
                                    </div>
                               </div>

                                <%= f.submit "この日程で予約する", class: "btn btn-danger btn-wide" %>    


<% end %>

```

###show.html.erbの説明
・一行目の[@book, @book.reservations.new]の説明
　　routesを見ると、 /books/:book_id/reservations(.:format)をしているから上になる。

しかし上のviewは、不完成である。DateTimePickerを導入してきれいにしていく。

![screenshot.png](https://qiita-image-store.s3.amazonaws.com/0/167576/83540db6-8029-13dc-509a-6f12bb268eb0.png)

DateTimePickerを導入は、次回する
http://qiita.com/kitaokeita/items/0730373d4f7b2018e36a
システムについての個人的まとめ

#この記事について#
自分の備忘録として、システム全般についての自分の考えや調べたことを記載していきます。
<font color='red'>概念とシステムのライフサイクルに応じた業務一覧を作成することで、自分の理解度を把握する目的で作成しております。</font>
経験が浅いので、間違っていることもあると思いますがご容赦ください。

#ライフサイクル
1-6までを繰り返し回していきます。そして、最後には入れ替えられ、また新しいシステムが出来ます。

新システム→運用での改善要望1・・・運用での改善要望n→古いシステム→リプレース→新システム

<b>ライフサイクル</b>

| 順序|       大分類|小分類|説明|参照|
|:-----------------|:------------------|:------------------|:------------------|:------------------|
|1|要件定義|要望聞き取り|記載予定|-|
|||要望整理|要望(目的)を整理する|-|
|||概要図作成|目的とアーキテクチャ構成図を作成する|-|
|||改善一覧作成|これに沿って後の資料を作成する|-|
|||サンプル作成|実現可否と工数算出根拠のため|-|
|2|設計|記載予定|記載予定|[設計についての個人的まとめ](http://qiita.com/Amebayashi/items/21b4ea02f8a25e31a37c)|
|3|製造|記載予定|記載予定|-|
|4|テスト|単体テスト|1つのモジュールのテスト。<br>網羅性を担保する。マトリクスを作成し、ブラックボックス、ホワイトボックステストなどを実施する|[テストについての個人的まとめ](http://qiita.com/Amebayashi/items/b5e41e7fe96fd036fc83)|
|||結合テスト|モジュールを組み合わせたテスト。<br>単体テストでは実施できなかった箇所をテストする。<br>例 複画面にまたがる操作テスト|-|
|||受け入れテスト|実際の操作の一連の流れの代表パターンをテストする。<br>結合テストと実施内容は似通う。|-|
|5|リリース|記載予定|記載予定|-|
|6|運用|記載予定|概要は右記|[システム運用のオシゴト](https://codeiq.jp/magazine/2017/10/54877/)|

#システムの体系化
| 事項       |       対応|備考|参照|
|:-----------------|:------------------|:------------------|:------------------|:------------------|
|便利な資料とは|システムアクセス表(ユーザ パス)<br>システム概要図、概要資料<br>画面一覧表(目的と機能、連携システム、詳細へのリンク)<br>テーブル定義書<br>バッチ(ジョブ、ジョブネット)一覧<br>バッチ実行順序図(ジョブ、ジョブネット)<br>基本設計書<br>詳細設計書<br>解析資料(フォルダ構成図、ソース一覧表、処理の流れ図)<br>テスト仕様書<br>不具合管理表<br>問い合わせ対応表(FAQ)<br>トラブル対応表(システムが落ちたときとか)|

#開発資料のテンプレート
[設計書仕様書テンプレート PocketDOC](https://pocket9.net/pocketdoc/download)
こちらのサイトのテンプレートが分かりやすいです。


#用語集

| 用語       |       説明|備考|参照|
|:-----------------|:------------------|:------------------|:------------------|
|マスタデータ|業務を遂行する際の基礎情報となるデータのこと。<br>例 商品マスタ、顧客マスタ|-|[マスタデータ、トランザクションデータとは](http://www.graffe.jp/blog/392/)|
|トランザクションデータ|業務に伴って発生した出来事の詳細を記録したデータのこと。<br>例 受発注記録|-|[マスタデータ、トランザクションデータとは](http://www.graffe.jp/blog/392/)|
|3階層システム |「プレゼンテーション層」(ユーザインターフェース)、「アプリケーション層」(ビジネスロジック)、「データ層」(データベース)の3階層に分け、<br>クライアント側にはユーザインターフェース部分のみを残し、あとはサーバ側に実装する。<br><br>クライアントおよびサーバの処理を複数の階層に分離して配置することで、ある階層へ変更を加える必要が生じた際にも柔軟に対応できるようなっている。|[参考図.ウェブアプリケーションの流れ](http://qiita.com/Amebayashi/items/73506fc3b01133bf3519)|[3階層システム](http://e-words.jp/w/3%E9%9A%8E%E5%B1%A4%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0.html)|
|ユーザインターフェース|機器やソフトウェア、システムなどとその利用者の間で情報をやり取りする仕組み。 例 ウェブアンケート入力画面|-|[ユーザインターフェース](http://e-words.jp/w/%E3%83%A6%E3%83%BC%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A7%E3%83%BC%E3%82%B9.html)|
|ブラックボックステスト|処理の中身を考えずに入出力結果のみを確認するテスト|-|-|
|ホワイトボックステスト|処理の中身を考えて入出力結果を確認するテスト。<br>if文の分岐、例外処理の結果を確認していくテスト|-|-|
Pythonの導入

# 導入日
2017-04-22
# 導入日の最新バージョン
MACにはPython2がデフォルトで導入されているため、
今回はPython3を導入した。

■ Python3バージョン：3.6.0
■ Anaconda3バージョン：4.3.1

# MAC OSでの導入
## OS Xバージョン
■ OS X Yosemite 10.10.5
## homebrew のインストール
[wikipedia](https://ja.wikipedia.org/wiki/Homebrew_%28%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E7%AE%A1%E7%90%86%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%29)によると
Mac OS Xオペレーティングシステム上でソフトウェアの導入を
単純化するパッケージ管理システムのひとつだそうです。

``` bash:bash
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```
## pipのインストール
Pythonのパッケージ管理システムでRubyでいうGemのようなものだそうです。
[参考URL](http://www.task-notes.com/entry/20150810/1439175600)によると、
pipはPython 2.7.9 以降、Python 3.4以降からデフォルトでインストールされているそうです。
自分は、この話を知る前に四苦八苦して以下のコマンドで導入しちゃった。

■ pipのインストール

``` bash:bash
$ curl -kL https://bootstrap.pypa.io/get-pip.py | sudo python
```
■ pip自身のアップデートコマンド

``` bash:bash
$ pip install -U pip
```
## pyenvのインストール
pyenvはpython環境を管理するもので、
標準とは違う環境のpython環境を作成できるそうです。

(1) homebrewでインストール

``` bash:bash
$ brew install pyenv
$ brew install pyenv-virtualenv
```
(2) .bash_profile（.bashrc）に設定を追加

``` bash:bash
$ echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bash_profile
$ echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(pyenv init -)"' >> ~/.bash_profile
```
(3) 読み直し

``` bash:bash
$ source .bash_profile
```

## Anacondaのインストール
■ Anacondaのインストールできるバージョンの確認

``` bash:bash
$ pyenv install -l
```

■ Anacondaインストール
[Anaconda](https://www.continuum.io/why-anaconda) は、Continuum Analytics 社によって提供されている、Python 本体に加え、科学技術、数学、エンジニアリング、データ分析などに、よく利用される Python パッケージ（2016 年 2 月時点で 400 以上）を一括でインストール可能にしたパッケージです。面倒なセットアップ作業が効率よく行えるため、Python 開発者の間で広く利用されています。なお、Anaconda は商用目的にも利用可能。
という事だそうです。

・ Python3系の場合

``` bash:bash
$ pyenv install anaconda3-X.X.X
```

・ Python2系の場合

``` bash:bash
$ pyenv install anaconda2-X.X.X
```

## pyenvの使い方まとめ

■ インストール可能なバージョン一覧の確認

``` bash:bash
$ pyenv install -l
```

■ Python単体のインストール

``` bash:bash
$ pyenv install 3.6.0
```

■ pyenv現在のバージョン確認

``` bash:bash
$ pyenv version
```

■ インストール済みのバージョン一覧確認

``` bash:bash
$ pyenv versions
```

■ 全体で利用するバージョンの設定

``` bash:bash
$ pyenv global 3.X.X
```

■ 特定のディレクトリ配下のみ利用するバージョンの設定

``` bash:bash
$ cd PROJECT_DIR
$ pyenv local 3.X.XX
$ pyenv version
Python 2.7.11
$ cd ..
$ pyenv version
Python 3.5.1
```

## condaで仮想環境を構築し、activateで環境を切り替える
(1) Anacondaの環境をglobalに切り替え

``` bash:bash
$ pyenv global anaconda3-4.3.1
```

(2) condaで仮想環境作成

``` bash:bash
$ conda create --name py3.6.0 python=3.6.0
```

(3) 作業フォルダへ移動し、pyenv localを実行

``` bash:bash
$ cd [作業フォルダ]
$ pyenv local anaconda3-4.3.1/envs/py3.6.0
```

(4) 一応globalをsystemへ戻しておく（任意）

``` bash:bash
$ pyenv global system
```

(5) activateし、環境を切り替える

``` bash
$ source $PYENV_ROOT/versions/anaconda3-4.3.1/bin/activate py3.6.0
```

(6) pythonとAnacondaのバージョンを確認

``` bash:bash
$ python -V
Python 3.6.0 :: Anaconda 4.3.1 (x86_64)
```

(7) deactivateで環境を解除

``` bash:bash
$ source $PYENV_ROOT/versions/anaconda3-4.3.1/bin/deactivate py3.6.0
```

(8) 再度、環境を切り替えるときは作業フォルダに入って、activate

``` bash:bash
$ cd [作業フォルダ]
$ source $PYENV_ROOT/versions/anaconda3-4.3.1/bin/activate py3.6.0
```
sshの接続の設定を行う方法

#sshを行うときにいちいち情報を書くのがめんどいので、configファイルに設定しておく
## ファイルの場所
```Terminal.
$ vi ~/.ssh/config
// ここにsshで使う接続情報を記載する
```
##ファイルの編集

```config.

Host hoge                   // Host名は、わかりやすいのにしておく
 HostName 192.168.0.1       // 自分のサーバのIPアドレス
 Port 22                    // sshのポート番号
 User test                  // サーバのユーザ名
 IdentityFile ~/.ssh/id_rsa // 秘密鍵。格納場所は、好きなところに。。。

Host hogehoge
 HostName 192.168.0.2
 Port 11122
 User testtest
 IdentityFile ~/.ssh/id_rsa
```

##ssh実行
```Terminal.
$ ssh hoge
// 上記のHost hoge の設定情報が実行される
```
stirrer

stirrerを作った. 
といっても, ファンに磁石を取り付けて回すだけ. 
サーモ機能は面倒なので止めた. 
可変抵抗を使って回転速度を調整できるようにはしている. 

# 作成

- 5V電源(USB-A)
- 可変抵抗(500Ω: http://akizukidenshi.com/catalog/g/gP-04205/ )
- fan (5V用: http://akizukidenshi.com/catalog/g/gP-02480/ )

可変抵抗は本当は200Ωくらいが良いかも. 実際に組んでみると200Ωくらいがfanが止まるかどうかの閾値っぽいので. ただし, 200Ωにした時, すでに回転している場合は慣性で回ります. 今回は手元に200Ωのちょうど良いのがなかったので500Ωにしました. 

これらを配線するだけ. 

GND(USB) ----------------------------┐
+5V(USB) --- 可変抵抗(最大500Ω) --- fan

![IMG_3690.jpg](https://qiita-image-store.s3.amazonaws.com/0/102253/cc362c64-94d3-9dd8-35b4-3e4f52d30d70.jpeg)

![IMG_3689.jpg](https://qiita-image-store.s3.amazonaws.com/0/102253/e5bb5d70-c109-5369-2c90-691219167a8a.jpeg)

# 結果

https://youtu.be/I9OiGRIBm34
https://youtu.be/zqo-kDTl6ZM
Mastodonで他インスタンスの情報が正常に表示されない場合の対処

# 他インスタンスの情報が出ない……
ある日から、他のインスタンスからの情報が正常に表示されなくなっていました。症状としては……

* リモートフォローのトゥートが出てこない
* リモートユーザの情報が古い
* 連合タイムラインが流れない
* 画像が正常に表示されない

などなど、とにかく寂しい状態のインスタンスになってしまいました。
色々と調べた結果、何とか直すことができたのでメモしておきます。


# 対処法
`mastodon:daily` タスクを実行してください。
Dockerを使用している場合は、`docker-compose` コマンドを利用します。

```shell-session:dailyタスク実行
[root@mstdn001 ~]# cd /usr/share/mastodon
[root@mstdn001 mastodon]# docker-compose run --rm web rails mastodon:daily
```

# 恒久対応
上記のコマンドが日時で実行されるようにcronを設定します。

```:cron登録内容
@daily cd /usr/share/mastodon && docker-compose run --rm web rails mastodon:daily
```


# 原因
[Mastodonの公式ドキュメント](https://github.com/tootsuite/documentation/blob/master/Running-Mastodon/Production-guide.md#cronjobs) に書かれている内容を見落としていました。

>There are several tasks that should be run once a day to ensure that mastodon is running smoothly. As your mastodon user run crontab -e and enter the following
>
> 翻訳：マストドンがスムーズに動作するように、1日に1回いくつかのタスク実行が必要です。マストドーンユーザーで「crontab -e」を実行し、次のように入力します…


なお、今回はDockerで構築した環境のため、公式ドキュメントのコマンドを一部書き換えてcronに登録しています。

```:公式ドキュメントのコマンド
/home/mastodon/.rbenv/shims/bundle exec rake mastodon:daily
```

```:今回使用したコマンド
docker-compose run --rm web rails mastodon:daily
```


# 結論
**公式ドキュメントにはきちんと目を通しましょう。**

時間のあるときに、`mastodon:daily` の処理も読んでみたいと思います。


# この処理が必要な理由
Mastodon で使用している **PubSubHubbub** と呼ばれる仕組みが関係しています。
他インスタンスとの連携は、7日で期限が切れるようになっており、`mastodon:daily` でその更新処理を行っているとのことでした。

つまり、更新処理を行わないことで（期限が切れて）徐々に他インスタンスと連携が取れなくなり、寂しいインスタンスが出来上がってしまうわけですね。

この辺りの仕組みについては、 [Mastodon インスタンスのリモートフォローの仕組みと必要な購読更新の設定方法](http://qiita.com/koteitan/items/fadbe900c88481888917) で詳細に解説されています。
herokuにFlaskアプリをデプロイする

[heroku](https://www.heroku.com/): すごく簡単に使えるPaaS

[以前](http://qiita.com/msrks/items/06aa2eeaa0d01f6716ec)にAWSのEC2にデプロイした[Deep Learning アプリ](https://github.com/msrks/keras_num_pred)を herokuにデプロイしてみる。

EC2はIaaSのため、ミドルウェアのインストールや設定など色々と必要だったが、PaaSのHerokuなら同じことがterminalに数行でできちゃう。

## 準備：herokuの登録とツールのインストール

#### 1.[公式ページ](https://www.heroku.com/)で登録する

#### 2.[CLIツール](https://devcenter.heroku.com/articles/heroku-cli)をインストール

```bash:mac
$ brew install heroku
```

```bash:ubuntu
$ sudo apt-get install software-properties-common # debian only
$ sudo add-apt-repository "deb https://cli-assets.heroku.com/branches/stable/apt ./"
$ curl -L https://cli-assets.heroku.com/apt/release.key | sudo apt-key add -
$ sudo apt-get update
$ sudo apt-get install heroku
```

#### 3.ログインする

```bash
$ heroku login

Enter your Heroku credentials:
Email: <your-email>
Password: ********
Logged in as <your-email>
```

## pythonアプリをデプロイ

#### ローカルレポジトリを作成

```bash
$ mkdir heroku-app
$ cd heroku-app
$ pyenv virtualenv 3.6.0 heroku_keras_3.6.0
$ pyenv local heroku_keras_3.6.0
$ echo .python-version >> .gitignore
$ git init
```

#### requirements.txtに 依存ライブラリを記述

```bash
$ pip install tensorflow keras flask h5py
$ pip install gunicorn # web app. server
$ pip freeze > requirements.txt
```

#### runtime.txtに pythonのバージョンを指定

```bash
$ echo python-3.6.0 > runtime.txt
```

#### Procfileに webアプリの起動方法を指定

```bash
$ echo web: gunicorn app:app --log-file=- > Procfile
```

#### heroku にデプロイ

```bash
#$ heroku local web

$ heroku create <app-name>
$ heroku buildpacks:set heroku/python

$ git add -A
$ git commit -m "deploy heroku"
$ git push heroku master
$ heroku ps:scale web=1
$ heroku open
```

アプリ：https://msrks-numpred.herokuapp.com
Macのhostsファイルの場所

```Terminal.
$ sudo vi /private/etc/hosts
Password: 'PCログイン時のパスワード入力'

↓以下が開く

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1       localhost
255.255.255.255 broadcasthost
::1             localhost
```
リダクション操作

#array と bit の reduction をまとめてみます。

リダクション操作とは何らかの意味で rank が減少する演算です。Fortran における rank とは、配列や coarray の次元、整数変数中のビット、MPI や OpenMP におけるプロセッサやスレッドなどを指しています。

まだ整理のいいアイデアがありませんので下書きです。

|array     |array (bitwise)   |bit   |non-reductive, elemental|
|:-------|:-------|-------:|----------------:|
|count||popcnt||
||||not|
|all|iall||iand|
|any|iany||ior|
||iparity|poppar|ieor|
|maxval||||
|minval||||
|product||||
|sum||||
||||
|maxloc|||
|minloc|||
|findloc|||
||||
|pack|||
|unpack|||
|シフト関数|||
|cshift|||
|eoshift|||
|||ishft|
|||ishftc|
|||shifta|
|||shiftl|
|||shiftr|
|||dshiftl|
|||dshiftr|
||||
|||leadz||
|||trailz||



##maskを取る関数など
|||
|:----|:----|
|命令||
||forall|
||do concurrent|
||where|
|リダクション||
||count||
||all||
||any||
||maxval||
||minval||
||product||
||sum||
|ビット毎リダクション||
||iall||
||iany||
||iparity||
|位置||
||maxloc|
||minloc|
||findloc|
|フィルター||
||pack|
||unpack|
|その他||
||merge|
|ビットマスク||
||merge_bits|
||ビットマスク生成|
||maskr||
||maskl||
Pythonで外部ライブラリをインストール

ディープラーニングをやろうと思ってPythonインストールして、
いざゆかん！と思ったらライブラリありませんと速攻足止め食らったので備忘投稿。

ディープラーニングに限った話ではありませんが、
NumPyという配列や行列を扱うための外部ライブラリを使う必要に迫られましたが、
最小構成のPythonではインポートしないと使えません。

そんなときは次のコマンドでインストールできます。

```
% python -m pip install numpy
```
他にも足りないライブラリがあったらコレでインストールできると思います。
AWS上のCentOSにApacheをインストールしたのにTestPageが開かない問題

#背景
AWS上に2台サーバを立ててHA構成っぽいものを作りたいなーと思っており、まずはWebサーバを立てようと思った次第です。
CentOSをOrderして、`yum install httpd`で行けるやろ！と思ったら全く開かず…

ちゃんと見られるようになるまでの備忘録を載せます。

#構成
CentOS Ver6
インスタンス作成時にクイックスタート上に表示されないので、AMI MarketplaceからCentOSで検索してね。

#手順？
0.なにはともあれ`yum update`

1.Apacheインストール
`yum install httpd`

2.ポータル上(AWSって「ポータル」って呼ぶんすかね？)からセキュリティグループを開く。
　編集でHTTPからのアクセスを許可する。

===
ここまで設定すればあとはhttpd起動でIPアドレスにアクセスするとスタートページに飛ぶと思ってました。
どうやらAWSでオーダーしたばかりのCentOSはiptables上で80番のポートが空いていないのです。
Apacheインストール/起動かつセキュリティグループの設定にも問題がないのにアクセス出来ない場合はiptablesの設定を見てみてください。

3.以下コマンドにてhttpからのアクセスを許可できます。
`/sbin/iptables -I INPUT 5 -p tcp --dport http -j ACCEPT`

#備考
あとわからないなりに色々設定をいじくったので(効果あったか分からないけど)載せておきます。

・Elastic IPの割り当て
グローバルIPが起動するたびコロコロ変わってしまうのを防ぐため固定IPを割り振ります。課金状況はよく分かっていません！！

・`chkconfig httpd on`
起動するたびhttpdを起動する設定にしました。
`httpd          	0:off 1:off 2:on 3:on 4:on 5:on 6:off`
となっていればOK
pipでUnicodeDecodeErrorが発生(Windows環境)

Windowsでpipを使ってPyYAMLをインストールしたらUnicodeDecodeErrorが発生してインストールできなかったのでその解決方法です。

#環境
Windows 7 Professional SP1 64bit
Python 3.6.1 (64bit)
pip 9.0.1

#エラー内容
PyYAMLをインストールしようとするとUnicodeDecodeErrorが発生してしまう・・・。

```bat:
>pip install PyYAML
Collecting PyYAML
  Using cached PyYAML-3.12.tar.gz
Installing collected packages: PyYAML
  Running setup.py install for PyYAML ... error
Exception:
Traceback (most recent call last):
  File "c:\python36\lib\site-packages\pip\compat\__init__.py", line 73, in console_to_str
    return s.decode(sys.__stdout__.encoding)
UnicodeDecodeError: 'utf-8' codec can't decode byte 0x83 in position 80: invalid start byte

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "c:\python36\lib\site-packages\pip\basecommand.py", line 215, in main
    status = self.run(options, args)
  File "c:\python36\lib\site-packages\pip\commands\install.py", line 342, in run
    prefix=options.prefix_path,
  File "c:\python36\lib\site-packages\pip\req\req_set.py", line 784, in install
    **kwargs
  File "c:\python36\lib\site-packages\pip\req\req_install.py", line 878, in install
    spinner=spinner,
  File "c:\python36\lib\site-packages\pip\utils\__init__.py", line 676, in call_subprocess
    line = console_to_str(proc.stdout.readline())
  File "c:\python36\lib\site-packages\pip\compat\__init__.py", line 75, in console_to_str
    return s.decode('utf_8')
UnicodeDecodeError: 'utf-8' codec can't decode byte 0x83 in position 80: invalid start byte
```

#解決方法
コマンドプロンプトの文字コードを「UTF-8」にすることで解決しました。

###１）コマンドプロンプトの文字コードを確認する。

```bat:
>chcp
現在のコード ページ: 932
```
chcpコマンドで「932」と表示されたら文字コードは「ShiftJIS」になっています。

###２）コマンドプロンプトの文字コードを変更する

chcpコマンドで「65001」を指定すると文字コードを「UTF-8」に変更できます。

```bat:
>chcp 65001
Active code page: 65001
```

###３）PyYAMLインストール

PyYAMLが正常にインストールできました。

```bat:
>pip install PyYAML
Collecting PyYAML
  Using cached PyYAML-3.12.tar.gz
Installing collected packages: PyYAML
  Running setup.py install for PyYAML ... done
Successfully installed PyYAML-3.12
```

#追記
mstranslatorパッケージのインストールでもUnicodeDecodeErrorが発生しました。
http://qiita.com/akabei/items/2356bb1ac282f6dd2a45

こちらは本記事の方法では解決しなかったので、以下の記事を参考に解決しました。

WindowsでのPython外部モジュール導入のはまりどころ
http://qiita.com/yukinoi/items/1fe023408d3e684da983

WindowsでPythonの開発をすると文字コードの問題がわりとありますね・・・。
C#でTwitterのOauth認証を使ってツイートするシンプルなライブラリを自作してみた

※リポジトリを移動しました。

#何故作りたくなったのか
・外部アプリケーションからTwitterがしたいので試験的に作りました。
・ライブラリを自作したい欲が前々から強かったのでついに手を出した感じ。

#使い方

以下の名前空間を記述してください

```c#:Sample.cs
using System.Twitter;
```
####ツイートするメソッドの例
```c#:Method.cs
public void OnClickTweetButton(object sender, EventArgs e)
{
  var twitter = new TwitterAPI("your ConsumerKey", "your ConsumerKeySecret",
  "your AccessToken", "your AccessTokenSecret");

  var tweetValue = "HELLO"; 
  twitter.Tweet(tweetValue);
}
```
トークンを取得してTweetメソッドでツイートする感じです。改良するのはTwitterが最近オワコン化してるので少し迷うとこですね（笑）

#まとめ
プログラミング入門者が作ったガバガバなものなのですが、何かしら役に立てば幸いです。ライブラリを書くのはこれで二度目でしたけど書いてて楽しかったので、みなさんもTwitterAPIとは言わずともライブラリを書いてみてはいかがでしょうか。ではでは
MacにプリインストールされていないバージョンのPythonを別途インストール

ディープラーニングをちょっとやってみようと思って自分のMacにPython 3.6.1を入れてみたので備忘投稿。

まず、環境はこんな感じ。
・端末：MacBook Pro（Late 2012）　←そろそろ新しいのほしい！
・OS:OS X EL Capitan

MacだとPythonは最初からインストールされてたりする。自分の環境だと

```
% python --version
Python 2.7.10
```

で、色々調べてみたらディープラーニングではPythonは２系ではなく３系を使うとのこと。
さらに調べたらbrewとかでインストールする方法があったのですが、
既存の２系の環境も残しておきたかったりしたので、今回は本家ページから直接持ってきました。
ちなみにAnacondaディストリビューションとかもありますが、
サイズが大きく中身がよくわかんないので、とりあえず最小構成で行くためにPythonだけ入れます。

https://www.python.org/downloads/

ということで、「Download Python 3.6.1(2017/04/23現在)」をクリック。
直接パッケージを自分のMacにダウンロードしてインストールすると、
なんやかんやでpython 3.6.1の実行バイナリ(python3)を発見。

```
% python3 --version
Python 3.6.1
% which python3
/Library/Frameworks/Python.framework/Versions/3.6/bin/python3
```
ご丁寧に自分が使ってるシェルの設定ファイルにPATHの環境変数まで記載してくれました。
※ ちなみにzshでやったら「.zprofile」に記載されました

```zsh
# Setting PATH for Python 3.6
PATH="/Library/Frameworks/Python.framework/Versions/3.6/bin:${PATH}"
```
これでディープラーニングに入門する環境は整いました。DLやってみます！
Pandoc で Markdown を pukiwiki記法に変換したい。

Markdown → Pukiwiki のツールをずっと探しています。

# 以下の方法に落ち着きました

```bash
cat article.md \
| sed -E 's/^  -/  --/g' \
| pandoc  --from markdown_github --to pukiwiki.lua >> pleaseUseThis.txt
```

元にさせてもらったのは、多分次のページです。

[PandocのカスタムWriterでMarkdownからはてな記法に変換 - Qiita](http://qiita.com/takada-at/items/4d94a8811b4aaa5d5fd3 "PandocのカスタムWriterでMarkdownからはてな記法に変換 - Qiita")

Pandoc の Custom Writer の機能を使って markdown_github から pukiwiki に変換しようとしています。
いまのところ抱えている問題点として、この Custom Writer だけでは、箇条書きのインデントが反映されていないので `sed` を使って、無理やり１段分だけ修正をかけています。

実際のスクリプトは Gist においておきました。
pukiwikiで使用しているプラグインによっては変更が必要だと思うので、自身の環境に合わせて変更をお願いします。

https://gist.github.com/yusanish/a2acff8d8bf5f56e528297b03660e8fb

> もっといい方法や、箇条書きを修正する方法あったら教えてください。
頑張ったんですが、どうもだめでした。
気が付いたらJSスクラッチ界隈が便利になってた件4

1.[気が付いたらJSスクラッチ界隈が便利になってた件1](http://qiita.com/Bong/items/27a9763880723df4f3b2)
2.[気が付いたらJSスクラッチ界隈が便利になってた件2](http://qiita.com/Bong/items/b49c6e9f8e9be9d7fe7c)
3.[気が付いたらJSスクラッチ界隈が便利になってた件3]
(http://qiita.com/Bong/items/bd434fd7209b9a457139)
4.気が付いたらJSスクラッチ界隈が便利になってた件4

#要素の操作が便利になっていた
まだまだ終わらないよ！
ここで、自分の中の固定概念を、一度ぶっ壊すよ！

##要素を取得する
もし、クマ好きのエンジニアが要素を取得したら、
今までのやり方だと、こんな感じ。

```html:sample1.html
<p id="animal01" name="white" class="first animal">alpaca</p>
<p id="animal02" name="white" class="second animal">bear</p>
<p id="animal03" name="white" class="third animal">cat</p>
<p id="animal04" name="white" class="forth animal">dog</p>
```

```javascript:sample1.js
// idで
var elm_id_1 = document.getElementById("animal02");
console.log(elm_id_1.innerHTML);  // bear

// 名前で
var elms_name_1 = document.getElementsByName("white");
console.log(elms_name_1[1].innerHTML);  // bear

// タグ名で
var elms_tagname_1 = document.getElementsByTagName("p");
console.log(elms_tagname_1[1].innerHTML);  // bear

// クラス名で
var elms_classname_1 = document.getElementsByClassName("second animal");
console.log(elms_classname_1[0].innerHTML);  // bear
```

そういえば、ひと昔前のIEには「document.all」っていうのがありましたね (^_^;
確か、パフォーマンス上の問題があって、禁じ手としていたような気がします。


##ところがどっこい
最近のお作法は以下の通り。

```javascript:sample2.js
// idで
var elm_id_2 = document.querySelector("#animal02");
console.log(elm_id_2.innerHTML);  // bear

// 名前で
var elms_name_2 = document.querySelectorAll("[name='white']");
console.log(elms_name_2[1].innerHTML);  // bear

// タグ名で
var elms_tagname_2 = document.querySelectorAll("p");
console.log(elms_tagname_2[1].innerHTML);  // bear

// クラス名で
var elms_classname_2 = document.querySelectorAll(".second.animal");
console.log(elms_classname_2[0].innerHTML);  // bear
```

**querySelector**は単一の要素を取得します。
もし複数あった場合は、最初の要素を取得します。

**querySelectorAll**は複数の要素を取得します。

##まとめ
いや～便利ですね。**CSSセレクタ**で、要素を取得できる時代になってたんですね！
jQueryで便利だと思った機能が、どんどん標準機能化されてきて、とっても幸せです。
ReadyNASのSSHを有効にしてハックしよう！

#ReadyNASのSSHを有効にする方法

コンニチハ。
NETGEARのネットワークストレージReadyNAS（レディナス）をご存知ですか？

ご家庭向けのエントリークラスNASのようなちょっと派手な機能は少ないものの、IT専任の担当者がいない中小企業やSOHOでも、エンタープライズクラスの機能がライセンス追加なしで、手軽に使えるスグレモノなんです。

派手な機能が無い？　**無いなら、作ればイイじゃない**。
ReadyNAS OSはDebianベース。SSHでアクセスすれば、やりたい放題です。ファイルシステムは6年も前からBtrFSを採用。枯れっ枯れな安定動作。「データを護る」この一点のみにパラメータを全振りした漢のNASです。

というわけで、ReadyNASをハックする方法をご案内します。

**ReadyNASの5レベル・データ保護機能**
[リンク](https:\/\/www.slideshare.net/slideshow/embed_code/key/dOnAUENQnRgeYk) SlideShareが開きます。

**ReadyNASのSSHを有効にする方法**
[リンク](https:\/\/www.slideshare.net/slideshow/embed_code/key/3DtL9zZpiSgc4r) SlideShareが開きます。

>login as: root
root@10.110.1.155's password:
Welcome to ReadyNASOS 6.7.0
Last login: Wed Apr  5 20:05:51 2017 from 10.110.1.153
root@RN312:~# whoami
root
root@RN312:~# cat /etc/**debian_version 8.7**
root@RN312:~# uname -a
**Linux RN312 4.4.57.x86_64.1 #1 SMP Tue Mar 28 15:43:20 PDT 2017 x86_64 GNU/Linux**
root@RN312:~#
root@RN312:~# cat /proc/version
**Linux version 4.4.57.x86_64.1 (jenkins@blocks) (gcc version 4.9.2 (Debian 4.9.2-10) ) #1 SMP Tue Mar 28 15:43:20 PDT 2017**
root@RN312:~#



**Happy Hacking!!**:grinning:
Objective Cメモ

## プロパティ
http://qiita.com/uasi/items/80660f9aa20afaf671f3
https://www.ecoop.net/memo/archives/objective-c-property-basics.html
http://qiita.com/a_ishidaaa/items/6461f62a1a12208b0c50

#### 整数から文字列を生成する
http://d.hatena.ne.jp/ugon105/20100905/1283708178


## NSArray・NSDictionary
#### 辞書・配列リテラルの簡潔な書き方、便利やな〜🙂
http://tech.aainc.co.jp/archives/7455

#### NSArrayとNSMutableArrayの相互変換
##### NSArrayからNSMutableArrayを作る
```
NSArray* array = @[@"hoge", @"fuga", @"piyo", @"foo", @"bar"];
NSMutableArray* mArray2 = [array mutableCopy];
```

http://qiita.com/mikansensei/items/34eecfcdb08cc1e8e7db

#### `enumerateObjectsUsingBlock:`メソッドが便利
各要素ごとに、要素・インデックスを引数に取るブロックで処理を書ける。逆順・処理の並列化も可能。

[NSArrayでfor(; ;)とかfor-inを使うのをやめて、enumerateObjectsUsingBlock:を使う](http://qiita.com/exilias/items/f8ebd0dfed493bb0e25a)

[[Objective-C] 配列から特定要素を安全に削除する](http://qiita.com/edo_m18/items/2d6a52f61ea71d9a3c0a)

[[iPhone] NSMutableArray の使い方 (Objective-C)](https://i-app-tec.com/objective-c/nsmutablearray.html)

#### Obj CのLightweight Genericsを使う
http://qiita.com/hironytic/items/16920fb0a5c8d8127e10

## AppleDoc
http://dev.classmethod.jp/smartphone/iphone/ios-appledoc-1/
Xcodeのtipsのメモ

## コードスニペットを登録すると捗る

> コードスニペットに登録する文字列の中に `<# #>` で囲んだ文字列を作っておくとその場所までTabキーで一気に移動出来る様になります。

[Xcodeのコードスニペットの追加方法 - 強火で進め](http://nakamura001.hatenablog.com/entry/20111108/1320712792)

## エディタペインに画面を２つ並べて開発したい

画面分割(Assistant Editor)モードと呼ばれるモードに移行する方法の説明になります。

### ファイルを新たに右側に開きたい

1: `⌘ Shift O` でOpen Quicklyのウインドウを開く

![ 2020-11-29 13.20.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162670/bf8e41e2-1b21-7fa3-726a-6abadf1a2357.png)

2: Open Quicklyのウインドウに、右側に開きたいファイル・クラス・関数などの名前を入力

![ 2020-11-29 13.20.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162670/34b70b07-4646-2d32-dbc4-81521b8f27df.png)

3: 開きたい対象にフォーカスを移動して、`Option Enter`

すると選択した候補が右側のペインに表示され、次のようになります：
![ 2020-11-29 13.22.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162670/e24c441d-823a-17b3-7830-e951c2efcef6.png)

### 左右に開いた画面のフォーカスを移動したい

#### 方法1

```
Control `
```
でフォーカスを移動します。

#### 方法2

`⌘ J`でペイン選択モードに移行し、

![ 2020-11-29 14.07.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162670/d3c8d366-2f97-b247-2a85-24f86bcbe7c8.png)

矢印キーかカーソルでフォーカスを移動します。

-------

個人的には、

- キーボードの配列次第では、キーボード上のホームポジションからの手の移動距離が少ない
- 一旦選択モードに移行する手間が省ける

ため、方法1が好ましいと思っています。

------

## エディタ以外のペインを開閉したい

![pain.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162670/cf577953-d452-a07d-9ee5-495ec1f71363.png)

| ペイン | キーボードショートカット |
|---------|---------|
| 左側のペイン(Navigator) | `⌘ 0` |
| 下側のペイン(Debag Area) | `⌘ Shift Y` |
| 右側のペイン(Utilities) | `⌘ Option 0` |

## 複数カーソルの使用

Xcode 10以降

### キー操作で完結したい場合

Control Shift 矢印キー

### カーソル操作と組み合わせる場合

Control Shift クリック


## Others

### 検証環境

Xcode 12.2
macOS 10.15.7

### Credits

例示に使用しているコードは[YusukeHosonuma/SwiftPrettyPrint](https://github.com/YusukeHosonuma/SwiftPrettyPrint)になります。

### 参考ページ

[Xcodeを画面分割(Assistant Editor)モードで使う時に便利なショートカット集 - Qiita](https://qiita.com/ruwatana/items/8c138cde759a6bcf4bba#%E5%B7%A6%E5%8F%B3%E3%81%AE%E3%83%9A%E3%82%A4%E3%83%B3%E3%82%92%E9%96%89%E3%81%98%E3%82%8B%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88)

[Mastering the assistant editor in Xcode 11 - SwiftLee](https://www.avanderlee.com/xcode/xcode-assistant-editor/)
Visual Studio / WPF > コントロール > ScrollViewer 

```txt:動作環境
Windows 7 Pro (32bit)
Microsoft Visual Studio 2017 Community
Sublime Text 2
```

@ WPF 4.5入門 by 大田一希さん
No.2134 / 9985
> ScrollViewerコントロールは、名前のとおり子要素がScrollViewerより大きな場合にスクロールバーを出して要素を閲覧できるようにするコントロールです。

`<StackPanel>`とあわせて使うなどするようだ。

スクロール例を作ってみた。

```xml:XAML
<Window x:Class="_170423_t1935_border.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:_170423_t1935_border"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <ScrollViewer Width="200" Height ="250">
            <StackPanel>
                <Button Content="A" HorizontalAlignment="Left" Height="50" Width="180"/>
                <Button Content="   A" HorizontalAlignment="Left" Height="50" Width="180"/>
                <Button Content="     A" HorizontalAlignment="Left" Height="50" Width="180"/>
                <Button Content="      A" HorizontalAlignment="Left" Height="50" Width="180"/>
                <Button Content="      A" HorizontalAlignment="Left" Height="50" Width="180"/>
                <Button Content="     A" HorizontalAlignment="Left" Height="50" Width="180"/>
                <Button Content="     A" HorizontalAlignment="Left" Height="50" Width="180"/>
                <Button Content="    A" HorizontalAlignment="Left" Height="50" Width="180"/>
                <Button Content="   !" HorizontalAlignment="Left" Height="50" Width="180"/>
                <Button Content="   *" HorizontalAlignment="Left" Height="50" Width="180"/>
                <Button Content="   *" HorizontalAlignment="Left" Height="50" Width="180"/>
            </StackPanel>
        </ScrollViewer>
    </Grid>
</Window>
```

![work.png](https://qiita-image-store.s3.amazonaws.com/0/32870/562d7770-c17a-d85d-5258-563533bb722b.png)

![work.png](https://qiita-image-store.s3.amazonaws.com/0/32870/521d1080-1f31-9d65-1d08-9cca33c6cd22.png)


3行しか表示領域がないワードプロセッサ（書院？）でスクロールゲーム（というか、ただのマップ）を作ったのは27年前くらいの話。
メニューバーと同じフォントを取得する

備忘録です。

Windowsでメニューバーで使用されているのと同じフォントを取得します。

``` c
NONCLIENTMETRICS ncm;
ncm.cbSize = sizeof(NONCLIENTMETRICS);
SystemParametersInfo(SPI_GETNONCLIENTMETRICS, 0, &ncm, 0);
HFONT hFont = CreateFontIndirect(&ncm.lfMenuFont);
```
Python と Ruby で配列 (リスト) から要素を n 個おきに取り出す

# はじめに

僕は普段は Ruby を書いているのですが、最近趣味で Python を触り始めました。Python のリストのスライスを知って便利だなと思いました。ところで、Python の `array[::3]` という書き方は Ruby でどう書けばいいだろうとふと疑問に思ったので書き比べてみました。

# Python

```py
n = 3
array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
array[::n] #=> [0, 3, 6, 9]
```

# Ruby

```rb
n = 3
array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
array.select.with_index { |_, i| i % n == 0 } #=> [0, 3, 6, 9]
```

うーむ、もっといい書き方はないだろうか… :thinking:
Visual Studio / WPF > コントロール > ViewBox

```txt:動作環境
Windows 7 Pro (32bit)
Microsoft Visual Studio 2017 Community
Sublime Text 2
```

@ WPF 4.5入門 by 大田一希さん
No.2074 / 9985
> ViewBoxコントロールは、子要素を拡大縮小して表示するコントロールです。

Strechに「None」、「Fill」、「Uniform」、「UniformToFill」を使った例が紹介されている。

[分光](https://ja.wikipedia.org/wiki/%E3%82%B9%E3%83%9A%E3%82%AF%E3%83%88%E3%83%AB)で試してみた。


```xml:XAML
<Window x:Class="_170423_t1935_border.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:_170423_t1935_border"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <WrapPanel Margin="0, 30, 0, 0" Background="Black">
            <Viewbox Width="70" Height="50" Stretch="None">
                <Border BorderBrush="Violet" BorderThickness="15"></Border>
            </Viewbox>
            <Viewbox Width="70" Height="50" Stretch="Uniform">
                <Border BorderBrush="Blue" BorderThickness="5"></Border>
            </Viewbox>
            <Viewbox Width="70" Height="50" Stretch="Fill">
                <Border BorderBrush="LightBlue" BorderThickness="5"></Border>
            </Viewbox>
            <Viewbox Width="70" Height="50" Stretch="Uniform">
                <Border BorderBrush="LightGreen" BorderThickness="5"></Border>
            </Viewbox>
            <Viewbox Width="70" Height="50" Stretch="UniformToFill">
                <Border BorderBrush="Yellow" BorderThickness="5"></Border>
            </Viewbox>
            <Viewbox Width="70" Height="50" Stretch="Uniform">
                <Border BorderBrush="Orange" BorderThickness="5"></Border>
            </Viewbox>
            <Viewbox Width="70" Height="50" Stretch="UniformToFill">
                <Border BorderBrush="Red" BorderThickness="5"></Border>
            </Viewbox>
        </WrapPanel>
    </Grid>
</Window>
```

![work.png](https://qiita-image-store.s3.amazonaws.com/0/32870/c3ec782f-f646-ad7e-2351-3419c3f98f26.png)

コレジャナイロボ発進！
Visual Studio / WPF > コントロール > WrapPanel

```txt:動作環境
Windows 7 Pro (32bit)
Microsoft Visual Studio 2017 Community
Sublime Text 2
```

@ WPF 4.5入門 by 大田一希さん
No.1976 / 9985

> WrapPanelは、折り返して表示を行います。

```xml:XAML
<Window x:Class="_170423_t1935_border.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:_170423_t1935_border"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <WrapPanel Margin="0, 30, 0, 0">
            <Button Width="100">2</Button>
            <Button Width="100">9</Button>
            <Button Width="100">4</Button>
            <Button Width="100">7</Button>
            <Button Width="100">5</Button>
            <Button Width="100">3</Button>
            <Button Width="100">6</Button>
            <Button Width="100">1</Button>
            <Button Width="100">8</Button>
        </WrapPanel>
    </Grid>
</Window>
```

3x3の魔法陣が崩れているとき。
![work.png](https://qiita-image-store.s3.amazonaws.com/0/32870/5cd233c9-6f6c-886d-2f4c-eb9e8e783f5c.png)

ウィンドウの横幅を変更するとすべての合計が15になる魔法陣が完成する。
![work.png](https://qiita-image-store.s3.amazonaws.com/0/32870/ce5c859e-dc90-89ad-6da9-dee92118c919.png)