OmniAICreator/Qiita-1.07M huggingface dataset:
【SwiftUI】Qiitaのマークダウンで使えるnoteがかっこよかったので作ってみた

# はじめに
Qiitaのマークダウンで作れる↓を作ってみることにしました。

:::note info
あいうえお
かきくけこ
:::

:::note warn
あいうえお
かきくけこ
:::

:::note alert
あいうえお
かきくけこ
:::

これかなりかっこいいですよね

# サンプルアプリ
こんな感じのが作れます。
![スクリーンショット 2023-12-27 21.20.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/acf4cf87-a130-1bb4-2874-7791993fac19.png)

# 実装
```swift
import SwiftUI

enum QiitaNoteType {
    case info
    case warn
    case alert
}

extension QiitaNoteType {
    var systemName: String {
        switch self {
        case .info:
            return "checkmark.circle.fill"
        case .warn:
            return "exclamationmark.circle.fill"
        case .alert:
            return "xmark.circle.fill"
        }
    }
    
    var foregroundStyle: Color {
        switch self {
        case .info:
            return .green
        case .warn:
            return .yellow
        case .alert:
            return .red
        }
    }
}

extension Label where Title == Text, Icon == EmptyView {
    init<T: StringProtocol>(_ title: T) {
        self.init(title: { Text(title) }, icon: EmptyView.init)
    }
}

struct QiitaNoteLabelStyle: LabelStyle {
    let qiitaNoteType: QiitaNoteType
    
    func makeBody(configuration: Configuration) -> some View {
        HStack(alignment: .top, spacing: 10) {
            Text(Image(systemName: qiitaNoteType.systemName))
                .foregroundStyle(qiitaNoteType.foregroundStyle)
                .baselineOffset(5)

            configuration.title
                .frame(maxWidth: .infinity, alignment: .leading)
        }
        .padding(15)
        .background(qiitaNoteType.foregroundStyle.opacity(0.1), in: .rect(cornerRadius: 10))
    }
}

extension LabelStyle where Self == QiitaNoteLabelStyle {
    static func qiitaNote(_ type: QiitaNoteType) -> QiitaNoteLabelStyle {
        .init(qiitaNoteType: type)
    }
}
```

# 使い方
```swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Label("あいうえお\nかきくけこ")
                .labelStyle(.qiitaNote(.info))
            
            Label("あいうえお\nかきくけこ")
                .labelStyle(.qiitaNote(.warn))
            
            Label("あいうえお\nかきくけこ")
                .labelStyle(.qiitaNote(.alert))
        }
        .padding(20)
    }
}
```

# おわり
Labelを拡張して引数のiconを消してます。
iconはLabelStyleで追加してる感じですね
【備忘録】Next.jsのAppRouterでのAPIについて（Prismaを使用）

# 背景
Prismaを使ってDBを操作するのにNext.jsでAPIを使うため
``` :階層
|- app
    |- api
        |- create
        |   |- route.ts
        |- update
            |- route.ts
```
※以下prismaについては説明を省かせて頂きます
# 基本の形（諸説あり）
``` TypeScript:route.ts
import { NextRequest, NextResponse } from 'next/server'

export const GET or POST = async(req: NextRequest, res: NextResponse) => {
    try{
        return NextResponse.json({ message: "Success" }, { status: 200 })
    }catch(err){
        return NextResponse.json({ message: "Error", err }, { status: 500 })
    }
}
```
# 何かしらデータを送った時
※送り方は各々でお調べください
``` TypeScript:route.ts
import prisma from 'prismaClientの位置'
import { NextRequest, NextResponse } from 'next/server'

export const GET or POST = async(req: NextRequest, res: NextResponse) => {
    try{
        // ここにデータが入っています
        const body = await req.json()
        // idなどでwhereしたい場合に使えます
        const user = await prisma.user.findUnique({
            where: {
                id: body.id
            },
        })
        return NextResponse.json({ message: "Success", user }, { status: 200 })
    }catch(err){
        return NextResponse.json({ message: "Error", err }, { status: 500 })
    }
}
```

# まとめ
まだ完全に理解はしていませんがおおよそ使えるくらいにはなったと思い、備忘録として残して置きます。間違いやアドバイスなどあればお願いします。
64bit VBAでHex関数に2147483648以上のCurrencyを渡すと不正確な結果となる

# 内容

[Hex関数](https://learn.microsoft.com/ja-jp/office/vba/language/reference/user-interface-help/hex-function)に2147483648(2の31乗 =VBAの`Long`型 = 符号付き32bit整数の最大値+1)以上の値の`Currency`型の値を渡すと、本来の値より1大きい16進数表記の文字列となる。

# サンプルコード

```vb
Sub SampleCurrencyHex231226()
    Dim c As Currency, l As LongLong, d As Double
    c = 2 ^ 31 - 1
    l = 2 ^ 31 - 1
    d = 2 ^ 31 - 1
    
    Dim v As Variant
    For Each v In Array(c, l, d)
        Debug.Print TypeName(v), v, Hex(v)
    Next v
    
    c = 2 ^ 31
    l = 2 ^ 31
    d = 2 ^ 31
    
    For Each v In Array(c, l, d)
        Debug.Print TypeName(v), v, Hex(v)
    Next v
End Sub
```

## 結果
```text
Currency       2147483647   7FFFFFFF
LongLong       2147483647   7FFFFFFF
Double         2147483647   7FFFFFFF
Currency       2147483648   80000001 '<- 1 大きい
LongLong       2147483648   80000000
Double         2147483648   80000000
```

# 備考

そもそも[Hex関数](https://learn.microsoft.com/ja-jp/office/vba/language/reference/user-interface-help/hex-function)のページでは以下のように対応している値は`Long`型の範囲に制限されていることになっている。

> Hex(number)
必須の 数値引数 は、任意の有効な 数値式 または 文字列式です。

|number の値|	Hex の戻り値|
|:--|:--|
|-2,147, 483,648 〜 2,147, 483,647|	最大 8 桁の 16 進文字|
|Null|Null|
|空|ゼロ (0)|

実際、32bit VBAでは上記の表の通りの挙動(2147483648を指定するとエラー)となる。
手元で試した限り、64bit VBA環境であれば`LongLong`(符号付き64bit整数)の範囲までは有効のようだった。

## なぜ`Currency`という通常の整数ではない型を`Hex`関数に渡したのか

32bit整数の範囲でビット演算(色のARGBを設定するイメージ)をするときに`Long`型の代わりに使おうとしたため。
VBAにはビットシフト演算子が無く、符号無しの大きな整数型も無いため、32bitをフルに使うビット演算を`Long`型で行うのが面倒だったため、横着しようとした結果。

型の本来の用途と違う用途に使うのは注意が必要ですね、という教訓でした。
【Rails】form_withにおけるmodel: とは何者か？

:::note warn 
**注記**
この記事の投稿者はRuby on Rails初学者であり、自身の学習の備忘録目的で記事投稿を行なっております。
情報の正確さには最大限注意をしておりますが、もし誤り等がございましたらお知らせいただけますと幸いです。
:::

こんにちは！
ご覧いただきありがとうございます！
 **Ito** と申します！
Ruby on Rails初学者です。
　　
タイトルの通り
**form_withにおけるmodel: とは何者か？**
個人的にわかりにくいと感じたので、端的にまとめてみました。




## 場面設定
掲示板アプリを想定しています。

* `Post`モデルの`index`ビューに、`author`(著者)を選択して`post`を検索できる検索フォームを実装しています。
* `Post`モデルが`Author`モデルと関連付けされています。
* `authors`テーブルと`posts`テーブルは **一対多** の関係です。

### モデル
```rb:app/models/post.rb
class Post < ApplicationRecord
  belongs_to :author

  #...(以下略)...
```
```rb:app/models/author.rb
class Author < ApplicationRecord
  has_many :posts
end
```
### コントローラー
```rb:posts_controller.rb
class Admin::PostsController < ApplicationController

# ...(中略)

  def index
    @search_posts_form = SearchPostsForm.new(search_params)
  end
  
# ...(中略)

  private

  def search_params
    params[:q]&.permit(:title, :author_id)
  end
# ...(以下略)
```

### ビュー
```rb:app/views/posts/index.html.erb
<%= form_with model: @search_posts_form, scope: :q, url: posts_path, method: :get do |f| %>
  <%= f.select :author_id, Author.pluck(:name, :id) , { include_blank: true }, class: 'form-control' %>
  <%= f.submit '検索' %>
<% end %>
```

## 知りたかったこと
`model: @search_posts_form`が何を表しているのか。

## 調べた結果
### `model`は`form_with`における「オプション」のこと
そもそも`form_with`における`model:`が何を表しているか？ですが、
`model:`とは、**「フォームのモデルオブジェクトを指定するためのオプション」** のことです。

そして指定されるモデルオブジェクトには、**「フォームで取り扱うデータを持つオブジェクト」** を指定します。
=> 今回は`form_with`で「検索フォーム」を実装しようとしているので、「フォームで取り扱うデータ」は **検索条件** （例えば`author`や`title`など) となります。

その **検索条件** のデータを持っているオブジェクトを、`model:`オプションで指定しています。

### 具体的にコードの中身を見てみる
具体的にコードの中身を見てみます。
`model: @search_posts_form`における`@search_posts_form`の中身が何なのか？というと、
`search_params`を受け取り、`new`された **`SearchPostsForm`インスタンス** が代入されています。

```rb:posts_controller.rb
class Admin::PostsController < ApplicationController

# ...(中略)

  def index
    @search_posts_form = SearchPostsForm.new(search_params) # この部分
  end
  
# ...(中略)

  private

  def search_params
    params[:q]&.permit(:title, :author_id)
  end
# ...(以下略)
```

**`SearchPostsForm`インスタンス**は`search_params`を受け取っていますが、
じゃあ`search_params`の中身は何なのか、と言いますと
「検索フォームから送信された情報」になっています。
(`params[:q]`のこと、ここでは割愛します)  

```rb:posts_controller.rb
class Admin::PostsController < ApplicationController

# ...(中略)

  def index
    @search_posts_form = SearchPostsForm.new(search_params)
  end
  
# ...(中略)

  private

  def search_params
    params[:q]&.permit(:title, :author_id) # この部分
  end
# ...(以下略)
```

検索フォームで扱うデータをしっかりと持っている（持つことになっている？）モデルオブジェクトが`model:`で指定されていました。

## わかったことのまとめ
ここまでをまとめると、
* `model`は`form_with`における **「オプション」** である。
* `model:`で指定されるのは、**「フォームで取り扱うデータを持つモデルオブジェクト」** である。
=> 今回のケースでは **「フォームから送信されたデータを受け取るモデルオブジェクト」** である。



文章で書くとややこしいですね…
もう少し端的に言い表すと
##### 「検索フォームで送信する（選択する）データを持っているオブジェクトを、`model:`オプションで指定しなさいね」
ということになります。

## 所管
自分の頭では整理できたつもりですが、文章に表すと想像以上に複雑になってしまいました。
都度反芻しながら、データの流れを整理して理解を深めていきたいと思います。
以上です！
ご覧いただきありがとうございました！寒さに負けず学習頑張ります！:muscle:
日本語のページを作ったのにChromeで開くと翻訳ツールが出てウザイ

以下のように記述しているにも関わらず翻訳ツールが立ち上がるのでウザイ

```html
<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8" />
  <title>ページタイトル</title>
 </head>
 <body>
  …省略…
 </body>
</html>
```

以下のような直したらでなくなった
```html
<!DOCTYPE html>
<html lang="ja" xml:lang="ja">
 <head>
  <meta charset="utf-8" />
  <title>ページタイトル</title>
 </head>
 <body>
  …省略…
 </body>
</html>
```
利用状況把握拡張機能⑦ - ソースコード

　この記事は自身が作った拡張機能のソースコードになります。具体的な機能の説明などは、別途記事をご覧いただければ。

 - <a href="https://qiita.com/Hira_B/items/84fe189a38f43f574502">利用状況把握拡張機能① - 拡張機能の概要とmanifestの読み込み　</a>
 - <a href="https://qiita.com/Hira_B/items/3978218f8d92c7a92c6c">利用状況把握拡張機能② - storageとContent Script、Service Workerの役割</a>
 - <a href="https://qiita.com/Hira_B/items/7f1160cb274bce2b4292">利用状況把握拡張機能③ - メッセージ送信と制限処理</a>
 - <a href="https://qiita.com/Hira_B/items/8a30109f47d1cef6a61e">利用状況把握拡張機能④ - 拡張機能のdefault_popup</a>
 - <a href="https://qiita.com/Hira_B/items/6acd07e5f76150cda476">利用状況把握拡張機能⑤ - オプションページとグラフ①</a>
 - <a href="https://qiita.com/Hira_B/items/7fc516607a499298678c">利用状況把握拡張機能⑥ - オプションページとグラフ②</a>
 - <a href="https://qiita.com/Hira_B/items/141a0d506c14bbe7a6e5
">利用状況把握拡張機能⑦ - ソースコード</a> ←現在の記事

## ソースコード

　コードに関しては省略している部分も多く、このままでは自分の拡張機能を試すことも不可能な為、ソースコードをプライベートですが公開しているので、興味のあるお方はそちらからインストールしていただければ利用できるかと

ファイル構成は以下の通り。画像などは個人でお好みのものを。
moumudaTime/
         ├ images/
	 ｜      ├ delete.png
	 ｜	├icons16.png
	  ｜ 	├icons32.png
	 ｜	├icons48.png
	 ｜	└icons128.png
	 ｜
	  ├ scripts/
	 ｜	├ content_script.js
	 ｜	├ popup.js
	 ｜	├ service_worker.js
	 ｜	└ setting.js
	  ｜
	  ├ styles/
	 ｜	├ lockscreen.css 
	 ｜	├ popup.css
	 ｜	└setting.css
	 ｜
	 ├ lockscreen.html
	  ├manifest.json
	  ├popup.html
	  └Time_setting.html

ここからは全てソースコードとなります。
 
https://gist.github.com/Hira-039/2e3f1362cb5731a1409b52412877ba21
【Tauri】windowをつかんで移動させる

### 解決したいこと
Tauriでフレームレスなアプリを画面に表示させるとき、メニューバーを消すとアプリそのものが移動できなくなるので、windowをつかんで移動できるようにする。


### 発生している問題
フレーム以外をつかんでwindowが移動できない
![gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3330912/fe17d993-cccb-8142-dc2d-f336a602ebb4.gif)


### 修正箇所

- Dragでwindowをつかめるコンポーネントに"data-tauri-drag-region"属性をつける

```js
function App() {
  return (
    <div data-tauri-drag-region className="container">
      <img data-tauri-drag-region src={confuseDog} alt="confused dog gif" width="100vw" height="100vh"/>
    </div>
  );
}
```

-tauri apiでView側から使えるようにallowlsit.window.startDraggingをtrueに変える
```diff
{
    "tauri": {
        "allowlist": {
          "all": false,
+         "window": {
+           "startDragging": true
+         },
          "shell": {
            "all": false,
            "open": true
          }
        },
        "bundle": {
        },
    },
}

```

### 結果
無事メニューバー以外をつかんでwindowを移動できるようになりました！
![gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3330912/6f6f28d4-e14e-905c-6da0-2792d7621d7d.gif)

### 参照ドキュメント
- [公式ドキュメント](https://tauri.app/v1/api/config/#windowconfig)
- [Github Issue](https://github.com/tauri-apps/tauri/issues/1656)
【REST】RESTfulなURI設計

## はじめに
RESTを勉強したのでそのなかのURI設計についてまとめる。

## RESTfulなURI設計とは
RESTというwebサービスの設計モデルに則ったURI設計。

## その1：短く入力しやすいこと
冗長なパスを含まない、短く入力しやすいパスにする
シンプルで覚えやすいものにすることで入力ミスを防ぐ

例
NG）https://api.example.com/service/api/search/
OK）https://api.example.com/search/

## その2：人が読んで理解できること
人が読んで理解できるものにする。
できるだけ省略をしない表記にする。
国や文化が変わっても不変の表記にすることで誤認識を防ぐ

例
NG）https://api.example.com/sv/u/
OK）https://api.example.com/users/

## その3：大文字、小文字が混在していないこと
大文字、小文字が混在していないこと。できるだけ全て小文字で表記する。

## その4：単語はハイフンでつなげること
アンダースコアを使わず、単語はハイフンでつなげること。
アンダースコアはタイプライターで下線を引くために用いられるものであったかららしい。

## その5：単語は複数形を利用すること
URIで表現しているのは「リソースの集合」であるから。

## その6：エンコードを必要とした文字を使わないこと
URIから意味が理解できないため。

例：カタカナを使用した場合
NG）https://api.example.com/ユーザー
=> https://api.example.com/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC

OK）https://api.example.com/users/

## その7：サーバー側のアーキテクチャを反映しないこと
悪意あるユーザーに脆弱性を突かれる危険があるため。

例：phpが動いていることがわかる
NG）https://api.example.com/cgi-bin/get_user.php?=12345
OK）https://api.example.com/users/12345

## その8：改造しやすいこと
システム依存の設計は意味が理解できないため。

例：システム依存のalpha、bataが使われている
NG）https://api.example.com/items/alpha/12345
NG）https://api.example.com/items/bata/12345

OK）https://api.example.com/items/12345

## その9：ルールが統一されていること
一定のルールに従って設計することで間違いを防ぐため。

例：userId:12345の例
NG）
https://api.example.com/friends?id=12345
https://api.example.com/friends/12345/message/

OK）
https://api.example.com/friends/12345
https://api.example.com/friends/12345/message/

## おわりに
RESTは2000年に提唱されたものであるため、意外と古く昨今のIT情勢と離れてしまった部分があるが、内容自体は大切なのでしっかり学んでおきたい。
AHC_029に参加した話 87th/833



# 問題
https://atcoder.jp/contests/ahc029/tasks/ahc029_a

## 要約
- 所持金を最大化するゲーム
- 1000ターン後終了
- 大まかに労働カード、爆破カード、倍々カードの3(5)種類を用いてプロジェクトを完成させる　


# やった事
- ルールベースの貪欲法
    - 仮順位 81位, (相対点数 2,475,099,653 | 絶対点数 2,013,986,172) 
    - 最終順位 87位 
    - 学生順位 20位(賞金 5000円)

# 貪欲内容
## 前半880ターン
- 初期手札を整理する
    - 全体爆破カードを最初に消費して手札を空ける
- 効率の悪いプロジェクトは早く爆破する
    - 購入より仕事の方がお金が増やしやすい(生成方法の記述から)ので手札に余裕がある場合は爆破カードを持っておく
    - 爆破の金額がかなり安い
- カード使用
    - 倍々カード
        - 所持した瞬間に使用
        - 他の人の感想を見る限り貯めておく方針も有りだと感じた
    - 爆破カード
        - 1~3個を常に所持するようにする
    - 労働カード
        - 行動/金額でソート
        - できるだけ効率が良いカードを買う
        - 効率が1未満であってもよほど悪くない限りは購入してプロジェクトで稼ぐ
- 購入
    - 最優先は倍々カード
        - カードを買えるように一定金額到達したらその金額を常に守る
    - 次点に爆破カード
    - 手札に余裕がある場合は金額に対する効率が最大になるカードを購入
    - 余裕がない場合は角プロジェクトに対して使った場合を全探索 
## 中盤110ターン
- 倍々カードを買わず、金額を最大化させる
    - 方針は前半と一緒
## 終盤10ターン
- 下手に手を出さず残ったプロジェクトが金額最大化するように終わらせる


# 感想
- 暫定テストの結果にこだわりすぎたかもしれない
    - パラメータの調整が全体的に良い状態じゃない気がする
- 最終評価が出たら追記します。
    - しました
    - やはり一部に最適化されていた
        - 5点しかとれないケースが複数あった
        - 最終的にパラメタ調整をうまくできていないと感じたので↓

https://qiita.com/erukku/items/9060d70176b404400849
Process:hdbrsutilをとめる

HANA DBを起動すると、データボリュームをメモリに展開する。
展開したメモリを保持しているのがhdbrsutilのプロセス。

これが起動していると、dataやlogボリュームをいじれない（umountとか）

以下の方法で止める

hdbrsutil --stop --port ポート番号

Port No.はpsコマンドや、HDB infoで確認する。


----
2191221 - hdbrsutil can block unmount of the filesystem
Kotlin Multiplatformのobject型がSingletonになる


## まずはコード
全てのコードは一番簡略的抽象化して一部切り抜けたもの
#### kmp側
```
abstract class Event : Parcelable {
    var id: String = UUID.randomUUID()
        internal set
}
sealed class EventBase : Event {
    object EventB : Event()
    data class EventA(name: String) : Event()
    ...
}

var event: Event


event = Event.EventA(name = "000")
event = Event.EventB
event = Event.EventB
```
#### Swift
```
public protocol StateMachineInterface {
    associatedtype EventType
    var event: Observable<EventType> { get }
}
var instance: StateMachineInterface ... // (eventをKMPから受け取る)

var event: Observable<EventType> { 
    return instance.map { 
        $0.event 
    }
    .asObservable()
    .observe(on: scheduler)
    .share(replay: 1, scope: .whileConnected)
}

event
    .distinctUntilChanged {
        print("compare \($0),\($1)") // 調査するためにログを仕込んだ
        return $0.id == $1.id
    }
    .subscribe {
        print("subscribe　\($0)")
        ...
    }
    ...
```
#### 出力結果
```
subscribe　EventA(id=uuid1, name=000)
compare EventA(id=uuid1, name=000),EventB(id=uuid2)
subscribe　EventB(id=uuid2)
compare EventB(id=uuid3),EventB(id=uuid3)
```
## 疑問
この出力結果でいくつかの疑問点が出てきます。
- EventBが連続で流れた場合`subscribe`に辿り着かない
- `distinctUntilChanged`のbeforeとafterが1eventで同時に変更されている

## 解明
調べた末、Kotlin Multiplatformのobject型がiOS用にコンパイルされた時SingletonになることがKMPの公式に書いてあった
https://kotlinlang.org/docs/native-objc-interop.html#kotlin-singletons
![WX20231226-210018@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/511710/d2ef1e33-daa2-7102-9bcd-b2d405f1dcba.png)

これだけ知っていれば先ほどの挙動に解釈がつく
- EventBはobject型で宣言されているため、idだけが変わって実際はずっと同じinstance
- SingletonだからRxswiftの内部で参照型copy作ろうとしても結局同じinstanceが登録される
- EventBが連続で来たらbeforeとafterは同じaddressなので、afterのidが変わったらもちろんbeforeも一緒に変わる

## 結論
KMP使うならiOSエンジニアも一緒にKotlin勉強しましょう

## 参考リンク
https://kotlinlang.org/docs/object-declarations.html#object-declarations-overview
https://kotlinlang.org/docs/native-objc-interop.html#kotlin-singletons
Python初心者が実装で気づいたこと

最近社内のpythonツールの修正を改善したく、実装してみました。
すると、はまったとか気づいたことがありますので、忘れないようそして他の方の参考になれるようにこの記事に書くようにします。

# 勉強になった点

## int型でファイルへの書き込みはできない

pythonは変数定義の際に型の指定は必要ないが、method呼び出す際に型がチェックされることがあると今回のことでわかりました。
書き込みは以下のコードで実現しています。
```Python
    filePath = {ファイルのパス}
    pageNoFile = open(filePath, 'w')
    pageNoFile.write(pageCount)
    pageNoFile.close()
```

pageNoみたいな数字をファイルに書き込むと以下のエラーになります。
```
TypeError: write() argument must be str, not int
```
pageCountが数字とかのint型である場合、以下のようにstring型に変換できます。
```
str(pageCount)
```

## 文字列と数値は結合できない

例えば以下のコードです。
```Python
toGetComponentURL = url + pageCount
```
urlは文字列で、pageCountは数字です。この二つを結合する場合、以下のエラーが発生します。
```
TypeError: can only concatenate str (not "int") to str
```
同様にstring型に変換する必要があります。

print()みたいに型変換不要なケースもありますが、型変換が必要なケースが多いというのを知りました。

## jsonにある要素が空であるかチェック

今回のケースはjsonにあるcomponentsのmapがあるかをチェックしたいです。
以下のように書けばよいのです。（[]を使う）
```Python
jsonObj["components"] == []
```

## 再帰的な処理を書く際にreturn書くのを忘れないで

今回の処理は結果が出なくなるまでAPIを呼び出し続けて、最大ペース数を取得する処理を書こうとしました。
以下のようにもともと書きました。

```Python
def get_max_page_no(pageCount) :
    toGetComponentURL = url + paramPageSize + str(pageSize) + paramPerPage + str(pageCount)
    req = urllib.request.Request(toGetComponentURL)
    with urllib.request.urlopen(req) as res:
        jsonObj = json.loads(res.read().decode('utf8'))
        if (jsonObj["components"] == []) :
            pageCount = pageCount - 1
            return pageCount
        else :
            pageCount = pageCount + 1
            get_max_page_no(pageCount)
```

すると、後続の処理でエラーが起きて、調べてみたらpageCountがうまく生成されず、Noneになりました。
もうタイトルでネタバレしたのですが、elseのところにreturnしなければいけないのです。

```Python
        else :
            pageCount = pageCount + 1
            return get_max_page_no(pageCount)
```

# その他

## VscodeでPythonの開発がしやすい

元々はpythonを自端末でインストールし、セットアップをやって、batファイルから実行する、もしくはJenkinsジョブからpythonコードを実行するというのをやりました。
今回は初めてvscodeで直接コードを実行しました。

セットアップはかなり簡単で、Vscodeにpythonの拡張機能を追加すれば、pythonコードを実行できます。
デバッグもできて、かなり使いやすかったのでお勧めです！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335050/c46804b9-fdf8-3ed0-8ea7-ed6e38db1664.png)

# 最後に
数時間で書いたコードですが、いろんなエラーに遭遇して勉強になりました。
皆さんの参考にもなれれば幸いです。
[JavaScript] DOMの操作方法

## はじめに
今回はDOMの操作方法について学習したため、備忘録として作成しています。

## ノードの追加
### createElementメソッド
要素を作成するメソッド
**ノードを作成するだけのため、別途ドキュメントに追加する処理が必要**
```javascript:createElement
document.createElement(要素名)
```

### createTextNodeメソッド
テキストノードを作成する
**ノードを作成するだけのため、別途階層に追加する処理が必要**
```javascript:createTextNode
document.createTextNode(テキスト)
```
### appendChildメソッド
指定された要素を現在の要素の最後の子要素として追加する
```javascript:appendChild
要素オブジェクト.appendChild(追加する子ノード)
```
戻り値は子ノード

### 例題
- 空のリスト、ボタンを配置する
- ボタンをクリックするとリストの項目が追加される
- 追加される文字列は"test"とする

```javascript:例題
<body>
  <ul id="list"> 
  </ul>
<input id="button" type="button" value="Add!">
<script> 
const e = document.getElementById('button');
e.addEventListener('click', () => {
  const li = document.createElement('li');
  const text = document.createTextNode('test');
  li.appendChild(text);
  const listElement = document.getElementById('list');
  listElement.appendChild(li);
}, false);
</script>
</body>
```
## ノードを置換する
### replaceChildメソッド
`newChild`と`oldChild`を入れ替える（`appemdChild`と`removeChild`を同時に行う）

### 例題
- リストとボタンを配置
- ボタンをクリックするとリストの子要素を置換する処理
```javascript:例題
<body>
  <ul>
    <li id="oldList">old element</li>
  </ul>
<input id="button" type="button" value="Replace">
<script> 
const e = document.getElementById('button');
e.addEventListener('click', () => {
  const newList = document.createElement('li');
  newList.setAttribute('id', 'newList');
  const newText = document.createTextNode('new element');
  newList.appendChild(newText);
  const oldList = document.getElementById('oldList');
  const parentNode = oldList.parentNode;
  parentNode.replaceChild(newList, oldList);
}, false);
</script>
</body>
```

## ノードの削除
### removeChildメソッド
指定した子ノードを取り除く
### 例題
- リストとボタンを設置
- ボタンをクリックするとリストの子要素が最後のものから削除される
```javascript:例題
<body>
  <ul id="list">
    <li>element1</li>
    <li>element2</li>
    <li>element3</li>
    <li>element4</li>
    <li>element5</li>
  </ul>
<input id="button" type="button" value="Remove!">
<script> 
const e = document.getElementById('button');
e.addEventListener('click', () => {
  const parentElement = document.getElementById('list')
  const elements = parentElement.getElementsByTagName('li')
  const removeIndex = elements.length - 1;
  parentElement.removeChild(elements[removeIndex]);

}, false);
</script>
</body>
```
### エラーが発生する理由
HTMLのファイルダウンロードが終わった後の動き
1. HTMLページに記述されている内容をページの先頭から順にパース(解析)する
1. DOMツリーを構築

:::note
**script**タグがあると、パースをいったん停止して**script**タグの中の JavaScript のコードが実行される
これによりまだパースが行われていない場合nullになってしまう
:::

### エラーを回避する方法
1. HTMLページの末尾に記述する
JavaScript のコードを要素よりもあとへ、例えば HTML ページの末尾である**body**の直前に記述すればエラーを回避できる
1. DOMContentLoadedイベントを利用する
   **headタグ内にscripタグを記述したい場合に利用できる**
1. loadイベントを利用する
1. scriptタグでdefer属性を設定する
   **JavaScript のコードを記述した外部のファイルを読み込む場合にだけ利用できる**

## おわりに
今回はDOMの学習についてまとめました。
Arduino UNOとNJL7502Lでなんちゃってluxをシリアル出力(明るさ)


Arduino UNOとNJL7502Lでなんちゃってluxをシリアル出力(明るさ)


x約2Vで約400luxにならないといけないがたんに電圧の200倍にする

目的
adcのテスト用

構成
Arduino UNO
NJL7502L


2V   → 400lux
3.3V → 660lux
5V   → 1000lux


3.3V
(s * 660)>>10

5V
(s * 1000)>>10


![o_cop876.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/b82786a8-be0f-e735-aed6-8b8dd033dd10.jpeg)


![o_cop877.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/f55deb0a-6ef6-e34c-3c2b-3fdd83569ebd.jpeg)


![o_cop878.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/cc1d1638-11cf-e9cf-0ddb-2cbbdf433a34.jpeg)


![o_cop879.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/7fb383b4-177b-23a7-43a8-ab9b1f365882.jpeg)

![o_cop880.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/9cb410c2-2029-0e1f-df90-89dbda6ced56.jpeg)


```c++


//S_SER_NJL7502_UNO_1

//インクルド
#include <Arduino.h>


//初期化
void setup()
{

  //シリアルの初期化
  Serial.begin(9600);

} //setup


//メインループ
void loop()
{

  //アナログ値の読み込み
  int s = analogRead(A0);

  //s=250;

  //温度の表示
  Serial.println( (long)((long)s * (long)1000) >> 10 );

  //1秒の待ち
  delay(1000);

} //loop


```
Markdownの基本的な文法たち

***
### index

- [見出し](#見出し)
- [テキストの装飾](#テキストの装飾)
- [List](#list)
- [リンク](#リンク)
- [画像](#画像)
- [引用](#引用)
***



## 見出し
見出しは # で表現します。# の数によって見出しのレベルを表現できます。例えば、# 見出し1は1レベルの見出し、## 見出し2は2レベルの見出しとなります。

## テキストの装飾

### 1. 真ん中太字
**テキスト**`**テキスト**`で真ん中太字を表現できます。

### 2. 斜体
*text*`*text*`で斜体を表現できます。

### 3. 打ち消し線
~~テキスト~~`~~テキスト~~`で打ち消し線を表現できます。


## List
### 1. 番号付きリスト
1. リスト1
2. リスト2

上記のように数字とピリオドの後にスペースを入れることで、番号付きのリストを作成できます。

### 2. 箇条書きリスト
- リスト1
- リスト2

上記のようにハイフンとスペースを入れることで、箇条書きリストを作成できます。

### 3. テーブル
| 列1 | 列2 |
| --- | --- | 
| 内容1 | 内容2 |


## リンク
`[リンクのテキスト](リンクのURL)`でリンクを作成できます。例えば、[Google](https://www.google.com/)のように書くことで、Googleへのリンクを作成できます。
### 相対パスを使ったリンク
`[リンクテキスト](#リンク先の見出し)`
空白はハイフンに置き換えます。`#`の後ろには、見出しの文字列を小文字にしたものを記述します


## 画像
`![代替テキスト](画像のURL)`で画像を表示できます。例えば、

![ロゴ](https://cdn.pixabay.com/photo/2023/03/29/08/19/tulips-7884877_960_720.jpg)

のように書くことで、ロゴという代替テキストを持つ画像を表示できます。

## 引用
`>` 引用文で引用を表現できます。複数行に渡る引用も可能です。例えば、以下のように
> これは引用文です。複数行に渡る場合でも、最初の行に `>` を付けるだけで表現できます。
canvasにマウスでカリグラフィペン

カリグラフィペン...縦だと細くて横だと太目な、万年筆っぽいアレ :writing_hand:

もともと[htmlのcanvas](https://developer.mozilla.org/ja/docs/Web/HTML/Element/canvas)にマウスでお絵描きするアプリがあったのですが、ちょっとだけカッコつけたくてこのペンを作りました。

結果的にカリグラフィではないかもしれません :bread:

## 結果

https://jsfiddle.net/koyayashi/juf4pyhb/212/

## どうやるか

アプリによって実装が違うみたいですが、基本的には楕円形で軌道を描くもののようです。
本来、圧や速度と手首の捻りで影響を受けるものでしょうが、マウスなのでこの方針。

しかしcanvasで「楕円形で軌跡を描く」のは結構めんどくさそう...
なので平行四辺形にします。

1. mousedownで斜め線を描く
2. mousemove毎に
    1. 斜め線を描き、前回引いた線と合わせて平行四辺形を塗る

## 結果：平行四辺形カリグラフィペン

![2023-12-26_18h42_39.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488658/f602632f-aa12-9f3f-a22c-24297685677e.jpeg)

なーんかカクついています。
もうちょっと工夫します。

## 滑らかにしたい

マウスの軌跡をバッファに取って、その平均で描画していくことにします。

こんな感じにすると、最初に定義した数を容量とするqueみたいになります。

```javascript
const que = [
  { x: 0, y: 0 },
  { x: 0, y: 0 },
  { x: 0, y: 0 },
];

// dequeue
que.shift();
// enqueue
que.push(pos);
```

流れとしてはこうなる

1. mousedownで斜め線を描く
2. mousemove毎に
    1. 移動軌跡を上限付きのqueに入れる
    2. 移動軌跡過去数回分の平均位置を今回のposとして決定
    3. 斜め線を描き、前回引いた線と合わせて平行四辺形を塗る

## 結果：なめらかな平行四辺形カリグラフィペン

![2023-12-26_19h48_13.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488658/8450f99e-208b-4e43-4e96-51dd420d4a2d.jpeg)

ぶっちゃけカリグラフィペンではないですが、普通の線よりはいい感じです:sunny:
超ざっくりと@extendsと@includeの違いを解説してみる

## はじめに
突然ですが、みなさんは「＠include」と「＠extends」の違いを説明できるでしょうか？

Laravelだとbladeファイルの読み込みシーンで頻出ですよね。

自分はなんとなく「どちらもビューを読み込めるが、＠includeは引数が渡せて＠extendsは渡せない」ぐらいの理解しかなく、危機感を感じたので少しまとめてみます。

## 前提（環境）
Laravel 9.52.16

## 先に結論
* 「＠extends」は共有レイアウトを読み込む時に使う
* 「＠include」は別のビューからBladeビューを読み込む時に使う

以下Laravelの公式ドキュメントを参照しながら解説していきます。

https://readouble.com/laravel/9.x/ja/blade.html

## ＠extendsとは？
「このレイアウトをまた書くのは面倒くさいなあ…」という時に便利なのが＠extendsです。

＠extendsを使うと、一つのレイアウトをビューファイルとして他のビューにも読み込んで使えます。

```php: resources/views/layouts/app.blade.php
<html>
    <head>
        <title>アプリの名前</title>
    </head>
    <body>
        <div class = "container">
            @yield('content')
        </div>
    </body>
</html>
```

上のように、使い回したいレイアウトファイルが存在するとします。

このレイアウトを他のビューでも使いたい時に、Bladeファイル内冒頭で＠extendsを使います。

そしてapp.blade.php内に「＠yield('content')」とあります。

この＠yield'〇〇'の部分にビューファイルのセクション名を書くと、その内容をレイアウトへ表示できます。


```php: views/child.blade.php
@extends('layouts.app')

@section('content')
    <p>このsectionがyieldに対応している</p>
@endsection
```

つまり、＠extendsはアプリケーションのレイアウト（親ページ）を、他のビューファイル（子ページ）に**継承**するために使われます。

そして、一般的に親ビューは＠yieldセクションを持ちます。

## ＠includeとは
対して＠includeは、共通の部品（ナビゲーションバーなど）を他のビューで再利用したいときに使います。

そして子ビューは、＠includeされる親ビューで使用できるすべての変数にアクセスできます。

```php: show.blade.php
@extends('layouts.app')

@section('content')
    <div class="sm:grid sm:grid-cols-3 sm:gap-10">
            {{-- ユーザ情報を表示するビューファイルを読み込む --}}
            @include('users.card')
    </div>
@endsection
```

「親ビューで使用できるすべての変数にアクセスできる」とは、コントローラから親ビューに渡される$userといった変数を、

＠includeで継承される子ビューも使用できることを意味します。


## まとめ
使い回したいレイアウト（親ビュー）を継承したいときは＠extendsを使います。

そして＠extendsで継承される子ビューのセクションは、親ビューの＠yieldを使ってレイアウトに表示できます。

共通レイアウト以外の他のビューを部品として読み込みたいときは＠includeを使います。

そして＠includeの場合、親ビューが使えるすべての変数にアクセスできます。
振り返ると１年中CLOVA 改造していた件



# はじめに

今年2023年で IoTLT に登壇させていただいたネタを振り返ってみると、下記のようになっていました。なんと CLOVA のネタばっかりです。
年中 CLOVAの改造をやっていたことになりますね…

## 今年の TakSanの登壇

| 回 | 月日 | 登壇タイトル |備考|
|:-----------|:------------|:------------|:------------|
|Vol. 96| 2/21|サービス終了で使えなくなるので、LINE CLOVERにラズパイ仕込んで改造中||
|Vol.98|4/20|サービス終了で使えなくなった、改造中の LINE CLOVER のその後||
|Vol.100|6/18|サ終で文鎮化したLINE CLOVERの復活を少しずつ進めています||
|Vol.104|10/24|LINE CLOVER mini の魔改造 そろそろ完成か!?|ドタキャン※|

※ (言い訳)当日家族のおインフルで。穴開けて申し訳ありませんでした。

# すべてはサービス終了のお知らせから始まった

LINE CLOVA は LINEが出したスマートスピーカなのですが、去年の１０月末くらいにサービス終了が発表されました。
音声認識から応答までをサーバーサイド側でやっているのでサービス終了すると文鎮化して、ただの置物になります。

サービス終了 IoTあるあるですよね。

前から一度サービス終了になって使えなくなったデバイスを魔改造するネタをやってみたかったのですが、所有しているデバイスが使えなくなるというちょうどいい感じのネタが来ました。

解析を進めた限りでは CLOVA本体は Androidベースで動いていて、書き込まれているソフトはほぼブラックボックスになっているはずなので、コンピュータごとラズパイに入れ替えて改造することにしました。

# 第一弾はカオスな魔改造から

始めは徹底的な解析から始まって信号が判明して、まず第一弾は空中配線での魔改造をやってみました。
詳細はこちら▼にありますが、結構内容が濃いので興味のある方は参照してみてください。

[ラズパイ化CLOVA-パート１（ガチの改造編）](https://elchika.com/article/1c5edcc4-701c-4a10-9e71-435ded8ba2be/)

# 第二弾は改造自体をやりやすく

第一弾の記事を作ってみましたが、誰もまねできないくらいカオスであった事を反省し、改造のやりやすさを重視しました。
本体回りをそのままに接続するケーブルのコネクタを全く同じにして、コンピュータのあるマザー基板を入れ替えるだけで改造できるようにしてみました。

詳細はこちら▼になります。
[ラズパイ化CLOVA-パート2（専用基板編）](https://elchika.com/article/38d8127b-7cb4-44b9-ae63-ece591d777f9/)

何枚か基板を量産してみて、このあたりで、ようやく一緒に改造をしてくれるかたがちらほらでてきました。

# CLOVA mini の方ががユーザーが多い

IotLT で登壇して発表してみたときに判明した事実として、CLOVA mini の方がユーザー数が多いということ。
次の宿題は CLOVA mini に対応することでした。
最初に改造した CLOVA friends の2/3 位のサイズしかなく、ラズパイが収まりませんでした。IoTLTで同じ日に登壇していた人に NanoPi という非常に小型の Linuxボードを紹介してもらい、それを使う形で新たに基板を設計しました。
こちらはまだ記事ができていませんが、基板の方は出来上がっていて記事公開間近なところまでいっています。

# 最後はヒーローズリーグに

約１年間成長させてようやくいい感じになってきたので、大本命のコンテスト「ヒーローズリーグ」に応募しました。

記事はこちら▼になります。
[サービス終了になった LINE CLOVA 達に第二の人生を歩ませる](https://protopedia.net/prototype/3761)

例年通り IoTLTが主催している IoAT賞は大本命であったのですが、該当数が正直厳しいのかなと思っていましたが、なんと "IoTAT賞" をいただけました。

選んでいただいた関係者の皆様ありがとうございます。

# 終わりに

というわけで振り返ってみると、CLOVAの改造ばかりやっていた様になってしまいました。
CLOVAネタばかりを何度もしつこく、またかと思われる方もいたかと思いますが、皆さん温かく聞いてくれていたおかげかなと思います。

CLOVA mini の記事もまだできていませんし、ソフトはまだまだですので改造は続けたいと思っています。今後もよろしくお願いいたします。


こちらの記事の方も、急いで書いたのでできれば更新したいとは思っています。
VM Virtualboxに立てたubuntuのIPアドレスを知りたい。

# まえおき
~~ラズパイの処理能力がお察しすぎて~~windowsのメインPCに仮想環境ubuntu入れて快適にトライアンドエラーしようとしたときのお話。さて初期設定終わったしsshするか…となったらIPアドレスを調べる段階で半日持ってかれたので置いておきます。繋がったらあとは適当に公開鍵認証にしておきましょう。



# 環境

- windows11
- VM Virtualbox バージョン 7.0.10(ネットワーク設定はNAT)
- ubuntu-22.04.3-live-server-amd64

すでに仮想マシン側がネットワークに繋がっていることが前提

# ハズレ(hostname -I編)

**ハズレのアドレスのみを返してきます。**
まあ実機とは違った特殊な環境だし…

# やり方(ip編)

```
ip -4 a
```

```
1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000
    inet xxx.xxx.xxx.xxx/x scope host lo
       valid_lft forever preferred_lft forever
2: enp0s3: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc fq_codel state UP group default qlen 1000
    inet xxx.xxx.xxx.xxx/x metric 100 brd xxx.xxx.xxx.xxx scope global dynamic enp0s3
       valid_lft 83393sec preferred_lft 83393sec
```

**上段のloに書かれているinet xxx.xxx.xxx.xxxが正解です。**
下段のenpに書かれているアドレスはハズレです。

# やり方(ifconfig編)

そもそもifconfigが入っていない場合は`net-tools`を入れてもろて…
ググったところ最近は非推奨とか？
```
ifconfig
```

```
＜出力例＞
enp0s3: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
        inet xxx.xxx.xxx.xxx  netmask xxx.xxx.xxx.xxx  broadcast xxx.xxx.xxx.xxx
        inet6 xxxx::xxxx:xxxx:xxxx:xxxx  prefixlen 64  scopeid 0x20<link>
        ether xx:xx:xx:xx:xx:xx  txqueuelen 1000  (Ethernet)
        RX packets 26039  bytes 2948957 (2.9 MB)
        RX errors 0  dropped 0  overruns 0  frame 0
        TX packets 18349  bytes 5694734 (5.6 MB)
        TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0

lo: flags=73<UP,LOOPBACK,RUNNING>  mtu 65536
        inet xxx.xxx.xxx.xxx  netmask xxx.xxx.xxx.xxx
        inet6 ::X  prefixlen 128  scopeid 0x10<host>
        loop  txqueuelen 1000  (Local Loopback)
        RX packets 35537  bytes 6598394 (6.5 MB)
        RX errors 0  dropped 0  overruns 0  frame 0
        TX packets 35537  bytes 6598394 (6.5 MB)
        TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0
```

**下段のloに書かれているinet xxx.xxx.xxx.xxxが正解です。**
上段のenpに書かれているアドレスはハズレです。



# まとめ
**loが当たりのアドレス！**
あと7年前の骨董品ラズパイの処理能力を信じるな
【Rails】yieldとrenderの違い

# はじめに
Railsチュートリアルを進めているとview/layouts/application.html.erbの中で見かけたyieldというメソッドと部分的に描画するrenderという似たようなメソッドが目につき、これどういう違いなのかと疑問に思ったので記事にしてました。


# そもそもapplication.html.erbって？
Railsのビューは
- application.html.erb → HTMLやHEADタグなどの共通レイアウト
- アクション名.html.erb → BODYタグ内の個別レイアウト

この二つで役割分担して画面表示している。

application.erbはコントローラ固有のレイアウトが見つからない場合、**デフォルトで使用される共通レイアウト。**

全てのページで使われるhead、ヘッダー、フッターなどをここで一括して書くことで個別レイアウト内で同じコードを書く必要がなくなり、DRYが保たれる。
[(コントローラーでレイアウトを指定するにはlayoutメソッドを使う)](https://pikawaka.com/rails/layout)

```erb:application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %> 
  </body>
</html>
```


# yield
`yield`は共通プログラムと個別プログラムで分割してコーディングするために使用するRubyのメソッド。

共通レイアウト(application.html.erb)のbodyタグ内にある `yield` の部分に、コントローラーで処理された (アクション名).html.erbの個別レイアウトが埋め込まれる。


# render
view内ではパーシャル(部分テンプレート、個別テンプレート)に対して用いられる。
```erb
<%= render "form" %>
```
レンダリングされるビュー内に置かれている上のコードは、その場所で_form.html.erbという名前のファイルをレンダリングする。
(パーシャルファイル名の冒頭にはアンダースコア（_）が付いていることに注意)
主な使われ方はheader、footerやformなどの使いまわし。
これらはサイトでページが異なっても一貫した描画が行われることが多いのでrenderメソッドで部分テンプレートを使いまわす。

# yieldの部分renderで書ける？
書けるが、柔軟性が失われる。
renderでの指定するファイル名はアンダースコア始まりなのに対し、アクションで指定するビューファイルのファイル名はアクション名に一致する必要がある。
さらにrenderの引数もアクションのページ指定ごとに動的に変える必要も出てくるので難しい。
なのでここでrenderを使うのではなくコントローラーで処理されたものを指定なしに埋め込むyieldを使った方がスマート。

# まとめ
ビュー内での使われ方として
- yieldはレンダリングされているビューファイルを共通レイアウトの中に埋め込むのに使う。
- renderはパーシャルをレンダリングするために使う。

[個々のページの図1,2が分かりやすいです](https://zenn.dev/peishim/articles/49822b95ba6674)

# 参考文献
[メソッド呼び出し(super・ブロック付き・yield - Ruby 3.2 リファレンスマニュアル)](https://docs.ruby-lang.org/ja/latest/doc/spec=2fcall.html#yield)
[レイアウトとレンダリング - Railsガイド](https://railsguides.jp/layouts_and_rendering.html#yield%E3%82%92%E7%90%86%E8%A7%A3%E3%81%99%E3%82%8B)
[yieldについて|Ruby on Railsの基礎を学ぼう！ - Techpit](https://www.techpit.jp/courses/61/curriculums/65/sections/527/parts/1816)
[【Rails入門】yieldとcontent_forを使ってページ毎にタイトルを変更](https://www.sejuku.net/blog/75657)
[yield -Railsドキュメント](https://railsdoc.com/page/yield)
[render - Railsドキュメント](https://railsdoc.com/page/render)
[Railsのviewとlayoutの評価順についてコードを読んで納得した](https://blog.freedom-man.com/rails-view-layout)
[【Rails】View(ビュー)の構成ファイルを読み解く](https://zenn.dev/peishim/articles/49822b95ba6674)
ガバナンスアーキテクチャ②

# 前置き
前の記事でルールの存在理由についてや向き合い方について記述しました。
この記事では、そのルールの設計についての考察記事を書きたいと思います。
以下では、ルールや規定、ガバナンスといったワードが飛び交いますが、
すべてここでは同じ意味を指すものだと考えていただけたらと思います。

# 前提
いまからお話しするガバナンスアーキテクチャの前に前提となる
重要な設計原則である、リスコフの置換原則についてまず簡単に記載します。

この原則は簡潔に言うと、上位概念を意味継承した下位の概念は
必ず上位概念の規約を満たさなくてはいけない　というものです。

## 具体例①
まず例として、社内規定を例に出します。
下図では、自社の組織構造と対応付けて社内規定の構造図を描きました。
<img width="600" alt="ガバナンス.png (19.0 kB)" src="https://img.esa.io/uploads/production/attachments/5827/2023/08/25/135213/bf885601-255a-44c1-910d-1b6df70ec5b2.png">

自社部門すべてに共通する全社規定。各部門ごと固有の規定。
これら各部門ごとの規定は、上位の全社規定を満たすように設計されていなくてはならない。

## 具体例②
これを１つの社だけではなく、もっと広い意味でのガバナンスの構造として考えてみます。
ここではIT業界全般のルールについて考えてみます。

法律で定められている法令規定。
これに下位の組織とかが違反したら法律違反として訴えられますよね？
これはまさにガバナンス面でのリスコフの置換原則違を表していると考えられます。
<img width="500" alt="ポリシー図.png (17.1 kB)" src="https://img.esa.io/uploads/production/attachments/5827/2023/12/26/135213/a426c78b-c5e6-4f4f-adee-cd72a7fba202.png">

図で言うと、
法令規定をリスコフの置換原則満たすように継承する形でソフトウェア業界規定が存在し、
さらにそれをリスコフの置換原則満たすように継承する形で自社規定が存在する。

逆に原則違反をしていると、先にも述べたように業界全体で統制をはかるのが難しくなると考えられます。

なんでも自由勝手にルールを設けるのではなく、
この【リスコフの置換原則をみたすように】という制約によって全体としての統制をはかりやすくする。

# ゼロからガバナンスの構築
ここでは例として予約管理ができるITシステムが導入される飲食店ビジネスを考えてみます。
まず絶対的な制約として考えられるのは、食品衛生法などの飲食店である限り
必ず厳守しなくてはならない法律がありますね。
暗黙的には、コロナ渦騒動中の各テーブルの飛沫よけなんかも
飲食店業界の法的というか社会情勢的制約と言えますが、これは暗黙的なので今回は無視します。
あとは予約の際の個人情報の保護法なんかも上げられますね。

まずこれらはそもそもの前提の制約として最初に定義できるものだと考えられます。

次にやることは、そのビジネス特有のルールの設計。
あくまでもその特有ルールも上記で述べたようにリスコフの置換原則を満たすように設計。

されそのビジネス特有のルールを考えるために必要なのが、リスク分析です。
ルールの存在意義については、前の記事ですでにリスク回避or軽減のためと記載したのでここでは省きます。

## 食品リソース観点
たとえばクリスマスなどの繁忙期シーズンでは飲食店、
特にチキンなどが在庫不足になることや、注文してから配達にかかる時間が長時間にわたるなど、
本来であれば喜ぶべき注文がたくさん来るというのが
キャパオーバーして、市場の要求量＞＞生産能力　という【物理制約】が発生している状態です。

でもだからと言って、
年がら年中チキンを大量に生産すればそれはそれで、
生産能力＞＞市場の要求量　という【市場制約】の現象が起きてしまい、
食材や梱包パッケージなどの物資の無駄遣いを生んでしまいます。

つまり、物資の無駄を最大限減らし　
かつ　在庫切れになって売上UPのチャンスを逃さないためには、
当たり前ですが　生産能力＝市場の要求量　に近い状態を目指さないといけません。

## ヒト系リソース観点
これは同様にヒト系リソース観点でも言えますね。
繁忙期に生産する人が足りないとエンドユーザを待たせるだけでなく、
１人あたりの作業がちょうぜつ忙しくなるのでミスも増えやすい。
そのため普段の繁忙期に比べて人数を増やさなくてはいけませんね。
ここでやってはいけないのが、思考停止して１年中一律の人数にしてしまうこと。
繫忙期には人が足らず、閑散期には逆に人が多すぎてコストの無駄遣いが起きます。

## 方針制約
TOC制約理論では、上記の物理制約および市場制約は、ほとんどの場合はその真因として
方針制約、つまり組織のガバナンスがボトルネックとなって起きる表面的現象と言われています。
そのため、繁忙期には普段よりも倍のヒト系リソースや、食品リソースを投入することで
リスク緩和ができるように在庫管理や、スタッフのシフト管理を行うなどの方針設計が重要となります。


# まとめ
以上のような経営リスクをどの程度抑えたいのかによって、ルールの仕組みづくりも当然変わってきますね。
法という前提の制約にさえのっとっていれば、各ビジネスでどのようにルールを設計しても
OKというのがリスコフの置換原則を満たしたうえでの真の多様性と言えると感じます。
次回はガバナンスのリアーキテクティングについて記述します。
【React】Input属性でタブを押したときの初期フォーカス位置を調整する


# 結果

SelectionAPIを使った

https://developer.mozilla.org/ja/docs/Web/API/Selection

![ezgif-4-d89ef571cc.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112929/804a9933-de32-26fc-7404-814747185d2c.gif)


めっちゃいろんなことを検索したけどreact関係なくSelectionAPIでやるのが便利だと思った次第。
普通にuseRefのドキュメントとか見てたけどこれでいいのでは。


```js
window.getSelection().collapseToStart()
```


## コードとコードサンドボックス

https://codesandbox.io/embed/cn9r7g?view=Editor+%2B+Preview&module=%2Fsrc%2FApp.js


```jsx
import { useRef, useEffect } from "react";
import "./styles.css";

export default function App() {
  const ref = useRef(null);

  useEffect(() => ref?.current?.focus(), [ref?.current]);

  return (
    <div className="App">
      <h1>タブ押したときのフォーカス位置</h1>
      <div>
        <input ref={ref} defaultValue="初期選択" />
      </div>
      <div>
        <input defaultValue="何もなしは全選択" />
      </div>
      <div>
        <input
          onFocus={() => window?.getSelection().collapseToStart()}
          defaultValue="先頭カーソル"
        />
      </div>
      <div>
        <input
          onFocus={() => window?.getSelection().collapseToEnd()}
          defaultValue="末端カーソル"
        />
      </div>
      <div>
        <input
          onFocus={() => window?.getSelection().deleteFromDocument()}
          defaultValue="選択を削除"
        />
      </div>
    </div>
  );
}

```
10 Biggest Florida Grocery Chains 2023, Depending on Locations

![Biggest-Florida-Grocery-Chains-2023.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480765/fd38c6a6-2c15-fbda-5039-9e88ddc4b17f.jpeg)


Biggest Florida Grocery Chains 2023
Biggest-Florida-Grocery-Chains-2023 Biggest-Florida-Grocery-Chains-2023-2 Biggest-Florida-Grocery-Chains-2023-3
Depending on the total locations, Dollar Tree, Walmart, and Family Dollar will be the biggest Florida grocery chains in 2023. Dollar Tree is having maximum locations having 587 locations in 192 towns. Family Dollar is having 573 locations, and Walmart is having 341 Florida locations. These three grocery chains together cover 83.16% of top 10 Florida grocery chains.

Know More About Florida's Top Grocery Chains
Dollar Tree
Dollar-Tree
Dollar Tree is having 587 locations within Florida. You can read a detailed Dollar Tree location report in the U.S. or instantly purchase the whole dataset just by clicking here.

Family Dollar
Family-Dollar
Family Dollar is having 573 locations within Florida. Read a detailed Family Dollar location report in the U.S. You can instantly purchase the whole dataset by clicking here.

Walmart
Walmart
Walmart is having 341 locations within Florida. Read a detailed Walmart location report in the U.S. You can instantly purchase the whole dataset just by clicking here.

Save A Lot
Save-A-Lot
Save A Lot is having 104 locations within Florida. Read a detailed Save A Lot location report in the U.S. You can immediately purchase the whole dataset just by clicking here.

Sam's Club
Sam-s-Club
Sam's Club is having 46 locations within Florida. Read a detailed Sam's Club location report in the U.S. You can immediately purchase the whole dataset just by clicking here.

Sprouts
Sprouts
Sprouts is having 39 locations within Florida. Read a detailed Sprouts location report in the U.S. You can immediately purchase the whole dataset just by clicking here.

Whole Foods Market
Whole-Foods-Market
Whole Foods Market is having 32 locations within Florida. Read a detailed Whole Foods Market location report in the U.S. You can also immediately purchase the whole dataset just by clicking here.

Costco
Costco
Costco is having 30 locations within Florida. Read a detailed Costco location report in the U.S. You can also immediately purchase the whole dataset just by clicking here.

Fresco y Mas
Fresco-y-Mas
Fresco y Mas is having 28 locations within Florida. Read a detailed Fresco y Mas location report in the U.S. You can also immediately purchase the whole dataset just by clicking here.

Trader Joe's
Trader-Joe-s-retail-store-locations-in-the-USA
Trader Joe's is having 25 locations within Florida. Read a detailed Trader Joe's location report of Trader Joe's in the U.S. You can also immediately purchase the whole dataset just by clicking here.

Download Data in Any Format
We offer all data sets in Excel or CSV files. You can reach us with a POI dataset in JSON, GeoJSON, Esri Shapefile, KML (Google Earth), or other custom formats at additional costs per format.

sources >> https://www.actowizsolutions.com/10-biggest-florida-grocery-chains-2023-depending-on-locations.php
keycloak の master レルムに admin/admin でログインできなくなる

OpenID Connect の Web 認証サーバ keycloak の検証していて不可解なバグに当たったので、同じ問題で苦労する人がいるかもしれないと思い、ここに書いておくことにしました。

## 現象

Keycloak　の admin コンソールで構築作業を実施していると、いつのまにか ユーザ admin/パスワード admin でログインしようとしても Invalid username or password. のエラーでログインできなくなってしまいました。

## 再現手順
以下の手順で再現します。
まず、 docker で keycloak を起動してください。
```
docker run -it --rm -p 8080:8080 -e KEYCLOAK_ADMIN=admin -e KEYCLOAK_ADMIN_PASSWORD=admin quay.io/keycloak/keycloak:latest start-dev
```
次にブラウザで管理画面 http://localhost:8080 を開いて以下を実行します。
1. admin/admin でログインする
4. Relm "test" を新規作成する
5. サイドバー 「Relm Settings」->「Login」 タブを開く
6. 「Email settings」の「Email as username」をオン
7. サイドバー 「Relm Settings」->「Email」タブを開く
8. 一番下の
To test the connection you must first configure an e-mail address for the current user (admin).
の下にある「Configure e-mail address」のリンクをクリックする
9. 開いた画面の Email フィールドに自分のメールアドレスを入れて「Save」をクリックする
10. 右上の admin をクリックして「Sign out」でログアウトする
11. admin/admin でログインしようとしても Invalid username or password. でログインできない

わかってしまえば簡単かもしれませんが、構築検証している中で、いつ admin/admin でログインできなくなったのかも分からず、かなりの長い時間悩んでいました。
調べた結果 7. の操作で意図せず maste レルムの admin ユーザの username を自分のメールアドレスに変更してしまっていたということがわかりました。
しかし、トリッキーな点が二点あって
- 手順7.で開いた画面で master レルムのユーザを編集していることが分からない（URLを見ると testレルムのユーザを編集しているように見えるし、パンくずの Users をクリックすると test レルムの空っぽのユーザリストが見える）
- Email as username をオンにしたのは test レルムであり、masterレルムの Email as username はオフのままであるのに master レルムの email アドレスを入れて usernameが変わってしまうのはおかしい。（実際に master レルムに移ってから admin のメールアドレスを設定しても username は変わらず、admin/admin でログインすることはでき、7.の Email の接続テストも成功する）

長い時間悩んだので同じ罠にかかる人が少しでも減るようにここに記載しておきます。[Keycloak 本家](https://github.com/keycloak/keycloak)は issue も PR も大量に滞留しているようで投稿するのがためらわれますが、時間ができたら issue を投稿しようと思います。
初心者向けのプログラミング言語を考察した話

# 背景
「初心者向けの言語はPythonだ！！」と、よく耳にする。 しかし、初心者にPythonを勉強してもらうと、変数型の意識が薄れてしまうことが多い。<br>
関数オブジェクトを渡す関数にintを渡したり、doubleを渡す関数にstringを渡したり。。。<br>
そこで、本当に初心者向けの言語は何かを考察してみる。

# 初心者向け言語の要素だと思うこと
- 入力・出力が簡単 -> 多用するのでやたら長いと困る
- 変数型に厳しい -> 初心者こそ変数の型は意識すべき
- 環境構築が簡単 -> 実行環境が手軽に用意できる
- Hello Worldがシンプルに記述できる -> ちょっとしたプログラムはシンプルに書ける
- オブジェクト指向の勉強ができる -> 必要なときに簡単にクラスを使える


# 結論
早速の結論だが、個人的に最も初心者向けだと思ったのは、**Kotlin**である。
Kotlinは[IntelliJ IDEA](https://www.jetbrains.com/ja-jp/idea/)をインストールすれば手軽に実行環境を用意することができる。
```kotlin
// 2整数の和を求める関数
fun add(v1: Int, v2: Int): Int {
    return v1 + v2
}

// はじめに実行される関数
fun main() {
    print("name: ")
    val name = readLine() // 入力
    println("Hello, $name!")

    val sum = add(2 , 3)
    println("2 + 3 = $sum")
}
```
自明な時は変数型を記述する必要はないが、IntelliJ IDEAでは自動で型を認識してくれるので、自然と型を意識できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3661114/b0da8d75-e9ce-b8ea-e59e-04ae9826bc37.png)


# 他の言語はどうなんだい？
上述のプログラムと同等のものを他の言語でも記述して比較する。
## C++
型はあるが、環境構築が大変。特にWindowsでは、環境変数を通すのが初心者には難しい。
[Pleiades](https://willbrains.jp/)のサイトからEclipseをインストールすれば簡単に環境構築できそう。<br>
あと入出力がちょっと特殊。
```c++
#include <iostream>
#include <string>

// 2整数の和を求める関数
// 関数は使用箇所より先に記述する
int add(int v1, int v2) {
    return v1 + v2;
}

// はじめに実行される関数
int main() {
    std::string name;
    std::cout << "name: ";
    std::cin >> name;
    std::cout << "Hello, " << name << "!" << std::endl;

    int sum = add(2, 3);
    std::cout << "2 + 3 = " << sum << std::endl;
    return 0;
}
```

## Java
Javaはとにかく長い。main関数も出力も長すぎる。クラスを知らない初心者にとって意味不明な「呪文」がたくさんある。
```java
import java.util.Scanner;

public class MyClass {
    // はじめに実行される関数
    public static void main(String[] args) {
        System.out.print("name: ");
        String name = new Scanner(System.in).nextLine();
        System.out.println("Hello, " + name + "!");

        int sum = add(2, 3);
        System.out.println("2 + 3 = " + sum);
    }

    // 2整数の和を求める関数
    private static int add(int v1, int v2) {
        return v1 + v2;
    }
}
```

## Python
Microsoft Storeでインストールするだけで環境構築できる。<br>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3661114/3dd67c23-fbdd-3027-56d1-ec13200d4d42.png)


また、上述の通り型が無い。アノテーションで型を書くことを強制できれば初心者向けかもしれない。関数のオーバーロードができないので、型が曖昧になりやすい。<br>
引数の型がint, float, np.arrayで動作可能にしたいときに、型を書いたり、条件分岐で処理を分けたりするのが大変。
```python

# 先頭から順に実行される
name = input("name: ")
print(f"Hello, {name}!")


# 2整数の和を求める関数
# 「: int」は型指定 ※書かなくても実行可
def add(v1: int,  v2: int) -> int:
    return v1 + v2

# 変数に型を付けることもできる
sum: int = add(2, 3)
print(f"2 + 3 = {sum}")
```


## その他
リクエストがあったら他の言語でも書きます。
VScodeでDraw.ioファイルがXML形式で表示される

以下のようにVScodeでDraw.io Integrationをインストールしても、xmlやその他のフォーマットで表示されてしまう問題の修正方法をまとめた。

>  Draw.ioのインストール等は、以下の記事を参照しました。
>
> <https://qiita.com/riku-shiru/items/5ab7c5aecdfea323ec4e>

## 発生した問題

`Visual Studio Code`で、Drawio Integrationをインストールし、 `*.drawio`ファイルを選択すると、xmlで表示されてしまう問題が発生。おそらく、ファイル選択時に、何か設定をいじってしまったが、戻し方がよくわからなかった。

![preview_xml.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1024959/4eb319f8-27bb-6f72-fef0-e76930c1dcc9.png)

## 解決法方

以下の手順で変更しました。

- `*.drawio`ファイルを選択し、右クリック
- `エディターで再度開くアプリケーションを選択`をクリック
- その後、Draw.ioを選択します。
 
そうすると、Editor画面が再度開き、編集が可能になります。

![preview_drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1024959/2319099d-c0f2-f459-2e59-b101c12221d6.png)

### 設定を永続化させる場合

もし、永続的にDraw.ioのエディタ画面にしたい場合、

- `*.drawio`ファイルを選択し、右クリック
- `エディターで再度開くアプリケーションを選択`をクリック
- `*.drawioの既定のエディターを構成する...`を選択する
 
そうすると、`*.drawio`ファイルは、Drawio Integrationの画面が表示されます。
今後の記事投稿について

# はじめに
2020年から2023年までの3年間、Qiitaで100本以上の記事を投稿してきましたが、今後の記事は[はてなブログ](https://nakashimaakio.hatenablog.com/archive)で投稿します。

https://nakashimaakio.hatenablog.com/archive

# 理由
[こちら](https://nakashimaakio.hatenablog.com/entry/2023/11/30/134953?_gl=1*7mykxh*_gcl_au*MjExMzA0NTY0OC4xNjk4MzA4MjY4)に書いてます。

https://nakashimaakio.hatenablog.com/entry/2023/11/30/134953?_gl=1*7mykxh*_gcl_au*MjExMzA0NTY0OC4xNjk4MzA4MjY4

# Qiitaの良かったところ
技術系の記事に強く、閲覧数が多かったです。

# 今後について
Qiitaのイベントに参加したくなったり、はてなブログはやっぱり違うなとなったらQiitaでの記事投稿を再開します。
SQL Server トリガーをデバッグする方法

以前、SQL Serverのテーブルに登録しているトリガーをSSMS（SQL Server Management Studio）でデバッグする方法をネットで探してやっていたのですが、最近なぜか見当たらず、忘れないように備忘録として自分で書いておく。

### 前提
* ストアドプロシージャがデバッグできるSSMSはバージョン17まで。18はストアドのデバッグができない。

https://sqlserver.work/2020/06/29/ssms%E3%81%A7%E3%81%AF%E3%82%B9%E3%83%88%E3%83%97%E3%83%AD%E3%81%AE%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%EF%BC%81/

### 方法
1. ストアドプロシージャを新規作成する。
　中身はトリガーが起動するようなSQL文を書く。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94958/818de090-57bf-528e-8bda-479f7a26e121.png)

1. 作ったストアドプロシージャを右クリック →「ストアドプロシージャの実行」を選択。
　(プロシージャのスクリプト化 → スクリプトの実行 ではなぜかエラーになる。)
　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94958/9e6b9812-c6eb-052d-a888-e53a8765ee38.png)

1. 「プロシージャの実行」画面でOKをクリック。
　ストアドのパラメータを設定していれば値を入力する。（以下の例では面倒なのでストアドにパラメータを設定していない。値を変えて何度も実行したい場合は、パラメータを設定しておいた方が便利。）
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94958/99adfa1a-7a6b-2bac-e003-b74020b336cf.png)

1. エディタにストアド実行のスクリプトが開く。「デバッグ」をクリック。
　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94958/a2bbe8cc-8c43-483f-45ce-dedd75114923.png)

1. ステップ実行状態になるので、ストアドを呼んでいる行までステップ実行してステップイン（F11またはメニューのステップ実行ボタンクリック）
　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94958/c8422eac-a9d0-d634-153f-2bb39d2dd54f.png)

1. 作成したストアドに入ってステップ実行状態になるので、トリガーが起動するSQL文までステップ実行してステップイン（F11またはメニューのステップ実行ボタンクリック）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94958/8ec145fc-6ffb-7bea-e07b-abebac4ce6f7.png)

1. トリガーに入ってステップ実行できる状態になる。後は目的に応じてデバッグ操作。ブレークポイントを置いておけば、次回からは途中の処理をスキップできる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94958/a3abd172-f3d6-6d5c-1a57-26d57350854c.png)

### 補足
1. ストアドプロシージャの作成はSSMS17でできるが、変更が以下のエラーでできない。オブジェクト操作等でできないことはSSMS18やVisualStudioで代用。
　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94958/0cae24f7-7692-9613-e747-e4033cb14656.png)


1. デバッグ実行時の実行やステップインのメニューボタンはちょっと離れたところに表示された。最初どこにあるのか気づかなかった。
　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94958/30abb0f2-0ff7-b6e1-7ba6-5209dfe59375.png)
1. Visual Studioでもできるかもしれないが、2022で僕はできなかった。デバッグ時になぜかステップインしてくれない。

以上