OmniAICreator/Qiita-1.07M huggingface dataset:
Google Cloud Functions で Firestore appsをイニシャライズしようとするとValueErrorになってしまう。

## 困ったこと
Google Cloud Functionsで、あるデータを取得してFirestoreに保存するという処理を作成し、
Cloud Schedulerで数分置きに動作するようにしました。

ローカル環境からもクラウドでの実行テストもOKでしたが、いざスケジュール実行すると、
以下のように、実行結果のステータスが'ok'と'crash'を繰り返すようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668857/44773d62-2843-066b-af2b-d7a5a7a22516.png)

## 環境
- Google Cloud Functions
- Firestore
- Python3.7

## 当初の実装
[公式の解説](https://firebase.google.com/docs/firestore/quickstart?hl=ja)の通りに実装

こう記載するだけで、同じアカウント内でFirestoreにアクセスできるみたい。簡単にできた！

```Python:
import firebase_admin
from firebase_admin import credentials
from firebase_admin import firestore

# Use the application default credentials
cred = credentials.ApplicationDefault()
firebase_admin.initialize_app(cred, {
  'projectId': project_id,
})

db = firestore.client()
```
しかし、いざスケジュールに乗っけると冒頭の現象に。。

エラーの内容を調べてみると、以下のValueErrorが吐かれていました。

```
ValueError: The default Firebase app already exists. 
This means you called initialize_app() more than once without providing an app name as the second argument.
```

initialize_app()を2回呼ぶなと怒られているようだ。
コードを見直してもみたが、一回の実行の中では一度しか呼んでないはず。。。

## 解決した実装

```Python:
import firebase_admin
from firebase_admin import credentials
from firebase_admin import firestore

if not firebase_admin._apps:
  cred = credentials.ApplicationDefault()
  firebase_admin.initialize_app(cred, {
    'projectId': project_id,
  })

db = firestore.client()
```

[stack overflow](https://stackoverflow.com/questions/44293241/check-if-a-firebase-app-is-already-initialized-in-python)で同じエラーで困っている人がいたので、それを参考に。
単純ですが、すでにApplicationを初期化済みかどうかチェックをするif文を入れることで解決しました。

Cloud FunctionsとCloud Schedulerの動きがよくわかっていませんが、
時間を空けずに実行すると前の実行で生成されたインスタンスを再利用するような動きなんだろうか。

ローカルでは連続で実行しても何の問題もなかったので、ハマってしまいました。
初心者によるプログラミング学習ログ 362日目

#100日チャレンジの362日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
362日目は、
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>昨日の作業・やったこと⇩<br><br>●ブログ記事1記事作成<br>●プログラミング学習362日目 8h<br>・架空LP(<a href="https://twitter.com/ririru_123?ref_src=twsrc%5Etfw">@ririru_123</a> )のpc版作成<br>・制作物、スキル一覧作成<br>・udemyでフロントエンド講座<br><br>布団の上で行き倒れた<a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E3%81%A4%E3%81%AA%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアとつながりたい</a><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a><a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a></p>&mdash; ぱぺまぺ@社畜✕投資✕ブロガー (@ppmp65) <a href="https://twitter.com/ppmp65/status/1279869142808489984?ref_src=twsrc%5Etfw">July 5, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
はじめてのPython3 ~はじめての計算編~

# はじめに
この記事は、私がPython3で学んだことを備忘録としてメモしている程度のものです。

### Python3 バージョンについて
この記事は以下のバージョンで進めています。

```
% python3 --version
Python 3.7.3

```

# Python起動

```
% python3
Python 3.7.3 (default, Apr  7 2020, 14:06:47) 
[Clang 11.0.3 (clang-1103.0.32.59)] on darwin
Type "help", "copyright", "credits" or "license" for more information.
>>> 

```

この >>> になっている状態なら、入力を待機してくれています。 

# 計算

|演算式|       |
|:---------:|:-----:|
|x + y|xとyの和|
|x - y|xとyの差|
|x * y|xとyの積|
|x / y|xとyの商|
|x // y|xとyの商の小数点以下を切り上げる|
|x % y|xとyの剰余|
|x ** y|xのy乗（累乗）|

```
>>> 2 + 3 
6
>>> 4 - 2 
2
>>> 30 * 3
90
>>> 90 / 9
10
```

- 「x ** y」 とすることで、累乗(xのy乗)となります。 

```
# （例） 3の３乗
>>> 3 ** 3
27
```

- 「x // y」 とすることで、商の小数点以下を切り下げます。

```
>>> 100 // 3
33
>>> 100 / 3
33.333333333333336
```

- 「x % y」とすることで、x/yの剰余を算出します。

```
>>> 12 % 3 # 4あまり0
0
>>> 13 % 3 # 4あまり1
1
>>> 13 % 7 # 1あまり6
6
```

## 計算の優先順位
- 最優先
<br> ・ ( ) … 括弧の中の計算式
- 優先順位が高め
<br> ・ * … 乗
<br> ・ / … 商
<br> ・ % … 剰余
- 優先順位は低い
<br> ・ + … 和
<br> ・ - … 差

```
number = 100

print(number + number) # 100 + 100
# 200

print(number * 2) # 100 * 2
# 200

print(number - number / 2) # 100 - 100 / 2
# 50.0

print((number + number) * 3) # (100 + 100) * 3
# 600

print((number * 2 - number) / 2) # (100 * 2 - 100) / 2
# 50.0

print(number % 30) # 100 % 3 ( ※ 100 を 3 で割った時の余り)
# 10
```

# 参考
https://docs.python.org/ja/3/library/stdtypes.html
使いやすいPythonツール5選 | 仕事の能率を高める

元記事：[https://jp.scrapestorm.com/tutorial/5-easy-to-use-python-tools/](https://jp.scrapestorm.com/tutorial/5-easy-to-use-python-tools/)
事を行うにはまず十分な準備が必要です。優れたツールは、かなり仕事の能率を高め、開発者のアイデアをより便利に実現するのに役立ちます。本文は幾つかの開発にたくさんの便利さをもたらすツールを紹介します。
###1.Python Tutor
Python Tutorは、Philip Guoが開発した無料の教育ツールです。これは、プログラミング学習の基本的な障害を克服し、プログラムが実行されたときのコンピューターのソースコードの各行のプロセスを理解するのに役立ちます。このツールを使用すると、Webブラウザで直接Pythonコードを編集し、プログラムを徐々に視覚的に実行できます。メモリ内でのコードの実行方法がわからない場合は、視覚的に実行するためにそれをTutorにコピーして、理解を深めることができます。
URLリンク：http://www.pythontutor.com/
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482909/77ace97d-c6fe-e083-2d31-57dc518b12ea.png)
###2.IPython
IPythonは特別なPythonインタラクティブshellです。IPythonは、自動変数補完、自動インデント、bashシェルコマンド、および多くの組み込み関数をサポートしており、科学計算やインタラクティブな視覚化に最適なプラットフォームでもあります。
URLリンク：https://ipython.org/
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482909/b049b1f0-625d-d604-45db-281350f2cbf2.png)
###3.Jupyter Notebook
Jupyter Notebookはドラフトブックのようなもので、テキスト注釈、数式、コード、可視化コンテンツを組み合わせて、Webページとして表示して、ドキュメントを共有しやすいにします。データ分析と機械学習に不可欠なツールです。
URLリンク：http://jupyter.org/
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482909/5d1330cb-e2c8-c4d8-9b48-1ed019e410db.png)
###4.Anaconda
Pythonは優れていますが、さまざまなパッケージ管理やPythonバージョンの問題が常に発生する可能性があります。特に、Windowsプラットフォーム上の多くのパッケージは正常にインストールできません。これらの問題を解決するために、Anacondaが登場しました。Anocondaには、パッケージ管理ツールとPython管理環境が含まれており、データ分析の標準でもある、一般的に使用される多数のデータサイエンスパッケージが付属しています。
URLリンク：https://www.anaconda.com/
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482909/0b6c170c-cd59-f9be-2434-38f4f0b231ee.png)
###5.Skulpt
Sculpt SculptはJavaScriptで実装されたオンラインのpython実行環境です。ブラウザでPythonコードを簡単に実行できます。CodeMirrorエディターと組み合わせて、基本的なオンラインPython編集および実行環境を実現します。
URLリンク：http://www.skulpt.org/
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482909/1c2a68a3-3182-f637-2822-5fe3f30578fa.png)
AIクラウド開発講座#1　(Microsoft × 高専キャリア)

#　AIクラウド開発講座とは
Microsoftさんと高専キャリアさんが共催するオンライン講座で
「Azureを活用したTeams連携Botを開発せよ」
というミッションの元、約40名の高専生が受講しています！

それでは早速、第一回の講座について体験談を書いていきます！
#　キックオフセッションを通して
まず、初回ということで7/4にキックオフセッションがありました。
セッションの主な内容は、講座概要、スケジュール発表、講座内容の発表でした。
###　スケジュール
7/4　キックオフセッション
7/5~　オンラインメンタリングを受けながら各自で作業
7/25　中間発表
8/29　最終発表
という流れでした
###　講座内容
- [Azure for studensへの登録]
(https://azure.microsoft.com/ja-jp/free/students/?WT.mc_id=azureforstudents-docs-nosuzuk)
- de:code2020の以下コンテンツを視聴
    - [学生諸君！ Azure であそぼう！ ～Microsoft の AI を自作アプリに取り入れるまで～](https://www.microsoft.com/ja-jp/events/decode/2020session/detail.aspx?sid=Z01)
    - [Azure Bot Services を使って Teams bot を開発する](https://www.microsoft.com/ja-jp/events/decode/2020session/detail.aspx?sid=A02)
- [Microsoft Learn for Studentsで学習する](https://docs.microsoft.com/ja-jp/learn/roles/student?WT.mc_id=BlendedCurriculum-MSLearn-nosuzuk)
- ちょまどさんとおーちょさんのレッスンを消化する
    - [ちょまどさんのレッスン](https://qiita.com/chomado/items/6bda10abde0551f25723)
    - [おーちょさんのレッスン](https://qiita.com/miokawa/items/6f1a3e480580e1e29abc)

これらのレッスンを受けながら、メンタリングも受けることができ、さらに優秀者には商品もあるということで、神講座の予感がビシビシします！

# 進捗
今回は実作業はそこまでしておらず、Azure for studentsの登録のみ行いました。
今後は7/25の中間発表に向けてコンテンツやレッスンの消化をしつつ週末に記事を上げていくのでアドバイスや気になることがあれば、ぜひコメントお願いします！

つたない文章に付き合っていただきありがとうございました！
では、また次週！
【vue】 axiosで複数APIコールをまとめて処理して、まとめて受け取り、どこかのAPIコールで失敗しても、処理を続けるためのメモ


# はじめに
こんにちは。Vuex最近微妙じゃね？って周りで騒がれて、「俺、Vuex使ってるけど、、やめたほうがいいならどうしたらいいんだろう・・・」って最近悩んでいる今日この頃。

Vueでaxiosを使って、連続でAPIをコールする際に、Promise.allやaxios.allを使ってまとめて投げて、まとめて受け取れるということを知ったときにはまった内容です。



axiosを使って、

```
1. 複数URL情報を格納した配列をまとめてAPI送信して、まとめて結果を受け取れる
2. まとめて投げているAPIで一つのURLのAPIコールが失敗しても処理を停止しない
3. Async/Awaitを使って同期的に処理する
```

を実現してくれる方法はないかと、

「どこかのAPIコールで失敗しても、処理を続けてうまくいったものとそうではないもの全部結果として受け取ってくれよ・・・」と

かなり錯綜して、見つけた方法を自分用メモとして残します。



# 内容

あるコンポーネントファイルから、dispatchでVuex内部にあるactionsの関数にアクセスして、そこからaxiosを使ってAPIを叩いています。

ざっくりとしたファイル構成は以下になります。（本当はもっと細かく分けています。ファイル名も適当です。）


```
.
┣ component.vue
┗ store
    ┣ modules
    ┃  ┗ api.js
    ┗ index.js

```


## 結論

### axiosに情報を渡すまでの処理

```js:component.vue
export default {
    methods: {
        async getMultiInfo(bundledUrls) {
        
            // 本来ここに複数のURLを格納した配列を作成します。
            // 何なら、引数で渡してもいいと思います。
            // const bundledUrls = [];
        
            await this.$store.dispatch('api/getMultiInfo', {
                url: bundledUrls
            })
                .then(response => {
                    this.infoCallingApi = this.$store.getters['api/getApiData'];
                }, error => {
                    console.log("getMultiInfo：error: ", error);
                })
        },
    },
}

```

### axiosに情報を渡してくるものを受け取る側

・storeのルーティング

```js:index.js
import Vue from 'vue'
import Vuex from 'vuex'
import api from './modules/api'
Vue.use(Vuex);
const store = new Vuex.Store({
    state: {
    },
    mutations: {
    },
    actions: {
    },
    modules: {
        api
    }
})
export default store

```

・APIの受け渡しを管理している場所

```js:api.js
import axios from 'axios'
const state = {
    somethingdata: "",
}
const getters = {
    getApiData(state) {
        return state.somethingdata
    }
}
const mutations = {
    getApiData(state, payload) {
        state.somethingdata = payload.data
    }
}
const actions = {
    async getMultiInfo(context, payload) {
        const payload_tmp_data = {
            data: "",
        }
        const postIds = payload.url;
        const posts = postIds.map(
            post => {
            var a = axios
                .get(post, { timeout: 60 * 1000 })
                .then(res => res)
                .catch(e => e)
                return a
            })
        await Promise.all(posts).then(response => {
            payload_tmp_data.data = response
        }).catch(error => {
            console.log(error)
        }).finally(() => {
            context.commit('getApiInfo', payload_tmp_data)
        });
    },
}
```

# 所感

「複数URL情報を格納した配列をまとめてAPI送信して、まとめて結果を受け取れる」ためにaxios.allやPromise.allを使えばいいことや
「Async/Awaitを使って同期的に処理する」を書くこと自体はすぐできたのですが、

「まとめて投げているAPIで一つのURLのAPIコールが失敗しても処理を停止しない」がPromise.allで全くできず、調べても、一つのAPIコールで失敗すると全部が失敗した判定になりますと書いてあってかなり苦戦しました。

結論の内容を使用すると、仮にどこかのAPIコールで失敗しても、その内容は無視してくれるようになります。

ちなみに、以下の記事を参考にしました。本当に有難いです。

参考：https://dev.to/jhalvorson/how-do-i-use-async-await-with-array-map-1h3f
ラズパイ3B+のセットアップ[ディスプレイ/マウス/キーボード無し]

# ラズパイ(3B+)の初期設定
2020/07/06時点確認
ディスプレイ/マウス/キーボードは使用しない。

## OSを焼く

Raspberry Pi Imagerというソフトができたらしいのでそちら参照。
すでにラズビアンがpreinstall済みのスターターキットを買うとこの手順は不要。

```
$ lsb_release -a
No LSB modules are available.
Distributor ID: Raspbian
Description:    Raspbian GNU/Linux 10 (buster)
Release:        10
Codename:       buster
```

## sshで入れるようにする。

microSDをPCに差してマウントする。

### windows(GUI)からの操作手順

デバイスとして認識されるとboot以下のファイルが閲覧できるようになる。
boot直下に空のテキストファイルを作成し、ファイル名を`ssh`にする。(拡張子は削除)

### Mac(CUI)からの操作手順

// 未実施 ToDo
// たぶん`$touch /Volumes/bool/ssh`でいい

## ラズパイを有線接続してssh接続

1. ラズパイを有線LANで繋ぐ。
2. ラズパイにsshする。
    * PCから`arp -a`コマンドでLAN内の機器のMACアドレスとIPの紐付けリストを確認し、愚直にラズパイのIPを探し`ssh pi@x.x.x.x`する。
    * `ssh@raspberrypi.local`でホスト名からLAN内のラズパイを探して`ssh pi@x.x.x.x`で入る。

## 無線LANの設定

### 暗号化しない場合

```
$ sudo vi /etc/wpa_supplicant/wpa_supplicant.conf
```

```:/etc/wpa_supplicant/wpa_supplicant.conf
country=JP
ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1
network={
    ssid="ssid"
    psk="passwd"
}
```

### 暗号化する場合

```
$ sudo su
# wpa_passphrase "ssid" "password" >> /etc/wpa_supplicant/wpa_supplicant.conf
# vi /etc/wpa_supplicant/wpa_supplicant.conf
```

最後に平文のパスワードを削除する。

`wpa_supplicant.conf`を設定して再起動してもwifiには繋がらない。有線でssh接続した時に以下のように言われる。

> Wi-Fi is currently blocked by rfkill.
> Use raspi-config to set the country before use.

`raspi-config`で国を指定してと言われている。
この設定と同時にタイムゾーンや言語設定してしまおう。

## 無線LANの有効化とタイムゾーン/言語設定

```
$ raspi-config
```

GUIライクな画面に変わる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406130/83613dc3-70b0-f504-4e61-f94db87af683.png)

1 `8 Update`を実施
2 `4 Localisation Option`を選択して以下3~5実施

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406130/d2c56935-787b-45c4-e564-2a65da634398.png)

3 `I1 Change Locale`から言語設定
4 `I2 CHange Time Zone`からタイムゾーン設定
5 `I4 Change WLAN Country`から`JP Japan`を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406130/460b67fd-4253-7e26-2591-7132dbab6336.png)

設定後reboot→`ifconfig`でwlanが加わっていることを確認。
ここで表示されるIPを控えてsshを切り、有線を外す。
無線LANからsshを実行する。

## パスワード変更

`passwd`

## ホスト名変更

`/etc/hostname`と`/etc/hosts`の`raspberrypi`を書き換える。→reboot

## ローカルIPの固定

`ifconfig`で自分の今のローカルIP確認
`route`でデフォルトゲートウェイのIP確認

以下のファイルで指定。一番末尾に追記する。
なお、複数記述することで異なるwifiに繋いだ時にそれぞれの指定にそってIPを割り当てられる。

```:/etc/dhcpcd.conf
interface wlan0                      # 複数書く場合でもこれは1個
ssid HogeHoge
static ip_address=192.168.x.x/24     # 固定するIP
static routers=192.168.x.1
static domain_name_servers=192.168.x.1

ssid FugaFuga
static ip_address=192.168.y.y/24     # 固定するIP
static routers=192.168.y.1
static domain_name_servers=192.168.y.1
```

## PythonのデフォルトをPython2→3に変更する。

```
# シンボリックリンクの作成
$ cd /usr/bin
$ sudo unlink python
$ sudo ln -s python3 python
```

確認用

```
$ python --version   # version確認
$ ls -l py*          # pythonに纏わるコメントを列挙 (/usr/binで実行)
```

## 

# 参考

https://yamaryu0508.hatenablog.com/entry/2014/08/15/140000
https://mugeek.hatenablog.com/entry/2019/05/27/230256
https://www.souichi.club/raspberrypi/python3-default/
URLの `#:~:text=` とは何か？（ Text Fragments ）

最近 Chrome で Google 検索から検索結果に移動すると
結果に該当する部分が黄色でハイライトされて表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/229987/628b4682-006e-df02-d2dc-efc862151fb9.png)
（ 上記は Wikipedia のページを開いた例です。 ）

これが何か気になったので調べてみました。

# Scroll To Text Fragment

これは Scroll To Text Fragment あるいは Text Fragments と呼ばれる機能です。
Chrome 80 以降、デフォルトで有効になっています。

URL を開いた場合、ページの先頭が移動するのが一般的ですが
ページの特定部分に誘導したい場合があります。

今までは id が付いている html 要素にしかリンクを貼れませんでしたが
この機能の追加によりユーザが任意の場所にリンクを貼れるようになります。

将来的には[テキストを選択したあとにその部分へのリンクを作成するなどの機能](https://wicg.github.io/scroll-to-text-fragment/#user-sharing)も追加したいみたいです。
使えるようになると便利そうですね。

追記: Chrome に「選択箇所へのリンクをコピー」が追加されましたね。

# 構文

**注意:** 構文は将来変更されるかもしれません。

```text
#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
          context  |-------match-----|  context
```

# 追記もとい補足 2023/04/04

URL Scroll-To-Text Fragment | Can I use... Support tables for HTML5, CSS3, etc
https://caniuse.com/url-scroll-to-text-fragment

現在はほとんどのブラウザで動きます。
サポートしてないのは Firefox と古い Safari on iOS くらいです。

# 参考

[What exactly is the `#:~:text=` location hash in an URL? - Stack Overflow](https://stackoverflow.com/questions/62161819/what-exactly-is-the-text-location-hash-in-an-url)
[Scroll to Text Fragment - Chrome Platform Status](https://chromestatus.com/feature/4733392803332096)
[Text Fragments](https://wicg.github.io/scroll-to-text-fragment/)
【Vue.js】renderについて_その２

Vue.jsについて必要な知識をまとめました。
自身の備忘録として記載します。

#render_タグの属性
renderプロパティの第２引数に属性の値を設定するオブジェクトを用意することができます。
例えば下記のように設定を行うと、”Hello World”のフォントサイズが10px、フォントカラーが青になります。

```
var data = {
    message: 'Hello World'
};

var app = new Vue({
    el: '#app',
    data: data,
    render: (element)=>{
        return element("p", 
            {'style':'font-size:10pt; color:blue;'}, 
            data.message);
    }
})
```
#子ノードの組み込み
HTMLのタグを複数表示する際には第３引数（表示内容）をVNodeオブジェクトの配列にします。

```
関数（タグ名、{属性},[VNode,VNode,・・・・]）
```
以下、サンプルコードです。
`<ol>`と`<li>`を組み合わせてリストを表示させます。

```
var app = new Vue({
   el: '#app',
   data: data,
   render: (element)=>{
       return element("ol", 
       [
           element("li","test 1"),
           element("li","test 2"),
           element("li","test 3") 
        ]);
   }
})
```

#複雑なVNodeの作り方
リストの内容を操作するためには、リストに表示するコンテンツのテキストもVueでバインドしないといけないのでさらに複雑になります。

例えば下記のようなタグの構造にする場合

```
<div>
　<p>テスト</p>
　<ol>
　　<li>項目</li>
　　・・・・略・・・・
　</ol>
</div>
```
div,p,ol,liと４種類のタグのVNodeを作成し、それらを階層的に組み込みながら作成しないといけません。

考え方としては下記のように構成していきます。

```
１.<li>タグのVNodeを作る
２.それを子ノードに設定して、<ol>のVNodeを作る
3.<p>のVNodeと、<ol>のVNodeを子ノードに設定して、<div>のVNodeを作る。
```
コード上だとこのようになります。

```
render: (element)=>{
 var p = element("p", 
   {style:'font-size:20pt;'}, 
   data.message);
 var li = data.items.map(item=> element('li', test));
 var ol = element("ol", li);
 var div = element("div", [p, ol]);
 return div;
}
```

#参考URL
Vue.js & Nuxt.js超入門
https://www.amazon.co.jp/dp/4798056596?tag=maftracking247988-22&linkCode=ure&creative=6339https://www.amazon.co.jp/dp/4798056596?tag=maftracking247988-22&linkCode=ure&creative=6339
複数のCSVファイルを１つのExcelファイルに結合するVBScript

```VBScript:CSVs2Xls.vbs
'複数CSVファイルをファイル名順に１エクセルファイル化
'２ファイル目以降は見出し（１行目）除去
	Set FSO = CreateObject("Scripting.FileSystemObject")
	Call Main()
	Set FSO = Nothing
Sub Main()
	Set ARY = CreateObject("System.Collections.ArrayList") '複数ファイル名格納＆ソート用
	For Each ARG In WScript.Arguments
		If UCase(FSO.GetExtensionName(ARG)) = "CSV" Then ARY.Add ARG
	Next
	If ARY.Count = 0 Then
		MsgBox "このファイルアイコンにCSVファイル(複数可)をドロップして下さい。" , vbCritical : Exit Sub
	End If
	ARY.Sort : bleFirst = True : wAllLine = ""
	For Each FILE In ARY
		wAllLine = wAllLine & fGetLines(FILE , bleFirst) : bleFirst = False
	Next
	Set ARY = Nothing
	wLineArray = Split(wAllLine , vbCrLf)
	wRow = UBound(wLineArray) - 1 '最終行に改行があることを前提としている
	wCol = UBound(Split(wLineArray(0) , ","))
	Redim Preserve wRange(wRow , wCol)
	For i = 0 To wRow
		wLine = Split(wLineArray(i) , ",")
		For j = 0 To wCol
			wRange(i , j) = wLine(j)
		Next
	Next
	Set XL = CreateObject("Excel.Application")
	XL.Workbooks.Add
	Set BK = XL.Workbooks(XL.Workbooks.Count)
	With BK.Sheets(1)
		For j = 0 to wCol
			If Left(wRange(1 , j) , 1) = """" Then
				.Range(.Cells(1 , j + 1) , .Cells(wRow + 1 , j + 1)).NumberFormat = "@"
			End If
		Next
		For i = 0 to wRow
			For j = 0 to wCol
				wRange(i , j) = Replace(wRange(i , j) , """" , "")
			Next
		Next
		.Range(.Cells(1 , 1) , .Cells(wRow + 1 , wCol + 1)).Value = wRange
	End With
	XL.Visible = True
End Sub
Function fGetLines(argFile , argFirst)
	With FSO.GetFile(argFile).OpenAsTextStream
		If Not argFirst Then .SkipLine '１行目は見出しを前提とし、２ファイル目以降は見出し除去
		fGetLines = .ReadAll : .Close
	End With
End Function
```
複数のCSVファイルを１つのCSVファイルに結合するVBScript

```VBScript:CSVs2CSV.vbs
'複数CSVファイルをファイル名順に１ファイル化
'２ファイル目以降は見出し（１行目）除去
Set FSO = CreateObject("Scripting.FileSystemObject")
Call Main()
Set FSO = Nothing
Sub Main()
	Set ARY = CreateObject("System.Collections.ArrayList") '複数ファイル名格納＆ソート用
	For Each ARG In WScript.Arguments
		If UCase(FSO.GetExtensionName(ARG)) = "CSV" Then ARY.Add ARG
	Next
	If ARY.Count = 0 Then
		MsgBox "このファイルアイコンにCSVファイル(複数可)をドロップして下さい。" , vbCritical : Exit Sub
	End If
	ARY.Sort : bleFirst = True : wAllLine = ""
	For Each FILE In ARY
		wAllLine = wAllLine & fGetLines(FILE , bleFirst) : bleFirst = False
	Next
	wFileName = FSO.GetSpecialFolder(2) & "\" & FSO.GetTempName & ".csv"
	Set TMPFILE = FSO.CreateTextFile(wFileName) 
	TMPFILE.Write wAllLine
	TMPFILE.Close
	With CreateObject("Wscript.Shell")
		.Run "Notepad.exe " & wFileName, 5 '拡張子で起動するとエクセルが立ち上がるかもしれないのでメモ帳で開く
	End With
	MsgBox "一時フォルダにCSVファイルを作成したので、正式名で保存して下さい" , vbInformation
	FSO.DeleteFile wFileName 'メモ帳は使用中を制御しないのを利用し、表示させたまま削除する
	Set TMPFILE = Nothing : Set ARY = Nothing
End Sub
Function fGetLines(argFile , argFirst)
	With FSO.GetFile(argFile).OpenAsTextStream
		If Not argFirst Then .SkipLine '１行目は見出しを前提とし、２ファイル目以降は見出し除去
		fGetLines = .ReadAll : .Close
	End With
End Function
```
google analyticsの計測リクエスト

## 要旨
最近Qiitaを始めてGAの計測設定をした。GAの使用は初めてのため、忘れないうちにGAの計測リクエストをまとめておく。
※不明な箇所もあるため今後追加予定

QiitaではGAのアカウントIDを設定すればOKなため、今回の内容の知識は特に必要ないが、自分でブログサイトを運営しているような場合には知っていて損はないと思う。

## google analyticsの計測仕様(概要)
GAではサイトへトラッキングコードという名のJavaScriptの計測タグ(JSタグ)を設置して、サイトアクセスを計測している。
が、厳密にはサイトへ設置したJSタグを実行後は下記フローで計測される。

1. サイトに設置したJSタグが実行されGAサーバへHTTPリクエストが送信される
2. そのレスポンスとしてJSコードが返却される（下図参照）
3. 返却されたJSコードによって閲覧ページのURLやリファラやUA(ユーザーエージェント)などの詳細情報を取得し、アクセス解析用のサーバへHTTPリクエストが送信される。
4. そのレスポンスとして1×1の透明GIFが返却される。(昔読んだ初級ウェブ解析士という資格のテキストでは「透明GIF」と書いてあった)

#### JSタグ実行・JSコード返却の内容

![ga.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659921/37e505ba-b53a-9dc4-b105-def0478651ab.jpeg)


## HTTPリクエストの状況を確認
上記の3番のHTTPリクエストでアクセス解析に必要な情報を取得おり、そのリクエストは下記のようにして確認できる。
※「collect」という文字列でフィルタすれば確認できるが、Qiitaでは自分のGAのアカウントID以外のリクエストもあるため、恐らくQiitaの管理者用にも計測しているものだと推測している。

![ga_request.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659921/68cf9aac-ff27-1e00-2c2d-dd74865e5973.jpeg)

Qiitaでは問題ないと思うが、自分のブログサイト等で上記リクエストが無い場合、正常に計測できていないと考えられる。

## HTTPリクエストの中身を確認
GAのHTTPリクエストのフォーマットは下記となる。

```
https://www.google-analytics.com/collect?・・・
```
collect?以降のパラメータに計測に必要な情報を&でつないで付与してGAサーバへ飛ばしている。
各パラメータの内容は下表の通り。
※色々説明しておきながら申し訳ないが、GAは全然使ったことが無いためまだブランクが多い。わかり次第追記する予定。

|パラメータ | 内容           |備考        |
|:---------|:---------------|:----------|
|v         |-               |調査中      |
|_v        |-               |調査中      |
|a         |-               |調査中      |
|t         |-               |調査中      |
|ni        |-               |調査中      |
|_s        |-               |調査中      |
|dl        |閲覧ページURL    |            |
|ul        |言語             |           |
|de        |文字コード       |            |
|dt        |ページタイトル   |調査中      |
|sd        |-               |調査中      |
|sr        |-               |調査中      |
|vp        |-               |調査中      |
|je        |-               |調査中      |
|ec        |-               |調査中      |
|ea        |-               |調査中      |
|el        |-               |調査中      |
|ev        |-               |調査中      |
|_utma     |-               |調査中      |
|_utmz     |-               |調査中      |
|_utmht    |-               |調査中      |
|_u        |-               |調査中      |
|jid       |-               |調査中      |
|gjid      |-               |調査中      |
|cid       |クライアントID   |            |
|uid       |ユーザID         |           |
|tid       |アカウントID     |           |
|_gid      |-               |調査中      |
|cd1       |-               |調査中      |
|cd4       |-               |調査中      |
|cd5       |-               |調査中      |
|gtm       |-               |調査中      |
|z         |-               |調査中      |


## まとめ
上記仕組みがわかると、どのようにHTTPリクエストを送信すればどのような計測ができるかがわかる。
そのため今後詳細を追記する予定。
もしご存知の方がいれば教えて頂けると大変助かります。
YAMLについての基本知識 

#YAMLとは 
YAMLは構造化データを人間の目にわかりやすいように表現できるように設計された言語です。
YAMLは「YAML　Ain’t Markup Language」（YAMLはマークアップ言語ではない）の頭文字を取っています。名前の定義の中に名前が入っている珍しいネーミングですね。カッコよくいうと再帰的に定義された頭文字です。
XMLなどのマークアップ言語と同じく構造化データを表現する言語の一つですが、YAMLは自身の名前でマークアップ言語ではないよ！と言っているように、マークアップ言語の課題であった、読みにくさを払拭してくれます。
拡張子は.ymlまたは.yamlを使います。

#YAMLの文法
それではさっそくYAMLの基本的な文法を紹介していきたいと思います。

YAMLを理解する上でまずはじめに押さえておきたい点として、YAMLはスカラー、シーケンス、マッピングといったデータ形式をインデントで表現するのを基本としている点です。

こちらのサイトでYAMLをJSONなどに変換できるので色々遊びながらやっていくといいと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332907/6a0861a6-e5fa-ff5c-0996-eed66a66110a.png)
https://codebeautify.org/yaml-to-json-xml-csv

**スカラー**
YAMLでは、数字や文字列、真偽値など基本的な値を表現できます。

```yaml

post-counts: 3
author: "tanaka"
rating: 3.2
active: true

```
文字列をダブルクオートで囲みましたが、

```yaml

author: tanaka
```
のように省略してもOKです。

**シーケンス（配列・リスト）**
YAMLでは要素の集合をシーケンスで表現できます。

```yaml

languages:
  - Ruby
  - JavaScript
  - PHP
  - SQL
```
要素はインデント、ダッシュ（-)、スペースの後に続けて書きます。

**マッピング（ハッシュ、辞書）**
YAMLではkey:value型のコレクションをマッピングとして表現できます。

```yaml

person:
  name: tanaka
  age: 38
  height: 172
  weight: 70
```
コロン（:）のあとのスペースは必須です！

**コメント**
　#から始める文章はコメントとして扱われ無視されます。

```yaml

# 田中さんに関する情報
name: tanaka
```

**シーケンス、マッピングのネスト**
シーケンスの中にマッピングをネストしたり、マッピングの中にシーケンスをネストしたりすることができます。

```yaml

people:
 - name: tanaka
   age: 38
 - name: suzuki
   age: 26
 - name : sato
   age: 58
```
JSON形式に変換すると以下のようになります。

```json

{
    "people": [
        {
            "name": "tanaka",
            "age": 38
        },
        {
            "name": "suzuki",
            "age": 26
        },
        {
            "name": "sato",
            "age": 58
        }
    ]
}
```

**インライン記法**
マッピングやシーケンスをJSONのような形式でインラインに記述することができます。

```yaml

languages: [Ruby, PHP, JavaScript]
```

```yaml
student: {name: tanaka, age: 14}
```
それぞれJSONに変換すると以下のようになります。

```json
{
    "languages": [
        "Ruby",
        "PHP",
        "JavaScript"
    ]
}
```

```json
{
    "student": {
        "name": "tanaka",
        "age": 14
    }
}
```

**マルチドキュメント**
YAMLでは一つのファイルに複数のドキュメントを区切って表現することができます。区切り文字として３つのダッシュ(—)を使います。

```yaml

people:
 - name: tanaka
   age: 38
 - name: suzuki
   age: 26
 - name : sato
   age: 58

---
languages:
  - Ruby
  - JavaScript
  - PHP
  - SQL
```

**特殊文字の扱い**
YAMLでは、　 [] {} : > |.　などを文字列としてそのまま使うとエラーになります。これらの文字を使いたいときはクオートで囲みましょう。

```yaml
greeting: "hello>world."
```

**改行を含む文字列**
改行を含む文字列を扱いたいときは　|　を使います。

```yaml
introduction:　|
  YAML
  xml
  JSON
```
JSONに変換すると以下のようになっています。

```json
{
    "introduction": "YAML\nxml\nJSON\n"
}
```

#Resource
https://tech.windii.jp/tool/yaml
Docker上で、vcgencmdを使う

raspberry Piのクロックや電圧などを取得できるコマンド`vcgencmd`をDocker上で使用する方法を解説します。

Dockerのイメージは[resin/rpi-raspbian](https://hub.docker.com/r/resin/rpi-raspbian/)を使用します。
以下のコマンドでDockerを立ち上げます。

```
docker run -it --device /dev/vchiq--rm resin/rpi-raspbian /bin/bash
```

立ち上げ後のコンテナ内に、`vcgencmd`コマンドがないため、以下のコマンドでインストールをします。

```
apt-get update && apt-get install libraspberrypi-bin -y \
    --no-install-recommends && apt-get clean && rm -rf /var/lib/apt/lists/*
```

後は、`vcgencmd measure_temp`コマンドでコンテナ上で、
RaspberryPi本体上の温度センサー情報を得ることができることを確認してください。

上記に気を付けてDockerfileを作れば、繰り返す必要がなくなります。

# 参考
vcgencmd
https://www.raspberrypi.org/documentation/raspbian/applications/vcgencmd.md
Docker Raspberry Pi Status
https://github.com/toschoch/docker-rpi-status
モチベーションで変わる成果　職場の活性化への気づき

以下のようにモチベーションの良し悪しで成果は大きく異なります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621379/ce162bdc-c7d8-7ae0-f394-043990ed85d8.png)　

現場では精神論で頑張れ！！と鼓舞するより、現場のモチベーションが高揚するようにマネジメントすることが肝要です。
精神論は賢いやり方ではありません。

（出典：日経ものづくり　トヨタで学んだ心　伝承塾：リーダ編より）
[Swift] コードで作成したUITextFieldに余白を作る

## はじめに
掲題の通りに、UITextFieldに余白を作る方法。

UITextFieldを継承したカスタムクラスを作成して、余白を作るとという記事が多かったがもっと簡単な物があったので備忘録的に残す。

## 以下を設定するだけ

```swift
textField.leftView = UIView(frame: CGRect(x: 0, y: 0, width: 10, height: 0))
// widthはお好みで設定してください
textField.leftViewMode = UITextField.ViewMode.always
```

以上！！！
permutationメソッドを使って初期設定ユーザー達を全員相互フォロー関係にする

## はじめに
初めてqiitaに投稿します初学者と申します。
文言に誤り等がありましたらご指摘いただけますと幸いです。

作成中の転職活動用ポートフォリオにて、初期データのユーザー達をseeds.rbで相互フォロー関係にさせておりました。
とある企業のエンジニア様からwantedlyにてコードレビューを含んだ返信をいただき、
このseeds.rbに関して「ロジックが異常に分かりにくい」と指摘を受けました。

## 修正前のseeds.rb
下記のコードで初期設定ユーザー達を相互フォロー関係にさせておりました。

```db/seeds_relationships.rb
19.times do |n| # 19回処理を繰り返す
  users = User.all　# 変数usersに全てのUserオブジェクトを代入
  user = users.find(n + 1) # 変数usersから指定したid（n+1）のUserオブジェクトを変数userに代入
  following = users[0..18] # 変数followingに配列usersの１~１9番目までのUserオブジェクトを代入
  following.shift(n + 1) # shiftメソッドで配列followingの先頭から(n+1)つの要素を取り除く
  followers = users[0..18] # 変数followersに配列usersの１~１9番目までのUserオブジェクトを代入
  followers.shift(n + 1) # shiftメソッドで配列followersの先頭から(n+1)つの要素を取り除く
  following.each { |followed| user.follow(followed) } # userが配列followingに含まれる各ユーザー(followed)をフォローする
  followers.each { |follower| follower.follow(user) } # 配列followersに含まれる各ユーザー(follower)がuserをフォローする
end
```
一目でわかると思いますが・・・異常な分かりづらさです。

## Array#permutationを使いなさい
そのエンジニア様からは上記のように指摘を受け、
permutationとは何だろう？と思い、翻訳してみると「順列」という意味であることが分かりました。

### 順列とは
> 異なるn個の中から異なるr個を取り出して１列に並べる数のことです。
[【高校数学】1から分かる順列と組み合わせの違い](https://juken-mikata.net/how-to/mathematics/permutation.html)

AB,BA,BC,CB,AC,CAみたいなヤツのことですね（）。

###  順列を作成する
```
[1, 2, 3].permutation do |x|
  p x
end
```
配列の中の要素から下記のような順列が作成されます。

```
[1, 2, 3]
[1, 3, 2]
[2, 1, 3]
[2, 3, 1]
[3, 1, 2]
[3, 2, 1]
```
permutationの後ろに(n)とすることで、配列の中から異なるn個の要素を取り出して並べることができます。

```
[1, 2, 3].permutation(2) do |x|
  p x
end
```
```
[1, 2]
[1, 3]
[2, 1]
[2, 3]
[3, 1]
[3, 2]
```
引用元：[順列 (permutation) を作成する](https://maku77.github.io/ruby/number/permutation.html)

## 修正後のseeds.rb
```db/seeds_relationships.rb
users = User.all.to_a
users.permutation(2) do |n|
  n[0].follow(n[1])
end
```
1番目のユーザーが2,3,4,5…番目のユーザーをフォロー、
2番目のユーザーが1,3,4,5…番目のユーザーをフォロー、
3番目のユーザーが1,2,4,5…番目のユーザーをフォロー、となり、
permutationメソッドを使って初期設定ユーザー達を全員相互フォロー関係にすることができました。

## 【追記】もっと見やすくseeds.rb
```db/seeds_relationships.rb
users = User.all.to_a
users.permutation(2) do |user1, user2|
  user1.follow(user2)
end
```
コメントをいただき修正しました。
可読性がかなり良いですね！
## 環境
- Ruby 2.6.5
- Rails 5.2.4.3
モチベーションを維持するために　職場活性化の基本

『モチベーション』を辞書で引くと**「動機を与えること, 動機づけ，動機づけ，理由，刺激，〔心〕（行動の）動機づけ」**と解説されています。さらに、『動機』を広辞苑で引いてみると**「人がその行動や行為を決定する意識的または無意識的原因。特に目的を伴う意識的な欲望を指す。（以降略）」**と書かれています。
『や（遣）る気』を広辞苑でひいてみると**「物事を積極的に進めようとする目的意識」**と解説しています。
この辞書での解説を基本に皆さんの様々な経験・状況に照らし合わせて『モチベーション・やる気』が高揚する（した）場合とそうでない場合を考えてみて下さい。

モチベーションは人の感情です。それは自責・他責で感情は日々、時間、場合によっては秒単位で変化します。チームで仕事を遂行する場合、お互いのモチベーションに関心を持つだけでなく、それを良い状態に維持するようにしなければなりません。

これまでの、組織や現場支援の経験から『モチベーション・やる気』を良い状態で維持する為に、次の8つの事に注意する事が重要であることが分かってきました。

**１．目的**
　　何を、何時までに、どの様に、何々する・・・・と明確になっている事。

**２．仲間**
　　一人より二人、二人より三人と、共通の目的を持つ仲間が大切です。挫折しそうになった時に、仲間が居れば非常に心強い助けとなります。

**３．時間**
　目的を達成するまでの時間です。適度な長さが必要です。長すぎる場合は、中継ポイント（マイルストーン）を設けます。

**４．理解者・支援者**
　『モチベーション・やる気』を持った人（チーム）を理解し、様々な支援をする人が必要です。特に個人だけで何でも出来る領域は少ないです。外部の良き理解者・支持者がいる事で漠然とした不安や後戻りしたい気持ちを廃除できます。

**５．適度な中継ポイント（マイルストーン）**
　全てに必要ではありませんが、目的達成までの道程が長く時間が掛る場合には特に有効です。中継ポイントを仮の目的達成ポイントとして行動していいきます。中継ポイントは一つとは限りません。効果的に複数置くことも重要です。

**６．適度な休息（振返り）**
　モチベーション・やる気が高いからといって張り切り過ぎると、疲労してしまします。また達成までの時間が長ければ不安も出てきます。その為には適度な休息をとり、これまでの道程を振返るのも必要です。特に中継ポイントを設けた時は振返りや休息を兼ねたイベント（発表会・パーティ等）を行うと効果があります。

**７．失敗を恐れない気持ち**
　ノー天気を指しているのではありません。十分なリスクを認識した上で行動を行う事が重要です。しかし、目的達成の成功イメージが弱過ぎ、認識したリスクがかえって失敗を誘引する場合もあります。中継ポイントを上手く利用し、修正できるという心持とが大切です。それと、正解を追い求めるのではなく、出来ることをコツコツと積み重ねる姿勢も必要です。

**８．常に明るい心（明るく振る舞う）**
　明るい事は何よりも良い事です。以前（社会人になって数年過ぎた頃）ある疲弊したプロジェクトに途中から参加したことがありました。全員毎日暗い表情で進捗会議も完全暗黒会議でした。いやだなと思いつつでも明るく振る舞っていました。度重なる計画変更の末、プロジェクト自体走り始め何とか完了し、打ち上げ会の席上で、そのプロジェクトで私が最も苦手としていたPMからこんな言葉をもらいました。『おまえは、プロジェクト参加時から異常に明るく振る舞って、笑い声まで出していた。その当時、俺はお前をヘラヘラした軽薄な奴と思っていたが、プロジェクトを終えてみるとお前の振舞の良さが理解できた。俺には無理かもしれないが、羨ましいよ！！』この言葉をもらってから始終一貫して明るく振る舞う様にしています。私の様に振る舞えなくても、心は明るく保って下さい、**暗くなると思考能力も影響されてしまいます。『モチベーション・やる気』を持ち行動している人に暗い心の方はいないと思いますが・・・・（悪へのモチベーション・やる気は論外ですので・・・）**

以上の8項目が最低限必要だと日頃思っています。
【方法論】選択に関する方法論

私たちはたくさんの選択に直面する。
大きな選択っていうと、進学校はどの学校にすべきか？どの会社に就職すべきか？
だれと結婚すべきかか？どの会社へ転職すべきか？
起業すべきか？などなどあります。

正しい選択するのに、少なくとも間違った選択にしないのに、
どうすればいいかについて考えてみた。

その肝となるのは「条件」です、どんな条件に満たせば、選択していいかを決める。
所謂、条件で選択肢を絞り込むことだ、
まあ、学校でずっと使っている手法なんですが、
社会人になると、その条件は当たられないので、いかに正しい条件を見つかるかは重要となる。

その条件の見つかり方としては、
　Step1:自分が思いづくすべての条件をリストアップする、
　Step2:自分に言い聞かせる、これらの条件よりもっと重要な条件はないか？
　Step3:Step2を繰り返し、最終的に最も重要な条件を見つかるまで繰り返し
もちろん、これは現段階最も重要な条件に過ぎないですが、これで十分です。
これをやることにより、少なくとも、最悪な選択にはならないし、自分に悔いが残る選択にはならないはず。。

注意点として、重要な条件がありすぎないように、どっちも重要な条件ばっかり作ってしまうと、選択肢がなくなってしまう、
例えば、結婚相手を選ぶとき。。。
SQL Server CPU負荷が高いSQLを検出するためのSQL

このまま動作します。
コピぺ、編集して利用するためのSQLです。
自由に使って頂いて構いません。

SQLServerにおいて、データベースサーバのCPUに高い負荷をかけているSQLを見つける用途で使用できます。

#SQLの実行結果の見た目
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666335/05fec733-98e8-129b-5dca-a7c6dca42d88.png)


#CPU負荷が高いSQLを検出するためのSQL

```sql
SELECT
    TOP 50 --上位50件
    [dm_exec_query_stats].[total_worker_time] / [dm_exec_query_stats].[execution_count] / 1000 AS [平均CPU時間(ミリ秒)],
    [dm_exec_query_stats].[max_worker_time] /1000 AS [最大CPU時間(ミリ秒)],  
    [dm_exec_query_stats].[total_worker_time] / 1000 AS [合計CPU時間(ミリ秒)],
    [dm_exec_query_stats].[total_logical_reads] / [dm_exec_query_stats].[execution_count] AS [平均読取数],
    [dm_exec_query_stats].[max_logical_reads] AS [最大読取数],  
    [dm_exec_query_stats].[total_logical_reads] AS [合計読取数],
    [dm_exec_query_stats].[last_execution_time] AS [最終実行時刻],
    [dm_exec_query_stats].[execution_count] AS [実行回数],
    [dm_exec_sql_text].[text] AS [SQL(コメントあり)]

FROM
    [master].[sys].[dm_exec_query_stats] [dm_exec_query_stats]
    CROSS APPLY [master].[sys].[dm_exec_sql_text]([dm_exec_query_stats].[sql_handle]) [dm_exec_sql_text]

WHERE
    [dm_exec_sql_text].[text] NOT LIKE '%dm_exec_query_stats%' --本クエリを結果から取り除く。

ORDER BY
    [dm_exec_query_stats].[total_worker_time] / [dm_exec_query_stats].[execution_count] DESC --一回あたりのCPU時間が長い順に並べ替える。
;
```

SQL Server 2014	12.0.x.xで動作確認をしています。
WindowsでDockerにてmongoDB環境を構築する囚われた人の備忘録

# 概要

以下のようにやったら、mongoDBが動かなかったため、その備忘録。

```yml
version: "2"
services:
  mongo:
    image: mongo
    restart: always
    environment:
      MONGO_INITDB_ROOT_USERNAME: root
      MONGO_INITDB_ROOT_PASSWORD: root
    volumes:
      - ./db:/data/db
  mongo-express:
    image: mongo-express
    restart: always
    ports:
      - 8081:8081
    environment:
      ME_CONFIG_MONGODB_ADMINUSERNAME: root
      ME_CONFIG_MONGODB_ADMINPASSWORD: root
```

# 対策

ボリュームをホストであるWIndowsのディレクトリにマウントしようとしていたのが問題だったようです。ボリュームを仮想環境側のボリュームにマウントしたら上手くいきました。そこからまたマウントしたらホスト側にマウントしたらいいんですかね。そこら辺は試してないので、分からないですが。

```yml
version: "2"
services:
  mongo:
    image: mongo
    restart: always
    environment:
      MONGO_INITDB_ROOT_USERNAME: root
      MONGO_INITDB_ROOT_PASSWORD: root
    volumes:
      - mongodata:/data/db # ここに注目
  mongo-express:
    image: mongo-express
    restart: always
    ports:
      - 8081:8081
    environment:
      ME_CONFIG_MONGODB_ADMINUSERNAME: root
      ME_CONFIG_MONGODB_ADMINPASSWORD: root
volumes: # ここに注目
  mongodata:
```

# 参考

- Windows mounting /data/db：[https://github.com/docker-library/mongo/issues/74](https://github.com/docker-library/mongo/issues/74)
Quillでペースト時にスクロール位置がジャンプしてしまう問題

エディタライブラリのQuillで、テキストのペースト時などにスクロール位置がジャンプしてしまうことがある。
https://github.com/quilljs/quill

# 原因
どうやら、ペースト操作時にエディタがフォーカスを一瞬失うのが原因らしい。
テキストカラーなどの、ピッカー系の操作でも同じ現象が起こることがある。

# 解決策
この問題は、github上でも活発に議論されているようだが、私としてはこの方法がベストな解決策だと思う。

Quillの初期化時のオプションに `scrollingContainer: document.documentElement` を指定する。

```js
const editor = new Quill('#editor', {
  modules: {
    toolbar: ['bold', 'italic', 'underline', 'strike'],
  },
  scrollingContainer: document.documentElement,
  theme: 'bubble'
});
```

# 参考
いくつか他の対応策も提示されています。
https://github.com/quilljs/quill/issues/1374
Laravel マイグレーション デフォルト値の設定 簡易版

# 目的

- マイグレーションファイルでのデフォルト値の設定方法を簡易的にまとめる

# 実施環境

- ハードウェア環境

| 項目 | 情報 |
| --- | --- |
| OS | macOS Catalina(10.15.5) |
| ハードウェア | MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports) |
| プロセッサ | 2 GHz クアッドコアIntel Core i5 |
| メモリ | 32 GB 3733 MHz LPDDR4 |
| グラフィックス | Intel Iris Plus Graphics 1536 MB |

- ソフトウェア環境

| 項目 | 情報 | 備考 |
| --- | --- | --- |
| PHP バージョン | 7.4.3 | Homwbrewを用いて導入 |
| Laravel バージョン | 7.0.8 | commposerを用いてこちらの方法で導入→[Mac Laravelの環境構築を行う](https://qiita.com/miriwo/items/adaaaeecae69d6392e08) |
| MySQLバージョン | 8.0.19 for osx10.13 on x86_64 | Homwbrewを用いてこちらの方法で導入→[Mac HomebrewでMySQLをインストールする](https://qiita.com/miriwo/items/ef6a064bc545fbea29d9) |

# 記載例

- 下記の様に記載することで当該カラムのデフォルト値を指定することができる。

    ```php
    $table->データ型('カラム名', オプション)->default(デフォルト値に設定する文字列や値);
    ```
【無料でクラウド開発環境】code-serverでvscodeの開発環境を構築する方法

こんにちは、みきおです。
今回は、vscodeのクラウド開発環境をcode-serverで構築する方法を紹介いたします。これでどんな貧弱マシンからでもchromeが動きさえすれば開発できます。ちなみにiPadからでも開発できるようです。試したことはないです。iPadください。

# 対象者
- vscodeを知っている人
- code-serverを知らない人
- code-serverを知っているけど構築していなかった人
- どのマシンからでも同じ開発環境が欲しい人

# はじめに
code-serverのバージョン2系ではインストールからhttpsでの公開までが大変でした。しかし構築したことによってノートPCからの突発的な修正や隙間時間での開発がはかどりました。
今回、code-serverをバージョン2.1692から3.4.1に上げてみた際に、インストールの手順が簡単になっていたので紹介します。
ちなみに英語が別に苦手じゃない方は公式の[Git](https://github.com/cdr/code-server)読むだけでわかるかと思います。本当に簡単になりました。[^1]
[^1]: むしろ以前がつまりどころしかなかったです。Docker版のドキュメントばかりでしたし。

# 1. サーバーを用意する
gcp でも aws でも良いですが、永年無料、東京リージョン、メモリ1GBということでoracle always freeのコンピュートをおすすめします。
サーバーを取得する方法はググればサービス開始時の記事が結構でていますが、別で投稿しようかと思っています。

# 2. code-serverをインストールする
ほぼほぼ[公式](https://github.com/cdr/code-server)の和訳になります。
可能な限りrootユーザーで作業してください。
私は勘違いして別ユーザーで作業をしまくって躓かなくてよいところで躓きまくりました。

## インストール
インストールプロセスを確認します。別に確認したくない人は飛ばしてください。

```sh
curl -fsSL https://code-server.dev/install.sh | sh -s -- --dry-run
```

インストールします。

```sh
curl -fsSL https://code-server.dev/install.sh | sh
```


## セキュリティ周りの設定
SSH転送は需要があれば追記したいと思います。
下記好きな方で設定してください。
### ドメインがあるならLet's Encrypt

すでにNginxなどを使っている方は適宜読み替えてください。

#### caddyのインストール

```sh

echo  " deb [trusted = yes] https://apt.fury.io/caddy/ / " \
     | sudo tee -a /etc/apt/sources.list.d/caddy-fury.list
sudo apt update
sudo apt install caddy
```


#### 設定の変更
/etc/caddy/Caddyfileを書き換えます。

```vim:/etc/caddy/Caddyfile
mydomain.com
reverse_proxy 127.0.0.1:8080
```

<details><summary>ドメインがないならオレオレ証明書</summary><div>
### ドメインがないならオレオレ証明書
#### code-server構成ファイルの変更

code-serverの証明書に関わる設定を置き換えます。

```sh
sed -i.bak 's/cert: false/cert: true/' ~/.config/code-server/config.yaml
```

デフォルトのアドレスとポートを127.0.0.1:8080から0.0.0.0:443に変更します。

```sh
sed -i.bak 's/bind-addr: 127.0.0.1:8080/bind-addr: 0.0.0.0:443/' ~/.config/code-server/config.yaml
```

コードサーバーが443ポートを使えるようにします。 

```sh
sudo setcap cap_net_bind_service=+ep /usr/lib/code-server/lib/node
```

#### code-serverを再起動

```sh
systemctl --user restart code-server
```

</div></details>

# 3. chromeのアプリモードでアクセスする

chromeをアプリモードでアクセスすることでショートカットがバシバシいけます。

起動したcode-serverにchromeでアクセスし、右上の「︙」をクリックして「code-server」をインストール
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662111/b2f4e042-1122-1b08-2bfc-82e4454b8d51.png)

今まで別の手順[^2]を踏んでいましたが、アプリ化が簡単になっていました。(chromeバージョン: 83.0.4103.116で確認)

[^2]: 右上の「︙」をクリックして、「その他のツール」> 「ショートカットを作成...」 > 「ウィンドウとして開く」にチェックして追加


ログイン画面
![ログイン画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662111/73c0e2dc-01f7-6a75-9aa6-bc24e3dd78af.png)

開発画面
![開発画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662111/33bbc6b0-be8e-11a0-631e-3a991d9e2c65.png)


以上です。

# おわりに

個人開発のハードルが年々下がってきています。
だからなにって感じかもしれませんが、開発者の中で個人開発がもっと一般的なものになっていけばいいなって思っています。
勉強にもなるし、開発者にとってなんとなくでも小さな世界からいい変化が起きて、その積み重ねで明るい未来がやってきたらいいなって思ってます。

さらっと出来すぎて不安になるくらいなのですが、もしできなかったよ、躓いたよって方がいましたら教えてください。
検証して修正します。
というのも、バージョン2を入れた際にubuntuユーザーかつサービスとしての起動はrootという曲がった方法でインストールしてしまったため、今回の3を入れた際にもサービスとパス周りの設定を結構な時間をかけていじりました。なので、3を0から入れるときはこんな簡単なの？って感じてしまっています。

caddy以外のところはcentosでも基本的に変わらないです。
3分間ネットワーク備忘録 第７回

## 概要
引き続き[３分間ネットワーク](http://www5e.biglobe.ne.jp/aji/3min/)について、
学習の備忘録を書いていきます。


今回は、
- [第１６回](http://www5e.biglobe.ne.jp/aji/3min/16.html)
- [第１７回](http://www5e.biglobe.ne.jp/aji/3min/17.html)
- [第１８回](http://www5e.biglobe.ne.jp/aji/3min/18.html)


### 振り返り
前回の[第１５回](http://www5e.biglobe.ne.jp/aji/3min/15.html)で、
イーサネットは全てのノードへフレームを送りつける
`ブロードキャスト型`であり、`CSMA/CD `　でアクセス制御を行っている。
このとき、`同軸ケーブル`を用いるとトランシーバのような`半二重通信方式`になり、
衝突のしやすい構成となってしまう。

というようなことを勉強しました。

[第１６回](http://www5e.biglobe.ne.jp/aji/3min/16.html)では、
イーサネット以外のLANの規格について書かれています。
主に、
- `IEEE802.5`
- `FDDI`

についてです。

#### IEEE802.5
`IEEE802.5` は、`トークンパッシング`と呼ばれる手法を持って、堅固な通信を行います。
リング型トポロジーを用い、トークンを円状に回しています。
このトークンはフリートークンと呼ばれていますが、誰かが誰かにデータを送信したい時、
そのトークンの後ろにデータをくっつけ、宛先MACを記載することで、
`フリートークン`を`ビジートークン`に変更します。

他の人たちは常にトークンをチェックしており、もし`ビジートークン`が回ってきた場合、
それの宛先MACアドレスが自分のものになっていないかチェックし、
もし自分宛ならデータを上位レイヤに受け渡します。そして`受診済み`としてトークンをまた回します。

送信者はトークンが`受診済み`となっていたら、それを元の`フリートークン`に戻します。

このように`衝突がなく、相手が受信したかどうかわかる`ため、
比較的堅牢な通信であることが`IEEE802.5`の特徴です。


#### FDDI
`FDDI`は、光ファイバと二重リング型トポロジを用います。
二重型リングはそれぞれ`プライマリリング`、`セカンダリリング`と呼ばれ、
二重リングによる`高い信頼性`、`高データ転送速度`を売りとしています。

しかしながら、高価格であることが欠点となります。


### スイッチとブリッジ
[第１７回](http://www5e.biglobe.ne.jp/aji/3min/17.html)及び[第１８回](http://www5e.biglobe.ne.jp/aji/3min/18.html)では、レイヤ２の`ネットワーキングメディア`である、
`スイッチ`と`ブリッジ`について理解を深めることが目的です。

#### ブリッジ
基本的に、`ブリッジ`は
`LANとLANを繋ぎ`、各LANにあるMACアドレスを経験によって記憶し、それによってどこにデータを送信するか
判断をする、`選択的ハブ`である、という説明がわかりやすいかと思います。
つまり、複数のLANの間で、どのデータをどのLANに流すかの関所的な役目を担い、フィルタリングを行います。


#### スイッチ
スイッチはMACアドレスだけでなく、`ポート`まで指定してくれます。
スイッチが、ホストのポートとポートを接続している時、このホスト間では送信しながら受信できる、という
`全二重通信`を行うことができます。また、`バッファメモリ`を使い、仮にスイッチの前後でデータの流れる速度に
違いがある時、一方でデータを受信しつつ`バッファ`にデータを`貯蔵`し、他方の伝送速度に適した量を少しずつ転送する、
というようなこともできます。

このような`バッファリング`を行う方式のことを`ストアアンドフォーワード方式`と呼びます。

### まとめ

レイヤ２の`ネットワーキングメディア`である`スイッチ`と`ブリッジ`は、
LAN内の`衝突ドメイン`を`関所`の役割によって`分ける`ことができます。
しかしながら、全員に送る方式である`ブロードキャスト方式`の通信に対しては衝突ドメインを分けることはできませんし、
フレームの読み取りに時間がかかるので、ある程度の遅延を起こしてしまう、などの欠点も存在します。



今回はこの辺で、

おわり。
React Native で Pickerのitemをmap()で簡潔に実装する方法

## やりたかったこと
React Native の [Picker](https://reactnative.dev/docs/picker) の item を`map()`で簡潔に実装したい

## 間違った例

```react
export default PickerSample = () => {
  const [number, setNumber] = useState(0);
  const numbers = [0, 1, 2, 3, 4, 5];  // <Picker.Item> に表示させたい値の配列

  return (
    <Picker
      style={styles.picker}
      itemStyle={styles.pickerItem}
      selectedValue={number}
      onValueChange={(itemValue) => setNumber(itemValue)}
    >
      {numbers.map((number, index) => {
        return (
          <Picker.Item
            key={index}
            label={number}
            value={index}
          />
         );
      })}
    </Picker>
  )
}
```

上記のコードで実行した結果、以下のエラーが出た


```zsh
undefined is not an object (evaluating 'child.props.value')
```

## 解決方法

色々迷走した末...
`<Picker.Item>`の`label`に`toString()`を指定するだけでよかった。

```react
export default PickerSample = () => {
  const [number, setNumber] = useState(0);
  const numbers = [0, 1, 2, 3, 4, 5];  // <Picker.Item> に表示させたい値の配列

  return (
    <Picker
      style={styles.picker}
      itemStyle={styles.pickerItem}
      selectedValue={number}
      onValueChange={(itemValue) => setNumber(itemValue)}
    >
      {numbers.map((number, index) => {
        return (
          <Picker.Item
            key={index}
            label={number.toString()}  // ここに追加
            value={index}
          />
         );
      })}
    </Picker>
  )
}
```

## 完成物
問題なく動きました
![picker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400431/1a0f17b8-1289-690f-7dce-bd30db69004b.gif)
Step Functions Local と AWS SAM CLI Local を使ってローカルで Step Functions の動作確認をする

[Step Functions および AWS SAM CLI Local \- AWS Step Functions](https://docs.aws.amazon.com/ja_jp/step-functions/latest/dg/sfn-local-lambda.html) をもとに、 Step Functions Local の Docker 版を使って動かしたら動かなかったので、解決方法をメモしておきます。

## Docker 版の Step Functions Local は設定ファイルが必要
[Step Functions Local 設定のオプション \- AWS Step Functions](https://docs.aws.amazon.com/ja_jp/step-functions/latest/dg/sfn-local-config-options.html) に記載の通り、 Docker 版の場合はこの設定ファイルを作成し、 `docker run` コマンド実行時に渡してあげる必要があります。

上記サンプルを動かす場合、アカウントや認証情報はダミーのものを使用するので、最低限 `LAMBDA_ENDPOINT` が設定されていれば大丈夫です。

## LAMBDA_ENDPOINT の設定値
このサンプルでは、ローカルマシン内で AWS SAM CLI Local と Step Functions Local を両方立ち上げ、 Step Functions の実行コマンドを実行します（つまりターミナルのタブが3つ必要）。

このとき、 Step Functions Local の `LAMBDA_ENDPOINT` に、 jar 版と同様 `http://localhost:3001` を指定すると、コンテナ内を見に行ってしまうため、以下のようなエラーが出てしまいます。

```
2020-07-06 09:14:33.725: CreateStateMachine => {...}
...
2020-07-06 09:14:44.416: arn:aws:states:us-east-1:123456789012:execution:HelloWorld:f0114461-f6fe-49b7-8cf5-24600c422160 : {"Type":"LambdaFunctionFailed","PreviousEventId":4,"LambdaFunctionFailedEventDetails":{"Error":"Lambda.SdkClientException","Cause":"Unable to execute HTTP request: Connect to localhost:3001 [localhost/127.0.0.1] failed: Connection refused (Connection refused)"}}
2020-07-06 09:14:44.426: arn:aws:states:us-east-1:123456789012:execution:HelloWorld:f0114461-f6fe-49b7-8cf5-24600c422160 : {"Type":"ExecutionFailed","PreviousEventId":5,"ExecutionFailedEventDetails":{"Error":"Lambda.SdkClientException","Cause":"Unable to execute HTTP request: Connect to localhost:3001 [localhost/127.0.0.1] failed: Connection refused (Connection refused)"}}
```

Docker for Mac を利用している場合、[マニュアル](https://docs.docker.com/docker-for-mac/networking/#i-want-to-connect-from-a-container-to-a-service-on-the-host)に記載がある通り、 `host.docker.internal` というドメインでホストにアクセスすることが可能です。

したがって、 `aws-stepfunctions-local-credentials.txt` には以下のように記載します。

```aws-stepfunctions-local-credentials.txt
LAMBDA_ENDPOINT=http://host.docker.internal:3001
```

なお、 docker-compose で上記環境（Step Functions Local や Lambda の実行環境）を構築する場合は、このホスト名の代わりに docker-compose 内で指定したホスト名を記載してください。

## 参考
https://qiita.com/ijufumi/items/badde64d530e6bade382
bq commandのscheduled query操作メモ


ただのメモです。


### scheduled query一覧表示

```
$ bq ls --transfer_config --transfer_location=us
                                           name                                                              displayName                      dataSourceId       state
 ----------------------------------------------------------------------------------------- ------------------------------------------------ ----------------- -----------
  projects/000000000000/locations/us/transferConfigs/00000000-0000-0000-0000-000000000000   my_scheduled_query                               scheduled_query   SUCCEEDED
```


### scheduled queryの設定表示

```
$ bq show --format=prettyjson --transfer_config "projects/000000000000/locations/us/transferConfigs/00000000-0000-0000-0000-000000000000"
{
  "dataSourceId": "scheduled_query",
  "datasetRegion": "us",
  "destinationDatasetId": "samples",
  "displayName": "my_scheduled_query",
  "emailPreferences": {
    "enableFailureEmail": true
  },
  "name": "projects/000000000000/locations/us/transferConfigs/00000000-0000-0000-0000-000000000000",
  "params": {
    "destination_table_name_template": "sample2",
    "query": "SELECT * FROM samples.sample LIMIT 1",
    "write_disposition": "WRITE_APPEND"
  },
  "scheduleOptions": {
    "disableAutoScheduling": true
  },
  "state": "FAILED",
  "updateTime": "2020-01-01T00:00:00.000000Z",
  "userId": "xxxxxxxxxxxxxxxxxxx"
}
```


### OnDemandQueryを実行する

```
$ bq mk \
  --transfer_run \
  --run_time="2020-01-01T00:00:00+09:00" \
  projects/000000000000/locations/us/transferConfigs/00000000-0000-0000-0000-000000000000
```


### scheduled queryを更新する

```
$ cat << __JSON__ > /tmp/param.json
{
  "query": "SELECT * FROM samples.sample LIMIT 2",
  "destination_table_name_template": "sample2",
  "write_disposition": "WRITE_APPEND"
}
__JSON__

$ bq update \
  --transfer_config \
  --params="$(cat /tmp/param.json)" \
  projects/000000000000/locations/us/transferConfigs/00000000-0000-0000-0000-000000000000
```
Windowsで iOSのSafariのWebアプリをリモートデバッグする方法

#概要
Macはもっていないけど、Windows10 PCをつかって、iOS11 Safariで開いたWebアプリケーションをデバッグする方法です

# 使うもの

- Windows10 PC
- iOSデバイス(iPhone,iPad,iPod touchなど)
- Chromeブラウザ(Windows版)

#準備

作業には Windows Power Shell（コマンドプロンプトの強化版、Windows10にプリインストールされている） を使う。

## Step0. iTunesをインストールしておく

https://www.apple.com/lae/itunes/

iTunesをインストールして、手持ちのiOSデバイスをUSBでWindows PCに接続しておく

## Step1. Scoopを導入する

Scoopはコマンドラインからソフトウェアをインストールするツール。
（macでいうhomebrewのwindows版的なものと理解）

Power Shellを起動し、以下コマンドを実行。これでscoopがインストールされる。

```
Invoke-Expression (New-Object System.Net.WebClient).DownloadString('https://get.scoop.sh')
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/1bc66679-b165-5bd3-1ef4-c997252373ec.png)


## Step2. ios-webkit-debug-proxy をインストールする

Power Shellで以下コマンドを実行。
これで[ios-webkit-debug-proxy](https://github.com/google/ios-webkit-debug-proxy)がインストールされる。

```shell
scoop bucket add extras
scoop install ios-webkit-debug-proxy
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/3e9c07d5-4533-7e58-5d66-b0f140264cf1.png)

## Step3. ios-webkit-debug-proxyを起動する

Power Shellで以下コマンドを実行。これで、ios-webkit-debug-proxyが起動する。

```
remotedebug_ios_webkit_adapter -— port=9000
```

## Step4. iOSデバイスでSafariを起動する

iOSデバイス側で、Safariを起動してリモートデバッグしたいWebアプリ、Webサイトを開いておく

(もちろんiOSデバイスとPCはUSBでつないだまま）

## Step5. Chromeからデバイスに接続

Chromeブラウザを開いて、以下のURLを開く

[chrome://inspect/#devices](chrome://inspect/#devices)

すると以下のような画面が出るので **Configure** をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/1b9da890-8753-6bf1-d866-084ac1a5a535.png)

すると、ダイアログが表示されるので、そこに**localhost:9000**を追加して**Done**をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/4d76745a-3edc-7be7-14f9-ec1d0ae4c79f.png)

これで、しばらくまつと、以下のようにSafariで動作しているWebアプリが表示される


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/20e71bd5-902c-be3c-7b90-ab8881af6e18.png)

## Step6. ChromeのDevToolでデバッグする

**inspect**をクリックすると、おなじみのDevToolが起動し、Windows上からiOS Safari上のアプリの各種デバッグが行えるようになる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/80de3336-8b15-f34f-88cf-127b059d6012.png)