OmniAICreator/Qiita-1.07M huggingface dataset:
柚子胡椒vol.1writeup


**注意：授業の一環でwirteupを書くことになったので急遽書き起こしてます。
拙い文章ですが最後まで読んでいただけると著者の私が飛んで喜びます。**

___

### 前置きと準備
SECCON Beginner 2023 の練習として柚子胡椒氏の公開問題を解くことに。

https://ctf.mzyy94.com/q/TDUCTF2014-NW100/

Bluetooth.pcapの解析をしないといけないため解析するために「WireShark」君をインストール

https://forest.watch.impress.co.jp/library/software/wireshark/


とりあえずpcapについて情報収集。
どうやら無線通信などのpost、getでやり取りしたログデータの塊のことを指すらしい。
ホスト機と子機で相互にやり取りしたものがbluetooth.pcapに残っているとわかった。

### 本題

リアルタイムでのパケット解析もできる子だが今回調べるのはファイル内のログデータ。

ファイルを開いてログを見てみることに。

まぁ、めっちゃある。

しらみつぶしで探すと時間がかかるため問題の説明を見ると

「PINで試行したのは何？」

ほぼ答えだった。

というわけでPINがつく部分を調べてみることに。

Infoに2つほどPINに関する物があったが、探しているのはフラッグ形式のコード

やり取りをした詳細情報を見るとPIN Codeにフラッグ形式のものがあった。

そこにはSent PIN Code Request Reply （PINコードの再要求を送った）

とあったので実質これが答え。

フラッグを送ったら見事にSuccess。


____ 

### 完走できた感想

初めてWireSharkを使ってみたけど楽しかったからまた似たような問題をやってみたいところ

____

### すでに走っていた先駆者様のwriteup
参考にさせていただいたので掲示させていただきます

https://takahoyo.hatenablog.com/entry/2015/04/01/235533
SQLとPLSQLの実行時間を計る

### きっかけ
業務で、「サーバーに負荷がかからないようなるべく実行時間の少ないSQLを書くようにして欲しい」と指示があったので、今後自習でも業務でも必ず時間を測定してSQLを実行することにしたこと

### 時間測定のコマンド

SQL*Plusで「set timing on」を実行。
その後SQLやPL/SQLを実行すると実行時間が最後に表示されるようになる。

### 測定してみるとこんな感じ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3533750/a3ae8786-51b7-5ef3-5500-2439c47c374c.png)

SQLとPL/SQLで1つずつやってみた。
単位は秒。

計測が終わったら「set timing off」で終了できる。
MyBatisのxmlについて #1

## はじめに
Spring-Boot でのMyBatisのMapper.xmlでタグの設定などで
「これ忘れそうだな」と思ったので自分用の備忘録として残します。
もし意見や誤った箇所などありましたらコメントください。

## mapperタグ
このタグでどのファイルをこのxmlと紐付けるかのクラスパスを設定する。

```
<mapper	namespace="com.example.repository.UserMapper">
```
上記の場合だと
・**repozitory**までがパッケージ。  
・**UserMapper**はインターフェイス名。
・紐付くファイルは**インターフェイス**でなければいけない。  
・mapperタグはもちろん**締めタグが必要**。
・**このタグの中**でクエリを記述していく

## Mapper.xmlの基本
前提条件として
クエリのSELECTやINSERTなどの**ステートメントはタグとして記述**する。

例えば
```
<SELECT  id="findAll" resultType="User">
select
    *
from
    user
</SELECT>
```
こんな感じ。
ステートメントタグが**無いとO/Rマッパーとして機能しない**。
### ステートメントタグのid
・この部分でMapper.javaで**作成したメソッド**と紐付ける。
・例えば上述したSELECT文だとUserMapperのfindAllというメソッドに紐付いている。
### resultType
・このクエリの**戻り値を表す**。
・上述したクエリだとUserというクラスが戻り値になる＝**戻り値はクラス**である
## resultMapタグ
・**戻り値を一元管理できる**タグ。
・resultTypeで定義する必要がない。
・戻り値が必要なのは**select文のみ**。
・resultMapはxmlのクエリの記述より上に記述した方が分かりやすい

例
```
	<resultMap type="com.example.domain.model.User" id="user">
		<id column="user_id" property="userId" />
		<result column="password" property="password" />
		<result column="user_name" property="userName" />
		<result column="age" property="age" />
	</resultMap>
```
### resultMapタグのtype要素
・ここでどの**クラス**と紐付けるのかクラスパスを設定する。
・上述した場合だと**modelまでがパッケージ**
・Userが**クラス名**
・type=**エンティティクラス**
・戻り値もこのクラスになる
### resultMapタグのid
・この要素でクエリで使うときの名前を決める
・任意の名前で良い
・可読性のため分かりやすい名前を付ける（当たり前）
・要はこのresultMapくんの名前
#### resultMapでのセッティング
・**id column**=テーブルの主キーとなるカラム
・**result column**=このテーブルのその他のカラム
・**property**=エンティティのfieldとカラム名を紐付ける
```
<id column="user_id" property="userId" />
```
この場合
・user_idというカラムにuserIdというフィールドを紐付けている。
・user_idは主キーである
### ステートメントタグのresultMap
・この要素でresultMapタグで名付けた**idと紐付ける**

例
```
<SELECT id="findAll" resultMap="user">
select 
    * 
from 
    user
</SELECT>
```

・上記の場合、上述したresultMapのid="user"と紐付いている。
・他のselect文でも使用できる。
・resultTypeで記述しなくても一元管理できるので可読性が上がる。
・単純に予後が非常に楽
    
今日は遅いのでまた明日。
SELECT文以外のタグ、associationタグ、collectionタグ
columnPrefix要素について触れていく。
Oracleでテーブルのdumpをとる

### dumpとは

デバッグやデータ修復のために、ファイルやメモリの内容をディスクに出力すること。

### dump取得範囲の種類

・データベース全体
・表領域
・スキーマ
・テーブル

など、いろいろな範囲でdumpが取れる

### dump取得のためのコマンド

EXPDP {ユーザー}/{パスワード}@{接続文字列}
DIRECTORY={ディレクトリ}
DUMPFILE={ファイル名}
LOG={ログファイル名}
TABLES={テーブル}

ずーっと開発でミドルウェアとかインフラのコマンドはおまじないに近いので、使ったものだけでもちゃんと意味を覚えようと思います。
Reactの「Context」の使い方とメリット

　Reactの __Context__ は、コンポーネントのツリー全体にデータを提供するための方法です。propsを使って手動でデータをコンポーネントの一つ一つに渡す代わりに、Contextを使用することでコンポーネントツリーのどの階層でもデータにアクセスできます。

# ReactのContextが必要な理由:
　シチュエーション: ウェブアプリケーションを考えてみてください。このアプリには、多くのコンポーネントがあり、それらがネストされて複雑な構造を持っています。ユーザーがアプリにログインすると、そのユーザー情報（名前、プロフィール写真、設定など）が多くのコンポーネントで必要になります。

- __問題__: このユーザー情報を、上位のコンポーネントから下位のコンポーネントへとpropsを使って一つ一つ渡していくのは、非常に手間がかかり、管理が難しくなります。このような手法を「__prop drilling__」と呼びます。

- __解決策__: ここでContextが役立ちます。Contextを使うと、ユーザー情報をアプリケーションのどこからでも直接アクセスできるようになります。つまり、中間のコンポーネントを経由せずに、必要な情報を直接取得できるのです。

## 具体的な利点:
- __コードのシンプルさ__: 中間のコンポーネントが不要なデータを持たなくなるため、コードがシンプルになります。
- __再利用性__: 各コンポーネントが独立してデータにアクセスできるため、他の場所で再利用するのが容易になります。
- __一貫性__: データのソースが一箇所に集約されるため、データの不整合やバグを防ぐことができます。

## Contextの使用方法:
- __Contextの作成__: React.createContextを使用してContextを作成します。
- __Providerの使用__: 作成したContextのProviderコンポーネントを使用して、データを提供するコンポーネントツリーをラップします。
- __データの利用__: useContext HookやContext.Consumerを使用して、データを必要とするコンポーネントでデータを取得します。

## 簡単な例:
~~~Typescript
import React, { useContext } from 'react';

// 1. 新しいContextを作成します。これはテーマ情報（'light'や'dark'など）を持つことを想定しています。
const ThemeContext = React.createContext('light');

function App() {
  return (
    // 2. ThemeContext.Providerを使って、内部のコンポーネントにテーマ情報を提供します。
    // この例では、全体のテーマを'dark'に設定しています。
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  // Toolbarコンポーネントはテーマ情報を直接使用しませんが、内部のButtonコンポーネントがそれを使用するため、
  // ThemeContextの情報を受け取ることができます。
  return <Button />;
}

function Button() {
  // 3. useContextを使って、現在のテーマ情報を取得します。
  const theme = useContext(ThemeContext);
  // 取得したテーマ情報を使って、ボタンのラベルを表示します。
  return <button>{theme}テーマのボタン</button>;
}
~~~
　この例では、ThemeContextという名前の新しいContextを作成しています。このContextは、アプリケーションのテーマ情報（例えば 'light' または 'dark'）を保持します。
　React.createContextに渡された'light'は、このContextのデフォルト値です。つまり、もしThemeContextを使用するコンポーネントがどのThemeContext.Providerの内部にも存在しない場合、このデフォルト値が使用されます。

　このように、Contextを使用することで、親コンポーネントから子コンポーネントへと、直接的な関係なくデータを渡すことができます。

## 実例:
考えられる実際の使用例としては、以下のようなシチュエーションがあります：

- __テーマ設定__: ユーザーがアプリのカラーテーマ（ダークモードやライトモードなど）を選択できる場合、その設定をアプリ全体で利用するためにContextを使用します。
- __言語設定__: 多言語対応のアプリでは、選択された言語に基づいてテキストを表示するためにContextを利用します。
- __認証__: ユーザーのログイン状態や権限に応じて、特定の機能を制限するためにContextでユーザー情報を管理します。

# まとめ
- __何ができるのか__: ReactのContextは、コンポーネント間でデータを効果的に共有するための手段を提供します。これにより、データを手動でコンポーネントの階層を通して渡す必要がなくなります。

- __主な用途__: アプリケーションの設定、ユーザーの認証情報、言語設定、テーマなど、多くのコンポーネントで使われるデータや設定を扱います。

- __使用方法__: React.createContextで新しいContextを作成し、Context.Providerでデータを提供し、useContextやContext.Consumerでデータを取得します。

- __デフォルト値__: Contextはデフォルト値を持つことができ、Providerが提供する値がない場合に使用されます。

- __利点__: Contextは「prop drilling」という問題を解決するのに役立ちます。これは、データを深くネストされた子コンポーネントに手動で渡す必要がある場合に発生する問題です。

- __注意点__: Contextを過度に使用すると、アプリケーションの構造が複雑になる可能性があります。適切な場面でのみ使用することが推奨されます。
Next.jsのnext/imageコンポーネントで外部ドメインの画像を表示する方法

## 事象

Next.js の next/image コンポーネントを使用して画像を表示する際、src 属性に外部ドメインのURLを指定するとエラーが発生することがあります。この記事では、そのようなエラーが発生した際の対処法を解説します。

## 原因

Next.js はデフォルトで、プロジェクトのドメインからの画像の読み込みのみを許可しています。これはセキュリティの観点から、不正なまたは危険なドメインからのリソースの読み込みを防ぐための措置です。

## 対処法

外部ドメインからの画像を読み込むためには、next.config.js ファイルにそのドメインを許可リストに追加する必要があります。以下のように images セクションに domains プロパティを追加し、許可するドメインをリストアップします。

```next.config.js
module.exports = {
  images: {
    domains: [
      "example.com", // この部分を実際のドメイン名に置き換えてください
    ],
  },
};
```

この設定を行うことで、next/image コンポーネントの src 属性に指定した外部ドメインの画像が正常に表示されるようになります。

自らの備忘録のために投稿してますが、なにかお役に立てましたら幸いです！:clap:
また、なにか間違ってましたらご指摘いただけますと幸いです！:pray:
データに空白やタブが入っていた時に除去するSQL

# SQL
```sql
UPDATE テーブル名
SET 修正したいカラム名 = TRIM(REPLACE(修正したいカラム名,CHAR(9),'')) --CHAR(9)はTAB
FROM テーブル名
```
TRIMで空白除去、REPLACEとCHAR(9)の組み合わせでTAB退治。

ホントはデータベースに入ってくる前にアプリケーション側で除去してるはずなのですが。
どこかで漏れていたのでしょう。
# ちなみに
CHAR は整数を引数として受け取り、対応する ASCII 文字を返してくれる組み込み関数です。
CHAR(9) - TAB
CHAR(10) - ラインフィード (LF)
CHAR(13) - キャリッジリターン (CR)
JArray.ToStringはインデントした文字列を返す

https://www.newtonsoft.com/json/help/html/M_Newtonsoft_Json_Linq_JToken_ToString.htm

> Returns the indented JSON for this token.

こういうこと

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4914/830e780d-8e88-57c0-d94a-5f1bcc88d3af.png)
React×TypeScript×VSCodeの開発環境構築

備忘録として残しておきます。
表題の通り、開発環境構築です。

|説明|バージョン|
|--|--|
|OS|Windows10|
|ターミナル|Ubuntu 22.04.2 LTS (WSL2)|
|nvm|0.39.3|
|npm|9.5.1|
|node|v18.16.0|


まずはプロジェクトの作成
お話しながらひな形作ります。とっても簡単。
npm create vite@latest
と入力し、プロジェクト名を決めて、「React」を選んで、「TypeScript + SWC」を選択するだけ
```bash
$ npm create vite@latest
✔ Project name: … sample-app
✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC
```

念のため、正常にプロジェクトが作成できたか確認するために、コンソールに出力されたとおりに、ディレクトリの移動とインストール、サーバ起動まで実施して、ブラウザで確認。
```bash
$ cd sample-app
$ npm install
$ npm run dev
```
http://localhost:5173/
にアクセスして、以下画面を確認取れたら、「Ctrl」+「c」でサーバ停止。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779836/d244faee-7b0c-f255-b883-3ca91a4e5afa.png)



prettier, eslintの導入
```bash
$ npm i -D prettier
$ npm i -D eslint
```
設定する
```bash
$ npm init @eslint/config
// To check syntax and find problems
✔ How would you like to use ESLint? · problems
// JavaScript modules (import/export)
✔ What type of modules does your project use? · esm
// react
✔ Which framework does your project use? · react
// Yes
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JSON
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest eslint-plugin-react@latest @typescript-eslint/parser@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm
```

（各自お好きに設定ください）
プロジェクト配下に設定ファイルを3つ作成
今はこんな感じ
```bash
sampe-app
├── .vscode
│   ├── extension.json
│   └── setting.json
└── .prettier.json
```

```json:extension.json
{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "streetsidesoftware.code-spell-checker",
    "shardulm94.trailing-spaces"
  ]
}
```

```json:setting.json
{
  "editor.formatOnSave": true,
  "files.trimFinalNewlines": true,
  "files.trimTrailingWhitespace": true,
  "editor.tabSize": 2
}
```

```json:.prettier.json
{
  "printWidth": 100,
  "tabWidth": 2,
  "useTab": true,
  "semi": true,
  "singleQuote": true,
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf"
}
```
ここまで設定すればファイル保存時に自動でフォーマットが聞いてくれます（便利）

react-router-domを導入
```bash
$ npm i react-router-dom
$ npm install
```

ルーティングの設定を一括でまとめるコンポーネントを作るのが好き
sampleです。
```tsx:RoutingSetting.tsx
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Top from "./Top";
import Help from "./Help";
import Login from "./Login";

const RoutingSetting = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Top />} />
        <Route path="/help" element={<Help />} />
        <Route path="/login" element={<Login />} />
      </Routes>
    </BrowserRouter>
  );
};

export default RoutingSetting;
```
こんな感じでルーティングはまとめて上げます。
そして、App.tsxに追加することでルーティングが可能になります。
各コンポーネントは適宜追加ください。


```tsx:App.tsx
import RouterSetting from "./RoutingSetting";

function App() {
  return (
    <>
      <RouterSetting />
    </>
  );
}

export default App;
```

以上です。
【UE5】FirstPersonの「武器を拾う」システムを理解する

# 最初

FPSを制作するに当たって「FirstPerson」テンプレートを使用する
制作するゲームによっては「拾う」というシステムが無く最初から所持している場合がある
そのためテンプレートの「武器を拾う」というシステムがどのように実装されているか見ていく

![スクリーンショット 2023-09-20 002541.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1918199/1f4df469-553e-6b88-d23a-0b5f3b96bf3e.png)

使用バージョン : 5.2

# 実行順番

結果としては以下の順番

1.「BP_FirstPersonCharacter」が「BP_Pickup_Rifle」に接触

2.接触したオブジェクトが「BP_FirstPersonCharacter」の時「SkeltalMeshComponet」を継承した
武器用のBP「BP_WeponComponent」をAddComponentする

3.「BP_FirstPersonCharacter」にアタッチされた時「BP_WeponComponent」のインスタンスが生成され
BeginPlayが走る

4.「BP_WeponComponent」のBeginPlayで「GetOwner」から追従するMeshを取得して
予め用意してあった「GridPoint」の子供になる

5.「BP_FirstPersonCharacter」の「HasRaife」をONにすることで武器専用のアニメーションを再生する



BP_Pickup_Rifle・・・武器をプレイヤーにアタッチ用のBP（Pickupが「拾う」などの意味）


# 開始から所持する

最初から武器を所持するには

「BP_FirstPersonCharacter」に「BP_WeponComponent」をアタッチするだけ

「BP_WeponComponent」のBeginPlayが走りアニメーションからすべてやってくれる

![スクリーンショット 2023-09-20 003149.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1918199/872662b3-3c2f-ff25-1bfb-570680d8263a.png)



# 注意

「BP_FirstPersonCharacter」のBeginPlayで「IMC_Default」をAddMappingしているが
これがいらないので削除しても問題ない
が、何か問題がある場合は自分で解決できる力がある時に限って" 削除しても問題ない "

![スクリーンショット 2023-09-20 003511.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1918199/21d37af5-c768-c4ae-0aae-010e6edb5e71.png)
Reactのクラスコンポーネントと関数コンポーネントの特徴と使い方

# Reactのコンポーネント
Reactを使ってウェブページを作る際、画面上の各部分（例えばボタンやテキストボックスなど）は「コンポーネント」という部品で表現されます。このコンポーネントを組み合わせて、複雑なページやアプリケーションを構築します。

## 1. クラスコンポーネント
### 特徴:
- __クラスベース__: JavaScriptのクラスを使って定義されます。
- __ライフサイクルメソッド__: 特定の時点で実行されるメソッドがあります。例えば、コンポーネントが画面に初めて表示されるときや、データが変わったときなどの動作を定義できます。
- __状態管理__: this.stateで状態（データ）を持ち、this.setStateで状態を更新できます。
### 例:
```javascript
class WelcomeClass extends React.Component {
  // コンストラクタ: コンポーネントが作成されるときに一度だけ実行される
  constructor(props) {
    super(props);
    this.state = { name: 'React' };
  }

  // レンダリング: どのように画面に表示されるかを定義
  render() {
    return <h1>Hello, {this.state.name}</h1>;
  }
}
```
## 2. 関数コンポーネント
### 特徴:
- __関数ベース__: 通常の関数や矢印関数で定義されます。
- __Hooksの利用__: 状態を持ったり、ライフサイクルのような動作を制御するための特別な関数（Hooks）が使えます。例: useState, useEffect
### 例:
```javascript
import { useState } from 'react';

function WelcomeFunction() {
  // useState Hook: コンポーネントの状態を管理する
  const [name, setName] = useState('React');

  return <h1>Hello, {name}</h1>;
}
```
## まとめ:
- __クラスコンポーネント__: JavaScriptのクラスの特性を活かして、状態やライフサイクルを持つコンポーネントを作成する方法。
- __関数コンポーネント__: よりシンプルで柔軟な方法でコンポーネントを作成。最近のReactでは、Hooksを使ってクラスコンポーネントと同じようなことを関数コンポーネントで実現できるようになりました。

関数コンポーネントは、その簡潔さとHooksの導入による強化のため、現在のReact開発の主流となっています。しかし、多くの既存のプロジェクトやライブラリではクラスコンポーネントが使用されているので、両方を理解することは重要です。
wixアプリ開発をしてみる

## 概要

https://dev.wix.com/

wixではshopifyのようにアプリ開発ができます。管理画面上に独自機能をつけたりできるようです。
残念ながら現在(2023年9月)wixヘッドレスのアプリはまだ少ないです。（ヘッドレス以外のアプリは結構数あります。）

ただ、Shopifyのようなアプリ開発のエコシステムがあってヘッドレスまで出来るようになったので、今後使って行きたい技術なのでメモとして残します。

## 作るもの

ボタンを押すとline notifyを使ってラインに適当なメッセージを送信する独自機能を管理画面に作ります。

https://notify-bot.line.me/ja/

## 管理画面の作成について

独自の管理画面を作成する機能は4種類あります。
* jsonで定義する？
* WIX BLOCKSというwix上でデザインを定義してvelo(js)を使ってclickした時などの処理を書く
* Shopifyのようにiframeで別サイトを表示してwixのapiを介してwixデータを表示させる。(自由度は高い気がする)

もう一つは調べきれてないです。

![test3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280639/d2ed3a23-993f-17e4-a9ea-f1411bedaf03.jpeg)

今回は一番手軽に使えそうな WIX BLOCKSを使います。

### 実際に作ってみる
デザインはguiで定義できるので省きます。

![test.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280639/30d26414-c422-d702-f9b0-38c85833b0e2.jpeg)


ボタンを定義するとidが設定できるのでidを取得してきclickした時の処理を記述します。(普通のjsとほぼ変わらない)


<strong>本当であればlineのapiキーをコレクションではなくシークレットマネージャーに保存するべきなのですが、wixヘッドレスだとveloを有効化が無いのでシークレットマネージャー メニュー存在しないので一旦コレクションとして定義する</strong>


https://zenn.dev/niibori/articles/veloonwixstudio-beginner-0009


```javascript:Dashboard
import wixDashboard from 'wix-dashboard';
import wixData from 'wix-data';
import {call_line} from 'backend/aModule'



$w.onReady(function () {
    $w('#button4').onClick(async () => {
        let items = null;
        try {
            const results = await wixData.query('@〇〇/my-new-app-1/line_setting').find();
            items = results.items;
            
        } catch (error) {
            console.error(error);
            return;
        }


        if(items.length !== 0){
            for (const item of items) {
                call_line("ラインにテスト送信します！",item.title);

            }
        }
    });
});
```
```javascript:aModule.jsw
import { fetch } from 'wix-fetch';

export async function call_line(message,key) {
    const BASE_URL = 'https://notify-api.line.me';
    const PATH = '/api/notify';

    const params = new URLSearchParams({
        message: message,
    });
    
    const config = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Authorization': `Bearer ${key}`
        },
        body: params.toString()
    }

    try {
        const res = await fetch(BASE_URL + PATH, config);
    } catch (error) {
        console.error(error);
        return false;
    }
    
    return true;
}
```


多分バックエンド側(.jsw)からしかfetchできない？みたいなので、そこでfetchを定義してダッシュボードからcall_lineをダッシュボードから呼び出す。
普通にダッシュボードfetchから呼び出すと「TypeError: fetch failed」になる。


できたのでボタンをクリックするとlineに対して定型文が送信されます。

### サンプル
![test4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280639/75aa2149-2db1-20c4-4a20-221da18bc8eb.jpeg)



## 疑問点
* シークレットマネージャーがヘッドレスだと使えるのかどうか？
* アプリ開発ではアプリ側で作成したコレクションしか操作できない？
* 全体公開するアプリではなく、Shopifyのようなプライベートアプリのようなものは開発できるのか？



アプリ開発ではアプリ側で作成したコレクションしか操作できない？
→普通のcmsで機能で開発していて、後から複雑な事をする必要が出たときにアプリ開発をする必要がでます。
その際に普通(wixヘッドレス側)のコレクションが操作できないので、またアプリ側でコレクションを定義する必要がでたりする可能性


上記はwix開発者Discordに質問を投げさせてもらったので、回答があり次第、qiitaにメモとして残そうかと思います。
【Flutter】shared_preferencesを使って初回起動の時だけチュートリアル画面を表示させる

# はじめに
アプリを始めて起動したユーザーだけにチュートリアル画面を見せたい！という場合はよくあるかと。
一番簡単に実装する方法としては、おそらくshared_preferencesを使う方法かと思います。

https://pub.dev/packages/shared_preferences

shared_preferencesはデータを端末のローカルに保存するためのパッケージです。
ローカルに「チュートリアル画面を開いたら`true`にする」というような値を保存して、`false`の場合のみチュートリアル画面を表示すれば、
「**初回起動の時だけチュートリアル画面を表示させる**」が実現できます。


# main.dart
以下shared_preferencesはインストール済みの前提で進めます！

```dart:lib/main.dart
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final prefs = await SharedPreferences.getInstance();
  // 初回起動の時でfirst_launchが存在しなければtrueになる
  bool firstLaunch = prefs.getBool('first_launch') ?? true;
  runApp(ProviderScope(
    child: MyApp(
      firstLaunch: firstLaunch,
    ),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key, required this.firstLaunch});
  final bool firstLaunch;

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // 初回起動の場合（つまりローカルにfirst_launchが存在しない場合）はIntroductionScreenになる
      home: firstLaunch ? const IntroductionScreen() : const StartScreen(),
    );
  }
}
```

# チュートリアル画面
チュートリアル画面のビルドメソッドや、特定のボタンを押した時（例えば完了など）に以下のような処理で`first_launch`を`false`に設定することができればOK！

```dart
  _saveOptions() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    // 一度起動したらfirst_launchをfalseに設定する
    await prefs.setBool('first_launch', false);
  }
```

これで次からはローカルに`first_launch`が`false`で存在するので、チュートリアル画面に遷移せずに`StartScreen`へ遷移します:muscle_tone2:
M5 basicとUbuntuをBLEで接続する

# はじめに
M5 BasicとUbuntuをBLEで接続してシリアル受信するメモ

# M5のコード

```c:m5_ble_serial.c
#include <M5Stack.h>
#include "BluetoothSerial.h"

BluetoothSerial bts;

void setup() {
  M5.begin();
  bts.begin("M5 BLE Device");
  M5.Lcd.setTextColor(WHITE);
  M5.Lcd.setTextSize(1);
  M5.Lcd.setTextDatum(4);
}

void loop() {
  int value = random(0, 1000);
  M5.Lcd.fillScreen(BLACK);
  M5.Lcd.drawNumber(value, 160, 120, 8);
  bts.println(value);
  delay(1000);
}
```

- `M5 BLE Device`でPCから見える
    - 認証は特に無し
- 1秒毎に0〜1000までのランダムな数字を送信する


# Ubuntuの設定
M5の電源を入れておくと、UbuntuのBluetooth設定画面に`M5 BLE Device`の名前でデバイスが認識される
ペアリング設定から許可する（PIN云々は無視）
![Screenshot from 2023-09-19 23-49-24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133206/cd0cff73-f99d-1eef-d140-d7834c1e7498.png)

接続できたらデバイスを選択してアドレスを調べておく
![Screenshot from 2023-09-19 23-55-28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133206/b46bc3ef-105a-ebb3-f3fd-d43856de4317.png)

rfcommを使って仮想シリアルデバイスを作成し、`M5 BLE Device`と紐付ける
```bash
sudo rfcomm -r -M -L 0 bind 0 BLEアドレス
```


仮想シリアルポートの設定をする
ボーレート：115200bps
文字サイズ：CS8
```bash
sudo stty -F /dev/rfcomm0 115200 cs8
```

ターミナルソフトで仮想シリアルポートを開く
```bash
sudo screen /dev/rfcomm0 115200
```

上手くできていると、M5に表示されているランダムな数字と同じ数字がターミナルに表示される
![Screenshot from 2023-09-20 00-06-55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133206/f8930b70-825a-acdc-276b-19ec735fc613.png)


以上


## 参考文献
https://msr-r.net/m5stack-bluetoothserial/

https://miyutomori.com/2019/08/20/esp_arduno_ubuntu_bluetooth_connect/
【シェルスクリプト】特定のコマンドのみユーザーを変更して実行する

## 実行方法

次のようにコマンドを実行すると一時的にユーザーを変更してコマンドを実行できます。  

```terminal
su ユーザー名 -c "コマンド"
```

```terminal
root $ su sample -c "whoami"
sample
```

以下のようにも記述できます。  

```zsh
su ユーザー名 <<-EOF
コマンド
EOF
```

```test.sh
su sample <<-EOF
whoami
EOF

whoami

```

```terminal
root $ bash test.sh
sample
root
```
投稿テスト：メモ）wasm-packをインストールしたらエラーが出たお話

Rust(wasm)でも勉強しよーと思い、wasm-packをインストールしようとしたらエラー

```
cargo install wasm-pack
error: failed to run custom build command for `openssl-sys v0.9.77`
```

なんなのかしら gglとopensslとか入れるとかあるケド
```
set RUST_BACKTRACE=1
cargo install wasm-pack
```

バックトレース有効にしてかくにん
```
error: failed to run custom build command for `openssl-sys v0.9.77`

Caused by:
  process didn't exit successfully: `..\AppData\Local\Temp\cargo-installnGtjC9\release\build\openssl-sys-76f22b8313d6770e\build-script-main` (exit code: 101)
  --- stdout
  cargo:rustc-cfg=const_fn
  cargo:rustc-cfg=openssl
  cargo:rerun-if-env-changed=X86_64_PC_WINDOWS_MSVC_OPENSSL_NO_VENDOR
  X86_64_PC_WINDOWS_MSVC_OPENSSL_NO_VENDOR unset
  cargo:rerun-if-env-changed=OPENSSL_NO_VENDOR
  OPENSSL_NO_VENDOR unset
  running "perl" "./Configure" "--prefix=..1\\AppData\\Local\\Temp\\cargo-installnGtjC9\\release\\build\\openssl-sys-c00582f5b572b1f6\\out\\openssl-build\\install" "--openssldir=SYS$MANAGER:[OPENSSL]" "no-dso" "no-shared" "no-ssl3" "no-unit-test" "no-comp" "no-zlib" "no-zlib-dynamic" "no-md2" "no-rc5" "no-weak-ssl-ciphers" "no-camellia" "no-idea" "no-seed" "no-engine" "no-asm" "VC-WIN64A"

  --- stderr
  thread 'main' panicked at 'called `Result::unwrap()` on an `Err` value: Error { kind: NotFound, message: "program not found" }', ..\.cargo\registry\src\github.com-1ecc6299db9ec823\openssl-src-111.24.0+1.1.1s\src\lib.rs:496:39
  stack backtrace:
     0: std::panicking::begin_panic_handler
               at /rustc/a55dd71d5fb0ec5a6a3a9e8c27b2127ba491ce52/library\std\src\panicking.rs:584
     1: core::panicking::panic_fmt
               at /rustc/a55dd71d5fb0ec5a6a3a9e8c27b2127ba491ce52/library\core\src\panicking.rs:142
     2: core::result::unwrap_failed
               at /rustc/a55dd71d5fb0ec5a6a3a9e8c27b2127ba491ce52/library\core\src\result.rs:1814
     3: core::result::Result<T,E>::unwrap
     4: openssl_src::Build::build
     5: openssl_src::Build::build
     6: build_script_main::find_vendored::get_openssl
     7: build_script_main::env::{{closure}}
     8: build_script_main::find_openssl::{{closure}}
     9: core::ops::function::FnOnce::call_once
  note: Some details are omitted, run with `RUST_BACKTRACE=full` for a verbose backtrace.
warning: build failed, waiting for other jobs to finish...
error: failed to compile `wasm-pack v0.10.3`, intermediate artifacts can be found at 
```

perlつかっとんのかーい。

```
let os_val = String::from("OS is .....") + os;
        println!("{}", os_val);
        ... 
         OPENSSL_NO_VENDOR unset
  OS is .....VC-WIN64A
  running "perl" "./Configure...
```

とりあえず、perlコマンド使えるようにしたらインストールできた。（次から取得した。＊Visual C++ Build Toolも必要かな）
https://strawberryperl.com/

いじょ
Streamlit in Snowflakeでパッケージを導入してみよう


Streamlit in Snowflake(SiS)がPublic Preview(PuPr)になりました。  
SnowflakeのWeb UIであるSnowsight上でStreamlitを使ったアプリの開発と実行が可能になります！  

![about_sis](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917580/af1cd8f6-47c0-c732-75d7-8a8f4b96fc6a.png)

## 使い方

とにかく試してみましょう！使い方は以下の記事が詳しいです。  
参考：[[新機能]SnowflakeのSnowsight上でStreamlitのアプリ開発と実行ができるようになりました #SnowflakeDB](https://dev.classmethod.jp/articles/try-streamlit-on-snowflake-from-snowsight/)

https://dev.classmethod.jp/articles/try-streamlit-on-snowflake-from-snowsight/

## 公式ドキュメント

公式ドキュメントはSnowflake Documentationで公開されています。  
参考：[About Streamlit in Snowflake](https://docs.snowflake.com/en/developer-guide/streamlit/about-streamlit)

https://docs.snowflake.com/en/developer-guide/streamlit/about-streamlit

## 制限事項

Public Previewなこともあって色々な制限事項があります。  
```st.chat_message```や```st.chat_input```が存在しないあたり、ベースになっているのが最新のバージョンではないのかな？という感じですね。  
参考：[Limitations and unsupported features during preview](https://docs.snowflake.com/en/developer-guide/streamlit/limitations)

https://docs.snowflake.com/en/developer-guide/streamlit/limitations

## 課金について

Streamlitでアプリが立ち上がっている間はウェアハウスが立ち上がったままになるので、どんどんクレジットが消費されます。  
正確にはWebソケットコネクションが生きている間はウェアハウスが立ち上がったままになり、通信がないまま15分経過すると自動的に落ちるようです。  
なお、試した感じでは単純に画面を閉じるだけでも落ちてくれました。  

> This warehouse remains active while the app’s web-socket connection is active.
> The web-socket connection expires approximately 15 minutes after its last use.

![activity](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917580/dd7e62c9-0a4b-5119-eb90-e8bba861b1c3.png)

## パッケージの導入

### 結論

**ソースコードタブの上部の「パッケージ」で必要なパッケージを指定する**だけ。  

### パッケージを導入してみよう

とりあえず何も考えずにパッケージをインポートして実行してみましょう。  
```sympy.sieve```は素数を扱うパッケージです。  

```py:sis.py
# とりあえずインポートしてみる
import pandas as pd
from sympy import sieve
col1 = pd.Series([i for i in sieve.primerange(2, 100)], name='prime')
col2 = pd.Series([i + 1 for i in range(len(col1))], name='id')
df = pd.concat([col2, col1], axis=1)
st.dataframe(df)

# 処理が終わったら雪を降らせる！おめでとう！
st.snow()
```

パッケージ(Module)がないよって怒られました。  

![sis_package_error](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917580/a889aff7-dca6-a836-5de6-6c2f823d2288.png)

ソースコードタブの上部の「パッケージ」を確認すると、最小限のものしかありませんね。  
PandasはSnowparkかStreamlitが参照しているので何もしなくても使えるようです。  

![sis_package_flow1](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917580/4ce694c3-5ab7-d3ae-34a8-c41c9df0e950.png)

パッケージを導入するときはこの画面で検索して選択するだけです。  

![sis_package_flow2](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917580/208187af-79c8-3166-bf34-d7f2d5410319.png)

「インストール済みのパッケージ」に無事に追加されました。  

![sis_package_flow3](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917580/51294b98-d9c4-5410-37f9-42896b373ae7.png)

あらためて実行してみましょう！  

![sis_package_result](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917580/bd84d667-f57c-346f-181e-6458c6151f49.png)

やったね！
flutter インストールメモ (Ubuntu 20.40)

# 手順

以下の記事を参考にしました.

- Ubuntu20.04 Flutter 環境構築方法
https://pineplanter.moo.jp/non-it-salaryman/2020/07/11/flutter-on-ubuntu/

- 本家ドキュメント

https://docs.flutter.dev/get-started/install/linux


## 依存パッケージのインストール


```
 sudo apt install bash clang curl git libcanberra-gtk-module libglu1-mesa unzip xz-utils zip
```
## flutter SDK

```
sudo snap install flutter --classic
```

本家ドキュメントより，最も簡単な方法がこのマンドと記載がありました.（※ 手動で`圧縮済みのバイナリをインストール => 回答 => パスを通す`という方法も記載がありました．）

`flutter`のインストール後は下記コマンドで依存関係をチェック.
```
flutter doctor
```

（`Android toolchain`の項目でエラー発生）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/c3cce17b-790a-be3f-ece5-c96e3bbaade0.png)


##　Andoird setup

### Install Android Studio 

参考 

https://lab4ict.com/system/archives/5112

```
sudo snap install android-studio --classic
```

`snap`って流行っているのかな？

ちょっとエラー減った気がする.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/46c280fa-459a-0d33-27b9-dca6f00df38f.png)

続きあとでかく

# 宣伝

以降宣伝となります．

製品を販売しています！

- 3D Vision Controller ： ロボットアームによる3次元ピッキングを実現可能にします

https://hoshinarobot.base.shop/items/70144084

お仕事お受け致します！

- メールアドレス : ryotaro.hoshina@gmail.com

- coconala : https://coconala.com/users/4162706

- CloudWorks : https://crowdworks.jp/public/employees/5569031
npm dependenciesのみinstallする

# 目次
1.背景
2.dependenciesとdevDependencies
3.dependenciesのみinstallの方法
4.npm prepareを回避したい時

# 1. 背景
dependenciesのみinstallする方法を調べていた為です。

# 2. dependenciesとdevDependencies
## dependencies
   - 本番環境でも利用するパッケージやその依存関係
   - パッケージとして公開し、開発者以外の人がnpm installしたときにはdependenciesのみがinstallされます。

## devDependencies
   - 開発に必要なパッケージ
   - 開発者がこのpackage.jsonがあるディレクトリでnpm installを行うと、dependenciesに書かれているパッケージのみではなく、devDependenciesに書かれているパッケージもインストールされます。


# 3. dependenciesのみinstallの方法
- [how-do-you-prevent-install-of-devdependencies-npm-modules-for-node-js-package](https://stackoverflow.com/questions/9268259/how-do-you-prevent-install-of-devdependencies-npm-modules-for-node-js-package)
- [npm-install](https://docs.npmjs.com/cli/v8/commands/npm-install#omit:~:text=If%20the%20resulting%20omit%20list%20includes%20%27dev%27%2C%20then%20the%20NODE_ENV%20environment%20variable%20will%20be%20set%20to%20%27production%27%20for%20all%20lifecycle%20scripts.)
>In version 8.x and above use --omit=dev flag to install only regular 
 dependencies:
     ```
     npm install --omit=dev
     ```

npm v8以降では --omit=devを付けると良いそうです。
環境変数 NODE_ENV の値に関係なくdependenciesのみをinstallします。

# 4.npm prepareを回避したい時
npm installの後にprepareスクリプトが走る設定をされている方もいらっしゃると思います。
npm install --omit=devをした後に、devDependenciesに属するinstallされてないpackageがprepareで実行されてエラーになりました。

そこで回避する為に使えるのが、ignore-scriptsオプションです。

>ignore-scriptsが設定されていても、 npm start, npm stop, npm restart, npm test, npm run-script のような、特定のスクリプトを実行することを明示的に意図したコマンドは実行されますが、プリスクリプトやポストスクリプトは実行されません。

[npm-install](https://docs.npmjs.com/cli/v8/commands/npm-install#ignore-scripts)

# 参考
- [【package.json】dependenciesとdevDependenciesの違いとnpmとyarnのコマンド解説](https://mo-gu-mo-gu.com/about-dependencies-devdependencies/)
- [【いまさらですが】package.jsonのdependenciesとdevDependencies](https://qiita.com/chihiro/items/ca1529f9b3d016af53ec)
- [npmコマンドチートシート](https://confrage.jp/npm%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%83%81%E3%83%BC%E3%83%88%E3%82%B7%E3%83%BC%E3%83%88/#toc4)
- [npm install doesn't install devDependencies issue [Solved]](https://bobbyhadz.com/blog/npm-install-does-not-install-dev-dependencies#only-installing-your-dependencies-with-the---omit-flag)
- [npm install で実行される npm-script を ignore-scripts オプションで無視する](https://egashira.dev/blog/npm-install-option-ignore-scripts)

## 参考になる記事を書いてくださった皆様ありがとうございました！

## 宣伝させてください！
https://recruit.iimon.co.jp/
git の使用ケースごとの対応をまとめる

## はじめに
これは自分用の備忘録として書くため、大変見にくいと思います。
ご覧いただく際はご了承ください。
また、情報が溜まったら随時書き足していきます。

## ケース
### 新しくプロジェクトを始める時
あらかじめ新しいリポジトリをGUIにて作成しておいてください。
``` sh
cd [ プロジェクト直下 ]
git init
git remote add origin [ リポジトリのURL ]
git fetch
git merge origin/main
git add .
git commit -m "first commit"
git push origin main
```
### 開発用のdevelopブランチを作る
拙記事では以下の画像のようなブランチ戦略を取ることとします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412378/e60cc129-71c9-69c9-8a13-7ee09ea5c0d2.png)

``` sh
git checkout main
git pull origin main
git checkout -b develop/[ リリース番号 ]
git commit -m "first" --allow-empty
git push origin develop/[ リリース番号 ]
```

### ブランチを切る
今回は、新しいイシューを始める（機能を追加するfeatureブランチを作る）場合を想定しています。
GUIから新規のイシューを発行もしくは、割り振られたイシューのイシュー番号をもとにブランチを切ります。
そのため、あらかじめ該当するイシューを作成しておいてください。

``` sh
git checkout develop/[ リリース番号 ]
git pull origin develop/[ リリース番号 ]
git checkout -b feature/[ リリース番号 ]/[ イシュー番号 ] develop/[ リリース番号 ]
git commit -m "pull req commit" --allow-empty
git push origin feature/[ リリース番号 ]/[ イシュー番号 ]
```

正常に実行できると、GUI上にプルリクの通知が来ます。
そのプルリクを承認して、プルリクの名前をイシューのタイトルと同じ内容を書きます。
**また、この時にマージ先を `main` ではなく、 `develop/[ リリース番号 ]` に変更することを忘れずに行ってください！**

これでブランチを切ることに成功しました。


以降は、以下のようにpushしていけばOKです。

``` sh
git add .
git commit -m "[コミットメッセージ]"
git push origin feature/[ リリース番号 ]/[ イシュー番号 ]
```

### ブランチをマージする

今回は、イシューが終わった（featureブランチをdevelopブランチにマージする）場合を想定しています。
上記と同様にローカルの変更をリモート上へ反映させます。

```sh
git add .
git commit -m "[コミットメッセージ]"
git push origin feature/[ リリース番号 ]/[ イシュー番号 ]
```

正常に実行できると、GUI上の該当プルリクに変更が反映されています。
コミットメッセージなどからリモートの内容が最新であることを確認した上で、レビュアーにレビューをしてもらいます。
レビューが終わった後に、GUI上から `develop/[ リリース番号 ]`にマージすれば終了です。
イシューをクローズしておくことも忘れずに行ってください。


### ローカルをリモートの状態に強制同期
```sh
git checkout [ 対象のリポジトリ ]
git fetch origin [ 対象のリポジトリ ]
git reset --hard origin/[ 対象のリポジトリ ]
```

### 最新のpushした内容を取り消す
最新のpushであれば以下の対応が可能です。
``` sh
git checkout [ 対象のリポジトリ ]

git log 
> 最新のpushのIDをコピーする

git revert [ 取り消す対象のID ]
git push origin [ 対象のリポジトリ ]
```
PostmanでCollectionが消えてHistoryしか見えない。

# 何が起きたか
[Postman](https://www.postman.com/)を日常的に使用していたが、ある日突然Collectionが消えてHistoryしか見えなくなってしまった。

# 結論
アカウント登録、ログインを行うとCollection機能が使用できるようになった。

# なぜCollectionが消えた？
恐らくアプリケーションのアップデートにより、ログインを行わないと機能制限がかかるようになった。

# あとがき
作業中に不意にアップデートを行ったので、かなり困った。
ソフトウェアのアップデートはタイミングを考えて行うようにしようと肝に銘じた。
AndroidStudioで実行ボタンが押せない時の対処とそのしくみ

### 概要

Qiitaのキャンペーンをきっかけに
AndroidStudioとKotlinで学生時代ぶりにスマホアプリを作っています。
その時に出たエラーとその解決策をまとめました。

### 出たエラー

エラーというより、AndroidStudioの実行ボタン(▲のボタン)がグレーアウトして押せなかった。

### 解決方法

AndroidStudioのメニューの「File」→「Sync Project with Gradle Files」をクリックし、処理が終わると押せるように。

### 解決した理由

AndroidStudioのビルドは、Gradleで行われている。
プロジェクトとGradleを同期しないとプログラミングが実行できないことがある。
【GOT】デバイスデータ転送やトリガアクションで、GOTからデバイスに値を自動で設定する【三菱PLC】

GOTにはビットスイッチやワードスイッチ以外にも、デバイスに値を書き込む機能が何種類かあります。これにより、通常は特定のスイッチを押したタイミングでのみ実行できる処理を、トリガーを用いてバックグラウンドで実行させることができるようになります。入力した値を別の値に処理したり、大量のデータを転送やコピーしたい場合に使用します。

複数の機器間であっても問題ありません。


## デバイスデータ転送機能で、任意のデバイスの値を別のデバイスと同期する

GOTのデバイスデータ転送機能を使えば、指定したデバイスの値を別のデバイスに転送(上書き)することができます。

設定するには、「共通の設定」タブから「デバイスデータ転送」を選び、新規作成をクリックします。

「デバイスデータ転送トリガ」で、値を転送するタイミングを設定します。立上りや立下りを選べば、PLCから任意のタイミングで値をコピーできます。周期を選べば、デバイスの値をバックグラウンドで自動的にコピーし続けます。
「転送元デバイス」と「転送先デバイス」にそれぞれデバイスを設定することで、値のコピーができるようになります。例えば、転送元デバイスにGDデバイス、転送先デバイスにDデバイスを指定すれば、GDデバイスの値をDデバイスに転送し値をPLCのデバイスで収集することができます。逆も可能です。

https://fa-faq.mitsubishielectric.co.jp/faq/show/25106

https://fa-faq.mitsubishielectric.co.jp/faq/show/18614


## トリガアクション機能で、特定の条件で任意の値をデバイスに書き込む

GOTのトリガアクション機能を使えば、トリガーを用いて指定した値をGOTからデバイスに書き込んだり、ビットを立てたりすることができます。

設定するには、「共通の設定」タブから「トリガアクション」を選び、追加をクリックします。

「プロジェクト共通のトリガアクション」と「画面単位のトリガアクション」があり、表示している画面ごとに別の値を書き込みたい場合は画面ごとのトリガアクションを、すべての画面で同じ書き込みをしたい場合はプロジェクト共通のトリガアクション選択します。

「トリガ種別」で、指定した値を書き込むタイミングを設定します。ONや範囲、複数ビット条件を選べば、トリガデバイスが特定の条件下でのみ値を書き込むようにできます。(指定したビットが全て立っているとき、など)
「デバイス」で条件成立時に値がセットされるデバイスを設定します。

例えば、常時でビットを立てるように設定すれば、GOT起動と同時にビットがONになり、特定のフラグを立てるといったようなことができます。

https://fa-faq.mitsubishielectric.co.jp/faq/show/25105

他にも、 時刻をトリガーにして実行するタイムアクション機能や、条件ごとに様々なデバイスに値を書き込めるスクリプト機能などがあります。

![got2000_main_image.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3535456/391ac2c9-5737-3ead-a945-fbd5625cfa1e.jpeg)


#### GDデバイスの設定方法

https://qiita.com/PockTTY/items/ff8da197b333663bf432
投稿テスト：ハッシュ値保存されているサイトのインジェクション

https://qiita.com/ockeghem/items/787f74801a24e1fc6960

投稿テスト、試しにタイムラインで挙がっていた記事を解いてみる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3561202/1c06df34-1c1c-2fb2-96ff-79300046c693.png)

とりあえず、成功した。

次のサイトで、てきと～にハッシュパス用意して～
https://www.webdesignleaves.com/pr/samples/PHP/password_hash.php
```
test -> $2y$10$9RnxO8kXovCKWGjqxJ6P7OZ8ucKxYp5iBznMbAsjtlocfMlx/4YQS
```

SQLインジェクションのSQLを作成して～
```
xxx' UNION ALL SELECT 1 AS id, 'admin' AS userid, '$2y$10$9RnxO8kXovCKWGjqxJ6P7OZ8ucKxYp5iBznMbAsjtlocfMlx/4YQS' as password, '' as email WHERE 'a' = 'a
```

入力して実行！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3561202/3c37e46b-f275-0335-4df8-d1bc2420bb9d.png)

内部構造を一切知らないでっていうのは～・・・userid/passwordで変数値アクセス、password_verify、SQLは使っているという前提は知らないと厳しいんじゃないかな～

いじょ
パスワードがペッパー付きハッシュ値で保存されているサイトのSQLインジェクションによる認証回避の練習問題

この記事は「[パスワードがハッシュ値で保存されているサイトのSQLインジェクションによる認証回避の練習問題 - Qiita](https://qiita.com/ockeghem/items/787f74801a24e1fc6960)」の続編です。

# 前回までのあらすじ

SQLインジェクションによる影響として、認証回避の例がよく紹介されます。よくある「'OR'a'='a」を入力するパターンはよく見かけるところですが、パスワードがハッシュ値で保存されているケースについても認証回避が可能なケースがあることを示しました（参考:[解答編](https://qiita.com/ockeghem/private/c5818819a87ee22c1681)）。

# パスワードがペッパー付きハッシュ値で保存されているとどうなる?

今どきはパスワードはソルト付きハッシュ値で保存することが常識になっていますが、加えて「ペッパー（pepper）」というものを付加した方がよいという流れになってきています。ソルトがユーザー毎に異なる文字列であるためにハッシュ値とセットで保存するのに対して、ペッパーは固定値であるもののデータベースとは別の安全な場所に保存できる点が異なります。以下を参考にしてください。

- [ソルト付きハッシュのソルトはどこに保存するのが一般的か - Qiita](https://qiita.com/ockeghem/items/d7324d383fb7c104af58)
- [OWASPに学ぶパスワードの安全なハッシュ化 | DevelopersIO](https://dev.classmethod.jp/articles/modern-password-hashing-owasp-way/)

ペッパー（シークレットソルトと呼ぶ場合もある）の実装は様々で、Dropboxのようにソルト付きハッシュをさらにAES等で暗号化する場合（[参考](https://blog.tokumaru.org/2019/02/caution-bcrypt-with-sha512.html)）もあれば、Rubyのdevise gem（ライブラリ）のように、ハッシュ計算の前にペッパーをパスワード前後に連結するだけの場合もあります。下記はdeviseのハッシュ値計算の部分ですが、ペッパーがあれば、それをパスワードの後ろに連結しています（[GitHUbリポジトリ](https://github.com/heartcombo/devise/blob/main/lib/devise/encryptor.rb)）。

```ruby:encryptor.rb
def self.digest(klass, password)
  if klass.pepper.present?
    password = "#{password}#{klass.pepper}"
  end
  ::BCrypt::Password.create(password, cost: klass.stretches).to_s
end
```

# 練習問題を作ってみた

と言う前提で、今回の練習問題はdevise方式を採用しました。下記はログイン処理のペッパーを使う箇所です。

```PHP
$pepper = file_get_contents('../pepper.txt');
$password = $_POST['password'] . $pepper;
```

ペッパーは、上記のように外部から閲覧できないディレクトリに保存されており、SQLインジェクションでは取得できません。

この条件でSQLインジェクションによる認証回避の練習問題を作ってみました。
ソースコードは、[GitHubのリポジトリ](https://github.com/ockeghem/SQLi-to-bypass-auth2)からダウンロードして、Dokcerコンテナとして実行できます。

```
$ git clone https://github.com/ockeghem/SQLi-to-bypass-auth2.git
$ cd SQLi-to-bypass-auth2
$ docker compose up -d
```

http://localhost:8901/ にアクセスすると以下のログインフォームが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22718/ee3058d5-e7c0-b0a8-1143-19ee5ff50824.png)

前回の問題とは異なり、利用者がユーザー登録できます。ログイン後に「マイページ」に遷移して、adminの情報が表示できれば攻撃成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22718/421c9ec3-b476-6532-a6af-5f2961d5aadc.png)

ペッパーはコンテナにアタッチすれば参照できますが、それはルール違反とします。ソースコードやテーブル定義は見てもよいことにしますが、「見なくても攻撃できる」方が良い解答とします。 なお、想定攻撃経路は2種類あります。2種類とも解答できれば完答とします。後述のように、sqlmap等のツールは使用可とします。

# sqlmapをバンドルしました
この練習問題ではsqlmap等のSQLインジェクション診断ツールを使ってよいレギュレーションとします（明言してなかったものの前回もだめだったわけではありません）。インターネット世界のサイバー攻撃ではsqlmapが使われる可能性はあるので、sqlmapを使って良いというのは現実的なシナリオです。
sqlmapに親しんでいない参加者の便宜のため、sqlmapコンテナを用意しました。以下でsqlmapを利用することができます。Linux風のプロンプトとなっていますが、Windowsでも同じコマンドで実行可能です。

```
$ docker compose exec sqlmap /bin/bash
...さまざまな表示
# python sqlmap.py -u http://php/
```

上記のように、コンテナ内からターゲットサイトには http://php/ でアクセスできます。sqlmapの詳細についての解説は割愛しますので適当な解説記事を参照ください。
脆弱性診断用ツールは、自身が管理するサイトあるいは許可を得たサイトにのみ使用ください。これはsqlmapに限らないことですが、sqlmapは許可なく使用すると違法行為になる可能性が特に高いツールですのでご注意ください。

想定正解については、数日後に公開したいと思います。

※ これから解かれる人もいるので、X(Twitter)やブックマーク、この記事のコメント欄などに解答やヒントは書かないでください。ご自身のブログやQiita等に書くのはかまいません。

# 追記（2023年9月26日）
解答編を投稿しました

https://qiita.com/ockeghem/items/1f19385bc9b802af61ba
EclipseのプロジェクトをGit管理する

# 概要
Eclipseで開発する際にGitで管理する方法の個人的備忘録

# 目的
最初やるとき忘れてしまう&以前書いた記事は不備があったので更新

# 環境
Java17
EclipseIDE2023 4.27.0
Git 6.5.0
※前提条件として
1.ウィンドウ→パースペクティブ→パースペクティブを開く→その他→Git
でGitリポジトリー管理画面を開いておく
![スクリーンショット 2023-09-18 223155.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203627/1ae70dec-1a3f-d6af-a139-24ade9e1856c.png)
2.　Gitの基本操作には慣れていること
　　今回Gitの操作について説明は特にしていないため

# 手順
## 1.Eclipseで適当に新規プロジェクトを作成する
![スクリーンショット 2023-09-18 220435.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203627/f72ade6a-497c-a6ba-a6f3-f7e5553da33d.png)
左上にある〈ファイル〉→新規→Javaプロジェクト
から新しいプロジェクトを作成する
その後、クラス等のファイルを適当に作成していく

### 1-1.ローカルリポジトリにコミット
1. プロジェクトを選択し右クリック
2. チーム→プロジェクトの共用...を選択
3. Git→次へを選択する
4. 『プロジェクトの親フォルダー内のリポジトリーを使用または作成』に✓を入れる
5. プロジェクトを選択する（チェックボックスには✓を入れないこと）
6. リポジトリーの生成をクリック→完了
7. プロジェクトのローカルリポジトリが作成される
8. Gitパースペクティブに『ステージされていない変更』に作成したファイルがあるので右下にある『コミット』を選択
9. これで新規プロジェクトのコミットが完了

## 2.GitHubにリポジトリを作成する
任意のリポジトリ名で作成しておく。
パスワードを入力する際トークンを入力する必要があるため、トークンも同時に作成する。

### 2-1.トークンの作成
1. GitHubのメニュー（自身のアイコン）
2. Settings→Developer settingsを選択
3. Personal access tokens→Generate new tokensを選択
4. Note:任意のトークン名を入力する
5. Expiration:トークンの有効期限を選択する
6. Select scopes:Eclipseから操作を行うため〈repo〉に✓を入れる
7. 他にはチェックを入れずに〈Generate token〉でトークン作成
8. トークンは一度しか表示されないためどこかにメモしておく＆ここでコピーしておく

## 3.ローカルリポジトリをリモートリポジトリと連携させる
1.　Javaパースペクティブのプロジェクト名右クリックし、チームを選択
2.　『ブランチのプッシュ’master’』を選択
3.　リモート名：GitHubのリポジトリ名
4.　URL：GitHubのリポジトリURL（https）
5.　ユーザー:GitHubのユーザー名を入力
6.　パスワード：先ほど作成したトークンを入力
7.　『セキュア・ストアに保管』に✓を入れておく
8.　プレビューを選択しプッシュ確認画面は特に変更せずプッシュを選択
9.　GitHubのリポジトリ画面にローカルリポジトリのものが反映されていたら終了

# いつから変わっていた？
いつの間にかトークン必要になっていた。
トークン作成する際に
『personal access token (classic)』と『fine-grained personal access token』
が選べるようになっていてなんとなくclassicを選択していたので
よくよく見てみると
>注: personal access token (classic) は、アクセスできるすべてのリポジトリにアクセスできます。 GitHub では、代わりに、特定のリポジトリに制限できる fine-grained personal access token を使用することをお勧めします。 Fine-grained personal access token を使用すると、広範なスコープの代わりにきめ細かなアクセス許可を指定することもできます。

Fine～の方はユニークになっていて細かい設定が可能でより強度が高いセキュリティらしい。
企業だとこっちを使うことが多かったりするんだろうか...？

[GitHub公式個人用アクセス トークンを管理する](https://docs.github.com/ja/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)

最近変わったのかと思ってたらこの記事
[POTEPAN STYLE GitHubのAccess token認証方法とは？Password認証の廃止](https://style.potepan.com/articles/34189.html)
等見てみたら2021年8月13日にパスワード認証が廃止
されていたらしい。
>Access token認証はHTTPS接続時に利用する方法です。
もう一つの接続方法SSHについては後述する内容をご確認ください。

ITスクールを利用していたときはSSH接続で利用していたから知らなかったんだなぁ...
【Heroku】デプロイエラー　Cannot find package '@babel/plugin-proposal-private-methods'　解決策を探る

プログラミング初心者です。
Herokuへのデプロイで詰まった部分を、勉強のためまとめてみようと思います。

# 環境
Ruby on Rails  (6.1.7.6)
Heroku (7.47.7)
MySQL（8.1.0）

# エラー内容

```heroku.logs

 Compiling...
       Compilation failed:
       Hash: 0995169381fdf04c2e5d
       Version: webpack 4.47.0
       Time: 598ms
       Built at: 09/19/2023 9:01:59 AM
        2 assets
       Entrypoint application = js/application-d6bd20caf583a9f90502.js js/application-d6bd20caf583a9f90502.js.map
       [0] ./app/javascript/packs/application.js 4.54 KiB {0} [built] [failed] [1 error]
       
       ERROR in ./app/javascript/packs/application.js
       Module build failed (from ./node_modules/babel-loader/lib/index.js):
       Error: Cannot find package '@babel/plugin-proposal-private-methods' imported from /tmp/build_ac3acc7b/babel-virtual-resolve-base.js
```


注目したのは、Error: Cannot find package '@babel/plugin-proposal-private-methods'の部分。
@babel/plugin-proposal-private-methodsが見つかりませんということらしい。



# 解決方法
herokuスターターガイドの「babelのリグレッションの修正」を参考にコードを修正。rails6とbabelの相性が、元のままだと悪いらしい。具体的には、proposal部分をtransformへ変更した。

https://devcenter.heroku.com/ja/articles/getting-started-with-rails6#fix-a-babel-regression


```babel.config.js (修正前).
@babel/plugin-proposal-private-methods
@babel/plugin-proposal-private-property-in-object
```

```babel.config.js (修正後).
@babel/plugin-transform-private-methods
@babel/plugin-transform-private-property-in-object
```

# デプロイ、学んだこと
```
git add .　
git commit -m "fix babel error"
git push heroku master
```
変更点をコミットして、herokuにプッシュ。エラーは解消され、無事にデプロイできた。
今回学んだことは、きちんとlogなどでエラー文を読み、公式マニュアルを読むこと。それが一番の近道だった。


# 参考にした記事
https://qiita.com/kndknd/items/18187f1c2199651d08d5

https://zenn.dev/redheadchloe/articles/3615a4d9bcd8a4
TyranoScriptで動的に生成したシナリオを実行してみる

# 概要
TyranoScriptで動的に生成したシナリオを実行することに成功したので、その方法を共有します。

# できること
JavaScript側で生成したシナリオを、通常のシナリオと同じように実行できるようになります。

# コード
まずはコードから
```js
[iscript]
// 仮想シナリオを構築
let scenario = "";
scenario += "Hello World[l][r]\n";
scenario += "仮想シナリオのテストです[p]\n";

// 仮想シナリオをキャッシュに格納
const scenario_name = "$TestScenario$";
let parsed_scenario = TYRANO.kag.parser.parseScenario(scenario);
TYRANO.kag.cache_scenario[`./data/scenario/${scenario_name}`] = parsed_scenario;

[endscript]

; 仮想シナリオをコール
[jump storage="$TestScenario$"]
```

# 解説
## Tyranoのシナリオキャッシュについて
Tyranoには1度ロードしたシナリオをキャッシュする機能があります。
この記事では、自前で生成した偽のキャッシュを読み込ませることで、ファイルとして存在しないシナリオを実行しています。

## シナリオ生成部分
```js
// 仮想シナリオを構築
let scenario = "";
scenario += "Hello World[l][r]\n";
scenario += "仮想シナリオのテストです[p]\n";
```
変数にシナリオを書き込んでいます。
ここを編集することで、より複雑なシナリオを生成することもできます。

## 偽キャッシュ生成部分
```js
// 仮想シナリオをキャッシュに格納
const scenario_name = "$TestScenario$";
let parsed_scenario = TYRANO.kag.parser.parseScenario(scenario);
TYRANO.kag.cache_scenario[`./data/scenario/${scenario_name}`] = parsed_scenario;
```
Tyrano側の関数で生成したシナリオデータを読み込み、キャッシュに格納しています。
このとき、キーは`./data/scenario/`の後にシナリオ名が続く形にしてください。
また、当たり前ですが実在するシナリオとパスが被ると、実在するシナリオの代わりに動的生成したシナリオが実行される場合があるので、絶対に被らないような名前にしてください。

## シナリオ実行部分
```js
; 仮想シナリオをコール
[jump storage="$TestScenario$"]
```
あとは普段と同じようにシナリオを実行するだけです。
Windows WSLに Dockerインストール


Docker Desktopが条件によっては有償らしいので、WSLの Linux上にインストールしてみる

# 事前作業
https://qiita.com/sk408/items/a6f3db4060dc1effadbf

# Dockerインストール
https://docs.docker.com/engine/install/ubuntu/

1.Docker の Apt リポジトリをセットアップします。
``` bash
# Add Docker's official GPG key:
sudo apt-get update
sudo apt-get install ca-certificates curl gnupg
sudo install -m 0755 -d /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
sudo chmod a+r /etc/apt/keyrings/docker.gpg

# Add the repository to Apt sources:
echo \
  "deb [arch="$(dpkg --print-architecture)" signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
  "$(. /etc/os-release && echo "$VERSION_CODENAME")" stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt-get update
```

2.Docker パッケージをインストールします。
```bash
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
```

3.イメージを実行して、Docker エンジンのインストールが成功したことを確認します `hello-world` 。
```bash
sudo docker run hello-world
```
prisma.jsでmampのデータベース（mysql）に繋ぐ

## prisma.jsとは
node.jsベースのORMツール。
jsやtsでガリガリクエリを書いたりできます。

まだそんなに使い込めてないけれど、
mampのDB（mysql）と繋ぎ込む方法に少し迷ったので備忘録含めメモ。

## そもそもprisma.jsでDBと接続するには

schema.prismaに接続DBを記載します。

```
datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}
```

上記に記載されているenvのDATABASE_URLは、.envに記載します。

```
DATABASE_URL="mysql://id:pass@localhost:port番号/DB名"

```


## 迷いポイント
mamp内のmysqlにターミナルから接続するには、
以下のmamp内の該当のフォルダに移動する必要があります。

/Applications/MAMP/Library/bin/

じゃあ、prismaでここに接続するには。。。？該当のフォルダに移動する必要があるのかな？
と少し迷いました。

## 結論
シンプルに、.envの下記に、該当のポートとDB、ID、passを記載すればokでした。
```
DATABASE_URL="mysql://root:root@localhost:8889/db名"
※ローカルのmampのid、パスはデフォルトでroot ,rootなことが多いようですが、変更されてる場合は適宜変更してください
```

難しく考えなくてもよかったのでした。
AtCoder用のディレクトリを爆速で用意するコマンド

# はじめに
AtCoderのABCやARCに参加する際、私は以下のようなディレクトリ構造で臨みます。
```
atcoder
- abc234
    - a.cpp
    - b.cpp
    - c.cpp
    - ...
- abc235
    - a.cpp
    - b.cpp
    - ...
- ...
```
しかし、手動でディレクトリを作成し、その中にファイルを作成するのは時間がかかります。また、以下のような共通するコードを手動で貼り付けるのも時間がかかってしまいます。

```cpp: template.cpp
#include <bits/stdc++.h>
using namespace std;
#define rep(i, n) for (int i = 0; i < (int)(n); i++)

int main() {
	
}
```

コンテスト開始までに時間があればこれでもいいかもしれませんが、開始まで残り1分といった状況では、すべてやるのは難しいですよね。

今回は、Atcoder用のディレクトリを作成して開くことができるシェルスクリプトについて解説します。
#### 注意
この記事ではMacOSを使用しています。また、shellはBashを使用しています。

# 下準備
`~/Documents/atcoder`に以下のようなファイルを用意します。
こちらのテンプレートの内容は任意です。普段お使いいただいてるもので構いません。
```cpp: template.cpp
#include <bits/stdc++.h>
using namespace std;
#define rep(i, n) for (int i = 0; i < (int)(n); i++)

int main() {
}
```

# ソースコード
```bash: mkcpp
#!/bin/bash

DIR=~/Documents/cpp
files=(a.cpp b.cpp c.cpp d.cpp e.cpp f.cpp)

if [ $# -ne 1 ];then
	echo "Usage: mkcpp (ContestName)";
	exit 1
fi
if [ -d $DIR/$1 ]; then
	echo "$1 exists.";
	exit 1
fi

mkdir $DIR/$1

for i in "${files[@]}"
do
	cat $DIR/template.cpp > $DIR/$1/$i
done
echo "Success!"
code $DIR/$1
```

こちらをホームディレクトリなどの任意のディレクトリに配置し、PATHを通します。
PATHの通し方についてはこちら
https://zenn.dev/d0ne1s/articles/1f435463551ac2

# 使い方
```terminal: input
mkcpp 任意のコンテスト名
```

このコマンドを実行することで、任意のコンテスト用のディレクトリが作成され、a.cppやb.cppといったファイルがテンプレート付きで生成されます。また、vscodeを入れている場合は、vscodeでこのディレクトリが開きます。

# 余談
catの代わりに、`tee`コマンドとパイプを使うことで、ファイルに書き出すこともできます。

# 追記
atcoder cliとonline-judge-toolsというものがありまして、めちゃ車輪の再開発をしていました。