OmniAICreator/Qiita-1.07M huggingface dataset:
CSSのみで超シンプルなフェードスライダーを実装する。

コンテンツの背景に、全画面の画像をフェードスライダーで演出したい！
だけど、JSで書くのもなぁ…とかスライダーのライブラリをわざわざ入れるのもなぁ…
なんてときに使えそうなCSSのみで簡易的フェードスライダーを実装する方法です。
CSSのみなのでパフォーマンスも良し◎です。

#スライダーの機能
- FadeIn, FadeOutでのauto切り替え（無限ループ）
- 送りボタンや何枚目なのかを表示するナビゲーション等は無し

#基本的な考え方
CSSだけで実装するということはご察しの通り **animation** を使います。
フェード切り替えの原理としては、html上で並べている画像の要素に対して、順番に **opacity** の0と1を繰り返すというやり方になります。
今回は背景いっぱいに表示させる3枚の画像のフェードスライダーを実装していきます。
それでは実際にコードを見ていきましょう。

#HTMLを用意
まずは、スライドさせるHTML要素を用意します。
今回は`<div>`タグを用意し、中に3つの`<span>`を用意します。（画像はCSSで配置します）

```ruby:HTML
<div class="fadeSlider">
  <span class="fadeSlider_01"></span>
  <span class="fadeSlider_02"></span>
  <span class="fadeSlider_03"></span>
</div>
```
#CSSを用意
背景いっぱいに表示させるためコンテンツは `fixed` で固定し
画像は`background-size: cover;` でフル画面になるようにします。
各`<span>`は重ねるため`position: absolute;`させます。
全てのCSSは以下にてご確認ください。

```ruby:SCSS
.fadeSlider {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    &.fadeSlider_01 {
      background-image: url(/img/example_01.jpg);
      animation: fadeSlideImg01 15s ease-out infinite;
      animation-delay: 3s;
    }
    &.fadeSlider_02 {
      opacity: 0;
      background-image: url(/img/example_02.jpg);
      animation: fadeSlideImg02 15s ease-out infinite;
      animation-delay: 3s;
    }
    &.fadeSlider_03 {
      opacity: 0;
      background-image: url(/img/example_03.jpg);
      animation: fadeSlideImg03 15s ease-out infinite;
      animation-delay: 3s;
    }
  }
}

@keyframes fadeSlideImg01 {
	0% { opacity: 1; }
	33% { opacity: 0; }
	66% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes fadeSlideImg02 {
	0% { opacity: 0; }
	33% { opacity: 1; }
	66% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes fadeSlideImg03 {
	0% { opacity: 0; }
	33% { opacity: 0; }
	66% { opacity: 1; }
	100% { opacity: 0; }
}

```
今回は画像が3枚となるので、
`@keyframes`ではわかりやすいように33%刻みで順番に`opacity`を0↔1を繰り返していきます。（原始的な方法ではありますが…）
#カスタマイズするには
- スライド画像の枚数によって%の数値を適宜変更（5枚であれば20%刻み）
- スライド切り替えの時間を変更するには`animation-duration`の時間を変更
- `animation-delay`でautoスライドの開始時間を変更

以上で、実装完了です。
`animation`はアイデア次第で様々なことができるので、ネタを考えていきたいです。
VisualStudioでXamarin.Androidを実機用にビルドするときの設定

先日[Xamarinハンズオン](https://jxug.connpass.com/event/64867/)に参加してきました。Xamarinには触れたことがなく環境構築に手間取りましたが、メンターの方々の親切なご指導のもと、無事ハンズオンを完遂することができました。
以下、VisualStudioでXamarin.Androidを実機用にビルドするときの設定メモです。

##当日用意していった環境
* Windows10 Professional
    * 開発者モードを有効化しておきます。
* Visual Studio Professional 2017 version 15.4.5
    * [事前資料](http://ytabuchi.hatenablog.com/entry/visualstudio2017)を基にXamarinを追加インストールしておきました。
* 実機デバッグ用のAndroid（Xperia, Android7.0）
    * 開発者オプションを有効化しておきます。

##設定
####1. 実機に合わせたSDKをダウンロードします。
事前資料に基づいてXamarinをインストールした直後はAndroid7.1用のSDKしかインストールされておらず、ハンズオン用のプロジェクトのビルド時に以下のエラーが出ました。
<img src="https://qiita-image-store.s3.amazonaws.com/0/221271/6162b902-7db3-8d65-1c74-37f3e28a153d.jpeg" width=80%>

このエラーに対応するため、以下の手順でAndroid7.0のSDKをインストールします。
1. VisualStudioのメニューで[ツール]->[Android]->[Android SDK Manager]を選択します。
2. 実機に対応するOSバージョンの SDK Platform にのみチェックを入れ、インストールを実行します。
3. （他のバージョンのSDK等に勝手にチェックが入るので適宜チェックを外してください。）  
<img src="https://qiita-image-store.s3.amazonaws.com/0/221271/ae1b2bac-d603-9fb2-1393-883804fe861a.jpeg" width=80%>

####2. プロジェクトのプロパティで以下を設定します。
1. アプリケーション → [Androidバージョンを使用したコンパイル：（ターゲットフレームワーク）]を実機に合わせます。（今回はAndroid7.0）  
<img src="https://qiita-image-store.s3.amazonaws.com/0/221271/52ad0775-ec27-197e-7408-13a10c1aca6b.jpeg" width=70%>

2. Androidマニフェスト → [TargetAndroidVersion]を[SDKバージョンを使用したコンパイルの使用]に設定します。  
<img src="https://qiita-image-store.s3.amazonaws.com/0/221271/43c9c841-8004-812a-0bdb-fad02252f69a.jpeg" width=50%>

3. Androidオプション → [詳細設定]を選択します。  
<img src="https://qiita-image-store.s3.amazonaws.com/0/221271/f937a5d2-9d6d-1d66-82b6-ea6022f4c9ac.jpeg" width=50%>

4. [サポートされているアーキテクチャ]を実機に合わせます。（今回はARMだったので armeabi と armeabi-v7a を選択しました）  
<img src="https://qiita-image-store.s3.amazonaws.com/0/221271/be20fbb0-97a2-4cea-930a-fe2463111a4c.jpeg" width=50%>

###3.ビルドします。
エラーが出なければ実機での実行が可能です！

##それでもビルドできない場合は
twitterで#JXUGハッシュタグをつけてつぶやけば、手を差し伸べてくださる優しい方々がいらっしゃるはず…！
awk 使い方 (メモ)

### 一覧
[root@localhost order]# awk '{ print }' /etc/passwd
root:x:0:0:root:/root:/bin/bash
bin:x:1:1:bin:/bin:/sbin/nologin
daemon:x:2:2:daemon:/sbin:/sbin/nologin
adm:x:3:4:adm:/var/adm:/sbin/nologin
lp:x:4:7:lp:/var/spool/lpd:/sbin/nologin
・
・
・

### 変数 $0 は現在行全体を意味するので、print と print $0 はまったく同じ動作となります。
[root@localhost order]# awk '{ print $0 }' /etc/passwd
root:x:0:0:root:/root:/bin/bash
bin:x:1:1:bin:/bin:/sbin/nologin
daemon:x:2:2:daemon:/sbin:/sbin/nologin
adm:x:3:4:adm:/var/adm:/sbin/nologin
lp:x:4:7:lp:/var/spool/lpd:/sbin/nologin
・
・
・

### このスクリプトを実行すると、画面が test で埋まります。
[root@localhost order]# awk '{ print "test" }' /etc/passwd
test
test
test
test
test
・
・
・
### awk は、複数の論理フィールドに分割されたテキストの処理が得意であり、awk のスクリプトの中から各フィールドを容易に参照することができます。次のスクリプトは、使用中のシステムに存在するユーザー・アカウントの一覧表を出力します。
[root@localhost order]# awk -F":" '{ print \$1 }' /etc/passwd
root
bin
daemon
adm
lp
・
・
・
### 上の例では -F オプションを使用して、”:” をフィールド区切り文字に指定しています。awk が print \$1 コマンドを実行すると、入力ファイルの各行の 1 番目のフィールドが出力されます。別の例をもう 1 つ示します。
[root@localhost order]# awk -F":" '{ print \$1 $3 }' /etc/passwd
root0
bin1
daemon2
adm3
lp4
・
・
・

[root@localhost order]# awk -F":" '{ print $1 " " $3 }' /etc/passwd
root 0
bin 1
daemon 2
adm 3
lp 4
・
・
・

### substr使い方
[root@localhost order]# echo 'abcde' | awk '{print substr(\$0, 2, 3)}'
bcd
[root@localhost order]#
[root@localhost order]#
[root@localhost order]# echo 'abcde' | awk '{print substr(\$0, 1, 3)}'
abc
[root@localhost order]#
[root@localhost order]#
[root@localhost order]# echo 'abcde' | awk '{print substr($0, 1, 4)}'
abcd

### sub使い方
[root@localhost order]# echo 'abc de' | awk '{sub(/ .*$/, ""); print}'
abc

### if文みたいなもの
縦棒(|)がある場合、下の処理を実行
/\|/{

縦棒(|)と7002の場合、下の処理を実行
\$0 ~ /\|/ && $0 ~ /7002/{
CSSでUnicode使って矢印つけたいとき

備忘録

# 検索するのはここ

http://www.fileformat.info/info/unicode/char/search.htm

arrow とか point　あたりのキーワードがいいかも
（他にも色々サイトはあるけれど一番見やすいと思ったところがここ）
Preview条件が `HTML Entities` になっていることを確認する

# 指定方法

UnicodeでU+XXXXという文字の場合は、

```css
content: "\XXXX"
```

# 回転したいとき

Unicodeでは左右向きの分の矢印しか用意されていない場合がある。上下のバージョンが必要なら回転。

```css
-moz-transform:    rotate( 90deg ); 
-webkit-transform: rotate( 90deg ); 
transform:         rotate( 90deg );
```

ブロック要素でないと回転がきかないので、

```css
display: block;
```

か

```css
display: inline-block;
```

をつけておくこと。
[上級者向け]iOSキーボード出現時に<ion-footer>を隠さない

# 概要
キーボード出現時、Androidでは `<ion-footer>` を持ち上げる形でキーボードが出現します。しかし、iOSではなぜか `<ion-footer>` を隠す形でキーボードが出現します。これはIonic 2のかなり初期からのバグでして、

https://github.com/ionic-team/ionic/issues/7149
https://github.com/ionic-team/ionic/issues/12844
https://forum.ionicframework.com/t/ios-keyboard-overlap-ion-footer-and-moves-bottom-tabs/56060

と様々なIssueが上げられ、コミュニティ内で解決法が話し合われています。iOS10では動いたけどiOS11では動かない解決法などありまして、今のところ、以下のディレクティブを自作して操作するのが一番無難なのでご紹介します。

https://gist.github.com/rdlabo/57bb9a2098f2f83c2c1cc16c8e88f6d5

# 使い方
## Directiveを作成する
`ionic g`コマンドで`directive`を実行する。名前は`keyboard-attach`で作成します。

## Directiveを書き換える
自動的に`src/directives/keyboard-attach/keyboard-attach`が生成されます。中身を

https://gist.github.com/rdlabo/57bb9a2098f2f83c2c1cc16c8e88f6d5

に置き換えます。結構以前につくったものなので、selector名がデフォルトと違いますがご容赦ください。

## 利用するngModuleでDirectiveを読み込む
Directiveを利用するためには、Moduleで読み込む必要があります。例えば、LazyLoadingを実装しており、MessagePageModuleに追記するならこんな感じになります。

```
  import { NgModule } from '@angular/core';
  import { IonicPageModule } from 'ionic-angular';
  import { MessagePage } from './message';
+ import { DirectivesModule } from '@/directives/directives.module';

  @NgModule({
      declarations: [
          MessagePage,
      ],
      imports: [
          IonicPageModule.forChild(MessageUser),
+         DirectivesModule
      ],
      exports: [
          MessagePage,
      ]
  })
  export class MessagePageModule {}
```

## ComponentsでDirectiveを使う
あとは、作成したts/htmlテンプレート内でDirecitiveを利用します。

```
@ViewChild(Content) content: Content;
```

```
<ion-footer [keyboardAttach]="content">
</ion-footer>
```

# まとめ
実はこのDirectiveは完璧ではなく、キーボード出現時に一瞬Headerが下に落ちてからキーボードにあわせて上にあがってくるバグを抱えております。もし解決できましたら、日本語で大丈夫ですので

https://gist.github.com/rdlabo/57bb9a2098f2f83c2c1cc16c8e88f6d5

にコメントをいただけましたら幸いです。

それでは、また。
Java標準ログ出力サンプル

### はじめに
このログ出力方法はバッチ実行時のログ出力を行うもので、WEBアプリ等ではログローテ等々有るのであまりオススメ出来ません。
素直にLog4j使ったほうが良いです。

でも、Log4jを何故か使えないような（そもそも入っているのかもわからない）システムで「ログはSystem.out.println()でいい」と言われて「ちょっと待って」と思ったのでまとめておきます。
普通の人は使わないです。

### ログフォーマッタ

```java

public class BatchLogFomatter extends SimpleFormatter {

       public String format(LogRecord logRecord) {
          final StringBuffer stringBuffer = new StringBuffer();

          // 日付のフォーマット
          // このバッチはそこまでスレッドに気を使うバッチの想定ではなかったのですが
          // クラス変数に置いておくのは不安なのでformat内で書く
          DateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss.SSS");
       
          stringBuffer.append(dateFormat.format(new Date(logRecord.getMillis())));
          stringBuffer.append(" ");

          Level level = logRecord.getLevel();
          // 何故かFINE以下が表示されないのでFINE以下はとりあえず設定するだけです。
          // CONF、INFO、WARN、ERRORという名前に変えています。
          // 設定の表示（DEBUG）= CONFとします。
          if (level == Level.FINEST) {
             stringBuffer.append("FINEST");
          } else if (level == Level.FINER) {
             stringBuffer.append("FINER ");
          } else if (level == Level.FINE) {
             stringBuffer.append("FINE ");
          } else if (level == Level.CONFIG) {
             stringBuffer.append("CONF");
          } else if (level == Level.INFO) {
             stringBuffer.append("INFO ");
          } else if (level == Level.WARNING) {
             stringBuffer.append("WARN ");
          } else if (level == Level.SEVERE) {
             stringBuffer.append("ERROR ");
          }
          
          stringBuffer.append(" ");
          // クラス名が入るようになる（ここではなんだかわからないけどね）
          stringBuffer.append(logRecord.getLoggerName());
          stringBuffer.append(" - ");
          // メッセージが表示される
          stringBuffer.append(logRecord.getMessage());
          // 改行を忘れずに。
          stringBuffer.append("\n");

          // 2017-10-05 18:52:57.592 INFO  hoge.FugaBatch - バッチ実行開始
          // のようなログが出る
          return stringBuffer.toString();
          
       }
}
```

#### 実装側

```java

public class LogTest {

	static final Logger logger = Logger.getLogger(LogTest.class.getName());
	
	static {
		ConsoleHandler handler = new ConsoleHandler();
		// ログレベルの変更
                // ALLにしてもFINE以下が出ない…
		handler.setLevel(Level.ALL);
		handler.setFormatter(new BatchLogFomatter());
		logger.addHandler(handler);
		// これを入れないとログが重複する
		logger.setUseParentHandlers(false);

	}
	
	public static void main (String[] args) {
		logger.info("INFOで出る");
	}

}
```

#### 終わりに

バッチ実行なので、必ずログファイルが分かれるので特に細かい事は気にせず
ログだけ出すようにしています。
もっと良いログの出し方無いだろうか。
【MarkLogic Server】XQueryチューニングメモ～cts検索条件設定の基本方針

はじめに
===
今回は、MarkLogicを特徴づけるcts検索における条件関数の基本的な記述方針について整理していきましょう。

cts検索とは？
===
標準的なXQuery/XPath関数として、W3C標準のfn:docなどが存在します。MarkLogicではこれに加えて独自の索引を用いています。この索引を用いる検索が、cts:searchなどctsを識別子とする関数です。cts関数は、cts:searchのような検索関数と、cts:element-value-queryのように検索条件関数(以下、単に条件関数)があります。
これらをうまく使いこなすことがMarkLogicで性能を出すためのカギになります。

条件関数には必ず、「ドキュメントの中身を見ない」ものをand条件で含めること
===
DB全体を全文検索することは理論的には可能ですが、現実的には検索範囲が広くなりレスポンスが低くなります。そこで以下のようにドキュメントの中身を見ない条件をcts:and-queryで加えることをお奨めします。いずれも、第１引数は複数の値すなわちシーケンスにすることが可能です。その場合、シーケンス値間はor条件となります。

| 対象項目 | 条件関数 | 備考 |
|---|---|---|
| ドキュメント | cts:document-query | - |
| ディレクトリ | cts:directory-query | 第２引数で、直下(1)か子孫すべて(infinity)かを選択
| コレクション | cts:collection-query | DB設定の「collection lexicon」はデフォルトでfalseになっているのでtrueに設定 |

☆よくある修正の例

```
cts:uris("/a/root/", (), cts:element-value-query(xs:QName("flag"), "007"))
↓
cts:uris((), (), 
  cts:and-query((
    cts:directory-query("/a/root/", "infinity"),
    cts:element-value-query(xs:QName("flag"), "007"))
  ))
)
```

存在確認だけなら、cts:searchをcts:urisに代える。
===
cts:searchとcts:urisは、同じcts検索条件を設定できますが中身まで返さなければいけないcts:searchよりも、URIだけを返せばよいcts:urisの方が軽くて済みます。
(ただし、繰り返し要素の設定によって、複数データin1ドキュメントとなっている場合はcts:searchで第１引数にパスを引いて使う必要があります。)
単に検索に引っかかるかを確認すればよいときは、cts:urisを使いましょう。出力数が1個で良い場合は出力数を制限するオプションを設定できます。

☆存在確認を確認して変数$existに代入するクエリの変換

```
let $query := 
  cts:and-query((
    cts:directory-query("/a/root/", "infinity"),
    cts:element-value-query(xs:QName("flag"), "007"))
  ))
・・・・・
let $exist := 
  cts:search(/*, $query)
  ↓
  cts:uris((), ("limit=1"), $query)
```

要素完全一致条件の優先度
===
よく「cts:element-value-queryとcts:element-word-queryってどっちを選べばよいの？」と聞かれるので整理しました。

| 条件関数 | 使いどころ |
|---|---|
| cts:element-range-query | 完全一致条件として第２引数に「=」を記述。大小比較や不一致条件としても利用可能。element range indexの設定が前提。 |
| cts:element-value-query | 完全一致条件 |
| cts:element-word-query  | 部分一致条件 |

＊部分一致は、DB設定の変更なども行わないと全てを出力することはできないようです。

一般的に完全一致は部分一致より軽くて済みます。基本的にはcts:element-value-queryを使うようにし、element range indexが設定可能ならば、cts:element-rage-query(..., "=", ...)を使うようにしましょう。

おわりに
===
cts検索はMarkLogicの性能を担保する上で重要です。一見W3C標準ではない独自の関数として苦手意識を持たれる方もいらっしゃるかもしれませんが、要は問い合わせ言語なわけですから使う関数をいくつか覚えてしまえば、それほど苦にはならないと思います。
MarkLogic社では[トレーニングサイト](http://www.marklogic.com/training/ "トレーニングサイト")(英文)もあるようなので、興味のある方は覗いてみてください。




```math
\def\textsmall#1{%
  {\rm\scriptsize #1}
}
```

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

**免責事項**

​​​​​$\textsmall{当ユーザ会は本文書及びその内容に関して、いかなる保証もするものではありません。}$
​​​​​$\textsmall{万一、本文書の内容に誤りがあった場合でも当ユーザ会は一切責任を負いかねます。}$
​​​​​$\textsmall{また、本文書に記載されている事項は予告なしに変更または削除されることがありますので、予めご了承ください。}$
pyaudioのインストールで詰んだ時の対処法

# TL;DR

- pyaudioには`portaudio`という依存ライブラリが存在
- pyaudioのインストールにあたっては上記ライブラリのインストールが必要

# 概要

とある件で使いたかったので[これ](https://github.com/pannous/tensorflow-speech-recognition)を動かそうとしたらpyaudioのビルド中に、gccが`fatal error: 'portaudio.h' file not found`とかいうエラー吐いて落ちたので対処法をメモ。

# pyaudioとは

WIP

# エラーの原因

原因は、依存ライブラリの１つである`portaudio`というものが不足していることです。

そのため、この`portaudio`というライブラリをインストールすれば全て解決です。

# 対処法

## Ubuntu

```bash
sudo apt-get install portaudio19-dev
pip install pyaudio
```

## Mac

```bash
brew update
brew install portaudio
brew link --overwrite portaudio
pip install pyaudio
```

# 参考

https://stackoverflow.com/questions/5921947/pyaudio-installation-error-command-gcc-failed-with-exit-status-1
今更ながらIBDesignableとIBInspectableについて



## そもそもIBDesignableとIBInspectableって何もの？

Xcode 6から新たにできるようになった機能です。 
遡ること3年前のWWDC 2014に発表された機能です。(ずいぶん前ですが。。。。) 
使ってみようと思ってずいぶん期間が経過してしまいました。。。


### IBDesignableとIBInspectableでできること。
IBDesignableとIBInspectable修飾子をつけることによってStoryboard上で見た目、カスタムの属性を変更できます。

- IBDesignable
    - Storyboard上にリアルタイムで反映。シミュレータや実機でのデバックをしなくても見栄えを確認できちゃう優れもの。
- IBInspectable
    - Storyboard上で属性変更できる。優れもの。

#### とりあえずやってみよー

今回作ったものは[Github](https://github.com/t-ogawa1116/RangeSelectionCalendarView)に上がってます。
※ 範囲選択可能なカレンダーを作ってみました。(おまけ情報)

### IBDesignable

とりあえず使い方。

```swift
@IBDesignable
class SampleView: UIView {

    override func draw(_ rect: CGRect) {
        // Drawing code
    }

}
```

はい。これでIBDesignableが使えるようになりました。

えっ？何こいつ。フザケンナヨって？

はい。そう思います。
IBDesignableというのはカスタマイズした見た目をStoryboard上で変更箇所がリアルタイムで閲覧できる機能になります。(Xibで作ったものやロジックで書いたコードも)

```swift
@IBDesignable
public class CalendarView: UIView{
      ~ カレンダー表示機能 ~
}
```
そうすることでカスタムで定義したViewをStoryboardに載せると以下のように表示することができるようになります。

![スクリーンショット 2017-12-12 11.47.11.png](https://qiita-image-store.s3.amazonaws.com/0/62340/7ca3361f-a224-3f38-cf85-677d8c0af073.png)

![Sample_2.gif](https://qiita-image-store.s3.amazonaws.com/0/62340/a94229cf-8b94-5033-282e-e87189aa44d1.gif)



これがIBDesignableの特徴です。

### IBInspectable
では次にIBInspectableについてですが
簡潔にいうと「Storyboardから値をいじれる」ということです。
全てを変更できるわけではなく設定できる値(クラス)に決まりがあります。

|クラス名|
|:---:|
|Bool|
|Int|
|CGFloat|
|Double|
|String|
|CGPoint|
|CGSize|
|CGRect|
|UIColor|
|UIImage|

では、実際のコードを見ていきましょう。

```swift
@IBInspectable var circleColor: UIColor = UIColor.white {
        didSet {
             // ほにゃらら
        }
    }
```

こうすることによってStoryboard上で値が変更できるようになります。

![スクリーンショット 2017-12-12 11.47.11.png](https://qiita-image-store.s3.amazonaws.com/0/62340/7b167d5a-8564-d3cd-80b5-814c8b580dfd.png)


![Sample3.gif](https://qiita-image-store.s3.amazonaws.com/0/62340/4de232c7-c093-f54b-a36d-31b72c089084.gif)


circleColorがStoryboard上にあることがわかります。
ここの値を変更することでViewに対しても値が変わります。
実際にGifでは色を変更しているのが確認できると思います。
これがIBInspectableの特性です。

## まとめ

楽しかったです。w
PythonとPycharmの環境設定


#はじめに
今回windowsでPythonを使いたく、環境設定はつまずきやすいので備忘録として。

#背景
Anaconda、Pycharmをインストールしたところで
cannot set up a python SDKと表示されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/200669/ffb425f7-ac3f-19fa-8911-83a63f79e3dc.png)

よくよく調べてみるとアナコンダインストール時にpathを指定しなかったことが原因らしい
アンインストール後、再インストール

#Anacondaのインストール
以下のサイトからインストールできます。
https://www.continuum.io/downloads

インストール時はこの2つにチェックを入れます。
<img width="696" alt="スクリーンショット 2017-12-12 12.34.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/200669/171fa07b-9aa6-69f0-3108-793b4d6d9030.png">


インストール後はAnaconda Promptを開き、pythonがインストールされていることを確認
![image.png](https://qiita-image-store.s3.amazonaws.com/0/200669/b9de1043-9355-29c3-f52e-c683fe4cfc3a.png)


ライブラリを追加したい場合はこのコマンドでinstallの後ろに追加したいライブラリを追記
```
python -m pip install 
```

#Pycarmの環境設定
以下のサイトからPycharmをインストールします。
https://www.jetbrains.com/pycharm/download/

Pycharmのfile → settings → projectinspecterでパッケージをインストールします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/200669/be44a365-19b1-fb5b-20ab-ca682756d08b.png)

+ボタンを押し、インストールしたいパッケージを検索
![image.png](https://qiita-image-store.s3.amazonaws.com/0/200669/ff5d3ff6-c555-0a63-3a0b-498269cd1fdd.png)

install packageを押して完了


#参考にさせて頂きました
[Anaconda で Python 環境をインストールする](https://qiita.com/t2y/items/2a3eb58103e85d8064b6)
Node.js × AWS Lambda アプリケーション開発Tips

これは [AWS Lambda Advent Calendar 2017](https://qiita.com/advent-calendar/2017/aws-lambda) の12日目の記事です。

先日の [東京Node学園祭2017](http://nodefest.jp/2017/) にて Lambda についてライトニングトークしてきました。

<img width="500" alt="スクリーンショット 2017-12-12 12.47.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/35733/d71ad6ac-e003-e05f-adaf-c3d6d64d05d6.png">
[Node.js × AWS Lambda アプリケーション開発Tips (SlideShare)](https://www.slideshare.net/hiroyukikusu/node2017nodejs-aws-lambda-tips-82763897)

興味がある方は上記のリンクから内容を見て頂ければ。

今回はスライド中で一番時間をかけて書いた下記の図について、手前味噌ですがなかなかよく書けたんじゃないかなと思うので、紹介させていただきます^^

<img width="500" alt="スクリーンショット 2017-12-12 12.55.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/35733/b1c0b1c0-e363-1c5b-a863-b63a8980a71f.png">

Lambda は図の左上のように AWS のイベント経由で起動する他に、左下のように HTTP 経由で起動することができます。Lambda は AWS 内の各種リソースにアクセスできるのはもちろんなのですが、Lambda からHTTPで外に出られるので、**インターネット上の任意のサービス**にアクセスできます。また HTTP 経由でなくても定期実行(CloudWatch イベント)ができるので、定期的に何かをする、といった用途にも使えます。

インフラにがっつり AWS を使ってなければ、Lambda は馴染みがないだろうと思われがち？なのですが、HTTP 経由で Lambda を利用して、必要あらばLambda から HTTP 経由で他のサービスを利用する、といったことは、がっつりAWSを利用するといった用途でなくてもサーバの管理が必要ないアプリケーションの実行環境として利用できるのかなと思います。スライドの中でも触れてるように、(Amazon Linux 上で動かせる)任意の実行ファイルも動かせます。

少しでも AWS Lambda に可能性を感じ、AWS Lambda を触ってみるキッカケになれば幸いです。それでは！
GoogleAppsScriptを使ってgoogleフォームの記入に期限を付ける

```javascript

function endFormCheck() {
  
  var today = new Date();
  var firstday =  new Date(today.getFullYear(), today.getMonth(), 1);//1日を取得
  var fiveday =  new Date(today.getFullYear(), today.getMonth(), 5);//5日を取得
  
  var today = Utilities.formatDate(today, "Asia/Tokyo", "yyyy-MM-dd");
  var firstday = Utilities.formatDate(firstday, "Asia/Tokyo", "yyyy-MM-dd");
  var fiveday = Utilities.formatDate(fiveday, "Asia/Tokyo", "yyyy-MM-dd");
  var form = FormApp.getActiveForm();
  //var LIMIT_COUNT = 3; //ここでカウント上限を設定
  
  Logger.log(today);
  Logger.log(firstday);
  Logger.log(fiveday);
  
  //if (form.getResponses().length >= LIMIT_COUNT) {
  
  if (today >= firstday && today <= fiveday) {
    form.setAcceptingResponses(true);
    Logger.log("期間内");
  }else{
    form.setAcceptingResponses(false);
    Logger.log("期間外");
    //上記は、http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11115562281を参考に作成
  }
  
}
```
3x3の魔方陣を作るプログラム

#3x3の魔方陣とは
3x3の表組みに1から9の数字をすべて埋めます。
条件は、縦・横・斜めの数字の和がすべて同じ値になることです。

![スクリーンショット 2017-12-12 12.53.05.png](https://qiita-image-store.s3.amazonaws.com/0/223036/ab39310b-9f7e-77b4-fd79-2b3ec66ef3cc.png)

#コード
```html
<html>
<head>
<title>魔方陣</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	var n = 3;	// 3x3魔方陣

	// 1辺の和
	var x = 0;
	for (i = 1; i <= n*n; i++) {
		x += i;
	}
	x = x / n;

	// 和がXになる数字の組み合わせを探す
	var y = [];
	for (i = 1; i <= n*n; i++) {
		for (j = i + 1; j <= n*n; j++) {
			for (k = j + 1; k <= n*n; k++) {
				if ((i + j + k) == x) {
					y.push([i, j, k]);
					continue;
				}
			}
		}
	}

	// 各数字の使用回数を調べる
	var c = [];
	for (i = 1; i <= n*n; i++) {
		c[i] = 0;	// 初期化
	}
	for (i = 0; i < y.length; i++) {
		for (j = 1; j <= n*n; j++) {
			if (j == y[i][0] || j == y[i][1] || j == y[i][2]) {
				c[j]+=1;
			}
		}
	}

	// 使用回数が最も多い数字を魔方陣の中心にする
	var m = [];
	m['e'] = 0;
	for (i = 1, j = 0; i < c.length; i++ ) {
		if (c[i] > j) {
			j = c[i];
			m['e'] = i;
		}
	}

	// 次に使用回数が多い数字を魔方陣の4隅にする
	var k = []
	for (i = 1, j = 0; i < c.length; i++ ) {
		j = c[m['e']] - 1;
		if (c[i] == j) {
			k.push(i);
		}
	}
	m['a'] = k[0];
	m['c'] = k[1];
	m['g'] = k[2];
	m['i'] = k[3];

	// 残りの数字を確定する
	m['b'] = x - m['a'] - m['c'];
	m['d'] = x - m['a'] - m['g'];
	m['f'] = x - m['c'] - m['i'];
	m['h'] = x - m['g'] - m['i'];

	// 描画
	$("#a").html(m['a']);
	$("#b").html(m['b']);
	$("#c").html(m['c']);
	$("#d").html(m['d']);
	$("#e").html(m['e']);
	$("#f").html(m['f']);
	$("#g").html(m['g']);
	$("#h").html(m['h']);
	$("#i").html(m['i']);

});
</script>
<style>
table {
	border-collapse: collapse;
}

td {
	border: 1px #333 solid;
	padding: 5px 10px;
}
</style>
</head>
<body>
<table>
	<tr>
		<td id="a">a</td>
		<td id="b">b</td>
		<td id="c">c</td>
	</tr>
	<tr>
		<td id="d">d</td>
		<td id="e">e</td>
		<td id="f">f</td>
	</tr>
	<tr>
		<td id="g">g</td>
		<td id="h">h</td>
		<td id="i">i</td>
	</tr>
</table>
</body>
</html>
```
ThingSpeak > 2018年1月10日までにアカウントをMathworksのアカウントにする必要あり

```txt:動作環境
GeForce GTX 1070 (8GB)
ASRock Z170M Pro4S [Intel Z170chipset]
Ubuntu 16.04 LTS desktop amd64
TensorFlow v1.2.1
cuDNN v5.1 for Linux
CUDA v8.0
Python 3.5.2
IPython 6.0.0 -- An enhanced Interactive Python.
gcc (Ubuntu 5.4.0-6ubuntu1~16.04.4) 5.4.0 20160609
GNU bash, version 4.3.48(1)-release (x86_64-pc-linux-gnu)
scipy v0.19.1
geopandas v0.3.0
MATLAB R2017b (Home Edition)
```

[ThingSpeak / python > データアップロード実装例 / プロットしてみた](https://qiita.com/7of9/items/af32584de823282c2a45)
で使ったThingSpeak というサービスがある。

そのサービスからのメールで2018年1月10日までにMathWorksのアカウントに紐付ける必要があると記載されていた。

> As part of a system upgrade to the ThingSpeak IoT Platform, you will be required to link your ThingSpeak account to a new or existing MathWorks Account on or before January 10, 2018.

MathWorksは最近使い始めたMATLABの会社のようだ。アカウントがあったため紐付けをしておいた。

紐付け作業をしない場合は、データのダウンロード(とアカウント削除など)メールのリンク先の指示に従うこと。
windowsでanaconda導入と仮想環境の作り方

Windowsのコマンドを書いていく個人メモ

#コマンド等
##仮想環境の作り方
$conda create -n pydata-anaconda anaconda
上記の後ろは適宜変更
-nで環境の名称を任意に指定（今回はpydata-anaconda）
末尾のanacondaは環境作成時に導入するパッケージを列挙

※パッケージでanacondaすべて導入すると時間がかかるのでほしいものだけ後からインストールするのもよし（後ろは無し）
$conda create -n pydata-anaconda
jupyterだけ後から導入する場合
$conda install jupyter==1.0.0

##conda環境の一覧
$conda env list

##仮想環境のactivate化
$activate　pydata-anaconda
後ろは適宜変更
MACはsourceだとか。。

##仮想環境の非activate化
$deactivate
Perlのdeleteでひっかかった話

先日Perlの配列操作で、うっかり`delete`を使ってしまい、あれ？？となりハマったのでかきます。

# 配列操作

## 配列の最後に要素の追加
```pl
my @number_list = (1,2,3,4);
push(@number_list, 5); 

use Data::Dumper;
warn Dumper @number_list;
```
### 結果
```
$VAR1 = 1;
$VAR2 = 2;
$VAR3 = 3;
$VAR4 = 4;
$VAR5 = 5;
```
## 配列の先頭に要素の追加
```pl
my @number_list = (1,2,3,4);
unshift(@number_list, 0); 

use Data::Dumper;
warn Dumper @number_list;
}
```
### 結果
```
$VAR1 = 0;
$VAR2 = 1;
$VAR3 = 2;
$VAR4 = 3;
$VAR5 = 4;
```

## 配列の最後の要素を取り出す
```pl
my @number_list = (1,2,3,4);
my $last_number = pop @number_list;

use Data::Dumper;
warn Dumper @number_list;
print "###############" . "\n";
warn $last_number;
```
### 結果
```
$VAR1 = 1;
$VAR2 = 2;
$VAR3 = 3;
###############
4
```

## 配列の先頭の要素を取り出す
```pl
my @number_list = (1,2,3,4);
my $first_number = shift @number_list;

use Data::Dumper;
warn Dumper @number_list;
print "###############" . "\n";
print $first_number;
```

### 結果
```
$VAR1 = 2;
$VAR2 = 3;
$VAR3 = 4;
###############
1
```

## 指定された配列要素を消す
###先頭を消す場合
```pl
my @number_list = (0,1,2,3,4);
delete($number_list[0]);

use Data::Dumper;
warn Dumper @number_list;
```

### 結果
```
$VAR1 = undef;
$VAR2 = 1;
$VAR3 = 2;
$VAR4 = 3;
$VAR5 = 4;
```
消したところにundefが入る

###末尾を消す場合
```pl
my @number_list = (0,1,2,3,4);
delete($number_list[4]);

use Data::Dumper;
warn Dumper @number_list;
```

### 結果
```
$VAR1 = 0;
$VAR2 = 1;
$VAR3 = 2;
$VAR4 = 3;
```
消したところにundefが入らない

###先頭でも末尾でもないものを消す場合
```pl
my @number_list = (0,1,2,3,4);
delete($number_list[3]);

use Data::Dumper;
warn Dumper @number_list;
```

###結果
```
$VAR1 = 0;
$VAR2 = 1;
$VAR3 = 2;
$VAR4 = undef;
$VAR5 = 4;
```
消したところにundefが入る

## Perlの配列の要素を消すとき
###splice関数を使う
```pl

my @number_list = (0,1,2,3,4);

# @number_listの3番目のインデックスの要素を1つ消す
splice(@number_list, 3, 1); 

use Data::Dumper;
warn Dumper @number_list;
```
####結果
```
$VAR1 = 0;
$VAR2 = 1;
$VAR3 = 2;
$VAR4 = 4;
```
コメントで教えていただいたsplice関数を調べたら、これ一つでpopやらunshift...を一つで操作できる
###その他
```pl
my @number_list = (0,1,2,3,4);

my @hoge;

foreach my $num ( @number_list ) { 
    if ( $num != 3 ) { 
        push(@hoge, $num);
    }   
}

use Data::Dumper;
warn Dumper @hoge;
```
or

```pl
my @number_list = (0,1,2,3,4);

my @hoge = grep{ $_ != 3 } @number_list;

use Data::Dumper;
warn Dumper @hoge;
```
こっちの方がPerlっぽい\(^O^)/

#### 結果
```
$VAR1 = 0;
$VAR2 = 1;
$VAR3 = 2;
$VAR4 = 4;
```

#おわり

なんで `delete`　使ってしまったのか、まったく思い出せなくて、PHPって配列の要素削除するときってdelteだっけ？とか調べたけど、違かったのでおそらく思い込みで書いてしまった。
Perlのdeleteはハッシュ要素を削除してキーと値を削除する、でも今回のように配列の要素の削除でも使えるが、基本的にハッシュでしか使わない方が、得策...
Unity2017.2.0p3で.Net4.6を使うとVisualStudioのインテリセンスが効かない対処法+α

本記事はサムザップ[Advent Calendar 2017の12日目](https://qiita.com/advent-calendar/2017/sumzap)の記事です。
昨日は@yosizo@githubさんの[uGUIでプログレスバーの動きに合わせて子要素を動かす](https://qiita.com/yosizo@github/items/8ce64624f598aab6a672)でした。

##**環境**
Unity2017.2.0p3(.Net4.6使用)
VisualStudio 15.5.1
windows10

##**問題**
Unity2017.2.0p3を落としてきて、いざコードを書こうとすると何故かVisualStudioのインテリセンスが効いていない。
立ち上げなおしても再インストールしても効いていない。 
<img src=https://qiita-image-store.s3.amazonaws.com/0/222228/73438911-d1b6-f2e6-2d4a-f1dba22236f1.png width=50%>

##**対処法1**
右上からnugetと検索しnugetのパッケージマネージャーを取り込む。
すでにVisualStudioが入っている方はこの方法が最も簡単。
<img src=https://qiita-image-store.s3.amazonaws.com/0/222228/cfee47f3-d39b-5819-be1b-93320a93f806.png width=50%>

##**対処法2**
VisualStudioInstallerから落とすときに、初めからnugetのパッケージマネージャーを取り込んでしまう。
まだこれからの方はこの方法が良いと思います。
<img src=https://qiita-image-store.s3.amazonaws.com/0/222228/0220e3ad-5a39-2ff9-0d4b-b018c709c4a3.png width=50%>

##**別の問題**
<img src=https://qiita-image-store.s3.amazonaws.com/0/222228/9c0bd4f3-9d8c-e54d-8b03-c86c23b2470c.png width=50%>
Nugetパッケージマネージャーを入れることでとりあえずインテリセンス(csファイルの参照)は復活出来たが、Unityを立ち上げてcsファイルを開こうとするたびに.Net4.6.1をインストールするかどうかダイアログで聞かれる。
素直に.Net4.6.1をインストールしてUnityのコンソールからcsファイルに飛ぼうとすると再度ダイアログが出る。
しかもIDEのタブで開いていたcsファイルが全て消し飛んでしまう。

##**対処法**
.Net4.6.1ではなく**.Net4.6** をインストールすると正しい挙動になります。
インストールはVisulStudioを開いていれば右上から4.6と検索すると**.Net Framework 4.6 TargetingPack**が見つかるので、それをインストール。
VisualStudioInstallerからは個別のコンポーネントからインストール出来ます。

##**いったい何がどうなっているのか**
.Net4.6.1に変更する際にNugetパッケージマネージャー経由で取得しようとするらしく、Unityを落としてくるときは標準でNugetパッケージマネージャーが入っていない状態なのでUnity側で.Net4.6を使えるように変更すると、おかしくなるようです。
それにしても・・・Unity側で4.6を指定しているのに**何故か取得してこようとしているのは.Net4.6.1**です。

##**GetReferenceNearestTargetFrameworkTaskとは何か**
[ここにソースがあった](https://github.com/NuGet/NuGet.Client/blob/dda020578d856bedc3646f39fd826b483a58fa63/src/NuGet.Core/NuGet.Build.Tasks/GetReferenceNearestTargetFrameworkTask.cs)
詳しいことは分かりませんがNuGet.Coreの中に入っているものの一部みたいです。

##**参考**
https://forum.unity.com/threads/visual-studio-problem.507850/
設定ファイル不要のParcelでTypeScriptをコンパイル・バンドルしたら拍子抜けするほど簡単だった

この記事は大幅に加筆・修正して『[TypeScriptのビルド環境が3分でできるParcel入門 \- ICS MEDIA](https://ics.media/entry/190325/)』に引っ越しました。

[![](https://qiita-image-store.s3.amazonaws.com/0/67884/0225d1e6-3029-7706-b7ed-6d42182a6364.png)](https://ics.media/entry/190325/)

[![](https://qiita-image-store.s3.amazonaws.com/0/67884/398ea0a5-c1f0-400c-5e0c-6750c582fb38.png)](https://ics.media/entry/190325)

※ Google検索で辿り着いた方にリンク切れとなっては申し訳ないので、元の記事を残しています。ご了承ください。
Angularでビューに基づく(DOMの高さとか)処理を実行する


はこです、こんにちわ。

DOMに表示した内容によって処理を変えたいことがあると思います。
clientHeightやscrollHeightに応じて(あるいはclientWidth/scrollWidth)、省略表示したり、です。
（と言うか他の用例が思いつかなかった・・・他の用例あれば、是非コメントください）。


そんなとき、こんな風にします。


### 動くが、エラーが出る

```my-component.html
<div #myDiv>
   <!-- 長さバラバラなコンテンツ -->
   {{ content }}
</div>

<!-- コンテンツの高さ(height)が100px以上なら、「省略されました」とか出したい -->
<button *ngIf="myDiv.clientHeight > 100">省略されました。もっと読むには押してください</button>
```


コレで動きますが、 ExpressionChangedAfterItHasBeenCheckedError というエラーが出ると思います。





### エラーのでないきちんとした書き方

ビューに関する処理は、ngAfterViewChecked() の中で処理するようにします。


```my-component.html
<div #myDiv>
   <!-- 長さバラバラなコンテンツ -->
   {{ content }}
</div>

<!-- コンテンツの高さ(height)が100px以上なら、「省略されました」とか出したい -->
<button *ngIf="readmoreButtonEnnabeld">省略されました。もっと読むには押してください</button>

```


```my-component.ts
import { Component, OnInit, ViewChild, AfterViewChecked, ElementRef } from '@angular/core';


export class MyComponent implements OnInit, AfterViewChecked {

  @ViewChild('myDiv') myDiv: ElementRef;
  readmoreButtonEnnabeld = false;
  content = ''
  
  ngOnInit() {
  	this.content = '何か長い文字列...'
  }

  ngAfterViewChecked() {
    this.readmoreButtonEnnabeld = this.myDiv.nativeElement.clientHeight > 100;
  }

}




```
ユーザを間違えたままgithubにpushしたときの書き換え

ちょっとした修正しようと思ったけど、手元にいつものPCがなかったので少し古いPCで作業したときにやってしまったメモ。
古いPCのgit設定が会社用のgitと紐付いてて、それに気づかずpushしてしまいました。
github確認したら別アカウントのユーザがあってびっくり。

[ちょうどいい記事](http://sohtaro.com/blog/2017/06/11/git-author-email-replace/)を見つけたので割とすんなり解決できました。

というわけで、別ユーザでgithubにpushしたコミットログを書き換える方法です。

# 一括変換
一括変更は下記のコマンドでできます。

```bash
$ git filter-branch -f --env-filter \
    "GIT_AUTHOR_NAME='<変更後の名前>'; \
     GIT_AUTHOR_EMAIL='<変更後のメールアドレス>'; \
     GIT_COMMITTER_NAME='<変更後の名前>'; \
     GIT_COMMITTER_EMAIL='<変更後のメールアドレス>';" \
    <対象コミット>
```

<対象コミット>は全部もしくは範囲指定できます。
- HEAD → 全部
- HEAD~3..HEAD → 過去直近3コミット分

# Author名指定
また、特定のAuthor名だけを指定して変更もできます。私はこちらを使いました。

```bash
$ git filter-branch --commit-filter '
    if [ "$GIT_COMMITTER_NAME" = "<変更前の名前>" ]; then
        GIT_AUTHOR_NAME="<変更後の名前>";
        GIT_AUTHOR_EMAIL="<変更後のメールアドレス>";
        GIT_COMMITTER_NAME="<変更後の名前>";
        GIT_COMMITTER_EMAIL="<変更後のメールアドレス>";
        git commit-tree "$@";
    else
        git commit-tree "$@";
    fi' <対象コミット>
```

詳しく調べてないのでよくわかってないまま使ってる場所がありますが、これでできます。
（`git commit-tree "$@"`ってなんだろう…）

あ、シングルクォートやダブルクォート、[ ]の前後に空白入れ忘れたりするとエラーになるので気をつけてください（なりました。）

# リモートに反映
`git log`で確認し、大丈夫そうならリモートに反映しましょう。
このあとは`git push -f xxxxx yyyyy`をしてあげるとリモート先でも書き換わります。

チーム開発ではやばい気がするので、やる時はその筋のプロに相談しましょう。
VisualStudioから発行したAzureFunctionsを無効化する

# はじめに
これは [日本情報クリエイト Engineer's Advent Calendar 2017](http://qiita.com/advent-calendar/2017/njc) の3日目の記事です。
Merry Christmas！🎄

## Azure Functions
サーバレスアーキテクチャはお手軽です。
インフラ的な部分は意識せずに、ただただ処理を書くこと集中できます。
[Microsoft Azure Functions](https://azure.microsoft.com/ja-jp/services/functions/) も、そんなサーバレスなソリューションです。
小さな処理（関数）をさくさくっとクラウド上に展開できます。

## Visual Studio を使用した Azure Functions の開発
ブラウザから直接 C# を記述し、その場でテスト、発行までできてしまいます。
お遊び程度のプログラミングなら、ブラウザ上でちょこちょこっと書いても良いのですが、
Visual Studio の甘い蜜を知っている身としては、
やはりインテリセンスや参照ジャンプのようなIDEを活かした生産性の高い開発がしたくなります。

そして、そんなことができないはずもなく。
さすが、Microsoft Azure のソリューションです。
Visual Studio 2017 を使用した Azure Functions の開発が可能です。

> Azure Functions Tools for Visual Studio
> https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-develop-vs

## ローカルでプログラムを書き…
![vs.png](https://qiita-image-store.s3.amazonaws.com/0/112587/2bcb2b99-c608-882f-c31a-6b871366410d.png)
## 発行すれば…
![vs2.png](https://qiita-image-store.s3.amazonaws.com/0/112587/d6f5ab90-488c-6086-bbfe-8a93b99df222.png)
## あっという間にデプロイ完了！
![azure.png](https://qiita-image-store.s3.amazonaws.com/0/112587/458e7271-c8ec-355a-8b1f-459b846d4938.png)

…と、ここまでが前提。

# つまづいた！
とりあえず、発行したはいいものの、まだ開発中なので一旦関数を無効にしたいです。

(*^^*) 。oO たしか、ブラウザ上で「有効/無効」の管理ができたはず…
![azure3.png](https://qiita-image-store.s3.amazonaws.com/0/112587/54e691fd-ecfb-6259-5951-4aaf1f8272c1.png) ←こんなボタンが出てくると信じてた

**あれっっ！？読み取り専用になっていて「有効/無効」が触れない！**
![azure2.png](https://qiita-image-store.s3.amazonaws.com/0/112587/4574c500-5889-d5c6-ea29-1bbbd0fcc24a.png)

関数を無効にするために、いちいちローカルでソースをコメントアウト→発行なんてしてられません。

# 解決法

よくよく見てみると、次のようなアラート表示がありました。
> 生成された function.json を公開しているため、アプリは現在読み取り専用モードになっています。function.json に加えられた変更は、Functions ランタイムでは受け入れられません。 

ふむふむ。
ということで、作った関数に **Disable 属性**を付与して **"true"** を指定します。
これだけ。

```csharp
[Disable("true")] // 開発中なので無効にしておく
[FunctionName("Greet")]
public static async Task<HttpResponseMessage> Run([HttpTrigger(AuthorizationLevel.Function, "get", "post", Route = null)]HttpRequestMessage req, TraceWriter log)
{
    log.Info("C# HTTP trigger function processed a request.");

   // …後略
}
```

そして、発行すると、ちゃんと**（無効）**になりました！
![azure4.png](https://qiita-image-store.s3.amazonaws.com/0/112587/d3980fab-0abe-0529-8672-2f8c876ab212.png)

# おわりに
「取り急ぎやってみた」程度の内容で申し訳ないです。
たとえば、こんなことできないのかな…

* function.json をローカルで持てないのか
* 読み取り専用を外し、発行/pullしながら、ローカルとクラウド両方で開発できないか

もっと Azure Functions の開発が楽になるように今後も試行錯誤してみたいと思います。
自宅のネットワークをv6プラスに変更した話


## 前置き：フレッツ光ネクストにおけるPPPoEの限界
昨今、インターネットが遅いという話をよく聞くようになりました。
これの根本的な原因は、電電公社を解体した時に作られた通称NTT法にまで遡ります。
が、ここでは難しい話はしません。

ではどこがボトルネックになっているかと言いますと、NTTフレッツ網（NGN）とプロバイダ事業者（ISP）間の相互接続点（POI）になります。
![インターネット接続模式図](https://qiita-image-store.s3.amazonaws.com/0/177247/91f4c7fb-d0c6-21fa-a209-9901d2f1256c.png "スクリーンショット 2017-12-12 10.31.30.png")

ここで輻輳（車の流れに例えますと、渋滞）が発生し、例えば以下画像のような速度にまで落ち込みます。

![インターネット速度テスト結果](https://qiita-image-store.s3.amazonaws.com/0/177247/4fad95ec-cdbd-126e-7562-6ae69e4b3b87.jpeg "22894466_236207556914768_3048122498744461303_n.jpg")

アップロード速度を見ていただくとわかりますが、回線としての基本的なスペックは200Mbpsに迫るものがある中で、ダウンロード速度が0.3Mbpsという異常事態ともいえる速度になります。
こうなった原因は色々ありますが、NTTが想定した以上に「一人複数端末でIP通信網への接続が当たり前になった」「コンテンツのリッチ化が激しく進んだ」のも一つの要因と言えます。

#### まとめ
「既存のプロバイダ接続を使ったインターネットアクセスは既に限界を迎えつつある」
「改善には時間がかかる」
「改善されても、時間とともにまた遅くなる」

参考URL：
[IIJmioひかりの混雑の理由とバイパス手段(IPoE・DS-Lite対応)](http://techlog.iij.ad.jp/archives/1879)

## v6プラスへの申込み
前置きが長くなりました。
ではどうすれば快適なインターネットアクセスを手に入れることができるのか？というお話です。
「POIが原因なら、POIを使わなければいいじゃない！」
どこかのマリーさんが言いそうです。
「本当にそんないい方法があるの？」
あるんです。

上記参考URLにもありました、IPoEという方式がそれになります。
これを使う方式は色々ありますが、今回は利用している@Niftyさんの上部組織、JPNEが提供するv6プラス方式を申し込んでみました。
一つ注意ですが、v6プラスはNTT東西が貸し出しを行っているホームゲートウェイ（ひかり電話対応ルーター）が基本となっていることです。
市販されているブロードバンドルーターを利用している場合はv6プラスを利用できない場合がありますし、ホームゲートウェイでも比較的新しい機種が対象になります。
（2017.12.12現在、ホームゲートウェイ以外ではBuffaloおよびIO-DATA製の一部機種が対応済み）

[v6プラスのご案内 ： @nifty](http://csoption.nifty.com/ipv6/)にアクセスし、下部の「お申込みはこちら」から申し込みます。
（@Nifty の場合）
![スクリーンショット 2017-12-12 11.23.18.png](https://qiita-image-store.s3.amazonaws.com/0/177247/e68d8d6b-1d0d-1371-84da-559329b9416c.png "スクリーンショット 2017-12-12 11.23.18.png")

v6プラスの申し込みが処理されると、ホームゲートウェイにフレッツ・ジョイントを利用してv6プラス用の機能が配信されます。
自分の場合は、だいたい3日ほど時間がかかりました。
DS-Lite形式のように、申込み即開通とはなかなかならないようです。

## で、結局速度はどうなったの？
ほぼ、常時200Mbps前後の速度が出ています。

![23131661_236449980223859_8699668065025774770_n.jpg](https://qiita-image-store.s3.amazonaws.com/0/177247/3342de38-2515-82f6-19d8-17eed7cea9fc.jpeg "23131661_236449980223859_8699668065025774770_n.jpg")

これでストレスフリーになりました。
XCUITestのレコード機能を使って簡単にテストコードを記述する

## 目的
XCUITestでテストコードを書く際にレコード機能を使って簡単に画面遷移を行う
<br>

## 方法
処理を記述したいメソッドの中にカーソルを合わせ、赤丸のレコードボタンを押し、レコード開始



<br>

レコードボタンを押した後、Simulatorでアプリを操作して画面遷移させる

→操作内容がUIテストのコードとして生成される





<br>
<br>

参考
はじめてのfastlane Snapshot編
https://qiita.com/tamaki/items/f5e9f9985a91fb6a0f06
AzureAD間のSubscription移動～EA契約で

#はじめに
今回は、
AzureADを作成し、空のサブスクリプションを既存のADから移動をする（EA契約版）
です。
#経緯
なぜそんなことがやりたかったかというと、AzureKeyValutを利用したかったのですが、調べてすぐさまAzureADが必要ではと発覚しました。
そこでAzureADを作成しようとなりました。
しかし、弊社ではAzureの運用方法が煩雑だったためにハマってしまったので記録として残しておこうと思いました。

#アカウントの種類
まず第一ハマったポイントのアカウント、ここを私はきちんと把握していませんでした。

 * アカウント管理者
 * サービス管理者
 * 共同管理者（2017 年 10 月時点で新規登録はできません。）
 * ロールベースのアクセス制御 (RBAC)

が存在しています。
詳しくは、https://blogs.msdn.microsoft.com/dsazurejp/2013/10/02/303/ を参照してください。
弊社では、アカウント管理者（管理チームアカウントA）、複数あるサブスクリプションのサービス管理者（管理チームアカウントB）、サブスクリプションごとの共同管理者orロールベース管理者（Azure利用する一般社員）という運用を行っているようでした。
そして当然、私は共同管理者アカウントしか持っていませんでした。

最初は自分のアカウントでAzureAD作って、、、、
ディレクトリ切り替えてもサブスクリプションないよと、、、まぁ当然ですね。
そこでサービス管理者になれればイケるんじゃねと思い、弊社の担当者に無理を言って私のアカウントをサービス管理者にしてもらいました。

しかし、 https://docs.microsoft.com/ja-jp/azure/active-directory/active-directory-how-subscriptions-associated-directory を見て分かるようにまったく権限足りませんでした。。。

なもんで、無理言ってお願いした後なので頼みづらかったのですが、なんとかアカウント管理者権限のユーザーを借りることができました。
#作業開始
ここからはアカウント管理者での作業
##まずは、AzureADの作成
特に問題なく作成完了
##次は、というか、最後のサブスクリプション移動
と思ったら、ここでもハマっていました。
###ここでおさらい
弊社アカウントの割当は
 * アカウント管理者（管理チームアカウントA）
 * 複数あるサブスクリプションのサービス管理者（管理チームアカウントB）
 * サブスクリプションごとの共同管理者orロールベース管理者（Azure利用する一般社員）
です。

結論だけ言うとこれが話をややこしくしている原因でした。

https://docs.microsoft.com/ja-jp/azure/active-directory/active-directory-how-subscriptions-associated-directory
によるとアカウントポータルで移動できるよと解釈したので、
さっそくアカウントポートルニログイン
![image.png](https://qiita-image-store.s3.amazonaws.com/0/80457/a184c259-8757-b302-79cf-bd57864f52a7.png)

こういう画面のやつ

![image.png](https://qiita-image-store.s3.amazonaws.com/0/80457/be75319c-bf7d-4463-9f1d-e320fc1130d9.png)

譲渡するってメニューがない。譲渡できない。。。

その後色々調べてみました。
結果的に
https://blog.nextscape.net/archives/Date/2015/12/azureaddefaultdir
https://blog.nextscape.net/archives/Date/2015/12/azure-ea
このあたりの記事を見つけたので、、、

##まずはアカウントの整理
アカウント管理者、移動したいサブスクリプションのサービス管理者、アカウント管理者のアカウントでAzureADを作成し、管理者をすべてアカウント管理者IDに統一

これでアカウント管理者が私の触りたい領域すべて見えるようになりました。

##ついに移動作業
上の記事にあるように [マネージポータル](https://manage.windowsazure.com/) に入り、
デフォルトのディレクトリを選択
メニューの設定
サブスクリプション
移動したいサブスクリプションを選択
ディレクトリの編集
関連付けられたディレクトリの変更で作成したディレクトリを選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/80457/537a543a-26b6-e03b-79a7-221ebd528e4e.png)

で変更できました。

#おわり
Azureポータルより上の知識が皆無だったので苦労しました。これを期に勉強しておきたいと思います。
そして、弊社の運用方法は検討し直したほうがよさそうですね。分かりづらかったです。
さらにはAzure側でポータル多すぎです。
この記事で出てきたのだけで、Azureポータル、マネージポータル、アカウントポータルの３つ。実は載せていないけどEAポータルもあります。
そして、それぞれのポータルでしかできない作業があるのであっちこっちログインしないといけないのが、ユーザーばらばらなのも相まって時間がかかりました。
マネージポータルもうすぐ無くなると言うのに大丈夫でしょうか。。。
cssだけでselectとシンプルな矢印

![スクリーンショット 2017-12-12 11.35.00.png](https://qiita-image-store.s3.amazonaws.com/0/171960/6e427483-3e1e-22d9-cb83-1e389f2f1bc6.png)

##コード

```html:html
<div class="selectWrap">
    <select class="select" name="" id="">
        <option value="">001</option>
        <option value="">002</option>
        <option value="">003</option>
    </select>
</div>
```

```css:css
.selectWrap{
  width: 100%;
  position: relative;
  display: inline-block;
}
.selectWrap::after {
  content: '';
  width: 6px;
  height: 6px;
  border: 0px;
  border-bottom: solid 2px #b4b3b3;
  border-right: solid 2px #b4b3b3;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -4px;
}
.select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 40px;
  background: transparent;
  position: relative;
  z-index: 1;
  padding: 0 40px 0 10px;
  border: 1px solid #b4b3b3;
  border-radius: 2px;
}
select::-ms-expand {
    display: none;
}
```
nodeからTreasureDataに接続する

nodeからTreasureDataに接続する方法をメモ

##コード
```javascript
var TD = require('td');

var tdSelectData = (function() {
    var td_databases = 'test_db'; // DB名
    var td_api_key = '123/123456789987654321'; // APIキー
    var client = new TD(td_api_key); // TDクライアント
    var td_query = 'select * from test_table'; // 実行クエリ
    client.prestoQuery(td_databases, td_query, function(err, results) {

        console.log('=============TD results = ' + JSON.stringify(results) + '\r\n');

        const MAX_TIME = 600; 
        var time = 0;
        (function loop() {

            if (time < MAX_TIME) {

                client.showJob(results.job_id, function(err, r) {

                    console.log('TD JobStatus = ' + r.status + '\r\n');

                    if (r.status == 'error') {
                        console.log('TD Job error\r\n');
                        return false;
                    }

                    if (r && r.status == 'success') {
                        client.jobResult(results.job_id, 'csv', function(err, tdData) {
                            return tdData;
                        });
                    } else {
                        console.log('============this job is still processing...  waiting 5 seconds\r\n');
                        sl.sleep(5);
                        time += 5;
                        loop();
                    }
                });


            } else {
                console.log('timeout error\r\n');
                return false;
            }

        }());

    });
}());
```

##解説
###client.prestoQuery(td_databases, td_query, function(err, results){

prestoのjobを実行します。
callbackのresultsには以下のような値がJSON形式で返ってきます。

```
{ job: '123456789',
  database: 'test_db',
  job_id: '123456789' }
```

###(function loop() {

こちらではTDのJOBの結果がSuccessになるまで、ループしています。
JOBの結果待ち時間は600秒としています。

###client.showJob(results.job_id,function(err, r){

jobの結果を返します。
callbackのrには以下のような値がJSON形式で返ってきます。
実行中はstatusがrunning、完了後はsuccess、失敗はerrorとなります。

```
{ query: 'select * from test_table',
  type: 'presto',
  priority: 0,
  retry_limit: 0,
  duration: null,
  status: 'running',
  cpu_time: null,
  result_size: null,
  job_id: '123456789',
  created_at: '2017-12-12 02:22:03 UTC',
  updated_at: '2017-12-12 02:22:03 UTC',
  start_at: '2017-12-12 02:22:03 UTC',
  end_at: '',
  num_records: null,
  database: 'test_db',
  user_name: 'test_user',
  result: '',
  url: 'https://console.treasuredata.com/jobs/123456789',
  hive_result_schema: null,
  organization: null,
  debug: {省略}
```

###client.jobResult(results.job_id, 'csv', function(err, tdData) {
jobの結果を出力します。
callbackのtdDataにはcsv形式でクエリの結果が出力されます。
各行ループする際は以下のようなコードを記載すればよいと思います。

```javascript
client.jobResult(results.job_id, 'csv', function(err, tdData) {
   csv.parse(tdData, function(err, rawData) {
       console.log(rawData);
   });
});
```

##参考
http://treasure-data.github.io/td-client-node/docs/TDClient.html
【UnityEditor】ScriptableObjectのアセットを右クリックから作れるようにするエディター拡張

# 環境
Unity2017.2.0f3
Windows 10

# はじめに
ScriptableObjectのアセットを右クリックから作れるようにするエディター拡張を作ってみました。

![1.gif](https://qiita-image-store.s3.amazonaws.com/0/44288/40795cc0-9eed-28a4-401d-57af88c98bf3.gif)


# ソースコード
以下のスクリプトをEditorフォルダ以下に入れてください

```CreateScriptableObjectMenu.cs
namespace CreateScriptableObjectMenu
{
    using UnityEngine;
    using UnityEditor;

    /// <summary>
    /// 右クリックメニューからScriptableObjectを作成するエディター拡張
    /// </summary>
    public static class CreateScriptableObjectMenu
    {
        const string MENU_TEXT = "Assets/Create/ScriptableObject";

        [MenuItem(MENU_TEXT, false, 0)]
        static void CreateAsset()
        {
            var script = Selection.activeObject as MonoScript;
            string path = AssetDatabase.GetAssetPath(script);
            Create(script.GetClass(), path.Substring(0, path.Length - 3) + ".asset");
        }

        static void Create(System.Type type, string path)
        {
            ProjectWindowUtil.CreateAsset(ScriptableObject.CreateInstance(type), path);
        }

        [MenuItem(MENU_TEXT, true)]
        static bool ValidateCreateAsset()
        {
            var script = Selection.activeObject as MonoScript;
            if (script == null) { return false; }

            // 選択しているスクリプトがScriptableObjectかどうか
            return script.GetClass().IsSubclassOf(typeof(ScriptableObject));
        }
    }
}
```

# 使い方
ScriptableObjectのスクリプトを右クリックして Create/ScriptableObjectを選択するとアセットが作成されます。
<img src = "https://qiita-image-store.s3.amazonaws.com/0/44288/1ad88770-c500-fa3c-b014-d64ab95856b9.png" width = 600>

<img src = "https://qiita-image-store.s3.amazonaws.com/0/44288/16122773-5852-d676-1377-f4e55332ad93.png" height = 48>

# おまけ
ScriptableObjectクラス以外をクリックした場合はメニュー選択できないようになっています。
![2.png](https://qiita-image-store.s3.amazonaws.com/0/44288/2871a56f-380a-c0c9-dd2c-1e74ab24b749.png)
CreteJSでTextInput使いたい

CreteJSでTextInputを使おうかと。はい。

DOM要素（input）を createjs.DOMElement で扱ってみた。
[TextInput [basic] | CreateJS](http://labo.project-nya.jp/createjs/textinput/ver1/)

```html
<input type="text" id="box" />
```

```css
#box { height: 80px;}
```

```js
var txt = new createjs.DOMElement("box");
stage.addChild(txt);

txt.htmlElement.value = "入力";
txt.htmlElement.addEventListener("focus", input);

function input(event) {
	event.target.value = "";
}
```


複数行入力させたいので、DOM要素（input）の高さを増やしてみた。
[TextInput [multiline] | CreateJS](http://labo.project-nya.jp/createjs/textinput/ver2/)

```html
<input type="text" id="box" />
```

```css
#box { height: 160px;}
```

```js
var txt = new createjs.DOMElement("box");
stage.addChild(txt);

txt.htmlElement.value = "入力";
txt.htmlElement.addEventListener("focus", input);

function input(event) {
	event.target.value = "";
}
```

あれ？　改行できず、複数行にはならないのね…。


DOM要素（textarea）を createjs.DOMElement で扱ってみた。
[TextArea [multiline] | CreateJS](http://labo.project-nya.jp/createjs/textinput/ver3/)

```html
<textarea id="box" rows="2" maxlength="50" placeholder="入力"></textarea>
```

```css
#box { height: 160px;}
```

```js
var txt = new createjs.DOMElement("box");
stage.addChild(txt);
```

でけた。
JavaのXMLデジタル署名APIを利用してXML署名時、署名情報及び電子証明書情報が改行あり／なしをコントロールする

１、署名時、エンコード処理にて下記キーの値によって署名情報及び電子証明書情報が改行あり／なしかを判断され、実施される。
”com.sun.org.apache.xml.internal.security.ignoreLineBreaks”
詳しく下図イメージをご参照ください。
![signature.png](https://qiita-image-store.s3.amazonaws.com/0/159420/b77a319a-f13d-05ac-8202-065dbd9e2b73.png)



２、改行あり／なしをコントロールするため、
下記キーをシステムプロパティの値として設定する必要がある。
”com.sun.org.apache.xml.internal.security.ignoreLineBreaks”

システムプロパティとして設定方法について
・Eclipseの場合、VM引数のところに、下記のように設定する。
　⇒-D変数=値
　例え、
「-Dcom.sun.org.apache.xml.internal.security.ignoreLineBreaks="true"」

・java アプリケーション起動コマンドを利用する場合、optionsとして追加する。
　⇒java [ options ] class [ argument ... ]
　例え、
「java -Dcom.sun.org.apache.xml.internal.security.ignoreLineBreaks="true" com.test.SignatureTest 」
node でベクトルタイルをファイルシステムに展開

# node でタイルを展開できないとおかしい
1. [gh:openmaptiles/openmaptiles](https://github.com/openmaptiles/openmaptiles) や [gh:mapbox/tippecanoe](https://github.com/mapbox/tippecanoe) で作成したバイナリベクトルタイルは、mbtiles という形式のファイルの中に格納されますが、このファイルをホストするためには、CPU time を使用する [TileServer GL light](https://github.com/klokantech/tileserver-gl) のようなソフトウェアを使う必要があります。スタティックなストレージによりバイナルベクトルタイルを提供するためには、mbtiles を生のバイナリベクトルタイル群に展開する必要があります。
2. 上記の展開を行うための Ruby スクリプトとして、[fan-out.rb (gh:hfu/jig-fan-out)](https://github.com/hfu/jig-fan-out) を使ってきましたが、ベクトルタイル Advent Calendar の3日目、[ベクトルタイルに関して私が選択した技術体系](https://qiita.com/hfu/items/8be296f4501d5f815999)で、node を使うと宣言したのですから、node でタイルを展開できないとおかしいです。

ということで、
# fan-out を node で再実装してみました
雑なコードで恐縮ですが、https://github.com/hfu/fan-out-js/blob/master/fan-out.js にあるとおりです。

```javascript
const fs = require('fs-extra')
const Database = require('better-sqlite3')
const zlib = require('zlib')

const report = function(c, count, path) {
  if(c === count || c % 1000 === 0) {
    console.log(`${c} of ${count} (${Math.round(c * 100.0 / count)}%) ${path}`)
  }
}
const run = function(mbtiles, dir) {
  const db = new Database(mbtiles, {readonly: true})
  const count = db.prepare('SELECT count(*) FROM tiles').get()['count(*)']
  let c = 0
  for(const r of db.prepare('SELECT * FROM tiles').iterate()) {
    const buf = zlib.unzipSync(r.tile_data)
    const z = r.zoom_level
    const x = r.tile_column
    const y = (1 << z) - r.tile_row - 1
    fs.mkdirsSync(`${dir}/${z}/${x}`)
    fs.writeFileSync(`${dir}/${z}/${x}/${y}.mvt`)
    report(++c, count, `${dir}/${z}/${x}/${y}.mvt`)
  }
  db.close
}

if(process.argv.length == 4) {
  run(process.argv[2], process.argv[3])
} else {
  console.log("usage: node fan-out {tiles.mbtiles} {tiles_dir}")
}
```

歴史的経緯により y の方向が逆向きに格納されているのを戻す必要があるのと、タイルデータが gzip 圧縮されているのを戻す必要があるところがポイントです。

## 同期処理で書くことの妥当性
今回のコードは同期処理で書いています。これは、gzip の書き出しは CPU を、ファイルの書き出しはファイルシステムを占有する傾向がある処理なので、非同期にしても遊びを有効利用することが少なく、かえってキューが溜まって輻輳してしまう傾向が見られたからです。

ネットワークからの転送待ちが大きく、コネクションを複数本活用することで複数倍の加速が期待された qdltc と違って、非同期処理にするメリットが少ないと見たので、単純さのために同期処理で書いています。