OmniAICreator/Qiita-1.07M huggingface dataset:
React Native Maps Directionsを使って経路の所要時間を取得する方法



今回は、`react-native-maps-directions`を使って2点間の経路案内を作る方法と、その経路にかかる所要時間を取得する方法を紹介します。これを使用することで、簡単に移動時間を取得できるので、移動に関するアプリを作る際に非常に役立ちます。

---

## 目次

1. [導入](#導入)
2. [react-native-maps-directionsの設定](#react-native-maps-directionsの設定)
3. [所要時間の取得方法](#所要時間の取得方法)
4. [完全なサンプルコード](#完全なサンプルコード)
5. [まとめ](#まとめ)

---

## <a name="導入"></a>導入

まず、必要なパッケージをインストールしましょう。

```bash
npm install react-native-maps react-native-maps-directions
```

また、Google Maps Directions APIキーが必要です。[こちら](https://console.cloud.google.com/)から取得してください。

---

## <a name="react-native-maps-directionsの設定"></a>react-native-maps-directionsの設定

次に、経路案内を表示するための基本的な設定を行います。

```jsx
import MapView from 'react-native-maps';
import MapViewDirections from 'react-native-maps-directions';

const App = () => {
  const origin = {latitude: 37.7749, longitude: -122.4194}; // 例としてサンフランシスコ
  const destination = {latitude: 34.0522, longitude: -118.2437}; // 例としてロサンゼルス

  return (
    <MapView
      style={{flex: 1}}
      initialRegion={{
        latitude: 36.7783,
        longitude: -119.4179,
        latitudeDelta: 10,
        longitudeDelta: 10,
      }}>
      <MapViewDirections
        origin={origin}
        destination={destination}
        apikey="YOUR_GOOGLE_MAPS_API_KEY" // あなたのGoogle Maps APIキーを入力
      />
    </MapView>
  );
};
```

---

## <a name="所要時間の取得方法"></a>所要時間の取得方法

`react-native-maps-directions` には、経路情報が読み込まれたときのコールバックとして `onReady` プロパティが提供されています。これを利用して、経路の距離と所要時間を取得します。

```jsx
const handleDirectionsReady = (result) => {
  const distance = result.distance; // 距離 (km)
  const duration = result.duration; // 所要時間 (時間)

  console.log(`距離: ${distance} km, 所要時間: ${duration} 時間`);
};

<MapViewDirections
  ...
  onReady={handleDirectionsReady}
/>
```

---

## <a name="完全なサンプルコード"></a>完全なサンプルコード

こちらが、経路案内と所要時間を取得するための完全なサンプルコードです。

```jsx
import React from 'react';
import MapView from 'react-native-maps';
import MapViewDirections from 'react-native-maps-directions';

const App = () => {
  const origin = {latitude: 37.7749, longitude: -122.4194};
  const destination = {latitude: 34.0522, longitude: -118.2437};

  const handleDirectionsReady = (result) => {
    const distance = result.distance;
    const duration = result.duration;

    console.log(`距離: ${distance} km, 所要時間: ${duration} 時間`);
  };

  return (
    <MapView
      style={{flex: 1}}
      initialRegion={{
        latitude: 36.7783,
        longitude: -119.4179,
        latitudeDelta: 10,
        longitudeDelta: 10,
      }}>
      <MapViewDirections
        origin={origin}
        destination={destination}
        apikey="YOUR_GOOGLE_MAPS_API_KEY"
        onReady={handleDirectionsReady}
      />
    </MapView>
  );
};

export default App;
```

---

## <a name="まとめ"></a>まとめ

今回は、`react-native-maps-directions` を使用して、2点間の経路案内とその所要時間を取得する方法を紹介しました。この方法を使えば、移動に関するアプリを簡単に作ることができるでしょう。皆さんもぜひ試してみてください！

---

いいねやフォローをいただけると嬉しいです！次回も役立つ情報をお届けします！🚀

---

以上、React Native Maps Directionsを使って経路の所要時間を取得する方法についてでした。ご質問やコメントがあれば、お気軽にどうぞ！👋
インフラエンジニアの仕事は開発であって運用ではない

# 記事要約
インフラエンジニアの仕事は業務に変化をもたらす仕事なので開発ですよ、という記事です。

# 開発と運用
まず、開発と運用の定義を下記のように考えたいと思います。
開発、運用という言葉の利用時にはだいたいこのような感じで認識されているかと思います。

<dl>
<dt>開発</dt>
<dd>製品をつくりあげるために使用する材料や部品、その量、製造手順が不明確で、それらを明確化するプロセス。<br>
開発と言っても純粋な開発から製造に近い開発までグラデーションがあるが、純粋な開発に近いタスクであればあるほど、結果と工数は未確定になる。</dd>

<dt>運用</dt>
<dd>定まっている製品・サービスの仕様を下に、その仕様を活用する形で製品・サービスを提供するプロセス。<br>
製品やサービスを新たに作ることはなく、製品やサービスの仕様の変化ももたらさない。</dd>
</dl>

# システムを取り巻くアクター
別記事[システムを取り巻く3つのアクター](https://qiita.com/furusats/items/1572ac1a47bf9f956cd0)で使った図を少し表現を変えて再掲します。
![システムを取り巻く３つのアクターと２つの業務工程 (14).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491279/8e39b105-4cf2-23f2-36cd-765f5683d4a2.png)
業務をエンドユーザー業務、ITサービス提供業務、ITサービス開発業務の３つで見たときに、それぞれに開発（エンジニアリング）プロセスと、運用プロセスが存在します。

この図の中でのインフラエンジニアの立ち位置を考えてみます。

# インフラエンジニアの担当範囲
一般的にシステム開発で、インフラエンジニアは下記の表の赤い部分を担当します。
![システムを取り巻く３つのアクターと２つの業務工程 (15).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491279/93633843-1a28-0eb8-a01c-731810d4cd62.png)
エンドユーザー向け業務システムのインフラ設計や構築を担当しますし、ログ収集や監視の仕組みづくりといったITサービス提供業務の仕組みづくりもします。また、CI/CD環境の整備といった開発プロセスの仕組みづくりもします。

これらは業務に変化を起こしていく仕事なので、全て開発です。

運用を担当することもあるかもしれませんが、インフラエンジニアがITサービス提供に関わるシステム導入支援やユーザーサポート（問い合わせ対応業務）などをメインで対応することはないですし、担当するにしても[テクニカルサポート](https://ja.wikipedia.org/wiki/%E3%83%86%E3%82%AF%E3%83%8B%E3%82%AB%E3%83%AB%E3%82%B5%E3%83%9D%E3%83%BC%E3%83%88)のL2〜L3の部分くらいかと思います。

# SREはどうか
2010年代半ばからインフラエンジニアをSREと呼ぶ組織が多くなってきたと思います。（インフラエンジニアをSREと呼ぶべきかの議論はここではしません）

SREの視点では、主に下図の赤い部分を中心に語られることになります。
それにプラスして開発プロセスエンジニアリング部分も担当していることもあるかもしれません。
![システムを取り巻く３つのアクターと２つの業務工程 (16).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491279/d2c08f11-f758-5c59-9526-8be01d20ebe6.png)

# インフラエンジニアの仕事は開発であって運用ではない
ということでインフラエンジニアの仕事は開発であって運用ではありません。
「インフラエンジニアの仕事は運用」、「インフラエンジニアのコストは運用コスト」とみなすと少しおかしな議論になったり、判断を誤ったり、実態の把握を間違えるので気をつけましょう。
Use Sharing Rules for External Users



# There was an unexpected error in your org which is preventing this assessment check from completing: System.QueryException: List has no rows for assignment to SObject

+ [Trailhead-STEP: Sharing Rules for External Users](https://developer.salesforce.com/forums/?id=9060G0000005ovNQAQ)

**Setting and Testing External Org-Wide Defaults**
+ [Why am I getting this error stating that: List has no rows for Assignment to SObject?](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007FzRuq)

# sharing settings is not appearing

+ [Button [new] on sharing settings is not appearing in Use Sharing Rules for External Users Unit](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V000076BUXN)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/03b35ebe-c30a-1738-c90d-7892ae772d12.png)

:::note
Try your browser's incognito mode.Or try it in a different browser. 
:::

+ [Getting this error message: There was an unexpected error in your org which is preventing this assessment check from completing: System.QueryException: List has no rows for assignment to SObject](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX00000KBrRC0A1)

:::note
It eventually worked for me. I had disabled 2 partner contacts then re-enabled them, and renaming First and last names of the corresponding disabled users fixed it.

https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007T4590SAB
:::


# Sean Forbes doesn't have access to the Edge Installation opportunity. Redo the steps to give him access.

+ [Unable to complete Share CRM Data With Your Partners > Use Sharing Rules for External Users](https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000JgYLL)

:::note
The name field was encrypted on Contact object, which is now corrected by the Support. Thanks for the speedy response and resolution. 
:::

# 未解決

+ [Unable to complete Share CRM Data With Your Partners > Use Sharing Rules for External Users](https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000Jgz7r)
電子工作メモ - MicroPython

# MicroPythonメモ

## ビット演算

- [Repl.ip](https://replit.com/@kazunobuichihas/MicroPythonSample#main.py)

```python
# ビット列表示する
# data   : バイナリデータ
# pattern: 表示フォーマット
def show_bit(data, pattern="08b"):
    print(format(data, pattern))

# 位置を表すビットパターンを作成する
# index  : 位置
# default: ビットシフトする初期値
def bit_pattern(index, default=0x01):
    return default << index

# 指定した位置にビットが立っているか？
# data : バイナリデータ
# index: インデックス
def flag(data, index):
    bit = bit_pattern(index)
    return (data & bit) == bit

def show_flag(data, index):
    print(flag(data, index))

data = 0xc5

show_bit(data)
print("")
for i in range(8):
    show_bit(bit_pattern(i))
    show_flag(data, i)

# 11000101
#
# 00000001
# True
# 00000010
# False
# 00000100
# True
#  :
#  :
```
SAQL関連

[まとめページに戻る](https://qiita.com/Keiji_otsubo/items/60afc2a8d211b6f7d89f)
[まとめN～Z](https://qiita.com/Keiji_otsubo/items/92f92bb9f668ca9688be)


# DateTime型の変換

+ [invalid arguments on date_to_string function](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007FSpxk)

```
date_to_string(toDate(LastModifiedDate,"yyyy-MM-ddTHH:mm:ss.000Z"), "yyyy-MM-dd")
```

 The error is: invalid date value 2022-10-05T01:14:15.000Zの時はtoDateにフォーマットが指定されていなかったため。

https://developer.salesforce.com/docs/atlas.en-us.244.0.bi_dev_guide_saql.meta/bi_dev_guide_saql/bi_saql_functions_date2string.htm


# 未解決

+ [Only one SQL query works — Analytics Studio](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000Je62wSAB)
plunkerでvue その64

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

# 練習問題
vueファイルでブラックジャックを作れ。

# 参考にしたページ。

https://qiita.com/t2kojima/items/88a924fa3807909e0488

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/60e83a56-8f76-ffae-0e00-213aea1d0cd7.png)

# 方針

- Vue + RequireJS を使う。
- myData.jsを使う。
- vueファイルをcomponent化。
- 画像は、お借りする。
- componentは4つ
card,dealer,player,game


# 成果物

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


以上。
NestJS 導入

# はじめに
この記事では、Node.js のフレームワークである NestJS のプロジェクトファイル作成手順について記載していきます。

https://nestjs.com/

# 開発環境
開発環境は以下の通りです。
- Windows11
- VSCode
- Node.js 20.5.0
- NestJS 10.0.0
- TypeScript 5.1.3

# プロジェクトの作成
まず、以下のコマンドで Nest CLI をインストールします。

```
npm i -g @nestjs/cli
```

https://github.com/nestjs/nest-cli

次に以下のコマンドでプロジェクトを作成します。
```nest-crud-app``` はプロジェクト名です。また、```--strict``` を追加することで、TypeScript の strict 系のコンパイラオプションが有効になります。

```
nest new nest-crud-app --strict
```
パッケージマネージャーを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/2ca69ee1-9660-9bd0-0473-0aa34a359f2b.png)

プロジェクトが作成されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/d18f10b4-605f-b3c2-3d21-c5e6142bd8ac.png)

各ファイルの概要は以下の通りです。

| ファイル名 | 概要 |
|:-:|:-:|
| ```app.controller.ts``` | コントローラー（ルーティング） |
| ```app.controller.spec.ts``` | コントローラーのユニットテスト |
| ```app.module.ts``` | ルートモジュール |
| ```app.service.ts``` | サービス（ビジネスロジック） |
| ```main.ts``` | エントリーファイル |

エントリーファイルの中身は以下のようになっています。

```main.ts
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
}
bootstrap();
```

```NestFactory``` クラスの ```create``` メソッドを利用して、Nest のアプリケーションのインスタンスを作成しています。また、```listen``` メソッドを利用して、HTTP リスナーを起動させています。

# 動作確認
以下のコマンドでローカルサーバーを起動します。

```
npm run start:dev
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/ca5a462e-ec85-104a-d04e-1efa29d162ae.png)


# 参考
- [Forst Steps](https://docs.nestjs.com/first-steps)
2024年1月31日までにDatabricksのクラシックデータプレーンからコントロールプレーンへの追加のポートを許可してください

[Allow additional ports from your classic data plane to control plane by January 31, 2024](https://docs.databricks.com/en/release-notes/product/2023/august.html#allow-additional-ports-from-your-classic-data-plane-to-control-plane-by-january-31-2024)の翻訳です。

:::note warn
本書は抄訳であり内容の正確性を保証するものではありません。正確な内容に関しては原文を参照ください。
:::

お使いの[クラシックデータプレーン](https://docs.databricks.com/ja/getting-started/overview.html)(クラスターを実行するための計算資源が存在する場所です)のVPCで、Databricksの[コントロールプレーン](https://docs.databricks.com/ja/getting-started/overview.html)への通信におけるポートを制限するセキュリティグループやファイアウォールを設定している場合、コントロールプレーンに対する外向けの追加ポートを許可するようにお使いのクラシックデータプレーンを設定する必要があります。将来的には、これらのエンドポイントが必要となります。新規あるいは既存のワークスペースにおいては、2024年1月31日までにポート8443から8451をオープンする必要があります。

- ワークスペースでバックエンドのPrivateLinkを有効化している場合には、[PrivateLinkのドキュメント](https://docs.databricks.com/en/administration-guide/cloud-configurations/aws/privatelink.html#create-vpc)や[セキュリティグループに関するAWSの記事](https://docs.databricks.com/en/administration-guide/cloud-configurations/aws/privatelink.html#create-vpc)をご覧ください。
- それ以外の場合には、[顧客管理VPCのドキュメント](https://docs.databricks.com/en/administration-guide/cloud-configurations/aws/customer-managed-vpc.html#security-groups)や[セキュリティグループに関するAWSの記事](https://docs.aws.amazon.com/vpc/latest/userguide/security-groups.html)をご覧ください。

Databricksワークスペースの完全修飾ドメイン名(FQDN)に変更はありません。サーバレス計算資源で必要なネットワーク設定の変更はDatabricksが対応します。この変更に関する質問については`help@databricks.com`にお問い合わせください。

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

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


### Databricks無料トライアル

[Databricks無料トライアル](https://databricks.com/jp/try-databricks)
生成系AIを未経験エンジニアの新人研修に導入したら　効率が良すぎた話

## 未経験エンジニアの研修に生成系AIを導入した際の効率化とコスト削減について対話形式でまとめてみた

### 忙しい方向けに内容まとめ
#### 未経験エンジニアの研修におすすめの生成系AIはAzure OpenAI Service。
##### 生成系AIを未経験エンジニアの研修に導入するメリットは3つ　
1.生成系AIからヒントをもらうことで、どんなコードを書いて良いか分からない時間を短縮できる。
2.研修を担当している人の負担を削減し、わからないポイントを効率よく教えられる。
3.教える人材の人手不足を解消し、少ない人材でより効率的な研修を行える。

##### 生成系AIを未経験エンジニアの研修に導入するデメリットは２つ
1.研修生が問題を解く際に生成系AIが提示したコードの意味を理解しないで進んでしまう可能性がある。　　　　　　 
  この問題を補うために研修生にプログラミングの意味を解説させるなどの確認が必要になる。
2.生成系AIに入力したデータが流出する可能性はゼロではないので、個人情報や社内の重要な情報等は入力しないなどのルール決めをしておく必要がある。

##### Azure OpenAI Serviceのメリットは３つ
1.他の生成系AI と違って外部にデータが流出することが無い。
2.自社用にカスタマイズができる。
3.時間単位で質問数の制限が無く、入力した文字数に応じて課金される。金額で上限を設定可能。

##### Azure OpenAI Serviceのデメリットは２つ
1.Azure open AI cerviceを利用するには自社用にカスタマイズする手間が発生する。
2.社内のなかではログとしてデータが残るので個人に関わる内容は入力しないなどのルール決めが必要になる。



## ダー子さんとケンタッキの会話

### 登場人物
##### エンジニア教育担当者:ダー子さん
ケンタッキーが学生時代からお世話になっている方であり、A社で働いている。
##### 新卒エンジニア：ケンタッキー
2023年4月にエンジニア未経験でB社に入社し、新卒研修を受けている新卒ピチピチエンジニア。

###### ケンタッキーはダー子さんに呼び出され、新宿の居酒屋で話すことになった。

ダー子さん:最近エンジニア未経験の新入社員を教育する人手が足りないのよ！( ´ﾟдﾟ｀)

ケンタッキ:どの会社も人手不足の中で教育者を揃えるのは大変ですよね。

ダー子さん:そうなのよね。人手不足だから新人研修に入ってくれって誰かに頼んで離職に繋がっても困っちゃうのよね。I`ll be backサイボーグおじさんみたいな人材がいてくれれば何でも頼めるんだけど。疲れない、言われたことは最後まで諦めない理想的な人材だわ。

ケンタッキ:ダー子さん、最後まで諦めないのは映画で実証済みですけど、そんなの作ったら職場がダダンダッダダンな雰囲気で包まれてしまいます。

ダー子さん:ダダンダッダダンはさすがにまずいわね。

ケンタッキー:ダダンダッダダンがないサイボーグおじさんなら簡単に見つかりますよ。

ダー子さん:えー、どこで見つかるの！？パ〇アルト研究所とか？

ケンタッキ:ネットで検索したらすぐ見つかりますよ！今流行りの生成系AIってあるじゃないですか？あれはまさにダダンダッダダンがないサイボーグおじさんですね。

ダー子さん:最近生成系AI流行ってるものね。けど社内情報の流出とかコストの問題はないの？

ケンタッキ:会社の機密情報に当たるソースコードをChat GPTとかに入力するのは問題ですね。そういったリスクを回避しやすいのがMicrosoftが出しているAzure OpenAI Serviceです。こっちだと入力した情報がどこかへ流出するといったリスクを回避しやすくなります。

ダー子さん:それは最高ね！けどコストはどのくらいかかるのかしら？

ケンタッキ:Azure OpenAI Serviceではトークン毎の課金制です。Chat GPT3.5であれば現在（2023年8月16日時点）は無料で使えます。chatGPTの無料サービスだと１時間あたりに質問できる回数が３回なので質問を厳選しなければいけません。僕が実際に練習問題を解く際の文字数の例を出すと１回の質問において解いている問題の文字数400文字、Null Point Exeptionなどの長いエラーを同時に入力してエラー込みで合計13000字くらいになります。なのでAzure OpenAI Serviceだと１回の質問が1番安いプランで2.6円　1番高いプランでは208円です。１時間で15回質問するとして1番安いプランだと１時間39円　1番高いプランだと3120円です。新入社員の研修に使うなら1番安いプランで十分使えます。

ダー子さん:１時間39円は超魅力的ね。コスト的には予算確保できそうだけど、どうやって使っていくのが良いのかしら？

ケンタッキ:僕がおすすめする使い方はプログラミングの練習問題を解く際に全く解き方がわからず、どう調べたら良いのかお手上げの状態の時に生成系AIに問題を解かせる方法です。生成系AIが出した回答を問題に打ち込み実際にテストが通るのか確認します。テストに通る場合には解法を自分で調べてみて方法を１つ１つ学びます。これによって手が止まって全く進まない事態は回避でき、勉強効率は上がるのでお勧めです。

ダー子さん:それだと全部AIに問題を解いてもらったまま理解しない人が増えそうね。

ケンタッキ:はい、そのリスクはあります。なので研修を受けている人は自分が解いた問題の説明をトレーナーなどに説明する事をタスクにすれば理解しないまま進んでしまうリスクは回避できると思います。

ダー子さん:確かにその方法ならリスクは回避できそうね。

ケンタッキ:回答を見ても理解できない部分を集中的にトレーナーやコーチに聞いていけば成長速度を速めることができます。

ダー子さん:それならメリットが十分ありそうだから会社で調べて検討してみるわ。

ケンタッキ:また何かあれば聞いてください。

ダー子さん:ええ、また何かあれば聞かせてもらうわ。支払いは割り勘で良いかしら？

ケンタッキ:もちろん大丈夫です！(わ、割り勘だと！？)

ダー子さん:冗談よ、払っておくから先にお店の外で待ってて。

ケンタッキ:ご馳走です！

こうして今日も夜が更けていくのであった(￣▽￣)
条件ごとにヒストグラムを出力

0の値だけ出力

```
import pandas as pd
import matplotlib.pyplot as plt

# CSVファイルを読み込む
csv_file_path = 'hairetu.csv'  # 自分のファイルパスに置き換えてください
data = pd.read_csv(csv_file_path)

# 3列目が0の行を抽出
zero_values_rows = data[data.iloc[:, 2] == 0]

# 抽出した行の6列目の値を取得
zero_values_for_histogram = zero_values_rows.iloc[:, 5]

# ヒストグラムをプロット
plt.hist(zero_values_for_histogram, bins=10, edgecolor='black')  # ビン数やエッジカラーは適宜調整可能
plt.xlabel('Value')
plt.ylabel('Frequency')
plt.title('Histogram of 6th Column for Rows with 3rd Column = 0')
plt.show()
```

1の値を出力

```
# 3列目が8の行を抽出
one_values_rows = data[data.iloc[:, 2] == 1]

# 抽出した行の6列目の値を取得
one_values_for_histogram = one_values_rows.iloc[:, 5]

# ヒストグラムをプロット
plt.hist(one_values_for_histogram, bins=10, edgecolor='black')  # ビン数やエッジカラーは適宜調整可能
plt.xlabel('Value')
plt.ylabel('Frequency')
plt.title('Histogram of 6th Column for Rows with 3rd Column = 0')
plt.show()
```

二つの値を取得して重ねる
```
import numpy as np
import matplotlib.pyplot as plt

# ヒストグラムをプロット
plt.hist(zero_values_for_histogram, bins=10, alpha=0.5, label='Column 3 = 0', edgecolor='black')
plt.hist(one_values_for_histogram, bins=10, alpha=0.5, label='Column 3 = 1', edgecolor='black')

# ラベルやタイトルの設定
plt.xlabel('Value')
plt.ylabel('Frequency')
plt.title('Histogram of Values from Selected Rows')
plt.legend(loc='upper right')

# プロットを表示
plt.show()

# プロットを保存
plt.savefig('histogram.png')
```
Javaで「オブジェクト指向とは」の動作を確認してみた

# 概要
Javaで「オブジェクト指向とは」の動作を確認してみました。以下のページを参考にしました。

https://www.javadrive.jp/start/about/index5.html

# 実装
以下のファイルを作成しました。
```JSample5_2.java
class JSample5_2{
  public static void main(String[] args){
    Randamer r = new Randamer(10);

    for (int i = 0; i < 5; i++){    
      System.out.println(r.getNum());
    }
  }
}

class Randamer{
  private int maxnum;
  private int lastNum;

  public Randamer(int maxnum){
    this.maxnum = maxnum;
    lastNum = 0;
  }

  public int getNum(){
      int newNum;
      do{
        newNum = (int)Math.ceil(Math.random() * 10);
      } while (newNum == lastNum);
      lastNum = newNum;
      return lastNum;
  }
}
```
以下のコマンドを実行しました。
```
$ javac JSample5_2.java 
$ java JSample5_2 
1
7
5
9
4
```

# まとめ
何かの役に立てばと。
[Ruby JavaScript] ハッシュ、オブジェクト比較

# 目的
現在携わっているRails + Vue.jsのプロジェクトで、Ruby、JavaScriptそれぞれのキーと値を組み合わせてデータを管理する方法の呼び方、表記の仕方が混乱したので比較する。
# Ruby　ハッシュ
```
currencies = {'japan' => 'yen', 'us' => 'dollar', 'india' => 'rupee'}

# キーと値
# 値を取り出す
currencies['japan']
```

シンボルを使った場合
```
# キーのみシンボル
currencies = { japan: 'yen', us: 'dollar', india: 'rupee'}
currencies = { :japan => 'yen', :us => 'dollar', :india => 'rupee'}

# キーも値もシンボル
currencies = {japan: :yen, us: :dollar, india: :rupee}
currencies = { :japan => :yen, :us => :dollar, :india => :rupee}

# 値を取り出す
currencies[:japan]
```

# JavaScript　オブジェクト
```
var weather = { sunny: '晴れ', rain: '雨', cloudy: '曇り'}

// 値を取り出す
weather.sunny
weather['sunny']
```
PowerAutomateForDesktopの技術検証①

# 概要
・PowerAutomateForDesktopでWebシステムの動作の自動化にあたり、他のRPAツールとの差異などを検証していく。

# 検証用フロー
　単純な検証を行うため、下記のように単純化してみた。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3533364/096d3a18-3402-0ec6-c496-50bce28985dd.png)

　こちらは、ヤフーのトップページをクロームで開いて「スポーツナビ」のボタンをクリックして、最後閉じるという動作をフローで示したものだ。

　この二つ目の「Webページへのリンクをクリック」の設定は以下のようになっており、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3533364/fc5f5ed3-993a-bd97-918c-1f502c951047.png)

　UiPathで言うところの「ハードウェアイベント」の扱いになっているみたいだ。

# 検証内容

　以下の内容で検証を実施してみた。

⓵ウィンドウが「標準」、動作の途中は何も操作はしない。
⓶ウィンドウが「最大化」、動作の途中は何も操作はしない。
⓷ウィンドウが「最大化」の時に動作の途中でマウスを動かす。

# 検証結果

⓵ウィンドウが「標準」、動作の途中は何も操作はしない。
試行３回、成功０回、失敗３回
⓶ウィンドウが「最大化」、動作の途中は何も操作はしない。
試行３回、成功３回、失敗０回
⓷ウィンドウが「最大化」の時に動作の途中でマウスを動かす。
試行３回、成功１回、失敗２回

　やはり、先ほどの「ハードウェアイベント」ではないかという推測はきちんと証明されたようである。UiPathの「シミュレート」「ウィンドウメッセージ」に比べて動作は不安定化しそう。
　ただし、「xml」のアクティビティはあるのでそれをうまいこと使いこなせば動作不安定化はある程度解消するかもしれない。
　ただ現状、「Web操作の自動化」の観点ではUiPathに比べてきのうはおとっているのかなとはおもう。
２グラフ

```
func setupData() {
        let dataSet1 = LineChartDataSet(entries: dataEntriesSet1, label: "Data Set 1")
        let dataSet2 = LineChartDataSet(entries: dataEntriesSet2, label: "Data Set 2")
        
        // dataSet1やdataSet2の設定を行う
        
        let data = LineChartData(dataSets: [dataSet1, dataSet2])
        lineChartView.data = data
    }
```
このコードでは、dataEntriesSet1とdataEntriesSet2に対してそれぞれ異なるJSONデータを解析し、異なるデータセットとして作成しています。その後、これらのデータセットを同じLineChartDataオブジェクトに追加して、1つのグラフ内に2つの線グラフを表示しています。各データセットの設定は適宜行ってください。
プログラミング初心者の医学生が残り少ない夏休みでGithubcopilotとchatGPTの力を借りてアプリ開発してみた Day9

# これまでの経過
* [Day1(2023/08/20)](https://qiita.com/Shigemaxxx/items/606e7e58fe83f98bb780)
* [Day2(2023/08/21)](https://qiita.com/Shigemaxxx/items/ab1f0aecc291bb77534d)
* [Day3(2023/08/22)](https://qiita.com/Shigemaxxx/items/39ab4b0876cb6849fcf3)
* [Day4(2023/08/23)](https://qiita.com/Shigemaxxx/items/2657a3efc2ca29c0389a)
* [Day5(2023/08/24)](https://qiita.com/Shigemaxxx/items/f3ee98a1fb5868131820)
* [Day6(2023/08/25)](https://qiita.com/Shigemaxxx/items/6373c01527989fabde61)
* [Day7(2023/08/26)](https://qiita.com/Shigemaxxx/items/b76801eefe64b89a08ac)
* [Day8(2023/08/28)](https://qiita.com/Shigemaxxx/items/1da5fde3d49fccff7c1e)



# Day9(2023/08/29)

これまで，ChatGPTやらUdemy の講座やら色々やってきましたが，一番初心者に優しいFlutter勉強ツールを発見しました．それは，[初めての Flutter アプリ](https://codelabs.developers.google.com/codelabs/flutter-codelab-first?hl=ja#0)です．
「受験勉強は最後に教科書に帰る」という名言は私が今作りましたが，「プログラミングは最後に公式サイトに帰る」ということはあながち間違ってはいない気がします．
VScodeの利用方法も説明されていて，最初から公式サイトで勉強していればと感じました．

今日は自分のコードは何もかけていません...勉強が手いっぱいでアプリ開発する時間がない...ごめんなさい．

アプリ公開に必要な App StoreとGoogle Playの開発者アカウントもそろそろ作ろうかと思います．

GithubとfirebaseのUdemyの講座もセールのうちに購入予定です．今日はここまで
四半期の列をSQLプッシュバックが効くように作成する(SPSS Modeler データ加工逆引き4-24)

# 四半期の列をSQLプッシュバックが効くように作成する（SQLプッシュバック）

![スクリーンショット 2023-08-21 9.56.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/bc8e70af-8380-83ea-7545-8cf425e9330a.png)

## 1.想定される利用目的

・データベースに接続している状況でできるだけ処理をデータベース内で完了する
・四半期列のような新規フィールド作成の処理速度を向上させる

## 2.サンプルストリームのダウンロード

https://github.com/yoichiro0903n/blue/raw/main/fiscal%20quarter_SQL.str

## 3.サンプルストリームの説明

![スクリーンショット 2023-08-21 9.59.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/bb3a635b-3ba7-3c93-fc76-4625066cd420.png)

#### SQL自動発行（プッシュバック）が部分的にしか効かないストリームを確認する

a.入力するデータは以下の通りです。
![スクリーンショット 2023-08-21 10.34.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/fdc247e0-1304-9684-eb2d-f96cc53747d5.png)

b.[フィールド作成]ノードを編集します。
![スクリーンショット 2023-08-21 10.35.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/5ecfa14e-fcb5-82bd-b30a-3ff744d35dad.png)

式ビルダーの日付関数を利用すると便利です。
![スクリーンショット 2023-08-21 10.37.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/50eb8688-e955-7cbb-a03d-6f942f4210cc.png)

c.[フィールド作成]ノードを編集します。
![スクリーンショット 2023-08-21 10.38.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/18826113-10a3-1305-c56a-6799257aed94.png)

[テーブル]を実行します。結果は問題ないのですが、C以降がプッシュバックされず（紫に発光しない）処理速度が期待できません。
![スクリーンショット 2023-08-21 10.05.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/34fb25b0-8b36-9e2c-45f2-556d92775a4e.png)

#### SQLプッシュバックをより広域で効かせるためにマスターテーブルDB内に作成する

d.[レコード集計]ノードを編集します。
![スクリーンショット 2023-08-21 10.06.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/92da8666-a0fa-9114-58e2-2246ee540f70.png)

e.[ソート]ノードで日付を昇順ソートします。

f.[データベースエクスポート]ノードを編集して実行します。
![スクリーンショット 2023-08-21 10.06.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/0c5902dc-d0b2-1d40-e223-0f19729a4fa8.png)

g.データベース入力ノードが生成されました。[プレビュー]します。
![スクリーンショット 2023-08-21 10.07.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/f43e3950-cec6-0ba3-8606-968310cfe529.png)

#### 作成したマスターテーブルとaを結合してSQLプッシュバックが有効なストリームを作成する

![スクリーンショット 2023-08-21 10.08.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/091f345a-e3ae-0d7e-aab0-f479934ac38c.png)


#### 注意事項

中間テーブルをDB内に作成するにはテーブルをクリエイトする権限が必要です。

## 4.参考情報

#### SQLプッシュバックとは

https://www.ibm.com/blogs/solutions/jp-ja/learn-modeler-02/

https://qiita.com/416nishimaki/items/48bf0176afae916de117

#### よく使う「日付と時間」関数

https://qiita.com/Makimaki2020/items/72e3b774039327fa4ac4

https://qiita.com/kawada2017/items/c41f443e5246d331bea1

#### SPSS Modeler ノードリファレンス目次

https://qiita.com/416nishimaki/private/503037195081d3323eee

#### SPSS Modeler 逆引きストリーム集（データ加工）

https://qiita.com/416nishimaki/private/4bf813e6cba84b2a1008
rails6でWebpacker::Manifest::MissingEntryErrorが発生した時の対処法

railsの環境構築時に詰まった箇所がありメモとして残します。
railsのバージョンを6系で固定して環境構築しようとしていました。
その時に`Webpacker::Manifest::MissingEntryError`というエラーが発生し何度か見たことがあるエラーだったため忘れないように記事に残します。

## 環境
`ruby 2.7.6`
`rails 6.1.6`

## エラー内容
railsプロジェクトを作成するときはこのコマンドです。

```terminal
rails _6.1.6_ new myapp
```

これでrailsのバージョンを指定してプロジェクトを作成できます。
この後ルートへのルーティングを整備してアクセスすると以下のようなエラーが発生しました。

```
Webpacker::Manifest::MissingEntryError in Home#index
```

## 対処方法
調べたところ`rails webpacker:install`, `rails webpacker:compile`を実行することで治ると書いてありました。
しかし、僕の環境では治りません。

いろいろ調べて試した結果nodeのバージョンと`webpacker`のバージョンが問題であるようです。

nodeのバージョンを下げてwebpackerのバージョンも下げると治ります。

### nodeのバージョンを下げる
僕はnodenvを使ってバージョンを管理しています。
nodeを18系から16系へ下げました。

```terminal
nodenv local 16.13.1
```
### `webpacker`のバージョンを下げる
webpackerはrails6のパッケージ管理ツールです。
rails6ではこのGemがデフォルトでフロントエンドのパッケージを管理してくれます。

Gemfileの記述を5から４に更新します。

```ruby:Gemfile
gem 'webpacker', '~> 4.0'
```

この状態で`bundle`し直せばエラーを解消できます。
【SwiftUI】タップで操作できる星の評価ビュー

# この記事は何？
レストランや映画などの評価を「5段階の星」で表示する`StarRating`ビューを構築する。
なお、タップで星の数を変更できるようにする。

![スクリーンショット 2023-08-29 23.56.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70476/94ba7207-1ce5-365c-dcd7-a41c9db1af3a.png)

なお、`@State`とバインディングについては、その基本を[こちらの投稿](https://qiita.com/imchino/items/422140d55f9168a5933d)で解説済み。

> Swiftを基礎から学ぶには
自著、工学社より発売中の「[まるごと分かるSwiftプログラミング](https://amzn.asia/d/7YPWJwl)」をお勧めします。変数、関数、フロー制御構文、データ構造はもちろん、構造体からクロージャ、エクステンション、プロトコル、クロージャまでを基礎からわかりやすく解説しています。

# コードの解説

評価の星はSFシンボルで表現する。

```swift:StarRating.swift
import SwiftUI

struct StarRating: View {
    var body: some View {
        Image(systemName: "star")
            .symbolVariant(.fill)    // シンボルを塗りつぶす
            .foregroundColor(.yellow)
    }
}
```

`onTapGesture()`モディファイアで、星がタップに反応することを確認する。

```swift:
struct StarRating: View {
    var body: some View {
        Image(systemName: "star")
            .symbolVariant(.fill)
            .foregroundColor(.yellow)
            .onTapGesture {
                print("tapped.")
            }
    }
}
```

以下のコードでは、`HStack`と`ForEach`を使って、水平方向に「塗り潰した星」を5個並べている。
星をタップすると、何番目の星をタップしたかを確認できる。

```swift:
struct StarRating: View {
    var body: some View {
        HStack {
            ForEach(1...5, id: \.self) { value in
                Image(systemName: "star")
                    .symbolVariant(.fill)
                    .foregroundColor(.yellow)
                    .onTapGesture {
                        print("tapped: \(value)")
                    }
            }
        }
    }
}
```

タップした星の位置に基づいて、画面の評価が更新されるようにステート変数を導入する。

```swift:StarRating.swift
struct StarRating: View {
    @State var rating = 0    // 現在の評価
    
    var body: some View {
        HStack {
            ForEach(1...5, id: \.self) { value in
                Image(systemName: "star")
                    .symbolVariant(value <= rating ? .fill : .none) // 評価の分だけ星を塗りつぶす
                    .foregroundColor(.yellow)
                    .onTapGesture {
                        rating = value  // 「現在の評価」をタップした番号で更新する
                    }
            }
        }
    }
}
```

親ビューに組み込んで、バインディングを受け取れるようにする。

```swift:ContentView.swift
import SwiftUI

struct ContentView: View {
    @State private var rating = 0    // 評価値のステート変数
    
    var body: some View {
        VStack(alignment: .leading) {
            Text("Chocorate Banana Parfait")
                .font(.title)
            StarRating(rating: $rating)    // バインドを渡す
                .font(.title3)
        }
    }
}

struct StarRating: View {
    @Binding var rating: Int    // バインドを受け取る

    var body: some View {
        HStack {
            ForEach(1...5, id: \.self) { value in
                Image(systemName: "star")
                    .symbolVariant(value <= rating ? .fill : .none)
                    .foregroundColor(.yellow)
                    .onTapGesture {
                        if value != rating {
                            rating = value 
                        } else {
                            rating = 0
                        }
                    }
            }
        }
    }
}
```

上のコードでは、「現在の評価」と同じ番号の星をタップすると、評価がリセットされる。
MUIのTextFieldでfocusされた際に線が二重になってしまう

# 現象
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2370524/2d406bc2-bf20-91bb-9bef-5310f9e5caa5.png)

![スクリーンショット 2023-08-30 1.42.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2370524/f5d54f2b-40d0-6447-d99c-fc6ecb2f5a37.png)

MUIのTextFieldをフォーカスした際、二重にボーダーが表示されてしまい不格好になってしまう。

# 環境
- Laravel10 + Inertia + Vite + React + TypeScript
- Tailwind
- Material-UI

# 原因
この枠線自体何物なのか分からず、だいぶ調べた。
記事を見ると```outline:none```を指定してあげると良いみたいな記事が多く、適用してもうまく行かない。
### ×失敗例
```css:app.scss
input:focus,textarea:focus{
    outline: none;
}
```
開発者ツールでよく調べていると、他のスタイルに```outline: 0;```が存在するのでこれではなさそうだった...

### ○成功例
```css:app.scss
input:focus,textarea:focus{
    box-shadow: none !important;
}
```

この枠線の正体はbox-shadowだった。
筆者の環境ではTailwindの優先順位が高く上書きされてしまっていたので、box-shadow自体無くても困りそうにないので!importantをつけた。


![スクリーンショット 2023-08-30 1.51.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2370524/3d2313c3-5522-9036-2b7b-66e44b182f98.png)

![スクリーンショット 2023-08-30 1.51.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2370524/3c6d5ddb-dd0e-962a-cc0b-64e99e8fe65a.png)
Excelの条件付き書式で使いそうな数式

##  指定したセルの値がすべて大文字の場合、TRUE

```
=EXACT(セル,UPPER(セル))
```


## 指定したセルの値がすべて小文字の場合、TRUE

```
=EXACT(セル,LOWER(セル))
```

##  指定したセルに大文字が含まれている場合、TRUE

```
=NOT(EXACT(セル,LOWER(セル)))
```

## 指定したセルに子文字が含まれている場合、TRUE

```
=NOT(EXACT(セル,UPPER(セル)))
```
AtCoder Beginner Contest 317(A,Bだけ)

# はじめに
C 以降はお勉強をしてから取り組みます。

# コンテスト出題内容
https://atcoder.jp/contests/abc317

# A
必要量 `X - H` を diff と置いて、 diff よりも大きい数値の中で一番小さな値を探す。

-> diff を P の値のリストに突っ込んでその位置を特定する。その index + 1 が答え。

```java
import java.util.*;

public class Main {
    public static void main(String[] args) {
        Scanner scanner = new Scanner(System.in);
        List<String> list = new ArrayList<>();
        while (scanner.hasNextLine()) {
            String s = scanner.nextLine();
            if (s.length() == 0) break;
            list.add(s);
        }
        scanner.close();
        List<String> numbers = Arrays.asList(list.get(0).split(" "));
        int H = Integer.valueOf(numbers.get(1));
        int X = Integer.valueOf(numbers.get(2));
        List<Integer> Ps = new ArrayList<>();
        for (String s : list.get(1).split(" ")) {
            Ps.add(Integer.valueOf(s));
        }

        int diff = X - H;
        Ps.add(diff);
        Collections.sort(Ps);
        System.out.println(Ps.indexOf(diff) + 1);
    }
}

```

# B
ある連続する整数の配列の中で一つだけ欠けている数値を特定する。

-> 初項と末項が判明しているので、ステップ1の等差数列の和を算出し、そこから与えられた配列の総和を引いて出た値が答え。

```java
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
import java.util.Scanner;

public class Main {
    public static void main(String[] args) {
        Scanner scanner = new Scanner(System.in);
        List<String> list = new ArrayList<>();
        while (scanner.hasNextLine()) {
            String s = scanner.nextLine();
            if (s.length() == 0) break;
            list.add(s);
        }
        scanner.close();
        double N = Double.valueOf(list.get(0));
        List<Integer> As = new ArrayList<>();
        for (String s : list.get(1).split(" ")) {
            As.add(Integer.valueOf(s));
        }
        Collections.sort(As);
        int total =(int) (((N+1)/2) * (As.get(0) + As.get(As.size()-1)));
        int pseudoTotal = As.stream().mapToInt(Integer::intValue).sum();
        System.out.println(total - pseudoTotal);
    }
}

```
【PMTiles派？FlatGeobuf派？】Maplibre GL JSでの1億オーバーのポリゴンの扱いについて

【今ここ何番地？】
https://office-shirado.com/imakoko/
※無料版あり、「地図をみる」をクリックするだけ！

上記サイトでは、法務省地図と地理院タイルを重ねて表示できるようになっていますが、法務省地図の公共座標（緯度経度に変換できるもの）のポリゴン数は１億を越えます。

フォルダ形式のpbfも試しましたが、個人レベルでは作成・サーバーＵＰ・管理も大変です。

そんななか、amxプロジェクトで【PMTiles】・【FlatGeobuf】というものがあることを知りました。
どちらも、HTTP範囲リクエストでサーバーから必要なデータを取ってくることができ、特別なサーバーを実装せずに運用することが可能で、１フィアル管理ができることから、「クラウド最適化のデータ」なのかと思っております。

特徴及び私の感想を言いますと、以下の通りになります。
＜PMTiles：約２０Ｇ＞
　・日本全国の公共座標ポリゴン（１億オーバー）を取り扱い可能
　・タイルデータなので、表示が早い。動きが軽い。
　・画面表示範囲の設定は不要
　・画像タイルも作成可能
　・データに劣化あり（間引き等含む）
　・ズームレベルごとにGeoJSONから作成しなければならない。
　　※私はズームレベル１２のみ、１４~１６、１８のみの「３段ズーム方式」を採用しております。

＜FlatGeobuf：約６５Ｇ＞
　・日本全国の公共座標ポリゴン（１億オーバー）を取り扱い可能
　・データ作成が高速（GeoJSON→FlatGeobuf）
　・GeoJSONをまとめたものなので、表示が遅い。
　・画面表示設定を誤ると広範囲のデータをダウンロードし始めるので、画面表示範囲の設定が重要
　・データ劣化なし（正確です）

というところで、お互いに良いところがありますが、どちらもパーフェクトではないというのが2023年8月の状況かと思います。

驚いたのは、法務省地図の生データは「地図ＸＭＬ」で「平面直角座標のＸＹ座標」なのですが、FlatGeobuf（緯度・経度）に変換したものから、画面表示範囲をダウンロードする機能で「平面直角座標系」に戻した場合の変換誤差が0mmだったこと。
※Proj4を使用


そんな感じで、PMTiles・FlatGeobufの両方を触りましたが、２つのファイルの良いとこ取りで並列で運用していこうかと思っています。

PMTiles：表示用（ベクトル・ラスタ）
FlatGeobuf：ダウンロード用（ベクトル）

上記特性の良いとこどりのデータフォーマットがこれから出てくるかもしれませんね。
楽しみにしております。

また、MapLibre GL JSもかなり使えるWebGISかと思っておりますので、これからが楽しみです！！


【今ここ何番地？】
https://office-shirado.com/imakoko/

【今ここ何番地？ YouTubeチャンネル】
https://www.youtube.com/@imakoko2023
VSCodeからGitHub連携（Win11）

Windows11 で VSCode から GitHub 連携やるときのメモ
実施環境と大まかな流れは以下でやってみる

- 環境
  - Windows11
  - x64（64bit）
- 大まかな流れ
  - VSCode インストール
  - GitHub アカウント作成
  - Git インストール
  - GitHub連携
    - GitHubよりリポジトリクローン
    - ローカルで作ったプロジェクトを公開

# VSCode インストール

1. 公式サイトからインストーラ取得
  https://code.visualstudio.com/download
  2023/8/29だと v1.81.1
1. インストーラを管理者で実行
  画面に従い進める、許可などは確認してOK/同意、インストール場所とか選んでインストール
  こだわりなければデフォルトで進んでOK
  インストール終わるとVSCode起動で完了
1. VSCode 日本語化
    - Ctrl + shift + p (コマンドパレット表示) 
    - テキストに `Display` 入力
    - [Configure Display Language] クリック
    - 日本語(ja) クリック
    - インストールして再起動（画面の指示に従う感じ） 

# GitHubアカウント作成
ちょっと古いけどこちら参考に。。。

https://qiita.com/sueasen/items/d00156f2617305b01511

# Git インストール

1. 公式サイトからインストーラ取得
  https://gitforwindows.org/
  2023/8/29だと v2.42.0
1. インストーラを管理者で実行
  画面に従い進める、許可などは確認してOK/同意、インストール場所とか選んでインストール
  こだわりなければデフォルトで進んでOK
  インストール終わるとライセンス html 表示で完了
1. git のアカウント設定
    コマンドプロンプト or Powrshell で以下を入力
    - github に登録したメールアドレス設定
    ```Powershell
    git config --global user.email "you@example.com"
    ```
    - github に登録したアカウントID設定
    ```Powershell
    git config --global user.name "Your Name"
    ```
    - git のアカウント設定を確認
    ```Powershell
    git config -l --global
    ```
    
:::note info
VSCode を起動中の場合、再起動する
:::
    

# GitHub連携

## GitHubよりリポジトリクローン

1. VSCode よりクローンするリポジトリ選択
    - [ソース管理] - [リポジトリのクローン] - [GitHubから複製]
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/b73a08a1-b338-3757-31f2-2961fd3f96e4.png)
    - クローンするリポジトリをクリック - クローン作製するフォルダを選択
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/e311d2cc-b3c1-3268-9f66-1e18806bf601.png)

1. 画面に従いクローンしたリポジトリ開いて完了


## ローカルで作ったプロジェクトを公開

1. VSCode でローカルで作ったプロジェクト開く
  [ファイル] - [フォルダーを開く] - ダイアログで公開したいプロジェクト選択して開く
1. ソース管理 から GitHubに公開 する
  [ソース管理] - [GitHubに公開] - GitHubサインインのダイアログ[許可] をクリック
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/328da28d-aa7b-5fd2-fdf2-5c92935ba2fd.png)
1. GitHub のサイトあがってくるので認証を通す
   ユーザ、パスワードを入力して2段階認証のコード入力...各自の設定で変わりそう...
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/d16292ec-7333-a613-baef-16f38bc9a0eb.png)
1. VSCode 再起動を促されるので起動したらGitHub の URI 開くことを許可する
   ※ 再起動を促されない時はVSCodeを再起動する
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/e0d77685-1108-d8c8-4615-2b7f6d0ab7fb.png)
1. `private` or `public` を選択する
    テキストの値がリポジトリ名になる、初期値がプロジェクト名で変更OK！
    ※ Github 初回の時は認証求めるポップアップが出てくるので認証を通す
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/f341ae05-f6ad-5652-334f-5e7efea04ad4.png)
1. Github にリポジトリ作成できると Github上で開く の確認がくる
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/e11cfdf5-d6ea-1c23-e97a-a77a73a1e62c.png)
1. Github の Webサイトでリポジトリが確認できればOK
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/2dcf6d88-26ef-d186-cd16-a33bb407783c.png)
AWS Certified Solutions Architect -Associateを受験料だけで合格する勉強法

半年前にクラウドプラクティショナーを取得し、その後もっと上位の資格を取りたくなり調べた結果、「Solutions Architect -Associate」なら受験料以外お金をかけずにできそうだったから勉強してみることにした。
合格最低点超ギリギリとはいえ、見事合格を果たしたのでその時の勉強方法をまとめてみた。

前回クラウドプラクティショナーを受験した時の記事は[こちら](https://qiita.com/Ri210_Maezaki/items/5be64c116edd98910fb6)

## はじめに
私のAWSとの関りについてざっくりこんな感じ

- AWSでの作業歴：業務でだいたい2年半ぐらい
- AWSでの作業内容：アプリケーション運用保守で触る程度（構築とかはあんまりしてない）
- 業務以外でAWSを使ってない
- むしろ時々プライベートでGCPを触ってる

## １．受験した背景
「Solutions Architect -Associate」を受験した背景はざっくり以下の通り。
- クラウドプラクティショナー合格後、もっと上位の資格を手に入れたかったから
- koboで無料で参考書が手に入れられたから
- WEBで無料の問題集があったから
- クラウドプラクティショナー合格後、受験料半額クーポンがあったから
- 合格後、有効期間内は資格手当が貰えるから

自分のスキルマップや将来のビジョンとかかっこいい言葉を並べていないことからも分かる通り、 **「ただ他のAWSの資格を最低限の労力とコストで取りたかった」** だけである。逆に言えば、無料で参考書と問題集が手に入れられるってすごい。

## ２．使ったもの
資格勉強で使ったのは以下の２つ。どちらも「クラウドプラクティショナー」の時と同様、全部無料で利用した。

1. AWS認定資格 ソリューションアーキテクトアソシエイトの教科書　合格へ導く虎の巻
  https://books.rakuten.co.jp/rk/a5476fb92a8d362da46b092ae7cc999b/
2. 無料WEB問題集＆徹底解説 | ソリューションアーキテクト(SAA)
  https://aws-exam.net/saa/
※但し、２は問題として成立していない問題も混じっているので注意！！！

まず１のテキストを電子書籍で購入して、ざっくり2周読む。
その後はただひたすらに２の問題集を解き続ける。
全問２週解いた上でランダムで何回も解いてた気がする。
そして２に飽きたら１にもサンプル問題があるのでそれを解く。

ただしクラウドプラクティショナーとは異なり、
自分が業務で使用していないAWSの機能の部分で間違えたところは１を読み返す。
私の場合はECSや機械学習系は業務でも使ったことないので、何回か重点的に読み返した。
他にもネットワーク周りは自分でもわけわからんので何度か読んでた。

## ３．試験日当日
試験日当日も特に何も構えることはなく、テストセンターに足を運びテストに挑んだ。
但し、前回のクラウドプラクティショナーと異なり、実運用的な問題が多いこともあり **「問題集に出てきた！！」** と某進研ゼミみたいなことほぼなく、ただただ問題に向き合って消化していた。

仕事で使ったAWSの知識や参考書で得た知識で確実に解けるところは抑えていき、分からないところはひたすら選択肢を見て頭の中で設計をしながら「ダメなやつ」と「いけるやつ」を直感で判断して何とか解いていった。

## ４．試験日翌日
今回は試験後に結果発表がされるタイプではなくメールで翌日に結果が届いた。
正直私は受かった気がしてなかったので再テストの日程を考え始めていたわけだが、メールを見たら合格点ギリギリとはいえ合格をしていたのでうれしかった反面、頭の中で疑問が残る合格だった。 ~~もし得点開示請求ができるならぜひともどうしてそうなったのか今でも知りたい~~
ただ頭ごなしに問題集の回答を丸暗記して **「問題集の答えがこうだったから回答はこれだ！！」** と決めつけることもなくやれたのはもしかしたら大きかったのかもしれない。

## ５．今後
今後はとりあえず他のAssociate系の資格取得のために勉強予定。
ただしkoboには無料で他のAWSの資格の参考書がなかったので、以降はちゃんとお金かけて参考書を買う予定。
一応開発もやっているので「AWS Certified Developer - Associate」でもやろうかな。
後AWS公式でもトレーニング資料が無料／有料問わず色々とあるみたいだし触ってみる。
uuidをたくさん生成するコマンドをhomebrewで配布した

# uuidをたくさん生成したかった
何かとたくさん必要になるuuidを生成するスクリプト。
```shell
#!/bin/bash

function gen_uuids() {
    for i in $(seq 1 $1) ; do
        uuidgen | tr "[:upper:]" "[:lower:]"
    done
    return 0
}

if [[ "$1" =~ ^[0-9]+$ ]]; then
    gen_uuids $1
elif [ "$1" = "" ]; then
    gen_uuids 1
else
    echo 'Please input number!!!'
fi
```

# homebrewで配布
homebrewで公開する方法はよくあるので、詰まった部分のメモ。
GitHubでリポジトリ作成(homebrew-〇〇という名前で作成)、リリース/タグ作成まで完了させる。

## brew create
GitHubのリリースで作成したtar.gzファイルを指定して
`brew create https://github.com/bebeken/homebrew-genuuids/archive/v1.0.tar.gz`
を実行すると、エディタが起動して、Formulaファイルが作成される。

↑の場合は、`homebrew-genuuids.rb`が作成された。
パスは、`/usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/Formula/`でした。

公式に取り込まれたい場合は、ここでブランチを切ってPRする？みたい。

そうでない場合は、ここで作成された`homebrew-genuuids.rb`を自分のリポジトリにcommitしてpushする。

## brew tap / brew install
GitHubのリポジトリをhomebrewに追加する
`brew tap bebeken/genuuids`

installする
`brew install genuuids`

## ここのタイミングでいろいろ詰まった
### installの指定が思った通りにならない
`brew create`で作成されたFormulaファイル`homebrew-genuuids.rb`を、そのまま使ってしまうと`brew install bebeken/genuuids/homebrew-genuuids`と指定しないとinstallできなかった。
`brew install genuuids`とシンプルなinstallにしたい場合は、ファイル名を`genuuids.rb`にする。

また、Formulaファイルのclass名も`HomebrewGenuuids`から`Genuuids`にした方が良さそう。
```rb:homebrew-genuuids.rbではなくて
class HomebrewGenuuids < Formula
  desc ""
  homepage ""
  # ~~省略~~
```
```rb:genuuids.rbにした方が良さそう
class Genuuids < Formula
  desc ""
  homepage ""
  # ~~省略~~
```

### エラーメッセージ`Empty installation`
作成されたFormulaファイルを適当にいじっていたら、`brew install`時にエラーが発生した。
原因は、installの項目を消してしまっていたことにあった。

↓ソースコードを読むと何かしらは書かないといけないみたいでした
https://naoty.hatenablog.com/entry/2017/02/20/223011

```rb:genuuids.rb
class Genuuids < Formula
  # ~~省略~~

  def install
    bin.install "genuuids"
  end
```

## genuuids
https://github.com/bebeken/homebrew-genuuids
### install
```
$ brew tap bebeken/genuuids
$ brew install genuuids
```

### how to use
```
$ genuuids 10
```
HTML入門 ~html要素~

# html要素
html要素はHTML文書で最も上位の要素。
他の要素はすべて、この要素の子孫になる。

## content model
head要素
body要素

## 属性
lang属性（必須）
xmlns属性

### lang属性
自然言語を指定することで、言語によって適切なフォントを選択したり、引用符、スクリーンリーダーの音声合成エンジンが選択されたり、翻訳元の言語が設定されたりする。

属性値には、言語タグを指定する。（日本なら。jaやja-JP）

## 例
```html
<!DOCTYPE html>

<html lang="ja">
    <head>...</head>
    <body>...</body>
</html>
```

## 所感
lang属性がスクリーンリーダーとか翻訳言語を決めてたんだな。
アクセシビリティ的にもちゃんと指定しないとな。
せんせー、スピンホール効果ってなに？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194265/2c47de5a-d81a-78f9-53c1-4d31d8398c36.png)

キーンコーンカーンコーン...
授業が始まります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194265/be1492ca-910f-2708-d0fa-8fcfcf14af73.png)

せんせー、スピンホール効果ってなに？

# スピンホール効果とは

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194265/da229491-9c49-fb7a-a542-417180e256a7.png)

## スピンホール効果って何？

みんな、風車を知ってますか？
風が吹くと風車がくるくる回りますよね。
電子にも、風車みたいに回る動きがあります。これを「スピン」と呼びます。
スピンホール効果は、このスピンが特別な動きをする現象のことを指します。

## どういうこと？

電子は通常、電気を流すときにただまっすぐ動くだけだけど、スピンホール効果では、その動きとは違った方向にも動き出します。それは、風車が風に吹かれて回るのと似たような感じです。

## どうしてそれがすごいの？

このスピンホール効果を利用すると、新しいタイプの電子機器やコンピュータを作ることができるかもしれないです。
これは、電子の新しい動きを利用して、もっと速く、もっと効率的に情報を扱えるようになるからです。

## だから、スピンホール効果ってなに？

スピンホール効果は、電子の特別な動きを示す現象で、これを使うと新しい電子技術を生み出すことができるかもしれないんです。

# まとめ

このように、スピンホール効果は、電子技術の新しい可能性を秘めた、とても興味深い現象なんです。
【工事中】Ionic capacitor プロジェクトでandroidビルド

【工事中】
ionic build 　//distフォルダ生成
ionic capacitor add android 　//androidフォルダ生成
ionic capacitor sync android
ionic capacitor copy android
ionic capacitor open android　//android Studio起動


angular.json
          "options": {
            "outputPath": "dist",にする。
            
capacitor.config.ts
webDIr distにする。
MySQLでデータベースの移行をする

2つのコンピュータをまたいでデータベースを移行する方法を解説する。

### 環境
- Intel Mac (MacOS Ventura 13.5)
- MySQL (Ver 8.0.33 for macos13.3 on x86_64 (Homebrew))

### 手順
移行元の現状は次のようになっている。

```mysql
mysql> SHOW DATABASES;
+--------------------+
| Database           |
+--------------------+
| deetabeesu         |
| information_schema |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
5 rows in set (0.00 sec)
```

`deetabeesu`というデータベースを異なるコンピュータに移行していく手順を示す。

まず、次のコマンドでバックアップ(dump)を作成する。
MySQLのプロンプトではなく、**ターミナルで**
```
$ mysqldump -u root -p deetabeesu > deetabeesu_dump.sql
```
を実行すると、カレントディレクトリに`deetabeesu_dump.sql`が生成される。
ここで`deetabeesu_dump.sql`の名前はなんでもよい。

次に、移行先のコンピュータに空のデータベースを作成する。
こちらは**MySQLのプロンプト**で、
```
mysql> CREATE DATABASE deetabeesu; 
```
を実行する。
このとき、データベースの名前は移行元のものと同じにしておく。

次に、移行先のコンピュータにdumpファイルを持ってきたあと、ターミナルで
```
$ mysql -u root -p deetabeesu < deetabeesu_dump.sql
```
を実行する。
ここで、`deetabeesu_dump.sql`の部分にはdumpファイルのパスを指定できる。

以上の手順により、MySQLのデータベースの移行が完了した。
【React】親要素の外側にフォーカスが移動したか判定する方法

以下のように記述すると親要素の外側にフォーカスが移動したか判定できます。

```jsx
export default function Example() {
  const handleBlur = (ev: React.FocusEvent<HTMLFormElement>) => {
    if (!ev.currentTarget.contains(ev.relatedTarget)) {
      handleSubmit(onSubmit)()
    }
  }

  return (
    <form onBlur={handleBlur}>
      <input type='text'/>
      <button>ボタン</button>
    </form>
  )
}


```

https://react.dev/reference/react-dom/components/common#handling-focus-events
TensorFlowでGPUを使う

### はじめに

TensorFlowでGPUを使えたので備忘録
基本的に以下のサイトの通りにインストールすれば良い

https://www.kkaneko.jp/tools/win/cuda.html#S1

### 動作環境

| 項目 | version |
| :----: | :----: |
| Python | v3.10 |
| CUDA | v11.8 |
| cuDNN | v8.9.3 for 11.x |
| TensorFlow | v2.10 |
| OS | Windows10 |
| GPU | GTX1660super |

### 注意点
・Windowsでの動作はTensorFlow2.10までしか対応していない(普通のやり方では)
・使いたい場合は以下の記事が参考になるかも

https://qiita.com/pocokhc/items/0a759130941090b1d231
Teachable Machineで「顔認証システム」を構想する

テナントさんを管理する会社でお仕事しています。
習いたてのTeachable Machineを活用し、テナント従業員さんの入退館を顔認証で管理できないかなと、ふと考えました。
私と同じようなことをお勉強される方がいつの日か「なるほど！」とこの記事を参考にしてもらえたら、そして自分用のメモとして、調べたことを恥ずかし気もなくそのまま残します。

◆作ろうとした背景
私の会社では、大小さまざまな物件がありますが、どの建物でもテナント従業員さんの入退館を管理しています。
大きな建物では、入退館システムを導入していますが、データはクラウド管理されていません。また、小さな建物では紙で管理しています。入館時は警備室で入退館の時間を紙に記入し、自分の名札を警備室横の棚から取り出す、、、どこかの道場みたいですよね（退館はその逆です）。
　東日本大震災の時、東北では津波でシステムも入退館の紙もぐちゃぐちゃになりました。テナント従業員さんの安否を心配するご家族から本社に何度かお問合せがありましたが、出勤されていたのかどうかもお答えすることができず、本当に申し訳ない思いをしました。今でも心が痛みます。
　１２年経ち、既に顔認証システムも出回っています。社内でもクラウド上で管理できるシステムをパイロット導入しますが、自分でも作れないか考えてみました。

◆使用したツール
Teachable Machine
Node-RED

◆完成までの道のり
≪１≫Teachable Machine
Teachable MachineとはGoogleが公式に提供する無料AI作成ツールです。
・プログラミング不要
・画像、音声、ポーズを認識できるAIモデルを作成できる
・AIモデルをサイトやアプリなどにエクスポートして使用可能
・無料

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3516547/88d8c4d4-5b1e-c460-2d53-fd89c3e7e8d1.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3516547/61bb8afa-737e-1b29-309e-69499ae26063.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3516547/f359f42d-2dcd-0d3e-7486-2edec107144a.png)


1⃣作業１ウェブカメラで撮影
　モデルが居ないので、我が家のぬいぐるみ達をテナント従業員さんに見立て撮影します。
　「Ｃｌａｓｓ」に番号と名前を登録します。「ウェブカメラ」を押クリックしている間、カメラがどんどん撮影します。
　すこーし上下左右に動かしつつ約100枚ほど撮影しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3516547/dc06b48c-3caa-2374-d579-c6dacacea0cc.png)


2⃣画像を学習させる
　「トレーニング」をクリックし、ＡＩに覚えさせる。数分お時間かかりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3516547/f7fa3ad8-2d60-125b-0b03-915daec91ccd.png)

3⃣エクスポート
　「モデルをエクスポート」をクリック。
　クラウド上にアップロードすることも出来るし、自分のPCに保存することも出来ます。
　「クラウドモデルを更新する」をクリックスするとURLが出来ました。こちらをコピーして使います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3516547/98d96121-e16e-8e36-d98e-0ef1bb1c7918.png)


≪２≫Node-RED
ハードウェアとそれを動かすためのソフトウェア、インターネット上の各種サービスを簡単につなげることを目的に開発されました。

1⃣私のイメージ
基地（パレット）から特殊機能を持った戦士（ノード）を戦場（ワークスペース）の上に並べて、自分の戦術どおりに動いてもらうゲーム･･･といったカンジでしょうか。
そして、足りない戦士は連れてこないといけません。

右上の三本線（ハンバーガーマーク）から
「パレットの管理」「ノードを追加」「検索」でtimestampとcsvを追加しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3516547/4feeaada-f934-33d5-adee-44b0fe46b01d.png)


ノードをダブルクリックし、設定します。
こちらは、「テンプレート」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3516547/13c6b1a8-b211-494d-6829-ffa33d91550e.png)

指示を出す度、右上の「デパック」しつつ
右上の▼マークから、虫さんマークを選択


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3516547/d23fbfec-9e4a-9a9e-0654-251a181f8e7e.png)


「camera」を押しながら、PCのカメラにぬいぐるみを映すと、、、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3516547/fc49ba4b-d88b-f412-9ebf-04a9a014d035.png)


顔は認証してくれました！
が、

≪この先やりたいこと≫
1⃣時間を表示させる
2⃣認証時間と認証者情報をCSVへ書き出しする
3⃣従業員管理表と連携させる
4⃣メールやＬＩＮＥへ連携させる



余談＆自分メモ
私の会社では、edgeが標準仕様です。が、Teachable Machineはchromeで使用します（Googleさんの仕組みですものね）。Teachable Machineを使う際、PCがchromeでのカメラの設定を聞いてきますが、Teachable Machineを使い終わったら、chromeのカメラ設定を外す必要があります。

・Chrome を開く
・右上のその他アイコン [設定] をクリック
・[プライバシーとセキュリティ] [サイトの設定] [カメラ]をクリック
・デフォルト設定として使用するオプションを選択
・ブロックしたサイトと許可したサイトを確認
・ブロックや許可の設定を取り消すには 、該当のサイトの右にある削除 をクリック
Live Sass Compilerを開発者に共有する


```js:.vscode/extensions.json
{
	// See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
	// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp

	// List of extensions which should be recommended for users of this workspace.
	"recommendations": [
		"glenn2223.live-sass"
	],
	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
	"unwantedRecommendations": [
		
	]
}
```

`Add to Workspace Recommendations`をクリックすると**.vscode/extensions.json**を自動で作ってくれるよ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/bef0e46c-1523-b90e-9e5b-acfbfc5ee90b.png)

さあエンジョイしようぜ

https://qiita.com/otsuky/items/f46f5ee9eb11b3a9a4ba