OmniAICreator/Qiita-1.07M huggingface dataset:
EC2インスタンス(Ubuntu)の再起動時に自動でdocker-composeを発火させたい

# EC2インスタンス(Ubuntu)の再起動時に自動でdocker-composeを発火させたい
## Step1. docker-compose.yamlがあることを確認
対象のプロジェクトにdocker-compose.yamlファイルがあることを確認してください。
例えば次のようなものです。

```docker-compose.yaml
version: '3'
services:
  web:
    image: nginx
    ports:
      - "80:80"
```

## Step2. Systemd サービスの作成
インスタンスが再起動されるときに自動的に ```docker-compose up``` を実行する**Systemd サービス**を作成します。以下は、```/etc/systemd/system/docker-compose-app.service``` というファイルを作成する例です。
Vimなどを使って作成することになるでしょう。

```docker-compose-app.service
[Unit]
Description=Docker Compose Application
Requires=docker.service
After=docker.service

[Service]
Type=oneshot
RemainAfterExit=yes
WorkingDirectory=/path/to/your/project
ExecStart=/usr/local/bin/docker-compose up -d

[Install]
WantedBy=multi-user.target
```

ここで'**WorkingDirectory**'はpwdなどで確認して、対象のプロジェクトをパスを指定してください。
'**ExecStart**'のパスはdocker-composeの実際の場所に合わせてください。通常は /usr/local/bin/docker-composeです。

## Step3. Systemd サービスの有効化
```
$ sudo systemctl enable docker-compose-app
```

## Step4. インスタンスの再起動
```
$ sudo reboot
```

これで、EC2インスタンスが再起動されるたびに、docker-compose up が自動的に実行されるようになります。
Pade近似とは

制御工学を学習していると登場するPade近似について調べたのでまとめます。

## Pade近似とは

Pade近似は、ある関数を有理関数（分子と分母が多項式である関数）で近似する手法です。特に関数の振る舞いが複雑な場合や、マクローリン展開が収束しない場合に有用です。

一般に$f(x)$のn次のPade近似は以下で表現されます。

```math
f(x) \cong \frac{a_0 + a_1 x + a_2 x^2 + \cdots + a_n x^n}{1 + b_1 x + b_2 x^2 + \cdots + b_n x^n}

```
## 例（指数関数の1次Pade近似）

今回は、$e^x$の1次のPade近似について考えます。
$f(x)$のマクローリン展開は以下で表現されます。
```math
f(x) = f(0) + f'(0)x + \frac{f''(0)}{2!}x^2 + \frac{f'''(0)}{3!}x^3 + \cdots 
```
よって、$e^x$をマクローリン展開すると、

```math
e^x = 1 + x + \frac{x^2}{2!} + \frac{x^3}{3!} + \frac{x^4}{4!} + \cdots \tag{1}
```

ここで、$e^x  \cong \frac{bx+c}{ax+1}$とし、マクローリン展開すると

```math
\frac{bx+c}{ax+1} = c+(b-ca)x -a(b-ca)x^2 + a^2(b-ca)x^3 + \cdots \tag{2}

```

(1), (2)を2次の項まで係数比較すると

```math
c=1, b-ca = 1, -a(b-ca) =\frac{1}{2}

```
よって、
```math
a=-\frac{1}{2},b=\frac{1}{2},c=1
```
以上より、
```math
e^x  \cong \frac{\frac{1}{2}x+1}{-\frac{1}{2}x+1}
```
何も知らない23歳がIT企業に飛び込んだ結果

# はじめに
はじめまして。リンクラフト株式会社のsatoと申します。リンクラフトアドベントカレンダーの5日目を担当します。よろしくお願いします。
今回、会社としてQiitaを運用するにあたり、お誘いをいただき記事を書かせていただくことになりました。書いている今も、何を書けばいいんだ！状態です。
というのも、私は今年(2023年)7月に入社して4ヶ月の未熟者です。
そして、入社するまでは全く別の業種で働いており、PCのスキルとしてはExcel,Word.PowerPointなど基本的操作のみでした。
そんな完全未経験だからこそ、未経験でIT企業に飛び込んだ感想をお伝えできればと思います。

# 研修内容
入社後2ヶ月間、研修期間を設けていただきました。
主に、
### ・Javaの基礎学習
-ソースコードの基本ルール
-変数、定数、型、演算子について
-データの型変換について
-for文、while文、if文など制御構文の意味、使用方法
-クラスとメソッド、APIと外部クラスの利用
-パッケージ
-演習問題
### ・Javaの応用学習
-オブジェクト指向について
-コンストラクタについて
-カプセル化について
-継承について
-演習問題
### ・SQLの基礎学習
-MySQLのインストール
-SQLについて
-演習問題

このような流れで学習を行いました。

# 研修スタート！
Javaの基礎学習がスタートし、ソースコードの基本から学んでいきました。
研修1週間くらいは頭の中が、なぜ？どうして？これはなに？という言葉でいっぱいでした笑
未経験者なのでわからないのは当たり前だと思いながらも、完璧を求めたい私は出来ない自分が悔しくてしょうがなかったです！

# 研修中の勉強方法
続いてどのように勉強してきたか説明させていただきます。
Java,SQLともにUdemyを使用して勉強をしました。
「勉強＝書いて覚える」というイメージが自分の中にあったので、PCにまとめるというよりかはあえてノートに手書きで用語や意味などを書きまとめていきました。（のちに1冊消費）
しかし、書いて覚えてることもあったのですが、なんせ覚えることが無限大！書いても探すのが大変だったんです。
そんな時、神様が現れて
「PCにマークダウン方式でまとめたら綺麗だし、探しやすいんじゃないか？」という提案をいただいたのですが、頑固な私は2,3日手書きを続けました。しかし、考え直してみれば確かに今までやったことない勉強法だし試してみよう！ということでJavaの応用学習からPCにまとめるようになりました。
そしたら、ビックリです。とても綺麗にまとまっていて、用語で検索をかけることができ、わかりやすい&時短！！感動しました。
そこから用語の復習に困ることはあまりありませんでした！

そしてそして、本題の私が1番ためになった勉強法は自分で書いたソースコードを説明する、いわゆる「言語化」です！！
研修中はその日学んだことを発表する時間が設けられていました。それは私にとっては地獄の時間でした。笑
まず、問題が解けたとしてもそれを言葉で説明しようとすると、どう説明したらいいのか？どのようにしたら伝わりやすいのか？全然わかりませんでした！しかし、研修担当の先輩方は私のことを見捨てることなく、説明できない部分の復習に時間を割いてくださりました。
それを続けていくと、みるみるうちに理解力&プレゼン力が上がっていきました。
「問題が解けた！よし！」だけではもしかすると、わかった気になってるだけなのかもしれないと今回考えさせられました。
この勉強法はとても自分のためになった勉強法です。

# まとめ
本来だったらもう少し説明を加えたかったのですが、勉強法を説明して満足してしまったので今回はここまでにさせていただきます。
完全未経験で入社しましたが、会社、先輩社員の方々の手厚いサポートによりさまざまな知識を身につけることができました。プログラマーとしてはほんの少しの部分しか勉強していないですが、この研修で行った内容・勉強法を活用してこれからもたくさんのことを学んでいきたいと考えています。

この記事では、職種未経験でIT企業に興味を持っている方の後押しを少しでも出来たらと思い書きました。皆さん一緒に挑戦しましょう！！

✎︎＿＿＿＿＿＿＿＿＿＿＿＿＿＿

一緒に働く仲間を募集中です！

リンクラフト株式会社では、組織拡大に伴い積極的な採用活動を行っています。
少しでも興味がある方はぜひご連絡ください。

▽会社ホームページ
https://lincraft.co.jp/
▽Instagram
https://www.instagram.com/lincraft.inc/
▽ご応募はこちらより
https://lincraft.co.jp/recruit

※カジュアル面談も受付中です。ご希望の方はHPのお問い合わせフォームよりご連絡ください。

✎︎＿＿＿＿＿＿＿＿＿＿＿＿＿＿
AWSでおすすめのリージョンと選び方

# AWSでおすすめのリージョンと選び方

Amazon Web Services（AWS）は、世界中に分散配置されたデータセンターを活用して、幅広いクラウドサービスを提供しています。これらのデータセンターは「リージョン」として分類され、それぞれに特徴があります。AWSリージョンを選ぶ際には、コスト、製品サービスの数、新機能のリリーススピード、通信速度、安定性といった要素を考慮することが重要です。ここでは、これらの基準に基づいて、おすすめのリージョンを解説します。

## AWSとリージョンについて

### クラウドインフラストラクチャの地理的な分布

AWSリージョンは、世界各地に設置されたAWSのインフラストラクチャの地域グループです。各リージョンは、複数のアベイラビリティーゾーン（AZ）で構成され、それぞれが独立したデータセンターを持っています。これにより、高い可用性と耐障害性を実現しています。

## リージョン選びの基準

### コスト

#### 最もコスト効率の良いリージョン

- **US East (Northern Virginia)**: 一般的に、US East (Northern Virginia) リージョンは、AWSサービスの中で最も低コストです。大規模なインフラと高い需要により、サービスの価格を抑えることができます。

### 製品サービスの数

#### 製品とサービスが豊富なリージョン

- **US East (Northern Virginia)**: こちらもまた、AWSが提供するほとんどのサービスが利用可能で、新しいサービスの導入も早い傾向にあります。

### 新しい機能のリリーススピード

#### 新機能が最も早くリリースされるリージョン

- **US East (Northern Virginia)**: AWSの主要な開発拠点であるため、新機能やアップデートが最も早くリリースされる傾向があります。

### 通信速度

#### 通信速度が速いリージョン

- **地理的な位置に依存**: 通信速度は、サーバーの物理的な位置とユーザーの位置に大きく依存します。利用者が多い地域に近いリージョンが良いでしょう。

## まとめ

AWSリージョンを選ぶ際には、コスト、サービスの種類、新機能の導入速度、通信速度、安定性といった複数の要因を総合的に考慮する必要があります。一般的に、US East (Northern Virginia) リージョンはこれらの要素においてバランスが良く、多くのユーザーにとって最適な選択肢となるでしょう。ただし、特定の地

理的要件やコンプライアンスの要件がある場合は、これらの基準に基づいて最も適切なリージョンを選択することが重要です。
アコーディオンつきのリストをFancyScrollViewで実装しようとしたらできなかった話

# そもそも

FancyScrollViewは汎用スクロールのコンポーネントのこと。
詳細はこちら。
[https://setchi.hatenablog.com/entry/2017/02/26/150316](URL "https://setchi.hatenablog.com/entry/2017/02/26/150316")


# 経緯

比較的コンテンツ量が多いリストのため、動作軽減のために無限スクロールを利用したかった。
色々と手を尽くしてみたが、アコーディオンを開くと他の要素に重なってしまったりと、どうにも上手くいかなかった。

# 原因

FancyScrollViewではリストで表示する要素をCellSizeで指定しているため、アコーディオンのようなサイズが変わるものには向かない様子だった。
あくまで初期値のみの設定で後から変えても問題ないかと思ってたが、そうでもなかったらしい。

# 結果

FancyScrollViewでの実装を諦め、Unity標準のScollViewを使用した。
スクロールに対してアニメーションを設定する必要がなかったため助かった。
学校に自作のポータルサイト的なものを導入したかった話

こんにちは。
今日は学校に自作のポータルサイト的なものを導入したかった話をしようと思います。
# プロフィール
- 小6
- HTMLとかPythonが得意分野
- なんかしようとして個人事業主になった
- [ブロガー](https://ogatomo.net/)
# 事の発端
以前からJavascriptなどで便利系のツールを作るのが好きだったのでそれを一括で利用できるポータルを作ろうとしたのが始まり。
# Ver.1
PHPとCSSにBulmaを利用したなかなかいいデザイン。ログインはわかりやすく数字4桁を採用。(めんどいからMySQLは使わずすべてテキストファイルで管理)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518724/1f069118-22f9-a1ca-e607-dc88f78c0ead.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518724/0f9cdef7-e16a-d6dc-9770-943e75b7b0db.png)

## 使えるツール
- クラス向けYoutubeみたいなやつ
- クラス向けYT Musicみたいなやつ

自分にしてはなかなかいい出来だと思う。ｽﾝﾊﾞﾗｼｲ!!

# Ver.2
保守性を重要視しWordpressとLightningというテーマを使いました。
プラグインでなんでも拡張ができてクソ便利です。
天気を出したりカウントダウンを出したり色々やってます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518724/394c618d-9744-76f4-df96-1bfe7c7532eb.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518724/158f94c8-1014-60db-3c03-d3637e28ded7.png)

## 使えるツール
給食の皿の枚数を計算するツール
学校向けYoutubeは移植が大変で止まってる。

# 問題発生
ワイ> よしっ、これで公開するかー
先生公開していい？

先生> ちょっと上に聞いてみるねー

～数日後～

先生> なんかダメって言われたー
ワイ> デデン！(効果音)

先生曰く、「仮にパスワードとかが漏れたらだめじゃん？」

ワイ> ...
ワイ> !?(このときワイに電流走る)
ワイ> ブックマークからSSOみたいにログインできるようにしたら情報漏えいリスク減るじゃん！！

## このとき考えてた構成
1. 使いたい人にQRを読ませる
1. 色々情報入れる
1. 「ttps://example.com/clasys/bookmark_login.php?id=student&pass=ihrguwhgirhi(ハッシュ)」みたいなやつをブックマークに入れる
1. ブックマークからしかログインできないし生徒もパスワードを知らないから情報漏えいリスクを少なくできる！！

ワイ> ↑こんなんだったらいいでしょ？
先生> もう一回聞いてみるー

# 上からの正論

～数日後～

先生> やっぱ駄目って言われたー
ワイ> デデン！(2回目)

先生曰く、「そもそもGIGAスクール構想で配布されたタブレットってそういう用途じゃないよね？」ってことらしいです。流石にこれにはぐうの音も出ません。(教育委員会ぐらいまで行って結構粘ってくれたらしい)

ワイ> ...
ワイ> ｱｷﾗﾒﾏｽ... (K.O.)

先生> あとなんかICTの先生がいろいろ聞きたいらしいよー
ワイ> ktkr!!!!!!!!!!!

## ICTの先生とは
校内のタブレットとかの色々やってくれる支援員の人。
結構詳しい。

## そして...
～放課後～
めんどいので簡単に箇条書きでまとめると、
- すごいねー
- けどぶっちゃけTeams(うちの学校では使ってない)とかExcelの関数でできるよね？Youtubeもどきのあれは別として
- 別に学校外だったらなんも言わないけどなー。家でやれよって思うけど(笑)

詳しい人だったので案外サクッと理解してもらいました。助かります。
しかし導入には至りませんでした。

# どうにかしてもツールを導入したいっ！！
～その夜～

ワイ> ...(またもやワイに電流走る)
ワイ> 自分だけが使うとかの他の人が直接的に使わないやつとかぶっちゃけ不正アクセスされても痛くも痒くもないツールだったら問題ないんじゃね？

# まとめ
なんかICTの人と仲良くなれた()

続編も公開予定です！
続編では「学校の大型モニターを常時フル活用しよう！」という記事を公開予定です！
[身の回りの困りごとを楽しく解決！ by Works Human Intelligence Advent Calendar 2023](https://qiita.com/advent-calendar/2023/works-hi)というアドベントカレンダーの12/24で公開予定です！乞うご期待！
クラウドよりオンプレを選ぶ状況ってどんな時？

# クラウドよりオンプレを選ぶ状況ってどんな時？

現代のビジネス環境では、情報技術のインフラとして「クラウド」が広く普及しています。しかし、一方で「オンプレミス（オンプレ）」と呼ばれる従来のインフラも依然としてその重要性を持っています。クラウドとオンプレミスは、それぞれ独自の特徴と利点があり、適切な状況に応じて選択する必要があります。ここでは、クラウドの特徴とオンプレミスの特徴を解説し、クラウドよりオンプレミスを選ぶべき状況について考察します。

## クラウドの特徴

#### 柔軟性とスケーラビリティ

- **リソースの迅速な拡張・縮小**：使用するリソースを必要に応じて調整でき、ビジネスの変化に柔軟に対応します。
- **多様なサービスとツール**：コンピューティング、ストレージ、データベース、AI、セキュリティなど、幅広いサービスが提供されています。

#### コスト効率

- **従量課金制**：実際に使用した分だけ料金が発生するため、初期投資が少なく済みます。
- **管理の簡素化**：物理的なインフラの維持管理に関するコストや手間が削減されます。

## オンプレの特徴

### 従来型のインフラ

オンプレミスは、企業が自身の物理的な場所にサーバーやネットワーク機器を設置し、自ら管理する方式です。

#### 完全なコントロール

- **セキュリティとカスタマイズ**：自社内で完全に制御できるため、セキュリティや規制の厳しい環境に適しています。
- **パフォーマンスの最適化**：特定のニーズに合わせたカスタマイズが可能です。

#### 財務面の考慮

- **初期投資が必要**：物理的なインフラの設置には、高額な初期投資が必要です。
- **維持管理の手間**：ハードウェアのメンテナンスやアップデートが必要です。

## クラウドよりオンプレを選ぶケース

### 特定の要件や状況での選択

オンプレミスは、以下のような状況でクラウドより適している場合があります。

#### セキュリティとコンプライアンス

- **規制要件**：業界規制や政府規制が厳しい業界（例えば、金融やヘルスケア）では、データを自社で完全に管理する必要があります。
- **データセキュリティ**：特定の機密データを社外に持ち出したくない企業にとって、オンプレミスは適

切な選択です。

#### パフォーマンスとカスタマイズ

- **高度なカスタマイズ**：特殊なハードウェアやソフトウェアの要件がある場合、オンプレミスの方が適していることがあります。
- **レイテンシの最適化**：リアルタイム処理が必要なアプリケーションでは、オンプレミスの方が低レイテンシを実現できます。

## まとめ

クラウドとオンプレミスは、それぞれに独自の利点と制約があります。クラウドはその柔軟性、スケーラビリティ、コスト効率の高さから多くのビジネスに適していますが、セキュリティ、規制遵守、特殊なパフォーマンス要件を持つ企業にとっては、オンプレミスが適した選択肢となることがあります。最終的には、各企業の具体的なニーズと要件を考慮して、最適なインフラストラクチャ戦略を選択することが重要です。
AmplifyでGraphQLクエリを実行時に「No api key configured」が発生する問題

AWS　AmplifyからAPI KEYを認証方式としてAppsyncのクエリを実行時した際に発生したエラーです。
エラーの再現方法としてはnpm startを実行し、API呼び出しを行う処理を実行した際にブラウザのコンソール上に「No api key configured」と表示されました。

## コード
ユーザー追加のMutationを実行時に認証方式としてAPI_KEYを設定しています。
ちなみに　「authMode: "API_KEY"」なしだとNo credentialsのエラーが発生します。

```ts: App.tsx
function App() {
.
.
.
const res = await API.graphql<GraphQLQuery<CreateUserMutation>>({
      query: createUser,
      variables: {
        input: {
          name: input.name,
          email: input.email,
        },
      },
      authMode: "API_KEY",
});
.
.
.
}
```

aws-exports.jsonには認証方式の指定、API_KEYも設定されていました。
```json:aws-exports.json
const awsmobile = {
  aws_project_region: <REGION>,
  aws_appsync_graphqlEndpoint: <GRAPHQL_ENDPOINT_URL>
  aws_appsync_region: <REGION>,
  aws_appsync_authenticationType: "API_KEY",
  aws_appsync_apiKey: <API_KEYのID>,
};

export default awsmobile;
```

## 原因
コード内でAmplify.configure(awsconfig);の記述が抜けていた
```tsx:App.tsx
Amplify.configure(awsconfig); // aws-exports.jsの設定が反映されていなかった！

function App() {
.
.
.
const res = await API.graphql<GraphQLQuery<CreateUserMutation>>({
      query: createUser,
      variables: {
        input: {
          name: input.name,
          email: input.email,
        },
      },
      authMode: "API_KEY",
});
.
.
.
}
```

## 対処
対象ファイルにAmplify.configure(awsconfig);を追加する。
インポートエラーが発生する場合は以下の記事を参考にaws-exports.jsの拡張子をtsに変更してみてください！
参考：https://qiita.com/higuuu/items/980b1c90ecb8ae347c24

以上です。読んでいただき、ありがとうございます。
AWS環境下のWordPress管理画面の遅延問題：根本的解決策としてのプロキシサーバーの活用

## はじめに
[前回の記事](https://qiita.com/tanitanistudio/items/76017020d015ca4edc51)では、AWSでホストされている社内限定のWordPress管理画面の遅延問題について取り上げ、一時的な解決策として接続の待ち時間を短縮する方法を紹介しました。しかし、これはあくまで対症療法に過ぎず、根本的な解決には至っていませんでした。今回はこの問題の根本的な解決策として、プロキシサーバーの利用に焦点を当ててみます。

https://qiita.com/tanitanistudio/items/76017020d015ca4edc51

## 問題の再確認
社内限定のWordPressサイトが遅延する主な原因は、外部ネットワークに接続できないために発生するタイムアウトです。サイトの管理画面にログインするとき、WordPressは自動的に最新の更新を確認しようとします。しかし、社内のネットワーク設定が外部への接続を許していないため、更新の確認ができずに、結果としてタイムアウトするまで時間がかかってしまいます。このため、管理画面の読み込みが遅くなってしまうのです。

## 根本的な解決策：プロキシサーバーの導入
解決策として、プロキシサーバーを導入し、全てのHTTPリクエストをプロキシを経由して行うようにします。これにより、WordPressサイトが外部リソースにアクセスする際のネットワーク制限を回避し、遅延問題を根本から解消することができます。

## 実装方法
以下の手順でプロキシサーバーを設定します。

### プロキシサーバーの準備
まず、動作しているプロキシサーバーが必要です。このサーバーは、WordPressがホストされているサーバーからアクセス可能である必要があります。ここで`http://your.proxy.server:port`は、使用するプロキシサーバーのアドレスとポートに置き換えてください。

### WordPress設定の変更
WordPressの functions.php ファイルに以下のコードを追加します。

```php:function.php
add_action('http_api_curl', static function ($resource, $request, $url) {
    curl_setopt($resource, CURLOPT_PROXY, 'http://your.proxy.server:port');
}, 10, 3);
```

このコードは、WordPressのサイトで特定のHTTPリクエストをプロキシサーバーを通じて行うようにするものです。具体的には、以下のような動作をします：

#### フックの使用
http_api_curl はWordPressのフックです。これを使用することで、WordPressがcURLを使用してHTTPリクエストを行う際の動作をカスタマイズできます。

#### アクションの追加
add_action 関数は、特定のフックに対して新しいアクション（関数）を追加します。ここでは、http_api_curl フックに対してアクションを追加しています。

#### カスタム関数の定義
静的関数として定義されているこのカスタム関数は、WordPressがcURLを使ってHTTPリクエストを行う際に呼び出されます。

#### cURLオプションの設定
curl_setopt 関数は、cURLセッションの設定を行います。ここでは、CURLOPT_PROXY オプションを使用して、すべてのHTTPリクエストを特定のプロキシサーバーを経由して行うように設定しています。

## 注意点
- プロキシサーバーの設定が適切であることを確認してください。
- プロキシサーバーを使用することで、ネットワークトラフィックが集中する可能性があるため、適切な負荷分散と監視が必要です。

## 結論

社内ネットワークなど、インターネットに直接接続できない環境でWordPressサイトを運用している場合、プロキシサーバーを利用することが有効な解決策です。この方法では、WordPressの管理画面やプラグイン更新などのHTTPリクエストをプロキシサーバー経由で行います。これにより、外部ネットワークへの直接接続が不可能な状況で生じるタイムアウト問題を回避し、WordPress管理画面の速度が向上します。結果として、プロキシサーバーの使用は、社内限定のWordPressサイトの遅延問題を根本から解決し、効率的なサイト運用を実現することができます。
[VR系]大学院で研究したいことについて殴り書きさせてください

![スクリーンショット 2023-11-03 21.09.13（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/34a79166-5f93-b7bc-869d-38b12ab7c7a8.png)


この記事は、<b>「Qiita全国学生対抗戦 Advent Calendar 2023」</b>のアドベントカレンダーとなっています。

https://qiita.com/advent-calendar/2023/student





こんにちは。いせりゅーです。
僕は、いつも<b>「Flutter」</b>についてに技術記事を書くことが多かったです。なぜなら職業がFlutterエンジニアだったからです。

しかし、僕は社会人をしながら大学院に通っています。（すごいでしょ(´∀｀)）

今回は、初めて大学院で研究している内容についてご紹介させていただきます。


:::note info
🙇たくさん意見をください！！🙇

僕はまだまだ大学院1年生で、研究テーマもしっかりと決まっていません。また、VRの知識もまだまだなのでたくさんの意見をいただけたらなと思い、この記事を書きました。
コメントなどで呟いていただけると嬉しいです！！
:::

## 簡単な大学紹介

私が通っている学部は、「心理学研究科修士課程の応用心理学専攻」となっています。エンジニアなのに、心理学！？となると思います。
そうです。僕は大学も心理学部で内部進学をしました。

## 大学院に入った理由
僕が大学院に入った理由としては以下の通りとなります。
- ゼミの先生から猛烈なお誘いがあった。
- 卒論でやった題材を大学院でも深めたいと思った。
- 心理学目線からVRを研究をしている人が少ないのではないかなと思った。

大体こんな感じで大学院の試験を受けることにしました。


## 興味のある内容

正直にいうと、まだまだ研究テーマが定まっていないため、殴り書きをさせていただいています。

- <b>VRを有効活用した学習意欲と学習効果</b>
 
 個人的な意見にはなってしまいますが、VRを使用することで、普段では学習しづらい課題や学習の新しい一つの方法として活用してもらいたいと考えています。
 
やはり、現実世界だと再現をするのが難しいものを題材として、学習の機会を作れればなと考えています。

## 使用したい題材
- <b>英語学習</b>

英語学習には色々な学習方法があると思います。その中でも僕が個人的に大切にしていることとしては、「話す力（Speaking）」だと考えています。この話す力を伸ばすには、留学が手っ取り早く、習得できた事例が多いと思いました。

その理由としては、自分の中の意識が日本語ベースではなく、海外のベースにシフトしたことによって英語を話さなければならないという状況を作り上げられていることが要因の一つだと考察しています。

しかし、留学は費用の面やトラブルなど様々な課題があるため、全ての人ができるというわけではありません。そこでVRを使っていかに留学と同じ英語を話さなければならない環境を作るかがとても大切な点だと私は考えています。

- <b>心理学のカウンセリング体験</b>

心理学を学ぶ上で心理職につく場合は、カウンセリングを行うことがとても重要になります。しかし、クライアントのプライバシーを守る必要があります。そのため、カウンセリングの様子を簡単に確認し、勉強するのは難しい場合があります。そこで教授やカウンセラーさんの経験を生かして、VR上でカウンセリング体験を学ぶことができるのではないかと考えています。


## 使用したい機材
- Meta quest 
　　- 卒論に使用したため、操作が慣れている
- Apple Vision Pro
  - コントローラーを使用せずに体験させたいため、使用を検討している

# 最後に
僕はまだまだVRの領域や題材についてしっかりと理解や勉強が不足していると思います。個人的には大学院は趣味で通っているようなものなので気楽に過ごせたらなと思っています。
もし、「こういう機材があるぞ」や「この題材を採用してみたらどう？」などの意見がありましたら、たくさんコメントください🙇
「ILI9341」なんか出た。


目的
液晶のテスト


![o_cop790.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/d0990acc-6041-f9b3-c59f-4643499e41fb.jpeg)



```c++



//ili9341_SPI_NANKA_text1_071

//インクルド
#include <SPI.h>

//定義
//GPIO
//GPIOの設定2　開始
//GPIO
#define TFT_RST   A1
#define TFT_RS    3
#define TFT_CS    4
#define GPIO_RESET(s)  digitalWrite(TFT_RST,s)
#define GPIO_RS(s)     digitalWrite(TFT_RS,s)
#define GPIO_CS(s)     digitalWrite(TFT_CS,s)


void GPIO_8BIT(int s)
{
  SPI.transfer(s);
} //GPIO_D0_D7


//ライト

void LCD_Write_CMD(int a)
{
  GPIO_CS(0);//CS=0; 12
  GPIO_RS(0); //A0=0; 9
  GPIO_8BIT(a);//P1=a; data SPI SPI
  GPIO_CS(1);//CS=1; 12
} //LCD_Write_CMD

void LCD_Write_Data(int a)
{
  GPIO_CS(0);//CS=0; 12
  GPIO_RS(1); //A0=1; 9
  GPIO_8BIT(a);//P1=a; data SPI SPI
  GPIO_CS(1);//CS=1; 12
} //LCD_Write_Data


//液晶の初期化処理
void TXDT144TF_ST7735S_Init(void)
{

  GPIO_RESET(1);//LCD_RESET=1;
  delay(1); //Delay 1ms

  GPIO_RESET(0);//LCD_RESET=0;
  delay(1); //Delay 1ms

  GPIO_RESET(1);//LCD_RESET=1;
  delay(120); //Delay 120ms

  LCD_Write_CMD(0x01);//SOFTWARE RESET
  delay(50);

  LCD_Write_CMD(0x01);//SOFTWARE RESET
  delay(50);

  LCD_Write_CMD(0x11);//SLEEP OUT
  delay(200);

  LCD_Write_CMD(0x29);//display on
  delay(100);

} //TXDT144TF_ST7735S_Init


//初期化
void setup() {

  //ポートのモード設定　アウトプットモード
  pinMode(TFT_CS, OUTPUT);
  pinMode(TFT_RST, OUTPUT);
  pinMode(TFT_RS, OUTPUT);

  //ポートの初期化
  GPIO_CS(1);//CS=1
  GPIO_RESET(1);//RESET=1
  GPIO_RS(0);//RS=0


  // SPIの初期化
  SPI.beginTransaction( SPISettings( 4000000, MSBFIRST, SPI_MODE0) );
  //SPI.beginTransaction( SPISettings( 2000000, MSBFIRST, SPI_MODE0) );
  //SPI.beginTransaction( SPISettings( 1000000, MSBFIRST, SPI_MODE0) );
  SPI.begin(); // 11 12 13


  delay(500); //0.5秒待つ

  //液晶の初期化処理
  TXDT144TF_ST7735S_Init();

  //画面の書き込み開始
  LCD_Write_CMD(0x2C); //memory write
    delay(1);
  for(int ii=0;ii<(240*8*3);ii++){
     LCD_Write_Data(0xff);
  }

  for(int ii=0;ii<(240*8);ii++){
     LCD_Write_Data(0x00);
     LCD_Write_Data(0x00);
     LCD_Write_Data(0xff);
  }

} //setup


//メインループ
void loop() {
} //loop



```
クロスアカウントでのECR参照

ECSやLambdaで自作のImageを参照する際、クロスアカウントでECRリポジトリを参照したい場合のメモ。
結局、どちらもECR側にPermissionを設定するだけで可能。
重要な注意点は、**リージョンを跨いでクロスアカウント参照することは不可能**という点です。

# Lambda

公式手順: https://aws.amazon.com/jp/blogs/compute/introducing-cross-account-amazon-ecr-access-for-aws-lambda/

## ECRのPermission

今回のLambdaが置いてあるアカウントのIDを222222222222とした際の例。

```json
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "CrossAccountPermission",
      "Effect": "Allow",
      "Principal": {
        "AWS": "arn:aws:iam::222222222222:root"
      },
      "Action": [
        "ecr:BatchGetImage",
        "ecr:GetDownloadUrlForLayer"
      ]
    },
    {
      "Effect": "Allow",
      "Principal": {
        "Service": "lambda.amazonaws.com"
      },
      "Action": [
        "ecr:BatchGetImage",
        "ecr:GetDownloadUrlForLayer"
      ],
      "Condition": {
        "StringLike": {
          "aws:sourceArn": "arn:aws:lambda:eu-west-1:222222222222:function:*"
        }
      }
    }
  ]
}
```

特にLambda側に何か権限などの設定は必要ありません。
これだけで、クロスアカウントでECRリポジトリの参照が可能なはずです。

# ECS

公式手順: https://docs.aws.amazon.com/AmazonECR/latest/userguide/ECR_on_ECS.html

## ECRのPermission

同様にアカウントのIDは222222222222とした際の例。

```json
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "CrossAccountPermission",
      "Effect": "Allow",
      "Principal": {
        "AWS": "arn:aws:iam::222222222222:root"
      },
      "Action": [
        "ecr:BatchGetImage",
        "ecr:GetDownloadUrlForLayer"
      ]
    }
  ]
}
```

こちらも同様にこれだけで動くはず。
よく見ていただけるとわかる通り、Lambdaの項で記載したPermissionの1個目と同じなので、Lambda用Permissionを記載するだけでECSからもPullが可能になります。

あとは案件や会社のセキュリティポリシー的にStatement[].Pricipal.AWSをより絞り込むかどうか、というぐらい。
【自分用メモ】「setContentView(R.layout.activity_main)」は「家の全体の設計書」

【先輩Androidエンジニアから教えられたこと】

「setContentView(R.layout.activity_main)」は「家の全体の設計書」

「val spinner:Spinner = findViewById(R.id.spinner)」は「家のリビングをどこに置くか的な」
リリース直前でアプリのリリースをやめた話

![スクリーンショット 2023-11-04 17.56.21（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/436803d0-66c9-5659-70bb-91e92e3b0da2.png)


この記事は、<b>「個人開発 Advent Calendar 2023」</b>のアドベントカレンダーとなっています。

https://qiita.com/advent-calendar/2023/personal-developement




今回は、リリース直前でアプリリリースをやめた話をしていこうと思います。


# 作成していたアプリ

このアプリは、アトラクションの感想を呟けるレビューアプリとなっています。
主な機能は以下の通りです。

アトラクションごとのレビューの投稿
アトラクションごとのレビューの閲覧
他のユーザーのレビューの閲覧

![app.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/3878a752-be5f-0c83-26ef-99a1628af574.jpeg)


色々な人にレビューをいただけたり、SNSで宣伝をしていたため、とてもいい調子でリリース直前まで進んでいました。

しかし、ある問題が発生しました。



  　

<b>著作権や商標権などの権利関係は大丈夫だろうか・・・？</b>

　
　

普通は、 すぐに気づくものだと思っていましたが、ディズニーに関する画像などは使用していないから大丈夫だと思っていましたが、アトラクション名を使用していたため、どうなのかな..と思っていました。

# 周りの人に助言をもらってみた

色々な方の意見をいただけたので一部ご紹介します。

> 商標登録されたものは、基本勝手に使わないが鉄則でしょう。特にディズニーや映画業界は巨額の訴訟に発展する可能性もあります。営利じゃ無いから見逃してくれるかもですが例えばブランド毀損で訴えられることもあります。要注意です。


> 権利に関しては、専門でない人の大丈夫だろう。は危険な気がするので、不安要素として浮いてるならばIT分野に特化した士業の人や法律周りの専門の人に聞くのが1番リスクベッジ出来ると思う！リスクはなくす事はできないけどリスク軽減のためのコントロールは出来る逆にアウトかも。という意識ある中でリスクヘッジしておかないと、意図的にも見えてしまうのとリスク回避のアイデアがあったところでどう判断するから相手側なので専門の人への相談かな〜〜

> ディズニー関連の権利関係はガチガチだから他の口コミアプリに転用したほうがいいと思いました。リリースできたとて後で揉めそうなので。

とてもいい意見がいただけました。ありがたいです。
リリース前に相談ができて良かったなと思いました。

色々な意見がもらえたので、専門家に聞くことにしました。



# 弁護士に相談してみた

弁護士について知見が全くなかったので、色々なサイトを調べてみました。

アプリについて相談ができそうなサイトなどをいくつか使ってみた感想です。

- 弁護士の相談としては、無料の範囲で相談することができた
- 間違えてサブスクを解除するのを忘れて、5000円かかってしまった。
- 正式な意見書の作成を依頼しようとすると、<b>料金が15万円(税別)</b>や<b>30万円（税別）</b>〜などという意見が聞けたが、とても高かった💦

　
 　


 　
元々、このアプリでお金儲けをすることを考えていませんでした。そのため、15万円〜30万円を取り戻すほどの見込みがなかったため、リリースを諦めることにしました。

本来であれば、もっと早く気づいていればと思っていましたが、作りたいが勝ってしまいました。。

最後に、リポジトリをこちらで記載しておきます。コードだけでなく、ドキュメント周りもしっかりとやったからこそとても悔しいです。
それでも、色々な観点で勉強ができて良かったです。


https://github.com/iseruuuuu/disney_app



# 最後に

どうしてもリリースはしたいと考えているため、違った形などでリリースできたらなと思っています。
とても開発者にとっては辛いですね💦
負けないように頑張ろうと思いました。
まあ、違った大規模なアプリを裏で進めているので気にしない！！と思いながら生活をしています。
【AWS 資格 CLF-C02 】AWS初心者 合格体験記及び試験対策

# はじめに

今回はAWS初心者が約1か月間でAWSクラウドプラクティショナー(CLF-C02)を取得しました。
2023年9月19日に新バージョン(CLF-C02)にアップデートにされたことにより出題範囲が広くなったため対策を記載していきます。

<img width="350" alt="スクリーンショット 2023-11-16 155353.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2010463/a87d43a7-8e44-cf29-5563-26c41e476942.jpeg">

# 投稿主の経歴
- サーバーサイドエンジニア(約3年半) javaメイン
- インフラの業務はほぼない(Linuxでコマンドを触ったりAzureを少しかじった程度)
- AWSに関しては全くの初心者　
# 学習を始める前に
1. いつ試験を実施するのか(心構え)
    何時でも受けれるのがメリットですが、その反面先延ばしにしてしまうため時期を決めて先に申込しましょう。

2. 試験の出題範囲を把握する
 今回のアップデートにより「カスタマーエンゲージメント」、「IoT」、「機械学習」、「移行と転送」といった新たなサービスが追加されましたので 実際に触るとまではいかなくとも、概要は把握しておきたいです。※出題範囲については以下をご参照ください。

2. 割引クーポン(キャンペーン)があるか確認する
  定期的に試験が割引されたり不合格になったとしても再度受験料は無料になったりするキャンペーンがあります。
  試験料は高価ですのでぜひともチェックしてほしいです。
  以下のクーポンは12/2までに取得するば試験料が25％off



https://d1.awsstatic.com/ja_JP/training-and-certification/docs-cloud-practitioner/AWS-Certified-Cloud-Practitioner_Exam-Guide_C02.pdf


https://pages.awscloud.com/jp-cloud-practitioner-certification-challenge.html?sc_icampaign=awareness-practitioner-challenge-2023-ribbon&sc_ichannel=ha&sc_icontent=jp-traincert-practitioner-challenge-2023&sc_iplace=ribbon&trk=60bcffac-fdd5-4733-9460-99ecdf93ecc2　

# 勉強期間・利用教材
 ### 勉強期間 ( 約50時間 )
  
2023年10年上旬～中旬　ハンズオン
2023年10年下旬～11月上旬　過去問題を解く

 
### 利用教材・サイト
### udemy教材


https://www.udemy.com/course/aws-4260/

問題は難しく作られているため不安になると思いますが、解説をしっかりと読み理解ができたら
反復で問題を解くこれを繰り返せば十分合格は狙えます。

※教材のレビューで先人たちが情報を残してくれているので直近で合格された方のレビューを読むことを強くお勧めします。


### 参考サイト
udemyの問題を解いただけではイメージがつきにくい場合はAWS更新ドキュメント
またはchatGptに問いかけてみるのもありです。


https://aws.amazon.com/jp/events/aws-event-resource/archive/?cards.sort-by=item.additionalFields.SortDate&cards.sort-order=desc&awsf.tech-category=tech-category%23app-integration


私は問題の中で出たサービスを以下のような単語帳を作成して学習していました。

![スクリーンショット 2023-11-16 170418.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2010463/f324369a-949b-b6b4-162a-8729bd6c291d.jpeg)









# 深堀をして把握しておきたい分野
- EC2 インスタンスタイプ(オンデマンド・リザーブ・スポット)
- Amazon S3(ストレージ関連)
- Amazon RDS (データベース関連)
-  AWS責任共有モデル
-  AWS Well-architected Framework
-  AWSクラウド導入フレームワーク(CAF)　設計原則
-  IAMとAWS Organizations違い
-  IAMユーザー・IAMロール・IAMポリシー・IAMグループのそれぞれの用途
-  AWSメリット
-  可用性・伸縮性・信頼性・耐久性の意味の把握
-  アンマネージド・マネージドの違い
-  AWS Trusted Advisor

# さいごに
オンライン講座の問題が難しく作られていたため比較的に解きやすかったです。
ただ、機械学習のサービスが5問くらい出題されたため勉強不足でした。。。
次回はSAAを受験しますので勉強方法を共有できたらなと思います。

受験される方、ぜひとも合格しましょう!
Discordボットの設定: アカウント作成とキー管理 🤖🔑

Discord ボット開発の実践的な側面に踏み込みます。
このチャプターでは、Discord ボットアカウントの作成とキーの安全な管理方法を説明します。
これらのキーを Skeet ベースのサーバーレス環境に組み込むことで、セキュアかつ効率的なボットの展開を実現します。

## Discord ボットアカウントの作成

Discord ボットアカウントを作成するには

https://discord.com/developers/applications

にアクセスし、アプリケーションを作成します。

そして General Information から

![](https://storage.googleapis.com/zenn-user-upload/5fc00bd2e9cd-20231114.png)

- `DISCORD_PUBKEY`
- `DISCORD_APPLICATION_ID`

をメモしておきます。後ほど `config.ts` に設定します。

次に Bot ページに移動し、Reset Token をクリックして、トークンを生成します。

![](https://storage.googleapis.com/zenn-user-upload/8eeb285634e9-20231114.png)

- `DISCORD_TOKEN`

トークンをメモしておきます。

続いて Privileged Gateway Intents を有効にします。

- PRESENCE INTENT
- SERVER MEMBERS INTENT
- MESSAGE CONTENT INTENT

を有効にします。


## Discort ボットをサーバーに追加する

以下の URL にアクセスし、Discord ボットをサーバーに追加します。
`DISCORD_APPLICATION_ID`　を上記でメモした値に置き換えてください。

```bash
https://discord.com/api/oauth2/authorize?client_id=<DISCORD_APPLICATION_ID>&permissions=8&scope=bot%20applications.commands
```

追加するサーバーを選択し、追加ボタンをクリックします。
これで Discord ボットがサーバーに追加されました。

## 🗝️ Skeet プロジェクトに秘密鍵を追加する 🛡️

Skeet プロジェクトでセキュアなデータ管理を実現するため、`skeet add secret` コマンドを使って、重要なキーを Google Cloud の Cloud Secret Manager に安全に追加しましょう。このプロセスにより、機密情報の安全な保管とアクセス管理が可能となります。

https://firebase.google.com/docs/functions/config-env?hl=ja&gen=2nd

`DISCORD_TOKEN` の追加

```bash
$ skeet add secret DISCORD_TOKEN
? Enter value for DISCORD_TOKEN: <YOUR-DISCORD_TOKEN>
```

Skeet Framework では、`.env` ファイルを使用せずにセキュリティを保ちます。これにより、Google Cloud の IAM の権限ベースでアクセスをコントロールし、チーム間での `.env` ファイルの共有の必要性を排除します。このアプローチは、プロジェクトのセキュリティを強化すると同時に、開発チームの作業効率を向上させます。

Firebase の公式ドキュメントにも記載されているように、Cloud Secret Manager を利用することで、アプリケーションの構成情報をより安全に、かつ効率的に管理することができます。

## 定数を config.ts に設定する

`functions/skeet/lib/config.ts` に以下の定数を設定します。

```ts
import { dotenv } from '@skeet-framework/utils'
dotenv.config()

const NODE_ENV = process.env.NODE_ENV || 'development'

// Discord
export const DISCORD_PUBKEY = 'Your Discord Pubkey'
export const DISCORD_APPLICATION_ID = 'Your Discord Application ID'
export const DISCORD_GUILD_ID = 'Your Discord Guild ID'

export const config = {
  NODE_ENV,
}
```

`DISCORD_GUILD_ID` は Discord サーバーのアイコンを右クリックすることで、サーバー ID を取得できます。

次の章では、設定したキーを使って、Discord ボットを実際に動かしてみましょう。
1年目＆フルリモートで感じたこと

## はじめに
社会人1年目の大竹です。
現場に配属されてから半年が経ちました。

今回の記事を書くにあたって、技術に関してはまだまだわからないことが多いため
現場業務を行う中で、感じたことを書いていきます。

## メリット
### ①通勤時間０時間
&emsp;通勤時間が無いため、睡眠時間やプライベートの時間を確保できるので、業務に集中力を持っていきやすいです。

### ②仕事環境をカスタマイズできる
&emsp;自分の部屋で業務を行うので、自分の仕事をしやすい環境に整えることができます。
&emsp;私は キーボード、マウス、モニター、LANケーブル等を自前で用意し、仕事をしやすい環境を整えました。

## デメリット
### ①出社アリより不安が増えてしまう
&emsp;一日の時間の使い方や気持ちの面での働き方を習得できていない状態でのフルリモートなので、かなり精神的、技術的に不安がありました。
&emsp;数日オフィスに出社し、先輩上司に過ごし方やチャットでのの言葉遣いなど、社会人としての立ち振る舞いを小さなところから聞くことができます。

### ②チームの方との距離感を感じてしまう
&emsp;フルリモートなので、雑談など業務以外の話をすることがほぼ無いため、チーム内の方とのコミュニケーションを取れず、距離感を感じてしまいます。
 
### ③仕事とプライベートのメリハリが付きにくくなる
&emsp;プライベートの空間が仕事場になると、退勤後にも仕事のことを考えたりすることが増えてしまい、メリハリが付きにくくなってしまうと感じました。
&emsp;仕事専用の空間を構築したり、蛍光灯の色を変えてみたりするとスイッチが切り替わりやすくなるのかなと思い、現在、蛍光灯を購入検討中です。

### ④チームの方にどう思われているのか
&emsp;成果に対するチームの方の評価を得りにくいため、自分の仕事が上手くできているのか不安になります。

### ⑤文章力が足りない
&emsp;長い文章になってしまうと伝わりにくくなってしまい、伝えたいことがあやふやになってしまいます。そのため簡潔に、かつ分かりやすく文章を書く能力が必要になります。スクリーンショットなどを使用し、伝わりやすい文を書いていくように心掛けています。
 
### ⑥質問が難しい
&emsp;これはフルリモートではなくても大事だと思いますが、質問の際に工夫をしないと、自分が何を聞きたいのかが伝わりにくくなってしまいます。
&emsp;そのため、一旦メモに起こしてみたり5W1Hで整理した上で質問をするといいと思います。


## おわりに 
### 考えすぎちゃダメ 先輩や同期を頼ろう
 溜め込んでいてはいい方向には向かない、少し話を聞いてもらうだけでも心が楽になるので、どんどん人を頼りましょう。
 自分で自分の精神状況を把握できるよう、逐一自分を見つめなおす機会を作っていこうと思います。
WordPressサイト間での料金表共有：iframeを用いた埋め込み方法

## 背景
WordPressを使用して複数のサイトを運営するクライアントは、各サイトに設置された料金表の更新が課題となっていました。現在、料金の変更が必要になるたびに、全てのサイトで個別に更新作業を行う必要があり、これは非常に効率が悪く、時間とコストの両方を浪費しています。

提案されている解決策は、一つの主要なWordPressサイトに料金表を作成し、これを他のサイトにiframeを使用して埋め込むことです。この方法では、一箇所での更新が他のサイトにも自動的に反映され、管理がより効率的になります。

クライアントは技術的な側面に詳しくなく、従来の方法での更新を望んでいるため、新たに料金表を作成せずに、iframeで埋め込む簡単な方法を考案します。
<br>
![料金表修正前.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487238/62ffc125-e308-6c62-b8b8-87ef95af95a6.png)
_修正前 - Aサイト、Bサイト、Cサイトがそれぞれ独自の料金表（料金表A、料金表B、料金表C）を設定している。各サイトは異なる料金表を持っており、更新はサイトごとに個別に行う必要がある。_

![料金表修正後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487238/5cbe5377-3a88-624d-4069-c970d9f2c986.png)
_修正後 - Aサイト、Bサイト、CサイトがすべてAサイトの料金表Aを共有している状況。この共有により、料金表の更新はAサイトで一度行うだけで、全サイトに自動的に適用されます。_

## 案①
iframeを使用して料金表を埋め込み、CSSを用いて表示範囲を指定する方法です。この方法では、iframeの位置やサイズを調整し、不要な部分（ヘッダーやスクロールバーなど）を非表示にすることで、料金表のみを表示します。

```html:引用先
<iframe src="https://example.html"></iframe>
```

```css:引用先
iframe {
    width: 500px;         /* iframeの幅 */
    height: 300px;        /* iframeの高さ */
    overflow: hidden;     /* スクロールバーを隠す */
    border: none;         /* ボーダーを隠す */
    position: relative;   /* 相対位置指定 */
    top: -150px;          /* 上方向に150pxオフセット */
    left: -100px;         /* 左方向に100pxオフセット */
}
```

## 案②
引用元のページに料金表のIDタグにアンカー（例: #fee）を付け、引用先のページでiframeを埋め込む方法です。これにより、ページの特定の部分（この場合は料金表）だけを直接表示することができます。

```html:引用元
<div id="fee"></div>
```

```html:引用先
<iframe src="https://example.html#fee"></iframe>
```

## 案③

引用元のページでiframeの読み込み時に特定のCSSを適用し、ヘッダーやリードテキストを非表示にして料金表のみを表示する方法です。これにより、埋め込み時に不要な要素を除外し、必要な部分のみを表示できます。

```php:引用元
<?php $isIframe = isset($_GET['iframe']) && $_GET['iframe'] == 'true'; ?>

<?php if ($isIframe){ ?>
	<style> /* 必要なcssを記載 */ </style>		
<?php } ?>
```

```html:引用先
<iframe src="https://example.html"></iframe>
```

## 結論
WordPressで複数のサイトを管理している場合、料金表を一括で更新する方法は大きな助けになります。しかし、iframeを使った埋め込み方法には、いくつかの問題点があります。

案①（CSSで範囲を指定する）と案②（ページの特定の部分を直接表示する）では、画面のサイズが変わるとレイアウトが崩れる問題があります。特に、画面のサイズに応じてデザインが変わる「レスポンシブデザイン」のサイトでは、この問題が顕著になります。

このため、最も良い解決策は案③でした。これは、iframeで料金表を読み込む際に特別なCSSを適用し、料金表以外の部分（例えばヘッダーや導入部分）を表示しないようにする方法です。この方法なら、料金表の表示を自由に調整できるので、画面のサイズが変わってもレイアウトが崩れる心配が少なく、操作も簡単です。

複数のサイトを効率よく運営するためには、このように柔軟で実用的な方法を選ぶことが重要です。これにより、時間と労力を節約しながら、サイトの管理をよりスムーズに行うことができます。
なんちゃってアステロイドを作るまでの途中経過

ある程度完成したらきちんと手順をまとめていきたいと思います。
まだ勉強段階なので使えそうな記事をとりあえずまとめます。

現在の勉強の進捗はこちらです。僕の大体のレベルが分かります。

https://qiita.com/Bassiy/items/1e0601be7a095be3bea0

----
＜記事一覧＞

・プレハブの出現、入れ替え
⇒後でまとめる

アステロイドのキューブに色を付ける

https://umistudioblog.com/emissionobject/

アステロイドの分割部分はこれで表現する予定

https://futabazemi.net/unity/button_object_change

アステロイドの分割のプレハブを作る際に中心がずれてしまったので直すために使いました。

https://vinsatoo.hatenablog.com/entry/2018/09/17/083145

アステロイド生成時の音を入れる用

https://yumarublog.com/unity/bgm-se/amp/

デバックに便利そうだったのでまとめました

https://qiita.com/Bassiy/items/8a5181ec75c3441e7061

プレハブの入れ替えで必要そうなのでまとめました

https://qiita.com/Bassiy/items/b1597f5cf38a43714de6

<details><summary>こんな感じのコードをうまく流用していきたい</summary><div>

```count.cs
using System;

class Program
{
    static void Main()
    {
        int counter = 0; // 初期カウンター値

        Console.WriteLine("Press 'Q' to increment the counter. Press 'Escape' to exit.");

        while (true)
        {
            ConsoleKeyInfo key = Console.ReadKey(true);
            if (key.Key == ConsoleKey.Q)
            {
                counter = AddOne(counter); // AddOneメソッドを使用してカウンターを増加

                counter = CountCheck(counter);

                Console.WriteLine("Counter: " + counter);
            }
            else if (key.Key == ConsoleKey.Escape)
            {
                break; // Escapeキーでループから抜ける
            }
        }
    }

    static int AddOne(int number)
    {
        return number + 1; // 引数に1を加算して返す
    }

    static int CountCheck(int counter)
    {
        if (counter > 3)
        {
            counter = 1; // カウンターが3を超えたら1にリセット
        }
        return counter; // 引数に1を加算して返す
    }
}
```

</div></details>
アプリをリリースし続けた結果を共有させてください

![スクリーンショット 2023-11-04 18.24.33（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/6f805c4e-de6b-7153-5085-988b1cadcd70.png)


この記事は、<b>「個人開発 Advent Calendar 2023」</b>のアドベントカレンダーとなっています。

https://qiita.com/advent-calendar/2023/personal-developement



# リリースしたアプリの紹介

# アプリのダウンロード数を計測してみました

2021年の1月から2023年の11月までのデータを取得してみました。

![スクリーンショット 2023-11-04 18.17.09（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/1e9533d8-2aeb-3f20-a53d-124c698e1032.png)

あらあら、１１.7Kのユニット数ですね。これを数字にすると、117000ダウンロードになっています。嬉しいですね。一つ一つは自信があまりないですが、使っていただいてよかったです。




# ダウンロード数ランキング

### 1位　給料明細

ダウンロード数：1.90K

### ２位　カウンター ~数取器~

ダウンロード数：1.42K

### 3位　まるばつ ３人対戦

ダウンロード数：1.20K



# これからやっていきたいこと

- 大規模なアプリをリリースしたい
- Admobなどを使用して、広告収益を稼ぎたい。
- アプリのリリース数を100個にしたい


# 最後に

たくさんアプリを開発し、リリースすることはとてもアドバンテージになりました。
これからもたくさん開発し、リリースできることを目標に頑張っていきます！！！


# ちょっとした宣伝

株式会社ゆめみの23卒のメンバーでアドベントカレンダーを作成しています。
新卒のフレッシュな記事がたくさん投稿予定なので、少しでも興味があれば購読いただけると幸いです！！

https://qiita.com/advent-calendar/2023/yumemi-23-graduation
rex0220 計算式プラグインの使い方をGPTsに学習させてみる（その６）Conversation starters 会話のきっかけ

[rex0220 計算式プラグインの使い方をGPTsに学習させてみる（その５）](https://qiita.com/rex0220/items/9bde1161d1067a88cd18)の続きです。
Conversation starters (会話のきっかけ)を試してみます。

# 概要
Conversation starters を設定すると、チャットボット表示時にボタンとして表示されます。
ボタンをクリックするとそのまま問合せとして送られます。
設定は、いくつでもできますが、表示されるのは先頭の４つまでのようです。
計算式プラグインを使う場合に、まず知ってもらいたいことを並べてみます。

- 計算式の書き方
- 演算子
- 関数一覧
- 循環参照

![2023-11-16_16h34_55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/e6428ace-de7a-d2fd-ed63-b17d612565c6.png)

# 計算式の書き方
とりあえず、最初に読んでもらいたいことを応答するように、資料を更新して学習させます。

![2023-11-16_16h46_56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/23ab2e9d-689e-7a84-7eae-ef6a69167072.png)

# 演算子
「演算子」だけだと、そのまま一覧で概要を応答するだけです。
使用例も欲しい気がしますが、使用例を入れると長くなりすぎるので、これでOK
![2023-11-16_16h49_57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/aac7162b-5444-a4cb-3b88-4f89439ab81f.png)

## 演算子の使い方を教えて
問合せを少し変えると、使用例も応答されます。

![2023-11-16_16h54_28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/d3dc642f-1dc7-8230-f68c-b546fd10f859.png)
LSTMを使用して文中の次の単語を予測してみた

# LSTMやってみた

この記事では、TensorFlowとKerasを使用してLSTM（Long Short-Term Memory）を用いた与えられたテキストの一部から次の単語を予測するモデルを構築します。

## ライブラリのインポート

```python
import numpy as np
import tensorflow as tf
from tensorflow.keras.models import Sequential
from tensorflow.keras.layers import Embedding, LSTM, Dense
from tensorflow.keras.preprocessing.text import Tokenizer
from tensorflow.keras.preprocessing.sequence import pad_sequences
```
# テキストデータの準備
```python
# 複数のテキストデータの用意
texts = ["Your input text goes here.", "Another example text for the model."]

# すべてのテキストを1つのテキストに結合
combined_text = " ".join(texts)

# テキストをトークン化
tokenizer = Tokenizer()
tokenizer.fit_on_texts([combined_text])

# 各テキストを整数の系列に変換
sequences_list = [tokenizer.texts_to_sequences([text])[0] for text in texts]

# 入力データとターゲットデータの作成
X_list = []
y_list = []

for sequences in sequences_list:
    for i in range(1, len(sequences)):
        input_sequence = sequences[:i]
        target_word = sequences[i]
        X_list.append(input_sequence)
        y_list.append(target_word)

X = np.array(X_list)
y = np.array(y_list)

# 入力データのパディング
X = pad_sequences(X)
```
入力は現在の単語、ターゲットデータは次の単語になるようにしています。
## LSTMモデルの構築
```python
total_words = len(tokenizer.word_index) + 1
model = Sequential()
model.add(Embedding(total_words, 50, input_length=X.shape[1]))
model.add(LSTM(100))
model.add(Dense(total_words, activation='softmax'))
model.compile(loss='sparse_categorical_crossentropy', optimizer='adam')
```
## 予測
モデルを使用して、与えられたテキストの一部から次の単語を予測します。予測結果は確率的に選ばれ、最も確率の高い単語が次の単語として表示されます。
```python
input_text = "Your input text goes"
input_sequence = tokenizer.texts_to_sequences([input_text])[0]
input_sequence = pad_sequences([input_sequence], maxlen=X.shape[1], padding='post')
predicted_word_index = np.argmax(model.predict(input_sequence), axis=-1)[0]
predicted_word = tokenizer.index_word[predicted_word_index]
print(f"Predicted next word: {predicted_word}")
```
## 実行結果
モデル学習した文章は"Your input text goes here."です。
それではモデルに"Your input text goes"を入力し、この文の次に来る単語を予測してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3363684/93348d4a-db1a-c473-b30f-7a46381b901b.png)
以上の通り、モデルの予測結果では"Your input text goes"の後には"here"が来ると予測できています。
# まとめ
LSTMでは以上のように系列データに対して、予測を行うことができます。
「現代数理統計学の基礎」演習問題解方メモ

　60の手習い。大学数学おろか高校数学も忘却のかなた。「現代数理統計学の基礎」演習問題も当初はまったく歯がたたず。あらゆる教育系YOU Tubeやインターネット投稿のお世話になりました。しかし、それでも解答の行間や根拠がわからず。
なんとかここまで、途中式も極力省かず、根拠も明記したメモを作成しました。
 　独学の方々への少しでもお役にたてばと、第1章から順に投稿していきます。
  第1章
  
![第1章問1　P1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/cdf7641a-581e-1224-3a6e-09d2de4ffd90.jpeg)
![第1章問1　P2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/896316f6-fee2-142b-0516-38142a44e2b3.jpeg)
![第1章問2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/d2c9ae22-ede9-6783-684b-6d1e8308efdb.jpeg)
![第1章問3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/61e6d4e6-4940-3d34-7aec-a98042fc574c.jpeg)
![第1章問4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/81e8142e-4d43-6c82-3873-46096366b29d.jpeg)
![第1章問5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/9ea8aa11-4e6f-98e4-8d67-9013cd9993ed.jpeg)
![第1章問6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/537961fa-079c-0795-5ce2-b064e4f6f916.jpeg)
![第1章問7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/e47ca57d-4725-7770-68ea-002fb0733831.jpeg)
![第1章問8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/d7d543f6-1ed6-aba9-8f36-bb756a78ef9a.jpeg)
【個人開発】Intellijプラグイン「kitsune」を作ってリリースしてみた

![#270C00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/d5687420-c6f5-646f-af35-d9f15c1a27b5.png)

# はじめに

本記事はUzabase Advent Calendar 2023の1日目の記事です

https://qiita.com/advent-calendar/2023/uzabase

<h3>こんにちは！！@Sicut_studyです！</h3>

私達は**テスト駆動開発**を徹底して行っています。
その中で**E2E**を書くのに**Intellij**で**Gauge**を使って書いています。

その中で何度かモヤモヤしていたことがあり、「もっとわかりやすくなればな〜」というところから今回は

#### <font color="red">Intellijのプラグイン開発

に挑戦してみました！

# E2Eを書いていての悩み

私達は`Gauge`というツールを使い、E2Eを書いています
例えば以下のテストがあったとします

```test.spec
# サンプルE2E

## ユーザー名を変更できる
* ユーザーAを作成する
* 管理画面にアクセスする ☆
* 名前変更ボタンを押す
* 名前に"ユーザーB"と入力する
* 保存ボタンを押す
* 名前が"ユーザーB"である
```

それぞれの行が1つのテストステップになっています
ここで、Gaugeには**コンセプト**という便利な機能があります

https://tech.uzabase.com/entry/2018/06/07/120432

```test.cpt
# 管理画面にアクセスする ☆
* ログイン画面にアクセスする
* メールアドレスに"a@sample.com"を入力する
* パスワードに"pass"を入力する
* ログインボタンを押す
```

このように1つのステップをコンセプトとすることで、複数のステップから1つのステップが作れます(☆の箇所)

この機能はとても便利なのですが、

#### <font color="red">コンセプトの中のステップで起きたエラーがどこのステップで起きたエラーなのかわからない

という問題があります。

```test.spec
# サンプルE2E

## ユーザー名を変更できる
* ユーザーAを作成する
* 管理画面にアクセスする
* 名前変更ボタンを押す
* 名前に"ユーザーB"と入力する
* 保存ボタンを押す
* 名前が"ユーザーB"である
```

このテストを実行して<font color="red">**ログイン画面にアクセスする**</font>がエラーになりましたと言われたときに、内容が詳しくない人は<font color="red">**すべてのステップの詳細を見に行く必要が有りました**</font>

今回はこんな悩みをプラグインを作って少しカイゼンしてみました🎉

# 開発したプラグインについて

今回は**Spec**ファイルの**各ステップ**で <font color="red">**コンセプトのステップになっているものにマークをつけるプラグイン**</font>を作りました

![#270C00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/7919a163-863b-30e6-a90c-3233a8109243.png)

https://github.com/jinwatanabe/kitsune

コンセプトの「コン」から「kitusne」と名付けてみました

使い方は簡単です。プラグインを入れて **.spec**ファイルを開いたエディター画面で「右クリック」→「Search Concept」を選択するとコンセプトファイルに定義がされているものは<font color="blue">**青いライト**</font>のマークが付きます

「Ctr+Alt+C」のショートカットも利用するので知りたいときにすぐにコンセプトになっているステップを把握することができます

![Peek 2023-11-16 12-25.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/ca099e12-4942-118a-2533-883474964604.gif)

# プラグイン開発について

プラグインは以下の記事を参考に作成しました

https://zenn.dev/ryo_kawamata/articles/d2b5081df86728

まずはプラグインで簡単なものを作成して使えることが確認できてから、**ChatGPT**を駆使してプラグイン特有のライブラリを利用しながら開発しています

このプラグイン作成のテンプレートが優秀すぎるので速攻開発を始められました

https://github.com/JetBrains/intellij-platform-plugin-template

しかもGithub Actionsで**jar**ファイルを作ってくれるのでダウンロードしてMarktplaceにアップロードすれば公開も簡単にできます

プラグイン特有の話はChatGPTに任せて、書いていたのは簡単なKotlinのコードなのでそこまで難しいと思う箇所は全然ありませんでした！
オレオレのプラグインをどんどん作って効率化をしていくのは簡単にできます

ちなみに最後に表示しているアイコンはこちらから利用しています

https://jetbrains.design/intellij/resources/icons_list/


# 今後の開発

いまはコンセプトになっているステップだけを表示しているので、

- 具体的にエラーが起きているコンセプトだけを表示
- エラーのステップに飛べる

などGaugeを利用する上で便利になるような機能を追加していきたいです

# おわりに

今回は初めてIntellijのプラグインを作ってのでその話を記事にしました
VSCodeの拡張に比べると個人的にはとても作りやすいなと感じました！
また、ChatGPTとの相性もとてもよかったので、やりたいことを伝えてプラグインをぜひ作ってみてください！

ここまで読んでいただけた方は**いいね**と**ストック**お待ちしております！

# 参考

https://zenn.dev/ryo_kawamata/articles/d2b5081df86728

https://github.com/JetBrains/intellij-platform-plugin-template

https://jetbrains.design/intellij/resources/icons_list/

https://tech.uzabase.com/entry/2018/06/07/120432
【初心者】Node.jsでCORSエラーが起きた！そもそもCORSって何ぞやから、解消法をまとめた

Node.jsの勉強をしようとしたらCORSエラーが出たので、備忘録としてまとめました。

## そもそもCORSとは？

CORSとは、オリジン間リソース共有のこと。

オリジンとは、「https://~~~~.com:443」のような『スキーム（通信のルール。プロトコルともいう）＋ドメイン＋ポート番号』を指します。

Webの世界では、このオリジンはユニークなもので、別のオリジン間でリソース（データ）を共有してはダメという決まり事があります。この決まり事を同一生成元ポリシーと言います。

## CORSが必要な理由
CORSが存在している理由は、ユーザーを悪意あるサイトから守るため。

## 同じオリジンの範囲って？

この組み合わせはOK
https://~~~~.com
https://~~~~.com/abc

この組み合わせはNG(サブドメイン)
https://~~~~.com
https://api.~~~~.com/abc

この組み合わせはNG(異なるドメイン)
https://~~~~.com
https://******.com/abc

## エラーが出る理由

開発をしてるときに、フロントエンドとサーバーサイドのポートが異なると、オリジンが異なるためにエラーが出ます。

例えば、フロントエンドの開発ではlocalhost:5500で開発しているのに、サーバーサイドをlocalhost:5000で開発していると、リクエストを投げた時にエラーが出ると言った具合。

## エラーの解消方法
上記の理由でエラーが出ている場合、解決方法はフロントエンド側のポート番号を許可します。
具体的にはレスポンスヘッダーにフィールドを指定してあげます。
今回は、モジュールがすでにあるのでそれを使います。

1.corsモジュールをインストールします。
npm i cros

2.jsファイルにインポートして、クライアントのポートを許可する
```
const cors = requier("cors");
const PORT = 5000;
```
```
app.use(
    cors({
    origin:"https://127.0.0.1：5500"
    })
)
```
OneTrustでの同意バナー+GTMでの実装方法

同意バナーとして有名なOneTrust( https://www.onetrust.com/ )ですが、実装時にいくつか「？？？」という点が出てきたのでどう対応したかを備忘録として記載しておきます。

## 発生した課題
* 日本の代理店から提供された方法だと、[Googleの同意モード]( https://developers.google.com/tag-platform/security/concepts/consent-mode?hl=ja )と連携していない
* 同意を拒否した場合、CookieだけでなくAnalyticsの発生イベントそのものをブロックしてしまう
* そもそも同意の状況を取得するタイミングが遅く、同意していてもタグ発行やイベント発火のタイミング設定が難しい

という問題がありました。


## 対応
色々調べて下記の方法にたどり着きました。
https://tanelytics.com/integrate-onetrust-with-google-tag-manager/

こちらの設定で行うとTag Assistantでも同意の状況が簡単に確認できるようになり、イベントもブロックしないので拒否したCookie関連情報のみ排除してAnalyticsにデータを送ってくれるようになりました。

実際の挙動としては、GTMの「同意の初期化」のタイミングで、CookieとdataLayerから現在の同意状況を抜き出し、Googleの同意モード用に変換してセットしています。
そのため以降の処理について適切に同意の状態を反映させることができるようになります。

これらはさきほどのURLに記載のあるテンプレートを見てみると、どのように読み込まれているかがわかります。
![スクリーンショット 2023-11-16 205831.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311544/4f8a81a4-3da7-3850-4c53-f44456cdf202.png)
OptanonConsentというCookieと、OptanonActiveGroups,OnetrustActiveGroupsというdataLayerから現在の同意状況を読み取っています。

これらをOneTrustの同意タイプ(analyticsの同意なら"C0002")に割り当て、同意の初期化トリガー発生時に読み込むようにするわけです。
![スクリーンショット 2023-11-16 210409.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311544/645db7ec-2a1a-1a9d-5a5c-ca9dee4dd83a.png)
![スクリーンショット 2023-11-16 210427.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311544/c2bb0524-9d82-a7eb-b634-b69353e547c1.png)
上記画像ではanalytics以外の同意タイプも変数を作ってセットしています。こちらもさきほどのURLに記載されています。

## 実装後の確認方法
同意設定が正しく行われているかをTag Assistantで確認したい場合は、GTMでは「Consent」の欄でanalytics_storageがgrantedになっているかと、GA4のタブではHits SentのPage View欄のパラメータを確認すればわかります。
![スクリーンショット 2023-11-15 164051.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311544/7eae63b6-ae37-509c-c023-483085083f52.png)
analytics_storageがgrantedになっているのは、Cookie取得を許可した状態です。

![スクリーンショット 2023-11-16 161441.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311544/08df5240-c23b-e01e-ea01-6bf8d74794ec.png)
またHit Detailsでは、Cookie Consent StateがG111になっているはずです。
こちらのG111はad_storage と analytics_storage の両方を同意した状態です。詳しくは下記URLを参照してください。
https://developers.google.com/tag-platform/security/guides/consent?hl=ja
【scipy.integrate】 RuntimeWarning: overflow encountered

フェルミ・ディラック関数で電子密度計算を``scipy.integrate``でかんばろうとして、
```python
z = lambda x: 1 / (1 + np.exp((x - E_F)/(k_b * T)))
total_n, total_n_err = spi.quad(z, 0, np.inf)
```
とすると、
```python
0.0 0.0
```
となり実質的なエラー。[docs](https://docs.scipy.org/doc/scipy/tutorial/integrate.html)に記述があり、どうやら計算アルゴリズム的に、積分範囲を適当に設定すると、フェルミ・ディラックみたいなほぼ0の値が裾を引くタイプの関数では想定通りの結果がでないらしい。
つまり、狙っている部分を囲むような有限積分で近似するのが方法としてよいようで。
フェルミ・ディラックの場合は$E_F$の周りに$k_b T$の何倍かを足しておいて、許容できる相対誤差まで動かしてみるのがよさそうだ。
[Flutter] ローカルHTMLをWebViewで描画してみた

# はじめに
この記事では、ローカルHTMLファイルの読み込みや`webview_flutter 4.4.2`を使ったWebViewの表示、JavaScriptとDartの連携に関する方法を記載します。記事が読者のお役に立てれば幸いです！

# サンプルコード
```dart:test_page.dart

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:webview_flutter/webview_flutter.dart';

class TestPage extends StatefulWidget {
  const TestPage({Key? key}) : super(key: key);

  @override
  State<TestPage> createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  late WebViewController controller;
  late Future<void> controllerInitialization;
  @override
  void initState() {
    super.initState();
    controllerInitialization = initController();
  }

  Future<void> initController() async {
    final html = await rootBundle.loadString('asset/index.html');
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(NavigationDelegate(onPageStarted: (String url) {
        // ページが読み込まれたときにJavaScriptからDartに変数を渡す
        getJavaScriptVariable();
      }))
      ..loadRequest(
        Uri.dataFromString(
          html,
          mimeType: "text/html",
          encoding: Encoding.getByName("utf-8"),
        ),
      );
  }

  Future<void> getJavaScriptVariable() async {
    // JavaScriptの変数を取得
    print("----------------------------------");
    final test = await controller.runJavaScriptReturningResult("sendMs();");
    print(test);
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<void>(
      future: controllerInitialization,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          // 初期化が完了したらWebViewを表示
          return Scaffold(
            appBar: AppBar(title: Text("WebView")),
            body: WebViewWidget(controller: controller),
          );
        } else {
          // 初期化中はローディングなどを表示
          return const CircularProgressIndicator();
        }
      },
    );
  }
}
```

```html:asset/index.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>js_to_dart</title>
</head>

<body>
  <h1>hello world</h1>

  <script>
    let testNum = 10;
    function sendMs() {
      return testNum;
    }
  </script>
</body>

</html>

```

```:pubspec.yaml
  assets:
    - asset/index.html
```

# 実行例
![jstodart.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3616979/bcc607e1-9224-481e-5c71-6bb73db0674c.png)
![jstodart2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3616979/797e4441-2a3a-b981-d0ec-4f4731020572.png)

index.htmlを変更することでGoogle Mapも読み込むことができました。
![jstodart3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3616979/c02d0d65-6a02-6ce3-00e5-29b7ac524d03.png)


# おまけ
指定したURLをWebViewで描画する方法
`loadRequest`の部分を
```
..loadRequest(Uri.parse("URL"));
```
にするだけです。
すべての行の長さが不定な 2 次元配列の出力

今回はこれ
https://paiza.jp/works/mondai/stdout_primer/stdout_primer__variable_array_step4
前回のやつのすべての行の長さが不定であるものを出力せよという問題
たとえば、
４
2 4 3 1
というふうに出力されたら
1 2
1 2 3 4
1 2 3
1
というふうに出力しないといけないという問題。
前回の応用なんだけど、簡単ではある。
ただし、Nを全く使っていない。

```py
N = int(input())
M = input().split()
for j in M:
    j = int(j)
    for i in range(1,j+1):
        if i == j:
            print(i)
        else:
            print(i,end=" ")

```

なので、ちょっと考える。
すべての行の長さが不定な２次元配列の出力ということから、
おそらく、最初に配列を作っておいてそこから条件に沿って出力するというやり方ではないか？

ではまず、配列を作ってみる
空でN個の要素の配列を作る場合、`[0]*N`だ。
そこから配列をつくる。

```py
N = int(input())
M = [0] * N
arr = input().split()
for i in range(N):
    M[i] = int(arr[i])
```
で、そこから、配列をループで出力させてみる

```py
for i in range(N):
    for j in range(1,M[i]+1):
        if j == M[i]:
            print(j)
        else:
            print(j,end=" ")
```
と、こんなふうに、MもNも使うことができた。
Oracle Linux　9 インスタンスへのnginx ＋Node jsアプリ作成 　エラー 502 Bad Gateway

# 背景
Node jsでサーバアプリケーション作成します。Nginxでリバースプロキシします。
### Nginx install
- インストール
```rb
$sudo yum update 
$sudo yum install -y nginx
```
- nginx起動
```rb
$sudo systemctl start nginx
$sudo systemctl enable nginx
```
- 状態チェック
```rb
$sudo systemctl status nginx
```
# 問題
https://xxxxx ウェブサイトアクセスするときに以下のエラー発生しました。

:::note alert
502 Bad Gateway
nginx/1.20.x
:::


# 調査
- curl でnodeアプリが動いてるのか確認します。http://localhost:3000はnodejsアプリが動いてるIPアドレス
```rb 
curl -v http://localhost:3000
```
結果は、問題ない。

- nginxのconfが正しいのか確認します。
nginxの設定ファイルは/etc/nginx/nginx.confです。以下のコマンドで内容確認
```rb 
sudo cat /etc/nginx/nginx.conf
```
これも問題ないです。

- nginxのエラーログ確認
```rb 
 sudo tail -f /var/log/nginx/error.log
```
 以下のエラー発見しました。
 connect() to 127.0.0.1:3000 failed (13: Permission denied) while connecting to upstream
 問題はnginxがアクセスポート3000をアクセスできないのです。
そして以下のコマンドで解決できました。
```rb 
sudo setsebool -P httpd_can_network_connect 1
```