OmniAICreator/Qiita-1.07M huggingface dataset:
Dockerで、検証用サーバーを構築してみた④ (pythoneファイル作成編)


## [概要]
docker-compose.ymlファイル作成編の後続記事となります。
[③ docker-compose.ymlファイル作成編](https://qiita.com/Mar_N/items/cfba6158cdc1bd23ab61)

## [作業]

##[現在のディレクトリ構成]
```
LocalServer/
├── app/
└── Dockerfile    
└── docker-compose.yml
```

##pythonファイルの作成目的
そもそもの目的は、Dockerを使用して検証用サーバーを構築すること。
だけでなく、その検証用サーバーに対して、リクエストからレスポンスまでを一貫して行えることが
目的です。
なので、今回はpythonを使用して、検証用サーバーでの処理を記述します。
※pythonは使ってみたかったからです。はいw

##pythonファイルの作成
#### 1, ファイル名「local_server.py」を以下の内容で作成する。

```ruby:local_server.py
from flask import Flask
app = Flask(__name__)

#############################################################################
### ローカルサーバー
#############################################################################

###
### テスト用に文字列を返却するだけのメソッド
###

@app.route('/')
def get_text():
    return 'リクエスト成功！！'
```
####<記述内容の詳細>

```ruby:1行目
from flask import Flask # Flaskのimport文
```

```ruby:2行目
app = Flask(__name__) # Flaskのインスタンス生成
```

```ruby:11~13行目
@app.route('/test')
def get_text(): 
    return 'リクエスト成功！！'

# @app.route('/'): URLとメソッドを紐付ける役割(例：http://ipアドレス/test)
# def get_text(): メソッド定義
# return 'リクエスト成功！！': 文字列の返却
```



#### 2, 上記ファイルを作成したら、[LocalServer/app]フォルダ直下に保存しよう。
LocalServer / app / local_server.py


## [次のページ]
[⑤ 最終章 実行編](https://qiita.com/Mar_N/items/eea62c944f8db104c506)
JavaScriptでURL取得する

split() メソッドを使用して取得してみる

例えば現在のページが
https://??.com/xx/yy/zz　だったとする
このURLのyyだけを取得したい


方法としては，
locationオブジェクトのhrefプロパティで，現在のページURLを取得し，
split()メソッドで指定した文字列で分割
というやり方です．


```js
var url_split = location.href.split('/');  // /（スラッシュ）で取得したURLを分割し配列化
var url_split_yy = url_split[4];

console.log(url_split_yy);
//出力"yy"
```
CodeceptJSでシナリオテストを自動化してみた話

# CodeceptJSとは
Node.jsで動作する、E2Eテスト用のテストフレームワーク。
以下は、「サインイン画面を開いてサインインする」シナリオのテストコードです。

```
I.amOnPage(`https://sample-system.com/signin`);
I.fillField('id', 'sampleId');
I.fillField('password', 'samplePassword');
I.click('=サインイン');
```
何かプログラムに日本語が入ってますね。
これは「サインインボタンを押下する」処理を行うコード部なのですが、このclick関数はパラメータに押下したいボタンに表示されている文字列を指定することが出来るんです。
勿論、IDやPasswordのようにname属性での指定等も可能です。
CodeceptJSについての詳細はここでは置いておきますが、とてもコーディングしやすいイメージを持っていただけたのではないでしょうか。

# いざ自動化！！！の前に
手でテストするのが大変だ、ということでテスト自動化を検討し始めたのですが、自動化するにあたって幾つかの要望がありました。
それが以下の2点。

1. 開発エンジニアがそのままテストコードを書けるよう、新たにスキル習得が必要でないものがいい。
1. テスト仕様書とテストコードの二重管理は避けたい（テストコードにテスト仕様書相当の役割を持たせたい）。

1点目については、本体の開発をTypeScriptで行っていたので、「TypeScriptで書けること」が条件となりました。
2点目については、テスト仕様書のレビューアが難無く読める「テストコードの可読性が高いこと」が条件となりました。
これらを踏まえた結果、最初にご紹介したCodeceptJSを用いてテストを自動化することになりました。

# 自動化してみてどうだった？
結論から言うと、当初の目標達は80%ほど達成することが出来ました。
テストの省力化については、自動化したこともあってクリア。テストコードの書きやすさについても、参加した開発エンジニアがちょっとしたレクチャーのみで実装できるようになったのでクリアとしました。
テストコードの可読性については、開発エンジニア目線では問題無かったのですが、『テスト仕様書のレビューアが難無く読める』というのは十分に達成出来たとは言えませんでした。

# 更なる可読性向上を目指して

```senario.ts
SigninPage.signin();
TopMenuPage.selectInsurance();
SearchInsurancePage.search('サンプル商品');
SearchInsurancePage.selectItem(1);
InsurancePage.Contract();
```

上記は、可読性がまだ足りていないサンプルコードです。
シナリオ部分のテストコードですが、レビューアが一目で何をやっているかを把握するにはやや難があります。
そこで考えました。
**「もっと日本語ちっくにすればいいんじゃね？」**
そして出来たテストコードがこちら。

```senario.ts
サインイン画面.サインインする();
トップメニュー画面.保険画面に遷移する();
const 検索条件: 保険検索条件 = {
  商品名: 'サンプル商品',
};
保険検索画面.検索する(検索条件);
const 選択条件: 保険選択条件 = {
  明細インデックス: 1,
};
保険検索画面.保険を選択する(選択条件);
保険詳細画面.契約する();
```

どうでしょうか。
これなら、ぱっと見でも実行内容が分かるようになったと思います。
これで、テスト自動化による当初の目標・要望を全て達成出来ました。

# まとめ
「コードを日本語化する」という一工夫を加えることでテストの自動化に成功しましたが、勿論コードの日本語化が万能の解決策というわけではありません。
私達のプロジェクトではメンバーが皆十分な日本語スキルを持っていたため、コードを日本語化しても特に問題ありませんでしたが、多種多様なエンジニアが参画するグローバルプロジェクトでは日本語化は悪手となります。
プロジェクト特性を見極め、それに適した対策を講じてこそテスト自動化も活きるという学びでした。
Nuxt3 Hydration node mismatch

`Hydration node mismatch`

サーバサイドとクライアントサイドでrenderした時の差異がある場合上記のerrorが出る気がする

下記のコードとか出そうな気がする

```vue
<template>
  <div v-if="show">
    hoge
  </div>
</template>

<script setup lang="ts">
const show = computed(() => { return document===undefined})
</script>
```

この場合 Mount後に書き出せば問題ないの気がするのでで以下のようにすればいい気もする

```vue
<template>
  <div v-if="show">
    hoge
  </div>
</template>

<script setup lang="ts">
const show = ref(true)
onMounted(
  () = > {show.value = computed(() => { return document===undefined})}
)
</script>
```

参考
> https://www.digitalocean.com/community/tutorials/vuejs-component-lifecycle-ja
ServiceNow - スクリプトでテーブルを作成する

#目的
テーブルの定義をgitで管理している場合はスクリプトからServiceNowのテーブルも作成したい

#サンプルコード
```
var table_name = 'u_network_circuit';   // 作成するテーブル名
var parent_table = 'cmdb_ci';           // 親テーブル

var column_name = 'u_access_type';             // 列名
var attrs = new Packages.java.util.HashMap();  // 列定義をHashMapで定義する
var ca = new GlideColumnAttributes(column_name); // 列オブジェクトを作成
ca.setType("string");                            // 型
ca.setUsePrefix(false);                          // 
attrs.put(column_name, ca);                      // 列定義配列に追加

var tc = new GlideTableCreator(table_name , table_name); // テーブルを作成
tc.setColumnAttributes(attrs);                           // 列を作成する
if(typeof parent_table != 'undefined') tc.setExtends(parent_table);  // 親テーブル指定がある場合は親テーブルを設定する
tc.update();                                             // 更新
```

以上
手軽にデバッグモードのエージェントログを取得する方法

2021年OpsRampアドベントカレンダー12月14日分の投稿です。

#概要
OpsRamp のエージェント ログはトラブル対応に役に立ちますが、デフォルトのモードでは必要な情報が取得できない場合があります。その場合はログの出力レベルをデバッグ モードにすることで詳細な情報を取得することができます。

デバッグ モードの設定は、監視対象のデバイスにあるファイルを変更して、エージェントを再起動する必要があるため、デバイスにログインしなければなりません。この作業はデバイスの運用状況によってはハードルが高い場合もあると思います。

そこで、この記事ではもっと簡単にできる方法を紹介します。デバイスにログインすることなく、Web ポータルからデバッグモードのエージェント ログを取得する方法があります。

#Web ポータルからデバッグ ログを取得する方法
(1) OpsRamp Web ポータルにログインして、該当のデバイスの詳細を開きます。
(2) 右上のコマンド アイコンをクリックします。

![002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2345504/98c47cac-3b47-1808-9379-626c6baf9d5a.png)


(3) [コマンド名] で [Enable Agent Log Debug Mode] を選択します。

![003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2345504/acf32898-cf2e-10c3-e31f-ae4fb3ff550a.png)

(4) [Duration] はデバッグモードを有効にする期間です。10、30、60分から選ぶことができます。
(5) [コマンドの実行] をクリックします。指定した期間だけデバッグ モードが有効になります。
(6) ログを取得したい事象を再現させます。
(7) ログを表示するため、[コマンド名] で [Show Recent Agent Log] を選択します。

![004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2345504/4aaee5d4-b638-3785-6ac5-531ed74b2ca5.png)

(8) [Number of Lines] は表示するログの行数です。100、200、500行から選ぶことができます。
(9) [コマンドの実行] をクリックします。指定した行数だけログを表示します。
(10) [Copy] をクリックするとログがクリップボードにコピーされますのでテキスト ファイルにペーストして保存します。
【Linux備忘録】シェルスクリプトでの変数var〜半角スペース、他注意点〜

#前提条件

**OS**
 MacOS Monterey 12.0.1
**CPU**
 Apple M1(arm64) 
**Docker**
Docker Desktop 4.2.0 (70708) 
**CentOS**
CentOS Linux release 7.9.2009 (AltArch)



**※Dockerで構築したCentOS環境で、シェルスクリプトの作成練習をしています。**

#やりたいこと

１　変数varに引数を渡す
２　条件分岐させ、渡した引数が　　
　①自分の名前なら「お前の名前だな」
　②それ以外なら「誰だお前は？」
　　と返事させる

というしょーもない練習用のシェルスクリプトを作ります。

#つまづいた話

半角スペースの有無が原因で動作せず地味にハマったので、備忘録がてら。ちょいネタです。


※記事の最後に、半角スペース云々以外で「実行権限付与」(注意点１)と「ファイル名を指定して実行」（注意点２）を載せてます。参考までに。

#正しい例

```
#!/bin/bash

# ※※このvarに注目！！
var=$1

if [ $var = "ryohey" ];
 then
  echo 'This is your name.'

else
  echo 'Who are you?'

fi
```
if文の書き方・シェルスクリプトの書き方については、ここでは省略します。


自分の名前を入力すれば、

```
[Udemy@0a412e1af0a1 ~]$ ./base6_test.sh ryohey
This is your name.
```

それ以外のことを入力すると、

```
[Udemy@0a412e1af0a1 ~]$ ./base6_test.sh qiita 
Who are you?
```
欲しい返事をくれます。

#誤った例

```
#!/bin/bash

# ※※varや＝の後に半角スペースを入れた場合！！
var = $1

if [ $var = "ryohey" ];
 then
  echo 'This is your name.'

else
  echo 'Who are you?'

fi
```
**○正しい例）**
**var=$1**

**×誤った例）**
**var = $1**


こうしてしまうと、自分の名前を打っているにもかかわらず、

```
[Udemy@0a412e1af0a1 ~]$ ./base6_test.sh ryohey
./base6_test.sh: line 3: var: command not found
./base6_test.sh: line 5: [: =: unary operator expected
Who are you?
```
エラーを吐かれ、「お前は誰だ？」の方が出力されてしまいます。
半角スペースの有無だけの違いですが、スペースを入れたことで、varが変数varだと認識されなくなったようです。

気付くまで数分かかったので一応記事にしました。
お役に立てれば幸いです。
不適当な説明などあれば、ご指摘ください。
ありがとうございましたm(_ _)m

#注意点１

作成したシェルスクリプトは、忘れずに実行権限を付与してから実行してください。

```
[Udemy@0a412e1af0a1 ~]$ chmod 755 base6_test.sh      
```
**chmodコマンド**
 　　(CHange MODe)
アクセス権を変更するコマンドです。ここではchmodの後に「755」を続けることで、所有者に実行権（'x'で表されます）を付与しています。

以下で確認します。

```
[Udemy@0a412e1af0a1 ~]$ ls -l base6_test.sh 
-rwxr-xr-x 1 Udemy Udemy 113 Dec  2 07:29 base6_test.sh
```
`-rwxr`
　　↑一番最初のこの「x」です。x=eXecute(実行)権限があるということです。

もし実行権限を付与しないまま実行しようとすると、

```
[Udemy@0a412e1af0a1 ~]$ ./base6_test.sh ryohey
-bash: ./base6_test.sh: Permission denied
```
権限がないと怒られます。


※パーミッションの管理について、ここでは割愛します。

#注意点２

作成したシェルスクリプトを実行するときは、相対パス（または絶対パス）でファイル名を指定しないと、動いてくれません。

※パス指定しない場合、

```
[Udemy@0a412e1af0a1 ~]$ base6_test.sh ryohey
-bash: base6_test.sh: command not found
```

ファイルが見つかりませんので、以下のように指定します。

**相対パス**

```
[Udemy@0a412e1af0a1 ~]$ ./base6_test.sh ryohey
This is your name.
```

**絶対パス**

```
[Udemy@0a412e1af0a1 ~]$ /home/Udemy/base6_test.sh ryohey
This is your name.
```

#参考文献

https://www.amazon.co.jp/%E3%81%95%E3%82%8F%E3%81%A3%E3%81%A6%E5%AD%A6%E3%81%B6-Linux%E5%85%A5%E9%96%80%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88-%E8%B5%A4%E6%98%9F%E3%83%AA%E3%83%8A/dp/4839969019

https://www.udemy.com/course/linuxlpic/
ipad版 photoshopを使用して、ネコチャンの画像を切り抜く

#はじめに
ipad版のphotoshopを使用して、ネコチャンを切り抜きます:cat:
自動選択では、不要な部分まで選択されてしまうので、
マスクを使用し、ほぼ手動で切り抜く方法です。
Apple Pencillがあると便利です！！！

#切り抜く
では、画像を用意します。
![sakura_img.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/877722/24b5db94-b782-6032-899b-b35adf8f26f3.png)

##レイヤーの用意
マスクをかけた部分を分かりやすくする為に、緑のレイヤー(レイヤー1)を用意します。
画像レイヤー(レイヤー0)の下に作成しましょう。
![layer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/877722/89ab12c6-7ac2-ed4c-a216-163c9d82a007.png)

##選択
ネコチャンを選択します。
今回は、「クイック選択」を使用して選択をしました。
ネコチャンが大体選択できていればOKです！
完了しましたら、「境界線を調整」を選択しましょう。
![choice.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/877722/0ae825a8-14a0-44ad-0d7c-7e2112e3e343.png)

###境界線を調整
細かい毛を選択していきます。

選択されている場所と、していない場所を分かりやすくする為に、
「表示モード」を「オーバーレイ」に変更します。
![adjustment_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/877722/cd7d5572-4fd2-1ce6-8272-59f2523d84d2.png)

ここの時点では、最初から上手く切り抜かれているところだけ選択します。
左側の「➕」を選択し、細かい毛の部分をなぞります。
![adjustment_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/877722/d1704932-3a1b-9a2e-6b72-329183264c88.png)

選択し終えたら、「出力」を「新規(マスク付き)」に変更し、
左上の「完了」を選択します。

##マスクができた
緑に囲われているネコチャンができました！
![green_sakura.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/877722/4f44f0c9-9cde-66f6-01f3-b956df2873ba.png)

##マスクの微調整
クイック選択で「選択が上手くいかなかった箇所」の微調整をしていきます。
必ず、白と黒の__マスクレイヤー__を選択をします！

###マスクについて
ペンツールで「緑ではない箇所」を黒で塗ると、塗った箇所が「緑」になり、マスクになります。
「緑の箇所」を消しゴムで消すとマスクが外れ、消した箇所の元の画像が見えます。

これを利用して、細かい部分が良い感じになるよう、塗ったり消したりしていきます。
この時使用したペンツールは「ハード円ブラシ」です。
![green_sakura_2.png.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/877722/01f0ce8e-423c-43fc-52f1-2d9876be7b01.png)

ここの微調整が完了したら、毛をフサフサにするために、
もう一度「境界線を調整」を選択します。
「境界線を調整」は、上記で行なったことと同じ工程ですので、省略します。
![IMG_0175.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/877722/f7b5c2a4-9060-778b-20bb-554922c53188.png)

##切り取れた！
「境界線を調整」と上記の「マスクの微調整」を繰り返し、出来上がったものがこちらです！
「境界線を調整」の「グローバル調整」で、「滑らか」や「ぼかし」などで調整すると良い感じになります！！
![IMG_0178.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/877722/58c13eee-a969-1182-7c21-0ab2a09b96ac.png)

###ヒゲの切り取りについて
ヒゲの切り取りは難しいです。
ヒゲが選択されなかったり、余分な箇所が選択されてしまったりして大変なので、私は描きました！
![hige.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/877722/c81aa295-31a6-5697-c9e1-f181d03af6a0.png)
マスクレイヤーの上に、新規レイヤーを作成して書いております。
__良い感じになりますね！！！！！__

#完成！
そんなこんなで、完成したものはこちらです！
![sakutan.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/877722/313b5e21-eaf7-051a-9761-a6ddbdaa5093.png)

__かわいい〜〜〜〜〜__


#まとめ
綺麗に切り抜きできました！！
ヒゲは何か良い方法があれば知りたいです。

推しネコを切り取りましょう〜〜〜〜〜！
QGISをコマンドプロンプトからインストール

#１.はじめに
ようやく私の地元でもQGISを使いたいという人が出始め、何名かにQGISの導入と使用法についてに講習会を開くことができました。ようやく地方でもキャズムを乗り越え始めたというのが、偽らざる実感です。

そのような中、QGISのインストール用ファイルが「exe」形式から「msi」形式に変更になりました。
以前はファイル上で右クリックして「管理者として実行」を選んでインストールしていましたが、「msi」形式ではこの操作ができません。
はじめて「msi」形式が出てきたときに、単純にダブルクリックでインストールしてみたところ、スタートメニューへの登録漏れが発生しましたので、やはり「管理者として実行」でインストールする方が良さそうです。
そこでコマンドプロンプトを「管理者として実行」で立ち上げ、これを利用してインストールすることを試みたところ、うまくインストールできました。

今後はさらにQGISを教える機会が増えるでしょうから、説明資料として活用できるようにこの記事を作成しました。
#２.インストール方法の説明
ダウンロードしたファイルを「QGIS-OSGeo4W-3.22.1-1.msi」、このファイルの置き場所をデスクトップにして作業する例を示します。また、パソコンのユーザー名は「owner」として解説しますので、適宜読み替えてください。

まず「コマンドプロンプト」を立ち上げます。「コマンドプロンプト」は「Windowsシステムツール」の中にあります。
![fig01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597262/d75da3dc-924f-460c-2f3c-944c7d2d668d.png)
コマンドプロンプトを見つけたら、その上で右クリックします。
展開したメニューの「その他」にマウスオーバーするとさらにメニューが展開しますので、そこから「管理者として実行」を選択します。
![fig02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597262/c89303e4-0bf2-6e3c-956a-50923649a541.png)
画面が暗転して「ユーザーアカウント制御」のダイアログが出てきますので、「はい」ボタンをクリックします。
![fig03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597262/1978092a-509e-3546-1997-4564c8ac184a.png)
立ち上がった「コマンドプロンプト」には

```
cd C:\Users\owner\Desktop
```

とタイプしてリターンキーを押します。
「cd」は「Change Directory」の略で、ディレクトリの移動を行うコマンドです。最初に申し上げたように、インストール用ファイルをデスクトップに置いているという設定ですので、cdコマンドの後に半角スペースを入れ、その後ろにディレクトリのパスを入力しています。
またディレクトリのパスにある「owner」は、各自のユーザーアカウントを入れ替えてください。
![fig04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597262/6db6a81b-8fc5-aa9b-0eb4-75db1edba9ff.png)
次に実行するファイル名

```
QGIS-OSGeo4W-3.22.1-1.msi
```

をタイプします。
![fig05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597262/f2041fae-7d87-c4cf-d896-a975b38d0837.png)
リターンキーを押すとインストールのダイアログが起動しますので、後は流れに従ってインストールします。
#３.さいごに
FOSS4G 2014 でのテーマが「“初心者”が GIS を使うために必要なこと〜GIS がキャズムを超えるためにはどうすればいいのか〜」でした。
このときの結論は「GISはちょうどキャズムを乗り越えはじめたところ」ということだったと思います。

それから遅れて7年、地方でもGISはキャズムを乗り越えたという印象があります。
来年はこの記事を活用して、地元での入門者を増やしていきたいと思います。
KeyCloakのIdPにOktaを設定する

この記事は [DENSOアドベントカレンダー2021](https://qiita.com/advent-calendar/2021/denso) の3日目の記事です。

## はじめに
### Oktaとは?
認証認可を提供するIDaasの一つ
https://www.okta.com/jp/

### KeyCloakとは?
認証認可を提供するOSSの一つ
https://www.keycloak.org/

# なぜOktaとKeyCloakを連携させる必要があるのか
もともとKeyCloakで開発に使用するAWSなりにシングルサインオンの環境を構築していたのですが、Oktaに移行をすることになりました。その場合、通常であればOktaで認証認可を行うように構築すると思うのですが、今回は事情があり一部のユーザーはKeyCloakを使い続ける必要がありました。
ただ、一人のユーザーの認証を行う場所は一箇所にしたかったためOktaにユーザー情報がある場合はKeyCloakからOktaを参照するようにしました

## 構成例
以下のようにあるアプリケーション(今回だとアプリケーションB)だけはKeyCloakにユーザーがいる場合はKeyCloakで認証、Oktaにユーザーがいる場合はKeyCloakからOktaへ認証をするようにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140658/37426442-f5f8-094b-7617-619e9f127f0e.png)


## 設定について
### 概要
1. KeyCloakのIdentity ProviderにOktaを設定
1. Okta側でSAML2.0のアプリとしてKeyCloakを登録
を行います。

### 具体的な手順
#### KeycloakでIdentity Providerを作成する
Keycloakの管理者画面を開きIdentity Providerの作成を選択してSAML v2.0を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140658/9781bfb6-74a9-2bfb-a7f0-64b47f4e8236.png)

次にKeycloakのAlias(なんでもよい), Display Name(なんでもよい)を設定します。ここではまだSaveはしません。理由はとでメタデータのインポートをするためです。

ここでKeycloakのRedirect URIをコピーしておきます。(これはOkta側で設定するためです)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140658/5ac2b013-32e2-c7a2-4846-a8677e976b9e.png)

更にKeycloakのService Provider Entity IDをコピーしておきます。(これはOkta側で設定するためです)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140658/a01fc9d0-f299-3f78-c660-df49f2d877b6.png)


ここで画面は閉じずそのままにしておきます。(後で設定をするためです)
#### OktaでSAML 2.0のアプリを作成する
Oktaの管理者画面を開きSAML 2.0のアプリケーションを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140658/28e15968-434e-d67d-ac00-3c21f52d6bed.png)

任意のアプリケーション名を設定しNextを選択
その後表示される設定画面で
1.Single sign on URLに、KeycloakのRedirect URIをペーストする
2.Audience URIにKeycloakのService Provider Entity IDをコピーする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140658/92659b79-d50b-be25-cb7f-f9b297d298e7.png)

その他は変えずに、OktaでNext->Finishを選択しアプリケーションの作成を完了します。

再度作成したアプリケーションを選択してSign Onタブを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140658/f8901dfe-5a86-53d0-8b43-2cb37383085f.png)
ここに表示されるIdentity Provider metadataのリンクのアドレスをコピーする

最後に作成したアプリケーションに対してアクセス権を付与しておきます。

#### KeyCloak側でOktaのメタデータのインポート
再度KeyCloakの画面に戻り
KeycloakのImprot from URLにOktaのメタデータのリンクをペーストしてSaveする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140658/705e1d09-00b6-08fb-b060-081530c5b65b.png)

これで設定は完了です。

## 動作確認について
別ブラウザ等でKeyCloakのログイン画面を見るとはじめは表示されていなかったIdentity Providerの情報が表示されるようになります。(今回はsamlという名前)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140658/7e9a890f-99d4-2b51-0deb-3dcd5562d258.png)

このリンクをクリックするとOktaのログイン画面に表示され
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140658/c484aecd-5160-b710-3136-88e431aa646d.png)
Okta側でログインが完了するとKeyCloak側でのログインもでき目的のアプリケーションにアクセスできるようになります。

# まとめ
KeyCloakのIdPにOktaを設定する方法についてまとめました。すこしトリッキーな構成ですが参考になれば幸いです。
なんでもガバにする

# ガバとは

>　特徴の一つに曲のBPMの速さが挙げられる。140以上の高速BPMの曲も多く、なかには300近いBPMの曲も存在する。全てにおいて非常に破壊的な特徴を持つ。そのひとつとして、キックドラムの音にディストーションをかけた「ガバキック」を使用することが挙げられる。

[ガバ (音楽)　出典: フリー百科事典『ウィキペディア（Wikipedia）』](https://ja.wikipedia.org/wiki/%E3%82%AC%E3%83%90_(%E9%9F%B3%E6%A5%BD))

# ガバにする
とりあえず早くしてガバキックを乗せる

```python:
import numpy as np
import librosa
import pydub
from pydub import AudioSegment

path = "motoneta.mp3"
kick =  "gabba-kick.wav" # ガバキック音源

# とりあえずまず元ネタ音源のBPM取る
y, sr = librosa.load(path)
tempo, beat_frames = librosa.beat.beat_track(y=y, sr=sr)

# BPMから4分のタイムを計算する
tempo_one = 60 / (tempo*4) 


# 拡張子はうまいこと合わせて音源読み込み
base_sound = AudioSegment.from_file(path, format="mp3") 
kick_sound = AudioSegment.from_file(kick, format="wav") 


# 元ネタ曲のゲインをあげてキックに負けないようにする
base_sound = base_sound.apply_gain(100)

# 元ネタ曲の長さを取る
time = base_sound.duration_seconds

# ここがメイン処理！！！！！！！！！
#キック音源を元ネタ音源の上に載せる
start_time_ms = 0  
while(True):
        

        base_sound = base_sound.overlay(kick_sound, start_time_ms)
        start_time_ms =  start_time_ms + tempo_one * 1000

        # 適当に終わらせる
        if time * 1000 < start_time_ms:
            break
# 早くする
base_sound = base_sound.speedup(playback_speed=2.0, crossfade=0)

# 出力する
base_sound.export("gabba.mp3", format="mp3")

```

おしまい

# 聞いてみた
ゴミみたいだった

https://soundcloud.com/bjack_mijilme/python-gabba


# 今後の展開
- キックと元ネタ音源のバランスをとってゲイン調整する
- 合間で3拍目のキック抜いたりとか二つ打ちとかに勝手にしてくれるようにする
リモートサーバ上のVSCodeでplotlyを使う【Python】

#はじめに
図を生成した後に、「一部を拡大」したり「重ねてプロットした線を編集」したい！と思うことは良くあると思います。これらの要望にplotlyは応えてくれるようです。
plotlyではhtmlファイルが生成され、ローカルではhtmlファイルを立ち上げれば図を見ることができますが、リモートサーバでは少し工夫が必要でしたので紹介します。

#インストール
この記事ではAnaconda環境を想定しています。各自の環境に合わせてライブラリをインストールして下さい。必要なライブラリとコマンドは以下の通りです。

* plotly=5.1.0
* kaleido=0.2.1

```bash:ライブラリインストール
conda install plotly
conda install -c conda-forge python-kaleido
```
ここで、「kaleido」はプロットした図を様々な形式で保存するために必要なライブラリです。もし、html出力とpng画像保存だけで良い方は「kaleido」をインストールする必要はありません。

#VSCode拡張機能
今回の記事で用いているplotlyから出力されるhtmlファイルはjavascriptで記述されているため、VSCodeの拡張機能である「HTML Preview」や「Live HTML Previewer」ではVSCodeのUI上にグラフを表示することができません（javascript記述に非対応）。そのため、今回はVSCodeからローカルサーバを立てることのできる「Live Server」を用いることにしました。
![スクリーンショット 2021-11-15 11.36.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300353/c3bf625d-7e81-9094-a94e-1db8a07793b7.png)

#サンプルコードを動かす
ライブラリや拡張機能が正常に動作することを確認します。以下のコードを実行してみましょう。フォルダ内に「first_figure.html」（と「sample.pdf」）が生成されているはずです。

```python:sample.py
import plotly.graph_objects as go
fig = go.Figure(data=go.Bar(y=[2, 3, 1]))
fig.write_html('first_figure.html', auto_open=False)
# kaleidoをインストールしていない方は以下の一行を除いて下さい
fig.write_image('sample.pdf')
```

ではplotlyで生成されたhtmlファイルをWebブラウザ上で見てみたいと思います。VSCodeの右下にある「Go Live」を押すと、ローカルPCのブラウザが立ち上がります。

![スクリーンショット 2021-12-02 16.02.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300353/05bbf4d7-9d76-5002-acda-73b9666be9dd.png)

下のようなページが立ち上がれば正常です。

![スクリーンショット 2021-12-02 16.03.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300353/7d84fe9a-84a9-e95a-0ba2-a64f7bb8cc74.png)

このページ内にある「first_figure.html」をクリックすることにより、HTMLページを立ち上げて図を操作することができます。

![スクリーンショット 2021-12-02 16.07.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300353/a53f63f3-0aad-f161-ba90-a3a59b5002ff.png)

終了時はVSCode右下の「Port:（ポート番号）」を押すことにより、接続を終了することができます。

![スクリーンショット 2021-12-02 16.20.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300353/b89c5a39-e50f-1120-7c31-881a6348b33e.png)

#最後に
前のセクションで立ち上げたHTMLページの右上にある「Download plot as png」をpdfや他の形式にできないかな〜と思っています。簡単な方法があれば教えてください。

この記事は進展があれば、更新します。
ASP.NET Core (MVC) でPOSTのままリダイレクトする方法

ASP.NET Core(MVC)でPOSTしか受け付けないページにリダイレクトすると、

```Index.cshtml
<form asp-action="Index" method="post">
    <input type="number" name="number" />
    <button type="submit">SUBMIT</button>
</form>
```

```HomeController.cs
using Microsoft.AspNetCore.Mvc;
using RedirectPostTest.Models;

namespace RedirectPostTest.Controllers
{
    public class HomeController : Controller
    {
        public HomeController()
        {
        }

        [HttpGet]
        public IActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public IActionResult Index(int number)
        {
            if (number == 0)
            {
                return View();
            }
            else
            {
                return RedirectToAction("Hoge", number);
            }
        }

        [HttpPost]
        public IActionResult Hoge(int number)
        {
            return View(new HogeModel(number));
        }
    }
}
```

こんなふうにエラーが出る（上記のコードで0以外がPOSTされた場合）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/792532/1d0c229a-1467-8415-a816-7a296342be01.png)


リダイレクトは基本GETでリクエストが飛ばされる。
元のHTTPメソッド（ここではPOST）を維持してリダイレクトするには`RedirectToActionPreserveMethod`メソッドを使う。

```HomeController.cs
using Microsoft.AspNetCore.Mvc;
using RedirectPostTest.Models;

namespace RedirectPostTest.Controllers
{
    public class HomeController : Controller
    {
        public HomeController()
        {
        }

        [HttpGet]
        public IActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public IActionResult Index(int number)
        {
            if (number == 0)
            {
                return View();
            }
            else
            {
                //return RedirectToAction("Hoge", number); // こうじゃなくて、
                //return RedirectToActionPreserveMethod(actionName: "Hoge", routeValues: number); // こうでもなくて
                return RedirectToActionPreserveMethod(actionName: "Hoge"); // こう［2021/12/06 修正］
            }
        }

        [HttpPost]
        public IActionResult Hoge(int number)
        {
            return View(new HogeModel(number));
        }
    }
}
```

`RedirectToActionPreserveMethod`メソッドは名前付き引数なので書き方に注意する。

［2021/12/06 修正］
routeValues引数は不要だった。
PreserveMethodを付けることでViewに渡すモデルオブジェクトも引き継がれているらしい。
routeValues引数にパラメーターを渡すとURLのクエリ文字列にパラメーターが入ってしまう。

---
［追記］
HogeModel.csとHoge.cshtmlにも言及しておく。

```HogeModel.cs
namespace RedirectPostTest.Models
{
    public class HogeModel
    {
        private int number;

        public HogeModel(int number)
        {
            this.number = number;
        }

        public int Number
        {
            get => number;
            set => number = value;
        }
    }
}
```

```Hoge.cshtml
@model HogeModel

<h2>number : @Model.Number</h2>
```
地盤工学のための数値解析の第一歩

#はじめに
はじめまして。
当方は建設業界でエンジニア・研究者をしています。

数値解析の書籍（例えば1)）では代表的な弾塑性構成式として金属材料と地盤材料のモデルが挙げられることが多いと思います。
QiitaではFEM等の解析手法の記事は多数ありますが、地盤材料のモデルについては記事が少ないようなので投稿したいと思います。
最終的には有限要素法を用いた解析プログラム作成まで投稿できればと思います。

#弾塑性体の基礎

###そもそも構成式とは
構成式（constitutive equation）とは、材料の応力-ひずみ関係を表し、材料の力学的性質を特徴づける関係式と定義されます。これは、材料試験結果をもとに人間がモデル化します。

静力学では、以下の条件を満足することが求められます。

1. 釣り合い条件
1. 変形の適合条件
1. 材料の構成式
1. 力学的・運動学的境界条件

ここで、連続体力学では場の方程式（1, 2, 4）は材料に依りません。従って構成式の違いによって金属や地盤の違いが表現されます。
ちなみに釣り合い条件、変形の適合条件、材料の構成式を力学的・運動学的境界条件のもとで解くという問題を境界値問題といいます。

###現象論からみた弾塑性体
単純引張（圧縮）した材料の応力-ひずみ曲線の例を以下に示します。

![応力ひずみ曲線.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691433/7bc7d501-5cd6-b743-d944-b8992f645858.png)


引張条件下の材料は線形弾性挙動（O0→Y0）を示し除荷しても残留変形（塑性変形）を生じません。この時の挙動は以下のようにフック則に従い、応力-ひずみの傾きをヤング率と呼びます。

$$\sigma = E\varepsilon$$

荷重が増加しある応力を迎えると弾性限界（Y0）を迎えます。この現象を降伏と呼びこのときの応力を降伏応力と呼びます。
降伏応力を超えて更に荷重を受けると塑性降伏が生じて塑性ひずみが発生します（Y0→Z1）。
塑性ひずみが増加すると、降伏応力が大きくなることが観察されます（Y0<Y1）。この現象を硬化と呼びます。
ちなみに、一度ある方向に塑性変形を与え、その後逆方向の荷重を与えると、塑性変形が低い応力で生じることが知られています。この現象をバウシンガー効果（Bauschinger effect）と呼びます。

###ひずみの加算分解
先程の図のように材料に生じたひずみ（全ひずみ）をεとすると、全ひずみ（total strain）は以下のように弾性ひずみ（elastic strain）と塑性ひずみ（plastic strain）に加算分解（additive decomposition）できます。

$$\varepsilon = \varepsilon^e + \varepsilon^p$$

弾性ひずみは先程示したようにフック則に従うので、塑性ひずみを求めることができれば、弾塑性状態の全ひずみを求めることができます。

###降伏関数
材料が弾性状態か弾塑性状態かを区別するために、以下のように応力で表された基準を導入します。この基準を降伏関数（yeild function）と呼びます。

$$降伏関数 f = |\sigma| - \sigma_y$$

ここで、$|\sigma|$は現応力の絶対値、$\sigma_y$は降伏応力を表します。弾塑性状態では、現応力は必ず降伏応力と等しいので、降伏関数$f$は必ず0になります。
ちなみに、応力空間上では降伏応力の集合（塑性包絡面）は超曲面<sup>2)</sup>で表されます。これを降伏曲面（yeild surface）と呼びます。

###塑性流れ則
降伏曲面が滑らかな場合には、塑性ひずみ増分と応力が対応します。この時、塑性ひずみ増分の発展則は以下のような流れ則（plastic flow rule）として表されます。

$$\dot\varepsilon_{ij}=\dot\gamma{\frac{\partial\psi}{\partial\sigma_{ij}}}$$

ここで、上付きのドットは時間微分を表しています。
$\psi$は古典力学のポテンシャルに似ていることから、塑性ポテンシャル（plastic potensial）と呼ばれます。
また、$\dot{\gamma}$を塑性乗数（plastic multiplier）と呼びます。
この塑性ポテンシャルが降伏関数と一致する場合を、特に関連流れ則（associative flow rule）と呼びます。

#さいごに
今回は数値解析のための第一歩を解説しました。
次回は具体的に地盤の解析モデルについて触れたいと思います。

###参考文献
1) EA de Souza Neto, D Peric, DRJ Owen: Computational Methods for Plasticity: Theory and Applications, WILEY, 2008.
2) Hazewinkel: Hypersurface, Encyclopaedia of Mathematics, Springer, 2001.
Firebase Cloud FunctionsのCronjobはfirebase-functions-testでテスト出来る

以下のように、CronJob形式で書いたFirebase Functionsがあった時、

```typescript
export const scheduledFunction = functions.pubsub
  .schedule('every 24 hours')
  .onRun(
  (context: functions.EventContext) => {
    ...
  });
```

最初どうやって関数の内容に関する単体テストを書いたものかと迷いました。
結局、`firebase-functions-test`が使えて、他の関数と同じようにwrapして呼び出せば良いようです。

```typescript
import firebaseFunctionsTest from 'firebase-functions-test';
import { describe, it } from 'mocha';

// sut includes scheduledFunction.
import * as sut from '../src/index';

const test = firebaseFunctionsTest(
  // your settings...
);

// ...
describe('test', () => {
  it('scheduledFunction', async () => {
    const wrapped = test.wrap(sut.scheduledFunction);
    await wrapped({});

    // ...
  });
});
```
Viewがない場合のLaravelのデバッグ（ロギング）

API化したコントローラーなどViewのない場合は，
var_dump() や　dd()　といった関数が使えない

この場合のデバッグの方法はいくつかあるが，手っ取り早くロギング（ログに書き込む）しても大丈夫


LogはLaravelフレームワークの一機能であるため使用する場合は下記を追加し呼び出せるようにする

```php
use Illuminate\Support\Facades\Log;
```

あとは下記の通り調べたい変数などを記載

```php
Log::debug($変数);
```

#### ログの場所
/storage/logs/laravel.log　（デフォルト設定の場合）
（出力先の変更はconfig/logging.phpを書き換え）


ターミナルにログを自動出力できるようにする

```
$ tail -f storage/logs/laravel.log
```
<br>
ちろんPostmanとか使い勝手の良いテストツールはあるけどね
Webの勉強はじめてみた その7 ～JavaScript編 変数名と関数～

「N予備校のプログラミング入門 Webアプリ」のアーカイブ動画と一緒に勉強を進めています。
今日は第一章の11節を受講しました。

<h2>変数名</h2>
:::note
キャメルケース：userInformation
スネークケース：user_infromation
ケバブケース　：user-information
:::
JavaScriptではキャメルケースを使うのがいいらしい。
HTMLのidやclassなんかはケバブケース、Pythonはスネークケースみたい。

https://blog.senseshare.jp/variable-name.html

とにかく、わかりやすいのが一番いいってことかな。

<h2>関数</h2>
<h3>気になったところ</h3>
1. 全く同じ関数名(引数も同じ)になった場合

https://javascript.programmer-reference.com/js-same-function/

複雑になってくるとこういうことも起こりうるんじゃないのかなと。
エディタで重複を教えてくれると嬉しいけど、どうだろう。
Visual Studioなら教えてくれたけど。

2. `return num % 2 === 0`

戻り値もこういう書き方がある。
でもちょっとわかりにくいと言えばわかりにくいかな。
`return true`
でもよさそう？

<h3>練習</h3>
```javascript
//円の面積を求める
function circleArea(hankei){
    var area = hankei * hankei * 3.14;
    //var rslt2 = '<p>半径' + hankei + 'cmの円の面積は' + area + '㎠です。</p>';
    var rslt2 = '半径' + hankei + 'cmの円の面積は' + area + '㎠です。';
    //document.write(rslt2);            
    //document.getElementById('circle').innerHTML = rslt2;    
    var circleChild = document.createElement('p');
    var cNode = document.getElementById('circle').appendChild(circleChild);
    cNode.innerText = rslt2;
}
//半径カウンター
let cnt = 5;
//1000ミリ秒ごとに半径加算して面積を求める
setInterval(function(){    
    circleArea(cnt);
    //カウントアップ
    cnt += 5;        
}, 1000)
```

コメントアウトは試行錯誤した結果です。
本筋と関係ない部分で悩むっていう。
なんとなく自動で計算させたい＆せっかくだから全部表示したいと思いまして。
けど止め方がわからない。

タグ追加のところ、参考にさせてもらいました。

https://www.sejuku.net/blog/49970

<h2>まとめ</h2>
いまいちタイマーの挙動というか、ふわっとした理解しかしてないのが。
もう少し頭をやわらかくしたい今日この頃。
次回で一旦JS編は終わりのようなので、気合いれてがんばります。
githubのリポジトリ言語表示を変更する

##背景
Githubのリポジトリ言語がPythonは使ってないのにリポジトリ言語にPythonが表示されていた。

##原因
この現象が起きる原因としては１つのライブラリの中にPythonの言語が使われているものがあり、そのせいでリポジトリの主要言語としてPythonが使われいると判断されていたそうです。

##解決方法

```
touch .gitattributes
```
で新しくファイルを作成します。

そこで

```
*[使われしまっている言語名] linguist-language=[変更したい言語名]
```

をすることでリポジトリの言語を変更することができます。
新機能 BigQuery Omni を使ってみた part 2 ～レビュー編～

## はじめに

本記事は Location Tech Advent Calendar 2021 by LBMA Japan 5日目の投稿で、[昨日の続き](https://qiita.com/Mario-unerry/private/0caeef37812f98b950ac) です。

BigQuer Omni は直接クエリを実行できる利便性があるとはいえ、Google Cloud Anthos Cluster から AWS S3 といった外部ストレージに保管されているデータを読み込むため、ビッグデータにおいても実用に耐えうるのかという疑問があったのでテストしてみました。


## パフォーマンステスト条件

BigQuery テーブル（以下、`native`）と AWS S3 テーブル（以下、`omni`）で処理時間を比較してパフォーマンスを評価しました。

### 用いたデータ

当社が保有する位置情報ビッグデータからテスト用に一部だけ切り出し、`native` と `omni` に保存しました。
用いたのは以下の２種類のデータです。

- POI：約135MB 約200万件（テストにより一部を抽出）
- ログ：約20GB 約1.4億件

### BigQuery Omni 環境

特に選択肢はありませんが、一応記載しておきます。

- スロット：100固定
- リージョン：AWS us-east-1 / US

### テスト条件（5回実行結果の平均で比較）

1. レコードカウント＜ログのみ＞
2. 円形ログ抽出＜POI x ログ＞
3. 最近傍探索（各POIに最も近い位置にある別のPOIの算出）＜POI のみ＞

## テスト結果①：レコードカウント

- クエリ内容
  - ログのレコードを単純にカウント（約20GB / 約1.4億件）
- 結論
  - omni はデータ転送時間分、単純なクエリほどパフォーマンスが悪い
  - omni でカウント対象列を変えてのテストも行ったが処理時間はほぼ変わらず、読み込むデータ量は変化しない（全データが読み込まれる）

![01.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1783559/32e3ba72-4c62-54df-3438-19cd10e98d69.png)


## テスト結果②：円形ログ抽出

- クエリ内容
  - 各POI中心から円形でログを抽出
  - POI：全国コンビニ約5.8万件
  - ログ：約1.4億件
- 結論
    - 読み込むデータ量が同じで、抽出対象範囲を広げるほど Omni の方がパフォーマンスが良くなる傾向

- 【参考】クエリイメージと結果比較
![02.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1783559/a27f8d14-2912-e234-2b40-a474d7bf6961.png)


## テスト結果③：最近傍探索

- クエリ内容
  - 各 POI と最も近い異なる POI を算出（デカルト積）
  - POI のみ（2,500件～40,000件の幅でランダム抽出）
- 結論
  - 読み込むデータ量が同じで、件数を増やすほど Omni の方がパフォーマンスが良くなる傾向
- 【参考】クエリイメージと結果比較
![03.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1783559/0d047d26-9c0b-a217-ba21-d77d0b75ace8.png)


## 使ってみてわかったこと（個人的見解）

### 総括：ユースケースは限定的ながら、使ってみる価値アリ

- 【〇】最初の設定の手間はかかるが、外部ストレージに保存したデータを転送することなく１つの環境で分析ができるのはとても利便性が高い。
- 【〇】アクセス制御を AWS と GC で分けて設定を行うため、異なるクラウド環境を導入している社外とのデータ連携においても使えそう。
- 【〇】意外な結果だったが処理が複雑になるほど、Omni の方がパフォーマンスが上がる傾向。（Anthos Cluster の仕組みによる？）
- 【△】スキャンするカラムによらずテーブルの全データを一度クラスター上に呼び込むため大量データは転送時間がかかる。インタラクティブ分析よりはバッチ分析向き？
- 【×】計算リソースがデフォルトで100スロット固定のため、課金はスキャンするデータ量に依存しないがスケーラブルでない。（今後の拡張に期待！）
- 【×】使えるリージョンが aws-us-east-1 に保存されているデータのみしか使えない。（今後の拡張に期待！！）
- 【×】インタラクティブクエリで表示できる結果が2MBまでに制限されている（今後の拡張に期待！！！）
Laravel プロジェクト立ち上げ後最初にやること

## 内容
Laravelでプロジェクトを立ち上げた時、最初に設定する内容。

## 目次
- [タイムゾーン・言語設定](#タイムゾーン・言語設定)
- [データベースの文字コード](#データベースの文字コード)
- [デバッグバー](#デバッグバー)
- [データベース設定](#データベース設定)
- [メッセージの日本語化](#メッセージの日本語化)

## タイムゾーン・言語設定

config/app.php ファイル

```php
'timezone' => 'Asia/Tokyo',
'locale' => 'ja',
'faker_locale' => 'ja_JP',
```

## データベースの文字コード

config/database.php

```php
'mysql' => [
・
・
	'charset' => 'utf8', // 絵文字を使用しない場合
	'collation' => 'utf8_unicode_ci', // 絵文字を使用しない場合
・
・
],
```

## デバッグバー
ブラウザ上にエラーなど出力でき、非常に便利。
**※ 注意点）本番環境ではデバッグバーを表示すると実際のデータベースのやりとりが見えるので、NG！**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692472/c0082d3c-8e8c-4e9c-8931-a42a493c73bb.png)



プロジェクトのディレクトリで

```bash
# インストール
composer require barryvdh/laravel-debugbar

# サーバー再起動
php artisan serve
```

プロジェクト直下 .env ファイル

```php
APP_DEBUG=false or true // true or false で切り替え
// 切り替えるたびに簡易サーバー再起動をかける
```



### 補足）デバッグバーが消えない！！

Laravelにキャッシュを保存する機能があり、それによりfalseにしてもデバッグバーの表示が残る事がある。

対処法（ターミナルでキャシュをクリア）

```bash
php artisan cache:clear
php artisan config:clear
# 上記実行後、サーバー再起動
```

## データベース設定

.env ファイル内をデータベースの設定に合わせて変更

```php
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=DB名
DB_USERNAME=ユーザー名
DB_PASSWORD=パスワード
```

## メッセージの日本語化

Laravelの機能で搭載されているバリデーションなど、メッセージはデフォルトで英語。
日本語に変更したい場合は下記の手順で設定する。

①：[https://github.com/minoryorg/laravel-resources-lang-ja/tree/master/resources/lang/ja](https://github.com/minoryorg/laravel-resources-lang-ja/tree/master/resources/lang/ja)
から４つのファイル（auth.php、pagination.php、passwords.php、validation.php）をダウンロード

[auth.php](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b8e197d9-544f-4fb7-a931-f1435a05b6b9/auth.php)
[pagination.php](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d857ebd6-ec49-4900-aa17-568a95692fcd/pagination.php)
[passwords.php](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/941a64c7-b5f7-4f46-b64b-aace9075cbba/passwords.php)
[validation.php](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ad716819-527f-452a-9d57-a74ee7a2c76f/validation.php)

②：resources/lang ディレクトリに ja ディレクトリを作成。上記４ファイルをjaディレクトリに配置。

```php
resources/lang/
└─── ja
      └─── auth.php
      └─── pagination.php
      └─── passwords.php
      └─── validation.php
```

③：validation.phpの最後の行の'attributes'に下記内容を記述しておく。
この文言がメッセージの中に入っていく。（必要なものがあれば適宜追加）

```php
'attributes' => [
    'name'=>'名前',
    'email'=>'メールアドレス',
    'password'=>'パスワード',
],
```

※ 上記手動で行ったが、[Laravelリファレンス](https://readouble.com/laravel/8.x/ja/validation-php.html)にあるようにコマンドで作成可能

```bash
# プロジェクトディレクトリにて
php -r "copy('https://readouble.com/laravel/8.x/ja/install-ja-lang-files.php', 'install-ja-lang.php');"
php -f install-ja-lang.php
php -r "unlink('install-ja-lang.php');"
```
npmコマンドやnpxコマンドでFetchError(socket hang up)が発生した

Reactの開発環境を作成しようと思って`npx create-react-app react-sample`とコマンド入力したところ、エラー（FetchError reason: socket hang up）が発生しました。

また、他にも`npm install -g npm@[バージョン]`等を実行した時にも同様のエラーが発生しました。

結局大した話ではなかったのですが、一応解決方法を残しておきます。

# 実際に発生したエラー
```
66 verbose stack FetchError: request to https://registry.npmjs.org/psl/-/psl-1.8.0.tgz failed, reason: socket hang up
66 verbose stack     at ClientRequest.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\minipass-fetch\lib\index.js:110:14)
66 verbose stack     at ClientRequest.emit (node:events:390:28)
66 verbose stack     at TLSSocket.socketOnEnd (node:_http_client:471:9)
66 verbose stack     at TLSSocket.emit (node:events:402:35)
66 verbose stack     at endReadableNT (node:internal/streams/readable:1343:12)
66 verbose stack     at processTicksAndRejections (node:internal/process/task_queues:83:21)
～～～中略～～～
74 error network request to https://registry.npmjs.org/psl/-/psl-1.8.0.tgz failed, reason: socket hang up
75 error network This is a problem related to network connectivity.
75 error network In most cases you are behind a proxy or have bad network settings.
75 error network
75 error network If you are behind a proxy, please make sure that the
75 error network 'proxy' config is set properly.  See: 'npm help config'
```

# エラーの原因
ネットワークが原因でファイルのフェッチに失敗しているのは分かるのですが、別にプロキシ環境で実行しているわけでもないし、ネットワークが不調というわけでもない。なんで？？？

と思って上記エラーの数行上を見てみたら、こんなことが書いてありました。

```
57 silly audit error Beginning October 4, 2021, all connections to npm websites and the npm registry - including for package installation - must use HTTPS and TLS 1.2 or higher.
57 silly audit error
57 silly audit error For more information see this blog post: https://github.blog/2021-08-23-npm-registry-deprecating-tls-1-0-tls-1-1/
```

要するに2021年10月4日以降はレジストリサイトに接続するのに「HTTPS and TLS 1.2 or higher」を絶対使ってね☆ということでした。

現状の設定がどうなっているかは`npm config list`で確認できました。結果、httpsではなくhttpを使用していることが判明しました。

```
D:\dev>npm config list
～～～中略～～～
http-proxy = null
https-proxy = null
msvs_version = "2015"
proxy = null
python = "python2.7"
registry = "http://registry.npmjs.org/"   ←ここ
strict-ssl = false
```
そして私がコマンドを実行したのは2021年12月2日。だからエラーになったということみたいです。

# 解決方法
以下のコマンドを実行してレジストリにアクセスする際にHTTPSを使うように変更しました。

```
npm config set registry https://registry.npmjs.org/
```

その後`npx create-react-app react-sample`を実行したところ今度は成功しました。

終わり。
新コネクタ「CData Drivers for Yahoo! JAPAN DATA SOLUTION」を触ってみた

このたびCData Software Japan は、12/1 にYahoo! JAPAN の行動ビッグデータを取得できるコネクタをリリースしました。
プレスリリース：　https://www.cdata.com/jp/news/20211201-yahoods.rst

このコネクタでは、Yahoo! JAPAN の検索データをもとにした関連キーワードランキングや検索トレンド、検索ボリュームをあらゆるツールから取得することができます。
このデータはYahoo! JAPAN DATA SOLUTION が提供するDS.API で取得可能なのですが、本コネクタを使うとノーコードでデータ取得を実現できます。コネクタの裏側でAPI を叩いているので、ユーザーはAPI を意識することなくヤフーのビッグデータを扱えます。

果たして、マーケティング担当の私でも本当に触ることができるのでしょうか？
早速チャレンジしてみます！

#Excel 連携
まずはExcel Add-In で練習です。
https://www.cdatablog.jp/entry/yahoodspexcel
いい記事が上がってましたので、参考にやってみます。
連携の詳細は、上記記事をご覧ください！

#評価版ダウンロード

https://www.cdata.com/jp/drivers/yahoods/
まずは、製品ページから評価版をダウンロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102528/b8971611-bce0-3b59-08e3-0fc64db6ca5d.png)

ダウンロードとインストールが完了したら、Excel を開いてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102528/0da2c9be-77f1-c8a5-3272-f1cc088c071c.png)

リボンのCData から、外部データの取得 > データの取得 > 取得元：Yahoo DS を選択。
クエリの編集画面が開かれます。


#接続設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102528/caa3cff9-55b7-a548-e18e-8e2933e32a02.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102528/672729d5-7544-ad4b-cff9-48248edd9ee0.png)

今回はデータをそのまま取得したいのでLimit を消して終わりますが、SQL 文を書くこともできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102528/daf63a2b-3eea-b609-479c-f07f66516184.png)

OK ボタンを押下して、データを取得します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102528/16442acf-c5a6-0a98-175f-059ced28bc91.png)
これだけでデータ取れました！
それでは、ピボットでグラフを作ってみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102528/7f40470f-9502-67c8-4dfa-2ec802f6d03b.png)
グラフになってますね！ちゃんとデータが取れていることがわかります。
2020年にはピクミン3が出たのでその盛り上がりと、2021年11月にはスマートフォン向けアプリでピクミンブルームが出ましたからね。その前の3月の伸びてるものは、共同開発のニュース発表ですね。

#ほかのデータ
##SearchMapMetrics
都道府県別検索ボリュームを取ってこれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102528/961a4e2d-1bc8-acb9-76cb-a45520479efa.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102528/a4f2b9a1-1322-8018-2f75-23ea0cf58a46.png)

##サーチランキング
指定キーワードと一緒に検索されているワードのランキング。
男女比や年代比も一緒に取ってくることができます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102528/17dde243-b3d6-64fa-669a-c19f26151519.png)

##サーチトレンド
検索されている上位ワードを取ってこれます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102528/b4d638bc-800c-058e-fd58-64f2c0b66902.png)


#感想
コネクタを使えばノーコードでAPI を使うことができるので、スムーズにデータを取得できました。
ビッグデータなんて大それたものは、まず自分は触ることができない！と思っていましたが、こんな簡単に取ってこれるとは驚きでした。できることの幅が広がりますね。

ぜひこれを機にヤフーの行動ビッグデータを触ってみてはいかがでしょうか。
Dockerで、検証用サーバーを構築してみた③ (docker-compose.ymlファイル作成編)


## [概要]
Dockerファイル作成編の後続記事となります。
[② Dockerファイル作成編](https://qiita.com/Mar_N/items/07f3f2083158d52b2833)

当記事は、docker-compose.ymlファイルを作成する記事となり、
不要と思われる方は飛ばしてもらえればと思います。

## [作業]

##[現在のディレクトリ構成]
```
LocalServer/
├── app/
└── Dockerfile    
```

##docker-composeのインストール確認
Dockerをインストールされている方は、dokcer-composeもインストールされている筈ですが、
確認方法としては以下のコマンドで、バージョンが表示されれば、とりあえずOKです。

```ruby:terminal
$ docker-compose -v
```

##docker-compose.ymlファイルとは
Dockerファイルから成る、複数のコンテナを定義し実行する Docker アプリケーションのためのツールです。

簡単に、申し上げるとdokcer-compose.ymlファイルを実行すれば、1個1個のコンテナを起動させる手間がなくなるイメージ。
※今回は、起動するコンテナは1つですが、学びのため使用

##docker-compose.ymlファイルの作成
#### 1, テキストファイルで、ファイル名「docker-compose.yml」を以下の内容で作成する。

```ruby:docker-compose.yml
version: '3.3'

services:
    flask:
        build: .
        ports:
            - 8080:8080
        volumes:
            - ./app:/app
        environment:
            TZ: Asia/Tokyo
            FLASK_APP: local_server.py
            FLASK_ENV: development
        restart: 'no'
        command: flask run --host 0.0.0.0 --port 8080
```
####<命令文>

services:お決まりの記述で、servicesの内容をネストして以下を記述しよう

　flask: 今回使用するサービス（pythonのフレームワーク）でネストして以下を記述しよう

　　build：Dockerファイルのあるディレクトリを指す
　　　　　※ピリオドなので、カレントディレクトリを指している　-> docker-compose.ymlファイルと同じ階層

　　ports：Dockerコンテナを立ち上げる際のポート番号

　　volumes：マウントする設定ファイルのパスを指定
　　　　　　　※マウント：使える状態にさせること　　　

　　environment：環境変数設定(パスワードなど)
　　　　　　　　　TZ: Asia/Toyko
　　　　　　　　　※タイムゾーンの指定
　　　　　　　　
　　　　　　　　　FLASK_APP: local_server.py
　　　　　　　　　※インスタンスの場所を指定（pythonファイルを指定）

　　　　　　　　　FLASK_ENV: development
　　　　　　　　　※flaskをデバッグモードで起動（ソースコードを変更したとき再読み込みする機能）
　　　　　　　
　　restart：自動起動設定
　　　　　　※noにしてあげることで、勝手に起動することを防ぐ。

　　command：コマンド

#### 2, 上記ファイルを作成したら、[LocalServer]フォルダ直下に保存しよう。
LocalServer / docker-compose.yml

## [次のページ]
[④ pythoneファイル作成編](https://qiita.com/Mar_N/items/9124ce5dcb160fe30868)

## [参考]
・ https://docs.docker.jp/compose/overview.html
Laravel8 プロジェクト立ち上げ（MAMP）

## 内容
MAMP環境でLaravel8のプロジェクトを立ち上げる

## 手順

### MAMPを起動

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692472/cbce092d-fbde-e4f6-9be7-e7c25700a2c6.png)

### MAMPのディレクトリに移動

```bash
cd /Application/MAMP/htdocs
```

### プロジェクトを立ち上げる

```bash
composer create-project --prefer-dist laravel/laravel アプリ名 "8.*"
```

- composer create-project ・・ composerでプロジェクト作成
- --prefer-dist  ・・リリース版・安定板をダウンロード
- laravel/laravel ・・ ベンダー名/パッケージ名 laravelの場合はどちらもlaravel
- "8.*" ・・バージョン指定。指定しないと最新版がダウンロードされる。

### Laravelの起動

```bash
cd アプリ名
php artisan serve
```

URL: http://127.0.0.1:8000/ に接続

Laravel8 のトップ画面が表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692472/aa2c3104-c90d-5dee-0421-7abc041806f1.png)

### MySQLの設定

#### データベース（MySQL）の作成

URL: http://localhost/MAMP/?language=English
ヘッダーの Tools > phpMyAdmin

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692472/1e4fb0de-0223-9bfa-5527-d1193a7dd487.png)

言語を日本語に
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692472/62cb516f-06e8-fed4-84d4-51b65b4c330d.png)

新規作成 ⇒ データベース名 ⇒ 作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692472/e239557d-b918-309b-7590-d12e01b1cdcb.png)

#### データベース ユーザーの作成

データベース名 ⇒ 特権 ⇒ ユーザーアカウントを追加する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692472/c6b814f7-cf70-ede4-8ad1-c3b8756bdf81.png)

ユーザー名：laravel_test_user
パスワード ： password123
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692472/eed4d592-d5cc-7687-b510-f8fd0cdbcbb9.png)

もう一度左の一覧からDB名を選択し、ユーザーが追加されていたらOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692472/a0a8115e-6b52-ff8f-8972-3b95ef210be4.png)

### LaravelのDB設定

```php:.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel-test
DB_USERNAME=laravel_test_user
DB_PASSWORD=password123
```

### 確認

プロジェクトのディレクトリで

```bash
php artisan migrate
```

を実行し、phpMyAdminを確認、テーブルが生成されていたら完了。
食物繊維の大切さを身をもって実感した体験談

[Supershipグループ Advent Calendar 2021](https://qiita.com/advent-calendar/2021/supership)の4日目の記事になります。 
**※この記事は、あくまでも、ある一人の体験談です。専門家でも何でもないので、鵜呑みにしないでください。**


# 閲覧対象者
下記の健康診断結果を下げたい人
　・ 尿酸
　・ LDLコレステロール

# [結論](#l-0)
お忙しい人のために先に結論から述べます。
一年間食物繊維を摂る（オートミールを週に4食分ぐらい白米の代わりに食べる）と下記のように改善しました。

| 検査項目       | 参考基準値      | 改善前 | 改善後 |
|:-------------|:---------------|:------|:------|
| 尿酸          | 2.01 ～ 7.99   | 9.1   | 7.8   |
| LDLコレステロール| 0.00 ～ 139.99 | 198   | 148   |


※今回の改善が直接健康の改善に繋がるかは不明です。なぜなら、そもそも日本で測定している健康診断結果が本当に健康に起因する指標なのかを最新の技術で検証し続ける必要があるからです。検証技術は、時代と共に向上し、それによって検証結果が変わったりもしますが、調べてみると色々と面白いことがわかるので、興味がある人は調べてみてください。

# 食物繊維の大切さを身をもって実感した体験談
##### 自己紹介
Supership株式会社でデータアナリストをやっている山内です。
趣味は色々なことを自分の体で実験する（試す）ことです。
職種がデータアナリストということもあってか、自分の体で最適解を見つけることに面白さを感じています。
この記事では下記の[過去にやった実験](#l-1)の4と5についての体験談を書いていきます。

[過去にやった実験](#l-1)

```
　1. 1年間主菜をほぼ野菜だけにすると健康診断は本当に良くなるのか？
　　　　　　　　　結果：あまり変化なかった。若い時はあまり影響受けないからかも。

　2. 1年間主菜をほぼ肉だけにすると健康診断は本当に悪くなるのか？
　　　　　　　　　結果：あまり変化なかった。若い時はあまり影響受けないからかも。

　3. 3ヶ月間ほぼ乾パンだけにすると健康診断は本当に悪くなるのか？
　　　　　　　　　結果：あまり変化なかった。若い時はあまり影響受けないからかも。

　4. 1年間マルチミネラル・ビタミンのサプリを摂る&食物繊維を摂らないと筋肥大は促進するか？
　　　　　　　　　結果：
　　　　　　　　　　　筋肉量は、あまり変化なかった。
　　　　　　　　　　　尿酸とLDLコレステロールが悪化した（爆上がりした）。

　5. 1年間食物繊維を摂ると、健康診断は良くなるか？
　　　　　　　　　結果：尿酸とLDLコレステロールが改善した（下がった）。
```

##### [過去にやった実験](#l-1)の4をやろうと思ったきっかけ
上記の[過去にやった実験](#l-1)の1~3をやってみて、私の体の中では本当は食物繊維は必要ないのではとふと思いました。理由としては、 "[食物繊維は「人の消化酵素で消化されない食物中の難消化性成分の総体」](https://www.e-healthnet.mhlw.go.jp/information/food/e-05-001.html#:~:text=%E9%A3%9F%E7%89%A9%E7%B9%8A%E7%B6%AD%E3%81%AF%E5%B0%8F%E8%85%B8%E3%81%A7,%E3%81%93%E3%81%A8%E3%81%8C%E5%8B%A7%E3%82%81%E3%82%89%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82)"なので、消化されないなら栄養ではないし、なんなら食物繊維のせいで本来消化される栄養も消化しづらくなるのではと考えたからです。そして、普段の食事では摂取が難しいとされるマルチミネラル・ビタミンをサプリで摂ることで、筋肥大が更に促進するのではと思いました。（当時は健康診断結果が悪くなかったので、あまり気にせず、自分の体の中での筋肥大最適化実験に取り組んでいました。）無謀な仮説ですが、新しい発見は無謀な仮説から始まることは歴史が証明しているので、トライしてみることにしました。

##### [過去にやった実験](#l-1)の4の結果
一年後、いざ体組成結果と健康診断結果が出ると筋肉量はあまり変化なし、そして健康診断は尿酸とLDLコレステロールが非常に悪化していました。。。
定性的な評価でも、痛風の初期症状である時折表れる手足の指の一瞬の痛みが出ていました。。。
尿酸やLDLコレステロールが上がる主な理由は、高プリン食、アルコール、運動不足、肥満などですが、私はどれも該当しないのです。そう食物繊維を摂らない以外は。

##### [過去にやった実験](#l-1)の5の実施とその結果
そこで、次の年は食物繊維を摂る（オートミールを週に4食分ぐらい白米の代わりに食べる）実験をしました。
すると見事に尿酸とLDLコレステロールを下げることができました（詳細は[結論](#l-0)を参照）。
痛風の初期症状も出なくなりました。

##### 感想
結果としては食物繊維は大事だよっていう当たり前の話になったわけですが、あえて無謀な仮説にトライしたので、トライしたことには全く悔いはないです。むしろ自分の体で実験ができて面白かったです。

# 最後に宣伝
Supershipではプロダクト開発やサービス開発に関わる人を絶賛募集しております。
ご興味がある方は以下リンクよりご確認ください。
 [Supership株式会社 採用サイト](https://supership.jp/recruit/)
是非とも、よろしくお願い致します。
[Oracle Cloud] basionの作成

## はじめに

こんにちわ
本記事ではbasionを取り上げます

basionとは？
Oracle Cloud Infrastructure Bastionは、パブリック・エンドポイントを持たないリソースへのプライベートな期限付きSSHアクセスを提供します。（下記引用） 
https://docs.oracle.com/ja/solutions/use-bastion-service/index.html#GUID-1B455658-0988-42C4-A52F-4757A3201232

つまりは踏み台ですね
これまでは踏み台用サーバをわざわざcompute等で作成するケースが多かったと思います
これがサービス提供されているので便利ですね
且つ無料です
https://www.oracle.com/jp/security/cloud-security/bastion/

ではさっそく触ってみましょう

## 手順
参考ドキュメントはこちら↓
https://docs.oracle.com/ja-jp/iaas/Content/Bastion/Tasks/managingbastions.htm



メニューを開きます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567355/1baaa022-9707-ad0f-cf2a-0ada4fd04a09.png)



アイデンティティとセキュリティ をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567355/9ccfa7b1-f4eb-4b48-add9-3628bd5971a3.png)



要塞 をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567355/ef8526b1-b9bf-da13-fa96-d8bfec921565.png)



リスト範囲 で適切なコンパートメントを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567355/06b1b6b2-b636-711d-dc25-f1513396c80e.png)



要塞の作成 をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567355/0255f389-8c43-421f-f0a5-deeb2ee3531e.png)



要塞の作成 画面
各所を入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567355/538cb6eb-7eb0-a920-84c6-1401fb5b7889.png)



許可するCIDRを指定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567355/3e376b05-7ee0-8b4b-4e15-a9fbc699fd87.png)



オプション の設定
TTLを設定可能
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567355/c7832d58-b1d5-7d89-d05e-e110b4653d12.png)



残念ながら使用環境のquotaに引っかかったので作成手順だけまずは示しました
環境が用意できましたら、実際の作成やセッションを試したいと思います

ありがとうございました
java 練習問題5-4 (12/2)

calcTriangleAreaメゾットで
三角形の面積(bottom と　height)求めて返す
calcCircleAreaメゾットで
円の面積(半径　radius)求めて返す


```java
public class Main {
  public static void main(String[] args) {
    double triangleArea = calcTriangleArea(10.0, 5.0);
    System.out.println("三角形の面積：" + triangleArea + "平方cm");
    double circleArea = calcCircleArea(5.0);
    System.out.println("円の面積：" + circleArea + "平方cm");
  }
  public static double calcTriangleArea(double bottom, double height) {
    double area = (bottom * height) / 2;
    return area;
  }
  public static double calcCircleArea(double radius) {
    double area = radius * radius * 3.14;
    return area;
  }
}
```
Jestで`Cannot use import statement outside a module`

## 遭遇したエラー
Jestでテストをしたら`Cannot use import statement outside a module`というエラーが出た．調べてもなかなか解決策が見つからなかったのでメモ．

## 解決策
Jsetはテスト時に対象ファイルをBabelでECMAScriptをCommonJSに[変換している](https://archive.jestjs.io/docs/ja/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object)のだが，node_modules配下のファイルは変換しないようにデフォルトで決まっている．

jestの設定を

```jest.config.js
transformIgnorePatterns: [
  "/node_modules/(?!(foo|bar)/)"
]
```

のように正規表現で書き換えれば`node_modules/foo/`配下のファイルも変換するようになる．

参考: [Configuring Jest](https://archive.jestjs.io/docs/ja/configuration#transformignorepatterns-arraystring)