OmniAICreator/Qiita-1.07M huggingface dataset:
Qiita-dockerお宝鑑定団　docker(78)

# dockerお宝鑑定団
Qiitaのお宝コードを、docker上で動作させて、
どんなお宝か確かめる活動。

# 目的
Qiita上のお宝コードを鑑賞するのに、自分のシステム上で動く環境を構築するのが

1) 手間である
2) わからない
3) 現在の環境に影響を与えたくない

という方々でも、お宝コードを試すことができるようにする活動です。

鑑定とはいうものの、主観的な鑑定をするのではなく、
docker上で、どう動作させるか、
自分の能力を鑑定しているような感じです。

# 原則
著作権が混同しないように、1 docker hubで登録するのはなるべく１著作者のもの

記事中にURLおよびソースコードに、Qiita URLをコメントとして入れる

エラーがでたらエラー記録する。

エラーがでなくなる方法を思い付いたら、自著作権表示して修正案を入れる。
環境の構築方法が間違っている場合もある。暫定修正案。
## 例
１.
著作者ではないですが、、、。

言語処理100本ノックをdockerで。python覚えるのに最適。
https://qiita.com/kaizen_nagoya/items/7e7eb7c543e0c18438c4

2.
Qiita記事ではないですが、、、
なぜdockerで機械学習するか 書籍・ソース一覧作成中 (目標100)
https://qiita.com/kaizen_nagoya/items/ddd12477544bf5ba85e2
# 一覧（作成中）
Qiita-dockerお宝鑑定団(1)docker R エラー作業中
https://qiita.com/kaizen_nagoya/items/7fe17fa24ad952173dfc

Qiita-dockerお宝鑑定団(2)haskel 収集中
https://qiita.com/kaizen_nagoya/items/4e27a6905a57a1e8d34c

小川清最終講義、小川清最終講義（再）計画, Ethernet(100) 英語(100) 安全(100)
https://qiita.com/kaizen_nagoya/items/e2df642e3951e35e6a53
# 文書履歴(document history)
ver. 0.01 初稿 20190911 午前
ver. 0.02 (1) R 登録 20190511 昼
ver. 0.03 (2) haskell 登録　20190525 
ver. 0.04 標題追記 20191229
ver. 0.05 URL追記　20230215
### 最後までおよみいただきありがとうございました。
いいね　💚、フォローをお願いします。
####  Thank you very much for reading to the last sentence.
Please press the like icon 💚　and follow me for your happy life.
Androidスマホの過充電をスマートコンセント(1500円)とTasker(399円)とIFTTT(0円)で防ぐ

# まとめ
1. Taskerが充電開始したことをユーザーへバイブレーションで通知（充電ミス防止）
* Taskerが満充電を検知してIFTTTのWebhookを叩く
* IFTTTが先ほどのWebhookをトリガーにスマートコンセントの電源をOFFにする。

# 導入
2年ほど使った携帯が一日も持たないぐらいにバッテリーがへたってしまい不便で仕方がなかった。
スマホ買換で2日程度持つ状態になったので、これを出来るだけ維持したいので過充電対策を講じる。

# 手順




### Taskerが充電開始したことをユーザーへバイブレーションで通知（充電ミス防止）

* 祝Tasker日本語化。プロファイル追加で「状態 > 電力 > 電源」。アクション追加で「通知 > 振動(パターン)」。
![clip_now_20190511_090430.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202646/89952669-5137-c92f-534a-58e2959badc7.png)
![clip_now_20190511_090454.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202646/d71d7807-02c2-e9ea-9b98-119624eed6aa.png)

### Taskerが満充電を検知してIFTTTのWebhookを叩く

* プロファイル追加で「イベント > 電力 > 電池が満充電になった」。アクション追加で「ネット > HTTP POSTメソッド」。
![Screenshot_20190511-090603.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202646/53cec3ba-03fc-5bea-ea13-b6ffca92edcf.png)
![clip_now_20190511_090625.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202646/97dba4bd-3bb7-90dc-5c04-c86d7bdd0da6.png)

IFTTTのWebhook受信するURLは後述。


### IFTTTが先ほどのWebhookをトリガーにスマートコンセントの電源をOFFにする。

* あらかじめスマートコンセントは設定しておきましょう。私はMerossのMSS110JPを手配。
* IFTTTでサービス登録も忘れずに。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202646/52ebdf4f-3849-f267-716a-c4d03aa5cbf9.png)
https://www.amazon.co.jp/dp/B07BK1GG2Q

![clip_now_20190511_090818.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202646/304ee9e8-3113-65d8-bbd2-8facb9148c06.png)

* ![clip_now_20190511_090725.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202646/9d837d8f-b676-4d43-3a05-0e57fb24c03a.png)
* ![clip_now_20190511_090739.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202646/a4ba91b3-27ad-947f-7aa5-4a325d419bf3.png)

IFTTTのWebhook受信は下記からチェックできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202646/88867927-14d0-50be-ad09-cd3853ef7c89.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202646/08e49b78-4c00-ccb0-b816-614402872fe3.png)


時間切れ。
Create React Appでバンドルサイズを可視化する on Windows ~npm-scripts記述時のWindows環境への配慮~

#概要

Create React App(以降、CRA)でバンドルサイズを可視化して分析することができます。(CRA V3以降でチャンク分析にも対応)
公式ドキュメントに手順はあるのですが、Windows環境だと修正が必要になるので、その説明です。
バンドルサイズ云々は実は関係なくて、Windows環境でnpm-scriptsを動かす際に気を付けたいことへの言及です。

#本題

CRAのバンドルサイズ分析に関する公式ドキュメントはこちら。
https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

MacOSだと問題ないのかもしれませんが、Windowsではファイルが見つからない旨のエラーになります。
scriptsの記述を変更しなくてはなりません。

>"analyze": "source-map-explorer 'build/static/js/*.js'",

まず、正しく実行できた時のターミナル出力はこちら

```terminal
source-map-explorer "./build/static/js/*.js"
```

公式通りだとこちら

```terminal
source-map-explorer 'build/static/js/*.js'
```

相違点は2点

1. シングルクォーテーションかダブルクォーテーションの違い
2. 相対パス指定の有無

1についてはWindowsあるあるのようで、以下の先駆者の方たち同様にダブルクォーテーションにすべきと理解。

https://qiita.com/Kazunori-Kimura/items/8dd2f67200d2750cd0ac
https://untitled-txt.hatenablog.com/entry/2018/12/04/112500

後で調べてみると、シングルクォーテーションの場合はワイルドカードだろうと文字列として扱うようですね。
http://tokkan.net/ps/string.html


2の根本的な部分は理解していませんが、明示的に相対パスを指定しろよと理解:sweat_smile:

1はMacOSでも問題ないとのことなので、2も同様に問題ないのではないかと思っています。
なので、修正後ならクロスプラットフォーム対応になる…とおもう（免責）。

私が修正したscriptsはこちら。

```json
"analyze": "source-map-explorer \"./build/static/js/*.js\"",
```


#おまけ

公式ドキュメントではパッケージインストールのコマンドとして

>npm install --save source-map-explorer

としていますが、通常実行には必要ないのでdevDependenciesの方が適していると思っています。

>npm install --save-dev source-map-explorer

理由としては、dependenciesは実行時に必要なもののみで構成した方が、実行時にどのパッケージを使っているのか明確化できるからです。
ただ、source-map-explorerのインストールガイドを見ても--save-devのオプションは指定していません。

どちらを選択してもバンドルサイズに影響はないので、npmのドキュメントをどう解釈するか好みレベルの問題ではありますが。

https://docs.npmjs.com/files/package.json#dependencies
https://docs.npmjs.com/files/package.json#devdependencies


#まとめ

OSの違いが絡んでくると途端に面倒になる話でした。
ブラウザやフレームワークに支えられているとつい忘れがちですが、あらためて感謝した次第です。
scripts等のOSが絡む場合、クロスプラットフォーム対応のため各環境下でのテストを忘れないようにしましょう。

- スクリプトにはシングルクォーテーションではなくダブルクォーテーションを使おう
- 相対パスなら明示的に./を入れよう

本記事はおそらくいずれ公式ドキュメントが修正されるのではないかと思っています。
Windows環境でも公式ドキュメントの操作で動作するなら、本記事の役割は終了しています。
Windowsでの開発環境

# 想定している読者
プログラミング自体入門の方

# 何故に今更Windowsか？
環境構築の相性やiOSアプリを作るならMacの方が圧倒的に有利なのですが、
Windowsに比べかなり高価なので、購入に時間がかかる場合に
まずWindowsでできるプログラミングをしてみませんか？

プログラマとして転職し、スキルアップ・キャリアアップしてから
Macを買って開発効率を上げるもの一つの選択肢だと思います。

# まずはXAMPP！
[XAMPP](https://www.apachefriends.org/jp/index.html)とはPHP若しくはPerlでウェブアプリを開発する際に必要なミドルウェアを
インストール・管理できる便利な開発環境です。

インストーラに従ってクリックしてくだけでPHPやデータベース（Maria DB）が動作します。

# Excel自体も開発環境
マイクロソフトのExcelやAccessはVBAというプログラミング言語に対応しているだけでなく
IDEも備えているのでそれ自体が開発環境となります。

いきなりウェブに入るより、時間にゆとりがあればVBAから入ると挫折率を抑えれます。

# お勧めの習得順番

1. [XAMPPを使ったPHP開発](https://qiita.com/drafts/9978fe44648ea424a240/edit#%E3%81%BE%E3%81%9A%E3%81%AFxampp)
2. Java  
[JDK](https://www.oracle.com/technetwork/jp/java/javase/overview/index.html)をインストール
3. Ruby  
[RubyInstaller for Windows](https://rubyinstaller.org/)
4. Node.js  
[Node.js インストーラ](https://nodejs.org/ja/)
5. Vagrant  
XAMPPから卒業してLAMP環境を構築できるようにしましょう
6. Docker  
Docker-Composeを学ぶと開発環境構築の時間や手間を大幅に短縮できます
7. Cloud9（AWS）  
有料ですが、AWS等を使えばWinもMacも違いはありません。
GCP,Docker,Terraform,Packerを使用した小規模MLアプリ(CLI)開発体験に関して

MLを使用した小規模なCLIアプリを開発・運用する機会がありました:yum:
時間的な制約があり、使用したことがある技術を中心に構成しました。
開発・運用の関心事と使用している技術の大まかな役割と開発体験について書きます。

# 開発したアプリ
購買データやユーザデータを加工し、学習させ、複数のユーザに対して推薦する商品を抽出するCLIアプリ

# 使用技術スタック、ツール
- GCP
    - GCE(コンテナホスト用途)
    - Stackdriver Logging
    - Stackdriver Monitoring
    - BigQuery
    - GCS
- Docker
- Packer
- Terraform
- Python 3.6
- ~~Slack~~

# 開発運用したアプリの処理概要と構成
必要データを取得、整形、学習、推論、用途に合わせた活用を行う工程があります。（下記図を参照）DNNを使用する際はコンテナとホスト(GCE)両方の専用イメージを使いました。

![configuration_manage_overview.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110482/fdeaefa0-13fa-de6d-877c-c1bd185d02fc.jpeg)


# GCEインスタンス作成 ~ 廃棄のサイクル

インスタンス作成・起動 -> startup-script(コンテナ実行 -> インスタンス停止コマンド) -> インスタンス廃棄 のサイクルで回っています。インスタンス費用を抑えるために、コンテナの実行が終わった後にホストをshatdownするコマンドを仕込みました。また、永続ディスクの費用の節約のためにもインスタンスの廃棄まで行います。前処理、学習、後処理などはインスタンス1つで実行できる負荷だったため`gcloud create instance`でインスタンス作成を行います。推論工程では100~500インスタンス程度のパワーが必要だったので、Terraformを使用しました。Terraformはデフォルトで10インスタンスずつ作成を行いますが、applayコマンドのオプションで数を増やすことができます。50台ずつを指定した際は500台のインスタンスを作成するのに10分かかりません。インスタンスの廃棄はGCPのGUIコンソールから行うのが一番速い気がしますが、Terraformは状態ファイルを持つことで、Terraformで作成したインスタンスのみを削除できる利点があります。

# ホスト(GCE)のイメージの運用フロー
![host_image運用フロー.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110482/9944a0fc-50ef-dd67-8a58-0722f605203c.jpeg)

aptによるパッケージ追加やdockerセキュリティアップデートが頻繁に発生することが予め分かっており、かつイメージをクリーンに保つため、環境設定を可能な限りシェルスクリプト化しました。スクリプト化できない設定もあったため、手動で設定を行った後に中間イメージを作成し、中間イメージを使用したインスタンスに設定のシェルスクリプトを流しました。中間イメージ作成以降の自動化にはPackerを用いました。(イメージの作成処理は待ちが多くなるので、自動化しましょう。)設定作業を繰り返さないこと、イメージがクリーンに保たれることが精神衛生の向上に繋がります。

# コンテナのイメージの運用フロー
![container_image運用フロー.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110482/af7d7032-72ed-6858-7ceb-ed1a342ce097.jpeg)

コンテナは作って壊してを繰り替えすのが一般的かと思います。
ビルド時間を短縮するために、重い設定は中間コンテナを作成する前に実施しました。

# アプリケーション実行ログの確認


Stackdriver Loggingを用いました。Stackdriver Loggingエージェントを入れると特別な設定無しでsyslogの転送が始まります。ログはStackdriver LoggingのGUIコンソールから確認することができます。ログのフィルタ機能が充実しており、特定のインスタンスのログだけに絞り込むのも簡単です。バッチの進行状況の通知としてSlackのAPIを用いていましたが、インスタンスを500台作成した際にSlackのAPIを叩き過ぎて怒られました。そこで、進捗状況の書き込みもStackdriver Loggingで行うことにしました。

# ホスト(GCE)リソースの監視とチューニング
![memory_monitaring.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110482/8cbbe0de-59e5-ba70-2a11-ac427b222564.png)
ホストのリソース(Memory Usage)監視にはStackdriver Monitoringを用いました。MemoryやCPUを使い切る、かつぎりぎりのところでMemoryOutさせないための監視とチューニングに役立ちます。Stackdriver MonitoringのコンソールGUIでリソースを確認することができます。500インタンス分のデータもレンダリングできていました。Memory、CPU、IOのグラフ描画を見ていると、問題が起きているインスタンスだけ変な描画になったりします。グラフをモニタに映していると、なんだか楽しそうだと人が寄ってきます:joy:


以上です:bow_tone1:
sass scss realtime compiler

-demo https://codepen.io/gnjo/pen/joqpNz
-api https://github.com/gnjo/sass.js/blob/master/docs/api.md
-本格的に使うなら worker版 dist/sass.js, demoはblocking

```js
//core
function caller(result){
 //console.log(result)
 let iserror=(result.message)?true:false
 document.querySelector('pre.ret').textContent=(iserror)?result.formatted:result.text
 //compiled css =>result.text
}

Sass.compile(text,caller)
```
cygwin の virtualenv 環境で resource temporarily unavailable エラーになる時の対処

cygwin で，Python の virtualenv 環境を構築して，flask をインストールしようと pip コマンドを打ったら，resource temporarily unavailable エラーになった．昔は時々このエラーを見たが，この頃はcygwin setup が rebaseall をやってくれるので起こらないはず，と思っていたのだが．
調べてみたら，stackoverflow に[詳しい回答](https://stackoverflow.com/questions/54370263/flask-app-no-longer-working-from-cygwin-when-set-to-developer-mode) があった．virtualenv がコピーしたライブラリ (や，pipがインストールしたライブラリ) にはrebaseがかかっていない，ということである．そう言われれば当たり前だ...
ということで，そこに書いてある通りにすれば解決するのだが，手順だけ下に抜き出しておく．背景まで詳しく説明されていて，回答のお手本のようにも思えるのだが，よく読まないとどれが手順だかわかりにくいので．

#####1. 対象とするライブラリのリストを作成する．
virtualenv環境のディレクトリが ${HOME}/myenv だとして，

```
find ${HOME}/myenv -name "*.dll" -o -name "*.so" > /tmp/to_rebase.txt
```

#####2. すべてのcygwinプログラムを閉じる．

サービスも含む．

#####3. rebaseall

Windows のエクスプローラで cygwin の bin フォルダを開き，dash.exe をダブルクリックして起動し，以下を実行する．

```
/bin/rebaseall -v -T /tmp/to_rebase.txt
```
以上．

最初におこった resource temporarily unavailable のエラーを貼っておく．

```
      0 [main] python3.6 831 child_info_fork::abort: address space needed by 'libpython3.6m.dll' (0x400000) is already occupied
Collecting flask
  Using cached https://files.pythonhosted.org/packages/7f/e7/08578774ed4536d3242b14dacb4696386634607af824ea997202cd0edb4b/Flask-1.0.2-py2.py3-none-any.whl
Collecting Jinja2>=2.10 (from flask)
  Using cached https://files.pythonhosted.org/packages/1d/e7/fd8b501e7a6dfe492a433deb7b9d833d39ca74916fa8bc63dd1a4947a671/Jinja2-2.10.1-py2.py3-none-any.whl
Collecting itsdangerous>=0.24 (from flask)
  Using cached https://files.pythonhosted.org/packages/76/ae/44b03b253d6fade317f32c24d100b3b35c2239807046a4c953c7b89fa49e/itsdangerous-1.1.0-py2.py3-none-any.whl
Collecting Werkzeug>=0.14 (from flask)
  Using cached https://files.pythonhosted.org/packages/18/79/84f02539cc181cdbf5ff5a41b9f52cae870b6f632767e43ba6ac70132e92/Werkzeug-0.15.2-py2.py3-none-any.whl
Collecting click>=5.1 (from flask)
  Using cached https://files.pythonhosted.org/packages/fa/37/45185cb5abbc30d7257104c434fe0b07e5a195a6847506c074527aa599ec/Click-7.0-py2.py3-none-any.whl
Collecting MarkupSafe>=0.23 (from Jinja2>=2.10->flask)
  Using cached https://files.pythonhosted.org/packages/b9/2e/64db92e53b86efccfaea71321f597fa2e1b2bd3853d8ce658568f7a13094/MarkupSafe-1.1.1.tar.gz
      0 [main] python3.6 832 child_info_fork::abort: address space needed by 'libpython3.6m.dll' (0x400000) is already occupied
    ERROR: Error [Errno 11] Resource temporarily unavailable while executing command python setup.py egg_info
ERROR: Could not install packages due to an EnvironmentError: [Errno 11] Resource temporarily unavailable
```
【PowerApps】Patch関数で新しいレコードを作成するのにDefaults関数はいらない？

Patch関数を使って新しいレコードを作成する時にDefaults関数を使いますよね。
これはＭＳの公式ドキュメントにそう書いてあるからです。下がその画像です。

[ＭＳのPatch関数の説明ページへ：](https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/functions/function-patch)
![Patch関数の説明.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403091/c903af95-6e44-9c21-138d-ff637c84c5ae.png)

```
OnSelect = Patch(Customers,Defaults(Customer),{Name:"Contos"})
```



ところが最近このページを見つけました。
[PowerApps: Replace the Defaults() function to improve performance](https://baizini-it.com/blog/index.php/2018/01/11/powerapps-replace-the-defaults-function-to-improve-performance/)

このブログを書いている方は英語圏のPowerAppsのフォーラムで一番信頼されている方です。そのページで書かれている事は上記の式だとDefaults関数とPatch関数でデータソースに二回アクセスしているのでアプリのパフォーマンスが落ちるというのです。

そこで次の下の式でも新しいレコードを作成できると書いてあります。実際にやってみて全然問題無くできました。

```
OnSelect = Patch(Customers,{ID:Blank()},{Name:"Contos"})
```

式内の「ID」はプライマリコードでと書いてありますが、既存のフィールド名ならなんでも良い感じです。実験してみて下さい。

これでデータソースへのアクセスが一回で済むから、アプリが少し速くなるし、何と言っても書くのが短くなるので自分も楽ができます。



<blockquote class="twitter-tweet" data-lang="en"><p lang="ja" dir="ltr">マイクロソフトのPowerAppsの動画を集めたプレイリストを作りました。<a href="https://t.co/JELJZcOUHb">https://t.co/JELJZcOUHb</a></p>&mdash; Mike Negami (@Econoshift) <a href="https://twitter.com/Econoshift/status/1126992363983900672?ref_src=twsrc%5Etfw">May 10, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
PostgreSQL11でサンプルデータベースを作成する

# はじめに

PostgreSQLを勉強するにあたって、サンプルデータベースを探していたのですが、PostgreSQL Tutorialで見つかりました。

 - [PostgreSQL Tutorial](http://www.postgresqltutorial.com/)

作成手順についてメモ書きです。


# サンプルデータベースを作成する。

[PostgreSQL Tutorial](http://www.postgresqltutorial.com/)のトップページ右の「Download PostgreSQL Sample Database」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179607/f08d66a2-58ea-1de4-921c-e792586ed616.png)

以下からダウンロードします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179607/9fa7ae37-80c3-8bc7-e093-c28823accb98.png)


まず、先ほどダウンロードしたzipファイルを展開します。

```
$ unzip /tmp/dvdrental.zip
```

サンプルデータベースを作成します。

```
$ psql -U postgres
psql (11.2)
Type "help" for help.

postgres=# CREATE DATABASE dvdrental;
CREATE DATABASE
```

pg_restoreツールを使って、サンプルをロードします。

```
$ pg_restore -U postgres -d dvdrental /var/lib/pgsql/dvdrental.tar
pg_restore: [archiver (db)] Error while PROCESSING TOC:
pg_restore: [archiver (db)] Error from TOC entry 6; 2615 2200 SCHEMA public postgres
pg_restore: [archiver (db)] could not execute query: ERROR:  schema "public" already exists
    Command was: CREATE SCHEMA public;



WARNING: errors ignored on restore: 1
```

いくつかエラーがでていますが、たぶん問題ないようです（？）
作成されたテーブルを確認してみます。以下のように15テーブルが作成されていることが分かります。
DVDレンタルのデータベースのようです。

```
postgres=# \c dvdrental
You are now connected to database "dvdrental" as user "postgres".
dvdrental=# \dt
             List of relations
 Schema |     Name      | Type  |  Owner   
--------+---------------+-------+----------
 public | actor         | table | postgres
 public | address       | table | postgres
 public | category      | table | postgres
 public | city          | table | postgres
 public | country       | table | postgres
 public | customer      | table | postgres
 public | film          | table | postgres
 public | film_actor    | table | postgres
 public | film_category | table | postgres
 public | inventory     | table | postgres
 public | language      | table | postgres
 public | payment       | table | postgres
 public | rental        | table | postgres
 public | staff         | table | postgres
 public | store         | table | postgres
(15 rows)
```

サンプルデータベースのER図は同じサイトの以下からダウンロードできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179607/5f9238e9-deef-f47b-c395-0d83a678a272.png)

pgAdmin toolを使ったロード方法は以下に記載があります。

- [Load PostgreSQL Sample Database by PostgreSQL Tutorial](http://www.postgresqltutorial.com/load-postgresql-sample-database/)

# 参考

- [PostgreSQL Tutorial](http://www.postgresqltutorial.com/)
【メモ】Ruby on Rails チュートリアル【再挑戦編】

# 前置き

<details>
<summary>展開する</summary>
一度railsチュートリアルに挫折したプログラミング初学者の筆者が、改めてRailsチュートリアルを進めながらまとめています。
筆者のようなプログラミング初学者の方が、今後、Railsチュートリアルを学習する上でお役に立てば幸いです。
もし「この表現は誤っている」、「理解の仕方がおかしい」などありましたらご教示いただけると幸いです。
</details>

今回は1章1.1から1.2までになります。
正直、特に見るべきところはないです。

# Railsチュートリアル1章

## 1.1
### ruby on railsについて
railsはrubyで記述されたWEB開発用のフレームワークです。
オープンソースで、制約の少ないMITライセンスで公開公開されています。
WEBアプリケーションの作成に特化したDSLがrubyで実装されています。

### 1.1.1
- 開発の基礎  
分からないならことがあれば最初にやりましょう。
でもSQLは後で大丈夫。
- Webの基本  
理解している方が進めるのは楽です。  
都度、分からないことを調べるのはそれなりに疲労します。
- はじめての開発  
WEBの基本より時間もかからないので先にやった方が楽です。  
Railsの学習だけしても、Rubyは身に付きませんし。
- Railsの基礎  
progateさんは解説が丁寧です。  
筆者は壁に体当たりしてくタイプなので途中で放りました。  
最初にスライド見ておくだけでもいいと思います。

#### 1.1.1 演習
<details>
<summary>回答があります</summary>
<div>
> Ruby on Railsで使うRuby gemはどのWebサイトにありますか？
ヒント: 分からないときはとにかくググりましょう。

https://rubygems.org/
ものによってはgithubなどで公開されるgemもある。

少し古い記事ですが、目的とするgemの探し方は[こちら](https://qiita.com/vzvu3k6k/items/5317a822f58b0a6a1d70)の記事を参考。[^1]

> 現時点でのRailsの最新バージョンはいくつですか？

2019-05-10：5.2.3
https://rubyonrails.org/のトップページにあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342226/ed51e677-62b0-c8e5-9aff-6affd8e4c8b1.png)


> Ruby on Railsはこれまでに何回ダウンロードされたでしょうか？調べてみてください。

railsはgem形式でパッケージが配布されているので、rubygems.orgで検索できます。
2019-05-10：172,201,350　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342226/ce8da7a4-7585-1123-1b60-f34bb92be6b4.png)

</div>


## 1.2
開発環境の用意を行います。
英語に自信がない人は[AWS Cloud9](https://aws.amazon.com/jp/cloud9/)を推奨します。

### 1.2.1
cloud9での環境作成時は特に設定変更せず、そのまま作成してます。
特に指定はないのでAmazonLinuxです。
作成したら接続して必要な設定をしていきます。

### 1.2.2
```ruby
ec2-user:~/environment $ printf "install: --no-document \nupdate:  --no-document\n" >> ~/.gemrc
```

RubyGemsの設定ファイル(.gemrc)への追記
追記内容は「インストール及びアップデート時にドキュメントをインストールしない」
`\n`は改行コード  

```ruby
ec2-user:~/environment $ gem install rails -v 5.1.6
```

※チュートリアルではバージョン 5.1.6を使用するため、バージョンを指定してインストールしています。

次の記事へ

[^1]: 過去に調べたgemとbundlerの記事:[【メモ】gemとbundler](https://qiita.com/t_shibuki/items/2236dec6c38a23fb6231)
[^2]: 古いバージョンを利用する場合も同様です。
plotly Dashをインストールする

# はじめに
この記事はMac OSX High Sierraにインストールした Python3.6.8（venv）での内容です。
インストール対象の plotly Dashのバージョンは 0.42.0 です。

plotly Dash の紹介記事をぐぐると古いバージョンの記事がよく出てきますが、現在のバージョン 0.42.0 ではインストール方法が違ってきますので紹介します。

0.37.0 以降のバージョンの Dash では、dash-renderer, dash-core-components, dash-html-components, dash-table は自動的にインストールされるため、それぞれインストールする必要はありません。

# インストール手順

```
pip install dash==0.42.0
pip install dash-daq==0.1.0
```

ここでインストールしている dash-daq はデータ収集やコントロールを Dash に簡単に統合できるようにするコントロールセットです。
※ plotly がインストールされていなくても、ここで一緒にインストールしてくれます。

# サンプルを実行

```python:dash-app.py
# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
            ],
            'layout': {
                'title': 'Dash Data Visualization'
            }
        }
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)
```

このサンプルを Terminal から実行します。

```
$ python dash-app.py 
Running on http://127.0.0.1:8050/
Debugger PIN: 612-464-482
 * Serving Flask app "dash-app" (lazy loading)
 * Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
 * Debug mode: on
Running on http://127.0.0.1:8050/
Debugger PIN: 500-302-361
```

WARNING が出ていますが、開発環境を運用環境で使用しないでください。という意味なので気にしないでください。

この状態で http://127.0.0.1:8050 にアクセスします。
![スクリーンショット 2019-05-11 07.02.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356164/c4e87f4f-b0c4-a38c-22e3-aac9652d2501.png)
こういう画面が表示されれば成功です。
実際にグラフも動かしたりできますので色々と試してみてください。

# 参考サイト
https://dash.plot.ly/installation
https://dash.plot.ly/getting-started
PythonのData model(データモデル)のThe standard type hierarchy(標準型の階層)

#目的
(「シーケンス」の位置づけがよくわからなかったので）
以下のPythonのリファレンスに記載されているData model(データモデル)の標準型の階層を表にする。

　https://docs.python.org/3/reference/datamodel.html
　https://docs.python.org/ja/3/reference/datamodel.html

#The standard type hierarchy(標準型の階層)

| |||
|:---|:---|:---|
|numbers.Number<br>|
||numbers.Integral<br>整数|
|||Integers (int)<br>整数|
|||Booleans (bool)<br>ブール値|
||numbers.Real (float)<br>実数|
||numbers.Complex (complex)<br>|
|Sequences<br>シーケンス型|
||Immutable sequences<br>変更不能なシーケンス|
|||Strings<br>文字列型|
|||Tuples<br>タプル型|
|||Bytes<br>|
||Mutable sequences<br>変更可能なシーケンス型|
|||Lists<br>リスト型|
|||Byte Arrays<br>バイト配列|
|Set types<br>集合型|
||Sets<br>集合型|
||Frozen sets<br>|
|Mappings<br>マッピング型|
||Dictionaries<br>辞書型|

#雑談
上記のnumbers.Integralのintegralが整数（整数の）という意味があることを知りませんでした。

#関連(本人）
[英語と日本語、両方使ってPythonを丁寧に学ぶ。](https://qiita.com/enoughspacefor/items/d4b49747773e2d0285f9)
Windows Chrome で見える L SEP とは？

株式会社オズビジョンのユッコ (@terra_yucco) です。

# きょうのネタ

某社から受信したセミナーの案内メールに謎の文字が見えた。

## 謎の文字

L SEP
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95030/48e84d09-60ac-d930-e3df-2434a08f6668.png)

## 実メール

あちこち伏せてますが、あちこちに L SEP が登場しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95030/54986c5c-468e-1089-67d6-54cd1be935de.png)

## これは何なのか？

調べてみたところ、改行コードの一種。

## 改行コードのいろいろな種類

LF, CRLF, CR くらいしか知らなかったのですが、歴史的なことも含めるとかなりいろいろなパターンがあったようです。
愛用のサクラエディタでもそのあたりの入力ができたようで二度衝撃。

### [入力改行コード指定](https://sakura-editor.github.io/help/HLP000285.html)

以下の表は上記リンク先から引用して整形したものです。

|種類|説明|表記|
|:--|:--|:--|
|CRLF|Windows/DOS で一般的な改行コード|`U+000D U+000A`, `\r\n`|
|LF (Line Feed)|Unix/Linux で一般的な改行コード|`U+000A`, `\n`|
|CR (Carriage Return)|旧 MacOS で一般的な改行コード|`U+000D`, `\r`|
|NEL (Next Line)|Unicode の Next Line|`U+0085`|
|LS (Line Separator)|Unicode の行区切り文字|`U+2028`|
|PS (Paragraph Separator)|Unicode の段落区切り文字|`U+2029`|

### [改行コードについて](https://sakura-editor.github.io/help/HLP000149.html)

>取り扱える改行コード
CR00LF00	( 0d 00 0a 00 )	廃止しました。(sakura:1.3.4.1)
LFCR	( 0a 0d )	廃止しました。(sakura:2.0.0.0)

(Д) ゜゜
世の中は広いです。

### [共通設定 『編集』プロパティ](https://sakura-editor.github.io/help/HLP000144.html)

この設定をすることで、サクラエディタでも簡単に各種特殊改行コードで遊べそうだったので、やってみました。

画像は上記ページから拝借しています。
その他 > 改行コード NEL, PS, LS を有効にする (O) にチェック。
![image](https://sakura-editor.github.io/help/images/ComEdit.png)

この設定をすると、下部ステータスバーを右クリックしたときに選べる選択肢が以下のように増えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95030/d5e6e34d-b145-2f00-6c4a-60a0440e0dde.png)

## いろいろな改行コードを表示させてみる
### 環境など

- Windows 10 Home
- Google Chrome 74.0.3729.131 (Official Build) (64 bit)

### CRLF, LF, CR

どれも無難に解釈してくれて特に面白いことはなかったです。

### LS

冒頭の L SEP が再現されました。なお、この四角のことを豆腐 (Tofu) って言うそうです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95030/31121485-8d6e-5132-1999-dc183fe5c4d2.png)

### PS

Tofu が P SEP になりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95030/1e4ab9b9-034a-50f7-6f45-9c71255c5a31.png)

### NEL

Chrome にサジを投げられたのか、文字の入らない Tofu になりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95030/cc49fd1c-0ab4-7108-bd8f-462651f7403f.png)

## Tofu を防ぐには

上記の結果から考えるに、きっかけのセミナーメールを書いた方は、何らかで LS が入力されるツールを使っていたのだろうと思います。
(その割には入っていた場所と入っていない場所があったりしたのが謎)

例えばメール送信ツールに以下のようなコードが噛まされていたら、きっとみんな幸せになったんだろうな、という話。

```php:入力ファイルから特殊改行コードを除去
<?php

if ($argc < 2) {
    return;
}

$text = file_get_contents($argv[1]);
$hex = bin2hex($text);
$target = [
    'e280a8', // LS
    'e280a9', // PS
    'c285',   // NEL
];
file_put_contents(
    $argv[1] . '.removed',
    hex2bin(str_replace($target, '', $hex))
);
```

※一度 16 進数文字列に変換して置換し、再度戻すという力技なので、もっといい方法があるよ、というコメントお待ちしております！
Craft CMS で リダイレクトを管理する

プラグインを使って管理画面で管理する方法としては以下のプラグインがある様子。

> rkingon/Craft-Plugin--Redirect-Manager
https://github.com/rkingon/Craft-Plugin--Redirect-Manager

か

> Dolphiq/craft3-plugin-redirect: Craft 3 redirect plugin provides an easy way to enter and maintain 301 and 302 redirects and 404 pages. The plugin provides a clear user interface for admin and non-admin users.
https://github.com/Dolphiq/craft3-plugin-redirect

がつかえそう。

前者は正規表現がかける様子。

最近もアップデートがあるようなのは後者。

どちらかを近いうちに試してみる。
[Wails] GoとHTML/CSS/JavaScriptでデスクトップアプリを開発するためのフレームワーク

## Wails
### https://wails.app/
>A framework for building desktop applications using Go & Web Technologies.

- バックエンドはGo、フロントエンドはHTML/CSS/JS
  - JSとGoの関数/メソッドがバインディングされている
      - promiseとしてコールするらしい
- Mac、Linux、Windowsをサポート(Windowsはバグがありこの[PR] (https://github.com/wailsapp/wails/pull/82)が必要みたい)
  - レンダリングエンジンは組み込みブラウザではなくネイティブ
     - これを使っているみたい https://github.com/zserge/webview
          - Tiny cross-platform webview library for C/C++/Golang. Uses WebKit (Gtk/Cocoa) and MSHTML (Windows)


## インストール、初期設定
```bash
$ go get github.com/wailsapp/wails/cmd/wails
$ wails setup
```
goの環境構築は出来ている前提です
go 1.12以上が推奨みたいです

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

```bash
$ wails init my-app
```

## ビルド、起動

```bash
$ cd my-app
$ wails build
$ ./my-project
```
これだけでデスクトップアプリが起動しました
圧倒的に立ち上げが早いですね

## ディレクトリ中身
```bash
$ ls 
frontend/  go.mod  go.sum  main.go  my-project*  project.json

$ ls frontend 
babel.config.js  node_modules/  package.json.md5   README.md  vue.config.js
dist/            package.json   package-lock.json  src/

$ ls frontend/src
App.vue  assets/  components/  main.js  wailsbridge.js
```
wails initではfrontendはVueになるようですが恐らくvue以外で書き換えても動かせると思います

## Electronとの違い
- ネイティブレンダリング
- 軽量
- 現時点ではGUIメニューがない

## その他
- Webview on RailsからWrailsと名付けられたらしい
- [awesome-go](https://awesome-go.com/#gui)に追加された
- 現時点ではクロスコンパイルができない (Linux環境でWindows用バイナリを作ったりできない)
  - v1.0の[ロードマップ](https://wails.app/project_status.html#roadmap)には入っているみたい
- GoでちょっとしたGUIツールを簡単に作れそうですね
- 暫く追っかけてみたいと思います
dockerfileでjupyterのpythonバージョンを指定する

## はじめに
はじめて記事を書くので見にくくても許してくださいまし．．．
## dockerとjupyterlabとpython
最近docker勉強し始めて，docker上でjupyterlab走らせるありがたみを感じていた．
だが問題発生．
俺が大好きなtensorflow 1.12がインストールできねぇ．

原因は，最新のjupyterが配布しているdockerイメージでのpython3のバージョンが3.7だから．
（tensorflow1.13使えばいいじゃんっていうツッコミは受け付けない．だって，研究室のGPUサーバーまだアプデしてないんだもん．環境揃えたいじゃん）

そこで，python3.6.8をインストールしたいんだけどいろいろハマったのでメモっとく．

## anacondaを利用する
当たり前だけどjupyter使ってるから当然イメージの中に最初からanacondaが入っている．
そこでDockerfile上でanacondaのpython3.6.8の環境を作ってあげて，こいつをjupyterのカーネルに追加する．

文章で書くのめんどくさくなったのでDockerfile晒す．（最初からそうしろ）

Dockerfileはこんな感じ

```DockerFile
# jupyterのイメージ
FROM jupyter/base-notebook

LABEL Obaka Engineer

#bashを使う（なくてもよかったかも）
SHELL ["/bin/bash", "-c"]

# python3.6.8のインストール（-nのところは名前なのでpy368とかでもいい）
# python=のところでバージョンを指定してあげる
RUN conda create -n python3.6.8 python=3.6.8 anaconda
# このあとpipとかipythonとか使うんだけど，そのままだとデフォの環境パス使われるので注意
ENV pip /opt/conda/envs/python3.6.8/bin/pip
ENV ipython /opt/conda/envs/python3.6.8/bin/ipython
ENV jupyter /opt/conda/envs/python3.6.8/bin/jupyter

# name, display-nameはconda createで作成したときの名前（今回はpython3.6.8っていう名前)
RUN $ipython kernel install --user --name=python3.6.8 --display-name=python3.6.8
RUN $pip install environment_kernels
# この環境でのjupyter設定ファイルの作成（途中でなんか聞かれるのクリアするために，Yを渡しておく）
RUN echo "y" | $jupyter notebook --generate-config
# jupyterのデフォルトカーネルに作ったイメージを入れる
RUN echo "c.MultiKernelManager.default_kernel_name = python3.6.8" > ~/.jupyter/jupyter_notebook_config.py
```

これをbuildしてブラウザからjupyterを立ち上げる．
dockerでのポートの設定とかは他の人の記事を参考にしてくださいまし．
ちなみに僕はdocker-composeでやってます．


コンソールを開くと，デフォルトのpython3の他に，先程設定した名前のpython3.6.8が入っている（はずです．）
![Screenshot from 2019-05-11 03-37-33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407322/db786aba-c6f3-b54c-3b1e-ab1c2bce025e.png)

気が向いたら，docker-composeを使ったjupyterで一回設定したテーマを再ビルドしても初期化されないように維持するための方法を書きたいと思います．
SORACOM LTE-M Button for EnterpriseからAWS Lambdaを叩くまでの備忘録

SORACOM LTE-M Button for Enterpriseを使って(SORACOM)Beam->(AWS)API Gateway -> (AWS)Lambdaの順で叩いてデータ取得する方法まとめ

# 忙しい人向け箇条書き
## SORACOMのユーザーコンソールでやること
 1. 注文履歴から受け取り確認をする
 2. SIMグループを作る
 3. SIMグループにボタンを登録する
 4. SIMグループの設定を行う
 5. SIMグループにBeamの設定をする

## AWS側でやること
 6. API Gatewayに新しいAPIを作成する
 7. Lambdaで新しい関数を作る
 8. API GatewayのAPIにPOSTメソッドを実装してデプロイする
 9. ボタンを押してCloudWatchとかでリクエストを確認する


#詳しい手順

## 1. 注文履歴から受け取り確認をする
SORACOMのユーザーコンソールの「発注」あたりの画面から受け取り確認をするとボタンがユーザーに紐付けられて「SIM一覧」に載る

## 2. SIMグループを作る
BeamあるいはHarvestを使うためにSIMグループを新たに作成する

## 3. SIMグループにボタンを登録する
前項で作ったSIMグループにSIM一覧に列挙されたボタンのうち使うものを登録する

## 4. SIMグループの設定を行う
「SORACOM Air for Cellular 設定」でバイナリパーサー機能をONしてフォーマットに「@button」と記入して保存する
![Clipboard02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310137/ff866377-4d84-a8c5-6be9-6d75d7537464.png)



## 5. Beamの設定を行う．
SORACOM Beam は *UDP → HTTP/HTTPS エンドポイント* を指定した後，転送先の設定に後述するAWS API GatewayでデプロイしたAPIのホスト名およびパスを入力する．また，転送先におけるプロトコルは *HTTPS* を指定する

## 6. API Gatewayに新しいAPIを作成する
[このあたり](https://qiita.com/yuheiKiyota/items/ad946ff10e1b6d0012a2)とか[このあたり](https://qiita.com/Yuki_BB3/items/534db527f17cef0c0219)を見てPOSTメソッドを実装していく

## 7. Lambdaで新しい関数を作る
やりたい処理をごにょごにょ書く

## 8. API GatewayのAPIにPOSTメソッドを実装してデプロイする
POSTメソッドを作ってLambdaを叩くよう設定する．
当該APIの「ステージ」からPOSTメソッドを選択して呼び出し先URLを調べる．この呼び出し先URLがSORACOM Beamでの宛先になる

## 9. ボタンを押してCloudWatchとかでリクエストを確認する
ボタン押下後に，橙点滅→橙点灯→緑点灯→消灯と遷移すれば成功
消灯前に赤点灯となった場合はどこか間違ってる
Cakephpでid(auto_increment)を指定してInsert

ネットにあまり情報が無かったので残しておきます。PHP5.3のCakephp2.10.6という古い環境ですが、恐らく、Cakephp3.xも同じかと思います(試してません)。
テーブルので主キーの物理名はidでauto_incrementになっていることを想定しています。

# idを指定して登録する

```php5
public $uses = array("ModelName");

public function index() {
    $data = array();
    $data['ModelName']['id'] = 100;

    $this->ModelName->create();
    $this->ModelName->save($data);
}
```

単純にidに未登録の値をセットしてsaveメソッドで登録すればそのidでInsertされます。
createメソッドは必要なのかちょっと不明です。無くても登録されますが、ネットの情報だとやっておいたほうがいいとのこと。

saveメソッドでinsertかupdateかの判定は、モデルの主キー(id)がセットされている場合、その主キーで1回検索を行って取得できるかどうかで行っています(Model.phpのexistsメソッド)。ですので、未登録のidならそのままInsertされます。

```php5:Model.php
2894	public function exists($id = null) {
2895		if ($id === null) {
2896			$id = $this->getID();
2897		}
2898		if ($id === false) {
2899			return false;
2900		}
2901		if ($this->useTable === false) {
2902			return false;
2903		}
2904		return (bool)$this->find('count', array(
2905			'conditions' => array(
2906				$this->alias . '.' . $this->primaryKey => $id
2907			),
2908			'recursive' => -1,
2909			'callbacks' => false
2910		));
2911	}
```

[CakePHP: Insert record with specific id][0]
[0]:https://stackoverflow.com/questions/12563660/cakephp-insert-record-with-specific-id
OpenCVの動画保存ライブラリについて

# 目的
画像を集めて動画を作成する機会があったので、備忘録がてらに記載

### 参考
[OpenCV Documentation](http://labs.eecs.tottori-u.ac.jp/sd/Member/oyamada/OpenCV/html/py_tutorials/py_gui/py_video_display/py_video_display.html)


# ソースコード
## メイン処理
```python
fourcc = cv2.VideoWriter_fourcc('m','p','4','v')
video = cv2.VideoWriter('out.mp4', fourcc, 29.97, (width, height))
```

fourccとは、動画のコーデックを指定するための4バイトのコード。
videoは動画保存のためのVideoWriter型のオブジェクト。

```python
video.write(img)
video.release()
```

write()は動画に画像を追加する処理、imgは画像ファイル
最後にrelease()でout.mp4を出力。

## 一連処理
```python
import cv2

def main():
    dir_path = "./movie"
    fourcc = cv2.VideoWriter_fourcc('m','p','4','v') 
    i = 1
    for _file in os.listdir(dir_path):
        frame_path = os.path.join(dir_path, _file)
        print(frame_path)
        
        img = cv2.imread(frame_path)
        height, width, _ = img.shape
        print(height, width)
        img = cv2.resize(img, (height,width))
        if i == 1:
            video = cv2.VideoWriter('out.mp4', fourcc, 29.97, (width, height))

        video.write(img)
        sys.stdout.write('\rNow frame {} / {}'. format(i, len(os.listdir(dir_path))))
        i = i+1

    video.release()


if __name__ == "__main__":
    main()
```

以下のgifは、ニューラルネットワークの中間データを画像に保存して、それを動画に変換したものです。
![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270423/f6a33ce2-ec28-7750-6149-3dfa088f2abe.gif)

ちなみに、動画から画像に変換する際は、[こちらの記事](https://qiita.com/matoken/items/664e7a7e8f31e8a46a60)とかわかりやすかったです！！
僕たちのSoundflowerをMacにインストールできない

僕はずっとこれを恐れていたので、古いバージョンのdmgを保管してました。
ネットで検索してもどれが正式なものかわかりにくかったし、ネットから消えたら
死んでしまうのではないかと思っていたので・・・。

エラーが発生してインストールできなかった環境: 
macOS Mojave 10.14.3

インストールできた旧式のSoundflower:
1.6.6b.dmg

以前はCycling74のサイトからダウンロードしてましたけど、
最近はGitHubからダウンロードする感じで、開発してる人達ほんとありがとう！という想いです。

https://github.com/mattingalls/Soundflower/releases

でもねぇ、インストールできないという事例が結構あるようです。
「shiftを押しながら再起動してsafeboot」で解決するという方法も
試しましたが、自分の場合はインストール完了せず、エラーとなりました。

自分もいっぱしのデベロッパーとして、なんとか貢献していきたいという気持ちを
ここに書き記して寝ます。
Firebase Analyticsのリアルタイムデバッグ方法(iOS)

# はじめに
iOSやAndroidアプリの利用状況把握のツールとして、Firebase　Analyticsがあります。導入方法は、[以前の記事](https://qiita.com/KenNagami/items/1052ad2b50c3ddfc41f6)で書きましたが、この方法のような通常の利用だと、[Firebaseの公式ページ](https://firebase.google.com/docs/analytics/debugview)によるとアプリによってロギングされるイベントは、約１時間の周期でバッチ処理され、まとめてアップロードされます。

通常は、これで十分です。しかし、デバッグ時には、1時間待たないと結果が出ないのは、効率的ではありません。この記事では、デバッグ時に有効なログの出し方を書いていきます。

# アプリコンソールにログを出す方法

Xcodeのコンソールに、Firebase Analyticsのログをリアルタイムに出力する方法です。`-FIRAnalyticsDebugEnabled`を追加してアプリを起動すると、Firebase Analyticsのログがリアルタイムで出力されます。

具体的には、以下の手順で設定します。

1. Xcode で [Product] > [Scheme] > [Edit scheme] の順に選択します。
2. 左側のメニューから [Run] を選択します。
3. [Arguments] タブを選択します。
4. [Arguments Passed On Launch] セクションで +ボタンを押して `-FIRAnalyticsDebugEnabled` を追加します。

画面イメージは、以下です。

<img width="400" alt="20190510-firebase-analytics-debug1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404406/73740569-ad63-4cb7-019a-6f2879dfee43.png">


上記の設定を入れてアプリを起動すると、Xcodeのコンソールに以下のようなログがリアルタイムで出力されます。Xcodeのコンソールを見れば、どんな情報がFirebaseに送信されているかがわかります。

```
2019-05-10 16:29:14.433227+0900 firebase-test[26326:1786556] 6.0.0 - [Firebase/Analytics][I-ACS023105] Event is not subject to real-time event count daily limit. Marking an event as real-time. Event name, parameters: screen_view (_vs), {
    firebase_debug (_dbg) = 1;
    firebase_event_origin (_o) = auto;
    firebase_previous_id (_pi) = -623853840462668681;
    firebase_screen_class (_sc) = View3Controller;
    ga_previous_class (_pc) = View2Controller;
    ga_realtime (_r) = 1;
    ga_screen_id (_si) = -623853840462668680;
}
```
# Firebaseコンソールにログを出す方法

FirebaseコンソールのDebugViewにリアルタイムにログを出す方法です。まず、アプリの設定として、`-FIRDebugEnabled`を追加します。リアルタイムログを無効にする場合は、`-FIRDebugDisabled`を追加します。それぞれを追加する場所は、前節と同様です。チェックボックスをON/OFFすることで、有効/無効を切り替えられます。

画面イメージは、以下です。

<img width="400" alt="20190510-firebase-analytics-debug2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404406/95f49c0a-4aae-337d-e2f7-4e392f577d35.png">



この設定を入れてアプリを起動すると、Firebase コンソールのDebugViewに以下のようなログが約10秒程度待つと表示されます。この画面をクリックすれば、どのような情報が収集できているかの確認ができます。

<img width="1200" alt="firebaseDebugView.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404406/9914a89b-ffc9-0479-0fd2-81a99d48c49e.png">



# 参考文献

- [Xcodeコンソールにイベントログを出す方法(公式)](https://firebase.google.com/docs/analytics/ios/start)
- [Firebaseコンソールにイベントログを出す方法(公式)](https://firebase.google.com/docs/analytics/debugview)
秀丸で特定の文字より前を抜き出す。

秀丸で特定の文字より前を抜き出したい時、または
特定の文字より後を抜き出したい時は簡単な正規表現を使うのが便利。

「hello」より後を抜き出す時
(?<=hello)(.*)

「hello」より前を抜き出す時
(.*)(?=hello)

秀丸を使いこなすと作業効率が上がると思います。
SwiftによるルールベースエンジンURLポインタ集

# はじめに
Swiftで使えるルールベースエンジンを紹介する。

# 前向き推論
[Rules](https://github.com/JimRoepcke/Rules)

# 後向き推論
[LogicKit](https://github.com/kyouko-taiga/LogicKit) : Prologにインスパイアされたルールベースエンジン

# ゲームエンジン系
[GKRuleSystem](https://developer.apple.com/library/archive/documentation/General/Conceptual/GameplayKit_Guide/RuleSystems.html#//apple_ref/doc/uid/TP40015172-CH10)
GKPlayKitに含まれているルールエンジン。ゲーム以外の応用については知らん。

# UIレイアウトの制約解消(Autolayout)

[inamiy/Cassowary](https://github.com/inamiy/Cassowary)
[CassowarySwift](https://github.com/tribalworldwidelondon/CassowarySwift)
[nangege/Cassowary](https://github.com/nangege/Cassowary)
Haml記法とは

Railsでチャットアプリを作成する過程で、
View画面を実装する際に「Haml記法」を学びました!
備忘録としてまとめておきます。

## Haml記法
「HTML avstraction markup langage」の略。
直訳すると「HTMLを抽象化したマークアップ言語」。
HTML/XMLを生成する為のマークアップ言語で、
**より短いコードで綺麗に簡潔に**コードを書くことができる記法。

## 記述方法
### %タグ名 → <開始タグ><閉じタグ>
Hamlでは、「%タグ名」と記載するだけで、開始タグと閉じタグに変換してくれる。
インデントを忘れないように！

```index.html.haml
%html
 %body
  %div
   Hello World!
```
↓HTMLに変換されるとこうなる

```index.html
<html>
 <body>
  <div>
   Hello World!
  </div>
 </body>
</html>
```
###属性は{}で
属性があるタグは、
%タグ名{属性:'属性値'}　もしくは
%タグ名{:属性=>'属性値'}　と記述する。

```index.html.haml
%html
 %body
  %a{ href: 'http://qiita.com' }
   こっちはRubyのhash指定に依存している
  %a{ :href => 'htpp://qiita.com'}
　　こっちが一般的なのかな？
```
↓HTMLに変換されるとこうなる

```index.html
<html>
 <body>
  <a href='http://qiita.com'>こっちはRubyのhash指定に依存している</a>
  <a href='http://qiita.com'>こっちが一般的かな？</a>
 </body>
</html>
```
###　「.」はclass属性、「#」はid属性
よく使うclass属性とid属性は、「.」と「#」で表現できる

```index.html.haml
%html
 %body
  %div.contemt#content1
   .はclassで#はid
```
↓HTMLに変換されるとこうなる

```index.html
<html>
 <body>
  <div class="content" id="content1">
   .はclassで#はid
  </div>
```
そして、実は**divタグの場合は%を省略**できてしまう！

```index.html.haml
.content#content1
 .はclassで#はid
```
↓HTMLに変換されると

```index.html
<div class="content" id-"content1">
 .はclassで#はid
</div>
```


以上、Haml記法の簡単なまとめでした！
HTMLがこんなに簡単にかけてしまうなんて。。とても便利ですね！！
Halmをもっと簡単にしたSlimというマークアップ言語もあるみたいなので、
また後日調べてみようと思います！

##参考サイト
[RailsにおけるHaml記法について調べてみた | WEB-LOG](https://ty-engineer.com/ruby-on-rails/rails-haml/)
[決定版!!Haml小技まとめ！！ - Qiita](https://qiita.com/yukimura1227/items/a1cbf65ac9abd4d138e1)
自作JSの読み込みはbodyの最後に書いたほうがいいのに、なんで外部ライブラリはheadにあるんでしょうか？

# 調べるキッカケ

最近フロントエンドを触り出して、JQueryの勉強（初歩中の初歩）をしていたのですが、
「JSの読み込みはbodyの最後に」という決め事があるようで、ちょっと気持ち悪いので調べていました。

すこしググると見解として、
>HTML中にJavaScriptファイルを読み込む記述があると、そのJavaScriptを読み終わるまで、ウェブページのレンダリング(描画)が止まってしまうからです。
https://allabout.co.jp/gm/gc/380498/2/

などと記載されていて、なるほどと思ったのですが、

Qiitaのページも含め、ざっと確認したページではJSライブラリはすべてheadに書かれており、
<img width="1440" alt="スクリーンショット 2019-05-10 23.17.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363295/191ed926-7329-d234-5f3c-e127f4d6fbfb.png">

なぜ**「はじめからJSを全部bodyの最後に置かないんだろう？」**と思い、調べてみました。

# 結論

bodyの最後になんて書かず、`defer`オプションを使おう。

# 経緯

レンダリングが遅くなってしまう件について、
Googleさんの公式ページに見解が載っていました。
>jQuery などの JavaScript ライブラリを使用している場合はどうすればよいですか？
JQuery など多くの JavaScript ライブラリは、インタラクティブ性やアニメーションなどの効果を付加してページの魅力を高めるために使用されています。ただし、こうした動作の多くは、スクロールせずに見える範囲のコンテンツが表示された後に追加しても差し支えありません。そうした JavaScript を非同期にする、または読み込みを遅らせることを検討してください。
https://developers.google.com/speed/docs/insights/BlockingJS?hl=ja

要約すると以下になります。

* JavaScript を非同期にする
* スクロールせずに見える範囲のコンテンツが表示された後（≒bodyの最後）に読み込む

なるほど。たしかにJavaScript を非同期にするために、
Qiitaのページでは`async`オプションを使ってました。

例）
```<script src="https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019043001.js" async=""></script>```

また、いろいろ調べていると、`defer`オプションというものを使って、HTMLレンダリング後に読み込みを実施しているようでした。

例）
```<script src="https://cdn.qiita.com/assets/public/bundle-d8e605d584dac63090b5a3f765cc8dbf.min.js" defer="defer"></script>```

要するに、**JSをbodyの最後に書かなくても、`defer`オプションを追加すると、HTMLのパースが完了したあとにJSを実行してくれる**らしいです。

>`async`
これは論理属性で、可能であればスクリプトを非同期で読み込むべきであることを示します。
`defer`
この論理属性は、スクリプトを文書の解析完了後かつ DOMContentLoaded が発生する前に実行することをブラウザーに示します。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Script#Attributes

　
なので、実際にライブラリを置くなら、

* とりあえず全部headに置いて、
* Google Analyticsなど処理負荷が大きそうなものはasyncで、
* 自作のJSは内部処理に応じてインラインにしたり、`defer`オプションにして分散する

がよさそうです。

# 補足

### `defer`オプションについて
ブラウザによっては`defer`オプションが効かないようです。
これが、このオプションがまだ一般的なものとして普及していない理由かもしれません。
（まあ古いブラウザなら遅くても我慢するような人間が使っている気もしますが。。）
<img width="1033" alt="名称未設定2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363295/faa2c4d2-5a2c-e255-4f22-61a957210112.png">
※引用：https://developer.mozilla.org/ja/docs/Web/HTML/Element/Script#Browser_compatibility (20190510時点)

Chromeのバグで、
XHTML形式のページだと効かないこともあるようです。
>補足 Chrome does not defer scripts with the defer attribute when the page is served as XHTML (application/xhtml+xml) 
https://bugs.chromium.org/p/chromium/issues/detail?id=874749
https://bugs.chromium.org/p/chromium/issues/detail?id=611136

　
また、`defer`オプションは、JSの「実行」のみを遅らせるため「ダウンロード」時間はHTMLパースに影響を与えます。
（とはいえ、ダウンロード自体は非同期処理であり、headの段階で読み込んでくれるため、bodyの最後に配置するより全体的な速度は速くなるはずです。）

もしHTMLの表示速度が遅く、JSのファイルサイズが大きい場合は、（自作JSに限らず外部ライブラリも含め）bodyの最後に配置し、ダウンロードの影響をなくす検証をしてみます。

### HTMLのパース後にJSを読み込むことが正とも限らない

もし**スクロールをしないとコンテンツが出現しないようなサイト**を構築する場合には、一度確認してみる必要がありそうです。

>追記：JavaScriptの読み込み位置をページ最後にしない方がよい場合
スクロールをしないとコンテンツが出現しないようなサイトの作りの場合にJavaScriptをページ最後で読み込むようにすると、JavaScriptの読み込みが終わるまで、下のコンテンツへ勧めなくなってしまう
https://memocarilog.info/jquery/5842
MacBook Pro (17-inch, Early 2011)にUbuntu 18.04 LTSをインストールする

# 方法
- Disk UtilityでMS-DOSでUbuntu用のパーティションを作る
- インストール中のUbuntuのDisk Utility？でそのパーティションをファイルシステムExt4、フォーマットあり、マウントする場所 /で作成
- EFI (Sartup Manager) 用のアイコンをコピー

# メモ
- 左コマンドがSuperキー？になってる
- 左コマンド + スペースで入力切り替え
- Caps lockとCtrl入れ替えてある

# インストール後
- ソフトウェアアップデート https://usado.jp/spdsk/2018/05/14/post-3708/
- 日本語入力できるようにする(今後調査) https://linuxfan.info/ubuntu-18-04-japanese-input
- コピペできるようにする 今後調査
- 色々 https://linuxfan.info/ubuntu-18-04-basic-settings
- （commandでコピーできるようにする） https://blog.hatappi.me/entry/2017/07/24/090852

# IntelのCPUの一体型のGPUだけ使うようにする（このMBPのdGPUはハンダクラックが起きるため）
[これ](http://www.dcc-jpl.com/diary/2017/12/02/macbookpro-gpu/)のNVRAMのだけで良さそう

参考 https://apple.stackexchange.com/questions/168167/can-i-use-linux-in-a-2011-macbook-pro-with-a-defective-discrete-gpu

UbuntuでどのGPUが使用されているかの確認方法
[これ](https://www.linuxbabe.com/desktop-linux/switch-intel-nvidia-graphics-card-ubuntu)のようにSystem Settings > Detailsで確認


# 参考
http://okilt-memo.seesaa.net/article/414547001.html
https://kledgeb.blogspot.com/2018/04/ubuntu-1804-uefi-2-uefipcubuntu-1804.html?m=1
https://apple.stackexchange.com/questions/168167/can-i-use-linux-in-a-2011-macbook-pro-with-a-defective-discrete-gpu
https://qiita.com/hidehiro98/items/c7b029cd611a1ef37b1a
非同期処理をするsetTimeout関数を使って、コマンド引数から受け取った配列の要素を、一定時間ごとにコンソールに表示する関数を作る

# 非同期処理で動く関数setTimeoutでハマり

特に使用場面があったわけではないのですが、記事タイトルの仕様をサクッと実装しようとしたらNode.js初心者的にはまったので自分用にメモ。

```js

let index = 2; // process.argvが受け取る配列のうち、最初の二つは「node」と、「index.js」なので、3つ目から始める

function printByOneSecond(array) {　// 受け取った配列の各要素を、１秒ごとにコンソールに表示する関数
    setTimeout(() =>{ // setTimeout(param1: 関数, param2: タイムアウトする時間)
        console.log(array[index]);
        index++;
        if (index < array.length) {
            printByOneSecond(array)
        }
    }, 1000);
}

printByOneSecond(process.argv);

```

#実行結果
![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317324/f74b91bc-f5b8-8a99-a1ee-bc0f257fb832.gif)
卓上CNCﾌﾗｲｽｷｯﾄ1610の購入から動作確認まで参考にしたｻｲﾄ一覧

ﾊﾟｿｺﾝのCNC用ﾌﾞｯｸﾏｰｸを削除したいため,忘備録を兼ねて記録を残す.
投稿者ｽﾍﾟｯｸ：3Dﾌﾟﾘﾝﾀｷｯﾄ([amazon - ALUNAR-M508]
(https://www.amazon.co.jp/ALUNAR-M508-%E3%80%90%E5%B7%A5%E5%A0%B4%E7%9B%B4%E8%B2%A9%E3%80%913D%E3%83%97%E3%83%AA%E3%83%B3%E3%82%BF%E3%83%BC%E3%82%AD%E3%83%83%E3%83%88-0-3mm%E3%83%8E%E3%82%BA%E3%83%AB-3%EF%BC%A4%E9%80%A0%E5%BD%A2%E3%82%B5%E3%82%A4%E3%82%BA7200cm%C2%B3-PLA%E3%83%95%E3%82%A3%E3%83%A9%E3%83%A1%E3%83%B3%E3%83%88%E3%80%81%E7%B5%84%E7%AB%8B%E3%83%93%E3%83%87%E3%82%AASD%E3%82%AB%E3%83%BC%E3%83%89%E3%81%8C%E4%BB%98%E5%B1%9E/dp/B01JZ4GSGG))を組み立てた事はある.知識ないマン.
PC環境：windows7
卓上CNCﾌﾗｲｽｷｯﾄ：[amazon - cnc1610 (￥19,550)](https://www.amazon.co.jp/gp/product/B075K92SKG/ref=ppx_yo_dt_b_asin_title_o00_s00?ie=UTF8&psc=1)

CNCの基板にはﾏｲｺﾝとしてarduinoのｺﾝﾊﾟﾁが使われており,ﾌｧｰﾑｳｪｱとしてgrbl0.9がｲﾝｽﾄｰﾙされている(基板上のｼﾙｸでもgrbl0.9と書かれている).

# 1.組み立て
↓組み立て"のみ"を参考にした動画
[youtube - CNC 3 Axis Engraver Machine - Complete Assembly and First Print!](https://www.youtube.com/watch?v=XfhlZuw5mDs)
動画内では,ｿﾌﾄｳｪｱにgrbl controlが用いられているが,今回は後継であるcandleを使用する.

↓組み立てるときに参考にしたかったﾏｰﾃｨｰさんの記事
[マーティーの工房日誌 - 小型工作機CNC2418 その１（組立）]
(https://martyworkshopdiary.blogspot.com/2017/03/cnc2418.html)
ﾏｰﾃｨｰさんのﾌﾞﾛｸﾞは非常に重要なため,熟読すべし.

↓仕様書
[DIY CNC 3 Axis Engraver Machine PCB Milling Wood Carving Router Kit Arduino Grbl](http://linksprite.com/wiki/index.php5?title=DIY_CNC_3_Axis_Engraver_Machine_PCB_Milling_Wood_Carving_Router_Kit_Arduino_Grbl#How_to_use)
ﾍﾟｰｼﾞの一番最後のPDFに基板の回路図が載っている.

# 2.ｿﾌﾄｳｪｱ
↓USB-ｼﾘｱﾙ通信を行うﾄﾞﾗｲﾊﾞ(PCと基板のarduinoが通信するのに不可欠)
[悪戦苦闘を乗り越え、中華CNCついに動く。長期間を要した犯人探しと対策の経緯をお伝えします](https://japanese.engadget.com/2017/09/29/cnc/)

↓candle 1.0.11(CNCを動かすｿﾌﾄ)
[マーティーの工房日誌 - 小型工作機CNC2418 その３（HeightMap検討）](https://martyworkshopdiary.blogspot.com/2017/02/)
[candle - Version 1.0 release]
(https://github.com/Denvi/Candle/releases/tag/v1.0)
Baudは115200.
最新のcandle 1.1.7はgrbl1.0にしか対応していない為,古いﾊﾞｰｼﾞｮﾝを使う.
grbl1.0に書き換えることも可能らしい.気が向いたらやる.

↓EASEL(ｵﾝﾗｲﾝで使える2.5DのCAD)
[youtube - Banggood 3018 Mini Cnc Router Kit Build, Test & Review](https://youtu.be/hB4Cvbtu-lA?t=818)
[youtube - Run Easel Gcode on (almost) any CNC router]
(https://www.youtube.com/watch?v=zM74nqRyr9s)
[EASEL](http://easel.inventables.com/users/sign_in)
gcodeを出力できるので,candleを用いて簡単に2.5Dの切削が出来る.
jpegの画像を取り込めると聞いたので後で確認.

# 3.G-code
↓G-codeの仕様
[ShapeOko - G-Code](https://wiki.shapeoko.com/index.php/G-Code)

↓G02 円弧補間について
[円弧補間](http://www.nttd-es.co.jp/products/e-learning/e-trainer/trial/nc/nc_arch.htm)


#4.後で読む
GrblのEEPROMに書かれている設定値
[Hardware LOL - Grblの設定](http://ruur.hatenadiary.com/entry/2016/01/02/040735)
[一生、いちエンジニア。 - 手作りCNCフライス〔Grbl設定編〕]
(http://ichirowo.com/2016/09/cnc_grbl/)
CNC改造時に熟読すべし.
[自作CNCマシン レーザーカッターについて]
(https://cnc-selfbuild.blogspot.com/2016/04/cnccncdrv8825a4988.html)
ﾘﾐｯﾄｽｲｯﾁはgrbl1.0からの追加要素っぽい.
[Github - ﾘﾐｯﾄｽｲｯﾁ](https://github.com/gnea/grbl/wiki/Wiring-Limit-Switches)

Eagle
[プリント基板設計Eagleのエッセンス](http://essence.cambrianrobotics.com/contents/%E5%9B%9E%E8%B7%AF%E5%9B%B3%E3%82%92%E6%9B%B8%E3%81%8D%E5%A7%8B%E3%82%81%E3%82%8B/40)
[CNCでPCB作成 (Candle編)　基板の平面度測定　](http://jg1ipz.com/archives/795)
また,S500 F60がPCB切削時の好条件らしい.
プログラミング初心者のPython アウトプット

#Python アウトプット用

最近勉強し始めたpythonの自分用のアウトプットを書き留めておきます。

#リスト
リストは文字列や数字をまとめて変数に渡すことができます。

```hello.py
drinks = ['beer', 'cocoa', 'coffee']
           #0        #1       #2
```
##いろいろしてみる
リストをすべて取り出すときは

```hello.py
drinks = ['beer', 'cocoa', 'coffee']
print(drinks) # =>['beer', 'cocoa', 'coffee']
```
リストを1つ取り出す

```hello.py
drinks = ['beer', 'cocoa', 'coffee']
print(drinks[0]) # => 'beer'
```
リストを書き換える

```hello.py
drinks = ['beer', 'cocoa', 'coffee']
drinks[0] = 'milk' # => 'beer' => 'milk'
print(drinks) # => ['milk' , 'cocoa', 'coffee']
```
末尾に付け加える

```hello.py
drinks = ['beer', 'cocoa', 'coffee']
drinks.append('milk')
print(drinks) # => ['beer', 'cocoa', 'coffee', 'milk']
```

#辞書
辞書はキーと値を関連づけることができます。またリストと違って順番の指定はできません。

```hello1.py
colors = {'red':'赤', 'blue':'青', 'yellow':'黄'}
          #キー: 値
```
##いろいろしてみる
全て取り出す

```hello1.py
colors = {'red':'赤', 'blue':'青', 'yellow':'黄'}
print(colors) # => {'red':'赤', 'blue':'青', 'yellow':'黄'}
```
一つ値を取り出す

```hello1.py
colors = {'red':'赤', 'blue':'青', 'yellow':'黄'}
print(colors['red']) # => 赤
```
値を変える

```hello1.py
colors = {'red':'赤', 'blue':'青', 'yellow':'黄'}
colors['red'] = 'あか'
print(colors['red']) # => あか
```
キーを値を追加する

```hello1.py
colors = {'red':'赤', 'blue':'青', 'yellow':'黄'}
colors['green'] = '緑'
print(colors) # => {'red': '赤', 'blue': '青', 'yellow': '黄', 'green': '緑'}
```

#リストと辞書について初心者なりに書いてみました
どこか間違っているところなどがあればご指摘いただきたいです。なお初心者なので間違い等があるかもしれませんが、そこはご了承ください。これからも、いっぱいインプットとアウトプットしていきます。