OmniAICreator/Qiita-1.07M huggingface dataset:
セッションが更新されない件について（セッションDB使用）

#はじめに
Node.js＋セッションDBにてWEBページを構築していたのですが、sessionが更新されない事象があったためその対処法のメモです。
セッションはメモリ上ではなくRDB（PostgreSQL）上に持ちます。PostgreSQLに対してはpgpool-IIを使用してのアクセスとなります。

#先に結論

セッションを作成する箇所において

```js
resave : true
```

resaveをfalseではなくtrueにします。
また、各セッション更新箇所において

```
req.session.save();
```

をやめます。
これでセッションが更新されないことは（今のところ）なくなりました。

#環境
- Node.js　：　v6.10.0
- PostgreSQL　：　9.6
- pgpool-II　：　3.6.1
- npmパッケージ群
 - pg　: 6.1.4
 - express　：　4.14.1
 - express-session　：　1.15.1
 - connect-pg-simple　：　3.1.2

#事象説明
##ページ構成
| URI       | method    | 機能        |
|:----------|:----------|:------------|
| /         | GET       | ログインページを表示 |
| /login    | POST      | ユーザIDとパスワードを元にログイン処理を実施 |
| /menu     | GET       | ログインOKの場合メニューを表示。メニューはユーザIDによって見れるものと見れないものがある。 |

ユーザIDとパスワード、およびどのめにゅーを表示させるかの情報（以下、メニュー権限）は全てRDBに保持してます。
POST:/loginでユーザIDとパスワードが一致した場合、メニュー権限をセッションに格納しGET:/menuします。
GET:/menu時にセッションにあるメニュー権限を見て、どのメニューを表示／非表示するかを決めます。

##発生事象
【POST:/loginでユーザIDとパスワードが一致した場合、メニュー権限をセッションに格納するが、その後のGET:/menuにて格納したはずのメニュー権限が取得できない（undefinedになる）】
といった事象が発生しました。
※必ず発生する者ではなく、数回に一回発生する程度。

##原因調査
POST:/loginにて格納されたメニュー権限をコンソールに出力すると正常なのに、GET:/menu時にはundefinedになっていることから
「RDBへの書き込みが間に合っていない？」
のかと思いました。
しかし、RDBのログ等調べても原因はわからず・・・

##その時のセッション関連のソース

```js:app.js
// ・・・（省略）・・・
var pg = require('pg');
var session = require('express-session');
var pgSession = require('connect-pg-simple')(session);
app.use(session({
	store  : new pgSession({
		pg             : pg,
		conString      : 'postgres://postgresql:postgresql@127.0.0.1:5432/database',
		clear_interval : '300'
	}),
	secret : 'secret',
	resave : false,
	saveUninitialized : true,
	rolling : true,
	cookie : {
		httpOnly: false
	}
}));
// ・・・（省略）・・・
```

```js:login.js
router.get('/', function(req, res, next) {
	// ・・・（省略）・・・
	req.session.menuAuthority = '（取得したRDBの情報）';
	req.session.save();
	// ・・・（省略）・・・
});
```

上記の箇所以外でもセッションを更新したあとは必ず

```
req.session.save();
```

を行うようにしてました。
このせいで先の「RDBへの書き込みが間に合っていない？」が発生してしまっているのでは？と思い、

```
req.session.save();
```

をやめる対応を行いました。

##修正後のapp.js

```js:app.js
var pg = require('pg');
var session = require('express-session');
var pgSession = require('connect-pg-simple')(session);
app.use(session({
	store  : new pgSession({
		pg             : pg,
		conString      : 'postgres://postgresql:postgresql@127.0.0.1:5432/database',
		clear_interval : '300'
	}),
	secret : 'secret',
	resave : true,			// falseからtrueへ
	saveUninitialized : true,
	rolling : true,
	cookie : {
		httpOnly: false
	}
}));
```

上記の変更、および各処理において

```
req.session.save();
```

をやめたことによりGET:/menuでもメニュー権限をセッションから取得できるようになりました。

#その他
「RDBではなくメモリ上で管理したらどうなったか？」
については試してません。（メモリ上なら問題になっていないのではないかと思いますが。。。）
【iOS】アプリ内からレビューを依頼する 10.3未満も対応


本日(2017/03/28)iOS 10.3が公開され、正式にSKStoreReviewControllerを使うことができるようになり、アプリ内から、レビューを直接依頼できるようになりました。

また、SKStoreReviewControllerの追加に伴って、AppStoreのレビューページを直接開くパラメータも追加されました。

こちらのパラメータはiOS 10.3未満の端末からでも開けるようなので、以前のようにユーザが操作してアプリページからレビューフォームへ移動する必要がなくなりました。

##コード

```ViewController.swift
import UIKit
import StoreKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        showReviewAlert()
    }
    
    private func showReviewAlert() {
        if #available(iOS 10.3, *) {
            // iOS 10.3以上の処理
            SKStoreReviewController.requestReview()
        } else if let url = URL(string: "itms-apps://itunes.apple.com/app/id{アプリのID}?action=write-review") {
            // iOS 10.3未満の処理
            showAlertController(url: url)
        }
        
    }
    
    private func showAlertController(url: URL) {
        let alert = UIAlertController(title: "レビューのお願い",
                                      message: "いつもありがとうございます！\nレビューをお願いします！",
                                      preferredStyle: .alert)
        self.present(alert, animated: true, completion: nil)
        
        let cancelAction = UIAlertAction(title: "キャンセル",
                                         style: .cancel,
                                         handler: nil)
        alert.addAction(cancelAction)
        
        let reviewAction = UIAlertAction(title: "レビューする",
                                         style: .default,
                                         handler: {
                                            (action:UIAlertAction!) -> Void in
                                            
                                            
                                            if #available(iOS 10.0, *) {
                                                UIApplication.shared.open(url, options: [:])
                                            }
                                            else {
                                                UIApplication.shared.openURL(url)
                                            }
                                            
        })
        alert.addAction(reviewAction)
    }
}
```

###参考
[iOS 10.3で追加されたアプリレビューを投稿できるSKStoreReviewControllerを試してみた](http://qiita.com/waytoa/items/9bab33f27c2c24a35803)
[【Swift】AppStoreのレビューフォームを開くパラメーターが新登場 - action=write-review -](http://qiita.com/mshrwtnb/items/8fd60ba3a8bc89f3c013)
Pythonのdict型をkey, valueの両方でソートする

Python3のdict型を使っていて、keyとvalueの両方でソートする必要がありました。


#まとめ
まず、コメントでおしえていただきました望ましい書き方を提示します。これを含むコメントに記載いただいた方法がベストかと思います。

```.py
sorted_last_record = sorted(last_record.items(), key=lambda x: (x[1], x[0]))
```
※詳しくはコメントを御参照ください。


私の書いたのは、

````.py
from collections import OrderedDict
sorted_last_record = OrderedDict(sorted(last_record.items(), key=lambda x: x[0]))
sorted_last_record = sorted(sorted_last_record.items(), key=lambda x: x[1])
```
でした。あまり意味がなさそうですが、たとえば、keyは昇順、valueは降順であるときとか、ソートする条件がkeyとvalueで違うときには、それなりに意味があったりしないですかね?


##内容
最初、

dictをkeyでソートして、その後、valueでソートする、というコードを書きました。

```.py
sorted_last_record = sorted(last_record.items(), key=lambda x: x[0])
sorted_last_record = sorted(dict(sorted_last_record).items(), key=lambda x: x[1])
```
しかし、これでは2行目で、dictに変換したところで、順番が維持されない問題にあたり、時に正解が得られ、時に不正解が得られる、という状況になりました。


そこで、OrderdDictを利用して以下のように記載し、無事解決しました。

```.py
from collections import OrderedDict
sorted_last_record = OrderedDict(sorted(last_record.items(), key=lambda x: x[0]))
sorted_last_record = sorted(sorted_last_record.items(), key=lambda x: x[1])
```


もっと賢い書き方があると思うので、おしえてもらえるとありがたいです。
よろしくお願いいたします。
[AWS] EC2のIAM Roleがマネジメントコンソールで行えるようになってた。

#はじめに
EC2にIAM Roleの設定が行えるようになったときはCLIの設定のみでしたが、マネジメントコンソールで操作できるようになっていました。

##IAM Roleを設定する
変更したいEC2インスタンスを選択しメニューを表示します。
[インスタンスの設定]→[Attach/Replace IAM role]をクリックします。
<img width="518" alt="imarole00.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/171933/8c6eec82-7b34-70fe-a9ef-8bdbc12d94b8.jpeg">

IAM Roleを指定します。
<img width="679" alt="imarole01.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/171933/1250e850-c388-294f-acfc-7309f1aefb66.jpeg">

以上で設定は完了です。
<img width="726" alt="imarole02.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/171933/52fac98c-fd4e-48e9-cd7e-c1b2c5bac177.jpeg">

#おわりに
CLIではなくマネジメントコンソールで操作が行えるようになったので、簡単に設定が行えるようになりました。
C++ Builder / TCanvas > 円をセクターに分割して、グラデーションを塗る実装

```txt:動作環境
C++ Builder XE4
```

- 円を描く
- 20個のsectorsに分割する
- RGB値のBを変化させながらsectorを塗る

```Unit1.cpp
//---------------------------------------------------------------------------

#include <vcl.h>
#pragma hdrstop

#include "Unit1.h"
//---------------------------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.dfm"
TForm1 *Form1;
//---------------------------------------------------------------------------
__fastcall TForm1::TForm1(TComponent* Owner)
	: TForm(Owner)
{
}
//---------------------------------------------------------------------------

void __fastcall TForm1::drawRadialLine(double angle_deg)
{
    TRect R = Image1->ClientRect;

	double radius = (R.right - R.left) / 2;
	int center_x = (R.left + R.right) / 2;
	int center_y = (R.top + R.bottom) / 2;

	Image1->Canvas->MoveTo(center_x, center_y);

	int to_x = radius * Cos(angle_deg * M_PI / 180.0);
	int to_y = radius * Sin(angle_deg * M_PI / 180.0);
	to_x += center_x;
	to_y += center_y;
	Image1->Canvas->LineTo(to_x, to_y);
}

void __fastcall TForm1::fillSector(double angle_deg, double width_deg)
{
	TRect R = Image1->ClientRect;
	double radius = (R.right - R.left) / 2;

	radius = 0.7 * radius; // to get inside the sector (0.7: arbitrary)
	double wrk_ang = angle_deg + width_deg / 2.0; // to get inside the sector

	int center_x = (R.left + R.right) / 2;
	int center_y = (R.top + R.bottom) / 2;

	int pt_x = radius * Cos(wrk_ang * M_PI / 180.0);
	int pt_y = radius * Sin(wrk_ang * M_PI / 180.0);
	pt_x += center_x;
	pt_y += center_y;

	Image1->Canvas->Brush->Color = RGB(0, 0, 255 * angle_deg / 360.0);
	Image1->Canvas->FloodFill(pt_x, pt_y, clBlack, fsBorder);

	// String msg = IntToStr(pt_x) + L"-" + IntToStr(pt_y) + L": " + FloatToStr(angle_deg);
	// OutputDebugString(msg.c_str());
}

void __fastcall TForm1::drawOnImage(void)
{
    // 1. draw circle
    TRect R = Image1->ClientRect;
	//                      X1,     Y1     X2       Y2
	Image1->Canvas->Ellipse(R.left, R.top, R.right, R.bottom);

	// 2. draw line in radial direction
	static const int kNumAngles = 20;

	for(int idx=0; idx < kNumAngles; idx++) {
		double ang_deg = (360.0 / (double)kNumAngles) * idx;
		drawRadialLine(ang_deg);
	}

	// 3.. fill the sectors
	for(int idx=0; idx < kNumAngles; idx++) {
		double ang_deg = (360.0 / (double)kNumAngles) * idx;
		fillSector(ang_deg, /* width_deg=*/(360.0 / kNumAngles));
	}
}

void __fastcall TForm1::Button1Click(TObject *Sender)
{
	drawOnImage();
}
//---------------------------------------------------------------------------
```


![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/85fb5570-34eb-0abc-a1fe-a5d5150bb02d.png)
【Opendkimが起動しない】Error compiling regular expression

# はじめに
迷惑メール対策として、dkim認証の設定をしopendkimを再起動しようとしたら、下記のエラーが出て再起動できない・・・！

```
# journalctl -xe　※もろもろ省略
Error compiling regular expression
```


#調査内容
**```# systemctl status opendkim -l```で状態の詳細を確認**

**```# journalctl -xe```でログ確認**
→```Error compiling regular expression```というエラーログ発見！

**/etc/opendkim.confの確認**

**/etc/opendkim/KeyTableの確認**
→記載内容があっているか確認

**/etc/opendkim/SigningTableの確認**
→記載内容があっているか確認

**/etc/opendkim/keys配下を確認**
→所有者・所有グループがopendkimか、権限が600になっているか



# 原因
**/etc/opendkim/SigningTableに不要なものが記載されていました。。。**
→再起動をした際に、設定ファイルの読み取りができなくてエラーとなっていたようです。

実際のファイルはこちら↓

```
# cat SigningTable.backup
=============================================


# OPENDKIM TRUSTED HOSTS
# To use this file, uncomment the #ExternalIgnoreList and/or the #InternalHosts
# option in /etc/opendkim.conf then restart OpenDKIM. Additional hosts
# may be added on separate lines (IP addresses, hostnames, or CIDR ranges).
# The localhost IP (127.0.0.1) should always be the first entry in this file.
127.0.0.1
::1
#host.example.com
#192.168.1.0/24
[root@ip-172-31-9-177 opendkim]#　　　　　　　　　　 ←★ここから
[root@ip-172-31-9-177 opendkim]#
[root@ip-172-31-9-177 opendkim]#
[root@ip-172-31-9-177 opendkim]# cat SigningTable  ←★ここまで　
# OPENDKIM SIGNING TABLE
# This table controls how to apply one or more signatures to outgoing messages based
# on the address found in the From: header field. In simple terms, this tells
# OpenDKIM "how" to apply your keys.

# To use this file, uncomment the SigningTable option in /etc/opendkim.conf,
# then uncomment one of the usage examples below and replace example.com with your
# domain name, then restart OpenDKIM.

# WILDCARD EXAMPLE
# Enables signing for any address on the listed domain(s), but will work only if
# "refile:/etc/opendkim/SigningTable" is included in /etc/opendkim.conf.
# Create additional lines for additional domains.

# NON-WILDCARD EXAMPLE
# If "file:" (instead of "refile:") is specified in /etc/opendkim.conf, then
# wildcards will not work. Instead, full user@host is checked first, then simply host,
# then user@.domain (with all superdomains checked in sequence, so "foo.example.com"
# would first check "user@foo.example.com", then "user@.example.com", then "user@.com"),
# then .domain, then user@*, and finally *. See the opendkim.conf(5) man page under
# "SigningTable" for more details.

#example.com default._domainkey.example.com
*@メールドメイン default._domainkey.メールドメイン
```

全く覚えていないですが、変なのが入っていましたｗ
気が付かないうちにコピーし、貼り付けていました。。。。



# 解決策
**不要な記載を削除して、opendkimを再起動すれば正常に起動します。**
flowtype による型安全 javascript プログラミング(チュートリアル)

# 概要

node.js で静的型チェックをするための実例を紹介します。

本記事の実装は以下の repository にあります。
https://github.com/algas/flow-example

## flowtype とは？

[flowtype](https://flowtype.org/) は JavaScript 用の静的型チェッカーです。
JavaScript に type annotation を記述することで型チェックできるようになります。

### メリット

- 実行前に静的に型をチェックできる
- JavaScript での厄介なバグを生みやすい、暗黙的型変換やnull参照、`undefined is not a function`がチェックできる
- 必要な箇所だけ型チェックを適用することもできる

### デメリット

- type annotation は通常の javascript の文法とは異なるので直接 javascript として実行する場合にはファイルから型情報を取り除く必要がある  
(コメントにすることで回避できる)
- サードパーティのライブラリにも型チェックを適用するには、ライブラリごとに型情報ファイルを用意する必要がある  
(flow-typedで既に用意されているファイルを使える)

## 実装例

underscore.js を使った簡単な例を見てみましょう。

単純に `_.first` を呼び出して console.log に表示するだけのプログラムです。

```js
// @flow
/* flow-include import _ from 'underscore' */
(function(){
  var _ = require('underscore');
  /* :: declare var xs: Array<number>;  */
  var xs = [3,2,1];
  console.log(xs);
  var fs /* : number[] */ = _.first(xs, 2);
  console.log(fs);
  var x /* : number */ = _.first(xs);
  console.log(x);
})();
```

1行目は flow のファイルであることを宣言する記述です。
`// @flow `
2行目は flow-typed から underscore の型宣言を `_` に呼び出しています。
`import _ from 'underscore'`
ただし、これだけでは4行目と同じ `_` を使っているためにコンパイルエラーになります。それを避けるために flow-include コメントを使っています。
`/* flow-include ... */`
上記では3種類の flow コメントを使っています。

1. `/* : */`
2. `/* :: */`
3. `/* flow-include */`

本実装における flow の記述はすべてコメントにしているので javascript として実行しても問題ありません。

## 使い方

### セットアップ

```bash
npm install -g yarn
yarn install
$(yarn bin)/flow-typed install -f v0.42.0 underscore@1.8.3
```

### ビルド

`src` 以下にある flow ファイルから flow 構文を除去した標準の JavaScript を `build` 以下に出力します。
ここでは flow-remove-types を使っています。

```bash
$(yarn bin)/flow-remove-types src/ --out-dir build/
```

### テスト

flow による静的型チェックを行います。

```bash
$(yarn bin)/flow check
```

### 実行

ビルドせずに直接 flow のコードを実行します。

```bash
$(yarn bin)/flow-node src/index.js
```

## まとめ

https://github.com/algas/flow-example
flow を使うことで動的型付け言語である JavaScript に静的型チェックを取り入れることができます。
本記事を参考にしていただくことで JavaScript を書くみなさんの負担を少しでも軽減することができたら幸いです。

## 参考文献

https://flowtype.org/
http://qiita.com/kuy/items/90fe63a9cc6710815c09
【ECCUBE3】カスタマイズする前に基本機能・設定を把握しよう！

# 1. ショップマスター

## 送料設定

1. 送料無料条件(金額)
2. 送料無料条件(数量)
3. 商品ごとの送料設定を有効にする
4. 複数配送を有効にする

## 会員設定

1. 仮会員を有効にする
2. マイページに注文状況を表示する
3. お気に入り商品機能を利用する
4. 自動ログイン機能を有効にする

## 商品設定

1. 商品設定
2. 在庫切れ商品を非表示にする

# 2. 支払方法設定
1. 支払方法
2. 手数料
3. 利用条件 - 購入金額範囲設定
4. ロゴ画像
5. 決済プラグイン用設定

# 3. 配送方法設定
## 基本情報
1. 配送業者名
2. 名称
3. 伝票No.URL
4. 商品種別

## 支払方法設定
## お届け時間設定
## 都道府県別送料設定

# 4. 税率設定
## 個別税率設定
1. 商品別税率機能

## 共通税率設定
1. 消費税率
2. 課税規則 - 四捨五入、切り捨て、切り上げ
3. 適用日時

# 5. メンバー管理
1. 名前
2. 所属
3. ログインID
4. パスワード
5. パスワード(確認)
6. 権限
7. 稼働/非稼働

# 6. 権限設定
1. 権限	
2. 拒否URL

# 7. セキュリティ管理
## セキュリティ機能設定
1. ディレクトリ名
2. IP制限

## セキュリティ機能設定
1. SSL制限

# 8. マスターデータ管理
1. mtb_authority - 権限
2. mtb_country - 国
3. mtb_csv_type - CSV種類
4. mtb_customer_order_status - ??
5. mtb_customer_status - 会員種類
6. mtb_db - DB種類
7. mtb_device_type - デバイスタイプ
8. mtb_disp - 公開・非公開
9. mtb_job - 会員職業
10. mtb_order_status - 受注対応状況
11. mtb_order_status_color - ??
12. mtb_page_max - ??
13. mtb_pref - 都道府県
14. mtb_product_list_max - 商品リスト表示件数
15. mtb_product_list_order_by - 商品リスト表示並び順
16. mtb_product_type - 商品種別
17. mtb_sex - 会員性別
18. mtb_tag - タグ
19. mtb_taxrule - 課税規則
20. mtb_work - 稼働/非稼働
selenium chromedriver ( Chrome 57 )で、PDF をダウンロードする +（その他備忘）

# chrome 57 に限定した情報

selenium 巡回するときに、PDF をダウンロードしたいのですが、Chrome ではうまくいきませんでした。原因は単純で、chrome 57 から、記法がかわり下記のように設定します。
ただそれだけです。

'plugins.always_open_pdf_externally':True,

# キャレットがでないとき

chrome の設定で、ハードウェアアクセれレーションを無効にします。
Color > 4色の合成 > 組合せ数は

```txt:動作環境
C++ Builder XE4
```

4つの色がある。
それらの色の合成の組合せ総数はいくつか。

使う式は以下のC (Combination)。

```math
{}_nC_r = \frac{n!}{(n-r)!r!}
```

### 1色だけ

```math
{}_4C_1 = \frac{4!}{(4-1)!1!} = 4
```

### 2色

```math
{}_4C_2 = \frac{4!}{(4-2)!2!} = \frac{4*3*2*1}{2*1*2*1} = 6
```

### 3色

1色と同じになり4

### 4色

```math
{}_4C_4 = \frac{4!}{(4-4)!4!} = 1
```

### 合計

4 + 6 + 4 + 1 = 15

0色という場合もあるとすると16パターン。

### 実装

http://stackoverflow.com/questions/12991758/creating-all-possible-k-combinations-of-n-items-in-c
に実装例がある。
組合せ数ではなく、実際の組合せを表示する。

dorserg氏による実装例を使った結果が以下。(n=4, r=2)
http://ideone.com/ongVuG
基本認証のかかったディレクトリのWordPressからSimply Staticでオフラインで使用できるサイトを生成する

WordPressを静的サイトジェネレーターとして使うためのプラグインは、StaticPress、WP Static HTML Outputなど他にもあるが、オフラインでも使用できるパスで生成できるのはSimply Staticだけ。生成も速く、トップページから見てリンクが通っているページのみ生成されるので不要なファイルがなくてスッキリしていて、zipでダウンロードするか同じサーバの特定のディレクトリに出力するかを選べるなど使い勝手も良い。

生成のオプションは

- 絶対URLを使用する（指定したドメインの絶対URLに変換してくれる）
- 相対URLを使用する（任意のドメインで動作する相対URLに変換してくれる）
- オフラインで使用するために保存

の3種類。

パーマリンクの設定は、「基本」のままだとうまく動かないので他を選ぶ必要がある。すべてでは試してないけど、「投稿名」を選んだ状態ではオーケー。

基本認証のかかったWordPressの場合は、 Simply Static > 設定 > 上級者向け > Basic Auth で基本認証のアカウントを登録しておくと生成できるようになる。

生成したファイルを自動的にFTPしたり転送したりする機能はないので、そういうことが必要な場合は、StaticPressやWP Static HTML Outputの方が良い。StaticPressやWP Static HTML Outputでも、基本認証からIPアドレスを除外するやり方で生成ができる。

追記：
アクティビティログに表示される時刻がUTCのままになってたけど使用しているテーマのfunctions.phpに下記のコードを追加したら直りました。

```php:functions.php
date_default_timezone_set('Asia/Tokyo');
```

追記（2017/05/23）：
Simply Staticを有効化した状態では、「パスワードをお忘れですか？」 → ユーザー名またはメールアドレスを入力して「新しいパスワードを取得」をクリックして届くメールに、リセット用のURLが記述されないというバグがあります。
CSSで背景画像を指定して、スマホで見ると背景が途中で切れて（ずれて）表示される

`.container` の幅を `width:100%` にして、`background:url(bg.jpg) top center no-repeat` のように背景画像を指定します。

```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS</title>
<style type="text/css">
body { margin:0; padding:0; }
.container {
	width:100%;
	height:1278px;
	background:url(bg.jpg) top center no-repeat;
}
.inner {
	width:960px;
	background:yellow;
	margin:0 auto;
}
</style>
</head>
<body>
<div class="container">
	<div class="inner">ここは、inner エリアです。</div>
</div>
</body>
</html>
```

PCでは問題なく、背景画像が表示されます。

![cap-pc.jpg](https://qiita-image-store.s3.amazonaws.com/0/42231/34a18ea4-301b-af58-a78b-2006f8805dfa.jpeg)

スマホだと背景が途中で切れて（ずれて）表示されます。

![cap-sp.jpg](https://qiita-image-store.s3.amazonaws.com/0/42231/9bd79a89-846b-0966-c986-52e93d1c6e54.jpeg)

`min-width` を指定すれば解決します。

```diff
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS</title>
<style type="text/css">
body { margin:0; padding:0; }
.container {
	width:100%;
+	min-width:960px;
	height:1278px;
	background:url(bg.jpg) top center no-repeat;
}
.inner {
	width:960px;
	background:yellow;
	margin:0 auto;
}
</style>
</head>
<body>
<div class="container">
	<div class="inner">ここは、inner エリアです。</div>
</div>
</body>
</html>
```
2017-03-28 color > link > 4色のサンプル

4色を使う場合、どういう組合せがいいか。
以下のサイトでは4色の組合せ例を見ることができる。

http://colorhunt.co

- RGB値を見ることができる
- パターン内の色をクリックするとそのパターンのリンクが開く
  - 例: http://colorhunt.co/c/7642
- Randomにてランダムに表示できる
  - http://colorhunt.co/random
- Color Palettes Of The Solar System Stars
  - http://colorhunt.co/blog/solar-system-stars-color-palettes/
  - Planetを4色で表すというのは面白い
- Is There Any Difference Between Google’s & Microsoft’s Colors?
  - http://colorhunt.co/blog/google-microsoft-brand-colors/
最新ビルドシステムGulp 4入門 〜環境構築からタスク作成まで〜

[Gulp](http://gulpjs.com/)は、SassやBabel・TypeScriptのコンパイル、ローカルサーバーの構築等、面倒なweb制作のタスクを効率的に記述する人気のビルドシステムです。**2018年12月にリリースされた最新のバージョン4では、簡易なタスク定義、プラグインなしの直列・並列処理など、便利な機能が追加されています**。

本エントリーでは、Gulp 4の導入方法と簡単なタスク定義までを紹介します。

「[絶対つまずかないGulp 4入門\(2018年版\) \- インストールとSassを使うまでの手順 \- ICS MEDIA](https://ics.media/entry/3290)」では環境構築方法やSassのコンパイル、watchなどについて動画付きで詳しく解説しています。こちらもあわせて参照ください。

# プロジェクトの初期設定
まずは環境準備です。コマンドライン(Windowsではコマンドプロンプト、macOSではターミナル)を使う場面がありますが、コピペだけで簡単にインストールでき、5分もあれば終了します。

任意のプロジェクトフォルダーにコマンドラインを使って移動します。

```bash:プロジェクトフォルダへの移動
cd /Users/MyName/myproject
```

プロジェクトの初期設定を行います。

```bash:プロジェクトの初期設定
npm init -y
```

# プロジェクトフォルダーにGulp 4のインストール
Gulp 4をインストールします。

```bash:プロジェクトの初期設定
npm install gulp -D
```

# プロジェクトフォルダーのGulp 4を使う
プロジェクトフォルダーにインストールしたGulp 4を使うには、npm Node.js v8.2で導入された`npx`を使うのが便利です（参考記事「[npm 5.2.0の新機能！ 「npx」でローカルパッケージを手軽に実行しよう](https://qiita.com/tonkotsuboy_com/items/8227f5993769c3df533d)」）。

`npx gulp`コマンドにより、プロジェクトフォルダーのGulpが使えるようになります。**グローバルに`gulp-cli`をインストールする必要はありません**。

```bash:Gulpの使用(バージョンの確認)
npx gulp -v
```

タスクを指定したい場合は次のようにします。

```bash:Gulpの使用
npx gulp (タスク名)
```

# Gulp 4を試してみる
環境が準備できたので、Gulp 4を使ってみましょう。Gulp 4の変更点は [CHANGELOG](https://github.com/gulpjs/gulp/blob/master/CHANGELOG.md#400) に記載がありますが、基本的な使い方は同じです。

ログを出力する簡単なタスクは下記です。`done`の部分はコールバック関数（タスクが終わった後に実行される関数）で、この指定がない場合は警告が出ます。

```js:ログの出力テストです
gulp.task("mytask", (done) => {
  console.log("gulp 4 success!");
  done();
});
```

タスクを実行してみましょう。

```bash:mytaskの実行
npx gulp mytask
```

コンソールにログが出力されれば成功です。

![](https://qiita-image-store.s3.amazonaws.com/0/67884/db8be1ad-0c2e-22ee-d7a6-ce91735cafa9.png)


## 直列・並列処理
これまでGulpで直列処理（1つの処理が完了した後に次の処理が実行される）・並列処理（複数の処理が同時に実行される）を行うには、[run-sequence](https://www.npmjs.com/package/run-sequence)のようなプラグインを使う必要がありましたが、Gulp 4では標準で`gulp.series`と`gulp.parallel`が追加されたため、追加プラグインが不要となりました。

- task1 : 1秒後にログを出力
- task2 : 2秒後にログを出力
- task3 : 即座にログを出力

という内容のタスクを定義し、task1とtask2の完了後にtask3を実行するタスクを定義します。

```js:Gulp4の直列・並列処理
gulp.task("default",
  gulp.series(
    gulp.parallel("task1", "task2"),
    "task3"
  )
);
```

　実行すると、次のようにログが出力され、直列・並列処理が成功していることがわかります。

![](https://qiita-image-store.s3.amazonaws.com/0/67884/53a612d0-0686-f216-5d69-4646fcc9bd2c.gif)

# Gulp 4を使ってみよう
Gulp 4では、`gulp.series`と`gulp.parallel`を中心にAPIが更新されました。個人的にはGulp 3系を学ぶ時よりも、学習コストが低くなった印象を受けています。是非最新ビルドシステムGulp 4に触れてみてください。

■ 関連記事

- [絶対つまずかないGulp 4入門\(2018年版\) \- インストールとSassを使うまでの手順 \- ICS MEDIA](https://ics.media/entry/3290)
- [Gulp入門 - Schoo（スクー）](https://schoo.jp/class/3570)
Android StudioのAlt+Enterアクションの一部を間違って無効にしてしまったときの再設定方法

![AndroidStudioのswitch_1.gif](https://qiita-image-store.s3.amazonaws.com/0/113982/8b175b5d-1f82-8100-4a90-6c798e818e92.gif)

上記の、switch文の始めのカッコの方でAlt+Enter押すと表示されるメニューが
ぱったりと表示されなくなってしまい焦る。
設定を戻すのに少々手間取ったのと、再度やらかすころには忘れてそうなので備忘録。

##原因
うっかりDisableのメニューを押下したみたい。

![スクリーンショット 2017-03-28 10.01.56.jpg](https://qiita-image-store.s3.amazonaws.com/0/113982/34b37bde-7f05-094e-4045-986181e2ed08.jpeg)

##解決方法
PreferenceのIntentionsメニュー内でswitch項目を検索し、
「Create Enum Switch Branches」のチェックが外れていたものを付け直してApply。

![スクリーンショット 2017-03-28 10.03.44.jpg](https://qiita-image-store.s3.amazonaws.com/0/113982/2e063964-abf2-106e-8588-dee27a9ff3d1.jpeg)
Laravel で、Socialiteを使ったFacebookログインができなくなっている件

2017年3月28日から、FacebookのAPIの変更により、 `laravel/socialite` によるFacebook API を利用したログインができなくなっている。

ログはこんな感じ。

>
[2017-03-28 12:39:19] local.ERROR: GuzzleHttp\Exception\ClientException: 
Client error: 
`GET https://graph.facebook.com/v2.8/me?access_token=&fields=name,email,gender,verified,link&appsecret_proof=5
{"error":{"message":"An active access token must be used to query information about the current user.","type":"OAuthExce (truncated...)
 in /app/vendor/guzzlehttp/guzzle/src/Exception/RequestException.php:111


下記のPRで修正されているので、 `composer update` して `v2.0.21` または `v3.0.4` にアップグレードすれば良い。

- https://github.com/laravel/socialite/pull/214
- https://github.com/laravel/socialite/pull/215


焦った。

こういう外部連携系はこまめにアップデートしておかないと危険。

# 関連

Stack overflow でも質問があった。

http://stackoverflow.com/questions/43058127/oauthexception-using-socialite-with-facebook-message-an-active-access-toke
Selenium WebDriver SVG要素をxpathで取得する方法

#間違った取得方法
WebDriver::By.xpathでSVGを取得する時、SVGはDIV要素等と違って以下のように取得することができません

```js:要素名で取得
driver.findElement(By.xpath("//svg"));
```

ただし、以下のように全称セレクタを使用してidで取得することは可能です。

```js:全称セレクタ+idで取得
driver.findElement(By.xpath("//*[@id='test']"));
```

しかし、一般的に各SVGにidが付与されているケースは少ないのであまり有効ではありません。

#正しい取得方法
次のようにname Functionを使用することでQNameとして要素を取得することができます。

```js:svg要素を取得
driver.findElement(By.xpath("//*[name()='svg']"));
```

gやpath要素も同様に取得可能です。

```js:path要素を取得
driver.findElement(By.xpath("//*[name()='svg']//*[name()='g']//*[name()='path']"));
```
icomoonに頼らずにiconフォントを作成する（gulp-iconfont）

#はじめに
webサービスでアイコンフォントを使おうとして、自分の好きなアイコンだけ選んで使え、自作のアイコンを登録できるicomoonを使用していた。
しかし、無料版は設定をCookieに保存するので下記の点で困っていた。

- キャッシュクリアしたら再作成する必要がある
- 他人と設定を共有できない
- 課金額に見合うメリットが見出せない

そんなわけで、アイコンをGulpで生成きないかなと思ったらgulp-iconfontというパッケージがあったので導入時に詰まったところを備忘録として残しておく。nodeとgulpの使い方は省略します。

# アウトプットファイル
- アイコンフォント一式
- sassファイル
    - ここからさらにsassコンパイルして１つのcssを出力しているため
- ドキュメントファイル
    - html（iconsTemplate.html）
    - css（iconsTemplate.css）
    - 使用フォント一覧をブラウザで見えるようにしておくと便利

# 準備
- nodeのインストール
- gulpとパッケージのインストール
    - gulp
    - gulp-rename
    - gulp-iconfont
    - gulp-consolidate
    - lodash
- iconフォント化したいSVG
    - 今回はMaterial icons( https://material.io/icons/ )を使用する
    - **1000px以上にリサイズして使用すること**
- テンプレートファイル
    - https://github.com/backflip/gulp-iconfont-css を変更して使用する

# タスクの設定
```coffeescript:gulpfile.coffee
gulp         = require 'gulp'
rename       = require 'gulp-rename'
iconfont     = require 'gulp-iconfont'
consolidate  = require 'gulp-consolidate'

fontOutputDirectory = "fonts/"
runTimestamp = Math.round Date.now() / 1000
fontName = 'sampleicons'

gulp.task 'iconfont', () ->
  return gulp.src [fontOutputDirectory + 'svg/*.svg']
    .pipe iconfont
      fontName: fontName
      timestamp: runTimestamp
      formats: ['ttf','eot','woff','svg']
    .on 'glyphs', (glyphs, options) ->
      cssFileName = 'iconsSample'
      scssFileName = '_icons'
      htmlFileName = 'iconsSample'
      engine = 'lodash'
      consolidateOptions =
        glyphs: glyphs
        fontName: fontName
        fontPath: './'
        className: 'icon'
      #sass
      gulp.src fontOutputDirectory + 'iconsTemplate.scss'
        .pipe consolidate engine, consolidateOptions
        .pipe rename basename: scssFileName
        .pipe gulp.dest 'sass/font/'
      #css
      gulp.src fontOutputDirectory + 'iconsTemplate.css'
        .pipe consolidate engine, consolidateOptions
        .pipe rename basename: cssFileName
        .pipe gulp.dest fontOutputDirectory
      # #html
      consolidateOptions.cssFileName = cssFileName
      gulp.src fontOutputDirectory + 'iconsTemplate.html'
        .pipe consolidate engine, consolidateOptions
        .pipe rename basename: htmlFileName
        .pipe gulp.dest fontOutputDirectory

    .pipe gulp.dest(fontOutputDirectory)
```

#つまりどころ
##Cannot read property 'toString' of undefinedとエラーが出る
`glyph.codepoint.toString(16).toUpperCase()`
を
`glyph.unicode[0].charCodeAt(0).toString(16).toUpperCase()`
に変更する

## 使用するSVG画像
大きさを1000px以上を使用しないと生成時にアイコンが崩れてしまう



# 参考URL
http://qiita.com/MAL09/items/1b383fbb62e241ed6e1b
http://sakamock.hatenablog.com/entry/2016/11/25/173403
Crowiアカウント情報取得

# Crowiアカウント情報取得

■アカウント取得手順
1 Crwoiサービス停止
$ sudo systemctl stop crowi

2 バックアップフォルダ作成
$ mkdir -p ~/backup/

3 バックアップファイル作成
$ mongodump --out ~/backup/crowi_testdump.dat

4 バックアップファイル確認
$ less ~/backup/crowi_testdump.dat

5 「/root/backup/crowi_testdump.dat/crowidb」に移動

6 以下のファイルを一個前の階層に退避させる
pages.bson pages.metadata.json revisions.bson revisions.metadata.json

7 退避させたもの以外の「crowidb」フォルダを圧縮する。
tar czvf crowidb.tar.gz crowidb

8 以下のように圧縮されていることを確認する。
[root@localhost crowi_testdump.dat]# ls -la
合計 468
drwxr-xr-x. 4 root root   4096  3月 23 21:23 .
drwxr-xr-x. 3 root root     31  3月 23 20:30 ..
drwxr-xr-x. 2 root root   4096  3月 23 20:30 admin
drwxr-xr-x. 2 root root   4096  3月 23 21:18 crowidb
-rw-r--r--. 1 root root   5022  3月 23 21:23 crowidb.tar.gz
-rw-r--r--. 1 root root  61363  3月 23 20:30 pages.bson
-rw-r--r--. 1 root root    762  3月 23 20:30 pages.metadata.json
-rw-r--r--. 1 root root 387421  3月 23 20:30 revisions.bson
-rw-r--r--. 1 root root     99  3月 23 20:30 revisions.metadata.json

■アカウント反映手順
1 新しいサーバに移動し、上記で取得したファイルを解凍する。
$ tar xzvf crowidb.tar.gz

2 以下のコマンドで新しいサーバに反映させる
$ mongorestore -d crowidb --drop /root/crowidb

3 Crowiにアクセスしログインしてアカウント情報が反映されていればおっけ。
[Mac] AtomにEditorConfigを導入する

[EditorConfig](http://editorconfig.org/)を使用すると、チームで異なるエディタやIDEを使っていてもコードスタイルを統一することができます。本記事では、[Atom](https://atom.io/)にEditorConfigを導入する手順をまとめます

# 環境
* OS X El Capitan (v10.11)
* Atom 1.15.0 x64

# editorconfigパッケージをAtomにインストール
`Atom -> Preferences`
Settings内の、`Install`タブをクリックし、検索バーに`editorconfig`と入力しEnter

<img width="1081" alt="settings.png" src="https://qiita-image-store.s3.amazonaws.com/0/172234/39123552-12c9-3e6d-6ae4-b6309cdeec32.png">

[editorconfig](https://atom.io/packages/editorconfig)パッケージの、右のinstallボタンをクリック

<img width="860" alt="installed.png" src="https://qiita-image-store.s3.amazonaws.com/0/172234/740598bd-3127-f696-e898-bf5b1215788e.png">

インストールできました


# .editorconfigファイルを作成
プロジェクト直下に`.editorconfig`ファイルを作成し、設定を記述する

```
.
└── .editorconfig
```

記述例

```:.editorconfig
# このファイルより上の階層の.editorconfigファイルは評価しない
root = true

[*]
# インデントはスペース2つ分
indent_style = space
indent_size = 2
# 文字コードはUTF-8
charset = utf-8
# 行末の空白文字を削除
trim_trailing_whitespace = true
# ファイルの末尾が改行でない時に補完
insert_final_newline = true
# 改行コードはLF
end_of_line = lf
# 一行は80文字まで
max_line_length = 80

[*.md]
# Markdownの時は行末の空白文字を削除しない
trim_trailing_whitespace = false

```

# 動作確認
同じくプロジェクト直下に`hello.js`を作成

```
.
├── .editorconfig
└── hello.js
```

何か書いてみる

```js:hello.js

const hello = () => {
  console.log('hello'); //インデントはスペース2つ分になっている
};

hello();

```

`.editorconfig`ファイルで`indent_size = 4`に変更し、また新たに何か書いてみる

```js:hello.js

const hello = () => {
  console.log('hello');
};

const world = () => {
    console.log('world'); //インデントがスペース4つ分になっている
};

hello();
world();

```

インデントがスペース4つ分になっていれば、設定が正しく反映されている

# ん...？
## ウインドウ右下の黄色いネズミマークをクリックすると...

<img width="160" alt="mouse.png" src="https://qiita-image-store.s3.amazonaws.com/0/172234/a96c5c3c-7546-72d5-26f5-eea9cde25991.png">

<img width="465" alt="warning.png" src="https://qiita-image-store.s3.amazonaws.com/0/172234/647a6490-f2fe-0b26-f4b3-d248d86cbb22.png">

「whitespace」というAtomのCore Packageが、`.editorconfig`ファイル内の`insert_final_newline`と`trim_trailing_whitespace`の設定とコンフリクトする可能性があるとのこと

## Core Packageは消せないので、無効化しましょう
`Atom -> Preferences`
Settings内の、`packages`タブをクリックし、検索バーに`whitespace`と入力しEnter

<img width="1080" alt="whitespacesetting.png" src="https://qiita-image-store.s3.amazonaws.com/0/172234/49e777da-703e-5251-23b0-f8d6c06eef25.png">

whitespaceパッケージの、右のDisableボタンをクリック

<img width="1081" alt="whitespacedisabled.png" src="https://qiita-image-store.s3.amazonaws.com/0/172234/54356be7-a289-70b3-47df-72850cb02682.png">

<img width="159" alt="disappered.png" src="https://qiita-image-store.s3.amazonaws.com/0/172234/afbbeb90-6b14-8510-a2e6-ea307343a9f0.png">

ネズミさんはいなくなりました

# 参考
[EditorConfig](http://editorconfig.org/)
[Atom](https://atom.io/)
[editorconfig(Atomパッケージ)](https://atom.io/packages/editorconfig)
C#のメモ帳　小技集(親子孫Formで親の変数を共有)

すぐ忘れるので、よく使う小技を集めました。


#### Form関連 (親子孫Formで親の変数を共有)
１．親子関係で、子が親の変数を利用したい場合　【子がf.ShowDialog(this);で表示された場合に限る。緊急時のみ？】

```c#:子をモーダル表示して、親を隠す
            this.Hide();    //自分を隠す-----------------

            //【モードレス表示】
　　　　　　 //Form子 f = new Form子();
            //f.Show();

            //【モーダル表示】
            Form子 f = new Form子();　　　//Form子クラスのインスタンスを作成する
            f.ShowDialog(this);　　　　　//モーダルダイアログボックスとして表示する。オーナーウィンドウにthisを指定する。
            f.Dispose();　　　　　　　　　//フォームが必要なくなったところで、Disposeを呼び出す

            this.Show();    //自分を現す------------------
```

```csharp:子から、親の変数を呼び出す　
            子の変数 = ((Form親)this.Owner).親の変数;    //他のフォームからPublic変数を呼び出す。
```

２.　親子孫関係で、子孫が親の変数を利用したい場合　【この方法が一番しっくりくるかも】

```csharp:親のコード　
　　public partial class Form親 : Form
    {
        //【参考HP】http://dobon.net/vb/dotnet/form/accessanotherformdata.html

        //---Publicオブジェクト宣言部----------------------------------------------
        //Form親オブジェクトを保持し、親のイスタンスを公開する
        private static Form親 _form親Instance;

        //Form親オブジェクトを取得、設定するためのプロパティ
        public static Form親 Form親Instance
        {
            get
            {
                return _form親Instance;
            }
            set
            {
                _form親Instance = value;
            }
        }

        private string targetStr;  
        public string TargetStr
        {
　　　　　　　get
            {
            　　　return targetStr;
            }
        　　set
            {
                //空白 ←子から書き換えられないようにする場合。
            }

        }
        //-----------------------------------------------------------------------------

        private void Form1_Load(object sender, EventArgs e)
        {
            //---他のフォームへの変数照会用
            Form親.Form親Instance = this;　//Form親Instanceに代入
　　　　　　 targetStr = "あいうえお";      //値を設定
        }

        private void buttonFromを表示_Click(object sender, EventArgs e)
        {
            //子をモーダル表示
            Form子 f = new Form子();
            f.ShowDialog(this);　　　　　//親はthis、つまり「form親」だよの設定。
            f.Dispose();
        }
    }
```

```csharp:子のコード　

        private void button親の変数表示_Click(object sender, EventArgs e)
        {
            //Form親の変数を取得
            label1.Text = Form親.Form親Instance.TargetStr;
        }

        private void button親の変数書き換えちゃう_Click(object sender, EventArgs e)
        {
            //Form親の変数を書き換えちゃう
            Form親.Form親Instance.TargetStr = "ABCDE";
        }

        private void button孫の表示_Click(object sender, EventArgs e)
        {
            Form孫 f = new Form孫();
            f.ShowDialog(this);
            f.Dispose();
        }
```


```csharp:孫のコード　
        private void button親の変数表示_Click(object sender, EventArgs e)
        {
            //Form親の変数を取得
            label1.Text = Form親.Form親Instance.TargetStr;
        }
```
参考にさせて頂いたページ⇒　http://dobon.net/vb/dotnet/form/accessanotherformdata.html
[Vagrant]forwarded_portでIPアドレスが0.0.0.0になった時の解消法

# forwarded_portでIPアドレスが0.0.0.0になった時の解消法

Vagrant v1.9.3

```ruby
config.vm.network "forwarded_port", guest: 22, host: 12210, id: "ssh"
```

Vagrantでポートフォワーディングの設定をする場合はforwarded_portを使いますが、以下のようなエラーが。

```bash
The requested address is not valid in its context. - connect(2) for "0.0.0.0" port 12220 (Errno::EADDRNOTAVAIL)
```

こんなときは、host_ipオプションをつけると大丈夫そうです。

```ruby
config.vm.network "forwarded_port", guest: 22, host: 12210, host_ip:"127.0.0.1", id: "ssh"
```
iOS .mobileprovisionのデベロッパー証明書を確認する

CLIバリバリの環境で開発していてiOSのプロビジョニングプロファイル(.mobileprovision)の内容や有効期限を確認したくなる事態がままあるのでその方法のメモ

##.mobileprovisionの内容を表示する
プロビジョニングプロファイル(.mobileprovision)の内容をプレインテキストとして表示するには複数の方法がありますが、macOS上でなら以下の方法が簡単でしょう。

```shell:macOS
$ security cms -D -i [プロビジョニングプロファイル]
```

Linuxなど、他の環境だとsecurityコマンドが使えないので、opensslコマンドを使い、以下の様にすれば同じ様な効果が得られます。

```shell:Linux
$ openssl smime -inform der -verify -noverify -in [プロビジョニングプロファイル] 2> /dev/null
```
※Linuxなどの環境ではRoot CA証明書などの関係でプロビジョニングプロファイルの検証がエラーになるので、それを無視するのに-noverifyオプションを使っています。

##プロビジョニングプロファイルの署名に使われているデベロッパー証明書の内容を表示する
macOSなら、先ほどの**.mobileprovisionの内容を表示する**方法を応用してPlistBuddyなどを組み合わせることでプロビジョニングプロファイル(.mobileprovision)のDeveloperCertificatesを取り出してopensslでプレインテキストとして表示します。

```shell:macOS
$ /usr/libexec/PlistBuddy -c "Print DeveloperCertificates:0" /dev/stdin <<< $(security cms -D -i [プロビジョニングプロファイル]) | openssl x509 -inform der -text -noout
```

Linuxの場合はplistを扱うためのPlistBuddyがないので少々厄介ですが、grepやsedを組み合わせてDeveloperCertificatesの値をうまく取り出せればなんとかなります。

```Shell:Linux
/usr/bin/openssl smime -inform der -verify -noverify -in \
 [プロビジョニングプロファイル] 2> /dev/null | \
 grep -o "<data[^>]*>[^<]*</data>" | sed -e "s/<data>\(.*\)<\/data>/\1/" | \
 base64 -d | openssl x509 -inform der -text -noout
```
※この方法はプロビジョニングプロファイルの中に<data>〜</data>のタグが１つしか存在しないという想定で書かれた乱暴なほうほうなので少々危なっかしいですが…
C++ Builder / TCanvas > 円を描いて動径方向に線を引く

```txt:動作環境
C++ Builder XE4
```

```Unit1.cpp
//---------------------------------------------------------------------------

#include <vcl.h>
#pragma hdrstop

#include "Unit1.h"
//---------------------------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.dfm"
TForm1 *Form1;
//---------------------------------------------------------------------------
__fastcall TForm1::TForm1(TComponent* Owner)
	: TForm(Owner)
{
}
//---------------------------------------------------------------------------

void __fastcall TForm1::drawRadialLine(double angle_deg)
{
	TRect R = Image1->ClientRect;

	double radius = (R.right - R.left) / 2;
	int center_x = (R.left + R.right) / 2;
	int center_y = (R.top + R.bottom) / 2;

	Image1->Canvas->MoveTo(center_x, center_y);

	int to_x = radius * Cos(angle_deg * M_PI / 180.0);
	int to_y = radius * Sin(angle_deg * M_PI / 180.0);
	to_x += center_x;
	to_y += center_y;
	Image1->Canvas->LineTo(to_x, to_y);
}

void __fastcall TForm1::drawOnImage(void)
{
	// 1. draw circle
	TRect R = Image1->ClientRect;
	//                      X1,     Y1     X2       Y2
	Image1->Canvas->Ellipse(R.left, R.top, R.right, R.bottom);

	// 2. draw line in radial direction
	drawRadialLine(/*angle_deg=*/30.0);
	drawRadialLine(/*angle_deg=*/140.0);
	drawRadialLine(/*angle_deg=*/250.0);
}

void __fastcall TForm1::Button1Click(TObject *Sender)
{
	drawOnImage();
}
//---------------------------------------------------------------------------
```

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/3637212d-bbbd-d959-6f68-d14f759a720d.png)

TImageのサイズはW250 x H250。

0度の定義: 中心点から右方向に水平線を描く
そこから時計回りに角度を取っている。
MySQL Group ReplicationでPrimaryのHOSTがどれかを確認する方法

以下の通り

```
mysql> SELECT b.MEMBER_HOST, b.MEMBER_PORT FROM performance_schema.global_status as a, performance_schema.replication_group_members as b where a.VARIABLE_NAME= 'group_replication_primary_member' and a.VARIABLE_VALUE = b.MEMBER_ID;
+-------------+-------------+
| MEMBER_HOST | MEMBER_PORT |
+-------------+-------------+
| mysql-2     |        3306 |
+-------------+-------------+
1 row in set (0.00 sec)
```

次の２つのテーブルを結合しているだけです

```
mysql> SELECT * FROM performance_schema.replication_group_members;
+---------------------------+--------------------------------------+-------------+-------------+--------------+
| CHANNEL_NAME              | MEMBER_ID                            | MEMBER_HOST | MEMBER_PORT | MEMBER_STATE |
+---------------------------+--------------------------------------+-------------+-------------+--------------+
| group_replication_applier | 3aa373dc-12bb-11e7-b4f9-00155d041428 | mysql-3     |        3306 | ONLINE       |
| group_replication_applier | 5fc11a47-055e-11e7-9b1a-00155d041426 | mysql-1     |        3306 | ONLINE       |
| group_replication_applier | cfe5952c-055f-11e7-a7f4-00155d041427 | mysql-2     |        3306 | ONLINE       |
+---------------------------+--------------------------------------+-------------+-------------+--------------+
3 rows in set (0.00 sec)

mysql> SELECT * from performance_schema.global_status WHERE VARIABLE_NAME= 'group_replication_primary_member';
+----------------------------------+--------------------------------------+
| VARIABLE_NAME                    | VARIABLE_VALUE                       |
+----------------------------------+--------------------------------------+
| group_replication_primary_member | cfe5952c-055f-11e7-a7f4-00155d041427 |
+----------------------------------+--------------------------------------+
1 row in set (0.00 sec)
```
VMware workstation クローン作成後設定

# VMWare workstation クローン作成後設定

1 クローン作成後、「GENERAL.CONNECTION」のデバイスが別のものを認識しているので変更する
　「GENERAL.HWADDR」をメモしておく。
![WS000002.JPG](https://qiita-image-store.s3.amazonaws.com/0/162959/0b882d57-255b-9daa-bb8b-f91bac8778f4.jpeg)

2 「nmtui」コマンドを入力します。
![WS000003.JPG](https://qiita-image-store.s3.amazonaws.com/0/162959/948aaa65-1555-adfe-84dc-d93e3f06b521.jpeg)

3 「Edit a connection」を選択します。
![WS000004.JPG](https://qiita-image-store.s3.amazonaws.com/0/162959/e647279f-8a3d-d5cc-4cef-f3936d4638c1.jpeg)

4 「eno16777736」を選択し、「Edit」を選択します。
![WS000005.JPG](https://qiita-image-store.s3.amazonaws.com/0/162959/8fbd86fd-97d8-36a8-4e1c-fe258954bf04.jpeg)

5 Deviceに1でメモしたMACアドレスを入力し、OKを選択します。
![WS000006.JPG](https://qiita-image-store.s3.amazonaws.com/0/162959/dce0ce42-d41d-4251-c0b4-3a2cc01da806.jpeg)

6 一度出て、再度こちらの画面に戻り、「Activate a connection」を選択します。
![WS000004.JPG](https://qiita-image-store.s3.amazonaws.com/0/162959/a6654ad2-8442-37c5-d467-9f62db09c3ae.jpeg)

7 「eno16777736」を「Enter」キーをクリックし「Activate」に変更する。
   ※「Activate」にする場合は、右側の表示が「Deactivate」になります。
![WS000008.JPG](https://qiita-image-store.s3.amazonaws.com/0/162959/fe7201b1-3a54-1a89-99b3-54f95f97d1b3.jpeg)

8 「nmcli d show」を入力し「GENERAL.CONNECTION」が「eno16777736」に変更されていればOK
![WS000010.JPG](https://qiita-image-store.s3.amazonaws.com/0/162959/b8191f04-ae2c-11fa-11f2-53b4c04aca50.jpeg)
composer updateが落ちる(zlib_decode(): data error)

#composer updateを実行した際に下記のエラーで落ちる場合の対処法
```
Failed to decode response: zlib_decode(): data error
Retrying with degraded mode, check https://getcomposer.org/doc/articles/troubleshooting.md#degraded-mode for more info
```
##対処法
 ```
composer config -g repositories.packagist composer https://packagist.jp
```
上記のコマンドを実行する。
メモリの上限アップ？をしている気がする。


http://ps.zzqune.com/archives/59
[Web] 気になるライブラリ

自分が気になったライブラリなどをここに記録していこうと思います。

* Vegas2
 * 概要：BACKGROUND SLIDESHOW
 * URL：https://vegas.jaysalvat.com/
 * ポイント:背景画像をかっこよくスライドショーしてくれる。
 * 追記日時:2017/3/28
C++ Builder / TCanvas > Form上に描くか、TImage上に描くかで処理を変える

```txt:動作環境
C++ Builder XE4
```

TCanvasを使って描画するとき、以下の２つの方法が少なくともある。

- Form上に描く
- TImage上に描く

```Unit1.cpp
//---------------------------------------------------------------------------

#include <vcl.h>
#pragma hdrstop

#include "Unit1.h"
//---------------------------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.dfm"
TForm1 *Form1;
//---------------------------------------------------------------------------
__fastcall TForm1::TForm1(TComponent* Owner)
	: TForm(Owner)
{
}
//---------------------------------------------------------------------------

void __fastcall TForm1::drawOnImage(void)
{
	TRect R = Image1->ClientRect;

	//            X1      Y1     X2       Y2        X3       Y3     X4      Y4
	Image1->Canvas->Chord(R.Left, R.Top, R.Right, R.Bottom, R.Right, R.Top, R.Left, R.Top);
	Image1->Canvas->Brush->Color = clBlue;

	long hormid = (R.Left + R.Right) / 2;
	Image1->Canvas->FloodFill(hormid, R.Top + 5, clBlack, fsBorder);
}

void __fastcall TForm1::drawOnForm(void)
{
	TRect R = this->ClientRect;

	//            X1      Y1     X2       Y2        X3       Y3     X4      Y4
	this->Canvas->Chord(R.Left, R.Top, R.Right, R.Bottom, R.Right, R.Top, R.Left, R.Top);
	this->Canvas->Brush->Color = clBlue;

	long hormid = (R.Left + R.Right) / 2;
	this->Canvas->FloodFill(hormid, R.Top + 5, clBlack, fsBorder);
}

void __fastcall TForm1::Button1Click(TObject *Sender)
{
	drawOnForm();
	//drawOnImage();
}
//---------------------------------------------------------------------------

void __fastcall TForm1::FormPaint(TObject *Sender)
{
	//drawOnForm();
	drawOnImage();
}
//---------------------------------------------------------------------------
```

上記のコードを使って調べた結果が以下。

- Form上に描く
   - FormPaint()で描画処理しないと、隠蔽からの復帰時に描画しない
   - フォーム生成時にFormPaint()は問題ない
- TImage上に描く
  - FormPaint()で描画処理しなくても、隠蔽からの復帰時にも描画される
  - FormPaint()で描画すると、フォーム生成時にButton1が正常に描画されない (以下)

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/6314f305-a205-5369-b797-c43a66934274.png)
googlebotとはから勉強

### googlebotの勉強を始めたばかり

#### 書き方：

```php:.php
$is_gbot = strpos($_SERVER["HTTP_USER_AGENT"], "Googlebot");
```

```html:.html
<meta name="robots" content="noindex,follow">
{if $is_gbot===false}
{literal}
<!-- Microad ここから -->
<div id="123456789012345678901234567890" >
	<script type="text/javascript">
		microadCompass.queue.push({
			"spot": "1234567890",
			"url": "${COMPASS_EXT_URL}",
			"referrer": "${COMPASS_EXT_REF}"
		});
	</script>
</div>
<!-- Microad ここまで -->
{/literal}
{/if}
```

#### HTTP_USER_AGENT

 - HTTP_USER_AGENT 
 - 
  `Internet Explorer 10` `Internet Explorer 9` `Internet Explorer 8`  `Internet Explorer 7`  `Internet Explorer 6`  `Chrome on Windows`  `Chrome on Mac`  `Firefox on Windows`  `Firefox on Mac`  `Safari on Mac`  `Safari on Windows`  `Opera on Mac`  `Opera on Windows`   `iPhone`    `iPad`    `Android Handset (Droid 2)`    `Android Tablet (Galaxy Tab)`    `Android Tablet (MicroMessenger)`    `Kindle`    `Googlebot (Google's spider)`    `Surp! (Yahoo's spider)`    `BingBot (Bing's spider)`  

*参考：*
・[$_SERVER変数](https://www.en-pc.jp/tech/php_server.php)
・[サーチコンソールの登録方法とサイトマップ登録手順（旧Googleウェブマスターツール）](
http://kaifam.net/%e3%82%a2%e3%83%95%e3%82%a3%e3%83%aa%e3%82%a8%e3%82%a4%e3%83%88/%e3%82%b5%e3%83%bc%e3%83%81%e3%82%b3%e3%83%b3%e3%82%bd%e3%83%bc%e3%83%ab%e3%81%ae%e7%99%bb%e9%8c%b2%e6%96%b9%e6%b3%95%e3%81%a8%e3%82%b5%e3%82%a4%e3%83%88%e3%83%9e%e3%83%83%e3%83%97%e7%99%bb%e9%8c%b2/)
・[SEO対策における検索エンジンと、Googlebotの役割について](http://kaifam.net/seo%e6%94%bb%e7%95%a5%e8%ac%9b%e5%ba%a7/seo%e5%af%be%e7%ad%96%e3%81%ab%e3%81%8a%e3%81%91%e3%82%8b%e6%a4%9c%e7%b4%a2%e3%82%a8%e3%83%b3%e3%82%b8%e3%83%b3%e3%81%a8%e3%80%81googlebot%e3%81%ae%e5%bd%b9%e5%89%b2%e3%81%ab%e3%81%a4%e3%81%84/)

---I Love PHP (｡･ω･｡)ﾉ♡
JavaScriptでvideoタグの情報を取る際のブラウザ間挙動差異メモ

相変わらずMSは期待を裏切らない（もちろん皮肉）

#前提
##検証環境
chrome:57.0.2987.110 (64-bit)
Internet Explorer 11:11.953.14393.0
Microsoft Edge:38.14393.0.0

すべてWindows10上で確認

##読み出し例記

```javascript:hoge.html
<video controls id="hage">
  <source src="foobar.mp4" type="video/mp4" >
</video>
```

```javascript:hoge.js
var video = $('#hage').get(0);
console.log("data:" + video.duration ); // 例として動画の総再生時間を取得
```
いつも通り割と適当。JavaScriptでの書き方は以前の記事参照。
http://qiita.com/honami/items/f5e2851ba281e5c155ab

##先に見ておくとよいところ
これも以前の記事と同じなんだけど、一応。

https://www.w3.org/2010/05/video/mediaevents.html
http://www.antytle.com/js/video-element-attr
http://www.antytle.com/js/video-element-events

特にw3cサイトのイベント状況をブラウザごとに見比べると、あまりの差に卒倒できること請け合いなし。

#ビデオデータ受信後

##ＤＯＭツリー構築直後

```javascript:hoge.js
$(function(){
  var video = $('#hage').get(0);
  console.log("data:" + video.duration );
});
```
だと流石に動画データが受信されていないのでどのブラウザでもNaNになる。さすがに予想通り。

##各要素読み込み後

```javascript:hoge.js
$(window).load(function(){
  var video = $('#hage').get(0);
  console.log("data:" + video.duration );
});
```
ページ要素の読み込み後で書けば読めると思ったのだけど、なんとEdgeの時以外はまだ動画データが読みだせない（NaN）。まぁ動画データ重いし、全部待ってたらアレだとは思うけど。
というかEdgeの時はきっちり読み込めるのがむしろ謎。

##動画のメタ情報の読み込み完了時
そりゃ重い動画全部読み込み待ってたらページ動かないしね、というわけで上述のタイミングでイベントを仕込めるので、そこで呼び出してみる。

###ページ要素全部読んだ後にイベント定義

```javascript:hoge.js
$(window).load(function(){
  video.onloadedmetadata = function() {
    var video = $('#hage').get(0);
    console.log("data:" + video.duration );
  }
});
```
想定通りに値が取得できる。Chrome、IE11だとこのタイミングがおそらく最速と思われる。
ちなみにEdgeはこのイベントが発生しない。またお前か。恐らくこの時点では既にこのイベントの発生タイミングを過ぎているからと思われる。

###ＤＯＭツリー構築直後にイベント定義
じゃあもっと早い段階で定義しておこう、ってことで。

```javascript:hoge.js
$(function(){
  video.onloadedmetadata = function() {
    var video = $('#hage').get(0);
    console.log("data:" + video.duration );
  }
});
```
こっちで書くとちゃんとEdgeでもこのイベントが走るので、先の仮説が証明されることに。

#まとめ
一例だけ切り出したけど、他の（特にネットワーク受信系の）イベントのタイミングも全然違ってたりする。余力ができた頃にまとめられるといいな。まぁ、最初のW3Cのイベント見比べていればわかりますが、軽く開いた口が塞がらない程度には挙動が違います。
ブラウザが違うとイベント発生タイミングのあれやこれやが全然違うので、複数ブラウザに対応しようと思ったらいろいろ対応考えなきゃいけないので、工数はそのつもりで別々にカウントした上で見積もりしてスケジュール組ませましょうね（しろめ
[備忘]QXcbConnection: Could not connect to display　の対処

#はじめに
ググっても解になかなかたどり着けなかっったので、備忘として残す
同じことで止まってしまった人の助けになれば幸い

#事象
pythonでpylabを使って描画しようとした際に以下のエラーが発生した

```
[root@localhost ~]# python
>>> from sklearn.datasets import load_digits
>>> digits = load_digits()
>>> print digits.data.shape
(1797, 64)
>>> import pylab as pl 
>>> pl.gray() 
>>> pl.matshow(digits.images[0]) 
>>> pl.show() 
QXcbConnection: Could not connect to display
アボートしました (コアダンプ)
```

#対処
windowsからターミナルを使って、VMのlinux環境へリモートで作業していた
描画の表示には、linuxのデスクトップが必要のよう

VMのアプリケーションでlinuxのデスクトップを開いて、linuxのデスクトップが見れる状態で再度コードを実行するこで、描画の表示ができた