OmniAICreator/Qiita-1.07M huggingface dataset:
(staticでない)インナークラスにstaticなメンバを定義できない？？？

Java Gold11の勉強をしていて分からない設問があった。
(使用している参考書は[黒本](https://www.amazon.co.jp/%E5%BE%B9%E5%BA%95%E6%94%BB%E7%95%A5Java-SE-11-Gold%E5%95%8F%E9%A1%8C%E9%9B%86-1Z0-816/dp/4295012564)です。)

下記のコードを実行するとどうなるか？
```java:
public class Outer{
    void test(){
        Inner.message = "Hello, Java";
    }

    class Inner{
        private static String message;
        public void test(){
            System.out.println(message);
        }
    }
    
    public static void main(String[] args){
        Outer outer = new Outer();
        outer.test();
        outer.new Inner().test();
    }
}
```
A.「null」と表示される
B. 「Hello, Java」と表示される
C. コンパイルエラーが発生する
D. 実行時に例外がスローされる

<br><br><br><br>






正解は....「C. コンパイルエラーが発生する」だそうです。<br>
解説では、
「 (staticではない)インナークラスには、staticなフィールドやメソッドを定義することはできません。これらはあくまでもstaticなネストしたクラスにしか定義できないことに注意してください。反対に、staticなネストしたクラスには、staticなものも、そうでないものも定義できます」<br>

「Outerクラスの中にインナークラスInnerが定義されています。Innerはstaticなネストしたクラスではないため、前述のとおりstaticなフィールドやメソッドは定義できません。」
<br><br>
しかし、手元でコードを動かすと...コンパイルできるやんけ!!
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3531112/fbd54c53-20a7-c9e5-31eb-1d815aec88a1.png)

有識者の方、上記教えてください....
【Vue.js】レスポンシブ/画面のサイズによってコンポーネントを切り替える方法

### はじめに

こんにちは、Mottyです。最近Vueを業務で扱うことになったので、関連した項目を書き知るしていこうと思います。
今回はレスポンシブデザインについてです。

### 複雑なレスポンシブデザイン

レスポンシブデザインは画面のサイズに応じて最適な形にコードを整えるデザインです。これによってスマホやPCのような画面サイズの異なる媒体でもストレスなく閲覧でき、UXが向上することが期待できます。
#### Script部分

単純に横並び表示を縦にするのであればflex containerのプロパティを変えればよいですが、表示形式がかなり変わるなどの複雑な形になると、コンポーネントもしくはHTMLブロック単位でがらっと切り替えたほうがいいケースもあるかと思います。

windowのサイズが768以下かそれ以上かをbool型で受け取る変数を用意します。
ウインドウサイズの変更を感知し、画面サイズが大きいか否かの情報を常に返し続けるよう、イベントリスナーに登録します。
またtemplateにも反映されるので、変数の値はref()関数で監視します。

```Vue

<script setup>
import { ref, onMounted} from 'vue';


//screen sizeをbool型で受け取る
let isLargeScreen = ref(window.innerWidth >= 768);

// ウィンドウサイズが変更されるたびに実行される関数
function handleResize() {
    isLargeScreen.value = window.innerWidth >= 768;
}

onMounted(() => {
    // コンポーネントがマウントされた後、リサイズイベントリスナーを追加
    window.addEventListener('resize', handleResize);
});

</script>
```

#### template部分

次にtemplate部分の実装です。親側から差し込めるようにslot口を２つ用意します。
2つはそれぞれ表示させたりさせなかったりします。その条件はscreenが閾値より大きいかどうか、です。

```vue

<template>
<div>
    <div>
        <!-- 768px未満の場合、小さいコンテンツスロットを表示 -->
        <slot name="small" v-if="!isLargeScreen"></slot>
    </div>
    <div>
        <!-- 768px以上の場合、大きいコンテンツスロットを表示 -->
        <slot name="large" v-if="isLargeScreen"></slot>
    </div>
</div>
</template>
```

#### 親コンポーネントでの呼び出し

上記を<SwitchComponent>とし、親側からは以下のように呼び出します。
templateの間に表示させたいコンポーネントをそれぞれ差し込みます。

```vue
<template>
    <SwitchComponentSystem>
      <template #small>
        <ComponentA/>
      </template>
      <template #large>
        <ComponentB/>
      </template>
    </SwitchComponentSystem>
</template>
```

これによってComponentAとComponentBを切り替えられるようになりました。

#### 終わりに

内部的には２パターンを作って、見せる/見せないを切り替えています。
cssのdisplayプロパティだけでも制御は可能だと思いますが、より汎用的なコンテナとして使いまわすことを期待して作成するに至りました。
[メモ] batファイルからPythonファイルを呼び出す

# フォルダ内の画像サイズをチェックする方法

画像フォルダ内にbatファイルを配置し、
Cドライブ内のbatchフォルダに格納されている
Pythonファイルを実行して
画像サイズが適切かを調べる処理

```bat
@echo off
setlocal

REM 画像の横サイズを指定
set "WIDTH=3840"
REM 画像の縦サイズを指定
set "HEIGHT=2112"

REM カレントディレクトリを取得
set "CURRENT_DIR=%CD%"

REM Pythonスクリプトを実行
python "C:\batch\test.py" "%CURRENT_DIR%" "%WIDTH%x%HEIGHT%"

endlocal
echo Waiting for 5 seconds...
timeout /t 5 /nobreak >nul
exit
```
カレントディレクトリを、
指定パス内のPythohnファイルに渡す

```python
import os
import sys
from PIL import Image

def main():
    # カレントディレクトリを取得
    current_dir = sys.argv[1]
    file_size = sys.argv[2] if len(sys.argv)>2 else ""
    print(f"Current directory: {current_dir}")
    print(f"Ideal Image Size: {file_size}")

    files = os.listdir(current_dir)
    print("----- file check -----")

    # 指定のフォルダ内の画像ファイルを処理
    for filename in files:
        if filename.lower().endswith(('.png', '.jpg', '.jpeg')):
            image_path = os.path.join(current_dir, filename)
            try:
                with Image.open(image_path) as img:
                    width, height = img.size
                    if file_size==f"{width}x{height}":
                        print(f"Image: {filename}, Size: {width}x{height}")
                    else:
                        print(f"\033[91mImage: {filename}, Size: {width}x{height}\033[0m")
            except Exception as e:
                print(f"\033[91mUNKNOWN ERROR : {filename}\033[0m")
    print("----- file check end -----")
    print()

if __name__ == "__main__":
    main()

```

https://www.nomuramath.com/kv8wr0mp/
RPAの開発言語 Power Automate Desktop

Power Automate DesktopではRobin（ロビン）と呼ばれる言語が使用されています

このRobin言語を使って作業を行うことはありませんが
勉強しようとしたところ、公式サイトが閉鎖されていました
以下のサイトですが、表示されなくなっています
https://robin-language.org/

また別のRPAでは
「WinActor」でカスタマイズする際に用いるプログラミング言語は「VBScript」と公式で掲載されており
「UiPath」のプログラミング言語は「. VB.net」とのことです
なんか口ずさみたくなるIT用語

# はじめに
名古屋でWebエンジニアをしている片田です！

社内でつよつよエンジニアと話した時や、技術本を読んでいて口ずさみたくなる横文字や用語がたくさんあるので暗記用のメモを執筆しようと思います！
(用語の意味は間違っている可能性があります、ご了承ください)

#### ロゼッタストーン
保守担当者に対する簡潔な手引書のこと

#### プロシージャ
戻り値を返さない関数のこと(本質的には間違っているかも)

#### KISSの原則
Keep It Simple, Stupidの略
訳: シンプルなコードを書け、たわけ

#### less is more
訳: より少ないことは、より豊かである(余分なコードは書くべきでない)

#### オッカムの剃刀
ある事柄を説明する時に、必要以上に多くの前提を仮定するべきではない
(無駄な前提を排除するのに剃刀を使うのか...？)

#### インピーダンス・ミスマッチ
異なる構造の2つのもの(プログラムとかネットワークとか)を繋げる際にミスが起きること

#### レガシーコード
昔に作られたコード or テストが存在しないコード

#### YAGNI
You Aren't Going to Need It.の略
訳: それはきっと必要にならない
コードは必要最低限で書く(ソフトウェアにも当てはまる)

### おわりに
随時更新していきます！
中年勇者ぼうけんのしょ　７日目

お久しぶり？です


新しい現場へ配属になって一週間がたったのでこの一週間で経験したことについてお話して自分の経験の蓄積とできたらいいなと思ったのでこれから一週間ごとに2記事書いていこうかと思います！！！
日記とアウトプット編とするので今回は日記！！



受注クエスト紹介
----
・セキュリティ機器の運用保守

過程（1/？)
一週間でシステムをすべてアップグレードするためにかかれた簡易手順書のレビューをしろ！(目標達成)

過程（2/？）イマココ
バージョンアップとセキュリティパッチの適用

受注サブクエスト
-----
WSUSで23H2が表示されない事象が発生！戦闘員は至急配置につき原因を調査せよ！


WSUSのLater UPGRADEにチェックが入っていないことが原因？
GPOも見に行った方がいいかも、、、
現在調査中



戦利品
-----

・20EXP
・Linuxのコマンド知識
・バックアップ系ソフトの名前
・UNIXベースのサーバOSの名前
・大規模なネットワーク環境でのバックアップの取り方
・WSUSの知見
・食堂のおいしいお米

エンカウントした敵
-----

・フル英語の手順書
・見たことも聞いたこともない用語と機器名
・参考資料が共有されない簡易手順書
・外部ネットワークへアクセスできないPC

現在装備とパーティ
-----

・スマホ
・私（中年勇者）
・ベテラン魔導士（大先輩エンジニアさん）

攻略の仕方
-----

必要だと思われる単語はメモとってスマホで調べる。
手順書と比較してコピぺしただろう所を見つける
サーバー名相違や手順の抜け漏れがないかを調べて報告
おいしいお米食べてエネルギーチャージ
WSUSとGPOは少しだけ経験があったので経験頼りにあたりをつけてベテラン魔導士へ相談

→オンスケで一週間終了

ディストリビューションによってaptだったりyum(dnf)だったり推奨されるコマンドがちがって面白かったです。
いままでやってきたことと違うことをするのは新鮮でリフレッシュになる。


仕事の自分事化ができる人間になるぞー！！


今回は蓄積のための日記になりました。
明日は時間あったらコマンド表作ってupしますね

LPICかLinuCレベル1の対策になるはず
テキストをロジックごとにフィルタリングする

テキストをロジックごとにフィルタリングしたいときがありますね。日本語が怪しい気もしますが、あることにします。
私は、青空文庫で`「` と `」` の数が不釣り合いな文章を発見するためにしました。
高校数学の集合論の思い出話をするよりサンプルコードを読んでもらう方が早いと思うので読んでください。

- [尾崎紅葉 金色夜叉](https://www.aozora.gr.jp/cards/000091/files/522_19603.html)

## サンプルコード

```js
/**
 * 引数の配列に基づいてテキストをロジックごとにフィルタリングする関数。
 * @param {string[]} texts - フィルタリングするテキストの配列。
 * @param {string[]} names - フィルタリングに使用する名前の配列。
 * @returns {Object} - フィルタリングされたテキストを含むオブジェクト。
 *                      - `and`: すべての名前が含まれるセクション。
 *                      - `xor`: いずれかの名前が含まれるが、すべての名前が含まれていないセクション。
 *                      - `not`: いずれの名前も含まないセクション。
 */
function logicFilter(texts, names) {

  // 名前の配列に含まれるいずれかの名前が含まれるセクションをフィルタリング
  const includesAny = sec => names.some(name => sec.includes(name));

  // 名前の配列に含まれるすべての名前が含まれるセクションをフィルタリング
  const includesAll = sec => names.every(name => sec.includes(name));

  return {
    // 名前の配列に含まれるすべての名前が含まれるセクションをフィルタリング
    and: texts.filter(sec => includesAll(sec)),
    // 名前の配列に含まれるいずれかの名前が含まれるが、すべての名前が含まれていないセクションをフィルタリング
    xor: texts.filter(sec => includesAny(sec) && !includesAll(sec)),
    // 名前の配列に含まれるいずれの名前も含まないセクションをフィルタリング
    not: texts.filter(sec => !(includesAny(sec) || includesAll(sec)),
  };
}


// 使用例
const names = ["「", "」"];
const text = document.querySelector("body > div.main_text").textContent.split("\n");
const obj = logicFilter(text, names);
console.assert(text.length === obj.and.length + obj.xor.length + obj.not.length
 , "南無三!");
console.log(JSON.stringify(obj, null ,4));
```

- `obj.xor` がカッコが片方しかない行の配列
- `obj.and` がカッコが完備している行の配列
- `obj.not` はそれ以外の行の配列

を意味しています。

今回のオブジェクトを見ることで、「金色夜叉」ではカッコの数は同じだが、長いセリフに改行を入れていることがわかります。

## コピペ用抽象化

```js
/**
 * キーワードに基づいて配列をフィルタリングします。
 * @param {string[]} array - フィルタリングする配列
 * @param {string[]} keywords - フィルタリングに使用するキーワードの配列
 * @returns {Object} - フィルタリングされた結果のオブジェクト
 */
function logicFilter(array, keywords) {
  /**
   * 配列の要素がすべて指定されたキーワードを含むかどうかを確認します。
   * @param {string} item - チェックする要素
   * @returns {boolean} - すべてのキーワードが含まれる場合はtrue、それ以外の場合はfalse
   */
  const includesAll = item => keywords.every(keyword => item.includes(keyword));

  /**
   * 配列の要素がいずれかの指定されたキーワードを含むかどうかを確認します。
   * @param {string} item - チェックする要素
   * @returns {boolean} - いずれかのキーワードが含まれる場合はtrue、それ以外の場合はfalse
   */
  const includesAny = item => keywords.some(keyword => item.includes(keyword));

  return {
    // すべてのキーワードを含む要素の配列を取得します
    and: array.filter(item => includesAll(item)),
    // いずれかのキーワードを含み、すべてのキーワードを含まない要素の配列を取得します
    xor: array.filter(item => includesAny(item) && !includesAll(item)),
    // いずれのキーワードも含まない要素の配列を取得します
    not: array.filter(item => !(includesAny(item) || includesAll(item))),
  };

}
```
【ざっくり分かるGit】普通の保存とコミットの違い

## 早めの結論
エディタで保存するのはご存知の保存で，ファイルの変更内容を保存
コミットは変更履歴（いつ・何を・どう変更したのか）を保存

## 具体例
以下の操作を行いながら，具体的に普通の保存とコミットの違いを見ていきます

1. main ブランチでテキストファイルを作成
1. dev-a ブランチを作成し，dev-a ブランチでテキストファイルを変更して保存
1. エディタを再起動
1. dev-a ブランチでコミット

### main ブランチでテキストファイルを作成

![歴史改変前.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/d70386e7-815f-cdaa-ca6a-bab1b8c2a0b6.png)

この時の log はこのようになっています
「歴史改変前のコミット」が最新の変更履歴になっています

![mainログ_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/85c784e5-02ae-02dd-f285-fee049afffd9.png)

###  dev-a ブランチを作成し，dev-a ブランチでテキストファイルを変更して保存

dev-a ブランチを作成し，dev-a にブランチを切り替える

```
git checkout -b dev-a
```

![dev-aブランチ作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/3203b651-bd60-b3b8-b1cb-33b3215476bb.png)

「dev-a で編集」をテキストファイルに追記して保存

![dev-aで編集.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/17d7aa96-5e87-1d27-6baf-3cee8fb1aeae.png)

この状態では，普通の保存はしてコミットはしていない状態です

### エディタを再起動

普通の保存はしてコミットはしていない状態でエディタを再起動してみます
当然といえば当然ですが，「変更内容」は保存されているので
再起動したら変更内容が飛んでしまいましたみたいなことはないことがわかりますね

![dev-a編集後に再起動.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/a66442f2-b496-cd98-c39a-6fda18978c47.png)

### dev-a ブランチでコミット


以下のコマンドで dev-a にいる状態でコミットします
```
git add .
git commit -m "dev-aでコミット"
```

最新の変更履歴が「dev-aでコミット」になっていることがわかります

![dev-aログ_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/3f2f364b-a79a-297a-aa24-cfe83fb64d82.png)

この時の main ブランチの変更履歴は以下のようになっています
「dev-aでコミット」がいないことがわかりますね
先ほどのコミットは dev-a で行ったので，main ブランチとはまだ無関係です

![mainログ_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/44d263b7-b9c3-43e3-ae76-604783fba181.png)
Awkでログを加工処理する場合のメモ


ウェブサーバのログなどは、独自にログのフォーマットを調整している場合は別ですが、空白で区切られている場合が多いですね。その中に、ダブルクオーテーションや[]で括られている日付フィールドなどが出てきます。
空白ではなくタブ区切りであれば、awkでフィールドごとに処理するのが簡単になりますが、そうではない場合でも、GNU awkの場合だとFPATを用いることで対応が簡単になります。  
sedなどでログをタブ区切りに変換するのも一つの手ではありますが、空白区切りやカンマ区切りのデータをawkでそのまま扱いたい場合、下記のようなFPAT指定で対応できます。

## ダブルクォーテーションで区切られている箇所を１つのフィールドとして扱いたい
### FPATについて
Field Patternの略でしょうか？
FPATを用いる場合は、FS、FIELDWIDTHSは同時には扱えません。[^1][^2]
[^1]: https://www.gnu.org/software/gawk/manual/gawk.html#Working-With-Comma-Separated-Value-Files
[^2]: https://www.gnu.org/software/gawk/manual/gawk.html#FS-versus-FPAT

### 空白区切り
```sh
awk -v FPAT='[^ ]*|\"[^\"]*\"'
```
```sh
awk -v FPAT='[^[:space:]]*|\"[^\"]*\"'
```
### カンマ区切り
```sh
awk -v FPAT='[^,]*|\"[^\"]*\"'
```
### タブ区切り
```sh
awk -v FPAT='[^\t]*|\"[^\"]*\"'
```

## 日付が[]で括られている場合
httpdのログで、見かける形式。
+ アクセス日付が[]で括られる。
+ リクエスト部分やユーザーエージェントが""で括られている。
### 空白区切り
```sh
awk -v FPAT='[^ ]*|\"[^\"]*\"|\\[([^\\[\\]])*\\]'
```
### カンマ区切り
```sh
awk -v FPAT='[^,]*|\"[^\"]*\"|\\[([^\\[\\]])*\\]'
```
### タブ区切り
```sh
awk -v FPAT='[^\t]*|\"[^\"]*\"|\\[([^\\[\\]])*\\]'
```
```sh
awk -v FS="\t"
```

## awkでタブ区切りに変換する場合
### 空白区切り
```sh
awk -v FPAT='[^ ]*|\"[^\"]*\"|\\[([^\\[\\]])*\\]' 'BEGIN{OFS="\t"}{$1=$1;print}'
```
### カンマ区切り
```sh
awk -v FPAT='[^,]*|\"[^\"]*\"|\\[([^\\[\\]])*\\]' 'BEGIN{OFS="\t"}{$1=$1;print}'
```
`$1=$1`は、OFSを$0に反映させるための、おまじないです。[^3]

#### 補足
正規表現でアスタリスクを(*)指定しているのは、0文字のフィールドへの対応です。  
タブ区切りへの変換ではなく、カンマ区切りから空白区切りに変換する場合には、０文字のフィールドをダブルクオーテーションで括るなどの配慮が必要でしょう。  
またタブ区切りのデータをawkで扱う場合、`FS='\t'`を指定しましょう。  
0文字のフィールドがある場合に、タブが連続で出現します。FSを指定しない場合、連続したタブは連続した空白と同じく一つの区切りとみなされ、フィールドがずれるので注意が必要です。

## 参考サイト

https://zenn.dev/forcia_tech/articles/20230111_yoshinari


https://qiita.com/ichiro-kazusa/items/7cd010908b53d6dd971b


[^3]: https://qiita.com/ichiro-kazusa/items/7cd010908b53d6dd971b
VLM(Vision Language Model) が組み込みデバイスで動く時代が来た

組み込みデバイスでVLMが動かしたいと思っている人は、以下のURLにアクセスしてくれ。

https://www.jetson-ai-lab.com/tutorial_nano-vlm.html

Jetson AGX Orinなどで、潤沢なディスクスペースを確保すると、JetPack6で動作できる。

タイプした英文テキストを解釈して、その指示にしたがって
画像もしくは動画を解析してくれる。

以下は上記のURLからの引用だ。

![Screenshot from 2024-04-13 12-38-22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83761/bf2f40ad-29ed-c331-911c-8caa63132591.png)

![Screenshot from 2024-04-13 12-38-44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83761/3cae22de-fc13-2bb1-d47f-36ce96091d9b.png)

Requirement
JetPack 6 (L4T r36.x)
であるので
JetPack 6 にバージョンを上げる楽しみにもなる。
[初心者向け] Next.jsの革新的な「appディレクトリ」でプロジェクトを始めよう

# はじめに
Next.jsはバージョン13で大きなアップデートを迎え、「appディレクトリ」という新しいファイル構造が導入されました。この新構造は、従来の「pagesディレクトリ」を進化させ、より柔軟なルーティングとレイアウト管理を可能にします。この記事では、この新しいディレクトリ構造を用いて、Next.jsプロジェクトのセットアップからデプロイまでのプロセスを解説します。

# 必要な環境
開発を始める前に、Node.jsがインストールされていることを確認してください。Node.jsは公式サイトからダウンロードできます。また、コードの編集にはVisual Studio CodeのようなIDEが推奨されます。

# プロジェクトのセットアップ
```
npx create-next-app@latest example-project
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3760374/7afa3204-672f-c5e0-d0e0-e9980364b7b8.png)
1. *TypeScript*：JavaScriptに型システムを加えた言語で、コードの安全性を高め、バグの早期検出に役立つ。また開発過程での自動補完やコードのリファクタリングが容易になる。
1. 
2. *ESLint*：より読みやすく、保守しやすいコードを書くことが促される。

3. *Tailwind CSS*：予め定義されたクラスを利用して迅速にスタイリングを施すことができる。

4. *src/ directory*：特に大規模なプロジェクト向け。

5. *App Router*：これはNext.jsが提供する新しいルーターで、より宣言的で直感的なルーティングが可能になる。

6. *alias*：エイリアスを使用すると、ディレクトリ構造が複雑になっても、より簡潔で読みやすいインポート文を書くことができる。
### 作成したプロジェクトに入る
```
cd example-project
```

# 開発サーバーを起動する
:::note info
下記のようにpackage.jsonを修正するとページが自動的に出るので便利です。
:::
```diff_javascript:package.json
{
  "name": "example",
  "version": "0.1.0",
  "private": true,
  "scripts": {
-   "dev": "next dev",
+   "dev": "http://localhost:3000 & next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.0.4"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "eslint": "^8",
    "eslint-config-next": "14.0.4"
  }
}

```
下記コマンドを実行する。
```
npm run dev
```
ローカルホストの3000番でホストされています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3760374/c4df9fc7-c39e-667f-5ccb-399f7661524f.png)

# まとめ
「appディレクトリ」を使用することで、Next.jsのプロジェクトはさらにモジュラーで管理しやすくなります。この新しいアプローチを利用して、より効率的かつ効果的なWebアプリケーションを開発しましょう。更に学ぶためには、Next.jsの公式ドキュメントを参照してください。

https://nextjs.org/learn-pages-router/basics/create-nextjs-app
「あの赤い丸 ⛔️」を消せ！RubyMine (およびJetBrains系IDE、VS Code、Vim) でファイルの末尾に改行文字を自動的に付与する設定

## はじめに
GitHubでプルリクエストのコードレビューをしたりすると、たまにこんな赤い丸⛔️を見かけませんか？

![Screenshot 2024-04-13 at 11.23.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7465/7f5553c3-1fe6-67f7-a6b8-9ea61e058228.png)

これはファイルの末尾が改行文字で終わっていないことを示す警告マークです。

改行文字を `\n` で可視化するなら、本来は

```
  end\n
end\n
```

こうなっているべきなのに、実際は

```
  end\n
end
```

こうなって保存されている、ということです。

実際問題、ファイル末尾が改行文字で終わっていないからといってプログラムがおかしな動きをするということは滅多にありません。
ですが、[POSIX](https://ja.wikipedia.org/wiki/POSIX)[^1]の規格では「テキストファイルの末尾は改行文字で終わらないといけない」と決まっているため[^2]、どこかで思いがけないトラブルが起きるかもしれません。

[^1]: Portable Operating System Interface＝オペレーティングシステム (OS) の標準的なインタフェースおよび環境を定義するIEEE規格
[^2]: https://pubs.opengroup.org/onlinepubs/9699919799/basedefs/V1_chap03.html#tag_03_206

たとえば、上の画像に示した`fizz_buzz.rb`は一見11行あるように見えますが、wcコマンドで行数を調べると「10行」と表示されます。

```
# ファイルの末尾が改行文字で終わっていない場合
$ wc fizz_buzz.rb 
      10      28     137 fizz_buzz.rb
```

ファイルの末尾が改行文字で終わっていれば11行と表示されます。

```
# ファイルの末尾が改行文字で終わっている場合
$ wc fizz_buzz.rb 
      11      28     138 fizz_buzz.rb
```

こんな感じでファイルの末尾が改行文字で終わっていないと「あれ？」と思うような不思議な挙動に遭遇する可能性があります。

とはいえ、人間がいちいちファイルの末尾は改行文字で終わらせようと努力するのは非効率です。
エディタやIDEの設定で自動的に改行文字が付与されるようにしましょう。

## RubyMineで自動的に改行文字を付与する設定はどこ？

RubyMineであれば、

Settings > Editor > General > Ensure every saved file ends with a line break

のチェックをオンにすれば自動的に改行文字が付与されます。

![rm.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7465/d7edf539-45de-9d66-692e-2a3f8797bd12.png)

RubyMineに限らず、JetBrains社製のIDEであればどれも同じ設定でいけるはずです。

- IntelliJ IDEA
- PyCharm
- WebStorm
- PhpStorm
- AppCode
- CLion
- DataGrip
- Rider
- GoLand
- etc

## VS Codeの場合は？

VS Code (Visual Studio Code) の場合は、

Settings > "Insert Final Newline" で検索 > Insert Final Newline

のチェックをオンにすれば自動的に改行文字が付与されます。

![Screenshot 2024-04-13 at 12.06.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7465/3cc077bf-b102-7a87-7b42-4563f2cb7e46.png)

## Vimの場合は？

Vimはデフォルトで末尾に改行文字が付与されます。

あえてその動作をオフにするオプションもあるみたいですが、特別な理由がない限り、わざわざ設定する必要はないでしょう。

https://stackoverflow.com/a/16114535/1058763

## まとめ
というわけでこの記事ではRubyMine (およびJetBrains系IDE、VS Code、Vim) でファイルの末尾に改行文字を自動的に付与する設定を紹介しました。

一度設定を入れてしまえばあとは何も考えずに済むのですが、この設定を入れていない人も多いのか、コードレビューをしているとまあまあの頻度で「あの赤い丸⛔️」に遭遇します。

みなさんが使っているエディタやIDEで、ちゃんとこの設定が入っているかチェックしてみてください。
また、コードレビュー中に「あの赤い丸⛔️」を見かけたらこの記事のURLを教えて「ちゃんと設定しておこうね！」と伝えてやってください😄

![Screenshot 2024-04-13 at 12.16.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7465/e840ff5f-7111-d815-2afe-f67346d0f23b.png)
Zotfileでうまく同期されない

# 初めに
複数端末でmenndleyを使うといちいちログアウトさせられることに嫌気がさしてzoteroを使い始めた。
無料版では同期できるファイル量に上限があるが、zotfileというプラグインを入れることでクラウドストレージを介して同期することができるようになる

# セットアップ
下記のノートがとても分かりやすかったです。
https://note.com/sdeso/n/n013952313c1b

# どのように同期されているのか
zoteroでは論文のメタデータ（著者名、出版年,etc）と論文本文のpdfが分かれて保存される。
上記セットアップでセットアップを行うと

* 論文メタデータ...zoteroアカウントを通して同期
* 論文本文...zotfileの設定で選択したお好みのクラウドストレージ内のフォルダを通して同期

というように分かれて保存される.


正常動作時のzoteroでの論文同期は以下のように行われると考えている。

1. ユーザーがファイルをドラッグアンドドロップしたりする
2. zoteroがネットのデータベース？を漁ってメタデータ生成する。生成されたメタデータはローカルのフォルダに保存されzoteroアカウントを通して保存される。
3. 設定された正規表現に基づいてzotfileが論文本文pdfのrenameを行いクラウドストレージ内のフォルダに保存する。


# zotfileでうまく同期されない

しかし幾つかの場合においてzotfileで同期できない場合がある。最たるものがメタデータが何らかの原因で生成できない場合である。zoteroが漁ってくるデータベース上にないものなどは上手くメタデータが生成されないっぽい？？？？
![スクリーンショット 2024-04-13 115822.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3028365/a75941f1-69be-4d94-10fa-749abad69acd.png)

このようにしてzotfileでうまく保存できない場合、pdf本文はメタデータと同じローカルのフォルダに保存されてしまう

# 解決法
下図において書類アイコン:page_facing_up:がメタデータ、pdfアイコンが論文本文のpdfである。論文本文pdfにリンクアイコン:link:がついているものはzotfileで正常に同期されている
![スクリーンショット 2024-04-13 114940.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3028365/a4f78b0c-121b-5534-6af6-d0f945f1d094.png)

解決方法は簡単でzotfileでの同期がうまくいっていない論文のメタデータを右クリック→manage atachmens→rename and moveをすればよい。
【ChatGPT＋DALL-E3】またまたSelect機能。


　どうも、カーブミラーです。

　今回は、またまたSelect機能です。

:::note info
本記事は、ChatGPT（有料版）
＋DALL-E3で行なっております。
画像はあります。　あしからず。
:::

　まずは、ニュース。

　私のところの
　　ChatGPTが、
　　　Turboになった模様。
***
***user***
あなたのラストナレッジカットを教えてください

***ChatGPT***
私の最後の知識更新は2023年12月です。その時点での情報に基づいて答えますので、最新の情報についてはそれ以降の変更があるかもしれません。何かお手伝いできることがあれば、どうぞお知らせください。
***

　これが確認方法です。
　　2023年12月に
　　　なっていれば、
　　　　Turboになっています。

　ChatGPTに尋ねると
　　違うとは言いますが🤣
***
　昨日（2024/04/12）の
[【ChatGPT＋DALL-E3】Selectでの削除は簡単だった。](https://qiita.com/kabumira/items/5e52f072dc84940bb92f)
　　についてですが、
　　　昨日あのあと
　　　　やってみたら
　　　　　何がいけなかったのか
　　　　　　ダメでした。

　確実に消したい場合は
　　プロンプトを書いた方が
　　　いいみたいです。
***
　さて、
　　本題です。

　Select機能で
　　ここまでできるのか
　　　のご報告です。

　今回は、
　　都会の宝石店を
　　　描画しました。

　ショーウィンドウが
　　映像の流れるディスプレイとして。
![1712975040714.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457238/5e4101e8-12ed-b749-bac5-0bde5cc7bfad.jpeg)


　これのショーウィンドウを
　　Select機能で塗りつぶして
　　　“映像を変えて”と送信。

　そうやって
　　計四枚の画像を生成しました。

　それだけでは
　　単に、画像を生成した
　　　だけになってしまいます。

　四枚をつないで
　　アニメ化しました。
![animated_jewelry_store_display.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457238/1e399c94-d46d-b31f-9d65-642ccfe5a560.gif)

　こうすると
　　四枚の違いが
　　　うまくショーウィンドウを
　　　　目立たせていますよね。

　みなさんの
　　作品制作の糧に
　　　なれば、幸いです。

　今回は、ここまで。
PostmanからのPOSTをPHPの$_POSTで受け取る方法

## はじめに
備忘録
タイトルの通りです。
どなたかのお役に立てれば幸いです。

## 方法
Postmanのリクエスト設定画面で、`Body`タブの中の`x-www-form-urlencoded`にキーと値を設定することにより、`$_POST`で受け取れるようになります。
可用性、信頼性、保守性の話

可用性、信頼性、保守性まわりの話をまとめてみたよ。

# 可用性

```math
可用性 = \frac{サービス時間 - 停止時間}{サービス時間} \times 100%
```

サービスが合意されたサービスの提供時間に対して、どれだけ提供できるかの能力のこと。
ここでのサービス時間 (AST : Agreed Service Time) とは、合意されたサービス時間のこと。

# 信頼性

## 平均サービスインシデント時間 (MTBS : Mean Time Between Searvie Incident)

```math
MTBS = \frac{稼働時間}{停止回数}
```

サービスが停止してから次にサービスが停止してしまうまでの平均時間。

## 平均故障間隔 (MTBF : Mean Time Between Failures)
 
```math
MTBF = \frac{稼働時間 - 停止時間}{停止回数}
```

サービスが復旧してから次にサービスが停止してしまうまでの平均時間。
連続してサービスを利用できる時間の平均。

# 保守性

## 平均サービス回復時間 (MTRS : Mean Time to Restore Service)

```math
MTRS = \frac{停止時間}{停止回数}
```

サービスが停止してから復旧するまでの平均時間。
proxmox で vm (alpine) を 作ってNSDで DNSサーバを作る

proxmox で DNSサーバを作る

linuxディストリビューション はalpine 、DNSサーバ は NSD とします。

個人用メモです。 迷ったところを メモしています。

https://www.alpinelinux.org/

から 

VIRTUAL タイプの X86_64 の ISO を ダウンロードします。

https://dl-cdn.alpinelinux.org/alpine/v3.19/releases/x86_64/alpine-virt-3.19.1-x86_64.iso

執筆時点では 3.19.1 が 最新のようです。

proxmoz の local に isoファイルを アップロード しました。

このURL を 指定して 直接 ダウンロード することもできます。

新しいVM を 作ります。

1core 2GB-ram 32GBストレージ で 用意しました。
ネットワークは ブリッジです。

vmを 起動すると シェルが起動するので

setup-alpine コマンドを 実行します。

キーボードレイアウト は us/us を 選択
インストール先は sda  、 タイプは sys を選択
ローカルユーザ を つくります。
ssh-server を 作ります。
ネットワークは 固定IP にしました。

すすめていくと インストールが 終了して reboot して インストールは完了です。

ssh user@固定IP して ログインできることを 確認
su コマンドで ルートに なれることを 確認

```shell
apk add nsd
```
して NSDを インストール

むかし ubuntu で 作った DNSサーバから 設定ファイルを コピー

```shell
/etc/init.d/nsd start
```

で 起動できます。

```shell
rc-update add nsd
```
このコマンドで 再起動後に 自動起動します。

NSD の 設定は 先人の 記事を 参考にしてください。

https://qiita.com/higasa_JJ/items/878611ec347efd2c333a


この記事で でてくる drill コマンドは インストールされてないので
```shell
apk add drill
```

します。



コンテンツDNSサーバの ポート番号を 8053 で 起動しているので 
-p オプションで ポート番号を 指定して 設定を 確認します。

```shell
drill -p 8053 example.com @127.0.0.1
```


ポートフォワードで インターネットからの 問い合わに回答できるようにします。


ルータの 設定で NAPTの設定を 変更方法は YAMAHA の ルータの場合

```shell
nat descriptor masquerade static 108 2001 固定IP tcp domain=8053
nat descriptor masquerade static 108 2002 固定IP udp domain=8053
```
って 感じです。

セカンダリDNS を もう一台の proxmox で つくります。

おや？ セカンダリを 起動したら エラーした

```text
May  3 20:00:54 verdy daemon.notice nsd[2510]: nsd starting (NSD 4.7.0)
May  3 20:00:54 verdy daemon.err nsd[2510]: error for cert file: /etc/nsd/nsd_server.pem
May  3 20:00:54 verdy daemon.err nsd[2510]: error in SSL_CTX use_certificate_chain_file crypto error:80000002:system library::No such file or directory
May  3 20:00:54 verdy daemon.err nsd[2510]: and additionally crypto error:10080002:BIO routines::system lib
May  3 20:00:54 verdy daemon.err nsd[2510]: and additionally crypto error:0A080002:SSL routines::system lib
May  3 20:00:54 verdy daemon.err nsd[2510]: could not setup remote control TLS context
May  3 20:00:54 verdy daemon.err nsd[2510]: could not perform remote control setup
```

nsd-control-setup コマンドで 証明書を つくるようです。

前のサーバでは これで うごいてたのにな

バージョンアップして それで 設定ファイルが 増えたのかな。


```shell
nsd-control-setup
```

したあとに 起動したら うまく いったようです。

ゾーンの 転送も うまくいったことを ログで 確認しました。

プライマリで zone ファイルを 修正したあとは次のコマンドを 実行します。
```shell
nsd-control reload
```
すると ゾーンファイルが 読み込まれて 転送されます。

転送されたことは セカンダリ側で ログを 確認するか ゾーンファイルを 出力して 確認する。

```shell
tail /var/log/messages
```
SOA が 更新されていることが ログで 見つけられます。

```shell
nsd-control write
```

ゾーンファイルとして ただしく 転送されていることが 確認できました。
データサイエンティストがKaeka（カエカ）に申し込んでみた

## Kaekaとは？
話す力を磨き、確実に伝える力をトレーニングする　サービス
なんと、話す力を数値で可視化できるそうです　楽しみ✨
https://kaeka.jp/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3091004/e0061725-f155-0bde-402a-172ee47d8e2c.png)
※KaekaのXより引用

最近、Googleトレンドで見てもサービス認知がメキメキ上がってきているもよう…！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3091004/0bc514f4-86a1-d570-aa1e-41368c05e4be.png)

## Kaekaに申し込んだ理由
・社内会議で作成した資料を、適切に伝える力が欲しいと感じた
・昨年は、心理的安全性や1on1といった聴く力にフォーカスをしたので次は話す力と考えた

## まずは個別相談会
・サービス紹介や費用感の説明を、実際にコーチとして活躍されている方から1:1で説明してもらえる。
　オンラインでも受講できるのはいいですねー
・実際に即興スピーチをして、フィードバックをもらえる
　ここだけでも参加した意味がある
　私は、「嬉しい話を、嬉しそうに話せるのはいいこと」とのフィードバック。
　⇒内容と非言語（表情など）のセットで伝わる　という点を理解できた。
・トータル１時間

## 受講の流れ
代表的な６か月コースに内容やスケジュールは、下記で確認できる。
https://kaeka.jp/courses/6month

・月12時間程度　学習時間の確保がいる
・マンツーマンレッスンと集団レッスンがある
・リアルは銀座のみ。

## もっと知りたい方に・・・
Pivotチャンネルでの紹介がわかりやすいです。
代表の千葉さんが、素敵です！
https://youtu.be/9uJ3bqP3H6Q?si=6J0nGAmFRta7FckX

## 最後に
サービス検討されている方の参考になれば幸いです。
※受講の感想は後日投稿したいと思います～！
プログラミング初心者がFlutterを始めるとどうなるか

# はじめに
自分はFlutterからプログラミングを始めました。**完全に独学で**です。
プログラミングの基礎がないままFlutterを始めたことで、色々と大変なことがあったので初心者目線で何につまずいたかを振り返りたいと思います。

# 基礎が全く無い人の世界
自分は公式ドキュメントや動画教材, 書籍などからFlutterを勉強し始めました。結構一般的かなと思います。

そういった教材で勉強していくと、カンタンなUIの作り方や画面遷移の仕方など、それっぽいことは割とすぐにできます。

この時点では「なんだか動くモノが作れて楽しい！」という気持ちでいっぱいです。
今ならChatGPTとかで更に簡単に動くモノが作れるはずです。

ただ、自分はすぐに壁にぶち当たりました。

- コードにはわからない部分がたくさんある
- 調べてもその中でわからないモノが登場し、疑問点が解消しない
- 結局なんで上手く動いているかわからず、コントロール感を持ってアプリが作れない

問題は、**Flutterに特有の概念とプログラミングの基本概念の区別がつかず**全部わからないモノとして認識していたことだと思います。
![スクリーンショット 2024-04-13 10.37.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849000/f7d61879-a97f-90ae-d7e7-fd667a8430d9.png)

プログラミング経験者であれば、「ふむふむなるほど、既存言語とこう違うのか」と**Flutterの特徴にフォーカスしてモノを見ることができる**と思います。
![スクリーンショット 2024-04-13 9.54.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849000/a61e177f-2a27-c90f-4263-3ae974e12a5d.png)

# ではどうするか
わからないモノがわからない言葉で説明されても一生わからないままなので、わからないを分類し、順序立てて理解していく必要があります。

そのための自分なりの結論としては

**まずオブジェクト指向プログラミング (OOP)を理解しよう**

です。

その理由は
- クラス, インスタンス, 継承などみんなが前提無しに使っている言葉がわかるようになる
- サンプルコードなどが読みやすくなる
- まだ知らなくても良いことの区別がしやすくなる

ということです。

こういった本で勉強してみるのがとっつきやすくて良いのかなと思います。
![好きjava.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849000/2d7c819c-309e-c70d-983e-1cc5b04f0b83.jpeg)
https://amzn.asia/d/6uHzfNr

自分も初心者の域を脱してないのであくまで仮説ですが笑
【PHP】出力にはechoとprint、どっちを使えば良い?

# はじめに
こんにちは! 中学3年生のWardHamamatsu67です! 今回は、PHPの出力に使う、echoとprint、結局どっちを使えば良いのかを、比較して決めたいと思います。
## 引数
### echo
echoは引数が複数でもOKなので、複数の文字列をつなげるときには、","でつなげてもよし、"."でつなげてもよしです。
### print
printは引数が1つのみなので、複数の文字列をつなげるときには、"."でしかできません。

echo-print
1-0
## 文字数
### echo
echoは4文字です。
### print
printは5文字です。

echo-print
2-0
## 早さ
### echo
やや早め
### print
やや遅め

echo-print
3-0
## 戻り値
### echo
echoは戻り値がありません。
### print
printには戻り値を返します。

echo-print
3-1

the end
# 結果
どちらを使ってもよいですが、とりあえず、echoを使っておけば問題ないと思います。
# おわりに
というわけで今回は、echoとprintを比較してみましたが、どうでしたか?人によって、echoとprintで、どっちを使うのか、よく分かれますが、個人的にはechoの方が良いかな、と思いました。
この記事が良いと思った方はいいねとフォローをしてくれると嬉しいです。
ジェネレーター

## はじめに

ジェネレーターに関して整理する.

### ジェネレーターとは

yield命令を使ってその時どきの値を返せる関数。
returnでは値を返したらそれで終わりだが、yieldは関数の値を呼び出し元に返した後で
処理を一時停止する。次に呼び出された時にはその時点から処理を再開できる。

### 実例

素数を求めるジェネレーターの例。

```php:gen_prime.php
function getPrimes() 
{
    $num = 2;
    while (true) {
        if (isPrime($num)) {
            yield $num;
        }
        $num++;
    }
}

function isPrime(int $num) 
{
    $prime = true;
    for ($i = 2; $i <= floor(sqrt($num)); $i++) {
        if ($num % $i === 0) {
            $prime = false;
            break;
        }
    }
    return $prime;
}

foreach (getPrimes() as $prime) {
    if ($prime > 100) {
        die();
    }
    print $prime . ',';
}
// 2,3,5,7,11,13,17,19,23,29,31,37,41,43,47,53,59,61,67,71,73,79,83,89,97,
```

### 利点

上記の素数を求める関数を、10万個の素数を求めるように修正した場合
10万個の値を格納できる配列を用意しなければならない。その際、それだけのメモリを消費してしまう。
ジェネレーターを使うとyieldのタイミングでつど値が返されるためメモリの消費もその時どきの状態を監視する最小限で済む。

### 用途

何かしらのルールに従って値セットを生成する。
StampS3でWS2812Bで遊ぶ。



参考


↓クリック


https://lang-ship.com/blog/work/esp32-espeasyutils-5-led/



参考2


↓クリック


https://qiita.com/emuai/items/e4c8a7ce34ea0e4a7db8


![o_coq030.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/80b8284e-f248-20a3-edbf-1c561a6d97e6.jpeg)



```c++


//WS2812_test1_M5S3_1


//初期化
void setup() {

  //GPIOの初期化
  pinMode(21, OUTPUT);
  
}//setup


//メインループ
void loop() {
  
  neopixelWrite(21,64,64,64);

  delay(1000);

  neopixelWrite(21,64,0,0);

  delay(1000);
 
}//loop


```
iosあるある!「HTML&CSSでinputエリアにfocusした際、fixedが効かない問題」がReactコンポーネントでも発生したから解決する

# エラー概要

エラー概要参考記事はこちらをご覧ください
https://qiita.com/hibikikudo/items/2cb10536f4816d304f54
https://stackoverflow.com/questions/29001977/safari-in-ios8-is-scrolling-screen-when-fixed-elements-get-focus

簡単に画像で説明すると以下のような感じです

### デフォルト
![image_6487328.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492127/878efad2-8707-d082-eaf9-0ba6ceccce9d.jpeg)
]

### バグ発生時
![image_6487327.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492127/6cddb1ea-0426-8277-94d8-ce45e1981046.jpeg)



## Reactコンポーネントで解決した方法
※冒頭の参考記事を参考に

まずどうやって対処するかを言語化すると以下の3点
1. **inputエリアにフォーカスされた時にズレた高さ分下げる(useEffect, useRefを使用)**
2. **ios端末だけの処理**
3. **フォーカスが外れたら元に戻す**

こうやって言語化してみるとなんか難しくないように感じるのですが、めちゃ手こずったのが事実笑
  
以下実装した処理（クラスなどは省いて関係ある部分のみ記載）

```react
import { useEffect, useRef, useState } from 'react'
import { IoIosSend } from 'react-icons/io'
import { IconButton } from './iconButton'

type Props = {
  ....省略
}

export const MessageInput = (省略: Props) => {
  const inputRef = useRef<HTMLInputElement>(null)
  const [inputBottom, setInputBottom] = useState(0)

  useEffect(() => {
    const isIOS = /iPad|iPhone|iPod/.test(navigator.platform)
    if (!isIOS) {
      return // iOSデバイスではない場合は何もしない
    }

    const handleFocus = () => {
      const element = inputRef.current
      if (element) {
        const elementRect = element.getBoundingClientRect()
        const inputHeight = elementRect.height
        setInputBottom(inputHeight) // ここでinputの高さ分だけ下げる。
      }
    }

    const handleBlur = () => {
      setInputBottom(0) // フォーカスが外れたときは位置を元に戻す。
    }

    const currentInput = inputRef.current
    currentInput?.addEventListener('focus', handleFocus)
    currentInput?.addEventListener('blur', handleBlur)

    // クリーンアップ
    return () => {
      currentInput?.removeEventListener('focus', handleFocus)
      currentInput?.removeEventListener('blur', handleBlur)
    }
  }, [])

  return (
    <div className="absolute" style={{ bottom: ${inputBottom}px }} }}>
      <div className="">
        <div className="">
          <div className="">
            <input
              ref={inputRef}
              type="text"
              placeholder=""
              className="value={}"
            />
            <IconButton icon={<IoIosSend />} />
          </div>
        </div>
      </div>
    </div>
  )
}

```

## Point
1. absoluteを設定←これ忘れがち
1. useRefでinput要素への参照を保持
1. useEffectでメインの処理実装(クリーンアップを忘れずに)
1. iosのみの処理にする

## まとめ
参考記事のようにHTML&CSSで同じようなことが起こる記事はたくさん見かけたのですが、Reactで起こった記事があまりなかったので共有させてもらいました。

React学び始めた方や沼ってる方の参考になればなと思います！
あと、やり方は他にもあると思いますので、もっとこうしたほうがいい、こうした方が簡単だよ、みたいなことあれば教えてください
PowerShellでBluetoothイヤホンの接続状態を取得する

# はじめに
大分遅ればせながら、Bluetoothイヤホンを購入しました。
PC上で接続されていることを、わかりやすく把握する方法がないか調べてみました。

# ステータスの取得方法

以下のページを参考にさせていただきました。

https://qiita.com/nushitoritarou/items/f4c090cac66060d46334

https://stackoverflow.com/questions/71607722/how-to-know-if-a-bluetooth-device-is-connected-or-disconnected-by-powershell

(1) PowerShellの「Get-PnpDevice」でデバイスのIDを取得。
(2) 「Get-PnpDeviceProperty」で詳細のステータスを取る。

という方法です。

# 実際のスクリプト

「{83DA6326-97A6-4088-9453-A1923F573B29} 15」という謎のKeyを参照していますが、実際に接続したり切ったりして、KeyNameとDataの値の変化見てみました。

```スクリプト.ps1
 $devs = Get-PnpDevice | ? {$_.Class -like '*bluetooth*'} | ? { $_.FriendlyName -like 'デバイスの名前'}
 
 foreach($i in $devs){
    $iProps = Get-PnpDeviceProperty -InstanceId $i.InstanceId 

    foreach($j in $iProps){
        if($j.KeyName -eq '{83DA6326-97A6-4088-9453-A1923F573B29} 15'){
            if( $j.Data -eq "True" ){
                Write-Output "Connected"
            }
            else {
                Write-Output "Disconnected"
            }
        }
     }
 }

```

# デスクトップへの表示

RainmeterでPowerShellを実行してステータスを拾って表示します。

https://www.rainmeter.net/

表示する画像は以下から適当なものをダウンロードして、iniファイルと同じフォルダへ、Connected.pngとDisconnected.pngとして保存しました。

```rainmeter.ini
[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1

[MeasureBluetoothStatus]
Measure=Plugin
Plugin=PowershellRM
Line=スクリプトへのパス\スクリプト名称.ps1

[MeterIcon]
Meter=Image
MeasureName=MeasureBluetoothStatus
X=0
Y=0
W=30
H=30
ImageName=%1.png

[MeterString]
Meter=STRING
X=35
Y=2
W=100
H=20
FontSize=10
FontColor=225,225,225,225
AntiAlias=1
Text=表示用のデバイス名(固定)

[MeterBluetoothStatus]
Meter=STRING
X=35
Y=18
W=100
H=20
FontSize=8
FontColor=200,200,200,200
AntiAlias=1
MeasureName=MeasureBluetoothStatus
```

# 完成した形

イヤホンをケースから取り出すと接続されてConnectedになり、収めて接続が切れるとDisconnectと表示できるようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309202/7370f8b2-cb30-0ff2-705d-2622ab66865c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309202/503273a5-6f5d-919f-7eef-20960edf7a45.png)
【基礎と数値型】Python演習100問パック勉強記録−１【python独学】

はやたすさんのUdemyコースPython演習100問パックの間違えたところや復習箇所を自分用メモしていきます。<a href="https://www.udemy.com/course/python-exercise100/">コースはこちら</a>
まずはセクション２と基本とセクション３の数値型のおさらい。

### ディクショナリの作り方
```python
list = {}
for n in range (1,31):
  if n % 3 ==0:
    key = f"{n//3}番目"
    list[key] = n

print(list)
```
1.初めに{}で空のファイルを作る
2.Keyを指定
3,list[key]=でバリューを指定

### intの値を結束したいとき
```python
number2 = int(number + number + number)
test = int(number) + number2
```
1.数値をくっつけたいときは（）内で足せばできる
2.int同士の足し算の場合

### マイナス記号反転
```python
result = -result
```
単純にマイナスつければ良い




初めのセクションは割とやさしめでした！
YOLOPとYOLOPv2 の環境構築【2024年4月成功】

# 環境構築(共通)
YOLOPv2を利用したい場合も、まずはYOLOPで環境構築をするｌ。

```
python -m venv venv
. ./venv/bin/activate
git clone https://github.com/hustvl/YOLOP
cd YOLOP
pip3 install -r requirements.txt
pip3 install --pre torch torchvision torchaudio --index-url https://download.pytorch.org/whl/nightly/cu121
```

# 利用(YOLOP)
```
python tools/demo.py --source inference/images
```

# 環境構築(YOLOPv2)
```
git clone https://github.com/CAIC-AD/YOLOPv2/tree/main
cd YOLOPv2
```

以下のURLから重みをDLして、「data/weights/」 に配置する

https://github.com/CAIC-AD/YOLOPv2/releases/download/V0.0.1/yolopv2.pt



# 利用(YOLOPv2)

```
python demo.py  --source data/example.jpg
```
neofetch command not found が出た時の対処法

ハッキング・ラボのつくりかたを読んでいるときにぶち当たったため対処法を記述。

Debian系ディストリビューションの場合以下で解決。

```
sudo apt-get install neofetch
```

Redhat系ディストリビューションは以下で解決。

```
sudo yum install neofetch
```
Hello,World

# Hello, World
### 自分

はじめまして。有井です。
武蔵美で建築を専攻しています。

現在３年生でゼミ選択や就活が始まります。
将来について考えることが多くなり、どういう人生を歩んでいこうか悩み中です。

### 動機
先月、春休みにフィリピンへ語学留学に行きました。そこで最高のエンジニアに出会いました。自由に留学したり旅行しながら仕事をこなす働き方を見てかっこいいなと思い影響を受け、建築士以外の選択肢もほしいと思い、とにかくプログラミングのスキルを身につけたいなと思いました。また建築とプログラミングについて合わせて考えられるところがあるなとも思っているので発展させられるかもしれなとも思います。
### 現在

アウトプットするのが不得意で自発的に発信するのが苦手だけど、トレーニングを積んでいつか能動的に動けて人に影響を与えられるようなものを作れる人間になりたいと思っています。

### 目標
######
* 短期
基礎的なプログラミングができるようになる。
* 長期
人の役に立つコンテンツが作れるようになる。
ゼロ詰め4桁の文字列を表現したい

## 動機

業務系システムによくある(要出典)"0001"のような、先頭を0で埋めた数字の固定長の文字列でなければならないという制約を表現したい。
ここでは、

* "12"のように先頭の0を省略した入力はOK("0012"を生成)
* "12345"のように、元から最終的な桁数を超えている場合はNG
* 空文字列や数字以外が含まれる場合は当然NG

としたい。

## コード

```FSharp:ZeroPadded4Sample.fs
open System

let ifTrueThen f =
    function
    | true -> Some f
    | false -> None

let ifFalseThen f =
    function
    | true -> None
    | false -> Some f

let (|NullOrWhiteSpace|_|) =
    String.IsNullOrWhiteSpace >> ifTrueThen NullOrWhiteSpace

let (|LengthOver|_|) l s =
    (String.length s) > l |> ifTrueThen LengthOver

let (|NotInAsciiDigit|_|) (s: string) =
    s.ToCharArray() |> Array.forall Char.IsAsciiDigit |> ifFalseThen NotInAsciiDigit

module ZeroPadded4 =
    type T = ZeroPadded4 of string
    let totalWidth = 4

    let create =
        function
        | NullOrWhiteSpace
        | LengthOver totalWidth
        | NotInAsciiDigit -> None
        | s -> s.PadLeft(totalWidth, '0') |> ZeroPadded4 |> Some

let inputs = [ "12"; "0"; String.Empty; " "; "a12"; "1234"; "12345" ]
let results = inputs |> List.map ZeroPadded4.create

(inputs, results) ||> List.iter2 (fun i r -> printfn "%A -> %A" i r)

(*
"12" -> Some (ZeroPadded4 "0012")
"0" -> Some (ZeroPadded4 "0000")
"" -> None
" " -> None
"a12" -> None
"1234" -> Some (ZeroPadded4 "1234")
"12345" -> None
*)
```

## 解説

冒頭の`ifTrueThen`と`ifFalseThen`は、後続の[パーシャルアクティブパターン](https://learn.microsoft.com/ja-jp/dotnet/fsharp/language-reference/active-patterns#partial-active-patterns)の定義で楽をするための補助関数です。

```FSharp
let (|NullOrWhiteSpace|_|) =
    String.IsNullOrWhiteSpace >> ifTrueThen NullOrWhiteSpace
```

のような、アクティブパターンたちは、文字列を各バリデーションの観点で分類するもの...といったところになります。「空っぽはダメ」のような制約は、頻出しそうなので、部品として切り出しておこうといった感じですね。
例えば、「ちょうどN文字でなければならない」という制約が発生した場合は、

```FSharp
let (|LengthNotEqual|_|) l s =
    (String.length s) <> l |> ifTrueThen LengthNotEqual
```

のようなコードを追加して利用すると良いわけです。

```FSharp
module ZeroPadded4 =
    type T = ZeroPadded4 of string
    let totalWidth = 4

    let create =
        function
        | NullOrWhiteSpace
        | LengthOver totalWidth
        | NotInAsciiDigit -> None
        | s -> s.PadLeft(totalWidth, '0') |> ZeroPadded4 |> Some
```

アクティブパターンたちを利用して、制約を満たした場合のみ値を生成します。
この例では[Option](https://learn.microsoft.com/ja-jp/dotnet/fsharp/language-reference/options)を返しているため、生成できない場合は一律Noneになりますが、エラー内容を具体的に表現したい場合は、[Result](https://learn.microsoft.com/ja-jp/dotnet/fsharp/language-reference/results)を返すなどすると良さそうです。

## 感想など

アクティブパターンのバナナクリップ記号`(| ... |)`を初めて見たときには、「なんじゃこりゃ？」となりましたが、具体的な使い方を見出せてすっきりしました。

こうやって、小さな部品を作って組み立てていくような書き方ができると、F#がより楽しく感じます。

## 参考にしたサイト

https://www.codit.eu/blog/f-domain-model-validation-with-active-patterns/

https://fsharpforfunandprofit.com/posts/designing-with-types-single-case-dus/
SharePoint Online の List で非表示の列を書式設定で参照する方法

### 概要

SharePoint Online の List で、非表示の列の値を、JSON書式設定にて、参照できるようにする方法です。  
List の JSON書式設定では、他の列（フィールド）の値を参照したり、表示したりすることができますが、参照先の列を非表示にしてしまうと、その列の値が参照できなくなってしまいます。
でも、参照はしたいという時がありますよね。
実は、できます。

### 実施例

まず以下のような構成のリストを作ったとします。  
この例では、JSON書式設定を使って非表示の列（隠したい列）の値を取得して表示しています。
※「非表示の列を参照」という列で、「秘密の情報１」などの値を表示するように構成しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1467348/aeb9829d-5f4b-4d01-0e0f-22c3361362de.png)

この構成で、参照先の列を非表示にしてしまうと、通常は、以下のようにその値を取得することができなくなります。（赤枠の個所のように値が空になってしまいます）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1467348/80150e37-6111-c880-bc17-da23d8f6f88c.png)


ここで、ある設定をすると、非表示の列の値を取得できるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1467348/f8d7b555-da45-edb7-8692-65cd286b1ab5.png)

### 設定方法
実は、ビューの設定で、非表示にしたい列に対して、何らかのフィルタをかけると、非表示にしても参照できるようになります。  
フィルタの条件は何でもOKです。  
例えば、「次の値に等しくない」の条件で、値は「空白」とかにしておけばいいかと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1467348/0f3f4d4d-d4ed-27ed-09e3-9134ed654822.png)

### 応用例
上記はあまり実用的な例ではありませんが、この方法を応用すると、例えば、以下の成績表ように、本人にだけ、自分の氏名が表示され、本人以外の氏名は非表示にするようなリストを作ることができます。  
氏名の列には、氏名のデータは入っていないので、この列でフィルタなどをかけて氏名を探り当てることなどはできません。エクスポートしても他の人の氏名データは出力されません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1467348/c5e307a2-2d29-8b6c-5f15-5c47fe608d59.png)

管理者の画面
実際は、以下のように、非表示の列に氏名などのデータが保存されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1467348/38be553d-c7c3-ab7b-1bc7-d489b76b02eb.png)


上記の JSON書式の内容
※ EmailText の列に各人のメールアドレス、HiddenText に氏名が設定されている場合の例です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1467348/49be1cc8-6573-f324-b3b4-116e31a34286.png)

ビューのフィルタは以下のように設定しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1467348/0b301ba1-e8cc-9822-cc2e-99d728710b4a.png)

フィルタ設定で条件に含めると、内部的に参照できるようになるという、ちょっと変な仕様ですが、お試しください。  
フィルタ以外でも、何らかの条件設定（並べ替えなど）で対象の列を指定したら、同様に参照できるようになります。

:::note notion
注意
- 上記は、正式にサポートされた方法ではありません。今後、仕様変更などにより意図した動作をしなくなる場合があります。ご了承の上、ご利用ください。
- 非表示にしたからと言って、情報を完全に隠匿できるわけではありません。秘密性の高い情報を保存・非表示にしたい場合は、適切なセキュリティ対策を実施ください。
:::

### おまけ  
デザインモード（JSON編集ではなくGUIで設定）の場合でも同様に参照できるようになります。  
以下は、値が「秘密の情報１」の行だけを緑色にする例です。  
※設定の際は、一旦、対象の列を「表示」させから設定する必要があります。そうしないと、対象の列が選択肢に出てきません。設定した後は「非表示」に戻すのをお忘れなく😅

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1467348/598fdfa3-3756-38e8-e888-3609be94a710.png)
【CSS】transitionでできるアニメーションについてのまとめ


# はじめに

初めまして。エンジニアのkeita_Maxです。

CSSのtransitionというものについてまとめました。

# transitionとは

>トランジション (transition) は、要素の 2 つの状態間の変化を定義するためのものです。それぞれの状態は :hover や :active のような擬似クラスで定義されたり、 JavaScript を使用して動的に設定されたりします。
(引用：https://developer.mozilla.org/ja/docs/Web/CSS/transition)

変化するときに簡単にアニメーションをつけることができるものです。


# 変化の遅延時間の設定

変化を開始するまでの遅延時間の設定が`transition-delay`という項目で設定できます。

### 設定例

例えば３秒後にアニメーションを開始したい場合は以下のようにします。

```css
.button{
    transition-delay: 3s;
}
```

### 参考
https://developer.mozilla.org/ja/docs/Web/CSS/transition-delay




# 変化する項目の設定

変化する項目の設定が'transition-property'で設定できます。

### 設定例

すべてを変化させたい場合
```css
.button{
    transition-property: all;
}
```
マージンだけ変化させたい場合
```css
.button{
    transition-property: margin;
}
```
マージンと色を変化させたい場合
```css
.button{
    transition-property: margin, color;
}
```

### 参考
https://developer.mozilla.org/ja/docs/Web/CSS/transition-property


### 設定例

0.5秒で変化させたい場合
```css
.button{
    transition-duration: 500ms;
}
```
3秒で変化させたい場合
```css
.button{
    transition-duration: 3s;
}
```
マージンと色の変化の時間を別で設定したい場合
```css
.button{
    transition-duration: 3s, 1s;
    transition-property: margin, color;
}
```



# 変化にかかる時間を設定

変化にかかる時間の設定は`transition-duration`で設定できます。

変化させたい要素に対して個別に設定することができます。


### 参考
https://developer.mozilla.org/ja/docs/Web/CSS/transition-duration






# 変化の仕方の設定

`transition-timing-function`という項目で設定することができます。

変化の速度の設定が6つ用意されています。

>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/093dd037-b056-522f-ba4f-0a2d35179ea4.png)
(引用元:https://www.asobou.co.jp/blog/web/css-animation3)

変化の仕方については引用元のページにより詳しく書いてあるのでご覧ください。

### 設定例

```css
.button{
    transition-timing-function: ease-in;
}
```

### 参考
https://developer.mozilla.org/ja/docs/Web/CSS/transition-timing-function

# 注意する点


### 'transition-behavior'
'transition-behavior'これはfirefoxで使用できないようなので注意が必要です。


### 高さや横幅に関してのアニメーション

また、高さや横幅は`fit-content`や`auto`にするとアニメーションが聞かなくなるので注意してください。

その場合は'width:0%''width:100%'のようにするか、`max-width:0vh``max-width:100vh`のように最大値でアニメーション設定をしてください。



# おわりに

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！

# 参考

https://www.asobou.co.jp/blog/web/css-animation3
Databricksクラスター一覧のカスタマイズ

最近まで知りませんでした。

クラスター一覧にアクセスすると右上にギアマークがあります。
![Screenshot 2024-04-13 at 8.51.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/f3e9b9a8-fe83-cbd6-f8f2-867ef6e202cc.png)

展開すると表示列を選択できます。
![Screenshot 2024-04-13 at 8.52.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/d37987aa-63ab-3828-a614-39b80a97c0db.png)

自分の好みにカスタマイズしてみてください！
![Screenshot 2024-04-13 at 9.06.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/3b108e1a-70eb-476e-466f-1db07496c267.png)


### はじめてのDatabricks

[はじめてのDatabricks](https://qiita.com/taka_yayoi/items/8dc72d083edb879a5e5d)

### Databricks無料トライアル

[Databricks無料トライアル](https://databricks.com/jp/try-databricks)
有名サービスのアイコンでカルタゲームの作成

# はじめに
こんにちは @yui10 です。
今回サービスのロゴがまとめられているプロジェクトがあったのでそのデータを元に名前からロゴを当てるゲームを作ってみました。
完成したものだけを見たい人は[こちら](#完成したもの)

# 経緯
ある日、ネットサーフィンをしていると[高専かるた](https://codeforkosen.github.io/kosen-apps/karuta.html)というゲームを見つけました。
このページを見た時にふと、**世の中にある色んなロゴを対象で行ったらどうなるか**と思い作ってみることにしました。
まず、やるべきことは使用するロゴを探しだすことです。多くのロゴがまとめられておりかつフリーで利用できるものを条件にして調べました。
最初は大量のアイコンがセットになっている[Material Icons](https://fonts.google.com/icons)が思いつきましたが、それだけは面白くないと思い、少しの間ネットの海を漂ってました。
そんなときSimple Iconsというものに出会い、登録されているアイコンの量の多さや知らないものが数多くあるためこれでやったら面白そうと思い、このアイコン達で作ることに決めました。

# Simple Iconsとは
Simple Iconsとは世界的に有名なサービスやブランドのロゴがまとめられたものです。

https://simpleicons.org/

特徴は以下通りです
- 3100以上のアイコンが登録されている
- ライセンスはCC0 1.0 Universal
- 公式よりCDNやnpmパッケージが用意されている
- [サードパーティー拡張機能](https://github.com/simple-icons/simple-icons?tab=readme-ov-file#third-party-extensions)としてReactやVueなど20以上が提供されている

なお有名である[基準](https://github.com/simple-icons/simple-icons/blob/develop/CONTRIBUTING.md#assessing-popularit)を満たして入れば誰でもアイコンを追加することができます。もし追加したいアイコンがある方は、公式のページや[こちらの記事](https://zenn.dev/nekocodex/articles/ab915845d300c6)を参考にしてください。

# 技術一覧
- 開発環境 : Docker
- サーバー,フロントエンド : Next.js
- UIコンポーネントライブラリ : Material UI
- アイコン : Simple Icons

技術スタックとしては、ローカルサーバでアイコンを返すエンドポイントを作成するためにバックエンドが必要だったので Next.js にし、見た目を装飾するものとしては簡単に出来そうな Material UI を使用しました。

# 完成したもの

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3519793/9ead6bcb-01f5-2033-e366-8883f1b1786c.png)

作った結果この様な形になりました。
機能としてはランダムに選ばれた12,24,36個のアイコン全てを当てるモードと、永遠と続けるものがあります。
工夫というか特徴としてこのゲームはアイコンを読み込んでいるため通信量が多いかと思われますが、実際はSVGファイルなので通信量は少ないです[^1]。なので外でも通信量を気にすることなくプレイできます。

https://icons-karuta.vercel.app/

https://github.com/yui10/icons-karuta

# おわりに
最後まで見ていただき、ありがとうございます。
現時点では対戦機能がなくただ一人でやるだけのゲームではありますが、知らないサービス名に対して名前からロゴを推論する点は面白いと評価を頂きました。これを読んでいる方も、[icons-karuta](https://icons-karuta.vercel.app/)を遊んでみてください。
ゲームで遊んだ感想や不具合、機能の追加案がありましたら[issue](https://github.com/yui10/icons-karuta/issues/)、pull request、コメント等頂けますと幸いです。

[^1]:Chromeのデベロッパーツールからみた通信量だけで言えば阿部寛のHPといい勝負できるくらいには
Databricksのクラスターをライブラリ込みでクローンできるようになりました

こちらのアップデートです。

[Compute cloning now clones any libraries installed on the original compute](https://docs.databricks.com/en/release-notes/product/2024/april.html#compute-cloning-now-clones-any-libraries-installed-on-the-original-compute)

> コンピュートをクローンする際、オリジナルのコンピュートにインストールされているすべてのライブラリもクローンされます。この挙動が不要の場合、コンピュートのクローンページで**ライブラリなしで作成**を選択することができます。[コンピュートのクローン](https://docs.databricks.com/ja/compute/clusters-manage.html#clone-a-compute)をご覧ください。

ライブラリがインストールされているクラスター(コンピュート)にアクセスします。
![Screenshot 2024-04-13 at 8.32.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/85421faa-2542-f4f9-4a45-df5846ae4a3f.png)

右上の**その他**をクリックし、**クローン作成**をクリックします。
![Screenshot 2024-04-13 at 8.39.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/511edde8-e4dd-baa0-4ed0-296d5c5ff653.png)

クローンページが表示されるので、**コンピューティングを作成**をクリックします。
![Screenshot 2024-04-13 at 8.32.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/8291515d-b88d-a3e9-17eb-57a97becace5.png)

ライブラリ込みでクローンされました！
![Screenshot 2024-04-13 at 8.41.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/d3796297-e672-290f-7ab8-0386eef1ede2.png)

ライブラリを含めたくない場合には、**コンピューティングを作成**ボタンの右にある矢印をクリックして、**ライブラリなしで作成**をクリックします。
![Screenshot 2024-04-13 at 8.35.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/e0355053-f757-74c2-3e05-e40c32472cc9.png)

### はじめてのDatabricks

[はじめてのDatabricks](https://qiita.com/taka_yayoi/items/8dc72d083edb879a5e5d)

### Databricks無料トライアル

[Databricks無料トライアル](https://databricks.com/jp/try-databricks)