OmniAICreator/Qiita-1.07M huggingface dataset:
git push --set-upstream origin masterって毎回聞かれるのをやめる

## 説明
きっと`git push`をしたときに下記のようなメッセージに出会ったgitビギナーの方、多いと思います。

```
$ git push
fatal: The current branch master has no upstream branch.
To push the current branch and set the remote as upstream, use

    git push --set-upstream origin master
```

upstream branchがないので`git push --set-upstream origin (ブランチ)`でセットしてくださいね。というものです。
※ 今回はマスターブランチにいたので（ブランチ）が**master**になっています。

この通り`git push --set-upstream origin master`をすればそのブランチはupstream branchとなり、次の`git push`ではupstream branchが存在するのですんなりpushされるようになります。


### 解決方法
それでも事あるごとに`git push --set-upstream origin master`するのは面倒。。


https://qiita.com/awakia/items/6aaea1ffecba725be601
この記事を参考に、どうやら`current`が面倒くさがりな自分向きではないかと思い、以下のように設定。

```
$ git config --global push.default current
```


これは`git push`したときに、現在のブランチリモートブランチに同名でpushするモード。つまりリモートに存在すればそのブランチにpushするし、なければ現在のブランチをリモートにpush。

もちろん"current"の部分を別のモードに変えれば、そのモードとしてグローバルに設定されます。違うプロジェクトに入ったとしても設定は保たれるので、『`git push --set-upstream origin master`を叩いてね』と言われることはもうありません。


#### おまけ

..って説明であっているのかな。数年前に設定したきり意識することがなかったのですが、マシーンを変えてから度々聞かれるので再設定しました。そのときの覚書として残すために投稿しました＊
JavaScriptのnewの知られざる2番目の使い方

あまり良いタイトルではないですが
2つの使い方があるよ、という話です。

this についてここ([JavaScriptのthis(コンテキスト)とは？](/hamamoto_abc/items/81e6486ef828bd780fa7))で書いたのですが、
そういえば this の話なのに new にあまり触れてなかったなと気づいた流れで、
new といえばそういえば2通りの使い方があるなということで書いてみました。
## new の2通りの使い方。

```js
var a = new function(){ // 使い方：1つ目
  this.x = 'x1';
  this.y = 'y1';
};

var b = new function(){ // 使い方：2つ目
  var that = {};
  that.x = 'x2';
  that.y = 'y2';
  return that;
};

console.log( a.x, a.y ); // x1,y1
console.log( b.x, b.y ); // x2,y2
```
newで関数を実行した際にその中で、

・object(hash) を return した場合にはそれ自体が new の戻り値として返り、( ↑で書いた "2つ目")
・それ以外は **[何かしら]** が返ってきます。 ( ↑で書いた "1つ目")

この **[何かしら]** は内部的には this としてアクセスできて、外部的にはそれを代入した変数 a からアクセスできます。

a も b も外からアクセスする分には同じ動きをします。

```js
var c = (function(){
  var that = {};
  that.x = 'x3';
  that.y = 'y3';
  return that;
}());
```
この c も同様の動きです。(new 使った例ではないですが)

##で、「何が違うんだ？」とか「どう使い分ける？」
とかですが、b,c は全く同じなのでどちらでもいい思います。(私は c の書き方をよく使う)
結局のところ単に object(hash) を返しているだけです。
何か初期化の処理をしたいな～とかいう場合に使ってます。

※追記。関数の初期化用途の場合には new を私はよく使います。

```js
var test = new function(){
  var _default = 'aiueo';
  return function(x){
    return x||_default;
  };
};
test(); // 'aiueo'

// "内部だけ" で使う関数を定義したい場合。
var test = new function(){
  return function(n){
    return add(n);
  };
  function add(n){
    return n+10;
  }
};
test(2); // 12
```

a は b,c っぽい **[何かしら]** が返ってきますが、**[何かしら]** 特有の機能が付与されているというだけの違いです。
特有の機能とは以下の暗黙のプロパティ2つに関しての話です。

・**[何かしら]**.prototype
・**[何かしら]**.constructor

b,c にもこれはあるんですけど、b,c は親の扶養家族みたいなもので、
a の new は独り立ちして一軒家を作る場合に使う、という感じです。

一軒家の話は長くなるのと、とりあえず new のこの2つについて書きたかったのでここまでで。
Anaconda の conda update conda でのエラー解決

## "conda update conda" でのエラー

ターミナル上で、```conda update conda``` を打った時に、以下のようなエラーが出てきた（絶対パスのホームディレクトリだけ~で書き換えている）。

```
$ conda update conda
Vendor:  continuum
Product: anaconda
Message: trial mode expires in 27 days
Solving environment: \ ~/.pyenv/versions/anaconda-4.0.0/lib/python2.7/site-packages/requests/packages/urllib3/util/ssl_.py:334: SNIMissingWarning: An HTTPS request has been made, but the SNI (Subject Name Indication) extension to TLS is not available on this platform. This may cause the server to present an incorrect TLS certificate, which can cause validation failures. You can upgrade to a newer version of Python to solve this. For more information, see https://urllib3.readthedocs.io/en/latest/advanced-usage.html#ssl-warnings
  SNIMissingWarning
~/.pyenv/versions/anaconda-4.0.0/lib/python2.7/site-packages/requests/packages/urllib3/util/ssl_.py:132: InsecurePlatformWarning: A true SSLContext object is not available. This prevents urllib3 from configuring SSL appropriately and may cause certain SSL connections to fail. You can upgrade to a newer version of Python to solve this. For more information, see https://urllib3.readthedocs.io/en/latest/advanced-usage.html#ssl-warnings
  InsecurePlatformWarning
failed

CondaHTTPError: HTTP 000 CONNECTION FAILED for url <https://repo.anaconda.com/pkgs/pro/osx-64/repodata.json.bz2>
Elapsed: -

An HTTP error occurred when trying to retrieve this URL.
HTTP errors are often intermittent, and a simple retry will get you on your way.

If your current network has https://www.anaconda.com blocked, please file
a support request with your network engineering team.

SSLError(SSLError(SSLError(1, '_ssl.c:504: error:14090086:SSL routines:SSL3_GET_SERVER_CERTIFICATE:certificate verify failed'),),)
```

ほかの conda の関数（例えば ```conda install```）も調べたが、上のエラーが出て、conda 全体の関数が使えなくなっているようだ。

## 解決方法

調べてみたが、Conda環境にインタラプションがあるらしいが、気にせず、以下を打てば解決した。

```Terminal
conda config --set ssl_verify no
```

## 参考URL

- [Any Package Results in "CondaHTTPError: HTTP 000 CONNECTION FAILED #6007](
https://github.com/conda/conda/issues/6007)
vuexを少しずつ少しずつ理解していこう(Nuxt.js環境下)　その3(actions編)

#前回の復習
シリーズで書いております。前回までvuexの基本的な概念とstate,gettersについて書かせていただきました。↓
[vuexを少しずつ少しずつ理解していこう(Nuxt.js環境下)　その1(state,getters編)](https://qiita.com/dropmo/items/cd76701d395294eb7475)
[vuexを少しずつ少しずつ理解していこう(Nuxt.js環境下)　その2(mutations編)](https://qiita.com/dropmo/items/11c9500b678a4c9b4c72)

前回まででvuexのstate,getters,mutationsを理解したところで今回はactionsについて理解していこうと思います。

#actions(アクションズ)
mutationsの処理を行う前にここでapiからの情報を取得したりします。

###参考書籍：
著[@potato4d](https://qiita.com/potato4d)
タイトル　[Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発](https://www.amazon.co.jp/Nuxt-js%E3%83%93%E3%82%AE%E3%83%8A%E3%83%BC%E3%82%BA%E3%82%AC%E3%82%A4%E3%83%89%E2%80%95Vue-js-%E3%83%99%E3%83%BC%E3%82%B9%E3%81%AE%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%AB%E3%82%88%E3%82%8B%E3%82%B7%E3%83%B3%E3%82%B0%E3%83%AB%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E9%96%8B%E7%99%BA-%E8%8A%B1%E8%B0%B7-%E6%8B%93%E7%A3%A8/dp/4863542569/ref=as_li_ss_tl?ie=UTF8&qid=1541550300&sr=8-2&keywords=%E3%83%93%E3%82%AE%E3%83%8A%E3%83%BC%E3%82%BA%E3%82%AC%E3%82%A4%E3%83%89&linkCode=sl1&tag=shigeidanijp-22&linkId=52021ea714dd3284fc44e53bb3ff0b7f&language=ja_JP)
※Nuxt.jsを使った開発について丁寧でわりやすく、非常に重宝しております。著者の方に深くお礼申し上げます。

##事例①　qiita一覧記事を取得
######出来上がりのイメージ
![Screenshot(5).png](https://qiita-image-store.s3.amazonaws.com/0/142782/672bf3bd-1e5f-f819-cfee-21f53bfd015d.png)

####仕様説明

- qiitaのapiから記事一覧を取得する。所得したい情報は[vuex]のタグが入っている記事。
- 取得URLはhttps://qiita.com/api/v2/items?query=tag:vuex
- [asyncData メソッド](https://ja.nuxtjs.org/api/)を使ってdispatchを動かす。

###ソースコード

```store/index.js
import Vuex from 'vuex'

const createStore = () => {
  return new Vuex.Store({
    state:{
      qiitas:{}
    },
    getters:{
      qiitas:(state)=>state.qiitas
    },
    mutations: {
      qiitasMutan(state,{qiitasDatas}){
        state.qiitas = qiitasDatas;
      }
    },
    actions: {
      async qiitasActi({commit}){
        const qiitasDatas = await this.$axios.$get('https://qiita.com/api/v2/items?query=tag:vuex')
        commit('qiitasMutan',{qiitasDatas})
      }
    }
  })
}

export default createStore
```

```index.vue
<template>
  <div>
    <h1>qiitaからタグ「vuex」の記事情報一覧を取得</h1>
    <ul>
      <li v-for="qiita in qiitas" :key="qiita.id">
        <h4><a :href="qiita.url">{{ qiita.title }}</a></h4>
      </li>
    </ul>
</div>
</template>

<script>
  import {mapGetters} from 'vuex'

  export default {
    async asyncData({store}){
      if(store.getters['qiitas'].length){
        return
      }
      await store.dispatch('qiitasActi')
    },
    computed:{
      ...mapGetters(['qiitas'])
    }
  }
</script>
```
以上です。
「state」「getters」「mutations」「actions」について、基本は理解できました。
これを応用させてどんどんvuexを理解深めていきたいと思います。
Ubuntu 16.04 でログイン後すぐに強制ログアウトしてしまう時の対処法

# 状況
GUIでログインした後、20秒程で強制ログアウトしてしまう。

ターミナルモード（```ctl``` + ```alt``` + ```F2```を押して表示される画面）では問題ない。
また、Guestアカウントでログインした場合も問題ない。

# 対処法
他のアカウントを作成し、そのアカウントでログインする。

ターミナルモードにした後、以下の手順でアカウントを作成できる。
[ubuntu ユーザを追加して sudo 権限をつける]
(https://qiita.com/white_aspara25/items/c1b9d02310b4731bfbaa)
VSCodeでGitを管理する

## はじめに
VSCodeを使っていて、便利にGitを管理できたので自分なりに分かりやすくまとめました。
クローンからプッシュまでの操作方法を記載します。

## 操作方法

VSCodeから、Gitを操作するにはGitがインストールされている必要があります。
基本的には、F1を押してコマンドパレットから作業を行います。

## リポジトリをクローンする。

```
>git: clone
```
と入力してクローンを選択します。
GitのCloneURLを入力します。
ウィンドウが開き、クローン先のディレクトリを指定します。

## ブランチを作成する。

```
>git: branch
```
と入力すると
ブランチの作成・削除・マージ・名前の変更と出てきます。
その中から、ブランチの作成を選択します。
ブランチ名を入力します。

## コミットする
左のソース管理を選択します。
変更したファイルの＋を選択するか、
または、右クリックから変更のステージングを選択します。
上の･･･アイコンのその他の操作からすべての変更をステージでも選択できます。

![変更_2.png](https://qiita-image-store.s3.amazonaws.com/0/287163/06432c79-76b8-e16a-2a98-ba0d26b19e4c.png)

ステージングに上げたら、Messageにコミットメッセージを入力します。
入力後、上の✓アイコンのコミットを選択します。

![変更_3.png](https://qiita-image-store.s3.amazonaws.com/0/287163/306bf55c-75d2-d01d-3ce3-26cc8c19b389.png)

ステータス
M　変更したファイル
U　追加したファイル
D　削除したファイル
になります。


ファイルを選択すると、書き換わった差分が表示されます。
変更したファイルを前の状態に戻したい時は変更の破棄を選択します。

![変更2.png](https://qiita-image-store.s3.amazonaws.com/0/287163/f88ee8f9-5a8e-c3a3-988b-8699b47fdbf7.png)

## プッシュする
コミット後、上の･･･アイコンのその他の操作を選択します。
プッシュを選択します。

![変更3_2.png](https://qiita-image-store.s3.amazonaws.com/0/287163/effafd21-d1fa-a576-7552-0814a99b0851.png)

こちらのメニューから、プルやスタッシュなども行うことができます。

## ブランチを切り替える
```
>git: checkout to
```
選択すると、ブランチの一覧が出てくるので選択します。

## おわりに
VSCodeで作業して、Gitは別のツールと移動しなくて良いので楽で軽い。
コマンドでGitを操作するより、>Gitと打つだけでコマンドと説明が出てくるのでわかりやすい。
Git管理している方はVSCodeに乗り換えて、この使用感を試して頂きたいです。
Number.toFixed() の代わりになる関数

[Number.toFixed vs getNumberDigit | CreateJS](http://labo.project-nya.jp/createjs/toFixed/)

小数点以下の桁数を指定して表示する Number.toFixed() の代わりになる関数
　例1：(0.005).toFixed(2) が 0.01 になる（正）
　例2：(-0.005).toFixed(2) が -0.01 になる（正）
　例3：(1.005).toFixed(2) が 1.00 になる（誤）
　例4：(-1.005).toFixed(2) が -1.00 になる（誤）
　例5：(2.005).toFixed(2) が 2.00 になる（誤）
　例6：(-2.005).toFixed(2) が -2.00 になる（誤）

```js
////////////////////////////////////////
// 小数点以下の桁数表示（toFixedの代わり）
////////////////////////////////////////
function getNumberDigit(value, digit) {
	var shift = function(value, digit, reverse) {
		if (reverse) digit = -digit;
		var list = ("" + value).split("e");
		return Number(list[0] + "e" + (list[1] ? (Number(list[1]) + digit) : digit));
	};
	var sign = "";
	if (value < 0) {
		sign = "-";
		value = Math.abs(value);
	}
	var number = Math.round(shift(value, digit, false));
	return sign + shift(number, digit, true).toFixed(digit);
}
```
pandas基本コマンドまとめ

よく使うコマンドをまとめておきます（随時更新）

##読み込み
###基本のパッケージ読み込み
```
import pandas as pd
```
importする際パッケージ全体ではなく、パッケージの階層構造中に存在する一部のモジュールだけを呼び出したいときは以下のように書く

```
from パッケージ名 import モジュール名

#例
from collections import Counter
```

###csvファイルの読み込み
```
pd.read_csv("xxx.csv")
```

※事前にpandasをimportする必要あり
BytesPerRowとは

CoreVideoのPixelBufferから取得できる値にBytesPerRowというものがある。

`CVPixelBufferGetBytesPerRow(pixelBuffer:) -> Int`

BytesPerRowは、その名の通り、ピクセルバッファの1行あたりのバイト数のことである。

例えば1920x1080のPixelBufferの場合は7680を得る。
これは1ピクセルが4byteで表現されているからである。

余談だが、bytePerRowを4で割れば横幅を導き出せる。（が、`CVPixelBufferGetWidth(pixelBuffer:)`を使えばよい）

ちなみにPixelBufferがplanerの場合は、横幅x高さの画像全部のbyte数が返ってくるらしい
全てのシロ組が学ぶべき1つの言語

# はじめに

- [全ての開発者が学ぶべき5つの言語](https://qiita.com/poly_soft/items/e89bc757596cfdfba784)
- [全ての開発者が学ぶべき1つの言語](https://qiita.com//outlandkarasu@github/items/a2243eb3adbe906ec30d)
- [全ての開発者が学ぶべき1つのNim](https://qiita.com/tlllune/items/4aafa56818c3c814939f)
- [全ての開発者が学ぶべき自然言語](https://qiita.com/Gaccho/items/e12e998b0a1788d55f5f)

のパロディ(パクリ)です。ご了承ください。



「どの言語を学ぶべきか」という議論が都内各所で流行しています。私も書きます。



# 全てのシロ組が学ぶべき1つの言語


# 1. siro

トップバッターはこの言語。
siroは、2018年に公開されたプログラミング言語の一つです。
この言語は様々な用途で使うことができます。

**システム、web、デスクトップアプリケーション、ゲーム、人工知能...**それだけにとどまりません。
[誕生日をお祝いするコード](https://qiita.com/KRiver1/items/12e810add9dd274bff6e)を書いた人もいます。

なんせこの言語、**Brainf*ckの派生言語**ということもあり、あらゆる**チューリングマシン**で実行できるのです！
（ 実際に私も**Hello World!**を実施したことがあります。）

もしあなたが「何かやりたい！」と思う分野があれば、ぜひsiroでやってください。



# 2. siro

続いてsiro。

siroなんて初めて聞いた方もいるかもしれません。
なんせsiroはまだ登場して1年経っておらず、少々マイナーな言語です。

**この言語はなんと言っても文法のかきやすさ・読みやすさに優れています。**

```siro
おほほいおほほいおほほいおほほいおほほいおほほいおほほいおほほいおほほいおほほい白組さんいーねっ！おほほい
いーねっ！おほほいおほほいおほほいいーねっ！おほほいおほほいおほほいおほほいおほほいおほほいおほほい
いーねっ！おほほいおほほいおほほいおほほいおほほいおほほいおほほいおほほいおほほいおほほいｷｭｰｲｷｭｰｲｷｭｰｲ
ｷｭｰｲぱいーん救済いーねっ！いーねっ！いーねっ！おほほいおほほいなんて日だ！いーねっ！おほほいなんて日だ！
おほほいおほほいおほほいおほほいおほほいおほほいおほほいなんて日だ！なんて日だ！おほほいおほほいおほほい
なんて日だ！ｷｭｰｲｷｭｰｲおほほいおほほいなんて日だ！いーねっ！おほほいおほほいおほほいおほほいおほほいおほほい
おほほいおほほいおほほいおほほいおほほいなんて日だ！いーねっ！ぱいーんぱいーんぱいーんぱいーんぱいーん
ぱいーんなんて日だ！おほほいおほほいおほほいおほほいおほほいおほほいおほほいおほほいおほほいなんて日だ！
ぱいーんぱいーんぱいーんなんて日だ！ｷｭｰｲｷｭｰｲなんて日だ！いーねっ！おほほいおほほいおほほいおほほい
なんて日だ！いーねっ！なんて日だ！おほほいおほほいおほほいなんて日だ！ぱいーんぱいーんぱいーんぱいーん
ぱいーんぱいーんなんて日だ！ぱいーんぱいーんぱいーんぱいーんぱいーんぱいーんぱいーんぱいーんなんて日だ！
ｷｭｰｲｷｭｰｲおほほいなんて日だ！ｷｭｰｲなんて日だ！
```

とにかく簡潔で無駄がないのです。
`class` とか、`function `とか、よくわからないモノは書かなくていいのです。
いちいち括弧つけてコードを書く時代はもう終わり。

また文法が簡潔なだけでなく、**音読すると大変心を揺さぶられ、魂に刻まれたおほほいがぱいーんされるでしょう。**



# 3. siro

次はこの言語。
siroは2018年3月23日 @benisho_ga 氏によって公開された言語です。

この言語はなんと言っても、**簡単に試せることができます**。

いざ新しい言語を学ぼうと思っても、環境構築に苦戦して諦めてしまう・・・そんな話をよく聞きますが、siroなら心配ありません！なんとsiroは**学習環境がWebで公開されているのです！**

[Siro Language Interpreter](https://yameholo.github.io/SiroLangInterpreter/)

めんどくさい環境構築はもう不要です。好きなだけ試すことができます。

もちろん、PCのコンソールでも動作します。



# 4. siro

ラストを飾るのはこの言語。

siroという言語は聞いたことがない方も多いかもしれませんが、簡潔な文法ながら処理の速い、いわずとしれた万能言語です。

そんな万能言語を、あなたはもっと触ってみたいと思いませんか？

あなたがこの言語を触ることによって、siroがまたさらに普及します。

そうすると、世界中の老若男女が、今よりもっと軽量なソフトウェアを簡単に制作・改造して世界中に公開でき、またそれを容易に利用できる、夢の社会を築く一員となることができます。

そんな社会の変革に、乗り遅れてはいけません。

興味の湧いた方は是非、siroを始めてみてください。

- [公式サイト](https://qiita.com/benisho_ga/items/50e674fded183a9e12f1)
- [Siro Language Interpreter](https://yameholo.github.io/SiroLangInterpreter/)
- [先行事例](https://qiita.com/KRiver1/items/12e810add9dd274bff6e)



# 最後に

シロちゃんの動画は為になるなぁ
yarn install時に、error : The engine "node" is incompatible with this module.

`yarn install`したときにeslintがインストールできなくて詰まったので、解決策を書きます。


# エラー
```
error eslint@5.8.0: The engine "node" is incompatible with this module. Expected version "^6.14.0 || ^8.10.0 || >=9.10.0".
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
```

#### 発生環境

- node: 8.9.4
- yarn: 1.9.4


# 解決策

```bash 
yarn install --ignore-engines
```

これでだめならnodeのバージョンを下げて[解決する場合](http://teinen.hatenablog.jp/entry/2018/04/26/231951)もある。

# 参考

- https://qiita.com/DQNEO/items/372f20b17af8af8c4d11
- http://teinen.hatenablog.jp/entry/2018/04/26/231951
Discord.pyがrewriteが主流になってきたので初心者用コードを書いてみる。

#Discord.pyとは
Discord Botをpythonで書くためのライブラリです。
Botの登録方法は[こちらを。](https://qiita.com/1ntegrale9/items/9d570ef8175cf178468f)
また、日本人向けのDiscord.pyのサーバーは[こちら](https://discord.gg/KPp2Wsu)

#コード
```py:bot_example.py
import discord

client = discord.Client()


@client.event
async def on_ready():
    print('ログ中:')
    print(f'Botの名前: {client.user.name}')
    print(f'Botのid: {client.user.id}')
    print('------')


@client.event
async def on_message(message):
    if message.content.startswith('私は誰でしょう？'):
        reply = 'あなたは{.name}さんです'.format(message.author)
        await message.channel.send(reply)

# botの接続と起動
# （tokenにはbotアカウントのアクセストークンを入れてください）
client.run('token')
```
GoogleアナリティクスをReactで使う方法

#GoogleアナリティクスをReactで使う方法

## サンプルソースコード
以下のリポジトリにてサンプルを確認することができます。（react + router + reduxの構成）
https://github.com/solt9029/react-ga-tutorial

## 普通のHTMLページだったら？

Googleアナリティクスを普通のHTMLページで使う場合、ヘッダーに以下のようなタグを追加します。

```html
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-128421111-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-128421111-1');
</script>
```

しかし、Reactを使ったSPAの場合、これだけだとうまくいきません。
（※ページ遷移はReact Routerで行っているものとします）

そのため、react-gaというモジュールを使って設定していきます。
かなり単純ですが、ちゃんと一通り書いていた記事が見つからなかったので、この記事にまとめました。


## react-gaでGoogleアナリティクスをReactで使うよ！

まずreact-gaが必要です。
yarnを使っている場合には以下の通りです。

```
yarn add react-ga
```

npmを使っている場合には以下の通りです。

```
npm install --save react-ga
```

普通にReactの開発をしていれば、src/index.jsの中でhistoryを作っているかと思います。（そうでない場合は、読み替えていってください。）

```react
import createBrowserHistory from 'history/createBrowserHistory';
const history = createBrowserHistory();
// （以下略）
```

このindex.jsに以下のようなコードを加えます。

```react
import ReactGA from 'react-ga';
import createBrowserHistory from 'history/createBrowserHistory';

ReactGA.initialize('UA-128421111-1');
const history = createBrowserHistory();
history.listen(({ pathname }) => {
  ReactGA.set({ page: pathname });
  ReactGA.pageview(pathname);
});
// （以下略）
```

history.listenで、React Routerによってページ遷移するごとに、Googleアナリティクスに情報が送信されるようになりました。

しかし、初めてindex.htmlが返されるときに、Googleアナリティクスに情報が送信されません。（ページ遷移ではなく、直接そのサイトにアクセスしたとき）

そこで、App.jsにcomponentDidMountでGoogleアナリティクスに情報を送信するプログラムを書きましょう。

```react
import ReactGA from 'react-ga';
// （略）

export default class App extends Component {
  componentDidMount() {
    const { pathname } = this.props.location;
    ReactGA.set({ page: pathname });
    ReactGA.pageview(pathname);
  }
// （略）
}
```

以上です！
Ubuntu 16.04 に Rails & PostgreSQLを導入

# Railsの導入
こちらのサイトが参考になります。
http://exrecord.net/how-to-construct-ruby-on-rails-environment-in-ubuntu

# PostgreSQLの導入

以下を参考にしてインストールします。

- https://www.postgresql.org/download/linux/ubuntu/ （公式サイト）
- https://weblabo.oscasierra.net/postgresql10-ubuntu1604-install/


まず、```/etc/apt/sources.list.d/pgdg.list```を作成し、以下を追記します。

```/etc/apt/sources.list.d/pgdg.list
deb http://apt.postgresql.org/pub/repos/apt/ xenial-pgdg main
```

次にレポジトリを追加し、インストールします。

```bash
# レポジトリを追加
$ wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add -
sudo apt-get update

# インストール
$ sudo apt-get install postgresql-client-10 postgresql-client-common postgresql-common postgresql-server-dev-10 postgresql-10 pgdg-keyring

# インストールを確認
$ dpkg -l | grep postgres
ii  pgdg-keyring                               2018.1                                       all          keyring for apt.postgresql.org
ii  postgresql-10                              10.5-2.pgdg16.04+1                           amd64        object-relational SQL database, version 10 server
ii  postgresql-client-10                       10.5-2.pgdg16.04+1                           amd64        front-end programs for PostgreSQL 10
ii  postgresql-client-common                   195.pgdg16.04+1                              all          manager for multiple PostgreSQL client versions
ii  postgresql-common                          195.pgdg16.04+1                              all          PostgreSQL database-cluster manager
ii  postgresql-server-dev-10                   10.5-2.pgdg16.04+1                           amd64        development files for PostgreSQL 10 server-side programming
```

さらに、パスワードなしでログイン出来るように設定します。まず、pg_hba.confを開いてください。

```
$ sudo vi /etc/postgresql/10/main/pg_hba.conf
```

そして、最下部にある METHOD を以下のように全て **trust** に書き換えてください。

```/etc/postgresql/10/main/pg_hba.conf
local   all             postgres                                trust

# TYPE  DATABASE        USER            ADDRESS                 METHOD

# "local" is for Unix domain socket connections only
local   all             all                                     trust
# IPv4 local connections:
host    all             all             127.0.0.1/32            trust
# IPv6 local connections:
host    all             all             ::1/128                 trust
# Allow replication connections from localhost, by a user with the
# replication privilege.
local   replication     all                                     trust
host    replication     all             127.0.0.1/32            trust
host    replication     all             ::1/128                 trust
```
これでインストールは完了です。
以下のコマンドで起動出来ます。

```bash
$ sudo systemctl start postgresql
```
.eachで画像がそれぞれ縦長か判別

```javascript:check_size.js
$(function(){
	//shop_infoの画像がそれぞれ縦長か判別
  $('.shop_info li ').each(function(){
  	//imgを制作
		let img = new Image();
		img.src = $(this).children('img').attr('src');
		//ソースから縦横サイズを取得
    let h = img.height;
    let w = img.width;
    //縦長であればtallクラスをつける
    if (h > w) {
			$(this).addClass('tall');
    }
  });
});
```
VB.NET Enum列挙型の記述と挙動について


列番号や連番を管理する時に列挙型（Enum）を使うことがしばしばあります。

その時の挙動が妙だったのでメモしておきます。

#パターン１
```vb
Private Enum eTEST
    a
    b
    c
    d
End Enum
```
要素の値は以下のようになります。

```
    a ⇒ 0
    b ⇒ 1
    c ⇒ 2
    d ⇒ 3
```
列挙体は指定がなければ０から順にインクリメントします。


#パターン２
```vb
Private Enum eTEST
    a = 1
    b = 2
    c = 3
    d = 4
End Enum
```
要素の値は以下のようになります。

```
    a ⇒ 1
    b ⇒ 2
    c ⇒ 3
    d ⇒ 4
```
要素を指定した場合はそれぞれ指定した値になります。

#パターン３
```vb
Private Enum eTEST
    a = 1
    b = 2
    c
    d = 3
    e
    f = 4
    g
End Enum
```
要素の値は以下のようになります。

```
    a ⇒ 1
    b ⇒ 2
    c ⇒ 3
    d ⇒ 3
    e ⇒ 4
    f ⇒ 4
    g ⇒ 5
```
c に指定がない場合、一つ前の b の数にインクリメントします。
その次の d は指定しているので値は 3 になります。
「指定がないと上の要素にインクリメントして設定する」というルールのようです。

#パターン４

```vb
Private Enum eTEST
    a = 1
    b = 2
    c
    d = 3
    e
    f = b　☜ここ
    g
End Enum
```
上記のように別の要素を割り当てると、要素の値は以下のようになります。

```
    a ⇒ 1
    b ⇒ 2
    c ⇒ 3
    d ⇒ 3
    e ⇒ 4
    f ⇒ 2　☜
    g ⇒ 3　☜
```
こんな感じの書き方もできるみたいです。
（どんな場面で使うんだろう）

#まとめ
可読性が下がるんで、
Enumには値を指定せずに自動でインクリメントさせたほうがいいなと思いました。
【Python】Python入門①【Pythonって何？】

#**Python入門**
![fail2ban-unwanted-robots-crawlers-spiders.jpg](https://qiita-image-store.s3.amazonaws.com/0/307312/a3eb44b2-1680-fc7e-fdf1-d44edd027f2b.jpeg)
自分がPythonを学習し始めて数か月が経ちました。最初はAIとか機械学習とか面白そうと思って学習し始めたのですが、クローリングとスクレイピングに興味がわき前回作ったようなヤフオク落札履歴検索ツール [ヤフオク落札履歴を抽出するツールが使えます 販売、落札したい商品の適正価格がいくらか事前に知りたい方に](https://qiita.com/dmm7txk2/items/3b5047e14b043c52d6d2)やら記事にはしてないけど**Twitterで特定ユーザーのフォロワーをフォローするツール**を作ったりしてました。

ある程度クローリング＆スクレピングの技術はそこそこ使えるようになったので、今まで学習したことを忘れた時の為や、誰かが学習する時に役に立つ様に基本からアウトプットすることにしました。内容は学習するときに買った本を基に作成します。

##**Pythonって何？どんな言語？**
ここを見るような人には既知の事だと思いますが、Pythonは**オープンソースでフリーのプログラミング言語**です。フリーなので誰でも環境をインストールして開発、配布することが出来ます。
**※配布するときは著作権には注意しないと大変なことになるので気を付けて下さい。**

###**汎用性が高い言語**
プログラミング言語と言っても色んな種類があります。昔からあるC言語や日頃お世話になっているAndroidアプリを作っているJava、Webページを表示するHTMLやJavaScript、iPhoneアプリを作っているObjective-C等々、目的や用途によって実に様々な言語があります。
そんな中でPythonが出来ることは沢山あります。Webアプリからデスクトップアプリ、バッチ処理、ゲーム、IoT、ロボット、科学計算、人工知能、機械学習、ディープラーニングとホントに出来るのかと思うぐらいの数があります。
個人的にはデスクトップアプリかバッチ処理でクローラーや人工知能や機械学習といった事に使われるのが多いかと思います。
その類の本は沢山あるので目にする機会はあると思います。


###**Pythonはオープンソースでマルチプラットフォーム対応**
そんなPythonは「**スクリプト言語**」（本によっては「**インタプリター言語**」とも）という種類に分けられます。これはプログラムを作成するとそのまま実行することが出来るという特徴があります。逆にそのまま実行できない（アプリケーション（実行ファイル本体であるexeファイルの事）を作成する必要がある）言語もあります（**コンパイラ型言語**と言います）。※Pythonはアプリケーションを作成して実行することも可能です。

また、Pythonはマルチプラットフォーム対応言語なのでWindows/macOS/Linuxなど、さまざまなOSやプラットフォームで動作させることが出来ます。

###**Pythonはオブジェクト指向言語**
Pythonはオブジェクト指向言語に分類されます。最近のプログラミング言語ではこの「**オブジェクト指向**」という言葉がよく使われます。ではオブジェクト指向というのはどういったものなのかという事になります。
オブジェクトとは「**もの**」の事を指します。「もの」とは現実ではスマホであったりPCであったり、食べ物、飲み物など様々なものの事を指しますが、オブジェクト指向では「もの」とは「**プログラムの対象**」というすごく抽象的なことを指します。
wikiではこのオブジェクトの事を以下のように記述してあります。
>関連するデータを束ね、代入、演算、手続き（関数やメソッドなど）を介した受け渡しといった操作の対象にでき、またメッセージの受け手になれる実体をオブジェクトと呼ぶ。

なかなかイメージするのが難しいかと思います。プログラム上で使う大抵のものはオブジェクトだと思ってもあながち間違いではないと言えます。
それぞれのオブジェクトはデータと処理という属性（アトリビュート）を持っています。データの事を「**プロパティ**」処理の事を「**メソッド**」と呼びます。
例えば、RPGゲームの主人公で考えると「HP」「MP」「STR」などのステータスはプロパティ、「移動する」「話す」等の行動はメソッドと言えるかもしれません。

さて、それではそのオブジェクトはプログラム上ではどういった感じでしょう。
####**■クラスとインスタンス**
クラスは「雛型」、インスタンスは「クラスの実態」と考えることが出来ます。先述のRPGゲームの主人公に置き換えると、クラスは「プレイヤーがプレイする前の状態」、インスタンスは「プレイを始めて操作する主人公」といった感じでしょうか。
プログラム上ではクラスをインスタンス化してそれを扱います。
クラスの中には例えば「HP」「MP」「STR」などのステータスもプロパティとして存在し、「移動」「話す」といったメソッドも存在します。
プログラムで扱うオブジェクトは全てがクラスをインスタンス化したオブジェクトを扱います。クラスそのものを扱うことはありません。

####**■継承**
オブジェクト指向言語のメリットとして「継承」という機能があります。これは既に作成済みのクラスを再利用してあらたなクラスを作成することです。再利用することで同じ様な機能を持つ別のクラスを楽に作ることが出来ます。例えばRPGゲームだと街中の村人や店員など同じ状な動きをするキャラクターは多く存在します。それらは共通の動作を別に作成し、継承という形で再利用することで開発やメンテナンス等を楽に出来るようになります。
継承元のクラスを「**スーパークラス**」、継承先のクラスを「**サブクラス**」と呼びます。



ざっくりとした説明ですがPythonはこんな言語です。
これを読んでPythonってこんな事ができるんだとか、こんな言語なんだというのがなんとなくでもいいので感じて貰えると嬉しいかなと。
Tomcat8にてWebアプリケーションマネージャ画面を表示する

#Tomcat8でマネージャ画面を出すと404エラー

Webアプリのセッション数をざっと調べたくWebアプリマネージャ画面を出そうとしたのですがなかなか表示されなかった時の対応策

##起動URL
http://localhost:8080/manager/html

##現象
404エラーで表示されない

##環境
pleiades all in one 4.4
eclipseにてTomcatサーバを作成している。

##対応策
eclipseのプロジェクトエクスプローラーの「Servers」プロジェクトの「tomcat-users.xml」にタグを追加

```tomcat-users.xml
<tomcat-users version="1.0" xmlns="http://tomcat.apache.org/xml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://tomcat.apache.org/xml tomcat-users.xsd">
  <role rolename="manager-gui" />
  <role rolename="manager-status" />
  <user username="admin" password="pass" roles="manager-gui,manager-status" />
</tomcat-users>
```
同じく「server.xml」に以下のタグを追加

```server.xml
<Engine>
  <Context docBase="tomcatのインストールディレクトリ\webapps\manager" path="/manager" privileged="true" reloadable="true" />
</Engine>
```


サーバを再起動してURLにもう一度アクセスする。
【EC-CUBE3系】マイページの注文履歴を日付順に表示させる

# 概要
EC-CUBE3系のマイページの「注文履歴」が、デフォルトではオーダーに割り振られる`id`（注文番号）順になっている。
注文番号をランダムに払い出すプラグインなどを利用している場合、履歴の表示順序がバラバラになってしまうので対応したときのメモ。

# 対処内容
下記ファイルを修正

```php:src/Eccube/Repository/OrderRepository.php
    /**
     * @param  \Eccube\Entity\Customer $Customer
     * @return QueryBuilder
     */
    public function getQueryBuilderByCustomer(\Eccube\Entity\Customer $Customer)
    {
        $qb = $this->createQueryBuilder('o')
            ->where('o.Customer = :Customer')
            ->setParameter('Customer', $Customer);

        // Order By
        //$qb->addOrderBy('o.id', 'DESC');
        $qb->addOrderBy('o.create_date', 'DESC');     ←ここを日付に変更

        return $qb;
    }
```

それだけです。
【小ネタ】Amazon Data Lifecycle Manager(DLM)でEBSのバックアップを簡単に世代管理する

Amazon Data Lifecycle Manager(DLM)というEBSのバックアップを簡単に世代管理出来るサービスがリリースされていたのを今更知ったので試してみたメモ。

## これまでのEBSバックアップ
これまで、EBSのバックアップを組むのに一番簡単な方法は、
CloudWatchEventsで「EC2 CrateSnapchot API  呼び出し」をスケジュール実行するものだった。

この方法でも問題なくバックアップは取れるのだが、
スナップショットの削除機能がないためバックアップに必要な世代管理(お掃除)は、
別スクリプトをlambda等で動かすか、手動でお掃除オペレーションをする必要があった。

## Amazon DLMによるバックアップ
一言で言うとライフサイクルポリシが組めるので、設定一つでバックアップの世代管理が出来るサービス。
今まで何かしらの方法で行っていた、古いスナップショットの削除まで面倒をみてくれる

### 【出来ること】

- 定期的なEBSのバックアップ
- バックアップの世代管理(古いボリュームの削除)

※指定した時間から1時間以内に始まるとのことでピッタリではないのでそこは注意が必要

### 手順

#### ①DLMを選択

![AA3004AA-2622-46AF-A06C-919F231977C3.png](https://qiita-image-store.s3.amazonaws.com/0/40850/863baf47-d099-a9ff-051a-62f0487fb2f3.png)


#### ②バックアップに必要な情報を入力

![54D29678-733B-402D-9D61-08138AB6F3C9.png](https://qiita-image-store.s3.amazonaws.com/0/40850/9012a5dd-1d4a-dca2-8d2d-0b83755a8f6e.png)


### ③バックアップされたスナップショット

こんな感じでDLMで作成したとわかる説明がつく

![4FAF960E-0F20-4092-B3D8-8E2EECA3430E.png](https://qiita-image-store.s3.amazonaws.com/0/40850/0d30c30a-3c86-3f43-8a3a-c3310fbb62ca.png)


簡単にEBSのバックアップの世代管理が出来て最高だった

## 参考

[Amazon EBS スナップショットライフサイクルの自動化 - Amazon Elastic Compute Cloud](https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/snapshot-lifecycle.html)
[PHP5.6]Unable to load dynamic library '/usr/local/opt/*/*.so' という警告を消す方法



##はじめに（事の経緯） 


PHPファイルをターミナルから、実行しようとすると、
以下の警告が出てきました。
(macOS High Sierra です。）
`
$ php -v 
`

で、

```
>PHP Warning:  PHP Startup: Unable to load dynamic library '/usr/local/opt/php56-pthreads/pthreads.so' - dlopen(/usr/local/opt/php56-pthreads/pthreads.so, 9): image not found in Unknown on line 0

Warning: PHP Startup: Unable to load dynamic library '/usr/local/opt/php56-pthreads/pthreads.so' - dlopen(/usr/local/opt/php56-pthreads/pthreads.so, 9): image not found in Unknown on line 0
```

&nbsp;
という警告が出ました。
ハマりまくってさっきようやく消せたので、メモとして残します。

&nbsp;
自分の場合は、opt の中身が php56-pthreads だったのですが、
この部分は、人それぞれ、入れたものによって違うものが表示されるかもしれません。
&nbsp;

（検索＆トラブル解決の際には、
/php71-intl/intl.so, 9 でエラーになった方のを参考にさせていただきました。）

&nbsp;
さて、php56-pthreadsがいったいなんなのか、すぐに思い出せなかったのですが、
よくよく調べてみると、ビットゼニーという仮想通貨のCPUマイニングを
試してみた時に、入れたものだと分かりました。

&nbsp;
なので、なぜ「not found」なのかよくわからなかったのですが、
何か操作した時に消えた（壊れた？）ならもう一度
再インストールすればいいのかなと思い、


&nbsp;


```
$ brew install php56-pthreads
```


&nbsp;

を実行しました。
しかし、結果は、

&nbsp;


```
Error: No available formula with the name "php56-pthreads" 
==> Searching for a previously deleted formula (in the last month)...
Error: No previously deleted formula found.
==> Searching for similarly named formulae...
Error: No similarly named formulae found.
==> Searching taps...
==> Searching taps on GitHub...
Error: No formulae found in taps.
```

&nbsp;

というエラーが出てしまいました。

&nbsp;

##解決のためにやった事
&nbsp;

&nbsp;

```

$ mv /usr/local/etc/php/5.6/conf.d ~/DeskTop/backup
```
&nbsp;

これを実行する事で、警告＆エラーが消えました。


&nbsp;
/usr/local/etc/php/5.6 にあるconf.d というフォルダを
削除する事で、直りました。
&nbsp;
いきなり消すのは勇気がいるので、デスクトップにbackupという
空のフォルダを作ってその中にconf.d を移動させました。
&nbsp;

conf.d の中には [ext-pthreads.ini, ext-opcache.ini]
という２つのファイルが入っていました。
&nbsp;

なので、conf.d の中にたくさんファイルがあれば、
その数だけ、エラーが返ってくる感じだと思います。
&nbsp;

(↓こちらの記事を参考に作業しました・感謝）

[homebrewでphp71-*系がインストールできなくなってた](https://rskull.hateblo.jp/entry/2018/04/06/164236)

&nbsp;
##原因




ある時(2018/3/31 らしい）をさかいに
homebrew/php が廃止（deprecate）された事が原因らしいです。

&nbsp;


で、中身もろもろは、homebrew/core に移されたらしいのですが、
/usr/local/etc/php/5.6/conf.d の中に、
古い設定が残ってしまっていたのが、よくなかった様です。

&nbsp;
なので、2018/3/31以前にhomebrewでPHP（バージョン問わず）を
インストールして、


&nbsp;
しばらくPHPさわらずにいて、
久しぶりに動かそうとすると、
この警告＆エラーに遭遇してしまうみたいです。


##念のために　homebrew/php もuntapしました。 

&nbsp;

廃止されたhomebrew/php も、ない方が良さそうなので、
ついでにuntapしておきました。

&nbsp;

```

$ brew untap homebrew/php
```


&nbsp;
これで解決。

&nbsp;


晩飯後にはじめて、サクッと終わるはずが、
夜中の３時までかかってしまった。

&nbsp;

というか本当にやりたかった事は、
何もできずに終了となりました。
（妙な満足感はあり。）


&nbsp;

###参考にさせて頂いた記事



[homebrewでphp71-*系がインストールできなくなってた](https://rskull.hateblo.jp/entry/2018/04/06/164236)


[Mac OS Homebrew の PHP 関連の formulae 変更されて大変だった (2018年4月)](https://qiita.com/katzueno/items/5e65ddc65f09cc1e1ec7)


[【Homebrew】PHPの設定に注意！〜Homebrew/phpの廃止〜](https://qiita.com/33yuki/items/8621a476533767ccb1c4)



助かりました！
これらの記事がなかったら、
今もグーグル翻訳と英語サイトを往復していた気がします。
React Native & Expo v31 で TypeScript を使ってみる

# はじめに
React Native 0.57以降でTypeScriptがデフォルトサポートされたこともあり、最近はもっぱらTypeScriptをつかっていたのですが、
expo v31でもTypeScriptがデフォルトサポートとなったようなので、試しに立ち上げてみます。

# 導入
### 1) まずはプロジェクトの作成
React Nativeの公式ドキュメント通りにexpo-cliのインストールとプロジェクトを作成

https://facebook.github.io/react-native/docs/getting-started

```
yarn global add expo-cli
// npmなら　npm install -g expo-cli

expo init AwesomeProject
```

### 2) typescript導入前に起動してみる
```
yarn ios
```

動いた
![image.png](https://qiita-image-store.s3.amazonaws.com/0/206623/0bc13980-239a-ad32-6731-ce9315dda611.png)

### 3) typescriptのインストール
```
yarn add --dev --exact typescript
yarn add --exact tslib
```
※ react-native-typescript-transformerやエンドポイントの設定等は不要

### 4) 型定義やtsconfigなど
```
yarn add --dev --exact @types/react @types/react-native @types/expo @types/expo__vector-icons
```

``` json:tsconfig.json
{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "importHelpers": true,
    "jsx": "react-native",
    "lib": [
      "es2017"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "noEmitHelpers": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "strict": true,
    "target": "es2017"
  },
  "exclude": [
    "build",
    "node_modules"
  ],
  "types": [
    "typePatches"
  ]
}
```
参考のgithubを一旦そのまま(よしなに普段と同じに)


### 5) ファイルの拡張子をtsxに変更
![image.png](https://qiita-image-store.s3.amazonaws.com/0/206623/1e081119-ec52-6e83-6ec7-c4057b63fe43.png)
そのままだと警告出ますが一旦特に変更せずそのまま。。

### 6) 起動しなおしてみる & ファイルを変更してみる
動いた！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/206623/aedca7f8-9698-8402-e50e-32e43732afa1.png)

# 所感：
特に何も考えずにそのまま動きました。。
jsとのファイル混在もできるので部分的に導入し始めるというのも可能かもしれないです。

# 今後にむけて
ejectしても特に問題ない?か確認

# 参考：
https://github.com/janaagaard75/expo-and-typescript
laravel-adminのeditorにhtmlタグを許容させる

# 背景
laravel-adminでhtmlページを入稿する機能を作ることってよくある（？）と思うのですが、
標準で利用できるeditorのCKEditorだと、htmlタグがエスケープされてしまう。

その結果思った通りの入稿ができない

その対策について

# 環境

- laravel 5.5
- php 7.1
- laravel-admin 1.5.14

# どういうことか？

フレームワークにのっとってformを作成する際に

```
$form->editor
```

って記述しておくと、laravel-adminが用意してくれているeditor(CKEditor)がformとして以下のように表示されるのですが、

<img width="528" alt="スクリーンショット 2018-11-08 15.32.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/105662/84cb31ed-60fe-443d-9626-0879bd9e82a6.png">

#### これにhtmlタグ入力すると自動でエスケープされます。


```
<strong>トピックス</strong>
```

って入力してpostすると

```
&lt;strong&gt;トピックス&lt;/strong&gt;
```
ってデータがエスケープされてまう・・・。


# 対処方法

標準だとform描画の際には以下のクラスのrenderが呼ばれるのですが、

```php:Editor.php
<?php

namespace Encore\Admin\Form\Field;

use Encore\Admin\Form\Field;

class Editor extends Field
{
    protected static $js = [
        '//cdn.ckeditor.com/4.5.10/standard/ckeditor.js',
    ];

    public function render()
    {
        $this->script = "CKEDITOR.replace('{$this->column}');";

        return parent::render();
    }
}
```

な感じでレンダリングの際にCKEDITORに差し替えているのですが、
このCKeditorでは当然様々なconfigを設定することが可能でして

```js
  CKEDITOR.replace('{$this->column}', {
    allowedContent: true,    // クラスの記述を許容するか
    basicEntities: false,    // 自動エスケープオフ
    entities : false         // 自動エスケープオフ（これも）
  });
```

な感じでreplaceの際に第二引数にconfigを渡すことができます。
（ざっくりした説明なので詳しいオプションの意味は公式で確認して見てください）


```php:HtmlEditor.php

namespace App\Admin\Extensions\Widgets;

use Encore\Admin\Form\Field;

class HtmlEditor extends Field
{
    /**
     * @var string
     */
    protected $view = 'admin::form.editor';

    /**
     * @var array
     */
    protected static $js = [
        '//cdn.ckeditor.com/4.5.10/standard/ckeditor.js',
    ];

    /**
     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
     */
    public function render()
    {
        $this->script = "
            CKEDITOR.replace('{$this->column}', {
                allowedContent: true,
                basicEntities: false,
                entities : false
            });
        ";

        return parent::render();
    }
}
```

で、`app/Admin/bootstrap.php`から、上で作成したクラスを使うように指示する

```php:bootstrap.php
use App\Admin\Extensions\Widgets\HtmlEditor;

// form->editorの対応クラスを上書き
Encore\Admin\Form::extend('editor', HtmlEditor::class);
```

これでformからの入力がエスケープされずにパスされるようになったぞ。
(逆いうとエスケープされないので気をつけてね）

# 補足
## なんでプロパティのviewを設定しているの？
設定しないとフレームワークさんがおそらくクラス名から`htmleditor`というviewを探そうとして死ぬからです。
今回は既存のeditorをそのまま使うので意図的に明言しておきます。

## 継承しません
Editorを継承した方が綺麗だったんですが、そうするとrender()で設定したconfigが上書きされてしまいます。
で、vendorのファイルには手を入れたくないので継承はやりません。
Android Studioをインストールした後、SDKをが見つからない、インストールされない

# 環境
Mac OSX Mojave 10.4.1

# プロキシ環境下にだとSDKが最初インストールできない

プロキシ環境下だと、SDKを取りに行けないようなので、プロキシ設定をしてあげる必要がある

1. Android Studioを起動
2. 右下にある「Configure」の「Preference」をクリック(Start a new Android Projectとかある画面)
3. Appearence & Behavior > System Settings > HTTP Proxy でプロキシを設定する。
4. Apply
5. Appearence & Behavior > System Settings > Android SDK のAndroid SDK Loacation の Editを押すと、インストールできるようになってるはず。もしくは再起動して、もう一度SDKを設定するところをやる。
PerlフレームワークCatalystとVue.jsを両立させた時にハマった話

PerlフレームワークのCatalystのtemplatetoolkitファイルとVue.jsの記述はそのまま書くとハマります。

# 現象
```sample/report.tt
mounted () {                                             
  this.$nextTick(() => {                                
    const canvas = document.getElementById('daily_graph')
    this.chart = new Chart(canvas, {                     
      type: 'bar',                                       
      data: レポートデータ
      options: オプション
    })                                                   
  })                                                     
}                                                        
```

こんな感じでChart.jsを描画する処理を書いていました。オプションとかの書き方はChart.jsの公式リファレンス参照。
記述としては問題ないのですが、これをブラウザで実際に動かすと。。。

![キャプチャ4.PNG](https://qiita-image-store.s3.amazonaws.com/0/178351/da70b30b-38ee-8dd8-e949-e0821b68b0ce.png)

いやいや僕の書いてた `$nextTick` はどこ行ったんだよ。。 なんと消えてます。
調べても全く解決方法が出てこないので色々試したら解決しました

# 解決

\$マークの前にエスケープのバックスラッシュを追記します

```sample/report.tt
mounted () {                                             
-  this.$nextTick(() => {                                
+  this.\$nextTick(() => {  
    const canvas = document.getElementById('daily_graph')
    this.chart = new Chart(canvas, {                     
      type: 'bar',                                       
      data: レポートデータ
      options: オプション
    })                                                   
  })                                                     
}                                                        
```

![キャプチャ5.PNG](https://qiita-image-store.s3.amazonaws.com/0/178351/261c0875-dbfb-7943-20cb-6c294a40f88e.png)

表示されましたね！

## なんで？
正直わかんないです。ですが、Perlにとって\$マークはスカラー値の変数を意味するため$nextTickという変数を展開しようとして、そんなものはPerl側で記述してないので空になっていると思ってます（合ってるか知りません）

これ結構大問題で、$emitとかも全部エスケープする必要あります。早く.vueファイルに移行したいな～・・・ 
.ttファイルとの共存は難しそうです。
Excelのシートをcsvに変換する方法

#Excelのシートをcsvに変換する方法
研究で使うデータをExcel形式でもらいました。
実験的にopenpyxlモジュールを使って加工していたのですがやはりモッサリ具合に耐えきれず、結局はcsvに変換してpandasで加工することにしました。


さて、csvに変換する方法を説明する前に注意点があります。
##csv上で行いたい加工をあらかじめイメージしてから変換する
CSVファイルは容易に加工できて便利ですが、Excelでしかできないこともあります。
例えばセルの塗りつぶしはエクセルでしかできませんね。
これらのExcelオンリーな手法はCSVで加工する際に使えないことに留意して、一体どこまでCSV上で行うべきかを見極めることが重要です。
そしてやっと本題です。

##ExcelシートをCSV出力する方法
一瞬です。
出力したいシートを選択(=表示)する
タスクバーから「ファイル」をクリック
「エクスポート」をクリックし、「ファイルの種類の変更」を選ぶ。
「その他のファイルの種類」から「CSV(カンマ区切り)」を選択する

以上です。ちょーかんたん。
あとは適切なディレクトリにCSVファイルを移動させれば、進捗生み放題ですね！！
MacでchmodがOperation not permittedの時はfile flagも確認しよう


#事象
Mac(High Shierra)で、ファイルをchmodすると以下のエラーになりました。

```
$ls -l
-r-xr-xr-x  1 myuser  staff  655 11  8 14:46 hogehoge.txt

$sudo chmod 775 hogehoge.txt
chmod: Unable to change file mode on hogehoge.txt: Operation not permitted
```

SIPの保護対象ファイルでもないはずだし、はて？

#原因

ファイルがロックされているだけでした。
Unixのノリでファイルを扱うと、時々Mac的な落とし穴にはまります。

```
$ls -lO
-r-xr-xr-x  1 myuser  staff  uchg 655 11  8 14:46 hogehoge.txt
```
Oオプションでファイルフラグを表示させています。

#対処

chflagsでロックを解除します。

```
$chflags nouchg hogehoge.txt

$ls -lO
-r-xr-xr-x  1 aa516435  staff  - 655 11  8 14:46 hogehoge.txt
```

# 参照
[Why does chown report “Operation not permitted” on OS X?](https://superuser.com/questions/279235/why-does-chown-report-operation-not-permitted-on-os-x)
Amazon EFSをEC2から使ってみたメモ

伸長する夢のストレージEFS、気になっていたんですがはじめて使ってみました。忘れないためのメモ程度です。

https://aws.amazon.com/jp/efs/
数千台のEC2から共有マウントできるとか。すごい！

# セットアップ

AWSのWebコンソールからVPCや性能を指定するだけであっさりできました。
こんな感じのNFSホスト名が生成されます: `fs-(固有のID).efs.ap-northeast-1.amazonaws.com`

* パフォーマンスモード`最大I/O`は多数のインスタンスからマウントして共有するようなケースで選択するとよいとのこと。
* スループットモード`プロビジョニング済み`は、スループットにムラがあると困るとき(ゲームなど？)に設定するといいのかなと思います。

# EFSマウントヘルパー

NFS互換なので気軽に考えていましたが、マウントを簡単にするEFSマウントヘルパーというソフトウェアが提供されています。

暗号化や、最適なマウントパラメータなど、調べたらなんとかなるんだろうけど、手間のかかる部分をアシストしてくれるようです。

EC2インスタンスであれば、コマンドひとつでインストールされます。

```bash
sudo yum install -y amazon-efs-utils
```

詳しくは: amazon-efs-utils ツールを使用する
https://docs.aws.amazon.com/ja_jp/efs/latest/ug/using-amazon-efs-utils.html

# 常時マウント

通常は`/etc/fstab`にエントリを記述しておいて、再起動しても自動でマウントされるようにしておくことが多いでしょう。

## EFSマウントヘルパーを使う場合

EFSマウントヘルパーを使うと短い記述で済みます。

詳しくはこちらに記載されています: Amazon EFS ファイルシステムの自動マウント
https://docs.aws.amazon.com/ja_jp/efs/latest/ug/mount-fs-auto-mount-onreboot.html#mount-fs-auto-mount-update-fstab

```text:/etc/fstab
fs-(固有のID).efs.ap-northeast-1.amazonaws.com:/ /mnt/efs efs defaults,_netdev 0 0
```

ファイルを置いて試してみます。

```bash
# /etc/fstabに基づいてマウント
$ sudo mount -a
# ファイルを置いてみる
$ touch /mnt/efs/test.txt
$ ls /mnt/efs
test.txt
# アンマウントしてlsしてみる
$ sudo umount /mnt/efs
$ ls /mnt/efs
# ファイルなし
# もう一度マウントしてls
$ sudo mount -a
$ ls /mnt/efs
text.txt
```
これで`text.txt`がしっかりEFS上に作成されたことが確認できました。

## EFSマウントヘルパーを使わない場合

素のLinuxからNFSマウントする場合の方法はこちらに記載されています。

自動的にマウントする
https://docs.aws.amazon.com/ja_jp/efs/latest/ug/mount-fs-auto-mount-onreboot-old.html

```text:/etc/fstab
fs-(固有のID).efs.ap-northeast-1.amazonaws.com:/ efs-mount-point nfs4 nfsvers=4.1,rsize=1048576,wsize=1048576,hard,timeo=600,retrans=2,_netdev,noresvport 0 0
```

# EC2インスタンスの誕生とともにマウント

[上記で紹介したページ](https://docs.aws.amazon.com/ja_jp/efs/latest/ug/mount-fs-auto-mount-onreboot.html#mount-fs-auto-mount-update-fstab)では、EC2インスタンスの誕生と同時にマウントしておくユーザーデータも紹介されています。

インスタンスごと立ち上げて終わったら削除するような、イミュータブルなバッチ処理にも使えますね。便利！

```text
#cloud-config
repo_update: true
repo_upgrade: all

packages:
- amazon-efs-utils

runcmd:
- file_system_id_01=fs-12345678
- efs_directory=/mnt/efs

- mkdir -p ${efs_directory}
- echo "${file_system_id_01}:/ ${efs_directory} efs tls,_netdev" >> /etc/fstab
- mount -a -t efs defaults
```
생성자 함수 "new"


생성자 함수는 기술적으로 정규 함수입니다. 그래도 두 가지 규칙이 있습니다.

1.이름은 대문자로 시작합니다.
2.그들은 단지 "new"운영자 와 함께 실행되어야합니다 .

```javascript:file.js
function User(name) {
    this.name = name;
    this.isAdmin = false;
};

let user = new User("Jack");
alert(user.name); // Jack
alert(user.isAdmin); //false
```
new User(...)다음과 같이됩니다.

```javascript:file.js
function User(name){
    //this = {};

    // add properties to this
    this.name = name;
    this.isAdmin = false
}

//new User("Jack")는 다음과 같은 객체이다
let user = {
    name: "Jack",
    isAdmin = flase
}
```
우리가 다른 사용자를 만들려면 이제, 우리는 호출 할 수 있습니다 new User("Ann"), new User("Alice")등등합니다. 매번 리터럴을 사용하는 것보다 훨씬 짧고 읽기 쉽습니다.

재사용 가능한 객체 생성 코드를 구현하는 것이 생성자의 주요 목적입니다.

기술적으로 모든 함수를 생성자로 사용할 수 있습니다. 즉 : 모든 함수를 실행할 수 있으며 new위의 알고리즘을 실행합니다. "대문자 우선"은 기능이 실행되어야 함을 명확히하기위한 일반적인 합의입니다.

```javascript:file.js
function User(name){
    //this = {};

    // add properties to this
    this.name = name;
    this.isAdmin = false
}

//new User("Jack")는 다음과 같은 객체이다
let user = {
    name: "Jack",
    isAdmin = flase
}


function BigUser() {
    this.name = "Johin";
    return {
        name: "Godzilla"
    }
}

alert(new BigUser().name);

function smallUser() {
    this.name = "John";
    return;
}
alert(new smallUser().name); //John
```

괄호생략
인수가 없는경우 괄호를 생략할수 있다

```javascript:file.js
let user = new User; // <-- no parentheses
// same as
let user = new User();
```
괄호를 생략하는 것은 "좋은 스타일"로 간주되지 않지만 구문에 의해 허용됩니다.



##생성자의 method
```javascript:file.js
function User(name) {
    this.name = name;
    this.sayHi = function() {
        alert("My name is :"+this.name);
    }
}

let john = new User("John");
John.sayHi();

/*
john = {
    name:"John",
    sayHi: function() {
        alert("My name is":+this.name);
    }
}
```
```javascript:file.js
let obj = {};
function A() {
    return obj;
}

function B() {
    return obj;
}

let a = new A();
let b = new B();

alert(a == b
```

```javascript:file.js

function A() {
    
}

function B() {

}

let a = new A();
let b = new B();

alert(a == b
```
프리미티브의 메쏘드

```javascript:file.js
// 프리미티브는 가능한한 빠르고 가볍다.
let john = {
    name: "John",
    sayHi: function() {
        alert("Hello");
    }
}

john.sayHi(); //Hello
```


```javascript:file.js
//프리미티브의 메쏘드
let str = "Hello";
alert(str.toUpperCase()) // HELLO 
//문자열 str 는 프리미티브이다.

let n = 1.23456;
alert(n.toFixed(2)); // 1.23
```


```javascript:file.js
puts 'code with syntax'
```
DropboxでVagrantフォルダを同期する方法


複数のMac間でVagrant利用してるコードをDropboxで同期しようと思ったんですが、そのままだと仮想マシンの情報まで同期されてしまって困ったことになります。

具体的になにがおきるかというと仮想マシン情報のはいった .vagrantフォルダまでDropbox経由で同期され、Mac-Aでvagrant upして作成された仮想マシンが当然Mac-Bではみつからず、Mac-Bでvagrant upすると .vagrantフォルダはこんどは Mac-B用に書き換わってMac-Aでまた仮想マシンみつからなくなるってループになります。

でもってこれを解消する手段として ```VAGRANT_DOTFILE_PATH``` って環境変数が用意されてるのでこれを設定します。

私は下記を .bashrc に書きました。

```
# vagrant
export VAGRANT_DOTFILE_PATH=.vagrant-$HOSTNAME
```

これで各マシン毎にことなるフォルダに仮想マシン情報書き込んでくれるのでVagrantフォルダごと同期しても問題無くなります。

参考
- [Environmental Variables - Vagrant by HashiCorp](https://www.vagrantup.com/docs/other/environmental-variables.html)
- [Dropboxで複数マシン間でVagrant開発環境を同期している時に、vagrant upで既存仮想マシンが利用されない問題 - Qiita](https://qiita.com/hashcc/items/438ad3cd81f16bc6d6fa)
【メモ】Atomの設定:選択行の色

# 概要
### 環境
MacBook Pro/Mojave/Atom

### やりたいこと
いくつかテーマを変更してみたけど、どれも結局選択行のグレーが薄くて見にくいので変える。

# 手順
### スタイルシートの変更
以下をクリックして、編集画面(というか、ファイル)を開く
![image.png](https://qiita-image-store.s3.amazonaws.com/0/95118/d3bd3fe8-f735-92a2-918f-46e4b2d40a71.png)

以下を追記する。色は適当にお好みで。

```
atom-text-editor::shadow {
  .gutter .cursor-line {
    background-color: fade(cyan, 14%);
  }
  .highlights {
    .selection .region {
      background: fade(yellow, 10%);
    }
  }
}
```

# 確認
無事変わっていることを確認
![image.png](https://qiita-image-store.s3.amazonaws.com/0/95118/da72880d-4543-5268-b22d-4b3042d338f1.png)

# まとめ
クラムシェルで使っているからモニタはRetinaでは無いのだが、もしかすると本体(Retina)で開いたら気に入らないかも？
Oracle Database/APEXでPython/JavaScriptを使う

# 概要

* [Oracle Database Multilingual Engine (MLE)](https://oracle.github.io/oracle-db-mle/releases/0.2.7/) と呼ばれる機能により、Oracle Database/APEXでPythonやJavaScriptが使えるようになった
* SQL*Plus等から実行可能
* Oracle Database 12cの実験的な機能
* Dockerイメージ、Virtualboxイメージで提供されている
* 2018年12月まで、https://apexea.oracle.com でMLE対応APEXサイトの無料のプレビュー版に登録可能

# サンプル

APEXのSQL Commandsから実行した例

## Pythonを実行

![apex_python.png](https://qiita-image-store.s3.amazonaws.com/0/23861/add266fd-5aa9-53a0-5f64-45b3a30c69eb.png)

## JavaScriptを実行

![apex_js.png](https://qiita-image-store.s3.amazonaws.com/0/23861/f4000736-e76c-1bcc-caeb-416a138db95a.png)

## PL/SQL内にJavaScriptを埋め込むことも可能

![apex_plsql_js.png](https://qiita-image-store.s3.amazonaws.com/0/23861/ff3652ed-1d97-d012-8922-039559a9a802.png)
Excelの日付のFloat値

# Excelで日時を標準にしたらFloat値が出てくる。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/11203/b43708d1-18c7-3749-5fb5-4de52514219f.png)
このFloat値はどういう値なのか？

# 整数部は日付

1990年1月0日からの経過日数。1990年1月1日だと`1`になる。
ただし1990年2月29日という存在しない日付もカウントしてる。
なので2018年11月8日は`43412日経過`している。

# 小数部は時刻

セルの時刻部(14:51)を秒数にしたものを`24h x 60min x 60sec => 86400sec`で割ったもの。

```
14:51:00 = 14 * (60 * 60) + 51 * 60 = 53460
53460 / 86400 = 0.61875 (最初のスクショの小数部に一致！）
```

# Floatから日時を復元する

ExcelをGoで読みとる際に日付変換したかったので、以下の様に解決しました。

```golang
func convertExcelDateFloat(excelDateFloat float64, dateFormat string) string {
	pastDay := int(excelDateFloat)
	pastSec := excelDateFloat - float64(pastDay)
	date := time.Date(1900, 1, 1, 0, 0, 0, 0, time.Local)

	// Excelでは 1990/1/0 を開始基準として経過日数を整数部で数えている。つまり1990/1/1は1日経過している。
	// 加えて存在しない 1990/2/29 も経過日数に含まれているので-2日を差し引いた経過日数を足す
	date = date.Add(time.Duration(pastDay-2) * time.Hour * 24)

	// 小数部は時刻部を秒変換したのものを24時間秒(24h * 60m * 60s = 86400s)で割ったものとなっている
	// なので"小数部 * 86400 = 経過秒"に復元したものを足す
	date = date.Add(time.Duration(pastSec*86400) * time.Second)
	return date.Format(dateFormat)
}
```
KVOで前回と値が異なる場合だけ処理を行う

KVOを行う場合、前回と値が同じであれば処理をスキップしたいことがあります。
KVO自体には重複ガードを行う機構はないので、NSKeyValueObservingOptionNewとNSKeyValueObservingOptionOldを設定して一つ前の値も取得します。

```objc
[self addObserver:self forKeyPath:@"contentSize" options:NSKeyValueObservingOptionNew | NSKeyValueObservingOptionOld context:nil];
```

observeValueForKeyPathでchange辞書の中にoldValue/newValueが含まれているのでこれを比較すればOKです。

```objc
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {
    if([keyPath isEqualToString:@"contentSize"]) {
        CGSize oldValue = [[change valueForKey:NSKeyValueChangeOldKey] CGSizeValue];
        CGSize newValue = [[change valueForKey:NSKeyValueChangeNewKey] CGSizeValue];
        if (oldValue.height == newValue.height && oldValue.width == newValue.width) { return; }
        // do somethings
    }
}
```
Angular Material + Font Awesome使い方メモ

[Angular Material](https://material.angular.io/)
と
[Font Awesome](https://fontawesome.com/)
を組み合わせたときの使い方メモです。

いつものように、CDNからCSSを読みこみます。

```html:index.html
<link rel="stylesheet"
 href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
 integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
 crossorigin="anonymous">
```

コンポーネントHTMLにはこのように書きます。

```html:
<mat-icon fontSet="fa" fontIcon="fa-address-book"></mat-icon>
```

アイコンの名前はチートシートから参照します。
[Font Awesomeチートシート](https://fontawesome.com/cheatsheet)
C言語で配列を使ったプログラミング学習

こんにちは。

本日は配列を組んだものを出力してみるプログラムを書きました。

配列をfor構文で出力するといった書き方や

scanfを使って配列に文字を入力して

入力した文字列を出力するというような形の

プログラムを書いていました。

本に書かれているサンプルプログラムを

手入力してデバックしていたので

今日はサンプルコードは載せません。

C言語も最初は易しかったのが

次第に難しくなってきています。

とは言っても、難しく感じるのは

基礎を完全に理解していないから

だと思うんですね。

だから、やさしいCを何度も何度も繰り返し

勉強し続けようと思います。

本がボロボロになるまでやろうと思います。

そのうち、apacheみたいに自分の作ったほかのプログラムが

動いているときのほかのディレクトリに入ってるCのプログラムが

エラーログをかき出す、みたいな仕組みも作れそうな予感がしています。

そうなったら楽しいだろうなぁと思っています。

やってみたいことをカタチにできる様に

日々努力です。
[Xcode]Breakpointを通過させて音を鳴らす

通常Breakpointを貼るとコード行に到着したタイミングで動作を停止させますが、そのまま通過させて一定の動作をさせることも出来ます。

<img width="304" alt="スクリーンショット 2018-11-08 14.26.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/24979/7c38ca89-ed6e-c0c9-2a09-c751e4a7063a.png">

Breakpointを右クリックしてEdit Breakpoint...を選択します。

<img width="489" alt="スクリーンショット 2018-11-08 14.26.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/24979/a8dc29af-1913-b2c4-7506-09afe4088bc7.png">

初期状態は上記のようになります。
`Automatically continue after evaluating actions`にチェックを入れるとBreakpointで動作を停止させずに通過するようになります。

<img width="482" alt="スクリーンショット 2018-11-08 14.26.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/24979/8e0bdd6a-cd6c-eb3b-027c-7080fbe6e594.png">

Actionはいくつかありますが、Soundを選ぶとMacから音が再生されるようになります。
UIの動作を確かめる際にはこのような設定にしておくと、コンソールを眺めるよりも直感的に慣性の感覚を知れたりします。

<img width="472" alt="スクリーンショット 2018-11-08 14.30.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/24979/2ff5b0f4-bb05-92e9-3d3f-daa28f493755.png">

Actionは他にもAppleScriptやShellを走らせたり、コード実行をすることも出来ます。
便利な機能なので使って作業効率を上げていきましょう。