OmniAICreator/Qiita-1.07M huggingface dataset:
KotlinでAndroidアプリ開発時、ローカルのDBに保存処理を行った際に起こったエラーと対策

## はじめに

Kotlinで、バーコード読み取り機能を使用したAndroidアプリ開発時、
読み込んだ値をローカルのDBに保存する際に起こったエラーと、解決方法を共有したいと思います。

## エラー内容
`Cannot access database on the main thread since it may potentially lock the UI for a long period of time.`

UIスレッドを長時間ロックしてしまう可能性があるため、メインスレッド上でDBへのアクセスはできないようです。

## 解決方法


### 依存の追加
まずは、build.gradle に下記を追加します。

```app/build.gradle
dependencies {
    implementation 'io.reactivex.rxjava2:rxjava:2.1.12'
    implementation 'io.reactivex.rxjava2:rxandroid:2.0.2'
    implementation 'io.reactivex.rxjava2:rxkotlin:2.2.0'
```

### 当該ソースの修正
修正前

```kotlin

SampleRepository.insert(records) // 実行したいDBアクセス処理
```

修正後
           
```kotlin

Completable.fromAction {
  SampleRepository.insert(records) // 実行したいDBアクセス処理
}.subscribeOn(Schedulers.io()).subscribe()
```

これでエラーがなくなりました。

## 参考
https://qiita.com/toastkidjp/items/49ad3035a6df525ce040
Androidライブラリ公開

2020-05に別の場所で書いた社内用メモの転記です。
変わったところがあれば修正していきます。

※2020-11-05
※公開方法、ここに書いた方法では動きませんでした。（半年前なのに。。）
※いろいろな方の記事を参考に試行錯誤してみましたが、うまくいきませんでした。
※動作する手順がわかったら、また更新します。。。

# Androidライブラリの公開手順
1. GitHubにレポジトリ作成 → Push
    [SankoSC GitHub](https://github.com/sankosc?tab=repositories)
1. Bintrayにレポジトリを作る
    [Sankosc Bintray](https://bintray.com/sankosc)
1. ライブラリのbuild.gradleにpublish情報を記述

    ```xml:build.gradle
    publish {
        userOrg = 'sankosc'
        groupId = 'jp.co.sankosc'
        artifactId = 'webapi-client'
        publishVersion = '1.0.0'
        desc = 'This is a Web API client library for android.'
        website = 'https://github.com/sankosc/webapi-client-android'
        artifactId = 'webapi-client'
    }
    ```
    artifactId, artifactId：Bintrayで登録したレポジトリ名
    website：GitHub レポジトリ
    desc：説明
1. APIキー取得
右上のメニュー→「Edit profile」→左側のメニューの中の「API Key」
1. アップロードコマンド

```
./gradlew clean build bintrayUpload -PbintrayUser=nozaki -PbintrayKey=[APIキー] -PdryRun=false
```

1. jCenterに登録
    Bintrayの画面で登録ボタンを押す

# アップロードコマンドに失敗するとき
ビルドに失敗した場合 kotlinがないとか言われたとき
javaのpathが、sdkの方に通ってないから。sdkの方にパスを通す
[参照:Android開発環境でコマンドラインからのビルドが失敗する場合の対処](https://qiita.com/colomney/items/aafb62d8d1b8f08d5143)

# 参照
https://github.com/novoda/bintray-release (公式)
https://qiita.com/Nabesuke/items/06bc67b6667483a97030
https://qiita.com/gupuru/items/aa81f007d306fc6c4a2c
no space left on device エラーが出た時の対処法

##はじめに
僕がDocker環境で開発をしている時に`docker-compose build`をした際に同じエラーが2回出たので忘れないようにと思い投稿しました
##今回のエラー対処
まだ学習して日が浅いため容量が足りないとしかわからなかったため2つの方法を試した
##imageを一括削除
僕自身このやり方が一番効いた
buildを繰り返すとその分imageがどんどん積まれて、容量が使われる。

```sh
$ docker image prune
#削除してもいいですか？と効かれるのでyを入れてEnter
WARNING! This will remove all dangling images.
Are you sure you want to continue? [y/N] y
```
これは最新のbuildだけ残してその他を一括削除して容量を減らしてくれる優れもの！
##volumeの削除
これも少し効果があった

```sh
#有効でないvolumesを確認する
$ docker system df
$ docker volume ls -q -f dangling=true
# 参照されてないvolumesの削除
$ docker volume rm `docker volume ls -q -f dangling=true`
```
##参照
とても勉強になりました。ありがとうございます。
https://qiita.com/sakymark/items/df58ea2fd9179eddc566
iTerm2のマウスで選択するとコピーされる機能を無効化する

画像の設定を変更する。

![Preferences 2020-11-05 11-19-11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403521/bcebdf02-261d-d442-509b-839c4a064598.png)
未経験から二週間でRuby技術者認定試験Silverに合格

9月の下旬にRuby技術者認定試験Silverを受験した所、無事合格する事ができました。勉強期間は二週間弱、得点は８４点でした。

具体的な学習時間は集中できたのが平日2〜3時間程度。休日は他の用事があったため勉強していませんでした。試験の前日のみ+3時間学習しています。
<b>Webエンジニアに転職したばかりで、Rubyの実務経験はありません。</b>Railsチュートリアルを軽くやってみたくらいです。


##勉強方法と教材

使った教材は以下の三つです。

* <b>[RubyExamination](https://rex.libertyfish.co.jp/)</b>

恐らく一番利用したサイトです。ほぼ毎日50問を解いて、最終的には9割安定して取れるようになりました。最初はまるで点数が取れないと思いますが、まず解いてみて「解説で分からない事があったら調べる」事を繰り返すと良いです。

* <b>[[改訂2版]Ruby技術者認定試験合格教本(Silver/Gold対応)](https://www.amazon.co.jp/%E6%94%B9%E8%A8%822%E7%89%88-Ruby%E6%8A%80%E8%A1%93%E8%80%85%E8%AA%8D%E5%AE%9A%E8%A9%A6%E9%A8%93%E5%90%88%E6%A0%BC%E6%95%99%E6%9C%AC-Silver-Gold%E5%AF%BE%E5%BF%9C-Ruby%E5%85%AC%E5%BC%8F%E8%B3%87%E6%A0%BC%E6%95%99%E7%A7%91%E6%9B%B8/dp/4774191949) </b>

公式の問題集です。誤植はあるものの、<b>実際の試験でほぼそのまま出た問題</b>が複数あったので、やっておくのがベターです。
silver試験の場合、テキストの部分を読み込む必要性はあまりなく、基礎力確認問題と模擬試験を繰り返し、分からない事があったら参照するという使い方がオススメです。

* <b>[模擬問題集](https://gist.github.com/sean2121/945035ef2341f0c39bf40762cd8531e0) </b>

githubリポジトリに存在する模擬問題です。上記の2つを繰り返していると問題を覚えてしまう懸念があったので、合間にこちらも挟んでいました。

この3つを全て9割以上得点できるまで、ひたすら繰り返しました。

##あまり使わなかった教材

* [Progate](https://prog-8.com/)
* [プロを目指す人のためのRuby入門](https://www.amazon.co.jp/%E3%83%97%E3%83%AD%E3%82%92%E7%9B%AE%E6%8C%87%E3%81%99%E4%BA%BA%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AERuby%E5%85%A5%E9%96%80-%E8%A8%80%E8%AA%9E%E4%BB%95%E6%A7%98%E3%81%8B%E3%82%89%E3%83%86%E3%82%B9%E3%83%88%E9%A7%86%E5%8B%95%E9%96%8B%E7%99%BA%E3%83%BB%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E6%8A%80%E6%B3%95%E3%81%BE%E3%81%A7-Software-Design-plus%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA/dp/4774193976)
* [Rubyがミニツク](http://www.minituku.net/)

どれも素晴らしい教材である事は間違いありませんが<b>「Ruby silverに合格するという目的」</b>においては、あまり必要性を感じませんでした。プロを目指す人のためのRuby入門は、リファレンスガイド代わりに持っておいても良いかなと感じたくらいです。

##注意すべき点

実際の試験は本やWebの模擬問題より<b>若干難易度が高い</b>と感じました。私は模擬問題はほぼ完璧にできた状態で受験しましたが、答えがはっきりと分からない問題が5問はありました。
特に破壊的、非破壊的メソッドの挙動は確実に出題されるので、しっかり抑えておく必要があります。
実務経験者ならばともかく、未経験者は模擬問題を安定して九割取れるようになってから受験するのが良いでしょう。受験料も安くはないので...。

また、当たり前ですが試験の開始時間は厳密に決められていて、<b>遅刻すると受験が不可能になってしまう</b>ので、ちゃんと10分前に会場入りしておきましょう。受付で身分証明書二種の提示を求められると思うので、これも忘れずに持っていきます（自分の場合は免許証+健康保険証を提示）

##まとめ
Rubyのメソッドや動作を体系的に学ぶ事ができたので、受験してみて良かったと感じています。
会社の方にも合格した事を伝えると喜んでいただきました。
それほど難しい試験ではないので、興味がある方は気軽に受験してみると良いと思います。
ブラウザでrequireを使う方法2選

皆さんこんにちは。
[プロフセンド](https://profsend.ga)を開発しているぐみぃです。
皆さん、こんなことを思うことがありますか？

**｢ブラウザでもrequireできたらな〜｣**なんて。

実は、いろいろな方法で使うことができるのです。
その中から2つの方法を紹介します。

# browserifyを使った場合

このパッケージは、
ブラウザでrequireを使うだけのものです。

まずは、

     $ npm i -g browserify
でパッケージをグローバルインストール。
次に任意のJavaScriptファイル(input.js)に
requireしてください。
例えば、jqueryをrequireする場合、

    var $ = require(jquery);

という感じになります。
あとは、コマンドラインで

    browserify input.js -o output.js

できるようになります。

# webpackを使った場合
webpackは、jsファイルや画像などを
バンドル化(ひとまとめ)にするパッケージです。
僕はこの使い方でやってます。
まずは、

    $ npm i -g webpack webpack-cli

でパッケージをグローバルインストールします。
任意ディレクトリで

    $ npm init
    $ npm i -D webpack

でwebpackをプロジェクトにwebpackをインストール。
続いて、任意のjsファイル(input.js)を作成し、
以下のテキストを
｢webpack.config.js｣で保存してください。

    const path = require("path");
    const webpack = require("webpack");
     module.exports = {
      mode: "development",
         entry: "input.js",
      output: {
        filename: "output.js",
        path: path.join(__dirname, "dist/")
      }
    };

そして、以下のコマンドを実行してください。

    npx webpack

これでrequireが使えるようになります。

# 参考
[ざっくりbrowserify入門](https://qiita.com/fgkm/items/a362b9917fa5f893c09a)
ServiceNow - クエリービジネスルールでユーザが参照できるレコードを制限する

#概要
ServiceNowのACLを利用してユーザが扱えるデータ操作を制限することが可能。しかし、ACLで一覧を表示した場合は表示されないレコードも総数に含まれる。ユーザが権限あるレコードのみを総数の対象にする場合はクエリービジネスルールを作成する。

##クエリービジネスルールの作成手順
1．アプリケーションナビゲータから「System Definition」>「Business Rules」を選択。
![query_business_rule_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698027/70c2b890-0233-e173-2800-3cc90a72f1c2.png)
2.「New」ボタンを押下
![query_business_rule_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698027/29b8efcb-95da-fe33-17f8-f08776e4642e.png)
3.次の項目を設定

|No.|項目|値|コメント|
|---|---|---|---|
|1|Name|Query Business Rule Sample 1|任意のビジネスルールの名前|
|2|Table|Incident|条件を設定するテーブル|
|3|Advanced|チェック|スクリプトを記述するためチェック|

「When to run」（実行条件）タブを選択して次の項目を設定する

|No.|項目|値|コメント|
|---|---|---|---|
|4|When|before|クエリービジネスルールの場合は「before」|
|5|Query|チェック|クエリービジネスルールなのでチェック|
![query_business_rule_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698027/f450acb4-d66b-2250-5fa4-3e1c3d8d8657.png)
4.「Advanced」タブを選択してスクリプトで条件を記述する。記述した後にビジネスルールを保存する。
次の例ではインシデントのstateがClosed以外でpriorityがCriticalのインシデントのみを表示する
![query_business_rule_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698027/782165fb-0b3e-32eb-56d6-4a0d94d2f0a5.png)
5.インシデント一覧を表示してPriorityがCriticalかつStateがClosed以外のインシデントのみが表示されていることを確認
![query_business_rule_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698027/36e11dee-a781-d277-e489-5b09eeb84a36.png)
6.実際に利用する場合は管理者はすべての表示できるようにするためにif条件を設ける。
![query_business_rule_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698027/f3baf36e-604c-976a-6ad3-5b64115110a5.png)
【個人開発向け】Gitが変。Gitの履歴を全て初期化してやり直す方法。

完全に私が悪いのだが、最初のコミットの時点でコマンドを間違えてしまい、リモートにpushしようとしてもREAD.me以外反映されないというなぞの状況に陥った。

`git init`で初期化はできるのだが、これではlogが残ってしまう。
完全に初期化はできないのかと調べたら[このQiita記事](https://bityl.co/4Jcu)にたどり着いた。

#それまでにやったこと
色々やりすぎて何がなんだか覚えてないので、かなり要約して戦歴を残す。
最初に`git push -u origin main`のコマンドを売ってしまったところ、以下のようなエラーが

```
error: src refspec main does not match any
error: failed to push some refs to 'https://github.com/〜.git'
```
--forceオプションをつけても同じエラー文、

その後色々試して再度pushするも、
`Everything up-to-date` と出て、一向にリモートにはREAD.me以外反映されなかった。

以下面倒臭いのでやった試したコマンドの履歴だけ残す。
![Screen Shot 2020-11-05 at 10.52.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619224/68b072a0-2463-57aa-5bd9-b0bde15e186d.png)


#解決方法

```
$rm -rf .git
```
```
$git init
Initialized empty Git repository in 〜/.git/ 
```

```
$git log 一応きちんと完全初期化できているか確認)
fatal: your current branch 'master' does not have any commits yet
```

ここまできたら、いつも通りに

```
$git add .
$git commit -m "First commit"
$git remote add origin https://github.com/〜
$git push -u origin master
```


たまーにコマンドをミスってこういう事が起こる。
完全に初期化しても個人開発なら他の人に迷惑をかけることもないので、この方法はまた使えるなと思った。
JavaScriptの関数定義まとめ

JavaScriptの基本の基だと思いますが、認識が今一つ曖昧な気がしたため、自身の中で整理する意味を込めてまとめました。
関数定義には(基本的なものは)4種類あり、それぞれ違いがあります。

# 1.関数宣言
```
function helloWorld(){
  console.log("Hello World")
};

helloWorld();
```
"function"と記述することで関数を定義することができます。
その後"helloWorld"と続けることで、関数名を決めることができます。
()に入るのは引数。{}内は処理の内容を記述します。
定義後は、"関数名()"と記述することで処理を実行できます。

# 2.関数式
名前のついていない関数を、変数に代入して定義する構文です。

```
const helloWorld = function(){
  console.log("Hello World")
};

helloWorld();
```

#### 関数宣言と関数式との違い

関数式の = から先に注目してみます。

```
function(){
  console.log("Hello World")
}
```
前述の関数宣言のコードと比較すると、関数名の"helloWorld"がないことがわかリます。
このような命名されていない関数を**無名関数**と言います。
この無名関数は、そのままでは定義されていない状態なので使えません。
関数式とは、無名関数を変数に代入することで定義し、使える状態にしたものです。
今回は、"const"で定義した"helloWorld"という変数に代入しています。

もう１つ、JavaScriptにおいて関数宣言は先に読み込んでくれますが、関数式は先に定義しなければ読み込まれないという違いがあります。
どういうことかというと、

```
helloWorld();

function helloWorld(){
  console.log("Hello World")
};
```

```
helloWorld();

const helloWorld = function(){
  console.log("Hello World")
};
```

このように、関数定義の記述の前に関数を実行しようとすると、前者では問題なく"Hello World"が出力されますが、後者はエラーが発生してしまいます。

# 3.即時関数
定義と同時に関数を実行できる構文です。
関数宣言も関数式も、定義後に改めて"関数名();"と記述することで実行していました。

```
(function(){
  console.log("Hello World")
})();
```
括弧が多くややこしいですが、やっていることはこうです。

```
(無名関数)();
```

無名関数はそのままだと定義がされていません。
しかし、( 無名関数 )と括弧で括ることにより、無名関数を無名のまま定義することができます。
更に( 無名関数 )は関数として定義しているため、その後"();"と続けることで、同時に実行しています。
関数の実行には"関数名();"と記述するわけですが、それと同じ構図になっています。だから定義と同時に実行できるわけですね。

# 4.アロー関数
functionを省略し、()=>という記述で定義する構文です。
関数式の構文で置き換えるとこうなります。

```
const helloWorld = function(){
  console.log("Hello World")
};

helloWorld();
```
```
const helloWorld = () => {
  console.log("Hello World")
};

helloWorld();
```
記述を短く、シンプルにできるというメリットがあります。
VBAでシートコピーしたら数値の表示形式が変わった

##結論からいうと
これ↓。
[Excel で VBA の WorkSheets.Copy メソッドを使ってシートコピーを行うとセルの書式が引き継がれない場合がある - Microsoft公式](https://support.microsoft.com/ja-jp/help/956331)

##しょうもないやらかし
解決策：
``#,##0;[赤](#,##0)``
これ使えって書いてあるけど使ってるよ！
と思ってたらこれ↓になってた。
``#,##0_);[赤](#,##0)``

なにこれ？と思ったら会計系の書式↓から通貨記号取ったやつだったのでした。
``$#,##0_);[赤]($#,##0)``

おそまつ。
Logic Apps で Azure Synapse Analytics の課金情報を取得しメール通知する

# はじめに

Azure Portal の Synapse ワークスペースの画面にオートメーションのタスクが追加されていました。アイコンを見る限り、Logic Apps のリソースが動作するものと思われます。
![20201104_synapse_automation_01_task.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685288/4b5e18ee-210f-9694-04a5-f2a788abcdc0.jpeg)

デフォルトでテンプレートも用意されており、どうやら毎月のコストを通知してくれるようです。
![20201104_synapse_automation_02_task.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685288/82cc517c-34de-9a15-ac1b-dc16b398cd4b.jpeg)

今回はこの機能を試してみた結果と、一部カスタマイズした内容についてご紹介します。

## リソース作成

テンプレートを元にリソース作成を進めていきます。サービス接続用のログイン資格情報を聞かれるので、それぞれ入力します。Azure Resource Manager に関しては対象のサブスクリプションに対して適切な権限を持っているアカウントでないと実行時にエラーになりますので、ご注意ください。
![20201104_synapse_automation_03_task.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685288/17ca1410-b36b-4839-d72a-7a352578a56c.jpeg)

画面を進め、タスク名と通知先の E メールアドレスを入力します。![20201104_synapse_automation_05_task.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685288/a976c17c-6294-7369-b2f9-d8edcddb6b1a.jpeg)

これで作業は完了です。以下のようにタスクが作成されていることが、確認できます。
![20201104_synapse_automation_06_02_task.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685288/765e6592-ae8b-5fbb-8cce-77214de0f606.jpeg)

デザイナーに表示される処理フローは以下の通りです。大まかな流れとしては、「Invoke resource operation in provider」で対象サブスクリプション内の全リソースの課金情報を取得し「Filter array」で Resource ID による絞り込みを行い、「Send an email (V2)」でその金額をメール通知する、といったものになります。
![20201104_synapse_automation_07_task.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685288/87344a82-f0f3-7b8e-45d2-b3f3f89664cd.jpeg)

## 実行、内容解析、修正

出来上がったタスクを手動実行すると正常に動作し、メールが届きました。しかし、Synapse の割には妙に金額が少ないです。よくよく見てみると、 **取得しているリソースが今動かしている Logic Apps 自身になっていました。** これは、期待していた動きとは異なります。
![20201104_synapse_automation_08_task.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685288/b5816c5d-5eb8-96fb-c632-c0d164de8167.jpeg)

原因特定のため、自動生成された部分も含めて設定内容を精査していきます。まず「Filter array」の設定から、「ResourceId」というパラメーターを絞り込み条件に指定していることがわかります。
![20201104_synapse_automation_09_task.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685288/e3fb3618-d582-df8b-1e4b-9383cc487eb2.jpeg)

次にコードビューで ResourceId パラメーターの内容を見てみると、メールに記載されていた Logic Apps のリソース ID が指定されていることが確認できました。そこで、このパラメーターの値を Synapse の Dedicated SQL pool のリソース ID に上書きします。
![20201104_synapse_automation_10_task.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685288/dcce05b5-e18c-73ac-3e88-87dc9b2e3ba7.jpeg)

上書き後に再度タスクを実行することで、Synapse Analytics の Dedicated SQL pool の利用料金がメール通知されることが確認できました。
![20201104_synapse_automation_11_task.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685288/6dc303be-2d2c-49bb-f01c-332e81df6e74.jpeg)

## まとめ

Logic Apps ベースで作成されるタスクを微修正することで、Synapse Analytics の利用料を通知する仕組みが簡単に構築できることをご紹介しました。Synapse Analytics をプロダクト環境で使用する場合は扱うデータ量も膨大なものとなり、コスト管理にも注意を払う必要が出てきますので、こういった仕組みが Azure 側で提供されているのはありがたいですね。

この仕組みに関してはSpark pool 等の課金情報も併せて取得したり通知先を Teams にするなど色々と応用が利きそうなので、時間のあるときにまた試してみたいと思います。
【Laravel】envファイルの値を動的に変更して使用する

#概要
Laravelの.envファイルに何かしらの環境変数の保存場所を作り、動的に変更する方法をメモします。webアプリ内で共通の値を扱う場合などに有用です。

#解決方法
「Laravel env 変更」とかでググると出てくる[こちらの記事](https://www.it-swarm-ja.tech/ja/php/laravel%E3%81%A7env%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E5%A4%89%E6%95%B0%E3%82%92%E5%8B%95%E7%9A%84%E3%81%AB%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF%E3%81%A9%E3%81%86%E3%81%99%E3%82%8C%E3%81%B0%E3%82%88%E3%81%84%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F/1055959562/)を参考に、コントローラーに記述するだけで変更できます。
まず、webアプリの.envファイルを開いて適当な環境変数を追加してみます。

```php

APP_NAME=Laravel
APP_ENV=local
APP_KEY=
APP_DEBUG=true
APP_URL=http://localhost
// 省略
TEST=0 // 追加
```
このままでも使う事が出来ますが、本番環境でも使うならconfig() 経由で使う必要があるので、config/app.php辺りに記述します。app.phpに限らず、config下の他のファイルに記述する事も可能です。

```php

<?php

return [
    'TEST' => env('TEST'),
// 省略
```

その後、変更を行いたい部分で以下のようなコードを記述します。


```php
// envファイルを書き換える
$path = base_path('.env');

if (file_exists($path)) {
   file_put_contents($path, str_replace(
    'TEST=' . config('app.TEST'),
    'TEST=' . //ここに変更したい値を記述,
    file_get_contents($path)
   ));
}
```
file_existsでenvファイルの存在を確認し、file_put_contentsでファイルに値を書き込んでいます。

値はconfig()で扱う事が可能です。

```php
config('app.TEST')
```

これで値を自由に使う事ができます。
簡単に変えられると思いきや、意外と力技でした。

##参考
[Laravelの.envの値はconfig()経由で使う]
(https://hiroto-k.hatenablog.com/entry/2018/03/28/213000)
[Laravelで.envファイルの変数を動的に変更するにはどうすればよいですか？](https://hiroto-k.hatenablog.com/entry/2018/03/28/213000)
WebHookでkintoneのコメント時に自動でレコード登録する

今回、仕事の関係でkintoneのアプリのレコードに来たコメントをほかのアプリのレコードに登録する方法を検討する機会があったので軽くまとめてみることにしました。
</br>
# 前提

現在kintoneのレコードコメントに対してのイベントはサイボウズからの発表はありません。(2020/11/04 現在)
</br>

コメントの投稿時のイベントを捕捉しほかのアプリへのレコード登録を行えればそれがいいのですが非現実的な方法しかとれないため、
公式でサポートされているコメント投稿時のWebhook、それとGoogle Apps Script (以下 GAS と略称) を用いた簡易的なWebAPIを作成することとしました。
</br>

今回は検討するためでしたのでAWS lambda+API Gatewayで構成することはしませんでした。
</br>
# 実装
</br>
今回の実装は以下の手順で行うことで実現できました。
</br>
</br>

1.GASでのコード記述

2.記述したGASの公開

3.GASのエンドポイントをkintoneの対象アプリのWebHookへ登録


ToDoを登録する対象ユーザに関しては選択できるように今回はしていません。とりあえずは、コメント内で引用されたユーザに対して行えるようにしました。

</br>
</br>

# 最後に

今回に関しては初投稿ということで簡易的に書きました。さぼりではないです決して。ええ。　詳しい内容等の要望があれば追記しようかと思います。

</br>
</br>
</br>
</br>
【Laravel】文字コードが意図していない形式になってしまったログを可視化する

【Laravel】文字コードが意図していない形式になってしまったログを可視化する方法.md

## はじめに
Laravelのログを見ていたときに、値が以下のような表示になっていました。
※例です。

```
"\u826f\u54c1"
```

今回はこちらの情報を可視化する方法を以前教えていただいたので、共有します。

### 対策
#### これまでのログの取り方
以下のような方法でログが出力されるように実行していました。

```php:sample.php
  \Log::info($query->select("name")->get());
```

```ログの出力結果（一部）
  "\u826f\u54c1"
```

これだとどんな中身なのかがわからないので、困ってしまいます。
以下のような形で実行したら、うまく行きました。

```php:sample.php
  \Log::info("hoge",[$query->select("name")->get()]);
```

```ログの出力結果（一部）
  "ほげ"
```
ご参考になれば幸いです。
3分アジャイル  CI


## Continuously Integration

---

- 継続的開発
- を行うための技術
- コミットに対するテスト、ビルド、デプロイ

---

- Jenkins
- Travis
- CircleCI
- GitHub Actions

---

- 継続的な自動テスト
- アジャイル開発を行う上で重要

---

# なぜか

---

- スプリントごとにインクリメント
- スプリント中の手動のテストは間に合わない
- 自動テストで担保

---

## デイリー

- 開発チームがスプリントゴールを達成するために、私が昨日やったことは何か？
- 開発チームがスプリントゴールを達成するために、私が今日やることは何か？
- 私や開発チームがスプリントゴールを達成する上で、障害となる物を目撃したか？
Case(数式)のまとめ

[Answersで回答する時に使う情報のまとめに戻る](https://qiita.com/Keiji_otsubo/items/9e6e0e946826133eddc7)

+ [連動選択リストを考慮した入力規則](https://qiita.com/Keiji_otsubo/items/cf7c4c88a3c3c71b7078)

# CASE関数には、trueまたはfalseを返す関数を含めることはできません。代わりに、trueまたはfalseの式が数値を返すようにしてください。

+ [CASE function in formula field says - Error: Incorrect argument type for function 'CASE()' [closed]](https://salesforce.stackexchange.com/questions/377142/case-function-in-formula-field-says-error-incorrect-argument-type-for-functio)

こんな式を書いたらエラーです

```
CASE( Month__c ,
"1",true,
false)
```

:::note alert
エラー: 関数 'CASE()' の引数の型が間違っています。
:::




# Caseで選択リストを使う時

ISPICKVALは必要なく、そのまま使えます。

```
CASE( Field__c  ,
"Inside", Date__c -  Number__c,
""
)
```

一瞬これと間違えるんですよね。

```
CASE(
ISPICKVAL(Field__c, 'Inside'), 
Date__c -  Number__c,
""
)
```

# Caseを使ってOR条件を書く

数式のサイズを小さくするのに使えるかもしれない

```
AND(
ISCHANGED(OwnerId),
OR(
AND(TEXT(PRIORVALUE(Status))="Working", TEXT(Status)<>"New"),
CASE(RecordType.Name, "Delayed Order",1,  "Voicemail",1, "Claims",1,  "Case",1,0)=0))
```
[Validation to inhibit case owner change based on conditions?](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000BcylySAB)

# Caseで範囲指定を処理する

[ポイント結果によってランク付けする方法を教えてください](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000Cht2QSAR)

# Case でフィールド同士を比較する

```
CASE(Date__c,
Day_4__c, NAME, 
Day_5__c, NAME,
Day_6__c, NAME,
Day_7__c, NAME,
Day_8__c, NAME,  
NULL)
```

[Comparing Two Fields to Return Another Field](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000ECRKG)

# Caseの中では計算できないようだ。

```
CASE( Confidence__c , 
"25%", 25/100, 
"50%", 50/100, 
"75%", 75/100, 
"90%", 90/100, 
"100%", 1
, 0 )

CASE( Opportunity.Confidence__c,
'25%', 0.25,
'50%', 0.50,
'75%', 0.75,
'100%', 1.00,
0 )
```
しかし、この場合は機能した。しかし、Caseは追加する数値だけを記述した方が小さくなってよさそう。

```
CASE ( Owner:User.FirstName & ' ' & Owner:User.LastName,
" caseowner1 ", CreatedDate+2,  
" caseowner2 ", CreatedDate+5, 
CreatedDate+14)
```

+ [Date/time Formula Field to be updated based on case owner?](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000FYLg3SAH)
+ [Converting Picklist Values to Numerical Values](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000FYK2HSAX)
+ [Formula Review](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000HDTGqSAP)
SIerからWeb系エンジニアへジョブチェンジ

#はじめに
 - Web系自社開発企業３社（自社サービス:１社, 自社サービス+受託２社）に内定
 - Web系エンジニアを志したきっかけは[勝又さん](https://twitter.com/poly_soft)の[YouTube動画](https://www.youtube.com/channel/UC_HLK-ksslL-Z_2wiIZDlMg)

転職までに利用したサービスは、以下の通りです。

 - [雑食系エンジニアサロン](https://twitter.com/poly_soft)
 - [MENTA](https://menta.work/member/dash)
 - [Tech Academyフロントエンドコース](https://techacademy.jp/)
 
#自己紹介
 - 年齢：23歳（新卒2年目）
 - 会社：元請けSIer
 - 職業：システムエンジニア
 - 成果物：[github](https://github.com/umaibou1126)
 
 ![構成図-Page-1 (2)](https://user-images.githubusercontent.com/57199117/96358171-15209200-113f-11eb-8291-931e2a0481db.png)

#転職活動前のスキル

 - Java：新人研修3ヶ月で学習した程度
 - Vue.js：実務経験2ヶ月　※コードを読める程度
 - インフラ：オンプレミス案件に1年従事
 - 基本情報：午後2回落ちる（0.5点足りなかった）

#転職までの道のり

###2020年1月〜3月
 - Ruby on Rails基礎
   - [フルスタックエンジニアが教える 即戦力Railsエンジニア養成講座](https://www.udemy.com/course/rails-kj/)
   - [The Complete Ruby on Rails Developer Course](https://www.udemy.com/course/the-complete-ruby-on-rails-developer-course/)

 - AWS基礎
   - [これだけでOK！ AWS 認定ソリューションアーキテクト – アソシエイト試験突破講座（SAA-C02試験対応版）](https://www.udemy.com/course/aws-associate/)

###2020年4月〜6月
 - Railsポートフォリオ作成
 - [雑食系エンジニアサロン](https://twitter.com/poly_soft)オンライン交流会参加
 - [Qiita](https://qiita.com/umaibou1126)25本投稿　
 
###2020年7月〜8月
 - チーム開発体験（[雑食系エンジニアサロン](https://twitter.com/poly_soft)）
 - [Tech Academyフロントエンドコース](https://techacademy.jp/)
 - Vue.js学習
   - [超Vue.js 2 完全パック - もう他の教材は買わなくてOK！ (Vue Router, Vuex含む)](https://www.udemy.com/course/vue-js-complete-guide/)

###2020年9月〜10月
 - [MENTA](https://menta.work/member/dash)
 - ECSデプロイ / CircleCI / Terraformコード化
 - AWS 認定 ソリューションアーキテクト – アソシエイト取得

#転職活動
###活動実績
 - 応募：71社
 - 面接：11社
 - 内定：3社

###評価された点
 - ECS / CircleCI / Terraformの導入
 - AWS 認定 ソリューションアーキテクト – アソシエイト
 - Wantedlyプロフィールを```箇条書き```で書いた点

[![Image from Gyazo](https://i.gyazo.com/6b0ac9bc25e9f6b944565b3e1b32e8b1.png)](https://gyazo.com/6b0ac9bc25e9f6b944565b3e1b32e8b1)

###面接で聞かれた質問３選

 - 将来どんなエンジニアになりたいか
 - 社会人生活で最も嬉しかったこと
 - Web系エンジニアになりたい理由

#おわりに

転職活動の中で、```情報収集```の側面から、[雑食系エンジニアサロン](https://twitter.com/poly_soft)はかなり有益でした。
サロン内のオンライン交流会では、転職活動中の方から、現役エンジニアの方まで幅広く情報交換出来るため、モチベーションの向上に役立ちました。
【PHP初心者】簡単！csvファイルをエンコードし取得

[SplFileObject](https://www.php.net/manual/en/class.splfileobject.php#splfileobject.constants)を用いて、簡単にcsvファイルの中身を取得できるため参考にしてください。

### サンプルコード

~~~php
/**
 * @param string $file_name
 * @param string $from_encoding
 * @param string $to_encoding
 * @return array
 */
public function csvFileImport(
    string $file_name,
    string $from_encoding = 'SJIS-win',
    string $to_encoding = 'UTF-8'
) {
    // ファイルの取得
    $csv = new \SplFileObject($file_name);
    // フラグのセット
    $csv->setFlags(\SplFileObject::READ_CSV);
    // ポインタの初期化
    $csv->rewind();
    $csv_data = [];
    foreach ($csv as $per_row) {
        // ヘッダ行はスキップ
        if ($csv->key() == 0) {
            continue;
        }
        
        // 空行はスキップ
        if (count($per_row) == 0) {
            continue;
        }
        
        foreach ($per_row as &$per_value) {
            // 値毎の処理がある場合はここに記載

            // 文字エンコード
            $per_value = mb_convert_encoding($per_value, $to_encoding, $from_encoding);
        }
        
        // バリデーションを行う場合はここに記載
        
        $csv_data[] = $per_row;
    }
    return $csv_data;
}
~~~



### フラグ説明

| フラグ名      | 説明                                                   |
| ------------- | ------------------------------------------------------ |
| DROP_NEW_LINE | 行末の改行を読み飛ばす。                               |
| READ_AHEAD    | 先読み/巻き戻しで読み出す。                            |
| SKIP_EMPTY    | ファイルの空行を読み飛ばす。READ_AHEADと併用すること。 |
| READ_CSV      | CSVを行として読み込んでいく。                          |

PHPのVersion 5.3.9で`SKIP_EMPTY`の値が6から4に変更されました。

[こちら](https://qiita.com/suin/items/5f2322d2762d7d1677bb)のように不安定であるため、`DROP_NEW_LINE`、`READ_AHEAD`、`SKIP_EMPTY`は使わない方が良いと思います！
システムのボトルネック調査改善【AWS X-rayで何ができるか】

以前お伝えした運用改善系のサービスの一つAWS X-rayで何ができるのかを調べてみました。
[AWS運用改善サービスランキング【AWS Management Governance】](https://qiita.com/toma_shohei/items/a5feb73435ca20e8787d)


## システムのボトルネック調査に時間がかかっている
「システムが遅い、原因を調べてくれ」
システム遅延が起きると上記のような依頼が来ます。
私の現場ではAWS EC2とRDSを使った構成だったので、
各サーバのログを見てボトルネックを特定するという動きを取る必要がありました。
このボトルネックを特定する調査工数を削減するサービスがx-rayです。

## AWS X-rayとは
### AWS X-rayとは分散トレーシングを行うためのソフトウェア
Zipkinというソフトウェアが分散トレーシングを行うソフトウェアとしては代表的なようです。

[分散トレーシング技術について（Open tracingやjaeger）](https://www.slideshare.net/td-nttcom/open-tracingjaeger)

### 分散トレーシングとは
分散トレーシングはマイクロサービスのようなボトルネック特定に時間がかかるシステムのために発表された考え方の様です。
[第56回　AWS X-Rayによる分散トレーシング―マイクロサービスのボトルネック，障害箇所の特定](https://gihyo.jp/dev/serial/01/perl-hackers-hub/005602)

### AWS X-rayの概要
サーバーワークスのチャンネルでX-Rayについて分かりやすく解説していた動画がありました。
サーバレスでは簡単に使えるが一般的なサーバ構成（EC2＋RDS構成など）だと
SDKを利用する必要があるなど導入難度が変わってくるという印象です。

[【AWS UPDATE】AWS Step Functions が AWS X-Ray に対応 (2020/9/14 発表) #029](https://www.youtube.com/watch?v=DRdaVetldAg&list=LL)

導入するとアプリケーションのボトルネックが一目でわかります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311339/78f67c99-141b-2561-9e64-4860d1238d09.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311339/72fb371a-3f2b-b65f-1990-77e12fb9e10a.png)


### 導入要件
サポートしている言語など、導入要件は確認しておきましょう。
[AWS X-Ray のユースケースと要件](https://docs.aws.amazon.com/ja_jp/xray/latest/devguide/xray-usage.html)

## 活用方法
日本語の導入事例を探してみましたが、クックパッドの導入事例が見つかりました。
AWS X-RayとZipkinを比較して運用難度からAWS X-Rayに決めたとあります。
本格的なトレースデータの活用には至っていないということで、
どのように活用できるのかはわかりませんでした。
[クックパッドと分散トレーシング](https://techlife.cookpad.com/entry/2017/09/06/115710)

## まとめ
サーバレス向けサービスであることは最初から分かっていましたが、
調べてみて改めて導入難度や効果からEC2やRDSで構成される一般的なWEB+DB構成では
導入メリットは少ないかなと思います。
サーバレスのシステムに関わることがあれば再度勉強したいと思います。
【Google Charts】x軸日付の表示範囲を設定する方法

# はじめに

グーグルチャートの横軸を変更したい。
具体的には、左から今月の1日〜今月末でグラフを表示させたいときに、
ドキュメントが英語パラダイスで、どのoptionsを使うべきなのか理解しづらかったので備忘録。

# 解決方法

## options の hAxis.viewWindow.max/min を使う

```javascript
var fromThisMonth = new Date();     // 今月の1日
fromThisMonth.setDate(1);
var toThisMonth = new Date();       // 今月末
toThisMonth.setMonth(toThisMonth.getMonth() + 1);
toThisMonth.setDate(0);

var chartType = new google.visualization.ChartWrapper({
  chartType: 'ColumnChart',
  containerId: 'chart_div',
  options: {
    : //一部options省略
    :
    hAxis: {
      viewWindow: {
        min: fromThisMonth, // 最小表示
        max: toThisMonth    // 最大表示
      }
    }
  }
});
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682826/3f501f72-b6bb-512d-5143-9c293d410998.png)

# さいごに

日付の両端が2020年10月1日とか2020年10月31日とか出ないのは、
さらに options を追加したり、取得する「時・分」のところまでしっかり指定してあげないといけなかったりいろいろ原因はありそう。。。

参考：[Google Charts > Column Charts > Configuration options](https://developers.google.com/chart/interactive/docs/gallery/columnchart#configuration-options)
正常に動作しなくなった ESLint の react-native/no-used-styles に対応する

ESLint で未使用な style を検出する react-native/no-used-styles があります。便利で使っていたのですが、再計算を抑えるためメモ化を加えたところ、そのルールが正しく動作しなくなりました。なお、コード例は簡略表示しています。


```typescript:lintエラーが起こる
import memoize from 'lodash/memoize'

const Component: React.FC<Props> = () => {
  const styles = getStyles(hogehoge)
  return (
    <View style={styles.container} />
  )
}

const getStyles = memoize((hogehoge) => {
  return StyleSheet.create({
    // no-unused-style が表示される
    container: styleType<ViewStyle>({
      flex: 1,
    }),
  })
})
```

lintのエラーメッセージを見ると、以下のようになっていました。

> Unused style detected: undefined.container(react-native/no-unused-styles)

ん？なんでundefined？？

そこでESLintのコードを見て、検出ロジックを確認しました。どうやら、上記の `return StyleSheet.create({ ... })` が問題のように見えてきました。そこで、直接 `return` せずに書き直しました。

```typescript:lintエラーが無くなった
import memoize from 'lodash/memoize'

const Component: React.FC<Props> = () => {
  const styles = getStyles(hogehoge)
  return (
    <View style={styles.container} />
  )
}

const getStyles = memoize((hogehoge) => {
  const styles = StyleSheet.create({
    container: styleType<ViewStyle>({
      flex: 1,
    }),
  })
  return styles
})
```

react-native/no-used-styles が正しく動きました ✌('ω'✌ )三✌('ω')✌三( ✌'ω')✌ 


## まとめ

stylesをメモ化かつreturnで直接返してたというパターンで起こった問題なので、同じ問題に当たる方はとても少ないと思います。もし同じレアケースを引いた方がいれば、参考になれば幸いです。
[Laravel]Non-static methodのエラーの対応方法

# エラー文
```terminal
Non-static method App\Models\Person::getData() should not be called statically.
```
staticにしていないメソッドを呼び出せない。

# 対応方法
```php:HelloController.php
use App\Models\Person;
 
class HelloController extends Controller
{
    public function index()
    {
        $data = Person::getData();
    }
}
```
⬇️

```php:HelloController.php
use App\Models\Person;
 
class HelloController extends Controller
{
    public function index()
    {
        $person = new Person();
        $data = $person->getData();
    }
}
```
このようにモデルのインスタンスを作ってから呼び出すといけます。

モデル側を変更できるときは、functionにstaticをつけることでも対応できるみたいです。

```php:Person.php
class Person extends Model
{
    public static function getData()
    {
       //
```

## 参考文献
[Laravel：Non-static methodのエラーが発生した時の対応方法]
(http://raining.bear-life.com/laravel/non-static-method%E3%81%AE%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E7%99%BA%E7%94%9F%E3%81%97%E3%81%9F%E6%99%82%E3%81%AE%E5%AF%BE%E5%BF%9C%E6%96%B9%E6%B3%95)
[PHP5.6で「Non-static method 【x】 should not be called statically in 【y】 on line 【z】」とかいうエラーが出た。]
(http://piyopiyocs.blog115.fc2.com/blog-entry-1133.html)
HTTPのルール(やり取り)について小学生でもわかるように説明してみた

## 前提知識
### web
インターネットを活用して利用できるデータ

### webブラウザ
WEBサイトを閲覧するために使うソフト。Google Chromeやsafariがそれにあたる

### webサーバー
webサイトのサービスや機能を提供する側のコンピュータ

##HTTPとは?
ホームページ(Webブラウザを起動して最初に表示されるページ)を見るときの使うルールの1つ。
ホームページのファイルとかを受け渡しするときに使うルールです。これが俗にいう通信プロトコルです。
プロトコルを日本人に例えると「会話する時は日本語使いましょう」みたいな感じ。
いきなり宇宙語で話されても99%の人が理解できないですよね?
会話1つとってもルールが自然と出来上がるものです。
HTTPの概要については[こちら](https://qiita.com/miumi/items/8bda9389655c8aaa196c)
![スクリーンショット 2020-11-02 23.06.28（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/dbe002cd-99df-93a3-ad2f-e2fe04f8a683.png)


##HTTPは何をやってくれてるの?
HTTPをやり取りするにあたってwebブラウザ(Chromeなど)とwebサーバー(サービス提供側)でやり取りするのが**HTTPメッセージ**についてと呼ばれる形。これを利用する事でwebブラウザがどういうデータが欲しいのかという要求をwebサーバーに伝える事が出来て、WebサーバーもHTTPメッセージを利用してwebブラウザの要求に応えることができます。

- webブラウザからの要求である**HTTPリクエスト**
- webサーバーからの応答である**HTTPレスポンス**

の2種類が存在します。
![スクリーンショット 2020-11-05 9.09.35（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/88268f2b-0ef3-7e93-7a7a-6f8f13de3a3b.png)



## HTTPリクエスト
Webサーバーに対してどのような処理をして欲しいかという要求が記述してある。
具体的には「情報を取得したい」「データを送信したい」といった事をwebサーバに伝えます。
![スクリーンショット 2020-11-05 9.11.45（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/ea5b6134-75ad-6f90-700f-3e7c1e285cd0.png)


## HTTPレスポンス
WebブラウザからHTTリクエストを受け取ったwebサーバーはその要求を処理してHTTPレスポンス(反応)として応対します。一番上のステータス行ではWEBブラウザから受け取ったHTTPリクエスト(要求)に対して成功したかどうか結果を伝えます。その下のヘッダーではHTTPリクエストと同じで処理の情報が記載されてます。そして一番下にはブラウザに表示されるHTMLのデータが収納されてます。![スクリーンショット 2020-11-05 9.22.11（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/7c0e32ca-6e40-a858-113e-3ecbc93a4962.png)


## ステータスコードとは?
超ざっくり説明するとサーバからのレスポンス(反応)の意味を表す3桁の数字コード。
HTTPリクエストの結果が示されます。

* 200番台 成功
* 300番台 リダイレクト(自動的に転送)
* 400番台 クライアントエラー(ユーザー側が原因)
* 500番台 サーバエラー(提供側が原因)
blameとshowを使って履歴を確認する

ファイルの変更履歴を見たい時に使います。

まず、`git blame <file name>`を使用すると以下のように変更履歴が出力されます。

```
f68afe1e (taro tanaka        2020-10-07 22:02:39 +0900 52)   
40b0c3f7 (hajime suzuki        2020-10-13 21:33:15 +0900 53)   
c41a8d0b (hajime suzuki        2020-10-08 20:36:37 +0900 54)     
5d94494b (taro tanaka        2020-10-13 20:33:46 +0900 55)       
00000000 (Not Committed Yet 2020-11-05 08:58:55 +0900 56)         
c41a8d0b (hajime suzuki        2020-10-08 20:36:37 +0900 57)    
```

左から順に、
コミット番号・コミッター・変更日時・ファイル行番号となっています。
（なお、本来は行番号の右に行に対応するソースも結果に出力されますが本稿では省略しています。）

さて、コミット番号がわかったのでコミット番号を使用して`git show <commit No>`を使用してみます。
すると、以下のように具体的にどのような修正を行ったのかがわかります。

```
commit 40b0c3f7435331cdc08ccbaa021808c520e02b1b
Author: taro tanaka <mail@example.com>
Date:   Tue Oct 13 21:33:15 2020 +0900

    デザインの修正

diff --git a/src/components/Play.js b/src/components/Play.js
index 771f237..e6f195f 100644
--- a/src/components/Play.js
+++ b/src/components/Play.js
@@ -36,22 +36,28 @@ const Play = () => {
     );
   }
   return (
-    <div>
+    <div className='quiz_main'>
       <h1>クイズを出題します</h1>
       <div className="question">
-        { quiz[quizNum].quiz}

```

個人のリポジトリではあまり使用する機会もないと思いますが、チームで開発する場合に誰がどのような修正をしたのかを手っ取り早く知りたい場合は便利かと思います。
【Mac】backスペースの反応とカーソルの移動を一瞬で爆速にする方法

## 説明
ショートカットキーを使うまでもなく入力中の部分からカーソルを動かしたい時や
大量の文字を一気に消したい時に役立つtipsです。

**※ macの方向け**

## 方法
右上の虫眼鏡(Spotlight)から「キーボード」を入力、以下の画面を開きます。

![スクリーンショット 2020-11-05 9.08.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557847/b50b84c2-859a-58ea-f9b9-da7135e7331c.png)

こちらの、キーのリピートとキーの入力認識までの時間を右に全振りします。
実際にカーソルキーを長押し入力したり、backspaceキーを長押しすると、以前と全然違うと思います。

ただし、他のキー入力にも影響が出ますので、タイピングしてみてやりづらかったら調整をお願いします。
Twilio Functionsでの通常リクエストとプリフライトリクエストのレスポンスヘッダーの違い

##バージョン
twilio-cli / 2.11.0

##Functionsでリクエスト時にカスタムヘッダーを付与したらCORSエラーになった

###エラー内容

>
Access to XMLHttpRequest at 'https://~~~~' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field x-twilio-signature is not allowed by Access-Control-Allow-Headers in preflight response.

リクエスト時に自分で追加したカスタムヘッダーが許可されてませんっていうエラーの様です。
CORSエラーで良く見るタイプのやつ:frowning2:


Functionsでのレスポンスヘッダーの設定値を確認してみる
※ちゃんと自分で許可設定したはず…

```utility.js
const responseHeader = (allowOrigin, allowMethods) => {
  const origin = allowOrigin ? allowOrigin : "*";
  const method = allowMethods ? allowMethods : "HEAD, OPTIONS, GET, POST";

  const response = new Twilio.Response();
  response.appendHeader("Access-Control-Allow-Origin", origin);
  response.appendHeader("Access-Control-Allow-Methods", method);
  response.appendHeader("Content-Type", "application/json");
  response.appendHeader("Access-Control-Allow-Headers", "Content-Type, X-Twilio-Signature");
  return response;
};
```

~~※もしや大文字小文字？~~違いました:yum:

ちゃんと設定出来てるような気がするぞ？？



##レスポンスヘッダーを見てみる

***カスタムヘッダーを追加してるので、プリフライトリクエストが飛ぶよ***

プリフライトリクエストでOPTIONSリクエストがGETの前（今回GETですがPOST
も同じ）に飛んでるので
自分でOPTIONSリクエストした時と、プリフライトでOPTIONSリクエストした時とで
レスポンスヘッダーを比べてみる

###自分でOPTIONSリクエスト投げた時のレスポンス

| ヘッダー項目 | 値 |
|:-----------|:------------|
| Access-Control-Allow-Methods       | HEAD, OPTIONS, GET, POST        |
| Access-Control-Allow-Headers     | Content-Type, X-Twilio-Signature      |

**なんかちゃんと入ってそう:laughing:**

###プリフライトリクエストでのレスポンス

| ヘッダー項目 | 値 |
|:-----------|:------------|
| Access-Control-Allow-Methods       | GET, POST, OPTIONS        |
| Access-Control-Allow-Headers     | Accept, Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, User-Agent     |

**全然違う！:joy:**

たしかにプリフライトの時はFunction内に仕込んだログが出てなかったので、
自分のFunctionまで来てないんだなと思ってたけど

##リクエストの流れどうなってるのか

Functionのリクエストフローってページを見てみる
https://jp.twilio.com/docs/runtime/functions/request-flow

![リクエストフロー](https://twilio-cms-prod.s3.amazonaws.com/images/Functions_Documentation.width-800.png)


###Twilio Functions Gatewayさんというものが間に入っていますね:hushed:

このGatewayおじさんがプリフライト時のレスポンスを設定してるっぽい？？

##~~結局わからん~~　→　サポートから回答貰いました
普通CORSエラー出た場合に、サーバー側にAccess-Control-Allow系項目の設定をすると思いますが
Twilio側でサーバーの設定をするようなところが無い？と思われます。
Twilio Functions Gatewayの設定が出来ればいいんですが…

####サポートからの回答

>Unfortunately we don't support Options - so this approach will not be available. 

>If you want to test a protected function, you can generate an X-Twilio-Signature, but you >won't be able to depend on any additional headers for the incoming request and use them to determine if access is allowed. 

>You can set additional headers on the outbound request from a function though.


OPTIONSリクエストは出来ない。
ただブラウザからは無理だけど、FunctionsからのリクエストにX-Twilio-Signatureを設定して呼ぶことは出来る。

って感じでしょうか…

####とりあえず、protectedなFunctionをブラウザからX-Twilio-Signatureを設定してリクエストするのはダメみたいです。

####Twilio Functionsで、プリフライトのレスポンスヘッダーは自分で設定できないよ！
って話でした。:qiitan-cry:
高解像度ディスプレイでJmeterのGUIを起動するとアイコンと文字が小さすぎて見づらい

ノートPCが4Kディスプレイなのですが、JmeterのGUIを起動すると
アイコンと文字が小さすぎて見づらいですが、以下の対応で若干
見やすくなりました。

Apache JMeterのVer：5.3

手順
１．Apache JMeterのbinフォルダに移動
２．jmeter.propertiesをエディタで開く
３．以下のように修正し、保存
３－１．jmeter.hidpi.mode=trueのコメントを外す(先頭の#を外す)
３－２．jmeter.hidpi.scale.factor=2.0(先頭の#を外す)
３－３．jmeter.toolbar.icons.size=48x48(先頭の#を外す)
３－４．jmeter.tree.icons.size=48x48(先頭の#を外す)
３－５．jsyntaxtextarea.font.family=Hack(先頭の#を外す)
３－６．jsyntaxtextarea.font.size=48(先頭の#を外す)
４．Jmeterを起動

上記手順を行ってもまだ小さいですが、初期状態からは幾分ましになりました。
Mendix にチャットボットを設置する

# はじめに

ホームページ、アプリなどにチャット、チャットボットを設置して、ユーザー向けのサポートを提供することが一般的になりました。海外サイトでは当たり前になっていますが、日本でもECの利用者や在宅リモート勤務の人が増えて、チャットやチャットボットを使う機会が増えています。Mendixのアプリにもチャットボットを設置してカスタマーエクスペリエンスの向上を目指しましょう。

# チャットボット

チャットボットのサービスは数多くありますが、今回は [DialogPlay](https://www.dialogplay.jp) を使用してみます。 [DialogPlay](https://www.dialogplay.jp) は30日間無料トライアルで利用することができるので、気軽にチャットボットを試すことができます。

DialogPlayに登録してログインしたらチャットボットを作成します。チャットボットを作成後、Webにアプリを公開します。
Mendixへの設置は、この公開用のタグの情報を使います。

DialogPlayの詳しい使い方は、[DialogPlayガイド](https://guide.dialogplay.jp/hc/ja) をご覧ください。

# 設置

Mendix Studio Proでアプリを作成して、App Storeから [DialogPlayWidget](https://appstore.home.mendix.com/link/app/115452/) アプリを追加します。

ウィジェットのプロパティに、DialogPlayの公開時の情報を設定します。

![dialogplay1](https://github.com/naofum/Mendix-DialogPlayWidget/blob/master/Screenshots/dialogplay1.png?raw=true)

アプリを実行すると、設置されたことが確認できます。

![dialogplay2](https://github.com/naofum/Mendix-DialogPlayWidget/blob/master/Screenshots/dialogplay2.png?raw=true)

# 最後

今回はチャットボットにDialogPlayを利用してみましたが、DialogPlay以外でも標準で提供されるHTMLSnippetを使用してHTML、JavaScriptを埋め込むことで対応できることがあると思います。
JavaScript 超基礎 ダイアログボックスを表示する

# 目的

- JavaScriptの超基礎部分としてダイアログボックスの表示方法をまとめる

# 前提情報

- windowオブジェクトのalertメソッドを利用してダイアログボックスを実装する。（何を言っているかわからなかったら無視して良い）

# 概要

1. 準備
1. JavaScriptの記載
1. 確認

# 詳細

1. 準備
    1. 下記コマンドを実行して任意のディレクトリにファイルを作成する。
    
        ```terminal
        $ touch index.html
        ```
    1. 下記コマンドを実行してファイルを開く。

        ```terminal
        $ vi index.html
        ```
    1. 下記の内容を記載する。

        ```index.html
        <!DOCTYPE html>
        <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
        </head>
        <body>
            <h1>JavaScript</h1>
        </body>
        </html>
        ```
1. JavaScriptの記載
    1. 下記の内容を`<body>`要素の中に記載する。

        ```index.html
        <script>
            window.alert('ダウンロードを開始します！');
        </script>
        ```
    1. 記載後のindex.htmlファイルの全内容を下記に記載する。

        ```index.html
        <!DOCTYPE html>
        <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
        </head>
        <body>
            <h1>JavaScript</h1>
        
            <!-- 下記を追記する -->
            <script>
                window.alert('ダウンロードを開始します！');
            </script>
            <!-- 上記までを追記する -->
        </body>
        </html>
        ```
1. 確認
    1. フォルダからindex.htmlを探しダブルクリックで開く。

        ![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/eeaea532-b67f-eb7d-7073-a7c072964c7c.png)

    1. ブラウザが起動し下記のようなダイアログボックスが表示されることを確認する。

        ![このページの内容_と_Document.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/96231137-c672-f0b3-04a1-4eebca5dfc7a.png)
ワーケーションをやってみた

11/1~3 の間、千葉県の南房総市にて、フリーランス仲間 4 人でワーケーションをやりました。

![DSC_0128.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93963/6e0049c0-597b-1960-6ac5-33fe121e48f4.jpeg)

本記事では、主にワーケーションをやってみて良かった点や注意点をまとめます。

# ワーケーションとは

以下、Wikipedia より引用です。

> ワーケーションとは、「ワーク」（労働）と「バケーション」（休暇）を組み合わせた造語（かばん語）で、観光地やリゾート地でテレワーク（リモートワーク）を活用しながら、働きながら休暇をとる過ごし方。 在宅勤務やレンタルオフィスでのテレワークとは区別される。

# 今回利用した宿

こちらの宿を利用させていただきました。
[【公式】ホテル＆リゾーツ 南房総｜千葉･南房総のリゾートホテル](https://www.daiwaresort.jp/minamiboso/index.html)
2 泊 3 日の朝食付き、ラグジュアリーツインルーム、Go To トラベルキャンペーン適用で一人税込 15000 円ちょっとでした。

# タイムスケジュール

タイムスケジュールはざっくりと以下の通りです。

- 11/1：移動、観光
- 11/2：ワーケーション(8:30~17:00)
- 11/3：観光、移動

# 良かった点

## いつもと違う環境で仕事ができ、非日常が味わえる

当然ですが普段行かないような場所で仕事することになるので、環境がガラッと変わります。
非日常の中で仕事ができるのはワクワクしました。

## すぐにリフレッシュできる

仕事で煮詰まったりしたら窓から外の景色を見たり、ラウンジなどに場所を変えることでリフレッシュできました。
今回泊まった宿は館内にカフェが併設されていたので、そこでお茶を飲みながら作業しましたが、海の景色が一望できてよかったです。

![IMG_5221.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93963/2c6896e8-88fb-5b7d-6ac0-216c2a1c497a.jpeg)

## 仕事終わりの楽しみが目白押し

仕事が終われば温泉に入ったり、美味しいものを食べに行ったり、観光したりと楽しみが目白押しです。
それらの楽しみに思いを馳せながら仕事に集中できました。

![DSC_0118.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93963/882749d3-5880-ff28-f54d-5e0c4d9822bd.jpeg)

## 仲間の仕事ぶりが見れて刺激になる

複数人で行った場合の話ですが、仲間の仕事ぶりが見れて良い刺激になりました。
もくもく会のような感じで仕事できました。

# 注意点

## 宿泊先に Wi-Fi などのネット環境が完備されているかを確認しておくこと

一番重要なポイントです。ネット環境が整っていない場合、別途場所を探さなければなりません。
ホテルの場合、LAN ケーブルのポートが用意されていたりするので、LAN ケーブルを持参しておくとより良いです。

## 近くの飲食店の営業時間や予約状況をチェックしておくこと

観光地だと基本的に飲食店の閉店時間が早いです。
早く仕事を終えられるように調整しておきましょう（自分の場合は早めに仕事を始めるようにしました）。
このご時世ですと Go To Eat キャンペーンもあり、予約がいっぱいで入れないこともあるので注意です。

## ポケット Wi-Fi やスマホのテザリングを用意しておくこと

仮に宿泊先に Wi-Fi があったとしても、通信状態が悪い時もあります。
万が一に備えてポケット Wi-Fi やスマホのテザリングを用意しておくと安心です。

## 宿のチェックアウト会計時、個別会計にすると Go To キャンペーンが無効になる

複数人で行く場合の話ですが、もしまとめて予約している場合、個別会計にすると Go To キャンペーンが無効になります。
つまり割引前の料金を支払う羽目になります（今回の場合は割引前の料金が 22000 円ちょっとで、7000 円余分に支払うことになります）。
また領収証を分割できるかは宿次第ですが、交渉してみましょう。

## 現金をきちんと用意しておくこと

個別会計にする場合が多いのと、場所によっては電子決済などが使えなかったりする場合もあるので、現金をきちんと用意しておくと安心です。

# まとめ

ワーケーションを実際に経験してみて、いつもと違う気分で仕事できて良かったなと思いました。
特にフルリモートワークでマンネリ化している方は、気分転換するにはうってつけです。
もちろん複数人でなくとも、1 人で行くのも個別会計の煩わしさから解放されるので全然ありです。
場所を選ばず仕事できる時代なんだなと実感しました。
是非みなさんも試してみてください。
【なぜそれをやるかの解説付き】Railsの認証機能付きCRUDアプリで、他人に編集をさせなくする方法

## はじめに

[yuki](https://twitter.com/yuki82511988)と申します。DMMWEBCAMP にお世話になって、今は WEB エンジニアとして勤務しつつ、自分で仲間を集めてサービス開発したり、プログラミングの家庭教師したり毎日エンジニアライフをエンジョイしています。

未経験から目指している方向けのサポートやエラー質問なども引き受けておりますので、気になった方は DM へお願いします。

今回は認証機能のある CRUD アプリでよくある、自分の投稿の編集を他人にさせない機能について解説します。

## 前提

- crud アプリと言って通じる方
- Rails の簡単なアプリを作成中の方
- Rails を触るのが初めてもしくは期間が短めで、現在学習中の方
- devise などで認証の設定、crud 機能の実装が終わっている

## 最終目標

投稿を編集する URL をベタ打ちで入力したとき、投稿者と編集者が異なる場合、一覧ページなどにリダイレクトさせる機能の実装

```example
# post/1/editなどのURLを入力する
# 投稿者と編集者が違った場合、/postsにリダイレクトさせる
```

### ①edit をしようとする際に、必ず通過するメソッドを作る

「他人の投稿を編集しようとしたとき、リダイレクトさせる」と言うのは、つまり編集という行為をしようとした際に、**その機能を必ず呼び出す**ということです。まずは、edit や update をしようとしたときに、ある処理を読み込める状況を作りましょう。

```ruby:posts_controller.rb
class PostssController < ApplicationController
  before_action :correct_user, only: [:edit, :update]

  # 中略

  def edit
    @book = Post.find(params[:id])
  end
end
```

`before_action`については[こちらの記事](https://qiita.com/weedslayer/items/c3ab7ad37d5a1e325989)でわかりやすく解説されています。つまり、指定したアクションの前に必ず指定したメソッドを実行するというわけです。

今回は、edit と update の前に…`correct_user`…つまり、正しいユーザーであるかチェックするメソッドを呼び出しています。

### ② 呼び出されるメソッドを定義する

```ruby:posts_controller.rb

# 中略
private
  def correct_user
    @post = Post.find(params[:id]) # idをもとにPost（投稿）を特定
    @user = @post.user             # 特定されたPostに紐づくUserを特定し、@userに入れる
    if current_user != @user       # 現在ログインしているユーザー（編集者）と@user（投稿者）が異なったら
      redirect_to posts_path       # 一覧ページにリダイレクトさせる
    end
  end
```

コメントに書いた通りですが、このような感じです。

これを貼っつければ実装できる、というような記事が多かったため「なぜそうなるのか」をまとめてみました。
ご参考になれば幸いです。
MySQLのデータベースのテーブルの全レコードを削除する

初学者の忘備録として

下記コマンドを実行しサインイン

```ターミナル
$ mysql -u root -p
```

下記コマンドでデータベース名確認

```ターミナル
mysql> SHOW databases;
```

削除したいテーブルのデータベースに移動

```ターミナル
mysql> use [データベース名]
```

もしテーブル名の確認が必要な場合は下記のコマンドを実行

```ターミナル
mysql> SHOW tables;
```

テーブル名確認後下記コマンドを実行

```ターミナル
mysql> TRUNCATE TABLE [テーブル名];
```

自分の場合は上記の手順にてテーブルの全レコードを削除することができました。
もっといい方法がございましたら、コメントをいただけると幸いです。

参考サイト
https://qiita.com/nanatsu/items/33b57238b0e9ae0a1c78
Gridの使い方

#Grid
![スクリーンショット 2020-11-05 8.37.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633943/a19d6e00-6fa4-9edb-00b3-c64c3d5ae513.png)

![スクリーンショット 2020-11-05 8.37.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633943/6f2844c8-0df7-4e19-15b3-9a780e750061.png)

```html:index.html
  <div class="wrapper">
    <div class="box">
      <a href="#">
        <h3>東京の建築A</h3>
        <img src="img/tokyo-station.jpg" alt="">
        <p>koment</p>
      </a>
    </div><!-- ./box -->
  </div><!-- ./wrapper -->
```

```css:style.css
.wrapper{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 16px;/* 真ん中だけ隙間16px */
}
```

　```grid-template-columns: repeat(4, 1fr);```と書くと、4カラム常にできます。
動的型付き言語と静的型付き言語の違い


プログラミングの勉強し始めたときに動的だとか静的だとかなんかやったのぉ
でも意味わかんないから後ででいいや！
とか思ってこの辺の知識を適当に流していたんですが、最近やっとわかる様になってきたので記事にしてみます


#プログラミングは２種類ある？
* 動的型付き言語
    * Ruby
    * JavaScript
    * python
    * etc...
* 静的型付き言語
    * Go
    * TypeScript
    * Java
    * etc...

プログラミング言語はこの`動的型付き言語`と`静的型付き言語`と２種類あって、上記の通りに分類されます
<b>
で？？？？？？？？？？？？

以前の私はここで学習をやめたんですが、今回はこの先へいってみましょう

#動的型付きと静的型付きの違い
似た様な言語である`JavaScript`と`TypeScript`で違いを見ていきましょうか

```javascript:JavaScript
let hoge = 1;
hoge = 2;
console.log(hoge); // '2'と出力

hoge = "こんにちは"; //'こんにちは'と出力

console.log(name);
```

最初の`console.log(hoge)`では`2`が出力され、次の`console.log(hoge)`では`こんにちは`が出力されます
まあJavaScriptやったことのある人ならわかると思うのですが、問題は次

```typescript:TypeScript
let hope: int; // hoge を整数型として宣言
hoge = 1;
hoge = 2; 

console.log(hoge); // '2'と出力

hoge = "こんにちは"

console.log(hoge); // エラー
```

最初の`console.log(hoge)`では同様に`2`が出力されますが、次の`console.log(hoge)`では`エラー`になってしまいます、、、

これなんでかというと、変数には`型`というものがあって、最初の`let hope: int`で`hoge`を整数型として宣言していて、もうこの`hoge`には整数しか入らないよ！！と設定されているからなんですね〜〜

つまり動的型付き言語というのは言葉の通り、型が変わる(動く)ので動的
じゃあその反対は、型が変わらない(動かない)ので静的
という感じの違いがあるんですよ

#これ必要あんの
正直こちらからすると、型なんて勝手にプログラム側が判断していくれて処理してくれた方が有り難いと思いませんか？私はめちゃくちゃめんどくさがりなんで思います

ただ我々が作り出すシステムにはバグあったらいけないわけですよ
動的に型を判断されてしまうと、自分の想定していないところでよくわからん動作をしてしまうことがあるんです

これはシステムとして致命的であり、こんなことは起きない様にしなければなりません
動的型付き言語は確かに初心者にとって学びやすい言語ですが、いざ現場に入ってこういうことがわからないと使い物にならないと思うんです

静的型付き言語は型の違いでエラーを出してくれるので、そのミスに気が付きやすいというメリットがあります

静的型付き言語を勉強しましょうということではなく、しっかり動的型付きと静的型付きの違いを把握しておきましょうということですね

結局何が言いたいかというと、
<b>
型の意味を理解して勉強を進めましょう

ということです！！！

これを抑えておけば今後の成長の妨げにはならないではないかと思います
まあ現場経験はまだないけどなっ！！！！！←
AWSにVPNサーバをたてて、LinuxのラップトップからVPN接続できるようにする


### 経緯
youtubeを観てたらかっこいい外人がAWSに無料でVPNサーバ構築する方法を紹介していたので、そのメモ
**setup a FREE VPN server in the cloud (AWS)**
https://www.youtube.com/watch?v=m-i2JBtG4FE&t=529s
  
### 環境
接続するクライアントは`Arch Linux（Arch Labs）`,カーネルバージョン`5.4.70-1-lts`,ウィンドウマネージャは`openbox`
AWSアカウントあり
実行したリージョンは`ap-northeast-1`

### 手順
以下を選択

```  
OpenVPN Access Server
Linux/Unix, Ubuntu Ubuntu 18 LTS | 64-bit (x86) Amazon Machine Image (AMI) | Updated: 8/3/20
```  
Bring Your Own License (BYOL)は` > 2` Clientsまで
`Review and Launch`をクリック
`root`でログイン  

```
ssh root@ec2-********.ap-northeast-1.compute.amazonaws.com
```

`yes`入力してから、その後のプロンプトはEnter連打
セッションから抜けるので、その後以下で再度ログイン

```
ssh openvpnas@ec2-********.ap-northeast-1.compute.amazonaws.com
```

openvpnユーザの資格情報設定

```
sudo passwd openvpn
exit
```

以下でブラウザアクセス

```
https://${パブリックIPアドレス}:943/admin
```
`openvpn`ユーザ、設定した資格情報でログイン
`VPN Settings`をクリック
`Routing`->`Should client Internet traffic be routed through the VPN?`を`yes`に設定
`save settings`をクリック->`Update Running Server`をクリック
以下にアクセス
(資格情報は`openvpn`ユーザのものを使用)

```
https://${パブリックIPアドレス}:943/
```

`Yourself (user-locked profile)`をクリックして`client.ovpn`をダウンロード
NetworkManagerのopenvpnプラグインをインストールしていなければ、以下を実行  

```
sudo pacman -S networkmanager-openvpn
```

NetworkManagerのGUI(`nm-applet`)でVPN接続->VPNを設定->`+`をクリック、`保存したVPN設定をインポートする`をクリック
`client.ovpn`を選択
ユーザ名とパスワードに`openvpn`ユーザの資格情報を入力、保存をクリック
再度`nm-applet`のアイコンをクリック、VPN接続->client にチェックを入れる 
`nm-applet`のアイコンに鍵マークがつくことを確認して、以下コマンドを実行
出力されたIPアドレスがOpenVPNサーバのパブリックIPになっていることを確認する

```
dig +short myip.opendns.com @resolver1.opendns.com
```

### 感想
わかりやすい動画をありがとうございます
外人て表現ポリコレ的にアウトなのかな
ポリコレ言葉狩り怖い
EC2起動しっぱなしだと金かかるから、ElasticIPつけて、必要なときに起動するのほうがいいかな
プロダクト開発のブレスト時にお勧めしていただいた、ホワイトボードのようなアプリの紹介

## はじめに

[yuki](https://twitter.com/yuki82511988)と申します。DMMWEBCAMP にお世話になって、今は WEB エンジニアとして勤務しつつ、自分で仲間を集めてサービス開発したり、プログラミングの家庭教師したり毎日エンジニアライフをエンジョイしています。

未経験から目指している方向けのサポートやエラー質問なども引き受けておりますので、気になった方は DM へお願いします。

今回はとあるプロダクトを開発することになった際、最初にブレストをしたのですがとても良いアプリを紹介していただいたので、共有させていただきたいと思います。

## 早速ご紹介
[Miro](https://miro.com/)

こちらの記事でもご紹介されています。
[便利過ぎる！オンラインホワイトボード miroを使ってmiro！](https://note.com/at_design/n/n80acc8b6c62c)

タイトル通り、ホワイトボードに付箋を貼ったり文字を書いたりする感覚で使えるアプリです。
このアプリの特にすごいところは、複数人で同時に作業ができ、失敗しちゃった時もいつもの`ctrl+Z`で自分の処理だけ戻すことができる点です。

## 実際の画面
![miro.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557847/b94e86bc-678b-8986-6d11-ee3177b8e90b.png)

※内容が見えないように小さくしています。

左、下側にそれぞれあるのがツールで、正面の部分が自由にそれらを使えるボードです。

ご覧いただいている通り、プロダクトのワイヤーフレームを作ることもできます。
触っていただく方が早いですが、特に便利だった機能だけご紹介します。


#### sticky note
付箋みたいなアイコンのツールです。好きな色、文字、サイズの付箋を貼ることができます。
ブレストの時に非常に役に立ちました。

#### shape
文字通り、好きな図形を配置できます。wordのように中に文字を配置することもできます。

#### Google image search
この画面には見えていませんが、点が三つの部分をクリックすると他にも便利な機能がたくさん出てきまして、その中の一つにgoogleの画像検索して、その画像をそのまま貼り付ける機能があります。

#### Frames
左下の資格のようなアイコンを押すと、フレームという色を自由につけられる大枠が出現します。これは、あえてドラッグ&ドロップがしづらくなっており、間違って動かしてしまうといった事故が防げます。

### とにかく使ってみましょう！
非常に便利な機能が多いmiroです。無料版では使えるボードの数が限られていますが、とても利用しやすかったので是非開発の際に役立ててください。