OmniAICreator/Qiita-1.07M huggingface dataset:
[iOS] UIScrollViewの中のViewControllerでもジェスチャーさせる

以下、今回の構成。

ContainerViewController に **UIScrollView** がある
└ NavigationViewController（ScrollViewの中にあるContainerView内に設定）
　└ ParentViewController
　　└ ChildViewController ─ swipeRecognizerToLeft（左スワイプのジェスチャー）
　　　　　　　　　　　　　└ swipeRecognizerToRight（右スワイプのジェスチャー）

```swift
let parentVc = self.navigationController?.viewControllers[0]
let NavigationVc = parentVc?.parent
let containerVc = NavigationVc?.parent as? ContainerViewController

containerVc?.scrollView.gestureRecognizers?.forEach({ gesture in
    gesture.require(toFail: swipeRecognizerToLeft)
    gesture.require(toFail: swipeRecognizerToRight)
})
```
laravelのhomesteadを使用する

# vmにlaravelの環境をサクッと作りたくて実施
やり方はネット検索すれば本家の日本語もあり、すぐできると思うので、詰まったところをメモすることだけに止めます。

- 関門1
    - vagrant box addでlaravelを入れ、vmware_fusionでvagrant upするとエラーになる
    - 詳しくはわかりませんが、理由はvmwareの対応状況にあるようです。
        - 僕が試した環境はvagrant version 1.9 Ubuntu14.04 vmware_fusion7です

```
# こんなエラーが出る
WARNING: The VMX file for this box contains a setting that is automatically overwritten by Vagrant
WARNING: when started. Vagrant will stop overwriting this setting in an upcoming release which may
WARNING: prevent proper networking setup. Below is the detected VMX setting:
WARNING:
WARNING:   ethernet0.pcislotnumber = "32"
WARNING:
WARNING: If networking fails to properly configure, it may require this VMX setting. It can be manually
WARNING: applied via the Vagrantfile:
WARNING:
WARNING:   Vagrant.configure(2) do |config|
WARNING:     config.vm.provider :vmare_fusion do |vmware|
WARNING:       vmware.vmx["ethernet0.pcislotnumber"] = "32"
WARNING:     end
WARNING:   end
WARNING:
WARNING: For more information: https://www.vagrantup.com/docs/vmware/boxes.html#vmx-whitelisting
```
調べても解決したような記事はなく、virtualboxに切り替えていく方向で対処。

- 関門2
    - virtualboxでのネットワーク設定をしないとvagrant upすらできない
    - [【vagrant】vagrant upでエラー](http://gamushiros.hatenablog.com/entry/2016/08/07/074230)を参考に解決
    - 僕の場合、上記の記事のホストオンリーネットワークに関する部分でvboxnet0すらない状態で、作成をしました。また、vboxnet0を作成し、好きなIPを割り当てようと設定しましたが設定されないようで、これに気づくまでvagrant upができませんでした。

以上が2017/5/12時点での実行結果です。
vmware_fusionの問題解決方法をご存知の方がいらっしゃいましたら、コメント頂けると幸いです。

追記

#### homesteadで作成したdbへの接続について
- sequel proを使用する場合の設定
    - ホスト:127.0.0.1
    - ユーザ名:homestead
    - パスワード:secret
    - ポート:33060

初期の場合は上記でいけます。
Javaの勉強 - 5

今更ながらインクリメント。
あと、複合代入演算子も少し。
四則演算のときにやっておけよって話でもあるけど。

# インクリメント
インクリメント演算子（++）というのがあって
変数にの前後に「++」をつけることで、その変数に「1」加算できる。

「++a」や「a++」が「a=a+1」とほぼ同等

でも、微妙にその2つの動きは違うよ～って言われて
なかなかその意味が理解できなかったわけですが

「++a」や「a++」単体で見てたからダメだったのかも。

インクリメントする変数とは別の変数も一緒に使うことで
違いが出て、何かに気が付いたかもしれない。

これ↓は先に「a=a+1」をして、その結果を「b」に入れる。

```
b = ++a;
```

計算順をイメージすると「b=(a=a+1)」な感じ？
一方で↓こっちは「b」に「a」の値を入れた後で「a=a+1」する。

```
b = a++;
```

計算順をイメージすると「b=aからのa=a+1」な感じ？

とりあえず実行して、結果の違いを見てみることに。
まずはいつもの基本形に「++a」を入れた場合。

```
int a, b;

a = 1;
b = ++a;

System.out.println("a = " + a);
System.out.println("b = " + b);
```

・先に「a=a+1」されるから「a=2」
・「b=a」だから「2」が入るので「b=2」

実行結果
![pic002.JPG](https://qiita-image-store.s3.amazonaws.com/0/179949/5ec035d3-4c00-a338-8461-28e1fcf9afff.jpeg)
ですよねー。

次は「a++」を入れた場合

```
int a, b;

a = 1;
b = a++;

System.out.println("a = " + a);
System.out.println("b = " + b);
```

・先に「b=a」されるから「b=1」
・次に「a=a+1」されるから「a=2」

実行結果
![pic001.JPG](https://qiita-image-store.s3.amazonaws.com/0/179949/6165bf81-bd9d-0c2b-52db-fbefbc7e9826.jpeg)
なるほど、なるほど。

状況によって「++a」と「a++」を使い分けるのでしょうね。

ついでに。。。
「1」引くのはデクリメントで、演算子は「--」。

# 複合代入演算子
インクリメントと似てるけど、計算式の省略した書き方？
とでも思っておく。

「a=a+5」を「a+=5」と書くこともできる。

この「+=」が複合代入演算子らしい。

・順番に気を付ける「=+」ではなく「+=」
・「+=」「-=」「*=」「/=」等もある
・「>>=」「>>>=」とかもあるけど今は忘れとく、一度に覚えられないし。

くらいを何となく頭に入れたところで動作確認をしておく。
いつもの基本形に↓を追加して実行。

```java:Yomogi.java
int a = 1, b = 1;

a += 5;
b = b + 5;

System.out.println("a = " + a);
System.out.println("b = " + b);
```

「+=」でも同じ結果になることを確認する。

実行
![pic003.JPG](https://qiita-image-store.s3.amazonaws.com/0/179949/59a5ab58-e1d4-0a08-080a-aee3a5905133.jpeg)

余裕が出来るまでは「a=a+5」の使い方がメインなりそう。

今回はココまで。
[Swift]Operationを使って複数のNCMBリクエストを実行し、メインスレッドに戻す方法 

mBaaSで、複数オブジェクト操作APIの提供終了に伴い、for文等で複数オブジェクト操作を行った際に、処理が完了した後にメインスレッドに戻す必要性が出てきました。
http://info.biz.nifty.com/mb/2017/03/api-2.html

今回は、Operationを利用してその処理を行ってみようと思います。

# Operationのサブクラスを作成する

```swift:RequestOperation.swift
class RequestOperation: Operation {

    var object:NCMBObject? = nil
    
    private var _executing: Bool = false
    override var isExecuting: Bool {
        get {
            return _executing
        }
        set {
            if _executing != newValue {
                willChangeValue(forKey: "isExecuting")
                _executing = newValue
                didChangeValue(forKey: "isExecuting")
            }
        }
    }
    
    private var _finished: Bool = false;
    override var isFinished: Bool {
        get {
            return _finished
        }
        set {
            if _finished != newValue {
                willChangeValue(forKey: "isFinished")
                _finished = newValue
                didChangeValue(forKey: "isFinished")
            }
        }
    }
    
    init(object:NCMBObject?) {
        super.init()
        self.object = object
    }
    
    override func start() {
        _executing = true
        // データストアへの登録を実施
        object?.saveInBackground({ (error) in
            if error != nil {
                // 保存に失敗した場合の処理
            } else {
                // 保存に成功した場合の処理
            }
            self._executing = false
            self._finished = true
        })
        // 並列実行モードで動かす
        repeat {
            RunLoop.current.run(mode: RunLoopMode.defaultRunLoopMode, before: NSDate.distantFuture)
        } while isExecuting
    }
}


```
# 処理を実行するクラスでの処理

```swift:プロパティ
var finishedBlock: (() -> Void)?

```

```swift:処理を実行するメソッド内での処理
let operationQueue = OperationQueue.init()
// OperationQueueのカウント数の監視を登録
operationQueue.addObserver(self, forKeyPath: "operationCount", options: .new, context: nil)

for _ in 1...5 {
    // testクラスのNCMBObjectを作成
    let object = NCMBObject.init(className: "test")
    // オブジェクトに値を設定
    object?.setObject("value", forKey: "key")
    // リクエストの作成
    let operasion = RequestOperation.init(object :object)
    // 処理の開始
    operationQueue.addOperation(operasion)
}

// 処理が完了した時のblock
self.finishedBlock = {() -> Void in
    // メインスレッドに戻ってきた時に行う処理
}

```



```swift
// NSOperationQueueのカウント数に変化があると呼ばれる
override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
    // operationCountが0になり処理が完了した時にメインスレッドでblockを実行する
    if keyPath == "operationCount" {
        if change?[NSKeyValueChangeKey.newKey] as! Int == 0 {
            OperationQueue.main.addOperation({ 
                self.finishedBlock!()
            })
        }
    }
}
```

# waitUntilAllOperationsAreFinishedメソッドについて
waitUntilAllOperationsAreFinishedメソッドを利用して、キューに入っているオペレーションが完了するのを待つ方法があります。
しかし、NCMBのsaveInBackgroundWithBlockはNSURLConnectionに[NSOperationQueue mainQueue]を設定しているため、waitUntilAllOperationsAreFinishedを利用して完了するのを待っても処理が実行されません。
そのため、今回はKVOを利用する方法になっています。
JavaScript実行後のHTMLをGASで取得する

# はじめに

Google Apps Script(GAS)でJavaScript実行後のHTMLソースを取得(Webスクレイピング)するのに一手間かかったのでメモ。

GASだと以下のコードでHTMLが取得できます。

```js
 var url = "http://example.com";
 var response = UrlFetchApp.fetch(url).getContentText(); 
```

が、これだとJavaScript実行前のHTMLが返却されます。
例えば、あるキーワードを検索し結果が反映されたHTMLは取得できません。

そこでPhantomJs Cloudを利用します。

# PhantomJs Cloud
<https://phantomjscloud.com/>

>A web-browser hosted as a service, using PhantomJs online (Chrome) to render your javascript heavy webpages as HTML, PDF, JPEG, PNG, or JSON.

JavaScript実行後のWebサイトを画像やisonなどの形式で取得してくれるWebサービスです。

会員登録すると無料枠で、一日100回までリクエストを送れます。

# 使い方
GETリクエストで取得する場合。

```js:sample.gs
var url = "https://phantomjscloud.com/api/browser/v2/"+[APIKEY]+"/?request=%7Burl:%22http://example.com%22,renderType:%22plainText%22,outputAsJson:true%7D";
var response = UrlFetchApp.fetch(url).getContentText();
var json = JSON.parse(response);
var source = json["content"]["data"].toString();
```

APIを利用して取得したjsonデータにはヘッダ情報なども含まれているため、パースして取り除いています。
pip listのwarning(DEPRECATION)対応

pip９系でwarningが出るようになった

```shell-session
$ pip -V
pip 9.0.1

$ pip list
DEPRECATION: The default format will switch to columns in the future. You can use --format=(legacy|columns) (or define a format=(legacy|columns) in your pip.conf under the [list] section) to disable this warning.
Flask (0.12)
.
.
```

対応内容
https://pip.pypa.io/en/stable/user_guide/#config-file

```shell-session
$ vi ~/.pip/pip.conf
[list]
format = columns

$ pip list
Package  Version
-------- --------
Flask    0.12
.
.
```
[memo]決定木を出して、summary出しつつ、可視化もする

よく使う設定なのでここに記録

`data %>>% (rpart(y~x_1+x_2+x_3, ., method="class", cp=.0000001, maxdepth=4)) %>>% (~ plot(., uniform=T, margin=.1)) %>>% (~ text(., use.n=T, all=T, digits=5)) %>>% (summary(.))`

- `%>>%` パイプ処理。 package pipeRを入れとくと使える
- `rpart`：決定木を出してくれる君
    - `y~x_1+x_2+x_3`：`y`が結果変数、`x_i`が説明変数
    - `method="class"`：`y`の値の分類を目的とするときは`method`を`class`に。
        - 他には、、、
        - `anova`, `poisson`, `exp`を指定可能。使ったこと無いので分かりません
    - `cp`：complexity parameterの略。小さいほど、深い決定木を出してくれる
    - `maxdepth`：深さの上限を設定。
        - <strike>cpを小さくしてmaxdepthで調整という暴力が安易で良い（よくない） </strike>
- `plot.rpart`
    - `uniform=T`：可視化した時の縦棒の長さを揃えてくれる
        - なんでdefaultはfalseなんだ？
    - `margin=.1`：こうしないとテキスト書き込んだときに端が切れる。実質おまじない
- `text.rpart`：文字列を書き入れる
    - `use.n=T`：各所に、どの属性に何データ入るかを表示してくれる
    - `all=T`：決定木の条件分岐の全てに数値を書き込む設定
    - `digits`：ほっとくと値を丸める。丸めてほしくないときに大きめの値を入れている
matplotlib でソートアルゴリズムの動作を可視化する

# はじめに

インターネットでソートアルゴリズムについて調べていると、アルゴリズムの動作を可視化するアニメーションをよく見かけます。自分でもこういうアニメーションを作れたら面白いなと思ったので [matplotlib](https://matplotlib.org/) を使ってやってみました。

# 前提

* [ImageMagick](https://www.imagemagick.org/script/index.php) がインストールされていること。
* matplotlib がインストールされていること。

# ソースコード

[バブルソート](https://ja.wikipedia.org/wiki/%E3%83%90%E3%83%96%E3%83%AB%E3%82%BD%E3%83%BC%E3%83%88) の動作を gif アニメーションに出力するコードです。

```py
import matplotlib.pyplot as plt
import matplotlib.animation as ani
from random import shuffle

COLOR_PINK = '#ffc0cb'
COLOR_GOSSIP = '#cbffc0'


def draw_bar(li, color=COLOR_PINK):
  x_axis = list(range(1, len(li) + 1))

  plt.bar(x_axis, li,
          tick_label=li, align='center', width=0.4, color=color)


def draw_frame(frame, sorted_li, steps):
  plt.clf()
  li = steps[frame]
  options = {'color': COLOR_GOSSIP} if li == sorted_li else {}
  draw_bar(steps[frame], **options)


def bubble_sort(li):
  sorted_li = list(li)
  steps = []

  for i in range(0, len(sorted_li)):
    for j in range(1, len(sorted_li) - i):
      if sorted_li[j - 1] > sorted_li[j]:
        sorted_li[j], sorted_li[j - 1] = sorted_li[j - 1], sorted_li[j]

      if len(steps) == 0 or steps[-1] != sorted_li:
        steps.append(list(sorted_li))

  return sorted_li, steps


if __name__ == '__main__':
  li = list(range(1, 11))
  shuffle(li)

  sorted_li, steps = bubble_sort(li)

  fig = plt.figure(figsize=(6.0, 6.0))

  # アニメーション中でソート結果が 5 フレーム分余計に長く表示されるようにする。
  # FuncAnimation() には repeat_delay オプションがあるがこれが効かないため。
  steps = steps + [steps[-1]] * 5

  anim = ani.FuncAnimation(fig, draw_frame,
                           fargs=(sorted_li, steps), frames=len(steps))
  anim.save('bubble_sort.gif', writer='imagemagick', fps=5)
```

# アニメーション

![bubble_sort.gif](https://qiita-image-store.s3.amazonaws.com/0/6697/6bca9bc5-7025-a6a9-5b3a-68c45c41bc3e.gif)

# 参考

* [The Matplotlib API » pyplot » matplotlib.pyplot.bar()](http://matplotlib.org/api/pyplot_api.html#matplotlib.pyplot.bar)
SeleniumにてxlsxファイルをJavaで読み込む

[現在時点：2017/05/12]
[Selenium 3.4.0](http://www.seleniumhq.org/download/) Java環境でxlsxファイルを読み込む処理について記述します。

#大まかな概要
1. xlsxの表のタイトルとタブ名を指定したクラス作成
2. 表の列名を変数に割り当て
3. 各クラスを呼んで実行

#さっくりと書いていく
xlsxファイルの表のタイトルとタブ名を指定する。

```java
TestSheet.java

import java.util.List;

import net.java.amateras.xlsbeans.annotation.HorizontalRecords;
import net.java.amateras.xlsbeans.annotation.Sheet;

@Sheet(name="test")        //タブ名
public class TestSheet {
    @HorizontalRecords(tableLabel="一覧表", recordClass=TestData.class)    //表のタイトル
    public List<TestData> testDataList;
}
```

表の列名を変数に割り当て

```java
TestData.java

import net.java.amateras.xlsbeans.annotation.Column;

public class TestData {
    @Column(columnName="No")
    public String no;

    @Column(columnName="TestCase")
    public String test_case;
}
```

各クラスを呼んで実行

```java
GetXlsxData.java

@RunWith(Parameterized.class)
public class GetXlsxData{
	private TestData testData;        //テスト用パラメータ Excelの1レコードに該当

	//コンストラクタ
	public GetXlsxData(TestData testData){
		this.testData = testData;
	}

	@Parameters
    //エクセルからテストケース生成
	public static List<TestData[]> data() throws Exception {
		// Excelファイルの読み込み
		TestSheet sheet = new XLSBeans().load(new FileInputStream("./testCase/selenium_testlist.xlsx"), TestSheet.class, WorkbookFinder.TYPE_XSSF);
		// Parametersの設定
		List<TestData[]> list = new ArrayList<TestData[]>();
		for (TestData testData : sheet.testDataList) {
			list.add(new TestData[] { testData });
		}
		return list;			//コンストラクタへ返す：Set(TestData testData)
	}
}
```

かなり端折って書いてます。
@Before, @Rule, @After, @Test等無いので、自分で追加してください。

以上です。
【メモ】Laravelで外部キー制約付きのテーブルをマイグレーションする時に気をつけた方がよかった点

Laravelで外部キー制約付きのテーブルをマイグレーションで作成した時に何度もエラーになって大変だったのでメモ。
(laravelのバージョンは5.4.20)
最終的なマイグレーションファイルはこれ↓これでうまくいった。

```php
//親テーブル・・users
public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->string('id')->unique();
            $table->string('name');
            $table->string('email')->unique();
            $table->integer('age');//誕生日から計算
        });
    }

```

```php
//子テーブル・・events
    public function up()
    {
        Schema::create('events', function (Blueprint $table) {
            $table->engine = 'InnoDB';
            $table->increments('id');
            $table->string('user_id');
            $table->string('event_name');        
            $table->timestamps();

            //外部キー制約
            $table->foreign('user_id')
                    ->references('id')
                    ->on('users')
                    ->onDelete('cascade');
        });
    }
```

最初に出てきたエラー

```php
[Illuminate\Database\QueryException]
SQLSTATE[HY000]: General error: 1215 Cannot add foreign key constraint (SQL
: alter table `events` add constraint events_user_id_foreign foreign 
key (`user_id`) references `users` (`id`)) 
```


僕が犯したミス(エラーの原因になったかどうかは不明)一覧
①innoDBの指定が無い
→以下を追加

```php
$table->engine = 'InnoDB';
```

②親テーブルの参照されるキーにindexが無い
→以下を追加

```php
$table->string('id')->unique();
```
③上記二つをやって他にも色々やって見たけど全然うまく行かない
→最初のエラーの時に、usersテーブルのマイグレーションファイルだけなぜかロールバック出来ておらず、かつ直接mysqlからusersテーブルを削除してしまっていた。
そのため、コマンドラインで、

```php
php artisan migrate
```
をやっても、usersテーブルのマイグレーションファイルはmigrateされず、
usersテーブルが無い状態でeventsテーブルを作成していた。
そのため、親となるカラムが無いため外部キー制約も出来ない、という状態だった。

```php
php artisan migrate:reset
```
で全てのマイグレーションをロールバック。
mysqlでテーブルが残ってないか確認。
再度、migrate。

```php
php artisan migrate
```

成功！！

※注意点
・当たり前だけど外部キー制約がある場合は親テーブルが作られて無いとエラーになる
・mysqlから直接削除せずに、artisanコマンドを使ってロールバックするようにする

(参考)
http://wiki.navicat.com/ja/index.php/%E5%A4%96%E9%83%A8%E3%82%AD%E3%83%BC%E3%81%AE%E4%BD%9C%E6%88%90%E3%81%8C%E3%81%86%E3%81%BE%E3%81%8F%E3%81%84%E3%81%8D%E3%81%BE%E3%81%9B%E3%82%93%E3%80%82%E3%81%AA%E3%81%9C%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F

http://stackoverflow.com/questions/22615926/migration-cannot-add-foreign-key-constraint-in-laravel

http://jake-taro.hatenablog.com/entry/2016/03/30/170424
Django1.11.1 画像アップローダー　躓きやすいポイント

#問題

Djangoにて画像アップローダーを実装する場合、画像の保存までは出来ても画像が読めないよ！という諸問題にぶち当たることがあるのではないかと思ったので共有します。settings.pyやmodels.pyに関しては書き間違いがないと思いますので、多分大きなチョボミスポイントは以下じゃなかろうかと。


```urls.py
from django.conf import settings
from django.conf.urls import url, include
from django.conf.urls.static import static
from django.contrib import admin

urlpatterns = [
    url(r'^myapp/', include('myapp.urls',namespace='myapp')),
    url(r'^admin/', admin.site.urls),
]
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)
```


概ねこんな感じで回避できるんじゃないかな、と。後はテンプレートに

```html
{% for i in result_list %}
<img src="{{ i.image_url.url }}">
{% endfor %}
```

こういう感じで呼び出せばOKでしょう。
Macの移行でgoogleDriveの同期ができなくなって困ったお話。

先日会社PCのMacが新しくなりました。
そこで、新⇆旧Macの間でデータ移行を行いました。

#MAC間のデータ移行

データ移行には[移行アシスタント]を利用。

![移行アシスタント.png](https://qiita-image-store.s3.amazonaws.com/0/174392/d98dac4f-becf-b465-a33a-38973153165f.png)

移行アシスタントを使ってのデータ移行の場合、以下の方法で転送元を選択することができます。

- Mac
- TimeMachineバックアップ
- 起動ディスク
- Windows PC

今回、TimeMachineバックアップをしようとしていたところ、なぜかうまくいかなかったため、Macからの転送を行いました。

ユーティリティから移行アシスタントを開くと、以下のような画面が出てきます。

![移行アシスタント01.jpg](https://qiita-image-store.s3.amazonaws.com/0/174392/5ac0862a-de03-af4f-b58e-74c426ded3d7.jpeg)


今回は旧Macから新Macへの転送なので、２台のMacで同時に転送ツールを開きます。
上記の画面で、
旧Mac→別のMacへ
新Mac→Mac、TimeMachineバックアップ、または起動ディスクから
をそれぞれ選択します。

すると、両方のMac上にセキュリティコードが表示されるので、２つが同じコードになっているか確認し先へ進めます。

![転送ツール02.jpg](https://qiita-image-store.s3.amazonaws.com/0/174392/19bdfd3b-7478-56fa-8c17-0c554eb97e20.jpeg)

画像ではTimeMchineが表示されていますが、ここに移行元のMacPCが表示されるので、選択して続ける、をクリック。
次の画面で、転送したいデータを選択できます。選択して、さらに続けるをクリックすると、転送が開始されます。
Macからの転送は時間が掛かるのでおすすめできないと言われていましたが、その通り！本当に時間かかりました。
完全に移行が完了するまで２度ほど失敗(転送途中でそこから動かなくなる)しているので、計１日ほど掛かりました。
データ量は約69GB。wi-fi利用です。

MacからMacへ転送を行う場合、wi-fi利用よりThunderboltケーブル接続で移行すると時間短縮になるようです。
Thunderboltケーブル代が掛かりますが、データ量が多い場合はケーブル接続した方が良さそう。

今回は、無事に移行できたのでよかったです。

#無事に移行できたのも束の間、GoogleDriveの同期ができなくなりました

Finderのサイドバーにはしっかり表示されているし、アプリもきちんと移行できているのに、何故かメニューバーにあったはずのマークが無くなっていました。
そして、ローカルにあるDriveフォルダでファイルを削除、追加しても同期が行えません。
Web上のDriveには今までのデータがちゃんと残っています。

![メニューバー.png](https://qiita-image-store.s3.amazonaws.com/0/174392/64b2c7bc-a064-8c2e-e6e9-63979c6c6405.png)

同期設定は全てこのメニューバーに表示されるアイコンから設定するので、もはや何もできない状況。
通常、このメニューバーはDriveのアプリをインストールすると自動的に表示されるもののはず。。。

再度インストールしても状況は変わりません。

そこで行なったのが、以下。

- ライブラリフォルダの起動
- フォルダ内のApplication Support　＞　Google　＞　Driveフォルダを削除　※念のためバックアップを取っておいた方が安心。
- 再度インストール　※アプリケーションフォルダからの削除も忘れずに

インストールを行った後、Googleアカウントの入力を行い設定完了。
無事にメニューバーにDriveのマークも戻ってきました！　おかえり・・・！

ちなみにライブラリフォルダが見当たらないという場合は、

メニューバーの表示　＞　表示オプションを表示　を開きます。

![ライブラリフォルダ01.png](https://qiita-image-store.s3.amazonaws.com/0/174392/c3c0eb9b-351d-7a7c-bf7e-03c6bac650fe.png)

[ライブラリフォルダを表示]にチェックを入れるとライブラリフォルダが出現します。

![ライブラリフォルダ02.png](https://qiita-image-store.s3.amazonaws.com/0/174392/87d3151e-9a64-ab83-d0ac-d3dc84922c7c.png)

ちょっとしたトラブルもありましたが無事に新Macが使えるようになってよかったです。
npm に自作モジュールを公開する方法


npm にファイルをアップロードしたので手順メモ。

## npmアカウントを作る
https://npmjs.org/signup からアカウント発行。
必要な情報は以下。

- username
- password
- email


## npm adduser

- ターミナルで `npm adduser` を実行
  - 実装環境に `npm` が入っていること
- アカウント発行時に登録した情報を聞かれるので情報を入力
- `~/.npmrc` にtoken情報が書き込まれていたら設定完了

## 実装
- プロジェクトルートに移動し、`npm init` を実行
  - 対話式 で入力できるので楽
- `index.js` ファイルを置いてコードをガリガリ書いていく

ちなみに `.DS_Store` `.git` `npm-debug.log` `node_modules` あたりはデフォルトで公開されないように設定されてる。


## 公開準備
公開に向けて、`package.json` の中身を調整

| 項目名 | 内容 |
| ------------- | ------------- |
| name | モジュール名。使える文字列は小文字英数字とハイフンのみ。 |
| version | 最初は0.0.1とかにしておけばいい。公開コマンド実行時、数字が前回公開したときより大きくなければ怒られる |
| main | 主となるスクリプトファイル名 |
| repository | github なんかにファイルを公開してたら追加しておくと良いかも |
| dependencies | 依存するnpm モジュール。例えば pug とか gulp とか |


## 公開

`npm publish` コマンドを叩くだけ。
version を変更し忘れたりすると怒られます。

## 非公開
公開から24時間以内であれば `unpublish` で非公開（削除）にできる。
ただし、同じ名前で新たにパッケージを公開することはできない。
公開から24時間を経過すると `unpublish` で非公開（削除）にすることが出来ない。
非公開（削除）したいなら、 `support@npmjs.com` へメールで削除依頼を出さなければならない。
NetBeansでVue.jsを使うための設定（というか回避策）

# .vue ファイルの Syntax Highlight

## 他のエディタが対応しているし、NetBeans用も作られている？

NetBeansでvueファイルのコーディングをしたい。

SublimeTextやAtomなどでvueファイル対応プラグインは存在する。ずるい。

## 結論: NetBeans用は無い

今日調べた限りでは存在しなさそうだ
最低限の対応として、NetBeansの設定で .vue ファイルをHTMLと認識させる方法がある。

**[オプション]＞[その他]＞[ファイル]＞[ファイルの関連付け]＞[ファイル拡張子]＞[新規]**
で、以下を設定

**ファイル拡張子： vue**
**関連付けられたファイルタイプ(MIME)： HTMLファイル(text/html)**

これを設定することで、`<script>`内はjs, `<style>`内はcss, それ以外はHTMLとして扱ってくれる
ただ、「HTMLバージョンが判断できない」「v-ifとか知らない」などの警告が多数出る。
ファイルタイプを XHTMLファイル(text/xhtml) にすると警告が減るので、それを選択しても良い。

参考： [[stack overflow]Is there any Plugin available for VueJs in Netbeans 8.2](http://stackoverflow.com/questions/41383621/is-there-any-plugin-available-for-vuejs-in-netbeans-8-2)
flaskで電話帳用のWEBアプリを作ってみる　その2

[flaskで電話帳用のWEBアプリを作ってみる　その1](http://qiita.com/kedako/items/1f2560123bf740f2d361)
(SQLITEとの接続、Flaskで表示させる)
[flaskで電話帳用のWEBアプリを作ってみる　その2](http://qiita.com/kedako/items/5bf408bf95220930afdb)
(FlaskにおけるPOST,GETの扱い方)
[flaskで電話帳用のWEBアプリを作ってみる　その3](http://qiita.com/kedako/items/a8be387eb315f7d17474)
(登録フォームを追加)
[flaskで電話帳用のWEBアプリを作ってみる　その4](http://qiita.com/kedako/items/c70c34639c0096930a62)
(検索フォームを追加)


# 前回まで

電話帳用WEBアプリの表示部分まで実装できましたので、次は登録の部分を作成していこうと思いましたが、その前に躓きまくったのでここに整理用に書いておきます。

##まずはPOSTとGETについて
Alt+Dで表示される部分に表示されるのがGET、それ以外に見えない状態でデータを受け取るのがPOSTだそうです。
今回はPOSTで受け取る方法を試してみます。

##FlaskにおけるPOSTの受け取り方

[チュートリアル](https://a2c.bitbucket.io/flask/tutorial/index.html)が分かりやすかった。

つまったところを噛み砕いてこんな感じにしました。

まずはPOSTするための入力画面を作成します。

```post.html
<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset = "utf-8">
  </head>
  <body>
    <form action = "{{url_for("add_ent")}}" method = "POST">
      <input name = "Name" placeholder="名前">
      <input type ="submit" value = "送信">
    </form>
  </body>
</html>

```

【ポイント】
{{url_for("アプリ内の関数"}}で実行する関数を選べます。
ここではPOSTでadd_ent関数を実行してくださいという命令です。

次に最低限のアプリを書きます。

```formtest.py

# -*- coding:utf-8 -*_

from flask import Flask,request,render_template,redirect,url_for

app = Flask(__name__)

@app.route("/")
def hello():
    return render_template("form_test.html")

@app.route("/add_entry" ,methods = ["POST"])

def add_ent():
    try:
        print(request.form["Name"])
    finally:

        return redirect(url_for("hello"))

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

```
【ポイント】
HTMLの方でadd_ent関数を実行してくださいとなってるのでadd_ent関数を定義します。
HTML側からadd_ent関数を実行したとき、自動的にlocalhost:5000/add　にリダイレクトされます。
addディレクトリへのルーティングはPOSTメソッドを受け取るために必要みたいです。

formtest.pyを実行し、
![2017-05-12_103736.jpg](https://qiita-image-store.s3.amazonaws.com/0/136336/a1366613-5e06-cf9f-2d19-931ae8840a89.jpeg)

![2017-05-12_103800.jpg](https://qiita-image-store.s3.amazonaws.com/0/136336/dbf615fe-d5e9-9e64-dc70-fff2a5674cdb.jpeg)

ターミナルに送信した文章が表示されたら成功です。

![2017-05-12_103845.jpg](https://qiita-image-store.s3.amazonaws.com/0/136336/270e8576-ae20-fa39-fafa-3446a75a3f21.jpeg)

自分はこれやってようやく理解できました。呪文多すぎや。
subjectAltNameに対応した自己署名証明書の作り方

# subjectAltNameに対応した自己署名証明書の作り方

## 背景

開発用に自己署名証明書を使っているのですが、Chrome 58からSSL証明書のCNが無視されてsubjectAltNameが必須になってしまいましたので、それに対応するための自己署名証明書を作ってみました。

## 参考元

- http://www.scispike.com/blog/openssl-subjectaltname-one-liner/

## 前提

- CentOS7のopensslを使います
- /etc/pki/tls/openssl.cnf はインストール後に変更されていないものとします
- 対象は「*.intra.hoge.jp」とします

## 作成

```shell
$ openssl req \
  -newkey rsa:2048 \
  -days 3650 \
  -nodes \
  -x509 \
  -subj "/C=/ST=/L=/O=/OU=/CN=*.intra.hoge.jp" \
  -extensions SAN \
  -config <( cat /etc/pki/tls/openssl.cnf \
    <(printf "[SAN]\nsubjectAltName='DNS:*.intra.hoge.jp'")) \
  -keyout server.pem \
  -out server.crt
```

## 生成されたファイル

- server.pem: 秘密鍵
- server.crt: 証明書

## 証明書の内容確認

```shell
$ openssl x509 -text -in server.crt

```
pyenvで複数バージョンのpython環境を使う

##目標
  - [ ] pvenvを使って複数のpythonバージョン環境を切り替えながら使う

　
##環境準備
### パッケージのアップグレード＋追加インストール
```shell-session
$ sudo apt-get update
$ sudo apt-get upgrade
$ sudo apt-get install git gcc make openssl libssl-dev libbz2-dev libreadline-dev libsqlite3-dev
```
### pyenvのインストール
```shell-session
$ cd /usr/local/
$ sudo git clone git://github.com/yyuu/pyenv.git ./pyenv
$ sudo mkdir -p ./pyenv/versions ./pyenv/shims
$ cd /usr/local/pyenv/plugins/
```
 
### Pyenv-virtualenvのインストール
```shell-session
$ sudo git clone git://github.com/yyuu/pyenv-virtualenv.git
$ echo 'export PYENV_ROOT="/usr/local/pyenv"' | sudo tee -a /etc/profile.d/pyenv.sh
$ echo 'export PATH="${PYENV_ROOT}/shims:${PYENV_ROOT}/bin:${PATH}"' | sudo tee -a /etc/profile.d/pyenv.sh
$ source /etc/profile.d/pyenv.sh
$ pyenv --version
```
 
 
### sudo時に環境を引き継げるように設定変更
```shell-session
sudo vi /etc/sudoers
    #Defaults    secure_path = /sbin:/bin:/usr/sbin:/usr/bin
    Defaults    env_keep += "PATH"
    Defaults    env_keep += "PYENV_ROOT"
```
 
### Pythonをインストール(試しに2.7.13と3.6.1をインストール)
```shell-session
$ pyenv install --list  ###インストール可能バージョンを確認
$ sudo pyenv install -v 2.7.13
$ sudo pyenv install -v 3.6.1
```
 
### デフォルトのPythonをシステムデフォルトから2.7.13に変更する
```shell-session
$ python --version
Python 2.7.6
$ pyenv versions
* system (set by /usr/local/pyenv/version)
  2.7.13
  3.6.1
$ sudo pyenv global 2.7.13
$ python --version
Python 2.7.13
$ pyenv versions
  system
* 2.7.13 (set by /usr/local/pyenv/version)
  3.6.1
```
git recent-branchとpecoでブランチ切り替えを高速に行う

# はじめに

gitで複数の機能を並行して開発する時などブランチを頻繁に切り替えることはあるかと思います。
gitでは `git checkout -`, `git rebase -` のように `-` を前のブランチのエイリアスとして使うことができますが、
三つ以上のブランチを行き来したりする際には使えません。

そこでgitで直近checkoutしたbranchを表示する `git recent-branch` というgitのサブコマンドを作成しました。

[sachaos/git-recent-branch](https://github.com/sachaos/git-recent-branch)

```
$ git recent-branch
develop                                  (16 seconds ago) Fri May 12 00:06:52 JST 2017
feature/hogehoge                         (28 seconds ago) Fri May 12 00:06:40 JST 2017
feature/test2                            (41 seconds ago) Fri May 12 00:06:27 JST 2017
master                                   (57 seconds ago) Fri May 12 00:06:11 JST 2017
feature/test                             (2 minutes ago)  Fri May 12 00:05:02 JST 2017
ae8bcd440123ee5db3fa994eb618f918a857ed5b (1 week ago)     Tue May  2 21:54:36 JST 2017
```

これと [peco](https://github.com/peco/peco) を組み合わせることで、直近checkoutしたブランチを楽に行き来することができます。

# デモ

![asciicast.gif](https://qiita-image-store.s3.amazonaws.com/0/40562/657aa1c2-0793-feb5-f484-c37d53987c5f.gif)

# Tips殴り書き

## 内部の挙動

git の操作ログはgit管理下のディレクトリにある `.git/logs/HEAD` に保持されています。
これをパースしてcheckoutのログを拾ってきて整形して表示するだけと非常にシンプルな作りになっています。
`git reflog` コマンドもこいつを利用しているようです。

## git のサブコマンドの作り方

知らなかったのですが、gitは `git-recent-branch` のようなコマンドを用意してあげれば、
`git recent-branch` と実行した時にハイフンで区切られているコマンドを実行してくれるようです。
これでサブコマンドのような振る舞いをさせることができます。

## GolangでTwitterライクな時間表示

GolangでTwitterライクな表示(7 hours ago のような)をさせる際に以下のパッケージが便利でした。
相対的な時間表示以外にもファイルサイズなど、自前で実装するのもめんどくさい便利な変換をしてくれます。

```
fmt.Printf("This was touched %s.", humanize.Time(someTimeInstance)) // This was touched 7 hours ago.
```

[dustin/go-humanize: Go Humans! (formatters for units to human friendly sizes)](https://github.com/dustin/go-humanize)

# まとめ

* `git recent-branch` というコマンドを作成しました。
* gitのサブコマンド簡単に作れるよ。
* go-humanize 便利。

作ってから数週間経ちますが、これでブランチの切り替えのストレスが解消されました。
今ではこれがない生活は考えられません。
ぜひ試してみてください。
Ruby でメタプログラミング的にフィボナッチ数列を求める

[ブログ記事](http://secret-garden.hatenablog.com/entry/2016/02/20/222316)からの転載です。

Ruby でフィボナッチ数列を求める__メタプログラミング__を書いてみた。


```ruby
class Fib
	def call n
		__send__ "_#{n}"
	end

	def method_missing name, *args
		n = name[/_(\d+)/, 1].to_i
		if n > 1
			n = call(n - 2) + call(n - 1)
		end
		define_singleton_method(name) { n } && n
	end
end


fib = Fib.new
1.upto(55) do |n|
	print "#{fib.call n} "
end
# => 1 1 2 3 5 8 13 21 34 55 89 144 233 377 610 987 1597 2584 4181 6765 10946 17711 28657 46368 75025 121393 196418 317811 514229 832040 1346269 2178309 3524578 5702887 9227465 14930352 24157817 39088169 63245986 102334155 165580141 267914296 433494437 701408733 1134903170 1836311903 2971215073 4807526976 7778742049 12586269025 20365011074 32951280099 53316291173 86267571272 139583862445
```

各項をそのままメソッドとして定義することでメモ化しています。  
Ruby だとこういう面白いコードがかけるのがいいですね。
git pull した際の unable to unlink old エラーを解決


#症状
git pull をした際に 
`error: unable to unlink old 'ファイル名'`
となり、`git status` で確認するとリモートから持ってきた他人の修正ファイル等が
自分の `modifiedファイル` や `Untrackedファイル` となっていた。 

#原因
試しに `ls -la ファイル名` で確認してみると、
ファイルの所有者とグループが `root` になっており
現在ログインしているユーザ名と異なっていた。

多分、前にrootでpull等の作業を行ったためだと思われる。

#解決
##pullしてしまったファイル等を削除してしまう
今回の場合、自分の作業ファイルとしてpullしてしまっているようで `git reset` 等は使えなそうだったので以下の方法を使いました。
<font color="DeepPink">※何か他に良い方法があれば教えてください</font>
別にログに拘らないのであれば一度全てステージしてcommitしても良いのかなーと思いました。

### 作業ファイルを取り消す
```
//全て取り消したいなら
git checkout .

//特定のファイルのみ
git checkout ファイルパス
```

### 追跡対象外のファイルを削除
```
//削除対象となるファイル一覧が表示
git clean -n

//全て削除していいなら
git clean -f

//特定のファイルだけ削除したいなら
git clean -f ファイルパス
```

試していないのですが、`特定のファイルだけ` の時に
あまりにも対象ファイルの方が多い場合は
`git stash -p` で作業ファイルを一時的に退避させるってのもできるかもしれない。

##unable to unlink oldとなってるファイルの所有者とグループを変更する

###'root' にログイン
```
su -
```

###ファイルの所有者を変更
```
sudo chown ユーザ名 -R ファイルパス
```

###ファイルのグループを変更
```
sudo chgrp ユーザ名 -R ファイルパス
```

###作業ディレクトリ内を全て変更しても構わないかもしれない
```
cd  作業ディレクトリ
sudo chown -R ユーザ名 ./
sudo chgrp -R グループ名 ./
```

##pullる
```
//ex.
git pull origin master
```
Djangoのカスタムコマンドにパラメータを追加する


## はじめに

Django玄人の皆さんにわざわざ説明するまでもないですが、Djangoでは簡単にカスタムコマンドを作成することができます！

```bash
$ python manage.py hoge
```

といった形です。 `runserver` とか `migrate` とか `makemigrations` とかの部分ですね
今回は `hoge` のあとにパラメータを追加したいなぁと思い実装したのでメモと共有

```bash:イメージ
$ python manage.py hoge 1 2
```

## 環境

- Python 3.5.1
- Django==1.11

## 実装

```bash
$ django-admin.py startapp app
```

で　`app` という名前のアプリを作成している前提で実装します

```
app/
  ├── admin.py
  ├── apps.py
  ├── models.py
  ├── tests.py
  └── views.py
```

と言ったような構成になってるかと思います。変更していなければ

```bash
$ mkdir -p app/management/commands
$ cd app/management/commands
$ touch __init__.py
$ touch plus.py # 任意の名前「plus」がカスタムコマンド名になります
```

```python:hoge.py
from django.core.management.base import BaseCommand, CommandError


class Command(BaseCommand):
    args = '<param_1 param_2 ...>'
    help = 'パラメータの合計を表示するコマンドです'

    def add_arguments(self, parser):
        parser.add_argument('parameters', nargs='+', type=int)

    def handle(self, *args, **options):
        print(sum(options['parameters']))
```

上記はとりあえずの適当なやつなのでパラメータの加算をして表示するだけのコマンドです。

```bash
$ python manage.py plus 1 2 3 4
10
```

といったような感じになるはずです！
GCPの障害情報をSlack通知する

GCPを利用したシステムを運用している場合、GCPの障害にいち早く気付きたい。
そこでSlackをRSS Readerとして、GCPのステータスを通知できるようにする。

手順は以下のサイトでFeedのURLと連携するchannelを設定するのみ
https://slack.com/apps/A0F81R7U7-rss
GCP Status DashboardのFeed URL  https://status.cloud.google.com/feed.atom

障害が起こった時に、このチャンネル内で対処を検討したりする場として利用することもできるので便利。
fishは一文字の改行なし出力をプロンプトで消してしまう

少しプロンプトという用語の使い方が怪しいです。

# <i class="fa fa-cubes"></i> 概要

原因不明。

ターミナルで出力があったとき、新しいプロンプトは出力の最後から連続して始まる。

```
# echo -n abc
abc#
(# がプロンプト)
```

ところが、fishの場合、2文字以上の出力の場合は上記のようになるが、1文字の場合、カーソルが動いてないのか、上書きしてしまう。

```
# echo -n a
#
(↑aの出力がなくなる)
```

テストコードなどで最後に結果を一文字、01やtfで出力するときなどに引っかかるかも。

# <i class="fa fa-cogs"></i> 検証環境

CentOS7

```
# bash -version
GNU bash, version 4.2.46(1)-release (x86_64-redhat-linux-gnu)
Copyright (C) 2011 Free Software Foundation, Inc.
License GPLv3+: GNU GPL version 3 or later <http://gnu.org/licenses/gpl.html>

This is free software; you are free to change and redistribute it.
There is NO WARRANTY, to the extent permitted by law.
# fish -v
fish, version 2.5.0
# python -V
Python 2.7.5
# php -v
PHP 5.4.16 (cli) (built: Nov  6 2016 00:29:02)
Copyright (c) 1997-2013 The PHP Group
Zend Engine v2.4.0, Copyright (c) 1998-2013 Zend Technologies
    with the ionCube PHP Loader (enabled) + Intrusion Protection from ioncube24.com (unconfigured) v6.0.9, Copyright (c) 2002-2016, by ionCube Ltd.
    with uopz v2.0.7, Copyright (c) 2014, by Joe Watkins <krakjoe@php.net>
    with Zend OPcache v7.0.5, Copyright (c) 1999-2015, by Zend Technologies
    with strict v0.4.1, Copyright (c) 2014, by Joe Watkins <krakjoe@php.net>
    with Suhosin v0.9.38, Copyright (c) 2007-2015, by SektionEins GmbH

```

# <i class="fa fa-code"></i> コード

実行結果に関しては概要で記したことと同じなので省略。

## <i class="fa fa-cube"></i> Shell script

```sh:vanish.sh
# -nオプションで末尾改行を消して出力
echo -n a
```

## <i class="fa fa-cube"></i> PHP

```php:vanish.php
<?php

echo 'a';

```

## <i class="fa fa-cube"></i> Python

```py:vanish.py
import sys
# pythonのprintはデフォルト改行。
sys.stdout.write('a')


```


# 出力はしている

何度か動かしていると違和感があったので、

```php
<?php

echo 'a';
sleep(1);
```

と出力からスクリプト終了まで時間を置いてみると、ちゃんとaが出力されていることが確認できた。スクリプトが終了すると、プロンプトで上書きされるようだ。
LISTENINGしているポートを調べる時の備忘録

毎回オプションを忘れてしまうのでメモ。

# LISTENINGしているポートの使用状況を調べる

TCPで(--tcp)でLISTEN(--listening)しているプログラムを(--program)詳細に(--extend)表示する。

```
$ netstat --tcp --listening --program --extend
or
$ netstat -tlp
```

# 参考

https://webkaru.net/linux/netstat-command/

http://itpro.nikkeibp.co.jp/article/COLUMN/20070124/259606/

https://www.tecmint.com/20-netstat-commands-for-linux-network-management/

https://open-groove.net/lpic/linux-network-command/
【javascript】Consoleで時間を計測

`Console`を使用することによって、簡単に時間を計測することができます。
ちょっと時間計測したいときに便利です。

使用するのは、`console.time(timerName)`と`console.timeEnd(timerName)`です。
`time(timerName)`の実行から`timeEnd(timerName)`までの間の時間を計測して表示します。
※timeとtimeEndそれぞれで指定するtimerNameは同じ文字列を指定する必要があります。



###動作確認環境
- Chrome

###コード

```js
console.time("loop time");
var num = 0;
for (var i = 0; i < 10000; i++) {
  num += 1;
}
console.log('loop count: ', num);
console.timeEnd("loop time");
```

###結果(デバックコンソール表示)

```
loop count:  10000
loop time: 1.06494140625ms
```
Android SDKのダウンロードが遅い場合の対処方法

タイトルそのままなのですが、Android SDK Manager経由でファイルをダウンロードするとすごく遅いと感じたので、対処方法調べたので簡単にまとめました

## 環境

- OS
  - Mac 10.11.6
  - Mac 10.12.4
  
- Android SDK Manager
  - 25.2.5

## 要点

- [Slow SDK download through Android SDK manager](http://stackoverflow.com/questions/6419989/slow-sdk-download-through-android-sdk-manager)が参考になったのでこれを試した
  - Android SDK Managerの設定オプションを有効にする
      - これやった感じそんなに変更なかった・・
  - ダウンロードするべきファイルを手動でダウンロードした後にAndroid SDK Managerを利用してそのファイルをインストール
      - これが有効だったのでこれ以降解説します
  
  

## 解説前に

すでに手元の環境で比較的最新のものをダウンロードしてしまっていたので **Android5.0.1(API 21）** のものを例に以下説明します。

- これ以外のAPIバージョンのものをダウンロードしたい場合には適宜読み替えてください
- Androidのパスは私の手元の環境では以下のようになってますので、パスが別の所に通ってるようならそこも適宜読み替えてください

```sh
which android
/Users/xxxx/Library/Android/sdk/tools/android
```

## 手動でファイルをダウンロードしてからインストールする流れ

流れとしては

1. Android SDK Managerを起動してダウンロード対象のSDK Platformにチェックを付けてダウンロードを開始
2. ダウンロード開始後に、一時停止をする
3. 一時停止したら、取得するべきファイル名がわかるので、Googleのダウンロードサイトからそのファイルを取得＆指定箇所に配置
4. Android SDK Managerを再起動して、SDK Platformにチェックを付けてインストール

という感じになります。

以下順番に説明します。

### ダウンロード対象ファイルを一旦ダウンロード

Android SDK Managerを起動してダウンロード対象のSDK Platformにチェックを付けて、インストールを開始します。

![ 2017-05-12 7.36.54.png](https://qiita-image-store.s3.amazonaws.com/0/10187/356ca1e6-a9bd-b6b7-12d7-38f896e9e5b6.png)


### ダウンロード開始後に、一時停止をする

ダウンロード開始後に、画面右下の一時停止できるボタンをクリックします![ 2017-05-12 7.56.28.png](https://qiita-image-store.s3.amazonaws.com/0/10187/8ddbd694-aa83-6715-9c76-0823ed0886bb.png)




### 取得対象ファイル確認

一時停止した段階で、

~/Library/Android/sdk/tempを見ると

- android-21_r02.zip
- android-21_r02.zip.inf

という2つのファイルがあるかと思います
![ 2017-05-12 7.37.26.png](https://qiita-image-store.s3.amazonaws.com/0/10187/e20ac7fe-6bbc-52fd-6f49-961e276c0a9f.png)



前者のZIPをGoogleのサイトからダウンロードします。

URLは

```
https://dl.google.com/android/repository/＜取得したいZIP＞
```

という形式のようなので今回の場合だと

https://dl.google.com/android/repository/android-21_r02.zip

になるのでWebブラウザ等で取得します。

### ダウンロードしたファイルを指定箇所に配置

上記でダウンロードしたZIPを

~/Library/Android/sdk/temp

にコピーします。

元々ダウンロードを一時停止した時に存在してるZIPファイルがあると思うのでそれを上書きします

### この段階でファイルをインストール


Android SDK Managerを再起動して、SDK Platformにチェックを付けてインストールを実行すると、上記で配置した~/Library/Android/sdk/temp配下のZIPが解凍されてインストールが行われます！




## 参考：Android SDK Managerの設定オプションを有効にする

Android SDK Manager起動したら、メニューからPreferencesを選択します。

![ 2017-05-12 7.45.32.png](https://qiita-image-store.s3.amazonaws.com/0/10187/4b80232a-4af8-3936-9afe-fa3a1e85f812.png)

![ 2017-05-12 7.44.56.png](https://qiita-image-store.s3.amazonaws.com/0/10187/0f832446-7000-bac0-fc85-279d276d2b64.png)
以下の画面が表示されるので **Force https://...** という項目のチェックを有効にします
Markdown


## 見出し

`# Title 1` 
#### Title 1

`## Title 2` 
##### Title 2

`### Title 3` 
###### Title 3

`===`
`---`

## パラグラフ

```
A

B
```
      
A

B

## 改行

```
A
B
```

A
B

## 水平線

`---`
`***`
`___`

---

## 強調表示

`*強調*`
*強調*
`**強調**`
**強調**

## 引用句

`>stay foolish!`
>stay foolish!

`>>stay foolish!`
>>stay foolish!

## コード
<code>&#096;</code>(バッククォート) ← USキーボードで「Option(⌥)」＋「チルダキー(~)」

<code>&#096;code&#096;</code>

`code`

## 複数行のコードブロック

<pre><code>&#096;&#096;&#096;
code1
code2
&#096;&#096;&#096;</code></pre>

```
code1
code2
```

## シンタックスハイライト

<pre><code>&#096;&#096;&#096;ruby (html, css, php, ruby, python…)
print \"hello world\"
&#096;&#096;&#096;</code></pre>

```ruby
print \"hello world\"
```

## 箇条書き

```
- item 1
    aaaaaaaa
- item 2
- item 3
```

- item 1
    aaaaaaaa
- item 2
- item 3

## 番号付きリスト

```
1. item 1
2. item 2
3. item 3
```

1. item 1
2. item 2
3. item 3

## 自動リンク

`<http://google.com>`
<http://google.com>

`<xxxxxxxxx@gmail.com>`
<xxxxxxxxx@gmail.com>

## インラインリンク

`[Google](http://google.com "Title")`

[Google](http://google.com "Title")

## 外部参照リンク
```
[Google][1]

[1]: http://google.com \"title\"
```
      
[Google][1]

[1]: http://google.com "title"

## 画像

`![代替テキスト](画像のURL)`

`![logo image](http://cdn.qiita.com/assets/qiita-rectangle-71910ff07b744f263e4a2657e2ffd123.png)`

![logo image](http://cdn.qiita.com/assets/qiita-rectangle-71910ff07b744f263e4a2657e2ffd123.png)

`![代替テキスト](画像のURL"タイトル")`

`![logo image](http://cdn.qiita.com/assets/qiita-rectangle-71910ff07b744f263e4a2657e2ffd123.png"Qiita")`

![logo image](http://cdn.qiita.com/assets/qiita-rectangle-71910ff07b744f263e4a2657e2ffd123.png "Qiita")

`[![代替テキスト](画像のURL"タイトル")](リンク先URL)`

`[![logo image](http://cdn.qiita.com/assets/qiita-rectangle-71910ff07b744f263e4a2657e2ffd123.png "Qiita")](http://qiita.com/)`

[![logo image](http://cdn.qiita.com/assets/qiita-rectangle-71910ff07b744f263e4a2657e2ffd123.png "Qiita")](http://qiita.com/)

## 画像 サイズ指定

`<img src="画像のURL" width="画像サイズ">`

`<img src="http://cdn.qiita.com/assets/qiita-rectangle-71910ff07b744f263e4a2657e2ffd123.png" width="50">`

<img src="http://cdn.qiita.com/assets/qiita-rectangle-71910ff07b744f263e4a2657e2ffd123.png" width="50">
Laravelのパーミッションを適切に設定

OSはUbuntu16.04
以下のコマンド上から順番に実行しないと適切に設定されない

webサーバーのApacheをインストールすると作成されるwww-dataをグループに追加する
`sudo chown -R myusername:www-data laravel-root-directory`

ディレクトリに対して権限を変更
`sudo find laravel-root-directory -type d -exec chmod 750 {} \;`

ファイルに対して権限を変更
`sudo find laravel-root-directory -type f -exec chmod 640 {} \;`

最後にストレージとキャッシュの権限を変更
`sudo chmod -R 770 laravel-root-directory/storage/ laravel-root-directory/bootstrap/cache/`
Visual Studio / WPF > 14 布局案例：编写连连看布局 > Window_Loaded()にてStackPanelにButtonを追加する例

```txt:動作環境
Windows 7 Pro (32bit)
Microsoft Visual Studio 2017 Community
Sublime Text 2
```

14 布局案例：编写连连看布局
https://www.youtube.com/watch?v=PkWk1vkAAmA&list=WL&index=31

2:00あたりでStackPanelに対して、Window_Loaded()イベントにてButtonを追加する例が紹介されている。

試してみた。

### code

```MainWindow.xaml
<Window x:Class="_170512_t0716_buttonAdd.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:_170512_t0716_buttonAdd"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <StackPanel x:Name="sp1" Grid.Column="2" Background="blue"></StackPanel>
    </Grid>
</Window>
```

```MainWindow.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace _170512_t0716_buttonAdd
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            Button btn = new Button();
            btn.Content = "hello";

            sp1.Children.Add(btn);
        }
    }
}
```

### デザイン / 実行例

デザイナ上
![work.png](https://qiita-image-store.s3.amazonaws.com/0/32870/11b19ddb-b224-c5e7-3eea-b7e6a490545d.png)

実行直後
![work.png](https://qiita-image-store.s3.amazonaws.com/0/32870/9bf51420-2f3c-d3cc-261f-bad927c649ab.png)

### 中国語 > 连连

14 布局案例：编写连连看布局の「连连」

http://cjjc.weblio.jp/content/%E8%BF%9E%E8%BF%9E
> liánlián
> （多く複音節動詞を修飾し；言葉・動作が途切れないで）続けざまに，何度も続けて．
Visual Studio / WPF > 12 Grid布局 > Gridを使って、username, password, buttonの配置をする例 | F9: デザイナ上でGrid分割線の表示・非表示

```txt:動作環境
Windows 7 Pro (32bit)
Microsoft Visual Studio 2017 Community
Sublime Text 2
```

12 Grid布局
https://www.youtube.com/watch?v=C00_2T8FrVk&index=32&list=WL

Gridを使ってのレイアウトにより、username, password, buttonの配置を行っている。

試してみた。

```MainWindow.xaml
<Window x:Class="_170512_t0655_grid.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:_170512_t0655_grid"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid Margin="20,20">
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock Text="用戸名(user name):"></TextBlock>
        <TextBox Name="T_username" Text="7of9" Grid.Column="1"></TextBox>
        <TextBlock Text="password:" Grid.Row="1"></TextBlock>
        <PasswordBox Password="12345" Grid.Column="1" Grid.Row="1"></PasswordBox>
        <Button Content="login" Grid.Row="2" Grid.ColumnSpan="2"></Button>
    </Grid>
</Window>
```

デザイナ上で
![work.png](https://qiita-image-store.s3.amazonaws.com/0/32870/c1ded7be-4839-7121-678a-15714a9a0955.png)

実行
![work.png](https://qiita-image-store.s3.amazonaws.com/0/32870/095c06f4-5209-3a27-1ebe-518457ce6142.png)

### デザイナ > F9 

デザイナ上にてF9を押すとGridの分割を表す青い線が消えた。
またF9を押すと、その線が見えるようになった。

### 中国語 > 用戸名

http://www.chinese2.jp/dic/?cn=20080220150201
> 用戸名 (yong hu ming)
> ユーザ名
[ TIPS ] WordPressでのプラグイン開発、テーマ制作のデバッグを効率良く。

![logo.png](https://qiita-image-store.s3.amazonaws.com/0/175742/8ed70b62-4b05-0077-1693-9e05a84cd477.png)
https://www.edump.net/

edumpを使うとWordPressでのプラグイン開発、テーマ制作を効率良く行う事が出来ます。通常WordPressでの開発では、WordPress内部に持っている「WP_DEBUG」を有効にしたり、ログを出力しつつ開発を進めます。ただ様々なロジックが同時にWordPress内で動作するので、様々な要因でプログラムの挙動がおかしくなったり、内部エラーが発生したりします。

edumpはWordPressへのプラグインが提供されており、そのプラグインをインストールする事により、PHPのdisplay_errosの設定には関わらずWordPress内部のエラー情報をedumpで獲得出来ます。PHPのNotifications, Warning, Fatal Errors等を自動的にedumpは取得します。

下記の設定画面でedumpのメッセージIDを入力して、チェックボックスを入れると機能が有効になります。
![20150511-wordpress-ja.jpg](https://qiita-image-store.s3.amazonaws.com/0/175742/04d187b9-380f-915f-e2d5-92f91465c1c2.jpeg)

また本プラグインをインストールすると同時にWordPress内でPHPとJavaScript版のedumpのデバッグ機能を呼び出せる様になります。WordPressのシステムの設定を変更する必要もありませんし、いざとなれば本番環境で稼働するWordPressの問題解決にも貢献します。一度試してみてはいかがでしょうか？

![20150511-wordpress-ja-2.jpg](https://qiita-image-store.s3.amazonaws.com/0/175742/977affc9-e145-0542-fb5e-4d0c737d02f1.jpeg)


初めての方向けのedumpの使い方は下記のチュートリアルが分かりやすいです。
https://www.edump.net/res/GettingStartedWithEdump_ja.pdf

![logo.png](https://qiita-image-store.s3.amazonaws.com/0/175742/8ed70b62-4b05-0077-1693-9e05a84cd477.png)
https://www.edump.net/
Visual Studio / WPF > 11 StackPanel布局 > Button内にImageとTextBlockを配置するためにStackPanelを使用

```txt:動作環境
Windows 7 Pro (32bit)
Microsoft Visual Studio 2017 Community
Sublime Text 2
```

11 StackPanel布局
https://www.youtube.com/watch?v=bFbqKxbLDSA&list=WL&index=31

Button.Cotent内にImageとTextBlockを配置する例にてStackPanelを使う方法を紹介している。

試してみた。

### 手順

work.pngという画像を用意して、プロジェクトに追加しておく。
[Visual Studio / WPF > コントロール > Image > 画像が見えない > Resourceとしてファイルを追加する / Ctrl+vでファイルを追加する](http://qiita.com/7of9/items/d20435d62fd5be390194)

以下のようにXAMLを用意する。

```MainWindow.xaml
<Window x:Class="_170512_t0624_stackPanel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:_170512_t0624_stackPanel"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button HorizontalAlignment="Left" Margin="52,51,0,0" VerticalAlignment="Top" Width="424" Height="199">
            <Button.Content>
                <StackPanel>
                    <TextBlock>You press the button,</TextBlock>
                    <Image Source="work.png" Height="100"></Image>
                    <TextBlock>we do the rest</TextBlock>
                </StackPanel>
            </Button.Content>
        </Button>

    </Grid>
</Window>
```


![work.png](https://qiita-image-store.s3.amazonaws.com/0/32870/2a6dc1cf-7a01-7282-e634-4edf379e489b.png)

[You press the button, we do the restというフレーズはこちらから借用](http://artscape.jp/artword/index.php/%E3%82%A4%E3%83%BC%E3%82%B9%E3%83%88%E3%83%9E%E3%83%B3%E3%83%BB%E3%82%B3%E3%83%80%E3%83%83%E3%82%AF%E7%A4%BE)


### 中国語 > 布局
bùjú
http://cjjc.weblio.jp/content/%E5%B8%83%E5%B1%80
>  （都市・工業などの）構成，配置，レイアウト．

### 中国語 > "."

"."のことをdianと言っているのかもしれない。
Button.Content (ボタン dian Content)

http://www.geocities.jp/sashasakura_chinese/jikan.html

http://cjjc.weblio.jp/content/%E5%8F%A5%E5%8F%B7
> 句点（。），ピリオド（．）．⇒标点符号 biāodiǎn fúhào ．

### 点
(追記 2018/10/19)

点: Diǎnと同じなのだろう。
技術英語 > only if it [is properly installed], properly operated, and properly maintained / link: appropriate vs proper > 更新停止

BANNER社のEZ-SCREEN LS Safety Light Screen
https://www.bannerengineering.com/us/en/products/machine-safety/safety-light-curtains/simple-rugged-safety-light-curtains-ls-series.html
Instruction Manual
http://info.bannerengineering.com/cs/groups/public/documents/literature/179480.pdf
p5

> The device can provide the required safeguarding function only if it **is properly installed**, properly operated, and properly maintained.

意訳 「この装置は、適切に設置され、適切に操作され、適切に保守された場合に限り、要求される安全防護機能を提供することができます。」

https://www.merriam-webster.com/dictionary/proper
> 8 :  marked by suitability, rightness, or appropriateness

<hr>
Yosh ｙさんによる記事
https://ameblo.jp/moominpapa-2010/entry-10786520275.html
> appropriate vs proper

> Properは”本来持っている特性に対して、適正であるか”とか”本質に対して、忠実であるか”という意味があります。

<hr>
BANNER社の製品取説に戻ると、「本来装置が持っている特性に対して忠実になるためにproperly installed, properly operated, properly maintainedしてください」ということなのだろう。

### 更新停止
(追記 2017/05/12)

TechEnglishとしての投稿はQiita上ではこれが最後です。

移行先をいくつか試して、検索性の高さからesa.ioにすることにしました。

投稿した記事に関してコメントいただき、自分が知らない事項を学ぶ機会があったことはQiitaの良い点でした。

TechEnglish以外で、各種トラブルシューティングや、設計検討、プログラミングに関する投稿はQiitaで継続するか、esa.ioに完全移行するかは思案中です。
rechartsの任意ラベルと線の付け方

## recharts.js使用中に習得した経験をメモします。

- 任意ラベル

textタグで座標を指定することで、必要なところでラベルを付けることができます。

```html
<text x={0} y={100}>my label </text>
```

- 任意線

lineタグで線の属性を指定することで、必要なところで線を引くことができます。

```html
<line x1={0} y1={200} x2={600} y2={200}>my label </text>
```

## 注意
- 上記**t**extタグはrecharts内部用のhtmlタグであり、折り線の描画のための**T**extコンポーネントではなりません。
- 上記**l**ineタグはrecharts内部用のhtmlタグであり、折り線の描画のための**L**ineコンポーネントではなりません。
safariのCSSバグ

## iOS9.3.5でCSSで重なるエレメントの描画がおかしいバグが見つかりました。

```
<textarea />
<p> 0 / 100 </p>
```

textareaに入力された文字数をリアクティブにpタグに更新します。
CSS設定によりpタグがtextareaの上に浮かんでいます。

### 問題点
入力された文字数がうまく更新されない時があります。発生確率が高くて、気づかないことがないと思います。
一定の数字が入力されたら、更新後の文字数が描画されるおうに見られています。
例えば、「a」を打つタイミングで、「1 / 100」が表示されますが、「ab」を入力しても、「1/100」のままで、「abcd」を入力したら、やっと「4/100」に更新されます。

但し、デバッグでDOMを確認すると、「ab」が入力されたタイミングでpタグが既に「2/100」に更新されています。
下記理由で、これはiOS9.3.5のバグではないかと思われます。
・iOS10の場合は該当問題がありません。
・pタグをtextarea上に浮かばないようにする場合、問題ありません。
無効状態のtextarea文字の色

## textareaタグdisabled属性の効果
safariの場合、無効になったtextareaが入力できず、文字の色がグレイになります。

## HTML5標準仕様
文字をグレイにするかどうかは、W3c標準上には規定がありません。そのため、chromeとsafariの実装が違います。

## CSSで文字colorをコントロールできるか
ブラウザの実装ロジックが優先されているので、CSS設定で完全にコントロールすることができません。
safariで確認したところ、colorにredに設定しても、本来の赤色ではなく、薄く見えるような赤色になります。

## 薄く見えることをなくすために
opacityを設定します。

```
<textarea disabled style={{ color: 'red', opacity: 1 }}/>
```