OmniAICreator/Qiita-1.07M huggingface dataset:
*file

# 概要
ソフトウェア開発ツールの設定ファイルを`Foofile`とする、という習慣があります。
"Foo"は開発ツールの名前や略称だったり、扱う対象のファイル形式の名前だったりします。

沢山あり、よく知らないツールなどもあるので、メモついでにまとめました。
編集リクエストを歓迎します。

# 歴史
UNIXにはMakeという歴史の長いビルドツールがあり、その設定ファイルが`Makefile`です。
この習慣の由来は`Makefile`かもしれません。
どなたか由来をご存じでしたら教えてください。

# 表

ツールとその設定ファイル名の表です。

| tool                                           | name of setting file        |
|------------------------------------------------|-----------------------------|
| [Make](https://en.wikipedia.org/wiki/Make_(software)) | `Makefile`           |
| [Bundler](http://bundler.io/)                  | `Gemfile` `Gemfile.lock`    |
| [Homebrew Bundle](https://github.com/Homebrew/homebrew-bundle) | `Brewfile`  |
| [Homebrew Cask](https://caskroom.github.io/)   | `Caskfile`                  |
| [Docker](https://www.docker.com/)              | `Dockerfile`                |
| [CocoaPods](https://cocoapods.org/)            | `Podfile` `Podfile.lock`    |
| [Carthage](https://github.com/Carthage/Carthage) | `Cartfile` `Cartfile.resolved` |
| [Cargo](https://crates.io/)                    | `Cargofile`                 |
| [Fastlane](https://fastlane.tools/)            | `Fastfile` `Appfile`        |
| [Doxygen](http://www.doxygen.org/)             | `Doxyfile`                  |
| [Jenkins](https://jenkins.io/)                 | `Jenkinsfile`               |
| [Berkshelf](https://docs.chef.io/berkshelf.html) | `Berksfile`               |
| [CoffeeScript](http://coffeescript.org/)       | `Cakefile`                  |
| [Grunt](https://gruntjs.com/)                  | `Gruntfile`                 |
| [Guard](http://guardgem.org/)                  | `Guardfile`                 |
| [Huxley](https://github.com/facebookarchive/huxley) | `Huxleyfile`           |
| [Jake](http://jakejs.com/)                     | `Jakefile`                  |
| [Knyle Style Sheets](http://warpspire.com/kss/) | `Knylefile`                |
| [MacPorts](https://www.macports.org/)          | `Portfile`                  |
| [foreman](https://github.com/ddollar/foreman)  | `Procfile`                  |
| [Puppet](https://puppet.com/)                  | `Puppetfile`                |
| [Rake](https://ruby.github.io/rake/)           | `Rakefile`                  |
| [Vagrant](https://www.vagrantup.com/)          | `Vagrantfile`               |
| [Caddy](https://caddyserver.com/)              | `Caddyfile`                 |
| [Capistrano](https://github.com/capistrano/capistrano) | `Capfile`           |
| [Librarian-Chef](https://github.com/applicationsonline/librarian-chef) | `Cheffile` |
| [Filefile](https://github.com/cobyism/Filefile) | `Filefile`                 |
| ?                                              | `Blakefile`                 |
| ?                                              | `Modulefile`                |
| ?                                              | `Sitefile`                  |
| ?                                              | `Tenderfile`                |
| ?                                              | `buildfile`                 |
純正マップのドロワーっぽいのを作る

この記事は[iOS Advent Calendar 2017](https://qiita.com/advent-calendar/2017/ios) 6日目の記事です。

## ドロワー？
（だいぶ前からですが・・・)iOS10/11からApple純正マップアプリのデザインが変わり、
画面下部に角丸ドロワーが使われるようになりました。

<img width="320" alt="s1.png" src="https://qiita-image-store.s3.amazonaws.com/0/186419/cb017a57-dfc1-1571-80f0-555860270d9f.png">


マップアプリのような全画面表示を前提とするアプリと相性が良い感じがしますね。
ただ残念ながらAppleはこのUIを提供していないため、自前で用意する必要があります。

それで近いものを作ろうとしてできたのがこちら。

![sushi.gif](https://qiita-image-store.s3.amazonaws.com/0/186419/7ef3205a-0a0b-49f6-dc64-5c0c822f23e1.gif)

https://github.com/nekowen/ios-sample-drawer

サンプルということでライブラリを使用せず、シンプルに。

ちなみに🍣を回す意味は特にないです。

## やったこと
薄暗い背景Viewとドロワーを詰めたDrawerViewを作成し、Storyboardに貼り付けます。
ドロワー内に表示するコンテンツは別にDrawerContainerViewとして分けます。

<img width="320" alt="s2.png" src="https://qiita-image-store.s3.amazonaws.com/0/186419/80a4a0b0-d0d2-7f40-6a0f-22825f58ad61.png">


UIPanGestureRecognizerを用いてドロワーの移動処理を行い、移動後の位置から背景色のalpha値を変更します。
移動の際のバウンスなんかができていませんが、そこはサンプルということで何卒・・・😱

```swift:DrawerView.swift
    @IBAction func didPanGesture(_ sender: Any) {
        guard let recognizer = sender as? UIPanGestureRecognizer else {
            return
        }
        
        let translation = recognizer.translation(in: self)
        switch (recognizer.state) {
        case .began:
            // ドラッグし始めた時の位置を保存
            self.savedDrawerBottomConstant = self.drawerBottomConstraint.constant
        case .ended:
            // 終了
            if translation.y >= 0 {
                self.close()
            } else {
                self.open()
            }
        default:
            // ドラッグ中
            var offset = CGFloat(self.savedDrawerBottomConstant - translation.y)
            if offset > 0 {
                offset = 0
            }
            // ドロワーの表示位置を変更
            self.drawerBottomConstraint.constant = offset
            // 背景色の変更アニメーションを適用
            self.animateBackgroundColorIfNeeded()
        }
    }
```


## 詰まったところ
UIViewを被せる形になるので、そのままだと下にあるマップのタップやスクロールができません。
そこで、[pointInside:withEvent](https://developer.apple.com/documentation/uikit/uiview/1622533-pointinside)をオーバーライドし、タップされた位置からタップイベントを下のViewに通すかどうか判定を行うようにしました。

```swift:DrawerView.swift
    override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
        //  drawerView内のタップイベントを通さない
        if drawerView.frame.contains(point) {
            return true
        }
        
        //  drawerViewが開いている時はタップイベントを通さない
        if backgroundView.frame.contains(point) && self.backgroundViewAlpha != 0.0 {
            return true
        }
        
        return false
    }
```


## 感想
~~寿司がたべたいなと思いました。~~
シンプルにできる方法を考えたらこんな感じになりました。もっといい方法がありそう。

あと調べたらこれ系のドロワーがライブラリとして公開されていました。純正マップ寄りで良さそうですね。

https://github.com/52inc/Pulley
ひらがな-カタカナ-漢字-ローマ字を変換するgemつくったよ

ひらがな、カタカナ、漢字、ローマ字を相互変換するgemを探していたら 
・ ほぼ更新されていない
・ 漢字をひらがなに変換できない
というような感じだったのでStringクラスを拡張するgemを作りました！

[miyabi | RubyGems.org](https://rubygems.org/gems/miyabi)


---
# 使い方
## 導入
```ruby
gem 'miyabi'
```
GemfileにMiyabiを追加し、`bundle install` または

```
$ gem install miyabi
```
を実行します！

あとは

```ruby
require 'miyabi'
```
を記述すれば準備完了！！

# メソッド
## to_kana
to_kanaメソッドはひらがなをカタカナに変換してくれます！

```ruby
"かたかなだいすき".to_kana #=> "カタカナダイスキ"
```

## to_hira
to_hiraメソッドはカタカナをひらがなに変換します！

```ruby
"ヒラガナメッチャイイ".to_hira #=> "ひらがなめっちゃいい"
```

## to_roman
to_romanメソッドはひらがなまたはカタカナをローマ字に変換します！

```ruby
"ローマだよ".to_roman #=> "romadayo"
```

## to_kanhira
to_kanhiraメソッドは漢字の含まれている文章をひらがなに変換します！
精度はカンペキではないかも・・

```ruby
"月が綺麗ですね".to_kanhira #=> "つきがきれいですね"
```


## is_hira?
is_hira?メソッドはひらがなかどうかをboolで返します

```ruby
"あいむひらがな".is_hira? #=> true
"アイムヒラガナ".is_hira? #=> false
```

## is_kana?
is_kana?メソッドはカタカナかどうかをboolで返します

```ruby
"あいむかたかな".is_kana? #=> false
"アイムカタカナ".is_kana? #=> true
```
## is_kanji?
is_kanji?メソッドは漢字かどうかをboolで返します

```ruby
"圧倒的漢字".is_kanji? #=> true
"かんじ".is_kanji? #=> false
```

## is_roman?
is_roman?メソッドはローマ字かどうかをboolで返します

```ruby
"hello".is_roman? #=> true
"はろー".is_roman? #=> false
```

## is_jananese?
is_japanese?メソッドは日本語かどうかをboolで返します

```ruby
"日本語がダイスキ".is_jananese? #=> true
"manji卍".is_japanese? #=> false
```

用意したメソッドはこんな感じです！

# さいごに
使いどころあるか謎ですが、まだまだ機能が少ないので今後増やしていくかも。。。
いい機能思いついた方がいればプルリク待ってます！
[miyabi/github](https://github.com/h-akaishi/miyabi)
SciNoteのオートコンプリートをとめたい

##背景
SciLaboのエディタSciNoteは、そこそこ使い勝手がよいのですが、オートコンプリートが使いにくい。

特に計算式をカッコで括りたいとき

`1:2`をカギカッコで括り、`(1:2)`にしたいとき'('を打つと自動的に')'が追加され`()1:2`となってしまう。仕方なく')'を消して、カーソルをお尻にもっていき')'を手入力しなければならない。オートコンプリートの意味がない。

##方法

そこで、カッコのオートコンプリートを止めるように設定変更をしました。
Macの場合、メニューバーのオプション、オートコンプリート有効を選び、(,[のチェックをはずすだけです。
![Kobito.ptHg5d.png](https://qiita-image-store.s3.amazonaws.com/0/115334/8906697b-f76f-e495-744a-49375381f602.png "Kobito.ptHg5d.png")

以上

##SciLab関連ドキュメントリンク
*install*
[macOSでSciLabを動かすまで](https://qiita.com/0x20FE/items/2ba5e60685816485ea4c)
[SciNoteのオートコンプリートをとめたい](https://qiita.com/0x20FE/items/cb17fda3f7456a807d41)

*実践*
[SciLabでCSV読み込み](https://qiita.com/0x20FE/items/dd6cbf94be0f2c20d002)
[SciLabでGUIを使ってみる](https://qiita.com/0x20FE/items/cf9cdad0e4be88714118)
[Mac/Windows共用scilabスクリプト]()未公開
[SciLabでフィルタを適用する]()未公開
[プロットメモ]()未公開
[プロットあれこれ]()未公開

*他の言語と比較・書き換え*
[Scilab (NumPy) - plotの書き方](https://qiita.com/0x20FE/items/311ac0e61a129e6a01fa)
 [配列と文字列処理の比較](https://qiita.com/0x20FE/items/ b6ea768692297b721951)
   [関数とオブジェクトの書き方メモ](https://qiita.com/0x20FE/items/02e2a6d8380851272a2c)
  [Scilab,NumPy,R行列処理の比較](https://qiita.com/0x20FE/items/75622186ba8a0c6086ce)
メソッドがthrowしたいときにそのメソッドの同期実行クロージャの中のtryはどうすんの

## はじめに

「メソッドがエラーをthrowさせたいとき、そのメソッドの同期実行クロージャの中のtryはどうすんの、クロージャの外にthrowできないのにどうすんのさ」っていうのを度々忘れるんだけど、それの解決策としてはerrorの変数を用意し、同期実行のクロージャでcatchしたらその変数にセットしてそこでthrowするだけですね、という話。 

```swift
func perform() throws {
    // クロージャの中のerrorを取り出す
    var _error: Error!

    // こいつが同期実行のクロージャ
    performAndWait {
        do {
            try self.save()
        } catch {
            _error = error
        }
    }

    if let error = _error {
        throw error
    }
}
```

ちなみに、どのような場合にこんな事をやることになったかというと、Core Dataで別スレッドでconetxtに一気に書き込んで、それを親のcontextへ再帰的に反映するときに利用した。

## 参考

https://github.com/tonyfresher/notes-ios/blob/e12456b87425e43874bff4d4c190ea1e77c61476/Notes/Core%20Data/Extensions/NSManagedObjectContext%2BNotes.swift#L17-L30
outguessコマンドを使ってみる

# outguessとは
ステガノグラフィを行うためのコマンド

# 使ってみる

## インストール
まずはインストール


* Ubuntu 16.04 LTSを使用

```
sudo apt-get install outguess
```

## 秘密のテキスト作成


```
echo "秘密です！" > secret.txt
```

## secret.txtを埋め込む画像を用意

* いらすとや様から頂きました．

<img src ="https://qiita-image-store.s3.amazonaws.com/0/187750/50ceb8e3-ea94-c226-4d4e-f17458d5c49b.jpeg" width=50%>




* 画像はsample.pngとします．

## png　→　jpg(もともとjpgの場合は必要なし)

ImageMagickを使う

```
mogrify -format jpg sample.png
```

* [png ←→ jpg](https://qiita.com/nekkoneko/items/5e58af4161f07bae846a)

## outguess コマンド（埋め込み）

```
outguess -k password -d secret.txt sample.jpg sample_secret.jpg
```

* 出力画像が以下の通り
    * 今回の画像は特に高解像度でもないので，画質の劣化が目立たない．

<img src="https://qiita-image-store.s3.amazonaws.com/0/187750/27f0a57e-6c2b-3641-477c-5e4596897714.jpeg" width=50%>





* これでデータの埋め込みは完了
    *データが埋め込まれたsample_secret.jpgというファイルが出力される．

## outguess コマンド（取り出し）

```
outguess -k password -r sample_secret.jpg secret.txt

```

* 埋め込まれていたsecret.txtが出現します．

* 以上

# ネタ
* このステガノグラフィ技術はCicada 3301という4chan(アメリカ版 2ch)に掲載された暗号解読ゲームに使われていたらしい．
すべての事象は同人誌のネタたりうる

##技術系同人誌は懐が深い

「技術系」同人誌ってなんでしょう。
技術に関する本。
技術って何？
科学の原理を（産業や医療・事務などの活動に）役立てて、ものを生産したり組織したりするしかた・わざ。
何かを作ったり、日々の活動をしていれば、それに必要なことは、「技術」です。そして、それを必要としている人はいます。

では、技術系同人誌を書くには？

尖ったネタ？　自分が持ってる技術をうまく切り取れば、同人誌ネタたりえます。
初心者向けはNG?　初心者向けだからこそ輝くネタはあります。
自分が書きたいネタ?　好きから始まるネタは、分野外でも美味しいのでニーズあります。

さあ！さあ！さあ！
技術書を書くのです。
そして、技術書典（などで)頒布しましょう。
50回近くの有志の社内勉強会の全てで、アンケート100%回収を達成した話

#はじめに
「[有志の社内勉強会を1年で50回くらいやった結果 伝えたいこと](https://qiita.com/nh321/items/f7e20c7ba737ff5c0f60)」を以前書きました。
まさか自分が書いた記事で 100いいね を越えるような記事が生まれるとは思わず、びっくりしております。

そんな中、「こんなにフィードバック得られなかったなぁ」というつぶやきを、エゴサで見つけました。
よっしゃ、じゃぁフィードバックに注目した記事でも書いてみようか、というのが本記事でございます。

#前提
前記事と同じです。
こんなことやった結果の、経験談です。
参加募集先：部門の人（200人くらいだった気がする）
平均的な参加人数：5人前後
運営：1人
頻度：50回くらい/年（週一くらいのペース）
枠：1時間
場所：社内の会議室
補足：個人PCは持ち込み禁止/会議室にはプロジェクターのみ
時期：201４年くらい
スタンス：有志
PJ：そこそこ長い期間やってる汎用機の保守（金融系）

#フィードバックを得るために行ったコト
ひとまず結論に近い話をバッと書き連ねておきます。
ちなみに、アンケート回収率は100%なので、ちゃんと効果ありましたよ。
（人数が少ない勉強会だったので、100%にできたってのもあると思います。人数の多い勉強会とかだと、少し勝手が違うかもしれません。）


##効果があったコト

- アンケートの質問数は極力少なくする
- 自由記述欄はできるだけ避ける
- 質問文は短く分かりやすく
- アンケート用紙を最初に配る
- アンケートを書く時間を最後に必ず用意する
- ペン持ってこない人向けにペンを用意しておく
- アンケートの結果をフィードバックする
- アンケート結果を取り込む
- アンケート結果を見たマネジメント層のフィードバックをフィードバックする

##反省しているコト

- アンケート回答者に対して、リスペクトの無い回答を返す

#上記作戦の背景/理由
##自分が嫌なことをしない
そもそも、自分自身が、アンケート答えるの嫌いなので、自分が嫌な要素を全部取っ払いました。
嫌いなアンケートはこんな感じです。

- 項目数が多い
- 質問が分かりづらい
- やたら自由記述欄が多い
- アンケートに答えても得が無い

全て裏返してこんなアンケートを目指しました。

- 項目数は少なく
- 質問は短く分かりやすく
- 自由記述欄は多くても１つ
- アンケートに答えたら得を感じられる(フィードバックループ)
    - アンケートの結果をフィードバックする
    - アンケート結果を取り込む
    - アンケート結果を見たマネジメント層のフィードバックをフィードバックする

フィードバックループについては、後述します。

##勉強会だけで完結させる
発端は、「後で書いて提出してください」が個人的に嫌いだっただけですが、最終的な狙いとしては、以下がありました。

- 「アンケート用紙」を先に配ることで、「何も考えずに聞いちゃってたよ・・・」という無意識リスクを防ぐ
- 「書く時間を用意する」ことで、「書く時間が無かった」という言い訳リスクを防ぐ
- 「ペンを用意しておく」ことで、「ペンが無いから・・・」という言い訳リスクを防ぐ
- 「その場で書いてもらう」ことで、「書くつもりだったけど、書くのを忘れた」などの忘却リスクを防ぐ
- 「アンケートを書く以外することが無い時間」にすることで、「どうせ暇だし書くか・・・」という動機付けにさせる
- 「みんな書いている」環境を用意することで、同調圧力によって記入させる

スマホでネットアンケートってのも考えたのですが、正直スマホアプリの「QRコード」ってちょっと面倒くさいな・・・って個人的に思っちゃうので・・・。
「紙」ならその場で書いてもらうにはぴったりだったので、そうしました。
まぁ、集計が面倒臭いっていう運営側の悩みは残りますが、そんなことより、回答率を上げることのが大事なので。

##フィードバックループ
フィードバックってのは、ループさせるのが気持ち良いと個人的には思っています。
なんの音沙汰も無いのは寂しいっしょ？

ここは当時の部門の雰囲気[^1]とかも背景にあるので、少し補足します。
当時、マネジメント層＞現場リーダー層＞現場担当層と大きく3層に別れており、そこそこ風通しも悪く、現場担当が結構な不満を抱えている状態でした。
勉強会には直接関係はないですが、「部門に関するコトで何か一言」みたいな欄を設けて、それを直接「マネジメント層」に送りつけてました[^2]。
マネジメント層からは結構貴重な意見を返してもらえたので、それを勉強会参加者にフィードバックしました。
ってのを、毎回繰り返しました。

その結果がどうかわかりませんが、自由記述欄も結構埋めてくれる人が多く、非常に有意義なアンケートになりました。
繰り返しになりますが、フィードバックってのは受け取ったら終わりではなく、そこからループさせていくことを考えるのが、個人的にオススメです。

[^1]: [前記事](https://qiita.com/nh321/items/f7e20c7ba737ff5c0f60)でも書いてますが、過去の話です。現時点の風土/雰囲気は徐々に変わってきております。
[^2]: 当然ですが、アンケートは無記名にして、個人が特定できない状態にした上で、送りつけています。

##反省点
「リスペクトのない回答をする」ってのをあげたのは、個人的な反省です。
ある勉強会で「薄く広くいろんな技術を紹介する」みたいなテーマをやったのですが、アンケートに「もう少し時間をかければ深掘りできたかも」というご意見をいただきました。
「いやいや、『薄く広く』って前提なんだから、深くするわけないじゃん」みたいな回答をしちゃいました。

今思えば、「確かにそうですね、次回はお声の多かった部分を掘り下げてみましょうか」と回答ればよかったかな・・・思います。

「良い質問を増やすには、愚問も受け入れること[^3]」みたいな言葉を見かけ、そうだよなーと、感じております。
「いろんな意見」に対して、突っぱねるのではなく、受け入れることで、回答しやすい状況を作ることは、もっと意識すればよかったなと反省しております。

なお、こんな文脈で書くと、例示した内容が「愚問」みたいになっちゃいますが、そうは思ってないです。
適切な表現をするなら、「自分が浅慮だったせいで、愚問に見えた」でしょうか。

[^3]: すみません。誰だったか覚えてないですが、「確かtwitterで見かけてた気がする」っていうレベルのワード。

#最後に
ちょっと黒い部分もありますが、実際効果はあったので、良かったら参考にしてみて下さい。

あと、これはただの宣伝ですが、冒頭でも触れた以下の記事はちょっと頑張って書いた記事なので、見てくれると嬉しいです。
「[有志の社内勉強会を1年で50回くらいやった結果 伝えたいこと](https://qiita.com/nh321/items/f7e20c7ba737ff5c0f60)」

あと、なんかコメントいただけたら、そこに対して記事書くかもです。
（書けるだけの内容が自分の中にあればですが・・・）

以上です。

---
「ジャパリパークさいかいけーかく」スライド作成の裏側から見るプレゼンストーリー作成

[プレゼン研究会 Advent Calendar 2017](https://qiita.com/advent-calendar/2017/infrapre) 5日目の記事です。

2017/4/1に開催された[第9回　エンジニアのためのプレゼン技術研究会「自分のアイデアを発表して上司の承認を得るには？」](https://infrapre.connpass.com/event/52037/)で、「[ジャパリパークさいかいけーかく](https://www.slideshare.net/furandon_pig/ss-74140504)」というスライドで発表した際に思ったこと、気がついたことについて話をしようと思います。

### プレゼン技術研究会でのスライド作成

個人的にプレゼンが苦手ということもあり、ぶつかり稽古(ただしいつも粉々に(心が)砕ける)的な感じで[プレゼン技術研究会](https://infrapre.connpass.com/)に参加しています。その割には毎回当日ギリギリまでスライドが作成できておらず、いつも薄氷を踏む思いで他の人の発表を聞きながらスライドを作っている状態でした。

[第9回　エンジニアのためのプレゼン技術研究会「自分のアイデアを発表して上司の承認を得るには？」](https://infrapre.connpass.com/event/52037/)でもスライドの流れをどうするかがまとまらず、どうしたものやらと考えあぐねていました。

### どうしたら(少なくとも)「何となく言いたいことはわかる」と思ってもらえるか

思案の末に閃いたのが、発表全体の流れの中で一つのストーリーが成立していれば良いのでは！というものでした。スライドの中身全てを理解してもらおうとしても、説明のスライドが延々と増えてゆくだけです。それでは聴衆も発表者もヘトヘトになってしまうだけで、結局なにも伝えられないのでは...と思ったのです。
(実際には発表までの時間が差し迫っていたので、少ないスライドに以下に伝えたい事をシンプルに詰め込むか、という要求が大きかったようにも思えますが...)

ではどうしたら発表全体で一つの流れを作れるか？ここで思いついたのが[けものフレンズ](http://kemono-friends.jp)からの予定調和的な発表ストーリーです。

### 聴衆の前提を揃えることでオチ的に言いたい事を伝える

けものフレンズを題材にして発表内容を作ることで、以下のような雰囲気の発表になるよう心がけました(そう思っていたのは私だけかもしれませんが...)。

```
ぼく　「ジャパリパーク再開したいよね！」
聴衆　(うんまあ(少しは)言いたい事わかる)
ぼく　「でもパーク再開にはこういう課題があるのです！」
聴衆　(たしかにセルリアンの脅威は深刻ですぞ...)
ぼく　「そこでこれこれこーして...」
聴衆　(...。(なに言ってんだこいつ...)、しかし実際にパークがあったらそういう解決策があるかも...何となくわかる！)
```

結局のところ、その時のプレゼン技術研究会のテーマである「自分のアイデアを発表して上司の承認を得るには？」に沿う形で、こういうテーマがある→実現のための課題がある→解決策はこうです、という一般的な流れではあったのですが、問題の背景をけものフレンズにすることで聴衆に「ストーリーは知っている、たしかにそういう課題でそうだよね」という形で発表に興味を持ってもらうと同時に、ある程度オチが見えるようにしつつ、「そうだよね、やっぱりそれ言いたかったんだよね！」的な流れを感じてもらえたと思っています。

### 少しずつでもプレゼンの場数を踏むと閃くようになるよ！

この話は発表までの時間が迫っている状況下だから苦肉の策的に閃いただけでは...と思われるかもしれませんが、個人的には何回かプレゼン技術研究会で発表の場数を踏むことで発表内容の構想からスライド作成までが少しずつスムーズにできるようになった成果のように感じています。
まったく褒められた話ではありませんが、プレゼン技術研究会への参加回数が増えるとともに、当日スライド作成に着手する時間が後ろ倒しになりつつあります...(＝より短い時間でスライド作成まで行えるようになっている(？))。

### プレゼン発表の場数を踏もう！

というわけで、ぜひ[プレゼン技術研究会](https://infrapre.connpass.com/)に参加してみませんか？
発表テーマは毎回変わり、発表内容を思いつきやすいテーマだったりそうでなかったりもしますが、程よい難易度(失敗したらお偉いさんから雷が落とされるとかはない)なので、発表の場数を踏むのにピッタリの場です。次回...はさすがに来年かな(もう12月なので)と思いますが、個人的には次回も参加したいと考えています。
Elasticsearch with Docker から Kibana へ (NetFlowの可視化)

##Fluentd で取得した NetFlow v5 のデータを Kibana で表示するための環境を Docker を使って構築します。

### 1. 前段として、dockerとdocker−composeは入れておく
[Ubuntu16.04LTSからDockerまで]
(https://qiita.com/Yohichi_Hayashi/items/4266028d6f2328f9ad39)

### 2. メモリマップの上限値を上げておく
```/etc/sysctl.conf
vm.max_map_count=262144
```

### 3. docker-compose.yml を以下のように記述。
```:~/neflow-compose/docker-compose.yml
fluentd:
  build: fluentd
  ports:
    - 24224:24224
    - 24224:24224/udp
  volumes:
    - ./fluentd:/fluentd/etc
    - ./fluentd/plugins:/fluentd/plugins
  links:
      - elasticsearch

elasticsearch:
  image: elasticsearch:5.6.4
  ports:
    - 9200:9200
    - 9300:9300
  expose:
    - 9300

kibana:
  image: kibana:5.6.4
  ports:
    - 5601:5601
  environment:
      - ELASTICSEARCH_URL=http://172.17.0.2:9200
#      - ELASTICSEARCH_URL=http://elasticsearch:9200
  links:
      - elasticsearch
```




### 4. fluentd から elastic search へ送る設定を作る

```docker:~/netflow-compose/fluentd/Dockerfile
FROM fluent/fluentd:latest-onbuild

#USER fluent

WORKDIR ~/netflow-compose/fluentd
ENV PATH ~/.gem/ruby/2.3.0/bin:$PATH
RUN apk add --no-cache --update --virtual=build-dependencies ruby-dev build-base && \
  gem install fluent-plugin-rewrite-tag-filter && \
  apk del build-dependencies && \
  rm -rf /tmp/* /var/tmp/* /var/cache/apt/*
RUN gem install fluent-plugin-netflow
RUN gem install fluent-plugin-secure-forward
RUN gem install fluent-plugin-elasticsearch # Elasticsearch連携

#EXPOSE 24284
EXPOSE 24224

CMD fluentd -c /fluentd/etc/fluent.conf -p /fluentd/plugins -vv
```
```:~/netflow-compose/fluentd/fluent.conf
<source>
  type netflow
  tag netflow.event
  port 24224
</source>
<match netflow.event>
  @type copy
  <store>
    @type file
    path         /fluentd/log/data.*.log
    symlink_path /fluentd/log/data.log
    append       true
  </store>
  <store>
    @type elasticsearch
#    host localhost
#    host elasticsearch
    host 172.17.0.2
    port 9200
    type_name netflow
    logstash_format true
    logstash_prefix flow
    logstash_dateformat %Y%m%d
  </store>
</match>
```

### 5. あとは、docker-compose up する
```$ sudo docker-compose up```

起動時ログが落ち着いたら、Kibanaを開いてみる
![スクリーンショット 2017-12-05 23.24.32.png](https://qiita-image-store.s3.amazonaws.com/0/116134/1149a81f-6e23-2dd7-6def-7a8f45fd56da.png)


参考リンク

【Docker】FluentdでとElasticsearchとRe:dashでログ管理
https://qiita.com/narumi_/items/59237554ea1c0e713dd9

・Docker 公式
https://www.elastic.co/guide/en/elasticsearch/reference/5.6/docker.html
http://www.elastic.co/guide/en/elasticsearch/reference/5.6/docker.html#docker-prod-cluster-composefile

・enqueueing all chunks in bufferについて
https://qiita.com/tatsu-yam/items/bd7006e483f3b3c64309

・fluentdのRuby導入についてはこのへんを参考に、
http://cross-black777.hatenablog.com/entry/2017/11/15/190000
エンジニアを目指して勉強したことまとめ

# 概要
IT未経験だった自分が現在まで勉強したことをまとめました。
IT業界に就職したい方の参考になれば幸いです。

# まずマークアップ言語
## HTML・CSS
職業訓練校に入校し、HTMLとCSSを学びました。
しかし基礎的なことしか習えなかったため、独学でも勉強。

# 次にプログラミング言語
## JavaScript
動きのあるwebサイトを作りたかったのと、プログラムにも興味を持ち始め勉強しました。
HTML・CSSと合わせて[PROGATE](https://prog-8.com/)と[ドットインストール](https://dotinstall.com/)で勉強させてもらいました。

## jQuery
JavaScriptを一通り勉強した後は、簡単にHTMLの操作ができると知って、jQueryの勉強も始めました。

## PHP
開発会社に入社し、PHPの課題をもらいました。
その時の課題はこちらの[「プログラムの勉強をしたいけど何を作ったらいいか分からない人へ」](https://qiita.com/raysuke/items/5b92780573b691b169fe)にまとめています。

# 必要に応じて勉強したもの
## SQL
PHPの課題の中でデータベースを使用するものがあったので覚えました。
基本的な文は書けるようになりました（select, insert, update, delete）が、集合演算子やトランザクションの理解がまだまだなので、勉強は終わっていません……。
なお課題に使うSQLの勉強に教材は用意しておらず、全部google先生を頼りに課題を完成させました。

## git
使っていない開発会社はほとんどないくらい浸透しているバージョン管理システム。
この勉強方法は実務と[この本（わかばちゃんと学ぶ Git使い方入門）](https://www.amazon.co.jp/%E3%82%8F%E3%81%8B%E3%81%B0%E3%81%A1%E3%82%83%E3%82%93%E3%81%A8%E5%AD%A6%E3%81%B6-Git%E4%BD%BF%E3%81%84%E6%96%B9%E5%85%A5%E9%96%80%E3%80%88GitHub%E3%80%81Bitbucket%E3%80%81SourceTree%E3%80%89-%E6%B9%8A%E5%B7%9D-%E3%81%82%E3%81%84/dp/4863542178/ref=sr_1_1?ie=UTF8&qid=1512482893&sr=8-1&keywords=%E3%82%8F%E3%81%8B%E3%81%B0%E3%81%A1%E3%82%83%E3%82%93%E3%81%A8%E5%AD%A6%E3%81%B6)を読みました。
この本はとても分かりやすくて導入にはもってこいの内容でした。

## linux
PHPの課題をしている時にlinuxは触っていましたが、なんとなくで使っていたので、知識を固めたくて勉強しました。
教材にしたのは[新しいLinuxの教科書](https://www.amazon.co.jp/%E6%96%B0%E3%81%97%E3%81%84Linux%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8-%E5%A4%A7%E8%A7%92-%E7%A5%90%E4%BB%8B/dp/4797380942/ref=sr_1_1?s=books&ie=UTF8&qid=1512483075&sr=1-1&keywords=%E6%96%B0%E3%81%97%E3%81%84linux)。
この本も初心者に分かりやすく書かれています。
この本ではシェルスクリプトの書き方も紹介されているんですが、どうにもシェルスクリプトの使い道を見出だせていないので、今後はシェルスクリプトの勉強も必要ですね。

## ネットワークの基礎知識
どうやってネットワークが作られているのか。
IP？ DNS？ ルータ？ なんぞ？ という疑問を解消するために勉強しました。
まだ全て理解できてはいませんが、会社の先輩曰く経験も必要とのことなので、この部分は焦らずじっくりと勉強しています。

---
**※この記事は勉強が進み次第随時更新していくつもりです。**
Pandasのdataframeの列を並べ替え。

----------------------------------------------------------
追記　05/04/2018
ixを使用すると実行はされるものの、コンソールにアラートがでる。
そのアラートに従い、locを使用。
df.loc[:, 列名を格納したリスト]

----------------------------------------------------------

Pandasのdataframeの列を入れ替える方法。

dataframe.ix[:,リスト]

参考
https://qiita.com/regeeeepg/items/defb1573cf6290718830
http://www.tsjshg.info/intro_pydata/intro01.html#id2
vuetifyjs + BrowserSync(lite-server)による変更のブラウザ同期

本記事のVuetifyjs + webpackの構成ははvue-cliを使って[vuetifyjs/webpack](https://github.com/vuetifyjs/webpack)テンプレートから作成した想定です。

## BrowserSync
フロントエンド開発をしていてブラウザでデバッグするシーンはよくあると思います。
ファイルを変更するたびに、ビルドして、ブラウザリロードして...と毎回実行するのは手間ですよね？

そんな課題を解決してくれるのがBrowserSyncです。
https://www.browsersync.io/

npmなプロジェクトであれば数コマンドで導入できるのでおすすめです。

## Vuetifyjsとの相性
長らくフロントエンド開発時はBrowserSyncを愛用していたのですが、最近手を出し始めたVuetifyjs(というかVue.js)+webpackとの相性が悪いみたいで、従来の設定ではうまく動作しませんでした。

具体的には、BrowserSyncはファイルの変更を監視して、変更があればブラウザ側にリロードを通知するような仕組みです。
Vuetifyjsのビルド時はビルド成果物のbuild.jsを一旦空にして、その後ビルドした内容でファイルを更新するようです。
この1回目の空にする更新をトリガーとしてBrowserSyncによりリロードが行われ、2回目の更新時にリロードされないことが多々ありました。(おそらくビルドの長さも関係していると思われます)

## 解決策
BrowserSyncの設定ファイルである、bs-config.jsに以下のように設定することで解決できます。

```js:bs-config.js
module.exports = {
    watchOptions: {
        awaitWriteFinish: true
    }
};
```
Ubuntu 17.10 へ ownCloud をインストール (後編)

# インストールウィザードの実施
https://doc.owncloud.org/server/latest/admin_manual/installation/installation_wizard.html

##　Dataディレクトリの指定

> You should locate your ownCloud data directory outside of your Web root if you are using an HTTP server other than Apache, 

apache以外を使っていたら、webルート以外に置け、とのこと。

> It is best to configure your data directory location at installation, as it is difficult to move after installation. You may put it anywhere; in this example is it located in /var/oc_data. This directory must already exist, and must be owned by your HTTP user (see Set Strong Directory Permissions).

apacheを使っているが、念のため上記の指定ディレクトリに設定する。自分の環境だと無かったので、生成して権限変更。

```bash
$ sudo mkdir /var/oc_data
$ sudo chown www-data:www-data /var/oc_data
```

mariadbがおすすめとのことなので、インストール

```bash
$ sudo apt install mariadb-server-10.1
* mariadb-serverだとなぜか依存関係でエラーが発生するので、バージョンを指定する

$ sudo apt install mariadb-server
```

## Webサイトにアクセスしてインストールウィザードを実行

ownCloudのユーザー名、パスワードを入力。データフォルダは任意。
データベースのユーザー名・パスワードはrootを指定。
セットアップを完了する前に、データベースを起動しておくこと。

上記を入力し、セットアップを完了を実行する。
　
<img src="https://qiita-image-store.s3.amazonaws.com/0/143649/fad9188a-ff5c-2041-22ba-7a1f701c2622.png" width=30%>　

## インストール後の作業

セキュリティを保持するため、下記を実行すること。ocdataなどのパスは適宜変更するべし。

```bash
#!/bin/bash
ocpath='/var/www/owncloud'
ocdata='/var/www/owncloud/data'
htuser='www-data'
htgroup='www-data'
rootuser='root'

printf "Creating possible missing Directories\n"
mkdir -p $ocdata
mkdir -p $ocpath/updater

printf "chmod Files and Directories\n"
find ${ocpath}/ -type f -print0 | xargs -0 chmod 0640
find ${ocpath}/ -type d -print0 | xargs -0 chmod 0750
find ${ocdata}/ -type f -print0 | xargs -0 chmod 0640
find ${ocdata}/ -type d -print0 | xargs -0 chmod 0750

printf "chown Directories\n"
chown -R ${rootuser}:${htgroup} ${ocpath}/
chown -R ${htuser}:${htgroup} ${ocpath}/apps/
chown -R ${htuser}:${htgroup} ${ocpath}/config/
chown -R ${htuser}:${htgroup} ${ocdata}/
#chown -R ${htuser}:${htgroup} ${ocpath}/themes/
chown -R ${htuser}:${htgroup} ${ocpath}/updater/

chmod +x ${ocpath}/occ

printf "chmod/chown .htaccess\n"
if [ -f ${ocpath}/.htaccess ]
 then
  chmod 0644 ${ocpath}/.htaccess
  chown ${rootuser}:${htgroup} ${ocpath}/.htaccess
fi
if [ -f ${ocdata}/.htaccess ]
 then
  chmod 0644 ${ocdata}/.htaccess
  chown ${rootuser}:${htgroup} ${ocdata}/.htaccess
fi
```

# アップグレード時の作業
こちらを参照
https://doc.owncloud.org/server/latest/admin_manual/maintenance/update.html#set-updating-permissions-label
pythonのlambdaで再帰処理

pythonのlambda
n%で「当たり」とした時に当たりまで何回失敗したかを計測するlambda関数を作ってみる。

```py3:lambda.py
from random import random as r
count = lambda i : (lambda i, f: f(i, 1, f))(i, lambda i, c, f: f(i, c+1, f) if r() > i else c)

print(count(0.1)) # 10%が成功するまでの回数
```

解説
i = %を数値表記したもの
c = 成功するまでのカウンタ
f = 再帰関数
横に長いので分割

```py3:t1.py
lambda i : (lambda i, f: f(i, 1, f)) #A(関数)
(i, lambda i, c, f: f(i, c+1, f) if r() > i else c) #B(引数)
```

1. count(n)で呼び出した際にAの引数iへnが渡される。
2. Bの第一引数が1.から受け取ったiが渡される。
3. Bの第二引数が再帰関数としてfに渡される。
4. この２つの引数をAの中にあるlambdaへ渡す。
5. Aの中のlambdaは2.と3.の引数を受け取り再帰関数を実行する。
6. rand()がnを下回るまでcを加算しながら繰り返す。

みたいな感じだと思う。
数学は苦手だから本当に10%までに失敗した計測できてるかはあんまわからない。ごめんなさい。
Ubuntu 17.10 へ ownCloud をインストール (前編)



情報元はこちら。
https://doc.owncloud.org/server/latest/admin_manual/installation/linux_installation.html



## owncloud-filesを取得　
http://download.owncloud.org/download/repositories/10.0/owncloud/

リポジトリキーをaptに追加　

```bash
# wget -nv https://download.owncloud.org/download/repositories/10.0.3/Ubuntu_17.04/Release.key -O Release.key
# apt-key add - < Release.key
```

リポジトリを追加してインストール

```bash
# echo 'deb http://download.owncloud.org/download/repositories/10.0.3/Ubuntu_17.04/ /' > /etc/apt/sources.list.d/owncloud.list
# apt-get update
# apt-get install owncloud-files
```

参考
https://download.owncloud.org/download/repositories/10.0/owncloud/


## Apache設定の変更

owncloudの設定ファイルを作成

```bash
# touch /etc/apache2/sites-available/owncloud.conf
```

```:/etc/apache2/sites-available/owncloud.conf
Alias /owncloud /var/www/owncloud/
   <Directory /var/www/owncloud/>
 Options +FollowSymlinks
 AllowOverride All

 <IfModule mod_dav.c>
  Dav off
 </IfModule>

 SetEnv HOME /var/www/owncloud
 SetEnv HTTP_HOME /var/www/owncloud

</Directory>
```    


enabledディレクトリに設定ファイルを追加

```bash
# ln -s /etc/apache2/sites-available/owncloud.conf /etc/apache2/sites-enabled/owncloud.conf
```

PHPが有効になっていない場合があるので、apacheのモジュールとしてphpを有効に。

```bash
$ sudo apt-get install libapache2-mod-php
$ sudo a2enmod php7.1
$ systemctl restart apache2
```

## その他のApache設定

https://doc.owncloud.org/server/10.0/admin_manual/installation/source_installation.html　
によると、`mod_rewrite`は必須とのこと。

```bash
# a2enmod rewrite

* 下記はRecommended。デフォルトで幾つかは有効になっているかも。
# a2enmod headers
# a2enmod env
# a2enmod dir
# a2enmod mime
```



## SSL設定
Apache installed under Ubuntu comes already set-up with a simple self-signed certificate. All you have to do is to enable the ssl module and the default site. Open a terminal and run:

Ubuntuでインストールされたapacheは、simple self-signed certificateでセットアップ済みである。単にsslモジュールとdefault siteを有効にすればよい

```bash
# a2enmod ssl
# a2ensite default-ssl
# service apache2 reload
```


## サイトにアクセスしてみる

`https://xxx/owncloud`　にアクセスしてみる。
おそらく下記のようなエラーが出るはず。次でこれらを解消する。

<img src="https://qiita-image-store.s3.amazonaws.com/0/143649/cd915f80-7b73-ca79-49e2-22d194962925.png" width=70%>


## PHPの足りないモジュールをインストール

インストールされていない、と表示されているモジュールをインストールする

```
$ sudo apt install -y php-xxx
* 必要なモジュールをインストール
* mb multibyteは、`php-mbstring`をインストール


$ systemctl restart apache2
```

完了すると、下記のような表示に変わる。 
<img src="https://qiita-image-store.s3.amazonaws.com/0/143649/fad9188a-ff5c-2041-22ba-7a1f701c2622.png" width=30%>


後編へ続く。。。
https://qiita.com/t-akumarr/items/d1880382ebbb06a8fafc
Delphi FMXフレームワークでm4aサウンドファイルを再生するWindowsアプリを作成する

DelphiのFMXフレームワークを使うと簡単にサウンドファイルを再生できます。
例えばhoge.mp3ファイルを再生する場合には，FormにTMediaPlayerを張り付けて以下のように記述します。

```
uses
  FMX.Media;

MediaPlayer1.FileName := 'hoge.mp3';
if MediaPlayer1.Media<>nil then begin
  MediaPlayer1.Play;
end;
```
これ以外にも，TMediaPlayerは，Stopメソッドや，CurrentTime，Duration，Volume，State などのプロパティも利用できます。

そこで，Windowsで利用できるサウンドファイルを調べてみました。
http://docwiki.embarcadero.com/Libraries/Tokyo/ja/FMX.Media.TMediaCodecManager
によると,
>wma .mp3 .wav 

となっています。m4aファイルは実装されていません。これはDirectXにコーデックがないためと思われます。
そこで，DirectXのコーデックを
http://www.majorgeeks.com/files/details/windows_8_codecs.html
よりダウンロードしてインストールしました。
さらに，以下のコードをTMediaPlayerの配置されるフォームに記述しました。

```
initialization
  TMediaCodecManager.RegisterMediaCodecClass('.m4a', 'm4a Files', TMediaType.Audio, TWindowsMediaCodec);
```
そうすると，

```
MediaPlayer1.FileName := 'hoge.m4a';
if MediaPlayer1.Media<>nil then begin
  MediaPlayer1.Play;
end;
```
でhoge.m4aファイルを再生することができました。

####追記

MSDN
https://msdn.microsoft.com/ja-jp/library/windows/desktop/dd757927(v=vs.85).aspx
によると，m4aファイルがコーデックのインストールなしに利用できると書かれています。もしかすると，mfpackを使うとコーデックのインストールなしにできるかもしれません。
https://sourceforge.net/projects/mfpack/
Androidのフラグメンテーション問題とCrosswalk WebView Engineについて

:christmas_tree:[Monaca Advent Calendar 2017](https://qiita.com/advent-calendar/2017/monaca):christmas_tree: 3日目の記事です。

# フラグメンテーション問題とは

Android向けのHTML5モバイルアプリには、フラグメンテーション問題と呼ばれるものが存在します。
これはAndroid4系において、WebViewが端末毎に異なるために動作差異が発生してしまう現象のことを指しています。

ではWebViewが端末毎に異なるというのは、具体的にはどのような状態なのでしょうか。

まず一つは、ブラウザエンジンの違いです。
Android4.3までは、WebViewのエンジンがWebkitでした。4.4からはChromiumに変更されています。

もう一つは、端末のメーカーによるWebViewの調整です。
AndroidはオープンソースのOSですから、OS付属のWebViewにも手を加えることが可能で、各メーカーが独自の実装を加えている可能性があります。

なおAndroid5以降は、WebViewがOSから切り離されてGoogle Playから提供されるようになったため、上記の問題は発生しません。

# Crosswalkとは
フラグメンテーション問題を解決する手段として、Crosswalkという名前のWebViewをアプリ内に含めて配布する方法があります。
CrosswalkはIntelが開発したChromiumベースのWebViewです。
OSのバージョンや端末のメーカーが何であれ、アプリ内に包含されているWebViewを使ってアプリを実行するため、動作差異が発生しないというわけです。

# Crosswalkの利用方法
MonacaでCrosswalkを利用する場合、［Cordovaプラグインの管理］画面で「Crosswalk WebView Engine」プラグインを有効化します。
そしてプラグインの設定画面で、プロセッサのアーキテクチャとして ARM/x86のいずれかを選択します。

![crosswalk.png](https://qiita-image-store.s3.amazonaws.com/0/152304/b08b8f7f-630b-3ae1-fd02-d23789e1a2bd.png)

この設定をしておかないと、ビルドを行うことができません。
多くのAndroid端末ではARMアーキテクチャが利用されていますが、x86の端末もありますので、まずはARMを選択してビルド、次にx86を選択してビルド、といった手順で、両方のapkを入手しましょう。
Google Playに両方のapkを登録すると、フィルタリング機能により端末に合わせたapkがインストールされます。

# Crosswalkは必要なのか？
前述の通り、Crosswalkが必要となるのはAndroid4系のみです。
Android公式の調査によると、2017年12月現在、Android4系のシェアは全バージョンの約1/5程度となっているようです。

[https://developer.android.com/about/dashboards/index.html](https://developer.android.com/about/dashboards/index.html)

![androidversion.png](https://qiita-image-store.s3.amazonaws.com/0/152304/6b7b9f9e-01d9-b13d-42d0-efd68103ed01.png)

これから新しくアプリを開発するのであれば、ターゲットOSは5系以上とするケースが多いでしょう。
実際、Intelは既にCrosswalkの開発を終了しています。
とはいえ、案件によっては4系をターゲットから外せないという状況もあるかもしれません。
そういった場合にはこの記事を参考にCrosswalkを利用してみてください。
ionicメモ

# はじめに
ionicを実装する上でとよく忘れるものをメモしておきます。
## NavController
ionic doc : https://ionicframework.com/docs/api/navigation/NavController/

| ページイベント       | 戻り値 |  説明  |
|:------------------|:------|:------------------|
| ionViewDidLoad    | void | ページが読み込まれたときに実行されます。このイベントは、作成されるページごとに1回のみ発生します。ページが去ってもキャッシュされている場合、このイベントはその後の表示で再び発生しません。 ionViewDidLoadイベントは、ページのセットアップコードを配置するのに適しています。  |
| ionViewWillEnter  | void  |ページが入力されてアクティブなページになる直前に実行されます。 |
| ionViewDidEnter   | void |ページが完全に入力され、現在アクティブなページになったときに実行されます。このイベントは、最初のロードであっても、キャッシュされたページであっても発生します。 |
| ionViewWillLeave  | void |ページが放置されようとしており、アクティブページではなくなったときに実行されます。|
| ionViewDidLeave   | void |ページが終了し、アクティブページではなくなったときに実行されます。|
| ionViewWillUnload | void |ページが破棄されようとしているときに実行され、要素が削除されます。 |
| ionViewCanEnter   | boolean/Promise<void> | ビューが入る前に実行されます。これは、認証されたビューで一種の "ガード"として使用でき、ビューを入力する前に権限をチェックする必要があります。|
| ionViewCanLeave   | boolean/Promise<void> |  ビューが終了する前に実行されます。これは、ビューが離れる前にパーミッションをチェックする必要がある、認証されたビューで一種の "ガード"として使用できます。|
Spring IntegrationでTCP通信する処理の流れを調べてみた(クライアント編)

Spring IntegrationでTCP通信する処理の流れを整理するために、煩雑ではありますがクライアント側のシーケンス図を描いてみました。

![Spring IntegrationによるTCP接続のシーケンス](https://qiita-image-store.s3.amazonaws.com/0/162142/ba5d616b-76a7-6788-77fc-86b8f2f29d35.png)

#### 前段階
`autoStartUp`が有効、つまりアプリケーション起動時に`OutboundGateway`や`ConnectionFactory`が起動するケースを想定しています。そのため起点がおかしなことになってしまいました:confounded:。

1. `OutboundGateway`は`ConnectionFactory`を設定するメソッドを呼ぶ。
2. `ConnectionFactory`は送受信者として`Sender`・`Listener`に`OutboundGateway`を登録する(`OutboundGateway`は`TcpSender`・`TcpListener`を実装している)。`TcpSender`はメッセージを送信するためにコネクションファクトリから接続を確立するためのインターフェイスで、 `TcpListener`は受信したメッセージを接続から受け取るためのインターフェイスである。
3. `ConnectionFactory`のライフサイクルを`start`にする。

#### TCP接続(ホストへ送信)
1. Clientが業務処理を行いオブジェクトを`MessageGateway`に渡す。
2. `MessagingTemplate`でオブジェクトを`Message`に変換し、`AdvisedRequestHandler`を介して`OutboundGateway`に渡す。
3. `OutboundGateway`は接続を確立するために`ConnectionFactory`を呼ぶ。
4. `ConnectionFactory`は新しく接続を確立するために`TcpConnection`の`buildNewConnection()`を呼ぶ。接続を共有する場合(`single-use=false`)は既に使える接続がないか先にチェックする。新しく接続を確立した場合はイベントを発行する。
5. `OutboundGateway`は変数に`TcpConnection`を保持する。
6. `AsyncRepry`オブジェクトを生成する。これは受信メッセージが送信メッセージに紐づいたものかクライアント側でチェックしたり、非同期受信するまで送信処理を待機させるためのものである。
7. `TcpConnection`の`send`を呼び、メッセージを`Serializer`で直列化してホストに送る。

`Interceptor`を定義している場合は6と7の間に呼び出されます。

#### TCP接続(ホストから受信)
1. `TcpConnection`は受信したオブジェクトを`MessageMapper`にメッセージオブジェクトにマッピングさせる。
2. `MessageMapper`はヘッダを編集し、`TcpConnection`にメッセージを返す。
3. `TcpConnection`は`OutboundGateway`にメッセージを渡す。
4. `OutboundGateway`は受け取ったメッセージが送信したものに紐づいているかチェックし、`AsyncRepry`に渡す。
5. `AsyncRepry`はメッセージを受け取り、ラッチをカウントダウンする。
6. `AsyncRepry`ラッチがカウントダウンされるか、タイムアウトするまで待機し、メッセージを`OutboundGateway`に返す。受信処理の1~5は非同期で実行される。
7. 接続を共有しない場合(`single-use=true`)は接続を閉じる。この場合イベントを発行する。
8. `OutboundGateway`は`MessageGateway`に結果を返す。
9. `MessageGateway`はClientに結果を返す。

`Interceptor`を定義している場合は3で`OutboundGateway`にメッセージを渡す前に呼び出されます。


備考：
図では省略していますが、`MessageGateway`と`OutboundGateway`の間には`Channel`や各種エンドンポイントがあります。

#### 投稿に至った経緯
案件でSpring Integrationを使ってTCP通信するをすることになり、調べた結果を整理する目的で
投稿しました。日本語のドキュメントが少ないため、悩んでる方の助けになったら幸いです:sweat:。（ちなみにServer側は今の案件ではSpring Integrationを使う予定はないので、たぶん投稿し）ないです。

#### 図の作成に使ったサービス
↑の図は[WebSequenceDiagrams](https://www.websequencediagrams.com/)というサービスを利用して作成しました。サンプルを見ながら簡単にスクリプトでシーケンス図を描けます。デザインを変えられたり、画像として出力もできます。メールアドレスを登録すれば、サイト上にデータを保存することも可能です。しかし、出力される画像が低画質なのと右下にロゴが入ってしまう（課金すれば解決できるっぽい）ので、商用には使えなさそうですが、考えを整理するのには使えそうです。

![WebSequenceDiagramsのスクリーンショット](https://qiita-image-store.s3.amazonaws.com/0/162142/430b8685-cf73-3a1c-ee14-49be495db541.png)
pushd と dirs を peco でちょっと便利に使う

6 日目担当の @tsubasaogawa です。5 日目は @yk-m さんの「[iOS11 / iPhone X 対応をした話](https://qiita.com/yk-m/items/9f4ee3637bb700bd5083)」でした。

# この記事は以下について書かれています

* Bash における pushd と dirs の使い方
* peco を使って両者をちょっと便利に使う tips

# 解決したいこと

* 過去に移動したディレクトリへ戻りたい
  * けど打つのが面倒
  * むしろパスの一部を忘れた

# 解決案: pushd と dirs

## 各コマンドについて

* pushd: 基本的には `cd` と同じ。これに加えて、カレントディレクトリの絶対パスを **スタック** する
* dirs: スタックした一覧を表示

`popd` というコマンドもありますが、今回は使いません。

## 使い方

```bash
$ pushd /var
/var 

$ pushd cache/
/var/cache /var 

(中略)
 
$ pushd epel/
/var/cache/yum/x86_64/6/epel /var/cache/yum/x86_64/6 /var/cache/yum/x86_64 /var/cache/yum /var/cache /var 

$ pwd
/var/cache/yum/x86_64/6/epel

$ dirs -v
 0  /var/cache/yum/x86_64/6/epel
 1  /var/cache/yum/x86_64/6
 2  /var/cache/yum/x86_64
 3  /var/cache/yum
 4  /var/cache
 5  /var
```

`pushd +[番号]` で一気にジャンプできます。

```bash
$ pushd +4
/var/cache /var /var/cache/yum/x86_64/6/epel /var/cache/yum/x86_64/6 /var/cache/yum/x86_64 /var/cache/yum

$ pwd
/var/cache
```

dirs ～ pushd +[番号] するのが地味に面倒です。

# peco を使って少しラクに移動する

## peco について

* お馴染みのあの娘です。詳しくは [公式](https://github.com/peco/peco) へ

## .bashrc にエイリアスとファンクションを追加

* pushd へのエイリアス `pd`
  * 普段の移動はコレ
* pushd + dirs + peco を使ったファンクション `pds`
  * 過去のディレクトリに戻りたくなったらコレ

```bash:.bashrc
alias pd='pushd'

# 慣例に習うなら関数名は peco-pushd がいいかも
function pds() {
  # peco が無ければ何もしない
  ! which peco >/dev/null 2>&1 && echo 'please install peco' 1>&2 && return 1
  # dirs -v の結果を peco でフィルタリングして、キューの番号を取得
  local pushd_number=$(dirs -v | peco | perl -anE 'say $F[0]')
  # peco が強制終了されたら何もしない
  [[ -z $pushd_number ]] && return 1
  # 移動
  pushd +$pushd_number
  return $?
}
```

## 実行例

![pds.gif](https://qiita-image-store.s3.amazonaws.com/0/49525/4b7d73f5-f147-b96d-2b2e-baefdcf806a1.gif)

# さいごに

* 工夫次第でまだまだ改善の余地があります。peco を普段の作業にどう組み込むと便利か? について考えると楽しいです。[fzf](https://github.com/junegunn/fzf) 版も試してみたいです。
* zsh では `cd` + 補完機能で実現できるようです ([zshでディレクトリスタックを手軽に移動する](https://qiita.com/yoshikaw/items/e12e239afdbaaec78ec7))
* 参考: [ディレクトリの移動は cd コマンドよりも pushd コマンドのほうが便利！](https://qiita.com/noraworld/items/81c12253d22b7575151a)
* そして書いてから気付く、本記事の車輪の (再^n) 発明感:fearful: (さらに高度な) ご参考:
  * [ターミナル上で unite.vim っぽいことをする peco が大変便利](http://cohama.hateblo.jp/entry/2014/07/06/022017)
  * [ファイル／ディレクトリを検索して、peco って cd するやつ 2](https://qiita.com/yungsang/items/e10ca283a1ceeaa845db)

明日 7 日目は @esu_eichi さんです。お楽しみに。
Visual Studio for Macを7.3にアップデートして.slnファイルが開けなくなったら

# 概要
* Visual Studio for Macを`7.3（797）`にアップデートしたときに特定の.slnファイルを開こうとすると、ファイル単独で開いてしまいソリューション全体を開けませんでした
* （たぶん本質的ではないですが、）.slnの最初の2行を変更して開けるようになりました。

# 「ソリューションが開けない」とは？
こういう状態です。

* ファイルの開き方として「ソリューションワークベンチ」を選べない
<img width="712" alt="sln.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/8d705dd7-79e5-591c-856a-409d3853bc29.png">


※ちなみに、ここで「現在のワークスペースを閉じる」のチェックを外すと、複数のソリューションを1つのVS for Macで開けます。

* .slnファイルを単独で開いてしまう
<img width="759" alt="スクリーンショット 2017-12-05 22.48.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/3940521d-828d-067b-d4c1-eee9296d0c46.png">


# .sln変更before / after

もともとVS for Macで開けていたファイルのソリューションは次のような2行で始まっていました。

```
Microsoft Visual Studio Solution File, Format Version 15.00
# Visual Studio 2012
```

変更後はこうです。

```
Microsoft Visual Studio Solution File, Format Version 12.00
# Visual Studio 15
```

VS for Macの`7.2`系でも開けます。

# .slnの仕様
「仕様」というまでは調べられていません。
`Visual Studio 15` の15はプロダクトとしては`Visual Studio 2017`を意味してそうです。

http://wiki.onakasuita.org/pukiwiki/?Visual%20Studio%2F%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3

http://wiki.onakasuita.org/pukiwiki/?Visual%20Studio%2F%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3

また、元のように`Format Version 15.00`のままで`Visual Studio`のバージョン番号を`15`にして.slnファイルを開こうとしても、.slnファイル単独で開いてしまいました。

Developer Communityでも、（今回のケースとは異なりますが）Format Version 15.00関連でうまく開けず12.00に戻している人がいたみたいです。

[Solution created with VS 2017 for Mac can not be opened with VS 2017 for Windows](https://developercommunity.visualstudio.com/content/problem/61883/solution-created-with-vs-2017-for-mac-can-not-be-o.html)

# まとめ
`Format Version 15.00`とVS for Mac`7.3（797）`の組み合わせがよくない感じでしょうか？

とりあえず開けるようにしたかったので現状開けるバージョンにして回避しましたが、動向追ってみようと思います。
青空文庫の書籍をすべてローカルに保存

# GitHubから入手

```
git clone https://github.com/aozorabunko/aozorabunko
```

※10GB近くあるので時間がかかる

# 作業
* aozorabunkoというディレクトリが出現

* cardsディレクトリに移動

```
cd aozorabunko/cards
```

* cardsディレクトリ内のzipファイルをすべてコピーもしくは移動させる．

```
mkdir bunsho_all
cp */files/*.zip bunsho_all/
```

## 解凍

```
cd busho_all
unzip '*.zip'
```

* [unzipで複数のzipを解凍](https://qiita.com/nekkoneko/items/bafbaf251061af6ee161)

## 文字コードの変更（必要な人だけ）

* 元の文字コードはShift_JIS

```
nkf -w --overwrite *.txt
```

* [Shift_JISで書かれたファイルをUTF-8に変換](https://qiita.com/nekkoneko/items/45f4a518a619139fbad8)

* 終了

# 注意
* 全ファイルを使ってプログラムを書く場合
    * zipを解凍すると，テキストファイルだけでなくディレクトリも少しだけ混じっており，そのディレクトリ内にもテキストファイルが残されているので bunsho_all に移動させる．
        * [lsでディレクトリのみ表示](https://qiita.com/nekkoneko/items/9857a65a0b20eb44d954)
[React Component] jsonを可視化するコンポーネント: react-json-viewer



jsonを可視化できる `react-json-viewer` と言うコンポーネントが便利です。

> React JSON Viewer Component. View JSON in beautiful tabular format. 

![Kobito.DAZb3L.png](https://qiita-image-store.s3.amazonaws.com/0/170309/48319190-9149-b8ac-f7e6-7cc9dfe6795a.png "Kobito.DAZb3L.png")

## Demo

http://nsisodiya.github.io/react-json-viewer/

## Source

https://github.com/nsisodiya/react-json-viewer
[npm] npmコマンドの使い方 


# インストール済みのパッケージリストを取得

```
npm list --depth=0 -g
```

or 


```
npm ls --depth=0 -g
```


`-g` はグローバルオプションである。以下同様。


# バージョンを指定してインストール

```
$ npm install <package name>@<package version> -g
```

例：

```
$ npm install cordova@5.4.1
```

# インストール済みのパッケージを更新する

```
$ npm update <package name>@<package version>
```

`@<package version>` を省略すると、そのパッケージの最新版に更新される。

例：

```
$ npm update antd@3.0.0
```


# 最新バージョンがあるかどうかを確認する

```
$ npm outdated
```

```OUTPUT
Package                 Current  Wanted  Latest  Location
...
jquery                    2.2.2   2.2.4   3.1.1  jquery
...
```

各パッケージに対し、 **Current**, **Wanted**, **Latest** という3つの列が表示されている。
それぞれの列の意味は以下の通りである。

* Current：現在インストールされているバージョン。
* Wanted：存在するバージョンのうち、 `package.json` に記載された `semver` 条件を満たす最新のバージョン。
* Latest：そのパッケージの最新バージョン。

# 一括更新する

`npm update`　コマンドで `outdated`　のパッケージを一括更新できる。

```
$ npm update
```

が、`npm update`　コマンドには **２つの問題点**がある。

* package.json に記載された semver のルールに従うため、^ つきの記載だとメジャーバージョンのアップデートまでは行ってくれない。
* package.json ファイルを更新してくれない。


そこで、`npm-check-updates` と言うツールが登場する。
以下、その使い方を簡単に紹介する。

# npm-check-updates

## `npm-check-updates` をインストール

```
$ npm install -g npm-check-updates
```

## 最新バージョンがあるかどうかを確認する

上記で紹介された `$ npm outdated` に該当する。

```
$ ncu
```
注： `$ npm-check-updates` でもOK。

## package.jsonの更新

```
$ ncu -u
```

## 実際のパッケージを一括アップデートする

上では `package.json` が更新されただけ。

```
$ npm update
```

## 特定のパッケージを指定

```
$ ncu -u {package_a}
```

スペース区切りで複数のパッケージ一度に指定できる。

```
$ ncu -u {package_a} {package_b}
```

## 特定のパッケージを除外

```
$ ncu -x {package_a}
```

特定のパッケージを除外しつつその他のパッケージをアップデートしたいときには、
下記のようにコマンドを入力する。

```
$ ncu -u -x {package_a}
```

## 正規表現を使う

頭に「npm-」が付いているものだけを確認したい場合は、

```
$ ncu '/^npm-.*$/'
```




# 参考

http://phiary.me/npm-package-version-info-install/
http://dackdive.hateblo.jp/entry/2016/10/10/095800
https://www.nxworld.net/services-resource/npm-check-updates.html
【読書メモ】ジョイ・インク 役職も部署もない全員主役のマネジメント

[Joy, Inc.](http://amzn.asia/jm8umiq)

 ざっくり概要
===============
エンジニア全員が**幸せ**に生きるために会社がしている(=企業文化)について解説している本


 幸せとは
===============
**心理的安全のもとでエンジニリングが遂行できる**
(職場環境周りだけピックアップ)
- 上下や入社歴に関係なくフラットに話せる(ペアでの活動(ペアプロ))
    - アウトプットによる思考力向上
- 失敗(予算超過、納期超過など)によるストレスを感じさせない
    - チャレンジできる
- 非生産的な定例作業/MTGは排除し、やること/やるべきことが明確である
    - 不必要な時間を使わないため、やるべきタスクへ集中することができる
- タスクはアサインするが、見積もりはチーム/個人、マネジメントもチーム/個人
    - 個人個人に責任が生じる→時間密度が濃く、生産性が高い


感想
==============
心理的安全のもとでエンジニアリングが遂行できる、各々の技術力をペアプロでシェアしつつ、技術力と品質を高める、というのは魅力的に感じる。  

変に個人個人で仕事をしていると無駄に周りと自分を比較し、優劣をつけるスキができるが、  
高密度の時間の中ではただの無駄となり、純粋にコーディングであったり、あるべき姿に対して議論(をおこなうためにも必要なアウトプット)を行うため、”エンジニアリングしたい””技術を使いたい”という純粋な欲のある人にぴったりの働き方の印象。
【Ruby】フィボナッチ数列の問題をメモ化で解く

# はじめに
今回はフィボナッチ数列を求めるプログラムをメモ化により高速化することを目指します！


# フィボナッチ数列とは
最初の二項が1で，第三項以降の項がすべて直前の二項の和になっている数列のこと．
例）1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, …


# メモ化とは
プログラムの高速化における最適化技法の一種で，計算結果を保持しておくことにより，再計算を防ぐ手法です．

もっと簡単に言うと，一度計算したものはメモしておいて，必要であれば再利用しようというものです．

次節以降では，第五十項までのフィボナッチ数列を求めるプログラムを基に，メモ化を利用することで，実行速度をどれだけ短縮できるか検証します．


# 愚直に書くフィボナッチ数列
```Ruby
require 'benchmark'

def getFibonacciNumber(n)
  if n < 0
    return -1
  elsif n == 0 || n == 1
    return 1
  else
    return getFibonacciNumber(n-1) + getFibonacciNumber(n-2)
  end
end


Benchmark.bm 10 do |r|
  r.report "No Memorization" do   
    0.upto(50) do |i|
      printf("\n%4d:%d", i, getFibonacciNumber(i))
    end
  end
end
```

再帰関数により，毎回第一項から順に計算しています．
したがって，第一項から第五十項まで求めるのに *6455.837074秒* かかります．


# メモ化を用いたフィボナッチ数列
```Ruby
require "benchmark"

class FibonacciNumber

  def initialize()
    @aryFibNum = Array.new()
    @aryFibNum = [1, 1]
  end

  def getFibonacciNumber(n)
    if (@aryFibNum.size - 1) < n then
      @aryFibNum << @aryFibNum[n - 1] + @aryFibNum[n - 2]
      return @aryFibNum[n]
    else
      return @aryFibNum[n]
    end
  end

end


fn = FibonacciNumber.new
Benchmark.bm 10 do |r|  
  r.report "Memorization" do   
    0.upto(50) do |i|
      printf("\n%4d:%d", i, fn.getFibonacciNumber(i))
    end
  end
end
```

メモ化により，一度計算した項は保持しておくようにします．
そして，保持しておいた数値を再利用することで計算時間の短縮を実現します．

ベンチマークの結果は，第一項から第五十項まで求めるのに *0.000218秒* であり，計算時間の大幅な短縮を実現したことが分かります！


# おわりに
メモ化はプロコンや就活の技術テストでもよく見受けられるキーワードなので，勉強しておいて損はないです．

*（本記事に関して，プログラムや説明でこうした方がいいなどありましたら，コメントよろしくお願いします！）*
SQLServer Management Studio(SSMS)のダウンロード・インストール・起動

#はじめに
SQLServerの管理ツールである、SQLServerManagementStudio(SSMS)のインストール方法を説明する。

#SSMSについて
SSMSはSQLServerの管理および各種DB開発等には必須のツールである。
SQLServer2014まではSQLServer本体のインストーラにSSMSが付属していた。
しかし、2016以降はなぜか別途ダウンロードが必要となった(という認識)。
ここではSSMSを別途ダウンロード・インストールが必要な場合の手順を説明する。

#SSMSダウンロード方法
以下にアクセス。
https://docs.microsoft.com/ja-jp/sql/ssms/download-sql-server-management-studio-ssms

「SQL Server Management Studio xx.x のダウンロード」リンクを押下するのみ。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/217757/cbe0b3e1-dec5-88c9-78b4-3ac2212e203d.png)

#インストール
ダウンロードした　SSMS-Setup-JPN.exe　起動。
「インストール」押下。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/217757/aa856dd0-0ddf-7d92-8529-73b961c903a4.png)

しばらく待つ。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/217757/cd578082-95bb-7667-ab9e-fdca6f41f3d0.png)

完了。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/217757/98ce2cd2-2e2c-0c99-fc32-6e705d716a1e.png)

#起動確認
Windowsのアプリ一覧からMicrosoft SQL Server Management Studio を押下。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/217757/aabf06f3-8dc1-5cb2-ce2c-1fc64a739f54.png)

以上。
bootstrapを使ってみる

# bootstrapとは
レスポンシブルデザインに対応した，HTML,CSS,JSのためのフレームワーク

# bootstrap CDNとは
bootstrapのデータをダウンロードせず，すぐ使うことができる．

# 使ってみる

CSSとJSのURLをコピーしてくる ↓
https://www.bootstrapcdn.com/


```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>sample</title>
    <!-- Bootstrap CSS -->
    <link href="さっきのサイトのCSSのURL" rel="stylesheet">　←ココ
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.\
min.js"></script>
    <!-- Bootstrap JS -->
    <script src="さっきのサイトのJSのURL"></script>　←ココ
  </head>
<body>

<table class="table table-hover">
    <thead>
        <tr>
            <th>#</th>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th></th>
            <td>1,1</td>
            <td>1,2</td>
            <td>1,3</td>
        </tr>
        <tr>
            <th></th>
            <td>2,1</td>
            <td>2,2</td>
            <td>2,3</td>
        </tr>
    </tbody>
</table>

</body>
</html>
```

* ココと書かれた行の"さっきのサイトの～"の部分を取得してきたURLに変更．

* このソースコードでは，テーブルにマウスオーバーしたとき，テーブルの行の色が変化．

# 以上
自分が書けるのはここまで．
後は，チュートリアルやらなんやらを見て，がんばる．