OmniAICreator/Qiita-1.07M huggingface dataset:
[jQuery]またまた力技！テーブルのレスポンシブ対応例


前回、[[jQuery]力技！苦肉の策でテーブルをレスポンシブウェブデザインに対応した一例](https://qiita.com/noqua/items/0bc1116be8e68a04bab8)という記事を投稿しました。
テーブルのレスポンシブ対応というのは、毎度悩ましいものです…。

前回の例では、アコーディオンにすることで横幅問題を（無理やり）解決していました。
ただ、やはり見たい情報を初見で確認出来ないというのは大変不親切なので、今はこの方法はほとんど採用していません。

そこで今回はきちんとセルを表示しつつ、モバイルの横幅にも対応する方法になります。

## 仕様と表示例

こちらが出来上がりイメージです。
![responsive_table.gif](https://qiita-image-store.s3.amazonaws.com/0/62022/e79edcb5-045f-81bc-58f6-de3e6e98744e.gif "レスポンシブテーブルの出来上がりイメージ")


基本のスタイルはbootstrapを採用しています。
モバイル表示では```thead```を非表示にし、その代わりに```tbody```のセルにそれぞれ```thead```のテキストを```tbody```のセルに表示させます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/62022/e13c4617-b4fa-9b7a-b759-895ae8e2d6d8.png" alt="モバイルの仕様イメージ" width=50%>

といってももちろんセル一つ一つにテキストを打ち込んでいるわけではありません。
```<span></span>```といった無意味な空タグも置きません。
jQueryでtheadのテキストを取得し、tbodyの該当セルのdata属性にテキストを追加する方法になります。

## コード
### HTML

※上記サンプルのhtmlコードです。
必要なのは基本的なコードだけで、特殊なclassやタグは不要です。

```html
<table class="table table-bordered">
	<thead>
		<tr>
			<th>#</th>
			<th>プラン1</th>
			<th>プラン2</th>
			<th>プラン2</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>1</th>
			<td>プラン1のセル</td>
			<td>プラン2のセル</td>
			<td>プラン3のセル</td>
		</tr>
		<tr>
			<th>2</th>
			<td>プラン1のセル</td>
			<td>プラン2のセル</td>
			<td>プラン3のセル</td>
		</tr>
		<tr>
			<th>3</th>
			<td>プラン1のセル</td>
			<td>プラン2のセル</td>
			<td>プラン3のセル</td>
		</tr>
	</tbody>
</table>
```

### CSS

モバイル用にのみ記述します。

```css
@media screen and (max-width: 767px) { /* ブレイクポイントは適宜指定してください */
	thead {
		display: none;
	}
	tbody td {
		display : block;
	}
	tbody td:before {
		content : attr(data-head);
		display : block;
		font-weight: bold; /* 太字が必要な場合だけ */
	}
}
```

### jQuery

※jQueryは先に読み込んでおいてください。


1. ```thead th```のテキストを取得
2. ```tbody td```に```data-head```属性を追加
3. 取得した```thead th```のテキストを```tbody td```の```data-head```属性へ当てはめる

という処理順になります。


```javascript
var tableHeads = $('thead th').length;
var header = [];
for (var cellCount = 0; cellCount < tableHeads; cellCount++) {
	header.push($('thead th').eq(cellCount).text());
}

$('tbody th').attr('data-head',header[0]);

for (var cellCount = 1; cellCount <= tableHeads; cellCount++) {
	$('tbody tr').each(function() {
		$(this).find('td').eq(cellCount - 1).attr('data-head',header[cellCount]);
	});
}
```

***

▼出来上がりイメージ
![responsive_table.gif](https://qiita-image-store.s3.amazonaws.com/0/62022/e79edcb5-045f-81bc-58f6-de3e6e98744e.gif "レスポンシブテーブルの出来上がりイメージ")

結局見た目のためにdata属性を操作することになるので完全なレスポンシブとはいきませんが、そのセルが何を示すのかの伝わり方は改善されたと思います。

[前回の記事](https://qiita.com/noqua/items/0bc1116be8e68a04bab8)ではウィンドウサイズを変更した場合の処理なども書いているので、必要でしたらそちらも参考にしていただけると幸いです。
PowerShellでファイル名をリスト化する

#Windows PowerShell　備忘録

フォルダー内のファイル名をテキストファイルに列挙させます。　

該当フォルダーで右クリック、メニューストリップから「PowerShellウィンドウをここで開く」を選択。

```get-childitem　-recurse -name > nameOfFolder/files.txt```

※PowerShellを利用するには、.Net Frameworkが導入されている必要があります。

-name のほかの属性は以下の通り。

| 属性            |       意味       | 
|------------------|-------------------|
| Attributes   |  属性の値|
|CreationTime| 作成年月日|
|Extension|拡張子|
|FullName|絶対パス|
|LastAccessTime|最終アクセス年月日|
|LastWriteTime|最終更新年月日|
|Length|ファイル・サイズ|
|Name|フォルダ／ファイル名|
TECS CDE ダウンロードから表示まで

#TECS CDEダウンロードから表示まで
---
TECS CDEはTECSのコンポーネント図を編集するGUIツールです。CDLファイルを入力とします。  
ここではダウンロードから表示するまでの方法をまとめます。
![TecsCde.PNG](https://qiita-image-store.s3.amazonaws.com/0/207569/a9641f4a-142e-fb41-93eb-47a44c7d364b.png)


![tecscde参考図](TecsCde.png "TECSCDE表示例")

【動作環境】
・MinGW 版を使用する場合(Windows)

###ダウンロード・解凍
---

[TECS CDE 用 MinGW ランタイム](http://dev.toppers.jp/trac_user/contrib/wiki/tecs)
から**tecscde-MiGW-RT.tgz**をダウンロードします。

[TOPPERS プロジェクト](https://www.toppers.jp/tecs.html#d-package)
から**tecsgen-1.5.0.tgz**をダウンロードします。

ダウンロードした2つのファイルを同じディレクトリで解凍します。以下のコマンドを用います。

	% tar xvzf tecscde-MiGW-RT.tgz
	% tar xvzf tecsgen-1.5.0.tgz





５つのディレクトリ、ファイルをtecsgen/tecsgen/にコピーしておきます。

	% cp -pr tecscde/tecsgen/MinGW tecsgen/tecsgen/
	% cp -pr tecscde/tecsgen/Ruby200 tecsgen/tecsgen/
	% cp -pr tecscde/tecsgen/tecsgen.exe tecsgen/tecsgen/
	% cp -pr tecscde/tecsgen/tecscde.exe tecsgen/tecsgen/
	% cp -pr tecscde/tecsgen/tecsmerge.exe tecsgen/tecsgen/

### CDLファイルを表示
---

tecscde.exeのあるディレクトリ(tecsgen/tecsgen/)にパスを通してください。  
ディレクトリtecsgen/にある**set_env.sh**を用い以下のコマンドを用いることでも設定できます。

	% source set_env.sh
この操作はシェルを起動するごとに行う必要があります。  

最後に図として表示したいCDLファイルがあるディレクトリで

	% make TECSGEN=tecscde.exe tecs
と入力することで表示できます。   
このときtecsgenを起動するような**Makefile**が必要。  
すでにmake tecsしている場合は
**make realclean**しておく必要もあり。

自分は上の流れが面倒なのでbashファイルに  

	function cdepath(){  
		cd /解凍したディレクトリ/tecsgen/;  
		source set_env.sh;  
		cd -;  
	}  
	alias cdepath=cdepath  
	alias CDE='make TECSGEN=tecscde.exe tecs'  
を書き込み**cdepath**、**CDE**の入力で表示できるようにしました。
### 参考
---
[TOPPERSプロジェクト](https://www.toppers.jp/index.html)  
[tecs contributed software](http://dev.toppers.jp/trac_user/contrib/wiki/tecs)
ownCloudをUbuntuへインストールする

# ownCloudをUbuntu16.04へインストール

## rootへ変更

```shell-session
$ sudo su -
```

## 必要なパッケージのインストール 

```shell-session
$ apt update -y
$ apt upgrade -y
$ apt install -y apache2 mysql-server php libapache2-mod-php php-mcrypt php-mysql
$ apt install -y php7.0-mcrypt php7.0-mysql php7.0-zip php7.0-xml php7.0-mbstring php7.0-gd php7.0-curl php-smbclient
```

## サービスの起動と有効化

### Apache2

```shell-session
$ a2enmod rewrite
$ systemctl start apache2
$ systemctl enable apache2
```

### MySQL

```shell-session
$ systemctl start mysql
$ mysql_secure_installation
$ systemctl enable mysql
```

## ownCloud

### ownCloudリポジトリのインストール

```shell-session
$ curl https://download.owncloud.org/download/repositories/stable/Ubuntu_16.04/Release.key | sudo apt-key add -
$ echo 'deb http://download.owncloud.org/download/repositories/stable/Ubuntu_16.04/ /' > /etc/apt/sources.list.d/owncloud.list
```

### ownCloundパッケージのインストール

```shell-session
$ apt update -y
$ apt install owncloud-files
$ systemctl restart apache2
```

### MySQLにデータベースを作成

```shell-session
$ mysql -u root -p
Enter password:
mysql> CREATE DATABASE owncloud;
mysql> CREATE USER 'owncloud'@'localhost' IDENTIFIED BY 'OKMj9ttZcChTUWcs';
mysql> GRANT ALL PRIVILEGES ON owncloud.* TO 'owncloud'@'localhost';
mysql> FLUSH PRIVILEGES;
mysql> exit
```
Riot.jsでタグのclassやonclickを動的に変更する方法

# 結論

出力する部分をriot関数化しておけばおけ。

## 追記(2017/10/17 17:44)

単純な場合は`class={つけたいクラス名:真偽値}`みたいな感じでいけます。
tempakyousuke さん感謝!


# 事情

Riot.jsでpaginationを実装していたときに、現在表示している部分だけ表示を切り替えたかった。が、うまくいかなかった。
classの指定を動的に切り替える方法が調べてもすぐ出てこなかったのでまとめ。

# 説明

```
<base_list>
 <ul class="pagination">
  <li each={page in pages} class="page-item">
   <a class="page-link" href="#" onclick="">
    {page[0]}
   </a>
  </li>
 </ul>
</base_list>

var self = this;

function paging(url){
 if(url == null){return;}
 get_data(url, function(data){
  self.start = data.offset + 1;
  self.pages = data.pages;
  self.update();
 });
}
```

![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/162555/8ca8e34f-b092-aef4-b6d6-4b23d9af58c8.png)

上は作成したriot tagのpagination部分の抜粋。現在表示されているリスト部分を図のように青くしたかった。上のコードでは当然のように表示されている部分が青くなったりはしない。
`pages`の中にリスト表示位置の最初の数字とURLのタプルからなる配列が格納されている。

最初はjsonでデータをうけとったタイミングでループを回して文字列やJS関数として展開していたのだが、評価タイミングの問題などでうまくいかなかった。
showやif等も使ってみたがうまくいかないので、最終的に下記のようにして解決した。

```
<base_list>
 <ul class="pagination">
  <li each={page in pages} class="page-item{get_paging_link_class(page[0])}">
   <a class="page-link" href="#" onclick={get_paging(page[1])}>
    {page[0]}
   </a>
  </li>
 </ul>
</base_list>

var self = this;

function paging(url){
 if(url == null){return;}
 get_data(url, function(data){
  self.start = data.offset + 1;
  self.pages = data.pages;
  self.update();
 });
}
get_paging_link_class(start){
 if(start == self.start){return " active";}
 return "";
}
get_paging(url){
 return function(e){paging(url);}
}
```
blockを使ったコールバック

Objective-cのコールバック処理に関して、普段からデリゲートばかり使っていたので、今回初めてblockを使って、コールバック処理を行ってみました。
最低限の処理しかしていないですが、備忘録として残します。

今回は、処理の完了後にコールバックでテキスト型の値を受け取り、出力しています。

###必要となるhandlerの定義

```Objective-c:OtherClass.h
typedef void (^CallbackHandler)(NSString *returnText);

@interface OtherClass : NSObject

-(void)doSomeWorkWith:(CallbackHandler)handler;

@end
```

```Objective-c:OtherClass.m
#import "OtherClass.h"

@interface OtherClass ()

@end

@implementation OtherClass

-(void)doSomeWorkWith:(CallbackHandler)handler {

    // 何らかの処理を行います。

    // 処理結果を用意
    NSString *returnText = @"処理結果テキスト";
    
    // コールバックが指定されている場合には、それを呼び出す。
    if (handler) {
        handler(returnText);
    }
}

@end

```

###実行結果
ボタンを押下することで”処理結果テキスト”が出力されるようにします。

```Objective-c:ViewController.m
#import "ViewController.h"
#import "OtherClass.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
}

- (void)call {
    OtherClass *otherClass = [OtherClass new];
    
    [otherClass doSomeWorkWith:^(NSString *returnText) {

    // OtherClassのdoSomeWorkWithメソッド完了後、受け取った結果を出力
        NSLog(@"%@", returnText);
    }];
}

- (IBAction)blockTest:(id)sender {
    [self call];
}

@end 
```

##まとめ
今回は、そのほかの処理を入れませんでしたが、非同期処理、並列処理の際は必要となると思いますので、
より実用的な形で使えるよう勉強を続けたいと思います。
加えて、デリゲート比べて、簡単に書けるため、用途に応じて使い分けたいと思います。
golangぷちメモ2

json.Marshalんときも同じハマり方をしたのに今回は30分くらい時間を浪費してしまったのでもうメモっておく。

MethodByName使って文字列でメソッド呼びたいとして。
(そもそもreflectパッケがあんまり早くないとかいろいろあるらしいのでこういう手法を取ろうとすること自体の是非はあるけど、一旦そこは無視)

```
package main

import (
	"fmt"
	"reflect"
)

type vvv struct {}
func (v *vvv) test1() {
	fmt.Println("test1")
}
func (v *vvv) Test2() {
	fmt.Println("test2")
}


func main() {
	t1 := &vvv{}
	//reflect.ValueOf(t1).MethodByName("test1").Call([]reflect.Value{})
	reflect.ValueOf(t1).MethodByName("Test2").Call([]reflect.Value{})
}

```

コメントアウトしてるほうは動きません。
そら確かにパッケージちげえもんな…参照できんわな…
sshの際にルートユーザー権限を付与する

## やりたかったこと

以前に書いた[EC2内に作業用ユーザーを追加して、新規鍵を元にSSH接続する手順](https://qiita.com/sayama0402/items/25fc56ca6caed852ca4c)の続きのような感じなのだけれど、scpやrsyncなどでファイルをアップロードするときに、他社用に作ったユーザーでは権限がないと言われてしまうので、scpやrsyncを行えるように権限周りの設定をちょっと変更した。

## 手順

作成したユーザーでコマンド実行時にpasswordを入力しなくても大丈夫なようにする。
なお前回の記事の続きのようなものなので、ユーザーはhogeuserを例とする
EC2インスタンス内で以下を実行。
生成するファイル名はユーザーの名前なので、今回だと`hogeuser`というファイルを生成する

```
// ルートユーザーになる
$ sudo -i

// ファイルを作成し、編集を行う
$ vi /etc/sudoers.d/hogeuser

// 以下を追記
hogeuser ALL=(ALL) NOPASSWD:ALL

// 以上入力後保存して終了
```

上記実行後`scp`や`rsync`コマンドが使えるようになる
MFCでダイアログのDoModalに失敗する。

MFCでダイアログベースのアプリを作成しているときに、
別のダイアログをモーダルで開こうとしたところ、失敗してIDABORT(-1)で
即時戻ってきた。OnInitDialogも呼ばれず。

調べたところ、DoModalで開こうとしていたダイアログで
RichEdit2.0を使っていたことが原因。

RichEditを使うときは、AppクラスのInitInstanceで、
AfxInitRichEdit2()を呼び出す必要があるようだ。

知らなかったなぁ
【opensaml】Tomcat→weblogicに移行したらNoClassDefFoundErrorが発生

opensamlライブラリを使用してSAML認証を行うプログラムを作成し、
Tomcat環境で動作確認後weblogicサーバーにデプロイした所NoClassDefFoundErrorが発生。
javaのバージョンは6。
opsensamlのバージョンは2.6.6。

ググってみたら同様の事象が下記に記載されていました。
>https://stackoverflow.com/questions/30227152/opensaml-throws-java-lang-noclassdeffounderror-only-on-weblogic

上記に下記ライブラリを削除したらとりあえず動くと書いてあったのでこちらのサーバー上でも同じことを試してみたら確かにうまく動作しました。
・com.bea.core.bea.opensaml2_1.0.0.0_6-1-0-0
・com.bea.core.bea.opensaml_1.0.0.0_6-1-0-0

反対に上記のライブラリをTomcat環境に配置して動作させてみたところweblogic環境と同じエラーが発生。

上記結果からライブラリのロード順の問題の線で調査した所、下記にそれっぽいことが記載されてました。
>http://otndnld.oracle.co.jp/document/products/wls/docs92/programming/classloading.html#wp1082452

どうやらweblogicはアプリで配置したライブラリのディレクトリ(～/WEB-INF/lib/)に優先して
ロードするライブラリのディレクトリがあり、今回はそちらに存在する上記opensamlにこちらで配置したアプリから呼んでいるopensamlのクラスが無いためエラーが発生した模様。

なのでこちらで配置したopensamlライブラリを優先できないか調べた所、weblogic.xmlに[prefer-application-packages]タグで優先したいパッケージ名を指定することで可能とのことだったので該当タグをweblogic.xml追記したところ問題解決しました(下記ドキュメントを参照しました)。

>https://docs.oracle.com/cd/E72987_01/wls/WLPRG/classloading.htm
>https://docs.oracle.com/cd/E28613_01/web.1211/b65890/weblogic_xml.htm

以下、追記した内容になります。

```
    <prefer-web-inf-classes>false</prefer-web-inf-classes>
    <prefer-application-packages>
       <package-name>org.opensaml.*</package-name>
    </prefer-application-packages>
```

prefer-application-packagesタグを使用する場合はprefer-web-inf-classesタグにfalseを指定することが必要の様です。ちなみにアプリで配置したライブラリ全てを優先してロードさせたい場合はprefer-web-inf-classesタグにtrueを指定するとよいみたい。

>http://otndnld.oracle.co.jp/document/products/wls/docs92/webapp/weblogic_xml.html

xmlの全文は下記の通り。

```weblogic.xml
<?xml version='1.0' encoding='UTF-8'?>
<weblogic-web-app xmlns="http://xmlns.oracle.com/weblogic/weblogic-web-app" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.oracle.com/weblogic/weblogic-web-app http://xmlns.oracle.com/weblogic/weblogic-web-app/1.3/weblogic-web-app.xsd">
  <session-descriptor></session-descriptor>
  <jsp-descriptor></jsp-descriptor>
  <container-descriptor>
    <prefer-web-inf-classes>false</prefer-web-inf-classes>
    <prefer-application-packages>
       <package-name>org.opensaml.*</package-name>
    </prefer-application-packages>
 </container-descriptor>
   <context-root>/</context-root>
   <wl-dispatch-policy>******</wl-dispatch-policy>
 </weblogic-web-app>
```

もしかしたら同じ問題がまた出るかもしれないので残しとこーっと。
Railsでgem無しに手軽にenumをi18nに対応させる

ActiveRecordのenumをi18n対応させたり、formのselectでの表示に対応するためにgemが幾つかありますが、そこまで複雑なことがやりたかったわけでは無いので、手軽に自分で実装してみます。

## ja.yml

モデルのattributeのi18nは通常、`'activerecord.attributes.#{model_name}.#{attribute}'`に定義します。例えば、Userモデルのnameに適用する場合には、

```yaml
ja:
  activerecord:
    models:
      user: ユーザー
    attributes:
      user:
        name: 名前
```

という形で定義し、`User.human_attribute_name(:name)`という形でアクセスします。

それでは、例えば`female`と`male`というを値を持つ`gender`という属性を定義します。

```ruby
class User < ApplicationRecord
  enum gender: [:female, :male]
end
```

この場合、それぞれの値に対する国際化対応の手段は標準では用意されていません。正確には、定義の仕方は用意されていますが簡単にアクセスできる手段はありません。

定義する場合には、以下のように直接定義することは出来ません。

```yaml
ja:
  activerecord:
    models:
      user: ユーザー
    attributes:
      user:
        gender: 
          female: 女性
          male: 男性
        # このネストの仕方は、複数値で形が変わる英語のような言語のための機能とバッティングします
```

この場合、以下のような形でモデルと同じ階層に定義してあげる必要があります。(http://guides.rubyonrails.org/i18n.html)

```yaml
ja:
  activerecord:
    models:
      user: ユーザー
    attributes:
      user:
        name: 名前
        gender: 性別
      user/gender: 
        female: 女性
        male: 男性
```

このように定義することで、`User.human_attribute_name('gender.female')`のようにアクセス出来るようになります。また、この場合`User.human_attribute_name('gender')`も問題なく呼ぶことが出来ます。

## Model

定義とアクセスの方法がわかったので、後はモデルにメソッドを追加していきます。

```ruby
class ApplicationRecord < ActiveRecord::Base
  self.abstract_class = true

  def self.human_attribute_enum_value(attr_name, value)
    human_attribute_name("#{attr_name}.#{value}")
  end

  def human_attribute_enum(attr_name)
    self.class.human_attribute_enum_value(attr_name, self[attr_name])
  end
end
```

これで、以下のようにアクセスすることが出来ます。

```ruby
u = User.new(gender: 'female')
u.human_attribute_enum(:gender) #=> 女性

User.human_attribute_enum_value(:gender, :male) #=> 男性
```

selectに値を渡したい場合には

```ruby
User.genders.map {|k, _| [User.human_attribute_enum_value(:gender, k), k] }.to_h #=> {"女性"=>"female","男性"=>"male"}
```

のように定義出来ます。或いはメソッドを更に追加しても良いかもしれません。

```ruby
class ApplicationRecord < ActiveRecord::Base
  # ...

  def self.enum_options_for_select(attr_name)
    self.send(attr_name.to_s.pluralize).map {|k, _| [self.human_attribute_enum_value(attr_name, k), k] }.to_h
  end
end

User.enum_options_for_select(:gender) #=> {"女性"=>"female","男性"=>"male"}

```

## まとめ

むやみにgemを追加していくことは避けたいと思うので、国際化対応が出来ればそれでOKくらいの用途であればこのくらい手軽な定義でも困らないんじゃないかなと思います。
【脆弱性診断内製化】Firefoxでプロファイル管理

# 脆弱性診断の内製化のために

普段仕事で使用しているパソコンで脆弱性診断をすると、プロキシ設定やCookie、履歴などが共有されるがゆえの不都合やトラブルが煩わしい！

なんて思いのせいで脆弱性診断の内製化に対して消極的になってませんか？

ここでは、そんなアナタのために、Firefoxの「プロファイル」機能をご紹介します。

# Firefoxのプロファイルとは
https://support.mozilla.org/ja/kb/profiles-where-firefox-stores-user-data より引用
> Firefox は、ホームページ、ツールバー、インストールした拡張機能、ブックマーク、パスワード、ユーザー設定などのあなたの個人情報を プロファイル と呼ばれる特別なフォルダーに保存しています。プロファイルは Firefox のプログラムフォルダーとは別の場所に保存されています。そのため、Firefox をアンインストールしても、あなたの設定が失われることはありません。また、あなたの設定情報を消去するためや問題を解決するために Firefox を再インストールする必要はありません。

「プロファイルと呼ばれる特別なフォルダ」にFirefoxの設定のほとんどが保存されています。Firefoxには、プロファイルを複数定義して管理する機能が標準で装備されています。

早速、脆弱性診断専用のプロファイルを作成してみましょう。

----

# プロファイル新規作成

デスクトップやタスクバーにある「Mozilla Firefox」のアイコンを右クリックして「プロパティ」を開きます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/28161/2bf2ccef-70fa-f14d-90d9-97d4adbab139.png)

----

# オプション追加
「リンク先」の末尾に「 -P」を追加して【OK】をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/28161/fbe18bc2-a5b9-fd62-bcbf-f437f385001b.png)

----

# ユーザープロファイルの選択
「 -P」を追加したショートカットアイコンからFirefoxを起動すると「Firefox - ユーザープロファイルの選択」ダイアログが表示されます。

ダイアログの【新しいプロファイルを作成(C)...】ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/28161/bcbc8769-9da0-794c-71d1-11790fbee2a5.png)

----

# プロファイル新規作成
「プロファイル作成ウィザードの開始」ダイアログで【次へ】ボタンをクリックして、「プロファイル作成ウィザードの完了」ダイアログで任意のプロファイル名を入力して【完了】ボタンをクリックすると新しいプロファイルが追加されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/28161/a800b861-5383-510e-2955-28b90fdf31b1.png)<p></p>
![image.png](https://qiita-image-store.s3.amazonaws.com/0/28161/210e7812-4cc7-54cc-ffa5-e93d2d04d3d2.png)<p></p>
![image.png](https://qiita-image-store.s3.amazonaws.com/0/28161/68048e68-710a-65b8-4ddf-c3a0891f7854.png)<p></p>

----
作成したプロファイル名を選択して【Firefoxを起動】ボタンをクリックするとFirefoxが起動します。以下は新規プロファイルで初めて起動した例です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/28161/76f072ae-c8e6-0bec-a7a1-db8c09289900.png)
Docker for Windowsのインストール(Windows10 pro)


# Hyper-Vの有効化

Docker for Windowsを動かすために、まずHyper-Vの有効化を行う

1. スタートボタンを右クリック
2. ”アプリと機能”を選択
3. "プログラムと機能"を選択
4. "Windowsの機能の有効化または無効化"を選択
5. Hyper-Vにチェックを入れて有効化する
6. 再起動を促されるので、再起動する

# Docker for Windowsをインストール

https://docs.docker.com/docker-for-windows/install/
からDocker for Windowsの安定版(Stable)のインストーラーをダウンロードして実行する

インストール完了すると
Hyper-Vマネージャに
MobyLinux.VMというのが追加されている
![hyperv.PNG](https://qiita-image-store.s3.amazonaws.com/0/193119/ff9a2dde-cd3a-03d9-be71-ea81951e8a7d.png)

Hyper-Vマネージャの起動方法については
コントロールパネル->管理ツール->Hyper-Vマネージャー
もしくはスタートボタンから"Hyper-V"で検索すると
"Hyper-V マネージャ"が見つかるはずなので、そこから起動できる

# コマンドの確認

PowerShellを起動して
下記コマンドを実行して動作確認

```ps1
docker version
```

下記のような表示がされれば問題なく動いている

```ps1
PS C:\Users\xxxxx> docker version
Client:
 Version:      17.09.0-ce
 API version:  1.32
 Go version:   go1.8.3
 Git commit:   afdb6d4
 Built:        Tue Sep 26 22:40:09 2017
 OS/Arch:      windows/amd64

Server:
 Version:      17.09.0-ce
 API version:  1.32 (minimum version 1.12)
 Go version:   go1.8.3
 Git commit:   afdb6d4
 Built:        Tue Sep 26 22:45:38 2017
 OS/Arch:      linux/amd64
 Experimental: true
```

参考:
[俺のDocker - Windows10にインストール](https://qiita.com/Ogaaaan/items/99fe54f052ca450889f7)
EclipseのサーバーからTomcatが起動しない

❇︎メモ

## 環境
OS: macOS High Sierra (10.13)
Eclipse: 4.7.0

## きっかけ
EclipseのサーバーからTomcat7を「開始」した際に以下のエラーが表示される。
![スクリーンショット 2017-10-16 17.31.49.png](https://qiita-image-store.s3.amazonaws.com/0/136954/5cf3a20c-4035-c5c5-b498-a2b526722bbe.png)

## 原因
Tomcatを起動したまま、Eclipseが終了してしまった場合にTomcatのプロセスが終了されずに残り続けてしまうことが原因。

## 対応
ターミナルにて以下のコマンドでtomcatのプロセスを取得。

```
ps -ef | grep tomcat
```

すると以下のようにtomcatでgrepされたプロセスの一覧を得られる。

```  
502 58705     1   0  5:27PM ??         0:16.96 /Applications/Eclipse_4.7.0.app/Contents/java/7/Home/bin/java -Djava.ext.dirs=/Applications/Eclipse_4.7.0.app/Contents/java/7/Home/jre/lib/ext -Dcatalina.base=/Applications/Eclipse_4.7.0.app/Contents/workspace/.metadata/.plugins/org.eclipse.wst.server.core/tmp0 -Dcatalina.home=/Applications/Eclipse_4.7.0.app/Contents/tomcat/7 -Dwtp.deploy=/Applications/Eclipse_4.7.0.app/Contents/workspace/.metadata/.plugins/org.eclipse.wst.server.core/tmp0/wtpwebapps -Djava.endorsed.dirs=/Applications/Eclipse_4.7.0.app/Contents/tomcat/7/endorsed -Dfile.encoding=UTF-8 -classpath /Applications/Eclipse_4.7.0.app/Contents/tomcat/7/bin/bootstrap.jar:/Applications/Eclipse_4.7.0.app/Contents/tomcat/7/bin/tomcat-juli.jar:/Applications/Eclipse_4.7.0.app/Contents/java/7/Home/lib/tools.jar org.apache.catalina.startup.Bootstrap start
502 58933 58659   0  5:39PM ttys000    0:00.01 grep tomcat
```

左から順にUID, PID, PPID...なので、上の例では

```
kill 58705
```
とすれば、PIDが58705のtomcatのプロセスを終了させられる。
そして、Eclipseのサーバーから再度「開始」を実行すれば、問題なく立ち上がる。

もっと良い解決策があればご教授ください！
列挙体で定義されている名前をコンボボックスにセットしたい

初投稿なんでなんかおかしかったらすみません。

# やりたいこと
画面からコンボボックスで項目を選択させたい。
ソース内からアクセスするために各項目のSelectedIndexインデックスも定義しとかないとならない。
でも項目名に関する情報を複数書きたくはない。
→ENUMで定義した名前を直接コンボボックスにセットしたらいいのでは？

# どうする
###### 書きたくないソース
```vb.net:Form1.vb
Public Class Form1
    Enum 飲み物一覧 As Integer
        お茶 = 0
        コーラ = 1
        コーヒー = 2
    End Enum

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        Me.ComboBox1.Items.Add("お茶")
        Me.ComboBox1.Items.Add("コーラ")
        Me.ComboBox1.Items.Add("コーヒー")
    End Sub
End Class
```

indexに関する情報とコンボボックスに関する情報が別々に定義されていてなんか嫌
調べると[Enum].GetValues(GetType(飲み物一覧))でEnumの一覧が取れるみたいなのでこれを使う。

ちなみに以下のようにするとArrayで取れる
```CType([Enum].GetValues(GetType(飲み物一覧)), 飲み物一覧())```
以下のようにするとListで取れる
```[Enum].GetValues(GetType(飲み物一覧)).Cast(Of 飲み物一覧).ToList()```

後は適当にコンボボックスにセットしたらOK

###### 修正後ソース
```vb.net:Form1.vb
Public Class Form1
    Enum 飲み物一覧 As Integer
        お茶 = 0
        コーラ = 1
        コーヒー = 2
    End Enum

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
            Dim drinks() = CType([Enum].GetValues(GetType(飲み物一覧)), 飲み物一覧())
            For Each s In drinks
                Me.ComboBox1.Items.Add(s)
            Next
    End Sub
End Class
```

取ってきたdrinksをFor Eachで回さずにMe.ComboBox1.Items.AddRange(drinks)みたいなことがやりたかったんだけどなんかダメでした。

もう少しなんかいいやり方あるかなー？

### 追記
コメントで頂いた情報で、コンボボックスのDataSourceにセットすればまとめてセットできました。

```Me.ComboBox1.DataSource = drinks```

DataSourceにはデータテーブルなんかをセットするって先入観がありましたがListもセットできたんですね。
ちなみにListでもArrayでもセットできるみたいです。

つまり最終的にはこうかな。うん、見やすい。

```vb.net:Form1.vb
Public Class Form1
    Enum 飲み物一覧 As Integer
        お茶 = 0
        コーラ = 1
        コーヒー = 2
    End Enum

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
            Me.ComboBox1.DataSource = CType([Enum].GetValues(GetType(飲み物一覧)), 飲み物一覧())
    End Sub
End Class
```
なおDataSourceにセットすると先頭項目が勝手に初期選択されるので、Addしてた時と同じように初期選択無しにしたければSelectedIndex=-1を設定すればよいです。
Accessでテキストファイルを頻繁にテーブルにインポートする時に・・



#はじめに

テーブルにテキストファイルをインポートする際、インポートウィザードを使わず、
VBAでボタン１つで（ファイルは選択します）インポートするやり方を書いてみました。
頻繁にテキストファイルをインポートする際にはぜひご参考いただければ・・！

##環境
```
Windows7(64-bit)
Access2013
```
##事前準備

Accessのインポートウィザードでテキストファイルをインポートします。

ウィザードを進めていき、次へボタンが押せなくなる最終ページの所で、
設定ボタンを押すと、インポート定義のダイアログが出ます。
ここで保存ボタンを押します。
インポート定義名をつけられますので、任意の名前にします。
このインポート定義を後程VBAで指定しますので、メモしておきます。

   ※テーブルの項目と、テキストファイルの項目が相違している場合は、
　   このインポート定義で項目名を指定したり、スキップしたりできます。
　   あらかじめテーブルの項目名を把握しておきます。

   ※インポート定義名の確認は下記の記事でも紹介されています。
　   ご参考までに。
　   [T'sWare Access Tips #528](http://tsware.jp/tips/tips_528.htm)

##動き

1.取り込みたいテーブルが削除されます。
2.インポートしたいテキストファイルを指定します。
3.インポート定義に従ってテキストファイルがテーブルにインポートされます。

##VBA
```
Dim SQL As String

        SQL = "DELETE T_対象テーブル.* FROM T_対象テーブル;"
        DoCmd.RunSQL SQL
                
        strFileName = GetFileName()
    
        DoCmd.TransferText acImportFixed, specificationname:="対象テーブルインポ定義", FileName:=strFileName, TableName:="T_対象テーブル"

        MsgBox ("取込完了しました！")

```
###独自解説

・変数を宣言
・テーブル削除のSQL文
・SQL実行
・ファイル名取得
・インポートのメソッド(TransferText)
  固定長テキスト:acImportFixed
  区切り記号テキスト：acImportDelim
・メッセージボックスで終了
bash | alias登録でサブコマンドを使う時はシングルクォートで囲おう

# 問題

```:~/.bash_profile
alias some_alias1=$(sleep 5)
alias some_alias2="$(sleep 5)"
```

```
$ source :~/.bash_profile
```

sleepが実行されて、プロフィールの読み込み時点で待ちが発生してしまう。
(特にサブコマンドにしている意味はないが、検証用)

エイリアスもうまく作られない様子。

# 解決



シングルクオートで囲えばOK。

```:~/.bash_profile
alias some_alias3='$(sleep 5)'
```

```
$ source ~/.bash_profile
```

これでコマンドを実行した時にだけ sleep してくれる

```
$ some_alias3
```

# 環境

- bash 4.4








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
AtomとAnaconda

メモ程度に書いておきます。

やりたいこと。
Tensorflowの実行環境を作る。

順番
インストール済みのPythonを削除
私の環境では、3.4と3.6が入っていた。
Python Launcherなるものの削除
Anaconda(Anaconda3-5.0.0-Windows-x86_64.exe)をインストール
※チェックボックス「環境変数に追加」が1つ外れていたので、ONにする。
Anaconda Navigaterから仮想環境「tf」を作成
Anaconda Navigaterから「tensorflow」をインストール
Anaconda Navigaterから仮想環境「tf」を起動し、「OpenCV」(画像認識をするため)、atom用に「autopep8」「flake8」をインストール
ここで、「transport_encoding」エラーが発生
どうもAnaconda Navigaterからインストールしたせいなのか、「html5lib」が
うまいこと整合が取れていないみたい。。

`conda install --force html5lib`
とか
`conda install -c anaconda html5lib`

をやって、何とかインストール
(エラーは、画像の下線です。)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/186204/7646f658-7134-5b3e-ff76-ae594d40ac11.png)

Atom(AtomSetup-x64.exe)をインストール
Atom内で以下のパッケージをインストール
```
atom-beautify
autocomplete-paths
autocomplete-python
highlight-cursor-line
hilight-selected
japanese-menu
linter-flake8
script
```

Atomでインタープリターの指定は、「Script」でやる。
パッケージ->Script->Config Script
から、Anaconda Navigaterで作成した「tf」のフォルダを指定

コーディング規約は、pep8にお任せするため、Anaconda Navigaterで作成した「tf」環境のflake8、autopep8を指定してあげる。
環境設定->パッケージ->linter-flake8->setting->Executable Pathへ「flake8のパス」

環境設定->パッケージ->atom-beautify->setting->autopep8 へ「autopep8のパス」

ここまでくればいったん大丈夫のはず・・・

後で整形しまーす
FPGAで加算器を実装するということ - 準備

# はじめに

FPGAで加算することについて考えます。

通常は、Verilog-HDL が提供する演算子 '+' を使います。
コンパイラは、この記述を加算器回路として実装します。

```Verilog
assign  sum = a + b;
```

大部分の場合では '+' で問題ないのですが、特殊な場合や、高度に最適化したい場合には、「ひと手間」かけることでよりよい加算をすることができます。

例えば、こんな場合にどうしたらよいか、のヒントになれば幸いです。

 * 回路面積を極小にしたい場合
 * 回路面積はいいから、周波数を最速にしたい場合
 * 多入力の加算を一度に実行したい場合
 * 長大ビットの加算を実装したい場合



# FPGAの基本構成

FPGAは、プログラマブルな組み合わせ回路とフリップフロップがたくさん配置されている半導体デバイスです。
この、「プログラマブルな組み合わせ回路＋フリップフロップ」をLogic Element (Logic Cell) と呼びます。
FPGA内部のLogic Element同士の接続もプログラマブルになっているため、設計者が任意の回路を（製造時ではなく）任意のタイミングで書き換えることが可能になっています（とはいえ、書き換えには数十秒～数分かかりますが）。

ここでは、Altera(Intel)社のFPGAを例に、加算器を実装することに注目して Logic Element の内部構造を説明します。

## ALM

Altera社のFPGAでは、ALM が異本的な回路要素です。
ALMには、2つの組み合わせ回路用のLUT（ルックアップテーブル）と、4つのフリップフロップで構成されます。

ALMは、以下のいずれかのモードで動作可能です。

 * 通常モード
 * 拡張LUTモード
 * 演算モード
 * 共有演算モード

## 演算モードALM

加算器を構成する場合には、演算モードALMが適しています。
このとき、2つの4入力LUT、専用キャリー信号つき2つの全加算器、4つのフリップフロップでALMは構成されます。

ALM内部に全加算器が存在するので、LUTの消費なしに加算を実装できます。


## 共有演算モードALM

共有演算モードALMは、演算モードALMと似た構成です。
2つの4入力LUT、2つの全加算器、4つのフリップフロップですが、共有演算入力/出力線があります。

これは、（後で説明しますが） LUTで3to2コンプレッサー（CSA;キャリーセーブアダー）を実装することで、3入力の加算器を1つのALM内部で実装することが可能となります。

# 参考文献

* Altera Advances Synthesis Cookbook
    * https://www.altera.com/content/dam/altera-www/global/en_US/pdfs/literature/manual/stx_cookbook.pdf
Hypernova/Webpacker/Turbolinks でSSRできてSPA風に動くスケルトンを作った

https://github.com/mizchi-sandbox/packnova

## 対象

- Rails だけどSPAっぽく画面遷移したい
- SEO担保しないといけない
- 新規設計の参考

jQuery まみれの状態からこれと同等のことをするのは、不可能じゃないけど難しいです。

単にどう導入するか知りたいだけなら https://github.com/mizchi-sandbox/packnova/commit/447a91ea3a706c0bb0aac8570d1fbbaf6c9710f1 のコミットで

## 目指したモノ

最小限の設定で Rails エンジニアでもメンテ出来るSSR/SPAアプリの土台。
ただし土台をハックし始めるとその限りではない。。


## スタック

- webpacker でコンパイル
- 画面遷移は hypernova-react/turbolinks で自動再マウント

ルーティングはRails側に寄せてます。なので react-router は入ってないです。
入れる選択肢もありますが、 react-router のSSRはとにかくだるいので、複雑さでメンテできなくなるのを考慮しました。代わりに turbolinks を引っ張り出しました。なのでオープンリダイレクタに気をつける必要があります。

シンプルさを優先してReduxは載ってないです。


## どんな書き味か

```erb:app/views/home/index.html.erb
<%= render_react_component('Header') %>
<%= render_react_component('App', name: 'Hypernova') %>
```

```erb:app/views/about/index.html.erb
<%= render_react_component('Header') %>
<%= render_react_component('About') %>
```

```js:app/javascript/exposeComponents.js
import { renderReact } from 'hypernova-react'
import _App from './components/App'
import _About from './components/About'
import _Header from './components/Header'

export const App = renderReact('App', _App)
export const About = renderReact('About', _About)
export const Header = renderReact('Header', _Header)
```

renderReact の登録名を手がかりに、 rails のヘルパが引き直して render という感じ。

erbのヘルパの第二引数がルート要素への props になります。なので props の組み立ては Rails 側になります。API経由してガチャガチャやるよりこっちのがシュッとします。

画面切り替わり時は自動的にサーバーから降ってきたpropsを元に自動的に再render します。(警告が出ますが、React v16 で render => hydrate になったので、そのうち hypernova-react をアプデすれば直るでしょう)

実体としては script タグで json 埋め込んでそれを手がかりに評価してるという感じです。

## SSR

`rails s` でそのまま起動してもSPAとしては動きますが、SSRはしません。SSRしたければ 3001 に hypernova プロスセスを立てる必要があります。

```js
yarn babel-node node/hypernova.js
```

標準出力に attached だか connected だか出てればOKです。

問題は、デプロイ時にこのnodeプロセスも一緒に立てないといけないって点ですね… ここはもうちょっと手を入れたい。

## 省いたこと

- webpacker についての詳細
- turbolinks で気をつけるべき挙動

これらは自分で調べてください。
matplotlibのArtistAnimationで二つ以上のアニメーションを描く方法

#はじめに
matplotlibのArtistAnimationで二つのグラフのアニメーションを作ろうと四苦八苦していたのだが、やっと解決方法が見つかったのでここに記しておく。

#ソースコード
結論からいうと、一つずつ描いたグラフを+演算子で足し合わせればそれでOK。また、plt.legend()の記述を一回だけにしないとグラフ内の凡例の数が描画回数の分だけ増えてしまうので注意。

```python:animation.py
import numpy as np
import matplotlib.pyplot as plt
import matplotlib.animation as animation

fig = plt.figure()
ims = []
flag_legend = True#凡例描画のフラグ
#30step分だけsin,cosを少しずつ動かしながら描画する
for i in range(30):
    x = np.arange(-5,5,0.1)
    sin = np.sin(x+i*0.1)
    cos = np.cos(x+i*0.1)
    im1 = plt.plot(x,sin,label="sin_curve",color="red")
    im2 = plt.plot(x,cos,label="cos_curve",color="blue")
    if flag_legend:#一回のみ凡例を描画
        plt.legend()
        flag_legend = False
    ims.append(im1+im2)#グラフを配列に追加

ani = animation.ArtistAnimation(fig, ims, interval=100)#100ms ごとに表示
ani.save("output.html", writer="imagemagick")
```

#結果
うまくいけばhtmlファイルが出力されて、こんな感じの画面がでます。この画面でボタンを触ればアニメーションが動きます。今回はアニメーション部分だけを抽出してgifにしたやつも一緒に載せておきます。
###htmlの画面
<img width="660" alt="animation_ss.png" src="https://qiita-image-store.s3.amazonaws.com/0/182386/2d6c6262-0352-7d62-b2a5-012c62922a3d.png">
###gifアニメーション
![anime.gif](https://qiita-image-store.s3.amazonaws.com/0/182386/e6112b9e-838b-e1e8-f7a3-f816ffc40222.gif)



#さいごに
gifで保存しようとするとエラーなぜか出て、htmかhtmlで保存しろって言われます。解決方法がわかる人が教えて欲しい...(たぶんTkaggとかバックエンドの問題だと思うけど、調査しきれていない)

#追記（※2017/10/25）
ubuntuで実行してみたところ、gifでの保存に成功しました。
pythonやモジュールのバージョン,matplotlibのバックエンドはMacのものとバージョンを合わせてあるので、ますます原因がわからなくなりました。
Python3 の少し複雑な型ヒントの具体例


Python3.5から導入されたうれしい型ヒント機能ですが、「このような型はどうやって定義すれば？」と思うことがあったので、メモしました。
（ジェネリクスについては難しいので、今回はなしで・・）


## `str` または `bytes` のようなORの型ヒント
`Union[str, bytes]` のように `Union` を使えば可能です。

```python
def func(src: typing.Union[str, bytes]):
    ...
```

## ファイルのように扱える (file-like object) の型ヒント

```python
# file-like object型ヒント
def func(file: typing.IO):
    ...

# テキストであることを明示
def func_text(file: typing.TextIO):
    ...

# バイナリであることを明示 
def func_binary(file: typing.BinaryIO):
    ...
```

## C の typedef のように別名をつける（型エイリアス）

```python
import typing 

# typing module の中にあるものは代入で別名をつけることができます
AppSetting = typing.Dict[str, dict]
```

## 継承した型をつくる (NewType)
型エイリアスは別名をつけるだけですが、NewTypeはサブクラスのような扱いになります

```python
# str, int のようなビルトインの型でも可能です
UserID = typing.NewType('UserID', int)
```



## 参考リンク

- [typing — 型ヒントのサポート](https://docs.python.jp/3/library/typing.html)
- [Type hint for a file or file-like object?](https://stackoverflow.com/questions/38569401/type-hint-for-a-file-or-file-like-object)
- [Pythonではじまる、型のある世界](https://qiita.com/icoxfog417/items/c17eb042f4735b7924a3)
テーブル間での同一名のカラムへのフィールドデータのコピー

#他のテーブルから列名が同じであるフィールドデータを全てコピーする
使う時にやたらと忘れてしまうので備忘録として残しておく。


areaテーブル内のカラムcodeをstat_valuesテーブルのカラムcodeへコピーする。

```
insert into stat_values select code from area;
```

これだけ。

コピー元の表でカラムcodeを選択しておけば、勝手に同一カラムへコピーしてくれる。
Git | 変更差分のあるファイルに対してpecoでコマンド実行する

# 例

```
[command] $(git diff --name-only HEAD^ | peco)
```

# 具体例

rspec (テスト) を回す場合

```
$ rspec $(git diff --name-only HEAD^ | grep spec/ | peco)
```



# 環境

- git version 2.14.1
- peco version v0.5.1









<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
javascriptのthisの扱いについて

備忘録的なメモです。
間違いがある可能性がありますので、ご注意ください。
その際は指摘いただけるとありがたいです。


Javascriptにおけるthisの扱いは注意が必要になる。
thisの対象になるのはそのthisが実行されるコードに依存するという原則がある。thisはそれを呼び出したオブジェクトに依存する。

つまり、thisを持ったオブジェクトをどこで宣言しようと、最終的にはそれが実行されたコードにthisの参照先が設定されるということである。このことを理解しないととんでもないバグを生む可能性がある。

また、自分がよく混同するのが「this」と「関数のスコープ」である。thisはそれが定義された場所によらず、それが実行された文脈によって設定されるが、関数のスコープ(クロージャ的な使われ方)ではそれが定義された場所でスコープが決定する。

```js
   function test() {
        this.title = 'test';
        this.inner = function() {
            alert(this.title);
        }
    };

    var _test = new test();
    setTimeout(_test.inner, 3000)
```


このようなコードではsetTimeoutに渡したinnerメソッドのthisはsetTimeoutのthisに依存するため、 undefindが表示されてしまう。ここでの動きに注意。

ここの処理ではコールバックにメソッドを渡しているが、setTimeoutのコールバックの渡し方を変える

```js
setTimeout(_test.inner(), 3000)
```
ここでの、\_test.inner()では関数呼び出しを行っているのでコールバックに渡している段階で、
処理が実行されているということ。この場合のthisは_testオブジェクトを参照している。
これは処理で言えば、

```js
_test.inner();
```

これと同じ。
なので、setTimeoutが評価された段階で、alertが表示される。


func.bind() を使うことで、thisの対象を固定することができる

```js
setTimeout(_test.inner.bind(_test), 3000)
```

_test.innerメソッドに対してthisを自分自身にbindする。
つまり

<<<<<<< HEAD
```
thisを固定させたいオブジェクト.bind(固定するオブジェクト)
=======
```js
Thisを固定させたいオブジェクト.bind(固定するオブジェクト)
>>>>>>> EDIT_REQUEST
```

という構文になる

thisの固定はbind以外にもcallとapplyがある。
両者の使い分けはcallとapplyが指定したオブジェクトでthisを固定して、関数を実行する。
Bindは指定したオブジェクトでthisを固定して新しい関数を生成する
という違いにある。繰り返し使う必要があるなら、bindを使った方がいい。
🍺Railsでデータベースのテーブルを司るmigration

# migration
マイグレーションと読むらしい。(ミグレーションと思っていた、、、)


## migrationとは
>データベーススキーマの継続的な変更 (英語) を、統一的かつ簡単に行なうための便利な手法です。

## チートコード
(rails4以下では、 rails => rake　で解釈)

モデルを作成
>```$ rails generate model Product name:string description:text```

カラムを追加
>```$ rails generate migration AddPartNumberToProducts part_number:string:index```

カラムを削除
>```$ rails generate migration RemovePartNumberFromProducts part_number:string```

```$ rails db:migrate```を忘れずに実行してFIN

## 間違えたとき

### ```$ rails generate ~```を間違えたとき
```$ rails destroy ~　```でOK

### TABLEとか一度リセットしたいとき
```$ rails db:migrate:reset```でOK


##参考
https://railsguides.jp/active_record_migrations.html
ZBlackbeard(Zerif Liteの子テーマ)の使い方

#概要
なぜBlackbeard(黒ひげ)なんでしょう...
黒ひげ感全くないですが。
ワンピースでも好きなんですかね。

他の子テーマを見てみると･･･

「ResponsiveBoat」
「OnePirate」

後者なんか完全にワンピースｗｗ

というわけで、WordPressにZBlackbeardをインストールして適用する方法です。
かっこいいテーマが簡単に使えるし、
編集も基本的にはコードイジらなくていいので、
インストールさえ出来てしまえば初心者でもWebサイトを作れちゃいます！

#準備
ここからテーマのzipファイルをダウンロードします。
https://ja.wordpress.org/themes/zblackbeard/

このzipに親テーマのZerif Liteも入っています。
※ダウンロードしたらzipは解凍しないでください！
  WordPressにはzipの状態でないとインストールできません。

#WordPressへのインストール
WordPress管理画面左メニュー
外観 → テーマ

上部の「新規追加」ボタンをクリック
上部の「テーマのアップロード」ボタンをクリック

先程ダウンロードしたzipを選択して、「今すぐインストール」をクリックすると、
インストール画面に移ります。
インストールが完了したら、下部の「有効化」をクリック

これで終わりです！！
本当簡単なんですよ。

#注意点
このZBlackbeardを2回目使うことになったのですが、
TOPページがヘッダーとフッターしか反映されていなくて、
肝心なメイン部はだっさいブログのまま！
1回目のときのを覚えてなくて。
最初からちゃんとしてた気もするんですが･･･。まあ見比べて解決しました。
なのでもし最初からちゃんとしてる場合は大丈夫です。

##固定ページ追加
左メニュー → 固定ページ一覧

ここに「ホームページ」はありますか？
もしなければ作成します。(最初からあったはずなんだけどなぁ。)
方法は2つ。
後者の方が簡単です。

###1.上部新規追加
タイトルは多分なんでも大丈夫です。
内容も多分何もなしで大丈夫です。
僕の場合はこんなの入ってました。

「サイトへようこそ。これはあなたのホームページで、ほとんどの訪問者がこのサイトに初めて訪れる際に目にするものです。」

そしたらそのまま公開にします。
####1-2フロントページの設定
左メニュー → 外観 → カスタマイズ
カスタマイズ画面が開いたら、固定フロントページ。
「フロンのページの表示」の「固定ページ」にチェック。
フロントページのドロップボックスから、先程の固定ページを選択。
これで完成！！

###2.カスタマイズから直接
あとから発見しましたがこっちの方が簡単でした。
1-2の場所でドロップボックスの下の、
「+ 新規固定ページを追加」をクリック。
適当にタイトルを入力したら、かっこいいテーマが反映されているはずです！
固定ページ一覧を確認すると、中身空っぽのページが作成されています。

#まとめ
なぜか2回目の方が引っかかりましたが、なんとかできました！
WordPress自体2回目なんですけどね。笑
編集自体はカスタマイズ画面から直感的に出来るので、
あまり説明はいらないかと思います。
それ以外もCSSだけでほとんどなんとかなっちゃいます。
以上、WordPress冒険記でした！
SquareのWebhooks APIを使ってみる

決済されたタイミングでシステムに通知して欲しいと思うことはないでしょうか。それを実現できるのがSquareのWebhooks APIです。他にもタイムカードが更新されたタイミングでも通知を受けられます。

今回はサンプルコードをベースに、Webhooks APIの使い方を紹介します。

## 設定について

Webhooksの設定はSquare Developer PortalのWebhooksタブにて行います。Webhooksを有効にして、URLを指定します。これはPOSTで呼ばれるURLを指定します。

![Screenshot_ 2017-10-16 12.19.01.png](https://qiita-image-store.s3.amazonaws.com/0/197026/88047468-9ab6-ec2c-474e-1d3b2e2b4318.png)

URLを設定すると、Signature Keyが生成されます。通知先のURLと共に使いますので覚えておきます。

## リクエストの検証を行う

WebhooksはPOSTリクエストで呼ばれます。そしてまず必要なのがリクエストの検証です。使うのはリクエストのボディとHTTP_X_SQUARE_SIGNATUREヘッダーです。以下はRubyのコード例です。

```
callback_body = request.body.string
callback_signature = request.env['HTTP_X_SQUARE_SIGNATURE']
```

ここに先ほど設定したWebhooksのURL（WEBHOOK_URL）とSignature Key（WEBHOOK_SIGNATURE_KEY）を使って検証を行います。

```
string_to_sign = WEBHOOK_URL + callback_body
string_signature = Base64.strict_encode64(OpenSSL::HMAC.digest('sha1', WEBHOOK_SIGNATURE_KEY, string_to_sign))
Digest::SHA1.base64digest(string_signature) == Digest::SHA1.base64digest(callback_signature)
# trueなら検証OK
```

検証した結果が正しければ問題ありません。

## JSONの内容を取得

内容が問題なければリクエストをJSONにします。

```
callback_body_json = JSON.parse(callback_body)
```

入っている内容は次のようになります。

```
{
  "location_id": "AAABCHDD",
  "merchant_id": "JGHJ0343",
  "event_type": "PAYMENT_UPDATED",
  "entity_id": "Jq74mCczmFXk1tC10GB"
}
```

entity_idは取引IDになります。location_idと組み合わせてSquare APIから取引の詳細情報を取り出せます。

```
# Square APIにアクセスして決済情報の詳細を取得します
api_instance = SquareConnect::V1TransactionsApi.new
response = api_instance.retrieve_payment(location_id, payment_id)
```

レスポンスとして、細かい取引情報が取得できます。以下はレスポンスの一部です。

```
{
  :id=>"4867tampXm52hAvQ9To5S",
  :merchant_id=>"BE1...H66",
  :created_at=>"2017-10-16T07:05:29Z",
  :creator_id=>"BE1...H66", :device=>{
    :id=>"DEV...647",
    :name=>"iPhone 7 Plus"},
  :payment_url=>"https://squareup.com/dashboard/sales/transactions/KXL...tMF",
  :receipt_url=>"https://squareup.com/receipt/preview/4867tam...o5S",
    :
  :inclusive_tax=>[],
  :additive_tax=>[],
  :tender=>[{
    :id=>"4867tampXm52hAvQ9To5S",
    :type=>"CASH",
    :name=>"Cash",
    :receipt_url=>"https://squareup.com/receipt/preview/4867tam...o5S",
    :total_money=>{
      :amount=>1500,
      :currency_code=>"JPY"
    },
      :
  }],
  :refunds=>[],
  :itemizations=>[{
    :name=>"Custom Amount",
    :quantity=>1.0,
    :itemization_type=>"CUSTOM_AMOUNT",
    :item_detail=>{
      :category_name=>"",
      :sku=>""
    },
      :
    :taxes=>[],
    :discounts=>[],
    :modifiers=>[]
  }]
}
```

このようにしてWebhookの処理が可能です。取引情報が取り出せれば、自社システムと連携させるのも難しくないでしょう。

----

なおWebhooksなのでイベントを受け取るサーバはインターネット上に公開されている必要があります。また、外部からのPOSTリクエストを許可するようになっていなければなりませんので注意してください。

今回のRubyのコードは[goofmint/Square_Webhook_Ruby: SquareのWebhook APIをRubyで利用するためのデモコードです](https://github.com/goofmint/Square_Webhook_Ruby)にアップロードしてあります。Herokuでも立てられますので、手軽に使えるはずです。

[Square Connect API Documentation](https://docs.connect.squareup.com/api/connect/v1#webhooks-overview)
iPhoneの画面サイズに合わせてStoryboardを変更する

バイトをしていない時のストレスのたまらなさは異常。
コンちゃ、TOSHです。
今日は、
iPhoneのサイズに合わせて、storyboardを変更していく方法を紹介したいと思います！

本来はAutoLayoutを使うのがいいのかもしれませんが、AutoLayoutようわからんとか、すでたくさんパーツを置いてしまい、今から切り替えるのは難しいという人向けに紹介したいと思います！

#やり方
- これは、初めから存在する、`AppDelegate.swift`というファイルに書き込んでいきます！
仕組みとしては、まず、iPhoneの画面サイズを取得し、if文で画面サイズごとに動作を分岐させる感じです。
- まずは画面を取得し、if文で分岐させる  

```Swift:AppDelegate.swift
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
        let display: CGRect = UIScreen.main.bounds
        // 取得ディスプレイに対応したStoryBoardをrootViewController(最初に表示されるもの)にする。
        if display.size.height == 568 {
            // iPhone 4S の場合 (Unit is Point.)
            let storyboard = UIStoryboard(name: "Sub", bundle: nil)
            let rootViewController: UIViewController? = storyboard.instantiateInitialViewController()
            window?.rootViewController = rootViewController
        }
        else if display.size.height == 667 {
            // iPhone 6 の場合
            let storyboard = UIStoryboard(name: "Main", bundle: nil)
            let rootViewController: UIViewController? = storyboard.instantiateInitialViewController()
            window?.rootViewController = rootViewController
        }
        else if display.size.height == 736 {
            // iPhone 6 Plus の場合
            let storyboard = UIStoryboard(name: "Main", bundle: nil)
            let rootViewController: UIViewController? = storyboard.instantiateInitialViewController()
            window?.rootViewController = rootViewController
        }
}
```

- 対応するStoryboardを作成する  
今回の場合では、iPhone5Sのサイズの場合、`Sub`という`UIStoryboard`を読み込み、  
iPhone6や６ Pusのサイズの場合は、`Main`という`Storyboard`を読みこむ設定をしてるので、  
`Main.Storyboard`と`Sub.Storyboard`を作成してあげましょう！

####これで、完成です！
いろんな実機で読み込んでみて、きちんと読み込めるのか確認してみましょう！
以上、TOSHでした！
Selenium Chrome  Proxy の設定

はまったので、メモ書きとして。

# Selenium を利用しているときChromeにProxy の設定を行いたい。

## Linux OS 側で設定 
環境変数として設定する。

```sh
	export http_proxy='http://{userid}:{password}@{proxy-server}:{port}'
	export https_proxy='https://{userid}:{password}@{proxy-server}:{port}'
```

この場合、remoteDriver でlocalhostのSeleniumへの通信もProxyを通ることになる。
ChromeDriverを利用しているだけであれば問題ないが、Script内で他のものに通信する場合もProxyを通る場合が大半。

## Chromeのドライバ側で設定

```python

	from selenium.webdriver.chrome.options import Options
    
    option = Options()
    PROXY = '{proxy-server}:{port}'
    PROXY_AUTH = '{userid}:{password}'
    option.add_argument('--proxy-server=http://%s' % PROXY)
    option.add_argument('--proxy-auth=%s' % PROXY_AUTH)

    driver = webdriver.Chrome(chrome_options=option)

```
Chrome の起動時にProxyに関するパラメーターを設定することで、Proxy経由での通信とすることができる。


## 同様にリモートドライバの設定

ChromeDriver利用時の設定と同様に下記の様に設定すれば良いみたい。

```pytho 
        
    PROXY = '{proxy-server}:{port}'
    PROXY_AUTH = '{userid}:{password}'
    self.driver = webdriver.Remote(
        command_executor='http://{selenium-server}:{port}/wd/hub',
        desired_capabilities={
            'browserName': 'chrome',
            'chromeOptions': {
                'args': [
                	'--start-maximized',
                	'--proxy-server=http://{proxy-server}:{port}',
                	'--proxy-auth={userid}:{password}'
                ]
            }
        })

```
BackWPupでバケットが見つからないエラー

S3は本来リージョン関係ないはずなんですが、
何故か選択出来るWordpress側のS3アップロード設定画面でのリージョンを

```
Amazon S3: Asia Pacific (東京)
```

に変更したら、エラーが解消しました。

現場からは以上です。
iPhoneX対応について


備忘録を兼ねてます。適宜情報を追加していきます。

## iPhoneX概要
・発売予定日：2017/11/3（金）
・画面サイズ：375 x 812 
・セーフエリア（Portrait）：375 x 734
・セーフエリア（Landscape）：724 x 354
その他は以下の記事らへん参照のこと。
[iPhoneXでのAutoLayoutをきれいに書くための試行錯誤](https://qiita.com/risuke/items/bb5735f0e8f3bc8306db)
[iPhone Xのセーフエリアやマージン幅について](https://qiita.com/usagimaru/items/761e9a5f3d78b1939df8)


## 最低限把握すべき内容
* iPhoneXで全画面表示にする方法（スプラッシュ画面設定：General＞App Icons and Launch Images内の設定による）
    * スプラッシュ画面設定でlaunch imageを使用：iPhoneX用の画像（1125px x 2436px）を設定する
    * スプラッシュ画面設定でlaunch screenを使用：何もしなくてもok
* launch screenを使っていると問答無用で全画面になるため、safe areaに早急に対応しないとiPhoneXでレイアウトが崩れる危険性が高い（角丸や上部中央の受話口周りの切り欠きでUI要素がかぶるなど）
* [セーフエリア(safe area)](https://qiita.com/eimei4coding/items/5a0794cf7cd13c82b2b5#safe-areaについて)の概念が新しく追加された（iPhoneXには切り欠きや角丸、ホームバーがあるため、それらに重ならない安全な領域として新しく作られた概念）
* 画面下部でのスワイプジェスチャはホームバー側が優先してしまうため、効かなくなる

## 対応について
* UIScrollViewでcontentInsetAdjustmentBehaviorというプロパティが増えている。デフォルトだとautomaticが設定されており、contentInsetに自動で良い感じの値をセットしてくれるが、これが鬱陶しい場合はneverにセットする。UITableViewやUIWebviewのscrollViewプロパティも同様であることに注意（[参考になる記事](https://qiita.com/peka2/items/b6301a0c06cc13286296)）
* storyboardのconstraintで、relative marginsのチェックのon/offによってsafety marginが考慮されたりされなかったりする。意図した描画と違うかどうかはiPhone XのDevice表示で確認するとわかるので、意図した表示と違う場合はconstraintのsecond itemでRelative to marginのチェックを確認する（[参考になる記事](https://qiita.com/usagimaru/items/761e9a5f3d78b1939df8#適切なマージンを保つ-auto-layout-制約を設定)）
* コードからsafe areaを取得する場合は、UIViewのsafeAreaInstesプロパティを使う。なお、これはviewの配置箇所に対して相対的に取られるもので、viewWillLayoutSubviews以降のライフサイクルで取れる。もしくはUIView#layoutSubviewsでも取れる（[参考になる記事](https://qiita.com/lovee/items/21131fb441a1a86b45e3)）

## デザインについて
* safe area外を黒く塗りつぶしたりしてはいけない。標準のmapアプリのように、レイアウトとしては画面全体となるように良い感じに設計しなくてはいけない（ナビゲーションバーやタブバーなどを標準のまま使用する場合は自動で良い感じにしてくれるが、多くの場合は独自の設計が入り込んでいるので全て確認が必要）
* 全画面に表示はするが、操作可能なパーツはsafe area外に配置しないこと
* 画像は@3xが適用される。launch imageは1125px x 2436pxとなる
* ステータスバーが従来の高さと変わるため、決め打ちの値にしているとおかしくなりがち。しかも従来はステータスバー上に通話中等のバックグラウンドタスクが表示されると高さが変わったが、iPhoneXでは変わらない
* 画面が縦長で従来のものとはだいぶアスペクト比が違う
* iPhoneXからワイドカラー(P3カラー)対応となり、色味が変わる
Laravel DuskでDBデータが飛んだって話(メモ)


ただのメモです。
何か分かり次第追記します


```
use Illuminate\Foundation\Testing\DatabaseTransactions;
use Illuminate\Foundation\Testing\DatabaseMigrations;
use Illuminate\Foundation\Testing\RefreshDatabase;

class test1 extends DuskTestCase
{
    use DatabaseTransactions;
    use DatabaseMigrations;
    use RefreshDatabase;
```
実際は纏めてuseしてないです

上記を `$php artisan dusk`....

#DatabaseTransactions

~~リセットできなかった~~
createした分はリセットされていた。
既存データを使いたくないので調べ中

[Resetting The Database After Each Test](https://laravel.com/docs/5.4/database-testing#resetting-the-database-after-each-test)
の`Using Transactions`にLaravel 5.4までは書かれてる

#DatabaseMigrations

テーブルごとデータが飛んだ

[Resetting The Database After Each Test](https://laravel.com/docs/5.4/database-testing#resetting-the-database-after-each-test)
の`Using Migrations`にLaravel 5.4までは書かれてる

#RefreshDatabase

データベースレコードデータが飛んだ
[Resetting The Database After Each Test](https://laravel.com/docs/5.5/database-testing#resetting-the-database-after-each-test)
`Laravel5.5`から登場

何か設定のし忘れとかがあるのだろうか....

#そもそもデータが飛ぶほうが正しい?
[Laravel5.5: ブラウザテストを記述する](https://qiita.com/sutara79/items/9190c8444a49842ca25a)
上記のURLで`.env.dusk.local`という設定ファイルを作成できることを知る


なので、Dusk用に真っ新のDBを用意しテスト前に必要なデータは`Migration`や`Seeder`を動かしてDBに格納しておく
のが正しいやり方なのかもしれない...?
SelectManyで要素の中の要素を検索するサンプル


```csharp:SelectManySample.cs
	class Group {
		public decimal No { get; set; }
		public string Name { get; set; }
		public List<Member> Members { get; set; }
	}

	class Member {
		public decimal No { get; set; }
		public string Name { get; set; }
		public decimal Age { get; set; }
		public bool IsIndoor { get; set; }
	}

	class SelectManySample {
		static void Main(string[] args) {

			// 初期化：GroupクラスはMemberクラスのリストを要素に持つ
			Group[] group =
			{ new Group { No = 1, Name = "Cat", Members = new List<Member> {
					new Member { No = 1, Name = "Tama", Age = 12, IsIndoor = true },
					new Member { No = 2, Name = "Mike", Age = 9, IsIndoor = true },
					new Member { No = 3, Name = "Chibi", Age = 1, IsIndoor = true },
					new Member { No = 4, Name = "Mosa", Age = 3, IsIndoor = false },
					new Member { No = 5, Name = "Grow", Age = 5, IsIndoor = false },
				}},
				new Group { No = 2, Name = "Dog", Members = new List<Member> {
					new Member { No = 1, Name = "Taro", Age = 5, IsIndoor = false },
					new Member { No = 2, Name = "Shiro", Age = 10, IsIndoor = true },
					new Member { No = 2, Name = "Kuma", Age = 7, IsIndoor = false },
				}},
				new Group { No = 3, Name = "Turtle", Members = new List<Member> {
					new Member { No = 1, Name = "Kamenashi", Age = 80, IsIndoor = true },
					new Member { No = 2, Name = "Kameyama", Age = 55, IsIndoor = true },
				}},
			};

			// IsIndoor == true の Group Name と Member Name を取得
			var q = group
				.SelectMany(r => r.Members, (g, m) => new { g, m })
				.Where(r => r.m.IsIndoor == true)
				.Select(r => new { GroupName = r.g.Name, MemberName = r.m.Name });

			// 表示
			foreach (var v in q) {
				Console.WriteLine(string.Format("[{0}] {1}", v.GroupName, v.MemberName));
			}
		}
	}
```
数学-指数・対数関数の極限公式の証明

# 指数・対数関数の極限公式の証明

[数学に戻る](eb2ee12608a969cea3e4)

## 証明

```math
\\
\begin{array}{ll}

(1) &\lim_{x \to 0} \frac{e^x - 1}{x} = 1　　\because ネイピア数の定義式\\
\\
(2) &\lim_{x \to 0} \frac{log(1 + x)}{x} = 1\\
\\
&u = e^x - 1 とおくと、e^x = 1 + u　\therefore x = \log (1 + u)\\
&{x \to 0} のとき、{u \to 0} となるので、　\because \lim_{x \to 0} e^x - 1 = 1 - 1 = 0\\
&\lim_{x \to 0} \frac{e^x - 1}{x} = 1　からxを消して\\
&\lim_{u \to 0} \frac{u}{\log (1 + u)} = 1　逆数も成り立つので\\
&\lim_{u \to 0} \frac{\log (1 + u)}{u} = 1\\
& \therefore \lim_{x \to 0} \frac{\log (1 + x)}{x} = 1\\
\\
(3) &\lim_{x \to 0} (1 + x)^{\frac{1}{x}} = e\\
\\
& \lim_{x \to 0} \frac{\log (1 + x)}{x} = 1　より\\
\\
&\lim_{x \to 0} \frac{\log (1 + x)}{x} = \lim_{x \to 0} \frac{1}{x} \cdot \log (1 + x) = \lim_{x \to 0} \log (1 + x)^{\frac{1}{x}}\\
&1 = \log e\\
\\
&\therefore \lim_{x \to 0} \log (1 + x)^{\frac{1}{x}} = \log e\\
&\lim_{x \to 0} (1 + x)^{\frac{1}{x}} = e　　\because \log (1 + x)^{\frac{1}{x}} が e に近づく\\
\\
(4) &\lim_{x \to \pm \infty} (1 + \frac{1}{x})^{x} = e\\
\\
&\lim_{x \to 0} (1 + x)^{\frac{1}{x}} = e より、x = \frac{1}{t} (t = \frac{1}{x}) とすると\\
&{x \to 0} のとき、{t \to \pm \infty}\\
&\lim_{x \to 0} (1 + x)^{\frac{1}{x}} = \lim_{t \to \pm \infty} (1 + \frac{1}{t})^t\\
&\therefore \lim_{x \to \pm \infty} (1 + \frac{1}{x})^x\\
\\
\end{array}
```
Vue.jsのライフサイクルメモ

この辺の話
https://jp.vuejs.org/v2/guide/instance.html#ライフサイクルダイアグラム

今の所、createdとmountedぐらいしか使ったことがないが、
予め知っておくと他のライフサイクル関数も使い所が分かってくるかもしれない

## beforeCreate
インスタンスが初期化されるときに同期的に呼ばれる

## created
インスタンスが作成された後に同期的に呼ばれる
データの監視とイベントの初期セットアップが完了した状態

サーバーサイドからのデータ取得処理はここで行うのが良さそう

createdまでがサーバサイドとクライアントサイドの両方で呼ばれ、
beforeMount以降はクライアントサイドのみで呼ばれる

## beforeMount
インスタンスがマウントされる前に呼ばれる
templateオプションがrender関数にコンパイルされた後に実行される
（templateオプションが無い場合は、elで指定したouterHTMLをコンパイルする）

## mounted
インスタンスがマウントされた後に呼ばれる
DOM要素にアクセスできるようになる（this.$el）

## beforeUpdate
状態を更新し、Virtual DOMが再描画される前に呼ばれる
つまり、beforeUpdate内で状態を取得すると更新後の値になっている

## updated
状態を更新し、Virtual DOMが再描画される後に呼ばれる
状態変更後のDOM要素にアクセスする場合は、updated内で取得すると良い
ただし、updated内で状態を更新すると無限ループに陥る可能性がある
（状態を更新してループを抜ける条件をちゃんと実装しておく必要がある）

## beforeDestroy
インスタンスが破棄される前に呼ばれる
この段階ではインスタンスはまだ完全に機能している

## destroyed
インスタンスが破棄される後に呼ばれる