OmniAICreator/Qiita-1.07M huggingface dataset:
Visual Studio Codeの拡張機能

#概要
学習・開発する際に**Visual Studio Cord**を使ってコードを書いているのですが、
学習を進めるうちに、不便だな..と思うことが色々と出てきました。
今回の記事では不便だと感じている部分と、それを解消するための拡張機能を3つ共有したいと思います。

#目次
1. ターミナルの文字が小さい！
2. エディターの文字が詰まりすぎ！
3. ファイルが多すぎて見つけにくい！

#1. ターミナルの文字が小さい！

まず初めに、**VSCode**内でターミナルを起動できるのはご存知でしょうか。
**contol(または ctrl)　+　`(バッククオート）**で起動することができます。 
これはMacユーザーでUSキーボードをお使いの方の起動方法みたいです。
※JISキーボードでは **control(または ctrl)　+　shift⇧　+　`**

さて、起動してみたのはいいですが文字が小さくてこれが結構ストレスだったりします。

そんな時は..
`"terminal.integrated.letterSpacing"` と `"terminal.integrated.fontSize"` 
この2つを**settings.json**に追記することで、**ターミナルの文字間隔・フォントサイズ**をカスタマイズすることができます。

では次に**settings.json**の開き方ですが、**VSCode**の設定に移動します。
設定への移動は**command (または cmd) ⌘　+　,(カンマ)**です。⇩画面になります。
**settings.json で編集**が見つからない場合は左側最下段　**> 拡張機能**　をクリックしてみてください。
[![Image from Gyazo](https://i.gyazo.com/0c1a03b70194fb99088bfb4e784cce85.png)](https://gyazo.com/0c1a03b70194fb99088bfb4e784cce85)
**settings.json で編集**をクリックすると編集画面が開きます。

```ruby:settings.json
{
    "diffEditor.ignoreTrimWhitespace": true,
    "workbench.startupEditor": "newUntitledFile",
    "workbench.iconTheme": "material-icon-theme",
    "workbench.editor.enablePreview": false,
    "window.zoomLevel": 0,
    "editor.minimap.enabled": false,
    "editor.fontSize": 16,
    "editor.tabSize": 2,
    "editor.wordWrap": "on",
    "editor.quickSuggestions": true,
    "editor.lineHeight": 22,
    "editor.renderIndentGuides": true,
    "editor.renderLineHighlight": "all",
    "terminal.integrated.letterSpacing": 1,
    "terminal.integrated.fontSize": 14,

}
```
自分は既にいくつか便利なものを追記しております。
下から2つが`"terminal.integrated.letterSpacing"` と `"terminal.integrated.fontSize"` です。
**:** の後に数値を入力して保存すると反映されます。最後に**,(カンマ)**を忘れずにつけてください。

#####これでターミナルの文字小さい問題は解決です！


#2. エディターの文字が詰まりすぎ！

デフォルトでは文字が小さかったり行の高さが詰まっていたりで、長時間画面をみていると目が疲れます..
そこでエディターのフォントサイズと行の高さをカスタマイズできるのが
`"editor.fontSize"` と `"editor.lineHeight"` です。

これらも先ほど同様に**settings.json**に追記することでカスタマイズできます。

#####はい解決！


#3. ファイルが多すぎて見つけにくい！

#####今回の記事で一番言いたかったのはこれです！
ディレクトリがどんどん増えてきて、目的のファイルにたどり着くのに一苦労..
そんな方に是非とも追加していただきたい拡張機能が
`"workbench.iconTheme": "material-icon-theme"`

⇩これが..
[![Image from Gyazo](https://i.gyazo.com/ed536338d531f67fa6672e79443bb75a.png)](https://gyazo.com/ed536338d531f67fa6672e79443bb75a)

⇩こうなります。
[![Image from Gyazo](https://i.gyazo.com/3b4d78da19976c6ea63af955f5725c1f.png)](https://gyazo.com/3b4d78da19976c6ea63af955f5725c1f)

この部分だけではありがたみを感じられないかもしれませんが、実際に導入してみると感動します。
こちらも**settings.json**に追記することでカスタマイズできます。

---

#まとめ
今回は全部で5つ共有させていただきました。視認性を高めることって大事ですね。
また便利な機能を見つけられましたら記事にしてみたいと思います。ありがとうございました。
ご指摘等ございましたらご教示いただけると幸いです。
Chrome Extentions "Krafty" 公開

# Chrome Extention "Krafty"を公開しました。

開いているWebページのmeta情報やaltの確認、HTMLのネストの検証、要素のアウトラインの確認などができます。
マークアップエンジニアの方や、ディレクターの方には便利につかっていただけると思います。

名前は、New Orderのアルバムからいただきました。

ストア公開の申請時に、この拡張機能の使用にはホスト権限が必要なので、審査にかなり時間がかかると脅かされましたが、2日ほどで公開されました。
Googleさんありがとうございます。

[Chrome Webstore](https://chrome.google.com/webstore/detail/krafty/obfjnafkhihecjkpfpcgglckalfphbfb)
[GitHub](https://github.com/takeshisakuma/krafty)

## 機能紹介
Kraftyの4つの機能をご紹介します。

### Head Checker
meta情報などを、ソースを開かずに確認できる機能です。
お客さんや一部ディレクターやなどソースを見るのに抵抗がある方や、コーディング時の漏れチェックのための機能です。

![head.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451263/f0d39802-f9d2-b22c-0f59-418f864eb926.jpeg)

### Nest Checker
タグのネストで、NGの部分を赤く表示して教えてくれる機能です。
技術的には、CSSのセレクタで、「このタグの直下にこのタグはNG」というのをひたすら指定しています。
問題なければ表示上何も変わりません。
構造上タグの組み合わせが膨大になってしまうので、漏れや間違いなどがないか、しばらく使って気付いたものを潰していこうと思います。

#### 使用上の注意
許可するタグをnotで指定しているため、仕様上未知のタグはNG判定されてしまいます。
例：Google検索で使われているg-section
(キーワードがアレなのが多い気がしますが、たまたまです)

![g-section2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451263/bed0f071-13e0-379e-d678-5b65469e0e3f.jpeg)

![g-section.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451263/f977f033-9e0f-914a-6977-7f6adbd8390f.jpeg)

#### テスト
試しに、Qiitaの記事ページで使用してみると・・・・あれ・・・・。

![nest1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451263/d8a77f6c-d314-ae2c-5508-652ae6d4a18c.jpeg)

早速誤検出か・・・・・。

![nest_selecter.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451263/12f049b4-60d3-4c82-8faf-74b729c13d40.jpeg)

でもdiv直下のdiv許可してるしな・・・・・。

![nest_tag.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451263/6df4f865-4720-17fe-446a-543184065bf9.jpeg)



あれ？閉じタグにもクラス名が？
あーなるほど、タグ名とクラス名の間が全角になっているので、```<div>```ではなく、未知のタグ```<div　class="logly-lift-ad-content">```と認識されてNG判定されているようです。
タグのタイポも発見できる場合があることがわかりました。

### Outline Checker

ページ内の要素のアウトラインを表示する機能です。
マークアップエンジニアの方が、要素がどのようにレイアウトされているか確認したり、スマホのCSSを書いているときに、謎の横スクロールの犯人の要素がなかなか見つからないときなどに使えると思います。

![outline.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451263/06cf2e14-4f64-9bb2-7f51-313c8beaf83e.jpeg)


### Alt Checker

ページ内のimg要素のaltを表示する機能です。
お客さんや一部ディレクターやなどソースを見るのに抵抗がある方や、コーディング時の漏れチェックのための機能です。

![alt.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451263/d32eedd7-3ed9-f553-97c3-94754f21454a.jpeg)

左上に画像があったんですね。気付きませんでした。

## 更新履歴

### Brightness Checker

- 新規追加

### Head Checker

- OGP画像、favicon、apple-touch-aconの画像表示に対応
- タイトル、ディスクリプションの文字数カウント追加
- 低解像度のモニタ使用時に縦スクロール
Android Studio の AVDManager で作った Virtual Device がすぐに落ちる → Windows アカウントのせいでした

# はじめに
Android 開発について勉強してみようと思って、Windows 10 に Android Studio をインストールしたのですが、使い始めた途端にハマってしまったので、記事にしておきます。
※ こんなハマり方する人はほとんどいないと思いますが。


# 環境
今回のエラーは、バージョンあんまり関係ないと思いますが念のため。

- Windows 10 Pro
- Android Studio 4.0
    - Build #AI-193.6911.18.40.6514223, built on May 21, 2020
    - Runtime version: 1.8.0_242-release-1644-b01 amd64
    - VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o


# Android Virtual Device Manager の実行エラー

1.　Android Studio 4.0 を普通にインストール

　　エラーも特になく、インストール完了。

2.　Android Studio でプロジェクトを新規作成

　　エラーなく、普通にひな形プロジェクトができる。

3.　AVD Manager を起動し、Virtual Device を作成

- device definition : Nexus 6P を選択
- System Image : MarshMallow (API Level 23) を選択
- あとはデフォルトで Finish
 
という感じで、普通に Virtual Device を作って、再生ボタンで実行したのですが、次のエラーメッセージが出て、即落ちしてしまいました。

"The emulator process for AVD Nexus_6P_API_23 was killed"
<img width="635" alt="AVD_Errors.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636553/53897890-23b4-b074-d9ff-b451b26fa973.png">

実行した途端にプロセス殺されましたって・・・


# 調査
エラー内容もログも分からないので、とりあえず Virtual Device 作成の設定を色々変えてみましたが、すべて即落ち。ネットで調べてみると、「Intel x86 Emulator Accelerator(HAXM) を再インストールしたら」とか「OSのグラフィックドライバを最新に」とか「Oracle Virtual Boxのプロセスが云々」とか色々情報が上がっていたので、SDK Manager から HAXM の再インストール、グラフィックドライバの更新、Oracle Virtual Box のプロセスを探して全てKill してみたりしてみたのですが、全て変化無し。

エラーの内容も分からず、ログがどこに出てるのかも分からず途方に暮れていたところ、ネットで似たような質問をしている人の中に、コマンドプロンプトから emulator.exe を実行するやり方をしている人がいたので、これならエラーが表示されるかも、と思ってやってみると、（※コマンドプロンプトなのでパスの接続文字は￥マークです。）

```
C:\Java\Android_SDK\tools\emulator.exe -netdelay none -netspeed full -avd Nexus_6P_API_23
emulator: ERROR: bad config: virtual device file lacks a path entry
emulator: could not find virtual device named 'Nexus_6P_API_23'
```

ん？パスが欠けてる？virtual device が見つからない？SDKのパスもちゃんと通してるのになんで？

作成した virtual device 関連のファイルは、Windows のユーザーフォルダにありました。
`%USERPROFILE%\.android\avd\Nexus_6P_API_23\`
`%USERPROFILE%\.android\avd\Nexus_6P_API_23.ini`

iniファイルがあったので、それを開いてみると。

```Nexus_6P_API_23.ini
avd.ini.encoding=UTF-8
path=C:\Users\縺ｾ繧構.android\avd\Nexus_6P_API_23.avd
path.rel=avd\Nexus_6P_API_23.avd
target=android-23
```

**うぁぁぁぁ、こいつのせいかぁぁあぁあっっっ！！！**


# 原因
Windows ユーザーのユーザーフォルダパスに2バイト文字が含まれているのが原因でした。Windows 10 は、ユーザー名を日本語で作ることができ、そうするとユーザーフォルダも日本語で作られてしまいます。

iniファイル自体は UTF-8 の文字コードになっていて、さっき文字化けしていたiniファイルも UTF-8 で開き直すと、正しく表示されます。おそらく Virtual Device の実行過程のどこかでちゃんと読み込めなかったんでしょう。


# 解決方法
別の英字ユーザーを作って、そちらで実行したところ、すんなりと Virtual Device の実行ができました。

・・・どっと疲れた・・・


# いいわけ
いつもはユーザー名は普通に記号以外のASCII文字しか使わないんですが、導入しようとしていたパソコンはプライベート用に数年前に買ったものでして。初期セットアップしてたら、あれ？ユーザー名日本語使えるんだ～、じゃあ日本語名にしちゃお、別にこのパソコンで何か仕事するつもりもないし、と軽く考えてしまいました。

最近の Windows 10 の初期セットアップでは、ユーザー名に日本語を入れようとすると「アプリでトラブルあるかもよ」的な警告が出たような気がします。ネットで 「Windows ユーザー 日本語」で検索すると、「ユーザー名に日本語使うなよー」という記事がわんさか出てきます。

**なら・・・そもそも日本語名でユーザー作れないようにしてくれよ・・・Microsoftさん・・・**

と心の底から思います。
Notion Blogをカスタマイズする環境の構築 (WSL2)

# 概要
[Notion Blog](https://github.com/ijjk/notion-blog) をデプロイ後，WSL2のローカル環境でカスタマイズするための環境構築を行う．
デプロイ自体の方法やNotion Blogの概要については，[notionバックエンドのzeit製ヘッドレスCMS“Notion Blog”が激アツ🔥 - Qiita](https://qiita.com/serinuntius/items/d4b1e9ef53b59033f607) が参考になります．

# やること

本家の [GitHubのRunning Locally](https://github.com/ijjk/notion-blog#running-locally) に記載されていることを行う．

### 1. Yarn のインストール

```bash
# yarnのインストール:Ubuntu
$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

$ sudo apt-get update && sudo apt-get install yarn 
```

### 2. 必要な環境変数の追加

次に，**NOTION_TOKEN** と **BLOG_INDEX_ID** を環境変数に追加する．

PC全体に環境変数を設定したくないので，フォルダごとに設定可能な [direnv](https://github.com/direnv/direnv) を使用する．

```bash
# direnv のインストール
$ sudo apt install direnv
```

また，**.bashrc** に以下の記述を追加する．(bashの場合)

```bash
# direnv の初期設定
export EDITOR=vi
eval "$(direnv hook bash)"
```

notion-blog のディレクトリに移動し，**.envrc** を編集することで環境変数を追加する．

```bash
$ cd notion-blog
# editコマンドで.envrcを編集するエディタが起動
$ direnv edit .

# 以下を.envrc に記述
# Set required variables for notion-blog
export NOTION_TOKEN=<自分のNOTION_TOKEN>
export BLOG_INDEX_ID=<自分のBLOG_INDEX_ID>
```

### 3. 依存パッケージのインストールと開発サーバの起動

WSL2のデフォルトの Node.js は古いため，最新のものを入れ直す．

```bash
# 最新の Node.js をインストール
$ sudo apt install -y nodejs npm
$ sudo npm install n -g
$ sudo n stable
$ sudo apt purge -y nodejs npm
$ exec $SHELL -l

# 最新バージョンが返ってくればOK
$ node -v
v12.18.2
```

最後に Yarn で依存パッケージをインストールし，開発サーバを起動する．

```bash
# package.json に記述された依存パッケージをインストール
$ cd notion-blog
$ yarn install

# 開発サーバの起動
$ yarn dev

# 本番用にビルドする場合はこっち
$ yarn build && yarn start
```

# 参考
[ijjk/notion-blog: A Next.js site using new SSG support with a Notion backed blog](https://github.com/ijjk/notion-blog)
[インストール | Yarn](https://classic.yarnpkg.com/ja/docs/install/#debian-stable)
[direnv/installation.md at master · direnv/direnv](https://github.com/direnv/direnv/blob/master/docs/installation.md#installation)
[Ubuntuに最新のNode.jsを難なくインストールする - Qiita](https://qiita.com/seibe/items/36cef7df85fe2cefa3ea)
bashからzshに移行する方法

今まで`bash`を使用していたのですが、Catalinaに変更してからうまく動作できなくなったので、`zsh`に移行してみました。

参考サイト

+ [bashからzshに3分移行 ~ MacOS catalinaからデフォルトシェルがbashからzshに ~](https://keyama.hatenablog.com/entry/2020/04/15/112027)
+ [Catalinaでデフォルトシェルが「zsh」に変わる、bashとの違いは?
](https://news.mynavi.jp/article/osxhack-241/)
+ [遅ればせながら bash から zsh に移行してみた](https://qiita.com/shionit/items/31bfffa5057e66e46450)


#bashからzshにコードの移行

```:ターミナル
$ cat ~/.bash_profile >> ~/.zprofile
$ cat ~/.bashrc >> ~/.zshrc
$ source ~/.zprofile
$ source ~/.zshrc
```

これで問題なく移行することができました。
【学習記録1】Node.js

#はじめに
エンジニア目指して現在独学でプログラミング学習中です。
学習を始めて既に3週間ほど経っていて、HTML,CSS,JavaScriptの基礎の学習を終えたところです。
学習の振り返り・記録として、今日から学習内容を投稿していきたいと思います。

# 今日の学習内容
- Progate Node.js Ⅰ～Ⅲ
- Node.jsのローカル開発環境の準備
- MySQLのインストール（すでにProgateで学習を終えたため、自分のPCにインストール）
- Node.jsとMySQLの接続

Node.jsのローカル開発環境の準備～Node.jsとMySQLの接続は、基本的にProgateのコラムに書いてあった内容をそのまま行いました。
コマンドプロンプトやターミナルについても少ししか知りませんでしたが、書いてあった内容通り進めていくと何とかなりました。
（コマンドについてはもっと勉強すべきだと思いました。。。）
Rails ✕ PostgreSQLで既定のIDをUUIDに設定する方法

# 動作環境

- Ruby 2.7.0
- Rails 6.0.3.2
- PostgreSQL 12.3

# 準備

1.　PostgreSQLデータベースを使用してRailsアプリケーションを作成します。

```
$ rails new blog -d=postgresql
```

2.　`config/database.yml` でデータベース名を変更できます。

```
default: &default
  adapter: postgresql
  encoding: unicode
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>

development:
  <<: *default
  database: blog_development

test:
  <<: *default
  database: blog_test
```

3.　下記のrailsコマンドで `config/database.yml` の内容でデータベースを作成してくれます。

```
$ rails db:create
Created database 'blog_development'
Created database 'blog_test'
```

# PostgreSQLでUUIDを有効にする

通常、以下の手順で、プライマリキーとしてUUIDを使うことが出来ます。

1.　マイグレーションファイル作成コマンドを実行します。

```
$ rails g migration enable_uuid
```

2.　マイグレーションファイルの編集

```
# db/migrate/xxx_enable_uuid.rb
class EnableUuid < ActiveRecord::Migration[6.0]
  def change
    enable_extension 'pgcrypto'
  end
end
```

# 既定のIDをUUIDに設定する

`config/initializers/generators.rb` ファイルを作成して、中身を下記のようにします。

```
# config/initializers/generators.rb
Rails.application.config.generators do |g|
  g.orm :active_record, primary_key_type: :uuid
end
```

この設定でmodel作成時にidがuuidであるというオプションがmigrationファイルに自動で付与されるようになります。

# 確認

1.　Postモデルを作成します。

```
$ rails g model Post title:string
```

2.　マイグレーションファイルを確認します。

```
# db/migrate/xxx_create_posts.rb
class CreatePosts < ActiveRecord::Migration[6.0]
  def change
    create_table :posts, id: :uuid do |t|
      t.string :title

      t.timestamps
    end
  end
end
```

3.　マイグレーション

```
$ rails db:migrate
```

4.　レコードの作成

```
$ rails console
> Post.create(title: 'new post')
   (0.2ms)  BEGIN
  Post Create (25.3ms)  INSERT INTO "posts" ("title", "created_at", "updated_at") VALUES ($1, $2, $3) RETURNING "id"  [["title", "new post"], ["created_at", "2020-07-10 13:05:38.915722"], ["updated_at", "2020-07-10 13:05:38.915722"]]
   (7.0ms)  COMMIT
 => #<Post id: "464b7fa5-aaae-4970-a56f-b5c0cf6c1b83", title: "new post", created_at: "2020-07-10 13:05:38", updated_at: "2020-07-10 13:05:38"> 
```

プライマリキーがUUIDタイプになりました！
Disable updating updated_at from Laravel Admin


## Summary

If you'd like to stop updating updated_at column from Laravel Admin page, You can code like this

```php
$form->model()->timestamps = false;
```

## Usage

```php:app/Admin/Controllers/SomeController.php

    /**
     * Make a form builder.
     *
     * @return Form
     */
    protected function form()
    {

        ...

        $form->saving(function (Form $form) {
 
            $form->model()->timestamps = false;

        });
 
        return $form;
    }
```
GitHubのエラーの解決方法

次にもう1度ググらなくてもいいように、メモ代わりに書きます。
エラーが増えるたびに追記していきます。

##参考記事
- [gitでPlease make sure you have the correct access rights and the repository exists. が出た時の対処法](https://qiita.com/GakuNaitou/items/81dbbd3ea6211af71648)
- [fatal: remote origin already exists. と表示された場合の解決法](https://qiita.com/yu-ki0718/items/3c8aae2c81ca3f82f522)

##Please make sure you have the correct access rights and the repository exists.
解決方法
###sshKeyを再発行する

```
### sshKeyを作成する。 (hoge以降はgithubに登録しているメアド)
$ ssh-keygen -t rsa -C hoge@example.com
-> 作成するディレクトリとファイル名を聞かれる。~/.ssh/id_rsaとなっていれば、なにも入力しないでenterでおk。
#-------------------
Enter file in which to save the key (~/.ssh/id_rsa):
#-------------------
-> パスフレーズ(パスワードより長いキーワード)を登録するかと聞かれるので、特に必要なければ何も入力しないでenterでおk。
#-------------------
Enter passphrase (empty for no passphrase):
#-------------------
-> もう一度同じパスフレーズを入力してくださいと聞かれるので、また何も入力しないでenter。
#-------------------
Enter passphrase (empty for no passphrase):
#-------------------

### ~/.ssh以下のファイルを確認する
$ ls ~/.ssh
-> id_rsaとid_rsa.pubがあることを確認する
#-------------------
id_rsa id_rsa.pub 
#-------------------
```

###githubに公開鍵を登録

```
### 公開鍵が保存されているファイルの中身を表示する。
$ less ~/.ssh/id_rsa.pub
-> 公開鍵が表示されるので、範囲選択してコピーする。(最後ののメールアドレスはコピーしない)
#-------------------
ssh-rsa hogehogehogehoge...~~略~~...hogehoge  mail@example.com
#-------------------
```

上記の鍵の部分をコピーしておきます。コピーが完了したら、Escボタンを押してコマンドモードに変更した後に「:q」を入力してEnterキーを押して保存すると先程の画面に戻ります。
Githubにログインして、右上の自分のアイコンをクリック > Settings > SSH and GPG keys > New SSH keys をクリックします。Keyの部分にコピーした内容をペーストして、Add SSH Keyをクリックすれば、Githubに公開鍵を登録できます。

##fatal: remote origin already exists.
解決方法：以下のコマンドを実行します。

```
#originの削除
$ git remote rm origin
$ git remote add origin git@bitbucket.org:ユーザー名/アプリ名.git
$ git push -u origin master
```

##最後に
簡単ですが以上です。
Vimのコマンド：https://prev.net-newbie.com/linux/commands/vi.html
[2020年版]VSCodeオススメのカスタマイズ例

Visual Studio Codeの設定で、自分のカスタマイズ例について[以前の記事](https://qiita.com/noanoa07/items/0e22d7115a35498e0e08)をアップデートしました。
（VSCode 1.47.0, macOS Catalina 10.15.5）

# 自分のおすすめカスタマイズ一覧
A. Intellisenseの補完候補を「Tab」キー／「Shift」+「Tab」キーで上下に移動する
B. 補完候補のパネルを「Ctrl」+「Space」キーで閉じる
C. 「Tab」キーでカッコの外にカーソルを移動する
D. 全角スペース（空白）文字を表示する
E. ファイルの最終行に改行を入れる
F. ファイルの最終行の改行は1つだけに削る
G. 行末のスペース（空白）文字を削る


# カスタマイズ方法
## キーボードショートカットの設定
### A. コード補完の候補を「Tab」キーと 「Shift」+「Tab」キーで上下に移動する
### B. 補完候補のパネルを「Ctrl」+「Space」キーで閉じる

メニュー＞「Code」 ＞「基本設定」＞「キーボードショートカット」＞「一覧」の右上の「キーボード ショートカットを開く(JSON)」アイコンをクリック＞「keybindings.json」ファイルが開く

以下の記述を追加します；

```keybindings.json
[
  {
      "key": "tab",
      "command": "selectNextSuggestion",
      "when": "suggestWidgetMultipleSuggestions && suggestWidgetVisible && textInputFocus"
  },
  {
      "key": "shift+tab",
      "command": "selectPrevSuggestion",
      "when": "suggestWidgetMultipleSuggestions && suggestWidgetVisible && textInputFocus"
  },
  {
    "key": "ctrl+space",
    "command": "hideSuggestWidget",
    "when": "suggestWidgetVisible && textInputFocus"
  },
]
```

## 拡張機能のインストール
メニュー＞「表示」＞「拡張機能」を選択＞「検索ボックス」に以下の拡張機能の名前を入れて検索＞「インストール」ボタンを押す

### C. 「Tab」キーでカッコの外にカーソルを移動する
拡張機能「[TabOut](https://marketplace.visualstudio.com/items?itemName=albert.TabOut)」を入れる

### D. 全角スペース（空白）文字を表示する
拡張機能「[zenkaku](https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku)」を入れる


## 基本設定＞設定
メニュー＞「Code」 ＞「基本設定」＞「設定」＞「テキストエディター」＞「ファイル」から以下を設定

### E. ファイルの最終行に改行を入れる（保存時）
「**Insert Final Newline**」 を有効に

### F. ファイルの最終行の改行は1つだけに削る（保存時）
「**Trim Final Newlines**」を有効に

### G. 行末のスペース（空白）文字を削る（保存時）
「**Trim Trailing Whitespace**」を有効に


　
以上で、自分的にはかなり快適になりました。
【超初心者用】MacでphpMyAdminからアクセスできない時の対処法

###ターミナルからはログインできるのに！
ターミナルからmysql起動してログイン。

```
起動
$ mysql.server start
```


```
ログイン
$ mysql -u root -p
```


phpMyAdminからログインしよう！
http://localhost/phpmyadmin/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668402/92feb891-e35a-a6c9-5596-82849e131937.png)

ユーザ名：root
パスワード：（mysql -u root -pの後に入力するパスワード）


するとエラーが出てきました。

```
mysqli_real_connect(): The server requested authentication method unknown to the client [caching_sha2_password]
```

これともうひとつ出てきましたが、これを調べて対処したら解決したので、残っていません。

どうやらMySQLにアクセスして修正する必要があるらしいです。

ターミナルに戻ってmysqlにアクセス

```
$ mysql -u root -p
```
パスワードを入力して入ると

```
mysql>
```
という表示がされるので、この状態で次を入力すると解決しました


###解決法
```
mysql> ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '(mysql -u root -pで入力するパスワード）';
```

とりあえずこれで解決しました。

###原因はなんだったのか？
不明です。分かる方教えてください！


やっとこれでphpのローカル環境ができました。
ここまでくるのに2日もかかりました。

途中nginxに寄り道してしまい、結局うまくいかずApacheでやることにしてもなお道に迷った生まれて数秒並の子羊が書きました。

これから立派な羊になれるように勉強していきます。


###参考にしたサイト
https://toaruhetare.net/9105
https://teratail.com/questions/29659
【初心者でもわかる】HTML・CSSで作る、簡単な三角形の作り方3選。

# どうも、7noteです。今回はHTML・CSSで吹き出しの三角形を作る3つの方法を解説していきます。

どうも7noteです。
この記事は以下へ引っ越しました。

https://naruweb.com/coding/fukidashi/
【Vue.js】各種プロパティについて

## はじめに
前日からの続きで、月曜からの新規プロジェクトへアサイン前に、引き続きVue.jsについて勉強を進めていきました。

備忘録として、学んだコードを踏まえて補足等記載していきます。
HTMLファイルにscriptタグを記述して1ファイルで完結するようコードを作成しています。

HTMLファイルのフォーマットは前回やったので、[こちら](https://qiita.com/kotakoma/items/14fe647c2b4d8a8d3404#%E4%BA%8B%E5%89%8D%E6%BA%96%E5%82%99)をご確認ください。

## 入力文字の反転

最初はv-onを使って入力した文字を反転する簡単のボタンを設置しました。


```vuejs:html
<div id="app">
  <p> {{ message }} </p>
  <p v-text=message></p>
  <p v-once> {{ message }} </p>
  <button v-on:click="reverseMessage">メッセージ反転</button>
</div>
```
```vuejs:vue.js
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'いろはにほへと',
      }
    },
    methods: {
      reverseMessage: function() {
        this.message = this.message.split('').reverse().join('')
      }
    }
  })
</script>
```
## 文字反転イメージ
![文字反転.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487094/620d70ec-135b-3dc7-4186-0c87b83807b9.gif)

こんな感じで文字反転を実装する事ができました。
{{ message }}
v-text=message
この2つは、記述方法は違いますが、意味は同じです。
もし記載内容を変更したくない場合、v-onceを使用する事で、反転しないようにすることができています。

## event関連
ここでは、以下を実装しています。

- クリックしたら数字が上がっていくカウントアップのボタン
- 座標を取得する実装
- URLのリンクを遷移しないように処理を止める
- input内でenterを押したらポップアップ表示

以上を実装しました。

```vuejs:html
<div id="app2">
  <p>現在{{ number }}回クリックしています</p>
  <!-- カウントアップの操作 -->
  <button v-on:click= "countUp(1)">カウントアップ</button>
  <!-- マウスを載せている間の処理 -->
  <p v-on:mousemove="changeMousePosition(3, $event)">この文字上でマウスを動かすと座標が動きます
  <span v-on:mousemove.stop>【ここの要素はマウスを動かしても反応しない】</span></p>
  <p>X軸:{{ x }},Y軸:{{ y }}</p>

  <!-- .preventでURLへ遷移しないようにできる -->
  <a v-on:click.prevent href="https://google.com">このGoogleリンクはpreventで無効</a>
  <br>
  <!-- キーアップを使う事でキーボード処理に介入できる -->
  <p>⬇︎エンターを押したらポップアップ表示</p>
  <input type="text" v-on:keyup.enter="myAlert">
</div>

```

```vuejs:vue.js
<script>
  var app2 = new Vue({
    el: '#app2',
    data: {
      number: 0,
      x:0,
      y:0
    },
    methods: {
      countUp: function(times){
        this.number += 1 * times
      },
      changeMousePosition: function(divideNumber,event) {
        this.x = event.clientX;
        this.y = event.clientY;
      },
      myAlert() {
        alert('エンターを押下したら表示されるアラート');
      }
    }
  })
</script>
```
## イメージ
![カウントアップ.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487094/64438997-fbd0-12cc-c116-9ef119269167.gif)

![座標.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487094/ec3a33a8-2e93-fc74-0981-7965f0824756.gif)

こんな感じで動かす事ができるようになりました。
もっとじっくりと確認しながらどのような動きをするのか把握できるようになれたらいいなと感じてます。
canvasで画像比較したい

## canvasで画像比較したい
最近ffmpegを使って音をいじいじする機会がありました。
いろんなパターンで音を編集してみたのですが、音の変化を耳で感じるのに限界を感じ、視覚的に見る方法ないかなぁと思っていました。
そしたらffmpegには音の波形を画像で出す機能があるようで。

https://nico-lab.net/create_samples_waves_image_with_ffmpeg/

波形の画像を生成したは良いが、微妙な違いを確認するためには結局目を凝らすしかないという結果に。。
Rubyには[rmagick](https://github.com/rmagick/rmagick)がありますが、javascriptでなんかできないかなぁと思いcanvasを使ってやってみることにしました。

## どうやったか

### 概要
`wave_1.png`と`wave_1.png`を用意し、canvasに順番にレンダリング。
レンダリングした情報を変数に格納。
画像を比較して差分がある箇所だけ色を付ける。

```index.html
<body>
  <p>image1</p>
  <img id="image_1" src="wave_1.png" />
  <p>image2</p>
  <img id="image_2" src="wave_2.png" />
  <p>diff</p>
  <canvas id="my-canvas" width="480" height="270"></canvas>
  <script type="application/javascript" src="canvas.js"></script>
</body>

```

```javascript
class WaveDiffChecker {
  load() {
    this.image1 = document.getElementById("image_1");
    this.image2 = document.getElementById("image_2");
    this.c1 = document.getElementById("my-canvas");
    this.ctx1 = this.c1.getContext("2d");

    this.width = this.image1.clientWidth;
    this.height = this.image1.clientHeight;

    this.checkWave();
  }

  checkWave() {
    this.ctx1.drawImage(this.image1, 0, 0, this.width, this.height);
    const frame1 = this.ctx1.getImageData(0, 0, this.width, this.height);
    this.ctx1.drawImage(this.image2, 0, 0, this.width, this.height);
    const frame2 = this.ctx1.getImageData(0, 0, this.width, this.height);
    
    const pixels = frame1.data.length / 4; // 同じ画像サイズなのでdotsは１つでOK

    for (let i = 0; i < pixels; i++) {
      const index = i * 4;
      const isSame = [0, 1, 2].every(value => {
        return frame1.data[index + value] === frame2.data[index + value];
      });
      frame1.data[index] = isSame ? 0 : 100; // Red値
      frame1.data[index + 3] = isSame ? 0 : 100; // Alpha値
    }
    this.ctx1.putImageData(frame1, 0, 0);
  }
}

const diffChecker = new WaveDiffChecker();
diffChecker.load();


```
![スクリーンショット 2020-07-10 22.09.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/622263/a9a3c995-bc53-8274-4502-8e68771b3c84.png)


## ポイント
`this.ctx1.getImageData(0, 0, this.width, this.height)`
getImageDataの返り値は[imageData](https://developer.mozilla.org/ja/docs/Web/API/ImageData)
であり、imageData.dataで[Uint8ClampedArray](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray)
にアクセスできます。
このArrayはRGBAの順で0から255のデータを持っています。

```javascript
//１ピクセルの構成
frame1.data[0] //=> 0(Red)
frame1.data[1] //=> 255(Green)
frame2.data[2] //=> 100(Blue)
frame3.data[3] //=> 150(Alpha)
```

各ピクセルの要素を順に確認していき、RGBAのどこかに差分がある場合のみ色をつけています。
「api serverが落ちたときにpodはどうなるのか」と聞かれたときにデモする手順

## TL;DR
K8sマスターが落ちてもサービスに影響ありません、と言っても信じてもらえなそうなときにするデモ

## 手順
1. デプロイメントつくる

```
kubectl create deploy nginx-demo --image=nginx:1.12 
```
2. サービスをExposeする
```
kubectl expose deploy nginx-demo --type=NodePort
```
3. tmuxで画面分割する
4. curlでサービスをつつく

```
while true; do curl http://10.0.1.174:30739  --head -s | head -1
```
5. etcdを落とす
6. APIサーバを落とす

curlで`HTTP/1.1 200 OK` が返ってき続けることを見てもらう。
Macにyarnをインストールする巻

# yarnをインストールするぞ！！！

## その前にyarnって何？
Yarnは、Node.jsのパッケージマネージャーのこと。
結論から言うと、サーバーサイドのJavaScript実行環境のことらしい。

##Node.jsって何？
node.jsとはサーバーサイドJavascriptのこと。
サーバーサイドでも動いたら便利になるみたい。


##ほいで、パッケージマネージャーって何？
新しいソフトウェアのインストール、新しいバージョンへのソフトウェアの更新とかを簡単にさせてくる便利なヤツ。


#本題に行こう


## 早速コマンドを生贄にyarnを特殊召喚してやる


```ruby:
$ brew install yarn
Updating Homebrew...

わっしょいわっしょい

🍺  /usr/local/Cellar/node/14.5.0: 4,659 files, 61.0MB
==> Installing yarn
xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun
Error: An exception occurred within a child process:
  CompilerSelectionError: yarn cannot be built with any available compilers.
Install GNU's GCC:　←←←←←← ん？？？
  brew install gcc　　
```


どうやらyarnを召喚するには**gcc**となるものを生贄にしないといけないようだぜ。








## ということで、**gcc**を召喚する。
```ruby:qiita.rb
$ brew install gcc
Updating Homebrew...
==> Downloading https://homebrew.bintray.com/bottles/gmp-

   わっしょいわっしょい  

cannot be installed as binary package and must be built from source.  
Install the Command Line Tools:　←←←← あん？？？
  xcode-select --install

```






どうやらgccを召喚するには**xcode-select**となるものを生贄にしないといけないようだぜ。


## ということで、**xcode-select**を召喚する。
```ruby:qiita.rb
 $ xcode-select --install
xcode-select: note: install requested for command line developer tools
```






##もういっちょ、**gcc**を召喚する。
```ruby:qiita.rb
$ brew install gcc      

わっしょいわっしょい

==> Downloading https://homebrew.bintray.com/bottles/gmp-
==> Pouring gcc-10.1.0.catalina.bottle.tar.gz
🍺  /usr/local/Cellar/gcc/10.1.0: 1,463 files, 338.5MB
```




##待ちに待ったyarnを召喚して、滅びのバーストストリームを放つ
```ruby:qiita.rb
$ brew install yarn     
==> Downloading https://yarnpkg.com/downloads/1.22.4/yarn-v1.22.4.tar.gz

わっしょいわっしょい

🍺  /usr/local/Cellar/yarn/1.22.4: 14 files, 5MB, built in 2 seconds
```


##大勝利
```ruby:qiita.rb
 $ yarn -v
1.22.4
【技術書まとめ】りあクト！ TypeScriptで始めるつらくないReact開発

普段はRailsを使って開発しているが個人プロダクトでReactを使ってみたかったので本書を手にとった。
振り返った時に思い出せるように、簡単にまとめていく。

## 第１章 こんにちはReact

環境構築から`yarn`の説明まで`react`の概要。

`ndenv`が非推奨になっていたため、`nodenv`を入れる。
参考にさせてもらった記事。
https://qiita.com/silmisilon/items/a2cc637eb7e59fa13f2c


## 第２章 ナウでモダンな JavaScript

新しいJSの構文紹介。

- `var`は使わない
    - ブロックをすり抜けるから不要なバグを生む


## 第３章 関数型プログラミングでいこう

非同期通信がほとんどなJSでは状態変化に人間の脳がついていけない。だから関数型が適する。関数型プログラミングの概要。


## 第４章 型のあるTypeScriptは強い味方

TypeScriptの概要。

- ストリングリテラル型（文字列リテラル型）
    - `let pet: 'cat' | 'dog' | 'rabbit' = 'dog';`
    - enumようにも使える
- `const`は再代入できないが要素の上書きや追加はできてしまう
    - そのため`ReadonlyArray<string>`がある


## 第５章 拡張記法JSX

JSXの実際の使い方。`if`や`コメント`など。


## 第６章 LintとPrettierでコードをクリーンに

- セッティング関連の紹介
    - https://github.com/oukayuka/ReactBeginnersBook-2.0/tree/master/06-lint/03-mysetting

```
・ eslint 
・ eslint-config-airbnb
・ eslint-config-prettier
・ eslint-plugin-import
・ eslint-plugin-jest
・ eslint-plugin-jsx-a11y
・ eslint-plugin-prettier
・ eslint-plugin-react
・ eslint-plugin-react-hooks
・ @typescript-eslint/eslint-plugin
・ @typescript-eslint/parser
・ stylelint
・ stylelint-config-prettier
・ stylelint-config-standard
・ stylelint-order
・ prettier
```

## 第７章 何はなくともコンポーネント

- Reactの基本思想
    - 仮想DOM
    - コンポーネント指向
    - 単方向データフロー

- LocalStateの`this`の違い
    - アロー関数にすると実行時オブジェクトとなる
- `e: SyntheticEvent`という引数
    - `e.preventDefault();`で元々の挙動を抑えられる
- `update`されるのは２つの場合のみ
    - `Props`の変更
    - `LocalState`の変更
- コンポーネントのライフサイクル
    - `componentDidMount()`
    - `shouldComponentUpdate()`
    - `componentDidUpdate()`
    - `componentWillUnmount()`
    - バージョン16.3から17にかけて大きく変更
- クラスコンポーネントよりも関数コンポーネントで書く
    - クラス内の`this`の挙動が難解
    - ライフサイクルメソッドの挙動が複雑
    - 導入予定の各種最適化のため
- コンポーネントとコンテナ
    - 見た目のコンポーネント
    - 機能のコンテナ


## 第８章 Hooksで関数コンポーネントを強化する

Hooksでのライフサイクル相当のもの

```react
useEffect(() => {
  doSomething();

  return clearSomething();
}, [watchVar]);
```

- HooksのAPIで重要なもの
    - `useState`
    - `useEffect`


## 第９章 ルーティングでURLを制御する

- SPAでは原則的にサーバーへリクエストが飛ぶことはない
- React Router ではルーティング遷移時にスクロール 位置が変わらない
    - `componentDidMount()` に `window.scrollTo(0, 0)` を仕込 んだコンポーネントを作る
    - DOM ツリーの上のほうでマウントさせる


## 第１０章 Reduxでアプリの状態を管理する

- MVCはインタラクティブなフロントエンドには適さない
    - データの方向を単方向にしたい
        - Fluxパターン
- Reduxの三つの原則
    - Single source of truth （信頼できる唯一の情報源）
    - State is read-only （状態は読み取り専用）
    - Changes are mode with pure functions （変数は純粋関数で行なわれる）
        - Reducer
            - `(prevState, action) => newState`
            - Actionが同じなら新旧の差分も同じという保証
- Reduxは導入すべきか
    - コンポーネントをまたいでデータを共有しない業務アプリはない
    - 一度導入すれば以降は`Store State`で管理できる
    - 初めからReduxに任せるべき
    - 背景や思想を知る
- **Flux Standard Action**
    - 適宜使う


## 第１１章 Reduxで非同期処理を扱う

非同期通信するための方法について

- `Redux Thunk`
    - `Action Creator`にAPI連携を書く
    - 「理解しやすく導入しやすいけど、放っておくとどこまでもコードが汚くなる」
- `Redux-Saga`
    - 開始・成功・失敗を定義する
    - 「綺麗に書けるけど、学習コストが高くてコード量も増える」


## 読後まとめ

とてもいい本だった。React、Hooks、Redux、などの解説が丁寧なのに加えて、それらが開発された背景や変遷なども詳細に説明してくれるので、機能の理解だけでなく「腑に落ちる」という気持ちにさせてくれた。

商業ベースの本ではここまで突っ込んだ内容にできないだろうし、やはりフロントエンド界隈のような鮮度の高い情報を必要とする世界ではこういった形態の書籍がこれからも有用になってくるのかなと思った。

ぜひ著者の次の本も読みたい。
ruby on rails ルーティング　エラーについて

confing/routes.rb

Rails.application.routes.draw do
  get "/home/top(.:format)" => "home#top" 
  get "/home/about(.:format)" => "home#about"
  
ルーティングがうまく行きませんどのように解決すればいいいいでしょうか？
end
<img width="1440" alt="スクリーンショット 2020-07-10 21.04.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671572/7a642b90-7940-d16d-a0e0-fd6fd296901c.png">
【PostgreSQL】could not connect to server: No such file or directory Is the server running locally and accepting connections on Unix domain socket "/var/run/postgresql/.s.PGSQL.5432"?と表示される。


#エラーについて

Railsサーバーを起動してみて、<http://localhost:3000/>にアクセスしたところ、
以下のエラーが表示された。

```
could not connect to server: No such file or directory Is the server running locally and accepting connections on Unix domain socket "/var/run/postgresql/.s.PGSQL.5432"?
```
サーバーに接続できないとのこと。

#原因

どうやらPostgreSQLが起動できていないから表示されているよう。
以下コマンドでPostgreSQLを起動。

```
sudo service postgresql start
```

エラーが表示されずに、アプリケーションに接続できました！
初心者によるプログラミング学習ログ 366日目

#100日チャレンジの366日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
366日目は、
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>昨日の作業・やったこと⇩<br><br>●ブログ記事1記事作成<br>●プログラミング学習366日目 2h<br>・udemyでフロントエンド講座<br>・メンターの課題<br><br>クーラー壊れたから扇風機最大で過ごす<a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E3%81%A4%E3%81%AA%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアとつながりたい</a><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a><a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a></p>&mdash; ぱぺまぺ@社畜✕投資✕ブロガー (@ppmp65) <a href="https://twitter.com/ppmp65/status/1281320955076243456?ref_src=twsrc%5Etfw">July 9, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Git 操作メモ

# 最初に行う設定

gitのパラメータは git 'option' 'parameter' 'value'のコマンドで設定する。

```shell
$ git config --global user.name "name"              #user名の設定
$ git config --global user.email "xxx@example.com"  #userのメールアドレス設定
$ git config --global color.ui auto                 #画面表示の色設定
$ git config --global core.editor "vim"
```

### 1. ローカルリポジトリの初期化

```shell
$ mkdir projectName
$ cd projectName
$ git init
```

ローカルリポジトリをリモートへ登録

```shell
$ git remote add origin "repo URL"
$ git remote -v                                    #display remote repository contents
```

すでにリモートにリポジトリがある場合はCloneする。

```shell
$ git clone "git repo URL"
```
リモートリポジトリの内容の取り込み：fetch, pull

```shell
$ git fetch "branch name"
$ git merge FETCH_HEAD
# or
$ git pull "branch name" HEAD
```



### 2. コミットする（更新記録をローカルレポジトリへ登録）ファイルをステージングエリアへ移行

```shell
$ git add "file name"
```
### 3. コミット

```shell
$ git commit -a
# edit commit message with an opened editor
```
このコマンドでエディタが立ち上がる。
１行目にコミットのタイトルを記入し、２行目を空白にして、３行目以降にコミット内容の説明を書く。
コミット内容には、なぜこの変更がなされたかの理由を書いておくのが重要。これは後からコードを修正する場合に大切になる。


### 4.　コミットログの確認:最新のコミット（HEAD)から順に上から表示される

```shell
$ git log
```

# branchの操作：作成、更新、マージ、削除

```shell
$ git branch #display the list of local branches
$ git branch -a #display the list of local and remote branches
$ git branch "branch name" #create a branch named "branch name"
$ git checkout "branch name" #move to the branch
$ git 
```
移動したbranch上でファイル更新、コミットを行う。

```shell
$ git checkout master
$ git merge "branch name"
```
コンフリクトが発生した場合は、内容に応じてファイルを修正する。修正後はCommitする。
競合箇所はファイル中に以下のように表示される。

```text
<<<<<<< HEAD
master側の内容
=======
branch側の内容
>>>>>>> "branch name"
```

# 過去のcommit履歴の操作

```shell
$ git rebase -i [commit ID]
# edit commit list
```

# 別ブランチ上の１つのコミットのみを現在作業中のブランチに取り込む：cherry-pick

```shell
$ git cherry-pick [commit ID] #commit messageを変更するには-eオプションをつける
```

# remote local ブランチの削除
```shell
$ git push --delete origin "branch_name" #remoteの削除
$ git branch -delete "branch_name"       #localの削除、コミットが残ってれば警告
$ git branch -D "branch_name"            #localの削除
```
勉強ノート：Tornado

# Source
- https://www.tornadoweb.org/en/stable/guide/structure.html

# Tornadoを使ったアプリ構成
1つ以上のRequestHandlerのサブクラス
1つのApplicationオブジェクト
1つのメイン関数で構成される。

## RequestHandlerサブクラス
大抵のハンドラはRequestHandlerを継承して作る。HTTPメソッドに対応したget()、post()などを定義しておく。render()をtemplateの読み込みのために用意しておく。write()はtemplateを使わないoutput用。

## Appicationオブジェクト
requestHandlerへのルーティング処理を行う。Application()の引数にurl()リストを渡す。

```python
app = Application([
  url(r"/", MainHandler),
  url(r"/story/[0-9]+", StoryHandler, dict(db=db), name="story")
])
```

## Request handling
現在のリクエスト内容はself.requestないのフィールドで確認できる。Request中のデータはget_query_argument(), get_body_argument()から取り出せる。

```python
class myHandler(tornado.web.RequestHandler):
  def post(self):
    self.set_handler("Content-Type", "text/plain")
    self.write(sefl.get_body_argument("message"))
```
JSONをform-encodingの代わりに使いたい時は、prepare()メソッドをオーバーライドする。

## Error handling
ハンドラが例外を発生した時、TornadoはRequestHandler.write_errorを呼び、エラーページを返す。write_error()の代わりに、set_status()を呼んでも良い。
４０４エラーのために、default_handler_classが使える。

## Redirection
2つやり方がある。
"RequestHandler.redirect" or "RedirectHandler"
Applicationのルートテーブルにrul(r"/app", RedirectHandler, dict(url="xxx"))で直接設定する。"xxx"には正規表現も使える。

## Asynchronous handlers
get(), post()などのメソッドはこルーチンとしてオーバーライドできる。
async def get(self): ... response = await xxx
PowerShellでSpeechSynthesizerを使う

# やりたいこと

Windowsのコンピューターを簡単に喋らせたいです。

# 喋らせる手順

1. PowerShellを起動します。
   - 例えば、ファイル名を指定して実行の画面でPowerShell.exeを実行するなど
   - PowerShell Version 6以上では動かないようなので要注意です
2. 次のコードを実行します。

```powershell
Add-Type -AssemblyName System.Speech
$speak = New-Object System.Speech.Synthesis.SpeechSynthesizer
$speak.SelectVoice("Microsoft Haruka Desktop")
$speak.Speak("こんばんは。")
```

# 音声の切り替え

インストールされている音声の一覧はこれにより取得できます。

```powershell
$speak.GetInstalledVoices() | Select-Object {$_.VoiceInfo.Name}
$speak.SelectVoice("何かの音声")
```

# Waveファイルとしての録音する

```powershell
$speak.SetOutputToWaveFile("Speaking.wav")
$speak.Speak("こんばんは。")
$speak.SetOutputToDefaultAudioDevice()
```

`SetOutputToDefaultAudioDevice`を呼ばないとWaveファイルがロックされたままになります。（より良い方法がありそう）
Perl: POST データの処理

Perl で Post のデータを処理するサンプルです。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<title>Form</title>
</head>
<body>
<FORM method="POST" action="./test_perl.pl">
<TABLE>
<TBODY>
<TR>
<TD>数量 :</TD>
<TD><INPUT type="text" name="apple" size="3" value="1"></TD>
<TD>個</TD>
<TD>
<button>カゴに入れます</button>
</TD>
</TR>
</TBODY>
</TABLE>
</FORM>
<hr />
Jul/10/2020<br />
</body>
</html>
```

```pl:test_perl.pl
#! /usr/bin/perl
#
#	test_perl.pl
#
#					Jul/10/2020
#
use strict;
use warnings;
use CGI;
#
print "Content-type: text/html\n\n";
print "<html>\n";
print "<head>\n";
print "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n";
print "<title>CGI テスト</title>\n";
print "</head>\n";
print "<body>\n";
print "CGI テスト<p />\n";
#
my $q = new CGI;
for my $param_name ($q->param) {
	print $param_name . ' = ' . $q->param($param_name) . '<p />';
}

#
print "<p />\n";
print "Jul/10/2020<p />\n";
print "</body>\n";
print "</html>\n";
```

数量を入力
![form_aa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/ca7c8a4e-d399-cd3f-b141-0ba0b83ba354.png)

ボタンをクリック
![form_bb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/19c930a2-797b-3ba0-3369-43fe424056f7.png)
Windows Updateで配布された新Edgeを削除する方法(危険)

# 何故こんな記事を書くのか？
先日「**休止状態**」を利用したところ*見事*に***復元失敗***し更にUpdateかまされました。
その更新内容に「**ChromiumベースのEdge**」が入っていました。
もちろん**Chromiumベース**のEdgeも**良い**のですが、中身がChromiumと**ほぼ一緒**では**EdgeHTML**用の**互換性テスト**(**無意味**)ができません。
**本当は***Chrome(Chromium)*や*Firefox*より**ACID Tests**の結果が良かったために利用したいと思った次第です。
# 方法
## 順序
大まかな順序は以下の通りです。

1. 新しいEdgeの実体を探す
1. ディレクトリをリサイクル(もしくは完全に削除)する
1. 新しいEdgeのショートカットを削除する

## 実践
**これは私が行った方法ですが時々新Edgeが*復活*することがあります。
またこの記事を読んで実践し損害が発生しても自己責任でお願いいたします。
必ず自己責任で行ってください。**
### 実体を探す
Chromiumベースの*Microsoft Edge*には**ダブルクリック**(Startコマンドなど含め)で起動できる**ハリボテではない**実行可能ファイルがあります。
私のPCの場合は`C:\Program Files (x86)\Microsoft\Edge\`以下に在りました。
### 実体をごみ箱へ
この`Edge`ディレクトリを**ごみ箱へ移動**するか**完全に削除**しましょう。
管理者権限が必要なので注意してください。
私としては**ごみ箱へ移動**することを***おすすめ***します。
ごみ箱を空にしない限りその場に残り続けいつでも復元できるようになります。
### スタートメニューとデスクトップにあるショートカットの削除
デスクトップ上のショートカットは簡単に削除できるけど、スタートメニューはどうするのか。
リンク先が存在しない場合は起動を試行すると`リンク先が見つかりません`とか書かれたダイアログが表示されます。
このダイアログで`リンクの削除`を選択すると**新しいEdge**の**アンインストールもどき**が終わります。
### 旧Edgeの起動
新Edgeのショートカットが**無くなると**何故か旧Edgeが起動できるようになります。
# 結局
**Firefox使うから意味がほとんどなかった。**
## 2020年7月19日追記
Make Girls Moeを使うのに便利です
Kindleの自動スクショ保存プログラム 〜PDF化編〜

# 初めに
[Kindleの自動スクショ保存プログラム](https://qiita.com/yassyyuki/items/1b70c694cbed3cc54af8)の記事でKindle本の全ページのスクリーンショットを保存することができましたが、画像ファイルだと何かと不便で扱いにくいと感じましたので、画像ファイルをまとめてpdf化するプログラムを作成しました。

# 使用方法

```
git clone https://github.com/yassyyuki/pdf_converter.git
```
または、`pdf_converter.py`ファイルを作成して、以下のコードをコピペしてください。

```py
from PIL import Image
import os
import datetime
import img2pdf


if __name__ == '__main__':
    pdfFileName = "hoge.pdf"  # 作成するpdfファイル名
    path = "hoge"  # 画像ファイルが入っているディレクトリ
    ext_p = ".png"
    ext_j = ".jpg"
    save_directory = "output_pdf" + "_" + str(datetime.datetime.now().strftime("%Y%m%d%H%M%S"))
    os.mkdir(save_directory)

    with open(save_directory + "/" + pdfFileName, "wb") as f:
        imageList = []
        for item in os.listdir(path):
            if item.endswith(ext_p):
                image = Image.open(path + "/" + item)
                image = image.convert('RGB')
                image.save(save_directory + "/" + item[:-3] + 'jpg')
                imageList = imageList + [save_directory + "/" + item[:-3] + 'jpg']
            elif item.endswith(ext_j):
                image = Image.open(path + "/" + item)
                image = image.convert('RGB')
                imageList = imageList + [path + "/" + item]
            imageList.sort()

        f.write(img2pdf.convert(imageList))

    # 余分に作成したjpgファイルの削除
    # 残しておきたい場合はコメントアウトする
    for i in imageList:
        os.remove(i)
```
そして、

```py
if __name__ == '__main__':
    pdfFileName = "hoge.pdf"  # 作成するpdfファイル名
    path = "hoge"  # 画像ファイルが入っているディレクトリ
```

の`hoge`となっている部分を適切に編集してください。
編集し終えましたら、実行しましょう。

```
python pdf_converter.py
```

すると、カレントディレクトリに、`output_pdf_XXXXXX`といったディレクトリが作成され、その中にさっき自分で設定したはずの名前のpdfファイルが保存されているはずです。

# 終わりに
今回のpdf化はあくまでも[Kindleの自動スクショ保存プログラム](https://qiita.com/yassyyuki/items/1b70c694cbed3cc54af8)で作成した画像ファイルを変換することしか確認しておりません。普通の画像ファイルの集合をpdf化できるかどうかは保証致しませんのでよろしくお願い致します。
Error: unknown command "filter-proces" for "git-lfs"

## 概要

作業内容としては、UnityのプロジェクトをAzurePipelinesでCI/CD対応をやってました。
Unityビルド対応は後でiOS/AndroidのProjectビルドをGitにPushして、AzurePipelines標準のiOS/Androidビルドを適応してアプリが正常にビルドと起動ができるのか確認、正常起動のみアプリをAppCenterに配布する想定で進めておりました。

Firebaseを使用しているので、`./Assets/Firebase/Plugins/x86_64/FirebaseCppApp-6_8_0.so`（約107M）が`git-lfs`が必須となりすでに対応は済ませていました。
ですが、ブランチ切り替えての作業で`git lfs track`でtrackedされているファイルが消えたり作られたりすると次のエラーが起き始めていました。
また、まずはiOSビルドを先にAzurePipelines対応しようと作業していたため、Xcodeプロジェクトを`git push`する際に`./xcode/libraries/libiphone-lib.a`（約602M）も`git-lfs`対応していたました。

```shell

$ git add .
Error: unknown command "filter-proces" for "git-lfs"

Did you mean this?
	filter-process

Run 'git-lfs --help' for usage.
fatal: The remote end hung up unexpectedly
```

このエラーについてググってみるものの参考になる記事が全く見当たらなかったので本記事にまとめたいと思います。


## 解決

結果的に[Git LFSの使用方法 - Backlog ヘルプセンター](https://support-ja.backlog.com/hc/ja/articles/360038329474-Git-LFS%E3%81%AE%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95)記事の内容を参考になりました！

解決方法はいたってシンプルで、

```shell

# もしcommitなりしていたadd前に戻す
$ git reset --hard HEAD^

# `git-lfs`のtracked以外の編集内容を先にpushしておくと安全に作業できる
# ただしCI/CD対応がすでに完了している環境だったらこのpushはエラーになるかもなのでそのときの状況に応じてよしなに
$ git add . && git rm --cached -r ./xcode/libraries/libiphone-lib.a && git commit -m "Upload Xcode Project" && git push

# `git-lfs`の設定をリセットさせるとエラーが無くなった・・・
$ git lfs install
WARNING: The "filter.lfs.process" attribute should be "git-lfs filter-process" but is "git-lfs filter-proces"
Run `git lfs install --force` to reset git config.

$ git lfs install --force
Updated git hooks.
Git LFS initialized.

$ git add . && git commit -m "add git lfs file"
[develop xxxxxx] add git lfs file
 1 file changed, 3 insertions(+)
 create mode 100644 Xcode/Libraries/libiPhone-lib.a

$ git push
```

### 原因

今回のミスは2点でした。

1. `.gitattributes`と`git-lfs`のtrackedファイルを一緒にPushしようとしていたこと
2. `Run 'git lfs install --force' to reset git config.`を無視していたこと

1はそもそも`git-lfs`の使用方法をちゃんと把握していなかったことでした汗
2はリセットする意味が分からず怖くてできなかったんですが、お手上げになったこともありやってみたところエラーは無くなりましたw


## まとめ

ちゃんとツールの使用方法を把握しないとですねー
XCodeが作成するSwiftUIのコードを読み解くための基礎知識をまとめる

## 目的
一般的な入門書は、XCodeでプロジェクトを作成したら、ContentViewでUIを追加することから記載されています。Swift **UI**なのでそうなるのは普通なのですが、ContentViewを見るまでどういう動作をしているかが気になったので調べてみました。
この調査内容をまとめるのが本記事の目的になります。

## AppDelegate
これは従来どおり、アプリケーションのコールバックをまとめて、アプリケーションの動作をカスタマイズするためのクラスで@UIApplicationMain属性がついており、アプリケーションデリゲートであることを表しています。

```swift
    func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration {
        // Called when a new scene session is being created.
        // Use this method to select a configuration to create the new scene with.
        return UISceneConfiguration(name: "Default Configuration", sessionRole: connectingSceneSession.role)
    }
```
ここでは、コールバックの一つを実装して、UIScenceConfigurationを設定しています。


## Info.plist
情報プロパアティリストのInfo.plistですが、「Application Scene Manifest」が設定されていて、以下のような要素が定義されています。

```xml
<dict>
	<key>UIApplicationSupportsMultipleScenes</key>
	<false/>
	<key>UISceneConfigurations</key>
	<dict>
		<key>UIWindowSceneSessionRoleApplication</key>
		<array>
			<dict>
				<key>UISceneConfigurationName</key>
				<string>Default Configuration</string>
				<key>UISceneDelegateClassName</key>
				<string>$(PRODUCT_MODULE_NAME).SceneDelegate</string>
			</dict>
		</array>
	</dict>
</dict>
```

## ScenceDelegateの決定

AppDelegateでは以下のコールバックが実装されています。
* application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) 

生成されたコードにおいて、UISceneConfigurationを生成していますが、引数である**name: "Default Configuration"**がポイントで、Info.plistに同じ名前でUISceneConfigurationNameキー（UIWindowSceneSessionRoleApplication辞書）に記載されています。

この設定のUISceneDelegateClassNameキーに設定されているクラスがScenceのDelegateになるという意味になります。この値はSecenceDelegateとなっており、生成されたクラスを指しています。


## SceneDelegate
Sceneのライフサイクルに対するコールバックを実装しているクラスです。

### Sceneが作られるタイミング

```swift
    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions){

        let contentView = ContentView()

        if let windowScene = scene as? UIWindowScene {
            let window = UIWindow(windowScene: windowScene)
            window.rootViewController = UIHostingController(rootView: contentView)
            self.window = window
            window.makeKeyAndVisible()
        }

}
```
Sceneのライフサイクルコールバックとして上記の実装が生成されています。

ここで実際の画面であるContentViewが作られ、引数のsceneに対して設定をします。
UIWindowSceneはUIWindowを使ったシーン実装で現状ほかのもの見つけられませんでした。

UIHostingController（UIViewController化するためのラッパー）によって最初にだすべきViewに設定されています。


## ContentView

```swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
    }
}
```

View プロトコルを実装しているContentViewは自動生成された構造体です。
body変数にUIを記載することで画面を構成します。この変数に定義する内容がSwiftUIの特徴といえます。


## ContentView_Previews

```swift

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
```
この構造体がPreviewを可能とするものになります。previews変数にて、プレビューするViewを設定します。ここでは上記のContentViewを設定しています。

## この後
ContentView のbody変数に要素を追加していきます。
axiosを利用してVue.jsからサーバーサイドにFormDataを送る方法

vuejsからサーバーサイドへFormDataを送る方法を備忘録として載せます.
## 方法
axiosはデフォルトではjson形式としてリクエストを送信する.
そのためFormDataとしてリクエストを送るためには, 以下のように FormData オブジェクトを作成, インスタンス化した後, append() メソッドで送りたい値を付与する.

```
const params = new FormData()
params.append( key, value );
```

## 具体例

```
v-model='mailAddress'
v-model='password'
```

```
import axios from 'axios'

const params = new FormData();
params.append('mailAdress', this.mailAddress);
params.append('password', this.password);

axios.post(
   ' URL ',
    params,
   { headers: {'Content-Type':'application/json'} } //Content-Typeを記述
)
.then(response => {
   ...
});
```

このようにすることでサーバーサイドにFormDataとして送ることができる.

## 参考文献
- https://www.npmjs.com/package/axios
VSCode拡張機能 「C/C++ Advanced Lint for VS Code」　CppCheckの設定をカスタマイズする

# C/C++ Advanced Lint for VS Code

vscodeの拡張機能の静的解析ツールの**C/C++ Advanced Lint for VS Code**の設定を変更したかったので調べました。

拡張機能のgithubから見ていきます。
github: [jbenden/vscode-c-cpp-flylint: A VS Code extension for advanced, modern, static analysis of C/C++ that supports a number of back-end analyzer programs.](https://github.com/jbenden/vscode-c-cpp-flylint)


## VScode拡張機能の設定方法を理解する

拡張機能でカスタマイズ設定ができる部分には`設定ID`というのが振られています。
`設定ID`を指定して、settings.jsonに設定を書き込むことで機能をカスタマイズすることができます。

今回カスタマイズする拡張機能のgithubのpackage.jsonを調べることで用意されている設定IDを調べます。

場所は`vscode-c-cpp-flylint/package.json`でした。

今回はcppcheckの警告で抑制したいものがあったのでcppcheck関連の部分を読んで探します。

設定ID`c-cpp-flylint.cppcheck.suppressions`が見つかりました。

```
"c-cpp-flylint.cppcheck.suppressions": {
          "type": "array",
          "default": [],
          "description": "Warnings to suppress. Refer to the CppCheck documentation for what to supply here."
        },
```

Warnings to suppress.
Refer to the CppCheck documentation for what to supply here.
<font color="ForestGreen">警告の抑止。ここで何を提供するかについては、CppCheckのドキュメントを参照してください。</font>

とのことなので、CppCheckのドキュメントを探します。

## CppCheckのドキュメント

調べたら出てきました。
documentation: http://cppcheck.sourceforge.net/manual.pdf

関係しそうな部分を抜粋します。

```
Chapter 6
Suppressions
If you want to filter out certain errors you can suppress these.

Please note that if you see a false positive then we (the Cppcheck team) want that you report it so we can fix it.

6.1 Plain text suppressions

You can suppress certain types of errors.
The format for such a suppression is one of:

[error id] : [filename] : [line]
[error id] : [filename2]
[error id]

The error id is the id that you want to suppress.
The easiest way to get it is to use the –template=gcc command line flag.The id is shown in brackets.
The filename may include the wildcard characters * or ?, which match any
sequence of characters or any single character respectively.
It is recommended that you use “/” as path separator on all operating systems.
The filename must match the filename in the reported warning exactly.
For instance, if the warning contains a relative path then the suppression must match that relative path.
```

エラーIDを調べて、VSCodeのsettings.jsonに書き込めばなんとかなりそうです。

## error idを調べる

ターミナルで以下のコマンドを打てば調べられます。

```
cppcheck --enable=all --xml [エラーが出ているファイル名]
```

xml形式で詳細な情報が出力されるのでエラーIDが書かれているところをメモします。

私が抑制したいエラーIDは`variableScope`でした！


## 設定ファイルに書き込む

VSCodeの設定ファイルの`settings.json`に以下の設定を書き込みます。


```settings.json
{
  "c-cpp-flylint.cppcheck.suppressions": ["variableScope"]
}
```

警告が抑制できました。

## その他、おすすめ設定
C使うならこの設定もおすすめ。

```
  "c-cpp-flylint.language": "c",
  "c-cpp-flylint.standard": ["c11"],
  "c-cpp-flylint.clang.warnings": ["all"]
```


## 所感

初めてVSCodeの拡張機能の詳細設定を自分でやることができました！
調べる過程も含めて勉強になりました。
IDは数字だと思いこんでいたので、IDにもいろいろあるのだと知りました。

#### 2020/07/20追記
他の拡張機能の設定とかしていると、この拡張機能がけっこう不親切なものだとわかってきました。設定するためのドキュメントが大雑把で使う人に優しくない作りでした。