OmniAICreator/Qiita-1.07M huggingface dataset:
Django2.1のadminページにChromeからログインしようとするとCSRFチェックに失敗するとき

# どんなときか

- ChromeはForbiddenだけどIE11だとなぜかアクセスできる
- 以下のようなログがAnaconda Promptに出力されている

```
Forbidden (CSRF token missing or incorrect.): /admin/login/
[18/Nov/2018 16:04:53] "POST /admin/login/?next=/admin/ HTTP/1.1" 403 2556
```

# 解決方法

- Chrome → 設定 → 詳細設定 → プライバシーとセキュリティ → コンテンツの設定 → Cookie
    - 「サイトにCookieデータの保存と読み取りを許可する」をオン
    - 「ブラウザを終了するまでローカルデータを保存する」をオン
    - 以上


# なぜか

CSRFという言葉と、その対策方法はなんとなく知っていたけど、実体験してみるのが一番理解が速いですね。
ブラウザにcsrftokenが保存されているのがわかります。

![WS000020.JPG](https://qiita-image-store.s3.amazonaws.com/0/240305/2f8d4a53-ca8a-4482-8df6-b163bfba39ba.jpeg)
Windows10にAsciiDoc(Asciidoctor)を導入。VSCode使用。

AsciiDocを教えてもらったので導入方法をメモしたいと思います。

#概要
１．Chocolateyインストール
２．Rubyインストール
３．Asciidoctorインストール
４．CodeRayインストール
５．VSCodeの拡張機能インストール
６．拡張機能の設定
７．使ってみる

#１．Chocolateyインストール
以下を参考にインストールします。
https://chocolatey.org/install

昔自分が書いた記事もあるので、英語でよくわからないという人はこちらもどうぞ。
https://qiita.com/shiro01/items/a300b6d5b572a314ce5e

#２．Rubyインストール
管理者権限でコマンドプロンプトを起動して、ChocolateyでRubyをインストールする。

```bash
> choco install ruby

> ruby -v
ruby 2.5.3p105 (2018-10-18 revision 65156) [x64-mingw32]
> gem -v
2.7.6
```

※rubyコマンドやgemコマンドがない(認識されていません)と言われた場合はコマンドプロンプトを再起動。

#３．Asciidoctorインストール、４．CodeRayインストール
gemコマンドを使用してAsciidoctorとCodeRayをインストールします。

```bash
> gem install asciidoctor
> gem install coderay
```

CodeRayはコードブロックでハイライトするためにインストールしています。

#５．VSCodeの拡張機能インストール
今回はVSCodeの拡張機能を使用してプレビューを見ながら編集したいと思います。
※ChromeやFirefoxにも拡張機能があるので入れるとプレビュー表示できます。

以下の拡張機能を検索してインストールする。
・[AsciiDoc](https://marketplace.visualstudio.com/items?itemName=joaompinto.asciidoctor-vscode)

#６．拡張機能の設定
初期設定ではプレビューにAsciidoctor.jsを使用しています。
教えてくれた人曰く、挙動がおかしい時があるそうなのでRuby版のAsciidoctorに変更します。

AsciiDocの説明にある通りsettings.jsonに設定を追加する。
> If you want to use the Ruby version of Asciidoctor
> you need to change the AsciiDoc.use_asciidoctor_js setting to false.

```bash
"AsciiDoc.use_asciidoctor_js": false
```

以下でも同じ設定ができます。
ショートカットキー`Ctrl + ,`で設定画面を開き、
設定の検索で「asciidoc」を入力して表示された設定画面から、以下のチェックを外して設定する。

> Ascii Doc: Use_asciidoctor_js
> □ Use asciidoctor js instead of the 'html_generator'

設定は以上です。

#７．使ってみる
ファイルはAsciiDocと認識させるために保存する必要があります。

##保存ファイルの拡張子
保存するファイルの拡張子は以下の3つが使えそうです。
・.asciidoc
・.adoc
・.asc

https://github.com/github/markup#Markups

ただし、.ascはVSCodeでのアイコンが鍵マークになっており調べてみたところ
[公開鍵のファイル拡張子](https://www.sophia-it.com/extension/content/.asc)としても使われていました。
![2018-11-17_15h58_55.png](https://qiita-image-store.s3.amazonaws.com/0/200585/239ffbed-0025-4ac0-d3c0-8936b795c4fb.png)

asciidocかadocを使用したほうが良さそうです。

##表示してみる
VSCodeでAsciiDocを記述したファイル開いた状態で、ウインドウの右上からプレビューを開きます。
![2018-11-17_16h14_00.png](https://qiita-image-store.s3.amazonaws.com/0/200585/6e3daa6a-2a34-9ec6-d949-b9f1e99ab8f7.png)

開くと以下のように表示されます。
![2018-11-17_16h48_44.png](https://qiita-image-store.s3.amazonaws.com/0/200585/74119a66-ab77-28d3-2d7a-23c1733a796a.png)

ソースコードをハイライトさせたい場合は以下を先頭に追加する必要があります。

```
:source-highlighter: coderay
```

#おわり
いい感じなので使って行こうかと思います。
とりあえず、今回は以上です。

#参考
http://asciidoc.org/
https://asciidoctor.org/
http://coderay.rubychan.de/
https://asciidoctor.org/docs/user-manual/
https://takumon.github.io/asciidoc-syntax-quick-reference-japanese-translation/
間違ってmasterにmergeしてしまった！！！💣

## まずはmasterをすぐにもとの状態に戻そう

- 他の人がmasterを取り込んで作業をし始めると大変だから

## gitのrevert機能を使おう！

- `git revert`でもできるけど、git hubの画面でも可能！

### ●revertとは
- 誤った既存のコミットを戻すコミットを行う
- 既存のコミット履歴が残る
- 特定のコミットに対して行う
- `git reset`では履歴が残らないのであまり使用しない


### ●手順
![image.png](https://qiita-image-store.s3.amazonaws.com/0/263845/cdcec709-2159-b064-5006-e51ce8cd1be3.png)
1. 「rebart」ボタンを押してもとに戻すコミットのPRを作成
2. 一旦developを前の状態に戻したら、誤ったPRのブランチと同じ作業をするブランチを切る
3. `git cherry-pick`でもとに戻す


### ●`cherry-puck`のやり方
1. `git log`をして戻したいコミットのハッシュコードをコピーしておく

```
git log
```

 - **ここで数コミットをpickするときは古い順にやっていくことに注意！**
 - **順番を間違うと変なコードになってしまいそう（コンフリクトも起こしそう）**

2. `git cherry-pick <コミットのハッシュコード>`を実行して順番にコミットを追加していく

```
git cherry-pick <コミットのハッシュコード>
```

3. `git push`して完了

```
git push
```
jsフレームワーク　3つの特徴

# はじめに
jQueryはjs書くならほぼ必須といわれていたライブラリです。
しかし、最近はjsフレームワークが台頭しはじめており、特に3大フレームワーク(Vue、React、Angular)という大きな流れができてからはそのいずれかで開発することが増えてきています。
今回はそんなjsフレームワークの3つの大きな特徴の説明をjQueryと比較して説明していきます。
jsフレームワークのコードはVue.jsで書きます。

# 3つの特徴
## データバインディング
データバインディングとは、DOMとデータを自動的に連携する技術です。
初期のjsフレームワークは後述する2つの機能がはいっていなくても、データバインディングの機能が入っています。
というより、データバインディングの機能があるからjsフレームワークといわれるくらいに基本的かつ重要な機能です。

例えば、画面の特定の要素の中に変数contentの中身を出したい場合を考えます。

```html:html(jQuery)
<div id="box">
</div>
```
```js:js(jQuery)
var content = 'test';
$('#box').text(content);
```

jQueryの場合、要素のオブジェクトを取得し、その中身にcontentの中身を設定をするというような書き方になります。
そのため、後からcontentの中身を変えても再度DOMに設定する処理が必要であり、更新を忘れた場合は画面に表示されているものと変数の中身に不整合が生じます。

```vue:html(Vue)
<div>
  {{ content }}
</div>
```
```js:js(Vue)
new Vue({
  data() {
    return {
      content: 'test',
    };
  },
});
```

一方、Vueの場合はhtmlで`{{}}`の中にバインディングしたい変数名を記載します。
これによって、contentの中身が変更されるとそれを自動的に画面側に反映してくれます。
DOMの更新をフレームワークに任せることができるため、プログラマは変数の中身の変更だけを考えればよくなります。

## 仮想DOM
仮想DOM(Virtual DOM、v-dom)は仮想的なDOMを扱うことで効率的にDOMの更新を行う仕組みです。

jQueryの場合、DOMを直接操作するため操作を行うごとに画面の更新処理が実行されます。
一方、仮想DOMの場合は一連の操作を行っている間は仮想DOMのほうを更新し、描画のタイミングで実際のDOMとの差分がある場所だけ更新を行います。
また、仮想DOMが実際のDOMと同じ構造である必要はないため、フレームワークに合わせた構造にすることで更新処理自体の高速化を行うというったこともしています。
![vdom.png](https://qiita-image-store.s3.amazonaws.com/0/115996/2c13b399-3a8e-63bc-9bf8-b9a10d6082ed.png)

## コンポーネント
コンポーネントは要素の集合とそれに対する操作を、1つの要素として扱う仕組みです。
コンポーネントの考え方はオブジェクト指向に似ており、関連する処理をコンポーネントの中に閉じ込めることで処理の切り分けがしやすくなったり、再利用をしやすくなるという利点があります。

![component.png](https://qiita-image-store.s3.amazonaws.com/0/115996/abe23aef-d83e-0340-86f1-220778859160.png)


最近では、Webコンポーネントという仕組みが出てきたため、フレームワークを使わなくてもコンポーネントを作ることができるようになってきました。
そのため、フレームワークと関係なくコンポーネントの考え方は重要になってくると思われます。

# まとめ
jsフレームワークの大きな特徴を3つ見てきましたが、DOMという概念を抽象化することで開発者が直接的にDOMを触らずとも開発ができるようにしているという考えが根本にあると考えます。
この点が、DOMを直接操作しやすくするというjQueryと大きく異なる部分です。
プログラミングはよく建築に例えられますが、プログラマが大工ならjQueryが工具(建築をしやすくする)でjsフレームワークはバイトの大工(指示が必要だが細かい作業はやってくれる)というイメージです。
[JS] 図で理解する 同期 / 非同期処理 の概念と実際の実装方法 - Promise, Generate, async

記事を移動しました！ ※こちらの記事は間も無く消します
https://blog.proglearn.com/2020/11/03/【js】同期処理と非同期処理の違いとは？例え話を/
firebase realtime database入門メモ

# realtimedatabaseとは

JSONで保存するfirebaseのDBでリアルタイムで同期されるのでチャットなどに便利。最近cloudfirestoreという別のDBができているがまだベータ版なのでrealtimedatabaseを使ったほうが無難かも。

# 使い方

## webでの設定

```
  // Set the configuration for your app
  // TODO: Replace with your project's config object
  var config = {
    apiKey: "apiKey",
    authDomain: "projectId.firebaseapp.com",
    databaseURL: "https://databaseName.firebaseio.com",
    storageBucket: "bucket.appspot.com"
  };
  firebase.initializeApp(config);

  // Get a reference to the database service
  var database = firebase.database();
```

上記で設定

## ルールの設定

realtimedatabaseではルールでデータのアクセス許可を管理する。

```
{
  "rules": {
    "foo": {
      ".read": true,
      ".write": false
    }
  }
}
```

上記はfooという情報の読み書きを許可する記述。

## $location変数

>突然登場した`$user_id`ですが、これは `$location変数`と呼ばれる特殊な変数です。頭に$を付けた好きな名前の変数を宣言すると、「その階層にあるノードのキー」がそこに入ります。
具体的に言うと、今回の例では`$user_id`にはusersの下にある`user001`や`user002`が入ります。$location変数を使うとその階層にある子ノードをfor-eachして、
それぞれのキー文字列を条件式に組み込むことができるというイメージですね。

引用：https://qiita.com/lacolaco/items/b068ab0cf19a26f0992d

## データの読み書き

https://firebase.google.com/docs/database/web/read-and-write?hl=ja
Estimatorでearly stoppingについてのメモ

本家BERTが学習・評価にestimatorを使っているので、estimatorをちょこちょこ触っています。

# Estimatorとは
TensorFlowではいくつかの高レベルAPIが入り乱れているが、Estimatorについては以下がわかりやすかった。
> TensorFlowのHighLevelAPIについての雑感つき解説
> https://qiita.com/rindai87/items/72651c702e9265595047#estimator

# Early stopping
学習時に何らかの指標を監視して、学習を終了させるテクニック。モデルの収束判定に用いられる。validation_lossを監視して、train_lossが改善していてもvalidation_lossが改善しなくなった時点で学習を終了させるという使い方が多いのではないかと思う。計算資源の浪費を防ぐとともに、過学習を防止する。
patienceというパラメータを設定して、その回数だけ更新されなかったら終了とする。

## estimatorでearly stopping
### estimator.train_with_eval()
> https://www.tensorflow.org/api_docs/python/tf/estimator/train_and_evaluate

estimator.train_with_evaluate()の公式ドキュメントに"the only supported stop condition for model training is train_spec.max_steps."とある。evaluationを繰り返しながらtrainを進めていくことはできないかと思いこんで、わざわざfor文でestimator.trainとestimator.evalateを交互に実行していた。


> https://stackoverflow.com/questions/47137061/early-stopping-with-tf-estimator-how

しかしどうやらTensorflow1.10以降では、このstackoverflowのように、early_stopping_hookを作って、estimator_specでestimator.train_with_evalに渡してあげると、early_stoppingが実装できるよう。

> https://github.com/tensorflow/tensorflow/blob/r1.12/tensorflow/contrib/estimator/python/estimator/early_stopping.py

ソースコードをみると、いくつか便利そうなhookが用意されている。上記のようなvalid_lossの監視で使う際は、stop_if_no_decrease_hookを使えば良さそう。
【Ruby】mapの途中でnextを使用するとnilが入ってしまう罠

map(またはcollect)はブロックの戻り値を集めた配列を生成してくれる便利なメソッドです。
しかし、ブロックの途中でnextを使用すると意図せずnilが入ってしまう場合があるため、気をつける必要があります。

例えば以下のような数字の配列から偶数を取り出すメソッドを作成したとします。

```ruby:qiita.rb
# 引数で渡した配列から偶数だけ取り出したい
def getEvenNumber(numArray)
  numArray.map do |num|
    next if num % 2 != 0
    num
  end
end
```

上記メソッドに対し、1〜5の整数の配列を引数に与えてみます。
この場合、2と4の配列が返ってくることが期待する結果です。

```ruby:qiita.rb
getEvenNumber([1,2,3,4,5])
=> [nil, 2, nil, 4, nil]
```

2と4は期待通り返ってきたのですが、それ以外の要素がnilになってしまいました。
mapは配列の各要素に対して処理を行い、その結果を配列にして返却するため、もとの配列の数と生成された配列の要素数は等しくなります。そのため、途中でnextを入れて処理をスキップしたつもりでも、結果の配列にnilがセットされてしまうのです。

そこで、もしnilを配列に入れたくないのであれば、以下のようにmapした後にcompactを行うことで回避することができます。

```ruby:qiita.rb
def getEvenNumber(numArray)
  numArray.map do |num|
    next if num % 2 != 0
    num
  end.compact
end

getEvenNumber([1,2,3,4,5])
=> [2, 4]
```

mapとcompactを使用しない別の方法としては、selectやrejectを使うのもありです。
もちろん使えない、使わない方が良いケースもあるので状況に応じてになりますが、今回のケースではこちらの方がシンプルですね。

```ruby:qiita.rb
# selectを使う
def getEvenNumber(numArray)
  numArray.select do |num|
    num % 2 == 0
  end
end

# rejectを使う
def getEvenNumber(numArray)
  numArray.reject do |num|
    num % 2 != 0
  end
end
```

意図しないnilが含まれているとバグにも繋がるため、mapを使用する際はぜひ意識しておくと良いと思います。
番号指定参照の直後に数値が続く場合の書きかた

# はじめに
2018/11/20 0時頃
記事名を「番号指定参照の直後に数値が続く場合の書きかた」に変更しました。
旧記事名「後方参照の直後に数値が続く場合の書きかた」
**scivola**様、コメントありがとうございました。

本記事の動作環境は下記のとおりです。お使いの環境によっては同じように動作しない可能性があります。
>エディタ「サクラエディタ 2.3.2.0」
>正規表現ライブラリ「bregonig.dll Ver.4.12 with Onigmo 6.1.2」

# パターン
```Regex-Pattern
${index}数値
```
## 何ができるか
番号指定参照``$1``の直後に数値が続いても正しく置換ができます。

### NGサンプル
```
$index数値
```
``86_``を``101_``に置換したい

**置換前**
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306574/b474ab9f-1bfb-6d03-ff69-1dcbb8b23305.png)
**置換後**
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306574/376d032c-717d-b6af-40eb-c0446a0d631f.png)

**ハチロクが消えた・・・！？**

### OKサンプル
```
${index}数値
```
同じく``86_``を``101_``に置換したい

**置換前**
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306574/61ea966e-01a2-1eab-c1c8-62547743395c.png)
**置換後**
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306574/71cf7efe-74c0-f3c3-6f25-31557105a220.png)

めでたしめでたし。

### 経緯と補遺
正規表現にて``()``で囲んだ文字列を``$1``で参照できますが、``$1``の後に数値を書きたかっただけです。
``${index}``とすることで安全な番号指定参照ができます。
>*番号指定参照の``$1``とリテラルの``数値``を明確に区別できるということです。*

また、上記例だと普通に``86_``で検索して置換できますが、
``\d{2}``の中身と置換先の数値が都度変わっていたので検索・置換の組み直しが面倒でした。[^1]
置換前：``(..)\d{2}\_``
置換先：``${1}置換先数値_``
とすれば``置換先数値``だけ書き換えればいいので労力を若干軽減できますよね。

### メタ文字紹介
今回使用したメタ文字たちの紹介です。

|メタ文字|意味|
|:----|----:|
|(..)|なにかの2文字。番号指定参照可能|
|\d{2}|0～9のいずれか2文字|
|\\_|エスケープされたアンダースコア<br>無意識にやっていたが、本当は**エスケープ不要**|
|${1}|（安全な）番号指定参照。直後に数値を続けられる<br>検索時に()で囲んだ文字を参照できる|
|\1|番号指定による**後方参照**。今回、勘違いしていたもの<br>正直なところ番号指定参照との違いをわかっていない|

---
##参考
[良い記事を書くためのガイドライン](https://help.qiita.com/ja/articles/qiita-article-guideline "良い記事を書くためのガイドライン")
[正規表現メモ](http://www.kt.rim.or.jp/~kbk/regex/regex.html "正規表現メモ")
[サクラエディタで利用可能な正規表現](http://sakura-editor.sourceforge.net/htmlhelp/HLP000089.html "サクラエディタで利用可能な正規表現")

[^1]: 数値は2桁と定義済み
VSCodeでvagrant環境とファイルを共有する

VSCodeを使って開発を行う際に、筆者はvagrantを使って環境構築をしているのですが
sftpを使ってファイルを同期する際に若干苦戦したので備忘録的に書きます。

<h2>sftpダウンロード</h2>
VSCodeの拡張機能を追加します。
執筆時点での最新版は1.7.5のようです。

![スクリーンショット 2018-11-18 14.40.28.png](https://qiita-image-store.s3.amazonaws.com/0/277725/07236c21-f9de-4c53-3d63-2eee48a17938.png)

<h2>構築した環境情報を確認</h2>
既にvagrant sshで接続できる状態であることを前提に書いています。
まだ環境構築ができていない場合は↓

[初心者の環境構築は仮想環境上がベスト説](https://qiita.com/tnmrknm/items/a5fe120cc88ebb70474a)

Vagrantfileが置いてあるディレクトリ直下で下記コマンド

```terminal:terminal
$ vagrant ssh-config
Host default
  HostName 127.0.0.1
  User vagrant
  Port 2222
  UserKnownHostsFile /dev/null
  StrictHostKeyChecking no
  PasswordAuthentication no
  IdentityFile /Users/***/virtualbox/private_key
  IdentitiesOnly yes
  LogLevel FATAL
```

この情報をもとにVSCode上のsftp情報を編集していきます。


<h2>sftp.jsonの編集</h2>
Shift+Command+pでSFTP:configを選択後、sftp.jsonを次のように修正します。

```json:sftp.json
{
    "protocol": "sftp",
    "host": "localhost",
    "port": 2222,
    "username": "vagrant",
    "privateKeyPath": "/Users/***/virtualbox/private_key",
    "remotePath": "/home/vagrant/",
    "password": null,
    "agent": null,
    "passphrase": null,
    "passive": false,
    "interactiveAuth": false,
    "uploadOnSave": true,
    "syncMode": "update",
    "downloadOnOpen": true, 
    "watcher": {
        "files": false,
        "autoUpload": false,
        "autoDelete": false
    },
    "ignore": [
        "**/.vscode/**",
        "**/.git/**",
        "**/.DS_Store"
    ]
}
```

これで通信可能となりました。
remotePathは初期状態では"/"となっているのですが、vagrantで作った環境と通信するには
"/home/vagrant/"としておくのが良いです。
QiitaでVue.jsのシンタックスハイライトが使えるようになってる件

Qiitaで、Vue.jsの単一ファイルコンポーネント（`.vue`ファイル）のシンタックスハイライトが使えるようになっています。

## 今まで
今まではコードブロックの言語の選択肢に`vue`がなかったので、`html`で代用していました。
当然ですが、`template`、`script`、`style`の各ブロックが単なるHTMLタグとして認識されています。

```html:AppButton.vue
<template>
  <button
    class="button"
    @click="showMessage">Show message</button>
</template>

<script>
export default {
  data () {
    return {
      message: 'Hello World'
    }
  },
  methods: {
    showMessage () {
      alert(this.message)
    }
  }
}
</script>

<style scoped>
.button {
  border-radius: 8px;
}
</style>
```

## これから
コードブロックの言語に`vue`または`vuejs`を指定することで、Vue.jsとしてシンタックスハイライトを効かせることができます。

```vue:AppButton.vue
<template>
  <button
    class="button"
    @click="showMessage">Show message</button>
</template>

<script>
export default {
  data () {
    return {
      message: 'Hello World'
    }
  },
  methods: {
    showMessage () {
      alert(this.message)
    }
  }
}
</script>

<style scoped>
.button {
  border-radius: 8px;
}
</style>
```

## おわりに
コードブロックには適切な言語を指定してシンタックスハイライトが効くようにしましょう。
返信用メールが途中でおかしくなってしまいました

グーグルフォームで下記のスクリプトを使っています。

50件ぐらいはうまく動いていたのですが、
途中で返信用メールが一定の人にまとめて届くようになり、
一旦削除して作り直してみたら、
今度は全く返信用メールが届かなくなりました。

途中でそういうことが起こるものなんですか？
違う場所で聞いたら下記のは良くないソースだと言われましたが、
コピーして使っているので、
よくわかりません。

聞き方も伝わるのかどうかわかりませんが、
内容すらよく理解せずに使っているので、
申し訳ありません。

どなたか教えてください。

function autoreply() 
{

 var title = "医療"; 
 var body
 = "お申込みありがとうございます。\n"
 +"【セミナー名】医療\n"
 +"【日時】　2018年12月12日（水）　9：30開場\n"
 +"　　　　　　10：00～16：00\n"
 +"【会場】　AP大阪大阪東梅田\n"
 +"【住所】　大阪市北区堂山町３−３ 日本生命梅田ビル\n"
 +"【道順】　地下街泉の広場から「M-10」階段を昇り、右側へ昇り、そのまま道沿いです\n"
 +"【参加費】2,000円\n"
 +"【お問い合わせ先】　東／aaaaa@gmail.com\n"
 +"\n"
 +"　　　　　　\n"
 +"下記の通りお申込みを受け付けました\n\n"
 + "------------------------------------------------------------\n" ;
 var footer 
 = "------------------------------------------------------------\n\n"
 + "お問い合わせメール：aaaaa@gmail.com" 
 + "ありがとうございました";
 
 var name = 'お名前';
 var mail = 'メールアドレス';
 var address = "";
  
 var sheet = SpreadsheetApp.getActiveSheet();
 var rows = sheet.getLastRow();
 var cols = sheet.getLastColumn();
 var rg = sheet.getDataRange();
 Logger.log("rows="+rows+" cols="+cols);
 
 for (var i = 1; i <= cols; i++ ) {
 var col_name = rg.getCell(1, i).getValue(); 
 var col_value = rg.getCell(rows, i).getValue(); 
 body += "■"+col_name+"\n";
 body += col_value + "\n\n";
 if ( col_name === mail ) {
 body = col_value+" 様\n\n"+body;
 }
 if ( col_name === mail ) {
 address = col_value;
 }
 }
 body += footer;
  
 GmailApp.sendEmail(address,title,body);
}
CUI でフォルダ内の全ファイルの合計サイズとファイル数を調べる方法 for macOS

# CUI でフォルダ内の全ファイルの合計サイズとファイル数を調べる方法
1. ターミナルを開く
2. 以下のコマンドを打ち込んで実行

```sh
function show_folder_size_and_file_count () {
    find "${1%/}" -type f -ls | awk 'BEGIN { sum=0;count=0 }; { sum+=$7;count++;printf "\rtotal %d Byte, %d files",sum,count }; END{ print "" }'
}
show_folder_size_and_file_count "<調べたいフォルダのパス>"
```
# 実行結果

```
MacBook-Air:tmp username$ function show_folder_size_and_file_count () {
>     find "${1%/}" -type f -ls | awk 'BEGIN { sum=0;count=0 }; { sum+=$7;count++;printf "\rtotal %d Byte, %d files",sum,count }; END{ print "" }'
> }
MacBook-Air:tmp username$ show_folder_size_and_file_count "${HOME}/Desktop"
total 2116481611 Byte, 9124 files
```
2.1 GB の場合、5 秒程度で処理は完了した。
また、awk コマンド内でコンソール出力を上書きしているため、ファイルサイズとファイル数のカウントがリアルタイムで更新される。
レスポンスボディから得られる画像を保存せずに、zip してブラウザでダウンロードさせるサンプル

適当な画像URLから、その画像をブラウザでダウンロードさせるサンプルです。

ぼくは最初、画像URLから取得した画像を "適当なファイルとして保存して圧縮" という流れでやっていましたが。この "保存して" という処理を省きたかったのです。省いたサンプルが以下になります。

（もっといい方法とかあるのかなぁ..

```golang:server.go
package main

import (
	"archive/zip"
	"io/ioutil"
	"net/http"
	"html/template"
)

func indexHandler(w http.ResponseWriter, r *http.Request) {
	t, _ := template.ParseFiles("index.html")
	t.Execute(w, nil)
}

func downloadHandler(w http.ResponseWriter, r *http.Request) {
	imageURL := "適当な画像URL"
	res, _ := http.Get(imageURL)
	data, _ := ioutil.ReadAll(res.Body)
	defer res.Body.Close()

	zw := zip.NewWriter(w)
	defer zw.Close()

	writer, _ := zw.Create("create.png")
	w.Header().Set("Content-Disposition", "attachment; filename=tmp.zip")
	w.Header().Set("Content-Type", "application/zip")
	writer.Write(data)
}

func main() {
	http.HandleFunc("/", indexHandler)
	http.HandleFunc("/download", downloadHandler)
	http.ListenAndServe(":8000", nil)
}
```

```html:index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  tmp
  <form method="post" action="/download">
    <input type="submit" value="Download Image">
  </form>
</body>
</html>
```
Cocos2d-xのhttp通信で基本認証を通る方法

#初めに
Cocos2d-xのHttpRequestで基本認証を通る情報が見当たらず、
少し苦戦したためメモ程度に残しておきたいと思い書きました。

今回Base64エンコードをするために、[こちら](https://gist.github.com/tomykaira/f0fd86b6c73063283afe550bc5d77594)からコードをお借りしました。
コード内で記述されている

```
macaron::Base64::Encode(s);
```
は、お借りしたコードに書かれている関数です。



#環境
Cocos2d-x 3.17
Ruby 2.5
Rails 5.2.1

#解説
まずRails側でコントローラーに以下を記述し、基本認証をかけました。

```hoge_controller.rb
http_basic_authenticate_with name: 'user_name', password: 'user_password' if Rails.env.development? || Rails.env.production?
```
　
　
基本認証のヘッダーの作成はこんな感じです。
初めにで書いたBase64.hをインクルードするのを忘れないでください。

```MyScene.cpp
    std::string s = "user_name:user_password";
    std::string base64 = macaron::Base64::Encode(s);
    
    std::vector<std::string> headers;
    std::string userPass = "Authorization: Basic " + base64;
    headers.push_back(userPass);
```
　
作成したヘッダーをHttpRequestにセットして送信すれば基本認証を通ることができます。

```MyScene.cpp
    auto request = new network::HttpRequest();
    request->setUrl("URL");
    request->setRequestType(network::HttpRequest::Type::GET);
    //↓ヘッダーをセット
    request->setHeaders(headers);
    request->setResponseCallback(CC_CALLBACK_2(MyScene::callbackHttpRequest, this));
    
    auto httpClient = network::HttpClient::getInstance();
    httpClient->enableCookies(nullptr);
    httpClient->send(request);
```
コンフリクトを直す手順


**「あなたの現在のブランチの先端が遅れているため、更新が拒否されました。**
と表示された場合

gitエラーを解決するには： 
**"現在のブランチの先端が背後にあるため、更新が拒否されました"**
https://code.i-harness.com/ja/q/157d34f
https://code-examples.net/ja/q/157d34f


## 原因
コンフリクト？

###まず、最新のdevelopを取り込む

```terminal
git pull --rebase origin develop

例
git pull --rebase origin future/event/308
```

それでもダメなら

```terminal
git diff HEAD..origin/master
```

で差分を探して、
**その差分があるファイルを自分のローカルで探して、差分があるリモートのファイルと同じようにする**

そして、**git add** を実行して、**git commit** を実行すれば、競合を解決したマージコミットの完成です。
そのあとまた**push**してみる

**コンフリクトの解消方法**
http://www-creators.com/archives/1938

http://www.nowhere.co.jp/blog/archives/20170905-220040.html
↑
**流れ**
『 gitエラーを解決するには： "現在のブランチの先端が背後にあるため、更新が拒否されました 』

1.すべてのステージングされていない変更をステージングします。

```terminal
git add .
```
2.リモートと同期する。

```terminal
git pull -r
```
**rebase --continue**
https://qiita.com/shuntaro_tamura/items/c505b76c1021a35ca9ff


#git pushが出来ない事象を解決する手順

###「あなたのブランチは、2つのコミットによって 'origin / feature / hoge / 001'より先です。」

```terminal
    On branch feature/hoge/001
    Your branch is ahead of 'origin/feature/hoge/001' by 2 commits.
    (use "git push" to publish your local commits)

    nothing to commit, working tree clean
```
と表示されて、更に

###「注意：taro-hogeは管理者ではありません。 別の人のコミットを押すことはできません。」

```terminal
    ### NOTICE: taro-hoge is not administor. you can't push another person's commit.
    ### NOTICE: commit-authors-string:jiro-hoge,saburo-hoge
    ### CHECK_COMMAND: git log ffc00000egg0000gg00gg0g00g00g0g00g0g00g0..12rt34567jkfhvnfh891lkfijjjjjjuhyfkkkl30
    error: failed to push some refs to 'git@github.hoge.jp:hoge/sp-hoge.git'
```

と表示され、git pushが出来ない事象を解決する手順
**※上記のgit log はデタラメに記載したものです。**

####原因
自分以外の第３者が先にコミットして、コンフリクトを起こした事が原因

####やった事
#####１

```terminal
$ git reset HEAD^
```
コミットをコミット前の状態に戻す。
（^ で一つ前 ^^なら二つ前のコミットが対象。）

```terminal
    Unstaged changes after reset:
    M	pm/test/hoge/001/Page/tokyo/test3.php

    modified:   ../pm/test/hoge/001/Page/tokyo/test3.php
```
すると add する前の状態に戻ります。

```terminal
$ git reset HEAD [ファイルパス]
```
ファイル名がわかる場合は↑

ただ、第３者がコミットしたファイルパスがどこにあるか分からない場合がほとんどなので、
**自分より先にあるコミットを消す**という手順でやる事。

#####２

```terminal
git checkout (ファイルパス)
```
で変更自体を無しにします。

```terminal
例
../pm/test/hoge/001/Page/tokyo/test3.php
の場合
git checkout ../pm/test/hoge/001/Page/tokyo/test3.php
```
特定のファイルではなく、全て元に戻したい場合

```terminal
git checkout .
```
#####３

```terminal
git status
```
で確認したら、commitが綺麗になくなってるので、
再度pushしてみる

```terminal
git push origin feature/hoge/001

    Everything up-to-date
```
↑と表示され、pushするファイル自体が無くなる。

ので改めて、改修するファイルを更新し、再度

add → commit → push

して、終了。
php-master-changes 2018-11-17

今日は php-win.exe の CLI 起動時の Unicode パラメータの扱いの修正があった！ 

# 2018-11-17
## weltling: Fixed bug [#77111](https://bugs.php.net/bug.php?id=77111) php-win.exe corrupts unicode symbols from cli parameters
- https://github.com/php/php-src/commit/a7e9790969952c0574d8708277abfd25d12f58e5
- [7.2~]
- php-win.exe を CLI から起動する際、パラメータで渡す Unicode 文字列が壊れる問題の修正
取得した画像をそのままブラウザでダウンロードするサンプル

```golang
package main

import (
	"io/ioutil"
	"net/http"
	"html/template"
)

func indexHandler(w http.ResponseWriter, r *http.Request) {
	t, _ := template.ParseFiles("index.html")
	t.Execute(w, nil)
}

func downloadHandler(w http.ResponseWriter, r *http.Request) {
	imageURL := "適当な画像URL"
	res, _ := http.Get(imageURL)
	data, _ := ioutil.ReadAll(res.Body)
	defer res.Body.Close()
	w.Header().Set("Content-Disposition", "attachment; filename=tmp.png")
	w.Header().Set("Content-Type", "image/png")
	w.Write(data)
}

func main() {
	http.HandleFunc("/", indexHandler)
	http.HandleFunc("/download", downloadHandler)
	http.ListenAndServe(":8000", nil)
}
```
http.Client の DNS resolver を差し替える

`http.Client` の名前解決をローカルに適当に立てた DNS sever に向けたいときに．

:warning:  production ready かどうかは知らない

```golang
dnsAddr := ":5300"

dialerFunc := func(ctx context.Context, network, address string) (net.Conn, error) {
	d := net.Dialer{}
	return d.DialContext(ctx, "udp", dnsAddr)
}

resolver := &net.Resolver{PreferGo: true, Dial: dialerFunc}
dialer := net.Dialer{Resolver: resolver}

transport := &http.Transport{
	Dial:        dialer.Dial,
	DialContext: dialer.DialContext,
}

httpClient := &http.Client{Transport: transport}
```



`http.DefaultTransport` みたいなのを破壊せずコピーしてくる便利な方法ないのかな
Firebase / Cloud Functions + Storage でサーバレス画像リサイズサーバ構築

Google Cloud Functions と Cloud Storage の組み合わせを使って画像リサイズを動的に行える環境を構築するメモ。Firebase とも呼ぶような気がしなくもないけど、Cloud という名前で統一しております。

## 前提

- Firebase で利用
- リサイズは Sharp を利用
- 画像オリジンサーバは Cloud Storage を利用
- エンドポイント URL: https://example.com/sample/hoge.jpg?size=100x50

## 手順

### Functions

#### src/index.ts

```javascript
export {image_resize} from './imageResize'
```

#### src/init.ts

Firebase AdminSDK を初期化しておきます。

```javascript
import * as functions from 'firebase-functions'
import * as admin from 'firebase-admin'
admin.initializeApp()
export const storage = admin.storage()
```

#### src/imageResize.ts

エラー処理やサイズの正規化・ファイルタイプによる分岐などを行っていないので、プロダクションで利用する際はちゃんと書く必要があります。

```javascript
const functions = require('firebase-functions')
const firebaseConfig = JSON.parse(process.env.FIREBASE_CONFIG)
import { storage } from './init'

const sharp = require('sharp')
const fileType = require('file-type')
const os = require('os')
const path = require('path')

export const image_resize = functions.https.onRequest((req, res) => {
  const filePath = req.query.path
  const size = req.query.size
  let [width, height] = size.split('x')
  width = width ? Number(width) : undefined
  height = height ? Number(height) : undefined
  const bucket = storage.bucket(firebaseConfig.storageBucket)
  const tempFilePath = path.join(os.tmpdir(), `${Math.round( Math.random() * 1000 )}`)
  bucket.file(filePath).download({
    destination: tempFilePath,
  }).then(() => {
    sharp(tempFilePath)
      .rotate()
      .resize(width, height)
      .toBuffer()
      .then(data => {
        const type = fileType(data)
        const age = 86400 * 365
        res.set('Cache-Control', `public, max-age=${age}, s-maxage=${age}`)
        res.set('Content-Type', type.mime)
        res.status(200).send(data)
      })
  }).catch(err => {
      res.status(200).send(err)
    }
  )
})
```

これで Cloud Functions のコードは完了です。

### CDN

あとは Firebase Hosting には CDN としての機能があるので、Cloud Functions のエンドポイントをキャッシュさせるようにします。

#### firebase.json

```json
{
  "hosting": {
    "rewrites": [
      {
        "source": "/resize/**",
        "function": "imageResize"
      }
    ]
  }
}
```

以上です。
Kotlinメモ

自分用のメモ

10進数を2進数や8進数に変える

```MathUtil.kt
fun main(arg:Array<String>){
	for(i in 1..16){
		println("$i　を2進数で表すと"+tenToRadix(i,2))
	}
	
	for(i in 1..16){
		println("$i を8進数で表すと"+tenToRadix(i,8))
	}
}

//例えばnumに10,mathRadixに2を入れると10を2進数に変換して
//1010を返す
//またnumに10,mathRadixに8を入れると10を8進数に変換して
//12を返す
fun tenToRadix(num:Int,mathRadix:Int):String{
	var funNum = num
	var result:String = ""
	while(funNum >= mathRadix){
		result = result+Integer.toString(funNum%mathRadix)
		funNum = funNum/mathRadix
	}
	result = result+Integer.toString(funNum)
	return result.reversed();
}
```
vbsの作法 その12

#概要
vbsの作法を調べてみた。
IEのイベント捕らえてみた。

#サンプルコード

```
Dim objIE
Set objIE = WScript.CreateObject("InternetExplorer.Application", "IE_")
objIE.Visible = True
objIE.Navigate "https://www.yahoo.co.jp"
Do
  WScript.Sleep 200
Loop

Sub IE_BeforeNavigate(browser, url, flags, target, postdata, headers, cancel)
	msgbox "BeforeNavigate"
End Sub

Sub IE_BeforeNavigate2(browser, url, flags, target, postdata, headers, cancel)
	msgbox "BeforeNavigate2"
End Sub

'Sub IE_CommandStateChange(Command,Enable)
'	msgbox "CommandStateChange"
'End Sub

Sub IE_DocumentComplete(browser, url)
	msgbox "DocumentComplete"
End Sub

Sub IE_DownloadBegin()
	msgbox "DownloadBegin"
End Sub

Sub IE_DownloadComplete()
	msgbox "DownloadComplete"
End Sub

Sub IE_FileDownload(ActiveDocument, Cancel)
	msgbox "FileDownload"
End Sub

Sub IE_NavigateComplete(browser, url)
	msgbox "NavigateComplete"
End Sub

Sub IE_NavigateComplete2(browser, url)
	msgbox "NavigateComplete2"
End Sub

Sub IE_NavigateError(browser, url, target, status, cancel)
	msgbox "NavigateError"
End Sub

Sub IE_NewProcess(lCauseFlag, pWB2, Cancel)
	msgbox "NewProcess"
End Sub

Sub IE_NewWindow(browser, Cancel)
	msgbox "NewWindow"
End Sub

Sub IE_NewWindow2(browser, Cancel)
	msgbox "NewWindow2"
End Sub

Sub IE_NewWindow3(browser, Cancel, dwFlags, bstrUrlContext, bstrUrl)
	msgbox "NewWindow3"
End Sub

Sub IE_OnFullScreen(FullScreen)
	msgbox "OnFullScreen"
End Sub

Sub IE_OnMenuBar(MenuBar)
	msgbox "OnMenuBar"
End Sub

Sub IE_OnQuit()
	msgbox "Internet Explorerが閉じられました。"
	Set objIE = Nothing
	WScript.Quit() 'スクリプトの終了
End Sub

Sub IE_OnStatusBar(StatusBar)
	msgbox "OnStatusBar"
End Sub

Sub IE_OnTheaterMode(TheaterMode)
	msgbox "OnTheaterMode"
End Sub

Sub IE_OnToolBar(ToolBar)
	msgbox "OnToolBar"
End Sub

Sub IE_OnVisible(vVisible)
	msgbox "OnVisible"
End Sub

Sub IE_PrintTemplateInstantiation(browser)
	msgbox "PrintTemplateInstantiation"
End Sub

Sub IE_PrintTemplateTeardown(browser)
	msgbox "PrintTemplateTeardown"
End Sub

Sub IE_PrivacyImpactedStateChange(bPrivacyImpacted)
	msgbox "PrivacyImpactedStateChange"
End Sub

'Sub IE_ProgressChange(nProgress, nProgressMax)
'	msgbox "ProgressChange"
'End Sub

Sub IE_PropertyChange(sProperty)
	msgbox "PropertyChange"
End Sub

Sub IE_RedirectXDomainBlocked(browser, url, RedirectURL, Frame, StatusCode)
	msgbox "RedirectXDomainBlocked"
End Sub

Sub IE_SetPhishingFilterStatus(PhishingFilterStatus)
	msgbox "SetPhishingFilterStatus"
End Sub

Sub IE_SetSecureLockIcon(SecureLockIcon)
	msgbox "SetSecureLockIcon"
End Sub

Sub IE_StatusTextChange(sText )
	msgbox "StatusTextChange"
End Sub

Sub IE_ThirdPartyUrlBlocked(URL, dwCount)
	msgbox "ThirdPartyUrlBlocked"
End Sub

Sub IE_TitleChange(sText)
	msgbox "TitleChange"
End Sub

Sub IE_UpdatePageStatus()
	msgbox "UpdatePageStatus"
End Sub

Sub IE_WindowActivate()
	msgbox "WindowActivate"
End Sub

Sub IE_WindowMove()
	msgbox "WindowMove"
End Sub

Sub IE_WindowResize()
	msgbox "WindowResize"
End Sub

Sub IE_WindowStateChanged(dwFlags, dwValidFlagsMask)
	msgbox "WindowStateChanged"
End Sub



```

以上。
Qt5 を Debian 9 にインストールする

#なぜ Qt5 を Debian 9 にインストールするのか？
こんにちは、chlochanです。今日は Qt5 を Debian 9 にインストールしてみます。なぜ、Debian 9 かというと、いま Deep Learningの勉強に使っている Google Cloud Platform の Deep Learning VM Image が Debian 9 なためです。そしてなんで Qt をインストールするかというと、Qt が好きだからです。

#Install Qt 5 on Debian
wiki.qt.ioで探して見ましたが、Debian向けののインストール方法はなかったので、Ubuntu向けの以下のインストール方法を参考にインストールします。
https://wiki.qt.io/Install_Qt_5_on_Ubuntu

まず、インストーラーをダウンロードします。2018/11/18時点での最新版は 5.11.2 です。

~~~bash
$ wget http://download.qt.io/official_releases/qt/5.11/5.11.2/qt-opensource-linux-x64-5.11.2.run
~~~
run ファイルに実行属性をつけて実行し、Qt5 をインストールします。

~~~bash
$ chmod +x qt-opensource-linux-x64-5.11.2.run
$ ./qt-opensource-linux-x64-5.11.2.run
~~~
g++ をインストールします。

~~~bash
$ sudo apt-get install build-essential
~~~
フォントライブラリをインストールします。

~~~bash
$ sudo apt-get install libfontconfig1
~~~
Qt Creatorを起動します。 Tools > Options を選択します。 Kits をクリックし、 Compilers タブ を選択します。 コンパイラが、自動的に検出(Auto-detected)、されていない場合は、手動でコンパイラを設定します。

OpenGL のライブラリをインストールします。

~~~bash
$ sudo apt-get install mesa-common-dev
~~~
以下の追加パッケージのインストールも必要です。次のコマンドを実行します。この追加パッケージのインストールで、-lGL が見つからない、という問題が起こる事を防げます。

~~~bash
$ sudo apt-get install libglu1-mesa-dev -y
~~~

上記の方法でダウンロードしてインストールする場合、ファイルの関連付けは自動的には行われません。よって関連づけるため、"Qt-Creator.desktop" という名前のファイルを作成し、ファイルに次のように入力します。なお、<ユーザー名> のところはインストールしたユーザー名にします。

~~~
[Desktop Entry]
Version=1.0
Encoding=UTF-8
Type=Application
Name=QtCreator
Comment=QtCreator
NoDsiplay=true
Exec=/home/<ユーザー名>/Qt5.11.2/Tools/QtCreator/bin/qtcreator %f
Icon=/home/<ユーザー名>/Qt5.11.2/5.11.2/Src/qtdoc/doc/images/landing/icon_QtCreator_78x78px.png
Name[en_US]=Qt-Creator
~~~
このファイルを自分のホームディレクトリの .local/share/applications に置きます。
また、同じディレクトリ内の "defaults.list" という名前のファイルに次の行を追加します。ファイルがなければ作成します。

~~~
text/qtcreator=Qt-Creator.desktop; 
~~~
ファイル /usr/share/applications/mimeapps.list を開き、次の行が存在しているか確認します。もし無い場合は、[added Associations] の下に追加します。

~~~
application/vnd.nokia.qt.qmakeprofile=qtcreator.desktop
~~~
もし、ファイル /usr/share/applications/mimeapps.list そのものが無い場合は作成し、ファイルに次のように入力します。

~~~
[added Associations]
application/vnd.nokia.qt.qmakeprofile=qtcreator.desktop
~~~

次のコマンドを実行します。

~~~bash
$ sudo update-mime-database /usr/share/mime
~~~
これで Qt がファイルの関連付けリストに追加されました。
Specs2のDSLテストケース内部で値クラスを使用する時のエラーについて

Specs2のDSLでテストケースを書いていて、値クラス周りで少しつまづいたので、その時に発生したエラーとエラーの原因、その解決策を紹介します。

この記事中ではSpecs2と値クラスについての詳細な解説は行わないので、詳細な解説はドキュメントなどを読んでください。

# 環境

* Scala 2.12.7
* specs2-core 4.3.4

# 本文

## エラーが発生する状況

Specs2は、以下のような`should`と`in`のようなDSLを使ってテストケースを記述することができます。

```Scala
"#context" should {
    "testCase1" in {
        ...
    }
    "testCase2" in {
        ...
    }
}
```

そして、値クラスは、以下のように`AnyVal`を継承することで作成することができます。

```Scala
case class ValueClass(value: String) extends AnyVal
```

ここで、Specs2のテストケース内部で、入力値として値クラスを何度も繰り返し使いたいということがありました。
テストケース毎に入力値は変化するので、以下のように値クラスの値を`val`変数として保持します。

```Scala
"#context" should {
    "testCase1" in {
        val input = ValueClass("foo")
        ...
    }
    "testCase2" in {
        val input = ValueClass("bar")
        ...
    }
}
```

しかし、この状態でコンパイルを行うと、以下のようなエラーが発生してしまいます。

```
[error] Result type in structural refinement may not refer to a user-defined value class
```

「構造的部分型はユーザー定義の値クラスを参照しないかもしれない」といった意味のエラーだと思われます。では、なぜこのようなエラーが発生するのでしょうか？

## 原因

Specs2のDSLにおける`in`で記述するテストケース内部の「値クラスの`val`変数への代入」が、「テストケースを表現する構造的部分型の公開メンバ（すなわち公開メソッド）」になっているので、「構造的部分型はメソッドのパラメータや戻り型に値クラスを取ることができない」というルールに違反していたことが原因として挙げられます。

### ポイント

* Specs2のDSLにおける`in`で記述するテストケースの内部は、構造的部分型になっている
* 構造的部分型はメソッドのパラメータや戻り型に値クラスを取ることができない


値クラスが構造的部分型のメソッドのパラメータや戻り型として扱うことができないことについては公式ドキュメントに記述があります。

* [値クラスと汎用トレイト](https://docs.scala-lang.org/ja/overviews/core/value-classes.html)

## 回避策

原因は`in`で記述するテストケース内部で値クラスを公開メソッドの返り値にしていることです。
であれば、これを非公開にしてあげれば、これはメソッドではなくなりただの非公開メンバになります。
つまり「構造的部分型はメソッドのパラメータや戻り型に値クラスを取ることができない」のルールを回避できるわけですね。

最終的には以下のようなコードになります。

```Scala
"#context" should {
    "testCase1" in {
        private val input = ValueClass("foo")
        ...
    }
    "testCase2" in {
        private val input = ValueClass("bar")
        ...
    }
}
```
wordpress久しぶりだと毎回ググるよね備忘録

## もう１００回はググってんじゃないの？
どうも、wordpress専門のエンジニアではないので着手するたびほぼ初心者の気持ちに戻っていて流石にググる時間無駄すぎわロタの人です。（長い
今回は毎回毎回毎回毎回ググらざるおえない系を乱雑に書いていきます。
もう脈略もクソもないのですが、「あーwpお久しぶりー」って言う人はここみるとなんとなく記憶が蘇るんじゃないかなと思います。

## style.cssの読み込み方

functions.phpからやろうな

```
<?php 

function add files() {
  wp_deregister_script('jquery');
  // wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js', "", "20160608", false );
  wp_enqueue_style( 'main', get_stylesheet_uri() );
  wp_enqueue_style( 'medium', get_template_directory_uri() . '/css/medium.css', '', '' );
  wp_enqueue_style( 'small', get_template_directory_uri() . '/css/small.css', '', '' );
  wp_enqueue_style( 'sp', get_template_directory_uri() . '/css/sp.css', '', '' );
}

// add_action('wp_enqueue_scripts', 'add_files');
add_action('', 'add_files');

?>
```

header.php内の</head>直前にこの記述も忘れないようにしような

```
<?php wp_head()?>
```

##homeURL(ページ自体のURL)

```
<?php $url = home_url(); ?>
```

## imageの読み方（テーマディレクトリーまでのURL）

```
//pugの場合
img(src!= "<?php echo get_template_directory_uri(); ?>/images/title.svg")

//htmlの場合
<img src="<?php echo get_template_directory_uri(); ?>/images/title.svg">

```

## toppageに固定ページのテキストを反映

```
//下ごしらえ
<?php
$post_data = get_page_by_path('ここに固定ページのスラッグ'); 
$post = get_post($post_data);
$post_contents = $post -> post_content;
?>

//出力
<?php echo strip_tags($post_contents); ?>
```

##  サムネイルを出す

```
<?php the_post_thumbnail(); ?>
```
laravel-admin laravel日本語化

laravel-adminはlaravelの設定ファイルを編集することで日本語化される。
ただし、デフォルトで日本語に対応していない部分は自前でメッセージを用意して日本語化を行う。

###laravelの設定ファイルを編集する
config\app.phpを下記のように編集する

```
//    'timezone' => 'UTC',
    'timezone' => 'Asia/Tokyo',

//    'locale' => 'en',
    'locale' => 'ja',

//fallback_localeは編集しなくていい
    'fallback_locale' => 'en',
```

fallback_localeは言語フォルダに対応する日本語が入っていない場合に使用される言語を指定します。対応言語は「resources\lang\ja\admin.php」に追加することで編集することができます。

###検証
日本語対応している箇所が日本語化される
![20181118_laravel-admin日本語化.PNG](https://qiita-image-store.s3.amazonaws.com/0/314837/f3d2527a-ff19-68aa-7aaf-ddf820c195a5.png)

###参考
Laravel管理画面「laravel-admin」を日本語化する。設定ファイルで対応
https://diy.hot-maker.com/454/
MongoDB起動時にshutting down with code:100というエラーが出た場合の対処法

MongoDBの学習中、MongoDBを初めて起動する際にエラーが発生しMongoDBが起動できなかった場合の対処法をメモ。

## 設定後`mongod`コマンドでエラー発生

起動に必要な`/data/db`ディレクトリを作成後、PATHを通して`mongod`コマンドを実行すると、下記のようなエラーが発生した。

```terminal
wildmouse$ mongod
2018-11-18T12:31:11.896+0900 I CONTROL  [main] Automatically disabling TLS 1.0, to force-enable TLS 1.0 specify --sslDisabledProtocols 'none'
2018-11-18T12:31:11.909+0900 I CONTROL  [initandlisten] MongoDB starting : pid=5172 port=27017 dbpath=/data/db 64-bit host=noguchitsukasanoMacBook-Pro.local
2018-11-18T12:31:11.909+0900 I CONTROL  [initandlisten] db version v4.0.4
2018-11-18T12:31:11.909+0900 I CONTROL  [initandlisten] git version: f288a3bdf201007f3693c58e140056adf8b04839
2018-11-18T12:31:11.909+0900 I CONTROL  [initandlisten] allocator: system
2018-11-18T12:31:11.909+0900 I CONTROL  [initandlisten] modules: none
2018-11-18T12:31:11.909+0900 I CONTROL  [initandlisten] build environment:
2018-11-18T12:31:11.909+0900 I CONTROL  [initandlisten]     distarch: x86_64
2018-11-18T12:31:11.909+0900 I CONTROL  [initandlisten]     target_arch: x86_64
2018-11-18T12:31:11.909+0900 I CONTROL  [initandlisten] options: {}
2018-11-18T12:31:11.909+0900 I STORAGE  [initandlisten] exception in initAndListen: IllegalOperation: Attempted to create a lock file on a read-only directory: /data/db, terminating
2018-11-18T12:31:11.909+0900 I NETWORK  [initandlisten] shutdown: going to close listening sockets...
2018-11-18T12:31:11.909+0900 I NETWORK  [initandlisten] removing socket file: /tmp/mongodb-27017.sock
2018-11-18T12:31:11.910+0900 I CONTROL  [initandlisten] now exiting
2018-11-18T12:31:11.910+0900 I CONTROL  [initandlisten] shutting down with code:100
```

## エラーの原因と解決方法

最後のエラー行を見てみると、`shutting down with code:100`と書かれているので公式のエラーコードを参照してみる。

https://github.com/mongodb/mongo/blob/master/src/mongo/base/error_codes.err

`error_code("UnsatisfiableWriteConcern", 100)`

と書かれており、書き込みに問題がある模様。

思い返すと`/data/db`directoryの作成時にsudoを使っていたため、一般ユーザーで`mongod`を使うと書き込みができないことが分かる。

そのため`/data/db`の権限を`chown`コマンドを使って書き換えた、`sudo mongod`でもよかったかもしれない。
各データ型における、要素の数を取得する方法[Javascript]

Array、Stringはlength
Set、Mapはsize で取得できる

```javascript
// Array.length
[1,2,3,4,5].length // 5

// String.length
'hoge'.length // 4

// Set.proptotype.size
new Set([1,2,3,3,3,3]).size // 3

// Map.prototype.size
new Map([[0, 'a'], [1, 'b']]).size // 2

```
べき乗の計算[Javascript]

Math.pow()もしくはべき乗演算子を使う

```javascript
Math.pow(2, 3) // 8
2 ** 3 //8
```

[Math.pow()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/pow)

[べき乗演算子](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#%E3%81%B9%E3%81%8D%E4%B9%97_(**))
Javascriptにはマイナス0があるのでご注意

これは知りませんでした...

```javascript
let a = -1 * 0
console.log(a) // -0
console.log(Math.max(a)) // -0
console.log(parseInt(Math.max(a))) // 0
```

いくつか参考URLを貼っておきます  
[Why JavaScript has two zeros: -0 and +0](https://abdulapopoola.com/2016/12/19/why-javascript-has-two-zeros-0-and-0/)  
[Are +0 and -0 the same?
](https://stackoverflow.com/questions/7223359/are-0-and-0-the-same)
文字列を一文字ずつ分割して配列に入れる[Javascript]

# 普通のやり方

```javascript
let str = 'test'
str.split('') // ['t', 'e', 's', 't']
```

# Array.from() を使ったやり方

```javascript
let str = 'test'
Array.from(str) // ['t', 'e', 's', 't']
```

[Array.from()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
1から任意の数までを要素とする配列が作りたいとき[Javascript]

# 普通のやり方

```javascript
let arr = []
for(let i = 1; i < 100; i++){
    arr.push(i)
}
```

# Arrayオブジェクトの関数を使いたいとき

```javascript
let arr = Array(100).fill(0).map((v, i) => i + 1)
```
重複を取り除いた配列を作りたいとき[Javascript]

Setに変換してしまうと簡単です。
そのまま for..of で値を取り出すこともできるし、配列に戻したければスプレッド演算子を組み合わせます。

```javascript
let test = [1,2,2,3,4,4,6]
let set1 = new Set(test)

for (let v of set1) {
  console.log(v) // 1, 2, 3, 4, 6
}

let arr1 = [...set1]
console.log(arr1) // [1,2,3,4,6]
```

[Setオブジェクト](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set)
配列に特定の値があるか判定する[Javascript]

# Array.prototype.includes() を使う

```javascript
const nums = [1,2,3]
console.log(nums.includes(1)) // true
```

[Array.prototype.includes()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)

# Array.prototype.some() を使う

```javascript
const inArray = (needle, haystack) => haystack.some(item => item === needle)
const nums = [1,2,3]
console.log(inArray(1, nums)) // true
```

[Array.prototype.some()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/some)
配列の先頭 / 末尾の要素を取得する[Javascript]

# 元の配列を破壊してもいいとき
Array.prototype.shift() や Array.prototype.pop() を利用します。

```js
const arr = [1, 2, 3, 4, 5]
console.log(arr.shift()) // 1
console.log(arr) // [2, 3, 4, 5]
console.log(arr.pop()) // 5
console.log(arr) // [2, 3, 4]
```

[Array.prototype.pop](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/pop)


[Array.prototype.shift](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/shift)


# 元の配列を破壊したくないとき
先頭の要素は添え字[0]、末尾の要素は添え字を[Array.length - 1]として取得できます。

それ以上に必要な場合はArray.prototype.slice() で必要な分だけ切り取ります。
Array.prototype.slice() は、新しい「配列」を返す関数なので、
値が必要な場合はさらにそのインデックスを指定する必要があります。

```javascript
const arr = [1, 2, 3, 4, 5]

console.log(arr[0]) // 1
console.log(arr[arr.length - 1]) // 5

console.log(arr.slice(0,1)) // [1]
console.log(arr.slice(0,1)[0]) // 1
console.log(arr) // [1, 2, 3, 4, 5]
console.log(arr.slice(-1)[0]) // 5
console.log(arr) //[1, 2, 3, 4, 5]
```

[Array.prototype.slice](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)
配列の要素の最大値 / 最小値を求める[Javascript]

# Mathオブジェクトとスプレッド演算子を使う
```javascript
const arr = [10, 5, 100, 50, 1]
Math.max(...arr) // 100
Math.min(...arr) // 1
```

## 参考

[Math.max](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/max)

[スプレッド構文]
(https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)
PHPとNode.jsの標準入力

# PHP
```php
<?php

fscanf(STDIN, "%d", $a);
fscanf(STDIN, "%d %d", $b, $c);
fscanf(STDIN, "%s", $s);
echo sprintf("%d %s", ($a + $b + $c), $s).PHP_EOL;
```

$s = trim(fgets(STDIN)); などもある

# Javascript
```javascript
const main = (input) => {
    input = input.split("\n")
    tmp = input[1].split(" ")
    const a = parseInt(input[0], 10)
    const b = parseInt(tmp[0], 10)
    const c = parseInt(tmp[1], 10)
    const s = input[2]
    console.log("%d %s", a + b + c, s)
}
main(require("fs").readFileSync("/dev/stdin", "utf-8"))
```
手元で実行するときはEOFを入力しないといけないので
Ctrl + D で終わらせる

*追記 : windowsだと上記のNode.jsの入力は動作しません！ [参考](https://qiita.com/hiroqn@github/items/c927bc97780c34eda562)
CとC++の標準入力

# Cの標準入力
```c
#include <stdio.h>

int main()
{
	int n;
	scanf("%d", &n);
	printf("Input : %d\n", n);
	return 0;
}
```
- scanfの第二引数は、変数のアドレスを渡す必要がある


# C++の標準入力
```cpp
#include <iostream>
using namespace std;
int main()
{
	int n;
	cin >> n;
	cout << "Input : " << n << endl;
	return 0;
}
```
- iostreamというライブラリが使える
- ただiostreamを使った書き方は遅いらしく、競プロガチ勢は scanf などを使う模様
- C++なので当然Cと全く同じ書き方もできる
CやC++のコンパイル方法

Macであれば clang というのが利用できるようだ（Xcode command line toolsをいれないと利用可能にならない？ すでにインストール済みだったので検証していない）  
コンパイルは以下のようにする。  

```c:c
clang HogeHoge.c -o Hogehoge
```
```c++:c++
clang++ HogeHoge.cpp -o Hogehoge  (C++)
```
「PHPフレームワーク Laravel Webアプリケーション開発」を読みました

[PHPフレームワーク Laravel Webアプリケーション開発](http://www.socym.co.jp/book/1184)

> Web職人たちから圧倒的な支持を集めているPHPフレームワーク「Laravel」を使ったWebアプリケーション開発の実践的な指南書。

## 感想
Laravelを用いて実践的なアプリケーション実装方法や設計を学ぶ、というのがテーマ。
Laravelの機能についてもちろん紹介はあるが、網羅的なものではないです。
例えば [Route Model Binding](https://laravel.com/docs/5.7/routing#route-model-binding) とかの言及はなかったような気がする（あったらごめんなさい）。

前述の通り「Laravel入門書」ではないので、そういった情報を求めている人は別のリソースに当たる必要があるかと思う。
[これ](https://www.shuwasystem.co.jp/products/7980html/5258.html)とかかな...（読んでないので内容は知りません）。

MVCフレームワークで動くものは作れるようになった、くらいのPHPエンジニアが「アプリケーション設計」とか「テスト」とかに目を向け出した時に、PHP本でその手のことについて記述されたものってほとんどないので（特に日本語）貴重だし、いずれは他言語で書かれたその手の本を彷徨い始める必要が出てくると思うんだけど、そういった橋渡し的な役割も果たしてくれると思いました。

## その他
つめ（小口見出し）を見ていると急に「Chap10 パフォーマンス・チューニング」という、本書に無い章が出てくる。
紙面の都合で削られたのか理由は定かではありませんが、興味ある話題なので採用されていないのは残念ですね。

## まとめ
すでにLaravel開発に従事している人、設計技法やテストなどを学んでいきたいと思っているPHPエンジニアにおすすめです。
[PHPフレームワーク Laravel Webアプリケーション開発](http://www.socym.co.jp/book/1184)
「Vue.js入門 基礎から実践アプリケーション開発まで」を読みました


[Vue.js入門 基礎から実践アプリケーション開発まで](https://gihyo.jp/book/2018/978-4-297-10091-9)
> Vue.jsを初歩から実践まで徹底的に解説。使いやすくかつ，プロダクションでも活躍するVue.jsをVue.jsコントリビューターの著者らが解説する一番わかりやすい入門書です。小規模な適用例やjQueryからの移行サンプルに加え，大規模開発を想定したアプリケーション開発も体験できます。Vue.jsはGitHubで2017年最も人気のあったJavaScriptフレームワークに選ばれるなど大注目の技術です。

## 対象読者層
Javascriptの基本的な文法は分かっていた方がいいと思います。特に後半からはES2015以降の書き方が使われてきますので、不慣れな場合は平行して学習しましょう。

## 良かったところ
-  基本文法やコンポーネントだけでなく、Vue RouterやVuexなどのコアライブラリについても体系的な知識が身につきます。
サンプルコードと共に解説されており、いずれも理解しやすいです。(1〜7章)  
-  8章〜10章は規模感のあるSPAを構築していくための環境構築・テスト・設計・実装、エラーハンドリング、パフォーマンスチューニングなどについて書かれた実践的な章になっています。

## 気になったところ
### 8章以降で解説されるサンプル（カンバンアプリ）が途中で終わる

> 本書ではページの都合上、本章で作成するアプリケーションの実装について全て解説できません(p.350)

ただでさえ450ページほどある割とボリュームのある本書なので、そこまでフォローしていたらとんでもないページになるでしょうから仕方ないですが、8章で環境構築、9章で設計と来て10章の実装でこれなので、肩透かしを食らった感は否めません。
  
[サポートページ](https://gihyo.jp/book/2018/978-4-297-10091-9/)で、書籍にはない部分まで実装したサンプルコードが配布されているので 、そちらを参考に力試し的な感じで利用するのが良さそうです。

### カンバンアプリの環境構築が vue init を利用したものである
 
本書でも言及がありますが、最新のvue cli 3系においてはvue createコマンドが推奨され、vue init はレガシーコマンドとなっています。それで何か問題があるわけではないですが、今から新たに学ぶにあたっては vue create の方がいいのではないかと思います。vue create コマンド自体は6章（単一ファイルコンポーネントによる開発）で利用されています。

## その他
Appendix として jQueryからの移行についての紹介があります。具体的な内容も有益ですが、それ以上にWebでちらほら見かける「jQueryなんてオワコンwww 時代は( Vue | React | その他FW )でしょ」的な言説に釘をさしているのが素晴らしいです。
> 昨今、Web上でjQueryを一方的に否定する記事を見かけますが、このような批判は多くの場合見当違いです。そもそも、jQuery と Vue.jsでは解決する問題が異なります。両者は併用することが可能で、互いに相容れないものではありません。
>　重要なのは、ウェブサイトやアプリケーションの仕様や問題を把握して、適切な技術を選択することです。(p.412)

## まとめ
Vue.jsを体系立てて学習したい人、Vue.jsを用いた実践的なアプリケーション開発の方法を知りたい人におすすめです。

[Vue.js入門 基礎から実践アプリケーション開発まで](https://gihyo.jp/book/2018/978-4-297-10091-9)
古いMediaInfo CLIをLinux にインストールする

## 実行環境
- OS: CentOS release 6.8
- type: x86_64
- Mediainfo: v0.7.87

## インストール済みの関連ライブラリを削除する

```bash
yum remove mediainfo libzen* libmediainfo*
```

## source からコンパイルしてインストール
旧バージョンは以下で提供されている
https://old.mediaarea.net/download/

バイナリはエラーを解消できなかったため今回はsourceから入れる。

### libzen(0.4.32)

```bash
wget https://old.mediaarea.net/download/source/libzen/0.4.32/libzen_0.4.32.tar.gz
tar xvzf libzen_0.4.32.tar.gz
cd Zenlib/Project/GNU/Library
./autogen.sh
./configure --enable-static
make
make install
```

### libmediainfo(0.7.78)

```bash
wget https://old.mediaarea.net/download/source/libmediainfo/0.7.78/libmediainfo_0.7.78.tar.gz
tar xvzf libmediainfo_0.7.78.tar.gz
cd MediaInfoLib/Project/GNU/Library
./autogen.sh
./configure --enable-static
make
make install
```

### mediainfo(0.7.78)

```bash
wget https://old.mediaarea.net/download/source/mediainfo/0.7.78/mediainfo_0.7.78.tar.gz
tar xvzf mediainfo_0.7.78.tar.gz
cd MediaInfo/Project/GNU/CLI
./autogen.sh
./configure --enable-shared
make
make install
```

### 確認

```bash
/usr/local/bin/mediainfo --Version
```

MediaInfo Command line,
MediaInfoLib - v0.7.78




## 参考URL
https://github.com/MediaArea/MediaInfo
bootstrap 

基本構成

```html

container 箱
 row　　　　　　　　　　　　列
   col　　　　　　　　一要素

例）


<div caonatiner ="container">
  <div class="row">
    <div class="col">1行目</div>
    <div class="col">2行目</div>
    <div class="col">3行目</div>
  </div>
  <div class="row">
    <dvi class="col">4行目</dvi>
    <dvi class="col">5行目</dvi>
    <dvi class="col">4行目</dvi>
  </div>
</div>


```

レスポンシブ

```html

col-sm →　スマホ
col-md　→　タブレット
col-lg　→　PC

動作
　横列が縦列になる

<div caonatiner ="container">
  <div class="row">
    <div class="col-sm">1行目</div>
    <div class="col-sm">2行目</div>
    <div class="col-sm">3行目</div>
  </div>
  <div class="row">
    <dvi class="col">4行目</dvi>
    <dvi class="col">5行目</dvi>
    <dvi class="col">4行目</dvi>
  </div>
</div>


```
WatchKitを試してみる２　位置情報の読み取り



### 開発環境

+ XCode10.1
+ Swift4.2.1

前回から時間が空きましたがWatchKitを試してみる第２回です。

今回はAppleWatch本体のGPS情報を読み取る試み。

といっても一旦、理解すれば簡単なもの。

```InterfaceController.swift
import CoreLocation

class InterfaceController: WKInterfaceController, CLLocationManagerDelegate {

    var locationManager = CLLocationManager()
    
    override func awake(withContext context: Any?) {
        super.awake(withContext: context)

        locationManager.delegate = self
        
        locationManager.startUpdatingLocation()

    }

 func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {
        let lat = locations.last?.coordinate.latitude
        let long = locations.last?.coordinate.longitude
        
        print("lat: " + (lat?.description)! + "long: " + (long?.description)!)
    }
```
```ViewController.swift

import CoreLocation

class ViewController: UIViewController, CLLocationManagerDelegate {

    var locationManager = CLLocationManager()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        locationManager.requestAlwaysAuthorization()
    }
}
```

GPSを使う許可はiPhoneのアプリ側にCLLocationManagerの許可をとる記述が必要みたいです。
後はiPhone側のinfo.plistに下記の３つの記述を追加。

Privacy - Location Always and When In Use Usage Description
Privacy - Location Always Usage Description
Privacy - Location When In Use Usage Description

後は最初にiPhone側のアプリを立ち上げて許可を取ればOK。
うーん、あんまり単体で出来る事ないのね

##### 参考ページ
[A watchOS 2 WatchKit Map Tutorial](https://www.techotopia.com/index.php/A_watchOS_2_WatchKit_Map_Tutorial)