OmniAICreator/Qiita-1.07M huggingface dataset:
posts_controller.rb

class PostsController < ApplicationController
  def index
    @posts = Post.all.order(created_at: :desc)
  end
  
  def show
    @post = Post.find_by(id: params[:id])
  end
  
  def new
    @post = Post.new
  end
  
  def create
    @post = Post.new(content: params[:content])
    if @post.save
      # 変数flash[:notice]に、指定されたメッセージを代入してください
      flash[:notice]="投稿を作成しました"
      redirect_to("/posts/index")
    else
      render("posts/new")
    end
  end
  
  def edit
    @post = Post.find_by(id: params[:id])
  end
  
  def update
    @post = Post.find_by(id: params[:id])
    @post.content = params[:content]
    if @post.save
      flash[:notice] = "投稿を編集しました"
      redirect_to("/posts/index")
    else
      render("posts/edit")
    end
  end
  
  def destroy
    @post = Post.find_by(id: params[:id])
    @post.destroy
    # 変数flash[:notice]に、指定されたメッセージを代入してください
    flash[:notice] = "投稿を削除しました"
    redirect_to("/posts/index")
  end
  
end
Firefoxで特殊なポートに接続する/アクセス制限を回避する

# 0. 概要
Firefoxで`80`や`443`、`8080`以外の一般的ではないポートに接続しようとすると`This address is restricted`と出てしまう。今回はこれを回避したい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95636/7f1b46e9-b304-1526-7bba-348d8bd1b466.png)

# 1. 解決策
URLに以下を入力し`enter`を押す

```
about:config
```

次に、表示された検索窓に以下を入力

```
network.security.ports.banned.override
```

検索に何も引っ掛からなければ`+`マークを押して追加する。
タイプは`string`にする。

内容はポートのレンジを以下のように入力する。

```
1-9999
```

このように設定できれば、通信がブロックされることはなくなる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95636/788ff78f-7dc1-633c-13bf-66e9e3c5b2fd.png)
MacにVisual Studio Code（VSCode）をインストールする

# 最終更新日

2021年4月29日

検証を行ったmacOSのバージョンは下記です。この手順はIntel版Mac・Apple Silicon版Mac両方で共通です。

- macOS Big Sur 11.3

インストールするもののバージョンは下記です。

- Visual Studio Code 1.55.2

この記事が古くなった場合、下記の手順は最新のインストール手順とは異なっている可能性があります。

# Visual Studio Code（VSCode）とは
マイクロソフト社がオープンソースで開発しているテキストエディタです。

# VSCodeのインストール
(1) https://code.visualstudio.com にアクセスしてください。

(2) [Download Mac Universal]ボタンをクリックしてください。

![スクリーンショット 2021-04-28 10.18.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58650/0ee50724-f60b-2319-a2e9-a3d34c11a15f.png)

> 画面右上にある[Download]ボタンをクリックしてもよいのですが、次の画面でOSなどを選択する必要があります。

(3) 次のようなダイアログが表示された場合は、[許可]をクリックしてください。

![スクリーンショット 2020-06-01 14.25.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58650/a0f5aa33-c278-b265-3294-8a68b623130d.png)

(4) ダウンロードされたZIPファイルをダブルクリックしてください。ZIPが展開されます。

> ブラウザの設定によっては、ダウンロード直後に既に展開済みになっていることがあります。その場合は、この手順は不要です。

(5) 作成されたVisual Studio Code.appを、アプリケーションフォルダ（/Applications）直下に移動させてください。

(6) Launchpadを開いて、[Visual Studio Code]をDockに追加してください。

![スクリーンショット 2021-04-28 10.22.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58650/d844212a-eca5-89e6-33b1-d2cc5ad58b66.png)

(7) Dockから[Visual Studio Code]を起動してください。

![スクリーンショット 2021-04-28 10.22.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58650/6debe323-ca63-5783-9220-9912a0e43d2a.png)

(8) [開く]をクリックしてください。

![スクリーンショット 2021-04-28 10.20.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58650/f2bc8658-9a2e-c05b-e3bf-02d2b143f9bc.png)

(9) Visual Studio Codeが開きます。

<img width="1024" alt="スクリーンショット 2020-06-01 14.30.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58650/e2489ba4-53ee-69b2-cca8-432369060edd.png">
とりあえずAnsibleから鍵認証するための手順

# はじめに
Ansible から対象ホストに対してSSHで接続するための手順です。
え？「それをAnsibleでやるべき」だって？そんなものは後だ！

# とりあえず前提
* Ansible側も対象ホスト側もRHELを使用
* Ansibleはインストール済み

# とりあえず準備手順
### Ansible側の作業
と言ったもののAnsible側で特に何かやる必要は無く、普通に鍵認証が設定されていればOKです。
すでに鍵認証設定が完了している場合は、ページの下の方だけ見てください。

---
まずはAnsible側で公開鍵と秘密鍵を作成。
（ここでは"ansi-user"というユーザで進めます）

```
$ ssh-key -t rsa
```
`Enter file in which to save the key:`と聞かれるので、そのままEnter。
次に`Enter pssphrase (empty for no passphrase):`と聞かれるのでパスフレーズを入力
`Enter same passphrase again:`で、先程と同じパスフレーズを入力します。

上記のコマンドを実行すると、`/home/ansi-user/.ssh`にid_rsa(秘密鍵)と`id_rsa.pub`(公開鍵)が作成されます。

秘密鍵はどこに配置しても良いので、今回は移動せずに使用します。
配置はどこでも良いのですが、パーミッションの変更は必要なので、以下のコマンドを実行します。

```
$ chmod 600 ~/.ssh/id_rsa
```

### 対象ホスト側の作業
その後、対象ホストにログインしてansi-userを作成します。

```
$ useradd ansi-user
```

そして、鍵認証に必要なディレクトリとファイルを用意

```
$ su ansi-user
$ mkdir -p /home/ansi-user/.ssh
$ chmod 700 /home/ansi-user/.ssh
$ touch /home/ansi-user/.ssh/authorized_keys
$ chmod 600 /home/ansi-user/.ssh/authorized_keys
```
.sshディレクトリが作成できたら、Ansible側のid_rsa.pubを対象ホストの`/home/ansi-user/.ssh`にコピーして、authorized_keysの末尾に追加します。

```
$ cat /home/ansi-user/.ssh/id_rsa.pub >> /home/ansi-user/.ssh/authorized_keys
```
AnsibleではSudo権限も必要なので、対象ホスト側のvisudoを編集します。

```
# visudo
```
末尾に以下の文字列を追加。

```
ansi-user ALL=(ALL) NOPASSWD:ALL
```

### 疎通確認
ここまでやれば普通にSSHで接続できるので、試してみましょう。

```
$ ssh -l ansi-user -i /home/ansi-user/.ssh/id_rsa [対象ホスト名 or IPアドレス]
```
上記のコマンドでログインできれば準備は完了です。

# AnsibleでSSH接続

### 疎通確認
まずはAnsibleでも疎通確認をしてみましょう。
(hostsはInventoryファイルです。別名で利用している場合は適宜変更してください）

```
$ ansible [対象ホストのIPアドレス] -m ping -i hosts -u ansi-user --private-key="/home/ansi-user/.ssh/id_rsa"
```
下記のようなメッセージが返ってこれば疎通確認も完了です。

```
[対象ホストのIPアドレス] | SUCCESS => {
    ・・・(ここに何か記述されるかも知れません)
    "changed": false,
    "ping": "pong"
```

### playbookコマンドを投げる
それでは遂にplaybookコマンドを投げてみます。
（playbook.ymlはplaybookファイルです。別名で利用している場合は適宜変更してください）

```
$ ansible-playbook -i hosts playbook.yml -u ansi-user --private-key="/home/ansi-user/.ssh/id-rsa"
```

上記のコマンドで問題なくplaybookコマンドが実行されれば完了です。

# ssh-agentに秘密鍵を登録する
上記のコマンドだと、発行毎に毎回パスフレーズを入力する必要がありますが、そんな事してられない方はssh-agentに秘密鍵を登録してください。

```
$ ssh-add ~/.ssh/id_rsa
```
上記のコマンドを入力するとパスフレーズを聞かれますので、入力してください。
**注意：再起動する毎に、初回接続時にパスフレーズを聞かれます**

#### Could not open a connection to your authentication agent.と怒られる場合
ssh-agentを起動してやる必要があります。

```
$ ssh-agent
```
または（↑だと失敗する場合は）

```
$ eval `ssh-agent`
```
と入力してください。
その後、`ssh-add`を実行すれば行けると思います。

秘密鍵を登録した後は

```
$ ssh [対象ホスト]
```
や

```
$ ansible-playbook -i hosts playbook.yml
```
のみでSSH接続する事が可能です。多分。

#### 初回ログイン時に「The authenticity of host ...」と言われたく無い人向け
段々脱線してきてますな。

それはさておき、sshで ~/.ssh/known_hosts にないマシンにアクセスする場合

```
The authenticity of host '[対象ホスト] (IPアドレス)' can't be established.
RSA key fingerprint is (略).
Are you sure you want to continue connecting (yes/no)?
```
と聞かれる事があります。
このメッセージが表示されるのが煩わしい時は、~/.ssh/configに下記の設定を書くことで抑制できます。

```config:~/.ssh.config
host [対象ホストのIPアドレス]
  StrictHostKeyChecking no
```
また、~/.ssh/configはパーミッション600にしてやる必要があります。

```
$ chmod 600 ~/.ssh/config
```
以上。お目汚し失礼しました。
【Netlify】HTMLファイルを1秒でデプロイする方法

#1 　デプロイしたいフォルダを用意

```
pokemon-site/
           |- src/
               └ img/
                  └ poke.jpg
           |- index.html
           |- styles.css
```

``index.html``にJavaScriptも書いています。
リポジトリはこちら
https://github.com/wafuwafu13/pokemon-site


#2　Netlifyにアクセスしてドラッグ&ドロップ

<img width="1273" alt="スクリーンショット 2020-06-01 14.23.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/921c3645-ee1b-1775-bff9-a6618651acc5.png">

[Netlify Drop](https://app.netlify.com/drop) にアクセスし、「Drag and drop your site folder here」と書かれている部分にフォルダ(今回の場合は``pokemon-site``)をドラッグ&ドロップ

#3　1秒待つ

<img width="747" alt="スクリーンショット 2020-06-01 14.23.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/3a571894-c7f8-133f-a629-c85424421bc5.png">

https://nervous-curran-86c841.netlify.app/

URLが生成される。
このURLは変更できるし、Netlifyにログインしている場合は有効期限がない。
プログラミングスクールに入学する前にしたい二つの事

某プログラミングスクールを卒業して、本格的な就職活動に入りました。
スクールを卒業した区切りとして、この記事をまとめました。

## 結論
1. アフィサイト以外の情報を得る
2. progateを一周してから考える

## 1. アフィサイト以外の情報を得る
スクールへの入学を検討している人は恐らく”未経験 エンジニア 転職”などのキーワードで検索したでしょう。
そして、最初に表示されるのはアフィリエイトのサイトだけでしょう。
某インフルエンサーの方は ”髪を切ったら良いか床屋に聞くな” という言葉をよく紹介しています。
スクールに入るかどうか判断するための情報をアフィリエイトサイトから得るのは辞めましょう。
知り合いにエンジニアがいればベストですが、そうでなければtwitterで評判を検索してみてください。
スクールに入る事自体に否定的な意見も散見されます。
フラットな視点で頭を冷やして、それでもスクールに行くべきと判断したら入校しましょう。

## 2. progateを一周してから考える
知り合いにエンジニアのいない10ヶ月前の私に相談されたらどう答えるかを考えました。
その結論が”progateを一周してから考える”です。
プログラミングが向いているか、ある程度の判断基準になるのではないでしょうか。

1. html・cssの段階でつまづいていたら、エンジニアになるのはやめたほうが良いかもしれません
2. javascript・rubyをそこまで苦労せずこなせたのであれば、スクールを検討しても良いかもしれません
3. railsまで一周して特に苦もなくやれた人は、独学で良いと思います。そのままｒａｉｌｓチュートリアルをやりましょう

もちろん個人の感想なので一切の責任を負いませんが、
現役のエンジニアにアンケートを取ってみたいものです。


## 追記
ちなみに、
railsパートで訳わからん！！と絶望する必要はありません。
あのディレクトリ構成を最初からイメージできる人なんていません。(よほどの天才か他の言語の経験でも無い限り)
独学であろうと、スクールに入ろうと、とにかく数を打つだけです。
私の場合、スクールのカリキュラムをコピペしながら簡単なCRUDアプリを５回ぐらい作ったら何となく見えてきました。


## 最後に
私のスペック
◾️今年34歳
◾️そこそこ有名な大学文系学部卒業 ➡️ フリーター ➡️ 事務職
◾️前職でvbaの基本はかじっていた

スクールの実態などは別記事かnoteにまとめようと思います。
[備忘録]SQLで日付を年度に変える

4月始まり3月終わりで集計する必要があったので作成した。

- 作成したSQL

```sql
SELECT my_date,
       CASE WHEN EXTRACT(MONTH FROM my_date) < 4 
            THEN FORMAT_DATE("%Y", DATE_SUB(my_date, INTERVAL 1 YEAR)) 
            ELSE FORMAT_DATE("%Y", my_date)
            END AS JP_cal
  FROM UNNEST(GENERATE_DATE_ARRAY("2020-01-01", "2020-12-31", INTERVAL 1 MONTH)) AS my_date
```

- やっていること

FROMで、指定日から指定日までの日付を月ごとに用意し、
SELECTのCASEで、ある日付の月が4未満であれば、前年の年を
そうでなければ今年の年を出力する。

- この後

この後は必要なテーブルにJOINして集計に使いました。
has-oneとhas_manyの違いについて、まとめてみる

## はじめに
railsしっかり勉強し始めて、半年くらいたちます。(多分)
最近学んだこと多いので、アウトプットしていきますー。
ちょっと説明下手だったり、間違ってたりする部分あるかもしれないので、ご了承ください！！

## has_oneとhas_manyって？
両方とも、モデルの関係定義に使われるものです。

`has_one`とは、1つのモデル(親)に対して、１つのモデル(子)を持つこと(1対1の関係を持つ)ができるということを定義する場合に使います。
例:)1つの投稿に対して、画像を1枚添付することができる。

`has_many`とは１つのモデル(親)に対して、たくさんの同じモデル(子)を持つこと(1対多の関係を持つ)ができることを定義する場合に使います。
例:)1つの投稿に対して、画像を複数枚添付することができる。

## 違いについて
`has_one`や`has_many`で関連づけられたモデルを親と関連づけて作成したい場合、それぞれ作成方法が異なるので、気をつけましょう！

## 実際のコードを見てみる

```画像.rb
class Image < ApplicationRecord
  mount_uploader :image, ImageUploader
  belongs_to :tweet_image, foreign_key: :tweet_id, optional: true  #optional: trueをつけることによって、外部キーがなくても、保存できる
end
```

```モデル.rb
class TweetImage < Tweet
  validates :content, presence: true, length: { maximum: 140 }
  belongs_to :user
  has_one :image, foreign_key: :tweet_id
  accepts_nested_attributes_for :image, allow_destroy: true
end
```

ここのコードだと、`accepts_nested_attributes_for :image`を使って、`TweetImage`を保存する時、同時に子モデルの`Image`を保存するので、`Image`モデルのファイルに`optional: true`をつけて、外部キーが存在しなくても保存できるようにしておくことが必要です。


```.rb
class TweetsController < ApplicationController
  before_action :authenticate_user!
  def new
    @tweet = TweetImage.new
    @tweet.build_image #has_oneの関係の場合
  end
```

```.rb
class TweetsController < ApplicationController
  before_action :authenticate_user!
  def new
    @tweet = TweetImage.new
    @tweet.images.build #has_manyの関係の場合
  end
```

上記は私が、制作物を作った際につかっているコードです。
関係性を図で表すとこんな感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416392/b321d07a-1e5e-ca7f-5220-bfbd83c127a0.png)

TweetとTweetImageはSTIを使った継承関係で、
TweetImageは`has_one`で画像(Imageモデル)を持っています。
コントローラはTweetのコントローラのみで管理しているので、画像を添付する場合のために必ずはじめはTweetImageである必要がありました。(accepts_nested_attributes_forを利用しているため、Formの部分に画像添付の部分を出せなくなってしまうため。)

newでモデルを作ることもできますが、IDを１回ごとに渡さないといけないので、少し面倒です。`build`を使うと、自動でIDを入れてくれるので、簡潔にコードを書くことができます。

[buildとnewの違い参考ページ](https://www.ryotaku.com/entry/2019/03/28/new%E3%81%A8build%E3%81%AE%E9%81%95%E3%81%84%EF%BC%88Ruby_on_Rails%EF%BC%89#%E5%90%8C%E3%81%98%E6%A9%9F%E8%83%BD%E3%82%92%E6%8C%81%E3%81%A4%E4%BA%8C%E3%81%A4%E3%81%AE%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89)

## 最後に
説明が物足りてないところがありますが、ここで終わります！
ここ違うよってとこありましたら、コメントでご指摘お願いします！！
OSC2020online/NagoyaのYouTube配信を管理した話

##IT素人がOSConline/nagoyaのYouTube配信をサポート
5月30日の朝からYouTubeの管理画面をさわり続けました。

・ZOOMにYouTubeの配信情報を設定　（前日までに、アカウント提供者が設定）
・ZOOMで配信を開始
・YouTubeに映像が来てるのを確認
・配信開始する旨、slackで連絡
・配信開始ボタンを押す

と、やったことは、こんなところ

##困ったこと
・ZOOMにYouTube配信情報の設定はYouTube配信をしたことない人には、マニュアルがあっても、少々むずかいしい。
↑この部分は困ってるとslackで連絡が来たら、手元の空いてる端末から、ZOOMに参加し、ホストを一時的に、移換してもらい、代理で設定
・ZOOMでの配信開始
↑この部分は、配信開始をしたときに、Slackで連絡が来ない部屋があり、バタバタ
・YouTubeに映像が来てるのかを確認
↑この部分は、困ることはなかった
・配信開始する旨の連絡
↑この部分は、対象のZOOMを管理してる人からOKの連絡が一部来なかった。
・配信開始ボタンを押す
↑この部分は困ることはなかった

###その他、困ったこと
・ZOOMからYouTubeに配信することをなれていない人が部屋の担当になる場合、何が困ってるのかもわかってない
・部屋終了時、ZOOMをブチ切りされ、YouTubeに突然映像が送出されてない時が。。。
↑ZOOMで配信終了処理をしたら、slackで連絡してほしい
・ZOOMからの映像送出はビットレートがかなり低い
↑YouTubeの配信管理画面にYouTubeからビットレートが推奨より低すぎると、警告が来続ける

##まとめ
IT素人でも問題なくYouTube配信の管理はできる。

複数のZOOMを同時にYouTubeに流すこと自体は、問題なく可能
YouTubeの配信管理をする人は複数ほしい
↑何かあったときに、一人では手が回らない。
完全にリモートであっても、運営するstaffがslackでの連絡があれば、問題なくオンラインイベントは実施可能。
Macの初期化(自分用の忘備録)

Macの初期化を対応したときときのメモ。

# 本記事で使用している環境
- Mac mini(Late 2014)
- macOS X EL Capitan 10.11.6


## 手順
1. 電源ボタンを押してMacを起動。その後すぐにCommand + Rキーを長押し。アップルマークが出たらキーを離しても良い。
2. ディスクユーティリティを選択。
3. 消したいHDDを選択し消去する。
4. 前のページに戻りOS Xを再インストールを選択。
5. 初期化の最中、以下のエラーメッセージが出た。

```
apfsインストール用のprebootボリュームを作成できませんでした
```

↓


禁止サインが出たので対応
1. 電源ボタンを押してMacを起動。その後すぐにCommand + Rキーを長押し。地球儀マークが出たらキーを離しても良い。
2. OSのユーティリティのウィンドウが表示される。
3. 消したいHDD(APPLE SSD SM0512G media)を選択し消去する。
4. 前のページに戻りOS Xを再インストールを選択。
5. OSのバージョンが表示されるとともに、以下のメッセージが表示される

```
OS X をダウンロードして復元するために、お使いのコンピュータの適格性が apple で検証されます。
```
ライセンスに同意するしてOSのインストールを開始する。

↓

1. インストールの途中で電源が落ちる。
2. そのまま電源を入れる。インストールが続行されてる。
3. インストールが完了すると自動で再起動される（アップルマークが表示される。）
4. 初期のセットアップ画面が表示される。手順に従って設定を進める。
5. 完了。




## 終わりに
必要がないので今回バックアップは取っていません。
Wi-Fiにつなぐ必要があるかも。（先に接続してしまったので未確認。）



## 参考
- [Macを完全に初期状態に戻す方法](http://vdeep.net/initialize-mac)
- [macOS 復元から macOS を再インストールする方法](https://support.apple.com/ja-jp/HT204904)
- [Mac の起動プロセスが完了しない場合](https://support.apple.com/ja-jp/HT204156)
- [円に斜線が入ったマークが Mac の起動時に表示される場合](https://support.apple.com/ja-jp/HT210901)
- [起動させると駐車禁止みたいなマークが出る](https://discussionsjapan.apple.com/thread/10120307)
- [駐車禁止マークの対処方法](https://qiita.com/pappikko/items/bc629399e5fb999a7a3c)

## その他参考
- [Mac 起動しないトラブルが起きた時アナタならどうする](https://apple-teach.com/macroom/starting-trouble/)
- [Macの駐車禁止マーク… 起動できません(;_;)どうしたら良いでしょう。wordとsketch...](https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q14147173149)
- [Mac > High Sierra > APFSインストール用のprebootボリュームを作成できませんでしたの解決](https://qiita.com/sugasaki/items/3d0a1ae27fc85c7e030f)
- [MacBook トラブル: 突然禁止サインが出て、起動できない？！](https://aiki-developer.com/blog/macbook-banned-sign)
- [Macがカーネルパニックを起こした時に試したい8つの対処法](https://gori.me/mac/mac-tips/79537)
- [マック起動に地球のマークが出るのはなせですか。 今まででなかったのに。](https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1345354663)
- [001 【写真で解説】Macが起動しない！そんな時の対処法。](https://macmac.jp/mac001/)


## 追記
昔書いてた下書きを見つけたので、放流しました。
Dockerの基礎固め

# Dockerとは
オープンソースのコンテナ管理ソフトウェアのこと。
仮想化とはなんぞやを知らなければ掴みにくいと思いますので次に説明します。


## まず、仮想化とは？
1台のサーバー上に、複数のサーバーとして利用できる仕組みを構築する方法のこと。

仮想化とは以下の3種類があります。

####・ホスト型仮想化
ホストOS上で動作する仮想化ソフトウェアを利用してVM(※①)を管理する方式。オーバーヘッド(※②)が大きい。

####・ハイパーバイザ型仮想化
ハードウェア上のハイパーバイザ(※③)を利用してVM(※①)を管理する方式。ホストOS無しでハードウェアを直接制御する。
オーバーヘッド(※②)が大きい。

####・コンテナ型仮想化(= Docker)
ホストOS上でコンテナと呼ばれるVM(※①)と似たような振る舞いをする仮想的な区画を用意して管理する方式。
通常、１コンテナ１プロセスで使用するためのWebサーバーコンテナとかDBサーバーコンテナとかログ管理コンテナとか複数のコンテナを立てる構成となる。


## Dockerと特徴

1.処理が速い
・VM毎にCPUやメモリやストレージなどを割り当てるような処理が必要がなくオーバヘッドが少ない。
・ゲストOSが無いため消費するリソースが少ない。
・ゲストOSが無いためアプリケーションまでのパケット転送処理(コンテキストスイッチなど)が少ない。

2.起動が速い
・ゲストOSを立ち上げるわけではないため。

3.可搬性が高い
・Dockerエンジンさえあれば基本どこでも動く。
・Dockerfileやdocker-compose.ymlによるインフラのコード化。

4.イメージが軽い
・Dockerイメージはレイヤで管理しているため。

5.Dockerイメージを簡単に共有できる仕組みが整っている
・特に、公式Dockerイメージが用意されている場合(JenkinsやWordPressなど)はデプロイが楽。
・ECRなどプロジェクトに閉じているかつフルマネージドな環境が整っている。


## Dockerの用途
1.開発を共有化する作業

2.複数のOSでの動作チェック

3.バージョン管理システム

4.本番環境での利用


## インストール方法
1.パッケージの最新化

```
$ sudo yum check-update
```

2.Dockerの最新版のダウンロードとインストール

```
$ sudo curl -fsSL https://get.docker.com/ | sh
```

3.Docker起動

```
$ sudo systemctl start docker
```

4.Docker自動起動設定(サーバーの再起動時にも自動で立ち上がるようにする)

```
$ sudo systemctl enable docker
```

## Dockerイメージの取得

####・イメージの検索
Docker Hubにあるイメージを検索する場合には、コマンドdocker searchのあとに、探しているイメージのキーワードを入力します。例えばCentOSのイメージの場合は下記により、候補が表示されます。通常は複数出てきます。
公式のイメージの場合は、OFFICIAL欄にOKと表示されます。これはDocker Hubには誰でもイメージを登録することができるため、公式とそうでないものと区分けしています。

```
$ sudo docker search centos
```

####・イメージのダウンロード
利用したいイメージが見つかったら、コマンドdocker pullのあとに、検索したイメージ名を入力してダウンロードします。

```
$ sudo docker pull centos
```

####・イメージの実行
ダウンロードしたイメージを実行する場合には、docker runのあとに、実行したいイメージ名を入力します。

```
$ sudo docker run centos
```

####・ダウンロードしたイメージの確認
下記のコマンドを入力することにより、これまでダウンロードしたイメージの一覧が表示されます。

```
$ sudo docker images
```

## よく使う基本コマンド
###実行(docker run)
指定したDockerイメージを実行します。

例: Hello Worldの実行

```
$ docker run hello-world
```

例: Ubuntuの実行

```
$ docker run -i -t ubuntu /bin/bash
```

例: Nginxの実行(8080番で実行)

```
$ docker run -p 8080:80 nginx
```

###コンテナの一覧(docker ps)
実行中のコンテナ一覧を表示します。(-aで停止しているコンテナも表示します)

```
$ docker ps
```

###終了(docker kill)
指定したDockerイメージを終了します。(削除はされません)

```
$ docker kill [コンテナID/名前]
```

###削除(docker rm)
コンテナを削除します。

```
$ docker rm [コンテナID/名前]
```

## 用語集
①仮想マシンのこと。

②余計なコストのこと。

③コンピュータを仮想化するためのソフトウェアのこと。


## 参考記事
https://qiita.com/gold-kou/items/44860fbda1a34a001fc1#%E4%BB%8A%E5%9B%9E%E3%81%AE%E5%89%8D%E6%8F%90

https://www.kagoya.jp/howto/rentalserver/docker/

https://paiza.hatenablog.com/entry/docker_intro#commands_basic
1. SpringとVisual StudioインストールからHello Worldまで

windowsとmac分けて書く必要ない?か検証要

1. Visual Studio Download
Win
https://code.visualstudio.com/docs/java/java-tutorial#_before-you-begin
の
「Installer of Visual Studio Code for Java developers.」をクリックしてインストーラをダウンロード


(上記でうまく行かない場合はこちらから、https://code.visualstudio.com/Download)

2. Java JDKのDownload
https://www.oracle.com/technetwork/java/javase/overview/index.html
version 11をDownloadしてください。

3. 開発に必要なpackageをExtensionsからInstall
Spring Boot Tools
Spring Initializr
Spring Boot Dashboard


3. SpringプロジェクトをWeb上で作成する
https://start.spring.io/


Gradle
2.3.0
demo
11
Web
「Generate」

4. プロジェクトのディレクトリを作成する
spring
そこにzipファイルをおいて、解凍する

5. Visual Studioからディレクトリを開く
File => Open => ~/user名/spring/demo (先程作成したディレクト)



7. Hello worldのコードを追加して終了

下記を追加
```
@SpringBootApplication
@RestController
public class DemoApplication {

public static void main(String[] args) {
SpringApplication.run(DemoApplication.class, args);
}

@GetMapping("/hello")
public String hello(@RequestParam(value = "name", defaultValue = "World") String name) {
return String.format("Hello %s!", name);
}
}
```

コード整形
Cmd K => Cmd F

ライブラリimport
Shift Option O
Linux(RasPi,Edison)で起動スクリプトを設定する


Edison起動時にNode.jsを自動起動させたかった.

## 起動スクリプトの設定

### 起動スクリプトのユニット作成

まずは設定ファイルを作る

	$ vi /etc/systemd/system/hoge.service 

### スクリプトの設定例 (Node.jsの場合)

設定ファイルの中身

	[Unit]
	Description=Node.js Hoge-Server
	
	[Service]
	WorkingDirectory=/home/root/Documents/Project/hoge
	Type=simple
	ExecStart=/usr/bin/node app.js
	Restart=always
	RestartSec=10
	StandardOutput=syslog
	StandardError=syslog
	SyslogIdentifier=node-server

	[Install]
	WantedBy=multi-user.target


### スクリプトを開始する

	$ systemctl start hoge.service

### スクリプトを停止する

	$ systemctl stop hoge.service

### ログを見る

	$ systemctl status hoge.service
	
### 起動スクリプトのイネーブル

OS起動時に自動起動させる

	$ systemctl enable hoge.service
	
### 起動スクリプトのディセーブル

OS起動時に自動起動させない

	$ systemctl disable hoge.service
	

### 参考サイト

http://enakai00.hatenablog.com/entry/20130917/1379374797
next.jsアプリケーションをGoogle App Engine上で動かすときにはまったこと

portとhostの設定をちゃんとしなかったのではまりました。
当たり前ですが、本家のドキュメントをちゃんと読みましょうという話。
以下詳細。


## 構成
api側とフロント側をわけ、api側にはexpress.js、フロント側にはnext.jsを採用しています。

```
api
├─ src
|   └─ index.js
├─ package.json
└─ app.yaml  

frontend
├─ src
├─ package.json
└─ app.yaml  
```

## api側の設定

```/api/src/index.js
const express = require('express');

const app = express();


// Start the server
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
  console.log(`App listening on port ${PORT}`);
  console.log('Press Ctrl+C to quit.');
});
```

```/api/package.json
{
  "scripts": {
    "start": "node src/index.js"
  }
}
```

```/api/app.yaml
runtime: nodejs10
```

api側は特につまるところはなく、基本的な設定でok

## frontend(next.js)側

```/frontend/package.json
{
  "scripts": {
    "build": "next build",
    "start": "next start -p $PORT"
  }
}
```

`-p $PORT` のように環境変数PORTの値を利用するように設定する必要があります。

https://cloud.google.com/appengine/docs/standard/nodejs/runtime?hl=ja#environment_variables




api側でもちゃんと設定してましたね、、
`const PORT = process.env.PORT || 8080;`
https://cloud.google.com/appengine/docs/standard/nodejs/how-requests-are-handled?hl=ja
> process.env.PORT 変数で指定されるポートをサーバーがリッスンするように設定しています。これは App Engine ランタイムが設定する環境変数です。サーバーは、このポートをリッスンしないとリクエストを受信できません。


---

```/frontend/app.yaml
service: frontend
runtime: nodejs10

env_variables:
  HOST: '0.0.0.0'

handlers:
  - url: /.*
    script: auto
```

https://cloud.google.com/appengine/docs/standard/nodejs/runtime?hl=ja#application_startup
> アプリで HTTP リクエストを受信するには、start スクリプトでホスト 0.0.0.0 とPORT 環境変数で指定され、Node.js で process.env.PORT としてアクセスできるポートでリッスンするウェブサーバーを起動する必要があります。

ちょっとよくわからない日本語だったので英語で。
>For your app to receive HTTP requests, your start script should start a web server that listens on host 0.0.0.0 and the port specified by the PORT environment variable, which is accessible in Node.js as process.env.PORT.

とのことなのでHOSTを0.0.0.0に指定する必要があります。

handlersについては[こちら](https://cloud.google.com/appengine/docs/standard/nodejs/config/appref?hl=ja#handlers_element)
GitHub Actions で cron で upstream repo 自動追随しようとしたがうまくいかない

## 背景

* 自身ではコミット権がない, active に開発されている github にある repo を fork で追随している
  * llvm-project や, pytorch など 
* 自前 fork repo にいろいろオレオレ改変を入れている
  * e.g. CI ファイルとか
  
毎回(e.g. 毎日) git pull するのも面倒なので, GitHub Actions で自動追随しようと思いました. 現状うまく行ってません.

## cron

GitHub Actions では, cron で定期処理ができます.

トラッキングしたい upstream repo に変更があったら, fork 先に知らせるみたいな機能は無いっぽいようなので, cron で定期チェックしてみます.


時刻は UTC-0 基準のようです.

うまく動くか試すのに, 1 分単位とかでやったときに, エラーがでるとメール通知がすごいことになるのでご注意ください.

## うまくいかない例

以下のような記述をしましたが, うまくいきませんでした.
(毎日 4:00 am に実行する)

通常 checkout だと, unrelated histories エラーがでるので, `--allow-unrelated-histories` をつけて見ましたが, 結局は conflict が発生してマージできませんでした.



```
name: sync with upstream

on:
  schedule:
    - cron: '* 4 * * *'

jobs:
  sync:

    runs-on: ubuntu-latest

    steps:
      - name: checkout
        uses: actions/checkout@v2
      - name: sync
        run: |
          git config --global user.email "dummy@dummy.com"
          git config --global user.name "github actions"
          git remote add upstream https://github.com/llvm/llvm-project
          git fetch upstream
          git checkout master
          # TODO: Investigate why `--allow-unrelated-histories` required.
          # TODO: Only push there is a change
          git pull upstream master --allow-unrelated-histories && git push origin master
```

## TODO

* [ ] git に, 自身の repo はどこかの fork であることを知らせればいけるか?
  * hub コマンドでなにかいけるかも?
ArduinoでUSBマウス、キーボード操作の自動実行(1)

#1.背景
* USBマウス・キーボードを使える組込み機器などのテストを自動化したい
* Windowsの組込み機器やPS4など、USBマウス・キーボードが使える機器での利用
* ただし、ドライバやツールプログラムはターゲット機器に入れたくない

#2.考えた仕様
* ホストPCはWindows10などで、そこには自動実行のプログラムやドライバを入れる
* ホストPCからArduinoマイコンにはUSB接続でシリアル通信を行う（将来的にはLAN接続、WiFi、Bluetooth等でもOK）
* マイコンはArduino Leonardo（または互換機）を使用(ATmega32U4搭載機種)
* ArduinoとホストPC間の通信をするためのUSBシリアル変換基板を追加(FT232RL搭載機種)

#3.使用機器
* [KEYESTUDIO 3.3V Pro Micro](https://www.amazon.co.jp/dp/B07J55YWKZ/ref=cm_sw_em_r_mt_dp_U_T6h1EbT34A705)
* [HiLetgo 2個セット CP2102 マイクロ USB転UART TTL モジュール](https://www.amazon.co.jp/dp/B082NKCXCN/ref=cm_sw_em_r_mt_dp_U_Lgi1EbR1FE8F7)

  **※上記の組み合わせでまだテストしていないので要注意**

#4.配線図
![配線図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637529/ff830001-aa93-1d7a-eb8c-18eef6d934ad.png)
スマホアプリがTwitterでバズった（1万3千リツイート）経験から得たもの

# とりあえず自己紹介

どうも初めまして！
まずはこの記事を開いていただいたことに感謝します。
私は、14歳の時にプログラミングの学習を始め、今は21歳ですが未だに技術力が乏しいです。
ずっと前からQiitaに記事を投稿したいと思ってましたが、そんな文章力もなく、自信がなかったので投稿など到底無理でした。
ですが、何を思い立ったか、ここで初投稿します。

# Twitterでバズりました

>バズる（読み）バズル
>［動ラ五（四）］《「バズ」の動詞化》俗に、ウェブ上で、ある特定の事柄について話題にする。特に、SNSを通じて多人数がうわさをしたり、意見や感想を述べ合ったりして、一挙に話題が広まることを指す。→バズマーケティング

2年前の話ですが、私のツイートがバズった事があります。まじ通知止まらんwwwという経験させて頂きました。
元ツイートは諸事情により消しましたが、証拠写真だけは残ってます。
![21B1C2FA-CB39-4FF0-9BE5-E398D27B72AC.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176871/72a2458e-d43c-99fe-a2e4-046376bb94d9.jpeg)
その時に調子に乗って作った公式アカウントもあります→ https://mobile.twitter.com/livle_app

# バズった経緯

私はライブやフェスに行くことが好きだったので、同じ趣味の友達が大量に増えました。
そんな人達が必要とするスマホアプリを作れないか？と思い、色々考えました。
そして考えついたのが、

- スケジュール管理ができる
- お金の管理ができる
- 好きなアーティストごとの使用金額がグラフで確認出来る

というものです。見る限り、全く革命的なものでは無いですが、実際これでバズりました。
「THE･ありそうでなかったもの」という感じなんだと思います。

ちなみに、「若者の音楽離れ」とかいう適当な言葉をどっかで聞いたことありますが、ライブの総動員数とかほぼほぼ右肩上がりなんですよね。

http://www.acpc.or.jp/marketing/transition/stagepeople.php
![7587FE32-94B0-4043-B2C7-9E3A6E67A185.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176871/81d78a2e-3024-c5e2-eb3b-51447ffba491.png)

# Twitterでバズるために必要なこと
バズった経験から導き出した答えは、そう。
運です。はい。以上です。

で終わりたいところですが、運を超絶向上させるものがあります。
それは人脈（フォロワー）です。
正直、Twitterでどれだけいいツイートをしても、最初にリツイートしてくれる人が一定数いなければ拡散されません。誰にも見られません。

私は当時、ライブに行き、たくさん友達を作ってました。おそらく1、2年間で100人以上顔見知りが増えました。
その影響で、あのツイートをした数時間で100RTくらいには到達していたとおもいます。そして寝て起きたら何千ものRTがありました。
バズると一気にメッセージが飛んできます。「こんな機能どうですか！」とか、「アイコン描かせてください！」とかくるので、アプリ名やアイコンのデザインなどたくさんの人に考えて頂き、ほぼノーコストで済みました。

# 個人開発者に向けて
開発をする前にアイデアを拡散してみてはどうでしょうか？
自分が売れると思って作っても売れなかったら悲しいですよね。
だから、開発する前にSNSなどでアイデアを見てもらいましょう。
ツイートするだけならほとんどコストが掛かりません。
逆に、アイデアが拡散されないということはモノをつくっても拡散されないということなのかもしれません。

# まとめ
現在このアプリは残念なことにGoogle Play Store、AppStoreともにリジェクトされてしましました。
当時はReactNativeで開発してましたが、知識も全くなく、適当に作っただけでマネタイズもしてませんでした。
現在、Flutterという最高のフレームワークに出会えたので1からもう1度作り直している途中です。
Flutter関連の記事を上げていらっしゃる方々にとても感謝してます！

ということで、私のバズった経験から話をさせて頂きました。拙い文章ですがここまで読んでいただきありがとうございます。
バズるという経験をしたことのある人はかなり限られると思うので、質問や意見などあればどんどんコメントください！
[LINE BOT]FizzBuzz体験BOT

#目次
* はじめに
* サンプルコード
* サンプル画像と使用例
* おわりに
* 参考にしたサイト

#はじめに
今回は、LINE BOTでFizzBuzzをやってみた。
なお、当LINE BOTを作成する際に、[この記事](https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d)をベースにした。

#サンプルコード

```javascript
'use strict';

// 使用パッケージ群
const express = require('express'); // Node.jsで利用できるWebアプリケーションフレームワーク
const line = require('@line/bot-sdk'); // ボットサーバへのリクエストが当LineBOTからきたものかどうかを検証してくれる(要は署名検証)
const PORT = process.env.PORT || 3000;  //Node.jsアプリケーションを使用するポートを設定
// LineBOT用定数群
const config = {
    channelSecret: 'YourChannelSecret',
    channelAccessToken: 'YourChannelAccessToken'
};

const app = express();

app.post('/webhook', line.middleware(config), (req, res) =>
{
    console.log(req.body.events);
    Promise
        .all(req.body.events.map(handleEvent))
        .then((result) => res.json(result));
});

const client = new line.Client(config);

async function handleEvent(event)
{
    if (event.type !== 'message' || event.message.type !== 'text')
    {
        return client.replyMessage(event.replyToken, {
            type: 'text',
            text: "数字を入力してください。"
        });
    } else
    {
        if ((event.message.text % 3 === 0) && (event.message.text % 5 === 0))
        {
            // LineBOTに返信されるメッセージを設定
            return client.replyMessage(event.replyToken, {
                type: 'text',
                text: 'FizzBuzz' // LineBOTに返信されるメッセージ
            });
        } else if (event.message.text % 3 === 0)
        {
            return client.replyMessage(event.replyToken, {
                type: 'text',
                text: 'Fizz'
            });
        } else if (event.message.text % 5 === 0)
        {
            return client.replyMessage(event.replyToken, {
                type: 'text',
                text: 'Buzz'
            });
        } else
        {
            return client.replyMessage(event.replyToken, {
                type: 'text',
                text: event.message.text
            });
        }
    }
};

app.listen(PORT);
console.log(`Server running at ${PORT}`);
```

#サンプル画像と使用例
こんな感じになります。
<img width="433" alt="コメント 2020-06-01 131340.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341829/a70755ec-a07c-3cf7-bc77-3f4a15642079.png">

#おわりに
次は、[VercelでLINE BOTを動かす 2020年5月版](https://qiita.com/n0bisuke/items/a5f49193fa68f28a7f25)を参考に、Vercelを介してLINE BOTを動かしてみようと思う。

#参考にしたサイト
* 使用したパッケージ群について

[Node.jsのフレームワーク「Express」とは【初心者向け】](https://techacademy.jp/magazine/16119)
[LINE BOTをHeroku + Node.jsでやるまで](https://qiita.com/TakuTaku04/items/cb71f10669a9e9cbf71b)

* webhook について

[Webhookって何？を子どもでもわかるように描いてみた](https://kintone-blog.cybozu.co.jp/developer/000283.html)
Homebrew でインストールしている全パッケージの依存関係を出力する

Homebrew で管理するツールを最小限にしたいと思い、依存関係を洗い出そうとしたら意外と簡単にできたのでメモしておく。

``` console
$ brew list | xargs -I{} brew deps --tree {} | tee deps.txt
```

インストールしている formula が多いとけっこう時間がかかる。

こんな感じで出力されるので、どの formula が依存関係が多いのかがひと目でわかる。

``` :deps.txt
arp-scan
└── libpcap

awscli
├── gdbm
├── openssl@1.1
├── readline
├── sqlite
│   └── readline
├── xz
└── python@3.8
    ├── gdbm
    ├── openssl@1.1
    ├── readline
    ├── sqlite
    │   └── readline
    └── xz

cairo
├── libpng
├── freetype
│   └── libpng
├── fontconfig
│   ├── libpng
│   └── freetype
│       └── libpng
├── gettext
├── libffi
:
```

自分の環境では、

- fontforge がはちゃめちゃに依存が多いことがわかった、消したい
- awscli を Docker で動かすようにして Python 依存を断とうかと思っていたが、思いのほか様々な formula から Python が使われておりどうやら無理そうということがわかった
クリップボードに貼り付けた画像を取得する javascript

初投稿です。とりあえずメモ変わりに。
間違ってる所、改善点などあればどんどん突っ込んで下さい。


##目的

画像ファイルの読み込み方法に、クリップボードから取得できれば便利だと思ったので調べてみた。


##コード

div contentditable要素にコピーした画像を貼り付けてimg要素に表示する処理。

```html:html
 <div id="box" contenteditable="true">画像ペーストエリア、</div>
 <img src="" alt="" id="image">
```

```javascript:js
 var blob2=null;
$("#box").on("paste",function(e) {
  var items = (event.clipboardData || event.originalEvent.clipboardData).items;
for (var i = 0; i < items.length; i++) {//クリップボードに画像があるか探してる
  if (items[i].type.indexOf("image") === 0) {
    blob2 = items[i].getAsFile();
  }
}//for
if (blob2 !== null) {//方法１
//blob2に画像がある場合の処理画像url作成処理
    var blobURL = URL.createObjectURL(blob2);
    $("#image").attr("src",blobURL);
}else{//方法２ 
//boxへ貼り付けられた画像をdomで取得する方法 
  setTimeout(fn, 1000);//1秒待ってから実行する。
}
});
var fn = function() {
var p = document.querySelector("#box");
var pa = p.querySelector("img");
if (pa) {
test(pa.src);
}else{
//この方法でも取得できなければ失敗
alert("画像を取得できませんでした。");
} 
}
  
function test(pasrc) {//urlの形式判別、base64形式とhttp形式に別れる
if (pasrc.match(/^data:image/)) {
$("#image").attr("src",pasrc);
} else if (pasrc.match(/^http:\/\/|^https:\/\//)) {
  $("#image").attr("src",pasrc);
} 
}
```

##説明
<p>方法１はクリップボードから取り出すのでblobとして存在している。画像形式は全てPNGとなっている。（mac)の場合、他は未検証</p>
 <p>方法２は、div contenteditable="true"を使いdiv要素に貼り付けられた画像を取得している。元のurlの状態で取得できる、「http」か「base64画像」に分別されると思う。</p>

  <p>ほとんどの場合方法１で取得できた。ウェブ上でコピーできる画像ならなんでも対応できた。</p>
  
 <p>検証したブラウザは safari chrome firefox　環境はmacです。</p>

## 参考サイト

https://qiita.com/tatesuke/items/00de1c6be89bad2a6a72
https://www.vrtmrz.net/javascript/contenteditable-paste-image

##デモ
一応デモ、ごちゃごちゃしてるかも
取り敢えず一応動くというのを確認する用
https://jsbin.com/cadajireli/1/edit?html,js,output

右上の　auto run jsにチェック入れて動かして下さい。
Windows PC（Windowsサーバではない）にssh接続する


# やりたいこと

![ov.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395743/c6a44c55-7a3d-51f1-cd51-9bcd36329034.png)

色々訳あって、無線接続しているMacBookから、有線でつながっているWindows入のデスクトップPCを踏み台にして、そこから他のサーバへssh接続したかった。

あと、rsyncでファイル転送とかもできるようになるので、色々はかどります。

# やるべきこと

要するにWindowsでsshデーモンを立ち上げておけば良い。
↓
何でも良いので、sshdを実行できる環境を導入すればよい


# やったこと

1. **sshdが使用できるソフトウェア**を（管理者権限が必要ないディレクトリへ）インストールする
2. Windows側のホームディレクトリに公開鍵を適切に配置する（.sshおよびauthorized_keysの権限に注意）
3. `/etc/ssh/sshd_config`を設定（公開鍵認証を有効化、パスワードログインを無効化)
4. `/usr/bin/sshd`とたたいて、sshデーモンを起動。
5. ノートPCからWindowsPCのIPアドレスを指定して通常通りsshでトンネルを掘る. fin


## sshdが使用できるソフトウェア
- シェルの種類に特にこだわりがなければ、導入が簡単な[GitBash](https://gitforwindows.org/)がおすすめ。
- 私は元々Windowsでzshを使いたい欲求から、msys2 + comberの環境を構築していたので、msys上で実施しました。

## 注意
- `sshd` はフルパスを入力して実行する必要があります。
- 通常のパスワードでもログインできるはずですが、同じネットワークにつながっている人からログインされると面倒だったので、公開鍵認証のみに設定しました。
- 管理者権限があるディレクトリへインストールしても問題ありませんが、設定ファイル変更などでWindowsの管理者権限を求められる場合が出てきて面倒です。
    - 管理者権限が必要な場所への書き込みはターミナルソフトウェアを右クリックして、管理者権限で実行しましょう。
非同期通信の手順書

# 今回の前提条件
コメント機能を非同期通信にするという前提で書きます


#ファイルを用意しましょう
JS内にcomment.jsを用意しましょう。
ここにajaxの記述などを書いていくのでした。
[ajaxって何？](https://qiita.com/Nyanmaru-12/items/d96204abd40f4b254d00)

#comment.jsに記述していこう
まずは以下のようにします。

```javascript
$(function(){
  $('クラス名').on('submit', function(e){
    e.preventDefault();
    var formData = new FormData(this);
  })
})
```
今回はコメント機能なので、form要素のクラス名を記入します。そしてonメソッドでイベントセッティングをしましょう。
そしてpreventDefaultで元々のイベントを止めることができます。
今回、ここで新しくFormDataが出てきました。

##FormData
簡単にいうとformタグ内の要素のデータをJSのオブジェクトにすることです。
あ、JSにするために FormDataがあるんだ！って思っても大丈夫です。
今回引数にthisを入れてるのはinput要素の内容を取得するためです。

#ajaxを書いていこう

```javascript
var url = $(this).attr('action')
    $.ajax({
      url: url,
      type: "POST",
      data: formData,
      dataType: 'json',
      processData: false,
      contentType: false
```
##attrメソッド
要素が持つ指定属性の値を返します。
##contentType
簡単にいうと、 FormDataを使用している時は必ずfalseにします。
この認識で問題ないです。

次はcreateアクションをいじっていきます。
バックグラウンド実行

# 計算時間がかかるPythonスクリプトをSSHが切れても実行続けたい
### あまり使っていないとすぐ忘れるのでメモ用に投稿
1. $ nohup {実行したいコマンド} -u &

##### 実行したいコマンドをnohupと&で挟むことでバックグラウンドで処理を実行する。実行結果は作業ディレクトリに自動でできる"nohup.out"というファイルに出力される。
#####これまでJupyterで計算をしていて、バックグラウンド実行をしても処理は完了してもJupyter上に結果が出力されない、みたいな問題があった。-uオプションをつけることでバッファに留まることを回避できるっぽい。(これからやって見る)

###出力ファイルnohup.outを任意のディレクトリ下におくには
2. $  nohup {} > ~/{任意のディレクトリ}/out.log &


#####出力結果がnohuo.outファイルにどんどん溜まってしまってファイルが大きくなってしまうので、出力先を変更

###実行状況を確認
3. ps -u

##### psコマンドで進捗状況を確認できる。-uオプションをつけることでメモリの使用率とかも表示される。表示結果のPID列では実行中プロセスのIDを表示している。

###任意のプロセスを停止するには
4. kill -KILL {process ID}

##### psコマンドで確認できるPIDを使ってkillコマンドでプロセスを停止できる。
Composerの使い方

最もよく利用するコマンドをまとめていきます。
#Composerとは
拡張ライブラリをインストールするための
**パッケージ管理ツール**です。

以下の4つのメリットがあります。
**1. インストール/アンインストールが簡単**
**2. アプリケーション単位にパッケージを管理する**
**3. ライブラリの自動ローディング機能を利用できる**
**4. 対応するライブラリが豊富**

####1.インストール/アンインストールが簡単
composerを利用することでパッケージのインストール/アンインストールがコマンド一つで自動化できます。

また、パッケージのよっては動作するために必要なパッケージを要求する**依存性**がある場合がありますが、
composerはこれを自動で解決してくれます。


####2．アプリケーション単位にパッケージを管理する
アプリケーション同士で「同じライブラリの異なるバージョン」を利用していたとしてもお互いの影響されません。

####3.ライブラリの自動ローディング機能を利用できる
composerは自動ロードに対応しているので、クラスライブラリに個別にインポートの必要がなくなります。

####4.対応するライブラリが豊富
まぁそういうことです。
composer経由で提供されるパッケージについては[Packagist](https://packagist.org)からも確認できます。


#使い方
インストールの方法は割愛です。

##パッケージ定義ファイルを作成
現在のアプリケーションで利用するライブラリをパッケージ定義ファイルで定義しておくことで、
記載されたパッケージをまとめてダウンロード/インストールができます。

パッケージ定義ファイルは、アプリケーションルート直下に`composer.json`という名前で保存します。

```json:composer.json
{
  "require": {
     "smarty/smarty": "~3.1",
  }
} 
```

ここではためにしSmartyというライブラリをインストルしています。
require配下に
`パッケージ名：バージョン番号`
の形式で記載します。

パッケージ名は先のPackagistから確認できます。

バージョン番号の`~3.1`は「３．１以上4.0未満」を表します。

##パッケージインストール
アプリケーションフォルダに移動し、権限を与えてから実行します。


```bash
$ composer a+w アプリケーションフォルダ
$ composer install
```

##パッケージを更新/削除
あとからパッケージを更新/削除する場合は、
composer.jsonにパッケージ情報を追記/削除します。


```json:composer.json
{
  "require": {
     "smarty/smarty": "~3.1",
    "ezyang/htmlpurifier": "*"
  }
} 
```
その後,`composer update`コマンドを入力します。

```bash
$ composer update
```
Moment.jsについて 備忘録

# 日付操作のライブラリMoment.js
今現在のの日付を取得する
・moment();

文字列からオブジェクトを生成する
・moment('2020-06-01 00:00:00');

日時の加減算
加算
・moment().add(数字,文字('y'/'M'/'w'/'d'/'h'/'m'/'s'));
減算
・moment().subtract(数字,文字('y'/'M'/'w'/'d'/'h'/'m'/'s'));

日時の比較
a = moment('2018-09-01 06:00:00')
b = moment('2018-10-01 06:00:00')
c = moment('2018-11-01 06:00:00')

b.isAfter(a)  // true
b.isAfter(b)  // false
b.isAfter(c)  // false

b.isSame(a)  // false
b.isSame(b)  // true
b.isSame(c)  // false

b.isBefore(a)  // false
b.isBefore(b)  // false
b.isBefore(c)  // true

b.isSameOrAfter(a)  // true
b.isSameOrAfter(b)  // true
b.isSameOrAfter(c)  // false

b.isSameOrBefore(a)  // false
b.isSameOrBefore(b)  // true
b.isSameOrBefore(c)  // true

b.isBetween(a, c)  // true
c.isBetween(a, b)  // false
さくらのVPSにRubyをインストール

環境等は以下の記事をご参照ください。
[さくらのVPSにSSH接続+最低限のセキュリティ対策](https://qiita.com/d0ne1s/items/6d205744588e0f2c5d62)

## Gitをインストール
まずは`git clone`を使うためにgitをインストールします。

```zsh
$ sudo yum -y install git
$ git --version
```

## rbenvをインストール
Rubyのバージョンを管理するツール、rbenvをインストールします。

```zsh
$ git clone https://github.com/sstephenson/rbenv.git ~/.rbenv
$ git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build #'rbenv install'コマンドの実行に必要なプラグイン
```

## 依存パッケージをインストール
rubyをインストールするための関連するパッケージです。これがないと、rbenv installの際にコケるらしいです。

```zsh
$ yum -y install bzip2 gcc openssl-devel readline-devel zlib-devel
```

## rbenvの読み込み設定
rbenvコマンドを使える用にするために、シェル起動時読み込むbash_profileを編集します。

```zsh
$ vi ~/.bash_profile
```
```~/.bash_profile
# 省略
PATH=$PATH:$HOME/bin

export PATH
export PATH="$HOME/.rbenv/bin:$PATH" # 追記
eval "$(rbenv init -)" # 追記
```
```zsh
$ source ~/.bash_profile
$ rbenv -v
```

## Rubyをインストール
rbenvの設定が終わったので、いよいよRubyのインストールです。

```zsh
$ rbenv install 2.4.1
$ rbenv global 2.4.1
$ rbenv rehash
$ ruby -v
```

## bundlerをインストール
gemの管理をいい感じにするツール`bundler`をインストールしましょう。

```zsh
$ gem install bundler
```

## node.js、yarnをインストール
Rails6を動かすためにはyarnが必須です。

```zsh
$ yum install -y nodejs npm --enablerepo=epel
$ npm install -g yarn
```

## 参考
- [(初心者向け）vpsを契約して、capistrano3でRailsアプリをデプロイするまで [その1 サーバー設定編]](https://qiita.com/ryo2132/items/f62690f0b16ec11270fe#5-mysql%E3%81%AE%E8%A8%AD%E5%AE%9A)
Vue.JSで論理演算子を使う

v-ifや-showで複数の条件を指定したい場合。
Javascriptで用意されている物を使うことができる。
[論理演算子 - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Logical_Operators)

## AかつB
```v-if = "A && B"```

## AまたはB
```v-if = "A || B"```
Javascript　初めてのGSAPアニメーションの使い方　その１　Tweenmax.toの使い方

フロントの技術強化のためのGSAPアニメーションを基礎から紹介します。

#GSAPとは
[GSAP（GreenSock Animation Platform）](https://greensock.com/)

GSAP（GreenSock Animation Platform）は、高速・軽量のHTML5アニメーションライブラリで、アニメーションライブラリのデファクトスタンダードといえる程多くのサイトで利用されています。

主なモジュールとして、トゥイーンを実現するTweenMaxと、タイムラインを制御すTimelineMaxの2種があります。また、TweenMaxと、TimelineMaxのそれぞれの簡易版の2種があります。

#準備
今回は以下のディレクトリ構成で進めます。
GSAPの読み込みはCDNを使用します。
記事作成時点のバージョンは3.2.6です。

・index.html
・/styles/style.css
・/scripts/main.js

各シートを読み込んで準備しましょう。

#今回の制作物
まずは基本的なアニメーションを作成します。
[![Image from Gyazo](https://i.gyazo.com/470e811a4c494658869f1d61bf783ddc.gif)](https://gyazo.com/470e811a4c494658869f1d61bf783ddc)


#Tweenmax.to

Tweenmax.toは指定したプロパティーに向かって要素がアニメーションします。

赤い丸→青に変わりながら１秒かけて右と下に150px移動
緑の四角→丸のアニメーション終了後（１秒後）左と上に150px移動しながら２倍のサイズになりバウンスする

```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles/style.css" />  
    <title>Document</title>
  </head>
  <body>
      <div class="circle"></div>
      <div class="square"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>//GSAPの読み込み
    <script src="scripts/main.js"></script> //JSシートの読み込み
  </body>
</html>
```

```css
body{  //要素を画面中心に配置
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.circle{  //赤い丸
  background-color: orangered;
  height: 150px;
  width: 150px;
  border-radius: 50%;
}

.square{　　//緑の四角
  width: 150px;
  height: 150px;
  background-color: green;
}

```
実行結果
[![Image from Gyazo](https://i.gyazo.com/ae9860ae84aeca15d604c650c2cbe4d3.png)](https://gyazo.com/ae9860ae84aeca15d604c650c2cbe4d3)

ここからjsを記述します。

```javascript

TweenMax.to('.circle', 1, { x:150, y:150, backgroundColor: 'blue' });
//赤丸（class=".circle"）をx軸,y軸へ150px移動と色を青に指定

TweenMax.to('.square', 3, { x: -150, y:-150, scale: 2, delay: 1, ease:
Back.easeOut });
//四角（class=".square"）をx軸y軸へ150px移動と1秒後に２倍に拡大してeaseOutでバウンスする

```

[![Image from Gyazo](https://i.gyazo.com/470e811a4c494658869f1d61bf783ddc.gif)](https://gyazo.com/470e811a4c494658869f1d61bf783ddc)

基本の記述は

tweenmax.to( '取得したい要素' ,  { アニメーションのプロパティ });

です。プロパティは改行しても動きますのでお好みで選んでください。

個人的には１ライナーで書いたほうが見やすいかなと思います。

次回はTween.fromとJqueryとの連携です。

[Javascript　初めてのGSAPアニメーションの使い方　その2　Tween.from/Jqueryとの併用](https://qiita.com/fumiya0414/items/c88c098d7a7d4dacbe45)
3の倍数でahoになるシェルプログラム

# はじめに
Bashプログラミングの小ネタとして作成しました。
昔流行った？3の倍数や3が含まれる数でahoになります。

# ソース
```bash
#!/bin/bash

echo -n "Please input end number => "
read num

count=1

while (( $count <= $num ))
do
  if (( $count % 3 == 0 ))
    then
      echo "aho"
    else if  [ "`echo $count | grep 3`" ]
      then
        echo "aho"
      else
        echo $count
    fi
  fi
  (( count+=1 ))
  sleep 1
done

```

# 実行結果
```
$ ./aho.sh

Please input end number => 15
1
2
aho
4
5
aho
7
8
aho
10
11
aho
aho
14
aho
```

# おわりに
このプログラムを作成することで

- 分岐構文
- 繰り返し構文
- testコマンド（[]や``）
- Bashのお作法

が理解出来ました。
ハッシュについて学習したこと

##ハッシュで使用頻度の高いメソッド

####keysメソッド
ハッシュのキーを配列として返すメソッド

```ruby:keyメソッド
languages = { japan: 'Japanese', us: 'English', india: 'Hindi' }
languages.keys #=>[:japan, :us, :india]  
```

####valuesメソッド
ハッシュの値を配列として返すメソッド

```ruby:valuesメソッド
languages = { japan: 'Japanese', us: 'English', india: 'Hindi' }
languages.values #=> ["Japanese", "Enlgish", "Hindi"]
```

####has_key?メソッド
ハッシュの中に指定されたキーが存在するかどうか確認するメソッド
※エイリアスメソッドとして、key?, include?, member? があります。

```ruby:has_key?
languages = { japan: 'Japanese', us: 'English', india: 'Hindi' }
languages.has_key?(:japan) #=> true
languages.has_key?(:italy) #=> false
```

####**でハッシュを展開
**をハッシュの前に付けるとハッシュリテラル内でほかのハッシュのキーと値を展開できる

```ruby:**
h = { us: 'English', india: 'Hindi' }
{ japan: 'Japanese', **h } #=> {japan: 'Japanese', us: 'English', india: 'Hindi'}
#mergeメソッドを使っても同じ効果が得られる
{ japan: 'Japanese'}.merge(h) #=> {japan: 'Japanese', us: 'English', india: 'Hindi'}
```

####配列とハッシュ
###to_aメソッド
ハッシュをto_aメソッドを使って配列に変換するメソッド

```ruby:to_a
languages = { japan: 'Japanese', us: 'English', india: 'Hindi' }
languages.to_a #=> [[:japan, "Japanese"], [:us, "English"], [:india, "Hindi"]]
```

###to_hメソッド
配列をハッシュに変換することができるメソッド

```ruby:to_h
array = [[:japan, "Japanese"], [:us, "English"], [:india, "Hindi"]]
array.to_h #=> {:japan=>"Japanese", :us=>"English", :india=>"Hindi"}
#ハッシュとして解析不能な配列に対してto_hメソッドを呼ぶとエラーになる
array = [5, 6, 7, 8]
array.to_h #=> TypeError: wrong element type Integer at 0 (expected array)
#キーが重複したりすると思いがけないエラーになる
array = [[:japan, "Japanese"], [:japan, "日本語"]]
array.to_h #=> {:japan=>"日本語"}
```
Hash[]に対して渡すことで配列に変換することもできる

```ruby:Hash[]
array = [[:japan, "Japanese"], [:us, "English"], [:india, "Hindi"]]
Hash[array] #=> {:japan=>"Japanese", :us=>"English", :india=>"Hindi"}
```


###ハッシュの初期値

```ruby:
h = Hash.new('OK')
a = h[:aaa] #=> "ok"
b = h[:bbb] #=> "ok"

#変数aと変数bは同一オブジェクト
a.equal?(b) #=> true

#変数aに破壊的な変更をすると、変数bの値も一緒に変わってしまう
a.upcase!
a #=> "OK"
b #=> "OK"
```


```ruby:ブロックを使う
h = Hash.new{'OK'}
a = h[:aaa] #=> "ok"
b = h[:bbb] #=> "ok"

#変数aと変数bは異なるオブジェクト
a.equal?(b) #=> false

#変数aに破壊的な変更を適用しても、変数bの値は変わらない
a.upcase!
a #=> "OK"
b #=> "ok"
```

参考文献
プロを目指す人のためのRuby入門
VRIKをアタッチしているキャラクターでAnimatorの歩行モーションを利用する

# 概要

VRIK の歩行モーションに違和感があったので、自作した Animator の歩行モーションを使いたかったが、そのままだと腕と足の動きが VRIK に依存してしまっていたので記事に残すことにした。

# 環境

- Unity 2018.4.22f1
- Final IK version 1.8

# 手順

1. 腕の Weight を 0 にする
2. Locomotion の weight を 0 にする
3. キャラクターの transform を更新し続ける

# 腕のweightを0にする

下記のようにしたいので、移動時のみ腕のweightを0にする。

止まっている時: VRトラッキング
歩いている時: Animator

スクリプトは下記の通り。

```cs
private void Update() {
    if (_isWalk) ChangeVrikWiehgtForWalk();
    else ChangeVrikWeightForIdle();
}

// 歩行時のVRIKウェイト設定
private void ChangeVrikWeightForWalk()
{
	_vrik.solver.leftArm.positionWeight = 0f;
	_vrik.solver.rightArm.positionWeight = 0f;
	_vrik.solver.leftArm.rotationWeight = 0f;
	_vrik.solver.rightArm.rotationWeight = 0f;
}

// 待機時のVRIKウェイト設定
private void ChangeVrikWeightForIdle()
{
	_vrik.solver.leftArm.positionWeight = 1f;
	_vrik.solver.rightArm.positionWeight = 1f;
	_vrik.solver.leftArm.rotationWeight = 1f;
	_vrik.solver.rightArm.rotationWeight = 1f;	
}
```

# Locomotionのweightを0にする

移動モーションは Animator で、transform の更新は自作スクリプトで行うので、Locomotion の weight は常に 0 に設定する。

```csharp
private void Start() {
    _vrik.solver.locomotion.weight = 0f;
}
```

# キャラクターの transform を更新し続ける

Locomotion の weight を 0 にするとキャラクターがその場から動かなくなってしまうので、頭の position を使ってキャラクター本体の座標を更新し続ける必要がある。スクリプトは下記の通りで、適当な MonoBehaviour 継承クラスに記載する。

```csharp
private void LateUpdate()
{
	if (_vrik == null) return;
	var d = _vrik.solver.spine.headTarget.position - _vrik.references.root.position;
	d.y = 0f;
	var mag = d.magnitude;
	_vrik.references.root.position += d.normalized * mag;
}
```

# 参考記事

- [FINAL IK - Full Body IK, Aim, Look At, FABRIK, CCD IK... [1.0 RELEASED] - Unity Forum](https://forum.unity.com/threads/final-ik-full-body-ik-aim-look-at-fabrik-ccd-ik-1-0-released.222685/page-44)
- [Final IK の VRIK の Solver にある各値の説明 - Qiita](https://qiita.com/_karukaru_/items/b74bb5bdf08f5de32d0e)

# まとめ

調べても記事がほとんどなく、唯一見つかった UnityForum の記事を頼りに実装しました。
もっとクールな実装を知っている方がいらっしゃいましたら、コメントでご教示いただけますと幸いです。
データベースの正規化について

データベースのテーブルやカラムを決める際に重要である
正規化について改めて基礎を学習したので簡潔にご紹介。

## 正規化とは...。
DBのテーブルやカラムを決める際に、データ構造をより効率的でシンプルな
ものにするための手順。
正規化を行ったあとのdb構造を「正規形」という。
逆に行っていない場合、「非正規形」という。

### 順番がある。
正規化には順番があり、それぞれ役割があります。
非正規形 → 第一正規形 → 第二正規形 → 第三正規形となる。
第四正規形以降もあるようですが、慣習的には使用しないようです。
### デメリットもある。
正規化を重ねる度、パフォーマンスが低下します。
理由は、小さなテーブルが増えていき、テーブルを検索するたびにSQLの回数が増え、
速度が低下します。故に第三正規形で終了するのが一般的なようです。
リファクタリングと作り直しの違い

#リファクタリングと作り直しの違い
 - リファクタリングは一度書いたコードをきれいに書き直すこと
 - 作り直しは一からコードを書き直すこと
 
#リファクタリングをする理由
 - ソフトウェアの保守運用がしやすくなる
  - 誰でも理解できるので修正したいや重複している部分がすぐわかる
 - バグが発見しやすくなる
  - 理解しやすいコードなので読んでいくうちにバグが無理なく発見できる 
 - 誰でもコードを理解できる

#いつリファクタリングするか
 - バグfixの時
 - 三回同じことをしている時
 - 機能追加の際　
  - 今後機能拡張する際に簡単に行えるようにコードの理解を進める

#最後に
 - 誰がみてもわかるようにコメントを残そう
 - リファクタリングをしなくても、わかりやすいコードを書こう
【学習メモ】includes


##趣旨
現役フルスタックエンジニアの方より、極力一次情報で不明点を確認し都度拾いながら学習しようというアドバイスを基に、APIやそれに近いものをGoogle翻訳かけながら理解した。その内容のアウトプット・備忘録として投稿する。それでは行ってみよう！


##includes(*args（＝引数）)

【概要】
リレーション関係にあるテーブルのデータを指定する

【例】

```ruby
users = User.includes(:address)
users.each do |user|
  user.address.city
end
```
ネストされたリレーションの場合は、ハッシュを使って記述可能

```ruby
users = User.includes(:address, friends: [:address, :followers])
```


【ググったワード】
孫モデルのデータをeachで

##includesの応用
MVC設計で、どうデータを指定・取得・表示させるのか、自分のPFでやってみた。

###モデル

（親）

```ruby
class Record < ApplicationRecord
  has_many :practices
  accepts_nested_attributes_for :practices
```

（子）

```ruby
class Practice < ApplicationRecord
  belongs_to :record
end
```

###DB設計

```shema.rb
  create_table "practices", force: :cascade do |t|
    t.string "practice_item"
    t.integer "practice_time"
    t.bigint "record_id"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.index ["record_id"], name: "index_practices_on_record_id"
  end

  create_table "records", force: :cascade do |t|
    t.text "learning_point"
    t.date "training_date"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
  end
```

###コントローラ

```ruby
class RecordsController < ApplicationController

  def index
    @records = Record.includes(:practices) #practicesが子モデル
```
##ビュー

```slim
table.table-hover
[省略]
  thead
    tr
      th 〜〜〜
  tbody
    - @records.each do |record|
      - record.practices.each do |practice|　#このように記載することで、子モデルのテーブルの紐付けが可能
        tr
          td= record.training_date
          td= practice.practice_time
```

##参考

【Ruby on Rails API】
https://api.rubyonrailsorg/classes/ActiveRecord/QueryMethods.html#method-i-includes

【Railsで１対多のテーブルデータを取得し表示させる】
https://qiita.com/bitarx/items/a07c15e39ab1382396d4

【Rails ActiveRecord/SQL 小技集】
https://qiita.com/tomomomo1217/items/1ccd21bfb97730763255