OmniAICreator/Qiita-1.07M huggingface dataset:
【Wasm】RustからJavaScriptパッケージを利用する

[wasm-bindgen](https://github.com/rustwasm/wasm-bindgen)を用いることでjsファイルで定義されたクラスや関数などをRustから[利用できます．](https://rustwasm.github.io/wasm-bindgen/examples/import-js.html)今回はそのwasm_bindgenとJavaScript等のバンドラである[webpack](https://github.com/webpack/webpack)を利用して，jsパッケージ(具体的には[plyr]())をRustから利用してみます．また，バンドルサイズを小さくするためにjsパッケージをCDNからも利用してみます．作成したクレートは[こちら](https://github.com/deepgreenAN/plyr-rs)．

## JavaScriptのバンドル
まずはwebpackを利用するプロジェクトを[webpackのGetting Started](https://webpack.js.org/guides/getting-started/)に従って作成します．次に利用したいjsライブラリであるplyrをnpmなどでインストールします．
```
npm i plyr
```
そしてエントリーとなる`src/index.js`を作成します．本来はこちらにRust側で利用したい関数やクラスなどを定義するのですが，今回はデフォルトimportした`Plyr`クラスをそのままexportします．
```js:index.js
import Plyr from 'plyr';
export {Plyr};
```
次にバンドルについての設定を`webpack.config.js`に記述します．`output.library.type`を`'module'`とすることでバンドルしたファイルをESモジュールとして読み込めるようになります．`type`を`'module'`にするには`experiments.outputModule`を`true`にする必要があるためそちらも設定しておきます．
```js:webpack.config.js
const path = require('path');

module.exports = {
    mode: 'production',
	entry: './src/index.js',
	experiments: {
		outputModule: true,
	},
	output: {
		path: path.resolve(__dirname, '../dist'),
		filename: 'main.js',
		library: {
			type: 'module',
		},
	},
};

```
これによって
```
npm run build
```
(`webpack`コマンドが実行される)で利用したパッケージを含めてバンドルされ，`dist/main.js`が作成されます．
一方でパッケージをバンドルに含めずCDNで利用したい場合は以下のように`config.js`を設定します．先ほどの例と異なる部分は`externalsType`と`externals`です．CDNとして読み込むため`externalsType`には`'global'`を指定します．その場合`externals`にはプロジェクトで利用するライブラリ名(`plyr`)と対応するCDNを読み込んだグローバル変数名(`'Plyr'`)を指定します．
```js:cdn_webpack.config.js
const path = require('path');

module.exports = {
    mode: 'production',
	entry: './src/index.js',
	experiments: {
		outputModule: true,
	},
	output: {
		path: path.resolve(__dirname, '../dist_cdn'),
		filename: 'main.js',
		library: {
			type: 'module',
		},
	},
	externalsType: 'global',
	// externalsType: 'window', // こちらでもよい
    externals: {
        plyr: "Plyr"
    }
};
```
これによって
```
npm run build -- --config cdn_webpack.config.js
```
で`plyr`が除外されてバンドルされ，`dist_cdn/main.js`が作成されます．

この作成された`dist/main.js`と`dist_cdn/main.js`をwasm_bindgenから読み込みます．

## wasm-bindgenでjsファイルを読み込む
あとは[wasm-bindgenの公式ドキュメント](https://rustwasm.github.io/docs/wasm-bindgen/examples/import-js.html)にあるように`wasm_bindgen`アトリビュートに`module`を指定してjsファイルを読み込みます．`cfg_attr`で指定した`feature`に応じて読み込まれるファイルを異なるようにすると便利です．以下では`Plyr`型とそのコンストラクタを定義しています．このコンストラクタからは読み込んだjs側の`Plyr`クラスのコンストラクタが呼び出されます．
```rust
use wasm_bindgen::prelude::*;

#[cfg_attr(feature = "cdn", wasm_bindgen(module = "/dist_cdn/main.js"))]
#[cfg_attr(not(feature = "cdn"), wasm_bindgen(module = "/dist/main.js"))]
extern "C" {
    #[derive(Debug, Clone)]
    pub type Plyr;

    #[wasm_bindgen(constructor)]
    pub fn new(css_selector: &str) -> Plyr;
}
```
これで以下のように利用できるようになります．
```rust
let player = Plyr::new("#player");
```

`module`でパスを指定することで，クレートとして利用したときにもjsスニペットごと利用できます．
第11回FA設備技術研究会　IEC61131-3 Ed.3 オブジェクト指向FB


2022/12/17 FA設備技術研究会(https://fa-study.connpass.com/)で 「IEC61131-3 Ed.3 オブジェクト指向FB」について発表した時に使用したスライドです

----
第11回FA設備技術研究会　IEC61131-3 Ed.3 オブジェクト指向FB
https://qiita.com/oofunctionblock/items/228dec02b45a9bcadaa9

第12回FA設備技術研究会　オブジェクト指向FBを使って装置のプログラミングを書いてみよう
https://qiita.com/oofunctionblock/items/c1f0ef9de09b7b5a8211

----

![スライド1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119828/52969f42-cf74-e4c1-40f9-81245dbeaea0.jpeg)

----

![スライド2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119828/fa1d49cd-8fde-e838-b778-66b42e9fc1bc.jpeg)

----

![スライド3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119828/efce382a-bbc1-3d89-0a2f-635d89384ed5.jpeg)

----

![スライド4.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119828/31874efd-4fdf-9634-77d1-69e31c6f23b1.jpeg)

----

![スライド5.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119828/2cbbe4c9-a34c-2a57-7c26-0413ca78bfdf.jpeg)

----

![スライド6.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119828/5be31cbd-6f8d-d79b-2a83-9268e0d37458.jpeg)

----

![スライド7.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119828/f858ad42-eae5-13aa-b70a-f417252bf3e6.jpeg)

----

![スライド8.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119828/d53656f2-f672-effa-dd5f-68415a015452.jpeg)

----

![スライド9.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119828/b9780c9d-1ee5-43c2-895d-d207f6c6823d.jpeg)
AtCoderのabc135の[A - Harmony]

# 読んで欲しい人
・似たような問題を解く未来の私
・プログラミングが詳しい方（教えてください）　
# 注意
AtCoderのabc135の[A - Harmony](https://atcoder.jp/contests/abc135/tasks/abc135_a)のネタバレあり。
# ACしたコード
```C
#include <stdio.h>
int	main(void)
{
	int	a,b;
	scanf("%d%d",&a,&b);
	// printf("%d %d\n",a,b);

	if(a % 2 == 0 && b % 2 == 0 || a % 2 != 0 && b % 2 != 0){
		printf("%d\n", (a + b) / 2);
	} else {
		printf("IMPOSSIBLE\n");
	}
	return (0);
}

```
# 調べた事まとめ
<b>問題文の理解</b>
・[相違なる整数](https://www.weblio.jp/content/%E7%9B%B8%E9%81%95#:~:text=%E7%9B%B8%E9%81%95%EF%BC%88%E3%81%9D%E3%81%86%E3%81%84%EF%BC%89%E3%81%A8%E3%81%AF%E3%80%81,%E4%BA%92%E3%81%84%E3%81%AB%E3%80%8D%E3%81%A8%E3%81%84%E3%81%86%E5%AD%97%E7%BE%A9%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82) → 異なる整数

<b>奇数・偶数の知識</b>
・[奇数 + 奇数 = 偶数](https://mimizuku-edu.com/even-and-odd/3/)

<b>絶対値の知識</b>
・[絶対値を表す記号](https://std-ie.jp/tips/tip155.html#:~:text=%E7%B5%B6%E5%AF%BE%E5%80%A4%E3%81%AE%E8%A8%98%E5%8F%B7%E3%80%8C%EF%BD%9C%E3%80%8D%E3%82%92%E5%A4%96%E3%81%99%E6%96%B9%E6%B3%95&text=(A)%E3%83%BB(B),%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%E8%A1%A8%E3%81%97%E3%81%BE%E3%81%99%E3%80%82&text=%E8%A6%8B%E3%81%A6%E3%82%8F%E3%81%8B%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB,%E7%AC%A6%E5%8F%B7%E3%81%AF%E3%81%A4%E3%81%8D%E3%81%BE%E3%81%9B%E3%82%93%E3%80%82)
```
| -2 | → 2
| 2 |  → 2
``` 
# 解き方を思い出す為には
<b>入力例の数字がどのような関係なのか考える。</b>
・A と B が 偶数 or 奇数同士なのか、偶数と奇数なのか。
# いろんなACしたコード
（探し中）
Kustomizeのpatchで配列内オブジェクトに新しいプロパティを生やす

# タイトルの意味

「配列内オブジェクトに新しいプロパティを生やす」とは、以下のようなことです。

```yaml:生やす前
apiVersion: v1
kind: Pod
metadata:
  name: static-web
  labels:
    role: myrole
spec:
  containers:
  - name: web
    image: nginx
    ports:
    - name: web
      protocol: TCP
```

```yaml:生やした後
apiVersion: v1
kind: Pod
metadata:
  name: static-web
  labels:
    role: myrole
spec:
  containers:
  - name: web
    image: nginx
    ports:
    - name: web
      containerPort: 80
      protocol: TCP
```

`containerPort: 80`が追加されています。

# やり方

```yaml:pod.yaml
apiVersion: v1
kind: Pod
metadata:
  name: static-web
  labels:
    role: myrole
spec:
  containers:
  - name: web
    image: nginx
    ports:
    - name: web
      protocol: TCP
```

```yaml:kustomization.yaml
apiVersion: kustomize.config.k8s.io/v1beta1
kind: Kustomization

resources:
- pod.yaml

patches:
- target:
    kind: Pod
  path: ./patches/pod.yaml
```

肝心のパッチは以下のようになります。

```yaml:patches/pod.yaml
- op: add
  path: /spec/containers/0/ports/0/containerPort
  value:
    80
```

`/spec/containers/0/ports/0/`は、「specの中のcontainersの0番目の中のportsの0番目の中」という意味で、その中に存在しない`containerPort`を指定することで、valuesの値と共に追加されます。

# 結果

```yaml:結果
apiVersion: v1
kind: Pod
metadata:
  labels:
    role: myrole
  name: static-web
spec:
  containers:
  - image: nginx
    name: web
    ports:
    - containerPort: 80
      name: web
      protocol: TCP
```

元の`pod.yaml`には存在しなかった`containerPort`プロパティが増えていますね！

# 参考

Kustomizeの`op: add`や`op: remove`などのパッチ操作はRFC6092で定義されているようです。

https://www.rfc-editor.org/rfc/rfc6902
Optional class ifPresent, map method

ifPresent() is given Consumer interface
ifPresentOrElse() is given Consumer interface and Runnable interface
map() is given Function interface, and Function#apply method return <T>
map returns Optional<T>
flatMap() is given Function interface, and Function#apply method return Optional<T>
flatMap returns Optional<T>

```java
public class Outer {
    public static void main(String[] args) {
        Optional<String> o = Optional.of("abc");
        o.ifPresent((str) -> { System.out.println("optional value is " + str);});
        o.ifPresentOrElse(str -> { System.out.println("orelse optional value is " + str);},
                          () ->  { System.out.println("orelse optional value is empty");});
        System.out.println("mapping function is "+ o.<Integer>map(str -> str.length()).get());
        System.out.println("flat mapping function is "+ o.<Integer>flatMap(str -> Optional.of(str.length())).get());
        o = Optional.empty();
        o.ifPresent((str) -> { System.out.println("optional value is " + str);});
        o.ifPresentOrElse(str -> { System.out.println("orelse optional value is " + str);},
                          () ->  { System.out.println("orelse optional value is empty");});
    }
}
```
```
optional value is abc
orelse optional value is abc
mapping function is 3
flat mapping function is 3
orelse optional value is empty
```
connpassでインフラの勉強会を開催してみる

# 内容
業務と趣味でインフラ関連の技術を色々やっております！リモートで勉強会を開催してみようと思い、connpassでユーザグループとイベントを作成してみました。誰でも参加出来ますので是非ご参加下さい。そろそろ```2023 AWS ALL Certifications Engineers```の申込も始まるので何かAWS認定資格関連で話したいと思います。

# LTについて
## 基礎レベルを募集
他の勉強会では少しハードルが高いな〜と思う方やLTの練習をしたい方もお気軽に申込下さい。

## 質問有無を選べます
LT後のQA有無を選択出来ます。無の場合は終了後コメントのみさせていただきます。

# 概要
## イベント概要
https://infra365.connpass.com/event/272976/

## グループ概要
https://infra365.connpass.com/

## インフラ技術基礎勉強会について
https://speakerdeck.com/toru_kubota/inhuraji-shu-ji-chu-mian-qiang-hui-kai-cui-gai-yao
AWSでWordPressサイトをつくる！

# はじめに
WordPressに触れてみたい。そんな時にこちらのサイトを見つけたので参考にWordPressのウェブサイトをAWSで構築します。

https://pages.awscloud.com/JAPAN-event-OE-Hands-on-for-Beginners-Scalable-2022-confirmation_386.html

2020年に初めてAWSを触ったときに同様のことを試行錯誤しながらやってみたのですが、その頃と比較しながら作ってみました。

# VPCとネットワーク
VPCの作成時に「VPCなど」を選ぶことにより、SubnetやルートテーブルにNATゲートウェイまでうまいこと作成してくれるようになっていました。これは便利です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940466/c4c45371-eb21-819b-a92c-78995c2293fb.png)

↓あの頃試行錯誤しながら作ったネットワークコンポーネントが一気に作られていく様は壮観でした。

https://qiita.com/talomina/items/ffa97f439e0201f237b4

# EC2をつくる

EC2をパブリックサブネットに作成します。Amazon Linuxで作りますが下記のインストールスクリプトを利用することによりWordPressがインストール済みになります。

https://pages.awscloud.com/rs/112-TZM-766/images/hfb_2022_wordpress_installation.txt

このスクリプトはややチートでしたが、おかげさまでEC2にsshする間もなくワンアクションで完成しました。過去の試行錯誤はこちら↓

https://qiita.com/talomina/items/d470a6f8c9b813d839fd

# RDSでMySQLを構築
データベースを作成する際に驚いたのは接続元となるEC2を選ぶことにより、接続の設定が整えられるというところでした。VPCやSubnetが自動的に選ばれるうえに、EC2側とRDS双方に必要なセキュリティグループをセットしてくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940466/692fb2a0-9462-2f94-6124-5e4e654482d1.png)

また、SSDがgp2とgp3を選択できるようになりました。以前はたしかgp2のみだったはず。

データベース名（例：wordpress）を設定しておかないと最初のデータベースが作成されないのでここだけ注意です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940466/000c0b05-31d4-016f-846f-d0523598e2dc.png)

# ELBを設置してスケーラビリティを確保する
ELBに関しては依然とそれほど変わっていないような印象でした。

https://qiita.com/talomina/items/79277eda3dec13fa8be2

# WordPress
そんなこんなでスケーラブルなWordPressサイトができました。全体的に以前よりもUIが改善しており、さらには自動的に調えられる部分が増えたので、操作がスピーディーになって気持ちよかったです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940466/8f8017a0-94f1-13df-20a3-d5babab9ab48.png)

# おわりに
このハンズオンで得たことは下記の2点です。
* EC2の構築時に自動的にWordPressを設定できるインストールスクリプトが便利
* スケーラブルなWebサイト構成を理解して、サクッと作るための情報が集められた

しかしWordPressに触れてみたい、ということにしてはやや構成が大掛かりすぎて、コストもそれなりにかかるので、Lightsail等を検討することにしました。

https://qiita.com/talomina/items/dbd65278b01f7c7bddf0
Jetpack ComposeのComposable内で端末のステータスバー(status bar)の高さを取得したい

Jetpack ComposeのComposable内で端末のステータスバー(status bar)の高さを取得したい
```kotlin
val systemBarsPadding = WindowInsets.systemBars.asPaddingValues()
// ステータスバーの高さ
val height = systemBarsPadding.calculateTopPadding()
```
【Laravel】よく使うコマンド一覧

## はじめに
Laravelに限らずWEBアプリを作っているとコントローラを作ったりテーブルを作ったりと同じようなコマンドを打つことがある。
若干忘れたりもするので、今回はよく使うコマンドをまとめていく。

## Controller作成
```
php artisan make:controller TrRecordController
```
- コントローラを作成する場合は大文字スタートが基本
- 単数形で記述する

## テーブル作成
```
php artisan make:migration create_tr_records_table
```
- テーブルを作成する場合は、`create_テーブル名(複数形)_table`と記述する
- テーブル名は小文字スタートが基本
- 複数形で記述する

## カラム作成
```
php artisan make:migration add_age_to_tr_records_table --table=tr_records
```
- カラムを追加する場合は、`add_追加するカラム名_to_テーブル名(複数形)_table`と記述する。
- 最後にテーブルを指定する
- 複数形で記述する

## カラム削除
```
php artisan make:migration drop_column_birthday_column --table=tr_records
```
- カラムを削除する場合は、`drop_column_削除するカラム名_column`と記述する。
- 最後にテーブルを指定する

## カラム修正(型、カラム名)
```
php artisan make:migration change_part_name_string_to_integer_on_tr_records_table --table=tr_records
```
- カラム名もしくは型を変更する場合は上記の様な感じで打ち込んであげて、マイグレーションファイルを作成する。ファイル内で適宜必要な修正を加えればOK

## モデル作成
```
php artisan make:model TrRecord
```
- 大文字スタートが基本
- 単数形で記述する

## FormRequest作成
```
php artisan make:request TrRecordRequest
```
- バリデーションの際に作成する
- 大文字スタートが基本
- 単数形にRequestをつけてあげる

## Policy作成
```
php artisan make:policy TrRecordPolicy --model=TrRecord
```
- 認可を与える場合に必要になるのでその際に作成する
- 大文字スタートが基本
- 単数形で記述
- 最後にモデルも記述する


以上
ソースコードを一人で理解するためにできることを考える

# 前置き
知らないシステムのソースコードを読むのはすごく大変だという話

はじめに断っておきますが、この記事はソースコードを早く読むための手引ではありません。
自分の思考整理の為に書いています。

---

# 私はどんな順番でソースコードを読んでいたか
ここでは、ある機能の全体像を理解することを目的とする。

<前提>
参画したばかりでまだシステムの全容をほとんど理解していないとする

1. まず目的の機能にアクセスする入口または出口を探す
1. 見つけたファイルを頭らか最後まで一通り読む。
1. 呼び出している関数、または実行元に飛んで、またファイルを頭らか最後まで一通り読む。
1. 3を繰り返す
1. 機能の入口と出口が繋がったら全体を読んだことになる。

---

# 上記のやり方でコードを読むにあたってハマったポイント

- フレームワークの理解が足りない
慣れていないフレームワークはどこに何があるかわかりません。
今回約３年ぶりにRailsを触りましたが、パラメーターどこで取得してるの？
`routes.rb`や`controller`の存在も忘れているので、APIのエンドポイントもどこにあるかわかりませんでした。
- 言語の理解が足りない
約３年ぶりにRailsということでRubyも３年ぶりです。
ぱっと見ただの変数だと思ったのが実は関数でしたというのがよくありました。
- アーキテクチャの理解が足りない
依存関係にある外部システム、インフラ構成について理解がない。どこでどんな処理をしているか知らない
- 目的ファイルの場所が分からない
- 一見して分からない繋がり
    - API
    - 外部API
    - バッチ処理
    - 常駐プログラム
    - スレッド（非同期処理）
上記のような要素が出てくると行き詰まることが多いです。互いに何らかの方法でやり取りをしているはずですが、それを突き止めないといけません。同一の変数名やクラス名が出てくるならgrep検索で関連場所を見つけられるかもしれません。
スレッドは何のライブラリを使っているかわからないと呼び出し元さえ特定できません。
- 分からないデータ構造
悪名高い`〇〇_json`のようなjsonオブジェクトを直接扱っている変数の中身が分からない。
Rubyに関しては型が無いので、引数を見てもどんなパラメータを受け取っているかわからず
- 統一されていない命名規則
Vue2を使っていて、コンポーネント名の定義場所と利用箇所で命名規則が違う箇所がありました。違いはパスカルケースかケバブケースかなので変換すればgrep検索で探せますがひと手間で時間がかかります。静的解析が正しく機能していないのもつらいです。
- 読む必要がない箇所を読んで時間を取ってしまう

---

# これからやっていけそうな対策を考える

わかる人に聞くやコードをリファクタリングして品質を保つと言うのは日頃からさんざん言われている自明なことなので、ここではそれ以外のことを考えてみたい

---

こんな素晴らしい記事を発見
- [ソースコードを読むための技術(チートシート)](https://qiita.com/zizynonno/items/3a14fe6cbf52451a366c)

---

### 自分のコードの読み方の悪いところ

1. まず目的の機能にアクセスする入口または出口を探す ← **ここに時間がかかる**
1. 見つけたファイルを頭らか最後まで一通り読む ← **ここに時間がかかる**
1. 呼び出している関数、または実行元に飛んで、またファイルを頭らか最後まで一通り読む  ← **ここに時間がかかる**
1. 3を繰り返す
1. 機能の入口と出口が繋がったら全体を読んだことになる。

---

### 「目的の機能にアクセスする入口または出口を探す」に時間をかけてしまっている原因
- アーキテクチャの理解が足りない
- フレームワークの理解が足りない
- 言語の理解が足りない
- 目的ファイルの場所が分からない


<対策>
- システムのドキュメントを読む
- 言語やフレームワークについては各ツールのドキュメントを片手に読む
- チュートリアルを先にやってみるのも良いかも
- はじめにプロジェクトのディレクトリ構造を読んで見る

---

### 「見つけたファイルを頭らか最後まで一通り読む」に時間をかけてしまっている原因
- 一見して分からない繋がり
- 分からないデータ構造
- 統一されていない命名規則
- 読む必要がない箇所を読んで時間を取ってしまう

<対策>
- システムのOpenAPI等のより実装寄りのドキュメントを読む
- ファイル名、関数名等から役割を判断する
- コメントを読む
- 先にデータ構造を確認する
- インターフェースを把握する

---

### コードを読む時の心持ち『コードを読んではならない』

私の場合コードを読むときに手当たり次第にソースファイルを上から下まで全部見るとやってしまいがち…

コードを読むときにどこに注目するべきか？

- 名前（ディレクトリ名、ファイル名、クラス名、関数名、引数名、変数名）
- コメント
- データ構造
- ドキュメント
laravelでエイリアスのついたカラムをorderByするのに詰まった

# はじめに
クエリビルダで、サブクエリを使い取得していたデータをorderByしようとしたところ下記エラーが発生。

:::note alert
SQLSTATE[42S22]: Column not found: 1054 Unknown column
:::

カラムがないと怒られてしまったので解決方法忘れないように記載。
laravelのVerは8.8


# 成功したやぁつ


```hogeModel.php
public function getHoge($request)
{
    $sort = $request->sort;
    $direction = $request->direction;
    $page = $request->page ?? 1;

    $join = Table2::select('table2.table1_id', 'table2.created_at')
            ->whereNotIn('table2s.status', ["aaa", "bbb"]);
    $sql =
        DB::table('table1')
            ->leftJoin(DB::raw("({$join->toSql()}) as t2"), 'table1.id', '=', 'table2.table1_id')
            ->mergeBindings($join->getQuery())
            ->select(
                'table1.id', 'table1.name', 'shop_plans.plan_name'
            )
            ->addSelect(DB::raw('MAX(t2.created_at) AS latest_t2_created'));
    //この部分
    $sql->orderByRaw("MAX(o.created_at) {$direction}");

    $onePageCount = 20;

    $sql = $sql
            ->orderBy('table1.id', 'desc')
            ->skip($onePageCount * ($page - 1))
            ->take($onePageCount)
            ->paginate($onePageCount)->withQueryString();

    return $sql;
}
```


# ダメだったやぁつ

```hogeModel.php
public function getHoge($request)
{
    $sort = $request->sort;
    $direction = $request->direction;
    $page = $request->page ?? 1;

    $join = Table2::select('table2.table1_id', 'table2.created_at')
            ->whereNotIn('table2s.status', ["aaa", "bbb"]);
    $sql =
        DB::table('table1')
            ->leftJoin(DB::raw("({$join->toSql()}) as t2"), 'table1.id', '=', 'table2.table1_id')
            ->mergeBindings($join->getQuery())
            ->select(
                'table1.id', 'table1.name', 'shop_plans.plan_name'
            )
            ->addSelect(DB::raw('MAX(t2.created_at) AS latest_t2_created'));
    //この部分
    $sql->orderBy("MAX(o.created_at) {$direction}");

    $onePageCount = 20;

    $sql = $sql
            ->orderBy('table1.id', 'desc')
            ->skip($onePageCount * ($page - 1))
            ->take($onePageCount)
            ->paginate($onePageCount)->withQueryString();

    return $sql;
}
```

# 結論

`orderBy('column', 'asc')`という書き方ではダメで
`orderByRaw("column asc")`を使えばいける。

なお＄directionを変数展開するので、シングルクォーテーションではなくダブルクォーテーションにしなければいけないのも忘れちゃいけないポイント(基本はシングルで書いてます、何やら処理速度がシングルの方が早いのだとか)

# 追記
もしかしたらバッククォートで囲えばいけるかもしれないが実際には試していない
```
->orderBy("`latest_t2_created` asc")
```
【テックジム無料講座】GAS講座「メルマガスタンドを作ろう」の感想

テックジム主催の無料講座、GAS講座「メルマガスタンドを作ろう」を受講しました。プログラミングを学ぶ目的は、エンジニアになるためと考えられがちです。この講座を受講すると、事務職の作業をエクセルとワードとGoogleを使い、効率化するためにも、プログラミングの学習が役に立つと思えました。非常に解りやすくオススメです。

<a href="https://youtu.be/6XGSkXOW8Mg">1-1の解説</a>
<a href="https://youtu.be/Hel9XWtGLGY">1-2の解説</a>
<a href="https://youtu.be/yTjY9LepK68">1-3の解説</a>
<a href="https://youtu.be/2QaTP2puz0I">1-4の解説</a>
歩数を取得するならHealthKitと加速度センサーどっちがいいの？

先日投稿したGooglefitと加速度センサーに引き続き、今度はiOSでの歩数取得について書きたいと思います。

## iOSならHealthkit？それとも加速度センサー？

**加速度センサーとは？**

（これは前回とほぼ同じ内容です。）
スマートフォンの動きを検知する仕組みのことです。
iPhoneは端末のx,y,z軸それぞれを計測する加速度センサーを内蔵しています。
私がテストしたアプリだと、端末を軽く振るだけで歩数を増やすことができていました。


**HealthKitとは？**
iPhoneユーザーの方はみたことがあると思いますが、iPhoneに標準装備されている健康管理アプリです。

![スクリーンショット 2023-01-25 17.45.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629197/6d5ed898-d4d9-d69e-b138-2ff9bd084bd5.png)

アプリ内には下記のような機能が搭載されています。
・歩数データの取得
・心拍数や睡眠のデータ収集
・フィットネスデータ(ランニングやウォーキング等)の収集と保存
 
コロナが流行してからは、**血中酸素濃度を測れる**ようになり、話題となっていましたね。

iOSの歩数系アプリの開発でもHealthkitから歩数を取得してくるロジックを実装すれば、
開発アプリ内に歩数を測る機能（加速度センサー）を直接実装しないで歩数を取得できます。

## それぞれの利点(私見も含む)
それぞれのメリット、デメリットはおおまかに下記の通りです。

### 加速度センサー
（前回と同様）
**メリット**　
・わりとリアルタイムでアプリに歩数が反映できる。
**デメリット**　
・端末の電池消耗が激しくなる。


### Healthkit
**メリット**
・開発したアプリに新規登録したユーザーの歩数について、Healthkitが記録していた分だけ遡って登録される
・開発アプリ側に歩数取得機能をつける必要がない

**デメリット**
**・歩数反映までのタイムラグが15秒以上発生する（公式ではなく、テスト時の私見です）**

今回の開発では、
加速度センサーで実装　→ Healthkitに変更　→ 一部機能だけ加速度センサーにする　という事が発生しました。

歩数によってポイントが入る機能と、1ヶ月分の歩数をHealthkitから取得したい機能があり、前者はリアルタイムで歩数取得する必要があったため、加速度センサーの方が有効だということになりました。

Androidと同じく、開発アプリの目的やお客様が重視する点を踏まえて、よりよい実装方法を選択する必要がありますね。
Streamとは


- 値の集合に対する処理を使い回す仕組みが「Stream」らしいです。

SampleCode
projava/StreamSample2.java

    package projava;

    import java.util.List;
    
    public class StreamSample2 {
        public static void main(String[] args) {
            var data = List.of("yamamoto", "kis", "sugiyama");
    
            var result = 0;
            for (var s : data){
                if (s.length() >= 5){
                    result++;
                }
            }
            System.out.println(result);
        }
    }

こちらはListから５文字以上の文字列を抜き出して、新しいListを作る処理です。
実行結果として、「yamamoto」「sugoyama」が５文字以上なので「2」が表示されます。

コードでは、個数を数えるための変数resultを用意し、0を入れ、

    var result = 0;

ループの中で条件を満たした文字列があった場合、値を１増やします。

    result++;

こちらをStreamを使った処理に変換します。
（IntelliJ IDEAの機能を使い置換しています。）

    var result = (int) data.stream()        //Streamソース
            .filter(s -> s.length() >= 5)   //中間処理
            .count();                       //終端処理
        System.out.println(result);

「var result = 0;」から「System.out.println(result);」までがStreamへと置き換わっています。

Streamの処理は、
値の集合からStreamを取り出す「Streamソース」、
値を操作する「中間処理」、
値をまとめる「終端処理」
の３つに分かれます。

ここではListからStreamソースを取り出して、中間処理として５文字以上の文字列を処理する様フィルターし、
最後に終端処理として個数を数えています。

Steram処理は基本的にメゾッドの呼び出しを続けて書く「メゾッドチェーン」の形で書きます。
Javaでは「；」までが１行とみなされ、改行はスペースと同じ扱いなので「.」から始まるよう改行する書き方がよく使われるそうです。

SteramソースはStreamの取り出し口となります。
ListからStreamを取り出すときにはstreamメゾッドを使います。

    var result = data.stream()


Streamに流れる値を変換したり、取り捨て選択するのが中間処理です。
中間処理の様に、Streamではラムダ式が多く使われます。

    .filter(s -> s.length() >= 5)

ラムダ式は以下の様な形式となります。

    受け取った値を使うための変数　 -> 処理

Streamでの処理から最終的な結果を取り出すのが終端処理です。

    .count();
React、useEffectでAPIを呼び出し初期値を取得する

reactで一覧ページの初期値を呼び出し保存するまでをまとめました。

処理の流れ
①useEffectを使用してページ遷移した最初に一覧データ取得のAPIを呼び出す。
②呼び出したデータをuseState(一覧データを保管する)に格納する。

また今回APIの返却データが文字列形式なので、
文字列をJSON型に変換する記述もしております。

```
//一覧データ
    const [posts, setPosts] = useState([])

    初期表示データ取得処理
    useEffect(() => {
        let ignore = false

        fetch('APIのURlを記述')
            .then((res) => res.json())
            .then((data) => {
                if (!ignore) {
                    let posts_arr = [];
                    //取得したデータが文字列なのでJSON型に変換
                    posts_arr = JSON.parse(data);
                    //Stateに格納
                    setPosts(posts_arr.data);
                }
            })
        return () => {
            ignore = true
        }

    }, [])
【Swift】UIButtonを切り替える「isHidden」「isEnabled」「isSelected」「isHighlighted」をそれぞれ調べてみた

# isHidden
ボタンをtrue / false で「**表示/非表示**」にできる。
```swift:viewController.swift
button.isHiddden = true   // ボタンを非表示
button.isHiddden = false  // ボタンを表示
```

# isEnabled
**ボタンやセルが有効な状態**を示すBool値。
true / false で有効状態を変更することができる
条件を満たしていないときに、ボタンが押せないよう(非活性)にできる。
```swift:viewController.swift
button.isEnabled = true // ボタン有効
button.isEnabled = false // ボタン無効
```
if条件で動作を制限したい時に使うことが多い。

# isSelected
**ボタンやセルが選択されている状態**かどうかを示すBool値。
true / false で選択状態を変更することができる
```swift:viewController.swift
button.isSelected = true    //選択状態
button.isSelected = false   //未選択状態
```
#### true(選択状態)
![スクリーンショット 2023-01-25 17.57.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2604036/021d8534-3bdd-4476-71bf-187e19597fc6.png)

#### false(未選択状態)
![スクリーンショット 2023-01-25 17.48.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2604036/9e8b19d8-d9b5-11ce-d157-19aa6915a5f5.png)


# isHighlighted
**ボタンやセルが押されている最中かどうか**を示すBool値
ボタンが押され続けている時にボタンの色を変更したり、表示を変えることも可能になる。
```swift:viewController.swift
button.isHighlighted = true   // 押下されている状態
button.isHighlighted = false  // 押下されていない状態
```
#### true(押下されている状態)
![スクリーンショット 2023-01-25 17.51.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2604036/41cef00a-a7bb-f2c1-7125-4bfe97663cf2.png)

#### false(押下されていない状態)
![スクリーンショット 2023-01-25 17.52.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2604036/a2d7d2cd-8a82-3000-fe86-0a19276dae4f.png)
imuiListTableで横スクロールバーが出てしまう

#### 【問題】
ImuiListTableで、行が多く縦スクロールバーが表示されるとき、何をしても不要な横スクロールバーが出る。
![tempsnip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2818285/2b9083a3-79a9-a19c-0c47-b5050be50285.png)
↑この状態。


#### 【解決方法】
```<imart type="imuiListTable">```タグに ```resizable="false" shrinkToFit="false"```を追記し、```<col>```タグのwidthを逐一指定する。
スクロールバーは38くらい。よって、imuiListTableでのwidthを、```<col>```タグのwidth合計+38になるように設定するとうまくいく。

#### 【コード】
```html:sample.html
<imart type="imuiListTable" id="testList" data=testData width="638" hight="150" autoresizable="false" shrinkToFit="false">
    <cols>
        <col name="col1" width="200" caption="列1" />
        <col name="col2" width="200" caption="列2" />
        <col name="col3" width="200" caption="列3" />
    </cols>
</imart>
```
```js:sample.js
var testData = [
    {	"col1":"行1",
    	"col2":"行1",
    	"col3":"行1"
	},
	{	"col1":"行2",
    	"col2":"行2",
    	"col3":"行2"
	},
    {	"col1":"行3",
    	"col2":"行3",
    	"col3":"行3"
	},
	{	"col1":"行4",
    	"col2":"行4",
    	"col3":"行4"
	},
	{	"col1":"行5",
    	"col2":"行5",
    	"col3":"行5"
	},
    {	"col1":"行6",
    	"col2":"行6",
    	"col3":"行6"
	}
]
```

#### 【できた】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2818285/54fced22-ccb7-670a-8c60-e59ebcbceb0b.png)


スクロールバーは未来永劫出さないって設定方法がほかにあったら教えてください。
UNIXのコマンドまとめ④

引き続きUnixについてなんとなく書いていこうと思います。

第4回は、lsコマンドとオプションについて書いていきます。

***

##### コマンド

* <code>ls</code> : ディレクトリの中身を見る（list）
    * 隠しファイルを含める場合はオプション<code>-a</code>をつける
    * 例：<code>ls -a</code>
    * .configなどは設定ファイルの為、通常隠しファイルになっている
<br>

##### オプション
* <code><コマンド> --help</code> : 対象のコマンドで使用できるオプションを表示する
* <code>man　<コマンド></code> : 対象のコマンドのマニュアルを表示する
    * アニュアルは<code>q</code>で終了する
<br>

##### ワイルドカード
 ###### lsなどで項目を表示した際に、表示する項目を特定の条件で絞りたい時、ワイルドカードという仕組みが使える。

 *文字列の指定や比較、探索などを行う際に、任意の、あるいは特定のパターンに一致する文字列を表す特殊な記法や記号のことをワイルドカードという。*（引用：[ワイルドカードとは](https://e-words.jp/w/ワイルドカード.html)）
* 「.」を除く0文字以上の任意の文字列は「*」で表せる。 
    * 例）<code>ls. <オプション> *.conf</code> : 拡張子が「.conf」のファイルだけを表示する
* 「?」は任意の一文字を表す
    * <code>ls. <オプション> s?????</code> : 「s」で始まる6文字の項目のみを表示
* 「[]」は任意の一文字か範囲を表す
    * <code>ls. <オプション> [ps]?????</code> : 「p」または「s」で始まる6文字の項目を表示
    * <code>ls. <オプション> [f-h]*</code> : 「f」または「g」または「h」で始まる項目を表示
* 「{}」は任意の文字列のどれかを指定できる
    * <code>ls. <オプション> {sh,ho}*.</code> : 「sh」または「ho」で始まる項目を表示(※カンマの後にスペースを入れないよう注意)

<br>
以上
<br>
<br>


参考：
https://dotinstall.com/lessons/basic_unix_v3/55306
https://dotinstall.com/lessons/basic_unix_v3/55307
https://dotinstall.com/lessons/basic_unix_v3/55308
https://e-words.jp/w/ワイルドカード.html
snowflakeのキャッシュ解説


# 詳細はこちらへ

https://techblog.short-tips.info/sql/7010snowflake_cache.md



# snowflakeのキャッシング

snowflakeの三つのレイヤーのうち、クラウドサービスとコンピュートのレイヤーでキャッシュが動作する。

- クラウドサービスでは、「メタデータキャッシュ」「クエリレザルトキャッシュ」の二つが

- コンピュートレイヤーでは、「ローカルディスクキャッシュ」が働く

<img src="https://beyondjapan.com/cms/wp-content/uploads/2020/09/Snowflake_%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3.png">
from https://beyondjapan.com/blog/2020/09/snowflake/

各レイヤーの情報は上図の通り。

流れとしては

1. クエリリザルトキャッシュ内部に結果があるか確認し、データが変更されていないかを確認する
2. メタデータキャッシュに結果がないかを確認する。
3. ローカルディスクキャッシュに結果がないかを確認する。
4. 上記にデータがなければ実行



# 詳細はこちらへ

https://techblog.short-tips.info/sql/7010snowflake_cache.md
Dockerとは・・・？

 # Dockerとは
Dockerとは一言でまとめると・・・

***Docker社が開発したコンテナを用いた仮想環境を作成・配布・実行するためのプラットフォーム***

 # コンテナとは・・・
コンテナとはホストOS(WindowsやMacなど)上で動作する仮想環境のこと
従来の仮想環境ではホストOS上に仮想環境ごとにゲストOSを作成していました。しかし、何個もゲストOSを作ってしまう(仮想環境を構築してしまう)とPCの能力をたくさん使ってしまうため、ゲストOSを作らないで仮想環境を構築する技術であるコンテナが誕生しました。つまり、従来の仮想環境はホストOS上にゲストOSを作り作業をしていましたが、コンテナという箱を作ることで負担を少なくして作業ができるようになったわけです。

 # つまり、Dockerとは
Dockerというのは、より負担の少ない方法で仮想環境を構築できるような環境を提供しているわけですね。

 # 利点
仮想環境を箱に入れているため、コンテナを丸ごとコピーして他サーバに持ち出すことが可能です。さらに、従来はゲストOSというOSを毎回作らなくてはいけないため、コストもかかりますが、コンテナではホストOSと独立しているため、毎回OSを作らなくてはよくなりますので、低コストです。

 # 実際にDockerをいじってみる
Dockerをインストールするところから実施します。下記URLからexeファイルをダウンロードし、クリック後指示に従ってインストールします。インストールが完了したら、勝手に再起動します。起動したらコマンドプロンプトで「docker version」を入力し、エンターキーを押下してください。バージョンが表示されましたら、dockerのインストールが完了です。

 # Dockerコマンド
 ```
docker ps
```
上記のコマンドで動作しているコンテナの確認ができます。
```
docker ps -a
```
また、上記のように「-a」というオプションを追加すれば停止中のコンテナも一覧に出てきます。
※私の場合、インストールしたばかりでしたので、表示されませんでした。
```
docker images
```
上記のコマンドで取得済みのイメージの一覧を表示させることができます。ちなみに、イメージとはコンテナを動作させるために使うテンプレートファイルのことです。
```
docker pull [Image名]
```
上記でイメージをローカルに取得することができます。

 # Dockerを実際に動かしてみる
 ### Dockerの作成・実行
```
docker run hello-world
```
上記のコマンドで下記の3つの手順が完了しました。
 1. hello-worldのDockerイメージの取得
 2. 取得したイメージを元にコンテナの作成
 3. 作成されたコンテナの起動

上記のコマンドについて少し深堀りします。
 1. コンテナはイメージから作られます。しかし、イメージがダウンロードされていないとコンテナを作成することができません。そのため、まずはイメージをダウンロードする必要があります。最初に「docker images」コマンドを実行したら一覧表示されませんでした。これは、ローカルにイメージがないためです。その状態で「docker run hello-world」を実行したことによって、Docker Hubからイメージの取得を行います。試しに再度「docker images」コマンドを実行してみたら、一覧に表示されました。
 2. 先ほどのコマンドでイメージからコンテナを作成することができました。そのため、コンテナの一覧を確認するとコンテナの存在を確認することができます。
   <br>※この時「docker ps」コマンドでは一覧に表示されないと思います。なぜなら、hello-worldのコンテナは起動後、一連の処理を実行すると停止してしまうコンテナだからです。そのため、「docker ps -a」コマンドを実行するとコンテナを確認することができます。

 ### Dockerの削除方法
```
docker rm [コンテナID]
```
上記のコマンドでコンテナを削除できます。コンテナIDは「docker ps」コマンドで一覧表示した中のカラム名が「CONTAINER ID」の要素を指定してください。
```
docker rmi [イメージID]
```
上記のコマンドでイメージを削除できます。イメージIDは「docker images」コマンドで一覧表示した中のカラム名が「IMAGE ID」の要素を指定してください。

 # 参考資料

 https://www.pasonatech.co.jp/workstyle/column/detail.html?p=2675

https://matsuand.github.io/docs.docker.jp.onthefly/desktop/windows/install/

 https://docs.docker.jp/engine/reference/commandline/version.html

https://docs.docker.jp/engine/reference/commandline/ps.html

https://docs.docker.jp/engine/reference/commandline/images.html

https://docs.docker.jp/engine/reference/commandline/pull.html

https://qiita.com/tifa2chan/items/e9aa408244687a63a0ae

https://docs.docker.jp/engine/reference/commandline/rm.html

https://docs.docker.jp/engine/reference/commandline/rmi.html
nuxt3で環境変数の設定

## はじめに

nuxt3の環境変数の設定がnuxt2と変わったいたので記述します。

## nuxt.config.tsに環境変数を記述する

``` js
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      API_KEY: process.env.API_KEY
    },
  },
});
```

## .envに環境変数を指定する

```
API_KEY = 環境変数
```

## 環境変数のしよう方法

```vue
<script setup >
  const config = useRuntimeConfig();

  const { data } = await useFetch("タグ", {
    api: config.API_KEY,
  });
</script>
```
Excelファイルの差分をとるExcelCompare

テキストファイルの差分を取りたいのであれば、diffやgit-deltaが便利であるが、人類は時としてExcelファイルの差分を取らなければならない場合がある。

そんなときに便利なツールが

https://github.com/na-ka-na/ExcelCompare

である。Githubのリリースページからファイルをダウンロードして、`excel_cmp` とすれば動く。

macOSでは `brew install excel-compare` すれば動くみたい。

この記事は以上です。
中国のノーコードツール「伙伴云(houbanyun)」をさわってみた

# 伙伴云(houbanyun)
中国のノーコードサービス  [https://www.huoban.com/](https://www.huoban.com/)

# プラン
:::note info
2023年1月25日時点の情報です。
:::
　
https://www.huoban.com/pricing.html

最小ユーザーは30 Userの様です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/3ead2097-9875-0fc0-0491-4bfc700073b1.png)

プラン毎の機能比較表は下記URLに記載があります。

https://www.huoban.com/pricing-comparison.html


# 企業微信との連係

企業微信との連携を前に押し出していますね。

https://www.huoban.com/wxwork.html

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/1e1ce949-c222-c677-dc6c-e6506b66e765.png)




# 使ってみた所感
## アカウント開設・ログイン

携帯電話番号で登録してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/35777c11-103f-6ccd-e9e2-2dbdbe8acc1e.png)

## ポータル
シンプルなポータル画面です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/c93b0e40-7167-f910-8dd5-bb5390b51795.png)

## フォーム設計画面

フォーム設計画面もシンプルです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/e8c2cfa5-6aa2-cc29-fa86-2970eed215f1.png)

## 一覧画面

一覧画面で直接編集ができます。これは割と珍しいと思います。また、項目追加も一覧画面で可能な様です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/c57101b2-1b6a-dee8-3b57-b09a7b14c6f1.png)

## フォームレイアウト

すこし触った範囲では、画面は縦一列にしか項目を配置できませんでした。もしかするとどこかに設定が隠れており、もう少し柔軟な項目配置が可能かもしれません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/f3c760a8-5699-f600-c35c-ee4cc147cffb.png)

## 他のアプリからのレコード参照

他のアプリからレコード参照して、入力ができるようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/04d96940-963d-df8b-ddde-032079f01526.png)

ただ、選択の時に表示されるのは１項目だけでした（他項目を表示する方法があるかもしれません）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/e218a1b4-0ae4-c302-4fee-59b1b4aa056c.png)


# 総評
全体的にシンプルです。拡張性の有無、画面レイアウトの自由度の有無が少しさわっただけだとつかめませんでした。
Laravel sanctum ローカルからサーバー上のAPIに認証を行う方法

# 経緯
LaravelAPIを作成して、テストサーバーにデプロイ。
本番環境時は、同一ドメインで呼び出すため問題ないが、
ローカル環境から呼び出すときに少し手間取ったので書置き。

# 前提
Laravel9
sanctum SPA認証
フロントはReact
通信はaxiosライブラリを利用（withCredentialsとか必要な設定は済み）
ローカルはWindows

フロント、APIともにlocalhost起動時は認証が問題なく動く

## 結論
結局トップレベル
ドメインを合わせる。

## 手順
### API（サーバー）側
#### ドメインの設定
適当なドメインを設定
例）api.testXXX.com

#### envファイル修正

```.env
SANCTUM_STATEFUL_DOMAINS=testXXX.com
SESSION_DOMAIN=.testXXX.com
```

### フロント（ローカル）側
#### hostsファイル修正

windows/system32/driver/etc/hosts
```　hosts
.
.
略
127.0.0.1 local.textXXX.com
```
#### AxiosのbaseURL変更
baseURLを「api.testXXX.com」に書き換え

環境設定ファイルか直接かは人による

### 確認

local.textXXX.com（localhost）にアクセスして
ログイン認証後、認証制限がかかっているEndpointに接続

## その他
なんか他に方法ないのでしょうか。。
DockerとFlaskで始めるGraphQL

# はじめに


Grapheneのチュートリアルを参考にしています。

https://docs.graphene-python.org/en/latest/quickstart/

GraphQLとは、以下のようなものです。

>GraphQLはAPIのクエリ言語であり、データに対して定義したタイプシステムを使用してクエリを実行するためのサーバー側のランタイムです。GraphQLは特定のデータベースやストレージエンジンに縛られておらず、代わりに既存のコードとデータによってバックアップされています。

https://graphql.org/learn/

ptyhonでGraphQLを実装するには、Grapheneというツールが必要です。
Grapheneは、PythonでGraphQL APIを実装するためのツールを提供するライブラリです。

# 実装

今回の実装はdockerを使いました。

githubのレポジトリーです。

https://github.com/sugiyama404/flask_graphql



## ファイル構成

```console
.
├── docker-compose.yml
└── opt
    ├── Dockerfile
    ├── main.py
    └── requirements.txt

```

## 解説



```dockerfile:dockerfile
FROM python:3.8.8-buster
USER root

RUN apt-get update
RUN apt-get -y install locales && \
    localedef -f UTF-8 -i ja_JP ja_JP.UTF-8
ENV LANG ja_JP.UTF-8
ENV LANGUAGE ja_JP:ja
ENV LC_ALL ja_JP.UTF-8
ENV TZ JST-9
ENV TERM xterm

ENV PYTHONPYCACHEPREFIX=/root/pycache

RUN apt-get install -y vim less sqlite3
RUN pip install --upgrade pip --user
RUN pip install --upgrade setuptools --user

WORKDIR /root/opt

COPY . .
```


```dockerfile:docker-compose.yml
version: "3"
services:
  web:
    build: ./opt
    container_name: "flask"
    tty: true
    volumes:
      - ./opt:/root/opt
    ports:
      - 8080:8080
```

```text:requirements.txt
numpy==1.16.0
requests==2.23.0
Flask==2.2.2
Flask-Cors==3.0.10
graphene==3.2.1
```

### Grapheneのスキーマ

```text
{
  hello(name: "friend")
}
```

helloは飛び出すスキーマ名です。かっこの中は引数です。
この形で呼び出します。

resolve_helloでスキーマと連携された関数です。


```python:main.py
from graphene import ObjectType, String, Schema, Int
from flask import Flask, request, jsonify
from flask_cors import CORS
import json

app = Flask(__name__)
CORS(app)


class Query(ObjectType):
    hello = String(name=String(default_value="bob"))

    def resolve_hello(root, info, name):
        return f'My name is {name}'


schema = Schema(query=Query)


@app.route('/', methods=['POST'])
def hello():
    data = json.loads(request.data)
    result = schema.execute(data['query']).data
    return json.dumps(result)


if __name__ == "__main__":
    app.run(host='0.0.0.0', port=8080)
```

## 結果

![Screenshot 2023-01-25 at 15.48.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731268/0397cb88-34bc-4fd5-5369-688168b8a845.png)


![Screenshot 2023-01-25 at 15.48.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731268/7812593f-5111-8371-4990-a96d917af910.png)
AccessのVBAでAccessのウィンドウを最前面に移動

# 概要

AccessでSeleniumBasicを使ってChromeの自動処理してる。

自動処理終わったらChromeのウィンドウを残しつつ、Accessでダイアログ（終了通知）出したい。

でもAccessのウィンドウがChromeの後ろに隠れている状態になるで、Accessのダイアログが見えない。
（ダイアログ出したからといってAccessのウィンドウが最前面に来るわけではない）

Accessのウィンドウを最前面に移動させたい。

# やり方

user32に ```SetForegroundWindow``` という関数がある。
それを使うとウィンドウを最前面に移動できる。
Accessのウィンドウハンドルが必要だが、それは ```Me.hwnd``` で取得できる。

```vb:サンプルコード
'ウィンドウ操作はuser32.dllの力を借りる。
Private Declare Function SetForegroundWindow Lib "user32" (ByVal hwnd As Long) As Long


'Sub終わった後もChromeのウィンドウを残しておきたいので、この位置で変数宣言。
Dim WEB_DRIVER_ As Selenium.WebDriver


Private Sub tester_Click()
    
    
    Set WEB_DRIVER_ = New Selenium.WebDriver
    
    'Chrome起動。（Accessのウィンドウは後ろに隠れてしまう）
    Call WEB_DRIVER_.Start("chrome")
    
    'Chromeでなんかいろいろ自動処理。
    
    'Accessのウィンドウを最前面に持ってくる。
    SetForegroundWindow Me.hwnd
    
    'ダイアログ出す。
    MsgBox "花京院 イギー アヴドゥル 終わったよ", vbInformation
    

End Sub
```

# バージョン

Windows 10 Pro 22H2 OSビルド 19045.2546
Microsoft Access for Microsoft 365 MSO (バージョン 2212 ビルド 16.0.15928.20196) 32 ビット
Vegetaで負荷テストをする方法

# はじめに
備忘録
Vegetaで負荷テストをする方法のメモです。
どなたかのお役に立てれば幸いです。

# Vegetaで負荷テスト
次に示すコマンドのようにして、負荷テストをすることができます。
`-rate`は1秒間のリクエスト数
`-duration`はどれだけの時間実行するか
`-body`はPOSTのBodyを書いたファイル名（同じディレクトリに指定した名前のファイルを置く）
`-header`はヘッダー（今回はJSON形式なので`Content-Type: application/json`）
`> test.bin`で結果を`test.bin`というファイルに保存
```shell
echo 'POST http://localhost/main.php' | vegeta attack -rate=10 -duration=5s -body=body.json -header='Content-Type: application/json' > test.bin
```
# 負荷テストの結果を確認
次のコマンドにより、結果をターミナル上で確認することができます。
```shell
cat test.bin | vegeta report
```
次のコマンドにより、結果をグラフにして確認することができます。
```shell
cat test.bin | vegeta plot > test.html
```

# ブログもあります
https://kyit.net/how-to-use-vegeta/
Docker Compose の MySQL バックアップ・リストアを行う方法

Docker Compose で MySQL のデータ移行をしようと思ったのですが、chownエラーで悩まされたため、ちゃんとした移行方法を残すことにしました。

cp コマンドでマウントしてるディレクトリごとコピーはダメだね... (それはそう)

### 今回用いる構成

```docker-compose.yml
version: '3.2'

services:
  db:
    container_name: 'db-container'
    build: ./docker/db
    tty: true
    ports:
      - '3306:3306'
    environment:
      TZ: 'Asia/Tokyo'
    env_file:
      - .env
    volumes:
      - ./docker/db/data:/var/lib/mysql
      - ./docker/db/conf.d:/etc/mysql/conf.d
```

#### フォルダ階層

```bash
.
└── docker
    └── db
        ├── conf.d
        └── data // ここにvolumesがマウントされています。
```

### MySQLにログインし、バックアップを行う

```shell
$ docker compose exec db /bin/bash
# ここからコンテナ内のシェル
$ mysqldump --no-tablespaces -u <ユーザー名> -p -D <データベース名> > ./dump.sql
# パスワードを求められるので、打ちましょう
```

上記のコマンドを利用することで、`dump.sql`が作成されました。

```bash
.
└── docker
    └── db
        └── data // このフォルダ内に dump.sql が存在しているはずです。
```

### リストアを行う

リストア先は、先ほどと同じ構成のDockerコンテナとします。

```shell
$ docker compose exec db /bin/bash
# ここからコンテナ内のシェル
$ mysql -u <ユーザー名> -p -D <データベース名> < dump.sql

# dump.sqlが必要ない場合は削除しても大丈夫です。
# ここからコンテナ内シェル
$ rm dump.sql
```
【AWS】RDS MySQLを構築してみた（初心者用）

# ～ はじめに ～
今回は、作成した[**Webサーバー**](https://qiita.com/ponponpoko/items/e5553ef3ace2e4cb5633)のデータをDBで管理するためRDSを作成し、
Webサーバーからアクセスできるようにします。

今回の記事は、長くなりそうなため３パートに分けて書きます。

**【今回の流れ】**
　[**Part１：RDS作成前の事前準備**](https://qiita.com/ponponpoko/items/4b57170e5617f3259300)
　[**Part２：RDS MySQLの作成**](https://qiita.com/ponponpoko/items/2187f2eef73135a18a59)
　[**Part３：WebサーバーからRDS MySQLに接続**](https://qiita.com/ponponpoko/items/af684509bc553986d1ac)

<font color="Red">※ RDSで使用するDBエンジンは、[Amazon RDS for MySQL](https://docs.aws.amazon.com/ja_jp/AmazonRDS/latest/UserGuide/CHAP_MySQL.html)を使用する。</font>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727351/38482859-cb6b-8bc4-c3e5-6c8f405d5948.png)

:::note
[Amazon RDS（Amazon Relational Database Service）](https://business.ntt-east.co.jp/content/cloudsolution/column-23.html#section-01)とは ：
AWSのリレーショナル型のデータベースのこと。
[**フルマネージドサービス**](https://www.seeds.ne.jp/fullmanaged.html#:~:text=%E3%83%95%E3%83%AB%E3%83%9E%E3%83%8D%E3%83%BC%E3%82%B8%E3%83%89%E3%81%AF%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E5%88%A9%E7%94%A8,%E3%81%84%E3%81%9F%E3%81%A0%E3%81%91%E3%82%8B%E3%81%AE%E3%81%8C%E7%89%B9%E5%BE%B4%E3%81%A7%E3%81%99%E3%80%82)のため、OSやDBエンジンの管理、バージョンアップなどの運用に関する作業は、AWS側が行う。なので基本的にDBを使用するだけでよい。

**～特徴～**

1. 高可用性（マルチAZ）
1. 高いパフォーマンス（リードレプリカ）
1. 運用負荷軽減（バックアップ、メンテナンス）
1. 高いスケーラビリティ（ストレージ自動スケーリング）
1. 数分で簡単に構築できる
1. 暗号化による高いセキュリティ（AWS KMS）

[【AWSドキュメント】Amazon Relational Database Service (Amazon RDS) とは](https://docs.aws.amazon.com/ja_jp/AmazonRDS/latest/UserGuide/Welcome.html)
:::
:::note
[**RDB**](https://business.ntt-east.co.jp/content/cloudsolution/column-338.html)とは：
表形式の複数データを関連付けて使えるようにしたデータベースのこと。
高度な検索・集計処理をしたい場合に使用される。

[**NoSQL**](https://www.kagoya.jp/howto/it-glossary/server/nosql/)とは：
RDBのようにテーブル構造を表形式に固定することなく、さまざまな形式でデータを格納できるデータベースのこと。
大容量データを扱いたい場合に使用される。
:::
Rails ajax 処理の場合 ApplicationController に書いてある 共通処理 を スキップ したい

# 何がしたい？
全ページ共通で行いたい処理って、ApplicationControllerのbefore_actionに書いたりするじゃないですか？
例えば、今みんなの右上にあるQiitaの通知なんかもおそらくApplicationControllerのbefore_actionで件数やコンテンツをセットしているのではないかな。（これは妄想なので真相は知らんけどね）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147005/63663d88-cae9-da43-d8fe-009f578363c6.png" width="60%">

ApplicationControllerのbefore_actionって何も特別な記述をしていない場合、
Controllerに入る前に確実に通ってしまうのですが、そうなるとajaxなどの処理時にも通ることになるやん？
そうなると割と重い処理をbefore_actionに書いている場合ちょっとしたajax処理でも激オモになってしまうんですわ:poop:

例えばこんな記述していたらね
```ruby: application_controller.rb

before_action :kuso_omo

def kuso_omo

  sleep(1000)

end

```

# 解決方法
ajaxの場合だけ飛ばすって言われてもパラメーター探ってみても何もヒントがなかったんやけど、
respond_to使ったらなんとかできることがわかった。

```ruby: application_controller.rb

before_action :kuso_omo

def kuso_omo

  respond_to do |format|
    format.html
    format.js { return }
  end

  sleep(1000)

end

```

もっとスマートな書き方を知っている人は教えてね:relaxed:
中国のノーコードツール「简道云(jiandaoyun)」をさわってみた

# 简道云(jiandaoyun)
中国のノーコードサービス  [https://www.jiandaoyun.com/](https://www.jiandaoyun.com/)

# プラン
:::note info
2023年1月25日時点の情報です。
:::
　
https://www.jiandaoyun.com/index/price/

標準版も企業版も、30 Userスタートで、増加は10 User単位の様です。
そうなると、下記の様な価格感ですね。

　標準版の最低価格(30 User)は 168元 * 30 User = 5,040元/年
　企業版の最低価格(30 User)は 365元 * 30 User = 10,950元/年 

標準版と企業版の違いには、API,Webhookの有無がある様です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/4d4bcc25-11c5-4337-8384-73e28f43e474.png)


# 使ってみた所感
## アカウント開設・ログイン
携帯電話番号で登録。ログインできました。

## ポータルイメージ
すごくシンプルなポータルですね。見やすいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/f8ed1865-7b78-625c-3410-5fe93529b580.png)

## アプリ作成
アプリの作成は、空白、テンプレート、委託の３種類の様です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/0b0a96b3-6674-2c62-81e5-6647e676888d.png)

ワークフロー、フォーム、ダッシュボードの３種類。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/1e302184-d3d4-6914-7760-405b87dce6e6.png)

## フォーム設計画面

ノーコードのスタンダードな設計画面ですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/1895a9ac-1a5c-6093-3233-14df3c744495.png)

## 項目のレイアウト

1列～4列 で指定する様です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/51b7495b-f2a1-42e7-a5f5-98062146fadf.png)


## 印刷用のテンプレート

印刷用のテンプレートをエクセル画面のイメージで定義できるようです。力をいれていますね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/8604bc35-9208-bc01-f231-ebd998cc93bf.png)

## 一覧画面

一覧画面です。非常にシンプルでわかりやすいです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/f57eef2b-0d5a-dee7-5fbd-380397113262.png)

## 他のアプリからレコードを参照

他のアプリからレコードを参照して入力することができるようですが、なにかしら別途Tableの定義が必要？の様で上手く設定できませんでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/6f6512c6-e2d3-d291-b7a0-1255a654c824.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/3c0317cb-dde2-e6fe-9dac-6818356da0e1.png)

きちんと設定できると下図の様に選択ができるようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/1e072ac1-7897-2f22-8bb5-a34d531a703d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/cb62c10a-1a1d-a43b-63ed-a4f86026ade9.png)

# 総評
非常にシンプルです。kintoneに一番近しいイメージ。
コードによるカスタマイズがどこまでできるかは、要調査ですが、シンプルな要件はこれで十分実現できそうです。
NGINXのローカル環境の作成   【NGINX】編

### コマンド
```PHP
sudo tee /etc/yum.repos.d/nginx.repo <<EOF
[nginx-stable]
name=nginx stable repo
baseurl=http://nginx.org/packages/centos/\$releasever/\$basearch/
gpgcheck=1
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true

[nginx-mainline]
name=nginx mainline repo
baseurl=http://nginx.org/packages/mainline/centos/\$releasever/\$basearch/
gpgcheck=1
enabled=0
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true
EOF
```
### sudo yum install nginx
```javascript
nginxをイントール
ひたすら【y】を打つ
Complete!が出たらOK
```
### nginx -v
```javascript
バージョンを確認して入ってる事を確認
※例【nginx version: nginx/1.22.1】
```
### sudo systemctl start nginx ; sudo systemctl enable nginx
```javascript
nginxスタートしてnginx自動開始設定
```

### systemctl status nginx
```javascript
nginxが【Active: active (running)】になっていることを確認
```
### http://192.168.55.33/
をweb上で打つ
```javascript
ちゃんとページが表示されて、Welcome to nginx!と表示されていることを確認
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954863/195180fc-19c8-f479-532e-de939ed191ac.png)

次はこれ↓

https://qiita.com/panda-chibi/items/ed8975802659a1c91a7e
[Flutter] Avoid using private types in public APIs.の治し方の一例


![flutter-logo-sharing (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/c214d4ec-502d-9994-6656-6db9838548d9.png)


こんにちわ。いせきです。
今回は、とても簡単かつ短い内容ですが、気になるWarningを解消するための方法をご紹介します。

# サンプルコード(変更前と変更後)

### before（変更前）
```dart
class LicenseScreen extends StatefulWidget {
  const LicenseScreen({Key? key}) : super(key: key);

  @override
  _LicenseScreenState createState() => _LicenseScreenState();
}

class _LicenseScreenState extends State<LicenseScreen> {
```

### after（変更後）
```dart
class LicenseScreen extends StatefulWidget {
  const LicenseScreen({Key? key}) : super(key: key);

  @override
  LicenseScreenState createState() => LicenseScreenState();
}

class LicenseScreenState extends State<LicenseScreen> {
```

# 解説
まずは、警告文を紐解いていきましょう。

```
Avoid using private types in public APIs
```
日本語訳をすると「公開APIでプライベート型を使用しないようにする」とあります。これで分かった人もいるでしょう。僕はわかりました。

<b>「プライベート型」</b>という言葉がとても大切になります。</b>
<b>プライベート型とは、別のClassで使えないようにすることです。</b>

ここについては、別の記事で詳しく書こうと思います！！


要は、プライベート型ではなく、パブリック型にするということです。

では、変更後を確認してみましょう。


```dart
class LicenseScreen extends StatefulWidget {
  const LicenseScreen({Key? key}) : super(key: key);

  @override
  LicenseScreenState createState() => LicenseScreenState();
}

class LicenseScreenState extends State<LicenseScreen> {
```


小さなwarningですが、いいコードに少しでも近づけるためにはとても重要なものとなっています。ぜひ確かめていただけると幸いです。


# 最後に
最近寒いですね。エンジニアは家でぬくぬくしながら開発できるのでとても幸せですね。いい職業に着けてよかったなと思っています。エンジニア最高。
Introduction to TypeScript

TypeScript is a programming language that is a super set of JavaScript. It was developed and is maintained by Microsoft. TypeScript adds optional static typing and other features to JavaScript, making it a more powerful and versatile language for large scale software development.

One of the main advantages of TypeScript is its ability to catch errors at compile time, rather than at runtime. This can greatly reduce the number of bugs in a codebase, and make the development process more efficient. For example, if a developer accidentally assigns a string value to a variable that is supposed to be a number, TypeScript will immediately flag that error and prevent the code from running.

TypeScript also provides a more robust type system than JavaScript, including support for interfaces, classes, and modules. This allows for better code organization and reuse, as well as improved code readability. Additionally, TypeScript has built-in support for JSX, which is the syntax used for React components. This means that TypeScript can be used in React projects without any additional configuration.

Another advantage of TypeScript is its ability to work with existing JavaScript code. TypeScript files can be easily integrated into an existing JavaScript codebase, and TypeScript will work seamlessly with any JavaScript library or framework. This means that developers can gradually adopt TypeScript into their projects, rather than having to completely rewrite their codebase.

TypeScript is also widely used and supported by the community. Many popular libraries and frameworks, such as Angular and NestJS, are written in TypeScript, and there are many resources available for learning and troubleshooting.

In summary, TypeScript is a powerful and versatile language that can improve the development process, reduce bugs and improve the readability and organization of code. It can be integrated seamlessly with existing JavaScript code, and is widely supported by the community. This makes it a great choice for large scale software development.In order to prepare for TypeScript interviews,make use of the following resource,https://www.adaface.com/blog/typescript-interview-questions/ .
メールのローカルパートに使える記号、日本語も使える

# メールアドレスのローカルパートに```.-_```以外にも使える文字
```記号19文字 → ! # $ % & ' * + - / = ? ^ _ ` { | } ~```

# 出典
https://qiita.com/masatom86650860/items/1858c31b96c154921abb#comment-d3b5eeba29f7d1585b7a

https://qiita.com/yoshitake_1201/items/40268332cd23f67c504c#:~:text=%E6%96%87%E5%AD%97%20%E2%86%92%200~9-,%E8%A8%98%E5%8F%B719%E6%96%87%E5%AD%97,-%E2%86%92%20!%20%23

# ローカルパート、ドメイン名にも日本語を使うことができる
### 検索結果
https://xn--wgv71a119e.jp/about/

https://attrise.blog/ceo/archives/7544

 organization called the Internet Engineering Task Force (IETF) created a new email standard that supports addresses with ```non-Latin and accented Latin characters``` (e.g. 武＠メール.グーグル).
### 出典
https://blog.google/products/gmail/a-first-step-toward-more-global-email/

### 気づき
* 確かに他のサイトでも日本語　ドメインを紹介している。
* ラテン語じゃなくても使えると書いているように読める

# 出典
https://qiita.com/masatom86650860/items/1858c31b96c154921abb#comment-7c421bdb63fea6a79a8a

# ひらがなカタカナ漢字の正規表現
```rb
# 全角ひらがな、全角カタカナ、漢字
/\A[ぁ-んァ-ン一-龥]/
```
### 出典
https://gist.github.com/nashirox/38323d5b51063ede1d41#:~:text=nashirox/-,rails%2Dvalidates.rb,-Last%20active%202

### 気づき
他にもひらがな、カタカナだけもできる

# 感想
今回はコメントが来ないと```.-_```以外にも使える文字があること、日本語ドメインの存在に気づかなかった。
コメントをしてくださった方には感謝!!