OmniAICreator/Qiita-1.07M huggingface dataset:
R MarkdownでBootstrapのグリッドシステムを利用する

R Markdownには標準で[Bootstrap](http://getbootstrap.com/)が組み込まれています。そのためBootstrapの様々な機能が使えるようになっています。

ここでは，Bootstrapの機能であるグリッドシステムをR Markdownで利用してみます。

## グリッドシステムとは

グリッドシステムとは，Bootstrapが採用しているレイアウトシステムです。本家サイトでは以下のように説明されています:

>Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

基本的な考え方は，

1. ページに行を設置
2. 行内に列(セルをイメージしたほうがいいかも)を設置
3. これでグリッドのようなレイアウトを設計

となります。もちろんレスポンシブにできますし，画面解像度に応じて設定したりできます。具体的な説明，および使い方については下記のリンク先を参照してください:

http://getbootstrap.com/css/#grid

## R Markdownでの実装方法

### 実装例

具体例として，「1行のコンテンツで内部に3つの列(セル)がある」ようなレイアウトを想定してみます。以下のような内容のRmdファイルを準備します:

    ---
    title: "bootstrap grid test"
    output: html_document
    ---
    
    ## グリッドシステム
    
    ### 行の割当 {.row}
    
    #### 一列目 {.col-md-4}
    
    ひとつめ。
    
    ```{r}
    plot(1:10)
    ```
    
    #### 二列目 {.col-md-4}
    
    ふたつめ。
    
    ```{r}
    plot(5:10)
    ```
    
    #### 三列目 {.col-md-4}
    
    みっつめ。
    
    ```{r}
    plot(11:20)
    ```

これをknitしてrenderすると，以下のようなhtmlが生成されます:

![rmd_gridsys.png](https://qiita-image-store.s3.amazonaws.com/0/35118/0b4151b7-c1f8-b051-88f0-30241a56a0f0.png)

### 解説

R Markdownはmdからhtmlへと変換するのにPandocを利用しています。Pandocは見出し項目の行末に`{ }`を設置してそこにid名やclass名を記述しておくと，そのid名やclass名を持った`div`要素で覆うようになります。また見出しレベルの階層性の応じて，ちゃんと入れ子構造で解釈して対応します。これを利用して実装しています:

- まず大きい見出しレベルで`{.row}`を付与
- その下に，`{.row}`要素よりひとつ小さい見出しレベルで`{.col-md-4}`を付与
- これを3つ準備

これだけです。あとはBootstrapの仕様に従ってclassを付与していけば，自分好みのレイアウトにすることができます。ぜひ色々試してみてください。

### 留意点

#### クラス名を付与しない，列コンテンツと同レベル見出しについて

行を指定するコンテンツ内では，**列となるコンテンツ(上記例では`{.col-md-4}`を付与したもの)以外に同じレベルのコンテンツを配置しない**でください。例えば以下のような感じでは崩れます:

    ### 行の割当 {.row}
    
    #### 列コンテツ {.col-md-4}
    (内容記述)

    #### class名なし
    (内容記述)

    #### 列コンテンツ {.col-md-4}
    
    (以下略)

ただ，**列を指定した見出しレベルより下の見出しならOK**です。例えば以下のような感じならOKです:

    ### 行の割当 {.row}
    
    #### 列コンテツ {.col-md-4}
    (内容記述)

    ##### class名なし
    (内容記述)

    #### 列コンテンツ {.col-md-4}
    
    (以下略)

これなら単に列内の見出しとして解釈されます。

#### 見出しレベルについて

今回は「行として見出しレベル3・列として見出しレベル4」にしましたが，「行にレベル2・列にレベル3」としても大丈夫です。

#### floating tocについて

R Markdownにはサイドメニューとして見出し一覧を作成する[floating toc機能](http://rmarkdown.rstudio.com/html_document_format.html#floating_toc)がありますが，**floating tocを有効にしても今回の内容はそのまま機能します**。ただし，幅はけっこう狭くなりますので注意してください。

あとR Markdownの標準テンプレートでは，コンテンツの最大幅が固定されています(`.main-container`の`max-width`が940px)。もし最大幅を変更したい場合は，以下のようなcssチャンクをRmd内に記述してください:

    ```{css}
    .main-container {
    max-width: 1200px;
    }
    ```

**Enjoy!**
Laravelのコンソールで実行されたQueryを出力する方法

実際に実行されたQueryが見たい場合、通常のウェブページならdebugbarなりclockworkで簡単に見られますが、artisanコマンドやseederの場合はパッと見る方法が(たぶん)ありません。

こんなのを仕込んでおくと出力されます。

### Laravel4.2

```php
Event::listen('illuminate.query', function ($query, $bindings, $time, $name) {
    $backtrace = debug_backtrace(DEBUG_BACKTRACE_PROVIDE_OBJECT | DEBUG_BACKTRACE_IGNORE_ARGS);
    for ($i = 1; $i < count($backtrace); $i++) {
        $bt = $backtrace[$i];

        if (!isset($bt['file']) || strpos($bt['file'], 'vendor/') !== false) {
            continue;
        }
        if (isset($bt['file'])) {
            echo $bt['file'], ': ';
        }
        if (isset($bt['line'])) {
            echo $bt['line'], ': ';
        }
        echo "\n";
        break;
    }

    foreach ($bindings as $binding) {
        if (is_null($binding)) {
            $binding = 'NULL';
        } elseif (is_string($binding)) {
            $binding = "'" . $binding . "'";
        }
        $query = preg_replace('/\?/', $binding, $query, 1);
    }

    echo $query, ";\n";
    echo '----------------------------------------------------------------------', "\n";
});
```

# Laravel5.2

```php
// ...
$app = app();
$dispatcher = $app['events'];

$dispatcher->listen('Illuminate\Database\Events\QueryExecuted', array($this, 'logQuery'));
// ...
public function logQuery($event)
{
    $query = $event->sql;
    $bindings = $event->bindings;

    $backtrace = debug_backtrace(DEBUG_BACKTRACE_PROVIDE_OBJECT | DEBUG_BACKTRACE_IGNORE_ARGS);
    for ($i = 1; $i < count($backtrace); $i++) {
        $bt = $backtrace[$i];

        if (!isset($bt['file']) || strpos($bt['file'], 'vendor/') !== false) {
            continue;
        }
        if (isset($bt['file'])) {
            echo $bt['file'], ': ';
        }
        if (isset($bt['line'])) {
            echo $bt['line'], ': ';
        }
        echo "\n";
        break;
    }

    foreach ($bindings as $binding) {
        if (is_null($binding)) {
            $binding = 'NULL';
        } elseif (is_string($binding)) {
            $binding = "'" . $binding . "'";
        }
        $query = preg_replace('/\?/', $binding, $query, 1);
    }

    echo $query, ";\n";
    echo '----------------------------------------------------------------------', "\n";
}
```
javascriptでjqueryのclosest的な事をしたい

## 始まり
離れた関連する親要素が欲しいけど、parentNode.parentNode〜とか書くのはかなりよろしくない。
jQueryのclosest()便利！
でもできればjQueryは使いたくないので自前でそれっぽいのを用意。

```ruby:html
<div id="idiv">
  <div class="div">
  <ul class="ul" id="idul">
    <li class="li" id="idli"><span id="getParent">child</span></li>
  </ul>
  </div>
</div>
```

```ruby:closest的な
var closest = function(query,parent) {
  if (!parent) { #初めて探しに行ってるか
    var elm = event.target;
  } else {
    var elm = parent;
  }
  var gparent = elm.parentNode;
  var selector = query.substr(0,1); #'.'or'#'を取得
  var query_string = query.substr(1); #'.'or'#'を取り除く
  var is_class = (selector === '.'); #classなの?
  var is_id = (selector === '#'); #idなの?
  if (is_id) {
    var has_query = gparent.getAttribute('id') === query_string;
  } else if (is_class) {
    var has_query = gparent.classList.contains(query_string);
  }
  if (has_query){
    return gparent;
  } else {
    #マッチするまで繰り返し
    return closest(query,gparent);
  }
}
getNode.addEventListener('click',function(){
  var id = '#idiv';
  var node = closest(id);
  console.log(node) # #idvをゲット！
})
```

parentsとかparentsUntilとかfindとかはあまり使わなそうだけど、使いそうになったらそのときは。
会社に加湿空気清浄機を買ってもらうhack

# 背景
「加湿器欲しい！」ってお願いしたら「費用対効果を出して欲しい！」と言われたので、それっぽいドキュメントを書いた。
迷える子羊の一筋の光となればと思いキーボードでしたためた次第。

# テンプレ
https://docs.google.com/spreadsheets/d/1zpHtyo1F2Gjn0bKYiqKyT0sd7UxiK0HySO3AHhVPh6Q/edit?usp=sharing

# FAQ
- 依頼しても買ってもらえなかったです:cry:
    - そんな会社辞めましょう
Angular2で`<foo checked>`を使う



htmlの `<input type="checkbox" checked>`のような書き方ができます。
これは、「属性値の最小化(attribute minimization)」と呼ばれます。[^1]

この記法は、XHTML(念のためにいうと、古い規格です)では使えず、`<input checked="checked">`と書く必要がありました。



### やりたいこと


さて、Angular2でこのような独自属性を作りたいです。

```html
<myComponent fixed> <!-- 空文字列''が来る -->
<myComponent fixed="true"> <!-- 文字列'true'が来る -->
<myComponent fixed="1"> <!-- 文字列'1'が来る -->
```

文字列がきちゃうんですよね。
TypeScript上では `(this.isFiexed === true)`  とbooleanになってほしいです。



また、次のようなときにはfalseになって欲しいですよね。

```html
<myComponent> <!-- 省略時はfalse -->
<myComponent fixed="false">
<myComponent fixed="-1">```
```

そんなboolean型な属性を書く方法です。

# 解決方法


## 方法1
`@Input`を使いません。

```typescript
import { Component, Attribute } from '@angular/core';


@Component({
  selector: 'myComponent',
  template: `
  	<div> フィックス状態は {{isFixed}} です </div>
  `})
export class MyComponent { 

  isFixed;
  
  constructor(@Attribute("fixed") fixed) {
    this.isFixed = fixed !== 'false' && fixed !== '-1' && fixed !== undefined;
  }
}
```

比較的シンプルに書けますが、DIコードが沢山になりがちなconstructorが汚れること、値のバインディングができない点が欠点です。


## 方法2
`@Input` と setterのあわせ技です。

```typescript:typescript
isFixed: boolean;

@Input("fixed") 
private set fixed(v: string){
   this.isFixed v !== 'false' && v !== '-1' && v !== undefined;
}
```





### 悪い方法

getterを定義してそれをバインドすると、数msごとにgetterが実行されちゃうので注意してください。

```typescript:typescript
get isFixed(): boolean{
  console.log(' 何度も呼ばれるぞー ');
  return true;
}
```

```html
<div *ngIf="isFixed">
  なんどもconsole.logからログが出てしまう
</div>
```



## 総評

そもそも、文字列でしかない属性値を無理にパースする処理なので、割り切って文字列として処理する、方法3のやり方が正しいのだと思います。






[^1]: <small>調べて初めて"attribute minimization"の呼び方を知ったけど、たぶん [W3C-xhtml](https://www.w3.org/TR/xhtml1/#h-4.5) にもそう書いてあるから・・・あってるはず・・・。</small>
node-soapで"Unexpected wrapper element xxx found"と出たときの対処

## 問題

[node-soap](https://github.com/vpulim/node-soap)を使ってSOAPリクエストを投げると"Unexpected wrapper element xxx found"が発生してリクエストに失敗する。

## 解決策

デフォルトの無視するnamespaceをオーバーライドすると解決するかも。

```js
var soap = require('soap');
var wsdl = 'http://example.com/?wsdl'

// オーバライド
var options = {
  ignoredNamespaces: {
    namespaces: [],
    override: true
  }
}

// optionsを引数に指定
soap.createClient(wsdl, options, function(err, client) {
  // ...
});
```

## 参考

* [Unexpected wrapper element SOAP wdsl error](http://stackoverflow.com/questions/35500631/unexpected-wrapper-element-soap-wdsl-error)
MOONBLOCK

moon blockおもろ！！
1.http://moonblock.jp/#s/5889a8ad657e71485416621
2.http://moonblock.jp/#s/5892e893b35fe1486022803
3.http://moonblock.jp/#s/5892f3912c9c91486025617
4.http://moonblock.jp/#s/589837e9e627f1486370793
3を更新
3.(更新版)http://moonblock.jp/#s/58a55d66352611487232358
5.http://moonblock.jp/#s/58a5607a6c1481487233146
(よかったら遊んでください。)
https://scratch.mit.edu/projects/140748577/
４を更新　http://moonblock.jp/#s/58f5caf954a451492503289
Ubuntu 18.04 LTS上のIntelliJ IDEAにDocker integrationプラグインを導入する方法

Ubuntu 16.04 LTS上のIntelliJ IDEAにDocker integrationプラグインを導入する方法についてまとめます。

#Docker Remote API有効化
```bash
$ sudo sed -i -e "s/#ExecStart=\/usr\/bin\/dockerd -H fd:\/\//ExecStart=\/usr\/bin\/dockerd -H fd:\/\/ -H tcp:\/\/0.0.0.0:2376/g" /lib/systemd/system/docker.service
$ sudo systemctl daemon-reload
$ sudo systemctl restart docker
```

#Docker integrationプラグインインストール
1. IntelliJ IDEAの`Settings`-`Plugins`を開き、`Install JetBrains plugin...`を句クリックします。<br>![Settings_013.png](https://qiita-image-store.s3.amazonaws.com/0/52291/665d363a-6589-0e4f-42a4-adf1ab552cb4.png)
2. 検索窓に`docker`と入力し、`Docker integration`を選択し、Installボタンをクリックします。<br>![Browse JetBrains Plugins _014.png](https://qiita-image-store.s3.amazonaws.com/0/52291/2b1c3840-8e18-50d7-da6f-92955e3ae2bb.png)
3. プラグインのインストールが完了したら、Restart IntelliJ IDEAボタンをクリックし、IntelliJ IDEAを再起動します。<br>![Browse JetBrains Plugins _015.png](https://qiita-image-store.s3.amazonaws.com/0/52291/56cf5883-295f-b0c0-7dbf-67fe60fd3ff6.png)

#Docker integrationプラグイン設定
1. IntelliJ IDEAの`Settings`-`Build, Excution, Deployment`-`Docker`を開き、![Settings_016_.png](https://qiita-image-store.s3.amazonaws.com/0/52291/235dc50d-e403-29e8-f854-93fd96f315e9.png)
ボタンをクリックし、OKボタンをクリックします。 
![Default Settings (suzuki-Fractica-SE)_063.png](https://qiita-image-store.s3.amazonaws.com/0/52291/f1d1f01d-2bda-10d2-f454-2b6f2cca9df5.png)

# 関連記事
* [UbuntuでChainer用のGPU環境を分ける方法 - Qiita](https://qiita.com/SUZUKI_Masaya/items/7511365fecfe24c94d65)

#参考文献
* [IntelliJのDockerインテグレーションを使う - Qiita](http://qiita.com/imaifactory/items/feca75fa158d10391bf3)
* [docker remote api を有効にするときにちょっとハマったこと - moremagicの日記](http://d.hatena.ne.jp/moremagic/20161206/1481000014)
* [sedコマンドでファイルを上書き編集 | OpenGroove](https://open-groove.net/linux-command/sed-edit-files/)
MySQL Mac DEFAULT CURRENT_TIMESTAMPなのにcannot be null



環境:Mac
MySQL:5.6.25

MacでDB（MySQL）を構築。
`DEFAULT CURRENT_TIMESTAMP`で定義した`timestamp`に`NULL`をINSERTしようとしたらエラー。

```
Column 'updated_at' cannot be null.
```

カラム定義

```
`updated_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
```

おかしい。`NULL`の場合は現在時刻が登録されるはずなのに。
ググってみると`explicit_defaults_for_timestamp `の設定が原因とのこと。これが有効になっていると、エラーになるみたい。

ローカル開発環境なので`my.cnf`を直接編集する。

```
% sudo vi /usr/local/etc/my.cnf
explicit_defaults_for_timestamp = 0 // 編集 1 -> 0
```

MySQL再起動

```
% sudo mysql.server restart
```


確認

```sql
mysql> show global variables like 'explicit_defaults_for_timestamp';
+---------------------------------+-------+
| Variable_name                   | Value |
+---------------------------------+-------+
| explicit_defaults_for_timestamp | OFF   |
+---------------------------------+-------+
```
## 参考
[timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP can be null on one machine but not another?](http://stackoverflow.com/questions/24214250/timestamp-not-null-default-current-timestamp-can-be-null-on-one-machine-but-not)
[MySQL5.6で増えたexplicit_defaults_for_timestamp](http://d.hatena.ne.jp/hiroi10/20121104/1352037845)
Objective-Cでenumに対応した文字列を定義し、キャストする

enumと文字列を、enum -> NSString、 NSString -> enumと相互にキャストする汎用な方法を調べたときのメモです。

### 1. NSArrayのExtensionとしてキャストするメソッドを用意します。



```objc:NSArray+EnumExtensions.h
//
//  NSArray+EnumExtensions.h
//

#import <Foundation/Foundation.h>

@interface NSArray (EnumExtensions)

/**
 * enum to string
 * @param value enum value
 * @return NSString string value
 */
- (NSString *)stringFromEnum:(NSInteger)value;

/**
 * string to enum
 * @param value string value
 * @return NSInteger enum value
 */
- (NSInteger)enumFromString:(NSString *)value;

/**
 * string to enum
 * @param value string value
 * @param def default enum value
 * @return NSInteger enum value
 */
- (NSInteger)enumFromString:(NSString *)value def:(NSInteger)def;


@end

```

```objc:NSArray+EnumExtensions.m
//
//  NSArray+EnumExtensions.m
//

#import "NSArray+EnumExtensions.h"
#import <Foundation/Foundation.h>

@implementation NSArray (EnumExtensions)

- (NSString *)stringFromEnum:(NSInteger)value {
    return [self objectAtIndex:value];
}

- (NSInteger)enumFromString:(NSString *)value {
    return [self enumFromString:value def:0];
}

- (NSInteger)enumFromString:(NSString *)value def:(NSInteger)def {
    NSInteger n = [self indexOfObject:value];
    if(n == NSNotFound) n = def;
    return n;
}

@end

```

### 2. enumと定義と一緒に文字列の定義をマクロで記述します

```objc
typedef NS_ENUM(NSInteger, MyType) {
    kMyTypeFoo,
    kMyTypeBar,
    kMyTypeBaz
};

// enumと定義と一緒に文字列定義をマクロで記述
#define MyTypeStrings @[@"Foo", @"Bar", @"Baz"]
```

### 使い方

```objc
// enum -> NSString
NSString *stringValue = [MyTypeStrings stringFromEnum:kMyTypeBar];
NSLog(@"%@", stringValue);
// -> Bar
    
// NSString -> enum
MyType enumValue = [MyTypeStrings enumFromString:stringValue];
NSLog(@"%d", (int)enumValue);
// -> 1
    
// NSString(with default) -> enum
MyType enumValue2 = [MyTypeStrings enumFromString:@"undefined" def:kMyTypeFoo];
NSLog(@"%d", (int)enumValue2);
// -> 0

```
JavaScript で UUID (Ver4)

## なるべく衝突しないIDを用意したい
時刻やMACアドレスなどの固有の値を使わず、なるべく衝突しない一意のIDを生成したい。それでは、UUIDを作りましょう。

>### バージョン4
>乱数によるUUID。16進表記ではRRRRRRRR-RRRR-4RRR-rRRR-RRRRRRRRRRRRとなり、バリアント(10)とバージョン(0100)を除くすべてのビットを乱数（R:122ビット）で生成する。
[UUID - Wikipedia](https://ja.wikipedia.org/wiki/UUID#.E3.83.90.E3.83.BC.E3.82.B8.E3.83.A7.E3.83.B34)

[RFC4122](http://www.ietf.org/rfc/rfc4122.txt) でも確認できます。


## 他ライブラリではどのように生成しているのか
[Chrome Platform Analytics](https://github.com/GoogleChrome/chrome-platform-analytics/blob/master/src/internal/identifier.js) の実装 (Apache License v2.0)


```js:identifier.js
/** @private {string} */
analytics.internal.Identifier.UUID_FMT_ =
    'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx';


/** @private {RegExp} */
analytics.internal.Identifier.UUID_MATCHER_ =
    /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/;


/**
 * @return {string} A randomly generated UUID V4.
 */
analytics.internal.Identifier.generateUuid = function() {
  var chars = analytics.internal.Identifier.UUID_FMT_.split('');
  for (var i = 0, len = chars.length; i < len; i++) {
    switch (chars[i]) {
      case 'x':
        chars[i] = goog.math.randomInt(16).toString(16);
        break;
      case 'y':
        chars[i] = (goog.math.randomInt(4) + 8).toString(16);
        break;
    }
  }

  return chars.join('');
};
```
1. `analytics.internal.Identifier.UUID_FMT_` を分解
2. 分解した文字列(`chars`)を1文字ずつ取得して
3. パターンに合う文字を生成・書き換え
4. 結合します

+ パターンに合わない文字(`-`と`4`)はそのまま出力されます。
+ パターン「x」の場合は`0～9`または`a～f`のいずれか1文字が選択されます。
+ パターン「y」の場合は`8`、`9`、`a`または`b`のいずれか1文字が選択されます。

なお、`.UUID_MATCHER_` は、生成済みのUUIDがパターンと合致するかテストするための正規表現となります。
 
上記の実装では Google Closure Library が使われています。`goog.math.randomInt(number)`を`Math.floor(Math.random() * number)`に置き換える事ができます。

```js:uuid-v4-switch.js
switch (chars[i]) {
  case "x":
    chars[i] = Math.floor(Math.random() * 16).toString(16);
    break;
  case "y":
    chars[i] = (Math.floor(Math.random() * 4) + 8).toString(16);
    break;
}
```
[google/closure-library math.js](https://github.com/google/closure-library/blob/master/closure/goog/math/math.js)


## コードを書く
単体で生成できるようにしてみましょう。

```js:uuid-v4.js
function generateUuid() {
    // https://github.com/GoogleChrome/chrome-platform-analytics/blob/master/src/internal/identifier.js
    // const FORMAT: string = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx";
    let chars = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".split("");
    for (let i = 0, len = chars.length; i < len; i++) {
        switch (chars[i]) {
            case "x":
                chars[i] = Math.floor(Math.random() * 16).toString(16);
                break;
            case "y":
                chars[i] = (Math.floor(Math.random() * 4) + 8).toString(16);
                break;
        }
    }
    return chars.join("");
}
```


## 確認する
ブラウザにて確認してみましょう。
![test.png](https://qiita-image-store.s3.amazonaws.com/0/104126/ac64a4e1-8f90-56dd-3f1d-92108c38d563.png)

JavaScript で UUID (Ver4) を作ることができました。
Movable Type の Data API から取得したJSONデータを Vue.js で 表示する

最近何かと話題の [Vue.js](https://jp.vuejs.org/)。Movable Type と組み合わせて、ちょっと触ってみました。

## やること
Movable Type の Data API から、記事データを取得する。
Vue.js を使って、記事のタイトルデータをループ処理して表示する

## 流れ
1. XMLHttpRequestで Movable Type のData API から記事データをJSONで取得する
2. Vue.jsでJSONデータを読み込み、タイトルだけを&lt;ul&gt;でループ表示する


## コード

下記のコードで、記事のタイトルをループ表示できました。

```
<!DOCTYPE html>
<html lang="ja">
<head>
  <title>Vue.js でMovable Type から記事タイトルを表示するサンプルコード</title>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
  
  <script>

// XMLHttpRequest 用の変数を定義する

    let xhr = new XMLHttpRequest();

// html読み込み時に Movable Type の Data APIへアクセスし、JSONデータを取得

    xhr.onreadystatechange = function() {
      if (this.readyState === 4 && this.status == 200) {

// 取得したJSONデータを、変数 entries へ格納
        const entries = this.response;

// 変数 entries を利用して、Vue.js のインスタンスを生成

        const example1 = new Vue({
          el: '#example-1',
          data: entries
        })
      }
    }

// Movable Type のData APIから取得するデータを定義。今回は記事データを取得。

    xhr.open('GET', 'http://MTのDataAPIのurl/v3/sites/ブログID/entries', true);
    xhr.responseType = 'json';
    xhr.send(null);
  </script>

</head>

<body>

  <ul id="example-1">
    <li v-for="item in items">
      {{ item.title }}
    </li>
  </ul>

</body>
</html>
```


## 参考URL
https://jp.vuejs.org/v2/guide/list.html
https://www.movabletype.jp/developers/data-api/
https://www.movabletype.jp/developers/data-api/v3-reference.html


## 備考
Vue.js で REST API から何かデータを取得する場合、別ライブラリの[vue-resource]というライブラリを使っていたようですが、現在は推奨から外れているとのこと。

https://jp.vuejs.org/2016/11/03/retiring-vue-resource/

Vue.js を使ってAjax 通信を行うには、XMLHttpRequestやjQueryなどの、別ライブラリで行う必要があるようです。

(そのうちVue.jsにAjax通信用のライブラリか何かが実装されるのかもしれないけど)
atom-beautifyのSQL整形でエラー


環境:Mac


atom-beautifyのSQL整形しようとしたら、`sqlformat`がないとエラーが出た。

https://atom.io/packages/atom-beautify
`atom-beautify`パッケージページの`SQL`の行の`sqlformat`を選択

https://github.com/andialbrecht/sqlparse
説明の通りに`sqlparse`をインストール

```bash
$ pip install --upgrade sqlparse
```
Wordpress4.7の脆弱性の小話

ここ最近巷を賑わせているWordPress4.7で投稿を書き換えられる脆弱性。
そういえばWordPres4.6系+WP REST apiの段階では話題にならなかったなぁと思ってソースを掘ってみた。

## そもそもどんな脆弱性？
ニュースをにぎわせてるので小話にたどり着く方はだいたいご存知かとは思いますので詳しくは省略しますが、認証ロジックに不備があり、認証を回避して記事を更新できてしまう脆弱性です。

詳しく知りたい方は徳丸先生の記事をどうぞ。
[WordPress 4.7.1 の権限昇格脆弱性について検証した](http://blog.tokumaru.org/2017/02/wordpress-4.7.1-Privilege-Escalation.html)

## Pluginの実装を追う
今回Coreに取り込まれたWP REST APIはGitHubでソースが公開されているため、tagを順番に追ってみると、2.0-bate13の時点ではまだwp coreのget_postをコールしていることが分かります。
[【GitHub】WP REST API](https://github.com/WP-API/WP-API/)

以下抜粋

```/2.0-beta13/lib/endpoints/class-wp-rest-posts-controller.php
	public function update_item_permissions_check( $request ) {
		$post = get_post( $request['id'] );
		$post_type = get_post_type_object( $this->post_type );
```

## 環境作ってみた
手元の環境にWordPress4.6＋WP REST API（2.0-bate13）の環境を作成し実行してみると・・・

``` request.json
{"id":"1b","title":"change title","content":"hogehoge"}
```

``` responce.json
{
  "code": "rest_cannot_edit",
  "message": "Sorry, you are not allowed to update this post.",
  "data": {
    "status": 401
  }
}
```

実はこの段階では脆弱性はなかった事が分かった。
挙動を確認すると、IDに文字列を付与していても、記事を取得できている。

## ソースを追う
次に、WordPress本体のソースを追ってみる。
[【GitHub】WordPress](https://github.com/WordPress/WordPress/)

WP4.6とWP4.7を比較すると、原因が分かった。

```https://github.com/WordPress/WordPress/blob/4.6.3/wp-includes/class-wp-post.php
	public static function get_instance( $post_id ) {
		global $wpdb;
		$post_id = (int) $post_id;
		if ( ! $post_id )
			return false;
		$_post = wp_cache_get( $post_id, 'posts' );
```

```https://github.com/WordPress/WordPress/blob/4.7/wp-includes/class-wp-post.php
	public static function get_instance( $post_id ) {
		global $wpdb;
		if ( ! is_numeric( $post_id ) || $post_id != floor( $post_id ) || ! $post_id ) {
			return false;
		}
		$post_id = (int) $post_id;
		$_post = wp_cache_get( $post_id, 'posts' );
```

ソースを見てわかる通り、4.6系まではCore側で記事を取得する際にpost_idの方チェックが無かった。
そのため、仮に文字列付きのIDが送られてきていても、intにキャストした際に落ちていたので、記事が取得できていた模様。

## 終わりに
プラグインはそのまま持ってきたけど、Coreの仕様が変わっていたためイレギュラーケースに対応しきれませんでした。という状況でしょうか。
自分が担当であっても見落としてしまいそうなレベルですね。

何となく事情を察しないわけでもないのであれですが、影響範囲がこうなるともう乾いた笑いしか出てきません。
[WordPressサイトの改ざん被害は150万件超に　「最悪級の脆弱性」](http://www.itmedia.co.jp/enterprise/articles/1702/13/news045.html)

セキュリティ担当としてはこういった事象は経験として学ばせていただくとともに、社内のセキュリティ投資の為の説得材料として積極的に利用させていただきたいと思います。
"配列のHash"を"Hashの配列"に変換する

# やりたいこと

    { A: [1, 2, 3], B: ['a', 'b', 'c'] }

を

    [{A: 1, B: 'a'}, {A: 2, B: 'b'}, {A: 3, B: 'c'}]

の形に変換したい

# やり方

``` ruby
    old_hash = { A: [1, 2, 3], B: ['a', 'b', 'c'] }

    new_hash = old_hash.map do |key, value|
      [[key] * value.length, value].transpose
    end.transpose.map(&:to_h)

    p new_hash # => [{:A=>1, :B=>"a"}, {:A=>2, :B=>"b"}, {:A=>3, :B=>"c"}]
```

もっと良い方法がありそう
Dockerしかない環境でgo install を行う

自分用メモ

```bash
docker run --rm -v `pwd`:/go golang bash -c "GOPATH=/go GOBIN=/go/bin go install <ビルドしたいファイル名>"
```
単純にworking directryにソースをマウントし、GOPATH, GOBINを環境変数として割り当ててgo installしてるだけ。
生成されたファイルは `pwd`/binに格納されている。
BigQuery でデータ追加が意外と難しかったのでメモ

## 結論
× オペレーションが難しい
⚪︎ ドキュメントが難しい

## きっかけ
それまでログに対して SELECT による集計等はやっていましたが, 直接 BigQuery のコマンドを使用してのデータ追加はやったことがありませんでした.
今回追加作業をするにあたって 「MySQL とかみたいに INSERT バッチとかですぐ終わるでしょ」と高を括っていました.

## Google Cloud SDK インストール
SDK をインストールすることによりコマンドライン上から BigQuery コマンドを実行できます. 
https://cloud.google.com/sdk/
これは普通にダウンロード & インストールなので大丈夫.

## bq コマンドのドキュメントを読む
https://cloud.google.com/bigquery/bq-command-line-tool?hl=ja
SDK インストールにより使用可能となった bq コマンドを使ってデータ追加すべくドキュメントを読みます.
プロジェクトの指定, データセット作成..., 等々読み進めて, テーブルの作成項目を見つけて次くらいかな? と思ったら, 
**「クエリの実行」**
ああそうだよね. テーブル作ったら中身の確認をしないとね. じゃあ次だろう...
**「このページは役立ちましたか？評価をお願いいたします。」**
あれれ〜おかしいぞ〜

## データ追加方法
こいつはアホじゃないかと思われた諸氏もいるかと思います,実際ググってみると、本当にやり方がわからない！のでやってみるといいと思います. 
(BigQuery知識0の方に限る)

実は ```bq help``` で見れるコマンド一覧で大体わかるのですが, データ追加には

- insert
- load

の2つの方法があります. insert は少量のデータを行単位で追加, load はデータファイルを使用して大量のファイルを追加, ということができます.
ちなみに load は前項目ドキュメントにおいて, 「データからテーブル作成」の中で使用されているのでデータインポートっぽく見えて普通に追加に使えることがわかりづらいです.

### insert を使う場合
dataset.table があるとして
``` echo '{"a":1, "b":2}' | bq insert dataset.table```
または
``` bq insert dataset.table /tmp/mydata.json ```
このとき /tmp/mydata.json は "newline delimited JSON" つまり行区切りJSONです.
行単位で完結している JSON ファイルです.
例:

```
{"a":1, "b":2}
{"c":3, "d":4}
{"e":5, "f":6}
```
拡張子JSONですが行単位でしかJSONとして成立していない特別なデータ形式です.

### load を使う場合
データファイルとして使えるのは先ほどの "newline delimited JSON", csv, avro になります.さらにデータスキーマの JSON も必要になります.

``` example_schema.json
[
  {
    "name": "dataA",
    "type": "STRING"
  },
  {
    "name": "dataB",
    "type": "INTEGER"
  }
]
``` 

load のデータファイルはデフォルトでは csv を使うようになっているので他形式を使う場合はオプションで指定する必要があります.

```
bq load --source_format=NEWLINE_DELIMITED_JSON dataset.table /tmp/mydata.json /tmp/example_schema.json
```

オプション, データファイル, スキーマ の順で指定します.
ちなみにデータファイルはローカルより Google cloud storage からの方が速いです.
またテーブルは, あれば追記なければ作成, となります.
(あっても上書き新規作成オプションもあるという噂を聞きましたが調べた限り見つかりませんでした.ブラウザ上での操作ならできましたが)

BigQuery のデータ追加説明は以上になります.

## おまけ
BigQuery は1カラム内に JSON形式 で格納されている場合, JSON_EXTRACT 関数で取り出せるため STRING 型カラムに JSON を押し込むことがあります.
ただしこの形式のデータをデータファイルとして作成する場合一手間必要です.

例:

```
{"created": "201701010000", "log": "{"action": "post", "title": "Happy New Year!"}"}
```
みたいなデータをそのまま load しようとすると, スキーマに対して行多すぎエラー になります. なのでダブルクォーテーションをエスケープして


```
{"created": "201701010000", "log": "{\"action\": \"post\", \"title\": \"Happy New Year!\"}"}
```
とする必要があります. (カンマはエスケープ不要)
Developers Summit 2017 の参加証を印刷すると途中で切れるんですけど!

## もうすぐ[デブサミ](http://event.shoeisha.jp/devsumi/20170216)ですね

先日、参加証DLのお知らせが届きまして、意気揚々と印刷したところ参加証が途中で切れる事態が発生!

![2.png](https://qiita-image-store.s3.amazonaws.com/0/111100/fcad3efb-4f7a-ae11-a916-695cf1b88e4b.png)

FireFoxのせいかと思いきや、Chromeでもだめ(たぶんIEも)。
周りの方々の意見を参考にしてみると、どうやら申し込みセッションが多いと、タイムテーブルのエリア(右上)が下に伸びてしまい、印刷範囲に入りきらないようでした。
(僕は一応すべての時間帯のセッションを予約していました)

問題はないといえばないのですが、中心から点線がずれてしまうので、4つ折りにしたときなんかに少し気になります。

まぁデベロッパーの祭典とのことなので、参加前からすでにデベロッパー度を試されているのかも知れません。
ということで何とかしましょう。

## FireFox でなんとかする
<kbd>F12</kbd> で開発ツールを開いたら、スタイルエディタタブを選択します。
![1.png](https://qiita-image-store.s3.amazonaws.com/0/111100/99558a6c-dd04-77f0-fdc1-2172b0b8f0c7.png)
左上にある `+` をクリックして、新規にスタイルシートを作成したら、↓のコードを書いてください。
(直接 `<インラインスタイルシート#1>` ってやつを編集しても問題ないと思います)

```css:print.css
@media print {
  ul.menu li {
    font-size: 10px;
    margin-bottom: 6px;
  }
  ul.menu li br {
    display: none;
  }
}
```

あとはプリントするだけです。
印刷プレビューが見たい方は、`ファイル` > `印刷プレビュー` からどうぞ。
セッションの内容によっては、これではきれいに表示されないケースもあるようです。
あとの微調整は皆さんのデベロッパー力でなんとか。

## ほかのブラウザでも

同じようにしたらできるのではないでしょうか。(たぶん)
インターネットにつないでないwebサーバにはiPhoneでアクセスできない？

#説明が難しいんだけど
完全スタンドアロンのノートPCにpython使ったwebサーバいれて
iPhoneとアドホックで接続してからwebサーバ見れたらいいなとおもった。

#問題
アドホックで接続できたはいいけど、iPhone側で「インターネット未接続」とでてくる。
###それもそうか
PCはオフラインなんだし仕方ない？のか？
でもこの状態でwebブラウザでアクセスしたときにwifiアクセスしてないっぽい
``` http://192.168.1.1:8080 ```
こんな感じでアクセスしたんだけど

#転換
SoftAPってやつだったらうまくいくんじゃね？
###特に変わらず
地味にPCのIPアドレスわかんないからこまった。

#誰か助けて
どうにかならないかなぁ

#補
PCはwindows10、webサーバはPython+Flask
iPhoneは6s

#できたので追記
結局softAPでやってみた。

```
netsh wlan set hostednetwork mode=allow ssid=xxxxxxxx key=ooooooooo
netsh wlan start hostednetwork
```
ネットワーク接続に新しくワイヤレスネットワークができているので名前を確認。
ローカルエリアネットワークのプロパティを開いて
「共有」タブ→インターネットの共有～みたいなやつにチェックを入れる。
→さらに接続先？が選べるのでそこを↑で確認した名前のものを選ぶ。

IPアドレスが192.168.137.1固定になるっぽいので注意。

phythonのほうもコメントいただいた感じに修正して動作確認できた。
exprは計算コマンドじゃなかった


bash初見殺しシリーズ（勝手に命名）です。
exprは演算結果が0の時、リターンコードが1となります！？

```bash
$ num=`expr 3 -3`
$ echo $?
1
```

な、なぜ・・・？

どうやらexprコマンドは
式を計算するコマンドではなく、
**式を評価する**ためのコマンド、と言うのが正しいらしいです。

分かりやすい例つきの解説：
http://qiita.com/h141gm/items/0bc678b3e152ab8138e9


式の結果が0の場合は（false扱いになるのか）リターンコード$?が１、
式の結果が0以外の場合は（true扱いになるのか）リターンコード$?が０に。
演算エラー（例えば 3 / 0 とか）ならリターンコード$?が２になります。
何も知らないと余計なエラーハンドリングする可能性があるので注意。
ぼくの同僚がこれで３０分悩みました。


# 解決策→二重括弧

単に計算をしたいだけなら、bashなら、
**二重括弧$(( ))**するのが吉です。
これは単に「展開」するだけなので余計な式評価はしません。

```bash
outSum=$(( num1 + num2))
```

ちなみに、算術エラーの時はちゃんと拾ってくれます。

```bash
num=$(( 3 / 0 ))
```
とかやると、
エラー出力もでるし、リターンコード１が返ります。安心。


解説１：exprコマンドについて
http://itdoc.hitachi.co.jp/manuals/3020/30203S3530/JPAS0248.HTM
やはり「評価する」のが主役割のご様子。


解説２：シェルで変数のインクリメントに expr を使うと100倍遅い件
http://qiita.com/d_nishiyama85/items/a117d59a663cfcdea5e4
速度的にも二重括弧$(( ))がいいようです。


蛇足：
exprは
**expression**
の略らしいです。「式」って意味です。

やっぱり式を評価する、というのがメイン役割っぽいですね。
演算ならcalcとかになってそうですし。
チョコ貰った



```Fsharp:choco.fs
let give f x = f x

let me = printfn "%s"

let chocolate = "\n                                     XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\n    +---------+ +---------+ +--------X+                                    X\n    | +-----+ | | +-----+ | | +-----+X|                                    X\n    | |     | | | |     | | | |     |XX                                    X\n    | +-----+ | | +-----+ | | +-----+ X                                    X\n    +---------+ +---------+ +---------+XX                                  X\n    +---------+ +---------+ +---------+ X                                  X\n    | +-----+ | | +-----+ | | +-----+ XXX                                  X\n    | |     | | | |     | | | |     |XX                                    X\n    | +-----+ | | +-----+ | | +-----+X|                                    X\n    +---------+ +---------+ +-------|X+                                    X\n    +---------+ +---------+ +---------XX+                                  X\n    | +-----+ | | +-----+ | | +-----+ |XX                                  X\n    | |     | | | |     | | | |     | |XX                                  X\n    | +-----+ | | +-----+ | | +-----+ XX|                                  X\n    +---------+ +---------+ +-------XXX                                    X\n                                    X  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\n                                    XX\n    "

give me chocolate
```


![chocho.png](https://qiita-image-store.s3.amazonaws.com/0/72075/069a173e-5c66-5474-824b-33a4d8c3b331.png)

もらえた
Atomエディタのphp integratorが動かないときの対応メモ

ATOMエディタのphp-integratorが動かなくなってしまったときの対応メモです

# 症状
- 定義ジャンプやリンターなどphp-integrator系の各種パッケージが動かない
- Atomを再起動しても変わらず
- デベロッパツールを開いてみても特にエラーメッセージなし
- コマンドパレットから `PHP Integrator Base: (Force) Index Project`を実行しても反応なし
    - デベロッパツールにも何も出ない
- コマンドパレットから `PHP Integrator Base: Configuration`を実行すると成功メッセージ↓

> Success
> Your PHP integrator configuration is working correctly!

# 解決策

結論から言うとプロジェクトを開き直すと何故か直った。
つまり開いているプロジェクトを閉じてProject Managerから開き直すとphp-integratorのファイルインデックスが走って再び機能を使えるようになった（よかった）。

## 解決までにやったこと

またいつか別のエラーで悩んだときのために

- wikiを漁る
    - [Help!-It-Doesn't-Work!](https://github.com/php-integrator/atom-base/wiki/Help!-It-Doesn't-Work!)
        - PHP integratorのトラブルシュート的なwiki
    - [issue](https://github.com/php-integrator/atom-base/issues)
- デベロッパツールを開いて確認
    - それっぽいメッセージが出ていたら儲けもん
    - （「デベロッパツールを開いてみても特にエラーメッセージなし」と書いたけど本当はPHPサーバが動いてない的なエラーが出ていた。結局PCを再起動したら直った。本題の件は直らなかった）
- php-integrator-baseパッケージのdisable -> enableを切り替える
- php-integrator-baseパッケージのuninstall -> install
- PCを再起動する
Apex(クラス定義)

####クラスの属性定義
`public String xxxx {set; get;}`
`public String xxxx {get{ return xxxx;}}`

```Java 
public List<String> xxxx {private set; get{
    if (xxxx==null){
         xxxx = new List<String>();
    }
    return xxxx;
};}
```
####インターフェースの例
インターフェースにはプロパティは定義できない

```java
public interface ResponseData {
    //メソッドにpublicは付けない
    Map<String, Object> getResultMap();
}
```

####継承元クラス
```java
//インスタンス化しないクラスでは abstractキーワードを付ける
public abstract class XXX_XXXXBase {
    .... 
    //private/protected/publicの考え方はjavaと同じ
    private    xxxx {set; get;}
    protected  XXXX {get{
         return xxxx;
    }}
    public xxxx {protected set; get;}
}
//インスタンス化するクラスの場合はvirtualキーワードを付ける
public virtual class XXX_XXXXCtrl {
    ....
}

```

####継承先のクラス
```java
//javaと同じ extneds
public with sharing class XXXX extends XXX_XXXXBase{
    .....
    //継承先のクラスではプロパティはthisで参照
    this.xxxx = xxxx;

    //サブクラス側でメソッドをオーバーライドしたい場合は overrideキーワードを付ける
    public override string getXXX() {
        //親メソッドを呼ぶには super();
        super();
        .....
    }
    
}
```

####Iteratorクラスの実装
```java 
public with sharing class CsvIterator implements Iterator<List<String>>, Iterable<List<String>> {
    private List<List<String>> data;  //table data for csv
    private Integer curpos = 0;

    /*
     * constructor
     */
    public CsvIterator(List<List<String>> data){
        this.data = data;
    }

    public Boolean hasNext() {
        return this.curpos < data.size() ? true : false;
    }

    public List<String> next() {
        return data[curpos++];
    }

    public Iterator<List<String>> Iterator(){
        return this;
    }
}
```
Kibanaの導入方法

# Kibanaの導入方法

## 実行環境
* OS：Ubuntu 16.04 LTS

## 事前準備
* Elasticsearchが構築済みであること

# 手順
1. Kibanaのダウンロード
2. Kibanaのインストール
3. 設定ファイルの準備
4. Kibanaの起動
5. Kibanaの利用
6. Kibanaの停止

### 1. kibanaのダウンロード

下記のサイトよりkibanaをダウンロードします

ダウンロードサイト：https://www.elastic.co/jp/downloads/kibana

本手順ではcURLを使ってダウンロードを行っています

ダウンロードコマンド例：`curl -k -L -O "https://artifacts.elastic.co/downloads/kibana/kibana-5.1.1-amd64.deb"`

### 2. kibanaのインストール

ダウンロードしたKibanaをインストールします

インストールコマンド例：`sudo dpkg -i kibana-5.1.1-amd64.deb`

### 3. 設定ファイルの準備

インストールしたKibanaを起動する際のIPアドレスやポート番号の指定などを行います
設定ファイルの形式は`yaml`形式で「kibana.yml」というファイルを作成しそれを展開されたKibanaのディレクトリのトップに配置します

本環境では下記のように設定ファイルを配置することになります

設定ファイル：`/etc/kibana/kibana.yml`

今回はKibanaを起動するIPアドレスとポート番号の設定を行います

Kibana.yml

```yaml:kibana.yml

server.port: 5601    # Default: 5601
server.host: "192.168.1.1" # Default: "localhost"

```

※ その他の設定については[公式ドキュメント](https://www.elastic.co/guide/en/kibana/current/settings.html)を参照ください

### 4. Kibanaの起動
設定ファイルの準備が終わったら、Kibanaを下記コマンドより実行します

起動コマンド：`sudo service kibana start`

また、Kibanaが起動しているかどうかは下記のコマンドで確認できます

確認コマンド：`sudo service kibana status`

正常に起動している場合、「active」や「running」といった応答が返ります

### 5. Kibanaの利用
起動が確認できたら実際にWebブラウザ等でKibanaを利用することができます

本環境の設定ではWebブラウザにて`192.168.1.1:5601`でKibanaを利用することができます

### 6. Kibanaの停止
下記コマンドでKibanaの停止を行います

停止コマンド：`sudo service kibana stop`
Logstashの導入方法

# Logstashの導入方法

## 実行環境
* OS：Ubuntu 16.04 LTS
* JDK：Open JDK 8

## 事前準備
* Elasticsearchが構築済みであること
* JDKがインストール済みであること

## 手順
1. Logstashのダウンロード
2. Logstashのインストール
3. 設定ファイルの準備
4. Logstashの起動
5. Logstashの停止

### 1. Logstashのダウンロード
下記のサイトよりLogstashのダウンロードを行います

ダウンロードサイト：https://www.elastic.co/jp/downloads/logstash

本手順ではcURLを使ってダウンロードを行っています

ダウンロードコマンド例：```curl -k -L -O "https://artifacts.elastic.co/downloads/logstash/logstash-5.1.1.deb"```

### 2. Logstashのインストール
ダウンロードしたLogstashをインストールします

インストールコマンド例：```sudo dpkg -i logstash-5.1.1.deb```

### 3. 設定ファイルの準備

#### 3-1. 設定ファイルの形式と配置場所
Logstashの受け口の指定や送られてくるデータ整形の形式などを定義します
ファイル形式は下記のように`.conf`形式で作成します

Logstashファイル例：`logstash.conf`

設定ファイルの記載が終わったら`~/logstash/conf.d`以下に作成した設定ファイルを配置します

本環境においては下記の場所に配置を行いました

設定ファイル配置場所：`/etc/logstash/conf.d/`

#### 3-2. 設定ファイルの記載内容
設定ファイルには3つのプラグインに関する記載を行っていきます

| プラグイン名 | 説明 |
|:-----------:|:-----------------------------------------------:|
| input {}    | Logstashへの入力に関するプラグインの記載を行います  |
| filter {}   | Logstashに入ってきたデータのフィルタリングに関するプラグインの記載を行います  |
| output {}   | Logstashから外部への出力に関するプラグインの記載を行います  |

今回はFileBeatからデータの受け取りを行い、その受け取ったデータを整形しElasticsearchへデータを出力することを想定し、下記のような設定ファイルを作成しました

logstash.conf

```:logstash.conf
input {
  # inputのプラグインに存在する「beats」を用いて、受け口のIPアドレスとポートを指定します
  beats {
    host => "192.168.1.1"
    port => 5044
  }
}

filter {
  # filterのプラグインに存在する「grok」を用いて、送られてきたデータのパースを行っています
  # 今回送られてくるデータの想定例：{"id":"123ID","order_number":1}
  grok { 
    match => { "message" => "\{\"id\":\"%{WORD:ID}\",\"order_number\":%{NUMBER:order}\}" }
  }
  # filterのプラグインに存在する「date」を用いて、日付の形式をパースを行っています
  date {
    match => [ "timestamp", "dd/MMM/YYYY:HH:mm:ss Z" ]
  }
}
output {
  # outputのプラグインに存在する「elasticsearch」を用いて、出力先のelasticsearchの指定とindexの指定を行っています
  elasticsearch {
    hosts => [ "localhost:9200" ]
    index => "Test-%{+YYYYMMdd}"
  }
}
```
※ 各プラグインの種類や属性などの詳しい情報は[公式ドキュメント](https://www.elastic.co/guide/en/logstash/current/index.html)をご参照ください

### 4. Logstashの起動
設定ファイルの配置までが完了したら、下記コマンドでLogstashを起動します

本環境おいてはあらかじめElasticsearchの起動を行っておく必要があります

起動コマンド：`sudo service logstash start`

また、logstashが起動しているかどうかは下記コマンドにて確認することができます

確認コマンド：`sudo service logstash status`

正常に起動している場合、「active」や「running」といった応答が返ります

### 5. Logstashの停止
下記コマンドでLogstashの停止を行うことができます

停止コマンド：`sudo service logstash stop`
オフラインのPCにPythonとFlaskをインストールするまでの道のり

#条件
##インストールするもの
・Python2.7.13
・環境にあったflaskと関連するパッケージ

##インストール対象
・完全オフラインPC(Windows10/管理者権限あり)

##使えるもの
・オンラインのPC(Windows7/管理者権限なし)
・USBメモリ

#手順
###1.Pythonのインストーラを公式からダウンロードしてくる。
https://www.python.org/
今回は2.7系を使いました。

###2.ダウンロードしてきたmsiをUSBメモリにコピーしてオフラインPCへ
もうめんどくさくなってきた

###3.オフラインPCにPythonをインストールする。
http://qiita.com/maisuto/items/404e5803372a44419d60
これ見た。

###4.展開されたデータとDLLをUSBメモリにコピーする
普通にインストールするとC:\Python27にはいってます。
DLLはC:\Windows\System32にあるpython27.dllね

###5.4のデータをオンラインPCにコピーする
別にコピーしなくてUSBメモリ上で処理してもよいよ

###6.get-pip.pyのダウンロードとか
https://bootstrap.pypa.io/get-pip.py
これをそのままダウンロードして、5のPython27直下に置く。
同じ場所にpython27.dllも置く。
↑こうしておくとpython.exeと同じ場所なのでパス通さなくても動く。
↑インストールしなくてもよいし、管理者権限なしでも動く。

###7.ダウンロード先のフォルダを作る
どこでもよい(と思う)今回はF:\Python27\tmpにつくった

###8.ダウンロード
```
cd /D F:/Python27
python.exe get-pip.py --download .tmp --no-binary :all: flask
```
ダウンロードできると作ったフォルダに一通りはいっている。

###9.ダウンロードしたデータをオフラインPCに移す
どこでも(ry

###10.オフラインPCにダウンロードしたパッケージをインストールする
```
pip install --no-deps E:Python27\tmp\click-6.7.tar.gz
```
こんな感じで全ファイルインストールする。
ワイルドカードやってみたけどなんかうまくいかなかったので手動でやった。

###11.サーバしてみる
http://methane.github.io/flask-handson/start.html
これの途中からやった。できた。
jQueryの要素追加・削除メモ


##jQueryの要素追加・削除メモ

|関数|処理|
|---|---|
|append(newElement)|子要素の一番最後に新しく要素(newElement)追加|
|prepend(newElement)|子要素の一番最初に新しく要素(newElement)追加|
|wrap(newElement)|親要素(newElement)を追加|
|wrapAll(newElement)|子要素を複数まとめる形で親要素(newElement)を追加|
|wrapInner(newElement)|子要素の中身に親要素(newElement)を追加|
|remove()|要素を削除|
|empty()|中身を削除|
|unwrap()|親要素を削除|
React Native 開発のリセット・キャッシュ削除手段一覧メモ

# iOS
Simulator menu > reset setting
Xcode > Product > Clean
Xcode > Product > (Alt) Clean Build Folder

![Fullscreen_2017_02_14_14_52.png](https://qiita-image-store.s3.amazonaws.com/0/40717/68334a18-ff5f-921e-8aa4-9374a9238acd.png "Fullscreen_2017_02_14_14_52.png")


## Cocoapod
```
rm -rf ~/Library/Caches/CocoaPods
rm -rf ./Pods/
```

(↓公式から)

```
rm -fr ~/Library/Caches/CocoaPods && \
gem update --system && \
gem update && \
gem cleanup && \
pod setup
```

# npm, yarn
```
rm -rf node_modules
yarn cache clean
```

# git

```
# 対象となるファイル確認 .env, token など注意
git clean -n -d -X

# 削除実行
git clean -d -X
```
djangoプロジェクトをherokuへデプロイ

#前提
Herokuアカウント取得済み
toolbeltインストール済み（してない人）https://devcenter.heroku.com/articles/heroku-cli
git init済み
sqliteなどHerokuにあげたくないファイルは各自ignore済み

#Herokuへログイン
ターミナルでログインします
Herokuに登録したアカウントのメールアドレスとパスワードが聞かれるので入力していって、「Logged in as メールアドレス」と表示されればログイン完了です。
もし、heroku loginコマンドでエラーが出たら、HEROKU_SSL_VERIFY=disable heroku loginコマンドを使ってください

```
$ heroku login
Enter your Heroku credentials.
Email:　xxxxxx
Password (typing will be hidden):
Logged in as xxxxxx
```

次にHerokuのサーバを作成するために、createコマンドを実行します
ブラウザで、Herokuにログインするとサーバが作成されているのが確認できるはずです。「xxxxxxx」はHerokuが任意でつけてくれます。作成する際、名前を指定することもできますが、作成後でも変更できるので、今回はデフォルトで作成します

```
$ heroku create
Creating app... done, ⬢ xxxxxxx
https://xxxxxx.herokuapp.com/ | https://git.heroku.com/xxxxxx.git
```

#djangoプロジェクトへのファイル作成
Herokuへデプロイする際は、pythonのバージョンなど伝えなくてはいけないので、それ用のファイルを作成します
プロジェクトフォルダ直下にruntime.txtファイルを作成し、djangoプロジェクトを作成した時の、pythonのバージョンを記述します。

```runtime.txt
python-3.5.2
```

次に、ターミナル上でgunicornパッケージとwhitenoizeパッケージをインストールします。
※エラーが出たら、１回ずつpip install実行
※gunicorn(webサーバ)
※whitenoize(静的ファイルを配信するのを簡単にしてくれるライブラリ)

```
$ pip inastall gunicorn, whitenoize
```

インストール後、インストールされているパッケージを表示し、コピーします

```
$ pip freeze
Django==1.10.4
gunicorn==19.6.0
・・・
省略
・・・
```

runtime.txtと同じ階層にrequirements.txtを作成し、コピペします（もしくは下記のコマンドでコピペ）

```requirements.txt
Django==1.10.4
gunicorn==19.6.0
・・・
省略
・・・
```

or

```
$ pip freeze > requirements.txt
```

また、同じようにruntime.txtと同じ階層にProcfileを作成します
※拡張子はなし

```Procfile
web: gunicorn プロジェクト名.wsgi --log-file -
```

settings.pyに静的ファイルのパスを設定します
※任意の場所に記述
困ってしまう方は、下記のようにSTATIC_URL = '/static/'の下に記述してください

```settings.py
STATIC_URL = '/static/'

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
```

whitenoiseを使うためにwsgi.pyの末尾にも記述します

```wsgi.py
from whitenoise.django import DjangoWhiteNoise
application = DjangoWhiteNoise(application)
```

sqliteで開発している人たちは、DBパッケージを入れる必要があるので、インストールします
HerokuのDBはポスグレ対応なので、ドライバも一緒にrequirements.txtに記述します。

```
$ pip install dj-database-url
```

```requirements.txt
・・・
省略
・・・
dj-database-url==0.4.1
psycopg2==2.6.1
```

settings.pyに先ほどインストールした、データベースをインポートしてあげます
※任意に記述（わからなければ、末尾）

```settings.py
import dj_database_url
db_from_env = dj_database_url.config()
DATABASES['default'].update(db_from_env)
```

以上の操作が終わったら、コミットしてあげて、下記のコマンドを打てばHerokuへデプロイできます
ただし、DBが作成されてないので、マイグレーションを行なってあげます
そしたら、ブラウザで見てあげるために、「heroku open」してあげればHeroku上で動作しているのが確認できるはずです

```
$ git push heroku master
$ heroku run python manage.py migrate
$ heroku open
```

任意でsuperuserを作成してみて管理画面にログインしてみてもいいかもしれません

```
$ heroku run python manage.py createsuperuser
```

以上でHerokuへのデプロイ完了です！

#※ログアウト方法

```
$ heroku logout
```
Unityでテキストが稀に文字化けする問題

追記：
公式の技術情報に掲載されました。
http://helpdesk.unity3d.co.jp/hc/ja/articles/115003102887-%E3%83%80%E3%82%A4%E3%83%8A%E3%83%9F%E3%83%83%E3%82%AF%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88-uGUI%E3%81%A7%E3%81%AE%E6%96%87%E5%AD%97%E5%8C%96%E3%81%91

# 文字化け問題について

Unityでダイナミックフォントを使ってテキストを描画していると、時折テキストの内容が壊れることがあります。
壊れるといっても、設定されている文字列は正しく、表示される内容だけがおかしくなる、というものです。
実機でもUnityEditorでも発生し、GameObjectのアクティブ／非アクティブを切り替えたりすると直ったりします。

これ、おそらく再現性が取れないが故に開発側でも原因を掴みかねているバグなのではないかと、個人的には思っています。Unity5.1くらいの時代からちょくちょく発生しており、Unity5.4になっても未だに修正されていません。

原因は分からないのですが、以下の方法を入れることで改善の傾向が見られました。
（もし完全に解決する方法をご存知でしたらご教示いただきたいです）
ただしアンオフィシャルな内容ですので、自己責任でお使い下さい。

# 対処方法

## 1. Font.textureRebuilt にコールバックを設定する

ダイナミックフォントテクスチャが再生成された時に呼ばれるコールバックです。
コールバックの型は、引数に`Font`を1つ取ります。

## 2. コールバックの中で、引数のFontを使っているTextコンポーネントを収集する

マネージャクラス的なもので、現在のシーンにあるTextを全て管理しているなら話は早いのですが、そうでない場合は重いのを覚悟で`GameObject.FindObjectsOfType`などを使ってください。

## 3. Text.FontTextureChanged を呼ぶ

手順2で収集したTextコンポーネント全てに`FontTextureChanged`を呼びます。
textureRebuiltコールバックの中で直接呼んでしまって構いません。
Apache2.4 httpd.confの目的別セット

yum とかでインストールすると全部入りになっちゃうので、使わないの機能とはは外すようにしている。
メモがてらQiiting。

### httpd.conf

```apache:conf/httpd.conf
ServerRoot "/etc/httpd"
Listen 0.0.0.0:80
User apache
Group apache

Include conf.modules.d/*.conf

ServerName myserver.example.com
ServerAdmin admin@localhost

# ここは環境やサービスにあわせて
MaxClients 5
MinSpareServers 1
MaxSpareServers 5

<Directory />
    AllowOverride none
    Require all denied
</Directory>

# パスはあわせる
DocumentRoot "/var/www/myapp/current/public"
<Directory "/var/www/myapp/current/public">
    Options FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>

<IfModule dir_module>
    DirectoryIndex index.html
</IfModule>

<Files ".ht*">
    Require all denied
</Files>

<IfModule mime_module>
    TypesConfig /etc/mime.types
    #AddType application/x-gzip .tgz
    #AddEncoding x-compress .Z
    #AddEncoding x-gzip .gz .tgz
    AddType application/x-compress .Z
    AddType application/x-gzip .gz .tgz

　　　　　　　　# CGI使う時は外す
    #AddHandler cgi-script .cgi
</IfModule>

AddDefaultCharset UTF-8

<IfModule mime_magic_module>
    MIMEMagicFile conf/magic
</IfModule>

#ErrorDocument 500 "The server made a boo boo."
#ErrorDocument 404 /missing.html
#ErrorDocument 404 "/cgi-bin/missing_handler.pl"
#ErrorDocument 402 http://www.example.com/subscription_info.html

EnableMMAP off
EnableSendfile off

IncludeOptional conf.d/*.conf
```

### conf.d 以下

welcome.conf とか、使わないであろうファイルは消しちゃうか、`welcome.conf.nouse` のようにリネームして退避しておく。
また、一時的に使わない場合も、〜.nouseとリネームしておくと良い。

```apache:conf.d/auth_basic.conf
# Basic 認証を使う場合
<Location />
    AuthType Basic
    AuthUserFile "/path/to/passwdfile"
    AuthGroupFile /dev/null
    AuthName "Restricted Area"
    Require valid-user
</Location>
```

```apache:conf.d/auth_digest.conf
# Digest 認証を使う場合
<Location />
    AuthType Digest
    AuthUserFile "/path/to/passwdfile"
    AuthName "Restricted Area"
    Require valid-user
</Location>
```

ログは、ELBのヘルスチェックを別ログに記録するようにしている。[ここを参考](http://qiita.com/mint/items/9c3fc584c9f6080eddc3)。

```apache:conf.g/logging.conf
ErrorLog "logs/error_log"
LogLevel warn

<IfModule log_config_module>
    SetEnvIf User-Agent "ELB-HealthChecker.*" nolog
    SetEnvIf User-Agent "ELB-HealthChecker.*" elb

    #LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" combined
    LogFormat "%h %l %u %t %D \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\" %D %{X-Forwarded-For}i %{X-Forwarded-Proto}i" combined
    LogFormat "%h %l %u %t \"%r\" %>s %b" common

    <IfModule logio_module>
　　　　　　　　　　　　# Debug 向け
      LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\" %{X-Forwarded-For}i %{X-Forwarded-Proto}i %I %O" combinedio
    </IfModule>

    #CustomLog "logs/access_log" common
    CustomLog "logs/access_log" combined env=!nolog
    CustomLog "logs/elb_healthcheck_log" combined env=elb

</IfModule>
```
ubuntu14.04にcuda8.0をインストールする

#ubuntuの初期設定をする

```bash
sudo apt -y update
sudo apt -y upgrade
```

必要な設定をする。
まだデバッグはしてないが、だいたいあってるはず。
https://github.com/miyamotok0105/setup_tool/blob/master/ubuntu_setup.sh

#nvidiaからdebをDL

ubuntu14.04にcuda8.0を入れるスクリプト。まだ試してない。
https://github.com/miyamotok0105/setup_tool/blob/master/cuda_cudnn_setup.sh

普通に入れる場合は下記
![スクリーンショット 2017-01-27 17.49.09.png](https://qiita-image-store.s3.amazonaws.com/0/64334/23130bd6-fecf-0b6e-1222-bb95299a5aa4.png)

イメージをダウンロード (1.9 GB)  

```bash
wget https://developer.nvidia.com/compute/cuda/8.0/prod/local_installers/cuda-repo-ubuntu1404-8-0-local_8.0.44-1_amd64-deb
```


#cudaのインストール
```bash
sudo dpkg -i cuda-repo-ubuntu1404-8-0-local_8.0.44-1_amd64.deb
sudo apt update
sudo apt install cuda
```


#.bashrcに記述
```bash
export CUDA_HOME=/usr/local/cuda-8.0

export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:${CUDA_HOME}/lib64
export PATH=$PATH:${CUDA_HOME}/bin
```

反映

```bash
source .bashrc
```

cudaが動くかチェック

```bash
cd /usr/local/cuda-8.0
sudo make
```


#cuDNNのインストール
Deep Learningに特化したライブラリで畳み込み等の計算を高速に処理してくれるライブラリ。ライブラリを取得するためにはデベロッパー登録が必要。

ユーザーの登録をしてダウンロードページへ
![スクリーンショット 2017-02-04 7.29.26.png](https://qiita-image-store.s3.amazonaws.com/0/64334/652bf254-d544-3e0b-bb62-a97f6aa633cd.png)

ここを選択してダウンロード
![スクリーンショット 2017-01-27 19.03.16.png](https://qiita-image-store.s3.amazonaws.com/0/64334/e0d5ea36-4987-13a1-4412-08e86e647f0c.png)



展開

```bash
tar -zxf cudnn-8.0-linux-x64-v5.1.tgz
```

コピー

```bash
sudo cp lib64/* /usr/local/cuda/lib64/
sudo cp include/cudnn.h /usr/local/cuda/include/
```


#確認

cudaパスが通ってることを確認

```
which nvcc
```


```bash
nvidia-smi
+-----------------------------------------------------------------------------+
| NVIDIA-SMI xxx.xx                 Driver Version: xxx.xx                    |
|-------------------------------+----------------------+----------------------+
| GPU  Name        Persistence-M| Bus-Id        Disp.A | Volatile Uncorr. ECC |
| Fan  Temp  Perf  Pwr:Usage/Cap|         Memory-Usage | GPU-Util  Compute M. |
|===============================+======================+======================|
|   0  GeForce GTX TIT...  Off  | 0000:00:00.0     Off |                  N/A |
| 22%   34C    P0    70W / 250W |      0MiB / 12206MiB |      0%      Default |
+-------------------------------+----------------------+----------------------+
```


#注意
cudaのビルドがうまくいってない、あるいはパスがうまくいってない場合はDLライブラリのインストールでビルドがこける場合があった。

cuda-8.0でgccの５以上のバージョンをサポートしてないと書いてる。gccバージョンによってビルドエラーもアリエル。
http://blog.mixable.de/nvidia-cuda-on-ubuntu-unsupported-gnu-version-gcc-versions-later-than-5-are-not-supported/
https://plus.google.com/+YoheiKuga/posts/19JtReDP6K5

#参照
https://developer.nvidia.com/cuda-downloads
React Native のデバッグは Nuclide でしよう

Breakpoint や Stepping や Watcher なども Atom エディタ上でできるよって話
公式: https://nuclide.io/docs/platforms/react-native/


# 先に注意点(つまづきどころ)
2017-2-14 現在の話ですが

* **node v7.5.0** であること

v7.4 でやると[Transforming]終了時に真っ白な画面で止まる問題
https://github.com/facebook/nuclide/issues/978

* **react-native 0.42.0-rc.1** であること

`Maximum call stack size exceeded` 問題の回避
https://github.com/facebook/nuclide/issues/900


# 準備
* Atom
* Nuclide (Atom Plugin) - `apm install nuclide`

# 手順

## 1. packager 起動
**```lsof -i :8081``` で他にpackagerが動いていないことを確認する。**

Atom Command pallet で NUclide React Native: Start Packager する。

![index_ios_js_—___tmp_DefaultApp.png](https://qiita-image-store.s3.amazonaws.com/0/40717/eafce8a5-c80d-4c1a-187b-64b4d0aa687a.png "index_ios_js_—___tmp_DefaultApp.png")

## 2. Debugger 起動
続けて Nuclide React Native: Start Debugging も起動


![index_ios_js_—___tmp_DefaultApp.png](https://qiita-image-store.s3.amazonaws.com/0/40717/76b3c4fb-1900-f4a3-019a-7a8b793c6200.png "index_ios_js_—___tmp_DefaultApp.png")

![index_ios_js_—___tmp_DefaultApp.png](https://qiita-image-store.s3.amazonaws.com/0/40717/0103a20c-53ac-8c08-d3df-bc4d6a395956.png "index_ios_js_—___tmp_DefaultApp.png")

↑ 待機状態に入ったことを確認する。


## 3. run-ios
``` react-native run-ios ``` ターミナルで実行

![Glass_and_iPhone_6_–_iOS_10_2__14C89_.png](https://qiita-image-store.s3.amazonaws.com/0/40717/17c62391-6948-201b-a6e2-132a5f2f0d60.png "Glass_and_iPhone_6_–_iOS_10_2__14C89_.png")

## 4. Remote JS Debugging
Emulator 上 ⌘ + d でDebug menu を開き、Remote JS Debugging をオンにする。
(もともと ON になっていた場合は必要なし。)

<img src="https://qiita-image-store.s3.amazonaws.com/0/40717/9e7242bb-69ae-6c53-a4bd-7aa7d7e85b98.png" style="width: 50%" />

# Debug してみる

* Breakpoint

![index_ios_js_—___tmp_DefaultApp.png](https://qiita-image-store.s3.amazonaws.com/0/40717/fbbfb09c-ab3b-76b4-2d82-9054b9691b2b.png "index_ios_js_—___tmp_DefaultApp.png")

Line Number 左に breakpoint 設定するとこんな感じで止まる。