OmniAICreator/Qiita-1.07M huggingface dataset:
[MR Dev Tips #12] Unity の Camera コンポーネントについて

Unity の ``Camera`` コンポーネントのプロパティが気になったので調査してみました。

# 検証環境

- Unity 2020.3

# Camera コンポーネント (Unity)

Camera コンポーネントは、Player にゲームを表示する重要な役割を担います。MRTK v2 では、``MixedRealityPlayspace > Main Camera`` オブジェクトに、``Camera`` コンポーネントがアタッチされています。Camera コンポーネントでは、レンダリングの順序や、画面上のあらゆる場所、または、スクリーンの一部だけを表示するなど、設定を行うことができます。

※ MRTK v2 では、``Camera`` コンポーネントの最適化を Profile を使って行っています。詳しくは「[カメラシステムの概要](https://learn.microsoft.com/ja-jp/windows/mixed-reality/mrtk-unity/mrtk2/features/camera-system/camera-system-overview?view=mrtkunity-2022-05)」をご覧ください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/d322ed7b-45f6-7d3e-fa22-c03240cf4d30.png)

| プロパティ | 概要 |
| --- | --- |
| Clear Flags | 画面の空白部分 (何も表示されていない領域) の描画をどのように行うのかを設定できます。MRTK では、標準で ``Solid Color (単色)`` が選択されています。 |
| Background | ビュー内の全てのオブジェクトが描画され、``Clear Flag`` が Skybox でない場合に、画面の空白部分 (何も表示されていない領域) に適用される色。MRTK では、``RBG (0, 0, 0) - Color Code (#000000)`` が設定されています。 |
| Culling Mask | レイヤーを使用してオブジェクトのグループを選択的にレンダリングする際に使用されます。選択されていないレイヤーのオブジェクトは、カメラに表示されません。ゲームオブジェクト自体がどのレイヤーに含まれているかは、Inspector 上から確認することができます。``cull`` は、「選択」「間引き」といった意味を持つ英単語。 |
| Projection | 3D空間をどのように2Dとして描写するか設定を行うことができます。``Perspective``、 ``Orthographic`` から選択することができます。``Perspective`` は、そのままの見え方を描写します (遠近法)。一方、``Orthographic`` は、オブジェクトを均等に描写します (平行投射)。 |
| FOV Axis | FOV (Field Of View) の軸。 |
| Field of View  | FOV Axis ドロップダウンで指定された軸に沿って測定されたカメラのビュー角度 (単位: °) | 
| Physical Camera | カメラの Physical Camera (物理カメラ) プロパティの有効/無効フラグ。 |
| Clipping Planes | レンダリングを開始、および停止するカメラからの距離。``Near`` は、カメラに描画される最も近い面。``Far`` は、カメラに描画される最も遠い面。 |
| View Rect | 画面のどの部分にカメラで撮影した画像を描画するのかを設定します。 |
| Depth | 描画順におけるカメラの描画順。大きい値を持つカメラが、小さい値のカメラの手前に描画されます。 |
| Rendering Path | Unity は、様々なレンダリングパスをサポートします。ゲームコンテンツとターゲットプラットフォーム (ハードウェア) に応じて、どれを使用するか選択します。異なるレンダリングパスは、主にライトと車道に影響する様々な機能とパフォーマンスの特徴を持っています。 |
| Target Texture | カメラビューの出力が含まれたレンダーテクスチャへの参照。カメラの映像をテクスチャに出力する際に設定を行う。 |
| Occulusion Culling | オクルージョンカリングの有効/無効フラグ。オクルージョンカリングを有効にすると、他のオブジェクトの背後に隠れている (例えば、壁の後ろに隠れている) オブジェクトのレンダリング演算は行われません。 |
| HDR | ハイダイナミックレンジレンダリング (HDR) の有効/無効フラグ。 |
| MSAA | マルチサンプリングアンチエイリアス (MSAA) の有効/無効フラグ。 |
| Allow Dynamic Resolution | カメラの動的解像度 (Dynamic Resolution) レンダリングの有効/無効フラグ。 |
| Target Display | どのディスプレイにレンダリングを行うのかを定義します。 |
| Target Eye | ユーザーの目 (左右/両方) へのレンダリング設定を定義します。 |


# Refs

https://docs.unity3d.com/ja/2020.3/Manual/class-Camera.html
オブジェクト指向言語におけるクラスの基礎知識Part1

## はじめに
この記事ではオブジェクト指向言語において、クラスに関わる必要最小限の知識を解説します。説明するのは以下の二点です。

・クラスはオブジェクト指向言語においてどのような役割を持つのか
・クラスはどのようなデータを持つのか


## オブジェクト指向言語におけるクラスの役割 
オブジェクト指向言語においてクラスは何のために必要なのでしょうか？
プログラムの実行のために必要である、それはもちろん間違いではありません。
正確には、目的を持った型枠としての役割がクラスにはあります。

では、実際にクラスが所持しているメンバやメソッドにアクセスするためにはどうしたら良いのでしょうか？
そのためにはクラスの実体（インスタンス）を生成する必要があります。（**インスタンス化**）
クラスのインスタンス化によって実体が出来上がり、クラスのメンバにアクセスできるようになるのです。
つまり、クラスとインスタンスのセットでプログラムは動く、ということになります。


## クラスが持っているデータ
オブジェクト指向言語を使用して実装するときに**クラス**を定義します。このクラスには以下の３つの要素が含まれます。

・**メンバ変数(フィールド)**
数値情報や文字情報等の様々な情報を含めるための変数。

・**メンバ関数(メソッド)**
動作・処理内容を記述したブロック。

・**コンストラクタ**
クラスのインスタンス生成時に実行される特別な関数。メンバ変数の初期化処理などを行う。


## まとめ
この記事では
・クラスに記述されるメンバ変数、メンバ関数、コンストラクタについて
・オブジェクト指向言語におけるクラスの役割
について解説しました。この記事で一番覚えてほしいことは、
**クラスの作成だけではオブジェクト指向言語のプログラムは動かない。
インスタンス化とのセットでプログラムを動かすことができる。**
ということです。次回はjava言語による実例も交え、インスタンス化について解説します。
jetpack compose navigationを使って楽に値付き遷移処理を実装する

# はじめに
今回は`jetpack compose navigation`を使って値付き遷移処理を実装するときに意識すると楽になることを紹介していきます
### 本文
まずは下記のように一箇所のファイルに***遷移用のルート***、***遷移宣言処理***、***表示処理***の３つをまとめておきます。
下記のようにすることで画面数が把握しやすい上に、どの画面からでも該当画面に遷移させるときは該当の遷移処理を呼び出すのみになります。
また、表示処理をまとめておくことで１つのファイル内を検索すれば何を引数として渡していてどの遷移処理がよばれるときにどの画面が表示されるのかが把握しやすくなります。
```kotlin:HogeNavigation
object HogeNav {
// routeを一箇所にまとめておく
    const val hoge = "hoge_view/{id}"
}

// 遷移宣言用の処理を実装して引数のみを渡せばいいようにしておく
fun NavController.navigateToHogeView(id: Int) {
    this.navigate(HogeNav.hoge.replace("{id}", id.toString()))
}

// 表示処理を実装する
fun NavGraphBuilder.hogeView(navController: NavHostController) {
    composable(
        route = HogeNav.hoge,
        arguments = listOf(
            navArgument("id") { type = NavType.IntType }
        )
    ) {
        val id = checkNotNull(it.arguments).getInt("id")
        HogeView(
            navController = navController,
            viewModel = hiltViewModel(),
            id = id
        )
    }
}
```
次にNavHostに対して先ほど実装しておいた表示処理を追加します
```kotlin:NavHost
NavHost(
        navController = navController,
        startDestination = HogeNav.hoge,
        modifier = modifier
    ) {
        hogeView(navController)
    }
```
### 最後に
今回は今後増えていくjetpack compose navigationの実践的な実装方法を紹介しました
備忘録としての役目が強いですが、どなたかのお役に立てれば幸いです
axiosを使ったHTTPリクエストエラー処理

フロントエンドをVue.jsでwebアプリを開発しています。
フロントエンドからバックエンドへの通信にはaxios(JavaScriptのライブラリ)を利用しています。
今回、webアプリ開発の中で、httpリクエストが失敗したときどのように処理するのか、
調査したことがありますので、まとめてみたいと思います。

#### 参考サイト
-「vue.jsを使ってaxiosを学ぶ」
https://reffect.co.jp/vue/vue-axios-learn/
-「axiosの基本的な使い方」
https://qiita.com/s_taro/items/30114cfa370aac6c085f
-「github axios error-types」
https://github.com/axios/axios#error-types

# 目次
　[axios](#axios)
　[エラー内容](#エラー内容)
　[サンプル](#サンプル)
　[まとめ](#まとめ)

#### axios
axiosとは、非同期通信ベースでHTTPリクエスト実行するJavaScriptのライブラリ。
axiosを使うことで、HTTPリクエストの実装を簡単に行うことができる。
詳しい導入方法は、参考サイトなどから調査しました。

使い方の例をasync,awaitと使ったGETメソッドで書くと以下のようになります。
```javascript
try {
  const response = await axios.get('/user?ID=12345');
} catch (error) {
  // axiosの処理にエラーが発生した場合に実行される
  console.log(error);
  // errorの中身を詳しく見ることができる
  console.log(JSON.stringify(error))
  console.log(error.toJSON());
} finally {
  console.log('finally');
}
```



#### エラー内容
axiosの処理で発生したerrorは、以下のプロパティで定義されています。

axiosのエラー
|プロパティ名|内容|例|
|:---|:---|:---|
|message|エラーメッセージの要約|"Network Error", "timeout of 10000ms exceeded"|
|name|エラーの原因がどこにあるのかを表す|Error, AxiosError|
|stack|エラー時のスタックトレース|(省略)|
|config|実行したHTTPリクエストでaxiosに設定していた値|{"timeout": 10000}|
|code|axios内部でのエラーを識別するコード|"ERR_NETWORK"|
|status|HTTPレスポンスのステータスコード|200, 404, null|


axios内部でのエラーを識別するコード例(errorのプロパティcode)
|コード値|内容|
|:---|:---|
|ERR_BAD_OPTION_VALUE|axiosに無効な値が設定されている|
|ECONNABORTED|axiosで設定したタイムアウト時間を超えたとき発生|
|ERR_NETWORK|ネットワーク関連の問題|Long型|引数を評価し整数型を返す/16進数→10進数に変換|

#### サンプル
レスポンスまでの時間が長すぎる場合を切り分けたい処理例は、以下になります。
```javascript
try {
  const response = await axios.get('/user?ID=12345');
} catch (error) {
  if (error.code === 'ECONNABORTED') {
    // タイムアウト発生
    console.log('time out');
  } else {
    // その他エラー
    console.log(error);
  }
} finally {
  console.log('finally');
}
```

#### まとめ
HTTP通信を使ったアプリ開発の知識はまだまだなので、実際に触りながら知識を深めたいと思いました。
[SwiftUI] Labelをカスタマイズして、Alignmentとスペースを変える

## はじめに
こんにちは!
アプリ開発が好きで、Swiftの勉強をしている大学生です。
温かい目で見ていただけると幸いです。

## 解決したい問題
`HStack内`に`Image`と`Text`を並べる際は`Label`を使って表現すると、なんだかいい感じです👍
```swift
struct HogeView: View {
    var body: some View {
        // ① 🔺
        HStack {
            Image(systemName: "person")
                .resizable()
                .frame(width: 50, height: 50)
                .background(.red)
                .clipShape(Circle())

            Text("hoge")
                .font(.system(size: 24))
        }
        
        // ② ⭕️
        Label {
            Text("hoge")
                .font(.system(size: 24))
        } icon: {
            Image(systemName: "person")
                .resizable()
                .frame(width: 50, height: 50)
                .background(.red)
                .clipShape(Circl
        } 
    }
}
```

しかし、上記のようにLabelを使った書き方の時に、以下のような場合で不便に感じました。
- `Label`の`title`クロージャー内で`Text`を二つを並べたい時に`Aligment`がずれてしまう
- `Image`と`Text`の間隔をさらに広げたい時。


例: ☟
```swift
struct HogeView: View {
    var body: some View {
        Label {
            VStack {
                Text("テスト")
                    .font(.system(size: 24))
                Text("テスト")
                    .font(.system(size: 24))
            }
            
        } icon: {
            Image(systemName: "person")
                .resizable()
                .frame(width: 50, height: 50)
                .background(.red)
                .clipShape(Circle())
        }
    }
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119753/0675b715-977b-52cc-1714-68d5576ed06a.png" width="200">

もちろん`Label`を使わなければ解決できますが、どうせなら`Label`を利用したまま解決していきたいと思います。

## 解決方法
下記のコードを実装します。
```swift
struct MyLabelStyle: LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        HStack(alignment: .center, spacing: 30) {
            configuration.icon
            configuration.title
        }
    }
}
```
`LabelStyle`を準拠させた`MyLabelStyle`を作り、引数の`configuration`を必要に応じていじったり、`HStack`の`alignment`や`spacing`を変えることによって自由に`Label`を変えることができます！
今回は`spacing`と`alignment`を変えたいので、上記のようなコードを定義しました。
これを先ほどのコードで呼び出します

```swift

struct Test02View: View {
    var body: some View {
        Label {
            VStack {
                Text("テスト")
                    .font(.system(size: 24))
                Text("テスト")
                    .font(.system(size: 24))
            }
            
        } icon: {
            Image(systemName: "person")
                .resizable()
                .frame(width: 50, height: 50)
                .background(.red)
                .clipShape(Circle())
        }
        .labelStyle(MyLabelStyle()) // <- 追加
    }
}
```
下記のように期待通りの結果となります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119753/82da0bcc-0f01-4aca-21d4-0552f765055c.png" width="200">

`Label`だけでなく、様々な`View`に`HogeHogeStyle`が用意されてるので、色々できそうです!

## 終わりに
誰かの役に立つことができていれば幸いです。
間違い等がありましたらご指摘していただけると幸いです🙏

### 参考
https://speakerdeck.com/uhooi/iosdc-japan-2022
【flutter】横スクロールをするには？

こんにちは。
今回は、横スクロールを実装する方法を紹介します。

# 方法
![スクリーンショット 2023-08-13 20.18.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/ce57fee2-1687-ea40-8538-b4c8b9db94e0.png)

Rowの要素を横スクロールするには、SingleChildScrollViewを使います。

まず、RowをSingleChildScrollViewでラップします。

そして、SingleChildScrollViewの引数「scrollDirection」にAxis.horizontalを指定します。





# 使用例
```dart
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.pink, //背景の色を選択
        title: const Text("Flutter!!!!"), //タイトルを表示
      ),
      body: SingleChildScrollView(//スクロール
        scrollDirection: Axis.horizontal,//スクロールの方向、水平
        child: Row(
          children: [
            Container(
              height: 200,
              width: 200,
              decoration: const BoxDecoration(
                color: Colors.blue,
                shape: BoxShape.circle,
              ),
            ),
            Container(
              height: 200,
              width: 200,
              decoration: const BoxDecoration(
                color: Colors.yellow,
                shape: BoxShape.circle,
              ),
            ),
            Container(
              height: 200,
              width: 200,
              decoration: const BoxDecoration(
                color: Colors.black,
                shape: BoxShape.circle,
              ),
            ),
            Container(
              height: 200,
              width: 200,
              decoration: const BoxDecoration(
                color: Colors.green,
                shape: BoxShape.circle,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

```

# 実行例


![qiita_gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/a624edcc-77f7-04f8-605a-8cd2870d514b.gif)
無料サービス"サイトスピード簡単比較"を使ってみよう

無料Webサービス「サイトスピード簡単比較」をリリースしました。

サイトスピード簡単比較
https://sitespeed-hikaku.com/

# これは何？

文字通り **「サイトのスピード比較レポートをURL入力だけで簡単に作成するツール」** です。

Chromeブラウザ(PCもスマホも)は、実はユーザーがWebページを表示したときのスピードを計測していて、しかもその集計データには誰でもアクセスできます。そのデータを活用します。

Chrome UX Report (CrUX)
https://developer.chrome.com/docs/crux/


# どうやって使うの？

ユーザーの識別のため、まずはGoogleサインインが必要です。**他の人が作ったレポートの閲覧だけなら不要です。**

サインイン後は比較したいサイトのURLリストを入力するだけです。例えば次のようなURLとサイト名のリストを用意します。

```txt
https://www.rakuten.co.jp/ 楽天
https://www.amazon.co.jp/ Amazon
https://shopping.yahoo.co.jp/ Yahoo!ショッピング
https://zozo.jp ZOZOTOWN
https://wowma.jp/ au PAYマーケット
```

リストはサイト名・URLの順でも構いません。区切り文字はタブでもよいのでExcelなどからのコピペでも行けます。

:::note info
このサービスでいう`サイト`は`ドメイン単位`となります。
:::

# どんな比較レポートができるの？

レポートの例がこちらです。

https://sitespeed-hikaku.com/reports/V6FGcFU3I2rlkXsT3oVt

## ランキング

まずはずばりサイトの速い順ランキングです。

![Cursor_と_サイトスピード簡単比較.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35178/336d05c1-3b26-8453-7953-b851b76da4d5.png)


ただ、一言にサイトスピードと言ってもいろいろな観点の指標があって単純に順位はつけられません。

でも「結局何位なの？」と結論から知りたい人も多いのです。なので便宜的に計算したランキングとなっています。あくまでご参考まで。

ランキングは月次で更新され、過去の結果も閲覧できます。

## 評価 サイト比較

次に先ほどのランキングの根拠となる詳細データです。例えばLCPだけに着目した比較などができます。

![compare-density-lcp (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35178/5ebd1cbe-38d0-410d-88fe-ffd520c88b0f.png)

:::note info
チャートのカメラアイコン 📷 を押すとこんな感じでキャプチャができます。便利！
:::

Webサイトのスピードは、たとえ同じページであってもユーザーやタイミングによってかなりばらつきがあります。

したがって一概に「何秒で表示される」と言うことができません。CrUXでは指標ごとにGoogleが定めた基準値があり、PVサンプルは3段階で評価されます。

- Good 良い=速いPV 緑
- Need Improvement 悪くはないが要改善=普通のPV オレンジ
- Poor 悪い=遅いPV 赤

これらの評価に何%ずつ配分されるかで、そのサイトのスピードを表現します。**「何秒とははっきり言えないが、Goodに分類されるPVが多いサイトの方が速い」** という考え方です。

## 評価 月次分布

CrUXには過去のデータも保管してあり、長期的な指標の変化も見ることができます。

例えばリニューアルのタイミングで大きく改善(あるいは改悪)されるなど、これも気づきの多いレポートです。

例えば楽天はこの2年間、LCPを絶えず改善し続けています。素晴らしいですね！

![monthly-density-lcp (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35178/61b20e8c-e484-fd7f-f98a-facacf5dd0ea.png)


## 代表値 サイト比較

先ほど述べた通り、各指標の値はユーザーやタイミングによってばらつきがあるため、上記のように評価の度数で見る方が実態に近いのですが、やはり具体的な値の方がサイト間の違いをイメージしやすいでしょう。

そこで指標の75パーセンタイルを代表値とした比較もできます。ピンとこない方は、ものすごく大雑把ですが「平均値に近い値」と解釈しても差し支えないかなと思います。

例えば「ZOZOTOWNがAmazonのLCPに追いつくには、今LCP3秒で体験しているユーザーが、1.8秒で体験できるよう40%改善する」と目標設定に使えます。

![compare-p75-lcp (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35178/4fd76e44-572f-e5a1-3c5b-aa34612a92b9.png)


:::note info
代表値は粒度が荒く、例えばLCPだと0.1秒単位になっています。同立順位が出やすいので、サイト間の比較をするには、評価の相対度数の方がよいです。
:::

## 代表値 月次推移

代表値についても過去に遡って月次推移を閲覧できます。

![monthly-p75-lcp (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35178/447d7452-1a50-aa46-fecd-e846b21a228c.png)


## 元データ

レポートに使用したデータはTSVでコピーできます。

例えばExcelにコピペしてピボットテーブルを活用すれば、独自のチャートも作成できます。

# 商用利用・SNS公開について

このサービスについてだけ言えば、レポートやキャプチャ画像の商用利用、SNS公開などに制限はありません。

:::note alert
そもそもCrUX自体が誰でも閲覧できるデータではありますが、特定サイトのスピード評価をSNSなどで公表することで生じるトラブルについてはもちろん責任はとれません。
:::

このサービスを作ったのは、競合比較やベンチマークを通して、サイトスピードについて意識する契機が増えて欲しいと願ってのことです。

自社サイトやクライアントのサイトはもちろん、いろいろなレポートを作成してみてください！
venvでpythonの仮想環境を構築

# 1．venvとは？
Pythonで仮想環境といえば標準モジュールの「venv」が有名です。

# 2．仮想環境の作り方・venvの使い方
・テキストエディタはVisual Studio Code
・WindowsはPowerShellでコマンド操作
# ①プロジェクトディレクトリの作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592268/8344e267-6bc6-e126-bb71-3ad0989fff08.png)
isual Studio Code 画面左に作業ディレクトリ名「python」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592268/5de0a539-039c-d3af-da72-258d9165ad1f.png)
# ②Pythonのバージョンを選ぶ
```py
> python3 -V
Python 3.10.11
```
# ③新しい仮想環境の作成
```py
> python3 -m venv env_py
もしくは　コマンド　
python -m venv env_py
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592268/36ad5cfb-84b4-9e44-fd3c-890726617cc3.png)

# ④仮想環境の有効化
　# ④-1　Windows
```py
env_py\Scripts\Activate.ps1
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592268/2c3058ed-0548-90a4-b278-80f6630dd7df.png)
コマンド実行後は、コマンドラインの冒頭に仮想環境名が表示されています。
これで仮想環境が有効になりました。

# ⑤パッケージのインストール
```py
pip install pandas
```
「Successfully installed…」とインストールが完了した旨が表示されます。


黄色のWARNIGは、「使用しているpipのバージョンが古いですよ。アップデートしましょう」という警告文です。警告文内にある「python.exe -m pip install --upgrade pip」を実行しておくと解消されます。

# ⑥仮想環境のコピー
作成した仮想環境を別のプロジェクトでも使いたい場合は、仮想環境フォルダ（env_py）をコピーし、別のプロジェクトフォルダ内に貼り付ければ仮想環境を利用できます。
仮想環境にインストールしたライブラリは、「requirements.txt」という決まった名称のファイルに記載することで管理します。
```py
pip freeze > requirements.txt
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592268/5d8431ae-0d3c-04bc-f3e7-9a14b893495e.png)
そしてrequirements.txtを別のフォルダ（今回はフォルダ名：TEST_pythons）に貼り付け、作業ディレクトリを移動。続いて以下のように「仮想環境作成」「仮想環境起動」「ライブラリのインストール」を実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592268/64918421-b10c-fdee-046e-9568287790e9.png)

# ⑦仮想環境の無効化
```py
deactivate
```

```
> pip3 list
Package         Version
--------------- -------
numpy           1.25.2
pandas          2.0.3
pip             23.2.1
python-dateutil 2.8.2
pytz            2023.3
setuptools      65.5.0
six             1.16.0
tzdata          2023.3
```
plunkerでvue その59

# 概要
plunkerでvueやってみた。
練習問題、やってみた。

# 練習問題
vueファイルでzundokoを書け。



# 写真
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/d450a335-0bcf-f1ff-0877-8bcd4fed9fee.png)


# サンプルコード

```

<template>
  <div>
    <h2>zundoko</h2>
 		<span v-for="s in zundoko"> {{ s }} </span>
  </div>
</template>

<script>
define(['Vue'], function(Vue) {
  return new Vue({
    template: template,
    data: {
  		zundoko: [],
			zudo: ["ズン", "ドコ"],
			c: 0,
			i: 0
    },
    created() {
			while(1)
			{
				this.i = Math.floor(Math.random() * 2);
				this.zundoko.push(this.zudo[this.i]);
				if (this.i == 0)
				{
					if (this.c <= 4) 
						this.c++;
				}
				else
				{
					if (this.c >= 4) 
						break;
					else 
						this.c = 0;
				}
			}
			this.zundoko.push("キ・ヨ・シ！");
	  }, 
    methods: {
    }
  })
});
</script>

<style>
</style>




```

# 成果物

https://embed.plnkr.co/plunk/mB7QWLqVJEOVRycW


以上。
基数変換

# はじめに
この記事は基数変換の方法についてまとめた記事である。

# N → 10
### 各桁にN進数の重みを掛けて、足す

#### 例（2 → 10）
**101.101** =

`1 × 2^2` + `1 × 2^0` + `1 × 2^-1` + `1 × 2^-2` =
`4` + `1` + `0.5` + `0.125` = 

**5.625**

#### 例（8 → 10）
**0.64** =

`6 × 8^-1` + `6 × 8^-2` =
`0.75` + `0.0625` =

**0.8125**

# 10 → N
### 整数部は基数で割り算を少数部は基数で掛け算を使う

#### 例(10 → 2)
**6.375** =

整数部は`6`

6 / 2 = 3 ... `0`
3 / 2 = 1 ... `1`
1 / 2 = `0` ... `1`

余りを下から並べて`110`

少数部は`0.375`

0.375 * 2 = `0`.75
0.75 * 2 = `1`.5
0.5 * 2 = `1`.0

基数を掛けた整数部を上から並べて`011`

よって、`110.011`です。

# 2 → 8
### 小数点を基準に、`3`桁ずつ区切って、８進数に変換

`1100.01`を小数点を基準に、`3`桁ずつ区切ると、`001` `100`.`010`になる。
これを8進数に変換すると、`1` `4` . `2`となる。

# 8 → 2
### 小数点を基準に、`1`桁ずつ区切って、2進数に変換

`14.2`を小数点を基準に、`1`桁ずつ区切ると、`1` `4` . `2`となる。
これを2進数に変換すると、`001` `100`.`010`になる。

# 2 → 16
### 小数点を基準に、`４`桁ずつ区切って、16進数に変換

`1100.01`を小数点を基準に、`4`桁ずつ区切ると、`1100`.`0100`になる。
これを16進数に変換すると、`C`.`4`

# 16 → 2
### 小数点を基準に、`1`桁ずつ区切って、2進数に変換

`C`.`4`を小数点を基準に、`1`桁ずつ区切ると、 `C` . `4`となる。
これを2進数に変換すると、`1100`.`0100`になる。
色んなテック系のオンライン学習動画を人気順に並べたら、エンジニア学習向けのサイトになった

# はじめに
以前、React.jsを勉強しようとした時に、YouTube、Udemy、O'Reilly、Linkedin Learningなど世の中にはたくさんの学習動画が溢れていて、どの動画を選んでも、
「他にもっと分かりやすくて効率の良いコースがあるんじゃないか」と不安になって、学習に集中できなかった。

 **エンジニアとは、努力したいが、努力する方向に自信がない生き物だと思う**

そこで、世の中にあるオンライン学習動画で、実際に最も再生されているものが正解なんじゃないかと考えた。各プラットフォーム(UdemyやO'Reillyなど)を調べると、公式APIがあったので、公式データでオンライン学習コースのランキングサイトを作ったところ、エンジニアには結構楽しくて分かりやすいサイトだなと思って、公開しました。

オンライン学習動画のランキングサイト - [Tech Course Rank](https://www.techcourserank.com/)

# 最初のモチベーション(余談)
私はエンジニアで、転職を確か3回ほど繰り返してきました。
その中で、技術力を上げたい気持ちから、個人開発について調べていたところ、私の大尊敬する[ジャバ・ザ・ハットリさん](https://jabba.cloud/)のこの記事に出会いました。

[技術書ランキングサイトをQiita記事の集計から作ったら、約4000冊の技術本がいい感じに並んだ](https://qiita.com/jabba/items/edefda09121877b79760)
[開設後３週間で収益１０万円を得た個人開発サイトでやったことの全部を公開する](https://qiita.com/jabba/items/1a49e860a09a613b09d4)

彼の[テック・ブック・ランク](https://techbookrank.com/)というサイトは本当によく考え込まれています。そして、自分も個人開発で好きな技術を使って、お金を稼ぎたい。最後には会社員を脱出したいと思い、今回のTech Course Rankを作りました。

[テック・ブック・ランク](https://techbookrank.com/)は、技術書のランキングサイトに対して、我々の[Tech Course Rank](https://www.techcourserank.com/)は、オンライン学習のランキングサイトなので、正直アイデアとしてはパクリに近いですが、それが個人開発の醍醐味でもあると思うので、存分に真似できるところは真似させていただきました。

# ランキングの信頼性
冒頭でも触れたように、世の中に溢れている学習動画の中で、自分が選んだものが最新で、最も有益で、効率的なものかどうか、不安になることがあると思います。~~各学習動画のレビュー数やレビュースコアもありますが、書かない人の方が圧倒的に多いので、参考程度にしかならないかと。~~
サービス公開後に、ユーザーのフィードバックから、コース購入前は必ずレビューを見たいという声が何個もありました。単純にレビュースコアを
(2023/08/31)

シンプルに、どの学習動画が一番再生されているのかで比較できないかと考えました。その上で、昔にめちゃめちゃ流行った学習動画、というのはあまり見たくなくて、**なるべく新しくて一番再生されている順番**というのが欲しいと思いました。

Tech Course Rankは、それぞれのプラットフォーム(Udemyなど)が提供している公式データ(~~公開日、再生数~~レビュースコアやレビュー数など)を利用してスコアリングしたものを、各プラットフォームからトップ５の学習動画を用いてランキングを生成しています。ですので、ランキングにある時点で各プラットフォームのトップ５なので、あとは自分に合った動画の長さや価格のものを選んでいただけるといいのかなと思っています。


# 職種ごとに分かれたトピック
Tech Course Rankでは、フロントエンジニアやDBエンジニアなど、各職種に必要なトピックごとにランキングを作成しています。
もちろん、ここにあるものがトピックが全てではないですが、駆け出しエンジニアや転職を目指している方には、トピックを眺めるだけでも面白いのではないかと思っています。「この職種にはこんな技術が必要なのか」と参考できるかと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188008/9d4ee28e-8bd5-68c0-ea37-527f0480ad90.png)
例えば、フロントエンジニアには、Vue.jsやTypescriptなどのランキングが表示されます。こんなのも追加してほしい！という要望などは、フィードバックを受け付けてますので、是非是非フィードバックボタンからお送りください。

# Tech Course Rankに使用した技術
React + Redux
react-loading-skeleton
i18next
Material UI / Icon
Firebase Hosting
Firestore
Python (バッチ処理)

# 最後に...
Tech Course Rankを仕事の合間に眺めたり、ちょっと面白いじゃんと少しでも思って頂けるものにしていきたいです。
どんな感想でも批判でも良いので、コメントを頂けると嬉しいです。
今後は、今回の個人開発で行った、デザインをしなくて済む方法や、機能の落とし方、モチベーションの保ち方、アーキテクチャ選定などなど、いくつか記事を書いていこうと思います。
ご清聴ありがとうございました。

## Twitter
開発者: [AJ](https://twitter.com/GooglePython)
Webサイト: [Tech Course Rank](https://twitter.com/TechCourseRank)
OpsRampにおけるKeyCloak連携

本記事では、OpsRampにおけるKeyCloak連携方法について説明します。

# 概要
OpsRampには、Single Sign-On (SSO) システムと連携が可能で、下記のSSOシステムのインテグレーションが用意されています。
- ADFS
- Okta
- Centrify
- OneLogin
- Ping

このほかにカスタムインテグレーションにてSAML認証連携の設定が可能です。
SAML認証連携を使用し、KeyCloakと連携する方法を説明します。

# 設定方法
- Custom Branding の設定 (OpsRamp側の設定)
SAML連携するためには、Custom Branding (カスタムドメイン) の設定が必要になります。
「Application Server」に任意のドメイン名を入力します。(RFC3986に準拠して下さい)
![Custom_Branding.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344939/439ea818-dc19-2e7c-aa0e-b14973e8f1b6.png)

- KeyCloakの設定
新規クライアントを作成し、以下の様に設定します。
Client type: SAML
Client ID: https://<カスタムドメイン>/saml.do
![keycloak1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344939/fd15c0f6-5468-4f15-1026-8040a2d31665.png)

Root URL: https://<カスタムドメイン>/
Valid redirect URIs: https://<カスタムドメイン>/*
![keycloak2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344939/bdc2fd07-ce6f-9f1e-2c3a-1ddd2a46e304.png)

- OpsRampの設定
Setup > Integrations and AppsからCustomインテグレーションを追加します。
![Custom_Integration0.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344939/b702a806-9953-c4d5-c8ab-3c0b1fb548bb.png)
CategoryにSSOを選択し、KeyCloakから取得したidp-metadata.xmlをインポートします。
![Custom_Integration1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344939/b4ef2107-d480-051f-b924-08e7bf5f97f8.png)

インポート後、ログアウト用URLを以下に変更します。
https://<domain-name>/realms/<realm>/protocol/openid-connect/logout


---------------------------------------
[<img width = 250 height = 200 src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344939/111de30a-4d33-aa33-5c7d-83d9015093e6.png">](https://www.vistanet.jp/knowledge-base/)
npm run devをしたら「localhostで接続が拒否されました」と表示された時の対処法

Mac（OS：Ventura13.5）で開発をしています。
いつも`npm run dev`を実行して、開発環境をホットリロードで確認できる環境を立ち上げていたのですが、突如`「localhostで接続が拒否されました HTTP ERROR 404」`と表示され、環境を見ることができなくなってしまいました。

ちなみに、今回 立ち上がるポート番号は7000番で、ポートが空いていないのかな？と思いlsofコマンドで確認してみましたが、特に影響はないように思いました。。エラーログにも原因が表示されず困りました。

## 対処法

Macの「システム環境設定」から「AirPlayレシーバー」の設定を開き、
「AirPlayレシーバー」の設定をオフにしたところ、普段通り開発環境を見ることができるようになりました。
![スクリーンショット 2023-08-28 17.10.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/952495/4263cee8-d9b4-7cb2-b4a7-4819001dd051.png)

ここを自分でオンにしたわけではないのですが、何かのタイミングでオンになってしまい、不具合が起きていたのかもしれません。

Monterey12以降のOSで起こる可能性がありそうですので、もし同様の事象が起こった方は一度試してみてください。
Javaで「LinkedListの使い方」の動作を確認してみた

# 概要
Javaで「LinkedListの使い方」の動作を確認してみました。以下のページを参考にしました。

https://www.javadrive.jp/start/collection/index2.html

# 実装
以下のファイルを作成しました。
```JSample2_1.java
import java.util.LinkedList;
import java.util.List;

class JSample2_1{
  public static void main(String[] args){
    List<String> list = new LinkedList<>();

    list.add("東京都");
    list.add("大阪府");

    for(String s: list){
      System.out.println(s);
    }

    System.out.println("-- --");

    list.add(1, "神奈川県");

    for (int i = 0; i < list.size(); i++){
	System.out.println(list.get(i));
    }

    System.out.println("-- --");

    list.remove(0);

    for(String s: list){
      System.out.println(s);
    }

  }
}
```
以下のコマンドを実行しました。
```
$ javac JSample2_1.java 
$ java JSample2_1 
東京都
大阪府
-- --
東京都
神奈川県
大阪府
-- --
神奈川県
大阪府
```

# まとめ
何かの役に立てばと。
【flutter】「円」を描画するには？？

こんにちは。
今回は、円を描画する方法を紹介します。

# 方法
![スクリーンショット 2023-08-13 20.18.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/ce57fee2-1687-ea40-8538-b4c8b9db94e0.png)

円を描画するには、「Containerウェジェット」を使います。

具体的には、「BoxDecorationクラス」の「shape引数」で、「BoxShape.circle」を指定します。



# 使用例
```dart
 @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.pink, //背景の色を選択
          title: const Text("Flutter!!!!"), //タイトルを表示
        ),
        body: Container(//以下を入れる
          height: 200,
          width: 200,
          decoration: const BoxDecoration(
            color: Colors.blue,
            shape: BoxShape.circle,
          ),
        ));
  }
}

```

# 実行例
![スクリーンショット 2023-08-28 17.14.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/8f7b4f87-b98c-e7a5-5985-57b294a7669d.png)
setNeedsUpdateOfSupportedInterfaceOrientationsを利用した画面回転

## 背景
画面向きに合わせて画面回転をさせる処理がiOS16から非推奨となったので対応したメモです。

## iOS15以前
[attemptRotationToDeviceOrientation](https://developer.apple.com/documentation/uikit/uiviewcontroller/1621400-attemptrotationtodeviceorientati)※Deprecated
```
UIViewController.attemptRotationToDeviceOrientation()
```

## iOS16以降
[setNeedsUpdateOfSupportedInterfaceOrientations](https://developer.apple.com/documentation/uikit/uiviewcontroller/4047535-setneedsupdateofsupportedinterfa)
```
let window = UIApplication.shared.connectedScenes.compactMap { $0 as? UIWindowScene }.first?.windows.filter { $0.isKeyWindow }.first
window?.rootViewController?.setNeedsUpdateOfSupportedInterfaceOrientations()
```

## どちらも対応するとき
```OrientationSettings.swift
    /// デバイスの向きに合わせて画面を回転させる
    private func rotateScreen() {
        if #available(iOS 16.0, *) {
            let window = UIApplication.shared.connectedScenes.compactMap { $0 as? UIWindowScene }.first?.windows.filter { $0.isKeyWindow }.first
            window?.rootViewController?.setNeedsUpdateOfSupportedInterfaceOrientations()
        } else {
            UIViewController.attemptRotationToDeviceOrientation()
        }
    }
```
LoRA作成時にsd-scriptsを実行したら出た 「Error no kernel image is available for execution on the device at line 167 in file D:\ai\tool\bitsandbytes\csrc\ops.cu」 エラーの解消法

# 結論

```
--optimizer_type=AdamW8bit
```
↓
```
--optimizer_type=AdamW
```

に書き換えて実行する


# コマンド

修正した以下のコマンドで上手く行きました。

### 複数行ver(置換で改行コードを削除したのちコマンドラインで実行して下さい)

```
accelerate launch --num_cpu_threads_per_process 1 train_network.py
 --pretrained_model_name_or_path=D:\workspace\stable-diffusion-202308\stable-diffusion-webui\models\Stable-diffusion\Brav6.safetensors
 --output_dir=D:\workspace\stable-diffusion-202308\stable-diffusion-webui\kohyaSS\TrainingData\outputs
 --output_name=FILE_NAME_HERE
 --dataset_config=D:\workspace\stable-diffusion-202308\stable-diffusion-webui\kohyaSS\TrainingData\datasetconfig.toml
 --train_batch_size=1
 --max_train_epochs=10
 --resolution=512,512
 --optimizer_type=Adam
 --learning_rate=1e-4
 --network_dim=128
 --network_alpha=64
 --enable_bucket
 --bucket_no_upscale
 --lr_scheduler=cosine_with_restarts
 --lr_scheduler_num_cycles=4
 --lr_warmup_steps=500
 --keep_tokens=1
 --shuffle_caption
 --caption_dropout_rate=0.05
 --save_model_as=safetensors
 --clip_skip=2
 --seed=42
 --color_aug
 --xformers
 --mixed_precision=fp16
 --network_module=networks.lora
 --persistent_data_loader_workers
```

### 1行ver

```
accelerate launch --num_cpu_threads_per_process 1 train_network.py --pretrained_model_name_or_path=D:\workspace\stable-diffusion-202308\stable-diffusion-webui\models\Stable-diffusion\Brav6.safetensors --output_dir=D:\workspace\stable-diffusion-202308\stable-diffusion-webui\kohyaSS\TrainingData\outputs --output_name=FILE_NAME_HERE --dataset_config=D:\workspace\stable-diffusion-202308\stable-diffusion-webui\kohyaSS\TrainingData\datasetconfig.toml --train_batch_size=1 --max_train_epochs=10 --resolution=512,512 --optimizer_type=AdamW --learning_rate=1e-4 --network_dim=128 --network_alpha=64 --enable_bucket --bucket_no_upscale --lr_scheduler=cosine_with_restarts --lr_scheduler_num_cycles=4 --lr_warmup_steps=500 --keep_tokens=1 --shuffle_caption --caption_dropout_rate=0.05 --save_model_as=safetensors --clip_skip=2 --seed=42 --color_aug --xformers --mixed_precision=fp16 --network_module=networks.lora --persistent_data_loader_workers
```
続：go testのチュートリアルを作ってみた

# はじめに
[以前の投稿](https://qiita.com/taisa1108/items/69bff246a5a4370b9fc7)で紹介したgo-test-tutorialに以下2つのチャプターを追加しました。

- [テストの並列実行](https://github.com/dip-dev/go-test-tutorial/tree/main/chapters/chapter6)[^1]
- [ヘルパー関数と後処理](https://github.com/dip-dev/go-test-tutorial/tree/main/chapters/chapter7)


また、今回のチャプターを作成するにあたり以下メルカリ様の記事を参考にさせていただいています。
`t.Parallel()`メソッドの挙動についてとても分かりやすく解説されているのでぜひこちらも読んでみてください。

https://engineering.mercari.com/blog/entry/how_to_use_t_parallel/

# 進め方
既存と同じように各チャプターディレクトリ内のREADME.mdに従って進めてください。

![スクリーンショット 2023-08-28 16.00.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386230/0bc24ab1-f0da-7fe1-7d9e-7ea49d9620e1.png)

今回追加したチャプターに関しては画像のようにREADMEが手順書になっており、読みながら手を動かすハンズオンの形式に近い構成となっています。


# さいごに
これまではテストの基本的な書き方のみの内容でしたが、そこから一歩踏み込んでテストを効率化させる方法について学習できるチャプターを追加してみました。

このチュートリアルを通じてテストを書く文化が広まっていけば幸いです。
引き続き改善点要望などご意見お待ちしております。




[^1]:厳密には並行実行です
plunkerでvue その58

# 概要
plunkerでvueやってみた。
練習問題、やってみた。

# 練習問題
vueファイルで九九を書け。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/ff8b6c20-f07f-41be-bf2a-34678f773da6.png)


# サンプルコード

```

<template>
  <div>
    <h2>kuku</h2>
		<table>
			<tbody>
				<tr v-for="b in 9">
					<td v-for="a in 9"> {{ a * b }} </td>
				</tr>
			</tbody>
		</table>
  </div>
</template>

<script>
define(['Vue'], function(Vue) {
  return new Vue({
    template: template,
    data: {
    },
    created() {
	  }, 
    methods: {
    }
  })
});
</script>

<style>
body {
	font-family: Helvetica Neue, Arial, sans-serif;
	font-size: 14px;
	color: #444;
}
table {
	border: 2px solid #42b983;
	border-radius: 3px;
	background-color: #fff;
}
th {
	background-color: #42b983;
	color: rgba(255, 255, 255, 0.66);
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-user-select: none;
}
td {
	background-color: #f9f9f9;
}
th,td {
	min-width: 20px;
	padding: 10px 20px;
}
</style>




```

# 成果物

https://embed.plnkr.co/plunk/wFJ0I909vrxOAAfB


以上。
S3からBigQuery Data Transfer Serviceでインポート時にAccess Denied

## 事象
- RDSからS3でエクスポートしてparquetのデータを作った
- BigQuery Data Transfer Serviceを利用してインポートするときに以下のエラーが発生した
```
Error code 7 : Access Denied: Table xxxxxxxxxx:{データセット名}.{テーブル名}:
Permission bigquery.tables.get denied on table xxxxxxxxxx:{データセット名}.{テーブル名}
(or it may not exist).
```

これだけ見ると、GCP側に`bigquery.tables.get`の権限が不足しているように見えるのだが

## 原因
- S3側のIAMユーザの権限が不足していた。


## 対応
- 以下のような権限にした。

```json
{
    "Sid": "s3Bucket",
    "Effect": "Allow",
    "Action": [
        "s3:List*",
        "s3:Get*"
    ],
    "Resource": [
        "${バケットのARN}",
        "${バケットのARN}/*"
    ]
}
```
plunkerでvue その57

# 概要
plunkerでvueやってみた。
練習問題、やってみた。


# 練習問題
vueファイルでfizzbuzzを書け。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/6be8829a-724a-6891-8dc3-16aba4951f29.png)


# サンプルコード

```

<template>
  <div>
    <h2>fizzbuzz</h2>
 		<span v-for="s in fizzbuzz"> {{ s }} </span>
  </div>
</template>

<script>
define(['Vue'], function(Vue) {
  return new Vue({
    template: template,
    data: {
  		fizzbuzz: [] 
    },
    created() {
  		for (var i = 1; i < 101; i++) 
	  	{
		  	if (i % 15 == 0) 
			  {
				  this.fizzbuzz[i] = "fizzbuzz";
			  }
			  else if (i % 5 == 0)
			  {
				  this.fizzbuzz[i] = "buzz";
			  }
			  else if (i % 3 == 0)
			  {
				  this.fizzbuzz[i] = "fizz";
			  } 
			  else
			  {
				  this.fizzbuzz[i] = i;
			  }
		  }
	  }, 
    methods: {
    }
  })
});
</script>

<style>
</style>




```

# 成果物

https://embed.plnkr.co/plunk/voYyYMHuuVDqDhYG


以上。
Github ActionsでVPSに自動デプロイする(AWS lightsail)

# 環境(VPSでなくても大丈夫なはず)

VPS: Amazon Lightsail(node 18)

## VPS内でgit cloneを行う(公式が推奨しているHTTPSでクローン)
指定したディレクトリでいつもの
```text:コマンド 
git clone https://github.com/ユーザ名/リポジトリ名.git
```

でクローン。

```text:ターミナル
git remote -v
origin  https://github.com/username/git-repository.git (fetch)
origin  https://github.com/username/git-repository.git (push)
```
リモートリポジトリが指定されていることを確認。

:::note warn
2021年8月13日にパスワード認証がなくなったため、SSHかアクセストークンを生成しないとcloneできないとのこと。
:::

今回はトークンを作成し、リモートリポジトリのURLを変更すると、cloneやpullなどができるようになる。

## トークンの作成
https://github.com/settings/profile

にアクセスし、左下の「Developer Settings」を選択し、
「Personal Access Setting」->「Token(classic)」を選択。
「Generete new Token(classic)」を選択

「Note」に任意の名前を
Expiration(期限)は自由だが、無期限はセキュリティの観点から __非推奨__。
「Select scopes」は
・repo (プライベートリポジトリにアクセスする権限)
・workflow(github actionsで使用可能にする権限)
を選択。

Generete Tokenを押しトークンを生成。

:::note warn
トークンの中身は1度だけしか表示されないのでどこかにメモしておこう！
:::

## トークンを使う
作成したトークンはパスワード認証の代わりとして作成したが、今回は自動デプロイを行うため、
cloneやpull時にトークンを入力する手間をなくしたい。そのため、今からcloneやpullを行った際に
トークンを入力しなくて済むように設定する。

```diff_python:ターミナル
#指定したリモートリポジトリを削除する。(githubのリポジトリは消えませんので安心を)
git remote rm origin

#リモートリポジトリを確認
git remote -v
- origin  https://github.com/username/git-repository.git (fetch)
- origin  https://github.com/username/git-repository.git (push)
+ (表示されない)

#トークンを用いたリモートリポジトリを指定({username}にユーザ名、{password}にトークンを指定。********はリ
ポジトリ名)
git remote add origin https://{username}:{password}@github.com/{username}/********.git

#再度リモートリポジトリを確認
-(表示されない)
+ origin https://{username}:{password}@github.com/{username}/********.git (fetch)
+ origin https://{username}:{password}@github.com/{username}/********.git (push)
```
と表示されれば設定完了！
あとはGithub ActionsでSSHでVPSに接続し、その中でpullやmergeなどを行うコードをいじる。

### 注意点！
Github Actionsはlogの部分に**err**と書いてあるときがあるが、エラーを吐いているわけではないことがあるので注意！
自作EAツールのおすすめ検証方法

寝ているだけでお金が稼げることを夢見て、EA（自動売買）ツールを作ろうとしたプログラマーも少なくないはず。

私もロジックさえちゃんとしていれば稼げるんじゃないかと思って、必死にツールを作りました。ただ、EAツールを作ったはいいものの、試そうにも全然元手が無くて困り果てていました。

そこで、私は自己資金0でノーリスクで始められる海外FXを発見したんです。海外FXの中には集客目的で口座開設ボーナスを提供してる業者がいて、口座開設するだけで1万～2万円もらえるので、これを使えば資金が無い私でもEAツールの検証ができると思ったんです。

下記のようなサイトで口座開設ボーナスがもらえる業者がまとまっているので、参考にして口座開設ボーナスをもらいまくりました。結局、全業者合わせて10万円近くのボーナスをゲットできたので、資金が無い方はおすすめです。

https://finconnect.co.jp/forex/kaigaifx-no-deposit-bonus/

まずは自己資金ではなくボーナスをもらって検証してみて、うまくいけば自己資金も入金すればいいと思います。ボーナスで得た利益は、そのままトレード資金に活用できるので上手くいけば寝ているだけで稼ぐ生活スタートです。それも、自己資金無しなのでノーリスクなのは安心ですね。

あと、海外FXは怪しいイメージもあるので、積極的な入金は控えておくのが良いと思います。または、みんなが使っている大手の人気業者だけにしておくのが良さそうです。同じサイトで、ライセンスや口コミを集めて安全性を考慮したおすすめランキングも紹介していたので参考にしました。どのサイトを見てもXMが人気みたいですね。

https://finconnect.co.jp/forex/kaigaifx-broker-reccomend/

私はたまたま上手くいったので、このまEAツールを稼働させて夢を追いかけたいと思います。
M1 MacbookにHortonworks HDP sandbox docker 環境をインストール

## 1. スクリプトをダウンロード、解凍

https://www.cloudera.com/downloads/hortonworks-sandbox/hdp.html

その後,解凍したフォルダ内に移動しておく

## 2. docker-deploy-hdp30.sh を編集

AS-IS
```
docker run --privileged --name $name -h $hostname --network=cda --network-alias=$hostname -d "$registry/$name:$version"
```

TO-BE
```
docker run --platform linux/amd64 --privileged --name $name -h $hostname --network=cda --network-alias=$hostname -d "$registry/$name:$version"
```
(--platform linux/amd64 を追加)

## 3. assets/generate-proxy-deploy-script.sh を編集

AS-IS
```
docker rm -f sandbox-proxy 2>/dev/null
docker run --name sandbox-proxy --network=cda \\
-v $absPath/assets/nginx.conf:/etc/nginx/nginx.conf \\
-v $absPath/sandbox/proxy/conf.d:/etc/nginx/conf.d \\
-v $absPath/sandbox/proxy/conf.stream.d:/etc/nginx/conf.stream.d \\
EOF
```

TO-BE
```
docker rm -f sandbox-proxy 2>/dev/null
docker run --name sandbox-proxy --network=cda \\
--platform linux/amd64 \\
-v $absPath/assets/nginx.conf:/etc/nginx/nginx.conf \\
-v $absPath/sandbox/proxy/conf.d:/etc/nginx/conf.d \\
-v $absPath/sandbox/proxy/conf.stream.d:/etc/nginx/conf.stream.d \\
EOF
```
(--platform linux/amd64 を追加)

## 4. 実行

(解凍したフォルダ内に移動したのち)

```
$bash docker-deploy-hdp30.sh 
```
Dockerでマルチラインの環境変数を扱いたかった

# 概要
Dockerの環境内で複数の環境変数をセットしたい場合や、特に秘密鍵のような情報を持つ場合は、
通常の方法での取り扱いが難しくなります。この記事では、その問題の原因とその解決策について考えてみました。

## まず最初に考えた方法
シェルスクリプトを用いて環境変数を読み込み、それをDocker環境内で利用するためのexportコマンドに変換することを考えました。
```
cat .env | grep -v ^# | sed 's/^\(.*\)=\(.*\)$/export \1="\2"/g' > export_env.sh
source export_env.sh
rm export_env.sh
```
しかしこれは秘密鍵のようなマルチラインの環境変数に対応できない問題が発生します。

## 解決策
解決策
awkを利用して、マルチラインの環境変数も適切に取り扱うスクリプトを考えました
```
awk 'BEGIN {ORS=""; print "" > "export_env.sh"}
    !/^#/ && /=/ {
        if ($0 ~ /-----BEGIN/) {
            key=$1;
            sub(/=.*/, "", key);
            printf("export %s=\"", key) > "export_env.sh";
            do {
                getline;
                printf("%s\\n", $0) > "export_env.sh";
            } while ($0 !~ /-----END/);
            print "\"" > "export_env.sh";
        } else {
            split($0, a, "=");
            printf("export %s=\"%s\"\n", a[1], a[2]) > "export_env.sh";
        }
    }' .env
```

## 解説
### BEGINセクション
- `ORS=""` デフォルトの行の終わりのセパレータを空文字に設定します。これにより、続く行の出力が新しい行にならないようにする
- `print "" > "export_env.sh"` : 出力ファイルexport_env.shを初期化

### パターンに合わせてアクションする
- `!/^#/ && /=/:` 行が#で始まらない、=を含む行にマッチさせてコメント行や無効な行をフィルタリング

### マルチラインの環境変数の処理
- `$0`: 現在の行全体を示すAWKの変数
- `~:` 正規表現マッチングを行うオペレーター、左側の文字列が右側の正規表現にマッチする場合に真を返す
- `getline:` この関数は、次の行を読み取り、現在の行変数を更新
- `split:` 文字列を指定したセパレータで分割し、配列にその結果を格納
- `-----BEGIN`で始まる場合の処理を行い、`key=$1`と`sub(/=.*/, "", key)`：変数の名前を取得する。do-whileループ：`-----END`が見つかるまでの各行を読み込み、それらを\nでエスケープして連結する。
`print "\"" > "export_env.sh"`：ダブルクォートで値の部分を閉じる。

このスクリプトにより、.envの内容が読み取られ、マルチラインの環境変数を考慮した形でexport_env.shに変換されるようになりました。

### そもそも論
- セキュリティ
    - 一時ファイルに機密情報を書き出すことはセキュリティ上のリスクがあります。お勧めできる方法ではありません。
- 特定のフォーマットに依存
    - このスクリプトは、環境変数が特定のフォーマット（-----BEGINから始まるマルチライン）であることを前提としています。他の形式のマルチライン文字列では正常に動作しない可能性しかない。
Databricksのユーザー設定ページがリニューアルされました

なお、構成要素は変わっていません。

左のメニューからアクセスする形に変更されています。

![Screenshot 2023-08-28 at 15.08.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/aca0ca3a-1c33-966c-5330-3cd7c415c99c.png)
![Screenshot 2023-08-28 at 15.08.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/9bda5044-2c76-9e58-5a28-6488d4492fa3.png)
![Screenshot 2023-08-28 at 15.08.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/5ae64415-fd86-982f-4d7e-cb9190cc4ee7.png)

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

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


### Databricks無料トライアル

[Databricks無料トライアル](https://databricks.com/jp/try-databricks)
インテグレーションユーザ


+ [ベストプラクティス: CRM Analytics (Tableau CRM) のインテグレーションユーザおよびセキュリティユーザの管理](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX00000MXZtT0AX)

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

ややこしいことに、似たような名前のユーザ（ライセンス）が２つある。




# プラットフォームインテグレーションユーザ

+ [プラットフォームインテグレーションユーザ](https://help.salesforce.com/s/articleView?id=sf.security_platform_integration_user.htm&type=5)
+ [Force.com Sites(Not Experience Cloud)のゲストユーザにフロー実施権限を付与する方法](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007FVE9Y)


# Integration User Licenses

+ [新しい Salesforce インテグレーションユーザライセンスを割り当てて API 限定アクセス権を付与](https://help.salesforce.com/s/articleView?id=release-notes.rn_api_integration_license.htm&release=242&type=5)

専用の異なるユーザを各インテグレーションに割り当てることで、それらのユーザをデータの一意のサブセットに制限できます。これにより、操作をより詳細に制御し、各インテグレーションポイントで実行されたトランザクションをより適切に追跡できます。このユーザライセンスを使用すると、複数のインテグレーションを使用する組織は、インテグレーションごとに 1 つのユーザといったベストプラクティスに、より容易に従うことができます。Salesforce インテグレーションユーザライセンスでは、API を介してのみ Salesforce データおよび機能へのアクセス権がユーザに付与されます。

+ [インテグレーションユーザへの API 限定アクセス権の付与](https://help.salesforce.com/s/articleView?id=sf.integration_user.htm&type=5)
+ [Salesforce Release 5x Free Integration User Licenses](https://www.salesforceben.com/salesforce-release-5-free-integration-user-licenses/)


# 変更する？

+ [How to unassign a Salesforce Integration license?](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007cmKHGSA2)
IT系の資格ってどんなのがある？

# はじめに

IT業界では、新しい技術やサービスの登場に伴い、多様な資格試験が増えており、全体像を把握するのが難しくなっています。
この記事では、どのようなIT系の資格があるか、自身で取得したものを中心に紹介していきます。

# 資格取得の目的・メリット

1. スキルアップ
    - 資格化されているものは体系的に学びやすい
    - 目標が明確で取り組みやすい
2. スキル証明
    - 「これが出来ます」というのを示しやすい
    - 継続して勉強していることのアピールにもなる
3. キャリアアップ・給与アップ
    - 昇給や昇進、転職のアドバンテージになる可能性があります
    - 会社によっては報奨金や資格手当があります

<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3294382/d43a3d87-42c2-e449-7104-91a7cb6f070c.png">

# 自己紹介

主にバックエンドエンジニアとして、IT業界で10年以上働いています。
今まで取得して資格は以下のようなものがあります。

- 情報セキュリティスペシャリスト
- データベーススペシャリスト
- エンベデッドシステムスペシャリスト
- AWS Certified Solutions Architect - Professional
- AWS Certified DevOps Engineer - Professional
- GCP Associate Cloud Engineer
- Oracle Certified Java Programmer, Gold SE 8
- Oracle Certified Expert, Java EE 6 Web Component Developer
- HTML5プロフェッショナル認定試験 レベル1 / 2
- UMTP-L3
- Certified SAFe 5 Scrum Master

etc...

# 資格の種類
資格は大きく分けて、「国家資格」「民間資格」の2つがあります。

## 国家資格
知名度や信頼度としては、一番高いものになります。
言語や製品に依存しない知識を得られるため、万人におすすめできます。

例：
- 情報処理技術者試験
- 技術士
- ウェブデザイン技能検定

## 民間資格
プログラミング言語や特定の分野に特化した知識を証明できます。
知名度や信頼度は提供団体に依存します。
有効期限が設けられている場合が多く、数年ごとの再受験が必要となります。

例：
- LPIC/LinuC
- HTML5プロフェッショナル 認定
- G検定

### ベンダー資格
民間資格の中でも、製品やサービスの提供企業が自社製品のユーザーに対して技術を認証することを目的としています。
クラウド系の資格などは考え方など応用が効く部分もありますが、基本的には製品に特化したものとなります。

例：
- AWS認定試験
- シスコ認定試験
- Salesforce 認定資格

# 各資格の難易度

受験者のバックボーンにもよるので単純な比較はできませんが、
主観では、以下の順番で難易度が高くなります。

1. 技術士 (超難関)
1. 情報処理技術者試験：高度試験
1. 民間資格：Professionalなど最上位
1. 情報処理技術者試験：応用情報処理技術者

スキル標準ユーザー協会がITSSレベルと資格のマッピング表を公開しており、これも一つの目安となります。
また、どんな種類の資格があるのかを見るのにもおすすめです。
https://lpi.or.jp/doc/ISVMap.pdf


# オススメ資格の紹介

知名度・汎用性を重視しして、オススメできる資格を紹介します。

## 情報処理技術者試験
ITについての汎用的な知識を体系的に学ぶことができます。

特徴としては、
- 国家資格であり、他の資格と比べて知名度は圧倒的に高い
- 民間資格と比べて受験料が安い (執筆時点で7,500円)
- 高度試験は細かくカテゴライズされており、自身のキャリアにあったものを選択することができる
- 応用情報技術者以上は、春と秋の年2回開催

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3294382/5fb907dd-947c-8bfb-b3d8-ecdd1d4379d2.png)
> https://www.ipa.go.jp/shiken/kubun/list.html

## LPIC/HTML5 Professional
LinuxやHTMLの知識はソフトウェア開発をする上で必須と言えます。
ベースの知識を深めるために取得しておいて損はありません。

## Oracle Certified Java Programmer (他、言語系の資格)
プログラミング言語系の資格は1つ取っておくと良いです。
1つの言語を網羅的に学んでおくと、他の言語にも応用が効きやすくなります。

## AWS認定試験
ベンダー資格は、基本的にその製品を使っている場合のみ、必要に応じて取得すれば良いです。
例外的に、AWS認定資格は以下の理由からおすすめできます。
- クラウド系に共通する思想を体系的に学ぶことができる
    - クラウドの知識自体がほぼ必須になってきている
- AWSが積極的にプロモーションを行なっており、ベンダー資格の中では圧倒的に知名度が高い
- 一時期と比べると落ち着いてはきたものの、世間的な需要が高く評価されやすい

https://aws.amazon.com/jp/certification/
EDINET API version2が公開されたので使ってみるぞ！

# 概要
EDINET APIが新しくなるとアナウンスがあったので早速使ってみた！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330768/8e0fcca1-188b-47b9-e6e9-d6c179145b6d.png)
※参照:https://disclosure2.edinet-fsa.go.jp/week0010.aspx

# 設定

EDINETが提供している「EDINET API仕様書Version2」の手順通り、下記を行う。
 - ポップアップ許可サイトへの追加
 - メールアドレス認証
 - 多要素認証
 - APIキーの発行


主は、ポップアップ許可サイトへの追加を飛ばしてしまい最初はうまく発行ができなかった。

# 疎通

試しに書類一覧APIを叩いてみる！
インターフェイスも「EDINET API仕様書Version2」に記載がある。

```
curl --location 'https://api.edinet-fsa.go.jp/api/v2/documents.json?date=2023-08-28&type=2&Subscription-Key=[発行したAPIキー]'
```

# バージョンが上がってどんな点が変わったのか？

2023年5月に公表されたこちらの資料に記載がある。
[EDINET API機能追加に係る利用者向け説明会資料](https://disclosure2dl.edinet-fsa.go.jp/guide/EFT013/230501K0001/2/%E8%AA%AC%E6%98%8E%E4%BC%9A%E8%B3%87%E6%96%99.pdf)

主な変更点を抜粋
 - 取得対象にCSVデータを追加
 - 認証の導入
 - URLの変更


# CSVデータでの取得を試す

type=5を指定すると、提出書類のXBRLデータをCSV形式に変換したファイルが取得できる。
これで、XBRL解析が少し楽になるのかも？

```
curl --location 'https://api.edinet-fsa.go.jp/api/v2/documents/S100RR60?Subscription-Key=[APIキー]&type=5' --output S100RR60.zip
```
バッテリレス漏水センサのビーコンをNode-REDで受信する

# はじめに

ABLIC社のバッテリレス漏水センサのビーコン(BLE Beacon)をNode-REDで受信する手順をまとめます。

![IMG_1943.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/acfaa962-5cdc-2092-0fcb-7e9f4232b67e.jpeg)

## 仕様書(ユーザーズマニュアル)

https://drive.google.com/file/d/1HzaoS-bRmG75pcTs0kCDMBqJuF4aZ8Ew/view?usp=drive_link

# Wiresharkでビーコン情報を確認する

nRF Sniffer for Bluetooth LEツールとWiresharkでビーコン情報を確認します。
XIAO BLEにnRF Sniffer for Bluetooth LEツール(バージョン: v4.1.1)を書き込みます。

https://qiita.com/kitazaki/items/00fdfbdfc3a8cdb1411e

Wiresharkの設定を行い、起動してパケットをキャプチャーします。
流れるパケットの量が多い場合はフィルターを設定します。(BLEのアドレスを設定します)

```text
btle.advertising_address == fc:c8:13:08:bf:09
```

![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/bc379b33-0860-b5dc-0f02-055763b0c341.jpeg)

## サンプルのキャプチャーデータ

https://drive.google.com/file/d/1TDIJt8CV0U9Pa93nK87L7Rwa8vJGv1LF/view?usp=drive_link

## データ構造

基本的に同じデータを受信します。

![スクリーンショット 2023-08-28 14.07.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/273b4c7d-13ec-ec8f-7244-045146f2e984.png)

https://docs.google.com/spreadsheets/d/1BP0fkwuuUhs6gByacRPwRfMZw2dMLNYrODVO07dZYy8/edit#gid=0

# Node-RED

ラズパイにNode-REDをインストールします。
最初にNode.js 18.x系をインストールします。

```bash
$ curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
$ sudo apt install -y nodejs
$ node -v
v18.14.2
$ npm -v
9.5.0
```

```bash
bash <(curl -sL https://raw.githubusercontent.com/node-red/linux-installers/master/deb/update-nodejs-and-nodered)
```

以下のモジュールをインストールします。

- node-red-contrib-beacon-scanner

https://flows.nodered.org/node/node-red-contrib-beacon-scanner

```bash
$ cd ~/.node-red
$ sudo apt install bluetooth bluez libbluetooth-dev libudev-dev
$ sudo setcap cap_net_raw+eip $(eval readlink -f `which node`)
$ npm i node-red-contrib-beacon-scanner
```

Node-REDを起動します。

```bash
$ sudo systemctl start nodered.service
```

ブラウザを開いて、http://[ラズパイのIPアドレス]:1880へアクセスし、フローを作成します。

![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/62c01976-489b-568d-0ef5-d783955d3e83.jpeg)

## reTerminal

reTerminalの場合、Raspberry Pi OSとNode-REDがインストールされているため、以下のモジュールをインストールします。

- node-red-contrib-beacon-scanner
- node-red-contrib-reterminal

https://flows.nodered.org/node/node-red-contrib-reterminal

```bash
$ cd ~/.node-red
$ npm i node-red-contrib-reterminal
```

漏水センサのビーコンを受信したらreTerminalのブザーを鳴らし、reTerminalのボタンを押したらブザーの音を消す、といった使い方ができます。

![3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/0009c53d-1488-e9df-40e1-811600134355.jpeg)

![スクリーンショット 2023-08-28 14.36.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/8fd1367f-70d7-a55f-6d3d-c1dc40d8f815.png)
![スクリーンショット 2023-08-28 14.36.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/6116dfc0-317c-31af-ecc2-c900e456592c.png)
XcodeのシミュレータではBluetoothを使えない

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

## 解決方法
SwiftでBluetoothを扱うときは、実機で確認する必要があります。
例えばXcodeで開発をしているときには、シミュレータでプログラムを実行することができますが、シミュレータにはBluetoothが搭載されていません。
そのため、Bluetoothを利用する機器と通信できません。