OmniAICreator/Qiita-1.07M huggingface dataset:
【Raspberry Pi】ownCloudをインストール

##概要
オンラインストレージサービスって、突然無料枠が減ったり、大規模なセキュリティ事故起こしてたり、利用規約を見るとジャイアン的だったり、と、なかなか、これだ！というの見つからないですよね。
じゃあ、自分で作っちゃえ、ということで、ownCloudを導入しました。

※今回記事にするのはラズパイにownCloudを導入するところまでで、ストレージの設定（外付けハードディスクを接続してマウントする→いずれS3と連携させたいため）とか、ネットワーク設定（ルーターに穴をあけてインターネットからも接続できるようにする→環境によって異なるため）とか、クライアントアプリのインストール（→簡単）とか共有の設定（→環境によるため）とかは含みません。中途半端でごめんなさい。

##参考にしたサイト

- [Raspberry Pi 3 に ownCloud X をインストール](https://blog.smallserver.jp/raspberry-pi-3-%E3%81%AB-owncloud-x-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB/)

##前提条件

- モデル : Raspberry Pi 3 Model B
- OS : Raspbian Stretch

```Bash:
$ uname -a
Linux raspberrypi 4.14.33-v7+ #1109 SMP Tue Apr 10 17:28:38 BST 2018 armv7l GNU/Linux
```

##事前準備

いつもの手順と、Webサーバ、MariaDB、PHP等をインストール。

```Bash:
$ sudo apt-get update
$ sudo apt-get upgrade

$ sudo apt-get install -y apache2 mariadb-server libapache2-mod-php7.0 php7.0-gd php7.0-json php7.0-mysql php7.0-curl php7.0-intl php7.0-mcrypt php-imagick php7.0-zip php7.0-xml php7.0-mbstring memcached php7.0-memcached php-apcu
```

##Webサーバの設定

このあたりは、ほぼ参考サイトどおりです（参考サイトはrootで実行してますが、私の環境はrootを有効化していないため一般ユーザーで実施しています）。

```Bash:
$ cd /etc/apache2/sites-available/
$ sudo vi owncloud.conf # 新規作成
Alias /owncloud "/var/www/owncloud/"
<Directory /var/www/owncloud/>
        Options +FollowSymlinks
        AllowOverride All
 
        <IfModule mod_dav.c>
                Dav off
        </IfModule>
 
        SetEnv HOME /var/www/owncloud
        SetEnv HTTP_HOME /var/www/owncloud
</Directory>

$ sudo a2ensite owncloud.conf
$ sudo a2enmod rewrite
$ sudo a2enmod headers

$ sudo systemctl restart apache2
```

※ファイルアップロードの上限を変更（仮に1000M(1G)バイト）する場合は、以下の手順も実施。

```Bash:
$ sudo vi /etc/php/7.0/apache2/php.ini # 編集

upload_max_filesize = 2M
↓
upload_max_filesize = 1000M

post_max_size = 8M
↓
post_max_size = 1000M
```

##データベースの設定

データベースを作成しユーザとパスワードを設定します。
今回は例として以下の値を設定します。
・データベース名：owncloud
・ユーザ名：root
・パスワード：password

```Bash:
$ sudo mysql -uroot
> CREATE DATABASE IF NOT EXISTS owncloud;
> GRANT ALL PRIVILEGES ON owncloud.* TO 'root'@'localhost' IDENTIFIED BY 'password';
> quit
```

##ownCloudのインストール

いよいよ、ownCloudをインストールし、データフォルダを作成します。

```Bash:
$ cd /var/www/
$ sudo wget https://download.owncloud.org/community/owncloud-10.0.3.tar.bz2
$ sudo tar xvf owncloud-10.0.3.tar.bz2
$ sudo rm -f owncloud-10.0.3.tar.bz2
$ sudo mkdir /var/www/owncloud/data
$ sudo chown -R www-data:www-data /var/wwww/owncloud/
$ sudo cmhod 770 /var/wwww/owncloud/data/
$ sudo reboot
```

##ownCloud初期設定

以下のアドレスに接続します。

```
http://[ラズパイのIPアドレス]/owncloud/
```

初期設定画面が表示されるので、適当な値を入力します。
今回は例として以下の値を設定します。
・管理者アカウント：admin
・管理者パスワード：password
・データフォルダー：/var/www/owncloud/data/
・データベースのユーザー名：root
・データベースのパスワード：password
・データベース名：owncloud
・データベースのホスト名：localhost

画面がなくてすみません。
ちょっと不安なくらい待つとログイン画面が表示されます。

![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/247920/2224d73e-9291-90b2-8036-5cfc3a1f769f.png)

今回設定した管理者アカウントと管理者パスワードでログインできれば成功です！

##最後に

ブラウザがやたらと重い気がしますが、クライアントアプリを入れればわりと快適です。
オンラインストレージのつもりで導入しましたが、ローカルの共有もこれでいいかな。
いずれ、AWSのS3に連携させてみようと思います。

調べているうちにNextcloudってのもあるのが分かって、こっちも試したいですね。
【React】FetchAPIを使った非同期通信のやり方

ReactでFetchAPIを使って非同期通信するフォームを作る方法をまとめておきます。

```react
    class doSomethingButton extends React.Component{
        render(){
            return (
                <form id="do_something" onSubmit={
                    function(){
                        fetch(url, {
                            method: 'POST',
                            body: 'test'
                        })
                        .then(response => {
                            if (!response.ok) {
                               // 失敗時の処理
                            }
                        })
                    }}
                >
                <button type="submit">
                    卍ここ押すと非同期通信卍
                </button>
                </form>
            )
        }
    }

    ReactDOM.render(
        <doSomethingButton />,
        document.getElementById('hoge')
    );
```
#解説
 - class dosomethingはReactコンポーネントで、ReactDOM.renderによって描画してほしい要素とその動作を定義する
    - render(){return( hogehoge )}といったふうに
    - ボタンを押したときやフォーム送信したときの動作は要素のonClickやonSubmitなどに定義する
 - 非同期通信はFetchAPIを使った
    - jqueryの$.ajaxに使い方が似ているが、done()やfail()はないので!response.okでエラーハンドリングする
【Unity】iOSアプリのビルドではまった点のメモ



## プロビジョニングファイルが作れない / RoutingHTTPServerが立ち上がらなくてはじかれる

CocoaPodsを導入したら解決した。

[iOSライブラリ管理ツール「CocoaPods」の使用方法](https://qiita.com/satoken0417/items/479bcdf91cff2634ffb1)

```bash:Podfile
target 'Unity-iPhone'
pod 'CocoaHTTPServer' 
pod 'RoutingHTTPServer'
```

上のPodfileを目的のディレクトリに置いて、`pod install`
xcworkspaceが作られているので、ダブルクリックで開く


## 対象のiOSのバージョンをXcodeがサポートしていない

```
Could not locate device support files.

This iPad Wi-Fi + 4G (LTE/GSM) is running iOS 7.0.2 (11A501), which may not be supported by this version of Xcode.
```

Xcode9.3を使用していて、
サポートの下限はiOS8.0なのでサポート対象外。

しかしXcodeのダウングレードは不要。
足りないバージョンを追加することで解決。

[XcodeにサポートしていないバージョンのiOSを追加する【iOS】](http://kan-kikuchi.hatenablog.com/entry/Could_not_locate_device_support_files)


## xxx is busy

![スクリーンショット 2018-05-08 18.56.11.png](https://qiita-image-store.s3.amazonaws.com/0/136286/7cb8cf8c-dc4e-7eb1-b8e6-d22b906d2ade.png "スクリーンショット 2018-05-08 18.56.11.png")

-> 端末を再起動で直る
GoogleAnalyticsで検索キーワードごとに集計できるようにした

## あらすじ

GoogleAnalytics(以下GA)のサイト内検索機能でキーワードをいい感じに集計したい。
Googleのヘルプどおり設定をしてみたが思っていた感じじゃない部分があって試行錯誤した話。

### ※注意事項

一般的な検索条件としては `A OR B` のようにワードの組み合わせの分析をすると思いますが、
本件では `A` の数と `B` の数をそれぞれ集計したいみたいなお題です。

## GAのサイト内検索の概要

1. 管理＞ビューの設定でサイト内検索をONにする
2. キーワードに相当するパラメータ名(`q` とか `word` とか)を入力する
    * ※カンマ区切りで５個まで
3. 行動＞サイト内検索でワードごとのアクセスログが見れる

※ 集計には少し時間がかかるようです

## 試行錯誤したところ

### PHPの配列のパラメータは `hoge[]` のようにする

`keyword_ids[]=1` のようなやつはパラメータ名に `keyword_ids[]`を追加したら取得できるようになりました。

### Ajaxで検索している場合はJSでトラッキング情報を送る必要があった

HTMLのForm等でGETリクエストする場合はいいのですが、JS等でAPIを叩いて動的に表示を変更する場合はトラッキングタグが送信されません。

下記のように関数でURLを送信する必要があります。

```js
ga('send', 'pageview', '/search?q=宇宙 天体観測');
```

## 複数ワードがつながってしまう

JSでトラッキング情報を送ることで集計はされました。

ですが今回は、`宇宙 天体観測` と検索されたとき、通常は `宇宙`  `天体観測` となってほしいですが、そのままだと `宇宙 天体観測` が1項目として計測されてしまいます。

カンマ区切りとかいろいろ試しましたが、複数の項目として送信するには同名のパラメーターを複数つけて送ると良いようです。

```js
ga('send', 'pageview', '/search?q=宇宙&q=天体観測');
```

## まとめ

これでそれぞれのワードごとの集計ができるようになりました。
Formベースの検索じゃない場合はAPIやURLの仕様との兼ね合いがうまく擦り合わないことが多いのではないかと思うので、この部分については基本的にJSでトラッキング情報を送信する前提で、それようのパラメータで完結するほうが棲み分けができるように思いました。

例)
パラメータ名設定: `keywords`
リクエストURL: `https://example.org/search?q=宇宙 天体観測`
GAに送信する値 : `ga('send', 'pageview', '/search?keywords=宇宙&keywords=天体観測');`

初回アクセス時にサーバーサイドで表示しているのであれば、表示時にJSで送信してあげるイメージです。
Windows Subsystem for Linux(WSL)が有効化できないときの対処法

# 概要
　Windows Subsystem for Linux(以下WSL)を有効化したのに、再起動すると有効化できていない場合の対処法
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/160611/efe446dc-8b12-5649-a0fb-95a722588cf2.png)
このチェックボックスをONにしたのに、再起動するとOFFになってしまう状況を解決する方法です。
# 原因
おそらくOSの不具合
# 解決方法
Windowsを上書きインストールします。
もちろん、クリーンインストールではないのでデータは保持されます。
方法については、以下のリンクを参照してください。
http://windowsfaq.net/windowsupdate/repair-setup/
pysam はwindowsにインストールできない

# PysamはWindows 7/10上ではanaconda仮想環境であってもインストールできない
Anaconda2/3をインストールして仮想環境でconda install や　pip installを使っても、Pysamがインストールできませんでした。

結局、Git-Hubのpysam-developers/pysamに以下のコメントがありました。
https://github.com/pysam-developers/pysam/issues/575

Pysam does not yet support windows, though there are seem to be mods in the wild that do.
DEPRECATION WARNINGが出たらテストを止める

Railsのアップデートした時に、 `DEPRECATION WARNING` を潰したかったので調べた

# 結論

```ruby:config/environments/test.rb
Rails.application.configure do
…
  config.active_support.deprecation = :raise
…
end
```

を設定して

```bash
bundle exec rspec --fail-fast
```
React Native で、画面一杯サイズに広げる時の便利な書き方

React Native の Tips。

React Navigation のソースコード見ていたら書いてあった。

https://github.com/react-navigation/react-navigation/blob/8ec2466f/src/views/Header/Header.js#L496

```js
const styles = StyleSheet.create({
  backgroundImage: {
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
  },
})
```

としたい場合がしばしばあるが、これは

```js
const styles = StyleSheet.create({
  backgroundImage: {
    ...StyleSheet.absoluteFillObject,
  },
})
```

と、書ける。


ドキュメントにもよく見たらあった。

https://facebook.github.io/react-native/docs/stylesheet.html#absolutefill
Djangoのエラー「The STATICFILES_DIRS setting should not contain the STATIC_ROOT setting.」が出たので対処した

PythonのDjangoでサクッとサーバーを動かそうとしたら、エラーが出た。。。

```
$ python manage.py runserver

Unhandled exception in thread started by <function check_errors.<locals>.wrapper at 0x7fe3e6f87bf8>
Traceback (most recent call last):
  File "/usr/bin/.pyenv/versions/3.6.4/lib/python3.6/site-packages/django/utils/autoreload.py", line 225, in wrapper
    fn(*args, **kwargs)
  File "/usr/bin/.pyenv/versions/3.6.4/lib/python3.6/site-packages/django/core/management/commands/runserver.py", line 120, in inner_run
    self.check(display_num_errors=True)
  File "/usr/bin/.pyenv/versions/3.6.4/lib/python3.6/site-packages/django/core/management/base.py", line 410, in check
    raise SystemCheckError(msg)
django.core.management.base.SystemCheckError: SystemCheckError: System check identified some issues:

ERRORS:
?: (staticfiles.E002) The STATICFILES_DIRS setting should not contain the STATIC_ROOT setting.
```
STATICFILES_DIRSの設定がSTATIC_ROOTの設定と重複してるよーって怒られた。。。
早速対処。

```mySite/setting.py
・
・
・
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "static/")
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)
↓
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "static/")
#STATICFILES_DIRS = (
#    os.path.join(BASE_DIR, "static"),
#)

```
STATICFILES_DIRSの箇所をコメントアウト。
再度サーバーを起動したら動いた。

```
$ python manage.py runserver
```
【Vue.js】動的リストにより生成する select/option の初期値が画面リロード時に表示されない課題の解決

Vue.js の現場に初めて着任して、初めてビューの（多分）ちょろい修正をしてたらかなり詰まった話

## 環境
```Vue.js 1.x.x```

## 課題
* プルダウンメニュー内の空選択肢を削除して必ず何かしら有効な値が選択されるようにすること  
  * 空選択肢は HTML に直書きされているが、他の選択肢は Controller から渡される動的なリスト
  * タイトルと差分があるが、空選択肢の削除自体はちょろかったものの、それにより生じたタイトルの課題がよりつらかったという話


## わかったこと（結論）
* 動的なリストを ```v-for``` で展開すると HTML で直接書いた ```selected``` は無効
  * マニュアルに記載有
* ```v-mode``` の値が、選択肢（```option```）のいずれの ```value``` とも一致せず、かつ ```MacOS``` の場合は初期選択肢が非表示
  * プルダウンメニューを開くと選択肢が存在
  * マニュアルに記載有
  * テンプレートがコンパイルされる前に ```v-mode``` に選択肢（```option```）のいずれかの値を入れれば解決すること
      * 今回の対応では、一つ目の選択肢の値が入るように実装

## わからなかったこと（今後の課題）
* 恐らく ```Vue``` 側の ```data``` 内に ```selected``` を指定してうまくやれば同等のことをできるはず……
  * だが結局できなかった。その理由は未明

## やったこと（試行錯誤）
* 空選択肢が HTML に直書きされていたため、削除
  * 空選択肢が無くなれば、他の選択肢が自然と選択されると考えていたが、失敗
* 選択肢の一つ目にあたる ```option``` 句に ```selected``` 属性を付けて ```selected``` を設定
  * 要するに ```selected``` にしてしまえばいいのだと考えていたが、失敗
  * 公式ドキュメントに無効の旨が書いてあったため要反省
* 公式ドキュメントより、```Vue``` について色々書いてあるところの ```data``` 部分に ```selected``` を設定
  * 試行錯誤しつつ様々な値を指定してみたが、失敗
  * いま思うに、複数のプルダウンメニュー……つまりオブジェクトを操作している部分なので、意中のものに指定する何かが必要だったのでは
* （先輩に尋ねて）```created()``` をフックして ```v-mode``` の値を当該プルダウンメニューの選択肢の一番目の値に上書くよう変更
  * 成功 → レビュー中
  * 値の上書きは怖いイメージを持っているが、ビルドに通り挙動も問題ない様子


## 振り返り
* ちょろい課題だなって思って ```Vue.js``` 全体を把握しようとせずに舐めてかかったのは NG
* 公式ドキュメントを真面目に読み始めたが、独力で解決できなかったのが辛い
* ```selected``` を用いて実現する方法は引き続き調査（```2.x``` だと楽だったりしないかな）
* 公式ドキュメントやインターネットに転がってる情報と手元にあるコードのギャップが辛くもあったのでバージョンアップは急務か
ミニゲーム作成

<h1>ミニゲーム作成</h1>
今日は簡単なミニゲーム作成をした。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/249283/94f1540d-0e31-3bcf-ad21-89ea4610002e.png)
本を見ながらソースコードをうったので
ちゃんと理解して作らないといけないなと思いました。
でも、どうしたらプログラム言語を理解できるんだろうって思います。


皆さんどういう風にプログラミングの勉強や資格取得のお勉強をどうやってされているか教えてほしいです。
何かアドバイスをもらえたらうれしいです。
Google Data Studioで山口メンバーに関するツイートを可視化する

## はじめに
以前[google data studio](https://cloud.google.com/data-studio/?hl=ja)にBQを繋いでデータの可視化をしたりしていたのだが、最近見たらコネクタがめっちゃ増えてた。どうやら自前でコネクタを作れるようになったらしい(これ自体はちょっと前からあったようだが知らなかった。。。)
参考:[community connector](https://developers.google.com/datastudio/connector/get-started)
その中にフリーで使える[Data Studio Community Connectors Gallery](https://developers.google.com/datastudio/connector/gallery/)といものがあり、これがGDSのコネクタ画面にデフォで表示されているようだ。
この中にある[Twitter](https://digitalinspiration.com/twitter-data-studio-6660)を使って渦中の人物の世間の注目度を可視化してみたい。

## How to
1 データソースのパートナーコネクタから「Twitter」を選択
![](https://gyazo.com/a8d7fbe3ffe8638513775e98742c883d.png)

2 googleとTwitterの認証を通して、サーチしたいワードを入力
(すでに認証を通しているので画像には認証画面がありません)
![](https://gyazo.com/8c27911febd4a9177e450cd81b00d283.png)

3 フィールド画面に遷移するので「レポートに追加」を押下
(フィールドにあるものはTwitter APIで取れるものですね。当たり前ですが。。。)
![](https://gyazo.com/fdd4240fedf3eda7357d6d816f77d644.png)

## 可視化する
1 「山口メンバー」が含まれたツイートのファボ割合の円グラフ
(円グラフですがわかりやすいようにファボ数を表示させてます)

![](https://gyazo.com/4808cef7de71408d86580e5a3bb29535.png)

2 「山口メンバー」を含むツイートをしたアカウントのフォロワー数

![](https://gyazo.com/0fb27a849213a66a36c4c7a1697c77e0.png)


## 感想
- あまりいい感じの可視化はできなかった(センスがないのは否めない)
- 最新の500件しか取れないので情報量としては少なめ
- Twitter以外にも気軽にコネクトできるようになっており、GDSは今後ますます使い勝手がよくなりそう。継続してウォッチしていきたい。
statefulset 削除エラー解消方法

* 問題

statefulsetを削除した時、下記のエラーが出てしまって、削除できなかった。

```
$ kubectl delete statefulset test
error: no kind "GetOptions" is registered for version "apps/v1"
```

* 原因

kubectl clientのバージョンが1.8.4で、エラーが出ました

* 解決方法

  * gcloud components remove kubectl で kubectlをアンインストールする
  * brew upgrade kubernetes-cli　を実行
  * brew install kubectl　を実行
  * kubectl clientバージョンがv1.10.1になって、statefulsetが正常に削除できました
【django】個数区切りでデータを並べる

dbから読み込んだデータをテーブルに並べたい時があると思います。
例えば「左上から1行につき5個」といった感じにしたいときはこんな風に書きます。

```python
        <table>
            {% for member in members %}
            {% if forloop.counter0|divisibleby:"5" %}
            </tr>
            {% endif %}
                <td>{{member.name}}:{{member.age}}</td>
            {% endfor %}
            </tr>
        </table>
```

#いちおう解説
 - forloop.couter0
    - この文を囲っているforループの現在のループ回数(0からカウント)
 - ｜（縦線）
    - 左の結果を右に渡すという意味　linuxコマンドの｜みたいなかんじ
 - forloop.counter0|divisibleby:"5"
    - forloop.counter0が５で割り切れる数ならTrueが返ってくる。
    - ここではTrueなら</tr>が出力される。対になる<tr>は勝手に補完してくれるみたい（環境によるのかも）
ディレクトリツリーをExcelに簡単に起こす

#要約
昔ながらのExcelとかで設計書提出してるときによくある
ディレクトリツリー図をWindows標準機能だけで簡単にExcelに起こすよ

##手順
1)ディレクトリツリーを起こしたい起点でCMDコマンドの実行

こんな感じ。
![01.jpg](https://qiita-image-store.s3.amazonaws.com/0/144657/5666d76c-e880-e7d7-15bd-9a2434adc9da.jpeg)

2)コマンドプロンプト画面でtreeコマンドの実行

出力先はどこでも大丈夫です。
```
tree -f > hogehoge.txt
```


3)エディタで置換(あえてメモ帳でやってますがなんでもいいです)
![03.jpg](https://qiita-image-store.s3.amazonaws.com/0/144657/43a5d7e3-8c61-08d0-70b4-a6cc1eb62f41.jpeg)
そこで、以下の置換を順に実行しましょう。
"│" → "  "(※半角スペース2つ)
"└" → "  "(※半角スペース2つ)
"─" → "  "(※半角スペース2つ)
"├" → "  "(※半角スペース2つ)
"    "(※半角スペース4つ) → タブ１つ(メモ帳の場合はタブを置換ウインドウにコピペ)

4)Excelに貼る
先のテキストを全文コピーしてExcelに貼ると…
![04.jpg](https://qiita-image-store.s3.amazonaws.com/0/144657/77ae32ef-bac5-6efd-c912-7c71ed3fbaa6.jpeg)

という形になります。あとはお好きにどうぞ。

まあ使える機会があれば参考にしてやってください。
ソフトを自由に突っ込めない環境でも再現できますし、
Windowsのバージョンにも拠らないので使い甲斐はあるとおもいます。
HerokuのContainer RegistryベースのデプロイをGitLab-CI上で行う

# TL;DR

GitLab.comのプロジェクトで次の準備を一通り行うと、`master`ブランチへプッシュするたびにherokuへデプロイしてくれるようになります。

1. `HEROKU_TOKEN`に自身のherokuアカウントのAPIキーを登録する [^1]
2. `HEROKU_APP`にデプロイ先となるherokuアプリケーションの名前を登録する [^2]
3. `.gitlab-ci.yml`に次のタスクをコピペする

```yaml:.gitlab-ci.yml

push-heroku:
  only:
    - master
  image: docker:stable
  services:
    - docker:dind
  script:
    - echo $HEROKU_TOKEN | docker login --username=_ --password-stdin registry.heroku.com
    - docker build -t registry.heroku.com/$HEROKU_APP/web .
    - docker push registry.heroku.com/$HEROKU_APP/web
```

# 本文

## 何故やりたくなったのか

すごくコンパクトな自分用Webサービスの動作環境として、最近herokuを主に使っています。
普段プロジェクト管理はGitLab.comを使っているのですが、せっかくなので"Heroku Git"へではなく"Container Registry"にデプロイしてみることにしました。

## HerokuのContainer Registryの仕組み

仕組みといっても、`Heroku Git`と表面的には大きな違いがあるわけではありません。
`Heroku Git`はプッシュすると、向こう側でBuildpackベースでアプリが動くようになるのに対して、`Container Registry`は手元でビルドしたDockerイメージをプッシュして、そのコンテナをそのまま動かすようにできています。

Webアプリ用のポートを環境変数から受け取って待ち受けたり、HTTP/HTTPSをX-Forwarded-Protoで判別するあたりは変わらないです。

基本的には、Heroku-CLIを標準的な取扱方法としており、`heroku container:push web`を実行すると
1. `docker build` in local
2. `docker push` to heroku container registory
3. `docker run` in heroku
4. をやっていくような感じっぽいです。

さて、ここでのDockerイメージのプッシュ対象となるContainer Registryは`registry.heroku.com`です。
そして、各アプリの動かすときのイメージ名は`registry.heroku.com/<app>/<process-type>`と定められてます。
サイトにはRegistryへの`docker-login`の方法に`heroku container:login`だけでなく通常の`docker login`も併記されており、Heroku-CLIは別に必要ないことがわかります。

## GitLab-CIでDocker pushを実現する

というわけで、GitLab-CIの仕組みでContainerRegistryへプッシュするまでを作りました。

### Herokuの準備

Herokuの側から事前に確認しておくべき点は、次の2個です。

* 自分のアカウントのAPI Key
* デプロイする先のアプリケーション名

### `.gitlab-ci.yml`の中身（タスク設定）

gitlab-runnerは`services`の概念により、プロジェクトコード用のタスクの裏にDocker in Docker(dind)を動かして`docker build`を実行してビルドができます。

```yaml
  image: docker:stable
  services:
    - docker:dind
```

dockerコマンド用に`docker:stable`イメージを、dockerビルド環境用に`docker:dind`サービスを指定します。

`docker login`にはCIなどでパスワードなどを公開しないようにする、`--password-stdin`オプションがあります。
これを利用すると、`docker login`の前にパスワードをechoすることができるようになり、パスワードを出さずに済むようになります。


```yaml
  script:
    - echo $HEROKU_TOKEN | docker login --username=_ --password-stdin registry.heroku.com
```

API Keyをパスワードに使うことで、usernameを`_`にすることが可能です。

```yaml
  script:
    (略)
    - docker build -t registry.heroku.com/$HEROKU_APP/web .
    - docker push registry.heroku.com/$HEROKU_APP/web
```

あとは、GitLab Registry向けにbuild+pushするのと同じようにタスク設定することで、Heroku上にDockerコンテナ型のアプリをデプロイすることができるようになります。
便利ですね。




# 参考リンク

* [Heroku-CLIのContainerRegistryに関するページ](https://devcenter.heroku.com/articles/container-registry-and-runtime)

[^1]: CI/CD設定の、`Secret Variables`の利用を推奨します
[^2]: `.gitlab-ci.yml`へのベタ書きは推奨しません
Docker for WindowsでGUI(sshでX11転送しない方法)

# python環境構築に決定版がないと感じている
- [condaとpipは混在させてはいけない](http://onoz000.hatenablog.com/entry/2018/02/11/142347)
- virtualenv or pyenv or pipenv or ...

# それDocker for Windowsで
- wsl使わない
 - 建前：なるべくピュアでシンプルな環境にしたい
 - 建前：色んなPython環境つくれる
 - 現実：（SEP利用かつバージョン指定な制約付きの環境で）[SEPが古くてWin10 updateと非互換](https://support.symantec.com/en_US/article.TECH235458.html)なためwsl使えない
- dockerコンテナではsshd動かさない->[理由](https://postd.cc/docker-ssh-considered-evil/)
- インストール手順は書きません、特にトラブルなく動いてしまうハズ[参考つけときます](/inferist/items/1bb9ab6eee243648d44c)

# Dockerの使い心地を確認する
```console:power_shell
>docker pull ubuntu
>docker run -it ubuntu
```
```console:ubuntu
$apt update
$apt install python3-tk tk-dev
$apt install python3-pip
$pip3 install matplotlib chainer
$wget https://github.com/chainer/chainer/archive/v4.0.0.tar.gz
$tar xzf v4.0.0.tar.gz
$python3 chainer-4.0.0/examples/mnist/train_mnist.py
```

- DISPLAYが無いぞと怒られます（想定とおり）

# VcXsrv（インストール手順は省略）

# この記事の美味しいところはここ
1. ubuntuに環境変数`DISPLAY=10.0.75.1:0.0`を設定する
 - ***localhostじゃない***
 - IPは一応ipconfigでDockerNATの値を確認してください
 - 渡し方は`docker run -e DISPLAY=..`でも`export DISPLAY=..`でも
1. VcXsrvのアクセスコントロールをオフにする（***危険***）
 - Xauthがうまいこと動きませんでした（32bit版、64bit版両方試したのですが）
  - 本当はXauthしたいです、やりかた教えてください
  - `xhost +[hostname]`でもいいのですが`docker -h hostname`と合わせたけどやっぱり上手くいきませんでした
 - 起動オプション`vcxsrv -ac -multiwindow`
1. Windowsファイアウォールに穴をあける
 - `コントロール パネル\システムとセキュリティ\Windows ファイアウォール\許可されたアプリ`
 - `VcXsrv windows xserver`を許可する
  - 答えを書くと単純なのですがずっとここが気づけませんでした

# 以上で動くはず
- plotしたり、物体検知したりどうぞ

# 別解
- 試してないけどWindowsで直接描画しなくてよいなら[Xvfb を使って仮想ディスプレイを作る](http://blog.amedama.jp/entry/2016/01/03/115602)という手もありそうです

# python公式dockerイメージは不採用
- `docker pull python`
- 700MBて重過ぎ

おわり
td-agentのbufferをflushする


# TL;DR

よくある運用のアレです。

# Tips
## bufferをflush

td-agentが走っているインスタンスを落とす前に、bufferに溜まったものを送っておきましょう。
ロストしても良いものであればやらなくてもOK。

```
ls -al /var/tmp/td-agent/* 
sudo kill -SIGUSR1 `cat /var/run/td-agent/td-agent.pid`
sleep 5
ls -al /var/tmp/td-agent/* 
```

[Fluentd’s Signal Handling](https://docs.fluentd.org/v0.12/articles/signals#sigusr1)
[参考: シグナルとAPIを使ったハンドリング](https://qiita.com/uzresk/items/3bfeeac82dfcb2a4300e#%E3%82%B7%E3%82%B0%E3%83%8A%E3%83%AB%E3%81%A8api%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%83%8F%E3%83%B3%E3%83%89%E3%83%AA%E3%83%B3%E3%82%B0)
Spring Boot 1.5.12 へアップデートする時に直した箇所・ハマった事

# はじめに
元々作成していたプロジェクトがSpring Boot 1.3.3だったのですが、
4月に[Spring Frameworkの脆弱性の件](https://www.jpcert.or.jp/at/2018/at180014.html)があったので、
それに対応したSpring Boot 1.5.12にバージョンアップする事になりました。

単純にpom.xmlでバージョンを書き換えるだけではもちろんダメだったので…
その時に発生した問題やその解消方法を以下に載せます。

# テストコードのコンパイルエラー
テストコードにて以下の二つのアノテーションを使用していましたが、
バージョンアップに伴い「見つかりませんよ」と怒られるようになってしまいました。

```
@SpringApplicationConfiguration(classes=MyConfig.class)
@WebIntegrationTest
```

調べたところ、以下のページにて両方とも```@SpringBootTest```を代わりに使用する形になるとのこと。
https://stackoverflow.com/questions/42395225/springapplicationconfiguration-not-found-erroneous-spring-boot-starter-test-con
>From @SpringApplicationConfiguration(classes=MyConfig.class) to @SpringBootTest(classes=MyConfig.class)
From @WebIntegrationTest to  @SpringBootTest(webEnvironment=WebEnvironment.DEFINED_PORT) (or RANDOM_PORT)

今回は両方使っていたので、以下のように書き換えました。
```@SpringBootTest(classes=MyConfig.class, webEnvironment=WebEnvironment.RANDOM_PORT)```

以上にて、テストコードのエラーは解消しました。

# インタフェースが見つからないエラー
エラー画面を表示するために```EmbeddedServletContainerCustomizer```インタフェースをimportしていたのですが、
バージョンアップ後ビルドすると「見つからないよ」と怒られるようになってしまいました。
ほんとか？と思いながら上記のテストコードのように代替を探したのですが見つからず…。

本当に無いのかな？と思い、```spring-boot-1.5.12.RELEASE.jar```の下の階層を探ってみると、
```EmbeddedServletContainerCustomizer```インタフェースのファイル自体は存在していました。

その上で中身を見ようとすると以下のエラーが発生しており、中身を見れない状態。```
java.util.zip.ZipException: invalid LOC header (bad signature)
```

調べてみると、jarファイルのバージョンがおかしい事が原因らしい？
対応方法として以下のmavenのリポジトリフォルダを削除してSTSを再起動する。
> C:\Users\[ユーザー名]\.m2\repository

以上で、インタフェースが見つからないエラーの対応は完了です。

# プロジェクト実行時のエラー

上記二つの対応とは別に、
バージョンアップ後にとりあえずプロジェクトを実行してみようと思ったところ、
以下のような絶望的なエラーが発生。

```
Exception in thread "main" java.lang.NoClassDefFoundError: org/springframework/boot/SpringApplication
    at jp.co.ysk.pepper.qlip.App.main(App.java:12)
Caused by: java.lang.ClassNotFoundException: org.springframework.boot.SpringApplication
    at java.net.URLClassLoader.findClass(Unknown Source)
    at java.lang.ClassLoader.loadClass(Unknown Source)
    at sun.misc.Launcher$AppClassLoader.loadClass(Unknown Source)
    at java.lang.ClassLoader.loadClass(Unknown Source)
    ... 1 more
```

少し調べてみたのですが、根本的な原因はわからず。
とりあえず二つのコンパイルエラーを解消していくとこのエラーも解消されました。

少し不安の残る感じですが…以上です。
Rubyのscanメソッドで引っかかった話

初めての投稿になります。

記事内の間違いをご指摘をいただき記事を修正させていただきました。
よく確認をせず間違った情報を記載してしまい、大変申し訳ありませんでした。

##問題のコード

```ruby:qiita.rb
picture_ids = params[:post][:content].scan(/image(\d+)/)

picture_ids.each do |id|
  url = Picture.find_by(id: id).file
  params[:post][:content] = params[:post][:content].gsub(/\[image#{id}\]/, "<img src='#{url}' >")
end
```
[image4]など[image(数字)]の部分を抜き出したかったのですが、
これだと、[image#{id}]の部分が機能してくれませんでした。

##原因
実はscanメソッドで返される配列の形が
[["4"],["5"]]のようになっていました。
これは、scanメソッドを利用する際に、正規表現内で()を利用していた為っぽいです。

```ruby:qiita.rb
picture_ids = params[:post][:content].scan(/image(\d+)/)
```
ここでいうと　　/image(\d+)/の(\d+)　の部分ですね
scanメソッドの正規表現内で()を使って、当てはまる部分を取得すると、配列の配列として返されるらしいです。

##解決策

```ruby:qiita.rb
picture_ids = params[:post][:content].scan(/image(\d+)/)

picture_ids.each do |id|
  url = Picture.find_by(id: id).file
  params[:post][:content] = params[:post][:content].gsub(/\[image#{id[0]}\]/, "<img src='#{url}' >")
end
```
これで、うまく機能してくれました。
Laravel DuskでWebのテスト（Basic認証を添えて）


Laravel5.4よりDusk（だーすく？）というブラウザテストツールが加わったので使ってみます。
Seleniumが王道かもしれませんがLaravelで完結できて、使いやすいとなると、それに越したことはございません。

なお、私の利用は「Laravelサイト自身はもちろん、他のサイトのテストツールとして使いたい」というところです。


## 準備

### Laravelのインストール

まずはLaravelのインストール。まあ、Composerで提供されるのでなくても使えるのかな・・・。別途調べます。

```bash
composer create-project laravel/laravel dusktest
```

### duskのインストール

dusk自体のインストール。追加でインストールする必要があるようですが、別に問題ありません。

```bash
cd dusktest
composer require --dev laravel/dusk
php artisan dusk:install
```

### 日本語対応

テスト先のサイトが日本語を含む場合、以下の対応が必要とのことです。
dusk:installするとtest以下にテストの起点となるDuskTestCase.phpが追加されるので下記のように追加します。

```diff:test/DuskTestCase.php
..
    protected function driver()
    {
        $options = (new ChromeOptions)->addArguments([
            '--disable-gpu',
            '--headless',
+           '--lang=ja_JP'
        ]);

        return RemoteWebDriver::create(
            'http://localhost:9515', DesiredCapabilities::chrome()->setCapability(
                ChromeOptions::CAPABILITY, $options
            )
        );
    }
...
```

## テストを行う

では、実際にテストを行ってみます。

### テストファイルの作成

まずは、dusk makeでテストファイルを作成。

```bash
php artisan dusk:make AccessTest
```

### テストファイルの編集

テストファイルを下記のように編集します。今回のテストでは、

* そもそもサイト全体にBasic認証がかかっている
* Basic認証後にログインページがある
* ログインする
* ログイン後のページに含まれる文字を検証
* スクリーンショットもとっておく

という流れ。リリース前の管理画面などではよくあるケースかと思います。

```php:test/Browser/AccessTest.php
<?php

namespace Tests\Browser;

use Tests\DuskTestCase;
use Laravel\Dusk\Browser;
use Illuminate\Foundation\Testing\DatabaseMigrations;

class AccessTest extends DuskTestCase
{
    /**
     * A Dusk test example.
     *
     * @return void
     */
    public function testExample()
    {
        $this->browse(function (Browser $browser) {
            $browser->visit('https://username:password@testsite.hoge/login') //Basic認証
                    ->value('input[name="email"]','hoge@hoge.com') //nameで指定
                    ->value('input[name="password"]','hogehoge') //nameで指定
                    ->press('LOGIN') //submitなら文字で指定可能
                    ->assertSee('Sccess') //ログイン後のページに文字が含まれるか
                    ->screenshot("logined"); //screenshotを取得
        });
    }
}

```

>Basic認証は https://username:password@hostname/ とするようです。

### テストの実行

完了したらテストを実行します。

```bash
php artisan dusk
```

### テストの結果

OKならグリーン画面がでます。なお、assertが一個も無いと警告みたいなオレンジ画面になるようです。

```bash
PHPUnit 7.1.5 by Sebastian Bergmann and contributors.

.                                                                   1 / 1 (100%)

Time: 2.49 seconds, Memory: 12.00MB

OK (1 test, 1 assertion)
```

### 個別リクエストの指定方法
```
php artisan dusk tests/Browser/AccessTest.php
```

### 本家ページ

後は、[本家ページ](https://laravel.com/docs/5.6/dusk#available-assertions)を見て、いろいろAssertionを追加するだけ。うーん。便利。

## 参考ページ

以下のページを参考にさせていただきました。ありがとうございます。

* https://www.indetail.co.jp/blog/171215/
Rubyでエラトステネスの篩

３タイプのエラトステネスの篩を作ってベンチマークをとってみました

## Type1
1. 2〜nの数値が入った配列を用意し、先頭から順に要素を取り出していく
- 取り出した値を篩の配列に格納し、その値の倍数を配列から削除してしまう
- nの平方根以上の値になったら、ループを停止
- 配列に残った数値と、篩の配列を結合する

```rb
def test1(n)
  sqrtN = Math.sqrt(n).floor
  nums = (2..n).to_a
  flui = []
  while a = nums.shift
    flui << a
    break if sqrtN < a
    nums.delete_if { |b| b % a == 0 }
  end
  flui.concat(nums)
end
```

## Type2
1. n+1個の長さを持つ配列を用意し、0と1を`false`、それ以外を`true`にする
2. 2〜sqrt(n)まで昇順に値を確認していき、`true`なら篩配列に格納、それ以降の倍数を皆falseにしてしまう
3. ループが完了したら、配列でtrueになっているインデックス番号を追加で篩配列に入れる

```rb
def test2(n)
  sqrtN = Math.sqrt(n).floor
  dp = Array.new(n+1, true)
  dp.fill(false, 0, 2)
  flui = []
  2.upto(sqrtN) do |x|
    if dp[x]
      flui << x
      x.step(n+1, x) do |y|
        dp[y] = false
      end
    end
  end
  dp.each_with_index do |bool, idx|
    flui << idx if bool
  end
  flui
end
```

## Type3
1. 0~nの要素を持つ配列を用意し、0と1を`nil`にする
2. `sqrt(n)`の値まで昇順に見ていき、もし`nil`でなければその値を除くその倍数を皆`nil`にする
3. 最後にnilだけを削除する

```rb
def test3(n)
  sqrtN = Math.sqrt(n).floor
  nums = (0..n).to_a
  nums.fill(nil, 0, 2)
  nums.each do |x|
    next if x.nil?
    break if sqrtN < x
    (x*2).step(n, x) do |y|
      nums[y] = nil
    end
  end
  nums.compact!
end
```

## ベンチマーク
```rb
require 'benchmark'

Benchmark.bmbm 10 do |r|
  r.report "test1" do
    1000.times do |i|
      test1(1000)
    end
  end
  r.report "test2" do
    1000.times do |i|
      test2(1000)
    end
  end
  r.report "test3" do
    1000.times do |i|
      test3(1000)
    end
  end
end
```

- 結果

```
Rehearsal ----------------------------------------------
test1        0.280000   0.000000   0.280000 (  0.284107)
test2        0.180000   0.010000   0.190000 (  0.186512)
test3        0.140000   0.000000   0.140000 (  0.138681)
------------------------------------- total: 0.610000sec

                 user     system      total        real
test1        0.280000   0.010000   0.290000 (  0.282212)
test2        0.170000   0.000000   0.170000 (  0.180900)
test3        0.130000   0.000000   0.130000 (  0.138044)
```
はてなブックマークボタン用のjsの読込が重い場合がある

はてなブックマークボタンのお話。
↓のURLで作れるやつです。
http://b.hatena.ne.jp/guide/bbutton

# 発生している現象

普通にHTMLに貼り付ける場合は問題ないが、jqueryで動的にページに差し込むとなぜかボタン表示が遅いケースがある。
今年(2018年)入ってくらいからちょいちょい遅いなってときはあったけどGWちょっと前くらいからかなりの頻度で起きてるっぽい。

# 原因

重くなってる理由は以下のjsの読込が遅くなってるから。

```
https://b.st-hatena.com/js/bookmark_button.js
```

このURLでアクセスする分には問題ないのだけども後ろに適当なクエリパラメータがついたりすると重くなる、下手すると503になってそのままキャッシュされるということがおきている。

```
https://b.st-hatena.com/js/bookmark_button.js?_=XXXXXXXXXXXXXXX
```

このクエリパラメータ自体はjqueryで対象のコードをhtml()とかで挿入すると勝手についてしまっている。
これはjqueryのキャッシュ機能によるものっぽい。
（詳しくは → https://allabout.co.jp/gm/gc/24215/ ）


# 対応方法

クエリパラメータを付かなくすることは可能なのでこれで対応すればよさそう。
（参考→ http://js.studio-kingdom.com/jquery/ajax/ajax_setup ）

```
jQuery.ajaxSetup({
    cache: true
});

// 流し込む処理

jQuery.ajaxSetup({
    cache: false
});
```

もしくはむかしあった事件[^1]のときにリリースされた？optout版のコード[^2]に書き換えるとキャッシュが効いてるのか、効いてなくても早いのかはわからないが解消する。

```
https://b.st-hatena.com/js/bookmark_button_wo_al.js
```

できればはてぶ側で対応してくれないかなー。

[^1]: [こんな事件](http://hatena.g.hatena.ne.jp/hatenabookmark/20120313/1331629463)
[^2]: 現在の公式サイト内ではこのコードの案内は無い。[^1]のコメントで今後も使えるよとは言っているので使っても平気だろうか...？
twitter ハッシュタグ メンション URLを 正規表現で取得、削除 php

いろいろなところに情報あるけど、改行がバグったりしてうまく動かない。
ということで今回は

・マッチしたものを取得したい
・マッチしたものを置き換えたい

の2つしたいので、処理を別にする。

#まずは正規表現でハッシュタグ、メンションをそれぞれ取得

```

function getHashtags($tweet)
{
    $matches = array();
    preg_match_all('/#(w*[一-龠_ぁ-ん_ァ-ヴーａ-ｚＡ-Ｚa-zA-Z0-9]+|[a-zA-Z0-9_]+|[a-zA-Z0-9_]w*)/', $tweet, $matches);

    return $matches[0];
}

function getMentiontags($tweet)
{
    $matches = array();
    preg_match_all('/@(w*[一-龠_ぁ-ん_ァ-ヴーａ-ｚＡ-Ｚa-zA-Z0-9]+|[a-zA-Z0-9_]+|[a-zA-Z0-9_]w*)/', $tweet, $matches);

    return $matches[0];
}


```

#置き換える


```

$hash_tags = getHashtags($profile->body);
$mention_tags = getMentiontags($profile->body);

$okikae = $profile->body;

foreach ($hash_tags as $v) {
    $okikae = str_replace($v,'<a href="https://twitter.com/search/?q='.urlencode($v).'" target="_blank">'.$v.'</a>',$okikae);
}

foreach ($mention_tags as $v) {
    $okikae = str_replace($v,'<a href="https://twitter.com/'.str_replace("@","",$v).'" target="_blank">'.$v.'</a>',$okikae);
}

```


# 削除

置き換えでなく、削除したい場合。
上記を関数にしただけ。

```

//    ハッシュタグを削除
public static function removeHashTag($data)
{
    preg_match_all('/#(w*[一-龠_ぁ-ん_ァ-ヴーａ-ｚＡ-Ｚa-zA-Z0-9]+|[a-zA-Z0-9_]+|[a-zA-Z0-9_]w*)/',  $data, $matches);
    foreach ($matches[0] as $s) {
    $data = str_replace($s,'',$data);
}

return $data;
}

//    メンションを削除
public static function removeMention($data)
{
    preg_match_all('/@(w*[一-龠_ぁ-ん_ァ-ヴーａ-ｚＡ-Ｚa-zA-Z0-9]+|[a-zA-Z0-9_]+|[a-zA-Z0-9_]w*)/',  $data, $matches);
    foreach ($matches[0] as $s) {
        $data = str_replace($s,'',$data);
    }

    return $data;
}

//    URLを削除
public static function removeURL($data)
{
    $pattern ='@((https?://)?([-\w]+\.[-\w\.]+)+\w(:\d+)?(/([-\w/_\.]*(\?\S+)?)?)*)@';
    preg_match_all($pattern, $data, $matches);
    
    foreach ($matches[0] as $s) {
        $data = str_replace($s,'',$data);
    }

    $data = trim(preg_replace('/(?:\n|\r|\r\n)/', '', $data));
    
    return $data;
}

```

こんな感じです。
Nuxt.jsプロジェクトをv2(nuxt-edge)にアップグレードした際にハマったところ

今日の朝に以下の記事を拝見したので早速アップグレードしました。ほぼほぼこちらの記事をみてアップグレードすれば問題無いかと思います。

[【実録】Nuxt.jsの既存プロジェクトを一足早くNuxt v2(nuxt-edge)へとアップグレードする方法](https://qiita.com/potato4d/items/7b3119c88869d7622a7d)

自分は以下の2点でエラーが出ていましたので修正しました。

## Module build failed: TypeError: Cannot read property 'eslint' of undefined

```
Module build failed: TypeError: Cannot read property 'eslint' of undefined
    at Object.module.exports (nuxt-app/node_modules/eslint-loader/index.js:148:18)

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
```

こちら解決法はESLintのloaderが読めていないということなのでnuxt.config.jsを以下のように書き換えましょう。

```js:nuxt.config.js
module.exports = {
  build: {
    /* before 
    extend(config, { isClient, isDev }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    } */
    /* after */
    extend(config) {
      if (process.server && process.browser) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}  
```

冒頭の記事にも記載がありますが、```isClient```と```isDev```が廃止になったのが原因です。

## Pugエラー（These relative modules were not found）

```
These relative modules were not found:

* ./index.vue?vue&type=template&id=2a183b29&lang=pug in ./pages/index.vue
```

どうやらNuxt.js v2からはpugのloaderがデフォルトでは入っていないようなので以下のコマンドでpugのloaderを追加しましょう。

```bash
# npm
$ npm i -D pug-plain-loader
# yarn
$ yarn add --dev pug-plain-loader
```

Webpack4が使われてるのでたしかにビルドの体感速度は速くなっているような気がします。まだv2にアップグレードしただけなので細かい部分は確認できていませんが、ハマったところがあれば適宜追記していきます。
How to install Plone 4.3.17


### How to install Plone 

https://github.com/plone/Installers-UnifiedInstaller/issues/67

### edit lxml_static.cfg

```
 cd Plone-4.3.17-UnifiedInstaller
 cd base_skelton
 vi lxml_static.cfg
```

```
[buildout]
index = https://pypi.python.org/simple
```

then install.sh

### Reference
https://github.com/plone/Installers-UnifiedInstaller/issues/67
暗黒の力なんて要らなかったんや！ - Vim nativeな操作を目指すためにDeniteを手放す

この数日でVimが完全に過ぎた玩具と化してとりあえず毎日弄ってみるという状態が続いているんですけど、当然なんですがプラグインディレクトリが太ります。ディレクトリが、は言いすぎだけど`plug#begin()`以降は目に見えて増えているのが分かります。その中で「あっもう要らないな」と思ったらどんどん消していくことにしてるんですけど、[denite.nvim](https://github.com/Shougo/denite.nvim)でツリー表示がとても難儀する事に気がついて[NERDTree](https://github.com/scrooloose/nerdtree)を入れたところで気がついてしまったんです。

「これネイティブの機能で済むことをDeniteに任せてたんじゃ…」

あぁ、あとバニラが好きなんです…いやアイスもそうなんですけど…

## 悪魔の契約

Denite用に割いたキーマップは3つありました。

- ファイルメニュー
- バッファメニュー
- 最近開いたファイル

そのうちファイルメニューはNERDTreeを導入したので全てNERDTreeに任せても個人的には不満がないです。というわけで…

```vim:remap.vim
noremap <Leader>f :NERDTree<CR> | cnoremap <Leader>f NERDTree<CR>
```

無事契約が一つ破棄出来ました。ついでにQiita更新の為にそれ用のキーマップも作ってしまいましょう…

```vim:qiitactl.vim
noremap <Leader>q :NERDTreeFromBookmark qiitactl<CR>
cnoremap <Leader>q NERDTreeFromBookmark qiitactl<CR>
```

## 自然の祝福

バッファに関しては[昨日ガッツリまとめてしまった](https://qiita.com/astrorobot110/items/4b493d285a01437c3288)為、コマンドで引っ張り出してしまう方が早い気がしています。その上でちょっとしたズルとして[vim-script/ViewOutput](https://github.com/vim-scripts/ViewOutput/blob/master/plugin/viewoutput.vim)を使ってバッファリストを一度ウィンドウに出してしまえば…

- `:VO`でバッファが開く
	- 分割方向が違うなら`<C-w> L`
- :b[0-9]で開く

これで十分でしょう。

```vim:remap.vim
noremap <Leader>b :VO ls<CR> | cnoremap <Leader>b VO ls<CR>
```

残りの契約はあと一つです。

## 新たな視点

あとは最近開いたファイルを何とかするだけですが、ちょうどいいところに`:ol[dfiles]`なんてコマンドを見っけました。もちろん採用です。Vimのドキュメントでは`:bro[wser] ol`とすれば番号を選択して…とありますがviminfoの履歴プールが100桁あるのでこれはマトモに機能しなさそう。出来ることは…

- `set viminfo`で履歴の数を減らす
- `:filter /[regex]/ bro ol`を使う
- `:VO oldfiles`でリストをウィンドウに開いてから`:e #<[0-9]`で開く

最後のがバッファとUIを共通化出来て良さそうだしこれを採用することにします。

```vim:remap.vim
noremap <Leader>r :VO oldfiles<CR> | cnoremap <Leader>r VO oldfiles<CR>
```

これで、無事denite.nvimと、neomru.vimも契約破棄となりました。

## Vimコミュニティの手中

…正直突っ込んで使ってみて、「本当に恋に落ちるブラウザはこれだったんや！」と確信してしまっております。今までnanoに甘えたり、気持ちいいエディタを探して取っ替え引っ替えしてたのは何だったんだとなる程に取っつきづらくて、でも最高に遊べるエディタなんだなぁと。…いや多分人には勧めないと思うんですけど。

## んで、deniteを使う日は来るの？

その日が来てみないことには…実際deniteからQiitaAPIで更新できるんだったら多分deniteを使い続けたと思うんで…
Ethereum の function call データフォーマット

- マルチシグウォレットを使用して他のスマートコントラクトのメソッドを実行したりするのに必要なので調べたよ
- Solidity で書かれたスマートコントラクトに次のようなメソッドがある場合で説明します
- 以下の countUp() とか countDown() を実行するためにはどういったトランザクションを作って送ればいいか、という話

```
pragma solidity ^0.4.19;

contract Count {
    uint256 public count;
    
    function countUp() public {
        count = count + 1;
    }
    
    function countDown() public {
        count = count - 1;
    }
    
}
```

- function call のデータについて、最初の4バイトはシグネチャと呼ばれる次のフォーマットにした関数のプロトタイプのようなものを Keccak256 でハッシュ化したものを使うとのこと。
- 引数は型のみを使用します。
- 引数の型はカンマで区切ります。

```
funtionName(type1,type2,...)
```

上記の countUp() の場合、Node.js で書くとつぎのような感じで、Keccak256 のハッシュが得られるので、最初の 4bytes 0x0bd8599e がトランザクションに含むべきデータになります。

```
const Web3 = require('web3');

console.log(Web3.version);
// => 1.0.0-beta.34

const signature = 'countUp()';
const hash = Web3.utils.keccak256(signature);
console.log(hash);
// => 0x0bd8599e08d359240ca8194d54975e0eda037fe2109af0514fc9505f2cfc9407
```

- 例えば、上記のコントラクトのアドレスが、`0xe126016d061369cd23de92475d04fb762b663a97` だとしたら、countUp() を実行したい場合、つぎのようなトランザクションを送る
 - to:  `0xe126016d061369cd23de92475d04fb762b663a97`
 - value: 0
 - data: 0x0bd8599e

- 実際にためしてみたtx: https://ropsten.etherscan.io/tx/0x32b415366043be03300d2fcd1acb8f3dce1f8234fa86b204f6d68e9b7c20b642
- 引数をとる場合については時間がなくなってしまったのでまた今度書きます。
- 今回はいつにもまして乱文になってしまった..

# Note
- Ethereum 関連の情報は https://scrapbox.io/sushiether/ に集約することにしました。
- この記事の内容に変更・更新がある場合は、以下の URL を更新します。
- https://scrapbox.io/sushiether/Ethereum_の_function_call_データフォーマット
Node.jsでTwitter検索から100件を超えるツイートを取得したい

Twitter APIの `search/tweets` では1回あたり（＝1ページあたり）100件までしか取得できませんが、`search_metadata`オブジェクト内の`next_results`を含めたクエリでもう一度リクエストを投げれば次のページも取得できます。
要するに再帰で回してあげればOKというわけです。

ここでは[twitter](https://www.npmjs.com/package/twitter) を使いますが、その他のライブラリを使う場合でも似たような実装をすれば良いと思います。

```javascript
const twitter = require('twitter');

const client = new twitter({
  //取得したものを入れてください
  consumer_key: "******************",
  consumer_secret: "******************",
  access_token_key: "******************",
  access_token_secret: "******************",
});

searchTweet('ねこです　よろしくおねがいします');

function searchTweet(queryArg, nextResultsMaxIdArg = null) {
  client.get('search/tweets', { q: queryArg, count: 100, max_id: nextResultsMaxIdArg }, (error, searchData, response) => {
    for (item in searchData.statuses) {
      let tweet = searchData.statuses[item];
      console.log('@' + tweet.user.screen_name+' : '+tweet.text); //実際に使う場合はここでファイルへ書き出しなどといった処理を行うことになると思います
    }

    if (searchData.search_metadata == undefined) {
      console.log('---- Complete (no metadata) ----');
      return 0;
    }
    else if (searchData.search_metadata.next_results) {
      let maxId = searchData.search_metadata.next_results.match(/\?max_id=(\d*)/);

      if (maxId[1] == null) {
        return 0;
      }

      console.log('---- next:' + maxId[1] + ' ----');
      searchTweet(queryArg, maxId[1]);
    }
    else {
      console.log('---- Complete ----');
      return 0;
    }
  });
}

```


Twitter APIはツイートや投稿者名だけなどではなく、様々な情報を返してくれます。（投稿者のフォロワー数など）
[公式ドキュメント](https://developer.twitter.com/en/docs/tweets/search/api-reference/get-search-tweets)から使えそうな要素を見つけてみるのも楽しいと思います。
SublimeText3をインストールしたらやること


## package control をインストール
https://packagecontrol.io/installation

## おすすめパッケージをインストール
https://packagecontrol.io/browse/popular

Ctrl + Shift + P
Package Control: Advanced Install Package
でカンマ区切りのパッケージを入力するとまとめてインストールできる
SideBarEnhancements,SublimeLinter,BracketHighlighter,SublimeCodeIntel,HTML5,Alignment,ColorPicker,ConvertToUTF8,Color Highlighter,AutoFileName,GitGutter,HTML-CSS-JS Prettify,Emmet,OmniMarkupPreviewer,A File Icon,IMESupport,Markdown Extended,Monokai Extended,Show Character Code

## Preferences > User Setting
Ctrl + Shift + P
Pre sett と入力すれば楽

```JSON
{
	"color_scheme": "Packages/Color Scheme - Default/Monokai.tmTheme",
	"default_line_ending": "unix",
	"draw_indent_guides": true,
	"draw_white_space": "all",
	"enable_tab_scrolling": false,
	"font_face": "MeiryoKe_Console",
	"font_size": 11,
	"highlight_line": true,
	"highlight_modified_tabs": true,
	"ignored_packages":
	[
		"Markdown",
		"Vintage"
	],
	"show_encoding": true,
	"show_line_endings": true,
	"tab_size": 2,
	"theme": "Default.sublime-theme",
	"translate_tabs_to_spaces": true,
	"tree_animation_enabled": false,
	"word_wrap": true
}
```
bookmarks（20180401-20180430）

# フロントエンド
■Web制作にすぐに役立つ、Chrome デベロッパーツールの便利な機能・使い方のまとめ
https://coliss.com/articles/build-websites/operation/work/chrome-devtools-tips-and-tricks.html

■position: stickyの面白い使い方と使用時の注意点
https://parashuto.com/rriver/development/position-sticky
「スクロールして一番上まで来たら固定」を簡単にできるプロパティ。
便利！しかしIE非対応！

■モバイルファーストインデックス(MFI)を踏まえたデザイン
https://qiita.com/aterato/items/1548f27d011b6fa919c4

■WebデザイナーのためのVue.js事始め
https://www.webcreatorbox.com/tech/first-vuejs

# デザイン
■デザインの基本日記  「配色編」
https://note.mu/begin_design/n/nf8368cc8fe50

■Adobe XDでWebデザインをしよう！画面作成からページ推移までの手順を紹介
https://www.webcreatorbox.com/inspiration/adobe-xd-steps

■宇宙をテーマにしたデザインアイコンセット 15
https://www.nxworld.net/material/15-space-design-icon.html

# UI/UX
■モリサワ、テキストがUD書体で表示される「東京防災」電子版の配信を開始
https://www.mdn.co.jp/di/newstopics/58074/

■フォント：点字とアルファベットやカタカナを組み合わせたフォントアイデア
https://www.designboom.com/design/kosuke-takahashi-braille-neue-03-26-2018/

# 広告/SEO/マーケティングなど
■いつでもどこでも！マーケティングを学べる動画学習サービス6選
https://ferret-plus.com/9964?utm_campaign=https%3A%2F%2Fferret-plus.com%2F9964&utm_medium=RSS&utm_source=top_rss

■グーグルアナリティクスデータが消失する！？5月25日までの対応がマスト！
https://promonista.com/date_loss_of_ga/
■一般データ保護規則（GDPR）対策によるGoogleAnalyticsのデータ保持期間を変更するリスク
https://blog.cntlog.net/archives/2989
セット読み推奨

# 働き方的な
■「まだ会社でやれることがある」同じ場所にいるからこそできる挑戦――岩崎電気 新井隆之氏に聞いた
https://webtan.impress.co.jp/e/2018/03/22/28607

■在宅ワーカーのためのハンドブック
http://www.mhlw.go.jp/stf/seisakunitsuite/bunya/koyou_roudou/koyoukintou/zaitaku/100728-2.html
スタートアップなんかにもおすすめ

■広告関係4団体が「広告制作取引『受発注』ガイドライン」を策定
http://www.jaa.or.jp/archives/information/%E5%BA%83%E5%91%8A%E9%96%A2%E4%BF%824%E5%9B%A3%E4%BD%93%E3%81%8C%E3%80%8C%E5%BA%83%E5%91%8A%E5%88%B6%E4%BD%9C%E5%8F%96%E5%BC%95%E3%80%8E%E5%8F%97%E7%99%BA%E6%B3%A8%E3%80%8F%E3%82%AC%E3%82%A4%E3%83%89/

# ニュース
■Web業界的には、iOS 11.3最大の特徴はSafariでのPWAサポート開始だ！
https://webtan.impress.co.jp/e/2018/04/03/28862

---------------------

3月16日～31日が抜けてる理由は察してほしい（年度末）
リアルタイムグラフなら「とりあえずEpoch.js」をおススメしたい

## この記事について

IoTっぽいことをやりたくて表示画面の方から作ってみました。
リアルタイム表示が可能なJavascriptのグラフ表示ライブラリを色々物色した結果、Epoch.jsが一番使いやすいという結論になりました。サンプルコードを書きつつEpoch.jsの使い方等についてまとめてみました。

## サンプルコード

<p data-height="550" data-theme-id="0" data-slug-hash="GQpbRR" data-default-tab="html,result" data-user="okoppe8" data-embed-version="2" data-pen-title="GQpbRR" class="codepen">See the Pen <a href="https://codepen.io/okoppe8/pen/GQpbRR/">GQpbRR</a> by okoppe8 (<a href="https://codepen.io/okoppe8">@okoppe8</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

スライダーの部分はIoT機器のPostのシミュレータです。

## Epoch.js とは

公式：https://epochjs.github.io/epoch/

Epoch.jsは様々なグラフを生成するJavascriptライブラリです。同様の目的のメジャーなライブラリにChart.js、highchart.js、Google Chart Tools などがあります。

## Epoch.js を選ぶメリット

主に３点あげられます。

- リアルタイム表示に特化していて設定が簡潔
- 公式サイトだけで使い方がばっちりわかる
- MITライセンスで気兼ねなく使える

Chart.jsなどのメジャーなライブラリでもリアルタイムのグラフ表示は可能と謳われているものの、シンプルなサンプルコードは結構少ないです。

高機能な分設定が複雑だったり、追加のプラグインが必要だったり、アニメーションのための複雑な処理があったり、ライブラリの使い方と関係ないところで複雑な処理を入れていて読みづらかったりと、私のような片手間でJavaScriptを扱っている人には結構つらいものがあります。

Epoch.jsはリアルタイム表示に特化し機能も抑えられているため、公式サイトにあるサンプルを読むだけで使いこなすことができます。低機能であるためユーザーによっては満足しない（例：グリッドやドットが表示されないので見づらい、巻き戻しやズームができないなど）ということがあると思いますが、あくまでデモやプロトタイピング用途として割り切ってしまえば強力なツールであると思います。

## Epoch.js の動作

Epoch.js はデータをキューで管理します。pushメソッドでキューに追加されたデータは、１秒に１回グラフに追加されます。１秒という部分は設定では変更できませんが、ソースコードのsetIntervalで処理している部分を修正することで変更可能です。

キューにデータが無いときはグラフは更新されません。アニメーションがストップします。

注意すべき点ですが、Google Chrome等のブラウザではタブがアクティブで無いときはグラフの更新が行われずアニメーションだけ一時停止します。その時にキューへデータが追加されると、グラフの更新が行われないのにデータだけキュー溜まることになり、タブが再度アクティブになってもしばらく最新のデータが表示されないという状況になります。
これを防ぐには設定の「queueSize」の値を１に設定します。最新以外のデータが捨てられるので、タブが再度アクティブになったときは最新データが即時表示されます。


## レスポンシブ対応
Epoch.jsのグラフはレスポンシブに対応していません。しかし、幅(width)の設定で100%と指定すると初期表示でコンテナの幅いっぱいの表示されるので特に不便は感じないと思います。

## 参考

[Qiita:Flask+websoket+Epochを使ってリアルタイムチャート](https://qiita.com/neka-nat@github/items/0607e01a19e093fdb631)
[D3.jsベースのEpochを使ってリアルタイムチャートを描いてみる](http://4009.jp/post/2015-11-19-realtimechart/)

[Bitcoin のリアルタイムチャートを Chart.js で表示する](http://nagix.hatenablog.com/entry/2017/07/10/081553)
Chart.jsの記事だがロジックの作り方は参考になる。

っていうかこういうのもあったんか…。気付かなんだ。
chartjs-plugin-streaming：https://nagix.github.io/chartjs-plugin-streaming/ja/
Railsのローカル開発環境とAWS開発環境の揃え

## 環境
#### ローカル
- MacOS(High Sierra 10.13.4)

#### 本番
- Amazon Linux(AWS EC2)

## 背景
Railsの開発環境については、ssh forwardして、AWS上のRDS、Redisなどを使う方もいますが、自分はローカルで開発していきたいです。OSも違うから、ローカルの設定と本番の設定が違ったりしますので、ローカルでテストした差分はそのままコミットできなくて、面倒です。

## DB揃え(config/database.yml)
#### socket
- 従来
    - development: /tmp/mysql.sock
    - aws-development: /var/lib/mysql/mysql.sock
- 修正後
    - development: /var/lib/mysql/mysql.sock
    - aws-development: /var/lib/mysql/mysql.sock

MacOSのmysqlのsocketの場所を変えた

- `sudo mkdir -p /var/lib/mysql`
- vim /etc/my.cnf

```text:/etc/my.cnf
[client]
socket=/var/lib/mysql/mysql.sock

[mysqld]
socket=/var/lib/mysql/mysql.sock
```

- `sudo mysql.server restart`

以下のエラーが出てきた

```
Shutting down MySQL
.. ERROR! The server quit without updating PID file (/usr/local/var/mysql/xxx.local.pid).

2018-05-08T06:19:39.6NZ mysqld_safe A mysqld process already exists
```

MacOSでbrewでmysqlはサービスとして起動させているから、`sudo mysql.server restart`ではなく、**`brew services mysql restart`**したら、うまく行けました。

#### host
- 従来
    - development: localhost
    - aws-development: rds-development.hoge.hoge
- 修正後
    - development: rds-development.hoge.hoge
    - aws-development: rds-development.hoge.hoge
    
`vi /etc/hosts`を修正して、AWSの開発のURLをlocalhostにリダイレクトすればおｋです。

```text:/etc/hosts
127.0.0.1    rds-development.hoge.hoge   
```

## Redisなど
[dotenv](https://github.com/bkeepers/dotenv)を使って、ローカルの環境変数ファイルに入れとく。.envはgitで管理してないので、ローカルの.envとAWS開発環境の.envが一致する必要がないです。

```
REDIS_ENDPOINT=redis://localhost:6379
```

他の違ったりするところも環境変数に変えて、dotenvで管理すればいいと思います。以上です。

## 参照
- https://easyramble.com/change-mysql-sock-path.html
Ruby snippet of Corporate Number conversion

This article is a translation from https://qiita.com/kawasaki/items/fc1abfd62db10fa082ca .
***
# Snippet
This is a ruby snippet which converts an old-style 12-digit enterprise identification number in Japan to a new-style 13-digit “Corporate Number” adding a check digit as a  leftmost digit.

```ruby
# Old-style 12-digit number, defining as a string because it can possibly starts with 0
n12 = "000012050002"

# New-style 13-digit number
n13 = (9 - n12.split("").map(&:to_i).map.with_index {|d, i| 
  i.odd?? d : d * 2 }.inject(:+) % 9).to_s + n12
# => "7000012050002" 
```

# Reference
- [Definition error of “Corporate Number” in the ministerial order by MOF, Japan](https://qiita.com/kawasaki/items/bfa9f0edc32c132eff30) 
- [Origin of the enterprise identification number](https://www.fellowes.co.jp/column/my-number/company-corporation-number.html)
Ethereum: Web3.pyで関数実行時に Could not identify the intended function with name `xxx` エラーが出る場合

以下のようなコードを実行する際に、表題のエラーが吐かれる場合があります。

```python
tx_hash=token.functions.mint(
    web3.toChecksumAddress(target['address']),
    target['token_amount']
).transact({'from': web3.toChecksumAddress('0x7ad8f90cfa071c8420e3f09fe0e413d0c47502e6')})
```

引数の形外なので、この場合、Decimalをintに変換してやればエラーは消えます。

```python
tx_hash=token.functions.mint(
    web3.toChecksumAddress(target['address']),
    int(target['token_amount'])
).transact({'from': web3.toChecksumAddress('0x7ad8f90cfa071c8420e3f09fe0e413d0c47502e6')})
```

# 吐かれたエラー

```bash
  "errorMessage": "\nCould not identify the intended function with name `mint`, positional argument(s) of type `(<class 'str'>, <class 'decimal.Decimal'>)` and keyword argument(s) of type `{}`.\nFound 1 function(s) with the name `mint`: ['mint(address,uint256)']\nFunction invocation failed due to improper argument encoding.",
```

# 環境
Python 3.6.1
AWS Lambda