OmniAICreator/Qiita-1.07M huggingface dataset:
Python 3.11 で tkinter 使おうとしたらハマったので memo

python で GUI アプリを作る必要に迫られたが、情弱なので、標準ライブラリの tkinter とやらがあるらしいぞ、から、実際に動かせるまでが長かったのでメモ。

#### 環境
`pyenv` は `anyenv` 経由でインストール。
`breｗ` で `python-tk` をインストールするのが早いらしいが、pyenv で複数バージョン使えるようにしてる意味... て話なので。。

| | version
| -- | --
| Machine | M2 Macbook pro
| OS | macOS Ventura 13.0.1
| pyenv | pyenv 2.3.6-15-g13d85686
| python | 3.11.0

#### 結論:　うまくいったやり方

```zsh
% brew install tcl-tk
...
% export TCLTK_LIBS="-L/opt/homebrew/opt/tcl-tk/lib -ltcl8.6 -ltk8.6"
% export TCLTK_CFLAGS="-I/opt/homebrew/opt/tcl-tk/include"
% pyenv install 3.11.0
python-build: use openssl@1.1 from homebrew
python-build: use readline from homebrew
Downloading Python-3.11.0.tar.xz...
-> https://www.python.org/ftp/python/3.11.0/Python-3.11.0.tar.xz
Installing Python-3.11.0...
python-build: use tcl-tk from homebrew
python-build: use readline from homebrew
python-build: use zlib from xcode sdk
Installed Python-3.11.0 to /Users/seiro/.anyenv/envs/pyenv/versions/3.11.0
```

これで無事 `tkinter` を使った GUI アプリが立ち上がった。

[pyenv の Issue](https://github.com/pyenv/pyenv/issues/2499#issuecomment-1292424083) に載ってた。
python3.11 では pkgconfig の `--with-tcl-tk-*` サポートはなくなっちゃったらしい？

#### うまくいかなかったやり方

ぐぐって出てきた、 Qiita や Zenn の記事のやり方（以下のように LDFLAGS/CPPFLAGS/PKG_CONFIG_PATH/PYTHON_CONFIGURE_OPTS 環境変数を設定する方法）はどれもうまくいかなかった。。
```zsh
export PATH="/opt/homebrew/opt/tcl-tk/bin:$PATH"
export LDFLAGS="-L/opt/homebrew/opt/tcl-tk/lib"
export CPPFLAGS="-I/opt/homebrew/opt/tcl-tk/include"
export PKG_CONFIG_PATH="/opt/homebrew/opt/tcl-tk/lib/pkgconfig"
export PYTHON_CONFIGURE_OPTS="--with-tcltk-includes='-I/opt/homebrew/opt/tcl-tk/include' --with-tcltk-libs='-L/opt/homebrew/opt/tcl-tk/lib -ltcl8.6 -ltk8.6'"
```

もちろんそれらの記事が悪いわけではなく、python 3.11 での変更が理由なのだろう。おとなしく 3.10.x を使っておくべきだったが、対応中はそんなことわからんかったんや。。。

上記 Issue の PR を見た感じでは、これらをうまく動かせるように修正しててそれが pyenv 2.3.6 に入ってるように見えたんだけど、どうして動かなかったのかまでは未確認。
あるいは 2.3.7 なら正しくインストールできたのかな？
UI制作時に意識していることやポイント

こんにちは、オークファンでWebデザイナーをしています@af_takeです。
ここ最近は自社で運営しているサービスサイトのUI改修や新規機能追加のプロジェクトを多く担当しています。
そこで普段UI制作時に心がけていることや、ポイントなどを紹介してみたいと思います。

## UIデザインとは？
最初にそもそもUIデザインとはというお話ですが、UIとはUser Interface（ユーザーインターフェース）の略で、サービスやプロダクトとユーザーをつなぐ接点のことを指し、Webサイトであれば、表示されるデザインやレイアウト、フォントなど、商品であれば外観などを指します。
UIデザインは、サービスやプロダクトをユーザーが快適に利用できるように設計することを意味しています。

Webサイトの場合、良いUIとは、**ユーザーが迷ったり考えたりせず操作でき、かつ見やすい設計になっていること**とされています。
ということで、いくつかUI制作時のポイントなどを挙げてみたいと思います。

## １.サイトのデザインルールに則った制作
それぞれのサイトには色・文字・レイアウトなど様々なデザイン要素について細かなデザインルールが設けられています。またボタンなど頻出するデザインパーツに関しては、予めコンポーネントと呼ばれるデザインパーツが用意されています。

サイトのデザインルールやコンポーネントが無いと、ページによって全く違うデザインになってしまったり、ユーザーもその度情報を整理する形になるので直感的な操作が出来ません。

そのためサイトのデザインルールに則った制作を行い、サイト全体の一貫性を保ち、ユーザーが直感的に操作できるサイトにしていきます。

またデザインルールやコンポーネントを用意しておくことで、最初からデザインを作ったり、コーディングを一から行う必要が無くなるので、制作スピードを短縮できる側面もあります。

![ui_design_point01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/913908/ecd9347d-5b81-f13c-58ff-c8fda6e646d3.png)


## ２.表示のバリエーションを意識する
基本的なことですが、サイト内で表示されるコンテンツにはアカウントの状態などで、動的に表示が変わる場所が多くあります。
UI制作時にはこの要素が増えたらどうなるか？または表示されなかったらどうなるか？この文字数が増えたらどうなるか？など、仕様をきちんと把握した上で、さまざまな表示のバリエーションに耐えうるデザインを作成することが重要です。

## ３.情報にコントラストをつける
テキストをただ並べただけのUIは、情報の優先順位が曖昧で、ユーザーが文章を読み解いて情報を整理することになります。
しかしそれはユーザーにとってストレスになってしまいます。
テキストに適切なサイズとウェイト、カラーを設定して、情報にコントラストをつけてあげることで、ユーザーの情報取得をサポートすることができます。

![ui_design_point02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/913908/cfae2018-8601-26d5-b06f-07b761bf536d.png)


## ４.配色は70-25-5
配色は、「ベースカラー：70%」「メインカラー:25%」「アクセントカラー:5%」の比率で配色すると美しい配色になると言われています。
またバランスの良い配色は綺麗なだけでなく、重要なものをしっかりと目立たせることができます。

![ui_design_point05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/913908/870799c8-9bc7-3239-6285-e4f1dfab68fd.png)




## ５.タップ領域
スマホ向けのUI制作時になりますが、ボタンなどのタップ領域が小さいと、タップしずらかったり、誤タップの原因にもなります。
他のサービスのデザインガイドラインを見てみると、Appleの「Human Interface Guidelines」では44px以上。Googleの「Material Design Guideline」では最低でも48px以上のタップ領域を設けることが決められています。
作成したボタンをタップした時に押しにくくないか、誤タップが起きないか実際に使うイメージをしながら作成することが重要です。

![ui_design_point03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/913908/eef58c65-8f6b-3d9d-989b-c2185c7d20b6.png)


## ６.迷ったら見比べる
UI制作時はXDを使用していますが、XDはリピートグリッドなど便利な機能を使って簡単にレイアウトが作れたり、Photoshopなどと比べて動作が軽く、さくさく作業が行えます。
そんなこともあり、迷った時やなんとなくUIが見づらい時は、作成したデザイン（アートボード）を複製し、編集して見比べてみるということをよく行います。
見比べることで、作っているときには気づかなかった点や、良し悪しが見えてくることがあります。

![ui_design_point04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/913908/5121abda-5be9-dcd3-83eb-f0c84f390495.png)


## 最後に
思いついたUIデザインのポイントや心がけていることをいくつか上げてみましたが、他にもUIを良くするポイントはたくさんあります。この記事を読んでちょっとUIに興味でてきたぞや、制作のヒントになったぞという箇所があれば幸いです。
最後までお読みいただきありがとうございました！それでは良いクリスマスを〜🎄
これからTypeScriptを始める４つのヒント

## はじめに

今回は、数え切れないほどのチュートリアルを見たが、それでもやっぱりTypeScriptをどう使い始めばいいか分からない方向けに書いてある記事です。自分の経験を基づいて、役に立つヒントをいくつ紹介します。

## ① テンプレートを使用

TS経験者でも、プロジェクトの初期化には難しいところがあります。用意されているテンプレートを使えば、適切なTSコンフィグが提供され、すぐにコードが書ける状態に入れます。ほとんどのフレームワークはテンプレートを用意しているので、積極的採用しましょう。

## ② 厳格モードを有効

[厳格モード](https://www.typescriptlang.org/tsconfig#strict)は、名前通りにより厳しいルールが適応されます。最初にキツイかもしれませんが、書いたソースコードの型安全が保証され、TypeScriptのベストプラクティスに従うことができます。

厳密モードを有効にするには、`strict: true` が `tsconfig.json` 内にあることを確認しましょう。

## ③ デフォルトでJavaScriptを書く

TypeScriptでは、ソースコードを基づいて型を推測するほど賢いなので、積極的に型を宣言することが必要ありません。TypeScriptがエラーを吐くか、型を使い回しない限りは型宣言を最低限にしましょう。

## ④ ソースコードの近くに型を宣言

型宣言は、別途 `types.ts` に定義するより、コードの近くに定義しましょう。コードを参照・修正する際に、型宣言が近くにあると型を探す手間が省けます。
外資就活チームのスクラム開発 ~この半期でチームで変えたこと~

# はじめに
この記事は[Howtelevision Advent Calendar 2022](https://qiita.com/advent-calendar/2022/howtelevision) 16日目の記事です。

初めまして、外資就活開発チームでリードエンジニア兼技術負債解消プロジェクトチームでリーダーをしております藤原と申します。

ハウテレビジョンにはほぼ未経験から5年ほど前に入社し、現在は技術面ではfrontend領域をメインで触ったり、エンジニアリングマネジメントやプロジェクトマネジメントも並行して行っています。

趣味は旅行とサッカー観戦です。

旅行は海外渡航約60ヵ国、サッカー観戦は本記事執筆時現在、サッカーW杯観戦のためカタールに長期滞在し、リモートワークで働きながらサッカー観戦を楽しんでおります。

カタールでの仕事の話は、[本AdventCalender6日目](https://qiita.com/ryo_fujiwara/items/8ee358bf156dff53dc69)の記事をご参照ください。

# 今回お話しすること
「スクラムチーム開発」の観点で、この半期外資就活チームで変えたことをお話しします。

元々外資就活の開発チームは2チーム体制(C向けの開発チームとB向けの開発チーム)で分かれていましたが、その2チームがこの夏頃に合体しました。私は元々B向けの開発チームのリードエンジニアをしていましたが、合体後は外資就活チーム全体を担当するリードエンジニアとなりました。

現在外資就活チームは13名のエンジニア(インターン生含む)が所属しており、日々一緒にプロダクト開発に勤しんでおります。

合体後のこの半期いくつか課題を感じる部分があり、その改善に向けてメンバーと共に動きました。

# スクラムチーム開発
スクラムチーム開発を行っていく上でいくつか課題があり、既存の良い部分は残しつつ下記のような変更を行いました。

## ①チーム全体でスプリントゴール達成を意識できるように
「チーム全体がスプリントゴールを達成するために主体的に考える」ようなチームにしようとアクションしました。

それまでは定めていた目標に対して達成しようという強い意志がなく、間に合わないものは何となくズルズルと引き伸ばしされるような状態がありました。

これを改善するため、毎日行っているデイリースクラムでは、これまで進捗の報告に留まっていたものを、「ゴールに対して達成できそうか」「達成できなそうならその原因は何か、どうすればよいか」を意識的に話し合うように変更しました。

またスプリントMTG時に、ファシリテートを持ち回りで行ってスプリントゴール達成に主体性をもちやすくするなど「チーム全体がスプリントゴールを達成するために主体的に考える」ようなチームにしようとアクションしました。

さらにこれはチーム横断でやっていることですが、スクラム開発に関する知見を得るために読書会を行っています。メンバーもこの読書会に参加し、スクラム開発への理解を進めています。

## ②見積もりのやり方修正
「見積もりの精度が不正確」という課題に対して見積もり会のやり方を修正しました。

これまで見積もりはざっくり行うという方針で行っていましたが、どうしても見積もった数字に対して作業内容が多すぎたり、正確性に欠けるところがありました。

Issueごとに全員で作業内容の共通理解を持たせるべく、作業内容を議論して切り出し、懸念や不明瞭な点を洗い出して細かく見積もりを行っています。

これにより見積もりはより正確なものとなり、作業内容が明確なので実装時もスムーズに実装ができるという利点がある。

時間がかからないよう少人数でグループを分けて、グループごとに見積もりを行うようにもしました。

## ③エンジニアが企画面により関わっていくように
エンジニアが企画されたことをただ開発している状態になっているという点に課題を感じました。

企画提案が出ない理由として「ユーザーの理解の不足」があると考えていて、エンジニアメンバーがユーザーヒアリングに参加し、ユーザーの理解を高められるようにしました。

また企画について話し合う機会もなかったので、企画会議という「企画について話し合う会」を行い、PdMが叩きを作ってくれた機能に対してみんなでアイデアを出し合ったり、企画についての提案を募ったりするようにしました。

その結果、エンジニアがよりプロダクトへの理解・意識を持つようになり、全員でプロダクトをより良くしていこうという流れが醸成されつつあります。

## 最後に
今回紹介したものは、チームをよりよくするために行ったことの一部に過ぎません。理想の状態に向けて日々思考しております。

一緒に目標達成に向けて動いていただけるようなエンジニアメンバーをまだまだ募集中です。 ご興味を持っていただけましたらぜひお気軽に弊社採用ページよりエントリーをお願いします。

[https://recruit.howtelevision.co.jp/](https://recruit.howtelevision.co.jp/)
Dynamic Linksで発行したURLのクリック数をPythonで確認


# はじめに

Firebase Dynamic Linksと聞くと、iOSアプリやAndroidアプリ周りでのトラッキングなどでよく使われている印象ですが、弊社では営業業務の効率化などに使っています。

具体的には、アプローチ先に送った資料のURLがクリックされているかなど、SFAでできるようなトラッキングの機能を試す際に使っています。スタートアップの初期や個人開発だとSFAの導入はハードルが高いため、導入せず類似の機能を試すことができるというのがかなり便利です。

今回の記事では、実際の業務でDynamic Linksを使って、実装、運用をする際に工夫した点などについて書いてみました。


# ソースコード
以下で記述しているソースコードは、Dynamic Linksで発行した追跡URLのクリック数をプログラムで確認できるというものです。

```Python
import json
from google.oauth2 import service_account
from google.auth.transport.requests import AuthorizedSession


if __name__ == '__main__':

    url = "クリック数を見たいURL"
    
    scopes = [
        "https://www.googleapis.com/auth/firebase"
    ]

    # 今回はコードに直書きしていますが、環境変数や使うインフラ環境に合わせてここは設定してください
    # またお使いのアカウント情報に沿って下記情報を書き換えてください
    service_account_key = {
        "type": "認証タイプ",
        "project_id": "プロジェクトID",
        "private_key_id": "プライベートキーID",
        "private_key": "プライベートキー",
        "client_email": "クライアントEメール",
        "client_id": "クライアントID",
        "auth_uri": "auth URL",
        "token_uri": "トークンURL",
        "auth_provider_x509_cert_url": "auth provider x509 cer URL",
        "client_x509_cert_url": "client x509 cert URL"
    }

    credentials = service_account.Credentials.from_service_account_info(service_account_key, scopes=scopes)
    authed_session = AuthorizedSession(credentials)

    # リクエストのURLに書き換え
    request_url = 'https://firebasedynamiclinks.googleapis.com/v1/' + url.replace('://', '%3A%2F%2F').replace('/',
                                                                                                               '%2F') + '/linkStats?durationDays=30'
    response = authed_session.get(request_url)
    result = json.loads(response.text)
    
    count = 0

    # クリック数が存在しない場合は0を入れる
    if 'linkEventStats' in result:
        # 中を確認
        print(result['linkEventStats'][0]['count'])
        count = result['linkEventStats'][0]['count']
    else:
        count = 0
    
    print('クリック数は' + count + '回です。')


```

リクエストを送るURLのdurationDaysステータスで~日以内のクリック数という指定ができます。
上記のソースコードでは30日以内のクリック数を取得しています。

```
durationDays=30
```

# 業務で使う場面
Dynamic Linksを使う際、Firebaseのコンソールからリンクを発行し、クリック数などのアナリティクスも同じコンソールから確認することが多いと思います。

しかし、はじめにで話したような営業効率化の場面で使う場合、大量にURLを発行、そのURLのクリック数などをスプレッドシートで一覧管理というような業務フローが発生しました。この作業を人力で行うことで、運用工数が多くかかってしまっていました。
コストを下げようとし、結果的にコストが上がってしまったら元も子もないですよね。

上記のような状態を防ぐため、PythonやGASなどでURL発行を機械的に行い、アナリティクスを付与していく必要があります。
またその場合、スプレッドシート上でURL発行からクリック数の確認ができた方が、業務を実際に行う非エンジニアの方にも使いやすいと思い、クリック数もプログラムで付与するという方法をとっています。

営業効率化の面で話を進めてきましたが、実はプログラムで発行したURLのクリック数はコンソールで確認ができないという面があるので、そもそもこの方法しか術はないのです...

この効率化によって、SFAを導入せずとも同じ様な機能を、低コストで実現することができました。


# さいごに

弊社では、営業効率化や営業支援といった部分を、テクノロジーの力で一緒に解決してくれる仲間を募集しています。
Go言語、Pythonでのバックエンド開発がメインになります。詳細は募集の方をご覧ください。

https://en-gage.net/peer-lodge/work_2693464/?via_recruit_page=1
Minecraftマルチプレイをしていたら善良なポーランド人クラフターが遊びに来た件

ゲームサークルで運用しているMinecraftマルチプレイサーバでは、新規に来た人が入りやすいようにホワイトリストは有効にしていない。それゆえ、面白いトラブルが起こることもある。

# ポーランド人がやってきた。
このサーバ、初めて入ったら看板に名前を書くのが決まりになっているのだが、なんだか見覚えの無い名前がある。IPアドレスから推定するとポーランドからの来客だった。<br>
幸いなことに荒らされることは無く、しかも言葉が通じないはずなのにサーバに初めて入った日と名前を看板に記すという意図が伝わり、わざわざ書き残してくれた。それ以来彼は我々のサーバの中で善良なポーランド人クラフターとして知られることとなった。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/370590/28769ff2-6991-e66f-e526-ee0b93c13ca9.png" width=60%>
彼の名は永遠に刻み込まれている。


# 対策の必要性
今回は荒らされはしなかったし、荒らし対策プラグインが入ってはいる。しかし、こんな善良な人だけが入ってくるとは限らない。また、オーストラリアIPからのログインという事案も発生した。その際にたまたまログインしていたサーバの住人がおり、接触に成功している(チャットで呼びかけたらすぐにログアウトしてしまった模様)。今後も荒らされないという確証は無いので、対策を講じることとした。<br>

対策としてはまずホワイトリスト制が考えられるが、当時は新歓期でありせっかく来た新入生をホワイトリストに入れるのが遅くなってしまってログインできず、Minecraftへのやる気が失せてしまうという事案を避けたかった。そのため、まずは海外IPを弾くという方法を選んだ。

# 国内IPのみ通す設定
まず、ufwを利用してファイアウォールを設定していることを前提とする。ufwはiptablesのラッパーであり、ufwを利用するとiptablesよりも簡単にファイアウォールを設定できる。

[[Ubuntu] ファイアウォール ufw で海外からの接続をブロックする | パソコン鳥のブログ](https://pcvogel.sarakura.net/2020/09/09/32067)にある手順に従って設定をした。
[世界の国別 IPv4 アドレス割り当てリスト](http://nami.jp/ipv4bycc/)を利用してiptablesのルールを作成した。このルールによって、リストに含まれるIPアドレス(=国内のIPアドレス)は`RETURN`され、それ以外のIPアドレス(=リストに含まれないIPアドレス=海外のIPアドレス)は`DROP`される。
`RETURN`されたIPアドレスにはufwのルールが適用されるように優先度を設定した。ufwでは、Minecraft用のポートとSSH用のポートのみ通すように設定している。

ここで注意する必要があるのは、各国に割り当てられるIPアドレスは変動するということである。そのため、ときどきリストが更新されるのでそれを適用し直す必要がある。また、NURO光海外IP問題などの影響をもろに受ける。通したいIPアドレスがリストによって弾かれてしまった場合、個別で設定する必要がある。

# その後
この設定をして以来、知らない人がサーバに入ってくることは無くなった。また海外からのアクセスを全て弾いているので、当てずっぽうでユーザー名とパスワードを入れてくるSSHログイン未遂も減った。その分iptablesに`DROP`される通信が増えた。それでもSSHログイン未遂は0ではないので、国内で怪しいことをしている連中がいるということである。
Airtableでenebularの使いどころ: 予約管理編

## 予約管理もAirtableでやりたい

こんな要望もよく聞きます。予約管理アプリなんかWeb上にたくさんあるでしょ？と最初そう思って色々試してみたんですが帯に短し襷に長し、以下のような理由でピッタリのものがありません。

- 一概に予約と言っても様々な形態が存在する
    - 人の枠予約: レッスン、サロンなど
    - 施設や物品の枠予約: 結婚式、民泊、シェアサイクルなど
    - 待ち行列: 医院、飲食店など
    - 購入予約: チケット、書籍など
- 決済のタイミングも色々ある
    - 予約の都度決済するタイプ（キャンセル時は返金する）
    - 事前にチケットを購入して消費するタイプ（しかも予約時は消費されずサービスを受けたら消費する）
    - 事前にチケットを購入するが診察するまで消費金額がわからないタイプ
    - 予約時に決済は関係ないタイプ
- 予約状況をどこまで公開するか？（競合他社の目を気にする）
    - 全て公開
    - 埋まり具合は全て公開
    - 会員登録を設けて会員には全て公開
- 誰が予約できるか？（競合他社の妨害予約を気にする）
    - 会員登録を設けて会員のみ予約できる
    - 誰でも予約できる

見てお解りの通り待ち行列や購入予約は単純なのでパッケージアプリ化しやすいですが、人や施設のスケジュール枠予約は上記の条件の組み合わせが多岐にわたり急に難易度が上がります。

今回はAirtableで人のスケジュール枠予約の管理を行う話です。

### 予約画面

まず、予約画面。

![スクリーンショット 2022-12-12 10.44.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21109/4e7a728a-0749-c03e-1c57-f8a71d6fc038.png)

この予約画面は[勤怠管理編](https://qiita.com/joeartsea/items/c28245cad290b5ae3293)の打刻画面と同じように[Node-REDで開発してます](https://www.slideshare.net/joeartsea/uibuilder)。事前にAirtableに登録されている予約枠データを取得してリスト表示し、ユーザーがリストから予約すると予約テーブルにレコードを追加します。

![スクリーンショット 2022-12-12 10.57.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21109/f9bfa89f-e134-d956-b224-e30bce9deaf7.png)

![スクリーンショット 2022-12-12 11.03.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21109/58e07903-5f97-95d0-d28d-d24a7ec0a675.png)

### チケットの購入

ユーザーは予約時にチケットが不足している場合はShopifyでチケット購入をしてもらいます。Shopifyは購入時のWebhookを設定できますので、Shopifyの購入データをAirtableに登録する以下のNode-REDフローを[enebularのクラウド実行環境](https://docs.enebular.com/ja/executionenvironment/overview)で動かしています。

![スクリーンショット 2022-12-12 11.16.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21109/6176f4e8-4fdc-fc80-7d4b-bcf7169b6b70.png)

これだけのデータをAirtableに入れてしまえば以下のことはAirtableで実現できます。

- 予約の閲覧と調整（こんなのAirtable標準のカレンダーViewで1発です！）
- 予約枠の閲覧と調整（インターナルの調整なのでAirtable標準のカレンダーViewで関係者全員で調整）
- チケット枚数の管理（Shopifyから投入されるデータを数式で積算するだけ）
- 予約件数に応じてチケット仮消費（数式でenebular/Node-REDから投入される予約データの積算から残チケット枚数を計算）
- 出席チェックボックスでチケット消費（予約データで出席項目にチェックの入ったデータのみ積算して残チケット枚数を計算）

以上のように柔軟にカスタマイズできますのでスケジュール枠予約管理のような複雑なシステムに向いています。
入退室管理

# 入退室管理システムは入退室のログを管理する上で必要な情報はどれか？
ICカードの利用日時はいつ入退室したか
ICカード読み取り装置識別番号はどの部屋を入退室したか
ICカードIDは誰のICカードが使われたか
利用者IDは誰がICカードを使ったのか
以上のことの情報が必要だ。

# 協力社員が契約を遷移する矢印として適切な答えはどれか？
問題文に書いてあった。
* 社員及び協力社員は、プロジェクトに参画している間だけ開発室に入室可能とする。
* プロジェクトの開始時及び終了時に、プロジェクトマネージャから申請を受けて、開発室へのプロジェクトメンバの入室許が可能となる。
* 契約終了時には、協力社員に配布していたICカードを返却をPMを経由で受け付けて、有効期間の終了日に契約の終了日をICカードの状態に返却を設定する

しかし執務室だけに協力社員がいる可能性があるのではないか？

### 回答に書いてあった。
```執務室だけ許可するような記述は見当たらない。```
執務室だけにいる可能性がなくなった。

# バッチ処理とは
```プログラム（データ）を処理目的ごとにまとめ、そのデータを順次処理していく一連の流れ、システム```を指します。
バッチ（Batch）というのは「一回分」を意味し、そこでまとめられるデータの1つのまとまりです。バッチ処理は、コンピューティングリソースが利用可能なときにデータを処理でき、ユーザー操作をほとんど/まったく伴いません。
### 出典
https://www.talend.com/jp/resources/batch-processing/#:~:text=%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%EF%BC%88%E3%83%87%E3%83%BC%E3%82%BF%EF%BC%89%E3%82%92%E5%87%A6%E7%90%86%E7%9B%AE%E7%9A%84%E3%81%94%E3%81%A8%E3%81%AB%E3%81%BE%E3%81%A8%E3%82%81%E3%80%81%E3%81%9D%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E9%A0%86%E6%AC%A1%E5%87%A6%E7%90%86%E3%81%97%E3%81%A6%E3%81%84%E3%81%8F%E4%B8%80%E9%80%A3%E3%81%AE%E6%B5%81%E3%82%8C%E3%80%81%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%82%92%E6%8C%87%E3%81%97%E3%81%BE%E3%81%99%E3%80%82%E3%83%90%E3%83%83%E3%83%81%EF%BC%88Batch%EF%BC%89%E3%81%A8%E3%81%84%E3%81%86%E3%81%AE%E3%81%AF%E3%80%8C%E4%B8%80%E5%9B%9E%E5%88%86%E3%80%8D%E3%82%92%E6%84%8F%E5%91%B3%E3%81%97%E3%80%81%E3%81%9D%E3%81%93%E3%81%A7%E3%81%BE%E3%81%A8%E3%82%81%E3%82%89%E3%82%8C%E3%82%8B%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AE1%E3%81%A4%E3%81%AE%E3%81%BE%E3%81%A8%E3%81%BE%E3%82%8A%E3%81%A7%E3%81%99%E3%80%82%E3%83%90%E3%83%83%E3%83%81%E5%87%A6%E7%90%86%E3%81%AF%E3%80%81%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%81%8C%E5%88%A9%E7%94%A8%E5%8F%AF%E8%83%BD%E3%81%AA%E3%81%A8%E3%81%8D%E3%81%AB%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E5%87%A6%E7%90%86%E3%81%A7%E3%81%8D%E3%80%81%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E6%93%8D%E4%BD%9C%E3%82%92%E3%81%BB%E3%81%A8%E3%82%93%E3%81%A9/%E3%81%BE%E3%81%A3%E3%81%9F%E3%81%8F%E4%BC%B4%E3%81%84%E3%81%BE%E3%81%9B%E3%82%93%E3%80%82
* ```バッチ処理はあらかじめ登録した一連の処理を自動的に実行する処理方式```を指す。
### 出典
https://mypage.otsuka-shokai.co.jp/contents/business-oyakudachi/words/batch-processing.html#:~:text=%E3%83%90%E3%83%83%E3%83%81%E5%87%A6%E7%90%86%E3%81%AF%E3%81%82%E3%82%89%E3%81%8B%E3%81%98%E3%82%81%E7%99%BB%E9%8C%B2%E3%81%97%E3%81%9F%E4%B8%80%E9%80%A3%E3%81%AE%E5%87%A6%E7%90%86%E3%82%92%E8%87%AA%E5%8B%95%E7%9A%84%E3%81%AB%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B%E5%87%A6%E7%90%86%E6%96%B9%E5%BC%8F%E3%82%92%E6%8C%87%E3%81%99%E3%80%82

#### バッチ処理のメリット
https://www.talend.com/jp/resources/batch-processing/#:~:text=%E3%81%84%E3%82%8B%E4%BE%8B%E3%81%A7%E3%81%99%E3%80%82-,%E3%83%90%E3%83%83%E3%83%81%E5%87%A6%E7%90%86%E3%81%AE%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88,-%E3%83%90%E3%83%83%E3%83%81%E5%87%A6%E7%90%86%E3%81%8C
# 出典
https://gihyo.jp/book/2022/978-4-297-12377-2
Goのポインタ渡しは値渡しよりパフォーマンスが良いという誤解

この記事は MicroAd Advent Calendar 2022 の12日目の記事です。

https://qiita.com/advent-calendar/2022/microad


「Goのポインタは８バイトだから、ちょっとした構造体を値渡しでコピーするよりポインタで渡した方が早くなる」

長らくそう思い込んでいたのですが、以下の記事でポインタ渡しには意外なデメリットが多いことを知り、誤解だと気づきました。

https://segment.com/blog/allocation-efficiency-in-high-performance-go-services/

この記事では自分なりにポインタのデメリットをまとめつつ、ポインタ渡しで本当に良いのかを確認すべきパターンを紹介しようと思います。

## ポインタが実は高価な理由
- ポインタが指す値にアクセスする際にnilかどうかのチェックが必ず入る
  - ポインタがnilの場合、Goはpanic()をおこす必要があるため
- ポインタは動的メモリアロケーションの原因になりがち
  - ポインタが指す値はヒープ領域に置かれがち（絶対ではないけど一般的に多い）
  - ヒープ領域は確保にまとまったメモリの検索、解放にGCが必要になるので負荷が高い
- ポインタは参照の局所性が低くなりやすいため、CPUキャッシュが効きづらい
- 多くの場合、値のコピーはポインタを使用するオーバーヘッドよりもはるかに安価
  - GoはDuff’s devicesという手法を用いてメモリコピーなどのよくある処理について非常に効率的なアセンブラコードを生成する
  - x86アーキテクチャだと64バイト以下のオブジェクトであれば値のコピーとポインタのコピーはほぼ同じ

## ポインタ渡しアンチパターン
以下、僕が個人的に気をつけるようになったポインタ渡しでパフォーマンスが下がりがちなケースです。

#### 小さいオブジェクトのポインタ渡し
値渡しでも十分なサイズのオブジェクトにポインタ渡しを使ってしまっている例です。

```golang
type Pair struct { A, B int }

func Sum(p *Pair) int {
    return t.A + t.B
}
```

実際に値渡しとポインタ渡しの比較をベンチマークテストで行ってみます。

```go
type Pair struct{ A, B int }

func SumVal(p Pair) int {
	return p.A + p.B
}

func SumPtr(p *Pair) int {
	return p.A + p.B
}

func BenchmarkSumVal(b *testing.B) {
	p := Pair{1, 2}
	for i := 0; i < b.N; i++ {
		SumVal(p)
	}
}

func BenchmarkSumPtr(b *testing.B) {
	p := &Pair{1, 2}
	for i := 0; i < b.N; i++ {
		SumPtr(p)
	}
}
```

```
goos: linux
goarch: amd64
cpu: Intel(R) Xeon(R) CPU E5-2640 v3 @ 2.60GHz
BenchmarkSumVal
BenchmarkSumVal-32      1000000000               0.3102 ns/op          0 B/op          0 allocs/op
BenchmarkSumPtr
BenchmarkSumPtr-32      1000000000               0.3103 ns/op          0 B/op          0 allocs/op
```

上記の例では値渡しでもポインタ渡しでもパフォーマンスに大きな違いがないことが確認できました。
関数に副作用がないことを示すためにも、小さな構造体は値渡しで渡すのが無難かと思います。

#### ポインタを返す関数
主にコンストラクタで使ってしまいがちな例です。（以前の僕は全部のコンストラクタでポインタを返してました。。。）

関数内部で生成した構造体をポインタ渡しで関数外部に渡してしまうと、コンパイラが変数の寿命を判断できなくなり、動的メモリアロケーションが起きてしまいます。
また、参照の局所性も下がるので以下のようなコードは注意が必要です。

```golang
type Pair struct { A, B int }

func New(a, b int) *Pair {
	return &Pair{a, b}
}
```

実際に値渡しとポインタ渡しの比較をベンチマークテストをで行ってみます。

```golang
type Pair struct { A, B int }

func NewVal(a, b int) Pair {
	return Pair{a, b}
}

func NewPtr(a, b int) *Pair {
	return &Pair{a, b}
}

// 変数の寿命をコンパイラから隠すために生成した構造体はグローバル変数に渡す
var val Pair
var ptr *Pair

func BenchmarkNewVal(b *testing.B) {
	for i := 0; i < b.N; i++ {
		val = NewVal(i, i+1)
	}
}

func BenchmarkNewPtr(b *testing.B) {
	for i := 0; i < b.N; i++ {
		ptr = NewPtr(i, i+1)
	}
}
```

```
goos: linux
goarch: amd64
cpu: Intel(R) Xeon(R) CPU E5-2640 v3 @ 2.60GHz
BenchmarkNewVal
BenchmarkNewVal-32      1000000000               0.6122 ns/op          0 B/op          0 allocs/op
BenchmarkNewPtr
BenchmarkNewPtr-32      27600812                43.30 ns/op           16 B/op          1 allocs/op
```

ポインタ渡しでは動的メモリアロケーションが起き、実行速度が大幅に遅くなっていることが確認できました。

この結果は、コンストラクタで生成されたオブジェクトをグローバル変数に渡さなければ起きません。
しかし、実用上コンストラクタで生成したオブジェクトを長く保持することは多く、上記のようなパフォーマンス低下は頻繁に起こります。


## おわりに
いろいろ書きましたが、ホットパスな処理以外では値渡しでもポインタ渡しでも処理全体へのパフォーマンスにほぼ変化はありません。時期尚早な最適化は開発スピードを下げてしまいます。ベンチマークを取ってみてボトルネックになっている処理が見つかった場合に、不必要なポインタ渡しがないかを探すことをおすすめします。
Android Management APIで端末を専用端末化する

# はじめに
　まず、専用端末というものがどういうものを指しているかというと、特定のアプリだけを常に表示し続ける端末のことです。飲食店等の注文用のタブレットや支払いにのみ利用できるタブレットなど、見たことがある方もいるかもしれません。
今回は　Android Management APIを使ってそのような端末を作る方法をご紹介しようと思います。

# 本題
 Android Management APIではポリシーというものを用いてデバイス管理を行います。ポリシーはデバイスの「あるべき状態」を記述するものです。アプリのインストール・アンインストールから特定の機能の制限まで、あらゆることをポリシー内で管理することができます。どのような設定項目が存在するかは以下のリンクをご覧ください。

https://developers.google.com/android/management/reference/rest/v1/enterprises.policies

## デバイスを専用端末化するにあたってやること
今回デバイスを専用端末化するにあたって、やらないといけないことは以下の二つです。
1. ポリシーを作成する
2. ポリシーをデバイスに適用する

### ポリシーを作成する
まずはポリシーの作成についてみていきます。今回はポリシーの中のapplicationsという項目を利用します。この項目はアプリケーションのインストール・アンインストールなどを司っており、自動でインストールするのか、それともただPlay Storeに表示するだけか、アップデートのタイミングはどうするか等アプリケーションにまつわる様々なことを設定できます。applicationsに設定できる項目の詳細は以下のリンクをご覧ください。

https://developers.google.com/android/management/reference/rest/v1/enterprises.policies#applicationpolicy
 
applicationsの中にも様々な項目があるのですが、今回使用するのは以下の二つだけです。
```
{
  "packageName": string,
  "installType": enum (InstallType)
}
```
今回はGoogle翻訳を例として使用するので、まずはGoogle翻訳のpackageNameを調べていきます。以下の画像の赤枠の部分がpackageNameになります。Play Storeでそのアプリを表示した際のURLにpackageNameが含まれています。
![google_翻訳_package_name.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3042047/e87020a8-90cc-8482-4177-49b0452755b2.jpeg)

次にinstallTypeです。こちらはKIOSKを選択してください。
今回作るポリシーの全容としては以下のようになります。
```
{
  "applications": [
    {
      "packageName": "com.google.android.apps.translate",
      "installType": "KIOSK"
    }
  ]
}
```

### ポリシーをデバイスに適用する
先程作成したポリシーをデバイスに適用すると、起動時から画像のようにGoogle翻訳が表示されます。そして、ホーム画面に戻ろうとしても戻れなくなります。これでデバイスの専用端末化が完了しました。

![PXL_20221212_022927154.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3042047/e2298ae6-5033-61b4-b5ca-8de9bfd64da6.jpeg)
![専用端末.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3042047/2e8e58d2-c913-5d7f-774c-3d3882f19869.gif)



# まとめ
以上がデバイスを専用端末化する手順となります。今回は説明をメインとして、実際に試す手順などは省略しています。実際に試してみたいという方は以下の記事とドキュメントが参考になると思います。わかりにくい点もあったと思いますが、お付き合いいただきありがとうございました。

https://zenn.dev/yusukeiwaki/articles/f5f184acf7a875

https://developers.google.com/android/management/quickstart

# 参考資料
https://developers.google.com/android/management/policies/dedicated-devices

https://developers.google.com/android/management/reference/rest/v1/enterprises.policies

https://zenn.dev/yusukeiwaki/articles/f5f184acf7a875

https://developers.google.com/android/management/quickstart
Paraphrase で FizzBuzz

# Paraphrase で FizzBuzz
　この記事は「多言語FizzBuzz Advent Calendar 2022」カレンダー 2 の 12/14 分の記事です。

# Paraphrase について
　Paraphrase は逆ポーランド記法で有名な Forth という古のスタック志向の言語から強く影響を受けた、並列処理が容易に記述できる言語です。GitHub のページはこちらになります https://github.com/iigura/Paraphrase

# Paraphrase による FizzBuzz プログラム
　Parapharse は Forth 系なので、若干奇妙に見えるかもしれませんが、まず FizzBuzz というワード（他の言語でいうところの関数のようなもの）を定義し、その後 1 から 20 まで for+ ループを回して、それぞれの値において Fizz と Buzz を計算しています。ちなみに、左端の不等号は対話型インタプリタ（para）のプロンプトです。

```paraphrase
Paraphrase 0.96-dev  Copyright (C) 2018-2022 Koji Iigura <@paraphrase_lang>
 > `FizzBuzz :
>>     switch
>>         case 15 % 0? -> "FizzBuzz"
>>         case  5 % 0? -> "Buzz"
>>         case  3 % 0? -> "Fizz"
>>     dispatch
>> ;
 ok.
 > 1 20 for+ i FizzBuzz . next cr
 1 2 Fizz 4 Buzz Fizz 7 8 Fizz Buzz 11 Fizz 13 14 FizzBuzz 16 17 Fizz 19
 ok.
 >
```

Paraphrase は Forth 系ですが、switch - case も実装されているので、比較的分かりやすいのではないかな、と思っています（が、どうでしょうか）。 

以上、Paraphrase で FizzBuzz、でした。
Lambda＋固定IP利用におけるデメリット

# Lambda＋固定IP利用におけるデメリット

この記事は[AWS LambdaとServerless Advent Calendar 2022](https://qiita.com/advent-calendar/2022/lambda) の12日目の記事です。

セキュリティ要件や対向する外部システムの制約でアクセス元を制限するため、固定IP化する必要があります。
せっかく、Lambdaを使ったサーバレス構成でシステムを構築して、リソースと運用を効率化したくても、いくつも制約が生じてしまいます。

VPC Lambdaの制約は解消しつつありますが、非VPCでLambdaを利用して固定IPが利用できるようになるといいなと思い、現状の制約をまとめてみました。

なお、AWS Dev Day Japan 2022で登壇した際の資料に運用中のシステム構成、Lambda＋Neptuneとの組み合わせで発生した問題などを記載しています。また、VPC Lambda + Neptune以外に、資料記載のサービスでは、VPC Lambda + RDS Proxy + Auroraの構成のシステムも運用しています。

https://speakerdeck.com/curanosuke/awsdevday-japan-2022-amazon-neptune-and-serverless

# VPC Lambda + NAT Gateway

LambdaをVPC内に配置し、NAT GatewayでElastic IPを払い出す必要があります。
LambdaをVPCに配置した場合の制約としては、以下がありましたが、現在は解消されています。

* VPC Lambdaのコールドスタートが遅い：　2019/9のアップデートで解消
* LambdaとRDBMSの相性が悪い問題：　　2019/12の『Amazon RDS Proxy』のリリースにより解消

https://qiita.com/ny7760/items/700ae917da2c5b5e3f8a

https://www.keisuke69.net/entry/2017/06/21/121501

但し、以下の制約があるため、構成が複雑になります。

* 高可用性を確保するため、複数のアベイラビリティゾーンにVPCを作成し、Lambdaを紐づける必要がある
* 同じく、NAT Gatewayもアベイラビリティゾーン毎に作成する必要がある

https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/security-resilience.html

また、以下の事象を運用中のサービスで経験しています。
VPC Lambdaが直接の原因かは不明ですが、AWS SDKでの再試行回数やタイムアウトを調整する必要があります。

* VPC LambdaからVPCエンドポイント経由でのAWSサービス、NAT Gateaway+Internet Gateway経由でのインターネットへのアクセスにおいて、ネットワークが不安定（ETIMEDOUT、ECONNRESETが散見される）
* AWS StepFunctionsからのLambdaの非同期実行で空振り発生（VPC Lambda+Neptuneで発生。[AWS Dev Day Japan 2022資料](https://speakerdeck.com/curanosuke/awsdevday-japan-2022-amazon-neptune-and-serverless)参照）

https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/troubleshooting-networking.html

https://aws.amazon.com/jp/premiumsupport/knowledge-center/lambda-function-retry-timeout-sdk/

# NAT GatewayとVPCのコスト

最も我々が憂慮している問題はコストです。
グラフは運用中のシステムのコストですが、NAT Gatewayのコスト（EC2 その他がNAT Gateway）が全体の約20%、VPCは約15%を占めています。

![スクリーンショット 2022-12-09 22.28.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/447180/12a0daf8-7304-cc20-4a99-3630378927f9.png)

NAT Gatewayは、時間単位＋データ転送量で課金されます。
NAT Gatewayに紐づけられたElastic IPも、時間単位で課金されます。
VPCも、VPC Privatelinkを使用している場合も時間単位で課金されます。

https://aws.amazon.com/jp/vpc/pricing/

https://aws.amazon.com/jp/premiumsupport/knowledge-center/elastic-ip-charges/

https://aws.amazon.com/jp/privatelink/pricing/

# まとめ

Lambdaを使ったサーバレス構成で、固定IP化した場合のデメリットをまとめました。
VPC＋NAT Gatewayで構成が複雑になり、時間単位での課金のため、トラヒックが少ない時間帯も含め、本来のサーバレス構成で効率化できたはずの、リクエストに応じたComputeの従量課金＋データベースへの課金以外にネットワーク利用に伴う時間単位の固定費が必要になります。

VPC＋NAT Gatewayの構成にすることが目的ではない場合に、不要な制約やコストがかからないようなアップデートが出てくるといいなと思います。
【GAS】GoogleAppsScriptをいい感じに開発したい人向け

GASを開発するとき　AppsScriptの編集画面を使います。
エディターで開発している開発者にとって編集画面は使いにくいと感じると思います。

:::note info
【こんな方にオススメ！】
・GASを効率良く開発したい方
・GASのコードをgit管理したい方
:::

## GASとは？
GoogleAppsScriptの略称です。
Googleが提供するアプリケーション開発プラットフォームでGoogleサービスを自動化できます。

## スプレットシートで記述する時の難点
エディターでの開発に慣れているとAppsScriptの編集画面は使いづらさを感じると思います。
また、編集は上書き保存のため以前のコードに戻せません。
できればGitのようにバージョン管理したいものです…。

## GASをいい感じに開発するための「clasp」
最近まで知らなかったのですが、claspを導入するとローカル開発できます。

### 導入
```javascript
// インストール
npm i -g @google/clasp

// ログイン
clasp login
```

ログインコマンドを打ち込むとブラウザが立ち上がり、Googleのログインの画面が表示されます。
最後に承認を押すとターミナルに`Authorization successful.`と表示されます。


次に下記を実行します。
```javascript
clasp create
```

```javascript
 Create which script?
❯ standalone
  docs
  sheets
  slides
  forms
  webapp
  api
```

選択した後に下記のようなエラーが出た時はAPIを有効にする設定してください。
```
User has not enabled the Apps Script API. Enable it by visiting https://script.google.com/home/usersettings then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry
```

https://script.google.com/home/usersettings

もう一度コマンドを実行すると無事生成されたようです。
選択肢で`sheets`を選択するとスプレットシートのURLとAppsScriptのURLが生成、表示されます。
実行した階層に`.clasp.json`と`appsscript.json`がされます。

```javascript
Created new Google Sheet: https://drive.google.com/open?id=1aPsKZJ7FX3J3hYfEwBvGWdiay9PBBJVT-6DZI_iWfdw
Created new Google Sheets Add-on script: https://script.google.com/d/1CsO-vQHCh0TyZrzDN64KUKbSqt4RmqnIR_zUJVM-pATak5zYGqGc7EjI/edit

// AppsScriptを開く
clasp open
```

`clasp open`を実行すると生成されたAppsScriptのURLをブラウザで開いてくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/afa0b06b-5ee7-bb4a-76f3-769ef5920cae.png)

### `.clasp.json`と`appsscript.json`
それぞれにファイルは下記の内容で生成されます。

見やすいようにインデントをつけましたが、生成された`.clasp.json`ファイルのインデントはありません。
`rootDir`の初期設定はフォルダ全体です。
指定を変えることで特定のディレクトリにのみpullやpushを限定することもできます。

```json: .clasp.json
{
  "scriptId":"***",
  "rootDir":"/Users/*****/***/gas-clasp",
  "parentId":["*******"]
}
```

```json:appsscript.json
{
  "timeZone": "America/New_York",
  "dependencies": {
  },
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8"
}
```

## 実際にコードを書いてみる
AppsScript側のエディターで新しいファイルを生成して、コードを追記してみます。

```javascript
function myFunction() {
  console.log('test');
}

myFunction();
```

### 記述したScriptを`clasp pull`で取得する

```javascript
clasp pull
```
実行すると生成したファイルとコードがvscode側で確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/5e5bffd7-4ecb-3dea-8929-dc7b3830edb6.png)

### vscodeで追記した記述を`clasp push`でウェブエディタ側に反映させる
```diff_javascript
function myFunction() {
  console.log('test');
+ console.log('test vscode');
}

myFunction();
```

```javascript
clasp push
```
AppsScript側を画面更新するとpushした内容が確認でidやclassでのきました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/552b24b9-595e-c6e4-2b90-1fc798d069a1.png)


:::note alert
pushするとウェブエディタ側のみにあるファイルは削除してしまうので注意が必要です。
:::


## まとめ
claspはv1.5.0以降でTypescriptをサポートされたようなので現在ではTypeScriptで記述することもできます！

:::note info
Gitで管理できるとコードを資産として残せるので次の同じようなScriptを記述する時も非常に便利です。
:::

ウェブエディタも改善され使いやすくなっている印象ですがvscodeには叶わないと思うので小規模な開発でも利用することをオススメします！

設定も簡単なのでAppsScriptを使って業務効率化にチャレンジしてみてください！
Promiseを"完全に理解"できるかもしれないクイズ

# Promise理解してますか？
みなさん、JavaScriptの`Promise`は使いこなしていますか？

業務ではしばしば登場するが、ドキュメントを読んでもよく分からない。「とりあえず`.then(res => ...)`と書けばいいんでしょ」ということで毎回曖昧に済ましている。

こんな方、多いんじゃないでしょうか。

今回は、そんな方に向けて
「**Promise[完全に理解した](https://jp.quora.com/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E3%83%BC%E3%81%8C%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E7%8B%AC%E7%89%B9%E3%81%AA%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E3%83%BC%E7%94%A8%E8%AA%9E)！**」**となれるようなクイズ**
をご用意しました。

ただドキュメントを読むよりも、理解度がグンと上がるはずです。ぜひ取り組んでみてください。

### 初心者向けの実行方法の解説
ブラウザの検証ツールを使うのが手っ取り早いと思います。「自分が使用しているブラウザ」「検証ツール」「コンソール」「開き方」などで調べてみてください。

ちなみにChrome + Macの場合は　`option + command + i`がショートカットです。

コーディング自体はVScodeなどのエディタを使った方が書きやすいかもしれません。その場合は、エディタで書いたコードを、ブラウザのコンソールにコピペして実行してください。
（これすらメンドウな人は、[ブラウザでコードを実行できるサービス](https://paiza.io/ja/projects/new?language=javascript)を使うのも手です。）

# クイズ本編
- **問1: api を完成させてください。**
- **問2: fetch2 に対して、 fetch1 と全く同じタイミング（ api() 実行後かつ1000ms経過前）で console.log('② fetch started') を足してみてください。**
```js
const api = () => // 1000ms後にresolveされるpromiseを返す関数

const fetch1 = () => {
  console.log('① fetch start')
  api().then(() => {
    console.log('③ fetch completed')
  })
  console.log('② fetch started')
}

const fetch2 = async () => {
  console.log('① fetch start')
  await api()
  console.log('③ fetch completed')
```

## ヒント
1問目はPromiseクラスの基本的な使い方です。Promiseクラスについて調べると解けます。

2問目は「awaitしようとしているPromiseインスタンスがどこにあるのか」といった感覚をつかむためのものです。

- awaitやthenはPromiseインスタンスに対して使うもの。
- JavaScriptは全てがObject（[になりうる](https://qiita.com/hcr1s/items/172ba167ba44a35c2a45)）、Promiseインスタンスも例外ではない。変数に代入したりConsoleに出力したり可能。

さえ理解できるば解けるはずです。

特別な関数や構文を使ったり、テクニカルなことをする必要はありません。
Promiseインスタンスはどこにあるのか、というところから考えてみましょう。

こちらのドキュメントが分かりやすいと思います。

https://jsprimer.net/basic/async/#promise

## 解答
解き終わったらスクロールしてください。

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

```js
// 問1
const api = () => {
  console.log('api start')
  return new Promise( resolve => {
      setTimeout(() => {
        console.log('api completed')
        resolve()
      }, 1000)
  })
}
const fetch1 = () => {
  console.log('① fetch start')
  api().then(() => {
    console.log('③ fetch completed')
  })
  console.log('② fetch started')
}
// 問2
const fetch2 = async () => {
  console.log('① fetch start')
  const temp = api()
  console.log('② fetch started')
  const result = await temp
  console.log('③ fetch completed')
}
fetch2()
```

みなさん、解けましたか？
一発で解けたアナタ。できるエンジニアです。胸を張って`Promise`を使っていきましょう。

間違えてしまったアナタ。心配ありません。`Promise`は誰しもつまずくところです。ヒントやドキュメントを読んで、再度挑戦してみてください。

# おわりに
このクイズは、チームの上司の方が考案してくださったものです。ジュニアレベルのメンバーにとっては大きな助けとなりました。
私もこんな学習コンテンツを考案したいものです。精進します。

### 第2弾も投稿~~予定です~~しました！
**オブジェクト型の"参照"を完全に理解できるかもしれないクイズ**

https://qiita.com/k5mrt/private/5f0ebc6fd7b3063fa487
windowsからmacに乗り換える民に送る

この記事はFLINTERS Advent Calendar 2022 13日目の記事です。

先日FLINTERSに入社しました。前職は Windows + WSL2 という構成で開発していましたが、入社と同時にゴッツイMacbookを支給され、テンションが上がっています。しかしながら今までWindowsしか触ったことのない人間ゆえMacの挙動に困惑することも多く、慣れるまでに試行錯誤したため、その記録をここに記します。Macへの乗り換えを検討するWindowsの民の参考になれば。

## タッチパッドの右クリックが無い
ファイルの名前を変更したい場合など、なんらかのオプション操作を行いたい場合はWindowsでは「右クリック」を当たり前のように使いますが、Macのタッチパッドでは「二本指でクリック」がこの動作にあたります。右クリックを使いたい場合は　システム環境設定→トラックパッド→副ボタンのクリック から設定を変更する必要があります。

ただし、パッドの右下隅のごく一部の部分しか右クリックとして認識されないため、Windowsと同じ操作感にならない場合があります。私は違和感を覚えたので、二本指クリックのままにしてMac流に慣れることにしました。

## 輝度の自動調整
周囲の環境に応じて勝手に画面の明るさが変わるのが嫌なので切りました。システム環境設定→ディスプレイ→ディスプレイ設定→輝度を自動調整 から無効化できます。これはWindowsでも同様の設定をしている人も多そうですね。同じ設定画面の True Tone は環境光が異なっても同じ色味になるように自動調整してくれる機能らしいですが、こちらも同様に無効化しました。

## アプリのインストール方法
Windowsにアプリをインストールする際には`~~~.exe`ファイルをダブルクリックしてインストーラを立ち上げ、インストーラの指示に従ってぽちぽちすると思いますが、Macの場合は`~~~.dmg`ファイルがこれにあたります。`dmg`ファイルをダブルクリックすると以下のような画面が表示されます。
![スクリーンショット 2022-12-12 10.10.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/660841/7e711ba0-b47c-9575-3fdd-f4869d20ae37.png)
インストールするには以下のように
![スクリーンショット 2022-12-12 10.10.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/660841/c672d3b1-1114-d002-83a4-044793008be3.png)
**アプリのアイコンをドラッグしてフォルダのアイコンの上にドロップします。** なんじゃそりゃ。正直この操作が一番困惑しました。

## shellのカスタマイズ
宗教戦争になりかねないので詳細な言及は控えます。

## 日本語が勝手に変換される
デフォルトでは「ライブ変換」という機能が有効化されていて、日本語入力中にスペースを押さなくても各文節で自動で変換されます。この機能を使いこなしている方もいらっしゃるのかもしれませんが、少なくともWindowsから来たユーザーとしてはあまりにも直感的でない挙動なので無効化しました。画面右上の文字入力設定（「あ」とか「A」とかアイコンが出ているやつ）から 日本語→ライブ変換 で切り替えられます。

## 英語入力の頭文字が勝手に大文字になる
英文を頻繁に書く人にとっては便利なのかもしれませんが、私はプログラムを書くときか検索するときくらいにしか使わないので、変に自動で変換されるのを嫌って無効化しました。システム環境設定→キーボード→ユーザー辞書→文頭を自動的に大文字にする で切り替えられます。

総じて「自動でよしなにやってくれる」系の設定は片っ端から切っています。

# おしまい・次回予告
FLINTERS Advent Calendar は明日もあるよ！
Azure Administrator(AZ-104)：Azure管理者向けの前提条件「PowerShellスクリプト(ループ：For)」

Microsoft Learnを用いたMicrosoft Azure Administrator(AZ-104)の試験内容をまとめる投稿です。
この投稿ではMicrosoft Learnで学ぶ内容をできるだけ簡潔にまとめております。
Azureの勉強を一から始め、AZ-900取得後の資格としてAZ-104取得を目指している方の参考になれば幸いです。
※AZ-900の内容は本投稿では省略しております。再度復習したい方は下記をご参照ください。
[Azure Fundamentals(AZ-900)：試験合格に向けた学習内容のまとめ](https://qiita.com/fsd-jume/items/e4ec76959adb547ac5e8)

## 今回の学習内容
**◆「PowerShellスクリプト(ループ：For)」**
◇対応するMicrosoft Learn ラーニングパス
[AZ-104:Azure 管理者向けの前提条件](https://learn.microsoft.com/ja-jp/training/paths/az-104-administrator-prerequisites/)
◇対応するモジュール
[Azure PowerShell でスクリプトを作成して保存する](https://learn.microsoft.com/ja-jp/training/modules/automate-azure-tasks-with-powershell/7-create-resource-using-script)

※前回の投稿は下記から確認できます。
[Azure Administrator(AZ-104)：Azure管理者向けの前提条件「PowerShellの変数とスクリプト」](https://qiita.com/fsd-jume/items/92f643c75c3958c6d001)

## PowerShellスクリプト(ループ：For)
**・PowerShell手法(ループ)
⇒指定した条件が満たされるまで、決められた処理を繰り返し実行**
　
### For文
**ループ回数が決まっている場合などに使用**
例)VMを3つ作成する際に、それぞれのリソース名に連番をつけたい場合
```powershell:PowerShell
for ($i = 1; $i -le 3; $i++)
{
    $vmName = "ConferenceDemo" + $i
    Write-Host "Creating VM: " $vmName
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2851723/4714b308-37a2-1789-564a-422367cbd34c.png)
**※コマンドの意味**
**・for (`Init`; `Condition`; `Repeat`){`Statement list`}**
　-Init
　　ループ開始前に実行されるコマンドで、通常は変数の作成と初期化を行う
　　今回の場合は変数`$i`を定義してその値を「1」で設定
　-Condition
　　ループのたびに判定され、結果がTrueの間はループし、Falseになるとループが終了する
　-比較演算子
　　値の比較や一致の検索が可能
　　(-eq = 等しい、-ne = 等しくない、-gt = より大きい、-ge = 以上、-lt = より小さい、-le = 以下)
　　今回の場合は`$i`が3以下の間はループ
　-Repeat
　　ループのたびに`Statement list`の処理後に実行されるコマンドで、通常は変数の増減を行う
　-`変数`++：変数に1を加算(`変数` = `変数` + 1と同じ)
　　今回の場合はループのたびに変数`$i`を1ずつ加算
　-Statement list
　　ループ中に実行する処理
**・Write-Host**
出力をホスト(コンソール)に書き込む

### Foreach文
**配列などのコレクション内すべての要素に対して処理を実行したい場合に使用**
例)VMを3つ作成する際に、それぞれのリソース名に連番をつけたい場合
```powershell:PowerShell
$vmNum = "1","2","3"
foreach ($i in $vmNum)
{
    $vmName = "ConferenceDemo" + $i
    Write-Host "Creating VM: " $vmName
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2851723/970f59fd-968f-e21c-217e-0c54418c01ec.png)
**※コマンドの意味**
**・foreach ($`Item` in `Collection`){`Statement list`}**
　-Item
　　ループ中にコレクション内の要素が格納される変数
　　今回の場合は変数`$i`に要素「1,2,3」をループごとに設定
　　ループ1回目：`$i` = 1
　　ループ2回目：`$i` = 2
　　ループ3回目：`$i` = 3
　-Collection
　　ループ対象の要素が含まれるコレクション

## 次の学習内容
**◆PowerShellスクリプト(ループ：Do)**

https://qiita.com/fsd-jume/items/66388be0c9d724318dcd

## 学習内容をまとめたページの一覧

https://qiita.com/fsd-jume/items/6eda24728c9c03c36bc3
Jest React TypeScript toBeChecked()を使ってボタンとチェックボックスの状態をテストする

# 概要
jestでボタンとチェックボックスの初期状態を確認します。

# 開発環境
IDE:GitHub CodeSpaces
OS:windows10
言語：TypeScript

├── @testing-library/jest-dom@5.16.5
├── @testing-library/react@13.4.0
├── @testing-library/user-event@13.5.0
├── @types/jest@29.2.3
├── @types/node@16.18.4
├── @types/react-dom@18.0.9
├── @types/react@18.0.25
├── jest@29.3.1
├── react-dom@18.2.0
├── react-scripts@5.0.1
├── react@18.2.0
├── UNMET DEPENDENCY test@jest
├── ts-jest@29.0.3
├── typescript@4.9.3
└── web-vitals@2.1.4

# 実装
## プロダクトコード
``` App.tsx
import {useState} from 'react';
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
	const [buttonColor, setButtonColor] = useState('red');
	const newButtonColor = buttonColor === 'red'? 'blue' : 'red';

  return (
    <div >
    <button 
		style={{backgroundColor: buttonColor}} 
		onClick={() => setButtonColor(newButtonColor)}>
		Change to {newButtonColor}
		</button>
		<input type ="checkbox" />
	</div>
  );
}

export default App;

```


## テストコード
``` App.text.tsx

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import App from './App';

test('initial conditions', () => {
	render(<App />);
	const colorButton = screen.getByRole('button', {name: 'Change to blue'})

	expect(colorButton).toBeEnabled();

	const checkbox = screen.getByRole('checkbox');
	expect(checkbox).not.toBeChecked();


})


```


## 実際の動き
下gifアニメは、テストコード確認してるときの様子です。
プロダクトコードのcheckboxの値を変えてPassとFailを確認しています。
ウィンドウの並びは左から順に、テストコード、プロダクトコード、プレビューという構成です。

![checkbox_enabledpart2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/d977c9e0-af80-ee57-3764-83919c586a51.gif)



# github


https://github.com/RYA234/my_learning_React_with_jest_and_ReactTestingLibrary/commit/4f8ee6a228ca0c23441f0845fbd3f6e888467d52

# 参考
Section2  18 19

https://www.udemy.com/course/react-testing-library/learn/lecture/24450634?start=150#overview


toBeEnabled()

https://github.com/testing-library/jest-dom#tobeenabled

checkbox

https://www.w3.org/TR/wai-aria/#role_definitions


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/522a7aa6-2965-b5be-01dd-1971f2c3e019.png)
rails tutorial 8章リスト8.28がREDから変わらない人に向けて

同じ所で躓いてる同士に向けて。
rails tutorial 8章リスト8.28がGREENにならず、以下ログが出力される。
```
"foo@bar..com" should be invalid
```

### 対応内容
/app/models/user.rb
正規表現を修正
```diff
class User < ApplicationRecord
  before_save { self.email = email.downcase }
  validates :name,  presence: true, length: { maximum: 50 }
-  VALID_EMAIL_REGEX = /\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i
+  VALID_EMAIL_REGEX = /\A[\w+\-.]+@[a-z\d\-]+\.[a-z]+\z/i
  validates :email, presence: true, length: { maximum: 255 },
                    format: { with: VALID_EMAIL_REGEX },
                    uniqueness: { case_sensitive: false }
```

### 原因
[メールアドレスの正規表現](https://qiita.com/shumpeism/items/d299aaeb34e1d741e82b)
上記様を参考に正規表現を読み解くと
| 正規表現 | 意味 |
|:-:|:-:|
|[a-z\d-.]+   |英小文字、数字、ハイフン、ドットのいずれかを少なくとも1文字以上繰り返す   |
|.   |ドット   |

これだと「..」でもOKとなってしまう。
そのため
「英小文字、数字、ハイフン、ドットのいずれかを少なくとも1文字以上繰り返す」ではなく、
「英小文字、数字、ハイフンのいずれかを少なくとも1文字以上繰り返す」に修正。
TipTap を react-hook-form と使う


## 目的

- 少しリッチな入力ができるようにしたい
- 既存の入力欄と組み合わせて、react-hook-form で管理したい

## できたもの

https://codesandbox.io/embed/musing-diffie-x5yqp2?fontsize=14&hidenavigation=1&theme=dark

tiptap 側は[markdown-shortcuts](https://tiptap.dev/examples/markdown-shortcuts)のサンプルと、管理画面的なところで使うことを想定して[placeholder](https://tiptap.dev/api/extensions/placeholder)を組み合わせました。

コンポーネントの分割と名前は[React Hook Form を 1 年以上運用してきたちょっと良く使うための Tips in ログラス（と現状の課題）](https://zenn.dev/yuitosato/articles/292f13816993ef)を参考にさせていただきました。

## 詰まった所

### 一文字入力する度に入力欄からフォーカスが外れる

`useEditor`(src/components/Editor/Editor.tsx#L44)で tiptap の Editor を初期化する際、`onUpdate`で`onChange`(外から渡される onChange = react-hook-form の state を更新する onChange)を呼ぶようにした所、一文字入力する度に入力欄からフォーカスが外れるようになってしまいました。

##### 原因

(当たり前かもしれませんが)onUpdate で react-hook-form の state を更新すると`onBlur`/`onChange`等のメソッドが再生成されるため、

1. これらのメソッドに依存している`useEditor`が再実行される
1. `editor`のインスタンスが新しいものになる
1. editor 部分が再描画される
1. フォーカスが外れる

のような動きになっていたのではないかと思っています。

苦し紛れの対応として、`onBlur`時に onChange 的な意味合いのメソッド(src/components/Editor/Editor.tsx#L60)を呼ぶようにして対応しました。

## prosemirror-commands, prosemirror-keymap 等の import エラー

この記事の内容とは少し異なりますが、tiptap の最近のバージョンで不具合(?)があるようです。
https://github.com/ueberdosis/tiptap/issues/3492

いくつかのパッケージを追加してあげることで、一旦起動できるようになりました。
私の環境では以下が必要でした。

```bash
yarn add \
  prosemirror-schema-list \
  prosemirror-keymap \
  prosemirror-gapcursor \
  prosemirror-history \
  prosemirror-dropcursor \
  prosemirror-commands
```

---

ご意見/ご指摘/気になったこと/もっとこうすれば良くなる等、コメントいただけると大喜びします！
ありがとうございました！
今ChatGPTで話題のOpenAiのDALL-E APIを使ってAIでイメージを生成するアプリを作ったら結果が非道かった

## OpenAiのDALL-E APIを使ってアプリを作る
今ChatGPTで話題、イーロンマスクも出資して設立に関わっている[Openai](https://openai.com/)ですが、チャットだけではなく、色々なAPIを公開しています。
イメージで言うと、彼らの作り上げた巨大な電脳の脳味噌に、APIを通じて接続し、色々なデーターを取得できると言うものです。
で、今回Traversy Mediaを見ていると、言葉でこんな画像ちょうだいって言うと、Aiがそれを生成して送り返してくれると言う暗黒アプリが簡単に作れそうだったので、作ってみる事にしました。Node.jsにて、製作時間１時間ほど。で、出来たのがこれ

[暗黒イメージ生成機](https://openaiimagegenerator.web.app/)　＊実際にFirebase上でアップしてみたよ **１２/１８日：フリープランの限度額までリーチしてしまいました。なので、多分動かないです。**

![openai_api_indexpage.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1204968/23031f04-62ab-1fc8-9c14-493c6b79c14f.png)

欲しいイメージを入力するインプットと、画像の枚数を入れるインプットの２箇所だけの超シンプルなUIで、背景にはOpenaiが生成した怪獣の画像を使用。
早速、Godzilla attacking Manila(マニラを襲うゴジラ)と入力し、枚数を３枚に。＊日本語だとまだ精度が低いので、英語で入力

![OpenAI_input1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1204968/3830cc8d-2694-2f1c-1db1-2693875b164a.png)

生成をクリックすると

![OpenAI_godzilla.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1204968/dd33f898-6380-fd53-79eb-b3f49202c529.jpeg)
やべええええええええええええええ！！！！！！！

**ゴジラっぽい何かが生成されました**

次は皆が知っているあのキャラクターを
![OpenAI-Nobita.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1204968/5a9c6ff4-ab2d-6308-fbfd-7a919cf7b813.jpeg)
不ジィいいいいい子藤ぃいいいいいおおおおおおお！！！！！！

と言う事で、**知ってるはずだけど何か違うものが生成されました。**

あくまでも、**画像の合成とかではなく、Aiがその頭脳を元に、一から生成した画像であり、この世に存在しないと言うのが面白いポイントです。**

と言うわけで、次回の記事でコードの公開と解説を動画を作った後でまとめようと思います。
docker compose up -d 実行後「hcsshim::CreateComputeSystem … The virtual machine could not be started because a required feature is not installed.」が発生

# 現象

`docker compose up -d` 実行後、
```
hcsshim::CreateComputeSystem 0e820a07f6bca4539ed90cfed213aabd7a51c6d1eac21b17ffbb9167f76ce33e
The virtual machine could not be started because a required feature is not installed. 
```
といったエラーが発生しました。

# 環境

- Windows 10 Pro (22H2)
- Docker Desktop v4.1.5.0

# 解決策

諸事情でしばらく Hyper-V を無効化していて、久々に Dokcer を起動するため直前に有効化しました。
エラーの内容でぐぐってみると Windows の機能の「Hyper-V」「コンテナー」が有効化されれていないため、という記述が多かったのですが、どれも解決には至りませんでした。
そこで一旦、Docker Desktop をアンインストール→再度インストールしようとしたのですが、
その際に発生した以下のエラーがヒントになりました。

```
Check that hardware-assisted virtualization (either Intel VMX or AMD SVM) and 
Data Execution Prevention (sometimes labeled XD or Execute Disable or NX) are enabled in your BIOS.

Check your bootloader is configured to launch Hyper-V.
```

BIOSでハードウェアレベルの仮想化が有効になっている確認しろ、というメッセージからまたぐぐってみると以下のページに辿り着きました。

https://algorithm.joho.info/programming/docker-for-windows-hardware-assisted-virtualization-and-data-execution-protection-must-be-enabled-in-the-bios/

上記ページに記載されていた以下の手順で`hypervisorlaunchtype`の値を`off`から`auto`に変更することで、
現象が解消されました。

1. Windows PowerShell を管理者権限で起動する
2. `bcdedit`を実行する
2. `Windows ブート ローダー`の`hypervisorlaunchtype`の値を確認する
2. `hypervisorlaunchtype`の値が`off`であれば`bcdedit /set hypervisorlaunchtype auto`を実行し`auto`に変更する
2. PCを再起動する
ＳＱＬの基礎

こんにちは！
今OracleSilver SQLを勉強しているので、アウトプットとして、SQLの構文を書いていきたいと思います！

# CREATE TABLE文
```sql:書式
CREATE TABLE `表名`
    ( `列名１` `データ型`,
      `列名２` `データ型`,
       `…`    );
```

- それぞれの列でデータ型を指定する必要がある。
- 1つの表の列数は最大1000
```sql:例
CREATE TABLE `社員表`
    (`社員番号` NUMBER,
     `名前` VARCHAR2(10),
     `性別` CHAR(2),
     `住所` VARCHAR2(100));
```

**結果**
|社員番号|名前|性別|住所|
|:--|--:|:--:|:--|
|||||
|||||

### 基本のデータ型
|データ型|格納できるデータ|
|:--|:--|
|NUMBER|整数又は小数|
|CHAR(n)|ｎバイト格納できる固定長の文字列 (nは4000まで)|
|VARCHAR2(n)|ｎバイト格納できる可変長の文字列|
|DATE|日付と時刻|
>- **固定長**
    指定した文字数より格納した文字が少ないなら、足りない分を空白で埋める
>- **可変長**
    指定した文字数に満たなくとも空白は入らない
【Scratch 2022】Scratch でも利用可能な無料の BGM・効果音のフリー音源素材を配布している「Springin’ Sound Stock」

こちらは、[Scratch Advent Calendar 2022](https://qiita.com/advent-calendar/2022/scratch) の 12日目の記事です。
　
内容は、Scratch でも利用可能で、「[無料の BGM・効果音のフリー音源素材を配布している Springin’ Sound Stock](https://www.springin.org/sound-stock/)」の紹介です。

https://twitter.com/springin_jp/status/1539820714542243841

最近も、以下の記事などに名前が出ていました。今は、総点数が 1000点を超えたらしいです。

●商用利用可能なフリー効果音・BGM素材サイト「Springin’ Sound Stock」に約400点の素材が追加 - 窓の杜
　https://forest.watch.impress.co.jp/docs/news/1461814.html

## Springin’ Sound Stock の利用
![Springin’ Sound Stock](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/32306e37-c97f-76a4-4530-e5cfe836486d.png)

### Scratch でも利用可能
Scratch と素材に関する話で、Springin’ Sound Stock は自由に使えるそうです。

https://twitter.com/springin_jp/status/1540170155862286336

Scratch は規約的に、公開された作品やそこで使われた素材が、自動的にCC BY-SA 2.0が適用されるので、再配布・二次配布的を禁止している無料素材は NG となることがあります。CC BY-SA 2.0 の件について書かれたツイートを、いくつか掲載してみます。

https://twitter.com/abee2/status/1457918410533179392

https://twitter.com/abee2/status/1281422964672483328

そのため、Springin’ Sound Stock の公式が、「Scratch での利用OK」と明言してくれているのはありがたい話です。

#### Scratch での素材利用について補足
Scratch と CC BY-SA 2.0 の話を書きましたが、用途によって OK だったり、素材を配布する意図でないことから許容される、という事例もあったりはします。
このあたりは、素材を配布しているページの規約や、作者の方の発信している情報を要チェックという感じになるかと思います。

https://twitter.com/pipohi/status/1320652915346862088

https://twitter.com/kamatama_music/status/1319689937155805184

#### 余談： Scratch関連のロゴやキャラクターの権利関係
Scratch で公開された作品は CC BY-SA 2.0 になるという話を書きましたが、ロゴやキャラクターの権利関係の話は別にあったりします。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">Scratchの素材は基本的にCC BY-SA 2.0ですが、Scratch Cat, Gobo, Pico, Nano, Tera, GigaはMITの商標です。それらを使うには事前の書面による許可が必要になります。商用利用の場合は特にそうです。このTwitterのアイコンなどが問題になる可能性があります。 <a href="https://t.co/kroyWgzJWG">https://t.co/kroyWgzJWG</a></p>&mdash; アベ先生 (CV: 阿部和広) (@abee2) <a href="https://twitter.com/abee2/status/1348485326432473089?ref_src=twsrc%5Etfw">January 11, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### 自分が Springin’ Sound Stock の素材を使った事例
自分が使った事例を少し抜粋してみます（Scratch での話ではないのですが...）。
モノ作り系の展示会（メーカーフェア）への出展で作った作品の中や、開発系コンテスト（ヒーローズ・リーグ）への応募動画で素材を利用させていただきました。

https://twitter.com/youtoy/status/1540531721262682112

https://twitter.com/springin_jp/status/1540487609394135040

https://twitter.com/youtoy/status/1593047575846096896

（上記のツイートでは、公式の Twitter をやっている方が、まめにリプライをくれたりしました）

## おわりに
Springin’ Sound Stock は、Scratch でも利用でき（もちろん、それ以外でも）、たくさんの素材がそろっているため、今後も活用できればと思っています！
競プロを始めよう!

# はじめに
初投稿です。
この記事は、この記事は [N・S高等学校 Advent Calendar 2022](https://qiita.com/advent-calendar/2022/n-s-highschool)の12日目です。
競技プログラミングを紹介したいと思います。

# 競技プログラミングとは
与えられた問題を、プログラムを作る時間や性能で競い合うものです。

# AtCoder
私のおすすめは[AtCoder](https://atcoder.jp/?lang=ja)です。
なぜなら、レートで自分の実力が把握でき、問題が日本語表記だからです。
次に、おすすめの勉強法を紹介します。

# おすすめの勉強法

[AtCoder Problems](https://kenkoooo.com/atcoder/#/table/)では先ほど紹介したAtCoderの過去の問題が日付別に一覧になっているものです。
難易度が一番低いA問題から解くのがおすすめです。

#### 難易度の見方
赤枠で囲んであるところにA~Hまでのアルファベットが書いてあります。
左から右にかけて問題の難易度が上がっています。
![スクリーンショット 2022-12-11 12.33.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1729803/5c9c3026-aa14-bf2d-14a3-680f0cd5717d.png)


### 分からない問題があった時
#### 解説を見る
![スクリーンショット 2022-12-12 9.34.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1729803/8da9c945-3038-384a-fd84-b248083fa058.png)


#### 他人のコードを見る
提出結果という項目をクリックすると**すべての提出**という項目が出てきます
![スクリーンショット 2022-12-12 9.39.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1729803/7b86c6c9-fdf8-6687-930c-d40a0eec425e.png)




### アルゴ式
[アルゴ式](https://algo-method.com/)ではデータ構造やアルゴリズムなどを学ぶ事ができます。
基礎的なことから応用まで学習することができ、分からない問題があっても解説があるので便利です。

# まとめ
レート上がると楽しいよ!
個人的にはアルゴ式で少し問題を解いてからAtCoderの問題を解くことを薦めます。
自分の考えをまとめるの難しい。