OmniAICreator/Qiita-1.07M huggingface dataset:
ReactでToDoアプリ作ってみた

# 概要
普段クラウドのインフラをメインで勉強していますが、フロント側を学んでみたいと思いました。
今回は、Reactを簡単に勉強してToDoアプリを作成してみました。

# 成果物
- コード
https://github.com/kohei-fujii/react-todo-app

- デモ動画
![AdventApp.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986137/37a6d7fa-a415-df8b-bd52-f35e4f41822c.gif)

# 学んだこと
## JSX記法
Reactでは、JSX記法が使えます。
JSX記法とは、Javascriptを拡張した言語でHTMLのタグを書けるようになっています。
- Javascriptの中に、HTMLを記述することが可能
- HTML内に```{}```を使用することで、Javascriptの変数を渡すことが可能

```Inputarea.jsx
import '../App.css';

function Inputarea(props) {
  const { taskname, onChangeInputArea, onChangeAddtaskButton} = props;
  return (
    //HTMLを書くことができる & {}を使用することでJavascriptの変数を渡すことができる
    <div className='input-area'>
        <input placeholder='タスク名を入力' value={taskname} onChange={onChangeInputArea}/>
        <button onClick={taskname && onChangeAddtaskButton}>追加</button>
    </div>
  );
}

export default Inputarea;
```

## State
Reactでは、Stateが使えます。
Stateとは、ユーザの操作によって変化する状態を管理するために使用されます。

今回の例だと、ToDoリストの中身はユーザの操作によって変化します。
- タスク追加ボタンを押した時、ToDoリストの中身は増える
- ToDoリストの完了ボタンを押した時、ToDoリストの中身は減る
- Doneリストの戻るボタンを押した時、ToDOリストの中身は増える

上記のような際に、Webページの画面を再度レンダリングする必要があります。
再レンダリングをするには、タスクの名前が必要となりこれをStateで配列として管理をします。
Stateの中身が変更されると、再レンダリングが行われます。これでHTMLの中身を変更することができます。

↓コードの一部を抜粋

```App.jsx
import { useState } from 'react';

function App() {
  // 分割代入を使用
  // 左側の変数がStateの値を管理している配列を格納する変数名
  // 右側がStateの値を変更する際の関数名
  const [taskname, settaskname] = useState('');
  const [todotasklist, settodotasklist] = useState('');

  // テキストボックスの値が変化したときに、tasknameの値をStateにセットする
  const onChangeInputArea = (event) => settaskname(event.target.value);

  // 「追加」ボタンが押されたときに実行される関数
  const onChangeAddtaskButton = () => {
  // スプレッド構文を使用して、既存のtaskの名前を管理している配列 + 追加されたtaskの名前をnewtodotasklistに入れる
    const newtodotasklist = [...todotasklist, taskname];
  // Stateを変更する
    settodotasklist(newtodotasklist);
  // ToDoリストへの追加が完了したので、消す
    settaskname('');
  }

  return (
    <>
      <p>タスク追加</p>
      <Inputarea taskname={taskname} onChangeInputArea={onChangeInputArea} onChangeAddtaskButton={onChangeAddtaskButton} />
      <p>ToDOリスト</p>
      <Todolist todotasklist={todotasklist} onChangeCompleteTaskButton={onChangeCompleteTaskButton} />
    </>
  );
}

export default App;
```

```Todolist.jsx
import '../App.css';

function Todolist(props) {
  const { todotasklist, onChangeCompleteTaskButton} = props;
  return (
    <div className='todo-list'>
    {/* todotasklistの値が空でないかつ変更が加わった際に画面の再レンダリングが行われる */}
        {todotasklist && todotasklist.map((todotask, index) => {
          return (
            <div key={index} className='task-layout'>
              <p>{todotask}</p>
              <button onClick={() => onChangeCompleteTaskButton(index)}>完了</button>
            </div>
          );
        })}
      </div>
  );
}

export default Todolist;
```

## コンポーネント化
Reactでは、HTMLをコンポーネントとして分けて開発をすることができます。
そのため、コードのメンテナンスがしやすい等のメリットがあります。
今回は、4つのコンポーネントに分割しました。

- Header.jsx
- Inputarea.jsx
- Todolist.jsx
- Donelist.jsx

# 最後に
いつもとは違う学びがあり、面白かったです！
また、フロント部分の技術にも挑戦していきたいと思います!
[Django REST framework] POST時、履歴としてLogにも保存したい

## Bookモデルにデータ投入時、履歴としてLogモデルにデータを入れたい。


## ManyToManyFieldが`含まれない`場合
```python:models.py
from django.db import models

class Auther(models.Model):
    author_name = models.CharField()

class Book(models.Model):

    book_name = models.CharField()
    book_author = models.ForeignKey(Auther)
    
class Log(models.Model):
    message = models.CharField()
```

```python:serializers.py
from rest_framework import serializers

class BookSerializer(serializers.ModelSerializer):

    class Meta:
        model = Book
        fields = '__all__'
```

```python:views.py
from rest_framework import viewsets

class BookViewSet(viewsets.ModelViewSet):

    queryset = Book.objects.all()
    serializer_class = serializers.BookSerializer

    def perform_create(self, serializer):
        # Book 保存
        serializer.save()
        # Log 保存
        book_name = serializer.data['book_name']
        book_author = serializer.data['book_author']
        log = Log.objects.create(
            message=f'登録完了({book_name}, {book_author})'
        )
        log.save()
```

`Book`にデータを投入すれば
```
curl -X 'POST' \
  'http://127.0.0.1:8001/book/' \
  -H 'Content-Type: application/json' \
  -d '{
  "book_name": "TEST",
  "book_author": "TEST",
}'

```

`Log` にもデータが投入される
```text:curl -X GET 'http://127.0.0.1:8001/log/'
[
    {
        "id": 1,
        "message": "登録完了(TEST, 1)"
    }
]
```
## ManyToManyFieldが`含まれる`場合
```python:models.py
from django.db import models

class Auther(models.Model):
    author_name = models.CharField()

class Book(models.Model):

    book_name = models.CharField()
    book_authors = models.ManyToManyField(Auther, blank=True)
    

class Log(models.Model):
    message = models.CharField()
```

```python:serializers.py
from rest_framework import serializers

class BookSerializer(serializers.ModelSerializer):

    class Meta:
        model = Book
        fields = '__all__'
```

```python:views.py
from rest_framework import viewsets

class BookViewSet(viewsets.ModelViewSet):

    queryset = Book.objects.all()
    serializer_class = serializers.BookSerializer

    def perform_create(self, serializer):
        # Book 保存
        serializer.save()
        # Log 保存
        book_name = serializer.data['book_name']
        for author_id in serializer.data['book_authors']:
            log = Log.objects.create(
                message=f'登録完了({book_name}, {author_id})',
            )
            log.save()
```
`Book`にデータを投入すれば
```
curl -X 'POST' \
  'http://127.0.0.1:8001/book/' \
  -H 'Content-Type: application/json' \
  -d '{
  "book_name": "TEST",
  "book_authors": "[1,2]",
}'

```

`Log` にもデータが投入される
```text:curl -X GET 'http://127.0.0.1:8001/log/'
[
    {
        "id": 1,
        "message": "登録完了(TEST, 1)"
    },
    {
        "id": 2,
        "message": "登録完了(TEST, 2)"
    },
]
```
ChakraUIとReact Hook FormとZodと

[Next.js + サーバーサイドTypeScript + 関数フレーバーでクリーンなアプリを作ったので実装意図とか書く Advent Calendar 2022](https://qiita.com/advent-calendar/2022/shwld)
の**18日目**。[株式会社mofmof](https://www.mof-mof.co.jp/)に生息している[shwld](https://twitter.com/shwld)です。

前日は[NextAuth.jsとAuth0を使って認証をパッと作る](https://qiita.com/shwld/items/fe9017c1bddd93f5a211)について書きました
# ChakraUIとReact Hook FormとZodと

利用しているパッケージを3つまとめて紹介します。

## Chakra UIを使う理由
[Chakra UI](https://chakra-ui.com/)はUIライブラリです。

```typescript
import {
  Box,
  Flex,
  HStack,
  IconButton,
} from '@chakra-ui/react';
import { HamburgerIcon, CloseIcon } from '@chakra-ui/icons';

<Flex h={10} alignItems={'center'} justifyContent={'space-between'}>
  <IconButton
    size={'md'}
    icon={isOpen ? <CloseIcon /> : <HamburgerIcon />}
    aria-label={'Open Menu'}
    display={{ md: 'none' }}
    onClick={isOpen ? onClose : onOpen}
  />
  <HStack spacing={8} alignItems={'center'}>
    <Box>Logo</Box>
  </HStack>
</Flex>
```

こんな感じでJSXを記述できます。
ポイントとしては

- propsに補完が効く
- カスタムコンポーネントを作りやすい

の2点です。
### propsに補完が効く
コンポーネントにstyleを直接記述できるうえでスタイルに一貫性を持たせられるChakura UIの使い心地は、Tailwind CSSににています。
Chakra UIはpropsで指定する形になっており、型がついているため、素早くコンポーネントを作ることができます。

### カスタムコンポーネントを作りやすい
Chakra UIはpropsの型を提供してくれているため、そのままそれを使って型つけすることでカスタムコンポーネントを作りやすいです。

この2点の開発体験が良いため選定しています。開発体験とスピードに全振りして選びました。

# React Hook Form/Zodを使う理由
- Form関連のコードに一貫性を持たせるため

別にstateを直接扱ってFormを書いてもいいと思っていて、React Hook Formを使う理由としてずっと思っていたのは再レンダリングコストが高いフォームだけ入れるのでもいいじゃないかと思っていました。
ただ、そういったフォームだけReact Hook Formを使うのは全体の一貫性を損ない、使う使わないの判断が入り込みます。

また、フォームはバリデーションやデータ成形など割りと面倒くさい処理が多くなる部位であり、stateでやり取りするにしても管理が結構大変になりがちでuseReducerが出てきやすかったりすると思います。
まるっといろんなユースケースに対応できる形で一貫性をもたせようと選定しました。

React Hook FormとZodを使い、バリデーションとデータ成形を少ないコードで実現できます。

例: [/apps/web/src/features/project/ProjectBoard/components/StoryUpdateForm/StoryUpdateForm.tsx](https://github.com/shwld/uzumaki/blob/advent-calendar/apps/web/src/features/project/ProjectBoard/components/StoryUpdateForm/StoryUpdateForm.tsx)
# 次回予告
明日は[VitestでGraphQLとReactをテストする環境づくり](https://qiita.com/shwld/items/312d10c3cad13cbdb14e)について書きます。
NextAuth.jsとAuth0を使って認証をパッと作る

[Next.js + サーバーサイドTypeScript + 関数フレーバーでクリーンなアプリを作ったので実装意図とか書く Advent Calendar 2022](https://qiita.com/advent-calendar/2022/shwld)
の**17日目**。[株式会社mofmof](https://www.mof-mof.co.jp/)に生息している[shwld](https://twitter.com/shwld)です。

前日は[Next.js/React + GraphQLのコンポーネント整頓術](https://qiita.com/shwld/items/b4956d648796b5e2f4d7)について書きました
# NextAuth.jsとAuth0を使って認証をパッと作る
今回のアプリでは、まだパッと作るところまでしかできてません。
動くところまでは作りましたが、細かい設定できていない気がするのと、iOSやAndroidアプリをフロントエンドにしてGraphQLサーバーだけ使いたい場合どうなるなど気になる項目が残っていたりします。

## NextAuth.jsについて
[NextAuth.js](https://next-auth.js.org/)はNext.jsに認証機能を簡単に加えることができるライブラリです。
今回、[PivotalTracker](https://www.pivotaltracker.com/)のクローンを作ったので、認証が必要なページが殆どで、SPAにしてクライアントサイドだけで認証しても良かったです。

ただ、クライアントだけで認証するとどうしても画面を描画してから認証処理が走り、結果を処理してリダイレクトするなど、コードが複雑になるし、体験も良くない。
できればレンダリング時には認証しているかどうか知っている状態を作りたい。

NextAuth.jsはそこを解決できそうなのと、導入も軽そうだったので今回はじめて採用しました。

## Auth0について
Auth0はアプリケーションに簡単に組み込める認証基盤を提供してくれるサービスです。
認証周りを自分で書くのは、セキュリティと時間的コストを理由にほとんどやらないです。

Auth0はよく使っているサービスでも利用実績があったり、安心して使える基盤だと思います。

[Auth0](https://auth0.com/)と[Firebase Auth](https://firebase.google.com/products/auth)で迷ったのですが、NextAuth.jsとの相性でAuth0に決めました。（Firebase Authを使う場合NextAuthにProviderがないので自分で連携する必要がある）
## 使い方
使い方は探せばいくらでもありそうなのでここでは取り扱いません。
[ソースコードは公開している](https://github.com/shwld/uzumaki/blob/advent-calendar/apps/web/src/)ので、そちらをご参照いただければ！
# 次回予告
明日は[ChakraUIとRHFとzod](https://qiita.com/shwld/items/d5b7f8e64ea7cf4871c8)について書きます。
【MySQL】SQL集(データ取得について)

# はじめに
この記事は以前に学んだSQLについての記事です。
少しづつ記事の内容も編集して、増やしていくのでよろしくお願いします。

# SELECTについて
SELECTはデータの取得の時に使うものです。

```
SELECT 社員ID,　名前 
FROM　社員 
```
SELECTで取得したいデータのカラム名を指定して、FROMでテーブル名を指定します。
結果は↓

|  社員ID|    　名前   　　  |
|--------:|:-------------:|
|  1  　|       鈴木 |
|2　   |        佐藤 |

このように、データが取得できます。

ここからはフィルタ条件について書いていきます。
適当な社員テーブルを作りました。

|ID|    　名前   　　 |  所属|    　趣味  |資産|
|-----:|:-------------:|:------:|:-----:|:---:|
|1|       鈴木 |  営業 　|      読書  |120000|
|2|        佐藤 |  営業  　|       キャンプ |15000|
|3|    　中田 　 | エンジニア  　|       釣り |200000|
|4| 加藤 |  エンジニア  　|       読書 |125000|
|5|       坂本 |  営業  　|       筋トレ |12000|
|6|        菅野 |  エンジニア  　|       釣り |9800|
|7|       山口 |  営業 　|       キャンプ |85000|
|8|        福島 |  広報  　|     筋トレ   |56000|
|9|    　田中 　 | エンジニア  　|       釣り |4500|
|10| 小林 |  事務  　|       映画鑑賞 |30900|
|11|   村上     |  広報  　|       DIY |23000|
|12|      中村 |  事務  　|       筋トレ |55000|

## WHERE
検索するデータに対して、条件を指定することができます。
```
SELECT ID, 所属
FROM 社員
WHERE 所属 = エンジニア
```
このSQL分から得られる結果はこちら
|ID|　名前　|
|:--:|:---:|
|3|中田|
|4|加藤|
|6|菅野|
|9|田中|

エンジニア所属の人のIDと名前が取得できました。

## ORDER BY

ORDER BYは検索したいデータを並び替えることができます。
```
SELECT ID,名前
FROM 社員
WHERE 資産　<= 15000
ORDER BY ID
```

|ID|名前　|
|:--:|:---:|
|2|佐藤|
|5|坂本|
|6|菅野|
|9|田中|

こちらのデータが抽出できます。
次は先ほどのSQL文の最後に「DESC」を追加してみます。
```
SELECT ID,名前
FROM 社員
WHERE 資産　<= 15000
ORDER BY ID　DESC←追加
```
|ID|　名前　|
|:--:|:---:|
|9|田中|
|6|菅野|
|5|坂本|
|2|佐藤|

DESCを追加すると、ORDER BYで指定したIDが昇順から降順で抽出することができます。

## GROUP BY
GROUP BYは指定したカラムでグループ化をすることができます。

```
SELECT 所属,count(*) AS 所属別人数
FROM 社員
GROUP BY 所属
```

|所属|　所属別人数　|
|:--:|:---:|
|営業|4|
|エンジニア|4|
|広報|2|
|事務|2|

所属別にGROUP BYしてCOUNT(*)で所属別の人数を数えることができました。

## 最後に
また追記します。
未経験からエンジニア転職して2年経つとどうなるの？

## はじめに
個人ごとですが2022/12/15をもちまして異業種から転職してちょうど２年が経ちました。
せっかくなのでやる気も能力も平均的な自分がゆるっとエンジニアをしていて、できるようになったことや、ここは違ったかもなということなどをせっかくなので正直に書いていこうかと思います。
今転職に悩んでいる方や、転職活動中の方の参考になればと思います。

## 転職前の経歴
・某大手企業の全国転勤総合職として入社。店舗経営に携わっていました。
・接客から経営企画、人材育成や機材トラブルまでなんでも対応するいわゆる何でも屋さん。
・このまま働いていても自分の市場価値が上がらないと思い転職を決意。
・４ヶ月間某プログラミングスクールに通学して晴れて開発会社に転職。

## 転職先の会社情報
株式会社やどかり(https://www.yadokari.tv/)
・転職した時はまだ社員数２０もいませんでしたが、現在３０名。
・スマホアプリ/Webアプリ/IoT/AndroidTVアプリなどなんでも開発。
・受託開発の会社で基本自社オフィスで開発している。
・社員の8割がエンジニア。
・全力で仕事して全力で遊ぶをモットーにしている会社。
・みんなでワイワイイベントをやったりしていること多いです。
・ちなみにドメインの.tvはツバル共和国のドメインらしいです。不思議だね。

## 入社〜半年くらいでできたこと
・テストとバグの修正
・簡単な改修案件（PHP）
・簡単なHP作成（PHP）
・打ち合わせの議事録をかく
・会社の雑務（お誕生会のケーキ買いに行ったりとか）
・元気なあいさつ

## 今自分がやっていること
・webアプリのDB設計・画面設計
・スマホアプリのDB設計・画面設計
・顧客との打ち合わせ
・ディレクションぽいこと
・テスト
・プログラミング
・SESの採用に関わること
・インターン生に関すること
・社内HPの更新
・その他社内の仕組み改善など
※弊社は小規模な会社のため、結構なんでもやります。

## 想像どおりだったこと
・自分で調べるだけじゃなく、人に聞かないとわからないことも多いこと
→インターネットに落ちていないプログラムのお約束、調べ方がわからない技術、いろいろあります。

・世界共通のITの知識が身につくこと
→エンジニアあるある！みたいなのが別の会社の人とも話せるのが新鮮！共通言語なので、話題に困りません。

・運動量が減って太ったこと
→最近お歳暮で美味しいお菓子がいっぱい届きます。

## 想像と違ったこと
・プログラムを書いている時間は意外とない。
→自分の場合色々考えたり、設計などをしている時間が圧倒的に長いです。

・コミュニケーションがとても大事。
→複数の会社で合同でプロジェクトを進めることも多いです。仕様をわかりやすく相手に伝えたり、聞きたいことを先輩に質問したりがとっても大事。

・１個の案件だけをずっとやることはない。
→これは受託あるあるかもなのですが、大体3~4くらいの案件を掛け持ちして、いろんなサービスについて知れます。反面、うまく進めないと一つの案件が止まっちゃう、なんてことも。。。

## 転職してよかったこと
・いろんな業界の話を聞いたりできること
→受託なので色々な業界のシステムつくってます。必然的にその業界について知れます。

・自分の裁量で予定を立てやすくなったこと
→前職だと必ずこの時間にこれ！というものが多かったのですが、顧客との打ち合わせ以外は結構自分の裁量で予定が立てれて、良いです。気を配らないとすぐ破綻するので、注意も必要ですが。。

・土日休みになったこと
→スケジュール立てやすくなりました。前職だと希望休出すのにちょっと罪悪感を感じる時もありましたが、それがなくなっていいです。

## 改善したいこと

・残業時間を減らす
→自分のスキル不足や、急なトラブルなど仕方ない面もあるのですが残業時間減らしたいです。目指せ定時退社。もうちょっとスキルアップや、業務効率の見直しをしたいなと思います。

## で、結局よかった？悪かった？

**よかった！！！**

もちろん大変なことも多いし、未経験転職だからお給料下がったし、2年経ってもあんまり成長していないなぁって思う時も度々あります。
でもあのまま前職を続けて、だらだら仕事して何もできないまま年を取るよりははるかに良かったと思います。
あと休みや働き方が固定されてプライベートでいろいろチャレンジできるのは本当にありがたいです。

## 転職で悩んでいる方へ

・転職自体へ悩んでいる方へ
今悩んでいる方は自分がやりたいことを書き出してみて、それが今のままでもできるのか、転職しないと難しいのか、その辺で考えるといいと思います。


・エンジニアに転職するって決めたけど悩んでいる人へ
向いてる向いてないを考える前にとにかくやってみたほうがいいです。
コードを書くだけがエンジニアの仕事じゃないので、やってみれば意外と向いている業務はあるよ！

ではでは。良い転職ライフを！
ImageMagickのconvertが使えなかったときの解決方法

# 最初に
先日ImageMagickのconvertコマンドを使ってpngファイルをepsファイルに変換しようと思ったら上手くいかなかっので私が陥ったエラーとその時の対応方法を残しておきます.

# エラー内容
コマンドラインから
```
convert 変換前画像パス 変換後画像パス
```
で実行すると「不明なパラメータ」です.というエラーが出ました.

# 解決方法
- どうやらwindowsの中に標準でconvertというコマンドが入っているようでそちらに反応していたみたいです.
なのでImageMagickのインストール先のディレクトリを見てみました.(デフォルトではC:\Program Files\ImageMagick-7.1.0-Q16にインストールされてます.)

- convert.exeがなかったことが原因だったみたいです.
- なので再度インストールする際に[Select Additional Tasks]で[Install legacy utilities]にチェックマークを入れてインストールします.
![キャプチャ1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3015493/592e3305-0cdd-64e7-4684-9405d9f95ae1.png)

- これでconvert周りのものがインストールされました.
![キャプチャ1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3015493/b7e8a5d0-8ea0-b485-3a94-0d3a92bcec2a.png)
要素が子要素を持っていても dragLeave イベントを正しく発火させる

## はじめに
React でファイルが要素の上にドラッグされたら要素を青色にしたい時は以下のように書くことが多いかと思います。

```
import React, {useState} from "react"

const Component = () => {
    const [isHoverd, setHoverd] = useState(false);

    const onDragEnter = (event: React.DragEvent<HTMLDivElement>) => {
      setHoverd(true);
    };
    const onDragLeave = (event: React.DragEvent<HTMLDivElement>) => {
      setHoverd(true);
    };
 

    return(
        <div onDragEnter={onDragEnter}
             onDragLeave={onDragLeave}
             className={isHoverd ? "bg-blue-class" : ""}
             id="drop-area"
        >
            ここにドロップしてね
        </div>
    )
}

```

## 子要素へ `DragEnter` すると自身の `dragleave` が発火しちゃう問題

上の例なら動作するんですが `drop-area` が子要素を持ってる場合だと問題がありまして、 `drop-area` 上にいても `child-element` に上にファイルが乗ると `drop-area` の `dragleave` が発火されちゃうんですよね...

```
    <div id="drop-area">
        <div id="child-element" /div> <- ここに Enter するとまずい
    </div>
```

この動作の詳細な説明はこちらの記事がとても分かりやすいです。

https://qiita.com/sounisi5011/items/dc4878d3e8b38101cf0b#%E5%8E%9F%E5%9B%A0

## 改善その １

この記事のやり方以外にもいい方法はないかと調べ以下の記事のやり方が僕的に好みだったので実装してみました。

https://stackoverflow.com/questions/69711768/how-to-avoid-a-child-div-in-react-invoking-a-parents-ondragleave-event

やっていることはこんな感じです。（`onDragLeave` 以外同じなので省略してます）

```
    const onDragLeave = (event: React.DragEvent<HTMLDivElement>) => {
      if (
        event.relatedTarget &&
        event.currentTarget.contains(event.relatedTarget as Node)
      )
    return;
      setHoverd(true);
    };
```

何をやっているかというと、発生したイベントの直前に発生したイベントのエレメントを返す `relatedTarget` プロパティを使用して、 `isHoverd` を `true` にしたくない `drop-area` から `child-element` へのファイルの移動時はなにもしないようにしています。

https://developer.mozilla.org/ja/docs/Web/API/MouseEvent/relatedTarget

## WebKit だと正常に動作しない問題

上の実装で Chrome とかだと動作するんですが、safari だとなんと正常に動作しないようです。CanIuse にも言及されてないし実際に動作検証しないと気づかなそう...

https://caniuse.com/mdn-api_focusevent_relatedtarget

`onDragEnter` と `onDragLeave` イベント時のみ `relatedTarget` が `null` になるバグ？があるみたいです。 ~~10 年前から報告されてるとかもはや仕様レベル~~

https://bugs.webkit.org/show_bug.cgi?id=66547

## どうしたか

`react-area` の `useDrop` を使用することで解消しました。解消したというのも何なら若干語弊があって `useDrop` のソースコードを読んでる時にこのバグの存在を知った感じです。

ライブラリを極力使用したくない場合は GitHubのこの部分に実装が書いてあるので参考になるかと思います。

https://github.com/adobe/react-spectrum/blob/703ab7b4559ecd4fc611e7f2c0e758867990fe01/packages/%40react-aria/dnd/src/useDrop.ts#L207-L213

https://github.com/adobe/react-spectrum/pull/3391#issuecomment-1211470598

## さいごに

ブラウザごとに色々気をつけないといけないのはなかなか大変ですね。
また、`useDrop` は今回実装した `onDragLeave` の判定とかも元からやってくれてたりしていいですね。 `onDragEnter`, `onDragLeave` のイベント名も `onDropEnter`, `onDropLeave` にしたりしてるのが個人的には好きです。実行するのは `drag` してるほうじゃなくで `drop` されるほうですしこっちのほうがわかりやすいように思いました。

`useDrop` は `useDrag` と合わせて他にも感動した機能があったりしたのでいつかご紹介したいと思っています。

最後まで読んでいただきありがとうございました！ 間違ってるところ等々ありましたらぜひコメントください！
【Xcode】ビルド成功時に音で知らせる設定

# 気付いたらビルドが終わっている
規模の大きいアプリのビルドやアーカイブを行った時、ビルドできるまで時間がかかるので他の作業をして、気付いたらビルドが終わっている、、、
そろそろ終わってるかなと思い、見てみるとビルドが失敗していた、、、なんてことはないでしょうか？

# 成功時、失敗時に音で知らせる設定
xcodeではビルド成功時や失敗時にそれぞれ音で知らせることができる機能があります。
まずは環境設定(Preferences)を開きましょう。`command + ,`でも開くことができます。
![スクリーンショット 2022-12-17 11.40.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2604036/38bbf538-d63f-5f6b-b97a-f54333e2badc.png)
「Behaviors」のタブを開くと、イベントに合わせて動作を設定できる画面が開きます。
今回はこちらのBuild時の「Succeeds」と「Fails」を設定していきます。
デフォルトでは**Play soundのチェックボックスが外れている**ので、チェックを入れてお好みの音を設定しましょう。
![スクリーンショット 2022-12-17 11.53.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2604036/5af6b5f3-cc84-e7d2-c9aa-661c1a7529fe.png)


自分はSucceeds時は「Breeze」、Failsの時は「Submerge」に設定しています。
これでビルドやアーカイブに音で知らせてくれるようになり、時間を無駄にすることが減りました。
【Go】Generics を使って、null 許容 scalar type 的なものを作る

string や int など、プリミティブな型は、それがゼロ値なのか、意図してその値になっているのかわからない時がある。
それを判別するために database/sql pkg などでは、[NullString](https://pkg.go.dev/database/sql#NullString) などの独自型を用意して、ゼロバリューなのかどうかを判定できるようにしている。
それをジェネリクスを使って、汎用的に書いてみたものが以下。

```go
package main

import (
	"fmt"
)

type NullValue[T any] struct {
	value T
	valid bool
}

func NewNullValue[T any](v T) NullValue[T] {
	return NullValue[T]{
		value: v,
		valid: true,
	}
}

func (nv NullValue[T]) Value() (T, bool) {
	var noop T
	if !nv.valid {
		return noop, false
	}
	return nv.value, true
}

func main() {
	print(NewNullValue("hogehoge")) // => hogehoge
	print(NewNullValue(""))         // =>
	print(NullValue[string]{})      // => no value set

	print(NewNullValue(100)) // => 100
	print(NewNullValue(0))   // => 0
	print(NullValue[int]{})  // => no value set
}

func print[T any](v NullValue[T]) {
	if vv, ok := v.Value(); ok {
		fmt.Println(vv)
	} else {
		fmt.Println("no value set")
	}
}

```
画面遷移の際の長い記述をシンプルにする方法 2つ

画面遷移をする際には、以下のように記述することが多いかと思います。

```dart
      onPressed: () {
        Navigator.of(context).push(
          MaterialPageRoute(
            builder: (context) => const SamplePage(),
          ),
        );
      },
```

今回は、こちらを少し簡略化するのに自分が行っている方法を２つ紹介したいと思います！

## 【extensionを使用する】

遷移元 extensionの追加

```diff_dart
//追加
+ extension BuildContextE on BuildContext {
+   Future<void> to(Widget view) async {
+     await Navigator.of(this).push(
+       MaterialPageRoute(
+         builder: (context) {
+           return view;
+         },
+       ),
+     );
+   }
+ }
```

```diff_dart
//変更前
      onPressed: () {
-         Navigator.of(context).push(
-           MaterialPageRoute(
-             builder: (context) => const SamplePage(),
-          ),
        );
      },

//変更後
      onPressed: () {
+        context.to(
+          const SamplePage(),
        );
      },
```


## 【遷移先のページにstaticメソッドを記述する方法】

遷移先
```diff_dart
class SamplePage extends StatelessWidget {
  const SamplePage({super.key});

//追加
+ static Route<void> route() {
+   return MaterialPageRoute(
+     builder: (context) => const SamplePage(),
+   );
+  }
```



遷移元
```diff_dart
//変更前
      onPressed: () {
         Navigator.of(context).push(
-          MaterialPageRoute(
-            builder: (context) => const SamplePage(),
-          ),
        );
      },

//変更後
      onPressed: () {
         Navigator.of(context).push(
+         SamplePage.route(),
        );
      },
```

チーム開発などでは、プロジェクトごとのルールがあると思うので、個人開発などで試してみていただけるといいのかなと思っていたりします。
LinuxのBashにOh My Poshを導入する

# 環境
* Zorin OS 16.2
* bash 5.0.17
* Oh My Posh 12.26.2
# 導入
## Oh My Poshのダウンロード
以下のコマンドを実行。
```bash
sudo wget https://github.com/JanDeDobbeleer/oh-my-posh/releases/latest/download/posh-linux-amd64 -O /usr/local/bin/oh-my-posh
sudo chmod +x /usr/local/bin/oh-my-posh
```
## テーマのダウンロード
以下のコマンドを実行。
```bash
mkdir ~/.poshthemes
wget https://github.com/JanDeDobbeleer/oh-my-posh/releases/latest/download/themes.zip -O ~/.poshthemes/themes.zip
unzip ~/.poshthemes/themes.zip -d ~/.poshthemes
chmod u+rw ~/.poshthemes/*.omp.*
rm ~/.poshthemes/themes.zip
```
`~/.poshthemes`にテーマがダウンロードされる。
## フォントの設定
ターミナルのフォントをOh My Poshに対応したものに変更する。

[Nerd Fonts - Iconic font aggregator, glyphs/icons collection, & fonts patcher](https://www.nerdfonts.com/font-downloads)にアクセスし、好みのフォントをダウンロード、インストールする。

ターミナルのフォントをインストールしたものに変更する。

## シェルの起動時にOh My Poshを実行させる
`$ nano ~/.bashrc`を実行する。
nanoエディタが起動するので、末尾に以下を追記する。
```bash
# Oh-My-Posh configuration
eval "$(oh-my-posh init bash)"
```
下図のようになる
![Screenshot from 2022-12-17 09-57-22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2035493/7c1596b1-10f0-6abc-6c56-d192a2d80ddf.png)

Ctrl+x、y、Enterの順にキーを押し、保存して終了させる。

`$ exec bash`でシェルをリロードし、`.bashrc`の変更を適用させる。
成功するとこのようになる。(環境によって多少異なる)
![Screenshot from 2022-12-17 09-43-12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2035493/34c079a3-2c54-dd02-8195-843e06a98114.png)
## テーマを変更する
[Customize | Oh My Posh](https://ohmyposh.dev/docs/themes)にアクセスし、設定するテーマを選ぶ。
`$ ls ~/.poshthemes/{選んだテーマの名前}.omp.json`を実行し、`~/.poshthemes`にテーマが存在することを確認する。(フルパスが出力されれば存在する)

再度`$ nano ~/.bashrc`を実行し、末尾の
```bash
# Oh-My-Posh configuration
eval "$(oh-my-posh init bash)"
```
を以下のように変更する。
```bash
# Oh-My-Posh configuration
eval "$(oh-my-posh init bash --config ~/.poshthemes/{選んだテーマの名前}.omp.json)"
```
下図のようになる(テーマはjblab_2021)
![Screenshot from 2022-12-17 11-25-51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2035493/91ba2847-0b7c-e419-1780-ee063b555424.png)

Ctrl+x、y、Enterの順にキーを押し、保存して終了させる。

`$ exec bash`でシェルをリロードし、`.bashrc`の変更を適用させる。
成功するとこのようになる。(環境によって多少異なる)
![Screenshot from 2022-12-17 11-37-49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2035493/5b7886ae-0dbe-39d4-9e0d-f09ef73c3647.png)

## RootユーザーにもOh-My-Poshを適用させる
`$ su`を実行し、スーパーユーザーのパスワードを入力する。

`$ nano /root/.bashrc`を実行し、末尾に以下を追記する。
```bash
# Oh-My-Posh configuration
eval "$(oh-my-posh init bash --config ~/.poshthemes/{選んだテーマの名前}.omp.json)"
```
Ctrl+x、y、Enterの順にキーを押し、保存して終了させる。

`$ exec bash`でシェルをリロードし、`.bashrc`の変更を適用させる。

テーマが変わっていることを確認したら`$ exit`を実行し、スーパーユーザーを抜ける。


# 参考
[Linux | Oh My Posh](https://ohmyposh.dev/docs/installation/linux)
サーバーの発注ミスで困った話

謎のアドベントカレンダー、第 21 話です。

前回は[ラックの話](https://qiita.com/hmatsu47/items/116b208ae67deb8ad513)でしたが、

https://qiita.com/hmatsu47/items/116b208ae67deb8ad513

今回はラックではなくてラックマウントサーバーの発注ミス話です。

## データセンター設置分のサーバー更新＆増設時

筆者の職場では、自社主導で必要機器の選定を始めてからずっと D 社のサーバーを発注していました。

D 社のサーバー、当時は少し故障しやすかったものの修理対応に関しては迅速に進めることができたので（「当時は」ですが）、特に不満があったわけではないのですが、そのときは

**「別メーカーのサーバーも経験しておこう」**

という話になり、D 社と同じ感覚で BTO したつもりで、H 社のサーバーを発注しました。

設置先は、[以前から話に登場している](https://qiita.com/hmatsu47/items/ded16338d9b10409ac0c#%E3%83%87%E3%83%BC%E3%82%BF%E3%82%BB%E3%83%B3%E3%82%BF%E3%83%BC%E3%81%AB%E5%BC%95%E3%81%8D%E8%BE%BC%E3%82%93%E3%81%A7%E3%81%84%E3%81%9F%E5%9B%9E%E7%B7%9A%E3%81%8C)郊外のデータセンターです。

## データセンターにブツ到着

データセンター到着のタイミングで **「たくさんあるから早めに片付けてね」** との連絡がありました。

確かに数台発注したしこれまでよりも「たくさん」だな、と納得しつつ「わかりました」と返答。

**「HDD 少しずつしか積んでないし設置場所はラックの下のほうだから 1 人で行けるやろ」**

と判断して、1 人で車に乗って出掛けました。

## 段ボール箱の山が積み上がっていた

大小合わせて無数の段ボール箱が、山になって積まれていました。

![cardboard_yamadumi.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123899/82261de9-15f7-66e9-845f-31c48f137912.png)

なんと、 **パーツが全部バラバラで到着していた** のでした。

代理店の営業担当者、指定スペックを満たした上で「安いほうがいいだろう」と考えて構成選択して（メーカーに）オーダーを入れたら「組み立て無し」だったようです。

## まずは仕分けから

何の部品がどこにあるのか分からない状態で、納品書とニラメッコしながら大小様々な段ボール箱の仕分けを開始、です。

（不足や誤りがあった場合のことを考えて）

しかし、スペースが限られる中での作業には限界がありました。

## 諦めて組み立て始めた

大体何がどこにあるのか把握できた時点で仕分けを諦めて、組み立て始めました。

ケースファン、電源、ライザーカード、拡張ネットワークカード、RAID コントローラーカード、HDD、メモリ、などなど。

HDD はドライブ本体とカートリッジが別々にやってきました（つらい）。

段ボール箱の開封で手に無数の傷が。

（軍手や手袋をはめてると小さなネジをとめたりとかいちいち不便で）

## メーカー製とは別納品のマシンでざっくり

納品物の中には、別ルートで到着した「汎用パーツで組み上げたラックマウントパソコン」もあったのですが、汎用パーツで組み上げられたマシンゆえ、（こちらもまた汎用パーツである）ラックマウントレールのネジ穴のうち、どこを使って本体にネジどめしたらいいのか分からず。

探しているうちにレールでざっくり指を切りました（ouch!!）。

## 1 日では終わらなかった

当初はラックマウント＆配線を 2 〜 3 時間で終えて OS のインストールなどを始めようと思ったのですが無理でした。

1 日で片付かなかったことをデータセンターの方に詫びつつ、翌日なんとか組み上げてラックマウント完了、です。

## 多数の段ボールの空箱が残った

とても車に載せて持ち帰れる量＆サイズではありませんでした。

本来はデータセンターのサービスメニューには無かったのですが、責任者の方と交渉して、有償で処分していただくことになりました。

（処分前の整理で段ボール箱を潰しているときにもまた、手や腕に無数の傷が…）

ざっくり発注でざっくり負傷。

痛い。

---

22 日目の記事に続きます。

- **[データセンターの引っ越しで困った話](https://qiita.com/hmatsu47/items/4da27173d8bb92a96ed0)**

https://qiita.com/hmatsu47/items/4da27173d8bb92a96ed0
【ショートカットApp】iPhone ＱＲアドレス 

# iPhone,iPadプログラミング入門アプリ（ショートカットApp）。
iPhone,iPadを持っている貴方！プログラム入門教材としてShortCutsアプリを利用することでブロック（ビジュアル）プログラム([Scratch](https://scratch.mit.edu))の体験が簡単にできます。
実用的ShortCuts（プログラム）作成により学習効果が高まりプログラム開発への興味、モチベーションが継続する等いろいろな効果を狙ってＱＲコード関連の実用的なものを作成します。

vCard形式のアドレスＱＲ表示プログラムを早速作ってみたが・・・・。
（下図**テキスト**の部分がvCardフォーマットで記述）
![スクリーンショット 2022-11-06 17.54.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57467/5705dd2d-0c86-4ca5-a0a7-c7e19a47a983.png)
うぅ〜ん、vCardアドレスとして認識しません。(他のＱＲリーダでも読めない。)




```:　嵌まりどころ
vCard形式(拡張子.vcf)のフォーマットをテキストから生成すると失敗する。

じゃどうするのか？
　
　リスト（配列）を改行で結合すれば問題なく生成できました。

```
下図の**リスト**にvCardフォーマット項目を記述するだけ。

![スクリーンショット 2022-11-06 19.02.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57467/99e948f0-66a0-1411-d452-eb3e5584a9cd.png)
ＱＲの見た目で情報量の違いが一目瞭然ですね？

# 前提
- Mac,iPad,iPhone （ios13）をお持ちの方
- プログラム学習の指導に迷っている人
- ＱＲコードの可能性に興味のある人

　※ vCardの前提知識は[WikiPedia](https://ja.wikipedia.org/wiki/VCard)あたりが参考になります。
　Androidのバージョンによっては若干の方言（差異）がありますので調べてみてください。

```:今回使用したvCard情報
BEGIN:VCARD
VERSION:3.0
N:穂下田　保下夫
X-PHONETIC-LAST-NAME:ほげた
X-PHONETIC-FIRST-NAME:ほげお
TEL;TYPE=CELL,VOICE:090-1234-5678
TEL;TYPE=WORK,VOICE:012-345-6789
EMAIL;TYPE=HOME:info001@hoge.info
EMAIL;TYPE=WORK:info002@hoge.info
ADR;TYPE=HOME:;9-61;ゴールデン町;下北区;東京都;001-2345
END:VCARD
```



# プログラムの説明（順次処理）
#### 上から下に順番に処理されています。
1. リストにvCardアドレスに必要な項目を記述
1. そのリストを改行で結合
1. 結合済みのテキストからＱＲコードを生成
1. QRCodeをクイックルックで表示
※ たったの４ステップ。今回はプログラム制御要素の順次（順番に処理）のみ使用
※ プログラムは順次、選択（条件分岐）、反復（繰返し）の３つの制御を組み合わせて複雑な処理ができる。

# 参考文献(Apple ShortCuts Documents)
※ [ShortCuts App]はApple標準Appです。（安心）
※ [ShortCuts App] iphone,ipadの[ドキュメント](https://support.apple.com/ja-jp/guide/shortcuts/welcome/ios)になります。
ProjectSettings > Player の項目が表示されない

# はじめに
他の開発者から受け取ったリポジトリをCloneした際にPlayerの項目が何も表示されず、メリカリのロゴみたいなアイコンのみが表示される現象が発生しましたので解消方法を調べてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1336886/0b6d9a7d-6ed5-8dc2-f543-1cfd906b847d.png)

# 解消方法
Window > Layoutsの設定値を変更すると正常に表示されるようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1336886/f6e1a09d-7045-8f25-ca53-c29a3256efb2.png)

@akanei_mainさん、情報提供頂きありがとうございました！

https://twitter.com/akanei_main/status/1602162884586311680?s=20&t=9Mcf8JniM3WugLF8YBcJUw
アプリ作成・GitHubへPushまでの流れ

# 1.クラウド9でアプリを作成
下記コードでRailsアプリケーションのディレクトリが作成される
```
rails new アプリ名
```

# 2.複数のホストから閲覧可能にする
rails sでサーバー起動してもエラーが発生するため、下記コードで閲覧可能にする
```ruby:/config/enviroments/development.rb
Rails.application.configure do
    :
  config.hosts.clear #追記
end
```

# 3.GitHubにPushする
1.ローカルリポジトリを作成する
```cloud9:cloud9
git init
```
2.GitHubでリモートリポジトリを作成する
3.ディレクトリ/ファイルの変更履歴を保存する
```
git add .
git commit -m "[Start] アプリ名(例)"
```
4.ローカルリポジトリとリモートリポジトリを紐づける
```
git remote add origin リモートリポジトリURL
```
5.masterブランチをmainブランチに変更する
```
git branch -M main
```
6.リモートリポジトリへPushする
```
git push origin main
```
預金システムのアルゴリズム問題

# はじめに
プログラミング数ヶ月のペーパープログラマーです。

預金システムのコーティングを行いました。
自分の解答と模範解答が異なるのですが、実行結果は同じです。
この場合自分の解答でも正答になるのか分からずご教授頂きたいです！！

# 問題
銀行口座に10万円の預金残高があり、お金を引き出すプログラミングを作成する。
以下の条件を達成するプログラムを作成しなさい。

・お金を引き出すと手数料110円がかかり、
 「○○円引き落としました。残高○○円です」と表示する。
・もし預金残高より多く引き落とされたら「残高不足です」と表示する。
~~~ruby
def withdraw(balance, amount)
  fee = 110　　# 手数料
# 引き落とし額と残高を表示する、もしくは残高より多く引き落としたら残高不足と表示
end

balance = 100000　　# 残高
puts "いくら引き落としますか？（手数料110円かかります）"
money = gets.to_i
withdraw(balance, money)
~~~

# 自身の解答
~~~ruby
def withdraw(balance, amount)
  fee = 110
  direct = balance - (amount + fee)

  if direct >= 0
    puts "#{amount}円引き落としました。残高は#{direct}円です"
  else
    puts "残高不足です"
  end
end
~~~

# 模範解答
~~~ruby
def withdraw(balance, amount)
  fee = 110
  if balance >= (amount + fee)
    balance -= (amount + fee)
    puts "#{amount}円引き落としました。残高は#{balance}円です"
  else
    puts "残高不足です"
  end
end

balance = 100000
puts "いくら引き落としますか？（手数料110円かかります）"
money = gets.to_i
withdraw(balance, money)
~~~

# 解説
自身の解答では
先に変数「direct」に引き落とし後の残高を導く計算結果を代入しています。

その後、変数directが0より大きいか小さいかの条件分岐を実行しています。

模範解答では
条件分岐内の処理で計算式を記述しています。




# まとめ
模範解答では記述量も多くなっているので、自身の解答の方が良いのでは？
と疑問が残ります。。。
ただ、自分の解答に自信を持つだけの知識もありません（笑）

ですので、心優しい方、ご教授お願い致します。
システムだけでなく自分の人生と再度向き合ってみた

# まずはUAFの概要説明
いまアサインされている案件にてUAFというビューマトリクスモデルを使っています。
こんな感じのもの。↓
![R.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2781175/f5f7c831-2ebd-d5a0-9af3-01ae3f2d0630.png)

各１マスには関心事が唯一１つだけになるようにする、という統一化されたアーキテクチャのフレームワークです。
つまり書き手によって違う成果物になるってことがないように関心事の視点、
すなわちビューがしっかりと統一管理できるようにされているもの。

このUAFを使ってモデルを作成し、何度も具体と抽象を行ったり来たりし、
トレーサビリティを取ったりすることで、
リソース資源の組み合わせからなる、具体的な【戦術】に依存しない、
トップレベルにある方針に相当する【戦略】を編み出す。
という、過去にやったことがない経営戦略モデルの作成的なことをやっていたりします。

その過程の中で幾度もの小さな失敗と、上司とああでもないこ～でもないと試行錯誤した中で、
私なりに感じた発見や気づきなどを今回は書いていきたいと思います。

普段の私からは、想像できないような堅苦しい論文形式なのは無視してほしいわ(￣▽￣)

# 失敗
UAFのモデル作成の手順がウォーターフォール方向に何度も行きかけていた。
<img width="659.25" alt="スクリーンショット (441).png (181.4 kB)" src="https://img.esa.io/uploads/production/attachments/5827/2022/12/17/135213/c5b1c970-130b-4d1a-a760-ee11c81fbea4.png">

ウォーターフォール方式で行うと、すべてのビュー
つまり上記のUAFモデルのマトリクスをすべて埋めて考察することになるので、ある意味非効率。
いったん？？なマス目は考えないことにして、
方針を満たすための戦術をその都度考えていくことが求められる。

## 気づき
この考え方は、間違いなく技術選定
方針の能力指標(要件定義で決めた指標)を満たすために、
どのような戦術、言語は何がいいか、verはどれがいいか、フレームワークはどれがいいか
などといった比較検討にも使えるし。

また
・アジャイル開発で、トランザクション手法
・アジャイル開発で、ドメインモデル手法
・ウォーターフォール開発で～～～
などといった戦術選定にも応用できるはずである。

またその都度、わかっているビューだけ明らかにし、その方針を満たすためのモデルを
考えていくスタイルはDDDの活動ともそっくりであると感じた。

またここにクリーンアーキテクチャの思想
【方針戦略には、一切の手段を混ぜない。完全に関心事を分離すべき。】
【安定に依存せよ】という思想を
イイ感じい盛り込んでみると、以下のようなことがいえると思いました。

## 個人考察
もしも戦術(リソースの組み合わせ)部分が変わりにくいようなケースでは、
戦術が安定しているので、そこに依存した方針を立てても問題ない。
クリーンアーキテクチャで言われているのは、
戦術部分が変わりやすいために、そこに依存したような戦略を立てるな。
つまり、【戦略に手段である変わりやすい戦術を混ぜ込むな！】ていう思想であるともいえる。

## ここからわかること
もしも一旦はリソースに依存した、すなわち戦術に依存した戦略を立ててみて、
それ以降、戦略を満たすためには、
わりと頻繁に戦術の種類を変更することが求められるような場合、
クリーンアーキテクチャの【方針と手段の分離】の思想に従って、
戦術に依存しない戦略をボトムアップ式に考えていき、
そこから妥当な戦術を再検討できるようにリアーキテクチャしなくてはならないであろう。
このときにUAFモデルを使いこなすことができれば、
検討のための論理的なモデル図と、判断を下す者に図で説明することも、
各ステークホルダーの関心事に合わせた図を提示し、同意を体系的にとることおできると思われる。

## UAFに課せられた課題
各ステークホルダーがどのビューに関心があるのか、
まずはそこを明確にすることがUAFモデル作成者には求められるであろう。
そして、そのビューが増加したり減少することもあり得る。
その中で、そのステークホルダーにとってもっとも関心が高いビューがどことどこなのか
明確にしていないといけない。

おそらくUAFがあまり使われない要因の一つに
図が多すぎて、どのビューのモデルをどのステークホルダーに見せたらいいのか？
がブラックボックス化されていることがあると思う。

そうならないためにも、UAFモデル作成者は常に【密に】
各ステークホルダーとコミュニケーションをはかり、
各ステークホルダーに応じたビューの管理者、ひいては【ビューの支配者】
になることが求められているように感じる。

## 個人の活動として
現在、わたしが主催代表であり、運営の一人としてやっているコミュニティ
【やるわよ駆動】という空間で、このUAFのモデルに近いことをしています。
このモデルのいい所は、戦略や技術選定だけに留まらず、自分の人生設計などにも使えることが
わたしの研究では判明しています。
おそらく多くのまともな人が、自分の人生戦略として、
【自分と自分の周りにいる大切な人が、より豊かに暮らせる未来の創造】
という共通の方針戦略を持っているのではないでしょうか？
私の場合はここに追加で別の方針も追加で存在しますが、それは内緒ですwww。

よく巷にあるアンチパターン(レッド戦術とユビキタス言語として定義します)とかってやつは、
この方針を満たすうえでやってはいけない常套の戦術、ていう意味で存在していると考えてます。
このレッド戦術は、ほぼほぼどの人においても共通でやってはいけないものだからパターン化されてるんですね。

対してやった方がいい戦術(グリーン戦術といいましょう)に関しては、
それぞれの人によって微妙に戦略が異なります。
共通部分として、【自分と自分の周りにいる大切な人が、より豊かに暮らせる未来の創造】というものがありますが、
それ以外の部分は、人によって異なるんです。

だから一概にグリーン戦術はこれ！！て言えないんです。
私たちは自分自身の力と知恵をもってして、このグリーン戦術を見つけていくしかないんです！！

そのために今回取り上げたUAFモデルのようなツールを使って視える化することが大切なんです。
でないと、そもそも自分の方針、つまりは【ビジョン】てものが認識できないんだから。
Diagnostic switches are active and…の警告が発生する

# はじめに
Playモードを実行しようとした際に以下のワーニングが発生しましたので解消方法を調べてみました。

### エラー内容
```
Diagnostic switches are active and may impact performance or degrade your user experience. Switches can be configured through the Diagnostics section in the Preferences window.
	ProfileOpenCLJobs: False
※DeepL翻訳
診断スイッチはアクティブであり、パフォーマンスに影響を与えたり、ユーザーエクスペリエンスを低下させる可能性があります。
スイッチは、PreferencesウィンドウのDiagnosticsセクションで設定することができます。
```
### エラー表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1336886/1f3ebf61-8679-cacc-6f2a-93c40ae4f44f.png)

# 解消方法
`Preference > Diagnostics > ResetAll`　を実行する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1336886/ea281d9f-b829-c877-3b45-955a1de09290.png)

# 関連フォーラム
https://forum.unity.com/threads/diagnostic-switches-are-active-profileopencljobs.1354289/
pandas.DataFrame.to_excel()で桁数が大きい数値を出力したら値が変わってしまった話


# はじめに

私はデータのラベル付け等のため、DataFrameから一部を切り出して一度`to_excel`にてExcelファイルに出力してデータの手編集を行うことがあります。  
その中で、データの値が元のDataFrameから変更されている事があったため、備忘録として残しておきます。


# 事象

16~19桁の数値が格納されたDataFrameを用意します。

```python
import pandas as pd

df = pd.DataFrame([
    1234567890123456,
    12345678901234567,
    123456789012345678,
    1234567890123456789,
])

display(df)
```

確認のため出力した結果が以下になります。

| | 0 |
|---|---:|
|0	|1234567890123456 | 
|1	|12345678901234567 |
|2	|123456789012345678 |
|3	|1234567890123456789 |


このDataFrameを一度`to_excel`でExcelfileに出力し、そのファイルを再度読み込みます。

```python
# 一度出力
df.to_excel('test.xlsx', index=False)

# 再度読み込み
df_ = pd.read_excel('test.xlsx')
display(df_)
```

すると、値の16桁目くらいから何やら変わってしまうことに気づくかと思います。

| |0|
|---|---:|
|0	|1234567890123456|
|1	|123456789012345**70**|
|2	|1234567890123456**96**|
|3	|123456789012345**7024**|


ちなみに、`to_csv`にてCSVファイルに出力した場合はこの事象は起こりません。

```python
# 一度出力
df.to_csv('test.csv', index=False)
# 再度読み込み
df_ = pd.read_csv('test.csv')
display(df_)
```

| | 0 |
|---|---:|
|0	|1234567890123456 | 
|1	|12345678901234567 |
|2	|123456789012345678 |
|3	|1234567890123456789 |


# 原因

原因としては、Excelの数値型の上限を超えてしまっているためでした。
Excelの有効桁数は15桁となっていますので、今回の例のような16桁以上だと正確な値が保証されません。
[Excel の仕様と制限](https://support.microsoft.com/ja-jp/office/excel-%E3%81%AE%E4%BB%95%E6%A7%98%E3%81%A8%E5%88%B6%E9%99%90-1672b34d-7043-467e-8e27-269d656771c3)

今回、私の元で発生した事例では元データは変更せずに残しており問題はありませんでしたが、結構ゾッとするというか今回知ることができてよかったなぁという次第です。



# 参考資料

- [pandas-dev/pandas : BigInt save by to_excel ,the value has changed. #24122](https://github.com/pandas-dev/pandas/issues/24122)
Typeformについての初歩的な知識

# ジャンル
　フォーム作成、配布のSaaSサービス

# プラットホーム

1. ウェブ版


# 料金 (USD)

1. Free
    - 10レス／月
    - 1ユーザー
    - 書式は無制限
    - 1フォームに10問
1. Basic ($25/月)
    - 100レス／月
    - 1ユーザー
    - 書式は無制限
    - 無制限の質問
1. Plus ($50/月)
    - 1,000レス／月
    - 3ユーザー
    - Typeformのブランディグを削除
    - カスタムサブドメイン
1. Business ($83/月)
    - 10,000レス／月
    - 5ユーザー
    - ドロップオフ率
    - コンバージョントラッキング
    - 優先的サポート

　無料では月間10件しか回答を受け取れないので、実用的ではないですね。

# 概要
　David OkunievとRobert Muñozは、2012年に創業したスペイン・バルセロナに拠点を置くオンラインフォーム構築とオンライ調査に特化したSaaS企業、Typeformの共同設立者です。

　二人は、バルセロナで小さなデザイン事務所を経営していました。あるクライアントから展示会の来場者の情報を収集するためのフォームを作るように依頼され、普通のフォームではなく、映画「ウォー・ゲーム」からヒントを得てよりインタラクティブで会話的なものを作成しました。そのプロジェクトが終わった後、アイデアを更に広げ2年間を費やしました。

　ベータ版を公開すると、人々はフォームを作成し、共有するようになり、2014年2月に正式にローンチすると瞬く間に評判になりました。有料プランは、1年間で年間経常収益100万ドルに到達しました。その後、AppleやAirbnb,Uber,Nikeなどで採用され、年間経常収益3000万ドル、従業員200人の企業と成長しています。

　2018年11月に、新たなCEOとしてJoaquim Lechàを迎えました。彼は、Social PointやGroupaliaといった急成長企業で20年以上の経験を経ており、Typeformの運命を任せるのにぴったりでした。

　Typeformの企業ビジョンは、市場のトレンドに目を向ける、顧客との双方向の対話を維持し、社内からのフィードバックを重要視する。そして、更に重要なことは企業がビジョンに向かって前進しているかを定期的に確認することです。

# 機能
　Typeformは、一度に1つの質問だけを表示し、次々とスライドダウンして質問を提示します。画像や動画を含めたり、質問にセクションを追加したり、下位の質問をグループ化したり、回答内容に基づいて次の質問をカスタマイズする機能があります。

　まずは、テンプレートを使って作成してみます。

<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/4143f234-8852-4b67-d746-8f81702b2b7a.gif"/>


　メニューなどは英語とスペイン語しか対応していないようですが、メッセージの文章には日本語が使えます。テンプレートの文言を日本語化して、そのままでも使えます。

　1問ずつ表示され、操作性もいいので、とても快適に入力ができると思います。

　回答内容は、以下のような表示で見ることができます。

<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/e0fa2afe-525c-b332-3c42-b11f2bba3ca9.png"/>

　その他、様々なサービスと接続することができます。

<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/418ca290-a165-0d95-593f-8e9c0d7f3082.png"/>

　Power Automateには、以下のようなテンプレートもあります。

<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/dd925647-2d8e-3f15-f2ed-ba444e9660fc.png"/>
REST「ゲートウェイに任意のJSON拡張情報をもたせるnodeMetadata設定」のすくりぷとをつくってみたのぉ🌺

__おはよぉ〜🌺__
__おはよぉ〜おはよぉ〜おはよぉ〜っっっ__

# みんなの🌻のぉどあいどる🎀ぱそ美ちゃん！だよ！うふふっ💞

ねぇねぇ？じゅ〜ろくにちのぉ？記事ぃ？見たぁ？
__[にずべぇる](https://twitter.com/44uk_i3)さんの記事なんだけどぉ__？
__[RESTゲートウェイに任意のJSON拡張情報をもたせるnodeMetadata設定
](https://qiita.com/nizveyl/items/c44b20f78e0e52ae945e/patches)__
👆これだよっ

これはねっ？👆の記事の？せつめいのとぉりに 
```target/gateways/rest-gateway/rest.json``` にぃ　記述をね？追記してねっ？
そのぁとに🌺のぉどを再起動（stop/run でいいの）するとね？

```
curl localhost:3000/node/metadata|jq
```
ってやるとね？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2246298/0c69f0a9-d594-8e28-4eb3-29b8e8995858.png)

こんんなふぅに表示されるの🌻

これねっ？```symbol-bootstrap v1.1.9```から🌺できるよぉになったの！

もちろん　うぇっぶらうざからも　見れるよ🌻
https://pasomi.dusan.gq:3001/node/metadata
ここに行くとっ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2246298/a7f08928-5a4d-c2fd-b9bc-0afecfb13c9d.png)
ねっ？🌻うふふっ

それでね？　この？
```target/gateways/rest-gateway/rest.json```
このふぁいるへのぉ追記なんだけどぉ？
ちょっと１文字でも違っちゃうとぉ？
表示しないか💣rest が止まっちゃって のぉどが動かなくなっちゃうの💣💣💣

# なのでぇ⭐あったしぃ！🌺すくりぷとにしてみましたぁ🌻🌺🌻🌺🌻🌺🌻！！！いえいっっっ💐
作業でぃれくとり（target の真上ね？）にぃ
```vi add(ふぁいる名はてきとぉ🌺)```でぇ
👇のぉ？すくりぷとを保存してねっ？

```
#!/bin/bash

cd target/gateways/rest-gateway
delline=$(wc -l rest.json|cut -d " " -f1)
sed -i ''$delline','$(($delline+1))'d' rest.json

cat << __EOD__ > add
  },
  "nodeMetadata": {
    "greeting": "こんにちはっっっ",
    "message": "ぱそ美だよっ　テストメッセージだよっっ",
    "foo": {
      "bar": "うふふっ",
      "baz": {
        "greeting": "Hello! mainnet!",
        "array": [1,2,3]
      }
    }
  }
}
__EOD__

cat add >> rest.json

cd -
symbol-bootstrap stop
symbol-bootstrap run -d

symbol-bootstrap healthCheck
curl localhost:3000/node/metadata|jq
```

```sh add(ふぁいる名はてきとぉ🌺)```ってやるとぉ？

```curl localhost:3000/node/metadata```ってやるとぉ
ほらね！みてみてっ
めたでぇたの内容が💐ひょうじされまぁす！
うぇぶぶらうざからでもぉ見れるよぉになりまぁす！ぱちぱちぱち💐
```http://(あなたののぉどのURL):3000/node/matadata```って入れてねっ？

# ちなみにぃ
```target/gateways/rest-gateway/rest.json```の記述を手入力でまちがっちゃって💣のぉどが動かなくなっちゃった時は
**うふふっ🌺あわてないで！**
```

symbol-bootstrap stop
symbol-bootstrap config --upgrade
symbol-bootstrap run -d
```
これで🌺もとどぉりになりまぁ〜す

# のぉどをじぶんで建てたひっとはぁ🌻やってみて！くださいね💞うふふっ💗
じゃぁね？🌺うふふっうふふっうふふふふっっっ🌻🌻🌻
通信遅延実験 NTPサーバー設定のメモ

# 遅延実験

今回は, 遅延実験を行った際に必要なNTPサーバーでの設定のメモを残しておく.

## 想定環境

Ubuntu20.04LTS

### NTPをインストール

もし, NTPをインストールしていない場合は下記コマンドを実行し, インストールする.

    sudo apt install ntp

### 使用するNTPサーバー

時刻同期に使用したNTPサーバーは国内で一番信頼が高いとされる
国立研究開発法人情報通信研究機構のntp.nict.jpを使用した.

### 設定方法

下記コマンドを実行し, NTPサーバーの設定を書き換える.

    sudo vim /etc/ntp.conf

~~~:/etc/ntp.conf
# Use servers from the NTP Pool Project. Approved by Ubuntu Technical Board
# on 2011-02-08 (LP: #104525). See http://www.pool.ntp.org/join.html for
# more information.
#pool 0.ubuntu.pool.ntp.org iburst #コメントアウト
#pool 1.ubuntu.pool.ntp.org iburst #コメントアウト
#pool 2.ubuntu.pool.ntp.org iburst #コメントアウト
#pool 3.ubuntu.pool.ntp.org iburst #コメントアウト

pool ntp.nict.jp iburst # 追加
~~~

ファイルの変更が完了後, NTPサービスを起動する.

    sudo systemctl enable ntp.service
    sudo systemctl start ntp.service

以上を行うことで, 信頼性の高い時刻同期を行うことが出来る.
テキストエディタに搭載されているコードリーディング関連機能を使いこなそう

テキストエディタにはコードリーディングを補助してくれる機能が搭載されています。コードリーディングを円滑に進めるためには、これらの機能をしっかり活用していきたいです。今回はテキストエディタに搭載されているコードリーディング関連機能について紹介します。

## テキストエディタに求めるコードリーディングのための機能
テキストエディタに搭載されている機能の大部分はコーディングのための機能ですが、コードリーディングのための機能も備わっています。コードリーディングを快適に行うために、テキストエディタには、

1. 表示に関する機能（コードが見やすい、読みやすい、識別しやすい）
2. 検索に関する機能（コードが探しやすい、見つけやすい、アクセスしやすい）

が必要です。本記事では表示に関する機能について見ていくことにします。

### シンタックスハイライト
コードリーディングのための表示に関する機能の代表格は、 **シンタックスハイライト** です。
![syntax.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2988548/1c8b2c22-3c6d-97e6-01c4-902c3daab514.png)
この機能がなければテキストエディタを使う意味がないというくらいコードリーディングには欠かせません。シンタックスハイライトのテーマを選べるテキストエディタも多く、読みやすさを求めた快適なコードリーディング環境を作ることができます。

### ブラケットペアリング
シンタックスハイライトとあわせて視覚的にコードを読みやすくしてくれる機能として **ブラケットペアリング** も便利です。さきほどの図にも *`{}`の対応関係が四角で囲まれてハイライト* されています。プログラムは、小さなコードのかたまりがネストされたような形で記述されていくため、`{}`、`()`、`[]`の対応関係をわかりやすくハイライトしてくれるブラケットペアリングは、コードの読みにくさを軽減してくれるため、コードリーディングに必須の機能と言えるでしょう。

### インデントガイド
さらに **インデントガイド** も視覚的にコードの位置関係をわかりやすくしてくれる機能です。インデントガイドがあれば、どこからどこまでが1つのコードのかたまりであるかを *縦方向の補助線等* によってひと目で把握できます。ブラケットペアリングが選択した行や位置に関連したカッコだけをハイライトするのに対し、インデントガイドは常時表示されているため、カーソル移動のような選択操作が不要なところも便利な点です。

### コードフォーマッター
これらの機能を十分に活かすために、 **コードフォーマッター** を使いこなすと良いでしょう。コードを整形してスタイルガイドに沿った形に変換してくれます。代表的なコードフォーマッターは、[Prettier](https://prettier.io/)です。実際の開発現場では必ずしもOSSのように、スタイルガイドに沿った形でコードが書かれていない場合もありますので、**せめてコードリーディングのときだけでもコードフォーマッターを使うようにしましょう**。読みやすさが格段に改善します。ちなみにMinify機能によってコンパクトにまとめられたCSSやJavaScriptのコードもコードフォーマッターがあれば、かんたんに読みやすく復元（整形）してくれます。いろんなサイトのCSSやJavaScriptのコードを勉強する際に便利です。

### ペイン
最後に **ペイン** について紹介します。ペインは画面内の表示領域を分割して表示する機能です。多くのテキストエディタに搭載されている機能ですが、コードリーディングの際に非常に便利ですのでぜひ活用していただきたいです。

Visual Studio Codeの場合は以下のようにメニューのView（表示） - Editor Layout（エディターレイアウト） - Split Right（分割（右））を選択すると画面を左右方向に2画面（2つのペイン）へ分割して、もとのファイルを右側に追加で表示してくれます。
![pane-menu.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2988548/a615d4ce-efe4-eab0-9b52-25d9b46895a6.png)
例えば以下の画像の左側のペインの`kill`というメソッドのコードを読んでいて、途中で現れた`kllOnWindows`というメソッドがどんな処理を行うか調べたいときには、右側に`killOnWindows`のコードを表示しながら読み進めることができます。
![pane.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2988548/f6c76065-9c6c-75b0-7feb-7fec20e84109.png)
`killOnWindows`のような長い処理のコードをコードリーディング中にまるごと覚えるのは難しいです。**ペインで同時に表示できると視線移動だけで2つのコードを確認しながら読み進められるのでコードリーディングがかなり楽になります**。

## コードリーディング関連機能の進化
テキストエディタに搭載されている、コードリーディングのための5つの機能について紹介しましたが、すべて活用できているでしょうか？コードリーディングがうまくできないという課題の要因の一つに「コードリーディング関連機能が足りない（使いこなせていない）」というものがあります。（参考：[いつ、どんなときにコードリーディングしていて困っているか？](https://qiita.com/YY-EN40P/items/8fa3abc61e9ed26acac4)）まずは現在入手可能な機能を使いこなすことを心がけていきましょう。

テキストエディタも万能ではなく、少しずつ進化を遂げていますが、まだ足りない機能があると思います。冒頭でも触れたように、コーディングのための機能は充実している一方で、コードリーディングのための機能はまだまだ少ないです。

さきほどペインの使い方で紹介したような、**コードリーディングの手順に沿った機能やユーザビリティには改善の余地があります**。コードリーディング専用ツールとして開発しております[Read it easy](https://www.readiteasy.app)では、ペインをもっと手軽に使えるように追加ボタンを常設したり、ペイン自体をドラッグ＆ドロップで入れ替えて、読みたいコードを常に画面中央へ持ってこられるような工夫を凝らし、コードリーディング体験をツール側で改善するよう取り組んでいます。

これからもテキストエディタは進化を続け、コードリーディングのための機能が増えていくと思いますので、プラグイン等をうまく活用してツールに頼りながらコードリーディング体験を改善していきましょう。
Ruby 預金システムのアルゴリズム問題

以下の条件を達成するプログラムを実装しなさい

銀行口座に10万円の預金残高があり、お金を引き出すプログラムを作成します。
・お金を引き出すwithdrawメソッドを作成する
・お金を引き出すと手数料110円かかり、「◯◯円引き落としました。残高は◯◯円です」と表示する（残高は手数料を引いた額を表示します）
・もし預金残高より多く引き落としたら「残高不足です」と表示する
・以下にヒントを用意するので参考にしてください

```ruby:雛形
def withdraw(balance, amount)
  fee = 110　　# 手数料
# 引き落とし額と残高を表示する、もしくは残高より多く引き落としたら残高不足と表示
end

balance = 100000　　# 残高
puts "いくら引き落としますか？（手数料110円かかります）"
money = gets.to_i
withdraw(balance, money)
```


```ruby:自分の解答
def withdraw(balance, amount)
  fee = 110  # 手数料
  if balance >= amount
    puts "#{amount}円引き落としました。残高は#{balance -(amount + fee)}円です"
  else
    puts "残高不足です"
  end
end

balance = 100000  # 残高
puts "いくら引き落としますか？（手数料110円かかります）"
money = gets.to_i
withdraw(balance, money)
```

```ruby:模範解答
def withdraw(balance, amount)
  fee = 110
  if balance >= (amount + fee)
    balance -= (amount + fee)
    puts "#{amount}円引き落としました。残高は#{balance}円です"
  else
    puts "残高不足です"
  end
end

balance = 100000
puts "いくら引き落としますか？（手数料110円かかります）"
money = gets.to_i
withdraw(balance, money)
```

# 解説
```
balance >= (amount + fee)
```
これは、引き落としたい金額 + 手数料が残高100,000円以下という計算式です。

```ruby
balance -= (amount + fee)
# balance = balance - (amount + fee)と同じ処理がされます。
```
これは、引き落としたい金額 + 手数料が残高100,000円ちょうどのときという式です。自分の解答の中では、この部分を考慮できていませんでした。
「 -= 」の部分があまり見慣れないなと感じたのですが、落ち着いて考えれば納得できました。

if文の中で式をまとめておけば、
「◯◯円引き落としました。残高は◯◯円です」
この部分はスマートなコードでまとめることができます。

模範解答のように読みやすいコードを書けるようになる必要があるなと痛感しました。
可読性を上げる方法はまだまだあるぞ、と。もっと勉強して、考えて、スキルを身に付けます。
【Laravel】DB::rawを使用して暗号化

\DB::raw()を使うと直接SQLを記述することができます。
その中で暗号化のSQLを記述しています。
```php
use App\Models\UserModel;

public function save($user)
{
    $key = config('app.key'); //暗号化などに使用するキーを取得しています
 
    UserModel::create([
        'name'  => \DB::raw("HEX(AES_ENCRYPT('{$user->name}', '{$key}'))"),
        'email' => $user->email,
    ]);
}


```
[症状]github codespaces でブラウザのプレビュー使えず　原因はCookieがブロックされてたため

# 症状
フロントエンド(Next.js+typeScript)の開発をしてる時、Codespaceでブラウザのプレビューが機能していませんでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/63102377-0655-c2e3-a7ec-82eadfc5a366.png)

``` エラーメッセージ.txt
Error loading webview: Error: Could not register service workers: NotSupportedError: Failed to register a ServiceWorker for scope
```

# 開発環境
IDE Github CodeSpaces
ブラウザ：google chrome 108.0.5359.99
OS:Windows10
# 原因
Cookieがブロックされていたため。

# 対処
ブラウザ側でcookieの設定します。
以下google chrome 時での設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/f054451a-112b-10a4-935c-6b7e64d2acd6.png)

Issueに類似した症状があったので参考。


https://github.com/orgs/community/discussions/26316

# 直ったときの様子
今まで普通に使えていたのに急にCookieでNGになるのがようわからんですね。
そもそもCookieとかいじってない（はず）だし。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/8857fc49-c206-c4f1-3404-bc4268b5c7f6.png)




# 他にやったこと
ローカル環境のvscodeにも似たような症状があるようなので試しました。
１．CodeSpaceのインスタンスの再生成→エラーのまま
２．Ctrl＋Rで再起動→エラーのまま
コントローラーの作成_rails

# コントローラー作成する

:::note info
info
ターミナルにて作成したいアプリのディレクト内に移動している事が前提です。
:::
:::note warn
warn
以下のコントローラー名の命名規則は **複数形**を使用します。
:::

```
[terminal]
rails g controller [コントローラー名]
```
[WIP] Google Nest Hubの睡眠データをAPIで取得する


# Google Nest Hub
Google Nest Hubの第2世代から、`Motion Sense` を通じて、かなり精度の高い睡眠データを取得できるようになりました。
2022年12月31日までは、睡眠データの連携は無料だが、2023年からはGoogle Fitのプレミアムプランに統合されるらしく、月額で10$(日本の場合は700円だったはず)になるらしいです。

https://support.google.com/googlenest/answer/10357288?hl=ja&co=GENIE.Platform%3DAndroid

https://support.google.com/googlenest/answer/10388741

非接触のデバイスなのに、ここまで精度高く睡眠データを取れるのは驚きです。
iOSアプリの Google Fit アプリで Gogle Nest Hub にログインしたGmailアカウントと同じアカウントでログインして見たデータです。

![sleep.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239663/9aecb6fb-bad4-ccc2-4b6b-a8f8f95748dd.jpeg)

https://support.google.com/fit/answer/10519339?hl=ja

# Google Fit API
Google Nest Hubの睡眠データを取得するためには、`Google Fit API`の`Rest API` を使用します。

確認事項
- `Google Fit API`でデータを取得するためには、NestHUbデバイスにて、`アシスタントによる睡眠データへのアクセス`をオンにしなければいけません。

https://developers.google.com/fit

https://developers.google.com/fit/rest/v1/get-started

## Google API Consoleのセットアップをする
1. プロジェクトがない場合は、新しく作成してください。
2. 作成したプロジェクトに対し、 「FItness API」 を追加してください。(APIを有効にしてください)
![スクリーンショット 2022-12-17 10.46.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239663/0b68c7c2-9c1f-f8a2-3afe-0aeb5cd9e18f.png)
[管理]ボタンを押す
![スクリーンショット 2022-12-17 10.47.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239663/4652b0e3-92a5-bf12-0c37-673f41a7215e.png)
[認証情報]のページに遷移し、
[新しい認証情報] をクリックし、[OAuth クライアント ID] を選択する。
[アプリケーションの種類] で、[ウェブ アプリケーション] を選択する。
![スクリーンショット 2022-12-17 10.48.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239663/a7a5c085-93c4-b635-0514-7247bf3bcd08.png)

[OAuth同意情報]のページに遷移し、セットアップしていく
1. OAuth同意画面 => `アプリ情報`・`デベロッパーの連絡先情報` の入力
2. スコープ => Fitness APIのスコープを追加する。
![スクリーンショット 2022-12-17 10.53.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239663/6e05ba2a-81bb-697e-e4e2-821bec26430f.png)
追加後はこのような画面になっているはず
![スクリーンショット 2022-12-17 10.54.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239663/436faa13-8f48-a973-f548-b95768246f6b.png)
3. テストユーザー => よしなに(Google Nest Hubに登録したメアドを追加してください) 
4. 概要 => よしなに
 
## REST APIのセットアップ

## OAuth Playground で REST API を試す