OmniAICreator/Qiita-1.07M huggingface dataset:
tkinter クラスでの記述　ひな形

    
Tkinter をクラスで作成したいときの、ひな形




```

import tkinter
from tkinter import ttk
from tkinter import Toplevel



# メイン画面　デザイン・配置
class MainScreenViewClass(tkinter.Frame):
    """
    メイン画面　デザイン・配置 クラス
    """
    def __init__(self, function_s, function_p, master=None): # master=None 自分が親
        super().__init__(master) # 基底クラスのコンストラクタをオーバーライド

        self.master.minsize(width=600, height=600)# 画面サイズの設定　min max 両方で大きさが変更されなくする。
        self.master.maxsize(width=600, height=600)
        self.master.title('メイン画面') # 画面タイトルの設定

        # クラス変数にセッティングファンクションclassを入れる
        self.func = function_s()        # メイン画面の処理クラス
        self.pack()
        self.create_widgets_main()



    # メイン画面　ウィジェットの作成　デザイン
    def create_widgets_main(self):
        """
        ウィジェットの配置　デザイン
        """
        # -----------上部フレーム
        self.Yahoo_frame_upper = tkinter.Frame(self)

        # タイトル　ラベル
        test_label = tkinter.Label(self.Yahoo_frame_upper, text = "Yahoo！", font=("MSゴシック", "20", "bold")) #ラベルWidgetを生成
        test_label.pack(pady=4)

        # 商品検索　ボタン
        test_btn = tkinter.Button(self.Yahoo_frame_upper, text='検索', width=6, height=1)
        test_btn["command"] = lambda: self.func.Yahoo_goods_search_btn_f()
        test_btn.pack(side="left")

        self.Yahoo_frame_upper.pack(ipady = 10)
        # -----------上部フレーム


    # サブ画面　ウィジェットの作成　デザイン
    def create_widgets_property(self):
        """
        ウィジェットの配置　デザイン
        """
       # 設定画面の設定
        self.dialog = Toplevel(self)
        self.dialog.title("modal dialog")
        self.dialog.minsize(width=480, height=550)# 画面サイズの設定
        self.dialog.maxsize(width=480, height=550)

        # モーダルダイアログ（元画面を操作不可として表示）
        self.dialog.grab_set()

        # 空フレーム
        self.frame_Nothing = tkinter.Frame(self.dialog)
        self.frame_Nothing.pack(ipady = 20)




# 処理用のクラス
class testClass():
    def __init__(self) -> None:
        pass

    def test():
        pass




# メイン画面を表示する
root = tkinter.Tk()
app = MainScreenViewClass(function_s = testClass, master=root) # このやり方で、関数と画面を分離させる
app.mainloop()




```
C# でJsonをデシリアライズするときにデータクラスを用意せずに連想配列のように扱う方法

# はじめに
PHPなどはデシリアライズするときに専用の関数を使うことでデータの内容を意識せずに読み込めるが、C#は読み込むときにデータクラスや構造体を用意することが好ましいとされる。だが、APIなどのJsonデータを読み込むときにより複雑なデータを読み込もうとするとデータクラスを用意するのはちょっとめんどくさいし現実的ではない。よってデータクラスを用意せずにJsonを読み込む方法を以下に示す。

# NuGet
`Newtonsoft.json.Linq` を使用することで上記の課題を解決することができる。
NuGetで`Newtonsoft.json`を検索してインストールする。

# Code

using

```C#
using Newtonsoft.Json.Linq;
```

```C#
var jsontext = File.ReadAllText(@"Jsonファイルのパスを指定");
var json = JObject.Parse(jsontext);
```

これで変数`json`にデシリアライズしたデータが`JObject`として格納される。
データにアクセスするときは、連想配列の要領でアクセスる。

下記はYouTubeAPIでとってきたデータをデシリアライズして動画タイトルを列挙するコード

```C#

var result = new HttpClient().GetStringAsync("API URI").GetAwaiter().GetResult();
var json = JObject.Parse(result);

foreach(var item in json["items"] ?? string.Empty)
{
    Console.WriteLine(item?["snippet"]?["title"]);
}
```
View Bindingについて

## 対象読者
+ ウィジェット特定で冗長なコード（findViewById）を書きたくない人

## できるようになること
+ findViewByIdによる冗長なウィジェット特定を卒業できる

手順

1. build.gradleを以下のように編集する
    ~~~
    android {
        compileSdk 32
    
        // ここから
        buildFeatures {
            viewBinding true
        }
        // ここまでを追記する
    
        省略・・・
    }
    ~~~
1. アクティビティファイルを開く
    ~~~
    class MainActivity : AppCompatActivity() {
        // 追加ポイント1
        private lateinit var binding: ActivityMainBinding
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            // 追加ポイント2
            binding = ActivityMainBinding.inflate(layoutInflater)
            setContentView(binding.root)
        }
    ~~~
1. findViewByIdを利用せずにアクセスする方法

+ Before
    ~~~
    class MainActivity : AppCompatActivity() {
        private lateinit var binding: ActivityMainBinding
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            binding = ActivityMainBinding.inflate(layoutInflater)
            setContentView(binding.root)
            val btnCurrent = findViewById<Button>(R.id.btnCurrent)
            btnCurrent.setOnClickListener {
                val txtResult = findViewById<TextView>(R.id.txtResult)
                txtResult.text = Date().toString()
            }
        }
    ~~~
+ After
    ~~~
    class MainActivity : AppCompatActivity() {
        private lateinit var binding: ActivityMainBinding
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            binding = ActivityMainBinding.inflate(layoutInflater)
            setContentView(binding.root)
            binding.btnCurrent.setOnClickListener {
                binding.txtResult.text = Date().toString()
            }
        }
    ~~~

## まとめ 
+ view Bindingを使うとfindViewByIdを卒業できる
DApps -Web3で注目の技術④-

# はじめに
IT×ビジネスという視点で週1本記事を投稿しています。
もし興味のある方は下のリンクから他の記事も見ていただければ幸いです。
 [@7_inai_](https://qiita.com/7_inai_)

本記事では、Web3で注目の技術④としてDAppsについてまとめます。
Web3については[こちらのリンク](https://qiita.com/7_inai_/items/c441008bb0849908fbc6)からご確認ください。


# DAppsとは
DApps(ダップス)とはDecentralized Applicationsの略で、日本では __分散型アプリケーション__ と呼ばれており、`ブロックチェーンを用いたアプリ`の総称です。
このように書くと[DAO](https://qiita.com/7_inai_/items/eb78bdc13b7c2f1d631d)と似ているように感じますが、DAOが組織であるのに対して、DAppsはアプリケーションであるという違いがあります。

# DAppsの特徴
DAppsにはブロックチェーンが使われているため以下のような特徴があります。
- アプリの仕組みが公開されている
- 中央管理者がおらず分散管理されている
- 管理者が複数存在するためサーバーダウンに強い
- スマートコントラクトを使用して全員で意思決定を行う

# DAppsの事例
### ■日本初のNFTゲーム"My Crypto Heros"
My Crypto Herosは日本発祥のNFTゲームでありながら、世界No.1のユーザー数、トランザクション数を記録しています。歴史上のヒーロー(偉人)達を操り的を倒すゲームですが、一部のヒーローや武器がNFTとなっているため、それらを外部のNFTマーケットで売却することで利益を得ることができます。

### ■保険プラットフォーム"Etherisc"
Etheriscはドイツ発のスタートアップである。保険の発生事例を外部から取り込むことで、それをもとにスマートコントラクトが保険の支払い有無を判断し、自動で支払いを実行します。またEtheriscでは、私たちが馴染みがある健康保険や、火災保険のみならず「航空機遅延保険」「ハリケーン保険」「干ばつや洪水に対する農家の保険」等があります。

# 終わりに
今回紹介したように、様々な分野のDAppsが開発されています。それだけブロックチェーンの影響力は強く、世界の構造を変えてしまうほどの技術と言えるでしょう。
最後までお付き合いくださりありがとうございました。
サイドチャネル攻撃 とは

## 勉強前イメージ

テンペスト攻撃の友達的なやつだった気がする

## 調査

### サイドチャネル攻撃 とは

英語でSide Channel Attackと書き、暗号解読手法の一つになります。
装置の物理的な特性の変化や正常時・異常時の動作の違いなどから、本来読み取ることができない情報を盗み取る手法になります。

暗号を解読して情報を盗む際には以下の2つがあります。

- 破壊攻撃 : 機器を破壊して暗号を解読する
- 非破壊攻撃 : 機器を破壊せずに暗号を解読する

サイドチャネル攻撃は上記でも記載の通り、特性の変化などから読み取るため非破壊攻撃になります。

### サイドチャネル攻撃の攻撃手法

以下の6つがあります。

- タイミング攻撃

機器に様々な命令を出して命令を処理する時間等から情報を盗む攻撃手法

- 電力解析攻撃

タイミング師攻撃の電力版で、
電力解析攻撃は暗号化や復号化の処理をする際の消費電力の違いで暗号を解読します。

- 電磁波解析攻撃

コンピュータや機器、本体やケーブルから発する電磁波から情報を盗む攻撃手法。

- 故障利用攻撃

ICカードについているチップなどに衝撃を加えて正常に動作しないようにした上
チップの設定などを変えてしまう攻撃手法です。

- キャッシュ攻撃

キャッシュの中に入っていないデータは取り出しまでの時間がかかるので
その時間差を利用した攻撃です。

- 音響解析攻撃

コンピュータが稼働する際に発するノイズを分析して情報を盗み取る攻撃手法です。

### テンペスト攻撃との違い

テンペスト攻撃とはモニターやキーボード、ケーブルから放出される電磁波を傍受して
情報の再現を行、パスワードなどを不正に入手する攻撃手法になります。

どちらも機器が発する電磁波などを読み取って情報を盗むことを指しますが以下の違いがあります。

- テンペスト攻撃 : 暗号を解読する
- サイドチャネル攻撃 : 盗聴が目的

サイドチャネル攻撃は電磁波を受信しますが、暗号を解読することはできません。
その為サイドチャネル攻撃のほうが一段レベルが上がるような感じです。

## 勉強後イメージ

サイドチャネル攻撃は暗号化しているものを解読して盗聴が目的・・・・
てか電磁波とかノイズで情報がわかるのね・・・すごい。。

## 参考

- [サイドチャネル攻撃とは？仕組みや種類、対策方法について徹底解説](https://cybersecurity-jp.com/column/34603)
- [サイドチャネル攻撃とは？6つの攻撃手法、被害事例、対策を簡単解説](https://office110.jp/security/knowledge/cyber-attack/side-channel-attack)
Goの構造体のレシーバを利用したらcannot define new methods on non-local type stringというエラーがでる

# はじめに

構造体をなんとなくで利用していてエラーが発生したのでまとめます
同じエラーがおきるようなことは少ないかもですが、起きたときにルールを知らないと時間を使ってしまいそうでした

# 問題

```go:testdata.go
package testdata

func (u *User) CreateUser (user User) {
  // ユーザー作成の処理
}
```

このような`User`のレシーバーをテストデータを作成する箇所で作成したのですが以下のようなエラーが発生しました

```
cannot define new methods on non-local type string
```

# 解決方法

レシーバーを利用するときは`自パッケージ内で定義したtype`でなければならないというルールがありました
このコードでは関係ないところでレシーバーを使っていたのでエラーが発生しています

もしレシーバーを作成するなら`User`を定義していた`models`のパッケージのどこかに書く必要があったようです

# おわりに

まだまだ構造体やインターフェースに慣れず初心者を抜けられません
早く使いこなせるようになりたいです

# 参考

https://thinkit.co.jp/article/11049?page=0%2C1
html5 の <dialog> をポップアップ部品として利用できるか試してみた

# html5 の &lt;dialog&gt; をポップアップ部品として利用できるか試してみた
定番のコンボボックス（ドロップダウンリスト部）だけですけどね。

とりあえず要件は
・コンボボックスは key-name ペアのリストを表現する複数列リストとする。
・モーダルダイアログ上でも問題なく機能するよね。

<p class="codepen" data-height="420" data-default-tab="result" data-slug-hash="WNJNVGq" data-user="cfd-ack" style="height: 420px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/cfd-ack/pen/WNJNVGq">
  combo-box &amp; dialog (pure javascript) beta</a> by cfd-ack (<a href="https://codepen.io/cfd-ack">@cfd-ack</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

動作確認
・Google Chrome 104
・FireFox 104

方向性を見定めるお試し版ということで、素のJavascriptで適当に書いてましたが・・・
（あれ？おかしいな？お試し版って300行もあるっけ・・・

## ポイント
+ ポップアップ（dialog）の位置はユーザーエージェントのスタイルを
　上書きで消して、絶対座標配置となるようにした。
+ zindexは不要（html/css/jsいずれも一切記述していません）
　ただし dialog は body 直下の最後に移動する。
+ モーダル上でポップアップさせる場合はモーダルの最後に配置し
　親モーダル dialog を overflow:visible にする必要がある。
（同じポップアップをページ本流側とモーダル上とで流用するため
　ポップアップ dialog ごと引っこ抜いて body/dialog の最後に移動させている。）
+ [ESC]キーを preventDefault() しないと親モーダルが閉じてしまう。

※コンボボックス本体の機能は本題ではないので、いくつも手抜きがあります。
　（マルチカラム前提とかページスクロール時の考慮とかオートコンプリートとか）
※リストアイテムの button タグは不要です。（labelのみで実装可能。← 整理してない
VSCodeでPythonだけ自動整形が効かなかった時の対処法

自分用のメモ

python.defaultInterpreterPathを編集して，以下のコマンドで表示されるパスを追加する．色々いじったら，デフォルトではVSCodeにpythonのパスがうまく認識されていなかったようだ．

```
where python
```
AtCoderログ：ABC267

## ABC267に参加しました
今回はA, B, Cの3完でした。
A：2分
B：19分
C：45分

## レート変動
290→331（パフォーマンス：657）

## A問題-Saturday
ごり押し
```cpp
int main() {
  string s;
  cin >> s;
  if (s == "Monday") cout << 5;
  else if (s == "Tuesday") cout << 4;
  else if (s == "Wednesday") cout << 3;
  else if (s == "Thursday") cout << 2;
  else cout << 1;
  cout << endl;
  return 0;
}
```

## B問題-Split?
A問題と同様にベタ書きしました
```cpp
int main() {
  string s;
  cin >> s;
  vector<bool> retsu(7, false);
  if (s[6] == '0') retsu[0] = true;
  if (s[3] == '0') retsu[1] = true;
  if (s[7] == '0' && s[1] == '0') retsu[2] = true;
  if (s[4] == '0' && s[0] == '0') retsu[3] = true;
  if (s[8] == '0' && s[2] == '0') retsu[4] = true;
  if (s[5] == '0') retsu[5] = true;
  if (s[9] == '0') retsu[6] = true;

  if (s[0] == '1') {
    cout << "No" << endl;
    return 0;
  }
  else {
    rep(i, 5) {
      if (retsu[i] == false && retsu[i + 1] == true) {
        rep3(j, i + 2, 7) {
          if (retsu[j] == false) {
            cout << "Yes" << endl;
            return 0;
          }
        }
      }
    }
  }
  cout << "No" << endl;
  return 0;
}
```

## C問題-Index × A(Continuous ver.)
b[i]を計算後の連続部分数列の和としてO(n)でそれらを求められるような実装にした。
```cpp
int main() {
  long long n, m;
  cin >> n >> m;
  long long res = -1000000000000000000;
  vector<long long> a(n);
  vector<long long> b(n, -1000000000000000000);
  vector<long long> c(n, -1000000000000000000);
  rep(i, n) cin >> a[i];
  b[0] = 0;
  c[0] = 0;
  rep(i, m) b[0] += a[i] * (i + 1);
  rep(i, m) c[0] += a[i];
  rep(i, n - m) c[i + 1] = c[i] + a[i + m] - a[i];
  res = b[0];
  rep(i, n - m) {
    b[i + 1] = b[i] + a[i + m] * m - c[i];
    res = max(res, b[i + 1]);
  }
  cout << res << endl;
  return 0;
}
```

## D問題-Index × A(Not Continuous ver.)
dpのDとはコンテスト中には気づかなかった...

```cpp
int main() {
  long long n, m, A;
  cin >> n >> m;
  long long res = -1000000000000000000;
  vector<long long> a(n + 1);
  vector<vector<long long>> dp(n + 1, vector<long long>(m + 1, -1000000000000000000));
  rep3(i, 1, n + 1) cin >> a[i];
  rep3(i, 1, n + 1) {
    dp[i][0] = 0;
    dp[i][1] = a[i];
  }
  rep3(i, 2, n + 1) {
    rep3(j, 1, i + 1) {
      if (j == m + 1) break;
      dp[i][j] = max(dp[i - 1][j], dp[i - 1][j - 1] + a[i] * j);
    }
  }
  rep3(i, m, n + 1) {
    res = max(res, dp[i][m]);
  }
  cout << res << endl;

  return 0;
}
```
Gormで全レコード削除をしたが削除されなかった

# はじめに

いままで全レコード削除できていると思っていたコードが機能していなかったことで時間を取られましたのでまとめます
GORMを使い始めたばかりのときにつまづく箇所になりそうです

# 問題

以下のようなコードでユーザーデータの削除を行っていました

```go:user.go
db.Delete(&User{})
```

これですべてのユーザーが削除できていたと思っていたのですが、テストをした際にユーザーのメールアドレスのユニークバリデーションで引っかかってしまい、他のテストデータが削除できていないことが判明しました

# 解決方法

```go:user.go
db.Unscoped().Where("1=1").Delete(&User{})
```

として削除ができるようになりました

ポイントは2つで、全レコードを削除するには`Where`を使わないと削除ができないということ、`Unscoped`で物理削除を行うことでした

ここではWhere(1=1)で無理やりWhereを利用して全レコード削除をしています

とくに`Where`は知らないとつまづくポイントなので公式を確認するとよいかと思います

https://gorm.io/ja_JP/docs/delete.html

# おわりに

Whereを使わないといけないというのを知っていれば早く解決できるところでしたが、なんとなくでGORMを使ってエラーが特に出ていなかったので気づかずにここまで来ていました
今後はしっかりWhereを使っていきます

# 参考

https://gorm.io/ja_JP/docs/delete.html
Goのテストでテストデータのレコードで重複が起きユニークバリデーションエラーが起きて失敗する

# はじめに

Goのテストを書くときにテストデータの挙動でかなり時間を使ってしまったのでまとめます

# 問題

テストデータをCreateUserで毎回同じユーザーを作成するようにしているのだが、なぜかメールアドレスのバリデーションエラーが発生してテストが失敗してしまう。

そして成功するときもあれば失敗するときもあるので挙動がよくわからなかったです

ユーザーは作成後(テスト終わり)に削除をしていました

```
2022/09/05 08:07:38 /go/src/models/db_test_setting.go:50 Error 1062: Duplicate entry 'test@sample.jp' for key 'users.email'
```

# 解決方法

Goのテストは並列で実行されるためユーザー作成のタイミングが被ることが起こり得ました
そしてそのタイミングになぜテストが失敗になるのかを調べたところ、インサートに失敗した際に以下のようなハンドリングをしていました

```go:user.go
if err != nil {
    log.Fatalln(err)
}
```

`log.fatalln`はプログラムを強制で終了させてしまうのでテストが評価される前に失敗になってしまっていた
ユーザー作成で重複してもエラーハンドリングをすればうまくいくはずだが、これが原因だった

```go:user.go
if err != nil {
    log.Printf(err)
}
```

にしてログを表示するだけにしてテストを通すようにした

# おわりに

エラーハンドリングで無意識に使っていましたが、ちゃんと使いどころを考えないと沼ってしまうことを学びました

# 参考

https://qiita.com/ryokky59/items/19fa212d1898dcb4bcfd
CPU?命令セット？

# CPU?命令セット？

## CPU

コンピュータの頭脳のようなもの。
命令をもとに処理を行うハードウェア。

## 命令セット

cpuが処理を行う際の命令。
言葉のようなもの。

異なるcpuでも、同じ命令セットが対応していれば同じ処理を行える。
例）日本語がわかる人→日本語を理解して動ける。

x86, x86_64, amd64などは命令セットアーキテクチャという。

### X86

Intel社によって開発された、16bitの命令セット

とは言うが、16bit~64bitまで含むと言う。
後述するx86_64と対比して、32bitと言われることがある。

### x86_64

X86と互換性を持つ、64bitの命令セット

### ARM

ARM社により開発されたもの。
安価で低消費電力らしい。
appleで搭載されたり、キテいる。
85.hasOwnProperty〜プロパティがあるかどうかを調べる〜

## hasOwnPropatyとは
オブジェクトの中にOOというプロパティがないかを調べる→存在すればTRUE
## Inとは
オブジェクトだけではなく、プロトタイプを含めてOOというプロパティがないかを調べる→存在すればTRUE

```javascript
function Person(name, age) {
    this.name = name;
    this.age = age;
}

Object.prototype.hello = function() {
    console.log('Object: hello ' + this.name);
}

const bob = new Person('Bob', 18);
```
【SwiftUI】Loading時のアニメーションを追加する

## はじめに
Loading時のアニメーションを追加する


## 環境
Xcode: 13.3.1


## Code
```swift:LoadingView.swift
struct LoadingView: View {
    
    @State var isLoading : Bool = false
    var body: some View {
        VStack{
            Button {
                Task{
                        isLoading = true
                        try await Task.sleep(nanoseconds: 5_000_000_000)
                        isLoading = false
                }
            } label: {
                Group{
                    if isLoading {
                        ActivityIndicator()
                    } else {
                        Text("Click")
                            .foregroundColor(.white)
                    }
                }
                .padding()
                .frame(width: 240, height: 80, alignment: .center)
            }
            .background(RoundedRectangle(cornerRadius: 16).strokeBorder(Color.white, lineWidth: 2.5))
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.black.edgesIgnoringSafeArea(.all))
    }
}
```




```swift:ActivityIndicator.swift
struct ActivityIndicator: View {
    
    @State var currentDegrees = 0.0
    
    let colorGradient = LinearGradient(gradient: Gradient(colors: [
        Color.yellow,
        Color.yellow.opacity(0.75),
        Color.yellow.opacity(0.5),
        Color.yellow.opacity(0.2),
        .clear]),
        startPoint: .leading, endPoint: .trailing)
    
    var body: some View {
        Circle()
            .trim(from: 0.0, to: 0.85)
            .stroke(colorGradient, style: StrokeStyle(lineWidth: 5))
            .frame(width: 40, height: 40)
            .rotationEffect(Angle(degrees: currentDegrees))
            .onAppear {
                Timer.scheduledTimer(withTimeInterval: 0.05, repeats: true) { _ in
                    withAnimation {
                        self.currentDegrees += 10
                    }
                }
            }
    }
}

```

## 動作画面
![Sep-05-2022 21-44-33.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821152/a6912c52-6b69-6a48-4077-579c7fdc93ef.gif)
【Stable Diffusion】面倒事なしでいっぱいAI画像生成する【Google Colab】

# はじめに

この記事では今話題のStable DiffusionをGoogle Colabを利用して無料で使います。
所要時間は10分程度です。
一度初期設定が済めば、二回目からはほぼ作業なしで無限に生成が使えます。

### ちなみに
最も簡単にStable Diffusionを試す方法として[DreamStudio](https://beta.dreamstudio.ai/home)というサイトがあります。
Googleアカウントがあれば誰でもすぐに生成を試すことができるので、AI画像生成とは何か体験してみたい方にはとてもオススメです。
ただし無料アカウントでは200枚までしか生成できないため、それ以上に生成を行いたければこの記事などのような方法を使うことになります。
# 概要
## この記事を読んででできること
・colab上で画像がいっぱい作れる　です。

Stable DiffusionをGoogle Colabで動かす記事は既に沢山あります。

本記事ではそれを拡張して、Colab上で見やすく、任意枚数生成できるプログラムを紹介しています。

## 閑話：神絵の作り方
**（さっさと生成だけしたい人は読み飛ばして大丈夫です）**

突然ですが、AI画像生成は **ガチャ** です。
特にアニメ調kawaiiイラストを作る場合、最高レア率1%とか2%とかの **愉快なガチャ** です。
![gachagacha_ataranai.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519691/f8ee7f56-3540-e4d4-c70c-cfd00ad2788f.png)
どんなに良くできたプロンプト（絵の指示コマンド）を与えても、生成された画像の9割以上はどこかしら破綻した画像です。
生成画像のうちの **ほんの一握り** が、Twitterとかで称賛を集めているきれいな画像になります。

「こんなのAIで描けるの！？」「すごい、感動した！」

よくそんな感想を筆者も抱きますが、多分誰よりも感動しているのは投稿した本人じゃないかと思います。
一枚の神画像を描いてもらうまでにはその何十倍、何百倍もの失敗作が生まれているはずだからです。


まとめとして、最高のkawaii絵を手に入れるにはまず **生成ガチャをたくさん回すことが大事** になります。（ガチャの確率を上げる工夫も色々あるようですが）






# 本題

[Gigazine様のサイト](https://gigazine.net/news/20220824-stable-diffusion-google-colaboratory)に沿って手順2まで進めてください。
非常にわかりやすく書かれており、筆者もこのサイトを参考にして実行しました。

「3：Stable Diffusionで画像を生成する方法」 まで来たら、以下のコードをセルに打ち込んで実行します。

```python
import IPython
import matplotlib.pyplot as plt
import matplotlib.image as mpimg
import torch
import random

def create(prompt,iter):
  for i in range(iter):
    seed = random.randrange(0, 2147483647, 1)
    image = pipe(prompt,                     # プロンプト
             height=512,                 # 生成する画像の幅
             width=512,                  # 生成する画像の高さ
             guidance_scale=7.5,         # 画像とプロンプトの類似度 (0〜20)
             num_inference_steps=50,     # 画像生成に費やすステップ数
             generator=torch.Generator("cuda").manual_seed(seed), # 乱数シードジェネレータ
             )["sample"][0]
    img_name = str(i)+"_"+str(seed)+".png"
    image.save(img_name)
    img = mpimg.imread(img_name)
    plt.figure(figsize=(6, 6))
    plt.axis("off")
    plt.title(img_name)
    plt.imshow(img)
    plt.show()
```

実行しても特に何も表示されませんがそれでOKです。

以下が生成のコードです。これもセルに打ち込んで実行すると、今度は画像が生成され始めます。

```python
!rm *.png

#絵の生成プロンプト
prompt="STAR WARS made by studio GHIBLI, totoro style"

#生成枚数
iter = 10

create(prompt,iter)
```
prompt,iterを自分好みに変えて色々試しましょう。
このセルを実行するたびに新しく画像が生成され、前回の生成画像は消去されます。気に入った画像が出来たときは保存しましょう。
画像の保存なども[Gigazine様のサイト](https://gigazine.net/news/20220824-stable-diffusion-google-colaboratory)を参考にしてください。

このプログラムではseed値も保存しているのでこれをなんやかんやすればいろいろ便利に画像生成できるかもしれません。

# まとめ

結構時間がかかりますが、生成にあなたのコンピュータリソースは使われないので、ゲームをしている裏などで10連ガチャをいっぱい回しましょう！

ちなみにGoogle Colabは無料プランだとGPUの使用上限があるので、ガチャは引き放題ではないです。上限に引っかかったら大人しく数時間待ちましょう。


### 追記：プロンプトに関して


https://note.com/yamkaz/n/n9fd522bb012e#1c39d462-c024-453c-b04a-b5b2c034d966

https://zenn.dev/kuluna/articles/1c005c9b7475ec

上記以外にも筆者はいろいろなサイトや動画を参考にしています。
英語難しいよ～って方も、DeepLで翻訳したものぶち込むだけでまぁまぁいい感じになるはずです。
プロンプトに関してはドンドン情報が更新されていくと思うので、興味のある限り追ってみると楽しいと思います。

# 謝辞
この記事は技術サイトやTwitterなどで公開されている情報を参考にして作成しました。ありがとうございます。
[Typescript/Javascript] 特定の小数点位置で四捨五入する方法

javascriptの標準関数が整数にするための四捨五入しかなかったので拡張してみました

# 結論

```ts
function roundDecimal(value: number, decimalPoint: number) {
    const x = 1 / decimalPoint
    return Math.round(value * x) / x
}
```

# 解説
少数第二位までを四捨五入して表示したい場合
1 / 0.01とするとxに100が入る
valueに100をかけることで少数点第二位までが整数となり、小数点第三位が小数点第一位となることでMath.roundで四捨五入することができる
そのあと、かけた100で割ってあげることでふたたびもとの値に戻すことができる
【SwiftUI】横スライド式画像ビュワーを作成する

# はじめに
インスタのような横スライド式の画像ビュワーを作っていきます。
![RPReplay_Final1662379581_AdobeExpress.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/a9d620cd-662d-9bbb-0cdd-3a936279501d.gif)

# 実装
```swift:PhotosView
import SwiftUI

struct PhotosView<T: View>: View {
    private let width: CGFloat
    private let height: CGFloat
    private let content: () -> T

    init(width: CGFloat, height: CGFloat, @ViewBuilder content: @escaping () -> T) {
        self.width = width
        self.height = height
        self.content = content
    }
    var body: some View {
        TabView {
            content()
        }
        .tabViewStyle(.page)
        .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .interactive))
        .frame(width: width, height: height)
        .background(Color(UIColor.secondarySystemFill))
    }
}
```

# 使い方
```swift:ContentView
import SwiftUI

struct ContentView: View {
    var body: some View {
        PhotosView(width: 350, height: 250) {
            ForEach(0..<3) { index in
                Image("\(index)")
                    .resizable()
                    .scaledToFit()
            }
        }
        .cornerRadius(10)
    }
}
```

# 完成形
![Simulator Screen Recording - iPhone 12 - 2022-09-05 at 21.25.36.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/0a579c4d-63fd-8242-a4d3-8d3687b7680a.gif)


# おわり
サンプル画像は最近流行りのStable Diffusionで作ってみました
【PHP基礎復習4】引き算②

[問題]
ユキさんは、あるアイドルグループのファンです。
そのグループは西暦A年に結成されました。現在は西暦B年ですが、今年で何周年でしょうか。

# コード
```PHP
 $input1= fgets(STDIN);
 $input2= fgets(STDIN);
 echo $input2 - $input1, PHP_EOL;
```

↓　2015、2022と入力

# 結果
```
7
```
【Java基礎】変数＆演算

# はじめに
最近Java基礎の研修を受けました。学生時代にJavaを授業で習って基礎は身につけていたのですが、忘れていた内容もあったので備忘録として書き残してみます。

この記事では、**Javaの基礎的な内容に関してまとめていきます**。
今回は**変数**と**演算**です。



# 変数
変数とは、**データを入れる箱**のようなものです。

## 変数の宣言と代入
`int point;`のように`型名 変数名`と宣言します。
代入するには、`point = 1;`のように`変数名 = 代入する値;`と記述します。
宣言時に`int point = 1;`というように値を代入して宣言することも可能です。

また、型名の前に`final`と付けると定数になります。
```java:定数の例
int point = 1;
final int finalPoint = 1; // 定数に初期値を与える

point = 10; // 正しく代入できる。
finalPoint = 10; // 定数に値を代入しようとしているため、コンパイルエラー
```

## 変数の型
Javaには**基本データ型**が用意されています。
| 基本データ型 | 値 |
|:-|:-|
| boolean  | true or false  |
| char  |  16ビットUnicode文字 \u0000～\uFFFF, "あ", "1"  |
|  byte | 8ビット整数 -128～127  |
| short  | 16ビット整数 -32,768～32,767  |
| int  |  32ビット整数 -2,147,483,648～2,147,483,647 |
| long  |  64ビット整数 -9,223,372,036,854,775,808～9,223,372,036,854,775,807 |
|  float | 32ビット単精度浮動小数点数  |
|  double | 64ビット倍精度浮動小数点数  |

基本データ型とは別に**ラッパークラス**というものもあります。
ラッパークラスとは、基本データ型の値を持つことができ、様々な便利なメソッドを用意したクラスのことです。
文字列を持つことのできる`String`型も正確にはStringクラスです。
| 基本データ型 | ラッパークラス |
|:-|:-|
| boolean  | Boolean  |
| char  |  Character |
|  byte | Byte  |
| short  | Short |
| int  |  Integer |
| long  |  Long|
|  float | Float |
|  double | Double |


## 変数名
変数の命名では以下のことに気をつけましょう。
* 数字は2文字目から利用できる。
* 利用できない変数名（予約語）がある。
* 大文字と小文字は区別される。

| 利用できない例 | 利用できる例 |
|:-:|:-:|
|  1name | name1  |
|  2point | point2  |
| int  | intValue(intvalue)  |
| new  | newCase(newcase)  |
| do  | doGet(doget)  |

また、以下のようなJava特有の慣習も存在します。
* 変数名は小文字で始め、単語の区切りを大文字にする。
* 日本語や_,$などの一部の記号も利用できる。ただし、通常は英数字のみを利用する。
* 変数には意味のある名前をつける。



# 演算
Javaでは他の言語と同じように演算を行うことができます。
```java:演算例
int a = 3;
int b = 2;
String hello = "Hello";
String world = "World";

System.out.println(a + b); // 5 (加算)
System.out.println(a - b); // 1 (減算)
System.out.println(a * b); // 6 (乗算)
System.out.println(a / b); // 1 (除算)
System.out.println(a % b); // 1 (剰余)
System.out.println(hello + world); // HelloWorld (文字列結合)
```

演算の際には演算に使う変数の型によって演算結果の型も変わるので注意が必要です。
| 値1 | 値2 | 演算結果 |
|:-:|:-:|:-:|
| int  |  int | int  |
| int  | double  | double  |
| double  |  double | double |

## インクリメント／デクリメント演算子
インクリメント／デクリメント演算子は、演算子をオペランドの前後いずれに置くかによって処理が異なります。**x++は代入した後にインクリメント**しますが、**++xは代入する前にインクリメント**します。
```java:インクリメント例
    int x = 1;
    int y = x++;
    System.out.println("yは" + y);   // 結果：yは1
    int a = 1;
    int b = ++a;
    System.out.println("bは" + b);   // 結果：bは2
```

# まとめ
変数も演算も基本的には他の言語と変わりません。ただ、クラスの考え方などが関わってくることもあるのでJavaの良さを意識していくことが大切です。
MDB5でformのinputでborderが出ない時の対処

# 概要
MDB5でformのinputでborderが出ない時にborderを出す備忘録

# 対象
MDB公式（Material Design for Bootstrap v5）
https://mdbootstrap.com/

# 問題
公式サイトの通りにInputフィールドを下記だけ入れるとinputのborderが消える
```html
<div class="form-outline">
  <input type="text" id="form12" class="form-control" />
  <label class="form-label" for="form12">Example label</label>
</div>
```
期待するもの↓
![スクリーンショット 2022-09-05 20.53.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72774/73e3df13-57d1-8389-d6d0-dea3e356651b.png)


実際になるもの↓
![スクリーンショット 2022-09-05 20.52.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72774/0b8c2c65-fa02-b5c5-1771-276ffc47c283.png)


# 対応
実は公式のInputの一番下に書いてあった
動的要素やサイズ変更があれば、下記スクリプトを実行する

```js
document.querySelectorAll('.form-outline').forEach((formOutline) => {
  new mdb.Input(formOutline).update();
});
```

参照：
https://mdbootstrap.com/docs/standard/forms/input-fields/#section-dynamic-input-initialization
プログラマ同士で話していると分からない概念や用語も出てくる


- プログラマ同士で話していると分からない概念や用語も出てくる。時にはまあそんなものだと受け流す。時には興味を惹かれて質問する。
- 仕事を頑張ると高確率で周りに認められる。プライベートで頑張ってもそうとは限らない。たとえば絵を描いて評価を受けるのは大変だ。だからやはり仕事には人間に必要なものの多くが揃っている。
- 当たり前のように知らない用語を使うのは控えたい。書き方A「最近Focus to Doを使ってる」 書き方B「最近 Focus To Do というポモドーロ・テクニック用のMacアプリを使っている」
- 身近な場所がホコリだらけになっていないか？ スターバックスのドリンクカウンター前のボードがホコリで汚れている。本当に店員さんたちの目の前のボードなのだが、向きはお客さんに向いているのだ。毎回ドリンクを受け取るたびにそれを指摘しようか迷って結局やめる。
- 猛烈に仕事にエネルギーを注ぎ込んで困難を克服しプロジェクトの成功を祝いたい。
- 僕は38歳。自営業で10年。ひとつの企業で4年。もうひとつの企業で1年。自営業じだいはゆるゆるしていたのでちゃんとしたプログラマ歴としては7年程度ぐらいしかないんじゃないだろうか。それでもちゃんと仕事は出来る。自分は案外賢いのかも知れないと鼻がでかくなる。
- スマホ用のタイムロッキングコンテナはもう魂の友達みたいな感じだ。持ち歩くと非常に心が落ち着く。
- 文字に対する憎悪。AmazonPrimeで奄美大島の映像を眺めてリラックスしている。だがたまに文字が入る。文字がひとつでも表示されると意識が文字に吸引される。文字はやはり意識に膨大なエネルギーを消費させるようだ。文字が憎い。文字が全くないことには価値があると思う。
- 悩みが少ないのはスコープが狭いのではないだろうか。
- 断言できないから話すのが遅くなる。
- キーボード操作出来ないMacのアプリケーションに憎しみを感じる。
- 私は多用な欲望のおもちゃ箱。
- 小説を読むのことはものすごく重要だと感じる。ただ理由は分からない。
- 夜中にふと目覚める時は「まだ死にたくない！」という思いがほとばしる。別にまだ死ぬ予定もないのだが。たぶんソファで寝てしまっているので無呼吸症候群みたいになっているのだと思う。
- ブログを書くのは遺体を墓に埋めることに似ている。もう二度と蘇ってきませんように。
- スターバックスにもオシャレじゃない人はいる。
- Kindleと紙の本の違いは言葉では語り尽くせない。ビデオ通話と対面の違いも言葉で語り尽くせない。
- ブログを書くこと、読書、瞑想の共通点は知へのアクセスだ。
- 人に伝えたいことは声を大にして言ってみてはどうだろうか。反応は世間に任せるとして。
- 自分の呼吸の数をカウントしながら読書している。案外成り立つものだ。むしろ理解度が上がっているかもしれない。

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# Twitter

https://twitter.com/YumaInaura
メモアプリ開発メモ②　MySQLに「問いのリスト」を登録

# 前回までの道のり
その①はこちら→https://qiita.com/pothos/items/7801daffc504ad85f475

「哲学的疑問は一つ浮かべば次々に浮かんできてしまうので、メモを樹形図状に整理したい」
「マインドマップに書きこまれる条項を"問い"というカテゴリーのみに絞って考えるとどうなるか」という思索を起点にメモアプリの開発を(Node.jsについて習ったことの復習も兼ねて)行うことにしました。今回はその経過報告の第二回です。

今回はひとまずNode.jsと連携させるための仮のデータベースを作ってみました。データベースはMySQLで作っていきます。
# どんなデータを登録していったか
```
CREATE DETABEASE Q_list;

CREATE TABLE questions (
    id CHAR(4)  NOT NULL,
    /*↓問いの概要。小見出し*/
    smallQ CHAR(30)  NOT NULL,
　　/*↓もう少し長く書き残しておきたい場合の詳細メモ。クリックで全体表示される*/
    largeQ CHAR(200) ,
    dateLog DATE ,
    PRIMARY KEY(id)
);
```
まずは問いをメモとして登録するのに最低限のカラムを作りました。ここでしかし、試しにデータを登録してみる段となって、「問いのカテゴリーやタグもあると便利だな」と気づきました。
焦らず追加していきます。

```
ALTER TABLE questions ADD(category_1 CHAR(15),category_2 CHAR(15)) ;
```
これで計6つのカラムが完成。早速データを追加していきましょう。
```
INSERT INTO questions VALUES 
 (1, 'なぜ勉強せねばならないのか',
'念頭にあった問い。なぜ自分がこの問いに行き着いたかの来歴までも射程に入れて考えたい
',
'2022-09-05','学問','倫理'),
 (2, '生きているならば既に勉強している？',
'勉強が有用だとしても、その効用は勉強以外から得られないのだろうか',
'2022-09-05','学問','条件'),
 (3, 'どんな状況でそれが言われるか',
'そもそも誰がどんな時に勉強をせよ、とけしかけるのか',
'2022-09-05','学問','いつ(WHEN)'),
(4, '生きているならば既に勉強している？',
'人間、そもそも生きていれば常に多少なりとも勉強している状態にあるのではないか',
'2022-09-05','学問','条件'),
 (5, 'なぜ「すべきこと」をすべきか',
'勉強は為すべき行為だと結論が出たとしても、そもそもなぜ倫理的に正しくて、目的に適ったことをしなければならないのか',
'2022-09-05','学問','倫理');
```
試しにsmallQをセレクト。問題なく表示されます。良い感じ！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2822374/51f1fab9-2a2e-44a6-68a1-bcbb43b5cf44.png)

# 次なる道は
「常人が一足で跨いで超える段差を死ぬ程長いスロープでゆっくり超える」者、常に「長さ二光年のスロープ」を登ることでしか成長できないタイプの私。そんな私にとっては、今回行った単純操作による達成すらも十分な進歩です。　次回はいよいよNode.jsとMySQLをつないでwebページにSQLデータを表示できるようになることを目指します(できればwebページからデータを変更・修正できるところまでも行きたい！)。

# 浮上してきた学習課題
今の所「問いをRDBで管理し、一覧で表示できるようにする」が当座の目標です。が、最終的には「問い同士の関係性を階層型データベースで管理」することが必要になってくるでしょう(アプリの性質上)。また、「異なるユーザー同士が管理している各データ同士を関係づける」といった(初心者の自分からすると)死ぬ程保守の面倒そうな機能も必要になってくるかもしれません。。道行きは険しい!

この件に関しては下に載せた『SQLアンチパターン』が導きとなってくれそうです。もう少しデータベースについての勉強が必要ですね。

https://www.oreilly.co.jp/books/9784873115894/

それでは今回はここまで。GOODNIGHT WORLD!!
【PHP基礎復習3】掛け算

[問題]
ユキさんは、スーパーでアルバイトをしています。
時給A円でB時間働くと、何円お給料をもらえるでしょうか。

# コード
```PHP
$input1= fgets(STDIN);
$input2= fgets(STDIN);
echo $input1 * $input2, PHP_EOL;
```

↓　990、5と入力

# 結果
```
4950
```
Pay Attention To 生成モデル

# このページについて
GPTに代表される生成モデルの主要論文を備忘録も兼ねてまとめます。

# 言語モデルそのもの系

- [Language Models are Few-Shot Learners](https://arxiv.org/abs/2005.14165)
- [Scaling Language Models: Methods, Analysis & Insights from Training Gopher](https://arxiv.org/abs/2112.11446)
- [Unsupervised Neural Machine Translation with Generative Language Models Only](https://arxiv.org/abs/2110.05448)
- [Training Compute-Optimal Large Language Models](https://arxiv.org/abs/2203.15556)
- [Flamingo: a Visual Language Model for Few-Shot Learning](https://arxiv.org/abs/2204.14198)
- [JURASSIC-1: TECHNICAL DETAILS AND EVALUATION](chrome-extension://efaidnbmnnnibpcajpcglclefindmkaj/https://uploads-ssl.webflow.com/60fd4503684b466578c0d307/61138924626a6981ee09caf6_jurassic_tech_paper.pdf)


# ユースケース系

- [Competition-Level Code Generation with AlphaCode](https://arxiv.org/abs/2203.07814)
- [Training language models to follow instructions with human feedback](https://arxiv.org/abs/2203.02155)
- [WebGPT: Browser-assisted question-answering with human feedback](https://arxiv.org/abs/2112.09332)
- [Evaluating Large Language Models Trained on Code - arXiv](https://arxiv.org/abs/2203.02155)

# 前提知識系

- [Attention Is All You Need](https://arxiv.org/abs/1706.03762)
node.js child_process spawn を async queueで順番待ちさせる方法

1. node.jsで
2. 時間のかかるローカル処理。。例えばStable Diffustionとか・・重々しいバッチ処理とかをchild_processで処理しているが、
2. ローカルの処理はspawnで非同期にしているので
3. これをasync queueで待ち行列にしたい。

## やりかた

```javascript
const { spawn } = require('node:child_process')
const async = require('async')

const heavyTask = (data) => {
  return new Promise((resolve) => {
    // なんかでかくて重い処理、例えばrm -rf / など。
    const result = spawn('very_heavy_task.sh', [])
    // 処理が終わった時に呼ばれる
    result.on('close', (code) => {
        resolve()
    }
  }
}

const workQueue = async.queue(heavyTask)
workQueue.push({data})
```

重い処理全体をPromise()で包んで、処理が終わったハンドラ内でresolve()するのがポイント。
【PHP基礎復習2】引き算

[問題]
ユキさんは、400ページある本を読んでいます。
昨日はAページ、今日はBページ読みました。残りは何ページか出力させなさい。

# コード
```PHP
$input1 = fgets(STDIN);
$input2 = fgets(STDIN);
echo 400 - $input1 - $input2, PHP_EOL;
```

↓　110、87と入力

# 結果
```
203
```
Pythonでtar.gzファイルを扱う【tarfile】

# はじめに
Pythonでtar.gzファイルを圧縮や展開する際に最低限必要なコードをまとめてみました。

# sampleのフォルダ構成
サンプルコードは以下フォルダ構成で動かしてみました。

> ├ sample.py
> └ target
> 　  ├ text1.txt
> 　  ├ text2.txt
> 　  └ text3.txt

# tarfileインポート

```python
import tarfile
```

# tar.gzファイルに圧縮

```python
with tarfile.open('target.tar.gz', 'w:gz') as tar:
  tar.add('target')
```

# tar.gzファイルを展開

```python
with tarfile.open('target.tar.gz') as tar:
  tar.extractall()
```

# 一部ファイルのみ展開

```python
with tarfile.open('target.tar.gz') as tar:
  tar.extract('target/text1.txt')
```

# tar.gzファイル内のファイルを確認
``` python
with tarfile.open('target.tar.gz') as tar:
  print(tar.getmembers())
```

# 最後に
読んでいただきありがとうございます。

今回はPythonでtar.gzを扱う際の最低限のことしかまとめていませんが、誰かのためになれば幸いです。

# 参考
https://docs.python.org/ja/3/library/tarfile.html
Notion APIでページの中身を取得してみるメモ #notion


前回書いたNotion APIアクセスメモの続きです。

https://qiita.com/n0bisuke/items/b0cf0c416aa8e46bdb1b


ページから情報を一括で取得できると嬉しかったのですが、ぱっと調べた感じだとそれっぽいものがなく、ページも一つのブロックとして捉えて、ブロックの中の要素を取得するみたいなやり方になるっぽい雰囲気でした。

## ページID(BlockID)

ページIDといいつつブロックIDになるみたいです。

`https://www.notion.so/xxxxxxxxxxxxxxxxxxxxx`というURLの場合は最後のスラッシュ以下がページIDに

`https://www.notion.so/API-xxxxxxxxxxxxxxxxxx`などアルファベットがURLに入ってる場合はハイフン以下がページIDになっている模様でした。

こんな感じでページタイトルに英数字が入ってるとその英数字がURLに反映される仕様っぽいですね。

> ![スクリーンショット 2022-09-05 19.56.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/556184d3-9c28-0abc-c09b-34bdb7f7c75e.png "スクリーンショット 2022-09-05 19.56.34.png")

## 2段階でAPIアクセス

`notion.blocks.children.list()`でそのページの中の要素一覧とIDを取得して、`otion.blocks.retrieve()`でIDを指定して中身を取得するといった流れです。

```js
const { Client } = require("@notionhq/client")

const notion = new Client({
    auth: ``,
})

const main = async () => {
    const pageId = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
    
    const response = await notion.blocks.children.list({
        block_id: pageId,
        page_size: 50,
    });
    console.log(response);

    const blockId2 = response.results[1].id;
    const response2 = await notion.blocks.retrieve({
        block_id: blockId2,
    });
    console.log(`----`)
    console.log(response2.paragraph);
}

main();
```

## 結果

```bash
//省略

{
  rich_text: [
    {
      type: 'text',
      text: [Object],
      annotations: [Object],
      plain_text: 'こんばんわ、よろしくお願いします。',
      href: null
    }
  ],
  color: 'default'
}
```

> ![スクリーンショット 2022-09-05 19.56.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/556184d3-9c28-0abc-c09b-34bdb7f7c75e.png "スクリーンショット 2022-09-05 19.56.34.png")

無事に`こんばんわ、よろしくお願いします。`の文字が取得できています。
JavaScript setInterval()とsetTimeout()の違い

JavaScriptのsetInterval()とsetTimeout()の違いについて，学習した内容を整理した．

### 構文と機能
```javascript
setInterval(関数名, 処理間隔) //指定したミリ秒間隔で関数を実行し，値を返す．
setTimeout(関数名, 処理間隔) //指定したミリ秒後にで関数を1度だけ実行し，値を返す．
```
[setInterval()](https://developer.mozilla.org/ja/docs/Web/API/setInterval)は指定したミリ秒毎に関数を繰り返し実行するのに対して，[setTimeout()](https://developer.mozilla.org/ja/docs/Web/API/setTimeout)は指定したミリ秒後に1度だけ関数を実行する．
※それぞれ[clearIntercal()](https://developer.mozilla.org/ja/docs/Web/API/clearInterval), [clearTimeout()](https://developer.mozilla.org/ja/docs/Web/API/clearTimeout)で処理を停止することができる．参考まで．


### javascriptサンプルコード　カウントアップ処理
1秒毎にカウントアップ処理（今回は1秒毎に+1した数値を出力）するコードをsetInterval(),setTimeout()それぞれについて作成．
#### setInterval()を用いて実行する場合
```javascript
let num1 = 0;
$(function() { 
    function countNum1() {
      num1++;
      console.log(num1);
    };  //+1する関数
    setInterval(countNum1, 1000); //1秒毎にcountNum1()を実行する．
});
```
setInterval()により1秒毎にcountNum1()が実行され，カウントアップ処理（1秒毎に+1した数値を出力）される．

#### setTimeout()を用いて実行する場合
```javascript
let num2 = 0;
$(function countUp() {
    function countNum2() {
      num2++;
      console.log(num2);
    }
    setTimeout(function() {
      countNum2();
      countUp();  //setTimeout()でcountUp()を再帰的に実行する
    }, 1000);
});
```
setTimeout()内でcountUp()を再帰的に実行することにより，1秒毎にcountNum2()が実行され，カウントアップ処理（1秒毎に+1した数値を出力）される．

### 参考
>https://developer.mozilla.org/ja/docs/Web/API/setInterval
>https://developer.mozilla.org/ja/docs/Web/API/setTimeout
>https://www.sejuku.net/blog/24425
【PHP基礎復習1】割り算の余り

[問題]
入力値AをBで割った余りを出力する。（A>B)
余りが0の場合も0と出力されるようにする。


# コード
```PHP
 $input1 = fgets(STDIN);
 $input2 = fgets(STDIN);
 echo $input1 % $input2, PHP_EOL;
```
↓　17、5を入力
# 結果
```
2
```
githubのパスワード変更後にpushすると"remote: Invalid username or password."とエラーが発生した

はじめに
--
githubからpersonal access tokenの有効期限が近いですよ！とメールが来ていたのでメール内のリンクから新しくtokenを再生成しました。
再生成後にgithubへpushをしようとすると、下記エラー文が表示されてpushができなくなりました。
~~~git
~ % git push origin ブランチ名
remote: Invalid username or password.
fatal: Authentication failed for 'https://github.com/~
~~~

有効期限が近づいてtokenを再生成する度に発生するエラーですが、数ヶ月後にまたpushできなくて一瞬ビビる将来の自分が容易に想像できるので、エラーの対応をqiitaに備忘録として残します。

対応
--
下記のようにターミナルでgitの名前を再設定します。

~~~
git config --global user.name ユーザ名
#ユーザー名はgithubのユーザー名です
~~~

そうすると、次回のpush時にユーザー名とパスワード（再生成した際に表示された文字列）を入力すればpushできるようになります。

~~~
~ % git push origin ブランチ名
Username for 'https://github.com': ユーザー名
Password for 'https://ユーザー名@github.com': パスワード（セキュリティのため文字を打ち込んでも表示されないようになってます）
~~~

こんなに簡単な手順でも毎回急にpushできないのは初学者の自分としてはビビります。

それにしても名前は変更してなくてpasswordが変わってるのになぜ名前を再設定しないといけないのだろうか。。
git config関連も勉強してみよう。

参考
--
https://reasonable-code.com/github-invalid-error/
scikit-learn データセット分割の覚え書き

# この記事の内容
scikit-learnに付属しているデータセット分割法の覚え書きです。

- ホールドアウト法
- K-分割交差検証（KFold）
- 層化K-分割交差検証（Stratified KFold）
- グループ付き交差検証（Group KFold）
- 時系列データ分割（Time Series Split）

# データセットのインポート
scikit learnのデータセットとして利用できるiris datasetを使用します。
```python
import pandas as pd
from sklearn.datasets import load_iris

iris = load_iris()
df_iris = pd.DataFrame(data=iris.data,columns=iris.feature_names)

```
# ホールドアウト法
単純にデータセットを訓練データとテストデータに分割します。（デフォルト=7:3）
```python
from sklearn.model_selection import train_test_split

X_train, X_test, y_train, y_test = train_test_split(df_iris,iris.target)

#第１引数：データセット、第２引数：データセットの結果ラベル
#追加引数(train_size = 0.6,　random_state=0)
```
# K-分割交差検証（KFold）
ホールドアウト法では学習に利用されないデータがある。訓練データとテストデータの組み合わせをK個分作成し、それぞれ学習・予測を行い、モデルの精度を包括的に見る。

```python
from sklearn.model_selection import KFold

n_split=3
kf=KFold(n_split,shuffle=True,random_state=0)
split_ndx=[[] for i in range(n_split)]

for fold,(train_ndx,test_ndx) in enumerate(kf.split(iris.data,iris.target)):
    split_ndx[fold]=[train_ndx,test_ndx]
```


# 層化K-分割交差検証（Stratified KFold）
特定の説明変数におけるある要素の度数が極端に低い場合や要素の種類が多い場合に使用します。
![スクリーンショット 2022-09-05 19.18.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607137/3d3682e8-247b-683d-4ea5-f5b41c8bcab9.png)
※目的変数→説明変数（画像は間違えています。）
```python
from sklearn.model_selection import StratifiedKFold

n_split=3
kf = StratifiedKFold(n_split,shuffle=True,random_state=0)
split_ndx=[[] for i in range(n_split)]

for fold,(train_index, test_index) in enumerate(kf.split(iris.data,iris.target)):
    split_ndx[fold]=[train_ndx,test_ndx]
```

# グループ付き交差検証（Group KFold）
学習データとテストデータが特定の説明変数において同じ要素を持たないように分割する。irisデータセットに対してこの分割法が有効とは思いませんが、あくまでも使い方として表示します。
![スクリーンショット 2022-09-05 19.26.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607137/eea75e0a-3e54-93b6-b463-4594178b4252.png)
※目的変数→説明変数（画像は間違えています。）

```python
from sklearn.model_selection import GroupKFold

n_split=22
kf = GroupKFold(n_split)
split_ndx=[[] for i in range(n_split)]

for fold,(train_index, test_index) in enumerate(kf.split(df_iris[['sepal length (cm)','sepal width (cm)']], iris.target,df_iris['petal width (cm)'])):
    split_ndx[fold]=[train_ndx,test_ndx]
```

# 時系列データ分割（TimeSeriesSplit）
データが時系列を持っている場合に使用できます。今回のirisデータセットは時系列を持たないため、あくまでも使用法という名目でコードを示します。
![スクリーンショット 2022-09-05 19.41.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607137/b60de389-9686-c704-3a5f-8d64d1358761.png)
```python
from sklearn.model_selection import TimeSeriesSplit

n_split=15
tscv = TimeSeriesSplit(n_split)
split_ndx=[[] for i in range(n_split)]

for fold,(train_index, test_index) in enumerate(tscv.split(X)):
    split_ndx[fold]=[train_ndx,test_ndx]
```

# 参考
詳しくはこちらのサイトを参照ください。

https://blog.amedama.jp/entry/2018/08/25/174530

https://www.guruguru.science/competitions/13/discussions/cc7167cb-3627-448a-b9eb-7afcd29fd122/

https://note.com/super_yes_man/n/n98065ab44bb2
QCDのQを「品質」ではなく「顧客満足度」としましょう

# これは何？
QCDのQを「顧客満足度」として捉えることで、より深く開発方針が検討できるんじゃないかなという提案記事です。
単にQを「品質」として捉えていると、テストを増やす/減らすということや、バグを少なくするといった形で考えがちになっちゃいます。
Qを「顧客満足度」とすることで、「障害からの復旧時間が多少長くても我慢してもらおう」とか「ここで不具合を出すと顧客満足度に著しい影響があるからトレードできない」とか、より深く考えられていいかもね。という話です。

# QCDとは？
QCDは製造業で生まれた開発に関する指標です。
一般的には
 * Q : 品質
 * C : コスト
 * D : デリバリー（納期）

を表していて、QCDのいずれかに手をいれると、他の2つに影響しますよ。という関係性を示しています。
例えば品質を上げるためには、コストを増やしたり、納期を伸ばしたりしないといけませんよ。という感じですね。
F(Flexibility)を加えてQCDFとしたり、S(Scope)、S(Safety)を加えてQCDSとすることもあるようです。

# QCDは本当にトレードオフなのか？
QCDの関係はソフトウェア開発において通用するのか？という議論はよくされてきました。
私個人の考え方としては、基本的に通用しないものだと思っています。
@t_wadaさんの「質とスピード」で語られていることに、同意します。
[![thumbnail](https://files.speakerdeck.com/presentations/0d45756f147d45229020083eb2dd139c/slide_38.jpg)](https://speakerdeck.com/twada/quality-and-speed-2022-spring-edition?slide=39)
出典：質とスピード（2022春版、質疑応答用資料付き）/和田卓人様

このように、こと内部品質に関して言えば、原則としては品質は制御変数ではないと思えます。
内部品質に閉じない世界で考えたとしても、バグの多い少ないはコントロールできないので、QCDにおいてQを操作するときは
「テストを増やす/減らす」というふうに捉えられがちです。
これではQのトレードオフではなく、テストにかける工数のトレードオフですね。
そもそも「品質」とは多角的なものであり、バグの有無だけで考えるのは無理があります。
なので、「品質」という曖昧な言葉を使うのはやめたほうがよいでしょう。

# Qを顧客満足度とすると？
じゃあどうすればいいんだよ？って話ですが
個人的には「品質」ではなくて「顧客満足度」としてあげれば、ある程度品質の多様性に対応できるのではないかと思います。
「顧客満足度」が上がったり下がったりする要因を考えてみましょう。
 * 障害の発生頻度
 * 障害によるビジネス影響
 * 障害からの回復スピード
 * UI/UXの成熟度
 * 口コミの質/数
 * などなど…

どうでしょう？
Qを「顧客満足度」として考えてあげるだけで、少し幅広く品質について考えることができませんか？
これであれば多少はトレードオフできるところを探せませんか？
もしくは「品質」をトレードオフにすることの重みを実感できませんか？
「障害からの回復スピード」を多少下げてでも、コストを節約したい。と考えて自動テストの実装を抑えたり（それでいいのかは別として）
「障害によるビジネス影響」を下げるために、納期を伸ばしたり。とか考える事ができると思います。
まぁQCDを考えるときって大体開発がにっちもさっちもいかない時だと思うので
削れる場所捜索ツールみたいになってるかもしれませんが、簡単に「品質」や「テスト」を削ろうと言わせないだけの重みは出ると（個人的には）思います。

というわけで、「QCDのQ」は「顧客満足度」にする。というアイデア。
ぜひ使ってください。
gitの差分について

今まで、svnを使ってプログラムを管理していたのですが、開発したり、検証をしていくときにgitを使うと、検証段階のファイルを管理したり、以前の環境に戻したりするときにとても便利なことを知りました。gitのdiff確認について使ってみてよかったものをまとめてみたいと思います。

# git diff
```git diff```コマンドは、変更前後の変更点を上下で出力してくれるので、小規模の変更は、```git diff```で確認しています。

```git
// ワーキングエリアでの比較
$ git diff

// ファイルのみ
$ git diff --name-only

// ステージング上での比較
$ git diff --cached

// commitした者同士
$ git diff 変更前のSHA..変更後のSHA
```

# git difftool
git上でデフォルトで使用するdiff toolを設定して、そのtoolを使用して差分を確認します。使用するtoolの設定は、.gitconfigに記述し、使用します。私は、windowsを使用しているので、winmergeをdiff toolとして、使用しています。workingエリアに置かれているファイルを確認するときに使用しています。設定方法は、[こちら](https://qiita.com/yutaka_m/items/3cab84fdb1da2ecef337)の記事に書いておきました。
winmergeをして変更したディレクトリとファイルの差分を表示し、差分を横並びに表示してくれるので、見るのが簡単で便利です。
```git
$ git difftool -h
usage: git difftool [<options>] [<commit> [<commit>]] [--] [<path>...]

    -g, --gui             use `diff.guitool` instead of `diff.tool`
    -d, --dir-diff        perform a full-directory diff
    -y, --no-prompt       do not prompt before launching a diff tool
    --symlinks            use symlinks in dir-diff mode
    -t, --tool <tool>     use the specified diff tool
    --tool-help           print a list of diff tools that may be used with `--tool`
    --trust-exit-code     make 'git-difftool' exit when an invoked diff tool returns a non-zero exit code
    -x, --extcmd <command>
                          specify a custom command for viewing diffs
    --no-index            passed to `diff`
```
bcrypt_ext.bundleインストール時にmach-o file, but is an incompatible architecture (have (x86_64), need (arm64e))のエラー発生

# 事象
アプリの動作確認時に、エラー画面が表示され、ターミナルに以下のエラーが表示された。
```
dlopen(/Users/arakijun/.rbenv/versions/3.1.2/lib/ruby/gems/3.1.0/gems/bcrypt-3.1.18/lib/bcrypt_ext.bundle, 0x0009): tried: 

'/Users/arakijun/.rbenv/versions/3.1.2/lib/ruby/gems/3.1.0/gems/bcrypt-3.1.18/lib/bcrypt_ext.bundle' (mach-o file, but is an incompatible architecture (have (x86_64), need (arm64e))) - 

/Users/arakijun/.rbenv/versions/3.1.2/lib/ruby/gems/3.1.0/gems/bcrypt-3.1.18/lib/bcrypt_ext.bundle
```
`bcrypt_ext.bundle`の`x86_64`がインストールされているが、`arm64e`が必要であるというもの。

# 解決方法
以下のように、インストールし直すことで、改善した。
```
gem uninstall bcrypt を実行
gem install bcrypt --platform=rubyを実行
Gemfileにgem 'bcrypt', '~> 3.1.11'を記載
bundle installを実行
```
Blenderファイルの分類方法メモ

## 概要

Blenderファイルを特徴別に分類する方法のメモです。macOSで確認しています。Windowsでは、アドオンでos.symlinkを使うため、管理者で実行するか[ユーザーにSeCreateSymbolicLinkPrivilegeの権限を与える](https://kokufu.blogspot.com/2018/03/symbolic-link-privilege-not-held.html)必要があります。

### 要点

- 対象のBlenderのファイルは1つのフォルダに入れる。
- 各Blenderファイルに特徴などの情報をテキストで持たせる。
- テクスチャはパックする。
- 特徴別にツリー状のフォルダ構成でBlenderファイルのシンボリックリンクを管理し、ドリルダウンで絞り込みできるようにする。

## 実現方法

下記の機能を持つアドオンを試しに作ってみました。

- 情報追加（`Add Info`）
- URL表示（`Open URLs`）
- タグ追加（`Add Tag to other`）
- リンクツリー（`Link Tree`）

**アドオンのパネル**

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13955/de17b252-ff53-20be-0fa2-4fbe0e8f10a5.png" width="300">

### 情報追加（`Add Info`）

ボタンを押すと、下記のような情報を保持するTextオブジェクトを作成します。4行ほどのテキストのエリアをScriptingワークスペースに用意しておくと便利です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13955/23d5f730-19d5-6fee-fbcb-ea042d61cf39.png" width="300">

- `url`には、httpで始まるクリップボードの文字列が入ります。
- `date`には実行日が入ります。
- `author`と`tag`は空で作成されるので、適宜編集します。
- `tag`はスペース区切りで複数書けます。

### URL表示（`Open URLs`）

情報の`url`にある全サイトをブラウザで開きます。URLはスペース区切りで複数書けます。

### タグ追加（`Add Tag to other`）

ファイルダイアログが開くので、設定したいファイルを複数選んで[^1]`Add Tag to other`を押すと、それらのファイルの情報の`tag`に`newtag`の内容を追加します。
また、`@`で始まるタグを書くと、`author`に設定します。

[^1]: 現在開いているファイルは選ばないでください。

### リンクツリー（`Link Tree`）

`input`にある全Blenderファイルを分類してリンクツリーというものを作ります。作成場所は、`input`の1つ上の`link_tree`です。

たとえば、`test.blend`の`tag`が、`food lowpoly asset`のときは、`link_tree`以下は下記の構成になります。

```
─ etc ┬ asset ┬ test.blend
      │       ├ food ┬ test.blend
      │       │      └ lowpoly ─ test.bend
      │       └ lowpoly ┬ test.blend
      │                 └ food ─ test.blend
      ├ food ┬ test.bend
      │      ├ asset ┬ test.blend
      │      │       └ lowpoly ─ test.bend
      │      └ lowpoly ┬ test.blend
      │                └ asset ─ test.blend
      └ lowpoly ┬ test.bend
                ├ asset ┬ test.blend
                │       └ food ─ test.bend
                └ food ┬ test.blend
                       └ asset ─ test.blend
```

- 最上位にetcフォルダがあります。
- etcの中は、各tagのフォルダがあります。
- etc/assetの中に、test.blendがあります。このファイルがassetというtagを持つからです。
- 複数のtagがあると、フォルダがネストしていきます。ネストはtagの全順列が現れます。ネストしているので、tagで絞り込みできます。
- 15個のtest.blendは、シンボリックリンクです。

### 設定ファイルなど

tag情報などは、`input`の1つ上の`.link_tree.cache`にTOML形式でキャッシュします。
また、`input`の1つ上の`.link_tree.setting`に下記の設定を記述できます。
- first_set：etcの1つ上に移動させるものを指定します。first_onlyも対象です。
- first_only：最上位以外のフォルダを作成しません。

### その他

- ファイルにアニメーションがあると、`anim`というtagが自動で付加されます。
- ファイルにリグがあると、`rig`というtagが自動で付加されます。
- `author`を指定していると、最上位に`author`というフォルダが作成され、その中の`author`の値のフォルダにも入ります。

### 補足

ファイル名をtest_asset_food_lowpoly.blendにすれば、ダイアログで絞り込みできます。しかし、今回の方法だと、絞り込み時にタグの可視化ができたり、タグ以外の情報の管理もできるようになります。

以上
OpenAPI仕様書(Swagger)を書く時に参考にできるサイト

# そもそもopenAPI仕様書ってこんなものってのを理解する

- [OpenAPI (Swagger) 超入門 - Qiita](https://qiita.com/teinen_qiita/items/e440ca7b1b52ec918f1b)

# Swagger公式

サンプル見たりするのに使うかな。
正直見にくい。

- [OpenAPI Guide](https://swagger.io/docs/specification/basic-structure/)

# GitHubのドキュメント

これが一番使うかな。
`yaml`や`json`は階層構造になってて、どんどん深掘りしていける。
`components`配下の`parameters`オブジェクトで指定できる項目は？
`in`に指定できるコードは？
など検索できるのが良い。

- [OpenAPI Specification](https://github.com/OAI/OpenAPI-Specification/blob/main/versions/3.0.3.md)

# HTTPステータスコード一覧

APIですから、ステータスコードに意味をしっかり持たせたいですよね。
- [HTTP レスポンスステータスコード](https://developer.mozilla.org/ja/docs/Web/HTTP/Status)

# 個人的に参考にしたサイト

`components`配下の書き方、`$ref`での汎用性の持たせ方など、大変参考になりました。

- [OpenAPI Specification 3.0.3を使ったいい感じのCRUD APIのサンプルを作る](https://www.blog.danishi.net/2022/01/22/post-5758/)

# SwaggerとOpenAPI

`openapi: 3.0.3`
`swagger: 2.0`
どっちを書くかで思ったよりフォーマットが違ってくる。
なんか最近は`openapi`にしといた方が良さげなんかなあ。
仮想マシンやコンテナの練習をするための環境つくり試行

### はじめに
Linux 環境で仮想マシンやコンテナの練習をするための環境つくりを試行しましたので記録しておきます。
Raspberry Pi ×
AWS Lightsail ×
WSL2 〇


### Raspberry Pi での試行
Raspberry Pi Imager から Ubuntu Server 22.04 LTS をインストールしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/1d1d4f86-e239-29f0-a0a8-5d3b364f384c.png)

```
cat /etc/os-release
```
CPUがKVM仮想マシンに対応していませんでした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/59ec94d0-4d82-012b-72cc-4b2b960073d9.png)

### AWS Lightsail での試行
AWSクラウド環境でコストがかからないもので試してみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/29257ef0-9dca-08a9-7810-5a709185d941.png)

CPUがKVM仮想マシンに対応していませんでした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/3d959a74-e04d-89d7-b294-4d1b3b827e95.png)

### WSL2 での試行１

#### 実施したWinddowsの環境
OS：Windows 11 Home 64 ビット オペレーティング システム
CPU：Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz   1.80 GHz
RAM：16.0 GB


#### Microsoft Store から Ubuntu 22.04.1 LTS を入手してインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/9a01cdfc-99d8-38c4-bbfd-b20137c6a6d4.png)

#### GitHubからCentOS8 を入手してインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/81193a17-1cfa-b7a3-7674-5a20fa6cc135.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/46b96567-f17d-7f00-c8db-08a8d654fb71.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/abc6e051-9ce6-db4c-25b3-824da3edee9f.png)

#### Ubuntuの場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/19b097d5-b643-0c6b-58af-845c99063d9f.png)

```
$ lscpu | grep Virtualization
Virtualization:                  VT-x
Virtualization type:             full
```
CPUがKVM仮想マシンに対応していることを確認できました。

#### CentOSの場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/b8c3e4da-759a-97fd-e741-afe9305528e4.png)

```
$ lscpu | grep Virtualization
Virtualization:                  VT-x
Virtualization type:             full
```
CPUがKVM仮想マシンに対応していることを確認できました。