OmniAICreator/Qiita-1.07M huggingface dataset:
fetchAPIでPOST送信出来ない問題についての備忘録

## 事象
ReactアプリにてブラウザからfetchAPIを使って、別オリジンのサーバーにPOSTリクエストを送信しようとしたが、エラーが発生していました。
バックエンドはGo（コード記載なし）

```javascript:js
fetch(url, {
    method: 'POST',
    mode: 'cors',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
})
    .then((res) => {
        if (!res.ok) {
            console.log(res);
            throw new Error('Response is not ok at xxx api');
        }
    })
    .catch(rejected => {
        console.log(rejected);
    });
```

```console:console
Access to fetch at 'XXX' from origin 'http://localhost:3000' has been
 blocked by CORS policy: Response to preflight request doesn't pass
 access control check: No 'Access-Control-Allow-Origin' header is present
 on the requested resource. If an opaque response serves your needs, set
 the request's mode to 'no-cors' to fetch the resource with CORS disabled.

POST http://localhost:8080/xxx net::ERR_FAILED

TypeError: Failed to fetch
```

## 原因
エラー文から、Responseヘッダーに”Access-Control-Allow-Origin”が設定されていないためにpreflightリクエストが通らなかったとあります。Responseヘッダーに”Access-Control-Allow-Origin”を設定するか、リクエストのmodeを”no-cors”に設定しなければなりません。

しかし、バックエンド側のコードではResponseヘッダーに”Access-Control-Allow-Origin”を設定する処理を記述しているので、コードは動くはず、と思っていました。

## 解決策
バックエンド側でResponseヘッダーの設定の方法を間違えていたためでした。

fetchAPIを使用してGET以外のリクエストを投げると、そのリクエストが投げられる直前にPreFlightリクエストというのがクライアントからサーバーに投げられ、CORS対策がなされているかのチェックが行われます。（実際に投げたいリクエストを投げる際に合計2回のリクエストが発行されることになる）

バックエンド側ではルーティング処理後のAction内でResponseヘッダーの設定を行なっており、OPTIONメソッドのリクエストがきた場合に想定した関数内に処理が入っていきませんでした。
ルーティング処理前にCORS設定としてResponseヘッダーの各種設定を行う、さらにOPTIONメソッドのリクエストがきた場合に検知して200ステータスを返却する処理を追加したところ、動作するようになりました。

解決方法がわからなかった時は何がなんだかわかりませんでしたが、焦らず1つずつ理解して解消していくのが一番の近道ですね。
【Ruby on Rails】Deviseでメール認証後のWelcomeメール配信

Deviseを使って簡単にユーザー認証機能をつくることができます。私もお世話になっております。
今回はDeviseにてE-mail認証機能をつくり、メール内のリンククリックによる認証が完了したときに自動で配信されるWelcomeメールの実装方法です。
やり方だけ書きます。このやり方で実装すればとりあえず実装できます。

## ①「model/user.rb」 ファイルへ

```ruby
def after_confirmation
  UserMailer.welcome_email(self).deliver
end
```
Deiviseではすでにメソッドが用意されています。メール配信のアクションを、「model/user.rb」ファイルに書いてください。


## ②mailerの準備

```ruby

class UserMailer < ApplicationMailer
  def welcome_email(user)
    @user = user
    mail(to: @user.email, subject: "Welcome! You are awesome!")
  end
end
```
「mailers/user_mailer.rb」に上記コードを書いてください。メール送信設定ですが、mail(to: "送信先", subject: "件名") のように設定してください。今回の場合、件名は「Welcome! You are awesome!」になります。

## ③メールテキストの準備

```ruby 
<%= @user.name %> 様

この度は●●●をご利用いただきありがとうございます。
ユーザー登録が完了したのでお知らせします。
```
「views/user_mailer/welcome_email.text.erb」に本文を入力してください。

welcome_email.text.erb　→　welcome_email.html.erb にするとhtmlでメール本文表示を編集することができます。

```html
<h2> <%= @user.name %> 様</h2>

<p>この度は●●●をご利用いただきありがとうございます。</p>
<p>ユーザー登録が完了したのでお知らせします。</p>
```

これで完了です。以上。

### 参考
https://stackoverflow.com/questions/51851292/devise-sending-welcome-email-after-confirmation
macでIPアドレスをコマンドで確認する方法


macでコマンドを使ってIPアドレスを確認する方法を解説します。
この記事で解説する内容は

- Macでの確認方法
- Terminalでコマンドを活用した確認方法
- ローカルIPアドレス（プライベートIPアドレス）の確認方法
- グローバルIPアドレスの確認方法

になります。

IPアドレスの確認方法はいくつかありますが、エンジニアであればコマンドで確認するのが一番シンプルでわかりやすいと思います。

## ローカルIPアドレス（プライベートIPアドレス）の確認方法

まずは、ターミナルを起動して以下のコマンドを入力してください。

```shell
ifconfig
```
このコマンドを入力すると訳のわからない文字列が大量に表示されると思いますが、安心してください。
`cmd + F`
で文字列の検索をできます。
`inet` or `192.`
などの文字列で検索するとローカルIPアドレスを確認することができます。
`192.168.XXX.XXX`
こんな感じ。

## グローバルIPアドレスを調べる

```shell
curl ipecho.net/plain; echo
```

XXX.XXX.XXX.XXX

グローバルIPアドレスはこのコマンド一発でわかります。
[Vue]axiosでdelete後に非同期にdataを更新する


# 何がしたかったか

Vueにおいて、axiosのgetでdataをとってきて配列でitemを管理している時に、
axiosのdeleteでDB側のデータを削除した際、フロント側も非同期に更新されるようにしたかった。
(v-forなどでとってきた配列データをリスト形式で並べているような想定です。)

↓イメージ
![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/417968/75c5a77c-ec10-4524-1452-46e234205520.gif)

※もっといい解決方法やそもそもその認識間違ってない？そもそもそんな問題発生しなくない？などのご指摘などありましたらコメントしていただけると幸いです。

# やったこと
最初、vue側のページを再レンダリングすればもう一回axiosのgetでデータをとってきてくれるかと思ったが、[Vueの公式ページ](https://jp.vuejs.org/v2/guide/components-edge-cases.html#%E5%BC%B7%E5%88%B6%E6%9B%B4%E6%96%B0)に
> もし Vue で強制更新をする必要な場面に遭遇する場合、99.99% のケースであなたは何かを間違えています。
と書いてあったため別の方法で更新されるようにした。

※Vueの強制再レンダリングの方法を知りたい方は[こちら](https://tomatoaiu.hatenablog.com/entry/2019/09/28/133319)

# 解決方法
deleteが成功したタイミングでvueで管理しているdataから削除したアイテムを削除する。
ここで、vueで非同期にdataを更新させるためには、配列からその要素を削除すれば良いが、そのときはsplice()を使う。

```
<配列>.splice(<始まりのインデックス>, <削除する要素数>)
```

のように使用するので、削除する関数にindexも渡しておく。
サンプルコード

```js
<script>
import axios from "axios";
export default {
  data: () => ({
    tasks: [],
  }),
  mounted() {
    axios
      .get(
        "/get"
      )
      .then((response) => (this.tasks = response.data))
      .catch((error) => console.log(error));
  },
  methods: {
    deleteTasks(id,index) {
      axios
        .delete("/delete/" + id)
        .then(() => {
          console.log("削除成功");
          this.tasks.splice(index, 1); // ここ。
        })
        .catch(() => {
          console.log("失敗");
        });
    },
  },
};
</script>

```
manimの作法 その37

#概要

manimの作法、調べてみた。
FunctionGraph使ってみた。

#サンプルコード

```
from manimlib.imports import *


class test(Scene):
	def construct(self):
		grid = NumberPlane(axis_config = {"stroke_color": BLACK})
		func = FunctionGraph(lambda x: x ** 2 - 4, stroke_width = 6, color = GOLD)
		func2 = FunctionGraph(lambda x: 2 * np.exp(1) ** (-0.25 * x ** 2), stroke_width = 6, color = RED)
		self.add(grid, func, func2)
		self.wait()


```

#生成した動画

https://www.youtube.com/watch?v=h_zh0Oqy1NY

以上。
日本Udemy界のUnity神の紹介_2021/01/31

こんにちは。
普段はゲームを作っています。

今回はタイトルの通り、日本Udemy界のUnity神を紹介します。

目次に沿って紹介します。

1.誰ですか
2.なんで神なんですか
3.神は何を与えましたか
4.他に神はいますか
5.終わりに

----------------

1.誰ですか
察しの良い方はお気づきかと思いますが（？）
スタジオしまづさんです。

Unity3D入門の決定版！RPG開発の基本をUnityインストラクターと共に進めるハンズオンコース【スタジオしまづ】
https://www.udemy.com/course/studio_shimazu_sideview_action/

RPGだけでなくシューティングやカードゲームなどの動画も出されています。

2.なんで神なんですか
私にとって神だからです。
Unityを始めた、始められたのはスタジオしまづさんのおかげでした。
最初に見た動画も上の動画でした。
スタジオしまづさんの講座がなければUnityをしてなかったと思います。

3.神は何を与えましたか
Unityに関することから、C#の基礎、心構えまで教えていただきました。

動画を見て、最初に作ったものはこちらです。

https://unityroom.com/games/no00002goodbird
![711.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/855767/ca3258e6-f415-a123-9242-abbe1fdbde3f.png)

ただ鳥が飛び跳ねているだけですが、それだけでも嬉しかったのをよく覚えています。

次にはこちらの動画で脱出ゲームを学び、作ったのがこちら

・世界で一番簡単な脱出ゲーム
https://unityroom.com/games/no00004mosteasyescapegame
![4011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/855767/9879febc-9710-bca4-2dc4-54616292f385.png)

そこから70日間くらい毎日ゲームを作っていました。
途中、職業訓練が始まりドット絵だけの日もありつつ、どうしようかと思っていたところ、
しまづさんがゲームジャムを開いてくださったので、そこに投稿したのがこちらです。
https://unityroom.com/games/endlesslove
![412.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/855767/01d30a5d-550a-e062-87e4-6f25f2d7eaf7.png)

ゲームとしてはともかく（ともかくとか言っちゃったけど）、一日ではなく時間をかけて一本作り上げたことが嬉しかったです。
今はお休み中ですが、また作ります。

4.他に神はいますか
ちなみに、Unityを学びたい方で英語のわかる方なら、
Noaさん
https://www.udemy.com/course/creating-a-cool-2d-action-game-in-unity/
がおすすめです。
YoutubeならBrackeyさん
https://www.youtube.com/channel/UCYbK_tjZ2OrIZFBvU6CCMiA
NoaさんもYoutubeやられています。
https://www.youtube.com/channel/UC9Z1XWw1kmnvOOFsj6Bzy2g

-----------------
5.終わりに
本当にたくさんのこと動画から学びました。
最初に買ったのもスタジオしまづさんの動画でした。
Unityを学びたい、と思って買いました。
こうしてここで記事を書いているのもしまづさんのおかげです。
感謝しかありません。
この記事が他の誰か、Unityを作って楽しく感じられる人のためになれたら幸いです。

よいUnityライフを！
Bootstrapでサイトを作る

#デイトラWeb制作コース初級編DAY12の学び

# 【この記事に書いてあること】
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">プログラミング学習 14日目⏩<br><br>Web制作コース初級編DAY12　💻<br><br>学習時間:3時間20分⏳<br><br>学習内容:Bootstrapでサイトを作る✏<br><br>学び📚<br>・GridCardsを使えば、flexのような横並び表示を作ることができる<br>・CSS記入なしで、contactフォームを簡単に作れる<br><br>詳細はQiitaへ！<a href="https://twitter.com/hashtag/%E3%83%87%E3%82%A4%E3%83%88%E3%83%A9?src=hash&amp;ref_src=twsrc%5Etfw">#デイトラ</a><a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%AD%A6%E7%BF%92?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング学習</a> <a href="https://t.co/KLGJOw7aOU">pic.twitter.com/KLGJOw7aOU</a></p>&mdash; ふりっく💻トリプルゼロの（これから）フリーランス (@FuRiC_twi) <a href="https://twitter.com/FuRiC_twi/status/1355814478068199426?ref_src=twsrc%5Etfw">January 31, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#　【学習時間】

3時間20分

#　【学び】

1　調整
```py-数字```：上下に余白を作るときに使う
```pw-100```：横幅からはみ出ないように制限するときに使う

2 Grid cards
BootstrapのGrid cardを使えば簡単にflexのような横並び表示を作ることができる
![スクリーンショット 2021-01-31 14.43.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/5d849c2e-24fc-abaa-6f04-a37e84097cc5.png)

3 Grid cards応用

```index.html
<div class="row row-cols-1 row-cols-md-3">
```
↑こう記入することで、列をclassで制御することができる！

意味：
・```row-cols-1```：１列で表示する（レスポンシブ時に１列になる）

![スクリーンショット 2021-01-31 14.40.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/2b05e397-8808-ffe3-9eb2-79ed54542698.png)
--
・```row-cols-md-3```：PC画面では３列で表示する
![スクリーンショット 2021-01-31 14.39.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/d6bed3ef-f491-7b59-9679-eabf8bbf9f9e.png)

4 contactフォーム
Bootstrapを使えばcontactフォームを簡単に作れる！
CSS一切記入なし！
### ↓

![スクリーンショット 2021-01-31 18.37.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/0826d11a-5821-44f3-0a6f-3ab7e78352eb.png)
Trelloのカードから自動的にIssueを作成してみる！

### はじめに
私はタスク管理を`Trello`で行うことが多いのですが，
学校の課題で，`Issue`&`Milestone`を使ってくださいとのことだったので，なんとかTrelloで管理できないかな🤔と思って書いた記事です！

### 概要
- `Integromat`を使ってみる
- `Integromat`で`Trello`とGitHubを結びつける

### 1.`Integromat`を使ってみる
【初心者でもわかる】CSSで方眼紙のような背景を作る方法

# どうも7noteです。方眼紙のような背景を作成する方法

以前チェック柄の背景を作成しました。

[【初心者でもわかる】市松模様（いちまつもよう）やチェック柄をCSSで再現](https://qiita.com/7note/items/328761825801b82ef585)
![other.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/abd54f15-e23c-3f38-7143-4be1f19f7cd7.png)

このときに作った作り方を少し応用して、方眼紙のような背景を作ります。

## css方眼紙の作り方

```style.css
body {
  /* 10px四方の方眼紙 */
  background: linear-gradient(0deg, transparent 9px, #333 10px), linear-gradient(90deg,  transparent 9px, #333 10px);
  background-size: 10px 10px
}
```

**結果**
![sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/558f84c5-1e41-71d1-d670-0d8505c0c8dd.png)

## 解説

線ですが、borderではなくbackgroundで再現します。
backgroundのグラデーションを2種類作成し、縦線の背景・横線の背景をそれぞれ1pxの線に見えるように設定します。
それに背景サイズを指定するだけ。とっても簡単！

## まとめ

ずっと見ているとなんだかマインスイーパーでもできそうな感じに見えてきました。
またいつか作ってみたいですね。

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
二進法を極力簡単にアウトプット



プログラミング初学者です。言語とフレームワークの使い方を勉強してきましたが、そもそも「PCはどういった仕組みで情報を処理し、表現しているのか？」  について知っておいた方がアドバンテージになると思い、学習開始。
誤認などございましたら、ご指摘ください。

# 二進法の概念と、その必要性

1. すべての基本　「二進法」
2. 二進法とは？
3. ビットとバイト
4. まぁ話は分ったけど、だから何？

## 1.すべての基本　「二進法」
PCの仕組みを理解する上で、なぜ二進法が重要？
　コンピューターはIC（integrated Circuit=集積回路）と呼ばれる電子部品から構成されている。そこで単純な信号を大量に組み合わせることで、複雑な内容を表現している。PCを買う時、スペック表示にCPUが明記されているが、「あーCPUね・・はいはい・・今は性能いいんですね〜（何それ、美味しいの？）」なんて知ったかぶりをした経験は誰しもあるはず！私はある！その計算を行うCPUの実体はICだそうだ。

　私たちは普段の生活で「１９２」とか「３５８７６」など、各位の数字を上から並べて表記された「位取り記数法」、その中でも「十進法」を使っているわけだ。では、ICも同じように１０進法を使っているのか？答えはNO!!
ICは２種類（１と０）しか扱えないのだそうだ。それが二進法を理解するべき理由である。
（今どきのPCたちは４の倍数で処理するらしい。ここで使われるのは１６進数。だが今回は割愛）

仮にキーボードで「53」と打っても、ICは「110101」と認識し情報を処理する。そのように分解することで、超高速な処理ができるってわけですね。なるほど〜。

## 2.二進法とは？
ここからは数学Aのお話。
上記したとおり、普段私達は十進法を使っている。
十進法では0~9までの十個の数字が用いられ、十の累乗で位を決める。
それに対し、二進法は１と０のみを用い、２の累乗で位を決める。
...といってもピンとこないので、例をあげます。

二進数110101を十進法で表す

　110101 によって

　1・2⁵ + 1・2⁴ + 0・2³ + 1・2² + 0・2¹ + 1・2⁰
　という数が表される。これを十進法に基数変換すると
 　32+16+4+1=53となる

今度は十進数53を二進法で表そう！

53を2で割ると余りが1,商が26
商26を2で割ると余りが0,商が13
商13を2で割ると余りが1,商が6
商6を2で割ると余りが0,商が3
商3を2で割ると余りが1,商が1
商1を2で割ると余りが1,商が0

余りの部分を下から順に並べる。よって二進数110101となる




基数変換を分かりやすく理解したい方はこちらの動画をご覧ください。

![十進法から二進法へ](http://img.youtube.com/vi/NUda5SW4upM/0.jpg)

## ３．ビットとバイト
>ICのピン1本で表せる情報すなわち2進数の1桁を「ビット」と呼びます。2進数の8桁を「バイト」と呼びます。
>コンピューターにおいて、ビットは情報の最小単位であり、バイトは情報の基本単位です。ビット（bit）は、binary >digit（2進数）の略語ですが、一般用語で「破片」という意味もあります。バイト（byte）は、同じ発音のbite（噛む）と
>いう言葉から作られた造語です。情報の破片がビットで、情報のひと噛み（ひとまとまり）がバイトというわけです。コンピューターは、バイト単位でデータを取り扱うことがよくあります。 
[日経XTECH](https://xtech.nikkei.com/atcl/learning/lecture/19/00007/00001/?P=5)


というように、聞いたことはあるけれど、なんじゃそりゃ？という言葉ばかりです。要するに、PCが処理する情報の最小単位が「ビット」であり、それは二進法で表されるということ。無限の可能性を秘めたPCをミクロ視点で分解していくと、数学に行き着くんですね〜。

# 4. まぁ話は分ったけど、だから何？

ここまで読んでくださった方のほとんどが、このように思ったでしょう。私も最初に学んだ時、思いました。ですが、カレーの作り方知ってるけど、火の付け方わかんない！では料理人として成り立たないように、プログラミングが動くPCの仕組みの理解は”プロのエンジニア”を目指すために必要不可欠だと、初学者ながら思うわけです。今はとても難しく感じますが、「ふ〜んそうなのね」と知っておくだけでOK!という気持ちで学習進めたい！
今後も駄文＆つたない技術に恥じること無く、少しずつアウトプットしていけたらと思っています。

最後まで読んでくださり、感謝です！
manimの作法 その36

#概要

manimの作法、調べてみた。
ParametricFunction使ってみた。

#サンプルコード

```
from manimlib.imports import *

def lissajous_curve_func(t):
	return np.array((np.sin(2 * t) * 3, np.sin(3 * t) * 3, 0))

class test(Scene):
	def construct(self):
		grid = NumberPlane()
		self.add(grid)
		func = ParametricFunction(lissajous_curve_func, t_max = TAU, fill_opacity = 0)
		self.add(func)
		self.wait()



```

#生成した動画

https://www.youtube.com/watch?v=VoC10-nvXFo

以上。
manimの作法 その35


#概要

manimの作法、調べてみた。
TracedPath使ってみた。

#サンプルコード

```
from manimlib.imports import *


class test(Scene):
	def construct(self):
		grid = NumberPlane()
		self.add(grid)
		t = ValueTracker(0)
		dot = Dot(color = BLACK, background_stroke_color = WHITE, background_stroke_width = 2, radius = 0.06)
		dot.add_updater(lambda m: m.move_to(np.array([2 * np.sin(3 * t.get_value()) * np.cos(t.get_value()), 2 * np.sin(3 * t.get_value()) * np.sin(t.get_value()), 0])))
		path = TracedPath(dot.get_center, stroke_color = RED, stroke_width = 6, plot_depth = -2)
		self.add(path)
		self.play(Write(dot))
		self.play(t.set_value, PI, run_time = 6, rate_func = linear)
		self.wait()



```

#生成した動画

https://www.youtube.com/watch?v=RxahuyJimS8

以上。
リスト バリデーションチェック実装

リストに対してバリデーションチェックをかける実装をしたので学習記録用に記載。
###リストの値に対してエラーチェックをかけていく
```Service.java
public void ListErrorMessage(BindingResult bindingResult) {
    //リストのバリデーションはエラー時フィールド名が設定できないのでデフォルトメッセージにフィールド名を入れていく
    List<FeildError> error = bindingResult.getFieldErrors();
    Boolean hogeIniFlg = true;
    Boolean dateIniFlg = true;
    Boolean titleIniFlg = true;
    
    for(int =i; i<error.size(); i++){
       String field = error.get(i).getField();
       String objectName = error.get(i).getObjectName();

       if(field.contains("hoge") && hogeIniFlg){
          String defaultMessage = error.get(i).getDefaultMessage().replace("[0]","※ホゲ"
          FieldError fError = new FieldError(objectName,"outError["+i+"]",defaultMessage);
          bindingResult.addError((ObjectError) fError);//objectError型にキャスト
          hogeIniFlg = false;//二つ目以降はいらないためfalse
       }
       if(field.contains("date") && dateIniFlg){
          String defaultMessage = error.get(i).getDefaultMessage().replace("[0]","※日付"
          FieldError fError = new FieldError(objectName,"outError["+i+"]",defaultMessage);
          bindingResult.addError((ObjectError) fError);
          dateIniFlg = false;
       }
       if(field.contains("message") && messageIniFlg){
          String defaultMessage = error.get(i).getDefaultMessage().replace("[0]","※メッセージ"
          FieldError fError = new FieldError(objectName,"outError["+i+"]",defaultMessage);
          bindingResult.addError((ObjectError) fError);
          hogeIniFlg = false;
    }
}
```
＜FieldErrorクラス＞
**コンストラクタの生成**
FieldError(String objectName, String field, String defaultMessage)

**パラメーター:**
objectName - 影響を受けるオブジェクトの名前
field - オブジェクトの影響を受けるフィールド
defaultMessage - このメッセージを解決するために使用されるデフォルトのメッセージ


＜Boolean型＞
※boolean型とは、true(トゥルー) またfalse(フォールス)のどちらかのデータが必ず入ることが決まっているデータ型
※boolean型はデータ型のため、プログラムで使う前に事前に宣言する必要がある
（メソッド内で宣言したローカル変数で、初期化(※初期値を明示的に入れること)しないまま変数を利用するとエラーになる。）
**「booleanとBooleanの違い」**
・Booleanとは、boolean型ラッパークラスのことで、boolean型を便利に使うためのメソッドを持つ。

boolean型・・・　プリミティブ型　値を持つ
Booleanクラス・・・参照型　クラスまたはインスタンスを参照する（Booleanはクラスなのでnullも表現できる）

※contains()
boolean contains(Object o)
指定の要素がこのリストに含まれている場合にtrueを返します。つまり、このリストに、(o==null ? e==null : o.equals(e))となる要素eが1つ以上含まれている場合にのみtrueを返します。
定義:contains、インタフェース: Collection<E>
パラメータ:o - このリスト内にあるかどうかが判定される要素
戻り値:指定された要素がこのリスト内にある場合はtrue

※get()
get(int index)
このリスト内の指定された位置にある要素を返します。
パラメータ:index - 返される要素のインデックス
戻り値:このリスト内の指定された位置にある要素

※size()
int size()
このリスト内にある要素の数を返します。
定義:size、インタフェース: Collection<E>
戻り値:このリスト内の要素数

```controller.java
//バリデーションチェック
//hasFieldErrors()で変数を指定したものだけ処理を通す
if(result.hasFieldErrors("hoge*")||result.hasFieldErrors("date*")||result.hasFieldErrors("message*"){
return "view/error"
}
```

```form.java
@Valid
List<@Size( max=10 , message = "{メッセージプロパティから取得}") String> hoge;
@Valid
List<@Size( max=10 , message = "{メッセージプロパティから取得}") String> date;
@Valid
List<@Size( max=10 , message = "{メッセージプロパティから取得}") String> title;
```

```html.java
<p th:if="${#fields.hasErrors('outError*')}" th:errors="*{outError*}"></p>
```
※serviceで"outError["+i+"]"にエラーメッセージを入れているためoutError*
Java認証Proxy対応方法

# 対応方法
1. http[s].proxyHost, http[s].proxyPortの指定
2. Authenticator.setDefaultの設定

## 1.http[s].proxyHost, http[s].proxyPort, jdk.http.auth.proxying.disabledSchemes=の指定
### 指定箇所
以下のいずれかを実施。2番目がおすすめ。

* 利用しているJDK,JREの`/conf/net.properties`に指定
* 起動時のVM引数 
    * `-Dhttp.proxyHost`
    * `-Dhttp.proxyPort`
    * `-Dhttps.proxyHost`
    * `-Dhttps.proxyPort`
    * `jdk.http.auth.proxying.disabledSchemes=` ※未指定にする

## 2. Authenticator.setDefaultの設定

### 2-1. アプリケーション起動時に以下処理を実行する

```java
        Authenticator.setDefault(new Authenticator() {
            protected PasswordAuthentication getPasswordAuthentication() {
                return new PasswordAuthentication(
                        System.getProperty("proxyUser"),
                        System.getProperty("proxyPassword").toCharArray());
            }
        });
```

### 2-2. 実行時にVM引数を与える
proxyUser, proxyPasswordは、VM引数に`-DproxyUser=XXX`、`-DproxyPassword=YYY`として与える。
非プログラマー向け、プログラマーで働いたらこんな感じってわかるUdemy講座

こんばんは。
普段はゲームを作っています。

私はプログラマーではないのですが、プログラマーになりたいと思って就職活動をしています。（2021/01/31時点）
プログラマーとして働いたらこんな感じなんだな、と感銘を受けた講座があったため紹介します。

・こちらはプログラマーに憧れる、非プログラマー向けの記事です。

"ピーコックアンダーソン"さんです。
C#を勉強する順番
https://www.udemy.com/course/cs-study7step/

私はUnityを使っている都合上、
C＃er（シーシャーパー{言ってみたかっただけです}）なので、C＃を本格的に学びたいと考えたときにピーコックアンダーソンさんに行きつきました。
C＃の基礎から、.Netやコーディングルール、オブジェクト指向のことなど様々な講義をやられています。
本当に論理的な講義で、想像していたプログラマーの方の人物像と重なるところもあり、ついたくさん買ってしまいました笑
まだすべて見ていない講義があるのでこれからどんどん見ていきます。

非プログラマーの私にはこちらの講座が面白かったです。
ピーコックアンダーソンのプログラマー仕事の流儀
https://www.udemy.com/course/jobstyle/
プログラマーとしての心構えを教えてくれています。

ご自身で動画サイトもやられていて、こちらに登録をすると一つの動画を無料で見ることができます。
Peacock ANDERSON
https://school.anderson02.com/p/main

Youtubeでもプログラマーの方の動画がたくさんありますが、
自社開発キラキラ系や情報教材っぽいのもいくつか見受けられるので、
SIerの方の仕事の動画はなかなか見られず、今回紹介したUdemy講座に感動したので今回投稿しました。

Udemyでも初歩の方は無料の動画を上げてくれているのでよかったらどうぞ。
コントローラーが呼び出される前後に共通処理を追加

###概要
コントローラーが呼び出される前や後に実行する共通処理を追加する際についてまとめていきます。

使用言語：Java

####やりたいこと
今回やりたいことは以下の3つです。
1. コントローラーが呼びされた際にリクエストをチェックする(今回はリクエストヘッダーのチェック)
2. チェック処理を正常に通過した場合、リクエストに新しい値を追加
3. コントローラーが呼び出される


1. コントローラーが呼びされた際にリクエストをチェックする
2. チェック処理を正常に通過した場合、リクエストに新しい値を追加

```java:interceptor.java
public class SanpleInterceptor extends HandlerInterceptorAdapter {

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {
        String requestHeader= request.getHeader(AUTHORIZATION); // ヘッダーからAuthorizationの値を取得

        // ここでrequestHeaderのAuthorizationの値のチェック処理を行う
        // チェック処理を正常に通過した場合、リクエストに追加
        request.setAttribute("add", "ok!")
        return true;
    }
}
```

3. コントローラーが呼び出される

```java:SampleControllr.java
@RestController
public class SampleController {
    
    
    @RequestMapping("/sample")
    public void sample(@RequestBody SampleRequest SampleRequest, @RequestAttribute Strin add) {
        System.out.println(add);

        // コンソール: ok!
        }
}
```
Interceptorで追加した"ok!"という文字列が表示されタラ成功です！

今回はリクエストに対する処理でしたが、レスポンスを返却する際の処理も追加することが可能です。
共通化できる処理は共通化できるように、実装の仕方をもう少し勉強していきたいと思います！
【Ruby on Rails】本番環境でのActionMailer機能のエラー発生と原因

#発生したエラー

開発環境で`ActionMailer`による問い合わせ機能を実装し、本番環境に反映させた後、実際に機能の動作確認を行ったところ、エラー画面が表示されてしまった。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/936377/7cf91851-7d23-129c-1648-4a513e7dcf7b.png)

その後本番環境内でコマンド`sudo tail -f log/production.log`を実行し、ログを確認したところ、`ArgumentError (SMTP To address may not be blank: []):`が発生していることが判明。

解決を目指す中で以下の問題点が発見されたので、備忘録として記載。

## 1. `config/environment内`のファイルの設定の不備

ActionMailer機能の実装の際に編集したファイルの中で、まずメール送信の設定を行っていたファイル周辺を確認。
結果、`development.rb`で設定した内容を`production.rb`で記述していなかったことが判明。

開発環境でのみアプリを動かすのであれば前者のみで問題ないが、デプロイを前提とした場合、後者の`production.rb`にも同じ内容のメール送信設定をする必要がある。このあたりに関する認識が甘かった。

```rb:config/environments/development.rb
  config.action_mailer.raise_delivery_errors = true
  config.action_mailer.delivery_method = :smtp
  config.action_mailer.smtp_settings = {
    address: 'smtp.gmail.com',
    port: 587,
    domain: 'gmail.com',
    user_name: ENV['SEND_MAIL'],
    password: ENV['GMAIL_SPECIFIC_PASSWORD'],
    authentication: 'plain',
    enable_starttls_auto: true
  }
```
**同じ内容を`production.rb`にも記述**

```rb:config/environments/production.rb
  config.action_mailer.raise_delivery_errors = true
  config.action_mailer.delivery_method = :smtp
  config.action_mailer.smtp_settings = {
    address: 'smtp.gmail.com',
    port: 587,
    domain: 'gmail.com',
    user_name: ENV['SEND_MAIL'],
    password: ENV['GMAIL_SPECIFIC_PASSWORD'],
    authentication: 'plain',
    enable_starttls_auto: true
  }
```
サーバーを立て直し、再度機能の確認を行ったところ、またしても同じエラーが発生してしまう。

## 2. `.envファイル`のアップロードの不備

エラーが解決されなかったので、次に環境変数が本番環境にきちんと反映されているかどうかを`viコマンド`を使用して確認。

その結果、`production.rb`内で使用している環境変数の部分が、本番環境にある`.envファイル`に反映されていないことが判明。

`GithubAction`でプリコンパイルや`bundle install`などの諸々の処理を設定していたため、見落としてしまっていたが、新たに環境変数を設定し`.envファイル`を編集した際には、それを都度、開発環境にアップロードして反映させる必要がある。
開発環境内で`scpコマンド`を使用して`.envファイル`を本番環境にアップロード。
本番環境で再度`viコマンド`を使用しファイルを確認。

```:.env
DB_USERNAME="XXXXX"
DB_PASSWORD="XXXXXXX"
DB_HOST="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
DB_DATABASE="sample.app"
GOOGLE_MAP_API_KEY="XXXXXXXXXXXXXXXXXXXXXXX"
SEND_MAIL="XXXXXXXXXX@gmail.com"　　# この部分
GMAIL_SPECIFIC_PASSWORD="XXXXXXXXXXXXXX"   # この部分                                                                                                                                                                                                                                                                                                           
                                                                                                                                                                                                                                                                                              
```
編集内容が問題なく`.envファイル`に反映されていたため、サーバーの再起動を行い動作確認を行ったところ、問題なく作動。

##反省点

初学者の為、本番環境での運用に向けた設定への理解が足りていなかった。
今後デプロイを前提としてアプリケーションの開発を行う場合は、こうした点に注意して実装を行っていく必要があると感じた。
ヘルスチェック

サーバーのヘルスチェック

Is down or blocked site? Check website down down right for me or for all
http://leading-tech.jp.isdownorblocked.com/
http://leading-tech.jp.isdownorblocked.com/de
http://leading-tech.jp.isdownorblocked.com/fr
http://leading-tech.jp.isdownorblocked.com/es
http://leading-tech.jp.isdownorblocked.com/ru
Vue.jsの環境構築をしてhellowordを出力する【初心者向け】

以前手取り足取りでなんとかVueで開発をしたのですが、忘れてしまったので復習しながら自分の教科書として残します。
理解力がないのでかみ砕いた言葉で説明多めです。もし間違いがあればご指摘いただいただけますと幸いです。

PC：windows10
IDE:VScode

#Vue.jsってなに？
以下公式から引用
>ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。

早速ハテナが多いです。（未だに専門用語に慣れない）他サイトの説明などをまとめると、
Vue.jsはJavaScriptのフレームワークの1種で、見た目（view）部分に強いライブラリが多くDOM操作を自動化してくれます。優秀。効率よくフロントエンドの開発ができて学習コストも低めらしいです。


#環境構築してみる
公式が推奨しているnpmを使用してインストールしましょう。
VueCLIを使用していきます。

###VueCLIってなに？
Vue.jsはさきほども記述しましたが、JavaScriptのフレームワークです。
VueCLIは、Vue.jsで開発するための便利ツールセットです。Vue開発キットみたいなものですね。こちらを使用することで拡張子「.vue」のファイルで開発することができます。


###npmってなに？
npmの正式名称は、Node Package Managerです。
Node.jsのパッケージ（Package）を管理する（Manager）ツールです。名前のまんまですね。
パッケージとは、予め用意された便利な機能をまとめたものです。

###Node.jsってなに？
JavaScriptはブラウザ上で動作するプログラミング言語ですが、パソコン上でも動かせるようにしてくれるものです。
こちらの記事がとってもわかりやすいです↓
[Node.jsとはなにか？なぜみんな使っているのか？](https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb)

nodeをインストールしないとnpmコマンドが使えないです。
[こちら](https://nodejs.org/ja/)からインストールできます。手順等は他サイトもたくさんあるので割愛します。
[プロゲート](https://prog-8.com/docs/nodejs-env-win)のインストール手順が見やすそうなので一応参考にはっておきます。


##VueCLIをインストールする
コマンドプロンプトで以下のコマンドを実行します。

```
 npm install -g @vue/cli
```


以下のようにバージョンを確認できていればインストールができています。

```
vue --version
@vue/cli 4.5.11  ←これが出ればOK
```

vueのコマンドが認識されない場合はpathを通しているか確認してみましょう。
参考になりそうな記事を貼っておきます↓
[「PATH を通す」の意味をできるだけわかりやすく説明する試み](https://qiita.com/sta/items/63e1048025d1830d12fd)


以上でインストールは完了です。

##Hello Worldを出力する
###Vueプロジェクトの作成
まずはプロジェクトの作成をしましょう。任意のディレクトリで以下のコマンドを実行します。
createのあとは任意のプロジェクト名を入力してください。今回はvue_sampleとしました。

```
vue create vue_sample
```
? Please pick a presetなど途中でいろいろ聞かれますが、全部Enterで大丈夫です。
package.jsonという設定ファイルがあり、あとからいろいろと変更できます。

以下のコマンドで今作成したファイルを開いてみましょう。

```
code vue_sample
```

開いてみると以下のようになります。
![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550109/e6d47bf2-bac4-a269-1112-5b307b52be84.png)


###実行してみる
それではVScodeのターミナル（ctrl + shift + @）で以下のコマンドを実行し開発用サーバーを立ち上げてみましょう。

```
npm run serve
```
成功すると以下のようにターミナルに表示されます。

```
 DONE  Compiled successfully in 3331ms                                                 17:37:18

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.24:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.
```

ターミナルに表示されている[http://localhost:8080/](http://localhost:8080/)にアクセスしてみましょう。
以下のような画面が表示されていたら成功です。簡単！
![2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550109/f239dba1-3e79-d103-6e9c-44527d333a6b.png)

###ファイルを編集する
実行後の画面は、/src直下の`App.vue`が表示されていますので、今回は直接以下のように書き換えてみましょう。

```App.vue
<template>
  <div id="app">
    <p>HelloWorld</p>
  </div>
</template>
```

これで保存してみると
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550109/4f887ea3-c406-2a63-5eb8-ba4ea692ec55.png)
出力できました。

vueについての基礎知識はメモがてら更新していく予定です。おわり！
ITパスポートに三日で合格する方法

こんにちは。
普段はゲームを作っています。

先日、ITパスポートに合格できたので、合格する方法をまとめました。
思い立ってから三日で合格することができました。
合格したのはUdemyのおかげでもあったので、誰かの役に立てばと思い、投稿します。

・そもそも、ITパスポートはITの全般的な知識を浅く広く身に着けるためにあるので合格に重きを置くのはどうなのか、
という点はここでは触れません。

・とにかく合格したい、合格者が50％以上の難易度の低い資格なのでさっさと合格したい。
というちょっと人を選ぶ記事となります。

■ITパスポートに合格するために使った教材

1、本
2、道場
3、Udemy

1、本について
本はなんでもいいと思います。
書店にあるので、それで読みやすそうなものをパラっと読んで、気に入れば買うのがいいかと思います。
ITパスポートを取得したい方にも、IT以外を志望している方など色々いるとは思うのですが、
結局、合格した後、さらにITの知見を深めていくことになると思うので、ここで浅く広い内容が書かれた本を買う必要は特にないかもしれません。
私は買いましたが、なくても合格できたかと思います。

2、道場について
ITパスポート過去問道場というサイトがあります。
https://www.itpassportsiken.com/ipkakomon.php
大変役に立ちました。
まず何より先に過去問を受けてみるのが良いと思います。
ITパスポートはIT的な知識だけでなく、ビジネスなどの知識も浅く問われるのでまず受けるのがおすすめです。

3、Udemyについて
大変参考になった記事はこちらです。
最新版:　ITパスポート試験 + 情報セキュリティマネジメント試験　講義＆過去問解説
https://www.udemy.com/course/it-it-sf/
この講座を試験の直前まで聞いていました。
思い立ってからの三日間は隙間の時間に欠かさず聞いていました。
偶然だとは思いますが、ちょうど直前に聞いていた内容が試験に出たので本当に買ってよかったと思いました（歩きながら聞く際は車などにお気を付けください）
この講座ではITパスポートのさらに上の情報セキュリティマネジメント試験まで触れているので、セールのときの値段なら書籍よりもコスパいいと思います。

■合格までの勉強法

・まず道場で過去問を受ける
→
・間違えた問題の分野が統計でわかるのでその分野のことを調べる　周辺知識も仕入れる
→
・隙間の時間には苦手分野のUdemyの講義をよく聞く
→
・過去問を解く

を繰り返しました。
これだけです。

合格率の高い試験とはいえ、半分の方は合格出来ていないため、舐めてかかると落ちるかもしれません。
この記事を読んだ方が合格することを願っています。
2021/01/31
rails db:migrate がうまく実行されない時の対処法

Webアプリを開発中にmigrateで手こずったので、その備忘録として。
#原因
そもそもの原因として、migrationファイルに問題(作成した順番など)があるためrails db:migrateを実行していく中で整合性が合わなくなり、完了されなかったことが考えられる。
#対処法

migrationファイルを直す方法(本当はこちらが良い)もあるが、今回は一時的な解決法として特定のversionのみmigrateし、それを繰り返すというやり方(少々強引※非推奨)を提示していく。

まずは以下のコマンドを実行し、migrateが実行されていないものを確認。

``` 
  rails db:migrate:status
```

すると

```
Status   Migration ID    Migration Name
--------------------------------------------------
   up     20200530221315  Create members
   up     20200531020945  Create administrators
   up     20200603224605  Create staff posts
  down    20200606215347  Create customers
  down    20200606215411  Remove addresses
   up     20200107092204  Devise create admin users
   up     20200107092210  Create active admin comments
  down    20200107092210  Create active admin comments
```
以上(例)のように表示されるので、statusがdownになっているMigration IDを把握する。
(upになっているファイルはすでにmigrate済み。)

そして、

``` 
  bundle exec rake db:migrate:up VERSION=Migration IDをここにコピペ
```

を実行してstatusがupになっていることを確認。

これを繰り返して全てのmigrationファイルのstatusがupになれば一番良いのだが、きちんとmigrateされないファイルも出てくる。そのような時は順番を変えて行えばうまくいくケースがあるので、何通りか試してupになることを確かめると良いかもしれない。

###Heroku版

``` 
  heroku run rails db:migrate:status
```

```
  bundle exec heroku run rake db:migrate:up VERSION=Migration IDをここにコピペ
```
DataBindingとは

# DataBindingとは
レイアウトにデータを受け渡すことのできる[Google公式ライブラリ](https://developer.android.com/topic/libraries/data-binding/index.html)。
本来であればViewを取得し、データを設定する必要があるが、DataBindingを使えば
ViewModelの値を変更するだけで直接レイアウトのプロパティにアクセスし、更新してくれる。

毎回Viewを取得する必要がなくなるため、ソース全体がスマートになる。

# DataBindingの実装

appのbuild.gradleに以下を追加

```build.gradle
android {
    …
    dataBinding {
        enabled = true
    }
}
```

### レイアウトをDataBindingの形に変更

```main_fragment.xml
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <variable
            name="viewmodel"
            type="~~(指定のパス)~~.MainViewModel"/>
    </data>

    ...

    <TextView
        android:id="@+id/userName"
        android:text="@{viewmodel.userName}" 
    ... />

    <TextView
        android:id="@+id/userId"
        android:text="@{viewmodel.userId}" 
    ... />
    
    ...
</layout>
```

### Bindingインスタンス取得
```MainFragment.kt
    private var binding: MainFragmentBinding

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        binding = MainFragmentBinding.inflate(inflater, container, false)
        binding.lifecycleOwner = this

        return binding.root
    }
```


### MainViewModelで変数に値をセット

```MainViewModel.kt
    userName = "キータ太郎"
    userId = "12345"
```

このようにViewModelに紐付けてあげることによって、 
MainViewModelでuserName、userIdの値が書き換えられると自動的にViewの値も更新される。

この場合はViewModelからViewにデータを渡したが、
ViewからViewModelに値を渡す場合は次のように書けば良い。

```main_fragment.xml
    <TextView
        android:id="@+id/userName"
        android:text="@={viewmodel,userName}" 
    ... />

    <TextView
        android:id="@+id/userId"
        android:text="@={viewmodel.userId}" 
    ... />
```

このように`@=`としてあげることで、
View→ViewModelのデータの受け渡しを行うことができる。

### 関数の呼び出し

ボタンをクリックした際にこの関数を呼び出したい！というとき、
DataBindingは関数をも呼び出すことができる。


```main_fragment.xml
    <Button
    ...
    android:onClick="@{() -> viewModel.onClick()}"
    ... />
```

```MainViewModel.kt
    fun onClick() {
        // クリックされた後の処理
    }
```

このように書いてあげることで、
わざわざ`setOnClickListener`でリスナーをセットをする必要がなくなる。

### ＋α
ここまではViewとViewModelとのデータの受け渡し方法を説明してきた。
これらを活用すると、以下のようなことも行える。

```main_fragment.xml
  <Button      
    ...
    android:enabled="@={viewmodel.frag}"
    ... />
```

```MainViewModel.kt
    var frag: Boolean = true
```

これは、MianViewModelの変数である`frag`の値（true/false）によって、
ボタンの活性/非活性状態を切り替えるという場合に使える。
他にも、値によって表示するテキスト文字を変更することもできる。
この方法を活用することで、様々な場合で適用できる。

### 結論
DataBindingは便利すぎる。
Files.listやFiles.walkやFiles.findの戻り値であるStream<Path>はクローズしないと、Too many open files が発生する

`Files.list`や`Files.walk`や`Files.find`の戻り値である`Stream<Path>`は`DirectoryStream`をラップしたもので、利用後は必ず`close`する必要があります。[このことはJavaDocにも以下の通りに記述されています。](https://docs.oracle.com/javase/jp/8/docs/api/java/nio/file/Files.html)

> 返されるストリームは、1つ以上のDirectoryStreamをカプセル化します。ファイル・システム・リソースのタイムリな破棄が必要な場合は、try-with-resources構文を使用して、ストリーム操作の完了後にストリームのcloseメソッドが呼び出されるようにしてください。クローズされたストリームに対して操作すると、結果としてIllegalStateExceptionが発生します。

では`DirecotryStream`のラッパーである`Stream<Path>`を`close`しない場合、どうなるでしょうか? 以下のコードは`Files.list`を`close`せずに呼び出し続けるものです。

```Main.java
public class Main {
    public static void main(String[] args) throws IOException {
        while (true) {
            Files.list(Paths.get("/dev")).collect(Collectors.toList());
        }
    }
}
```

これを実行してみると、以下のような例外が発生します。

```
Exception in thread "main" java.nio.file.FileSystemException: /dev: Too many open files
        at java.base/sun.nio.fs.UnixException.translateToIOException(UnixException.java:100)
        at java.base/sun.nio.fs.UnixException.rethrowAsIOException(UnixException.java:111)
        at java.base/sun.nio.fs.UnixException.rethrowAsIOException(UnixException.java:116)
        at java.base/sun.nio.fs.UnixFileSystemProvider.newDirectoryStream(UnixFileSystemProvider.java:432)
        at java.base/java.nio.file.Files.newDirectoryStream(Files.java:471)
        at java.base/java.nio.file.Files.list(Files.java:3698)
        at list.Main.main(Main.java:11)
```

`Too many open files` というメッセージからもわかる通り、`Stream<Path>`を明示的にクローズしないと、ファイルディスクリプタがオープンしたままになって、そのうちにプロセスのファイルディスクリプタの上限に達してしまいます。

よってJavaDocに書かれてある通り、`Stream<Path>`は使い終わったら、明確にクローズする必要があります。

```Main.java
public class Main {
    public static void main(String[] args) {
        try (Stream<Path> ds = Files.list(Paths.get("/dev"))) {
            List<Path> paths = ds.collect(Collectors.toList());
        } catch (IOException e) {
            throw new UncheckedIOException(e);
        }
    }
}
```

---

__環境情報__

```
C:\>javac -version
javac 11.0.3
C:\>java -version
openjdk version "11.0.3" 2019-04-16
OpenJDK Runtime Environment AdoptOpenJDK (build 11.0.3+7)
OpenJDK 64-Bit Server VM AdoptOpenJDK (build 11.0.3+7, mixed mode)
```
Goに導入されるGenericsについてまとめてみた

## Go言語にGenericsが導入されるらしい
来年8月にリリースされる Go 1.17 にGenericsが導入されるらしい
https://blog.golang.org/generics-next-step

雑な訳
> 私たちは、Goコミュニティにジェネリックを試す機会を与えてくれることを願っています。
まず、ジェネリックコードは意味があるのか？Goのように感じられるか？人々はどのような驚きに遭遇するので
しょうか？
第二に、多くの人がGoにはジェネリックが必要だと言っていますが、それが何を意味するのかは必ずしも正確に
はわかりません。この草案は、この問題に有用な方法で対処していますか? Goにジェネリックがあれば解決でき
るのに」と思わせるような問題があった場合、このツールを使ったときにその問題を解決できますか？
私たちは、Goコミュニティから集めたフィードバックをもとに、今後の進め方を決定します。デザインの草案が
好評で、大幅な変更が必要ない場合は、次のステップとして、正式な言語変更の提案を行います。期待値を設定
するために、設計草案に全員が完全に満足し、これ以上の調整を必要としない場合、ジェネリック医薬品をGoに
追加できるようになるのは、2021年8月に予定されているGo 1.17のリリースが最も早いでしょう。もちろん、
実際には予期せぬ問題が発生する可能性もありますので、これは楽観的なタイムラインであり、明確な予測はで
きません。


## Genericsとは

「総称性（Genericity）」「ジェネリック・プログラミング」とも呼ばれるプログラミング技法で、 オブジェクト指向とは異なるパラダイムからきたもの。 データの型に束縛されず、型そのものをパラメータ化して扱うことができる。
特徴は、型を抽象化してコードの再利用性を向上させつつ、静的型付け言語の持つ型安全性を維持できることである。
従来の静的型付け言語において、ソートなどのアルゴリズムや連結リストのようなデータ構造（オブジェクトのコンテナ）を記述する際は、たとえ対象となる要素のデータ型が異なるだけで事実上同一のコードであったとしても、具体的なデータ型ごとにそれぞれ実装しなければならない。整数型のリスト、浮動小数点のリストなどなど

C++やJava、RustやSwiftなど、他のほとんどの静的型付け言語がサポートしている機能



## なぜGoにGenericsがなかったのか

> どこかの時点で、ジェネリックは追加されることでしょう。我々は、ジェネリックを急いで実装する必要はないと思っていますが、一部のプログラマにとって必要であることは理解しています。ジェネリックは便利ではありますが、型システムとランタイムに複雑さによるコストをもたらします。我々は、この複雑さに見合うだけの価値を持つ設計のアイデアをまだ見つけることができていませんが、これからも継続して考えていきます。
差し当たっては、Go言語に組み込まれているマップとスライス、および空インタフェースを使ったコンテナ(明示的なunboxingが必要)を利用することで、ほとんどの場合、ジェネリックで実現可能なことと同等のコードを如才なくとはいきませんが記述することが可能です。
この問題は、未解決のままにしておきます。

Goの開発チームが比較的保守的だった。Rob Pikeは以下のように言っている

> 我々とコミュニティが数年間 Go を使い続けた結果、修正したいと思う事が山ほどありましたが、それらの変化は破壊的な物でした。
そこで我々はコミュニティを引っ張っていくために、"go fix" コマンドを使って慎重にプログラムの更新をを実施しましたが、それが完了した後に我々は、その更新をやめるだけでなく以降、言語の変更を停止し続ける事を約束しました



# Genericsはすでに使うことができる

```bash

$ git clone https://go.googlesource.com/go
$ cd go
$ git checkout dev.go2go 
$ cd src
$ ./make.bash

GoPlayGroudのgo2goバージョンでも使える
https://go2goplay.golang.org/

```

例文は以下のサイトが参考になるので、参照してみてください。
https://bitfieldconsulting.com/golang/genericsGo
ISLispコンパイラ、フォーマッタにモジュールを導入

#懐メロの世界
最近、どっぷりLisp、ISLispに漬かってます。モダンなElixirも楽しいのですが、根がLisp＆Prologの人なのでした。自作のISLisp処理系にモジュールを導入し、フォーマッタも整備しました。

#ISLispにはモジュールがないのだけど
そう、規格にはいってないのですね。まとめる時間がなかったみたい。東北大学、伊藤先生の門下生だった泉先生という方が独自にパッケージを拡張、実装したという記事を読みました。

https://franz.com/services/conferences_seminars/jlugm00/conference/Talk15izumi.pdf

私はElixirのモジュールを参考にしつつISLispの拡張を試みました。数千行になるISLisp用のコンパイラにもこのモジュールで管理するように変更しました。とりあえず名前の衝突は避けられています。

モジュールにするとコードのインデントを直さないといけません。手動でやるのは面倒です。ISLisp用のフォーマッタを作り、これをモジュール拡張にも対応させました。

#仕様

###defmodule
(defmodule モジュール名　本体部)
モジュール名にはシンボルを与えます。
本体部にはISLispで規定されているすべてのものが記述可能です。defun、defglobal、defmacro、defgenericなど
モジュール内でのみdefpublicという関数記述ができます。これは関数定義ですが外部から参照が可能です。
他の関数名などはモジュール名:：関数名のように変換されています。例えばfooというモジュールでbarという関数を定義した場合にはfoo::barという関数名となっています。

###import
(import ライブラリ名)
ライブラリ名は文字列で与えます。でfモジュールを使ってライブラリ化したものを予めlibraryフォルダに保存しておきます。コンパイル済みのものがあればそれを優先的に読み込みます。

###formatter
(formatter ファイル名)
フォーマットしたいファイル名を文字列で与えます。オリジナルのファイルは*.orgに変更されます。フォーマットしたファイルに置き換わります。


#無いなら作っちゃえ
マイコン少年時代に雑誌、I/O読んでました。あれからゲリラ的ハックで無いなら作っちゃえ！の精神でやっております。

実装はgithubにおいてあります。
https://github.com/sasagawa888/eisl
Salesforce Classic での Pardot を使用した対ビジネスマーケティングの自動化 ⇒ Pardot の基本 (Salesforce Classic) ⇒ Pardot の使用開始

１．Pardot でビジターをプロスペクトに変換するために必要な情報にはどのようなものがありますか?
２．リードの育成はマーケティングオートメーション戦略で重要な役割を担います。リードの育成ではどのようなことを行いますか?
３．Dentasafe は歯科用品を製造販売しています。同社の製品には、消耗品、小型機器、歯科技工所での包括的なサービスなどがあり、Dentasafe の営業担当が販売しています。同社はプロスペクトを育成して、評価済みリードを Sales Cloud の営業担当に送信したいと考えています。 この会社に適した Salesforce ソリューションはどれですか?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634241/93b42260-54bc-4a2d-f0ec-5178f50e9a54.png)
Oracle APEXについて記事書いてくよって話

Oracle社のAPEXという製品をずっと触ってるSEです。
5年ほどAPEXに触れて、いろいろな意味で「そろそろかな」と思うようになってきたので
これまで得たものを整理するために記事を書いていこうかなと思っています。

最近は新しいこと（NodeJSとか）に挑戦したい欲もあり、
チュートリアルのような大きな記事を書くのは難しいので
思いついたTipsとか、なにか質問があれば扱っていこうかなと。

とはいえ、モダンなWeb技術に比べて少ない開発者数の割には
国内でも良記事がちらほら見られるようになってきたので、
記事のニーズはそれほど高くないのかもしれません。

微力ではありますがAPEXを扱う方の力になれば幸いです。
Laravelで本番DBを使用したらallowed memory size exhausted

# 状況
laravelで作ったプロジェクトを本番DBを接続したら、以下のエラーが発生。

```shell:コマンドライン
Allowed memory size of 134217728 bytes exhausted (tried to allocate xxxxxxxx bytes)
```

試験環境のDBテーブルではレコードがせいぜい数百件しかなかったので何も問題が起きなかったが、本番DBテーブルでは数十万件のレコードがあった。
この状態で多対多リレーションを書き換えようとしたことが原因。

# 解決
はじめはphpのプロセスメモリ使用制限を設定しているシステム変数memory_limitで設定を変更した。

```shell:php.ini
memory_limit=2M
```

```shell
systemctl restart
```
しかし、これでもエラーが出続けた。

調べるとlaravelのEloquentにchunk(), chunkByID()、cursor()があり、今回はデータの更新だったのでchunkByID()を利用。
多対多リレーションで使用したテーブルはlettersとstampsだったので、中間DBテーブルをletter_stampで作成。

```php:LetterController.php
$count = 0;
DB::table('letter_stamp')->where('active', true)
    ->chunkById(100, function ($pivots) {
        foreach ($pivots as $pivot) use($count) {
            $pivot->update(['stamp_id'], null);
            $count++;
        }
    });
```

中間テーブルのレコードを100件ずつ取得し、値の更新。
その際にクロージャへ親スコープから$count変数を引き継いで、更新件数を把握している。

#おまけ
[Laravel日本語版公式サイト](https://readouble.com/laravel/8.x/ja/queries.html?header=%25E7%25B5%2590%25E6%259E%259C%25E3%2581%25AE%25E5%2588%2586%25E5%2589%25B2)によるとchunk()では

> クロージャから falseを返えせば、それ以上のチャンクの処理を停止できます。

とのことなので、return falseで処理から抜けることができます。

# 参考資料
[Laravel8.x 公式](https://readouble.com/laravel/8.x/ja/queries.html?header=%25E7%25B5%2590%25E6%259E%259C%25E3%2581%25AE%25E5%2588%2586%25E5%2589%25B2)
[チャンキングで使用メモリを抑える](https://www.larajapan.com/2018/10/21/チャンキングで使用メモリを抑える/)
[LaravelでデータをDBに保存したいときのメモリ不足をなんとかする](https://kyamashiro.hateblo.jp/entry/2019/09/16/102743)
[Laravel で chunk を使いながらトータル件数を計算](https://r17n.page/2020/07/11/laravel-chunk-with-total-count/)
[Laravel(Eloquent): chunk() vs cursor()](https://qiita.com/ryo511/items/ebcd1c1b2ad5addc5c9d)
WebAssembyについて調べたことをまとめてみた

Rustを勉強する中で出会ったWebAssemblyという技術を気になったので調べてみました。

## WebAssembly(WASM)とは？
ウェブブラウザーで動作し、新たな機能と大幅なパフォーマンス向上を提供する新しい種類のコード。基本的に直接記述ではなく、C、C++、Rust 等の低水準の言語にとって効果的なコンパイル対象となるように設計されている。
実行時にパースやバイナリーコードへの変換処理が不要なため、ウェブ上で動作するクライアントアプリで従来は実現できなかった、ネイティブ水準の速度で複数の言語で記述されたコードをウェブ上で動作させる


## WebAssembly対応言語
・C
・C++
・Rust1.14以降
・Go1.11以降
・Kotlin/Native0.4以降


## WebAssemblyの登場した背景

### JavaScript も実行速度が求められるようになった
JavaScript は実行速度が遅い
動的型付け言語のため、事前にコンパイルができず、インタプリタにより逐次的に機械語に翻訳する
インタプリタは、文字列を解釈し、抽象構文木 (AST: Abstract Sytactic Tree) を作成する等のオーバーヘッドが生じる

### JIT コンパイラ (実行時コンパイラ) による高速化
JIT は Just In Time の略
JIT コンパイラは、実行環境に依存しない中間コードを、ソフトウェアの実行時に機械語にコンパイルする
具体的には、しばらくインタープリタを用いて動作させた後、得られた統計情報から型を推定し、必要に応じてネイティブコードに変換する

#### 問題点
型の推定用に統計情報が必要なため、高速に動作するまでに時間が必要
型の推定に失敗することがある

### asm.js の登場
JavaScript のサブセット
JavaScript を特定の制約に従って記述することで、型を明確にして AOT コンパイルできるようにする
AOT は Ahead-Of-Time（実行前コンパイル）を意味する

#### 問題点
ファイルサイズの増大による通信量の増加
ファイルサイズの増大による構文解析の時間の増加

そしてWebAssembly (Wasm) へ


## WASMとJavascriptの関係性
WebAssembly は JavaScript と異なる言語だが、その置き換えを意図していない。その代わり、JavaScript の足りない所を補填して併用し、ウェブ開発者に双方の以下のような利益を提供する事を狙っている（DOMのアクセスにWASMは制限があるので単純に置き換える事ができない）
JavaScript は高水準の言語であり、ウェブアプリケーションを作る上で十分な柔軟性と表現力を持っている。そして多くの利点 — 動的型付け言語である、コンパイルが必須でない、パワフルなフレームワーク、ライブラリやツールを提供する豊富な土壌等を持っている。

WebAssembly はネイティブに近いパフォーマンスで動作して、C++ や Rust のような低水準のメモリー管理を行う言語がウェブ上で動作するようコンパイルされる対象となる、コンパクトなバイナリー形式を持つ低水準なアセンブリに似た言語 (WebAssembly は将来的にGCによるメモリー管理を行う言語をサポートする 高レベルの目標 を持っている)。


## WASMはなぜ早いのか？
WebAssemblyはポータブルなスタックマシンであり、既存のウェブブラウザで広く用いられているJavaScriptと比べ、構文解析と実行が高速になるよう設計されている。

CPUの活用
asm.jsはJavaScriptとして処理できる形式でモジュールとその関数本体を定義していたため、その能力はJavascriptの表現できることに限定されていた。
一方でWebAssemblyは仮想的なハードウェアで動く低水準な命令の集まりとしてモジュールを定義されている。
これによりJavaScriptの表現能力に制限されず、CPUの機能をより十全に利用すること出来る。
起動の高速化
抽象構文木がバイナリ形式で与えられているおかげで、ネイティブコードを出力するために必要な処理の字句解析と構文解析の大半を省き、起動の高速化が可能となっている

普通のJavascriptだとブラウザの総実行時間の15-20%をパースに使っているらしい...


## まとめ
以上、WASMについてまとめたことをまとめました。とても魅力的な機能のように思いますが、以下を見る限りまだブラウザなどによっては使えない機能が多く発展途上の技術であるとも言えると思います
https://webassembly.org/roadmap/
Minecraft: エクセルで建物をデザインしてpythonで建築

#はじめに
うちの子(小学生)がMinecraftにハマっている。

そろそろプログラミングの学習をさせたいとおもっていたところ、「Minecraftで楽しく学べるpythonプログラミング」(斎藤大輔著)なる本を入手した。

私自身はMinecraftはやったことがなく、カクカクしたブロックの世界を横目で見たことしかない。いろいろな種類のブロックで建築物を作ったりできるらしいことは知っている。

##Minecraftでpythonを動かす
まずは本を読んで学習した。

私の理解では、MinecraftではModと呼ばれる改変用のプログラムを追加で導入して、利用することができる。

Modは様々なものが、公開されている。Mod群の管理に使うのがForgeというものらしい。

Minecraftのバージョンと、Forgeのバージョン、さらに、Modのバージョンの3つをぴったり揃える必要があるようだ。

Minecraftに「Raspberry jam」Modを導入すると、pythonのスクリプトを、Minecraftのチャット入力用のテキストフィールドから実行できるようになる。

実行するpythonスクリプト側からは、mcpiモジュールを使用して、raspberry jam環境が動いているMinecraftの世界とデータをやりとりする。

本に従って、Minecraftの世界でphtyonを動かせるようにした。まずは、helloworld.pyを実行。Hello Worldが表示されて、ひと段落。足元のブロックがダイヤモンドに変わって子供は大喜び。

ダイヤモンドを置くコードを調べたらたった1行だ。これなら世界中をダイヤモンドにすることもできそうだ。

##導入時のトラブル
Minecraftでpython scriptを実行しようとしたら、モジュールがimportできない、という問題が発生した。モジュール検索パスを調べるスクリプトを書いて実行したらpython2が動いていることが判明した。

raspberry modの設定ファイルを変更する必要があるが、これに関しては本を参考にしてほしい(ただし、[本書サポートページ](http://www.sotechsha.co.jp/sp/1165/)で入手できる設定ファイルを開いて、pythonのバージョンを実際に使用するバージョンに書き換える必要があった)。

著者による[Mac用python3の環境構築についてはこちら](https://qiita.com/Ds110/items/96a85f459ca827d5f58d)に解説がある。
##ちょっとうちの子には早かったかな？
困ったことに、うちの子の興味がpythonの方に向かない。なんとかして興味を繋ぎ止めたい、ということで、いろいろ考えてみた。

コードをちょっと変えてみて変化を調べたりするのは早すぎたのかもしれない。エクセルでブロックの配置を指定するデータファイルを作成して、これを読み込ませて建物が建てられるようにしたらどうだろうか？

うちの子は、そもそもエクセルすら触ったことがなく、コピーとかペーストも多分したことがない。エクセルのマスに数字を入力するだけでも大きな前進だ。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595771/e32dd131-19e9-35a3-9c2d-1e278b57d783.png)

57はブロックの種類の指定で、ダイアモンドブロックを指定している。A列の数値は、その右側の着色部分の繰り返し回数ということにする。何も数字がないところは、空間。

この図では、8ブロックx8ブロックx5ブロックの中空の直方体を指定してる。

A1からI28をコピーして、テキストファイルとして保存し、これを以下のpythonスクリプトで読み込むことにした(セルとセルの区切りは\t、改行は\n)。

pythonスクリプトと、データファイルの置き場所は、本を参考にしていただきたい。

```py
from mcpi.minecraft import Minecraft
from mcpi.block import *
mc = Minecraft.create()
pos = mc.player.getTilePos()

#建物のデータを読み込む
f = open('mc_input.txt','r')
data = f.read()
f.close

#データを読み込んで整理
floors = []
repeats = []
lines = data.split('\n')
for line in lines:
    d = line.split('\t')
    if d[0] != '':#各行の先頭に文字があったら、繰り返し指定。
        repeats.append(int(d[0]))
        k = []
        floors.append(k)    
    k.append(d[1:])

#ブロックを置く
y = 0
for index in range(len(repeats)):
    for i in range(repeats[index]):    
        z = 0
        y = y + 1
        for lines in floors[index]:
            x = 0
            for b in lines:
                #ブロックを置く処理
                if b != '':
                    mc.setBlock(pos.x + x,pos.y + y,pos.z + z,Block(int(b)))
                x = x + 1
            z = z + 1

```

Minecraftの世界では、平面方向にx座標とz座標が伸びており、垂直方向がy座標になっている。

###できました。
こんな風になりました。こちらではブロックIDとして133(エメラルドブロック)を使用しています。
![2021-01-31_16.31.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595771/9d7f435e-bac2-5408-e3cb-2fb1e872435e.png)

###結局
うちの子にとっては、内部に湧いたモンスターを倒すのが楽しいらしい。
FlutterでiOSのSegmented ControlのようなUIを作る

#はじめに
業務でiOSのSegmented ControlのようなUIを作成したので、備忘録代わりにまとめてみます。
MaterialSegmentedControlを使いました.
また、よりiOSらしくするCupertinoSegmentedControlも試してみました。

#動作イメージ
![スクリーンショット 2021-01-31 17.07.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/817871/0c5e6164-333c-ac5e-cce2-c0587e1fcca1.png)

#実装
_currentSelectionで選択したindexを持っておきます。
disabledChildrenに値を入れると、選択不可になります。

```
class _OrderSelectorState
    extends State<OrderSelector> {
  int _currentSelection = 0;

  @override
  Widget build(BuildContext context) => MaterialSegmentedControl(
    children: const {
      0: Text('First'),
      1: Text('Second'),
      2: Text('Third'),
      3: Text('Fourth'),
    },
    selectionIndex: _currentSelection,
    borderColor: Colors.grey,
    selectedColor: Colors.red,
    unselectedColor: Colors.yellow,
    borderRadius: 8,
    horizontalPadding: const EdgeInsets.all(16),
    disabledChildren: const [3],
    onSegmentChosen: (int index) {
      print('selected : $index');
      setState(() {
        _currentSelection = index;
      });
    },
  );
}
```

#よりiOSらしく
CupertinoSegmentedControlを使った場合の動作イメージも載せておきます。
実装はほぼ同じでした。
![スクリーンショット 2021-01-31 17.19.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/817871/085f8519-9891-92fd-8b12-96e0ad654890.png)
Rubyのメソッド

## downcaseメソッド
大文字を小文字に変換してくれるメソッド

```ruby:ruby
def down(str)
  puts str.downcase
end 

str("HelloRuby")

#出力は全て小文字で、hellorubyとなります
```

## sliceメソッド
一部の文字を切り取りしたい場合に使用するメソッド

```ruby:ruby
def cut(str)
  puts str.slice(2)
end

str("HelloRuby")

#lが出力されます
```

また、切り取る範囲も指定することもできます

```ruby:ruby
def cut(str)
  puts str.slice(2..5)
end

str("HelloRuby")

#lloRが出力されます
```
【Java】HashSetクラスの使い方

#はじめに
本記事ではjava.util.Setインターフェースを実装するコレクションクラスの中で最も一般的な
``java.util.HashSetクラス``について書きます。

#HashSetクラスの特徴
### 1. 重複した値を格納しようとすると、エラーは発生しないが格納されない
以下の例では、**ゴリラ**を2回addしていますが、要素数は3となっています。

```java

Set<String> animals = new HashSet<String>();

    animals.add("猿");
    animals.add("熊");
    animals.add("ゴリラ");
    animals.add("ゴリラ");

System.out.println("動物は" + animals.size() + "種類です"); //動物は3種類です
```

### 2. 値の順序が保証されていない
以下の例では、**猿⇨熊⇨ゴリラの順で格納**しましたが、出力は異なっています。

```java

Set<String> animals = new HashSet<String>();

    animals.add("猿");
    animals.add("熊");
    animals.add("ゴリラ");

    for(String s : animals){

        System.out.println(s + "　"); // 熊　ゴリラ　猿
    }
```

#最後に
格納する値の重複を許さずに順序も保証して欲しい場合は、``LinkedHashSetクラス``を使うことで実現可能です。

#参考
[Java Platform SE8 クラスHashSet](https://docs.oracle.com/javase/jp/8/docs/api/java/util/HashSet.html)
prometheusで収集したメトリクスをinfluxdbでダウンサンプリングして保存する

# 概要

「先月、去年のメトリクスはどうだったか確認したい」と思ってprometheusでの保存期間を伸ばすとメモリが圧迫される...
→ influxdbを使ってダウンサンプリングしてメトリクスを長期保存してみる！！！



# 手順

## influxdb

※influxdb自体の構築手順ははぶきます

### 1. influxのCLIを起動

```bash
influx
```

### 2. prometheus用のDBを作成する

```
CREATE DATABASE prometheus
```

### 3. Retention Policyを作成する

ここでは１時間保存と30日保存のPolicyを作成してみます。
また、デフォルトで存在する「autogen」を削除しておきます。

```
CREATE RETENTION POLICY rp_1h ON prometheus DURATION 1h REPLICATION 1 DEFAULT;

CREATE RETENTION POLICY rp_30d ON prometheus DURATION 30d REPLICATION 1;

DROP RETENTION POLICY autogen ON prometheus;

SHOW RETENTION POLICIES;
```

`rp_1h`に`DEFAULT`を付与していますが、こうすることでpromehteusから書き込まれたメトリクスはまず`rp_1h`に保存されます

### 4. Continuous Queryを作成する

`rp_1h`をダウンサンプリングして`rp_30d`に保存するためのQueryを作成してみます。

```
CREATE CONTINUOUS QUERY cq_sample ON prometheus
BEGIN
  SELECT max(value) as value
  INTO rp_30d.<metrics_name>
  FROM <metrics_name>
  GROUP BY time(1h), *
END

SHOW CONTINUOUS QUERIES;
```

`*`の部分はタグに置き換えることも可能です
（そっちの方がデータ量減らせていいかも🤔）

## prometheus

データをinfluxdbに書き込み、読み込みもinfluxdbから行うように設定をします
※localhost部分は環境によって置き換えてください🙇‍♂️

```yaml:prometheus.yml
remote_write:
  - url: "http://localhost:8086/api/v1/prom/write?db=prometheus"
remote_read:
  - url: "http://localhost:8086/api/v1/prom/read?db=prometheus"
  - url: "http://localhost:8086/api/v1/prom/read?db=prometheus&rp=rp_30d"
```

上記の例では２つのRetention Policyを同時に参照できるようにしています。
CQにおいて違うメトリクス名でinsertしないと多重カウントしてしまう恐れがあるので注意です💦

# Done

これで構築完了！
あとはGrafana等でPrometheusを可視化すればOK！