OmniAICreator/Qiita-1.07M huggingface dataset:
vivliostyle-cli の gulp プラグイン書いた

Gulpプラグインを書く演習で、
[vivliostyle-cli](https://github.com/vivliostyle/vivliostyle-cli) をgulpで実行するプラグインを書きました。

Gulp4以降で動きます。
`vivliostyle build` だけです。 `vivliostyle preview` は使えません。

[kanemu/gulp-vivliostyle-build: vivliostyle-cli plugin for Gulp.](https://github.com/kanemu/gulp-vivliostyle-build)

### インストール

npmには上げてないので、リポジトリ直指定でインストールしてください。

```bash
npm install git+ssh://git@github.com:kanemu/gulp-vivliostyle-build.git --save-dev
```

### 基本的な使い方

./gulpfile.js に以下の感じで書いて、 `gulp build` で実行してください。
デフォルトの書き出し先は、htmlと同じパスの `.pdf` になります。

```javascript
'use strict';

const gulp = require('gulp'),
    vivliostyleBuild = require('gulp-vivliostyle-build');

gulp.task('build', (done) => {
    return gulp.src('./src/index.html')
        .pipe(vivliostyleBuild())
        .on('end', () => {
            done();
        });
});
```

### オプションについて

[vivliostyle-cli/cli-build.ts](https://github.com/vivliostyle/vivliostyle-cli/blob/main/src/cli-build.ts) で設定しているオプションの他に、 `outputDir` オプションで書き出し先を指定できます。

```javascript
gulp.src('./src/index.html')
    .pipe(vivliostyleBuild());
// -> output ./src/index.pdf

gulp.src('./src/index.html')
    .pipe(vivliostyleBuild({outputPath:'dist/out.pdf'}));
// -> output ./dist/out.pdf

gulp.src('./src/index.html')
    .pipe(vivliostyleBuild({outputDir:'build'}));
// -> output ./build/index.pdf

gulp.src('./src/index.html')
    .pipe(vivliostyleBuild({outputPath:'dist/out.pdf',outputDir:'build'}));
// -> output ./build/dist/out.pdf
```

### ライセンスについて

[vivliostyle-cli](https://github.com/vivliostyle/vivliostyle-cli) に合わせて
[AGPL Version 3](http://www.gnu.org/licenses/agpl-3.0.html) にしてあります。

### 作ってみた感想

gulpプラグインが [Vinyl](https://www.npmjs.com/package/vinyl) のストリームだというのがよく理解できました。

あと、vivliostyle-cli が [vivliostyle-cli/build.ts](https://github.com/vivliostyle/vivliostyle-cli/blob/main/src/lib/build.ts#L164) 内で `process.exit(0);` してプロセスが終了してしまうので、
[child_process.fork](https://nodejs.org/api/child_process.html#child_process_child_process_fork_modulepath_args_options) を使って別プロセスで実行してます（結構大変だった）。

### 参考URL

- [gulpとvinyl。gulp.srcを使わずgulpしてみる。 - Qiita](https://qiita.com/eielh/items/dea9fd85d5389fd44174)
- [Node.js の Child Process 研究 : fork の使い方、子プロセスの切り方を検証 - Corredor](https://neos21.hatenablog.com/entry/2019/10/21/080000)
- [node.js - Fork a child process and inject dependency - Stack Overflow](https://stackoverflow.com/questions/15368436/fork-a-child-process-and-inject-dependency)
WSL2にPostgreSQLをインストールする

#PostgreSQLのインストール

```
$ sudo apt install postgresql

(省略)

selecting dynamic shared memory implementation ... posix
selecting default max_connections ... 100
selecting default shared_buffers ... 128MB
selecting default time zone ... Asia/Tokyo
creating configuration files ... ok
running bootstrap script ... ok
performing post-bootstrap initialization ... ok
syncing data to disk ... ok

Success. You can now start the database server using:

    pg_ctlcluster 12 main start

Ver Cluster Port Status Owner    Data directory              Log file
12  main    5432 down   postgres /var/lib/postgresql/12/main /var/log/postgresql/postgresql-12-main.log
update-alternatives: using /usr/share/postgresql/12/man/man1/postmaster.1.gz to provide /usr/share/man/man1/postmaster.1.gz (postmaster.1.gz) in auto mode
invoke-rc.d: could not determine current runlevel
Setting up sysstat (12.2.0-2) ...

Creating config file /etc/default/sysstat with new version
update-alternatives: using /usr/bin/sar.sysstat to provide /usr/bin/sar (sar) in auto mode
Created symlink /etc/systemd/system/multi-user.target.wants/sysstat.service → /lib/systemd/system/sysstat.service.
Setting up postgresql (12+214ubuntu0.1) ...
Processing triggers for systemd (245.4-4ubuntu3.3) ...
Processing triggers for man-db (2.9.1-1) ...
Processing triggers for libc-bin (2.31-0ubuntu9.1) ...
```
インストールしたPostgreSQLを起動する。

```
$ sudo /etc/init.d/postgresql start
 * Starting PostgreSQL 12 database server
```
ubuntuのユーザーをpostgresに切り替える。

```
$ sudo -u postgres -i
Welcome to Ubuntu 20.04.1 LTS (GNU/Linux 4.19.128-microsoft-standard x86_64)

 * Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/advantage

  System information as of Mon Jan  4 11:17:45 JST 2021

  System load:  0.0                Processes:             26
  Usage of /:   1.0% of 250.98GB   Users logged in:       0
  Memory usage: 3%                 IPv4 address for eth0: 172.30.98.8
  Swap usage:   0%


0 updates can be installed immediately.
0 of these updates are security updates.



This message is shown once a day. To disable it please create the
/var/lib/postgresql/.hushlogin file.
$ whoami
postgres
$ pwd
/var/lib/postgresql
```
WSL2で時刻がずれる

# apt updateでエラー
WSL2のubuntu 20.04でapt updateをしたら以下のエラーが発生した。

```
$ sudo apt update
[sudo] password for nomura:
Get:1 http://security.ubuntu.com/ubuntu focal-security InRelease [109 kB]
Hit:2 http://archive.ubuntu.com/ubuntu focal InRelease
Get:3 http://archive.ubuntu.com/ubuntu focal-updates InRelease [114 kB]
Get:4 http://archive.ubuntu.com/ubuntu focal-backports InRelease [101 kB]
Reading package lists... Done
E: Release file for http://security.ubuntu.com/ubuntu/dists/focal-security/InRelease is not valid yet (invalid for another 3d 2h 52min 14s). Updates for this repository will not be applied.
E: Release file for http://archive.ubuntu.com/ubuntu/dists/focal-updates/InRelease is not valid yet (invalid for another 3d 2h 52min 25s). Updates for this repository will not be applied.
E: Release file for http://archive.ubuntu.com/ubuntu/dists/focal-backports/InRelease is not valid yet (invalid for another 3d 2h 52min 46s). Updates for this repository will not be applied.
```

いろいろと調べてみると時刻がずれていると発生するエラーらしい。

```
$ date
Fri Jan  1 06:21:14 JST 2021
```

現在の時刻は2021/01/04 11:00です。
ハードウェアの時刻に合わせてみる。

```
$ sudo hwclock -s
$ date
Mon Jan  4 11:06:15 JST 2021
```

Windowsの時計と比べて5分くらいずれているが、これで再度apt updateをしてみる。

```
$ sudo apt update
[sudo] password for nomura:
Hit:1 http://archive.ubuntu.com/ubuntu focal InRelease
Get:2 http://security.ubuntu.com/ubuntu focal-security InRelease [109 kB]
Get:3 http://archive.ubuntu.com/ubuntu focal-updates InRelease [114 kB]
Get:4 http://archive.ubuntu.com/ubuntu focal-backports InRelease [101 kB]
Fetched 324 kB in 3s (121 kB/s)
Reading package lists... Done
Building dependency tree
Reading state information... Done
All packages are up to date.
```
成功しました。

PowerShellなどからwslを再起動してもなおるみたいです。
＃PCをスリープしたりしているとWSLの時刻がずれていくらしい。

```
> wsl --shutdown
```
Gitとは？①【概念】

#はじめに
こちらは学習用のメモになります。
今回はプログラミングするにおいて必須のGitについてまとめていきます。

#Gitとは？
Gitとは`バージョン管理システムの中の一つ`です。

バージョン管理システムとは`データを管理するだけじゃなく、誰がいつどこを編集したのか、履歴を保存管理できる仕組み`です。

#Gitを使うメリット
* 上書きされたデータがバッティングされることなく、一つのファイルを複数人で編集することができる
* 過去のデータにアクセスしたり、復元ができる
* 最新のデータがどこにあるのかわかる

#リポジトリとは？
Gitを使う上でリポジトリは重要な概念になります。
リポジトリとはデータの貯蔵庫。（データを保存しておく場所）

リポジトリには２種類あり、
* リモートリポジトリ ・・・　サーバー上に置かれるもの（メイン）
* ローカルリポジトリ　・・・　自分のPC上に作られるリポジトリ（ファイル/フォルダ）。

開発者は
①ローカルリポジトリにデータを保存をします。
②ローカルリポジトリを経由してリモートリポジトリ（GitHub）にデータを保存していく

# GitHub
GitとGitHubは厳密にいうと違う意味になります。
GitHubとは、Gitを軸にしたプロダクト開発を支援する仕組みを提供しているWEBアプリケーションです。
## GitHubで何をしているのか？
リモートリポジトリの提供をしている。
Gitを使うためにGitHubにアカウント登録して使う。

GitHubの類似サービスとして「Bitbucket」や「GitLab」がある。
Python 呼び出し可能型の型指定



呼び出し可能型(lambda式含む)の型指定

```python:pyBTrade.py
# 呼び出し可能オブジェクト:func
# 引数1:int
# 引数2:float
# 返り値:str

def test(func: Callable[[int, float], str]) -> None:
```

詳しくは公式ドキュメントを参照
https://docs.python.org/ja/3/library/typing.html#typing.Callable


自分とこの実装例

```python:pyBTrade.py
    async def order_limit(
        self, 
        price: Decimal, 
        size: Decimal, 
        func: Callable[['TradeSim', COrderItem], bool] = None
    ) -> COrderItem:
        order: COrderItem = self.book_keeper_fx.order_limit(price, size)
        while True:
            try:
                await asyncio.sleep(0)
                if order.is_finished:
                    break
                if self.is_finished:
                    break
                if callable(func):
                    if func(self, order):
                        raise asyncio.CancelledError
            except asyncio.CancelledError:
                await self.send_order_cancel(order)
                break
        return order
```
【対処法】インストール済みなのに flutter doctor が Android Studio の flutter plugin を認識しない

##結論
　Android Studio　がVer４．１なら何もしなくて良い
　（Flutterのバグだったようです）

##現状
+ flutter plugin を Android Studio でインストールした
+ flutter doctor が Android Studio の flutter plugin を認識しない
+ Android Studio では flutter plugin を認識している

##Android StudioにFulutter Pluginのインストールは終わっている状態

![スクリーンショット 2021-01-03 22.04.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889440/d645c4ae-105f-9619-7738-a2f77c75da10.png)

##パスも通っている

```
which flutter
/Users/Name/Developer/flutter/bin/flutter
```


##以下を実行

```
flutter doctor -v
[✓] Flutter (Channel stable, 1.22.5, on macOS 11.1 20C69 darwin-x64, locale ja-JP)
    • Flutter version 1.22.5 at /Users/gototakahiro/Developer/flutter
    • Framework revision 7891006299 (3 weeks ago), 2020-12-10 11:54:40 -0800
    • Engine revision 2c956a31c0
    • Dart version 2.10.4

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/gototakahiro/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.0

[!] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] VS Code (version 1.52.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.18.0

[✓] Connected device (1 available)
    • iPhone 12 Pro Max (mobile) • D3145483-24EE-4418-8C4A-BF1B236F7DC5 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)

! Doctor found issues in 1 category.
```

##解決したいエラー
+ Flutter plugin not installed; this adds Flutter specific functionality.
+ Dart plugin not installed; this adds Dart specific functionality.


##参考
https://www.youtube.com/watch?v=17o5izTunfg
Git commit templateを使用する

GitのCommitメッセージテンプレートを使用して、commit historyの質を向上させる。

- プロジェクトごとの設定
- Global設定
- テンプレートのサンプル



#### .gitmessage Example
```
vim .gitmessage
```

```
# Title: Summary
# No more than 50 chars. #### 50 chars is here: #

# Empty line between title and body.

# Body: Include *what* and *why*. Including ticket ID is encouraged.


```


#### アプリケーションのProject Rootに配置して、プロジェクト毎にテンプレートを使い分ける場合

```
touch .gitmessage
git config commit.template .gitmessage
```

#### UserHomeに配置して、プロジェクトにかかわらず同一のテンプレートを使う場合

```
touch ~/.gitmessage
git config --global commit.template ~/.gitmessage
```

#### 使い方

```
git commit # Tempalteが反映される
git commit -m "Ignore template message" # Tempalteを無視してCommitを行いたい場合
```
WebStormで引数名と型のヒントを非表示にする

# やりたいこと
JetBrains製のIDEであるWebStormでは、デフォルトで引数名や型ヒントが薄い色の文字で表示される機能があります。

こんなの↓
![スクリーンショット 2021-01-04 10.35.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534248/eca7b8dc-dfb7-a4f1-2b33-dcb36c54b164.png)


これはこれで便利なのですが、これに慣れてしまって名前付きでない大量の仮引数を定義してしまうと、他のIDEやエディタ（GitHub上など）でソースコードをとても読みづらくなるという問題に気が付きました。

どんな環境でも読みやすいコードを書くことを意識するため、それらの引数名や型のヒントを非表示にすることにしたので、その方法を記しておきます。

# 設定方法
1. 'command + ,' を押してPreferencesを開く
2. Editor > Inlay Hints > TypeScriptを開く
3. Parameter hintsとType annotationsの 'Show ... hints ...'のチェックを外す。
4. Inlay Hints > JavaScript なども同じように設定する。（任意）

無事、ヒントが表示されなくなりました。
![スクリーンショット 2021-01-04 10.45.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534248/46dd85f4-6751-9a41-273b-606d3b673c4e.png)
FileManagerでフォルダやファイルを削除する

## はじめに
前回の[記事](https://qiita.com/Hyperbolic_____/items/a4581ed08cec4c7df9ea)でFileManagerを使って端末に動画や音声などを追加する方法について書きました。ここではそれらを削除する方法について書きます。

## 解決できるかもしれないエラー
Domain=NSCocoaErrorDomain Code=4 "” couldn’t be removed." UserInfo={NSUserStringVariant=(
    Remove
), NSFilePath=/var/mobile/Containers/Data/Application/EB92E676-C1F0-4B9A-8D82-D86D7186B2F3/Documents/dfg, NSUnderlyingError=0x2814ded00 {Error Domain=NSPOSIXErrorDomain Code=2 "No such file or directory"}}

## 目標
```
iOS App
    ├── Documents --- test.txt //ここに追加されたファイルやフォルダを削除する
    ├── Library
    │   ├── Caches
    │   └── Preferences
    └── tmp
```

## ソースコード
```swift
func removeItem(_ itemName: String) {
        let fileManager = FileManager.default
        var pathString = NSSearchPathForDirectoriesInDomains(.documentDirectory, .userDomainMask, true)[0]
        if !fileManager.fileExists(atPath: pathString + "/" + itemName) {
            print("指定されたファイルまたはフォルダが存在しない")
            return
        }
        pathString = "file://" + pathString + "/" + itemName
        guard let path = URL(string: pathString) else { return }
        do {
            try fileManager.removeItem(at: path)
            print("成功した")
        } catch let error {
            print("失敗した\(error)")
        }
    }
```

## 流れ
`pathString`でDocumentsまでのパスを用意し、`fileExists`を使ってDocumentsの先に引数として入力されたフォルダまたはファイルが存在するかチェックします。（指定されたアイテムが存在しない場合のエラーは13行目で拾ってくれるのでここはなくても可。）
その後パスを変更し、URL型に変換し、`removeItem`を使って削除します。
【Swift】UIDatePickerのtextColorを変更する

##UIDatePickerのtextColorはStoryboard上のプロパティからは変更出来ない

Storyboard上のプロパティから変更出来なかった為、以下のコードで対応しました。

```swift
datePicker.setValue(UIColor.white, forKey: "textColor")
datePicker.setValue(false, forKey: "highlightsToday")
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678954/0e9ef9b1-7ce0-3378-0a2b-98920c0e562f.png)
希望通りに文字色の変更が反映されました。


##highlightsTodayをfalseにしない場合

```swift
datePicker.setValue(UIColor.white, forKey: "textColor")
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678954/44b1cdb0-0c4e-ffe5-3ffa-30269d1dd3c1.png)
`highlightsToday`を設定しない場合、Today部分に文字色変更が反映されませんでした。

##参考
<a href="https://stackoverflow.com/questions/33387791/uidatepicker-change-color-of-text-of-today-date">UIDatePicker Change color of text of “today” date</a>
Heroku デプロイエラー対処

#エラー文

herokuにデプロイしようとpushしたところこんなエラーが。。。

```
$ git push heroku master
remote: !   No such app as xxx-xxx-5678.
fatal: repository 'https://git.heroku.com/xxx-xxx-1234.git/' not found
```
※xxx-xxx-5678のurlは例です。

##こうなってしまった原因とは
実は以前に見本アプリを作成してた時にわけわかりません状態に陥ってしまい
herokuのサイト、いわゆる「GUI」の方からアプリを削除しました。

1.ググってみたら削除の仕方を間違ってはないけどGUIの方から削除するには
もう一押しやることがあったみたいです。
（詳しい削除方法は最後に書いてあります）

2.以前削除したアプリのurlが
https://git.heroku.com/xxx-xxx-1234.git/
だったとします。
gitのリモートurlが削除したhttps://git.heroku.com/xxx-xxx-1234.git/
のままになったままだから新しいリモートurlに変更しなければならない。



##解決方法
先ず新たに作成したアプリのurl
https://git.heroku.com/xxx-xxx-5678.git 
この新しいurlに変更するためにはこのコマンドを使います

```
git remote set-url heroku https://git.heroku.com/xxx-xxx-5678.git
```

とすればurl変更は完了です。
あとは

```
git push heroku master
```
でherokuへのデプロイは完了です。

##Herokuアプリの削除方法
.Herokuサイトからの削除方法

　1.herokuにログインして「Settings」のタブに移動して一番したの「Delete app...」
　ボタンをクリックするとアプリ名の入力が求められるのでそのまま入力して削除します

　2.gitのリモートリポジトリに１番で削除したアプリのurlが設定されたままになっているので

```
$ git remote rm heroku
```
　このコマンドで削除します。


.herokuコマンドを使って削除する
　※コマンドを使用した方が圧倒的に早いです

```
$ heroku apps:destroy --app アプリ名 --confirm アプリ名
```
でHeroku上のアプリもリモートリポジトリの設定もすべて消してくれます。

これで削除完了になります。
IPv4 VS IPv6

フレッツ光の回線にIO DataのWN-G300RをつないでIPv6パススルーを設定しています。Windows 7上のFirefoxでIPv4とIPv6のスループットを確認してみました。

計測はfast.comを使います。フレッツ光のプロバイダーはNIFTYです。

通常はIPv6が優先されるのでWindowsのネットワーク接続のプロパティでIPv6をオフにして強制的にIPv4でアクセスします。

![IPv6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/7b6ebf07-8ac3-b98c-9a8d-9ed454a9d4cb.png)

IPv4

||Down|UP|
|:--|:--|:--|
|1|41|34|
|2|30|35|
|3|34|43|
|平均|35|37|

IPv6

||Down|UP|
|:--|:--|:--|
|1|30|41|
|2|33|35|
|3|32|41|
|平均|32|39|

思ったほど変わりません。時間によっても変わる可能性があります。またWiFiがボトルネックになっているようにも思われます。

netshコマンドで優先度を代えても確認できるようです。
Docker入門(1)よく使うコマンド

######Helpコマンド
- docker version
- docker info
- docker --help

######Imageコマンド
- docker images ローカルのイメージ一覧を表示する
 - -a すべてのイメージを表示する
 - -q　イメージIDを表示する
 - --digests　イメージのサマリを表示する
 - --no-trunc　イメージの詳細情報をお表示する
- docker search [image]
  - docker search -s 30 [image] startの数によって検索する
  - docker search --no-trunc [image] 
  - docker search --automated automated-build型のイメージのみを表示する
- docker pull [images] = docker pull [images]:latest
-docker rmi [images] imageを削除
 - docker rmi -f [images] 強制的に削除する
 - docker rmi -f [image:tag] [image:tag]　複数のimagesを削除する
 - docker rmi -f $(docker images -qa) すべてのimagesを削除する
 
######コンテナマンド
- docker run [options] images [command] [args] 　新しいコンテナを作り、起動する
 - --name : コンテナの名称を指定する
 - d : バッググラウンド実行
 - i : interactive、tと一緒に使う
 - t : 仮のterminalを立てる
 - P : ランダムport
 - p : portを指定する
        - ip:hostPost:containePort
        - ip::containePort
        - hostPort:containePort
        - caontainePort
- docker ps [options]
 - a : 以前と現在(動いている)のコンテナを表示する
 - l : 前回のコンテナを表示する
 - n : 回数を指定して、コンテナを表示する
 - q : コンテナIDのみを表示する
 - no-trunc : 詳細情報を表示する

- コンテナ終了コマンド
 - exit : コンテナを停止する
 - Ctrl+p+q : 仮のterminalを停止する。コンテナを停止しない。
 
- コンテナを起動
 - docker start [コンテナID or コンテナ名称]
 - docker restart [コンテナID or コンテナ名称]
 
- コンテナStop
 - docker start [コンテナID or コンテナ名称]
 
- コンテナ強制終了
 - docker kill [コンテナID or コンテナ名称]
 
- 停止したコンテナを削除
 - docker rm [コンテナID or コンテナ名称]
 - 複数削除
        - docker rm -f $(docker ps -a -p)
        - docker ps -a -q | xargs docker rm
   
######よく使うコマンド
 - docker run -d [images] run in バックグラウンド
 - docker logs -t -f --tail ［コンテナID］
        - t　time
        - f fresh
        - tail 何番目まで表示する
        
 - docker top コンテナID　コンテナ内部のプロセスを表示する
 - docker inspect コンテナID　コンテナ内部ノーベル詳細情報を表示する

 - docker attach コンテナID
 - docker exec -it コンテナID　bin/bash
 - docker exec -it コンテナID　shellコマンド

 - docker cp コンテナID：コンテナ内部パス　パス
【kintone】Party Parrot を飾る

あけましておめでとうございます！
こんな世の中ですが、kintoneの中だけでも新年ぽいおめでたい、思考停止した感じのカスタマイズ（駄）をしてみたいと思います。


# アプリの準備

アプリを新しく作成します。

フォームには何も設置せずに、一覧を新規作成しましょう。

カスタマイズビューにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/c2c4dba0-d8bf-7725-f4c9-15db46a1f31d.png)


## HTML
HTMLには、↓のサイトのHTMLをそのまま貼りましょう。思考停止の状態でOKです。

https://codepen.io/nathangath/pen/RgvzVY/
※これは、party parrotのサイト（[Cult of the Party Parrot](https://cultofthepartyparrot.com/)）の下の方の
CSS Parrotをクリックしてたどり着くページです。

## CSS
CSSは、先程のサイトのCSSをコピペして`parrot.css`のような名前をつけたファイルを作り、アップロードします。

## JavaScript
JavaScriptも、先程のサイトのJavaScriptをコピペして、`parrot.js`のような名前をつけたファイルを作り、アップロードします。

# できあがり

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/5f12f23e-084d-585d-3e6d-1457f8a15ab8.gif" width=300px>

めでたいですね！

というわけで、今年は楽しい一年になりますように✨✨
最新の docker のインストール (Ubuntu 20.04 および Ubuntu 20.10)

# 最新の docker のインストール (ubuntu 20.04 および ubuntu 20.10)

[ubuntu 20.04 で docker をインストールする](https://qiita.com/m-tmatma/items/06eb40514306e09142c4) で紹介した方法では、ubuntu が提供している apt リポジトリを使用するのでインストールされる docker のバージョンが古いです。(2021/1/4 時点で `Docker version 19.03.8, build afacb8b7f0`)
[ubuntu 19.10 への docker のインストール](https://qiita.com/m-tmatma/items/52aea7f73729df6c3411) で紹介した方法を使うと、最新の docker をインストールできます。

しかし、 https://manpages.debian.org/unstable/apt/apt-key.8.ja.html によると
`apt-key(8) will last be available in Debian 11 and Ubuntu 22.04.` となっており、`apt-key` を使う方法は `Ubuntu 22.04` で最後になります。

https://github.com/docker/docker.github.io/blob/master/engine/install/ubuntu.md に記載されています。
(https://github.com/docker/docker.github.io/pull/11990 で `apt-key` を使わない方法が docker の公式ドキュメントに取り込まれました)

## docker インストール済みの場合に docker をアンインストール

```
sudo apt-get remove docker docker-engine docker.io containerd runc
```

## 最新版の docker インストール


```
sudo apt-get update
```

```
sudo apt-get install -y \
    apt-transport-https \
    ca-certificates \
    curl \
    gnupg \
    lsb-release
```

```
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | \
   sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
```

```
echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
```

```
sudo apt-get update
sudo apt-get install -y docker-ce docker-ce-cli containerd.io
```

※ `add-apt-repository` を使用しないので `software-properties-common` のインストールは不要。

```
$ docker --version
Docker version 20.10.9, build c2ea9bc
```

## 参考ページ

* [Ubuntu 19.10 への docker のインストール](https://qiita.com/m-tmatma/items/52aea7f73729df6c3411)
* [Ubuntu 20.04 で docker をインストールする](https://qiita.com/m-tmatma/items/06eb40514306e09142c4)
* [apt-key - Deprecated APT key management utility](https://manpages.debian.org/unstable/apt/apt-key.8.ja.html)
* [Offering an alternative to the deprecated apt-key tool #11990](https://github.com/docker/docker.github.io/pull/11990)
* [Docker Desktop for Linux](https://github.com/docker/docker.github.io/blob/master/engine/install/ubuntu.md)
【Unity】Androidアプリでバックグラウンドに移行する方法

# 初めに

Unity で実装した Android アプリの話です。
Unity 側でアプリをバックグラウンドに移動させたかっただけなのですが、調べるのに時間がかかったので記事にすることにしました。

# 動作確認環境

- Unity 2019.4.13f1

# コード

```c#
AndroidJavaObject activity = new AndroidJavaClass("com.unity3d.player.UnityPlayer").GetStatic<AndroidJavaObject>("currentActivity");
activity.Call<bool>("moveTaskToBack", true);
activity.Dispose();
```

# 簡単な解説

初めに、Android ネイティブの機能を使うので、`Activity` を取得します。
`Activity` を取得するには、 `AndroidJavaClass` を使用してUnityPlayerクラスを取得し、そのクラスを使って `currentActivity` を`AndroidJavaObject` として取得します。

あとは、`Activity#moveTaskToBack(true)` メソッドを呼ぶだけです。

最後は、状況によりますが `AndroidJavaObject` を `Dispose()` します。
`AndroidJavaObject` は `IDisposable` インターフェイスが実装されているので、アンマネージドリソースになります。
使い終わったら解放しましょう。
`using` で囲んでもよいかもしれません。

```c#
using(AndroidJavaObject activity = new AndroidJavaClass("com.unity3d.player.UnityPlayer").GetStatic<AndroidJavaObject>("currentActivity"))
{
    activity.Call<bool>("moveTaskToBack", true);
}
```

# 参考文献
[アプリケーションを終了させる - NO_NAME](http://t-tech.hatenablog.com/entry/2012/02/03/111722)
[【Unity】Androidのネイティブの機能を使う](https://marunouchi-tech.i-studio.co.jp/2405/)
[【Unity,C#】外部リソースを使用する時の注意【メモ】 - Blue_Breath_Blog](https://hi-network.sakura.ne.jp/wp/2020/03/25/post-1098/)
Laravel5.5 モデルで定義した関数をコントローラーで呼び出してみよう！

みんなやってみよう〜！私にもてきたからみんなできる！
モデルで書いたメソッドをコントローラーで用いる書き方！
例えばログインしている人の投稿のみ欲しい時、コントローラだけで書くと以下のようになる。

```php:BbsController.php

Bbs::where('user_id' => Auth::id())->get();

```
しかし、
ファイルが増えてくるとわざわざ毎回取得してくることが面倒になる。
下手をするとログイン者の投稿情報が必要の度にこのコードがかかれることとなる。
しかし！！
毎回このコードを書かなくてもいい方法があるんです！
それが、`モデルにメソッドを書いてコントローラーで呼び出す方法`である。


```:Database
>>Users table
+----+--------+    
| id　| name | 
+----+--------+
| 1 | あけみ　 |
| 2 | ゆうな　 |
| 3 | たくや 　|
+----+--------+

>>Bbses table
+----+----------------------------+
| id | bbs             | user_id |
+----+----------------------------+
| 1  | 今日のご飯        |    1    |
| 2  | 焼肉がいい　　     |    2    |
| 3  | 夜ご飯なににする    |    1    |
+----+----------------------------+

```

```php:bbs.php

public function allGet($auth_id) {
        //ログインユーザーのカートデータ読み込み
        return $this->where('user_id', $auth_id)->get();
}
```


```php:BbsController.php
use App\Bbs;
public function __construct(Bbs $bbs) {
        $this->bbs = $bbs;
}
public function index() {
        $bbses = $this->bbs->allGet(Auth::id());
        //$this->モデル->関数名
        dd($bbses);
}       
//下記のデータが取れてきてるはず！一度確認してみよう！！
```

```:Database
(例)ログイン者があけみさん
　　id=1のあけみさんの投稿の取得したときのデータ
+----+----------------------------+
| id | bbs             | user_id |
+----+----------------------------+
| 1  | 今日のご飯        |    1    |
| 3  | 夜ご飯なににする    |    1    |
+----+----------------------------+
```

以上になります！
最初は丸写しでもいい！！
とりあえず、一度モデルで書いたメソッドをコントローラーで呼び出してみましょう〜！！
LGTM大好物なんで、ポチッと投げ銭感覚でおねがいします〜！ :sunglasses:

```php:BbsController.php(番外編)
use App\Bbs;
//コンストラクトない場合
public function index() {
        $bbses = (new Bbs)->allGet(Auth::id());
        //$this->モデル->関数名
        dd($bbses);
}   

```
AWS Auto Scaling について

## 勉強前イメージ

ある一定の負荷まで行ったら勝手にEC2インスタンス増やしてくれるイメージ
だけど、色々設定あってめんどくさそう・・・

## 調査

### AWS Auto Scaling とは

AWS Auto Scaling というAWSのサービスで、
自動的に容量を増減してパフォーマンスを最適化してくれるシステムです。
アプリケーションの負荷を処理するために適切な数の Amazon EC2 インスタンスを利用できるように準備します。
元々オンプレなどで構築していると来るアクセスの最大を見越して作成しますが、基本的には半分以下のアクセスしか来ないことも往々にしてあります。
また、構築・維持に対するコストもかかり、突発的なアクセス増に耐えることができません。
それを解決してくれるのがAWS Auto Scalingです。

### Auto scaling の特徴

#### いろんなサービスを統合してスケーリングできる

AWS Auto Scalingからいろんなサービスのスケーリングができます

- Amazon EC2
	- Amazon EC2 Auto Scalingグループ内で起動・終了を行う
- Amazon EC2スポットフリート
	- Amazon EC2スポットフリートの起動・終了を行う
	- 中断されているインスタンスを自動的に置き換える
- Amazon ECS
	- 負荷の変動に合わせて、Amazon ECSを調整する
- Amazon DynamoDB
	- DynamoDBテーブルまたはグローバルセカンダリインデックスで読み書きのキャパシティを調整する
- Amazon Aurora
	- Auroraのリードレプリカの数を調整する

#### リソースの自動検出

AWS Auto Scalingは環境を確認し、使われているスケーラブルなリソースを自動で検出します

#### 組込みスケーリング戦略

予め、最適化の定義がされています。

- パフォーマンスについて
- コストについて
- パフォーマンスとコストのバランスについて

#### 予測スケーリング

予測スケーリングを行うことで、キャパシティを正確に調整することができる。
定期的なスパイクなどのトラフィックを予想し、変動に先立って適切な数のインスタンスを調整します。

#### 完全マネージド型

スケーリングされるリソースに対して、戦略を使用してメトリクスのターゲット値を設定する
また、リソースのスケーリング調整をリガーするAmazon CloudWatchアラームを作成・管理します

#### スマートスケーリングポリシー

スケーリングされるリソースに対して

- スケーリングの調整を継続的に行い、キャパシティを最適化します
- `ターゲット追跡スケーリングポリシー` によって負荷パターンを学習して、キャパシティの変動を最小限に抑えます

### AWS Auto Scaling を使用するメリット

#### 耐障害性の向上

AWS Auto Scaling では、EC2インスタンスに何らかの異常が発生した場合はそのインスタンスを自動的に終了させ、
新たにインスタンスを起動させることで、耐障害性が向上します

#### 可用性の向上

複数のアベイラビリティゾーンを設定できるため、AZでの障害が発生したとしても別のAZでインスタンスを起動できます。
それにより可用性の向上がはかれます

#### コスト効率の向上

必要な時に、必要な分だけ自動的に追加・削除するため、かかる費用を最低限に抑えることができます。
また突発的に増えたときでもすぐにインスタンスを増やして対応できます

## 勉強後イメージ

EC2だけじゃなくて、ほかにもサービスが使えるのか・・・
今回はこのサービスがどういうものか調査しただけだけど、ちゃんと設定したらすごそう。
EC2で構築してアクセス量増やしてEC2増えてるとこ見てみたい

## 参考

- [AWS Auto Scalingとその他のAuto Scalingとの比較](https://www.acrovision.jp/service/aws/?p=1290)
- [AWS Auto Scaling](https://aws.amazon.com/jp/autoscaling/)
- [AWS Auto Scalingとは？注意ポイント3つやメリットも紹介](https://www.fenet.jp/aws/column/aws-beginner/323/)
- [AWSエンジニアを採用する前に覚えたいAWSの機能：AWS Auto Scalingとは](https://www.yume-tec.co.jp/column/awsengineer/2909)
- [Amazon EC2 を伸縮自在にする Auto Scaling とは](https://dev.classmethod.jp/articles/about-auto-scaling/)
- [Auto Scaling を試してみた](https://qiita.com/leomaro7/items/eb8305c47662bba6b28f)
- [柔軟なリソース増減で可用性を維持し、機会損失や無駄な設備投資を防ぐAmazon EC2 Auto Scaling](https://business.ntt-east.co.jp/content/cloudsolution/column-113.html)
- [【AWS】Auto Scalingについて](https://www.acrovision.jp/service/aws/?p=578)
大量の非同期APIをawaitを使わずにシーケンシャルに呼び出す

## やりたいこと

こんな場面を想定します。
エンドポイント``/m1score``と、パラメータの配列がある。

```javascript
const params = [
  { team: "madical", score: 649 },
  { team: "oide", score: 658 },
  { team: "mitori", score: 648 },
...
];
```

この配列の各要素を使って、POSTメソッドを全部シーケンシャルに（逐次処理で）呼び出したい。
下記のイメージ。

```javascript
// まずは↓を実行
fetch("/m1score", {method: "POST", body: JSON.stringify({"team": "madical","score": 649})});
// ↑が終わったら↓を実行
fetch("/m1score", {method: "POST", body: JSON.stringify({"team": "oide","score": 658})});
// ↑が終わったら↓を実行
fetch("/m1score", {method: "POST", body: JSON.stringify({"team": "mitori","score": 648})});
// ↑が終わったら↓を実行
fetch("/m1score", {method: "POST", body: JSON.stringify({...
```

## パラレルに呼び出せばよくね？

サーバーが死ぬ。
いやちゃんと作れば死なないかもしれませんが、素朴に作るとサーバーは大量アクセスに耐えられません。
我々はサーバーを落としたいわけではなく、リソースを正常にPOSTしたいのです。

さらに言うなら、たとえばDBにコネクションプールで接続しているようなAPIなんかは、
処理が終了しててもをDBコネクションが開放されておらず、即時に次のAPIを実行するとコネクションプールの開放のスピードが間に合わず枯渇する、なんてこともよくあります。
なのでAPIを一つ実行したらたとえば１秒待つようにしておきたい。

```javascript
// まずは↓を実行
fetch("/m1score", {method: "POST", body: JSON.stringify({"team": "madical","score": 649})});
// ↑が終わったら１秒待ってから↓を実行
fetch("/m1score", {method: "POST", body: JSON.stringify({"team": "oide","score": 658})});
// ↑が終わったら１秒待ってから↓を実行
fetch("/m1score", {method: "POST", body: JSON.stringify({"team": "mitori","score": 648})});
// ↑が終わったら１秒待ってから↓を実行
fetch("/m1score", {method: "POST", body: JSON.stringify({...
```


## awaitを使えばよくね？

一理ある。
だが、awaitはforEachの中では使えないため、ひと工夫が必要です。
参考： [async/awaitを、Array.prototype.forEachで使う際の注意点、という話](https://qiita.com/frameair/items/e7645066075666a13063)

ここではawaitを使わない解決策を提示します。

## 結論
こうします。

```API逐次実行.js
const params = [
  { team: "madical", score: 649 },
  { team: "oide", score: 658 },
  { team: "mitori", score: 648 }
];
params
  .reverse()
  .reduce(
    (acc, cur) => () => {
      fetch("/m1score", { method: "POST", body: JSON.stringify(cur) })
        .then(acc());
    },
    () => {}
  )
  .call();
```

APIを呼び出した後１秒待つ場合はこう。

```実行してから1秒待つ.js
const params = [
  { team: "madical", score: 649 },
  { team: "oide", score: 658 },
  { team: "mitori", score: 648 }
];
params
  .reverse()
  .reduce(
    (acc, cur) => () => {
      fetch("/m1score", { method: "POST", body: JSON.stringify(cur) })
        .then(setTimeout(acc, 1000));
    },
    () => {}
  )
  .call();

```

## 解説

### reduce
今回の一番のポイントです。
reduceは配列を頭から順々に処理して一つの出力を得る関数です。これを使って入れ子関数を作ります。
accは作成途中の関数、curは次の配列要素（API実行のパラメータ）です。

内側からみていきましょう。

```javascript
// 現在のパラメータを使ってfetchした後、１秒後にacc()を実行するようにしています。
fetch("/m1score", { method: "POST", body: JSON.stringify(cur) })
.then(setTimeout(acc, 1000));
```

```javascript
// 即時実行しないように関数オブジェクトにしてあげます。
() => {fetch(...).then(...);}
```


```javascript
// ()=>{}を初期値に、関数オブジェクトを次々に入れ子にしていっています。
// ()=>{}は何もしない関数です。(他にもっといい書き方があったら教えてください）
reduce( (acc, cur) => 関数オブジェクト , () => {} );
```

### call()
reduceの結果が出来上がったものは関数オブジェクトなので、call()で呼び出してあげます。

### reverse()
これはなくてもよいのですが、これがないと配列の後ろから順にAPI callされてしまいます。
というのもreduceは配列のはじめから処理し、入れ子関数を内側から作っていくため、
入れ子関数の一番外側（＝一番最初に呼ばれるAPI）は配列の最後の要素が使われるのです。

直感的な呼び出し順にしたい場合は、上記のように、reverseを使って逆順にします。

## まとめ

非同期処理とシーケンシャル処理は両立します。
皆さんもjavascriptともっと仲良くなりましょう！
Gemfile内のgem 'foge', require: false とはなんぞや？

railsにおける自作アプリにてRubocopを導入しようと思い立ち、いろいろな記事を拝見していた際に下記の記述が必要なことを知った。

```ruby:Gemfile
gem 'rubocop', require: false
```

今までは気にしていなかったが、確かにこれまでも `, require: false` という記法を目にしていたが
あえてスルーしていた。

今回は `, require: false`　についてまとめたいと思う。

#結論：コマンドラインから実行する必要があるが、コード内では必要のないGemの時#

Gemファイルに `, require: false`（`:require => false`）を設定すると、bundleはGemをインストールするが
Gem自体のコードはロードしない。
情報セキュリティ

##XSS（クロスサイトスクリプティング）
javaで行える全ての動作で攻撃可能
railsではデフォルトでセキュリティの設定がされているため、この攻撃に対して安全に利用できる。
何らかの手法で自身のアプリに入り込まれ、セキュリティ設定を無効にされた場合、
cookieを盗まれて情報が流出したり、マルウェアにアクセスさせられ、ウイルスに感染してしまう。

##SQLインジェクション
アプリケーション外部からSQL文を挿入されること。
挿入されることにより、DB内の情報を全て盗まれたり、アカウントを乗っ取られたりする。
対策は、「」'や「/」のエスケープ文字を使うこと、バインド機構を使用すること。

バインド機構とはDB側からSQL文を発行し、その中の必要な情報だけを入力出来るようにする仕組み。

```sql.rb
SELECT * FROM user WHERE user_id=? AND password=?
```

DBから上記のようなSQL文が発行される。この文中の？の値だけ入力可能。
railsでは、デフォルトでここまで入力されるようになっている。

自ら入力する必要があるならば
find_by_sqlメソッドを利用し、？によって入力値を指定してあげる必要がある。

##CSRF(クロスサイトリクエストフォージェリ)
パスワードの変更、ECサイトでの購入などの重要な処理を行うときに攻撃から守る。
対策は、その人個人しか知らないような秘密情報の埋め込み（トークン）を使用すること、
パスワードの再入力を促す画面を設定すること、
リファラーのチェック（どのような経路でサイトにアクセスしたか）が挙げられる。

これは、重要な処理を行うときにだけ使用する。
（全てにおいて適用すると何度も入力することになる。DBとのやりとりも多くなるため動作が遅くなる。）

##セッションハイジャック
セッションIDを乗っ取られる。これを乗っ取られると個人情報の閲覧や送金、購入などほぼ何でも出来る。
対策としてはSSLを有効にすること。
railsでは

```フォルダ名/confing/environment/production.rb
config.force_ssl = true
```

を有効にすることでSSLが使用出来る。
Node.jsを勉強する③ - Javascriptファイル間の連携

##はじめに

前回は[テキストファイルの作成](https://qiita.com/arata0520/items/1256228ba79c902f64c5)についてまとめました。
今回はJavascriptファイル間の連携について記事にします。
##教材
Udemy
The Complete Node.js Developer Course (3rd Edition)
https://www.udemy.com/course/the-complete-nodejs-developer-course-2/

##ファイルの作成
連携したいJavascrptのファイルを２つ作ります。
それぞれ、app.jsとutils.jsと名付け、utils.jsにconsol.logを用いてメッセージを書きます。

```javascript:utils.js
console.log("The JS files are connected!")
```

##ファイルの連携
今回は、utils.jsをapp.js上で呼び出します。
requireを用いますが、その際、呼び出したいファイル（今回はutils.js)までの相対パスで書きます。

```javascript:app.js
require('./utils.js')
```

今回は、utils.jsとapp.jsを同じ階層に配置したので、"."を用いて階層をひとつ戻ってから、utils.jsと書きました。
ターミナルでnode app.jsを実行すると、"The JS files are connected!"と表示されます

```terminal:ターミナル
node app.js
The JS files are connected!
```

##他ファイルのオブジェクトを使う
今度は、他のファイルの中で定義されたオブジェクトを使います。
まずは、呼び出したい先のファイルに
module.exports =　取り出したいオブジェクト名　と書くことで、ファイル全体をエクスポートします。

```javascript:utils.js
const name = "Tom"
module.exports = name 
```

app.jsで呼び出し、console.logを用いて、出力してみます。
utils.jsはオブジェクトになっているので、変数を定義してapp.js上でも使えるようにします。

```javascript:app.js
const utils= require('./utils.js')
console.log(utils)
```
ターミナルで、app.jsを実行すると、utils.jsの変数nameの中身が取り出せます。

```terminal:ターミナル
node app.js
Tom
```

##複数のオブジェクトを取り出す場合
ひとつのjsファイルから複数のオブジェクトを取り出す場合は、配列にします。

```javascript:app.js
const name = "Taro"
const address = "Tokyo"

module.exports = {
    name: name,
    address: address
}
```
取り出すときは、配列名を定義して、配列名.要素名で取り出します。

```javascript:app.js
const utilsVariables = require('./utils.js')

console.log("My name is " + utilsVariables.name)
console.log("I live in "+utilsVariables.address)
```
実行結果は以下の通りです。

```terminal:ターミナル
node app.js
My name is Taro
I live in Tokyo
```
備忘録（そのほかの条件分岐、繰り返し処理）

### if文以外の条件分岐

####case文
複数の条件を指定する時に、if文のelsifを重ねるよりもcase文を使用した方がシンプルにコードを書くことができる

例)if文

```ruby
country = "Japan"

if country == "Japan"
 puts "こんにちは"
elsif  country == "America"
 puts "Hello"
elsif  country == "France"
 puts "Bonjour"
elsif  country == "China"
 puts "你好"
elsif  country == "Italy"
 puts "Buon giorno"
elsif  country == "Germany"
 puts "Guten Tag"
else
 puts "..."
end
```

例)case文

```ruby
country = "Japan"

case country
when "Japan"
 puts "こんにちは"
when "America"
 puts "Hello"
when "France"
 puts "Bonjour"
when "China"
 puts "你好"
when "Italy"
 puts "Buon giorno"
when "Germany"
 puts "Guten Tag"
else
 puts "..."
end
```

###条件つきの繰り返し処理

#### while文
繰り返し処理を行うためのRubyの構文
指定した条件が真である間、処理を繰り返す

例)

```ruby
number = 0

while number <= 10
 puts number
 number += 1
#10になるまで処理が繰り返される
end
```

#### 無限ループ
処理が永遠に繰り返されること
上の例のnumber += 1を削除した場合無限に0が出力されてしまう
ループから抜け出すにはbreakを使用する

```ruby
number = 0

while number <= 10
 if number == 5
   break
#特定の条件になったらループを脱出できる
 end
 puts number
 number += 1
end
```
【解決方法】[rejected] master -> master (non-fast-forward) エラーで pushできない 【コンフリクト】

#問題
ターミナルにてGitHub DesktopのmasterブランチをHerokuにpushしようとしたところ下記エラーが生じ、pushができない。

```Terminal
 % git push heroku master
To https://git.heroku.com/アプリ名.git
! [rejected]        master -> master (non-fast-forward)
error: failed to push some refs to 'https://git.heroku.com/アプリ名.git'
hint: Updates were rejected because the tip of your current branch is behind
hint: its remote counterpart. Integrate the remote changes (e.g.
hint: 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

```

#原因
Heroku上の今までpushしたcommit履歴内容と、pushしたいGitHub Desktopのmasterブランチのcommit内容でコンフリクトしたため、エラーが生じた。

#解決
以下の記述でpushする。

```Terminal
 % git push -f heroku master
```
このpushでは、GitHub Desktopのmasterブランチのcommit内容で、Herokuの今までpushしたcommit履歴内容を強制的に上書きしてpushする。

コンフリクトの解消法の一つとしてぜひご活用ください。
ラズパイにVNC接続をする。（tightvncserver）

## 概要
* ラズパイへVNC接続をします。
* MACから接続を行うため、tightvncserverを利用します。
    * 理由は後述

## 前提
* ラズパイがSSHなどでコンソール操作ができること。

## 手順
### ラズパイで準備
* tightvncserverをインストール

```
$ sudo apt install tightvncserver
```

* tightvncserverを起動
    * パスワード入力を求められるので入力する。
    * パスワードはVNC接続時に利用される。

```
$ tightvncserver
```

* tightvncserverの自動起動設定（スクリプトを作る）
    * 新規でファイルを作成する。


```/etc/init.d/vncboot
#! /bin/sh    

### BEGIN INIT INFO
# Provides: vncboot
# Required-Start: $remote_fs $syslog
# Required-Stop: $remote_fs $syslog
# Default-Start: 2 3 4 5
# Default-Stop: 0 1 6
# Short-Description: Start VNC Server at boot time
# Description: Start VNC Server at boot time.
### END INIT INFO

# /etc/init.d/vncboot

USER=pi
HOME=/home/pi

export USER HOME

case "$1" in
    start)
        echo "Starting VNC Server"
        #Insert your favoured settings for a VNC session
        su $USER -c '/usr/bin/vncserver :1 -geometry 1280x720 -depth 24'
        ;;

    stop)
        echo "Stopping VNC Server"
        su $USER -c '/usr/bin/vncserver -kill :1'
        ;;

    *)
        echo "Usage: /etc/init.d/vncboot {start|stop}"
        exit 1
        ;;
esac

exit 0
```

* ファイルの権限を変更

```
$ sudo chmod 755 /etc/init.d/vncboot
```

* 設定反映

```
sudo update-rc.d vncboot defaults
```

* 再起動
    * やる必要はないが自動起動することを確認


```
$ reboot
```

## 接続方法
### MACから接続
* 「Finder」 > 「移動」 > 「サーバへ接続」 > `vnc://<IPアドレス>:5901` > 「接続」
    *  パスワードを聞かれるので上記で入力したパスワードを入力
【Vue.js】IMEで変換中の文字列を取得する

# v-modelだとIME変換中の文字は取得できない。

```vuejs:出来ない例
<input type="text" v-model="message">
// これだと変換中なにも取得できない...
```

## ドキュメント見てたらそれらしきものを発見
>IMEを必要とする言語 (中国語、日本語、韓国語など) においては、IME による入力中にv-modelが更新を行わないことに気づくでしょう。このような入力に対しても同様に扱いたい場合は、代わりにinput イベントを使用してください。
> [フォーム入力バインディング/基本的な使い方](https://v3.ja.vuejs.org/guide/forms.html#%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E4%BD%BF%E3%81%84%E6%96%B9)

## この書き方でできるらしい

```vuejs:app.js
<input
  v-bind:value="message"
  v-on:input="message = $event.target.value"
>
```
>[コンポーネントの基本/コンポーネントで v-model を使う](https://jp.vuejs.org/v2/guide/components.html#%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%A7-v-model-%E3%82%92%E4%BD%BF%E3%81%86)

<p class="codepen" data-height="391" data-theme-id="light" data-default-tab="js,result" data-user="takumikunn15" data-slug-hash="jOMzpoY" style="height: 391px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="【Vue.js】フォーム入力バインディングでIMEに対応">
  <span>See the Pen <a href="https://codepen.io/takumikunn15/pen/jOMzpoY">
  【Vue.js】フォーム入力バインディングでIMEに対応</a> by 匠君 (<a href="https://codepen.io/takumikunn15">@takumikunn15</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
部屋に置いてあるワインをそのまま飲んでよいか調べるために今の室温を測る。

#ワインの飲み頃の温度に応じた色で光る
白に光った。
ピンクにも変わったりするので大体9℃前後です。
<img width="400px" alt="obniz.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737206/dfd40a7b-a681-00c3-76a7-27d6172d485a.jpeg">

#冬だから、部屋にお酒を置いておくだけでちょうどよい？
夏だったらキリっと冷やした白ワインを飲むときに冷えた状態に必要があって、いつも飲む直前にお店で買ってきていました。（そもそも保存の温度に気を使う必要があるので）

冬だったら室温でもちょうどよい温度になるのでは？と思い、
今の室温がどのワインの温度ぐらいかわかるようにLEDを光らせてみました。

ソースのなかに温度帯を細かく書いてますが、
大体でやってみてます。


#ソース
```javascript
const Obniz = require('obniz');
const obniz = new Obniz('obniz_id');  // Obniz_IDに自分のIDを入れてください

obniz.onconnect = async function () {
    //温度センサーの設定
    const tempsens = obniz.wired('LM60', { gnd: 9, output: 10, vcc: 11 });
    var led = obniz.wired("WS2811", {gnd:0, vcc: 1, din: 2});
    //温度センサーの値が変わったら実行される
    tempsens.onchange = function (temp) {
        
        //スパークリングワイン　　　　　　　6～8度
        // 白ワイン（甘口）　　　　　　　　　6～8度
        // 白ワイン（辛口）　　　　　　　　　10度前後
        // 赤ワイン（ライトボディ）　　　　　12～14度
        // 赤ワイン（フルボディ）　　　　　　16～20度
        if(temp >= 6 && temp < 9){
            led.rgb(255, 0, 255); // Pink

        }else if (temp >= 9 && temp < 12){
            led.rgb(255, 255, 255); // White

        }else if (temp >= 12 && temp < 20){
            led.rgb(255, 0, 0); // Red

        }else if (temp < 6){
            led.rgb(0, 255, 255); // Blue
        }else{
            led.rgb(0, 0, 0); // Black
        }
        console.log(temp);
    };
}
```
AWS初期設定

**アカウント解約**
ルートアカウントから行うべし

**アカウント作成**
アカウント作成ページで
・メールアドレス
・パスワード
・パスワードの確認
・AWSアカウント名
を記入してして続行

連絡先情報の記入
・パーソナルを選択
・フルネーム
・電話番号
・国
・住所
・郵便番号

クレジットカード名を記入,
SNSメールを受け取る

サポートプランの選択
ベーシックプランを選択
*****
**最初にすること**
・MFAを有効化する
・管理者用IAMユーザー作成
・AWSCloudTrailを有効化
・AWSの請求アラートを有効化
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/709175/0ff4193e-834b-d73a-c560-12a4328a7bfb.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/709175/2c7991c3-85e4-af07-2315-f9249f625443.png)
次にﾊﾟｽﾜｰﾄﾞポリシーの変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/709175/732acd11-5a85-10e5-756d-649e2697e9c1.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/709175/016e39ee-8435-b00f-22e7-a94a15291587.png)
**IAMユーザー作成**
ポリシーはまずは既存で
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/709175/9117e61d-9411-c67a-895b-4c5a4b7df857.png)
そしてadminポリシーを付与
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/709175/5784014d-b9d8-1d0f-9c36-d42fd39cfee0.png)
**IAMグループの作成**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/709175/7e84583b-b59b-0fb7-d9f5-9bbaf8ec72c3.png)
グループにadminポリシーを付与
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/709175/a7619417-7b6f-6117-7093-b1f5806a16c0.png)
グループにユーザーを追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/709175/00e134b3-17e8-be5c-9ebe-81426922f439.png)
ユーザー画面の認証情報タブのコンソールのサインインリンクから
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/709175/b1564b28-a846-ec58-7f18-7c934ea753e0.png)
**cloudTrailの設定**
ユーザーのアクセスログの取得監視
AWSユーザーの操作をロギングする
(APIコールやユーザのサインインアクティビティ)
CloudTrailログは暗号化してS3に保存
KMS暗号化もサポート
デフォルトで90日ログ
無料

**請求アラートの設定**
ルートアカウントで設定する
CloudWatchでアラートを設定する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/709175/ac96abd3-be6f-0c32-3995-0a3f9baf1f89.png)

無料使用額の設定
Billingの設定から設定する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/709175/0c3ceaf2-292b-8052-e241-de01c4bc6afc.png)
CloudeWatchから設定する

バージニア北部に切り替え
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/709175/73a53053-1e72-7daa-4795-f143e37a5118.png)
メールにサブスクリプションのcofirmが来ているので確認する
最後にリージョンを東京に戻す
AWS CLI

ssh -i ~/.ssh/shinpython_sample.pem ubuntu@54.178.46.8


ubuntuでAWS CLIをするには
https://s10i.me/whitenote/post/14
を参照
unzipをインストールする必要があるが上記の通りでできる。

```
aws --version
aws help
aws configure
aws s3 ls
```
AWSのUbunt20.04 LTSでDockerインストール

参考サイト
https://docs.docker.com/engine/install/ubuntu/

レポジトリーをセットアップ

```
sudo apt update && sudo apt upgrade

sudo apt install \
    apt-transport-https \
    ca-certificates \
    curl \
    gnupg-agent \
    software-properties-common

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

sudo apt-key fingerprint 0EBFCD88

sudo add-apt-repository \
   "deb [arch=amd64] https://download.docker.com/linux/ubuntu \
   $(lsb_release -cs) \
   stable"
```
ドッカ―エンジンのインストール

```
sudo apt update

sudo apt install docker-ce docker-ce-cli containerd.io

apt-cache madison docker-ce

sudo apt install docker-ce=5:19.03.13~3-0~ubuntu-focal docker-ce-cli=5:19.03.13~3-0~ubuntu-focal containerd.io
```

正常インストールの確認

```
sudo docker run hello-world
```

<h1>ドッカ―エンジンのアンインストール</h1>
動作未確認

```
sudo apt-get purge docker-ce docker-ce-cli containerd.io

sudo rm -rf /var/lib/docker
```
【Ruby on Rails Tutorial】3章のテストでエラー

# 【Ruby on Rails Tutorial】3章のテストでエラー
<!-- 発端や概要を記載 -->
　Ruby on Rails Tutorial 3章の「3.3.1 最初のテスト」をやってみたらエラーが起きて、ライアーゲームのBGMが脳内で流れると共に膝から崩れ落ちて就寝した。
　あと本記事のコード中ではUser名が丸見えであるが、Qiitaで使っている名前と同じなので大丈夫だろう。そうだろう？

# 目次
<!-- タイトルとアンカー名を編集 -->
1. [どういうエラー？](#どういうエラー)
1. [解決法は？](#解決法は)
1. [参考文献](#参考文献)

<!-- 各チャプター -->
<a id="#どういうエラー"></a>
# どういうエラー？

以下のようなエラーが発生。

```言語名:ターミナル
PS C:\Users\right\Desktop\Web\Ruby\rails_tutorial\sample_app> rails test
Run options: --seed 4233

# Running:

E

Error:
StaticPagesControllerTest#test_should_get_help:
ActionView::Template::Error: Permission denied @ rb_file_s_rename - (C:/661900.45188.508323, C:/Users/right/Desktop/Web/Ruby/rails_tutorial/sample_app/tmp/cache/assets/sprockets/v4.0.0/jm/jmKa6krLovmtBf-DxAwKf051KFbzekTxfeLnbW5-3lU.cache)
    app/views/layouts/application.html.erb:9
    test/controllers/static_pages_controller_test.rb:10:in `block in <class:StaticPagesControllerTest>'


rails test test/controllers/static_pages_controller_test.rb:9

.

Finished in 7.447825s, 0.2685 runs/s, 0.1343 assertions/s.
2 runs, 1 assertions, 0 failures, 1 errors, 0 skips
```

エラー文を読み解いてみる。とかそういったことはこの記事では面倒なのでしない。
いや実際に自分はやったが昨日のことなので忘れた。投稿者の脳みそは揮発性メモリなのだ。
具体的にやって解決した方法だけ書く。

####

<a id="#解決法は"></a>
# 解決法は？

まず悪さをしていたのは以下の「これを直すんや」の部分である。
ちなみに正確に言うと悪いのはこいつではない。
テストコードのテストを１つずつやってみたら、すんなりと成功(GREEN)するのだ。
つまり、悪さをしているのは並行処理を行うことでエラーが起きるRailsの方である。

```Ruby:system>test_helper.rb
ENV['RAILS_ENV'] ||= 'test'
require_relative "../config/environment"
require "rails/test_help"

class ActiveSupport::TestCase
  # Run tests in parallel with specified workers
  parallelize(workers: :number_of_processors, with: :threads) # ←これを直すんや

  # Setup all fixtures in test/fixtures/*.yml for all tests in alphabetical order.
  fixtures :all

  # Add more helper methods to be used by all tests here...
end

```

```Ruby:system>test_helper.rb
  parallelize(workers: 1) # ←こうするんや
```

そこのコードの意味は１ミリも知らない。しかし多分並行処理しますよ的なアレだろう。多分知らんけど。

こうしてもう一度テストを実行すると、見事に成功した。ここでワールドカップで優勝した時ぐらいの雄叫びを上げる。
####このエラーを解決するのに3時間かかったからな！！！！！！！！！

<a id="#参考文献"></a>
# 参考文献
- [Ruby on Rails Tutorial 3章](https://railstutorial.jp/chapters/static_pages?version=6.0#cha-static_pages)
- [わいの脳みそ](URL)
- [ほかにもあったが忘れた](URL)
Vue.js学習記録4

20200104

# いいね！機能の実装

https://gyazo.com/08c203c6052fe9033d50ece3763b0d22

動画のようにクリックするといいね！の数が増えていくような機能をcomponentにつける。

### componentにクリックイベントを付与

```js
template: '<div><button @click="countUp">Like {{ count }}</button></div>',
```

@clickでcountUpメソッドを動かすように設定

### イベントの設定

```js
methods: {
      countUp: function () {
         this.count++;
      }
    },
```

countUpイベントでcountというプロパティの値を1増やすようにした。

### プロパティの設定

```js
data: function (){
      return {
        count: 0
      }
    },
```

`componentのデータは関数で返すことがルール` となっているのでfunction とreturnを使い戻り値の形でプロパティを設定する

こうすることでcomponentに設定したbuttonタグがcountプロパティと連動しこのような挙動になる。

https://gyazo.com/08c203c6052fe9033d50ece3763b0d22



# プロパティの設定

componentに独自にプロパティを設定し、機能は同じだが表示が一部異なるようなボタンを作る。

挙動は以下の通り

https://gyazo.com/370dd6289c981f4d37765013bb646553



### プロパティを付与

html内でcomponentを呼び出している箇所に対しプロパティを付与する

```html
<div id="app">
    <like-component message="Like"></like-component>
    <like-component message="Awesome"></like-component>
    <like-component message="Great"></like-component>
    <like-component></like-component>
  </div>
```

messageプロパティを今回は付与した

js内でプロパティの設定

```js
template: '<div><button @click="countUp">{{ message }} {{ count }}</button></div>',
```

{{ message }}の部分でmessageプロパティの値をbuttonタグ内に表示するように設定

### プロパティのオプションの設定

js内でpropsを使うとプロパティの設定ができる。

```js
props: {
      message: {
        type: String,
        default: 'Like'
      }
    },
```

今回はmessageプロパティをstring型で設定し、default値をLikeとした。これによりプロパティを設定していないcomponentのmessageプロパティは'Like'になる。

https://gyazo.com/370dd6289c981f4d37765013bb646553



# $emitを使用して親要素にデータを渡す

動画のようにトータルでのいいね！数を参照するような機能を実装する

https://gyazo.com/4a782b5b3cece37d71bd94f28a22d498



### html内でトータルのいいね！数を管理する要素とプロパティを作成

```html
<p>Total Likes: {{ total }}</p>
```

ここのtotalプロパティの値をcomponent内のbuttonタグと連動させる。



### 親要素にプロパティとそれを増やすためのメソッドを設定

```js
data: {
      total: 0
    },
    methods: {
      incrementTotal: function () {
        this.total++;
      },
    }
```

初期値0のtotalプロパティをincrementTotalメソッドで1ずつ増やす。あとはincrementTotalメソッドをbuttonがクリックされたときに動かすようにしたい。



### $emitを用いてbuttonタグのクリック処理にincrementイベントを付与する

```js
template: '<div><button @click="countUp">{{ message }} {{ count }}</button></div>',
methods: {
      countUp: function () {
         this.count++;
         this.$emit('increment')
      }
    },
```

componentのcountUpメソッド内にemitを使用してイベントを付与する。countUpメソッドはクリックした時に発火するのでこれはすなわちクリックした時にincrementイベントが発火しているのと同じ。



### htmlでincrementイベントに対しincrementTotalメソッドを与える

```html
<div id="app">
    <p>Total Likes: {{ total }}</p>
    <like-component message="Like" @increment="incrementTotal"></like-component>
    <like-component message="Awesome" @increment="incrementTotal"></like-component>
    <like-component message="Great" @increment="incrementTotal"></like-component>
    <like-component @increment="incrementTotal"></like-component>
  </div>
```

@incrementでincrementイベントが発火した時に動かすメソッドを定義。ここにincrementTotalを付与することで#appに定義したincrementTotalメソッドを動かす。



こうすることでトータルのいいね！数が全てのいいね！ボタンと連動する。

https://gyazo.com/4a782b5b3cece37d71bd94f28a22d498
Docker環境の更新：Pythonパッケージを追加する

DockerでAnacondaデータサイエンス環境構築後、分析を進めていると、パッケージを追加したくなりました。
既に構築したDockerコンテナに、Pythonパッケージを追加したときのメモです。

# Dockerコンテナに入る

```bash
$ docker exec -it <container> bash
```

# パッケージをインストール

```bash
pip install <package>
```

# Dockerfileを更新する
データサイエンス環境構築したDockerfileが格納されているフォルダに移動し、DockerfileをSublime textで起動して、追記する。

```bash
$ subl Dockerfile
```

※ どこかのタイミングで`docker build`で、まとめてdockerイメージを更新する。