OmniAICreator/Qiita-1.07M huggingface dataset:
Djangoでウェブアプリ - 準備

Djangoを使ってウェブアプリを作ります
まずは環境を準備します

- このページで作成されたDjango環境は[ここ](https://github.com/eggplnt/northernlights1)からダウンロード可能です

#1. Django環境を用意します
- virtualenvなどで仮想環境を用意し、`pip install django`でDjango2.0をインストールします

- 下記のようなコマンドで仮想環境へ入ります

```
source ve18/bin/activate
```
- 新たにdjangoプロジェクトを開始（作成）します。ここでは「northernlights」というプロジェクトを作成しています 

```
django-admin startproject northernlights
```

- `ls`コマンドで`northernlights`が作成されていることを確認し、`cd`コマンドでそのフォルダへ入ります。`northernlights`フォルダに`manage.py`ファイルと`northernlights`サブフォルダがあることを確認します

```
(ve18) MacBook:180905a tohru$ ls
northernlights

(ve18) MacBook:180905a tohru$ cd northernlights/

(ve18) MacBook:northernlights tohru$ ls
manage.py	northernlights
```

- 下記のコマンドで新しいアプリを作成します。ここでは`penguin`というアプリを作成しています

```
python manage.py startapp penguin
```

- Penguinアプリが作成されていることを確認します

```
(ve18) MacBook:northernlights tohru$ ls
manage.py	northernlights	penguin
```

#2. 必要な設定をします
- 作成したアプリを登録します。`northernlights`フォルダの`settings.py`を開き、`INSTALLED_APPS`に`penguin`を追加します

```
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'penguin',
]
```

合わせて必要な設定を行います

```
LANGUAGE_CODE = 'ja_JP'

TIME_ZONE = 'Asia/Tokyo'

USE_I18N = True

USE_L10N = True

USE_TZ = False
```

#3. 稼働を確認します
- 下記コマンドでDjangoを起動します

```
(ve18) MacBook:northernlights tohru$ python manage.py runserver 
Performing system checks...

System check identified no issues (0 silenced).

You have 14 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.

September 05, 2018 - 02:34:58
Django version 2.0.5, using settings 'northernlights.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
[05/Sep/2018 02:35:05] "GET / HTTP/1.1" 200 16348
[05/Sep/2018 02:35:05] "GET /static/admin/css/fonts.css HTTP/1.1" 200 423
[05/Sep/2018 02:35:05] "GET /static/admin/fonts/Roboto-Bold-webfont.woff HTTP/1.1" 200 82564
[05/Sep/2018 02:35:05] "GET /static/admin/fonts/Roboto-Regular-webfont.woff HTTP/1.1" 200 80304
[05/Sep/2018 02:35:05] "GET /static/admin/fonts/Roboto-Light-webfont.woff HTTP/1.1" 200 81348
```
- ブラウザで`localhost:8000`を開き、Djangoが起動されていることを確認します

<img width="843" alt="スクリーンショット 2018-09-05 12.05.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/8439ef84-9fe1-c29f-8ef7-63d9fcbb1cf8.png">
ECCUBE2系の開発環境メールサーバーとしてmailtrap.ioを使う

mailtrapを使いたかったが、無理だったので直した。
ECCUBEバージョンは2.11.4。

# ポイント
下記コンストラクタを見れば、どう修正すれば良いか必要な情報が全て書かれています。

~~~ php:SC_SendMail.phpのコンストラクタ
    // コンストラクタ
    function SC_SendMail() {
        $this->arrRecip = array();
        $this->to = "";
        $this->subject = "";
        $this->body = "";
        $this->cc = "";
        $this->bcc = "";
        $this->replay_to = "";
        $this->return_path = "";
        $this->backend = MAIL_BACKEND;
        $this->host = SMTP_HOST;
        $this->port = SMTP_PORT;
        mb_language( 'Japanese' );

        //-- PEAR::Mailを使ってメール送信オブジェクト作成
        $this->objMail =& Mail::factory($this->backend,
                                        $this->getBackendParams($this->backend));
    }

~~~

## 1.定数 MAIL_BACKEND について
定数 MAIL_BACKEND の値をsmtpに設定した場合、
ECCUBEのSC_SendMailクラスを経由して、PearのMail_smtp　クラスが実際の送信処理を担当。（移譲）

この定数はPearのMailクラスのファクトリメソッドにそのまま渡されていて、どのクラスで送信処理を行うかが決まっている。
define('MAIL_BACKEND', 'smtp'); → pearの Mail_smtp クラスが送信処理を担当。
define('MAIL_BACKEND', 'mail'); → pearの Mail_mail クラスが送信処理を担当。

## 2.Mail::factory() のパラメータ
SC_SendMailクラスのコンストラクタで、Mail::factoryを呼び出している。
Mail::factory() の第一引数はバックエンドを示す文字列、第二引数は、各実装クラスのコンストラクタに渡されるパラメータ配列。この第二引数の配列を作っているのは、SC_SendMail::getBackendParams()

SC_SendMail::getBackendParams()が、hostとportしか返していないので、認証が必要なsmtpサーバーは使えません。
なんてこった。


# 修正箇所
下記２点修正した。
- SC_SendMail::getBackendParams() をオーバーライドして、認証情報を追加。
- config.php に認証情報を追記。


~~~ php:SC_SendMail_Ex.php（抜粋）

    /**
     * SC_SendMail::getBackendParams() をオーバーライド。
     * smtp認証情報の項目を追加
     * @param string $backend
     * @return array
     * @link http://pear.php.net/package/Mail/
     * @see Mail_smtp::Mail_smtp()
     */
    function getBackendParams($backend){
        $arrParams=parent::getBackendParams($backend);
        if($backend ==="smtp"){
            if(defined("SMTP_AUTHENTICATION")){
                if(SMTP_AUTHENTICATION===true){
                    $arrParams['auth']=true;
                    $arrParams['username']=SMTP_USERNAME;
                    $arrParams['password']=SMTP_PASSWORD;
                }
            }
        }
        return $arrParams;
    }
~~~


~~~ php:config.php
//mailtrap.io利用に必要な追加のパラメータ
define('SMTP_AUTHENTICATION',true);
define('SMTP_USERNAME','mailtrap.ioのusername');
define('SMTP_PASSWORD','mailtrap.ioのpassword');
~~~
Redshiftから外部スキーマを確認する方法


Redshiftから外部スキーマを確認する方法を備忘録として残します。

##システムカタログテーブル

システムカタログとは、データベースの管理システムがテーブルや列の情報などのスキーマメタデータと内部的な情報を格納する場所です。要するにDBが持つ管理用のテーブルですね、、、

Redshiftでもこのシステムカタログがテーブルとして保持されていて、今回はここから　外部のスキーマを確認することになります。
https://docs.aws.amazon.com/ja_jp/redshift/latest/dg/c_intro_catalog_views.html


※また、RedshiftはPostgreベースなので、Postgreのシステムカタログを使うこともできます。
https://www.postgresql.org/docs/8.0/static/catalogs.html#CATALOGS-OVERVIEW


##クエリ
今回はその中のPG_EXTERNAL_SCHEMAというテーブルを使って、外部スキーマを確認します。
中に入っているデータはこんな感じですね、、、

| 列名 | データ型 | 説明 |
|:--|:--|:--|
| esoid | oid | 外部スキーマ ID。 |
| eskind | integer | 外部スキーマのタイプ。 |
| esdbname | text | 外部データベース名。 |
| esoptions | text | 外部スキーマのオプション。 |
以下は、公式のサンプルクエリです。

```sql
select esoid, nspname as schemaname, nspowner, esdbname as external_db, esoptions 
from pg_namespace a,pg_external_schema b where a.oid=b.esoid;
```
これを実行すると外部スキーマの一覧が確認できます。

[PG_EXTERNAL_SCHEMA](https://docs.aws.amazon.com/ja_jp/redshift/latest/dg/r_PG_EXTERNAL_SCHEMA.html)
いろんな配列の書き方

階層深くなるにつれていつも記憶が曖昧になるので備忘録もかねて

```
const array = {
  "key1": "bar1",
  "key2": "bar2"
};
```
```
const array2 = {
  "soeji": {
    "key1-1": "bar1-1",
    "key1-2": "bar1-2"
  }
};
```
```
const array3 = {
  "soeji1": [
    {"key1-1": "bar1-1"},
    {"key1-2": "bar1-2"},
    {"key1-3": "bar1-3"}
  ],
  "soeji2": [
    {"key2-1": "bar2-1"},
    {"key2-2": "bar2-2"},
    {"key2-3": "bar2-3"}
  ]
};
```
```
const array4 = {
  "soeji1": {
    "soeji1-1": [
      {"key1-1": "bar1-1"},
      {"key1-2": "bar1-2"},
    ],
    "soeji1-2": [
      {"key2-1": "bar2-1"},
      {"key2-2": "bar2-2"},
    ],
    "soeji1-3": [
      {"key3-1": "bar3-1"},
      {"key3-2": "bar3-2"},
    ],
  },
  "soeji2": {
    "soeji2-1": [
      {"key1-1": "bar1-1"},
      {"key1-2": "bar1-2"},
    ],
    "soeji2-2": [
      {"key2-1": "bar2-1"},
      {"key2-2": "bar2-2"},
    ],
    "soeji2-3": [
      {"key3-1": "bar3-1"},
      {"key3-2": "bar3-2"},
    ],
  }
}
```
MacでSeleniumを使えるようにする

# はじめに
Chromeドライバを入れようとして、brewで入れられる情報がなかなか見つけられなかったので、ここに書きます。

# 環境
| ソフト            | version |    
|:-----------------|:------------------|
| Mac     |Sierra 10.12.6  |
| Python    |  3.6.0| 
|Selenium    |  3.14.0 |
| ChromeDriver   |  2.41 | 
| Chrome   |  68.0.3440.106 | 
| brew   | 1.7.3  |


# Seleniumインストール
```
$ pip install selenium
```

# Chromeドライバのインストール
```
$ brew tap homebrew/cask
$ brew cask install chromedriver
```
# 補足
Chrome以外にも、Edge, Firefox, Safariのドライバがあります。
以下のページからダウンロードできます。
https://pypi.org/project/selenium/

Chromeドライバは、ダウンロードする方法もあります。
以下のページに詳細があります。
https://sites.google.com/a/chromium.org/chromedriver/home

# 参考URL
https://pypi.org/project/selenium/
https://sites.google.com/a/chromium.org/chromedriver/downloads
Git基礎　ブランチ・マージ基本コマンド

### ブランチを作成

- git branch <ブランチ名>

### ブランチ一覧表示

- git branch
- git branch -a  　← 全てのブランチを表示する  　　

### ブランチの切り替え

- git checkout <既存ブランチ名>
- git checkout -b <新ブランチ名> 　←　新規作成して切り替える

### ブランチ名の変更

- git branch -m <ブランチ名>

### ブランチを削除

- git branch -d <ブランチ名>
- git branch -D <ブランチ名>  　←　　強制削除

### マージとは
- マージとは他の人の変更を取り組む作業
- git merge <ブランチ名>
テスト　運用方法（一例）


# 必要なもの
テストシート
バグシート
バグチケット

# 役割
## テストシート
動作テストを行う

## ポイント
- 仕様の問題発覚
※設計の段階でユースケースを考える事が大事

- エラーの優先順位決め

- 影響範囲の問題

## バグシート
バグの全体を把握する

優先順位決め
期限

## バグチケット
詳細
誰が？
いつまでに？
どのように？

仕様がわからない人が行う場合は、記述にフォローが必要
Cloudantの旧Shared Planが終了。無償で使ってたユーザーは注意。



まずはこちらのURLを見てください。
### The IBM Cloudant Shared Plan Is Being Retired
https://ibm.com/blogs/bluemix/2018/08/ibm-cloudant-shared-plan-is-being-retired/
気づいていなかったユーザーも多いと思いますが、2016年9月にサービス終了を発表。同年10月に新規サービス作成が非推奨となっていたCloudant の Shared planが**2018年10月31日**に、正式にサービス終了だそうです。
簡単に言うと、旧サービスが終了するので、使っているユーザーは新サービスおよび価格体系のサービスに早く移行してねって事です。

ちなみに、そのまま旧サービスを使い続けますと、10月31日以降はインスタンスおよびデータが完全に削除されて使えなくなってしまいます。

### Shared Planかどうかをどうやって確認するのか？
IBM Cloud のダッシュボードから自分が利用しているサービス一覧を表示。
その中のCloudantサービスの**プランが空白**のものが対象です。
![image](https://qiita-image-store.s3.amazonaws.com/0/112854/743c7009-33b9-22fa-fc99-a1c74ddc7861.png)

### どうやって新サービスに移行する？
旧サービスを自動的に新サービスに移行する方法は無いようですので、ユーザー自身で移行しなければなりません。。。
Migrating to IBM Cloudant on IBM Cloud
https://console.bluemix.net/docs/services/Cloudant/guides/migration.html#migrating-to-ibm-cloudant-on-ibm-cloud

### 移行時に注意しなければならない点
特に無償枠で使っていたユーザーは注意が必要です。旧サービスと新サービスは価格体系と無償枠が異なります。
ざっくりですが、旧サービスは20GBのストレージまで無償で使えていましたが新サービスは1GBのストレージまでが無償で、減りました！
その代わり、スライドバーを利用してリソースを自由に拡張可能になっています。
![image](https://qiita-image-store.s3.amazonaws.com/0/112854/dff56068-e637-0699-aa67-434a0df71297.png)
(上記URLより抜粋)

### 試しに移行してみた
試しに自分の旧サービスを新サービスに移行してみました。
移行にはCloudantのレプリケーションを利用しました。

1. 新サービス（Liteプラン）でCloudantインスタンスを作成
![image](https://qiita-image-store.s3.amazonaws.com/0/112854/ecb286d4-b3e8-fd2f-180a-8268555e2197.png)
authenticationなんとかはとりあえず、Use both ... を選択

2. 新環境で移行ターゲットのデータベースを作成。
ここでは「test」というデータベースを作成しています。

3. レプリケーション用にAPIキーを作成。
「permission」から「generate API key」を選択してKey ID と password を生成しメモメモ。
作成したKey ID に対して __reader ,  _writer , _replicator _ の権限を付与 
![image](https://qiita-image-store.s3.amazonaws.com/0/112854/51a66f40-f271-4c60-70f7-64e782cc1894.png)

4. 旧環境。ソースのサービスでレプリケーションの設定をします。
![image](https://qiita-image-store.s3.amazonaws.com/0/112854/10e69c8d-1ae3-682e-f58d-81a168266de0.png)
そして**「Start Replication」**


移行はCloudantのレプリケーションを利用するだけなので非常にカンタンです。
とりあえずデータをエクスポートしておきたいというユーザーはこちらを参照してみてください。
couchbackupを利用してバックアップができます。
```couchbackup --url https://examples.cloudant.com --db animaldb > backup.txt```

詳しくはこちら。IBM Cloudant バックアップおよびリカバリー
https://console.bluemix.net/docs/services/Cloudant/guides/backup-cookbook.html#cloudant-nosql-db-backup-and-recovery
Xcode上でCocoaPodsのライブラリの警告を非表示にする方法

広告のSDKとかは古いのだと、警告がめちゃくちゃ出てきて見通しが悪いので調べてみた。
Podfileにちょっと書くだけで出来る。

#全部を非表示にしたい場合

```ruby:Podfile
target 'YourProject' do
  	
  	#これを追加する。
	inhibit_all_warnings!
```

#個別に非表示を指定したい場合

```ruby:Podfile
#これを各Podに指定する。
#inhibit_warnings => true

pod 'Alamofire', '~> 4.7', :inhibit_warnings => true
pod 'SVProgressHUD', :inhibit_warnings => true
```
シェルで全てのディレクトリ(フォルダ)にファイルを作る方法

例えば、`.gitkeep` をサブディレクトリ全部に作りたい場合などに使えます。

```
find . -type d -exec touch {}/.gitkeep \;
```

`.gitkeep` の部分を作りたいファイル名にすれば他のファイル名でも作成できます。
[Rails] gem pg install（PostgreSQL）が `Can't find the 'libpq-fe.h header`というエラーで失敗する

環境
Mac OS 10.13.13 （High Sierra)

```
An error occurred while installing pg (1.0.0), and Bundler cannot continue.
Make sure that `gem install pg -v '1.0.0' --source 'https://rubygems.org/'` succeeds before bundling.
```

というエラーでこける。


エラーの全容

```
Gem::Ext::BuildError: ERROR: Failed to build gem native extension.

    current directory: /Users/myname/.anyenv/envs/rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/pg-1.0.0/ext
/Users/myname/.anyenv/envs/rbenv/versions/2.3.1/bin/ruby -r ./siteconf20180905-43590-1wvyx66.rb extconf.rb
checking for pg_config... no
No pg_config... trying anyway. If building fails, please try again with
 --with-pg-config=/path/to/pg_config
checking for libpq-fe.h... no
Can't find the 'libpq-fe.h header
*** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of necessary
libraries and/or headers.  Check the mkmf.log file for more details.  You may
need configuration options.

Provided configuration options:
        --with-opt-dir
        --without-opt-dir
        --with-opt-include
        --without-opt-include=${opt-dir}/include
        --with-opt-lib
        --without-opt-lib=${opt-dir}/lib
        --with-make-prog
        --without-make-prog
        --srcdir=.
        --curdir
        --ruby=/Users/myname/.anyenv/envs/rbenv/versions/2.3.1/bin/$(RUBY_BASE_NAME)
        --with-pg
        --without-pg
        --enable-windows-cross
        --disable-windows-cross
        --with-pg-config
        --without-pg-config
        --with-pg_config
        --without-pg_config
        --with-pg-dir
        --without-pg-dir
        --with-pg-include
        --without-pg-include=${pg-dir}/include
        --with-pg-lib
        --without-pg-lib=${pg-dir}/lib

To see why this extension failed to compile, please check the mkmf.log which can be found here:

/Users/myname/.anyenv/envs/rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/extensions/x86_64-darwin-17/2.3.0-static/pg-1.0.0/mkmf.log

extconf failed, exit code 1

Gem files will remain installed in
/Users/myname/.anyenv/envs/rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/pg-1.0.0 for inspection.
Results logged to
/Users/myname/.anyenv/envs/rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/extensions/x86_64-darwin-17/2.3.0-static/pg-1.0.0/gem_make.out

An error occurred while installing pg (1.0.0), and Bundler cannot continue.
Make sure that `gem install pg -v '1.0.0' --source 'https://rubygems.org/'` succeeds before bundling.

```

`with native extention` はOSにgem以外でインストールが必要ということなので、

```
brew install postgresql
```

か

```
brew reinstall postgresql
```

で解決。
EC2インスタンス内でリージョンをPowerShellで取得する方法

##はじめに
WGET(Invoke-WebRequest)でインスタンスメタデータを取って良いのですが、
せっかくなのでインスタンスメタデータ取得コマンドレットで取ってます。

##コード

```powershell
(Get-EC2InstanceMetadata -Category Region).SystemName
```
実行結果はこうなります。

```powershell
PS C:\Users\Administrator> (Get-EC2InstanceMetadata -Category Region).SystemName
ap-northeast-1
```

SystemNameを指定しなかった場合の結果はこうです。
表示名も入っていることがわかります。

```powershell
PS C:\Users\Administrator> Get-EC2InstanceMetadata -Category Region

SystemName     DisplayName
----------     -----------
ap-northeast-1 Asia Pacific (Tokyo)
```

##ちなみにInvoke-WebRequestで取得する場合

やっぱり長いのでGet-EC2InstanceMetadataを使ったほうが良いですね。

```powershell

PS C:\Users\Administrator> (ConvertFrom-Json ((Invoke-WebRequest -Uri "http://169.254.169.254/latest/dynamic/instance-identity/document").Content)).region
ap-northeast-1
```
イマドキのフロントエンド開発のまとめ

# Abstract

昨今のフロントエンドの変化は著しく、畑違いの人に全く理解されない・・・。「htmlのscriptタグにJavaScript書くだけでしょ」的な扱いを受けることが少なくない。そこでここでは、イマドキのフロントエンド開発の流れをBefore/After形式でまとめてみた。

# Bootstrapping & Configration

- *Before*
    - サーバを調達して、インフラエンジニアがウェブサーバを構築。
- *After*
    - 選択肢1
        - Docker Hub で開発に適したイメージを選択。
        - カスタムが必要な場合はDockerfileを作成。
    - 選択肢2
        - Node.jsをインストール。

従来は開発のたびにインフラエンジニアによるサーバ構築が必要だった。

しかし、仮想マシンのツールのDockerとそのDockerのイメージを共有するウェブサイトDocker Hubが普及したことにより、サーバ構築は不要となった。

Docker Hubでは主要なほとんどの開発環境が容易に調達でき、せいぜい100Line程度のDockerfileで多くのカスタマイズが可能である。

あるいは、JavaScript実行環境のNode.jsで開発する選択肢もある。Node.jsはWindows上にもインストールできる。

# Scaffolding

- *Before*
    - HTML, JavaScript及びCSSのディレクトリ構成を決める。
    - webページのテンプレートを作る。
    - 動作確認する。
- *After*
    - Yeoman のサイトで開発に適した generator を選択。
    - Yeoman のコマンドでwebページのテンプレートを自動生成。
    - grunt又はgulp のコマンドでwebページを起動し動作確認。

従来は、コーディングを始める前に、ディレクトリ構成を決め、OSSをダウンロードしてwebページの動作確認をするまでに時間を要していた。HTMLに書くJavaScriptのパスを間違える奴がいたりして、うまく動かないことも・・・。

今ではScaffolding（＝足場を作る）ツールのYeomanが、わずか1行のコマンドでよくあるWebアプリケーションのテンプレートを自動で生成してくれる。

このテンプレートは、後述するTask Runnerのgrunt又はgulpのわずか1行のコマンドで動作確認できる。

つまり、たかが2行のコマンドで動作確認までできてしまう。

# Package Management

- *Before*
    - OSSをぐぐる。
    - OSSをダウンロードする。
    - OSSのバージョンを台帳管理する。
- *After*
    - npm, bower等のPackage ManagerのサイトでOSSを検索。
    - npm, bowerのコマンドを実行し、OSSを取得。

従来は、OSSをぐぐって、ダウンロードして、バージョン管理台帳を記入していた。これが実に面倒。

今では、npm, bowerといったPackage Managerがこの作業を代行してくれる。

代表的なフロントエンドのOSSはいずれかのPackage Managerで提供されており、わずか1行のコマンドでダウンロード可能である。また、各Package Managerはウェブサイトがあり、OSSを検索することも容易である。

コマンドをダウンロードする際に、OSSのバージョン情報などはpackage.json, bower.jsonといったJSONファイルに記録される。

# Build

- *Before*
    - JavaScriptでコーディング。
- *After*
    - JavaScript又はTypeScript,CoffeeScriptでコーディング。
    - grunt, gulpでTranspileしてMinify。

従来は開発言語の選択肢はJavaScript一択だったが、今ではTypeScriptやCoffeeScriptなどのJavaScriptを自動生成できる言語も選択肢の一つである。これらの言語はJavaScriptより言語上の機能が充実している。

作成したコードはgrunt, gulpといったTaskRunnerを介して、TranspileしてMinifyする。

Transpileとはある言語から同等の言語に変換するコンパイルのこと。フロントエンドでは特にJavaScriptの自動生成を指す。

MinifyとはJavaScriptのファイルを連結し、コードを圧縮すること。JavaScriptのファイルサイズとファイル数はクライアントのWebページの読み込み速度に直結するので死活問題。

Minifyでは、ファイルを連結し、変数名や関数名を短くする（例えばmyfunctionをmと文字列置換する）ことでコードを圧縮する。

# Conclusion

昔は人手と時間をかけていた作業がたかが数行のコマンドで実現できる！便利！

# Reference

- [フロントエンド開発ツールのまとめ](https://qiita.com/kannkyo/items/7ee6ed12d0c3ca66d369)
- [Web開発のためのOSSのトレンドの調べ方](https://qiita.com/kannkyo/items/139ff736b72946ae07ad)
パスを通す方法

#パスを通す

パスを通すことにいつも悪戦苦闘していました。
会社と家でのPCの環境構築する際に会社では、先輩などに聞いてました。
しかし、「このコマンド入れて」みたいな感じで、作業だけ教わったので、
状況が変わるとうまくできない。

原因は、「コマンドとかPCの仕組みとかよく知らないこと」でした。
その為、調べてもそこに記載されている、[パス](https://wa3.i-3-i.info/word1166.html)が異なるうまくいかないとてもストレスでした。

そんな時ある方法を知りました。

## 基本的なパスの通し方


- bashの人
bash_profileの中に下記のような記述を入れる
`export PATH=$PATH:~~~`

- 場所
`$ ~/.bash_profile`


- zshの人
zshrcの中に下記のような記述を入れる
`export PATH=$PATH:~~~`

- 場所
`$ ~/.zshrc`

## 課題

上記に入れればいいのがわかるけど、
下記の「ooo」 部分が人によって違うので、調整できない！
`export PATH=$PATH:ooo`


## 解決策

インストールした時に、書いてあるらしい！

- 実際に試したこと

nodejsで、例のごとくPATHが通せなかった。
「インストールした時に、書いてあるらしい！」と聞いて、
一回アンインストール、インストールしなおすと。

下記情報


=> Caveats
You need to manually run setup_dirs to create directories required by nodebrew:
  /usr/local/opt/nodebrew/bin/nodebrew setup_dir

Add path:
  export PATH=$HOME/.nodebrew/current/bin:$PATH

To use Homebrew's directories rather than ~/.nodebrew add to your profile:
  export NODEBREW_ROOT=/usr/local/var/nodebrew

Bash completion has been installed to:
  /usr/local/etc/bash_completion.d

zsh completions have been installed to:
  /usr/local/share/zsh/site-functions
==> Summary
🍺  /usr/local/Cellar/nodebrew/1.0.0: 8 files, 38.4KB, built in 1 second


下記コマンドを実行
`export PATH=$HOME/.nodebrew/current/bin:$PATH`

PATHは、shellが呼び出された時に読み込む環境変数。
そこに組み込むコマンド！
vs2010でmanaged directx その14

#概要
c#で、3Dやりたかった。
hlslやってみた。

#写真

![image](https://qiita-image-store.s3.amazonaws.com/0/18104/59f5e404-a133-5b07-7112-6714a7a1314a.png)


#サンプルコード


```
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using Microsoft.DirectX;
using Microsoft.DirectX.Direct3D;

namespace WindowsFormsApplication11
{
    public partial class Form1 : Form
    {
        Device device = null;
        PresentParameters ppr = new PresentParameters();
        Effect effect;
        Mesh m;

        public Form1()
        {
            InitializeComponent();
            this.SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.Opaque, true);
        }
        private void Form1_Load(object sender, EventArgs e)
        {
            ppr.Windowed = true;
            ppr.SwapEffect = SwapEffect.Discard;
            device = new Device(0, DeviceType.Hardware, this, CreateFlags.SoftwareVertexProcessing, ppr);
            m = Mesh.Teapot(device);
            try
            {
                string a;
                effect = Effect.FromFile(device, "my0.fx", null, null, ShaderFlags.None, null, out a);
             }
            catch
            {
                MessageBox.Show("ng1");
            }
        }
        private void Form1_Paint(object sender, PaintEventArgs e)
        {      
            device.BeginScene();
            device.RenderState.CullMode = Cull.None;
            device.RenderState.ZBufferEnable = true;
            device.Clear(ClearFlags.Target, Color.DarkBlue, 1f, 0);
            effect.Begin(FX.None);
            effect.BeginPass(0);            
            m.DrawSubset(0);
            effect.EndPass();
            effect.End();
            device.EndScene();
            device.Present();
            this.Invalidate();
        }
    }
}



```

以上。
FLOCSSのComponent, Projectの個人的な区別

[FLOCSS](https://github.com/hiloki/flocss)での設計で大きなポイントとなるのが、ComponentとProjectの区別だと思います。この2つの違いは、主にそれ単体で文脈上**意味を持っている**かどうかだと思います。

## 意味を持っているとは

例えば、記事一覧を作るとします。

```html
<section>
  <h2 class="c-text--large p-title">記事一覧</h2>
  <div class="p-articles">
    <article class="p-article">
      <h3 class="c-text--medium p-article__title">記事タイトル</h3>
      <p class="c-text p-article__content">本文の一部</p>
    </article>
    <article class="p-article">
      <h3 class="c-text--medium p-article__title">記事タイトル</h3>
      <p class="c-text p-article__content">本文の一部</p>
    </article>
    <article class="p-article">
      <h3 class="c-text--medium p-article__title">記事タイトル</h3>
      <p class="c-text p-article__content">本文の一部</p>
    </article>
  </div>
</section>
```

ここで、`.c-text`は基礎的なスタイルを持った単なるテキストです。これ自体はページ上特に意味を持っていません(汎用的)。

一方、`.p-article__content`は記事の内容という意味を持っています。Componentという土台に**具体的な意味とスタイル**を付与するのがProjectだと思います。

## 少し機械的に判別する

Componentは最小単位なので、他のComponentを含んではいけません。言い換えれば、複数のComponentで構成されるものはProjectにするべきでしょう。
Projectは複数のComponentを配置するもの、くらいの認識でも良いかと思います。

## おわりに

FLOCSS(というよりCSS)は難しいと思います。色々な記事を参考にして、自分なりの基準を持っておくことが大切だと思います。

* [FLOCSS](https://github.com/hiloki/flocss)
* [脱・CSS無法地帯。FLOCSSで指針のある設計を。](https://qiita.com/sueshin/items/dcbaf3d8a0adb6b087db)
* [FLOCSSを使ったCSS設計での悩みどころと解決案](https://qiita.com/uggds/items/d904b2f9a103c37a25fa)
php-master-changes 2018-09-04

# 2018-09-04
## nikic: Revert all MySQL auth related changes
- https://github.com/php/php-src/commit/03740ef7dffcc80530a89ebde3ccf5464f7f18e6
- ext/mysqlnd で、6月 に入った MySQL auth 関連の以下の修正をリバート
    - https://github.com/php/php-src/commit/d6e81f0bfd0cb90586dd83d4fd47a4302605261a
    - https://github.com/php/php-src/commit/11507c0e1bfa17a96480f3648397f6975c31551e
    - https://github.com/php/php-src/commit/6c9db02ff7812c298d1e7e292ba731d9d3a66790
    - https://github.com/php/php-src/commit/f96df64cb2219fda42ca875483f874cf3052647c
    - https://github.com/php/php-src/commit/d6e81f0bfd0cb90586dd83d4fd47a4302605261a

## nikic: Fix incorrect literal freeing if pass_two generates fatal error
- https://github.com/php/php-src/commit/d36230fcaba46cc5b3ad54ced9337eee404c6b1b
- コンパイラの pass_two() が fatal になった際、リテラルの解放が誤っていた問題の修正

## weltling: Fixed bug [#76833](https://bugs.php.net/bug.php?id=76833), backport change to stream_socket_enable_crypto-win32.phpt from 7.3
- https://github.com/php/php-src/commit/2476fb76a75cf71b2d27070f1daeeb1ea4058096
- stream_socket_enable_crypto-win32.phpt がカバレッジ増やすだけのしょうもないテストだったので削除、7.3で入れてた奴をそれ以前へバックポート

## weltling: [ci skip] Update NEWS
- https://github.com/php/php-src/commit/e58690a26d5e3800c26d24ea30d4e5a1367f096d
- [昨日の修正](https://qiita.com/sj-i/items/b4365914136ff8e58d79#weltling-fixed-bug-76832-zendopcachememorybase-periodically-deleted-by-the-os)のNEWSへの追記

## vhuk: Fix bug [#74764](https://bugs.php.net/bug.php?id=74764) and add a test case
- https://github.com/php/php-src/commit/0f724453c03b7ff500563c019f5dab736d326ad8
- IPV6アドレスへソケットをバインドして利用しようとする時、失敗するケースがある問題の修正

## laruence: Fixed bug [#76825](https://bugs.php.net/bug.php?id=76825) (Undefined symbols ___cpuid_count)
- https://github.com/php/php-src/commit/3497b75b732723b2f8d0745336d9fcaccb2e3dd7
- cpuid.h の __cpuid_count() を使うようにした際、アセンブリの実装を完全に捨ててしまっていて、xcode 付属の少し古いコンパイラなど、ユーザの環境によってエラーになっていた問題を修正

## petk: Remove AC_HEADER_DIRENT
- https://github.com/php/php-src/commit/eff22dc511d677d12097018da630971d730b70f9
- autoconf の古いシステム向けマクロ AC_HEADER_DIRENT を削除

## petk: Remove AC_FUNC_MEMCMP
- https://github.com/php/php-src/commit/6db3c105f2937cb01ced82c3943ff41b5176315a
- autoconf の古いシステム向けマクロ AC_FUNC_MEMCMP を削除
- memcmp() がなかったり変な実装だったりするシステム向けのもよう


## petk: Remove AC_FUNC_UTIME_NULL
- https://github.com/php/php-src/commit/29dc0470c826c58aaf784e0d1763c9dad3ee646e
- autoconf の古いシステム向けマクロ AC_FUNC_UTIME_NULL を削除
- 4.3BSD とかで必要だった、```utime(file, NULL)``` のサポートがあるかチェックするマクロらしい


## petk: Remove unused buildsystem files in TSRM
- https://github.com/php/php-src/commit/472e7cded069ac026009820acd4a90b30485dc13
- スタンドアロンの libtsrm などというものをビルドする用の設定ファイルがあったが、使われておらず不要だったので削除
Pythonと系列　（１）discrepancy

# Pythonと系列 (1) discrepancy
## はじめに
今まで研究のデータを取るのにほぼC言語のみでプログラムを書いていたが、一念発起（という程高尚なものでもない）してPythonで書いてみようと試みた。Pythonに関しては、まだ勉強中ではあるものの、やはり実際に使うプログラムを書いてみるのが良い勉強になるのだ。
## 系列とdiscrepancy
**Discrepancy**(不一致度,くい違い度)というのは系列を評価する際の指標の一つであり、ランダムな要素からなる系列が要素の出現範囲にどれぐらい偏って分布しているのかを示している。一般に真の乱数系列は高いdiscrepancyを持ち、系列の先頭100個といった限られた範囲の要素に関しては、その要素が取りうる出現範囲の中に「疎な部分と密な部分」を併せ持つ。
これに対して、low discrepancyな系列は同じ先頭100個の要素であっても系列の出現範囲内にほぼ均一な間隔で要素が出現する。モンテカルロ法などのシミュレーション分野やロー法といった攻撃方法において用いられる系列は、乱数であることが求められるがそれと同等以上に「領域内から偏りなく要素を抽出する」というlow discrepancyな系列が求められる。

ここでは、非常に簡易なdiscrepancyの数値化として、「有限精度の整数値を持つ系列」に限定し、「系列を要素の大きさ順に並べ替えたときに要素が含まれていない一番大きな間隔の幅」を求めるプログラムを書いてみる。

幾つか調べてみて、numpyにリストの各要素前後間の差分を計算するdiffという関数があるのを見つけた。これを使えば、差分は簡単に計算できる。系列中の最小値と領域の最小値、系列中の最大値と領域の最大値の間隔を算出するため、「系列を要素の大きさ順にソートした後で、領域の最小値と最大値を前後に付け加える」という処理を行う。これで、出現範囲の下半分に偏った系列などを入力した場合でも問題なく計算できる。

```discrepancy.py
import numpy as np
def Discrepancy(minvalue, maxvalue, sequence):
    # 並べ替え
    sortedsequence = sorted(sequence)
    # 最小値と最大値でサンドウィッチにする
    sortedsequence.insert(minvalue,0)
    sortedsequence.append(maxvalue)
    # 差分を取る(numpyが必要)
    diffvalues = np.diff(sortedsequence)
    # 差分の最大値＝一番広い間隔
    diffmax = max(diffvalues)
    print('DiffMax : ' + str(diffmax))

if __name__  == '__main__':
    # 実行例
    S1=[4,6,0,1,5]
    S2=[2,8,0,4,6]
    print(S1)
    Discrepancy(0,10,S1)
    print(S2)
    Discrepancy(0,10,S2)
```
非常に簡単だが、関数の呼び出しは要素の出現範囲最小値(minvalue)と最大値(maxvalue)、そして系列のリスト(sequence)を引数として渡す。最大値、最小値でサンドウィッチにする部分は、多分もう少しまとめて書くような方法があると思うのだが、とりあえず動くのでこれで良しとする。差分を取って、その差分リストの中から最大値を求めれば、それが最初の系列で「一番間隔が開いている部分の長さ」に相当する。

``` 
$ python3 discrepancy.py
[4, 6, 0, 1, 5]
DiffMax : 4
[2, 8, 0, 4, 6]
DiffMax : 2
```
似たような系列にも見えるが、範囲が[0,10)なので7以上の要素が無い上の系列は差分の最大値が大きくなっている。
## まとめ
Pythonによる系列の数値解析、まずはdiscprepacy計算のための「一番広い間隔をもつ要素の空白部分」を求めるプログラムを作成してみた。見た目はとても素直で分かりやすい。

次回は一般的な定義によるdiscprepancyの計算を取り上げる。
DockerでVue.js+TypeScript開発環境を構築する

## 概要

Docker上でVue.jsの開発ができるようにする手順です。
Vue-Cliでプロジェクト作成する場合、TypeScriptやSCSS、Vuexなどを追加できるので便利です。

GitHubのリポジトリにUPしていますので、興味のある方はご参照ください。
https://github.com/kai-kou/vue-js-typescript-on-docker


## 手順

### Dockerファイルの作成

```sh
> mkdir 任意のディレクトリ
> cd 任意のディレクトリ
> vi Dockerfile
> vi docker-compose.yml
```

```txt:Dockerfile
FROM node:10.8.0-stretch

RUN npm install --global @vue/cli

WORKDIR /projects
```

```yaml:docker-compose.yml
version: '3'

services:
  app:
    build: .
    ports:
      - "8080:8080"
    volumes:
      - ".:/projects"
    tty: true
```

設定ファイルが準備できたらDockerコンテナを作成・実行して入ります。

```sh
> docker-compose up -d
> docker-compose exec app bash
```

### Vueアプリの作成

```vue create``` コマンドを実行すると```Please pick a preset``` と聞かれますので、```Manually select features``` を選択して、必要なものを指定します。
ここではすべての機能を選択、設問は初期選択のままとしました。

```sh:コンテナ内
> vue create app

Vue CLI v3.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): SCSS/SASS
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Mocha
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn
  Use NPM
```

ライブラリなどのインストールもされますので、環境によってはだいぶ時間がかかります。
お茶でも飲んで、まったりしながらお待ちください🍵

### 動作確認

プロジェクトが用意できたら、立ち上げてブラウザからアクセスしてみます。

```sh:コンテナ内
> cd app
> yarn serve
```

```sh
> open http://localhost:8080
```

<img width="1244" alt="Vue.jsプロジェクト" src="https://qiita-image-store.s3.amazonaws.com/0/48549/b2f868f9-113e-2463-f035-9a4927525e4a.png">

やったぜ。




それでは良きVue.js開発ライフを^^


Vue.js+TypeScriptで開発するときの参考記事まとめ
https://qiita.com/kai_kou/items/19b494a41023d84bacc7
Git基礎　基本コマンド

# Gitとは
- ファイルのバージョンを管理するために用いる

## ローカルは３つのエリアに分かれている
- ワークツリー (ファイルを変更する作業場)

↓ git add 追加

- ステージ (コミットする変更を準備)
  
 ↓ git commit コミット

- リポジトリ (スナップショットを記録)

## Gitのデータ構造のまとめ

- リポジトリに「圧縮ファイル」 「ツリー」 「コミット」 ファイルを作成することでデータを保存している
- コミットが親コミットを持っているので変更履歴を辿れる
- Gitの本質はデータを圧縮して、スナップショットで保存していること

## 基本コマンド

### git add 
**ステージングに追加**

- git add [ファイル名]
- git add . 　　(すべての変更を追加)

### git commit
**リポジトリに追加　　→　いつ誰がなんのために追加したのかの情報がついてくる**

- git commit 
- git commit -m "メッセージ"
- git commit -v 　(変更したコードの内容も見える)

### commit　メッセージの書き方

- 簡単に書くとき
 - 一行で簡潔に書く

- 正式に書くとき (チームでコードを書くなら)
 - １行目　変更内容の要約
 - 2行目 空行
 - 3行目 変更した理由

-  プレフィックスをつける　(レビューがやりやすい)
 - [参考Qiitaページ](https://qiita.com/numanomanu/items/45dd285b286a1f7280ed) 

### git status
- 主にgit add, git commit 前に確認する
- 変更されたファイルを確認してくれるコマンド

### git diff
**どんな変更をしたのか確認をするコマンド**

- git add 前に行う
 - git diff
 - git diff <ファイル名>
- git add 後に行う
 - git diff --staged 

### git log
**変更履歴を確認する**
#### git logを実装したら**q**で元に戻れる

- git log
- git log --oneline
 - 一行で変更履歴を表示する
 
- git log -p <ファイル名>
 - ファイルの変更差分を表示する

- git log -n <コミット数>
 - 表示するコミット数を制限する   

### git rm <ファイル名>
**ファイルの削除を記録**

- リポジトリとローカルのファイルごと削除
 - git re <ファイル名>
 - git re -r <ディレクトリ名>

- リポジトリのファイルだけ削除
 - git rm --cached <ファイル名> 
 

### git push
**ローカルリポジトリの内容をリモートリポジトリに送る**

- git push <リモート名> <ブランチ名>


## コマンドにエイリアスはつけるべき
**付けておくと入力が楽になる**

- git config --global alias.ci commit
- git config --global alias.st status
- git config --global alias.br branch
- git config --global alias.co checkout

上記のコマンドで 

- git commit = git ci
- git status = git st
- git branch = git br
- git checkout = git co

と同じ意味になる

### ワークツリーのファイルへの変更を取り消す

- git checkout -- <ファイル名>
- git checkout -- <ディレクトリ名>
 // 全変更を取り消す
- git checkout --  

###　ステージした変更を取り消す

- git reset HEAD <ファイル名>
- git reset HEAD <ディレクトリ名>
 // 全変更を取り消す
- git reset HEAD .

__HEAD = 最新のコミット__

### 直前のコミットをやり直す

- git commit --amend
- git reset --soft HEAD^

### リモートリポジトリを新規追加する

- git remote add <リモート名> <リモートURL>

### リモートから情報を取得する (フェッチ)

- git fetch <リモート名>

### リモートから情報を取得してマージする(pull)

- git pull <リモート名> <ブランチ名>

__これは下記コマンドと同じこと__ 

- git fetch <リモート名> <ブランチ名>
- git merge <リモート名> <ブランチ名>
【OpenLayers4】ol.Objectの派生クラスで任意のプロパティの変更を検知する

OpenLayers v4.6.5 で確認。

例えば`ol.geom.LineString`に線幅を持たせるため、`width`というプロパティを独自にもたせるとする。
`ol.geom.LineString`は`ol.Object`の派生クラスなので、`width`の設定、取得には以下のように`get/set`メソッドを利用できる。

```javascript
var ls = new ol.geom.LineString([[0, 0], [1, 1]]);
var width = 5;
ls.set('width', width);

ls.get('width');		// 5
```

また、`set`のタイミングで`change:width`イベントを発火するので、リスナーを設定することで変更を検知できる。

```javascript

ls.on('change:width', function(evt) {
		console.log('new width: ' + this.get('width'));
	},
	ls
);
ls.set('width', 8);		// new width: 8
```
Puppeteer を Ubuntu18.04 で 動かすため snap を使ってみる

## 参考

* [snapdインストール方法まとめ【Ubuntu・Linux Mint・Debian・Fedoraなど】 | Linux Fan](https://linuxfan.info/snapd)

> Linuxディストリビューションを問わず動作するソフトウェアパッケージ「Snap」

## インストール

```sh:deb系
sudo apt -y install snapd
# 一覧に表示されない場合は以下
systemctl daemon-reload
```

```sh:Fedora
sudo dnf -y install snapd
sudo systemctl enable --now snapd.socket
```

* [ArchLinuxの場合](https://wiki.archlinux.jp/index.php/Snapd#.E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB)

## Node.js 8をインストールしてみる

* Ubuntu 18.04のaptからインストール出来るnodejsは version 6
    * よくある Puppeteerのサンプルコード を動かすには version 8 が必要

```sh:
# nodeという名前のコマンドを検索
snap search node

# インストール出来るバージョン一覧を確認
snap info node

# インストール
sudo snap install --channel=8/stable --classic node
```

## Puppeteerをインストール

```
npm install puppeteer
```

```js:test.js
const puppeteer = require('puppeteer');

(async () => {
  //
  const browser = await puppeteer.launch();
  // profile指定したい場合
  //const browser = await puppeteer.launch({
  //  userDataDir: 'C:\\usrdata\\puppeteer_crawler_profile'
  //});

  const page = await browser.newPage();
  // googleを表示
  await page.goto('https://google.com');
  // example.pngに画面キャプチャ保存
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();
```

```sh:実行
node test.js
```

## chrome extension

* [DayDream - ブラウザ操作を記録してPuppeteer/Nightmareの操作スクリプトを作成](https://www.moongift.jp/2018/08/daydream-%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e6%93%8d%e4%bd%9c%e3%82%92%e8%a8%98%e9%8c%b2%e3%81%97%e3%81%a6puppeteernightmare%e3%81%ae%e6%93%8d%e4%bd%9c%e3%82%b9%e3%82%af%e3%83%aa%e3%83%97/)
    * [chrome extension](https://chrome.google.com/webstore/detail/daydream/oajnmbophdhdobfpalhkfgahchpcoali)

![daydream.png](https://qiita-image-store.s3.amazonaws.com/0/25728/0dc45dba-eb31-171f-2759-d6ca2610bf0b.png)


## docker

* [puppeteer/troubleshooting.md](https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md)

```Dockerfile:Dockerfile
FROM ubuntu:18.04

RUN apt update
RUN apt install -y \
      curl gnupg chromium-browser fonts-ipafont-gothic
RUN curl -sL https://deb.nodesource.com/setup_8.x | bash -
RUN apt-get install -y nodejs
RUN npm install puppeteer

WORKDIR /root
COPY entrypoint.sh .
COPY entrypoint.js .
ENTRYPOINT ["/root/entrypoint.sh"]
```

```sh:entrypoint.sh
#!/bin/sh
echo ${URL:-https://google.co.jp}
echo ${WAIT_SEC:-86400}

while :
do
  node entrypoint.js
  sleep $WAIT_SEC
done
```

```js:entrypoint.js
const puppeteer = require('puppeteer');

(async () => {
  //
  const browser = await puppeteer.launch({
    args: [
      '--no-sandbox',
    ]
  });
  // profile指定したい場合
  //const browser = await puppeteer.launch({
  //  userDataDir: 'C:\\usrdata\\puppeteer_crawler_profile'
  //});

  const page = await browser.newPage();
  // アクセス
  await page.goto(process.env.URL);
  // example.pngに画面キャプチャ保存
  await page.screenshot({path: '/data/example.png'});

  await browser.close();
})();
```

```sh:run.sh
docker run --rm -it \
 -e URL="http://hogehoge.com" \
 -v $(pwd)/data:/data/ \
 faf1044237d1
```
Linuxサーバーでの監視ログ取得＆ログローテ

備忘録として記述

# 監視ログ
ssh接続ユーザーに対してscriptコマンドを使用し、ユーザーの操作画面を監視する
/etc/profile.d　に監視用シェルスクリプトを配置

```shell:/etc/profile.d/oplog.sh
P_PROC=`ps aux | grep $PPID | grep sshd | awk '{print $11}'`
if [[ $P_PROC =~ sshd ]];
then
  dir=/var/log/oplog/$USER/$(date +%Y)/$(date +%m); [ ! -e $dir ] && mkdir -m 700 -p $dir
  script  -qf $dir/$(date +%m%d_%H%M%S).log:
  exit
fi
```

上記似て以下構造で監視ログが生成される

```
/var/log/oplog/
|-[user name]
　|-[YYYY]
    |-[mm]
      |-mmdd_HHMMSS.log
```

# ログローテ
Linuxで標準搭載されているlogrotateを使用する

logrotate.d配下に新しい設定を記述

```shell:/etc/logrotate.d
/var/log/oplog/*/*/*/*.log {
    ifempty            # ログファイルが空でもローテーションする
    missingok          # ログファイルがなくてもエラーを出さない
    compress           # 圧縮する
    daily              # 毎日ローテートする
    noolddir           # ローテーション対象のログと同じディレクトリにローテーションしたログを格納 
}
```

圧縮ファイルがたまり続けることになるがひとまず、それはおいおい
thisを調べてみた


インナークラスから外部クラスを参照する場合の
外部クラス名.this
の記法があるらしく、ちょっと調べてみました。

まず、思いついた

```java

public class Main {
    public static void main(String []args) {
        TestThis t = new TestThis();
        t.this.hp = 10;///
    }


    public class TestThis {
        int hp;
        int mp;
        String name;
    }

}
```

こういうことか?と思いましたが

t.this.hp = 10;

この部分がエクリプスで、tを型に解決できないとのこと。
t classを作成しますか？と出ました。

t.hp = 10;ならok何ですけどね。

どうやら、インナークラスの解釈が間違っていたらしく、

class out~{
    class in~{
    }
}

のイメージ。
これをもとにエクリプスで再度実験。

```java
public class Main {
    public static void main(String []args) {
    	Outer o =  new Outer();
    	Outer.Inner oi = o.new Inner();
    	oi.innerPrint();
    }
    
    public class Outer{
	
        int outerhp = 10;
	
        public class Inner{
		
            public void innerPrint() {
                System.out.println(Outer.this.outerhp);
            }
		
        }
	
    }

}

```

これでもエラー
エクリプスさんによると
アクセス可能な型 Main のエンクロージング・インスタンスがありません。型 Main のエンクロージング・インスタンスで割り振りを限定する必要があります (たとえば x.new A() で、x は Main のインスタンス)。

とのこと調べてみると、ちょっとわかりませんでした。

```java
public class Main {
    public static void main(String []args) {
    	Outer o =  new Outer();
    	Outer.Inner oi = o.new Inner();
    	oi.innerPrint();
    }

    public static class Outer{

        int outerhp = 10;

        public class Inner{

            public void innerPrint() {
                System.out.println(Outer.this.outerhp);
            }

        }

    }

}
```

結果からいくとこれでエラーなく動くのですが。
（Outer classをstatic にしました）

なにやらバグに近いなにかのようなので、明日はそれを調べたいと思います。
http://d.hatena.ne.jp/chiheisen/20110502/1304272928
インデントの位置をみると、自分のコードとはまた違ったことを言っている気がします。
main(String[]args)がOuterの中にある、、、
こんなコードは書いたことがありません。

Outer.Inner oi = o.new Inner();

このnewの仕方は、前に本で見た気がする。もう一度、表紙に木の切り株が書いてある、あの本を読めばわかるかな。

インデント修正するたびにずれてく笑エクリプスから貼り付けたのだとなんか書式違うのかな。
強欲な量指定子（絶対最大量指定子）の使いどころ

正規表現の量指定子には「強欲な量指定子」とか「絶対最大量指定子」と呼ばれるものがあります。
この記事では，どのような場合にこれを使うのか，一例を挙げます。

コード例は Ruby で記述しますが，Ruby をご存知ない方にも分かるよう説明を加えます。

強欲な量指定子に至るまでに，ちょっと遠回りをしますが，ご容赦を。

# テキスト中から〈数字列＋"円"〉を拾う

まずは，テキスト中から，〈数字列＋`"円"`〉をすべて拾い出したいとします。

Ruby では以下のように書けます。

```rb
str = "一人250円のお菓子を14個買う"

p str.scan(/\d+円/)
```

1 行目はローカル変数への文字列代入です。

`/\d+円/` は正規表現リテラルです。
正規表現を `/ /` で囲むと正規表現リテラルになります。

`str` のあとにピリオドを置いて何かを書いているのは `str` に対するメソッド呼び出しです。
`scan` は，文字列に対して使えるメソッドです。引数で与えられた正規表現にマッチする部分文字列を検索して，その結果を配列で返します。

`p` はオブジェクトを表示するメソッドです。配列を与えたときは，配列っぽく見える文字列にフォーマットしたうえで表示してくれます。

結果は以下のようになります。

```rb
["250円"]
```

マッチする部分文字列が一つしか見出されなかったので，1 要素からなる配列が得られました。

# 後ろに "円" が続く数字列を拾う

今度は，後ろに `"円"` が続く数字列を拾ってみます。`"円"` が続く，といっても，`"円"` 自体は拾わず，数字列だけを拾うようにします。

これは，肯定先読み `(?= )` を使って

```rb
str = "一人250円のお菓子を14個買う"

p str.scan(/\d+(?=円)/)
```

と書けます。
結果は

```rb
["250"]
```

となります。

# 後ろに "円" が来ない数字列を拾う

今度は，後ろに `"円"` が来ない数字列を拾ってみたいと思います。

否定先読みを使って

```rb
str = "一人250円のお菓子を14個買う"

p str.scan(/\d+(?!円)/)
```

とするとどうなるでしょうか。

結果は

```rb
["25", "14"]
```

となります。

`"14"` のほうは想定していましたが，`"25"` のほうは予想外でした。

とはいえ，この `"25"` は後ろに `"円"` が来ていないので，確かにマッチします。
我らが正規表現エンジンは，正しく忠実に仕事をこなしたのでした。

正規表現エンジンはどのようにしてこの `"25"` を拾ったのでしょうか。

正規表現エンジンは，まず `\d+` にマッチする文字列を探します。

文字列の先頭から末尾に向かって探すので，`"2"` で始まる数字列をまず見出すわけですが，量指定子 `+` は「最長一致」なので，`"2"` や `"25"` ではなく `"250"` を得ます。

次に，見出した `"250"` の直後に `(?!円)` にマッチする部分文字列があるかを検討します。
`(?!円)` はアンカーなので，「部分文字列」と言っても必ず空文字列ですが，〈直後に `"円"` が存在しない〉という縛りがあります。

残念ながら直後に `"円"` が存在するので，失敗。

正規表現エンジンは，`\d+` からやり直します。
さきほどは `"250"` と欲張ってしまったので，1 文字減らして `"25"` を取り上げます。
そして，直後に `(?!円)` にマッチする空文字列があるかというと，ありました。

かくして，`"25"` と空文字列を結合した `"25"` を拾うことができたのでした。

上述した「やり直し」をバックトラックといいます。

# いよいよ強欲な量指定子の出番

前節の結果は正しいのですが，私が意図したものとは違いました。

やりたかったのは，「テキスト中から，最長一致で拾った数字列のうち，後ろに `"円"` が来ないもの」を拾うことでした。

バックトラックを抑止できれば意図が実現しそうです。

そこで，強欲な量指定子の出番です。
強欲な量指定子は，最長一致で，かつ範囲を縮めるようなバックトラックをしない，というものです。

通常の最長一致の量指定子の後ろに `+` を付加した形をしています。
つまり，`\d+` の強欲版は `\d++` となります。

これを使って，

```rb
p str.scan(/\d++(?!円)/)
```

とすれば，期待どおり

```rb
["14"]
```

が得られました。

# 強欲版を使わなくても

別解として，強欲な量指定子を使わない

```rb
p str.scan(/\d+(?!円|\d)/)
```

も考えられます。

しかし，強欲を使ったほうがシンプルでしょう。

え？　大してシンプルじゃない？
あー，今の場合，`\d` みたいな単純なやつだったからよかったけれども，もっと複雑な文字クラスだったら大変だぞおっ，ていうことで納得してくれたまえ。


# おまけ：パフォーマンスはどうした？

強欲な量指定子はパフォーマンスのために使う，というような説明をよく見ます。
実際，無用のバックトラックによって速度が落ちるケースがあり，強欲版にすることで改善したりします。

しかし，本記事はあえてパフォーマンスをテーマにしませんでした。
機会があればベンチマークテストを含めた記事を書いてみたいと思います。
gitlabでwikiを編集したときに500エラーになる問題を修正する

## 修正方法

`gitlab-rails/lib/gitlab/encoding_helper.rb` を修正する。

```ruby:encoding_helper.rb
    def binary_stringio(str)
      #StringIO.new(str || '').tap { |io| io.set_encoding(Encoding::ASCII_8BIT) }
      StringIO.new(str.freeze || '').tap { |io| io.set_encoding(Encoding::ASCII_8BIT) }
    end
```

## 変更の適用

```
gitlab-ctl restart sidekiq
gitlab-ctl restart unicorn
```

## 参考

* https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/21414/diffs
なぜRaspberry Pi 3B+は静電気防止袋に入っていないのか

Raspberry Piのフォーラムで「[No anti-static bag for 3B+? - Raspberry Pi Forums](https://lb.raspberrypi.org/forums/viewtopic.php?p=1287374)」という記事を見つけたので内容を紹介します。

# 3B+は静電気防止袋に入っていない

私の買ったRaspberry Pi 3 Model B+は紙の箱に剥き出しで基板が入っていました。私はRSコンポーネンツ版を購入したのですが、Element14版も同様の状況のようです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/46856/8c43dfee-0077-b72f-30db-08cc03294f94.png)
（写真は上記フォーラムより引用）

Raspberry Pi 3まではパッケージを開けると基板が黒っぽい静電気防止袋に入っていたように思いますが、それが無くなったのはどういうことなんだ！と盛り上がっているのが上記のフォーラムというわけです。

# 同梱の白い紙が静電気防止袋の役割を果たしている

実はRSコンポーネンツ版RPi3B+の箱を開けると、基板の他に謎の白い紙が入っています。

![2018-09-05 00.49.47.jpg](https://qiita-image-store.s3.amazonaws.com/0/46856/97a8ad8d-43ec-6ce4-22c1-1e98741be1de.jpeg)

バーコードが印刷されているだけで他に何の説明もない紙ですが、なんとこれが静電気防止袋の役割を果たしているんだそうです。

よく見ると確かに何か塗料のようなものが塗られているような気もしますが、言われなかったら普通の紙にしか見えません。本当にそんな効果があるんですかねえ…？

同じフォーラムによれば、Element14版は静電気防止効果のある紙袋に入っている（ものもある？）らしいです。

# 結論としては静電気対策サボってるわけじゃないよとのこと

そんな素材があるんですねー
iPhoneXで閲覧しているかどうかをJavaScriptで判定したい！

iPhoneXで閲覧しているか否かは、このように取得できそうです。
画面下付きのメニューをつけたいけど、画面下のホームに戻るバーなどが邪魔なのでデザインを調整したい！なんて時にも活用できます。

```javascript
var isIPhoneX = window.devicePixelRatio === 3 &&
  (window.screen.width === 375 || window.screen.height === 375) &&
  /iPhone/.test(window.navigator.userAgent);

// たとえばjQueryならこんな感じで使える。
$('.bottom-menu').toggleClass('is-iphonex', isIPhoneX);
```

`window.devicePixelRatio` は見慣れない方も多いかもしれませんが、CSSで指定した1pxが、実際の画面ではいくつのピクセルで表示されているかを取得できます。iPhoneXのretinaディスプレイではCSSで1pxの線などを引くと、スクリーン上は3pxの物理ピクセルで表示されます。

## さいごに

- 2018年9月現在ではこれでいけそうですが、新しいiPhoneの機種が出たり、アップデートがあった場合にも対応できる保証はありません。
- この記事は自分のメモ用に書いたものです。
- しょしんしゃなので、まちがっているところがあれば、やさしくおしえてください。
Go Web Examplesの和訳（Hello World）

[Go勉強会 Webアプリケーション編 #1](https://go-golang.connpass.com/event/98075/)で使おうと思っている[Go Web Examples](https://gowebexamples.com/hello-world/)の和訳です。ほぼGoogle翻訳ですが、リンク等も整理された状態であると便利だと思い作りました。[次回（HTTP Server）](https://qiita.com/tikidunpon/items/f06e48c642d46fda4df7)

# はじめに

Goはバッテリーを内蔵したプログラミング言語で、Webサーバーがすでに組み込まれています。標準ライブラリの[net/http](https://golang.org/pkg/net/http/)パッケージには、HTTPプロトコルに関するすべての機能が含まれています。これには、（他の多くのものの中でも）HTTPクライアントとHTTPサーバーが含まれます。この例では、ブラウザーで表示できるWebサーバーを作成する方法を簡単に把握します。

# リクエストハンドラの登録

まず、ブラウザ、HTTPクライアント、またはAPIリクエストからすべてのHTTP接続を受け取るHandlerを作成します。 GoのHTTPハンドラは、次のシグネチャを持つ関数です。

```go
func (w http.ResponseWriter, r *http.Request)
```

この関数は2つのパラメータを受け取ります。  

1. text/htmlレスポンスを書き込む[http.ResponseWriter](https://golang.org/pkg/net/http/#ResponseWriter)
2. このHTTPリクエストに関するすべての情報（URLやヘッダーフィールドなど）を含む[http.Request](https://golang.org/pkg/net/http/#Request)

リクエストハンドラをデフォルトのHTTPサーバーに登録するのは、次のように簡単です。   

```go
http.HandleFunc("/", func (w http.ResponseWriter, r *http.Request) {
	fmt.Fprintf(w, "Hello, you've requested: %s\n", r.URL.Path)
})
```

- [docs: http.HandleFunc](https://golang.org/pkg/net/http/#HandleFunc)
- [docs: fmt.Fprintf](https://golang.org/pkg/fmt/#Fprintf)

# HTTP接続をリッスンする  

リッスンとは（引用元: [e-words: リッスン](http://e-words.jp/w/%E3%83%AA%E3%83%83%E3%82%B9%E3%83%B3.html)）
> TCP/IPの通信ができるOS上で動作しているプログラムが、特定のポート番号への接続を待ち受けること  

リクエストハンドラだけでは、外部からのHTTP接続を受け入れることはできません。 HTTPサーバーは、リクエストハンドラに接続を渡すためにポートで待機する必要があります。 ほとんどの場合、ポート80番はHTTPトラフィックのデフォルトポートなので、このサーバーはHTTPトラフィックもリッスンします。 次のコードは、GoのデフォルトのHTTPサーバーを起動し、ポート80番で接続を待ち受けます。ブラウザで`http://localhost`に移動して、サーバーがリクエストを処理するのを見てください。


```go
http.ListenAndServe(":80", nil)
```
- [docs: http.ListenAndServe](https://golang.org/pkg/net/http/#ListenAndServe)

# コード (コピペ用)  
これは、この例で学んだことを試すために使用できる完全なコードです。

```server.go
package main

import (
	"fmt"
	"net/http"
)

func main() {
	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
		fmt.Fprintf(w, "Hello, you've requested: %s\n", r.URL.Path)
	})

	err := http.ListenAndServe(":80", nil)
	fmt.Print(err)
}
```

# 動作確認   

```sh
$ sudo go run server.go &
$ curl localhost:80/hello
Hello, you've requested: /hello
```  

[次回（HTTP Server）](https://qiita.com/tikidunpon/items/f06e48c642d46fda4df7)
Firefoxで最後のタブを閉じてもブラウザを終了しない方法

標準設定では最後のタブを閉じると、ブラウザが終了します。
しかし、下記の手順を行うだけで最後のタブを閉じても、ブラウザを終了しないようにできます。
以前はTabMixPlusというアドオンで設定していました。
残念ながらFirefox Quantum(バージョン57)以降では、使用できなくなったためメモ。

＊注意＊　下記の操作は全て自己責任で行ってください

1. Firefoxを起動
2. アドレスバーに「about:config」と入力し、エンター
3. 「危険性を承知の上で使用する」をクリック
4. 設定名「browser.tabs.closeWindowWithLastTab」を検索
5. 値を「false」に変更

画像付きの解説はブログに載せていますので、良ければ見てください。
<a href="https://tsukasa-labz.hateblo.jp/entry/2018/02/04/233448" target="_blank">つかさラボのBlog@hatena</a>

2023/07/17時点でも有効なことを確認。
Firefox 115.0.2 (64 ビット)
講義の気づき（less,namespace.object指向）

#講義の復習
先日受けた講義で、覚えていなかった点を中心にまとめました。
##less

lessc ~~(LESSファイルの名前).less ~~(CSSファイルの名前).css
というコマンドによって、lessファイルからcssファイルに移すことができる。

##名前空間
namespaceと呼ばれる。
クラスの名前が重複していても呼び出させるようにしたもの。
名前空間も被ってしまえば、サブ名前空間を作る。
例えば、namespace asia/korea/busan といった具合である。
名前空間が長い場合は、use~asを用いる。

##オブジェクト指向
###カプセル化
外部から見て簡単に見えるものを作る。
クラスの中での変更は、そのクラス内のみで行われる。

###ポリモーフィズム
異なる動作を同じ命令ですること。

###メソッド・プロパティ
クラスの中で使用される関数：メソッド
クラスの中で使用される変数：プロパティ
自分のためのgitメモ

# はじめに
gitちょっとずつ使ってるけど、なかなかわかってないこと多いので整理中。

# 概念
リポジトリ
ローカルリポジトリ
リモートリポジトリ
コミット
インデックス
ワークツリー
ブランチ
マージ
オリジン
マスター
HEAD

ワークツリー、HEAD、masterがいまいちわかってない。

# コマンド一覧
## そこそこ使う系

```
git config --global user.name "namae"
git config --global user.email "e@mail"
git init
git clone <url>
git pull
git push <先repo> <元repo>
git add <file>
git commit -m ''
git status
git diff <file>
git log
git remote add <> <url>
git reset
git tag <tag>
git mv <前> <後>
```

## ブランチ系

```
git branch <>
git checkout <>
git merge <>
git merge --no-ff <>
git rebase <>
git checkout -b <>
```

## いまいちわからん系

```
git gc
git revert <commit>
git stash <>
```

## 名前似てる系
```
git reset # なかったことにする
git revert # なかったことにするけどログを残す
git rebase # まとめるらしい
```

あってんのかな。

# こんなときどうする
## セットアップ
git config --global user.name "namae"
git config --global user.email "e@mail"

## GitHubとかでリポジトリ作ってから作業
git clone <>
touch README.md
git add README.md
git commit -m "add README"
git push -u origin master

## すでにあるファイルをGitHubとかにpush
git init
git remote add origin <>
git add .
git commit -m "Initial commit"
git push -u origin master

## ローカルのリポジトリをGitHubとかにpush
git remote rename origin old-origin
git remote add origin <>
git push -u origin --all
git push -u origin --tags

# ブランチモデル
- masterのみ
- masterとdevelop
- masterとnew-feature
- github-flow
- git-flow

github-flowがシンプルでいい感じ。

# CI使うとき（Herokuとか）
GitHubとかにpushしたら、しかるべきブランチをHerokuにもpushする仕組み。

GitLabのExampleみてみると、masterブランチはステージング環境にデプロイして、tagつけたらプロダクション環境にデプロイしてそう。
タグつけたら公開って楽で良さそう。

[Test and Deploy a ruby application with GitLab CI/CD | GitLab](https://docs.gitlab.com/ce/ci/examples/test-and-deploy-ruby-application-to-heroku.html)

# svnとの比較
checkoutの意味が違うので、混乱する。

|svn|git|
|:--|:--|
| svnadmin create | git init |
| svn checkout | git clone |
| svn update | git pull |
| svn add | git add |
| svn commit | git commit |
| svn status | git status |
| svn switch | git checkout |
| svn merge | git merge |
| svn revert | git checkout |


# 参考
[【完全保存版】Git入門におすすめの本5選！ | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト](https://www.sejuku.net/blog/5782/)

[よく使う基本Gitコマンド集【厳選19選】 | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト](https://www.sejuku.net/blog/5816/)

[入門git | Travis Swicegood, でびあんぐる |本 | 通販 | Amazon](https://www.amazon.co.jp/%E5%85%A5%E9%96%80git-Travis-Swicegood/dp/427406767X)

[Gitのブランチモデルについて - Qiita](https://qiita.com/okuderap/items/0b57830d2f56d1d51692)

[A successful Git branching model » nvie.com](https://nvie.com/posts/a-successful-git-branching-model/)

[Git-flowって何？ - Qiita](https://qiita.com/KosukeSone/items/514dd24828b485c69a05)

[プルリクエスト／レビューを取り込んだ、よりシンプルなGitHub Flowの運用を図解する (2/2)：Gitブランチを使いこなすgit-flow／GitHub Flow入門（終） - ＠IT](http://www.atmarkit.co.jp/ait/articles/1401/21/news042_2.html)
keras.preprocessing.image使い方メモ

ページによって引数の説明があったりなかったりするので
実際に動かしたトライをもとに抜粋してメモ

#確認環境
python3.6.6
Tensorflow:1.10.0
Keras：2.2.2
#import例
```python:
from keras.preprocessing.image import load_img, save_img, img_to_array, array_to_img
```

#load_img()
画像をファイルから読み込み、PIL 形式で返す

```python:ex.
load_img(path, grayscale=False, color_mode='rgb', target_size=(224,224))
```
- 引数
 - **path:** 画像を読み込むファイルパス(ex.'***.jpg')
 - **grayscale:**Trueの場合はGrayscale。Falseの場合はRGB  
★指示しない場合⇒**「RGB」**で読込。
 - **color_mode:** 読み込んだ後に指定した形式に変換する。('rgb', 'rgba', 'grayscale')  
★指示しない場合⇒**「rgb」**で読込
 - **target_size:** リサイズする大きさ   
★指示しない場合⇒元の画像の大きさ
 - **interpolation:** リサイズする手法 ('nearest', 'bilinear', 'bicubic')  
★指示しない場合⇒不明
- 返り値
 - PIL 形式の画像  

**備考：grayscaleとcolor_modeだとgrayscale優先の模様**

#save_img()
ndarray をファイルへ保存する

```python:例
save_img(path, x)
```
- 引数
 - **path:** 画像を保存するファイルパス(ex.'***.jpg')
 - **x:** 3次元の ndarray  

**備考：keras2.2.0から実装**  
**ndarray**を画像に変換し保存するとの事だが、**PIL形式**や**正規化したndarray**も「jpeg」で保存された。

#img_to_array()

PIL 形式から ndarray に変換する

```python:例
img_to_array(x)
```
- 引数
 - **x:** PIL 形式の画像
- 返り値
 - 3次元の ndarray

#array_to_img()
ndarray から PIL 形式に変換

```python:例
array_to_img(x, scale=True)
```
- 引数
 - **x:** 3次元の ndarray
 - **scale:**Trueで正規化された[0, 1]のデータを[0, 255]に変換
- 返り値
 - PIL 形式の画像