OmniAICreator/Qiita-1.07M huggingface dataset:
Vue.js：メソッド呼び出し

# メソッド呼び出し

## 依頼
Vue.jsのコードを書いてください。
・メニューバー領域
　・コンテンツ１　・コンテンツ２　・コンテンツ３
・コンテンツ領域
・ヘッダー領域があります。
→ 領域ごとにVueとして切り分けてください。
ボタンを押すと　ヘッダー領域に　コンテンツ１のように値が渡るようにしてください。
Composition APIを使ってください。

## chatGPTからの回答
```javascript
App.vue
<template>
  <div>
    <MenuBar @content-clicked="updateHeader" />
    <ContentArea :selected-content="selectedContent" />
    <Header :selected-content="selectedContent" />
  </div>
</template>

<script>
import { ref } from 'vue';
import MenuBar from './components/MenuBar.vue';
import ContentArea from './components/ContentArea.vue';
import Header from './components/Header.vue';

export default {
  components: {
    MenuBar,
    ContentArea,
    Header
  },
  setup() {
    const selectedContent = ref(null);

    function updateHeader(content) {
      selectedContent.value = content;
    }

    return {
      selectedContent,
      updateHeader
    };
  }
};
</script>
</script>
```
MenuBar.vue:
```javascript
<template>
  <div>
    <button @click="selectContent(1)">コンテンツ１</button>
    <button @click="selectContent(2)">コンテンツ２</button>
    <button @click="selectContent(3)">コンテンツ３</button>
  </div>
</template>

<script>
import { defineEmits } from 'vue';

export default {
  emits: ['content-clicked'],
  methods: {
    selectContent(contentId) {
      this.$emit('content-clicked', contentId);
    }
  }
};
</script>
```
ContentArea.vue
```javascript
<template>
  <div>
    <!-- Content area template goes here -->
    <p>選択されたコンテンツ: {{ selectedContent }}</p>
  </div>
</template>

<script>
import { defineProps } from 'vue';

export default {
  props: {
    selectedContent: {
      type: Number,
      required: true
    }
  }
};
</script>

```
Header.vue:
```javascript
<template>
  <div>
    <!-- Content area template goes here -->
    <p>選択されたコンテンツ: {{ selectedContent }}</p>
  </div>
</template>

<script>
import { defineProps } from 'vue';

export default {
  props: {
    selectedContent: {
      type: Number,
      required: true
    }
  }
};
</script>

</script>

Vue.js 公式ドキュメント: https://v3.vuejs.org/
Vue.js Composition API ガイド: https://v3.vuejs.org/guide/composition-api-introduction.html
vue3ではscssの:exportが使えない


例えば以下のようなものがあります。


```scss:./src/style.scss

:export {
  color: red;
}
```

```vue:./src/App.vue
<script setup lang="ts">
import scss from './style.scss'
console.log(typeof scss)
</script>

<template>
  <main>
    <div>hello world!<div/>
  </main>
</template>
```

するとコンソールには`string`と表示されます。
すでにissueとしてはあがっています。
https://github.com/vitejs/vite/issues/1279

解決策を探してみましたがなさそうです。

一応

> :export {
>  color: ;
> }

とは表示されるのでそこをパースすれば行けるかもしれませんが骨が折れますね
ChatGPTで2段階認証（ワンタイムパスワード認証）を無効にする

【注意】
ChatGPTでワンタイムパスワードを求められて困っている人向けの情報です。
ChatGPTにログイン中のブラウザがあれば解決可能ですが、
どのブラウザもログインからしか始められない場合の解決方法は不明です。
（iPhoneのSafariからならワンタイムパスワードのログイン可能でした。）

■現象
2023/5/17頃からスマホのブラウザから
ChatGPTに新しくログインしようとすると、
ワンタイムパスワードの入力フォームが出てきた。

登録メールアドレスの受信フォルダ（迷惑メールフォルダも含めて）や
SMSを確認してもワンタイムパスワードのメールや通知がない。
何度ワンタイムパスワードの入力フォームを表示しても通知がない。
TwitterやGoogleなどの検索エンジンで調べてもあまり情報がなく。
困った！という情報ぐらいしかでてこない。

■参考
以下のサイトで2段階認証のキーワードを発見し、無効化できた。
https://www.reddit.com/r/ChatGPT/comments/13j52wx/chatgpt_onetime_code/

■方法方法
ログイン可能なブラウザから、
Settingsを開いて、
Data controlsタブのEnable two-factor authenticationをDisableにする。

■補足
iPhoneのSafariでは、ワンタイムパスワード入力フォームでワンタイムパスワードが受信？でき、ワンタイムパスワードのログインできました。


注意：画像は無効にした後のものです。
![Fwaw1wCakAAkmlt.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/121102/eb1e9a63-6431-7a51-e828-cc9d3f1bfbb9.jpeg)
【Xcodeエラー】Missing Package Product ‘パッケージ名’【解決方法】

とあるUdemyのSwift講座で「Chart」というライブラリを使うことになったのだが
「Cocoapods」だとエラーが起きて面倒だったので
「Swift Package Manager」でインストールすることにした。

その後に「Missing Package Product ‘パッケージ名’」と言った
エラーに遭遇した。

(自分の場合,
 「Missing Package Product ‘ChartsDynamic’」
 「Missing Package Product ‘Charts’」)


《GitHub リンク》
https://github.com/danielgindi/Charts

![スクリーンショット 2023-05-18 23.41.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359201/d87d836a-3848-25b1-fa67-a35d08aff5ef.png)

#### 【解決方法】

以下の参考記事の通りに

File → Packages → Reset Package Cachesをクリック

と進めたら解決できた。

#### 《参考記事》 【Xcode/Swift】Missing Package Product ‘パッケージ名’の解決方法
https://ios-docs.dev/missing-package-product/
【CSS】要素と要素の間に等間隔で縦線を入れるサンプルコード

# やりたいこと
下のデザインみたいに、要素と要素の間に等間隔で縦線を入れたい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526202/12498547-181c-0343-1e13-e27817dd5b1a.png)
参考「医療法人社団神明会 佐藤歯科医院」 (https://www.dentist-sato.com/)

# コード
フレキシブルボックスで要素を横並びにして、擬似要素を使って縦線を入れます。
```html:sample.html
<div class="flexContainer">
    <h1 class="title">ソダシ</h1>
    <p class="description">5歳牝馬</p>
</div>
```

```css:sample.css
/* フレキシブルボックス */
.flexContainer{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
/* フレキシブルボックスのアイテム */
.title{
    position: relative;
    margin-right: 134px; /* ポイント２ */
}
.description{
    flex-grow: 1; /* ポイント１ */
}
/*** 縦線 ***/
.title::before{
    content: "";
    /* 縦線の色・形 */
    width: 3px;
    height: 36px;
    border-radius: 2px;
    background-color: #dddddd;
    /* 配置場所 */
    position: absolute;
    right: -64px; /* ポイント３ */
}
```

## 結果
真ん中に左右の要素から等間隔で縦線が入る。
![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526202/4ea8babb-161c-fe97-4a56-3cd4132cf576.png)

## ポイント
### ポイント１：『flex-grow: 1』
フレキシブルボックスのアイテムをとりあえずくっつける。

### ポイント２：『margin-right: 134px』
くっつけたアイテムの間に隙間をあける。

### ポイント３：『right: -64px』
開けた隙間の半分くらいの箇所に縦線を配置する。

### 補足
ポイント２の隙間を変更すれば、要素間の大きさを調整することができて、変更した場合はmargin-rightの半分の値をポイント３に指定してあげれば調節できる。
ちなみに、リセットCSSを指定している場合はtop指定とか必要かもです。

# さいごに
タイトルで"等間隔"と書いてるのに割り算を間違えて、上のサンプルは等間隔じゃないのはすみません。（キャプチャ取り直すのが億劫なのでこのまま公開します。。）
【Android】Unity Remote5の使い方

# 0.Unity Remote5は便利
Unity Remoteというものを使うと、unityのモバイル開発が結構はかどる。

https://docs.unity3d.com/ja/2021.3/Manual/UnityRemote5.html

> Unity Remoteは、Android、iOS、tvOSの開発を支援するダウンロード可能なアプリケーションです。Unity Remoteは、ターゲットデバイスをUnityエディターに接続し、エディターからのビジュアル出力をターゲットデバイスの画面にフレームレートを落として表示します。また、ターゲットデバイスからのライブ入力をUnityで実行中のプロジェクトに送り返すこともできます。これは、ビルドを作成することなく、ターゲットデバイス上でアプリケーションがどのように見え、どのように処理されるかを確認するのに便利です。

Deepl翻訳さらっとやるとこんな感じです。
モバイルだとありがちなのがピンチイン・ピンチアウトの操作。スマホで拡大・縮小するあの操作です。
要はああいう、指二本で同時押しみたいな操作は、パソコンでやるUnityエディタ上でデバッグがなかなか難しい。そういうときにUnity Remoteがあると、いちいちビルドして試すという手間なく、エディタ操作の延長でそのままデバッグできるというわけです。

うっわー便利じゃん、さっそく使おう、というわけでこの存在を知った諸氏は検索して適当なブログか何かでチュートリアルやるわけですけど、ざっとググる感じ、なんか記事のラインナップが古い気がしたんですよね...

ってことで、環境的に自分はAndroidのみになりますが、ここいらでまとめておこうと思います。

:::note info 
当方の環境
- Windows10 Home
- Google Pixel 6a
:::

# 1.準備
AndroidスマホにUnity Remote5をダウンロードします。

https://play.google.com/store/apps/details?id=com.unity3d.mobileremote&hl=ja&gl=US

あとはまあ、パソコンにUnityエディタ入れてある...のは前提とすると。
ファイル転送に対応しているUSBケーブルが必要っすね。

# 2.導入方法
##### 1.Unityエディタで `Edit > Project Setting > Editor > Unity Remote5 > Device` を `Any Android Device` にする。

![UnityRemote5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/ef689f06-6848-c099-57dd-7347a7d1fcd8.png)

これが最低限の設定。もう少し細かな設定あるけど、まあ無視してもいい。
てかこれ、Unity Remote5起動すると書いてあるし、覚える必要もない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/19556c7e-920c-208a-7dea-83463f59cfc2.png)

##### 2.Unityエディタの `Build Setting > Switch Platform` で `Android` にプラットフォームを変えておく

![VRShooting - SampleScene - Android - Unity 2022.2.18 _DX11_ 2023_05_18 23_04_45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/81c4df84-55c8-c182-eb0b-762b79614309.png)

忘れがちだけど、必要。

##### 3.Androidを開発者モードにする

https://developer.android.com/studio/debug/dev-options?hl=ja

モノによっていろいろですが、大概<INS>Androidのシステムの設定のバージョンが書いてあるところを7回タップ</INS>です。

##### 4.Androidの開発者向けオプションのUSBデバッグを有効化する
開発者向けオプションは、さっき連打したところをもう一度押したら...いけるかもしれない。
これもデバイスごとに違うから調べてもらわないと難しいな...。

![UnityRemote続き.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/07222f96-b178-d1f5-cc29-2783ee3a01a6.png)

##### 5.Unity Remote5を起動済のAndroidとPCをUSBケーブルで接続する
ここまできたら、さっそくUSBケーブルで接続！
すると...こんなやつが出てくる...はず！

![UnityRemote続き2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/2e6cc80a-ade0-8b54-13bf-b6bb43c18f21.png)

RSAキーというやつだが、これを許可しないといけない。
ここが個人的にはハマりポイントな気がする。以下のサイトとかから知見を得たのだが、つまり日本語のサイトからは情報が得られなかったってことである。

https://stackoverflow.com/questions/65642880/commandinvokationfailure-unity-remote-requirements-check-failed/66345155#66345155

##### 6.Unityエディタ側でゲーム再生する
これで設定全て終わり。
Unityエディタ側でゲームを再生すると、お手元のAndroidでもゲームが再生され、操作もできる。

# 3.その他起こりそうなエラーについて
https://baba-s.hatenablog.com/entry/2021/03/15/090000

このエラーはUnity Remoteする気持ちがない状況なら設定きればいいだけだが、する気があるのにエラー発生するなら何かしら原因があることになる。

例えば、AndroidまわりのSDKなどのモジュールでエラーしている、とか。
![ARビルド7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/08b82f99-9942-8bdc-eccd-295cc99c8893.png)

自分のUnity.2022.2.18くん、ちゃんとモジュール入っているのに連携うまくいってないんだよなあ...
こういうのだとUnity Remoteできない、かも。

# 4.まとめ
Unity Remote5のAndroidでの使い方についてまとめました。
iPhone版の使い方については、誰か、任せた！
【Linux】コマンドを続けて実行する

## 複数のコマンドを連結して実行する方法
シェルスクリプトにおいて、`;` `&` `&&` `||` でコマンドを連結することで複数のコマンドを連続して実行することができます。

### `;` (セミコロン)
`;`は前のコマンドが終了すると次のコマンドが実行されます。

```
$ command1 ; command2
```
上記の場合には`command1`が終了すると`command2`が実行されます。

### `&` (アンパサンド)
`&` は前のコマンドの終了を待たず次のコマンドが実行されます。

```
$ command1 & command2
```

上記の場合には`command1`を実行しながら`command2`を実行します。

### `&&`
前のコマンドが終了ステータス0で正常終了した場合に次のコマンドを実行します。
異常終了した場合は`command2`は実行されません。

```
$ command1 && command2
```

上記の場合には`command1`が正常終了した場合に`command2`を実行します。
`command1`が異常終了した場合には`command2`は実行されません。

### `||`
前のコマンドが終了ステータス0以外で異常終了した場合に次のコマンドを実行します。
前のコマンドが正常終了した場合には次のコマンドは実行されません。
```
$ command1 || command2
```

上記の場合には`command1`が異常終了した場合に`command2`を実行します。
正常終了した場合は`command2`は実行されません。
Sangoのトップページの右側（サイドバー）を消す方法

### 結論
トップにしている固定ページ→クイック編集
![スクリーンショット_2023-05-18_23_12_38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557847/72ac7050-3f6b-3015-c582-ddf10cdb53f0.png)

ここをトップページ用にする。

### ちなみに
好きな固定ページをトップにするのは、固定ページを作ってから、WordPressの管理ページの設定→表示設定
![スクリーンショット 2023-05-18 23.14.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557847/947a428d-8b92-8419-0142-2d2afadb3e5e.png)

ここだけわかりにくい...気がしました。
ChatGPTを使って入試問題を解く～プロンプトの工夫と自然言語～part1

# 序論的なお気持ち表明

最近、世の中はChatGPTでにぎわっていて、どの界隈でもある程度はそれを有効活用しようという流れが見られるような気がします。しかし、特に学業の世界では、そのような手法は禁忌とされ避けられています。例えば、様々な大学がレポートの利用に禁止、または非推奨の立ち場をとっています。
しかし、私たちは本当はあるべきものを積極的に利用していくべきではないでしょうか。つまり保守になりすぎず、システムやその背景にある技術知識を身につけ、そのうえできちんとメリデメを判断すべきではないでしょうか。という軽いぼやきです。

大学入試の問題の難しさは「制限時間」と「手計算」というところにあると思います。そこで、安逸ですが、単純な計算を任せたら早く、答えのみを得るという点において有用だと考えました。特に有効なのはプログラミングを知らない層でも扱えることです。今回はpythonを使っているので、Google Colabなどを使えば環境構築すら必要ありません。

part1は整数や解析の問題を中心にまとめました。今後も少しずつ問題を追加していこうと思います。

# 0：前提条件
ChatGPT model-4
使用言語：英語(English)
出力形式："export python code"

# 1：2005年東京大学（前期）
【問題】
$3 \leq a \leq 9999$を満たすような奇数$a$について$a^2-a\equiv 0(\text{mod}10000)$を満たすものをすべて求めよ

やや表現を改めました。この程度なら単純な繰り返しで書くのが筋でしょう。

【コード】
```
solutions = []

for a in range(3, 10000, 2):
    if (a**2 - a) % 10000 == 0:
        solutions.append(a)

for solution in solutions:
    print(solution)
```

【出力結果】
```
625
```

答えが存在するというのを前提にしているため、答えが見つからなかった場合の出力は特に考えていません。

# 2：2022年北海道大学（後期）

注意しなければいけないのは、正の整数だけではなく、負の整数も答えとしてありえます。（考慮し忘れていたので、一度プロンプトを打ち直しました）
また、探索する範囲についても極端に大きい値をとらなくても、実際には「手計算」で解かないといけないことを考えればさほど大きい値になるはずがありません。

【コード】
```
max_value = 100
min_value = -100

solutions = []

for a in range(min_value, max_value + 1):
    for b in range(a, max_value + 1):
        for c in range(b, max_value + 1):
            S = a**3 + b**3 + c**3 - 3*a*b*c
            if S == 63:
                solutions.append((a, b, c))

for solution in solutions:
    print(solution)
```

【出力結果】
```
(-2, 2, 3)
(-1, 0, 4)
(6, 7, 8)
```
正解です。しかし、多重ループは読みづらいですし、計算量があるため、絶対値$10^3$程度で少し遅いなとなりました。そこで追加で質問しました。
【コード2】
```
import itertools

max_value = 100
min_value = -100

values = list(range(min_value, max_value + 1))

solutions = []

for a, b, c in itertools.combinations_with_replacement(values, 3):
    S = a**3 + b**3 + c**3 - 3*a*b*c
    if S == 63:
        solutions.append((a, b, c))

for solution in solutions:
    print(solution)
```

たしかに改善されていますね。事前に"readble"などと説明しておくといいのかもしれません。

# 3：2019年東京大学

【問題】
次の積分を求めよ
$$\int_{0}^1 \left(x^2+\dfrac{x}{\sqrt{1+x^2}}\right)\left(1+\dfrac{x}{(x^2+1)\sqrt{1+x^2}}\right)$$

【コード】
```
from scipy.integrate import quad
import numpy as np

def f(x):
    return x**2 + x/np.sqrt(1 + x**2)

def g(x):
    return 1 + x/((x**2 + 1)*np.sqrt(1 + x**2))

def h(x):
    return f(x) * g(x)

integral_value, error = quad(h, 0, 1)

print(f"The integral value is {integral_value}. The estimated error is {error}.")
```

【出力結果】
```
The integral value is 1.0115663209647952. The estimated error is 1.1230642204704767e-14
```
estimated errorは推定誤差のことです。
想定解は
$$\dfrac{\pi}{8}+\dfrac{5\sqrt{2}}{2}-\dfrac{35}{12}$$
なのですが、これをwolfram-alphaで近似計算すると
$$1.0115663209647951101453855667675163902821591966975917438969007523$$
となります。ほとんど誤差がないといっても過言ではないでしょう。

# 所感と検討
以上で簡単な実験を終わります。
ただ、pythonで実装していますが、ほかの言語のほうが適していたりする場合ももちろんあると思います。また、いくつかの入試問題は競プロのようなアルゴリズムを考えることで解けるでしょう。

考えられるプロンプトの工夫としては、事前にこちらで次のようなことを指定することでしょう。
・入力形式、出力形式、制約条件
・言語や使う（と想定される）ライブラリ
・アルゴリズムなどの具体的なアイディア
すると、（~~人間よりも~~）意図を組んだものを出力してくれます。使い方次第では、入試も変わっていくのかもしれませんね。
Pandasの使い方

##pythonによるデータ分析学習時のメモ。間違っているかもしれない。

##環境、条件
jupyter notebook(anaconda3)

##pandasライブラリを使えるようにするには
pandasのインポート
毎回pandasと打つのは大変なので、as　●●　として省略する。
●●は何でもよいけれど、大体はpdとする。
```
import pandas as pd
```

##CSVデータを読み込む
列情報がすべてデータであれば、index_col=0
```
pd.read_csv("ファイル名", index_col=0)
```

##2つのデータを横方向にくっつける。
mergeメソッドを用いる。
一致させる列の名前をキーとする。
キーは複数指定の場合リストにする。
元のデータの右に、新たなデータをくっつける場合。レフトジョイン。
```
#キーが一つの場合
pd.merge(元のデータ, くっつけたいデータ, left_on=元のデータのキー, right_on=くっつけたいデータのキー, how="left)

#キーが複数の場合
pd.merge(元のデータ, くっつけたいデータ, left_on=[元のデータのキー], right_on=[くっつけたいデータのキー], how="left)
```

##列データの選択と並び替え
データから列AとBのみ抜き出し、B→Aの順に表示させる。
```
データ[["B", "A"]]
```

##行データの選択
locメソッドを用いる。
A列の情報が「Anpan」である行のみ抜き出したい場合。
```
データ.loc[データ["A"]=="Anpan"]
```
Java 引数なし・ありコンストラクタの作成と使用方法

# はじめに
引数なしのコンストラクタと引数ありのコンストラクタの作成方法について学習の振り返りをしていきます。


こちらの記事で使用したオブジェクトを使います。
https://qiita.com/c-katsuki/items/442518df7039d442cb43


# コンストラクタとは
コンストラクタとは、クラスからオブジェクトを作成した際に、実行されるメソッドになります。

実際にコンストラクタを使用してコードを書いていきます。


```java:ItemBean.java
public class ItemBean implements Serializable {

    //属性の作成
    private String itemID; //商品ID
    private String itemName; //商品名
    private int itemPrice; //商品価格
    private int itemStock; //商品在庫
    
    //引数ありのコンストラクタを作成した場合、引数なしのコンストラクタを作成する必要あり
    public ItemBean() {
    }

    //引数ありコンストラクタ（ID, 名前, 値段, 在庫）
    public ItemBean(String itemID, String itemName, int itemPrice, int itemStock) {
        this.itemID = itemID;
        this.itemName = itemName;
        this.itemPrice = itemPrice;
        this.itemStock = itemStock;
    }

    public String getItemID() {
		return itemID;
	}
	public void setItemID(String itemID) {
		this.itemID = itemID;
	}
	public String getItemName() {
		return itemName;
	}
	public void setItemName(String itemName) {
		this.itemName = itemName;
	}
	public int getItemPrice() {
		return itemPrice;
	}
	public void setItemPrice(int itemPrice) {
		this.itemPrice = itemPrice;
	}
	public int getItemStock() {
		return itemStock;
	}
	public void setItemStock(int itemStock) {
		this.itemStock = itemStock;
	}

}
```

属性値があるコンストラクタを定義する場合は、引数ありだけでなくなしのコンストラクタも定義する必要があります。

また、コンストラクタはクラスと同じ名前で作成する必要があります。

実際に引数なし・ありでコードを書いてみます。
# 引数なしのコンストラクタ

```java:ItemNoArguments.java
public class ItemNoArguments {

	public static void main(String[] args) {
	
    	//商品の作成（引数なしのコンストラクタで作成）
    	ItemBean itemBean = new ItemBean();
    	itemBean.setItemID("001");
    	itemBean.setItemName("商品1");
    	itemBean.setItemPrice(1000);
    	itemBean.setItemStock(10);

        //商品情報を表示
        System.out.print(itemBean1.getItemID()); //001
        System.out.print(itemBean1.getItemName()); //商品1
        System.out.print(itemBean1.getItemPrice());　//1000
        System.out.println(itemBean1.getItemStock()); //10

    }

}
```
インスタンスを変数に割り当て、変数を通じて属性値を使用しています。

つまり１属性値に対して１行コードを記載する必要があり、属性値が多くなると可読性が悪くなるかなと感じました。

引数ありのインスタンスを作成してみます。

# 引数ありのコンストラクタ

```java:ItemWithArguments.java
public class ItemWithArguments {

	public static void main(String[] args) {
	
    	//商品の作成（引数なしのコンストラクタで作成）
    	ItemBean itemBean = new ItemBean("001", "商品1", 1000, 10);

        //商品情報を表示
        System.out.print(itemBean1.getItemID()); //001
        System.out.print(itemBean1.getItemName()); //商品1
        System.out.print(itemBean1.getItemPrice()); //1000
        System.out.println(itemBean1.getItemStock()); //10

    }

}
```

引数ありの場合、インスタンスを作成したタイミングで属性値を使用できるのでコードをすっきりして書くことができました。

# まとめ
属性値を宣言していたので、引数なしのコンストラクタをItemBeanクラスに記載する必要がありましが、属性値を宣言しない場合は、引数無しのコンストラクタを使用しなくて済むのか？などいくつか疑問が増えました。

分かり次第記事にしていきます。
ChatGPTは遂にワールドトリガーを理解した

# Browsing機能によってChatGPTの回答精度が向上

以前の投稿で、漫画「ワールドトリガー」の基本的な知識を正確に回答できるか、ChatGPTを使って検証しましたが、ブラウザ版（GPT-3.5&4）でも、API（Wikipediaの内容をプロンプトに追加：gpt-3.5-turbo）を使ってもうまくいきませんでした。

https://qiita.com/SwagPrinceJellyfish/items/5afa012590be06f4b066

> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3311319/eaf3b89a-b214-e379-3797-bbd49223fdca.png)


今回、Browsing機能が使えるようになったので、同様の質問をしてみたところ（GPT-4を利用）・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3311319/d5121b61-13cf-905f-8af5-edf09fcfe672.png)
完璧な回答が返ってきました:astonished:！！！

# 感想
LangChainでエージェントに検索エンジンを使わせれば・・・とか考えていましたが、ChatGPTに単純に質問する以上の付加価値を付けるのは、私の技術力では到底無理そうです。。
[備忘録]圧縮方式の用語まとめ

画像・動画周りの圧縮方式が色々と似ているので、
整理のために記載した。

### そもそも画像・動画のエンコーディング処理（圧縮）とは
圧縮・エンコーディングの主な目的は、動画の記録、保存および伝送するのに必要となるデータの量を削減すること。動画をエンコーディングする多くのアルゴリズムがある。
例：MPEG2, H.264, VP9など。

### JPEG (Joint Photographic Experts Group)
人の目に見えない程度の小さいデータを切り捨て保存する圧縮方法。
単一の画像・フレームで機能する＝静止画像の圧縮方式。
圧縮率を指定することで、画像ファイルのサイズを小さくできる。

### MotionJPEG  
画像の圧縮方式であるJPEGを応用して動画データを生成する圧縮・記録方式のこと。
JPEG画像をパラパラマンガのように次々と表示して動画とする。

### MPEG  (Moving Picture Experts Group codecs)
動画・音声の圧縮方式で、情報量が多い動画や高解像度動画を格納することが出来るファイル形式。「_MPEG-1_」「_MPEG-2_」「_MPEG-4_」といった種類がある。
MPEGは、MotionJPEGが2次元圧縮であるのみに対して、時間軸すなわちフレーム間を含めた3次元の圧縮方式であることに注意。
linuxチートシート

#### cd
change directoryの略
カレントディレクトリ（現在位置）を変更

#### mkdir
make directoryの略
新しいディレクトリを作成
 
#### pwd
print working directoryの略
カレントディレクトリ（現在の位置）を表示

#### rmdir
remove directoryの略
空のディレクトリを削除。
中身があるディレクトリを削除する場合は、代わりにrm -rコマンドを使用。

#### cat
concatenateの略
一つ以上のファイルの内容を順番に表示

#### rm -r
removeの略
指定したファイルやディレクトリを削除。-rオプションを追加することで、ディレクトリとその中身全てを再帰的に削除

#### rmdir
remove directoryの略
空のディレクトリを削除。内容があるディレクトリは削除できない

#### ps
process statusの略
現在動作中のプロセスの情報を表示

#### ls -al
listの略
ディレクトリの内容を表示。

    -a：隠しファイルも含めて全てのファイルを表示
    -l：詳細な情報（ファイルの所有者、サイズ、最終更新日など）と共に表示
    
#### id
ユーザのUID（ユーザID）やGID（グループID）、所属グループなど、ユーザの身元情報を表示

#### su
substitute userまたはswitch userの略
別のユーザのシェルを開始。特にユーザ名を指定しない場合デフォルトはroot

#### su -
suコマンドと同じだが、-オプションを追加することで新しいユーザのホームディレクトリに移動し、そのユーザの環境変数を設定

#### sudo
superuser doの略
他のユーザ（デフォルトではスーパーユーザ）としてコマンドを実行
一時的に管理者権限を得て作業を行える

#### grep
ファイルや標準入力から指定したパターンに一致する行を検索し表示

#### aptとapt-get
UbuntuなどのDebianベースのLinuxディストリビューションでソフトウェアパッケージを管理するためのコマンド。apt-getは古いコマンドで、aptはこれをより使いやすくした新しいコマンド。例えば、パッケージをインストールするためにはapt install [package]またはapt-get install [package]を使う

#### ssh
secure shellの略
ネットワーク経由で別のコンピュータに安全にログインしたり、コマンドを実行したりするためのコマンド

#### psql
PostgreSQLデータベースのCLI。データベースへのクエリの実行や管理を行う

#### chmod
change modeの略
ファイルやディレクトリのパーミッション（アクセス権）を変更

#### adduser
新しいユーザアカウントをシステムに追加

#### cp 
copyの略
ファイルやディレクトリをコピー

cp　オプション　ソース　ディスティネーション　→　覚え方　cpおそいでーー

    よく使うオプション　-r -f -u
        -r：ディレクトリとその内容を再帰的にコピー
        -f：強制的にコピーを行い、必要ならば既存のファイルを上書き
        -u：ソースファイルが既存のファイルより新しい場合にのみコピー

#### scp 
SSH（Secure Shell）プロトコルを使用してリモートホスト間でコピー

ファイルやディレクトリをコピー

scp　オプション　ソース　ディスティネーション　→　覚え方　scpおそいでーー

    よく使うオプション　-P -r
        -P：リモートホストへの接続に使用するポート番号。デフォルト22
        -r：ディレクトリとその内容を再帰的にコピー

たとえばwslのubuntuとロリポップサーバーのように、サーバーとクラアントの双方にbashがある場合、どちらのbashを使っているかを意識すること。
sshで接続したbashはそこがローカル（./とか短いやつ、urlじゃない方）になる、サーバーであってもbashがサーバー側で動いてるならサーバーがローカルになる。


#### passwd
ユーザのパスワードを変更

#### tar
'tape archive'の略で、複数のファイルやディレクトリを一つのアーカイブファイルにまとめたり、その逆の操作を行ったりします。gzipやbzip2などと組み合わせてファイルの圧縮・解凍も行います。

#### mv
'move'の略で、ファイルやディレクトリの名前を変更や、別の場所に移動

#### cc
C 言語のソースコードをコンパイル。基本的な形式は cc source.c で、これにより source.c という C 言語のソースコードファイルがコンパイルされ、結果として実行可能なバイナリファイル a.out が生成

さらに詳細なオプションを付けることで、出力ファイルの名前を指定したり、最適化のレベルを設定したり、特定のライブラリとリンクできる

#### rsync
ファイルとディレクトリの同期を行うためのツール

基本的な使い方
ローカルのディレクトリを同期する：

    rsync -av /path/to/source/ /path/to/destination/

リモートホストのディレクトリと同期する：

    rsync -av /path/to/local/dir user@remotehost:/path/to/remote/dir

またはリモートからローカルへの同期：

    rsync -av user@remotehost:/path/to/remote/dir /path/to/local/dir

 オプションの説明
 
    -a: ファイルの属性を保持しながら、ディレクトリを再帰的にコピー
    -v: 処理中のファイル情報を詳細に表示
    --progress: 各ファイルの転送進捗を表示
    -z: ネットワーク経由で転送するデータを圧縮
    --delete: 同期先のディレクトリから、同期元に存在しないファイルを削除

パスの最後にスラッシュ(/)をつけるかどうかで挙動が異なる。
/source/（スラッシュあり）ではsourceディレクトリ内の内容が転送対象
/source（スラッシュなし）ではsourceディレクトリ自体が転送対象

~/src/a　と　~/dst があった場合

    rsync -av ~/src/ ~/dst 　とすると　~/dst/aとなり
    rsync -av ~/src　~/dst 　とすると　~/dst/s/a
クリックイベント

クリックイベントを起こす時の定型
以下では「#result」に文字を表示させている

```javascript
$(function(){
	$("#target").click(function(){
		$("#result").text("クリックしました");
	})
});
```

```html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>イベント</title>
    <!-- jQuery -->
    <script src="js/jquery.min.js"></script>
    <!-- 外部CSS/JavaScript -->
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <script src="js/main.js"></script>
  </head>
  <body>
    <h1 id="target">イベント</h1>
    <h1 id="result"></h1>
  </body>
</html>

```

ちなみに以下の引数なしの場合はクリックを強制で行えるらしい
```javascript
$(function(){
	$("#target").click();
});
```
[Git] 動作を試す 実行例32：revertでマージを明示的に打ち消して戻す

Gitの動作を理解するために、Gitのコマンドを実際に試して、結果を見てみました。

1つの記事内で一連のGitコマンドが完結しているので、これら一連のコマンドを順に実行させて結果を見ることで、一連のGitの動作を実際に体感でき、一通り独習することが可能です。

※前回記事のリポジトリ状態からの続きになっています。
| [前回記事へ](https://qiita.com/dl_from_scratch/items/bafa09f6ae544340e9cd) | [目次へ：Git関連記事のまとめページ](https://qiita.com/dl_from_scratch/items/597bc28a4787a7901d21) | [次回記事へ](https://qiita.com/dl_from_scratch/items/5f3dba80422dce432efc) |
|:-:|:-:|:-:|

# 実行例

```
dir /b
↓
結果: 
test1.txt
test10.txt
test2.txt
test4.txt

※マージコミットを明示的に打ち消して戻す(新しいコミットを作る)
※-m 1 or 2オプションで、保持すべき「メイン」の親がどれであるかを指定
git revert -m 1 HEAD --no-edit
↓
結果: 
[branch1 ed89b19] Revert "Merge branch 'master' into branch1"
 Date: Sun Jan 1 18:52:53 2023 +0900
 3 files changed, 2 insertions(+), 5 deletions(-)
 delete mode 100644 test10.txt

git show -s
↓
結果: 
commit ed89b19b2700e54c315d9e453e0c0803dab6b717 (HEAD -> branch1)
Author: person1 <person1@abc.def>
Date:   Sun Jan 1 18:52:53 2023 +0900

    Revert "Merge branch 'master' into branch1"

    This reverts commit 135f847ec431e2a07484d9a1b70a75022bb4e953, reversing
    changes made to 2495cae5d5c421e418d91d4053489c05ba9a2703.

git log --oneline --graph --all
↓
結果: 
* ed89b19 (HEAD -> branch1) Revert "Merge branch 'master' into branch1"
*   135f847 Merge branch 'master' into branch1
|\
| * 60b0341 (master) message12
| * 045a734 message11
| * d10f934 message10
* | 2495cae message7
|/
| * b838160 (branch2) message9
| * c68ef01 message8
|/
* 94996a0 message4
* 20bbab7 message3
* 00cad71 message2
* 4ace194 message1

dir /b
↓
結果: 
test1.txt
test2.txt
test4.txt

type test1.txt
↓
結果: 
Sample-Added-11
Sample-Added-12
Sample-Added-13
Sample-Added-14
Sample-Added-17

※branch1側に戻る

-----

(※1つ前＝始めの状態に戻す)
git reset --hard "HEAD^"
type test1.txt
↓
結果: 
Sample-Added-11
Sample-Added-12
Sample-Added-13
Sample-Added-14
Sample-Added-17+110+111

-----

git revert -m 2 HEAD --no-edit
↓
結果: 
[branch1 116f132] Revert "Merge branch 'master' into branch1"
 Date: Sun Jan 1 18:55:53 2023 +0900
 1 file changed, 2 insertions(+), 1 deletion(-)

type test1.txt
↓
結果: 
Sample-Added-11
Sample-Added-12
Sample-Added-13
Sample-Added-14
Sample-Added-110
Sample-Added-111

※master側に戻る

-----

(※1つ前＝始めの状態に戻す)
git reset --hard "HEAD^"
type test1.txt
↓
結果: 
Sample-Added-11
Sample-Added-12
Sample-Added-13
Sample-Added-14
Sample-Added-17+110+111
```

# 環境

Windows 10、PortableGit-2.40.0-64-bitを使用、全てローカルPC上で実施、GitHub等は不使用。
[Git] 動作を試す 実行例30：logでブランチのコミット履歴を調べる

Gitの動作を理解するために、Gitのコマンドを実際に試して、結果を見てみました。

1つの記事内で一連のGitコマンドが完結しているので、これら一連のコマンドを順に実行させて結果を見ることで、一連のGitの動作を実際に体感でき、一通り独習することが可能です。

※前回記事のリポジトリ状態からの続きになっています。
| [前回記事へ](https://qiita.com/dl_from_scratch/items/fa4662ba8a336e2f0e19) | [目次へ：Git関連記事のまとめページ](https://qiita.com/dl_from_scratch/items/597bc28a4787a7901d21) | [次回記事へ](https://qiita.com/dl_from_scratch/items/bafa09f6ae544340e9cd) |
|:-:|:-:|:-:|

# 実行例

```
(※始めにブランチの形を確認)
git log --oneline --graph --all
↓
結果: 
* b838160 (branch2) message9
* c68ef01 message8
| * 2495cae (branch1) message7
|/
* 94996a0 (HEAD -> master) message4
* 20bbab7 message3
* 00cad71 message2
* 4ace194 message1

※現在のブランチ構造の模式図
message1-2-3-4 ←master
             |
             +-7 ←branch1
             |
             +-8-9 ←branch2

-----

※masterブランチだけのログを表示
git log --oneline --graph master
↓
結果: 
* 94996a0 (HEAD -> master) message4
* 20bbab7 message3
* 00cad71 message2
* 4ace194 message1

※masterとbranch1ブランチだけのログを表示
git log --oneline --graph master branch1
↓
結果: 
* 2495cae (branch1) message7
* 94996a0 (HEAD -> master) message4
* 20bbab7 message3
* 00cad71 message2
* 4ace194 message1

-----

※branch1にはなくbranch2のみにあるコミットのログを表示
git log branch1..branch2 --oneline
↓
結果: 
b838160 (branch2) message9
c68ef01 message8

※同様
git log branch2 --not branch1 --oneline
↓
結果: 
b838160 (branch2) message9
c68ef01 message8

※同様
git log branch2 "^branch1" --oneline
↓
結果: 
b838160 (branch2) message9
c68ef01 message8

-----

※branch2にはなくbranch1のみにあるコミットのログを表示
git log branch2..branch1 --oneline
↓
結果: 
2495cae (branch1) message7

※同様
git log branch1 --not branch2 --oneline
↓
結果: 
2495cae (branch1) message7

※同様
git log branch1 "^branch2" --oneline
↓
結果: 
2495cae (branch1) message7

-----

※branch1とbranch2のどちらかにのみあるコミットのログを表示
git log branch1...branch2 --oneline
↓
結果: 
b838160 (branch2) message9
c68ef01 message8
2495cae (branch1) message7

※どちらのブランチにあるかを併せて表示
git log branch1...branch2 --oneline --left-right
↓
結果: 
> b838160 (branch2) message9
> c68ef01 message8
< 2495cae (branch1) message7

-----

※branch1とbranch2の分岐直前にあるコミット(分かれ元の原点)
git merge-base branch1 branch2
↓
結果: 
94996a08c7d417aa01f78359887c7c59b8f3e309

-----

※branch1とbranch2のどちらかからたどれるコミットのログを表示
git log branch1 branch2 --oneline
↓
結果: 
b838160 (branch2) message9
c68ef01 message8
2495cae (branch1) message7
94996a0 (HEAD -> master) message4
20bbab7 message3
00cad71 message2
4ace194 message1

-----

※branch1とbranch2のどちらかからたどれるが、masterからはたどれないコミットのログを表示
git log branch1 branch2 --not master --oneline
↓
結果: 
b838160 (branch2) message9
c68ef01 message8
2495cae (branch1) message7

※同様
git log branch1 branch2 "^master" --oneline
↓
結果: 
b838160 (branch2) message9
c68ef01 message8
2495cae (branch1) message7
```

# 環境

Windows 10、PortableGit-2.40.0-64-bitを使用、全てローカルPC上で実施、GitHub等は不使用。
Power BI Desktop で SharePoint のデータソースに接続しようとして認証に失敗するときの対処法

**Power BI Desktop** に関連するトラブルシューティング情報です。

Power BI Desktop から SharePoint上にあるExcelファイルやCSVファイルをデータソースとして接続しようとして、なぜか上手く認証されないときに、以下の方法で解決することができました。
自分の備忘の為にも、書き残しておこうと思います。
同様の事象が起こった場合に、参考にしていただければ幸いです。
***
**（参考にした Japan CSS Support Power BI Blog のリンク）**
[Power BI Desktopのトラブルシューティング：提供された資格情報で認証できない](https://jpbap-sqlbi.github.io/blog/powerbi/pbi_datasource_authentication/ "Japan CSS Support Power BI Blog")
***

**対処法　その１**

[ホーム] タブ > データの変換 > データ ソース設定 を選択します。
（[ファイル] タブ > オプションと設定 > データ ソース設定 からでもOK）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3092293/cf93e3a3-5adf-781d-ccd6-1e47c78f0aa5.png)

「グローバルアクセス許可」を選択し、一覧に表示された中から
上手く認証されないSharePointサイトのURLを選択した状態で、
「アクセス許可のクリア」ボタンを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3092293/e6a03acd-2d43-9608-0485-a2812ad5c363.png)

下記の確認メッセージが表示されるので「削除」ボタンを押下し、
元の画面で「閉じる」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3092293/97b3fb86-9a8e-158d-87a7-f357a1e4c985.png)


**対処法　その２**

（事前準備：Power BI Desktopは、あらかじめサインアウトしておきます。）

[ファイル] タブ > オプションと設定 > オプション を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3092293/5b72885f-fffc-635e-7b3f-a5baeac3ce07.png)

オプション > グローバル の セキュリティ > **証明書の失効**
にて、「なし」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3092293/cc719673-acb1-7a68-8b52-e66707951629.png)

同画面で更に下へスクロールして、**認証ブラウザー**
の「既定のWebブラウザーを使用します」にチェックを入れ、
「OK」ボタンを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3092293/1d2bb2b2-d809-4f6f-600d-dd68f6e4d9f4.png)


上記のいずれかの対処法を実施した後、Power BI Desktop を再起動し、
改めてSharePointデータソースに接続を試みた結果、認証の失敗が回避できました。
（Power BI Desktopとは別にWebブラウザが起動して、認証画面が表示されます。）

以上、ご参考までに。
MySQLのアップデート

# アップデートまでの流れ
・MySQLにてEXPLAIN ANALYZE ステートメントの実行ができない
・調査の結果MySQL`` 5.7.42 ``だとバージョンが古い
・アップデートしよう！
・何故か上手くできない！　
・入れ始めたばかりだからアンインストールしてやり直し
・成功！

# 試みた事
mac os `` 13.3.1 ``にて、Homebrew経由でターミナルから導入しているので、同じようにそこからアップデートを試みる。
Qiita記事で同じ境遇の方が複数名いらっしゃるのでそちらを参考にしてます。

* **今のバージョンをチェック**
```
% mysql --version 
mysql  Ver 14.14 Distrib 5.7.42, for osx10.18 (x86_64) using  EditLine wrapper
```

* **Homebrewからアップデート**
```
% brew update
```

* **アップデートしたMySQLのインストール**
```
% brew install mysql
```
* **バージョン確認**
```
mysql  Ver 14.14 Distrib 5.7.42, for osx10.18 (x86_64) using  EditLine wrapper
```
変更できておらず

* **プロセスの確認**
```
# プロセスの確認
% ps ax | grep mysql
51962   ??  S      0:00.03 /bin/sh /opt/homebrew/opt/mysql@5.7/bin/mysqld_safe --datadir=/opt/homebrew/var/mysql
52049   ??  S      0:07.21 /opt/homebrew/opt/mysql@5.7/bin/mysqld --basedir=/opt/homebrew/opt/mysql@5.7 --datadir=/opt/homebrew/var/mysql --plugin-dir=/opt/homebrew/opt/mysql@5.7/lib/plugin --log-error=MacBook-Air.local.err --pid-file=MacBook-Air.local.pid
60279 s001  S+     0:00.00 grep mysql

# killコマンドで対処
kill -9 51962
kill -9 52049

# 何故か52049というプロセスはない！と弾かれる、、、2行目のものは扱いが違う？
kill: kill 52049 failed: no such process
```
`` --plugin-dir ``から以降の文が参考にしている方の中には見受けられない内容が、、、

* **念の為バージョン再確認**
```
mysql  Ver 14.14 Distrib 5.7.42, for osx10.18 (x86_64) using  EditLine wrapper
```
やはり変わってない、、、！

# アンインストールから再インストールへ
ここまでやっておきながらインストール時にバージョン指定していたことを思い出す
↓下記コードにて
```
% brew install mysql@[バージョン指定]

# []部に　5.7とバージョン指定してしまってた
```
あえて古いものを入れていた結果に、、、
このバージョンではMySQLの簡単な操作練習しかしていないので、一度アンインストールで綺麗にする方向へと変換。

* **アンインストール**
```
% brew uninstall mysql
```
* **MySQLが無くなっているか確認**
```
% mysql --version 

　　　　zsh: command not found: mysql
```
綺麗に無くなっていることを確認。
ここでMySQLが残っていると最新版をインストールしても上手く作動してくれません(体験談)。

* **再インストール**
```
# バージョンの指定をせずにインストール
brew install mysql
```
* **バージョン確認**
```
% mysql --version 

  mysql  Ver 8.0.33 for macos13.3 on arm64 (Homebrew)
```
無事``8.0.33``のインストールを確認。
こだわりのない方はバージョン指定しなくて良さそうですね。

* **動作確認**
最後にしっかり動くか動作確認
```
% brew services start mysql           
==> Successfully started `mysql` (label: homebrew.mxcl.mysql)
% - echo 'export PATH="/opt/homebrew/opt/mysql/bin/mysql:$PATH"' >> ~/.zshrc
% source ~/.zshrc
% mysql --user=root --password

mysql>
```

無事に動き、当初の目的だったEXPLAIN ANALYZEステートメントが使用できました、、、！
【Three.js】ReactThreeFiber + Nextが更新されたので使ってみる

# はじめに

Windows11
Nodejs18.15.0

１日１件記事を書こうと思っていた時代が僕にもありました。
最近さぼりがちです。

今日はSougenでUtsubo社で有名なRenaudさんのリソースである新しくなったreact-three-nextを使ってみようと思います。

https://twitter.com/onirenaud/status/1646139899291254786

**成果物**
[Vercel]
https://shoslabo.vercel.app/
[Github]
https://github.com/foasho/shoslabo

## やってくで～

```bash
yarn create r3f-app next sample -ts
yarn run dev
```
![r3f-next.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/493888/a369acb2-654d-ecd4-251f-00a3c0406446.gif)

**なかなかかわいい。**

ちょうどR3Fの遊び場が欲しいと思ったので
Vercelでホスティングして、**しぇいだー**でゴリゴリあそんでみます。


あぁ、ちなみにデフォルトtsエラーが多くあるので、各自{/** @ts-ignore **/}いれるなりしないとビルド失敗しますよ。
Vercelが素晴らしすぎる。最近思考停止でGithubPushしてます。

前まではNextのWindowsのバグがあったのですが、
13.4のアプデでなくなりましたね。よかったです。

シェーダの読み込みもできるし、
シーンの差し替えも１つのCanvasを利用して遷移と再利用しているのでパフォーマンスが素晴らしいですね。

Webサイトで活用するようなスクロールの処理もデフォルトで利用できるのはいいですね。

次はR3Fの遊びついでにシェーダでいろいろ書いてみます。

では。
セレクタについて

```javascript
$("a")
//aタグの要素をすべて選択

$("#myId")
//IDがmyIdの要素をすべて選択

$(".myClass")
//クラスがmyClassの要素をすべて選択

//セレクタで選択した要素は
//配列風のJqueryオブジェクトになっている
```
GPT-4を使ってLangChainのサンプルコードを生成する

現状ChatGPT Plusのユーザーはネットからの情報もアップデートで取得可能となっていますがフレームワークレベルとなると結構メチャクチャな情報が出力されます。

今回は2021年時にほとんど情報がなかったLangChainのサンプルコードを精度をあげてGPT-4のAPIを使って出力する方法を解説します。

## 注意

- 文字制限の関係でChatGPTは使えないのでGPT-4のAPIがなければ検証できません。
- 今であればプラグインを使ったほうが早いです。


## 公式ドキュメントの１ページを加工する

今回コピペするページは大まかなLangChainの内容を簡単なサンプルを出力付きで1ページにまとめられているのでほとんど加工なしでもかなりの精度でサンプルを出力することができます。

まずは下のリンクにアクセスをして内容をコピペしてマークダウンで保存します

https://python.langchain.com/en/latest/getting_started/getting_started.html

加工では以下のルールに沿って書いてください

- 見出しは\##
- ほとんどのコードはpythonなので\`\`\`python\`\`\`
- 出力は\`\`\`:output

書いたらマークダウンで保存をしてそのまま下のページのチャットに貼り付けてください

https://platform.openai.com/playground?mode=chat&model=gpt-4

おそらく解説などが作られると思いますが生成が終わったら下のプロンプトを貼り付けてください。

次に下のプロンプト貼り付けてください。

```
PythonでシンプルなLangChainのサンプルコードを作成してください

## 条件
- toolはgoogle-search(serpapi)を使う
- openapiのモデルはgpt-4を指定する
- ChatModelを使用する
```

すると下のようなコードが生成されます

```python
import os
from langchain.agents import load_tools
from langchain.agents import initialize_agent
from langchain.agents import AgentType
from langchain.llms import OpenAI

# Google検索のAPIキーを設定
os.environ["SERPAPI_API_KEY"] = "..."
os.environ["OPENAI_API_KEY"] = "..."

# 言語モデルを初期化
llm = OpenAI(temperature=0)

# Google検索を含むツールをロード
tools = load_tools(["serpapi"], llm=llm)

# エージェントを初期化
agent = initialize_agent(tools, llm, agent=AgentType.ZERO_SHOT_REACT_DESCRIPTION, verbose=True)

# Google検索を実行
search_query = "What are the most popular programming languages in 2022?"
response = agent.run(f"Search for '{search_query}'")

# 検索結果を表示
print(response)
```

あとは実行してください。

## 最後に

この記事を書き始めたのはプラグインを使い始める前で今ではプラグインを使った方が楽だと思います。

なのでこの記事はあくまでも参考程度にしてください。
.readyについて

WEBページのドキュメントの処理が終わった後に
処理を行いたいときは以下のコードを使う

```javascript
$("document").ready(function()){
//処理
}
```

↓省略形
```javascript
$(function()){
//処理
};
```

**ドキュメントのDOMの準備が整った後に処理を行う理由は**
ドムの準備が整っていないときにドムの操作を行おうとすると、そのドムが存在しないので、
意図した動作を行えないから


逆に、WEBページがすべて読み込み終わった後に処理を行う方法として以下のコードもある

```javascript
window.onload = function(){};
```
clispでHelloWorldプログラムを実装してみた

# 概要
今日はclispでHelloWorldプログラムを実装してみました。以下のページを参考にしました。
https://soratobi96.hatenablog.com/entry/20190504/1556981919

# 環境構築
以下のコマンドを実行しました。
```
$ sudo apt install clisp
```

# ソースコード作成
以下の通りソースコードを作成しました。
```hello.lisp
(format t "Hello, World")
```

# プログラム実行
以下の通りのコマンドでプログラムを実行しました。
```
$ clisp hello.lisp 
Hello, World
```

# まとめ
今日はclispを使って遊んでみました。何かの役に立てばと。
Compositeパターンについて調べたのでFlutterでサンプルを作ってみた

# Compositeパターンについて軽く

ディレクトリとファイルのような木構造のものを扱うときに、
それぞれ独立したクラスではなく、同じ抽象クラスを継承したサブクラスとして扱うことで、
扱い元としてはディレクトリ、ファイルなどの種類に関係なく再起的に処理できるようにするパターン。
(例えばファイル削除はそのまま削除、ディレクトリ削除は配下を全部削除してから削除、のように違いがあったとしても、そこを意識しない書き方で処理できる)

# サンプルとして何を作ったか

```
親1
├ 子1
│ └ 孫1
│ 
├ 子2
│ ├ 孫2
│ └ 孫3
│
└ 子3
```
のような階層オブジェクトを作成し、
配下のものを全て出力するようなものを
Compositeパターンを使用したオブジェクトで実装する

# クラス図

```mermaid
classDiagram
  class Component {
    <<abstract>>
    +add()
    +disp()
  }
  class Leaf {
    +add()
    +disp()
  }
  class Composite {
    +add()
    +disp()
  }
  class MyApp {
  }
  class MyHomePage {
  }
  class _MyHomePageState {
  }

  Component <|.. Leaf
  Component <|.. Composite

  MyHomePage <-- MyApp
  _MyHomePageState <-- MyHomePage
  Composite <-- _MyHomePageState
  Leaf <-- _MyHomePageState
  Composite o-- Component : 親子
```

# コード
[GitHub](https://github.com/kenta4327/flutter_composite) に完全版があります。

```dart:component.dart
abstract class Component {
  void add(Component component);
  void disp();
}
```

```dart:leaf.dart
import 'package:flutter_composite/utils/component.dart';

class Leaf implements Component {
  final _name;

  Leaf(this._name);

  @override
  void add(Component component) {
    // 何もしない
  }

  @override
  void disp() {
    print('子なしです。名前は $_name です。');
  }
}
```

```dart:composite.dart
import 'package:flutter_composite/utils/component.dart';

class Composite implements Component {
  List<Component> components = [];
  final _name;

  Composite(this._name);

  @override
  void add(Component component) {
    components.add(component);
  }

  @override
  void disp() {
    print('子ありです。名前は $_name です。');
    for (final component in components) {
      component.disp();
    }
  }
}
```

```dart:main.dart
  :
  : // 割愛
  :
class _MyHomePageState extends State<MyHomePage> {
  Component? oya1;

  @override
  void initState() {
    super.initState();

    oya1  = Composite('親1');
    Component ko1   = Composite('子1');
    Component mago1 = Leaf('孫1');
    Component ko2   = Composite('子2');
    Component mago2 = Leaf('孫2');
    Component mago3 = Leaf('孫3');
    Component ko3   = Leaf('子3');
    oya1?.add(ko1);
    oya1?.add(ko2);
    oya1?.add(ko3);
    ko1.add(mago1);
    ko2.add(mago2);
    ko2.add(mago3);
  }

  void _output() {
    oya1?.disp();
  }
  :
  : // 割愛
  :
```

以上
PowerQuery 行をN行飛ばしで取得する

今回はPowerQueryの小技です。

サイズが（横にも縦にも）大きいテーブルを扱うとき、クエリの評価も遅くなるし、評価後の結果を確認するのも大変です。かといって列を減らすことも上位N行にフィルターしたり上位N行をスキップすることも許されない、私が今置かれているそんな過酷な状況を少しでも緩和すべく、解決策を考えてみました。

```
(T as table, divisor as number) =>

let
    追加されたインデックス = Table.AddIndexColumn(T, "index", 1, 1, Int64.Type),
    追加されたカスタム = Table.AddColumn(追加されたインデックス, "Mod", each Number.Mod([index],divisor)),
    フィルターされた行 = Table.SelectRows(追加されたカスタム, each ([Mod] = 0)),
    削除された列 = Table.RemoveColumns(フィルターされた行,{"index", "Mod"})
in
    削除された列
```

この関数に`SelectRowsByN`という名前を付けるとしましょう。

これでたとえば`SelectRowsByN(テーブル,30)`とすればテーブルから行を30行ずつ飛ばしながら取得してくれます。

これで解決するといいのだが…。
[MySQL] データベース作成

# はじめに
MySQL8.0のデータベースを作成する手順を紹介します。
本記事は、MySQL8.0の下記マニュアルを参考に作成しました。
[第 3 章 チュートリアル](https://dev.mysql.com/doc/refman/8.0/ja/tutorial.html)

# データベース作成
mysqlクライアントを起動し、rootアカウントにてログインします。
```
[root@mdb01 ~]# mysql -uroot -p
Enter password:

mysql>
```
データベース作成前の状態を確認します。
下記の通り4つのデータベースが存在しています。
```
mysql> SHOW DATABASES;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
4 rows in set (0.00 sec)
```
menagerieという名称のデータベースを作成します。
```
mysql> CREATE DATABASE menagerie;
Query OK, 1 row affected (0.01 sec)
```
menagerieデータベースが追加された事を確認します。
```
mysql> SHOW DATABASES;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| menagerie          |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
5 rows in set (0.00 sec)
```
データベースを作成するとデータベースディレクトリにデータベース名のディレクトリが作成されます。
こちらのディレクトリの中は、まだ何もない状態です。
```
[root@mdb01 ~]# ls -ld /var/lib/mysql/menagerie
drwxr-x---. 2 mysql mysql 6 Apr 15 15:50 /var/lib/mysql/menagerie

[root@mdb01 ~]# ls -l /var/lib/mysql/menagerie
total 0
```
作成したデータベースを選択します。
```
mysql> USE menagerie
Database changed
```
DATABASEファンクションを使用して、選択中のデータベースを確認します。
```
mysql> SELECT DATABASE();
+------------+
| DATABASE() |
+------------+
| menagerie  |
+------------+
1 row in set (0.00 sec)
```
USEコマンドを使用する代わりに、mysqlクライアントを起動する際にデータベースを選択する事も可能です。
```
[root@mdb01 ~]# mysql -uroot -p menagerie
Enter password:
mysql>
```
データベース名を確認します。
```
mysql> SELECT DATABASE();
+------------+
| DATABASE() |
+------------+
| menagerie  |
+------------+
1 row in set (0.00 sec)
```
rinnaのjapanese-gpt-neox-3.6bをDatabricksで動かしてみる

「LLM動かしました」だけ投稿するのもあれですが、こちらと同じノリで。

https://qiita.com/taka_yayoi/items/f28037d969b15c037c9e

Hugging Faceに公開されているものであれば、ほぼ同じコードで動かせること、MLflowによって同じようにモデルを管理できることが伝われば幸いです。

https://huggingface.co/rinna/japanese-gpt-neox-3.6b

ライブラリのインストールから。

```
%pip install mlflow==2.3.1
%pip install sentencepiece
```

```py:Python
dbutils.library.restartPython()
```

```py:Python
import torch
from transformers import AutoTokenizer, AutoModelForCausalLM

tokenizer = AutoTokenizer.from_pretrained("rinna/japanese-gpt-neox-3.6b", use_fast=False)
model = AutoModelForCausalLM.from_pretrained("rinna/japanese-gpt-neox-3.6b")

if torch.cuda.is_available():
    model = model.to("cuda")

text = "西田幾多郎は、"
token_ids = tokenizer.encode(text, add_special_tokens=False, return_tensors="pt")

with torch.no_grad():
    output_ids = model.generate(
        token_ids.to(model.device),
        max_new_tokens=100,
        min_new_tokens=100,
        do_sample=True,
        temperature=0.8,
        pad_token_id=tokenizer.pad_token_id,
        bos_token_id=tokenizer.bos_token_id,
        eos_token_id=tokenizer.eos_token_id
    )

output = tokenizer.decode(output_ids.tolist()[0])
print(output)
```

[こちら](https://ja.wikipedia.org/wiki/%E8%A5%BF%E7%94%B0%E5%B9%BE%E5%A4%9A%E9%83%8E)と照らし合わせると合っている感じです。

```
西田幾多郎は、自らが「意識」の探求者であることを表明しています。そして、「意識」の探究は、対象に還元できない超越的な「自己」の探究につながっていくのだ、とも述べています。 僕は、一個の人間の「自己」には、様々な面があると思っています。 それは、「この世界」で生きる「自己」を超越したもの、というだけではありません。 人間には、無数の「自己」が存在しているのであり、「自己
```

前回同様モデルをロギングします。

```py:Python
import mlflow
import transformers

# Define the components of the model in a dictionary
transformers_model = {"model": model, "tokenizer": tokenizer}
task = "text-generation"

# Log the model components
with mlflow.start_run():
    model_info = mlflow.transformers.log_model(
        transformers_model=transformers_model,
        artifact_path="text_generation",
        task=task,
    )
```


モデルカードもバッチリ。
![Screenshot 2023-05-18 at 20.03.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/3b62e597-405e-91c5-5940-861c92aeaa2b.png)
![Screenshot 2023-05-18 at 20.04.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/be9be79d-87ff-2c00-c446-8b253a7f2df5.png)

モデルをロードして推論。

```py:Python
# Load the components as a pipeline
loaded_pipeline = mlflow.transformers.load_model(
    model_info.model_uri, return_type="pipeline"
)

loaded_pipeline(["AIによって私達の暮らしは、"])
```

「しかし、」の後が気になります。

```
Out[4]: [[{'generated_text': 'AIによって私達の暮らしは、より便利で快適なものになるでしょう。 しかし、'}]]
```

```py:Python
loaded_pipeline(["日本の首都は"])
```

```
Out[6]: [[{'generated_text': '日本の首都は東京ですが、その東京の人口が約1300万人です。 それ'}]]
```

```py:Python
loaded_pipeline(["日本の最北端は"])
```

```
Out[7]: [[{'generated_text': '日本の最北端は、北海道の宗谷岬です。 宗谷岬は、日本最'}]]
```

何も調整しなくともいい感じですね。そして、いい加減ファインチューニング勉強しよう。

### Databricksクイックスタートガイド

[Databricksクイックスタートガイド](https://www.amazon.co.jp/dp/B09V1YXFVQ/)


### Databricks無料トライアル

[Databricks無料トライアル](https://databricks.com/jp/try-databricks)
ブラウザの開発者モードで特定箇所のスクショを撮る

# はじめに
ブラウザのスクリーンショットを撮りたい時にわざわざ拡張機能などをインストールするのはちょっとだるいですよね

簡単に特定の部分だけ(もちろん画面全体も)スクショを撮る方法を知ったので記録しておきます。

# やりかた
今回はTwitterのツイートセルの1つだけスクショ撮ってみます

① 右上にあるメニュー開けそうなボタンを押します
(画像はのブラウザはBraveです。他のブラウザでも同じような場所にあると思います)
![スクリーンショット 2023-05-18 19.45.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/08530456-f098-cf7a-137b-ec1c77040829.png)

② 「その他のツール」を選択します
③ 「デベロッパーツール」を選択します
![スクリーンショット 2023-05-18 19.48.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/8b1a4c43-421a-00d3-9ec2-a2aeb2b61299.png)

④ 四角に向かって矢印があるマークを押します
![スクリーンショット 2023-05-18 19.53.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/b5cf43e8-283c-52d2-c69c-6c34327f75e2.png)

⑤ スクショを撮りたい箇所にフォーカスを当てて選択します
![スクリーンショット 2023-05-18 19.55.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/01e25600-1849-be8a-0ce6-8e5e855fdd32.png)

⑥ 選択すると該当のHTMLが青くなります
![スクリーンショット 2023-05-18 19.56.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/ab3384b9-2a1a-bc08-1d2f-db7dee05d7cd.png)

⑦ 青くなってる箇所を右クリックします
⑧ 「Capture node screenshot」を選択します
![スクリーンショット 2023-05-18 19.57.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/2008b6f0-7ead-74aa-19fd-ae12e342eef6.png)

⑨ 「保存」を選択します
![スクリーンショット 2023-05-18 19.59.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/01204fc1-7279-4eed-120f-ab5bca957e8f.png)


こんな感じで綺麗にツイート部分だけスクショをすることができました！！
![twitter.com_SNQ2001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/26535d82-617f-732d-e074-35f930f716c0.png)


# おわり
このスクショ撮るときにこの使いました笑

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">GitHubのプロフィールカッコよくなった <a href="https://t.co/iOtUdcO2sp">pic.twitter.com/iOtUdcO2sp</a></p>&mdash; たいしん (@SNQ2001) <a href="https://twitter.com/SNQ2001/status/1659142822145183745?ref_src=twsrc%5Etfw">May 18, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
【Ansible備忘録１】「handler」と「notify」

# 前書き
Ansibleを使う現場に参画して半年以上が経ちました。
当初は既に実装されているplaybookやroleを手順書に沿って実施するだけでしたが、徐々にplaybookやrole、host_varsなどを修正する機会が増えてきました。

その中で「はえ～なるほど:thinking:」となった知識を備忘録としてまとめます。
とは言っても熟練者からしたら「当たり前やろそんなん:angry:」くらいの内容になりますので、悪しからず。。



Ansible初学者の方が「なるほど:smile:」となれる記事になればと思います。




# 経緯
とある日、こんなやり取りがありました。
>現場の人：「○○のファイルを更新したら、△△のサービスを再起動させてね:relaxed:」
>私：「かしこまり:wink:」


どのファイルもGitHubで管理されているので、
①ローカルリポジトリでファイルを修正
②リモートリポジトリにプッシュ→レビュー→マージ
③playbookを実行し、更新したファイルを実機に反映
④"**手動で**"該当サービスを再起動
の流れで作業を進めようとしました。

この流れで良いかを作業依頼者へ確認したところ、
>現場の人：「○○のファイルを更新したら△△サービスが再起動されるように作られているよ:sunglasses:」

とアドバイスを貰いました。



これを知った時、
「便利～」と思いつつ、
「これがあればサービス再起動する時のあの妙なドキドキを無くせる…」
とも思いましたね。。



こんな経緯で知った「handler」と「notify」について以下に書いていきます。



# "handler"と"notify"
基本、「handler」と「notify」はセットで使われます。

"notify"は「とある作業が行われた」という**通知(notify)** を行い、
"handler"はその通知を受け、「とある別の作業を実行する」の**その作業内容**を決めているものだと言えます。

今回、私が経験した例では、
`○○ファイルを更新した時、△△サービスを再起動する`
という流れでしたが、これを分別すると
>notify→「**○○ファイルを更新した時**」
>handler→「**△△サービスを再起動する**」

になります。



ただ、notifyの「**とある作業が行われた時**」というのは非常に抽象的なので、
もっと分かりやすく、そしてAnsible的に言うならば、
>**`changed`が発生した時**

にhandlerに記載した動作を実行すると言えます。

今回の例では、「ファイルが更新された時」がトリガーとなりますが、
ファイル更新時だけでなく、`changed`が生じる作業であればトリガーとなるので、
>「△△サービスのステータスが停止状態の時」

や
>「～～ディレクトリの権限を変更した時」

などでもhandlerに記載した動作を実行するトリガーにできます。



上記の理屈でいけば、
handlerの「とある別の作業を実行する」も自由に動作内容を指定できる気がしますが、
「それなら条件式（when句）を使えば良い」
という結論になりますね。。
したがって、"handler"を使う場面としては、サービスの再起動・起動・停止という場面がほとんどかと思います。



# 冪等性
>`changed`が発生した時

と上述しましたが、言い換えれば
>`ok`の時はhandlerに記載した動作は実行されない

とも言えます。


今回の例で言うならば、
>**「○○ファイルが更新されていない場合は、△△サービスは再起動されない」**

ということになります。
何も手を加えていないのにplaybookを実行しただけでサービスが再起動されたら困りますよね:cold_sweat:


このように一回やろうが複数回やろうが、得られる結果は同じになる性質を
「**冪等性（べきとうせい）**」
と言います。

冪等性についての詳しい説明はここではしませんが、notifyの
>**`changed`が発生した時にhandlerに記載した動作を実行する**

という性質は、この冪等性を保つ為に必要な性質であると言えます。


これにより、同じplaybook内に他のタスクが複数存在していても、
**「○○ファイルを更新していない限り」**、△△サービスが再起動されることはなくなります。
したがって、playbook内に記載された他のタスクにおいて、changedが発生する作業があっても問題はありません。





# 記載例
下記は「httpd.confに更新がある場合にapacheを再起動する」というタスクの記載例です。

▼tasks/main.yml
~~~
--- 
- name: Copy httpd.conf
  copy:
    src: <コピー元となるディレクトリパス>/httpd.conf
    dest: /etc/httpd/conf　←配布ノードのパス
  notify:
    - restart_apache
~~~


▼handlers/main.yml
~~~
---
- name: restart_apache
  service: 
    name: httpd
    state: restarted
    enabled: yes
~~~


# 後書き
ansibleに触れた当初は「何故サービス再起動されたんだ…」と不安になることもしばしばありました。:sweat_smile:
一つひとつ知識を身に着けていくことで自分の作業に“自信”を持って挑めるようになったので、構造を明確に理解することは非常に大切ということを再認識できました。

この記事を読んだansible初学者の方の“自信”に少しでも繋がれば嬉しいなと思います。
Cytoscapeで双方向の枝をまとめる方法

Style > Edge > Properties > **Stacking Density** > 0に設定

## before
![network1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2787764/987823c3-c2e1-4c1c-2630-07b7fedb7208.png)


## after
![network2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2787764/f4988dc2-fbfa-f84a-48eb-999c2c022913.png)