OmniAICreator/Qiita-1.07M huggingface dataset:
Railsで1つのマシンで複数のアプリを動かす(バーチャルホスト)

# この記事について
この記事はインフラ初心者がWebページをVPS上で公開したい！って思ってやったことを備忘録として書き残したものです。素人が書いているため情報の信憑性は保証しません。詳細は各自で調べながらやることをおすすめします。記事のとおりにやっておかしなことになっても責任は取れませんのでご了承ください。

# 事前準備
この記事の内容が済んでいることが前提です。
サーバーはunicorn、nginxを使用しています。
https://qiita.com/piny940/items/e938736d3ce9a56e5b5a

# 変更点
nginxの設定を下記のように変えます。ポート番号は一意にします。
```
server {
  listen 80;
  server_name app1.example.com;
  root /var/www/app1/current/public;

  location ^~ /assets/ {
    gzip_static on;
    expires max;
    add_header Cache-Control public;
  }

  location @unicorn {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    proxy_pass http://127.0.0.1:8001;
  }

  try_files $uri/index.html $uri @unicorn;
  error_page 500 502 503 504 /500.html;
}
```

unicorn.rbのポート番号の部分を変更
```
# ポート番号を指定
listen 8001
```

# 参考資料
Nginx, Unicornで作るRailsアプリ
https://umatomakun.hatenablog.com/entry/2014/04/25/005445

setting up a virtual host with unicorn, nginx and capistrano in rails
https://stackoverflow.com/questions/13469812/setting-up-a-virtual-host-with-unicorn-nginx-and-capistrano-in-rails
バージョンを指定してNuxtのプロジェクトを作成する

こんにちは。今回はNuxtな開発環境を構築する場合に、プロジェクト作成に際してバージョンを指定したい場合の方法をご紹介します。（個人的な備忘録の意が強い）

# 通常のプロジェクト作成
Nuxtは通常、以下のコマンドで最新バージョンのプロジェクトを作成することができます。`<Project Name>`には任意の文字列（プロジェクト名）が入り、それに従ってプロジェクトのディレクトリが生成されます。文字列の代わりに`.`と入力すると`nuxt-app`というプロジェクト名に自動で指定されます。
```
npx nuxi init <Project Name>
```

# バージョンを指定する場合
Nuxtのバージョンを指定する場合は以下のコマンドでプロジェクトを作成することができます。

```
npx nuxi@<Version Number> init <Project Name> 
```

例えば`3.4.0`を指定したい場合は、以下の様になります。

```
npx nuxi@3.4.0 init my-app
```

久しぶりのQiita投稿に加えて、超ライトな内容でしたがご容赦ください。
ご精読ありがとうございました。
URLについて

## URLとは
ネットワーク上のリソースを一意に識別するためのもの。

## URLの規約


```
スキーマ://ホスト名:ポート番号/ディレクトリ/ファイル名
```

## オリジンポリシー
URLのうち、
「スキーマ://ホスト名:ポート番号」
を、**オリジン**という。

Webには、同一オリジンポリシーという、異なるオリジンのリソースにアクセスできないようにする制限がある。

例えば、
http://example.com:8080
http://example.com
これらは異なるポートを使用するので、同一オリジンではない。

しかし、ポート番号の記載の有無で、必ずしも異なったオリジンとは言えない。
例えば、
http://example.com:80
http://example.com
80とは、HTTP通信の規定のポート番号なので、この2つは同一オリジンと言える。
【symfony4】ORM(doctrine)入門

## 初めに

- PHP/Mysqlを使用して１年ほど
- SymfonyやLaravelを半年ずつほど

## 概要

初めてSymfonyを見たとき、なぜSQLではなくてORMという独自の方法で記載する必要があるのか？と思い調べたことや概要を備忘録として記事にしました。

## 1. ORMとは？

初めにSQLとORMは概要や構成がが違ったので、ORMについて調べました。
調べた内容はざっくり下記にまとめました。

:::note info
RDBに対するデータの操作をオブジェクト指向型言語のやり方で扱えるようにするための手法、RDBに対する操作がカプセル化されたORM用のライブラリを使用し、ORMがSQLの生成などを背後で行ってくれます。
:::
:::note info
DBのテーブルはクラス(Entity)と紐づけられ、オブジェクトに対する操作をすることでデータの操作を行います。これにより、SQLを書く手間を省くことが可能です.
:::
:::note info
オブジェクト指向言語でSQLを実行することにより、PHP内での複数言語の混合が減り保守・運用に対してメリットが生まれます。
:::

要するに、SQL文書くとPHP内にSQL言語混ざるからSQL文もPHPで書けたら良いよね！！って感じで覚えました。

細かく違いを分けると、返り値が違います。

:::note info
SQL(PDO:query) = PDOStatement オブジェクト
ORM(findby) = Stdclassオブジェクト
:::

返り値はオブジェクトで格納されるので、getter、setterなどを使用する認識です。

自分が使用したSymfony4ではgetter/setterをEntityファイルに記載していました。
テーブルごとにEntityファイルを作成し、ORMで取得したオブジェクトから値を取得するイメージです。

ORMを使用して取得したオブジェクトですが値が取得できなければデータとして活用しずらいですね、、

Entity内に該当テーブルのgetter/setterを定義することで値の取得や差込を行えます。

ん？そもそもEntityとは何かよく理解していなかったので調べました。

:::note info
Entityとは、テーブルとリンクしたModel（モデル）になっておりEntityからデータの作成や削除を行うことができるようになります。
:::

ざっくりですが、Entityを使用し、DBテーブルとマッピングすることで各カラムを定義でき、定義した値をもとにデータの取得や生成を可能にする認識です。

※Symfony自体はテーブル情報を知らないので、Entityを使用し辞書のように参照しているイメージでしょうか。

## 3. データの取得方法

ORMを用いてデータを取得する方法一覧です、

環境のDoctrinバージョンによって使用できない場合がありますので注意です。

- **PK(主キー)で取得：find**
- **条件一致するものを取得：findBy**
- **条件一致する1件を取得：findOneBy**
- **全権取得：findAll**

参考に、取得先DBテーブル：membertableを作成し取得結果も記載します。

```
id:1 name:山本 Gender:MALE
id:2 name:田中 Gender:FEMALE
id:3 name:木村 Gender:MALE
```

### ****Doctrine使用時****

Controller内でDoctrineを使用するにはEntityManagerを取得する必要があるので先に下記定義が必要です。

```php
$em = $this->getDoctrine()->getManager();
```

### ****PK(主キー)で取得：find()****

```php
$id = 1; 
$memberlist = $em->getRepository(member::class)->find($id);
```

取得結果(memberlist)

```php
id:1 name:山本 Gender:MALE
```

### ****条件一致するものを取得：findBy()****

```php
$Gender = MALE;
$memberlist = $em->getRepository(member::class)->findBy([ 'Gender' => $Gender, ]);
```

取得結果(memberlist)

```php
id:1 name:山本 Gender:MALE
id:3 name:木村 Gender:MALE
```

### **条件一致する1件を取得：findOneBy**

findOneByでは該当結果が複数あった場合、最初の1件を取得します。

```php
$Gender = MALE;
$memberlist = $em->getRepository(member::class)->findOneBy([ 'Gender' => $Gender, ]);
```

取得結果(memberlist)

```php
id:1 name:山本 Gender:MALE
```

### **全権取得：findAll**

```php
$memberlist = $em->getRepository(member::class)->findAll();
```

取得結果(memberlist)

```php
id:1 name:山本 Gender:MALE
id:2 name:田中 Gender:FEMALE
id:3 name:木村 Gender:MALE
```

## まとめ

- ORMを使用することでPHP内での別言語を混在させずにクエリが行える
- クエリ条件のみ変更させればよいのでSQLを知らないメンバーや開発者でも変更が容易
- SQL文のMIXやIN、NOT、JOIN句など細かい条件を指定できない為複雑なクエリには向いていない
Rails入門: ストロングパラメーターでセキュリティを強化する

## はじめに
今回は、ストロングパラメーターについて学習したことを備忘録として記事にした。

## ストロングパラメーターとは
マスアサインメント攻撃を防ぐために使われている。
ストロングパラメーターを利用することで、パラメーターから値を取得する際に取得可能なデータを指定することができる。

## マスアサインメント攻撃とは
設計者の意図に反してデータベースの複数の値を一度に更新させる攻撃のこと。
updateメソッドやnewメソッド、createメソッドなどでテーブルを更新する際にハッシュ形式のパラメータを受け取るが、これを悪用したもの。

例えば、Userモデルがname、email、adminという属性を持ち、adminは管理者フラグであり通常はユーザー自身が操作できない場合を想定する。
以下のパラメーターが送られてきたとする。

```
{ 
  user: { 
    name: 'Alice', 
    email: 'alice@example.com', 
    admin: true 
  } 
}
```
この場合に、以下のコードであれば、ユーザーに対して管理者権限を付与することが可能になってしまう。

```ruby
User.create(params[:user]) # admin属性まで一緒に更新されてしまう
```
これを防ぐために、Railsではストロングパラメータという仕組みを用いて、更新を許可するデータを指定できるようになっている。
また、上記のコードを実行しても「ActiveModel::ForbiddenAttributesError」というエラーが起きるため実際に実行することはできない。
しかし、ブラウザの検証ツールを使うことで送信する値を変更することができてしまうため、ストロングパラメーターによって更新するデータを指定することはセキュリティ上重要である。



## ストロングパラメーターの使い方
下記のデータが送信されるとする。
```
{ 
  user: { 
    name: 'Alice', 
    email: 'alice@example.com', 
    admin: true 
  } 
}
```
下記のようにストロングパラメーターを設定する
```ruby
def create
  @user = User.new(user_params)
  if @user.save
    # ...
  else
    # ...
  end
end

private

def user_params
  params.require(:user).permit(:name, :email)# ←ストロングパラメーター
end
```
privateメソッドとしてuser_paramsを作成。
requireメソッドでUserモデルを指定し、permitメソッドで許可するデータを指定している。
上記の設定によりnameとemailのみデータの更新が可能となる。


## まとめ
POSTリクエストでデータを受け取る方法を調べたところ、どうやらすトロングパラメーターという仕組みを使う必要があるとわかったので、備忘録として記事にした。ストロングパラメーターが生まれた背景も理解しておく必要があると感じた。
コンパイラ型言語とインタプリタ型言語のメリットとデメリット

## 概要
コンパイラ型言語とインタプリタ型言語について、言語選定の時のために、改めてそれぞれのメリット、デメリットについてまとめました。

### コンパイラ型言語

コンパイラ型言語は、書かれたソースコードを全て一度にコンパイルして実行可能なバイナリファイル（機械語）に変換し、それを実行する形式です。C、C++、Java、Rust、Goなどが該当します。

#### コンパイラ型言語の動作の流れ

```mermaid
graph TB;
    A[ソースコード] -->|コンパイル| B[実行可能なバイナリファイル];
    B -->|実行| C[結果の出力];
```

このプロセスでは、ソースコード（A）がまずコンパイラによって機械語に翻訳されます。この翻訳されたコードは実行可能なバイナリファイル（B）となり、これが最終的にコンピュータによって実行されます。そして結果（C）が出力されます。

#### メリット

:::note info
1. **パフォーマンス**: コンパイル時に最適化が行われ、高速な実行が可能です。
2. **エラーチェック**: コンパイル時にエラーを検出できるため、実行前に問題を見つけることができます。
3. **安全性**: 実行可能なバイナリファイルはソースコードから直接的に読み取ることができないため、一定のセキュリティが確保されます。
:::

#### デメリット

:::note alert
1. **コンパイル時間**: 大規模なプログラムではコンパイルに時間がかかる場合があります。
2. **プラットフォーム依存**: コンパイルされたバイナリファイルは特定のOSやハードウェアに依存します。それぞれの環境に対応するには、その環境用にコンパイルする必要があります。
:::

### インタプリタ型言語

インタプリタ型言語は、ソースコードを一行ずつ読み込んで即時に実行する形式です。Python、Ruby、JavaScript、PHPなどが該当します。

#### インタプリタ型言語の動作の流れ

```mermaid
graph TD;
    A[ソースコード] -->|一行ずつ解釈実行| B[結果の出力];
```

このプロセスでは、ソースコード（A）が一行ずつインタプリタによって読み込まれ、その都度解釈されて実行されます。そして結果（B）が出力されます。この方式では、プログラムの全体を先にコンパイルする必要がないため、コードの変更をすぐにテストし、フィードバックを得ることができます。

#### メリット

:::note info
1. **柔軟性**: プログラムを逐次実行するため、変更をすぐにテストし、フィードバックを得ることができます。
2. **プラットフォーム独立**: ソースコード自体がプラットフォームに依存しないため、様々な環境で実行できます。
3. **動的な機能**: 動的な型付けやリフレクションなど、プログラムの実行時に柔軟に振る舞う機能を利用できます。
:::

#### デメリット

:::note alert
1. **パフォーマンス**: コードを一行ずつ解釈して実行するため、コンパイラ型言語に比べて実行速度が遅い場合があります。
2. **エラー発見が遅い**: ソースコードの実行時に初めてエラーを検出するため、開発の途中やデバッグが困難になることがあります。
:::

これらの特性を理解することで、特定のアプリケーションや開発環境に適したプログラミング言語を選択することができます。最終的な選択は、プロジェクトの要件、開発チームのスキルセット、そして特定の言語の特性に大いに依存します。
ABC306

# ABC306
今回も参加できたので反省会します。
サーバー大変なことになってましたね。。。
今回はABC306( https://atcoder.jp/contests/abc306 )

# A
一文字ずつ、繰り返していく処理。
一行で記述するため、print文のendを忘れずに。
```diff_python
N = int(input())
S = input()
for s in S:
  print(s+s,end="")
```

# B
64桁の2進数を10進数表記に変換。
それぞれのbitを条件文で処理。
pythonだとオーバーフローをあまり気にしない部分はいい点(たまにC++などを触るとオーバーフローに対する処理を忘れているのが悪い点)。
```diff_python
A = list(map(int, input().split()))
a = 1
ans = 0
for i in A:
  if i == 1:
    ans += a
  a = a*2
print(ans)
```

# C
1,2,…,Nの数字が3つずつ含まれる配列から、2番目に出てくる位置が早い順に表記する。それぞれの数字が何回目かをカウントする配列と、答え用の配列を用意し、与えられた配列をすべて検索する。出現した数字に応じてカウントを変化させ、2回目に出た場合、答えの配列に追加していく。数字ごとに順番を抽出することも考えたが、計算量がO(3N^2)くらいになりそうだったので、O(3N)の上記の方法で実行。
```diff_python
N = int(input())
l = list(map(int, input().split()))
c_l = [0]
ans = []
for i in range(N):
  c_l.append(0)
for i in l:
  if c_l[i] == 1:
    ans.append(i)
  c_l[i] += 1
for i in ans:
  print(i, end=" ")
```
5,6行目は省略して、普通にC_l = [0]*(N+1)とかでよかったなと反省。

# D
毒で死なないように、おいしさを最高の値で出す問題。ABC303のD問題と同様の形式のDPで解けた。それぞれの料理に対して、食べる前の時点の高橋君の状態とおいしさの値をもとに次状態の値を変更していく。
```diff_python
N = int(input())
s_1 = 0
s_0 = 0
for i in range(N):
  x, y = map(int, input().split())
  if x == 1:    #毒入り
    if s_1 < s_0 + y:
      s_1 = s_0 + y
  else:         #解毒剤入り
    if s_0 < s_0 + y:
      s_0 = s_0 + y
    if s_0 < s_1 + y:
      s_0 = s_1 + y
  
print(max(s_1, s_0))
```

s_1が腹痛状態のおいしさ最高スコア、s_0が健康状態の最高スコア。料理が毒入りかを判定し、毒入りならばs_0からの遷移のみを考える。毒入りのためs_1への遷移となるが、ここでそれまでのs_1と、今回の遷移によるスコアを比較、更新する。解毒剤入りでは、s_0への遷移として同様に考える。ただ、s_0、s_1のどちらかの遷移も考えられるため、それぞれ比較する必要がある。スコアは0以下の場合も考えられるため、s_0、s_1それぞれに対し条件文を用意し更新した。
スコアを配列Sなどにすることで、S[0]やS[1]のように用いて簡略化もできそう。でも、結果毒入りか解毒剤入りかで分岐するのであんまり変わらなさそう。
else文は以下のように書けば一つで行けそう。
```diff_python
else:
    if s_0 < max(s_0, s_1) + y:
        s_0 = max(s_0, s_1) + y
```

# 反省・感想
今回は久々に時間内にDまで回答できました。とくにDは、ABC303の形式と似た形のDPで解くことができ、さっそく反省会をしている効果を感じられました。
Eにも取り組みましたが、TLEになってしまいました。解説見てもあまりピンと来ていませんが、時間があるときに考えてみたいと思います。
終盤コードテストが全くできませんでしたので、とりあえずunrateにならないことを祈ります。我々は何もできず申し訳ないですが、対応頑張っていただきたいですね。

現在レート:728 →　????
CLionで“stdio.h” not found が出たときの対処法

CLionで既存のプロジェクトを開いた時に、ヘッダーファイルやライブラリーが読み込めなくなっている時がたまにあります。
そんな時はキャッシュのリセットで解決する場合があります。

# 対処法
ツールバーから"ツール"→"CMake"→"Cmakeキャッシュのリセットとプロジェクトのリロード"を選択
Python3エンジニア基礎試験_模擬試験の復習⑨

# クリーンアップ動作について

<font color="Red">**クリーンアップ動作**</font>とは、システムリソースを管理する動作を指します。
クリーンアップ動作は、基本的に例外処理のあとに定義することが多く、<font color="Red">**finally節**</font>を使って記述します。

https://docs.python.org/ja/3/reference/compound_stmts.html#finally

※例外のクラス階層について

https://docs.python.org/ja/3/library/exceptions.html#exception-hierarchy

```clean_up.py
try:
    例外が起きそうなコード
except 例外の型 as 変数名:
    特定の例外が起きた場合に実行するコード
else:
    特定の例外が起きなかった場合に実行するコード
finally:
    常に実行するコード
```

# 問題

■ 次の実行結果を求めよ。

```try.py
try:
    raise KeyboardInterrupt
except:
    print('Goodbye, world!')
# Goodbye, world!
```

● 解説

1. `try:`ブロックが開始されます。
1. `raise KeyboardInterrupt`が実行されます。これにより、`KeyboardInterrupt`という種類の例外が発生します。
1. `except:`ブロックに移動します。ここでは例外の種類を指定していませんが、どの種類の例外でもキャッチされます。
1. `print('Goodbye, world!')`が実行されます。この行では、`"Goodbye, world!"`というメッセージが表示されます

※`KeyboardInterrupt`が発生しましたが、それに対応する具体的な例外処理は行われていません。そのため、`except`ブロック内のコードが実行され、`"Goodbye, world!"`というメッセージが表示されます。

※なお、`except`ブロックで例外の種類を指定していないため、どの例外でもキャッチされます。ただし、一般的には特定の例外をキャッチするように指定することが推奨されます。

■ 次の実行結果を求めよ。

```with.py
クリーンアップ動作を定義してあるオブジェクトに対して、
クリーンアップ動作を保証した形で利用するための構文で適切なものはどれか。
# with
```
【Flutter】AdMobの実装(iOSのみ、バナー広告)

FlutterでのAdMob広告表示方法。
(AdMob自体の登録については触れない)

これだけあれば最低限の実行はできる。

# pubspec.yaml の修正

https://pub.dev/packages/google_mobile_ads

を使用する。

```yaml
dependencies:
  google_mobile_ads: ^3.0.0
```

(バージョンはその時点の最新等に合わせてよしなに設定する)

# ios/Runner/Info.plist の修正

iOS用のアプリIDを登録する。
(下記はテスト用のIDなので実際は払い出されたIDを登録する)

```
    <string>ca-app-pub-3940256099942544~1458002511</string>
    <key>SKAdNetworkItems</key>
```

:warning: 「pubspec.yaml」にパッケージを追加して、ここに追加しないまま実行するとクラッシュするので気をつける


# 初期化

main()で、初期化する

```dart
import 'package:google_mobile_ads/google_mobile_ads.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  // 広告を初期化
  MobileAds.instance.initialize();

  runApp(const MyApp());
}
```

# 広告をロードする

バナー広告のテスト用IDなので実際は払い出されたIDを登録する

```dart
void _loadAd() {
  _bannerAd = BannerAd(
    adUnitId: 'ca-app-pub-3940256099942544/2934735716',
    size: AdSize.banner,
    request: const AdRequest(),
    listener: const BannerAdListener(),
  );

  _bannerAd!.load();
}
```

# 広告を表示する

:warning: サイズを指定しないと落ちたので指定する

```dart
SizedBox(
  width: _bannerAd!.size.width.toDouble(),
  height: _bannerAd!.size.height.toDouble(),
  child: AdWidget(ad: _bannerAd!),
),
```

# 最後に開放

```dart
@override
void dispose() {
  _bannerAd?.dispose();

  super.dispose();
}
```
[AWS Q&A 365][ECS]AWSのよくある問題の毎日5選 #81

# 1. AWS Fargateのタスクメタデータエンドポイントとは何ですか？
答え: タスクメタデータエンドポイントは、AWS Fargateで実行中のタスクのメタデータへのアクセスを提供するサービスです。これは、タスクのIPアドレス、コンテナID、環境変数などの情報を取得するために使用できます。

# 2. AWS Fargateでタスクメタデータエンドポイントにどのようにアクセスしますか？
答え: タスクメタデータエンドポイントにアクセスするには、タスクのIPアドレスとポート80にHTTP GETリクエストを送る必要があります。また、AWS CLIやSDKを使用してメタデータを取得することも可能です。

# 3. タスクメタデータエンドポイントからどのような情報を取得できますか？
答え: タスクメタデータエンドポイントからは、タスクID、IPアドレス、コンテナID、環境変数、ネットワーク設定など、様々なタイプのメタデータを取得することができます。

# 4. 実行中のタスクを修正するためにタスクメタデータエンドポイントを使用できますか？
答え: いいえ、タスクメタデータエンドポイントは読み取り専用であり、実行中のタスクを修正するためには使用できません。これはタスクに関する情報を取得するためだけのものです。

# 5. タスクメタデータエンドポイントはすべてのAWS地域で利用可能ですか？
答え: はい、タスクメタデータエンドポイントはFargateがサポートされているすべてのAWS地域で利用可能です。ただし、エンドポイントのURLは地域ごとに異なる可能性があるため、正しいURLを確認するためにはAWSのドキュメンテーションをチェックするべきです。
[AWS Q&A 365][ECS]Daily Five Common Questions #81

# 1. What is Task Metadata Endpoint in AWS Fargate? 
Answer: Task Metadata Endpoint is a service that provides access to the metadata of a running task in AWS Fargate. It can be used to retrieve information about the task, such as its IP address, container ID, and environment variables. 

# 2. How can I access the Task Metadata Endpoint in AWS Fargate? 
Answer: To access the Task Metadata Endpoint, you need to make an HTTP GET request to the IP address of the task and port 80. You can also use the AWS CLI or SDKs to retrieve the metadata. 

# 3. What kind of information can I retrieve from the Task Metadata Endpoint? 
Answer: You can retrieve various types of metadata from the Task Metadata Endpoint, such as the task ID, IP address, container ID, environment variables, and network settings. 

# 4. Can I use the Task Metadata Endpoint to modify the running task? 
Answer: No, the Task Metadata Endpoint is read-only and cannot be used to modify the running task. It is only intended for retrieving information about the task. 

# 5. Is the Task Metadata Endpoint available in all AWS regions? 
Answer: Yes, the Task Metadata Endpoint is available in all AWS regions where Fargate is supported. However, the endpoint URL may be different for each region, so you should check the AWS documentation for the correct URL.
Flutter環境構築メモ

# 環境構築
## Flutter SDK ダウンロード
https://docs.flutter.dev/get-started/install/windows

上記からダウンロードしたSDKファイルを所定のフォルダへ展開。
環境変数のPathを通しておく。

## Anroid Studio ダウンロード＆設定
https://developer.android.com/studio

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25184/6958904b-7278-2fca-2f80-5851389a886e.png)

ガイドに従ってインストールしていく。
基本的な選択肢はデフォルトで問題ないようだ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25184/0a7165cc-753d-52cb-497e-e42d69345907.png)


2箇所、ライセンスをAgreeしてFinish

無事にインストール完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25184/b972f2de-4c92-6834-5c7d-2deb48893eb7.png)

FlutterのPluginをインストールする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25184/9efbed85-48fd-b3df-c199-15651219bdc2.png)

Install過程でDartもInsutallするか聞かれるのでInstallを選択する。


ProjectsからMoreAction。SDK Managerを開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25184/ef823973-beed-d422-54d9-d43cb2af9ad4.png)

Android SDK Command-line Tools をインストールする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25184/04886354-a810-0c0d-1912-23c5ca00dfdf.png)

コマンドプロンプトで
```
>flutter doctor --android-licenses
```
と打ってライセンスを確認し、最後に

```
>flutter doctor
```
ですべてチェックが完了すればOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25184/fb7b673d-4148-321e-7d79-09d33f5d5cdc.png)
Shiny WidgetをTypeScript+webpackで作成する際のセットアップ

# 概要

RShinyで使うWidgetを作成する際、デフォルトのテンプレートではTypeScriptを利用できないので、利用可能にするまでの設定を備忘録的に書き残します。

# 手順

## packer::scaffold_widgetを実行しwebpack管理のテンプレートを作成する

webpackを利用すると最終的なJavaScript実行ファイルを一つにまとめられます。
これを利用したテンプレート作成ライブラリであるpackerを利用して必要なファイルを作成します。

```R
# 必要なパッケージのインストール
install.packages("usethis")
install.packages("packer")

# テンプレートの作成(ライブラリ名は適宜読み替えてください)
usethis::create_package("playground")
packer::scaffold_widget("play")
```
## TypeScript関連のモジュールのインストール

TypeScriptを実行するにあたって必要になるモジュールをコマンドライン上でインストールします。(nodeをインストールしている必要あり)

```
npm i -D typescript @types/node ts-loader
```

## tsconfig.jsonファイルの作成

Typscript用の設定ファイルを作成します。
これで晴れてTypeScriptの世界になります。

```
npx tsc --init
```

## 各フォルダとファイルの名称変更

js用に出力されたフォルダとファイルをts用に変更していきます。

- srcjsフォルダ　→　srctsフォルダ
- srcts/modeles/header.js　→　srcts/modeles/header.ts
- srcts/widgets/play.js　→　srcts/widgets/play.ts
- srcts/index.js → srcts/index.ts

## configファイルの修正

packerで出力された構造だとsrcts/configにwebpack用の設定が書かれていますのでこれを修正します。
entrypointの修正とloaderの情報の追記を行います。

```json: srcts/config/entry_points.json
{
  "play": "./srcts/widgets/play.ts"
}
```

```json: srcts/config/loaders.json
[
    {
        "test": "\\.tsx?$",
        "use": [
          {"loader": "ts-loader"}
        ]
    }
]
```

## webpack.common.jsの修正

先のconfigファイル群のpathが変わっていると思いますので修正します。

```js:webpack.common.js
var outputPathFile = './srcts/config/output_path.json',
    entryPointsFile = './srcts/config/entry_points.json',
    externalsFile = './srcts/config/externals.json',
    miscFile = './srcts/config/misc.json',
    loadersFile = './srcts/config/loaders.json';
```


## 外部ライブラリの型情報の追加

Shinyから使う場合、HTMLWidgetのJavaScriptライブラリは外部ライブラリ(srcts/config/externals.json内記載)として読み込まれるので型情報がありません。
そのままだとコンパイルエラーになるので、srcts/types/global.d.tsを作成してHTMLWidgetの型情報を書き込みます。

```ts:srcts/types/global.d.ts
declare namespace HTMLWidgets {
  interface Widget {
    name: string;
    type: string;
    factory: (el: HTMLElement, width: number, height: number) => {
      renderValue: (x: any) => void;
      resize: (width: number, height: number) => void;
    };
  }
  function widget(w: Widget): void;
}
```

## 各ファイルの修正

そのままだとIDE上(e.g. VSCode)でエラーが出ていると思いますので修正します。
この辺りは、TypeScriptの型付けの威力を享受できているからこそのエラーになります。

### インポート先の修正

```ts: srcts/widgets/play.ts
// heder.jsをheaderに修正
import { asHeader } from '../modules/header'; 
```

### 型情報の追記

```ts:srcts/modules/header.ts
const asHeader = (x: {message: string}) => {
  return '<h1>' + x.message + '</h1>';
}
```

## トランスパイル&実行

### トランスパイル

以下のコマンドで必要なjsファイルをトランスパイル出来たら成功です。
```
npm run development
```

### Rでの実行

Rでも実行できることを確認してください。

```
devtools::load_all()
play("This is a widget!")
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158368/2b57fad9-2375-3b1b-37a3-757297762373.png)

これでセットアップが終わりましたので、適宜TypeScriptで好きなライブラリをインストールして利用してください。


# 参考

https://book.javascript-for-r.com/widgets-first.html

https://book.javascript-for-r.com/packer-overview.html

https://www.qiushiyan.dev/posts/htmlwidgets-ts/
【SwiftUI】クロマキー合成を行う

# はじめに
iOS17で追加された機能を使用してマクロキー合成ができるようになったみたいなので試してみます！

https://twitter.com/heestand_xyz/status/1666723261168898049

ライブラリはこちらです！！

https://github.com/heestand-xyz/MetalUI

# 素材
ネットで拾ったジョイマン高木を宇宙に浮かべてみます
|ジョイマン高木|宇宙|
|-|-|
|![EyRKqz6UYAQhI4p.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/56ac9514-4669-5386-34df-08482b4c2755.jpeg)|![utyuu.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/f7acb2e9-d32b-83a9-8e4e-824a0048b144.jpeg)|

# 実装
```swift
import SwiftUI
import MetalUI

struct ContentView: View {
    var body: some View {
        Image("joyman")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .chromaKey(color: .init(red: 0, green: 1, blue: 0))
            .background(Image("space"))
    }
}
```

ジョイマン高木が宇宙に浮かびました！！
![simulator_screenshot_8560B712-A2D4-47D7-843D-205C158EDF5D.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/490678c3-5147-6c77-7e10-e352e89c1e80.png)

# おわり
Metal Shader勉強しないといけなそうですねー
Rails 7.0で、renderを使うとエラーが出た

## はじめに
Railsの学習をProgate（Rails 5）から始めました。その後に自分で環境構築をしたのですが、Rails 7.0にした影響でいろんなところで詰まりました。今回はその中から、アクション内でrenderを使うとエラーになる問題について紹介します。

`Rails : 7.0.5`

## エラーの再現

簡単なTodoアプリを想定します。
タスクが未入力のときに自分で設定したエラーメッセージを表示したいときは、次のように`render`を使って、アクション内で定義した変数をViewで使用すればいいと思いました。


```ruby:routes.rb
  get "todos/new", to: "todos#new"
  post "todos/create", to: "todos#create"
```

```erb:new.html.erb
  <% if @error_message %>
    <%= @error_message %>
  <% end %>

  <%= form_tag("/todos/create") do %>
  <form>
    <input type="text" placeholder="タスクを入力する" name="title">
    <input type="submit" value="保存する">
  </form>
  <% end %>
```

```ruby:todos_controller.rb
def create
  @todo = Todo.new(title: params[:title])
  if @todo.save
    redirect_to("/todos")
  else
    @error_message = "タスクを入力してください"
    render :new
  end
end
```

しかし次のようなエラーが出てしまいます。　　
`Error: Form responses must redirect to another location`
自分で設定したエラーメッセージも表示されません。
must redirect とあるのでもしかすると redirect_to の挙動が変わったのかと思い試してみても、やはり`@error_message`は引き継がれませんでした。　　

## 解決策　　

調べた結果、こちら[^1]からのこちら[^2]に行き着き、次のようにstatusを指定すれば想定通りにエラーメッセージを表示することができました。　　

```ruby:todos_controller.rb  
def create
  @todo = Todo.new(title: params[:title])
  if @todo.save
    redirect_to("/todos")
  else
    @error_message = "タスクを入力してください"
    # status: 422 を追記
    render :new, status: 422
  end
end
```
同様にstatusに`500`を指定してもメッセージが表示され、コンソール上ではステータスの意味通りのエラーが出ていました。

## 原因　

原因としてはリンク先[^2]にあるように、ステータスにより挙動が違うことがTurboの仕様だから、ということになるようです。Turboがデフォルトで組み込まれたのはRails 7.0以降[^3]なので、statusが必要なのもRails 7.0以降の話なのでしょう。Turboについてよくわかっていませんが…




[^1]: https://stackoverflow.com/questions/70400958/error-form-responses-must-redirect-to-another-location
[^2]: https://turbo.hotwired.dev/handbook/drive#redirecting-after-a-form-submission
[^3]: https://github.com/hotwired/turbo-rails
すごく基本的な事でつまづいた話(GitHub Desktopの話)

今日から出来る限り学習した内容を記事にしていこうと思います。
特に意味はありません。
私が書くのが好きな人間なのでこの様な事をしています。

さて、早速ですが、GitHubDesktopをダウンロードして使っていたのですが
Public Repositryボタンに気づかずに、変更したファイルの内容がアップロードされないという問題が発生しました。

凄くアホな話ですが、

------------------------------------------------------------
On branch main
Untracked files:
(use "git add <file>..." to include in what will be committed)
   行省略
nothing added to commit but untracke files present ( use "git add" to track)
------------------------------------------------------------

こういうメッセージが出たとき、一生懸命gitの取得に奔走しましたが

![20230617gitへのコミット.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1059207/b5d94fa2-cb68-f08b-7f29-5d03f04b611e.jpeg)

そもそも、右上の「Publish repository」をクリックしたあと、commitをクリックして、また右上に出てくる「Push origin」を押しておけば良かったって落ちでした。

私と同じ様な間違いをした人向けにこの記事を残します。
素数ファイル作成プログラム

## 機能説明

数値を入力します。
素数出力ボタンを押下すると素数がテキストボックスに出力されます。
出力先フォルダを選択して素数ファイルを作成します。

## プログラム画像
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2759758/d0e19fef-4359-7070-3647-4b8c454b3491.png)

## 入力画像
![2023-06-18 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2759758/97dfa9ad-4c4e-2836-4fd3-72efd023fd82.png)

### 製造プログラム
```python
import tkinter
import os
from tkinter import filedialog
import pathlib


def prime_numberv1():
    """
    Args:
        num (int): 引数で数値が渡される

    Returns:
        _type_: listで素数が返って来る。
    """
    num = int(txt_1.get())
    primes = [] # 空のリストを準備する
    for i in range(2, num+1):
        for j in range(2, i):
            if i % j == 0: # 0で割り切れた場合は素数ではない。
                break
        else:
            primes.append(i)
    txt_2.delete(0, tkinter.END)
    txt_2.insert(0, primes)
def folder_click():
    dir = 'C:\\'
    fld = filedialog.askdirectory(initialdir = dir)
    txt_3.delete(0, tkinter.END) # 削除の処理 
    txt_3.insert(0,fld)
def create_text():
    file_name = '素数'
    path = txt_3.get() +'/'+ file_name +'.txt' # 選択したフォルダのパスを受け取る。
    f = open(path, 'w', encoding='utf-8')
    f.write(txt_2.get())
    f.close()
# 画面作成
root = tkinter.Tk()
root.geometry('450x350')
root.title('素数判定')
root.configure(bg='SpringGreen2') # 色の設定

# ラベル
lbl_1 = tkinter.Label(text='数値入力')
lbl_1.place(x=80, y=120)

# ラベル
lbl_2 = tkinter.Label(text='素数')
lbl_2.place(x=80, y=150)

# ラベル
lbl_2 = tkinter.Label(text='出力先フォルダ')
lbl_2.place(x=80, y=180)

# テキストボックス
txt_1 = tkinter.Entry(width=10)
txt_1.place(x=160, y=120)

# テキストボックス
txt_2 = tkinter.Entry(width=30)
txt_2.place(x=160, y=150)

txt_3 = tkinter.Entry(width=20)
txt_3.place(x=160, y=180)

btn = tkinter.Button(root, text='素数出力', command=prime_numberv1) # 素数を出力
btn.place(x=150, y=210)

btn = tkinter.Button(root, text='フォルダ選択', command=folder_click) # フォルダ選択ボタン
btn.place(x=220, y=210)

btn = tkinter.Button(root, text='ファイル出力', command=create_text) # ファイル出力ボタン
btn.place(x=220, y=240)

root.mainloop()
```
### 実際に出力されたテキストファイル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2759758/05e4fd4d-fe77-67b1-f4ae-b3409531c974.png)


以上になります。
Next.jsをPM2を使ってVPS上にデプロイしてみた

# この記事について
この記事はインフラ初心者がWebページをVPS上で公開したい！って思ってやったことを備忘録として書き残したものです。素人が書いているため情報の信憑性は保証しません。詳細は各自で調べながらやることをおすすめします。記事のとおりにやっておかしなことになっても責任は取れませんのでご了承ください。

# 事前準備
VPS上でgithubとのSSHの設定を済ませておいてください。

# Nodeのインストール
VPS上にnodeをインストールします。普通に[nodeの公式ページ](https://nodejs.org/en)からダウンロードしてもいいですが、今回はバージョン管理がしやすいよう[nodebrew](https://github.com/hokaccha/nodebrew)を使用することにします。
```
curl -L git.io/nodebrew | perl - setup
```

そしてこれを`.zshrc`なり`.bashrc`に追記↓
```
export PATH=$HOME/.nodebrew/current/bin:$PATH
```
リロード↓
```
source ~/.zshrc
```

お好きなバージョンのnodeをインストールします。
```
nodebrew install stable
nodebrew use stable
```
`node -v`で正しくインストールされていることを確認します。

私は普段yarnを使用しているので
```
npm install -g yarn
```
でyarnを入れます。

# 起動
pm2をインストール
```
npm install -g pm2
```
pm2の使い方についてはこちらのサイトが参考になります。
https://qiita.com/zaburo/items/70a83aee188d45b39e58

`yarn build`を実行して、以下のコマンドで起動
```
pm2 start npm --name "app-name" -- start
```
以下のコマンドで再起動/停止できます。
```
pm2 restart app-name # 再起動
pm2 delete app-name # 停止
```

# nginxの設定
`/etc/nginx/conf.d/next.conf`に以下を記述。ただしlocalhostのポート番号についてはpackage.jsonの`scripts.start`のところに書いたポート番号と一致するようにしてください。
```
server {
        listen 80;
        server_name example.com;

        location / {
                proxy_pass http://localhost:4400;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }
}
```
設定したらnginxを再起動
```
sudo systemctl nginx restart
```

これでデプロイ完了です。

# 注意
本番環境で`next/image`を使うには`sharp`というパッケージが必要らしい。
https://nextjs.org/docs/messages/sharp-missing-in-production

ローカルで
```
yarn add sharp
```
としてsharpを予めインストールした状態でデプロイしましょう。

# 参考資料
How to Deploy NextJS App on a Custom VPS
https://medium.com/@ranjandsingh/how-to-deploy-nextjs-app-on-a-custom-vps-56269748870f

Deploy Multiple NodeJS Apps on single Server with SSL, Nginx, PM2 - Part 1
https://dev.to/ranjan/deploy-multiple-nodejs-apps-on-single-server-with-ssl-nginx-pm2-part-1-4841

PM2の簡単な使い方と環境によるアプリ名の変更など
https://qiita.com/zaburo/items/70a83aee188d45b39e58
RECOROKUを使って気づいたコロナ禍が産んだ「壁」の存在

## この記事は何
先日↓の記事の取材にあたり、[RECOROKU](https://recoroku.com/)を利用しました。

https://zine.qiita.com/interview/202306-recoroku/

取材という形で使わせていただいたものの、実際に気づきが多く、記事にしておきたいと思ったので記事としてまとめました。
今回はRECOROKUを使う中で気づいた、コロナ禍が生んだ「壁」の存在についてまとめます。

## コロナ禍=リモートワーク前提の時代への突入
2020年に入り、コロナの存在によって多くの企業が働き方をドラスティックに変える必要があったのは記憶に新しいと思います。
現在も以前の生活には戻りつつあるものの、いわゆるハイブリッド型という新しい形の働き方がメジャーになりつつあります。

このような働き方の変化は、コミュニケーションに大きな変化をもたらしたと考えています。

## リモートワーク前提の働き方が生んだコミュニケーションの変化
フル出社する働き方は、他職種の取り組んでいることや全体で進んでいることなどが、「じんわり」と伝わりやすい特性を持っていたと思っています。
他の人が話している内容がオフィスで聞こえたり、ランチや廊下でのすれ違いでの雑談で「雑に」情報伝達がされやすい環境でした。
リモートワークの場合、コミュニケーションは基本的にオンラインミーティングやテキストコミュニケーションになります。常にビデオを同じチームで繋いでいたとしても、他職種の声は聞こえてきません。このように声の届く範囲やタイミングが「デジタル化」され、明確に教会が区切られているのが今の一般的なリモートワークの環境下の特性だと感じています。これを僕は取材記事の中でも「壁」と表現しています。
情報は人をホップしながら「伝搬」するものだと考えています。何かの会話を起点にそれが人に伝わり、またその人が誰かに伝え、という流れを通してだんだんと浸透していくものです。
「壁」の存在により、この流れが生みづらくなっていることによって、以前にはなかった様々な課題や気にしないといけないことが生まれていると考えています。

- 他部署の取り組んでいることなどがわからない
    - やっていることがテキストなどでしか残っていない
- それぞれお互いが何をやっているかわからない
    - 何をやっているかわからないから声をかけづらい
- 能動的に行動しなければ会話が発生しない
    - 分報チャンネルなどを使っても動かない　
- 色々決定の細かい意図やニュアンスが伝わらない
- etc

これらの課題が慢性化すると、組織の密度は下がり続け、自己組織化とは逆行する状態へと進んでいきます。

## 壁を破壊することで、リモートワークはオフィス出社を超える働き方になれる
リモートワークの時代に入り、コミュニケーションに「壁」が生まれたと前項で説明しましたが、逆にリモートワークが主になることで得られた恩恵もたくさんあるはずです。
つまり、この壁を破壊することができれば、オフィス出社していた時代を上回る形で組織を前に進めることが可能になるはずです。

## リモートワークでのコミュニケーションをアナログに近づける

リモートワーク時代の中で、以前のオフィス出社していた時代と同じスピード感の情報伝達を実現するためには「デジタル」化したコミュニケーションを「アナログ」の体験に近づけていくほかありません。
アナログに近い体験とはどのような状態なのでしょうか？
僕は一つのソリューションとして以下のような形があるのではないか、と考えています。

- コミュニケーションを全てログとして残す
    - 議事録を残すではなく、文字通り「テキストコミュニケーション」「会話」全てをログとして残す
    - どれを残すのかではなく、全てのログを残せる状態にする
- ログとして残ったコミュニケーションを常にフロー情報として全員が見れる場所で公開し続ける
    - 手に取る手間とできるだけ下げ、できるだけ多くの人が手に取る状態を作る


この二つを実現することで、情報を欠損しない形で全ての人へ情報を浸透させやすい状態を作ることができそうです。
それによりリモートワークの環境でも情報伝達の「壁」を破壊もしくは薄くし、リモートワークの恩恵を享受しながら密度のある組織を維持し続けることができるようになるのではないでしょうか？

## まとめ
RECOROKUとは、まさにここまで書いた情報伝達の「壁」を破壊するためのツールだと感じています。
ここまで書いたようなところに課題を感じている組織や会社にはぜひ一度使ってみることをお勧めします。

https://recoroku.com/
Vimのコマンドを練習してみた【vimtutor】

## はじめに
・私はvimを今回で初めて触りました。vimtutorというチュートリアルがあるのでそれを進めていき勉強していくことにしました！(自分自身の振り返れるようにメモしています。)

## vimtutorの始め方
ターミナルで下記を打つことでチュートリアルが始まります！
~~~
$ vimtutor
~~~

「チュートリアル画像」
![Vim](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/949345/ca12bfb8-a39d-130d-8163-02c37a341e7a.png)
↓プログラミングを勉強する上で大事！
![Vim](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/949345/43ca3f20-a9f3-cbd7-76cc-b4b285af80ad.png)

## Vimコマンド一覧集
・vimtuorで使用したコマンドを簡単に解説します。一部使用していないコマンドもあるかと思いますがご了承ください。

## ノーマルモード
Vimのコマンドを使用するにはesc(エスケープ)でノーマルモードになります。
今何のモードか分からなくなった際はescを押すのがいいと思います！！

## カーソル移動
カーソル移動にはh,j,k,lを使用します(矢印でも可能)
```k```は↑に移動
```j```は↓に移動
```l```は→に移動
```h```は←に移動

## 保存と終了
ファイルの保存には```:w```、ファイルを閉じるには```:q```を使います。

```:w```は保存する
```:q```は閉じる
```:wq```は保存して閉じる
```:q!```は保存しないで閉じる
```:wファイル名```ファイル名で保存する

## テキスト編集について

```x```は1文字削除する
```r```は1文字置換、```r```入力後1文字だけ入力
```i```はカーソル位置から挿入モードになる
```I```は行の先頭から挿入モードになる
```a```はカーソルの後ろから挿入モードになる
```A```は行末から挿入モードになる
```o```はカーソルの下に行を追加し挿入モードにする
```O```はカーソルの上に行を追加し挿入モードにする

## テキスト削除
```d```が削除コマンドです
```dw```でカーソル位置から単語の末尾まで削除
```d$```でカーソル位置から行の末尾まで削除
```dd```で行を削除いたします。

## より多く削除するカウント
・数字を入れることで繰り返し行うことができます。
```3dw```で3単語を削除することができます。
```5j```で5行下に移動、```3x```なら3文字削除する

## コピー
```y```でコピーできます。(yはヤンクの略らしいです)
削除と同じようにモーションで範囲を指定したり、カウントで回数を指定も可能
```yy```で行もコピー可能です。

## 貼り付け
```p```で貼り付けです。削除やコピーと同じくいろんなことができます。

## 変更
```c```で変更です。
削除みたいなものですが、削除後に挿入モードに入ります。

## 元に戻す、やり直し

```u```で元に戻す
```CTRL-r```やり直し
```U```で行全体を戻す

## ファイル情報を表示
```CTRL-g```でファイルの情報が最下部にでます。

## 画面スクロール
```CTRL-B```はBackの略で全画面上にスクロールする
```CTRL-F```はForwardの略で全画面下にスクロールする
```CTRL-U```はUpの略で半画面上にスクロールする
```CTRL-D```はDownの略で半画面下にスクロールする

## 検索

文字検索です。正規表現検索を可能です。
```/検索文字```で下側に検索

```?検索文字```は上側に検索

```n```は検索している時に、更に下に検索する

```N```は検索している時に更に上に検索する
```/```で検索を始めても```N```を押すと左下が?になっています

```CTRL-o```は前の位置に移動する
```CTRL-i```は次の位置に移動する
```%```対応する(),{},[]を検索←括弧を検索できる

## 置換
検索して置換することができる。正規表現も使える

```:s/置換前/置換後```でカーソルの行で見つかったもののみ置換
```:s/置換前/置換後/g```で見つかった行に大して行全体置換
```#,#s/置換前/置換後/g```で```#,#```で置き換える範囲の開始と終了の行番号を指定
```:%s/置換前/置換後/gc```でファイル全体で見つかった物を確認しながら置換する

## コマンド
```:!```コマンドでコマンドが打てます。
例えば```:!ls```で現在のフォルダのファイルを見ることができます。

## 選択モード
```v```で選択モードに移行します。
左下には```---ビジュアル```と出ます。
コピーや削除などができます。

## ファイル挿入
```:rファイル名```でファイルの中身を挿入できます。

## オプション
```:set オプション```でオプションを設定できます。
```:se```でも可能
```:set all```で設定一覧が出ます。
```:set ic```で検索時に大文字小文字を区別しない
```:set is```で検索フレーズにマッチしている部分を表示する
```:set hls```でマッチしている場所を強調する

## ヘルプ
```:help```でヘルプが出ます。```:q```で閉じます。
```CTRL-w```でヘルプウィンドゥに移動できます。

## 起動スクリプト
ホームディレクトリにある```.vimrc```を編集することで色々な設定ができます。
※チュートリアルには載っていない情報でした。

## コマンド補完
コマンドの始まりをタイプしてから```CTRL-d```でコマンドの補完ができます。

## チュートリアルをやってみて感想
・チュートリアルをするだけでもかなりVimの操作はできるようになるのではないか？と感じました。僕がいた会社では、実務でも使っている人は少ないのでもしかしたら「私はVimmer！」と胸を張って言えるかも知れません。笑
何はともあれ、コツコツとチュートリアルすれば使えるようになると感じました。
表示順を並び替える

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457284/55e9cc9f-57da-3455-0e0b-8f112c8074d8.png)
１：レコードの取得順を変える
ツイートを並び替える方法は、表示のときに順番を変えるのではなく、情報を取得するタイミングで先に並び替えます。

２：orderオーダーメソッド
モデルが使用できる、ActiveRecordメソッドの1つです。
orderメソッドは、テーブルから取得してきた複数のレコード情報を持つインスタンスの、並び順を変更するメソッドです。

引数には、"並び替えの基準となるカラム名 並び順"のように「並び替えの基準となるカラム名」と「並び順」を半角スペースで繋げて指定します。

orderメソッドは、複数のレコード情報を取得する文に続けて以下のように使用します。

【例】
インスタンス = モデル名.order("並び替えの基準となるカラム名 並び順")

並び順にはそれぞれAscending/Descendingの略でASC（昇順）とDESC（降順）の2種類があります。
①並び順：ASC（昇順）	内容：小さいものから大きいものになる。古いものから新しいのものになる。
②並び順：DESC（降順）　内容：ASCの反対。大きいものから小さいものになる。新しいものから古いものになる。

記述例：下記のようにorderメソッドの引数として("created_at DESC")とすれば、レコードは降順に並び替えられます。
app/controllers/tweets_controller.rb

class TweetsController < ApplicationController
 　 before_action :set_tweet, only: [:edit, :show]
  　before_action :move_to_index, except: [:index, :show]

　  def index
 　　　   @tweets = Tweet.includes(:user).order("created_at DESC")
 　 end
end
12ステップで作る組込みOS自作入門_環境構築でつまずいた点

**※2023/6/17時点の情報です**

### 12ステップで作る組込みOS自作入門について
- H8/3069Fというマイコンボードで、著者の「KOZOS」という組み込みOSをフルスクラッチで自作していく本
    - 環境構築が難しいとされている。

https://amzn.asia/d/4shuj4R

- 基本的にこちらの方の手順を参考に環境構築を行った。

https://to-son.net/2020/04/16/12step-wsl-environment/

### 開発環境
- Windows11
- WSL2 Ubuntu 18.04LTS
- binutils 2.19.1
- gcc 3.4.6
- kz_h8write 0.2.1

https://ja.osdn.net/projects/kz-h8write/

### 参考元記事にはないが実施したこと
- WSL2の環境からUSB変換のシリアルケーブルを認識させるため、WSL2の環境にUSBを認識させた（＝アタッチさせた）。
    - アタッチの方法は下記を参考にした。

https://qiita.com/KMNMKT/items/ae0e76a3e420b3ca16e6

### 発生した問題
- Makeを実施し、コンパイルはエラーなし
- H8/3069FへのROM書き込みで失敗
    - Bitrate sequence failed. (code=0x04)
```
** wsl2 **

$ ../../kz_h8write-v0.2.1/PackageFiles/src/kz_h8write -3069 -f20 kzload.mot /dev/ttyS1
=================================================
 H8/3069F Flash Writer for KOZOS (Version 0.2.1)
 Copyright(C) 2011-2012 Shinichiro Nakamura
=================================================
Bitrate sequence failed. (code=0x04)
```

### 顛末
- **使用しているシリアルケーブルがWindows11と相性が悪そう**
    - PL2303TA DO NOT SUPPROT WINDOWS 11 OR LATER, PLEASE CONTACT YOUR SUPPLIER」
- 使っていたものＵＳＢシリアル変換ケーブル　グレー色

https://akizukidenshi.com/catalog/g/gM-02746/

```
** powershell **

usbipd wsl list
BUSID  VID:PID    DEVICE                                                        STATE
4-2    067b:2303  PL2303TA DO NOT SUPPORT WINDOWS 11 OR LATER, PLEASE CONTA...  Attached - Ubuntu-18.04
```

- 家にあった別のシリアル変換ケーブルで書き込めるようになった。
    - BUFFALO BCUSRC0610BS USB Serial Converter Cable, Black Skeleton, 3.3 ft 

https://amzn.asia/d/6P0R6f4

- 別の方は古いデバイスドライバを適用することでこの問題を回避されている。

 https://qiita.com/nekoshark02/items/a5a95e732fcd3003dede

- 是正後
```
** wsl2 **

~/12step/src/01/bootload$ make write
../../kz_h8write-v0.2.1/PackageFiles/src/kz_h8write -3069 -f20 kzload.mot /dev/ttyUSB0
=================================================
 H8/3069F Flash Writer for KOZOS (Version 0.2.1)
 Copyright(C) 2011-2012 Shinichiro Nakamura
=================================================
Bitrate sequence: Done.
Inquiry device: Done.
Select device: Done.
Inquiry clock mode: Done.
Select clock mode: Done.
Select bitrate: Done.
Waiting for erase done:..........
Programming:.....
Program: Done.
Complete.
```

- Windowsのputtyからシリアル通信させるため、いったんWSL2からUSBをデタッチする。
    - 本ではteratermでシリアル通信する方法が記載されているが、使い慣れたputtyを今回は使用
    
```
** powershell **

> usbipd.exe wsl attach -d Ubuntu-18.04 --busid 4-2
```


- Hello World
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2450397/9b9a40a0-7980-f7d6-eaaf-ee76ddea3890.png)


- 鬼門の環境構築を乗り越えることができてよかった
    - 所要時間: 2hほど
---
最新トレンドも逃さない！Qiita人気記事で身につけるIT素養話

# はじめに

個人ブログを持っている都合でQiitaにてアウトプットをしたことは無かったものの、同プラットフォームの記事には大変お世話になっています。

そんな中で”Qiita Engineer Festa 2023"にて”はじめての記事を投稿"というQiita運営企画を発見したので、Qiitaに触れていて感じていることを記事にしてみました。

# 2023年度のトレンドはChatGPT

私は毎朝Qiitaのトレンド記事をチェックし、一通りの記事に目を通すようにしています。そして最近の気づきとしては「ChatGPT」をテーマにした記事が大量にあること。

https://twitter.com/yryrse/status/1661516965276680194

体感的には2023年3月あたりから爆発したように感じていて、実際にQiitaの人気記事ランキングTop10を毎朝8時に観測した際のタグ数を月毎に集計してみました。

2023年1月はTop3にいませんが
- 36,初心者 
- 32,JavaScript
- 30,Python

2023年2月にはTop3に登場して
- 51,Python
- 30,初心者
- 26,ChatGPT

2023年3月には集計対象の310記事（10記事x31日）のうち108記事がChatGPT関連という驚異的なブーム状態。
- 108,ChatGPT
- 38,Python
- 36,OpenAI

そりゃ、門外漢の私もChatGPTについての知識が溜まっていくはずです...。

# QiitaでChatGPTが人気記事になったのはいつ？

私の職業がエンジニアということで、本業においても「ChatGPTを知っているか？直ちに使い物になるか調査せよ！」というお達しがありました。が、Qiitaを毎日覗いているおかげで他の人よりも事前知識を持った上でその流れに参画することができました。感謝。

ちなみに毎朝のチェックで最初にChatGPTというタグでランクインしたのは以下の記事。2022年12月2日にランクインしています。

https://qiita.com/sakasegawa/items/82069c97a1ee011c2d1e

続いて12月3日に以下記事もランクイン。みんな目をつけるのが早い...

https://qiita.com/relu/items/6cc9467748d580f50cfd

日本でChatGPTが総合ニュースに登場し始めたのは2023年1月に発表された「マイクロソフトが｢ChatGPT｣開発会社に100億ドル投資」というニュースだと思っていて、雑誌等でも特集され始めたのもこのあたり以降。Qiitaは1ヶ月早い。

# 終わりに

エンジニアとしての市場価値を損なわないためには、良質な情報の収集が大事だと思っています。そしてその情報源の一つにQiitaという存在があることを、ChatGPTの盛り上がりに乗り遅れなかった点をきっかけに再認識しました。

というわけで今まではReadOnlyでしたが、この企画をきっかけにちょこちょこゆるい記事を書いてみようと思います。Qiita様、引き続きどうぞよろしくお願いします。
CTCってなんだろな？

# はじめに

この記事では音声認識モデルによく用いられるCTCに関して簡単にまとめています。読みにくい部分や間違いなどあるかもしれません。ご容赦ください。

# CTCとは

CTCはend2endモデルに分類される。音声認識などでよく用いられている印象がある。

```math
\begin{align}
x&: 入力系列\\
y_t^k&:フレームtにおける出力のうちノードkの値\\
l&: トークン系列\\
\pi&: アライメント系列
\end{align}
```

CTCを用いて行いたいことは$x$から$y$を予測することである。ただしCTCモデルは直接$y$を出力するのではなく、$x$を入力して$\pi$を出力し、$\pi$を次の1,2の順に実行することで$y$を得る。

1. 連続して出現している同一トークンを削除する。
2. ブランクトークン"-"を削除する。

例えば $\pi=[-,o,o,-,o,i,i,i]$ は $y=[o,o,i]$ に変換される。

# 具体例

教材には抽象的な表現しかなかったのでこのページでは具体例を紹介します。
以下のように記号を設定する。
```math
\begin{align}
x&: 音声波形[x_0,...,x_7]\\
y_t^k&:フレームtに対応する音素がkである確率（k=a,u,-）\\
l&: ターゲットテキスト[a,u]\\
\pi&: アライメント[-,a,u],[a,a,u],[a,-,u],[a,u,u],[a,u,-]
\end{align}
```
$x$が「会う」と認識される確率は
```math
\begin{align}
&\quad P([a,u]|x)\\
&=P([-,a,u]|x)+P([a,a,u]|x)+P([a,-,u]|x)+P([a,u,u]|x)+P([a,u,-]|x)\\
&=y_-^0 y_a^1 y_u^2+y_a^0 y_a^1 y_u^2+y_a^0 y_-^1 y_u^2+y_a^0 y_u^1 y_u^2+y_a^0 y_u^1 y_-^2
\end{align}
```
とあらわされる。
ここで、$y_a^1$に対する$L_{CTC}$の勾配を求めると
```math
\begin{align}
&\quad\frac{\partial L_{CTC}}{\partial y_a^1}\\
&=-\frac{1}{P([a,u]|x)}\frac{\partial}{\partial y_a^1}P([a,u]|x)\\
&=-\frac{1}{P([a,u]|x)}(y_-^0 y_u^2+y_a^0 y_u^2)\\
&=-\frac{1}{P([a,u]|x)\cdot y_a^1}(y_-^0 y_a^1 y_u^2+y_a^0 y_a^1 y_u^2)\\
&=-\frac{1}{P([a,u]|x)\cdot y_a^1}P(l=[a,u],\pi_1=a|x)

\end{align}
```
となる。同様にして他のパラメータに対する勾配も求められる。

# 参考文献

* 高島遼一, Pythonで学ぶ音声認識, インプレス社, 2021.
Next.jsとは何か、SSG SSRなど。

# 導入
Next.jsは高速で画面表示を行えることから、モダンなHPなどでよく使われます。

最近では、[デジタル庁のHP](https://www.digital.go.jp/)がNext.jsで作られていることが話題になりました。
実際にかなりページ遷移がかなり早く、快適に見ることができます。

業務でNext.jsを使用したことがあるのですが、
今回自作でHPを作成することにしたので
振り返りを込めて、まとめていきます。

# Next.jsのメリット
Next.jsとはreactのフレームワークです。

主なメリットは以下の4つです。

・クライアントのPCに依存せずにレンダリングができる
・直感的なルーティング設定ができる
・ページ読み込み速度が向上する
・SEO対策になる

今回はその中でも、ページ読み込み速度が向上するについて解説します。

# プリレンダリングで読み込み速度が向上する
Next.jsを使用すると、なぜ読み込み速度が向上するのか。
それは、プリレンダリングを行うからです。

プリレンダリンとは、クライアントサイドで逐一レンダリングするのではなく事前にHTMLだけ作成しておく手法のことです。

HTMLを作成する時間を削減できるため、高速なページ遷移が可能となります。

プリレンダリングの手法は、
SSGとSSRの二つがあります。

# SSGとは
SSGはStatic Generation(静的生成)の略です。
ビルド時にレンダリングを行い、HTMLをクライアントに渡します。

HTMLを作成する時間が短縮されるため、高速なページ遷移が可能となります。

デメリットは、
・ビルド後に更新された情報を反映できないことです。

# SSRとは
SSRは、Server Side Renderingの略です。
SSGとは異なり、クライアントのリクエストの度にサーバーサイドでレンダリングを行います。

リアルタイムにデータを反映できることが特徴です。

デメリットは、
・SSGよりもページ表示速度が落ちることです。

# SSGとSSRは併用できる
SSGとSSRは、ページ毎にどちらを使うかを決めることができます。

例えば、基本はSSGで高速表示を行い、
ユーザープロフィールや、SNS連携部分のみSSRで行うなど、出し分けを行うことができます。

# まとめ
以上、今回h Next.jsについてまとめました。

ブログやHPなど、高速でページ遷移ができるため、ユーザビリティの高いサイトを作ることができます。

次回以降は、実装方法などまとめたいと思います。
Spring Batch 動作確認メモ

公式のサンプル実行メモ
Spring Batchバージョン 5.0.2

https://spring.pleiades.io/spring-batch/docs/current/reference/html/

## eclipse確認
eclipseにstsとm2eがインストールされていることを確認

help → eclipse マーケットプレース

sts（Springのプラグイン）
https://marketplace.eclipse.org/content/spring-tools-4-aka-spring-tool-suite-4?mpc=true&mpc_state=

m2e（mavenのプラグイン）
https://marketplace.eclipse.org/content/eclipse-m2e-maven-support-eclipse-ide

## サンプルプロジェクトのインポート
1. このサイトの「How to complete this guide」のDownloadからソースをダウンロード
https://spring.io/guides/gs/batch-processing/

1. 解凍してgs-batch-processing-main内のcompleteをeclipseにインポート


## メタデータスキーマの設定（必須）
Spring Batch はJobの実行状況などを各メタテーブルで管理するため、それらテーブルを定義しておかないと実行時にエラーが発生する。

https://spring.pleiades.io/spring-batch/docs/current/reference/html/schema-appendix.html#metaDataSchemaOverview

※"DDL スクリプトの例"の箇所にテンプレートがある旨が記載してある

1. ライブラリをインストール
インポートしたプロジェクトを右クリック → 実行 → Maven install を実行
（この実行がない場合はm2eをダウンロード）

1. インストールしたライブラリから、spring-batch-core-5.0.2.jarを適当な場所にコピーし、解凍
1. フォルダ直下にある、batch-hsql.propertiesをcomplete/src/main/resourcesにコピー
※サンプルプロジェクトはHSQLDB（メモリ上で動作するDB、一時的に使うイメージ）で作成されている


上記を実施後、プロジェクトを右クリック、実行 → Spring Boot アプリケーションで実行

## HSQLDBをサーバー実行に変更
・ HSQLDBのサーバー実行
https://qiita.com/NCC-501/items/a1783e2eb3231addfabc

・ プロパティ設定
（何か間違ってて公式が用意してるプロパティーを更新しても変更されなかったので...）
```application.properties
spring.datasource.url=jdbc:hsqldb:hsql://localhost:9001/testdb
spring.sql.init.schema-locations=classpath*:/org/springframework/batch/core/schema-hsqldb.sql
spring.sql.init.mode=never
```

・ メタテーブルは手動で作成（公式のプロパティーがうまく更新できなたら不要）
mavenでダウンロードしたspring-batch-core-5.0.2から下記を取得、実行
/org/springframework/batch/core/schema-hsqldb.sql

サンプルのSQLも手動で実行
schema-all.sql
Glue CrawlerからSnowflakeのメタデータを収集してカタログ化

データインテグレーションサービスAWS Glueのデータカタログ生成のためのクローラー（Crawler）機能がSnowflakeをサポートしたので試してみた

https://aws.amazon.com/jp/about-aws/whats-new/2022/11/aws-glue-crawlers-support-snowflake/

https://aws.amazon.com/jp/blogs/big-data/announcing-aws-glue-crawler-support-for-snowflake/

## 何ができる？

Snowflakeに登録されたテーブル・スキーマ情報をGlue Crawlerで収集して、AWS Glue データカタログに登録できる（Glue を経由してAWS Lake Formationや Amazon DataZoneに取り込むことも可能）

## 構成イメージ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112537/5f76c1a2-e0be-7d68-4958-8d42f2e6386f.png)


- Glue CrawlerからSnowflakeのJDBCエンドポイントに接続して収集
- 接続設定はGlue Connectionsで
- ここではSnowflakeにはNAT経由でパブリック接続しているが、SnowflakeのBussiness Critical以上のエディションならAWS PrivateLink経由でアクセス可能

## 設定概要

### [1] 事前準備
- Snowflakeの接続情報（usernameとpassword）を AWS Secrets Managerに登録しておく

### [2] Glue Connectionsを作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112537/08b033fe-2372-3fca-2c02-d6227617c367.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112537/0188b204-ab71-90ed-8d64-871056a2b69b.png)

- Connection typeはJDBC

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112537/4ed4dce1-eece-56ff-e3c8-65e6a4da8e3f.png)

- JDBC URLのフォーマット
    - `jdbc:snowflake://XXXXXX.snowflakecomputing.com/?user=YYY&db=ZZZ&role=AAA`
    - `XXXXX`はSnowflakeのアカウントから確認
        - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112537/084ef9f4-6aa0-1d12-fb5e-8ba64e0e1347.png)
- Credential typeはUsername/password直打ちもできるがSecretsManagerのSecretを指定

- Networkオプションはプライベートサブネットを指定（ENIが払い出される）
    - NATのセットアップを忘れずに

## [3] Glue Crawlerを作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112537/02738eb1-a8d6-dda5-3fe9-27b0e7080b64.png)

- `Add data source`で
    - `Data source`はJDBC
    - `Connection`は事前設定した接続設定
    - `Include path`は `データベース/スキーマ/%` のフォーマットでSnowflake側の設定に応じて

その他
- IAM roleにはSecretsManagerへのRead権限を付与しておく

あとはCrawlerを実行するだけ

## トラブルシュート

Crawlerを実行したら
`Crawler cannot be started. Verify the permissions in the policies attached to the IAM role defined in the crawler`
エラーが発生。

原因はGlueのConnectionsの指定したサブネットがパブリックサブネットだった（プライベートサブネット＆NAT経由接続になっていなかった）ため。
エラー理由のアラートとは異なるが、構成を冒頭の形にしたことで解消。

参考）

https://stackoverflow.com/questions/75045825/unable-to-run-aws-glue-crawler-due-to-iam-permissions

## まとめ

Glue CrawlerからSnowflakeのメタデータを収集してカタログ化できた。
たとえば、Amazon DataZoneもGlueデータカタログのメタデータを取り込めるので、DataZoneでSnowflakeのメタ情報を連携することもできる（ただし、DataZoneのSubscribe連携までは2023/6時点で未対応）
【作業メモ】Ergo42 Single Edition組立記

<br>
キーボード自作してみたかったのでErgo42 Single Editionを組み立て

## Ergo42 Single Editionとは
 - Ergo42の片手ver(28キー)
 - 両手版より初心者向き（価格的にも難易度的にも）
 - マイコンボードがはんだ付けされている（基盤に差し込むだけでOK）


公式サイト（組み立て手順、キー配列変更方法も載ってます）

https://bit-trade-one.co.jp/selfmadekb/adskb42h/

## 用意したもの
 - キートップ
 - キースイッチ（Cherry MXの互換品）
 - はんだごて＆はんだ
 - 作業用マット（はんだ作業用）

ダイオードの余計な部分切るときはペンチを使いたかったけど無かったのでハサミで代用

## 手順
### 1. ダイオードを基盤に取り付け
足を曲げて基盤に差してはんだ付け
![IMG-4586.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458266/ab92011b-e840-831c-417c-cf24a0f55002.jpeg)


### 2. リセットスイッチ・ケーブルジャック取り付け
はんだ付けしろという指示が無かったので差し込むだけにした。

### 3. キー枠とキーキャップを基盤に取り付け
キー枠はキーキャップをはめるためのアクリル板。

基盤 - キー枠 - キーキャップの位置関係になるよう取り付け。
先に四隅のキーキャップをキー枠にはめこんでから基盤と合わせ、キーキャップのピンと基盤をはんだ付けする。
自分の場合、四隅に入れてもすぐ取れてしまった（右上を押し込むと左下が飛び出るとか……）ので、一つずつキーを入れてはんだづけした。
四隅を入れたら他の枠にもキーキャップをはめ、はんだ付けする。


ちょっとピントがぼけている感じがするけど、はめたあとはこんな感じ。
![IMG-4587.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458266/85c28426-3570-91f9-b41d-df2ff741efa3.jpeg)

### 4. マイコンボード取り付け
右手用に作るか左手用に作るかで差し込む位置が違うのでよく確認してはめこむ。

### 5. 底板・マイコンカバーのねじ止め
ダイオードの足がちょっと残っていて底板がうまく合わなかったのであわててハサミで切る...。ペンチ使うべきですね...。

### 6. キーキャップをはめる
好きなものをどうぞ。

象形文字キートップつけて、数足りなかったので別のキートップも追加。
わりと訳分からないレイアウトなので、またキートップ買ったら入れ替えると思う。
（Arrowキーは上下逆だったので写真撮った後ではめなおした）

![IMG-4588.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458266/d953f150-e122-e296-56ae-54bc83a2ed45.jpeg)



### 7. キーマップ変更（任意）
キー配列は既に書き込まれているけど、QMK Configuratorでキー配列を変更できる（GUIで感覚的にできるので簡単）

## 作った感想
ダイオードとキーキャップのはんだ付け大変だった。。。
はんだ付けは中学の授業でやったきり（だしまともに通電しなかった記憶）
だったので村田製作所さんのはんだ付けのコツのページを見てイメトレ。

https://article.murata.com/ja-jp/article/soldering

今回のはんだ付けもあんまり見た目きれいじゃないけど全キー問題なく使えるのでヨシ！
イメトレの成果が出ました。

キー配列適当にファンクションとかスペースとか設定したしキートップも象形文字なので使おうにも訳分からない感じ。運用はこれから考えます。
今週のKDDIグループの愉快なQiitaまとめ（6/14〜）

ついに始まったQiita Engineer Festa 2023、初週！
みなさん楽しくアウトプットしていますか？

https://qiita.com/official-campaigns/engineer-festa/2023

KDDIグループ各社でも有志が技術記事の発信に励んでいます！
そんな愉快な仲間たちの今週の記事を紹介します。



# KDDI株式会社

https://qiita.com/organizations/kddi

### @Nazuna_Nyanmage （Keita Y） さん

https://qiita.com/Nazuna_Nyanmage/items/315d3ccad5f7d1b4b115

### @sakue_103 さん

https://qiita.com/sakue_103/items/1e0d03b52317e6bd7805

https://qiita.com/sakue_103/items/9be3ca42cac9247953e0



# KDDIアジャイル開発センター株式会社

https://qiita.com/organizations/kddiagile


### @yoshii0110 （Yoshitaka KOITABASHI） さん

https://qiita.com/yoshii0110/items/d82c158c40bd146e7fcf

https://qiita.com/yoshii0110/items/c51a5d2ad013498b4e30

https://qiita.com/yoshii0110/items/dc26e9b4b0cfc05c421b

https://qiita.com/yoshii0110/items/ff0fce18a74221000310


### @minorun365 （みのるん）

https://qiita.com/minorun365/items/b87ebe1e4bdad6a12da7

https://qiita.com/minorun365/items/696ba8bf683a403550d0

https://qiita.com/minorun365/items/8353f772609bd094c16f

https://qiita.com/minorun365/items/7ee8bb1478bfbceb1d1b

https://qiita.com/minorun365/items/790635f211a14ad6b4db

https://qiita.com/minorun365/items/171bb7858fe5524e45d7

https://qiita.com/minorun365/items/3b91dcb6a3bca81fa388



# アイレット株式会社 （cloudpack）

https://qiita.com/organizations/cloudpack


### @kurono さん

https://qiita.com/kurono/items/c15ff3143cb553334a15


### @matsukatsu （Katsutoshi Matsumoto） さん

https://qiita.com/matsukatsu/items/e9e6ea5468c2a4f36823



# 株式会社 ARISE analytics

https://qiita.com/organizations/ariseanalytics


### @SaitomTech さん

https://qiita.com/SaitomTech/items/38fbf671e60089964668


### @mkkon さん

https://qiita.com/mkkon/items/70c26a7f15fb877ba6e2


### @ouerika （ou erika） さん

https://qiita.com/ouerika/items/11c71022fa934b04019b


### @tsukemono （tsukemono） さん

https://qiita.com/tsukemono/items/2a18e5d307a978e8ab09

https://qiita.com/tsukemono/items/b9a53067382c9d8a01ef

https://qiita.com/tsukemono/items/8d26373d8cb7c787799c

https://qiita.com/tsukemono/items/a4bfa24456e78898de34


### @tsukasai （Tsukasa INOUE） さん

https://qiita.com/tsukasaI/items/b682375d1d2af44929c6

https://qiita.com/tsukasaI/items/ad9a23eb7dbc5470d88c

https://qiita.com/tsukasaI/items/79129233312660781fbe

https://qiita.com/tsukasaI/items/68f1c24a5285d00c1664

https://qiita.com/tsukasaI/items/f79481463432072c1d26

https://qiita.com/tsukasaI/items/6c1fd9abff1b1f5477c8



# KDDI Group Developer Community (KGDC)

https://qiita.com/organizations/kgdc


### @ymd65536(Kento Yamada) さん

https://qiita.com/ymd65536/items/1c63385b2b06e44dfa40

https://qiita.com/ymd65536/items/05d09745f51b9e333659

https://qiita.com/ymd65536/items/5396d7547071531ab4aa
long型よりstring型文字列の方が値の数で言えば多く保存できることについて

タイトルの疑問をPerplexityに聞いてみたら

「基本的な整数型では大きすぎる入力値を扱うには、文字列型と多倍長整数型の両方を使用することができます。ただし、文字列型は算術演算用に設計されていないので、算術演算のために文字列を大きな整数型に変換する必要があります。
出力に関しては、文字列型の方がlong型よりも多くの文字を保持することができます。例えば、Javaではlong型の最大値は2^63-1で、最大19桁の長さを持つことができます。一方、文字列型は、利用可能なメモリ量にのみ制限されて、任意の数の文字を保持することができます。
したがって、基本的な整数型に格納できないような大きな数値を出力する必要がある場合は、文字列型を使用するのがよいでしょう。」

シンプルに知らなかったので衝撃だった。
参考文献：
https://docwiki.embarcadero.com/RADStudio/Alexandria/ja/%E6%96%87%E5%AD%97%E5%88%97%E5%9E%8B%EF%BC%88Delphi%EF%BC%89