OmniAICreator/Qiita-1.07M huggingface dataset:
Heroku Changelog 2017

#はじめに
Heroku Advent Calendar 2017 22日目です。年末が近づいてきました。ちょうどいい機会なので2017年、HerokuのChangelogを振り返ってみましょう。

#どれくらいのChangelogがあったか
**276** ありました。みなさん何か印象に残っているものはありますか？
( 05 January 2017: [Apache Kafka 0.10.1.1 Now Available](https://devcenter.heroku.com/changelog-items/1071) - 19 December 2017: [Heroku CI In-Dyno Database Buildpacks Now Generally Available](https://devcenter.heroku.com/changelog-items/1347))

#大きな変更やリリースはどんなものがあったか

全ては挙げられないので2017年にちなんで、17つほど(独断と偏見で)ピックアップしました。時系列に並べていきます。

|公表日|内容|
|---|---|
|24 January| [Heroku Autoscaling now generally available](https://devcenter.heroku.com/changelog-items/1077)|
|21 March| [Automated Certificate Management now included on all apps with paid dynos](https://devcenter.heroku.com/changelog-items/1110)|
|10 April| [Heroku Shield is now generally available for Heroku Enterprise customers](https://devcenter.heroku.com/changelog-items/1111)|
|11 April| [Heroku-16 stack is now generally available](https://devcenter.heroku.com/changelog-items/1126)|
|10 May| [Use Heroku run commands from Dashboard](https://devcenter.heroku.com/changelog-items/1137)|
|18 May| [Heroku CI released to General Availability](https://devcenter.heroku.com/changelog-items/1149)|
|31 May| [DNS Service Discovery for Private Spaces now generally available](https://devcenter.heroku.com/changelog-items/1162)|
|01 June, 16 June| [Heroku CLI v6 in GA for macOS and Linux](https://devcenter.heroku.com/changelog-items/1164) and [for Windows users](https://devcenter.heroku.com/changelog-items/1176)|
|08 June| [Release phase is now generally available](https://devcenter.heroku.com/changelog-items/1140)|
|06 July| [Heroku Connect diagnostic commands](https://devcenter.heroku.com/changelog-items/1187)|
|25 July| [ChatOps now generally available](https://devcenter.heroku.com/changelog-items/1201)|
|22 August| [App webhooks now generally available](https://devcenter.heroku.com/changelog-items/1250)|
|05 September| [Container Registry GA - Deploy Docker images to Heroku](https://devcenter.heroku.com/changelog-items/1255)|
|14 September| [Multi-Tenant Plans for Apache Kafka on Heroku Now Generally Available](https://devcenter.heroku.com/changelog-items/1261)|
|28 September| [Heroku Exec is generally available - connect to a dyno via SSH](https://devcenter.heroku.com/changelog-items/1264)|
|01 November| [Heroku Private Space Peering now generally available](https://devcenter.heroku.com/changelog-items/1315)|
| 14 December | [Heroku PostgreSQL 10 Now Generally Available on Heroku Postgres](https://devcenter.heroku.com/changelog-items/1340) |

興味のある機能はどんどん試してみてください！

#Changelogをどうやって追うか

[Heroku Changelog](https://devcenter.heroku.com/changelog)を定期的に確認
[Heroku Changelog twitter account](https://twitter.com/herokuchangelog)をフォロー
[Feeds](http://feeds.feedburner.com/herokuchangelog)を購読する

# Feedback
Herokuの製品、機能に関するご意見ご感想は、[How can we help?](https://help.heroku.com/search?q=feedback)へ送ると（英語かつHeroku accountでのログインが必要）、Support Teamが受け取り、ひとつひとつ確認しています。皆様からのフィードバックをお待ちしてます。
Editor拡張 - Windowを作ろう

## 導入
Editor拡張で自作のWindowを作る方法について取り上げます

## 作り方
### EditorWindowクラスを派生させたクラスを作る
```
using UnityEngine;
using UnityEditor;
public class MyWindow : EditorWindow {
}
```

これだけで自作のWindowが作成できました。
単純に「EditorWindow」を継承するという事がポイントです。
本当にただそれだけ。

後は、このWindowを開けば良いだけです。

## Windowを開く関数
```
private static MyWindow _myWindow;

public static void Open() {
    if (_myWindow == null) {
        _myWindow = CreateInstance<Example>();
    }
    _myWindow.Show();
}
```

既にInstanceが存在する場合のチェックをしないと、どんどんWindowが増えていってしまうので、ローカル変数にキャッシュしています。

ただ、これらの処理をUnity側で内部的にやってくれる便利関数があるので、基本的にはそちらを使いましょう。

```
public static void Open ()
{
    // 既に EditorWindow が存在すればそのインスタンスを取得する。なければ生成する。最後に Show 関数を実行する。
    GetWindow<MyWindow>();
}
```


## 関数を呼ぶ
関数を呼ぶ方法は色々あります。
自分がよく行う方法は以下の2つ

### 1. Unityのヘッダーメニューに追加する
Windowメニュー内に「My Window」が追加されています。
こちらをクリックするとウインドウが開きます。

<img width="644" alt="696b3cf0-887f-9967-adef-b645317b9a3f.png" src="https://qiita-image-store.s3.amazonaws.com/0/35666/b8cc0f04-466b-a8fa-beea-537da9aad907.png">


### 2. 特定のAssetのInspector上に表示する
特定のデータアセットのInspectorにWindow開くボタンを配置します。
<img width="485" alt="808e6de4-1717-bf4d-c1fd-cd7ffee85d41.png" src="https://qiita-image-store.s3.amazonaws.com/0/35666/eb1de2d7-d4a1-bd2a-7738-ed0123ea8116.png">



## ソースコード

### 1. ヘッダーメニューに追加する
####ソースコード
```
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEditor;

public class MyWindow : EditorWindow {
	[MenuItem("Window/My Window")]
	private static void Open() {
		EditorWindow.GetWindow(typeof(MyWindow));
	}
}
```

####ポイント
```
[MenuItem("Window/My Window")]
```
です。

このAttributeを静的な関数に付与するとUnityのヘッダー内に追加されます。
Unity側のヘッダーメニューから、ボタンを選択すると関数がコールされます。


### 2. 特定のAssetのInspector上に表示する
####ソースコード
```
using UnityEngine;
using UnityEditor;

/// <summary>
/// SampleAssetEditor
/// </summary>
[CustomEditor(typeof(SampleAsset), true)]
public class SampleAssetEditor : Editor
{
	#region unity_script

	/// <summary>
	/// インスペクタ拡張
	/// </summary>
	public override void OnInspectorGUI()
	{
		base.OnInspectorGUI();

		if (GUILayout.Button("Open Editor") && target is SampleAsset) {
			EditorWindow.GetWindow(typeof(MyWindow));
		}
	}

	#endregion
}
```

####ポイント
```
[CustomEditor(typeof(SampleAsset), true)]
```
です。

・Editorクラスを拡張したクラスを作成する
・CustomEditorの中にInspector拡張したいクラスを指定する
・第二引数のtrue, falseは、SampleAssetの継承先にも適当させるかどうかの指定です。

####豆知識
CustomEditorを指定した場合、以下の変数に自動で、指定したクラスのパラメータが格納されています。
・「serializedObject」変数に、そのクラスのSerializedObject
・「target」変数にUnityEngine.Object型で、そのクラスのComponentが格納 (キャストが必要)

これを利用して、OnInspectorGUIではパラメータを変更するのが定石です。
ただし、SerializedObject経由で値の変更を行うとUndoの実装が不要になるので、そちらを利用した変更がオススメです。

また、private変数にもSerializedObject経由ならばアクセスできます。
Editor拡張のためにpublicにする、アクセサを作る事も不要です。
(SerializedFieldが設定されていないと駄目ですが)

## 最後に
Windowは凄く簡単に作れます。
後はそれをどのようにカスタマイズするかだけです。
Editor拡張 - SeriazliedObjectに迫る

Editor拡張 - SeriazliedObjectに迫る

## SerializedObjectとは
・Editor拡張で必須になるオブジェクト (裏を返せば普段の開発では使用しない)
・シリアライズ化されたパラメータにアクセスでき、値の編集が可能
　privateなパラメータにもアクセスでき、値の編集が可能!
・Undo処理が自動で登録される

## シリアライズ化とは
みなさんが良く書いている(と思われる)

```
[SerializeField]
public int _hoge;
```
これです。

具体的には
・public変数であること
または
・[SerializeField]のAttributeを付与している
です。

ただし、Unityがシリアライズ可能な型であること

|型候補|型候補|
|:--|:--|
|sbyte|float|
|short|double|
|int|bool|
|long|char|
|byte|string|
|ushort|UnityEngine.Object|
|uint|Serializable属性を付加したクラスや構造体|
|ulong||
など

・static, const, readonly, abstractクラスはシリアライズ化出来ません。

## インスタンスの作り方
CustomEditorの場合は、特に指定しなくとも、そのオブジェクトのserializedObjectが格納されていることは説明しました。 (Editor拡張 - Windowを作ろう)
それを自分で作ろうとすると次のようにします。

```
var hoge = // Hogeクラスのコンポーネントを取得する
var serializedObject = new SerializedObject(hoge);
```

newして、引数にオブジェクトを入れるだけです。
物凄い簡単ですね。

## 使い方
### 実例
次のようなクラスがあった時にEditor拡張で値を編集したいとします。

```
public class Player : MonoBehaviour
{
	[SerializeFiled]
	private int _id;

	public int _power;
				
	private string _name;
}
```

```
var player = // Playerクラスのコンポーネントを取得
var serializedObject = new SerializedObject(player);
player.FindProperty("_power").intValue = 100;
player.FindProperty("_id").intValue = 1;

```

FindPropertyで「変数名」を入力して、適切な型の値を代入すればOKです。

### 豆知識
ちなみに「_name」プロパティはシリアライズしていないので、アクセスできません。
編集したい場合にどうしますか？

勿論、SerializeField属性を付与します。
ただし、単純に付与すると、Inspector上に表示したくなかったのに、表示されてしまいます。

そういう時は

```
[SerializeField, HideInspector]
private string _name;
```
HideInspectorのAttributeを使用しましょう。

## データの反映について (重要)
### 同期の問題
前節で簡単に値の編集が出来ることが分かりました。
しかしながら、値の編集が同期されることを保証する必要があります。

急に難しいことを言われたような気がしますが、シンプルに考えると、例えば以下の状況で矛盾が発生します。

**1. PlayerデータのInspetor上でSerializedObjectの値を編集している**
**2. 同時にPlayerデータを編集するための、自作のEditorWindowで値を編集している**

SerializedObjectはインスタンス化した時に、そのオブジェクトのデータを格納するため、
自作のWindowを開いた後、Unity標準のInspector上で値を変更し、また自作のWindowに戻った時には古い情報のSerializedObjectのままです。
この時にWindowがそのまま値を保存すると、古いデータで更新されてしまいます。

### 解決策
解決策は凄く簡単です。
「値をいじる前」と「値をいじった後」に必ず、次の関数を呼びましょう。

**1. serializeObject.Update**
**2. serializedObject.ApplyModifiedProperties**

この２種類を下記のように実装するイメージになります。

```
public class NewBehaviourScript : Editor
{
	public override void OnInspectorGUI()
	{
		// 内部キャッシュから最新のデータを取得する
		serializedObject.Update();
		
		EditorGUILayout.PropertyField (serializedObject.FindProperty ("name"));
		
		// その他、様々な処理
		
		// 内部キャッシュに変更点を適用する
		serializedObject.ApplyModifiedProperties();
	}
}
```

## まとめ
SerializeObjectは、Editor拡張で値を変更する際に必須となるオブジェクト。
意外と使用方法はシンプルなので、是非覚えておきましょう。
ioncube初期設定時の注意点

基本的にはloader-wizard.phpの指示通りに設定をすればOK
自分が設定する際にはまってしまったのでいくつか注意点を挙げておく

１．指定されたプログラムを読み込む時には必ず外部ファイルで読み込む。php.iniに直接書いてはいけない。一応php.iniに書いても読みこめているが、暗号化したプログラム自体が動かなくなるので、必ず外部ファイルで読み込む。

２．プログラムの読み込みは必ず他のzend_extenstionよりも先に行う。xdebugなどzend_extenstionの機能を使うときにはそれらの設定ファイルよりも前に読み込む必要がある。

３．暗号化したプログラムファイルに直接記述してはいけない。自分は当初画面が真っ白になったときにエラー表示を出力させようとして、	プログラム先頭にini_set( 'display_errors', 1 );と書き込んでいたが、このようなことはしてはいけない
Rubyで画像を無限収集する


##はじめに
機械学習の教師データを集めるため大量の画像が必要だったので、Rubyでプログラムをかきました。
今回はsleniumを使いました。理由は画像検索結果の新規読み込みで動的なスクロールが必要になるからです。

また、今回初めて Google画像検索よりBingの方が、精度のいい画像がでてくることに気づきまして(個人の感覚かもしれません)、Bing画像検索でレッツゴーです。

(本来ならAPIを使うべきですが、Googleは制限が多い、BingAPIは使うまでのUIが変わってて使いづらかった、という経緯により、このような対応をとりました。サーバー負荷を忘れず必ずおとなしくやりましょう。自己責任でお願いします。)

##手順
1.必要なライブラリを入れる
2.画像の保存先フォルダを作成
3.コードを書く
4.Run

##1.必要なライブラリを入れる
ターミナルで

```
brew install chromedriver

gem install open_uri_redirections
```
....等々(以下のrequireを参照して下さい)

##2.画像の保存先フォルダを作成
プログラムコードと同じ階層に任意フォルダを作る(ここではsakuramana_imgとしました)

#3.コードを書く

```ruby:infinite_crawl.rb

require 'selenium-webdriver'
require 'nokogiri'
require 'open-uri'
require 'addressable/uri'
require 'kconv'
require "uri"
require 'open_uri_redirections'

#文字対応増やすためStringクラスを拡張
class String  
 def sjisable  
  str = self  
  str = str.exchange("U+301C", "U+FF5E") # wave-dash  
  str = str.exchange("U+2212", "U+FF0D") # full-width minus  
  str = str.exchange("U+2013", "U+FF0D") # full-width minus  
  str = str.exchange("U+00A2", "U+FFE0") # cent as currency  
  str = str.exchange("U+00A3", "U+FFE1") # lb(pound) as currency  
  str = str.exchange("U+00AC", "U+FFE2") # not in boolean algebra  
  str = str.exchange("U+2014", "U+2015") # hyphen  
  str = str.exchange("U+2016", "U+2225") # double vertical lines  
 end  

 def exchange(before_str,after_str)  
  self.gsub( before_str.to_code.chr('UTF-8'),after_str.to_code.chr('UTF-8') )  
 end  

 def to_code  
  return $1.to_i(16) if self =~ /U\+(\w+)/  
  raise ArgumentError, "Invalid argument: #{self}"  
 end  
end  

def get_image
 driver = Selenium::WebDriver.for :chrome
 #q=の後に日本語でキーワード入れて下さい
 driver.navigate.to 'https://www.bing.com/images/search?q=さくらまな'

 10.times do
  driver.find_elements(:class,'iusc').last.location_once_scrolled_into_view
  current_count = driver.find_elements(:class, 'iusc').length
  until current_count < driver.find_elements(:class, 'iusc').length
   sleep(3)
  end
  sleep(5)
 end

 elements = driver.find_elements(:class, 'iusc')
 ary = []
 elements.each do |element| 
  ary << element.attribute('m').scan(/","murl\":"(.+)","turl":/)
 end
 
 @ary = []
 ary.flatten!
 ary.each do |img|
  if /\.(jpg|png)$/ =~ img.to_s 
   @ary << URI.escape(img.to_s.force_encoding('utf-8').sjisable.encode('UTF-8'))
  end
 end
 @ary.flatten!
 #ファイルの書き出しを行う
 @ary.each_with_index do |url,i|
  #ファイル名を決定
  begin
   if /\.(jpg)$/ =~ url 
    filename = "sakuramana#{i}.jpg"
   else 
    filename = "sakuramana#{i}.png"
   end

   #ファイルを保存するフォルダ名を指定
   p filename
   dirname = "./sakuramana_img/*" + filename
   open(dirname, 'wb') do |file|
    open(url.encode("utf-8", invalid: :replace, undef: :replace), :allow_redirections => :safe) do |data|
     sleep(1)
     file.write(data.read)
    end
   end
  rescue
   puts "とばしました"
  end
 end
end
get_image

```

##4.Run
ターミナルで 
``` ruby infinite_crawl.rb 
```
(ファイル名は適宜合わせてください)

とすると、勝手にクロムが立ち上がり、先ほど指定したフォルダに画像が自動で保存されていくはずです。

尚、10.times do の数字をいじれば30件毎に画像の取得件数が増減します。

##おわりに


ということで、以上になります。

エラーでたらそれはきっとsleniumドライバーのあれかBingの仕様変更です。
前者であればたくさんでてくるのでググってみて下さい。
 

だれかのためになれば幸いです。

それでは〜！
IE8でBootstrap3をhtml5shiv.jsとrespond.jsを使って動かす

# こういう方向け

* Bootstrap3を使う環境でIE8を同時に動かす使うことを強いられた人
* html5shiv.jsとrespond.jsを入れたけど上手く動かなかった人


# そもそも素の状態でIE8にBootstrap3って動くの？

**動きません**

IE8の場合、html5のタグが無視されるのと、media queryが無効にされるのが原因です。

* html5shiv.js
* respond.js

そのため、これらのJSを読みこませることが回避方法としてよくある手法。

```
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
```

「いやー動かないんだけど」って言う人はCSSとJSの読み込み順を確認してください。順序が間違っていると動きません。

他にもRespond.jsに制約が結構あり、

* 404等で読み込めないCSSがあると問答無用で動作しない。
* Respond.jsが`@import`で読み込まれているCSSを解釈できない。
    * そもそもパフォーマンス的にイケてないのでやったらおこ。
* BOM付きのUTF-8は動かないのでNG
* ブラウザによってはローカルのCSSも解釈できない。よく調べてないので知らない。
* link要素のmedia属性によるメディアクエリ指定はOK。ただし、それによって読み込まれるCSS内にメディアクエリが含まれていると読めないのでNG。

など。

そもそもIE8が動作しなければならない環境でBootstrap3を使うというのがツラミにあふれているので、極力避けたい。

IE8での動作保証を強いられた全ての人に幸あれ…。
Angularのテスト(ng test)で「このテストだけやりたい！/やりたくない！」を除外する




`ng test` はとても便利ですが、「今はこのテストケースだけ実行したいのに！」ということや、逆に、「このテストケースはうまく動かないけどしばらく無視しておきたいのに！」ということがあります。

その辺の機能が用意されています！
まぁAngularというかJasmineの機能なんですけど…。


### このテストだけ実行

`describe` そして `it` の代わりに
`fdescribe` そして `fit` を使います。

"f" は "focused" の意味です。


[focused_specs.js](https://jasmine.github.io/2.1/focused_specs.html)


### コード例

```

fdescribe(() => {
  // このテストスイートだけを実行
  fit(() => {
    // このテストケースだけを実行
  });
  
  it(() => {
    // このテストケースは(特記ないので)スキップ
  });
});

```


### このテストだだけは実行しない

`describe` そして `it` の代わりに
`xdescribe` そして `xit` を使います。

"x" の意味は・・・わかりません。 "exclude:除外する"なのかな？

[Disabling Suites/Pending Specs](https://jasmine.github.io/2.0/introduction.html#section-Disabling_Suites)



## おまけ: mochaの場合
angular環境でmochaを使うことは多くないかもしれませんが、参考までに。

```

describe.only(function () {
	// このテストスイートだけを実行
  
	it.only(function () {
	  // このテストのみ実行
	});
	
	it(function () {
	  // このテストは(特記ないので)スキップ
	});
});

```


```

describe.skip(function () {
	// このテストスイートはスキップ
  
	it(function () {
	  // このテストは(当然)スキップ
	});
	
	it.only(function () {
	  // only記述しても、テストスイートがスキップされてるので意味なし。スキップ
	});
	
});

describe(function () {
	// このテストスイートは実行
  
	it(function () {
	  // このテストは(特記ないので)実行
	});
	
	it.skip(function () {
	  // このテストはスキップ
	});
	
});

```
VMWare ESXi 6.5をUpdate 1へアップデートする 

VMWare ESXi 6.5をUpdate 1へアップデートする 


```
# esxcli software sources profile list -d /vmfs/volumes/datastore/update-from-esxi6.5-6.5_update01.zip
Name                              Vendor        Acceptance Level
--------------------------------  ------------  ----------------
ESXi-6.5.0-20170701001s-no-tools  VMware, Inc.  PartnerSupported
ESXi-6.5.0-20170702001-standard   VMware, Inc.  PartnerSupported
ESXi-6.5.0-20170701001s-standard  VMware, Inc.  PartnerSupported
ESXi-6.5.0-20170702001-no-tools   VMware, Inc.  PartnerSupported

# esxcli software profile update -p ESXi-6.5.0-20170702001-standard -d /vmfs/volumes/datastore/update-from-esxi6.5-6.5_update01.zip
Update Result
   Message: The update completed successfully, but the system needs to be rebooted for the changes to be effective.
   Reboot Required: true
   VIBs Installed: VMW_bootbank_ehci-ehci-hcd_1.0-4vmw.650.0.14.5146846, ...(snip)..., VMware_locker_tools-light_6.5.0-0.23.5969300
   VIBs Removed: VMW_bootbank_ehci-ehci-hcd_1.0-3vmw.650.0.0.4564106, ...(snip)..., VMware_locker_tools-light_6.5.0-0.0.4564106
   VIBs Skipped: VMW_bootbank_ata-libata-92_3.00.9.2-16vmw.650.0.0.4564106, ...(snip)..., VMware_bootbank_rste_2.0.2.0088-4vmw.650.0.0.4564106
```
FirebaseでSPAを最速でリリースする

この記事はCPS Lab Advent Calendarの12日目です。

最近DJのために懐かしいアニメの曲を探すのにハマっているスポーンです。
アニマル横町のOPとポケモンの「バトルフロンティア」を見つけて膝から崩れ落ちました。

今日はGoogleが提供しているFirebaseの紹介をしたいと思います。
Firebaseの機能を使えばアプリケーション開発で必要なデータベースから`https`を使ったホスティングまで一貫して同一プラットフォーム上で行うことができ、デプロイまでの時間を短縮できます。
値段も基本無料で使えるため、プロトタイピングには最適だと思います。

## Realtime Database
[オッパブ](https://o-pub-8cbcf.firebaseapp.com)

作ったのはだいぶ前なのでコードが拙いのですが、このアプリケーションのDBにはRealtime Database(以下RTDB)を使っています。
RTDBはキーバリューストアとしてデータを登録できるNoSQLデータベースです。最大の特徴は名前にもあるようにリアルタイムに値を同期することができます。

シングルページアプリケーションのようなページ遷移をしないものには有効に使えて、チャットアプリなどの構築がすぐに行なえます。
オッパブではオッなURLとオッポイントを同期しているので、他の人が更新すると自分のページがロードせずとも更新されるようになっています。

## Hosting
プロジェクトごとにユニークなURLが割り当てられてサイトをホスティングする機能があります。
`https`通信にデフォルトで対応しているので、めんどうな設定をしなくてもすぐに使うことができます。
[firebase-tools](https://github.com/firebase/firebase-tools)というCLIを使えばホスティング時の設定なども簡単に行えてデプロイまでできるので、TravisCIなどのCIサービスと組み合わせてmasterブランチの変更をフックしてリリースが簡単にできます。

もちろん独自ドメインも簡単に接続できるので、SPAにかぎらず普通の静的ページのホスティングにもオススメできます。
ちなみに[otintin.com](https://otintin.com)もこちらでホスティングしています。

## 所感
簡単ではありますが、SPAを最速でリリースするためのFirebaseのサービスを紹介しました。

ただ、RTDBは気をつけないと治安の無いカオスJSONになったり、一覧を取得したときに子ノード全てを取得してしまうので、ネストを浅くしないといけないなど色々と悩ましい部分もあります。
これは最近ベータ版がリリースされた、[Google Firestore](https://cloud.google.com/firestore/docs/)というGCEのサービスを使うと解決できそうなので、中規模以上のアプリケーションを使う時やクエリを使いたいときなどに導入してみようと思います
どっと沸く？DOTween

どうも。またまた専門学校界の旅キチ(自称)です。

今回は、unityでアニメーションを扱う上で革命的なアセットである、
**DOTween**を紹介したいと思います。

#DOTweenとは
DOTweenとは、unityでのアニメーションをサポートしてくれるアセットである。
従来、オブジェクトのアニメーションを行うには、毎フレーム実行される関数の中で、経過時間と連動させて行うというのが一般的であった。

例えば、あるオブジェクトを1秒掛けてX方向に座標値にして10移動したい場合があったとする。
従来では、このように記述された。

```
/* このスクリプトは動かすオブジェクトにアタッチされているとする */
int count = 0;
void update()
{
	// unityは毎秒30フレームで動作している
	if(count < 30)
	{
		Vector3 pos = transform.localposition;
		
		// Time.deltaTimeには前フレームからの経過時間が格納されている
		pos.x += 10.0f * Time.deltaTime;
		transform.localposition = pos;
		count++;
	}
}
```

このように、オブジェクトと動かすために、経過時間等も管理する必要があった。
何より、移動が終われば用が無いにも関わらず毎フレームupdate関数が呼ばれるのも無駄が多い。

これを解決してくれるのがDOTweenである。
DOTweenを利用して先ほどの処理を記述すると、このようになる。

```
using DG.Tweening;

// この関数はアニメーションを実行する際に1回だけ呼ばれればいい
public void Trigger()
{
	transform.DOLocalMove(new Vector3(10, 0, 0), 1.0f);
}
```

…たったの1行？そう、たったの1行である。
DOTweenならば内部で時間管理も自動的に行ってくれるので、こちら側で指定するのは、基本的に
transform.DO~~~(**変更後のパラメータ**, **アニメーション時間**);
という指定だけでよい。

この他にも便利なものは多数あるが、そちらの紹介は既に多数紹介されている方々に任せる。

最後に、こちらのDOTweenのダウンロードはこちら。
https://www.assetstore.unity3d.com/jp/#!/content/27676

アセットの活用で、良いunityライフを。
N予備校生がN予備校のプログラミングコースでよく見るアレ作ってみた！

#　はじめに
そろそろN予備校に入って１年（2017年の1月くらいに入った）になりそうなので、ここに記録的なものを残します。N予備校に入って１年くらいで、それなりに勉強すればこれくらいはできるようになるよという指標にでもしてください。非対面の学習であるからこそ、同じN予備校生が普段何やっているか見えないのでここに書いてみました。

> [N予備校プログラミングコース](https://www.nnn.ed.nico/pages/programming/)勉強中の社会人です。
名前はゲームアカウント名の流用でMonoと名乗ってます。
お仕事ではPCを使うより、工具を使う頻度の方が多い人です。
学生時代はCなるものを習ったような気がしますが、やはり記憶にございません。
光の戦士Monoという名前で夏のwebアプリコンテストとか参加してみました。
[リンク先：N高 動くWebページコンテスト 2017年度 夏](https://progedu.github.io/web-contests/move-webcontest2017-summer/results/)

#　N予備校プログラミングコースでよく見るアレについて
| ![「alt:できたかどうかアンケートツール（仮称）」](https://qiita-image-store.s3.amazonaws.com/0/222072/a22e6c95-9987-6705-d2a9-35aac288461e.png) |
|:--:|
| アレ：できたかどうかアンケート（仮称）|

本題に入ります。
プログラミングコースを受講している方はご存知かと思いますが、プログラミングコースの生放送を視聴している人に、できたかどうかのアンケートを出すための先生側が使っているツールのことです。昔はメモ帳だった気がします。

正式名称を知りませんので、このツール名を「できたかどうかアンケート」と仮称します。この「できたかどうかアンケート」をN予備校で１年程度勉強した知識を使って実装していきます。

## 「できたかどうかアンケート（仮称）」に必要な機能
- 先生側が聞きたいアンケート内容のQ. 部分の文章は、書き換えることが可能であること。
 - 入力フォームであるtextareaタグ、またはinputタグtype="text"を使用する。
- ブラウザを閉じて、再度開いても内容が保存されるされること。
 - localStrageという機能を使えばどうやら保存が可能らしい。

以上の２点を踏まえて機能を実装していきます。
書き出して見ると意外とシンプルな機能でした。

## 機能の実装
入力フォームは改行することができるtextareaタグを採用しました。inputタグでは入力が１行のため不採用。

```index.html
<textarea id="title" name="textarea"> Q. 練習問題できましたか？ </textarea>
```
次の保存機能の実装ではjQuery３.1.1を使用しています。先ほど定義したtextareaのid="title"をkey値として以下のように実装しました。localStorageの内容については[リンク１](http://www.htmq.com/webstorage/)と[リンク２](http://webliker.info/how-to-use-localstrage/)を参考にして実装しています。
ローカルストレージ(localstrage)とクッキー(Cookie)の違いですけど、保存できるデータ容量や保存期間が違うようでlocalstrageが半永久に保存できるし容量も良いのでlocalstorageで作成しました。

| code     |     意味   |
|:-----------------|:------------------|
| getItem(key)       |keyに対応するvalueを取得する |
| setItem(key, value)|keyとvalueのペアでデータを保存する|
| removeItem(key)|keyに対応するvalueを削除する|


```main.js
    $(function () {
      if (localStorage.getItem('title')) {
        $('#title').val(localStorage.getItem('title'));
      }
      $('#clear').click(function () {
        $('#title').val(' Q. 練習問題できましたか？');
        localStorage.removeItem('title');
      });
      $('#title').bind('keyup', function () {
        localStorage.setItem('title', $('#title').val());
      });
    });
```

## 見た目の実装について
すでに存在しているツールなので、過去の放送をキャプチャーして、気合いで同じようにデザインしています。冬バージョン用のアニメーションも追加しました。

## 完成品はこちら
|![スクリーンショット 2017-12-11 10.51.09.png](https://qiita-image-store.s3.amazonaws.com/0/222072/73904d2e-7bae-64a7-46f4-fc24779ff41c.png)|
|:--:|
|自由に遊んでください→[DEMO_PAGE](https://mono-alex.github.io/N_questionnaire_survey/)|
|[ソースコード](https://github.com/Mono-Alex/N_questionnaire_survey)|

# 最後に実装して思ったこと
最後にポエム的な何かを書きます。
独学で我流でもとりあえず動けばいいとか思っていた頃が自分にもありましたが、それでも基礎というのは大事で、どうしても世の中的には当たり前だけれど、今までそういったコミュニティにいなかったために損をしてしまう。つまり、学習コストが高いまま続けていくと大変ですよねという話です。なので、N予備校の生放送で行っているITニュースとか知らないことばかりで結構勉強になります。今回作成したツールについても生放送授業でコメントで流れたidやlocalstrageとかの話題があったからこそできたようなものなので、こういったネットコミュニティを大事にするところが他の学習コンテンツサービスの違いなのかなと感じています。

技術的なことは全然書いてないね。ごめんねQiitaさん:relaxed:
2017年12月版「An error occurred uploading to the iTunes Store.」の対応

私の管理しているアプリが突然以下のエラーでiTuneConnectにアップロードできなくなりました。

環境はXcode9.2, Mac OS High Sierra 10.13.2

>*itunes store operation failed*
>An error occurred uploading to the iTunes Store.
<img width="365" alt="スクリーンショット 2017-12-11 1.10.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/111366/e3984dae-75a0-06ea-e8bd-c934bdbd51df.png">

ググってみるとjavaのverがどうこうと出ましたが、古い内容が多く試しても治りませんでした。

## 治った方法がこちら

ターミナルを開いて以下を実行。

```
cd ~
mv .itmstransporter/ .old_itmstransporter/
```
https://stackoverflow.com/a/47702851

同じバイナリでオーガナイザーからアップロードを試したところ、成功しました。

（理由はわかってないです）
SORACOM Car

もともと[SORACOM Advent Calendar 2017](https://qiita.com/advent-calendar/2017/soracom)用にと思っていたネタです。
12/10 の代打で投下しておきます！

# SORACOM で コネクテッドカーを作りたい
SORACOM の事例にもよく出てくる車の IoT 事例。自分も試したいと前から思っていたので、今回はネットへの接続とスマートスピーカーの接続を試してみました。

# 使った物
- [ピクセラ PIX-MT100](https://www.amazon.co.jp/dp/B01DEZXGYO/) // USBに刺しただけで、WiFiルータになるドングル
- [SORACMO Air SIM](https://soracom.jp/services/air/) // MicroサイズまたはSIMサイズ変換アダプタで
- [ELECOM カーチャージャー](https://www.amazon.co.jp/dp/B07781CS6H/) // 2.4A x 2 出力できるので安定感ある
- [Amazon Echo Dot](https://www.amazon.co.jp/dp/B072B5BTLK/) // なかなか招待来なくて困った
- [音声ケーブル](https://www.amazon.co.jp/gp/product/B00LM0U8I6/) // カーオーディオへのBluetooth接続がなぜかうまくいかず、アナログでの接続に...

![構成図](https://cacoo.com/diagrams/yQIB67g6D8EsEQE1.png)

![接続したところ](https://qiita-image-store.s3.amazonaws.com/0/30051/49c1c0da-9e51-3907-08d7-8c755abc2fed.jpeg)
もう少し配線綺麗にしたい...

Echo Dot の招待がなかなか来ないので、Google Home Mini も試しましたが、音声外部出力が面倒なのと、電源が足りなくてよく落ちたので、諦め。

# 動作の様子
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://twitter.com/j3tm0t0api?ref_src=twsrc%5Etfw">@j3tm0t0api</a> Echo Dot 車載してみた <a href="https://t.co/2qM3uuLepV">pic.twitter.com/2qM3uuLepV</a></p>&mdash; moto (@j3tm0t0) <a href="https://twitter.com/j3tm0t0/status/940058625015291904?ref_src=twsrc%5Etfw">2017年12月11日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

運転中にハンズフリーで音楽再生できたり、ラジオかけたり出来るので、とても重宝しています。

# この後
ここまで動いてしまえば、後は安価なESP8266やESP32などのWiFi付きモジュール[^1]が使えるので、[ODB-IIからデータ拾って可視化](https://hackaday.io/project/8438-ouobd2-esp8266obd-ii)とかも出来そうな気がします！

[^1]: Raspberry Pi などを使おうとすると、エンジン切った時に急に電源が落ちたりとかする場合の対策をしないといけないので、ブチ切りできるモジュールの方が向いている
《JavaScript》React.js初学者のための、3分で読めるJSXの記法の基本。

JSXはReact.jsを扱う上でかならず必要ではないですが、コードの見通しが良くなるので、多くのプロジェクトで採用されています。
JSX記法のルールには、つまづきやすい独特なポイントがあるので、React.js 初学者はコードの読み書きをする前に、頭に入れておいた方がいいポイントをまとめました🍟



## JavaScriptの式を書く
JSXの中で、JavaScriptの式(JSX内の動的な値)を書くには、 `{}` で囲います。


### 条件分岐 (三項演算子)
if文で記述することも可能ですが、三項演算子の式を `{}` で囲んでやると、簡潔に記述できます。

```js
render() {
  return (
    <div id="app">
　    { (nami) ? 'sanji' : null }
    </div>
  )
}
```


### コメント
`{}` で囲んで、複数行コメント`/* ... */`を書きます。

```js
render() {
  return (
    { /* this is comment */ }
    <div id="app">
　    { (nami) ? 'sanji' : null }
    </div>
  )
}
```


### ループ
ループでは、要素ごとにユニークな `key=''` という `props` を与えます。これは、React.jsが差分を反映するのに目印になります。配列のインデックスを与えていますが、重複しないように(あとから配列の操作があるときなど)気をつけます。コンポーネントの階層が違えば、同じkeyを使えます。

```js
render() {
  const member = ['ruffy', 'zoro', 'nami'];
  return (
    <ul>
      { member.map((el, i) => {
        return <li key={i}>{el}</li>
      }) }
    </ul>
  );
}
```


### 数値や真偽値を渡す
数値や真偽値を渡す場合は、文字列として評価されないように、 `{}` で囲います。
 
```js
render() {
  return <button isloading={true} number={1}>button</button>;
}
```



## HTMLとの違い
JSX記法ではHTMLを直接記述できるように見えますが、押さえておかないといけないポイントがいくつかあり、それをわかっていないとハマリどころになってしまうことも多いです。


### CSSのクラス属性
CSSのクラス名の指定に `class` が使えません。`class` はJavaScriptで予約語なので、JSXでは  `className` と記述します。

```js
render() {
  return (
    <button
      className={`
        c-button
        ${ (loading) ? 'is-loading' : '' }
      `}
    >
      Button
    </button>
  );
}
```

ちなみにfor属性も、JavaScriptのfor文との衝突を避けるためhtmlForとする必要があります。


### 要素を閉じる
JSXではXHTMLみたいに、要素をかならず閉じます。少しHTML5とは異なる記述なので違和感がありますね。

```js
render() {
  return <input type="text" />;
}
```

`<br />` なども当てはまりますが、具体的な要素についての詳細は、[DOM Elements - React](https://facebook.github.io/react/docs/tags-and-attributes.html) に書いてあります。


### 属性値はキャメルケース
2語以上でできた属性値の名前は、tabIndexというようにキャメルケースで記述する必要があります。`onClick` とかややこしいですね。

```js
render() {
  return <input type="text" tabIndex="1" onClick='{clickFunc}' />;
}
```

ただし、`aria-*`  `data-*` 属性に関してはそのまま記述することができます。詳細は[DOM Elements - React](https://facebook.github.io/react/docs/tags-and-attributes.html#html-attributes)にまとまっています。


### 属性値をまとめて与える
オブジェクトを定義して、スプレッド演算子 `...` を使うことで簡潔に記述できます。

```js
let attr = {
  href: 'https://example.com',
  target: '_blank'
};

return <a {...attr}>Home</a>;

```


### インラインスタイルはオブジェクトに
`style` 属性は、セミコロンで区切って列挙するのではなく、オブジェクトを与えます。そして、CSSのプロパティはキャメルケースで記述します。

```js
let styles = {
  fontSize: '2rem',
  fontWeight: 'bold',
};

return <strong {styles}></strong>;
```












おわります。
デザイナーで開いているフローをまとめて閉じる方法

# はじめに
デザイナーでフローを開いていくとワークスペースにフローが開かれタブがいっぱい増えていきます。
表示しきれなくなって見えなくなってしまうのでデザイナーの操作でいっぺんにまとめて閉じる方法について確認しました。

# 環境
- OS:Windows Server 2012 R2
- ASTERIA WARP:1703
- Java:1.8.0_121

# デザイナー操作
1. ワークスペースのタブ上で右クリック
![デザイナーフローclose01.png](https://qiita-image-store.s3.amazonaws.com/0/180292/d3b4413d-3f5d-27d8-d690-2ebf11cb63f5.png)

2. 表示される項目から[その他を閉じる]をクリック
![デザイナーフローclose02.png](https://qiita-image-store.s3.amazonaws.com/0/180292/824042d0-d7ae-f362-058e-3915d7357834.png)

3. 現在開いているフロー以外は閉じられ、タブもすっきりしました
![デザイナーフローclose03.png](https://qiita-image-store.s3.amazonaws.com/0/180292/971cbe3c-eef2-328a-9d2f-98a76cd34159.png)

# 終わりに
タブ上を右クリックするときはフロー名が表示されている部分で行う必要があるようです。
右クリックメニューには他にもいろいろあるので試してみるとデザイナーの使い勝手がよくなるかもしれません。
チームで行うReact Componentの設計

こんにちは。DMM.comでフロントエンド開発を行っている@ma9toです。
DMMでは各プロダクト毎でフロントエンドの技術選定が違いますが、私が担当しているしているプロダクトでは、一部Reactを採用しています。

この記事では、ReactのComponentの設計をチームで行ったときの反省と、次はどのように行うと良さそうか、現時点で思うところをまとめておこうと思います。

## Componentとは
まず、Componentとはどういうものか振り返っておきたいと思います。
Componentとは、UIを構成する一部分と考えることができます。
ReactはComponentを組み合わせることので、より複雑なUIを構築していくようなComponentベースのViewライブラリです。
Reactを利用することで、Componentのコードのカプセル化を容易にし、独立したComponentの実装を可能にしてしてくれます。

## Atomic DesignでComponentを整理する
チームでComponentを作成する場合、Componentの粒度や構成を予め明確にし、言語化しておくことで、メンバーが共通認識を持ち、結果Componentが整理されることで、保守性が良くなります。

私の所属チームはAtomic Designを採用しましたが、目的は設計指針を明確にして、整理されたComponentにすることです。
私はAtomic Designが最適解だとは思っていませんが、Component設計の指針にするには利用しやすい原理だと思っています。

||構成|定義方法|state|再利用性|
|:--|:--|:--|:--|:--|
|__Atoms__|それ以上に分解ができない|Functional Component|もたない|高
|__Molecules__|AtomsとAtomsの組み合わせ|Functional Component|もたない|中
|__Organisms__|MoleculesとMoleculesまたは、Moleculesとatomsの組み合わせ|Class Component|もつ|低またはない
|__Templates__|Organismsの組み合わせ|Class Component|もつ|ない

ただ、今回失敗したのは、AtomsとMoleculesの検討を十分に行えなかったことです。
再利用性の高いComponentとしてAtomsやMoleculesを用意しておきたかったのですが、UIデザインがある程度固まった状態でのComponentの定義だったため、再利用性が低いComponentの数が想定していたよりも多くなってしまいました。

## Componentの定義をチームで行う
Component設計の指針は明確になりましたが、Componentの定義はその定義者のスキルセットや情報の格差などによって、少なからず定義者の偏見が入る余地があります。そういった偏見を排除するためにチームで行うことによってより洗練されたComponent定義ができると思います。

私の所属チームではデザインカンプを印刷し、チームで話し合いながらComponentをハサミで切り抜き、グループわけをしてComponentに付箋で名前をつけていきました。


![Component2.png](https://qiita-image-store.s3.amazonaws.com/0/25986/c4dc6b4d-cb52-df4d-76ae-9f22f83caa33.png)

デザイナーとフロントエンドエンジニアで行って、ワイワイ楽しい感じでできました。
このときは、できなかったのですが、アプリケーション全体の設計をフロントエンドから行う場合であれば、この時点でサーバーサイドエンジニアを含めて、チームでComponentのStateを洗い出し、Component間のやりとりを明確にすることで、API設計やComponentの実装が行いやすくなると思います。

## まとめ
一人の開発者がデザインを含めたアプリケーション全体を見渡して、開発する場合は別として、大抵はチームで開発を進めます。
設計の指針を明確にし、チームを巻き込んで行うことで、よりよいComponentの設計ができるのではいかと思っています。

明日は@sasakipochiさんです。お楽しみに〜。
Wio LTE をセットアップした

## はじめに

ただのログです。

## Wio LTE とは

[wiki](https://github.com/SeeedJP/WioLTEforArduino/wiki/Home-ja)ページを参照。
「わいおーえるてぃーいー」と発音するそうです。


## 購入

[Seeed Wio LTE ユーザーイベント](https://soracom.connpass.com/event/68427/
) で衝動買いしました。
SORACOM SIM と Grove センサーは持っているので、本体のみ。


## PCに接続

同梱のMicroUSBケーブルで接続するとドライバがインストールされます。(Windows10 1709)

Arduino IDE を起動してボード情報を参照すると以下のように。
ボードが認識されていません。

![2017-12-11_11h59_17.png](https://qiita-image-store.s3.amazonaws.com/0/64309/b7285bc4-e837-21b9-8789-b24c3e15701d.png)

[ドキュメント](https://github.com/SeeedJP/WioLTEforArduino/wiki/AddWioLTEBoard-ja)に従って、ボードの追加を行います。

「環境設定」から追加のボードマネージャのURLに https://raw.githubusercontent.com/Seeed-Studio/Seeed_Platform/master/package_seeeduino_boards_index.json を入力。
![2017-12-11_12h14_01.png](https://qiita-image-store.s3.amazonaws.com/0/64309/48295497-2dc5-a3d4-5f6a-9064888f2fde.png)

「ボードマネージャ」から Seeed STM32F4 Boards by Seeed Studio をインストール。
![2017-12-11_12h17_37.png](https://qiita-image-store.s3.amazonaws.com/0/64309/61cc860b-3690-5b1c-6842-b3bca7a69567.png)

84MBもあって、なかなかのボリューム。
![2017-12-11_12h21_47.png](https://qiita-image-store.s3.amazonaws.com/0/64309/e569da8a-b447-3926-ad21-118b5b38cb4c.png)

インストールが終わると、ボードの選択肢に Wio Tracker LTE が追加されます。
![2017-12-11_12h27_13.png](https://qiita-image-store.s3.amazonaws.com/0/64309/8b5d6761-4ae9-aeb4-a545-821b0443fc5f.png)

それでもボード情報は「不明なボード」のままですが、気にせず次はライブラリを追加します。
「ライブラリマネージャ」から Wio LTE for Android by Seeed K.K. をインストール。
![2017-12-11_12h32_01.png](https://qiita-image-store.s3.amazonaws.com/0/64309/3f8079e2-53f1-5473-a363-9e8f132373e4.png)

「スケッチ例」に Wio LTE for Android が追加されます。

ためしに LedSetRGB スケッチを開いてボードに書き込む。
![2017-12-11_12h52_25.png](https://qiita-image-store.s3.amazonaws.com/0/64309/b31956e4-0afe-aad0-be05-3e60b3ae600e.png)

失敗。
デバイスマネージャを見ると、デバイスが認識されていない模様。「その他のデバイス」にもない。
![2017-12-11_12h55_08.png](https://qiita-image-store.s3.amazonaws.com/0/64309/f535f977-eaee-3bf6-1836-1287770961f1.png)


一旦ケーブルを抜いて、BOOTボタンを押しながら再度接続（つまり、DFUモード）。
![2017-12-11_12h57_30.png](https://qiita-image-store.s3.amazonaws.com/0/64309/1d6ab235-0f8b-f86c-38ec-eae16fffff79.png)

「ユニバーサルシリアルバスコントローラー」配下に表示されているので、[WinUSBデバイスドライバーに切り替え](https://github.com/SeeedJP/WioLTEforArduino/wiki/ReplaceDriver-ja)を行う。

![2017-12-11_13h14_58.png](https://qiita-image-store.s3.amazonaws.com/0/64309/a98f0e79-fc7f-d5d7-0816-c98fa7fd3703.png)

「ユニバーサルシリアルバスデバイス」配下になった！


## スケッチの実行

再度 LedSetRGB の書き込み。
![2017-12-11_13h20_50.png](https://qiita-image-store.s3.amazonaws.com/0/64309/16144f8e-c781-3cc3-2b0c-ec13e1448927.png)
正常終了した！　感じのメッセージ。

RSTボタンで通常モードに切り替えると、LEDが点灯した！

これでセットアップは完了。


## 参考
- https://github.com/SeeedJP/WioLTEforArduino
独自設定ファイルは不要。ParcelでコンパイルするSassとAutoprefixer

この記事は大幅に加筆・修正して「[Sassのモダンなコンパイル環境が3分で作れるParcel入門独自設定ファイルは不要 \- ICS MEDIA](https://ics.media/entry/19580)」に引っ越しました。


[![](https://qiita-image-store.s3.amazonaws.com/0/67884/25074f92-85f4-61ec-4856-581d9a13e2c9.png)](https://ics.media/entry/19580)

※ Google検索で辿り着いた方にリンク切れとなっては申し訳ないので、元の記事を残しています。ご了承ください。
nodebrew から ndenvに切り替えたメモ(OSX)

nodebrew は `.node-version`を参照してバージョンを自動で切り替える機能が無いので、
ndenvを切り替えました。

## メリット

`direnv`でnodebrewが入っている場合は、特定のバージョンを使うように強制
しても良かったのですが

- `.node-version`を指定しておくと勝手にそのバージョンを使用
- `anyenv`で管理可能
- `anyenv`を使っていなくてもI/F自体はほぼ`rbenv`と同様

というメリットが合ったので変更しました

## ndenvのインストール

```
brew install ndenv
echo 'export PATH="${HOME}/.ndenv/bin:${PATH}"' >> <your rc file>
echo 'eval "$(ndenv init -)" >> <your rc file>
exec $SHELL -l
```

## node-buildのインストール
> I recommend using node-build for installing node itself. See also node-build.
とあるので `node-build`もインストールします

```
git clone https://github.com/riywo/node-build.git $(ndenv root)/plugins/node-build
```

※`$(NDENV_ROOT)/plugins/*/bin`配下にインストールする必要があります。([こちら](https://github.com/riywo/ndenv/blob/master/libexec/ndenv#L62-L64))
homebrewでインストールしてsymlink貼っても良さそうですが、とりあえず簡単な `git clone`で

## nodebrew環境のアンインストール
### パスの削除
rcファイルに↓があるはずなので削除します

```
export PATH=$HOME/.nodebrew/current/bin:$PATH
export PATH=$HOME/.nodebrew/current/bin/npm:$PATH
```

### nodebrew関連の削除
- `brew uninstall nodebrew` で`nodebrew`を削除します
- ~/.nodebrew ディレクトリを削除します
Beanstalk運用の日常風景

[ハンズラボ Advent Calendar 2017](https://qiita.com/advent-calendar/2017/handslab) 11日目の記事です。

Elastic Beanstalkの運用をそれなりに続けてきたので、溜め込んだTIPS＋失敗事例を放出します。
プラットフォームはPHPです。

## Daily Buildしましょう

「いやいやうちはデイリーどころか1日複数回buildしてdeployですよ」という方もいらっしゃるでしょうが、すべてのアプリケーションに対して毎日、というわけではないのでは？
「同じソースコードをeb deployして昨日は通ったのに今日は落ちる」ということがあります。
AWSは日夜プロダクトを改善していて、ユーザとして恩恵に預かっているわけですが、ときに牙をむくことがあります。
ということで、平日の出勤時間帯にdeployスクリプトをスケジュール実行しておいて、deploy成功していると安心して出勤できます。

- 2016年9月、eb-activity.logにて、ascii以外の文字列が入っているエラーが出てdeploy失敗しました。
(コメントに入ってもNG)
- 本番以外の環境で、immutableかrolling with additional batchでのdeploy検証できていると、安心です。この二つはEC2を新規に起動するので、後述のpreinit hookのスクリプトから順に動くためです。
    - と言いつつ、.ebextensionsでシンボリックリンクを貼る、みたいなことをしているときに、`already exists`で落ちるケースも。本番deployして初めて失敗する、みたいなケースは辛い・・・。

## ライブラリのバージョンを固定しましょう

常に最新版のライブラリを適用するのがセキュリティ的には望ましいですが、なかなかそうはいかないのが悩ましいところです。。。
検証環境では最新のライブラリ、本番環境は検証済みライブラリ、とかで分けて管理できればいいのですが・・・。なかなか腰が重いです。

- とあるpeclライブラリをバージョン指定せずに`pecl install`していたところ、最新版がPHP7のみのサポートになってdeployに失敗しました。。。
- プラットフォームのバージョンは検証環境のみ「管理された更新」を適用しています。これも便利。動作に問題がなければ本番環境へ。

## eb-activity.logを読みましょう

Beanstalkが管理しているEC2が起動するときや、Application Versionをdeployするときにeb-activity.logが更新されます。
実際に動いてるのは`/opt/elasticbeanstalk/hooks`配下のスクリプトです。ここに、.ebextensionsで書いた設定やらシェルスクリプトやらも入ってきます。

```
$ pwd
/opt/elasticbeanstalk/hooks
$ ls
appdeploy  configdeploy  postinit  preinit  restartappserver
```

- deployがtimeoutする原因について調べていたところ、`composer update`は--no-devがついて実行されていたのに、`composer install`はオプション無しで実行されていました。.ebextensionsで記述していないAWS製のdeployスクリプトの中で、EC2新規起動時は`composer install`を実行する作りになっていました。
- 試行錯誤の結果、下記のようにcomposer_optionsで--no-dev指定することにしました。合わせて、hirakさんの[prestissimo](https://github.com/hirak/prestissimo)を使ってcomposer install/updateの並列実行を実現しています。
    - EC2の起動が遅い問題、C5/M5インスタンスが東京リージョンに来てパッと解決してほしい・・・。

```composer.config
commands:
  01_update_composer:
    command: export COMPOSER_HOME=/root && /usr/bin/composer.phar self-update 1.5.2 && /usr/bin/composer.phar global require hirak/prestissimo

option_settings:
  - namespace: aws:elasticbeanstalk:application:environment
    option_name: COMPOSER_HOME
    value: /root
  - namespace: aws:elasticbeanstalk:container:php:phpini
    option_name: composer_options
    value: --no-dev
```

## Time Based Scaling しましょう

Elastic BeanstalkはAuto Scalingもよしなにやってくれますが、スパイクアクセスには弱いです。
日常的にiOS/Androidアプリへモバイルプッシュなどを行っていると、プッシュのタイミングでスパイクアクセスが発生します。
プッシュを登録する担当者と相談して、プッシュ送信する時間帯を制限し、その時間帯はスケールアウトしておくことで対策しています。
BeanstalkだけでなくDynamoDBもTime Based Scalingに対応しましたね！（こちらはまだAWS CLIのみで設定可能・・・）

- BeanstalkのメトリクスだけではELBへの負荷がわからない場合があります。その場合はELBのメトリクスを参照しましょう。AWS CLIでcloudwatchのメトリクスとるときも、NamespaceはELBのものを使います。
- CPU負荷、デフォルトの平均じゃなくて最大でみたほうがいいことがあります。CPU使用率の平均40%だから平気平気、と思ってたらELBが503返してて、CPU使用率を最大で見たら90%超えててEC2が死んでた、とかあるので・・・。
- サポートの方に「503頻発してELB足りないぽいから日常的にPreWarmingお願いします」と依頼したら、「SpillOverCount(過剰数)のカウントが上がっていますのでEC2増やしてください」と返答ありました。AWSサポートの皆様、スキル高くて頼りになります。
- NLB化も検討したいところ。

## まとめ

Elastic Beanstalk、AWSにおまかせできる部分が多くて楽ができますが、特有の癖みたいなものがあるので気をつけて使うと安全安心です。

[ハンズラボ Advent Calendar 2017](https://qiita.com/advent-calendar/2017/handslab) 明日12日目は[@sr-mtmt](https://qiita.com/sr-mtmt)です！
ラズパイでISUCON

# ISUCON (Iikanjini Speedup contest)
  - 与えられたWebアプリを一番速くした人が勝ち
  - 2,3人１チーム
  - 8時間

詳しくは、[公式ブログ](http://isucon.net)へ

# なぜラズパイでISUCONか
  - ラズパイはずっと欲しかったから
  - 夜中にAmazon見ててぽちったから
  - 前回参加したISUCONは諸事情で1,2時間しか参加できなかったから
  - ラズパイはずっと欲しかったから

# 目的
  - ラズパイを触る
  - ラズパイでISUCONができるようにする

# ラズパイの購入に関して注意
  - 意外と販売元によって値段や付属品が違うのでちゃんと見たほうが良い。
  - Physical Computing Labが良さそう

# ラズパイのセットアップ

## OSダウンロード
今回はサーバ用途なので、ラズパイ公式サイトの[ダウンロードページ](www.raspberrypi.org/downloads/rasbian)より、Raspbian Stretch LiteをDLしました。

## Micro SDにOSの書き込み
  * Macの場合
    * ddコマンド 例`sudo dd if=2017-11-29-raspbian-jessie-lite.img of=/dev/sdb bs=4m`
  * Windowsの場合
    * [Win32DiskImager](https://sourceforge.net/projects/win32diskimager/)などを使う

## 接続
![図1.png](https://qiita-image-store.s3.amazonaws.com/0/55081/a0fa1678-96f6-9c7f-e02a-a83da7b9091b.png)

## 起動
![image.png](https://qiita-image-store.s3.amazonaws.com/0/55081/9b1aea77-0a40-e417-a2fc-46bab13da8f0.png)
簡単。

## ラズパイの設定
  * 無線接続設定 - 諸事情により有線でつなげなかった
  * CtrlとCapsの入れ替え
  * 日本語化
  * apt update, apt upgrade, apt dist-upgrade

全て終わったら一度SDカードのイメージのバックアップを取っておくと良いかと思います。

# ISUCON 7予選環境の構築
ISUCON公式のgithubがあるみたいなので、その[予選問題７](https://github.com/isucon)をクローンしました。
後は基本的にREADME通りやれば、構築できます。以下紹介する部分だけラズパイ用に変える必要がありました。

  * パッケージ名
    * libmysqlclient-devをdefault-libmysqlclient-devに変更
  * GoのビルドはARM用に
    * `xbuild/go-install –f 1.9 /home/isucon/local/go linux armv6l`
  * 初期データの投入に関して
    * ラズパイのメモリーが1Gのため初期データを投入しようとするとMySQLが`out of memory`を吐きます。どうしようか迷ったのですが、初期データファイルを分割して投入して解決しました。

```
$ cd isubata/bench
$ gunzip isucon7q-initial-dataset.sql.gz
$ cat isucon7q-initial-dataset.sql | tr ";" "\n" | tail -n +2 | head -n -1 > isucon7q-initial-dataset2.sql
$ sed "s/$/;/g" isucon7q-initial-dataset2.sql > isucon7q-initial-dataset3.sql
$ split -l 10 isucon7q-initial-dataset3.sql init_data.
$ for sql in `ls init_data.*`; do echo $sql; sudo mysql --default-character-set=utf8 isubata < $sql; done
```

もうやっつけ感。

あとは、webサーバーを起動して、ベンチマークを取れば...こけます！
ここからチューニング作業ですが、今回は時間の関係上ここまでで！
pandasのSeriesの使い方を覚える

#pandasのSeries

pythonでデータを扱う際に、辞書型、リスト、タプルなど、いろいろな名前のデータがでてきますが、今回はSeriesでつくるデータについて、学ぼうと思います！


**環境**
・Mac
・Python3系
・numpy,pandas(インストールについては、[こちら](https://qiita.com/yossyyossy/items/bc6f077400b80593b2f1)を参照くださいm(__)m！)




#作る前に、まずはimportします！

```py3
#pandasをpdという名前で呼ぶ指定をします
import pandas as pd

#Seriesの頭文字が大文字の点に注意してください！
from pandas import Series
```

次に、簡単なSeriesのデータを作ってみましょう！

```py3
my_obj = Series([2,4,6])

#このような書き方でも大丈夫です！
#my_obj = Series([2,4,6])

print(my_obj)

"""
0    3
1    6
2    9
dtype: int64
"""
```

出力すると、リストに入れた値(values)と、インデックス(index)とデータ型(このシリーズの場合はint)が表示されます。

それぞれの値や、インデックスにアクセスすることも可能です！

```py3

#print(my-new_obj)でも同じです。

my_new_obj.values
#array([2, 4, 6])

my_new_obj.index
#RangeIndex(start=0, stop=3, step=1)
#0から始まり、1つごとに3買い進むindexが振られていることを示します。
```

#Seriesのインデックスは文字列にすることも可能です！

今回は英語のテストに関するSeriesのデータを作ろうと思います。

```py3
english_test = Series([60,80,70],['A','B','C'])
print(english_test)

"""
A    60
B    80
C    70
dtype: int64
"""
```

インデックスがA-C君に変わりました！

また、違う作り方もあります！

```py3
#先に値を渡す！
another_english_test = Series([60,80,70])

#あとでindexを追加！
#イコールな点に注意！
another_english_test.index = (['A','B','C'])

print(another_english_test)

"""
A    60
B    80
C    70
dtype: int64
"""
```

ポイントの整理をします！
####**ポイント**
**・各要素(値、インデックス)は、リストに入れて渡すこと
・後者の方法でindexを指定する場合は、イコールで値を渡すこと！**

#ここからは細かい使い方を勉強していきます！

###**indexから値にアクセスする！**

```py3
english_test['A']
#60
```

###**比較演算子で条件に当てはまる要素を探す**

```py3
#65より大きい数字を持つインデックスと値を表示
english_test[english_test > 65]

"""
B    80
C    70
dtype: int64
"""
```

###**シリーズを辞書型にする**

```py3
#to_dict()メソッドを使う
english_test_dict = english_test.to_dict()
english_test_dict

"""
{'A': 60, 'B': 80, 'C': 70}
"""
```

###**先程作った辞書型からシリーズ型のデータを作る**

```py3
#先程作ったdict型のenglishtestをSeriesの引数に渡す。
english_text_series = Series(english_test_dict)

"""
A    60
B    80
C    70
dtype: int64
"""
```

###**インデックスに名前を付ける**

```py3
english_test.name = 'python高校object組'
print(english_test)
"""
A    60
B    80
C    70
Name: python高校object組, dtype: int64
"""

```

###**特定のインデックスを削除する**

```py3
#削除前の値
english_test

"""
A    60
B    80
C    70
Name: python高校init組, dtype: int64
"""

#drop関数を使い、indexを指定
english_test.drop('A')

"""
B    80
C    70
Name: python高校init組, dtype: int64
"""
```
この時、先程までは角括弧(ブラケット)に引数を渡すことが多くありましたが、**dropに関しては丸括弧内**に引数を書く点にご注意ください！

#おわりに

null値周りやseries型同士の足し算引き算をする方法も紹介できるのですが、長くなってしまうのでここで終わりにします！

わかりやすい方法等ございましたら、コメントにて教えていただけますと幸いです！m(__)m
ざっくばらんメモ_15：capsule network, model switchingとdomain adaptation

###capsule net
最近急に話題になり始めたcapsule networkに関する[Hintonの講義](https://www.youtube.com/watch?v=Mqt8fs6ZbHk)を見た．
この新しいモデルの一つの動機として従来のconvnetはpooling処理があるせいで，同じ物体に関する様々な観点の特徴を捨てて代表値で代替してしまう事かある．
Capsule netはそれを回避する事が出来る．
これはautoencoderを用いたデータ再構成を考えた時に，従来のconvnetを使ったVAE的な
やり方において，細かな復元が難しい問題へ対応可能かもしれないと考えた．

###model switcingに基づいたdomain adaptation
最近のdomain adaptationの手法はGANの要領でdomainギャップに関する目的関数を学習して最適化する手法が
berkeleyからよく出ている（例えば[CyCADA](https://deepdrive.berkeley.edu/system/files/project/document/cycada_bdd_report.pdf))．
ところでdomain adaptationの文脈ではtarget domainの教師情報が与えられていない想定が多いが，
最近は教師情報のコストが下がり始めたおかげかそういう場合は減ってきたように思う（domainごとに偏りはあるが）．
なのでむしろどのdomainに対しても教師情報があって良いから状況に合わせて能動的にモデルをスイッチングできるような
ネットワークがもっとあって良いように思えた．
最近だと制御分野で出始めているが，条件が色々限定されているのでまだ形式化されていないのかもしれない．
古典的にはswitching linear dynamics modelとか他にも色々あるが，最近のconvnet等でそれを効率よくやる方法は
あるのだろうか（特に計算・メモリ効率的な意味で）
一年ぶりにDocker for Mac のファイル共有をベンチ

ホワイトプラスのエンジニアの[kaizoa](https://qiita.com/kai-zoa)です。
なんでもやります💪

去年のAdvent CalendarでDocker for Macのファイル共有のベンチを見てたので今年もやってみたいと思います。


[Docker for Mac のファイル共有でconsistencyを指定してアクセスを速くする(CE-17.04.0)](https://qiita.com/kai-zoa/items/5f38909d37e0e4e36a28)
[Docker for Macのファイル共有が遅いので計測してみる](https://qiita.com/kai-zoa/items/d2d2f0cb5ff1b51e65c7)

普段からリネットの全エンジニアが使う開発環境のDocker for Macですが、もともとボリュームのファイル共有があまり速くないため、もっと速くなってくれると嬉しいです。

# Docker Community Edition 17.11.0-ce-rc4-mac39 2017-11-17 (Edge)

一年の振り返り的な意味の他に、こちらのアップデートの効果が期待できるのでやってみたいと思いました。

https://docs.docker.com/docker-for-mac/release-notes/#edge-release-notes
> For systems running APFS on SSD on High Sierra, use raw format VM disks by default. This increases disk throughput (from 320MiB/sec to 600MiB/sec in dd on a 2015 MacBook Pro) and disk space handling.
> Existing disks are kept in qcow format, if you want to switch to raw format you need to “Reset to factory defaults”. To query the space usage of the file, use a command like:
> `$ cd ~/Library/Containers/com.docker.docker/Data/com.docker.driver.amd64-linux/`
> `$ ls -ls Docker.raw`
> `3944768 -rw-r--r--@ 1 user staff 68719476736 Nov 16 11:19 Docker.raw`
> The first number (3944768) is the allocated space in blocks; the larger number 68719476736 is the maximum total amount of space the file may consume in future in bytes.

APFSの環境（High Sierra）でRAWフォーマットのVMディスクを使っていればosxfsがスループット向上するとのことです。
OSのアップグレードが必要な場合は、一度Docker for Macを`Reset to factory defaults`する必要があります。

# 計測

使うコードは去年と一緒です。
実行環境は去年と多少変わってるけど、大して性能差ない気がする
- MacBook Pro (13-inch, 2016, Two Thunderbolt 3 ports)
- High Sierra 10.13.1
- Docker 17.11.0-ce-mac40 (20561)


```bash
#consistent
testing: warning: no tests to run
BenchmarkReadVolumeFile_Buf128-2            1000           1772383 ns/op
BenchmarkReadVolumeFile_Buf1024-2           1000           1501613 ns/op
PASS
ok      bench-fio       3.702s
#cached
testing: warning: no tests to run
BenchmarkReadVolumeFile_Buf128-2            2000            916963 ns/op
BenchmarkReadVolumeFile_Buf1024-2           3000            438266 ns/op
PASS
ok      bench-fio       3.313s
#delegated
testing: warning: no tests to run
BenchmarkReadVolumeFile_Buf128-2            2000            896985 ns/op
BenchmarkReadVolumeFile_Buf1024-2           3000            406570 ns/op
PASS
ok      bench-fio       3.183s

```


全体的に向上が見られ、cachedの２つ目のベンチでは7割増し💪

----
ホワイトプラスではエンジニアを募集しています
ホワイトプラスでは、web×リアル領域で「新しい日常を創りたい」エンジニアWanted!!しております。
Cordovaエラー Failure [INSTALL_FAILED_UPDATE_INCOMPATIBLE]

# 現象
```
$ cordova run android
```
androidで実機動作時に、以下のエラーが出た。

```
Failure [INSTALL_FAILED_UPDATE_INCOMPATIBLE]
```

# 解決方法
同じIDのアプリが端末内にあると出てくるエラーなので、アプリを削除するかIDを変更することで回避が可能。
組合せ最適化で凸多角形の最適三角形分割

# これなに

数学とコンピュータ・アドベントカレンダーの11日目の記事「[凸多角形の最適三角形分割](https://uid0130.blogspot.jp/2017/12/blog-post.html)」を[組合せ最適化](https://qiita.com/SaitoTsutomu/items/bfbf4c185ed7004b5721)で解いてみました。

## 考え方
凸N角形に交差しないように、N-3本の対角線を引けば、三角形分割できるので、和が最小のものを選べば良いです。

数理最適化の手順については、[数独を通して組合せ最適化を学ぼう](https://qiita.com/SaitoTsutomu/items/bd09190d8a02432b3f16)をご覧ください。

## 例題

適当に多角形を作ります。

```py3:python3
import matplotlib.pyplot as plt
import numpy as np, pandas as pd, networkx as nx
from pulp import LpProblem, lpDot, lpSum, value
from ortoolpy import addbinvars
plt.rcParams['figure.figsize'] = (4,4)
plt.axes().set_aspect('equal', 'datalim')

pos = np.array([[1,2],[2,0],[4,0],[6,1],[5,4],[4,5],[2,4]])
dcpos = dict(enumerate(pos))
n = len(pos)
g = nx.Graph()
g.add_edges_from([(i,(i+1)%n) for i in range(n)])
nx.draw_networkx(g,pos=dcpos)
plt.show()
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/13955/4ad61585-3490-d937-d6c8-fe74eeca7184.png)

## 変数表

変数表を作ります。

```py3:python3
a = pd.DataFrame([(i,j,np.linalg.norm(pos[i]-pos[j]))
    for i in range(n) for j in range(i+2,n-(i==0))], columns='I J Dist'.split())
a['Var'] = addbinvars(len(a))
a[:2]
```

 |I|J|Dist|Var
:--|:--|:--|:--|:--
0|0|2|3.605551|v000001
1|0|3|5.099020|v000002

## 定式化して解く

制約条件は、N-3本必要というのと、交差させないになります。

```py3:python3
m = LpProblem()
m += lpDot(a.Dist, a.Var)
m += lpSum(a.Var) == n-3 # N-3本必要
for idx,(i1,j1,_,v1) in a.iterrows():
    for _,(i2,j2,_,v2)  in a[idx+1:].iterrows():
        if i1 < i2 < j1 < j2:
            m += v1+v2 <= 1 # 交差させない
m.solve()
a['Val'] = a.Var.apply(value)
print('対角線の和',value(m.objective))
g.add_edges_from(a[a.Val>0.5].values[:,:2])
nx.draw_networkx(g,pos=dcpos)
plt.show()
>>>
対角線の和 15.200792856081229
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/13955/dc8f4897-3895-b015-7d5a-c2d2bdbc9428.png)

できました。

以上
phpenvでインストールできるPHPのバージョン一覧


2017年12月11日に確認したPHPのバージョン一覧です。

ターミナルで見てるとちょっと見にくい感じだったので。
snapshotは不要かと思うので、そちらは除外。

## 5.2.x
- 5.2.17

## 5.3.x
- 5.3.2
- 5.3.3
- 5.3.6
- 5.3.8
- 5.3.9
- 5.3.10
- 5.3.11
- 5.3.12
- 5.3.13
- 5.3.14
- 5.3.15
- 5.3.16
- 5.3.17
- 5.3.18
- 5.3.19
- 5.3.20
- 5.3.21
- 5.3.22
- 5.3.23
- 5.3.24
- 5.3.25
- 5.3.26
- 5.3.27
- 5.3.28
- 5.3.29

## 5.4.x
- 5.4.0
- 5.4.1
- 5.4.2
- 5.4.3
- 5.4.4
- 5.4.5
- 5.4.6
- 5.4.7
- 5.4.8
- 5.4.9
- 5.4.10
- 5.4.11
- 5.4.12
- 5.4.13
- 5.4.14
- 5.4.15
- 5.4.16
- 5.4.17
- 5.4.18
- 5.4.19
- 5.4.20
- 5.4.21
- 5.4.22
- 5.4.23
- 5.4.24
- 5.4.25
- 5.4.26
- 5.4.27
- 5.4.28
- 5.4.29
- 5.4.30
- 5.4.31
- 5.4.32
- 5.4.33
- 5.4.34
- 5.4.35
- 5.4.36
- 5.4.37
- 5.4.38
- 5.4.39
- 5.4.40
- 5.4.41
- 5.4.42
- 5.4.43
- 5.4.44
- 5.4.45

## 5.5.x
- 5.5.0
- 5.5.1
- 5.5.2
- 5.5.3
- 5.5.4
- 5.5.5
- 5.5.6
- 5.5.7
- 5.5.8
- 5.5.9
- 5.5.10
- 5.5.11
- 5.5.12
- 5.5.13
- 5.5.14
- 5.5.15
- 5.5.16
- 5.5.17
- 5.5.18
- 5.5.19
- 5.5.20
- 5.5.21
- 5.5.22
- 5.5.23
- 5.5.24
- 5.5.25
- 5.5.26
- 5.5.27
- 5.5.28
- 5.5.29
- 5.5.30
- 5.5.31
- 5.5.32
- 5.5.33
- 5.5.34
- 5.5.35
- 5.5.36
- 5.5.37
- 5.5.38

## 5.6.x
- 5.6.0
- 5.6.1
- 5.6.2
- 5.6.3
- 5.6.4
- 5.6.5
- 5.6.6
- 5.6.7
- 5.6.8
- 5.6.9
- 5.6.10
- 5.6.11
- 5.6.12
- 5.6.13
- 5.6.14
- 5.6.15
- 5.6.16
- 5.6.17
- 5.6.18
- 5.6.19
- 5.6.20
- 5.6.21
- 5.6.22
- 5.6.23
- 5.6.24
- 5.6.25
- 5.6.26
- 5.6.27
- 5.6.28
- 5.6.29
- 5.6.30
- 5.6.31
- 5.6.32

## 7.0.x
- 7.0.0
- 7.0.1
- 7.0.2
- 7.0.3
- 7.0.4
- 7.0.5
- 7.0.6
- 7.0.7
- 7.0.8
- 7.0.9
- 7.0.10
- 7.0.11
- 7.0.12
- 7.0.13
- 7.0.14
- 7.0.15
- 7.0.16
- 7.0.17
- 7.0.18
- 7.0.19
- 7.0.20
- 7.0.21
- 7.0.22
- 7.0.23
- 7.0.24
- 7.0.25
- 7.0.26

## 7.1.x
- 7.1.0
- 7.1.1
- 7.1.2
- 7.1.3
- 7.1.4
- 7.1.5
- 7.1.6
- 7.1.7
- 7.1.8
- 7.1.9
- 7.1.10
- 7.1.11
- 7.1.12

## 7.2.x
- 7.2.0