OmniAICreator/Qiita-1.07M huggingface dataset:
【JavaScript】LGTM数 + ストック数ランキング【毎日自動更新】

# はじめに
LGTM数 + ストック数の合計値が高い記事こそが真に価値のある記事ではないだろうか⭐︎
という思いからLGTM数 + ストック数の合計でランキングをつけ自動で投稿できようにしました。
自分の気になるタグの有益な記事が埋もれるのを防げたら最高です。
# 集計タグ
**タグ名：**`JavaScript`
**フォロワー数：**92246
**記事数：**44063
# 集計概要
**集計方法：**毎日7時に Qiita API v2をcronにて定期実行し集計
**集計期間：**2021/09/02 ~ 2021/09/09
**集計内容：**LGTM数 + ストック数合計値
**集計対象：**LGTM数3件以上
# 1位：[JavaScriptの連想配列周りメモ](https://qiita.com/rabeneko/items/15aa5cf669b7a853e252)(37P)
**LGTM数：23**  **ストック数：14**
`JavaScript`
[@rabeneko](http://qiita.com/rabeneko)さんの投稿（2021/09/03/8:41 AM）
# 2位：[ブラウザレンダリングの仕組み](https://qiita.com/seikin123/items/8c7a0b4bd14fb7777a00)(11P)
**LGTM数：4**  **ストック数：7**
`JavaScript`  `HTML,CSS`
[@seikin123](http://qiita.com/seikin123)さんの投稿（2021/09/05/1:48 PM）
# 3位：[Rails 無限スクロール（gem、ライブラリ無し）](https://qiita.com/223yuta/items/3be7fb632f3ef49d008e)(10P)
**LGTM数：6**  **ストック数：4**
`JavaScript`  `Rails`  `初心者`
[@223yuta](http://qiita.com/223yuta)さんの投稿（2021/09/03/4:14 PM）
# 4位：[Stimulusでa11yを考慮したタブを実装する](https://qiita.com/yoruaki/items/b87681d2df3d2a9c2323)(9P)
**LGTM数：5**  **ストック数：4**
`JavaScript`  `a11y`  `Stimulus`
[@yoruaki](http://qiita.com/yoruaki)さんの投稿（2021/09/06/4:52 AM）
# 5位：[Rails インクリメンタルサーチ](https://qiita.com/223yuta/items/846b6fe6e3bf945291fb)(7P)
**LGTM数：5**  **ストック数：2**
`Ruby`  `JavaScript`  `初心者`
[@223yuta](http://qiita.com/223yuta)さんの投稿（2021/09/04/9:56 AM）
# 6位：[【JavaScript初心者】どうして躓いたのか？アロー関数](https://qiita.com/junkin1221/items/e4186b5d1b80b8995cb6)(6P)
**LGTM数：5**  **ストック数：1**
`JavaScript`  `初心者`
[@junkin1221](http://qiita.com/junkin1221)さんの投稿（2021/09/03/12:29 PM）
# 7位：[Node.js: docxをhtmlにするMammoth](https://qiita.com/e99h2121/items/9b307907a41256032232)(6P)
**LGTM数：3**  **ストック数：3**
`JavaScript`  `Node.js`
[@e99h2121](http://qiita.com/e99h2121)さんの投稿（2021/09/06/9:06 PM）
# 8位：[Node-RED 2系をAzure Web Appsで利用する #noderedjp #azure](https://qiita.com/n0bisuke/items/030fe6963784ed905be3)(5P)
**LGTM数：3**  **ストック数：2**
`JavaScript`  `Node.js`  `Azure`  `node-red`  `WebApps`
[@n0bisuke](http://qiita.com/n0bisuke)さんの投稿（2021/09/05/7:02 AM）
# 9位：[Vuetify/v-data-tableで無眼スクロールしてみた!](https://qiita.com/shin_ts/items/0dec5b2f97f90916a1a5)(5P)
**LGTM数：3**  **ストック数：2**
`JavaScript`  `Vue.js`  `nuxt.js`  `Vuetify`  `v-data-table`
[@shin_ts](http://qiita.com/shin_ts)さんの投稿（2021/09/04/1:40 PM）
# 10位：[【kintone】レコード作成時に自動で任意の作業者を設定する](https://qiita.com/yamamotoooooooooo/items/205b9234af45f0960d85)(4P)
**LGTM数：3**  **ストック数：1**
`JavaScript`  `kintone`
[@yamamotoooooooooo](http://qiita.com/yamamotoooooooooo)さんの投稿（2021/09/08/5:42 AM）
pdfファイルの画像化と、全ページに社外秘スタンプ(画像)を押す。


# 会社でこんなことが起こっていた...

- このpdfを画像にしてほしい → 印刷してスキャナにかける (!?)
- pdf全ページに社外秘スタンプ押したい → 印刷して全ページに社外秘のゴム印押してスキャナ (!!??)

資源大事に。
python使ってpdfを分解&画像編集&pdf化します
ちなみにadobe acrobatにはスタンプ機能や透かし機能もある
純正機能では実現できないような加工に使えるかも。


#実行した環境

- windows 10 pro
- Python 3.7.3 (anoaconda)
- poppler-0.67.0_x86
- Pillow==7.1.2
- img2pdf==0.4.0


#事前準備

- [外部ソフトPoppler](http://blog.alivate.com.au/poppler-windows/)をインストール(poppler-0.67.0_x86を使用)
- 解凍したファイルの中の binフォルダを環境変数に追加しておく


#最初にフォルダ構成





![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275572/4d7b9a99-d106-e4e2-1031-8fba2b28f09d.png)








#この部分はcmdから実行

```python
dir_path = 'C:\\Users\\user\\Desktop\\topdf'

import os
from pdf2image import convert_from_path, convert_from_bytes

images = convert_from_path(os.path.join(dir_path,'a.pdf'))

for i in range(0,len(images)):
    images[i].save(os.path.join(dir_path,'png/test'+str(i).zfill(8)+'.png'), 'png')
```

#以下notebookから実行

```python
import glob
import os

dir_path = 'C:\\Users\\user\\Desktop\\topdf'

png_data = glob.glob(os.path.join(dir_path,'png','*.png'))
```

画像がちゃんと読み込めるか確認
スタンプとして設定したい画像をim2とする

```python
from PIL import Image, ImageDraw, ImageFilter

im1 = Image.open(png_data[0])
im2 = Image.open(os.path.join(dir_path,'stamp','stamp.png'))
```

スタンプ画像のサイズの確認や、画像の拡大を行う
画像上にpasteで貼り付ける時、その座標も調整しておく

```python
im2.size

back_im = im1.copy()
back_im.paste(im2.resize((216, 72)), (10, 5))
```


調整が終わったら一括複数に貼り付ける
ファイルサイズも気になるのでjpgに設定

```python
for o in range(0,len(png_data)):
    im1 = Image.open(png_data[o])
    im2 = Image.open(os.path.join(dir_path,'stamp','stamp.png'))
    back_im = im1.copy()
    back_im.paste(im2.resize((216, 72)), (10, 5))
    back_im.save(os.path.join(dir_path,'png_stamped',str(o).zfill(8)+'.jpg'), 
        quality=10)
```


img2pdfを使ってpdf化していく


```python
import img2pdf

fname =os.path.join(dir_path,'pdf',"output.pdf") 
dirname = os.path.join(dir_path,'png_stamped')

with open(fname,"wb") as f:
    imgs = []
    for fname in os.listdir(dirname):
        if not fname.endswith(".jpg"):
            continue
        path = os.path.join(dirname, fname)
        if os.path.isdir(path):
            continue
        imgs.append(path)
    f.write(img2pdf.convert(imgs))
```

pdfフォルダにpdfファイルが作成される


#以上

いや、acrobat買えよ。


#参考

[img2pdf PyPl](https://pypi.org/project/img2pdf/)

[pythonによりpdfを画像にする方法](https://haitenaipants.hatenablog.com/entry/2018/07/17/000101)

[Pillowで画像に別の画像を貼り付ける](https://note.nkmk.me/python-pillow-paste/)
laravelのログイン機能の導入がうまくいかない（npm run dev エラー）

laravel　6.18


laravelのログイン機能を追加するに当たって、laravel/uiをインストールしました。

composer require laravel/ui "^1.2"


そして、
php artisan ui vue --auth

でモジュールを展開し、ok！


次に、
npm install　＆＆　npm run dev　　　（インストール＆実行）

しましたが、どうしてもエラーが出てしまい、実行できない。

そこで下記コマンドを実行。

npm uninstall --save-dev sass-loader

npm install --save-dev sass-loader@7.1.0


↓

npm run dev

       Asset      Size   Chunks             Chunk Names
/css/app.css   191 KiB  /js/app  [emitted]  /js/app
  /js/app.js  1.38 MiB  /js/app  [emitted]  /js/app

成功しました！
【TypeScript】LGTM数 + ストック数ランキング【毎日自動更新】

# はじめに
LGTM数 + ストック数の合計値が高い記事こそが真に価値のある記事ではないだろうか⭐︎
という思いからLGTM数 + ストック数の合計でランキングをつけ自動で投稿できようにしました。
自分の気になるタグの有益な記事が埋もれるのを防げたら最高です。
# 集計タグ
**タグ名：**`TypeScript`
**フォロワー数：**4106
**記事数：**7961
# 集計概要
**集計方法：**毎日7時に Qiita API v2をcronにて定期実行し集計
**集計期間：**2021/09/02 ~ 2021/09/09
**集計内容：**LGTM数 + ストック数合計値
**集計対象：**LGTM数3件以上
# 1位：[Clean Architecture on Frontend （翻訳） ](https://qiita.com/70ki8suda/items/7b720217c9b1b4855e99)(69P)
**LGTM数：32**  **ストック数：37**
`TypeScript`  `React`  `frontend`  `CleanArchitecture`
[@70ki8suda](http://qiita.com/70ki8suda)さんの投稿（2021/09/07/1:40 PM）
# 2位：[表情を鍛えることができるアプリを作った](https://qiita.com/yuikoito/items/a0c588e19999e50f5a0b)(33P)
**LGTM数：17**  **ストック数：16**
`TypeScript`  `next.js`  `face-api.js`
[@yuikoito](http://qiita.com/yuikoito)さんの投稿（2021/09/06/1:30 PM）
# 3位：[Firebaseとフロントエンドのみで作ったオンラインゲーム『バトルアクターズオンライン』をリリース](https://qiita.com/HawkClaws/items/4140013ba5e1020bb58d)(29P)
**LGTM数：17**  **ストック数：12**
`TypeScript`  `ゲーム制作`  `Vue.js`  `Firebase`  `個人開発`
[@HawkClaws](http://qiita.com/HawkClaws)さんの投稿（2021/09/06/6:21 AM）
# 4位：[Reactによるコンポーネントパターンまとめ](https://qiita.com/sparklingbaby/items/3ceafe9433ae516aa747)(11P)
**LGTM数：5**  **ストック数：6**
`TypeScript`  `React`
[@sparklingbaby](http://qiita.com/sparklingbaby)さんの投稿（2021/09/08/5:13 AM）
# 5位：[Firebase JS SDK v9アップグレードは移行大変だけどfirestoreで死ぬほどいい事があった](https://qiita.com/mogmet/items/23d4ee734f4b193b8106)(10P)
**LGTM数：5**  **ストック数：5**
`TypeScript`  `Firebase`  `Firestore`
[@mogmet](http://qiita.com/mogmet)さんの投稿（2021/09/03/8:59 AM）
# 6位：[【始め方】Next.js + TypeScript + ESLint + Prettier + Material UI + Emotion + dependabot + Vercel で快適開発](https://qiita.com/hasehiro0828/items/ef1736e871b85b039212)(6P)
**LGTM数：3**  **ストック数：3**
`TypeScript`  `material-ui`  `next.js`  `emotion`  `Vercel`
[@hasehiro0828](http://qiita.com/hasehiro0828)さんの投稿（2021/09/05/7:10 AM）
IBM Cloud CLIをインストールした際に'yum' is not found のエラーが発生する

# 概要
CentOSコンテナにIBM Cloud CLIをインストールしようとしたところ以下のエラーが発生
> [root@67df88b1cc41 /]# curl -sL https://ibm.biz/idt-installer | bash
[main] --==[ IBM Cloud Developer Tools for Linux/MacOS - Installer, v1.2.3 ]==--
main: line 82: which: command not found
[install] Starting Update...
main: line 89: which: command not found
[install_deps_with_yum] Checking for and updating 'yum' support on Linux
main: line 240: which: command not found
[install_deps_with_yum] ERROR: 'yum' is not found.  That's the only RedHat/Centos linux installer I know, sorry.

# 調査
## yumが本当にないのか
```
yum -v
```
実行結果から、もちろんyumはインストール済み。
よって、エラーメッセージ通りの問題ではない。

## IBM Cloud Developer Tool の Installerを調査
Github(https://github.com/IBM-Cloud/ibm-cloud-developer-tools/blob/master/linux-installer/idt-installer )に、エラーメッセージを発見

```
if [[ -z "$(which yum)" ]]; then
  error "'yum' is not found.  That's the only RedHat/Centos linux installer I know, sorry."
fi
```

上記より、`which yum` がエラーになったことがわかる。
実際にコマンドを実行してみる

```
[root@67df88b1cc41 /]# which yum
bash: which: command not found
```
結論として、`which` コマンドがないことがわかった。

# 対策
`which` コマンドのインストール

```
yum install which
```

# 結果
再度、IBM Cloud CLIをインストールする

```
[root@67df88b1cc41 /]# curl -sL https://ibm.biz/idt-installer | bash
[main] --==[ IBM Cloud Developer Tools for Linux/MacOS - Installer, v1.2.3 ]==--
which: no ibmcloud in (/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin)
[install] Starting Update...
which: no ibmcloud in (/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin)
[install_deps_with_yum] Checking for and updating 'yum' support on Linux
[install_deps_with_yum] Installing/updating external dependency: curl
[install_deps_with_yum] Installing/updating external dependency: git
which: no git in (/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin)
Failed to set locale, defaulting to C.UTF-8
Last metadata expiration check: 0:02:33 ago on Wed Oct  7 16:08:35 2020.
Dependencies resolved.
...
[install_plugins] Finished installing/updating plugins
[env_setup] WARN: Please restart your shell to enable 'ic' alias for ibmcloud!
[install] Install finished.
[main] --==[ Total time: 138 seconds ]==--
```

### インストールの確認
```
[root@67df88b1cc41 /]# ibmcloud -v
ibmcloud version 1.2.3+3577aee6-2020-09-25T14:34:09+00:00
```

正常にインストールすることができた。
【JavaScript】イベントハンドラ早見表

自分が今まで使用したことがあるJavaScriptのイベントハンドラについて書きました。
他にもいろいろあるかと思いますが、「こういうときにも使えるよー」っていうのがありましたら是非ご指摘お願いします。

| イベント名                | 条件                                                 | 用途の例                                                                                       | 
| ------------------------- | ---------------------------------------------------- | ---------------------------------------------------------------------------------------------- | 
| onclick                   | クリックされた時                                     | ボタン、モーダルなど。                                                                         | 
| ondblclick                | ダブルクリックされた時                               | フォルダアイコンなど。Web制作ではあまり使わない気がする                                        | 
| onscroll                  | スクロールされた時                                   | トップへ戻るボタン、フェードインアニメーションなど。                                           | 
| onchange                  | フォームの入力値や選択値の内容が変わった時           | フォームのバリデーションチェックなど。                                                         | 
| onblur                    | フォーカスが外れた時                                 | フォームのバリデーションチェックなど。                                                         | 
| onfocus                   | フォーカスが当たった時                               | フォームのバリデーションチェックなど。                                                         | 
| onselect                  | 入力フォームの値を選択した時                         | フォームのバリデーションチェックなど。                                                         | 
| onload                    | ページや画像が読み込まれた時                         | ローディングアニメーションなど。                                                               | 
| onmouse...(Out, Over, Up) | マウスが離れた、乗った、クリックしたマウスを上げた時 | CSSでいうホバーアニメーションに当たる。ボタンやリンクのアニメーションや、ツールチップ          | 
| onMousemove               | マウスを動かした時                                   | 昔マウス動かすと一生ついて来るイルカのように追尾する要素<br>マウスポインタの座標を取る時など。 | 
| onKey..(UP, Down, Press)  | キーを離した、キーを押した、キー押している間の時     | よりタイムリーなバリデーションチェック<br>タイピングゲームなど。                               | 

WEB制作の場合はonclick, onload,onscroll はかなり使いましたね。
アプリ制作の場合はバリデーションチェックにonchange, onblurなど。
ゲーム制作とかするとより色々な表現が学べるのかなと思いますが、またおいおいアウトプットしていこうと思います。
VanillaJSでgetter/setter

#こうする

```javascript
function Clazz() {
    let hoge = "hogehoge";

    this.setHoge = function(param) {
        hoge = param;
    };
    this.getHoge = function() {
        return hoge;
    };
}

const a = new Clazz();
const b = new Clazz();

a.setHoge("ほげほげ")
console.log(a.getHoge()); // ほげほげ
console.log(b.getHoge()); // hogehoge
console.log(a.hoge); // undefined
```
URL直打ちしてもindexアクションで購入した商品のURLに飛ばさない為の記述

#　購入した商品のページにURL直打ちしてもindexページにリダイレクトさせる方法
## Why
##某フリマアプリでどうやるんだっけ？となったので自分で色々触っていたら解決したのでスクール生とかの為になればと思い記事を書きました！
#URLの遷移先をどこにするかはコントローラーのindexアクションに記述します
```java:orders_controller.rb
def index
    @item = Item.find(params[:item_id])
    @address = OrderAddress.new
    if @address.save
        redirect_to root_path
    end
end
```
#4行目のif文と5行目のredirect_toに注目！
##3行目で定義した<font color="Red">@address</font>(formオブジェクトでまとめた2つのモデル)をインスタンスで格納し、4行目で<font color="Red">該当のレコードが保存されたら</font>という定義をしています。そして保存されていたら(すでにレコードに情報があれば)<font color="Red">redirect_to</font>で「root_path」つまりトップページに遷移しまっせ〜というのが5行目の記述です。

#これが!
![fe573d5f79ce1ddfcf7d42156ec0f7d1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/725167/be3c43a6-5e7e-b0a0-d9b9-6c9a033c9c39.png)
#こうなっていればOK!!
![12ba866f3a3964bd80891b8fc643779e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/725167/a43190e7-f817-0ad9-6e73-3f6b4a672eba.png)

#おまけ
##ちなみに
* items = 商品の情報
* addresses = 購入者情報
* orders = 商品IDと誰が買ったかのuserID
* users = 全ユーザー

# のネームセンスでお届けしました！
##現場からは以上です！
G SuiteからGoogle Workspaceへの変更とりあえず取り急ぎ

突如発表された、Google G Suiteのリブランド。
https://cloud.google.com/blog/ja/products/workspace/introducing-google-workspace
朝記事を見た途端、結構リアルにお腹壊しました。（朝ごはんも食べれず。。。）

多くのメディアサイトもニュースとして取り上げてましたが、
やはり気になるのはドライブの容量無制限の上限設定追加ではないでしょうか。

https://workspace.google.co.jp/intl/ja/pricing.html
でもまずはプランとしては
・Business Starter　（今までのG Suite Basicに相当）
・Business Standard　（今までの G Suite Businessに相当）
・Business Plus
の３種類と「大規模ビジネス向け」としか書かれていません。

この G Suite Businessはドライブ無制限、Vaultによる監査機能付きだったのが、大きく変わる点かと思います。

機能面は細かく見れてないのですが、そのほかのプランを見ていきたいと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541506/582b0f77-f6fc-8d31-fd8a-c8baf44708ed.png)

G Suite Businessを利用していると、ダウングレードがほとんどです。
G Suite Business相当となる Business Standardもダウングレード表記です。

Business Standardと比較してみると、やはりVaultがなくなることと、ユーザ数の上限、ストレージの上限、セキュリティ関係で制限が出てるのがわかります。
そうなるとやはり「ダウングレード」という表現になるのでしょう。
・![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541506/2a9453c7-b5db-32a7-5095-8cae32c454d1.png)

Business Plusとの比較。セキュリティ関係とVaultが含まれてますが、ユーザ数とストレージ容量で警告表示。
だから「ダウングレード」。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541506/0e1381d8-b794-9a09-5ed7-331466e4d6aa.png)

アップグレード対象は以下の２つ。
・Google Workspace Enterprise Plus
・Google Workspace Enterprise Standard

Google Workspace Enterprise Standardをみてみます。
特に警告表示はありませんでした。
説明にもある通り、容量も無制限ですしセキュリティ関係も含まれて2,260円/月。
そのままG Suite Businessの機能を全部移行したいという場合はこのプランになるようです。実質的な値上げなイメージもあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541506/4ad33088-cdd5-b256-0bc8-3f302e835013.png)

Google Workspace Enterprise Plusをみてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541506/60dece9c-1d26-2ee0-df07-01dc6a8437d9.png)
何やらたくさんの注意書きが、、
https://support.google.com/a/answer/7284269?hl=ja&ref_topic=4425947
にありましたが、これまでのG Suite Enterpriseにあたるもののようです。価格の記載はないですが、今までなら3,000円/月なのでそれに近い物が予想されます。


■感想
今までG Suite BusinessでできなかったMeetの録画が追加されたり、機能追加している面もありますが
やはりデータ保存無制限、Vaultやセキュリティ関係の機能が削られたのは利用しているユーザからするとリブランド以上のインパクトかなと思います。
細かい機能の違いなどはもう少し見ていきたいと思います。
Docker インストール方法

#　はじめに
この記事はMacにDockeをインストールする方法をまとめた記事で、Docker初心者向けとなっております。
自身の備忘録でもあります。

**開発環境**
Mac OS Catalina 10.15.7
Docker 19.03.13

**対象者**
・WEB系の開発企業ではDockerを使っているところが増えていると聞いたことがある:frowning:
・興味はあるが何をどうしたらいいかわからない:disappointed_relieved:

という方向けです。

# Dockerとは
コンテナ仮想化を用いてアプリケーションを開発・配置・実行するためのオープンソースソフトウェアあるいはオープンプラットフォーム。**仮想環境を構築するための道具**というイメージ。

#コンテナとは
イメージで定義したファイルの内容を元に実行してできる**実際の実行環境**。

#イメージとは
コンテナ実行に必要なファイルをまとめたファイルシステム。
実際にどういう環境で作業するのかなどを記載。

#Dockerfileとは
Dockerのイメージを自動で生成してくれるファイル。

#Macにインストール
Docker Hubにアクセスして、Dockerをインストール。
https://hub.docker.com/editions/community/docker-ce-desktop-mac
↓
**CREATE ACCOUNT**
![Docker イメージ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772797/b7355f6d-b5d0-c566-0962-34d50464e36e.png)
↓
**Get Docker**でインストール
↓
正しくインストールされたか確認

```
$docker version
Version:           19.03.13
```
versionが表記されればインストール完了。

#インストール完了後
Docker公式に公開されている「hello-world」イメージを指定してコンテナ起動してみる。

```
$ docker run hello-world
```
以下のような表示がされたと思います。コンソールに**Hello from Docker!**と表示されるだけのものなので表示されれば正常に動いています。
`Unable to find image 'hello-world:latest' locally
latest: Pulling from library/hello-world`
`Hello from Docker!`

**イメージ一覧表示のコマンド**

```
$ docker images
```

#終わりに
最後まで読んでいただきありがとうございます:grin:
今回はDockerの初歩と言う事で、次回はもう少し掘り下げた内容を投稿できればと思います:open_hands:
[Swift]複数の文字列を置換する方法


## 複数の文字列を置換する方法

### 単体の文字列置換
文字列を置換するには、replacingOccurrences が使用できます。

```
// 置換前
var str: String = "みかん"

// 置換
var newStr = str.replacingOccurrences(of: "み", with: "オ")

// 置換後
print(newStr) //オかん
```

### 複数の文字列置換
replacingOccurrences を使用する前に、
辞書を作成しておくと複数の文字列を置換することが可能です。


```
// 置換前
var str = "ABCDEF"

var newStr: String {

　　 // 辞書作成
    let dictionary = ["A": "置","B": "換","C": "で","D": "き","E": "た","F": "よ"]
    
    // 置換
    return dictionary.reduce(str) { $0.replacingOccurrences(of: $1.key, with: $1.value) }

}

// 置換後
print(newStr)  // "置換できたよ"
```

※ reduce については以下の記事がわかりやすいです。
[Swiftにおけるreduceの使い方](https://qiita.com/pkaTaka/items/93e6e6920946e86b0a1c)
【Vue.js】v-forでindexを使って少しだけハマった

vueに慣れている人であれば当たり前の話だと思いますが、
結構ググっているとkeyにindexを使っての解説を目にする事があったので、
何番煎じか分かりませんが、自身のアウトプットの為に備忘録していきます。

※vue.jsをこれから学んで行く人向けです。

## v-forディレクティブとは
vueで配列に基づいて、リストレンダリングする為に使用するディレクティブです。
所謂for文としての使い方をします。` 単数形 in 複数形` のような構文を用います。
複数形の部分がソースの配列で、単数形の部分は配列要素が反復されているエイリアスなので、変数のように設定が可能になっています。別に単数形でなくても動きます。

```なんちゃら.vue
<div id="app">
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</div>
```
参考：[リストレンダリング](https://jp.vuejs.org/v2/guide/list.html)

## v-forは2つ目の引数にindexを取れる
何番目のデータかを確認する時などに使用する事もあるかと思いますが、
以下のように第2引数を指定する事で、indexを取る事が出来ます。ここもindexではなく、iやjなどでも動きます。

```なんちゃら.vue
<div id="app">
  <ul>
    <li v-for="(item, index) in items">{{ item }}</li>
  </ul>
</div>
```

## オブジェクトにも使えるv-for
オブジェクトに対しても、バリューで回してあげる事が出来ます。この辺は簡単ですね。

```なんちゃら.vue
<div id="app">
  <ul>
    <li v-for="value in object">{{ value }}</li>
  </ul>
</div>
```

## オブジェクトの時は第2、第3引数の設定が出来ます
短刀直入に言うと、第2引数にはオブジェクトキーを指定出来て、第3引数でindexを設定する事が可能となっています。

```なんちゃら.vue
<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">{{ value }}</li>
  </ul>
</div>
```

## 数値に対しても使えるv-for
数値でもOK

```なんちゃら.vue
<div id="app">
  <ul>
    <li v-for="n in 10">{{ value }}</li>
  </ul>
</div>
```

## そろそろ本題
まずはv-forにはキー属性をつけましょうと言う話です。
[公式にも書いてある内容にはなりますが](https://jp.vuejs.org/v2/guide/list.html#%E7%8A%B6%E6%85%8B%E3%81%AE%E7%B6%AD%E6%8C%81)、v-forは要素の変更について極力使えるものは再利用するようなアルゴリズムになっているそうです。

その為、vueがノードの識別情報を追跡できるように一意なkey属性を全てのアイテムに与える必要があります。

```key属性なし.vue

<div id="app">
  <ul>
    <div v-for="item in items">
    <input type="text">
    </div>
  </ul>
<button @click="remove">削除</button>
</div>

<script>
export default {
  data() {
    return {
      items: ['えんぴつ','消しゴム','定規'],
    };
  },
methods: {
  remove: function() {
    this.items.shift()
  }
}
})
</script>
```
このようなコードがあったとして、実行すると配列の分だけ、今回は3回リストレンダリングされ、インプットフォームが表示されます。またv-onディレクティブで設定したremoveメソッドによって、先頭要素を削除する設計になっています。

ここでkey属性を設定せずに3つのフォームに対して、仮に別々の内容を入力していたとし、
先頭を削除するremoveを実行すると、先頭の'えんぴつ'要素は消えるのですが、レンダリングされる際に入力したフォームは最後尾の内容が削除されてしまいます。

①②③のフォームに対して、要素①を削除してもフォームの中身は③が消えてしまう、と言うような状況が起こりえます。

このような問題を避ける為にVueがノードを識別する事が出来るようにv-forを使用する時はkey属性を使う事が推奨されています。

```key属性あり.vue

<div id="app">
  <ul>
    <div v-for="item in items" :key="item">
    <input type="text">
    </div>
  </ul>
<button @click="remove">削除</button>
</div>

<script>
export default {
  data() {
    return {
      items: ['えんぴつ','消しゴム','定規'],
    };
  },
methods: {
  remove: function() {
    this.items.shift()
  }
}
})
</script>
```
そう、v-forではkey属性を付けた方がいいのですが、このkeyにindexを入れてしまうとまた困った事が起きてしまいます。

```keyにindex.vue

<div id="app">
  <ul>
    <div v-for="(item, index) in items" :key="index">
    <input type="text">
    </div>
  </ul>
<button @click="remove">削除</button>
</div>

<script>
export default {
  data() {
    return {
      items: ['えんぴつ','消しゴム','定規'],
    };
  },
methods: {
  remove: function() {
    this.items.shift()
  }
}
})
</script>
```

ここで言うindexは配列の中が削除されたりする事で変動しますよね。
えんぴつが削除されたら、消しゴムが0、定規が1に変動しますよね。そう言う事です。配列のlengthやステータスを管理するメソッドが上手く動かない事があって突き詰めて行った結果がこれでした。

ハマったと言っても公式ドキュメントを読んで直ぐに解決出来ました。良い勉強になりました。
【Java】for文, while文

ループ文について学んだことのメモです。

#for文
ループカウンターなどを使用して **定められた回数だけ同じ処理を繰り返したいときに使う。**
fizz buzzのような**「1〜１００まで出力せよ！」**みたいな命令に使われることが多い。
また添字による配列要素のアクセスと相性がよろしく、配列の中身を１つずつ参照することにも向いている。

##【書式】

```
for (初期化式; 条件式；変化式){
実行する文;
実行する文;
...
}
```
##【for文を使った例】

```
(String配列の宣言と初期化)
String[] fighter = {零戦, スピットファイア, メッサーシュミット, ラヴォーチキン};

(配列arrの中身を全て表示する)
for (int i = 0; i < fighter.length; i++) {                                      
    System.out.println("fighter[" + i + "] … " + arr[i]);
}
```
##【実行結果】
```
fighter[0] …零戦
fighter[1] …スピットファイア
fighter[2] …メッサーシュミット
fighter[3] …ラヴォーチキン
```

#while文
**条件式のみで制御されている繰り返し構文。**
for文との使い分けは、**「ユーザーが何かを入力するまで」** と言った繰り返す回数が定まらない場合に使用する。
最初に判定を行うために場合によっては一度も動くことなく終わることもある。


##【書式】

```
while(条件式){
　　実行する文
}
```
##【for文を使った例】

```
// 変数の初期化
int i = 1;

//1から10までの数字を出力
while (i  <= 10){
  System.out.println( i );
  i++; //ここを忘れると無限ループ発生するので注意！
}
```
##【実行結果】
```
1
2
3
4
5
6
7
8
9
10
```
#breakについて
break文を記述すると、その時点でループ処理から抜けることができます。

##【書式】
if文などで**「条件に当てはまったときだbreak文を実行してループから抜ける」**というように記述します。

```
for (初期化式; 条件式；変化式) {
    if (ループを抜ける条件式) {
        break; // 条件に一致したらループから抜ける
    }
}
```
##【for文を使った例】
1から１０までの数を出力する繰り返し文を、break によって 7に達したら処理をやめる

```
    for (int i = 0; i < 10; i++) {
      System.out.println(i);
      if (i == 7) {
        break;
      }
    }
```
##【実行結果】
```
1
2
3
4
5
6
7
```

#continue文

continue文は、その時点で後の処理をスキップします。

##【書式】

```
while (条件式) {
    [処理1]
    if (スキップ条件) {
        continue;   //条件に一致したら処理2はスキップ
    }
    [処理2]
}
```
##【continue文を使った例】

1~10の数を出力し、4の倍数（４と８）の場合処理をスキップする。

```
    for (int i = 1; i <= 10; i++) {
      if (i % 4 == 0) {
        System.out.println("4の倍数です。");
        continue;
      }
      System.out.println(i);
    }
```
##【実行結果】
```
1
2
3
4の倍数です。
5
6
7
4の倍数です。
9
10
```

使いこなせばかなり複雑な表現ができるようになると思います。
無限ループについてはまた後日アウトプットします。
iPhoneでなぜか文字が大きくなる場合に試すCSSプロパティ


CSSで指定したfont-sizeが効かず、iPhoneでなぜか文字が大きくなる。
そんな場合にお試しください。

結論から言いますと、該当箇所に以下のCSSプロパティを指定します。

```CSS:CSS
  -webkit-text-size-adjust: 100%;
```
PCブラウザのデベロッパーツールでは再現せず、
iPhone実機だけ文字サイズが変わってしまう、というところが厄介で解決まで時間がかかってしまいました。

同様の現象でお困りの際にお試しください。

##参考URL

スマホページだけフォントサイズ指定がうまくいかない場合 | ma-ya's CREATE / WEB DESIGN
https://myscreate.com/text-size-adjust/
[rails]ransackを使用して検索機能



今回はransackを使用して、検索機能を実装したのですが
少しだけ悩んだところがあったので抜粋して書きます。

##ActiveHashで保存したデータを検索するには

今回の課題はこれです。
まあ後から考えてみれば普通にできたんですけど..
とりあえず記録しておきます。


```
gem 'ransack'
```

導入後bundle install をしてサーバーを立ち上げなおしてください。
　


まずアプリケーションコントローラーでこのように定義してください

```application_controller.erb

def search
      @search= Pet.ransack(params[:q])　# 検索オブジェクトを生成
      @pets=@search.result
    end
```
これで検索をかけています。
キー（:q）を使って、Petテーブルからペットを探しています。
＠search= Pet.ransack(params[:q])



```search.html.erb
<%= search_form_for @search,url: search_pets_path do |f| %>

<div class="search-field">
        <%= f.label :bleed_id_eq, '種類の選択' %>
        <%= f.collection_select :bleed_id_eq, Bleed.all, :id, :name, include_blank: '指定なし'%>
        </div>
```

注意　url: search_pets_path これがなかったら　エラーがでます

_eqは条件に合った検索を行うためのメゾットになります。
第３引数を:idにするのを間違えないでください。


これでできました。
かなり簡単ですね。w
引数をいろいろ当てはめて探りながらやってたらできました笑
Elasticsearch > ローカル環境に構築したElasticsearchを（テスト的に）外部公開する



ローカル環境に構築したElasticsearchを（テスト的に）外部公開する


elasticsearch.ymlに以下を追記

```:elasticsearch.yml
network.host: ["_site_", "_local_"]

http.port: 9200
transport.host: localhost
transport.tcp.port: 9300

```



# 参考

[network.hostでの特定IPアドレスの指定 - Elastic In Your Native Tongue / 日本語による質問・議論はこちら - Discuss the Elastic Stack](https://discuss.elastic.co/t/network-host-ip/88947)

[Securityを始めてみよう | X-Pack for the Elastic Stack | Elastic](https://www.elastic.co/guide/jp/x-pack/current/security-getting-started.html)

[Network settings | Elasticsearch Reference [7.9] | Elastic](https://www.elastic.co/guide/en/elasticsearch/reference/current/modules-network.html#network-interface-values)
AppSyncでネストされたクエリを発行できるようにする。

やりたいこと
=====

```graphql
query {
  user(id: "Makutamoto") {
    id
    posts {
      userID
      id
    }
  }
}
```

このような、ネストされたクエリを実行したいとします。
言い換えると、userフィールドの引数であるidをpostsのresolverでも受け取とりたいということです。

解決策
=====
Response Mapping Templateの$context.sourceに親フィールドのレスポンスが格納されているので、それを使います。

実行結果
-----
```json
{
  "data": {
    "user": {
      "id": "Makutamoto",
      "posts": [
        {
          "userID": "Makutamoto",
          "id": "id-1"
        },
        {
          "userID": "Makutamoto",
          "id": "id-2"
        }
      ]
    }
  }
}
```

ソース
-----
簡略化のため、データソースはすべてNoneタイプのものを指定しています。

### スキーマ
```graphql
type Post {
	userID: String!
	id: String!
}

type Query {
	user(id: ID!): User
}

type User {
	id: String!
	posts: [Post]!
}
```

### userフィールドのリゾルバ
```json:Request&nbsp;Mapping&nbsp;Template
{
    "version": "2017-02-28",
    "payload": {
    }
}
```

```java:Response&nbsp;Mapping&nbsp;Template
$util.toJson($context.arguments)
```
### postsフィールドのリゾルバ
```json:Request&nbsp;Mapping&nbsp;Template
{
    "version": "2017-02-28",
    "payload": {
    }
}
```

```java:Response$nbsp;Mapping&nbsp;Template
$util.toJson([{"userID": $context.source.id, "id": "id-1"}, {"userID": $context.source.id, "id": "id-2"}])
```

参考
=====
- [mutation to create relations on AWS AppSync](https://stackoverflow.com/questions/51319894/mutation-to-create-relations-on-aws-appsync/51331406#51331406)
Django FormのChoiceFieldでBootstrapのbtn-groupを使いたい

# やりたいこと
![キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669673/ef4cf0c1-a82c-f214-f164-d2897bc74dc3.jpeg)
・こんな感じのことをRadioSelectのwidgetを使ってやりたかった。
・

# 環境
+ Django 3.1.2
+ Bootstrap 4.3.1

# 前提
```forms.py
class CustomForm(forms.Form):
    interval = forms.ChoiceField(
        choices=((0, "DAY"), (1, "HOUR"), (2, "MINUTE"),),
        widget=forms.RadioSelect
    )
    ...
```
こんなFormがあるとして、このintervalを上のようなBootstrapのbtn-groupを使って表示したい。

# 流れ
1. settingsを変更しRadioSelectで独自Templateを使えるように。
2. Templateを調整。
3. TestFormで独自Templateを設定。

## 1. 設定の変更
```settings.py
FORM_RENDERER = 'django.forms.renderers.TemplatesSetting'
INSTALLED_APPS [
    ...,
    "django.forms",
]
```
デフォルトのレンダラーだとtemplates以下のファイルを読み込めないためTemplateSettingに変更。
そして、このままだと今度は組み込みTemplateを読み込めないためINSTALLED_APPSにdjango.formsを追加。

## 2. 独自Templateの作成。
今回はDjangoデフォルトのものをベースに radio.html と radio_options.html の2種類のTemplateを使う。

```widget/radio.html
{% with id=widget.attrs.id %}
    <div{% if id %} id="{{ id }}"{% endif %}
                    class="btn-group btn-group-toggle {% if widget.attrs.class %}{{ widget.attrs.class }}{% endif %}" data-toggle="buttons">
        {% for group, options, index in widget.optgroups %}
            {% for option in options %}
                {% include option.template_name with widget=option %}
            {% endfor %}
        {% endfor %}
    </div>
{% endwith %}
```

```widget/radio_options.html
{% if widget.wrap_label %}<label{% if widget.attrs.id %}
    for="{{ widget.attrs.id }}"{% endif %}
    class="btn btn-sm btn-outline-dark">{% endif %}{% include "django/forms/widgets/input.html" %}
{% if widget.wrap_label %} {{ widget.label }}</label>{% endif %}
```
やっていることはClassの追加とHTMLタグの修正くらい。

## 3. form.pyの修正
```forms.py
class CustomForm(forms.Form):
    interval = forms.ChoiceField(
        choices=((0, "DAY"), (1, "HOUR"), (2, "MINUTE"),),
        widget=forms.RadioSelect
    )
    interval.widget.template_name = "widget/radio.html"
    interval.widget.option_template_name = "widget/radio_options.html"
    ...
```
[field_name].widget.template_name と option_template_name に作ったTemplateを設定。

## 完成！
![キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669673/1bdafe17-307a-110a-aaa7-fb9d81ae902b.jpeg)

# Tips
## 初期値を設定したい。
```forms.py
class CustomForm(form.Form):
    def __init__(self, *args, **kwargs):
        super(GiftFormSearch, self).__init__(*args, **kwargs)
        self.initial["interval"] = 0
```
init内で設定できます。 views.pyで設定したい場合は以下の通り。

```views.py
def hogehoge(request):
    ...
    form = CustomForm({"interval": 0})
```
ただし、inputにcheckedが追加されるだけでClassには何も追加されないため見た目で判別できないことに注意。
クライアント側のjsでとりあえず対応しています。
react-router-domのAPIについて私的まとめ

こちらの記事は以下の書籍を参考にアウトプットとして執筆しました。
[React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで](https://www.amazon.co.jp/React%E5%85%A5%E9%96%80-React%E3%83%BBRedux%E3%81%AE%E5%B0%8E%E5%85%A5%E3%81%8B%E3%82%89%E3%82%B5%E3%83%BC%E3%83%90%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AB%E3%82%88%E3%82%8BUX%E3%81%AE%E5%90%91%E4%B8%8A%E3%81%BE%E3%81%A7-%E7%A9%B4%E4%BA%95%E5%AE%8F%E5%B9%B8-ebook/dp/B078XDLL2J/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=&sr=)

#ルーティングのAPI
|API|ルーティング手法|
|---|---|
|\<BrowserRouter\>|history API|
|\<HashRouter\>|URL hash|
|\<Route\>|これでコンポーネントの出し分けができる|
|\<Link\>|SPAの遷移が簡単にできる|
|\<NavLink\>|\<Link\>要素を修飾|

|プロパティ|説明|
|---|---|
|basename:string|アプリがドメインのサブディレクトリにデプロイされている場合にそのURLを指定|
|getUserComfirmation:func|ユーザーへ確認のダイアログを表示してルーティング|
|forchRefresh:bool|ブラウザがhistory APIをサポートしていない場合に使用する|
|keyLength:number|履歴を格納する長さの指定|
|children:node|childrenに指定されたノードをrender|
|hashtype:string|Hashの形式を指定できる|

###\<Router\>
####componentメソッド
一番かんたんなコンポーネントの描画
pathの文字列を含むURLのときに描画される

#react-router-redux
react-routerをreduxに最適化
ルーティングをStoreのStateで管理してpushやreplaceなどのAPIでURLを変更する
###\<ConnectedRouter\>
storeのルーティング情報と動悸できるようになったRouterのようなもの
VBA-JSONでJSON文字列を作成してみる！

<h2>はじめに</h2>
VBAでWebAPIを使う際、データの取得（GET）処理では、<a href=https://qiita.com/emesh/items/0834a5ad373d2ade6a93>この記事</a>のようにJSONパースの情報が比較的多く公開されていたが、データの送信（POSTとか）時に使用するExcelデータ⇒JSONデータの作成方法が見当たらなかったのでメモです。

VBA-JSONの導入方法などなどは上記リンク等や、GitのReadMe見てください。

<h2>Jsonデータ作成概要</h2>
VBA-JSONでJsonデータを生成するには”JsonConverter.ConvertToJson”を使います。この関数は引数にDictionary配列をとり、戻り値はString型です。

WebAPIではざっくりいうとこの戻り値を渡してあげればOKです！

Deictionary配列のKeyとvalueがJSONのKeyとValueに対応していて、複数のKeyとValueをDictionary配列に渡せば、それぞれがJSONのメンバーとして出力されます。

<h2>サンプル</h2>
<h3>単一行</h3>
以下のように3列1行の表を前提とします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632397/5c18fcb9-c968-c12a-d38b-53d127fe64e6.png)

その場合には以下のコードのようにDictionary配列にKeyとValueをいれてJsonConverter.ConvertToJsonに渡してあげれば...

```vb:sample.bas
    Dim buf As New Dictionary

    'Key項目だけでLoop
    For Each Item In Range("A1:C1")
        
        '値はOffsetで取得
        Call buf.Add(Item.Value, Item.Offset(1, 0).Value)

    Next

    'Json型文字列取得と結果表示
    MsgBox JsonConverter.ConvertToJson(buf)
```
以下のようにJSONデータが生成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632397/8a26a5e0-ae76-4186-268f-b971929abf7d.png)

WebAPIのPayloadとしても使えそうですね。

<h3>複数行</h3>
複数行の場合にはかなりややこしくなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632397/561cebfc-1951-0340-68fa-b6ee616d3287.png)

複数行の場合には各行をDictionaryで表現しつつ、それらを一旦Collection型配列に格納します。さらにそれをJsonConverterに渡すためにDictionary配列の要素に格納します。

```vb:sample2.bas
    Dim buf As New Dictionary
    Dim bufColl As New Collection
    
    '行ループ
    For i = 1 To 2
    
        'Key項目だけでLoop 列ループ
        For Each Item In Range("A1:C1")
                    
            '値はOffsetで取得
            Call buf.Add(Item.Value, Item.Offset(i, 0).Value)
    
        Next
        
        'DictionaryをCollectionに格納
        Call bufColl.Add(buf)
        
        '次ループに備えDictionary初期化。これをしないとKey重複エラーになる
        Set buf = Nothing
        Set buf = New Dictionary
    
    Next i
    
    'CollectionをDictionaryに格納
    Call buf.Add("items", bufColl)

    'Json型文字列取得
    MsgBox JsonConverter.ConvertToJson(buf)

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632397/dd85cf6f-d99f-1da5-597d-0588bb1e8f60.png)

配列で出力されました。

Collectionをかませることで親が1で子要素がNのケースでも使えますし、その階層はいくつでも深くできます。

<h2>まとめ</h2>
結構簡単にExcelからJSONデータを作成することができます。
複数行を配列にしたいときだけCollectionを使うようにしましょう。
error: no member named 'signbit' in the global namespaceと/usr/bin/locale:1:1: error: source file is not valid UTF-8のお話


これは私が解決した解決策です。
osはmacOS Catalina バージョン10.15.7
#/usr/bin/locale:1:1: error: source file is not valid UTF-8
c++で.cppファイルをコンパイルしようと```g++ hello.cpp``` としたときに下記のようにエラーがでた。

```cpp:hello.cpp
#include <iostream>
using namesapce std;
int main() { cout << "hello" << endl; }
```

```:エラー内容（抜粋）
/usr/bin/locale:1:1: error: source file is not valid UTF-8
<CF><FA><ED><FE><U+0007><U+0000><U+0000><U+0001><U+0003><U+0000><U+0000><U+0000><U+0002><U+0000><U+0000><U+0000><U+0012><U+0000><U+0000><U+0000>x<U+0007><U+0000><U+0000><85><80>!<U+0000>...
（以下同様のエラーが多数なので省略）
fatal error: too many errors emitted, stopping now [-ferror-limit=]
20 errors generated.
```
これは、iostream内でlocaleというファイルを呼び出すようなのですが、usr/bin/にあるlocaleと競合してしまったようです。
このように競合してしまったのは、私が.zshrc(bashだと.bash_profile)にCPATHを通そうと以下のように```export CPATH="$PATH:/usr/....(以下省略)```と書いてしまったからです。```$PATH```となっていて、CPATHに ```$PATH``` が全部乗ってしまっていました。そのため、/usr/binのなかにあるlocaleを見てutf-8じゃないと言われたわけです。つまり、  ```  " "```  の中に ```$CPATH``` ではなく、\$PATHと書いてあったら\$CPATHと書き直しましょう。
こんな間違い他にする人がいないかもしれませんが、このエラーで困っているひとはパスが間違えてないかみてみると幸せになるかもしれません.

##　エラー再現方法
```g++ ファイル名　-I /usr/bin ``` で同様のエラーが出ますね。（）

# error: no member named 'signbit' in the global namespace
c++のcmathを使ったプログラムをコンパイルした時に下のようなエラーが出ました。
 
```
/Library/Developer/CommandLineTools/usr/bin/../include/c++/v1/cmath:318:9: error: 
      no member named 'signbit' in the global namespace
using ::signbit;
(同様のエラーが多数)
```
これと同様のエラーが出ている人もいましたが、いまいち原因が分からなかったのですが、homebrewでインストールしたg++でコンパイルしたら上手くコンパイル出来るようになりました。
原因としてXcodeを削除して再インストールしたので、ライブラリのパスがおかしくなったのかもしれません..
【Javascript初歩】Dateオブジェクトを使って年月日表示ボタンを作成する

ブラウザ上に、現在の年月日を表示する方法を備忘として残しておきます。

###Dateオブジェクトとは
Dateオブジェクトとは、日付や時間などを扱うメソッドがすでに定義されているもので、時間の計算や日付の換算等を簡単に行うことができる。

####一例
・現在の日付、時刻のオブジェクトを作成

```js
 let now = new Date();
```
・西暦年を取得

```js
 let year = now.getFullYear();
```
・月を取得（※0～11の数字で取得するため、+1すること！）

```js
 let month = now.getMonth() + 1;
```
・日付を取得

```js
 let day = now.getDate();
```

###活用例　－クリックすると今日の年月日が表示されるボタンの作成－

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>年月日表示</title>
</head>
<body>
  <h1 id="select">年月日表示</h1>
  <input type="button" value="Click" onclick="change()"> <!--onclick・・・クリック時にメソッドを呼び出す-->
  <script>
    function today(){
      let union = null; //年・月・日を結合するための変数をnullで設定。
      let now = new Date();
      let year = now.getFullYear();
      let month = now.getMonth()+1; //0月から始まるため、1を加算している。
      let day = now.getDate();
      return union = year+"年"+month+"月"+day+"日";
    }
      let expressToday = today();

    const change = function(){
          const ymd = document.getElementById('select');
          ymd.innerHTML = expressToday; //取得した要素のうち、html要素を書き換える。
        }
  </script>
</body>
</html>
```
####プレビュー
![qiita_js_ymd.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698990/ff014ee5-f541-2160-ddc4-5bf5c1dd7484.gif)
【Ruby】invalid multibyte char (UTF-8)エラーの解決方法【CSV】

現在、業務委託で飲食店コンサルのデータ収集のお手伝いを（Railsアプリと、rubyのスクリプトで食べログをスクレイピング）しているのですが、文字エンコードでエラーが出て苦戦したのでここに解決方法を共有させて頂きます。

環境

- Windows10 Pro
- ruby 2.7.0

##エラーコード
```

SyntaxError ((irb):1: invalid multibyte char (UTF-8))
```
rubyのスクレイピングファイルをターミナルから実行したらこんなエラーが出ました。

どうやら文字コードが悪さをしてエラーが出ているようです。
Windowsはファイルを保存したときにデフォルトの文字コードがANSIというやつで、この文字コードをUTF-8に変えて保存する必要があります！

**メモ帳を起動して、変更したいファイルをドラッグ＆ドロップをして名前を付けて保存するときに文字コードをANSIからUTF-8（BOMは無しを推奨）に変えるだけです！**
[参考](https://uxmilk.jp/47955)

全然プログラミング関係ない。。ｗｗ

スクリプトのコードをUTF-8からcp932に変更したり、色々やりましたがほとんど意味なかったです。。笑

##ちなみにこれだけじゃエラー解決しなかった、、

最終的にはこんな感じのコードになりました↓

```ruby:scrp_tabelog.rb
CSV.open('new_log_file.csv', "w", liberal_parsing: true) do |csv|
  csv << ['契約順番号', '店舗名', '日付', '評価点数', '', '', '', '', '', '', '', 'クチコミ件数(件)', '行った人(人)', '行きたい人(人)']
  csv << ['', '', '', '総合', '夜', '昼', '料理・味', 'サービス', '雰囲気', 'CP', '酒・ドリンク']

  CSV.foreach('shop_point_list.csv', headers: false, liberal_parsing: true) do |recent_row|
    #処理を書く
  end
end
```
ここでののポイントは **liberal_parsing: true** です。
ruby 2.4.0 から、CSV に追加されたオプションで、これをtrueにするとダブルクォートで囲ってないデータであれば、データ中に出てくるダブルクォートはパースできるようです。

これでなんとかエラーを起こさずにデータを引っ張てくることができました！

##最後まで読んでいただきありがとうございます！
日々学んだことをアウトプットしています！感想やご指摘などあればコメントいただけますと幸いです！
initializeメソッドとは

initializeメソッドとは

インスタンスが生成される際、`new` メソッドの中で呼び出されるメソッドで

使い方としては

```ruby
class User
  def initialize(user1, user2)
    @user1 = user1
    @user2 = user2
  end

  def response
    puts "#{@user1}さんの次が#{@user2}さんです"
  end
end

puts "最初に出てきた人は？"
friend1 = gets(chomp: true)
puts "次に出てきた人は？"
friend2 = gets(chomp: true)

answer = User.new(friend1, friend2)
answer.response

```
Elastic社のElastic Cloudで、Elasticsearchサーバーに対してCORSを設定する



Elasticsearchで試していると、ひとまず手取り早く試したいという時がくると思います。
その時のメモです。


Elastic社の[Elastic Cloud](https://www.elastic.co/jp/cloud/)に作成したElasticsearchに対して、直接クエリを投げるWebアプリを（テスト的に）作った際に、デフォルトの設定のままではCORSの制限に引っかかります。

![スクリーンショット 2020-10-07 23.17.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/57188661-e8f2-945f-2997-2e0655224682.png "スクリーンショット 2020-10-07 23.17.25.png")



以下ドキュメントから
[Add Elasticsearch user settings | Elasticsearch Service Documentation | Elastic](https://www.elastic.co/guide/en/cloud/current/ec-add-user-settings.html#ec-add-user-settings)



### 1. Log in to the [Elasticsearch Service Console.](https://cloud.elastic.co/)

### 2. Select your deployment on the home page in the Elasticsearch Service card or go to the deployments page.

### 3. From your deployment menu, go to the Edit page.

### 4. At the bottom of each Elasticsearch node, expand the User settings overrides caret.

![スクリーンショット 2020-10-07 23.20.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/05829b32-0f28-4b30-80b9-6ada14c086bc.png "スクリーンショット 2020-10-07 23.20.04.png")


### 5. Update the user settings.

開いたエディタ部分にHTTPの設定を入れる

```
http:
  cors.enabled: true
  cors.allow-origin: /https?:\/\/(localhost(:[0-9]+)?|xxxxx.github.io)/
  cors.allow-methods: GET
  cors.allow-headers: Authorization, X-Requested-With,X-Auth-Token,Content-Type, Content-Length
```

※以下の2つからのアクセスを許可する設定にしています。

- localhost
- xxxxx.github.io



![スクリーンショット 2020-10-07 23.21.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/7d8a46b2-ca2e-8136-7a75-25b5be7bc949.png "スクリーンショット 2020-10-07 23.21.35.png")


### 6. Click Save changes.

![スクリーンショット 2020-10-07 23.23.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/2868b08b-cd82-6299-e47f-ff71ef31d369.png "スクリーンショット 2020-10-07 23.23.50.png")


Saveボタンを押すとサーバーの更新が始まります。


![スクリーンショット 2020-10-07 23.28.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/f89fdc7c-70c7-e50e-47a1-baa87605d2d9.png "スクリーンショット 2020-10-07 23.28.57.png")


ローディングが終わったら設定が反映されています。

![スクリーンショット 2020-10-07 23.39.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/8f149450-ddd6-8b50-250f-8e84547c746d.png "スクリーンショット 2020-10-07 23.39.20.png")




コンソールログにもエラーは出なくなりました。

![スクリーンショット 2020-10-07 23.29.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/a0e0df50-da62-c52c-0eb6-425240a24c9e.png "スクリーンショット 2020-10-07 23.29.49.png")

# 参考

[Add Elasticsearch user settings | Elasticsearch Service Documentation | Elastic](https://www.elastic.co/guide/en/cloud/current/ec-add-user-settings.html#ec-es-elasticsearch-settings)

[HTTP | Elasticsearch Reference [7.9] | Elastic](https://www.elastic.co/guide/en/elasticsearch/reference/7.9/modules-http.html)


[YML 設定 - Elasticsearch インスタンス| Alibaba Cloud ドキュメントセンター](https://jp.alibabacloud.com/help/doc-detail/61336.htm)
エラー時：Invariant Violation: Tried to register two views with the same name RNCSafeAreaProvider

複数回、expoで上記エラーになった。
毎回検索するのが少し面倒なので解決法をメモさせてもらう。

情報元はこちらです。（ありがとうございます。🙏）
https://github.com/th3rdwave/react-native-safe-area-context/issues/110

remove `react-native-safe-area-context` from your package.json
run yarn or npm install
run `expo install react-native-safe-area-context`
exitコマンドの終了コード

どんな環境でもそうですが、何も意識せずにコードを書いていると、思わぬところで引っかかることがあります。

## シェルスクリプトと`exit`コマンド

プログラムを書く上で、「途中脱出」という技法はよく必要となります。そして、シェルスクリプトでそれを実現するのが`exit`コマンドです。

`exit 0`のように終了コードを指定すれば、それをシェルスクリプト全体の終了コードとする[^1]、という結果になります。

### 終了コードを指定しないと…

では、終了コードを指定しない場合はどうなるかというと、「前のコマンドの終了コードをそのまま返す」ような挙動となります。`set -e`している場合[^2]などは典型的ですが、普通に実行していれば終了コード0のコマンドばかりが並びますので、`exit`だけでも終了コード0を返す状況が多いです。

とはいえ、引っかかるパターンもありまして、`[ 条件 ] || exit`のように書くと、条件が成立しない場合に`[`コマンドの終了コードは1で、続く`exit`がその1を返してしまいます。シェルスクリプトの終了コードを0にするには、明示的に`[ 条件 ] || exit 0`と書く必要があります。

## 結論

* `exit`のような、一見単純に見えるコマンドでも、意外な挙動が潜んでいることがある
* 正常終了させたいときに、無意識に`exit`だけ書いていると失敗することがある


## 外部リンク

* [POSIXでの`exit`コマンドの定義（The Open Group）](https://pubs.opengroup.org/onlinepubs/9699919799/utilities/V3_chap02.html#tag_18_21)

[^1]: POSIXで動作が保証されるのは0以上255以下までです。
[^2]: `set -e`をかけている途中にエラーとなると、まさしく`exit`（引数なし）が実行されたのと同じ結果となる、とのことです。
DockerでRailsの開発環境を構築したあとにPryを導入する方法

#環境
macOS 10.15.5
Rails 5.2.4.2
Docker 19.03.12

#はじめに

DockerでRailsの開発環境を構築したあとにConsoleを使用しようとする下記のようにIRBが表示されます。


```
irb(main):001:0>
```
しかしRailsの開発の役に立つ**Pry**をDockerでRailsの開発環境を構築したあとに導入するにはどうしたらいいのかその方法をご紹介します。

#Gemfileを追加する


```ruby:Gemfile
gem "pry-rails"
gem "pry-byebug"
```
```ruby:terminal
$ bundle install
```
そしてConsoleを実行してみます。

```ruby:terminal
$ rails console
```
しかしエラーになってしまいエラー文の末尾に下記のようなメッセージが表示されてしまいました。

```ruby:terminal
`autodetect': Could not find a JavaScript runtime. See https://github.com/rails/execjs for a list of available runtimes. (ExecJS::RuntimeUnavailable)
```
"JavaScript runtimeが見つかりません"というエラーのようです。なのでnode.jsのインストールを試みました。
node.jsをhomebrewを使ってインストールします。

```ruby:terminal
$ brew install nodejs
```
そしてConcoleを実行します。

```
$ rails console
[1] pry(main)>
```

無事にPryの導入と実行に成功することができました！
Laravel メール自動返信機能 フォーム多重送信防止！

Laravelでメール自動返信機能のついた、お問い合わせフォームを作成してる時に発生した出来事を記事にするぞ！

・多重送信ができることが発覚した時のワイ(・o・)//WRYYYYYYYY(Dio)

---

・多重送信が発生する条件 = 送信ボタン連打

```
    //DB保存処理&完了画面表示
    public function complete(Request $request){
       //DBに保存
        $contact = new Contact;
        $contact->name = $request->name;
        $contact->email = $request->email;
        $contact->body = $request->body;
        $contact->save();

       //メール自動返信の奴
        $sendData = $request->all();
        \Mail::to($sendData['email'])->send(new ContactSendMail($sendData));
        $request->session()->regenerateToken(); ←多重送信防止一応書いてる
        return view('contact.complete');
    }

```

　このコードで送信ボタンを連打するとメール自動返信の処理が重いからか、送信ボタンめちゃ押せて、その分リクエスト飛ぶ。(DBに保存&同じメールが何件も送られてくる。。。)

```
        //多重送信防止処理
        if (!Cache::add('used_token.' . $request->session()->token(), 1, 1)) {
            return view('contact.complete');
        }
```
この処理をメソッドのはじめに配置！
どの様な処理か...
同じトークンで１回以上リクエストを送れないようにする！
送られてきたらelseの処理！

なお、Cacheクラスを使用するので、

```
use Illuminate\Support\Facades\Cache;
```

```
    //DB保存処理&完了画面表示
    public function complete(Request $request){
//追加した記述始め
        //多重送信防止処理
        if (!Cache::add('used_token.' . $request->session()->token(), 1, 1)) {
            return view('contact.complete')←使用済みだったときの処理;
//追加した記述終わり
        }
        $contact = new Contact;
        $contact->name = $request->name;
        $contact->email = $request->email;
        $contact->body = $request->body;
        $contact->save();

        $sendData = $request->all();
        \Mail::to($sendData['email'])->send(new ContactSendMail($sendData));
        $request->session()->regenerateToken();
        return view('contact.complete');
    }
```

こうすると、送信ボタンを連打しても大丈夫！(プログラミング歴3ヶ月の言葉...)
Pythonのエンコード

以下のコードが何を出力するかわかるでしょうか。

```python 
import base64

text = 'abc'

print([ch for ch in text])
print([ch for ch in text.encode()])
print([ch for ch in base64.b64encode(text.encode())])
```
出力は以下のようになります。

```console
['a', 'b', 'c']
[97, 98, 99]
[89, 87, 74, 106]
```

`encode()`はutf-8へのエンコードであり、その出力はバイト列として扱うことができますが、
バイト列をforループで回して要素を取得するとint型の数値が出力されます。

同じくbase64でエンコードした場合も、その出力はバイト列として扱うことができますが、
バイト列をforループで回して要素を取得するとint型の数値が出力されます。
そして、utf-8での出力から4/3にデータ量が増加しています。
javascript, jqueryで学んだ事(自分用)

##改めて整理

最初に感じたことは、初心者にとってjavascript、jqueryの見分けがつかない事。
ググっても二つが混同して記載されている事が多く混乱していた。

*二つの書き方の違い(意味的には同じ)

```
:javascript

// id名から要素取得
document.getElementById('test');

// class名から要素取得
document.getElementsByClassName('test');

// タグ名から要素取得
document.getElementsByTagName('div');

```

```
:jquery

// id名から要素取得
$("#sample")

// class名から要素取得
$(".sample")

// タグ名から要素取得
$("div")

```

＊注意点

```
・「getElement」と「getElements」を間違えないように
idから取得の場合単数系、classやtagで所得の場合複数系

・クラス名やタグで要素を取得した場合、要素が配列になっている事があるので注意
(例)
var tag = $(".hoge").tagName; ←これは駄目
var tag = $(".hoge")[0].tagName; ←これはおk

```

わかった事があれば随時追記していきます。
MAVProxyでUAVのテレメトリ情報をリモートGCSに転送

MAVProxyを使用してUAVのテレメトリ情報をネットワークのUDP経由でリモートGCSに転送することが可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386259/f506921d-b5c9-99a1-46ee-3934c20cc7c3.png)

# 環境
- Ubuntu 18.04.5
- Python 2.7.17
- MAVProxy Version: 1.8.22

# ロカールQGC(QGroundControl)に転送

- MAVProxyを起動

```console
$ mavproxy.py --master=/dev/ttyACM0 --baudrate 115200 --out 127.0.0.1:14550
Connect /dev/ttyACM0 source_system=255
Log Directory: 
Telemetry log: mav.tlog
Waiting for heartbeat from /dev/ttyACM0
MAV> online system 1
MANUAL> Mode MANUAL
fence breach
Received 722 parameters
Saved 723 parameters to mav.parm
MAV> 
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386259/37880773-727b-2182-8fb1-deec7ba6fa84.png)

- QGC(QGroundControl)を起動

```
$ ./QGroundControl.AppImage
```

- QGCにUPD接続ポートを設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386259/c5505cce-c11d-ea76-2efa-c78aa279fdb6.png)

- QGCでMavproxyに接続

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386259/baab4832-f9c4-c008-74a6-62b35c65b609.png)

- QGC(QGroundControl)を再起動

QGC側

```
$ ./QGroundControl.AppImage

QGCPositionManager error 0
Switching outbound to mavlink 2.0 due to incoming mavlink 2.0 packet: 0x55b3e76c7a48 1 2
Temp log "/tmp/FlightData146713.mavlink"
```

Mavproxy側

```
MANUAL> Got COMMAND_ACK: REQUEST_AUTOPILOT_CAPABILITIES: ACCEPTED
Got MAVLink msg: COMMAND_ACK {command : 519, result : 0}

```

- QGCでテレメトリ情報を表示

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386259/100afc49-313a-3e40-0563-7733323f6429.png)



# リモートQGC(QGroundControl)に転送

- MAVProxyを起動

```console
$ mavproxy.py --master=/dev/ttyACM0 --baudrate 115200 --out 192.168.11.18:14550
Connect /dev/ttyACM0 source_system=255
Log Directory: 
Telemetry log: mav.tlog
Waiting for heartbeat from /dev/ttyACM0
MAV> APM: Data link lost
online system 1
MANUAL> Mode MANUAL
Got COMMAND_ACK: REQUEST_AUTOPILOT_CAPABILITIES: ACCEPTED
Got MAVLink msg: COMMAND_ACK {command : 519, result : 0}
fence breach
APM: Data link regained
Received 722 parameters
Saved 723 parameters to mav.parm
```

- リモートPCのQGC(QGroundControl)を起動

```
$ ./QGroundControl.AppImage
```

- QGCにUPD接続ポートを設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386259/c5505cce-c11d-ea76-2efa-c78aa279fdb6.png)

- QGCでMavproxyに接続

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386259/baab4832-f9c4-c008-74a6-62b35c65b609.png)

- QGC(QGroundControl)を再起動

```
$ ./QGroundControl.AppImage

QGCPositionManager error 0
"v4.0.10"
Adding target QHostAddress("192.168.11.13") 55311
Switching outbound to mavlink 2.0 due to incoming mavlink 2.0 packet: 0x55664fac7a70 2 2
Temp log "/tmp/FlightData146713.mavlink"
```

- QGCでテレメトリ情報を表示

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386259/100afc49-313a-3e40-0563-7733323f6429.png)
viでのコピー＆ペースト



カーソルを 行のいずれかの位置に合わせ、[ y ]、[ y ] と入力。画面上に変化は現れませんが、1行ヤンクされている。

次に、[ p ] を入力。行がもう一行追加され、2行になる。

 Hello
 Hello

この状態で、[ 2 ]、[ p ] 入力する。先ほど Yank したバッファが残っているので、 さらに2回 Put される。

 Hello
 Hello
 Hello
 Hello

Vi ではコマンドの前に数字を入力することで、そのコマンドを複数回繰り返すことが出来る。

コピーはYankから[ y ]