OmniAICreator/Qiita-1.07M huggingface dataset:
npmを使用したrailsのherokuデプロイで躓いた点

#まず最初に
npmでadminLTEを外部依存させているrailsアプリをherokuでデプロイしようとしたら,思ってたより躓いたので備忘録兼知らない誰かの役に立てたらと思います。

## heroku create から

- 各ツールのバージョン
 - heroku-cli/6.11.17 (linux-x64) node-v7.10.0
 - Rails 5.1.4
 - 3.10.10

remoteにheroku追加
`heroku create アプリ名`

今回postgresqlを使ったので、herokuに設定します
`heroku config`とコマンドを叩いてDATABASE_URLが表示されなかったら行ってください
`heroku addons:create heroku-postgresql:hobby-dev`

また、production環境でpostgresqlを使うことを宣言するためにconfig/database.ymlを変更します

```rb:config/database.yml
#~~~省略~~~
production:
  url: <%= ENV['DATABASE_URL'] %>
```

このまま、'git push heroku master' とやったら最初のエラーが出ました
今のままでは、pushの時に `npm install` が呼ばれないので、外部依存のモジュールがまだインストールされてないよというエラーが発生するのでbuildpackを追加していきます。
buildpackを設定することで、push時にherokuが叩いてくれるパッケージ管理ツールを設定できます。
次のコマンドを叩いていってください。


`heroku buildpacks:set heroku/nodejs`
`heroku buildpacks:add --index 2 heroku/ruby`


`heroku buildpacks`コマンドでいま設定されているbuildpackの順番が
注意点としては、`--index　2`でherokuがbuild時に実行するコマンドの順番を設定してます。


> $ heroku buildpacks
heroku buildpacks
1. heroku/nodejs
2. heroku/ruby



こんな具合になってたら成功です。push時にまずnode_modulesがinstallされてから`bundle install`が動き出すように設定できました。

最初、「今までbuildpacksでruby入れなくてもbundle動いてたしrubyの方はbuildpacks追加しなくてもいけるんじゃね？」と考えてnodejsだけsetしてpushしてみたらnpmだけ動いてました。。。
そりゃそうですね、いかなる時も勝手にbundleされたらnode.jsだけをbuildしたい人が困りますもんね。


## その他のエラー  
###これからは小さなエラーを消していく作業です。ローカルでは問題ない、ただherokuでは？といった奴らです。正直自身の知識のなさとともに自分とherokuを嫌いになっていきます


**package.jsonでadmin-lteがdevDependenciesに入ってる!**
devDependenciesは、基本的にタスクランナーやテストを置くところと習いました。
理由はわかりませんでしたがエラーが出てたのでdependenciesに移動させました。


**scss使ってるならapplication.cssをapplication.scssに変更**
ローカルでエラーが出ないので見落としがちです。


**内部のscssファイルの読み込み場所**
アプリケーションの内部のscssファイル(node_modulesとかで管理してないやつ)は、`@import hogehoge`ではなく`*=require hogehoge`にしましょう。 ` Sprockets Error: can't read scss file: hogehoge`みたいなエラーが出ます。 
`*= require hogehoge` はSprocketsの書き方でまずSprocketsでscssをcssにいい感じに変換してくれるみたいです。一方`@import hogehoge`は、css scssの記法なのでとりあえずherokuでbuildの際にSprocketsはcssしか@importで受け付けずエラーが出るみたいです。このへんよくわからず使ってる。。。ここもローカルでは問題なく動いちゃうので見落としがちです。

> 引用
https://stackoverflow.com/questions/30185222/rails-difference-between-import-and-require


**`require_tree .`はapplication.jsの一番最後に書く**
基本中の基本ですが、すべての外部依存ファイルの後です。
今回の場合はadminLTE関連の後に書く必要があります


```js:application.js
//= require rails-ujs
//= require_tree . // 変更前
//= require admin-lte/plugins/jQuery/jquery-2.2.3.min
//= require admin-lte/bootstrap/js/bootstrap.min
//= require admin-lte/dist/js/app.min
//= require admin-lte/plugins/iCheck/icheck
```
```js:application.js
//= require rails-ujs
//= require admin-lte/plugins/jQuery/jquery-2.2.3.min
//= require admin-lte/bootstrap/js/bootstrap.min
//= require admin-lte/dist/js/app.min
//= require admin-lte/plugins/iCheck/icheck
//= require_tree . // 変更後
```

これもローカルでは何も問題なくjsが動きます。ただheroku上ではjsが動かなくなります。。。

####**require_tree. と require_selfの説明**
require_tree . はカレントディレクトリから再帰的に同じフォーマットのファイルを自身より前に挿入します。
require_selfは複数のrequireを使用しているときに自身の読み込む順番を指定します。                
> 引用
http://shindolog.hatenablog.com/entry/2014/06/05/115631

##最後に
これらがherokuでデプロイするまでに通ったエラーの数々です。
どれか一つでも役に立てたら幸いです。
CodeSnifferをEUC-JP, SJISに適用する

SJISでもの作るとかもうないけど。

ヾ(・ω<)ﾉ"　三三三●　ⅱⅲ コロコロ♪

----
------------------- ↓ 余談はここから ↓-------------------

私の投稿は新しいことはあまりなく、
現在取り残されたことについて書いてることは珍しくない。
今回もその一つ。

現状取り扱っているソースコードがEUC-JPでできている。
今時Unocodeじゃないのかと思われるかもしれないが、
まぁそういうもんです。

EUC-JPのソースコードにphpcsをあてる以下のようなエラーが出る。

```shell-session
----------------------------------------------------------------------
 1 | ERROR | An error occurred during processing; checking has been
   |       | aborted. The error message was: iconv_strlen(): Detected
   |       | an illegal character in input string in
   |       | D:\local\vendor\squizlabs\php_codesniffer\src\Tokenizers\Tokenizer.php
   |       | on line 193
----------------------------------------------------------------------
```
iconv_strlenがあるからいけそうな感じかと思ったが、
どうもなんらかの指定がないとダメらしい。
ちょっと調べてみたらこんな記述があった。

Advanced Usage · squizlabs/PHP_CodeSniffer Wiki#Specifying an Encoding
https://github.com/squizlabs/PHP_CodeSniffer/wiki/Advanced-Usage#specifying-an-encoding




----
------------------- ↓ 本題はここから ↓-------------------

ヾ(・ω<)ﾉ"　三三三●　ⅱⅲ コロコロ♪

### EUC-JPの場合

```shell-session
$ phpcs --encoding=eucjp [ファイル名]
```

### SJISの場合
```shell-session
$ phpcs --encoding=SHIFT-JIS [ファイル名]
```
Git — コミットメッセージに # ( ハッシュ / シャープ / イゲタ ) を使う

# 結論

config で「コメント文字」を変える。

git管理されたディレクトリ内で以下を実行。

例:

`git config core.commentChar ";"`

## config の例

`./git/config` に設定が追加されているのが分かる。

```
[core]
	commentChar = ";"
```

## 例

`git commit` したときの画面などで、コメント文字が `;` に変わっているのが分かる。

つまり、先頭に `#` を書ける。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/2c120e3a-4b02-8b9c-028a-858987b8ed48.png)



# 問題

デフォルトでは `#` はコメントとして扱われるので、メッセージに直接 `#` は書けない。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/aa022c42-51f7-c084-cb65-27cea050c080.png)

# 使いどころ

- markdown 形式で書いておきたい場合などに
 
# 環境

- git version 2.14.1









<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Sequelizeのsyncで ALTER TABLE

SequelizeでDBのmigrationをする場合、sequelize-cliを利用するのが一般的だと思いますが、モジュールのデプロイ時（アプリケーション起動時）に`model.sync()`でカラム追加（`ALTER TABLE`）出来ないかなぁって思ってSequelizeのソースを眺めてたところやり方を見付けたのでメモがてら。
ちなみに、`sync({force: true})`だとdrop/createなのでデータが消えるためここでは無し。


以下のように`sync()`のオプションに`alter: true`を渡せばよい。

```js
'use strict';

const Sequelize = require('sequelize');
const sequelize = new Sequelize(......);

sequelize
  .sync({force: false, alter: true})
  .then(....)
  .catch(....);
```

この方法だと`sequelize.define()`しているカラム全てに対して`ALTER TABLE`が実行される事になり、`sequelize.define()`から削除されたカラムもdropされます。
また、この方法だとテーブルの最後にカラムが追加されるので、カラム順番を気にするような場合は素直にsequelize-cliを使いましょう。
PHPのarray_multisort()はキーが数字の場合には、新しく振り直される

## 前書き
タイトルで全て言った気がしますね。そこそこハマりやすい罠だと思います。

## array_multisort()って？
連想配列の`array`を、中身の特定の要素に合わせてソーティングできる、とてもPHPらしい（と思う）便利関数です。

こちらの方の説明が詳しいです。
参考: [PHPの多次元連想配列のソート - Qiita](https://qiita.com/shy_azusa/items/54dadc55e3e71cde1445)

## キーが振り直される例

```php:ソース
<?php
$students = array();
$students["1211"] = array(
    'name'=>'山田花子',
    'kana'=>'ヤマダハナコ',
);
$students["3139"] = array(
    'name'=>'田中太郎',
    'kana'=>'タナカタロウ',
);
echo "--ソート前--\n";
var_dump($students);
$kanas = array();
foreach ($students as $student) {
    $kanas[] = $student['kana'];
}

array_multisort($kanas, SORT_ASC, $students);

echo "--結果--\n";
var_dump($students);
```

```php:実行結果
--ソート前--
array(2) {
  [1211]=>
  array(2) {
    ["name"]=>
    string(12) "山田花子"
    ["kana"]=>
    string(18) "ヤマダハナコ"
  }
  [3139]=>
  array(2) {
    ["name"]=>
    string(12) "田中太郎"
    ["kana"]=>
    string(18) "タナカタロウ"
  }
}
--結果--
array(2) {
  [0]=>
  array(2) {
    ["name"]=>
    string(12) "田中太郎"
    ["kana"]=>
    string(18) "タナカタロウ"
  }
  [1]=>
  array(2) {
    ["name"]=>
    string(12) "山田花子"
    ["kana"]=>
    string(18) "ヤマダハナコ"
  }
}
```

## 解説
`array_multisort()`関数は、「キーが数字だった場合、ソート順にキーを振り直す」という仕様があります。

これに加え、PHPの`array`は、「**キーが数字の場合、int型に変換されたキーになる**」という厄介な仕様があるため、「`$students["1211"] = array(....)」`と文字列で指定しても、**キーは数字と見なされます**。

その結果、「文字列で入れたけど振り直された！」というバグの元が生まれます。

参考: [PHPの配列のキーについて調べてみる - hnwの日記](http://d.hatena.ne.jp/hnw/20070521)
参考: [PHPで連想配列をforeachで回した時のkeyの型 - Qiita](https://qiita.com/tadasuke/items/52e6a02d9af813443e17)


## あとがき
マニュアル読めと言われればその通りなんですが、私の場合、「ググる→出てこない→マニュアル読む」の順番なので、最初の「ググる」で出てきてほしい！という思いで書きました。
Pillowで扱える最大ピクセル数を増やす

Pillowで高解像度データを処理していると

```py
DecompressionBombWarning: Image size (166109750 pixels) exceeds limit of 89478485 pixels, could be decompression bomb DOS attack.
```

画像サイズが限界値超えてるからDOS攻撃かもしれないよ的メッセージが。

この警告は出るものの処理自体はできるようだ。
また今回のプログラムはローカルで処理するものなので、DOS攻撃問題ナシ。
邪魔なので警告は消してしまおう。
メモリも64GB積んでいるので問題ナシ。

```py
from PIL import Image

Image.MAX_IMAGE_PIXELS = 1000000000
```

私が処理できるピクセル数は10億です。
これで解決。
Ubuntu 16.04にzabbix 3.4をインストール

# Ubuntu 16.04にzabbix 3.4をインストール

## リポジトリを追加

`wget https://repo.zabbix.com/zabbix/3.4/ubuntu/pool/main/z/zabbix-release/zabbix-release_3.4-1+xenial_all.deb`

`sudo dpkg -i zabbix-release_3.4-1+xenial_all.deb`

## インストール

`sudo apt-get install  zabbix-server-mysql zabbix-agent zabbix-frontend-php`

## MySQLにログイン

ユーザ`zabbix`をパスワード`hogehoge123`で作成する。

`mysql -u root -p`

    create database zabbix;
    create user zabbix@'localhost' identified by 'hogehoge123';
    grant all privileges on zabbix.* to zabbix@'localhost'; 
    exit;

## 日本語フォントのインストール

`sudo apt-get install fonts-vlgothic`

## DBデータを登録

`zcat /usr/share/doc/zabbix-server-mysql/create.sql.gz | mysql -uroot zabbix -p`

## configを変更

DBPasswordだけ

http://qiita.com/koara-local/items/26475b321030140d2048

## nginxの設定をする

シンボリックリンクを貼る　

`ln -s /usr/share/zabbix/ /var/www/html/zabbix`

## ファイル`php.ini`を編集

    date.timezone = "Asia/Tokyo"

## いろいろあってWebからアクセス

`The frontend does not match Zabbix database.`って表示されたらDBの初期化に失敗している証拠

http://qiita.com/dz_/items/3e85dd369c8053ceffe8

なんかエラー起きるからDB入れなおしたほうが良さそう

    mysql -uroot zbx -p < create.sql
    Enter password:
    ERROR 1366 (HY000) at line 3390: Incorrect string value: '\xD0\xA1' for column 'units' at row 1

## めも

- http://tetsuyai.hatenablog.com/entry/20111006/1317873012
- https://dev.mysql.com/doc/refman/5.6/ja/server-system-variables.html
- https://gotohayato.com/content/83
- http://qiita.com/zaburo/items/65bac3b8e0a635ada68c
- http://qiita.com/koara-local/items/26475b321030140d2048

## DB回りの処理

DBの削除 `drop database DB名`

ユーザの削除 `drop user 'ユーザ名'@'localhost';`

## 日本語の設定

- https://www.zabbix.org/wiki/How_to/install_locale

- `dpkg-reconfigure locales`

- reboot したら適応された

---
Copyright (c) 2017 Tomoyuki KOYAMA
Released under the MIT license
http://opensource.org/licenses/mit-license.php
php7.0をDockerでサクッと動かす

# php7.0をDockerでサクッと動かす

参考: [Docker Hubのオフィシャルイメージを使ったLAMP環境(Apache+PHP+MySQL)構築 - Qiita](https://qiita.com/naga3/items/be1a062075db9339762d)

## Dockerイメージを取得

DockerHubから公式イメージを取得.

```shell
$ docker pull php:7.0-apache
```

イメージが取得できているか確認.

```shell
$ docker images
REPOSITORY                TAG                 IMAGE ID            CREATED             SIZE
php                       7.0-apache          c5a07b1726fc        4 days ago          390MB
```

## Dockerを動かす

以下で動かす.

```shell
docker run -p 8000:80 -v $(pwd):/var/www/html --name php -d php:7.0-apache
```

### オプションの解説

|オプション|設定値|意味|
|---|---|---|
|-p|8000:80|ローカルの8000番をコンテナの80番にマッピング|
|-v|`$(pwd):/var/www/html`|現在いる場所`$(pwd)`を`/var/www/html`にマッピング. `$(pwd)`を任意のローカルパスに設定することも可能|
|--name|php|識別しやすい任意の名称をつける|
|-d|-|デタッチ・モードで起動する|

さらに詳しいことは, [Docker run リファレンス — Docker-docs-ja 17.06.Beta ドキュメント](http://docs.docker.jp/engine/reference/run.html#detached-d)に書いてる.

## 動作を確認

カレントディレクトリに`index.php`を作成して、内部に`<?php phpinfo();`と書いてブラウザから`127.0.0.1:8000`へアクセスしてみる.

phpinfoが表示さればOK.

---
Copyright (c) 2017 Tomoyuki KOYAMA
Released under the MIT license
http://opensource.org/licenses/mit-license.php
AzureでNode-REDを手っ取り早く動かす方法

毎月行っている[Cloud Developers Circle](https://cdevc.connpass.com/)という勉強会で、Node-REDを初めて試しました。とても面白いですね。

そこで、ここではMicrosoft Azureで手っ取り早くNode-REDの環境を作ってみたいと思います。

## 手順

1. Microsoft Azureのポータルを表示する
2. 画面右上にある「 **>_** 」をクリックする（ベルの横）
3. 下から黒い画面が表示されるので、次のコマンドを順次入力する

### リソースグループの作成
```
az group create -n pakueacinodered --location westus
```
-n の後はお好きな名前をどうぞ
-l の後はwestusにしておいてください。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/2080/f884401c-29c4-e106-aa8a-9706fe3777c1.png)

### Node-REDのコンテナを作成する
```
az container create -n nodered --image nodered/node-red-docker -g pakueacinodered --port 1880 --ip-address public
```
-n はコンテナの名前、お好きなものをどうぞ
--imageはDocker HubでのURLになります。今回はnodered/node-red-dockerです
-g はひとつ前でつけた名前
--port はNode-REDはPort 1880で起動してきます
--ip-address はインターネット経由でアクセスできるようにするため、publicとします 



こちらを実行するとコンテナの作成と起動が行われます

### 起動の確認とIPアドレス

```
az container show -n nodered -g pakueacinodered
```
-n はひとつ前でつけたコンテナの名前
-g は最初に作ったリソースグループの名前

こちらを実行すると、コンテナの様子が表示されます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/2080/ca73e412-ebc7-eea4-343c-9e668ee376a8.png)


ProvisioningStateがSucceededになるとコンテナは起動しています。
IP:portにあるアドレスとポートをブラウザで開けばNode-REDが使えます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/2080/cac5f738-f6af-ecef-fbb8-42f1eb06a864.png)


## 注意事項

このドキュメントではAzure Container Instancesというサービスを使ってコンテナを動かしています。サービスの詳細はこちらでご確認を。
https://docs.microsoft.com/ja-jp/azure/container-instances/

このサービスは2017年10月27日現在Preview扱いです。また、サービスの利用料金の計算が少し特殊なので、ご注意ください。( https://azure.microsoft.com/ja-jp/pricing/details/container-instances/ )
具体的には、インスタンスが確保したCPUとメモリの量、インスタンスの数、起動していた時間（秒単位）で計算されます。

Node-RED Docker版では**認証の機能が有効になっておりません**。そのため、放置すると悪さをされる可能性が高いです。 **遊び終わったら速やかにコンテナを削除しましょう。** 削除は以下のコマンドで実施できます。

```
az container delete -n nodered -g pakueacinodered
```
上のコマンドで削除した場合はコンテナだけ消えますので、再度使いたい時は作成手順の３つのコマンドのうち、2番目から実行してください。（リソースグループを使いまわせます）
Jupyter Notebook仮想環境構築メモ(mayavi)



##はじめに
Jupyter Notebookで3D描写を行えるmayaviを使用するための仮想環境の設定についての覚え書きです。
筆者が使用しているmac osでの方法を記述します。
WindowsやLinuxでも可能なはずですが、一部方法が異なる場合があります。適宜確認してください。

##準備
https://www.anaconda.com/download/#macos より適当なanacondaをインストールしてください。
以下はpython3用のanacondaをインストールし、ホームディレクトリにanaconda3のディレクトリができているものとします。

##手順
iTermなどの端末エミュレータを起動し、コマンドラインでの操作を行います。
###anaconda3のactivate

    $ source ~/anaconda3/bin/activate root

anacondaを使用する場合は基本的にanacondaをactivateしておきましょう。
現時点では仮想環境を作成していないので、デフォルトのpython3環境をactivateします。

###Python2.7の仮想環境py27の作成

    (base) $ conda create -n py27 python=2.7

mayaviはpython2のバージョンでしか利用できません。
なので普段python3を使用している場合はmayaviを使用するためのpython2の仮想環境を作成します。
仮想環境の名前はオプション -n で設定できます。今回はpy27という名前にします。

###mayaviのインストール

    (base) $ conda install -n py27 -c menpo mayavi=4.5

###仮想環境py27への切り替え

    (base) $ source activate py27

python2環境に切り替えます。
anaconda3をインストールしたときに~/anaconda3/bin/に自動的にPATHが通っていると思います。

###nbextensionsのインストール

    (py27) $ conda install -c conda-forge jupyter_contrib_nbextensions

    (py27) $ jupyter nbextension install --py mayavi --user

mayaviのユーザーになるためにnbextensionsをインストールします。

###仮想環境py27のカーネルをJupyterに追加

    (py27) $ jupyter kernelspec install-self

Jupyter Notebookで環境の切り替えができるようになります。

###numpyのインストール

    (py27) $ conda install numpy

説明不要かと思われますが、数値計算用のパッケージです。

###seabornのインストール

    (py27) $ conda install seaborn

グラフ描写用のパッケージです。
matplotlibでグラフは描けるので、インストールしなくても可。

###PyQt4へダウングレード

    (py27) $ conda install pyqt=4

mayavi使用時に古いバージョンであるPyQt4を要求されるので、PyQt5からダウングレードしてください。

###h5pyのインストール

    (py27) $ conda install h5py

HDF5形式のファイルを用いる場合はインストールしてください。

##おわりに
mayaviは古いpython2でしか使用できず、python2は2020年にサポートが終了するようです。
なので将来的には別の方法に移行する必要がありますが、記しておきます
続　laravel/valetしてた件

# まだLaravelしてる
頑張ってるよー。
PHP無茶苦茶苦手な人間がどこまで無理できるのか。

## スケジュール的なものに躓いた件

なんか特定の人に
特定の時間に
アラートメールを送りたいってなって、躓いたのです。
えぇ（初心者ですから）

`app/Console/Kernel.php`
の中の schedule()でスケジュールできるらしい。
```$schedule->command('コマンド名')->dailyAt('10:00')->timezone('Asia/Tokyo');```
でスケジュールになる
`コマンド名` は php artisan `コマンド名` になるね
`dailyAt`は発生タイミング
コマンド名は app/Console/Commandsの中にある
で
`$signature`で指定した物。
ってことだったらしい。

## なんかうまく動かない。
キャッシュのクリアはここらへんらしい
```shell-session
php artisan cache:clear
php artisan config:clear
php artisan route:clear
php artisan view:clear
```

で
`php artisan queue:work`
キューの最初のジョブを実行するらしい。

あと
定期的なのは
`php artisan schedule:run`
とか。

## lognのかくにん
`tail /usr/local/var/log/nginx/error.log`
上にログが入っている。

## シェアまで出来た。
`valet unsecure`
`valet share`
Http/Kernel.php の `\App\Http\Middleware\HttpsRedirect::class`
をコメントアウトしたら出来た。

## はふ。
とりあえず頑張ってます。
シェルスクリプトを自己文章化する


Friday I/O
株式会社ワムウでは、毎週金曜日は 興味がある事柄に取り組み、その成果を何らかの形でアウトプットする日 としています。


## はじめに

Dockerを使用した開発では `docke-run` , `docker-compose run` のようなコマンドと引数の数が複雑になりがちです。
そのために皆さん都度ラッパースクリプトを記述し解決を図ることでしょう。

しかし時間が経った後に、そのスクリプトを走らせようとした時はしばしばラッパースクリプトのサブコマンドを忘れていたりするものです。

`Usage` を丁寧に記述することで、この問題は解決することにはなりますが **Usageを都度メンテナンスする必要がある**　という別の問題が発生します。

これらの問題を解決するために **シェルスクリプトを自己文章化する** という解決策を提示します。


## 実現方法

下記のように `Usage` をファイルの先頭にまとめて記述するのではなく、各サブコマンド関数名の後ろに `##` を付けてコメントを記述します。

```sh
version() ## Show version
{
    echo "$(basename ${0}) version 0.0.1 "
}    

start() ## Start some program
{
    echo "COMMAND START"
}

stop() ## Stop some program
{
    echo "COMMAND STOP"
}

restart() ## Stop and Restart
{
    stop && start
}
```

このようなサブコマンドが記述されたスクリプトに、Usageをこのように記述します。

```sh
usage() ## Show this message
{
    echo '\033[33mUsage:\033[m'
    echo " $0 [command]"
    echo

    echo '\033[33mCommands:\033[m'
    grep -E '^(function\s+)?\w+\(\)\s+\{?\s*##' $0 | sed -e 's/{//;s/ \{1,\}/ /g;s/function //;s/() ## /<>/' | awk -F '<>' '{printf " \033[36m%-20s\033[0m %s\n", $1, $2}'
}
```

後は各関数を引数として受け取りサブコマンド化するだけです。

```sh
ACTION="$1"

if [ -n "$(type -t $ACTION)" ] && [ "$(type -t $ACTION)" = function ]; then
     $ACTION $@
 else
    echo "\033[31m[ERROR] Invalid command \033[m'${1}'"
    echo
    usage
    exit 1
fi
```

## 実行例

![example.gif](https://qiita-image-store.s3.amazonaws.com/0/97820/f8a1ceea-0181-479b-4886-9f3b048aa037.gif "example.gif")


https://asciinema.org/a/SvBn06mWomErMftenqLg0PcxE


## 全コード

```sh
#!/bin/sh

ACTION="$1"

version() ## Show version
{
    echo "$(basename ${0}) version 0.0.1 "
}    

start() ## Start some program
{
    echo "COMMAND START"
}

stop() ## Stop some program
{
    echo "COMMAND STOP"
}

restart() ## Stop and Restart
{
    stop && start
}

usage() ## Show this message
{
    echo '\033[33mUsage:\033[m'
    echo " $0 [command]"
    echo

    echo '\033[33mCommands:\033[m'
    grep -E '^(function\s+)?\w+\(\)\s+\{?\s*##' $0 | sed -e 's/{//;s/ \{1,\}/ /g;s/function //;s/() ## /<>/' | awk -F '<>' '{printf " \033[36m%-20s\033[0m %s\n", $1, $2}'
}

if [ -n "$(type -t $ACTION)" ] && [ "$(type -t $ACTION)" = function ]; then
     $ACTION $@
 else
    echo "\033[31m[ERROR] Invalid command \033[m'${1}'"
    echo
    usage
    exit 1
fi
```

サブコマンドを `case` 文で処理したい場合などは `grep` の正規表現を変更するとよいでしょう。


## 参考

- [Makefileを自己文書化する](http://postd.cc/auto-documented-makefile/)
- [使いやすいシェルスクリプトを書く
](http://deeeet.com/writing/2014/05/18/shell-template/)
Unity+NGUIで、ScrollViewより上に重ねてUIButton等など配置


Unityの**NGUI**の**ScrollView**を使っていると、
ScrollViewより上に何か画像やボタンを乗せたくなる時がある。
左右のスクロールボタン等。。。

色々探した結果、
ScrollViewの**UI Panel**の**Sort Order**が描画順を管理しているらしく、
これを重ねたいUISpriteやUIButtonにも管理用にUI Panelを追加し、
**「Sort Order」**で管理すれば
いけた！！

<img width="647" alt="スクリーンショット 2017-10-27 14.37.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/37406/cab10fb6-85d8-0db0-5bb4-26f3fd1a0080.png">


最初は頑張って、ノードのネスト位置を変えたり、Depth Orderをいじいじしたり、
強制的にTransfromをいじったりしていましたが、こんな方法があったのとは、
NGUIの公式のサンプルにも載せて欲しい。。。！！（泣）

追記scrollview上にUIButtonを重ねて、そのボタン上でドラッグしてもスクロールするようにする場合UIButton側にも「DragScrollView」コンポーネントを追加する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37406/c2c45100-48f7-8ad9-336d-81a92f6c398e.png)


> 検証環境
*Unity2017 2
*MacOSX ElCaptain
*NGUI最新版2017-10-27時点
LINQについての備忘録

未だにLINQを使いこなせていなかったので、
忘れる前に備忘録。

特に有用そうなものをピックアップ。
　　

ラムダ式の引数は
foreach(var item in DataList)
でいうところのitemを指す。
→これに気付くまでなかなか
　LINQ内でのラムダ式が理解できませんでした…　　
　　


```csharp:LINQ用List
// Dataクラスはid, name, pointプロパティを持つとする。
var DataList = new List<Data>(); 
```

```csharp:①複数件のデータを取得
var records = DataList.Where(data => data.point == "10");
```
①whereでは~~Data[]の配列~~　IEnumerable<Data>型で返ってくるので
　必要に応じてListへ変換する。
　
　→ToList()について、コメントをいくつかいただいたので削除しました。
　TPOに応じて、ToArray()などの使い分けが必要のようですね。
　無意味なToList()はリソースの無駄遣いとなるようです。



>.ToList()すると、Listの実体が作られるため、処理コストがかかる＆あとでガベージになります。

>もしListとして扱う必要がないのなら（ただ一覧として持っておきたいだけ、すぐにforeachするだけ）なのであれば、あえて.ToList()しないほうがいい場合もありそうですね。

>もちろん、最終結果をListとして保持しておく必要がある場合は、.ToList()は必要です

　　

```csharp:②一意なデータを取得
var record  = DataList.FirstOrDefault(data => data.id == "1");

//②と同様の結果が得られる(LINQではなくListのメソッド)
var record　= DataList.Find(data => data.id =="1");
```
②**.First：**一致するデータがないとExceptionが発生するので注意。
　**.FirstOrDefault, .Find：**参照型ならデフォルト値としてnullを返します。

　個人的にはFindの方が可読性的に好みですね。
　(ただし、パフォーマンスはFirstの方が上のようです。)
　
　FirstOrDefault, .Findについてコメントをいただきました。
　**.FirstOrDefault：**IEnumerableのメソッド
　**.Find：**Listのメソッド
　なので前者の方が統一的に使えるようです。
>.FirstOrDefault vs .Find ですが

>これ、宣言されている場所がそれぞれ違います。

>FindはListが持っているメンバメソッドです。なのでList以外では"使えません"。
 一方FirstOrDefaultはLINQというかIEnumerableに（拡張メソッドとして）実装されているのでどんなリストの型でも使えます
。

　　

```csharp:③データの存在確認
bool existsData = DataList.Any(data => data.id == "1");
```
```csharp:④データの件数確認
int cnt = DataList.Count(data => data.point == "10");
```


```csharp:⑤全データに対して値に手を加える
var records = DataList.Select(data => data.id * data.id);
```

```csharp:⑥匿名型クラスの定義をインスタンスの生成と共に行う
var records = DataList
              .Select(data =>
              new {
                    data.id
　　　　　　　　　　, data.name
                  });
```

```csharp:⑦インデックスの付与
var Datas = DataList
              .Select((data, index)=>
              index
              , new
              {
                    data.id
　　　　　　　　　　, data.name
              });
```

その他ではExcel関数的な、
Sum, Average, Max, Minあたりは
使えそうですね。

　　
また最近気づいた便利なメソッド。
フォーム内のコントロールにまとめて処理したい時に使いました。

```csharp:⑧Button型を抽出
var btns = this.Controls.Oftype<Button>();
foreach (var btn in btns)
{
    btn.Enabled = false;
}
```

```csharp:⑨ジェネリックにCastして、ControlsへLinqを使えるようにする
var btns = this.Controls.Cast<Control>();
                        .Select(ctrl => ctrl as Button)
```
これら２つのメソッドは
ジェネリックな```IEnumerable<T>```型でなくても使えるので、
Controls(Control[]型)に直接使えます。

**OfType：**isで判定。型変換できたものだけを抽出する。
**Cast：**()で判定。キャスト失敗するとInvalidCastException投げる。

　
まだまだ未熟者ですので、
記述に間違い等あればご指摘よろしくお願いいたします。

こちらもご覧ください
[LINQでのJOINについての備忘録](https://qiita.com/mounntainn/items/ded6a989c8f5bf091889)

---
参考：
[そのforeach本当に要りますか？～for/foreach等をLINQに書き換える～ - Qiita](https://qiita.com/Marimoiro/items/bf560d7406511380d7b6)
[OfType<T>メソッドとCast<T>メソッド ](http://outside6.wp.xdomain.jp/2016/08/11/post-615/)
AWS BeanstalkでCronを設定する際に環境変数を付け加える

# AWS BeanstalkでCronを設定する際に環境変数を付け加える

Beanstalkで各環境を管理していて、環境変数 `PARAM1` で環境名を送って切り分けてます。

* テスト環境 => dev
* ステージング環境 => stg
* 本番環境 => prod

送られた環境変数をFWのbootstrap的な箇所で受けとって、環境別の設定を読み込んでいます。

現状、cronも `.ebextensions` でcronの設定を記載していたのですが、環境変数を渡さないとFWが環境を判断できずどうしようとなっていました。

諸々調べて結果、以下みたいにすれば環境取れるようになりました。(簡単だった)

```
container_commands:
  01_cron:
    command: "echo \"00 04 * * * PARAM1=$PARAM1 /usr/bin/php /var/www/html/fw/bin/command batch01\" > /var/spool/cron/batch"
  02_cron:
    command: "echo \"30 04 * * * PARAM1=$PARAM1 /usr/bin/php /var/www/html/fw/bin/command batch02\" >> /var/spool/cron/batch"
```

こんなやり方のほうがいいよみたいなのあれば、ぜひ教えてください。
代数的データ構造 in JavaScript


JavaScriptには代数的データ型はありませんが、case値を関数で定義することによって代数的データ型を表すことが出来ます。

# match関数の作成

```currency.js
var match = (data, pattern) => {
	return data(pattern);
};
```

代数的データ型のパターンマッチを行うための関数です。

# ex: 通貨を代数的データとして表す

```haskell:Haskellの場合
data currency = yen | dollar
```

``` currency.js
// case yen
var yen = () => {
	return (pattern) => {
		return pattern.yen;
	};
};

// case dollar
var dollar = () => {
	return (pattern) => {
		return pattern.dollar;
	};
};
```

* case値を関数で定義しているところがポイントです。

# ex: 通貨に対応する単位を取り出すパターンマッチ例

```currency.js
// 単位を取り出す
var unit = (currency) => {
	return match(currency, {
		yen: "¥",
		dollar: "$"
	});
};


// 使用例
console.log(unit(yen())) // ¥
console.log(unit(dollar())) // $
```

# まとめ

「関数型プログラミングの基礎 JavaScriptを使って学ぶ」では、リストを上記の代数的データ構造を用いて表し、関数型プログラミングの手法が解説されています。

# 参考書
* 関数型プログラミングの基礎 JavaScriptを使って学ぶ [(amazon)](https://www.amazon.co.jp/%E9%96%A2%E6%95%B0%E5%9E%8B%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E3%81%AE%E5%9F%BA%E7%A4%8E-JavaScript%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E5%AD%A6%E3%81%B6-%E7%AB%8B%E5%B7%9D%E5%AF%9F%E7%90%86/dp/4865940596)

  関数型プログラミングとはなんぞやというところから、
  Haskelなどの関数型プログラミング言語で用意されている関数(reduce, map, foldrなど）をJavaScriptで順序立てて説明してくれているので、直接関数型プログラミング言語による解説では得られない知見が学べます。
  また何気なく使っているプログラミングの専門用語も丁寧に解説されており、プログラミングをあらためて勉強し直すにも最適の参考書だと思います。
.NET Framework のアップグレードを一時的にブロックする方法


#.NET Framework の 4.7 のインストールを一時的にブロックする方法
https://support.microsoft.com/ja-jp/help/4024204/how-to-temporarily-block-installation-of-the-net-framework-4-7

#".NET Framework の インストールを一時的にブロックする方法" の検索結果
https://support.microsoft.com/ja-jp/search?query=.NET%20Framework%20%E3%81%AE%20%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%82%92%E4%B8%80%E6%99%82%E7%9A%84%E3%81%AB%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95
プロパティへのアクセスで文字列をつくる

# やってみたいこと


``` javascript
const a = This.is.a.pen;
// a = "This is a pen"
```
`This`オブジェクトの`is`プロパティの`a`プロパティの`pen`プロパティにアクセスすると"This is a pen"という文字列になる的なことをやってみたかった

# やりかた

Proxyでできる

``` javascript
const L = function(){
    const text = [];
    const handler = {
        get: function(target, name){
            if(name === "_$"){
                return function(postfix){
                    if(postfix){
                        return text.join(" ") + postfix;
                    }else{
                        return text.join(" ");
                    }
                }
            }else if(name === "_"){
                return function(token){
                    text.push(token);
                    return p;
                }
            }else if(name === "$"){
                return function(){
                    text.push("\n");
                    return p;
                }
            }else{
                text.push(name);
                return p;
            }
        }
    }
    const p = new Proxy({}, handler);
    return p
}
```
``` javascript
const t = L().I.have._(2).apples.$()
             .This.is.a.pen._$(".");

// t === "I have 2 apples
//        This is a pen."
```

- `_$()`で文字列出力
- `$()`で改行
- `_(args: any)`で途中に何か文字列とか追加

にしてみた

# 何につかえるの？

...
Djangoのsettings.py周りのメモ

Django 1.11.6版です

外のサーバに置いた時にいろいろ設定が必要だったりエラーがでたりしたので備忘録。

エンコード指定
===
Python3環境で作ってるといらないっぽいけどPython2環境で動かした時にエラーがでたので、両方で動くように常にファイル先頭に入れておいたほうが良さげです。

```python:settings.py
# coding: utf-8
```

追加で外部ファイルから設定を読み込む
===
追加の設定を取り込みます。DBの設定とか書いてVCSでignore指定しておくとリポジトリにパスワードが保存されなくて良いですね。

settings.pyと同じ場所にlocal_settings.pyというファイルを置いてsettigs.pyの最後の方にimportを記述します。ファイルが無くても動くように例外を拾うようにしておきます。

```python:settings.py
try:
	from .local_settings import *
except ImportError:
	pass
```

テスト用DBをsqliteにする
===
テストで本番DBにアクセスしたくないのでDBを変えます。特にsqliteにすることでDBの初期化が激っぱやになるので、普段のテストが気軽にできます。

外部ファイルでDBの設定を変える可能性があるので、settings.pyの一番最後に書くとよさげです。

```shell
python manage.py test
```
でテストを実行した時に、引数がtestなのでsys.argvにtestが含まれるかで判断できます。

```python:settings.py
import sys
if 'test' in sys.argv:
	DATABASES['default'] = {
		'ENGINE': 'django.db.backends.sqlite3',
		'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
	}
```

プロジェクトディレクトリ直下にtemplate
===
TEMPLATES の中の DIRS にos.path.join(BASE_DIR, 'templates')を追加します。

```python:settings.py
TEMPLATES = [
	{
		'DIRS': [os.path.join(BASE_DIR, 'templates')],
```

プロジェクトディレクトリ直下にstatic
===
わりとネットの情報が錯綜しているところです。バージョンによって挙動が違うのかもしれません。

```bash
python manage.py collectstatic
```
が実行されると、STATIC_ROOTで指定したディレクトリに、SATATICFILES_DIRSで指定したディレクトリの中身がコピーされます。STATIC_ROOTにNginxやApacheが参照するディレクトリを指定するといった感じの想定でしょうか。

collectstatic使わないんだったらSTATIC_ROOTの設定はいらないようです。

```python:settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
	os.path.join(BASE_DIR, 'static')
]
```
なお、staticは DEBUG=True のときしか使えません。

リバースプロキシでstatic
===
テンプレートで{{STATIC_URL}}使ってると、リバースプロキシ通すとURLがおかしくなるので対処します。

nginxの設定

```nginx
        location /アプリ名/static/ {
                proxy_pass http://IPアドレス:8000/アプリ名/static/;
        }
        location /アプリ名/ {
                proxy_pass http://IPアドレス:8000/;
        }
```
※Djangoのstaticを止める時は、/アプリ名/static/の飛ばし先をWebサーバに変更します

後は、Djangoの追加設定を記述した外部ファイルで

```python:local_settings.py
STATIC_URL = "/アプリ名/static/"
```

ALLOWED_HOSTSの設定
===
どこからでもアクセスできるようには

```python:local_settings.py
ALLOWED_HOSTS=["localhost", "*"]
```

リバースプロキシからアクセスするには

```python:local_settings.py
ALLOWED_HOSTS=["localhost", "リバースプロキシのIP"]
```
なおnginxで

```nginx
proxy_set_header    Host        $http_host;
```
が設定されている場合、ホスト名で許可します

```python:local_settings.py
ALLOWED_HOSTS=["localhost", "ホスト名"]
```

テンプレートで使えるデフォルトの変数を増やす
===
{{STATIC_URL}}みたいな、どのテンプレートでも使える変数を増やします。

まずsettings.pyに変数を追加します。ここではURL_ROOTを作ってみます。

```python:settings.py
URL_ROOT = "/"
```

settings.pyと同じディレクトリに設定ファイルを追加。ファイル名はなんでもよいですが、ここでは仮にcontext_processors.pyとします。

ファイルの中に関数を１つ作り(これも名前はなんでもよい)、変数名とsettings.pyで作った公開したい変数のペアを返します。

```python:context_processors.py
from django.conf import settings

def common_variables(request):
	return {
		'URL_ROOT': settings.URL_ROOT,
	}
```

settings.pyでこのファイルを TEMPLATES の OPTIONS の context_processors に追加します。

```python:settings.py
TEMPLATES = [
	'OPTIONS': {
		'context_processors': [
			'プロジェクト名.追加したファイル名.作った関数名',
```

今回の例でいくと、追加するのは

```
'プロジェクト名.context_processors.common_variables',
```

これで個別にcontextにパラメータを設定しなくても、全てのテンプレートの中で{{URL_ROOT}}が使えるようになります。
何故ジェネレータ関数定義は「def」を関数定義と共有して私を混乱させるのか

チラ裏級のメモ

# 何故defを使いまわしたか

PEP 255 にあった。

> 18-May-2001
> ...
> No argument on either side is totally convincing, so I have consulted my language designer's intuition.

新しいキーワードを使うか否かで当時確信できなかったので言語設計者としての直感に頼った、といったところ

当初の背景はおそらく「イテレータの実装」が主眼にあった。もちろん今でもそうなのだが、後述する他の機能以外はないシンプルなものがジェネレータだった。

# 背景

ジェネレータベースのコルーチンにもなる変幻自在のジェネレータが今の姿になるまでには段階を踏んだ。PEP 342である。

https://www.python.org/dev/peps/pep-0342/

> 10-May-2005

`g.send()` と `g.throw()` はここに起因する。

ネイティブコルーチンはPEP 492である。

https://www.python.org/dev/peps/pep-0492/

> 09-Apr-2015

Pythonは基本的に互換性を大事にする。また複数の方法より一つの方法に期待する

```shell-session
>>> import this
The Zen of Python, by Tim Peters

...
There should be one-- and preferably only one --obvious way to do it.
Although that way may not be obvious at first unless you're Dutch.
...
```

あとはあくまで「判断の問題」だと思われる。

互換性の問題から歪な設計が残っている部分は他にもないわけではない。それでも相当の及第点以上だからこそ今があるんだろう。今から設計を考えてどちらに倒れるかは不明だし、正直な所語っても大きな意義はないように感じる。
iOSでもAndroidでもスマホアプリ側でバッジを好きに操作できる！！

# バッジとは
これです。
![Screenshot_2015-04-07-13-28-501.png](https://qiita-image-store.s3.amazonaws.com/0/163142/01e4fa74-5346-a31e-82a3-58221368a077.png)

---
# スマホアプリ開発は苦労の連続・・・

Monacaを使ってハイブリッドでスマホアプリの開発をしています。
色んな壁にぶつかりましたが、何とか突破して来て
（プッシュ通知・カスタムプラグイン・セキュリティ問題などなど・・・）
最後にぶつかった壁がバッジでした。

---
# バッジはiOSだけ？
Androidは普通バッジ表示できないらしい・・・
（ホームアプリに依存？）

じゃあとりあえずiOSを。と思いましたが
サーバからのプッシュ通知の時に指定する形しかなく
自分の要望を満たせませんでした。

詳しい内容はこちらです。
[https://teratail.com/questions/97820](https://teratail.com/questions/97820)

---

# Monaca・NCMB・Cordova（PhoneGap）Firebaseなどなど・・・
色々あって便利なのですが、あり過ぎていつも大変です。
その度に全てを調査して、検証コードを書いて
一番良いものを選択するの繰り返し・・・

---
# とりあえずバッジ更新はコレ！！

teratailのサイトに答えも出てしまっていましたが
バッジ更新をアプリだけで色々いじりたいならコレ一択です！！
[https://github.com/katzer/cordova-plugin-badge](https://github.com/katzer/cordova-plugin-badge)

導入も楽。実装も楽。最高でした＾＾

---
# 今回は
この感動を記事にしたかっただけです 笑
冒頭にも書いた通り、その他にも色んな壁にぶつかって突破した経験はあるので
主にMonacaを使ってスマホアプリ開発している方がいたら
是非とも色々情報交換させていただけたら嬉しいです！
初心者向け 無料でプログラミングが勉強できるアプリ/サイト

いくつか私が試してみたものについて、感想や難易度・どこまで無料で使えるのかを書きます。だいたいですが難易度順に書いていきます。
エンジニア以外の方で「プログラミングってどんなものか、少し理解したいなぁ」という方に向けて書きました。

##アプリ編
＊Android向けアプリが少ないです･･･すみません。
### codebelle
難易度 ☆
[codebelle - スキマ時間で学ぶプログラミング - for iOS](https://itunes.apple.com/jp/app/codebelle-%E3%82%B9%E3%82%AD%E3%83%9E%E6%99%82%E9%96%93%E3%81%A7%E5%AD%A6%E3%81%B6%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0/id1072749712?mt=8)
iPhone/iPadアプリを開発するための言語、Swiftが勉強できます。
Swiftというよりプログラミングの基礎が学べます。
問題に対して選択式で回答します。条件分岐・関数・クラスの話など、懇切丁寧に説明してくれます。本当に丁寧です。
全部で10レッスンありますが、全て無料です。

### SwiftBites
難易度 ☆☆
[SwiftBites - for iOS](https://itunes.apple.com/jp/app/swiftbites-learn-how-to-code/id1032914874?mt=8)　/　[SwiftBites - for Android](https://play.google.com/store/apps/details?id=com.beaconmobile.swiftbites)
こちらもSwiftです。codebelleより少しだけ難易度が高いと思います。
問題文は英語ですが、大学生ならだいたい読めると思います。英語の勉強にもなるかも。
TheBasicsという最初の問題だけ無料です(それでも11問解けます)。

### Lrn
難易度 ☆☆
[Lrn - for iOS](https://itunes.apple.com/us/app/lrn-learn-to-code-in-html-css-javascript-ruby-python/id1019622677?mt=8)　/　(Android版も近日リリース予定らしいです)
HTML/CSS・Javascript・Python・Rubyが学べます。
初めての方にはHTMLとJavascriptをおすすめしたいです。JavascriptはLesson4までが無料です。
回答形式は、選択式と入力式があります。問題文は英語です。

### アルゴリズム図鑑
難易度 ☆☆
[アルゴリズム図鑑 - for iOS](https://itunes.apple.com/jp/app/%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0%E5%9B%B3%E9%91%91/id1047532631?mt=8)　/　[アルゴリズム図鑑 - for Android](https://play.google.com/store/apps/details?id=wiki.algorithm.algorithms&hl=ja)
バブルソート・選択ソートといった基本のソートから、ユークリッドの互徐法・ランレングス符号などの仕組みを見ることができます。セキュリティ(暗号方式等)やデータ構造(配列等)の話もあります。
私は大学で習ったことの復習に良いなと思いました。忘れていたもの・知らなかったものもありました。エンジニアの方も復習にどうぞ。
基礎的な部分はほぼ無料で見れます。


##サイト編

###ドットインストール
難易度 ☆☆～☆☆☆
[ドットインストール - 3分動画でマスターする初心者向けプログラミング学習サイト](https://dotinstall.com/)
3分間の動画を見ながら自分でコードを打ち込んで勉強するタイプです。自分で打ち込むので、少し難易度が上がります。
残念なことにSwift入門は有料です。まずはHTML入門とJavaScript入門をおすすめします。
スピードは結構早いです。しかし動画なので戻ることもできますし、難しくてムリ･･･という風にはならないと思います。
数十秒ごとに停止して、自分でコードを書いてみる→再生というのを繰り返すと良い感じです。


### CodeIQ
難易度 ☆☆☆☆☆
[CodeIQ](https://codeiq.jp/)
技術系の記事を見ているとたまに出てくる(?)「Javaちゃんからの挑戦状」などといった広告が、このCodeIQです。難しいので勉強にはおすすめしません。勉強というより実力試しです。
問題(5問程度)に回答→答え合わせ　という流れなのですが、不正解の場合に解説があるわけではないので、「なんで不正解なの？」というのがわかりません。
これをやって「全然わからない･･･！！」と挫折しないでください。

##最後に
気になったものがありましたら、是非試すだけでも試してみてくださいね。(無料ですから！)
トップレベルドメインを活用した社名、サイト名

様々なトップレベルドメインを選択できるようになり、ドメイン名も「うまいこと考えたなあ」と思うようなものを見かけるようになりました。

そんなおもしろドメイン名を集めてみたいと思います。情報提供お願い致します。

ilove.cat

corp.meyasuba.co

kemo.no

編集中
メモ semantic-ui

# センタリング , 中央寄せ , center align

お手軽なのは「センタリング３」かなぁ。

## センタリング1

```
<div class="ui equal width center aligned padded grid">
  <div class="row">
    <div class="column">
    内容
    </div>
  </div>
</div> 
```

https://semantic-ui.com/collections/grid.html#colored

## センタリング2

```
<div class="ui one column centered grid">
  <div class="column">内容</div>
</div>
```

https://semantic-ui.com/collections/grid.html#centering-content

## センタリング3

枠あり

```
<div class="ui center aligned segment">
  Center
</div>
```

枠なし

```
<div class="ui center aligned basic segment">
  Center
</div>
```

https://semantic-ui.com/elements/segment.html#text-alignment


## センタリング４（その他）

semanticに頼らない方法で自由に・・・

```
style="text-align:center;"
```

# checkbox

forを必ず付けること。
（iphoneの画面表示でバグる）

```
<div class="ui checkbox">
   <input type="checkbox" id="tos" tabindex="0" class="hidden">
   <label for="tos">利用規約に同意します（<a href="/tos">確認</a>）</label>
</div>
```




# サイドバー

|class|動作 |
|:-----------------|:------------------|
|ui sidebar menu|必須|
|vertical  |必須。aリンクを縦に並べる。 |
|inverted  |白黒反転させる  |
|right|右側に出す|
|uncover|影を付けない|


setting

|setting|設定例|動作|
|:----|:----|:----|
|dimPage|false|メニューが開いている時、メニュー以外の場所を暗くする|
|closable|false|メニューが開いている時、メニュー以外の場所をタッチして閉じない|

```
.sidebar('setting', {
       'transition': 'overlay',
       'dimPage': false,
})
```

# ドロップダウン

ドロップダウン動かない場合は、スクリプトが必須なのに無いという落とし穴にハマっている可能性があるので、チェック。

```html
<script>
    $('.ui.dropdown')
            .dropdown();
</script>
```
S3上ファイル存在チェックスクリプト

EmbulkでS3上のファイルを読み込む際、ファイルがなくてもエラーにならないので、事前にチェックすることにした
awsコマンドが使用できる前提
環境変数でリトライ回数・間隔を指定可能

関連：
https://qiita.com/pilot/items/3014910fee5dce0ce3e3

```check_s3_file_exists.sh
#!/bin/bash

if [ $# -ne 3 ]; then
  echo "Usage: $0 bucket work_dir file" >&2
  exit 1
fi

bucket=$1
work_dir=$2
file=$3

myname=`basename $0 .sh`
resultfile=${work_dir}/${myname}_result_$$.txt

retry_count=${RETRY_COUNT:-5}
retry_unit_seconds=${RETRY_UNIT_SECONDS:-10}
#echo retry_count=${retry_count}, retry_unit_seconds=${retry_unit_seconds} # for debug

count=1
while :
do
  aws s3api list-objects --bucket ${bucket} > ${resultfile}
  status=$?
  if [ ${status} -eq 0 ]; then
    break
  fi
  if [ ${count} -eq ${retry_count} ]; then
    echo Retry over >&2
    rm -f ${resultfile}
    exit 1
  fi
  sleep_seconds=$((count * retry_unit_seconds))
  count=$((count + 1))
  echo Retry after ${sleep_seconds} seconds, next count is ${count} >&2
  sleep ${sleep_seconds}
done

grep '^ *"Key" *: *"'${file}'" *, *$' ${resultfile} > /dev/null
status=$?
rm -f ${resultfile}

if [ ${status} != "0" ]; then
  echo "File not found: "${file} >&2
  exit 1
fi

echo "File found: "${file}

exit 0
```
SFTPサーバ上ファイル存在チェックスクリプト

EmbulkでSFTPサーバ上のファイルを読み込む際、ファイルがなくてもエラーにならないので、事前にチェックすることにした
SFTPサーバへのログインが鍵認証である前提
環境変数でリトライ回数・間隔を指定可能

関連：
https://qiita.com/pilot/items/43ae966608861d8a7d92
https://qiita.com/pilot/items/3014910fee5dce0ce3e3

```check_sftp_file_exists.sh
#!/bin/bash

if [ $# -ne 7 ]; then
  echo "Usage: $0 host port user key_file work_dir dir file" >&2
  exit 1
fi

host=$1
port=$2
user=$3
key_file=$4
work_dir=$5
dir=$6
file=$7

myname=`basename $0 .sh`
cmdfile=${work_dir}/${myname}_$$.txt
resultfile=${work_dir}/${myname}_result_$$.txt

retry_count=${RETRY_COUNT:-5}
retry_unit_seconds=${RETRY_UNIT_SECONDS:-10}
#echo retry_count=${retry_count}, retry_unit_seconds=${retry_unit_seconds} # for debug

echo "ls ${dir}" > ${cmdfile}

count=1
while :
do
  sftp -o Port=${port} -o IdentityFile=${key_file} -o StrictHostKeyChecking=no -b ${cmdfile} ${user}@${host} > ${resultfile}
  status=$?
  if [ ${status} -eq 0 ]; then
    rm -f ${cmdfile}
    break
  fi
  if [ ${count} -eq ${retry_count} ]; then
    echo Retry over >&2
    rm -f ${cmdfile} ${resultfile}
    exit 1
  fi
  sleep_seconds=$((count * retry_unit_seconds))
  count=$((count + 1))
  echo Retry after ${sleep_seconds} seconds, next count is ${count} >&2
  sleep ${sleep_seconds}
done

grep -w ${dir}/${file} ${resultfile} > /dev/null
status=$?
rm -f ${resultfile}

if [ ${status} != "0" ]; then
  echo "File not found: "${dir}/${file} >&2
  exit 1
fi

echo "File found: "${dir}/${file}

exit 0
```
PowerShell でなんちゃって自作 export コマンド

Windows と Linux を行き来しているとコマンドの違いがめんどくさい。

環境変数を設定するときに、Windows 環境でもつい export コマンド使いそうになるので、いっそそれっぽく使えるよう PowerShell Profile に function 用意してみた。

```powershell
function export() {
    ($key, $value) = $args[0] -split "=";
    set-item "env:${key}" $value;
}

function unset() {
    $key = $args[0];
    remove-item "env:${key}";
}
```

これで、Windows でも export コマンドが使えて便利。

```powershell
PS> # 環境変数を設定する
PS> export HOGE=hogehoge
PS> 
PS> # 動作確認
PS> echo $env:HOGE
hogehoge
PS> 
PS> # 環境変数を削除する
PS> unset HOGE
```
Digdagサーバの日次処理を指定各日について実行するプログラム

Digdag 0.9.20まで動作確認済

```each_daily.rb
require 'date'
require 'open3'

STDOUT.sync = true

# 第一引数に-fを指定すると同一日付のセッションが既にあった場合にリトライする
force_retry = false
if ARGV[0] == "-f"
  force_retry = true
  puts "同一日付のセッションが既にある場合にはリトライします。"
  ARGV.shift
end

# 指定各日について日次処理を実行
ARGV.each do |date_str|
  date = Date.parse(date_str)
  puts date.to_s + "の日次処理を実行します。(前日" + (date - 1).to_s + "のデータを処理します)"
  cmd = "digdag start ＜Digdagプロジェクト名＞ daily --session " + date.to_s ★ここを書き換える★
  puts cmd

  session_id = nil
  need_retry = false
  Open3.popen3(cmd) do |stdin, stdout, stderr, wait_thr|
    stdout.each do |line|
      puts line
      tmp = line.match(/  session id: (.+)/)
      session_id = tmp[1] if tmp
    end
    stderr.each do |line|
      STDERR.puts line
      tmp = line.match(/hint: use `(.+)` command to run the session again for the same session_time/)
      if tmp && force_retry
        cmd = tmp[1]
        need_retry = true
      end
    end
    unless wait_thr.value.success?
      abort unless need_retry
    end
  end

  if need_retry
    puts cmd
    Open3.popen3(cmd) do |stdin, stdout, stderr, wait_thr|
      stdout.each do |line|
        puts line
        tmp = line.match(/  session id: (.+)/)
        session_id = tmp[1] if tmp
      end
      stderr.each do |line|
        STDERR.puts line
      end
      unless wait_thr.value.success?
        abort
      end
    end
  end

  cmd = "digdag session " + session_id
  loop do
    sleep 10
    status = nil
    Open3.popen3(cmd) do |stdin, stdout, stderr, wait_thr|
      stdout.each do |line|
        tmp = line.match(/  status: (.+)/)
        status = tmp[1] unless tmp.nil?
      end
      unless wait_thr.value.success?
        stdout.each do |line|        puts line end
        stderr.each do |line| STDERR.puts line end
        abort
      end
    end
    if status == "error"
      puts " error"
      abort
    elsif status == "success"
      puts " success"
      break
    else
      print "."
    end
  end

  70.times do print "-" end
  puts
end
```

実行方法

```
$ ruby each_daily.rb 2016-02-01 2016-02-02 2016-03-01 2016-03-02
$ ruby each_daily.rb -f 2016-03-01 2016-03-02
```
Digdagサーバの日次処理を指定期間繰り返し実行するプログラム

Digdag 0.9.20まで動作確認済

```period_daily.rb
require 'date'
require 'open3'

STDOUT.sync = true

# 第一引数に-fを指定すると同一日付のセッションが既にあった場合にリトライする
force_retry = false
if ARGV[0] == "-f"
  force_retry = true
  puts "同一日付のセッションが既にある場合にはリトライします。"
  ARGV.shift
end

# 指定日Fromから指定日Toまでの各日について日次処理を実行
# (指定なければ「本日」を指定したものとみなす)
fromdate = ARGV[0].nil? ? Date.today : Date.parse(ARGV[0])
todate   = ARGV[1].nil? ? Date.today : Date.parse(ARGV[1])
puts fromdate.to_s + "～" + todate.to_s + "の日次処理を実行します。(" + (fromdate - 1).to_s + "～" + (todate - 1).to_s + "のデータを処理します)"
# print "よろしいですか？[y/N] "
# if STDIN.gets.chomp != "y"
#   exit
# end
puts

(fromdate..todate).each do |date|
  puts date.to_s + "の日次処理を実行します。(前日" + (date - 1).to_s + "のデータを処理します)"
  cmd = "digdag start ＜Digdagプロジェクト名＞ daily --session " + date.to_s ★ここを書き換える★
  puts cmd

  session_id = nil
  need_retry = false
  Open3.popen3(cmd) do |stdin, stdout, stderr, wait_thr|
    stdout.each do |line|
      puts line
      tmp = line.match(/  session id: (.+)/)
      session_id = tmp[1] if tmp
    end
    stderr.each do |line|
      STDERR.puts line
      tmp = line.match(/hint: use `(.+)` command to run the session again for the same session_time/)
      if tmp && force_retry
        cmd = tmp[1]
        need_retry = true
      end
    end
    unless wait_thr.value.success?
      abort unless need_retry
    end
  end

  if need_retry
    puts cmd
    Open3.popen3(cmd) do |stdin, stdout, stderr, wait_thr|
      stdout.each do |line|
        puts line
        tmp = line.match(/  session id: (.+)/)
        session_id = tmp[1] if tmp
      end
      stderr.each do |line|
        STDERR.puts line
      end
      unless wait_thr.value.success?
        abort
      end
    end
  end

  cmd = "digdag session " + session_id
  loop do
    sleep 10
    status = nil
    Open3.popen3(cmd) do |stdin, stdout, stderr, wait_thr|
      stdout.each do |line|
        tmp = line.match(/  status: (.+)/)
        status = tmp[1] unless tmp.nil?
      end
      unless wait_thr.value.success?
        stdout.each do |line|        puts line end
        stderr.each do |line| STDERR.puts line end
        abort
      end
    end
    if status == "error"
      puts " error"
      abort
    elsif status == "success"
      puts " success"
      break
    else
      print "."
    end
  end

  70.times do print "-" end
  puts
end
```

実行方法

```shell-session
$ ruby period_daily.rb    2016-02-02 2017-03-04
$ ruby period_daily.rb -f 2016-03-01 2017-03-04
```
Angularチュートリアル(Tour of Heroes)やってみた - The Hero Editor

全7章立てになっている[Angularチュートリアル](https://angular.io/tutorial)をやってみての学び

他の章もやってみました
[3. Master/Detail](https://qiita.com/shitake4/items/1705a58663c268dd2785)

## QuickStart
セットアップはすごく簡単で、agunalrCLIでセットアップできた。たった３ステップでお手軽にプロジェクトを作成  
詳細は[こちら](https://angular.io/guide/quickstart)

もしnpmコマンドが使えない場合は、インストールが必要。
- [Macにnode.jsをインストールする手順。](https://qiita.com/akakuro43/items/600e7e4695588ab2958d)
- [Node.js / npmをインストールする（for Windows）](https://qiita.com/taiponrock/items/9001ae194571feb63a5e)


### プロジェクト構成
```
angular-tour-of-heroes
  ├─ src
  │  ├─ app
  │  │  ├─ app.component.ts
  │  │  └─ app.module.ts
  │  │
  │  ├─ main.ts
  │  ├─ index.html
  │  ├─ styles.css
  │  ├─ systemjs.config.js
  │  └─ tsconfig.json
  │  
  ├─ node_modules ...
  └─ package.json
```

## 1. introduction
チュートリアルでどんなものを作っていくのか等々説明

## 2. The Hero Editor
### 学んだ内容
1. データバインディングってどんなもの？
    - 1つのJSファイルの中で定義した変数をhtmlで参照と変更することができる

#### 1. データバインディングってどんなもの？

```ts:app.component.ts全体像
import { Component } from '@angular/core';

export class Hero {
  id: number;
  name: string;
}

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <h2>{{hero.name}} details!</h2>
    <div><label>id: </label>{{hero.id}}</div>
    <div>
      <label>name: </label>
      <input [(ngModel)]="hero.name" placeholder="name">
    </div>
    `
})
export class AppComponent {
  title = 'Tour of Heroes';
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}
```

##### 変数をhtmlで参照とは？

```ts:app.component.ts抜粋
export class AppComponent {
  title = 'Tour of Heroes';
}
```

```html:app.component.ts抜粋
template: `<h1>{{title}}</h1>`
```

この場合だと、変数のtitle, heroが出力されてこんな感じの表示になる

```html
<h1>Tour of Heroes</h1>
```

##### 変数をhtmlで参照と変更とは？
ユーザーの入力した変更に同期して内容を変更させる

```ts:app.component.ts抜粋
export class AppComponent {
  title = 'Tour of Heroes';
}
```

```html:app.component.ts抜粋
template: `
  <h1>{{title}}</h1>
<input [(ngModel)]="title">  `
```

挙動は下の感じです。inputで入力された内容がh1タグ内ですぐに反映されています
<img src="https://qiita-image-store.s3.amazonaws.com/0/64171/86f2fe05-73e1-015c-d60a-4d02c791bdf5.gif" width=30%>
n秒後に1回実行、もしくは実行をキャンセル[swift版]



「[n秒後に1回実行、もしくは実行をキャンセル](https://qiita.com/sakiyamaK/items/8d6d01fe8aa427247a7e)」のswift移植

iosで長いローディングが始まってからn秒後に広告を出す
もしくはn秒以内にローディングがキャンセルされたら広告を出さない

みたいな時に使おうかなって

情弱なのでいまだSwift3でやってます

#ソース
起動して2秒後に背景が赤になりますが、その前にタップしたら変わりません

```swift
class ViewController: UIViewController {

  //キャンセル用のパラメ
  fileprivate var cancelTimer:DispatchSource?

 //タイマーメソッド mainMethodがデフォルトだと10sec後に実行される
  fileprivate func resumeTimerMethod(afterTime:Double = 10.0, mainMethod:(()->())?){
    cancelTimer?.cancel()
    
    if let timer = DispatchSource.makeTimerSource() as? DispatchSource {
      //swift4.0だとこっちらしい
//      timer.schedule(deadline: .now() + afterTime)
      timer.scheduleOneshot(deadline: .now() + afterTime)
      
      timer.setEventHandler {
        mainMethod?()
      }
      timer.resume()
      
      self.cancelTimer = timer
    }
  }


  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    //背景を白く
    self.view.backgroundColor = .white
    
    //背景を赤くする処理を2秒後に実行
    self.resumeTimerMethod(afterTime:2) {
      DispatchQueue.main.async {
        self.view.backgroundColor = .red
      }
    }
  }
  
  override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    print("touch")
    //画面タッチしたらタイマーをキャンセル
    self.cancelTimer?.cancel()
  }
}

```

# 追記(2018/12/04)
・swift4にした
・遅延実行クラスとして分けた

普段はローディングを出したくないけど、通信状況が悪くてロードに時間がかかるときだけローディングを出したいとかに使えるよ

#ソース

## DelayedExec

```DelayedExec.swift
class DelayedExec{
  //キャンセル用のパラメ
  private var cancelTimer:DispatchSource?

  //タイマーメソッド methodがデフォルトだと10sec後に実行される
  func run(afterTime:Double = 10.0, _ method:(()->())?){
    cancelTimer?.cancel()

    if let timer = DispatchSource.makeTimerSource() as? DispatchSource {
      timer.schedule(deadline: .now() + afterTime)

      timer.setEventHandler {
        method?()
      }
      timer.resume()

      self.cancelTimer = timer
    }
  }
  //キャンセルメソッド
  func cancel(){
    self.cancelTimer?.cancel()
  }
}
```

# 追記(2018/12/14)
普通にもっとやりやすい`DispatchWorkItem`ってのがありました
[参考にしたよ](https://qiita.com/umireon/items/f2cf44621070e749d73e)

# ソース2

## DelayedExec

```swift
class DelayExec{
  private var workItem:DispatchWorkItem?
  //タイマーメソッド methodがデフォルトだと10sec後に実行される
  func run(afterTime:Double = 10.0, _ method:(()->())?){
    self.workItem?.cancel()
    self.workItem = nil
    let workItem = DispatchWorkItem { method?() }
    DispatchQueue.main.asyncAfter(deadline: .now() + afterTime, execute: workItem)
    self.workItem = workItem
  }
  //キャンセルメソッド
  func cancel(){self.workItem?.cancel()}
}
```

## 使い方

```swift
class ViewController: UIViewController {

  private let delayedExec = DelayedExec()

  override func viewDidLoad() {
    super.viewDidLoad()

    //5sec待っても通信してたらモーダル出そう
    self.delayedExec.run(afterTime:5) {
      DispatchQueue.main.async {
        print("通信中ですのモーダルでも出そうかな")
      }
    }
    //なにかしら非同期処理
    connect{
      //非同期処理が終わったらキャンセルする
      delayedExec.cancel()
    }
  }
}
```