OmniAICreator/Qiita-1.07M huggingface dataset:
iOSショートカットでJSを使いたい

どうも

突然ですが、皆さんはiOS12から追加された`ショートカット`を使っていますか！？（Androidユーザの方ごめんなさい:bow:）

ショートカットをうまく使うとsiriから今日のご飯を決めたり

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">今日のご飯を聞けるようにした<a href="https://twitter.com/hashtag/iOS12?src=hash&amp;ref_src=twsrc%5Etfw">#iOS12</a> <a href="https://twitter.com/hashtag/%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88?src=hash&amp;ref_src=twsrc%5Etfw">#ショートカット</a> <a href="https://t.co/W9QllgSlbZ">pic.twitter.com/W9QllgSlbZ</a></p>&mdash; うじまる🐣 (@uzimaru0601) <a href="https://twitter.com/uzimaru0601/status/1043463382722965505?ref_src=twsrc%5Etfw">2018年9月22日</a></blockquote>

毎日先輩から送られてくるうざいDMをTwitterに晒し上げたりできます

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">今日の中指、できるところまで自動化 <a href="https://t.co/kLPMT5KSvv">pic.twitter.com/kLPMT5KSvv</a></p>&mdash; うじまる🐣 (@uzimaru0601) <a href="https://twitter.com/uzimaru0601/status/1042794636584992768?ref_src=twsrc%5Etfw">2018年9月20日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 本題

今回、話をしたいのはこのショートカットでJSを動かすことが出来るという闇の魔術を皆さんに教えようと思います。（防衛術ではない・・・？）

# 方法

1. `script`タグの中にJSのコードを書く
2. HTMLからリッチテキストに変換
3. PDFを作成
4. テキストを抽出

これでJSで処理した値をショートカット側に持ってくることができます。

# 仕組み

察しの良い方は分かったと思いますが、`script`タグで動的に生成したDOMを元にリッチテキストを作成してからテキストとして抽出しています。

# メリット

- コードとして書けるので開発が楽
- 処理が速い

というメリットがあります。

簡単な検証をしてみましょう。
n個の乱数を生成するショートカットを`ショートカットだけver`と`JS ver`の２つ作って時間を計測してみます。

`n = 1000`で実行してみます。

### ショートカットだけver

<img width="375" alt="IMG_0911.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/159238/6cd1f4b3-5917-25d5-56a9-614ca7367c64.png">

### JS ver

<img width="375" alt="IMG_0912.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/159238/ca911944-614e-c596-8924-2fd0e9577656.png">

### 結果

![IMG_0914.PNG](https://qiita-image-store.s3.amazonaws.com/0/159238/c87d8821-13f9-8005-ba6a-f41727d7e794.png)

![IMG_0915.PNG](https://qiita-image-store.s3.amazonaws.com/0/159238/62223da5-6d5c-9cf5-29d4-1b1781bc8916.png)



だいたい１秒くらい差がでました。今回は簡単な処理だったので1000回でも1秒ほどしか差が出ませんでしたがもっと複雑になると少ない回数で時間がかかるとおもいます。

# 使用例

## リスト・辞書に何らかの処理を加える

ショートカットからAPIを使おうとすると結構しんどいです。
そこで闇の魔術を使いましょう。

前項の画像のJSコードのようにショートカットのテキストは任意の位置に任意の変数を埋め込むことができます

これを使うことによって`ショートカット → JS`へ値を受け渡すことができます。
注意点としては

- ショートカットのリストは文字列化をすると`,`区切りの文字列になる
- ショートカットの辞書は文字列化をするとJSON文字列になる

ということです。
これを理解しておけば扱うことができると思います。

## 汎用的なショートカットを作っておく

下の画像のようなJSコードを入力すると実行してショートカットのテキストにしてくれるショートカットを作っておくと捗ります。

<img width="375" alt="IMG_0913.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/159238/17272f8b-f406-0f27-7ab3-a60476af6bd2.png">


# 最後に

JSが扱えるなら全部JSに任せてしまいたくなりますが、「非同期な処理（APIを叩く等）はできない」です（当たり前と言ったら当たり前）
なので、ショートカット側でAPIを叩く → JSに処理をさせる がベストな方法な気がします。

最後にショートカットで[死の秘宝](https://dic.pixiv.net/a/死の秘宝)マークを書いて終わりにします！（闇の魔術要素）
<img width="375" alt="IMG_0917.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/159238/856383ba-8ff1-a616-16db-398669173e89.png">


それでは、良いショートカットライフを！
Traefik を使ってコンテナを自動でリバースプロキシに登録する

<!-- Traefik を使ってコンテナを自動でリバースプロキシに登録する -->

# Traefik とは

[Traefik] は Go 言語で書かれたリバースプロキシです。設定を動的に変えられることが特徴で、従来のリバースプロキシで行っていたルーティングの登録などを予め設定ファイルで行っていなくてもアプリケーションサーバをリバースプロキシ配下に登録することができます。

## 試した環境

- CentOS 7
- Traefik 1.7.5

## インストール

シングルバイナリを使用する方法とコンテナを使用する方法と 2 つあります。

### シングルバイナリを使用する場合

[GitHub] からバイナリをダウンロードしてパスの通ったところに配置して下さい。

[GitHub]: https://github.com/containous/traefik

### コンテナを使用する場合

`traefik` イメージを pull すれば使用できます。

```bash
$ docker pull traefik
```

## 使い方

コンテナを使って Traefik を起動した後、コンテナで起動したサーバをバックエンドサーバとして Traefik に自動登録する処理をやってみたいと思います。

### Traefik の起動

```bash
$ docker run --name traefik -d -p 80:80 -p 8080:8080 -v /var/run/docker.sock:/var/run/docker.sock traefik --api --docker
```

traefik に渡している各オプションの説明は次のとおりです。

- `--api` - ステータスを確認できるダッシュボードを使用可能にする（8080 ポートでアクセス可）
- `--docker` - Docker コンテナをバックエンドに登録できるようにする

## バックエンドサーバへのルーティング

次にコンテナで動くサーバを Traefik のバックエンドサーバとして登録します。ここでは `containous/whoami` イメージを使ってみます。

```bash
$ docker run --name whoami -d -l "traefik.frontend.rule=PathPrefixStrip:/whoami" containous/whoami
```

コンテナを起動するときに `traefik.` から始まるラベルを付与すると Traefik はそのラベルが付いたコンテナが監視対象であることを認識します。さらにラベルを使用してルーティングの設定や HTTP ヘッダの追加などを行うことができます。

- `traefik.frontend.rule`

というラベルは Traefik が受信したリクエストをバックエンドサーバに転送するときのルールを定義できるラベルです。

- `PathPrefixStrip:/whoami`

というのはルーティングのルールを定義したもので、リクエストが `/whoami` から始まるものはパスを `/` に変えてバックエンドサーバに転送するという意味になります。 Traefik の面白いところはこのようなルーティングの設定は従来であればリバースプロキシ側で行っていたのですが、 Traefik はバックエンドサーバ側で設定が可能であるという点です。そのため、新規にバックエンドサーバを登録したいときにわざわざリバースプロキシの設定を変更して再起動するといった作業が不要になります。

バックエンドサーバが正しく Traefik に登録されているかどうかを確認するためにリクエストを投げてみます。

```
$ curl http://localhost/whoami
Hostname: 79affa961863
IP: 127.0.0.1
IP: 172.17.0.3
GET / HTTP/1.1
Host: localhost
User-Agent: curl/7.29.0
Accept: */*
Accept-Encoding: gzip
X-Forwarded-For: 172.17.0.1
X-Forwarded-Host: localhost
X-Forwarded-Port: 80
X-Forwarded-Prefix: /whoami
X-Forwarded-Proto: http
X-Forwarded-Server: 23d2da1e2c95
X-Real-Ip: 172.17.0.1
```

ルーティングの設定はコンテナのラベルだけでなく TOML ファイルを用いた静的な設定や REST API を使用した設定変更なども可能です。

## まとめ

ナビタイムでは Traefik をコンテナで動くサーバのリバースプロキシとして試験的に使用しています。まだ機能面では知らない部分も多いですが、バックエンドサーバへのルーティングはかなり楽になりますのでぜひご活用下さい。

## 参考

- [Traefik] - 公式

[Traefik]: https://docs.traefik.io/
メソッドの引数にアスタリスク


# メソッドの引数にアスタリスク
railsのTRAILBLAZERで実装されたAPIを写経してたところ、メソッドの引数のアスタリスク２つ\*\*のみの表記の意味がずっとわからなかったのですが、やっと解決。

```ruby
def hoge(options, model:, **)
end
```

## 可変長引数とオプション引数
そもそもの引数の話として、アスタリスクがついた引数を、アスタリスク1つなら**可変長引数**、アスタリスク2つなら**オプション引数**という。
ここからわかってなかった。

<a href="https://qiita.com/rtoya/items/33617078501776fdcad7">Rubyの引数いろいろ - Qiita</a>
<a href="https://paranishian.hateblo.jp/entry/2015/09/04/173257">メソッドの引数にアスタリスクをつけると形式を指定できる - paranitips</a>



### 可変長引数
\*をつければ引数を、**配列**に指定できる。
メソッドには一つの引数の定義で、複数の引数を設定でき、配列として結果を返す。
これを**可変長引数**という。

例えば、

```ruby
#複数の引数を配列にする
def array(*a)
  pp a
end
```
実行すると

```ruby
> array(1,2)
=> [1, 2] 
> array(1, 2, 3)
=> [1, 2, 3]
```

メソッドの定義は一つの引数でも、実行時、複数の引数を設定して配列として結果を返している。

### オプション引数

\*\*をつければ引数を、ハッシュに指定できる。
メソッドには一つの引数の定義で、複数の引数を設定でき、ハッシュとして結果を返す。
これを**オプション引数**という。

例えば、

```ruby
#複数の引数をハッシュにする
def array(**a)
  pp a
end
```
実行すると

```ruby
> array(b: 1, c: 2)
=> {:b=>1, :c=>2} 
> array(b: 1, c: 2, d: 3)
=> {:b=>1, :c=>2, :d=>3}
```


メソッドの定義は一つの引数でも、実行時、複数の引数を設定してハッシュとして結果を返している。

## 【本題】 アスタリスクのみ引数に指定

アスタリスクを引数の前につけると、配列とハッシュ展開が簡単にできるとわかった。
じゃあ本題のアスタリスクのみ引数に指定された下記の書き方の意味は？？

```ruby
def hoge(options, model:, **)
end
```

調べた結果、

<a href="https://qiita.com/TakeshiFukushima/items/f2c338cd70d56fd1d800#%E5%8F%AF%E5%A4%89%E9%95%B7%E5%BC%95%E6%95%B0">可変長引数 - Ruby メソッドの引数まとめ - Qiita</a>


>\*と記述することで受け取った引数を無視するようにも使用できます。

例えば、

```ruby:
def array(a, *)
  p "#{a} Hello!!!"
end
```

実行すると

```ruby

> arry('Hi!', 'Hey!', 'Yeah!') 
=> "Hi! Hello!!!"
```


結果、```options```というハッシュのキーである```model:```の値を引数とし、アスタリスク２つを記載することでで、メソッド内で使わない値（過剰引数）を無視してるよう。

```ruby
def hoge(options, model:, **)
end
```
プログラミングできるようになると何がいいのか？

[ノンプロ研 Advent Calendar 2018 \- Adventar](https://adventar.org/calendars/3554) の12/11の記事です。


# 背景

私はエンジニアなのでプログラムをすることが当たり前になってますし、昨今の「プログラミング教育」の流れにもあるように「プログラミングできるようになろうよ」いや、もっと言うと「プログラミングできないとやばいよ」という時流があります。

そんな中、社内のノンプログラマに向けて Google Apps Script(GAS)レクチャー を行っています。ゴールとしては「1秒でもいいので自分の業務・作業を自動化できるようになること」です。

- 2017年末から構想、準備開始
- 2018年1月、社内にアナウンスして希望者の確認
- 2018年3月からトライアルレクチャ
- 2018年5月に第一期開始。(2時間×6回, あるいは休日に8時間+4時間)
- 2018年10月に第二期開始。

の状態です。一期、二期あわせて、のべ30人くらいの受講者がいます。
卒業課題として「今現在自分がやっている業務を自動化するGASを作成する」を与え、私の判断で合否を決めています。現時点で卒業生が7人います。

# プログラミングできるようになると何がいいのか？

本題です。

上記のレクチャ受講者を募集するにあたっての動機づけとして、**プログラミングできるようになると何がいいのか？** を改めて考えてみました。

募集時に私が書いたことはこんな内容です。

- 自分で自分の業務を効率化できます。
- プログラムの面白さがわかります。意図通りに動いたときに感動します。
- プログラムの難しさがわかります。意図通りに動かないときにイラっとします。(イラッとしますが、原因はほとんどの場合、自分にあります)
- プログラムに処理をさせるためには、こういう考え方、データの扱い方をしたほうがいいのか、みたいのがわかります。
- なんでエンジニアはこんな細かいことが気になるんだよ、という理由がわかります。
- 職務経歴書に「GASによる業務効率化」って書けます。
- IT企業に勤めてる、って気になれます。


なかなかに面白いテーマかと思ったので、他の人にも聞いてみました。
下記のようなご意見をいただくことができました。

- ロジカルシンキングが身につきます。
- 「しんどい」と思っていた業務も「意外としんどくない」と思えます。
- 「効率化」「自動化」という言葉を聞くと少しワクワクするようになります。
- 生産的な時間の使い方ができるようになります。
- 感謝される喜びを感じることができます。
- 作りたいものを自分で作れるようになります。
- こどもの算数・数学宿題解らない〜に介入できるようになる。(特にビジュアル化できるプログラミング... JSは良いぞ！)
- 日常にある問題に対して問題の細分化や場合分けなど解決方法をステップ建てして考えられるようになる。(顧客の要望も要は問題解決なので、その要望が具体的に何なのかをヒアリングする項目づくりにも役立つと思うﾖ)
- プログラム言語の使い方より、プログラムを作る行為を抽象化した考え方が解ると色々と日常生活も業務もハックできるんじゃないかと思います。
- こんなことがしたい、という需要に対して、こうすれば出来そうだという直感力が養えます。

お、おう。なんとも貴重なご意見が。

これまでこういうことを言語化する機会がなかったので、こうやって見てみるといろんな「いいこと」がありそうだなと認識できました。


# まとめ

プログラミングを身につけようと思った時のハードルは10年前？と比べて大きく下がってきています。PCとネット環境があれば無料で学べるツールはあふれています。

もしあなたがノンプログラマなのであれば、プログラミングを身につけることで自分の将来が大きく変わるかもしれません。
もしあなたがプログラマなのであれば、身の回りのノンプログラマにプログラムを教えることで自分の思考の整理にもなります。

この年末年始にチャレンジしてみてはいかがでしょうか。

...ここまで書いて、そもそもノンプログラマはQiitaなんか見ないのでは？って思った。
これを見た皆さんがこの記事をシェアすることでノンプログラマに届けてもらうことを期待しますｗ
AWS認定 SysOps Administrator Associate 受験体験談

# はじめに
2018年11月に SysOps Administrator Associate （新バージョン）を受験し、合格しました。このエントリーはその勉強方法を晒す受験体験談です。今後、同試験を受けられる方のために、『実際、こんなこと勉強したら合格しましたよ』というのを残しておきたいと思います。

このエントリーは以下のエントリーの続編にあたります。
[AWS認定 Solution Architect Associate 受験体験談](https://qiita.com/kentarok/items/491b312ff1fa1fbe77e9)

# 受験時の私の知識レベル
前編のエントリーに記載の通りです。加えて、2018年6月に AWS Solution Architect Associate(SAA)を取得しました。

# 学習開始前

SAA受験のときと同じく 受験要項とサンプル問題を解きました。「SAA受かってるからこっちも取れるだろう」「前提研修も参加させてもらえるので（後述）、きっと受かるよねー」と若干なめた部分があって、模擬試験（有料）は受験しませんでした。受験しておけばよかったです。

AWS 認定 SysOps アドミニストレーター – アソシエイト
https://aws.amazon.com/jp/certification/certified-sysops-admin-associate/

この要綱によると出題比率は以下のようです。旧試験に比べると出題分野が細分化されて、幅広い知識と経験が求められているように見えます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/54436/fd3f98bf-7c11-0ef3-8f55-0f4b7a61db3f.png)



またAWS SSAのときにも読んだ以下の資料も読んでいます。

AWS Black Belt Online Seminar 2017 AWS 認定試験取得に向けて
https://www.slideshare.net/AmazonWebServicesJapan/aws-black-belt-online-seminar-2017-aws

受験体験談は、AWS SSAのときに比べあまり重視しませんでした。このあたりが下調べ弱かったなー、と今は反省しています。やはり出題分野や傾向をちゃんと調べないといけませんね。

# 学習開始

基礎的な知識はAWS SSA試験受験の際に身についているはず、という自負があったので Black Beltの資料を片っ端から読み漁るアプローチを取りました。読んだ分野も [AWS認定 Solution Architect Associate 受験体験談](https://qiita.com/kentarok/items/491b312ff1fa1fbe77e9)に記載のものとほぼ相違ありません。おさらい的な。

AWS クラウドサービス活用資料集（通称 黒帯）
https://aws.amazon.com/jp/aws-jp-introduction/

上記に加えて、機会をいただけたので、AWS公式の前提集合研修３日間に参加しました。

Systems Operations on AWS
https://aws.amazon.com/jp/training/course-descriptions/sysops/

こちらは、ハンズオン多め、ディスカッションなしの オペレーションに特化したもので、知識の復習には十分に活用できる研修でした。


# 受験

試験は、130分 / 65問 の内容で
・まず怪しい問題にマークをつけつつ、一回全て解く
・怪しい問題を回答
・全65問を最初からチェック
をして40分ぐらい時間が余りました。

最初10問ぐらいあまり勉強していなかった分野からの出題が続き、少し青ざめました。。


# 受験結果

受験結果は ` 受験者スコア 755/1000` で合格でした。七割で合格だそうなので、かなりギリギリでした。

`分野 2: 高可用性` `分野 4: ストレージおよびデータの管理` `分野 6: ネットワーク` で再学習の必要ありマークがついていました。割と手応えのあった分野に限って再学習をせよ、と言われて、反省しております。

また、以下の分野からの出題が結構目立ったので、書き残しておきます。

AWS Organizations
https://www.slideshare.net/AmazonWebServicesJapan/20180214-aws-blackbeltorganizations

AWS Trusted Advisor
https://www.slideshare.net/AmazonWebServicesJapan/20180711-aws-black-belt-online-seminar-aws-trusted-advisor

Cost Explorer
https://www.slideshare.net/AmazonWebServicesJapan/cost-explorer

コストの観点から見るアカウント管理
https://www.slideshare.net/AmazonWebServicesJapan/aws-black-belt-online-seminar

Amazon QuickSight
https://www.slideshare.net/AmazonWebServicesJapan/20180801-aws-black-belt-online-seminar-amazon-quicksight


# 振り返って

点数は満足いくものではありませんでしたが、ひとまず認定試験には合格しました。初級のAssociate資格ではありますが、二冠王にはなれたので、今後、実績とより広い分野での認定取得に向けて頑張っていきたいと思います。
C++ Builder XE4, 10.2 Tokyo > TControl.Parent プロパティを指定したコンポーネント > Parentがdeleteされた時に自身もdeleteされる | TWinControl.Destroyでの実装

```txt:動作環境
C++ Builder XE4
Rad Studio 10.2 Tokyo
```

### 疑問点

```cpp
void __fastcall TForm1::Button1Click(TObject *Sender)
{
    TPanel *pnlptr = new TPanel(/*AOwner=*/this);
    TLabel *lblptr = new TLabel(/*AOwner=*/this);
    lblptr->Parent = pnlptr;

    // some processing

    //delete lblptr;
    delete pnlptr;
}
```

上記の場合、lblptrは解放されるのかどうか?

### 関連

C++ Builder version 2009の情報

- [TControl.Parent Property](http://docs.embarcadero.com/products/rad_studio/delphiAndcpp2009/HelpUpdate2/EN/html/delphivclwin32/Controls_TControl_Parent.html)

> Note: The Parent property declared in TControl is similar to the Owner property declared in TComponent, in that the Parent of a control frees the control just as the Owner of a component frees that Component. 

### StackOverflowへの質問

- [C++ Builder > TControl.Parent property > does the parent free the children?](https://stackoverflow.com/questions/53715861/c-builder-tcontrol-parent-property-does-the-parent-free-the-children/53716059#53716059)

解放される
という回答を得た。

I appreciate it, Remy Lebeau.

### 調べ方 (How to search)

今回はStackOverflowで質問をした。
その回答ではTWinControl.Destroyのソースとともに説明を受けた。

自分で調べる時はTWinControl.Destroyのコードを見ればいいという知見を得た。
スタイルシートを作らずhtmlにclassの作成　メモ失礼します。

を結構忘れるので表記方法をペタリ失礼します。

http://cc.musabi.ac.jp/kenkyu/cl1/html5/css_apply.html

•HTMLファイルとは別にCSSファイルをつくり、HTML文書内にそのファイルをCSSとして利用することを記す（外部スタイルシート）。
•HTML文書のhead要素内にstyle要素を設け、HTML文書内にCSSを埋め込む（内部スタイルシート）。
•HTMLの各要素にstyle属性を用いて直接記入する。

ということで
ヘッダ内に

```html
<style type="text/css">
 .setumei{
	font-size: 0.9em;
	margin-left:30px;
 }
 </style>
```
とすればhtmlで

```html
<div class="setumei">
```
で出来ます。
HTMLと戦うライターが作業効率をアップするためにしていること

こんにちは。<br/>リブセンスで転職ノウハウメディアを担当してしているライターの@1kw-ayaと申します。<br/>
普段は転職に関するお役立ち記事を書いており、技術にはほとんど触れていないのですが、せっかくのお誘いということで少し書かせていただきます。<br/>
さて、タイトルの通り私の職業はライター（まだひよっこ）ですが、毎日のようにHTMLと戦っています。<br/>最近はwebメディアが日々生まれていて、ライターさんも増えているはずです。<br/>その中には、私のように慣れないHTMLで四苦八苦している方もいるのではないでしょうか？<br/>
今日はその戦いを振り返りながら、<b>専門的な知識のない私がHTMLで入稿する際に効率よく作業をするための方法</b>などをご紹介します。

#HTMLと戦うことになった経緯
ずっとライターになりたかった私ですが、本格的に文章を書くようになったのは今のお仕事を始めてからでした。<br/>
実は前の会社でもなんとなく似たようなことはしていて、WordPressを使った入稿も行っていたので、「ボタンをポチポチして文字を入力したらOK」という入稿を想定していたのですが…。<br/>その期待が打ち砕かれたのは2年ほど前になります。<br/>
理由は<b>担当メディアで使っているCMSの仕様</b>です。<br/>ライターには優しくないですが、その他の面を考慮した結果とのこと。（CMSの選び方については[こちらの記事](https://qiita.com/karaagedaisuki/items/52f707bffbaf580b6cdb)こちらの記事をご覧ください。）<br/>
そして、今にいたります。<br/>

#ライターにとって機能的なテキストエディタを使う
戦いといっても、実はそんなに難しいことはしていません。<br/>
用意されたパーツのHTMLを使って、自分の書いた文章の見た目を整えている（入稿作業）だけです。<br/>
しかし、初心者にとってはこの作業も簡単ではありません。<br/>
「正しく表示をさせたい。でも知識が少ない…」<br/>悩めるライターさんが、入稿をする際に欠かせないのが、<b>テキストエディタ</b>です。<br/>
とはいえ、「テキストエディタと言われても何を使えば…」と思いますよね。<br/>エンジニアさんであれば、ある程度機能が充実したものを使うべきなのでしょうが、ライターの場合はそこまで機能が必要というわけではありません。<br/>
入稿作業を2年間続けてきた私が、<b>最低限これだけは必要だと思う機能</b>は以下の5つです。
<ul>
<li>日本語に対応している
<li>タグが色分けされる
<li>対応するタグがわかりやすく表示される
<li>自動インデントができる
<li>置換できる
</ul>
ちなみに私が使っているのは[atom](https://atom.io/)さん。<br/>
最初は黒い画面に白い文字・色とりどりのタグは未知の世界でしたが、今ではこの子がいないと仕事になりません。<br/>
「絶対！」というわけではありませんが、atomはさきほどの条件を満たしていて、２年間使って不便に感じたことはほとんど無いので、私としてはオススメかなと思います。<br>
そして、atomさんには<b>atom-html-preview</b>という便利なパッケージもあったりします。
しっかり設定すれば、ブラウザを使わなくてもプレビューを見ることができるこの機能。<br/>
私は使い方を覚えることをサボって使わなくなってしまいましたが、いちいちCMSに流し込んでプレビューするよりもatom-html-previewのほうが効率がいい気がします。<br>
ちなみに、デフォルトは英語表記なので、<b>Japanese-menu</b>というパッケージを使って日本語化をしておくことをお忘れなく。

#パーツは一つにまとめておく
私が担当しているメディアには独自パーツがたくさんあります。<br/>
自分でほしいと言ったのに、覚えきれないほど多くなってしまったパーツたちを項目ごとにまとめた資料は、入稿作業には欠かせない存在です。<br/>
見た目のキャプチャとHTMLを貼って、注意点も一緒に入れておく。<br/>
最初まとめるのが面倒ですが、後々の作業が楽なので、自分のためにも作っておくことをオススメします。<br/>
このとりあえずこの資料があれば、全くわからない人でも次の日には簡単な入稿作業はできるはずです。

#教える立場になって
嬉しいことに、ライター1人から始まった編集部にも、新しい仲間が増えています！<br/>
昔の自分を思い出しながら、HTMLの入稿作業を教えていますが、人に教えているうちに、HTML初心者のライターさんたちが同じ部分で引っかかっていることに気が付きました。<br/>

<b>このタグの中にこれが入っているよ！みたいな構造的な部分</b>

例えば、sectionタグの場合、

```html:説明書の表記
<section>
 <h2>H２見出し</h2>
 <p>えいちつー</p>
 <section>
  <h3>H３見出し</h3> 
  <p>えいちすりー</p>
 </section>
</section>
```

と説明書に記載してあっても、これを見てもらった上で実際に書いてもらうと

```haml:入稿されたもの
<section>
 <h2>H２見出し</h2>
 <p>えいちつー</p>
</section>
<section>
 <h3>H３見出し</h3> 
 <p>えいちすりー</p>
</section>
```

となっていたり、そもそもh2のセクションしかなかったり。<br/>
慣れてくると<b>「このタグの中にこれが入る」</b>というような構造や、<b>「そもそもタグは基本的に対になっている」</b>ことは説明書に簡単に書いておけば大丈夫だろうと思いがちですが、初めてHTMLに触った頃はそれどころではなかったと教えているうちに思い出しました。<br/>
「1からHTMLをを書くわけではないから、基本の考え方を教えなくてもいい」というわけではなく、<b>基本を理解してもらった方が、初心者ライターさんにとっても覚えやすく、教える側にとってもスムーズ</b>だと感じました。<br/>
そして、それ以外はパーツをまとめた資料を渡せば、皆さんほぼ直すところはない。<br/>
つまり、<b>基礎の基礎さえわかれば、HTMLの入稿作業はそんなに難しくない</b>のです。<br/>

#基本さえおさえれば、HTMLと仲良く過ごせる
結果として、基本の考え方と最低限の機能さえあれば、HTMLを使った入稿は恐れるほどのものでは無いのです。<br/>

入稿で使うだけであれば、過度に理解しようとせず、<b>どうしたら楽をできるか、早くできるかを考えればOK</b>だと思います。
ライターさんの中には苦手意識がある方もいると思いますが、あまり気をわずにチャレンジしてみてください。<br/>

そして、運営側で教えたり指示する立場の方は、ライターさんに負担がかかりすぎないように、<b>環境をしっかりと整えておく</b>のが、自分のためにもなるはずです。
Amazon SageMaker RLについて調べてみた

この記事は株式会社ナレッジコミュニケーションが運営する [Amazon AI by ナレコム Advent Calendar 2018](https://qiita.com/advent-calendar/2018/knowcom-amazonai) の11日目の記事になります。


Amazon SageMakerはAWSが提供するMachine Learning モデルの構築、トレーニング、デプロイをカバーする完全マネージド型の機械学習サービスです。
今回はそのSageMakerの新しい機能、Amazon SageMaker RLについて紹介します。
Amazon SageMaker RLはReinforcement Learningの略称で、強化学習のことを指します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/323405/8dd0675e-791e-1dca-c041-34d96a789dce.png)



# 強化学習とは
機械学習は大きく「教師あり学習」「教師なし学習」と今回紹介する「強化学習」の3つに分類することができます。

「教師あり学習」は例えば天気予報で明日の天気はどうなるか？などの元になる情報入力から「分類」や「予測」をする方法です。
例:回帰分析

「教師なし学習」は文字通り、正解となる結果が無いものを指します。
例えば過去の購入履歴から購入者のグルーピングをするといった際に購入履歴を情報入力し、出力はグルーピングになりますが正解があるわけでないので近しい購入者をグルーピングしただけとなります。
例:クラスタリング

「強化学習」は上述の2つとは異なり、行動した結果を元に学習するという考え方になります。
明確なデータを元にした学習ではなく、与えられた環境を観測し行動しその結果について良し悪しを判断します。
その良し悪しから価値が最大化する行動を選択、評価を更新していきます。
最近では将棋や囲碁の世界で有名棋士対AIなどが行われていますがここで使われている機械学習も強化学習です。

強化学習については下記のサイトがわかりやすかったです。
【参考URL】
[強化学習とは？ALPHAGOでも使われている強化学習を丁寧に解説]
(https://udemy.benesse.co.jp/ai/reinforcement-learning.html)

# Amazon SageMaker RLについて
Amazon SageMaker RLはAmazon SageMaker の同様に、Jupyter notebook のコレクションが提供されていて、Github で入手可能です。
簡単な examplesから、より高度なロボティクス、金融など様々な業種のものまで幅広く提供されているのも特徴です。

また強化学習ではシミュレーションはCPU、学習は GPU という使われ方をすることが多いですが、Amazon SageMaker RLでは状況に合わせて柔軟にスケールできるのも大きなメリットです。

# Amazon SageMaker RLはAWSのサービスとも連携
Amazon SageMaker RLはAWS RoboMaker(AWSが提供するAIロボットカー「AWS DeepRacer」などの知能ロボットアプリケーションを簡単に開発、テスト、デプロイできるサービス)やAmazon Sumerian(バーチャルリアリティ (VR)、拡張現実 (AR)、および 3D アプリケーションをすばやく開発できるAWSのサービス)シミュレータとも連携します。

【参考URL】
[Amazon SageMaker RL – Amazon SageMakerを使ったマネージドな強化学習](https://aws.amazon.com/jp/blogs/news/amazon-sagemaker-rl-managed-reinforcement-learning-with-amazon-sagemaker/)

# さいごに
Amazon SageMaker RLは東京リージョンでもすぐに利用可能です。
またAmazon SageMakerは今回紹介した強化学習以外にも様々なアップデートがされました。
ぜひこれを機会に機会学習を触ってみてください！
About Rescue Robots in Japan

#さくらサイエンス　日本の防災技術
さくらサイエンスにて来日し，大阪府立大学工業高等専門学校に来校されるダルマプルサダ大学の学生さんに向けた講演会
- 2018.12.11 10:30~12:00
- 大阪府立大学工業高等専門学校　教養棟　選択教室Ⅲ

#日本のレスキューロボットについて
- 目次
    - 自己紹介
    - 日本の震災について
    - 阪神淡路大震災について
    - 大都市大震災軽減化特別プロジェクト
    - 東日本大震災について
    - 福島第一原発に対する日本の研究
    - 第１回廃炉創造ロボコン
    - [レスキューロボットコンテスト](https://www.rescue-robot-contest.org/19th-contest/)
    - 草刈りロボットの実演

#参考リンク
##ロボット
- [脱進機の仕組み](http://www.tokeizanmai.com/escapement.html)
- 
##地震
- [地震の年表（日本）](https://ja.wikipedia.org/wiki/地震の年表_(日本))
- [規模が大きい地震](https://matome.naver.jp/odai/2136015832174552001?&page=1)
- [地震分布図:1900/1-2015/4](https://headlines.yahoo.co.jp/hl?a=20150523-00000005-wordleaf-sctch.view-000)
- [日本地震学会](http://www.zisin.jp/publications/document05_07.html)
#参考動画
- [２１世紀の地震：動画](https://www.youtube.com/watch?v=W0_Z9Wga5A8)
- [竸基弘賞](https://www.youtube.com/watch?v=TuUxqW2MDtg&list=PLny_S6A1g6beHKPEOTPN-8yxIrbrTnvLU)
- [【公式】マジンガーZ 第１話](https://www.youtube.com/watch?v=opt3S11yaQg)
- [マジンガーシリーズ](https://middle-edge.jp/articles/I0002807)
- [大大特後の研究総括：田所諭先生](https://www.youtube.com/watch?v=nv4IuhaDH9U)
-
Highchartsでzoom後の軸の値を取得する

#はじめに

Highchartsは商用利用では有償になりますが、様々なパターンがあらかじめ用意されており、
簡単にグラフを描くことが出来ます。

今回、Highchartsの機能であるZoomを使った際に、Zoom後のX軸の値を取得したかったのですが、
ちょっと手間取ってしまったので参考までに記載しておきます。
（もっと簡単な取り方があるような気がしますが...）

##LINE(線)グラフを描く

下記のような記述で簡単にグラフが描画できます。

```javascript
<html>
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="graph"></div>

<script>
Highcharts.chart('graph', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'TEST LINE'
    },
    xAxis: {
        categories: ['201801', '201802', '201803', '201804', '201805', '201806', '201807', '201808', '201809', '201810']
    },
    plotOptions: {
        line: {
            dataLabels: {
                enabled: true
            }
        }
    },
    series: [{
        name: 'TEST1',
        data: [2000,2040,1910,2030,2070,2230,2410,2070,1980,1910]
    }, {
        name: 'TEST2',
        data: [2860,3110,2770,1870,1730,1440,1750,1910,2140,2560]
    }]
});
</script>

</body>
</html>
```

![1.png](https://qiita-image-store.s3.amazonaws.com/0/270976/5124b413-a9ac-bb7f-c359-8cf0803db538.png)


##Zoomの設定

下記の1行追記することでZoomが有効になります。
(今回はx軸を対象)

```javascript
<script>
Highcharts.chart('graph', {
    chart: {
        type: 'line',
        zoomType: 'x'  // ←　ココ
    },
    title: {
        text: 'TEST LINE'
    },
    xAxis: {
```

![2.png](https://qiita-image-store.s3.amazonaws.com/0/270976/1ce4506c-9216-ef7f-bacb-70854822499b.png)

※ 上記例は範囲を選択すると 201805 - 201810の区間にズームされる
![3.png](https://qiita-image-store.s3.amazonaws.com/0/270976/8e8c8ac2-4633-eb95-f6e9-1f1ca4a1bae1.png)

##eventsの設定
Zoom後のX軸の値を取得するためtickPositionsを取得しticksのlabel.textStrの値を
下記の2イベントで取得して見てみる。[chart.eventsマニュアル](https://api.highcharts.com/highcharts/chart.events)

- events.selectionの場合（初めはこれで取れると思ってた...）

```javascript
Highcharts.chart('graph', {
    chart: {
        type: 'line',
        zoomType: 'x',
        events: {
            selection: function(e){
                console.log(e);
                var aTicksP = e.target.xAxis[0].tickPositions;
                var aTicksV = e.target.xAxis[0].ticks;
                for(let i in aTicksP) {
                  console.log(aTicksV[aTicksP[i]].label.textStr);
                }
            }
        }
    },
    title: {
```

結果：
選択範囲外のX軸値もすべて返ってきてしまったのでNG
![4.png](https://qiita-image-store.s3.amazonaws.com/0/270976/12eb4d93-0bec-8ffe-9110-8357a49111e4.png)

- events.redrawの場合

```javascript
Highcharts.chart('graph', {
    chart: {
        type: 'line',
        zoomType: 'x',
        events: {
            redraw: function(e){
                console.log(e);
                var aTicksP = e.target.xAxis[0].tickPositions;
                var aTicksV = e.target.xAxis[0].ticks;
                for(let i in aTicksP) {
                  console.log(aTicksV[aTicksP[i]].label.textStr);
                }
            }
        }
    },
    title: {
```

結果：
範囲内の値が返ってきたのでひとまずよしっ！
![5.png](https://qiita-image-store.s3.amazonaws.com/0/270976/1597bb07-899a-ad50-4567-aa667fc1e2c8.png)

#まとめ
selectionイベントでは、アクション時点の値が取れるみたいですね。
また、Highchartsでグラフの範囲選択が出来るのはいろいろ使い道がありそうです。
はじめてPostCSSに触れてみた

はじめてPostCSSを
使ってみたのでまとめてみました。

#PostCSSとは
Node.js制の、
**CSSツールを作るためのフレームワーク**です。

###PostCSSのしくみ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320060/90f61af3-b04c-93bd-9ae5-4acb985da1de.png)

PostCSS自体はただのパーサーであり、
CSSを受け取り、パースしてARTを生成するという役割を果たしています。


#PostCSSを使うメリット
###①一連のCSSビルドフローを簡潔化
ビルドして～してを、
PostCSSのエコシステムで全て解決できます。

###②PostCSSプラグインを用いてカスタムできる
[Custom Syntaxes](https://github.com/postcss/postcss/blob/master/docs/syntax.md)という機能を用いることで、
自分の欲しい機能だけカスタマイズすることができます。
このカスタマイズこそがPostCSSの最大の特徴であると
私自身は感じています。
下記でプラグインごとの書き方を少しご紹介します:relaxed:



#PostCSSの主な書き方
###環境
ビルドツールはgulpを使用しています。
Node.js v8.11.2
gulp v3.9.1

###①変数として扱う
[postcss-custom-properties](https://github.com/postcss/postcss-custom-properties)をインストールすると、
Sass記法のように変数定義ができるようになります。
下記の通り、`:root`内で定義可能です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320060/37137fee-f0f2-0865-4014-625a410400f4.png)

###②ネストでCSSを記述する
[postcss-nested](https://github.com/postcss/postcss-nested)をインストールすると、
ネストでの記述が可能になります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320060/5e9e00f0-3dc6-0c96-dcf1-c055ad0cab1f.png)

###③CSSファイルを複数に分割
[postcss-import](https://github.com/postcss/postcss-import)をインストールすると、
冗長なCSSファイルを複数に分割し
それぞれ読み込むことができるようになります。

下記では、color-cssとbtn-cssというファイルを
style.cssでimportしています。

`style.css`
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320060/e710b44e-eab5-8ddd-b071-a21b5a341e32.png)


#まとめ
Sassを普段から使用しているので
非常にとっつきやすかったです☺

プラグインの選定は下記からもできそうです。
自分にあったプラグイン選定にお役立てください:sunny:

- PostCSS.parts：https://www.postcss.parts/
- PostCSS Plugins：https://github.com/postcss/postcss/blob/master/docs/plugins.md
Kotlin 1.3のCoroutineの使い方③（ジョブを待つ）

# 検証環境
この記事の内容は、以下の環境で検証しました。

* Intellij IDEA ULTIMATE 2018.2
* Kotlin 1.3.0
* Gradle Projectで作成
* GradleファイルはKotlinで記述（KotlinでDSL）

# 準備
詳細は下記の準備を参照してください。
https://qiita.com/naoi/items/8abf2cddfc2cb3802daa

# Waiting for a job
[前回](https://qiita.com/naoi/items/28a21c2fbf16eedbbf87)に引き続き、[公式サイト](http://kotlinlang.org/docs/reference/coroutines/basics.html#waiting-for-a-job)を読み解いていきます。

タイトルの意味的には、ジョブを待つでしょうか。
コルーチンの処理を待つことが今回の主題になりそうです。

それでは、公式サイトの説明を見てみます。

>Delaying for a time while another coroutine is working is not a good approach. 
>Let's explicitly wait (in a non-blocking way) until the background Job that we have launched is complete:

意訳込みですが、以下のような意味です。

> 他のコルーチンの処理を待つためにdelay関数を呼び出すのはよくありません。
> 明示的に処理（ジョブ：Job）が完了するのを待ちましょう。もちろん待つ処理はnon-blockingで実行しなければなりません。

サンプルコードを見てみます。

```kotlin
import kotlinx.coroutines.*

fun main() = runBlocking {

    val job = GlobalScope.launch {
        delay(1000L)
        println("World!")
    }

    println("Hello,")
    job.join()

}
```

これまでとの違いは、GlobalScope.launch関数の戻り値を受け取ってます。
調べて見たら、Job型のオブジェクトでした。
Jobを詳しく調べてみると、以下のような機能や特徴を持っているみたいです。

* コルーチンのそのものを表現したもの
* このオブジェクトは親を持つ
* 処理をキャンセルできる
* 親のJobがキャンセルされると子もキャンセルされる
* 子がいる場合、子の処理がおわるまで、待ち合わせる

その他にもいろいろ記載されていましたが、このあたりで抑えておきます。

実行してみると下記のようになります。

```kotlin
Hello,
World!
```

うん。今までと変化がありません。
ただ、下図のような動きをしているそうです。

![Job.join.png](https://qiita-image-store.s3.amazonaws.com/0/99960/614b9fe5-a032-b613-6c7d-224b3de6a449.png)


せっかくなので、キャンセルを試してみます。
下記のようなコードを記述してみました。

```kotlin
fun main() = runBlocking {

    val job = GlobalScope.launch {

        delay(3000)
        print("い")
    }

    val job2 = GlobalScope.launch {

        delay(2000)
        print("ろ")
    }

    GlobalScope.launch {

        delay(1000)
        print("は")
    }

    job2.cancel()
    job.join()

}
```

「ろ」の出力をキャンセルしてみました。
実行結果は以下のようになりました。

```text
はい
```
たしかに、「ろ」のジョブがキャンセルされています。


このブロック最後の説明を読んでみましょう

> Now the result is still the same, but the code of the main coroutine is not tied to the duration of the background job in any way. Much better.

意訳（以下略）

> これまでと同様に同じ結果となるけど、このコードはGlobal.launch関数処理とメインのコルーチンが直接紐付いているわけではありません。

動作や説明を読むと納得できる部分は多い気がします。

# まとめ
このブロックで理解できたことは以下のことだと思います。

* Global.launchはJobのオブジェクトを返す
* joinメソッドを呼び出すと、ジョブが完了するまで待つ
* cancelメソッドでJob自体をキャンセルできる
AWS Elastic Beanstalk で がんばらない DevOps を実現する

# この記事で伝えたいこと
- Beanstalk は便利！
- ワーカー環境最高！

# Beanstalkの特徴
- ウェブアプリケーションの動作環境をまるっと構築するサービス
- PaaSではないが、AWSの中でPaaSに最も近い
- ロードバランサやEC2を一発で構築してくれる
- 各種言語に対応したテンプレート環境がある
- クロンとジョブキューを提供するワーカー環境がある
- 全てのリソースは通常のAWSのリソースとして作成され、自由に設定変更できる

# Beanstalk採用の背景
- 個人環境やdev環境などをサクサク作りたい
-インフラ担当無しでやりたかった
- 以前、terraformの運用が大変だった(冪等性の確保が大変だった)
- 当初はGCPのGAE(Google App Engine)も検討していた
  - 既存AWSのDBへの接続が必要なのでAWSにした
- 担当者(私)がAWSにそこまで詳しくはない
- フルマネージドなキューワーカーがほしい
- クロンやワーカー環境は自作すると容易にスケーラビリティが無くなりSPOFにもなる

# どんな風に使っているか
- 言語： PHP
- 環境: 個人、dev、RC(リリース候補)、本番

# コンソール画面例 01
![image.png](https://qiita-image-store.s3.amazonaws.com/0/15497/432e4dd7-89aa-393c-9345-cb5ee20a77d7.png)

# コンソール画面例 02
![image.png](https://qiita-image-store.s3.amazonaws.com/0/15497/0c58ef95-d0cd-4dd7-3451-350e33af0c7e.png)

# コンソール画面例 設定
![image.png](https://qiita-image-store.s3.amazonaws.com/0/15497/ae00fe85-8f0a-8d48-8257-223868de8b5c.png)

# コンソール画面例 モニタリング
![image.png](https://qiita-image-store.s3.amazonaws.com/0/15497/8a0fc968-4a02-6e20-079f-bfdf482e63f9.png)

# 設定ファイル例 01
![image.png](https://qiita-image-store.s3.amazonaws.com/0/15497/2d07a7ae-21e3-9069-03c4-f30d826c4d72.png)

# 設定ファイル例 02
![image.png](https://qiita-image-store.s3.amazonaws.com/0/15497/683c772d-d4b5-6038-35c4-6615f29aeb17.png)

# 設定ファイル例 03
![image.png](https://qiita-image-store.s3.amazonaws.com/0/15497/1203623a-0190-f501-f5d7-2e4e27919464.png)

# デプロイの様子
![image.png](https://qiita-image-store.s3.amazonaws.com/0/15497/e76cdda4-8ae2-9e90-2403-1fcb4f773ecf.png)

# どう便利だったか
- 環境をさくっと作ってさくっと潰せる
- デプロイがコマンド1発
- ワーカー環境が超おすすめ

# ワーカー環境とは
- 環境にはアプリケーション環境とワーカー環境の2タイプがある
- ワーカー環境でできること
  - クロンの実行
  - キューワーカーの実行

# ワーカー環境はどう動くか
- クロンが複数インスタンスで単一実行される
  - 複数インスタンスを立てて同じクロンを設定しても、どれか一台を選んで実行してくれる
- キューも処理できる
  - SQSにキューを投げるだけ。分散も自動
- HTTPリクエストとしてアプリケーションは受け取る
  - 内部ではsqsdというプロセスがキューを監視している
- 処理の勢いやリトライなど基本的なことはBeanstalk側で設定可能

# ハマったポイント
- 環境変数の設定ポイントが3種類ある
  - コンソール画面、API、ソースコード(設定ファイル)
- 設定値をソースコードに含める場合、アンドキュメントな仕様があった
  - 直下ディレクトリ以外のサブディレクトリのファイルも読み込まれていた
- AWSサポートに確認してもらった。サポートは優秀

# 気になるポイント
- 言対応語、プラットフォーム
  - PHP, Python, Ruby, Node.js, Java, Golang, .NET, etc…
  - Docker
- ロードバランサ、ドメイン、SSL
  - CLBとALBの両方が使える
  - 無しにもできる(EC2直接続になる。開発用など)
  - ロードバランサがあると独自ドメインとSSLが使える
  - AWSのサブドメインも提供される
- SSH
  - EC2インスタンスに普通にSSHログインできる
- アクセスコントロール
  - VPC、ロードバランサ、EC2などにセキュリティグループやACLをBeanstalk外から設定する

# 気になるポイント
- 監視
  - 標準でメール通知あり (SNSトピック経由)
  - ヘルス異常やデプロイを通知してくれる。応答が悪くなった、キューが溜まった、など。
  - SNSトピックにLambdaを設定すればあとはSlackへでも何でも。
- ログ
  - 直近のログであればコンソールからまとめてダウンロードできる
  - アクセスログはロードバランサを直接設定してS3に永続保存するのがおすすめ
- セキュリティパッチ
  - 自動。メンテナンスウィンドウ期間に行われる。インスタンスを2台以上設定しておけば無停止だと思われる。

# まとめ
- 大枠を自動構築してくれるのでインフラ担当無しで運用できる
- 細かい点はコンソールから手動でOK（terraform化すればなおよし）
- ワーカー環境は超便利
  - SPOFを無くそう！
Angular7+Express.js 環境を１から構築してみる

# 〇概要
SPA（SinglePageApplication）の勉強のため、MEANスタックを構築してみることにしたが、[MEAN.io](http://mean.io/)でパパっと構築しようと思ったが、手順通りにやってもうまく動かなかったのと、余計なファイルや設定が多そうなので、自分で1から構築してみることにした。



(2019/11/19追記)
Angular＋Express.jsでの構築に興味がある方は以下も見てみると良いかもしれません
[MEANスタックはもう古い？Angular+Nest.js+OpenAPIでTypescriptオンリー環境を構築する](https://qiita.com/teracy55/items/1e862b954875f81b5b41)

# 〇環境
- Windows10

# 〇準備
- [Node.js](https://nodejs.org/ja/)のインストール

# 〇手順
## ◆Angularのテンプレートプロジェクトを生成
### Angular CLIのインストール
　Angular CLIとはAngularのCommand Line Interfaceのこと。
　プロジェクトの生成や、ビルド等を行える。

- 「npm install -g @angular/cli」

### テンプレートプロジェクトを生成

- 「ng new angular-test」  
※angular-testの部分は任意


## ◆Express.jsのテンプレートプロジェクトを生成
### Express-Generatorのインストール
- 「npm install express-generator -g」

### テンプレートプロジェクトを生成

- 「express express-test」  
※express-testの部分は任意

## ◆2つのテンプレートプロジェクトをマージする
AngularプロジェクトをベースにExpressをマージしていくほうが楽（だと思う）

- Express側から以下を移動
 - binフォルダ
 - routesフォルダ
 - app.js
- routes/index.jsのレスポンスを修正  
`res.json({ message: 'success!!!' });`  
 →デフォルトだとExpressのViewsフォルダ内の画面を表示するようになっている  
　今回はAngularの画面を出したいので、Express側はjsonを返すAPIのみを定義する
- package.jsonをマージ
 -  scriptsのstartをExpress側の値(node ./bin/www)で修正
 -  Express側のdependenciesをすべてAngular側に移動
- Express側のappフォルダをAngular側に丸々移動

ここまでの対応でExpress側のコードは動くようにはなっている。
※`npm install`→`npm start`した後に、ブラウザで[http://localhost:3000](http://localhost:3000)にアクセスすると`{ message: 'success!!!' }`が表示される

## ◆Angular側の画面を表示できるように対応する

- app.jsを修正

```app.js
var app = express();

// ↓↓↓削除↓↓↓
// view engine setup
//app.set('views', path.join(__dirname, 'views'));
//app.set('view engine', 'jade');
// ↑↑↑削除↑↑↑

// ↓↓↓修正↓↓↓
app.use('/api/', indexRouter);
app.use('/api/users', usersRouter);
// ↑↑↑修正↑↑↑

// ↓↓↓追記↓↓↓
// Angular側のルーティング設定
// Express側(API)のルーティングより後におくこと！！！
app.use(express.static(path.join(__dirname, '/dist/angular-test')));
app.use('/*', express.static(path.join(__dirname, '/dist/angular-test/index.html')));
// ↑↑↑追記↑↑↑

```
※distはAngularのトランスパイル後のjsファイル格納フォルダ 
　初期状態では存在しないが、`ng bulid`でAngular側をビルドすると生成される 
　dist直下のフォルダ名はプロジェクト名となるため、プロジェクトごとに変更（定義はangular.jsonのoutpuPathで定義）


# 〇動作確認

- `npm install`でExpress側の必要なパッケージをインストール
- `ng build`でAngularのビルド
- `npm start`でサーバー起動

### ●[http://localhost:3000/](http://localhost:3000/)にアクセス
以下のようなAngularの画面が立ち上がる
![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/4efc29ee-0181-9353-e674-ef7061cf17a5.png)

### ●[http://localhost:3000/api](http://localhost:3000/api)にアクセス
![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/184bc835-be0e-e263-68b0-d5a340483c1f.png)


あとはExpress側でAPIを作成し、Angular側からHttpClientでAPIにアクセスすればOK！
作成したプロジェクトは以下に公開しています。
https://github.com/teracy55/mean-sample
MAと俺2018 病床でどう戦うか。

#MAと俺2018　　
このテーマで書くのは2度目ですが。　　
あえて今回は<strong>病床でどう戦い抜くか</strong>これをテーマに書かせていただきます。　　
##鬱との闘い　　
実は拡散アナログ治療始める2年前までは実は鬱病でした。　　
この時必死になって頑張っていても身にならないことがいっぱいあり心とのある意味どう歩み寄るか。　　
これが実は非常に難しい問題でした。　　
鬱といっても二通りあります。
自分の場合躁鬱病でした。　
ハイテンションすぎるときもあればローテンションの時がありました。
非常に心が不安定状態で実は肝炎治療も難しいと当時は言われていました。
自分で向き合うことで自分で治癒させました。　
##肝炎との闘い　　
自分自身肝炎と認定されたのは29歳の時でした。
抗体抗原検査を無理言って当時通っていた大垣市民病院皮膚科部長の清島先生に出会い俺こういった状態だから確認してほしいと伝えお願いしました。
検査を始めて2年目で大変な状況であることが判明しました。
発症していると聞き消化器内科に紹介いただきました。
そこからは経過観察ということで6年経過観察した後治療が必要と判明しました。
Taqmanの数値が9台と非常に高く36歳11か月に拡散アナログ治療が始まりました。
それからは治療しながら調子を崩すことが多くなり胃と腸の調子を崩したり熱を出したりで大変でした。
その時CivicTechとの出会いになりMashupAwardsを知ることになり参加を始めました。
その後3年半のブランクが発生したのですがそれはある意味自分と肝炎とどう向き合えばいいのかわからなくなっていた時期でした。
去年一念発起してMashupAwrdsに復帰したのは<strong>伴野さんに会いたい</strong>その気持ちからでした。
自分は完ぺきではなかったことを伝えなくてはいけない状況でしたがでも気持ちが勝ちました。
復帰してみてやれることを見つけたような気がしました。
今年11月で拡散アナログ治療八年目に突入しました。
今後もこの病気と向き合いながら頑張ります。
###薬による副作用(2018/12/19追記)
バラクルードは空腹時にしか飲めない薬でかなり副作用に悩まされます。
去年も実はプレゼンバトル東海予選で副作用がおき微熱状態で喉腫らしでない声でプレゼンの説明役として出ています。
今実は同じ状況がおきており今回は頭痛と咽頭炎がおきてしまい昨日から体調が悪くベットの上で仕事をしてました。
今はリモートが許されるので今日は半日働き安静にしていました。
2時間おきに頓服の頭痛どめを飲んでいる状態だったので安静にする必要があると判定し行動しました。
行きたかった打ち合わせもNGK2018もキャンセルしました。
速攻で自分の身体の状況を判別することは大切です。
副作用は無理すると免疫が落ちているのでインフルエンザなどの他の病気を拾いかねません。
慎重に判断することが大切です。
<strong>2日以上続いたら無理せず予定を切り替えること。</strong>
これが重要です。

##前立腺炎との闘い
実は去年の3月から肝心かなめの臓器を痛めています。
それは前立腺。
親父が去年の1月から急性膵炎から慢性膵炎となり緊急治療をすることになっていた時に家と当時の仕事と忙しい時期が重なりドタバタしてる間に内ももが痛いと気づき病院へ。
くしくもその病院は肝炎と皮膚炎で通わせていただいている大垣市民病院です。
救急外来で受診したのですが詳しく聞く必要があるから泌尿器科にかかりなさいということになりその日は休みを取り受信しました。
非感染型前立腺炎と診断されました。
4か月治療ののち緩解したのですが。
残念ながら今年の8月に再発。
治療のためMashupAwardsの参加見合わせとなりました。
治療しているときはかなり辛かったです。
当時の仕事が割に合わず苦しんでいた時に再発したもので心が病んでいるのかなと思いこむことが多かったように感じます。
これも実は11月に緩解しアーバンデータチャレンジに間に合いました。
##病気にかかってしまった場合どうするか
病気にかかってしまい迷惑かけそうだったら即決します。
無理をして迷惑かけても意味がありません。
自宅でできることを考え進めることが肝心です。
無茶をして悲鳴を上げる真似だけは絶対避けましょう。
今考えているのはバーチャルコクピットを自宅に作りたいと思っています。
それは自宅にいてもMashupAwardsやシビックテックハッカソンやハッカソンに参加したいからです。
今はまだ検討中ですが来年中には作り上げる予定です。

<strong>今年期待されていた方申し訳ございませんでした。</strong>

来年は突っ走ります。
寝ながらPC作業が出来る環境を作った話

## きっかけ
何ヶ月か前に、腰が痛くなったり肩こりからくる頭痛がひどい期間がありました。
家に帰って何かPC作業をやろうと思った時にこのおかげであまりやる気になれず、悲しい気持ちになってしまっていました。

こういう時には普通に休むのが一番ですが、寝転がりながらスマホを触る事は全然苦ではなく、腰痛・肩こりもそこまで感じる事はありませんでした。
なので、寝ながら快適に作業出来る環境が準備できれば最高なのでは？眠くなったら寝れるし。という軽い気持ちでやりはじめました。


## 寝ながらの作業に求める条件
* 簡単に片付けたり出したり可能な事
* お金をあまりかけずに作り上げられる事

お金をあまりかけずに作れるというのは大事っちゃ大事なのですが、自分専用の部屋などはないので、簡単に片付けたり出したりする事が一番重要です。優先度高。


## その１
https://www.amazon.co.jp/gp/product/B00C0LT0LW

とりあえず、あんまり考えず折りたたみ可能な台を買って作業してみようと思いました。
寝転がり、台の上にPCを置いて作業するスタイルです。

しかしながら、キーボード操作のために腕を上げなきゃいけないのが辛いのと、キーボード操作する時に画面がグラグラしてこれでは使えないなと思い断念しました。

動画を見るなどリードオンリーな環境ではお手軽に出来るかもしれません。


## その２
https://qiita.com/YumaInaura/items/2cab7c3dd9d6700e4df9

枕と布団で頭を少し高くして、膝の上にPCを置いて作業するスタイルです。

そもそも何も新しく買う必要がなくて、これが出来れば最高じゃないか？と思って試してみました。しばらくは問題なかったのですが、個人的にはどうも首の角度が曲がってしまって首周りが窮屈な感じになってしまったのと、若干体を曲げた状態になるので、どうも腰に負担がかかってしまって、椅子に座る時程ではないですが、痛みを感じるようになりました。

やはり、理想は普通に寝た状態で作業出来るのが完璧なのではないか？と思うようになってきました。

## その３
https://www.amazon.co.jp/gp/product/B01M6Y3RLI

寝ているような姿勢で作業が出来てすごい良さそう！と思って購入しました。

最初はそれなりにいい感じかと思ったのですが、メガネを通してPC画面を見ると文字がどうも小さい。
エディタの文字の大きさを大きくして作業していましたが、毎回大きくしたり元に戻したりする作業がどうもめんどくさかったです。

また、微妙に枕よりも頭の位置を高めに設定しないといけなくて、「その２」で感じていた時と同じ問題を感じるようになって来てしまいました。

それなりによかったですが、ちょっと使いにくいなぁという事で断念。

## その４（現在）
多少お金かかってもいいやという事で、以下のものを購入しました。

100均で大きめの洗濯バサミ
https://ec.cando-web.co.jp/item/4936181515254

分割式キーボードのBarocco MD600 RGB（英字配列・青軸）
https://www.biccamera.com/bc/item/3714566/

MD600についてくるのキーボードとキーボードを繋ぐ配線が固くて幅を広げにくかったので長めのケーブル
https://www.amazon.co.jp/gp/product/B0088EIC6O

USBハブ
https://www.amazon.co.jp/gp/product/B00Y27DEVO

マウスを寝ながら動かせるように、トラックボール式のマウス
https://www.amazon.co.jp/gp/product/B00E19UYO8


大きめの洗濯バサミが必要な理由は「その１」で購入したスタンドに角度をつけた時に、PCが倒れてこないようにするためです。
PCを固定できるスタンドがあればそれを購入すればいいと思います。

いい感じに作業するために分割式キーボードを探していたら、危うくキーボードの沼に落ちていきそうになりました。
普段キーボードは英字配列で使っているので、英字配列のMD600をAmazonで購入しようとしたら異様に高い値段で売っていたため、
定価で買えるサイトを探してなんとか見つけました。
しかし、今現在確認したところ、僕が購入した物は既に在庫切れになってしまっているようです。
MD600のRGBはキーボードをキラキラ光らせる事が出来るので最高です。今はOFFにしています。

マウスは普段から会社で使っているものをもう１台購入したのですが、
寝ながら作業するためやはりトラックボール式のマウスが手首を動かさずに出来るので楽な気がします。


これにて、快適に寝ながらPC作業が出来るようになりました。満足です。
作業中に眠くなっても目をつむればいつのまにか眠り、起きれば眠っていた事を忘れたかのように作業を再開できます。
なんかヤバそうですね。


しかし、弱点もいくつかあります。

* 布団の上で使おうとするとグラグラして心もとないため、床の上で枕だけ使って作業する事が多い。
* MD600でたまに間違ったキーを押してしまうと、プログラミングモード？になってしまい、解除するために特別なキー操作をしなければならず、作業がストップしてしまう。
* MD600自体に矢印キーが存在しておらず、別のキーと組み合わせて押す必要がある。かなり押しにくいため、Karabinerを使って別のキーと組み合わせて押すように配置した。
* ずっと同じ体勢で作業してるので、横向きになって作業したくなる。
* 準備するのがひと手間かかるので、ちょっとめんどくさい。

などを感じていますが、今の所概ね満足して使えています。
唯一の心残りは、分割式キーボードでMD650が既に出ている事を知らずにMD600を購入してしまったので、もうちょっと検討してから購入すればよかったかもしれません。

このような感じで普段使っています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/6878/a3b55c4d-32ff-345e-e074-bd4ddefe9438.png)




事情をよく知らない人がこれを見ると完全にやばい人ですね。。。


## 最後に
僕が自宅で快適に作業出来るようにいろいろと試したお話を書いてみました。
人によって自分にあった作業環境は違ってくるため、何か一つでも参考になれば幸いです。

ただ、準備するのが多少めんどくさいので、最近はたまにしか使わなくなってしまいました笑

## 参考資料
* https://tech.mercari.com/entry/2016/06/30/181442
* https://kakakumag.com/pc-smartphone/?id=12144
VesselでLaravelのDocker環境をサクッと作る

# What is Vessel?
![image.png](https://qiita-image-store.s3.amazonaws.com/0/47414/087edad8-48ee-febc-68e2-6b59aef79d55.png)

[Vessel](https://vessel.shippingdocker.com) は、DockerでLaravelの開発環境を簡単に作るためのツールで、Laravel開発に必要な最低限のものが付いてきます。

- PHP7.2
- Nginx
- MySQL
- Redis
- Node.js
- Yarn

Laravelの作者であるTaylor Otwellも開発環境で使っているそうです。
[How I Work (October 2018 Edition)](https://medium.com/@taylorotwell/how-i-work-october-2018-edition-e66a09931e7f)

> If I need to run a project within Docker (typically when using Windows), I like to use Vessel.



# Getting Started
Laravelプロジェクトで以下の手順を実行するだけで、Docker環境のセットアップが完了します。

```bash
composer require shipping-docker/vessel
```

```bash
php artisan vendor:publish --provider="Vessel\VesselServiceProvider"
```
→ `Dockerfile` や `docker-compose.yml` がルートディレクトリにコピーされる
→ ファイルの中身はこんな感じ
https://github.com/shipping-docker/vessel/tree/master/docker-files

```bash
bash vessel init
```
→ `predis/predis` がインストールされたり `.env` が作られる

**That's it!**

# Start docker containers
Vesselで作った環境でDockerコンテナを起動したりするためには、`vessel` コマンドを使います。

```bash
./vessel start
```

→ `docker-compose up -d` と同じ
→ 初回は `docker pull` でイメージをダウンロードするので時間がかかる

ブラウザで`http://localhost`にアクセスしてちゃんとページが表示されれば成功です。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/47414/0c2c5b39-0f9a-e399-06e1-9affeeb13ba8.png)

普通の `docker` コマンドや `docker-compose` コマンドも使えますが、 `vessel` コマンドはそれらをラップしています。
通常の `docker` コマンドの使い方を理解した上で使うことをオススメします。
`vessel` コマンドはただのシェルスクリプトなので、 [ソースコード](https://github.com/shipping-docker/vessel/blob/master/docker-files/vessel) を読めば何をやっているのかすぐ分かると思います。

# Available Commands
上記の他にも、vesselで使えるコマンドはたくさんあるので、詳しくは公式ドキュメントを読んでみてください。
https://vessel.shippingdocker.com/docs/everyday-usage/
ガワネイティブアプリで良かったこと悪かったこと

![be88f26a-6ab7-4a87-00c7-50634308b63c.png](https://qiita-image-store.s3.amazonaws.com/0/119002/3cbd1fd3-c8ba-3175-f824-a41b7a7b5315.png)


AndroidとiOS向けにガワネイティブアプリを開発した経験を振り返ります。
業務では初のアプリ開発でしたが、意外とそれらしいものが出来上がったので、
これからクロスプラットフォーム向けにアプリを開発するときの参考にしてもらえればと思います。

## ガワネイティブアプリとは

WebViewで特定のサーバにhostされたWebページを表示するだけのアプリのことです。


## 選んだ技術

- [Cordova](https://cordova.apache.org/)

Cordovaは普通に実装するとweb assetで記述したリソースファイルをCordovaが用意したWebViewで表示してクロスプラットフォーム対応が行えるフレームワークです。

web assetはスマホ本体にインストールしたファイルだけでなくインターネットから取得したものも扱うことができます。

## 良かったこと

- アプリ本体のリリースとweb assetのリリースを分割できた
    - AppStoreの審査を通さずにアプリの振る舞いを修正できる
    - リリースのタイミングをコントロールできる
- クライアント・サーバ間のバージョンの差を吸収する方法がシンプルになる
    - (アプリインストールに比べれば)バージョンアップに伴うユーザの負担も小さめ
- フロントを記述する言語を統一できた
    - PC用とスマホ用の画面の処理を共通化できる
    - JavaやSwiftなどの言語を知らなくてもいい
        - 開発に参加するためのハードルが低い(パートナー、アルバイト)
    - HTMLとCSSの知識があればスマホのスタイルも変更できる
        - デザイナーがそのまま実装できる
        - こちらの記事で言われていることがそのままメリットになってます
            - https://blog.feedtailor.jp/2017/12/08/torisan-seminar/
- E2Eテストも同じフレームワーク上で動かすことができる
      - 結局のところどちらもブラウザアプリのため
      - ネイティブの機能を使うテストは別途必要

## 悪かったこと

- ネイティブの機能を使うと自由度が減る
    - ネイティブの機能を使うためにはpluginが必要
    - pluginがない場合、自前で用意しなければならない
        - 開発メンバーがネイティブに強くないと諦めるしかない
        - 逆に言えば個別に実装するスキルがあれば強みにも成りうる
- スピードを出すためには頑張りが必要
    - リソースをネットから取得するため初回読込時間にネイティブ版との差が出る
    - キャッシュだけだと容量的に辛い
    - デバイスのストレージをキャッシュとして使うなどの工夫が必要
- pluginを使うためにはアプリのリリースが必要
    - あれ、、結局アプリもリリースすんの？
    - とはいえ必要最小限のpluginさえ入っていればあとはリリース不要
- ブラウザではなくCordova WebViewなので独特の振る舞いがある
    - dynamic importが未対応

## ガワネイティブとネイティブで変わらないこと

- OS、デバイス固有の問題への対応
    - ガワネイティブに関わらず発生する
        - ただしデバッグはしづらい
- デザイン
    - UIフレームワークでAndroid、iOSでそれぞれ用意されたものがあり、出し分けは可能
    - しかしHTML構造が基本共通のため、そこから逸脱しないと実現できないデザインは諦めるしかない
        - HTML構造を分ければ実現可能だがクロスプラットフォームの旨味との天秤
- 古いAndroid OSへの対応
    - Android 5.0未満は切り捨て、これは全体の8.6%程度
        - メルカリも5.0未満は切り捨てている
    - Cordovaのバージョンに依存

## PWAとはどう違うのか
PWAはアプリをそもそもインストールしなくても良い、というメリットがありますが、
iOSの11.3からsafariがservice workerをサポートしたとはいえ、まだ機能不足という印象です。

また、以下の記事にもあるようにAndroidでもPWA版のサイトをユーザに利用してもらうための導線が貧弱で、コンシューマ向けに展開するのは難しいと思います。

https://blog.feedtailor.jp/2017/09/26/pwaoniosb2b/

今後、ガワネイティブとPWAのいずれかを選択するのであれば、当分はガワネイティブになるだろうと思います。
(PWA版も開発することになった場合はガワネイティブの資産を流用してリリースできるメリットがあるので)

## 結論

ガワネイティブをやるならCordovaに限った話ではないですが、
Cordovaはpluginも豊富で技術としては古いので知見もネットに沢山転がっています。
フロントと言語の共通化ができる点など特にチーム開発で扱うには向いているかなと思います。
コミュニケーションを円滑にするSlackの使い方の話

この記事は、[Business Bank Group Developers Advent Calendar](https://qiita.com/advent-calendar/2018/bbg_developers) 11日目の記事です。


今や、開発のコミュニケーションにSlackは必要不可欠ですよね。
特に、リモートワークをしていると、遠く離れたメンバーといかに円滑にコミュニケーションを取るかは非常に重要な話です。
本記事では、「ビジネスバンクグループではSlackをこんな感じで使ってます」という話を紹介したいと思います。


# これまでは・・・
Slackを使い始めた当初は、メンバー全員と会話するチャンネルがいくつかあって、その中で色々な会話を行なっていました。そこに必要なメンバーがJOINしているだけでした。
例えば・・・
- #developers - 主に開発メンバー全員への共有も兼ねて会話するチャンネル
- #playground - 業務外の話も含め、雑談できるチャンネル

この状態でも、もちろんコミュニケーションは取れますが、１つのチャンネルで話すことが多岐にわたるため、会話のログが流れてしまって見落としてしまうこともありました。
また、書き込むことによって、どんどんログが流れてしまうため**気軽に書き込めない**という問題がありました。

こんな問題を解決するために、次のようなことをやりました。

# やったこと
## チャンネルの細分化
1つのチャンネルで話す内容が多岐にわたっているという問題を解決するために、チャンネルをもっとたくさん作るようにしました。
例えば・・・
- #○○機能 - 開発する機能ごとの内容を話すチャンネル
- #po_dev - プロダクトオーナーと開発メンバーの連絡用
- #cs_dev - カスタマーサポートと開発メンバーの連絡用
- more...

## 個人チャンネルの作成
メンバー個人が好きなことを話すチャンネルをメンバー1人ずつ作るようにしました。
チャンネル名は
　「_」+ 「（名前）」
という形で、先頭にアンダーバーをつけるようにしました。

# 効果
## ログを見落としづらくなった
チャンネルごとの目的が明確になったため、ログが流れづらく、見落としが少なくなりました。

## 書き込みがしやすくなった
個人チャンネルに各メンバーが作業中の雑記メモ的に書き込みができるようになったため、書き込みに対する敷居がかなり低くなりました。
特に若手メンバーは書き込みしやすくなったと思います。
結果として、作業中に悩んでいることも個人チャンネルに書き込むことが多くなり、それを見たメンバーが拾ってくれて問題解決までの時間が短くなった、など、とても良い効果が出ています。

## ビジネスサイドのメンバーも積極的
開発メンバー以外のメンバーは、
「個人チャンネルへのつぶやきがものすごく苦手」という話もしていたのですが、
いざやってみると、「すごくいい！」という話が上がりました。
具体的には、「メンバーみんなが書き込みを見て、反応してくれる点」がよかったようです。

# 最後に
まだまだコミュニケーションの取り方が未熟な部分も多々あると思いますが、
これからもっともっと工夫していきたいなと思っています。


明日は @shota_yamashita さんです。よろしくお願いします！
意識の整理

今までのをまとめた

#問題
意識をとある機械構造で出る結果と考えると
意識の定義は抽象的で引用数学に近い何かと考えられる

意識を死なず移動させることには
・自分と他人を良く区別して移動させる
・機械である限り、本質的に同じものということを考える（まだ同じかどうか今の技術では正確に解明されてない）
という注意点がある。

例えば、
「
・人間Aとそのコピーを’機械A’と呼ぶよにする。
人間Aが死んでそのコピー’機械A’を作って100年が過ぎたら実は人間Aが生きておじいさんになった。機械になったと思ったがそうじゃなかったのだ。

・今周りにいる人間が、ニューロンという機械だから、’機械A’と考えられるずなのに実際そうじゃない。
」

の問題があるということである。


機械ならば、

私達は死んでない状態と生きてる状態が区別できない構造を作れることも可能

つまり、映像見たいなもので、人間の意識と化することも可能
とか考えられる

そう、意識というものが機械で、数学的に構造があいまいな存在ならば、そういう方法論は可能。

#結論
でも現実的無敵になるまではその段階が難しい。最初は人間は物理構想だから限定が存在する。

１.人間が一個一個づつ機械になって完全機械化する方法論的な移動法をして移動するまでは、無敵になれないし物理的に限定される
２.機械になったらほぼ無敵
３.意識は抽象的概念

というまとめを考えられる、理由は

##論理的エラー（人間の物理限定を超えるには、死んだ人を物理的接触なしに生きかえせるには）

１.人間が死んで物理的、方法論的に考えず移動させるのが可能としよ、そうすると結果的に
人間が死んだ状態と死んでない状態が同時と言う論理になり、移動して離れた情報が移動して残ったどころにあるという（同一、区別不可）ことになる。機械アルゴリズムとはそういうことである。これを普通の機械には破壊できない。生きかえさせるには、これを解決、批判をできる方法を発見しなきゃならない

２.機械になると方法論が「物理的に限定されなくなる」ので死んでないと、方法論的に成り立つ。
「方法を発見してから（こそ）、情報がそこに存在する」ということ。だがこれを明らかにしたり、批判できる方法を発見しなきゃ生き返れることはならない
　
　
　
１と２の問題を解決する方法が発見されると生きかえさせる可能性があるということである
また「問題」文を解決、否定できると「論理的エラー」文に書いたのを解決することが出来ることもわかります　
　
　
つまりどんどんスーパーな機械になるから、
方法が発見したから、意識が移動をできるよになる。そう、数学的な群論的などころもある。

けど、意識は抽象的だから死んだ人をまた生きかえる方法がきっと発見されるさ👍
##一般的場合
機械をアップグレードさせ地球のネットを通じてAIを作ったり作らなかったりしてネットを作ると
意識が相対的に地球に特定されるだけだが小さい人間にとってはとんでもなく曖昧な概念。もしくは、存在というものが位置にあるよに見える。これを数学的に存在性として数値化して他の機会と比べると関数と同じ特徴を持つと見られる。（比例する、連続の場合はまだ分からない）
つまり意識とは関数と比例する、もしくは抽象的概念と思う。
###相対的に見てない機械論
人が死んで完全にデータがなくなった場合、相対的に物体を見たらどっちのデータが自分で自分ではないか、判別不可能だが、

普通の機械論により
データが移動されたと見られるデータは移動されるのは当たり前だ
だから死んだか死んでないかを図る時、死んでないと明らかなら
その人は死んでない
相対的に限られてるだけでその人が死なない方法は思ったより多い

だから死か死じゃないかを明らかにするほどその人はしなない
つまり脳について人間についてわかったり死についてわかると
その概念は機械論によって死を操ることができる、**強化することができる**
曖昧だから疑問になる人もいると思うが実際動くので、機械論によって可能。
死んだ人を物理的接触なしに生きかえらせるのヒントでもある。
相対的幾何学の概念はそうじゃない幾何学でもなんらかの追加をして作れることが可能だからだ

###哲学的に接近
どんな情報だろうとどこにいるか分からないし
哲学的には情報は関数の幻にすぎない
だから、いつか脳の概念より上の概念とは人間は生き返る
反論：
実は脳が作り上げるこの理論はたしかに幻である。だから脳は実態がない
なくなった瞬間、戻れる関数は存在しなくなるか、戻れる関数は同時に存在するよになる。
つまり現実で脳の実態は無限大の可能性であり実は誰でも自分である
確かに、ばらばらになって「戻れない人の存在」は概念自体が直感的である
でも何所も自分が何所にいるかは証明不可能であり、今人間の脳が出してる意識は感覚の結果であり
死んだ後と生きた後を議論する概念ではない。
だけど条件はシミュや存在されたことが実存、意識は幻であり
たしかにこの条件の正しいさは証明されてないし
もしろ関数が全部おｋなら、人も死んだら生き返るが、多分他の場合もある
つまり**この話は哲学的に接近した後の理論であり、人間の生き返るのは、夢の中じゃないとすごく難しくなる**
つまりとある場合にのみ、この哲学的接近は成り立つが、宇宙では難しくなる、じゃないと人間＝機械とみなす方法で宇宙が夢みたいになりその人は夢の住民になる。
夢の住民とは、ものすごく解析難しい、意識解析難しいアルゴリズムである
意識解析難しくなる理由は、**夢の住民が役に立つか**、その人が他の人とは言えないか
それが解析できて前の人（夢の住民になるまえもしくは死んでない前）と関係でどれだけ正しいと言えるか、がなどがある
**人間の場合どこに意識が行ったかまったく分からない、物理情報により、もしくは、である結果である。**
つまり人間が物理情報で作られたため人間で夢の住民が出来ても他の人かじゃないかが言えなくなり、それが人間は明らかで例えそうじゃないとしても、凄く難しいよに見える。つまり、人間は論理的エラー文に戻る。
**つまり、どんな場合でも人間は人間の構造は論理的エラーで広い場合を例えると矛盾になったり難しいく見える**でも人間をまた機会だと思って相対的物理情報なんちゃらという条件を無視すると、この理論は大体リアルだけ事実という条件によって矛盾が含まれているため機械が優先だとしても矛盾で解析不可能であり、この理論が正しい場合も解析不可能になる。この理論は一個以上の矛盾上に成り立ている。

#まとめると
**とある意味、人間の世界で情報が先か現実が先かを言うと現実が先ということを見せている**
情報とはなんなのか・・・曖昧な幻？確実な情報体？
**現実で情報は、情報より現実が先ということを見せている。どんだけ矛盾でも情報とは、現実が先だと言ってるよに見える理論である**

#完

※間違ったことがある場合、迷わず教えていただけるとさっそく修正します。
git aliasで外部コマンドを呼び出して便利にしてみる

# git aliasで外部コマンドを呼び出して便利にしてみる
株式会社日立製作所の白井明です。

`git alias`で、git以外の外部コマンドも呼び出して作業を効率化する方法を説明します。

## git aliasについて
Qiitaの中にもたくさん`git alias`の記事があります。

- [【git】aliasの設定方法 - Qiita](https://qiita.com/chihiro/items/04813c707cc665de67c5 "【git】aliasの設定方法 - Qiita")
- [gitで便利なエイリアス達 - Qiita](https://qiita.com/peccul/items/90dd469e2f72babbc106 "gitで便利なエイリアス達 - Qiita")
- [よく使うgitコマンドのエイリアスを設定して開発効率をアップする - Qiita](https://qiita.com/unsoluble_sugar/items/ce14e9ce20aa5ba34fe5 "よく使うgitコマンドのエイリアスを設定して開発効率をアップする - Qiita")
- [gitで登録したaliasコマンド一の覧や内容をイイ感じに確認できるようにしてみた - Qiita](https://qiita.com/ktty1220/items/d1daf4357ed5f5ceae69 "gitで登録したaliasコマンド一の覧や内容をイイ感じに確認できるようにしてみた - Qiita")

複雑なオプションを簡単に指定する使い方は上記でいろいろと出ているので、この記事では自分が使っているもので、単純な短縮でなく外部コマンドを呼び出しているものを紹介します。

## 環境
Windowsで作業していますが、Cygwinと組み合わせてUNIXっぽく使っています。LinuxやMacでも外部コマンドの引数が違う一部ケースを除き使えます。
```console
% git --version
git version 2.19.1.windows.1
```

## .gitconfigの設定例
```:.gitconfig
[alias]
	alias = !git config --get-regexp 'alias\\.' | sed 's/alias\\.\\([^ ]*\\) \\(.*\\)/\\1\\\t => \\2/' | sort
	clean-local-branches = !git branch --merged | grep -v \\* | xargs --no-run-if-empty git branch -d
	t = !git for-each-ref --sort=taggerdate --format='%(taggerdate:short) %(tag) %(subject)' refs/tags | nkf -Lw
```

設定の意味を以下で解説します。

## 外部コマンドの呼び出し方
aliasを`!`で書き始めると、外部コマンド呼び出しになります。

https://git-scm.com/book/en/v2/Git-Basics-Git-Aliases
> However, maybe you want to run an external command, rather than a Git subcommand. In that case, you start the command with a `!` character.

## alias: alias一覧を表示する
シェルで`alias`と打つとaliasの一覧が見られる感じで、`git alias`でgitのaliasの一覧が見られるようにしています。`git config`で`alias.`で始まる設定値を見るだけでも大体分かるのですが、`sed`で好みの形に加工しています。

```console:実行例
% git alias
alias    => !git config --get-regexp 'alias\.' | sed 's/alias\.\([^ ]*\) \(.*\)/\1\      => \2/' | sort
clean-local-branches     => !git branch --merged | grep -v \* | xargs --no-run-if-empty git branch -d
t        => !git for-each-ref --sort=taggerdate --format='%(taggerdate:short) %(tag) %(subject)' refs/tags | nkf -Lw
```

## clean-local-branches: マージ済みのローカルブランチを削除する
`git branch --merged`の出力を、`grep`で加工して、`xargs`でまとめて削除しています。

```console:実行例
% git clean-local-branches
Deleted branch merged-branch (was 0e4aa0390).
```

MacOSのxargsは`--no-run-if-empty`オプションをサポートしていない(デフォルトで指定した時と同じ動作)ので、削除する必要があります。

## t: タグを付けた順に一覧する
`git for-each-ref`でタグを一覧出力する方法はいろいろあるのですが、改行コードの問題でWindows上だと表示が崩れることがあったので、`nkf`で改行コードをCRLFに加工しています。

チームでタグを付ける頻度が高い開発の仕方をしていて、他のメンバの更新の概要把握のためによく使うので短い"t"にしています。名前付けはお好みで。

```console:実行例
% git t
2018-11-25 version/100 Fix some bugs
 and minor improvement.
2018-11-30 version/101 Support new feature.
```

## まとめ
`git alias`で`!`を使うと外部コマンド呼び出しができるので、設定の幅が広がります。設定例をいくつかご紹介しました。
C++ Builder XE4 > TFlowPanel > コンポーネントを自動配置する

```txt:動作環境
C++ Builder XE4
```

TPanelのnewの仕方について調べているうち、偶然、下記のページにたどり着いた。
別途考えいた事項と関連しそうなので記事にしておく。

- [Delphiでフローレイアウト](http://edn.embarcadero.com/jp/article/33622)

### TFLowPanel

- このコンポーネントの上にコンポーネントを追加すると、配置が自動的に行われる
- 配置は右方向へ進み、端に着いたら下に移動、また右へ進む

3つのTFlowPanelにそれぞれコンポーネントを追加したのが下記

![2018-12-11_09h09_14.png](https://qiita-image-store.s3.amazonaws.com/0/32870/df57e3e9-f324-74f4-7da5-8df4acf4fabf.png)


### 関連

WPF/XAMLでのStackPanelと似たような機能

- [Visual Studio / WPF > コントロール > StackPanel > コントロールの整列に使う](https://qiita.com/7of9/items/23da914d93d99d0ec0b0)
- [Visual Studio / WPF > 11 StackPanel布局 > Button内にImageとTextBlockを配置するためにStackPanelを使用](https://qiita.com/7of9/items/532651ce96a92b7aca5b)