OmniAICreator/Qiita-1.07M huggingface dataset:
（Windows10 ver2004向け）半角・全角切り替えを簡単にする

# 対象
Windows 10 version 2004 以降を利用されている方向けです。

# 概要
通常 Windows では「半角/全角」キーを押すことにより半角/全角を切り替えます。
このトグル方式だと、現在のモードが半角か全角かを覚えている必要があり、無駄が多いと思います。
（自分は実際にキー入力をした後で、半角だった（全角だった）と気づくことが多かったです。）

対して、Mac は「英数」キー、「かな」キーとそれぞれ専用のキーがあり、このような問題は起こりません。
（「英数」キーで半角、「かな」キーで全角に切り替わる。全角の状態で「かな」キーを押しても全角のまま。）

そこで、Windows も同じように「半角」専用キーを追加するために、設定を変更します。

# 手順
Windwos の設定より「言語の設定」へ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39684/68af16fa-56dc-beeb-0ff6-fd10a9e90987.png)

言語より「オプション」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39684/5dab6558-c352-398c-8099-efadf3de9b23.png)

キーボードより「Microsoft IME」の「オプション」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39684/461315e0-b97a-760d-3a70-fb0ed0f0f05f.png)

キーボードのカスタマイズを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39684/289b38f1-4ca9-00d9-759f-019a6bf88dd6.png)

「キーの割り当て」を「オン」に
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39684/292069ff-6291-2ebe-6c61-94b9ead261fc.png)

「無変換キー」の割り当てを「ひらがな/カタカナ」から「IME オフ」へ変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39684/101c8abe-5338-58c0-99b7-31c8bb6d6e5f.png)

# まとめ
これで半角入力したいときは「無変換キー」を押せばいつでも切り替えれます。
全角入力したいときは「かな」キーを押せば切り替えれます。

手元の環境で検証した限り、Windows 10 version 1903 以前の環境だと、IME の詳細設定奥深くまでいかないと設定できませんでしたが Windows 10 version 2004 ではかなり簡単に設定できるようになったようです。
要望が多かったのでしょうか。
カレントディレクトリ配下をfzf+grep(rg)でインクリメンタルに全文検索したあとにvimで開く

もうそういうツールが絶対あると思って探したんだけどなぜか見つからなかった。（きっとある）

grepとfzfの組み合わせだと再帰的にgrepしたあとにファイル名でフィルタリングする方法はたくさんあったんだけど、そうじゃなくてカレントディレクトリ配下の全ファイルをfzfを使ってインクリメンタルに全文検索したい。

Laravelをvendor含めて検索するとこういう感じ。

![tmp.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146958/fa6fa492-f124-4ef4-3e4f-e8aff50d21be.gif)

## コード

```shell
#!/bin/bash

grep_cmd="grep --recursive --line-number --invert-match --regexp '^\s*$' * 2>/dev/null"

if type "rg" >/dev/null 2>&1; then
	grep_cmd="rg --hidden --no-ignore --line-number --no-heading --invert-match '^\s*$' 2>/dev/null"
fi

read -r file line <<<"$(eval $grep_cmd | fzf --select-1 --exit-0 | awk -F: '{print $1, $2}')"
( [[ -z "$file" ]] || [[ -z "$line" ]] ) && exit
$EDITOR $file +$line
```

## おまけ

一応grepでも動くと思うけど、rgの方が30%くらい早い。

```shell
# grepで全文走査
masakuni@mi-air % grep_cmd="grep --recursive --line-number --invert-match --regexp '^\s*$' * 2>/dev/null"
masakuni@mi-air % time (eval $grep_cmd | wc)
  769816 4200126 84045096
( eval $grep_cmd | wc; )  1.91s user 0.42s system 124% cpu 1.874 total

# rgで全文走査
masakuni@mi-air % grep_cmd="rg --hidden --no-ignore --line-number --no-heading --invert-match '^\s*$' 2>/dev/null"
masakuni@mi-air % time (eval $grep_cmd | wc)
  769987 4201356 84059315
( eval $grep_cmd | wc; )  1.33s user 0.79s system 339% cpu 0.624 total
```
個人アプリ作成＃１

# 雛形の作成
rails バージョン　new app名　-d MySQL　で作成

Git hub Desk topと連携してコードの保存

## トップページの作成
<img width="1440" alt="スクリーンショット 2020-07-11 3.25.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663122/e93980eb-afcf-f9eb-20ff-25078d671b5b.png">
この後に、投稿一覧を作りたいと思う。
kshではreadonlyにした環境変数は子プロセスでもreadonly （環境変数 A__z の謎）

タイトルのとおりですが ksh（KornShell）では環境変数を readonly にすると子プロセス（正確には子プロセスが ksh の場合）にも引き継がれて readonly のままになっています。なんだこれは？とハマったので。ネットを探してもほとんど情報がないです。（ここ「[Remove the magic `A__z` environment var](https://github.com/att/ast/issues/637)」ぐらい）

:::note warn
**2024-03-22追記** この記事の対象シェルは ksh93 系で ksh93u+m 系は対象外です。

子プロセスの ksh に変数の属性が継承される機能には問題があるとして ksh93u+m 1.0 の POSIX モードで無効になり 1.1 で削除される予定となっています。また `readonly` 属性に関しては子プロセスで値を初期化するのが不可能となりセキュリティ上の問題があるとして先行してすでに無効になっています。

- https://github.com/ksh93/ksh/issues/566
- https://github.com/ksh93/ksh/commit/7954855f21145112599e4a66ae199693e4313453
:::


**検証コード**

```console
$ ksh
$ readonly VAR=123
$ export VAR
$ ksh # 新たなkshを起動
$ VAR=456
ksh: VAR: is read only # readonlyになってる
```

もちろん OS としては環境変数に readonly なんてものはないので、子プロセスが ksh 以外だと普通に書き換えられます。ただし孫プロセスが ksh だと readonly 扱いです。（笑）

```console
$ ksh
$ readonly VAR=123
$ export VAR

$ dash
$ echo $VAR
123
$ VAR=456 # dashで書き換えられる

$ ksh
$ echo $VAR
456
$ VAR=789
ksh: VAR: is read only # 書き換えられたのに readonly らしい
```

どうやって実現してるんだ？と少し考えて思い出したのが BASH のシェル関数のエクスポートの仕組みです。

bashではシェル関数を子プロセス（当然 bash に限る）にエクスポートできます。例えば `export -f foo` でシェル関数 `foo` をエクスポートすると `BASH_FUNC_foo%%` という環境変数に `() {  echo foo; }` という値（コード）が代入されてエクスポートとされます。（注意 dash だとこの環境変数は見えません。おそらく環境変数名に `%%` という文字が含まれているからではないかと。~~POSIX 的には不正だと思うのですが動かない OS はないのでしょうか？~~ ※[コメント](#comments)参照）

同様に ksh では `A__z` という環境変数に（複数の）環境変数の属性が代入されていました。

```console
$ ksh
$ readonly VAR=123
$ export VAR
$ env | grep VAR
VAR=123
A__z="*SHLVL=! VAR

$ typeset -i VAR # VARを数値型にしてみる
$ env | grep VAR
VAR=123
A__z="*SHLVL=#*VAR
```

`A__z` 環境変数の値の意味はよくわかりませんが[ソースコード](https://github.com/ksh-community/ksh/blob/e7f25423818abe159edf52f5799d66bd3621ab0b/src/cmd/ksh93/sh/name.c#L2224)をざっと見る限り、`typeset` で指定できる属性が格納されるようですね。（ちなみに `const char e_envmarker[]	= "A__z";`）

```c
stakputs(e_envmarker);
tell = staktell();
nv_scan(shp->var_tree, attstore,(void*)0,0 (NV_RDONLY|NV_UTOL|NV_LTOU|NV_RJUST|NV_LJUST|NV_ZFILL|NV_INTEGER));
```

そうした理由はわからなくはないですが子プロセス（サブシェルではない）に変数の属性が引き継がれて嬉しいことってなにかあるのでしょうか？

ちなみに私がやりたかったのは、親（ksh）プロセスで readonly にした変数を子（ksh）プロセスで書き換えたかったのです。zsh では `typeset +r` で readonly 属性を外せたりするのですが ksh や bash では外せません。そこで考え出したのが `env` を使って自分自身を起動し直す方法です。

```sh
if [ "${FLAG:-}" != 1 ]; then
  typeset +x VAR # readonlyとなってる環境変数VARのエクスポート属性を削除しただの変数にする
  exec env VAR="$VAR" FLAG=1 "$0" "$@" # env コマンドの引数でVAR変数を改めて環境変数にして呼び出す
fi
```

同じように`A__z` 環境変数を削除することでも実現できると思います。この場合は属性全てが削除されます。
（AWS初心者）なんのためにVPC構築するのか？

## （結論）EC2(Webサーバー)をつくるためにVPCを構築する　
▼EC2を作成するためには？
VPCをつくって、更にそこからネットワーク（サブネット）を分けて、その中にサーバーを設置する。

▼じゃあそのVPCを作成するためには？
リージョンを選択してアベイラビリティーゾーンにまたがってVPCをつくる。

見返した時、パッと思い出せるよう,一つ一つ調べてみた。


## リージョンとは
AWSの各サービスが提供されている地域のこと。日本にあるのは東京リージョンのみ。
日本でサービスを展開する場合は東京リージョンに提供してもらえばよい。

## アベイラビリティーゾーンとは
独立したデータセンターのこと。

【用語】
・データセンター・・・顧客のサーバー機などを収容し、運用管理している施設。ドラマとかでよくみるやつ。
<img src="https://japan.zdnet.com/storage/2017/01/30/0fc3b6cf76a132e131ce27d3645a083c/t/584/438/d/datacenter_640x480.jpg" width=50%>
尚、災害でサーバーがダメになっても替えがきくように東京リージョンにはアベイラビリティーゾーンが３つあるそう。

## VPCとは
Virtual Private Cloudの略。
AWSアカウント専用の仮想ネットワークを作成できるサービス。

Q.仮想のメリットは？
A. ルーターやゲートウェイなどのネットワーク機器がなくても、インターネットを利用できる！

【用語】
・ ルーター・・・IPアドレスを見て行き先を振り分けてくれる機器。「あなたはあっち行って」「君はこっち行って」的な。
・ ゲートウェイ・・・　規格(予め決められた基準)が違うネットワークを中継する機器


## サブネットとは
VPCを更に細かく分けた仮想ネットワークのこと。
ネットワークによって役割を変えたいときに活躍する。
　・WEBサーバーはネットワークで見れるようにしたい！
　・データベースサーバーはネットワークから見れないようにしたい！
　　など。
firestoreのcollectionGroupのデータ取得で `The caller does not have permission to execute the specified operation.`

# firestoreのcollectionGroupを使うと下記のようなエラーが出た

こんな権限エラーが出る…

```
Error: [firestore/permission-denied] The caller does not have permission to execute the specified operation.
```

Native Firebase

```
NativeFirebaseError: [firestore/permission-denied] The caller does not have permission to execute the specified operation.
```

## 解決 - セキュリティールールを正しく書き換えよう！

firestore Security Rulesを確認してください。

collectionGroupで下の階層のサブコレクションにアクセスするには
`match /{path=**}/コレクション名/{documentId}`
の様に上の階層をカスケードしてあげるとPermissionのエラーが消えます！

```js
rules_version = '2';
 service cloud.firestore {
    match /databases/{database}/documents {
      // 認証済み
      function isAuthenticated() {
        return request.auth.uid != null
      }

       // コレクショングループの所
       match /{path=**}/followor_ids/{followerIds} {
        allow read, write: if isAuthenticated();
      }
    }
 }
```

こんなコードを書いてる時に発生します！

```js

firestore().collectionGroup(COLLECTION_NAME).where('ids', 'array-contains', uid).get()
```

## 参考

[Collection Group permissions for Firestore - by stackoverflow](https://stackoverflow.com/questions/56313459/collection-group-permissions-for-firestore)
HTML,CSSだけでホームページ作成『開発環境編』「前編」

#はじめに
HTMLとCSSでホームページを作成するためには

- エディタ
- ブラウザ

この2つが必要になってきます。

<img width="752" alt="スクリーンショット 2020-07-11 0.28.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669260/4b5e1a9c-fd4a-e2e4-0698-74daf2e79412.png">

グラフを見て分かるようにエンジニアの**3人に1人**がVisual Studio Codeを使用
していることになります。

なので、今回はVisual Studio Codeを使用していきます。


#1.VisualStudioCodeをインストール

- サイトにアクセス

今回はmacOSでやっていきます。
下記のリンクからアクセスして「Download for Mac」をクリック
https://code.visualstudio.com/
<img width="1437" alt="スクリーンショット 2020-07-11 1.01.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669260/ef120011-06eb-5b3c-f3d7-53fff22e55ae.png">

- ダウンロード

クリックすると自動でダウンロードが開始されます。
<img width="1440" alt="スクリーンショット 2020-07-11 1.04.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669260/42d31049-894d-2c71-f616-90ba5a31a1e1.png">

- zipファイルを解凍

画面右下の ① のアイコンをクリックすると、ダウンロードフォルダに入ったファイル一覧が出てくるので、該当の ② をクリックします。

※Finderから直接でも上記でもどちらからでも良いです
<img width="1440" alt="スクリーンショット 2020-07-11 1.08.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669260/d7abcd19-9341-4296-fc54-ee0f756e79f6.png">

- アプリケーションフォルダに移動

ダウンロードフォルダVisualStudioCode表示されると思いますが、まだ開かないでおきましょう。
そのアイコンをドラッグアンドドロップで、サイドメニューの「アプリケーション」に移動させます。

<img width="1440" alt="スクリーンショット 2020-07-11 1.15.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669260/4b4244d7-0de9-ea3b-31e1-706baf36398e.png">

- 認証ボタン押す

画面が表示されたら「認証」ボタンを押して、管理者のログイン情報を入力し認証してください。

<img width="1440" alt="スクリーンショット 2020-07-11 1.20.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669260/d4126e89-b4fc-726e-49d2-859fe9f925e3.png">

- アプリケーションフォルダから「VisualStudioCode」を開く

<img width="1440" alt="スクリーンショット 2020-07-11 1.21.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669260/9888e502-6016-3bbd-ccdb-1225df309762.png">

これでエディタの開発環境は終わりです。
お疲れ様でした！

#まとめ
今回、ブラウザのことまで書きたかったんですが長くなりそうなので「前編」「後編」と言った形に分けさせてもらいます。


今回ご紹介したVisualStudioCodeは、デフォルトで便利な機能が備わっていますし、扱いやすさも抜群なので、初心者の方でも使っていて不便ということがほぼないと思います。

もし機能で困ったことがあっても、VSCodeは認知度が高く、ネットに多くの情報が載っているため、検索すればいくらでも解決策が出てきます。
※Qiitaを有効活用しましょう！！！！

ただ、初めのうちはどのエディタを使用しても違いがよくわからないと思います。

しかし、使っていくうちに『こんな機能をつけたい』『これが便利』と感じることが増えてくると思いますので、その後に自分に適したテキストエディタを見つけてどんどんコードを書いていきましょう！



#参考文献
【2020年最新版】プログラミング効率を上げるテキストエディタ
https://frontend-diary.com/programming-editor/
MacOSでVisual Studio Codeをインストールする手順
https://qiita.com/watamura/items/51c70fbb848e5f956fd6
[Rails]carrierwaveを使って画像を保存する

タイトルの通りになります。

ゴールは画像を表示させるまでとなります。

## gemを導入

初めはgemを入れます。
バージョンを指定しなければ最新のものがインストールされます。

```:Gemfile
gem 'carrirewave'
```

ターミナルでいつものよろしくお願いします。

```
$ bundle install
```


## アップローダファイルの生成

次にアップローダファイルを作成しましょう。

```
$ rails generate uploader Image
create  app/uploaders/image_uploader.rb
```

これで`app/uploaders`の中に`image_uploader.rb`が生成されていると思います。


ちなみに`Image`の部分はマウントするモデル名だとか,
わかりやすい名前。私はよくImageで生成しています。

```ruby:image_uploader.rb
class ImageUploader < CarrierWave::Uploader::Base
 # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick
  # include CarrierWave::MiniMagick
  # process resize_to_fit: [300, 200]

  # version :thumb do
  #   process :resize_to_fit => [50, 50]
  # end

  # 以下省略
end
```

このファイルの中で画像アップロードに関する設定ができます。例えば、アップロードする画像の拡張子の制限だったり、画像サイズのリサイズだったりいろんなことができます。

## モデルに書く
画像アップロードさせたいモデルに先ほど作成したファイルをマウントしてあげましょう。

今回はhogeモデルのimageカラムに画像を登録させたいケースで考えます。

```ruby:hoge.rb
class hoge < ApplicationRecord
  mount_uploader :image, ImageUploader
end
```

## 登録するためのFormを作る

各ページ必要な情報を渡してあげます。

```ruby:hoges_controller.rb
class ArticlesController < ApplicationController

  def new
    @article = Article.new
  end

  def create
    @article = Article.new(user_params)
    if @article.save
      redirect_to user_path(@article)
    else
      render :new
    end
  end

  private
  def article_params
    params.require(:article).permit(:image)
  end
end
```

```erb:/hoges/new.html
<%= form_with model: @hoge, local: true do %>
    <div class="field">
		<%= f.label :image %>
		<%= f.file_field :image %> <!--画像はfile_field -->
	<div class="action">
		<%= f.submit %>
	</div>
<% end %>
```

## アップロードした画像の表示

画像の表示は基本的には、以下のように記述すると表示されます。

```erb
<%= image_tag @article.image.url %>
<%= image_tag @article.image.to_s %> 
```

## 終わりに
最後まで読んでいただきありがとうございます。
お勉強している方に少しでも力になればと思います。
Docker上のJupyter Notebookのmatplotlibの日本語文字化けを解決する

# はじめに
様々な環境でjupyterを使うたびに日本語文字化け問題に苦しんでいる気がします。
今回は解決策がドンピシャのものがなかったので、記録します。

# 概要
Docker上のJupyter Notebookのmatplotlibの日本語文字化けを解決する。
（Dockerfileに追記する形で進めます。）

# ポイント
1. フォントファイルの置き場所を確認する
2. フォントのダウンロード
3. 確認した場所にフォントファイルを置く
4. matplotlibの設定ファイルの場所を確認
5. matplotlibのフォントを設定
6. キャッシュの場所確認
7. キャッシュを削除


# 作業
## 1.フォントファイルの置き場所を確認する
jupyter上で確認。

```python

import matplotlib.font_manager as fm
fm.findSystemFonts()
```
['/ファイル置き場PATH/なんとか.ttf',
 '/ファイル置き場PATH/なんか.ttf'] のように表示されると思います。（3で使う）

## 2. フォントのダウンロード
[IPAexフォント](https://ipafont.ipa.go.jp/node26#jp)から「IPAexゴシック」をダウンロード。
Dockerfileと同じディレクトリにipaexg.ttf置いておく。

## 3. 確認した場所にフォントファイルを置く
Dockerfileに追記。

```Docker
COPY ipaexg.ttf  /ファイル置き場PATH（1で確認）/
```

## 4. matplotlibの設定ファイルの場所を確認
jupyter上で確認。

```python

import matplotlib
matplotlib.matplotlib_fname()
```
'/設定置き場PATH/matplotlib/matplotlibrc'のように表示されると思います。(5で使う)


## 5. matplotlibのフォントを設定
Dockerfileに追記。

```Docker
RUN echo 'font.family : IPAexGothic' >> /設定置き場PATH/matplotlib/matplotlibrc
```

## 6. キャッシュの場所確認
jupyter上で確認。

```python

import matplotlib as mpl
mpl.get_configdir()
```
'/キャッシュ置き場PATH/.cache/matplotlib'のように表示されると思います。(6で使う)

## 7. キャッシュの削除

```python
!rm -r /キャッシュ置き場PATH/.cache/matplotlib
```


# おわり


![スクリーンショット 2020-07-11 1.27.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248927/b6d9c58c-0179-ce39-e83f-825f774bde6d.png)
Javaのメソッド

##はじめに
前回の配列の投稿でスパム認定されましたこんにちは。

##メソッド
・メソッドとは部品だったりゲームの技ようなもの(クラスはステータスのような※あくまで私の感覚)。
・**クラスの{}（ブロック）の中に書かないと動かない**。
・メソッドを使うことによって同じ処理などする時なんども同じ処理を書かずに呼ぶだけで済むので楽。
・コードの見通しや管理が楽になる。

```kane.java
public static void メソッド名() {
 実行する処理 ;
}
```

```kane.java
class Main{
   public static void main(String[]args) {
    banana() ;  //()は必要。
   }

   public static void banana() {
    System.out.println("黄色") ;
   }
}
```
・戻り値とは
呼び出されたメソッドから、呼び出し元のメソッドへ返す値(データ)のことを**戻り値または返り値**という。

##public static void main(String[] args) {　}

・**javaのプログラムを実行した場合自動でmainメソッドから始まる。**。
・main メソッドが各メソッドに指示を出し、支持された各メソッドが個々の処理を実行する。

・忘れず書いとけば今はおK。

##引数
・メソッドに与える追加情報のようなもの。
・メソッドを呼び出す際に呼び出し元から値を渡すことができる。
・それによって渡されたメソッド内でもその値が使えるようになる

引数を受け取れるメソッドを定義するために、メソッドの定義部分で、引数を受け取るための箱となる変数（仮引数（かりひきすう））を指定し public static void banana() の()に仮引数を指定する。
仮引数は、変数定義と同様に、**データ型を指定する必要があります**。

```kane.java
class Main{
   public static void main(String[]args) {
    banana("赤") ;  
   }

   public static void banana(String color) { //データ型を指定
    System.out.println("このバナナの色は" + color + "です。") ;
   }
}
```
何も引き渡す情報がなかったとしても (　) は必要なので必ず記入する。

**・複数の引数を渡す場合**

```kane.java
class Main{
   public static void main(String[]args) {
    banana("フィリピン", 5) ;  
   }

   public static void banana(String origin, int year) { 
    System.out.println("このバナナは" + origin + "産の" + year + "年ものです。") ;
   }
}

実行結果
このバナナはフィリピン産の5年ものです。//それは腐ってます

```

##戻り値
・呼び出し元へ値を返す。

・return
retuneはメソッドをすぐ終了させ、戻り値を戻すもの
returnは、一つのメソッドの中では戻り値が**有る・無い**の必ずどちらか一方です。どちらになるかはメソッドの宣言のされ方、特に戻り値の有無で決まる。

・**戻り値がvoidでないなら戻り値が必須**
メソッドの宣言で戻り値がvoidではないなら、returnには戻り値となる値、あるいは戻り値とするインスタンスを指す変数を**必ず**指定しなければならない。

※データ型一覧　　https://java-code.jp/68

```kane.java

   public static 戻り値のデータ型 メソッド名(引数) {
    retune 戻り値 ;  
   }

   public static int add(int a, int b) { //データ型がintだから整数で返す
    retune a + b;
   }
```
戻り値の説明というよりデータ型の理解が深まった　//自分用メモ
##オーバーロード
同じメソッド名で、引数の**型**と**数**だけが異なるメソッドを複数定義することもできる。
同名のメソッドがあっても、引数が違えばどれを呼べばいいのかコンピュータが判断できるため。

※参考　https://wa3.i-3-i.info/word17678.html



```kane.java

  class Main {
  public static void main(String[] args) {
    nameData(fullName("田中", "一郎"), 25); //同じメソッド名だが数が違う
    nameData(fullName("佐藤", "マメシバ", "二郎"), 38); //同じメソッド名だが数が違う
  }

  public static void nameData(String name, int age) {
   System.out.println("名前は" + name + "で年齢は" + age + "です"); //引数を変えてやりたい同じ処理
  }

  public static String fullName(String firstName, String lastName) { //田中の方が発動する
   return firstName + " " + lastName;
  }

  public static String fullName(String firstName, String middleName, String lastName) { //佐藤の方が発動する
   return firstName + " " + middleName + " " + lastName;
  }
}
```

オーバーロードの主な使う理由としては引数を変えて同じ処理を行いたい場合です。

##終わりに
途中投稿して完成に時間がかかりました。
戻り値とオーバーロードがどうしてもぼんやりとしか理解ができない。
やってくうちに染み付こんでいくことをお祈り。
PHPのアクセス修飾子

##はじめに
PHPのアクセス修飾子の違いについて今更ながらちゃんと理解できました。
今までちゃんと考えないで使っていたので復習しました。

##PHPのアクセス修飾子について
まずはアクセス権が厳しい順にprivate→protected→publicとなっています。


**・private**
同じクラスの中でのみアクセス可能。
非公開で継承クラスからもアクセス不可能。

**・protected**
そのクラス自身と継承クラスからアクセス可能。
非公開だがが、継承は可能。

**・public**
どこからでもアクセス可能。
アクセス修飾子がない場合は、publicを指定したものと同じになる。


まずprivateにできないか考えてそれば無理ならprotected→publicみたいな順に考えるのが良いでしょう。
publicを使えば動くは動くのですが、安定したサービスの運用のためには適切なものをつかうのが良いでしょう。

##おわりに
実装していく中で細かい部分に関してはいったんおいておいて大枠をとらえるようにしていましたが、これからは細かい要素も学んでいきたいと思います。

参考：[PHP: アクセス権 - Manual](https://www.php.net/manual/ja/language.oop5.visibility.php)
HTML5の全要素の振り返りをかねて整理する（整理中）


# はじめに
HTML5の学習を兼ねて全要素を確認中。

# HTML5全要素

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212722/37fd11f9-c5b3-cd4b-dad7-5294b9dc5bad.png)


# グローバル属性
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212722/61260781-cb30-d886-f862-26f7befb887b.png)
AWS EC2インスタンスの終了方法（セキュリティGの削除とキーペアの削除）

## インスタンスの終了
* AWSにログイン
* 「EC2」をクリック
* 左ペインから「インスタンス」をクリック
* 右ペインに表示されたインスタンス一覧から削除したいインスタンスにチェック
* 「アクション」→「インスタンスの状態」→「終了」を選択
![del_instabce1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618171/f6460af3-f7ac-ef93-41e8-acd30c7cebc6.jpeg)

##セキュリティグループの削除
* 左ペインから「セキュリティグループ」をクリック
* 該当のセキュリティグループを選択する
* 右上の「セキュリティグループを削除」をクリック
![del_instance2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618171/dc560ee0-65b0-0580-c74d-332d7d619350.jpeg)
* 表示されたポップアップの「削除」をクリック
![del_instance3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618171/dfcfef2c-f7b0-2d07-5d56-793ff21f988b.jpeg)

* 削除されたことを確認する
![del_instance4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618171/dd2ce654-115b-c980-a007-31bd5ba16b96.jpeg)

##キーペアの削除
* 左ペインから「キーペア」をクリック
* メインカラムに表示されたキーペア一覧から、該当のものを選択する
* 右上の「アクション」→「削除」を選択
![del_instance5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618171/97527125-5b66-c9be-146b-d07ee7178ec3.jpeg)

* フィールドに削除を入力し「削除」ボタンをクリック
![del_instance6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618171/7cf7a652-8057-33f0-a0ea-6d7a5ac47e55.jpeg)
* 「キーペア」一覧から削除されていることを確認して終了
* お疲れ様でした！
あなたのライバルは、あなたの味方でもある。ビジネスパートナーの利益も考えよう。

あなたのライバルは、あなたの味方でもある。

あなたが、何か技術を開発して製品を販売して利益をあげようと思っているとしよう。

あなたの製品と直接競合する技術の開発をしているライバルは、あなたが利益を上げる上でじゃまなものと思っているかもしれない。


でも私は主張したい。
あなたのライバルは、あなたの味方だ。


## 理由

- あなたとライバルとは、ともに共通の技術を利用していることがある。
    - その共通に利用している技術が進展することが、ともに成長につながる
    - その共通に利用している部品が、安定して供給され価格も安くなっていくことが、ともに成長につながる。
    - そういう意味で、あなたはライバルと利害を共通にしていることがある。


- あなたとライバルは、ともに共通のお客様の期待を必要としている。
    - あなたが開発している製品は、だれかお客様の期待にそうものでなくてはならない。
    - そのような技術があること、それが実用になることをお客様に伝えなければ、だれもあなたの開発した技術・製品に気づいてくれることがない。
    - ユーザーは、代替手段のない技術は採用したがらない。
        - 例：AMDという代替手段があるからIntelのCPUを安心して選択できたというタイミングもあっただろう。
        - 例：FPGAがXilinx,Altera がともに共通に同様なサービスを提供していることで、ユーザーはそのサービスが十分に信頼できるものだと確信できた。
        - 例：表示パネルを採用するにあたって、代替品のない方式のものよりは、代替品を確保しやすい方式の方が採用されやすい。
    - ライバルがそれが実用になることを示してくれれば、**もうひとつの別な実装もあって、それがもっといいものであることを伝えるのはあなたの実力次第だ。**
 




職業的なプログラマである場合、ビジネスの成功が重要だ。そうしないと自分の安定した稼ぎを得ることができない。アルゴリズムの開発ができて、実装ができれば十分なわけではない。

そしてビジネスを成功させるには、あなたのビジネスが伸びると喜ぶ人がいなければならない。あなたの会社の製品やサービスのユーザーが、それらを購入してくれることはもちろんだ。

ここで言いたいのは、ビジネスパートナーとの関係だ。だからこの文章では、ビジネスパートナーと関係についての私見を述べたいと思う。

## 人によっては、ビジネスパートナーの利益を考えない場合がある。

- 値切れるだけ値切ろうとする考え方
- あいまいすぎる仕様での発注と度重なる仕様変更
- 自分たちからの情報を出し惜しみしようとする。
- 特に、自分たちが持っているノウハウをパートナーに分け与えようとしない。


## しかし、そのようなやり方ではビジネスを成功させることができない(と私は思う)。

- 値切れるだけ値切ろうとするのをやり過ぎると、ビジネスパートナーにとって、その仕事を引き受けるメリットがなくなる。
- 仕事を引き受けるメリットがなくなったときに、相手先の開発者のモチベーションの低下を引き起こしてしまう。


- あいまいすぎる仕様での発注と度重なる仕様変更は、パートナーに開発の苦難を強いることになる。もっとも開発に苦難はつきものだが、しなくてよい苦労はしないで済ませられるの越したことはない。

- 発注側であるという傲慢のために理不尽な対応をしていれば、ビジネスパートナーの心を引き離してしまう。

- その開発を成功させることで自分たちが成長できると思える開発をしたいはず。

- あなたが持っている有意義な知見があれば、受注側の開発が格段に楽になる可能性がある。にもかかわらず、あなたの知見を出し惜しみすれば、それを利用できないことで開発側が苦労することになる。
- 利用しないかもしれない技術での技術的な難しさを放置しないこと。使われることがわかっているものでは、それが使われたときに開発の努力が報われるとして努力を続けることができる。しかし、利用されるかどうかわからないらしく、開発の要件として十分整理されなくて、依頼主側は、そこに書かれている開発要件がどれだけ技術的に難易度が高くなる選択をしているのか理解してなければ、虚しく感じるだろう。



## ビジネスパートナーにとっても(金銭以外の意味も含む)利益のある開発にするには

### 一緒に開発するビジネスパートナーには、開発をしやすくするための情報をどんどん提供しよう。
難しい開発をしているときは、開発を少しでも成功しやすくするノウハウが重要だ。ある種の工夫で、必要なデータの数が数分の１になることがあります。適切な前処理を施すことで、機械学習の精度が格段に向上することもあります。

難しい開発をしているときに、そのような知見を出し惜しみするとどうなるでしょう。あなたの知見をビジネスパートナーが採用すれば、必要なデータの数が数分の１になるのに、それを相手は採用できません。そのために少ないデータでは、必要な要件に達することができないということが起こりえます。それはあなたの会社が望んでいることでしょうか。

もちろん、ノウハウを自分の会社の中の秘密にしておきたいという考えがあるのも理解します。しかし、そのようなノウハウは、すぐに他のだれかも気づいていて割と当たり前のことになってしまうものです。また、技術の進展は、そんなささいなノウハウをすぐに無意味なレベルにしてしまうほど素早く進展しているのです。

パートナーには、パートナーのとして利益が重要です。金銭的な利益はもちろんですが、一緒に仕事をしていく中で双方の技術が成長していくような部分も大切なことです。

## ビジネスパートナーにとって利益のある開発にすると、自分たちのが得をする。


- パートナーにとっての利益を考えないと、自分たちの利益が引き出せ得ない。
- その技術のプラットフォームが数年間あるいは１０数年間にわたって継続するには、技術の利用者が自分たちの製品だけでは不足であって、同じプラットフォームを使う他のユーザーがあってこそ、その技術のプラットフォームは残ることができる。

例：プラズマディスプレイは、開発している企業が数社から１社になってしまった時点で、成功する仕組みを壊してしまった。

選択肢がない技術（製品）よりは選択肢のある技術（製品）を使いたい。
選択肢がなければ、相手の言い値で買うしかなくなってしまう。
選択肢がなければ、１社での生産能力が間に合わなければ、別の会社から調達することができない。
選択肢がなければ、競争が起こりにくく、技術の向上が期待できにくくなる。
選択肢が少なければ、そのプラットフォーム上でのビジネスをするよりは、選択肢の多いプレイヤーが多い方の陣営でビジネスをすること望むようになる。

パイオニアをプラズマディスプレイから徹底させてしまった時点で、パナソニックのプラズマディスプレイは、ビジネスの枠組みとして失敗してしまった。



- 技術開発・製品開発をする際には、パートナーと自分たちの双方の利益が得られやすいように考えることが必須だ。
-
Xamarin.Forms ガワネイティブアプリで、C# から JavaScript へのリクエスト～レスポンスを Task<T> にする

メモ書きなので雑。

## シナリオ

- Xamarin.Forms + WebView(HTML, JavaScript な SPA) のガワネイティブアプリである
- Android アプリの BACK キーの有効無効を、WebView 内のページ状態によって切り替えたい
    - データ編集中(未保存)なので Back キーで history.back やアプリ終了されたら困る、とか
   
## 流れ

1． [Forms側] ``Action<TaskCompletionSource<bool>> OnRequestIsEnableBackKey { get; set; }`` を生やす

2． [Forms側] WebViewEx(WebViewを拡張したもの)に ``Task<bool> IsEnableBackKeyAsync()`` も生やす。実装は次のように。

```csharp
public Task<bool> IsEnableBackKeyAsync()
{
    var comp = new TaskCompletionSource<bool>();

    if (OnRequestIsEnableBackKey != null)
    {
        OnRequestIsEnableBackKey.Invoke(comp);
    }
    else
    {
        comp.SetResult(false);
    }

    return comp.Task;
}
```

3． [Android側] WebViewRenderer を拡張した MyWebViewRenderer を作る。

4． [Xamarin.Forms の WebView で JavaScript 連携を行う(with iOS/Android共通化) - Qiita](https://qiita.com/amay077/items/2a8f14684b1210d75c1e) を参考に JavaScriptHandler も作る。コンストラクタで Control に加え ``e.NewElement as WebViewEx`` も渡す。引数の名前は ``WebViewEx outer`` とする。AddJavascriptInterface の第2引数は ``GawaApp`` とでもしておく。

5．JavaScriptHandler のコンストラクタで OnRequestIsEnableBackKey を受信するコードを書く。

```cs
private TaskCompletionSource<bool> isEnableBackKeyComp = null;

public JavaScriptHandler(Android.Webkit.WebView webView, WebViewEx outer)
{
    outer.OnRequestIsEnableBackKey = comp => 
    {
        isEnableBackKeyComp = comp;

        // メインスレッドから呼ばないとエラー
        webView.Post(() =>
        {
            webView.EvaluateJavascript("window.requestIsEnableBackKey()", null);
            // webView.LoadUrl("javascript:window.requestIsEnableBackKey();"); ←これでもOKっぽい
        });
    };
}
```

ここまでの処理で、Forms 側で ``await webViewEx.IsEnableBackKeyAsync()`` が呼び出されたら、JavaScript の ``window.requestIsEnableBackKey()`` 関数が呼び出される。

6．JavaScriptHandler 内に onResultCanExitApp を生やす。JavaScript側 から結果が通知されるメソッドである。次のように。

```cs
[Export]
[Android.Webkit.JavascriptInterface]
public void onResultIsEnableBackKey(bool value)
{
    isEnableBackKeyComp?.SetResult(value);
    isEnableBackKeyComp = null; // one shot
}
```

JavaScript 側で ``GawaApp.onResultIsEnableBackKey(true or false)`` を呼び出すと、このメソッドがコールバックされる。
TaskCompletionSource である isEnableBackKeyComp に値を設定すれば、Forms 側の ``await webViewEx.IsEnableBackKeyAsync()`` の結果が返される。

7．JavaScript 側はきっとこんな感じ

```javascript
window.requestIsEnableBackKey = () => {
  
  // 何かの処理

  GawaApp.onResultIsEnableBackKey(true or false);
}
```


途中まで実装したけど、面倒になって（JavaScript→C# に単方向の方がシンプルでいいやと思って）やめちゃったので、アイデアだけ残しておきます。
自動更新で最後のメッセージのデータを反映させるときの注意

## 前提
macOS Catalina
バージョン10.15.5
rails Rails 6.0.3.2

自動更新機能について実装を知っていること。
今回は私が疑問を解決できた部分に焦点を当てている。


## 目的
自動更新時に最後のメッセージをページに反映させるときの注意点を記し再発防止に努める。


## 本文
A、Bの２つの画面があったときにAに投稿されたメッセージがBにも自動で反映されるようにしたい。
以下のコードを書いたとする。

last_message_id = params[:id]

これで最新のメッセージを自動更新時する際に必要なidをつけれる。
ただし問題が一つある。それは、まだ何も投稿していないときに反映されないのです。
理由はlastがあるのは前提として先に投稿されたものがあることでしか使えないためです。
ズレが起きてしますのでを防ぐために以下のようにします。

last_message_id = params[:id]**.to_i**

.to_iでメッセージが書かれたデータを数字に変換して管理している。これによりコンピューターは０から始まるから、１番目の最後のメッセージ＝最初から２番目のメッセージだけでなく、０番目の最後のメッセージ＝最初のメッセージも取得できる。
AWS RDSにローカルから接続できないときの対策

# AWS RDSにローカルから接続できないときの対策

備忘録を兼ねて。

AWSのRDSインスタンスにローカルから接続できないときに考えることはいくつかあります。

* セキュリティグループの設定
* ポートの確認
* ユーザーIDが正しいか確認

…

などなどやっても接続できないときは、**パブリックアクセシビリティ**が無効になっているかもしれません。

確認・変更するときは、DBインスタンスの概要画面から変更をクリック：

「ネットワーク & セキュリティ」の「パブリックアクセシビリティ」が「**いいえ**」になっている場合、セキュリティグループを開放していても接続できません。

「**はい**」に変更しましょう。

初歩的なところですが、DBインスタンス作成時のデフォルトはパブリックアクセシビリティがオフになっているようなので、少しハマりました。

##参照
[EC2からRDS(MySQL)に接続できない。セキュリティグループの設定について・・・](https://qiita.com/nao-otsu/items/8cabd447d73b621cd07d)
[Amazon LinuxからPostgreSQL(RDS)へ接続する](https://qiita.com/panasan/items/634ad5ad895f0c9e5bd0)
C#とXamarinを使用したプログラム開発

「Xamarin」について書きたいと思います。

## １．Xamarinとは？
　XamarinはXamarin社(現Microsoft社に買収)が開発したiOS、Mac、Androidで動作するアプリを開発ができるプラットフォームです。
　基本的にはC#で開発します。<br />　以前はiOSアプリを開発するためにMac端末でXcode上で開発する必要がありましたが、
　Xamarinは※Monoをベースに実装されているため、VisualStudio上での開発が可能になりました！(コンパイルにはMacが必要)
　※Mono：.NET Frameworkの要素をLinuxやMacでも利用できるマルチプラットフォーム基盤のイメージ
　何と言っても1つの言語で複数のプラットフォームに対応したアプリを作成できることが　最大の利点です。
　iOSとAndroidに言語を分ける必要がないため、コードを共有できます。
　コードの共有については、UI画面と業務ロジック(BR)の2つに分けられています。
　1つ目はUIはiOS、Android固有のコードで実装し、業務BRのコードを共有する方法。
　これがいわゆる言われている、Xamarin.iOSやXamarin.Androidです。まとめてXamarin Nativeとも呼ばれます。
　2つ目はUI画面と業務BRの両方を共有する方法。これがXamarin.Formsです。

## ２．Xamarin Native(Xamarin.iOSとXamarin.Android)
　Xamarin.iOSとXamarin.Androidは業務BRはC#で実装し、UI画面は各々の開発コードで実装をします。iOSであればstoryboard、
　AndroidであればxmlでUI画面を作成します。UI画面は固有の開発コードで作成するため、すでに作成しているアプリケーションの
　移植を考えた場合、画面はそのまま移植ができるのが利点です。
<figure class="figure-image figure-image-fotolife mceNonEditable" title="Xamarin Nativeの場合">
<img class="hatena-fotolife" title="f:id:Jaso:20190317194336j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/J/Jaso/20190317/20190317194336.jpg" alt="f:id:Jaso:20190317194336j:plain" />
</figure>
## ３．Xamarin.Forms
　Xamarin.Formsは、iOS・Android・Windows10デバイス(UWP)を実装することができるフレームワークです。UI画面はデバイス共通で「XAML(Extensible Application Markup Language)」(読んで「ざむる」)を利用します。
　このXAMLはもともとXMLをベースに開発された言語であり、C#・VBなどの.NET言語でも利用することができ、UIの初期レイアウトを定義するために使用されています。

<figure class="figure-image figure-image-fotolife mceNonEditable" title="Xamarin.Formsの場合">
<p><img class="hatena-fotolife" title="f:id:Jaso:20190317194504j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/J/Jaso/20190317/20190317194504.jpg" alt="f:id:Jaso:20190317194504j:plain" />
</figure>
## ４．まとめ
　Xamarinと呼ばれるクロスプラットフォーム開発が可能なフレームワークについて記載しました。その中でUIコードをデバイス固有で実装し、業務BRは共有コード(C#)で実装できる既存アプリの移植性に便利な「Xamarin Native」と、UIコードも共有化(XAML)し、業務BR(C#)も共有化可能な「Xamarin.Forms」について記載しました。<br />　私は、Xamarin.Formsをでどこまでアプリの開発ができるかを勉強中ですが、正直、Xamarin.Fomrsだけでクロスプラットフォームに対応したアプリができるかわかりません。少しずつ実装していきながら自分自身で確かめたいと思います！
[Rails] Devise でgem' html2slim'を使用した際のエラーについて

Deviseを使用した際,「$rails g devise:views」を実行後、
`$ bundle exec erb2slim app/views/devise -d`を実行した。

その後、「localhost:3000/users/sign_up」に飛んだ際にエラー発生。
<img width="994" alt="スクリーンショット 2020-07-10 23.56.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671633/0a41ca89-d0fc-460a-6a86-4e97dde61c23.png">

```ruby:app/views/devise/shared/_error_messages.html.slim
- if resource.errors.any?
  #error_explanation
    h2
      = I18n.t("errors.messages.not_saved",
      -                  count: resource.errors.count,
      -                  resource: resource.class.model_name.human.downcase
```

よく見ると slim の構文が間違っている。
「`-`」は埋め込みrubyを記述する際に使用するので、構文がおかしい。
よって、「`-`」を消去することでエラーが回避された。

## 感想
エラー内容は単純なものでしたが、自動でファイルの中身を
修正してくれるgemは完璧ではないという事を学べました。
ShellScriptでwhile read line内で定義した変数を取り出す方法について

以下のような`ShellScript`を書いて、`while read line`内で定義したの変数`$sum`を取り出そうとしても取り出せない。  

```code:shell
#!/bin/bash

# test.txt = 1, 2, 3, 4, 5
sum=0
cat test.txt | while read line;
do
  sum=$(( $sum + $line ))
done

echo $sum # 0が返ってくる。
```

`while read line`内にある変数`$sum`を取り出そうとしても、初期値（`0`）のままになる。
これは、`ShellScript`の中でパイプ（`|`）を使うとパイプ先の処理は別プロセスになるためです。  

結論から言えばパイプ（`|`）を使わなければ、変数の値を取り出すことが可能ですが、今回は関数を使って取り出す方法を記載します。  

```code:shell
#!/bin/bash
__count() {
  local line sum=0

  while read line;
  do
    sum=$(( $sum + $line ))
  done

  echo $sum
  return 0
}

# test.txt = 1, 2, 3, 4, 5
total=0
total=`cat test.txt | __count`
echo $total # 15が返ってくる。
```

このように`while read line`の処理を関数で抜き出して、`echo`をつかって値を返すことで、結果を変数`$total`に格納できる。（この場合だと`15`が返ってくる）
nbconvert覚え書き

# convert時に、特定のセルを無視したい
nbconvertで、タグを無視させることができる。

jupyter notebookのテンプレートにtex (pdf) 用のプリアンブルと、html用のプリアンブルの両方を用意しておき、nbconvert時にいらない方のセルを無視させればよい。

## そもそもタグって何

左上のメニューで、View -> Cell Toolbar -> Tags を選ぶと、各セルにタグをつけられるようになる。

## タグの無視設定

>
TagRemovePreprocessor.remove_input_tags
TagRemovePreprocessor.remove_single_output_tags
TagRemovePreprocessor.remove_all_outputs_tags

忘れるので、以下を設定。

```bash:~/.bashrc
juphtml ()
{
   \jupyter nbconvert  --to html --execute "$@" --TagRemovePreprocessor.remove_cell_tags="{'tex'}"
}
juppdf ()
{
   \jupyter nbconvert --to pdf --execute "$@" --TagRemovePreprocessor.remove_cell_tags="{'html'}"
```

# タイムアウトを回避
10分(600秒)に設定する場合。

```bash
jupyter nbconvert --ExecutePreprocessor.timeout=600 
```
【備忘録：jQuery】ブロックスコープ

#関数に引数について
今回csvを読み込みそれをJSONに変換しフロント部分を対応していたのですが、csv読み込みのajax内のdone内で自分で書いていた、変数がなぜ読まれるのかと思っていたので備忘録です。

##ソース
```javascript:hoge.js
for (var num = 0; num < jsonArray.length; num++) {

  if(jsonArray[num].hogehoge === '1'){
    htmlOutPut();//①これが呼び出す関数
  }

//ここが呼び出される関数
  function htmlOutPut() {
    const $jsonHoge = $('#hogehoge');

    let $html = '<li>';
        $html += '<a href="#" data-modal="' + num + '">';//②ここのnumが呼ばれているのが不思議だった
        $html += '<p>' + jsonArray[num].ttl + '</p>';//②ここのnumが呼ばれているのが不思議だった

//以下省略

    }
  }
```

この②ように**「for内で関数呼び出しをしているため参照できるだろうな」**と思ってました。

##ブロックスコープ
var、letについて以下参照させていただいたのですが、
https://qiita.com/masarufuruya/items/096e51c3e4c36c86ae27

**{}内のブロックのみで使うブロックスコープが作れるか作れないか**が今回の要因だったようです。

```javascript:hoge.js

for (var num = 0; num < jsonArray.length; num++) {
//ここのnumの宣言がvarのため、ブロックスコープが作れない
  if(jsonArray[num].hogehoge === '1'){
    htmlOutPut();//
  }

  function htmlOutPut() {
    const $jsonHoge = $('#hogehoge');

    let $html = '<li>';
        $html += '<a href="#" data-modal="' + num + '">';//ブロックスコープが作れないのでここでアクセスできた
        $html += '<p>' + jsonArray[num].ttl + '</p>';//ブロックスコープが作れないのでここでアクセスできた

```
もしこれが以下のように、letでの宣言であればブロックスコープとなりアクセスができませんでした。

```javascript:hoge.js

for (let num = 0; num < jsonArray.length; num++) {
//宣言がletのため、ブロックスコープが作れる
  if(jsonArray[num].hogehoge === '1'){
    htmlOutPut();//
  }

  function htmlOutPut() {
    const $jsonHoge = $('#hogehoge');

    let $html = '<li>';
        $html += '<a href="#" data-modal="' + num + '">';//ブロックスコープなのでアクセスできない
        $html += '<p>' + jsonArray[num].ttl + '</p>';//ブロックスコープなのでアクセスできない

```
正直、上記の状態でアクセスできたのですが、
- どこで宣言しているものを参照しているのかがわからなくなる
- コードの保守性が落ちる
ということもあり、関数の引数で渡すようにしました。
##引数
**jsonArray[num]**自体はそのまま関数内で使用したかったので、

```javascript:hoge.js
for (let num = 0; num < jsonArray.length; num++) {
  if(jsonArray[num].hogehoge === '1'){
    htmlOutPut(jsonArray[num]);//jsonArray[num]を引数で渡す

  function htmlOutPut(jsonNum) {//渡された値を使用する
    const $jsonHoge = $('#hogehoge');

    let $html = '<li>';
        $html += '<a href="#" data-modal="' + num + '">';
        $html += '<p>' + jsonNum.ttl + '</p>';//先程同じように指定するが、引数の値を参照させる

  }
```
このように、
**・呼び出す関数の引数に、jsonArray[num]を渡し、関数で値を使用する**
ということで対応しました。

ただ、変数numだけ（カウントされた数字が格納された変数）も使用したかったので、

```javascript:hoge.js
for (let num = 0; num < jsonArray.length; num++) {
  if(jsonArray[num].hogehoge === '1'){
    htmlOutPut(jsonArray[num], num);//jsonArray[num]とnumを引数で渡す

  function htmlOutPut(jsonNum, index) {//渡された値を使用する
    const $jsonHoge = $('#hogehoge');

    let $html = '<li>';
        $html += '<a href="#" data-modal="' + num + '">';//ここはindexで参照する
        $html += '<p>' + jsonNum.ttl + '</p>';//ここはjsonNumで参照する

  }
```
上記のように、引数を２つにし関数内に渡してあげることで解決しました。
いつものMacをJetson Nanoのディスプレイとして使う方法

#はじめに
aloha！
先月くらいにNVIDIAのJetson Nano（B001）を入手し、いろいろ試しています。物体認識なんか、macのCPUと比較にならないくらいとても早くて驚きです。さすがGPU（CUDAコア128基）マシン。
うちにはディスプレイがなく、リビングの液晶テレビのHDMI端子に繋いでいたのですが、大きすぎてみにくいのと使える時間が限られているのでどうにかならないものかと試行錯誤。
最初は、画面共有をするためにVNCを入れたり、RDPを設定したりと。
ただ、カメラを使った画像系の表示がHDMI経由でないとできないようなので困っていました。そこで、仕方なくハードウェアを投入。

#HDMI出力をMacへ入力するには
HDMI Video Captureデバイスをを使いました。ゲームプレイ動画を配信する人が使うものらしいです。今回は、Amazonで販売されていた<a href="https://www.amazon.co.jp/gp/product/B089GM19XR/">ZasLuke HD HDMI キャプチャーボード</a>を使いました。かなり小型で外部電源も不要です。

#準備物
・Mac本体（Macbook AirやMacbook Proなど）
・Jetson Nano + キーボード　+ マウス　+ WiFiドングル等
・HDMI Video Captureデバイス
・HDMIケーブル
・（必要であれば）USB-A to USB-C変換コネクタ

##ハードウェア
ハードウェア構成としては、
①Jetson NanoのHDMI出力端子にHDMIケーブルを接続
②HDMIケーブルをHDMI Video CaptureデバイスのINPUT側に接続
③HDMI Video CaptureデバイスのOUTPUT側USB端子にUSB-A to USB-C変換コネクタを接続
④USB-C変換コネクタをMacBookのUSB-C端子に接続

##ソフトウェア
macOS側でUSBカメラとして認識するので、画面に表示させる必要があります。例えば、<a href="https://obsproject.com/ja">OBS Studio</a>などが利用できます。
①OBS Studioを起動
②ソースで、「映像キャプチャデバイス」を追加
③Jetson Nanoのデスクトップが表示される
④コントロールの「設定」で「映像」→「基本解像度」＝1920×1080に設定、FPS共通値＝30（任意に決めてください）
⑤OKを押下し設定画面を終了

これで、Macの画面にJetson Nanoのデスクトップが表示されます。

#おわりに
想像していたよりは綺麗に表示できました。マウスやキーボードは、当然ながらJetson Nano本体に接続したものを使います。どうしてもMacのキーボードやトラックパッドを使いたくなるのでご注意を。Jetson Nanoでカメラモジュール経由で物体認識の結果をリアルタイムで見たりする程度であれば、問題なく使えそうです。

mahalo！
例外処理が必須なクラス

チェック例外とは、開くべきはずのファイルがない等、
プログラムの不具合とは関係なく、 状況によっては発生しうる状況とされるもので、例外処理が必須となります。
####ClassNotFondException

Excptionクラスのサブクラス。
クラスをロード出来ない場合に発生します。
例外処理は必須です。

####IOException
Exceptionクラスのサブクラス。
入出力機能を使用する場合に発生します。
例外処理は必須です。

####FileNotFoundException
Exceptionクラスのサブクラス。
ファイルに対する読み書きを行う際、対象のファイルが存在しない場合に発生します。
例外処理は必須です。
AWSをゼロから勉強する。vol.1

7/10
まずは使う単語を覚えようと思います。

[Region(リージョン)]
　AWSを運用している基盤のある地域の事
　地理的に近ければ遅延が少なくて済む。
　選ぶリージョンによって料金が変わる（現地の電気代、土地代などの影響）
　頻繁にアクセスしないようなものはコスト安いところに置くなど、工夫できる。
　
[Availability Zone(AZ)]
　簡単に言うとデータセンターの事。
　複数のAZに分けてサーバーを配置することで負荷分散、冗長化が図れる。

[Virtual Private Cloud(VPC)]
　AWS内に構築できる仮想のネットワーク環境。
　同じVPC内であれば、複数のAZに分けてサーバーを配置しても
　同じネットワーク内にいる認識なので、片系が落ちても継続してサービス提供が可能。
　VPCにはサブネットが一つ以上必要。
　　パブリックサブネット　(トラストゾーンみたいなイメージ)
　　プライベートサブネット　(イントラゾーンみたいなイメージ)
　など。自由に何個でも作れる

[Route53]
　DNSのこと。
　ルーティングの機能とヘルスチェックの機能が備わっている。
　アラーム通知などもできて、正常なエンドポイントに自動で切り替えもできる。
yukicoder contest 256 参戦記

# yukicoder contest 256 参戦記

前回0完なのに今回は5完. 振れ幅激しい!

## [A 1107 三善アクセント](https://yukicoder.me/problems/no/1107)

1-indexed を 0-indexed に読み替える必要はあるが、問題文の通りに判定するだけ.

```python
A = list(map(int, input().split()))

if A[0] < A[1] and A[2] > A[3]:
    print('YES')
else:
    print('NO')
```

## [B 1108 移調](https://yukicoder.me/problems/no/1108)

H ずらした値を出力するだけ.

```python
N, H, *T = map(int, open(0).read().split())

print(*[t + H for t in T])
```

## [C 1109 調の判定](https://yukicoder.me/problems/no/1109)

12の調全てについて、各調に含まれる音しか使われていないか、全部試せばいい.

```python
N, *T = map(int, open(0).read().split())

x = [0, 2, 4, 5, 7, 9, 11]

result = -1
for i in range(12):
    t = set((i + e) % 12 for e in x)
    for e in T:
        if e not in t:
            break
    else:
        if result == -1:
            result = i
        else:
            print(-1)
            exit()
print(result)
```

## [D 1110 好きな歌](https://yukicoder.me/problems/no/1110)

尺取り法でも解けるよなあと思いつつにぶたんで解いた.

```python
from bisect import bisect_left

N, D, *A = map(int, open(0).read().split())

t = sorted(A)

for a in A:
    print(bisect_left(t, a - D + 1))
```

## [E 1111 コード進行](https://yukicoder.me/problems/no/1111)

実装重たいなあと思いつつ、DP で解いた. 最初、複雑度の合計がKを超えても計算してて TLE を食らった. PyPy じゃないと TLE になります.

```python
N, M, K = map(int, input().split())

m = 1000000007

pqc = [[] * 301 for _ in range(301)]
for _ in range(M):
    P, Q, C = map(int, input().split())
    pqc[P].append((Q, C))

t = [{0: 1} for _ in range(301)]
for i in range(N - 1):
    nt = [{} for _ in range(301)]
    for j in range(1, 301):
        for k in t[j]:
            for q, c in pqc[j]:
                v = k + c
                if v <= K:
                    nt[q].setdefault(v, 0)
                    nt[q][v] += t[j][k]
                    nt[q][v] %= m
    t = nt

result = 0
for i in range(1, 301):
    t[i].setdefault(K, 0)
    result += t[i][K]
    result %= m
print(result)
```
JavaScript学習要点(随時更新予定)

- JavaScriptは外部ファイルに書くのが一般的である。

- console.log() は丸括弧 () 内に入力された文字をコンソールに出力する。文字列は、シングルクォーテーション（ ' ）かダブルクォーテーション（ " ）で囲む必要がある。

- 文の最後はセミコロン（;）で終わる。セミコロンはなくても正常に動作する場合が多いが、思わぬ不具合が生じる可能性があるので忘れずにつける。

- 文頭に「//」を書くと、その行はコメントとみなされる。

- 変数は「let 変数名 = 値」として定義する。変数はクォーテーションで囲まない。「console.log("name");」のように変数名をクォーテーションで囲むと、nameが変数ではなく「文字列」として認識され、「name」とそのまま出力されてしまうので注意する。

- 変数は、一度代入した値を変更することもできる。定義する時と違って「let」は必要なく、「変数名 = 新しい値」と書けば値が変更される。

- 定数はletの代わりにconstを用いて定義する。変数は1度代入した値を更新することができるが、定数は値を更新することはできない。
※constはconstantの略

- 文字列や定数の連結には、「+」記号を用いるが。ES6では、それ以外の方法として「テンプレートリテラル」という連結方法がある。文字列の中で「${定数}」とすることで、文字列の中に定数や変数を含めることができる。この時、文字列全体をバッククォーテーション（`）で囲む必要がある。

- if文を書くときは、必ずインデントをするようにする。

- 比較演算子には、左と右の値が等しいかを調べるものもある。「a === b」はaとbが等しければtrue、等しくなければfalseになる。「a !== b」はその逆になる。
Azure PowerShell のインストール方法

# はじめに
MS365でPowerShellによる操作を行う必要があったのですが、その時にAzurePowerShellなるものをインストールする必要があったため、備忘のため記録。

なお、Microsoftの公式サイトには一応[手順](https://docs.microsoft.com/ja-jp/powershell/azure/install-az-ps?view=azps-4.3.0&viewFallbackFrom=azps-2.3.2)はありますが、余分なものが多いので、最小限の手続きをまとめています。

# 前提
- OSはMac OS Catalina
    - Windowsとは違うメッセージが出るかもしれません。

# 手順
## PowerShellを起動
PowerShellを起動する。
ローカルユーザのみインストールであれば管理者権限は不要。

## インストールコマンドを入力

```
if ($PSVersionTable.PSEdition -eq 'Desktop' -and (Get-Module -Name AzureRM -ListAvailable)) {
    Write-Warning -Message ('Az module not installed. Having both the AzureRM and ' +
      'Az modules installed at the same time is not supported.')
} else {
    Install-Module -Name Az -AllowClobber -Scope CurrentUser
}
```

途中、以下のようなダイアログで止まるので、「Y」か「A」を入力して、Enter。


```
You are installing the modules from an untrusted repository. If you trust this 
repository, change its InstallationPolicy value by running the Set-PSRepository
 cmdlet. Are you sure you want to install the modules from 'PSGallery'?
[Y] Yes  [A] Yes to All  [N] No  [L] No to All  [S] Suspend  [?] Help 
(default is "N"):
```

エラーがなければ、インストール完了。

公式サイトはいろいろな情報が乗っているのですが、実際やることはこれだけです。
Azure Functions for Goの歴史

Azure Functionsは、関数単位で処理を実行するAzureサービスです。

- [Azure Functions サーバーレス コンピューティング | Microsoft Azure](https://azure.microsoft.com/ja-jp/services/functions/)

2020年6月現在、Azure Functionsは

- C#, JavaScript, F#, Java, PowerShell, Python, TypeScript

を正式サポートしてしますが、残念ながらココにGoはありません。

- [Azure Functions でサポートされている言語 | Microsoft Docs](https://docs.microsoft.com/ja-jp/azure/azure-functions/supported-languages)

[Azure/azure-sdk-for-go](https://github.com/Azure/azure-sdk-for-go)にAzure Functions for Goに関するイシューがあります。

- [Azure Functions for Go · Issue #894 · Azure/azure-sdk-for-go · GitHub](https://github.com/Azure/azure-sdk-for-go/issues/894)

このイシューを読み進めると、Azure Functions for Goの歴史を垣間見ることができます。

2017年12月、当初、Private Preview版への招待が開始されました。

- [Azure Go Functions Private Preview Signup](https://aka.ms/goazurefunctions)

2018年頃は、開発が停滞したり再開したりしました。

2019年10月、開発担当者がマイクロソフト社を辞められていました。

2019年12月、別の実装方法が模索されることになりました。

2020年5月、その答えが「Azure Functions custom handlers」でした。

- [Azure Functions のカスタム ハンドラー (プレビュー) | Microsoft Docs](https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-custom-handlers)

私もリアルタイムにその流れを目撃していたのですが、azure.microsoft.comに一瞬ブログ記事が掲載されたのですが、すぐに取り消されてしまいました。

現在「Azure Functions custom handlers」はPublic Previewであり、正式リリースされた暁には、公式サイトにも再度アナウンス記事が掲載されることでしょう。

Goなサンプル

- [functions-custom-handlers/go · Azure-Samples/functions-custom-handlers · GitHub](https://github.com/Azure-Samples/functions-custom-handlers/tree/master/go)
- [Azure Functions で Go 言語を使おう（Go 1.14.2 待ち） - Qiita](https://qiita.com/okazuki/items/e0f24afb00a01eff541d)
初心者が機械学習をやってみたら（その２）


やっとのおもいで、ヘッドレスのJetsonの設定が完了しました。

ここからは、ネットワーク上のJetsonに接続して、環境を整えていきます。

まずは、開発言語であるPython3の環境と整えたいと思います。

の前に、リポジトリのアップデートを実施します。

#1.リポジトリアップデート

以下、コマンドを実行しアップデートを行う。

```
$ sudo apt update
[sudo] password for dlinano: 
# パスワードを入力してください。
```

#2.Python3環境設定（最新化）

以下、コマンドを実行し最新化する。

```
$ sudo apt install python3
Reading package lists... Done
Building dependency tree       
Reading state information... Done
python3 is already the newest version (3.6.7-1~18.04).
python3 set to manually installed.
0 upgraded, 0 newly installed, 0 to remove and 312 not upgraded.
```
私の環境は、最新のようでした。

#3.MongoDBインストール・環境設定

##3.1.MongoDBインストール

以下、コマンドを実行しMongoDBインストール

```
$ sudo apt install mongodb
Reading package lists... Done
Building dependency tree       
Reading state information... Done
The following additional packages will be installed:
  libboost-program-options1.65.1 libgoogle-perftools4 libtcmalloc-minimal4
  libyaml-cpp0.5v5 mongo-tools mongodb-clients mongodb-server
  mongodb-server-core
The following NEW packages will be installed:
  libboost-program-options1.65.1 libgoogle-perftools4 libtcmalloc-minimal4
  libyaml-cpp0.5v5 mongo-tools mongodb mongodb-clients mongodb-server
  mongodb-server-core
0 upgraded, 9 newly installed, 0 to remove and 312 not upgraded.
Need to get 47.6 MB of archives.
After this operation, 203 MB of additional disk space will be used.
Do you want to continue? [Y/n] 
```

「Y」を入力しインストールする。


##3.2.MongoDB動作確認

以下、コマンドにてMongoDBのインストール、動作確認を行う。

```
$ mongo
（略）
>
```
となれば、インストール、動作の確認は完了です。
「Ctrl＋C」にて終了させてください。

##3.3.MongoDB環境設定

MongoDBに対し外部からアクセスを可能とする。
以下のファイルを変更する。
（ログインユーザに書き込み権が無いため、編集時は「sudo」してください）

```/etc/mongodb.conf
bind_ip = 127.0.0.1
```

自端末からのみアクセス可能を外部からのアクセス可能に変更する。

```/etc/mongodb.conf
#bind_ip = 127.0.0.1
# コメントアウト

bind_ip = 0.0.0.0
# 0.0.0.0に変更する
```

MongoDBを再起動し、設定を反映させる。

```
$ sudo /etc/init.d/mongodb restart
[ ok ] Restarting mongodb (via systemctl): mongodb.service.
```

これで、開発環境、DBMSの設定が完了したと思われます。
開発のライブラリは、必要に応じてセットアップすることになります。

何とかスタートラインにはたどり着いたかな。
この先も、試行錯誤していきます。


#関連（連載）

[初心者が機械学習をやってみたら（その０）](https://qiita.com/tosikazu-s/items/db2b37c46b104633d79a)
[初心者が機械学習をやってみたら（その３）](https://qiita.com/tosikazu-s/items/e443a58a8e3725269e99)
swiperでアニメーションを実装

#はじめに
今日はjQueryプラグインswiperのカスタマイズ（スライドのタイミングでコンテンツを１回アニメーション）について紹介したいと思います。

#swiperでアニメーションを実装
```index.html
<div class="sample sample1">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <p class="catch01">aaaaa</p>
      </div>
      <div class="swiper-slide">
        <p class="catch02">bbbbbb</p>
      </div>
      <div class="swiper-slide">
        <p class="catch03">ccccc</p>
      </div>
    </div>
      
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <div class="swiper-pagination"></div>
  </div>
</div>
```

```style.css
.sample1 .swiper-slide {
  cursor: pointer;
}

.sample1 .swiper-slide {
  height: 200px;
  display: flex;
  justify-content: center;
}

.sample1 .swiper-slide p {
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(10px);
}

.sample1 .swiper-slide .is-anim {
  transition: .6s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 1;
  transform: translateY(0px);
}

.sample1 .swiper-button-prev,
.sample1 .swiper-button-next {
  display: none;
}

@media (min-width: 768px) {
  .sample04 .swiper-button-prev,
  .sample04 .swiper-button-next {
    display: block;
  }
}
```

```index.js
var swiper1Anim = function() {
  var el = document.querySelector('.sample1 .swiper-slide-active p');
  var anim = document.querySelectorAll('.is-anim');

  el.classList.add('is-anim');
};

window.addEventListener('DOMContentLoaded', function() {
  var swiper1 = new Swiper('.sample1 .swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    loop: true,
    onInit: function() {
      swiper1Anim();
    },
    onSlideChangeEnd: function() {
      swiper1Anim();
    }
  });
}, false);
```

#終わり
今回はjQueryプラグインのカスタマイズの一例を紹介しました。
他のプラグインを使うときにカスタマイズできるようになると自信がつくのではないでしょうか。
明日も頑張ります。
PHPでlike検索かける方法

#likeを使った検索方法
###誤った方法
```
   $lists = $db->prepare('SELECT * FROM example WHERE like "%?%" ;');
    $lists -> execute(array($_SESSION['key']));
}
```
これだと、%も?もエスケープされていないので、期待した値が得られない

###正しい方法
```
      $lists = $db->prepare('SELECT * FROM example WHERE  like ? ;');
    $lists -> execute(array('%'.$_SESSION['key'].'%'));
}
```
つまり、「%」ごと挿入すると考えることが重要であると分かった。
Cloud SQL にローカルから接続してみた

## 概要
Cloud SQL にローカルから接続できるということなので、やってみた。

## 前提
* Cloud SQLの第二世代インスタンスが立ち上がっている
* `Google Cloud SDK`が使える状態
* `mysql`クライアントがローカルPCにインストール済み

## 繋げ方

#### 1. `Cloud SQL Admin API` を有効化する
* 下記リンクを押すと有効化の画面に飛びます
* https://console.cloud.google.com/flows/enableapi?apiid=sqladmin&redirect=https%3A%2F%2Fconsole.cloud.google.com&hl=ja&_ga=2.14763766.1707344669.1594387130-380466428.1537103984

新規プロジェクトを立ち上げて確認しましたが、デフォルトだと無効になってるようですね

#### 2. `Cloud SQL Proxy`クライアントのインストール
1. バイナリファイルをダウンロードする
    * ```$ curl -o cloud_sql_proxy https://dl.google.com/cloudsql/cloud_sql_proxy.darwin.amd64```
    * Mac以外の方は下記URLからどうぞ
    * https://cloud.google.com/sql/docs/mysql/quickstart-proxy-test#install-proxy
2. 実行権限を付与
    * ```$ chmod +x cloud_sql_proxy```

#### 3. `Cloud SQL Proxy`クライアントの実行
`$ ./cloud_sql_proxy -instances=<INSTANCE_CONNECTION_NAME>=tcp:3306`
このとき、インスタンス名は下の画像(CloudSQLの概要の画面です)で、接続名として出ている部分です。

![SQLのコンソール画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385683/286ed38e-5a2b-cc67-1886-4fd56e718fee.png)

ここまでの作業で、ローカルから Cloud SQL に接続する準備は完了です。
最後に`mysql`クライアントを使って接続してみましょう。

```
$ mysql -u <USERNAME> -p --host 127.0.0.1 --port 3306
```

## 感想
個人的には、ローカルテストでなら Cloud SQL に接続するより mysql の Dockerコンテナを立てるなりで良いかなーとは思いました。
ただ、安全な接続を使って、Cloud SQL に接続できるので、好きなDBクライアントツールで Cloud SQL に接続して中身を確認できるのは、あまり知られていない気もしますので、広めていきたいなーという気持ちが芽生えました。

## 参考URL
https://cloud.google.com/sql/docs/mysql/quickstart-proxy-test
[VSCode] Python の print f-string 用のユーザー スニペットを作ってみた

Python 3.8 で採用された、print の f-string debugging（`print(f"{○○○ = }")`という書き方）が気に入っています。
ただ、VSCodeだとIntellisenseを使っても結構タイプ量が多くなるので、自分でスニペット作ってみました。

・ユーザースニペットの作り方
メニュー＞「Code」 ＞「基本設定」＞「ユーザー スニペット」を選択＞「検索ボックス」で「Python」を検索＞「python.json」ファイルが開く

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

```python.json
{
	"Print f-string debugging": {
		"prefix": "print",
		"body": [
			"print(f\"{$1 = }\")",
		],
		"description": "print(f\"{ = }\")"
	},
	"Print with quote": {
		"prefix": "print",
		"body": [
			"print(\"$1\")",
		],
		"description": "print(\"\")"
	},
}
```

以下、簡単な解説です；

- "Print f-string debugging" の名前は、あまり関係ありません。

- "prefix" が、スニペットを出すトリガーとなる文字です。

- "body" が、実際に入力される文字です。`"`は`\`でエスケープする必要があります。また、`$1`がカーソルの位置になり、`$2`、`$3`、、はTabキーを押した時に次に移動する位置になります。

- "description" が、スニペットが表示された時の説明になります。

- "Print with quote" は、ついでに作った`print("")`のスニペットです。

　
このスニペット、自分的にはかなり愛用しています。