OmniAICreator/Qiita-1.07M huggingface dataset:
冬休みに取り組んだ参考書の紹介

この記事は専門学校一年生が冬休み中に取り組んだ参考書の紹介です。
学校で習ってもよくわからなかったアドレスや構造体を中心に勉強しました。
#取り組んだ参考書

https://www.amazon.co.jp/%E6%96%B0%E3%83%BB%E6%98%8E%E8%A7%A3C%E8%A8%80%E8%AA%9E-%E5%85%A5%E9%96%80%E7%B7%A8-%E7%AC%AC2%E7%89%88-%E6%9F%B4%E7%94%B0-%E6%9C%9B%E6%B4%8B/dp/4815609799/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=3Q8TB8N3D61I9&keywords=%E6%96%B0+%E6%98%8E%E8%A7%A3c%E8%A8%80%E8%AA%9E&qid=1642001776&sprefix=%E6%96%B0%E6%98%8E%E8%A7%A3c%E8%A8%80%E8%AA%9E%2Caps%2C204&sr=8-1

https://books.rakuten.co.jp/rb/16800701/?l-id=search-c-item-text-01

#この本がオススメな点
サンプルプログラムが243編、演習問題もついているので実践しながら学ぶことができます。
また図表も豊富なのでポインタやアドレスがどこを指しているか直感的に理解することができます。

そしてこの本が特に優れている点は間違っているコード例も載っているので何故ここがこう書かれているのかコードの理解を深めることができます。

#まとめ
本屋で色々試し読みしてみましたが個人的にこの本が一番わかりやすかったです！
自分が取り組んだのは入門編ですが中級編、実践編もあるので自分のレベルに合わせて段階的に勉強できます。
自分なりに咀嚼できてない単元はもちろん、理解できている分野も学び直す事で力がつくので学校の教科書以外の本で勉強するのは非常にオススメだと思いました。

著作権的に本の内容や演習問題を載せることができないので読書感想文みたいになってしまいました・・・
Microsoft Accessでフィールド名に予約語を使うと 複数回フィールドを定義することはできません エラーが発生する時がある または演算子がありません

#Accdbでも発生を確認
前回の記事
Access 今日のトリビア Schema.iniでフィールド名をブランケットで囲むと（）がつく
https://qiita.com/Q11Q/items/bd1382bea8bfae5d9d04
でとりあげた
Access 2002 以降のバージョンの Access の予約語の一覧
https://docs.microsoft.com/ja-jp/office/troubleshoot/access/reserved-words
はやはりaccdb形式でもエラーが起きることが確認できました。

#しかしメッセージが斜め上
しかし、そこで発生したのが、
複数回フィールドを定義できません
エラーでした、

# 発生した状況
Insert Into でCsvかテキスト形式のデータから予約語を含むフィールド名を持つテーブルにデータを追加するときに発生するようです。
ネットではエクスポートのときにも発生するとされています。
また、このときクエリがデザインビューで開こうとしてもエラーが発生し、開いて修正ができないときもあります。

しかも解説を検索しても、

http://dbhikaku.web.fc2.com/jet_error/jet_error_3191.html
>複数のフィールドが同じ名前で定義されているテーブルを作成しようとしました。テーブルの各フィールドは固有の名前を持っている必要があります。

というものしか出てきません。
このエラーは原因が複数考えられ、しかもフィールド名の重複と大して関係がないということがわかります。
たまたま予約語が危ないことを意識していたので比較的早期にわかりましたが。

#クエリが開けないエラー　演算子がありません
予約語が入っているとクエリを実行しようとしてもエラーが発生し、さらにデザインビューで開こうとしてもエラーになるときがあります
構文エラー : 演算子がありません。
http://dbhikaku.web.fc2.com/jet_error/jet_error_3191.html
これも予約語を使わないことで発生しなくなるようです。
Accessのクエリがエラーで開けなくなったら
https://blog.withonoware.co.jp/tech/2017/07/23/access%E3%81%AE%E3%82%AF%E3%82%A8%E3%83%AA%E3%81%8C%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%A7%E9%96%8B%E3%81%91%E3%81%AA%E3%81%8F%E3%81%AA%E3%81%A3%E3%81%9F%E3%82%89/

またこうしたときのために、クエリを作るためのマクロを組んでおくと役立ちます。
転職ドラフトで転職した話

このたび転職ドラフトで無事転職したため経緯をまとめて記載しておきます。こちらの記事は転職ドラフト体験談投稿キャンペーン（https://job-draft.jp/articles/251） に参加しています。

# 前提のまとめ
## スペック
まずは自分のスペックを記載しておきます。文系４年制大学を卒業し、新卒でITコンサルタントとして就職、６年間働いております。コンサルタントとしては珍しく、技術寄りの仕事が多く、下記に記載されている技術を取り扱い、要件定義〜開発に従事しておりました。２・３名程度のチームのリーダー業務も行っております。

- Salesforce
- Node.js
- Python
- jQuery
- Vue.js

## 転職のきっかけ
（エンジニアではないので仕方がないのですが、）役職があがるにつれ、コーディングといった手を動かす仕事が減ってきたことが転職のきっかけです。

## 転職先の希望条件
手を動かし続けられる職種への転換が目的のため、エンジニアを志望しておりました。受託・自社開発の強い希望はありませんでしたが、受託よりかは自社開発がいいかなとは思っておりました。

# 転職活動記録
## 苦労した活動序盤
当初は転職エージェント、自己応募で転職活動をしておりました。
ただ、

- 書類で落ちてしまう 

- オファーが出ても自分の希望条件を大幅に下回っている

といったことが多く、なかなか転職できないでいました。前職がITコンサルタントであり、厳密にはエンジニア未経験であることが原因であるように思えます。他に方法はないかと調べ、転職ドラフトを知り、登録しました。

下記が転職ドラフトで指名を受けたときの記録です。0件だったときの記録がないためはっきりとはわかりませんが、おそらくは２０２1年04月などはエントリーしたが指名はない状況となっており、苦戦しておりました。

- 2020年12月：1件

- 2021年03月：2件

- 2021年06月：3件

- 2021年07月：2件

- 2021年08月：4件

## キャリアの棚卸しから勢いにのれた転職中盤
転職ドラフトでなかなか指名がもらえず、エージェント経由の採用も決まらず苦戦しておりました。ここで、初めて自分が厳密にはエンジニア未経験であることが弱みになっていると気づき、自分強みを意識したキャリアの見せ方を考えました。弱みは先述の通り、厳密にはエンジニア未経験であることです。ですので、強みとしてコンサルタントならではのドキュメンテーション・コミュニケーション能力を掲げました。また弱みに関しても独学でキャッチアップできることをアピールし打ち消せるようにいたしました。

## 内定を獲得できた転職終盤
結果、転職ドラフトで指名をいただけ、そのうちの内定をいただけた１社へ転職いたしました。

# 転職ドラフトならではのよさ
## ミスマッチが少なく感じる
事前に自分のレジュメを読んで指名いただいている関係上、お互いのギャップが少ない状態で面接がスタートできていたように感じます。
## 年収面が指名時にオープンになっている
詳細は転職ドラフトのサイトをご確認いただきたいですが、年収を提示した上で指名が受けることができ、提示年収の90%を下回ることが禁止されている点もすごい良かったです。最初に年収の目安が示されることで選考を進んだ結果年収の折り合いがつかないようなことがないためです。

# 最後に
レジュメの登録などが若干大変ではありますが、エージェントや自己応募と同じように転職の手段の一つとして転職ドラフトは有力と感じております。
情報の専門学校に進学して初めて情報系科目を勉強して感じた事

---
###情報系科目を勉強するようになった経緯
---

　私は、元々情報系の世界に興味を持っていたので情報の専門学校に進学しました。
なので、必然的に情報系科目を勉強し始めることになりました。

---
###情報の専門学校に通ってみて
---

　情報の専門学校にしばらく通ってみて思ったことは、勉強は難しくとても複雑だなと感じました。例えば、専門単語の勉強やプログラミング、Webサイトの作成の仕方などこの他にも自分が苦戦している所は沢山あります。その理由は、勉強していく上で私は他の人と比べて勉強を始めたタイミングが遅いので最初の知識量が違うからです。なので、分からない箇所があれば自分で調べてみて、それでも分からなければ先生や他の生徒に相談や質問をすることが出来るので自分の知識を増やすことが出来ます。
　そして、就職をする時に役に立つ資格を取るために資格勉強をする上で私が通っている学校では資格勉強の補講があったりするので補講を活用することで資格勉強の質を良くすることも出来ます。
　私は勉強を始めてから期間が短いので、私が知らなかったことを知ることが出来て新しい知識が増えていくことはとても新鮮で楽しいです。そして、得た知識は定着させていくだけでなく今後の人生でも生かしていけるようにより深く勉強していきたいと思っています。

---
###ここまで読んでくれた方に一言
---
　私は情報の専門学校に通って良かったと思っているので、情報系の世界に興味があって進学で悩んでいる方やより知識を深めていきたい方は専門学校などに通ってみるのも1つの選択としてはアリだと私は思うのでオススメします。
Amazon EventBridge Events ルール → Amazon SNS トピックが上手く連携されなかった件

## 構成

Amazon EventBridge Events ルール → Amazon SNS → Eメール

![Untitled Diagram.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277804/5f42dcd6-470e-6c02-6cb5-4f43e70e8967.png)


## 発生した問題

Eventsルールが発火した後も, Eメールが送信されない

## 原因

SNSトピックがEvents ルールからのアクションを許可していなかった

(プリンシパルの設定がなかった)

## 対処方法

SNSトピックに関連付けられているIAMリソースポリシーに, Events ルールからのアクションを許可するステートメントを追加する

例: AWS CDKの場合 (Python)

```python
target_topic.add_to_resource_policy(
    iam.PolicyStatement(
        actions=["sns:Publish"],
        effect=iam.Effect.ALLOW,
        resources=[target_topic.topic_arn],
        principals=[iam.ServicePrincipal("events.amazonaws.com")]
    )
)
```

## 参考文献

- https://aws.amazon.com/jp/premiumsupport/knowledge-center/sns-not-getting-eventbridge-notification/
- https://docs.aws.amazon.com/cdk/api/v1/python/aws_cdk.aws_sns/Topic.html
- https://stackoverflow.com/questions/59172919/aws-cdk-how-to-include-principals-in-iam-policy

## [appendix] Events ルールが発火したかどうかを確認する方法

[Amazon EventBridge] → [ルール] → [ルールのメトリクス]

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277804/ee2b3617-5655-70ff-6f70-bb8b7a4299d8.png)


メトリクスを選択し, 統計を[合計], 期間は見やすい期間に変更する

![無題1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277804/f3bffde6-312f-5d53-f2af-843004c7afdc.png)
【Vue.js】非同期コンポーネントの関数を親から呼ぶ

非同期コンポーネントの読み込みフラグを立てた直後に`$refs['my-modal'].showModal()`や`myModalRef.value.showModal()`で呼んでも「そんなテンプレート参照無いんだけど!」って怒られたのでその対応です。
※"my-modal"は任意のref属性です

# 前提
+ Vue3のCompositionAPIを使用します。
+ コンポーネントを非同期(defineAsyncComponent)で読み込みます。
    + [Vue.js 非同期コンポーネント](https://v3.ja.vuejs.org/guide/migration/async-components.html)

# nextTickは?
nextTickは非同期コンポーネントの読み込み完了まで待機していないようです(要検証)。

```typescript
        //isAsyncModalRef.value = true; <- v-if=trueによる非同期コンポーネント一回限りの読み込み
        nextTick(()=>{
          console.log(myModalRef.value); //->null
          myModalRef.value?.showModal();//呼ばれない
        });
```

# 解決方法
初回に限りwatchでテンプレート属性を監視して呼びます。2回目以降はmyModalRefに値が入っているのでそのまま呼ぶことができます。

+ [Vue.js テンプレート参照の監視](https://v3.ja.vuejs.org/guide/composition-api-template-refs.html#%E3%83%86%E3%83%B3%E3%83%95%E3%82%9A%E3%83%AC%E3%83%BC%E3%83%88%E5%8F%82%E7%85%A7%E3%81%AE%E7%9B%A3%E8%A6%96)

https://qiita.com/doz13189/items/d09cfc6e1ff38621c2cc

```typescript
/*setup関数内*/
     const myModalRef = ref(null);
     
     function _loadedModal(){
          //console.log(myModalRef.value);
          myModalRef.value?.showModal();
      }
      watch(myModalRef,(newVal,oldVal)=>{
        if(!oldVal)_loadedModal();
      },{
        flush: 'post'
      });
    return{
      "my-modal":myModalRef,
      showMyModal(){
            //isAsyncModalRef.value = true; <-非同期コンポーネント読み込み用フラグ
            _loadedModal(); //初回は呼んでもオプショナルチェーンで無視される
      }
    }
```
javascriptの変更をブラウザに即時反映して動作確認したい

# javascriptの変更をブラウザに即時反映して動作確認したい

lite-serverを利用する。

jsやtypescriptを利用して開発をしている場合に、スクリプトの反映をわざわざブラウザの再読み込みを押さなくとも開いているブラウザを自動でリロードしてくれるツール。

# 利用できる環境構成

html & javascript & css で構成されているサーバーロジックに依存しないシステムや開発フェーズにおいて効果を発揮する。

# セットアップにいいサイト

https://enjoy-a-lot.com/typescript-init/#toc4

# 利用する際にいいサイト

http://www.ifelse.jp/blog/web-09

# わからないこと

- どんな仕組みで動いているか
- Webサーバーを持つような場合に利用シーンがあるのか、ないのか判断できてない（基本はなさそうな気がする）
情報セキュリティマネジメント試験を攻略・対策

##まずはじめに
　セキュリティ関係に就きたいと思っている学生のお話です。
　情報セキュリティマネジメントはITの安全な利用や活用をするための基本的な知識を身に着けるのに最適でした。
　そこで僕の体験談を交えながら話します。
##午前問題を攻略
　午前問題は4択問題です。

　自分なりの攻略法を紹介します

####過去問道場をひたすらやる
　https://www.sg-siken.com/sgkakomon.php
まずこちらのサイトで知識を深めます

ここで僕の場合はわからなかったら適当に押すのではなく、単語を知らべて
理解します。その後に答えを押して解説もしっかりと読みます。
サイトに書いてあることと過去問道場の二つから学ぶことで、本番の試験で焦らずに
問題を解くことができました。

##午後問題を攻略
僕は個人的に午後問題が苦手でした。
###大事なこと
・読解力
・応用力
・気持ち

問題文が長いので、大事なところを要約するのがコツです。
僕がやってみた対策法を紹介します。

###問題文をパソコンのメモに打つ
僕はタイピングが遅かったので長文を打つことにより
問題文を理解し、タイピングの練習をしました。
問題文を自動的に読むことになるので読解力が身に付き、
タイピングの速さが向上しました。
##最後に
最終的には自分のやる気次第です。
学校の先生が言っていましたが、やったことは実らなくても
自分の力になるという言葉に助けられました。
good luck!!
Udemy動画学習法

Udemyのいい勉強方法があったので（初心者向き？）、書きます。
Udemyの動画は、一度では理解できない。
だから、まず全体像を把握するために、<b>１度目は映画を見るように動画を見る（１周目はコードも書かない）。</b>
その時は、倍速で効率よくみる。
その時のポイントは、１回目に難しくなるところを把握し、２周目以降そこを重点的にみるという使い方。

もう一つの使い方は、
１回目は映画を見るように動画を見て、FacebookクローンとInstagramを作るコースを購入した場合、FacebookとInstagramの違い（<b>作るアプリの違い）を考え</b>、同じところは、１周目でさらっと見て、２周目以降は、違いを重点的にみる使い方。
この方法は、<b>海外の長いコースに使える。</b>

その他の事項は、
プログラム学習の一歩目！「壁を階段」にするように学習のコツを解説します。 Part1
https://www.udemy.com/course/study-hack-part1/
このコースに書いてあります。
記事というよりただのメモ？

Androidアプリで複数フラグメントで共有のViewModelを持つ方法について

その前にViewModelの概念についてよくわからないまま使用していたので、いろいろ調べたら以下の単語が出てきた
・activityViewModels
そのアクティビティで定義されてるViewModel？
・viewModels
こいつはなんだ？？？どうやって使うんだ？
・navGraphViewModels
こいつはnav_graph.xmlで同じnavigation内に定義されているfragmentの時に使えるらしい。

testFragmentで以下のような実装をしてみた。

private val sharedViewModel: SharedViewModel by activityViewModels()
private val test2ViewModel: Test2ViewModel by activityViewModels()
SharedViewModelはMainActivityで定義されている
Test2ViewModelは別のfragmentで生成されたViewModelであり、それを読み取りたい。

SharedViewModelは取れたがTestViewModelが取れてなさそう
これで解決！　インライン要素とブロック要素

HTML学習を始めてすぐに私自身、ブロック要素とインライン要素の壁にぶち当たりました、、、、

そこで私なりに互いの特徴についてまとめてみました！

##ブロック要素
<ul>
<li>開始タグと終了タグで囲った箇所は行全体が１つのブロックとして扱われるため、範囲が横いっぱいに広がる</li>
<li>必ず改行される</li>
<li>margin・paddingの指定ができる</li>
<li>width・heightに指定ができる</li>
</ul>

主なブロック要素タグ
`<div>`、`<dl>`、`<ul>`、`<table>`、`<form>`、`<p>`、`<ol>`、`<h1>-<h6>`etc...
<br><br>

##インライン要素
<ul>
<li>改行されない</li>
<li>margin・paddingの指定ができない</li>
<li>width・heightに指定ができない</li>
</ul>

主なブロック要素タグ
`<span>`、`<a>`、`<abbr>`、`<button>`、`<br>`、`<img>`、`<i>`、`<strong>`etc...
<br><br>
上記のような違いブロック要素とインライン要素の違いです！
<br><br>
参考サイト
https://webst8.com/blog/css-display/
Laravelのカラム追加方法

既にテーブルは構築済みであり、後から機能の追加に伴いテーブルのカラムも追加する必要が出てきたたとします。

今回、筆者が行った方法について紹介させていただきます。

###追加migrationファイルの作成

```
php artisan make:migration add_article_to_users_table --table=users
```

usersテーブルにarticleというカラムを追加する為、上記artisanコマンドを実施。


migrationのフォルダ内に『2022_01_12_140902_add_article_to_users_table.php』というファイルが作成されます。

```php:2022_01_12_140902_add_article_to_users_table.php
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class AddArticleToUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('users', function (Blueprint $table) {
        //{{ ここに追加したいカラム情報を記入 }}
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('users', function (Blueprint $table) {
            //
        });
    }
}
```

###追加したいカラム情報の反映

UP（）の中に追加したいカラム情報を記載します。
例）↓

```php:2022_01_12_140902_add_article_to_users_table.php
    public function up()
    {
        Schema::table('users', function (Blueprint $table) {
        $table->string('article',400)->nullable();
        });
    }
```

『$table->string('article',400)->nullable();』というカラム情報を追加したい場合は上記記載となります。



```
php artisan migrate
```
追加したカラム情報が一通り記載終えたら、
最期に上記artisanコマンドを実施。
以上となります。
Wslのubuntuでsudoコマンドが使えなくなった

# はじめに
備忘録と困ったことの共有として、初めて記事を書きます。
# 環境
- Windows Terminal
    - wsl2
        - ubuntu 18.04
        - ubuntu 20.04
    - Windows PowerShell
   
# 起こった問題
wsl2のubuntu18.04で**sudoコマンドが使えなくなった**。
具体的には`sudo apt`や`sudo chmod`をした時に`コマンドが見つかりません`と言われてしまう。
# 原因
wslでusbシリアル通信をしたくて、sudoersのsecure_pathをいじってしまったため、sudoコマンドが実行できず、sudoersファイルの書き直しもできなくなってしまった。
> sudoersとは(自社調べ)
> sudoコマンドのパスなどの諸々の設定を行う。`sudo visudo`により変更できる。

# 対処
PowerShellから下記を打ち込む

```powershell
wsl -u root
```
PowerShellから、wslのubuntuをroot(管理者権限？)で実行できるので、そのまま`sudo visudo`でsudoersファイルを書き直せばよい。

## wslで複数のディストリビューションを作っている場合
既定のディストリビューションが起動するので、既定を変更する必要がある。
`wsl -l`で起動できるディストリビューションを確認。
(規定)と書かれたディストリビューションが規定。

```powershell
PS C:\Users\username> wsl -l
Linux 用 Windows サブシステム ディストリビューション:
Ubuntu-18.04 (既定)
Ubuntu-20.04
```
上記例では18.04が規定なので`wsl -s Ubuntu-20.04`で20.04に規定を変更する。
特に変更された通知はないので、`wsl -l`で確認。

# おわりに
余談ですが、実機でsudoresの設定を間違えた時は、ubuntu起動時に選択できるリカバリーモードで修正できるらしいです。
raspiで間違えた時はsdカードをいじる感じらしいです。
もっとsudersについては知らない設定もあったので勉強していきたい所存です。
CSS で等幅フォントファミリーを指定しているのに等幅で表示されない

## 結論

等幅フォント名を総称ファミリーとあわせて指定する必要がある。


## 理由

以下のような総称ファミリー指定のみの場合は、代替フォントが望ましいものにならないことがある。

```css
font-family: monospace;
```

## 具体的には

VSCode(Windows) の指定は下記となっている。

```css
font-family: 'Courier New', Consolas, monospace;
```

VSCode(Mac) の指定は下記となっている。

```css
font-family: Menlo, Monaco, 'Courier New', monospace;
```


## 参考

- [CSS で font\-family: monospace 指定だと等幅フォントが適用されない？ \- Neo's World](https://neos21.net/blog/2017/10/22-01.html)
- [【2021年版】font\-familyの正しい指定方法とおすすめフォント設定まとめ](https://willcloud.jp/knowhow/font-family/)
- [font\-family \- CSS: カスケーディングスタイルシート \| MDN](https://developer.mozilla.org/ja/docs/Web/CSS/font-family)
【Corda】 InteliJ IDEA で cordapp-template-kotlin を実行してみる

## まずはcordapp-template-kotlinのクローン
https://github.com/corda/cordapp-template-kotlin

```shell
// sshの場合
git@github.com:corda/cordapp-template-kotlin.git
```

## IntelliJ IDEA Community版のダウンロードとインスト-ル

こちらからOSを選択してCommunity版をダウンロードし、インストールします。
https://www.jetbrains.com/ja-jp/idea/download/

インストールできたらIDEAを開きます。
するとWelcome windowが表示されるのでOpenを選択して、先ほどクローンしたcordapp-template-kotlinを開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263661/66f4f5ae-5dfa-8e3a-58dd-b5da4ddbca2a.png)

何やらimportを始めるのでしばらく待ちます。

## IntelliJ IDEA JDKの設定
Preference -> Build, Execution, Deployment -> Build Tools -> Gradle を選択します。

Gradle JVMが1.8になっていればOKです。
なっていない場合、Add JDK...でインストール済みのものを選択するか、Download JDK...で新しくダウンロードしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263661/caee924d-217a-2e3a-9312-d146560138f8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263661/b786c1b7-48bf-78ed-f1d0-75dd451811cb.png)


## Testの実行
FlowTestsを開き、緑のテスト実行ボタンでTest実行できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263661/54a3eec7-32f1-e557-02c9-d2a48565f65b.png)
Bashスクリプトで九九表を作ってみた

Bashスクリプトを仕事で欠かないといけないので、学習がてらBashスクリプトで九九表を作成してみました。

# 全体のコード

```bash
#!/bin/bash
function munipulate(){
    for ((stepNumber=1 ; stepNumber<10 ; stepNumber++)) do
        printf $stepNumber"の段｜"
        for ((i=1 ; i<10 ; i++)) do
            result=$((stepNumber*i));
            if [ ${#result} = 1 ]; then
                printf "  $result"
            else
                printf " $result"
            fi
        done
        printf "\n"
    done
}

munipulate

```

#　コードの解説をします

まず最初の

```
#!/bin/bash
```

で、bashスクリプトのファイルを実行させるために必要なものを宣言させます。要はおまじないですね。
その次に、掛け算をするために必要なメソッドを宣言します。

```
function munipulate(){
```

一番最初の外側のfor文で、

```
    for ((stepNumber=1 ; stepNumber<10 ; stepNumber++)) do
        printf $stepNumber"の段｜"
```
を生成させます。
これをすることで、九九表に必要な~の段の部分を出力します。

そして、二つ目のfor文で掛け算の答えの部分を生成させます。

```
        for ((i=1 ; i<10 ; i++)) do
            result=$((stepNumber*i));
```

どうやっているかというと、外側のfor文の数字と今内側にあるfor文の変数をかけます。
そして、内側のfor文が抜けるタイミング(for文のループが一周したタイミング)で改行を入れることで、


```
1の段｜  1  2  3  4  5  6  7  8  92の段｜  2  4  6  8 10 12 14 16 183の段｜  3  6  9 12 15 18 21 24 274の段｜  4  8 12 16 20 24 28 32 365の段｜  5 10 15 20 25 30 35 40 456の段｜  6 12 18 24 30 36 42 48 547の段｜  7 14 21 28 35 42 49 56 638の段｜  8 16 24 32 40 48 56 64 729の段｜  9 18 27 36 45 54 63 72 81
```
と横一列に出力されるのを防ぐことができます。

# よし、これで完成しただろうと思っていました。
完成コードは以下です。

```bash
#!/bin/bash
function munipulate(){
    for ((stepNumber=1 ; stepNumber<10 ; stepNumber++)) do
        printf $stepNumber"の段｜"
        for ((i=1 ; i<10 ; i++)) do
            result=$((stepNumber*i));
            printf "$result"
        done
        printf "\n"        
    done
}

munipulate

```

ただ、これだとものすごく出力が汚いんですよね。

```
1の段｜123456789
2の段｜24681012141618
3の段｜369121518212427
4の段｜4812162024283236
5の段｜51015202530354045
6の段｜61218243036424854
7の段｜71421283542495663
8の段｜81624324048566472
9の段｜91827364554637281
```
これだと１８なのか1と8なのかわからないですよね。

なので、二つ目のfor文の中に条件分岐があります。

```bash
            if [ ${#result} = 1 ]; then
                printf "  $result"
            else
                printf " $result"
            fi
```

まず、${#result}で、掛け算の結果の答えが一桁なのか二桁なのか判定します。
そして、もし一桁だった場合は左側に半角スペースを2ついれて、2桁だった場合は半角スペースを一つだけ挿入させることで表を整形しています。

出力するとこんな感じになります。

```
1の段｜  1  2  3  4  5  6  7  8  9
2の段｜  2  4  6  8 10 12 14 16 18
3の段｜  3  6  9 12 15 18 21 24 27
4の段｜  4  8 12 16 20 24 28 32 36
5の段｜  5 10 15 20 25 30 35 40 45
6の段｜  6 12 18 24 30 36 42 48 54
7の段｜  7 14 21 28 35 42 49 56 63
8の段｜  8 16 24 32 40 48 56 64 72
9の段｜  9 18 27 36 45 54 63 72 81
```

# よし!!完成しました！！！！！
JavaのHttpClientで、APIのレスポンスボディを自作クラスのインスタンスにする方法

# 以下のAPIのレスポンスボディを扱いやすくしたい
```json
{
  "id":"1",
  "name":"田中"
}
```

# 方法

### レスポンスボディに対応したプロパティを持つクラスを作成する
```java
public class ApiResponseBody {
  private String id;
  private String name;
}
```

### jacksonを導入する(今回はMaven)
```xml
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-core</artifactId>
    <version>2.13.1</version>
</dependency>

```
### レスポンスボディを自作クラスのインスタンスにする
```java
// APIにリクエスト
var client = HttpClient.newHttpClient();
var request = HttpRequest.newBuilder()
    .uri(URI.create("URL"))
    .build();
var response = client.send(request, HttpResponse.BodyHandlers.ofString());

// レスポンスボディをApiResponseBodyにパーシング
var objectMapper = new ObjectMapper();
var apiResponseBody = objectMapper.readValue(response.body(), ApiResponseBody.class);
```
ワイ「Node.jsってなんぞや？」

#ワイ「JavaScriptを触りたいンゴ」
ワイ「せっかくJavaScriptとTypeScriptについて知ったから触ってみたいで」
PC「JavaScriptはブラウザ上で動く言語やで＾＾」
ワイ「なんやこいつ」
ワイ「C++とかPythonとかとは仕様が違うんか」
PC「せや」
PC「だからファイルの読み書きが出来なかったり、通信が出来なかったりするんやで＾＾」
ワイ「なんやこいつ」
![js-ts.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379533/df4cc731-f64f-17ab-1270-90e15ab6ab65.jpeg)


#ワイ「どうするのが正解なんや？」
ワイ「まあ誰かがいい感じの作ってくれてるやろ（未来予知）」
PC「`Node.js`を使えばいいんやで」
ワイ「ほらな」
ワイ「なんやそいつは」
Nodeくん「説明しよう！！」
ワイ「なんやこいつは」
Nodeくん「`Node.js`は一言で言うと、JavaScriptの`実行環境`だよ」
Nodeくん「ローカルで実行するからファイルの読み書きや、通信が出来るようになるんだ」
ワイ「やっぱり先人ｻﾏｻﾏやで＾＾」
![2b818ff6f46e84d8aee42f4fbb72888e83d17346.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379533/2b0db472-fc29-6524-5dc4-5dfee04aac0c.png)

#ワイ「npmってなんや？」
ワイ「早速`Node.js`をインストールしたで　インストーラーから簡単に入れれて便利な時代になったもんや＾＾」
ワイ「でも記事とかでよく見る`npm`ってなにモンなんや？？」
Nodeくん「`npm`はパッケージを管理するツールだね」
Nodeくん「だから`npm`は`pip`や`apt`みたいなもんだね」
ワイ「ということはライブラリをこっからインストール出来るんか？」
Nodeくん「exactly!!」
Nodeくん「だからJavaScriptのソースをDLして`<script>`でincludeしなくていいんだ！」
ワイ「はえ～　便利やな～」

#ワイ「npmで何が入れれるんや？」
ワイ「`npm`が`pip`的なのは分かったけど有名どころさんは何があるんや？」
Nodeくん「有名どころで言うと、フレームワークに`Express.js`や、JavaScriptのフレームワークに`Vue.js`があるよ」
ワイ「初めて聞いたな」
Nodeくん「`Express.js`は一番有名なライブラリで、APIの実装とか`Node.js`での開発を爆速にしてくれるんだ」
ワイ「なるほどな？」
Nodeくん「主にWebアプリケーションの開発に向いてるね」
Nodeくん「Vue.jsも大人気`JavaScript`フレームワークだよ」
ワイ「こっちはちょっと聞いたことあるぞ」

#Nodeくん「Vue.jsについて」
Nodeくん「`Vue.js`はhtmlを動的に制御できるフレームワークみたいな感じかな」
ワイ「ほう」
Nodeくん「hoge.vueファイル形式で記述していって、`<template>`、`<script>`、`<style>`を同一ファイルに入れれるんだ」
ワイ「便利やなぁ」
Nodeくん「それだけじゃなくてhtmlのタグに`if`や`for`を入れれたりもするんだ！！」
ワイ「想像以上に便利だな」
ワイ「たくさん知れたわ」
ワイ「ワイのNode.js人生の始まりや！」

##自分が作成したVueプログラム
- bv-https://github.com/Kazuryu0907/bv
- vue-bootstrapを使用

####これは高専の課題で作成された記事です
最後まで読んでいただきありがとうございました。

#参考文献
- [ゼロからはじめるExpress + Node.jsを使ったアプリ開発](https://qiita.com/nkjm/items/723990c518acfee6e473)
- [【必ず知っておきたい】おすすめNode.jsフレームワーク](https://wiblok.com/js/node/node_framework_2021/)
- [ワイ「いうても型なんて面倒くさいだけやろ？」(Qiita)](https://qiita.com/Yametaro/items/2eaa6fd75255c8c2a2bb)
Power BI Desktop 2022/01/10リリース版新機能「スパークライン」

>Parallels Desktop 17 for Mac & Windows 11（Preview版）をインストールしたMacBook Air（M1チップ搭載）上でPower BI Desktopを動かしています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/e7ce5d61-90c1-1400-eec6-4d3864bbbc39.png)

##バージョン2.100.1182.0

2022年1月10日に、Power BI Desktopのマイナーバージョンアップ版2.100.1182.0の日本語版が公開されました。

https://www.microsoft.com/ja-JP/download/details.aspx?id=58494

主要新機能の1つが「スパークライン」です。
NHKが提供するオープンデータを使い、同機能を試しました。

https://www3.nhk.or.jp/news/special/coronavirus/data-widget/

データをPower BI Desktopに取り込み、表スタイルで表示させます。
県別の感染者数の期間集計値です。
地方名称の列は、別途作成し、マージさせています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/80c9e59a-53b5-c207-83fa-19d766e1b041.png)

右側のフィールドを配置したパネルを右クリックします。
「スパークラインの追加」を選びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/830e711f-6d6d-8bf5-2ac0-07ea3fa2b866.png)

##スパークライン追加

設定画面に「合計値」に使ったフィールドと、期間を表す要素を設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/f3f87dd7-b4d2-8515-090e-552649fcc3b1.png)

表に小さいグラフが追加されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/f4d4eec8-3098-7cc1-d8bc-3dd46cf916cf.png)

合計値降順でソートすると、その上位以外の県で数値が急上昇している様子が散見できます。

##スパークライン設定変更

ビジュアル変更用設定パネルも用意されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/539ab1bb-0b68-2228-035b-847107f1392a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/6b690b6c-def7-b7ad-fb64-8fb386f86306.png)

線を太く、最大値にマーカー表示と変更しました。
マーカーの色とサイズも変えました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/c84a4740-b3e1-d010-bd02-c851a717f752.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/e7ce5d61-90c1-1400-eec6-4d3864bbbc39.png)

スパークラインを棒グラフスタイルにすることもできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/255e6adb-987c-19c6-06aa-269811b4ce08.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/7660337e-10fa-6afd-42f7-cc9d73b31c66.png)

**了**
要素を中央配置するにはこれ！

```:HTML
<div class="main">
   <div class="container">
   <div>
</div>
```
```:CSS
.main {
  position: relative;
}

.container {
  position: absolute;   
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
```

上記のように、position: relative;とposition: absolute;を使うことによって、要素を中央配置することができます！
RailsのViewの役割とRoutingについて

## はじめに
基本は備忘録
MVCについて役割ごとにまとめる機会があったので整理します。

## View
htmlファイル　拡張子がsample.html.erb

## 新しいページを作成する
(新たなコントローラとviewを作成 + routingの設定)

```rb
# localhost:3000/home/topにアクセス可能
# 同じ名前のコントローラがすでにある場合コマンドが使えない
rails generate controller コントローラ名　アクション名

rails g controller posts index
```

## link_to
aタグに変換する。

```rb
# Prefixで設定
# rails routesでPrefixを確認
<%= link_to("文字列", post_path) %>
```

```rb
# urlで指定
# /で始める routingに合わせる
# postのroutingの時は{method: "post"}
<%= link_to("文字列", "/posts") %>
```

## パーシャル
共通して使えるファイルを1つにまとめたもの
パーシャルとして使うファイル名は`_sample.erb`のように`_`から始める

```rb
# 呼び出し方 読み込ませる時は「_」がいらない
# 第3引数に post: @postで変数も渡せる
<%= render "dir_name/file_name"%>
```

## formを作成する

```rb
# view側の設定
# form_tag(送り先のURL)でフォームの送信先を指定
# textareaのname属性をキーにして、ハッシュでアクションに送る
<%= form_tag("/posts/create") do %>
  <textarea name="content"></textarea>
  <input type="submit" value="投稿">
<% end %>
```

---
---
---

## Routing

`resources :posts`とすることで、基本となる7つのアクションへのルーティングを自動的に設定する

```rb
get "URL" => "コントローラ名#アクション名"

get "/" => "home#top" # railsデフォルトのページ無くす
get "about" => "home#about" #home contのaboutを使う

resources :posts # クラッドの7つのアクションを一括設定
```

```rb
# ルーティングは上から実行される 書く順番に気をつける
# 以下の順番はよくない例だが、わかりやすくするためこの順番にしている
get "posts/index" => "posts#index"
get "posts/new" => "posts#new"
post "posts/create" => "posts#create"

get "posts/:id" => "posts#show"
get "posts/:id/edit" => "posts#edit"
post "posts/:id/update" => "posts#update"

post "posts/:id/destroy" => "posts#destroy"
```


---
URLにidを含ませる方法は下記

```rb
# view側のlinkのurlにidを混ぜる
## post.idの部分がparamsにハッシュで保存される
<%= link_to(post.content, "/posts/#{post.id}") %>
```

**設定済みrouting情報を確認**
`rails routes`
github ssh接続【備忘録】

①ファイル名を作成する
（ローカルのMAMP上にファイルを作成する場合）
②git上に【任意の名称の】リモートリポジトリを作成する
③ローカルのファイルにgitを以下のコマンドを打って生成する。
git init
④ローカルのgit とリモートのgit を以下のコマンドで連携させる。
git config --local user.name 【自分のgithubユーザー名】
git config --local user.email 【自分のgithubメールアドレス】
⑤ssh方式で連携する場合は、ローカルの.sshにキーを以下のコマンドで生成する。
mk.ssh
cd .ssh  
で、sshファイルの中に入る。
ssh-keygen -t rsa
の次に、リモートリポジトリの名称を入れ込んで決定ボタンを押す。
⑥sshファイルのconfigファイルを開いて、.pubの内容をコピーする。(configがない場合は作成する)
⑦gitの公開キーをsettings→SSH　and　GPC　keysに登録を行う。
⑧sshファイル内にあるconfigファイルを編集する
Host 【リポジトリ名】
User git
HostName github.com
Port 22
IdentityFile ~/.ssh/【リポジトリ名】
⑧gitが入っているファイルをターミナルで開いて以下のコマンドを叩いて、ファイルをローカルリポジトリにつなぐ
git remote add origin  【sshファイルのHost名】:【ローカルリポジトリのSSHcode】  
⑨新規登録できたらgit pull origin mainでファイルをローカルに落とし込む
⑩作業開始

自分にとっての備忘録です。
よりやりやすい方法あれば、どんどん更新していきます。
RailsのControllerの役割

## はじめに
基本は備忘録
MVCについて役割ごとにまとめる機会があったので整理します。

## Controller
*ModelやViewとdateのやりとりをする*

## CRUD(クラッド)処理
システムに必要な4つの主機能

```rb
C Create # データの作成
R Read # データの読み込み
U Update # データの更新
D Delete # データの削除
```

*railsは7つを推奨している*

```rb
index # データの一覧を表示する
new # データを新規作成するためのフォームを表示
create # データを新規作成し、データーベースへ保存

show # 指定したデータを表示
edit # データを更新するためのフォームを表示
update # データ更新

destroy # データ削除
```

---

**一覧データの表示と作成**
**index**

```rb
# DBから全てのデータ(@posts)を取得しViewに返却
#.order(created_at: :desc)で並び替え
@posts = Post.all
```

**new**

```rb
# インスタンス変数(@post)を作成し、それをViewへ返却
@post = Post.new
```

**create**

```rb
# Viewからの送信値(params)を元にデータを作成し、DBへ保存
# formの内容をparamsを使って取得している
@post = Post.new(params[:xx])
@post.save
Post.create(params[:xx])
```
---

**データの更新と削除**
**show**

```rb
# 投稿の詳細を表示
# Viewからの送信値(params)を元にデータを探し、それをViewへ返す
@post = Post.find(params[:id])
```

**edit**

```rb
# Viewからの送信値(params)を元にデータを探し出し、Viewに返却
# View側でデータを更新するためのフォームを表示
@post = Post.find(params[:id])
```

**update**

```rb
# Viewからの送信値(params)を元にデータを更新します
@post = Post.find(prams[:id])
@post.update(params[:id])
```

**destroy**

```rb
# Viewからの送信値(params)を元にデータを探し出し、削除
@post = Post.find(params[:id])
@post.destroy
```

---

## 応用機能4つ

## before_action
*アクションが実行される前に何らかの処理を行う*

```rb
# postsコントローラで共通させたい処理
# postsコントローラでbefore_actionを記述

# 全てのコントローラで共通させたい処理
# applicationコントローラに記述
```

```rb
before_action :set_current_user

def set_current_user
  @current_user = User.find_by(id: session[:user_id])
end

# 特定のアクションで利用
# Application..で定義したメソッドは
# 継承元で定義したメソッドなので利用できる
before_action :authenticate_user, {only: [:edit, :update]}
```

## strong Parameter
form等からの不必要な情報を受け付けないように設定できる
ハッキング対策

```rb
params.require(:モデル名).permit(:カラム名, :カラム名2)
```

## フラッシュメッセージ

```rb
# 次のアクションまで表示
flash[:notice] = "表示したい文字列"

## 失敗した時
flash.now[:notice] = "表示したい文字列"
```

```rb

# view側 application... <body>最上部
# flashメッセージがある時のみ表示する
<%  if flash[:notice] %>
  <div class="flash">
    <%= flash[:notice] %>
  </div>
<% end %>
```

## redirect_to / render
controllerの経由回数が違うのでflashの使い方に気をつける

**redirect_to**

```rb
# レダイレクトする 引数はrouting
redirect_to("/posts/index")
```

**render**

```rb
# 他のactionを経由せず、現在のactionの@変数を使える
# renderはrender("フォルダ名/ファイル名")
render("posts/edit")
```
RailsのModelの役割

## はじめに
基本は備忘録
MVCについて役割ごとにまとめる機会があったので整理します。

## Model
modelの役割はDB関連の処理
*date取得などの処理や、date自体の作成・削除*


## 新しいテーブルを作成
*モデル・マイグレーションファイルが作成される*
`db/migrate/`配下にmigrationファイル
`app/models/`配下にモデル

```rb
# DBに変更を指示するmygration fileを作成
# カラムが複数個ある場合は,は不要 name:string mal:string
rails generate model Post content:text 

# DBに変更を反映 id, created_at, updated_at, は自動生成
rails db:migrate

```

```rb
# データ型
integer 整数
float 少数
string 文字列
text 長い文字列
boolean 真偽値
```


---

## 既存のtableにカラムを追加する
`db/migrate`配下

```rb
# migrationファイルのみを作成
# 中身を記述
# rails db:migrate
 
rails g migration ファイル名 # 関連ある名前にする
```

**migrationファイルの内容を記述**

```rb
def change
# ここに処理
# 既存のテーブルにカラムを追加する
  add_column :table名, :column名, :データ型
end
```

---

## バリデーションを設定
不正なデータがDBに保存されないようにする仕組み
モデルで設定する `app/models/`配下

```rb
# validates :検証するカラム, {検証内容} カラム別に設定
# 空なら弾く, 文字数制限140字
  validates :content, {presence: true, length: {maximum: 140}}
  
  # 重複した登録を防げる
  validates :email, {uniqueness: true}
```

```rb
presence: true #=> 値が存在しているかを確認
uniqueness: true #=> 値が重複していないか
length: {minimum:4} length: {maximum:16}
format: {widh: 正規表現} #=>値のフォーマットを指定
inclusion: {in: [draft]} #　値の候補を指定
```

## エラーメッセージを表示
form_tagのtextareaの上に配置。　エラーがない場合は何も表示されない

```rb
# saveメソッドでvalidationに失敗すると、error messageが自動で生成される
# @post.errors.full_messagesの中に配列で入る
# view側でeach文を使ってエラー文を表示する
<% @post.errors.full_messages.each do | message | %>
  <%= message %>
<% end %>
```

## データを操作

```rb
# rails consoleや action内で取得する
  post = Post.new(name: '田中', age: 18)
  post.save

  # 変数 = モデル名.条件
  post = Post.first
  post1 = Post.all
  post2 = Post.all[0].content
  post3 = Post.find_by(id: 1)
  post4 = Post.find(1)
  
  post.destroy
```
Figmaのファイル名に日本語をつけると共有URLが長くて困る？実は短くできます

## 多分みんな経験していること

1. Figmaのファイル名に日本語をつける
1. Share > Copy link
1. 以下のような、とても長いURLが生成される
    1. `https://www.figma.com/file/abcdefghijklmnopqrstuv/%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E5%90%8D`
1. ドキュメントに載せるときに場所を食う、若干見づらい

## 解決策

上記の例で出したURLで言えば、以下のように削って大丈夫です。

`https://www.figma.com/file/abcdefghijklmnopqrstuv`

※`abcdefghijklmnopqrstuv`の部分はファイルによって違います。後述するfile keyというものです。

## 仕組み

まずはFigma APIを見てみます。

https://www.figma.com/developers/api#get-files-endpoint

> The file key can be parsed from any Figma file url: https://www.figma.com/file/:key/:title.

file keyを取得するための説明ですが、FigmaのファイルのURLの構造は上記のようになっているみたいです。

恐らく、識別子である`key`の後に`title`がついているのに過ぎないので、消してもちゃんとアクセスできる……ということだと思います。

## 何故気付いたのか

1. URLにファイル名がついているのは気付いていた（英語のファイル名はもちろんエンコードされないのでURLにそのまま反映されている）
1. ファイルのタイトルを変えた
1. 過去にドキュメントに載せていたURLから飛んでもちゃんとアクセスできる
1. 再度Copy linkをするとURL内のタイトルは変わっていた

てっきりファイルを新規作成した際の名前がURLとしてはずっと使われているのかと思ったのですが、そうではないらしいことに気がつきました。

「URLのうち、ファイル名に相当する部分を消したらどうなるんだろ」と思って消してみたら問題なくアクセスできたので、ほぼ偶然気づいたようなものです。
AzureBlobStorage.UploadBlobAsync の注意点

# AzureBlobStorage.UploadBlobAsync の注意点

https://docs.microsoft.com/ja-jp/azure/storage/blobs/storage-quickstart-blobs-xamarin#upload-blobs-to-a-container

`AzureBlobStorage.UploadBlobAsync` ですが、公式ドキュメントでは以下のように記載があります。

>このメソッドは、BLOB がまだ存在しない場合は作成し、既に存在する場合は上書きします。

と言うことで以下のコードを書きました。

```C#
var container = new BlobContainerClient(connectionString, containerName);
var stream = File.OpenRead(path);

// BLOB が存在してたら上書きされるはず
container.UploadBlobAsync(uploadPath, stream)
    .ContinueWith(result => {
        stream.Dispose();
        if (!!result.IsCompletedSuccessfully) {
            // 成功時の処理
        } else {
            // 失敗時の処理
        }
    });
```

これはよくある日本語に翻訳する際の間違いです。
上書きされずにステータスには `Faulted` が返ります。

英語版では以下のように記載がありました。

>A RequestFailedException will be thrown if the blob already exists. To overwrite an existing block blob, get a BlobClient by calling GetBlobClient(String), and then call Upload(Stream, Boolean, CancellationToken) with the override parameter set to true.

>BLOB がすでに存在する場合は、RequestFailedExceptionがスローされます。既存のブロック BLOB を上書きするには、GetBlobClient(String) を呼び出して BlobClient を取得し、override パラメータを true に設定して Upload(Stream, Boolean, CancellationToken) を呼び出します。

上書きしたい場合は `AzureBlobStorage.UploadBlobAsync` ではなく `BlobClient.Upload` を使いなさいと言うことです。

と言うことで以下のコードに書き換えました。

```C#
var container = new BlobContainerClient(connectionString, containerName);
var stream = File.OpenRead(path);

// BLOB が存在してたら上書きしたい場合は BlobClient の UploadAsync を利用する
var client = container.GetBlobClient(uploadPath);
client.UploadAsync(stream, true)
    .ContinueWith(result => {
        stream.Dispose();
        if (!!result.IsCompletedSuccessfully) {
            // 成功時の処理
        } else {
            // 失敗時の処理
        }
    });
```

まぁ、ドキュメントは公式とは言っても元ソースを参照しないといけないと言うことです。
AWSまとめてみた

#AWS入門
AWSを何度か触ってみたことはあるけど毎回毎回学び直して立ち上げており、きちんとまとめないとなと思いまとめたいと思います。また、コマンドの意味などもきちんとわかるようにまとめようと思います。

##EC2の立ち上げ
####1. インスタンスを起動をクリック
![スクリーンショット 2022-01-12 21.15.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471496/2c5dd0d4-09aa-4afb-bc94-1a1c354dc97b.png)

####2. Amazon Linux 2 AMI Kernel 4.14, SSD Volume Typeを選択

無料枠で使用できるインスタンスを使用する。

####3. t2.microを選択
こちらも無料枠で使用できるスペックにしておく。

####4. インスタンスの詳細の設定
**ネットワーク**

:::note info
EC2を立ち上げる際にVPCがないと立ち上げることができないため,
VPCを設定していないがデフォルトで設定されている。
:::

**自動割り当てパブリックIP**

:::note warn
こちらは有効にしておく。有効にしておくと自動でIPを割り当ててくれる。
:::

####5. ストレージの選択
ここは特に変更する必要がない。


####6. タグの設定
名前を設定することができる。
例えばキー：Name、値：WebServer
とかにしておく。

####7. セキュリティグループの設定
アクセスできるプロトコルやIPアドレスを設定できる。
0.0.0.0/0は全てのIPからのアクセスを可能にする。
Webサーバの場合は、タイプからHTTPSやHTTPのプロトコルを有効にしておく必要がある。

####8. 起動
キーペアをダウンロードした後に起動させる。

##SSH接続
Macではターミナルを使ってSSH接続することができる。

```shell
mv /Users/xxx/xxx/xxx/xxx/udemySample.pem ~/ .ssh/
```
.pemファイルを.sshフォルダに移動する。

```shell
chmod 400 ~/.ssh/udemySample.pem
```
chmodは権限設定を変更するコマンド。
pemファイルのアクセス権限を400に変更する。
chmodの権限設定については[こちら](https://prograshi.com/general/command/chmod-400/)。

```shell
ssh -i ~/.ssh/udemySample.pem ec2-user@パブリックIP
アドレス
```
以上でSSH接続が可能。
Swayで音が出なかった話

# Sway on Archlinuxの構築中に
Ubuntu 22.04が出るまでのつなぎとして、Archlinuxで日頃使いの環境を組んでみようかなと。
で、以前Ubuntu 21.10でSwayを組んだときの手順を追いかけながら進めていたのですが、、、音が出ない！

# 症状
pavuctlではインジケータが動きますので、内部的にちゃんと音を出そうとしているっぽいのですが、、、出ない。

# 原因
最終的に、マルチディスプレイにするために入れていたconfigが悪さしていたことが判明。

```
output HDMI-A-3 pos 3840 0 res 3840x2160@23.976Hz

```
高解像度並べてマルチディスプレイにするとマウスの動作がもっさりするので、少しでも軽くしようとHzを最小にしてみたつもりだったのですが、、それが悪さしていたみたいで。
@以降を消したら、音が出るようになりました。

てか音以前に、たまに画面がクラッシュしてswayが落ちることがあり、そういう意味でもHzの指定が悪かったのかもしれません。
ハマった。。。
[Unity初級]Sceneビューが急に白黒になったら

#概要
Sceneビューが急に白黒になって困った時には
![スクリーンショット 2022-01-12 21.13.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/ec7f2591-82a3-1cfb-5dc1-6ef1375f9911.png)

#本文
もしかしたら検索欄に何か文字が入っているかもしれません。その時は文字を消せば元に戻ります。
![スクリーンショット 2022-01-12 21.18.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/5ef7a849-a390-2f88-e404-069fcda18991.png)

#検索ワード
困ってる人が少しでもたどり着けるように....

シーンビュー、画面、色が無い、色が消えた、モノクロ、モノトーン
ループ処理で大量にテーブルコピーする方法[Bigquery]

##概要
Bigqueryでループ処理のSQL実行をさせたい！という状況が発生した場合どうしますか！？
「Pythonで処理を動かす方法」,「CUIでshellで処理を動かす方法」など様々ありますが
今回、紹介するのは[Bigquery]のSQLでループ処理を動かす方法です！

### 実装コード解説
テーブル名称リストを作成して日付suffixをつけながら
ループ処理で大量にテーブルをコピーする方法

#### クエリ

```sql:sql

DECLARE  a ARRAY<STRING>;
DECLARE  b INT64 DEFAULT 1; 
DECLARE  c STRING;
DECLARE  d STRING;

CREATE TEMPORARY FUNCTION getday() AS (FORMAT_DATE("%Y%m%d", CURRENT_DATE());
--コピーした日付をテーブル名にsuffixとして投入する為現在日付を取得。

SET
  a = (
  SELECT
    ARRAY_AGG(col) AS list
  FROM (SELECT col
    FROM  ``)
    );

WHILE
  b <= ARRAY_LENGTH(a)
DO

SET
  d =(
  SELECT
    col
  FROM
    ``
  WHERE
    col = a [ORDINAL(b)] );
SET
  c = d || getday();
EXECUTE IMMEDIATE
  FORMAT('CREATE OR REPLACE TABLE %p AS SELECT * FROM ', c);

SET b = b + 1;
END WHILE;

```
[Python] Youtube APIを使って動画の視聴回数動向をExcel出力しグラフ化

##はじめに
- 今回はPythonを使ってYoutubeのAPIを呼び出して視聴回数動向のグラフを作成するプログラムを備忘として残しておきます。
- スクリプト中に無駄な部分があるのは許してください。笑

##対象者
- Pythonを使ったYoutubeAPIの使い方に興味がある人
- グラフ作成を自動化してみたい人

##項目
1.概要
2.スクリプトとグラフ
3.おわりに

##概要
- 流れ：①YoutubeAPIKEYを作成、②任意の動画のIDをURLから取得、③プログラムを作成、④実行してファイルに出力(私の場合はExcel)

- API Keyの作成方法については以下のURLを参考にしました。
1.【データサイエンス】YouTubeのAPIを使ってYouTube内のデータを収集してみよう
https://blog.codecamp.jp/programming-api-youtube
2.Youtube Data API Key の取得手順
http://piyohiko.webcrow.jp/kids_tube/help/index.html

- 本スクリプトは、API Keyと動画のIDのXXXの部分を任意の値に編集、インポートが必要なモジュールが使える、Excelが使える環境であれば、コピペで動作させることができます。

##スクリプトとグラフ
```Sample.py


'''
YoutubeのAPIを使って、Youtube内の特定の動画の情報を取得し、
Excelに結果を吐き出して、その値を使って自動的にグラフを生成するプログラム　
'''
import json
import requests
import datetime
from apiclient.discovery import build #GoogleAnalyticsAPI　　
from openpyxl import Workbook
from openpyxl.chart import BarChart, Reference
import numpy as np
import time

YOUTUBE_API_KEY = "XXXXX" #自分で作成したAPI KEY
YOUTUBE_MOVIE_ID = 'XXXXXX' #取得したい動画のID
API_SERVICE_NAME = "youtube"
API_VERSION = "v3"
youtube = build(API_SERVICE_NAME, API_VERSION, developerKey=YOUTUBE_API_KEY)
list_statistics =[0]
list_dt2 =[0]
snippet = youtube.videos().list(part = 'snippet', id = YOUTUBE_MOVIE_ID).execute()['items'][0]['snippet']
#print('動画タイトル　：　',snippet['title'])
for i in range(10):
 statistics = youtube.videos().list(part = 'statistics', id = YOUTUBE_MOVIE_ID).execute()['items'][0]['statistics']
 list_statistics.append(statistics['viewCount'])
 dt2 = datetime.datetime.now()
 list_dt2.append(dt2)
wb = Workbook()
sheet = wb.create_sheet("sheet01",0) #sheet名
sheet.cell(row = 1, column = 1, value = "取得順序")
sheet.cell(row = 1, column = 2, value = "再生回数")
X = np.arange(10)
len_data = len(X)
for i in range(1, len_data):
    sheet.cell(row= i + 1, column = 1, value = X[i])
    sheet.cell(row= i + 1, column = 2, value = int(list_statistics[i]))
chart = BarChart()
values = Reference(sheet,
                min_row=1, min_col=2,
                max_row=11, max_col=2)
chart.add_data(values, titles_from_data=True)
xvalues = Reference(sheet,
                min_row=2, min_col=1,
                max_row=11, max_col=1)
chart.set_categories(xvalues)

sheet.add_chart(chart, "E15")
wb.save("視聴動向回数グラフ.xlsx") #左記ファイル名で保存


```
- このグラフは以下のyoutube（アーティストのLisaさんの炎のFIRST TAKE）の視聴回数を取得しました（URL末尾のv=XXXXXの部分が動画のIDになります）。<br>https://www.youtube.com/watch?v=4Q9DWZLaY2U
- なお、再生回数が一定なのは、取得期間である、10秒以内に回数が上昇していないからです。
![スクリーンショット 2022-01-12 20.57.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754596/c4aab967-7a7e-0ab4-ae0d-d7584d2c319b.png)

##おわりに
- 今回はPythonを使ってYoutubeAPIを呼び出し、取得したデータをエクセルに出力後、グラフ化するプログラムを紹介しました。
- カラムの位置とか割とつまずきましたが、意外と簡単にできますね！
- 引き続き、アウトプットたくさん作れるように努めていきます。
Ubuntu 20.04にARDroneSDK3をインストールする。

# 環境
OS:Ubuntu 20.04
# 事前準備
ARDroneSDK3はrepoを使ってバージョン管理を行っているので、repoを最初に導入する。

```
cd
mkdir ~/bin
PATH=~/bin:$PATH 
curl https://storage.googleapis.com/git-repo-downloads/repo > ~/bin/repo
chmod a+x ~/bin/repo
```
その他必要なものもインストール

```
sudo apt install libavahi-client
```

# SDKインストール
[ARDroneSDK3公式ドキュメント](https://developer.parrot.com/docs/SDK3/#go-deeper)に従いSDKを導入する。


```
mkdir ardronesdk3
cd ardronesdk3
repo init -u https://github.com/Parrot-Developers/arsdk_manifests.git
repo sync
./build.sh -p arsdk-native -t build-sdk -j
```
ビルドが完了するとout配下にSDKが出力される。

# サンプルプログラムのビルド、実行

[https://github.com/Parrot-Developers/Samples](https://github.com/Parrot-Developers/Samples)からサンプルプログラムをgit cloneする。


```
sudo apt install libcurses-* mplayer xterm  # サンプルプログラムをビルドする時に要求される
# SDKをインストールしたルートディレクトリにて（今回の場合であればardronesdk3)
git clone https://github.com/Parrot-Developers/Samples
./build.sh -p arsdk-native -t build-sample-BebopSample -j # サンプルプログラムのビルド開始
./out/arsdk-native/staging/native-wrapper.sh ./out/arsdk-native/staging/usr/bin/JumpingSumoSample
[INF] BebopSample | 21:12:23:019 | main:152 - Select your Bebop : Bebop (1) ; Bebop2 (2)
 -> Bebop2の場合は2を押してエンター
```
mplayerが起動し、Bebop2の映像が表示されればARDroneSDK3のインストールに成功
![Screenshot from 2022-01-12 21-06-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72035/f5569bc3-0c36-5439-99a9-9edfee5e0bbc.png)
企業が無償公開した新人エンジニア向け研修資料を読んで。

#はじめに#
2021年、様々な企業が自社の社内研修資料を無償で自社が運営するブログ等に公開したことが話題となりました。
投稿者はIT系専門学校１年生です。

閲覧できる内容は、IT業界の文化、ゲーム開発、AWS入門、などなど。
各社様々な資料を公開しました。
その中で、自分は以下の２つの公開資料を閲覧しました。
#閲覧した資料#
##株式会社　ミクシィ##

これだけでIT基礎知識がつけられると話題のミクシィの新人研修資料。
スライドだけではなく、講義動画も公開されています。

https://mixi-developers.mixi.co.jp/21-technical-training-a0bcdbf9bca0

私は「データベース基礎」の資料を閲覧しました。

感想
DBの基礎的なところから、モデルの種類、一つ一つの工程の詳しい内容から求められているものがとても分かりやすくまとめられていました。

##サイボウズ##

サイボウズではリモートワークが当たり前になっているとのことで、フルリモートでの研修が開催されました。興味を持った社外の皆様にも講義を体験できるようにと、こちらも講義動画付きの研修資料が公開されました。

https://blog.cybozu.io/entry/2021/07/20/100000

私は「ITコミュニティ文化と情報発信に共通する成長と貢献の要素」を閲覧しました。

感想
この講義を行った方はＩＴに携わった１０年を通して、ITをやっている人達が集まって技術を発表したり、作業をする場を都会ではないような場所でも勉強会やＩＴコミュニティがある状況を作りたい、大事にしたいというほど、ITは周りの人との関わりが重要なんだと思い今自分が専門学校に通っている時間はとても貴重な時間なんだなと思いました。
#終わりに#
今回２つの資料を閲覧した、企業が公開してる資料の内容は学校では知れない、企業が求めているもの、ほしい人材がわかりやすく書かれているなと感じました。また、改めて自分がIT業界に足を踏み込んでいるということを再実感し、より勉強する姿勢を改めようと思いました。
PowerShellで.bashrcのようなプロファイルを作成する方法

PowerShellでも、.bashrcのようなプロファイルが使えたら便利だな、と思い調べて使えるようにしました。
#環境
・Windows10 HOME Version 21H1
・PowerShell PSVersion 5.1.19041.1320

#実行権限の変更
権限を付与します。管理者権限でPowerShellを開き、以下のコマンドを入力します。
管理者権限でのPowerShellは、Windows検索でPowerShellを検索し、右クリックで
「管理者権限で実行する」を押下します。

```
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned
```

実行すると、以下のようなワーニングが出ます。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2496966/692acab7-faeb-fc2f-d9ec-1f406cadab2e.png)

「y」を押して実行する。

#プロファイルの作成
プロファイルは以下に置くと、他のユーザでも使用できるそうです。

```
C:\Windows\system32\WindowsPowerShell\v1.0
```

このディレクトリまでいき、プロファイルを作成します。

```
cd C:\Windows\system32\WindowsPowerShell\v1.0
New-Item profile.ps1
```

これでプロファイルが作成されました。
次に中身を編集していきます。
以下のコマンドで、PowerShellISEでprofile.ps1を開きます。

```
.\powershell_ise.exe .\profile.ps1
```


![無題2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2496966/c8b3e9e1-ce98-7f35-aeb4-51c6421b8b84.png)

私が使用しているプロファイルの一部を記載しておきます。

```
#決めたディレクトリに移動するコマンド
function 決めたコマンド(){
    Set-Location 好きなディレクトリ(\\で始まるファイルサーバのディレクトリも使用可能)
}
#ls -lad
function lld(){
    $path=pwd
    $path = (Convert-Path .)
    echo $path
}
#ls -ladをクリップにコピー
function lldc(){
    $outputencoding = [System.Text.Encoding]::GetEncoding(‘Shift_JIS’)
    $path=pwd
    $path = (Convert-Path .)
    $text = "file:////"+ $path
    Set-Clipboard $text
}
#ls -lをクリップにコピー
function llc(){
    $outputencoding = [System.Text.Encoding]::GetEncoding(‘Shift_JIS’)
    ls -n|clip
    ls -n
}
#touchコマンドをNew-Itemにエイリアス
function touch($args1){
    New-Item $args1
}
#exitコマンドのエイリアス
function x(){
    exit
}
#Windowsの画面をロック
function lock(){
    $mycmd = C:\Windows\system32\rundll32.exe user32.dll LockWorkStation
    Invoke-Expression $mycmd
}
#サクラエディタを引数付きで起動
function sakura($filename){
    Start-Process -FilePath "C:\Program Files (x86)\sakura\sakura.exe"
$filename
}
```

PowerShellを再起動すると、適用されています。
以上です。
バッチファイルでMD5演算と比較を行う

Windows10コマンドプロンプトの標準コマンドでMD5チェックサム演算し、あらかじめ用意されたチェックサムファイルの内容と比較し合否表示するだけのバッチファイルです。

（ファイル名規定）
　元データファイル名： XXX.DAT
　ハッシュファイル名： XXX.DAT.MD5
　　　　　　　　　　（元データファイルに拡張子".MD5"が付け足された名称のチェックサム文字列格納ファイル）

（実行例）
　MD5.BAT XXX.DAT

（実行結果）
　MD5:0123456789abcdef0123456789abcdef
　CHK:0123456789abcdef0123456789abcdef

 <font color="green">ハッシュ一致.</font>

　続行するには何かキーを押してください . . .

エラーの場合は

 <font color="red">ハッシュ不一致. [異常]</font>

と結果表示します。

【注意事項】
本記事中の内容はサンプルコードであり、ソフトウェアを使用した結果いかなる損害等が発生しても当方は一切責任を負いません。

●ソースコード

```ruby:MD5.BAT
@echo off
REM ハッシュ(MD5)を演算比較し結果を表示

setlocal
set CMD=certutil -hashfile %1 MD5
for /f "usebackq tokens=1,2" %%a in (`%CMD%`) do (
    if not "%%a"=="SHA1" (
        if not "%%a"=="CertUtil:" (
           set MD5=%%a
        )
    )
)

echo.
echo MD5:%MD5%

rem MD5比較ファイル
set DIF=%~1.md5
if not exist "%DIF%" (
    rem 比較ファイルが存在しない
    goto end
)

rem 比較ファイルからチェックサム読み込み
set /P TOK=<"%DIF%"
for /f "tokens=1" %%a in ("%TOK%") do (
    set CHK=%%a
)

echo CHK:%CHK%

rem 比較する
echo.

if %MD5%==%CHK% (
	echo [32m ハッシュ一致. [37m
) else (
	echo [31m ハッシュ不一致. [異常][37m
)

:end
echo.
endlocal
pause
exit /b
```

以上
タイムマネジメント手法

働き方改革が流行り出してから、生産性向上への意識が高まっています。その中で、決まった時間の中でいかに効率的に業務を進めるか、すなわちタイムマネジメントのスキルが求められるようになりました。そこで、業務改善の一貫として、タイムマネジメントの方法とポイントを紹介します。

##タイムマネジメントとは
・目標を達成するために時間を有効活用し、仕事を効率的・効果的に進めるための技術のこと。
・やるべき目標を達成するためにタスクを効率的に進め、時間を有効活用するためのビジネススキルのこと。
・仕事の効率性アップや生産力向上、モチベーションアップや精神の安定にもつながる革新的な時間管理術(タイムイノベーション)、時間管理のスキルのこと。

##タイムマネジメントの必要性
日々の仕事は次のような特性があります。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567448/cae9ec12-71d2-cca9-3356-c621f399413e.png)

##タイムマネジメントのメリット
＜短期的なメリット＞
・仕事の効率化を通して、仕事の「処理能力」が向上する
・仕事の効率化により、新たなことに取り組む時間を捻出できるようなる
＜中長期的なメリット＞
・新たに捻出される時間を使って、独自性の高い仕事へ特化し、自分自身の仕事領域を確立することができる
・新たに捻出される時間を使って、自らの知識・スキルを磨き、より高い価値を発揮できるようになる
・上記を通じてより高いレベルで仕事を行えるようになる

自分自身の仕事の処理能力を上げるといった、短期的なメリットを享受することは非常に重要ですが、その観点だけではタイムマネジメントの最終的な目的である「成果を上げる」ことまではつながりません。

そこで重要になるのが、仕事の効率化によって得られる新たな時間の使い方です。仕事の効率化による「処理能力の向上」が実現できれば、以前よりも使うことのできる時間が増えるはず。その増えた時間を、「対処ではなく改善・改革へつながる仕事」「自分のキャリア上、今後必要となる仕事」「社内で自分自身が確立したい仕事」といった、「重要だが緊急ではない仕事」へ振り分けることで、中長期的なメリットが得やすくなります。

#■ToDoリストについて
タイムマネジメント手法の一つとして、ToDoリストを作成してのタスク管理があります。そこで、ToDoリストについても以下紹介させていただきます。

##ToDoとは
・自分が「行わなくてはならない事項」や「行う事項」を「To-Do」といいます。
・To-Doは期限が設定されていないのに対してタスク管理は期限が設定されています。


##ToDoリストの作成手順
①漏れや重複のない「ToDoリスト」を作成するために、「ToDo一覧表」に記載すべき項目を洗い出す。(番号、種別、タイトル、内容、・・・)
②「ToDoリスト一覧表」に記載した「ToDo」を、月間(または週間)スケジュールに落とし込む。(優先順位、難易度、納期など)
③月間(または週間)スケジュールなどから、その日の行動予定を「日程表」に落とし込む。
④1日の終わりに作業の振り返りを行い、次のリスト作成に活かす。
⑤月間(または週間)スケジュールなどから、30分程度毎に管理した「1日の行動予定(日程表)」を作成する→作成する時間を要するという欠点もあるため、時間拘束されたイベント(会議や出張など)を書き込むことがベターな解決法。
2022年の Flutter ロードマップ【要約】


最近、Flutterのロードマップが更新され、2022年のものが追加されました。

Flutterの最新情報は追いかけたい、でも英語読むのはめんどくさい！
そんな方に向けて、本記事ではこのロードマップの要約を記載します。

あくまで個人の要約ですので、細かいニュアンスや詳細を知りたい方は、
下記の元記事を読んでください。

https://github.com/flutter/flutter/wiki/Roadmap#web

##時間がない人向け##

短くまとめると、以下の内容でした。

- 開発者体験向上させる
- デスクトップのサポートをstableチャンネルにする
- Webも色々向上、ページ埋め込み機能を実装予定だ
- Material 3のサポートとか色々予定
- Dartに静的メタプログラミングの追加予定

##全文の要約##

###2022年、尽力する部分###
####開発者体験####
開発者が愛するSDKを作りたい。
例えば、

- 共通の問題を解決するwidgetやプラグインの追加
- 現状のAPIの整理
- 単純に多く使われるパターンのAPIの導入
- エラーメッセージの向上
- 開発ツールとIDEプラグインの進化
- 新しいLint(コード矯正ルール)の追加
- フレームワーク、エンジンのバグの修正
- APIドキュメントの向上
- より使いやすいサンプルの作成
- Dart to JS シナリオでのスタックトレースの向上

####デスクトップ####
デスクトップのサポートをstableチャンネルにすることを2022年計画している。
今後はWindowsから始まり、Linux,macOSと一つずつプラットフォームのテストと発表に重点を置いていく予定。
リグレッション・テスト・スイート（過去に発生したバグが再発していないかを確かめる全てのテスト集合）
を拡大することが重要。

####Web####
パフォーマンス、プラグインの品質、便利さ、ブラウザを跨いでの継続性の向上を図る。
他のFlutterでないHTMLページの中にFLutterアプリケーションを埋め込むことをより簡単にしたい。

####フレームワークとエンジン####
Material 3のサポートをするMaterialライブラリをアップデートする予定。
プラットフォームに限らず、Androidに忠実に向上させることが目的のため。
"cross-widget text selection"を実装する予定。
これは、ウェブに限らず、よりウェブプラットフォームのようにしたいため。

（”cross-widget text selection"の上手い訳がわかりませんでした、、、
コメントでご教授いただけますと幸いです。）

全てのプラットフォームでテキスト編集を向上させていく予定。
例えば、デスクトップのテキスト編集の習慣やiPadOSの手書き文字認識など。

デスクトップとWebに対して実装されるOSに沿ったコンテキストメニューやメニューバーを提供する予定。

一つのisolateから複数のウィンドウをレンダリングするサポートの実験をする予定。

####Dart####
静的メタプログラミングのような大きな機能と、いくつかの小さな改良（パッケージのインポート構文の改良を含む）を2022年に実装予定。

WasmGCのタイムリーな標準化を条件として、WasmへコンパイルするためにDartのコンパイルツールチェーンを拡張する予定。

####Jank####
2021年に多くのジャンク周りのissueを解決してきたが、シェーダーをどう使うか、考え直す必要があると結論付けた。
結果として、グラフィックのバックエンドを再構築していった。
2022年にはiOSのFlutterを新しいアーキテクチャに移行する予定。
そして、この経験の元、他のプラットフォームについて解決していく。
付け加えて、新しいDisplayListシステムによって実現されたような、
他のパフォーマンスの改善や、パフォーマンスの自己観察要素を実装していく予定。

###その他###
32ビットのiOSのサポートを終了する予定。

サプライチェーンのセキュリティへの投資を拡大し、インフラをSLSAレベル4に記載された要件に一致させる予定。


##まとめ##
本記事では2022年のFlutterロードマップの要約を行いました。
個人的には静的メタプログラミングや、Material 3への対応が気になるところです。

今年もFlutter、盛り上がりそうですね。
ぜひ一緒に盛り上げていきましょう。


##参考##

https://www.itmedia.co.jp/im/articles/1111/07/news187.html

https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%BF%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0#:~:text=%E3%83%A1%E3%82%BF%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%EF%BC%88Metaprogramming%EF%BC%89%E3%81%A8%E3%81%AF,%E3%81%8C%E3%83%A1%E3%82%BF%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E3%81%A7%E3%81%82%E3%82%8B%E3%80%82

https://e-words.jp/w/WebAssembly.html