OmniAICreator/Qiita-1.07M huggingface dataset:
オブジェクト指向の具体的な事例

未経験からエンジニアになりたい人は、プログラミングから始める人が多いと思いますが、
エンジニアの仕事は、プログラミングだけではありません。そして、プログラミングだけでは、エンジニアになれません。同時にプログラミングが苦手でも、システム構成や開発の流れを理解するとエンジニアに近づきます！
今回は具体的なオブジェクト指向の色々について更に詳しく調べてみましょう！
![インスタスライド_202303042.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23130/6903f5ab-e975-7cb8-af2e-d2a08ef23443.gif)

# オブジェクト指向とは
オブジェクト指向では、
・カプセル化
・クラスとインスタンス
・継承（インヘリタンス）
・ポリモルフィズム（多態性）
という言葉が出てきます。

この言葉の意味を理解しないとオブジェクト指向について行けません。

# カプセル化
内部的なデータと手続きを隠ぺいして、必要なデータと手続きだけをインターフェースとして公開。

※カプセル化によりオブジェクトの独立性が高まる。

利用する側としては、必要なインターフェースのみを意識すればよい

構築する側としては、インターフェースを変更しない範囲で修正が自由に行える。

# クラスとインスタンス
オブジェクト指向では、

クラスとして定義を行う。

インスタンスとは、クラスから生成した実体である

# 継承（インヘリタンス）
クラスにおいて定義されたデータと手続きを別のクラスで引き継ぐこと。

※この継承の活用により再利用性や生産性の向上が可能になる。

例えば、Webのシステムでは、ブラウザ判定を行うクラスを常に継承する事により、

非対応ブラウザむけの処理ロジック等をその都度作成する手間が無くなる。

# ポリモルフィズム（多態性）

同じインターフェースに従ってオブジェクトを呼び出していても、オブジェクトの内容に違いで、振る舞いが変る事

※継承では、非対応ブラウザ向けの処理ロジック等を統一できた。
更に特定ページのみ”非対応”でも表示させたい等の場合は、メソッドをオーバライドし、特殊な動きをさせる事ができる。

※メソッド -- オブジェクトに対する操作にあたる。
※オーバライド -- スーパークラスで定義されたメソッドをサブクラスで再定義すること

# まとめ
オブジェクト指向では、
・カプセル化
・クラスとインスタンス
・継承（インヘリタンス）
・ポリモルフィズム（多態性）

を理解する必要がある

# 最後に
未経験の皆さん、若手エンジニアの皆さん、勉強方法について悩みがあればなんでも気軽に質問して下さい！
これからも記事を書いていきますので、モチベーションアップのためフォロー、イイねお願いします。
Express redis Docker

## はじめに
備忘録です。
expressでapiを構築しています。
settion管理にredisを使います。

## 前提
`package.json`で`type: "module"`を指定しています。
typescriptは導入していません
dockerを読める前提です


```yml
version: "3.8"
services:
  api:
    build:
      context: ./api
      dockerfile: ./Dockerfile
    env_file: ./api/.env
    tty: true
    depends_on:
      - redis
    volumes:
      - ./api:/usr/src/app
    ports:
      - "3000:3000"
    environment:
      - TZ=Asia/Tokyo
  redis:
    image: "redis:latest"
    restart: always
    ports:
      - "6379:6379"
    volumes:
      - "./data/redis:/data"
```

```js
import express from "express";
import session from "express-session";

import Redis from "ioredis";
import RedisStore from "connect-redis";

// クライアント作成
const redis = new Redis({
  port: 6379,
  // service名を指定
  // コンテナ間通信じゃない場合 127.0.0.1(local)
  // redisだけコンテナでapiがローカルの場合も 127.0.0.1でOKです
  host: "redis",
});

const app = express();

// proxyを信頼
app.set("trust proxy", 1);

app.use(
  session({
    name: "session",
    secret: "secret_key",
    // セッションストレージ作成
    store: new RedisStore({ client: redis }),
    resave: false,
    saveUninitialized: false,
    cookie: {
      sameSite: "none",
      secure: true,
      httpOnly: false,
      maxAge: 1000 * 60 * 30,
    },
  })
);

app.get("/", (req, res) => {
  if (!req.session.views) {
    req.session.views = 0;
  }

  req.session.views++;
  res.json({ message: `${req.session.views}回目の来訪です` });
});

app.get("/logout", (req, res) => {
  req.session.destroy((err) => {
    res.json({ message: "logout" });
  });
});

app.listen(3000, console.log("サーバーを開始します"));
```

## おわりに
*typescriptを使う場合 sessionの型定義が必須*
```js
declare module 'express-session' {
  interface SessionData {
    firstAccessTime: string;
    counter: number;
    message: string;
  }
}
```

redisを使うためのredisクライアントは `redis` `ioredis`の2つがあります。
基本的に`redis`で書かれた記事が多い気がしますが、最近`version`が上がり、大きく仕様が変わったようで、
情報が少ない + 互換性がないという情報をチラッと見ました。
`ioredis`を使うのをお勧めします。
pandasでgroupレベルの情報にkey以外にcomment的な情報を付加する


Pandasのgroupbyには、グループごとにコメントやラベルなどの情報を付加する機能はありませんが、groupbyオブジェクト自体に任意の属性を追加することは可能です。

例えば、以下のようにgroupbyオブジェクトにcomment属性を追加し、グループごとにコメントを保存することができます。(とChatGPTが申しておりました)


## サンプルコード
```py
import pandas as pd

df = pd.DataFrame({'A': ['foo', 'bar', 'foo', 'bar', 'foo', 'bar', 'foo', 'foo'],
                   'B': ['one', 'one', 'two', 'three', 'two', 'two', 'one', 'three'],
                   'C': [1, 2, 3, 4, 5, 6, 7, 8],
                   'D': [10, 20, 30, 40, 50, 60, 70, 80]})

grouped = df.groupby('A')

# groupbyオブジェクトにcomment属性を追加
grouped.comment = {'foo': 'This is the group of "foo".', 'bar': 'This is the group of "bar".'}

# グループごとにコメントを表示
for key, group in grouped:
    print(f"Group name: {key}")
    print(f"Comment: {grouped.comment[key]}")
    print(group)

```

## 結果
```py
Group name: bar
Comment: This is the group of "bar".
     A      B  C   D
1  bar    one  2  20
3  bar  three  4  40
5  bar    two  6  60
Group name: foo
Comment: This is the group of "foo".
     A      B  C   D
0  foo    one  1  10
2  foo    two  3  30
4  foo    two  5  50
6  foo    one  7  70
7  foo  three  8  80
```

ここでは、grouped.comment属性に、各グループに対するコメントを格納しています。そして、forループで各グループのコメントを表示しています。この方法を使えば、groupbyオブジェクトに任意の属性を追加し、グループごとに情報を保存することができます。


以上　chatGPTに質問した結果を検証後転記したものです。
恐ろしい `ChatGPT`
2023/3/20主にITとかセキュリティの記事

警察庁「令和4年の犯罪情勢」から気になるサイバー事案をチェック
ランサムウェア被害は3年前から右肩上がり。テレワークの味方VPNが意外な弱点に(3/18)
https://ascii.jp/elem/000/004/129/4129189/

Emotet再始動で被害発生、エム・エス・ビルサポートで不審メール(3/17)
https://cybersecurity-jp.com/news/80671

東京開業ワンストップセンターにおける情報流出の疑いの調査結果について(3/17)
https://www.metro.tokyo.lg.jp/tosei/hodohappyo/press/2023/03/17/05.html

アングル：有事に危うい台湾の通信インフラ、整備に高いハードル(3/17)
https://news.yahoo.co.jp/articles/4b3f7cd1d27c6d6f1ad0ee4c99228ea15bac25ef

松本総務大臣とヴィッシング ドイツ連邦デジタル・交通大臣の会談結果(3/18)
https://www.soumu.go.jp/menu_news/s-news/01tsushin08_02000150.html

[翻訳] GPT-4 Technical Report(3/18)
https://qiita.com/taka_yayoi/items/521b6d07611869765415

北朝鮮、２２００億円窃取 仮想通貨、サイバー攻撃で(3/18)
https://www.the-miyanichi.co.jp/news/World/2023031801000677.php

北朝鮮、2200億円窃取　仮想通貨、サイバー攻撃で(3/18)
https://news.goo.ne.jp/article/kyodo_nor/world/kyodo_nor-2023031801000677.html

「TikTok親会社を米司法省が捜査」と米報道　ジャーナリストの個人データ収集で (3/18)
https://news.yahoo.co.jp/articles/2cf463f357b7d10decef7451cc39e28bcb88e424

ＴｉｋＴｏｋのバイトダンス、記者の取材源特定しようと端末情報に不正アクセスか(3/18)
https://www.yomiuri.co.jp/world/20230318-OYT1T50152/

今さら聞けない「DeFi」とは？ 知っておきたいメリットやサービスとこれからの見通し(3/17)
https://zuuonline.com/archives/247328

オンラインチェスゲームに脆弱性、チートでズルが可能(3/18)
https://news.mynavi.jp/techplus/article/20230318-2629148/

人気メディアプレーヤー「VLC」に紛れ込むマルウェア「SILKLOADER」発見(3/18)
https://news.mynavi.jp/techplus/article/20230318-2629163/

Samsung製モバイルチップセットに複数の重大な脆弱性、Googleが報告(3/18)
https://news.mynavi.jp/techplus/article/20230318-2629161/

GPT-4で新しいプログラミング言語「TenetLang」を生み出す、チャットAIは既にプログラミングの何たるかをかなり理解している模様(3/17)
https://gigazine.net/news/20230317-gpt-4-programming-language-tenetlang/

誰が書いて誰が読む(3/18)
https://pc.watch.impress.co.jp/docs/column/config/1486698.html

【Vlog】総務省の情報セキュリティはどうなっているのか(3/17)
https://agora-web.jp/archives/230317123253.html

中国オフショアに転機、人件費高騰と地政学リスクで規模縮小の動きも(3/17)
https://xtech.nikkei.com/atcl/nxt/column/18/00989/031500112/
Container Style Queriesを触ってみた

最近は主要ブラウザ全てに[Container Querie](https://developer.mozilla.org/en-US/docs/Web/CSS/@container)が使えるようになったと話題になりました。
そしてGoogle Chromeのversion 111でContainer Style Queriesが実験的に使用可能になったので、今回それを触ってみたいと思います。

## Style Queriesとは？

> Adds a style() function to @container rules to make it possible to apply styles based on the computed values of custom properties of an ancestor element.
コンテナルールにstyle()関数を追加し、祖先要素のカスタムプロパティの計算値に基づいてスタイルを適用できるようにしました。(deepl翻訳)

[Feature: Style Container Queries for CSS Custom Properties](https://chromestatus.com/feature/5076875399921664)

## 対応ブラウザは？

現在のところはgoogle chromeとEdgeの最新版(version111）で、一部の機能のみサポートしている様です。

![スクリーンショット 2023-03-19 17.10.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3443/fa372529-1725-5e10-819b-c88914f3ae71.png)

[CSS Container Style Queries](https://caniuse.com/css-container-queries-style)

## 実際に書いてみる
:::note warn
確認するにはgoogle chromeのversionが111以上になってないと確認できません
:::

```index.html
<!--　containerクラスにstyle="--theme:blue"を付与 -->
<div class="container" style="--theme:blue">
      <div class="card">
        <img src="https://picsum.photos/id/64/300/300" alt="" />
        <p class="name">Joni Mitchell</p>
        <p class="comment">Hi! My name is Joni. Nice to meet you!</p>
      </div>
    </div>
```

```style.css
card {
  border: solid 1px black;
  padding: 10px;
}

.name {
  font-size: 18px;
  font-weight: bold;
  color: black;
}
/* theme:blueの子要素.card、.card img、.nameのスタイルを指定 */
@container style(--theme: blue) {
  .card {
    border-color: blue;
  }

  .card img {
    border-radius: 50%;
  }

  .name {
    color: blue;
  }
}
```

https://codesandbox.io/embed/container-demo-icf18n?fontsize=14&hidenavigation=1&theme=dark

ボーダーと名前の色が青色に上書きされてるのが分かります。
そして、Container Queriesと組み合わせて書くこともできます。

```style.css
/* 親要素にcontainer-typeを追加 */
.container {
  container-type: inline-size;
}

.card {
  border: solid 1px black;
  padding: 10px;
}

.name {
  font-size: 18px;
  font-weight: bold;
  color: black;
}
/* theme:blueのコンテナサイズが600px以上の場合、以下のスタイルになる */
@container (min-width:600px) and (style(--theme: blue)) {
  .card {
    border-color: blue;
  }

  .card img {
    border-radius: 50%;
  }

  .name {
    color: blue;
  }
}
```

https://codesandbox.io/embed/container-demo2-bf8ll4?fontsize=14&hidenavigation=1&theme=dark

さらに　`container-name`　を追加してより限定的にすることもできます。

```style.css
.container {
  container-type: inline-size;
 /* container-nameを追加 */
  container-name: item;
}

.card {
  border: solid 1px black;
  padding: 10px;
}

.name {
  font-size: 18px;
  font-weight: bold;
  color: black;
}
/* itemというtheme:blueのコンテナサイズが600px以上の場合、以下のスタイルになる */
@container item (min-width:600px) and (style(--theme: blue)) {
  .card {
    border-color: blue;
  }

  .card img {
    border-radius: 50%;
  }

  .name {
    color: blue;
  }
}
```

まだまだ対応ブラウザも少ないし一部の機能しかサポートされてはいませんが、正式に全てのブラウザが対応することになるとCSSだけで出来る表現がより増えると思います。



### 参考記事

[CSSの進化が早い！ スタイルクエリ（@container style()）の基礎知識と便利な使い方を解説](https://coliss.com/articles/build-websites/operation/css/css-style-queries-begin.html)
[Container Queriesの沼へようこそ](https://kojika17.com/2023/03/css-container-queries-swamp.html)
windownsにおけるSQL Workbench/jの導入方法

# OS
windows 64bit

# インストールのＵＲＬ

java JRE
https://www.azul.com/downloads/zulu/
SQL Workbench/j
http://www.sql-workbench.eu/downloads.html
MySQL
https://dev.mysql.com/downloads/windows/installer/8.0.html
JDBC drivers
https://dev.mysql.com/downloads/connector/j/
※Select Operating System:(Platform Indenpendt)

# インストールのポイント

## java JRE
java 11 （windons 64bit, zip）をダウンロードして解凍

## SQL Workbench/j
1．Generic package for all systems including all optional libraries (sha1)　をダウンロードして解凍

2．ファイル内のSQLWorkbench64.exeを開き、1のフォルダ先を指定することでツールが立ち上がる

## MySQL
1．Windows (x86, 32-bit), MSI Installerをダウンロードする（32bitと書いてあるが問題なし）

2．基本的に、次に進む。自分で記入する部分はMySQL Root Password（自分で設定）とconnect to SeverのUser name（defultはroot）, Password(先ほど自分が設定したもの)。また、portはdefultで3306であった（後に入力する）

## JDBC drivers
1．Platform Independent (Architecture Independent), ZIP Archiveをダウンロードして解凍。フォルダ内のmysql-connector-j-8.0.32.jarがドライバとなる。

2．SQL Workbench/jを開き、managing driversのLibrayでフォルダからmysql-connector-j-8.0.32.jarを指定する。

3．SQL Workbench/jのmanaging driversのSample URLをjdbc:mysql://localhost:3306/と変更する。

4．Select Connection ProfileのURLをjdbc:mysql://localhost:3306/として、Usernameをroot, password(mysqlで自分で設定したもの)を入力する。

# 完了

# 次すること

・excellをmysqlにimportする
・SQL Workbench/jを開いて、select文でデータを表示させる
AWS　EC2インスタンスの初期実行コマンド (ユーザデータ) のログを確認する方法

## EC2インスタンスの初期実行コマンド (ユーザデータ) のログを確認する方法

以下にログが保存されている。sshでアクセスして確認する。

```
/var/log/cloud-init.log
/var/log/cloud-init-output.log 
```

## 参考

https://aws.amazon.com/jp/premiumsupport/knowledge-center/ec2-linux-log-user-data/
Vue CLIによって作られたファイルを見ていく（src編）

[環境構築](https://qiita.com/OTA_nagisa/private/e52c22e17e9827533894)でVue CLIによって作られたファイルを見ていく（src周り）
[やりたいことリスト](https://qiita.com/OTA_nagisa/private/9588ef8ef9f69f18bbd5)

# src周りを見ていく
現状どんな構成になっているのかを知る

## index.html
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/5bc5f537-1af8-3495-0425-d2a6b37a2a15.png)
langはjpに変えてます。
headは飛ばして、bodyには、id'app'のdiv要素とmain.tsが入っている

## main.ts
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/f42aede4-df27-aeab-dc6a-1b7599f5df7c.png)
・createAppでVueインスタンスを作成
・registerPluginsでプラグインの設定（vuetify, router, pinia）
・Vueインスタンスをid'app'にマウント
といった流れのよう

createAppはvue3からのもので、これまではnew Vueで行っていたもの
Appは同階層にあるApp.vue
registerPluginsは.src/plugins/index.ts
からそれぞれインポートしている

mountもvue3で$mountから$がつかなくなったみたい

## App.vue
router-vueタグのみ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/32997a38-322b-6002-2f01-80fb67822353.png)

## index.ts
registerPlugins関数を作成して、引数で渡されたVueappに対して、フォントやプラグインを適用する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/770e026f-7446-4996-d2e8-9ba8c169bcb1.png)
### loadFonts
loadFontsは、webfontloaderを使用して、GoogleフォントのRobotoを読み込んでいる(src\plugins\webfontloader.ts)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/2c6c983c-cdbf-c5e3-05a7-e2d3874cd540.png)
### vuetify
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/4bcdd098-795f-0856-5e29-f526ffa2cb9e.png)
### router
Home.vueがインポートされている
ここから作成したページに遷移できるようにしているっぽい
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/9c6ea248-afae-74e4-4cf0-dcf4005959b1.png)
### pinia
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/a5860d04-c1c8-7d6b-c07b-03dd2fe6b56b.png)
## Home.vue
コンポーネントのHelloWorldをインポートして出力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/84727964-5ecb-ff4e-56ea-3cb13a0518d0.png)
## HolloWorld
念願のHelloWorld
コンポーネント化しているため、インポートして<HelloWorld>で表示できる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/8dc6d06b-9798-c0a1-296d-07074e30591c.png)

# 終わり
ちょっと座学に飽きたのでいったん終わり
さっさと開発したい

気が向いたら深掘ります！
ウルヴァリンのように自己修復するPythonスクリプト

# 概要
[Wolverine](https://github.com/biobootloader/wolverine)は、Pythonスクリプトのクラッシュ箇所を自動的にデバッグしてくれるスクリプトとのこと(※)。マーベルのウルヴァリンのように自己回復能力を持つというコンセプトが面白いと思いコピペで試しました。

まだgpt-4を利用できないため、代わりにgpt-3.5-turboを使用したところ期待した通りにデバッグできませんでしたが、スクリプトを繰り返しGPTに自動で改善させる発想が興味深く、勉強になりました。

※元ツイート
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">The code for Wolverine is now available on Github!<br><br>It&#39;s still a rough prototype but I have a lot of ideas for improvement. Have fun!<a href="https://t.co/Co59YoFDy5">https://t.co/Co59YoFDy5</a> <a href="https://t.co/IRdUlPIWpN">https://t.co/IRdUlPIWpN</a></p>&mdash; BioBootloader (@bio_bootloader) <a href="https://twitter.com/bio_bootloader/status/1637219264368377857?ref_src=twsrc%5Etfw">March 18, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



# Setup
- READMEの内容を微修正
    - 前提:GitHub CLI, Git, Python3がインストール済み
```
gh repo fork https://github.com/biobootloader/wolverine.git
cd wolverine
python -m venv venv
venv\Scripts\activate
pip install -r requirements.txt
```
- GitHub CLI未導入の場合
    - GitHub Web画面からGUI操作でFork
    - 自分のリポジトリからgit clone
    - upstreamを追加
    - 参考:[【Git初心者向け】fork(フォーク)からプルリクエストを送るまでの手順を簡単に解説](https://techtechmedia.com/how-to-fork-github/)


```
git clone https://github.com/{YOUR_REPOSITORY_NAME}/wolverine.git
git remote add upstream https://github.com/biobootloader/wolverine.git
git remote -v
origin  https://github.com/{YOUR_REPOSITORY_NAME}/wolverine.git (fetch)
origin  https://github.com/{YOUR_REPOSITORY_NAME}/wolverine.git (push)
upstream        https://github.com/biobootloader/wolverine.git (fetch)
upstream        https://github.com/biobootloader/wolverine.git (push)
```


- [wolverine.py](https://github.com/biobootloader/wolverine/blob/main/wolverine.py)について
    1. OPENAI_API_KEYをos.environで読むよう変更
      環境変数にOpenAIのAPIキーが未設定の場合追加。`set OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxx`
    2. モデルをgpt-3.5-turboに変更しているが、gpt-4が使える場合変更不要
```
 # Set up the OpenAI API
-with open("openai_key.txt") as f:
-    openai.api_key = f.read().strip()
+openai.api_key = os.environ["OPENAI_API_KEY"]

     response = openai.ChatCompletion.create(
-        # model="gpt-3.5-turbo",
-        model="gpt-4",
+        model="gpt-3.5-turbo",
+        # model="gpt-4",
```                      

# 実行例
- READMEのExample Usageの内容と同じ。
- 実行するとbuggy_script.pyが更新される。想定ではデバッグされるはずだがgpt-3.5-turboでは奇怪なコードが生成され正常動作しない。
- モデルをgpt-4に変更するか、gpt-3.5-turbo向けに最適化し対策が必要とみえる。
```
python wolverine.py buggy_script.py "subtract" 20 3
```
[Flutter] GestureDetectorとListener

# はじめに
Flutterにはユーザーのジェスチャーやタッチイベントを処理するウィジェットとしてListenerとGestureDetectorがあります。この二つの共通点相違点について簡単にまとめたいと思います！
記事内に誤った記述等ありましたらご指摘のほどよろしくお願いいたします。

# Listener
Listenerウィジェットは、より低レベルなポインターイベント（タッチ操作）を処理するwidgetです。
- onPointerDown（指が画面に触れたとき）
- onPointerMove（指が画面上を移動したとき）
- onPointerUp（指が画面から離れたとき）
などのイベントが含まれます。
これらのイベントは、タッチ操作の基本的な構成要素となっています。

```dart: Listener
Listener(
  onPointerDown: (PointerDownEvent event) {
    // 指が画面に触れたときの処理
  },
  onPointerMove: (PointerMoveEvent event) {
    // 指が画面上を移動したときの処理
  },
  onPointerUp: (PointerUpEvent event) {
    // 指が画面から離れたときの処理
  },
  child: Hoge(),
)
```

# GestureDetector
GestureDetectorウィジェットは、より高レベルなジェスチャーイベントを処理するwidgetです。
これには、
- onTap（タップ）
- onDoubleTap（ダブルタップ）
- onLongPress（長押し）
- onPan（ドラッグ）
- onScale（ピンチ）
-などのイベントが含まれます。
GestureDetectorは、これらの高度なジェスチャーを自動的に検出し、適切なコールバック関数を呼び出してくれます。

```dart:GestureDetector
GestureDetector(
  onTap: () {
    // タップ操作の処理
  },
  onDoubleTap: () {
    // ダブルタップ操作の処理
  },
  onLongPress: () {
    // 長押し操作の処理
  },
  child: Fuge(),
)

```


# まとめ
- Listenerは、ポインターイベント（低レベル）を処理します。
- GestureDetectorは、ジェスチャーイベント（高レベル）を処理をすることができます。
- GestureDetectorは、Listenerの上位レイヤーで動作し、より抽象的なジェスチャーを検出することができます。

単純なタップや長押し操作を処理するだけの場合は、GestureDetectorが適切な場合が多いです。
一方、よりカスタマイズされたジェスチャーや複雑なイベント処理が必要な場合は、Listenerウィジェットを使用して、ポインターイベントを直接処理することができます。これにより、独自のジェスチャー認識ロジックを実装したり、複数のポインターイベントを組み合わせて新しいジェスチャーを作成したりすることができます。


# さいごに
記事をお読みいただきありがとうございました！
質問やご指摘はコメント等でお願いいたします！！
※当記事の作成には一部GPT-4を利用しています。
LINEでChatGPTとやりとりしてみよう！手順とヒント

最近LINEでChatGPTを使用するサービスがいくつか公開されていますね。
せっかくなのでOpenAIのAPIを使用してLINE Botを作成する手順を紹介します。

1. LINE公式アカウントの作成

まず、[LINE公式アカウントマネージャーのウェブサイト](https://manager.line.biz/)にサインアップして、LINE公式アカウントを作成してください。もしまだLINEアカウントを持っていなければ、新規に作成する必要があります。

2. LINE Messaging APIのチャネル作成

公式アカウントを作成した後は、[LINE Developers Console](https://developers.line.biz/console/)に移動し、新しいプロバイダーを作成します。そして、あなたのボットのための新しいMessaging APIチャネルを作成してください。チャネルシークレットとチャネルアクセストークンをメモしておいてください。後で必要になります。

3. Webhookサーバーの設定

LINE Messaging APIはWebhookを使ってボットと通信します。LINEからのHTTP POSTリクエストを受信できるサーバーを設定する必要があります。Heroku、AWS Lambda、またはWebhookをサポートする他のホスティングサービスのようなプラットフォームを使用することができます。Node.jsとExpress、PythonとFlask、またはRubyとSinatraのようなプログラミング言語やフレームワークを使用できます。

4. OpenAI APIキーの取得

[OpenAIのウェブサイト](https://beta.openai.com/signup)にアクセスして、APIキーを取得してください。OpenAIのGPT-3やその他のモデルにアクセスするために使用できる一意のAPIキーが送信されます。

5. OpenAIのAPIをWebhookサーバーに統合する

[OpenAIが提供しているAPIライブラリ](https://github.com/openai/openai)で選択したプログラミング言語のライブラリをインストールしてください。ステップ4で受け取ったAPIキーを使用して、OpenAI APIへのリクエストを認証してください。LINEからの受信メッセージを処理し、テキストをOpenAI APIに送信するロジックを実装してください。その後、OpenAIからのレスポンスからテキストを抽出してください。

6. LINEメッセージに応答する

プログラミング言語に対応したLINE Messaging API SDKを使用して、OpenAIから生成されたテキストを含む応答文を作成し、元のメッセージを送信したユーザーに送信してください。

7. LINE Developers ConsoleでWebhook URLを設定

Messaging APIのチャンネル設定に、サーバーを指すWebhook URLを入力します。Webhookを使用する」オプションが有効になっていることを確認します。

8. テストする

LINE BotのQRコードまたはLINE IDを使用して友だち追加し、LINE Botと会話を開始します。メッセージを送信し、正しく応答するかどうかを確認します。

個人で開発する場合LINE公式アカウントの作成が一番のハードルだとは思いますが、決して開発自体のハードルは高くないものなのでぜひ試してみてください。
SquidでBASIC認証を使用してユーザ認証を行うには

SquidでBASIC認証を使用してユーザ認証を行うには以下のような設定が必要。

・設定項目auth_paramで認証方式(basic)、認証プログラムおよびパスワードファイルを指定する
・設定項目aclでaclタイプproxy_authを使用して認証対象を定義する
・設定項目http_accessで認証対象の認証を行う事を設定する

●それぞれの設定項目の書式

auth_param 認証方式 program 認証プログラム パスワードファイル
acl acl名 proxy_auth ユーザ名
http_access deny|allow [!]acl名 ...
#1【TypeScript】モジュール './dataset' の宣言ファイルが見つかりませんでした。を解決


## 事象



モジュール './dataset' の宣言ファイルが見つかりませんでした。'/Users/okamuraao/Desktop/redelivery-app/src/dataset.js' は暗黙的に 'any' 型になります。

![スクリーンショット 2023-03-17 18.17.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884551/1c705350-cadd-f7c2-c4dd-c3837e52da83.png)


## 原因だと思わる箇所
インポートしてるモジュールにtypescriptが型をつけれないがためのエラー

## 対応したこと
dataset.jsの拡張子をtsにすることで解決
参照記事
https://qiita.com/y-hira18/items/f67cfc45a70c7c25708a
Pythonコース3周目の世界線1

3周目1日目：ハイスピードで飛ばして行くZE🌟


◎メモと復習◎

for 変数名 in リスト:
リストの要素の数だけ処理を繰り返す。これけっこう使う。
変数名はリストの単数形にするのがベター。
一番最後のコロン忘れがち。

if文苦手項目かもしれない

インデントの間違いも多くなってきた

def 関数名():
関数は、作れる！！！

仮引数もけっこうややこしく感じる

validateのところめっちゃ間違えてる

設計図は「クラス」書き方は『class クラス名:』←クラス名は大文字から
モノは「インスタンス」書き方は『クラス名()』『変数名 = クラス名()』で代入

クラスの中に定義した関数のことを「メソッド」←説明でけっこう見る

『def』initionの意味は定義。英語覚えよう。

super()は同じコードを何回も書かなくて済む、らしい…


----------------------------------------------------------

Pythonコース3周が終了した。えっ、一日で！？

1周目の頃と比べると大分スムーズに進めることが出来たと思う。
何回もやっているうちに苦手な箇所が分かってきたので、メモを取った部分を苦手意識がなくなるまで重点的に勉強していく。

次は"Python問題100本ノック"をやって行こうと思う。
コードを模写したりとか、分かるようにはなったりしたけど、まだまだ自分で書くということは全然なので、この課題をできるように集中してやっていく。
ChatGPTがコンテンツ制作を変える

ライティングにChatGPTを使用する4つの賢い方法：

- アイデア出し
- リサーチ
- 編集＋校正
- 要約

ChatGPTは、Qiitaの記事のようなインターネット上のコンテンツ制作を根本的に変えるでしょう。しかし、その反面、多くのクリエイターを壊すことにもなります。ここでは、ライティングとしてChatGPTを使う4つの方法を紹介します。

**アイデア出し**
ChatGPTはアイデア出しに素晴らしいツールです。好奇心や創造性を刺激するアイデアを生み出して、それを自分自身のものにしてください。

**リサーチ**
ChatGPTは無料のリサーチアシスタントです。任意のトピックについて背景や前提情報をChatGPTに提供して、ChatGPTからの情報を受け取り、自身の意見を引き出すために活用してください。

**編集＋校正**
ChatGPTは内蔵のエディターです。校正や文法上のミスの識別、そしてライティングを強化する方法を提案するために使用してください。

**要約**
ChatGPTは、翻訳ツールです。ChatGPTに分かりづらい文章を言語を指定して要約してもらうことで複雑な文章の理解を助けてくれます。


AIの汎用的なコンテンツを自分自身のものとしてコピー/ペーストするのではなく、使い方を工夫することやChatGPTを自身のアシスタンスとして活用することで自分自身の独自のコンテンツを発信し続けることが今後は必要になると思います。

AIに任せきりにするのではなく、AIを優秀なアシスタントとして活用できるように私も頑張ります。
ChatGPTを実務使う上で注意すべきこと

実務でもちょくちょくChatGPTに頼ることがあるのですが、
つい最近ギョッとする使い方を小耳に挟んだので、
自分なりにこういったこと注意しないといけないなぁと思ったことをつらつらと書きたいと思います。

エンジニア未経験の方や、まだ経験が浅い方に対して意識改善の助けにしてもらえたらと思います。

## 注意すべきこと
### 機密情報の漏洩
最悪取り返しがつかない事故になりかねないため、これは最重要だと思います。

具体的に注意することとしては、
- **個人情報、パスワードなどは載せない**
- **ソースコードを貼り付ける際には抽象化する、マスキングする**
などが考えられると思います。

同様のケースとして、**翻訳アプリ**にも気をつけましょう。
そのまま実務で使用しているソースコードを貼り付けてしまうと、外部に漏洩しているのと同義です。

### 情報が古い
意外と見落とされがちですが、**ChatGPTが持つ情報は2021年までのもの**です。

例えばですが、モダンな技術を使っている場合特に注意かと思います。
つい最近アップデートされた内容やそれに関連するエラーなどを聞いても正確な答えは返ってこない可能性があります。

当時推奨されていたコードの書き方も、現在では非推奨となっていることもしばしばありますので注意しましょう。

### 回答を鵜呑みにしない
ネットで検索する場合にも当てはまるので当たり前と言っちゃ当たり前ですが、
「ChatGPTすごい！」「AIなんでもできる！」
みたいな風潮があるので今一度心に留めておいた方がいいと思います。

ChatGPTは普通に**間違えた回答をしてきますし、指摘するとごめんなさいと謝ってきます。**
誤った情報をあたかも正しそうに回答しているケースがあったので、
情報の正確性を見抜けないうちは返ってきた答えが本当に正しいかまで調べるクセをつけた方がいいと思います。

（ちなみに冒頭で言ったギョッとしたのはこれに関してです。

レビューの際に「どうしてこの実装になったの？」と聞いた際に
「ChatGPTでそう返ってきたから」という仰天内容を聞きました。）

### 回答の質は入力される情報に依存する
ChatGPTは機械学習に基づくモデルですので、その性能は入力されるデータに依存します。
そのため、入力データの質や量によってChatGPTの応答が異なる場合があることに注意しましょう。

## まとめ
ChatGPTに限らず、
上記のことは本質的にはどれも社会で生きてく上でわかっておくべきことなのかなと思います。

ただこういう革新的なものが生まれた時はそれに魅了されてつい忘れてしまうこともあるかもしれません。

自分もリリース直後ChatGPTにコードを書いてもらった時は、
まるで偉大なエンジニアから回答を渡された気分になったことがあります。

ですので、自戒の意も込めてここで投稿させていただきます。

それでは最後まで読んでいただきありがとうございました。
tableの中身をきれいにCSV印刷で出力するようにした話

今回なのですが
皆さんは生きているうちに何度か
「あ～このTableタグの中身、
CSVとかエクセルとかで出力したいなぁ」
と思ったことがあると思います

今回、やりたいことは以下の通りです
1.データベースの中から条件を指定して絞り込み検索ができるようにする
2．その検索結果のみを印刷できるようにする
3.その検索結果のみをCSV（エクセル含め）出力できるようにする

というものです

1.まず今回のしたいことにおいて、指定した条件にそぐわないものを
Disabled　つまり表示としては消すという処理にすると
印刷は問題ないのですが、CSVで出力した際に
「画面には見えていない」けれど「内部的にはある」
状態なので結果としてすべてのデータが取れてきてしまいます
これは困る。

なので、条件を指定してpostリクエストを送ることで
条件を絞って値を受け取り、画面にそもそもいらないデータはないという状態にします

2．次に印刷に関してですが
印刷は

```javascript:jquery
function print_window()
```
というjavascriptの機能で一括で画面が印刷できます
ここでの考え方としては
印刷する部分を指定する
のではなくて
印刷しない部分を指定する

です

言い換えると
printwindow()だと画面全体を印刷してしまうので、
そこから以下のようにプログラムで隠す部分を指定する


```javascript:jquery
 let hoge = document.getElementById('test');
hoge.style.display = "none";
```

このように消したいエリアを指定したうえで
divタグなどに　class=hoge
と指定してあげればそのエリアは印刷対象にならない
というわけですね

（めんどくさ・・・）

3.ＣＳＶ出力

これに関してはまず
取得したいtableタグに名前をまず付けて指定できるようにします
その後

```javascript:js
function print_csv(){
     var hogehoge = new Uint8Array([＊＊任意の文字コード＊＊]);//文字コードを指定
     var table = document.getElementById('test');//要素を取得
	 var data_csv="";//文字データとして値を配列に入れていく
```

といった下準備をします
文字コードを指定しないと化けたりするので指定してあげてください

そのあとは今回の場合だと、カンマで区切り、改行に改行コードを追加する処理を記述
あとはdata_csvを任意の形でDLするので

```javascript:js
{ "type" : "text/csv" });
```
また、上記部分の記述を変えるとXlsx形式等、他の形式でもDLできるようにもできます

といった具合で
テーブルタグを印刷、出力できる流れが完成しました

このようにすると、若干見栄えがいい気もします
別に要らなくても「印刷できるし、出力できますよ！！」
まぁ、使うかどうかはさておきですけどね

というわけで、覚書程度でした

ほなまた
[AWS Q&A 365][Lambda]AWSのよくある問題の毎日5選 #9

# 1. AWS Lambdaとは何ですか？どのような場合に使用すべきですか？
回答：AWS LambdaはAmazon Web Servicesが提供するサーバーレスコンピューティングサービスです。サーバーのプロビジョニングや管理を行わずにコードを実行できます。S3バケットのデータの変更、DynamoDBテーブルの更新、受信したHTTPリクエストなどのイベントに対してコードを実行したい場合に使用する必要があります。

# 2. AWS Lambdaの利用を開始するにはどうすればよいですか？
回答：Lambdaを初めて利用する場合は、Lambdaの製品概要を読んだ後、AWS Lambda Developer Guideで提供されている「Getting started」の演習を完了することをお勧めします。

# 3. AWS Lambdaの機能は何ですか？
回答：AWS Lambdaの機能には、自動スケーリング、高可用性、複数のプログラミング言語のサポート、他のAWSサービスとの統合、サーバーのプロビジョニングや管理を行わずにコードを実行できることが含まれます。

# 4. AWS Lambdaを使用する際のコンプライアンスに役立つリソースは何ですか？
回答：AWSは、セキュリティとコンプライアンスのクイックスタートガイド、AWSコンプライアンスセンター、AWS ConfigやAWS Security Hubなどのサービスなど、Lambdaを使用する際にコンプライアンスに役立ついくつかのリソースを提供しています。

# 5. AWS Lambdaは、データの弾力性とバックアップのニーズに対応するためにどのような機能を提供していますか？
回答：AWS Lambdaには、バージョニング、スケーリング、高可用性など、データの弾力性とバックアップのニーズに対応するためのいくつかの機能があります。バージョニングにより、関数のコードや構成を開発しながら保存できます。スケーリングにより、Lambdaは負荷増加を自動的に処理できます。高可用性により、サービス中断の場合でも関数がイベントを処理できるようになります。
[AWS Q&A 365][Lambda]Daily Five Common Questions #9

# 1. What is AWS Lambda and when should I use it? 
Answer: AWS Lambda is a serverless computing service provided by Amazon Web Services. It allows you to run code without provisioning or managing servers. You should use it when you want to run code in response to events, such as changes to data in an S3 bucket, updates to a DynamoDB table, or incoming HTTP requests. 
# 2. How do I get started with AWS Lambda? 
Answer: If you are a first-time user of Lambda, it is recommended that you read the Lambda product overview and then complete the Getting started exercise provided in the AWS Lambda Developer Guide. 
# 3. What are the features of AWS Lambda? 
Answer: The features of AWS Lambda include automatic scaling, high availability, support for multiple programming languages, integration with other AWS services, and the ability to run code without provisioning or managing servers. 
# 4. What resources are available to help with compliance when using AWS Lambda? 
Answer: AWS provides several resources to help with compliance when using Lambda, including security and compliance quick start guides, the AWS Compliance Center, and services such as AWS Config and AWS Security Hub. 
# 5. What features does AWS Lambda offer to help with data resiliency and backup needs? 
Answer: AWS Lambda offers several features to help with data resiliency and backup needs, including versioning, scaling, and high availability. Versioning allows you to save your function's code and configuration as you develop it, while scaling enables Lambda to automatically handle increased load. High availability ensures that your function is available to process events in case of a service interruption in a single zone.
【シェルスクリプト】printfコマンドの使い方

## 基本的な使い方
`printf`コマンドは以下のように使用することで文字列などの整形ができます。
```:ターミナル
$ printf [-v 変数名] 書式 [数値, 文字列 など]
```
`-v 変数名`を入力することで整形した内容をシェル変数にセットできます。

## 書式指定の記号
書式指定の際に使用する記号は以下のとおりです。
`%`の後に数字を記述することで桁数を指定できます。
`%`の後に`'`を記述することで3桁区切りにできます。
|   記号   | 説明                                              |
| :------: | :------------------------------------------------ |
|    %s    | 文字列                                            |
|    %c    | 1文字                                             |
|  %d, %i  | 10進数の整数（符号付き）                          |
|    %u    | 10進数の整数（符号なし）                          |
|    %o    | 8進数の整数（符号付き）                           |
|    %x    | 16進数の整数（符号付き、アルファベット小文字）    |
|    %X    | 16進数の整数（符号付き、アルファベット大文字）    |
|  %f, %F  | 小数形式の浮動小数点数                            |
|    %e    | 指数形式の浮動小数点数（指数記号"e"部分が小文字） |
|    %E    | 指数形式の浮動小数点数（指数記号"E"部分が大文字） |
|    %g    | 指数形%eまたは%f（適した書式を自動選択）          |
|    %G    | %Eまたは%F（適した書式を自動選択）                |
|    \\"    | 「"」                                             |
|    \\\    | バックスラッシュ                                  |
|    \a    | アラート                                          |
|    \b    | バックスペース                                    |
|    \e    | エスケープ                                        |
|    \f    | フォームフィード                                  |
|    \n    | 改行                                              |
|    \r    | キャリッジリターン                                |
|    \t    | 水平タブ                                          |
|    \v    | 垂直タブ                                          |
|    %%    | 「%」                                             |
| \x1b[4m  | 下線                                              |
| \x1b[1m  | 太字                                              |
| \x1b[7m  | 背景色と前景色を反転                              |
| \x1b[41m | 背景色を赤                                        |
| \x1b[43m | 背景色を黄                                        |
| \x1b[42m | 背景色を緑                                        |
| \x1b[44m | 背景色を青                                        |
| \x1b[31m | 文字色を赤                                        |
| \x1b[33m | 文字色を黄                                        |
| \x1b[32m | 文字色を緑                                        |
| \x1b[34m | 文字色を青                                        |
文字コード

## 初めに
文字化けした時の原因や直し方がわからなかったので勉強をしてみた

## 文字コード
文字コードは、文字一つ一つに割り当てられている番号のこと
（後述する、文字集合をエンコードしてビット列表記したもの）

## 文字集合（符号化文字集合）(CCS)
特定の種類ごとに文字を集めたもの(日本語、フランス語 etc)
世界で最初に作成された文字集合は、ASCIIと呼ばれる文字集合(英語向け)
日本語の文字コードの対応表であるJISX0201が作成された
その後、改良版であるJISX0208やJISX0213などが作成された

主な文字集合
- ASCII
- JIS X 0208
- Unicode

例　Unicode
|  文字  |  番号  |
| ---- | ---- |
|  あ  |  3042  |
|  い  |  3043  |
|  ア  |  30A2  |
|  A  |  FF21  |

コンピュータは、0と1しか処理できないため符号化(エンコード)する必要がある
（コンピュータは、「あ」でも「3042」でも理解できない）

## 符号化方式(CES)
文字集合の番号をエンコードしてコンピュータが理解できるように変換すること

JISX0208の符号化方式の1つがShift-JIS
Unicodeの符号化方式の1つがutf-8
※CP932は、Shift-JISを拡張した符号化方式

## 文字化けしないためには
テキストを書いたときと読むときに使用する文字コードを合わせること
（utf-8で書いて、shift-jisで読むと文字化けする）
ブラウザでテキストファイルを開いたときに文字化けする経験がたまにある
Chromeでは、拡張機能を入れて文字コードを明示的に指定してブラウザに認識させるとよい
またHTMLを書くときは、metaタグで文字コードを指定することができる。
（metaタグで指定することで、ブラウザに文字コードを認識させることができる）
VSCodeの拡張機能の作り方（初期化編）

# はじめに

VSCode拡張機能を作る際の自分への忘備録として、プロジェクトの初期化方法を残しておきます。

# yoとgenerator-codeをインストールする

Yeomanジェネレーターを使って拡張機能のプロジェクトを初期化するため、`yo`と`generator-code`をインストールします。

| package        | description                             |
| -------------- | --------------------------------------- |
| yo             | Yeoman which is a scaffolding tool      |
| generator-code | Yeoman generator for VS Code extensions |


```shell
npm install -g yo generator-code
```

# 初期化する

プロジェクトを初期化します。
ターミナルから、`yo code`を実行します。
今回は、拡張機能をTypeScriptで作成するため、`New Extension (TypeScript)`を選択します。

```bash
% yo code

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 

? What type of extension do you want to create? 
❯ New Extension (TypeScript) 
  New Extension (JavaScript) 
  New Color Theme 
  New Language Support 
  New Code Snippets 
  New Keymap 
  New Extension Pack 
  New Language Pack (Localization) 
  New Web Extension (TypeScript) 
  New Notebook Renderer (TypeScript) 
```

選択を進めると、以下の内容が質問されるので、自分が作成する拡張機能に合わせて入力を行なってください。

| question                                  | description                            | example answer               |
| ----------------------------------------- | -------------------------------------- | ---------------------------- |
| What's the name of your extension?        | 拡張機能の名前                         | HelloWorld                   |
| What's the identifier of your extension?  | 拡張機能の識別子                       | helloworld                   |
| What's the description of your extension? | 拡張機能の説明                         | Hello World sample extension |
| Initialize a git repository?              | git リポジトリを初期化するか           | Yes                          |
| Bundle the source code with webpack?      | webpack でソースコードをバンドルするか | No                           |
| Which package manager to use?             | パッケージマネージャーの選択           | npm                          |

初期化が完了すると、次のファイルとフォルダが作成されます。

```md
.vscode/
├── extensions.json
├── launch.json
├── settings.json
├── tasks.json
node_modules/
src/
├── test/
│ ├── runTest.ts
│ ├── suite
│   ├── extension.test.ts
│   └── index.ts
├── extension.ts
.eslintrc.js
.gitignore
package-lock.json
package.json
README.md
tsconfig.json
vsc-extension-quickstart.md
```
cron が動かない時のログ確認方法

Linux 何年触っていても躓きやすい `cron` 、困ったときのログ確認方法を記載します。
（私は Docker に設定するとき躓いた）

:::note info
主に Debian 系のログ確認方法を記載（他 OS では未確認のため）
:::

cron 設定は `crontab` コマンドで設定する方法もありますが、今回は ` /etc/cron.d/` に設定ファイルを配置して設定しています。

方法 2 つを記載
- ログファイルを確認する方法（設定方法も）
- `journalctl` コマンドを使う方法

## `/var/log/syslog` や `/var/log/cron` ファイルでログ確認
Google 検索すると出てくるログファイルの場所
```sh
# /var/log/syslog ファイル
cat /var/log/syslog | grep CRON

# /var/log/cron ファイル
cat /var/log/cron
```
ただ、試した環境ではどちらにもファイル出力されていなかった。
どうやら初期設定ではログ出力されないようなので、設定を変更します。

以下の行をコメントアウトする。（行頭の `#` を取り除く）
```:/etc/rsyslog.d/50-default.conf
cron.*                         /var/log/cron.log
```

`rsyslog` を再起動して反映
```sh
sudo systemctl restart rsyslog.service
# or
# sudo service rsyslog restart
```
`/var/log/cron.log` にログ出力されるようになったはず。

https://tech.withsin.net/2018/03/22/ubuntu-1404-cron/

## `journalctl` コマンドでログ確認
```sh
journalctl -xe -f -u cron
```

#### cron が動いているか確認
そもそもログがない場合は動いているか確認
```sh
systemctl status cron.service
```

## その他参考サイト
https://tech.quickguard.jp/posts/etc-cron-debian-specific/
ModuleNotFoundError: No module named 'MySQLdb'

sqlalchemyをインストール後にimport後にクエリを実行すると下記のエラーがでました。
```
ModuleNotFoundError: No module named 'MySQLdb'
```
ネットの情報だとpymysqlを入れるとあるが解決しないため下記のコマンドでコネクターをインストールするとエラーが消えました。。

```
pip install mysqlclient
```
Java_throwとtry-catchで再スローしよう

paizaラーニングforTEAM Java入門編
レッスン10の#13

```Java:10-#13
// 例外処理 - 再スロー
import java.io.*;
import java.util.*;

public class Main {
    public static void main(String[] args) {

        File file = new File("articles.txt");

        // ファイル書き込み
        try (FileWriter filewriter = new FileWriter(file)) {
            filewriter.write("Hello world\n");
            filewriter.write("Hello Java\n");
        } catch (IOException e) {
            System.err.println("ファイル書き込みに失敗しました");
            e.printStackTrace();
        }

        // ファイル読み込み
        file = new File("error.txt");
        try (Scanner scan = makeScanner(file)) {
            while (scan.hasNextLine()) {
                String line = scan.nextLine();
                System.out.println(line);
            }
        } catch (FileNotFoundException e) {
            System.err.println("ファイル読み込みに失敗しました");
            e.printStackTrace();
        }
    }

    public static Scanner makeScanner(File file) throws FileNotFoundException {
        try {
            Scanner scan = new Scanner(file);
            return scan;
        } catch (FileNotFoundException e) {
            System.err.println("makeScannerで例外を検出しました");
            throw e;
        }
    }
}
```
Java_throwsで例外処理を呼び出し元に任せよう

paizaラーニングforTEAM Java入門編
レッスン10の#12

```Java:10-#12
// 例外処理 - throws
import java.io.*;
import java.util.*;

public class Main {
    public static void main(String[] args) {

        File file = new File("articles.txt");

        // ファイル書き込み
        try (FileWriter filewriter = new FileWriter(file)) {
            filewriter.write("Hello world\n");
            filewriter.write("Hello Java\n");
        } catch (IOException e) {
            System.err.println("ファイル書き込みに失敗しました");
            e.printStackTrace();
        }

        // ファイル読み込み
        file = new File("error.txt");
        try (Scanner scan = makeScanner(file)) {
            while (scan.hasNextLine()) {
                String line = scan.nextLine();
                System.out.println(line);
            }
        } catch (FileNotFoundException e) {
            System.err.println("ファイル読み込みに失敗しました");
            e.printStackTrace();
        }
    }
    
    public static Scanner makeScanner(File file) throws FileNotFoundException {
        Scanner scan = new Scanner(file);
        return scan;
    }
}
```
Java_例外クラスのクラス構成を理解しよう

paizaラーニングforTEAM Java入門編
レッスン10の#11

```Java:10-#11
// チェック例外
import java.io.*;
import java.util.*;

public class Main {
    // ファイル読み書きのプログラムではthrowsかtry_catchでの対応が必要
    public static void main(String[] args) throws IOException {

        File file = new File("articles.txt");

        // ファイル書き込み
        FileWriter filewriter = new FileWriter(file);
        filewriter.write("Hello world\n");
        filewriter.write("Hello Java\n");
        filewriter.close();

        // ファイル読み込み
        Scanner scan = new Scanner(file);
        while (scan.hasNextLine()) {
            String line = scan.nextLine();
            System.out.println(line);
        }
        scan.close();
    }
}
```
BEMとは

## BEMとは
`Block`,`Element`,`Modifier`の頭文字をとった略語。
フロントエンドの設計手法の一つ。命名規則や決まりごとを設けることで保守性を高める事が目的。

+ 例えばブロック名はそのブロックの目的が分かるように命名すること。
```html
<!-- エラーについてのブロックだと分かる --> 
< div  class = "error" > </ div >

<!-- ブロックが何を示しているのかが分からない --> 
< div  class = "red-text" > </ div >
```

### 命名規則
elementを繋ぐときはアンダースコア二つ、modifierを繋ぐときはハイフン二つで繋ぐ。
単語と単語を繋ぐときは、ハイフン一つで繋ぐ。
```
class="block__element–-modifier"
```

## 参考サイト
[BEM公式ドキュメント](https://en.bem.info/methodology/)
[【命名規則】BEMを使った書き方についてまとめてみた【CSS】](https://qiita.com/takahirocook/items/01fd723b934e3b38cbbc)
Java_ファイルアクセスにtry-with-resourcesを使おう

paizaラーニングforTEAM Java入門編
レッスン10の#10

```Java:10-#10
// ファイルアクセス - try-with-resources
import java.io.*;
import java.util.*;

public class Main {
    public static void main(String[] args) {

        File file = new File("articles.txt");

        // ファイル書き込み
        // try-with-resourcesでは、自動的にクローズしたいオブジェクトの部分をtryの()の中に記述する
        // 複数のコードがある場合はセミコロンで区切って記述する
        try(FileWriter filewriter = new FileWriter(file)) {
            filewriter.write("Hello world\n");
            filewriter.write("Hello Java\n");
            // filewriter.close();
        } catch (IOException e) {
            System.err.println("ファイル書き込みに失敗しました");
            e.printStackTrace();
        }

        // ファイル読み込み
        file = new File("error.txt");
        try(Scanner scan = new Scanner(file)) {
            while (scan.hasNextLine()) {
                String line = scan.nextLine();
                System.out.println(line);
            }
            // scan.close();
        } catch (FileNotFoundException e) {
            System.err.println("ファイル読み込みに失敗しました");
            e.printStackTrace();
        }
    }
}
```
GPT-4が生成するテキストベース・アドベンチャーゲームがヤバい

#### GPT-4が生成するテキストベース・アドベンチャーゲームがヤバい

#### 「表参道アドベンチャー」
　青山の骨董通りの、かつてアスキー出版が入っていたビルの前を通ると「表参道アドベンチャー」を思い出すマイコン世代の筆者です。

　GPT-4に童話や小説を書かせる試みがありますが、どのようなプロンプトを入力すると良いか、
もっと研究が必要な感じがします。
　小説や童話のようなスタティックなテキストよりも、ダイナミックなワールドを生成してもらうほうがGPT-4には向いているかも？それならば、マイコン時代のテキストベース・アドベンチャーゲームとかはどう？　　　...ということで、さっそく試してみました。
#### プロンプト
　↓のようなプロンプトを考えてみました。
誤字脱字があると、プログラムは動作しませんが、GPT-4は、多少の間違いには寛容です。


```
以下のようなテキストベースのアドベンチャーゲームを生成してください。
プレイヤーは、４階建てのビルディングの中を探検し、その中に隠された
黄金のUSBメモリを探しだすというゲームです。
ビルの各回にはいくつかの部屋と、それを各階はエレベータで移動できます。
各部屋は廊下があり、それぞれの部屋にはドアがあります。
部屋の中には、机やロッカーと棚があります。
机やロッカーや、棚にはいろんなものが置いてあります。それらは適当に配置してください。
どこか一か所に黄金のUSBを置いてください。
スタートは１階のビルの入り口です。

ステップ by ステップで私が入力するコマンドでゲームが進行します。
それでは、ゲームスタートです。
```
#### ゲームスタート

```
【黄金のUSBを探せ！】

あなたは、４階建てのビルディングの入り口に立っています。このビルには、黄金のUSBメモリが隠されているという噂があります。あなたの目的は、このビルを探検し、黄金のUSBメモリを見つけ出すことです。

1階には、エレベーターと3つの部屋があります。それぞれの部屋にはドアがあり、廊下がつながっています。エレベーターは各階にアクセスするために利用できます。

あなたはどうしますか？

コマンド例:

部屋1へ行く
エレベーターで2階へ行く
部屋2へ行く
部屋3へ行く

```
Player
```
エレベーターで3階へ行く
```
GPT-4
```
あなたはエレベーターに乗り、3階へ向かいます。ドアが開くと、3階の廊下が現れます。この階にも3つの部屋があります（部屋7、部屋8、部屋9）。各部屋のドアが廊下に面しています。

あなたはどうしますか？

コマンド例:

部屋7へ行く
部屋8へ行く
部屋9へ行く
エレベーターで別の階へ行く
```
Player
```
部屋9へ行く
```
GPT-4
```
あなたは部屋9へ向かい、ドアを開けます。部屋には、大きな机があり、その上には雑誌や文房具が置かれています。また、部屋の隅にはロッカーがあり、壁には棚が取り付けられています。棚には、いくつかの本や小さな置物が並んでいます。

あなたはどうしますか？

コマンド例:

机を調べる
ロッカーを調べる
棚を調べる
部屋を出る
```
Player
```
ロッカーを調べる
```
GPT-4
```
あなたはロッカーに近づき、それを調べます。ロッカーには3つの扉があり、それぞれに鍵がかかっていません。あなたは順番にロッカーの扉を開けて中身を確認します。

1つ目のロッカーには、古いコートと傘が入っています。2つ目のロッカーには、ノートやペン、定規などの文房具があります。3つ目のロッカーには、書類や雑誌が詰め込まれていますが、黄金のUSBメモリは見つかりませんでした。

あなたはどうしますか？

コマンド例:

机を調べる
棚を調べる
部屋を出る
```
机を調べる
```
あなたは机に近づき、その上に置かれた雑誌や文房具を調べます。ペンやノート、はさみ、テープなど様々な文房具が見つかりますが、残念ながら黄金のUSBメモリは見つかりません。机の引き出しも開けてみると、書類やクリップ、消しゴムが入っていますが、USBメモリはありません。

あなたはどうしますか？

コマンド例:

棚を調べる
部屋を出る
```
Player
```
棚を調べる
```
GPT-4
```
あなたは棚に近づき、上に置かれた本や小さな置物を注意深く調べます。様々な本が並んでおり、小説や専門書、雑誌などが含まれています。置物は、観賞用の小さな陶器製のフィギュアやインテリア小物が並んでいます。

棚の各層を丹念に調べた結果、やっとのことで黄金のUSBメモリを見つけることができました！それは、ある小説の間に挟まれていました。あなたは手に取り、その輝く姿に目を細めます。

おめでとうございます！あなたは黄金のUSBメモリを見つけました！

これでゲームは終了です。再度プレイしたい場合は、ビルの入り口からやり直してください。
```
　
わりと簡単に黄金のUSBを発見できてしまいました。
そこで以下のように質問してみました。
```
次のゲームでも黄金のUSBは同じところにあるのですか？
```
答えはGPT-4の答えは
```
いいえ、次のゲームでは黄金のUSBメモリの場所が変わります。それは、ビル内のさまざまな場所に隠されるため、プレイヤーは再度探索を行い、新たな場所で見つけることができるようになっています。

新しいゲームを始める準備ができたら、ビルの入り口から再度スタートしてください。そして、異なる部屋や階を探検して、黄金のUSBメモリを見つける冒険を楽しんでください。
```
でした。
　この先どうなるのでしょうか？
プロンプトで細かい指定をしていないのにもかかわらず、別のトライでは、
棚で見つけたアイテムが、「後で役だつかもしれない」というようなアドベンチャー
ゲームにつきものの仄めかしがあったりして、ワクワクします。

　GPT-4は賢いので、より簡潔で適切なプロンプトがありそうです。
　あるいは、もっと複雑で魅力的なワールドを構築できるプロンプトを
  デザインするとより魅力的なゲームになるでしょう。
　GPT-4はマルチモーダルAIですので、APIを使って画像と組み合わせれば
　本格的なAI時代のアドベンチャーゲームやロールプレイングゲームができ
　ることでしょう。
Java_ファイルアクセスに例外処理を追加しよう

paizaラーニングforTEAM Java入門編
レッスン10の#09

```Java:10-#09
// ファイルアクセス - 例外処理
import java.io.*;
import java.util.*;

public class Main {
    public static void main(String[] args) {

        File file = new File("articles.txt");

        // ファイル書き込み
        try {
            FileWriter filewriter = new FileWriter(file);
            filewriter.write("Hello world\n");
            filewriter.write("Hello Java\n");
            filewriter.close();
        } catch(IOException e) {
            System.err.println("ファイル書き込みに失敗しました");
            e.printStackTrace();
        }

        // ファイル読み込み
        file = new File("error.txt");
        try {
            Scanner scan = new Scanner(file);
            while (scan.hasNextLine()) {
                String line = scan.nextLine();
                System.out.println(line);
            }
            scan.close();
        } catch (FileNotFoundException e) {
            System.err.println("ファイル読み込みに失敗しました");
            e.printStackTrace();
        }
    }
}
```
指定した期間(開始日から終了日まで)、指定した国の祝日のリストをCSVファイル形式で出力

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1882169/5bc58e08-b8c2-e14c-23f9-6707569feffb.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1882169/d9fb6de6-f46d-e327-678e-3e7bd0e43757.png)
　画像は2023年の、アメリカの祝日と日本の祝日のCSVファイルです。このような形式でCSVファイルを作成するPythonプログラムをChatGPTに書いてもらいました。

```
pip install holidays
```
祝日情報を取得するために「holidays」というライブラリを使用します。

```write_holidays_to_csv.py
import csv
from datetime import date, timedelta
import holidays

def write_holidays_to_csv(start_date, end_date, country_code, output_file):
    country_holidays = getattr(holidays, country_code)()
    current_date = start_date
    with open(output_file, 'w', newline='') as csvfile:
        fieldnames = ['Date', 'Holiday']
        writer = csv.DictWriter(csvfile, fieldnames=fieldnames)
        writer.writeheader()
        while current_date <= end_date:
            if current_date in country_holidays:
                writer.writerow({'Date': current_date.isoformat(), 'Holiday': country_holidays[current_date]})
            current_date += timedelta(days=1)

# 引数は「開始日、終了日、国コード」
write_holidays_to_csv(date(2023, 1, 1), date(2023, 12, 31), 'US', 'us_holidays_2023.csv')

```
国コードはISOコード(2文字)です。
https://ja.wikipedia.org/wiki/ISO_3166-1
祝日はアメリカでは州によって違いがある等を考慮する場合は注意してください。
Java_演習課題「0から99までファイルに書き込む」

paizaラーニングforTEAM Java入門編
レッスン10の#08の演習課題

```Java:10-#08_
// 0から99までファイルに書き込む
import java.io.*;
import java.util.*;

public class Main {
    public static void main(String[] args) throws IOException {

        File file = new File("articles.txt");

        // ファイル書き込み
        FileWriter filewriter = new FileWriter(file);
        // ここに、0から99まで1行ずつ書き込むコードを記述する
        for (int i = 0; i <= 99; i++) {
            filewriter.write(i + "\n");
        }

        filewriter.close();

        // ファイル読み込み
        Scanner scan = new Scanner(file);
        while (scan.hasNextLine()) {
            String line = scan.nextLine();
            System.out.println(line);
        }
        scan.close();
    }
}
```
conda仮想環境でpytorchのtorch.cuda.is_available()がFalseがでる

conda仮想環境でtorchを認識しない時があるため備忘録

cuda、torch、torch vision、torch audioのバージョンを調べてホイールをpip install ホイールのpath

ホイールダウンロードするページ
https://download.pytorch.org/whl/torch_stable.html

参考ページ
https://blog.csdn.net/qq_56521244/article/details/128497715
Java_テキストファイルを読み書きしよう

paizaラーニングforTEAM Java入門編
レッスン10の#08

```Java:10-#08
// ファイルアクセス
import java.io.*;
import java.util.*;

public class Main {
    public static void main(String[] args) throws IOException {
        
        File file = new File("articles.txt");

        // ファイル書き込み
        FileWriter filewriter = new FileWriter(file);
        filewriter.write("Hello world\n");
        filewriter.write("Hello java\n");
        filewriter.close();

        // ファイル読み込み
        Scanner scan = new Scanner(file);
        while (scan.hasNextLine()) {
            String line = scan.nextLine();
            System.out.println(line);
        }
        scan.close();
    }
}
```
Go言語のGenericsについて

# はじめに
最近、Go言語について勉強しておりました。
その中でGenericsなるものを触ってみて、自分なりの解釈をメモとして残します。
間違っていたりするところなどはどんどんコメントもらえると嬉しいです！！

# Genericsとは？
wikipedia先生によりますと、
[ジェネリックプログラミング](https://ja.wikipedia.org/wiki/%E3%82%B8%E3%82%A7%E3%83%8D%E3%83%AA%E3%83%83%E3%82%AF%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0)

>具体的なデータ型に直接依存しない、抽象的かつ汎用的なコード記述を可能にするコンピュータプログラミング手法である。

型が違うけど、同じような処理があってつかいまわしたい。。。
そんな時に使えたりするらしいです。。

# 実際に書いてみた

```Go:sample.go
package main

import (
	"fmt"
)

func sampleGenerics[T comparable](x T) T {
	return x
}

func main() {
	var (
		a int
		b string
		c bool
	)

	a = 777 //ラッキーセブン:)
	b = "HelloWorld"
	c = true

	fmt.Printf("aの型:%T\n", sampleGenerics(a))
	fmt.Printf("bの型:%T\n", sampleGenerics(b))
	fmt.Printf("cの型:%T\n", sampleGenerics(c))
}
```

```shell:結果
$ go run sample.go
aの型:int
bの型:string
cの型:bool

```

上記のようになります。
ちなみに、これを型ごとに実装するとこんな感じです。

```Go:sample2.go
package main

import (
	"fmt"
)

func hogehoge(x int) int {
	return x
}

func piyopiyo(x string) string {
	return x
}

func fugafuga(x bool) bool {
	return x
}

func main() {
	var (
		a int
		b string
		c bool
	)

	a = 777 //ラッキーセブン:)
	b = "HelloWorld"
	c = true

	fmt.Printf("aの型:%T\n", hogehoge(a))
	fmt.Printf("bの型:%T\n", piyopiyo(b))
	fmt.Printf("cの型:%T\n", fugafuga(c))

}
```

3つの定義が1つで済みました。
便利です！！

# 最後に
すごいざっくりとですが、自分なりにまとめて書いてみました。
こうやって書くと差がとても分かります。
もっと理解を深めて様々な応用方法などを別記事とかで書けたらと思います！


※書き方やご意見などありましたらどんどん書いてくださるとうれしいです！！
th:each 任意の回数分反復する方法

springboot勉強中、
「thymeleafで任意の回数分反復を行いHTML上に出力したいな。」と思うことがありました。

しかし、私が知っていたth:eachの使い方は、
```java:normalVersion
<tr th:each="test:${tests}">
    		<td th:text="${test.id}"></td>
    		<td th:text="${test.name}"></td>
    		<td th:text="${test.price}"></td>
    		<td th:text="${test.genreId}"></td>
		</tr>
```
という方法のみでした。
そこで調べてみると、#numbers.sequenceという方法を使えば任意の回数分eachを反復できることが
判明しました。
例えば、５回th:eachで反復したい時には、
```java:fivetimesVersion
<tr th:each="i : ${#numbers.sequence(1,5)}">
    		<td th:text="${tests[i-1].id}"></td>
    		<td th:text="${tests[i-1].name}"></td>
    		<td th:text="${tests[i-1].price}"></td>
    		<td th:text="${tests[i-1].genreId}"></td>
		</tr>
```
このようにやると５回反復できました！
是非お試しを✨
Java_throwで意図的に例外を投げよう

paizaラーニングforTEAM Java入門編
レッスン10の#07

```Java:10-#07
// 例外処理 - throw

public class Main {
    public static void main(String[] args) {
        System.out.println("Hello World");

        try {
            int number = 2;
            int answer = 100 / number;
            System.out.println(answer);
            throw new Exception("強制エラー");
        } catch (ArithmeticException e) {
            System.out.println("0では、割り算できません。");
            e.printStackTrace();
        // 例外ハンドラを追加
        } catch (Exception e) {
            System.out.println("例外が発生しました。");
            e.printStackTrace();
        } finally {
            System.out.println("Hello Java");
        }
    }
}
```
MariaDBのroot passwordをクリアする方法

MariaDBのroot passwordをクリアする方法

# 設定ファイルにskip-grant-tables入れる

`/etc/mysql/mariadb.conf.d/50-server.cnf` の

```
[mysqld]
```

の後に

```
skip-grant-tables
```

を追加

# MariaDB再起動

`service mysql restart`

# パスワードをクリア

```
mysql -u root
mysql> use mysql;
mysql> update user set password=password('') where user='root';
mysql> flush privileges;
```

# 設定ファイルを戻す

`/etc/mysql/mariadb.conf.d/50-server.cnf` に先ほど追加した `skip-grant-tables` をコメントアウト

```
[mysqld]
# skip-grant-tables
```

# MariaDB再起動

`service mysql restart`