OmniAICreator/Qiita-1.07M huggingface dataset:
日本語プログラミング言語の変数名に思うこと（しょうもない思考実験）


## 前書き

日本語プログラミング言語の経験はほぼないです。
後、この記事に出てくる言語は私が適当に想像した架空言語なんで、あしからず。

また、予防線多めになっております。

それから、私が考えた架空言語でアルファベットを使うと端末が爆発する。という仕様があるとします。（英語使えよ。という意見を封じるため。）

## 結論だけ知りたい人用

英語では大文字小文字でクラス名とインスタンス名を区別できるが、日本語では区別しにくい。
また変数名も省略しづらい。
という個人の妄想です。。

## クラス名とインスタンス名どっちだよ問題

四角形クラスがあるとする。

```
クラス 四角形 {
    // コンストラクタ
    作成(縦,横) {
        自.縦 = 縦
        自.横 = 横
    }
    面積() {
        結果 自.縦 * 自.横
    }
}
```

インスタンスを作るとする。

仮に以下のように…【分岐します】

```
四角形 = 四角形.作成(3, 4)
コンソール.表示(四角形.面積())
```

### …作れたとする。（インスタンス名とクラス名が同じでもOK）

この場合、インスタンス名とクラス名が同じで
個人的にはかなり違和感があるが、まあ慣れの問題なので
まあ、いいか…という感じ。はい。

### …作れなかったとする。（インスタンス名とクラス名が同じはNG）

この場合、どちらかの命名を変えなければならない。

仮に英語だったら小文字、大文字で楽に区別できるが、日本語ではそうはいかない。

そうなると次の選択肢か考えられる。

```:案1
四角形 = 四角形クラス.作成(3, 4)
```

```:案2
四角形1 = 四角形.作成(3, 4)
```

```:案3
_四角形 = 四角形.作成(3, 4)
```

```:案4
形 = 四角形.作成(3, 4)
```

まず案1はよさそうに見える。
デメリットとしてはクラスという文字列がついてなんか嫌。ということだろう。

逆に考えてほしい。皆が普段使っているオブジェクト指向の言語でクラス名の末尾に「Class」とつけること！というコーディング規約があったら、どう思うか。
つまり、そういうことである。

案2は1ってなんだよ！という感じである。

案3はなんかダサい。（超主観）

案4は、、、、、分からん。自分はいいが、几帳面な人は嫌いそう。

とのことから、どの案でもプログラマ全員を納得させるのは難しそうだ。

## 変数名省略しにくい問題

まだ問題はある。

それは省略しにくい。ということだ。

仮にこのようなコードがあるとする。（クラス名は案1を適用）

```
ファイルリーダー = ファイルリーダークラス.作成(ファイル)
バッファリーダー = バッファリーダークラス.作成(ファイルリーダー)
```

長ったらしいので省略する。

```
フリ = ファイルリーダークラス.作成(ファイル)
バリ = バッファリーダークラス.作成(フリ)
```

うむ。短くなった。
まあ、別にいい。
自分は。

だが、考えてほしい。
原点に戻って考えてほしい。

何故？日本語プログラミング言語を使うのか？
何故？わざわざ他の主流な言語ではなく、日本語プログラミング言語を選んだのか？？

原点に戻って考えてほしい。

理由は人によるだろうが、主な理由は…

**母国語である日本語で、文章を読むようにコードを理解できるのがいいから！**

と思ったから。ではないだろうか。

（理由が違った方は以下を読まなくていいです。）

その観点から変数名を省略したコードを読むと
「フリ」「バリ」ってなんだよ！！！！！
という感じになってしまうのだ。

この観点に従うと、日本語プログラミング言語ではこう書くしかない！！！！

```
ファイルリーダー = ファイルリーダークラス.作成(ファイル)
バッファリーダー = バッファリーダークラス.作成(ファイルリーダー)

// この後に長々と処理が書かれる。
```

この変数名なら日本語として、何の苦も無く、文章として、コードを理解することができるだろう。

しかし、やはり変数名が長い！というデメリットがある。

```:全角だからね。しゃーない。
fileReader
ファイルリーダー
```

**このデメリットを解決するのは、「フリ」「バリ」を許容する心を持つことしかないだろう。**

（そして、こういう命名は宗教問題である。）
【Laravel】現在のURI（クエリパラメータ付き）を取得する

# 結論
`
$request->getRequestUri()
`
上記で取れる。

## 雑な使用例
こんなかんじ
```/app/Http/Controllers/HogeController.php
    public function index(Request $request)
    {
        dd($request->getRequestUri());        
```
↓以下のように出力されるはず
`"/ルーティングで設定したドメイン省いたパス?クエリパラメーター"`

# 余談
- Laravelの機能ではなくPHP側でいい、ということなら`$_SERVER['REQUEST_URI']`でよい
- クエリパラメーターは不要なら`$request->path()`でよい
- URIではなくURL(ドメインも含めて)ということなら`url()->full()`でよい
# さらに余談
`$request->getRequestUri()`は以下で定義されていた

```backend/vendor/symfony/http-foundation/Request.php
    public function getRequestUri(): string
    {
        return $this->requestUri ??= $this->prepareRequestUri();
    }
```
なので厳密にはLaravelではなくSymfonyの機能っぽい
他のパス取得は結構情報があるけどこれだけ情報があまりなかったのはそのせいかも

おわり
lenis.jsでposition:fixed要素のoverflow:scrollを効かせる

## はじめに
慣性スクロールを手軽に実装できる、Lenis.jsを使っているサイトでモーダルを作成した際、position:fixed要素のoverflow:scrollが効かない時の対処法です。

## 解決方法

### 1. スクロール要素に `onwheel="event.stopPropagation()"`を追加
```
<div class="fixed" onwheel="event.stopPropagation()">
```

### 2. jsでwheelイベント伝播を停止
```
const modal = document.querySelector('#cc-main')
modal.addEventListener('wheel',(e)=>{
  e.stopPropagation()
})
```
をjsに追加すれば解決します。

## 参考元
~~https://github.com/studio-freight/lenis/issues/14~~

https://github.com/darkroomengineering/lenis/issues/14
ゼロつくDeepLearning_cp7

# はじめに

こちらは「[ゼロつく3DeepLearning_cp5](https://qiita.com/ponponnsan/items/7d6971ff1353fca355cc)」の記事の続きです。

「[ゼロから作るDeep Learning ―Pythonで学ぶディープラーニングの理論と実装](https://www.amazon.co.jp/%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E4%BD%9C%E3%82%8BDeep-Learning-%E2%80%95Python%E3%81%A7%E5%AD%A6%E3%81%B6%E3%83%87%E3%82%A3%E3%83%BC%E3%83%97%E3%83%A9%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0%E3%81%AE%E7%90%86%E8%AB%96%E3%81%A8%E5%AE%9F%E8%A3%85-%E6%96%8E%E8%97%A4-%E5%BA%B7%E6%AF%85/dp/4873117585)」についてのまとめを数回に分けて行いたいと思います。

YOUTUBEでのおすすめチャンネルは以下の通り
- [ヨビノリ](https://www.youtube.com/@yobinori)
- [AIcia Solid Project](https://www.youtube.com/@AIcia_Solid)
- [3Blue1BrownJapan](https://www.youtube.com/@3Blue1BrownJapan)

# 何をまとめるのか
さて、このまとめではpythonのコードを動かしたり、何か実装するということは行いません。

ちなみに、書籍のソースコードは[こちら](https://github.com/oreilly-japan/deep-learning-from-scratch)にまとめられています。

なので1章はとばし、2章からのスタートになります。
そして6章も学習実装時のテクニックなので飛ばします。

今回は**7章**をまとめます。


引き続き個人的に重要だと思うポイントを記載したいと思います。

## 7章 畳み込みニューラルネットワーク

畳み込みニューラルネットワークはConvolutional neural network、通称CNNと呼ばれ、画像や音声認識などでよく使われます。
CNNのメカニズムについて詳しく説明します。 

CNNは、畳み込み層とプーリング層で構成されます。


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1159060/6be6b10b-4186-d061-fdcb-af0f64b419f1.jpeg" width="500">

### 畳み込み層

畳み込み層で行う処理は、「畳み込み演算」です。畳み込み演算の例を見てみましょう。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1159060/81f3aa76-67e4-d944-aa5c-c64a24efd917.jpeg" width="500">

掛け算を⊛で表します。

#### パディング

入力データの周囲に固定のデータ(例えば0など)を埋めることがあります。これをパディングと言って、畳み込み演算ではよく用いられます。

例えば幅1のパディングとは、周囲を幅1ピクセルの0で埋めることを言います。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1159060/bb6ee419-71b6-e1f5-c905-cb1aae8db31c.jpeg" width="500">

なぜパディングを行うかというと、畳み込み演算を何度も繰り返して行うと、最終的に出力が1になってしまい、それ以上の畳み込み演算を適応できなくなる可能性があります。

それを回避するには、パディングを利用します。先の例では、パディングの幅を1に設定すれば、入力サイズの(4,4)に対して、出力のサイズも(4,4)のままのサイズが保たれて次の層に渡すことができます。

#### ストライド

フィルターを適用する位置の間隔をストライドと言います。

今までの例はストライド1でした。つまり、1個ずつフィルターをずらすというやり方です。

例えばストライドを2に設定すると、2個ずつフィルターをずらして計算します。

#### 3次元の畳み込み演算

これまで見てきた畳み込み演算の例は、縦方向と横方向の2次元の形状を対象としました。しかし、画像の場合は奥行きの方向も考える必要があります。奥行きの方向をチャンネル方向と呼びます。

チャンネル方向に複数の特徴マップがある場合、チャンネルごとに入力データとフィルターの畳み込み演算を行い、それらの結果を加算してひとつの出力を得ます。


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1159060/594c52ac-4b43-baf7-bbaf-b53f78c36dd7.png" width="500">

https://kiyosucyberclub.web.fc2.com/PytnPage08-01.html

### バッチ処理

ニューラルネットワークの処理では、バッチ処理を行いました。畳み込みニューラルネットワークでも同じようにバッチ処理に対応したいと思います。

そのために各層を流れるデータは4次元のデータとして格納します。具体的には、(batch_num, channel, height, width)という順にデータを格納するものとします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1159060/4c2b7cae-8a21-ebf8-18e7-8c1668c0c5e4.jpeg" width="500">

### プーリング層

プーリングは、畳み込みが終わった層に対して、縦・横方向の空間を小さくする演算です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1159060/a28579c6-7015-6748-0d15-f8348c85de97.jpeg" width="500">

上記の図は最大(max)プーリングといい、対象となる領域「2×2」に対して最大となる要素を取り出します。

プーリング層の特徴として、位置がある程度変化しても値が変化しないということが挙げられます。
そのため、学習データに対してより特徴量が大きいものはそのまま出力され、画像の特徴を少ない空間で表現することができます。
Twitterのリツート前後１時間のTweetを取得するためのBookmarklet

```bookmarklet.js
{
// 前後１時間
const toUTC = (dt) => {
    const isoString = dt.toISOString();
    return isoString.replace('T','_').split('.')[0] + '_UTC';
}    
const dt = document.querySelectorAll('time')[0].dateTime;
const t = Date.parse(dt);
const anHourAgo = new Date(t - (3600 * 1000));
const anHourLate = new Date(t + (3600 * 1000));
console.log(`${anHourAgo.toLocaleString()}～${anHourLate.toLocaleString()}`);
const url = document.querySelectorAll('link[rel=canonical]')[0].href;
const userName = url.split('/')[3];
const queryValue = `from:${userName} since:${toUTC(anHourAgo)} until:${toUTC(anHourLate)} include:nativeretweets`;
const queryEncoded = encodeURIComponent(queryValue);
const href = `https://twitter.com/search?q=${queryEncoded}&src=typed_query&f=top`;
document.location.href = href; 
}
```
Hexabase TypeScript SDKの使い方（リアルタイム通知）

[Hexabase（ヘキサベース）](https://www.hexabase.com/)は企業においても安心して利用できるBaaS（Backend as a Service）を提供しています。多くのBaaSがそうであるように、主にフロントエンド開発者に利用してもらいたいと考えています。そこで現在、TypeScript SDKの開発が進められています。

この記事ではHexabase TypeScript SDKのインストールと、チャットやコラボレーションアプリに使えるリアルタイム通知の使い方を紹介します。

## インストール

インストールはnpmやyarnを使って行います。

```jsx
# npmの場合
npm install @hexabase/hexabase-js

# yarnの場合
yarn add @hexabase/hexabase-js
```

## インポート

インポートすると、 `HexabaseClient` というオブジェクトが取得できます。

```jsx
import { HexabaseClient } from "@hexabase/hexabase-js";
```

## 初期化

HexabaseClientを初期化します。

```jsx
const client = new HexabaseClient();
```

## 認証

Hexabaseでは業務利用を想定しているため、利用する際に認証情報が必須になります。最初はメールアドレスとパスワードで認証し、その後はトークンを使ってGraphQLにアクセスします。 `client` を使って処理します。

初回の認証は次のようになります。emailとパスワード、またはトークンが必須です。

```jsx
await client.login({email, password, token});
```

後はこの `client` に対して処理を行います。

## データを作る

データはワークスペース → プロジェクト → データストア → データアイテムの順番にデータを取得します。

```js
client.setWorkspace(workspaceId);

// 対象プロジェクト
const project = await client.currentWorkspace.project(projectId);

// 対象データストア
const datastore = await project.datastore(datastoreId);

// 新規レコード
const item = await datastore.item();
```

## リアルタイム通知について

リアルタイム通知は、 `item` に対して行います。この時、他のユーザーも通知を受け取れるように、保存されているデータを利用します。

```javascript
await item.save();
```

そして、該当のデータアイテムに対して `subscribe` を行います。 `subscribe` は `unsubscribe` で解除できます。購読するイベントとして `update` を指定できます。現状は `update` のみです。

```javascript
item.subscribe('update', data => {
	console.log(data);
});
```

`data` は `ItemSubscription` クラスとなっており、構造は以下のようになっています。

```javascript
class ItemSubscription {
  public id?: string;
  public actionname?: string;
  public comment?: string;
  public createdAt?: Date;
  public item?: Item;
  public displayorder?: number;
  public email?: string;
  public fileIds?: string[];
  public isFetchreplymail: boolean;
  public isNotify: boolean;
  public isChanged: boolean;
  public isNotifyToSender: boolean;
  public isSendItemUnread: boolean;
  public postForEel: boolean;
  public postMode: string;
  public user: User;
}
```

## 通知を送る

通知を送る際には、コメント機能を使います。このコメントを保存すると、その内容が購読している他のユーザーに届く形です。

```javascript
const comment = await item.comment();
comment.set('comment', 'コメント');
await comment.save();
```

コメントは文字列のみ送れるので、JSON.stringifyなどを使ってオブジェクトを文字列に変換して送ると良いでしょう。

## まとめ

SDKを使うことで、Hexabaseのリアルタイム通知機能が簡単に利用できます。ぜひご活用ください。リアルタイム通知は、Webアプリケーションのコラボレーション機能や、チャット機能などで活用できます。

Hexabaseには他にもバイナリファイルのアップロードや認証などの機能があります。それらの機能も利用してください。

[Hexabase \| 新規事業向け開発・競争領域でのDX実現をサポート](https://www.hexabase.com/)
Hexabase TypeScript SDKの使い方（選択項目の更新）

[Hexabase（ヘキサベース）](https://www.hexabase.com/)は企業においても安心して利用できるBaaS（Backend as a Service）を提供しています。多くのBaaSがそうであるように、主にフロントエンド開発者に利用してもらいたいと考えています。そこで現在、TypeScript SDKの開発が進められています。

この記事ではHexabase TypeScript SDKのインストールと、単一・複数項目選択フィールドの更新方法を紹介します。

## インストール

インストールはnpmやyarnを使って行います。

```jsx
# npmの場合
npm install @hexabase/hexabase-js

# yarnの場合
yarn add @hexabase/hexabase-js
```

## インポート

インポートすると、 `HexabaseClient` というオブジェクトが取得できます。

```jsx
import { HexabaseClient } from "@hexabase/hexabase-js";
```

## 初期化

HexabaseClientを初期化します。

```jsx
const client = new HexabaseClient();
```

## 認証

Hexabaseでは業務利用を想定しているため、利用する際に認証情報が必須になります。最初はメールアドレスとパスワードで認証し、その後はトークンを使ってGraphQLにアクセスします。 `client` を使って処理します。

初回の認証は次のようになります。emailとパスワード、またはトークンが必須です。

```jsx
await client.login({email, password, token});
```

後はこの `client` に対して処理を行います。

## データを作る

データはワークスペース → プロジェクト → データストア → データアイテムの順番にデータを取得します。

```js
client.setWorkspace(workspaceId);

// 対象プロジェクト
const project = await client.currentWorkspace.project(projectId);

// 対象データストア
const datastore = await project.datastore(datastoreId);

// 新規レコード
const item = await datastore.item();
```

## 選択項目について

Hexabaseでは、データストアの各フィールドに対してテキストや数字などの型を指定できます。利用できる型は以下の通りです。

- テキスト
- 複数行テキスト
- 選択肢
- ラジオ
- チェックボックス
- 自動採番（入力はできません）
- 数値
- 計算式（入力はできません）
- 日付・時刻
- 添付ファイル
- ユーザー
- データベース参照
- ラベル（画面表示のみ。入力はできません）
- セパレータ（画面表示のみ。入力はできません）

今回は上記の型の内、選択肢とラジオ、そしてチェックボックスについて紹介します。

## 選択肢について

一つしか選択できない項目の場合、selectタグを利用するかと思います。この場合、まずHexabaseにある選択項目を表示します。この情報は、`datastore` オブジェクトの `field` に格納されています。

以下は、 `Category` という項目の選択肢を取得し、HTMLに表示する例です。選択肢は `id` と指定してください。

```js
const field = await params.datastore.field('Category');
// オプション項目を取得
const options = await field.options();
// HTMLに反映
const html = options.map(option => `
	<option id="${option.id}">${option.value.ja}</option>
`).join('');
document.querySelector('form [name="Category"]').innerHTML = html;
```

## 保存について

保存時には、この選択された項目を指定します。

```javascript
// 選択肢・ラジオの場合
item.set('Category', 10000);

// チェックボックスの場合
item.set('Category', [10000, 10001]);
```

そして `save` メソッドで保存します。

```javascript
await item.save();
```

## まとめ

SDKを使うことで、選択肢・チェックボックスの更新が簡単にできます。ぜひご活用ください。他にも利用できる型は多数あるので、アプリケーションの設計に合わせて活用してください。

Hexabaseには他にもバイナリファイルのアップロードや認証などの機能があります。それらの機能も利用してください。

[Hexabase \| 新規事業向け開発・競争領域でのDX実現をサポート](https://www.hexabase.com/)
[Azure AD] Azure AD(Microsoft Entra)とテナントとサブスクリプション

### 環境
- Windows 11 Enterprise
***
### まとめ
- #### Azure AD(Microsoft Entra)
    組織内のユーザが Microsoft365 や Azure Portal 、外部の SaaS アプリケーションなどのリソースにアクセスする際に認証と認可を行う統合的な ID プラットフォーム。
- #### テナント
    組織で使用するユーザアカウントやアプリなどのオブジェクトをまとめた境界。
    Azure ADと1:1で対応している。
- #### サブスクリプション
    Microsoft Azureのサービスやリソースを利用する際の、課金とアクセス制御の単位。
    1テナントで複数のサブスクリプションを持つことができる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2955010/e1d45bba-4f0a-0d60-1f65-25bf483505bc.png)

***
### 管理グループ（例）
#### 1つ以上のサブスクリプションをまとめることができるグループ単位。サブスクリプションの支払い担当者が同じ場合や、サブスクリプションの配下に対して同じ権限を設定したい場合に管理グループを用いる。
- Management groupps:企業
- Subscriptjions:部門
- Resource groups:部署、チーム
- Resouces:担当者

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2955010/fbd90dbe-458c-5ff3-b783-4d7e7506174a.png)

***
### 参考リンク
- [Microsoft Entra テナントの概要](https://learn.microsoft.com/ja-jp/microsoft-365/education/deploy/intro-azure-active-directory)
- [Microsoft Entra テナントに Azure サブスクリプションを関連付ける、または追加する](https://learn.microsoft.com/ja-jp/entra/fundamentals/how-subscriptions-associated-directory)
- [複数の Azure サブスクリプションの整理と管理](https://learn.microsoft.com/ja-jp/azure/cloud-adoption-framework/ready/azure-best-practices/organize-subscriptions)
- [Azure ADテナントとは？課金の仕組みや運用方法を解説](https://www.rworks.jp/cloud/azure/azure-column/azure-practice/27990/)
生成AI

![wmp73e8e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3675297/45d9483d-74c1-22d3-54b0-947841c4b574.png)
![Screenshot 2022-9-4 at 05.56 AM (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3675297/2eda68e6-ef66-e56b-c5bf-613741fe6142.png)
![ima01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3675297/38ea6cc1-3e96-891d-31d4-da9efb98955a.png)
[rails]「とりあえずransack付けてみたいだけなんです」

自力でプルダウンなど、文字入力以外の検索方法やソート機能を実装しようとすると少し大変かもしれませんが、gemのransackを用いると超簡単に作れてしまいます。

手っ取り早く実装してみたい人向けです。
細かい仕様等は公式ドキュメントを参照してください。
# 前提
- crud実装済み
    - 本記事ではpostモデルでMVCを組んでいます

# 実装

> gemのインストール

```rb:Gemfile
gem 'ransack' #追記
```
追記後ターミナルで`bundle install`を実行

> controller記述
```rb:PostsController
class PostsController < ApplicationController
    def index
        @posts =  Post.all #投稿一覧表示用（もともとある前提）
        
        @q = Post.ransack(params[:q]) #追記
        @posts= @q.result #追記
    end
end

```
> view記述
```erb:index.html.erb
<%= search_form_for @q  do |f| %>
    <%= f.search_field :title_cont %>
    <%= f.submit "search" %></p>
<% end %>
```
検索フォームでは`<%= f.search_field :title_cont %>`の`title_cont`部分のように

**`カラム名_オプション`というようなransack特有の記述をします。**

※本記事の場合、`title`カラムを部分検索できる`_cont`を利用しているという形になります。

この記事では紹介しきれないので詳しくは↓を参考にしてください。

https://pikawaka.com/rails/ransack#便利なメソッドを使おう

:::note 
カラム名にオプションを付ければ、**セレクトボックスやプルダウン、ラジオボタン**で検索を行うことも可能です。

コード自体も一般的な記法に`カラム名_オプション`としてするだけなので、是非色々試してみてください。
:::

> ソート機能

検索の他にも指定したカラムを`昇順⇔降順`に並び替えも実装することが可能です。
その際viewの記述は以下のようになります。
```erb:index.html.erb
<%= sort_link(@q, :カラム名, "表示したい文字") %>
```
詳しい仕様は以下記事を参考にしてください。

https://pikawaka.com/rails/ransack#ビューファイルを編集しよう

# よくあるエラー
実装して確認しようとすると以下の様なエラーが出るかと思います。

```:エラー文
Ransack needs HogehogeModel attributes explicitly allowlisted as
searchable. Define a `ransackable_attributes` class method in your `HogehogeModel`
model, watching out for items you DON'T want searchable (for
example, `encrypted_password`, `password_reset_token`, `owner` or
other sensitive information). You can use the following as a base:

class HogehogeModel < ApplicationRecord
  # ...
  def self.ransackable_attributes(auth_object = nil)
    ["created_at", "id", "hogehoge_1", "hogehoge_2", "hogehoge_3", "updated_at"]
  end
  # ...
end
```

> 解決策

ご自身のエラー文内にある
```ruby:エラー文
 def self.ransackable_attributes(auth_object = nil)
   ~~~ご自身のカラムの情報~~~
 end
```
の部分を実装しているモデルに張り付けることにより解消されます。
※本記事の場合Postモデルに張り付ける。

また、アソシエーションを行っている場合再度似たようなエラー文が出ます。

```ruby:エラー文
 def self.ransackable_associations(auth_object = nil)
    ~~~省略~~~
 end
```
先程と似ていますが前回`ransackable_attributes`だったのに対し、今回は`ransackable_associations`と表記されています。
こちらも同じくモデルに張り付けることでエラーが解消します。

# 参考

https://pikawaka.com/rails/ransack#ransack%E3%82%92%E5%B0%8E%E5%85%A5%E3%81%97%E3%82%88%E3%81%86

https://zenn.dev/nagan/articles/e627918c192265
react-error-boundaryで errorを調べる @yukilulu0229

https://ja.legacy.reactjs.org/docs/error-boundaries.html

## install

https://www.npmjs.com/package/react-error-boundary

```
npm i --save -D  react-error-boundary
```

## ErrorFallBackを作る

```utils/ErrorFallBack.tsx
import React from "react";
import { FallbackProps } from "react-error-boundary";

export const ErrorFallBack = ({ error }: FallbackProps) => {
  // Call resetErrorBoundary() to reset the error boundary and retry the render.

  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre style={{ color: "red" }}>{error.message}</pre>
    </div>
  );
};

```

## エラーの原因を調べる

```app.tsx
import React, { useEffect } from "react";
import { ErrorBoundary } from "react-error-boundary";
import { ErrorFallBack } from "./utils/ErrorFallBack.tsx";
import Sidebar from "./components/sidebar/Sidebar.tsx";

function App() {
  return (
    <div className="App">
      <ErrorBoundary FallbackComponent={ErrorFallBack}>
        <Sidebar />
      </ErrorBoundary>
    </div>
  );
}

export default App;

```

特定の部位を囲む

## メッセージがブラウザに表示されるので調べる

```画面
Something went wrong:

Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore
```
メッセージを検索する

:::note warn
表示が見にくければスタイルをあてて position: absoluteにする
:::
GitHub記法　チートシート

# リポジトリ
### 作成
1. [New Repository]をクリックし、新しいリポジトリを作成。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3568688/c4511282-6a48-0e53-6597-6f8c7d5afdc6.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3568688/ddcb9509-4727-ca5b-6901-3d85fc9b3bfc.png)

2. 入力
<dl>
 <dt></dt>
 <dt>[Repository name]</dt>
 <dd>リポジトリ名</dd>
 <dt>[Description]</dt>
 <dd>概要</dd>
 <dt>[Public or Private]</dt>
 <dd>リポジトリ参加者だけに見せたいときはPrivate</dd>
 <dt>[Create repository]で新規作成完了</dt>
</dl>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3568688/a668519a-7b04-19dc-c313-7a4dcff609d7.png)

# クローン
```コマンドプロンプト
git clone (Gitからコピーしたテキスト)
```
# コミット
```コマンドプロンプト
git add .
git commit -m "n回目のコミットです。"
```
# タグ
```コマンドプロンプト
git tag 【タグ】
```

# プッシュ
```コマンドプロンプト
'' Mainをプッシュ
git push origin

'' developをプッシュ
git push origin develop

'' タグをプッシュ
git push origin【タグ】
```

# ブランチ
```コマンドプロンプト
'' 現在のブランチ確認
git branch

'' ブランチを作成し切り替え
git checkout -b 【新規】

'' リモートブランチを一覧表示
git branch -r

''　ローカルを含んだ全てのブランチ表示
git branch -a

'' ブランチの変更
git checkout 【ブランチ名】
```

# コミットを削除
```
'' コミットを削除(Windows)
git reset --soft "HEAD^"
git reset HEAD
```

# マージ
```コマンドプロンプト
'' 【develop】を【main】にマージするとき
git checkout 【main】
git merge 【develop】
git push origin 【main】
```

# プルリクエスト
1. GitHubを確認する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3568688/0c0e26d4-491e-8b53-bedb-01d2126afc95.png)
　
2. [Create pull request]でプルリクエストを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3568688/1b662354-25ad-9f2d-6e2d-b27539d0a219.png)
　
3. [Files changed]で差異を確認しレビューを行う。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3568688/d8003db2-09e2-edb2-d045-dd3fd682a51b.png)
　
4. レビュー・指摘事項修正が完了すればMainにマージする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3568688/80392f56-6f55-00d6-8969-e0d3328b504b.png)
eBayエラー:コールは成功しているが、動かない

eBayのAPIを実行した際に、コールは成功している(200)が、なぜか動かない現象に遭遇しました。
エラーログは以下の通りです。

>21916013
> This Token has been revoked by App. The end user must complete the Auth & Auth consent flow again to generate a valid token.


いろいろな可能性が考えられますが、よくある事例としては、**ユーザーがUserIDやパスワードを変更したためトークンが失効するためです。**

解決策としては、再度トークンを取得する必要があります。

尚、ebayが意図的にトークンを失効にしてくる場合もあり、その際にはアカウントになにか問題が発生しているということになります。
https://developer.ebay.com/support/kb-article?KBid=2087 

今回は、TradingAPI、Auth'n'authトークンで発生した問題でした。

参考：
Errors by Number
https://developer.ebay.com/devzone/xml/docs/reference/ebay/errors/errormessages.htm
とあるサードパーティーのヘルプページ
https://support.joelister.com/hc/en-us/articles/5001456839323-eBay-Error-21916013-This-Token-has-been-revoked-by-App-
【Next.js】npm run build時のコンポーネントエラー

## はじめに
ローカルでは正常に機能していたが、デプロイするにあたり```npm run build```をしたところコンポーネントのエラーで詰まってしまったのでメモします

## 問題
ディレクトリ構成は以下の通り
```
app　
 └src
   └pages
      └api
      └checkout.tsx
      └register.tsx
```
この**checkout.tsx**がエラーでbuildされない
エラーを解消させると動作しなくなる繰り返し

## 解決
ディレクトリに問題があり、コンポーネントは**pages**以下に入れるとbuildされない
src以下にlibフォルダを作りその中にcheckout.tsxをいれて```npm run build```すると成功！
```
app
 └src
   ├lib
     └checkout.tsx
   ├pages
     └api
     └register.tsx
```

## さいごに
まだまだ勉強を始めたばかりなので、pages以下にはページとして表示されないコンポーネントは入れないということが勉強になりました
（build時にディレクトリ構成のエラーだということは教えてくれない...!）
gulp-sassでいつの間にかCSSの出力形式が減っていた

gulp-sassで出力されるCSSの形式を変更しようと、「compact」と「nested」を試したところ以下のようなエラーが出力されました。
```
Error: Error: Unknown output style "compact".
```
```
Error: Error: Unknown output style "nested".
```
どうやら「expanded」と「compressed」しかサポートされなくなったようです。
成形されるか、圧縮されて1行で出力されるかしかなくなったんですね。
・・・うん、特に困らないですね。

## 参考
https://stackoverflow.com/questions/76987391/sass-error-unknown-output-style-compact

https://www.npmjs.com/package/gulp-sass
Capybaraメソッドまとめ

最近System Specで使用する課題をおこなったで今回使用したメソッドをまとめてみました。

### メソッド

##### fill_in "ラベル名", with: "入力内容"
ラベル名はテキストボックスの``id属性``で、入力内容はテキストボックスに``実際に書き込む内容``を記述します。
するとテキストボックスに書き込んだ内容が入ります。

-例-
```
fill_in "user_name", with: "user"
```

#### click_button "ボタン名"
ボタン名は押したいボタンの``id属性``を記述します。
するとボタンをクリックします。

-例-
```
click_button "create-task"
```

#### click_link "リンク名"
リンク名は押したいリンクの``id属性``を記述します。
するとリンクをクリックします。

-例-
```
click_link "new-task"
```

#### check "チェックボックス名"
チェックボックス名はチェックボックスの``id属性``を記述します。するとチェックボックスが選択されます。

```
check "user_admin" 
```
#### select "オプション名", from:　"メニュー名"
オブション名にはセレクトボックスで指定したい内容を、メニュー名にid属性を記述。
するとセレクトボックスが選択されます。

```
select "完了", from: "task_status"
```

#### visit[url]
特定のURLにアクセスします。
```
visit new_session_path
```

#### first('.class').click

classには指定したい``class属性``を記述します。
すると、配列の一番最初の該当するclass属性のボタンをクリックします。
```
first('.show-user').click
```
#### all(.class')[0].click

classには指定したい``class属性を0の部分は実際に選択したい配列番号を記述します。
すると、指定した配列番号に該当するclass属性のバタンをクリックします。

```
all('.destroy-user')[0].click
```

他にもたくさんあるのでテストを通して深めていきたいと思います。
学校の課題のテンプレートのCGIでoperation not permittedと言われた話


## 結論
ダウンロードしたとき、ファイルつくに拡張属性`com.apple.quarantine`がわるさをしていたみたい。
なので以下のコマンドで`com.apple.quarantine`削除をする。
```sh
xattr -d com.apple.quarantine ./cgi-bin/upload_file.py
```

## ことの始まり
<details><summary>前提</summary>

```
├── cgi-bin
│   └── upload_file.py
└── local_server.py
```

```python:local_server.py
import http.server
http.server.test(HandlerClass=http.server.CGIHTTPRequestHandler)
```
```python:cgi-bin/upload_file.py
#!/usr/bin/env python3
print("Content-Type: text/plain")
print("")

print("Hello World")
```
- `upload_file.py`は権限755を割り当ててある
- 記事書いてる人はPython初心者
</details>

「PythonでCGIを利用しCGI経由でPythonを実行しよう。」という内容の課題だった。

課題のテンプレートからダウンロードしてブラウザからアクセスしても
```sh
zsh: operation not permitted: ./cgi-bin/upload_file.py
```
Permission deniedではなく上記のエラーが出てきた。
### 試したこと
#### フルディスクアクセス

調べるとフルディスクアクセスがどうのこうので思い当たる節に当ててみた。
- terminal
- pythonの実行ファイル
- zsh

しかしどれに与えても今回は解決する様子がなかった。

#### xattrを外す(今回の原因)
調べてるとこんなフォーラムがあった。
[operation not permitted running shell scripts](https://discussions.apple.com/thread/253681758?sortBy=best)
どうやらファイルにはxattrというファイルに拡張属性をつける機能があるらしくその操作と説明は
[xattr コマンドの使い方／ヘルプの日本語訳（macOS でパーミッションの@付き拡張属性の操作）
](https://qiita.com/KEINOS/items/e218c4d8da5451c9e59c)が非常にわかりやすかった。

今回はダウンロードしたときにつく`com.apple.quarantine`属性がわるさをしていたみたい。
```sh
xattr -d com.apple.quarantine ./cgi-bin/upload_file.py
```
で削除すると無事成功した。
親オブジェクトに子オブジェクトの項目の値を表示したい


+ [親オブジェクトに子オブジェクトの項目の値を表示したい](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007XIEW3)

親から子の参照なので数式ではできない。フローなどの自動化処理で値をセットするというのが普通の答えかな。

しかし、画面フローとは... 確かにこれがいいだろう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/82ef7f0b-2a5f-25e1-dd82-7b56382d6b46.png)


入力系はカスタムコンポーネントを作ったけど...

+ [親子の参照関係の画面のリフレッシュ](https://qiita.com/Keiji_otsubo/items/b9084f9d171bcd6d3bda)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/0e8b2fd7-93dc-9cfe-6c77-323dfba0e07e.png)


リピーターコンポーネントがSpring 24から使えるので入力系もフローかもしれませんね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/c0564c7c-d11b-8470-7450-fe74544732d0.png)


https://northernforce.connpass.com/event/305509/presentation/
M1 MacにDockerを使ってRedmine構築

#### 環境
- MacBook Air (M1, 2020)
- macOS Sonoma 14.3
- Docker Desktop 4.26.1 (131620)
- Docker version 24.0.7, build afdd53b
- Docker Compose version v2.23.3-desktop.2
- MySQL 5.7
- redmine 5.1

## やりたいこと
Redmineを立ち上げ
定額サービスやクラウド上に構築も検討するもお金を掛けたくなかった
手間も掛けたくなかった

## うまくいかなかったこと
ネットで検索するとM1 MacのDocker上でRedmineを構築する記事がありそれを試した。
しかし私の環境ではredmineのコンテナもmariadbのコンテナもrestartを繰り返した。
試行錯誤の結果、REDMINE_DB_MYSQLをコメントアウトするとrestartはしなくなることがわかった。

## うまくいった方法
こちらの記事に従いMySQLに変更

https://qiita.com/KWS_0901/items/962ff0db367d8ea2473a

しかしdocker-composeでエラーが出る
こちらの記事の対処法を試す

https://qiita.com/jizya/items/38f15271903de629d1ab

立ち上がりました！

## まとめ
1. フォルダ作成
    ```
    redmine/
        ├ data/           #マウント場所
        |    └ db       
        |    └ plugins  
        |    └ themes        
        └ docker-compose.yml
    ```
2. docker-compose.yml作成
    ```
    version: "3"
    
    services:
      redmine:
        container_name: redmine
        image: redmine
        restart: always
        ports:
          - 8081:3000
        environment:
          REDMINE_DB_MYSQL: redmine-db
          REDMINE_DB_PASSWORD: redminepass
        volumes:
          - ./data/plugins:/usr/src/redmine/plugins
          - ./data/themes:/usr/src/redmine/public/themes
    
      redmine-db:
        platform: linux/x86_64
        image: mysql:5.7
        container_name: redmine-db
        restart: always
        environment:
          MYSQL_ROOT_PASSWORD: redminepass
          MYSQL_DATABASE: redmine
        volumes:
          - ./data/db:/var/lib/mysql
        command: mysqld --character-set-server=utf8 --collation-server=utf8_unicode_ci   
    ```
3. docker-compose実行
    ```
    docker-compose up -d
    ```
4. ブラウザからアクセス
    http://localhost:8081
5. ログイン
    ID: admin
    pass: admin
AWS 操作練習 ElasticIPの登録

# 概要
AWS で GitLabサーバーを構築した.
しかしずっと立てているのはもったいない,時間指定で立てることにする.
その時,立てるたびにIPが変わってしまう問題に直面

ElasticIPを使用して,その問題を解決しよう.

# 前提条件
Webサーバー等(今回はGitLabサーバー)など,サーバーがAWS上にある.

## あああ
ElasticIPをを割り当てる.(とりあえず初期設定でよい)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1505183/ced6f4a5-b2bd-f85a-3a58-ddf70bcdf988.png)

割り当てられました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1505183/dabc89c9-1b13-d8ae-e6b3-3f38951a5efb.png)

「ElasticIPアドレスの関連付け」から,EC2インスタンスに関連付けをします.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1505183/8545dba7-c9de-035e-fb34-6c3d9a7552fe.png)

GitLabサーバーを対象のインスタンスとして設定します.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1505183/a8cef631-9311-c1f6-f0a0-5a0033da7649.png)

これで終わり.

# 終わりに
これでGitLabサーバーを落としてもグローバルIPが変更されることはなくなりました！

次は,時間でGitLabサーバーを落としたり立ち上げたりしましょう.

end
Microsoft Fabric の組み込みの AI モデルで自然言語に対する解析・分析をしてみる

## はじめに
 
Microsoft Fabricでは、生成AIを含むAIモデルを使用して、AOAIなどの構築なしにデータ処理が可能です。※F64以上の容量が必要です。

https://learn.microsoft.com/ja-jp/fabric/data-science/ai-services/ai-services-overview

今回は、製品レビューのデータセット2万件（英語）に対して以下の操作を試みます。

- レビューの翻訳（Azure AI Translator サービスモデルを使用）
- レビューから感情の抽出（Azure OpenAI のモデルを使用）

注意：この情報は2025年1月時点のものです。記載されているコードや処理内容、時間は変わる可能性がありますのでご了承ください。

## 検証開始

### 1. データの確認
 
まず、データを確認します。データは既にレイクハウスに保存されているため、これをデータフレームに読み込みます。

レビューはレーティングとともに英語で記載されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/6904334e-5963-7c1a-fad5-9021b00e3cf2.png)


およそ2万件のデータセットであることがわかります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/bcd45f88-7421-3da3-1471-4426cec11007.png)


### 2. 翻訳
 
翻訳タスクを実行するためには、SynapseMLのTranslate()を使用します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/86a31fa1-b4a4-2e8f-3dc6-97b6613cf29f.png)


### 3. 感情の抽出

まずそれぞれプロンプトにしてやります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/5dda6f57-6780-9c79-6269-9834601376e4.png)

 
ここではOpenAICompletion()を使用します。一つ一つがpromptなのでまあまあ時間かかりますね。手動でやるときはもっと絞って確認しないとやりづらそう。単純に呼び出し方自体でもうちょいいいやり方がある気もする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/999de391-58f2-d675-8786-ae89ca86b1a4.png)



### 4. 保存

結果をレイクハウスに保存します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/c6df3b33-cd08-31fa-fce9-159b1300ce0c.png)

また、感情をカンマ区切りで抽出したので感情で分析するために展開と保存を行います

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/08ddaf12-304b-d9d9-6cad-4c48145aa29d.png)


### 5. 可視化

レイクハウス上のデータを Power BI で可視化してみました。
ワードクラウドとかを使っています。よくある感情分析レポートの例ですね。なお、全体のレイアウトは Power BI Copilot の力を借りてます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/0691678f-b0a6-f4b0-fa48-dae4e5f6f140.png)

## 所見

複数の感情を抽出できないかなと思って生成 AI 使ってみましたが、カンマ区切りを例示しても結構出力の形式がばらついたので再現性みたいなところはやはり課題になりますね。
処理時間についても少しかかるので実装の仕方に改善の余地ありって感じ。
[Next.js] Next.jsで番号入力フォームを作成する方法

# はじめに
Next.jsでは`react-native-screen-keyboard`というパッケージが使えない為、自分で番号入力フォームを作成してみました！(※React Native向けのパッケージであり、Next.jsはReactベースである為)
今回は、数字のキーパッドを持ち、Backspaceボタンで数字を削除できるシンプルな番号入力フォームを紹介します！

# 1.NumberInputコンポーネントの作成
まず、NumberInputコンポーネントを作成します。
このコンポーネントは、数字の入力フィールドとキーボードを含んでいます。
CSSでスタイリングしています！
```jsx
// components/NumberInput.js
import React, { useState } from "react";
import styles from "../styles/NumberInput.module.css";

const NumberInput = () => {
  const [number, setNumber] = useState("");

  const handleKeyClick = (key) => {
    setNumber((prevNumber) => prevNumber + key);
  };

  const handleBackspace = () => {
    setNumber((prevNumber) => prevNumber.slice(0, prevNumber.length - 1));
  };

  return (
    <div className={styles.NumberInput}>
      <input
        type="tel"
        value={number}
        placeholder="Enter number"
        readOnly
        className={styles.inputField}
      />
      <div className={styles.keyboard}>
        {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((num, index) => (
          <button
            key={num}
            onClick={() => handleKeyClick(String(num))}
            className={styles.button}
          >
            {num}
          </button>
        ))}
        <button className={`${styles.button} ${styles.emptyButton}`} disabled></button>
        <button
          key={0}
          onClick={() => handleKeyClick(String(0))}
          className={styles.button}
        >
          0
        </button>
        <button onClick={handleBackspace} className={styles.button}>
          Backspace
        </button>
      </div>
    </div>
  );
};

export default NumberInput;
```
```css
/* styles/NumberInput.module.css */
.NumberInput {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px;
}

.inputField {
  padding: 10px;
  font-size: 16px;
  margin-bottom: 10px;
}

.keyboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.emptyButton {
  visibility: hidden;
}

.button {
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  border: 1px solid #ccc;
  background-color: #fff;
}
```
# 2.フォームをページに組み込む
次に、作成したNumberInputコンポーネントをページに組み込みます！
```jsx
// pages/index.js
import React from 'react';
import NumberInput from '../components/NumberInput';

const HomePage = () => {
  return (
    <div>
      <h1>番号を入力する</h1>
      <NumberInput />
    </div>
  );
};

export default HomePage;
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570986/b1c07aa4-ab9e-efdc-7c98-ca2c432001af.png)


# まとめ
今回は、Next.jsを利用して簡単な番号入力フォームを作成しました！
この記事を参考に、番号入力フォームを作成してみてください！
LVMで普通のストライプ化ボリュームをつくる

# 概要
Linux環境でLVMストライプボリュームを作成した際のメモです。

######   要件
:::note info　
ボリューム化対象 : sda sdb sdc 3台の物理HDD
ボリューム化対象領域 : すべての領域
論理ボリュームのタイプ : ストライピング
volume group(vg)名 : vg1
logical volume名 : stripe_lv1
:::


# 物理ディスク確認
```pvdisplay
pvscan
pvs
```
# 物理ディスク初期化
```
dd if=/dev/zero of=/dev/sda bs=1M count=1 #sdb sdcも同様
pvcreate /dev/sda /dev/sdb /dev/sdc
```
# vg作成
```
vgcreate vg1 /dev/sda /dev/sdb /dev/sdc
```
###### vg確認
```
vgs
vgscan
vgdisplay
```
# lv作成
```
lvcreate -l 100%VG -i 3 -I 64 -n stripe_lv1 vg1

ボリュームグループ:vg1に対して論理ボリューム:stripe_lv1を作成する。
ストライプ数は3でストライピングサイズは64KBとする。
```
# lv確認
```
lvs
lvdisplay
```

# ファイルシステム作成とマウント
/dev/ボリュームグループ名/論理ボリューム名でlvのパスを指定する
```
mkfs.xfs -f /dev/vg1/stripe_lv1  

mount /dev/vg1/stripe_lv1 /data
```

# 補足
lsblk -fなどでlvのUUIDを確認できるのでfstabにUUID記載でマウントも可能だった。


# 参照
https://access.redhat.com/documentation/ja-jp/red_hat_enterprise_linux/8/html/configuring_and_managing_logical_volumes/creating-lvm-logical-volume_managing-lvm-logical-volumes
素数判定関数を使って簡単なゲームを作った話①

ご覧いただきありがとうございます。
この内容は、複数に分けて投稿しています。全体をご覧になりたい方は、以下のリンク先よりご確認ください

https://qiita.com/hitoki_univ/items/8e3feab0add17befc700

# ゲームの概要
このゲームは、複数人による対戦形式を想定して作成しています。
動作の概要は以下の通りです。

①プレイヤーの人数を選択
②プレイヤーの名称を入力
③順番に素数を入力していく。この時、前回より大きな素数を入力する必要がある。制限時間内に前の人より大きな素数を見つけられないとゲームオーバー

今回は、生徒たちにより楽しみながらプレイしてもらえるように、ランキング機能も作成します。
ちなみに、前の人より大きな素数を入力していく、という遊び方は、学習支援事業で会った生徒さんの発案です。

# 次の投稿について
次回(第2回)は、このゲームのタイトル画面を作成します。
~~投稿次第、リンクを追加するので、ぜひご覧ください~~
以下のリンク先から、是非ご覧ください。

https://qiita.com/hitoki_univ/items/5893785797243794d33a


このプロジェクト全体の内容をご覧になりたい方は、以下のリンク先のまとめページよりご確認ください。

https://qiita.com/hitoki_univ/items/8e3feab0add17befc700
素数判定関数を使って簡単なゲームを作った話(目次用)

こんにちは。
私は、週に何度か某市の学習支援事業の指導員として活動しています。そこでは中学生に指導を行っているのですが、その休憩時間に、生徒たちに多少なり頭を使いながら遊んでもらえるものを作れないかと思い、今回のゲームの開発に至りました。
以前の大学の授業で、JavaScriptで素数判定を行うプログラムを作成していたので、今回はそれを活用して、Webアプリケーションの形式でゲームを作っています。

# この投稿の構成
一度にすべての内容を書くと長くなりそうなので、何回かに分けて投稿します。このページは、その目次のような形で使っていければと思います。

# 第1回
1回目は、作成したゲームの概要等について簡単に説明しています。
詳しくは、↓のリンク先をご参照ください。

https://qiita.com/hitoki_univ/items/e1b8ec9e6c7c39d5e761

# 第2回
2回目は、ゲームのタイトル画面を作成します。
詳しくは、↓のリンク先をご参照ください。

https://qiita.com/hitoki_univ/items/5893785797243794d33a

# 第3回
3回目は、プレイヤー名や制限時間等を設定する画面を作成します。
詳しくは、↓のリンク先をご参照ください。

https://qiita.com/hitoki_univ/items/96e45db86abc4dae71d7

# 第4回
4回目は、満を持してゲームの基本動作の部分を作成します。
詳しくは、↓のリンク先をご参照ください。

https://qiita.com/hitoki_univ/items/c47836e9f418af6b1eb8

# 第5回
5回目は、ランキングを表示する画面を作成します。
詳しくは、↓のリンク先をご参照ください。

https://qiita.com/hitoki_univ/items/48277ba380cf46ac45fe
PowerShellでcer形式の自己署名証明書を作成し、ps1ファイルに署名する方法

PowerShellでpfx形式ではなくcer形式の自己署名証明書を作成し、ps1ファイルに署名する方法を説明します。

**1. 自己署名証明書を作成する**

自己署名証明書を作成するには、`New-SelfSignedCertificate`コマンドを使用します。

```powershell
# 自己署名証明書を作成する
New-SelfSignedCertificate -CertStoreLocation "Cert:\LocalMachine\My" -Subject "CN=My Code Signing Certificate" -KeyExportPolicy Exportable -FriendlyName "My Code Signing Certificate" -Type CodeSigning -NotAfter ([DateTime]::Today.AddDays(30))
```

このコマンドは、C:\path\to\cert\code.cerというファイル名で、cer形式の自己署名証明書を作成します。

**2. 署名用証明書のパスを確認する**

署名用証明書のパスを確認するには、`Get-ChildItem`コマンドを使用します。

```powershell
# 署名用証明書のパスを確認する
$cert = Get-ChildItem -Path Cert:\LocalMachine\My | Where-Object {$_.Subject -like "*Code Signing*"} | Select-Object -First 1
```

このコマンドは、署名用証明書のパスの一覧を表示します。

**3. 署名するps1ファイルを指定する**

署名するps1ファイルを指定するには、`$ps1File`変数にファイルのパスを指定します。

```powershell
$ps1File = "C:\path\to\ps1\file.ps1"
```

**4. 署名を行う**

署名を行うには、`Set-AuthenticodeSignature`コマンドを使用します。

```powershell
# 署名を行う
Set-AuthenticodeSignature -Path $ps1File -Cert $certPath
```

このコマンドは、`$ps1File`変数で指定されたファイルに、`$certPath`変数で指定された証明書を使用して署名します。

**具体的なコードは、以下のとおりです。**

```powershell
# 自己署名証明書を作成する
New-SelfSignedCertificate -CertStoreLocation "Cert:\LocalMachine\My" -Subject "CN=My Code Signing Certificate" -KeyExportPolicy Exportable -FriendlyName "My Code Signing Certificate" -Type CodeSigning -NotAfter ([DateTime]::Today.AddDays(30))

# 署名用証明書のパスを確認する
$cert = Get-ChildItem -Path Cert:\LocalMachine\My | Where-Object {$_.Subject -like "*Code Signing*"} | Select-Object -First 1

# 署名するps1ファイルを指定する
$ps1File = "C:\path\to\ps1\file.ps1"

# 署名を行う
Set-AuthenticodeSignature -Path $ps1File -Cert $certPath
```

このコードを実行すると、C:\path\to\ps1\file.ps1というps1ファイルに、C:\path\to\cert\code.cerという自己署名証明書を使用して署名されます。

**注意点**

* 自己署名証明書は、信頼できる認証局 (CA) によって発行された証明書ではないため、署名されたファイルは、信頼されていない可能性があることに注意してください。
* 署名されたファイルは、署名の有効期限が切れると、実行できなくなる可能性があることに注意してください。

**補足**

* `New-SelfSignedCertificate`コマンドで、`-Type CodeSigning`オプションを指定すると、cer形式の自己署名証明書が作成されます。
* `Set-AuthenticodeSignature`コマンドで、`-Cert`パラメーターに、`-Type CodeSigning`オプションを指定して作成された証明書を指定すると、cer形式の証明書を使用して署名されます。
PowerShell 自己署名証明書　スクリプトに埋め込む方法2 cer 

`.cer` ファイルを PowerShell スクリプトに埋め込むことは通常は適切ではありませんが、`.cer` ファイルを使用して自己署名証明書を作成し、それをスクリプト内で取得する方法を示します。そして、そのスクリプトを実行する方法も以下に説明します。

**1. 自己署名証明書の作成とエクスポート**

```powershell
# 証明書の発行者とサブジェクトを指定
$certParams = @{
    Subject = "CN=YourCertificateName"
    KeyAlgorithm = "RSA"
    KeyLength = 2048
}

# 自己署名証明書の作成
$certificate = New-SelfSignedCertificate @certParams

# 証明書を CER フォーマットでエクスポートして、.cer ファイルに保存
$cerFilePath = "C:\Path\To\Your\Certificate.cer"
$certificate | Export-Certificate -FilePath $cerFilePath -Type CERT

# エクスポートした .cer ファイルの場所を確認
Write-Host "Certificate exported to: $cerFilePath"
```

**2. PowerShell スクリプトに埋め込む**

作成した `.cer` ファイルを PowerShell スクリプトに埋め込むことはできませんが、そのファイルへのパスをスクリプトに記述することはできます。

```powershell
# .cer ファイルのパス
$cerFilePath = "C:\Path\To\Your\Certificate.cer"

# .cer ファイルから証明書を読み込み
$certificate = New-Object System.Security.Cryptography.X509Certificates.X509Certificate2
$certificate.Import($cerFilePath)

# 取得した証明書を利用する
# 例: HTTPS サーバーの設定など
Write-Host "Certificate Subject: $($certificate.Subject)"

$cert=Get-ChildItem -Path Cert:\CurrentUser\My -CodeSigningCert
Set-AuthenticodeSignature -FilePath PsTestInternet2.ps1 -Certificate $cert
```

**3. スクリプトの実行**

PowerShell スクリプトを実行するには、PowerShell コンソールまたはターミナルでスクリプトのパスを指定します。例:

```powershell
.\YourScript.ps1
```

ただし、自己署名証明書はセキュリティのため、慎重に扱う必要があります。適切な手順とセキュリティプラクティスに従って証明書を管理してください。
OpenID Connect Playground 



# We couldn't find an OAuth token granted to the 'Customer Order Status' connected app. Double check that you configured the OpenID Connect Playground correctly and try again.

この質問は残念ながら質問者によって削除されています。
+ [I'm doing this project Implement the OAuth 2.0 Web Server Flow and facing error :](https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000NFd3b)

:::note
I had the same issue but was able to resolve it by creating a new playground and completing the challenges again.

https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000A8vqWSAR
:::


+ [This site can't be reached](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007T4xRa)

:::note
I noticed that if I copied the URL of my Playground eg. https://brave-shark-7br2i9-dev-ed.trailblaze.lightning.force.com/ I got a error in the OpenID Connect Tool

However if I went to the My Domain Page and used this to generate the full URL https://

brave-shark-7br2i9-dev-ed.trailblaze.my.salesforce.com then it was able to connect to my org and generate a token as requested
:::

:::note
I had the same problem, and using the MyDomain URL didn't fix it. It worked correctly using the Manage option of the Connected App, placing "All users may self-authorize" in the "Permitted Users" option within the "OAuth Policies" section.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/c330b815-b1ce-2227-049d-65baaf2b5420.png)
:::

:::note
I also got that error screen "Something went wrong" in the OpenID Connect Playground. And as always, it's just a syntax error or "forgot to uncheck the checkbox" :). Had to go back to the first assessment to check every setting in my newly created app via App Manager, and then to make sure everything typed into the OpenID Connect Playground is copied correctly. It autofills with similar info.
:::
SFTP 同期

```
using Renci.SshNet;
using System;
using System.Collections.Generic;
using System.IO;

public class SftpManager : IDisposable
{
    private SftpClient sftpClient;

    public SftpManager(string host, int port, string username, string privateKeyFilePath, string passphrase = null)
    {
        var privateKeyFile = new PrivateKeyFile(privateKeyFilePath, passphrase);
        var keyFiles = new[] { privateKeyFile };

        var connectionInfo = new ConnectionInfo(host, port, username, keyFiles);

        sftpClient = new SftpClient(connectionInfo);
    }

    public void Connect()
    {
        if (!sftpClient.IsConnected)
            sftpClient.Connect();
    }

    public void Disconnect()
    {
        if (sftpClient.IsConnected)
            sftpClient.Disconnect();
    }

    public void UploadFile(string localFilePath, string remoteFilePath)
    {
        try
        {
            using (var fileStream = new FileStream(localFilePath, FileMode.Open))
            {
                sftpClient.UploadFile(fileStream, remoteFilePath);
            }
        }
        catch (Exception ex)
        {
            HandleSftpException(ex);
        }
    }

    public void DownloadFile(string remoteFilePath, string localFilePath)
    {
        try
        {
            using (var fileStream = File.OpenWrite(localFilePath))
            {
                sftpClient.DownloadFile(remoteFilePath, fileStream);
            }
        }
        catch (Exception ex)
        {
            HandleSftpException(ex);
        }
    }

    public void DeleteFile(string remoteFilePath)
    {
        try
        {
            sftpClient.DeleteFile(remoteFilePath);
        }
        catch (Exception ex)
        {
            HandleSftpException(ex);
        }
    }

    public void CreateDirectory(string remoteDirectoryPath)
    {
        try
        {
            sftpClient.CreateDirectory(remoteDirectoryPath);
        }
        catch (Exception ex)
        {
            HandleSftpException(ex);
        }
    }

    public void DeleteDirectory(string remoteDirectoryPath)
    {
        try
        {
            sftpClient.DeleteDirectory(remoteDirectoryPath);
        }
        catch (Exception ex)
        {
            HandleSftpException(ex);
        }
    }

    public IEnumerable<SftpFile> ListDirectory(string remoteDirectoryPath)
    {
        try
        {
            return sftpClient.ListDirectory(remoteDirectoryPath);
        }
        catch (Exception ex)
        {
            HandleSftpException(ex);
            return null;
        }
    }

    public bool IsConnected()
    {
        return sftpClient.IsConnected;
    }

    private void HandleSftpException(Exception ex)
    {
        Console.WriteLine($"SFTP Error: {ex.Message}");
    }

    public void Dispose()
    {
        if (sftpClient != null)
        {
            sftpClient.Dispose();
            sftpClient = null;
        }
    }
}
```
WSL2における時刻のズレをPowerShellの力を借りて合わせるワンライナー

## 論よりコード(結論)

前提条件

* WSL2 内から Windows プロセスの起動を許可していること
* PowerShell 7 以上であること
    
```bash:Ubuntu上のbashで
wsl.exe -u root date --set @$(pwsh.exe -Command 'Get-Date -UFormat %s')
#=> 設定日付が表示される (e.g. Fri Jan 26 12:25:47 JST 2024)
```

### 前提条件についての説明

Windows プロセスの起動を許可の件は、defaultが許可なので特に手を入れる必要はないはず。確認先は [`wsl.conf` 内 `[interop]` セクションの `enabled` キーの値が `true`](https://learn.microsoft.com/en-us/windows/wsl/wsl-config#interop-settings) です。
PowerShell の件は、Windows 標準添付は 1 や 5 だったりするので https://aka.ms/PSWindows から 7 をインストールしておきましょう。PowerShell 1 でもやる方法は後述。

## どういうことなのか

2024年1月時点で標準入手できる Linux kernel では「[WindowsとWSL2の時刻のずれを修正する](https://qiita.com/moriai/items/f633e01728d8d062adb1)」あるように、時刻がズレます。
同記事に書かれているように `hwclock` コマンドの参照先 `/dev/rtc0` もズレてることがあるため、同記事ではファイルのタイムスタンプで Windows OS 側と同期する手法が紹介されていました。

### 仕組み

記事内では、時刻比較に PowerShell を使っているではありませんか。PowerShell 側から wsl.exe 経由で date コマンド実行しているわけです。逆も然りと考え、Linux(Ubuntu)側から PowerShell を呼び出し、その返却値を `date --set` に流し込んだというのが、この仕組みです。

* PowerShell に Windows OS の時刻を基にした UNIX エポック秒を出力させる
* `date --set @エポック秒` の引数にする

`date --set` は root 権限が必要なため

1. `sudo` で実行 (sudoerr に追加しておく準備が必要)
2. `wsl.exe -u root` で実行 (事前準備無し)

どちらかで時刻設定ができます。

ちなみに PowerShell 1 だと `Get-Date -UFormat %s` の返却値はミリ秒込みになり、また（なぜか）+9時間されたあとの値になってしまい、そのまま date --set の引数に設定できなかったので、PowerShell 7 にしました。こちらは希望通りの操作になります。
どうしても PowerShell 1 でやりたい場合は

```bash
powershell.exe -Command '[int](Get-Date -UFormat %s)-32400'
```

という手もあります。

## 実際の使い勝手

pwsh.exe の呼び出しに300msくらいかかってるようなので、すこし詰まった感じはしますが、ntpdate するよりは速いでしょう。
あと、実行すると必ず日付表示がされるため `wsl.exe -u root date ... > /dev/null` とするのもよいでしょう。

私は `.bashrc` の先頭に、このワンライナーを入れておきました。これで Shell 起動毎に時刻を Windows OS 側と同期してくれるので、もはや心配なし！（だと思う）

## あとがき

お昼にしよう。

EoT
【就活生必見】知識0からエンジニアになるためには。

# はじめに
この記事はエンジニアを目指している【就職活動生】に向けた記事となっています。

IT業界の採用担当が重視するポイントなどをまとめておりますので、
気になる就活生の方は是非ご覧になってみてください。


# ①業界の決め方
「知識0や文系からエンジニアに挑戦したい！」と考える方は多いのではないでしょうか。

そんな皆さんが、最初に思うこと・・
それは「どの業界・企業にすべきかわからない」ということではないでしょうか。

エンジニアという仕事は様々な業界に存在します。
IT業界だけではなく、ゲーム業界、広告業界、医療業界など
多岐に渡るのです。

ではまず皆さんは、
【エンジニアになって何をしたいのか】
【どんなエンジニアになりたいのか】
ここを考えてみてください。

そうすると、ご自身がどの業界でエンジニアとして
活躍したいのかが見えてくるはずです。



# ②企業の決め方
では次に企業の決め方もご紹介していきます。

就職活動をする際にご自身の企業軸は既に決めていると思います。
なので、そのうえでさらに見ていただきたいポイントをご紹介していきます。

それは【研修体制が整っているか】という点です。

研修なんてなくてもエンジニアになれるでしょ！
そう考えている方はいませんか？

確かに研修がなくてもご自身で勉強し、
資格を取ったり業務を行うことで知識は身についていきますが、
基礎となる部分を講師から学ぶのと、
そうでないのとでは土台となる知識が全く変わってきます。

また研修で学ぶことで、わからないことをすぐに聞くことができたり、
知識を定着させることにも繋がります。

以上のことから研修が整っているということは大切なポイントなのです。


# ③よくある質問

最後に説明会でよくあるご質問とその回答も記載させていただきます。

**【文系からでもエンジニアになれるの？】**
→もちろんなれます！
 エンジニアは【なりたい！】というその強い気持ちがあれば
 誰でも目指すことができる職業なのです。
 勉強や学び続ける姿勢が1番大切になってきますので、
 文系だからという理由で諦めてしまうのはもったいないですよ＾＾

**【何から勉強すればいいですか？】**
→ どの業界のエンジニアをめざしているかによって変わってきますが、
　最初の段階としておすすめをしているのは【ITパスポート】です。
　IT系のお仕事をするのであれば、持っていて損はない資格なので
　導入としても是非勉強してみてください！


# 最後に
いかがでしたでしょうか。
今回は【就活生向け】ということで
学生さんに向けた記事となっていますが、
これからエンジニアになりたいと考えている社会人の方にも
読んでいただけるものになっているかと思います。

もっと深く知りたいという方は、
**【奥が深い】エンジニアのお仕事**という記事も是非読んでみてくださいね。

就活生の皆さんの役に立つことを願っています。
【初心者向け】Shopify App Block開発でcssをidユニークに構築する

## 問題提起
liquidでは、ブロックごとにcssをユニークにしないと、スキーマを変更したときに、同じ種類のブロックすべての見た目が変わってしまうため良くない。

だからCSSクラス名に`{{ block.id }}`をハイフン結合して、ブロックごとにスキーマを変更できるようにする。

しかし、全てのCSSに`{{ block.id }}`を付けるのは能がない気がする。

この記事では、「CSSにある文字列を付けることによって、HTMLのクラス指定にはblock.idは付けなくても大丈夫だよ」という話。

## ☓悪い例

```.liquid
{% comment %} アップブロックの UI を作成 {% endcomment %}
<!-- ここにHTMLのコードを書く -->

{% comment %} 見出しが設定されていないときは非表示にする {% endcomment %}

<div class='ranking-heading-margin-{{ block.id }'>
    <h2 class='ranking-heading-text'>
       //テキスト
    </h2>
</div>

{%- style -%}
 .ranking-heading-margin-{{ block.id }} {
    //cssプロパティ
  }
{%- endstyle -%}

{% schema %}
{
    ...
{% endschema %}
```

何が悪いかというと、cssクラスを適用するHTMLタグが増えると、その分毎回-{{ block.id }}を追加しなければならない。しんどい。

## ◯良い例

```.liquid
{% comment %} アップブロックの UI を作成 {% endcomment %}
<!-- ここにHTMLのコードを書く -->

{% comment %} 見出しが設定されていないときは非表示にする {% endcomment %}

<div class='ranking-heading-margin'>
    <h2 class='ranking-heading-text'>
        {{ block.settings.text }}
    </h2>
</div>


{%- style -%}
  #shopify-block-{{ block.id }}.アプリID .ranking-heading-margin {
    //cssプロパティ
  }

{%- endstyle -%}
  
{%- endstyle -%}

{% schema %}
{
    ...
{% endschema %}
```

CSSの定義時に`#shopify-block-{{ block.id }}.`を付け加えれば、それ以下のCSSクラスを持ったHTML要素すべてが自動でidユニークになる。

便利。

## 結論
ありがとうShopify
今度はエラーハンドリングを実装してね。