OmniAICreator/Qiita-1.07M huggingface dataset:
vue-cliで作成したプロジェクトにvue.config.jsを追加する

## 時間がないから今すぐ知りたい
`@vue/cli 4.4.1`のデフォルトで作成すると存在しないので、プロジェクトルートに作る。

## 環境
macOS Catalina 10.15.5
`@vue/cli`: 4.4.1

## 今回やりたいこと

vue-cliで作成したプロジェクトの`App.vue`に[Vue.jsの公式ガイドの「要素間のトランジション」](https://jp.vuejs.org/v2/guide/transitions.html#%E8%A6%81%E7%B4%A0%E9%96%93%E3%81%AE%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B8%E3%82%B7%E3%83%A7%E3%83%B3)を書いたらエラーになった。

```console:chrome_devtool_console
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

found in

---> <VA>
       <App> at src/App.vue
         <Root>
```

上記のエラーメッセージで検索すると以下がヒットする。

[[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. #2754](https://github.com/vuejs/vue-cli/issues/2754)

回答として貼られているのは`vue.config.js`の[リファレンス](https://cli.vuejs.org/config/#runtimecompiler)。
`runtimeCompiler`を`true`にすれば本エラーの回避ができるようだ。

さぁ、`vue.config.js`で設定しよう。

## あれ？vue.config.jsはどこ？

ところが`vue-cli`で作成したプロジェクトには`vue.config.js`が存在しない。

```console:tree
.(プロジェクトルート)
├── README.md
├── babel.config.js
├── node_modules
├── package.json
├── public
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── main.js
└── yarn.lock
```

## なければ作ろう

プロジェクトルートに`vue.config.js`という名前で作成する。

```console:tree
.(プロジェクトルート)
├── README.md
├── babel.config.js
├── node_modules
├── package.json
├── public
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── main.js
├── vue.config.js // <- 新規作成
└── yarn.lock
```

記載する内容は以下。

```js:vue.config.js
module.exports = {
    runtimeCompiler: true
}
```

サーバーを起動している場合、`vue.config.js`を読み込むためにここで一旦再起動を行う。

## 何故書いた？

少なくとも3回は忘れたので自分で記事を書いた。
excelのvbaで複数シートを1ファイルのpdfにする



```
Worksheets("Sheet1").ExportAsFixedFormat Type:=xlTypePDF, Filename:="test.pdf"
```

が基本だが、これだと1シート1pdf。

複数シート1pdfにするには下記。

```
Sheets(Array("Sheet1", "Sheet2")).Select
ActiveSheet.ExportAsFixedFormat Type:=xlTypePDF, Filename:="test.pdf"
```

下記ではダメ

```
Sheets(Array("Sheet1", "Sheet2")).ExportAsFixedFormat Type:=xlTypePDF, Filename:="test.pdf"
```
CentOS8で良くやるセットアップのメモ

良く忘れて毎回調べなおしてるのでメモ。
何か見つけたら追加予定。

### dnf で `Failed to set locale, defaulting to C.UTF-8 `

日本語パックを入れよう。

```bash
$ sudo dnf install -y langpacks-ja
```

参考 - https://caramelize.now.sh/posts/CentOS8%20%E3%81%A7%20Failed%20to%20set%20locale%2C%20defaulting%20to%20C.UTF-8%20%E3%81%A8%E8%A8%80%E3%82%8F%E3%82%8C%E3%82%8B%E6%99%82


### タイムゾーンを JST にする

```bash
$ sudo timedatectl set-timezone Asia/Tokyo
```


### Swap作成とアタッチ

```bash
# サイズは適当に変更
$ sudo dd if=/dev/zero of=/swapfile bs=128M count=16
$ sudo chmod 600 /swapfile
$ sudo mkswap /swapfile
$ sudo swapon /swapfile
$ sudo swapon -s
$ sudo vi /etc/fstab
# 以下を末尾に追加
# /swapfile swap swap defaults 0 0
```

Amazon Linux2 での方法を流用 - 
https://aws.amazon.com/jp/premiumsupport/knowledge-center/ec2-memory-swap-file/
PCとスマホ（縦向き）とスマホ（横向き）でレイアウト変える

ＰＣブラウザで見る場合と、スマホで見る場合（縦横の判別）でレイアウトを変えようと試行錯誤（ググった）結果です
※javascriptが苦手なのでCSSのメディアクエリでやれました。
htmlとかあんまり得意でないので的外れ感(CSS全部中に書いてしまったり、、)あるかもしれません。。。


スマホ横向き・ＰＣだとコンテンツ横並び、スマホ縦向きだと縦並びにしています

```html:test.html
<html>
<head>
 <meta name=viewpoint content="width=device-width,height=device-hight,user-scalable=no,inital-scale=1,maximam-scale=1">
 <style>
  @media screen and (max-width:750px) , (orientation:portrait){
<!--こちらにスマホ縦向き用のＣＳＳを書きます -->
   body{
       -webkit-text-size-adjust:100%;
   }
   .outside{
     display:block;
     width:100%;
     height:100%;
   }
   .outside .inside{
     display:block;
     width:100%;
     hight:50%;
     padding-right:0;
     padding-left:0;
     overflow:hidden;
   }
}
  @media screen and (min-width:900px) , (orientation:landscape){
<!--こちらにスマホ横向き・ＰＣ用のＣＳＳを書きます -->
   body{
       -webkit-text-size-adjust:100%;
   }
   .outside{
     display:table;
     width:100%;
     height:100%;
   }
   .outside .inside{
     display:table-cell;
     vertical-align:middle;
     width:50%;
     hight:100%;
     padding-right:0;
     padding-left:0;
     overflow:hidden;
   }

 }
 </style>
</head>
<body>
 <div class=outside>
 <div class=inside><iframe src="****1" scrolling=no frameborder="0" width=100% height=100%></iframe></div>
 <div class=inside><iframe src="****2" scrolling=no frameborder="0" width=100% height=100%></iframe></div>
 </div>
</body>
</html>

```
【WordPress】アップロードしているファイルも、WPの管理画面も、Chromeのソース表示も全てfaviconを独自のものにする

サーバ表示領域/favicon.iconに置き、５分くらいすると反映された

## 余談：アップロードファイルを独自パスにする[WP Original Media Path](https://ja.wordpress.org/plugins/wp-original-media-path/)がとても便利

Full URL path to files:ドメイン＋(/)＋アップロードしたいパス
で保存

### すでにアップロードしているファイルがある場合
指定したいパスにフォルダを移動する

### ルート直下以外にWPをインストールしていて、ルート直下のフォルダにパスを変更したい場合
Expert mode：チェックを入れる
Store uploads in this folder：「../変更したいパス」
で保存
Fiddler Everywhere for OS XでAutoResponderが利用可能に

FiddlerのAutoResponderを使うと、ローカルファイルを使ってHTTPレスポンスを置換できるので、HTML/CSS/JavaScriptのデバッグ時にとても便利です。Windows環境では、長年に渡ってお世話になっているAutoResponderなのですが、少し前までFiddler Everywhere for OS Xにはこの機能がありませんでした。Macでデバッグする時は、しかたなく他のツールを使ったりしていたのですが。。。

ついにFiddler Everywhere for OS XでもAutoResponderが利用可能になりました。

こちらからダウンロードできます。
https://www.telerik.com/fiddler-everywhere
Alibaba Cloud ECS(仮想サーバ)で使われてる物理CPU

Alibaba Cloudの東京リージョンで利用可能なインスタンスファミリーの物理CPUを調べる機会があったのでまとめておきます。

|インスタンスファミリー|物理CPU|
|:---|:----|
|g6/c6|Intel Xeon(Cascade Lake) Platinum 8269CY 2.5 GHz/3.2 GHz|
|g5/c5|Intel Xeon(Skylake) Platinum 8163 /<br>Intel Xeon(Cascade Lake) Platinum 8269CY 2.5 GHz/2.7 GHz|
|sn2/sn2ne/sn1/sn1ne|Intel Xeon E5-2682v4 / <br>Intel Xeon(Skylake) Platinum 8163 2.5 GHz|
|t5|Intel Xeon E5-2682v4 / <br>Intel Xeon(Skylake) Platinum 8163 / <br>Intel Xeon Platinum 8269CY 2.5 GHz|

2020年6月11日現在の情報です。
Let's encrypt あれこれ

- 有効期限90日間
- 有効期限の30日前から更新可能
  - cron で自動更新にしておくと便利

## 環境
- さくらのVPS
- Apache/2.2.15
- CentOS release 6.10

## インストール
- パッケージインストール

~~~bash
$ yum install epel-release
$ yum install gcc openssl-devel bzip2-devel
~~~

- Python インストール

~~~bash
$ cd /usr/src
$ wget https://www.python.org/ftp/python/2.7.14/Python-2.7.14.tgz
$ tar xzf Python-2.7.14.tgz
$ cd Python-2.7.14
$ ./configure --enable-optimizations
$ make altinstall
$ /usr/local/bin/python2.7 -V
~~~

- pip（pythonのパッケージ管理）インストール

~~~bash
$ curl -kL https://bootstrap.pypa.io/2.6/get-pip.py | python
~~~

- virtualenv インストール（必要？）

~~~bash
$ pip install virtualenv
~~~

- Certbot インストール

~~~bash
$ cd /usr/local/
$ wget https://dl.eff.org/certbot-auto
$ chmod a+x certbot-auto
~~~

## 証明書作成

~~~bash
$ cd /usr/local/
$ ./certbot-auto
# あとはコンソール入力
~~~

### 別のドメインも追加
1. httpd.conf にドメインを追加
1. certbot で SSL 設定

~~~bash
$ cd /usr/local/
$ ./certbot-auto
# ドメイン一覧が出るので、選ぶ
~~~
1. ssl.conf を設定（自動で設定される？）

~~~bash
$ vi /etc/httpd/conf/httpd-le-ssl.conf
~~~
1. apache 再起動（↑で自動設定された場合は不要）

## ドメインの削除（証明書の削除）
- ドメインの個別の削除はできなさそうなので、証明書を一旦失効させ、作り直す

~~~bash
# 証明書を失効させる
$ ./certbot-auto revoke --cert-name=ドメイン名

# 設定ファイルも削除
$ sudo rm /etc/httpd/conf/httpd-le-ssl.conf

# 証明書を作成
$ ./certbot-auto
~~~

## 証明書の更新
~~~bash
$ cd /usr/local/
# 有効期限の確認
$ ./certbot-auto certificates

# 更新（リハーサルして、エラーが出ないか確認）
$ ./certbot-auto renew --dry-run

# 更新（リハーサルでエラーが無ければ！）
$ ./certbot-auto renew
~~~
#PowerApps で強化されたマップ機能を利用する方法

#はじめに

強化されたマップ機能とは、4月13日にMR機能と同時に発表された、Power Appsで注目の目玉機能（アップデート）です。
これまで静的なマップしか扱えなかったPower Appsで、新たにユーザーが操作可能なマップコントロールが利用可能になります。

これによって、指定した座標の地図の周辺を拡大したり、衛星写真に切り替えたり、Google Mapで我々が普段やっているような操作をPower Apps上で行えるようになります。
![geomap.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/a1b2a4c0-2180-4068-19dc-e2bd4bda3c8e.gif)
詳細は以下のリンクをご覧ください。

https://powerapps.microsoft.com/en-us/blog/new-geospatial-features-in-power-apps/

※今回の機能を有効化するためには、Power PlatformのAdmin centerで機能を有効化（追加のサービス利用規約）に同意する必要があります。
※Previewではない一般の環境で確認しています。

# 有効化方法
まずはPower Appsの設定を開き、詳細設定から、**Geospatial features**を有効化しようとすると、下図のようなInformationが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/1bba995b-5e2a-0b24-53fc-58646ef865d7.png)

Admin Centerで追加の利用規約に同意する必要がある とのことです。

Admin Centerに移動して、環境を選び、設定に遷移し、機能を開くと、以下のように、**Geospatial services (preview)** という設定項目が表示されています。

今回の機能を有効化するにはこのトグルをONにする必要があるようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/43019b9c-dbca-3b63-0775-3d5d75f64b63.png)

追加の利用規約↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/8e14de15-93a9-a521-8a51-5e8bafb1bab7.png)

この利用規約に同意して、トグルをONにして5分くらい待つと、Power Appsの詳細設定から試験的機能の有効化ができるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/5ab5f7a0-9b64-0e5d-8c73-3decec70f62d.png)


#簡単な使い方

新しいマップコントロールは、メディアの下にあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/ce1a6f4d-9ea7-7476-2a57-77b6172f8b56.png)

とりあえずコントロールを配置してみると、さまざまなプロパティが表示されます。
衛星写真モードなどもありますね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/664d32d4-f65d-3336-0dbd-b9d939d92dee.png)

あとはGoogle Mapのようにぐるぐる動かすだけです。

## ピンの配置
ここから手探りなので、間違っているかもです。
マップコントロールのプロパティを見てみると、ItemsLabelや、ItemsAddressなどがありますね。
たぶんこれを含むCollectionやデータをItemsItemsに与えてあげればいいんだろうと予想できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/936c2f13-5db9-e3c6-6a13-59f686bf14e8.png)

予想通りでした。簡単に、某社の名前、緯度、経度が含まれるCollectionを作成し、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/0115d48d-3a8d-5501-cf66-b1b709950f59.png)

マップコントロールのプロパティを次のようにセットしてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/b2162951-7490-e8fd-f8c6-284dcbaac8fc.png)

すると、上の図のように、ピンが表示されるようになりました。

# 住所検索
Geospatial features、もう一つの大きな機能が、住所の検索コントロールです。
住所検索コントロールは、Inputの下に入っていました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/e067abf3-9df9-49e1-513b-1397028f1392.png)

これも簡単に試してみま...したが、日本の住所は、Microsoft Searchの時同様、出てこないですね。。何かコツが必要なのだろうか。
設定を見ると、言語と国の設定があります。このあたり、公式の情報を待ちたいと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/cbc2f879-06d5-ca51-8c20-ec0c3c040e3d.png)

# まとめ
これまで静的なマップしか扱えなかったPower Appsにとって、このインタラクティブなマップコントロールは本当に革命的だと思います。
単純にこれまでのマップを置き換えるもよし、データを与えて、ギャラリーと組み合わせてみるもよし。

様々な使い道があると思いますので、ぜひONにして試してみてください。
Capistrano3 で pg インストールがエラーになる（.bash_profile の PATH が読み込まれていない）

# 結論
1. Capistrano は `.bashrc` しか読み込まない
2. `.bashrc` に `PATH` を書いても エラーになる場合は、`[ -z "$PS1" ] && return` のような記述の上に書かないと読み込まれない

  ```:.bashrc
  # PostgreSQL12
  export PATH=/usr/pgsql-12/bin:$PATH

  # If not running interactively, don't do anything
  [ -z "$PS1" ] && return
  ```

# 参考

- [【Capistrano】環境変数が読み込まれない！？ その場合の対応方法 - とーますメモ ](http://thoames.hatenadiary.jp/entry/2018/07/10/102211)
- [Capistrano3 でリモート側の環境変数設定されてないなって思ったら - びぃえるくぅと。](https://yadex205.hatenablog.jp/entry/2017/07/26/172649)
Azureに関するサービス更新情報の監視をLogic Appsで実現する ~投稿を日本語で見やすくしてみた~

以下の記事の続きになります。
https://qiita.com/ishii1125/items/3ecc09804a1ff9a142e1

前回はRSSフィードの更新を検知して、更新された部分の内容をTeamsのチャネルに投稿するというところまで実現しました。
実際に投稿してみて気づいたことですが、最初に投稿された内容が英文になっていることが多々あるため、パッと見たときに抵抗感を感じてしまいます。
(個人的に英語力が低いだけですが、、、)

そこで、なんとなくでいいから日本語にならないかと思い、同じくMicrosoft社のAIによる言語翻訳をかませてみることにしました。
今回はその実装内容について記載します。

#アップデートした内容
前回の仕様ではRSSフィードの更新内容を見繕って、Teamsへそのまま投稿するという内容でした。
今回は取得した内容を言語翻訳してTeamsへ投稿するように変更します。
そこでAzureのLogic Appsコネクタにある「Microsoft Translator V2(プレビュー)」を利用しました。
※Cognitive Servicesの言語翻訳サービスを立ち上げる必要があります。

#構築手順
まず、Azureにログインし、言語翻訳のサービスをデプロイする必要があります。
リソースの作成から「Translator」と検索し、サービスをデプロイします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482426/afce4f95-a84b-8f8e-6af5-6e9b7cc1c81e.png)
デプロイが完了したら、「キーとエンドポイント」から「エンドポイント」の情報を取得します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482426/a051f8a4-b619-eaed-873c-2732ddd31122.png)

次に、前回作成したLogic Appsへアクセスします。
Logic Appsのフローの編集を「ロジックアプリデザイナー」画面から実施します。
すでにあるフローに追加したいので、コネクタ間の「+」のアイコンから「アクションの追加」を実施します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482426/64616fcb-f215-b1dc-d93b-c5d93bc9685d.png)

コネクタの追加が表示されるので、検索から「translate」を入れて「Microsoft Translator V2」を探します。
そして、アクションのコネクタとして「Translate text(プレビュー)」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482426/41b973eb-8b99-0e93-a8aa-092d7fd55f54.png)
Translatorの接続情報ですが、先ほど取得していたTranslatorの「エンドポイント」をコネクタの「接続名」に入力します。
Subscription Keyについては空欄でも動作可能です。
※私の環境ではうまく設定できないので省いています。。。

接続が完了したら、変換する言語の種類と対象となる文字列を設定します。
Target Languageが変換先の言語、Textが変換する文字列を表しています。
また、特に追加する必要はないかと思いますが追加のパラメータ値として変換元の言語を英語で設定しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482426/5b860385-94b4-8203-4255-71639243da00.png)

最後に言語翻訳した内容をTeamsへ投稿するようにTeamsへ投稿するメッセージ本文を編集します。
RSSフィードの項目を引用したときのように動的なコンテンツから翻訳した内容を引用してきます。
「Translator」の項目が表示されない場合は「もっと見る」で表示させてください。
※このとき翻訳した内容をそのまま全文引用となるので、あまり凝った引用は難しいです。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482426/2fad6bb8-a46b-0c62-2798-2c014d423b68.png)

最終的に以下のようなメッセージ本文に設定しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482426/d3b16a02-ecf7-66d5-68b2-256371986db2.png)
実際にこんな感じにTeamsへ投稿されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482426/be9da8dc-2c44-7464-3370-06ca9a88b559.png)

#まとめ
ひとまず、共有できる情報程度にはなったかと思います。
コメントとしては、URLのリンクはプレーンテキストのままなので、ハイパーリンクに変換されてほしいな、って感じです。

思ったよりも簡単に翻訳もできたので、もう少し見てて面白い情報にしたいです。
IoTなどのフィルター処理を入れられたりするのだろうか。。。

アップデートがあれば、また書きたいと思います！
アンケート調査データを分析してみる【第2回：重回帰分析】

前回に続き、今回は重回帰分析を用いてアンケートデータを分析してみたいと思います。

重回帰分析とは、1つの目的変数を複数の説明変数で説明または予測する手法です。今回は以下のサイトより、大学の授業に関するアンケートデータを使用します。

http://www.f.waseda.jp/oshio.at/edu/data_b/06_folder/da06_02.html

①今回もRを使って分析します。まずはデータを読み込みます。

```
data <- read.csv("data6-4.csv")
head(data)
```

![Capture1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265091/45eb3e48-9cd8-b542-9524-b30f4bb7c61d.png)

今回の分析では、「Evaluation(評価）」を目的変数、「Difficulty.level（難易度の高さ）」「Private.language（私語の多さ）」「Understanding（理解度の高さ）」を説明変数とします。それぞれの説明変数が、その授業の評価にどれだけ影響しているか、目的変数に対する説明変数の貢献度を分析します。

②変数間の相関を確認してみましょう。

```
cor(data)
```

![Capture2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265091/78623883-9c9b-6e7e-03ec-ac8234abc67a.png)

難易度と評価には負の相関があることなどが分かります。

③続いて、lm関数を用いて重回帰分析を行い、結果を表示します。

```
output <- lm(data$Evaluation~data$Difficulty.level + data$Private.language + data$Understanding)
summary(output)
```

![Capture3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265091/0b31107d-08b7-819c-2e31-51199ef6857a.png)

目的変数に対する、各説明変数の貢献度については、まずt値を示す「t value」に着目します。これはそれぞれの説明変数が目的変数に与える影響の大きさを表しており、絶対値が大きいほど影響が強いことになります。ここでは、難易度と私語がマイナス、理解度がプラスになっており、それぞれ目的変数に対して負の影響、正の影響があることが分かります。

次にp値を示す「Pr(>|t|)」を見てみましょう。これはそれぞれの説明変数が、統計的に有意であるかを示したもので、一般的には0.05未満かどうかで、その変数が統計的に意味を持つかを判断します。今回はいずれも0.05を下回っており、それぞれの説明変数は目的変数に対して有意な影響があると解釈できます。

このほか「Multiple R-squared」は決定係数を指し、モデルの説明力の高さ（当てはまりの良さ）を0~1で示しています。一般的に、この数値が0.5以上なら、ある程度の説明力があるとされており、今回は0.6825とまずまずの結果ということが分かります。

今回のデータから言えることは、内容が難しくて生徒の私語が多い授業は評価が低くなりやすく、分かりやすいと高くなりやすい、ということが伺えます。（当たり前と言えば当たり前ですが。。）

重回帰分析により、説明変数を元に目的変数を予測することも可能です。こちらについては、また別の機会に取り組んでみたいと思います。
Bazaar to Git with CentOS8 Docker Container

BazaarのプロジェクトをGitのプロジェクトに変換したいけど、そのためだけにマシンの環境を弄りたくないよって方向けです。
Docker Desktop for Mac を利用する前提で進めます。

## 変換用の環境を作成する

Bazaarのプロジェクトディレクトリ（`.bzr`が存在するディレクトリ）で実行します。

```bash
$ docker run --rm -it -v "${PWD}/:/home/" --workdir=/home/ centos:8 bash
```

Windowsの場合はCドライブのマウント設定[^1]が必要かもしれません。
コンテナの操作が可能になり次第、必要なソフトウェアをインストールしていきます。

```bash

# GCC と rpmbuild のインストール（Bazaarのビルドに必要）
$ dnf install -y gcc rpm-build

# Python2系のインストール（3系だとBazaarのインストールが失敗してしまうので注意）
$ dnf install -y python27 python2-devel

# Bazaarのインストール
$ pip2 install bzr

# 変換ツールのインストール
$ pip2 install fastimport
$ mkdir --parents ~/.bazaar/plugins && cd ~/.bazaar/plugins
$ bzr branch lp:bzr-fastimport fastimport

# Gitのインストール
$ dnf install -y git
```


## 変換を行う


```bash
# 変換対象のBazaarのプロジェクトディレクトリに移動
$ cd /home/

# 変換先のGitのプロジェクトを作成
$ git init

# 変換処理
$ bzr fast-export --plain . | git fast-import
```

うまくいけば、`bzr log`で表示される内容がGitのデフォルトブランチに反映されます。
以上で変換作業は終了です。おつかれさまでした。


## 作業環境のバージョン一覧

```bash
$ cat /etc/redhat-release 
CentOS Linux release 8.1.1911 (Core)

$ rpmbuild --version
RPM version 4.14.2

$ gcc --version
gcc (GCC) 8.3.1 20190507 (Red Hat 8.3.1-4)

$ python2 --version 
Python 2.7.16

$ pip2 --version
pip 9.0.3 from /usr/lib/python2.7/site-packages (python 2.7)

$ bzr --version
Bazaar (bzr) 2.7.0

$ git --version
git version 2.18.2
```


## 参考

http://doc.bazaar.canonical.com/latest/ja/mini-tutorial/index.html
https://git-scm.com/book/en/v2/Git-and-Other-Systems-Migrating-to-Git
https://methane.hatenablog.jp/entry/20120627/1340802391


[^1]: https://gangannikki.hatenadiary.jp/entry/2020/02/03/200000
Ruby on Railsの基礎知識

#Railsを使う準備
###新規プロジェクトの作成

```ruby:terminal
$ rails new (プロジェクト名)
```

###Webサーバーの起動(仮想環境)

```ruby:terminal
$ rails s -b 0.0.0.0
```
※環境により異なります

###掲示板の自動生成

```ruby:terminal
$ rails generate scaffold article content:string
```

###データベースの設定

```ruby:terminal
$ rails db:migrate
```

###Webページの追加(Welcomeというページを作成する場合)

```ruby:terminal
$ rails generate controller welcome index
```

###Welcomeページをトップページに設定する

```ruby:config/routes.rb
Rails.application.routes.draw do
  get 'welcome/index'

  resources :articles
  root 'welcome#index'
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end
```

###リンクの設定

```<%= link_to '(リンクテキスト)', リンクのアドレス(下記の場合は作成したarticlesに移動する) %>```

```ruby:index.html.erb
<%= link_to 'Show list', articles_path %>
```

###データベースのarticlesテーブルに、nameカラムを追加する

```ruby:terminal
$ rails generate migration AdNameToArticle name:string
```
```$ rails db:migrate```を忘れずに行います。

下記のようにコードを記述することでnameカラムからデータを呼び出す処理が実行できます。

```ruby:
<%= article.name %>
```
flex-wrap: wrap; を使ってみた

親要素の中に子要素を綺麗に並べたい。
１段ではなく、２段にして並べる方法は何かないだろうか。
青いボックスを動かしてみる。


親要素に
display: flex;
justify-content: center;
を加える。

![sample1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631952/425f6cab-ca7c-2c18-f131-bd4768503dec.png)

さらに、
flex-wrap: wrap;
を加えると、綺麗に並べることができた。


![sample2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631952/f057bceb-8917-3377-4404-e37df561e916.png)
CentOS7 に npm を インストール するのにはまったのでメモに残します。

# インストール手順

注：yum install -y npm ではうまく install できません。

```:shell
# curl -sL https://rpm.nodesource.com/setup_11.x | bash -
# yum install nodejs -y
# npm -g config set proxy ProxyServerURL
# npm -g config set https-proxy ProxyServerURL
# npm update -g npm​
# npm --version
```
SASテクニック レコード数を取得

データセットのレコード数を取得する方法
(オブザベーション数、データセットが何行あるのかを数える)
dataステップやSQL,sas関数,Luaプロシジャなど様々な方法で取得できる

例としてsashelp.CLASSのレコード数を数えてみる
※オブザベーション数をマクロ変数に格納

# open関数,attrn関数

```sas
%let Dataset = %sysfunc( open( sashelp.CLASS ) );
%let N1 = %sysfunc( attrn( &Dataset. , nlobsf ) );
%let rc = %sysfunc( close( &Dataset. ) );
%put N1 = &N1.;
```

必ずcloseすること
8桁以上でもEとか出ない
where使用可能(whereなしよりかは遅くなる)、関数使うとき注意が必要


# SQL intoを使用

```sas
proc Sql noprint;
  select count(*) into : N2 trimmed
  from sashelp.CLASS;
quit;
%put N2 = &N2.;
```

trimmedでいらないブランクを消す(数値変数も文字としてマクロに格納されるため数値はブランク発生)
group byでN1 - N2などと複数のマクロ変数に格納する場合はtrimmedは×(ブランクも出てこない)
8桁以上だとE使われる
put( count(*) , best12. )とかにすればEにならない
where使用可能(whereなしよりかは遅くなる)


# dataステップ1

```sas
data _null_;
  if 0 then set sashelp.CLASS nobs = N;
  call symputx( "N3" , N );
  stop; * 無限ループ回避 *;
run;
%put N3 = &N3.;
```

where使用不可(エラーにはならないが、whereなしのレコード数がカウントされる)
nobsがそもそものデータセットのレコード数を取っているためだと思われる


# dataステップ2

```sas
data _null_;
  set sashelp.CLASS end = EOF;
  if EOF = 1 then call symputx( "N4" , _N_ );
run;
%put N4 = &N4.;
```

レコードの数だけ処理を繰り返すため、おすすめしない
自分は、各行ごとに変数値などをマクロ変数にいれて、マクロでループ処理したりするときに使ったりする

# Luaプロシジャ

```sas
%let Dataset = sashelp.CLASS;
proc Lua;
  submit" Dataset = '&Dataset.' ";
    local dsid = sas.open( Dataset )
    local N = sas.nobs( dsid )
    sas.close( dsid )

    sas.symput( "N5" , N )
    -- sas.submit( [[ %global N5; %let N5 = @N@; ]] )はダメっぽい
  endsubmit;
run;
%put N5 = &N5.;
```

Luaプロシジャ全然知らないが、計算速いようなのでちょっとリファレンス調べてみた

適当に20億行のデータ作ってレコード数を数えてみたが、
open&attrn,SQL,if 0 then,Luaは高速だった
※whereしながらカウントする場合はちょっと遅くなる


https://support.sas.com/documentation/cdl_alternate/ja/lefunctionsref/67960/HTML/default/p12uchp7hm5h2zn1om2ut816af7h.htm
https://documentation.sas.com/?docsetId=mcrolref&docsetTarget=n0s4xeo2nzqhdtn177qgad6iz69f.htm&docsetVersion=9.4&locale=ja
https://support.sas.com/documentation/cdl_alternate/ja/mcrolref/67912/HTML/default/n1y2jszlvs4hugn14nooftfrxhp3.htm
http://support.sas.com/documentation/solutions/base/lua/9.4/proclua.pdf
https://support.sas.com/resources/papers/proceedings15/SAS1561-2015.pdf
bundle installが失敗（つづき）。gem「 MySQL2 」が原因だった件。

###  <font color='lightblue'>背景</font>
libv8の続きです。Mysqlのgemインストール時に以下のエラーが出ました。

```
Installing mysql2 0.5.2 with native extensions
Gem::Ext::BuildError: ERROR: Failed to build gem native extension.
```

###  <font color='lightblue'>環境</font>

| 項目              |               内容 | 
|:-----------------|:------------------:|
| OS.Catalina      |           v10.15.4 |      
| Ruby             |            v2.5.1 |  
| Ruby On Rails    |           v5.2.4.3 |       
| MySQL    　　　　　|           v5.6　　 |       


###  <font color='lightblue'>内容</font>

**対応１）Mysqlのgemを再インストール**
`CMD>gem uninstall mysql2`

```
Successfully uninstalled mysql2-0.4.10
```

`CMD>gem install mysql2`

```
Building native extensions. This could take a while...
ERROR:  Error installing mysql2:
        ERROR: Failed to build gem native extension.
```

bundle installしても、失敗してしまいます。

**対応２）環境変数を設定し、再インストール**
以下のコマンドを実行し、環境変数を変更する

```
CMD>export PATH="/usr/local/opt/mysql@5.6/bin:$PATH"
CMD>export DYLD_LIBRARY_PATH="/usr/local/opt/mysql@5.6/:$DYLD_LIBRARY_PATH"
CMD>export LDFLAGS="-L/usr/local/opt/openssl/lib"
CMD>export CPPFLAGS="-I/usr/local/opt/openssl/include"
```

環境変数の確認

```
[\W staff@term]env
（省略）
LDFLAGS=-L/usr/local/opt/openssl/lib
CPPFLAGS=-I/usr/local/opt/openssl/include
```

→環境変数を変更したのち、同様に「bundle install」してもダメでした。

**対応３）結局、こちらもbundlerの設定を変更する**

`CMD>bundle config --local build.mysql2 "--with-ldflags=-L/usr/local/opt/openssl/lib --with-cppflags=-I/usr/local/opt/openssl/include"
`

これで、やっと「bundle install」が上手くいくようになりました。




###  <font color='lightblue'>参考記事</font>
[RailsプロジェクトでMySQLがbundle installできなかった](https://qiita.com/akito19/items/e1dc54f907987e688cc0)
[brew upgrade mysql で v8 がインストールされて rails server が起動しなくなったので v5.7 に戻す](https://qiita.com/DriftwoodJP/items/d55f8ce5edf991c748fb)
[mysql2 インストール時に 「ld: library not found for -limported_openssl」が表示された場合の対応](https://fkmy.hatenablog.com/entry/2019/10/18/022724)
[mysql2 gemインストール時のトラブルシュート](https://qiita.com/HrsUed/items/ca2e0aee6a2402571cf6)
windowsでnginxが動かなくなった

nginxを学んで数日しか経ってないので間違ってるところがあるかもしれないです
あればプルリクエストやコメント欄でお願いします(初投稿なので不安です)

# やりたかったこと
Windowsでnginxのリバースプロキシサーバを構築したかった
でもなんでかconfファイルをいじってたら起動しなくなった
ダウンロード元は[ここ](http://nginx.org/en/download.html)

# 原因
confファイル内のこの行が原因

```conf:nginx.conf
access_log  D:\worktools\nginx-1.18.0\logs\access.log;
error_log  D:\worktools\nginx-1.18.0\logs\error.log;
```

フルパス指定した`\nginx-1.18.0`の`\n`が改行として扱われていた

ちなみにデフォルトのログ出力先を見ると

```log:error.log
2020/06/11 11:41:52 [emerg] 18664#15844: CreateFile() "D:\worktools
ginx-1.18.0\logs\access.log" failed (123: The filename, directory name, or volume label syntax is incorrect)
```
ログファイル内で改行されていてginxとなっているのでこれで気付くことが出来た

#対策
今回はデフォルトのログ出力先をわざわざ再定義していたので該当行をコメントアウトするだけだった

locationによってアクセスログを振り分けたい時には？

- 頭に`n`が付くようなバックスラッシュ記法に引っかかりそうなフォルダには注意する
- `\\n`とエスケープする
- パスのディレクトリ区切りを`\`から`/`にする

単純に`D:\worktools\nginx-1.18.0\logs\access.log`も`D:/worktools/nginx-1.18.0/logs/access.log`も同義っぽかったので三つ目の方法で指定すれば問題なさそう

こういった簡単なところでつまづくのは不本意ですね
.NET Framework 3.5でクラスのプロパティをJSON出力する方法

# TL;DR

- 本記事では、クラスのプロパティのJSON形式出力を自分で実装する場合のコードを記載します。

    - 最近の.NETであれば、json出力用のライブラリを利用することでクラスのプロパティをJSON形式で[簡単に出力する](https://itblogdsi.blog.fc2.com/blog-entry-414.html)ことが可能です。
    - 何らかの制限（Frameworkのバージョンが3.5以前、仕様ライブラリ制限等）がある場合に自力での実装が必要となります。

# コード

```vb:InputParameter.vb
Imports System.Reflection

Public Class InputParameter
    Public Property ID1 As Integer
    Public Property Value1 As Short

    Public Overrides Function ToString() As String
        Dim strInfo As New System.Text.StringBuilder
        strInfo.Length = 0

        strInfo.Append("{")
        strInfo.Append(String.Format("""{0}""", Me.GetType().Name) & ":{")

        Dim strValue As New System.Text.StringBuilder
        strValue.Length = 0
        For Each p In Me.GetType().GetProperties
            If p.GetValue(Me, Nothing) Is Nothing Then
                strValue.Append(String.Format(",""{0}"": """"", p.Name))
            Else
                strValue.Append(String.Format(",""{0}"": ""{1}""", p.Name, p.GetValue(Me, Nothing)))
            End If
        Next
        strInfo.Append(Mid(strValue.ToString, 2))

        strInfo.Append("}")
        strInfo.Append("}")

        Return strInfo.ToString
    End Function
End Class
```

```json:ToStringメソッドの出力結果（整形済み）
{
    "InputParameter": {
        "ID1": "11111",
        "Value1": "22222"
    }
}
```
terraformのtfファイルをJSON(やYAML)で管理する

個人的な感想としては、JSONファイルは、人間が編集して使用するには向いていない。terraform の tfファイル(HCL)は、やや人に優しくなっているが、YAMLほどではない。
つまり、何が言いたいかというと、terraformの管理をYAMLでやりたい。

## terraformのtfファイルはJSONでも書ける

https://www.terraform.io/docs/configuration/syntax-json.html


## JSONとYAMLの変換は容易

JSONで書ければ、yqユーティリティーなどにより、YAMLへの変換やJSONへの戻しなどが容易に可能となる。

https://kislyuk.github.io/yq/


## つまり、YAMLでterraformを管理できる

こんな感じ

```
# yq -y . main.tf.json > main.tf.yml  # JSONファイルをYAML化 (初回のみ)

# vi main.tf.yml                      # YAMLファイルを編集

# yq . main.tf.yml  > main.tf.json    # YAMLファイルをJSON化
```


## 注意点

- JSONの場合、拡張子は .tf.json とする必要がある
- JSONやYAMLでは、同じ属性をまとめないといけない(単一ファイル内では)
    - 例えば、トップレベルの"resource": { が複数箇所にあってはいけない。
    - (tfでは、マージされるので離れた箇所にあっても良い)
    - ファイルを別ければ、それぞれのファイルに1つなので少し緩和可能
- 既存のtfファイルをJSON化するオフィシャルなツールはない
    - うまく動かせていないが以下のツールは存在する
    - https://github.com/kvz/json2hcl
- 変数などは${ }で囲う必要がある(tfでは囲う必要はなくなっている)
    - \${ }の中では、他の変数などに関して、再度${ }を使用する必要はない
【GCP】BigQueryを触ってみた

# 手順
データをダウンロード
　https://www.houjin-bangou.nta.go.jp/download/zenken/
　青森のが6MBだったのでそれにした
Diveにセット
　スプレッドシートじゃないとうまくインポートしてくれないので、CSVでアップロード⇛スプレッドシートで開くとした
  ※今回、Driveのデータはうまくインポートでいなかった
コンソール画面のBig Queryへ移動する
左下のプロジェクト名をクリック
データセットを作成をクリック
Dataset ID に ”test_bigquery”、 Data location は US を選択します　あとはデフォルトでOK
画面中央にある＋ボタンにマウスオンし、テーブルを作成をクリック
Location は アップロードとし、用意していたデータを選択。
File Format はCSV Tableとします。
name には test と入力します。
適宜スキーマの内容を入力してください。
　※Schema は、 RDBMS でいうところのスキーマと同じ概念です。
　※自動で設定を希望する場合は、自動で設定にチェックをつけてください。
OKをクリック
テーブルに移動し、プレビューでデータが反映されているか確認
テーブルをクエリをクリックすると簡単なSQLが表示される
* や　count(*)をいれると実行ができる


# エラーについて
データに誤りがなければプレビューが出てアップロードできるはず
スプレッドシートはなぜかうまく動作しない

# 参考サイト
データは自分で用意
https://www.dsk-cloud.com/blog/try-to-use-bigquery

画像あってわかりやすい　データはなし
https://data.nifcloud.com/blog/data-analyze-google-big-query/

細かい内容まですべて書いてある　データの作り方はのってる
https://www.apps-gcp.com/bigquery-introduction/

公式ドキュメント
https://cloud.google.com/bigquery/public-data?hl=ja

データもある　記事が古いので他のサイトと一緒にみてみる
https://www.topgate.co.jp/gcp12-how-to-analyze-big-data-with-bigquery
Cloud Runで認証有りの際、手っ取り早く認証する方法

## 前提
- CloudRunの起動元にallUsersが入っていない（未認証を許可していない）
- CloudRun起動元に自分のgmailアドレスが設定されている。
- gcloudコマンドでログインしている。

## BearerTokenを取得
gcloudコマンドを使う

```sh
$ gcloud auth print-identity-token
```

出力されたtokenを付けてREQUESTする

## Tokenを付けてリクエストする

```sh
$ curl -H "Authorization: Bearer [先程取得したTOKEN]" https://[Cloud RunのURL]/
```

カッコ[]の中身は適当に読み替えてください。
bundle installが失敗。gem「 libv8 」が原因だった件。

###  <font color='lightblue'>背景</font>
非同期処理を実装しようと考えて、jqueryのgemをインストールしようとして「bundle install」したら、以下のエラーが出ました。そもそも、新たに追加するgem以外は、インストールされている認識だったのですが…

```
Installing libv8 3.16.14.19 with native extensions
Gem::Ext::BuildError: ERROR: Failed to build gem native extension.

../src/utils.h:33:10: fatal error: 'climits' file not found
#include <climits>
         ^~~~~~~~~
1 error generated.
```

###  <font color='lightblue'>環境</font>

| 項目              |               内容 | 
|:-----------------|:------------------:|
| OS.Catalina      |           v10.15.4 |      
| Ruby             |            v2.5.1 |  
| Ruby On Rails    |           v5.2.4.3 |       


###  <font color='lightblue'>内容</font>
**対応１）bundlerの設定を施す**
以下のコマンドを実行し、バンドラーを個別設定しました。関係する「therubyracer」も同様に設定しておきます。

````
CMD>bundle config --local build.libv8 --with-system-v8
You are replacing the current local value of build.libv8, which is currently nil

CMD>bundle config --local build.therubyracer --with-v8-dir=/usr/local/opt/v8@3.15
You are replacing the current local value of build.therubyracer, which is currently nil
```

以下のコマンドで登録されたことを確認します。
`CMD>bundle config`

```

build.libv8
Set for your local app (/Users/ichikawadaisuke/projects/krown/.bundle/config): "--with-system-v8"

build.therubyracer
Set for your local app (/Users/ichikawadaisuke/projects/krown/.bundle/config): "--with-v8-dir=/usr/local/opt/v8@3.15"
```

（ここで、通らないpathを設定していたため、gemのインストール時に失敗しました。）

次はなぜか。mysqlのエラーが…

```
Installing mysql2 0.5.2 with native extensions
Gem::Ext::BuildError: ERROR: Failed to build gem native extension.
```

<font color='blue'>**to be continued....**</font>


###  <font color='lightblue'>参考記事</font>
[Rails の bundle install 時に出会った therubyracer のエラーと、その解決方法](https://qiita.com/kay-adamof/items/59c8a5dd8816660fc02d)
[Rails で therubyracer をインストールしているのに bundle install が通らない時の対処](https://qiita.com/takecian/items/4e7504f6b5987d1621ae)
[therubyracerがインストールできない](https://arika.org/2016/12/28/therubyracer-installation-failed/)
FX自動注文をchrome 拡張機能 作成してみました

·FX　新規注文　IFD　ワンクリックで注文しちゃいます。
·ループで注文
·レート取得　注文レート生成
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165460/7e455fd7-7a29-d8c5-2087-e2d9f3deaf33.png)


·バックグラウンドで自動注文
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165460/c4e5bea9-672b-0e7f-2b33-0498d2610bad.png)
bladeとjinja2 比較してみた

LaravelとFlaskの行き来をしているとテンプレートの書き方どっちだっけ？となったので、備忘録として。

## これを読むといい人
LaravelやってたけどFlaskやってみたい
FlaskやってたけどLaravelやってみたい
どちらかは触ったことある人向けです。

## 基本的なやつ
|       比較対象       |       blade       |       jinja2        |
|:-----------------|:-----------------|:------------------|
| 出力             | {{ 変数 }}             |              {{ 変数 }} |
| エスケープしない出力             | {!! 変数 !!}             |              {% 変数 %} |
|  コメント             | {{-- コメント --}}             |              {# コメント #} |
| if             | @if (条件式)             |            {% if 条件式 %} |
| elseif             | @elseif             |              {% elif 条件式2 %} |
| else             | @else               |                {% else %} |
| endif             | @endif             |             {% endif %} |
| for             | @for (条件式)          |           {% for 条件式 %} |
| endfor             | @endfor          |           {% endfor %} |
| 現在のループのインデックス(初期値0)             | $loop->index          |           loop.index0 |
| 現在のループのインデックス(初期値1)             | $loop->iteration          |           loop.index |
| 総アイテム数             | $loop->count          |           loop.length |
| 最初のループか             | $loop->first          |           loop.first |
| 最後のループか             | $loop->last          |           loop.last |

bladeの$loop->indexは0始まりだけど、jinja2のloop.indexは1始まりなんですねえ。知らなかった。

## その他の比較
### 変数のセット方法
```php:blade
@php 
$test = 'test';
@endphp
```
```python:jinja2
{% set test = 'test' %}
```
### 三項演算子
```php:blade
@php 
$test = 'test';
@endphp
```
```html:jinja2
{% set test = 'test' %}
```

## テンプレート
### blade
```html:views/layouts/parent.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
    @yield('head')
    <title>@yield('title') - My Webpage</title>
</head>
<body>
    <main>
        @yield('content')
    </main>
</body>
</html>
```
```html:views/child.blade.php
@extends('layouts.parent')
@section('head')
    <style type="text/css">
        .text{ color: #336699; }
    </style>
@endsection
@section('title')
Index
@endsection
@section('content')
    <h1>Index</h1>
    <p class="text">
        これはIndexページです。
    </p>
@endsection
```
表示すると…
<img width="520" alt="スクリーンショット 2020-06-11 11.59.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/564758/17252201-817c-bc8c-25bd-4b1adcc60592.png">
タイトルや本文もうまく表示されていますね！

### jinja2

```html:parent.html
<!DOCTYPE html>
<html lang="en">
<head>
    {% block head %}
    <title>{% block title %}{% endblock %} - My Webpage</title>
    {% endblock %}
</head>
<body>
    <main>{% block content %}{% endblock %}</main>
</body>
</html>
```
```html:child.html
{% extends "base.html" %}
{% block head %}
    {{ super() }}
    <style type="text/css">
        .text { color: #336699; }
    </style>
{% endblock %}
{% block title %}
Index
{% endblock %}
{% block content %}
    <h1>Index</h1>
    <p class="text">
      これはIndexページです。
    </p>
{% endblock %}
```
表示すると…
<img width="570" alt="スクリーンショット 2020-06-11 10.55.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/564758/12cb4b45-dd21-6a91-adcb-531c278c1713.png">

bladeと同じ表示になりました。

親のテンプレートはbladeの方がすっきり書けますね。

以上です！
iPhoneのショートカットで長時間「待機」したい

iOS12で公式に導入されたらしい「ショートカット」アプリですが、
バックグラウンド待機が可能な時間が**最大25秒**という問題があります。

ショートカットのアプリ自体が長時間バックグラウンドにいると非アクティブになってしまうのが原因なんだとか。

参考：[Yahoo!知恵袋](https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13216964328)

**◆ 追記（22/02/08）**
**iOS15にアップデートしたところ、前とは違ってバックグラウンドでも生き残り続けるようになっていました。**
もしかしたらOSアップデートで改善されたのかも…？

# やりたいこと

- アプリAを開く
- **待機：5分**
- アプリBを開く

みたいなことができたらいいのに…

## 解決策

- 25秒経つ前に定期的に「サウンドを再生」で **デフォルト通知サウンド** を鳴らすことでバックグラウンド時間がリセットされ、ショートカットアプリが生き続けます。

こいつ↓
![サウンドを再生](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652113/380f0866-a065-bbf0-fd9e-1d8dfb4adf38.png)

自前のオーディオファイル指定ではダメみたい…？
無音音声ファイルを鳴らしたり「デバイスを振動させる」とか使ったりして色々試してみましたが、どうにも成功せず…。
定期的にピロピロ鳴らすしかないようです。

ショートカットアプリに詳しい方で他にも方法見つけた方いらっしゃいましたらご教示願います。

## 問題点：通知音がうるさい

- 通知サウンドを鳴らしてるので、20秒間隔でピロピロ鳴って**うるさい**です。
- **マナーモードでも鳴ります。**
 - 音量を0にすると静かになりますが、他の音も鳴らなくなります。

### 対応策

- 通知サウンドを鳴らす直前に**デバイスの音量を1%に設定**（0%は効かない）
- 通知サウンドを鳴らす
- 音量を**n%**に設定（固定値のみ）

で一応うるさくはなくなります。
他アプリを使っている最中だとめっちゃ気になるので、用途に合わせて使い分けるとよさそう。

## 注意点

- 省電力機能とかが効かないのでバッテリー消費が増えそう。
- 本筋と関係ないですが、スリープ状態になっていると「アプリを開く」が不発になって途中終了するので注意。

## ショートカット配布URL

渡された秒数だけ待機するショートカット作りました。
https://www.icloud.com/shortcuts/fcfdbfbb39cc4ead8d622c8da5ed21b0

せっかくなのでインターネッツに放流します。
おおきく育つんだよ……
【Git】追跡ブランチを変更

メモとして残します。


#■やり方
###1.変更したいブランチに移動
```shell
git checkout ブランチ名
```
###2.追跡ブランチ
```shell
git branch -u origin/リモートブランチ名
```

#■余談
ローカルブランチと、リモートブランチがマッチした場合は、追跡ブランチを自動的に切り替えるみたいな設定があればいいんだけどな。。。
リモートブランチと追跡ブランチは別とはわかってるけど、基本的に追跡したいのはリモートの場合が多いと思うので、、、、
サーバー引き継ぎの時に便利なツールと方法 (主に CentOS, Amazon Linux, RHEL)


おっきな企業さんに、サーバーだけ構築して、あと保守はウチのチームで管理しますということを言われるので、サーバー引き継ぎの時にローカルの EC2 などのサーバーの config 変更などを超簡単に手抜きでゲットする方法をまとめました。

# yum.log：ミドルウエア一覧

CentOS や Amazon Linux で、yum を使っているのであれば、

/var/log/yum.log をゲット。
インストールしたミドルウエア一覧と日付をゲット

インストールした、ミドルウエア一覧が出来上がり。

# ETCKeeper

/etc の中身を git として保存し、毎日自動コミットして修正を追ってくれる便利なツール。
サーバーを立てたらまっさきに epel レポジトリ (or 対応レポジトリ) をインストールして ETCKeeper による config の監視を行いましょう。

etckeeper をインストール。そして最初のコミットを行います。

# 差分抽出作業

## ローカルに落とす

サーバーにログインして、/etc 配下の領域をサーバーに落とす。
( /etc 配下に集約していることを想定 )

```
cd
sudo tar -cvzpf etc_$(date +%Y%m%d%H%M%S).tar.gz -C /etc/ ./
```

tar ファイルをダウンロードしてローカルの適当なところを抽出。


## 抽出用ブランチを

yum update などの余分なコミットを取り除いて、本当に必要な config の差分だけ取り出すために、サーバーからローカルに移す。

git ブランチをパッチを作成したい初期の箇所で分離。

差分パッチに残したいコミットを cherry pick していく。

最初のコミット ID と最後の commit ID をメモ

## git diff 引き継ぎの config 差分抽出

git diff [最初のコミットID]..[最後のコミットID] > ../XXXXX.patch

## git diff --name-only 変更したファイルだけリストで出す

git diff --name-only [最初のコミットID]..[最後のコミットID] > ../filelist.txt

# まとめ

- yum.log
- config 変更ファイル
- config のパッチ
gcloudの設定をパパッとやる

#GCPプロジェクトの設定を設定する
GCPには複数のプロジェクト・アカウントの設定を管理する仕組みがあります。
最初から手順をサクッと書いている記事が見当たらなかったので、手短にまとめていきます。


###動作環境
・macOS-10.14.6 のターミナル
###それではさっそく
初めてならば、Googleアカウントにログイン。ブラウザのログインページに飛ぶはず。

```
$ gcloud auth login
```
↓で自分のアカウントが表示されれば:v:

```
$ gcloud auth list
```
設定を作る。このような出力が出るはず。ここではsampleとしておく。

```
$ gcloud config configurations create [設定の名前]
Created [設定の名前].
Activated [設定の名前].
```
因みに、↓で名前がついた、すべての設定の詳細を表示してくれる。まだ色々設定してないので空っぽ。

```
$ gcloud config configurations list
NAME     IS_ACTIVE  ACCOUNT                 PROJECT  COMPUTE_DEFAULT_ZONE  COMPUTE_DEFAULT_REGION
sample   True
```
↓では、activeな状態の設定を教えてくれる。

```
$ gcloud config list
[core]
disable_usage_reporting = True

Your active configuration is: [sample]
```

###色々設定していく
まずはregionから。

```
$ gcloud config set compute/region [リージョン名(例えばasia-northeast1)]
Updated property [compute/region].
```
確認してみると…regionの情報量が増えた！

```
$ gcloud config list
[compute]
region = asia-northeast1
[core]
disable_usage_reporting = True

Your active configuration is: [sample]
```
次はzoneの設定。冗長になるので書きませんが、config listコマンドで確認すると:ok_hand:

```
$ gcloud config set compute/zone [ゾーン名(例えばasia-northeast1-a)]
Updated property [compute/zone].
```
アカウントとも紐づけておく。

```
gcloud config set core/account [アカウントつまりgmailアドかな]
```
プロジェクトとも紐づけるなら。

```
gcloud config set core/project [プロジェクト名]
```
因みに、プロジェクトと紐づけて、消したいなと思ったので、config unsetコマンドを実行。
下の実行例のprojectのところをaccountとかすると、紐付けを解除することができる。

```
$ gcloud config unset project
```
↓とかすると、設定ごと吹っ飛ばすこともできる。

```
$ gcloud config configurations delete [configuration名]
```

###おわり
初心者が設定で使ったのはこの程度です
はじめにloginせず、他の記事見て進めようとして手間取ったりしたので、少しでも誰かの時間短縮になればいいな〜
おわり:)

(参考)
[・Qiita記事]
(https://qiita.com/sky0621/items/597d4de7ed9ba7e31f6d)
・Cloud SDKのドキュメント
Unityにいろんなコントローラー繋げてデータ取得

Unityにいろんなコントローラーを接続して使いたいので色々調べたメモ
複数の方法が合ったのでメモ

##InputManager
ひとつのコントローラーを繋げるには良さそうでした

###利用方法
Edit > Project Setting > Input Manager
Sizeを増やすことで入力欄を追加
![SnapCrab_NoName_2020-6-11_10-44-3_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/d4d6c305-e002-b081-0a18-9441f492007b.png)

##InputSystem
異なるコントローラーを複数使うにもよさそうでした
マウスやキーボードも取得できたので良かったです

このサイトで詳しく使い方あったのでやりやすかったでする
![SnapCrab_NoName_2020-6-11_10-38-7_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/ac7ed874-ad31-b6a4-9da4-dac97201e49a.png)
https://docs.unity3d.com/Packages/com.unity.inputsystem@1.0/manual/Installation.html

###利用方法
Window > Package Manager
検索に input と入力するとリスト丈夫に表示
右下のインストールでUnityへ追加
![SnapCrab_NoName_2020-6-11_10-26-41_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/0d60582c-26a5-38e2-b178-188e0d8af82b.png)

詳細は下記サイトで記載あり
https://docs.unity3d.com/Packages/com.unity.inputsystem@1.0/manual/Installation.html

###Unityでの表示
GameObjectに　Player Index　を追加
Open Input Debug　で　デバイスリストが表示
動作確認したいデバイスをダブルクリックで取得データ表示
![SnapCrab_NoName_2020-6-11_11-20-18_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/159a6269-36ea-e58e-72fc-dfd24b1f08c7.png)

### 両方のManager利用(追記20200729)

onClickなどが利用できなくなるので、設定で両方利用をすると、共存できました
![SnapCrab_NoName_2020-7-30_11-37-34_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/04e073b7-724a-260b-f198-7f93477c9bad.png)

##動作確認できたコントローラー

###Windowsでゲームコントローラ認識が必要
この状態にできるコントローラなら何でも繋がりそうな感じしました
![SnapCrab_NoName_2020-6-11_11-12-0_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/49753afa-37ba-a173-174e-39566f63b858.png)

###Xbox ワイヤレス コントローラー
ワイヤレスで動作確認
![SnapCrab_NoName_2020-6-11_11-25-10_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/296d3043-5e2b-5f99-5fb1-9bb90b04b80d.png)

###Logicool G29 Driving Force ステアリングホイール＆ペダル
ペダルも同時に取得できたので便利
![SnapCrab_NoName_2020-6-11_11-25-30_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/11afd293-c254-519c-91ce-aee482168572.png)

Logicoolのゲームソフトウェアが起動していることが条件
![SnapCrab_NoName_2020-6-11_11-29-55_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/018b95ee-26ca-9f25-eac4-ff6b9805020f.png)

インストール方法は過去投稿を参照
Logitech G29 SteeringWheel PCでUnityできるまで
https://qiita.com/mmt/items/4de0646118c37c952b19

###Logicool G X56 VR Simulator Compatible HOTAS Joystick
スティックとスロットルは別USBだったのでそれぞれデータ取得でした
![SnapCrab_NoName_2020-6-11_11-25-41_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/84c9a713-816b-dce9-e3ee-27ce024f00c6.png)

###PS4用ワイヤレスコントローラー(DUALSHOCK 4)(2020/07/07追記)

有線接続で確認

タッチパッドは取得できていないかもでした。。

![NoName_2020-7-8_9-27-24_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/f97d029c-8aad-13aa-7178-6d56f0cefe48.png)


## 参考サイト
Unityでゲームパッドからの入力したいからまとめてみる(XBox One Controller)
https://hakonebox.hatenablog.com/entry/2018/04/15/125152
Installation guide | Input System | 1.0.0
https://docs.unity3d.com/Packages/com.unity.inputsystem@1.0/manual/Installation.html
【React】【TypeScript】GitHub Pagesデプロイの為、buildからdocsディレクトリへファイル移動自動化

#はじめに
`create-react-app`,`yarn run build`でbuildファイルを作成し、それをGitHub Pagesにデプロイする為、`docs`ディレクトリに移動させ反映させるための設定。

`create-react-app`の依存関係に含まれる`react-scripts`というモジュール（builder）を使う場合、`build`の出力先のディレクトリを指定できない為、追加設定を行った。



#package.json

```json

{
  "name": "app_name",
  "version": "0.1.0",
  "private": true,
  "homepage": "./",　※①
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "typescript": "~3.7.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "postbuild": "node copyFile.js", ※②
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

```

##① "homepage": "./"

- [[フロントエンド] create-react-appのビルド結果で、js/cssを相対パスで読み込みたい](https://www.yoheim.net/blog.php?q=20180418)

こちらの記事を参考にさせて頂き、設定した。

これで、

```html
<script src="./static/js/hogehoge.chunk.js"></script>
<script src="./static/js/main.fugafuga.chunk.js"></script>
```
といったように相対パスでbuildされたjsファイルが読み込まれる様になり、`build`ディレクトリ内を`docs`ディレクトリに移動させても問題なく読み込まれるようになる。

## ② "postbuild":"node copyFile.js"

こちらを設定することで、`yarn run build`のbuildの後に指定したjsファイルが実行されるようになり、そのファイルに`build`ディレクトリ内を`docs`ディレクトリに自動的に移動させる為のコードを追加する。



#copyFile.js（例）

```js
var path = require('path');
var fse = require('fs-extra');

const copyPath = path.join(__dirname, "./build/");
const pastePath = path.join(__dirname, "./docs/");
//指定したpathへディレクトリ内のファイル・ディレクトリをまとめてコピー
fse.copySync(copyPath , pastePath);

// buildディレクトリごと、内容を削除
const rmdir = './build';
fse.removeSync(rmdir);
```

###終わりに。
最後まで読んで頂きありがとうございます:bow_tone1:
転職の為、未経験の状態からRailsを学習しております。正しい知識を着実に身に着け、実力のあるエンジニアになりたいと考えています。継続して投稿していく中で、その為のインプットも必然的に増え、成長に繋がるかと考えています。
今現在、初心者だからといって言い訳はできないですが、投稿の内容に間違っているところや、付け加えるべきところが多々あるかと思いますので、ご指摘頂けると幸いです。この記事を読んで下さりありがとうございました。
Firestoreのリアルタイムリスナーの書き方

FirestoreにはWebSocketを利用して、データの更新を各端末に送信する**リアルタイムリスナー**という仕組みがあります。
更新を確認するのにポーリングする必要がなく非常に強力な仕組みです。

CRUDの書き方は以下を参照してください。
[FirestoreのCRUD操作の書き方まとめ
](https://qiita.com/sano1202/items/cef4aa43a8905d999664)

# 単一ドキュメントのリッスン
リアルタイムリスナーを使用たい場合は、ドキュメントのリファレンスでonSnapshotメソッドを使用します。

```js
 db.doc('items/[documentId]')
   .onSnapshot(function(doc) {
      
       // ドキュメントが作成、変更、削除されるたびに出力される
       console.log(doc.data());
       
       // リスナーの停止
       unsubscribe();
   });
```
リスナーを停止する場合は、unsubscribeメソッドです。

# 複数ドキュメントのリッスン
複数ドキュメントの変更を検知したい場合も同様です。

```js
 db.collection('items')
   .where('price', '>', 100)
   .onSnapshot(function(snapshot) {
       let items = [];
       snapshot.forEach(function(doc) {
           items.push(doc.data());
       });
       console.log(items[0].price);
   });
```

# 変更内容によって処理を分岐する
ドキュメントの更新内容によって処理を分岐したい場合は、スナップショットからdocChangesメソッドを呼び出します。

```js
db.collection('items')
  .where('price', '>', 100)
  .onSnapshot(function(snapshot) {
    snapshot.docChanges().forEach(function(change) {
        // 追加時
        if (change.type === 'added') {
            console.log(change.doc.data().name);
        }
        // 更新時
        if (change.type === 'modified') {
            console.log(change.doc.data().name);
        }
        // 削除時
        if (change.type === 'removed') {
            console.log(change.doc.data().name);
        }
    });
});
```
スプレッドシートのセルに画像を添付する

# Googleスプレッドシートに画像を添付

## セルにピッタリ張り付ける
1.クリップボードにコピー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124838/7e66951d-419a-548a-698d-04f36f25e457.png)
2.セルに張り付ける
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124838/24b5e54c-0071-d119-54ab-eef0876a1823.png)
3.右上のメニューから「選択したセルに画像を置く」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124838/13eac288-2bd7-2b28-725a-af4b9e44459c.png)
4.完成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124838/9a8a8282-dc74-0499-912f-4f56bd68782d.png)
## 元に戻す（ピッタリをやめる）
1.セルを選択しコンテキストメニュー表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124838/84ae1722-bb6b-aad4-3ac3-856f69ed37e3.png)
2.「セル上に画像を置く」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124838/990f7bcd-f9aa-c4b0-e1b2-423fe4156115.png)
## セルに張り付けた画像のURLを取得
1.セルを選択しコンテキストメニュー表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124838/28b8806c-5219-2297-3ce7-b49fb04ec542.png)
2.「編集履歴を表示」から「画像」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124838/095b75f6-ac5d-f0bd-b0a6-8979d21f773d.png)
3.新しいタブが開き、URLを取得
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124838/210111be-3272-9159-1289-985f348a6c43.png)

※特に共有していないスプレッドシートでも、画像のURLは直リンクできる様子
VSCodeからPyCharmへ移行

VSCodeからPyCharmへ移行しました。理由はUbuntuでVSCodeのDockerのリモートデバッグがなぜか止まらなかった為です。
VSCodeのDockerのリモートデバッグで止まらないのはMacでは動作したのでLinux系固有のバグ？の気がしています。

### UbuntuにPyCharmインストール

まずはUbuntuにPyCharmをインストールしてから動かすまで。
これ系では珍しくshellでコマンド叩いて起動する形になります。
[UbuntuでPyCharmインストールからHello Worldまでやってみた](https://qiita.com/m0p1nt/items/3c4cb0796f09fce0b591)

### Dockerコンテナのリモートデバッグ

次にやりたかったDockerコンテナのリモートデバッグ。動作はしましたがかなり遅い・・。動作させてるマシンスペックはかなりいいのでおそらくソフトウェアの問題。MacのVSCodeデバックはもっと早かったです。
[Dockerを使用してインタープリターを構成する](https://pleiades.io/help/pycharm/using-docker-as-a-remote-interpreter.html#)

### PyCharmの設定

次に設定周り。下記を参考にさせてもらい最強の系譜に参画。
[PyCharm のオレオレ最強設定](https://akiyoko.hatenablog.jp/entry/2017/03/10/082912)
[最強のPython統合開発環境PyCharm](https://qiita.com/yamionp/items/f88d50da8d6b548fc44c)

### 便利なショートカットキー

intellij系の開発ツールは使いこなす系の勉強会が開かれる程、習熟すると生産性が変わってきます。
ショートカットキーについては下記を参考にさせてもらいました(^O^)
[忙しい人のためのIntelliJ IDEAショートカット集（´-`）](https://qiita.com/yoppe/items/f7cbeb825c071691d3f2)
[IntelliJ のショートカット一覧(Windows)](https://xyk.hatenablog.com/entry/2013/12/18/093256)

#### 個人的によく使うもの抜粋

* 定義へ移動
    * Ctrl + クリック
* 履歴移動
    * 前へ次へ
        * Alt + 右 or 左
* コードフォーマット
    * Ctrl + Alt + L
* 全検索
    * Shift + Ctrl + F
* 簡単検索
    * Shift2回クリック

### その他

一通り設定してコードでエラーが表示されていたのを下記で解消！
[Pycharm：import文で「Unresolved reference」と警告されてしまう](http://virgo.hatenadiary.jp/entry/2015/08/23/023717)
VSCodeでAtomのようにaとshift+aで新規ファイル, 新規フォルダを作る

# 追記
Atom Keymap for VS Codeというのがあったので、これで解決してしまった。
https://marketplace.visualstudio.com/items?itemName=ms-vscode.atom-keybindings

# 背景
AtomからVSCodeへ乗り換えたので、Atomみたいにファイルやフォルダを追加したかった。

# 手順
## keybindings.jsonにショートカットを設定

### 1. keybindings.jsonを開く  
`cmd+shift+p`でコマンド一覧を開き、`Preferences: Open Keyboard Shortcuts (JSON)`を選択すると開ける

### 2. 以下を設定する
```keybindings.json
// Place your key bindings in this file to override the defaults
[
  { "key": "a", "command": "explorer.newFile", "when": "explorerViewletFocus" },
  { "key": "shift+a", "command": "explorer.newFolder", "when": "explorerViewletFocus" }
]
```

## vscodeのfile filtering機能を消す
現状のままだとフォルダを選択しながら「a」と打つと、VSCodeのデフォルトのフィルタ機能が発火してしまい、ファイルが作れない。
その機能をオフにする。

### 1. Settingsタブを開く  
`cmd+,` で開ける

### 2. workbench.list.automaticKeyboardNavigationをfalseにする
Settingsタブで`automaticKeyboardNavigation`と検索すると出てくるので、チェックを外す

### 3. お好みで設定を割り当てる
以下のように「フィルタ機能使えなくなっちゃうよ！」「使いたかったらcommandでlist.toggleKeyboardNavicatioonを使ってね！」「ショートカットも割り当てられるよ！」って書いてあるので、割り当てたい場合は先ほどのkeybinding.jsonにショートカットを割り当てれば良い。(僕は使わない気がしたので割り当てていない)
<img width="948" alt="スクリーンショット 2020-06-11 11.06.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211192/1df6fa2e-df85-8c68-d2f7-24ec75217e74.png">

## 参考
https://stackoverflow.com/questions/39599514/vs-code-add-a-new-file-under-the-selected-working-directory
https://superuser.com/questions/1417361/how-to-disable-file-filtering-in-vs-code-sidebar-explorer